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.
`$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.
`$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.
`$background-selector-prefix`	`bg-`	The prefix for the background utility classes.
`$custom-background-properties`	`()`	The custom properties and values for the background utility classes.
`$text-selector-prefix`	`text-`	The prefix for the text utility classes.
`$custom-text-properties`	`()`	The custom properties and values for text utility classes.

Responsive variants

To generate responsive alignment utilities, you can set the $screen-aware, $theme-aware, or $state-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.

Color Utilities ​

Background Color ​

.bg-primary-100 ​

.bg-primary-200 ​

.bg-primary-300 ​

.bg-primary-400 ​

.bg-primary-500 ​

.bg-primary-600 ​

.bg-primary-700 ​

.bg-primary-800 ​

.bg-primary-900 ​

.bg-secondary-100 ​

.bg-secondary-200 ​

.bg-secondary-300 ​

.bg-secondary-400 ​

.bg-secondary-500 ​

.bg-secondary-600 ​

.bg-secondary-700 ​

.bg-secondary-800 ​

.bg-secondary-900 ​

.bg-tertiary-100 ​

.bg-tertiary-200 ​

.bg-tertiary-300 ​

.bg-tertiary-400 ​

.bg-tertiary-500 ​

.bg-tertiary-600 ​

.bg-tertiary-700 ​

.bg-tertiary-800 ​

.bg-tertiary-900 ​

.bg-inherit ​

.bg-current ​

.bg-transparent ​

Text Color ​

.text-primary-100 ​

.text-primary-200 ​

.text-primary-300 ​

.text-primary-400 ​

.text-primary-500 ​

.text-primary-600 ​

.text-primary-700 ​

.text-primary-800 ​

.text-primary-900 ​

.text-secondary-100 ​

.text-secondary-200 ​

.text-secondary-300 ​

.text-secondary-400 ​

.text-secondary-500 ​

.text-secondary-600 ​

.text-secondary-700 ​

.text-secondary-800 ​

.text-secondary-900 ​

.text-tertiary-100 ​

.text-tertiary-200 ​

.text-tertiary-300 ​

.text-tertiary-400 ​

.text-tertiary-500 ​

.text-tertiary-600 ​

.text-tertiary-700 ​

.text-tertiary-800 ​

.text-tertiary-900 ​

.text-inherit ​

.text-current ​

.text-transparent ​

Customization ​

Responsive variants ​