feat!: text semantic colors update (#484)

gravity-ui · Jan 26, 2023 · dbbf04a · dbbf04a
1 parent 89c8885
commit dbbf04a
Show file tree

Hide file tree

Showing 8 changed files with 85 additions and 26 deletions.
diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss
@@ -206,23 +206,23 @@ $transitionTimingFunction: ease-in-out;
             @include themeState(
                 var(--yc-color-base-misc),
                 var(--yc-color-base-misc-hover),
-                var(--yc-color-text-misc)
+                var(--yc-color-text-misc-heavy)
             );
         }
 
         &_success {
             @include themeState(
                 var(--yc-color-base-positive),
                 var(--yc-color-base-positive-hover),
-                var(--yc-color-text-positive)
+                var(--yc-color-text-positive-heavy)
             );
         }
 
         &_info {
             @include themeState(
                 var(--yc-color-base-info),
                 var(--yc-color-base-info-hover),
-                var(--yc-color-text-info)
+                var(--yc-color-text-info-heavy)
             );
         }
 
@@ -238,7 +238,7 @@ $transitionTimingFunction: ease-in-out;
             @include themeState(
                 var(--yc-color-base-danger),
                 var(--yc-color-base-danger-hover),
-                var(--yc-color-text-danger)
+                var(--yc-color-text-danger-heavy)
             );
         }
 

