@graupl/core 1.0.0-beta.22 → 1.0.0-beta.24

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

@@ -1,4 +1,168 @@
 // @graupl/core color theme styles.
+//
+// This module wires up the global colour tokens and theme variants.
+//
+// The following selectors are generated by default:
+// - `:root`: Defines base colours and the active theme properties.
+// - `.light-mode`: Defines the light theme properties and sets `color-scheme: light`.
+// - `.dark-mode`: Defines the dark theme properties and sets `color-scheme: dark`.
+//
+// The following custom properties can be used to customize colour theming:
+// | Property                                | Description                                | Default Value                               |
+// | ---                                     | ---                                        | ---                                         |
+// | `--graupl-primary`                      | Primary base colour.                       | `hsl(219deg 75% 50%)`                       |
+// | `--graupl-primary--100`                 | Primary shade 100.                         | `hsl(219deg 100% 95%)`                      |
+// | `--graupl-primary--200`                 | Primary shade 200.                         | `hsl(219deg 90% 80%)`                       |
+// | `--graupl-primary--300`                 | Primary shade 300.                         | `hsl(219deg 80% 65%)`                       |
+// | `--graupl-primary--400`                 | Primary shade 400.                         | `hsl(219deg 75% 55%)`                       |
+// | `--graupl-primary--500`                 | Primary shade 500.                         | `hsl(219deg 75% 50%)`                       |
+// | `--graupl-primary--600`                 | Primary shade 600.                         | `hsl(219deg 75% 45%)`                       |
+// | `--graupl-primary--700`                 | Primary shade 700.                         | `hsl(219deg 80% 35%)`                       |
+// | `--graupl-primary--800`                 | Primary shade 800.                         | `hsl(219deg 90% 20%)`                       |
+// | `--graupl-primary--900`                 | Primary shade 900.                         | `hsl(219deg 100% 10%)`                      |
+// | `--graupl-secondary`                    | Secondary base colour.                     | `hsl(235deg 15% 50%)`                       |
+// | `--graupl-secondary--100`               | Secondary shade 100.                       | `hsl(235deg 40% 95%)`                       |
+// | `--graupl-secondary--200`               | Secondary shade 200.                       | `hsl(235deg 30% 80%)`                       |
+// | `--graupl-secondary--300`               | Secondary shade 300.                       | `hsl(235deg 20% 65%)`                       |
+// | `--graupl-secondary--400`               | Secondary shade 400.                       | `hsl(235deg 15% 55%)`                       |
+// | `--graupl-secondary--500`               | Secondary shade 500.                       | `hsl(235deg 15% 50%)`                       |
+// | `--graupl-secondary--600`               | Secondary shade 600.                       | `hsl(235deg 15% 45%)`                       |
+// | `--graupl-secondary--700`               | Secondary shade 700.                       | `hsl(235deg 20% 35%)`                       |
+// | `--graupl-secondary--800`               | Secondary shade 800.                       | `hsl(235deg 30% 20%)`                       |
+// | `--graupl-secondary--900`               | Secondary shade 900.                       | `hsl(235deg 40% 10%)`                       |
+// | `--graupl-tertiary`                     | Tertiary base colour.                      | `hsl(340deg 60% 50%)`                       |
+// | `--graupl-tertiary--100`                | Tertiary shade 100.                        | `hsl(340deg 85% 95%)`                       |
+// | `--graupl-tertiary--200`                | Tertiary shade 200.                        | `hsl(340deg 75% 80%)`                       |
+// | `--graupl-tertiary--300`                | Tertiary shade 300.                        | `hsl(340deg 65% 65%)`                       |
+// | `--graupl-tertiary--400`                | Tertiary shade 400.                        | `hsl(340deg 60% 55%)`                       |
+// | `--graupl-tertiary--500`                | Tertiary shade 500.                        | `hsl(340deg 60% 50%)`                       |
+// | `--graupl-tertiary--600`                | Tertiary shade 600.                        | `hsl(340deg 60% 45%)`                       |
+// | `--graupl-tertiary--700`                | Tertiary shade 700.                        | `hsl(340deg 65% 35%)`                       |
+// | `--graupl-tertiary--800`                | Tertiary shade 800.                        | `hsl(340deg 75% 20%)`                       |
+// | `--graupl-tertiary--900`                | Tertiary shade 900.                        | `hsl(340deg 85% 10%)`                       |
+// | `--graupl-theme-light--primary`         | Light theme primary base colour.           | `var(--graupl-primary)`                     |
+// | `--graupl-theme-light--primary--100`    | Light theme primary shade 100.             | `var(--graupl-primary--100)`                |
+// | `--graupl-theme-light--primary--200`    | Light theme primary shade 200.             | `var(--graupl-primary--200)`                |
+// | `--graupl-theme-light--primary--300`    | Light theme primary shade 300.             | `var(--graupl-primary--300)`                |
+// | `--graupl-theme-light--primary--400`    | Light theme primary shade 400.             | `var(--graupl-primary--400)`                |
+// | `--graupl-theme-light--primary--500`    | Light theme primary shade 500.             | `var(--graupl-primary--500)`                |
+// | `--graupl-theme-light--primary--600`    | Light theme primary shade 600.             | `var(--graupl-primary--600)`                |
+// | `--graupl-theme-light--primary--700`    | Light theme primary shade 700.             | `var(--graupl-primary--700)`                |
+// | `--graupl-theme-light--primary--800`    | Light theme primary shade 800.             | `var(--graupl-primary--800)`                |
+// | `--graupl-theme-light--primary--900`    | Light theme primary shade 900.             | `var(--graupl-primary--900)`                |
+// | `--graupl-theme-light--secondary`       | Light theme secondary base colour.         | `var(--graupl-secondary)`                   |
+// | `--graupl-theme-light--secondary--100`  | Light theme secondary shade 100.           | `var(--graupl-secondary--100)`              |
+// | `--graupl-theme-light--secondary--200`  | Light theme secondary shade 200.           | `var(--graupl-secondary--200)`              |
+// | `--graupl-theme-light--secondary--300`  | Light theme secondary shade 300.           | `var(--graupl-secondary--300)`              |
+// | `--graupl-theme-light--secondary--400`  | Light theme secondary shade 400.           | `var(--graupl-secondary--400)`              |
+// | `--graupl-theme-light--secondary--500`  | Light theme secondary shade 500.           | `var(--graupl-secondary--500)`              |
+// | `--graupl-theme-light--secondary--600`  | Light theme secondary shade 600.           | `var(--graupl-secondary--600)`              |
+// | `--graupl-theme-light--secondary--700`  | Light theme secondary shade 700.           | `var(--graupl-secondary--700)`              |
+// | `--graupl-theme-light--secondary--800`  | Light theme secondary shade 800.           | `var(--graupl-secondary--800)`              |
+// | `--graupl-theme-light--secondary--900`  | Light theme secondary shade 900.           | `var(--graupl-secondary--900)`              |
+// | `--graupl-theme-light--tertiary`        | Light theme tertiary base colour.          | `var(--graupl-tertiary)`                    |
+// | `--graupl-theme-light--tertiary--100`   | Light theme tertiary shade 100.            | `var(--graupl-tertiary--100)`               |
+// | `--graupl-theme-light--tertiary--200`   | Light theme tertiary shade 200.            | `var(--graupl-tertiary--200)`               |
+// | `--graupl-theme-light--tertiary--300`   | Light theme tertiary shade 300.            | `var(--graupl-tertiary--300)`               |
+// | `--graupl-theme-light--tertiary--400`   | Light theme tertiary shade 400.            | `var(--graupl-tertiary--400)`               |
+// | `--graupl-theme-light--tertiary--500`   | Light theme tertiary shade 500.            | `var(--graupl-tertiary--500)`               |
+// | `--graupl-theme-light--tertiary--600`   | Light theme tertiary shade 600.            | `var(--graupl-tertiary--600)`               |
+// | `--graupl-theme-light--tertiary--700`   | Light theme tertiary shade 700.            | `var(--graupl-tertiary--700)`               |
+// | `--graupl-theme-light--tertiary--800`   | Light theme tertiary shade 800.            | `var(--graupl-tertiary--800)`               |
+// | `--graupl-theme-light--tertiary--900`   | Light theme tertiary shade 900.            | `var(--graupl-tertiary--900)`               |
+// | `--graupl-theme-dark--primary`          | Dark theme primary base colour.            | `var(--graupl-primary)`                     |
+// | `--graupl-theme-dark--primary--100`     | Dark theme primary shade 100.              | `var(--graupl-primary--900)`                |
+// | `--graupl-theme-dark--primary--200`     | Dark theme primary shade 200.              | `var(--graupl-primary--800)`                |
+// | `--graupl-theme-dark--primary--300`     | Dark theme primary shade 300.              | `var(--graupl-primary--700)`                |
+// | `--graupl-theme-dark--primary--400`     | Dark theme primary shade 400.              | `var(--graupl-primary--600)`                |
+// | `--graupl-theme-dark--primary--500`     | Dark theme primary shade 500.              | `var(--graupl-primary--500)`                |
+// | `--graupl-theme-dark--primary--600`     | Dark theme primary shade 600.              | `var(--graupl-primary--400)`                |
+// | `--graupl-theme-dark--primary--700`     | Dark theme primary shade 700.              | `var(--graupl-primary--300)`                |
+// | `--graupl-theme-dark--primary--800`     | Dark theme primary shade 800.              | `var(--graupl-primary--200)`                |
+// | `--graupl-theme-dark--primary--900`     | Dark theme primary shade 900.              | `var(--graupl-primary--100)`                |
+// | `--graupl-theme-dark--secondary`        | Dark theme secondary base colour.          | `var(--graupl-secondary)`                   |
+// | `--graupl-theme-dark--secondary--100`   | Dark theme secondary shade 100.            | `var(--graupl-secondary--900)`              |
+// | `--graupl-theme-dark--secondary--200`   | Dark theme secondary shade 200.            | `var(--graupl-secondary--800)`              |
+// | `--graupl-theme-dark--secondary--300`   | Dark theme secondary shade 300.            | `var(--graupl-secondary--700)`              |
+// | `--graupl-theme-dark--secondary--400`   | Dark theme secondary shade 400.            | `var(--graupl-secondary--600)`              |
+// | `--graupl-theme-dark--secondary--500`   | Dark theme secondary shade 500.            | `var(--graupl-secondary--500)`              |
+// | `--graupl-theme-dark--secondary--600`   | Dark theme secondary shade 600.            | `var(--graupl-secondary--400)`              |
+// | `--graupl-theme-dark--secondary--700`   | Dark theme secondary shade 700.            | `var(--graupl-secondary--300)`              |
+// | `--graupl-theme-dark--secondary--800`   | Dark theme secondary shade 800.            | `var(--graupl-secondary--200)`              |
+// | `--graupl-theme-dark--secondary--900`   | Dark theme secondary shade 900.            | `var(--graupl-secondary--100)`              |
+// | `--graupl-theme-dark--tertiary`         | Dark theme tertiary base colour.           | `var(--graupl-tertiary)`                    |
+// | `--graupl-theme-dark--tertiary--100`    | Dark theme tertiary shade 100.             | `var(--graupl-tertiary--900)`               |
+// | `--graupl-theme-dark--tertiary--200`    | Dark theme tertiary shade 200.             | `var(--graupl-tertiary--800)`               |
+// | `--graupl-theme-dark--tertiary--300`    | Dark theme tertiary shade 300.             | `var(--graupl-tertiary--700)`               |
+// | `--graupl-theme-dark--tertiary--400`    | Dark theme tertiary shade 400.             | `var(--graupl-tertiary--600)`               |
+// | `--graupl-theme-dark--tertiary--500`    | Dark theme tertiary shade 500.             | `var(--graupl-tertiary--500)`               |
+// | `--graupl-theme-dark--tertiary--600`    | Dark theme tertiary shade 600.             | `var(--graupl-tertiary--400)`               |
+// | `--graupl-theme-dark--tertiary--700`    | Dark theme tertiary shade 700.             | `var(--graupl-tertiary--300)`               |
+// | `--graupl-theme-dark--tertiary--800`    | Dark theme tertiary shade 800.             | `var(--graupl-tertiary--200)`               |
+// | `--graupl-theme-dark--tertiary--900`    | Dark theme tertiary shade 900.             | `var(--graupl-tertiary--100)`               |
+// | `--graupl-theme-active--primary`        | Active theme primary base colour.          | `var(--graupl-theme-light--primary)`        |
+// | `--graupl-theme-active--primary--100`   | Active theme primary shade 100.            | `var(--graupl-theme-light--primary--100)`   |
+// | `--graupl-theme-active--primary--200`   | Active theme primary shade 200.            | `var(--graupl-theme-light--primary--200)`   |
+// | `--graupl-theme-active--primary--300`   | Active theme primary shade 300.            | `var(--graupl-theme-light--primary--300)`   |
+// | `--graupl-theme-active--primary--400`   | Active theme primary shade 400.            | `var(--graupl-theme-light--primary--400)`   |
+// | `--graupl-theme-active--primary--500`   | Active theme primary shade 500.            | `var(--graupl-theme-light--primary--500)`   |
+// | `--graupl-theme-active--primary--600`   | Active theme primary shade 600.            | `var(--graupl-theme-light--primary--600)`   |
+// | `--graupl-theme-active--primary--700`   | Active theme primary shade 700.            | `var(--graupl-theme-light--primary--700)`   |
+// | `--graupl-theme-active--primary--800`   | Active theme primary shade 800.            | `var(--graupl-theme-light--primary--800)`   |
+// | `--graupl-theme-active--primary--900`   | Active theme primary shade 900.            | `var(--graupl-theme-light--primary--900)`   |
+// | `--graupl-theme-active--secondary`      | Active theme secondary base colour.        | `var(--graupl-theme-light--secondary)`      |
+// | `--graupl-theme-active--secondary--100` | Active theme secondary shade 100.          | `var(--graupl-theme-light--secondary--100)` |
+// | `--graupl-theme-active--secondary--200` | Active theme secondary shade 200.          | `var(--graupl-theme-light--secondary--200)` |
+// | `--graupl-theme-active--secondary--300` | Active theme secondary shade 300.          | `var(--graupl-theme-light--secondary--300)` |
+// | `--graupl-theme-active--secondary--400` | Active theme secondary shade 400.          | `var(--graupl-theme-light--secondary--400)` |
+// | `--graupl-theme-active--secondary--500` | Active theme secondary shade 500.          | `var(--graupl-theme-light--secondary--500)` |
+// | `--graupl-theme-active--secondary--600` | Active theme secondary shade 600.          | `var(--graupl-theme-light--secondary--600)` |
+// | `--graupl-theme-active--secondary--700` | Active theme secondary shade 700.          | `var(--graupl-theme-light--secondary--700)` |
+// | `--graupl-theme-active--secondary--800` | Active theme secondary shade 800.          | `var(--graupl-theme-light--secondary--800)` |
+// | `--graupl-theme-active--secondary--900` | Active theme secondary shade 900.          | `var(--graupl-theme-light--secondary--900)` |
+// | `--graupl-theme-active--tertiary`       | Active theme tertiary base colour.         | `var(--graupl-theme-light--tertiary)`       |
+// | `--graupl-theme-active--tertiary--100`  | Active theme tertiary shade 100.           | `var(--graupl-theme-light--tertiary--100)`  |
+// | `--graupl-theme-active--tertiary--200`  | Active theme tertiary shade 200.           | `var(--graupl-theme-light--tertiary--200)`  |
+// | `--graupl-theme-active--tertiary--300`  | Active theme tertiary shade 300.           | `var(--graupl-theme-light--tertiary--300)`  |
+// | `--graupl-theme-active--tertiary--400`  | Active theme tertiary shade 400.           | `var(--graupl-theme-light--tertiary--400)`  |
+// | `--graupl-theme-active--tertiary--500`  | Active theme tertiary shade 500.           | `var(--graupl-theme-light--tertiary--500)`  |
+// | `--graupl-theme-active--tertiary--600`  | Active theme tertiary shade 600.           | `var(--graupl-theme-light--tertiary--600)`  |
+// | `--graupl-theme-active--tertiary--700`  | Active theme tertiary shade 700.           | `var(--graupl-theme-light--tertiary--700)`  |
+// | `--graupl-theme-active--tertiary--800`  | Active theme tertiary shade 800.           | `var(--graupl-theme-light--tertiary--800)`  |
+// | `--graupl-theme-active--tertiary--900`  | Active theme tertiary shade 900.           | `var(--graupl-theme-light--tertiary--900)`  |
+// | `--graupl-root-color`                   | Base text colour applied to `:root`.       | `var(--graupl-theme-active--primary--900)`  |
+// | `--graupl-root-background`              | Base background colour applied to `:root`. | `var(--graupl-theme-active--primary--100)`  |
+// | `--graupl-color`                        | Text colour token.                         | `var(--graupl-root-color)`                  |
+// | `--graupl-background`                   | Background colour token.                   | `var(--graupl-root-background)`             |
+// | `--graupl-border-color`                 | Border colour token.                       | `var(--graupl-color)`                       |
+//
+// The following sass variables can be used to customize colour generation:
+// | Variable                  | Description                                        | Default Value             |
+// | ---                       | ---                                                | ---                       |
+// | `$selector-base`          | The selector base for the component.               | `.`                       |
+// | `$modifier-selector-base` | The selector base for component modifiers.         | `.`                       |
+// | `$generate-base-colors`   | Flag to generate base colour tokens.               | `true`                    |
+// | `$generate-base-themes`   | Flag to generate base theme tokens.                | `true`                    |
+// | `$theme-selector-base`    | The selector base for the theme modifiers.         | `$modifier-selector-base` |
+// | `$theme-selector-prefix`  | Prefix for theme modifiers.                        | `"."`                     |
+// | `$theme-selector-suffix`  | Suffix for theme modifiers.                        | `"-mode"`                 |
+// | `$root-selector-base`     | The base selector for the root component.          | `":"`                     |
+// | `$root-selector`          | The selector for the root component.               | `"root"`                  |
+// | `$colors`                 | Map of base colours and shades.                    | See `_defaults.scss`      |
+// | `$themes`                 | List of available themes.                          | `(light, dark)`           |
+// | `$default-theme`          | Theme used for the active tokens at `:root`.       | `light`                   |
+// | `$theme-mappings`         | Shade remapping per theme.                         | See `_defaults.scss`      |
+// | `$theme-map`              | Expanded map of theme → colour → shade references. | Auto-generated            |
+//
+// @example
+// <div class="dark-mode">
+//   <p>Content inside a dark theme container.</p>
+// </div>
+//
+// @example
+// <div class="light-mode">
+//   <p>Content inside a light theme container.</p>
+// </div>
 
 @use "../../defaults" as root-defaults;
 @use "../../mixins/layer" as *;
