diff --git a/.changeset/lazy-files-bow.md b/.changeset/lazy-files-bow.md new file mode 100644 index 000000000..404ee6222 --- /dev/null +++ b/.changeset/lazy-files-bow.md @@ -0,0 +1,5 @@ +--- +'@microsoft/atlas-css': minor +--- + +Update success colors to match Fluent 2 colors. diff --git a/css/src/tokens/palette.scss b/css/src/tokens/palette.scss index 4b2cb1934..67c021f2d 100644 --- a/css/src/tokens/palette.scss +++ b/css/src/tokens/palette.scss @@ -146,16 +146,42 @@ $palette-turqoise-opacity-70-deprecated: hsl(189deg 52% 12% / 70%) !default; // Green -$palette-green-10: #dff6dd !default; -$palette-green-20: #acd7aa !default; -$palette-green-30: #7cbb7b !default; -$palette-green-40: #489d48 !default; -$palette-green-50: #2a8b2a !default; -$palette-green-60: #107c10 !default; -$palette-green-70: #0b6413 !default; -$palette-green-80: #054b16 !default; -$palette-green-90: #05350c !default; -$palette-green-100: #061a00 !default; +$palette-green-10-deprecated: #dff6dd !default; +$palette-green-20-deprecated: #acd7aa !default; +$palette-green-30-deprecated: #7cbb7b !default; +$palette-green-40-deprecated: #489d48 !default; +$palette-green-50-deprecated: #2a8b2a !default; +$palette-green-60-deprecated: #107c10 !default; +$palette-green-70-deprecated: #0b6413 !default; +$palette-green-80-deprecated: #054b16 !default; +$palette-green-90-deprecated: #05350c !default; +$palette-green-100-deprecated: #061a00 !default; + +$palette-green-10: #f1faf1 !default; +$palette-green-20: #bdd99b !default; +$palette-green-30: #a8f0cd !default; +$palette-green-40: #a7e3a5 !default; +$palette-green-50: #9fd89f !default; +$palette-green-60: #9ad29a !default; +$palette-green-70: #5ae0a0 !default; +$palette-green-80: #5ec75a !default; +$palette-green-90: #54b054 !default; +$palette-green-100: #3db838 !default; +$palette-green-110: #00cc6a !default; +$palette-green-120: #4da64d !default; +$palette-green-130: #13a10e !default; +$palette-green-140: #359b35 !default; +$palette-green-150: #498205 !default; +$palette-green-160: #11910d !default; +$palette-green-170: #2a8b2a !default; +$palette-green-180: #107c10 !default; +$palette-green-190: #00723b !default; +$palette-green-200: #0e700e !default; +$palette-green-210: #0b5a08 !default; +$palette-green-220: #294903 !default; +$palette-green-230: #094509 !default; +$palette-green-240: #063b06 !default; +$palette-green-250: #052505 !default; $palette-green-opacity-30: hsl(120deg 37% 45% / 30%) !default; $palette-green-opacity-70: hsl(120deg 37% 45% / 70%) !default; diff --git a/css/src/tokens/themes.scss b/css/src/tokens/themes.scss index 2b0f5b3dc..1726258ea 100644 --- a/css/src/tokens/themes.scss +++ b/css/src/tokens/themes.scss @@ -41,7 +41,7 @@ $themes: ( 'score-medium-off': $palette-yellow-opacity-30, 'score-medium': $palette-yellow-50, 'score-high-off': $palette-green-opacity-30, - 'score-high': $palette-green-50, + 'score-high': $palette-green-170, 'hyperlink': $palette-blue-60-deprecated, 'primary-base': $palette-blue-110, 'primary-background': $palette-blue-10, @@ -73,14 +73,14 @@ $themes: ( 'tertiary-active': $palette-navy-50, 'tertiary-box-shadow': $palette-navy-opacity-30, 'tertiary-invert': $palette-white, - 'success-base': $palette-green-60, + 'success-base': $palette-green-180, 'success-background': $palette-green-10, - 'success-background-hover': $palette-navy-30, + 'success-background-hover': $palette-green-50, 'success-background-glow-high-contrast': $palette-green-10, - 'success-dark': $palette-green-80, - 'success-dark-hover': $palette-navy-50, - 'success-hover': $palette-green-70, - 'success-active': $palette-green-80, + 'success-dark': $palette-green-200, + 'success-dark-hover': $palette-green-130, + 'success-hover': $palette-green-210, + 'success-active': $palette-green-50, 'success-box-shadow': $palette-green-opacity-30, 'success-invert': $palette-white, 'info-base': $palette-purple-60, @@ -153,14 +153,14 @@ $themes: ( 'control-border': $palette-grey-40, 'control-border-bottom': $palette-grey-30, 'inline-code': $palette-grey-100, - 'code-highlight-background': $palette-green-70, + 'code-highlight-background': $palette-green-70-deprecated, 'visited': $palette-purple-40, 'score-low-off': $palette-red-opacity-70, 'score-low': $palette-red-50, 'score-medium-off': $palette-yellow-opacity-30, 'score-medium': $palette-yellow-40, 'score-high-off': $palette-green-opacity-70, - 'score-high': $palette-green-40, + 'score-high': $palette-green-40-deprecated, 'hyperlink': $palette-blue-30-deprecated, 'primary-base': $palette-blue-30-deprecated, 'primary-background': $palette-blue-80-deprecated, @@ -192,14 +192,14 @@ $themes: ( 'tertiary-active': $palette-grey-80, 'tertiary-box-shadow': $palette-blue-opacity-30, 'tertiary-invert': $palette-white, - 'success-base': $palette-green-30, - 'success-background': $palette-green-80, - 'success-background-hover': $palette-green-60, - 'success-background-glow-high-contrast': $palette-green-80, - 'success-dark': $palette-green-10, - 'success-dark-hover': $palette-green-30, - 'success-hover': $palette-green-40, - 'success-active': $palette-green-30, + 'success-base': $palette-green-30-deprecated, + 'success-background': $palette-green-80-deprecated, + 'success-background-hover': $palette-green-60-deprecated, + 'success-background-glow-high-contrast': $palette-green-80-deprecated, + 'success-dark': $palette-green-10-deprecated, + 'success-dark-hover': $palette-green-30-deprecated, + 'success-hover': $palette-green-40-deprecated, + 'success-active': $palette-green-30-deprecated, 'success-box-shadow': $palette-green-opacity-70, 'success-invert': $palette-black, 'info-base': $palette-purple-50, @@ -272,14 +272,14 @@ $themes: ( 'control-border': $palette-white, 'control-border-bottom': $palette-white, 'inline-code': $palette-grey-110, - 'code-highlight-background': $palette-green-70, + 'code-highlight-background': $palette-green-70-deprecated, 'visited': $palette-visited-high-contrast, 'score-low-off': $palette-red-60, 'score-low': $palette-red-10, 'score-medium-off': $palette-yellow-opacity-70, 'score-medium': $palette-yellow-20, - 'score-high-off': $palette-green-60, - 'score-high': $palette-green-10, + 'score-high-off': $palette-green-60-deprecated, + 'score-high': $palette-green-10-deprecated, 'hyperlink': $palette-yellow-high-contrast, 'primary-base': $palette-yellow-high-contrast, 'primary-background': $palette-black, @@ -311,14 +311,14 @@ $themes: ( 'tertiary-active': $palette-grey-30, 'tertiary-box-shadow': $palette-white, 'tertiary-invert': $palette-black, - 'success-base': $palette-green-30, + 'success-base': $palette-green-30-deprecated, 'success-background': $palette-black, - 'success-background-hover': $palette-green-20, - 'success-background-glow-high-contrast': $palette-green-30, - 'success-dark': $palette-green-20, - 'success-dark-hover': $palette-green-30, - 'success-hover': $palette-green-20, - 'success-active': $palette-green-20, + 'success-background-hover': $palette-green-20-deprecated, + 'success-background-glow-high-contrast': $palette-green-30-deprecated, + 'success-dark': $palette-green-20-deprecated, + 'success-dark-hover': $palette-green-30-deprecated, + 'success-hover': $palette-green-20-deprecated, + 'success-active': $palette-green-20-deprecated, 'success-box-shadow': $palette-white, 'success-invert': $palette-black, 'info-base': $palette-purple-20,