@graupl/graupl 1.0.0-beta.0 → 1.0.0-beta.2

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

@@ -9,7 +9,7 @@
 @use "sass:map";
 
 // Flex direction properties.
-$flex-direction-class-prefix: "flex-" !default;
+$flex-direction-selector-prefix: "flex-" !default;
 $base-flex-direction-properties: (
   row: row,
   row-reverse: row-reverse,
@@ -23,7 +23,7 @@ $flex-direction-properties: map.merge(
 );
 
 // Flex wrap properties.
-$flex-wrap-class-prefix: "flex-" !default;
+$flex-wrap-selector-prefix: "flex-" !default;
 $base-flex-wrap-properties: (
   wrap: wrap,
   wrap-reverse: wrap-reverse,
@@ -36,7 +36,7 @@ $flex-wrap-properties: map.merge(
 );
 
 // Flex grow properties.
-$flex-grow-class-prefix: "flex-" !default;
+$flex-grow-selector-prefix: "flex-" !default;
 $base-flex-grow-properties: (
   grow: 1,
   no-grow: 0,
@@ -48,7 +48,7 @@ $flex-grow-properties: map.merge(
 );
 
 // Flex shrink properties.
-$flex-shrink-class-prefix: "flex-" !default;
+$flex-shrink-selector-prefix: "flex-" !default;
 $base-flex-shrink-properties: (
   shrink: 1,
   no-shrink: 0,
@@ -59,5 +59,29 @@ $flex-shrink-properties: map.merge(
   $custom-flex-shrink-properties
 );
 
-// Responsive utility flag.
-$responsive: false !default;
+// Flex basis properties.
+$flex-basis-selector-prefix: "flex-" !default;
+$base-flex-basis-properties: (
+  auto: auto,
+  fit-content: fit-content,
+  max-content: max-content,
+  min-content: min-content,
+  content: content,
+  0: 0,
+  full: 100%,
+  quarter: 25%,
+  half: 50%,
+  three-quarters: 75%,
+  third: calc(100% / 3),
+  two-thirds: calc(100% / 1.5),
+);
+$custom-flex-basis-properties: () !default;
+$flex-basis-properties: map.merge(
+  $base-flex-basis-properties,
+  $custom-flex-basis-properties
+);
+
+// Utility modifier flags.
+$screen-aware: false !default;
+$theme-aware: false !default;
+$state-aware: false !default;

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

@@ -7,63 +7,247 @@
 @use "../../functions/important";
 @use "../../mixins/layer" as *;
 @use "../../mixins/utility";
+@use "../../theme/color/variables" as color;
 @use "defaults";
 @use "sass:map";
 @use "variables" as *;
 
 @include layer(utilities) {
+  $selector-prefix: root-defaults.$utility-selector-prefix;
+
   // For each flex direction property, create a utility class.
   @each $name, $property in defaults.$flex-direction-properties {
-    @include utility.create(
-      ".#{defaults.$flex-direction-class-prefix}#{$name}",
-      flex-direction,
-      $property
-    );
-    @include utility.create(
-      ".#{defaults.$flex-wrap-class-prefix}#{$name}",
-      flex-wrap,
-      $property
-    );
-    @include utility.create(
-      ".#{defaults.$flex-grow-class-prefix}#{$name}",
-      flex-grow,
-      $property
-    );
-    @include utility.create(
-      ".#{defaults.$flex-shrink-class-prefix}#{$name}",
-      flex-shrink,
-      $property
-    );
+    $selector: "#{$selector-prefix}#{defaults.$flex-direction-selector-prefix}#{$name}";
+
+    @include utility.create($selector, flex-direction, $property);
+  }
+
+  // For each flex wrap property, create a utility class.
+  @each $name, $property in defaults.$flex-wrap-properties {
+    $selector: "#{$selector-prefix}#{defaults.$flex-wrap-selector-prefix}#{$name}";
+
+    @include utility.create($selector, flex-wrap, $property);
+  }
+
+  // For each flex grow property, create a utility class.
+  @each $name, $property in defaults.$flex-grow-properties {
+    $selector: "#{$selector-prefix}#{defaults.$flex-grow-selector-prefix}#{$name}";
+
+    @include utility.create($selector, flex-grow, $property);
+  }
+
+  // For each flex shrink property, create a utility class.
+  @each $name, $property in defaults.$flex-shrink-properties {
+    $selector: "#{$selector-prefix}#{defaults.$flex-shrink-selector-prefix}#{$name}";
+
+    @include utility.create($selector, flex-shrink, $property);
+  }
+
+  // For each flex basis property, create a utility class.
+  @each $name, $property in defaults.$flex-basis-properties {
+    $selector: "#{$selector-prefix}#{defaults.$flex-basis-selector-prefix}#{$name}";
+
+    @include utility.create($selector, flex-basis, $property);
+  }
+
+  // Generate screen-aware utilities.
+  @if defaults.$screen-aware and root-defaults.$screen-aware-utilities {
+    @each $screen-name in map.keys(root-defaults.$screen-sizes) {
+      $selector-prefix: "#{root-defaults.$utility-selector-prefix}#{$screen-name}#{root-defaults.$utility-screen-aware-separator}";
+
+      // For each flex direction property, create a utility class.
+      @each $name, $property in defaults.$flex-direction-properties {
+        $selector: "#{$selector-prefix}#{defaults.$flex-direction-selector-prefix}#{$name}";
+
+        @include utility.create(
+          $selector,
+          flex-direction,
+          $property,
+          $screen: $screen-name
+        );
+      }
+
+      // For each flex wrap property, create a utility class.
+      @each $name, $property in defaults.$flex-wrap-properties {
+        $selector: "#{$selector-prefix}#{defaults.$flex-wrap-selector-prefix}#{$name}";
+
+        @include utility.create(
+          $selector,
+          flex-wrap,
+          $property,
+          $screen: $screen-name
+        );
+      }
+
+      // For each flex grow property, create a utility class.
+      @each $name, $property in defaults.$flex-grow-properties {
+        $selector: "#{$selector-prefix}#{defaults.$flex-grow-selector-prefix}#{$name}";
+
+        @include utility.create(
+          $selector,
+          flex-grow,
+          $property,
+          $screen: $screen-name
+        );
+      }
+
+      // For each flex shrink property, create a utility class.
+      @each $name, $property in defaults.$flex-shrink-properties {
+        $selector: "#{$selector-prefix}#{defaults.$flex-shrink-selector-prefix}#{$name}";
+
+        @include utility.create(
+          $selector,
+          flex-shrink,
+          $property,
+          $screen: $screen-name
+        );
+      }
+
+      // For each flex basis property, create a utility class.
+      @each $name, $property in defaults.$flex-basis-properties {
+        $selector: "#{$selector-prefix}#{defaults.$flex-basis-selector-prefix}#{$name}";
+
+        @include utility.create(
+          $selector,
+          flex-basis,
+          $property,
+          $screen: $screen-name
+        );
+      }
+    }
+  }
+
+  // Generate theme-aware utilities.
+  @if defaults.$theme-aware and root-defaults.$theme-aware-utilities {
+    @each $theme-name, $colors in color.$themes {
+      @if $theme-name != active {
+        $selector-prefix: "#{root-defaults.$utility-selector-prefix}#{$theme-name}#{root-defaults.$utility-theme-aware-separator}";
+
+        // For each flex direction property, create a utility class.
+        @each $name, $property in defaults.$flex-direction-properties {
+          $selector: "#{$selector-prefix}#{defaults.$flex-direction-selector-prefix}#{$name}";
+
+          @include utility.create(
+            $selector,
+            flex-direction,
+            $property,
+            $theme: $theme-name
+          );
+        }
+
+        // For each flex wrap property, create a utility class.
+        @each $name, $property in defaults.$flex-wrap-properties {
+          $selector: "#{$selector-prefix}#{defaults.$flex-wrap-selector-prefix}#{$name}";
+
+          @include utility.create(
+            $selector,
+            flex-wrap,
+            $property,
+            $theme: $theme-name
+          );
+        }
+
+        // For each flex grow property, create a utility class.
+        @each $name, $property in defaults.$flex-grow-properties {
+          $selector: "#{$selector-prefix}#{defaults.$flex-grow-selector-prefix}#{$name}";
+
+          @include utility.create(
+            $selector,
+            flex-grow,
+            $property,
+            $theme: $theme-name
+          );
+        }
+
+        // For each flex shrink property, create a utility class.
+        @each $name, $property in defaults.$flex-shrink-properties {
+          $selector: "#{$selector-prefix}#{defaults.$flex-shrink-selector-prefix}#{$name}";
+
+          @include utility.create(
+            $selector,
+            flex-shrink,
+            $property,
+            $theme: $theme-name
+          );
+        }
+
+        // For each flex basis property, create a utility class.
+        @each $name, $property in defaults.$flex-basis-properties {
+          $selector: "#{$selector-prefix}#{defaults.$flex-basis-selector-prefix}#{$name}";
+
+          @include utility.create(
+            $selector,
+            flex-basis,
+            $property,
+            $theme: $theme-name
+          );
+        }
+      }
+    }
   }
 
-  // Create responsive utilities.
-  @if defaults.$responsive and root-defaults.$responsive-utilities {
-    @each $screen-size in map.keys(root-defaults.$screen-sizes) {
+  // Generate state-aware utilities.
+  @if defaults.$state-aware and root-defaults.$state-aware-utilities {
+    @each $state-name, $value in root-defaults.$state-selectors {
+      $selector-prefix: "#{root-defaults.$utility-selector-prefix}#{$state-name}#{root-defaults.$utility-state-aware-separator}";
+
       // For each flex direction property, create a utility class.
       @each $name, $property in defaults.$flex-direction-properties {
+        $selector: "#{$selector-prefix}#{defaults.$flex-direction-selector-prefix}#{$name}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$flex-direction-class-prefix}#{$name}",
+          $selector,
           flex-direction,
           $property,
-          $screen-size
+          $state: $state-name
         );
+      }
+
+      // For each flex wrap property, create a utility class.
+      @each $name, $property in defaults.$flex-wrap-properties {
+        $selector: "#{$selector-prefix}#{defaults.$flex-wrap-selector-prefix}#{$name}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$flex-wrap-class-prefix}#{$name}",
+          $selector,
           flex-wrap,
           $property,
-          $screen-size
+          $state: $state-name
         );
+      }
+
+      // For each flex grow property, create a utility class.
+      @each $name, $property in defaults.$flex-grow-properties {
+        $selector: "#{$selector-prefix}#{defaults.$flex-grow-selector-prefix}#{$name}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$flex-grow-class-prefix}#{$name}",
+          $selector,
           flex-grow,
           $property,
-          $screen-size
+          $state: $state-name
         );
+      }
+
+      // For each flex shrink property, create a utility class.
+      @each $name, $property in defaults.$flex-shrink-properties {
+        $selector: "#{$selector-prefix}#{defaults.$flex-shrink-selector-prefix}#{$name}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$flex-shrink-class-prefix}#{$name}",
+          $selector,
           flex-shrink,
           $property,
-          $screen-size
+          $state: $state-name
+        );
+      }
+
+      // For each flex basis property, create a utility class.
+      @each $name, $property in defaults.$flex-basis-properties {
+        $selector: "#{$selector-prefix}#{defaults.$flex-basis-selector-prefix}#{$name}";
+
+        @include utility.create(
+          $selector,
+          flex-basis,
+          $property,
+          $state: $state-name
         );
       }
     }

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

@@ -9,9 +9,9 @@
 @use "sass:map";
 
 // Height properties.
-$height-class-prefix: "h-" !default;
-$max-height-class-prefix: "max-h-" !default;
-$min-height-class-prefix: "min-h-" !default;
+$height-selector-prefix: "h-" !default;
+$max-height-selector-prefix: "max-h-" !default;
+$min-height-selector-prefix: "min-h-" !default;
 
 // Height values.
 $base-height-values: (
@@ -37,5 +37,7 @@ $base-height-values: (
 $custom-height-values: () !default;
 $height-values: map.merge($base-height-values, $custom-height-values);
 
-// Responsive utility flag.
-$responsive: false !default;
+// Utility modifier flags.
+$screen-aware: false !default;
+$theme-aware: false !default;
+$state-aware: false !default;

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

@@ -6,91 +6,229 @@
 @use "../../defaults" as root-defaults;
 @use "../../mixins/layer" as *;
 @use "../../mixins/utility";
+@use "../../theme/color/variables" as color;
 @use "../../variables" as root-variables;
 @use "defaults";
 @use "sass:map";
 @use "variables" as *;
 
 @include layer(utilities) {
+  $selector-prefix: root-defaults.$utility-selector-prefix;
+
   // For each height property, create a utility class.
   @each $height, $value in defaults.$height-values {
-    @include utility.create(
-      ".#{defaults.$height-class-prefix}#{$height}",
-      height,
-      $value
-    );
-    @include utility.create(
-      ".#{defaults.$max-height-class-prefix}#{$height}",
-      max-height,
-      $value
-    );
-    @include utility.create(
-      ".#{defaults.$min-height-class-prefix}#{$height}",
-      min-height,
-      $value
-    );
+    $selector: "#{$selector-prefix}#{defaults.$height-selector-prefix}#{$height}";
+
+    @include utility.create($selector, height, $value);
+
+    $selector: "#{$selector-prefix}#{defaults.$max-height-selector-prefix}#{$height}";
+
+    @include utility.create($selector, max-height, $value);
+
+    $selector: "#{$selector-prefix}#{defaults.$min-height-selector-prefix}#{$height}";
+
+    @include utility.create($selector, min-height, $value);
   }
 
   @each $spacer, $value in root-variables.$spacers {
-    @include utility.create(
-      ".#{defaults.$height-class-prefix}#{$spacer}",
-      height,
-      $value
-    );
-    @include utility.create(
-      ".#{defaults.$max-height-class-prefix}#{$spacer}",
-      max-height,
-      $value
-    );
-    @include utility.create(
-      ".#{defaults.$min-height-class-prefix}#{$spacer}",
-      min-height,
-      $value
-    );
+    $selector: "#{$selector-prefix}#{defaults.$height-selector-prefix}#{$spacer}";
+
+    @include utility.create($selector, height, $value);
+
+    $selector: "#{$selector-prefix}#{defaults.$max-height-selector-prefix}#{$spacer}";
+
+    @include utility.create($selector, max-height, $value);
+
+    $selector: "#{$selector-prefix}#{defaults.$min-height-selector-prefix}#{$spacer}";
+
+    @include utility.create($selector, min-height, $value);
   }
 
-  // Create responsive utilities.
-  @if defaults.$responsive and root-defaults.$responsive-utilities {
-    @each $screen-size in map.keys(root-defaults.$screen-sizes) {
+  // Generate screen-aware utilities.
+  @if defaults.$screen-aware and root-defaults.$screen-aware-utilities {
+    @each $screen-name in map.keys(root-defaults.$screen-sizes) {
+      $selector-prefix: "#{root-defaults.$utility-selector-prefix}#{$screen-name}#{root-defaults.$utility-screen-aware-separator}";
+
+      // For each height property, create a utility class.
       @each $height, $value in defaults.$height-values {
+        $selector: "#{$selector-prefix}#{defaults.$height-selector-prefix}#{$height}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$height-class-prefix}#{$height}",
+          $selector,
           height,
           $value,
-          $screen-size
+          $screen: $screen-name
         );
+
+        $selector: "#{$selector-prefix}#{defaults.$max-height-selector-prefix}#{$height}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$max-height-class-prefix}#{$height}",
+          $selector,
           max-height,
           $value,
-          $screen-size
+          $screen: $screen-name
         );
+
+        $selector: "#{$selector-prefix}#{defaults.$min-height-selector-prefix}#{$height}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$min-height-class-prefix}#{$height}",
+          $selector,
           min-height,
           $value,
-          $screen-size
+          $screen: $screen-name
         );
       }
 
       @each $spacer, $value in root-variables.$spacers {
+        $selector: "#{$selector-prefix}#{defaults.$height-selector-prefix}#{$spacer}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$height-class-prefix}#{$spacer}",
+          $selector,
           height,
           $value,
-          $screen-size
+          $screen: $screen-name
         );
+
+        $selector: "#{$selector-prefix}#{defaults.$max-height-selector-prefix}#{$spacer}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$max-height-class-prefix}#{$spacer}",
+          $selector,
           max-height,
           $value,
-          $screen-size
+          $screen: $screen-name
         );
+
+        $selector: "#{$selector-prefix}#{defaults.$min-height-selector-prefix}#{$spacer}";
+
+        @include utility.create(
+          $selector,
+          min-height,
+          $value,
+          $screen: $screen-name
+        );
+      }
+    }
+  }
+
+  // Generate theme-aware utilities.
+  @if defaults.$theme-aware and root-defaults.$theme-aware-utilities {
+    @each $theme-name, $colors in color.$themes {
+      @if $theme-name != active {
+        $selector-prefix: "#{root-defaults.$utility-selector-prefix}#{$theme-name}#{root-defaults.$utility-theme-aware-separator}";
+
+        // For each height property, create a utility class.
+        @each $height, $value in defaults.$height-values {
+          $selector: "#{$selector-prefix}#{defaults.$height-selector-prefix}#{$height}";
+
+          @include utility.create(
+            $selector,
+            height,
+            $value,
+            $theme: $theme-name
+          );
+
+          $selector: "#{$selector-prefix}#{defaults.$max-height-selector-prefix}#{$height}";
+
+          @include utility.create(
+            $selector,
+            max-height,
+            $value,
+            $theme: $theme-name
+          );
+
+          $selector: "#{$selector-prefix}#{defaults.$min-height-selector-prefix}#{$height}";
+
+          @include utility.create(
+            $selector,
+            min-height,
+            $value,
+            $theme: $theme-name
+          );
+        }
+
+        @each $spacer, $value in root-variables.$spacers {
+          $selector: "#{$selector-prefix}#{defaults.$height-selector-prefix}#{$spacer}";
+
+          @include utility.create(
+            $selector,
+            height,
+            $value,
+            $theme: $theme-name
+          );
+
+          $selector: "#{$selector-prefix}#{defaults.$max-height-selector-prefix}#{$spacer}";
+
+          @include utility.create(
+            $selector,
+            max-height,
+            $value,
+            $theme: $theme-name
+          );
+
+          $selector: "#{$selector-prefix}#{defaults.$min-height-selector-prefix}#{$spacer}";
+
+          @include utility.create(
+            $selector,
+            min-height,
+            $value,
+            $theme: $theme-name
+          );
+        }
+      }
+    }
+  }
+
+  // Generate state-aware utilities.
+  @if defaults.$state-aware and root-defaults.$state-aware-utilities {
+    @each $state-name, $value in root-defaults.$state-selectors {
+      $selector-prefix: "#{root-defaults.$utility-selector-prefix}#{$state-name}#{root-defaults.$utility-state-aware-separator}";
+
+      // For each height property, create a utility class.
+      @each $height, $value in defaults.$height-values {
+        $selector: "#{$selector-prefix}#{defaults.$height-selector-prefix}#{$height}";
+
+        @include utility.create($selector, height, $value, $state: $state-name);
+
+        $selector: "#{$selector-prefix}#{defaults.$max-height-selector-prefix}#{$height}";
+
+        @include utility.create(
+          $selector,
+          max-height,
+          $value,
+          $state: $state-name
+        );
+
+        $selector: "#{$selector-prefix}#{defaults.$min-height-selector-prefix}#{$height}";
+
+        @include utility.create(
+          $selector,
+          min-height,
+          $value,
+          $state: $state-name
+        );
+      }
+
+      @each $spacer, $value in root-variables.$spacers {
+        $selector: "#{$selector-prefix}#{defaults.$height-selector-prefix}#{$spacer}";
+
+        @include utility.create($selector, height, $value, $state: $state-name);
+
+        $selector: "#{$selector-prefix}#{defaults.$max-height-selector-prefix}#{$spacer}";
+
+        @include utility.create(
+          $selector,
+          max-height,
+          $value,
+          $state: $state-name
+        );
+
+        $selector: "#{$selector-prefix}#{defaults.$min-height-selector-prefix}#{$spacer}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$min-height-class-prefix}#{$spacer}",
+          $selector,
           min-height,
           $value,
-          $screen-size
+          $state: $state-name
         );
       }
     }

package/src/scss/utilities/inset/_defaults.scss

@@ -37,5 +37,7 @@ $base-inset-values: (
 $custom-inset-values: () !default;
 $inset-values: map.merge($base-inset-values, $custom-inset-values);
 
-// Responsive utility flag.
-$responsive: false !default;
+// Utility modifier flags.
+$screen-aware: true !default;
+$theme-aware: false !default;
+$state-aware: false !default;