@graupl/graupl 1.0.0-alpha.8 → 1.0.0-beta.0

package/src/scss/theme/color/_variables.scss

@@ -1,4 +1,7 @@
-// Variables referencing custom properties.
+// @graupl/graupl color theme variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
 
 @use "defaults";
 @use "../../defaults" as root-defaults;
@@ -37,85 +40,90 @@ $colors: ();
   );
 }
 
-// Theme properties.
-$theme-light: ();
-$theme-dark: ();
-$theme-active: ();
+$themes: (
+  active: (),
+);
 
-// Create a map for each colour theme.
-@each $color, $map in $colors {
-  // Maps for the current colour theme variants.
-  $light-map: ();
-  $dark-map: ();
-  $active-map: ();
+// Generate all of the theme properties.
+@each $theme-name, $theme-map in defaults.$theme-map {
+  $theme: ();
 
-  @each $shade, $value in $map {
-    // Get the dark shade and value.
-    $dark-shade: map.get(defaults.$dark-map, $shade);
-    $dark-value: map.get($map, $dark-shade);
+  @each $color-name, $map in $theme-map {
+    $color-map: ();
 
-    // Set the custom prop names and fallback values.
-    $light-property: var(
-      --#{root-defaults.$prefix}-theme-light--#{$color}--#{$shade},
-      $value
-    );
-    $dark-property: var(
-      --#{root-defaults.$prefix}-theme-dark--#{$color}--#{$shade},
-      $dark-value
-    );
-    $active-property: var(
-      --#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade},
-      $light-property
-    );
+    @each $shade, $value in $map {
+      $color-property: var(
+        --#{root-defaults.$prefix}-theme-#{$theme-name}--#{$color-name}--#{$shade},
+        #{map.get($colors, map.get($value, color), map.get($value, shade))}
+      );
+      $color-map: map.merge(
+        $color-map,
+        (
+          $shade: $color-property,
+        )
+      );
+    }
 
-    // Add the custom props to the maps.
-    $light-map: map.merge(
-      $light-map,
+    $theme: map.merge(
+      $theme,
       (
-        $shade: $light-property,
+        $color-name: $color-map,
       )
     );
-    $dark-map: map.merge(
-      $dark-map,
-      (
-        $shade: $dark-property,
-      )
+  }
+
+  $themes: map.merge(
+    $themes,
+    (
+      $theme-name: $theme,
+    )
+  );
+}
+
+// Generate the active theme properties.
+@each $color-name, $map in map.get($themes, defaults.$default-theme) {
+  $color-map: ();
+
+  @each $shade, $value in $map {
+    $color-property: var(
+      --#{root-defaults.$prefix}-theme-active--#{$color-name}--#{$shade},
+      #{$value}
     );
-    $active-map: map.merge(
-      $active-map,
+    $color-map: map.merge(
+      $color-map,
       (
-        $shade: $active-property,
+        $shade: $color-property,
       )
     );
   }
 
-  // Merge the theme maps with the existing themes.
-  $theme-light: map.merge(
-    $theme-light,
-    (
-      $color: $light-map,
-    )
-  );
-  $theme-dark: map.merge(
-    $theme-dark,
-    (
-      $color: $dark-map,
-    )
-  );
-  $theme-active: map.merge(
-    $theme-active,
+  $themes: map.merge(
+    $themes,
     (
-      $color: $active-map,
+      active: map.merge(
+          map.get($themes, active),
+          (
+            $color-name: $color-map,
+          )
+        ),
     )
   );
 }
 
 // Colour properties.
-$root-font-color: var(
-  --#{root-defaults.$prefix}-root-font-color,
-  #{map.get(map.get($theme-active, primary), 900)}
-);
-$root-background: var(
-  --#{root-defaults.$prefix}-root-background,
-  #{map.get(map.get($theme-active, primary), 100)}
-);
+$root-color: var(--#{root-defaults.$prefix}-root-color);
+$root-background: var(--#{root-defaults.$prefix}-root-background);
+
+@if map.has-key($themes, active, primary, 900) {
+  $root-color: var(
+    --#{root-defaults.$prefix}-root-color,
+    #{map.get(map.get(map.get($themes, active), primary), 900)}
+  );
+}
+
+@if map.has-key($themes, active, primary, 100) {
+  $root-background: var(
+    --#{root-defaults.$prefix}-root-background,
+    #{map.get(map.get(map.get($themes, active), primary), 100)}
+  );
+}

package/src/scss/theme/typography/_defaults.scss

@@ -1,13 +1,15 @@
-// Default values for Graupl.
+// @graupl/graupl typography theme default values.
 //
-// Generally, these should not be used directly when styling components.
-// They are mainly used to provide default fallbacks for custom properties
-// which can be found in the `variables.scss` file.
+// 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";
 
 // font properties.
-$font-size: 1rem !default;
+$font-size-base: 1rem !default;
 $root-font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem) !default;
 $line-height: 1.2em !default;
 

package/src/scss/theme/typography/_index.scss

@@ -1,4 +1,4 @@
-// Typography theme styles.
+// @graupl/graupl typography theme styles.
 
 @use "variables" as *;
 @use "../../mixins/layer" as *;

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

@@ -1,4 +1,7 @@
-// Variables referencing custom properties.
+// @graupl/graupl typography theme variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
 
 @use "defaults";
 @use "../../defaults" as root-defaults;
@@ -6,7 +9,10 @@
 @use "sass:map";
 
 // Font properties.
-$font-size: var(--#{root-defaults.$prefix}-font-base, #{defaults.$font-size});
+$font-size-base: var(
+  --#{root-defaults.$prefix}-font-size-base,
+  #{defaults.$font-size-base}
+);
 $line-height: var(
   --#{root-defaults.$prefix}-line-height,
   #{defaults.$line-height}
@@ -18,7 +24,7 @@ $font-sizes: ();
 @each $key, $value in defaults.$font-size-multipliers {
   $size: var(
     --#{root-defaults.$prefix}-font-#{$key},
-    calc(#{$value} * #{$font-size})
+    calc(#{$value} * #{$font-size-base})
   );
   $font-sizes: map.set($font-sizes, $key, $size);
 }
@@ -102,10 +108,8 @@ $heading-line-height: var(
 );
 $heading-margin: var(
   --#{root-defaults.$prefix}-heading-margin,
-  #{map.get(root-variables.$spacers, 5)} 0 #{map.get(
-      root-variables.$spacers,
-      2
-    )} 0
+  #{map.get(root-variables.$spacers, 5)} 0
+    #{map.get(root-variables.$spacers, 2)} 0
 );
 $heading-font-weight: var(
   --#{root-defaults.$prefix}-heading-font-weight,

package/src/scss/utilities/_index.scss

@@ -1,5 +1,17 @@
-// Graupl utilities.
+// @graupl/graupl utilities styles.
 
-@forward "colors";
+@forward "alignment";
+@forward "color";
+@forward "display";
+@forward "flex";
+@forward "height";
+@forward "inset";
+@forward "justification";
+@forward "list";
+@forward "order";
+@forward "position";
+@forward "ratio";
 @forward "spacing";
 @forward "typography";
+@forward "visibility";
+@forward "width";

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

@@ -0,0 +1,62 @@
+// @graupl/graupl alignment 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";
+
+// Align content properties.
+$align-content-class-prefix: "align-content-" !default;
+$base-align-content-properties: (
+  normal: normal,
+  start: flex-start,
+  end: flex-end,
+  center: center,
+  between: space-between,
+  around: space-around,
+  evenly: space-evenly,
+  baseline: baseline,
+  stretch: stretch,
+);
+$custom-align-content-properties: () !default;
+$align-content-properties: map.merge(
+  $base-align-content-properties,
+  $custom-align-content-properties
+);
+
+// Align items properties.
+$align-items-class-prefix: "align-items-" !default;
+$base-align-items-properties: (
+  start: start,
+  end: end,
+  center: center,
+  baseline: baseline,
+  stretch: stretch,
+);
+$custom-align-items-properties: () !default;
+$align-items-properties: map.merge(
+  $base-align-items-properties,
+  $custom-align-items-properties
+);
+
+// Align self properties.
+$align-self-class-prefix: "align-self-" !default;
+$base-align-self-properties: (
+  auto: auto,
+  start: start,
+  end: end,
+  center: center,
+  baseline: baseline,
+  stretch: stretch,
+);
+$custom-align-self-properties: () !default;
+$align-self-properties: map.merge(
+  $base-align-self-properties,
+  $custom-align-self-properties
+);
+
+// Responsive utility flag.
+$responsive: false !default;

package/src/scss/utilities/alignment/_index.scss

@@ -0,0 +1,75 @@
+// @graupl/graupl alignment 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 "../../mixins/layer" as *;
+@use "../../mixins/utility";
+@use "defaults";
+@use "sass:map";
+@use "variables" as *;
+
+@include layer(utilities) {
+  // 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
+    );
+  }
+
+  // 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
+    );
+  }
+
+  // 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
+    );
+  }
+
+  // Generate responsive utilities.
+  @if defaults.$responsive and root-defaults.$responsive-utilities {
+    @each $screen-size in map.keys(root-defaults.$screen-sizes) {
+      // For each align content property, create a utility class.
+      @each $name, $value in defaults.$align-content-properties {
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$align-content-class-prefix}#{$name}",
+          align-content,
+          $value,
+          $screen-size
+        );
+      }
+
+      // For each align items property, create a utility class.
+      @each $name, $value in defaults.$align-items-properties {
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$align-items-class-prefix}#{$name}",
+          align-items,
+          $value,
+          $screen-size
+        );
+      }
+
+      // For each align self property, create a utility class.
+      @each $name, $value in defaults.$align-self-properties {
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$align-self-class-prefix}#{$name}",
+          align-self,
+          $value,
+          $screen-size
+        );
+      }
+    }
+  }
+}

