@graupl/graupl 1.0.0-alpha.2 → 1.0.0-alpha.4

package/scss/theme/_variables.scss

@@ -3,469 +3,119 @@
 @use "defaults";
 @use "sass:map";
 
-// Primary theme colours.
-$primary: (
-  100:
-    var(--#{defaults.$prefix}-primary--100, #{map.get(defaults.$primary, 100)}),
-  200:
-    var(--#{defaults.$prefix}-primary--200, #{map.get(defaults.$primary, 200)}),
-  300:
-    var(--#{defaults.$prefix}-primary--300, #{map.get(defaults.$primary, 300)}),
-  400:
-    var(--#{defaults.$prefix}-primary--400, #{map.get(defaults.$primary, 400)}),
-  500:
-    var(--#{defaults.$prefix}-primary--500, #{map.get(defaults.$primary, 500)}),
-  600:
-    var(--#{defaults.$prefix}-primary--600, #{map.get(defaults.$primary, 600)}),
-  700:
-    var(--#{defaults.$prefix}-primary--700, #{map.get(defaults.$primary, 700)}),
-  800:
-    var(--#{defaults.$prefix}-primary--800, #{map.get(defaults.$primary, 800)}),
-  900:
-    var(--#{defaults.$prefix}-primary--900, #{map.get(defaults.$primary, 900)}),
-);
-
-// Secondary theme colours.
-$secondary: (
-  100:
-    var(
-      --#{defaults.$prefix}-secondary--100,
-      #{map.get(defaults.$secondary, 100)}
-    ),
-  200:
-    var(
-      --#{defaults.$prefix}-secondary--200,
-      #{map.get(defaults.$secondary, 200)}
-    ),
-  300:
-    var(
-      --#{defaults.$prefix}-secondary--300,
-      #{map.get(defaults.$secondary, 300)}
-    ),
-  400:
-    var(
-      --#{defaults.$prefix}-secondary--400,
-      #{map.get(defaults.$secondary, 400)}
-    ),
-  500:
-    var(
-      --#{defaults.$prefix}-secondary--500,
-      #{map.get(defaults.$secondary, 500)}
-    ),
-  600:
-    var(
-      --#{defaults.$prefix}-secondary--600,
-      #{map.get(defaults.$secondary, 600)}
-    ),
-  700:
-    var(
-      --#{defaults.$prefix}-secondary--700,
-      #{map.get(defaults.$secondary, 700)}
-    ),
-  800:
-    var(
-      --#{defaults.$prefix}-secondary--800,
-      #{map.get(defaults.$secondary, 800)}
-    ),
-  900:
-    var(
-      --#{defaults.$prefix}-secondary--900,
-      #{map.get(defaults.$secondary, 900)}
-    ),
-);
+// A colour map of base colours and their shades.
+$colors: ();
 
-// Tertiary theme colours.
-$tertiary: (
-  100:
-    var(
-      --#{defaults.$prefix}-tertiary--100,
-      #{map.get(defaults.$tertiary, 100)}
-    ),
-  200:
-    var(
-      --#{defaults.$prefix}-tertiary--200,
-      #{map.get(defaults.$tertiary, 200)}
-    ),
-  300:
-    var(
-      --#{defaults.$prefix}-tertiary--300,
-      #{map.get(defaults.$tertiary, 300)}
-    ),
-  400:
-    var(
-      --#{defaults.$prefix}-tertiary--400,
-      #{map.get(defaults.$tertiary, 400)}
-    ),
-  500:
-    var(
-      --#{defaults.$prefix}-tertiary--500,
-      #{map.get(defaults.$tertiary, 500)}
-    ),
-  600:
-    var(
-      --#{defaults.$prefix}-tertiary--600,
-      #{map.get(defaults.$tertiary, 600)}
-    ),
-  700:
-    var(
-      --#{defaults.$prefix}-tertiary--700,
-      #{map.get(defaults.$tertiary, 700)}
-    ),
-  800:
-    var(
-      --#{defaults.$prefix}-tertiary--800,
-      #{map.get(defaults.$tertiary, 800)}
-    ),
-  900:
-    var(
-      --#{defaults.$prefix}-tertiary--900,
-      #{map.get(defaults.$tertiary, 900)}
-    ),
-);
+// Create a map for each colour.
+@each $color, $map in defaults.$colors {
+  // A map for the current colour.
+  $color-map: ();
 
-// Theme colours.
-// Colour primary - light.
-$theme-light--primary--100: var(
-  --#{defaults.$prefix}-theme-light--primary--100,
-  #{map.get($primary, 100)}
-);
-$theme-light--primary--200: var(
-  --#{defaults.$prefix}-theme-light--primary--200,
-  #{map.get($primary, 200)}
-);
-$theme-light--primary--300: var(
-  --#{defaults.$prefix}-theme-light--primary--300,
-  #{map.get($primary, 300)}
-);
-$theme-light--primary--400: var(
-  --#{defaults.$prefix}-theme-light--primary--400,
-  #{map.get($primary, 400)}
-);
-$theme-light--primary--500: var(
-  --#{defaults.$prefix}-theme-light--primary--500,
-  #{map.get($primary, 500)}
-);
-$theme-light--primary--600: var(
-  --#{defaults.$prefix}-theme-light--primary--600,
-  #{map.get($primary, 600)}
-);
-$theme-light--primary--700: var(
-  --#{defaults.$prefix}-theme-light--primary--700,
-  #{map.get($primary, 700)}
-);
-$theme-light--primary--800: var(
-  --#{defaults.$prefix}-theme-light--primary--800,
-  #{map.get($primary, 800)}
-);
-$theme-light--primary--900: var(
-  --#{defaults.$prefix}-theme-light--primary--900,
-  #{map.get($primary, 900)}
-);
+  @each $shade, $value in $map {
+    // Set the custom prop name and fallback value.
+    $color-property: var(--#{defaults.$prefix}-#{$color}--#{$shade}, $value);
 
-// Colour primary - dark.
-$theme-dark--primary--100: var(
-  --#{defaults.$prefix}-theme-dark--primary--100,
-  #{map.get($primary, 900)}
-);
-$theme-dark--primary--200: var(
-  --#{defaults.$prefix}-theme-dark--primary--200,
-  #{map.get($primary, 800)}
-);
-$theme-dark--primary--300: var(
-  --#{defaults.$prefix}-theme-dark--primary--300,
-  #{map.get($primary, 700)}
-);
-$theme-dark--primary--400: var(
-  --#{defaults.$prefix}-theme-dark--primary--400,
-  #{map.get($primary, 600)}
-);
-$theme-dark--primary--500: var(
-  --#{defaults.$prefix}-theme-dark--primary--500,
-  #{map.get($primary, 500)}
-);
-$theme-dark--primary--600: var(
-  --#{defaults.$prefix}-theme-dark--primary--600,
-  #{map.get($primary, 400)}
-);
-$theme-dark--primary--700: var(
-  --#{defaults.$prefix}-theme-dark--primary--700,
-  #{map.get($primary, 300)}
-);
-$theme-dark--primary--800: var(
-  --#{defaults.$prefix}-theme-dark--primary--800,
-  #{map.get($primary, 200)}
-);
-$theme-dark--primary--900: var(
-  --#{defaults.$prefix}-theme-dark--primary--900,
-  #{map.get($primary, 100)}
-);
+    // Add the custom prop to the map.
+    $color-map: map.merge(
+      $color-map,
+      (
+        $shade: $color-property,
+      )
+    );
+  }
 
-// Colour primary - active.
-$theme-active--primary--100: var(
-  --#{defaults.$prefix}-theme-active--primary--100,
-  #{$theme-light--primary--100}
-);
-$theme-active--primary--200: var(
-  --#{defaults.$prefix}-theme-active--primary--200,
-  #{$theme-light--primary--200}
-);
-$theme-active--primary--300: var(
-  --#{defaults.$prefix}-theme-active--primary--300,
-  #{$theme-light--primary--300}
-);
-$theme-active--primary--400: var(
-  --#{defaults.$prefix}-theme-active--primary--400,
-  #{$theme-light--primary--400}
-);
-$theme-active--primary--500: var(
-  --#{defaults.$prefix}-theme-active--primary--500,
-  #{$theme-light--primary--500}
-);
-$theme-active--primary--600: var(
-  --#{defaults.$prefix}-theme-active--primary--600,
-  #{$theme-light--primary--600}
-);
-$theme-active--primary--700: var(
-  --#{defaults.$prefix}-theme-active--primary--700,
-  #{$theme-light--primary--700}
-);
-$theme-active--primary--800: var(
-  --#{defaults.$prefix}-theme-active--primary--800,
-  #{$theme-light--primary--800}
-);
-$theme-active--primary--900: var(
-  --#{defaults.$prefix}-theme-active--primary--900,
-  #{$theme-light--primary--900}
-);
+  // Merge the colour map with the existing colours.
+  $colors: map.merge(
+    $colors,
+    (
+      $color: $color-map,
+    )
+  );
+}
 
-// Color secondary - light.
-$theme-light--secondary--100: var(
-  --#{defaults.$prefix}-theme-light--secondary--100,
-  #{map.get($secondary, 100)}
-);
-$theme-light--secondary--200: var(
-  --#{defaults.$prefix}-theme-light--secondary--200,
-  #{map.get($secondary, 200)}
-);
-$theme-light--secondary--300: var(
-  --#{defaults.$prefix}-theme-light--secondary--300,
-  #{map.get($secondary, 300)}
-);
-$theme-light--secondary--400: var(
-  --#{defaults.$prefix}-theme-light--secondary--400,
-  #{map.get($secondary, 400)}
-);
-$theme-light--secondary--500: var(
-  --#{defaults.$prefix}-theme-light--secondary--500,
-  #{map.get($secondary, 500)}
-);
-$theme-light--secondary--600: var(
-  --#{defaults.$prefix}-theme-light--secondary--600,
-  #{map.get($secondary, 600)}
-);
-$theme-light--secondary--700: var(
-  --#{defaults.$prefix}-theme-light--secondary--700,
-  #{map.get($secondary, 700)}
-);
-$theme-light--secondary--800: var(
-  --#{defaults.$prefix}-theme-light--secondary--800,
-  #{map.get($secondary, 800)}
-);
-$theme-light--secondary--900: var(
-  --#{defaults.$prefix}-theme-light--secondary--900,
-  #{map.get($secondary, 900)}
-);
+// Theme properties.
+$theme-light: ();
+$theme-dark: ();
+$theme-active: ();
 
-// Colour secondary - dark.
-$theme-dark--secondary--100: var(
-  --#{defaults.$prefix}-theme-dark--secondary--100,
-  #{map.get($secondary, 900)}
-);
-$theme-dark--secondary--200: var(
-  --#{defaults.$prefix}-theme-dark--secondary--200,
-  #{map.get($secondary, 800)}
-);
-$theme-dark--secondary--300: var(
-  --#{defaults.$prefix}-theme-dark--secondary--300,
-  #{map.get($secondary, 700)}
-);
-$theme-dark--secondary--400: var(
-  --#{defaults.$prefix}-theme-dark--secondary--400,
-  #{map.get($secondary, 600)}
-);
-$theme-dark--secondary--500: var(
-  --#{defaults.$prefix}-theme-dark--secondary--500,
-  #{map.get($secondary, 500)}
-);
-$theme-dark--secondary--600: var(
-  --#{defaults.$prefix}-theme-dark--secondary--600,
-  #{map.get($secondary, 400)}
-);
-$theme-dark--secondary--700: var(
-  --#{defaults.$prefix}-theme-dark--secondary--700,
-  #{map.get($secondary, 300)}
-);
-$theme-dark--secondary--800: var(
-  --#{defaults.$prefix}-theme-dark--secondary--800,
-  #{map.get($secondary, 200)}
-);
-$theme-dark--secondary--900: var(
-  --#{defaults.$prefix}-theme-dark--secondary--900,
-  #{map.get($secondary, 100)}
-);
+// 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: ();
 
-// Colour secondary - active.
-$theme-active--secondary--100: var(
-  --#{defaults.$prefix}-theme-active--secondary--100,
-  #{$theme-light--secondary--100}
-);
-$theme-active--secondary--200: var(
-  --#{defaults.$prefix}-theme-active--secondary--200,
-  #{$theme-light--secondary--200}
-);
-$theme-active--secondary--300: var(
-  --#{defaults.$prefix}-theme-active--secondary--300,
-  #{$theme-light--secondary--300}
-);
-$theme-active--secondary--400: var(
-  --#{defaults.$prefix}-theme-active--secondary--400,
-  #{$theme-light--secondary--400}
-);
-$theme-active--secondary--500: var(
-  --#{defaults.$prefix}-theme-active--secondary--500,
-  #{$theme-light--secondary--500}
-);
-$theme-active--secondary--600: var(
-  --#{defaults.$prefix}-theme-active--secondary--600,
-  #{$theme-light--secondary--600}
-);
-$theme-active--secondary--700: var(
-  --#{defaults.$prefix}-theme-active--secondary--700,
-  #{$theme-light--secondary--700}
-);
-$theme-active--secondary--800: var(
-  --#{defaults.$prefix}-theme-active--secondary--800,
-  #{$theme-light--secondary--800}
-);
-$theme-active--secondary--900: var(
-  --#{defaults.$prefix}-theme-active--secondary--900,
-  #{$theme-light--secondary--900}
-);
+  @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);
 
-// Colour tertiary - light.
-$theme-light--tertiary--100: var(
-  --#{defaults.$prefix}-theme-light--tertiary--100,
-  #{map.get($tertiary, 100)}
-);
-$theme-light--tertiary--200: var(
-  --#{defaults.$prefix}-theme-light--tertiary--200,
-  #{map.get($tertiary, 200)}
-);
-$theme-light--tertiary--300: var(
-  --#{defaults.$prefix}-theme-light--tertiary--300,
-  #{map.get($tertiary, 300)}
-);
-$theme-light--tertiary--400: var(
-  --#{defaults.$prefix}-theme-light--tertiary--400,
-  #{map.get($tertiary, 400)}
-);
-$theme-light--tertiary--500: var(
-  --#{defaults.$prefix}-theme-light--tertiary--500,
-  #{map.get($tertiary, 500)}
-);
-$theme-light--tertiary--600: var(
-  --#{defaults.$prefix}-theme-light--tertiary--600,
-  #{map.get($tertiary, 600)}
-);
-$theme-light--tertiary--700: var(
-  --#{defaults.$prefix}-theme-light--tertiary--700,
-  #{map.get($tertiary, 700)}
-);
-$theme-light--tertiary--800: var(
-  --#{defaults.$prefix}-theme-light--tertiary--800,
-  #{map.get($tertiary, 800)}
-);
-$theme-light--tertiary--900: var(
-  --#{defaults.$prefix}-theme-light--tertiary--900,
-  #{map.get($tertiary, 900)}
-);
+    // Set the custom prop names and fallback values.
+    $light-property: var(
+      --#{defaults.$prefix}-theme-light--#{$color}--#{$shade},
+      $value
+    );
+    $dark-property: var(
+      --#{defaults.$prefix}-theme-dark--#{$color}--#{$shade},
+      $dark-value
+    );
+    $active-property: var(
+      --#{defaults.$prefix}-theme-active--#{$color}--#{$shade},
+      $light-property
+    );
 
-// Colour tertiary - dark.
-$theme-dark--tertiary--100: var(
-  --#{defaults.$prefix}-theme-dark--tertiary--100,
-  #{map.get($tertiary, 900)}
-);
-$theme-dark--tertiary--200: var(
-  --#{defaults.$prefix}-theme-dark--tertiary--200,
-  #{map.get($tertiary, 800)}
-);
-$theme-dark--tertiary--300: var(
-  --#{defaults.$prefix}-theme-dark--tertiary--300,
-  #{map.get($tertiary, 700)}
-);
-$theme-dark--tertiary--400: var(
-  --#{defaults.$prefix}-theme-dark--tertiary--400,
-  #{map.get($tertiary, 600)}
-);
-$theme-dark--tertiary--500: var(
-  --#{defaults.$prefix}-theme-dark--tertiary--500,
-  #{map.get($tertiary, 500)}
-);
-$theme-dark--tertiary--600: var(
-  --#{defaults.$prefix}-theme-dark--tertiary--600,
-  #{map.get($tertiary, 400)}
-);
-$theme-dark--tertiary--700: var(
-  --#{defaults.$prefix}-theme-dark--tertiary--700,
-  #{map.get($tertiary, 300)}
-);
-$theme-dark--tertiary--800: var(
-  --#{defaults.$prefix}-theme-dark--tertiary--800,
-  #{map.get($tertiary, 200)}
-);
-$theme-dark--tertiary--900: var(
-  --#{defaults.$prefix}-theme-dark--tertiary--900,
-  #{map.get($tertiary, 100)}
-);
+    // Add the custom props to the maps.
+    $light-map: map.merge(
+      $light-map,
+      (
+        $shade: $light-property,
+      )
+    );
+    $dark-map: map.merge(
+      $dark-map,
+      (
+        $shade: $dark-property,
+      )
+    );
+    $active-map: map.merge(
+      $active-map,
+      (
+        $shade: $active-property,
+      )
+    );
+  }
 
-// Colour tertiary - active.
-$theme-active--tertiary--100: var(
-  --#{defaults.$prefix}-theme-active--tertiary--100,
-  #{$theme-light--tertiary--100}
-);
-$theme-active--tertiary--200: var(
-  --#{defaults.$prefix}-theme-active--tertiary--200,
-  #{$theme-light--tertiary--200}
-);
-$theme-active--tertiary--300: var(
-  --#{defaults.$prefix}-theme-active--tertiary--300,
-  #{$theme-light--tertiary--300}
-);
-$theme-active--tertiary--400: var(
-  --#{defaults.$prefix}-theme-active--tertiary--400,
-  #{$theme-light--tertiary--400}
-);
-$theme-active--tertiary--500: var(
-  --#{defaults.$prefix}-theme-active--tertiary--500,
-  #{$theme-light--tertiary--500}
-);
-$theme-active--tertiary--600: var(
-  --#{defaults.$prefix}-theme-active--tertiary--600,
-  #{$theme-light--tertiary--600}
-);
-$theme-active--tertiary--700: var(
-  --#{defaults.$prefix}-theme-active--tertiary--700,
-  #{$theme-light--tertiary--700}
-);
-$theme-active--tertiary--800: var(
-  --#{defaults.$prefix}-theme-active--tertiary--800,
-  #{$theme-light--tertiary--800}
-);
-$theme-active--tertiary--900: var(
-  --#{defaults.$prefix}-theme-active--tertiary--900,
-  #{$theme-light--tertiary--900}
-);
+  // 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,
+    (
+      $color: $active-map,
+    )
+  );
+}
 
 // Font properties.
 $font-family: var(--#{defaults.$prefix}-font-family, #{defaults.$font-family});
 $font-size: var(--#{defaults.$prefix}-font-size, #{defaults.$font-size});
+
+// Colour properties.
+$font-color: var(
+  --#{defaults.$prefix}-font-color,
+  #{map.get(map.get($theme-active, primary), 900)}
+);
+$background: var(
+  --#{defaults.$prefix}-background,
+  #{map.get(map.get($theme-active, primary), 100)}
+);

package/scss/utilities/_index.scss

@@ -0,0 +1,3 @@
+// Graupl utilities.
+
+@forward "colors";

package/scss/utilities/colors/_defaults.scss

@@ -0,0 +1,7 @@
+// Default values for Graupl.
+//
+// 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.
+
+@forward "../../defaults";

package/scss/utilities/colors/_index.scss

@@ -0,0 +1,22 @@
+// Graupl color utilities.
+
+@use "variables" as *;
+@use "../../mixins/layer" as *;
+@use "../../functions/important";
+@use "../../theme/variables" as theme;
+
+@include layer(utilities) {
+  @each $color, $map in theme.$theme-active {
+    @each $shade, $value in $map {
+      $name: #{$color}-#{$shade};
+
+      .bg-#{$name} {
+        background: important.insert($value);
+      }
+
+      .text-#{$name} {
+        color: important.insert($value);
+      }
+    }
+  }
+}

package/scss/utilities/colors/_variables.scss

@@ -0,0 +1,3 @@
+// Variables referencing custom properties.
+
+@forward "defaults";

package/scss/utilities/colors/colors.scss

@@ -0,0 +1,3 @@
+// Graupl color utilities.
+
+@forward "index";