fix: update hc colors for labels, buttons and brand-text (#356)

gravity-ui · Oct 18, 2022 · f286140 · f286140
1 parent b325b47
commit f286140
Show file tree

Hide file tree

Showing 8 changed files with 73 additions and 60 deletions.
diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss
@@ -210,10 +210,10 @@ $transitionTimingFunction: ease-in-out;
 
         &_unknown {
             color: var(--yc-color-text-complementary);
-            background-color: var(--yc-color-base-generic);
+            background-color: var(--yc-color-base-neutral);
 
             &:not(#{$disabled})#{$block}_is-interactive:hover {
-                background-color: var(--yc-color-base-generic-hover);
+                background-color: var(--yc-color-base-neutral-hover);
             }
         }
     }

diff --git a/src/components/Label/__stories__/Label.stories.scss b/src/components/Label/__stories__/Label.stories.scss
@@ -0,0 +1,6 @@
+.label-stories {
+    display: flex;
+    .yc-label {
+        margin-left: 10px;
+    }
+}
diff --git a/src/components/Label/__stories__/Label.stories.tsx b/src/components/Label/__stories__/Label.stories.tsx
@@ -3,6 +3,8 @@ import {Meta, Story} from '@storybook/react';
 import {Label, LabelProps} from '../Label';
 import {Link} from '../../Link';
 
