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

package/src/scss/utilities/border/_index.scss

@@ -0,0 +1,269 @@
+// @graupl/graupl border utilities styles.
+//
+// Responsive class must be within their own loop to prevent specificity issues.
+// This keeps responsive specificity tied to screen size before property order.
+
+@use "../../defaults" as root-defaults;
+@use "../../functions/important";
+@use "../../mixins/layer" as *;
+@use "../../mixins/screen";
+@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;
+  $selector: "#{$selector-prefix}#{defaults.$default-border-selector}";
+
+  // Create a class to apply the default border styling.
+  @include utility.create-mapped(
+    $selector,
+    (
+      border-width: root-variables.$border-width,
+      border-radius: root-variables.$border-radius,
+      border-style: root-variables.$border-style,
+    )
+  );
+
+  // For each border width, create a class to apply the border width.
+  @each $width, $value in defaults.$border-widths {
+    $selector: "#{$selector-prefix}#{defaults.$border-width-selector-prefix}#{$width}";
+
+    @include utility.create($selector, border-width, $value);
+  }
+
+  // For each border style, create a class to apply the border style.
+  @each $border-style, $value in defaults.$border-styles {
+    $selector: "#{$selector-prefix}#{defaults.$border-style-selector-prefix}#{$border-style}";
+
+    @include utility.create($selector, border-style, $value);
+  }
+
+  // For each theme colour, create a utility class for border color.
+  @each $color, $map in map.get(color.$themes, active) {
+    @each $shade, $value in $map {
+      $selector: "#{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$color}-#{$shade}";
+
+      @include utility.create($selector, border-color, $value);
+    }
+  }
+
+  // For each border color, create a utility class for border color.
+  @each $name, $value in defaults.$border-colors {
+    $selector: "#{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$name}";
+
+    @include utility.create($selector, border-color, $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}";
+      $selector: "#{$selector-prefix}#{defaults.$default-border-selector}";
+
+      // Create a class to apply the default border styling.
+      @include utility.create-mapped(
+        $selector,
+        (
+          border-width: root-variables.$border-width,
+          border-radius: root-variables.$border-radius,
+          border-style: root-variables.$border-style,
+        ),
+        $screen: $screen-name
+      );
+
+      // For each border width, create a class to apply the border width.
+      @each $width, $value in defaults.$border-widths {
+        $selector: "#{$selector-prefix}#{defaults.$border-width-selector-prefix}#{$width}";
+
+        @include utility.create(
+          $selector,
+          border-width,
+          $value,
+          $screen: $screen-name
+        );
+      }
+
+      // For each border style, create a class to apply the border style.
+      @each $border-style, $value in defaults.$border-styles {
+        $selector: "#{$selector-prefix}#{defaults.$border-style-selector-prefix}#{$border-style}";
+
+        @include utility.create(
+          $selector,
+          border-style,
+          $value,
+          $screen: $screen-name
+        );
+      }
+
+      // For each theme colour, create a utility class for border color.
+      @each $color, $map in map.get(color.$themes, active) {
+        @each $shade, $value in $map {
+          $selector: "#{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$color}-#{$shade}";
+
+          @include utility.create(
+            $selector,
+            border-color,
+            $value,
+            $screen: $screen-name
+          );
+        }
+      }
+
+      // For each border color, create a utility class for border color.
+      @each $name, $value in defaults.$border-colors {
+        $selector: "#{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$name}";
+
+        @include utility.create(
+          $selector,
+          border-color,
+          $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}";
+        $selector: "#{$selector-prefix}#{defaults.$default-border-selector}";
+
+        // Create a class to apply the default border styling.
+        @include utility.create-mapped(
+          $selector,
+          (
+            border-width: root-variables.$border-width,
+            border-radius: root-variables.$border-radius,
+            border-style: root-variables.$border-style,
+          ),
+          $theme: $theme-name
+        );
+
+        // For each border width, create a class to apply the border width.
+        @each $width, $value in defaults.$border-widths {
+          $selector: "#{$selector-prefix}#{defaults.$border-width-selector-prefix}#{$width}";
+
+          @include utility.create(
+            $selector,
+            border-width,
+            $value,
+            $theme: $theme-name
+          );
+        }
+
+        // For each border style, create a class to apply the border style.
+        @each $border-style, $value in defaults.$border-styles {
+          $selector: "#{$selector-prefix}#{defaults.$border-style-selector-prefix}#{$border-style}";
+
+          @include utility.create(
+            $selector,
+            border-style,
+            $value,
+            $theme: $theme-name
+          );
+        }
+
+        // For each theme colour, create a utility class for border color.
+        @each $color, $map in map.get(color.$themes, active) {
+          @each $shade, $value in $map {
+            $selector: "#{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$color}-#{$shade}";
+
+            @include utility.create(
+              $selector,
+              border-color,
+              $value,
+              $theme: $theme-name
+            );
+          }
+        }
+
+        // For each border color, create a utility class for border color.
+        @each $name, $value in defaults.$border-colors {
+          $selector: "#{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$name}";
+
+          @include utility.create(
+            $selector,
+            border-color,
+            $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}";
+      $selector: "#{$selector-prefix}#{defaults.$default-border-selector}";
+
+      // Create a class to apply the default border styling.
+      @include utility.create-mapped(
+        $selector,
+        (
+          border-width: root-variables.$border-width,
+          border-radius: root-variables.$border-radius,
+          border-style: root-variables.$border-style,
+        ),
+        $state: $state-name
+      );
+
+      // For each border width, create a class to apply the border width.
+      @each $width, $value in defaults.$border-widths {
+        $selector: "#{$selector-prefix}#{defaults.$border-width-selector-prefix}#{$width}";
+
+        @include utility.create(
+          $selector,
+          border-width,
+          $value,
+          $state: $state-name
+        );
+      }
+
+      // For each border style, create a class to apply the border style.
+      @each $border-style, $value in defaults.$border-styles {
+        $selector: "#{$selector-prefix}#{defaults.$border-style-selector-prefix}#{$border-style}";
+
+        @include utility.create(
+          $selector,
+          border-style,
+          $value,
+          $state: $state-name
+        );
+      }
+
+      // For each theme colour, create a utility class for border color.
+      @each $color, $map in map.get(color.$themes, active) {
+        @each $shade, $value in $map {
+          $selector: "#{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$color}-#{$shade}";
+
+          @include utility.create(
+            $selector,
+            border-color,
+            $value,
+            $state: $state-name
+          );
+        }
+      }
+
+      // For each border color, create a utility class for border color.
+      @each $name, $value in defaults.$border-colors {
+        $selector: "#{$selector-prefix}#{defaults.$border-color-selector-prefix}#{$name}";
+
+        @include utility.create(
+          $selector,
+          border-color,
+          $value,
+          $state: $state-name
+        );
+      }
+    }
+  }
+}

