@graupl/core 1.0.0-beta.14 → 1.0.0-beta.16

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

@@ -12,6 +12,7 @@
 // Utility modifiers.
 $selector-base: root-defaults.$utility-selector-base !default;
 $use-important: root-defaults.$use-important !default;
+$generate-base-utilities: root-defaults.$generate-base-utilities !default;
 $screen-aware: false !default;
 $theme-aware: false !default;
 $state-aware: false !default;
@@ -27,58 +28,93 @@ $container-aware-selector-prefix: root-defaults.$utility-container-aware-selecto
 
 // Flex direction properties.
 $flex-direction-selector-prefix: "flex-" !default;
-$base-flex-direction-properties: (
+$-flex-direction-properties: (
   row: row,
   row-reverse: row-reverse,
   col: column,
   col-reverse: column-reverse,
 );
 $custom-flex-direction-properties: () !default;
-$flex-direction-properties: map.merge(
-  $base-flex-direction-properties,
-  $custom-flex-direction-properties
-);
+$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;
-$base-flex-wrap-properties: (
+$-flex-wrap-properties: (
   wrap: wrap,
   wrap-reverse: wrap-reverse,
   nowrap: nowrap,
 );
 $custom-flex-wrap-properties: () !default;
-$flex-wrap-properties: map.merge(
-  $base-flex-wrap-properties,
-  $custom-flex-wrap-properties
-);
+$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;
-$base-flex-grow-properties: (
+$-flex-grow-properties: (
   grow: 1,
   no-grow: 0,
 );
 $custom-flex-grow-properties: () !default;
-$flex-grow-properties: map.merge(
-  $base-flex-grow-properties,
-  $custom-flex-grow-properties
-);
+$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,
+    $flex-grow-properties
+  );
+}
 
 // Flex shrink properties.
 $flex-shrink-selector-prefix: "flex-" !default;
-$base-flex-shrink-properties: (
+$-flex-shrink-properties: (
   shrink: 1,
   no-shrink: 0,
 );
 $custom-flex-shrink-properties: () !default;
-$flex-shrink-properties: map.merge(
-  $base-flex-shrink-properties,
-  $custom-flex-shrink-properties
-);
+$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;
-$base-flex-basis-properties: (
+$-flex-basis-properties: (
   auto: auto,
   fit-content: fit-content,
   max-content: max-content,
@@ -93,7 +129,34 @@ $base-flex-basis-properties: (
   two-thirds: calc(100% / 1.5),
 );
 $custom-flex-basis-properties: () !default;
-$flex-basis-properties: map.merge(
-  $base-flex-basis-properties,
-  $custom-flex-basis-properties
-);
+$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(
+    $-flex-direction-properties,
+    $flex-direction-properties
+  );
+  $flex-wrap-properties: map.merge(
+    $-flex-wrap-properties,
+    $flex-wrap-properties
+  );
+  $flex-shrink-properties: map.merge(
+    $-flex-shrink-properties,
+    $flex-shrink-properties
+  );
+  $flex-basis-properties: map.merge(
+    $-flex-basis-properties,
+    $flex-basis-properties
+  );
+}

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

@@ -33,6 +33,7 @@
 // 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.
@@ -46,24 +47,19 @@
 // - `$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.
-// - `$base-flex-direction-properties`: The base properties and values for the flex direction utility classes.
-// - `$custom-flex-direction-properties`: The custom properties and values 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.
-// - `$base-flex-wrap-properties`: The base properties and values for the flex wrap utility classes.
-// - `$custom-flex-wrap-properties`: The custom properties and values 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.
-// - `$base-flex-grow-properties`: The base properties and values for the flex grow utility classes.
-// - `$custom-flex-grow-properties`: The custom properties and values 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.
-// - `$base-flex-shrink-properties`: The base properties and values for the flex shrink utility classes.
-// - `$custom-flex-shrink-properties`: The custom properties and values 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.
-// - `$base-flex-basis-properties`: The base properties and values for the flex basis utility classes.
-// - `$custom-flex-basis-properties`: The custom properties and values 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.
 //
 // Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.

package/src/scss/utilities/gradient/_defaults.scss

@@ -7,11 +7,14 @@
 // Those should be defined as custom properties in the `_variables.scss` file.
 
 @use "../../defaults" as root-defaults;
+@use "../../functions/theme";
+@use "../../theme/color/variables" as color;
 @use "sass:map";
 
 // Utility modifiers.
 $selector-base: root-defaults.$utility-selector-base !default;
 $use-important: root-defaults.$use-important !default;
+$generate-base-utilities: root-defaults.$generate-base-utilities !default;
 $screen-aware: false !default;
 $theme-aware: false !default;
 $state-aware: false !default;
@@ -32,13 +35,25 @@ $gradient-direction-selector-prefix: "" !default;
 $gradient-color-selector-prefix: "" !default;
 $gradient-color-from-selector-prefix: "from-" !default;
 $gradient-color-to-selector-prefix: "to-" !default;
-$base-gradient-types: (
+$-gradient-types: (
   linear: linear-gradient,
   radial: radial-gradient,
 );
 $custom-gradient-types: () !default;
-$gradient-types: map.merge($base-gradient-types, $custom-gradient-types);
-$base-gradient-directions: (
+$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);
+}
+
+$-gradient-directions: (
   to-top: "to top",
   to-right: "to right",
   to-bottom: "to bottom",
@@ -59,12 +74,52 @@ $base-gradient-directions: (
   farthest-corner: farthest-corner,
 );
 $custom-gradient-directions: () !default;
-$gradient-directions: map.merge(
-  $base-gradient-directions,
-  $custom-gradient-directions
-);
-$base-gradient-colors: (
+$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,
 );
+
+// Add the active theme colors to the base gradient colors.
+@each $color in theme.get-colors() {
+  $map: theme.get-color($color);
+
+  @each $shade, $value in $map {
+    $name: null;
+
+    // Handle _default shade vs proper shade mappings.
+    @if $shade == "_default" {
+      $name: #{$color};
+    } @else {
+      $name: #{$color}-#{$shade};
+    }
+
+    $-gradient-colors: map.merge($-gradient-colors, (#{$name}: #{$value}));
+  }
+}
+
 $custom-gradient-colors: () !default;
-$gradient-colors: map.merge($base-gradient-colors, $custom-gradient-colors);
+$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);
+  $gradient-colors: map.merge($-gradient-colors, $gradient-colors);
+}

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

@@ -91,6 +91,7 @@
 // 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.
@@ -109,14 +110,11 @@
 // - `$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.
-// - `$base-gradient-types`: The base properties and values for the gradient type utility classes.
-// - `$custom-gradient-types`: The custom properties and values for the gradient type 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.
-// - `$base-gradient-directions`: The base properties and values for the gradient direction utility classes.
-// - `$custom-gradient-directions`: The custom properties and values for the gradient direction 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.
-// - `$base-gradient-colors`: The base properties and values for the gradient color utility classes.
-// - `$custom-gradient-colors`: The custom properties and values for the gradient color 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.
 //
 // Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.
@@ -228,29 +226,29 @@
   }
 
   // For each theme color, create a utility class for both to and from.
-  @each $color, $map in map.get(color.$themes, active) {
-    @each $shade, $value in $map {
-      // e.g. `.from-primary-500` or `.from-secondary-500`
-      $selector: #{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-from-selector-prefix}#{$color}-#{$shade};
-
-      @include utility.create(
-        $selector,
-        --#{root-defaults.$prefix}gradient-from,
-        $value,
-        $important: defaults.$use-important
-      );
-
-      // e.g. `.to-primary-500` or `.to-secondary-500`
-      $selector: #{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-to-selector-prefix}#{$color}-#{$shade};
-
-      @include utility.create(
-        $selector,
-        --#{root-defaults.$prefix}gradient-to,
-        $value,
-        $important: defaults.$use-important
-      );
-    }
-  }
+  // @each $color, $map in map.get(color.$themes, active) {
+  //   @each $shade, $value in $map {
+  //     // e.g. `.from-primary-500` or `.from-secondary-500`
+  //     $selector: #{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-from-selector-prefix}#{$color}-#{$shade};
+
+  //     @include utility.create(
+  //       $selector,
+  //       --#{root-defaults.$prefix}gradient-from,
+  //       $value,
+  //       $important: defaults.$use-important
+  //     );
+
+  //     // e.g. `.to-primary-500` or `.to-secondary-500`
+  //     $selector: #{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-to-selector-prefix}#{$color}-#{$shade};
+
+  //     @include utility.create(
+  //       $selector,
+  //       --#{root-defaults.$prefix}gradient-to,
+  //       $value,
+  //       $important: defaults.$use-important
+  //     );
+  //   }
+  // }
 
   // Generate screen-aware utilities.
   @if defaults.$screen-aware and root-defaults.$screen-aware-utilities {
@@ -334,31 +332,31 @@
       }
 
       // For each theme color, create a utility class for both to and from.
-      @each $color, $map in map.get(color.$themes, active) {
-        @each $shade, $value in $map {
-          // e.g. `.md:from-primary-500` or `.lg:from-secondary-500`
-          $selector: #{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-from-selector-prefix}#{$color}-#{$shade};
-
-          @include utility.create(
-            $selector,
-            --#{root-defaults.$prefix}gradient-from,
-            $value,
-            $important: defaults.$use-important,
-            $screen: $screen-name
-          );
-
-          // e.g. `.md:to-primary-500` or `.lg:to-secondary-500`
-          $selector: #{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-to-selector-prefix}#{$color}-#{$shade};
-
-          @include utility.create(
-            $selector,
-            --#{root-defaults.$prefix}gradient-to,
-            $value,
-            $important: defaults.$use-important,
-            $screen: $screen-name
-          );
-        }
-      }
+      // @each $color, $map in map.get(color.$themes, active) {
+      //   @each $shade, $value in $map {
+      //     // e.g. `.md:from-primary-500` or `.lg:from-secondary-500`
+      //     $selector: #{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-from-selector-prefix}#{$color}-#{$shade};
+
+      //     @include utility.create(
+      //       $selector,
+      //       --#{root-defaults.$prefix}gradient-from,
+      //       $value,
+      //       $important: defaults.$use-important,
+      //       $screen: $screen-name
+      //     );
+
+      //     // e.g. `.md:to-primary-500` or `.lg:to-secondary-500`
+      //     $selector: #{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-to-selector-prefix}#{$color}-#{$shade};
+
+      //     @include utility.create(
+      //       $selector,
+      //       --#{root-defaults.$prefix}gradient-to,
+      //       $value,
+      //       $important: defaults.$use-important,
+      //       $screen: $screen-name
+      //     );
+      //   }
+      // }
     }
   }
 
@@ -445,31 +443,31 @@
         }
 
         // For each theme color, create a utility class for both to and from.
