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

package/src/scss/component/list/_index.scss

@@ -1,14 +1,148 @@
-// @graupl/core card component styles.
+// @graupl/core list component styles.
+//
+// This module provides the list component styles.
+//
+// The following selectors are generated by default:
+// - `.list`: The list container.
+// - `.list-item`: The list item.
+//
+// The following custom properties can be used to customize the list component:
+// | Property                                       | Description                                          | Default Value                                                                                                                                                 |
+// | ---------------------------------------------- | ---------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+// | `--graupl-list-padding-x`                      | Horizontal padding of the list.                      | `var(--graupl-spacer-0)`                                                                                                                                      |
+// | `--graupl-list-padding-y`                      | Vertical padding of the list.                        | `var(--graupl-spacer-0)`                                                                                                                                      |
+// | `--graupl-list-padding`                        | Shorthand padding of the list.                       | `var(--graupl-list-padding-y) var(--graupl-list-padding-x)`                                                                                                   |
+// | `--graupl-list-margin-x`                       | Horizontal margin of the list.                       | `var(--graupl-spacer-0)`                                                                                                                                      |
+// | `--graupl-list-margin-y`                       | Vertical margin of the list.                         | `var(--graupl-spacer-0)`                                                                                                                                      |
+// | `--graupl-list-margin`                         | Shorthand margin of the list.                        | `var(--graupl-list-margin-y) var(--graupl-list-margin-x)`                                                                                                     |
+// | `--graupl-list-gap`                            | Gap between list items (column/row).                 | `var(--graupl-list-column-gap) var(--graupl-list-row-gap)`                                                                                                    |
+// | `--graupl-list-background`                     | Background colour of the list.                       | `var(--graupl-background)`                                                                                                                                    |
+// | `--graupl-list-color`                          | Text colour of the list.                             | `var(--graupl-color)`                                                                                                                                         |
+// | `--graupl-list-border-width`                   | Border width of the list.                            | `0 0 0 0`                                                                                                                                                     |
+// | `--graupl-list-border-style`                   | Border style of the list.                            | `var(--graupl-border-top-style) var(--graupl-border-right-style) var(--graupl-border-bottom-style) var(--graupl-border-left-style)`                           |
+// | `--graupl-list-border-radius`                  | Border radius of the list.                           | `var(--graupl-border-top-left-radius) var(--graupl-border-top-right-radius) var(--graupl-border-bottom-right-radius) var(--graupl-border-bottom-left-radius)` |
+// | `--graupl-list-border-color`                   | Border colour of the list.                           | `var(--graupl-list-color)`                                                                                                                                    |
+// | `--graupl-list-item-padding`                   | Padding for a list item.                             | `var(--graupl-spacer-3) var(--graupl-spacer-5)`                                                                                                               |
+// | `--graupl-list-item-transition`                | Transition applied to list items.                    | `transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function)`                                                                   |
+// | `--graupl-list-item-transition-reduced-motion` | Transition for items when reduced motion is enabled. | `none`                                                                                                                                                        |
+// | `--graupl-list-item-transform`                 | Base transform for list items.                       | `none`                                                                                                                                                        |
+// | `--graupl-list-item-hover-transform`           | Transform for hovered list items.                    | `none`                                                                                                                                                        |
+// | `--graupl-list-item-background`                | Background colour of list items.                     | `var(--graupl-background)`                                                                                                                                    |
+// | `--graupl-list-item-color`                     | Text colour of list items.                           | `var(--graupl-color)`                                                                                                                                         |
+// | `--graupl-list-item-border-width`              | Border width of list items.                          | `var(--graupl-border-top-width) var(--graupl-border-right-width) var(--graupl-border-bottom-width) var(--graupl-border-left-width)`                           |
+// | `--graupl-list-item-border-style`              | Border style of list items.                          | `var(--graupl-border-top-style) var(--graupl-border-right-style) var(--graupl-border-bottom-style) var(--graupl-border-left-style)`                           |
+// | `--graupl-list-item-border-radius`             | Border radius of list items.                         | `var(--graupl-border-top-left-radius) var(--graupl-border-top-right-radius) var(--graupl-border-bottom-right-radius) var(--graupl-border-bottom-left-radius)` |
+// | `--graupl-list-item-border-color`              | Border colour of list items.                         | `var(--graupl-list-item-color)`                                                                                                                               |
+//
+// The following sass variables can be used to customize the generation of the list component:
+// | Variable                     | Description                               | Default Value    |
+// | ---------------------------- | ----------------------------------------- | ---------------- |
+// | `$selector-base`             | Selector base for the component.          | `"."`            |
+// | `$modifier-selector-base`    | Selector base for component modifiers.    | `"."`            |
+// | `$generate-base-theme-map`   | Flag to generate the base theme map.      | `true`           |
+// | `$themeable`                 | Flag to generate theme modifiers.         | `false`          |
+// | `$list-selector-base`        | Selector base for the list container.     | `$selector-base` |
+// | `$list-selector`             | Selector for the list container.          | `"list"`         |
+// | `$list-theme-selector-base`  | Selector base for theme modifiers.        | `"."`            |
+// | `$list-theme-selector-prefix`| Selector prefix for theme modifiers.      | `""`             |
+// | `$list-item-selector-base`   | Selector base for list items.             | `$selector-base` |
+// | `$list-item-selector`        | Selector for list items.                  | `"list-item"`    |
+// | `$list-item-transform`       | Base transform for list items.            | `none`           |
+// | `$list-item-hover-transform` | Hover transform for list items.           | `none`           |
+// | `$list-theme-mappings`       | Map of properties/shades for list themes. | `()`             |
+// | `$list-theme-map`            | Expanded map of properties/colors/shades. | `()`             |
+//
+// ## Using `$list-theme-mappings`
+//
+// `$list-theme-mappings` is a 1-level map of properties and shade values.
+//
+// e.g.
+// ```scss
+// $list-theme-mappings: (
+//   color: 900,
+//   border-color: 700,
+// )
+// ```
+//
+// This directly[1] maps to all list variants, telling them what shade to use for the base colour slots.
+// All list variants will use the following based on the example above:
+// - Primary lists will have their `--graupl-list-color` property set to `--graupl-theme-active--primary--900` and `--graupl-list-border-color` to `--graupl-theme-active--primary--700`,
+// - Secondary lists will use the same shades for the secondary palette, and
+// - Tertiary lists will use the same shades for the tertiary palette.
+//
+// You can use this to customize _all_ list variants in the same way.
+//
+// For example, if you use the following map:
+// ```scss
+// $list-theme-mappings: (
+//   color: 500,
+//   item-color: 500,
+// )
+// ```
+//
+// All list variants will use the following:
+// - Primary lists will have their `--graupl-list-color` and `--graupl-list-item-color` properties set to `--graupl-theme-active--primary--500`,
+// - Secondary lists will have theirs set to `--graupl-theme-active--secondary--500`, and
+// - Tertiary lists will have theirs set to `--graupl-theme-active--tertiary--500`.
+//
+// [1] `$list-theme-mappings` gets parsed into a larger, more explicit map: `$list-theme-map`.
+//
+// Using `$list-theme-map`
+//
+// `$list-theme-map` is a multi-level map of properties, colors, and shade values.
+//
+// e.g.
+// ```scss
+// $list-theme-map: (
+//   primary: (
+//     item-border-color: (
+//       color: secondary,
+//       shade: 700
+//     ),
+//   ),
+//   secondary: (
+//     item-border-color: (
+//       color: secondary,
+//       shade: 500
+//     ),
+//   ),
+//   tertiary: (
+//     item-border-color: (
+//       color: tertiary,
+//       shade: 300
+//     ),
+//   ),
+// )
+// ```
+//
+// This directly maps to all list variants, telling them what shade to use for said property.
+// You can use this to customize list variants individually.
+//
+// @example
+// <ul class="list">
+//   <li class="list-item">First item</li>
+//   <li class="list-item">Second item</li>
+//   <li class="list-item">Third item</li>
+// </ul>
+//
+// @example
+// <ol class="list list-style-decimal list-style-inside">
+//   <li class="list-item">Numbered item one</li>
+//   <li class="list-item">Numbered item two</li>
+//   <li class="list-item">Numbered item three</li>
+// </ol>
 
 @use "../../defaults" as root-defaults;
 @use "../../mixins/animation";
 @use "../../mixins/layer" as *;
