@graupl/graupl 1.0.0-alpha.9 → 1.0.0-beta.1

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

@@ -1,7 +1,8 @@
-// Color theme styles.
+// @graupl/graupl color theme styles.
 
 @use "variables" as *;
 @use "../../mixins/layer" as *;
+@use "defaults";
 @use "../../defaults" as root-defaults;
 @use "sass:map";
 @use "../../functions/theme";
@@ -9,34 +10,33 @@
 @include layer(theme) {
   :root {
     background: $root-background;
-    color: $root-font-color;
+    color: $root-color;
 
-    @each $color, $map in $theme-light {
+    // Generate the default colour properties.
+    @each $color, $map in defaults.$colors {
       @each $shade, $value in $map {
-        --#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
+        --#{root-defaults.$prefix}#{$color}--#{$shade}: #{$value};
       }
     }
-  }
 
-  // Set the active theme for dark mode.
-  .dark-mode {
-    @each $color, $map in $theme-dark {
+    // Generate the active theme properties.
+    @each $color, $map in map.get($themes, defaults.$default-theme) {
       @each $shade, $value in $map {
-        --#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
+        --#{root-defaults.$prefix}theme-active--#{$color}--#{$shade}: #{$value};
       }
     }
-
-    color-scheme: dark;
   }
 
-  // Set the active theme for light mode.
-  .light-mode {
-    @each $color, $map in $theme-light {
-      @each $shade, $value in $map {
-        --#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
+  // Generate the available theme properties.
+  @each $theme-name, $theme in $themes {
+    #{defaults.$theme-selector-prefix}#{$theme-name}#{defaults.$theme-selector-suffix} {
+      @each $color, $map in $theme {
+        @each $shade, $value in $map {
+          --#{root-defaults.$prefix}theme-active--#{$color}--#{$shade}: #{$value};
+        }
       }
-    }
 
-    color-scheme: light;
+      color-scheme: #{$theme-name};
+    }
   }
 }

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;
@@ -15,7 +18,7 @@ $colors: ();
   @each $shade, $value in $map {
     // Set the custom prop name and fallback value.
     $color-property: var(
-      --#{root-defaults.$prefix}-#{$color}--#{$shade},
+      --#{root-defaults.$prefix}#{$color}--#{$shade},
       $value
     );
 
@@ -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,9 +9,12 @@
 @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,
+  --#{root-defaults.$prefix}line-height,
   #{defaults.$line-height}
 );
 
@@ -17,8 +23,8 @@ $font-sizes: ();
 
 @each $key, $value in defaults.$font-size-multipliers {
   $size: var(
-    --#{root-defaults.$prefix}-font-#{$key},
-    calc(#{$value} * #{$font-size})
+    --#{root-defaults.$prefix}font-#{$key},
+    calc(#{$value} * #{$font-size-base})
   );
   $font-sizes: map.set($font-sizes, $key, $size);
 }
@@ -26,202 +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,
-  #{map.get(root-variables.$spacers, 5)} 0 #{map.get(
-      root-variables.$spacers,
-      2
-    )} 0
+  --#{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,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;