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

package/src/scss/utilities/position/_index.scss

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

package/src/scss/utilities/ratio/_defaults.scss

@@ -9,9 +9,9 @@
 @use "sass:map";
 
 // Ratio utilities.
-$ratio-class: "ratio" !default;
-$ratio-variant-class-prefix: "" !default;
-$force-ratio-class: "force-ratio" !default;
+$ratio-selector: "ratio" !default;
+$ratio-variant-selector-prefix: "" !default;
+$force-ratio-selector: "force-ratio" !default;
 $base-ratios: (
   "one-by-one": 100%,
   "two-by-one": 50%,
@@ -24,5 +24,7 @@ $base-ratios: (
 $custom-ratios: () !default;
 $ratios: map.merge($base-ratios, $custom-ratios);
 
-// Responsive utility flag.
-$responsive: false !default;
+// Utility modifier flags.
+$screen-aware: true !default;
+$theme-aware: false !default;
+$state-aware: false !default;

package/src/scss/utilities/ratio/_index.scss

@@ -6,13 +6,18 @@
 @use "../../defaults" as root-defaults;
 @use "../../mixins/layer" as *;
 @use "../../mixins/screen";
+@use "../../mixins/theme";
+@use "../../mixins/state";
 @use "../../mixins/utility";
+@use "../../theme/color/variables" as color;
 @use "defaults";
 @use "sass:map";
 @use "variables" as *;
 
 @include layer(utilities) {
-  .#{defaults.$ratio-class} {
+  $selector-prefix: root-defaults.$utility-selector-prefix;
+
+  #{$selector-prefix}#{defaults.$ratio-selector} {
     position: relative;
     width: 100%;
 
@@ -22,7 +27,7 @@
       padding-top: $ratio;
     }
 
-    .#{defaults.$force-ratio-class} {
+    .#{defaults.$force-ratio-selector} {
       position: absolute;
       inset: 0;
       width: 100%;
@@ -31,19 +36,53 @@
     }
   }
 
-  @each $ratio-class, $value in defaults.$ratios {
-    .#{defaults.$ratio-variant-class-prefix}#{$ratio-class} {
-      --#{root-defaults.$prefix}-ratio: #{$value};
+  @each $ratio-selector, $value in defaults.$ratios {
+    #{$selector-prefix}#{defaults.$ratio-variant-selector-prefix}#{$ratio-selector} {
+      --#{root-defaults.$prefix}ratio: #{$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}";
+
+      @each $ratio-selector, $value in defaults.$ratios {
+        @include screen.up($screen-name) {
+          #{$selector-prefix}#{defaults.$ratio-variant-selector-prefix}#{$ratio-selector} {
+            --#{root-defaults.$prefix}ratio: #{$value};
+          }
+        }
+      }
+    }
+  }
+
+  // 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 $ratio-selector, $value in defaults.$ratios {
+          @include theme.theme($theme-name) {
+            #{$selector-prefix}#{defaults.$ratio-variant-selector-prefix}#{$ratio-selector} {
+              --#{root-defaults.$prefix}ratio: #{$value};
+            }
+          }
+        }
+      }
     }
   }
 