+@use "../../mixins/theme" as theme;
 @use "defaults";
 @use "sass:map";
 @use "variables" as *;
 
 @include layer(component) {
-  #{defaults.$list-selector} {
+  // .list
+  #{defaults.$list-selector-base}#{defaults.$list-selector} {
     display: grid;
     position: relative;
     margin: $list-margin;
@@ -20,7 +154,8 @@
     gap: $list-gap;
   }
 
-  #{defaults.$list-item-selector} {
+  // .list-item
+  #{defaults.$list-item-selector-base}#{defaults.$list-item-selector} {
     position: relative;
     padding: $list-item-padding;
     transform: $list-item-transform;
@@ -30,6 +165,7 @@
     border-radius: $list-item-border-radius;
 
     @each $selector in map.get(root-defaults.$state-selectors, hover) {
+      // e.g &:hover, &.hover
       &#{$selector} {
         --#{root-defaults.$prefix}list-item-transform: $list-item-hover-transform;
       }
@@ -38,13 +174,31 @@
 }
 
 @include layer(theme) {
-  #{defaults.$list-selector} {
+  // .list
+  #{defaults.$list-selector-base}#{defaults.$list-selector} {
     border-color: $list-border-color;
     background: $list-background;
     color: $list-color;
+
+    @if root-defaults.$themeable-components and defaults.$themeable {
+      @include theme.generate-modifiers(
+        defaults.$list-theme-map,
+        defaults.$list-theme-selector-base,
+        defaults.$list-theme-selector-prefix,
+        "list-"
+      );
+      @include theme.generate-modifiers(
+        defaults.$list-theme-map,
+        defaults.$list-theme-selector-base,
+        defaults.$list-theme-selector-prefix,
+        "list-",
+        ""
+      );
+    }
   }
 
