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

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

@@ -0,0 +1,140 @@
+// @graupl/core grid-column 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`.
+//
+// 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`          |
+//
+// 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-column.
+//
+// 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:column-start-2` will apply the `column-start-2` 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:column-start-2` will apply the `column-start-2` 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:column-start-2` will apply the `column-start-2` 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:column-start-2` will apply the `column-start-2` 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:column-start-2` will apply the `column-start-2` class on medium-sized containers and up.
+//
+// @example
+//   <div class="column-start-2">This content will start on column 2.</div>
+
+@use "../../../mixins/layer" as *;
+@use "../../../mixins/utility";
+@use "defaults";
+@use "variables" as *;
+
+@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/grid-column/_variables.scss

@@ -0,0 +1,6 @@
+// @graupl/core grid-column 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/grid-row/_defaults.scss

@@ -0,0 +1,104 @@
+// @graupl/core grid-row 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-row-min-count: grid-defaults.$grid-row-min-count;
+$grid-row-max-count: grid-defaults.$grid-row-max-count;
+
+// Properties.
+$-utility-properties: (
+  "row-start": grid-row-start,
+  "row-end": grid-row-end,
+);
+$utility-properties: () !default;
+
+// Values.
+$-utility-values: (
+  "first": 1,
+  "last": -1,
+  "auto": auto,
+);
+$utility-values: () !default;
+
+// Add the count values to the base values.
+@for $i from $grid-row-min-count through $grid-row-max-count {
+  $-utility-values: map.merge(
+    $-utility-values,
+    (
+      math.abs($i): $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);

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

@@ -0,0 +1,140 @@
+// @graupl/core grid-row utilities styles.
+//
+// This file generates the grid utility classes provided by Graupl.
+//
+// The following classes are generated by default:
+// - `.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`.
+//
+// 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-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-row.
+//
+// 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:row-start-2` will apply the `row-start-2` 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:row-start-2` will apply the `row-start-2` 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:row-start-2` will apply the `row-start-2` 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:row-start-2` will apply the `row-start-2` 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:row-start-2` will apply the `row-start-2` class on medium-sized containers and up.
+//
+// @example
+//   <div class="row-start-2">This content will start on row 2.</div>
+
+@use "../../../mixins/layer" as *;
+@use "../../../mixins/utility";
+@use "defaults";
+@use "variables" as *;
+
+@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/grid-row/_variables.scss

@@ -0,0 +1,6 @@
+// @graupl/core grid-row 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/grid-template-columns/_defaults.scss

@@ -0,0 +1,102 @@
+// @graupl/core grid-template-columns 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: (
+  "grid-cols": grid-template-columns,
+);
+$utility-properties: () !default;
+
+// Values.
+$-utility-values: (
+  "auto": auto,
+  "subgrid": subgrid,
+);
+$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): repeat($i, minmax(0, 1fr)),
+    )
+  );
+}
+
+// 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/grid-template-columns/_index.scss

@@ -0,0 +1,124 @@
+// @graupl/core grid-template-columns utilities styles.
+//
+// This file generates the grid utility classes provided by Graupl.
+//
+// The following classes are generated by default:
+// - `.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`.
+//
+// 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`          |
+//
+// 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-template-columns.
+//
+// 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">This content will have 5 columns.</div>
+
+@use "../../../mixins/layer" as *;
+@use "../../../mixins/utility";
+@use "defaults";
+@use "variables" as *;
+
+@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/grid-template-columns/_variables.scss

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