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

package/docs/utilities/background.md

@@ -0,0 +1,192 @@
+# Background Utilities
+
+The background utilities provide a set of classes to adjust the `bg-attachment`, `bg-clip`, `bg-image`, `bg-origin`, `bg-position`, `bg-repeat`, and `bg-size` properties of elements.
+
+::: tip :pencil2: Note
+For `background-color` utility classes, please refer to the [color utilities](./color).
+:::
+
+## Background Attachment
+
+| Class Name | Property | Value |
+| --- | --- | --- |
+| [`.bg-attachment-scroll`](#bg-attachment-scroll) | `background-attachment` | `scroll` |
+| [`.bg-attachment-fixed`](#bg-attachment-fixed) | `background-attachment` | `fixed` |
+| [`.bg-attachment-local`](#bg-attachment-local) | `background-attachment` | `local` |
+
+### `.bg-attachment-scroll`
+
+Sets the `background-attachment` property to `scroll`.
+
+### `.bg-attachment-fixed`
+
+Sets the `background-attachment` property to `fixed`.
+
+### `.bg-attachment-local`
+
+Sets the `background-attachment` property to `local`.
+
+## Background Clip
+
+| Class Name | Property | Value |
+| --- | --- | --- |
+| [`.bg-clip-border-box`](#bg-clip-border-box) | `background-clip` | `border-box` |
+| [`.bg-clip-padding-box`](#bg-clip-padding-box) | `background-clip` | `padding-box` |
+| [`.bg-clip-content-box`](#bg-clip-content-box) | `background-clip` | `content-box` |
+| [`.bg-clip-text`](#bg-clip-text) | `background-clip` | `text` |
+
+### `.bg-clip-border-box`
+
+Sets the `background-clip` property to `border-box`.
+
+### `.bg-clip-padding-box`
+
+Sets the `background-clip` property to `padding-box`.
+
+### `.bg-clip-content-box`
+
+Sets the `background-clip` property to `content-box`.
+
+### `.bg-clip-text`
+
+Sets the `background-clip` property to `text`.
+
+## Background Image
+
+| Class Name | Property | Value |
+| --- | --- | --- |
+| [`.bg-image-none`](#bg-image-none) | `background-image` | `none` |
+
+### `.bg-image-none`
+
+Sets the `background-image` property to `none`.
+
+## Background Position
+
+| Class Name | Property | Value |
+| --- | --- | --- |
+| [`.bg-position-top`](#bg-position-top) | `background-position` | `top` |
+| [`.bg-position-right`](#bg-position-right) | `background-position` | `right` |
+| [`.bg-position-bottom`](#bg-position-bottom) | `background-position` | `bottom` |
+| [`.bg-position-left`](#bg-position-left) | `background-position` | `left` |
+| [`.bg-position-center`](#bg-position-center) | `background-position` | `center` |
+
+### `.bg-position-top`
+
+Sets the `background-position` property to `top`.
+
+### `.bg-position-right`
+
+Sets the `background-position` property to `right`.
+
+### `.bg-position-bottom`
+
+Sets the `background-position` property to `bottom`.
+
+### `.bg-position-left`
+
+Sets the `background-position` property to `left`.
+
+### `.bg-position-center`
+
+Sets the `background-position` property to `center`.
+
+## Background Repeat
+
+| Class Name | Property | Value |
+| --- | --- | --- |
+| [`.bg-repeat-repeat`](#bg-repeat-repeat) | `background-repeat` | `repeat` |
+| [`.bg-repeat-repeat-x`](#bg-repeat-repeat-x) | `background-repeat` | `repeat-x` |
+| [`.bg-repeat-repeat-y`](#bg-repeat-repeat-y) | `background-repeat` | `repeat-y` |
+| [`.bg-repeat-space`](#bg-repeat-space) | `background-repeat` | `space` |
+| [`.bg-repeat-round`](#bg-repeat-round) | `background-repeat` | `round` |
+| [`.bg-repeat-no-repeat`](#bg-repeat-no-repeat) | `background-repeat` | `no-repeat` |
+
+### `.bg-repeat-repeat`
+
+Sets the `background-repeat` property to `repeat`.
+
+### `.bg-repeat-repeat-x`
+
+Sets the `background-repeat` property to `repeat-x`.
+
+### `.bg-repeat-repeat-y`
+
+Sets the `background-repeat` property to `repeat-y`.
+
+### `.bg-repeat-space`
+
+Sets the `background-repeat` property to `space`.
+
+### `.bg-repeat-round`
+
+Sets the `background-repeat` property to `round`.
+
+### `.bg-repeat-no-repeat`
+
+Sets the `background-repeat` property to `no-repeat`.
+
+## Background Size
+
+| Class Name | Property | Value |
+| --- | --- | --- |
+| [`.bg-size-auto`](#bg-size-auto) | `background-size` | `auto` |
+| [`.bg-size-cover`](#bg-size-cover) | `background-size` | `cover` |
+| [`.bg-size-contain`](#bg-size-contain) | `background-size` | `contain` |
+
+### `.bg-size-auto`
+
+Sets the `background-size` property to `auto`.
+
+### `.bg-size-cover`
+
+Sets the `background-size` property to `cover`.
+
+### `.bg-size-contain`
+
+Sets the `background-size` property to `contain`.
+
+## Customization
+
+To customize the background 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. |
+| `$background-attachment-selector-prefix` | `"bg-attachment-"` | The prefix for the background attachment utility classes. |
+| `$custom-background-attachment-properties` | `()` | The custom properties and values for the background attachment utility classes. |
+| `$background-clip-selector-prefix` | `"bg-clip-"` | The prefix for the background clip utility classes. |
+| `$custom-background-clip-properties` | `()` | The custom properties and values for the background clip utility classes. |
+| `$background-image-selector-prefix` | `"bg-image-"` | The prefix for the background image utility classes. |
+| `$custom-background-image-properties` | `()` | The custom properties and values for the background image utility classes. |
+| `$background-origin-selector-prefix` | `"bg-origin-"` | The prefix for the background origin utility classes. |
+| `$custom-background-origin-properties` | `()` | The custom properties and values for the background origin utility classes. |
+| `$background-position-selector-prefix` | `"bg-position-"` | The prefix for the background position utility classes. |
+| `$custom-background-position-properties` | `()` | The custom properties and values for the background position utility classes. |
+| `$background-repeat-selector-prefix` | `"bg-repeat-"` | The prefix for the background repeat utility classes. |
+| `$custom-background-repeat-properties` | `()` | The custom properties and values for the background repeat utility classes. |
+| `$background-size-selector-prefix` | `"bg-size-"` | The prefix for the background size utility classes. |
+| `$custom-background-size-properties` | `()` | The custom properties and values for the background size utility classes. |
+
+## Responsive variants
+
+To generate responsive background 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/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.
+:::