As we developed the new Segmented Control component, an opportunity arose to re-evaluate how we name our “subtle” and “alt” colour shades. We realised two things:
- The fidelity in our neutral palette did not provide enough contrast when the Segmented-Control and Tag/Notification components with a “neutral-subtle” appearance were placed on a “neutral-subtle” canvas (see below).
- It was unclear what the meaning behind “subtle” and “alt” was 😃.
To correct this and provide us with a clean naming convention that also scaled to allow extra shades, “subtle” and “alt” shades have been superceded by new “weakest”, “weak”, “strong”, and “strongest” shades.
Segmented-Control on a Neutral-Subtle canvas.
Segmented-Control on a Neutral-Weakest canvas.
Neutral-Subtle Tag on a Neutral-Subtle canvas.
Neutral-Weak Tag on a Neutral-Weakest canvas.
Neutral-Subtle Notification on a Neutral-Subtle canvas.
Neutral-Weak Notification on a Neutral-Weakest canvas.
What’s changed
We have refactored our existing “subtle” and “alt” colour shade design tokens to reflect a new scale based naming convention of “weakest”, “weak”, “strong”, “strongest”.
New shades and mappings to the “subtle” and “alt” shades.
Background shades
| Now | Then | |
|---|---|---|
| neutral_weakest_background_color | neutral_subtle_background_color | |
| neutral_weak_background_color ⭐ | ||
| neutral_strong_background_color | neutral_alt_background_color | |
| neutral_strongest_background_color ⭐ | ||
| primary_weak_background_color | primary_weak_background_color | |
| secondary_weak_background_color | secondary_subtle_background_color | |
| info_weak_background_color | info_subtle_background_color | |
| error_weak_background_color | error_subtle_background_color | |
| warning_weak_background_color | warning_subtle_background_color | |
| success_weak_background_color | warning_subtle_background_color |
⭐ New shade!
Text and “on-background” shades
| Now | Then | |
|---|---|---|
| neutral_weakest_text_color | neutral_subtle_text_color | |
| neutral_weak_text_color | neutral_alt_text_color | |
| neutral_weakest_on-background_color | neutral_subtle_on-background_color | |
| neutral_weak_on-background_color | neutral_alt_on-subtle_color | |
| neutral_strong_on-background_color ⭐ | ||
| neutral_strongest_on-background_color ⭐ | ||
| primary_weak_on-background_color | primary_subtle_on-background_color | |
| secondary_weak_on-background_color | secondary_subtle_on-background_color | |
| info_weak_on-background_color | info_subtle_on-background_color | |
| error_weak_on-background_color | error_subtle_on-background_color | |
| warning_weak_on-background_color | warning_subtle_on-background_color | |
| success_weak_on-background_color | success_subtle_on-background_color |
⭐ New shade!
Border shades
| Now | Then | |
|---|---|---|
| neutral_weak_border_color | neutral_subtle_border_color | |
| primary_weak_border_color | primary_subtle_border_color | |
| secondary_weak_border_color | secondary_subtle_border_color | |
| info_weak_border_color | info_subtle_border_color | |
| error_weak_border_color | error_subtle_border_color | |
| warning_weak_border_color | warning_subtle_border_color | |
| success_weak_border_color | success_subtle_border_color |
⭐ New shade!
For Designers
This will be updated in Figma with version 2.14.0 of the MDS:UI library and will not cause any breaking changes.
Components and color tokens will be updated automatically.
For Developers
Colour shade refactoring has meant that related CSS variables, classes and component appearance values for “Tag” and “Notifcation” have also been refactored to reflect the new shade naming conventions.
The old “subtle” and “alt” names and values are still available and automatically map to the new shades and so you should not experience any breaking changes.
However, “subtle” and “alt” shades will be removed from code at the start of Q3 2024 so we recommend migrating to the new shade tokens over the coming months.