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

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/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);

package/src/scss/utilities/grid/_index.scss

@@ -0,0 +1,236 @@
+// @graupl/core grid utilities styles.
+//
+// This file generates the grid utility classes provided by Graupl.
+//
+// The following classes are generated by default:
+// - `.column-start-first`: Sets the `grid-column-start` property to `1`.
+// - `.column-start-last`: Sets the `grid-column-start` property to `-1`.
+// - `.column-start-auto`: Sets the `grid-column-start` property to `auto`.
+// - `.column-start-1`: Sets the `grid-column-start` property to `1`.
+// - `.column-start-2`: Sets the `grid-column-start` property to `2`.
+// - `.column-start-3`: Sets the `grid-column-start` property to `3`.
+// - `.column-start-4`: Sets the `grid-column-start` property to `4`.
+// - `.column-start-5`: Sets the `grid-column-start` property to `5`.
+// - `.column-start-6`: Sets the `grid-column-start` property to `6`.
+// - `.column-start-7`: Sets the `grid-column-start` property to `7`.
+// - `.column-start-8`: Sets the `grid-column-start` property to `8`.
+// - `.column-start-9`: Sets the `grid-column-start` property to `9`.
+// - `.column-start-10`: Sets the `grid-column-start` property to `10`.
+// - `.column-start-11`: Sets the `grid-column-start` property to `11`.
+// - `.column-start-12`: Sets the `grid-column-start` property to `12`.
+// - `.column-end-first`: Sets the `grid-column-end` property to `1`.
+// - `.column-end-last`: Sets the `grid-column-end` property to `-1`.
+// - `.column-end-auto`: Sets the `grid-column-end` property to `auto`.
+// - `.column-end-1`: Sets the `grid-column-end` property to `1`.
+// - `.column-end-2`: Sets the `grid-column-end` property to `2`.
+// - `.column-end-3`: Sets the `grid-column-end` property to `3`.
+// - `.column-end-4`: Sets the `grid-column-end` property to `4`.
+// - `.column-end-5`: Sets the `grid-column-end` property to `5`.
+// - `.column-end-6`: Sets the `grid-column-end` property to `6`.
+// - `.column-end-7`: Sets the `grid-column-end` property to `7`.
+// - `.column-end-8`: Sets the `grid-column-end` property to `8`.
+// - `.column-end-9`: Sets the `grid-column-end` property to `9`.
+// - `.column-end-10`: Sets the `grid-column-end` property to `10`.
+// - `.column-end-11`: Sets the `grid-column-end` property to `11`.
+// - `.column-end-12`: Sets the `grid-column-end` property to `12`.
+// - `.row-start-first`: Sets the `grid-row-start` property to `1`.
+// - `.row-start-last`: Sets the `grid-row-start` property to `-1`.
+// - `.row-start-auto`: Sets the `grid-row-start` property to `auto`.
+// - `.row-start-1`: Sets the `grid-row-start` property to `1`.
+// - `.row-start-2`: Sets the `grid-row-start` property to `2`.
+// - `.row-start-3`: Sets the `grid-row-start` property to `3`.
+// - `.row-start-4`: Sets the `grid-row-start` property to `4`.
+// - `.row-start-5`: Sets the `grid-row-start` property to `5`.
+// - `.row-start-6`: Sets the `grid-row-start` property to `6`.
+// - `.row-start-7`: Sets the `grid-row-start` property to `7`.
+// - `.row-start-8`: Sets the `grid-row-start` property to `8`.
+// - `.row-start-9`: Sets the `grid-row-start` property to `9`.
+// - `.row-start-10`: Sets the `grid-row-start` property to `10`.
+// - `.row-start-11`: Sets the `grid-row-start` property to `11`.
+// - `.row-start-12`: Sets the `grid-row-start` property to `12`.
+// - `.row-end-first`: Sets the `grid-row-end` property to `1`.
+// - `.row-end-last`: Sets the `grid-row-end` property to `-1`.
+// - `.row-end-auto`: Sets the `grid-row-end` property to `auto`.
+// - `.row-end-1`: Sets the `grid-row-end` property to `1`.
+// - `.row-end-2`: Sets the `grid-row-end` property to `2`.
+// - `.row-end-3`: Sets the `grid-row-end` property to `3`.
+// - `.row-end-4`: Sets the `grid-row-end` property to `4`.
+// - `.row-end-5`: Sets the `grid-row-end` property to `5`.
+// - `.row-end-6`: Sets the `grid-row-end` property to `6`.
+// - `.row-end-7`: Sets the `grid-row-end` property to `7`.
+// - `.row-end-8`: Sets the `grid-row-end` property to `8`.
+// - `.row-end-9`: Sets the `grid-row-end` property to `9`.
+// - `.row-end-10`: Sets the `grid-row-end` property to `10`.
+// - `.row-end-11`: Sets the `grid-row-end` property to `11`.
+// - `.row-end-12`: Sets the `grid-row-end` property to `12`.
+// - `.grid-cols-auto`: Sets the `grid-template-columns` property to `auto`.
+// - `.grid-cols-subgrid`: Sets the `grid-template-columns` property to `subgrid`.
+// - `.grid-cols-1`: Sets the `grid-template-columns` property to `1`.
+// - `.grid-cols-2`: Sets the `grid-template-columns` property to `2`.
+// - `.grid-cols-3`: Sets the `grid-template-columns` property to `3`.
+// - `.grid-cols-4`: Sets the `grid-template-columns` property to `4`.
+// - `.grid-cols-5`: Sets the `grid-template-columns` property to `5`.
+// - `.grid-cols-6`: Sets the `grid-template-columns` property to `6`.
+// - `.grid-cols-7`: Sets the `grid-template-columns` property to `7`.
+// - `.grid-cols-8`: Sets the `grid-template-columns` property to `8`.
+// - `.grid-cols-9`: Sets the `grid-template-columns` property to `9`.
+// - `.grid-cols-10`: Sets the `grid-template-columns` property to `10`.
+// - `.grid-cols-11`: Sets the `grid-template-columns` property to `11`.
+// - `.grid-cols-12`: Sets the `grid-template-columns` property to `12`.
+// - `.grid-rows-auto`: Sets the `grid-template-rows` property to `auto`.
+// - `.grid-rows-subgrid`: Sets the `grid-template-rows` property to `subgrid`.
+// - `.grid-rows-1`: Sets the `grid-template-rows` property to `1`.
+// - `.grid-rows-2`: Sets the `grid-template-rows` property to `2`.
+// - `.grid-rows-3`: Sets the `grid-template-rows` property to `3`.
+// - `.grid-rows-4`: Sets the `grid-template-rows` property to `4`.
+// - `.grid-rows-5`: Sets the `grid-template-rows` property to `5`.
+// - `.grid-rows-6`: Sets the `grid-template-rows` property to `6`.
+// - `.grid-rows-7`: Sets the `grid-template-rows` property to `7`.
+// - `.grid-rows-8`: Sets the `grid-template-rows` property to `8`.
+// - `.grid-rows-9`: Sets the `grid-template-rows` property to `9`.
+// - `.grid-rows-10`: Sets the `grid-template-rows` property to `10`.
+// - `.grid-rows-11`: Sets the `grid-template-rows` property to `11`.
+// - `.grid-rows-12`: Sets the `grid-template-rows` property to `12`.
+// - `.col-span-auto`: Sets the `grid-column` property to `span auto`.
+// - `.col-span-full`: Sets the `grid-column` property to `1 / -1`.
+// - `.col-span-1`: Sets the `grid-column` property to `span 1`.
+// - `.col-span-2`: Sets the `grid-column` property to `span 2`.
+// - `.col-span-3`: Sets the `grid-column` property to `span 3`.
+// - `.col-span-4`: Sets the `grid-column` property to `span 4`.
+// - `.col-span-5`: Sets the `grid-column` property to `span 5`.
+// - `.col-span-6`: Sets the `grid-column` property to `span 6`.
+// - `.col-span-7`: Sets the `grid-column` property to `span 7`.
+// - `.col-span-8`: Sets the `grid-column` property to `span 8`.
+// - `.col-span-9`: Sets the `grid-column` property to `span 9`.
+// - `.col-span-10`: Sets the `grid-column` property to `span 10`.
+// - `.col-span-11`: Sets the `grid-column` property to `span 11`.
+// - `.col-span-12`: Sets the `grid-column` property to `span 12`.
+// - `.row-span-auto`: Sets the `grid-row` property to `span auto`.
+// - `.row-span-full`: Sets the `grid-row` property to `1 / -1`.
+// - `.row-span-1`: Sets the `grid-row` property to `span 1`.
+// - `.row-span-2`: Sets the `grid-row` property to `span 2`.
+// - `.row-span-3`: Sets the `grid-row` property to `span 3`.
+// - `.row-span-4`: Sets the `grid-row` property to `span 4`.
+// - `.row-span-5`: Sets the `grid-row` property to `span 5`.
+// - `.row-span-6`: Sets the `grid-row` property to `span 6`.
+// - `.row-span-7`: Sets the `grid-row` property to `span 7`.
+// - `.row-span-8`: Sets the `grid-row` property to `span 8`.
+// - `.row-span-9`: Sets the `grid-row` property to `span 9`.
+// - `.row-span-10`: Sets the `grid-row` property to `span 10`.
+// - `.row-span-11`: Sets the `grid-row` property to `span 11`.
+// - `.row-span-12`: Sets the `grid-row` property to `span 12`.
+//
+// The following custom properties control the generated classes:
+// | Property | Description | Default Value |
+// | -------- | ----------- | ------------- |
+// | N/A      | N/A         | N/A           |
+//
+// This utility does not define any custom properties.
+//
+// The following variables control the generated classes:
+// | Variable                             | Description                                                 | Default Value |
+// | ------------------------------------ | ----------------------------------------------------------- | ------------- |
+// | `$selector-base`                     | Base selector for utility classes.                          | `"."`         |
+// | `$selector-prefix`                   | The selector prefix for all utility classes.                | `""`          |
+// | `$selector-suffix`                   | The selctor suffix for all utility classes.                 | `""`          |
+// | `$selector-separator`                | The selector separator for all utility classes.             | `""`          |
+// | `$use-important`                     | Appends `!important` to generated utility declarations.     | `true`        |
+// | `$generate-base-utilities`           | Generates the base utility classes.                         | `true`        |
+// | `$screen-aware`                      | Enables screen-aware utility variants.                      | `false`       |
+// | `$theme-aware`                       | Enables theme-aware utility variants.                       | `false`       |
+// | `$scheme-aware`                      | Enables scheme-aware utility variants.                      | `false`       |
+// | `$state-aware`                       | Enables state-aware utility variants.                       | `false`       |
+// | `$container-aware`                   | Enables container-aware utility variants.                   | `false`       |
+// | `$screen-aware-selector-prefix`      | Prefix to the screen-aware portion of utility selectors.    | `""`          |
+// | `$screen-aware-selector-suffix`      | Suffix to the screen-aware portion of utility selectors.    | `""`          |
+// | `$screen-aware-selector-separator`   | Separator inserted for screen-aware utility selectors.      | `"\\:"`       |
+// | `$theme-aware-selector-prefix`       | Prefix to the theme-aware portion of utility selectors.     | `""`          |
+// | `$theme-aware-selector-suffix`       | Suffix to the theme-aware portion of utility selectors.     | `"-theme"`    |
+// | `$theme-aware-selector-separator`    | Separator inserted for theme-aware utility selectors.       | `"\\:"`       |
+// | `$scheme-aware-selector-prefix`      | Prefix to the scheme-aware portion of utility selectors.    | `""`          |
+// | `$scheme-aware-selector-suffix`      | Suffix to the scheme-aware portion of utility selectors.    | `"-mode"`     |
+// | `$scheme-aware-selector-separator`   | Separator inserted for scheme-aware utility selectors.      | `"\\:"`       |
+// | `$state-aware-selector-prefix`       | Prefix to the state-aware portion of utility selectors.     | `""`          |
+// | `$state-aware-selector-suffix`       | Suffix to the state-aware portion of utility selectors.     | `""`          |
+// | `$state-aware-selector-separator`    | Separator inserted for state-aware utility selectors.       | `"\\:"`       |
+// | `$container-aware-selector-prefix`   | Prefix to the container-aware portion of utility selectors. | `"cq\\:"`     |
+// | `$container-aware-selector-suffix`   | Suffix to the container-aware portion of utility selectors. | `""`          |
+// | `$container-aware-selector-separator`| Separator inserted for container-aware utility selectors.   | `"\\:"`       |
+// | `$utility-properties`                | Map of utility properties.                                  | `()`          |
+// | `$utility-values`                    | Map of utility values.                                      | `()`          |
+// | `$utility-map`                       | Map of utility property/value pairs.                        | `()`          |
+// | `$grid-column-min-count`             | The minimum column count for generated utilities.           | `1`           |
+// | `$grid-column-max-count`             | The maximum column count for generated utilities.           | `12`          |
+// | `$grid-row-min-count`                | The minimum row count for generated utilities.              | `1`           |
+// | `$grid-row-max-count`                | The maximum row count for generated utilities.              | `12`          |
+//
+// Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, `$scheme-aware`, `$state-aware`, or `$container-aware` to `true`.
+// By default, no responsive utility classes are generated for grid.
+//
+// When set to true, screen-aware utility classes will be generated for each screen size in the following pattern: `.{screen-modifier}:{utility-selector}`
+//
+// e.g. `sm:grid-cols-5` will apply the `grid-cols-5` class on small-sized screens and up.
+//
+// When set to true, theme-aware utility classes will be generated for each theme in the following pattern: `.{theme-modifier}:{utility-selector}`
+//
+// e.g. `default-theme:grid-cols-5` will apply the `grid-cols-5` class when using the default theme.
+//
+// When set to true, scheme-aware utility classes will be generated for each theme in the following pattern: `.{scheme-modifier}:{utility-selector}`
+//
+// e.g. `dark-mode:grid-cols-5` will apply the `grid-cols-5` class when dark-mode is active.
+//
+// When set to true, state-aware utility classes will be generated for each state in the following pattern: `.{state-modifier}:{utility-selector}`
+//
+// e.g. `hover:grid-cols-5` will apply the `grid-cols-5` class when hovered.
+//
+// When set to true, container-aware utility classes will be generated for each container in the following pattern: `.{container-modifier}:{utility-selector}`
+//
+// e.g. `cq:md:grid-cols-5` will apply the `grid-cols-5` class on medium-sized containers and up.
+//
+// @example
+//   <div class="display-grid grid-cols-5 grid-rows-2">This content will have 5 columns and 2 rows.</div>
+
+@use "../../mixins/layer" as *;
+@use "../../mixins/utility";
+@use "defaults";
+@use "variables" as *;
+
+// Import child utilities.
+@use "grid-column";
+@use "grid-row";
+@use "grid-template-columns";
+@use "grid-template-rows";
+@use "col-span";
+@use "row-span";
+
+@include layer(utilities) {
+  // Create a utitlity for each entry in the utility map.
+  @include utility.generate(
+    $map: defaults.$utility-map,
+    $selector-base: defaults.$selector-base,
+    $selector-prefix: defaults.$selector-prefix,
+    $selector-suffix: defaults.$selector-suffix,
+    $screen-aware: defaults.$screen-aware,
+    $screen-aware-selector-prefix: defaults.$screen-aware-selector-prefix,
+    $screen-aware-selector-suffix: defaults.$screen-aware-selector-suffix,
+    $screen-aware-selector-separator: defaults.$screen-aware-selector-separator,
+    $theme-aware: defaults.$theme-aware,
+    $theme-aware-selector-prefix: defaults.$theme-aware-selector-prefix,
+    $theme-aware-selector-suffix: defaults.$theme-aware-selector-suffix,
+    $theme-aware-selector-separator: defaults.$theme-aware-selector-separator,
+    $scheme-aware: defaults.$scheme-aware,
+    $scheme-aware-selector-prefix: defaults.$scheme-aware-selector-prefix,
+    $scheme-aware-selector-suffix: defaults.$scheme-aware-selector-suffix,
+    $scheme-aware-selector-separator: defaults.$scheme-aware-selector-separator,
+    $state-aware: defaults.$state-aware,
+    $state-aware-selector-prefix: defaults.$state-aware-selector-prefix,
+    $state-aware-selector-suffix: defaults.$state-aware-selector-suffix,
+    $state-aware-selector-separator: defaults.$state-aware-selector-separator,
+    $container-aware: defaults.$container-aware,
+    $container-aware-selector-prefix: defaults.$container-aware-selector-prefix,
+    $container-aware-selector-suffix: defaults.$container-aware-selector-suffix,
+    $container-aware-selector-separator:
+      defaults.$container-aware-selector-separator,
+    $important: defaults.$use-important
+  );
+}

