Color Utilities
The color utilities provide a set of classes to adjust the color and background properties of elements.
Background Color
| Class Name | Property | Value |
|---|---|---|
.bg-primary-100 | background | var(--graupl-theme-active--primary--100) |
.bg-primary-200 | background | var(--graupl-theme-active--primary--200) |
.bg-primary-300 | background | var(--graupl-theme-active--primary--300) |
.bg-primary-400 | background | var(--graupl-theme-active--primary--400) |
.bg-primary-500 | background | var(--graupl-theme-active--primary--500) |
.bg-primary-600 | background | var(--graupl-theme-active--primary--600) |
.bg-primary-700 | background | var(--graupl-theme-active--primary--700) |
.bg-primary-800 | background | var(--graupl-theme-active--primary--800) |
.bg-primary-900 | background | var(--graupl-theme-active--primary--900) |
.bg-secondary-100 | background | var(--graupl-theme-active--secondary--100) |
.bg-secondary-200 | background | var(--graupl-theme-active--secondary--200) |
.bg-secondary-300 | background | var(--graupl-theme-active--secondary--300) |
.bg-secondary-400 | background | var(--graupl-theme-active--secondary--400) |
.bg-secondary-500 | background | var(--graupl-theme-active--secondary--500) |
.bg-secondary-600 | background | var(--graupl-theme-active--secondary--600) |
.bg-secondary-700 | background | var(--graupl-theme-active--secondary--700) |
.bg-secondary-800 | background | var(--graupl-theme-active--secondary--800) |
.bg-secondary-900 | background | var(--graupl-theme-active--secondary--900) |
.bg-tertiary-100 | background | var(--graupl-theme-active--tertiary--100) |
.bg-tertiary-200 | background | var(--graupl-theme-active--tertiary--200) |
.bg-tertiary-300 | background | var(--graupl-theme-active--tertiary--300) |
.bg-tertiary-400 | background | var(--graupl-theme-active--tertiary--400) |
.bg-tertiary-500 | background | var(--graupl-theme-active--tertiary--500) |
.bg-tertiary-600 | background | var(--graupl-theme-active--tertiary--600) |
.bg-tertiary-700 | background | var(--graupl-theme-active--tertiary--700) |
.bg-tertiary-800 | background | var(--graupl-theme-active--tertiary--800) |
.bg-tertiary-900 | background | var(--graupl-theme-active--tertiary--900) |
.bg-inherit | background | inherit |
.bg-current | background | currentColor |
.bg-transparent | background | transparent |
.bg-primary-100
Sets the background property to var(--graupl-theme-active--primary--100).
.bg-primary-200
Sets the background property to var(--graupl-theme-active--primary--200).
.bg-primary-300
Sets the background property to var(--graupl-theme-active--primary--300).
.bg-primary-400
Sets the background property to var(--graupl-theme-active--primary--400).
.bg-primary-500
Sets the background property to var(--graupl-theme-active--primary--500).
.bg-primary-600
Sets the background property to var(--graupl-theme-active--primary--600).
.bg-primary-700
Sets the background property to var(--graupl-theme-active--primary--700).
.bg-primary-800
Sets the background property to var(--graupl-theme-active--primary--800).
.bg-primary-900
Sets the background property to var(--graupl-theme-active--primary--900).
.bg-secondary-100
Sets the background property to var(--graupl-theme-active--secondary--100).
.bg-secondary-200
Sets the background property to var(--graupl-theme-active--secondary--200).
.bg-secondary-300
Sets the background property to var(--graupl-theme-active--secondary--300).
.bg-secondary-400
Sets the background property to var(--graupl-theme-active--secondary--400).
.bg-secondary-500
Sets the background property to var(--graupl-theme-active--secondary--500).
.bg-secondary-600
Sets the background property to var(--graupl-theme-active--secondary--600).
.bg-secondary-700
Sets the background property to var(--graupl-theme-active--secondary--700).
.bg-secondary-800
Sets the background property to var(--graupl-theme-active--secondary--800).
.bg-secondary-900
Sets the background property to var(--graupl-theme-active--secondary--900).
.bg-tertiary-100
Sets the background property to var(--graupl-theme-active--tertiary--100).
.bg-tertiary-200
Sets the background property to var(--graupl-theme-active--tertiary--200).
.bg-tertiary-300
Sets the background property to var(--graupl-theme-active--tertiary--300).
.bg-tertiary-400
Sets the background property to var(--graupl-theme-active--tertiary--400).
.bg-tertiary-500
Sets the background property to var(--graupl-theme-active--tertiary--500).
.bg-tertiary-600
Sets the background property to var(--graupl-theme-active--tertiary--600).
.bg-tertiary-700
Sets the background property to var(--graupl-theme-active--tertiary--700).
.bg-tertiary-800
Sets the background property to var(--graupl-theme-active--tertiary--800).
.bg-tertiary-900
Sets the background property to var(--graupl-theme-active--tertiary--900).
.bg-inherit
Sets the background property to inherit.
.bg-current
Sets the background property to currentColor.
.bg-transparent
Sets the background property to transparent.
Text Color
| Class Name | Property | Value |
|---|---|---|
.text-primary-100 | color | var(--graupl-theme-active--primary--100) |
.text-primary-200 | color | var(--graupl-theme-active--primary--200) |
.text-primary-300 | color | var(--graupl-theme-active--primary--300) |
.text-primary-400 | color | var(--graupl-theme-active--primary--400) |
.text-primary-500 | color | var(--graupl-theme-active--primary--500) |
.text-primary-600 | color | var(--graupl-theme-active--primary--600) |
.text-primary-700 | color | var(--graupl-theme-active--primary--700) |
.text-primary-800 | color | var(--graupl-theme-active--primary--800) |
.text-primary-900 | color | var(--graupl-theme-active--primary--900) |
.text-secondary-100 | color | var(--graupl-theme-active--secondary--100) |
.text-secondary-200 | color | var(--graupl-theme-active--secondary--200) |
.text-secondary-300 | color | var(--graupl-theme-active--secondary--300) |
.text-secondary-400 | color | var(--graupl-theme-active--secondary--400) |
.text-secondary-500 | color | var(--graupl-theme-active--secondary--500) |
.text-secondary-600 | color | var(--graupl-theme-active--secondary--600) |
.text-secondary-700 | color | var(--graupl-theme-active--secondary--700) |
.text-secondary-800 | color | var(--graupl-theme-active--secondary--800) |
.text-secondary-900 | color | var(--graupl-theme-active--secondary--900) |
.text-tertiary-100 | color | var(--graupl-theme-active--tertiary--100) |
.text-tertiary-200 | color | var(--graupl-theme-active--tertiary--200) |
.text-tertiary-300 | color | var(--graupl-theme-active--tertiary--300) |
.text-tertiary-400 | color | var(--graupl-theme-active--tertiary--400) |
.text-tertiary-500 | color | var(--graupl-theme-active--tertiary--500) |
.text-tertiary-600 | color | var(--graupl-theme-active--tertiary--600) |
.text-tertiary-700 | color | var(--graupl-theme-active--tertiary--700) |
.text-tertiary-800 | color | var(--graupl-theme-active--tertiary--800) |
.text-tertiary-900 | color | var(--graupl-theme-active--tertiary--900) |
.text-inherit | color | inherit |
.text-current | color | currentColor |
.text-transparent | color | transparent |
.text-primary-100
Sets the color property to var(--graupl-theme-active--primary--100).
.text-primary-200
Sets the color property to var(--graupl-theme-active--primary--200).
.text-primary-300
Sets the color property to var(--graupl-theme-active--primary--300).
.text-primary-400
Sets the color property to var(--graupl-theme-active--primary--400).
.text-primary-500
Sets the color property to var(--graupl-theme-active--primary--500).
.text-primary-600
Sets the color property to var(--graupl-theme-active--primary--600).
.text-primary-700
Sets the color property to var(--graupl-theme-active--primary--700).
.text-primary-800
Sets the color property to var(--graupl-theme-active--primary--800).
.text-primary-900
Sets the color property to var(--graupl-theme-active--primary--900).
.text-secondary-100
Sets the color property to var(--graupl-theme-active--secondary--100).
.text-secondary-200
Sets the color property to var(--graupl-theme-active--secondary--200).
.text-secondary-300
Sets the color property to var(--graupl-theme-active--secondary--300).
.text-secondary-400
Sets the color property to var(--graupl-theme-active--secondary--400).
.text-secondary-500
Sets the color property to var(--graupl-theme-active--secondary--500).
.text-secondary-600
Sets the color property to var(--graupl-theme-active--secondary--600).
.text-secondary-700
Sets the color property to var(--graupl-theme-active--secondary--700).
.text-secondary-800
Sets the color property to var(--graupl-theme-active--secondary--800).
.text-secondary-900
Sets the color property to var(--graupl-theme-active--secondary--900).
.text-tertiary-100
Sets the color property to var(--graupl-theme-active--tertiary--100).
.text-tertiary-200
Sets the color property to var(--graupl-theme-active--tertiary--200).
.text-tertiary-300
Sets the color property to var(--graupl-theme-active--tertiary--300).
.text-tertiary-400
Sets the color property to var(--graupl-theme-active--tertiary--400).
.text-tertiary-500
Sets the color property to var(--graupl-theme-active--tertiary--500).
.text-tertiary-600
Sets the color property to var(--graupl-theme-active--tertiary--600).
.text-tertiary-700
Sets the color property to var(--graupl-theme-active--tertiary--700).
.text-tertiary-800
Sets the color property to var(--graupl-theme-active--tertiary--800).
.text-tertiary-900
Sets the color property to var(--graupl-theme-active--tertiary--900).
.text-inherit
Sets the color property to inherit.
.text-current
Sets the color property to currentColor.
.text-transparent
Sets the color property to transparent.
Customization
To customize the color utilities, you can use the following variables.
| Variable | Default Value | Description |
|---|---|---|
$selector-base | "." | The base selector for the utility classes. |
$use-important | true | A flag to determine if the !important flag should be added to the utility classes. |
$generate-base-utilities | true | A flag to determine if the base utility classes should be generated. |
$screen-aware | false | A flag to generate screen-aware utility classes. |
$theme-aware | true | A flag to generate theme-aware utility classes. |
$state-aware | true | A flag to generate state-aware utility classes. |
$container-aware | false | A flag to generate container-aware utility classes. |
$screen-aware-separator | ":" | The separator for screen-aware utility classes. |
$theme-aware-separator | ":" | The separator for theme-aware utility classes. |
$state-aware-separator | ":" | The separator for state-aware utility classes. |
$container-aware-separator | ":" | The separator for container-aware utility classes. |
$screen-aware-selector-prefix | "" | The prefix for the screen-aware utility classes. |
$theme-aware-selector-prefix | "" | The prefix for the theme-aware utility classes. |
$state-aware-selector-prefix | "" | The prefix for the state-aware utility classes. |
$container-aware-selector-prefix | "cq:" | The prefix for the container-aware utility classes. |
$background-selector-prefix | bg- | The prefix for the background utility classes. |
$custom-background-properties | () | [DEPRECATED] The custom properties and values for the background utility classes. |
$text-selector-prefix | text- | The prefix for the text utility classes. |
$custom-text-properties | () | [DEPRECATED] The custom properties and values for text utility classes. |
Responsive variants
To generate responsive color utilities, you can set the $screen-aware, $theme-aware, $state-aware, or $container-aware variables to true.
By default, theme-aware and state-aware utility classes are generated.
✏️ Note
For more information on responsive variants, refer to the Responsive utility classes documentation.