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

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

@@ -7,28 +7,81 @@
 @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 inset property, create a utility class.
   @each $type, $property in defaults.$inset-properties {
     @each $name, $value in defaults.$inset-values {
-      @include utility.create(".#{$type}-#{$name}", $property, $value);
+      $selector: "#{$selector-prefix}#{$type}-#{$name}";
+
+      @include utility.create($selector, $property, $value);
     }
   }
 
-  @if defaults.$responsive and root-defaults.$responsive-utilities {
-    @each $screen-size in map.keys(root-defaults.$screen-sizes) {
+  @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 inset property, create a utility class.
       @each $type, $property in defaults.$inset-properties {
         @each $name, $value in defaults.$inset-values {
+          $selector: "#{$selector-prefix}#{$type}-#{$name}";
+
+          @include utility.create(
+            $selector,
+            $property,
+            $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 inset property, create a utility class.
+        @each $type, $property in defaults.$inset-properties {
+          @each $name, $value in defaults.$inset-values {
+            $selector: "#{$selector-prefix}#{$type}-#{$name}";
+
+            @include utility.create(
+              $selector,
+              $property,
+              $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 inset property, create a utility class.
+      @each $type, $property in defaults.$inset-properties {
+        @each $name, $value in defaults.$inset-values {
+          $selector: "#{$selector-prefix}#{$type}-#{$name}";
+
           @include utility.create(
-            ".#{$screen-size}#{root-defaults.$responsive-separator}#{$type}-#{$name}",
+            $selector,
             $property,
             $value,
-            $screen-size
+            $state: $state-name
           );
         }
       }

package/src/scss/utilities/justification/_defaults.scss

@@ -9,7 +9,7 @@
 @use "sass:map";
 
 // Justify content properties.
-$justify-content-class-prefix: "justify-content-" !default;
+$justify-content-selector-prefix: "justify-content-" !default;
 $base-justify-content-properties: (
   normal: normal,
   start: flex-start,
@@ -27,7 +27,7 @@ $justify-content-properties: map.merge(
 );
 
 // Justify items properties.
-$justify-items-class-prefix: "justify-items-" !default;
+$justify-items-selector-prefix: "justify-items-" !default;
 $base-justify-items-properties: (
   start: start,
   end: end,
@@ -41,7 +41,7 @@ $justify-items-properties: map.merge(
 );
 
 // Justify self properties.
-$justify-self-class-prefix: "justify-self-" !default;
+$justify-self-selector-prefix: "justify-self-" !default;
 $base-justify-self-properties: (
   auto: auto,
   start: start,
@@ -55,5 +55,7 @@ $justify-self-properties: map.merge(
   $custom-justify-self-properties
 );
 
-// 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/justification/_index.scss

@@ -6,68 +6,161 @@
 @use "../../defaults" as root-defaults;
 @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 justify content property, create a utility class.
   @each $name, $value in defaults.$justify-content-properties {
-    @include utility.create(
-      ".#{defaults.$justify-content-class-prefix}#{$name}",
-      justify-content,
-      $value
-    );
+    $selector: "#{$selector-prefix}#{defaults.$justify-content-selector-prefix}#{$name}";
+
+    @include utility.create($selector, justify-content, $value);
   }
 
   // For each justify items property, create a utility class.
   @each $name, $value in defaults.$justify-items-properties {
-    @include utility.create(
-      ".#{defaults.$justify-items-class-prefix}#{$name}",
-      justify-items,
-      $value
-    );
+    $selector: "#{$selector-prefix}#{defaults.$justify-items-selector-prefix}#{$name}";
+
+    @include utility.create($selector, justify-items, $value);
   }
 
   // For each justify self property, create a utility class.
   @each $name, $value in defaults.$justify-self-properties {
-    @include utility.create(
-      ".#{defaults.$justify-self-class-prefix}#{$name}",
-      justify-self,
-      $value
-    );
+    $selector: "#{$selector-prefix}#{defaults.$justify-self-selector-prefix}#{$name}";
+
+    @include utility.create($selector, justify-self, $value);
+  }
+
+  // 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 justify content property, create a utility class.
+      @each $name, $value in defaults.$justify-content-properties {
+        $selector: "#{$selector-prefix}#{defaults.$justify-content-selector-prefix}#{$name}";
+
+        @include utility.create(
+          $selector,
+          justify-content,
+          $value,
+          $screen: $screen-name
+        );
+      }
+
+      // For each justify items property, create a utility class.
+      @each $name, $value in defaults.$justify-items-properties {
+        $selector: "#{$selector-prefix}#{defaults.$justify-items-selector-prefix}#{$name}";
+
+        @include utility.create(
+          $selector,
+          justify-items,
+          $value,
+          $screen: $screen-name
+        );
+      }
+
+      // For each justify self property, create a utility class.
+      @each $name, $value in defaults.$justify-self-properties {
+        $selector: "#{$selector-prefix}#{defaults.$justify-self-selector-prefix}#{$name}";
+
+        @include utility.create(
+          $selector,
+          justify-self,
+          $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 justify content property, create a utility class.
+        @each $name, $value in defaults.$justify-content-properties {
+          $selector: "#{$selector-prefix}#{defaults.$justify-content-selector-prefix}#{$name}";
+
+          @include utility.create(
+            $selector,
+            justify-content,
+            $value,
+            $theme: $theme-name
+          );
+        }
+
+        // For each justify items property, create a utility class.
+        @each $name, $value in defaults.$justify-items-properties {
+          $selector: "#{$selector-prefix}#{defaults.$justify-items-selector-prefix}#{$name}";
+
+          @include utility.create(
+            $selector,
+            justify-items,
+            $value,
+            $theme: $theme-name
+          );
+        }
+
+        // For each justify self property, create a utility class.
+        @each $name, $value in defaults.$justify-self-properties {
+          $selector: "#{$selector-prefix}#{defaults.$justify-self-selector-prefix}#{$name}";
+
+          @include utility.create(
+            $selector,
+            justify-self,
+            $value,
+            $theme: $theme-name
+          );
+        }
+      }
+    }
   }
 
-  // Generate 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 justify content property, create a utility class.
       @each $name, $value in defaults.$justify-content-properties {
+        $selector: "#{$selector-prefix}#{defaults.$justify-content-selector-prefix}#{$name}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$justify-content-class-prefix}#{$name}",
+          $selector,
           justify-content,
           $value,
-          $screen-size
+          $state: $state-name
         );
       }
 
       // For each justify items property, create a utility class.
       @each $name, $value in defaults.$justify-items-properties {
+        $selector: "#{$selector-prefix}#{defaults.$justify-items-selector-prefix}#{$name}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$justify-items-class-prefix}#{$name}",
+          $selector,
           justify-items,
           $value,
-          $screen-size
+          $state: $state-name
         );
       }
 
       // For each justify self property, create a utility class.
       @each $name, $value in defaults.$justify-self-properties {
+        $selector: "#{$selector-prefix}#{defaults.$justify-self-selector-prefix}#{$name}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$justify-self-class-prefix}#{$name}",
+          $selector,
           justify-self,
           $value,
-          $screen-size
+          $state: $state-name
         );
       }
     }

package/src/scss/utilities/list/_defaults.scss

@@ -9,7 +9,7 @@
 @use "sass:map";
 
 // List style type properties.
-$list-style-type-class-prefix: "list-style-" !default;
+$list-style-type-selector-prefix: "list-style-" !default;
 $base-list-style-type-properties: (
   none: none,
   disc: disc,
@@ -24,7 +24,7 @@ $list-style-type-properties: map.merge(
 );
 
 // List style position properties.
-$list-style-position-class-prefix: "list-style-" !default;
+$list-style-position-selector-prefix: "list-style-" !default;
 $base-list-style-position-properties: (
   inside: inside,
   outside: outside,
@@ -35,5 +35,7 @@ $list-style-position-properties: map.merge(
   $custom-list-style-position-properties
 );
 
-// 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/list/_index.scss

@@ -6,49 +6,118 @@
 @use "../../defaults" as root-defaults;
 @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 list style type property, create a utility class.
   @each $name, $property in defaults.$list-style-type-properties {
-    @include utility.create(
-      ".#{defaults.$list-style-type-class-prefix}#{$name}",
-      list-style-type,
-      $property
-    );
+    $selector: "#{$selector-prefix}#{defaults.$list-style-type-selector-prefix}#{$name}";
+
+    @include utility.create($selector, list-style-type, $property);
   }
 
   // For each list style position property, create a utility class.
   @each $name, $property in defaults.$list-style-position-properties {
-    @include utility.create(
-      ".#{defaults.$list-style-position-class-prefix}#{$name}",
-      list-style-position,
-      $property
-    );
+    $selector: "#{$selector-prefix}#{defaults.$list-style-position-selector-prefix}#{$name}";
+
+    @include utility.create($selector, list-style-position, $property);
   }
 
-  // Generate 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 list style type property, create a utility class.
       @each $name, $property in defaults.$list-style-type-properties {
+        $selector: "#{$selector-prefix}#{defaults.$list-style-type-selector-prefix}#{$name}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$list-style-type-class-prefix}#{$name}",
+          $selector,
           list-style-type,
           $property,
-          $screen-size
+          $screen: $screen-name
         );
       }
 
       // For each list style position property, create a utility class.
       @each $name, $property in defaults.$list-style-position-properties {
+        $selector: "#{$selector-prefix}#{defaults.$list-style-position-selector-prefix}#{$name}";
+
+        @include utility.create(
+          $selector,
+          list-style-position,
+          $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 list style type property, create a utility class.
+        @each $name, $property in defaults.$list-style-type-properties {
+          $selector: "#{$selector-prefix}#{defaults.$list-style-type-selector-prefix}#{$name}";
+
+          @include utility.create(
+            $selector,
+            list-style-type,
+            $property,
+            $theme: $theme-name
+          );
+        }
+
+        // For each list style position property, create a utility class.
+        @each $name, $property in defaults.$list-style-position-properties {
+          $selector: "#{$selector-prefix}#{defaults.$list-style-position-selector-prefix}#{$name}";
+
+          @include utility.create(
+            $selector,
+            list-style-position,
+            $property,
+            $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 list style type property, create a utility class.
+      @each $name, $property in defaults.$list-style-type-properties {
+        $selector: "#{$selector-prefix}#{defaults.$list-style-type-selector-prefix}#{$name}";
+
+        @include utility.create(
+          $selector,
+          list-style-type,
+          $property,
+          $state: $state-name
+        );
+      }
+
+      // For each list style position property, create a utility class.
+      @each $name, $property in defaults.$list-style-position-properties {
+        $selector: "#{$selector-prefix}#{defaults.$list-style-position-selector-prefix}#{$name}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$list-style-position-class-prefix}#{$name}",
+          $selector,
           list-style-position,
           $property,
-          $screen-size
+          $state: $state-name
         );
       }
     }

package/src/scss/utilities/order/_defaults.scss

@@ -9,7 +9,7 @@
 @use "sass:map";
 
 // Order properties.
-$order-class-prefix: "order-" !default;
+$order-selector-prefix: "order-" !default;
 $base-order-properties: (
   "none": 0,
   "first": -9999,
@@ -18,5 +18,7 @@ $base-order-properties: (
 $custom-order-properties: () !default;
 $order-properties: map.merge($base-order-properties, $custom-order-properties);
 
-// Responsive utility flag.
-$responsive: true !default;
+// Utility modifier flags.
+$screen-aware: true !default;
+$theme-aware: false !default;
+$state-aware: false !default;

package/src/scss/utilities/order/_index.scss

@@ -8,11 +8,13 @@
 @use "../../layout/flex-columns/defaults" as flex-columns-defaults;
 @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;
   $order-max-count: 0;
 
   /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
@@ -26,37 +28,83 @@
   }
   /* stylelint-enable  scss/operator-no-newline-after */
 
-  @each $order-property, $order-value in defaults.$order-properties {
-    @include utility.create(
-      ".#{defaults.$order-class-prefix}#{$order-property}",
-      order,
-      $order-value
-    );
+  @each $property, $value in defaults.$order-properties {
+    $selector: "#{$selector-prefix}#{defaults.$order-selector-prefix}#{$property}";
+
+    @include utility.create($selector, order, $value);
   }
 
   @for $i from 1 through $order-max-count {
-    @include utility.create(".#{defaults.$order-class-prefix}#{$i}", order, $i);
+    $selector: "#{$selector-prefix}#{defaults.$order-selector-prefix}#{$i}";
+
+    @include utility.create($selector, order, $i);
   }
 
-  // Generate responsive utilities.
-  @if defaults.$responsive and root-defaults.$responsive-utilities {
-    @each $screen-size in map.keys(root-defaults.$screen-sizes) {
-      @each $order-property, $order-value in defaults.$order-properties {
+  // 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}";
+
+      @each $property, $value in defaults.$order-properties {
+        $selector: "#{$selector-prefix}#{defaults.$order-selector-prefix}#{$property}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$order-class-prefix}#{$order-property}",
+          $selector,
           order,
-          $order-value,
-          $screen-size
+          $value,
+          $screen: $screen-name
         );
       }
 
       @for $i from 1 through $order-max-count {
-        @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$order-class-prefix}#{$i}",
-          order,
-          $i,
-          $screen-size
-        );
+        $selector: "#{$selector-prefix}#{defaults.$order-selector-prefix}#{$i}";
+
+        @include utility.create($selector, order, $i, $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}";
+
+        @each $property, $value in defaults.$order-properties {
+          $selector: "#{$selector-prefix}#{defaults.$order-selector-prefix}#{$property}";
+
+          @include utility.create(
+            $selector,
+            order,
+            $value,
+            $theme: $theme-name
+          );
+        }
+
+        @for $i from 1 through $order-max-count {
+          $selector: "#{$selector-prefix}#{defaults.$order-selector-prefix}#{$i}";
+
+          @include utility.create($selector, order, $i, $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}";
+
+      @each $property, $value in defaults.$order-properties {
+        $selector: "#{$selector-prefix}#{defaults.$order-selector-prefix}#{$property}";
+
+        @include utility.create($selector, order, $value, $state: $state-name);
+      }
+
+      @for $i from 1 through $order-max-count {
+        $selector: "#{$selector-prefix}#{defaults.$order-selector-prefix}#{$i}";
+
+        @include utility.create($selector, order, $i, $state: $state-name);
       }
     }
   }

package/src/scss/utilities/position/_defaults.scss

@@ -8,7 +8,7 @@
 
 @use "sass:map";
 
-$position-class-prefix: "position-" !default;
+$position-selector-prefix: "position-" !default;
 $base-position-properties: (
   static: static,
   fixed: fixed,
@@ -22,5 +22,7 @@ $position-properties: map.merge(
   $custom-position-properties
 );
 
-// Responsive utility flag.
-$responsive: false !default;
+// Utility modifier flags.
+$screen-aware: true !default;
+$theme-aware: false !default;
+$state-aware: false !default;