-  #{defaults.$list-item-selector} {
+  // .list-item
+  #{defaults.$list-item-selector-base}#{defaults.$list-item-selector} {
     border-color: $list-item-border-color;
     background: $list-item-background;
     color: $list-item-color;

package/src/scss/component/list/_variables.scss

@@ -3,6 +3,62 @@
 // 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-list-padding-x                       | var(--graupl-spacer-0)                                                                                                                                                                              |
+// | --graupl-list-padding-y                       | var(--graupl-spacer-0)                                                                                                                                                                              |
+// | --graupl-list-padding                         | var(--graupl-list-padding-y) var(--graupl-list-padding-x)                                                                                                                                           |
+// | --graupl-list-margin-x                        | var(--graupl-spacer-0)                                                                                                                                                                              |
+// | --graupl-list-margin-y                        | var(--graupl-spacer-0)                                                                                                                                                                              |
+// | --graupl-list-margin                          | var(--graupl-list-margin-y) var(--graupl-list-margin-x)                                                                                                                                             |
+// | --graupl-list-column-gap                      | var(--graupl-spacer-2)                                                                                                                                                                              |
+// | --graupl-list-row-gap                         | var(--graupl-spacer-2)                                                                                                                                                                              |
+// | --graupl-list-gap                             | var(--graupl-list-column-gap) var(--graupl-list-row-gap)                                                                                                                                            |
+// | --graupl-list-background                      | var(--graupl-background)                                                                                                                                                                            |
+// | --graupl-list-color                           | var(--graupl-color)                                                                                                                                                                                 |
+// | --graupl-list-border-color                    | var(--graupl-list-color)                                                                                                                                                                            |
+// | --graupl-list-border-top-left-radius          | var(--graupl-border-top-left-radius)                                                                                                                                                                |
+// | --graupl-list-border-top-right-radius         | var(--graupl-border-top-right-radius)                                                                                                                                                               |
+// | --graupl-list-border-bottom-left-radius       | var(--graupl-border-bottom-left-radius)                                                                                                                                                             |
+// | --graupl-list-border-bottom-right-radius      | var(--graupl-border-bottom-right-radius)                                                                                                                                                            |
+// | --graupl-list-border-radius                   | var(--graupl-list-border-top-left-radius) var(--graupl-list-border-top-right-radius) var(--graupl-list-border-bottom-right-radius) var(--graupl-list-border-bottom-left-radius)                     |
+// | --graupl-list-border-top-width                | 0                                                                                                                                                                                                   |
+// | --graupl-list-border-right-width              | 0                                                                                                                                                                                                   |
+// | --graupl-list-border-bottom-width             | 0                                                                                                                                                                                                   |
+// | --graupl-list-border-left-width               | 0                                                                                                                                                                                                   |
+// | --graupl-list-border-width                    | var(--graupl-list-border-top-width) var(--graupl-list-border-right-width) var(--graupl-list-border-bottom-width) var(--graupl-list-border-left-width)                                               |
+// | --graupl-list-border-top-style                | var(--graupl-border-top-style)                                                                                                                                                                      |
+// | --graupl-list-border-right-style              | var(--graupl-border-right-style)                                                                                                                                                                    |
+// | --graupl-list-border-bottom-style             | var(--graupl-border-bottom-style)                                                                                                                                                                   |
+// | --graupl-list-border-left-style               | var(--graupl-border-left-style)                                                                                                                                                                     |
+// | --graupl-list-border-style                    | var(--graupl-list-border-top-style) var(--graupl-list-border-right-style) var(--graupl-list-border-bottom-style) var(--graupl-list-border-left-style)                                               |
+// | --graupl-list-item-padding-x                  | var(--graupl-spacer-5)                                                                                                                                                                              |
+// | --graupl-list-item-padding-y                  | var(--graupl-spacer-3)                                                                                                                                                                              |
+// | --graupl-list-item-padding                    | var(--graupl-list-item-padding-y) var(--graupl-list-item-padding-x)                                                                                                                                 |
+// | --graupl-list-item-transition                 | transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function)                                                                                                           |
+// | --graupl-list-item-transition-reduced-motion  | none                                                                                                                                                                                                |
+// | --graupl-list-item-transform                  | none                                                                                                                                                                                                |
+// | --graupl-list-item-hover-transform            | none                                                                                                                                                                                |
+// | --graupl-list-item-background                 | var(--graupl-background)                                                                                                                                                                            |
+// | --graupl-list-item-color                      | var(--graupl-color)                                                                                                                                                                                 |
+// | --graupl-list-item-border-color               | var(--graupl-list-item-color)                                                                                                                                                                       |
+// | --graupl-list-item-border-top-left-radius     | var(--graupl-border-top-left-radius)                                                                                                                                                                |
+// | --graupl-list-item-border-top-right-radius    | var(--graupl-border-top-right-radius)                                                                                                                                                               |
+// | --graupl-list-item-border-bottom-left-radius  | var(--graupl-border-bottom-left-radius)                                                                                                                                                             |
+// | --graupl-list-item-border-bottom-right-radius | var(--graupl-border-bottom-right-radius)                                                                                                                                                            |
+// | --graupl-list-item-border-radius              | var(--graupl-list-item-border-top-left-radius) var(--graupl-list-item-border-top-right-radius) var(--graupl-list-item-border-bottom-right-radius) var(--graupl-list-item-border-bottom-left-radius) |
+// | --graupl-list-item-border-top-width           | var(--graupl-border-top-width)                                                                                                                                                                      |
+// | --graupl-list-item-border-right-width         | var(--graupl-border-right-width)                                                                                                                                                                    |
+// | --graupl-list-item-border-bottom-width        | var(--graupl-border-bottom-width)                                                                                                                                                                   |
+// | --graupl-list-item-border-left-width          | var(--graupl-border-left-width)                                                                                                                                                                     |
+// | --graupl-list-item-border-width               | var(--graupl-list-item-border-top-width) var(--graupl-list-item-border-right-width) var(--graupl-list-item-border-bottom-width) var(--graupl-list-item-border-left-width)                           |
+// | --graupl-list-item-border-top-style           | var(--graupl-border-top-style)                                                                                                                                                                      |
+// | --graupl-list-item-border-right-style         | var(--graupl-border-right-style)                                                                                                                                                                    |
+// | --graupl-list-item-border-bottom-style        | var(--graupl-border-bottom-style)                                                                                                                                                                   |
+// | --graupl-list-item-border-left-style          | var(--graupl-border-left-style)                                                                                                                                                                     |
+// | --graupl-list-item-border-style               | var(--graupl-list-item-border-top-style) var(--graupl-list-item-border-right-style) var(--graupl-list-item-border-bottom-style) var(--graupl-list-item-border-left-style)                           |
+
 @use "../../defaults" as root-defaults;
 @use "../../theme/color/variables" as color;
 @use "../../variables" as root-variables;
