@graupl/core 1.0.0-beta.15 → 1.0.0-beta.17

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

@@ -94,6 +94,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,8 +110,7 @@
 // - `$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.
-// - `$base-height-values`: The base properties and values for the height utility classes.
-// - `$custom-height-values`: The custom properties and values for the 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.
 //
 // Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.
@@ -185,37 +185,37 @@
     );
   }
 
-  @each $spacer, $value in root-variables.$spacers {
-    // e.g. `.h-1` or `.h-5`
-    $selector: #{$selector-prefix}#{defaults.$height-selector-prefix}#{$spacer};
-
-    @include utility.create(
-      $selector,
-      height,
-      $value,
-      $important: defaults.$use-important
-    );
-
-    // e.g. `.max-h-1` or `.max-h-5`
-    $selector: #{$selector-prefix}#{defaults.$max-height-selector-prefix}#{$spacer};
-
-    @include utility.create(
-      $selector,
-      max-height,
-      $value,
-      $important: defaults.$use-important
-    );
-
-    // e.g. `.min-h-1` or `.min-h-5`
-    $selector: #{$selector-prefix}#{defaults.$min-height-selector-prefix}#{$spacer};
-
-    @include utility.create(
-      $selector,
-      min-height,
-      $value,
-      $important: defaults.$use-important
-    );
-  }
+  // @each $spacer, $value in root-variables.$spacers {
+  //   // e.g. `.h-1` or `.h-5`
+  //   $selector: #{$selector-prefix}#{defaults.$height-selector-prefix}#{$spacer};
+
+  //   @include utility.create(
+  //     $selector,
+  //     height,
+  //     $value,
+  //     $important: defaults.$use-important
+  //   );
+
+  //   // e.g. `.max-h-1` or `.max-h-5`
+  //   $selector: #{$selector-prefix}#{defaults.$max-height-selector-prefix}#{$spacer};
+
+  //   @include utility.create(
+  //     $selector,
+  //     max-height,
+  //     $value,
+  //     $important: defaults.$use-important
+  //   );
+
+  //   // e.g. `.min-h-1` or `.min-h-5`
+  //   $selector: #{$selector-prefix}#{defaults.$min-height-selector-prefix}#{$spacer};
+
+  //   @include utility.create(
+  //     $selector,
+  //     min-height,
+  //     $value,
+  //     $important: defaults.$use-important
+  //   );
+  // }
 
   // Generate screen-aware utilities.
   @if defaults.$screen-aware and root-defaults.$screen-aware-utilities {
@@ -259,40 +259,40 @@
         );
       }
 
-      @each $spacer, $value in root-variables.$spacers {
-        // e.g. `.md:h-1` or `.lg:h-5`
-        $selector: #{$selector-prefix}#{defaults.$height-selector-prefix}#{$spacer};
-
-        @include utility.create(
-          $selector,
-          height,
-          $value,
-          $important: defaults.$use-important,
-          $screen: $screen-name
-        );
-
-        // e.g. `.md:max-h-1` or `.lg:max-h-5`
-        $selector: #{$selector-prefix}#{defaults.$max-height-selector-prefix}#{$spacer};
-
-        @include utility.create(
-          $selector,
-          max-height,
-          $value,
-          $important: defaults.$use-important,
-          $screen: $screen-name
-        );
-
-        // e.g. `.md:min-h-1` or `.lg:min-h-5`
-        $selector: #{$selector-prefix}#{defaults.$min-height-selector-prefix}#{$spacer};
-
-        @include utility.create(
-          $selector,
-          min-height,
-          $value,
-          $important: defaults.$use-important,
-          $screen: $screen-name
-        );
-      }
+      // @each $spacer, $value in root-variables.$spacers {
+      //   // e.g. `.md:h-1` or `.lg:h-5`
+      //   $selector: #{$selector-prefix}#{defaults.$height-selector-prefix}#{$spacer};
+
+      //   @include utility.create(
+      //     $selector,
+      //     height,
+      //     $value,
+      //     $important: defaults.$use-important,
+      //     $screen: $screen-name
+      //   );
+
+      //   // e.g. `.md:max-h-1` or `.lg:max-h-5`
+      //   $selector: #{$selector-prefix}#{defaults.$max-height-selector-prefix}#{$spacer};
+
+      //   @include utility.create(
+      //     $selector,
+      //     max-height,
+      //     $value,
+      //     $important: defaults.$use-important,
+      //     $screen: $screen-name
+      //   );
+
+      //   // e.g. `.md:min-h-1` or `.lg:min-h-5`
+      //   $selector: #{$selector-prefix}#{defaults.$min-height-selector-prefix}#{$spacer};
+
+      //   @include utility.create(
+      //     $selector,
+      //     min-height,
+      //     $value,
+      //     $important: defaults.$use-important,
+      //     $screen: $screen-name
+      //   );
+      // }
     }
   }
 
