Colors
Background
Primary
primary-default
primary-hover
primary-pressed
primary-selected
primary-disabled
primary-readonly
primary-brand-default
primary-brand-hover
primary-brand-pressed
primary-info-default
primary-info-hover
primary-info-pressed
primary-success-default
primary-success-hover
primary-success-pressed
primary-warning-default
primary-warning-hover
primary-warning-pressed
primary-alert-default
primary-alert-hover
primary-alert-pressed
Secondary
secondary-default
secondary-brand-default
secondary-brand-hover
secondary-brand-pressed
secondary-info-default
secondary-info-hover
secondary-info-pressed
secondary-success-default
secondary-success-hover
secondary-success-pressed
secondary-warning-default
secondary-warning-hover
secondary-warning-pressed
secondary-alert-default
secondary-alert-hover
secondary-alert-pressed
Tertiary
tertiary-default
Complementary
complementary-default
complementary-hover
complementary-pressed
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-default
border-hover
border-selected
border-info
border-success
border-warning
border-alert
Usage in CSS
Whenever you want to apply this style, you can use the corresponding variable.
.myClass {
color: var(--color-brand-default);
}
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 |
|---|---|
var(--color-backdrop | |
bg-primary-default | |
bg-primary-hover | |
bg-primary-pressed | |
bg-primary-selected | |
bg-primary-disabled | |
bg-primary-readonly | |
bg-secondary-default | |
bg-secondary-hover | |
bg-tertiary-default | |
bg-complementary-default | |
bg-complementary-hover | |
bg-complementary-pressed | |
bg-complementary-disabled | |
bg-primary-brand-default | |
bg-primary-brand-hover | |
bg-primary-brand-pressed | |
bg-primary-info-default | |
bg-primary-info-hover | |
bg-primary-info-pressed | |
bg-primary-success-default | |
bg-primary-success-hover | |
bg-primary-success-pressed | |
bg-primary-warning-default | |
bg-primary-warning-hover | |
bg-primary-warning-pressed | |
bg-primary-alert-default | |
bg-primary-alert-hover | |
bg-primary-alert-pressed | |
bg-secondary-brand-default | |
bg-secondary-brand-hover | |
bg-secondary-brand-pressed | |
bg-secondary-info-default | |
bg-secondary-info-hover | |
bg-secondary-info-pressed | |
bg-secondary-success-default | |
bg-secondary-success-hover | |
bg-secondary-success-pressed | |
bg-secondary-warning-default | |
bg-secondary-warning-hover | |
bg-secondary-warning-pressed | |
bg-secondary-alert-default | |
bg-secondary-alert-hover | |
bg-secondary-alert-pressed | |
text-primary | Aa |
text-secondary-bg-primary | Aa |
text-secondary-bg-secondary | Aa |
text-decorative-icon | Aa |
text-complementary | Aa |
text-selected | Aa |
text-disabled | Aa |
text-brand-default | Aa |
text-brand-hover | Aa |
text-brand-pressed | Aa |
text-info-default | Aa |
text-success-default | Aa |
text-warning-default | Aa |
text-alert-default | Aa |
border-default | |
border-complementary | |
border-hover | |
border-selected | |
border-info | |
border-success | |
border-warning | |
border-alert |
See documentation from TailwindCSS: https://tailwindcss.com/docs/text-color.