feat!: update colors (#794)

gravity-ui · Jul 14, 2023 · 6c67fef · 6c67fef
1 parent 7f67a36
commit 6c67fef
Show file tree

Hide file tree

Showing 60 changed files with 1,266 additions and 1,255 deletions.
diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -324,8 +324,8 @@ $iconWidth: 16px;
         &_outlined-danger,
         &_flat-danger {
             &#{$block}_selected {
-                --yc-button-background-color: var(--g-color-base-danger);
-                --yc-button-background-color-hover: var(--g-color-base-danger-hover);
+                --yc-button-background-color: var(--g-color-base-danger-light);
+                --yc-button-background-color-hover: var(--g-color-base-danger-light-hover);
 
                 @include button-text-color(var(--g-color-text-danger));
 

diff --git a/src/components/Button/__stories__/examples/ButtonExampleView/ButtonExampleView.tsx b/src/components/Button/__stories__/examples/ButtonExampleView/ButtonExampleView.tsx
@@ -75,7 +75,7 @@ ButtonExampleViewFlat.code = `
 
 export function ButtonExampleViewSpecial() {
     return (
-        <DocsExample background="var(--yc-color-infographics-info-heavy)">
+        <DocsExample background="var(--g-color-base-brand)">
             <Button view="normal-contrast" size="l">
                 Normal
             </Button>

diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss
@@ -87,7 +87,7 @@ $block: '.#{variables.$ns}card';
 
             &:focus::after {
                 content: '';
-                box-shadow: 0 0 0 2px var(--yc-color-line-misc);
+                box-shadow: 0 0 0 2px var(--g-color-line-misc);
             }
 
             &:focus:not(:focus-visible)::after {
@@ -124,7 +124,7 @@ $block: '.#{variables.$ns}card';
                 border: 1px solid var(--g-color-line-info);
             }
             &#{$block}_view_filled {
-                background-color: var(--g-color-base-info);
+                background-color: var(--g-color-base-info-light);
             }
         }
 
@@ -133,7 +133,7 @@ $block: '.#{variables.$ns}card';
                 border: 1px solid var(--g-color-line-positive);
             }
             &#{$block}_view_filled {
-                background-color: var(--g-color-base-positive);
+                background-color: var(--g-color-base-positive-light);
             }
         }
 
@@ -142,7 +142,7 @@ $block: '.#{variables.$ns}card';
                 border: 1px solid var(--g-color-line-warning);
             }
             &#{$block}_view_filled {
-                background-color: var(--g-color-base-warning);
+                background-color: var(--g-color-base-warning-light);
             }
         }
 
@@ -151,7 +151,7 @@ $block: '.#{variables.$ns}card';
                 border: 1px solid var(--g-color-line-danger);
             }
             &#{$block}_view_filled {
-                background-color: var(--g-color-base-danger);
+                background-color: var(--g-color-base-danger-light);
             }
         }
 

diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss
@@ -150,48 +150,48 @@ $transitionTimingFunction: ease-in-out;
     &_theme {
         &_normal {
             @include themeState(
-                var(--g-color-base-misc),
-                var(--g-color-base-misc-hover),
+                var(--g-color-base-misc-light),
+                var(--g-color-base-misc-light-hover),
                 var(--g-color-text-misc-heavy)
             );
         }
 
         &_success {
             @include themeState(
-                var(--g-color-base-positive),
-                var(--g-color-base-positive-hover),
+                var(--g-color-base-positive-light),
+                var(--g-color-base-positive-light-hover),
                 var(--g-color-text-positive-heavy)
             );
         }
 
         &_info {
             @include themeState(
-                var(--g-color-base-info),
-                var(--g-color-base-info-hover),
+                var(--g-color-base-info-light),
+                var(--g-color-base-info-light-hover),
                 var(--g-color-text-info-heavy)
             );
         }
 
         &_warning {
             @include themeState(
-                var(--g-color-base-warning),
-                var(--g-color-base-warning-hover),
+                var(--g-color-base-warning-light),
+                var(--g-color-base-warning-light-hover),
                 var(--g-color-text-warning-heavy)
             );
         }
 
         &_danger {
             @include themeState(
-                var(--g-color-base-danger),
-                var(--g-color-base-danger-hover),
+                var(--g-color-base-danger-light),
+                var(--g-color-base-danger-light-hover),
                 var(--g-color-text-danger-heavy)
             );
         }
 
         &_unknown {
             @include themeState(
-                var(--g-color-base-neutral),
-                var(--g-color-base-neutral-hover),
+                var(--g-color-base-neutral-light),
+                var(--g-color-base-neutral-light-hover),
                 var(--g-color-text-complementary)
             );
         }

diff --git a/src/components/List/README.md b/src/components/List/README.md
@@ -27,7 +27,7 @@ Lets you filter and sort items, render items of different height, and select the
 | onItemClick       | `Function`        |          |         | Item click handler. `(item: any, index: number, fromKeyboard?: bool) => void`                                                                                                                          |
 | deactivateOnLeave | `Boolean`         |          | true    | If the flag is set, an item's selection is deactivated once the cursor leaves the item or the list loses its focus. If not set, the last selected item will always be selected.                        |
 | activeItemIndex   | `Number`          |          |         | If a value is set, an item with this index is rendered as active ~~until the curse is lifted~~.                                                                                                        |
-| selectedItemIndex | `Number`          |          |         | If a value is set, an item with this index is rendered as selected (the background color is from `--yc-color-selection`).                                                                              |
+| selectedItemIndex | `Number`          |          |         | If a value is set, an item with this index is rendered as selected (the background color is from `--g-color-base-selection`).                                                                          |
 | itemClassName     | `String`          |          |         | Custom class name to be added to an item container                                                                                                                                                     |
 | itemsClassName    | `String`          |          |         | Custom class name to be added to an item list                                                                                                                                                          |
 

diff --git a/src/components/List/__stories__/ListShowcase.tsx b/src/components/List/__stories__/ListShowcase.tsx
@@ -126,7 +126,7 @@ export function ListShowcase() {
                         style={{
                             position: 'relative',
                             zIndex: 2000,
-                            background: 'var(--yc-color-base)',
+                            background: 'var(--g-color-base-background)',
                         }}
                     >
                         <div className={b('subtitle')}>{'Non virtualized sortable list'}</div>

diff --git a/src/components/Popover/__stories__/PopoverDemo.scss b/src/components/Popover/__stories__/PopoverDemo.scss
@@ -14,7 +14,7 @@ $block: '.#{$ns}popover-demo';
     }
 
     &__content {
-        border: 4px solid var(--yc-color-promo-text-tomato);
+        border: 4px solid var(--g-color-line-danger);
         display: flex;
         flex-direction: column;
         align-items: center;
@@ -23,7 +23,7 @@ $block: '.#{$ns}popover-demo';
     }
 
     &__title {
-        color: var(--yc-color-promo-text-tomato);
+        color: var(--g-color-text-danger);
         margin: 0;
     }
 

diff --git a/src/components/Popup/Popup.scss b/src/components/Popup/Popup.scss
@@ -98,7 +98,7 @@ $transition-distance: 10px;
         border-radius: 4px;
         background-color: var(--yc-popup-background-color);
         box-shadow: 0 0 0 var(--yc-popup-border-width) var(--yc-popup-border-color),
-            0 8px 20px var(--yc-popup-border-width) var(--yc-color-sfx-shadow);
+            0 8px 20px var(--yc-popup-border-width) var(--g-color-sfx-shadow);
         outline: none;
 
         // Corners rounding for content

diff --git a/src/components/Progress/Progress.scss b/src/components/Progress/Progress.scss
@@ -58,27 +58,27 @@ $progress-xs-height: 4px;
         transition: transform 0.6s ease, width 0.6s ease, background-color 0.6s ease;
 
         &_theme_default {
-            background-color: var(--yc-color-infographics-neutral-medium);
+            background-color: var(--g-color-base-neutral-medium);
         }
 
         &_theme_success {
-            background-color: var(--yc-color-infographics-positive-medium);
+            background-color: var(--g-color-base-positive-medium);
         }
 
         &_theme_warning {
-            background-color: var(--yc-color-infographics-warning-medium);
+            background-color: var(--g-color-base-warning-medium);
         }
 
         &_theme_danger {
-            background-color: var(--yc-color-infographics-danger-medium);
+            background-color: var(--g-color-base-danger-medium);
         }
 
         &_theme_info {
-            background-color: var(--yc-color-infographics-info-medium);
+            background-color: var(--g-color-base-info-medium);
         }
 
         &_theme_misc {
-            background-color: var(--yc-color-infographics-misc-medium);
+            background-color: var(--g-color-base-misc-medium);
         }
 
         &_loading {

diff --git a/src/components/Select/components/SelectClear/SelectClear.scss b/src/components/Select/components/SelectClear/SelectClear.scss
@@ -12,7 +12,7 @@ $block: '.#{variables.$ns-new}select-clear';
     z-index: 1;
 
     &:focus-visible {
-        border: 1px solid var(--yc-color-line-generic-active);
+        border: 1px solid var(--g-color-line-generic-active);
     }
 
     &_size_s {
@@ -43,10 +43,10 @@ $block: '.#{variables.$ns-new}select-clear';
         --yc-button-background-color: transparent;
         --yc-button-background-color-hover: transparent;
 
-        color: var(--yc-color-text-secondary);
+        color: var(--g-color-text-secondary);
 
         #{$block}:hover & {
-            color: var(--yc-color-text-primary);
+            color: var(--g-color-text-primary);
         }
     }
 }
diff --git a/src/components/Toaster/Toast/Toast.scss b/src/components/Toaster/Toast/Toast.scss
@@ -37,41 +37,41 @@ $block: '.#{variables.$ns}toast';
 
     &_info {
         & #{$containerClass}:before {
-            background-color: var(--yc-color-base-info);
+            background-color: var(--g-color-base-info-light);
         }
 
         & #{$iconClass} {
-            color: var(--yc-color-text-info);
+            color: var(--g-color-text-info);
         }
     }
 
     &_success {
         & #{$containerClass}:before {
-            background-color: var(--yc-color-base-positive);
+            background-color: var(--g-color-base-positive-light);
         }
 
         & #{$iconClass} {
-            color: var(--yc-color-text-positive);
+            color: var(--g-color-text-positive);
         }
     }
 
     &_warning {
         & #{$containerClass}:before {
-            background-color: var(--g-color-base-warning);
+            background-color: var(--g-color-base-warning-light);
         }
 
         & #{$iconClass} {
-            color: var(--yc-color-text-warning);
+            color: var(--g-color-text-warning);
         }
     }
 
     &_error {
         & #{$containerClass}:before {
-            background-color: var(--yc-color-base-danger);
+            background-color: var(--g-color-base-danger-light);
         }
 
         & #{$iconClass} {
-            color: var(--yc-color-text-danger);
+            color: var(--g-color-text-danger);
         }
     }
 

diff --git a/src/components/Toaster/__stories__/ToasterShowcase.scss b/src/components/Toaster/__stories__/ToasterShowcase.scss
@@ -7,19 +7,19 @@
 
     &__icon {
         &_info {
-            color: var(--yc-color-infographics-info-heavy);
+            color: var(--g-color-base-info-heavy);
         }
 
         &_success {
-            color: var(--yc-color-infographics-positive-heavy);
+            color: var(--g-color-base-positive-heavy);
         }
 
         &_warning {
-            color: var(--yc-color-infographics-warning-heavy);
+            color: var(--g-color-base-warning-heavy);
         }
 
         &_error {
-            color: var(--yc-color-infographics-danger-heavy);
+            color: var(--g-color-base-danger-heavy);
         }
     }
 }
diff --git a/src/components/controls/common/ClearButton/ClearButton.scss b/src/components/controls/common/ClearButton/ClearButton.scss
@@ -7,9 +7,9 @@ $block: '.#{variables.$ns-new}clear-button';
     --yc-button-background-color-hover: transparent;
 
     margin: auto 0;
-    color: var(--yc-color-text-hint);
+    color: var(--g-color-text-hint);
 
     &:hover {
-        color: var(--yc-color-text-primary);
+        color: var(--g-color-text-primary);
     }
 }
diff --git a/src/demo/DocsDecorator/DocsDecorator.scss b/src/demo/DocsDecorator/DocsDecorator.scss
@@ -82,7 +82,7 @@ $root: '.docs-decorator';
         @include mixins.text-code-inline-2;
         line-height: 1;
         padding: 1px 4px;
-        background: var(--g-color-base-misc);
+        background: var(--g-color-base-misc-light);
         color: var(--g-color-text-misc);
     }
 

diff --git a/src/demo/Showcase/Showcase.scss b/src/demo/Showcase/Showcase.scss
@@ -1,7 +1,6 @@
 @use '../../../styles/mixins';
 
 .showcase {
-    padding: 50px;
     display: flex;
     flex-direction: column;