style: force rcv colors for rcv elements

MykolaGolubyev · MykolaGolubyev · commit 53cd2869e9f1 · 2021-02-23T21:33:44.000-05:00
diff --git a/src/components/hotkeys/HotKeyPill.css b/src/components/hotkeys/HotKeyPill.css
@@ -1,6 +1,9 @@
 .rcv-hotkey-pill {
     font-size: 12px;
 
+    color: var(--rcv-primary-text-color);
+    background-color: var(--rcv-primary-background-color);
+
     margin-right: 4px;
     margin-left: 4px;
 
diff --git a/src/components/layouts/DemoLayoutItemTitle.css b/src/components/layouts/DemoLayoutItemTitle.css
@@ -0,0 +1,8 @@
+.rcv-demo-layout-item {
+    background-color: var(--rcv-preview-background-color);
+}
+
+.rcv-demo-layout-item-title {
+    color: var(--rcv-primary-text-color);
+    background-color: var(--rcv-preview-background-color);
+}
diff --git a/src/components/layouts/GridLayout.css b/src/components/layouts/GridLayout.css
@@ -1,6 +1,7 @@
 .rcv-grid-layout {
     display: grid;
     grid-gap: 20px;
+    background-color: var(--rcv-preview-background-color);
 }
 
 .rcv-grid-layout .rcv-demo-layout-item {
diff --git a/src/components/registry/Registry.ts b/src/components/registry/Registry.ts
@@ -10,6 +10,8 @@ import { wrapComponent, WrapperProps } from './componentWrapper';
 import { findAndReturn } from './listUtils';
 import { createRegistratorForMiniApp, createRegistratorForSingle } from '../registrators/registrators';
 
+import '../layouts/DemoLayoutItemTitle.css';
+
 export interface RegistryConfig {
     componentWrapper?: React.ComponentType<WrapperProps>;
 }
diff --git a/src/components/viewer/ComponentViewer.css b/src/components/viewer/ComponentViewer.css
@@ -13,6 +13,17 @@
   --rcv-registry-selection-background-color: #fff;
   --rcv-filter-background-color: #fff;
   --rcv-preview-background-color: #fff;
+
+  --rcv-toolbar-background-color: #f2f2f2;
+
+  --rcv-dropdown-color: #313149;
+  --rcv-dropdown-background-color: #f2f2f2;
+
+  --rcv-dropdown-selected-text-color: var(--rcv-primary-text-color);
+  --rcv-dropdown-selected-background-color: #ccc;
+
+  --rcv-dropdown-selection-text-color: var(--rcv-primary-text-color);
+  --rcv-dropdown-selection-background-color: #fff;
 }
 
 body {
diff --git a/src/components/viewer/RegistrySelection.css b/src/components/viewer/RegistrySelection.css
@@ -7,6 +7,7 @@
 
 .rcv-registry-selection-tab {
   color: var(--rcv-secondary-text-color);
+  background-color: var(--rcv-registry-selection-background-color);
   padding: 0 15px;
 
   cursor: pointer;
diff --git a/src/components/viewer/toc/TableOfContents.css b/src/components/viewer/toc/TableOfContents.css
@@ -6,12 +6,15 @@
 .rcv-toc-entry-name {
   flex-shrink: 0;
   font-size: 14px;
+
+  color: var(--rcv-primary-text-color);
+  background-color: var(--rcv-primary-background-color);
+
   white-space: nowrap;
   overflow-x: hidden;
   text-overflow: ellipsis;
   padding: 8px 15px;
   border-bottom: 1px solid var(--rcv-primary-border-color);
-  color: var(--rcv-primary-text-color);
   cursor: pointer;
 }
 
diff --git a/src/components/viewer/toolbar/Toolbar.css b/src/components/viewer/toolbar/Toolbar.css
@@ -1,6 +1,9 @@
 .rcv-toolbar {
     display: flex;
     align-items: center;
+
+    background-color: var(--rcv-toolbar-background-color);
+
     height: 100%;
     margin-right: 8px;
 }
@@ -12,6 +15,9 @@
     width: 18px;
     height: 18px;
 
+    color: var(--rcv-primary-text-color);
+    background-color: var(--rcv-toolbar-background-color);
+
     line-height: 1;
     user-select: none;
     cursor: pointer;
diff --git a/src/components/viewer/toolbar/ToolbarDropDown.css b/src/components/viewer/toolbar/ToolbarDropDown.css
@@ -2,10 +2,15 @@
     display: flex;
     align-items: center;
 
+    background-color: var(--rcv-dropdown-background-color);
+
     margin-right: 8px;
 }
 
 .rcv-toolbar-drop-down-label {
+    background-color: var(--rcv-dropdown-background-color);
+    color: var(--rcv-dropdown-color);
+
     margin-right: 8px;
 }
 
@@ -14,7 +19,8 @@
     box-sizing: border-box;
 
     padding: 2px;
-    background-color: #eee;
+    color: var(--rcv-dropdown-selected-text-color);
+    background-color: var(--rcv-dropdown-selected-background-color);
 
     cursor: pointer;
     user-select: none;
@@ -26,7 +32,9 @@
 
     font-size: var(--rcv-font-size);
     font-family: var(--rcv-font-family);
-    background-color: #fff;
+
+    color: var(--rcv-dropdown-selection-text-color);
+    background-color: var(--rcv-dropdown-selection-background-color);
 
     width: var(--rcv-drop-down-width);
     box-sizing: border-box;
@@ -38,12 +46,30 @@
 }
 
 .rcv-toolbar-drop-down-selection-item {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
     padding: 4px;
     cursor: pointer;
+
+    color: var(--rcv-dropdown-selection-text-color);
+    background-color: var(--rcv-dropdown-selection-background-color);
+}
+
+.rcv-toolbar-drop-down-selection-item-label {
+    color: var(--rcv-dropdown-selection-text-color);
+    background-color: var(--rcv-dropdown-selection-background-color);
 }
 
 .rcv-toolbar-drop-down-selection-item:hover {
-    background-color: #eee;
+    color: var(--rcv-dropdown-selected-text-color);
+    background-color: var(--rcv-dropdown-selected-background-color);
+}
+
+.rcv-toolbar-drop-down-selection-item:hover .rcv-toolbar-drop-down-selection-item-label {
+    color: var(--rcv-dropdown-selected-text-color);
+    background-color: var(--rcv-dropdown-selected-background-color);
 }
 
 .rcv-toolbar-drop-down-selection-placement {
diff --git a/src/components/viewer/toolbar/ToolbarDropDownSelectionItem.css b/src/components/viewer/toolbar/ToolbarDropDownSelectionItem.css
diff --git a/src/components/viewer/toolbar/ToolbarDropDownSelectionItem.tsx b/src/components/viewer/toolbar/ToolbarDropDownSelectionItem.tsx
@@ -3,8 +3,6 @@ import * as React from 'react';
 import { HotKeyPill } from '../../hotkeys/HotKeyPill';
 import { DropDownItem } from '../dropdown/DropDownItem';
 
-import './ToolbarDropDownSelectionItem.css';
-
 export interface Props {
     item: DropDownItem;
     onItemSelect(label: string): void;

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,7 @@`
`1`	`1`	`.rcv-grid-layout {`
`2`	`2`	`display: grid;`
`3`	`3`	`grid-gap: 20px;`
	`4`	`+ background-color: var(--rcv-preview-background-color);`
`4`	`5`	`}`
`5`	`6`
`6`	`7`	`.rcv-grid-layout .rcv-demo-layout-item {`
Original file line number	Diff line number	Diff line change
`@@ -10,6 +10,8 @@ import { wrapComponent, WrapperProps } from './componentWrapper';`
`10`	`10`	`import { findAndReturn } from './listUtils';`
`11`	`11`	`import { createRegistratorForMiniApp, createRegistratorForSingle } from '../registrators/registrators';`
`12`	`12`
	`13`	`+import '../layouts/DemoLayoutItemTitle.css';`
	`14`	`+`
`13`	`15`	`export interface RegistryConfig {`
`14`	`16`	`componentWrapper?: React.ComponentType<WrapperProps>;`
`15`	`17`	`}`