@@ -10,112 +66,162 @@
 @use "sass:map";
 
 // List properties.
+// --graupl-list-padding-x
 $list-padding-x: var(
   --#{root-defaults.$prefix}list-padding-x,
   #{map.get(root-variables.$spacers, 0)}
 );
+
+// --graupl-list-padding-y
 $list-padding-y: var(
   --#{root-defaults.$prefix}list-padding-y,
   #{map.get(root-variables.$spacers, 0)}
 );
+
+// --graupl-list-padding
 $list-padding: var(
   --#{root-defaults.$prefix}list-padding,
   #{$list-padding-y} #{$list-padding-x}
 );
+
+// --graupl-list-margin-x
 $list-margin-x: var(
   --#{root-defaults.$prefix}list-margin-x,
   #{map.get(root-variables.$spacers, 0)}
 );
+
+// --graupl-list-margin-y
 $list-margin-y: var(
   --#{root-defaults.$prefix}list-margin-y,
   #{map.get(root-variables.$spacers, 0)}
 );
+
+// --graupl-list-margin
 $list-margin: var(
   --#{root-defaults.$prefix}list-margin,
   #{$list-margin-y} #{$list-margin-x}
 );
 
 // List gap properties.
+// --graupl-list-column-gap
 $list-column-gap: var(
   --#{root-defaults.$prefix}list-column-gap,
   #{map.get(root-variables.$spacers, 2)}
 );
