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

package/scss/component/button/_variables.scss

@@ -1,9 +1,9 @@
 // Variables referencing custom properties.
 
 @use "../../variables" as base;
-@use "../../theme/variables" as theme;
 @use "defaults";
 @use "sass:map";
+@use "../../functions/theme";
 
 // Button properties.
 $button-min-width: var(
@@ -34,6 +34,12 @@ $button-transition: var(
   border-color #{map.get(base.$transition-duration, fast)} #{base.$transition-timing-function},
   transform #{map.get(base.$transition-duration, fast)} #{base.$transition-timing-function}
 );
+$button-transition-reduced-motion: var(
+  --#{defaults.$prefix}-button-transition-reduced-motion,
+  background #{map.get(base.$transition-duration, none)} #{base.$transition-timing-function},
+  color #{map.get(base.$transition-duration, none)} #{base.$transition-timing-function},
+  border-color #{map.get(base.$transition-duration, none)} #{base.$transition-timing-function}
+);
 
 // Transform properties.
 $button-hover-transform: var(
@@ -44,33 +50,49 @@ $button-active-transform: var(
   --#{defaults.$prefix}-button-active-transform,
   #{defaults.$button-active-transform}
 );
+$button-hover-transform-reduced-motion: var(
+  --#{defaults.$prefix}-button-hover-transform-reduced-motion,
+  #{defaults.$button-hover-transform-reduced-motion}
+);
+$button-active-transform-reduced-motion: var(
+  --#{defaults.$prefix}-button-active-transform-reduced-motion,
+  #{defaults.$button-active-transform-reduced-motion}
+);
 
 // Background properties.
 $button-background: var(
   --#{defaults.$prefix}-button-background,
-  #{theme.$theme-active--primary--100}
+  #{theme.get(primary, 100)}
 );
 $button-hover-background: var(
   --#{defaults.$prefix}-button-hover-background,
-  #{theme.$theme-active--primary--900}
+  #{theme.get(primary, 900)}
 );
 $button-active-background: var(
   --#{defaults.$prefix}-button-active-background,
-  #{theme.$theme-active--primary--900}
+  #{theme.get(primary, 900)}
+);
+$button-disabled-background: var(
+  --#{defaults.$prefix}-button-disabled-background,
+  #{theme.get(primary, 100)}
 );
 
 // Text properties.
 $button-color: var(
   --#{defaults.$prefix}-button-color,
-  #{theme.$theme-active--primary--900}
+  #{theme.get(primary, 900)}
 );
 $button-hover-color: var(
   --#{defaults.$prefix}-button-hover-color,
-  #{theme.$theme-active--primary--100}
+  #{theme.get(primary, 100)}
 );
 $button-active-color: var(
   --#{defaults.$prefix}-button-active-color,
-  #{theme.$theme-active--primary--100}
+  #{theme.get(primary, 100)}
+);
+$button-disabled-color: var(
+  --#{defaults.$prefix}-button-disabled-color,
+  #{theme.get(primary, 200)}
 );
 
 // Border properties.
@@ -90,13 +112,17 @@ $button-border-radius: var(
 // Border colour properties.
 $button-border-color: var(
   --#{defaults.$prefix}-button-border-color,
-  #{theme.$theme-active--primary--900}
+  #{theme.get(primary, 900)}
 );
 $button-hover-border-color: var(
   --#{defaults.$prefix}-button-hover-border-color,
-  #{theme.$theme-active--primary--900}
+  #{theme.get(primary, 900)}
 );
 $button-active-border-color: var(
   --#{defaults.$prefix}-button-active-border-color,
-  #{theme.$theme-active--primary--900}
+  #{theme.get(primary, 900)}
+);
+$button-disabled-border-color: var(
+  --#{defaults.$prefix}-button-disabled-border-color,
+  #{theme.get(primary, 200)}
 );

package/scss/functions/_important.scss

@@ -0,0 +1,11 @@
+// A function to determine if the !important flag should be added to a property.
+
+@use "../defaults";
+
+@function insert($value) {
+  @if defaults.$use-important {
+    @return #{$value !important};
+  }
+
+  @return #{$value};
+}

package/scss/functions/_theme.scss

@@ -0,0 +1,11 @@
+// A function to get the specific theme shades.
+
+@use "sass:map";
+@use "../theme/variables" as theme;
+
+@function get($color, $shade) {
+  $color-map: map.get(theme.$theme-active, $color);
+  $value: map.get($color-map, $shade);
+
+  @return $value;
+}

package/scss/graupl.scss

@@ -2,8 +2,4 @@
 //
 // Forwards all components for easy development.
 
-@forward "base";
-@forward "layout";
-@forward "component";
-@forward "state";
-@forward "theme";
+@forward "index";

package/scss/layout/columns/_index.scss

@@ -20,7 +20,7 @@
   }
 
   @for $i from defaults.$columns-min-count through defaults.$columns-max-count {
-    .columns-#{$i} {
+    .count-#{$i} {
       --#{defaults.$prefix}-columns-count: #{$i};
     }
 

package/scss/state/focus/_variables.scss

@@ -1,13 +1,13 @@
 // Variables referencing custom properties.
 
 @use "../../variables" as base;
-@use "../../theme/variables" as theme;
 @use "defaults";
+@use "../../functions/theme";
 
 $focus-width: var(--#{defaults.$prefix}-focus-width, #{base.$border-width});
 $focus-outline-color: var(
   --#{defaults.$prefix}-focus-outline-color,
-  #{theme.$theme-active--primary--900}
+  #{theme.get(primary, 900)}
 );
 $focus-outline-width: var(
   --#{defaults.$prefix}-focus-outline-width,
@@ -23,7 +23,7 @@ $focus-outline-offset: var(
 );
 $focus-box-shadow-color: var(
   --#{defaults.$prefix}-focus-box-shadow-color,
-  #{theme.$theme-active--primary--100}
+  #{theme.get(primary, 100)}
 );
 $focus-box-shadow-style: var(
   --#{defaults.$prefix}-focus-box-shadow-style,

package/scss/theme/_defaults.scss

@@ -8,38 +8,55 @@
 @forward "../defaults";
 
 // Colours.
-$primary: (
-  100: hsl(219deg 100% 95%),
-  200: hsl(219deg 90% 80%),
-  300: hsl(219deg 80% 65%),
-  400: hsl(219deg 75% 55%),
-  500: hsl(219deg 75% 50%),
-  600: hsl(219deg 75% 45%),
-  700: hsl(219deg 80% 35%),
-  800: hsl(219deg 90% 20%),
-  900: hsl(219deg 100% 10%),
+$default-colors: (
+  primary: (
+    100: hsl(219deg 100% 95%),
+    200: hsl(219deg 90% 80%),
+    300: hsl(219deg 80% 65%),
+    400: hsl(219deg 75% 55%),
+    500: hsl(219deg 75% 50%),
+    600: hsl(219deg 75% 45%),
+    700: hsl(219deg 80% 35%),
+    800: hsl(219deg 90% 20%),
+    900: hsl(219deg 100% 10%),
+  ),
+  secondary: (
+    100: hsl(235deg 40% 95%),
+    200: hsl(235deg 30% 80%),
+    300: hsl(235deg 20% 65%),
+    400: hsl(235deg 15% 55%),
+    500: hsl(235deg 15% 50%),
+    600: hsl(235deg 15% 45%),
+    700: hsl(235deg 20% 35%),
+    800: hsl(235deg 30% 20%),
+    900: hsl(235deg 40% 10%),
+  ),
+  tertiary: (
+    100: hsl(340deg 85% 95%),
+    200: hsl(340deg 75% 80%),
+    300: hsl(340deg 65% 65%),
+    400: hsl(340deg 60% 55%),
+    500: hsl(340deg 60% 50%),
+    600: hsl(340deg 60% 45%),
+    700: hsl(340deg 65% 35%),
+    800: hsl(340deg 75% 20%),
+    900: hsl(340deg 85% 10%),
+  ),
 ) !default;
-$secondary: (
-  100: hsl(235deg 40% 95%),
-  200: hsl(235deg 30% 80%),
-  300: hsl(235deg 20% 65%),
-  400: hsl(235deg 15% 55%),
-  500: hsl(235deg 15% 50%),
-  600: hsl(235deg 15% 45%),
-  700: hsl(235deg 20% 35%),
-  800: hsl(235deg 30% 20%),
-  900: hsl(235deg 40% 10%),
-) !default;
-$tertiary: (
-  100: hsl(340deg 85% 95%),
-  200: hsl(340deg 75% 80%),
-  300: hsl(340deg 65% 65%),
-  400: hsl(340deg 60% 55%),
-  500: hsl(340deg 60% 50%),
-  600: hsl(340deg 60% 45%),
-  700: hsl(340deg 65% 35%),
-  800: hsl(340deg 75% 20%),
-  900: hsl(340deg 85% 10%),
+$custom-colors: () !default;
+$colors: map.merge($default-colors, $custom-colors) !default;
+
+// A map for reversing the shade values of the dark theme.
+$dark-map: (
+  100: 900,
+  200: 800,
+  300: 700,
+  400: 600,
+  500: 500,
+  600: 400,
+  700: 300,
+  800: 200,
+  900: 100,
 ) !default;
 
 // Font properties.

package/scss/theme/_index.scss

@@ -4,87 +4,34 @@
 @use "../mixins/layer" as *;
 @use "defaults";
 @use "sass:map";
+@use "../functions/theme";
 
 @include layer(theme) {
   :root {
-    background: $theme-active--primary--100;
-    color: $theme-active--primary--900;
+    background: $background;
+    color: $font-color;
     font-family: $font-family;
     font-size: $font-size;
   }
 
   // Set the active theme for dark mode.
   .dark-mode {
-    // Primary colours.
-    --#{defaults.$prefix}-theme-active--primary--100: #{$theme-dark--primary--100};
-    --#{defaults.$prefix}-theme-active--primary--200: #{$theme-dark--primary--200};
-    --#{defaults.$prefix}-theme-active--primary--300: #{$theme-dark--primary--300};
-    --#{defaults.$prefix}-theme-active--primary--400: #{$theme-dark--primary--400};
-    --#{defaults.$prefix}-theme-active--primary--500: #{$theme-dark--primary--500};
-    --#{defaults.$prefix}-theme-active--primary--600: #{$theme-dark--primary--600};
-    --#{defaults.$prefix}-theme-active--primary--700: #{$theme-dark--primary--700};
-    --#{defaults.$prefix}-theme-active--primary--800: #{$theme-dark--primary--800};
-    --#{defaults.$prefix}-theme-active--primary--900: #{$theme-dark--primary--900};
-
-    // Secondary colours.
-    --#{defaults.$prefix}-theme-active--secondary--100: #{$theme-dark--secondary--100};
-    --#{defaults.$prefix}-theme-active--secondary--200: #{$theme-dark--secondary--200};
-    --#{defaults.$prefix}-theme-active--secondary--300: #{$theme-dark--secondary--300};
-    --#{defaults.$prefix}-theme-active--secondary--400: #{$theme-dark--secondary--400};
-    --#{defaults.$prefix}-theme-active--secondary--500: #{$theme-dark--secondary--500};
-    --#{defaults.$prefix}-theme-active--secondary--600: #{$theme-dark--secondary--600};
-    --#{defaults.$prefix}-theme-active--secondary--700: #{$theme-dark--secondary--700};
-    --#{defaults.$prefix}-theme-active--secondary--800: #{$theme-dark--secondary--800};
-    --#{defaults.$prefix}-theme-active--secondary--900: #{$theme-dark--secondary--900};
-
-    // Tertiary colours.
-    --#{defaults.$prefix}-theme-active--tertiary--100: #{$theme-dark--tertiary--100};
-    --#{defaults.$prefix}-theme-active--tertiary--200: #{$theme-dark--tertiary--200};
-    --#{defaults.$prefix}-theme-active--tertiary--300: #{$theme-dark--tertiary--300};
-    --#{defaults.$prefix}-theme-active--tertiary--400: #{$theme-dark--tertiary--400};
-    --#{defaults.$prefix}-theme-active--tertiary--500: #{$theme-dark--tertiary--500};
-    --#{defaults.$prefix}-theme-active--tertiary--600: #{$theme-dark--tertiary--600};
-    --#{defaults.$prefix}-theme-active--tertiary--700: #{$theme-dark--tertiary--700};
-    --#{defaults.$prefix}-theme-active--tertiary--800: #{$theme-dark--tertiary--800};
-    --#{defaults.$prefix}-theme-active--tertiary--900: #{$theme-dark--tertiary--900};
+    @each $color, $map in $theme-dark {
+      @each $shade, $value in $map {
+        --#{defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
+      }
+    }
 
     color-scheme: dark;
   }
 
   // Set the active theme for light mode.
   .light-mode {
-    // Primary colours.
-    --#{defaults.$prefix}-theme-active--primary--100: #{$theme-light--primary--100};
-    --#{defaults.$prefix}-theme-active--primary--200: #{$theme-light--primary--200};
-    --#{defaults.$prefix}-theme-active--primary--300: #{$theme-light--primary--300};
-    --#{defaults.$prefix}-theme-active--primary--400: #{$theme-light--primary--400};
-    --#{defaults.$prefix}-theme-active--primary--500: #{$theme-light--primary--500};
-    --#{defaults.$prefix}-theme-active--primary--600: #{$theme-light--primary--600};
-    --#{defaults.$prefix}-theme-active--primary--700: #{$theme-light--primary--700};
-    --#{defaults.$prefix}-theme-active--primary--800: #{$theme-light--primary--800};
-    --#{defaults.$prefix}-theme-active--primary--900: #{$theme-light--primary--900};
-
-    // Secondary colours.
-    --#{defaults.$prefix}-theme-active--secondary--100: #{$theme-light--secondary--100};
-    --#{defaults.$prefix}-theme-active--secondary--200: #{$theme-light--secondary--200};
-    --#{defaults.$prefix}-theme-active--secondary--300: #{$theme-light--secondary--300};
-    --#{defaults.$prefix}-theme-active--secondary--400: #{$theme-light--secondary--400};
-    --#{defaults.$prefix}-theme-active--secondary--500: #{$theme-light--secondary--500};
-    --#{defaults.$prefix}-theme-active--secondary--600: #{$theme-light--secondary--600};
-    --#{defaults.$prefix}-theme-active--secondary--700: #{$theme-light--secondary--700};
-    --#{defaults.$prefix}-theme-active--secondary--800: #{$theme-light--secondary--800};
-    --#{defaults.$prefix}-theme-active--secondary--900: #{$theme-light--secondary--900};
-
-    // Tertiary colours.
-    --#{defaults.$prefix}-theme-active--tertiary--100: #{$theme-light--tertiary--100};
-    --#{defaults.$prefix}-theme-active--tertiary--200: #{$theme-light--tertiary--200};
-    --#{defaults.$prefix}-theme-active--tertiary--300: #{$theme-light--tertiary--300};
-    --#{defaults.$prefix}-theme-active--tertiary--400: #{$theme-light--tertiary--400};
-    --#{defaults.$prefix}-theme-active--tertiary--500: #{$theme-light--tertiary--500};
-    --#{defaults.$prefix}-theme-active--tertiary--600: #{$theme-light--tertiary--600};
-    --#{defaults.$prefix}-theme-active--tertiary--700: #{$theme-light--tertiary--700};
-    --#{defaults.$prefix}-theme-active--tertiary--800: #{$theme-light--tertiary--800};
-    --#{defaults.$prefix}-theme-active--tertiary--900: #{$theme-light--tertiary--900};
+    @each $color, $map in $theme-light {
+      @each $shade, $value in $map {
+        --#{defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
+      }
+    }
 
     color-scheme: light;
   }