@@ -8,7 +172,8 @@
 @use "variables" as *;
 
 @include layer(theme) {
-  :root {
+  // :root
+  #{defaults.$root-selector-base}#{defaults.$root-selector} {
     background: $root-background;
     color: $root-color;
 
@@ -39,6 +204,7 @@
 
   // Generate the available theme properties.
   @each $theme-name, $theme in $themes {
+    // e.g. .light-mode, .dark-mode
     @include theme.theme($theme-name) {
       @each $color, $map in $theme {
         @each $shade, $value in $map {

package/src/scss/theme/color/_variables.scss

@@ -2,6 +2,135 @@
 //
 // These values are to be used to directly style components and provide a
 // cleaner way to reference custom properties.
+//
+// Custom property defaults:
+// | Custom property                       | Default                                   |
+// | ------------------------------------- | ----------------------------------------- |
+// | --graupl-primary                      | hsl(219deg 75% 50%)                       |
+// | --graupl-primary--100                 | hsl(219deg 100% 95%)                      |
+// | --graupl-primary--200                 | hsl(219deg 90% 80%)                       |
+// | --graupl-primary--300                 | hsl(219deg 80% 65%)                       |
+// | --graupl-primary--400                 | hsl(219deg 75% 55%)                       |
+// | --graupl-primary--500                 | hsl(219deg 75% 50%)                       |
+// | --graupl-primary--600                 | hsl(219deg 75% 45%)                       |
+// | --graupl-primary--700                 | hsl(219deg 80% 35%)                       |
+// | --graupl-primary--800                 | hsl(219deg 90% 20%)                       |
+// | --graupl-primary--900                 | hsl(219deg 100% 10%)                      |
+// | --graupl-secondary                    | hsl(235deg 15% 50%)                       |
+// | --graupl-secondary--100               | hsl(235deg 40% 95%)                       |
+// | --graupl-secondary--200               | hsl(235deg 30% 80%)                       |
+// | --graupl-secondary--300               | hsl(235deg 20% 65%)                       |
+// | --graupl-secondary--400               | hsl(235deg 15% 55%)                       |
+// | --graupl-secondary--500               | hsl(235deg 15% 50%)                       |
+// | --graupl-secondary--600               | hsl(235deg 15% 45%)                       |
+// | --graupl-secondary--700               | hsl(235deg 20% 35%)                       |
+// | --graupl-secondary--800               | hsl(235deg 30% 20%)                       |
+// | --graupl-secondary--900               | hsl(235deg 40% 10%)                       |
+// | --graupl-tertiary                     | hsl(340deg 60% 50%)                       |
+// | --graupl-tertiary--100                | hsl(340deg 85% 95%)                       |
+// | --graupl-tertiary--200                | hsl(340deg 75% 80%)                       |
+// | --graupl-tertiary--300                | hsl(340deg 65% 65%)                       |
+// | --graupl-tertiary--400                | hsl(340deg 60% 55%)                       |
+// | --graupl-tertiary--500                | hsl(340deg 60% 50%)                       |
+// | --graupl-tertiary--600                | hsl(340deg 60% 45%)                       |
+// | --graupl-tertiary--700                | hsl(340deg 65% 35%)                       |
+// | --graupl-tertiary--800                | hsl(340deg 75% 20%)                       |
+// | --graupl-tertiary--900                | hsl(340deg 85% 10%)                       |
+// | --graupl-theme--light--primary        | var(--graupl-primary)                     |
+// | --graupl-theme-light--primary--100    | var(--graupl-primary--100)                |
+// | --graupl-theme-light--primary--200    | var(--graupl-primary--200)                |
+// | --graupl-theme-light--primary--300    | var(--graupl-primary--300)                |
+// | --graupl-theme-light--primary--400    | var(--graupl-primary--400)                |
+// | --graupl-theme-light--primary--500    | var(--graupl-primary--500)                |
+// | --graupl-theme-light--primary--600    | var(--graupl-primary--600)                |
+// | --graupl-theme-light--primary--700    | var(--graupl-primary--700)                |
+// | --graupl-theme-light--primary--800    | var(--graupl-primary--800)                |
+// | --graupl-theme-light--primary--900    | var(--graupl-primary--900)                |
+// | --graupl-theme--light--secondary      | var(--graupl-secondary)                   |
+// | --graupl-theme-light--secondary--100  | var(--graupl-secondary--100)              |
+// | --graupl-theme-light--secondary--200  | var(--graupl-secondary--200)              |
+// | --graupl-theme-light--secondary--300  | var(--graupl-secondary--300)              |
+// | --graupl-theme-light--secondary--400  | var(--graupl-secondary--400)              |
+// | --graupl-theme-light--secondary--500  | var(--graupl-secondary--500)              |
+// | --graupl-theme-light--secondary--600  | var(--graupl-secondary--600)              |
+// | --graupl-theme-light--secondary--700  | var(--graupl-secondary--700)              |
+// | --graupl-theme-light--secondary--800  | var(--graupl-secondary--800)              |
+// | --graupl-theme-light--secondary--900  | var(--graupl-secondary--900)              |
+// | --graupl-theme--light--tertiary       | var(--graupl-tertiary)                    |
+// | --graupl-theme-light--tertiary--100   | var(--graupl-tertiary--100)               |
+// | --graupl-theme-light--tertiary--200   | var(--graupl-tertiary--200)               |
+// | --graupl-theme-light--tertiary--300   | var(--graupl-tertiary--300)               |
+// | --graupl-theme-light--tertiary--400   | var(--graupl-tertiary--400)               |
+// | --graupl-theme-light--tertiary--500   | var(--graupl-tertiary--500)               |
+// | --graupl-theme-light--tertiary--600   | var(--graupl-tertiary--600)               |
+// | --graupl-theme-light--tertiary--700   | var(--graupl-tertiary--700)               |
+// | --graupl-theme-light--tertiary--800   | var(--graupl-tertiary--800)               |
+// | --graupl-theme-light--tertiary--900   | var(--graupl-tertiary--900)               |
+// | --graupl-theme--dark--primary         | var(--graupl-primary)                     |
+// | --graupl-theme-dark--primary--100     | var(--graupl-primary--900)                |
+// | --graupl-theme-dark--primary--200     | var(--graupl-primary--800)                |
+// | --graupl-theme-dark--primary--300     | var(--graupl-primary--700)                |
+// | --graupl-theme-dark--primary--400     | var(--graupl-primary--600)                |
+// | --graupl-theme-dark--primary--500     | var(--graupl-primary--500)                |
+// | --graupl-theme-dark--primary--600     | var(--graupl-primary--400)                |
+// | --graupl-theme-dark--primary--700     | var(--graupl-primary--300)                |
+// | --graupl-theme-dark--primary--800     | var(--graupl-primary--200)                |
+// | --graupl-theme-dark--primary--900     | var(--graupl-primary--100)                |
+// | --graupl-theme--dark--secondary       | var(--graupl-secondary)                   |
+// | --graupl-theme-dark--secondary--100   | var(--graupl-secondary--900)              |
+// | --graupl-theme-dark--secondary--200   | var(--graupl-secondary--800)              |
+// | --graupl-theme-dark--secondary--300   | var(--graupl-secondary--700)              |
+// | --graupl-theme-dark--secondary--400   | var(--graupl-secondary--600)              |
+// | --graupl-theme-dark--secondary--500   | var(--graupl-secondary--500)              |
+// | --graupl-theme-dark--secondary--600   | var(--graupl-secondary--400)              |
+// | --graupl-theme-dark--secondary--700   | var(--graupl-secondary--300)              |
+// | --graupl-theme-dark--secondary--800   | var(--graupl-secondary--200)              |
+// | --graupl-theme-dark--secondary--900   | var(--graupl-secondary--100)              |
+// | --graupl-theme--dark--tertiary        | var(--graupl-tertiary)                    |
+// | --graupl-theme-dark--tertiary--100    | var(--graupl-tertiary--900)               |
+// | --graupl-theme-dark--tertiary--200    | var(--graupl-tertiary--800)               |
+// | --graupl-theme-dark--tertiary--300    | var(--graupl-tertiary--700)               |
+// | --graupl-theme-dark--tertiary--400    | var(--graupl-tertiary--600)               |
+// | --graupl-theme-dark--tertiary--500    | var(--graupl-tertiary--500)               |
+// | --graupl-theme-dark--tertiary--600    | var(--graupl-tertiary--400)               |
+// | --graupl-theme-dark--tertiary--700    | var(--graupl-tertiary--300)               |
+// | --graupl-theme-dark--tertiary--800    | var(--graupl-tertiary--200)               |
+// | --graupl-theme-dark--tertiary--900    | var(--graupl-tertiary--100)               |
+// | --graupl-theme-active--primary        | var(--graupl-theme-light--primary)        |
+// | --graupl-theme-active--primary--100   | var(--graupl-theme-light--primary--100)   |
+// | --graupl-theme-active--primary--200   | var(--graupl-theme-light--primary--200)   |
+// | --graupl-theme-active--primary--300   | var(--graupl-theme-light--primary--300)   |
+// | --graupl-theme-active--primary--400   | var(--graupl-theme-light--primary--400)   |
+// | --graupl-theme-active--primary--500   | var(--graupl-theme-light--primary--500)   |
+// | --graupl-theme-active--primary--600   | var(--graupl-theme-light--primary--600)   |
+// | --graupl-theme-active--primary--700   | var(--graupl-theme-light--primary--700)   |
+// | --graupl-theme-active--primary--800   | var(--graupl-theme-light--primary--800)   |
+// | --graupl-theme-active--primary--900   | var(--graupl-theme-light--primary--900)   |
+// | --graupl-theme-active--secondary      | var(--graupl-theme-light--secondary)      |
+// | --graupl-theme-active--secondary--100 | var(--graupl-theme-light--secondary--100) |
+// | --graupl-theme-active--secondary--200 | var(--graupl-theme-light--secondary--200) |
+// | --graupl-theme-active--secondary--300 | var(--graupl-theme-light--secondary--300) |
+// | --graupl-theme-active--secondary--400 | var(--graupl-theme-light--secondary--400) |
+// | --graupl-theme-active--secondary--500 | var(--graupl-theme-light--secondary--500) |
+// | --graupl-theme-active--secondary--600 | var(--graupl-theme-light--secondary--600) |
+// | --graupl-theme-active--secondary--700 | var(--graupl-theme-light--secondary--700) |
+// | --graupl-theme-active--secondary--800 | var(--graupl-theme-light--secondary--800) |
+// | --graupl-theme-active--secondary--900 | var(--graupl-theme-light--secondary--900) |
+// | --graupl-theme-active--tertiary       | var(--graupl-theme-light--tertiary)       |
+// | --graupl-theme-active--tertiary--100  | var(--graupl-theme-light--tertiary--100)  |
+// | --graupl-theme-active--tertiary--200  | var(--graupl-theme-light--tertiary--200)  |
+// | --graupl-theme-active--tertiary--300  | var(--graupl-theme-light--tertiary--300)  |
+// | --graupl-theme-active--tertiary--400  | var(--graupl-theme-light--tertiary--400)  |
+// | --graupl-theme-active--tertiary--500  | var(--graupl-theme-light--tertiary--500)  |
+// | --graupl-theme-active--tertiary--600  | var(--graupl-theme-light--tertiary--600)  |
+// | --graupl-theme-active--tertiary--700  | var(--graupl-theme-light--tertiary--700)  |
+// | --graupl-theme-active--tertiary--800  | var(--graupl-theme-light--tertiary--800)  |
+// | --graupl-theme-active--tertiary--900  | var(--graupl-theme-light--tertiary--900)  |
+// | --graupl-root-color                   | var(--graupl-theme-active--primary--900)  |
+// | --graupl-root-background              | var(--graupl-theme-active--primary--100)  |
+// | --graupl-color                        | var(--graupl-root-color)                  |
+// | --graupl-background                   | var(--graupl-root-background)             |
+// | --graupl-border-color                 | var(--graupl-color)                       |
 
 @use "defaults";
 @use "../../defaults" as root-defaults;
@@ -21,8 +150,12 @@ $colors: ();
     // Set the custom prop name and fallback value.
     // Handle _default shade vs proper shade mappings.
     @if $shade == "_default" {
+      // --graupl-primary, --graupl-secondary, --graupl-tertiary
       $color-property: var(--#{root-defaults.$prefix}#{$color}, $value);
     } @else {
+      // --graupl-primary--100, --graupl-primary--200, --graupl-primary--300, --graupl-primary--400, --graupl-primary--500, --graupl-primary--600, --graupl-primary--700, --graupl-primary--800, --graupl-primary--900
+      // --graupl-secondary--100, --graupl-secondary--200, --graupl-secondary--300, --graupl-secondary--400, --graupl-secondary--500, --graupl-secondary--600, --graupl-secondary--700, --graupl-secondary--800, --graupl-secondary--900
+      // --graupl-tertiary--100, --graupl-tertiary--200, --graupl-tertiary--300, --graupl-tertiary--400, --graupl-tertiary--500, --graupl-tertiary--600, --graupl-tertiary--700, --graupl-tertiary--800, --graupl-tertiary--900
       $color-property: var(
         --#{root-defaults.$prefix}#{$color}--#{$shade},
         $value
@@ -64,11 +197,19 @@ $themes: (
       // Set the custom prop name and fallback value.
       // Handle _default shade vs proper shade mappings.
       @if $shade == "_default" {
+        // --graupl-theme--light--primary, --graupl-theme--light--secondary, --graupl-theme--light--tertiary
+        // --graupl-theme--dark--primary, --graupl-theme--dark--secondary, --graupl-theme--dark--tertiary
         $color-property: var(
           --#{root-defaults.$prefix}theme--#{$theme-name}--#{$color-name},
           #{map.get($colors, map.get($value, color), map.get($value, shade))}
         );
       } @else {
+        // --graupl-theme-light--primary--100, --graupl-theme-light--primary--200, --graupl-theme-light--primary--300, --graupl-theme-light--primary--400, --graupl-theme-light--primary--500, --graupl-theme-light--primary--600, --graupl-theme-light--primary--700, --graupl-theme-light--primary--800, --graupl-theme-light--primary--900
+        // --graupl-theme-light--secondary--100, --graupl-theme-light--secondary--200, --graupl-theme-light--secondary--300, --graupl-theme-light--secondary--400, --graupl-theme-light--secondary--500, --graupl-theme-light--secondary--600, --graupl-theme-light--secondary--700, --graupl-theme-light--secondary--800, --graupl-theme-light--secondary--900
+        // --graupl-theme-light--tertiary--100, --graupl-theme-light--tertiary--200, --graupl-theme-light--tertiary--300, --graupl-theme-light--tertiary--400, --graupl-theme-light--tertiary--500, --graupl-theme-light--tertiary--600, --graupl-theme-light--tertiary--700, --graupl-theme-light--tertiary--800, --graupl-theme-light--tertiary--900
+        // --graupl-theme-dark--primary--100, --graupl-theme-dark--primary--200, --graupl-theme-dark--primary--300, --graupl-theme-dark--primary--400, --graupl-theme-dark--primary--500, --graupl-theme-dark--primary--600, --graupl-theme-dark--primary--700, --graupl-theme-dark--primary--800, --graupl-theme-dark--primary--900
+        // --graupl-theme-dark--secondary--100, --graupl-theme-dark--secondary--200, --graupl-theme-dark--secondary--300, --graupl-theme-dark--secondary--400, --graupl-theme-dark--secondary--500, --graupl-theme-dark--secondary--600, --graupl-theme-dark--secondary--700, --graupl-theme-dark--secondary--800, --graupl-theme-dark--secondary--900
+        // --graupl-theme-dark--tertiary--100, --graupl-theme-dark--tertiary--200, --graupl-theme-dark--tertiary--300, --graupl-theme-dark--tertiary--400, --graupl-theme-dark--tertiary--500, --graupl-theme-dark--tertiary--600, --graupl-theme-dark--tertiary--700, --graupl-theme-dark--tertiary--800, --graupl-theme-dark--tertiary--900
         $color-property: var(
           --#{root-defaults.$prefix}theme-#{$theme-name}--#{$color-name}--#{$shade},
           #{map.get($colors, map.get($value, color), map.get($value, shade))}
@@ -110,11 +251,15 @@ $themes: (
       // Set the custom prop name and fallback value.
       // Handle _default shade vs proper shade mappings.
       @if $shade == "_default" {
+        // --graupl-theme-active--primary, --graupl-theme-active--secondary, --graupl-theme-active--tertiary
         $color-property: var(
           --#{root-defaults.$prefix}theme-active--#{$color-name},
           #{$value}
         );
       } @else {
+        // --graupl-theme-active--primary--100, --graupl-theme-active--primary--200, --graupl-theme-active--primary--300, --graupl-theme-active--primary--400, --graupl-theme-active--primary--500, --graupl-theme-active--primary--600, --graupl-theme-active--primary--700, --graupl-theme-active--primary--800, --graupl-theme-active--primary--900
+        // --graupl-theme-active--secondary--100, --graupl-theme-active--secondary--200, --graupl-theme-active--secondary--300, --graupl-theme-active--secondary--400, --graupl-theme-active--secondary--500, --graupl-theme-active--secondary--600, --graupl-theme-active--secondary--700, --graupl-theme-active--secondary--800, --graupl-theme-active--secondary--900
+        // --graupl-theme-active--tertiary--100, --graupl-theme-active--tertiary--200, --graupl-theme-active--tertiary--300, --graupl-theme-active--tertiary--400, --graupl-theme-active--tertiary--500, --graupl-theme-active--tertiary--600, --graupl-theme-active--tertiary--700, --graupl-theme-active--tertiary--800, --graupl-theme-active--tertiary--900
         $color-property: var(
           --#{root-defaults.$prefix}theme-active--#{$color-name}--#{$shade},
           #{$value}
@@ -144,10 +289,14 @@ $themes: (
 }
 
 // Colour properties.
+// --graupl-root-color
 $root-color: var(--#{root-defaults.$prefix}root-color);
+
+// --graupl-root-background
 $root-background: var(--#{root-defaults.$prefix}root-background);
 
 @if map.has-key($themes, active, primary, 900) {
+  // --graupl-root-color
   $root-color: var(
     --#{root-defaults.$prefix}root-color,
     #{map.get(map.get(map.get($themes, active), primary), 900)}
@@ -155,12 +304,18 @@ $root-background: var(--#{root-defaults.$prefix}root-background);
 }
 
 @if map.has-key($themes, active, primary, 100) {
+  // --graupl-root-background
   $root-background: var(
     --#{root-defaults.$prefix}root-background,
     #{map.get(map.get(map.get($themes, active), primary), 100)}
   );
 }
 
+// --graupl-color
 $color: var(--#{root-defaults.$prefix}color, #{$root-color});
+
+// --graupl-background
 $background: var(--#{root-defaults.$prefix}background, #{$root-background});
+
+// --graupl-border-color
 $border-color: var(--#{root-defaults.$prefix}border-color, #{$color});

package/src/scss/theme/typography/_defaults.scss

@@ -10,6 +10,32 @@
 @use "sass:map";
 
 // font properties.
+$selector-base: root-defaults.$element-selector-base !default;
+$modifier-selector-base: root-defaults.$modifier-selector-base !default;
+$paragraph-selector-base: $selector-base !default;
+$paragraph-selector: "p";
+$small-selector-base: $selector-base !default;
+$small-selector: "small";
+$h1-selector-base: $selector-base !default;
+$h1-selector: "h1" !default;
+$h2-selector-base: $selector-base !default;
+$h2-selector: "h2" !default;
+$h3-selector-base: $selector-base !default;
+$h3-selector: "h3" !default;
+$h4-selector-base: $selector-base !default;
+$h4-selector: "h4" !default;
+$h5-selector-base: $selector-base !default;
+$h5-selector: "h5" !default;
+$h6-selector-base: $selector-base !default;
+$h6-selector: "h6" !default;
+$root-selector-base: ":" !default;
+$root-selector: "root" !default;
+$bold-selector-base: $selector-base !default;
+$bold-selector: "b" !default;
+$strong-selector-base: $selector-base !default;
+$strong-selector: "strong" !default;
+$body-selector-base: $selector-base !default;
+$body-selector: "body" !default;
 $generate-base-font-sizes: root-defaults.$generate-base-font-sizes !default;
 $generate-base-font-weights: root-defaults.$generate-base-font-weights !default;
 $font-size-base: 1rem !default;
@@ -30,19 +56,8 @@ $-font-size-multipliers: (
   4xl: 2.488,
   5xl: 2.986,
 );
-$custom-font-size-multipliers: () !default;
 $font-size-multipliers: () !default;
 
-// @todo remove this once $custom-font-size-multipliers is removed
-@if $custom-font-size-multipliers != () {
-  @warn "`$custom-font-size-multipliers` is deprecated and will be removed in a future release of Graupl. Use `$font-size-multipliers` instead.";
-
-  $font-size-multipliers: map.merge(
-    $font-size-multipliers,
-    $custom-font-size-multipliers
-  );
-}
-
 // Merge the font size multipliers with the default ones.
 @if $generate-base-font-sizes {
   $font-size-multipliers: map.merge(
@@ -57,16 +72,8 @@ $-font-weights: (
   normal: 400,
   bold: 700,
 );
-$custom-font-weights: () !default;
 $font-weights: () !default;
 
-// @todo remove this once $custom-font-weights is removed
-@if $custom-font-weights != () {
-  @warn "`$custom-font-weights` is deprecated and will be removed in a future release of Graupl. Use `$font-weights` instead.";
-
-  $font-weights: map.merge($font-weights, $custom-font-weights);
-}
-
 // Merge the custom font weights with the default ones.
 @if $generate-base-font-weights {
   $font-weights: map.merge($-font-weights, $font-weights);