diff --git a/src/components/Label/Label.scss b/src/components/Label/Label.scss index ff7c827fd2..e07a2113bf 100644 --- a/src/components/Label/Label.scss +++ b/src/components/Label/Label.scss @@ -206,7 +206,7 @@ $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) ); } @@ -214,7 +214,7 @@ $transitionTimingFunction: ease-in-out; @include themeState( var(--yc-color-base-positive), var(--yc-color-base-positive-hover), - var(--yc-color-text-positive) + var(--yc-color-text-positive-heavy) ); } @@ -222,7 +222,7 @@ $transitionTimingFunction: ease-in-out; @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 index e3ef2432ab..8e9a24d955 100644 --- 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 index 2ffe925119..4d7aa59969 100644 --- 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 index 0662e051c0..73f9563b1d 100644 --- 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 index ad64ab05bf..dcaac84f16 100644 --- 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 index 835f0ec2f9..f9857788a9 100644 --- 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 index 4b4de84ee4..68d17ec265 100644 --- 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 index d56ace6145..ce4d90f99c 100644 --- 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);