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

package/docs/theme.md

@@ -65,19 +65,19 @@ Variables
 
 ```sass
 // A custom variable is defined for each color and shade.
---#{root-defaults.$prefix}-#{$color}--#{$shade}
+--#{root-defaults.$prefix}#{$color}--#{$shade}
 
 // There are three modes for the theme.
 // Active is what is currently being used.
---#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade}
+--#{root-defaults.$prefix}theme-active--#{$color}--#{$shade}
 // Theme dark is the color used when dark mode is active.
---#{root-defaults.$prefix}-theme-dark--#{$color}--#{$shade}
+--#{root-defaults.$prefix}theme-dark--#{$color}--#{$shade}
 // Light theme is the color active whne light mode is active
---#{root-defaults.$prefix}-theme-light--#{$color}--#{$shade}
+--#{root-defaults.$prefix}theme-light--#{$color}--#{$shade}
 
 // Globaly defined root color and root background.
---#{root-defaults.$prefix}-root-color
---#{root-defaults.$prefix}-root-background
+--#{root-defaults.$prefix}root-color
+--#{root-defaults.$prefix}root-background
 ```
 
 ## Typography
@@ -136,123 +136,123 @@ Variables
 The font properties:
 
 ```scss
---#{root-defaults.$prefix}-font-size-base
---#{root-defaults.$prefix}-line-height
+--#{root-defaults.$prefix}font-size-base
+--#{root-defaults.$prefix}line-height
 
 ```
 
 The font size properties:
 
 ```scss
---#{root-defaults.$prefix}-font-#{$key}
+--#{root-defaults.$prefix}font-#{$key}
 
 ```
 
 The font weight properties:
 
 ```scss
---#{root-defaults.$prefix}-font-weight-#{$key}
---#{root-defaults.$prefix}-font-weight-bold
+--#{root-defaults.$prefix}font-weight-#{$key}
+--#{root-defaults.$prefix}font-weight-bold
 
 ```
 
 The root properties:
 
 ```scss
---#{root-defaults.$prefix}-root-font-family
---#{root-defaults.$prefix}-root-font-size
+--#{root-defaults.$prefix}root-font-family
+--#{root-defaults.$prefix}root-font-size
 
 ```
 
 The typography properties:
 
 ```scss
---#{root-defaults.$prefix}-body-font-size
---#{root-defaults.$prefix}-body-line-height
---#{root-defaults.$prefix}-body-font-weight
---#{root-defaults.$prefix}-paragraph-font-size
---#{root-defaults.$prefix}-paragraph-line-height
---#{root-defaults.$prefix}-paragraph-margin
---#{root-defaults.$prefix}-paragraph-font-weight
---#{root-defaults.$prefix}-small-font-size
---#{root-defaults.$prefix}-small-line-height
---#{root-defaults.$prefix}-small-margin
---#{root-defaults.$prefix}-small-font-weight
+--#{root-defaults.$prefix}body-font-size
+--#{root-defaults.$prefix}body-line-height
+--#{root-defaults.$prefix}body-font-weight
+--#{root-defaults.$prefix}paragraph-font-size
+--#{root-defaults.$prefix}paragraph-line-height
+--#{root-defaults.$prefix}paragraph-margin
+--#{root-defaults.$prefix}paragraph-font-weight
+--#{root-defaults.$prefix}small-font-size
+--#{root-defaults.$prefix}small-line-height
+--#{root-defaults.$prefix}small-margin
+--#{root-defaults.$prefix}small-font-weight
 
 ```
 
 The heading properties:
 
 ```scss
---#{root-defaults.$prefix}-heading-font-family
---#{root-defaults.$prefix}-heading-line-height
---#{root-defaults.$prefix}-heading-margin
---#{root-defaults.$prefix}-heading-font-weight
+--#{root-defaults.$prefix}heading-font-family
+--#{root-defaults.$prefix}heading-line-height
+--#{root-defaults.$prefix}heading-margin
+--#{root-defaults.$prefix}heading-font-weight
 
 ```
 
 The H1 properties:
 
 ```scss
---#{root-defaults.$prefix}-h1-font-size
---#{root-defaults.$prefix}-h1-line-height
---#{root-defaults.$prefix}-h1-margin
---#{root-defaults.$prefix}-h1-font-family
---#{root-defaults.$prefix}-h1-font-weight
+--#{root-defaults.$prefix}h1-font-size
+--#{root-defaults.$prefix}h1-line-height
+--#{root-defaults.$prefix}h1-margin
+--#{root-defaults.$prefix}h1-font-family
+--#{root-defaults.$prefix}h1-font-weight
 
 ```
 
 The H2 properties:
 
 ```scss
---#{root-defaults.$prefix}-h2-font-size
---#{root-defaults.$prefix}-h2-line-height
---#{root-defaults.$prefix}-h2-margin
---#{root-defaults.$prefix}-h2-font-family
---#{root-defaults.$prefix}-h2-font-weight
+--#{root-defaults.$prefix}h2-font-size
+--#{root-defaults.$prefix}h2-line-height
+--#{root-defaults.$prefix}h2-margin
+--#{root-defaults.$prefix}h2-font-family
+--#{root-defaults.$prefix}h2-font-weight
 
 ```
 
 The H3 properties:
 
 ```scss
---#{root-defaults.$prefix}-h3-font-size
---#{root-defaults.$prefix}-h3-line-height
---#{root-defaults.$prefix}-h3-margin
---#{root-defaults.$prefix}-h3-font-family
---#{root-defaults.$prefix}-h3-font-weight
+--#{root-defaults.$prefix}h3-font-size
+--#{root-defaults.$prefix}h3-line-height
+--#{root-defaults.$prefix}h3-margin
+--#{root-defaults.$prefix}h3-font-family
+--#{root-defaults.$prefix}h3-font-weight
 
 ```
 
 The H4 properties:
 
 ```scss
---#{root-defaults.$prefix}-h4-font-size
---#{root-defaults.$prefix}-h4-line-height
---#{root-defaults.$prefix}-h4-margin
---#{root-defaults.$prefix}-h4-font-family
---#{root-defaults.$prefix}-h4-font-weight
+--#{root-defaults.$prefix}h4-font-size
+--#{root-defaults.$prefix}h4-line-height
+--#{root-defaults.$prefix}h4-margin
+--#{root-defaults.$prefix}h4-font-family
+--#{root-defaults.$prefix}h4-font-weight
 
 ```
 
 The H5 properties:
 
 ```scss
---#{root-defaults.$prefix}-h5-font-size
---#{root-defaults.$prefix}-h5-line-height
---#{root-defaults.$prefix}-h5-margin
---#{root-defaults.$prefix}-h5-font-family
---#{root-defaults.$prefix}-h5-font-weight
+--#{root-defaults.$prefix}h5-font-size
+--#{root-defaults.$prefix}h5-line-height
+--#{root-defaults.$prefix}h5-margin
+--#{root-defaults.$prefix}h5-font-family
+--#{root-defaults.$prefix}h5-font-weight
 
 ```
 
 The H6 properties:
 
 ```scss
---#{root-defaults.$prefix}-h6-font-size
---#{root-defaults.$prefix}-h6-line-height
---#{root-defaults.$prefix}-h6-margin
---#{root-defaults.$prefix}-h6-font-family
---#{root-defaults.$prefix}-h6-font-weight
+--#{root-defaults.$prefix}h6-font-size
+--#{root-defaults.$prefix}h6-line-height
+--#{root-defaults.$prefix}h6-margin
+--#{root-defaults.$prefix}h6-font-family
+--#{root-defaults.$prefix}h6-font-weight
 
 ```

package/docs/utilities/alignment.md

@@ -0,0 +1,411 @@
+# 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. |
+| `$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. |
+| `$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`, `$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.
+:::