@graupl/core 1.0.0-beta.22 → 1.0.0-beta.24

package/src/scss/utilities/justification/_index.scss

@@ -24,31 +24,30 @@
 // The following custom properties control the generated classes:
 // - N/A.
 //
-// The following variables control the generated classes:
-// - `$selector-base`: The base selector for the utility classes.
-// - `$use-important`: A flag to determine if the `!important` flag should be added to the utility classes.
-// - `$generate-base-utilities`: A flag to determine if the base utility classes should be generated.
-// - `$screen-aware`: A flag to generate screen-aware utility classes.
-// - `$theme-aware`: A flag to generate theme-aware utility classes.
-// - `$state-aware`: A flag to generate state-aware utility classes.
-// - `$container-aware`: A flag to generate container-aware utility classes.
-// - `$screen-aware-separator`: The separator for screen-aware utility classes.
-// - `$theme-aware-separator`: The separator for theme-aware utility classes.
-// - `$state-aware-separator`: The separator for state-aware utility classes.
-// - `$container-aware-separator`: The separator for container-aware utility classes.
-// - `$screen-aware-selector-prefix`: The prefix for screen-aware utility classes.
-// - `$theme-aware-selector-prefix`: The prefix for theme-aware utility classes.
-// - `$state-aware-selector-prefix`: The prefix for state-aware utility classes.
-// - `$container-aware-selector-prefix`: The prefix for container-aware utility classes.
-// - `$justify-content-selector-prefix`: The prefix for the justify-content utility classes.
-// - `$custom-justify-content-properties`: [DEPRECATED] The custom properties and values for justify-content.
-// - `$justify-content-properties`: The combined properties and values for justify-content.
-// - `$justify-items-selector-prefix`: The prefix for the justify-items utility classes.
-// - `$custom-justify-items-properties`: [DEPRECATED] The custom properties and values for justify-items.
-// - `$justify-items-properties`: The combined properties and values for justify-items.
-// - `$justify-self-selector-prefix`: The prefix for the justify-self utility classes.
-// - `$custom-justify-self-properties`: [DEPRECATED] The custom properties and values for justify-self.
-// - `$justify-self-properties`: The combined properties and values for justify-self.
+// The following sass variables control the generated classes:
+// | Variable                           | Description                                    | Default Value                                                  |
+// | ---                                | ---                                            | ---                                                            |
+// | `$selector-base`                   | Base selector for utility classes.             | `"."`                                                          |
+// | `$use-important`                   | Append `!important` to generated declarations. | `true`                                                         |
+// | `$generate-base-utilities`         | Generate the base utilities.                   | `true`                                                         |
+// | `$screen-aware`                    | Generate screen-aware variants.                | `false`                                                        |
+// | `$theme-aware`                     | Generate theme-aware variants.                 | `false`                                                        |
+// | `$state-aware`                     | Generate state-aware variants.                 | `false`                                                        |
+// | `$container-aware`                 | Generate container-aware variants.             | `false`                                                        |
+// | `$screen-aware-separator`          | Separator for screen-aware utilities.          | `"\\:"`                                                        |
+// | `$theme-aware-separator`           | Separator for theme-aware utilities.           | `"\\:"`                                                        |
+// | `$state-aware-separator`           | Separator for state-aware utilities.           | `"\\:"`                                                        |
+// | `$container-aware-separator`       | Separator for container-aware utilities.       | `"\\:"`                                                        |
+// | `$screen-aware-selector-prefix`    | Prefix for screen-aware utilities.             | `""`                                                           |
+// | `$theme-aware-selector-prefix`     | Prefix for theme-aware utilities.              | `""`                                                           |
+// | `$state-aware-selector-prefix`     | Prefix for state-aware utilities.              | `""`                                                           |
+// | `$container-aware-selector-prefix` | Prefix for container-aware utilities.          | `"cq\\:"`                                                      |
+// | `$justify-content-selector-prefix` | Prefix for justify-content utilities.          | `"justify-content-"`                                           |
+// | `$justify-content-properties`      | Map of justify-content utility values.         | `normal, start, end, center, between, around, evenly, stretch` |
+// | `$justify-items-selector-prefix`   | Prefix for justify-items utilities.            | `"justify-items-"`                                             |
+// | `$justify-items-properties`        | Map of justify-items utility values.           | `start, end, center, stretch`                                  |
+// | `$justify-self-selector-prefix`    | Prefix for justify-self utilities.             | `"justify-self-"`                                              |
+// | `$justify-self-properties`         | Map of justify-self utility values.            | `auto, start, end, center, stretch`                            |
 //
 // Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.
 // By default, no responsive utility classes are generated.