@@ -339,40 +339,40 @@
           );
         }
 
-        @each $spacer, $value in root-variables.$spacers {
-          // e.g. `.dark:h-1` or `.light:h-5`
-          $selector: #{$selector-prefix}#{defaults.$height-selector-prefix}#{$spacer};
-
-          @include utility.create(
-            $selector,
-            height,
-            $value,
-            $important: defaults.$use-important,
-            $theme: $theme-name
-          );
-
-          // e.g. `.dark:max-h-1` or `.light:max-h-5`
-          $selector: #{$selector-prefix}#{defaults.$max-height-selector-prefix}#{$spacer};
-
-          @include utility.create(
-            $selector,
-            max-height,
-            $value,
-            $important: defaults.$use-important,
-            $theme: $theme-name
-          );
-
-          // e.g. `.dark:min-h-1` or `.light:min-h-5`
-          $selector: #{$selector-prefix}#{defaults.$min-height-selector-prefix}#{$spacer};
-
-          @include utility.create(
-            $selector,
-            min-height,
-            $value,
-            $important: defaults.$use-important,
-            $theme: $theme-name
-          );
-        }
+        // @each $spacer, $value in root-variables.$spacers {
+        //   // e.g. `.dark:h-1` or `.light:h-5`
+        //   $selector: #{$selector-prefix}#{defaults.$height-selector-prefix}#{$spacer};
+
+        //   @include utility.create(
+        //     $selector,
+        //     height,
+        //     $value,
+        //     $important: defaults.$use-important,
+        //     $theme: $theme-name
+        //   );
+
+        //   // e.g. `.dark:max-h-1` or `.light:max-h-5`
+        //   $selector: #{$selector-prefix}#{defaults.$max-height-selector-prefix}#{$spacer};
+
+        //   @include utility.create(
+        //     $selector,
+        //     max-height,
+        //     $value,
+        //     $important: defaults.$use-important,
+        //     $theme: $theme-name
+        //   );
+
+        //   // e.g. `.dark:min-h-1` or `.light:min-h-5`
+        //   $selector: #{$selector-prefix}#{defaults.$min-height-selector-prefix}#{$spacer};
+
+        //   @include utility.create(
+        //     $selector,
+        //     min-height,
+        //     $value,
+        //     $important: defaults.$use-important,
+        //     $theme: $theme-name
+        //   );
+        // }
       }
     }
   }
@@ -388,39 +388,16 @@
         // e.g. `.hover:h-min-content` or `.focus:h-fit-content`
         $selector: #{$selector-prefix}#{defaults.$height-selector-prefix}#{$height};
 
-        @include utility.create($selector, height, $value, $state: $state-name);
-
-        // e.g. `.hover:max-h-min-content` or `.focus:max-h-fit-content`
-        $selector: #{$selector-prefix}#{defaults.$max-height-selector-prefix}#{$height};
-
         @include utility.create(
           $selector,
-          max-height,
-          $value,
-          $important: defaults.$use-important,
-          $state: $state-name
-        );
-
-        // e.g. `.hover:min-h-min-content` or `.focus:min-h-fit-content`
-        $selector: #{$selector-prefix}#{defaults.$min-height-selector-prefix}#{$height};
-
-        @include utility.create(
-          $selector,
-          min-height,
+          height,
           $value,
           $important: defaults.$use-important,
           $state: $state-name
         );
-      }
-
-      @each $spacer, $value in root-variables.$spacers {
-        // e.g. `.hover:h-1` or `.focus:h-5`
-        $selector: #{$selector-prefix}#{defaults.$height-selector-prefix}#{$spacer};
-
-        @include utility.create($selector, height, $value, $state: $state-name);
 
-        // e.g. `.hover:max-h-1` or `.focus:max-h-5`
-        $selector: #{$selector-prefix}#{defaults.$max-height-selector-prefix}#{$spacer};
+        // e.g. `.hover:max-h-min-content` or `.focus:max-h-fit-content`
+        $selector: #{$selector-prefix}#{defaults.$max-height-selector-prefix}#{$height};
 
         @include utility.create(
           $selector,
@@ -430,8 +407,8 @@
           $state: $state-name
         );
 
-        // e.g. `.hover:min-h-1` or `.focus:min-h-5`
-        $selector: #{$selector-prefix}#{defaults.$min-height-selector-prefix}#{$spacer};
+        // e.g. `.hover:min-h-min-content` or `.focus:min-h-fit-content`
+        $selector: #{$selector-prefix}#{defaults.$min-height-selector-prefix}#{$height};
 
         @include utility.create(
           $selector,
@@ -441,6 +418,35 @@
           $state: $state-name
         );
       }
