@graupl/core 1.0.0-beta.51 → 1.0.0-beta.53

package/src/scss/layout/flex-columns/_index.scss

@@ -156,47 +156,47 @@
 // | `--graupl-flex-columns-color`          | The text color of the flex columns component.             | `var(--graupl-color)`      |
 //
 // The following sass variables can be used to customize the generation of the flex columns component:
-// | Variable                                                 | Description                                                      | Default Value    |
-// | -------------------------------------------------------- | ---------------------------------------------------------------- | ---------------- |
-// | `$selector-base`                                         | The base selector for the component.                             | `"."`            |
-// | `$modifier-selector-base`                                | The base selector for component modifiers.                       | `"."`            |
-// | `$generate-base-theme-map`                               | Flag to generate the base theme map.                             | `true`           |
-// | `$themeable`                                             | Flag to generate theme modifiers.                                | `false`          |
-// | `$screen-aware`                                          | Enables screen-aware column variants.                            | `true`           |
-// | `$theme-aware`                                           | Enables theme-aware column variants.                             | `false`          |
-// | `$scheme-aware`                                          | Enables scheme-aware column variants.                            | `false`          |
-// | `$state-aware`                                           | Enables state-aware column variants.                             | `false`          |
-// | `$container-aware`                                       | Enables container-aware column variants.                         | `true`           |
-// | `$flex-columns-selector-base`                            | The base selector for the flex columns component.                | `"."`            |
-// | `$flex-columns-selector`                                 | The selector for the flex columns component.                     | `"flex-columns"` |
-// | `$flex-columns-theme-selector-base`                      | The selector base for flex columns theme modifiers.              | `"."`            |
-// | `$flex-columns-theme-selector-prefix`                    | The flex columns theme modifier selector prefix.                 | `""`             |
-// | `$flex-columns-column-selector-base`                     | The base selector for the column class.                          | `"."`            |
-// | `$flex-columns-column-selector`                          | The selector for the column class.                               | `"col-"`         |
-// | `$flex-columns-fill-selector-base`                       | The base selector for the fill class.                            | `"."`            |
-// | `$flex-columns-fill-selector`                            | The selector for the fill class.                                 | `"fill"`         |
-// | `$flex-columns-column-screen-aware-selector-prefix`      | Prefix to the screen-aware portion of column selectors.          | `""`             |
-// | `$flex-columns-column-screen-aware-selector-suffix`      | Suffix to the screen-aware portion of column selectors.          | `""`             |
-// | `$flex-columns-column-screen-aware-selector-separator`   | Separator inserted for screen-aware column selectors.            | `"\\:"`          |
-// | `$flex-columns-column-theme-aware-selector-prefix`       | Prefix to the theme-aware portion of column selectors.           | `""`             |
-// | `$flex-columns-column-theme-aware-selector-suffix`       | Suffix to the theme-aware portion of column selectors.           | `"-theme"`       |
-// | `$flex-columns-column-theme-aware-selector-separator`    | Separator inserted for theme-aware column selectors.             | `"\\:"`          |
-// | `$flex-columns-column-scheme-aware-selector-prefix`      | Prefix to the scheme-aware portion of column selectors.          | `""`             |
-// | `$flex-columns-column-scheme-aware-selector-suffix`      | Suffix to the scheme-aware portion of column selectors.          | `"-mode"`        |
-// | `$flex-columns-column-scheme-aware-selector-separator`   | Separator inserted for scheme-aware column selectors.            | `"\\:"`          |
-// | `$flex-columns-column-state-aware-selector-prefix`       | Prefix to the state-aware portion of column selectors.           | `""`             |
-// | `$flex-columns-column-state-aware-selector-suffix`       | Suffix to the state-aware portion of column selectors.           | `""`             |
-// | `$flex-columns-column-state-aware-selector-separator`    | Separator inserted for state-aware column selectors.             | `"\\:"`          |
-// | `$flex-columns-column-container-aware-selector-prefix`   | Prefix to the container-aware portion of column selectors.       | `"cq\\:"`        |
-// | `$flex-columns-column-container-aware-selector-suffix`   | Suffix to the container-aware portion of column selectors.       | `""`             |
-// | `$flex-columns-column-container-aware-selector-separator`| Separator inserted for container-aware column selectors.         | `"\\:"`          |
-// | `$flex-columns-min-count`                                | The minimum number of columns used to generate `.col-#` classes. | `1`              |
-// | `$flex-columns-max-count`                                | The maximum number of columns used to generate `.col-#` classes. | `12`             |
-// | `$flex-columns-size`                                     | The default size of a column.                                    | `auto`           |
-// | `$flex-columns-max-width`                                | The default maximum width of a column.                           | `unset`          |
-// | `$flex-columns-container-type`                           | The container type applied to the flex columns component.        | `"inline-size"`  |
-// | `$flex-columns-theme-mappings`                           | Map of properties/shades for flex columns themes.                | `()`             |
-// | `$flex-columns-theme-map`                                | Expanded map of properties/colors/shades.                        | `()`             |
+// | Variable                                                  | Description                                                      | Default Value    |
+// | --------------------------------------------------------- | ---------------------------------------------------------------- | ---------------- |
+// | `$selector-base`                                          | The base selector for the component.                             | `"."`            |
+// | `$modifier-selector-base`                                 | The base selector for component modifiers.                       | `"."`            |
+// | `$generate-base-theme-map`                                | Flag to generate the base theme map.                             | `true`           |
+// | `$themeable`                                              | Flag to generate theme modifiers.                                | `false`          |
+// | `$screen-aware`                                           | Enables screen-aware column variants.                            | `true`           |
+// | `$theme-aware`                                            | Enables theme-aware column variants.                             | `false`          |
+// | `$scheme-aware`                                           | Enables scheme-aware column variants.                            | `false`          |
+// | `$state-aware`                                            | Enables state-aware column variants.                             | `false`          |
+// | `$container-aware`                                        | Enables container-aware column variants.                         | `true`           |
+// | `$flex-columns-selector-base`                             | The base selector for the flex columns component.                | `"."`            |
+// | `$flex-columns-selector`                                  | The selector for the flex columns component.                     | `"flex-columns"` |
+// | `$flex-columns-theme-selector-base`                       | The selector base for flex columns theme modifiers.              | `"."`            |
+// | `$flex-columns-theme-selector-prefix`                     | The flex columns theme modifier selector prefix.                 | `""`             |
+// | `$flex-columns-column-selector-base`                      | The base selector for the column class.                          | `"."`            |
+// | `$flex-columns-column-selector`                           | The selector for the column class.                               | `"col-"`         |
+// | `$flex-columns-fill-selector-base`                        | The base selector for the fill class.                            | `"."`            |
+// | `$flex-columns-fill-selector`                             | The selector for the fill class.                                 | `"fill"`         |
+// | `$flex-columns-column-screen-aware-selector-prefix`       | Prefix to the screen-aware portion of column selectors.          | `""`             |
+// | `$flex-columns-column-screen-aware-selector-suffix`       | Suffix to the screen-aware portion of column selectors.          | `""`             |
+// | `$flex-columns-column-screen-aware-selector-separator`    | Separator inserted for screen-aware column selectors.            | `"\\:"`          |
+// | `$flex-columns-column-theme-aware-selector-prefix`        | Prefix to the theme-aware portion of column selectors.           | `""`             |
+// | `$flex-columns-column-theme-aware-selector-suffix`        | Suffix to the theme-aware portion of column selectors.           | `"-theme"`       |
+// | `$flex-columns-column-theme-aware-selector-separator`     | Separator inserted for theme-aware column selectors.             | `"\\:"`          |
+// | `$flex-columns-column-scheme-aware-selector-prefix`       | Prefix to the scheme-aware portion of column selectors.          | `""`             |
+// | `$flex-columns-column-scheme-aware-selector-suffix`       | Suffix to the scheme-aware portion of column selectors.          | `"-mode"`        |
+// | `$flex-columns-column-scheme-aware-selector-separator`    | Separator inserted for scheme-aware column selectors.            | `"\\:"`          |
+// | `$flex-columns-column-state-aware-selector-prefix`        | Prefix to the state-aware portion of column selectors.           | `""`             |
+// | `$flex-columns-column-state-aware-selector-suffix`        | Suffix to the state-aware portion of column selectors.           | `""`             |
+// | `$flex-columns-column-state-aware-selector-separator`     | Separator inserted for state-aware column selectors.             | `"\\:"`          |
+// | `$flex-columns-column-container-aware-selector-prefix`    | Prefix to the container-aware portion of column selectors.       | `"cq\\:"`        |
+// | `$flex-columns-column-container-aware-selector-suffix`    | Suffix to the container-aware portion of column selectors.       | `""`             |
+// | `$flex-columns-column-container-aware-selector-separator` | Separator inserted for container-aware column selectors.         | `"\\:"`          |
+// | `$flex-columns-min-count`                                 | The minimum number of columns used to generate `.col-#` classes. | `1`              |
+// | `$flex-columns-max-count`                                 | The maximum number of columns used to generate `.col-#` classes. | `12`             |
+// | `$flex-columns-size`                                      | The default size of a column.                                    | `auto`           |
+// | `$flex-columns-max-width`                                 | The default maximum width of a column.                           | `unset`          |
+// | `$flex-columns-container-type`                            | The container type applied to the flex columns component.        | `"inline-size"`  |
+// | `$flex-columns-theme-mappings`                            | Map of properties/shades for flex columns themes.                | `()`             |
+// | `$flex-columns-theme-map`                                 | Expanded map of properties/colors/shades.                        | `()`             |
 //
 // @example
 //   <div class="flex-columns">

