@graupl/graupl 1.0.0-beta.5 → 1.0.0-beta.6

package/docs/compiling-graupl.md

@@ -11,12 +11,13 @@ If you want to compile your own version of Graupl, you can! Here's how:
 
 ## Overriding Graupl's default variables
 
-Graupl's sass variables are all declared with `!default` flag. This means you can override them in your own theme file.
+Graupl's has sass variables declared with `!default` flag. This means you can override them in your own theme file.
 
 ```scss
 // Import the file containing the variables you want to override.
-@forward '@graupl/graupl/defaults' with (
-  $prefix: 'custom',
+// In this case, we want to make sure that, instead of all of our custom properties starting with `--graupl-` they start with `--custom-`.
+@use '@graupl/graupl/src/scss/defaults' as graupl-defaults with (
+  $id: 'custom',
 );
 
 // Import Graupl.
@@ -31,7 +32,7 @@ You can add new colours to Graupl by adding to the `$custom-colours` map.
 
 ```scss
 // Import the theme's defaults.
-@forward "@graupl/graupl/theme/defaults" with (
+@use "@graupl/graupl/src/scss/theme/defaults" as graupl-color-defaults with (
   $custom-colors: (
     custom: (
       100: #f0f0f0,
@@ -53,4 +54,4 @@ You can add new colours to Graupl by adding to the `$custom-colours` map.
 // Import your own theme...
 ```
 
-These colours will have new classes generated for them, e.g. `background-custom-100`, `color-custom-100`, etc. as well as component variants, e.g. `button custom`, and full dark-mode support.
+These colours will have new classes generated for them, e.g. `.bg-custom-100`, `.text-custom-100`, etc. as well as component variants, e.g. `button custom`, and full dark-mode support.

package/docs/utilities/alignment.md

@@ -0,0 +1,405 @@
+# Alignment Utilities
+
+The alignment utilities provide a set of classes to adjust the `align-content`, `align-items`, and `align-self` properties of elements.
+
+## Align content
+
+| Class Name | Property | Value |
+| --- | --- | --- |
+| [`.align-content-normal`](#align-content-normal) | align-content | normal |
+| [`.align-content-start`](#align-content-start) | align-content | flex-start |
+| [`.align-content-end`](#align-content-end) | align-content | flex-end |
+| [`.align-content-center`](#align-content-center) | align-content | center |
+| [`.align-content-between`](#align-content-between) | align-content | space-between |
+| [`.align-content-around`](#align-content-around) | align-content | space-around |
+| [`.align-content-evenly`](#align-content-evenly) | align-content | space-evenly |
+| [`.align-content-baseline`](#align-content-baseline) | align-content | baseline |
+| [`.align-content-stretch`](#align-content-stretch) | align-content | stretch |
+
+### `.align-content-normal`
+
+Sets the `align-content` property to `normal`.
+
+<div class="w-full display-grid g-4 bg-primary-100 bordered border-primary-700 align-content-normal p-5 h-10" style="grid-template-columns: repeat(3, min-content); grid-template-rows: min-content;">
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+</div>
+
+```html
+<div class="display-grid align-content-normal">
+  <!-- Content here -->
+</div>
+```
+
+### `.align-content-start`
+
+Sets the `align-content` property to `flex-start`.
+
+<div class="w-full display-grid g-4 bg-primary-100 bordered border-primary-700 align-content-start p-5 h-10" style="grid-template-columns: repeat(3, min-content); grid-template-rows: min-content;">
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+</div>
+
+```html
+<div class="display-grid align-content-start">
+  <!-- Content here -->
+</div>
+```
+
+### `.align-content-end`
+
+Sets the `align-content` property to `flex-end`.
+
+<div class="w-full display-grid g-4 bg-primary-100 bordered border-primary-700 align-content-end p-5 h-10" style="grid-template-columns: repeat(3, min-content); grid-template-rows: min-content;">
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+</div>
+
+```html
+<div class="display-grid align-content-end">
+  <!-- Content here -->
+</div>
+```
+
+### `.align-content-center`
+
+Sets the `align-content` property to `center`.
+
+<div class="w-full display-grid g-4 bg-primary-100 bordered border-primary-700 align-content-center p-5 h-10" style="grid-template-columns: repeat(3, min-content); grid-template-rows: min-content;">
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+</div>
+
+```html
+<div class="display-grid align-content-center">
+  <!-- Content here -->
+</div>
+```
+
+### `.align-content-between`
+
+Sets the `align-content` property to `space-between`.
+
+<div class="w-full display-grid g-4 bg-primary-100 bordered border-primary-700 align-content-between p-5 h-10" style="grid-template-columns: repeat(3, min-content); grid-template-rows: min-content;">
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+</div>
+
+```html
+<div class="display-grid align-content-between">
+  <!-- Content here -->
+</div>
+```
+
+### `.align-content-around`
+
+Sets the `align-content` property to `space-around`.
+
+<div class="w-full display-grid g-4 bg-primary-100 bordered border-primary-700 align-content-around p-5 h-10" style="grid-template-columns: repeat(3, min-content); grid-template-rows: min-content;">
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+</div>
+
+```html
+<div class="display-grid align-content-around">
+  <!-- Content here -->
+</div>
+```
+
+### `.align-content-evenly`
+
+Sets the `align-content` property to `space-evenly`.
+
+<div class="w-full display-grid g-4 bg-primary-100 bordered border-primary-700 align-content-evenly p-5 h-10" style="grid-template-columns: repeat(3, min-content); grid-template-rows: min-content;">
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+</div>
+
+```html
+<div class="display-grid align-content-evenly">
+  <!-- Content here -->
+</div>
+```
+
+### `.align-content-baseline`
+
+Sets the `align-content` property to `baseline`.
+
+<div class="w-full display-grid g-4 bg-primary-100 bordered border-primary-700 align-content-baseline p-5 h-10" style="grid-template-columns: repeat(3, min-content); grid-template-rows: min-content;">
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+</div>
+
+```html
+<div class="display-grid align-content-baseline">
+  <!-- Content here -->
+</div>
+```
+
+### `.align-content-stretch`
+
+Sets the `align-content` property to `stretch`.
+
+<div class="w-full display-grid g-4 bg-primary-100 bordered border-primary-700 align-content-stretch p-5 h-10" style="grid-template-columns: repeat(3, min-content); grid-template-rows: min-content;">
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+</div>
+
+```html
+<div class="display-grid align-content-start">
+  <!-- Content here -->
+</div>
+```
+
+## Align items
+
+| Class Name | Property | Value |
+| --- | --- | --- |
+| `.align-items-start` | align-items | start |
+| `.align-items-end` | align-items | end |
+| `.align-items-center` | align-items | center |
+| `.align-items-baseline` | align-items | baseline |
+| `.align-items-stretch` | align-items | stretch |
+
+### `.align-items-start`
+
+Sets the `align-items` property to `start`.
+
+<div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 align-items-start p-5 h-10">
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+</div>
+
+```html
+<div class="display-flex align-items-start">
+  <!-- Content here -->
+</div>
+```
+
+### `.align-items-end`
+
+Sets the `align-items` property to `end`.
+
+<div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 align-items-end p-5 h-10">
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+</div>
+
+```html
+<div class="display-flex align-items-end">
+  <!-- Content here -->
+</div>
+```
+
+### `.align-items-center`
+
+Sets the `align-items` property to `center`.
+
+<div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 align-items-center p-5 h-10">
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+</div>
+
+```html
+<div class="display-flex align-items-center">
+  <!-- Content here -->
+</div>
+```
+
+### `.align-items-baseline`
+
+Sets the `align-items` property to `baseline`.
+
+<div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 align-items-baseline p-5 h-10">
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+</div>
+
+```html
+<div class="display-flex align-items-baseline">
+  <!-- Content here -->
+</div>
+```
+
+### `.align-items-stretch`
+
+Sets the `align-items` property to `stretch`.
+
+<div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 align-items-stretch p-5 h-10">
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4">Item</div>
+</div>
+
+```html
+<div class="display-flex align-items-stretch">
+  <!-- Content here -->
+</div>
+```
+
+## Align self
+
+| Class Name | Property | Value |
+| --- | --- | --- |
+| `.align-self-auto` | align-self | auto |
+| `.align-self-start` | align-self | start |
+| `.align-self-end` | align-self | end |
+| `.align-self-center` | align-self | center |
+| `.align-self-baseline` | align-self | baseline |
+| `.align-self-stretch` | align-self | stretch |
+
+### `.align-self-auto`
+
+Sets the `align-self` property to `auto`.
+
+<div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 p-5 h-10">
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4 align-self-auto">Item</div>
+</div>
+
+```html
+<div class="display-flex">
+  <div class="align-self-auto">
+    <!-- Content here -->
+  </div>
+</div>
+```
+
+### `.align-self-start`
+
+Sets the `align-self` property to `start`.
+
+<div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 p-5 h-10">
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4 align-self-start">Item</div>
+</div>
+
+```html
+<div class="display-flex">
+  <div class="align-self-start">
+    <!-- Content here -->
+  </div>
+</div>
+```
+
+### `.align-self-end`
+
+Sets the `align-self` property to `end`.
+
+<div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 p-5 h-10">
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4 align-self-end">Item</div>
+</div>
+
+```html
+<div class="display-flex">
+  <div class="align-self-end">
+    <!-- Content here -->
+  </div>
+</div>
+```
+
+### `.align-self-end`
+
+Sets the `align-self` property to `end`.
+
+<div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 p-5 h-10">
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4 align-self-end">Item</div>
+</div>
+
+```html
+<div class="display-flex">
+  <div class="align-self-end">
+    <!-- Content here -->
+  </div>
+</div>
+```
+
+### `.align-self-center`
+
+Sets the `align-self` property to `center`.
+
+<div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 p-5 h-10">
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4 align-self-center">Item</div>
+</div>
+
+```html
+<div class="display-flex">
+  <div class="align-self-center">
+    <!-- Content here -->
+  </div>
+</div>
+```
+
+### `.align-self-baseline`
+
+Sets the `align-self` property to `baseline`.
+
+<div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 p-5 h-10">
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4 align-self-baseline">Item</div>
+</div>
+
+```html
+<div class="display-flex">
+  <div class="align-self-baseline">
+    <!-- Content here -->
+  </div>
+</div>
+```
+
+### `.align-self-stretch`
+
+Sets the `align-self` property to `stretch`.
+
+<div class="w-full display-flex g-4 bg-primary-100 bordered border-primary-700 p-5 h-10">
+  <div class="bg-primary-200 bordered border-tertiary-700 p-4 align-self-stretch">Item</div>
+</div>
+
+```html
+<div class="display-flex">
+  <div class="align-self-stretch">
+    <!-- Content here -->
+  </div>
+</div>
+```
+
+## Customization
+
+To customize the alignment 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. |
+| `$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. |
+| `$align-content-selector-prefix` | `"align-content-"` | The prefix for the align content utility classes. |
+| `$custom-align-content-properties` | `()` | The custom properties and values for the align content utility classes. |
+| `$align-items-selector-prefix` | `"align-items-"` | The prefix for the `.align-items-utility` utility classes. |
+| `$custom-align-items-properties` | `()` | The custom properties and values for the `.align-items-utility` utility classes. |
+| `$align-self-selector-prefix` | `"align-self-"` | The prefix for the `.align-self-utility` utility classes. |
+| `$custom-align-self-properties` | `()` | The custom properties and values for the `.align-self-utility` 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, 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/background.md

@@ -0,0 +1,186 @@
+# 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. |
+| `$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-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 alignment utilities, you can set the `$screen-aware`, `$theme-aware`, or `$state-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.
+:::