Colors
The color palette is based on the WPDS Color Foundations (opens in a new tab). The names here are legacy however we have mapped the names to the new WPDS colors.
Our color tachyons can be applied to the HTML like so where color
is the name of the color.
<div class="blue">Text</div>
bg-color
- background colorcolor
- text colorbc-color
- border colorfill-color
- svg fill colorhover-fill-color
- svg fill color on hoverhover-bg-color
- background color on hoverhover-color
- text color on hover
Color Palette
We have documented the old color token with the new WPDS color token.
blue var(--wpds-colors-blue80)
blue-dark var(--wpds-colors-blue40)
blue-pale var(--wpds-colors-blue600)
white var(--wpds-colors-gray700)
offwhite var(--wpds-colors-gray600)
black var(--wpds-colors-gray0)
offblack var(--wpds-colors-gray20)
gray-lightest var(--wpds-colors-gray500)
gray-lighter var(--wpds-colors-gray400)
gray-light var(--wpds-colors-gray300)
gray var(--wpds-colors-gray200)
gray-dark var(--wpds-colors-gray80)
gray-darker var(--wpds-colors-gray60)
gray-darkest var(--wpds-colors-gray40)
red var(--wpds-colors-red100)
red-dark var(--wpds-colors-red80)
red-pale var(--wpds-colors-red600)
green var(--wpds-colors-green100)
green-dark var(--wpds-colors-green60)
green-pale var(--wpds-colors-green600)
gold var(--wpds-colors-gold60)
gold-dark var(--wpds-colors-gold40)