package/src/scss/utilities/border/_variables.scss

@@ -0,0 +1,6 @@
+// @graupl/graupl border utilities variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";

package/src/scss/utilities/color/_defaults.scss

@@ -9,7 +9,7 @@
 @use "sass:map";
 
 // Background utility properties.
-$background-class-prefix: "bg-" !default;
+$background-selector-prefix: "bg-" !default;
 $base-background-properties: (
   inherit: inherit,
   current: currentcolor,
@@ -22,7 +22,7 @@ $background-properties: map.merge(
 );
 
 // Text utility properties.
-$text-class-prefix: "text-" !default;
+$text-selector-prefix: "text-" !default;
 $base-text-properties: (
   inherit: inherit,
   current: currentcolor,
@@ -31,5 +31,7 @@ $base-text-properties: (
 $custom-text-properties: () !default;
 $text-properties: map.merge($base-text-properties, $custom-text-properties);
 
-// Responsive utility flag.
-$responsive: false !default;
+// Utility modifier flags.
+$screen-aware: false !default;
+$theme-aware: true !default;
+$state-aware: true !default;

package/src/scss/utilities/color/_index.scss

@@ -12,80 +12,191 @@
 @use "variables" as *;
 
 @include layer(utilities) {
+  $selector-prefix: root-defaults.$utility-selector-prefix;
+
   // For each theme colour, create a utility class for background and color.
   @each $color, $map in map.get(color.$themes, active) {
     @each $shade, $value in $map {
-      $name: #{$color}-#{$shade};
-
-      @include utility.create(
-        ".#{defaults.$background-class-prefix}#{$name}",
-        background,
-        $value
-      );
-      @include utility.create(
-        ".#{defaults.$text-class-prefix}#{$name}",
-        color,
-        $value
-      );
+      $selector: "#{$selector-prefix}#{defaults.$background-selector-prefix}#{$color}-#{$shade}";
+
+      @include utility.create($selector, background, $value);
+
+      $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}#{$color}-#{$shade}";
+
+      @include utility.create($selector, color, $value);
     }
   }
 
   // For each background property, create a utility class.
   @each $name, $value in defaults.$background-properties {
-    $selector: ".#{defaults.$background-class-prefix}#{$name}";
+    $selector: "#{$selector-prefix}#{defaults.$background-selector-prefix}#{$name}";
 
     @include utility.create($selector, background, $value);
   }
 
   // For each text property, create a utility class.
   @each $name, $value in defaults.$text-properties {
-    $selector: ".#{defaults.$text-class-prefix}#{$name}";
+    $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}#{$name}";
 
     @include utility.create($selector, color, $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 theme colour, create a utility class for background and color.
       @each $color, $map in map.get(color.$themes, active) {
         @each $shade, $value in $map {
-          $name: #{$color}-#{$shade};
+          $selector: "#{$selector-prefix}#{defaults.$background-selector-prefix}#{$color}-#{$shade}";
 
           @include utility.create(
-            ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$background-class-prefix}#{$name}",
+            $selector,
             background,
             $value,
-            $screen-size
+            $screen: $screen-name
           );
+
+          $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}#{$color}-#{$shade}";
+
           @include utility.create(
-            ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$text-class-prefix}#{$name}",
+            $selector,
             color,
             $value,
-            $screen-size
+            $screen: $screen-name
           );
         }
       }
 
       // For each background property, create a utility class.
       @each $name, $value in defaults.$background-properties {
+        $selector: "#{$selector-prefix}#{defaults.$background-selector-prefix}#{$name}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$background-class-prefix}#{$name}",
+          $selector,
           background,
           $value,
-          $screen-size
+          $screen: $screen-name
         );
       }
 
       // For each text property, create a utility class.
       @each $name, $value in defaults.$text-properties {
+        $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}#{$name}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$text-class-prefix}#{$name}",
+          $selector,
           color,
           $value,