+
+// --graupl-list-row-gap
 $list-row-gap: var(
   --#{root-defaults.$prefix}list-row-gap,
   #{map.get(root-variables.$spacers, 2)}
 );
+
+// --graupl-list-gap
 $list-gap: var(
   --#{root-defaults.$prefix}list-gap,
   #{$list-column-gap} #{$list-row-gap}
 );
 
 // List color properties.
+// --graupl-list-background
 $list-background: var(
   --#{root-defaults.$prefix}list-background,
   #{color.$background}
 );
+
+// --graupl-list-color
 $list-color: var(--#{root-defaults.$prefix}list-color, #{color.$color});
 
 // List border-properties.
+// --graupl-list-border-color
 $list-border-color: var(
   --#{root-defaults.$prefix}list-border-color,
   #{$list-color}
 );
+
+// --graupl-list-border-top-left-radius
 $list-border-top-left-radius: var(
   --#{root-defaults.$prefix}list-border-top-left-radius,
   #{root-variables.$border-top-left-radius}
 );
+
+// --graupl-list-border-top-right-radius
 $list-border-top-right-radius: var(
   --#{root-defaults.$prefix}list-border-top-right-radius,
   #{root-variables.$border-top-right-radius}
 );
+
+// --graupl-list-border-bottom-left-radius
 $list-border-bottom-left-radius: var(
   --#{root-defaults.$prefix}list-border-bottom-left-radius,
   #{root-variables.$border-bottom-left-radius}
 );
+
+// --graupl-list-border-bottom-right-radius
 $list-border-bottom-right-radius: var(
   --#{root-defaults.$prefix}list-border-bottom-right-radius,
   #{root-variables.$border-bottom-right-radius}
 );
+
+// --graupl-list-border-radius
 $list-border-radius: var(
   --#{root-defaults.$prefix}list-border-radius,
   #{$list-border-top-left-radius} #{$list-border-top-right-radius}
     #{$list-border-bottom-right-radius} #{$list-border-bottom-left-radius}
 );
+
+// --graupl-list-border-top-width
 $list-border-top-width: var(--#{root-defaults.$prefix}list-border-top-width, 0);
+
+// --graupl-list-border-right-width
 $list-border-right-width: var(
   --#{root-defaults.$prefix}list-border-right-width,
   0
 );
+
+// --graupl-list-border-bottom-width
 $list-border-bottom-width: var(
   --#{root-defaults.$prefix}list-border-bottom-width,
   0
 );
+
+// --graupl-list-border-left-width
 $list-border-left-width: var(
   --#{root-defaults.$prefix}list-border-left-width,
   0
 );
+
+// --graupl-list-border-width
 $list-border-width: var(
   --#{root-defaults.$prefix}list-border-width,
   #{$list-border-top-width} #{$list-border-right-width}
     #{$list-border-bottom-width} #{$list-border-left-width}
 );
+
+// --graupl-list-border-top-style
 $list-border-top-style: var(
   --#{root-defaults.$prefix}list-border-top-style,
   #{root-variables.$border-top-style}
 );
+
+// --graupl-list-border-right-style
 $list-border-right-style: var(
   --#{root-defaults.$prefix}list-border-right-style,
   #{root-variables.$border-right-style}
 );
+
+// --graupl-list-border-bottom-style
 $list-border-bottom-style: var(
   --#{root-defaults.$prefix}list-border-bottom-style,
   #{root-variables.$border-bottom-style}
 );
+
+// --graupl-list-border-left-style
 $list-border-left-style: var(
   --#{root-defaults.$prefix}list-border-left-style,
   #{root-variables.$border-left-style}
 );
+
+// --graupl-list-border-style
 $list-border-style: var(
   --#{root-defaults.$prefix}list-border-style,
   #{$list-border-top-style} #{$list-border-right-style}
@@ -123,112 +229,158 @@ $list-border-style: var(
 );
 
 // List item properties.
+// --graupl-list-item-padding-x
 $list-item-padding-x: var(
   --#{root-defaults.$prefix}list-item-padding-x,
   #{map.get(root-variables.$spacers, 5)}
 );
+
+// --graupl-list-item-padding-y
 $list-item-padding-y: var(
   --#{root-defaults.$prefix}list-item-padding-y,
   #{map.get(root-variables.$spacers, 3)}
 );
+
+// --graupl-list-item-padding
 $list-item-padding: var(
   --#{root-defaults.$prefix}list-item-padding,
   #{$list-item-padding-y} #{$list-item-padding-x}
 );
+
+// --graupl-list-item-transition
 $list-item-transition: var(
   --#{root-defaults.$prefix}list-item-transition,
   transform #{map.get(root-variables.$transition-durations, fast)}
     #{root-variables.$transition-timing-function}
 );
+
+// --graupl-list-item-transition-reduced-motion
 $list-item-transition-reduced-motion: var(
   --#{root-defaults.$prefix}list-item-transition-reduced-motion,
   none
 );
 
 // List item transform properties.
+// --graupl-list-item-transform
 $list-item-transform: var(
   --#{root-defaults.$prefix}list-item-transform,
   #{defaults.$list-item-transform}
 );
+
+// --graupl-list-item-hover-transform
 $list-item-hover-transform: var(
   --#{root-defaults.$prefix}list-item-hover-transform,
   #{defaults.$list-item-hover-transform}
 );
 
 // List item color properties.
+// --graupl-list-item-background
 $list-item-background: var(
   --#{root-defaults.$prefix}list-item-background,
   #{color.$background}
 );
+
+// --graupl-list-item-color
 $list-item-color: var(
   --#{root-defaults.$prefix}list-item-color,
   #{color.$color}
 );
 
 // List item border-properties.
+// --graupl-list-item-border-color
 $list-item-border-color: var(
   --#{root-defaults.$prefix}list-item-border-color,
   #{$list-item-color}
 );
+
+// --graupl-list-item-border-top-left-radius
 $list-item-border-top-left-radius: var(
   --#{root-defaults.$prefix}list-item-border-top-left-radius,
   #{root-variables.$border-top-left-radius}
 );
+
+// --graupl-list-item-border-top-right-radius
 $list-item-border-top-right-radius: var(
   --#{root-defaults.$prefix}list-item-border-top-right-radius,
   #{root-variables.$border-top-right-radius}
 );
+
+// --graupl-list-item-border-bottom-left-radius
 $list-item-border-bottom-left-radius: var(
   --#{root-defaults.$prefix}list-item-border-bottom-left-radius,
   #{root-variables.$border-bottom-left-radius}
 );
+
+// --graupl-list-item-border-bottom-right-radius
 $list-item-border-bottom-right-radius: var(
   --#{root-defaults.$prefix}list-item-border-bottom-right-radius,
   #{root-variables.$border-bottom-right-radius}
 );
+
+// --graupl-list-item-border-radius
 $list-item-border-radius: var(
   --#{root-defaults.$prefix}list-item-border-radius,
   #{$list-item-border-top-left-radius} #{$list-item-border-top-right-radius}
     #{$list-item-border-bottom-right-radius}
     #{$list-item-border-bottom-left-radius}
 );
+
+// --graupl-list-item-border-top-width
 $list-item-border-top-width: var(
   --#{root-defaults.$prefix}list-item-border-top-width,
   #{root-variables.$border-top-width}
 );
+
+// --graupl-list-item-border-right-width
 $list-item-border-right-width: var(
   --#{root-defaults.$prefix}list-item-border-right-width,
   #{root-variables.$border-right-width}
 );
+
+// --graupl-list-item-border-bottom-width
 $list-item-border-bottom-width: var(
   --#{root-defaults.$prefix}list-item-border-bottom-width,
   #{root-variables.$border-bottom-width}
 );
+
+// --graupl-list-item-border-left-width
 $list-item-border-left-width: var(
   --#{root-defaults.$prefix}list-item-border-left-width,
   #{root-variables.$border-left-width}
 );
+
+// --graupl-list-item-border-width
 $list-item-border-width: var(
   --#{root-defaults.$prefix}list-item-border-width,
   #{$list-item-border-top-width} #{$list-item-border-right-width}
     #{$list-item-border-bottom-width} #{$list-item-border-left-width}
 );
+
+// --graupl-list-item-border-top-style
 $list-item-border-top-style: var(
   --#{root-defaults.$prefix}list-item-border-top-style,
   #{root-variables.$border-top-style}
 );
+
+// --graupl-list-item-border-right-style
 $list-item-border-right-style: var(
   --#{root-defaults.$prefix}list-item-border-right-style,
   #{root-variables.$border-right-style}
 );
+
+// --graupl-list-item-border-bottom-style
 $list-item-border-bottom-style: var(
   --#{root-defaults.$prefix}list-item-border-bottom-style,
   #{root-variables.$border-bottom-style}
 );
+
+// --graupl-list-item-border-left-style
 $list-item-border-left-style: var(
   --#{root-defaults.$prefix}list-item-border-left-style,
   #{root-variables.$border-left-style}
 );
+
+// --graupl-list-item-border-style
 $list-item-border-style: var(
   --#{root-defaults.$prefix}list-item-border-style,
   #{$list-item-border-top-style} #{$list-item-border-right-style}

package/src/scss/component/menu/_defaults.scss

@@ -6,14 +6,31 @@
 // They should not be used to define direct property values (i.e. font-size, color, etc.).
 // Those should be defined as custom properties in the `_variables.scss` file.
 
+@use "../../defaults" as root-defaults;
+@use "../../functions/theme";
+@use "sass:map";
+
 // Menu selectors.
-$menu-selector: ".menu" !default;
-$submenu-selector: ".submenu" !default;
-$menu-item-selector: ".menu-item" !default;
-$menu-link-selector: ".menu-link" !default;
-$submenu-toggle-selector: ".submenu-toggle" !default;
-$menu-show-selector: ".show" !default;
-$menu-hide-selector: ".hide" !default;
+$selector-base: root-defaults.$component-selector-base !default;
+$modifier-selector-base: root-defaults.$modifier-selector-base !default;
+$generate-base-theme-map: root-defaults.$generate-base-theme-maps !default;
+$themeable: false !default;
+$menu-selector-base: $selector-base !default;
+$menu-selector: "menu" !default;
+$menu-theme-selector-base: $modifier-selector-base !default;
+$menu-theme-selector-prefix: "" !default;
+$submenu-selector-base: $selector-base !default;
+$submenu-selector: "submenu" !default;
+$menu-item-selector-base: $selector-base !default;
+$menu-item-selector: "menu-item" !default;
+$menu-link-selector-base: $selector-base !default;
+$menu-link-selector: "menu-link" !default;
+$submenu-toggle-selector-base: $selector-base !default;
+$submenu-toggle-selector: "submenu-toggle" !default;
+$menu-show-selector-base: $modifier-selector-base !default;
+$menu-show-selector: "show" !default;
+$menu-hide-selector-base: $modifier-selector-base !default;
+$menu-hide-selector: "hide" !default;
 
 // Flex properties.
 $menu-flex-direction: row !default;
@@ -55,3 +72,28 @@ $menu-link-border-width: 0 !default;
 $submenu-toggle-transform: rotate(0deg) !default;
 $submenu-toggle-open-transform: rotate(-180deg) !default;
 $submenu-toggle-content: "'↓'" !default;
+
+// Menu state theme defaults.
+// This map is used to define the default colour shades for the
+// themed menu bases.
+//
+// e.g.
+// Primary menus will use primary--900 as the text colour and primary--700 as the border colour.
+//
+// Secondary/tertiary menus will use the same shade for their respective colours.
+$-menu-theme-mappings: (
+  color: 900,
+  border-color: 700,
+  link-hover-background: 700,
+  link-hover-color: 100,
+);
+$menu-theme-mappings: () !default;
+
+// Merge the custom menu state theme map with the default one.
+@if $generate-base-theme-map {
+  $menu-theme-mappings: map.merge($-menu-theme-mappings, $menu-theme-mappings);
+}
+
+$-menu-theme-map: theme.generate-property-map($menu-theme-mappings);
+$menu-theme-map: () !default;
+$menu-theme-map: map.deep-merge($-menu-theme-map, $menu-theme-map);