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

package/src/scss/theme/typography/_variables.scss

@@ -10,11 +10,11 @@
 
 // Font properties.
 $font-size-base: var(
-  --#{root-defaults.$prefix}-font-size-base,
+  --#{root-defaults.$prefix}font-size-base,
   #{defaults.$font-size-base}
 );
 $line-height: var(
-  --#{root-defaults.$prefix}-line-height,
+  --#{root-defaults.$prefix}line-height,
   #{defaults.$line-height}
 );
 
@@ -23,7 +23,7 @@ $font-sizes: ();
 
 @each $key, $value in defaults.$font-size-multipliers {
   $size: var(
-    --#{root-defaults.$prefix}-font-#{$key},
+    --#{root-defaults.$prefix}font-#{$key},
     calc(#{$value} * #{$font-size-base})
   );
   $font-sizes: map.set($font-sizes, $key, $size);
@@ -32,200 +32,200 @@ $font-sizes: ();
 $font-weights: ();
 
 @each $key, $value in defaults.$font-weights {
-  $weight: var(--#{root-defaults.$prefix}-font-weight-#{$key}, $value);
+  $weight: var(--#{root-defaults.$prefix}font-weight-#{$key}, $value);
   $font-weights: map.set($font-weights, $key, $weight);
 }
 
 $font-weight-bold: var(
-  --#{root-defaults.$prefix}-font-weight-bold,
+  --#{root-defaults.$prefix}font-weight-bold,
   #{map.get($font-weights, bold)}
 );
 
 // Root properties.
 $root-font-family: var(
-  --#{root-defaults.$prefix}-root-font-family,
+  --#{root-defaults.$prefix}root-font-family,
   #{defaults.$root-font-family}
 );
 $root-font-size: var(
-  --#{root-defaults.$prefix}-root-font-size,
+  --#{root-defaults.$prefix}root-font-size,
   #{defaults.$root-font-size}
 );
 
 // Typography properties.
 $body-font-size: var(
-  --#{root-defaults.$prefix}-body-font-size,
+  --#{root-defaults.$prefix}body-font-size,
   #{map.get($font-sizes, base)}
 );
 $body-line-height: var(
-  --#{root-defaults.$prefix}-body-line-height,
+  --#{root-defaults.$prefix}body-line-height,
   #{$line-height}
 );
 $body-font-weight: var(
-  --#{root-defaults.$prefix}-body-font-weight,
+  --#{root-defaults.$prefix}body-font-weight,
   #{map.get($font-weights, normal)}
 );
 $paragraph-font-size: var(
-  --#{root-defaults.$prefix}-paragraph-font-size,
+  --#{root-defaults.$prefix}paragraph-font-size,
   #{$body-font-size}
 );
 $paragraph-line-height: var(
-  --#{root-defaults.$prefix}-paragraph-line-height,
+  --#{root-defaults.$prefix}paragraph-line-height,
   #{$body-line-height}
 );
 $paragraph-margin: var(
-  --#{root-defaults.$prefix}-paragraph-margin,
+  --#{root-defaults.$prefix}paragraph-margin,
   0 0 #{map.get(root-variables.$spacers, 2)} 0
 );
 $paragraph-font-weight: var(
-  --#{root-defaults.$prefix}-paragraph-font-weight,
+  --#{root-defaults.$prefix}paragraph-font-weight,
   #{$body-font-weight}
 );
 $small-font-size: var(
-  --#{root-defaults.$prefix}-small-font-size,
+  --#{root-defaults.$prefix}small-font-size,
   #{map.get($font-sizes, sm)}
 );
 $small-line-height: var(
-  --#{root-defaults.$prefix}-small-line-height,
+  --#{root-defaults.$prefix}small-line-height,
   #{$line-height}
 );
 $small-margin: var(
-  --#{root-defaults.$prefix}-small-margin,
+  --#{root-defaults.$prefix}small-margin,
   0 0 #{map.get(root-variables.$spacers, 2)} 0
 );
 $small-font-weight: var(
-  --#{root-defaults.$prefix}-small-font-weight,
+  --#{root-defaults.$prefix}small-font-weight,
   #{$body-font-weight}
 );
 
 // Headings properties.
 $heading-font-family: var(
-  --#{root-defaults.$prefix}-heading-font-family,
+  --#{root-defaults.$prefix}heading-font-family,
   $root-font-family
 );
 $heading-line-height: var(
-  --#{root-defaults.$prefix}-heading-line-height,
+  --#{root-defaults.$prefix}heading-line-height,
   #{$line-height}
 );
 $heading-margin: var(
-  --#{root-defaults.$prefix}-heading-margin,
+  --#{root-defaults.$prefix}heading-margin,
   #{map.get(root-variables.$spacers, 5)} 0
     #{map.get(root-variables.$spacers, 2)} 0
 );
 $heading-font-weight: var(
-  --#{root-defaults.$prefix}-heading-font-weight,
+  --#{root-defaults.$prefix}heading-font-weight,
   #{$font-weight-bold}
 );
 
 // H1 properties.
 $h1-font-size: var(
-  --#{root-defaults.$prefix}-h1-font-size,
+  --#{root-defaults.$prefix}h1-font-size,
   #{map.get($font-sizes, 5xl)}
 );
 $h1-line-height: var(
-  --#{root-defaults.$prefix}-h1-line-height,
+  --#{root-defaults.$prefix}h1-line-height,
   #{$heading-line-height}
 );
-$h1-margin: var(--#{root-defaults.$prefix}-h1-margin, #{$heading-margin});
+$h1-margin: var(--#{root-defaults.$prefix}h1-margin, #{$heading-margin});
 $h1-font-family: var(
-  --#{root-defaults.$prefix}-h1-font-family,
+  --#{root-defaults.$prefix}h1-font-family,
   $heading-font-family
 );
 $h1-font-weight: var(
-  --#{root-defaults.$prefix}-h1-font-weight,
+  --#{root-defaults.$prefix}h1-font-weight,
   $heading-font-weight
 );
 
 // H2 properties.
 $h2-font-size: var(
-  --#{root-defaults.$prefix}-h2-font-size,
+  --#{root-defaults.$prefix}h2-font-size,
   #{map.get($font-sizes, 4xl)}
 );
 $h2-line-height: var(
-  --#{root-defaults.$prefix}-h2-line-height,
+  --#{root-defaults.$prefix}h2-line-height,
   #{$heading-line-height}
 );
-$h2-margin: var(--#{root-defaults.$prefix}-h2-margin, #{$heading-margin});
+$h2-margin: var(--#{root-defaults.$prefix}h2-margin, #{$heading-margin});
 $h2-font-family: var(
-  --#{root-defaults.$prefix}-h2-font-family,
+  --#{root-defaults.$prefix}h2-font-family,
   $heading-font-family
 );
 $h2-font-weight: var(
-  --#{root-defaults.$prefix}-h2-font-weight,
+  --#{root-defaults.$prefix}h2-font-weight,
   $heading-font-weight
 );
 
 // H3 properties.
 $h3-font-size: var(
-  --#{root-defaults.$prefix}-h3-font-size,
+  --#{root-defaults.$prefix}h3-font-size,
   #{map.get($font-sizes, 3xl)}
 );
 $h3-line-height: var(
-  --#{root-defaults.$prefix}-h3-line-height,
+  --#{root-defaults.$prefix}h3-line-height,
   #{$heading-line-height}
 );
-$h3-margin: var(--#{root-defaults.$prefix}-h3-margin, #{$heading-margin});
+$h3-margin: var(--#{root-defaults.$prefix}h3-margin, #{$heading-margin});
 $h3-font-family: var(
-  --#{root-defaults.$prefix}-h3-font-family,
+  --#{root-defaults.$prefix}h3-font-family,
   $heading-font-family
 );
 $h3-font-weight: var(
-  --#{root-defaults.$prefix}-h3-font-weight,
+  --#{root-defaults.$prefix}h3-font-weight,
   $heading-font-weight
 );
 
 // H4 properties.
 $h4-font-size: var(
-  --#{root-defaults.$prefix}-h4-font-size,
+  --#{root-defaults.$prefix}h4-font-size,
   #{map.get($font-sizes, 2xl)}
 );
 $h4-line-height: var(
-  --#{root-defaults.$prefix}-h4-line-height,
+  --#{root-defaults.$prefix}h4-line-height,
   #{$heading-line-height}
 );
-$h4-margin: var(--#{root-defaults.$prefix}-h4-margin, #{$heading-margin});
+$h4-margin: var(--#{root-defaults.$prefix}h4-margin, #{$heading-margin});
 $h4-font-family: var(
-  --#{root-defaults.$prefix}-h4-font-family,
+  --#{root-defaults.$prefix}h4-font-family,
   $heading-font-family
 );
 $h4-font-weight: var(
-  --#{root-defaults.$prefix}-h4-font-weight,
+  --#{root-defaults.$prefix}h4-font-weight,
   $heading-font-weight
 );
 
 // H5 properties.
 $h5-font-size: var(
-  --#{root-defaults.$prefix}-h5-font-size,
+  --#{root-defaults.$prefix}h5-font-size,
   #{map.get($font-sizes, xl)}
 );
 $h5-line-height: var(
-  --#{root-defaults.$prefix}-h5-line-height,
+  --#{root-defaults.$prefix}h5-line-height,
   #{$heading-line-height}
 );
-$h5-margin: var(--#{root-defaults.$prefix}-h5-margin, #{$heading-margin});
+$h5-margin: var(--#{root-defaults.$prefix}h5-margin, #{$heading-margin});
 $h5-font-family: var(
-  --#{root-defaults.$prefix}-h5-font-family,
+  --#{root-defaults.$prefix}h5-font-family,
   $heading-font-family
 );
 $h5-font-weight: var(
-  --#{root-defaults.$prefix}-h5-font-weight,
+  --#{root-defaults.$prefix}h5-font-weight,
   $heading-font-weight
 );
 
 // H6 properties.
 $h6-font-size: var(
-  --#{root-defaults.$prefix}-h6-font-size,
+  --#{root-defaults.$prefix}h6-font-size,
   #{map.get($font-sizes, lg)}
 );
 $h6-line-height: var(
-  --#{root-defaults.$prefix}-h6-line-height,
+  --#{root-defaults.$prefix}h6-line-height,
   #{$heading-line-height}
 );
-$h6-margin: var(--#{root-defaults.$prefix}-h6-margin, #{$heading-margin});
+$h6-margin: var(--#{root-defaults.$prefix}h6-margin, #{$heading-margin});
 $h6-font-family: var(
-  --#{root-defaults.$prefix}-h6-font-family,
+  --#{root-defaults.$prefix}h6-font-family,
   $heading-font-family
 );
 $h6-font-weight: var(
-  --#{root-defaults.$prefix}-h6-font-weight,
+  --#{root-defaults.$prefix}h6-font-weight,
   $heading-font-weight
 );

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;