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 |