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-lightest ocean-50 | --color-primary-lightest ocean-50 |
did not exist | --color-primary-lighter ocean-100 |
did not exist | --color-primary-light ocean-300 |
--color-primary ocean-500 | --color-primary ocean-500 |
did not exist | --color-primary-dark ocean-600 |
--color-primary-darker ocean-700 | --color-primary-darker ocean-700 |
--color-primary-darkest ocean-800 | --color-primary-darkest ocean-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-lightest sky-50 | --color-secondary-lightest spring-50 |
--color-secondary-lighter sky-100 | --color-secondary-lighter spring-200 |
--color-secondary-light sky-300 | --color-secondary-light spring-400 |
--color-secondary sky-500 | --color-secondary spring-500 |
--color-secondary-dark sky-600 | --color-secondary-dark spring-600 |
--color-secondary-darker sky-700 | --color-secondary-darker spring-700 |
--color-secondary-darkest sky-800 | --color-secondary-darkest spring-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-lightest sky-50 |
did not exist | --color-info-lighter sky-100 |
did not exist | --color-info-light sky-300 |
did not exist | --color-info sky-500 |
did not exist | --color-info-dark sky-600 |
did not exist | --color-info-darker sky-700 |
did not exist | --color-info-darkest sky-800 |
Green
Green is removed and was a non-semantic duplicate of success
.
Before | After |
---|---|
--color-green-lightest spring-50 | removed |
--color-green-lighter spring-200 | removed |
--color-green-light spring-400 | removed |
--color-green spring-500 | removed |
--color-green-dark spring-600 | removed |
--color-green-darker spring-700 | removed |
--color-green-darkest spring-800 | removed |
Gold
Gold is removed and was a non-semantic duplicate of warn
.
Before | After |
---|---|
--color-gold-lightest goldenrod-50 | removed |
--color-gold-lighter goldenrod-200 | removed |
--color-gold-light goldenrod-400 | removed |
--color-gold goldenrod-500 | removed |
--color-gold-dark goldenrod-600 | removed |
--color-gold-darker goldenrod-700 | removed |
--color-gold-darkest goldenrod-800 | removed |
Red
Red is removed and was a non-semantic duplicate of error
.
Before | After |
---|---|
--color-red-lightest rose-50 | removed |
--color-red-lighter rose-100 | removed |
--color-red-light rose-200 | removed |
--color-red rose-500 | removed |
--color-red-dark rose-600 | removed |
--color-red-darker rose-700 | removed |
--color-red-darkest rose-800 | removed |
Neutral colors
Grays have been standardized and use the same naming structure as other color palettes.
Before | After |
---|---|
--color-gray-cool-light ocean-50 | removed |
--color-gray-warm-light granite-50 | removed |
--color-gray-lightest granite-50 | --color-gray-lightest granite-50 |
--color-gray-lighter granite-100 | --color-gray-lighter granite-100 |
--color-gray-light granite-300 | --color-gray-light granite-300 |
--color-gray granite-700 | --color-gray granite-500 |
--color-gray-dark granite-800 | --color-gray-dark granite-700 |
did not exist | --color-gray-darker granite-800 |
did not exist | --color-gray-darkest granite-900 |
--color-gray-medium granite-600 | removed |
--color-gray-warm-dark granite-800 | removed |
Color shift of neutrals
Both --color-gray
and --color-gray-dark
are now lighter.
Before | After |
---|---|
--color-gray granite-700 | --color-gray granite-500 |
--color-gray-dark granite-800 | --color-gray-dark granite-700 |
Coolblue
Coolblue was unused in the design system and is removed.
Before | After |
---|---|
--color-coolblue-lightest sapphire-50 | removed |
--color-coolblue-lighter sapphire-200 | removed |
--color-coolblue-light sapphire-500 | removed |
--color-coolblue sapphire-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--active sky-800 | --autocomplete-item__background-color--active ocean-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-light ocean-50 | --color-primary-lightest ocean-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-color sky-50 | --filter-chip__background-color ocean-50 |
--filter-chip__border-color ocean-500 | --filter-chip__border-color ocean-500 |