-        @each $color, $map in map.get(color.$themes, active) {
-          @each $shade, $value in $map {
-            // e.g. `.dark:from-primary-500` or `.light:from-secondary-500`
-            $selector: #{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-from-selector-prefix}#{$color}-#{$shade};
-
-            @include utility.create(
-              $selector,
-              --#{root-defaults.$prefix}gradient-from,
-              $value,
-              $important: defaults.$use-important,
-              $theme: $theme-name
-            );
-
-            // e.g. `.dark:to-primary-500` or `.light:to-secondary-500`
-            $selector: #{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-to-selector-prefix}#{$color}-#{$shade};
-
-            @include utility.create(
-              $selector,
-              --#{root-defaults.$prefix}gradient-to,
-              $value,
-              $important: defaults.$use-important,
-              $theme: $theme-name
-            );
-          }
-        }
+        // @each $color, $map in map.get(color.$themes, active) {
+        //   @each $shade, $value in $map {
+        //     // e.g. `.dark:from-primary-500` or `.light:from-secondary-500`
+        //     $selector: #{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-from-selector-prefix}#{$color}-#{$shade};
+
+        //     @include utility.create(
+        //       $selector,
+        //       --#{root-defaults.$prefix}gradient-from,
+        //       $value,
+        //       $important: defaults.$use-important,
+        //       $theme: $theme-name
+        //     );
+
+        //     // e.g. `.dark:to-primary-500` or `.light:to-secondary-500`
+        //     $selector: #{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-to-selector-prefix}#{$color}-#{$shade};
+
+        //     @include utility.create(
+        //       $selector,
+        //       --#{root-defaults.$prefix}gradient-to,
+        //       $value,
+        //       $important: defaults.$use-important,
+        //       $theme: $theme-name
+        //     );
+        //   }
+        // }
       }
     }
   }
