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

package/src/scss/utilities/visibility/_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;
@@ -27,13 +28,27 @@ $container-aware-selector-prefix: root-defaults.$utility-container-aware-selecto
 
 // Visibility properties.
 $visibility-selector-prefix: "visibility-" !default;
-$base-visibility-properties: (
+$-visibility-properties: (
   visible: visible,
   hidden: hidden,
   collapse: collapse,
 );
 $custom-visibility-properties: () !default;
-$visibility-properties: map.merge(
-  $base-visibility-properties,
-  $custom-visibility-properties
-);
+$visibility-properties: () !default;
+
+// @todo remove this once $custom-visibility-properties is removed
+@if $custom-visibility-properties != () {
+  @warn "`$custom-visibility-properties` is deprecated and will be removed in a future release of Graupl. Use `$visibility-properties` instead.";
+
+  $visibility-properties: map.merge(
+    $visibility-properties,
+    $custom-visibility-properties
+  );
+}
+
+@if $generate-base-utilities {
+  $visibility-properties: map.merge(
+    $-visibility-properties,
+    $visibility-properties
+  );
+}

package/src/scss/utilities/visibility/_index.scss

@@ -13,6 +13,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.
@@ -26,8 +27,7 @@
 // - `$state-aware-selector-prefix`: The prefix for state-aware utility classes.
 // - `$container-aware-selector-prefix`: The prefix for container-aware utility classes.
 // - `$visibility-selector-prefix`: The prefix for the visibility utility classes.
-// - `$base-visibility-properties`: The base properties and values for the visibility utility classes.
-// - `$custom-visibility-properties`: The custom properties and values for the visibility utility classes.
+// - `$custom-visibility-properties`: [DEPRECATED] The custom properties and values for the visibility utility classes.
 // - `$visibility-properties`: The combined properties and values for the visibility utility classes.
 //
 // When set to true, screen-aware utility classes will be generated for each screen size in the following pattern:

package/src/scss/utilities/visually-hidden/_defaults.scss

@@ -11,6 +11,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;

package/src/scss/utilities/visually-hidden/_index.scss

@@ -12,6 +12,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.

package/src/scss/utilities/width/_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-width-selector-prefix: "max-w-" !default;
 $min-width-selector-prefix: "min-w-" !default;
 
 // Width values.
-$base-width-values: (
+$-width-values: (
   auto: auto,
   fit-content: fit-content,
   max-content: max-content,
@@ -50,5 +52,28 @@ $base-width-values: (
   three-quarters-screen: 75vw,
   full-screen: 100vw,
 );
+
+// Add the spacer values to the base width values.
+@each $spacer, $value in root-variables.$spacers {
+  $-width-values: map.merge(
+    $-width-values,
+    (
+      $spacer: $value,
+    )
+  );
+}
+
 $custom-width-values: () !default;
-$width-values: map.merge($base-width-values, $custom-width-values);
+$width-values: () !default;
+
+// @todo remove this once $custom-width-values is removed
+@if $custom-width-values != () {
+  @warn "`$custom-width-values` is deprecated and will be removed in a future release of Graupl. Use `$width-values` instead.";
+
+  $width-values: map.merge($width-values, $custom-width-values);
+}
+
+// Merge custom properties with base properties if generating base utilities.
+@if $generate-base-utilities {
+  $width-values: map.merge($-width-values, $width-values);
+}

package/src/scss/utilities/width/_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 @@
 // - `$width-selector-prefix`: The prefix for the width utility classes.
 // - `$max-width-selector-prefix`: The prefix for the max-width utility classes.
 // - `$min-width-selector-prefix`: The prefix for the min-width utility classes.
-// - `$base-width-values`: The base properties and values for the width utility classes.
-// - `$custom-width-values`: The custom properties and values for the width utility classes.
+// - `$custom-width-values`: [DEPRECATED] The custom properties and values for the width utility classes.
 // - `$width-values`: The combined properties and values for the width 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. `.w-1` or `.w-2`
-    $selector: #{$selector-prefix}#{defaults.$width-selector-prefix}#{$spacer};
-
-    @include utility.create(
-      $selector,
-      width,
-      $value,
-      $important: defaults.$use-important
-    );
-
-    // e.g. `.max-w-1` or `.max-w-2`
-    $selector: #{$selector-prefix}#{defaults.$max-width-selector-prefix}#{$spacer};
-
-    @include utility.create(
-      $selector,
-      max-width,
-      $value,
-      $important: defaults.$use-important
-    );
-
-    // e.g. `.min-w-1` or `.min-w-2`
-    $selector: #{$selector-prefix}#{defaults.$min-width-selector-prefix}#{$spacer};
-
-    @include utility.create(
-      $selector,
-      min-width,
-      $value,
-      $important: defaults.$use-important
-    );
-  }
+  // @each $spacer, $value in root-variables.$spacers {
+  //   // e.g. `.w-1` or `.w-2`
+  //   $selector: #{$selector-prefix}#{defaults.$width-selector-prefix}#{$spacer};
+
+  //   @include utility.create(
+  //     $selector,
+  //     width,
+  //     $value,
+  //     $important: defaults.$use-important
+  //   );
+
+  //   // e.g. `.max-w-1` or `.max-w-2`
+  //   $selector: #{$selector-prefix}#{defaults.$max-width-selector-prefix}#{$spacer};
+
+  //   @include utility.create(
+  //     $selector,
+  //     max-width,
+  //     $value,
+  //     $important: defaults.$use-important
+  //   );
+
+  //   // e.g. `.min-w-1` or `.min-w-2`
+  //   $selector: #{$selector-prefix}#{defaults.$min-width-selector-prefix}#{$spacer};
+
+  //   @include utility.create(
+  //     $selector,
+  //     min-width,
+  //     $value,
+  //     $important: defaults.$use-important
+  //   );
+  // }
 
   // Generate screen-aware utilities.
   @if defaults.$screen-aware {
@@ -259,40 +259,40 @@
         );
       }
 
-      @each $spacer, $value in root-variables.$spacers {
-        // e.g. `.md:w-1` or `.lg:w-2`
-        $selector: #{$selector-prefix}#{defaults.$width-selector-prefix}#{$spacer};
-
-        @include utility.create(
-          $selector,
-          width,
-          $value,
-          $important: defaults.$use-important,
-          $screen: $screen-name
-        );
-
-        // e.g. `.md:max-w-1` or `.lg:max-w-2`
-        $selector: #{$selector-prefix}#{defaults.$max-width-selector-prefix}#{$spacer};
-
-        @include utility.create(
-          $selector,
-          max-width,
-          $value,
-          $important: defaults.$use-important,
-          $screen: $screen-name
-        );
-
-        // e.g. `.md:min-w-1` or `.lg:min-w-2`
-        $selector: #{$selector-prefix}#{defaults.$min-width-selector-prefix}#{$spacer};
-
-        @include utility.create(
-          $selector,
-          min-width,
-          $value,
-          $important: defaults.$use-important,
-          $screen: $screen-name
-        );
-      }
+      // @each $spacer, $value in root-variables.$spacers {
+      //   // e.g. `.md:w-1` or `.lg:w-2`
+      //   $selector: #{$selector-prefix}#{defaults.$width-selector-prefix}#{$spacer};
+
+      //   @include utility.create(
+      //     $selector,
+      //     width,
+      //     $value,
+      //     $important: defaults.$use-important,
+      //     $screen: $screen-name
+      //   );
+
+      //   // e.g. `.md:max-w-1` or `.lg:max-w-2`
+      //   $selector: #{$selector-prefix}#{defaults.$max-width-selector-prefix}#{$spacer};
+
+      //   @include utility.create(
+      //     $selector,
+      //     max-width,
+      //     $value,
+      //     $important: defaults.$use-important,
+      //     $screen: $screen-name
+      //   );
+
+      //   // e.g. `.md:min-w-1` or `.lg:min-w-2`
+      //   $selector: #{$selector-prefix}#{defaults.$min-width-selector-prefix}#{$spacer};
+
+      //   @include utility.create(
+      //     $selector,
+      //     min-width,
+      //     $value,
+      //     $important: defaults.$use-important,
+      //     $screen: $screen-name
+      //   );
+      // }
     }
   }
 
