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

package/scss/layout/columns/_defaults.scss

@@ -11,3 +11,4 @@ $columns-count: 3 !default;
 $columns-disable-width: 48ch !default;
 $columns-min-count: 1 !default;
 $columns-max-count: 4 !default;
+$columns-span: 1 !default;

package/scss/layout/columns/_index.scss

@@ -13,12 +13,20 @@
       repeat(auto-fit, minmax(#{$columns-min-width}, #{$columns-max-width}))
     );
     gap: $columns-gap;
+
+    > * {
+      grid-column: span $columns-span;
+    }
   }
 
   @for $i from defaults.$columns-min-count through defaults.$columns-max-count {
     .columns-#{$i} {
       --#{defaults.$prefix}-columns-count: #{$i};
     }
+
+    .span-#{$i} {
+      --#{defaults.$prefix}-columns-span: #{$i};
+    }
   }
 
   // Disable columns on small screens to avoid horizontal bleeding.

package/scss/layout/columns/_variables.scss

@@ -18,3 +18,7 @@ $columns-max-width: var(
   --#{defaults.$prefix}-columns-max-width,
   #{defaults.$columns-max-width}
 );
+$columns-span: var(
+  --#{defaults.$prefix}-columns-span,
+  #{defaults.$columns-span}
+);

package/scss/state/focus/_variables.scss

@@ -7,7 +7,7 @@
 $focus-width: var(--#{defaults.$prefix}-focus-width, #{base.$border-width});
 $focus-outline-color: var(
   --#{defaults.$prefix}-focus-outline-color,
-  #{theme.$theme-active--dark}
+  #{theme.$theme-active--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--light}
+  #{theme.$theme-active--primary--100}
 );
 $focus-box-shadow-style: var(
   --#{defaults.$prefix}-focus-box-shadow-style,

package/scss/theme/_defaults.scss

@@ -20,6 +20,17 @@ $primary: (
   900: hsl(219deg 100% 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%),

package/scss/theme/_index.scss

@@ -7,29 +7,85 @@
 
 @include layer(theme) {
   :root {
-    background: $theme-active--light;
-    color: $theme-active--dark;
+    background: $theme-active--primary--100;
+    color: $theme-active--primary--900;
     font-family: $font-family;
     font-size: $font-size;
   }
 
   // Set the active theme for dark mode.
   .dark-mode {
-    --#{defaults.$prefix}-theme-active--primary: #{$theme-dark--primary};
-    --#{defaults.$prefix}-theme-active--primary--dark: #{$theme-dark--primary--dark};
-    --#{defaults.$prefix}-theme-active--primary--light: #{$theme-dark--primary--light};
-    --#{defaults.$prefix}-theme-active--secondary: #{$theme-dark--secondary};
-    --#{defaults.$prefix}-theme-active--light: #{$theme-dark--light};
-    --#{defaults.$prefix}-theme-active--dark: #{$theme-dark--dark};
+    // 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};
+
+    color-scheme: dark;
   }
 
   // Set the active theme for light mode.
   .light-mode {
-    --#{defaults.$prefix}-theme-active--primary: #{$theme-light--primary};
-    --#{defaults.$prefix}-theme-active--primary--dark: #{$theme-light--primary--dark};
-    --#{defaults.$prefix}-theme-active--primary--light: #{$theme-light--primary--light};
-    --#{defaults.$prefix}-theme-active--secondary: #{$theme-light--secondary};
-    --#{defaults.$prefix}-theme-active--light: #{$theme-light--light};
-    --#{defaults.$prefix}-theme-active--dark: #{$theme-light--dark};
+    // 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};
+
+    color-scheme: light;
   }
 }

package/scss/theme/_variables.scss

@@ -74,102 +74,396 @@ $secondary: (
     ),
 );
 
+// 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)}
+    ),
+);
+
 // Theme colours.