-          $screen-size
+          $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 theme colour, create a utility class for background and color.
+        @each $color, $map in map.get(color.$themes, active) {
+          @each $shade, $value in $map {
+            $selector: "#{$selector-prefix}#{defaults.$background-selector-prefix}#{$color}-#{$shade}";
+
+            @include utility.create(
+              $selector,
+              background,
+              $value,
+              $theme: $theme-name
+            );
+
+            $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}#{$color}-#{$shade}";
+
+            @include utility.create(
+              $selector,
+              color,
+              $value,
+              $theme: $theme-name
+            );
+          }
+        }
+
+        // For each background property, create a utility class.
+        @each $name, $value in defaults.$background-properties {
+          $selector: "#{$selector-prefix}#{defaults.$background-selector-prefix}#{$name}";
+
+          @include utility.create(
+            $selector,
+            background,
+            $value,
+            $theme: $theme-name
+          );
+        }
+
+        // For each text property, create a utility class.
+        @each $name, $value in defaults.$text-properties {
+          $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}#{$name}";
+
+          @include utility.create(
+            $selector,
+            color,
+            $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 theme colour, create a utility class for background and color.
+      @each $color, $map in map.get(color.$themes, active) {
+        @each $shade, $value in $map {
+          $selector: "#{$selector-prefix}#{defaults.$background-selector-prefix}#{$color}-#{$shade}";
+
+          @include utility.create(
+            $selector,
+            background,
+            $value,
+            $state: $state-name
+          );
+
+          $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}#{$color}-#{$shade}";
+
+          @include utility.create(
+            $selector,
+            color,
+            $value,
+            $state: $state-name
+          );
+        }
+      }
+
+      // For each background property, create a utility class.
+      @each $name, $value in defaults.$background-properties {
+        $selector: "#{$selector-prefix}#{defaults.$background-selector-prefix}#{$name}";
+
+        @include utility.create(
+          $selector,
+          background,
+          $value,
+          $state: $state-name
         );
       }
+
+      // For each text property, create a utility class.
+      @each $name, $value in defaults.$text-properties {
+        $selector: "#{$selector-prefix}#{defaults.$text-selector-prefix}#{$name}";
+
+        @include utility.create($selector, color, $value, $state: $state-name);
+      }
     }
   }
 }

package/src/scss/utilities/display/_defaults.scss

