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

package/src/scss/utilities/background/_defaults.scss

@@ -33,19 +33,8 @@ $-background-attachment-properties: (
   fixed: fixed,
   local: local,
 );
-$custom-background-attachment-properties: () !default;
 $background-attachment-properties: () !default;
 
-// @todo remove this once $custom-background-attachment-properties is removed
-@if $custom-background-attachment-properties != () {
-  @warn "`$custom-background-attachment-properties` is deprecated and will be removed in a future release of Graupl. Use `$background-attachment-properties` instead.";
-
-  $background-attachment-properties: map.merge(
-    $background-attachment-properties,
-    $custom-background-attachment-properties
-  );
-}
-
 // Background clip properties.
 $background-clip-selector-prefix: "bg-clip-" !default;
 $-background-clip-properties: (
@@ -55,37 +44,15 @@ $-background-clip-properties: (
   text: text,
   border-area: border-area,
 );
-$custom-background-clip-properties: () !default;
 $background-clip-properties: () !default;
 
-// @todo remove this once $custom-background-clip-properties is removed
-@if $custom-background-clip-properties != () {
-  @warn "`$custom-background-clip-properties` is deprecated and will be removed in a future release of Graupl. Use `$background-clip-properties` instead.";
-
-  $background-clip-properties: map.merge(
-    $background-clip-properties,
-    $custom-background-clip-properties
-  );
-}
-
 // Background image properties.
 $background-image-selector-prefix: "bg-image-" !default;
 $-background-image-properties: (
   none: none,
 );
-$custom-background-image-properties: () !default;
 $background-image-properties: () !default;
 
-// @todo remove this once $custom-background-image-properties is removed
-@if $custom-background-image-properties != () {
-  @warn "`$custom-background-image-properties` is deprecated and will be removed in a future release of Graupl. Use `$background-image-properties` instead.";
-
-  $background-image-properties: map.merge(
-    $background-image-properties,
-    $custom-background-image-properties
-  );
-}
-
 // Background origin properties.
 $background-origin-selector-prefix: "bg-origin-" !default;
 $-background-origin-properties: (
@@ -93,19 +60,8 @@ $-background-origin-properties: (
   padding-box: padding-box,
   content-box: content-box,
 );
-$custom-background-origin-properties: () !default;
 $background-origin-properties: () !default;
 
-// @todo remove this once $custom-background-origin-properties is removed
-@if $custom-background-origin-properties != () {
-  @warn "`$custom-background-origin-properties` is deprecated and will be removed in a future release of Graupl. Use `$background-origin-properties` instead.";
-
-  $background-origin-properties: map.merge(
-    $background-origin-properties,
-    $custom-background-origin-properties
-  );
-}
-
 // Background position properties.
 $background-position-selector-prefix: "bg-position-" !default;
 $-background-position-properties: (
@@ -115,19 +71,8 @@ $-background-position-properties: (
   left: left,
   center: center,
 );
-$custom-background-position-properties: () !default;
 $background-position-properties: () !default;
 
-// @todo remove this once $custom-background-position-properties is removed
-@if $custom-background-position-properties != () {
-  @warn "`$custom-background-position-properties` is deprecated and will be removed in a future release of Graupl. Use `$background-position-properties` instead.";
-
-  $background-position-properties: map.merge(
-    $background-position-properties,
-    $custom-background-position-properties
-  );
-}
-
 // Background repeat properties.
 $background-repeat-selector-prefix: "bg-repeat-" !default;
 $-background-repeat-properties: (
@@ -138,19 +83,8 @@ $-background-repeat-properties: (
   round: round,
   no-repeat: no-repeat,
 );
-$custom-background-repeat-properties: () !default;
 $background-repeat-properties: () !default;
 
-// @todo remove this once $custom-background-repeat-properties is removed
-@if $custom-background-repeat-properties != () {
-  @warn "`$custom-background-repeat-properties` is deprecated and will be removed in a future release of Graupl. Use `$background-repeat-properties` instead.";
-
-  $background-repeat-properties: map.merge(
-    $background-repeat-properties,
-    $custom-background-repeat-properties
-  );
-}
-
 // Background size properties.
 $background-size-selector-prefix: "bg-size-" !default;
 $-background-size-properties: (
@@ -158,19 +92,8 @@ $-background-size-properties: (
   cover: cover,
   contain: contain,
 );
-$custom-background-size-properties: () !default;
 $background-size-properties: () !default;
 
-// @todo remove this once $custom-background-size-properties is removed
-@if $custom-background-size-properties != () {
-  @warn "`$custom-background-size-properties` is deprecated and will be removed in a future release of Graupl. Use `$background-size-properties` instead.";
-
-  $background-size-properties: map.merge(
-    $background-size-properties,
-    $custom-background-size-properties
-  );
-}
-
 // Merge custom properties with base properties if generating base utilities.
 @if $generate-base-utilities {
   $background-attachment-properties: map.merge(

package/src/scss/utilities/background/_index.scss

@@ -33,43 +33,38 @@
 // 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.
-// - `$background-attachment-selector-prefix`: The prefix for the background attachment utility classes.
-// - `$custom-background-attachment-properties`: [DEPRECATED] The custom properties and values for the background attachment utility classes.
-// - `$background-attachment-properties`: The combined properties and values for the background attachment utility classes.
-// - `$background-clip-selector-prefix`: The prefix for the background clip utility classes.
-// - `$custom-background-clip-properties`: [DEPRECATED] The custom properties and values for the background clip utility classes.
-// - `$background-clip-properties`: The combined properties and values for the background clip utility classes.
-// - `$background-image-selector-prefix`: The prefix for the background image utility classes.
-// - `$custom-background-image-properties`: [DEPRECATED] The custom properties and values for the background image utility classes.
-// - `$background-image-properties`: The combined properties and values for the background image utility classes.
-// - `$background-origin-selector-prefix`: The prefix for the background origin utility classes.
-// - `$custom-background-origin-properties`: [DEPRECATED] The custom properties and values for the background origin utility classes.
-// - `$background-origin-properties`: The combined properties and values for the background origin utility classes.
-// - `$background-position-selector-prefix`: The prefix for the background position utility classes.
-// - `$custom-background-position-properties`: [DEPRECATED] The custom properties and values for the background position utility classes.
-// - `$background-position-properties`: The combined properties and values for the background position utility classes.
-// - `$background-repeat-selector-prefix`: The prefix for the background repeat utility classes.
-// - `$custom-background-repeat-properties`: [DEPRECATED] The custom properties and values for the background repeat utility classes.
-// - `$background-repeat-properties`: The combined properties and values for the background repeat utility classes.
-// - `$background-size-selector-prefix`: The prefix for the background size utility classes.
-// - `$custom-background-size-properties`: [DEPRECATED] The custom properties and values for the background size utility classes.
-// - `$background-size-properties`: The combined properties and values for the background size 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\\:"`                                                 |
+// | `$background-attachment-selector-prefix` | Prefix for background-attachment utilities.    | `"bg-attachment-"`                                        |
+// | `$background-attachment-properties`      | Map of background-attachment utility values.   | `scroll, fixed, local`                                    |
+// | `$background-clip-selector-prefix`       | Prefix for background-clip utilities.          | `"bg-clip-"`                                              |
+// | `$background-clip-properties`            | Map of background-clip utility values.         | `border-box, padding-box, content-box, text, border-area` |
+// | `$background-image-selector-prefix`      | Prefix for background-image utilities.         | `"bg-image-"`                                             |
+// | `$background-image-properties`           | Map of background-image utility values.        | `none`                                                    |
+// | `$background-origin-selector-prefix`     | Prefix for background-origin utilities.        | `"bg-origin-"`                                            |
+// | `$background-origin-properties`          | Map of background-origin utility values.       | `border-box, padding-box, content-box`                    |
+// | `$background-position-selector-prefix`   | Prefix for background-position utilities.      | `"bg-position-"`                                          |
+// | `$background-position-properties`        | Map of background-position utility values.     | `top, right, bottom, left, center`                        |
+// | `$background-repeat-selector-prefix`     | Prefix for background-repeat utilities.        | `"bg-repeat-"`                                            |
+// | `$background-repeat-properties`          | Map of background-repeat utility values.       | `repeat, repeat-x, repeat-y, space, round, no-repeat`     |
+// | `$background-size-selector-prefix`       | Prefix for background-size utilities.          | `"bg-size-"`                                              |
+// | `$background-size-properties`            | Map of background-size utility values.         | `auto, cover, contain`                                    |
 //
 // 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/border/_defaults.scss

@@ -39,19 +39,8 @@ $-border-width-properties: (
   medium: medium,
   none: none,
 );
-$custom-border-width-properties: () !default;
 $border-width-properties: () !default;
 
-// @todo remove this once $custom-border-width-properties is removed
-@if $custom-border-width-properties != () {
-  @warn "`$custom-border-width-properties` is deprecated and will be removed in a future release of Graupl. Use `$border-width-properties` instead.";
-
-  $border-width-properties: map.merge(
-    $border-width-properties,
-    $custom-border-width-properties
-  );
-}
-
 // Border color properties.
 $border-color-selector-prefix: "border-" !default;
 $-border-color-properties: (
@@ -79,19 +68,8 @@ $-border-color-properties: (
   }
 }
 
-$custom-border-color-properties: () !default;
 $border-color-properties: () !default;
 
-// @todo remove this once $custom-border-color-properties is removed
-@if $custom-border-color-properties != () {
-  @warn "`$custom-border-color-properties` is deprecated and will be removed in a future release of Graupl. Use `$border-color-properties` instead.";
-
-  $border-color-properties: map.merge(
-    $border-color-properties,
-    $custom-border-color-properties
-  );
-}
-
 // Border style properties.
 $border-style-selector-prefix: "border-" !default;
 $-border-style-properties: (
@@ -105,19 +83,8 @@ $-border-style-properties: (
   outset: outset,
   none: none,
 );
-$custom-border-style-properties: () !default;
 $border-style-properties: () !default;
 
-// @todo remove this once $custom-border-style-properties is removed
-@if $custom-border-style-properties != () {
-  @warn "`$custom-border-style-properties` is deprecated and will be removed in a future release of Graupl. Use `$border-style-properties` instead.";
-
-  $border-style-properties: map.merge(
-    $border-style-properties,
-    $custom-border-style-properties
-  );
-}
-
 // Merge custom properties with base properties if generating base utilities.
 @if $generate-base-utilities {
   $border-width-properties: map.merge(

package/src/scss/utilities/border/_index.scss

@@ -49,32 +49,31 @@
 // 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.
-// - `$default-border-selector`: The selector for the default border utility class.
-// - `$border-width-selector-prefix`: The prefix for the border width utility classes.
-// - `$custom-border-width-properties`: [DEPRECATED] The custom properties and values for the border width utility classes.
-// - `$border-width-properties`: The combined properties and values for the border width utility classes.
-// - `$border-color-selector-prefix`: The prefix for the border color utility classes.
-// - `$custom-border-color-properties`: [DEPRECATED] The custom properties and values for the border color utility classes.
-// - `$border-color-properties`: The combined properties and values for the border color utility classes.
-// - `$border-style-selector-prefix`: The prefix for the border style utility classes.
-// - `$custom-border-style-properties`: [DEPRECATED] The custom properties and values for the border style utility classes.
-// - `$border-style-properties`: The combined properties and values for the border style 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\\:"`                                                           |
+// | `$default-border-selector`         | Selector name for the default border utility.               | `"bordered"`                                                        |
+// | `$border-width-selector-prefix`    | Prefix for border-width utilities.                          | `"border-"`                                                         |
+// | `$border-width-properties`         | Map of border-width utility values.                         | `thick, thin, medium, none`                                         |
+// | `$border-color-selector-prefix`    | Prefix for border-color utilities.                          | `"border-"`                                                         |
+// | `$border-color-properties`         | Map of border-color utility values (includes theme shades). | `transparent`, all theme colours/shades                             |
+// | `$border-style-selector-prefix`    | Prefix for border-style utilities.                          | `"border-"`                                                         |
+// | `$border-style-properties`         | Map of border-style utility values.                         | `solid, dashed, dotted, double, groove, ridge, inset, outset, 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.

package/src/scss/utilities/color/_defaults.scss

@@ -35,19 +35,8 @@ $-background-properties: (
   current: currentcolor,
   transparent: transparent,
 );
-$custom-background-properties: () !default;
 $background-properties: () !default;
 
-// @todo remove this once $custom-background-properties is removed
-@if $custom-background-properties != () {
-  @warn "`$custom-background-properties` is deprecated and will be removed in a future release of Graupl. Use `$background-properties` instead.";
-
-  $background-properties: map.merge(
-    $background-properties,
-    $custom-background-properties
-  );
-}
-
 // Text utility properties.
 $text-selector-prefix: "text-" !default;
 $-text-properties: (
@@ -55,16 +44,8 @@ $-text-properties: (
   current: currentcolor,
   transparent: transparent,
 );
-$custom-text-properties: () !default;
 $text-properties: () !default;
 
-// @todo remove this once $custom-text-properties is removed
-@if $custom-text-properties != () {
-  @warn "`$custom-text-properties` is deprecated and will be removed in a future release of Graupl. Use `$text-properties` instead.";
-
-  $text-properties: map.merge($text-properties, $custom-text-properties);
-}
-
 // Add all of the active theme colours to the text and background base properties.
 @each $color in theme.get-colors() {
   $map: theme.get-color($color);

package/src/scss/utilities/color/_index.scss

@@ -67,28 +67,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.
-// - `$background-selector-prefix`: The prefix for the background utility classes.
-// - `$custom-background-properties`: [DEPRECATED] The custom properties and values for the background utility classes.
-// - `$background-properties`: The merged properties and values for the background utility classes.
-// - `$text-selector-prefix`: The prefix for the text utility classes.
-// - `$custom-text-properties`: [DEPRECATED] The custom properties and values for text utility classes.
-// - `$text-properties`: The merged properties and values for text 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.                                     | `true`                                                                  |
+// | `$state-aware`                     | Generate state-aware variants.                                     | `true`                                                                  |
+// | `$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\\:"`                                                               |
+// | `$background-selector-prefix`      | Prefix for background utilities.                                   | `"bg-"`                                                                 |
+// | `$background-properties`           | Map of background utility values (including theme colours/shades). | Includes primary/secondary/tertiary shades, inherit/current/transparent |
+// | `$text-selector-prefix`            | Prefix for text utilities.                                         | `"text-"`                                                               |
+// | `$text-properties`                 | Map of text utility values (including theme colours/shades).       | Includes primary/secondary/tertiary shades, inherit/current/transparent |
 //
 // Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.
 // By default, theme-aware and state-aware utility classes are generated.

package/src/scss/utilities/container/_defaults.scss

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

package/src/scss/utilities/container/_index.scss

@@ -11,25 +11,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.
-// - `$container-type-selector-prefix`: The prefix for the utility classes.
-// - `$custom-container-type-properties`: [DEPRECATED] The custom properties and values for the container-type utility classes.
-// - `$container-type-properties`: The merged properties and values for the container-type 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\\:"`                                                               |
+// | `$container-type-selector-prefix`  | Prefix for container-type utilities.           | `"container-type-"`                                                     |
+// | `$container-type-properties`       | Map of container-type utility values.          | `inline: inline-size, normal: normal, size: size, scroll: scroll-state` |
 //
 // 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/display/_defaults.scss

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

package/src/scss/utilities/display/_index.scss

@@ -18,25 +18,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.
-// - `$display-selector-prefix`: The prefix for the display utility classes.
-// - `$custom-display-properties`: [DEPRECATED] The custom properties and values for the display utility classes.
-// - `$display-properties`: The merged properties and values for the display 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\\:"`                                                                                                 |
+// | `$display-selector-prefix`         | Prefix for display utilities.                  | `"display-"`                                                                                              |
+// | `$display-properties`              | Map of display utility values.                 | `block, inline-block, inline, flex, inline-flex, grid, inline-grid, flow-root, none, contents, list-item` |
 //
 // 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.