-$theme-light--primary: var(
-  --#{defaults.$prefix}-theme-light--primary,
+// 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--dark: var(
-  --#{defaults.$prefix}-theme-light--primary--dark,
+$theme-light--primary--800: var(
+  --#{defaults.$prefix}-theme-light--primary--800,
   #{map.get($primary, 800)}
 );
-$theme-light--primary--light: var(
-  --#{defaults.$prefix}-theme-light--primary--light,
+$theme-light--primary--900: var(
+  --#{defaults.$prefix}-theme-light--primary--900,
+  #{map.get($primary, 900)}
+);
+
+// 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: var(
-  --#{defaults.$prefix}-theme-dark--primary,
+$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--dark: var(
-  --#{defaults.$prefix}-theme-dark--primary--dark,
+$theme-dark--primary--800: var(
+  --#{defaults.$prefix}-theme-dark--primary--800,
   #{map.get($primary, 200)}
 );
-$theme-dark--primary--light: var(
-  --#{defaults.$prefix}-theme-dark--primary--light,
-  #{map.get($primary, 400)}
+$theme-dark--primary--900: var(
+  --#{defaults.$prefix}-theme-dark--primary--900,
+  #{map.get($primary, 100)}
+);
+
+// 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: var(
-  --#{defaults.$prefix}-theme-active--primary,
-  #{$theme-light--primary}
+$theme-active--primary--500: var(
+  --#{defaults.$prefix}-theme-active--primary--500,
+  #{$theme-light--primary--500}
 );
-$theme-active--primary--dark: var(
-  --#{defaults.$prefix}-theme-active--primary--dark,
-  #{$theme-light--primary--dark}
+$theme-active--primary--600: var(
+  --#{defaults.$prefix}-theme-active--primary--600,
+  #{$theme-light--primary--600}
 );
-$theme-active--primary--light: var(
-  --#{defaults.$prefix}-theme-active--primary--light,
-  #{$theme-light--primary--light}
+$theme-active--primary--700: var(
+  --#{defaults.$prefix}-theme-active--primary--700,
+  #{$theme-light--primary--700}
 );
-$theme-light--secondary: var(
-  --#{defaults.$prefix}-theme-light--secondary,
+$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}
+);
+
+// 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--dark: var(
-  --#{defaults.$prefix}-theme-light--secondary--dark,
+$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)}
+);
+
+// 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-light--secondary--light: var(
-  --#{defaults.$prefix}-theme-light--secondary--light,
+$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: var(
-  --#{defaults.$prefix}-theme-dark--secondary,
+$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--dark: var(
-  --#{defaults.$prefix}-theme-dark--secondary--dark,
+$theme-dark--secondary--800: var(
+  --#{defaults.$prefix}-theme-dark--secondary--800,
   #{map.get($secondary, 200)}
 );
-$theme-dark--secondary--light: var(
-  --#{defaults.$prefix}-theme-dark--secondary--light,
-  #{map.get($secondary, 400)}
+$theme-dark--secondary--900: var(
+  --#{defaults.$prefix}-theme-dark--secondary--900,
+  #{map.get($secondary, 100)}
 );
-$theme-active--secondary: var(
-  --#{defaults.$prefix}-theme-active--secondary,
-  #{$theme-light--secondary}
+
+// Colour secondary - active.
+$theme-active--secondary--100: var(
+  --#{defaults.$prefix}-theme-active--secondary--100,
+  #{$theme-light--secondary--100}
 );
-$theme-active--secondary--dark: var(
-  --#{defaults.$prefix}-theme-active--secondary--dark,
-  #{$theme-light--secondary--dark}
+$theme-active--secondary--200: var(
+  --#{defaults.$prefix}-theme-active--secondary--200,
+  #{$theme-light--secondary--200}
 );
-$theme-active--secondary--light: var(
-  --#{defaults.$prefix}-theme-active--secondary--light,
-  #{$theme-light--secondary--light}
+$theme-active--secondary--300: var(
+  --#{defaults.$prefix}-theme-active--secondary--300,
+  #{$theme-light--secondary--300}
 );
-$theme-light--light: var(
-  --#{defaults.$prefix}-theme-light--light,
-  #{map.get($primary, 100)}
+$theme-active--secondary--400: var(
+  --#{defaults.$prefix}-theme-active--secondary--400,
+  #{$theme-light--secondary--400}
 );
-$theme-dark--light: var(
-  --#{defaults.$prefix}-theme-dark--light,
-  #{map.get($primary, 900)}
+$theme-active--secondary--500: var(
+  --#{defaults.$prefix}-theme-active--secondary--500,
+  #{$theme-light--secondary--500}
 );
-$theme-active--light: var(
-  --#{defaults.$prefix}-theme-active--light,
-  #{$theme-light--light}
+$theme-active--secondary--600: var(
+  --#{defaults.$prefix}-theme-active--secondary--600,
+  #{$theme-light--secondary--600}
 );
-$theme-light--dark: var(
-  --#{defaults.$prefix}-theme-light--dark,
-  #{map.get($primary, 900)}
+$theme-active--secondary--700: var(
+  --#{defaults.$prefix}-theme-active--secondary--700,
+  #{$theme-light--secondary--700}
 );
-$theme-dark--dark: var(
-  --#{defaults.$prefix}-theme-dark--dark,
-  #{map.get($primary, 100)}
+$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}
+);
+
+// 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)}
+);
+
+// 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)}
+);
+
+// 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--dark: var(
-  --#{defaults.$prefix}-theme-active--dark,
-  #{$theme-light--dark}
+$theme-active--tertiary--900: var(
+  --#{defaults.$prefix}-theme-active--tertiary--900,
+  #{$theme-light--tertiary--900}
 );
 
 // Font properties.