@@ -339,40 +339,40 @@
           );
         }
 
-        @each $spacer, $value in root-variables.$spacers {
-          // e.g. `.dark:w-1` or `.light:w-2`
-          $selector: #{$selector-prefix}#{defaults.$width-selector-prefix}#{$spacer};
-
-          @include utility.create(
-            $selector,
-            width,
-            $value,
-            $important: defaults.$use-important,
-            $theme: $theme-name
-          );
-
-          // e.g. `.dark:max-w-1` or `.light:max-w-2`
-          $selector: #{$selector-prefix}#{defaults.$max-width-selector-prefix}#{$spacer};
-
-          @include utility.create(
-            $selector,
-            max-width,
-            $value,
-            $important: defaults.$use-important,
-            $theme: $theme-name
-          );
-
-          // e.g. `.dark:min-w-1` or `.light:min-w-2`
-          $selector: #{$selector-prefix}#{defaults.$min-width-selector-prefix}#{$spacer};
-
-          @include utility.create(
-            $selector,
-            min-width,
-            $value,
-            $important: defaults.$use-important,
-            $theme: $theme-name
-          );
-        }
+        // @each $spacer, $value in root-variables.$spacers {
+        //   // e.g. `.dark:w-1` or `.light:w-2`
+        //   $selector: #{$selector-prefix}#{defaults.$width-selector-prefix}#{$spacer};
+
+        //   @include utility.create(
+        //     $selector,
+        //     width,
+        //     $value,
+        //     $important: defaults.$use-important,
+        //     $theme: $theme-name
+        //   );
+
+        //   // e.g. `.dark:max-w-1` or `.light:max-w-2`
+        //   $selector: #{$selector-prefix}#{defaults.$max-width-selector-prefix}#{$spacer};
+
+        //   @include utility.create(
+        //     $selector,
+        //     max-width,
+        //     $value,
+        //     $important: defaults.$use-important,
+        //     $theme: $theme-name
+        //   );
+
+        //   // e.g. `.dark:min-w-1` or `.light:min-w-2`
+        //   $selector: #{$selector-prefix}#{defaults.$min-width-selector-prefix}#{$spacer};
+
+        //   @include utility.create(
+        //     $selector,
+        //     min-width,
+        //     $value,
+        //     $important: defaults.$use-important,
+        //     $theme: $theme-name
+        //   );
+        // }
       }
     }
   }
