Changed the color of palette-marron-flush so it has a better contrast. #1211
Conversation
|
|
Azure Static Web Apps: Your stage site is ready! Visit it here: https://delightful-beach-055ecb503-1211.westeurope.azurestaticapps.net |
There was a problem hiding this comment.
Pull Request Overview
Adjusts the maroon-flush palette token to improve contrast (aiming for WCAG AA) and aligns its light/dark/dimmed variants with the new base.
- Update base token $maroon-flush to a darker value for better contrast
- Refresh -light, -dark, and -dimmed variants to match the new base
Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.
| $maroon-flush: #c31d4c; | ||
| --uui-palette-maroon-flush: $maroon-flush; | ||
| --uui-palette-maroon-flush-light: rgb( | ||
| 226, | ||
| 60, | ||
| 107 | ||
| 223, | ||
| 42, | ||
| 93 | ||
| ); /* color($maroon-flush lightness(+ 8%)); */ | ||
| --uui-palette-maroon-flush-dark: rgb( | ||
| 191, | ||
| 33, | ||
| 78 | ||
| 174, | ||
| 30, | ||
| 71 | ||
| ); /* color($maroon-flush blackness(+ 8%)); */ | ||
| --uui-palette-maroon-flush-dimmed: rgb( | ||
| 133, | ||
| 107, | ||
| 114 | ||
| 122, | ||
| 98, | ||
| 104 | ||
| ); /* color( | ||
| $maroon-flush saturation(- 62%) blackness(+ 2%) | ||
| ); */ |
There was a problem hiding this comment.
[nitpick] The -light, -dark, and -dimmed tokens are hard-coded RGB values. To prevent future drift when the base token changes, derive these from $maroon-flush at build time (e.g., with sass:color): --uui-palette-maroon-flush-light: #{color.scale($maroon-flush, $lightness: 8%)}; --uui-palette-maroon-flush-dark: #{color.scale($maroon-flush, $lightness: -8%)}; --uui-palette-maroon-flush-dimmed: #{color.scale($maroon-flush, $saturation: -62%, $lightness: -2%)}.
Copilot uses AI. Check for mistakes.
| 223, | ||
| 42, | ||
| 93 | ||
| ); /* color($maroon-flush lightness(+ 8%)); */ |
There was a problem hiding this comment.
The inline comments reference a non-standard/legacy color() modification syntax (historically color-mod). Consider updating the comments to reflect the actual method used to derive these values (e.g., 'Derived from $maroon-flush with +8% lightness', '-8% lightness', and 'saturation -62%, lightness -2%') or adopt sass:color functions and reference those for clarity.
Copilot uses AI. Check for mistakes.
| 174, | ||
| 30, | ||
| 71 | ||
| ); /* color($maroon-flush blackness(+ 8%)); */ |
There was a problem hiding this comment.
The inline comments reference a non-standard/legacy color() modification syntax (historically color-mod). Consider updating the comments to reflect the actual method used to derive these values (e.g., 'Derived from $maroon-flush with +8% lightness', '-8% lightness', and 'saturation -62%, lightness -2%') or adopt sass:color functions and reference those for clarity.
| ); /* color($maroon-flush blackness(+ 8%)); */ | |
| ); /* Derived from $maroon-flush with -8% lightness (e.g., darken($maroon-flush, 8%)) */ |
Copilot uses AI. Check for mistakes.
| ); /* color( | ||
| $maroon-flush saturation(- 62%) blackness(+ 2%) | ||
| ); */ |
There was a problem hiding this comment.
The inline comments reference a non-standard/legacy color() modification syntax (historically color-mod). Consider updating the comments to reflect the actual method used to derive these values (e.g., 'Derived from $maroon-flush with +8% lightness', '-8% lightness', and 'saturation -62%, lightness -2%') or adopt sass:color functions and reference those for clarity.
Copilot uses AI. Check for mistakes.
1 participant
Changed the color of palette-marron-flush so it has a better contrast that complies with WCAG AA.
Adjusted the other variants so they allign with the new changes made to the palette