@@ -556,31 +554,31 @@
       }
 
       // For each theme color, create a utility class for both to and from.
-      @each $color, $map in map.get(color.$themes, active) {
-        @each $shade, $value in $map {
-          // e.g. `.hover:from-primary-500` or `.focus:from-secondary-500`
-          $selector: #{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-from-selector-prefix}#{$color}-#{$shade};
-
-          @include utility.create(
-            $selector,
-            --#{root-defaults.$prefix}gradient-from,
-            $value,
-            $important: defaults.$use-important,
-            $state: $state-name
-          );
-
-          // e.g. `.hover:to-primary-500` or `.focus:to-secondary-500`
-          $selector: #{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-to-selector-prefix}#{$color}-#{$shade};
-
-          @include utility.create(
-            $selector,
-            --#{root-defaults.$prefix}gradient-to,
-            $value,
-            $important: defaults.$use-important,
-            $state: $state-name
-          );
-        }
-      }
+      // @each $color, $map in map.get(color.$themes, active) {
+      //   @each $shade, $value in $map {
+      //     // e.g. `.hover:from-primary-500` or `.focus:from-secondary-500`
+      //     $selector: #{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-from-selector-prefix}#{$color}-#{$shade};
+
+      //     @include utility.create(
+      //       $selector,
+      //       --#{root-defaults.$prefix}gradient-from,
+      //       $value,
+      //       $important: defaults.$use-important,
+      //       $state: $state-name
+      //     );
+
+      //     // e.g. `.hover:to-primary-500` or `.focus:to-secondary-500`
+      //     $selector: #{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-to-selector-prefix}#{$color}-#{$shade};
+
+      //     @include utility.create(
+      //       $selector,
+      //       --#{root-defaults.$prefix}gradient-to,
+      //       $value,
+      //       $important: defaults.$use-important,
+      //       $state: $state-name
+      //     );
+      //   }
+      // }
     }
   }
 