package/src/scss/utilities/list/_defaults.scss

@@ -35,38 +35,16 @@ $-list-style-type-properties: (
   circle: circle,
   square: square,
 );
-$custom-list-style-type-properties: () !default;
 $list-style-type-properties: () !default;
 
-// @todo remove this once $custom-list-style-type-properties is removed
-@if $custom-list-style-type-properties != () {
-  @warn "`$custom-list-style-type-properties` is deprecated and will be removed in a future release of Graupl. Use `$list-style-type-properties` instead.";
-
-  $list-style-type-properties: map.merge(
-    $list-style-type-properties,
-    $custom-list-style-type-properties
-  );
-}
-
 // List style position properties.
 $list-style-position-selector-prefix: "list-style-" !default;
 $-list-style-position-properties: (
   inside: inside,
   outside: outside,
 );
-$custom-list-style-position-properties: () !default;
 $list-style-position-properties: () !default;
 
-// @todo remove this once $custom-list-style-position-properties is removed
-@if $custom-list-style-position-properties != () {
-  @warn "`$custom-list-style-position-properties` is deprecated and will be removed in a future release of Graupl. Use `$list-style-position-properties` instead.";
-
-  $list-style-position-properties: map.merge(
-    $list-style-position-properties,
-    $custom-list-style-position-properties
-  );
-}
-
 // Merge custom properties with base properties if generating base utilities.
 @if $generate-base-utilities {
   $list-style-type-properties: map.merge(

package/src/scss/utilities/list/_index.scss

@@ -14,28 +14,28 @@
 // The following custom properties control the generated classes:
 // - N/A.
 //
-// The following variables control the generated classes:
-// - `$selector-base`: The base selector for the utility classes.
-// - `$use-important`: A flag to determine if the `!important` flag should be added to the utility classes.
-// - `$generate-base-utilities`: A flag to determine if the base utility classes should be generated.
-// - `$screen-aware`: A flag to generate screen-aware utility classes.
-// - `$theme-aware`: A flag to generate theme-aware utility classes.
-// - `$state-aware`: A flag to generate state-aware utility classes.
-// - `$container-aware`: A flag to generate container-aware utility classes.
-// - `$screen-aware-separator`: The separator for screen-aware utility classes.
-// - `$theme-aware-separator`: The separator for theme-aware utility classes.
-// - `$state-aware-separator`: The separator for state-aware utility classes.
-// - `$container-aware-separator`: The separator for container-aware utility classes.
-// - `$screen-aware-selector-prefix`: The prefix for screen-aware utility classes.
-// - `$theme-aware-selector-prefix`: The prefix for theme-aware utility classes.
-// - `$state-aware-selector-prefix`: The prefix for state-aware utility classes.
-// - `$container-aware-selector-prefix`: The prefix for container-aware utility classes.
-// - `$list-style-type-selector-prefix`: The prefix for the list-style-type utility classes.
-// - `$custom-list-style-type-properties`: [DEPRECATED] The custom properties and values for list-style-type.
-// - `$list-style-type-properties`: The combined properties and values for list-style-type.
-// - `$list-style-position-selector-prefix`: The prefix for the list-style-position utility classes.
-// - `$custom-list-style-position-properties`: [DEPRECATED] The custom properties and values for list-style-position.
-// - `$list-style-position-properties`: The combined properties and values for list-style-position.
+// The following sass variables control the generated classes:
+// | Variable                               | Description                                    | Default Value                         |
+// | ---                                    | ---                                            | ---                                   |
+// | `$selector-base`                       | Base selector for utility classes.             | `"."`                                 |
+// | `$use-important`                       | Append `!important` to generated declarations. | `true`                                |
+// | `$generate-base-utilities`             | Generate the base utilities.                   | `true`                                |
+// | `$screen-aware`                        | Generate screen-aware variants.                | `false`                               |
+// | `$theme-aware`                         | Generate theme-aware variants.                 | `false`                               |
+// | `$state-aware`                         | Generate state-aware variants.                 | `false`                               |
+// | `$container-aware`                     | Generate container-aware variants.             | `false`                               |
+// | `$screen-aware-separator`              | Separator for screen-aware utilities.          | `"\\:"`                               |
+// | `$theme-aware-separator`               | Separator for theme-aware utilities.           | `"\\:"`                               |
+// | `$state-aware-separator`               | Separator for state-aware utilities.           | `"\\:"`                               |
+// | `$container-aware-separator`           | Separator for container-aware utilities.       | `"\\:"`                               |
+// | `$screen-aware-selector-prefix`        | Prefix for screen-aware utilities.             | `""`                                  |
+// | `$theme-aware-selector-prefix`         | Prefix for theme-aware utilities.              | `""`                                  |
+// | `$state-aware-selector-prefix`         | Prefix for state-aware utilities.              | `""`                                  |
+// | `$container-aware-selector-prefix`     | Prefix for container-aware utilities.          | `"cq\\:"`                             |
+// | `$list-style-type-selector-prefix`     | Prefix for list-style-type utilities.          | `"list-style-"`                       |
+// | `$list-style-type-properties`          | Map of list-style-type utility values.         | `none, disc, decimal, circle, square` |
+// | `$list-style-position-selector-prefix` | Prefix for list-style-position utilities.      | `"list-style-"`                       |
+// | `$list-style-position-properties`      | Map of list-style-position utility values.     | `inside, outside`                     |
 //
 // Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.
 // By default, no responsive utility classes are generated.

package/src/scss/utilities/order/_defaults.scss

@@ -51,16 +51,8 @@ $-order-properties: (
   );
 }
 
-$custom-order-properties: () !default;
 $order-properties: () !default;
 
-// @todo remove this once $custom-order-properties is removed
-@if $custom-order-properties != () {
-  @warn "`$custom-order-properties` is deprecated and will be removed in a future release of Graupl. Use `$order-properties` instead.";
-
-  $order-properties: map.merge($order-properties, $custom-order-properties);
-}
-
 // Merge custom properties with base properties if generating base utilities.
 @if $generate-base-utilities {
   $order-properties: map.merge($-order-properties, $order-properties);

package/src/scss/utilities/order/_index.scss

@@ -22,25 +22,26 @@
 // The following custom properties control the generated classes:
 // - N/A.
 //
-// The following variables control the generated classes:
-// - `$selector-base`: The base selector for the utility classes.
-// - `$use-important`: A flag to determine if the `!important` flag should be added to the utility classes.
-// - `$generate-base-utilities`: A flag to determine if the base utility classes should be generated.
-// - `$screen-aware`: A flag to generate screen-aware utility classes.
-// - `$theme-aware`: A flag to generate theme-aware utility classes.
-// - `$state-aware`: A flag to generate state-aware utility classes.
-// - `$container-aware`: A flag to generate container-aware utility classes.
-// - `$screen-aware-separator`: The separator for screen-aware utility classes.
-// - `$theme-aware-separator`: The separator for theme-aware utility classes.
-// - `$state-aware-separator`: The separator for state-aware utility classes.
-// - `$container-aware-separator`: The separator for container-aware utility classes.
-// - `$screen-aware-selector-prefix`: The prefix for screen-aware utility classes.
-// - `$theme-aware-selector-prefix`: The prefix for theme-aware utility classes.
-// - `$state-aware-selector-prefix`: The prefix for state-aware utility classes.
-// - `$container-aware-selector-prefix`: The prefix for container-aware utility classes.
-// - `$order-selector-prefix`: The prefix for the order utility classes.
-// - `$custom-order-properties`: [DEPRECATED] The custom properties and values for the order utility classes.
-// - `$order-properties`: The combined properties and values for the order utility classes.
+// The following sass variables control the generated classes:
+// | Variable                           | Description                                    | Default Value                          |
+// | ---                                | ---                                            | ---                                    |
+// | `$selector-base`                   | Base selector for utility classes.             | `"."`                                  |
+// | `$use-important`                   | Append `!important` to generated declarations. | `true`                                 |
+// | `$generate-base-utilities`         | Generate the base utilities.                   | `true`                                 |
+// | `$screen-aware`                    | Generate screen-aware variants.                | `true`                                 |
+// | `$theme-aware`                     | Generate theme-aware variants.                 | `false`                                |
+// | `$state-aware`                     | Generate state-aware variants.                 | `false`                                |
+// | `$container-aware`                 | Generate container-aware variants.             | `true`                                 |
+// | `$screen-aware-separator`          | Separator for screen-aware utilities.          | `"\\:"`                                |
+// | `$theme-aware-separator`           | Separator for theme-aware utilities.           | `"\\:"`                                |
+// | `$state-aware-separator`           | Separator for state-aware utilities.           | `"\\:"`                                |
+// | `$container-aware-separator`       | Separator for container-aware utilities.       | `"\\:"`                                |
+// | `$screen-aware-selector-prefix`    | Prefix for screen-aware utilities.             | `""`                                   |
+// | `$theme-aware-selector-prefix`     | Prefix for theme-aware utilities.              | `""`                                   |
+// | `$state-aware-selector-prefix`     | Prefix for state-aware utilities.              | `""`                                   |
+// | `$container-aware-selector-prefix` | Prefix for container-aware utilities.          | `"cq\\:"`                              |
+// | `$order-selector-prefix`           | Prefix for order utilities.                    | `"order-"`                             |
+// | `$order-properties`                | Map of order utility values.                   | `none:0, first:-9999, last:9999, 1-12` |
 //
 // Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.
 // By default, only screen-aware utility classes are generated.

package/src/scss/utilities/position/_defaults.scss

@@ -35,19 +35,8 @@ $-position-properties: (
   relative: relative,
   sticky: sticky,
 );
-$custom-position-properties: () !default;
 $position-properties: () !default;
 
-// @todo remove this once $custom-position-properties is removed
-@if $custom-position-properties != () {
-  @warn "`$custom-position-properties` is deprecated and will be removed in a future release of Graupl. Use `$position-properties` instead.";
-
-  $position-properties: map.merge(
-    $position-properties,
-    $custom-position-properties
-  );
-}
-
 // Merge custom properties with base properties if generating base utilities.
 @if $generate-base-utilities {
   $position-properties: map.merge($-position-properties, $position-properties);

package/src/scss/utilities/position/_index.scss

@@ -12,25 +12,26 @@
 // The following custom properties control the generated classes:
 // - N/A.
 //
-// The following variables control the generated classes:
-// - `$selector-base`: The base selector for the utility classes.
-// - `$use-important`: A flag to determine if the `!important` flag should be added to the utility classes.
-// - `$generate-base-utilities`: A flag to determine if the base utility classes should be generated.
-// - `$screen-aware`: A flag to generate screen-aware utility classes.
-// - `$theme-aware`: A flag to generate theme-aware utility classes.
-// - `$state-aware`: A flag to generate state-aware utility classes.
-// - `$container-aware`: A flag to generate container-aware utility classes.
-// - `$screen-aware-separator`: The separator for screen-aware utility classes.
-// - `$theme-aware-separator`: The separator for theme-aware utility classes.
-// - `$state-aware-separator`: The separator for state-aware utility classes.
-// - `$container-aware-separator`: The separator for container-aware utility classes.
-// - `$screen-aware-selector-prefix`: The prefix for screen-aware utility classes.
-// - `$theme-aware-selector-prefix`: The prefix for theme-aware utility classes.
-// - `$state-aware-selector-prefix`: The prefix for state-aware utility classes.
-// - `$container-aware-selector-prefix`: The prefix for container-aware utility classes.
-// - `$position-selector-prefix`: The prefix for the position utility classes.
-// - `$custom-position-properties`: [DEPRECATED] The custom properties and values for the position utility classes.
-// - `$position-properties`: The combined properties and values for the position utility classes.
+// The following sass variables control the generated classes:
+// | Variable                           | Description                                    | Default Value                               |
+// | ---                                | ---                                            | ---                                         |
+// | `$selector-base`                   | Base selector for utility classes.             | `"."`                                       |
+// | `$use-important`                   | Append `!important` to generated declarations. | `true`                                      |
+// | `$generate-base-utilities`         | Generate the base utilities.                   | `true`                                      |
+// | `$screen-aware`                    | Generate screen-aware variants.                | `true`                                      |
+// | `$theme-aware`                     | Generate theme-aware variants.                 | `false`                                     |
+// | `$state-aware`                     | Generate state-aware variants.                 | `false`                                     |
+// | `$container-aware`                 | Generate container-aware variants.             | `true`                                      |
+// | `$screen-aware-separator`          | Separator for screen-aware utilities.          | `"\\:"`                                     |
+// | `$theme-aware-separator`           | Separator for theme-aware utilities.           | `"\\:"`                                     |
+// | `$state-aware-separator`           | Separator for state-aware utilities.           | `"\\:"`                                     |
+// | `$container-aware-separator`       | Separator for container-aware utilities.       | `"\\:"`                                     |
+// | `$screen-aware-selector-prefix`    | Prefix for screen-aware utilities.             | `""`                                        |
+// | `$theme-aware-selector-prefix`     | Prefix for theme-aware utilities.              | `""`                                        |
+// | `$state-aware-selector-prefix`     | Prefix for state-aware utilities.              | `""`                                        |
+// | `$container-aware-selector-prefix` | Prefix for container-aware utilities.          | `"cq\\:"`                                   |
+// | `$position-selector-prefix`        | Prefix for position utilities.                 | `"position-"`                               |
+// | `$position-properties`             | Map of position utility values.                | `static, fixed, absolute, relative, sticky` |
 //
 // Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.
 // By default, only screen-aware utility classes are generated.

package/src/scss/utilities/ratio/_defaults.scss

@@ -39,16 +39,8 @@ $-ratios: (
   "three-by-two": calc(2 / 3 * 100%),
   "eight-by-five": calc(5 / 8 * 100%),
 );
-$custom-ratios: () !default;
 $ratios: () !default;
 
-// @todo remove this once $custom-ratios is removed
-@if $custom-ratios != () {
-  @warn "`$custom-ratios` is deprecated and will be removed in a future release of Graupl. Use `$ratios` instead.";
-
-  $ratios: map.merge($ratios, $custom-ratios);
-}
-
 // Merge custom properties with base properties if generating base utilities.
 @if $generate-base-utilities {
   $ratios: map.merge($-ratios, $ratios);

package/src/scss/utilities/ratio/_index.scss

@@ -16,27 +16,28 @@
 // The following custom properties control the generated classes:
 // - `--graupl-ratio`: The aspect ratio value.
 //
-// The following variables control the generated classes:
-// - `$selector-base`: The base selector for the utility classes.
-// - `$use-important`: A flag to determine if the `!important` flag should be added to the utility classes.
-// - `$generate-base-utilities`: A flag to determine if the base utility classes should be generated.
-// - `$screen-aware`: A flag to generate screen-aware utility classes.
-// - `$theme-aware`: A flag to generate theme-aware utility classes.
-// - `$state-aware`: A flag to generate state-aware utility classes.
-// - `$container-aware`: A flag to generate container-aware utility classes.
-// - `$screen-aware-separator`: The separator for screen-aware utility classes.
-// - `$theme-aware-separator`: The separator for theme-aware utility classes.
-// - `$state-aware-separator`: The separator for state-aware utility classes.
-// - `$container-aware-separator`: The separator for container-aware utility classes.
-// - `$screen-aware-selector-prefix`: The prefix for screen-aware utility classes.
-// - `$theme-aware-selector-prefix`: The prefix for theme-aware utility classes.
-// - `$state-aware-selector-prefix`: The prefix for state-aware utility classes.
-// - `$container-aware-selector-prefix`: The prefix for container-aware utility classes.
-// - `$ratio-selector`: The base selector for the ratio utility classes.
-// - `$ratio-variant-selector-prefix`: The prefix for the ratio variant utility classes.
-// - `$force-ratio-selector`: The selector for the force ratio utility class.
-// - `$custom-ratios`: [DEPRECATED] The custom properties and values for the aspect ratio utility classes.
-// - `$ratios`: The combined properties and values for the aspect ratio utility classes.
+// The following sass variables control the generated classes:
+// | Variable                           | Description                                    | Default Value                                                                                      |
+// | ---                                | ---                                            | ---                                                                                                |
+// | `$selector-base`                   | Base selector for utility classes.             | `"."`                                                                                              |
+// | `$use-important`                   | Append `!important` to generated declarations. | `true`                                                                                             |
+// | `$generate-base-utilities`         | Generate the base utilities.                   | `true`                                                                                             |
+// | `$screen-aware`                    | Generate screen-aware variants.                | `true`                                                                                             |
+// | `$theme-aware`                     | Generate theme-aware variants.                 | `true`                                                                                             |
+// | `$state-aware`                     | Generate state-aware variants.                 | `true`                                                                                             |
+// | `$container-aware`                 | Generate container-aware variants.             | `true`                                                                                             |
+// | `$screen-aware-separator`          | Separator for screen-aware utilities.          | `"\\:"`                                                                                            |
+// | `$theme-aware-separator`           | Separator for theme-aware utilities.           | `"\\:"`                                                                                            |
+// | `$state-aware-separator`           | Separator for state-aware utilities.           | `"\\:"`                                                                                            |
+// | `$container-aware-separator`       | Separator for container-aware utilities.       | `"\\:"`                                                                                            |
+// | `$screen-aware-selector-prefix`    | Prefix for screen-aware utilities.             | `""`                                                                                               |
+// | `$theme-aware-selector-prefix`     | Prefix for theme-aware utilities.              | `""`                                                                                               |
+// | `$state-aware-selector-prefix`     | Prefix for state-aware utilities.              | `""`                                                                                               |
+// | `$container-aware-selector-prefix` | Prefix for container-aware utilities.          | `"cq\\:"`                                                                                          |
+// | `$ratio-selector`                  | Base selector for the ratio utility.           | `"ratio"`                                                                                          |
+// | `$ratio-variant-selector-prefix`   | Prefix for ratio variant utilities.            | `"ratio-"`                                                                                         |
+// | `$force-ratio-selector`            | Selector for the force ratio utility.          | `"force-ratio"`                                                                                    |
+// | `$ratios`                          | Map of ratio variants.                         | `one-by-one, two-by-one, four-by-three, four-by-one, sixteen-by-nine, three-by-two, eight-by-five` |
 //
 // Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.
 // By default, only screen-aware utility classes are generated.

package/src/scss/utilities/ratio/_variables.scss

@@ -3,7 +3,13 @@
 // These values are to be used to directly style components and provide a
 // cleaner way to reference custom properties.
 
+// Custom property defaults:
+// | Custom property | Default |
+// | --------------- | ------- |
+// | --graupl-ratio  |         |
+
 @use "defaults";
 @use "../../defaults" as root-defaults;
 
+// --graupl-ratio
 $ratio: var(--#{root-defaults.$prefix}ratio);

package/src/scss/utilities/spacing/_defaults.scss

@@ -58,19 +58,8 @@ $-spacing-properties: (
   mie: margin-inline-end,
   mise: margin-inline-start margin-inline-end,
 );
-$custom-spacing-properties: () !default;
 $spacing-properties: () !default;
 
-// @todo remove this once $custom-spacing-properties is removed
-@if $custom-spacing-properties != () {
-  @warn "`$custom-spacing-properties` is deprecated and will be removed in a future release of Graupl. Use `$spacing-properties` instead.";
-
-  $spacing-properties: map.merge(
-    $spacing-properties,
-    $custom-spacing-properties
-  );
-}
-
 // Merge custom properties with base properties if generating base utilities.
 @if $generate-base-utilities {
   $spacing-properties: map.merge($-spacing-properties, $spacing-properties);

package/src/scss/utilities/spacing/_index.scss

@@ -356,23 +356,24 @@
 // - N/A.
 //
 // The following variables control the generated classes:
-// - `$selector-base`: The base selector for the utility classes.
-// - `$use-important`: A flag to determine if the `!important` flag should be added to the utility classes.
-// - `$generate-base-utilities`: A flag to determine if the base utility classes should be generated.
-// - `$screen-aware`: A flag to generate screen-aware utility classes.
-// - `$theme-aware`: A flag to generate theme-aware utility classes.
-// - `$state-aware`: A flag to generate state-aware utility classes.
-// - `$container-aware`: A flag to generate container-aware utility classes.
-// - `$screen-aware-separator`: The separator for screen-aware utility classes.
-// - `$theme-aware-separator`: The separator for theme-aware utility classes.
-// - `$state-aware-separator`: The separator for state-aware utility classes.
-// - `$container-aware-separator`: The separator for container-aware utility classes.
-// - `$screen-aware-selector-prefix`: The prefix for screen-aware utility classes.
-// - `$theme-aware-selector-prefix`: The prefix for theme-aware utility classes.
-// - `$state-aware-selector-prefix`: The prefix for state-aware utility classes.
-// - `$container-aware-selector-prefix`: The prefix for container-aware utility classes.
-// - `$custom-spacing-properties`: [DEPRECATED] The custom properties and values for the spacing utility classes.
-// - `$spacing-properties`: The combined properties and values for the spacing utility classes.
+// | Variable                           | Description                                                                              | Default Value                                                                                                                     |
+// | ---                                | ---                                                                                      | ---                                                                                                                               |
+// | `$selector-base`                   | Base selector for utility classes.                                                       | `"."`                                                                                                                             |
+// | `$use-important`                   | Append `!important` to generated declarations.                                           | `true`                                                                                                                            |
+// | `$generate-base-utilities`         | Generate the base utilities.                                                             | `true`                                                                                                                            |
+// | `$screen-aware`                    | Generate screen-aware variants.                                                          | `true`                                                                                                                            |
+// | `$theme-aware`                     | Generate theme-aware variants.                                                           | `false`                                                                                                                           |
+// | `$state-aware`                     | Generate state-aware variants.                                                           | `false`                                                                                                                           |
+// | `$container-aware`                 | Generate container-aware variants.                                                       | `true`                                                                                                                            |
+// | `$screen-aware-separator`          | Separator for screen-aware utilities.                                                    | `"\\:"`                                                                                                                           |
+// | `$theme-aware-separator`           | Separator for theme-aware utilities.                                                     | `"\\:"`                                                                                                                           |
+// | `$state-aware-separator`           | Separator for state-aware utilities.                                                     | `"\\:"`                                                                                                                           |
+// | `$container-aware-separator`       | Separator for container-aware utilities.                                                 | `"\\:"`                                                                                                                           |
+// | `$screen-aware-selector-prefix`    | Prefix for screen-aware utilities.                                                       | `""`                                                                                                                              |
+// | `$theme-aware-selector-prefix`     | Prefix for theme-aware utilities.                                                        | `""`                                                                                                                              |
+// | `$state-aware-selector-prefix`     | Prefix for state-aware utilities.                                                        | `""`                                                                                                                              |
+// | `$container-aware-selector-prefix` | Prefix for container-aware utilities.                                                    | `"cq\\:"`                                                                                                                         |
+// | `$spacing-properties`              | Map of spacing utilities (gap/row-gap/column-gap, padding/margin axes, logical spacing). | `g, rg, cg, p, pt, pr, pb, pl, px, py, pbs, pbe, pbse, pis, pie, pise, m, mt, mr, mb, ml, mx, my, mbs, mbe, mbse, mis, mie, mise` |
 //
 // Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.
 // By default, only screen-aware utility classes are generated.

package/src/scss/utilities/typography/_defaults.scss

@@ -133,19 +133,8 @@ $-font-style-properties: (
   normal: normal,
   italic: italic,
 );
-$custom-font-style-properties: () !default;
 $font-style-properties: () !default;
 
-// @todo remove this once $custom-font-style-properties is removed
-@if $custom-font-style-properties != () {
-  @warn "`$custom-font-style-properties` is deprecated and will be removed in a future release of Graupl. Use `$font-style-properties` instead.";
-
-  $font-style-properties: map.merge(
-    $font-style-properties,
-    $custom-font-style-properties
-  );
-}
-
 // Text transform properties.
 $text-transform-selector-prefix: "text-" !default;
 $-text-transform-properties: (
@@ -154,19 +143,8 @@ $-text-transform-properties: (
   capitalize: capitalize,
   none: none,
 );
-$custom-text-transform-properties: () !default;
 $text-transform-properties: () !default;
 
-// @todo remove this once $custom-text-transform-properties is removed
-@if $custom-text-transform-properties != () {
-  @warn "`$custom-text-transform-properties` is deprecated and will be removed in a future release of Graupl. Use `$text-transform-properties` instead.";
-
-  $text-transform-properties: map.merge(
-    $text-transform-properties,
-    $custom-text-transform-properties
-  );
-}
-
 // Merge custom properties with base properties if generating base utilities.
 @if $generate-base-utilities {
   $text-style-properties: map.deep-merge(

package/src/scss/utilities/typography/_index.scss

@@ -34,32 +34,33 @@
 // - N/A.
 //
 // The following variables control the generated classes:
-// - `$selector-base`: The base selector for the utility classes.
-// - `$use-important`: A flag to determine if the `!important` flag should be added to the utility classes.
-// - `$generate-base-utilities`: A flag to determine if the base utility classes should be generated.
-// - `$screen-aware`: A flag to generate screen-aware utility classes.
-// - `$theme-aware`: A flag to generate theme-aware utility classes.
-// - `$state-aware`: A flag to generate state-aware utility classes.
-// - `$container-aware`: A flag to generate container-aware utility classes.
-// - `$screen-aware-separator`: The separator for screen-aware utility classes.
-// - `$theme-aware-separator`: The separator for theme-aware utility classes.
-// - `$state-aware-separator`: The separator for state-aware utility classes.
-// - `$container-aware-separator`: The separator for container-aware utility classes.
-// - `$screen-aware-selector-prefix`: The prefix for screen-aware utility classes.
-// - `$theme-aware-selector-prefix`: The prefix for theme-aware utility classes.
-// - `$state-aware-selector-prefix`: The prefix for state-aware utility classes.
-// - `$container-aware-selector-prefix`: The prefix for container-aware utility classes.
-// - `$text-style-selector-prefix`: The prefix for the text style utility classes.
-// - `$text-style-properties`: The combined properties and values for the text style utility classes.
-// - `$font-size-selector-prefix`: The prefix for the font size utility classes.
-// - `$font-size-properties`: The combined properties and values for the font size utility classes.
-// - `$font-weight-selector-prefix`: The prefix for the font weight utility classes.
-// - `$font-style-selector-prefix`: The prefix for the font style utility classes.
-// - `$custom-font-style-properties`: [DEPRECATED] The custom properties and values for the font style utility classes.
-// - `$font-style-properties`: The combined properties and values for the font style utility classes.
-// - `$text-transform-selector-prefix`: The prefix for the text transform utility classes.
-// - `$custom-text-transform-properties`: [DEPRECATED] The custom properties and values for the text transform utility classes.
-// - `$text-transform-properties`: The combined properties and values for the text transform utility classes.
+// | Variable                            | Description                                                           | Default Value                              |
+// | ---                                 | ---                                                                   | ---                                        |
+// | `$selector-base`                    | Base selector for utility classes.                                    | `"."`                                      |
+// | `$use-important`                    | Append `!important` to generated declarations.                        | `true`                                     |
+// | `$generate-base-utilities`          | Generate the base utilities.                                          | `true`                                     |
+// | `$screen-aware`                     | Generate screen-aware variants.                                       | `false`                                    |
+// | `$theme-aware`                      | Generate theme-aware variants.                                        | `false`                                    |
+// | `$state-aware`                      | Generate state-aware variants.                                        | `false`                                    |
+// | `$container-aware`                  | Generate container-aware variants.                                    | `false`                                    |
+// | `$screen-aware-separator`           | Separator for screen-aware utilities.                                 | `"\\:"`                                    |
+// | `$theme-aware-separator`            | Separator for theme-aware utilities.                                  | `"\\:"`                                    |
+// | `$state-aware-separator`            | Separator for state-aware utilities.                                  | `"\\:"`                                    |
+// | `$container-aware-separator`        | Separator for container-aware utilities.                              | `"\\:"`                                    |
+// | `$screen-aware-selector-prefix`     | Prefix for screen-aware utilities.                                    | `""`                                       |
+// | `$theme-aware-selector-prefix`      | Prefix for theme-aware utilities.                                     | `""`                                       |
+// | `$state-aware-selector-prefix`      | Prefix for state-aware utilities.                                     | `""`                                       |
+// | `$container-aware-selector-prefix`  | Prefix for container-aware utilities.                                 | `"cq\\:"`                                  |
+// | `$text-style-selector-prefix`       | Prefix for text style utilities.                                      | `"text-"`                                  |
+// | `$text-style-properties`            | Map of text styles (paragraph, small, h1–h6) and their declarations.  | `paragraph, small, h1, h2, h3, h4, h5, h6` |
+// | `$font-size-selector-prefix`        | Prefix for font-size utilities.                                       | `"text-"`                                  |
+// | `$font-size-properties`             | Map of font-size utilities sourced from the typography scale.         | `xs, sm, base, lg, xl, 2xl, 3xl, 4xl, 5xl` |
+// | `$font-weight-selector-prefix`      | Prefix for font-weight utilities.                                     | `"font-weight-"`                           |
+// | `$font-weight-properties`           | Map of font-weight utilities.                                         | `light, normal, bold`                      |
+// | `$font-style-selector-prefix`       | Prefix for font-style utilities.                                      | `"font-"`                                  |
+// | `$font-style-properties`            | Map of font-style utilities.                                          | `normal, italic`                           |
+// | `$text-transform-selector-prefix`   | Prefix for text-transform utilities.                                  | `"text-"`                                  |
+// | `$text-transform-properties`        | Map of text-transform utilities.                                      | `uppercase, lowercase, capitalize, none`   |
 //
 // Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.
 // By default, no responsive utility classes are generated.