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

package/src/scss/utilities/visibility/_defaults.scss

@@ -9,7 +9,7 @@
 @use "sass:map";
 
 // Visibility properties.
-$visibility-class-prefix: "visibility-" !default;
+$visibility-selector-prefix: "visibility-" !default;
 $base-visibility-properties: (
   visible: visible,
   hidden: hidden,
@@ -21,5 +21,7 @@ $visibility-properties: map.merge(
   $custom-visibility-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/visibility/_index.scss

@@ -6,29 +6,75 @@
 @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 visibility property, create a utility class.
   @each $name, $value in defaults.$visibility-properties {
-    @include utility.create(
-      ".#{defaults.$visibility-class-prefix}#{$name}",
-      visibility,
-      $value
-    );
+    $selector: "#{$selector-prefix}#{defaults.$visibility-selector-prefix}#{$name}";
+
+    @include utility.create($selector, visibility, $value);
   }
 
-  // Generate responsive utilities.
-  @if defaults.$responsive {
-    @each $screen-size in map.keys(root-defaults.$screen-sizes) {
+  // Generate screen-aware utilities.
+  @if defaults.$screen-aware {
+    @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 visibility property, create a utility class.
       @each $name, $value in defaults.$visibility-properties {
+        $selector: "#{$selector-prefix}#{defaults.$visibility-selector-prefix}#{$name}";
+
+        @include utility.create(
+          $selector,
+          visibility,
+          $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 visibility property, create a utility class.
+        @each $name, $value in defaults.$visibility-properties {
+          $selector: "#{$selector-prefix}#{defaults.$visibility-selector-prefix}#{$name}";
+
+          @include utility.create(
+            $selector,
+            visibility,
+            $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 visibility property, create a utility class.
+      @each $name, $value in defaults.$visibility-properties {
+        $selector: "#{$selector-prefix}#{defaults.$visibility-selector-prefix}#{$name}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$visibility-class-prefix}#{$name}",
+          $selector,
           visibility,
           $value,
-          $screen-size
+          $state: $state-name
         );
       }
     }

package/src/scss/utilities/width/_defaults.scss

@@ -9,9 +9,9 @@
 @use "sass:map";
 
 // Width properties.
-$width-class-prefix: "w-" !default;
-$max-width-class-prefix: "max-w-" !default;
-$min-width-class-prefix: "min-w-" !default;
+$width-selector-prefix: "w-" !default;
+$max-width-selector-prefix: "max-w-" !default;
+$min-width-selector-prefix: "min-w-" !default;
 
 // Width values.
 $base-width-values: (
@@ -37,5 +37,7 @@ $base-width-values: (
 $custom-width-values: () !default;
 $width-values: map.merge($base-width-values, $custom-width-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/width/_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 width property, create a utility class.
   @each $width, $value in defaults.$width-values {
-    @include utility.create(
-      ".#{defaults.$width-class-prefix}#{$width}",
-      width,
-      $value
-    );
-    @include utility.create(
-      ".#{defaults.$max-width-class-prefix}#{$width}",
-      max-width,
-      $value
-    );
-    @include utility.create(
-      ".#{defaults.$min-width-class-prefix}#{$width}",
-      min-width,
-      $value
-    );
+    $selector: "#{$selector-prefix}#{defaults.$width-selector-prefix}#{$width}";
+
+    @include utility.create($selector, width, $value);
+
+    $selector: "#{$selector-prefix}#{defaults.$max-width-selector-prefix}#{$width}";
+
+    @include utility.create($selector, max-width, $value);
+
+    $selector: "#{$selector-prefix}#{defaults.$min-width-selector-prefix}#{$width}";
+
+    @include utility.create($selector, min-width, $value);
   }
 
   @each $spacer, $value in root-variables.$spacers {
-    @include utility.create(
-      ".#{defaults.$width-class-prefix}#{$spacer}",
-      width,
-      $value
-    );
-    @include utility.create(
-      ".#{defaults.$max-width-class-prefix}#{$spacer}",
-      max-width,
-      $value
-    );
-    @include utility.create(
-      ".#{defaults.$min-width-class-prefix}#{$spacer}",
-      min-width,
-      $value
-    );
+    $selector: "#{$selector-prefix}#{defaults.$width-selector-prefix}#{$spacer}";
+
+    @include utility.create($selector, width, $value);
+
+    $selector: "#{$selector-prefix}#{defaults.$max-width-selector-prefix}#{$spacer}";
+
+    @include utility.create($selector, max-width, $value);
+
+    $selector: "#{$selector-prefix}#{defaults.$min-width-selector-prefix}#{$spacer}";
+
+    @include utility.create($selector, min-width, $value);
   }
 
-  // Generate responsive utilities.
-  @if defaults.$responsive {
-    @each $screen-size in map.keys(root-defaults.$screen-sizes) {
+  // Generate screen-aware utilities.
+  @if defaults.$screen-aware {
+    @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 width property, create a utility class.
       @each $width, $value in defaults.$width-values {
+        $selector: "#{$selector-prefix}#{defaults.$width-selector-prefix}#{$width}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$width-class-prefix}#{$width}",
+          $selector,
           width,
           $value,
-          $screen-size
+          $screen: $screen-name
         );
+
+        $selector: "#{$selector-prefix}#{defaults.$max-width-selector-prefix}#{$width}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$max-width-class-prefix}#{$width}",
+          $selector,
           max-width,
           $value,
-          $screen-size
+          $screen: $screen-name
         );
+
+        $selector: "#{$selector-prefix}#{defaults.$min-width-selector-prefix}#{$width}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$min-width-class-prefix}#{$width}",
+          $selector,
           min-width,
           $value,
-          $screen-size
+          $screen: $screen-name
         );
       }
 
       @each $spacer, $value in root-variables.$spacers {
+        $selector: "#{$selector-prefix}#{defaults.$width-selector-prefix}#{$spacer}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$width-class-prefix}#{$spacer}",
+          $selector,
           width,
           $value,
-          $screen-size
+          $screen: $screen-name
         );
+
+        $selector: "#{$selector-prefix}#{defaults.$max-width-selector-prefix}#{$spacer}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$max-width-class-prefix}#{$spacer}",
+          $selector,
           max-width,
           $value,
-          $screen-size
+          $screen: $screen-name
         );
+
+        $selector: "#{$selector-prefix}#{defaults.$min-width-selector-prefix}#{$spacer}";
+
+        @include utility.create(
+          $selector,
+          min-width,
+          $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 width property, create a utility class.
+        @each $width, $value in defaults.$width-values {
+          $selector: "#{$selector-prefix}#{defaults.$width-selector-prefix}#{$width}";
+
+          @include utility.create(
+            $selector,
+            width,
+            $value,
+            $theme: $theme-name
+          );
+
+          $selector: "#{$selector-prefix}#{defaults.$max-width-selector-prefix}#{$width}";
+
+          @include utility.create(
+            $selector,
+            max-width,
+            $value,
+            $theme: $theme-name
+          );
+
+          $selector: "#{$selector-prefix}#{defaults.$min-width-selector-prefix}#{$width}";
+
+          @include utility.create(
+            $selector,
+            min-width,
+            $value,
+            $theme: $theme-name
+          );
+        }
+
+        @each $spacer, $value in root-variables.$spacers {
+          $selector: "#{$selector-prefix}#{defaults.$width-selector-prefix}#{$spacer}";
+
+          @include utility.create(
+            $selector,
+            width,
+            $value,
+            $theme: $theme-name
+          );
+
+          $selector: "#{$selector-prefix}#{defaults.$max-width-selector-prefix}#{$spacer}";
+
+          @include utility.create(
+            $selector,
+            max-width,
+            $value,
+            $theme: $theme-name
+          );
+
+          $selector: "#{$selector-prefix}#{defaults.$min-width-selector-prefix}#{$spacer}";
+
+          @include utility.create(
+            $selector,
+            min-width,
+            $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 width property, create a utility class.
+      @each $width, $value in defaults.$width-values {
+        $selector: "#{$selector-prefix}#{defaults.$width-selector-prefix}#{$width}";
+
+        @include utility.create($selector, width, $value, $state: $state-name);
+
+        $selector: "#{$selector-prefix}#{defaults.$max-width-selector-prefix}#{$width}";
+
+        @include utility.create(
+          $selector,
+          max-width,
+          $value,
+          $state: $state-name
+        );
+
+        $selector: "#{$selector-prefix}#{defaults.$min-width-selector-prefix}#{$width}";
+
+        @include utility.create(
+          $selector,
+          min-width,
+          $value,
+          $state: $state-name
+        );
+      }
+
+      @each $spacer, $value in root-variables.$spacers {
+        $selector: "#{$selector-prefix}#{defaults.$width-selector-prefix}#{$spacer}";
+
+        @include utility.create($selector, width, $value, $state: $state-name);
+
+        $selector: "#{$selector-prefix}#{defaults.$max-width-selector-prefix}#{$spacer}";
+
+        @include utility.create(
+          $selector,
+          max-width,
+          $value,
+          $state: $state-name
+        );
+
+        $selector: "#{$selector-prefix}#{defaults.$min-width-selector-prefix}#{$spacer}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$min-width-class-prefix}#{$spacer}",
+          $selector,
           min-width,
           $value,
-          $screen-size
+          $state: $state-name
         );
       }
     }

package/stylelint.config.js

@@ -15,6 +15,7 @@ const config = {
     "@stylistic/function-parentheses-space-inside": "never-single-line",
     "@stylistic/indentation": null,
     "@stylistic/block-opening-brace-space-before": "never-single-line",
+    "scss/at-mixin-pattern": "^_?[a-z][a-z0-9]*(-[a-z0-9]+)*$",
   },
 };