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

package/src/scss/mixins/_utility.scss

@@ -3,28 +3,130 @@
 // Mixins to help generate utility classes.
 
 @use "./screen";
+@use "./state";
+@use "./theme";
 @use "../functions/important";
+@use "../functions/utility";
 @use "../defaults" as root-defaults;
-@use "sass:map";
-
-@mixin create($selector, $property, $value, $breakpoint: false) {
-  #{$selector} {
-    @if $breakpoint {
-      @include screen.up($breakpoint) {
-        @each $prop in $property {
-          #{$prop}: important.insert($value);
-        }
 
-        // Allow for custom overrides and additional styles.
-        @content;
-      }
-    } @else {
-      @each $prop in $property {
-        #{$prop}: important.insert($value);
-      }
+/// Insert a map of properties and values into a utility class.
+///
+/// @param {Map} $map
+///   The map of properties and values to apply to the selector.
+@mixin _insert($map) {
+  @each $prop, $value in $map {
+    #{$prop}: important.insert($value);
+  }
+
+  // Allow for custom overrides and additional styles.
+  @content;
+}
+
+/// Handles wrapping utilities with a conditional state.
+///
+/// @param {?string} $state
+///   The state to wrap.
+@mixin _handle-state($state: null) {
+  @if $state {
+    @include state.state($state) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+/// Handles wrapping utilities with a conditional screen.
+///
+/// @param {?string} $screen
+///   The screen to wrap.
+@mixin _handle-screen($screen: null) {
+  @if $screen {
+    @include screen.up($screen) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
 
-      // Allow for custom overrides and additional styles.
+/// Handles wrapping utilities with a conditional theme.
+///
+/// @param {?string} $theme
+///   The theme mode to wrap.
+@mixin _handle-theme($theme: null) {
+  @if $theme {
+    @include theme.theme($theme) {
       @content;
     }
+  } @else {
+    @content;
+  }
+}
+
+/// Create a utility class with a list of properties and a single value.
+///
+/// @param {string}      $selector
+///   The selector to apply the utility class to.
+/// @param {string|List} $property
+///   The property/properties to apply to the selector.
+/// @param {string}      $value
+///   The value to apply to the property/properties.
+/// @param {?string}     $screen
+///   The screen to apply the utility class to.
+/// @param {?string}     $theme
+///   The theme mode to apply the utility class to.
+/// @param {?string}     $state
+///   The state to apply the utility class to.
+@mixin create(
+  $selector,
+  $property,
+  $value,
+  $screen: null,
+  $theme: null,
+  $state: null
+) {
+  $map: utility.convert-property-values-to-map($property, $value);
+
+  @include create-mapped(
+    $selector,
+    $map,
+    $screen: $screen,
+    $theme: $theme,
+    $state: $state
+  ) {
+    @content;
+  }
+}
+
+/// Create a utility class with a map of properties and values.
+///
+/// @param {string}  $selector
+///   The selector to apply the utility class to.
+/// @param {Map}     $map
+///   The map of properties and values to apply to the selector.
+/// @param {?string} $screen
+///   The screen to apply the utility class to.
+/// @param {?string} $theme
+///   The theme mode to apply the utility class to.
+/// @param {?string} $state
+///   The state to apply the utility class to.
+@mixin create-mapped(
+  $selector,
+  $map,
+  $screen: null,
+  $theme: null,
+  $state: null
+) {
+  @include _handle-theme($theme) {
+    #{$selector} {
+      @include _handle-screen($screen) {
+        @include _handle-state($state) {
+          @include _insert($map) {
+            @content;
+          }
+        }
+      }
+    }
   }
 }

package/src/scss/theme/color/_index.scss

@@ -1,11 +1,11 @@
 // @graupl/graupl color theme styles.
 
-@use "variables" as *;
+@use "../../defaults" as root-defaults;
 @use "../../mixins/layer" as *;
+@use "../../mixins/theme";
 @use "defaults";
-@use "../../defaults" as root-defaults;
 @use "sass:map";
-@use "../../functions/theme";
+@use "variables" as *;
 
 @include layer(theme) {
   :root {
@@ -29,7 +29,7 @@
 
   // Generate the available theme properties.
   @each $theme-name, $theme in $themes {
-    #{defaults.$theme-selector-prefix}#{$theme-name}#{defaults.$theme-selector-suffix} {
+    @include theme.theme($theme-name) {
       @each $color, $map in $theme {
         @each $shade, $value in $map {
           --#{root-defaults.$prefix}theme-active--#{$color}--#{$shade}: #{$value};

package/src/scss/utilities/_index.scss

@@ -1,6 +1,7 @@
 // @graupl/graupl utilities styles.
 
 @forward "alignment";
+@forward "border";
 @forward "color";
 @forward "display";
 @forward "flex";

package/src/scss/utilities/alignment/_defaults.scss

@@ -9,7 +9,7 @@
 @use "sass:map";
 
 // Align content properties.
-$align-content-class-prefix: "align-content-" !default;
+$align-content-selector-prefix: "align-content-" !default;
 $base-align-content-properties: (
   normal: normal,
   start: flex-start,
@@ -28,7 +28,7 @@ $align-content-properties: map.merge(
 );
 
 // Align items properties.
-$align-items-class-prefix: "align-items-" !default;
+$align-items-selector-prefix: "align-items-" !default;
 $base-align-items-properties: (
   start: start,
   end: end,
@@ -43,7 +43,7 @@ $align-items-properties: map.merge(
 );
 
 // Align self properties.
-$align-self-class-prefix: "align-self-" !default;
+$align-self-selector-prefix: "align-self-" !default;
 $base-align-self-properties: (
   auto: auto,
   start: start,
@@ -58,5 +58,7 @@ $align-self-properties: map.merge(
   $custom-align-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/alignment/_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 align content property, create a utility class.
   @each $name, $value in defaults.$align-content-properties {
-    @include utility.create(
-      ".#{defaults.$align-content-class-prefix}#{$name}",
-      align-content,
-      $value
-    );
+    $selector: "#{$selector-prefix}#{defaults.$align-content-selector-prefix}#{$name}";
+
+    @include utility.create($selector, align-content, $value);
   }
 
   // For each align items property, create a utility class.
   @each $name, $value in defaults.$align-items-properties {
-    @include utility.create(
-      ".#{defaults.$align-items-class-prefix}#{$name}",
-      align-items,
-      $value
-    );
+    $selector: "#{$selector-prefix}#{defaults.$align-items-selector-prefix}#{$name}";
+
+    @include utility.create($selector, align-items, $value);
   }
 
   // For each align self property, create a utility class.
   @each $name, $value in defaults.$align-self-properties {
-    @include utility.create(
-      ".#{defaults.$align-self-class-prefix}#{$name}",
-      align-self,
-      $value
-    );
+    $selector: "#{$selector-prefix}#{defaults.$align-self-selector-prefix}#{$name}";
+
+    @include utility.create($selector, align-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 align content property, create a utility class.
+      @each $name, $value in defaults.$align-content-properties {
+        $selector: "#{$selector-prefix}#{defaults.$align-content-selector-prefix}#{$name}";
+
+        @include utility.create(
+          $selector,
+          align-content,
+          $value,
+          $screen: $screen-name
+        );
+      }
+
+      // For each align items property, create a utility class.
+      @each $name, $value in defaults.$align-items-properties {
+        $selector: "#{$selector-prefix}#{defaults.$align-items-selector-prefix}#{$name}";
+
+        @include utility.create(
+          $selector,
+          align-items,
+          $value,
+          $screen: $screen-name
+        );
+      }
+
+      // For each align self property, create a utility class.
+      @each $name, $value in defaults.$align-self-properties {
+        $selector: "#{$selector-prefix}#{defaults.$align-self-selector-prefix}#{$name}";
+
+        @include utility.create(
+          $selector,
+          align-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 align content property, create a utility class.
+        @each $name, $value in defaults.$align-content-properties {
+          $selector: "#{$selector-prefix}#{defaults.$align-content-selector-prefix}#{$name}";
+
+          @include utility.create(
+            $selector,
+            align-content,
+            $value,
+            $theme: $theme-name
+          );
+        }
+
+        // For each align items property, create a utility class.
+        @each $name, $value in defaults.$align-items-properties {
+          $selector: "#{$selector-prefix}#{defaults.$align-items-selector-prefix}#{$name}";
+
+          @include utility.create(
+            $selector,
+            align-items,
+            $value,
+            $theme: $theme-name
+          );
+        }
+
+        // For each align self property, create a utility class.
+        @each $name, $value in defaults.$align-self-properties {
+          $selector: "#{$selector-prefix}#{defaults.$align-self-selector-prefix}#{$name}";
+
+          @include utility.create(
+            $selector,
+            align-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 align content property, create a utility class.
       @each $name, $value in defaults.$align-content-properties {
+        $selector: "#{$selector-prefix}#{defaults.$align-content-selector-prefix}#{$name}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$align-content-class-prefix}#{$name}",
+          $selector,
           align-content,
           $value,
-          $screen-size
+          $state: $state-name
         );
       }
 
       // For each align items property, create a utility class.
       @each $name, $value in defaults.$align-items-properties {
+        $selector: "#{$selector-prefix}#{defaults.$align-items-selector-prefix}#{$name}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$align-items-class-prefix}#{$name}",
+          $selector,
           align-items,
           $value,
-          $screen-size
+          $state: $state-name
         );
       }
 
       // For each align self property, create a utility class.
       @each $name, $value in defaults.$align-self-properties {
+        $selector: "#{$selector-prefix}#{defaults.$align-self-selector-prefix}#{$name}";
+
         @include utility.create(
-          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$align-self-class-prefix}#{$name}",
+          $selector,
           align-self,
           $value,
-          $screen-size
+          $state: $state-name
         );
       }
     }

package/src/scss/utilities/border/_defaults.scss

@@ -0,0 +1,61 @@
+// @graupl/graupl border utilities default values.
+//
+// Generally, these should not be used directly when styling components unless a static value is needed.
+// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
+//
+// They should not be used to define direct property values (i.e. font-size, color, etc.).
+// Those should be defined as custom properties in the `_variables.scss` file.
+
+@use "sass:map";
+
+// Default border properties.
+$default-border-selector: "bordered" !default;
+
+// Border width properties.
+$border-width-selector-prefix: "border-" !default;
+$base-border-width-properties: (
+  thick: thick,
+  thin: thin,
+  medium: medium,
+  none: none,
+);
+$custom-border-width-properties: () !default;
+$border-widths: map.merge(
+  $base-border-width-properties,
+  $custom-border-width-properties
+);
+
+// Border color properties.
+$border-color-selector-prefix: "border-" !default;
+$base-border-color-properties: (
+  transparent: transparent,
+);
+$custom-border-color-properties: () !default;
+$border-colors: map.merge(
+  $base-border-color-properties,
+  $custom-border-color-properties
+);
+
+// Border style properties.
+$border-style-selector-prefix: "border-" !default;
+$base-border-style-properties: (
+  solid: solid,
+  dashed: dashed,
+  dotted: dotted,
+  double: double,
+  groove: groove,
+  ridge: ridge,
+  inset: inset,
+  outset: outset,
+  none: none,
+);
+$custom-border-style-properties: () !default;
+$border-styles: map.merge(
+  $base-border-style-properties,
+  $custom-border-style-properties
+);
+
+// Utility modifier flags.
+$screen-aware: false !default;
+$theme-aware: false !default;
+$state-aware: false !default;