+import './Label.stories.scss';
+
 export default {
     title: 'Components/Label',
     component: Label,
@@ -14,53 +16,56 @@ export const Default = Template.bind({});
 
 const ThemeTemplate: Story<LabelProps> = (args) => {
     return (
-        <>
+        <div className="label-stories">
             <Label {...args} theme="normal">
                 normal
             </Label>
             <Label {...args} theme="info">
                 info
             </Label>
-            <Label {...args} theme="danger">
-                danger
+            <Label {...args} theme="success">
+                success
             </Label>
             <Label {...args} theme="warning">
                 warning
             </Label>
+            <Label {...args} theme="danger">
+                danger
+            </Label>
             <Label {...args} theme="unknown">
                 unknown
             </Label>
-        </>
+        </div>
     );
 };
 
 export const Theme = ThemeTemplate.bind({});
 
 const SizeTemplate: Story<LabelProps> = (args) => {
     return (
-        <>
+        <div className="label-stories">
             <Label {...args} size="s">
                 xs
             </Label>
             <Label {...args} size="m">
                 s
             </Label>
-        </>
+        </div>
     );
 };
 
 export const Size = SizeTemplate.bind({});
 
 const StyleTemplate: Story<LabelProps> = (args) => {
     return (
-        <>
+        <div className="label-stories">
             <Label {...args} style="default">
                 default
             </Label>
             <Label {...args} style="rounded">
                 rounded
             </Label>
-        </>
+        </div>
     );
 };
 

diff --git a/styles/brand.scss b/styles/brand.scss
@@ -43,6 +43,7 @@
     --yc-my-color-brand-selection-hover: var(--yc-color-private-blue-450);
     --yc-my-color-brand-link: var(--yc-color-private-blue-650-solid);
     --yc-my-color-brand-link-hover: var(--yc-color-private-blue-850-solid);
+    --yc-my-color-brand-text: var(--yc-color-private-blue-900-solid);
     --yc-my-color-brand-text-contrast: var(--yc-color-text-light-primary);
     --yc-my-color-brand-link-visited: var(--yc-color-private-purple-600-solid);
     --yc-my-color-brand-link-visited-hover: var(--yc-color-private-purple-850-solid);
@@ -56,6 +57,7 @@
     --yc-my-color-brand-selection-hover: var(--yc-color-private-blue-600-solid);
     --yc-my-color-brand-link: var(--yc-color-private-blue-550);
     --yc-my-color-brand-link-hover: var(--yc-color-private-blue-750-solid);
+    --yc-my-color-brand-text: var(--yc-color-private-blue-850-solid);
     --yc-my-color-brand-text-contrast: var(--yc-color-text-light-primary);
     --yc-my-color-brand-link-visited: var(--yc-color-private-purple-650-solid);
     --yc-my-color-brand-link-visited-hover: var(--yc-color-private-purple-800-solid);

diff --git a/styles/colors/base/dark-hc.scss b/styles/colors/base/dark-hc.scss
@@ -20,29 +20,29 @@
     --yc-color-base-action: var(--yc-color-base-special);
     --yc-color-base-action-hover: var(--yc-color-base-special-hover);
 
-    --yc-color-base-info: var(--yc-color-private-blue-200);
-    --yc-color-base-info-hover: var(--yc-color-private-blue-300);
-    --yc-color-base-positive: var(--yc-color-private-green-300);
-    --yc-color-base-positive-hover: var(--yc-color-private-green-550-solid);
-    --yc-color-base-warning: var(--yc-color-private-yellow-100);
-    --yc-color-base-warning-hover: var(--yc-color-private-yellow-150);
-    --yc-color-base-danger: var(--yc-color-private-red-100);
-    --yc-color-base-danger-hover: var(--yc-color-private-red-150);
-    --yc-color-base-misc: var(--yc-color-private-cool-grey-100);
-    --yc-color-base-misc-hover: var(--yc-color-private-cool-grey-150);
+    --yc-color-base-info: var(--yc-color-private-blue-250);
+    --yc-color-base-info-hover: var(--yc-color-private-blue-400);
+    --yc-color-base-positive: var(--yc-color-private-green-250);
+    --yc-color-base-positive-hover: var(--yc-color-private-green-400);
+    --yc-color-base-warning: var(--yc-color-private-yellow-250);
+    --yc-color-base-warning-hover: var(--yc-color-private-yellow-400);
+    --yc-color-base-danger: var(--yc-color-private-red-250);
+    --yc-color-base-danger-hover: var(--yc-color-private-red-400);
+    --yc-color-base-misc: var(--yc-color-private-cool-grey-250);
+    --yc-color-base-misc-hover: var(--yc-color-private-cool-grey-400);
     --yc-color-base-neutral: var(--yc-color-private-white-250);
-    --yc-color-base-neutral-hover: var(--yc-color-private-white-300);
+    --yc-color-base-neutral-hover: var(--yc-color-private-white-400);
 
-    --yc-color-base-positive-medium: var(--yc-color-private-green-300);
-    --yc-color-base-positive-medium-hover: var(--yc-color-private-green-350);
+    --yc-color-base-positive-medium: var(--yc-color-private-green-350);
+    --yc-color-base-positive-medium-hover: var(--yc-color-private-green-400);
 
     --yc-color-base-info-heavy: var(--yc-color-private-blue-450);
     --yc-color-base-positive-heavy: var(--yc-color-private-green-450);
-    --yc-color-base-warning-heavy: var(--yc-color-private-yellow-550);
+    --yc-color-base-warning-heavy: var(--yc-color-private-yellow-450);
     --yc-color-base-warning-heavy-hover: var(--yc-color-private-yellow-700);
     --yc-color-base-danger-heavy: var(--yc-color-private-red-450);
-    --yc-color-base-danger-heavy-hover: var(--yc-color-private-red-550);
-    --yc-color-base-misc-heavy: var(--yc-color-private-cool-grey-450-solid);
+    --yc-color-base-danger-heavy-hover: var(--yc-color-private-red-450);
+    --yc-color-base-misc-heavy: var(--yc-color-private-cool-grey-450);
     --yc-color-base-misc-heavy-hover: var(--yc-color-private-cool-grey-550);
 
     --yc-color-base-light: var(--yc-color-private-white-850);

diff --git a/styles/colors/base/light-hc.scss b/styles/colors/base/light-hc.scss
@@ -20,31 +20,31 @@
     --yc-color-base-action: var(--yc-color-base-special);
     --yc-color-base-action-hover: var(--yc-color-base-special-hover);
 
-    --yc-color-base-info: var(--yc-color-private-blue-150);
-    --yc-color-base-info-hover: var(--yc-color-private-blue-300);
+    --yc-color-base-info: var(--yc-color-private-blue-250);
+    --yc-color-base-info-hover: var(--yc-color-private-blue-350);
 
     --yc-color-base-positive: var(--yc-color-private-green-250);
-    --yc-color-base-positive-hover: var(--yc-color-private-green-500);
-
-    --yc-color-base-warning: var(--yc-color-private-yellow-150);
-    --yc-color-base-warning-hover: var(--yc-color-private-yellow-300);
-    --yc-color-base-danger: var(--yc-color-private-red-150);
-    --yc-color-base-danger-hover: var(--yc-color-private-red-300);
-    --yc-color-base-misc: var(--yc-color-private-cool-grey-150);
-    --yc-color-base-misc-hover: var(--yc-color-private-cool-grey-300);
-    --yc-color-base-neutral: var(--yc-color-private-black-150);
+    --yc-color-base-positive-hover: var(--yc-color-private-green-350);
+
+    --yc-color-base-warning: var(--yc-color-private-yellow-300);
+    --yc-color-base-warning-hover: var(--yc-color-private-yellow-550);
+    --yc-color-base-danger: var(--yc-color-private-red-250);
+    --yc-color-base-danger-hover: var(--yc-color-private-red-350);
+    --yc-color-base-misc: var(--yc-color-private-cool-grey-250);
+    --yc-color-base-misc-hover: var(--yc-color-private-cool-grey-350);
+    --yc-color-base-neutral: var(--yc-color-private-black-200);
     --yc-color-base-neutral-hover: var(--yc-color-private-black-300);
 
-    --yc-color-base-positive-medium: var(--yc-color-private-green-250);
-    --yc-color-base-positive-medium-hover: var(--yc-color-private-green-500);
+    --yc-color-base-positive-medium: var(--yc-color-private-green-350);
+    --yc-color-base-positive-medium-hover: var(--yc-color-private-green-400);
     --yc-color-base-info-heavy: var(--yc-color-private-blue-450);
-    --yc-color-base-positive-heavy: var(--yc-color-private-green-550);
-    --yc-color-base-warning-heavy: var(--yc-color-private-yellow-550);
-    --yc-color-base-warning-heavy-hover: var(--yc-color-private-yellow-800);
-    --yc-color-base-danger-heavy: var(--yc-color-private-red-550);
-    --yc-color-base-danger-heavy-hover: var(--yc-color-private-red-800);
-    --yc-color-base-misc-heavy: var(--yc-color-private-cool-grey-550-solid);
-    --yc-color-base-misc-heavy-hover: var(--yc-color-private-cool-grey-800);
+    --yc-color-base-positive-heavy: var(--yc-color-private-green-450);
+    --yc-color-base-warning-heavy: var(--yc-color-private-yellow-450);
+    --yc-color-base-warning-heavy-hover: var(--yc-color-private-yellow-700);
+    --yc-color-base-danger-heavy: var(--yc-color-private-red-450);
+    --yc-color-base-danger-heavy-hover: var(--yc-color-private-red-450);
+    --yc-color-base-misc-heavy: var(--yc-color-private-cool-grey-450);
+    --yc-color-base-misc-heavy-hover: var(--yc-color-private-cool-grey-550);
 
     --yc-color-base-light: var(--yc-color-private-white-1000);
     --yc-color-base-light-hover: var(--yc-color-private-white-850);

diff --git a/styles/colors/text/dark-hc.scss b/styles/colors/text/dark-hc.scss
@@ -5,14 +5,14 @@
     --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-700-solid);
+    --yc-color-text-info: var(--yc-color-private-blue-850-solid);
 
-    --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-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-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-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-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,13 @@
     --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-650-solid);
-    --yc-color-text-positive: var(--yc-color-private-green-600-solid);
-    --yc-color-text-warning-medium: var(--yc-color-private-yellow-700-solid);
-    --yc-color-text-warning-heavy: var(--yc-color-private-yellow-800-solid);
-    --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-solid);
+    --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-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-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);