Colors
Each color is displayed in both light and dark themes. The color on the left represents the light theme, while the one on the right corresponds to the dark theme.
For a given design token, the color theme is automatically determined by your application's color scheme. Grapes uses the light-dark function for this.
If this function is not supported, Grapes will fallback to the light scheme automatically.
Background
Primary
background-primary-default
background-primary-hover
background-primary-pressed
background-primary-selected
background-primary-disabled
background-primary-readonly
background-primary-brand-default
background-primary-brand-hover
background-primary-brand-pressed
background-primary-info-default
background-primary-info-hover
background-primary-info-pressed
background-primary-success-default
background-primary-success-hover
background-primary-success-pressed
background-primary-warning-default
background-primary-warning-hover
background-primary-warning-pressed
background-primary-alert-default
background-primary-alert-hover
background-primary-alert-pressed
Secondary
background-secondary-default
background-secondary-brand-default
background-secondary-brand-hover
background-secondary-brand-pressed
background-secondary-info-default
background-secondary-info-hover
background-secondary-info-pressed
background-secondary-success-default
background-secondary-success-hover
background-secondary-success-pressed
background-secondary-warning-default
background-secondary-warning-hover
background-secondary-warning-pressed
background-secondary-alert-default
background-secondary-alert-hover
background-secondary-alert-pressed
Tertiary
background-tertiary-default
Complementary
background-complementary-default
background-complementary-hover
background-complementary-pressed
background-complementary-disabled
Content
content-primary
content-secondary-bg-primary
content-secondary-bg-secondary
content-brand-default
content-info-default
content-success-default
content-warning-default
content-alert-default
content-selected
content-brand-hover
content-brand-pressed
content-disabled
content-complementary
content-decorative-icon
Border
border-border-default
border-border-hover
border-border-selected
border-border-info
border-border-success
border-border-warning
border-border-alert
Usage in CSS
Whenever you want to apply this style, you can use the corresponding variable.
.myClass {
color: var(--grapes-color-content-primary);
}
Usage with TailwindCSS
Whenever you want to use a color from Grapes with TailwindCSS, you can use the corresponding keys.
Example:
| TailwindCSS className | CSS equivalent |
|---|---|
bg-background-primary-default | var(--grapes-color-background-primary-default) |
bg-background-primary-hover | var(--grapes-color-background-primary-hover) |
bg-background-primary-pressed | var(--grapes-color-background-primary-pressed) |
bg-background-primary-selected | var(--grapes-color-background-primary-selected) |
bg-background-primary-disabled | var(--grapes-color-background-primary-disabled) |
bg-background-primary-readonly | var(--grapes-color-background-primary-readonly) |
bg-background-secondary-default | var(--grapes-color-background-secondary-default) |
bg-background-secondary-hover | var(--grapes-color-background-secondary-hover) |
bg-background-tertiary-default | var(--grapes-color-background-tertiary-default) |
bg-background-complementary-default | var(--grapes-color-background-complementary-default) |
bg-background-complementary-hover | var(--grapes-color-background-complementary-hover) |
bg-background-complementary-pressed | var(--grapes-color-background-complementary-pressed) |
bg-background-complementary-disabled | var(--grapes-color-background-complementary-disabled) |
bg-background-primary-brand-default | var(--grapes-color-background-primary-brand-default) |
bg-background-primary-brand-hover | var(--grapes-color-background-primary-brand-hover) |
bg-background-primary-brand-pressed | var(--grapes-color-background-primary-brand-pressed) |
bg-background-primary-info-default | var(--grapes-color-background-primary-info-default) |
bg-background-primary-info-hover | var(--grapes-color-background-primary-info-hover) |
bg-background-primary-info-pressed | var(--grapes-color-background-primary-info-pressed) |
bg-background-primary-success-default | var(--grapes-color-background-primary-success-default) |
bg-background-primary-success-hover | var(--grapes-color-background-primary-success-hover) |
bg-background-primary-success-pressed | var(--grapes-color-background-primary-success-pressed) |
bg-background-primary-warning-default | var(--grapes-color-background-primary-warning-default) |
bg-background-primary-warning-hover | var(--grapes-color-background-primary-warning-hover) |
bg-background-primary-warning-pressed | var(--grapes-color-background-primary-warning-pressed) |
bg-background-primary-alert-default | var(--grapes-color-background-primary-alert-default) |
bg-background-primary-alert-hover | var(--grapes-color-background-primary-alert-hover) |
bg-background-primary-alert-pressed | var(--grapes-color-background-primary-alert-pressed) |
bg-background-secondary-brand-default | var(--grapes-color-background-secondary-brand-default) |
bg-background-secondary-brand-hover | var(--grapes-color-background-secondary-brand-hover) |
bg-background-secondary-brand-pressed | var(--grapes-color-background-secondary-brand-pressed) |
bg-background-secondary-info-default | var(--grapes-color-background-secondary-info-default) |
bg-background-secondary-info-hover | var(--grapes-color-background-secondary-info-hover) |
bg-background-secondary-info-pressed | var(--grapes-color-background-secondary-info-pressed) |
bg-background-secondary-success-default | var(--grapes-color-background-secondary-success-default) |
bg-background-secondary-success-hover | var(--grapes-color-background-secondary-success-hover) |
bg-background-secondary-success-pressed | var(--grapes-color-background-secondary-success-pressed) |
bg-background-secondary-warning-default | var(--grapes-color-background-secondary-warning-default) |
bg-background-secondary-warning-hover | var(--grapes-color-background-secondary-warning-hover) |
bg-background-secondary-warning-pressed | var(--grapes-color-background-secondary-warning-pressed) |
bg-background-secondary-alert-default | var(--grapes-color-background-secondary-alert-default) |
bg-background-secondary-alert-hover | var(--grapes-color-background-secondary-alert-hover) |
bg-background-secondary-alert-pressed | var(--grapes-color-background-secondary-alert-pressed) |
text-content-primary | var(--grapes-color-content-primary) |
text-content-secondary-bg-primary | var(--grapes-color-content-secondary-bg-primary) |
text-content-secondary-bg-secondary | var(--grapes-color-content-secondary-bg-secondary) |
text-content-decorative-icon | var(--grapes-color-content-decorative-icon) |
text-content-complementary | var(--grapes-color-content-complementary) |
text-content-selected | var(--grapes-color-content-selected) |
text-content-disabled | var(--grapes-color-content-disabled) |
text-content-brand-default | var(--grapes-color-content-brand-default) |
text-content-brand-hover | var(--grapes-color-content-brand-hover) |
text-content-brand-pressed | var(--grapes-color-content-brand-pressed) |
text-content-info-default | var(--grapes-color-content-info-default) |
text-content-success-default | var(--grapes-color-content-success-default) |
text-content-warning-default | var(--grapes-color-content-warning-default) |
text-content-alert-default | var(--grapes-color-content-alert-default) |
border-border-default | var(--grapes-color-border-default) |
border-border-complementary | var(--grapes-color-border-complementary) |
border-border-hover | var(--grapes-color-border-hover) |
border-border-selected | var(--grapes-color-border-selected) |
border-border-info | var(--grapes-color-border-info) |
border-border-success | var(--grapes-color-border-success) |
border-border-warning | var(--grapes-color-border-warning) |
border-border-alert | var(--grapes-color-border-alert) |
See documentation from TailwindCSS: https://tailwindcss.com/docs/text-color.