@graupl/graupl 1.0.0-beta.1 → 1.0.0-beta.10

package/docs/utilities/border.md

@@ -0,0 +1,268 @@
+# Border Utilities
+
+The border utilities provide a set of classes to adjust the `border-width`, `border-color`, and `border-style` properties of elements.
+
+## `.bordered`
+
+Applies the default border styling to an element.
+
+```css
+  .bordered {
+    border-width: var(--graupl-border-width);
+    border-radius: var(--graupl-border-radius);
+    border-style: var(--graupl-border-style);
+  }
+```
+
+## Border widths
+
+| Class Name | Property | Value |
+| --- | --- | --- |
+| [`.border-thick`](#border-thick) | `border-width` | `thick` |
+| [`.border-thin`](#border-thin) | `border-width` | `thin` |
+| [`.border-medium`](#border-medium) | `border-width` | `medium` |
+
+### `.border-thick`
+
+Sets the `border-width` property to `thick`.
+
+### `.border-thin`
+
+Sets the `border-width` property to `thin`.
+
+### `.border-medium`
+
+Sets the `border-width` property to `medium`.
+
+## Border colors
+
+| Class Name | Property | Value |
+| --- | --- | --- |
+| [`.border-primary-100`](#border-primary-100) | `border-color` | `var(--graupl-theme-active--primary--100)` |
+| [`.border-primary-200`](#border-primary-200) | `border-color` | `var(--graupl-theme-active--primary--200)` |
+| [`.border-primary-300`](#border-primary-300) | `border-color` | `var(--graupl-theme-active--primary--300)` |
+| [`.border-primary-400`](#border-primary-400) | `border-color` | `var(--graupl-theme-active--primary--400)` |
+| [`.border-primary-500`](#border-primary-500) | `border-color` | `var(--graupl-theme-active--primary--500)` |
+| [`.border-primary-600`](#border-primary-600) | `border-color` | `var(--graupl-theme-active--primary--600)` |
+| [`.border-primary-700`](#border-primary-700) | `border-color` | `var(--graupl-theme-active--primary--700)` |
+| [`.border-primary-800`](#border-primary-800) | `border-color` | `var(--graupl-theme-active--primary--800)` |
+| [`.border-primary-900`](#border-primary-900) | `border-color` | `var(--graupl-theme-active--primary--900)` |
+| [`.border-secondary-100`](#border-secondary-100) | `border-color` | `var(--graupl-theme-active--secondary--100)` |
+| [`.border-secondary-200`](#border-secondary-200) | `border-color` | `var(--graupl-theme-active--secondary--200)` |
+| [`.border-secondary-300`](#border-secondary-300) | `border-color` | `var(--graupl-theme-active--secondary--300)` |
+| [`.border-secondary-400`](#border-secondary-400) | `border-color` | `var(--graupl-theme-active--secondary--400)` |
+| [`.border-secondary-500`](#border-secondary-500) | `border-color` | `var(--graupl-theme-active--secondary--500)` |
+| [`.border-secondary-600`](#border-secondary-600) | `border-color` | `var(--graupl-theme-active--secondary--600)` |
+| [`.border-secondary-700`](#border-secondary-700) | `border-color` | `var(--graupl-theme-active--secondary--700)` |
+| [`.border-secondary-800`](#border-secondary-800) | `border-color` | `var(--graupl-theme-active--secondary--800)` |
+| [`.border-secondary-900`](#border-secondary-900) | `border-color` | `var(--graupl-theme-active--secondary--900)` |
+| [`.border-tertiary-100`](#border-tertiary-100) | `border-color` | `var(--graupl-theme-active--tertiary--100)` |
+| [`.border-tertiary-200`](#border-tertiary-200) | `border-color` | `var(--graupl-theme-active--tertiary--200)` |
+| [`.border-tertiary-300`](#border-tertiary-300) | `border-color` | `var(--graupl-theme-active--tertiary--300)` |
+| [`.border-tertiary-400`](#border-tertiary-400) | `border-color` | `var(--graupl-theme-active--tertiary--400)` |
+| [`.border-tertiary-500`](#border-tertiary-500) | `border-color` | `var(--graupl-theme-active--tertiary--500)` |
+| [`.border-tertiary-600`](#border-tertiary-600) | `border-color` | `var(--graupl-theme-active--tertiary--600)` |
+| [`.border-tertiary-700`](#border-tertiary-700) | `border-color` | `var(--graupl-theme-active--tertiary--700)` |
+| [`.border-tertiary-800`](#border-tertiary-800) | `border-color` | `var(--graupl-theme-active--tertiary--800)` |
+| [`.border-tertiary-900`](#border-tertiary-900) | `border-color` | `var(--graupl-theme-active--tertiary--900)` |
+| [`.border-transparent`](#border-transparent) | `border-color` | `transparent` |
+
+### `.border-primary-100`
+
+Sets the `border-color` property to `var(--graupl-theme-active--primary--100)`.
+
+### `.border-primary-200`
+
+Sets the `border-color` property to `var(--graupl-theme-active--primary--200)`.
+
+### `.border-primary-300`
+
+Sets the `border-color` property to `var(--graupl-theme-active--primary--300)`.
+
+### `.border-primary-400`
+
+Sets the `border-color` property to `var(--graupl-theme-active--primary--400)`.
+
+### `.border-primary-500`
+
+Sets the `border-color` property to `var(--graupl-theme-active--primary--500)`.
+
+### `.border-primary-600`
+
+Sets the `border-color` property to `var(--graupl-theme-active--primary--600)`.
+
+### `.border-primary-700`
+
+Sets the `border-color` property to `var(--graupl-theme-active--primary--700)`.
+
+### `.border-primary-800`
+
+Sets the `border-color` property to `var(--graupl-theme-active--primary--800)`.
+
+### `.border-primary-900`
+
+Sets the `border-color` property to `var(--graupl-theme-active--primary--900)`.
+
+### `.border-secondary-100`
+
+Sets the `border-color` property to `var(--graupl-theme-active--secondary--100)`.
+
+### `.border-secondary-200`
+
+Sets the `border-color` property to `var(--graupl-theme-active--secondary--200)`.
+
+### `.border-secondary-300`
+
+Sets the `border-color` property to `var(--graupl-theme-active--secondary--300)`.
+
+### `.border-secondary-400`
+
+Sets the `border-color` property to `var(--graupl-theme-active--secondary--400)`.
+
+### `.border-secondary-500`
+
+Sets the `border-color` property to `var(--graupl-theme-active--secondary--500)`.
+
+### `.border-secondary-600`
+
+Sets the `border-color` property to `var(--graupl-theme-active--secondary--600)`.
+
+### `.border-secondary-700`
+
+Sets the `border-color` property to `var(--graupl-theme-active--secondary--700)`.
+
+### `.border-secondary-800`
+
+Sets the `border-color` property to `var(--graupl-theme-active--secondary--800)`.
+
+### `.border-secondary-900`
+
+Sets the `border-color` property to `var(--graupl-theme-active--secondary--900)`.
+
+### `.border-tertiary-100`
+
+Sets the `border-color` property to `var(--graupl-theme-active--tertiary--100)`.
+
+### `.border-tertiary-200`
+
+Sets the `border-color` property to `var(--graupl-theme-active--tertiary--200)`.
+
+### `.border-tertiary-300`
+
+Sets the `border-color` property to `var(--graupl-theme-active--tertiary--300)`.
+
+### `.border-tertiary-400`
+
+Sets the `border-color` property to `var(--graupl-theme-active--tertiary--400)`.
+
+### `.border-tertiary-500`
+
+Sets the `border-color` property to `var(--graupl-theme-active--tertiary--500)`.
+
+### `.border-tertiary-600`
+
+Sets the `border-color` property to `var(--graupl-theme-active--tertiary--600)`.
+
+### `.border-tertiary-700`
+
+Sets the `border-color` property to `var(--graupl-theme-active--tertiary--700)`.
+
+### `.border-tertiary-800`
+
+Sets the `border-color` property to `var(--graupl-theme-active--tertiary--800)`.
+
+### `.border-tertiary-900`
+
+Sets the `border-color` property to `var(--graupl-theme-active--tertiary--900)`.
+
+### `.border-transparent`
+
+Sets the `border-color` property to `transparent`.
+
+## Border styles
+
+| Class Name | Property | Value |
+| --- | --- | --- |
+| [`.border-solid`](#border-solid) | `border-style` | `solid` |
+| [`.border-dashed`](#border-dashed) | `border-style` | `dashed` |
+| [`.border-dotted`](#border-dotted) | `border-style` | `dotted` |
+| [`.border-double`](#border-double) | `border-style` | `double` |
+| [`.border-groove`](#border-groove) | `border-style` | `groove` |
+| [`.border-ridge`](#border-ridge) | `border-style` | `ridge` |
+| [`.border-inset`](#border-inset) | `border-style` | `inset` |
+| [`.border-outset`](#border-outset) | `border-style` | `outset` |
+| [`.border-none`](#border-none) | `border-style` | `none` |
+
+### `.border-solid`
+
+Sets the `border-style` property to `solid`.
+
+### `.border-dashed`
+
+Sets the `border-style` property to `dashed`.
+
+### `.border-dotted`
+
+Sets the `border-style` property to `dotted`.
+
+### `.border-double`
+
+Sets the `border-style` property to `double`.
+
+### `.border-groove`
+
+Sets the `border-style` property to `groove`.
+
+### `.border-ridge`
+
+Sets the `border-style` property to `ridge`.
+
+### `.border-inset`
+
+Sets the `border-style` property to `inset`.
+
+### `.border-outset`
+
+Sets the `border-style` property to `outset`.
+
+### `.border-none`
+
+Sets the `border-style` property to `none`.
+
+## Customization
+
+To customize the border 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` | `false` | A flag to generate theme-aware utility classes. |
+| `$state-aware` | `false` | 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. |
+| `$default-border-selector` | `"bordered"` | The selector for the default border utility class. |
+| `$border-width-selector-prefix` | `"border-"` | The prefix for the border width utility classes. |
+| `$custom-border-width-properties` | `()` | The custom properties and values for the border width utility classes. |
+| `$border-color-selector-prefix` | `"border-"` | The prefix for the border color utility classes. |
+| `$custom-border-color-properties` | `()` | The custom properties and values for the border color utility classes. |
+| `$border-style-selector-prefix` | `"border-"` | The prefix for the border style utility classes. |
+| `$custom-border-style-properties` | `()` | The custom properties and values for the border style utility classes. |
+
+## Responsive variants
+
+To generate responsive border utilities, you can set the `$screen-aware`, `$theme-aware`, `$state-aware`, or `$container-aware` variables to `true`.
+
+By default, no responsive alignment utilities are generated.
+
+::: tip :pencil2: Note
+For more information on responsive variants, refer to the [Responsive utility classes](./responsive-classes) documentation.
+:::

package/docs/utilities/color.md

@@ -0,0 +1,348 @@
+# 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`](#bg-primary-100) | `background` | `var(--graupl-theme-active--primary--100)` |
+| [`.bg-primary-200`](#bg-primary-200) | `background` | `var(--graupl-theme-active--primary--200)` |
+| [`.bg-primary-300`](#bg-primary-300) | `background` | `var(--graupl-theme-active--primary--300)` |
+| [`.bg-primary-400`](#bg-primary-400) | `background` | `var(--graupl-theme-active--primary--400)` |
+| [`.bg-primary-500`](#bg-primary-500) | `background` | `var(--graupl-theme-active--primary--500)` |
+| [`.bg-primary-600`](#bg-primary-600) | `background` | `var(--graupl-theme-active--primary--600)` |
+| [`.bg-primary-700`](#bg-primary-700) | `background` | `var(--graupl-theme-active--primary--700)` |
+| [`.bg-primary-800`](#bg-primary-800) | `background` | `var(--graupl-theme-active--primary--800)` |
+| [`.bg-primary-900`](#bg-primary-900) | `background` | `var(--graupl-theme-active--primary--900)` |
+| [`.bg-secondary-100`](#bg-secondary-100) | `background` | `var(--graupl-theme-active--secondary--100)` |
+| [`.bg-secondary-200`](#bg-secondary-200) | `background` | `var(--graupl-theme-active--secondary--200)` |
+| [`.bg-secondary-300`](#bg-secondary-300) | `background` | `var(--graupl-theme-active--secondary--300)` |
+| [`.bg-secondary-400`](#bg-secondary-400) | `background` | `var(--graupl-theme-active--secondary--400)` |
+| [`.bg-secondary-500`](#bg-secondary-500) | `background` | `var(--graupl-theme-active--secondary--500)` |
+| [`.bg-secondary-600`](#bg-secondary-600) | `background` | `var(--graupl-theme-active--secondary--600)` |
+| [`.bg-secondary-700`](#bg-secondary-700) | `background` | `var(--graupl-theme-active--secondary--700)` |
+| [`.bg-secondary-800`](#bg-secondary-800) | `background` | `var(--graupl-theme-active--secondary--800)` |
+| [`.bg-secondary-900`](#bg-secondary-900) | `background` | `var(--graupl-theme-active--secondary--900)` |
+| [`.bg-tertiary-100`](#bg-tertiary-100) | `background` | `var(--graupl-theme-active--tertiary--100)` |
+| [`.bg-tertiary-200`](#bg-tertiary-200) | `background` | `var(--graupl-theme-active--tertiary--200)` |
+| [`.bg-tertiary-300`](#bg-tertiary-300) | `background` | `var(--graupl-theme-active--tertiary--300)` |
+| [`.bg-tertiary-400`](#bg-tertiary-400) | `background` | `var(--graupl-theme-active--tertiary--400)` |
+| [`.bg-tertiary-500`](#bg-tertiary-500) | `background` | `var(--graupl-theme-active--tertiary--500)` |
+| [`.bg-tertiary-600`](#bg-tertiary-600) | `background` | `var(--graupl-theme-active--tertiary--600)` |
+| [`.bg-tertiary-700`](#bg-tertiary-700) | `background` | `var(--graupl-theme-active--tertiary--700)` |
+| [`.bg-tertiary-800`](#bg-tertiary-800) | `background` | `var(--graupl-theme-active--tertiary--800)` |
+| [`.bg-tertiary-900`](#bg-tertiary-900) | `background` | `var(--graupl-theme-active--tertiary--900)` |
+| [`.bg-inherit`](#bg-inherit) | `background` | `inherit` |
+| [`.bg-current`](#bg-current) | `background` | `currentColor` |
+| [`.bg-transparent`](#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`](#text-primary-100) | `color` | `var(--graupl-theme-active--primary--100)` |
+| [`.text-primary-200`](#text-primary-200) | `color` | `var(--graupl-theme-active--primary--200)` |
+| [`.text-primary-300`](#text-primary-300) | `color` | `var(--graupl-theme-active--primary--300)` |
+| [`.text-primary-400`](#text-primary-400) | `color` | `var(--graupl-theme-active--primary--400)` |
+| [`.text-primary-500`](#text-primary-500) | `color` | `var(--graupl-theme-active--primary--500)` |
+| [`.text-primary-600`](#text-primary-600) | `color` | `var(--graupl-theme-active--primary--600)` |
+| [`.text-primary-700`](#text-primary-700) | `color` | `var(--graupl-theme-active--primary--700)` |
+| [`.text-primary-800`](#text-primary-800) | `color` | `var(--graupl-theme-active--primary--800)` |
+| [`.text-primary-900`](#text-primary-900) | `color` | `var(--graupl-theme-active--primary--900)` |
+| [`.text-secondary-100`](#text-secondary-100) | `color` | `var(--graupl-theme-active--secondary--100)` |
+| [`.text-secondary-200`](#text-secondary-200) | `color` | `var(--graupl-theme-active--secondary--200)` |
+| [`.text-secondary-300`](#text-secondary-300) | `color` | `var(--graupl-theme-active--secondary--300)` |
+| [`.text-secondary-400`](#text-secondary-400) | `color` | `var(--graupl-theme-active--secondary--400)` |
+| [`.text-secondary-500`](#text-secondary-500) | `color` | `var(--graupl-theme-active--secondary--500)` |
+| [`.text-secondary-600`](#text-secondary-600) | `color` | `var(--graupl-theme-active--secondary--600)` |
+| [`.text-secondary-700`](#text-secondary-700) | `color` | `var(--graupl-theme-active--secondary--700)` |
+| [`.text-secondary-800`](#text-secondary-800) | `color` | `var(--graupl-theme-active--secondary--800)` |
+| [`.text-secondary-900`](#text-secondary-900) | `color` | `var(--graupl-theme-active--secondary--900)` |
+| [`.text-tertiary-100`](#text-tertiary-100) | `color` | `var(--graupl-theme-active--tertiary--100)` |
+| [`.text-tertiary-200`](#text-tertiary-200) | `color` | `var(--graupl-theme-active--tertiary--200)` |
+| [`.text-tertiary-300`](#text-tertiary-300) | `color` | `var(--graupl-theme-active--tertiary--300)` |
+| [`.text-tertiary-400`](#text-tertiary-400) | `color` | `var(--graupl-theme-active--tertiary--400)` |
+| [`.text-tertiary-500`](#text-tertiary-500) | `color` | `var(--graupl-theme-active--tertiary--500)` |
+| [`.text-tertiary-600`](#text-tertiary-600) | `color` | `var(--graupl-theme-active--tertiary--600)` |
+| [`.text-tertiary-700`](#text-tertiary-700) | `color` | `var(--graupl-theme-active--tertiary--700)` |
+| [`.text-tertiary-800`](#text-tertiary-800) | `color` | `var(--graupl-theme-active--tertiary--800)` |
+| [`.text-tertiary-900`](#text-tertiary-900) | `color` | `var(--graupl-theme-active--tertiary--900)` |
+| [`.text-inherit`](#text-inherit) | `color` | `inherit` |
+| [`.text-current`](#text-current) | `color` | `currentColor` |
+| [`.text-transparent`](#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. |
+| `$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` | `()` | 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 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.
+
+::: tip :pencil2: Note
+For more information on responsive variants, refer to the [Responsive utility classes](./responsive-classes) documentation.
+:::

package/docs/utilities/container.md

@@ -0,0 +1,3 @@
+# Container Utilities
+
+This page needs to be written!

package/docs/utilities/display.md

@@ -0,0 +1,3 @@
+# Display Utilities
+
+This page needs to be written!

package/docs/utilities/flex.md

@@ -0,0 +1,3 @@
+# Flex Utilities
+
+This page needs to be written!

package/docs/utilities/gradient.md

@@ -0,0 +1,3 @@
+# Gradient Utilities
+
+This page needs to be written!

package/docs/utilities/height.md

@@ -0,0 +1,3 @@
+# Height Utilities
+
+This page needs to be written!

package/docs/utilities/inset.md

@@ -0,0 +1,3 @@
+# Inset Utilities
+
+This page needs to be written!

package/docs/utilities/justification.md

@@ -0,0 +1,3 @@
+# Justification Utilities
+
+This page needs to be written!

package/docs/utilities/list.md

@@ -0,0 +1,3 @@
+# List Utilities
+
+This page needs to be written!

package/docs/utilities/order.md

@@ -0,0 +1,3 @@
+# Order Utilities
+
+This page needs to be written!

package/docs/utilities/position.md

@@ -0,0 +1,3 @@
+# Position Utilities
+
+This page needs to be written!

package/docs/utilities/ratio.md

@@ -0,0 +1,3 @@
+# Ratio Utilities
+
+This page needs to be written!

package/docs/utilities/responsive-classes.md

@@ -0,0 +1,3 @@
+# Responsive Utility Classes
+
+This page needs to be written!

package/docs/utilities/spacing.md

@@ -0,0 +1,3 @@
+# Spacing Utilities
+
+This page needs to be written!

package/docs/utilities/typography.md

@@ -0,0 +1,3 @@
+# Typography Utilities
+
+This page needs to be written!