Update warning color (#733)

* Deprecate old yellow colors and add new yellow colors

* Update warning variables

* Add changeset

* Update button doc

* Update dark and high contrast

* Update other dark and high contrast colors

* Update warning dark

* Revert score medium update

* Revert code highlight

* Update warning dark high contrast

* Remove ffb900 from orange

* Update warning background dark theme

.changeset/clever-readers-compare.md

@@ -0,0 +1,5 @@
+---
+'@microsoft/atlas-css': minor
+---
+
+Update warning color to match Fluent 2 colors.

css/src/tokens/palette.scss

@@ -208,22 +208,71 @@ $palette-purple-opacity-70: hsl(251deg 47% 18% / 70%) !default;
 
 // Yellow
 
-$palette-yellow-10: #fff4ce !default;
-$palette-yellow-20: #ffe79f !default;
-$palette-yellow-30: #ffdf84 !default;
-$palette-yellow-40: #ffcb3f !default;
-$palette-yellow-50: #ffb900 !default;
-$palette-yellow-60: #d19501 !default;
-$palette-yellow-70: #966802 !default;
-$palette-yellow-80: #6a4b16 !default;
-$palette-yellow-90: #4f340e !default;
-$palette-yellow-100: #2d1703 !default;
+$palette-yellow-10-deprecated: #fff4ce !default;
+$palette-yellow-20-deprecated: #ffe79f !default;
+$palette-yellow-30-deprecated: #ffdf84 !default;
+$palette-yellow-40-deprecated: #ffcb3f !default;
+$palette-yellow-50-deprecated: #ffb900 !default;
+$palette-yellow-60-deprecated: #d19501 !default;
+$palette-yellow-70-deprecated: #966802 !default;
+$palette-yellow-80-deprecated: #6a4b16 !default;
+$palette-yellow-90-deprecated: #4f340e !default;
+$palette-yellow-100-deprecated: #2d1703 !default;
+
+$palette-yellow-10: #fffef5 !default;
+$palette-yellow-20: #ecdfa5 !default;
+$palette-yellow-30: #e0cea2 !default;
+$palette-yellow-40: #ddc3b0 !default;
+$palette-yellow-50: #fef7b2 !default;
+$palette-yellow-60: #ffe79f !default;
+$palette-yellow-70: #feee66 !default;
+$palette-yellow-80: #fdea3d !default;
+$palette-yellow-90: #dac157 !default;
+$palette-yellow-100: #fde300 !default;
+$palette-yellow-110: #ffcb3f !default;
+$palette-yellow-120: #c1a256 !default;
+$palette-yellow-130: #c19c00 !default;
+$palette-yellow-140: #bb8f6f !default;
+$palette-yellow-150: #986f0b !default;
+$palette-yellow-160: #817400 !default;
+$palette-yellow-170: #6c5700 !default;
+$palette-yellow-180: #4c4400 !default;
+$palette-yellow-190: #553e06 !default;
+$palette-yellow-200: #50301a !default;
 
 $palette-yellow-opacity-30: hsl(44deg 100% 50% / 30%) !default;
 $palette-yellow-opacity-70: hsl(44deg 100% 50% / 70%) !default;
 
 $palette-yellow-sand: #e8e6df !default;
 
+// Orange
+
+$palette-orange-10: #fff9f5 !default;
+$palette-orange-20: #fdf6f3 !default;
+$palette-orange-30: #ffddb3 !default;
+$palette-orange-40: #fdcfb4 !default;
+$palette-orange-50: #efc4ad !default;
+$palette-orange-60: #f4bfab !default;
+$palette-orange-70: #faa06b !default;
+$palette-orange-80: #df8e64 !default;
+$palette-orange-90: #ff8c00 !default;
+$palette-orange-100: #f98845 !default;
+$palette-orange-110: #e9835e !default;
+$palette-orange-120: #f7630c !default;
+$palette-orange-130: #ca5010 !default;
+$palette-orange-140: #bc4b09 !default;
+$palette-orange-150: #da3b01 !default;
+$palette-orange-160: #c43501 !default;
+$palette-orange-170: #8f4e00 !default;
+$palette-orange-180: #8a3707 !default;
+$palette-orange-190: #712d09 !default;
+$palette-orange-200: #7a2101 !default;
+$palette-orange-210: #4a1e04 !default;
+$palette-orange-220: #411200 !default;
+
+$palette-orange-opacity-30: hsla(24deg 100% 50% / 30%) !default;
+$palette-orange-opacity-70: hsla(24deg 100% 50% / 70%) !default;
+
 // Red
 
 $palette-red-10-deprecated: #fde7e9 !default;

css/src/tokens/themes.scss

@@ -34,12 +34,12 @@ $themes: (
 		'control-border': $palette-grey-80,
 		'control-border-bottom': $palette-grey-90,
 		'inline-code': $palette-grey-30,
-		'code-highlight-background': $palette-yellow-10,
+		'code-highlight-background': $palette-yellow-10-deprecated,
 		'visited': $palette-purple-70,
 		'score-low-off': $palette-red-opacity-30,
 		'score-low': $palette-red-120,
 		'score-medium-off': $palette-yellow-opacity-30,
-		'score-medium': $palette-yellow-50,
+		'score-medium': $palette-yellow-50-deprecated,
 		'score-high-off': $palette-green-opacity-30,
 		'score-high': $palette-green-170,
 		'hyperlink': $palette-blue-60-deprecated,
@@ -93,15 +93,15 @@ $themes: (
 		'info-active': $palette-purple-70,
 		'info-box-shadow': $palette-purple-opacity-30,
 		'info-invert': $palette-white,
-		'warning-base': $palette-yellow-50,
-		'warning-background': $palette-yellow-10,
-		'warning-background-hover': $palette-yellow-40,
-		'warning-background-glow-high-contrast': $palette-yellow-10,
-		'warning-dark': $palette-yellow-80,
-		'warning-dark-hover': $palette-yellow-60,
-		'warning-hover': $palette-yellow-60,
-		'warning-active': $palette-yellow-70,
-		'warning-box-shadow': $palette-yellow-opacity-30,
+		'warning-base': $palette-orange-120,
+		'warning-background': $palette-orange-10,
+		'warning-background-hover': $palette-orange-40,
+		'warning-background-glow-high-contrast': $palette-orange-10,
+		'warning-dark': $palette-orange-180,
+		'warning-dark-hover': $palette-orange-150,
+		'warning-hover': $palette-orange-130,
+		'warning-active': $palette-orange-160,
+		'warning-box-shadow': $palette-orange-opacity-30,
 		'warning-invert': $palette-black,
 		'danger-base': $palette-red-110,
 		'danger-background': $palette-red-10,
@@ -158,7 +158,7 @@ $themes: (
 		'score-low-off': $palette-red-opacity-70,
 		'score-low': $palette-red-50-deprecated,
 		'score-medium-off': $palette-yellow-opacity-30,
-		'score-medium': $palette-yellow-40,
+		'score-medium': $palette-yellow-40-deprecated,
 		'score-high-off': $palette-green-opacity-70,
 		'score-high': $palette-green-40-deprecated,
 		'hyperlink': $palette-blue-30-deprecated,
@@ -212,15 +212,15 @@ $themes: (
 		'info-active': $palette-purple-30,
 		'info-box-shadow': $palette-purple-opacity-70,
 		'info-invert': $palette-black,
-		'warning-base': $palette-yellow-50,
-		'warning-background': $palette-yellow-80,
-		'warning-background-hover': $palette-yellow-50,
-		'warning-background-glow-high-contrast': $palette-yellow-80,
-		'warning-dark': $palette-yellow-10,
-		'warning-dark-hover': $palette-yellow-30,
-		'warning-hover': $palette-yellow-40,
-		'warning-active': $palette-yellow-30,
-		'warning-box-shadow': $palette-yellow-opacity-70,
+		'warning-base': $palette-orange-120,
+		'warning-background': $palette-orange-210,
+		'warning-background-hover': $palette-orange-200,
+		'warning-background-glow-high-contrast': $palette-orange-200,
+		'warning-dark': $palette-orange-40,
+		'warning-dark-hover': $palette-orange-110,
+		'warning-hover': $palette-orange-90,
+		'warning-active': $palette-orange-40,
+		'warning-box-shadow': $palette-orange-opacity-70,
 		'warning-invert': $palette-black,
 		'danger-base': $palette-red-20-deprecated,
 		'danger-background': $palette-red-80-deprecated,
@@ -277,7 +277,7 @@ $themes: (
 		'score-low-off': $palette-red-60-deprecated,
 		'score-low': $palette-red-10-deprecated,
 		'score-medium-off': $palette-yellow-opacity-70,
-		'score-medium': $palette-yellow-20,
+		'score-medium': $palette-yellow-20-deprecated,
 		'score-high-off': $palette-green-60-deprecated,
 		'score-high': $palette-green-10-deprecated,
 		'hyperlink': $palette-yellow-high-contrast,
@@ -331,14 +331,14 @@ $themes: (
 		'info-active': $palette-purple-10,
 		'info-box-shadow': $palette-white,
 		'info-invert': $palette-black,
-		'warning-base': $palette-yellow-20,
+		'warning-base': $palette-orange-70,
 		'warning-background': $palette-black,
-		'warning-background-hover': $palette-yellow-20,
-		'warning-background-glow-high-contrast': $palette-yellow-20,
-		'warning-dark': $palette-yellow-10,
-		'warning-dark-hover': $palette-yellow-30,
-		'warning-hover': $palette-yellow-10,
-		'warning-active': $palette-yellow-10,
+		'warning-background-hover': $palette-orange-20,
+		'warning-background-glow-high-contrast': $palette-orange-30,
+		'warning-dark': $palette-orange-70,
+		'warning-dark-hover': $palette-orange-40,
+		'warning-hover': $palette-orange-50,
+		'warning-active': $palette-orange-10,
 		'warning-box-shadow': $palette-white,
 		'warning-invert': $palette-black,
 		'danger-base': $palette-red-20-deprecated,

site/src/components/button.md

@@ -87,10 +87,10 @@ Success buttons are green on most themes. This color stands for a good, positive
 
 ### Warning
 
-Warning buttons are yellow on most themes. This color indicates a critical situation or warning. Use this semantic color if ...
+Warning buttons are orange on most themes. This color indicates a critical situation or warning. Use this semantic color if ...
 
 - You want to highlight a critical status.
-- A minor problem has occcurred. The user can carry on working but might run into an error later on.
+- A minor problem has occurred. The user can carry on working but might run into an error later on.
 - The current mode or page can be finalized, but doing so might lead to an error later on.
 - The user input was validated and a minor problem occurred. The user can continue without fixing the problem, but might lead to an error later on.
 - A message contains information about a warning.