-  // Generate responsive utilities.
-  @if defaults.$responsive and root-defaults.$responsive-utilities {
-    @each $screen-size in map.keys(root-defaults.$screen-sizes) {
-      @each $ratio-class, $value in defaults.$ratios {
-        .#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$ratio-variant-class-prefix}#{$ratio-class} {
-          @include screen.up($screen-size) {
-            --#{root-defaults.$prefix}-ratio: #{$value};
+  // 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 $ratio-selector, $ratio-value in defaults.$ratios {
+        #{$selector-prefix}#{defaults.$ratio-variant-selector-prefix}#{$ratio-selector} {
+          @include state.state($state-name) {
+            --#{root-defaults.$prefix}ratio: #{$ratio-value};
           }
         }
       }

package/src/scss/utilities/ratio/_variables.scss

@@ -6,4 +6,4 @@
 @use "defaults";
 @use "../../defaults" as root-defaults;
 
-$ratio: var(--#{root-defaults.$prefix}-ratio);
+$ratio: var(--#{root-defaults.$prefix}ratio);

package/src/scss/utilities/spacing/_defaults.scss

@@ -45,5 +45,7 @@ $spacing-properties: map.merge(
   $custom-spacing-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/spacing/_index.scss

@@ -9,35 +9,38 @@
 @use "../../layout/flex-columns/defaults" as flex-columns-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 spacing property, create a utility class.
   @each $name, $property in defaults.$spacing-properties {
     @each $key, $value in root-variables.$spacers {
-      $selector: ".#{$name}-#{$key}";
+      $selector: "#{$selector-prefix}#{$name}-#{$key}";
 
       // If we're dealing with gap, column-gap, or row-gap inside of #{columns-defaults.$columns-selector}, we should update
       // the columns-column-gap property instead of the raw property.
       @if $name == "g" {
         @include utility.create($selector, $property, $value) {
           &#{columns-defaults.$columns-selector} {
-            --#{root-defaults.$prefix}-columns-column-gap: #{important.insert(
+            --#{root-defaults.$prefix}columns-column-gap: #{important.insert(
                 $value
               )};
-            --#{root-defaults.$prefix}-columns-row-gap: #{important.insert(
+            --#{root-defaults.$prefix}columns-row-gap: #{important.insert(
                 $value
               )};
           }
 
           &#{flex-columns-defaults.$flex-columns-selector} {
-            --#{root-defaults.$prefix}-flex-columns-column-gap: #{important.insert(
+            --#{root-defaults.$prefix}flex-columns-column-gap: #{important.insert(
                 $value
               )};
-            --#{root-defaults.$prefix}-flex-columns-row-gap: #{important.insert(
+            --#{root-defaults.$prefix}flex-columns-row-gap: #{important.insert(
                 $value
               )};
           }
@@ -45,13 +48,13 @@
       } @else if $name == "cg" {
         @include utility.create($selector, $property, $value) {
           &#{columns-defaults.$columns-selector} {
-            --#{root-defaults.$prefix}-columns-column-gap: #{important.insert(
+            --#{root-defaults.$prefix}columns-column-gap: #{important.insert(
                 $value
               )};
           }
 
           &#{flex-columns-defaults.$flex-columns-selector} {
-            --#{root-defaults.$prefix}-flex-columns-column-gap: #{important.insert(
+            --#{root-defaults.$prefix}flex-columns-column-gap: #{important.insert(
                 $value
               )};
           }
@@ -59,13 +62,13 @@
       } @else if $name == "rg" {
         @include utility.create($selector, $property, $value) {
           &#{columns-defaults.$columns-selector} {
-            --#{root-defaults.$prefix}-columns-row-gap: #{important.insert(
+            --#{root-defaults.$prefix}columns-row-gap: #{important.insert(
                 $value
               )};
           }
 
           &#{flex-columns-defaults.$flex-columns-selector} {
-            --#{root-defaults.$prefix}-flex-columns-row-gap: #{important.insert(
+            --#{root-defaults.$prefix}flex-columns-row-gap: #{important.insert(
                 $value
               )};
           }
@@ -75,16 +78,21 @@
       }
     }
 
+    $selector: "#{$selector-prefix}#{$name}-auto";
+
     // Create the "auto" utility class.
-    @include utility.create("#{$name}-auto", $property, auto);
+    @include utility.create($selector, $property, auto);
   }
 
-  // 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 spacing property, create a utility class.
       @each $name, $property in defaults.$spacing-properties {
         @each $key, $value in root-variables.$spacers {
-          $selector: ".#{$screen-size}#{root-defaults.$responsive-separator}#{$name}-#{$key}";
+          $selector: "#{$selector-prefix}#{$name}-#{$key}";
 
           // If we're dealing with gap, column-gap, or row-gap inside of #{columns-defaults.$columns-selector}, we should update
           // the columns-column-gap property instead of the raw property.
@@ -93,22 +101,22 @@
               $selector,
               $property,
               $value,
-              $screen-size
+              $screen: $screen-name
             ) {
               &#{columns-defaults.$columns-selector} {
-                --#{root-defaults.$prefix}-columns-column-gap: #{important.insert(
+                --#{root-defaults.$prefix}columns-column-gap: #{important.insert(
                     $value
                   )};
-                --#{root-defaults.$prefix}-columns-row-gap: #{important.insert(
+                --#{root-defaults.$prefix}columns-row-gap: #{important.insert(
                     $value
                   )};
               }
 
               &#{flex-columns-defaults.$flex-columns-selector} {