package/src/scss/utilities/alignment/_variables.scss

@@ -0,0 +1,6 @@
+// @graupl/graupl alignment 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

@@ -0,0 +1,35 @@
+// @graupl/graupl color 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";
+
+// Background utility properties.
+$background-class-prefix: "bg-" !default;
+$base-background-properties: (
+  inherit: inherit,
+  current: currentcolor,
+  transparent: transparent,
+);
+$custom-background-properties: () !default;
+$background-properties: map.merge(
+  $base-background-properties,
+  $custom-background-properties
+);
+
+// Text utility properties.
+$text-class-prefix: "text-" !default;
+$base-text-properties: (
+  inherit: inherit,
+  current: currentcolor,
+  transparent: transparent,
+);
+$custom-text-properties: () !default;
+$text-properties: map.merge($base-text-properties, $custom-text-properties);
+
+// Responsive utility flag.
+$responsive: false !default;

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

@@ -0,0 +1,91 @@
+// @graupl/graupl color 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 "../../mixins/layer" as *;
+@use "../../mixins/utility";
+@use "../../theme/color/variables" as color;
+@use "defaults";
+@use "sass:map";
+@use "variables" as *;
+
+@include layer(utilities) {
+  // 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
+      );
+    }
+  }
+
+  // For each background property, create a utility class.
+  @each $name, $value in defaults.$background-properties {
+    $selector: ".#{defaults.$background-class-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}";
+
+    @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) {
+      // 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(
+            ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$background-class-prefix}#{$name}",
+            background,
+            $value,
+            $screen-size
+          );
+          @include utility.create(
+            ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$text-class-prefix}#{$name}",
+            color,
+            $value,
+            $screen-size
+          );
+        }
+      }
+
+      // For each background property, create a utility class.
+      @each $name, $value in defaults.$background-properties {
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$background-class-prefix}#{$name}",
+          background,
+          $value,
+          $screen-size
+        );
+      }
+
+      // For each text property, create a utility class.
+      @each $name, $value in defaults.$text-properties {
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$text-class-prefix}#{$name}",
+          color,
+          $value,
+          $screen-size
+        );
+      }
+    }
+  }
+}