@@ -413,34 +413,34 @@
         );
       }
 
-      @each $spacer, $value in root-variables.$spacers {
-        // e.g. `.hover:w-1` or `.focus:w-2`
-        $selector: #{$selector-prefix}#{defaults.$width-selector-prefix}#{$spacer};
-
-        @include utility.create($selector, width, $value, $state: $state-name);
-
-        // e.g. `.hover:max-w-1` or `.focus:max-w-2`
-        $selector: #{$selector-prefix}#{defaults.$max-width-selector-prefix}#{$spacer};
-
-        @include utility.create(
-          $selector,
-          max-width,
-          $value,
-          $important: defaults.$use-important,
-          $state: $state-name
-        );
-
-        // e.g. `.hover:min-w-1` or `.focus:min-w-2`
-        $selector: #{$selector-prefix}#{defaults.$min-width-selector-prefix}#{$spacer};
-
-        @include utility.create(
-          $selector,
-          min-width,
-          $value,
-          $important: defaults.$use-important,
-          $state: $state-name
-        );
-      }
+      // @each $spacer, $value in root-variables.$spacers {
+      //   // e.g. `.hover:w-1` or `.focus:w-2`
+      //   $selector: #{$selector-prefix}#{defaults.$width-selector-prefix}#{$spacer};
+
+      //   @include utility.create($selector, width, $value, $state: $state-name);
+
+      //   // e.g. `.hover:max-w-1` or `.focus:max-w-2`
+      //   $selector: #{$selector-prefix}#{defaults.$max-width-selector-prefix}#{$spacer};
+
+      //   @include utility.create(
+      //     $selector,
+      //     max-width,
+      //     $value,
+      //     $important: defaults.$use-important,
+      //     $state: $state-name
+      //   );
+
+      //   // e.g. `.hover:min-w-1` or `.focus:min-w-2`
+      //   $selector: #{$selector-prefix}#{defaults.$min-width-selector-prefix}#{$spacer};
+
+      //   @include utility.create(
+      //     $selector,
+      //     min-width,
+      //     $value,
+      //     $important: defaults.$use-important,
+      //     $state: $state-name
+      //   );
+      // }
     }
   }
 
