What this changes
With the expansion of the design system themes to include a fourth theme (CMS.gov), we noticed theme variables were inconsistent. In some cases colors and whole color palettes weren't being used and needed to be removed. We've cleaned up and reorganized these colors using design tokens and theming to provide a more intentional approach to color.
Brand colors
Primary
We've updated the primary color to complete the spectrum from lightest to darkest. There are now more primary color values to use.
| Before | After |
|---|---|
--color-primary-lightestocean-50 | --color-primary-lightestocean-50 |
did not exist | --color-primary-lighterocean-100 |
did not exist | --color-primary-lightocean-300 |
--color-primaryocean-500 | --color-primaryocean-500 |
did not exist | --color-primary-darkocean-600 |
--color-primary-darkerocean-700 | --color-primary-darkerocean-700 |
--color-primary-darkestocean-800 | --color-primary-darkestocean-800 |
Secondary
One major shift with color standardization is updating the secondary color to use green system color tokens in the core and healthcare themes. In addition, we created the info status color and secondary colors have moved to the info color palette for informational components such as alerts, badges, and icons.
| Before | After |
|---|---|
--color-secondary-lightestsky-50 | --color-secondary-lightestspring-50 |
--color-secondary-lightersky-100 | --color-secondary-lighterspring-200 |
--color-secondary-lightsky-300 | --color-secondary-lightspring-400 |
--color-secondarysky-500 | --color-secondaryspring-500 |
--color-secondary-darksky-600 | --color-secondary-darkspring-600 |
--color-secondary-darkersky-700 | --color-secondary-darkerspring-700 |
--color-secondary-darkestsky-800 | --color-secondary-darkestspring-800 |
Status colors
Status colors are used to communicate error, success, warning, or info statuses.
Informational
We added an informational color palette for informational alerts, badges, and icons.
| Before | After |
|---|---|
did not exist | --color-info-lightestsky-50 |
did not exist | --color-info-lightersky-100 |
did not exist | --color-info-lightsky-300 |
did not exist | --color-infosky-500 |
did not exist | --color-info-darksky-600 |
did not exist | --color-info-darkersky-700 |
did not exist | --color-info-darkestsky-800 |
Green
Green is removed and was a non-semantic duplicate of success.
| Before | After |
|---|---|
--color-green-lightestspring-50 | removed |
--color-green-lighterspring-200 | removed |
--color-green-lightspring-400 | removed |
--color-greenspring-500 | removed |
--color-green-darkspring-600 | removed |
--color-green-darkerspring-700 | removed |
--color-green-darkestspring-800 | removed |
Gold
Gold is removed and was a non-semantic duplicate of warn.
| Before | After |
|---|---|
--color-gold-lightestgoldenrod-50 | removed |
--color-gold-lightergoldenrod-200 | removed |
--color-gold-lightgoldenrod-400 | removed |
--color-goldgoldenrod-500 | removed |
--color-gold-darkgoldenrod-600 | removed |
--color-gold-darkergoldenrod-700 | removed |
--color-gold-darkestgoldenrod-800 | removed |
Red
Red is removed and was a non-semantic duplicate of error.
| Before | After |
|---|---|
--color-red-lightestrose-50 | removed |
--color-red-lighterrose-100 | removed |
--color-red-lightrose-200 | removed |
--color-redrose-500 | removed |
--color-red-darkrose-600 | removed |
--color-red-darkerrose-700 | removed |
--color-red-darkestrose-800 | removed |
Neutral colors
Grays have been standardized and use the same naming structure as other color palettes.
| Before | After |
|---|---|
--color-gray-cool-lightocean-50 | removed |
--color-gray-warm-lightgranite-50 | removed |
--color-gray-lightestgranite-50 | --color-gray-lightestgranite-50 |
--color-gray-lightergranite-100 | --color-gray-lightergranite-100 |
--color-gray-lightgranite-300 | --color-gray-lightgranite-300 |
--color-graygranite-700 | --color-graygranite-500 |
--color-gray-darkgranite-800 | --color-gray-darkgranite-700 |
did not exist | --color-gray-darkergranite-800 |
did not exist | --color-gray-darkestgranite-900 |
--color-gray-mediumgranite-600 | removed |
--color-gray-warm-darkgranite-800 | removed |
Color shift of neutrals
Both --color-gray and --color-gray-dark are now lighter.
| Before | After |
|---|---|
--color-graygranite-700 | --color-graygranite-500 |
--color-gray-darkgranite-800 | --color-gray-darkgranite-700 |
Coolblue
Coolblue was unused in the design system and is removed.
| Before | After |
|---|---|
--color-coolblue-lightestsapphire-50 | removed |
--color-coolblue-lightersapphire-200 | removed |
--color-coolblue-lightsapphire-500 | removed |
--color-coolbluesapphire-600 | removed |
Components impacted
Alert
The alert component has been updated to use info colors for the left border color and background color. This change does not result in visual changes.
Autocomplete items
The hover/selected state for autocomplete items in core and healthcare changed
from using the secondary (now info) blue to the primary blue used in buttons.
| Before | After |
|---|---|
--autocomplete-item__background-color--activesky-800 | --autocomplete-item__background-color--activeocean-800 |
Calendar picker button
Previously, gray-cool-light was mapped to the same system color token for all themes.
When removing gray-cool-light, we remapped the background color for the hover
state of calendar picker buttons to primary-lightest. On all but the core theme, this results in a slight color shift for the background color of those day-picker buttons when hovered.
| Before | After |
|---|---|
--color-gray-cool-lightocean-50 | --color-primary-lightestocean-50 |
Filter chip
The secondary to info color shift in most themes forced us to make a
decision about border and background colors for the filter chip. Previously
most themes had a mismatch between these two colors. While the chosen colors
depend on the brand, we've made sure the border and background match now.
| Before | After |
|---|---|
--filter-chip__background-colorsky-50 | --filter-chip__background-colorocean-50 |
--filter-chip__border-colorocean-500 | --filter-chip__border-colorocean-500 |