Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update warning color #733

Merged
merged 12 commits into from
Dec 30, 2024
Merged

Update warning color #733

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
bf6dec1
Deprecate old yellow colors and add new yellow colors
homing1 Dec 4, 2024
15ed5c4
Update warning variables
homing1 Dec 4, 2024
507d508
Add changeset
homing1 Dec 4, 2024
d38b068
Update button doc
homing1 Dec 10, 2024
60820ae
Update dark and high contrast
homing1 Dec 11, 2024
269fe56
Update other dark and high contrast colors
homing1 Dec 11, 2024
86f5d26
Update warning dark
homing1 Dec 11, 2024
f5990d9
Revert score medium update
homing1 Dec 11, 2024
941ed30
Revert code highlight
homing1 Dec 11, 2024
435dc5a
Update warning dark high contrast
homing1 Dec 11, 2024
d15844f
Remove ffb900 from orange
homing1 Dec 12, 2024
fbaebc7
Update warning background dark theme
homing1 Dec 18, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/clever-readers-compare.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@microsoft/atlas-css': minor
---

Update warning color to match Fluent 2 colors.
69 changes: 59 additions & 10 deletions css/src/tokens/palette.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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: #fde7e9 !default;
Expand Down
58 changes: 29 additions & 29 deletions css/src/tokens/themes.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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-50,
'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,
Expand Down Expand Up @@ -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-60,
'danger-background': $palette-red-10,
Expand Down Expand Up @@ -158,7 +158,7 @@ $themes: (
'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-medium': $palette-yellow-40-deprecated,
'score-high-off': $palette-green-opacity-70,
'score-high': $palette-green-40-deprecated,
'hyperlink': $palette-blue-30-deprecated,
Expand Down Expand Up @@ -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-220,
ollips marked this conversation as resolved.
Show resolved Hide resolved
'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,
'danger-background': $palette-red-80,
Expand Down Expand Up @@ -277,7 +277,7 @@ $themes: (
'score-low-off': $palette-red-60,
'score-low': $palette-red-10,
'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,
Expand Down Expand Up @@ -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,
Expand Down
4 changes: 2 additions & 2 deletions site/src/components/button.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand Down
Loading