package/src/scss/utilities/grid/_variables.scss

@@ -0,0 +1,6 @@
+// @graupl/core grid utilities variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";

package/src/scss/utilities/grid/col-span/_defaults.scss

@@ -0,0 +1,102 @@
+// @graupl/core column-span 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 grid-defaults;
+@use "../../../functions/utility";
+@use "sass:map";
+@use "sass:math";
+
+// Utility modifiers.
+$selector-base: grid-defaults.$selector-base !default;
+$selector-prefix: grid-defaults.$selector-prefix !default;
+$selector-suffix: grid-defaults.$selector-suffix !default;
+$selector-separator: grid-defaults.$selector-separator !default;
+$use-important: grid-defaults.$use-important !default;
+$generate-base-utilities: grid-defaults.$generate-base-utilities !default;
+$screen-aware: grid-defaults.$screen-aware !default;
+$theme-aware: grid-defaults.$theme-aware !default;
+$scheme-aware: grid-defaults.$scheme-aware !default;
+$state-aware: grid-defaults.$state-aware !default;
+$container-aware: grid-defaults.$container-aware !default;
+$screen-aware-selector-prefix: grid-defaults.$screen-aware-selector-prefix !default;
+$screen-aware-selector-suffix: grid-defaults.$screen-aware-selector-suffix !default;
+$screen-aware-selector-separator: grid-defaults.$screen-aware-selector-separator !default;
+$theme-aware-selector-prefix: grid-defaults.$theme-aware-selector-prefix !default;
+$theme-aware-selector-suffix: grid-defaults.$theme-aware-selector-suffix !default;
+$theme-aware-selector-separator: grid-defaults.$theme-aware-selector-separator !default;
+$scheme-aware-selector-prefix: grid-defaults.$scheme-aware-selector-prefix !default;
+$scheme-aware-selector-suffix: grid-defaults.$scheme-aware-selector-suffix !default;
+$scheme-aware-selector-separator: grid-defaults.$scheme-aware-selector-separator !default;
+$state-aware-selector-prefix: grid-defaults.$state-aware-selector-prefix !default;
+$state-aware-selector-suffix: grid-defaults.$state-aware-selector-suffix !default;
+$state-aware-selector-separator: grid-defaults.$state-aware-selector-separator !default;
+$container-aware-selector-prefix: grid-defaults.$container-aware-selector-prefix !default;
+$container-aware-selector-suffix: grid-defaults.$container-aware-selector-suffix !default;
+$container-aware-selector-separator: grid-defaults.$container-aware-selector-separator !default;
+$grid-column-min-count: grid-defaults.$grid-column-min-count;
+$grid-column-max-count: grid-defaults.$grid-column-max-count;
+
+// Properties.
+$-utility-properties: (
+  "col-span": grid-column,
+);
+$utility-properties: () !default;
+
+// Values.
+$-utility-values: (
+  "auto": span auto,
+  "full": "1 / -1",
+);
+$utility-values: () !default;
+
+// Add the count values to the base values.
+@for $i from $grid-column-min-count through $grid-column-max-count {
+  $-utility-values: map.merge(
+    $-utility-values,
+    (
+      math.abs($i): span $i,
+    )
+  );
+}
+
+// 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);