Colors - ariel-fer/Araena GitHub Wiki
[[TOC]]
The standard way to add color is to use the already-built classes. It also works for all child elements you add. Avoids having to set multiple classes to many separate elements when you can simply assign a color to a parent element.
| Background class | Text class | Color |
|---|---|---|
c-color-bg-main-primary |
c-color-text-main-primary |
main-primary |
c-color-bg-main-secondary |
c-color-text-main-secondary |
main-secondary |
c-color-bg-main-tertiary |
c-color-text-main-tertiary |
main-tertiary |
c-color-bg-main-quaternary |
c-color-text-main-quaternary |
main-quaternary |
c-color-bg-main-quinary |
c-color-text-main-quinary |
main-quinary |
c-color-bg-neutral-20 |
c-color-text-neutral-20 |
neutral-20 |
c-color-bg-neutral-50 |
c-color-text-neutral-50 |
neutral-50 |
c-color-bg-neutral-100 |
c-color-text-neutral-100 |
neutral-100 |
c-color-bg-neutral-200 |
c-color-text-neutral-200 |
neutral-200 |
c-color-bg-neutral-300 |
c-color-text-neutral-300 |
neutral-300 |
c-color-bg-neutral-400 |
c-color-text-neutral-400 |
neutral-400 |
c-color-bg-neutral-500 |
c-color-text-neutral-500 |
neutral-500 |
c-color-bg-neutral-600 |
c-color-text-neutral-600 |
neutral-600 |
c-color-bg-neutral-700 |
c-color-text-neutral-700 |
neutral-700 |
c-color-bg-neutral-800 |
c-color-text-neutral-800 |
neutral-800 |
c-color-bg-neutral-900 |
c-color-text-neutral-900 |
neutral-900 |
c-color-bg-accent-1 |
c-color-text-accent-1 |
accent-1 |
c-color-bg-accent-2 |
c-color-text-accent-2 |
accent-2 |
c-color-bg-accent-3 |
c-color-text-accent-3 |
accent-3 |
When creating a custom class to solve styling in a component, you can also choose to apply the color directly to that class. Use the colors defined as variables from the Style Guide Colors Palette