+
+      // @each $spacer, $value in root-variables.$spacers {
+      //   // e.g. `.hover:h-1` or `.focus:h-5`
+      //   $selector: #{$selector-prefix}#{defaults.$height-selector-prefix}#{$spacer};
+
+      //   @include utility.create($selector, height, $value, $state: $state-name);
+
+      //   // e.g. `.hover:max-h-1` or `.focus:max-h-5`
+      //   $selector: #{$selector-prefix}#{defaults.$max-height-selector-prefix}#{$spacer};
+
+      //   @include utility.create(
+      //     $selector,
+      //     max-height,
+      //     $value,
+      //     $important: defaults.$use-important,
+      //     $state: $state-name
+      //   );
+
+      //   // e.g. `.hover:min-h-1` or `.focus:min-h-5`
+      //   $selector: #{$selector-prefix}#{defaults.$min-height-selector-prefix}#{$spacer};
+
+      //   @include utility.create(
+      //     $selector,
+      //     min-height,
+      //     $value,
+      //     $important: defaults.$use-important,
+      //     $state: $state-name
+      //   );
+      // }
     }
   }
 
@@ -486,40 +492,40 @@
         );
       }
 
-      @each $spacer, $value in root-variables.$spacers {
-        // e.g. `.md:h-1` or `.lg:h-5`
-        $selector: #{$selector-prefix}#{defaults.$height-selector-prefix}#{$spacer};
-
-        @include utility.create(
-          $selector,
-          height,
-          $value,
-          $important: defaults.$use-important,
-          $container: $container-name
-        );
-
-        // e.g. `.md:max-h-1` or `.lg:max-h-5`
-        $selector: #{$selector-prefix}#{defaults.$max-height-selector-prefix}#{$spacer};
-
-        @include utility.create(
-          $selector,
-          max-height,
-          $value,
-          $important: defaults.$use-important,
-          $container: $container-name
-        );
-
-        // e.g. `.md:min-h-1` or `.lg:min-h-5`
-        $selector: #{$selector-prefix}#{defaults.$min-height-selector-prefix}#{$spacer};
-
-        @include utility.create(
-          $selector,
-          min-height,
-          $value,
-          $important: defaults.$use-important,
-          $container: $container-name
-        );
-      }
+      // @each $spacer, $value in root-variables.$spacers {
+      //   // e.g. `.md:h-1` or `.lg:h-5`
+      //   $selector: #{$selector-prefix}#{defaults.$height-selector-prefix}#{$spacer};
+
+      //   @include utility.create(
+      //     $selector,
+      //     height,
+      //     $value,
+      //     $important: defaults.$use-important,
+      //     $container: $container-name
+      //   );
+
+      //   // e.g. `.md:max-h-1` or `.lg:max-h-5`
+      //   $selector: #{$selector-prefix}#{defaults.$max-height-selector-prefix}#{$spacer};
+
+      //   @include utility.create(
+      //     $selector,
+      //     max-height,
+      //     $value,
+      //     $important: defaults.$use-important,
+      //     $container: $container-name
+      //   );
+
+      //   // e.g. `.md:min-h-1` or `.lg:min-h-5`
+      //   $selector: #{$selector-prefix}#{defaults.$min-height-selector-prefix}#{$spacer};
+
+      //   @include utility.create(
+      //     $selector,
+      //     min-height,
+      //     $value,
+      //     $important: defaults.$use-important,
+      //     $container: $container-name
+      //   );
+      // }
     }
   }
 }

package/src/scss/utilities/inset/_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: true !default;
 $theme-aware: false !default;
 $state-aware: false !default;
@@ -26,7 +27,7 @@ $state-aware-selector-prefix: root-defaults.$utility-state-aware-selector-prefix
 $container-aware-selector-prefix: root-defaults.$utility-container-aware-selector-prefix !default;
 
 // Inset properties.