diff --git a/src/components/Text/colorText/colorText.scss b/src/components/Text/colorText/colorText.scss
@@ -8,12 +8,17 @@ $textColorMap: (
     'secondary' var(--yc-color-text-secondary),
     'hint' var(--yc-color-text-hint),
     'info' var(--yc-color-text-info),
+    'info-heavy' var(--yc-color-text-info-heavy),
     'positive' var(--yc-color-text-positive),
-    'warning-medium' var(--yc-color-text-warning-medium),
+    'positive-heavy' var(--yc-color-text-positive-heavy),
+    'warning' var(--yc-color-text-warning),
     'warning-heavy' var(--yc-color-text-warning-heavy),
     'danger' var(--yc-color-text-danger),
+    'danger-heavy' var(--yc-color-text-danger-heavy),
     'utility' var(--yc-color-text-utility),
+    'utility-heavy' var(--yc-color-text-utility-heavy),
     'misc' var(--yc-color-text-misc),
+    'misc-heavy' var(--yc-color-text-misc-heavy),
     'special' var(--yc-color-text-special),
     'link' var(--yc-color-text-link),
     'link-hover' var(--yc-color-text-link-hover),

diff --git a/src/components/Text/colorText/colorText.ts b/src/components/Text/colorText/colorText.ts
@@ -10,12 +10,17 @@ export const TEXT_COLORS = [
     'secondary',
     'hint',
     'info',
+    'info-heavy',
     'positive',
-    'warning-medium',
+    'positive-heavy',
+    'warning',
     'warning-heavy',
     'danger',
+    'danger-heavy',
     'utility',
+    'utility-heavy',
     'misc',
+    'misc-heavy',
     'special',
     'link',
     'link-hover',

diff --git a/src/demo/colors/Texts.tsx b/src/demo/colors/Texts.tsx
@@ -31,15 +31,25 @@ const semantic = [
         title: 'Info',
         description: 'Info text.',
     },
+    {
+        name: 'text-info-heavy',
+        title: 'Info Heavy',
+        description: 'Info text with underlay.',
+    },
     {
         name: 'text-positive',
         title: 'Positive',
         description: 'Positive text.',
     },
     {
-        name: 'text-warning-medium',
-        title: 'Warning Medium',
-        description: 'Warning text without underlay.',
+        name: 'text-positive-heavy',
+        title: 'Positive Heavy',
+        description: 'Positive text with underlay.',
+    },
+    {
+        name: 'text-warning',
+        title: 'Warning',
+        description: 'Warning text.',
     },
     {
         name: 'text-warning-heavy',
@@ -51,16 +61,31 @@ const semantic = [
         title: 'Danger',
         description: 'Danger text.',
     },
+    {
+        name: 'text-danger-heavy',
+        title: 'Danger Heavy',
+        description: 'Danger text with underlay.',
+    },
     {
         name: 'text-utility',
         title: 'Utility',
         description: 'For emphasizing, without semantic.',
     },
+    {
+        name: 'text-utility-heavy',
+        title: 'Utility Heavy',
+        description: 'Utility text with underlay.',
+    },
     {
         name: 'text-misc',
         title: 'Misc',
         description: 'For emphasizing, without semantic.',
     },
+    {
+        name: 'text-misc-heavy',
+        title: 'Misc Heavy',
+        description: 'Misc text with underlay.',
+    },
 ];
 
 const specials = [

diff --git a/styles/colors/text/dark-hc.scss b/styles/colors/text/dark-hc.scss
@@ -1,18 +1,23 @@
 @mixin yc-colors-text-dark-hc {
     --yc-color-text-primary: var(--yc-color-private-white-1000);
-
     --yc-color-text-complementary: var(--yc-color-private-white-800);
     --yc-color-text-secondary: var(--yc-color-private-white-600);
     --yc-color-text-hint: var(--yc-color-private-white-400);
 
-    --yc-color-text-info: var(--yc-color-private-blue-850-solid);
+    --yc-color-text-info: var(--yc-color-private-blue-600-solid);
+    --yc-color-text-positive: var(--yc-color-private-green-600-solid);
+    --yc-color-text-warning: var(--yc-color-private-yellow-600-solid);
+    --yc-color-text-danger: var(--yc-color-private-red-600-solid);
+    --yc-color-text-utility: var(--yc-color-private-purple-600-solid);
+    --yc-color-text-misc: var(--yc-color-private-cool-grey-600-solid);
 
-    --yc-color-text-positive: var(--yc-color-private-green-850-solid);
-    --yc-color-text-warning-medium: var(--yc-color-private-yellow-800-solid);
+    --yc-color-text-info-heavy: var(--yc-color-private-blue-850-solid);
+    --yc-color-text-positive-heavy: var(--yc-color-private-green-850-solid);
     --yc-color-text-warning-heavy: var(--yc-color-private-yellow-850-solid);
-    --yc-color-text-danger: var(--yc-color-private-red-850-solid);
-    --yc-color-text-utility: var(--yc-color-private-purple-805-solid);
-    --yc-color-text-misc: var(--yc-color-private-cool-grey-850-solid);
+    --yc-color-text-danger-heavy: var(--yc-color-private-red-850-solid);
+    --yc-color-text-utility-heavy: var(--yc-color-private-purple-850-solid);
+    --yc-color-text-misc-heavy: var(--yc-color-private-cool-grey-850-solid);
+
     --yc-color-text-special: var(--yc-my-color-brand-normal);
     --yc-color-text-link: var(--yc-my-color-brand-link);
     --yc-color-text-link-hover: var(--yc-my-color-brand-link-hover);

diff --git a/styles/colors/text/dark.scss b/styles/colors/text/dark.scss
@@ -6,12 +6,18 @@
 
     --yc-color-text-info: var(--yc-color-private-blue-700);
     --yc-color-text-positive: var(--yc-color-private-green-550);
-    --yc-color-text-warning-medium: var(--yc-color-private-yellow-700);
-    --yc-color-text-warning-heavy: var(--yc-color-private-yellow-700);
+    --yc-color-text-warning: var(--yc-color-private-yellow-700);
     --yc-color-text-danger: var(--yc-color-private-red-550);
     --yc-color-text-utility: var(--yc-color-private-purple-550);
     --yc-color-text-misc: var(--yc-color-private-cool-grey-700);
 
+    --yc-color-text-info-heavy: var(--yc-color-private-blue-700);
+    --yc-color-text-positive-heavy: var(--yc-color-private-green-550);
+    --yc-color-text-warning-heavy: var(--yc-color-private-yellow-700);
+    --yc-color-text-danger-heavy: var(--yc-color-private-red-550);
+    --yc-color-text-utility-heavy: var(--yc-color-private-purple-550);
+    --yc-color-text-misc-heavy: var(--yc-color-private-cool-grey-700);
+
     --yc-color-text-special: var(--yc-my-color-brand-normal);
     --yc-color-text-link: var(--yc-my-color-brand-link);
     --yc-color-text-link-hover: var(--yc-my-color-brand-link-hover);

diff --git a/styles/colors/text/light-hc.scss b/styles/colors/text/light-hc.scss
@@ -4,13 +4,20 @@
     --yc-color-text-secondary: var(--yc-color-private-black-700);
     --yc-color-text-hint: var(--yc-color-private-black-500);
 
-    --yc-color-text-info: var(--yc-color-private-blue-900-solid);
-    --yc-color-text-positive: var(--yc-color-private-green-900-solid);
-    --yc-color-text-warning-medium: var(--yc-color-private-yellow-900-solid);
+    --yc-color-text-info: var(--yc-color-private-blue-600-solid);
+    --yc-color-text-positive: var(--yc-color-private-green-650-solid);
+    --yc-color-text-warning: var(--yc-color-private-yellow-650-solid);
+    --yc-color-text-danger: var(--yc-color-private-red-600-solid);
+    --yc-color-text-utility: var(--yc-color-private-purple-600-solid);
+    --yc-color-text-misc: var(--yc-color-private-cool-grey-650-solid);
+
+    --yc-color-text-info-heavy: var(--yc-color-private-blue-900-solid);
+    --yc-color-text-positive-heavy: var(--yc-color-private-green-900-solid);
     --yc-color-text-warning-heavy: var(--yc-color-private-orange-900-solid);
-    --yc-color-text-danger: var(--yc-color-private-red-900-solid);
-    --yc-color-text-utility: var(--yc-color-private-purple-900-solid);
-    --yc-color-text-misc: var(--yc-color-private-cool-grey-950-solid);
+    --yc-color-text-danger-heavy: var(--yc-color-private-red-900-solid);
+    --yc-color-text-utility-heavy: var(--yc-color-private-purple-900-solid);
+    --yc-color-text-misc-heavy: var(--yc-color-private-cool-grey-950-solid);
+
     --yc-color-text-special: var(--yc-my-color-brand-normal);
     --yc-color-text-link: var(--yc-my-color-brand-link);
     --yc-color-text-link-hover: var(--yc-my-color-brand-link-hover);

diff --git a/styles/colors/text/light.scss b/styles/colors/text/light.scss
@@ -6,12 +6,18 @@
 
     --yc-color-text-info: var(--yc-color-private-blue-550);
     --yc-color-text-positive: var(--yc-color-private-green-600);
-    --yc-color-text-warning-medium: var(--yc-color-private-yellow-700);
-    --yc-color-text-warning-heavy: var(--yc-color-private-yellow-800);
+    --yc-color-text-warning: var(--yc-color-private-yellow-700);
     --yc-color-text-danger: var(--yc-color-private-red-500);
     --yc-color-text-utility: var(--yc-color-private-purple-550);
     --yc-color-text-misc: var(--yc-color-private-cool-grey-800);
 
+    --yc-color-text-info-heavy: var(--yc-color-private-blue-550);
+    --yc-color-text-positive-heavy: var(--yc-color-private-green-600);
+    --yc-color-text-warning-heavy: var(--yc-color-private-yellow-800);
+    --yc-color-text-danger-heavy: var(--yc-color-private-red-500);
+    --yc-color-text-utility-heavy: var(--yc-color-private-purple-550);
+    --yc-color-text-misc-heavy: var(--yc-color-private-cool-grey-800);
+
     --yc-color-text-special: var(--yc-my-color-brand-normal);
     --yc-color-text-link: var(--yc-my-color-brand-link);
     --yc-color-text-link-hover: var(--yc-my-color-brand-link-hover);