package/src/scss/utilities/color/_variables.scss

@@ -0,0 +1,6 @@
+// @graupl/graupl color 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/display/_defaults.scss

@@ -0,0 +1,32 @@
+// @graupl/graupl display 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";
+
+$display-class-prefix: "display-" !default;
+$base-display-properties: (
+  block: block,
+  inline-block: inline-block,
+  inline: inline,
+  flex: flex,
+  inline-flex: inline-flex,
+  grid: grid,
+  inline-grid: inline-grid,
+  flow-root: flow-root,
+  none: none,
+  contents: contents,
+  list-item: list-item,
+);
+$custom-display-properties: () !default;
+$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;

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

@@ -0,0 +1,61 @@
+// @graupl/graupl display 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 "../../mixins/layer" as *;
+@use "../../mixins/screen";
+@use "../../mixins/utility";
+@use "../../mixins/visually-hidden";
+@use "defaults";
+@use "sass:map";
+@use "variables" as *;
+
+@include layer(utilities) {
+  // 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
+    );
+  }
+
+  // Visually hidden utility classes.
+  #{defaults.$visually-hidden-class} {
+    @include visually-hidden.apply;
+  }
+
+  #{defaults.$visually-hidden-focusable-class} {
+    @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) {
+      // For each display property, create a utility class.
+      @each $name, $property in defaults.$display-properties {
+        @include utility.create(
+          ".#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$display-class-prefix}#{$name}",
+          display,
+          $property,
+          $screen-size
+        );
+      }
+
+      // Visually hidden utility classes.
+      .#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$visually-hidden-class} {
+        @include screen.up($screen-size) {
+          @include visually-hidden.apply;
+        }
+      }
+
+      .#{$screen-size}#{root-defaults.$responsive-separator}#{defaults.$visually-hidden-focusable-class} {
+        @include screen.up($screen-size) {
+          @include visually-hidden.focusable;
+        }
+      }
+    }
+  }
+}

package/src/scss/utilities/display/_variables.scss

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