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

package/src/scss/utilities/flex/_defaults.scss

@@ -34,19 +34,8 @@ $-flex-direction-properties: (
   col: column,
   col-reverse: column-reverse,
 );
-$custom-flex-direction-properties: () !default;
 $flex-direction-properties: () !default;
 
-// @todo remove this once $custom-flex-direction-properties is removed
-@if $custom-flex-direction-properties != () {
-  @warn "`$custom-flex-direction-properties` is deprecated and will be removed in a future release of Graupl. Use `$flex-direction-properties` instead.";
-
-  $flex-direction-properties: map.merge(
-    $flex-direction-properties,
-    $custom-flex-direction-properties
-  );
-}
-
 // Flex wrap properties.
 $flex-wrap-selector-prefix: "flex-" !default;
 $-flex-wrap-properties: (
@@ -54,38 +43,16 @@ $-flex-wrap-properties: (
   wrap-reverse: wrap-reverse,
   nowrap: nowrap,
 );
-$custom-flex-wrap-properties: () !default;
 $flex-wrap-properties: () !default;
 
-// @todo remove this once $custom-flex-wrap-properties is removed
-@if $custom-flex-wrap-properties != () {
-  @warn "`$custom-flex-wrap-properties` is deprecated and will be removed in a future release of Graupl. Use `$flex-wrap-properties` instead.";
-
-  $flex-wrap-properties: map.merge(
-    $flex-wrap-properties,
-    $custom-flex-wrap-properties
-  );
-}
-
 // Flex grow properties.
 $flex-grow-selector-prefix: "flex-" !default;
 $-flex-grow-properties: (
   grow: 1,
   no-grow: 0,
 );
-$custom-flex-grow-properties: () !default;
 $flex-grow-properties: () !default;
 
-// @todo remove this once $custom-flex-grow-properties is removed
-@if $custom-flex-grow-properties != () {
-  @warn "`$custom-flex-grow-properties` is deprecated and will be removed in a future release of Graupl. Use `$flex-grow-properties` instead.";
-
-  $flex-grow-properties: map.merge(
-    $flex-grow-properties,
-    $custom-flex-grow-properties
-  );
-}
-
 @if $generate-base-utilities {
   $flex-grow-properties: map.merge(
     $-flex-grow-properties,
@@ -99,19 +66,8 @@ $-flex-shrink-properties: (
   shrink: 1,
   no-shrink: 0,
 );
-$custom-flex-shrink-properties: () !default;
 $flex-shrink-properties: () !default;
 
-// @todo remove this once $custom-flex-shrink-properties is removed
-@if $custom-flex-shrink-properties != () {
-  @warn "`$custom-flex-shrink-properties` is deprecated and will be removed in a future release of Graupl. Use `$flex-shrink-properties` instead.";
-
-  $flex-shrink-properties: map.merge(
-    $flex-shrink-properties,
-    $custom-flex-shrink-properties
-  );
-}
-
 // Flex basis properties.
 $flex-basis-selector-prefix: "flex-" !default;
 $-flex-basis-properties: (
@@ -128,19 +84,8 @@ $-flex-basis-properties: (
   third: calc(100% / 3),
   two-thirds: calc(100% / 1.5),
 );
-$custom-flex-basis-properties: () !default;
 $flex-basis-properties: () !default;
 
-// @todo remove this once $custom-flex-basis-properties is removed
-@if $custom-flex-basis-properties != () {
-  @warn "`$custom-flex-basis-properties` is deprecated and will be removed in a future release of Graupl. Use `$flex-basis-properties` instead.";
-
-  $flex-basis-properties: map.merge(
-    $flex-basis-properties,
-    $custom-flex-basis-properties
-  );
-}
-
 // Merge custom properties with base properties if generating base utilities.
 @if $generate-base-utilities {
   $flex-direction-properties: map.merge(

package/src/scss/utilities/flex/_index.scss

@@ -30,37 +30,34 @@
 // 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.
-// - `$flex-direction-selector-prefix`: The prefix for the flex direction utility classes.
-// - `$custom-flex-direction-properties`: [DEPRECATED] The custom properties and values for the flex direction utility classes.
-// - `$flex-direction-properties`: The merged properties and values for the flex direction utility classes.
-// - `$flex-wrap-selector-prefix`: The prefix for the flex wrap utility classes.
-// - `$custom-flex-wrap-properties`: [DEPRECATED] The custom properties and values for the flex wrap utility classes.
-// - `$flex-wrap-properties`: The merged properties and values for the flex wrap utility classes.
-// - `$flex-grow-selector-prefix`: The prefix for the flex grow utility classes.
-// - `$custom-flex-grow-properties`: [DEPRECATED] The custom properties and values for the flex grow utility classes.
-// - `$flex-grow-properties`: The merged properties and values for the flex grow utility classes.
-// - `$flex-shrink-selector-prefix`: The prefix for the flex shrink utility classes.
-// - `$custom-flex-shrink-properties`: [DEPRECATED] The custom properties and values for the flex shrink utility classes.
-// - `$flex-shrink-properties`: The merged properties and values for the flex shrink utility classes.
-// - `$flex-basis-selector-prefix`: The prefix for the flex basis utility classes.
-// - `$custom-flex-basis-properties`: [DEPRECATED] The custom properties and values for the flex basis utility classes.
-// - `$flex-basis-properties`: The merged properties and values for the flex basis 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.                | `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\\:"`                                                                                                         |
+// | `$flex-direction-selector-prefix`  | Prefix for flex-direction utilities.           | `"flex-"`                                                                                                         |
+// | `$flex-direction-properties`       | Map of flex-direction utility values.          | `row, row-reverse, col, col-reverse`                                                                              |
+// | `$flex-wrap-selector-prefix`       | Prefix for flex-wrap utilities.                | `"flex-"`                                                                                                         |
+// | `$flex-wrap-properties`            | Map of flex-wrap utility values.               | `wrap, wrap-reverse, nowrap`                                                                                      |
+// | `$flex-grow-selector-prefix`       | Prefix for flex-grow utilities.                | `"flex-"`                                                                                                         |
+// | `$flex-grow-properties`            | Map of flex-grow utility values.               | `grow, no-grow`                                                                                                   |
+// | `$flex-shrink-selector-prefix`     | Prefix for flex-shrink utilities.              | `"flex-"`                                                                                                         |
+// | `$flex-shrink-properties`          | Map of flex-shrink utility values.             | `shrink, no-shrink`                                                                                               |
+// | `$flex-basis-selector-prefix`      | Prefix for flex-basis utilities.               | `"flex-"`                                                                                                         |
+// | `$flex-basis-properties`           | Map of flex-basis utility values.              | `auto, fit-content, max-content, min-content, content, 0, full, quarter, half, three-quarters, third, two-thirds` |
 //
 // 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/gradient/_defaults.scss

@@ -39,16 +39,8 @@ $-gradient-types: (
   linear: linear-gradient,
   radial: radial-gradient,
 );
-$custom-gradient-types: () !default;
 $gradient-types: () !default;
 
-// @todo remove this once $custom-gradient-types is removed
-@if $custom-gradient-types != () {
-  @warn "`$custom-gradient-types` is deprecated and will be removed in a future release of Graupl. Use `$gradient-types` instead.";
-
-  $gradient-types: map.merge($gradient-types, $custom-gradient-types);
-}
-
 @if $generate-base-utilities {
   $gradient-types: map.merge($-gradient-types, $gradient-types);
 }
@@ -73,19 +65,7 @@ $-gradient-directions: (
   farthest-side: farthest-side,
   farthest-corner: farthest-corner,
 );
-$custom-gradient-directions: () !default;
 $gradient-directions: () !default;
-
-// @todo remove this once $custom-gradient-directions is removed
-@if $custom-gradient-directions != () {
-  @warn "`$custom-gradient-directions` is deprecated and will be removed in a future release of Graupl. Use `$gradient-directions` instead.";
-
-  $gradient-directions: map.merge(
-    $gradient-directions,
-    $custom-gradient-directions
-  );
-}
-
 $-gradient-colors: (
   transparent: transparent,
 );
@@ -108,16 +88,8 @@ $-gradient-colors: (
   }
 }
 
-$custom-gradient-colors: () !default;
 $gradient-colors: () !default;
 
-// @todo remove this once $custom-gradient-colors is removed
-@if $custom-gradient-colors != () {
-  @warn "`$custom-gradient-colors` is deprecated and will be removed in a future release of Graupl. Use `$gradient-colors` instead.";
-
-  $gradient-colors: map.merge($gradient-colors, $custom-gradient-colors);
-}
-
 // Merge custom properties with base properties if generating base utilities.
 @if $generate-base-utilities {
   $gradient-directions: map.merge($-gradient-directions, $gradient-directions);

package/src/scss/utilities/gradient/_index.scss

@@ -88,34 +88,33 @@
 // - `--graupl-gradient-to-position`: The gradient's to color position.
 // - `--graupl-gradient-direction`: The gradient's direction.
 //
-// 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.
-// - `$gradient-selector`: The selector for the gradient utility classes.
-// - `$gradient-type-selector-prefix`: The prefix for the gradient type utility classes.
-// - `$gradient-direction-selector-prefix`: The prefix for the gradient direction utility classes.
-// - `$gradient-color-selector-prefix`: The prefix for the gradient color utility classes.
-// - `$gradient-color-from-selector-prefix`: The prefix for the gradient from color utility classes.
-// - `$gradient-color-to-selector-prefix`: The prefix for the gradient to color utility classes.
-// - `$custom-gradient-types`: [DEPRECATED] The custom properties and values for the gradient type utility classes.
-// - `$gradient-types`: The combined properties and values for the gradient type utility classes.
-// - `$custom-gradient-directions`: [DEPRECATED] The custom properties and values for the gradient direction utility classes.
-// - `$gradient-directions`: The combined properties and values for the gradient direction utility classes.
-// - `$custom-gradient-colors`: [DEPRECATED] The custom properties and values for the gradient color utility classes.
-// - `$gradient-colors`: The combined properties and values for the gradient color 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.                                  | `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\\:"`                                                                                      |
+// | `$gradient-selector`                   | Selector for the base gradient utility.                          | `"gradient"`                                                                                   |
+// | `$gradient-type-selector-prefix`       | Prefix for gradient type utilities.                              | `"gradient-"`                                                                                  |
+// | `$gradient-direction-selector-prefix`  | Prefix for gradient direction utilities.                         | `"to-"`, `"circle"`, `"ellipse"`, etc.                                                         |
+// | `$gradient-color-selector-prefix`      | Prefix for gradient colour utilities.                            | `"gradient-"`                                                                                  |
+// | `$gradient-color-from-selector-prefix` | Prefix for gradient “from” colour utilities.                     | `"from-"`                                                                                      |
+// | `$gradient-color-to-selector-prefix`   | Prefix for gradient “to” colour utilities.                       | `"to-"`                                                                                        |
+// | `$gradient-types`                      | Map of gradient types.                                           | `linear, radial`                                                                               |
+// | `$gradient-directions`                 | Map of gradient direction keywords.                              | `to-top/right/bottom/left`, `circle`, `ellipse`, `closest-side/corner`, `farthest-side/corner` |
+// | `$gradient-colors`                     | Map of gradient colours (includes theme shades and transparent). | See `_defaults.scss`                                                                           |
 //
 // 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/gradient/_variables.scss

@@ -3,22 +3,37 @@
 // 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-gradient-from          | transparent |
+// | --graupl-gradient-from-position | 0%          |
+// | --graupl-gradient-to            | transparent |
+// | --graupl-gradient-to-position   | 100%        |
+
 @use "../../defaults" as root-defaults;
 @use "../../functions/theme";
 @use "defaults";
 
+// --graupl-gradient-from
 $gradient-from: var(
   --#{root-defaults.$prefix}gradient-from,
   #{theme.get(transparent)}
 );
+
+// --graupl-gradient-from-position
 $gradient-from-position: var(
   --#{root-defaults.$prefix}gradient-from-position,
   0%
 );
+
+// --graupl-gradient-to
 $gradient-to: var(
   --#{root-defaults.$prefix}gradient-to,
   #{theme.get(transparent)}
 );
+
+// --graupl-gradient-to-position
 $gradient-to-position: var(
   --#{root-defaults.$prefix}gradient-to-position,
   100%

package/src/scss/utilities/height/_defaults.scss

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

package/src/scss/utilities/height/_index.scss

@@ -91,27 +91,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.
-// - `$height-selector-prefix`: The prefix for the height utility classes.
-// - `$max-height-selector-prefix`: The prefix for the max-height utility classes.
-// - `$min-height-selector-prefix`: The prefix for the min-height utility classes.
-// - `$custom-height-values`: [DEPRECATED] The custom properties and values for the height utility classes.
-// - `$height-values`: The combined properties and values for the height 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.                | `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\\:"`                                                                                                                                                                        |
+// | `$height-selector-prefix`          | Prefix for height utilities.                   | `"h-"`                                                                                                                                                                           |
+// | `$max-height-selector-prefix`      | Prefix for max-height utilities.               | `"max-h-"`                                                                                                                                                                       |
+// | `$min-height-selector-prefix`      | Prefix for min-height utilities.               | `"min-h-"`                                                                                                                                                                       |
+// | `$height-values`                   | Map of height utility values.                  | `auto, fit-content, max-content, min-content, stretch, 100%, 25%, 50%, 75%, calc(100%/3), calc(100%/1.5), 50vh, calc(100vh/3), calc(100vh/1.5), 25vh, 75vh, 100vh, spacers 0-10` |
 //
 // 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/inset/_defaults.scss

@@ -38,16 +38,8 @@ $-inset-properties: (
   bottom: bottom,
   left: left,
 );
-$custom-inset-properties: () !default;
 $inset-properties: () !default;
 
-// @todo remove this once $custom-inset-properties is removed
-@if $custom-inset-properties != () {
-  @warn "`$custom-inset-properties` is deprecated and will be removed in a future release of Graupl. Use `$inset-properties` instead.";
-
-  $inset-properties: map.merge($inset-properties, $custom-inset-properties);
-}
-
 // Inset values.
 $-inset-values: (
   0: 0,
@@ -59,16 +51,8 @@ $-inset-values: (
   third: calc(100% / 3),
   two-thirds: calc(100% / 1.5),
 );
-$custom-inset-values: () !default;
 $inset-values: () !default;
 
-// @todo remove this once $custom-inset-values is removed
-@if $custom-inset-values != () {
-  @warn "`$custom-inset-values` is deprecated and will be removed in a future release of Graupl. Use `$inset-values` instead.";
-
-  $inset-values: map.merge($inset-values, $custom-inset-values);
-}
-
 // Merge custom properties with base properties if generating base utilities.
 @if $generate-base-utilities {
   $inset-properties: map.merge($-inset-properties, $inset-properties);

package/src/scss/utilities/inset/_index.scss

@@ -79,26 +79,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.
-// - `$custom-inset-properties`: [DEPRECATED] Additional properties and values for the inset utility classes.
-// - `$inset-properties`: The combined properties and values for the inset utility classes.
-// - `$custom-inset-values`: [DEPRECATED] Additional inset values.
-// - `$inset-values`: The combined inset values.
+// 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\\:"`            |
+// | `$inset-properties`                | Map of inset property groupings (inset, inset-x/y, logical, sides). | See `_defaults.scss` |
+// | `$inset-values`                    | Map of inset values (auto, 0, fractions, spacers 0–10, etc.).       | See `_defaults.scss` |
 //
 // 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/justification/_defaults.scss

@@ -38,19 +38,8 @@ $-justify-content-properties: (
   evenly: space-evenly,
   stretch: stretch,
 );
-$custom-justify-content-properties: () !default;
 $justify-content-properties: () !default;
 
-// @todo remove this once $custom-justify-content-properties is removed
-@if $custom-justify-content-properties != () {
-  @warn "`$custom-justify-content-properties` is deprecated and will be removed in a future release of Graupl. Use `$justify-content-properties` instead.";
-
-  $justify-content-properties: map.merge(
-    $justify-content-properties,
-    $custom-justify-content-properties
-  );
-}
-
 // Justify items properties.
 $justify-items-selector-prefix: "justify-items-" !default;
 $-justify-items-properties: (
@@ -59,19 +48,8 @@ $-justify-items-properties: (
   center: center,
   stretch: stretch,
 );
-$custom-justify-items-properties: () !default;
 $justify-items-properties: () !default;
 
-// @todo remove this once $custom-justify-items-properties is removed
-@if $custom-justify-items-properties != () {
-  @warn "`$custom-justify-items-properties` is deprecated and will be removed in a future release of Graupl. Use `$justify-items-properties` instead.";
-
-  $justify-items-properties: map.merge(
-    $justify-items-properties,
-    $custom-justify-items-properties
-  );
-}
-
 // Justify self properties.
 $justify-self-selector-prefix: "justify-self-" !default;
 $-justify-self-properties: (
@@ -81,19 +59,8 @@ $-justify-self-properties: (
   center: center,
   stretch: stretch,
 );
-$custom-justify-self-properties: () !default;
 $justify-self-properties: () !default;
 
-// @todo remove this once $custom-justify-self-properties is removed
-@if $custom-justify-self-properties != () {
-  @warn "`$custom-justify-self-properties` is deprecated and will be removed in a future release of Graupl. Use `$justify-self-properties` instead.";
-
-  $justify-self-properties: map.merge(
-    $justify-self-properties,
-    $custom-justify-self-properties
-  );
-}
-
 // Merge custom properties with base properties if generating base utilities.
 @if $generate-base-utilities {
   $justify-content-properties: map.merge(