Color
Phoenix is supported by an extensive color system that themes our styles and components. This enables more comprehensive customization and extension for any project.
Colors
Phoenix comes with lots of colors and variants. We added quaternary and body-highlight colors besides secondary and tertiary colors and also theme colors shades.
| Name | Swatch | CSS variables | Class |
|---|---|---|---|
| Body | --text-color-body |
text-body |
|
--background-color-body |
bg-body |
||
| Body secondary | --text-color-body-secondary |
text-body-secondary |
|
--background-color-body-secondary |
bg-body-secondary |
||
| Body tertiary | --text-color-body-tertiary |
text-body-tertiary |
|
--background-color-body-tertiary |
bg-body-tertiary |
||
| Body quaternary | --text-color-body-quaternary |
text-body-quaternary |
|
--background-color-body-quaternary |
bg-body-quaternary |
||
| Body emphasis | --text-color-body-emphasis |
text-body-emphasis |
|
--background-color-body-emphasis |
bg-body-emphasis |
||
| Body highlight | --text-color-body-highlight |
text-body-highlight |
|
--background-color-body-highlight |
bg-body-highlight |
||
| primary | |||
--color-primary-lighter |
text-primary-lighterbg-primary-lighter |
||
--color-primary-light |
text-primary-lightbg-primary-light |
||
--color-primary |
text-primarybg-primary |
||
--color-primary-dark |
text-primary-darkbg-primary-dark |
||
--color-primary-darker |
text-primary-darkerbg-primary-darker |
||
| secondary | |||
--color-secondary-lighter |
text-secondary-lighterbg-secondary-lighter |
||
--color-secondary-light |
text-secondary-lightbg-secondary-light |
||
--color-secondary |
text-secondarybg-secondary |
||
--color-secondary-dark |
text-secondary-darkbg-secondary-dark |
||
--color-secondary-darker |
text-secondary-darkerbg-secondary-darker |
||
| success | |||
--color-success-lighter |
text-success-lighterbg-success-lighter |
||
--color-success-light |
text-success-lightbg-success-light |
||
--color-success |
text-successbg-success |
||
--color-success-dark |
text-success-darkbg-success-dark |
||
--color-success-darker |
text-success-darkerbg-success-darker |
||
| danger | |||
--color-danger-lighter |
text-danger-lighterbg-danger-lighter |
||
--color-danger-light |
text-danger-lightbg-danger-light |
||
--color-danger |
text-dangerbg-danger |
||
--color-danger-dark |
text-danger-darkbg-danger-dark |
||
--color-danger-darker |
text-danger-darkerbg-danger-darker |
||
| warning | |||
--color-warning-lighter |
text-warning-lighterbg-warning-lighter |
||
--color-warning-light |
text-warning-lightbg-warning-light |
||
--color-warning |
text-warningbg-warning |
||
--color-warning-dark |
text-warning-darkbg-warning-dark |
||
--color-warning-darker |
text-warning-darkerbg-warning-darker |
||
| info | |||
--color-info-lighter |
text-info-lighterbg-info-lighter |
||
--color-info-light |
text-info-lightbg-info-light |
||
--color-info |
text-infobg-info |
||
--color-info-dark |
text-info-darkbg-info-dark |
||
--color-info-darker |
text-info-darkerbg-info-darker |
||
| Emphasis text | |||
--text-color-primary-emphasis |
text-primary-emphasis |
||
--text-color-secondary-emphasis |
text-secondary-emphasis |
||
--text-color-success-emphasis |
text-success-emphasis |
||
--text-color-danger-emphasis |
text-danger-emphasis |
||
--text-color-warning-emphasis |
text-warning-emphasis |
||
--text-color-info-emphasis |
text-info-emphasis |
||
--text-color-light-emphasis |
text-light-emphasis |
||
--text-color-dark-emphasis |
text-dark-emphasis |
||
| Subtle background | |||
--background-color-primary-subtle |
bg-primary-subtle |
||
--background-color-secondary-subtle |
bg-secondary-subtle |
||
--background-color-success-subtle |
bg-success-subtle |
||
--background-color-danger-subtle |
bg-danger-subtle |
||
--background-color-warning-subtle |
bg-warning-subtle |
||
--background-color-info-subtle |
bg-info-subtle |
||
--background-color-light-subtle |
bg-light-subtle |
||
--background-color-dark-subtle |
bg-dark-subtle |