package/src/scss/utilities/_index.scss

@@ -10,6 +10,7 @@
 @use "display";
 @use "flex";
 @use "float";
+@use "grid";
 @use "gradient";
 @use "height";
 @use "inline-size";

package/src/scss/utilities/_template/_index.scss

@@ -3,7 +3,7 @@
 // This file generates the [_template] utility classes provided by Graupl.
 //
 // The following classes are generated by default:
-// - `.template-class`: Applies the base value for the property.
+// - `.template-class`: Sets the `template` property to `value`.
 //
 // The following custom properties control the generated classes:
 // | Property | Description | Default Value |

package/src/scss/utilities/block-size/_defaults.scss

@@ -41,9 +41,9 @@ $container-aware-selector-suffix: root-defaults.$utility-container-aware-selecto
 
 // Properties.
 $-utility-properties: (
-  "block": block-size,
-  "max-block": max-block-size,
-  "min-block": min-block-size,
+  "bs": block-size,
+  "max-bs": max-block-size,
+  "min-bs": min-block-size,
 );
 $utility-properties: () !default;
 

package/src/scss/utilities/block-size/_index.scss

@@ -3,90 +3,90 @@
 // This file generates the block-size utility classes provided by Graupl.
 //
 // The following classes are generated by default:
-// - `.block-auto`: Sets the `block-size` property to `auto`.
-// - `.block-fit-content`: Sets the `block-size` property to `fit-content`.
-// - `.block-max-content`: Sets the `block-size` property to `max-content`.
-// - `.block-min-content`: Sets the `block-size` property to `min-content`.
-// - `.block-stretch`: Sets the `block-size` property to `stretch`.
-// - `.block-full`: Sets the `block-size` property to `100%`.
-// - `.block-quarter`: Sets the `block-size` property to `25%`.
-// - `.block-half`: Sets the `block-size` property to `50%`.
-// - `.block-three-quarters`: Sets the `block-size` property to `75%`.
-// - `.block-third`: Sets the `block-size` property to `calc(100% / 3)`.
-// - `.block-two-thirds`: Sets the `block-size` property to `calc(100% / 1.5)`.
-// - `.block-half-screen`: Sets the `block-size` property to `50vh`.
-// - `.block-third-screen`: Sets the `block-size` property to `calc(100vh / 3)`.
-// - `.block-two-thirds-screen`: Sets the `block-size` property to `calc(100vh / 1.5)`.
-// - `.block-quarter-screen`: Sets the `block-size` property to `25vh`.
-// - `.block-three-quarters-screen`: Sets the `block-size` property to `75vh`.
-// - `.block-full-screen`: Sets the `block-size` property to `100vh`.
-// - `.block-0`: Sets the `block-size` property to `var(--graupl-spacer-0)`.
-// - `.block-1`: Sets the `block-size` property to `var(--graupl-spacer-1)`.
-// - `.block-2`: Sets the `block-size` property to `var(--graupl-spacer-2)`.
-// - `.block-3`: Sets the `block-size` property to `var(--graupl-spacer-3)`.
-// - `.block-4`: Sets the `block-size` property to `var(--graupl-spacer-4)`.
-// - `.block-5`: Sets the `block-size` property to `var(--graupl-spacer-5)`.
-// - `.block-6`: Sets the `block-size` property to `var(--graupl-spacer-6)`.
-// - `.block-7`: Sets the `block-size` property to `var(--graupl-spacer-7)`.
-// - `.block-8`: Sets the `block-size` property to `var(--graupl-spacer-8)`.
-// - `.block-9`: Sets the `block-size` property to `var(--graupl-spacer-9)`.
-// - `.block-10`: Sets the `block-size` property to `var(--graupl-spacer-10)`.
-// - `.max-block-auto`: Sets the `max-block-size` property to `auto`.
-// - `.max-block-fit-content`: Sets the `max-block-size` property to `fit-content`.
-// - `.max-block-max-content`: Sets the `max-block-size` property to `max-content`.
-// - `.max-block-min-content`: Sets the `max-block-size` property to `min-content`.
-// - `.max-block-stretch`: Sets the `max-block-size` property to `stretch`.
-// - `.max-block-full`: Sets the `max-block-size` property to `100%`.
-// - `.max-block-quarter`: Sets the `max-block-size` property to `25%`.
-// - `.max-block-half`: Sets the `max-block-size` property to `50%`.
-// - `.max-block-three-quarters`: Sets the `max-block-size` property to `75%`.
-// - `.max-block-third`: Sets the `max-block-size` property to `calc(100% / 3)`.
-// - `.max-block-two-thirds`: Sets the `max-block-size` property to `calc(100% / 1.5)`.
-// - `.max-block-half-screen`: Sets the `max-block-size` property to `50vh`.
-// - `.max-block-third-screen`: Sets the `max-block-size` property to `calc(100vh / 3)`.
-// - `.max-block-two-thirds-screen`: Sets the `max-block-size` property to `calc(100vh / 1.5)`.
-// - `.max-block-quarter-screen`: Sets the `max-block-size` property to `25vh`.
-// - `.max-block-three-quarters-screen`: Sets the `max-block-size` property to `75vh`.
-// - `.max-block-full-screen`: Sets the `max-block-size` property to `100vh`.
-// - `.max-block-0`: Sets the `max-block-size` property to `var(--graupl-spacer-0)`.
-// - `.max-block-1`: Sets the `max-block-size` property to `var(--graupl-spacer-1)`.
-// - `.max-block-2`: Sets the `max-block-size` property to `var(--graupl-spacer-2)`.
-// - `.max-block-3`: Sets the `max-block-size` property to `var(--graupl-spacer-3)`.
-// - `.max-block-4`: Sets the `max-block-size` property to `var(--graupl-spacer-4)`.
-// - `.max-block-5`: Sets the `max-block-size` property to `var(--graupl-spacer-5)`.
-// - `.max-block-6`: Sets the `max-block-size` property to `var(--graupl-spacer-6)`.
-// - `.max-block-7`: Sets the `max-block-size` property to `var(--graupl-spacer-7)`.
-// - `.max-block-8`: Sets the `max-block-size` property to `var(--graupl-spacer-8)`.
-// - `.max-block-9`: Sets the `max-block-size` property to `var(--graupl-spacer-9)`.
-// - `.max-block-10`: Sets the `max-block-size` property to `var(--graupl-spacer-10)`.
-// - `.min-block-auto`: Sets the `min-block-size` property to `auto`.
-// - `.min-block-fit-content`: Sets the `min-block-size` property to `fit-content`.
-// - `.min-block-max-content`: Sets the `min-block-size` property to `max-content`.
-// - `.min-block-min-content`: Sets the `min-block-size` property to `min-content`.
-// - `.min-block-stretch`: Sets the `min-block-size` property to `stretch`.
-// - `.min-block-full`: Sets the `min-block-size` property to `100%`.
-// - `.min-block-quarter`: Sets the `min-block-size` property to `25%`.
-// - `.min-block-half`: Sets the `min-block-size` property to `50%`.
-// - `.min-block-three-quarters`: Sets the `min-block-size` property to `75%`.
-// - `.min-block-third`: Sets the `min-block-size` property to `calc(100% / 3)`.
-// - `.min-block-two-thirds`: Sets the `min-block-size` property to `calc(100% / 1.5)`.
-// - `.min-block-half-screen`: Sets the `min-block-size` property to `50vh`.
-// - `.min-block-third-screen`: Sets the `min-block-size` property to `calc(100vh / 3)`.
-// - `.min-block-two-thirds-screen`: Sets the `min-block-size` property to `calc(100vh / 1.5)`.
-// - `.min-block-quarter-screen`: Sets the `min-block-size` property to `25vh`.
-// - `.min-block-three-quarters-screen`: Sets the `min-block-size` property to `75vh`.
-// - `.min-block-full-screen`: Sets the `min-block-size` property to `100vh`.
-// - `.min-block-0`: Sets the `min-block-size` property to `var(--graupl-spacer-0)`.
-// - `.min-block-1`: Sets the `min-block-size` property to `var(--graupl-spacer-1)`.
-// - `.min-block-2`: Sets the `min-block-size` property to `var(--graupl-spacer-2)`.
-// - `.min-block-3`: Sets the `min-block-size` property to `var(--graupl-spacer-3)`.
-// - `.min-block-4`: Sets the `min-block-size` property to `var(--graupl-spacer-4)`.
-// - `.min-block-5`: Sets the `min-block-size` property to `var(--graupl-spacer-5)`.
-// - `.min-block-6`: Sets the `min-block-size` property to `var(--graupl-spacer-6)`.
-// - `.min-block-7`: Sets the `min-block-size` property to `var(--graupl-spacer-7)`.
-// - `.min-block-8`: Sets the `min-block-size` property to `var(--graupl-spacer-8)`.
-// - `.min-block-9`: Sets the `min-block-size` property to `var(--graupl-spacer-9)`.
-// - `.min-block-10`: Sets the `min-block-size` property to `var(--graupl-spacer-10)`.
+// - `.bs-auto`: Sets the `block-size` property to `auto`.
+// - `.bs-fit-content`: Sets the `block-size` property to `fit-content`.
+// - `.bs-max-content`: Sets the `block-size` property to `max-content`.
+// - `.bs-min-content`: Sets the `block-size` property to `min-content`.
+// - `.bs-stretch`: Sets the `block-size` property to `stretch`.
+// - `.bs-full`: Sets the `block-size` property to `100%`.
+// - `.bs-quarter`: Sets the `block-size` property to `25%`.
+// - `.bs-half`: Sets the `block-size` property to `50%`.
+// - `.bs-three-quarters`: Sets the `block-size` property to `75%`.
+// - `.bs-third`: Sets the `block-size` property to `calc(100% / 3)`.
+// - `.bs-two-thirds`: Sets the `block-size` property to `calc(100% / 1.5)`.
+// - `.bs-half-screen`: Sets the `block-size` property to `50vh`.
+// - `.bs-third-screen`: Sets the `block-size` property to `calc(100vh / 3)`.
+// - `.bs-two-thirds-screen`: Sets the `block-size` property to `calc(100vh / 1.5)`.
+// - `.bs-quarter-screen`: Sets the `block-size` property to `25vh`.
+// - `.bs-three-quarters-screen`: Sets the `block-size` property to `75vh`.
+// - `.bs-full-screen`: Sets the `block-size` property to `100vh`.
+// - `.bs-0`: Sets the `block-size` property to `var(--graupl-spacer-0)`.
+// - `.bs-1`: Sets the `block-size` property to `var(--graupl-spacer-1)`.
+// - `.bs-2`: Sets the `block-size` property to `var(--graupl-spacer-2)`.
+// - `.bs-3`: Sets the `block-size` property to `var(--graupl-spacer-3)`.
+// - `.bs-4`: Sets the `block-size` property to `var(--graupl-spacer-4)`.
+// - `.bs-5`: Sets the `block-size` property to `var(--graupl-spacer-5)`.
+// - `.bs-6`: Sets the `block-size` property to `var(--graupl-spacer-6)`.
+// - `.bs-7`: Sets the `block-size` property to `var(--graupl-spacer-7)`.
+// - `.bs-8`: Sets the `block-size` property to `var(--graupl-spacer-8)`.
+// - `.bs-9`: Sets the `block-size` property to `var(--graupl-spacer-9)`.
+// - `.bs-10`: Sets the `block-size` property to `var(--graupl-spacer-10)`.
+// - `.max-bs-auto`: Sets the `max-block-size` property to `auto`.
+// - `.max-bs-fit-content`: Sets the `max-block-size` property to `fit-content`.
+// - `.max-bs-max-content`: Sets the `max-block-size` property to `max-content`.
+// - `.max-bs-min-content`: Sets the `max-block-size` property to `min-content`.
+// - `.max-bs-stretch`: Sets the `max-block-size` property to `stretch`.
+// - `.max-bs-full`: Sets the `max-block-size` property to `100%`.
+// - `.max-bs-quarter`: Sets the `max-block-size` property to `25%`.
+// - `.max-bs-half`: Sets the `max-block-size` property to `50%`.
+// - `.max-bs-three-quarters`: Sets the `max-block-size` property to `75%`.
+// - `.max-bs-third`: Sets the `max-block-size` property to `calc(100% / 3)`.
+// - `.max-bs-two-thirds`: Sets the `max-block-size` property to `calc(100% / 1.5)`.
+// - `.max-bs-half-screen`: Sets the `max-block-size` property to `50vh`.
+// - `.max-bs-third-screen`: Sets the `max-block-size` property to `calc(100vh / 3)`.
+// - `.max-bs-two-thirds-screen`: Sets the `max-block-size` property to `calc(100vh / 1.5)`.
+// - `.max-bs-quarter-screen`: Sets the `max-block-size` property to `25vh`.
+// - `.max-bs-three-quarters-screen`: Sets the `max-block-size` property to `75vh`.
+// - `.max-bs-full-screen`: Sets the `max-block-size` property to `100vh`.
+// - `.max-bs-0`: Sets the `max-block-size` property to `var(--graupl-spacer-0)`.
+// - `.max-bs-1`: Sets the `max-block-size` property to `var(--graupl-spacer-1)`.
+// - `.max-bs-2`: Sets the `max-block-size` property to `var(--graupl-spacer-2)`.
+// - `.max-bs-3`: Sets the `max-block-size` property to `var(--graupl-spacer-3)`.
+// - `.max-bs-4`: Sets the `max-block-size` property to `var(--graupl-spacer-4)`.
+// - `.max-bs-5`: Sets the `max-block-size` property to `var(--graupl-spacer-5)`.
+// - `.max-bs-6`: Sets the `max-block-size` property to `var(--graupl-spacer-6)`.
+// - `.max-bs-7`: Sets the `max-block-size` property to `var(--graupl-spacer-7)`.
+// - `.max-bs-8`: Sets the `max-block-size` property to `var(--graupl-spacer-8)`.
+// - `.max-bs-9`: Sets the `max-block-size` property to `var(--graupl-spacer-9)`.
+// - `.max-bs-10`: Sets the `max-block-size` property to `var(--graupl-spacer-10)`.
+// - `.min-bs-auto`: Sets the `min-block-size` property to `auto`.
+// - `.min-bs-fit-content`: Sets the `min-block-size` property to `fit-content`.
+// - `.min-bs-max-content`: Sets the `min-block-size` property to `max-content`.
+// - `.min-bs-min-content`: Sets the `min-block-size` property to `min-content`.
+// - `.min-bs-stretch`: Sets the `min-block-size` property to `stretch`.
+// - `.min-bs-full`: Sets the `min-block-size` property to `100%`.
+// - `.min-bs-quarter`: Sets the `min-block-size` property to `25%`.
+// - `.min-bs-half`: Sets the `min-block-size` property to `50%`.
+// - `.min-bs-three-quarters`: Sets the `min-block-size` property to `75%`.
+// - `.min-bs-third`: Sets the `min-block-size` property to `calc(100% / 3)`.
+// - `.min-bs-two-thirds`: Sets the `min-block-size` property to `calc(100% / 1.5)`.
+// - `.min-bs-half-screen`: Sets the `min-block-size` property to `50vh`.
+// - `.min-bs-third-screen`: Sets the `min-block-size` property to `calc(100vh / 3)`.
+// - `.min-bs-two-thirds-screen`: Sets the `min-block-size` property to `calc(100vh / 1.5)`.
+// - `.min-bs-quarter-screen`: Sets the `min-block-size` property to `25vh`.
+// - `.min-bs-three-quarters-screen`: Sets the `min-block-size` property to `75vh`.
+// - `.min-bs-full-screen`: Sets the `min-block-size` property to `100vh`.
+// - `.min-bs-0`: Sets the `min-block-size` property to `var(--graupl-spacer-0)`.
+// - `.min-bs-1`: Sets the `min-block-size` property to `var(--graupl-spacer-1)`.
+// - `.min-bs-2`: Sets the `min-block-size` property to `var(--graupl-spacer-2)`.
+// - `.min-bs-3`: Sets the `min-block-size` property to `var(--graupl-spacer-3)`.
+// - `.min-bs-4`: Sets the `min-block-size` property to `var(--graupl-spacer-4)`.
+// - `.min-bs-5`: Sets the `min-block-size` property to `var(--graupl-spacer-5)`.
+// - `.min-bs-6`: Sets the `min-block-size` property to `var(--graupl-spacer-6)`.
+// - `.min-bs-7`: Sets the `min-block-size` property to `var(--graupl-spacer-7)`.
+// - `.min-bs-8`: Sets the `min-block-size` property to `var(--graupl-spacer-8)`.
+// - `.min-bs-9`: Sets the `min-block-size` property to `var(--graupl-spacer-9)`.
+// - `.min-bs-10`: Sets the `min-block-size` property to `var(--graupl-spacer-10)`.
 //
 // The following custom properties control the generated classes:
 // | Property | Description | Default Value |