-                --#{root-defaults.$prefix}-flex-columns-column-gap: #{important.insert(
+                --#{root-defaults.$prefix}flex-columns-column-gap: #{important.insert(
                     $value
                   )};
-                --#{root-defaults.$prefix}-flex-columns-row-gap: #{important.insert(
+                --#{root-defaults.$prefix}flex-columns-row-gap: #{important.insert(
                     $value
                   )};
               }
@@ -118,16 +126,16 @@
               $selector,
               $property,
               $value,
-              $screen-size
+              $screen: $screen-name
             ) {
               &#{columns-defaults.$columns-selector} {
-                --#{root-defaults.$prefix}-columns-column-gap: #{important.insert(
+                --#{root-defaults.$prefix}columns-column-gap: #{important.insert(
                     $value
                   )};
               }
 
               &#{flex-columns-defaults.$flex-columns-selector} {
-                --#{root-defaults.$prefix}-flex-columns-column-gap: #{important.insert(
+                --#{root-defaults.$prefix}flex-columns-column-gap: #{important.insert(
                     $value
                   )};
               }
@@ -137,31 +145,236 @@
               $selector,
               $property,
               $value,
-              $screen-size
+              $screen: $screen-name
             ) {
               &#{columns-defaults.$columns-selector} {
-                --#{root-defaults.$prefix}-columns-row-gap: #{important.insert(
+                --#{root-defaults.$prefix}columns-row-gap: #{important.insert(
                     $value
                   )};
               }
 
               &#{flex-columns-defaults.$flex-columns-selector} {
-                --#{root-defaults.$prefix}-flex-columns-row-gap: #{important.insert(
+                --#{root-defaults.$prefix}flex-columns-row-gap: #{important.insert(
                     $value
                   )};
               }
             }
           } @else {
-            @include utility.create($selector, $property, $value, $screen-size);
+            @include utility.create(
+              $selector,
+              $property,
+              $value,
+              $screen: $screen-name
+            );
           }
         }
 
