fix: styles for dark theme

qradle-yndx · qradle-yndx · commit 795a618e2c77 · 2025-04-08T12:37:35.000+03:00
diff --git a/playground/src/app/components/C9RComponent.scss b/playground/src/app/components/C9RComponent.scss
@@ -25,6 +25,6 @@ $block: '.c9r-component';
 
     &__editor-info {
         font-size: 14px;
-        color: var(--g-color-private-black-300);
+        color: var(--g-color-text-secondary);
     }
 }
diff --git a/playground/src/styles/globals.scss b/playground/src/styles/globals.scss
@@ -1,4 +1,5 @@
 @import '../../../styles/styles.scss';
+@import '../../../src/editor-v2/styles/root.scss';
 
 html,
 body {
diff --git a/src/editor-v2/components/DynamicForm/FieldBase/FieldBase.scss b/src/editor-v2/components/DynamicForm/FieldBase/FieldBase.scss
@@ -1,4 +1,3 @@
-@import '../../../styles/root.scss';
 @import '../../../styles/variables.scss';
 @import '../../../styles/mixins.scss';
 
diff --git a/src/editor-v2/components/Panels/Panels.scss b/src/editor-v2/components/Panels/Panels.scss
@@ -1,4 +1,3 @@
-@import '../../styles/root.scss';
 @import '../../styles/variables.scss';
 @import '../../styles/mixins.scss';
 
diff --git a/src/editor-v2/components/Sidebar/Sidebar.scss b/src/editor-v2/components/Sidebar/Sidebar.scss
@@ -1,4 +1,3 @@
-@import '../../styles/root.scss';
 @import '../../styles/variables.scss';
 @import '../../styles/mixins.scss';
 
diff --git a/src/editor-v2/components/Tabs/Tabs.scss b/src/editor-v2/components/Tabs/Tabs.scss
@@ -8,7 +8,7 @@ $block: '.#{$ns}tabs';
     width: 100%;
 
     &__item {
-        color: var(--g-color-private-black-300);
+        color: var(--g-color-text-hint);
         font-weight: 500;
         letter-spacing: 0.5px;
         cursor: pointer;
diff --git a/src/editor-v2/containers/BigOverlay/BigOverlay.scss b/src/editor-v2/containers/BigOverlay/BigOverlay.scss
@@ -1,4 +1,3 @@
-@import '../../styles/root.scss';
 @import '../../styles/variables.scss';
 @import '../../styles/mixins.scss';
 
diff --git a/src/editor-v2/containers/BlockConfig/BlockConfig.scss b/src/editor-v2/containers/BlockConfig/BlockConfig.scss
@@ -1,4 +1,3 @@
-@import '../../styles/root.scss';
 @import '../../styles/variables.scss';
 @import '../../styles/mixins.scss';
 
diff --git a/src/editor-v2/containers/BlocksList/BlocksList.scss b/src/editor-v2/containers/BlocksList/BlocksList.scss
@@ -1,4 +1,3 @@
-@import '../../styles/root.scss';
 @import '../../styles/variables.scss';
 @import '../../styles/mixins.scss';
 
@@ -31,16 +30,16 @@ $block: '.#{$ns}blocks-list';
 
     &__name {
         justify-self: flex-end;
-        color: var(--g-color-text-dark-secondary);
+        color: var(--g-color-text-secondary);
     }
 
     &__title {
-        color: var(--g-color-text-dark-secondary);
+        color: var(--g-color-text-secondary);
         margin-bottom: 10px;
     }
 
     &__icon {
-        color: var(--g-color-text-dark-complementary);
+        color: var(--g-color-text-complementary);
     }
 
     &__group {
diff --git a/src/editor-v2/containers/Editor/Editor.scss b/src/editor-v2/containers/Editor/Editor.scss
@@ -1,4 +1,3 @@
-@import '../../styles/root.scss';
 @import '../../styles/variables.scss';
 @import '../../styles/mixins.scss';
 
diff --git a/src/editor-v2/containers/GlobalConfig/GlobalConfig.scss b/src/editor-v2/containers/GlobalConfig/GlobalConfig.scss
@@ -1,4 +1,3 @@
-@import '../../styles/root.scss';
 @import '../../styles/variables.scss';
 @import '../../styles/mixins.scss';
 
diff --git a/src/editor-v2/containers/MiddleScreen/MiddleScreen.scss b/src/editor-v2/containers/MiddleScreen/MiddleScreen.scss
@@ -1,4 +1,3 @@
-@import '../../styles/root.scss';
 @import '../../styles/variables.scss';
 @import '../../styles/mixins.scss';
 
@@ -18,7 +17,7 @@ $block: '.#{$ns}middle-screen';
         flex: 1 1 auto;
         overflow-y: auto;
         // height: 100%;
-        background-color: var(--g-color-text-dark-secondary);
+        background-color: var(--g-color-text-secondary);
     }
 
     &__wrapper {
diff --git a/src/editor-v2/containers/Overlay/Overlay.scss b/src/editor-v2/containers/Overlay/Overlay.scss
@@ -1,4 +1,3 @@
-@import '../../styles/root.scss';
 @import '../../styles/variables.scss';
 @import '../../styles/mixins.scss';
 
diff --git a/src/editor-v2/containers/Source/Source.scss b/src/editor-v2/containers/Source/Source.scss
@@ -1,4 +1,3 @@
-@import '../../styles/root.scss';
 @import '../../styles/variables.scss';
 @import '../../styles/mixins.scss';
 
diff --git a/src/editor-v2/containers/SourceCode/SourceCode.scss b/src/editor-v2/containers/SourceCode/SourceCode.scss
@@ -1,4 +1,3 @@
-@import '../../styles/root.scss';
 @import '../../styles/variables.scss';
 @import '../../styles/mixins.scss';
 
diff --git a/src/editor-v2/containers/Tree/DragContext.scss b/src/editor-v2/containers/Tree/DragContext.scss
@@ -1,4 +1,3 @@
-@import '../../styles/root.scss';
 @import '../../styles/variables.scss';
 @import '../../styles/mixins.scss';
 
@@ -7,8 +6,8 @@ $block: '.#{$ns}preview';
 #{$block} {
     position: absolute;
     height: auto;
-    background-color: var(--g-color-base-brand-light);
-    border: 1px dashed var(--g-color-line-brand);
+    background-color: var(--g-color-text-hint);
+    border: 1px dashed var(--g-color-text-primary);
     border-radius: 4px;
     padding: 8px;
     z-index: 1000;
diff --git a/src/editor-v2/containers/Tree/Tree.scss b/src/editor-v2/containers/Tree/Tree.scss
@@ -1,4 +1,3 @@
-@import '../../styles/root.scss';
 @import '../../styles/variables.scss';
 @import '../../styles/mixins.scss';
 
diff --git a/src/editor-v2/containers/Tree/TreeContent.scss b/src/editor-v2/containers/Tree/TreeContent.scss
@@ -1,4 +1,3 @@
-@import '../../styles/root.scss';
 @import '../../styles/variables.scss';
 @import '../../styles/mixins.scss';
 
@@ -12,10 +11,6 @@ $block: '.#{$ns}tree-content';
         margin-bottom: 8px;
         border-radius: 4px;
         transition: background-color 0.2s;
-
-        &:hover {
-            background-color: var(--g-color-text-light-secondary);
-        }
     }
 
     &__children {
diff --git a/src/editor-v2/containers/Tree/TreeItem.scss b/src/editor-v2/containers/Tree/TreeItem.scss
@@ -1,4 +1,3 @@
-@import '../../styles/root.scss';
 @import '../../styles/variables.scss';
 @import '../../styles/mixins.scss';
 
@@ -50,7 +49,7 @@ $block: '.#{$ns}tree-item';
     }
 
     &__type {
-        color: var(--g-color-text-dark-secondary);
+        color: var(--g-color-text-secondary);
     }
 
     &__title {
@@ -63,9 +62,5 @@ $block: '.#{$ns}tree-item';
         margin-bottom: 0;
         border-radius: 4px;
         transition: background-color 0.2s;
-
-        &:hover {
-            background-color: var(--g-color-text-light-secondary);
-        }
     }
 }
diff --git a/src/editor-v2/containers/ViewSwitches/ViewSwitches.scss b/src/editor-v2/containers/ViewSwitches/ViewSwitches.scss
@@ -1,4 +1,3 @@
-@import '../../styles/root.scss';
 @import '../../styles/variables.scss';
 @import '../../styles/mixins.scss';
 
diff --git a/src/editor-v2/styles/root.scss b/src/editor-v2/styles/root.scss
@@ -1,12 +1,11 @@
 .g-root {
-    --g-color-base-brand: var(--g-color-private-black-550-solid);
-    --g-color-base-brand-hover: var(--g-color-private-black-600-solid);
+    --g-color-base-brand: var(--g-color-text-primary);
+    --g-color-base-brand-hover: var(--g-color-text-complementary);
     --g-color-base-selection: var(--g-color-private-black-200);
     --g-color-base-selection-hover: var(--g-color-private-black-300);
     --g-color-base-brand: var(--g-color-private-black-850-solid);
     --g-color-base-brand-hover: var(--g-color-private-black-700-solid);
     --g-color-text-brand-contrast: var(--g-color-text-light-primary);
-    --g-color-line-brand: var(--g-color-text-primary);
-    --g-color-text-brand: var(--g-color-private-brand-700-solid);
     --g-color-text-brand-heavy: var(--g-color-private-black-700-solid);
+    --g-color-line-brand: var(--g-color-text-primary);
 }

Original file line number	Diff line number	Diff line change
`@@ -25,6 +25,6 @@ $block: '.c9r-component';`
`25`	`25`
`26`	`26`	`&__editor-info {`
`27`	`27`	`font-size: 14px;`
`28`		`- color: var(--g-color-private-black-300);`
	`28`	`+ color: var(--g-color-text-secondary);`
`29`	`29`	`}`
`30`	`30`	`}`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,5 @@`
`1`	`1`	`@import '../../../styles/styles.scss';`
	`2`	`+@import '../../../src/editor-v2/styles/root.scss';`
`2`	`3`
`3`	`4`	`html,`
`4`	`5`	`body {`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-@import '../../../styles/root.scss';`
`2`	`1`	`@import '../../../styles/variables.scss';`
`3`	`2`	`@import '../../../styles/mixins.scss';`
`4`	`3`
Original file line number	Diff line number	Diff line change
`@@ -1,4 +1,3 @@`
`1`		`-@import '../../styles/root.scss';`
`2`	`1`	`@import '../../styles/variables.scss';`
`3`	`2`	`@import '../../styles/mixins.scss';`
`4`	`3`