package/src/scss/utilities/grid/_defaults.scss

@@ -0,0 +1,89 @@
+// @graupl/core grid utilities default values.
+//
+// Generally, these should not be used directly when styling components unless a static value is needed.
+// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
+//
+// They should not be used to define direct property values (i.e. font-size, color, etc.).
+// Those should be defined as custom properties in the `_variables.scss` file.
+
+@use "../../defaults" as root-defaults;
+@use "../../functions/utility";
+@use "../../variables" as root-variables;
+@use "sass:map";
+
+// Utility modifiers.
+$selector-base: root-defaults.$utility-selector-base !default;
+$selector-prefix: root-defaults.$utility-selector-prefix !default;
+$selector-suffix: root-defaults.$utility-selector-suffix !default;
+$selector-separator: root-defaults.$utility-selector-separator !default;
+$use-important: root-defaults.$use-important !default;
+$generate-base-utilities: root-defaults.$generate-base-utilities !default;
+$screen-aware: false !default;
+$theme-aware: false !default;
+$scheme-aware: false !default;
+$state-aware: false !default;
+$container-aware: false !default;
+$screen-aware-selector-prefix: root-defaults.$utility-screen-aware-selector-prefix !default;
+$screen-aware-selector-suffix: root-defaults.$utility-screen-aware-selector-suffix !default;
+$screen-aware-selector-separator: root-defaults.$utility-screen-aware-selector-separator !default;
+$theme-aware-selector-prefix: root-defaults.$utility-theme-aware-selector-prefix !default;
+$theme-aware-selector-suffix: root-defaults.$utility-theme-aware-selector-suffix !default;
+$theme-aware-selector-separator: root-defaults.$utility-theme-aware-selector-separator !default;
+$scheme-aware-selector-prefix: root-defaults.$utility-scheme-aware-selector-prefix !default;
+$scheme-aware-selector-suffix: root-defaults.$utility-scheme-aware-selector-suffix !default;
+$scheme-aware-selector-separator: root-defaults.$utility-scheme-aware-selector-separator !default;
+$state-aware-selector-prefix: root-defaults.$utility-state-aware-selector-prefix !default;
+$state-aware-selector-suffix: root-defaults.$utility-state-aware-selector-suffix !default;
+$state-aware-selector-separator: root-defaults.$utility-state-aware-selector-separator !default;
+$container-aware-selector-prefix: root-defaults.$utility-container-aware-selector-prefix !default;
+$container-aware-selector-suffix: root-defaults.$utility-container-aware-selector-suffix !default;
+$container-aware-selector-separator: root-defaults.$utility-container-aware-selector-separator !default;
+$grid-column-min-count: root-defaults.$column-layout-min-count !default;
+$grid-column-max-count: root-defaults.$column-layout-max-count !default;
+$grid-row-min-count: root-defaults.$row-layout-min-count !default;
+$grid-row-max-count: root-defaults.$row-layout-max-count !default;
+
+// Properties.
+$-utility-properties: ();
+$utility-properties: () !default;
+
+// Values.
+$-utility-values: ();
+$utility-values: () !default;
+
+// Merge custom and base properties/values if generating base utilities.
+@if $generate-base-utilities {
+  $utility-properties: map.deep-merge(
+    $-utility-properties,
+    $utility-properties
+  );
+  $utility-values: map.deep-merge($-utility-values, $utility-values);
+}
+
+// Set up all utility classes and properties for cleaner generation in the index file.
+//
+// The end result of this map is something like:
+// $-utility-map: (
+//   class-name: (
+//     property: value,
+//     property: value,
+//     ...
+//   ),
+//   class-name: (
+//     property: value,
+//     property: value,
+//     ...
+//   ),
+//   ...
+// );
+$-utility-map: ();
+$-utility-map: map.deep-merge(
+  $-utility-map,
+  utility.generate-utility-map(
+    $utility-properties,
+    $utility-values,
+    $selector-separator
+  )
+);
+$utility-map: () !default;
+$utility-map: map.deep-merge($-utility-map, $utility-map);