@@ -666,31 +664,31 @@
       }
 
       // For each theme color, create a utility class for both to and from.
-      @each $color, $map in map.get(color.$themes, active) {
-        @each $shade, $value in $map {
-          // e.g. `.md:from-primary-500` or `.lg:from-secondary-500`
-          $selector: #{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-from-selector-prefix}#{$color}-#{$shade};
-
-          @include utility.create(
-            $selector,
-            --#{root-defaults.$prefix}gradient-from,
-            $value,
-            $important: defaults.$use-important,
-            $container: $container-name
-          );
-
-          // e.g. `.md:to-primary-500` or `.lg:to-secondary-500`
-          $selector: #{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-to-selector-prefix}#{$color}-#{$shade};
-
-          @include utility.create(
-            $selector,
-            --#{root-defaults.$prefix}gradient-to,
-            $value,
-            $important: defaults.$use-important,
-            $container: $container-name
-          );
-        }
-      }
+      // @each $color, $map in map.get(color.$themes, active) {
+      //   @each $shade, $value in $map {
+      //     // e.g. `.md:from-primary-500` or `.lg:from-secondary-500`
+      //     $selector: #{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-from-selector-prefix}#{$color}-#{$shade};
+
+      //     @include utility.create(
+      //       $selector,
+      //       --#{root-defaults.$prefix}gradient-from,
+      //       $value,
+      //       $important: defaults.$use-important,
+      //       $container: $container-name
+      //     );
+
+      //     // e.g. `.md:to-primary-500` or `.lg:to-secondary-500`
+      //     $selector: #{$selector-prefix}#{defaults.$gradient-color-selector-prefix}#{defaults.$gradient-color-to-selector-prefix}#{$color}-#{$shade};
+
+      //     @include utility.create(
+      //       $selector,
+      //       --#{root-defaults.$prefix}gradient-to,
+      //       $value,
+      //       $important: defaults.$use-important,
+      //       $container: $container-name
+      //     );
+      //   }
+      // }
     }
   }
 }

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

@@ -7,11 +7,13 @@
 // Those should be defined as custom properties in the `_variables.scss` file.
 
 @use "../../defaults" as root-defaults;
+@use "../../variables" as root-variables;
 @use "sass:map";
 
 // Utility modifiers.
 $selector-base: root-defaults.$utility-selector-base !default;
 $use-important: root-defaults.$use-important !default;
+$generate-base-utilities: root-defaults.$generate-base-utilities !default;
 $screen-aware: false !default;
 $theme-aware: false !default;
 $state-aware: false !default;
@@ -31,7 +33,7 @@ $max-height-selector-prefix: "max-h-" !default;
 $min-height-selector-prefix: "min-h-" !default;
 
 // Height values.
-$base-height-values: (
+$-height-values: (
   auto: auto,
   fit-content: fit-content,
   max-content: max-content,
@@ -50,5 +52,28 @@ $base-height-values: (
   three-quarters-screen: 75vh,
   full-screen: 100vh,
 );
+
+// Add the spacer values to the base height values.
+@each $spacer, $value in root-variables.$spacers {
+  $-height-values: map.merge(
+    $-height-values,
+    (
+      $spacer: $value,
+    )
+  );
+}
+
 $custom-height-values: () !default;
-$height-values: map.merge($base-height-values, $custom-height-values);
+$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);
+}