@@ -8,7 +8,7 @@
 
 @use "sass:map";
 
-$display-class-prefix: "display-" !default;
+$display-selector-prefix: "display-" !default;
 $base-display-properties: (
   block: block,
   inline-block: inline-block,
@@ -27,6 +27,10 @@ $display-properties: map.merge(
   $base-display-properties,
   $custom-display-properties
 );
-$visually-hidden-class: "visually-hidden" !default;
-$visually-hidden-focusable-class: "visually-hidden-focusable" !default;
-$responsive: true !default;
+$visually-hidden-selector: "visually-hidden" !default;
+$visually-hidden-focusable-selector: "visually-hidden-focusable" !default;
+
+// Utility modifier flags.
+$screen-aware: true !default;
+$theme-aware: false !default;
+$state-aware: false !default;

package/src/scss/utilities/display/_index.scss

@@ -6,53 +6,126 @@
 @use "../../defaults" as root-defaults;
 @use "../../mixins/layer" as *;
 @use "../../mixins/screen";
+@use "../../mixins/theme";
+@use "../../mixins/state";
 @use "../../mixins/utility";
 @use "../../mixins/visually-hidden";
+@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 display property, create a utility class.
   @each $name, $property in defaults.$display-properties {
-    @include utility.create(
-      ".#{defaults.$display-class-prefix}#{$name}",
-      display,
-      $property
-    );
+    $selector: "#{$selector-prefix}#{defaults.$display-selector-prefix}#{$name}";
+
+    @include utility.create($selector, display, $property);
   }
 
   // Visually hidden utility classes.
-  #{defaults.$visually-hidden-class} {
+  #{$selector-prefix}#{defaults.$visually-hidden-selector} {
     @include visually-hidden.apply;
   }
 
-  #{defaults.$visually-hidden-focusable-class} {
+  #{$selector-prefix}#{defaults.$visually-hidden-focusable-selector} {
     @include visually-hidden.focusable;
   }
 
   // Create responsive utilities for visually hidden classes.
-  @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 display property, create a utility class.
+      @each $name, $property in defaults.$display-properties {
+        $selector: "#{$selector-prefix}#{defaults.$display-selector-prefix}#{$name}";
+
+        @include utility.create(
+          $selector,
+          display,
+          $property,
+          $screen: $screen-name
+        );
+      }
+
+      // Visually hidden utility classes.
+      #{$selector-prefix}#{defaults.$visually-hidden-selector} {
+        @include screen.up($screen-name) {
+          @include visually-hidden.apply;
+        }
+      }
+
+      #{$selector-prefix}#{defaults.$visually-hidden-focusable-selector} {
+        @include screen.up($screen-name) {
+          @include visually-hidden.focusable;
+        }
+      }
+    }
+  }
+
+  // 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 display property, create a utility class.
+        @each $name, $property in defaults.$display-properties {
+          $selector: "#{$selector-prefix}#{defaults.$display-selector-prefix}#{$name}";
+
+          @include utility.create(
+            $selector,
+            display,
+            $property,
+            $theme: $theme-name
+          );
+        }
+
+        // Visually hidden utility classes.
+        #{$selector-prefix}#{defaults.$visually-hidden-selector} {
+          @include theme.theme($theme-name) {
+            @include visually-hidden.apply;
+          }
+        }
+
+        #{$selector-prefix}#{defaults.$visually-hidden-focusable-selector} {
+          @include theme.theme($theme-name) {
+            @include visually-hidden.focusable;
+          }
+        }
+      }
+    }
+  }
+
+  // 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 display property, create a utility class.
       @each $name, $property in defaults.$display-properties {
+        $selector: "#{$selector-prefix}#{defaults.$display-selector-prefix}#{$name}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$display-class-prefix}#{$name}",
+          $selector,
           display,
           $property,
-          $screen-size
+          $state: $state-name
         );
       }
 
       // Visually hidden utility classes.
-      .#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$visually-hidden-class} {
-        @include screen.up($screen-size) {
+      #{$selector-prefix}#{defaults.$visually-hidden-selector} {
+        @include state.state($state-name) {
           @include visually-hidden.apply;
         }
       }
 
-      .#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$visually-hidden-focusable-class} {
-        @include screen.up($screen-size) {
+      #{$selector-prefix}#{defaults.$visually-hidden-focusable-selector} {
+        @include state.state($state-name) {
           @include visually-hidden.focusable;
         }
       }