+        $selector: "#{$selector-prefix}#{$name}-auto";
+
+        // Create the "auto" utility class.
+        @include utility.create(
+          $selector,
+          $property,
+          auto,
+          $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 spacing property, create a utility class.
+        @each $name, $property in defaults.$spacing-properties {
+          @each $key, $value in root-variables.$spacers {
+            $selector: "#{$selector-prefix}#{$name}-#{$key}";
+
+            // If we're dealing with gap, column-gap, or row-gap inside of #{columns-defaults.$columns-selector}, we should update
+            // the columns-column-gap property instead of the raw property.
+            @if $name == "g" {
+              @include utility.create(
+                $selector,
+                $property,
+                $value,
+                $theme: $theme-name
+              ) {
+                &#{columns-defaults.$columns-selector} {
+                  --#{root-defaults.$prefix}columns-column-gap: #{important.insert(
+                      $value
+                    )};
+                  --#{root-defaults.$prefix}columns-row-gap: #{important.insert(
+                      $value
+                    )};
+                }
+
+                &#{flex-columns-defaults.$flex-columns-selector} {
+                  --#{root-defaults.$prefix}flex-columns-column-gap: #{important.insert(
+                      $value
+                    )};
+                  --#{root-defaults.$prefix}flex-columns-row-gap: #{important.insert(
+                      $value
+                    )};
+                }
+              }
+            } @else if $name == "cg" {
+              @include utility.create(
+                $selector,
+                $property,
+                $value,
+                $theme: $theme-name
+              ) {
+                &#{columns-defaults.$columns-selector} {
+                  --#{root-defaults.$prefix}columns-column-gap: #{important.insert(
+                      $value
+                    )};
+                }
+
+                &#{flex-columns-defaults.$flex-columns-selector} {
+                  --#{root-defaults.$prefix}flex-columns-column-gap: #{important.insert(
+                      $value
+                    )};
+                }
+              }
+            } @else if $name == "rg" {
+              @include utility.create(
+                $selector,
+                $property,
+                $value,
+                $theme: $theme-name
+              ) {
+                &#{columns-defaults.$columns-selector} {
+                  --#{root-defaults.$prefix}columns-row-gap: #{important.insert(
+                      $value
+                    )};
+                }
+
+                &#{flex-columns-defaults.$flex-columns-selector} {
+                  --#{root-defaults.$prefix}flex-columns-row-gap: #{important.insert(
+                      $value
+                    )};
+                }
+              }
+            } @else {
+              @include utility.create(
+                $selector,
+                $property,
+                $value,
+                $theme: $theme-name
+              );
+            }
+          }
+
+          $selector: "#{$selector-prefix}#{$name}-auto";
+
+          // Create the "auto" utility class.
+          @include utility.create(
+            $selector,
+            $property,
+            auto,
+            $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 spacing property, create a utility class.
+      @each $name, $property in defaults.$spacing-properties {
+        @each $key, $value in root-variables.$spacers {
+          $selector: "#{$selector-prefix}#{$name}-#{$key}";
+
+          // If we're dealing with gap, column-gap, or row-gap inside of #{columns-defaults.$columns-selector}, we should update
+          // the columns-column-gap property instead of the raw property.
+          @if $name == "g" {
+            @include utility.create(
+              $selector,
+              $property,
+              $value,
+              $state: $state-name
+            ) {
+              &#{columns-defaults.$columns-selector} {
+                --#{root-defaults.$prefix}columns-column-gap: #{important.insert(
+                    $value
+                  )};
+                --#{root-defaults.$prefix}columns-row-gap: #{important.insert(
+                    $value
+                  )};
+              }
+
+              &#{flex-columns-defaults.$flex-columns-selector} {
+                --#{root-defaults.$prefix}flex-columns-column-gap: #{important.insert(
+                    $value
+                  )};
+                --#{root-defaults.$prefix}flex-columns-row-gap: #{important.insert(
+                    $value
+                  )};
+              }
+            }
+          } @else if $name == "cg" {
+            @include utility.create(
+              $selector,
+              $property,
+              $value,
+              $state: $state-name
+            ) {
+              &#{columns-defaults.$columns-selector} {
+                --#{root-defaults.$prefix}columns-column-gap: #{important.insert(
+                    $value
+                  )};
+              }
+
+              &#{flex-columns-defaults.$flex-columns-selector} {
+                --#{root-defaults.$prefix}flex-columns-column-gap: #{important.insert(
+                    $value
+                  )};
+              }
+            }
+          } @else if $name == "rg" {
+            @include utility.create(
+              $selector,
+              $property,
+              $value,
+              $state: $state-name
+            ) {
+              &#{columns-defaults.$columns-selector} {
+                --#{root-defaults.$prefix}columns-row-gap: #{important.insert(
+                    $value
+                  )};
+              }
+
+              &#{flex-columns-defaults.$flex-columns-selector} {
+                --#{root-defaults.$prefix}flex-columns-row-gap: #{important.insert(
+                    $value
+                  )};
+              }
+            }
+          } @else {
+            @include utility.create(
+              $selector,
+              $property,
+              $value,
+              $state: $state-name
+            );
+          }
+        }
+
+        $selector: "#{$selector-prefix}#{$name}-auto";
+
         // Create the "auto" utility class.
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{$name}-auto",
+          $selector,
           $property,
           auto,
-          $screen-size
+          $state: $state-name
         );
       }
     }

package/src/scss/utilities/typography/_defaults.scss

@@ -9,13 +9,13 @@
 @use "sass:map";
 
 // Text size properties.
-$text-class-prefix: "text-" !default;
+$text-selector-prefix: "text-" !default;
 
 // Font weight properties.
-$font-weight-class-prefix: "font-" !default;
+$font-weight-selector-prefix: "font-" !default;
 
 // Font style properties.
-$font-style-class-prefix: "font-" !default;
+$font-style-selector-prefix: "font-" !default;
 $base-font-style-properties: (
   normal: normal,
   italic: italic,
@@ -26,5 +26,21 @@ $font-style-properties: map.merge(
   $custom-font-style-properties
 );
 
-// Responsive utility flag.
-$responsive: false !default;
+// Text transform properties.
+$text-transform-selector-prefix: "text-" !default;
+$base-text-transform-properties: (
+  uppercase: uppercase,
+  lowercase: lowercase,
+  capitalize: capitalize,
+  none: none,
+);
+$custom-text-transform-properties: () !default;
+$text-transform-properties: map.merge(
+  $base-text-transform-properties,
+  $custom-text-transform-properties
+);
+
+// Utility modifier flags.
+$screen-aware: false !default;
+$theme-aware: false !default;
+$state-aware: false !default;