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

package/src/scss/layout/container/_variables.scss

@@ -8,51 +8,79 @@
 @use "../../defaults" as root-defaults;
 @use "sass:map";
 
-$container-gap: var(
-  --#{root-defaults.$prefix}container-gap,
-  #{map.get(root-variables.$spacers, 5)}
+// --graupl-container-sidebar-width
+$container-sidebar-width: var(
+  --#{root-defaults.$prefix}container-sidebar-width,
+  #{defaults.$container-sidebar-width}
 );
+
+// --graupl-container-breakout-width
+$container-breakout-width: var(
+  --#{root-defaults.$prefix}container-breakout-width,
+  #{defaults.$container-breakout-width}
+);
+
+// --graupl-container-feature-width
+$container-feature-width: var(
+  --#{root-defaults.$prefix}container-feature-width,
+  #{defaults.$container-feature-width}
+);
+
+// --graupl-container-content-max-width
 $container-content-max-width: var(
   --#{root-defaults.$prefix}container-content-max-width,
   #{root-variables.$content-max-width}
 );
-$container-sidebar-width: var(
-  --#{root-defaults.$prefix}container-sidebar-width,
-  #{defaults.$container-sidebar-width}
-);
+
+// --graupl-container-breakout-max-width
 $container-breakout-max-width: var(
   --#{root-defaults.$prefix}container-breakout-max-width,
-  calc(#{$container-content-max-width} + #{defaults.$container-breakout-width})
+  calc(#{$container-content-max-width} + #{$container-breakout-width})
 );
+
+// --graupl-container-feature-max-width
 $container-feature-max-width: var(
   --#{root-defaults.$prefix}container-feature-max-width,
-  calc(#{$container-breakout-max-width} + #{defaults.$container-feature-width})
+  calc(#{$container-breakout-max-width} + #{$container-feature-width})
 );
+
+// --graupl-container-full-width-section-min-width
 $container-full-width-section-min-width: var(
   --#{root-defaults.$prefix}container-full-width-section-min-width,
-  #{$container-gap}
+  #{map.get(root-variables.$spacers, 5)}
 );
+
+// --graupl-container-full-width-section-max-width
 $container-full-width-section-max-width: var(
   --#{root-defaults.$prefix}container-full-width-section-max-width,
   1fr
 );
+
+// --graupl-container-feature-section-min-width
 $container-feature-section-min-width: var(
   --#{root-defaults.$prefix}container-feature-section-min-width,
   0rem
 );
+
+// --graupl-container-feature-section-max-width
 $container-feature-section-max-width: var(
   --#{root-defaults.$prefix}container-feature-section-max-width,
   calc((#{$container-feature-max-width} - #{$container-breakout-max-width}) / 2)
 );
+
+// --graupl-container-breakout-section-min-width
 $container-breakout-section-min-width: var(
   --#{root-defaults.$prefix}container-breakout-section-min-width,
   0rem
 );
+
+// --graupl-container-breakout-section-max-width
 $container-breakout-section-max-width: var(
   --#{root-defaults.$prefix}container-breakout-section-max-width,
   calc((#{$container-breakout-max-width} - #{$container-content-max-width}) / 2)
 );
 /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
+// --graupl-container-content-section-min-width
 $container-content-section-min-width: var(
   --#{root-defaults.$prefix}container-content-section-min-width,
   calc(
@@ -62,10 +90,13 @@ $container-content-section-min-width: var(
   )
 );
 /* stylelint-enable  scss/operator-no-newline-after */
+// --graupl-container-content-section-max-width
 $container-content-section-max-width: var(
   --#{root-defaults.$prefix}container-content-section-max-width,
   #{$container-content-max-width}
 );
+
+// --graupl-container-full-width-section-width
 $container-full-width-section-width: var(
   --#{root-defaults.$prefix}container-full-width-section-width,
   minmax(
@@ -73,6 +104,8 @@ $container-full-width-section-width: var(
     #{$container-full-width-section-max-width}
   )
 );
+
+// --graupl-container-feature-section-width
 $container-feature-section-width: var(
   --#{root-defaults.$prefix}container-feature-section-width,
   minmax(
@@ -80,6 +113,8 @@ $container-feature-section-width: var(
     #{$container-feature-section-max-width}
   )
 );
+
+// --graupl-container-breakout-section-width
 $container-breakout-section-width: var(
   --#{root-defaults.$prefix}container-breakout-section-width,
   minmax(
@@ -87,6 +122,8 @@ $container-breakout-section-width: var(
     #{$container-breakout-section-max-width}
   )
 );
+
+// --graupl-container-content-section-width
 $container-content-section-width: var(
   --#{root-defaults.$prefix}container-content-section-width,
   min(
@@ -94,21 +131,117 @@ $container-content-section-width: var(
     #{$container-content-section-max-width}
   )
 );
+
+// --graupl-container-sidebar-left-section-width
 $container-sidebar-left-section-width: var(
   --#{root-defaults.$prefix}container-sidebar-left-section-width,
-  $container-sidebar-width
+  max($container-sidebar-width, $container-feature-section-max-width)
 );
+
+// --graupl-container-sidebar-right-section-width
 $container-sidebar-right-section-width: var(
   --#{root-defaults.$prefix}container-sidebar-right-section-width,
-  $container-sidebar-width
+  max($container-sidebar-width, $container-feature-section-max-width)
+);
+
+// --graupl-container-sidebars-breakout-section-width
+$container-sidebars-breakout-section-width: var(
+  --#{root-defaults.$prefix}container-sidebars-breakout-section-width,
+  #{$container-breakout-section-max-width}
 );
 /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
-$container-inner-content-section-width: var(
-  --#{root-defaults.$prefix}container-inner-content-section-width,
+// --graupl-container-sidebars-content-section-min-width
+$container-sidebars-content-section-min-width: var(
+  --#{root-defaults.$prefix}container-sidebars-content-section-min-width,
+  calc(
+    100% - (#{$container-full-width-section-min-width} * 2) -
+      (#{$container-feature-section-min-width} * 2) -
+      (#{$container-sidebars-breakout-section-width} * 2) -
+      #{$container-sidebar-left-section-width} -
+      #{$container-sidebar-right-section-width}
+  )
+);
+
+// --graupl-container-sidebars-content-section-max-width
+$container-sidebars-content-section-max-width: var(
+  --#{root-defaults.$prefix}container-sidebars-content-section-max-width,
   calc(
-    #{$container-content-section-width} -
+    #{$container-content-section-max-width} -
       #{$container-sidebar-left-section-width} -
+      #{$container-sidebar-right-section-width} +
+      min($container-sidebar-width, $container-feature-section-max-width) +
+      min($container-sidebar-width, $container-feature-section-max-width)
+  )
+);
+
+// --graupl-container-sidebars-content-section-width
+$container-sidebars-content-section-width: var(
+  --#{root-defaults.$prefix}container-sidebars-content-section-width,
+  min(
+    #{$container-sidebars-content-section-min-width},
+    #{$container-sidebars-content-section-max-width}
+  )
+);
+
+// --graupl-container-sidebars-right-content-section-min-width
+$container-sidebars-right-content-section-min-width: var(
+  --#{root-defaults.$prefix}container-sidebars-right-content-section-min-width,
+  calc(
+    100% - (#{$container-full-width-section-min-width} * 2) -
+      (#{$container-feature-section-min-width} * 2) -
+      #{$container-breakout-section-min-width} -
+      #{$container-sidebars-breakout-section-width} -
       #{$container-sidebar-right-section-width}
   )
 );
+
+// --graupl-container-sidebars-right-content-section-max-width
+$container-sidebars-right-content-section-max-width: var(
+  --#{root-defaults.$prefix}container-sidebars-right-content-section-max-width,
+  calc(
+    #{$container-content-section-max-width} -
+      #{$container-sidebar-right-section-width} +
+      min($container-sidebar-width, $container-feature-section-max-width)
+  )
+);
+
+// --graupl-container-sidebars-right-content-section-width
+$container-sidebars-right-content-section-width: var(
+  --#{root-defaults.$prefix}container-sidebars-right-content-section-width,
+  min(
+    $container-sidebars-right-content-section-min-width,
+    $container-sidebars-right-content-section-max-width
+  )
+);
+
+// --graupl-container-sidebars-left-content-section-min-width
+$container-sidebars-left-content-section-min-width: var(
+  --#{root-defaults.$prefix}container-sidebars-left-content-section-min-width,
+  calc(
+    100% - (#{$container-full-width-section-min-width} * 2) -
+      (#{$container-feature-section-min-width} * 2) -
+      #{$container-breakout-section-min-width} -
+      #{$container-sidebars-breakout-section-width} -
+      #{$container-sidebar-left-section-width}
+  )
+);
+
+// --graupl-container-sidebars-left-content-section-max-width
+$container-sidebars-left-content-section-max-width: var(
+  --#{root-defaults.$prefix}container-sidebars-left-content-section-max-width,
+  calc(
+    #{$container-content-section-max-width} -
+      #{$container-sidebar-left-section-width} +
+      min($container-sidebar-width, $container-feature-section-max-width)
+  )
+);
+
+// --graupl-container-sidebars-left-content-section-width
+$container-sidebars-left-content-section-width: var(
+  --#{root-defaults.$prefix}container-sidebars-left-content-section-width,
+  min(
+    $container-sidebars-left-content-section-min-width,
+    $container-sidebars-left-content-section-max-width
+  )
+);
 /* stylelint-enable  scss/operator-no-newline-after */

package/src/scss/layout/flex-columns/_defaults.scss

@@ -9,11 +9,13 @@
 @use "../../defaults" as root-defaults;
 
 // Flex columns selectors.
-$flex-columns-selector-base: root-defaults.$component-selector-base !default;
+$selector-base: root-defaults.$component-selector-base !default;
+$modifier-selector-base: root-defaults.$modifier-selector-base !default;
+$flex-columns-selector-base: $selector-base !default;
 $flex-columns-selector: "flex-columns" !default;
-$flex-columns-column-selector-base: $flex-columns-selector-base !default;
+$flex-columns-column-selector-base: $selector-base !default;
 $flex-columns-column-selector: "col-" !default;
-$flex-columns-fill-selector-base: $flex-columns-selector-base !default;
+$flex-columns-fill-selector-base: $selector-base !default;
 $flex-columns-fill-selector: "fill" !default;
 $flex-columns-screen-aware-separator: root-defaults.$screen-aware-selector-separator !default;
 $flex-columns-container-aware-separator: root-defaults.$container-aware-selector-separator !default;

package/src/scss/layout/flex-columns/_index.scss

@@ -26,27 +26,35 @@
 // - `.[screen-name]:col-#`: A class to set the size of a column at a specific screen size.
 // - `.[container-name]:col-#`: A class to set the size of a column at a specific container size.
 //
-// The following custom properties control the generated classes:
-// - `--graupl-flex-columns-row-gap`: The gap between the rows of the flex columns.
-// - `--graupl-flex-columns-column-gap`: The gap between the columns of the flex columns.
-// - `--graupl-flex-columns-size`: The size of a column.
-// - `--graupl-flex-columns-max-width`: The maximum width of a column.
+// The following custom properties can be used to customize the flex columns component:
+// | Property                               | Description                                               | Default Value            |
+// | ---                                    | ---                                                       | ---                      |
+// | `--graupl-flex-columns-row-gap`        | The gap between the rows of the flex columns.             | `var(--graupl-spacer-5)` |
+// | `--graupl-flex-columns-column-gap`     | The gap between the columns of the flex columns.          | `var(--graupl-spacer-5)` |
+// | `--graupl-flex-columns-size`           | The size of a column.                                     | `auto`                   |
+// | `--graupl-flex-columns-max-width`      | The maximum width of a column.                            | `unset`                  |
+// | `--graupl-flex-columns-container-type` | The container type applied to the flex columns component. | `inline-size`            |
 //
-// The following variables control the generated classes:
-// - `$flex-columns-selector-base`: The base selector for the flex columns component.
-// - `$flex-columns-selector`: The selector for the flex columns component.
-// - `$flex-columns-column-selector-base`: The base selector for the column class.
-// - `$flex-columns-column-selector`: The selector for the column class.
-// - `$flex-columns-fill-selector-base`: The base selector for the fill class.
-// - `$flex-columns-fill-selector`: The selector for the fill class.
-// - `$flex-columns-screen-aware-separator`: The separator for the screen-aware column class.
-// - `$flex-columns-container-aware-separator`: The separator for the container-aware column class.
-// - `$flex-columns-screen-aware-selector-prefix`: The prefix for the screen-aware column class.
-// - `$flex-columns-container-aware-selector-prefix`: The prefix for the container-aware column class.
-// - `$flex-columns-min-count`: The minimum number of columns used to generate `.col-#` classes.
-// - `$flex-columns-max-count`: The maximum number of columns used to generate `.col-#` classes.
-// - `$flex-columns-size`: The default size of a column.
-// - `$flex-columns-max-width`: The default maximum width of a column.
+// The following sass variables can be used to customize the generation of the flex columns component:
+// | Variable                                        | Description                                                      | Default Value    |
+// | ---                                             | ---                                                              | ---              |
+// | `$selector-base`                                | The base selector for the component.                             | `"."`            |
+// | `$modifier-selector-base`                       | The base selector for component modifiers.                       | `"."`            |
+// | `$flex-columns-selector-base`                   | The base selector for the flex columns component.                | `$selector-base` |
+// | `$flex-columns-selector`                        | The selector for the flex columns component.                     | `"flex-columns"` |
+// | `$flex-columns-column-selector-base`            | The base selector for the column class.                          | `$selector-base` |
+// | `$flex-columns-column-selector`                 | The selector for the column class.                               | `"col-"`         |
+// | `$flex-columns-fill-selector-base`              | The base selector for the fill class.                            | `$selector-base` |
+// | `$flex-columns-fill-selector`                   | The selector for the fill class.                                 | `"fill"`         |
+// | `$flex-columns-screen-aware-separator`          | The separator for the screen-aware column class.                 | `"\\:"`          |
+// | `$flex-columns-container-aware-separator`       | The separator for the container-aware column class.              | `"\\:"`          |
+// | `$flex-columns-screen-aware-selector-prefix`    | The prefix for the screen-aware column class.                    | `""`             |
+// | `$flex-columns-container-aware-selector-prefix` | The prefix for the container-aware column class.                 | `"cq\\:"`        |
+// | `$flex-columns-min-count`                       | The minimum number of columns used to generate `.col-#` classes. | `1`              |
+// | `$flex-columns-max-count`                       | The maximum number of columns used to generate `.col-#` classes. | `12`             |
+// | `$flex-columns-size`                            | The default size of a column.                                    | `auto`           |
+// | `$flex-columns-max-width`                       | The default maximum width of a column.                           | `unset`          |
+// | `$flex-columns-container-type`                  | The container type applied to the flex columns component.        | `"inline-size"`  |
 //
 // @example
 //   <div class="flex-columns">

package/src/scss/layout/flex-columns/_variables.scss

@@ -8,22 +8,31 @@
 @use "../columns/variables" as columns-variables;
 
 // Flex columns properties.
+// --graupl-flex-columns-row-gap
 $flex-columns-row-gap: var(
   --#{root-defaults.$prefix}flex-columns-row-gap,
   #{columns-variables.$columns-row-gap}
 );
+
+// --graupl-flex-columns-column-gap
 $flex-columns-column-gap: var(
   --#{root-defaults.$prefix}flex-columns-column-gap,
   #{columns-variables.$columns-column-gap}
 );
+
+// --graupl-flex-columns-size
 $flex-columns-size: var(
   --#{root-defaults.$prefix}flex-columns-size,
   #{defaults.$flex-columns-size}
 );
+
+// --graupl-flex-columns-max-width
 $flex-columns-max-width: var(
   --#{root-defaults.$prefix}flex-columns-max-width,
   #{defaults.$flex-columns-max-width}
 );
+
+// --graupl-flex-columns-container-type
 $flex-columns-container-type: var(
   --#{root-defaults.$prefix}flex-columns-container-type,
   #{defaults.$flex-columns-container-type}

package/src/scss/mixins/_state.scss

@@ -16,3 +16,40 @@
     }
   }
 }
+
+/// Generates state modifiers with properties.
+///
+/// @param {map} $state-map
+///   The map of props and states.
+/// @param {string} $selector-base
+///   The selector base for the state modifier.
+/// @param {string} $selector-prefix
+///   The selector prefix for the state modifer.
+@mixin generate-modifiers($state-map) {
+  @each $state, $selectors in root-defaults.$state-selectors {
+    @each $selector in $selectors {
+      // e.g &:visited, &:focus-visible, &:hover, &:active, &:disabled
+      &#{$selector} {
+        @each $prop, $map in $state-map {
+          #{$prop}: map.get($map, $state);
+        }
+
+        // If the state is disabled, we want that to supersede all other states.
+        @if $state == "disabled" {
+          @each $sub-state, $sub-selectors in root-defaults.$state-selectors {
+            @if $sub-state != $state {
+              @each $sub-selector in $sub-selectors {
+                // e.g &:visited, &:focus-visible, &:hover, &:active
+                &#{$sub-selector} {
+                  @each $prop, $map in $state-map {
+                    #{$prop}: map.get($map, $state);
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/scss/mixins/_theme.scss

@@ -2,14 +2,49 @@
 //
 // A series of mixins to tie styles to a theme-mode.
 
+@use "../functions/theme";
 @use "../theme/color/defaults" as color-defaults;
+@use "../defaults" as root-defaults;
+@use "sass:map";
 
 /// Applies styles to a specific theme mode.
 ///
 /// @param {string} $theme-name
 ///   The name of the theme mode to apply the styles to.
 @mixin theme($theme-name) {
-  #{color-defaults.$theme-selector-prefix}#{$theme-name}#{color-defaults.$theme-selector-suffix} {
+  #{color-defaults.$theme-selector-base}#{color-defaults.$theme-selector-prefix}#{$theme-name}#{color-defaults.$theme-selector-suffix} {
     @content;
   }
 }
+
+/// Generates a theme modifiers with custom props.
+///
+/// @param {map} $theme-map
+///   The map of custom props.
+/// @param {string} $selector-base
+///   The selector base for the theme modifier.
+/// @param {string} $selector-prefix
+///   The selector prefix for the theme modifer.
+/// @param {string} $scope
+///   The scope of the custom properties.
+/// @param {string} $base
+///   The base selector to append the theme modifier to.
+@mixin generate-modifiers(
+  $theme-map,
+  $selector-base,
+  $selector-prefix,
+  $scope: "",
+  $base: "&"
+) {
+  @each $color, $map in $theme-map {
+    // e.g. &.primary, &.secondary, &.tertiary
+    #{$base}#{$selector-base}#{$selector-prefix}#{$color} {
+      @each $prop, $value in $map {
+        --#{root-defaults.$prefix}#{$scope}#{$prop}: #{theme.get(
+            map.get($value, color),
+            map.get($value, shade)
+          )};
+      }
+    }
+  }
+}

package/src/scss/state/focus/_index.scss

@@ -6,20 +6,25 @@
 //
 // The following classes are generated by default:
 // - `.focus`: The focus state class.
+// - `:focus-visible`: The focus pseudo-class (from the root state selectors).
 //
-// The following custom properties control the generated classes:
-// - `--graupl-focus-width`: The width of the focus outline.
-// - `--graupl-focus-outline-color`: The color of the focus outline.
-// - `--graupl-focus-outline-width`: The width of the focus outline.
-// - `--graupl-focus-outline-style`: The style of the focus outline.
-// - `--graupl-focus-outline-offset`: The offset of the focus outline.
-// - `--graupl-focus-box-shadow-color`: The color of the focus box shadow.
-// - `--graupl-focus-box-shadow-style`: The style of the focus box shadow.
-// - `--graupl-focus-box-shadow`: The box shadow of the focus state.
+// The following custom properties can be used to customize the focus state:
+// | Property                             | Description                                         | Default Value                                                                                           |
+// | ---                                  | ---                                                 | ---                                                                                                     |
+// | `--graupl-focus-width`               | The width of both the focus outline and box shadow. | `var(--graupl-border-width)`                                                                            |
+// | `--graupl-focus-outline-color`       | The color of the focus outline.                     | `var(--graupl-color)`                                                                                   |
+// | `--graupl-focus-outline-width`       | The width of the focus outline.                     | `var(--graupl-focus-width)`                                                                             |
+// | `--graupl-focus-outline-style`       | The style of the focus outline.                     | `dotted`                                                                                                |
+// | `--graupl-focus-outline`             | The outline applied in the focus state.             | `var(--graupl-focus-outline-width) var(--graupl-focus-outline-style) var(--graupl-focus-outline-color)` |
+// | `--graupl-focus-outline-offset`      | The offset of the focus outline.                    | `calc(-1 * var(--graupl-focus-outline-width))`                                                          |
+// | `--graupl-focus-box-shadow-color`    | The color of the focus box shadow.                  | `var(--graupl-background)`                                                                              |
+// | `--graupl-focus-border-color`        | The color applied to the border in the focus state. | `var(--graupl-background)`                                                                              |
+// | `--graupl-focus-box-shadow`          | The box shadow of the focus state.                  | `0 0 0 var(--graupl-focus-width) inset var(--graupl-focus-box-shadow-color)`                            |
 //
-// The following variables control the generated classes:
-// - `$focus-outline-style`: The style of the focus outline.
-// - `$focus-box-shadow-style`: The style of the focus box shadow.
+// The following sass variables can be used to customize the generation of the focus state:
+// | Variable               | Description                     | Default Value |
+// | ---                    | ---                             | ---           |
+// | `$focus-outline-style` | The style of the focus outline. | `dotted`      |
 //
 // Note: This focus styles are also applied to the `:focus-visible` pseudo-class by default.
 //

package/src/scss/state/focus/_variables.scss

@@ -3,48 +3,74 @@
 // 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-focus-width            | var(--graupl-border-width)                                                                            |
+// | --graupl-focus-outline-color    | var(--graupl-color)                                                                                   |
+// | --graupl-focus-outline-width    | var(--graupl-focus-width)                                                                             |
+// | --graupl-focus-outline-style    | solid                                                                                                 |
+// | --graupl-focus-outline          | var(--graupl-focus-outline-width) var(--graupl-focus-outline-style) var(--graupl-focus-outline-color) |
+// | --graupl-focus-outline-offset   | calc(-1 * var(--graupl-focus-outline-width))                                                          |
+// | --graupl-focus-box-shadow-color | var(--graupl-background)                                                                              |
+// | --graupl-focus-border-color     | var(--graupl-background)                                                                              |
+// | --graupl-focus-box-shadow       | 0 0 0 var(--graupl-focus-width) inset var(--graupl-focus-box-shadow-color)                            |
+
 @use "../../variables" as root-variables;
 @use "defaults";
 @use "../../defaults" as root-defaults;
 @use "../../theme/color/variables" as color;
 
+// --graupl-focus-width
 $focus-width: var(
   --#{root-defaults.$prefix}focus-width,
   #{root-variables.$border-width}
 );
+
+// --graupl-focus-outline-color
 $focus-outline-color: var(
   --#{root-defaults.$prefix}focus-outline-color,
   #{color.$color}
 );
+
+// --graupl-focus-outline-width
 $focus-outline-width: var(
   --#{root-defaults.$prefix}focus-outline-width,
   #{$focus-width}
 );
+
+// --graupl-focus-outline-style
 $focus-outline-style: var(
   --#{root-defaults.$prefix}focus-outline-style,
   #{defaults.$focus-outline-style}
 );
+
+// --graupl-focus-outline
 $focus-outline: var(
   --#{root-defaults.$prefix}focus-outline,
   #{$focus-outline-width} #{$focus-outline-style} #{$focus-outline-color}
 );
+
+// --graupl-focus-outline-offset
 $focus-outline-offset: var(
   --#{root-defaults.$prefix}focus-outline-offset,
   calc(-1 * #{$focus-outline-width})
 );
+
+// --graupl-focus-box-shadow-color
 $focus-box-shadow-color: var(
   --#{root-defaults.$prefix}focus-box-shadow-color,
   #{color.$background}
 );
+
+// --graupl-focus-border-color
 $focus-border-color: var(
   --#{root-defaults.$prefix}focus-border-color,
   #{color.$background}
 );
+
+// --graupl-focus-box-shadow
 $focus-box-shadow: var(
   --#{root-defaults.$prefix}focus-box-shadow,
   0 0 0 #{$focus-width} inset #{$focus-box-shadow-color}
 );
-$focus-box-shadow-bordered: var(
-  --#{root-defaults.$prefix}focus-box-shadow-bordered,
-  0 0 0 #{$focus-width} #{$focus-box-shadow-color}
-);

package/src/scss/theme/color/_defaults.scss

@@ -11,10 +11,15 @@
 @use "sass:list";
 @use "sass:meta";
 
+$selector-base: root-defaults.$component-selector-base !default;
+$modifier-selector-base: root-defaults.$modifier-selector-base !default;
 $generate-base-colors: root-defaults.$generate-base-colors !default;
 $generate-base-themes: root-defaults.$generate-base-themes !default;
-$theme-selector-prefix: "." !default;
+$theme-selector-base: $modifier-selector-base !default;
+$theme-selector-prefix: "" !default;
 $theme-selector-suffix: "-mode" !default;
+$root-selector-base: ":" !default;
+$root-selector: "root" !default;
 
 // The site will have colours, defaulting to primary, secondary, and tertiary.
 // Each colour will have a shade mapping, defaulting to 100-900.
@@ -69,7 +74,6 @@ $-colors: (
     900: hsl(340deg 85% 10%),
   ),
 );
-$custom-colors: () !default;
 $colors: () !default;
 
 // Loop through the customized colors and convert them to a map structure.
@@ -87,13 +91,6 @@ $colors: () !default;
   }
 }
 
-// @todo remove this once $custom-colors is removed
-@if $custom-colors != () {
-  @warn "`$custom-colors` is deprecated and will be removed in a future release of Graupl. Use `$colors` instead.";
-
-  $colors: map.deep-merge($colors, $custom-colors);
-}
-
 // Merge the custom colors with the default ones.
 @if $generate-base-colors {
   $colors: map.deep-merge($-colors, $colors);
@@ -101,16 +98,7 @@ $colors: () !default;
 
 // Themes.
 $-themes: (light, dark);
-$custom-themes: () !default;
 $themes: () !default;
-
-// @todo remove this once $custom-themes is removed
-@if $custom-themes != () {
-  @warn "`$custom-themes` is deprecated and will be removed in a future release of Graupl. Use `$themes` instead.";
-
-  $themes: list.join($themes, $custom-themes);
-}
-
 $default-theme: light !default;
 
 // Theme mappings.
@@ -138,16 +126,8 @@ $-theme-mappings: (
     900: 100,
   ),
 );
-$custom-theme-mappings: () !default;
 $theme-mappings: () !default;
 
-// @todo remove this once $custom-theme-mappings is removed
-@if $custom-theme-mappings != () {
-  @warn "`$custom-theme-mappings` is deprecated and will be removed in a future release of Graupl. Use `$theme-mappings` instead.";
-
-  $theme-mappings: map.deep-merge($theme-mappings, $custom-theme-mappings);
-}
-
 // Merge the custom themes with the default ones.
 @if $generate-base-themes {
   $themes: list.join($-themes, $themes);
@@ -200,14 +180,5 @@ $-theme-map: ();
   );
 }
 
-$custom-theme-map: () !default;
 $theme-map: () !default;
-
-// @todo remove this once $custom-theme-map is removed
-@if $custom-theme-map != () {
-  @warn "`$custom-theme-map` is deprecated and will be removed in a future release of Graupl. Use `$theme-map` instead.";
-
-  $theme-map: map.deep-merge($theme-map, $custom-theme-map);
-}
-
 $theme-map: map.deep-merge($-theme-map, $theme-map);