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

package/src/js/tabs/generator.js

@@ -0,0 +1,32 @@
+import Tabs from "./Tabs.js";
+import once from "@drupal/once";
+
+/**
+ * Generates Tabs elements.
+ *
+ * @param {object}      [options = {}]               - Options for generating the tabs.
+ * @param {object}      [options.options = {}]       - Options to pass to the Tabs constructor.
+ * @param {HTMLElement} [options.context = document] - The element to base the selector off of.
+ * @param {string}      [options.selector = .tabs]   - The query selector for the tabs elements in the DOM.
+ */
+const generate = ({
+  options = {},
+  context = document,
+  selector = ".tabs",
+} = {}) => {
+  once("graupl-tabs-generator", selector, context).forEach((tabsElement) => {
+    const tabsOptions = tabsElement.dataset.grauplTabsOptions
+      ? JSON.parse(tabsElement.dataset.grauplTabsOptions.replace(/'/g, '"')) ||
+        {}
+      : {};
+
+    new Tabs({
+      tabsElement,
+      initialize: true,
+      ...options,
+      ...tabsOptions,
+    });
+  });
+};
+
+export default generate;

package/src/js/tabs/index.js

@@ -0,0 +1,5 @@
+import generate from "./generator.js";
+
+document.addEventListener("DOMContentLoaded", () => {
+  generate();
+});

package/src/scss/_defaults.scss

@@ -26,7 +26,9 @@ $screen-aware-utilities: true !default;
 $theme-aware-utilities: true !default;
 $state-aware-utilities: true !default;
 $container-aware-utilities: false !default;
+$themeable-components: true !default;
 $use-layers: true !default;
+$show-warnings: true !default;
 
 // Layout properties.
 $content-max-width: 96ch !default;
@@ -34,21 +36,15 @@ $content-max-width: 96ch !default;
 // Screen sizes.
 $-screen-sizes: (
   xs: 0,
-  sm: 48ch,
-  md: 72ch,
-  lg: 108ch,
-  xl: 156ch,
+  sm: 576px,
+  md: 768px,
+  lg: 1024px,
+  xl: 1280px,
+  hd: 1500px,
+  qhd: 1921px,
+  uhd: 2561px,
 );
-$custom-screen-sizes: () !default;
 $screen-sizes: () !default;
-
-// @todo remove this once $custom-screen-sizes is removed
-@if $custom-screen-sizes != () {
-  @warn "`$custom-screen-sizes` is deprecated and will be removed in a future release of Graupl. Use `$screen-sizes` instead.";
-
-  $screen-sizes: map.merge($screen-sizes, $custom-screen-sizes);
-}
-
 $screen-sizes: map.merge($-screen-sizes, $screen-sizes);
 $-screen-size-triggers: (
   navigation-collapse: (
@@ -82,48 +78,15 @@ $-screen-size-triggers: (
     ),
   ),
 );
-$custom-screen-size-triggers: () !default;
 $screen-size-triggers: () !default;
-
-// @todo remove this once $custom-screen-size-triggers is removed
-@if $custom-screen-size-triggers != () {
-  @warn "`$custom-screen-size-triggers` is deprecated and will be removed in a future release of Graupl. Use `$screen-size-triggers` instead.";
-
-  $screen-size-triggers: map.merge(
-    $screen-size-triggers,
-    $custom-screen-size-triggers
-  );
-}
-
 $screen-size-triggers: map.merge($-screen-size-triggers, $screen-size-triggers);
 
 // Container sizes.
 $-container-sizes: $screen-sizes;
-$custom-container-sizes: () !default;
 $container-sizes: () !default;
-
-// @todo remove this once $custom-container-sizes is removed
-@if $custom-container-sizes != () {
-  @warn "`$custom-container-sizes` is deprecated and will be removed in a future release of Graupl. Use `$container-sizes` instead.";
-
-  $container-sizes: map.merge($container-sizes, $custom-container-sizes);
-}
-
 $container-sizes: map.merge($-container-sizes, $container-sizes);
 $-container-size-triggers: $screen-size-triggers;
-$custom-container-size-triggers: () !default;
 $container-size-triggers: () !default;
-
-// @todo remove this once $custom-container-size-triggers is removed
-@if $custom-container-size-triggers != () {
-  @warn "`$custom-container-size-triggers` is deprecated and will be removed in a future release of Graupl. Use `$container-size-triggers` instead.";
-
-  $container-size-triggers: map.merge(
-    $container-size-triggers,
-    $custom-container-size-triggers
-  );
-}
-
 $container-size-triggers: map.merge(
   $-container-size-triggers,
   $container-size-triggers
@@ -144,19 +107,7 @@ $-spacer-multipliers: (
   9: 5,
   10: 10,
 );
-$custom-spacer-multipliers: () !default;
 $spacer-multipliers: () !default;
-
-// @todo remove this once $custom-spacer-multipliers is removed
-@if $custom-spacer-multipliers != () {
-  @warn "`$custom-spacer-multipliers` is deprecated and will be removed in a future release of Graupl. Use `$spacer-multipliers` instead.";
-
-  $spacer-multipliers: map.merge(
-    $spacer-multipliers,
-    $custom-spacer-multipliers
-  );
-}
-
 $spacer-multipliers: map.merge($-spacer-multipliers, $spacer-multipliers);
 
 // Size properties.
@@ -176,19 +127,7 @@ $-transition-durations: (
   default: #{$transition-duration-base * 2.5}ms,
   slow: #{$transition-duration-base * 3}ms,
 );
-$custom-transition-durations: () !default;
 $transition-durations: () !default;
-
-// @todo remove this once $custom-transition-durations is removed
-@if $custom-transition-durations != () {
-  @warn "`$custom-transition-durations` is deprecated and will be removed in a future release of Graupl. Use `$transition-durations` instead.";
-
-  $transition-durations: map.merge(
-    $transition-durations,
-    $custom-transition-durations
-  );
-}
-
 $transition-durations: map.merge($-transition-durations, $transition-durations);
 
 // Selector properties.
@@ -226,6 +165,12 @@ $-state-selectors: (
     "[disabled]",
     "[aria-disabled=true]",
   ),
+  selected: (
+    "[aria-selected=true]",
+  ),
+  current: (
+    "[aria-current=true]",
+  ),
 );
 $-state-class-selectors: (
   visited: (
@@ -243,6 +188,12 @@ $-state-class-selectors: (
   disabled: (
     "#{$state-selector-base}disabled",
   ),
+  selected: (
+    "#{$state-selector-base}selected",
+  ),
+  current: (
+    "#{$state-selector-base}current",
+  ),
 );
 
 // Merge the state class selectors with the state selectors.
@@ -256,26 +207,8 @@ $-state-class-selectors: (
   }
 }
 
-$custom-state-selectors: () !default;
 $state-selectors: () !default;
 
-// @todo remove this once $custom-state-selectors is removed
-@if $custom-state-selectors != () {
-  @warn "`$custom-state-selectors` is deprecated and will be removed in a future release of Graupl. Use `$state-selectors` instead.";
-
-  @each $state, $selectors in $custom-state-selectors {
-    @if map.has-key($state-selectors, $state) {
-      $state-selectors: map.set(
-        $state-selectors,
-        $state,
-        list.join(map.get($state-selectors, $state), $selectors)
-      );
-    } @else {
-      $state-selectors: map.set($state-selectors, $state, $selectors);
-    }
-  }
-}
-
 @each $state, $selectors in $-state-selectors {
   @if map.has-key($state-selectors, $state) {
     $state-selectors: map.set(

package/src/scss/_variables.scss

@@ -2,21 +2,60 @@
 //
 // 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-content-max-width           | 96ch                               |
+// | --graupl-spacer                      | 1rem                               |
+// | --graupl-spacer-0                    | calc(0 * var(--graupl-spacer))     |
+// | --graupl-spacer-1                    | calc(0.125 * var(--graupl-spacer)) |
+// | --graupl-spacer-2                    | calc(0.25 * var(--graupl-spacer))  |
+// | --graupl-spacer-3                    | calc(0.5 * var(--graupl-spacer))   |
+// | --graupl-spacer-4                    | calc(0.75 * var(--graupl-spacer))  |
+// | --graupl-spacer-5                    | calc(1 * var(--graupl-spacer))     |
+// | --graupl-spacer-6                    | calc(1.5 * var(--graupl-spacer))   |
+// | --graupl-spacer-7                    | calc(2 * var(--graupl-spacer))     |
+// | --graupl-spacer-8                    | calc(3 * var(--graupl-spacer))     |
+// | --graupl-spacer-9                    | calc(5 * var(--graupl-spacer))     |
+// | --graupl-spacer-10                   | calc(10 * var(--graupl-spacer))    |
+// | --graupl-border-radius               | 0.125rem                           |
+// | --graupl-border-top-left-radius      | var(--graupl-border-radius)        |
+// | --graupl-border-top-right-radius     | var(--graupl-border-radius)        |
+// | --graupl-border-bottom-right-radius  | var(--graupl-border-radius)        |
+// | --graupl-border-bottom-left-radius   | var(--graupl-border-radius)        |
+// | --graupl-border-width                | 0.125rem                           |
+// | --graupl-border-top-width            | var(--graupl-border-width)         |
+// | --graupl-border-right-width          | var(--graupl-border-width)         |
+// | --graupl-border-bottom-width         | var(--graupl-border-width)         |
+// | --graupl-border-left-width           | var(--graupl-border-width)         |
+// | --graupl-border-style                | solid                              |
+// | --graupl-border-top-style            | var(--graupl-border-style)         |
+// | --graupl-border-right-style          | var(--graupl-border-style)         |
+// | --graupl-border-bottom-style         | var(--graupl-border-style)         |
+// | --graupl-border-left-style           | var(--graupl-border-style)         |
+// | --graupl-transition-duration-fast    | 150ms                              |
+// | --graupl-transition-duration-default | 250ms                              |
+// | --graupl-transition-duration-slow    | 300ms                              |
+// | --graupl-transition-timing-function  | ease                               |
 
 @use "defaults";
 @use "sass:map";
 
 // Layout properties.
+// --graupl-content-max-width
 $content-max-width: var(
   --#{defaults.$prefix}content-max-width,
   defaults.$content-max-width
 );
 
 // Spacing properties.
+// --graupl-spacer
 $spacer: var(--#{defaults.$prefix}spacer, defaults.$spacer);
 $spacers: ();
 
 @each $key, $value in defaults.$spacer-multipliers {
+  // --graupl-spacer-0, --graupl-spacer-1, --graupl-spacer-2, --graupl-spacer-3, --graupl-spacer-4, --graupl-spacer-5, --graupl-spacer-6, --graupl-spacer-7, --graupl-spacer-8, --graupl-spacer-9, --graupl-spacer-10
   $space: var(
     --#{defaults.$prefix}spacer-#{$key},
     calc(#{$value} * #{$spacer})
@@ -25,50 +64,79 @@ $spacers: ();
 }
 
 // Border properties.
+// --graupl-border-radius
 $border-radius: var(
   --#{defaults.$prefix}border-radius,
   defaults.$border-radius
 );
+
+// --graupl-border-top-left-radius
 $border-top-left-radius: var(
   --#{defaults.$prefix}border-top-left-radius,
   #{$border-radius}
 );
+
+// --graupl-border-top-right-radius
 $border-top-right-radius: var(
   --#{defaults.$prefix}border-top-right-radius,
   #{$border-radius}
 );
+
+// --graupl-border-bottom-right-radius
 $border-bottom-right-radius: var(
   --#{defaults.$prefix}border-bottom-right-radius,
   #{$border-radius}
 );
+
+// --graupl-border-bottom-left-radius
 $border-bottom-left-radius: var(
   --#{defaults.$prefix}border-bottom-left-radius,
   #{$border-radius}
 );
+
+// --graupl-border-width
 $border-width: var(--#{defaults.$prefix}border-width, defaults.$border-width);
+
+// --graupl-border-top-width
 $border-top-width: var(--#{defaults.$prefix}border-top-width, #{$border-width});
+
+// --graupl-border-right-width
 $border-right-width: var(
   --#{defaults.$prefix}border-right-width,
   #{$border-width}
 );
+
+// --graupl-border-bottom-width
 $border-bottom-width: var(
   --#{defaults.$prefix}border-bottom-width,
   #{$border-width}
 );
+
+// --graupl-border-left-width
 $border-left-width: var(
   --#{defaults.$prefix}border-left-width,
   #{$border-width}
 );
+
+// --graupl-border-style
 $border-style: var(--#{defaults.$prefix}border-style, defaults.$border-style);
+
+// --graupl-border-top-style
 $border-top-style: var(--#{defaults.$prefix}border-top-style, #{$border-style});
+
+// --graupl-border-right-style
 $border-right-style: var(
   --#{defaults.$prefix}border-right-style,
   #{$border-style}
 );
+
+// --graupl-border-bottom-style
 $border-bottom-style: var(
   --#{defaults.$prefix}border-bottom-style,
   #{$border-style}
 );
+
+// --graupl-border-left-style
 $border-left-style: var(
   --#{defaults.$prefix}border-left-style,
   #{$border-style}
@@ -89,6 +157,8 @@ $transition-durations: (
       map.get(defaults.$transition-durations, slow)
     ),
 );
+
+// --graupl-transition-timing-function
 $transition-timing-function: var(
   --#{defaults.$prefix}transition-timing-function,
   defaults.$transition-timing-function

package/src/scss/base/button/_defaults.scss

@@ -14,6 +14,7 @@
 $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: true !default;
 $button-selector-base: $selector-base !default;
 $button-selector: "button" !default;
 $button-link-selector-base: $modifier-selector-base !default;
@@ -31,8 +32,7 @@ $button-disabled-transform: $button-initial-transform !default;
 // themed button bases.
 //
 // e.g.
-// Primary buttons will use primary--900 as the text colour, primary--100 as the background
-// and primary--900 as the border colour.
+// Primary buttons will use primary--900 as the text colour and primary--700 as the border colour.
 //
 // Secondary/tertiary buttons will use the same shade for their respective colours.
 $-button-theme-mappings: (
@@ -44,30 +44,8 @@ $-button-theme-mappings: (
   disabled-color: 200,
   disabled-border-color: 200,
 );
-$custom-button-state-theme-map: () !default;
-$button-state-theme-map: () !default;
 $button-theme-mappings: () !default;
 
-// @todo remove this once $custom-button-state-theme-map is removed
-@if $custom-button-state-theme-map != () {
-  @warn "`$custom-button-state-theme-map` is deprecated and will be removed in a future release of Graupl. Use `$button-theme-mappings` instead.";
-
-  $button-theme-mappings: map.merge(
-    $button-theme-mappings,
-    $custom-button-state-theme-map
-  );
-}
-
-// @todo remove the once $button-state-theme-map is removed
-@if $button-state-theme-map != () {
-  @warn "`$button-state-theme-map` is deprecated and will be removed in a future release of Graupl. Use `$button-theme-mappings` instead.";
-
-  $button-theme-mappings: map.merge(
-    $button-theme-mappings,
-    $button-state-theme-map
-  );
-}
-
 // Merge the custom button state theme map with the default one.
 @if $generate-base-theme-map {
   $button-theme-mappings: map.merge(

package/src/scss/base/button/_index.scss

@@ -12,62 +12,63 @@
 // - `.link`: A component modifier to make the button component look like a link component.
 //
 // The following custom properties can be used to customize the button component:
-// | Property | Description | Default Value |
-// | --- | --- | --- |
-// | `--graupl-button-min-width`                  | The minimum width of the button component.                                                                     | `var(--graupl-interactive-min-width)`                                                                                                                                                     |
-// | `--graupl-button-min-height`                 | The minimum height of the button component.                                                                    | `var(--graupl-interactive-min-height)`                                                                                                                                                    |
-// | `--graupl-button-padding-x`                  | The horizontal padding of the button component.                                                                | `var(--graupl-spacer-5)`                                                                                                                                                                  |
-// | `--graupl-button-padding-y`                  | The vertical padding of the button component.                                                                  | `var(--graupl-spacer-3)`                                                                                                                                                                  |
-// | `--graupl-button-padding`                    | The padding of the button component (combines x and y padding).                                                | `var(--graupl-button-padding-x) var(--graupl-button-padding-y)`                                                                                                                           |
-// | `--graupl-button-font-size`                  | The font size of the button component.                                                                         | `var(--graupl-font-size-base)`                                                                                                                                                            |
-// | `--graupl-button-transition`                 | The transition of the button component.                                                                        | `background var(--graupl-transition-duration-fast), color var(--graupl-transition-duration-fast), transform var(--graupl-transition-duration-fast)`                                       |
-// | `--graupl-button-transition-reduced-motion`  | The transition of the button component when reduced motion is enabled.                                         | `background var(--graupl-transition-duration-none), color var(--graupl-transition-duration-none)`                                                                                         |
-// | `--graupl-button-transform`                  | The transform of the button component.                                                                         | `0`                                                                                                                                                                                       |
-// | `--graupl-button-visited-transform`          | The transform of a visited button component.                                                                   | `var(--graupl-button-transform)`                                                                                                                                                          |
-// | `--graupl-button-focus-transform`            | The transform of a focused button component.                                                                   | `var(--graupl-button-transform)`                                                                                                                                                          |
-// | `--graupl-button-hover-transform`            | The transform of a hovered button component.                                                                   | `var(--graupl-button-transform)`                                                                                                                                                          |
-// | `--graupl-button-active-transform`           | The transform of an active button component.                                                                   | `scale(0.95)`                                                                                                                                                                             |
-// | `--graupl-button-disabled-transform`         | The transform of a disabled button component.                                                                  | `0`                                                                                                                                                                                       |
-// | `--graupl-button-background`                 | The background colour of the button component.                                                                 | `var(--graupl-background)`                                                                                                                                                                |
-// | `--graupl-button-visited-background`         | The background colour of a visited button component.                                                           | `var(--graupl-button-background)`                                                                                                                                                         |
-// | `--graupl-button-focus-background`           | The background colour of a focused button component.                                                           | `var(--graupl-button-background)`                                                                                                                                                         |
-// | `--graupl-button-hover-background`           | The background colour of a hovered button component.                                                           | `var(--graupl-color)`                                                                                                                                                                     |
-// | `--graupl-button-active-background`          | The background colour of an active button component.                                                           | `var(--graupl-button-hover-background)`                                                                                                                                                   |
-// | `--graupl-button-disabled-background`        | The background colour of a disabled button component.                                                          | `var(--graupl-background)`                                                                                                                                                                |
-// | `--graupl-button-color`                      | The text colour of the button component.                                                                       | `var(--graupl-color)`                                                                                                                                                                     |
-// | `--graupl-button-visited-color`              | The text colour of a visited button component.                                                                 | `var(--graupl-button-color)`                                                                                                                                                              |
-// | `--graupl-button-focus-color`                | The text colour of a focused button component.                                                                 | `var(--graupl-button-color)`                                                                                                                                                              |
-// | `--graupl-button-hover-color`                | The text colour of a hovered button component.                                                                 | `var(--graupl-background)`                                                                                                                                                                |
-// | `--graupl-button-active-color`               | The text colour of an active button component.                                                                 | `var(--graupl-button-hover-color)`                                                                                                                                                        |
-// | `--graupl-button-disabled-color`             | The text colour of a disabled button component.                                                                | `var(--graupl-theme-active--primary--200)`                                                                                                                                                |
-// | `--graupl-button-border-top-width`           | The top border width of the button component.                                                                  | `var(--graupl-border-top-width)`                                                                                                                                                          |
-// | `--graupl-button-border-right-width`         | The right border width of the button component.                                                                | `var(--graupl-border-right-width)`                                                                                                                                                        |
-// | `--graupl-button-border-bottom-width`        | The bottom border width of the button component.                                                               | `var(--graupl-border-bottom-width)`                                                                                                                                                       |
-// | `--graupl-button-border-left-width`          | The left border width of the button component.                                                                 | `var(--graupl-border-left-width)`                                                                                                                                                         |
-// | `--graupl-button-border-width`               | The border width of the button component (combines top, right, bottom, and left widths).                       | `var(--graupl-button-border-top-width) var(--graupl-button-border-right-width) var(--graupl-button-border-bottom-width) var(--graupl-button-border-left-width)`                           |
-// | `--graupl-button-border-top-style`           | The top border style of the button component.                                                                  | `var(--graupl-border-top-style)`                                                                                                                                                          |
-// | `--graupl-button-border-right-style`         | The right border style of the button component.                                                                | `var(--graupl-border-right-style)`                                                                                                                                                        |
-// | `--graupl-button-border-bottom-style`        | The bottom border style of the button component.                                                               | `var(--graupl-border-bottom-style)`                                                                                                                                                       |
-// | `--graupl-button-border-left-style`          | The left border style of the button component.                                                                 | `var(--graupl-border-left-style)`                                                                                                                                                         |
-// | `--graupl-button-border-style`               | The border style of the button component (combines top, right, bottom, and left styles).                       | `var(--graupl-button-border-top-style) var(--graupl-button-border-right-style) var(--graupl-button-border-bottom-style) var(--graupl-button-border-left-style)`                           |
-// | `--graupl-button-border-top-left-radius`     | The top left border radius of the button component.                                                            | `var(--graupl-border-top-left-radius)`                                                                                                                                                    |
-// | `--graupl-button-border-top-right-radius`    | The top right border radius of the button component.                                                           | `var(--graupl-border-top-right-radius)`                                                                                                                                                   |
-// | `--graupl-button-border-bottom-right-radius` | The bottom right border radius of the button component.                                                        | `var(--graupl-border-bottom-right-radius)`                                                                                                                                                |
-// | `--graupl-button-border-bottom-left-radius`  | The bottom left border radius of the button component.                                                         | `var(--graupl-border-bottom-left-radius)`                                                                                                                                                 |
-// | `--graupl-button-border-radius`              | The border radius of the button component (combines top-left, top-right, bottom-right, and bottom-left radii). | `var(--graupl-button-border-top-left-radius) var(--graupl-button-border-top-right-radius) var(--graupl-button-border-bottom-right-radius) var(--graupl-button-border-bottom-left-radius)` |
-// | `--graupl-button-border-color`               | The border colour of the button component.                                                                     | `var(--graupl-border-color)`                                                                                                                                                              |
-// | `--graupl-button-visited-border-color`       | The border colour of a visited button component.                                                               | `var(--graupl-button-border-color)`                                                                                                                                                       |
-// | `--graupl-button-focus-border-color`         | The border colour of a focused button component.                                                               | `var(--graupl-button-border-color)`                                                                                                                                                       |
-// | `--graupl-button-hover-border-color`         | The border colour of a hovered button component.                                                               | `var(--graupl-border-color)`                                                                                                                                                              |
-// | `--graupl-button-active-border-color`        | The border colour of an active button component.                                                               | `var(--graupl-button-hover-border-color)`                                                                                                                                                 |
-// | `--graupl-button-disabled-border-color`      | The border colour of a disabled button component.                                                              | `var(--graupl-theme-active--primary--200)`                                                                                                                                                |
+// | Property                                     | Description                                                                                                    | Default Value                                                                                                                                                                                                                                                                  |
+// | ---                                          | ---                                                                                                            | ---                                                                                                                                                                                                                                                                            |
+// | `--graupl-button-min-width`                  | The minimum width of the button component.                                                                     | `var(--graupl-interactive-min-width)`                                                                                                                                                                                                                                          |
+// | `--graupl-button-min-height`                 | The minimum height of the button component.                                                                    | `var(--graupl-interactive-min-height)`                                                                                                                                                                                                                                         |
+// | `--graupl-button-padding-x`                  | The horizontal padding of the button component.                                                                | `var(--graupl-spacer-5)`                                                                                                                                                                                                                                                       |
+// | `--graupl-button-padding-y`                  | The vertical padding of the button component.                                                                  | `var(--graupl-spacer-3)`                                                                                                                                                                                                                                                       |
+// | `--graupl-button-padding`                    | The padding of the button component (combines x and y padding).                                                | `var(--graupl-button-padding-y) var(--graupl-button-padding-x)`                                                                                                                                                                                                                |
+// | `--graupl-button-font-size`                  | The font size of the button component.                                                                         | `var(--graupl-font-size-base)`                                                                                                                                                                                                                                                 |
+// | `--graupl-button-transition`                 | The transition of the button component.                                                                        | `background var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function), transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function)` |
+// | `--graupl-button-transition-reduced-motion`  | The transition of the button component when reduced motion is enabled.                                         | `background var(--graupl-transition-duration-none) var(--graupl-transition-timing-function), color var(--graupl-transition-duration-none) var(--graupl-transition-timing-function)`                                                                                            |
+// | `--graupl-button-transform`                  | The transform of the button component.                                                                         | `none`                                                                                                                                                                                                                                                                         |
+// | `--graupl-button-visited-transform`          | The transform of a visited button component.                                                                   | `var(--graupl-button-transform)`                                                                                                                                                                                                                                               |
+// | `--graupl-button-focus-transform`            | The transform of a focused button component.                                                                   | `var(--graupl-button-transform)`                                                                                                                                                                                                                                               |
+// | `--graupl-button-hover-transform`            | The transform of a hovered button component.                                                                   | `var(--graupl-button-transform)`                                                                                                                                                                                                                                               |
+// | `--graupl-button-active-transform`           | The transform of an active button component.                                                                   | `scale(0.95)`                                                                                                                                                                                                                                                                  |
+// | `--graupl-button-disabled-transform`         | The transform of a disabled button component.                                                                  | `none`                                                                                                                                                                                                                                                                         |
+// | `--graupl-button-background`                 | The background colour of the button component.                                                                 | `var(--graupl-background)`                                                                                                                                                                                                                                                     |
+// | `--graupl-button-visited-background`         | The background colour of a visited button component.                                                           | `var(--graupl-button-background)`                                                                                                                                                                                                                                              |
+// | `--graupl-button-focus-background`           | The background colour of a focused button component.                                                           | `var(--graupl-button-background)`                                                                                                                                                                                                                                              |
+// | `--graupl-button-hover-background`           | The background colour of a hovered button component.                                                           | `var(--graupl-color)`                                                                                                                                                                                                                                                          |
+// | `--graupl-button-active-background`          | The background colour of an active button component.                                                           | `var(--graupl-button-hover-background)`                                                                                                                                                                                                                                        |
+// | `--graupl-button-disabled-background`        | The background colour of a disabled button component.                                                          | `var(--graupl-background)`                                                                                                                                                                                                                                                     |
+// | `--graupl-button-color`                      | The text colour of the button component.                                                                       | `var(--graupl-color)`                                                                                                                                                                                                                                                          |
+// | `--graupl-button-visited-color`              | The text colour of a visited button component.                                                                 | `var(--graupl-button-color)`                                                                                                                                                                                                                                                   |
+// | `--graupl-button-focus-color`                | The text colour of a focused button component.                                                                 | `var(--graupl-button-color)`                                                                                                                                                                                                                                                   |
+// | `--graupl-button-hover-color`                | The text colour of a hovered button component.                                                                 | `var(--graupl-background)`                                                                                                                                                                                                                                                     |
+// | `--graupl-button-active-color`               | The text colour of an active button component.                                                                 | `var(--graupl-button-hover-color)`                                                                                                                                                                                                                                             |
+// | `--graupl-button-disabled-color`             | The text colour of a disabled button component.                                                                | `var(--graupl-theme-active--primary--200)`                                                                                                                                                                                                                                     |
+// | `--graupl-button-border-top-width`           | The top border width of the button component.                                                                  | `var(--graupl-border-top-width)`                                                                                                                                                                                                                                               |
+// | `--graupl-button-border-right-width`         | The right border width of the button component.                                                                | `var(--graupl-border-right-width)`                                                                                                                                                                                                                                             |
+// | `--graupl-button-border-bottom-width`        | The bottom border width of the button component.                                                               | `var(--graupl-border-bottom-width)`                                                                                                                                                                                                                                            |
+// | `--graupl-button-border-left-width`          | The left border width of the button component.                                                                 | `var(--graupl-border-left-width)`                                                                                                                                                                                                                                              |
+// | `--graupl-button-border-width`               | The border width of the button component (combines top, right, bottom, and left widths).                       | `var(--graupl-button-border-top-width) var(--graupl-button-border-right-width) var(--graupl-button-border-bottom-width) var(--graupl-button-border-left-width)`                                                                                                                |
+// | `--graupl-button-border-top-style`           | The top border style of the button component.                                                                  | `var(--graupl-border-top-style)`                                                                                                                                                                                                                                               |
+// | `--graupl-button-border-right-style`         | The right border style of the button component.                                                                | `var(--graupl-border-right-style)`                                                                                                                                                                                                                                             |
+// | `--graupl-button-border-bottom-style`        | The bottom border style of the button component.                                                               | `var(--graupl-border-bottom-style)`                                                                                                                                                                                                                                            |
+// | `--graupl-button-border-left-style`          | The left border style of the button component.                                                                 | `var(--graupl-border-left-style)`                                                                                                                                                                                                                                              |
+// | `--graupl-button-border-style`               | The border style of the button component (combines top, right, bottom, and left styles).                       | `var(--graupl-button-border-top-style) var(--graupl-button-border-right-style) var(--graupl-button-border-bottom-style) var(--graupl-button-border-left-style)`                                                                                                                |
+// | `--graupl-button-border-top-left-radius`     | The top left border radius of the button component.                                                            | `var(--graupl-border-top-left-radius)`                                                                                                                                                                                                                                         |
+// | `--graupl-button-border-top-right-radius`    | The top right border radius of the button component.                                                           | `var(--graupl-border-top-right-radius)`                                                                                                                                                                                                                                        |
+// | `--graupl-button-border-bottom-right-radius` | The bottom right border radius of the button component.                                                        | `var(--graupl-border-bottom-right-radius)`                                                                                                                                                                                                                                     |
+// | `--graupl-button-border-bottom-left-radius`  | The bottom left border radius of the button component.                                                         | `var(--graupl-border-bottom-left-radius)`                                                                                                                                                                                                                                      |
+// | `--graupl-button-border-radius`              | The border radius of the button component (combines top-left, top-right, bottom-right, and bottom-left radii). | `var(--graupl-button-border-top-left-radius) var(--graupl-button-border-top-right-radius) var(--graupl-button-border-bottom-right-radius) var(--graupl-button-border-bottom-left-radius)`                                                                                      |
+// | `--graupl-button-border-color`               | The border colour of the button component.                                                                     | `var(--graupl-border-color)`                                                                                                                                                                                                                                                   |
+// | `--graupl-button-visited-border-color`       | The border colour of a visited button component.                                                               | `var(--graupl-button-border-color)`                                                                                                                                                                                                                                            |
+// | `--graupl-button-focus-border-color`         | The border colour of a focused button component.                                                               | `var(--graupl-button-border-color)`                                                                                                                                                                                                                                            |
+// | `--graupl-button-hover-border-color`         | The border colour of a hovered button component.                                                               | `var(--graupl-border-color)`                                                                                                                                                                                                                                                   |
+// | `--graupl-button-active-border-color`        | The border colour of an active button component.                                                               | `var(--graupl-button-hover-border-color)`                                                                                                                                                                                                                                      |
+// | `--graupl-button-disabled-border-color`      | The border colour of a disabled button component.                                                              | `var(--graupl-theme-active--primary--200)`                                                                                                                                                                                                                                     |
 //
 // The following sass variables can be used to customize the generation of the button component:
-// | Variable | Description | Default Value |
-// | --- | --- | --- |
+// | Variable                        | Description                                                                             | Default Value               |
+// | ---                             | ---                                                                                     | ---                         |
 // | `$selector-base`                | The selector base for the component.                                                    | `.`                         |
 // | `$modifier-selector-base`       | The selector base for component modifiers.                                              | `.`                         |
 // | `$generate-base-theme-map`      | A flag to generate the base theme maps for button variants.                             | `true`                      |
+// | `$themeable`                    | A flag that determines whether theme modifiers are generated.                           | `true`                      |
 // | `$button-selector-base`         | The selector base for the button component.                                             | `$selector-base`            |
 // | `$button-selector`              | The button component selector.                                                          | `button`                    |
 // | `$button-link-selector-base`    | The selector base for the button link component modifier.                               | `$modifier-selector-base`   |
@@ -80,7 +81,7 @@
 // | `$button-theme-mappings`        | A map of properties and color shades used generate all button variants.                 | `()`                        |
 // | `$button-theme-map`             | A map of all properties, colors, and color shades used to generate all button variants. | `()`                        |
 //
-// Using `$button-theme-mappings`
+// ## Using `$button-theme-mappings`
 //
 // `$button-theme-mappings` is a 1-level map of properties and shade values.
 //