-$base-inset-properties: (
+$-inset-properties: (
   inset: inset,
   inset-x: left right,
   inset-y: top bottom,
@@ -38,10 +39,17 @@ $base-inset-properties: (
   left: left,
 );
 $custom-inset-properties: () !default;
-$inset-properties: map.merge($base-inset-properties, $custom-inset-properties);
+$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.
-$base-inset-values: (
+$-inset-values: (
   0: 0,
   auto: auto,
   full: 100%,
@@ -52,4 +60,17 @@ $base-inset-values: (
   two-thirds: calc(100% / 1.5),
 );
 $custom-inset-values: () !default;
-$inset-values: map.merge($base-inset-values, $custom-inset-values);
+$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);
+  $inset-values: map.merge($-inset-values, $inset-values);
+}

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

@@ -82,6 +82,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.
@@ -94,11 +95,9 @@
 // - `$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.
-// - `$base-inset-properties`: The base properties and values for the inset utility classes.
-// - `$custom-inset-properties`: Additional properties and values for the inset 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.
-// - `$base-inset-values`: The base inset values.
-// - `$custom-inset-values`: Additional inset values.
+// - `$custom-inset-values`: [DEPRECATED] Additional inset values.
 // - `$inset-values`: The combined inset values.
 //
 // Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.

package/src/scss/utilities/justification/_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,7 +28,7 @@ $container-aware-selector-prefix: root-defaults.$utility-container-aware-selecto
 
 // Justify content properties.
 $justify-content-selector-prefix: "justify-content-" !default;
-$base-justify-content-properties: (
+$-justify-content-properties: (
   normal: normal,
   start: flex-start,
   end: flex-end,
@@ -38,28 +39,42 @@ $base-justify-content-properties: (
   stretch: stretch,
 );
 $custom-justify-content-properties: () !default;
-$justify-content-properties: map.merge(
-  $base-justify-content-properties,
-  $custom-justify-content-properties
-);
+$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;
-$base-justify-items-properties: (
+$-justify-items-properties: (
   start: start,
   end: end,
   center: center,
   stretch: stretch,
 );
 $custom-justify-items-properties: () !default;
-$justify-items-properties: map.merge(
-  $base-justify-items-properties,
-  $custom-justify-items-properties
-);
+$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;
-$base-justify-self-properties: (
+$-justify-self-properties: (
   auto: auto,
   start: start,
   end: end,
@@ -67,7 +82,30 @@ $base-justify-self-properties: (
   stretch: stretch,
 );
 $custom-justify-self-properties: () !default;
-$justify-self-properties: map.merge(
-  $base-justify-self-properties,
-  $custom-justify-self-properties
-);
+$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(
+    $-justify-content-properties,
+    $justify-content-properties
+  );
+  $justify-items-properties: map.merge(
+    $-justify-items-properties,
+    $justify-items-properties
+  );
+  $justify-self-properties: map.merge(
+    $-justify-self-properties,
+    $justify-self-properties
+  );
+}

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

@@ -27,6 +27,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.
@@ -40,16 +41,13 @@
 // - `$state-aware-selector-prefix`: The prefix for state-aware utility classes.
 // - `$container-aware-selector-prefix`: The prefix for container-aware utility classes.
 // - `$justify-content-selector-prefix`: The prefix for the justify-content utility classes.
-// - `$base-justify-content-properties`: The base properties and values for justify-content.
-// - `$custom-justify-content-properties`: The custom properties and values for justify-content.
+// - `$custom-justify-content-properties`: [DEPRECATED] The custom properties and values for justify-content.
 // - `$justify-content-properties`: The combined properties and values for justify-content.
 // - `$justify-items-selector-prefix`: The prefix for the justify-items utility classes.
-// - `$base-justify-items-properties`: The base properties and values for justify-items.
-// - `$custom-justify-items-properties`: The custom properties and values for justify-items.
+// - `$custom-justify-items-properties`: [DEPRECATED] The custom properties and values for justify-items.
 // - `$justify-items-properties`: The combined properties and values for justify-items.
 // - `$justify-self-selector-prefix`: The prefix for the justify-self utility classes.
-// - `$base-justify-self-properties`: The base properties and values for justify-self.
-// - `$custom-justify-self-properties`: The custom properties and values for justify-self.
+// - `$custom-justify-self-properties`: [DEPRECATED] The custom properties and values for justify-self.
 // - `$justify-self-properties`: The combined properties and values for justify-self.
 //
 // Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.