@@ -486,40 +486,40 @@
         );
       }
 
-      @each $spacer, $value in root-variables.$spacers {
-        // e.g. `.md:w-1` or `.lg:w-2`
-        $selector: #{$selector-prefix}#{defaults.$width-selector-prefix}#{$spacer};
-
-        @include utility.create(
-          $selector,
-          width,
-          $value,
-          $important: defaults.$use-important,
-          $container: $container-name
-        );
-
-        // e.g. `.md:max-w-1` or `.lg:max-w-2`
-        $selector: #{$selector-prefix}#{defaults.$max-width-selector-prefix}#{$spacer};
-
-        @include utility.create(
-          $selector,
-          max-width,
-          $value,
-          $important: defaults.$use-important,
-          $container: $container-name
-        );
-
-        // e.g. `.md:min-w-1` or `.lg:min-w-2`
-        $selector: #{$selector-prefix}#{defaults.$min-width-selector-prefix}#{$spacer};
-
-        @include utility.create(
-          $selector,
-          min-width,
-          $value,
-          $important: defaults.$use-important,
-          $container: $container-name
-        );
-      }
+      // @each $spacer, $value in root-variables.$spacers {
+      //   // e.g. `.md:w-1` or `.lg:w-2`
+      //   $selector: #{$selector-prefix}#{defaults.$width-selector-prefix}#{$spacer};
+
+      //   @include utility.create(
+      //     $selector,
+      //     width,
+      //     $value,
+      //     $important: defaults.$use-important,
+      //     $container: $container-name
+      //   );
+
+      //   // e.g. `.md:max-w-1` or `.lg:max-w-2`
+      //   $selector: #{$selector-prefix}#{defaults.$max-width-selector-prefix}#{$spacer};
+
+      //   @include utility.create(
+      //     $selector,
+      //     max-width,
+      //     $value,
+      //     $important: defaults.$use-important,
+      //     $container: $container-name
+      //   );
+
+      //   // e.g. `.md:min-w-1` or `.lg:min-w-2`
+      //   $selector: #{$selector-prefix}#{defaults.$min-width-selector-prefix}#{$spacer};
+
+      //   @include utility.create(
+      //     $selector,
+      //     min-width,
+      //     $value,
+      //     $important: defaults.$use-important,
+      //     $container: $container-name
+      //   );
+      // }
     }
   }
 }

package/src/scss/utilities/z-index/_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;
@@ -28,13 +29,24 @@ $container-aware-selector-prefix: root-defaults.$utility-container-aware-selecto
 // Z-index properties.
 
 $z-index-selector-prefix: "z-" !default;
-$base-z-index-properties: (
+$-z-index-properties: (
   "n1": -1,
   0: 0,
   1: 1,
 );
 $custom-z-index-properties: () !default;
-$z-index-properties: map.merge(
-  $base-z-index-properties,
-  $custom-z-index-properties
-);
+$z-index-properties: () !default;
+
+// @todo remove this once $custom-z-index-properties is removed
+@if $custom-z-index-properties != () {
+  @warn "`$custom-z-index-properties` is deprecated and will be removed in a future release of Graupl. Use `$z-index-properties` instead.";
+
+  $z-index-properties: map.merge(
+    $z-index-properties,
+    $custom-z-index-properties
+  );
+}
+
+@if $generate-base-utilities {
+  $z-index-properties: map.merge($-z-index-properties, $z-index-properties);
+}

package/src/scss/utilities/z-index/_index.scss

@@ -13,6 +13,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.
@@ -26,8 +27,7 @@
 // - `$state-aware-selector-prefix`: The prefix for state-aware utility classes.
 // - `$container-aware-selector-prefix`: The prefix for container-aware utility classes.
 // - `$z-index-selector-prefix`: The prefix for the utility classes.
-// - `$base-z-index-properties`: The base properties and values for the z-index utility classes.
-// - `$custom-z-index-properties`: The custom properties and values for the z-index utility classes.
+// - `$custom-z-index-properties`: [DEPRECATED] The custom properties and values for the z-index utility classes.
 // - `$z-index-properties`: The merged properties and values for the z-index utility classes.
 //
 // Generating responsive utility classes can be done by setting `$screen-aware`, `$theme-aware`, or `$state-aware` to `true`.