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

package/scss/component/button/_variables.scss

@@ -1,128 +1,133 @@
 // Variables referencing custom properties.
 
-@use "../../variables" as base;
 @use "defaults";
-@use "sass:map";
+@use "../../variables" as root-variables;
+@use "../../defaults" as root-defaults;
+@use "../../theme/typography/variables" as typography;
 @use "../../functions/theme";
+@use "sass:map";
 
 // Button properties.
 $button-min-width: var(
-  --#{defaults.$prefix}-button-min-width,
-  #{defaults.$interactive-min-width}
+  --#{root-defaults.$prefix}-button-min-width,
+  #{root-defaults.$interactive-min-width}
 );
 $button-min-height: var(
-  --#{defaults.$prefix}-button-min-height,
-  #{defaults.$interactive-min-height}
+  --#{root-defaults.$prefix}-button-min-height,
+  #{root-defaults.$interactive-min-height}
+);
+$button-padding-x: var(
+  --#{root-defaults.$prefix}-button-padding-x,
+  #{map.get(root-variables.$spacers, 5)}
 );
-$button-padding-x: var(--#{defaults.$prefix}-button-padding-x, #{base.$gap});
 $button-padding-y: var(
-  --#{defaults.$prefix}-button-padding-y,
-  calc(#{base.$gap} / 2)
+  --#{root-defaults.$prefix}-button-padding-y,
+  #{map.get(root-variables.$spacers, 3)}
 );
 $button-padding: var(
-  --#{defaults.$prefix}-button-padding,
+  --#{root-defaults.$prefix}-button-padding,
   #{$button-padding-y} #{$button-padding-x}
 );
 $button-font-size: var(
-  --#{defaults.$prefix}-button-font-size,
-  #{map.get(base.$font-size, default)}
+  --#{root-defaults.$prefix}-button-font-size,
+  #{map.get(typography.$font-sizes, base)}
 );
 $button-transition: var(
-  --#{defaults.$prefix}-button-transition,
-  background #{map.get(base.$transition-duration, fast)} #{base.$transition-timing-function},
-  color #{map.get(base.$transition-duration, fast)} #{base.$transition-timing-function},
-  border-color #{map.get(base.$transition-duration, fast)} #{base.$transition-timing-function},
-  transform #{map.get(base.$transition-duration, fast)} #{base.$transition-timing-function}
+  --#{root-defaults.$prefix}-button-transition,
+  background #{map.get(root-variables.$transition-duration, fast)} #{root-variables.$transition-timing-function},
+  color #{map.get(root-variables.$transition-duration, fast)} #{root-variables.$transition-timing-function},
+  border-color #{map.get(root-variables.$transition-duration, fast)} #{root-variables.$transition-timing-function},
+  transform #{map.get(root-variables.$transition-duration, fast)} #{root-variables.$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}
+  --#{root-defaults.$prefix}-button-transition-reduced-motion,
+  background #{map.get(root-variables.$transition-duration, none)} #{root-variables.$transition-timing-function},
+  color #{map.get(root-variables.$transition-duration, none)} #{root-variables.$transition-timing-function},
+  border-color #{map.get(root-variables.$transition-duration, none)} #{root-variables.$transition-timing-function}
 );
 
 // Transform properties.
 $button-hover-transform: var(
-  --#{defaults.$prefix}-button-hover-transform,
+  --#{root-defaults.$prefix}-button-hover-transform,
   #{defaults.$button-hover-transform}
 );
 $button-active-transform: var(
-  --#{defaults.$prefix}-button-active-transform,
+  --#{root-defaults.$prefix}-button-active-transform,
   #{defaults.$button-active-transform}
 );
 $button-hover-transform-reduced-motion: var(
-  --#{defaults.$prefix}-button-hover-transform-reduced-motion,
+  --#{root-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,
+  --#{root-defaults.$prefix}-button-active-transform-reduced-motion,
   #{defaults.$button-active-transform-reduced-motion}
 );
 
 // Background properties.
 $button-background: var(
-  --#{defaults.$prefix}-button-background,
+  --#{root-defaults.$prefix}-button-background,
   #{theme.get(primary, 100)}
 );
 $button-hover-background: var(
-  --#{defaults.$prefix}-button-hover-background,
+  --#{root-defaults.$prefix}-button-hover-background,
   #{theme.get(primary, 900)}
 );
 $button-active-background: var(
-  --#{defaults.$prefix}-button-active-background,
+  --#{root-defaults.$prefix}-button-active-background,
   #{theme.get(primary, 900)}
 );
 $button-disabled-background: var(
-  --#{defaults.$prefix}-button-disabled-background,
+  --#{root-defaults.$prefix}-button-disabled-background,
   #{theme.get(primary, 100)}
 );
 
 // Text properties.
 $button-color: var(
-  --#{defaults.$prefix}-button-color,
+  --#{root-defaults.$prefix}-button-color,
   #{theme.get(primary, 900)}
 );
 $button-hover-color: var(
-  --#{defaults.$prefix}-button-hover-color,
+  --#{root-defaults.$prefix}-button-hover-color,
   #{theme.get(primary, 100)}
 );
 $button-active-color: var(
-  --#{defaults.$prefix}-button-active-color,
+  --#{root-defaults.$prefix}-button-active-color,
   #{theme.get(primary, 100)}
 );
 $button-disabled-color: var(
-  --#{defaults.$prefix}-button-disabled-color,
+  --#{root-defaults.$prefix}-button-disabled-color,
   #{theme.get(primary, 200)}
 );
 
 // Border properties.
 $button-border-width: var(
-  --#{defaults.$prefix}-button-border-width,
-  #{base.$border-width}
+  --#{root-defaults.$prefix}-button-border-width,
+  #{root-variables.$border-width}
 );
 $button-border-style: var(
-  --#{defaults.$prefix}-botton-border-style,
-  #{base.$border-style}
+  --#{root-defaults.$prefix}-botton-border-style,
+  #{root-variables.$border-style}
 );
 $button-border-radius: var(
-  --#{defaults.$prefix}-button-border-radius,
-  #{base.$border-radius}
+  --#{root-defaults.$prefix}-button-border-radius,
+  #{root-variables.$border-radius}
 );
 
 // Border colour properties.
 $button-border-color: var(
-  --#{defaults.$prefix}-button-border-color,
+  --#{root-defaults.$prefix}-button-border-color,
   #{theme.get(primary, 900)}
 );
 $button-hover-border-color: var(
-  --#{defaults.$prefix}-button-hover-border-color,
+  --#{root-defaults.$prefix}-button-hover-border-color,
   #{theme.get(primary, 900)}
 );
 $button-active-border-color: var(
-  --#{defaults.$prefix}-button-active-border-color,
+  --#{root-defaults.$prefix}-button-active-border-color,
   #{theme.get(primary, 900)}
 );
 $button-disabled-border-color: var(
-  --#{defaults.$prefix}-button-disabled-border-color,
+  --#{root-defaults.$prefix}-button-disabled-border-color,
   #{theme.get(primary, 200)}
 );

package/scss/functions/_theme.scss

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

package/scss/layout/columns/_defaults.scss

@@ -4,8 +4,6 @@
 // They are mainly used to provide default fallbacks for custom properties
 // which can be found in the `variables.scss` file.
 
-@forward "../../defaults";
-
 $columns-max-width: 1fr !default;
 $columns-count: 3 !default;
 $columns-disable-width: 48ch !default;

package/scss/layout/columns/_index.scss

@@ -2,17 +2,14 @@
 
 @use "variables" as *;
 @use "defaults";
-@use "../../variables" as base;
+@use "../../defaults" as root-defaults;
 @use "../../mixins/layer" as *;
 
 @include layer(layout) {
   .columns {
     display: grid;
-    grid-template-columns: var(
-      --#{defaults.$prefix}-columns,
-      repeat(auto-fit, minmax(#{$columns-min-width}, #{$columns-max-width}))
-    );
-    gap: $columns-gap;
+    grid-template-columns: $columns-grid-template-columns;
+    gap: $columns-row-gap $columns-column-gap;
 
     > * {
       grid-column: span $columns-span;
@@ -21,18 +18,18 @@
 
   @for $i from defaults.$columns-min-count through defaults.$columns-max-count {
     .count-#{$i} {
-      --#{defaults.$prefix}-columns-count: #{$i};
+      --#{root-defaults.$prefix}-columns-count: #{$i};
     }
 
     .span-#{$i} {
-      --#{defaults.$prefix}-columns-span: #{$i};
+      --#{root-defaults.$prefix}-columns-span: #{$i};
     }
   }
 
   // Disable columns on small screens to avoid horizontal bleeding.
   @media screen and (max-width: #{defaults.$columns-disable-width}) {
     .columns {
-      --#{defaults.$prefix}-columns-min-width: #{defaults.$columns-max-width};
+      --#{root-defaults.$prefix}-columns-min-width: #{defaults.$columns-max-width};
     }
   }
 }

package/scss/layout/columns/_variables.scss

@@ -1,24 +1,47 @@
 // Variables referencing custom properties.
 
-@use "../../variables" as base;
 @use "defaults";
+@use "../../variables" as root-variables;
+@use "../../defaults" as root-defaults;
+@use "sass:map";
 
-$columns-gap: var(--#{defaults.$prefix}-columns-gap, #{base.$gap});
+$columns-row-gap: var(
+  --#{root-defaults.$prefix}-columns-row-gap,
+  #{map.get(root-variables.$spacers, 5)}
+);
+$columns-column-gap: var(
+  --#{root-defaults.$prefix}-columns-column-gap,
+  #{map.get(root-variables.$spacers, 5)}
+);
 $columns-count: var(
-  --#{defaults.$prefix}-columns-count,
+  --#{root-defaults.$prefix}-columns-count,
   #{defaults.$columns-count}
 );
+
+// Calculate the min-width of each column based on the content-max-width and column-gap.
+// We take the maximum width of the page and subtract the gap width multiplied by the number of
+// columns minus one (to account for the gaps between columns).
+// We then divide this by the number of columns to get the min-width of each column.
+/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
 $columns-min-width: var(
-  --#{defaults.$prefix}-columns-min-width,
+  --#{root-defaults.$prefix}-columns-min-width,
   calc(
-    (#{base.$content-max-width} - #{$columns-gap} * (#{$columns-count} - 1)) / #{$columns-count}
+    (
+        #{root-variables.$content-max-width} - #{$columns-column-gap} *
+          (#{$columns-count} - 1)
+      ) / #{$columns-count}
   )
 );
+/* stylelint-enable  scss/operator-no-newline-after */
 $columns-max-width: var(
-  --#{defaults.$prefix}-columns-max-width,
+  --#{root-defaults.$prefix}-columns-max-width,
   #{defaults.$columns-max-width}
 );
+$columns-grid-template-columns: var(
+  --#{root-defaults.$prefix}-columns-grid-template-columns,
+  repeat(auto-fit, minmax(#{$columns-min-width}, #{$columns-max-width}))
+);
 $columns-span: var(
-  --#{defaults.$prefix}-columns-span,
+  --#{root-defaults.$prefix}-columns-span,
   #{defaults.$columns-span}
 );

package/scss/layout/container/_defaults.scss

@@ -4,7 +4,5 @@
 // They are mainly used to provide default fallbacks for custom properties
 // which can be found in the `variables.scss` file.
 
-@forward "../../defaults";
-
 $container-breakout-width: 15ch !default;
 $container-feature-width: 20ch !default;

package/scss/layout/container/_index.scss

@@ -2,34 +2,38 @@
 
 @use "variables" as *;
 @use "../../mixins/layer" as *;
-@use "defaults";
+@use "../../defaults" as root-defaults;
 
 @include layer(layout) {
   .container,
   .container > .full-width {
-    --#{defaults.$prefix}-container-full-width: minmax(#{$container-gap}, 1fr);
-    --#{defaults.$prefix}-container-content: min(
+    --#{root-defaults.$prefix}-container-full-width: minmax(
+      #{$container-gap},
+      1fr
+    );
+    --#{root-defaults.$prefix}-container-content: min(
       #{$container-content-max-width},
       calc(100% - #{$container-gap} * 2)
     );
-    --#{defaults.$prefix}-container-breakout: minmax(
+    --#{root-defaults.$prefix}-container-breakout: minmax(
       0,
       #{$container-breakout-width}
     );
-    --#{defaults.$prefix}-container-feature: minmax(
+    --#{root-defaults.$prefix}-container-feature: minmax(
       0,
       #{$container-feature-width}
     );
 
     display: grid;
     grid-template-columns:
-      [full-width-start] var(--#{defaults.$prefix}-container-full-width)
-      [feature-start] var(--#{defaults.$prefix}-container-feature)
-      [breakout-start] var(--#{defaults.$prefix}-container-breakout)
-      [content-start] var(--#{defaults.$prefix}-container-content) [content-end]
-      var(--#{defaults.$prefix}-container-breakout) [breakout-end]
-      var(--#{defaults.$prefix}-container-feature) [feature-end]
-      var(--#{defaults.$prefix}-container-full-width) [full-width-end];
+      [full-width-start] var(--#{root-defaults.$prefix}-container-full-width)
+      [feature-start] var(--#{root-defaults.$prefix}-container-feature)
+      [breakout-start] var(--#{root-defaults.$prefix}-container-breakout)
+      [content-start] var(--#{root-defaults.$prefix}-container-content)
+      [content-end]
+      var(--#{root-defaults.$prefix}-container-breakout) [breakout-end]
+      var(--#{root-defaults.$prefix}-container-feature) [feature-end]
+      var(--#{root-defaults.$prefix}-container-full-width) [full-width-end];
 
     > :not(.breakout, .full-width, .feature) {
       grid-column: content;

package/scss/layout/container/_variables.scss

@@ -1,26 +1,31 @@
 // Variables referencing custom properties.
 
-@use "../../variables" as base;
 @use "defaults";
+@use "../../variables" as root-variables;
+@use "../../defaults" as root-defaults;
+@use "sass:map";
 
-$container-gap: var(--#{defaults.$prefix}-container-gap, #{base.$gap});
+$container-gap: var(
+  --#{root-defaults.$prefix}-container-gap,
+  #{map.get(root-variables.$spacers, 5)}
+);
 $container-content-max-width: var(
-  --#{defaults.$prefix}-container-content-max-width,
-  #{base.$content-max-width}
+  --#{root-defaults.$prefix}-container-content-max-width,
+  #{root-variables.$content-max-width}
 );
 $container-breakout-max-width: var(
-  --#{defaults.$prefix}-container-breakout-max-width,
+  --#{root-defaults.$prefix}-container-breakout-max-width,
   calc(#{$container-content-max-width} + #{defaults.$container-breakout-width})
 );
 $container-breakout-width: var(
-  --#{defaults.$prefix}-container-breakout-width,
+  --#{root-defaults.$prefix}-container-breakout-width,
   calc((#{$container-breakout-max-width} - #{$container-content-max-width}) / 2)
 );
 $container-feature-max-width: var(
-  --#{defaults.$prefix}-container-feature-max-width,
+  --#{root-defaults.$prefix}-container-feature-max-width,
   calc(#{$container-breakout-max-width} + #{defaults.$container-feature-width})
 );
 $container-feature-width: var(
-  --#{defaults.$prefix}-container-feature-width,
+  --#{root-defaults.$prefix}-container-feature-width,
   calc((#{$container-feature-max-width} - #{$container-breakout-max-width}) / 2)
 );

package/scss/mixins/_layer.scss

@@ -3,11 +3,11 @@
 // These should be used to define the layers of your components to ensure that
 // they are output in the correct order in the final compiled CSS.
 
-@use "../defaults" as base;
+@use "../defaults" as root-defaults;
 
 @mixin layer($layer) {
   @at-root {
-    @layer #{base.$prefix}.#{$layer} {
+    @layer #{root-defaults.$prefix}.#{$layer} {
       @content;
     }
   }

package/scss/state/focus/_defaults.scss

@@ -4,7 +4,5 @@
 // They are mainly used to provide default fallbacks for custom properties
 // which can be found in the `variables.scss` file.
 
-@forward "../../defaults";
-
 $focus-outline-style: dotted !default;
 $focus-box-shadow-style: inset !default;

package/scss/state/focus/_variables.scss

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

package/scss/theme/_index.scss

@@ -1,38 +1,4 @@
-// Graupl Theme.
+// Graupl theme.
 
-@use "variables" as *;
-@use "../mixins/layer" as *;
-@use "defaults";
-@use "sass:map";
-@use "../functions/theme";
-
-@include layer(theme) {
-  :root {
-    background: $background;
-    color: $font-color;
-    font-family: $font-family;
-    font-size: $font-size;
-  }
-
-  // Set the active theme for dark mode.
-  .dark-mode {
-    @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 {
-    @each $color, $map in $theme-light {
-      @each $shade, $value in $map {
-        --#{defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
-      }
-    }
-
-    color-scheme: light;
-  }
-}
+@forward "color";
+@forward "typography";

package/scss/theme/{_defaults.scss → color/_defaults.scss}

@@ -5,7 +5,6 @@
 // which can be found in the `variables.scss` file.
 
 @use "sass:map";
-@forward "../defaults";
 
 // Colours.
 $default-colors: (
@@ -42,9 +41,9 @@ $default-colors: (
     800: hsl(340deg 75% 20%),
     900: hsl(340deg 85% 10%),
   ),
-) !default;
+);
 $custom-colors: () !default;
-$colors: map.merge($default-colors, $custom-colors) !default;
+$colors: map.merge($default-colors, $custom-colors);
 
 // A map for reversing the shade values of the dark theme.
 $dark-map: (
@@ -58,16 +57,3 @@ $dark-map: (
   800: 200,
   900: 100,
 ) !default;
-
-// Font properties.
-/* stylelint-disable-next-line scss/dollar-variable-colon-space-after */
-$font-family:
-  system-ui,
-  -apple-system,
-  blinkmacsystemfont,
-  "Segoe UI",
-  roboto,
-  "Helvetica Neue",
-  arial,
-  sans-serif !default;
-$font-size: clamp(0.85rem, calc(0.8rem + 0.5vw), 1.25rem);

package/scss/theme/color/_index.scss

@@ -0,0 +1,42 @@
+// Color theme styles.
+
+@use "variables" as *;
+@use "../../mixins/layer" as *;
+@use "../../defaults" as root-defaults;
+@use "sass:map";
+@use "../../functions/theme";
+
+@include layer(theme) {
+  :root {
+    background: $root-background;
+    color: $root-font-color;
+
+    @each $color, $map in $theme-light {
+      @each $shade, $value in $map {
+        --#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade}: #{$value};
+      }
+    }
+  }
+
+  // Set the active theme for dark mode.
+  .dark-mode {
+    @each $color, $map in $theme-dark {
+      @each $shade, $value in $map {
+        --#{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};
+      }
+    }
+
+    color-scheme: light;
+  }
+}

package/scss/theme/{_variables.scss → color/_variables.scss}

@@ -1,6 +1,7 @@
 // Variables referencing custom properties.
 
 @use "defaults";
+@use "../../defaults" as root-defaults;
 @use "sass:map";
 
 // A colour map of base colours and their shades.
@@ -13,7 +14,10 @@ $colors: ();
 
   @each $shade, $value in $map {
     // Set the custom prop name and fallback value.
-    $color-property: var(--#{defaults.$prefix}-#{$color}--#{$shade}, $value);
+    $color-property: var(
+      --#{root-defaults.$prefix}-#{$color}--#{$shade},
+      $value
+    );
 
     // Add the custom prop to the map.
     $color-map: map.merge(
@@ -52,15 +56,15 @@ $theme-active: ();
 
     // Set the custom prop names and fallback values.
     $light-property: var(
-      --#{defaults.$prefix}-theme-light--#{$color}--#{$shade},
+      --#{root-defaults.$prefix}-theme-light--#{$color}--#{$shade},
       $value
     );
     $dark-property: var(
-      --#{defaults.$prefix}-theme-dark--#{$color}--#{$shade},
+      --#{root-defaults.$prefix}-theme-dark--#{$color}--#{$shade},
       $dark-value
     );
     $active-property: var(
-      --#{defaults.$prefix}-theme-active--#{$color}--#{$shade},
+      --#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade},
       $light-property
     );
 
@@ -106,16 +110,12 @@ $theme-active: ();
   );
 }
 
-// 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,
+$root-font-color: var(
+  --#{root-defaults.$prefix}-root-font-color,
   #{map.get(map.get($theme-active, primary), 900)}
 );
-$background: var(
-  --#{defaults.$prefix}-background,
+$root-background: var(
+  --#{root-defaults.$prefix}-root-background,
   #{map.get(map.get($theme-active, primary), 100)}
 );

package/scss/theme/color/color.scss

@@ -0,0 +1,3 @@
+// Color theme styles.
+
+@forward "index";