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.

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.

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.

Green

Green is removed and was a non-semantic duplicate of success.

Gold

Gold is removed and was a non-semantic duplicate of warn.

Red

Red is removed and was a non-semantic duplicate of error.

Neutral colors

Grays have been standardized and use the same naming structure as other color palettes.

Color shift of neutrals

Both --color-gray and --color-gray-dark are now lighter.

Coolblue

Coolblue was unused in the design system and is 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.

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.

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.