@graupl/graupl 1.0.0-beta.0 → 1.0.0-beta.10

package/{src → packages/core/src}/scss/_defaults.scss

@@ -1,4 +1,4 @@
-// @graupl/graupl default values.
+// @graupl/core default values.
 //
 // Generally, these should not be used directly when styling components unless a static value is needed.
 // They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
@@ -9,11 +9,16 @@
 @use "sass:map";
 
 // Prefix for custom properties and other naming conventions.
-$prefix: "graupl" !default;
+$id: "graupl" !default;
+$prefix: "#{$id}-" !default;
 
 // Settings.
 $use-important: true !default;
-$responsive-utilities: true !default;
+$screen-aware-utilities: true !default;
+$theme-aware-utilities: true !default;
+$state-aware-utilities: true !default;
+$container-aware-utilities: false !default;
+$use-layers: true !default;
 
 // Layout properties.
 $content-max-width: 96ch !default;
@@ -53,6 +58,12 @@ $base-screen-size-triggers: (
       "xs",
     ),
   ),
+  allow-sidebars: (
+    mixin: "up",
+    args: (
+      "lg",
+    ),
+  ),
 );
 $custom-screen-size-triggers: () !default;
 $screen-size-triggers: map.merge(
@@ -60,6 +71,17 @@ $screen-size-triggers: map.merge(
   $custom-screen-size-triggers
 );
 
+// Container sizes.
+$base-container-sizes: $screen-sizes;
+$custom-container-sizes: () !default;
+$container-sizes: map.merge($base-container-sizes, $custom-container-sizes);
+$base-container-size-triggers: $screen-size-triggers;
+$custom-container-size-triggers: () !default;
+$container-size-triggers: map.merge(
+  $base-container-size-triggers,
+  $custom-container-size-triggers
+);
+
 // Spacing properties.
 $spacer: 1rem !default;
 $base-spacer-multipliers: (
@@ -87,7 +109,7 @@ $interactive-min-height: 44px !default;
 
 // Border properties.
 $border-radius: 0.125rem !default;
-$border-width: 2px !default;
+$border-width: 0.125rem !default;
 $border-style: solid !default;
 
 // Transition properties.
@@ -104,26 +126,42 @@ $transition-durations: map.merge(
   $custom-transition-durations
 );
 
+// Selector properties.
+$element-selector-base: "" !default;
+$component-selector-base: "." !default;
+$modifier-selector-base: "." !default;
+$screen-aware-selector-separator: "\\:" !default;
+$theme-aware-selector-separator: "\\:" !default;
+$state-aware-selector-separator: "\\:" !default;
+$container-aware-selector-separator: "\\:" !default;
+
+// Selector prefixes.
+$screen-aware-selector-prefix: "" !default;
+$theme-aware-selector-prefix: "" !default;
+$state-aware-selector-prefix: "" !default;
+$container-aware-selector-prefix: "cq\\:" !default;
+
 // State selectors.
+$state-selector-base: $modifier-selector-base !default;
 $base-state-selectors: (
   visited: (
-    ".visited",
+    "#{$state-selector-base}visited",
     ":visited",
   ),
   focus: (
-    ".focus",
+    "#{$state-selector-base}focus",
     ":focus-visible",
   ),
   hover: (
-    ".hover",
+    "#{$state-selector-base}hover",
     ":hover",
   ),
   active: (
-    ".active",
+    "#{$state-selector-base}active",
     ":active",
   ),
   disabled: (
-    ".disabled",
+    "#{$state-selector-base}disabled",
     ":disabled",
     "[disabled]",
     "[aria-disabled=true]",
@@ -132,5 +170,15 @@ $base-state-selectors: (
 $custom-state-selectors: () !default;
 $state-selectors: map.merge($base-state-selectors, $custom-state-selectors);
 
-// Responsive utility separator.
-$responsive-separator: "\\:" !default;
+// Utility properties.
+$utility-selector-base: $modifier-selector-base !default;
+
+// Utility modifier separators.
+$utility-screen-aware-separator: $screen-aware-selector-separator !default;
+$utility-theme-aware-separator: $theme-aware-selector-separator !default;
+$utility-state-aware-separator: $state-aware-selector-separator !default;
+$utility-container-aware-separator: $container-aware-selector-separator !default;
+$utility-screen-aware-selector-prefix: $screen-aware-selector-prefix !default;
+$utility-theme-aware-selector-prefix: $theme-aware-selector-prefix !default;
+$utility-state-aware-selector-prefix: $state-aware-selector-prefix !default;
+$utility-container-aware-selector-prefix: $container-aware-selector-prefix !default;

package/{src → packages/core/src}/scss/_index.scss

@@ -1,4 +1,4 @@
-// @graupl/graupl styles.
+// @graupl/core styles.
 
 // Forward the layer initialization.
 @forward "init";

package/packages/core/src/scss/_init.scss

@@ -0,0 +1,6 @@
+// @graupl/core layer initialization styles.
+
+@use "defaults" as root-defaults;
+
+// Layer initialization.
+@layer #{root-defaults.$id}.normalize, #{root-defaults.$id}.base, #{root-defaults.$id}.layout, #{root-defaults.$id}.component, #{root-defaults.$id}.theme, #{root-defaults.$id}.utilities, #{root-defaults.$id}.state;

package/{src → packages/core/src}/scss/_normalize.scss

@@ -1,4 +1,4 @@
-// @graupl/graupl normalize.
+// @graupl/core normalize.
 //
 // This file is manually forked from normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
 //

package/packages/core/src/scss/_variables.scss

@@ -0,0 +1,95 @@
+// @graupl/core variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";
+@use "sass:map";
+
+// Layout properties.
+$content-max-width: var(
+  --#{defaults.$prefix}content-max-width,
+  defaults.$content-max-width
+);
+
+// Spacing properties.
+$spacer: var(--#{defaults.$prefix}spacer, defaults.$spacer);
+$spacers: ();
+
+@each $key, $value in defaults.$spacer-multipliers {
+  $space: var(
+    --#{defaults.$prefix}spacer-#{$key},
+    calc(#{$value} * #{$spacer})
+  );
+  $spacers: map.set($spacers, $key, $space);
+}
+
+// Border properties.
+$border-radius: var(
+  --#{defaults.$prefix}border-radius,
+  defaults.$border-radius
+);
+$border-top-left-radius: var(
+  --#{defaults.$prefix}border-top-left-radius,
+  #{$border-radius}
+);
+$border-top-right-radius: var(
+  --#{defaults.$prefix}border-top-right-radius,
+  #{$border-radius}
+);
+$border-bottom-right-radius: var(
+  --#{defaults.$prefix}border-bottom-right-radius,
+  #{$border-radius}
+);
+$border-bottom-left-radius: var(
+  --#{defaults.$prefix}border-bottom-left-radius,
+  #{$border-radius}
+);
+$border-width: var(--#{defaults.$prefix}border-width, defaults.$border-width);
+$border-top-width: var(--#{defaults.$prefix}border-top-width, #{$border-width});
+$border-right-width: var(
+  --#{defaults.$prefix}border-right-width,
+  #{$border-width}
+);
+$border-bottom-width: var(
+  --#{defaults.$prefix}border-bottom-width,
+  #{$border-width}
+);
+$border-left-width: var(
+  --#{defaults.$prefix}border-left-width,
+  #{$border-width}
+);
+$border-style: var(--#{defaults.$prefix}border-style, defaults.$border-style);
+$border-top-style: var(--#{defaults.$prefix}border-top-style, #{$border-style});
+$border-right-style: var(
+  --#{defaults.$prefix}border-right-style,
+  #{$border-style}
+);
+$border-bottom-style: var(
+  --#{defaults.$prefix}border-bottom-style,
+  #{$border-style}
+);
+$border-left-style: var(
+  --#{defaults.$prefix}border-left-style,
+  #{$border-style}
+);
+
+// Transition properties.
+$transition-durations: (
+  fast: var(
+      --#{defaults.$prefix}transition-duration-fast,
+      map.get(defaults.$transition-durations, fast)
+    ),
+  default: var(
+      --#{defaults.$prefix}transition-duration-default,
+      map.get(defaults.$transition-durations, default)
+    ),
+  slow: var(
+      --#{defaults.$prefix}transition-duration-slow,
+      map.get(defaults.$transition-durations, slow)
+    ),
+);
+$transition-timing-function: var(
+  --#{defaults.$prefix}transition-timing-function,
+  defaults.$transition-timing-function
+);

package/{src → packages/core/src}/scss/base/_index.scss

@@ -1,4 +1,4 @@
-// @graupl/graupl base styles.
+// @graupl/core base styles.
 
 @forward "button";
 @forward "form";

package/{src → packages/core/src}/scss/base/button/_defaults.scss

@@ -1,4 +1,4 @@
-// @graupl/graupl button base default values.
+// @graupl/core button base default values.
 //
 // Generally, these should not be used directly when styling bases unless a static value is needed.
 // They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
@@ -6,27 +6,23 @@
 // 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 "sass:map";
 
 // Button selectors.
-$button-selector: ".button" !default;
-$button-link-selector: ".link" !default;
-$button-theme-selector-prefix: "." !default;
-
-// State selectors.
-$button-active-selector: ".active" !default;
-$button-disabled-selector: ".disabled" !default;
-$button-focus-selector: ".focus" !default;
-$button-hover-selector: ".hover" !default;
-$button-visited-selector: ".visited" !default;
+$selector-base: root-defaults.$component-selector-base !default;
+$modifier-selector-base: root-defaults.$modifier-selector-base !default;
+$button-selector-base: $selector-base !default;
+$button-selector: "button" !default;
+$button-link-selector-base: $modifier-selector-base !default;
+$button-link-selector: "link" !default;
+$button-theme-selector-base: $modifier-selector-base !default;
+$button-theme-selector-prefix: "" !default;
 
 // Button properties.
-$button-transform: none !default;
-$button-visited-transform: $button-transform !default;
-$button-focus-transform: $button-transform !default;
-$button-hover-transform: $button-transform !default;
-$button-active-transform: scale(0.95) !default;
-$button-disabled-transform: $button-transform !default;
+$button-initial-transform: none !default;
+$button-final-transform: scale(0.95) !default;
+$button-disabled-transform: $button-initial-transform !default;
 
 // Button state theme defaults.
 // This map is used to define the default colour shades for the
@@ -40,16 +36,9 @@ $button-disabled-transform: $button-transform !default;
 $base-button-state-theme-map: (
   color: 900,
   border-color: 700,
-  visited-color: 900,
-  visited-border-color: 700,
-  focus-color: 900,
-  focus-border-color: 700,
   hover-color: 100,
   hover-background: 700,
   hover-border-color: 700,
-  active-color: 100,
-  active-background: 700,
-  active-border-color: 700,
   disabled-color: 200,
   disabled-border-color: 200,
 );

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

@@ -0,0 +1,206 @@
+// @graupl/core button base styles.
+//
+// This module provides the base styles for the button component.
+//
+// The button component is meant to be used on <button> or <a> elements, but can be applied to anything.
+//
+// The following selectors are generated by default:
+// - `.button`: The button component.
+// - `.primary`: A component modifier to use the primary colour for the button component.
+// - `.secondary`: A component modifier to use the secondary colour for the button component.
+// - `.tertiary`: A component modifier to use the tertiary colour for the button component.
+// - `.link`: A component modifier to make the button component look like a link component.
+//
+// The following custom properties control the generated selectors:
+// - `--graupl-button-min-width`: The minimum width of the button component.
+// - `--graupl-button-min-height`: The minimum height of the button component.
+// - `--graupl-button-padding-x`: The horizontal padding of the button component.
+// - `--graupl-button-padding-y`: The vertical padding of the button component.
+// - `--graupl-button-padding`: The padding of the button component (combines x and y padding).
+// - `--graupl-button-font-size`: The font size of the button component.
+// - `--graupl-button-transition`: The transition of the button component.
+// - `--graupl-button-transition-reduced-motion`: The transition of the button component when reduced motion is enabled.
+// - `--graupl-button-transform`: The transform of the button component.
+// - `--graupl-button-visited-transform`: The transform of a visited button component.
+// - `--graupl-button-focus-transform`: The transform of a focused button component.
+// - `--graupl-button-hover-transform`: The transform of a hovered button component.
+// - `--graupl-button-active-transform`: The transform of an active button component.
+// - `--graupl-button-disabled-transform`: The transform of a disabled button component.
+// - `--graupl-button-background`: The background colour of the button component.
+// - `--graupl-button-visited-background`: The background colour of a visited button component.
+// - `--graupl-button-focus-background`: The background colour of a focused button component.
+// - `--graupl-button-hover-background`: The background colour of a hovered button component.
+// - `--graupl-button-active-background`: The background colour of an active button component.
+// - `--graupl-button-disabled-background`: The background colour of a disabled button component.
+// - `--graupl-button-color`: The text colour of the button component.
+// - `--graupl-button-visited-color`: The text colour of a visited button component.
+// - `--graupl-button-focus-color`: The text colour of a focused button component.
+// - `--graupl-button-hover-color`: The text colour of a hovered button component.
+// - `--graupl-button-active-color`: The text colour of an active button component.
+// - `--graupl-button-disabled-color`: The text colour of a disabled button component.
+// - `--graupl-button-border-top-width`: The top border width of the button component.
+// - `--graupl-button-border-right-width`: The right border width of the button component.
+// - `--graupl-button-border-bottom-width`: The bottom border width of the button component.
+// - `--graupl-button-border-left-width`: The left border width of the button component.
+// - `--graupl-button-border-width`: The border width of the button component (combines top, right, bottom, and left widths).
+// - `--graupl-button-border-top-style`: The top border style of the button component.
+// - `--graupl-button-border-right-style`: The right border style of the button component.
+// - `--graupl-button-border-bottom-style`: The bottom border style of the button component.
+// - `--graupl-button-border-left-style`: The left border style of the button component.
+// - `--graupl-button-border-style`: The border style of the button component (combines top, right, bottom, and left styles).
+// - `--graupl-button-border-top-left-radius`: The top left border radius of the button component.
+// - `--graupl-button-border-top-right-radius`: The top right border radius of the button component.
+// - `--graupl-button-border-bottom-right-radius`: The bottom right border radius of the button component.
+// - `--graupl-button-border-bottom-left-radius`: The bottom left border radius of the button component.
+// - `--graupl-button-border-radius`: The border radius of the button component (combines top-left, top-right, bottom-right, and bottom-left radii).
+// - `--graupl-button-border-color`: The border colour of the button component.
+// - `--graupl-button-visited-border-color`: The border colour of a visited button component.
+// - `--graupl-button-focus-border-color`: The border colour of a focused button component.
+// - `--graupl-button-hover-border-color`: The border colour of a hovered button component.
+// - `--graupl-button-active-border-color`: The border colour of an active button component.
+// - `--graupl-button-disabled-border-color`: The border colour of a disabled button component.
+//
+// The following variables control the generated selectors:
+// - `$selector-base`: The selector base for the component.
+// - `$modifier-selector-base`: The selector base for component modifiers.
+// - `$button-selector-base`: The selector base for the button component.
+// - `$button-selector`: The button component selector.
+// - `$button-link-selector-base`: The selector base for the button link component modifier.
+// - `$button-link-selector`: The button link component modifier selector.
+// - `$button-theme-selector-base`: The selector base for the button theme component modifiers.
+// - `$button-theme-selector-prefix`: The button theme component modifier selector prefix.
+// - `$button-initial-transform`: The initial transform of the button.
+// - `$button-final-transform`: The final transform of the button.
+// - `$button-disabled-transform`: The disabled transform of the button.
+// - `$custom-button-state-theme-map`: A map of custom button state theme values.
+//
+// @example
+// <button class="button primary">Primary Button</button>
+//
+// @example
+// <a class="button secondary" href="#">Secondary Button</a>
+//
+// @example
+// <button class="button link">Link Button</button>
+
+@use "../../base/link/variables" as link;
+@use "../../defaults" as root-defaults;
+@use "../../mixins/layer" as *;
+@use "../link/defaults" as link-defaults;
+@use "defaults";
+@use "mixins" as *;
+@use "variables" as *;
+
+@include layer(base) {
+  // .button
+  #{defaults.$button-selector-base}#{defaults.$button-selector} {
+    @include apply-base;
+
+    // &.link
+    &#{defaults.$button-link-selector-base}#{defaults.$button-link-selector} {
+      --#{root-defaults.$prefix}button-padding: #{link.$link-padding};
+      --#{root-defaults.$prefix}button-transition: #{link.$link-transition};
+      --#{root-defaults.$prefix}button-transition-reduced-motion: #{link.$link-transition-reduced-motion};
+      --#{root-defaults.$prefix}button-transform: #{link.$link-transform};
+      --#{root-defaults.$prefix}button-visited-transform: #{link.$link-visited-transform};
+      --#{root-defaults.$prefix}button-focus-transform: #{link.$link-transform};
+      --#{root-defaults.$prefix}button-hover-transform: #{link.$link-hover-transform};
+      --#{root-defaults.$prefix}button-active-transform: #{link.$link-active-transform};
+      --#{root-defaults.$prefix}button-border-width: #{link.$link-border-width};
+      --#{root-defaults.$prefix}button-border-style: #{link.$link-border-style};
+      --#{root-defaults.$prefix}button-border-radius: #{link.$link-border-radius};
+      --#{root-defaults.$prefix}button-min-width: #{link.$link-min-width};
+      --#{root-defaults.$prefix}button-min-height: #{link.$link-min-height};
+      --#{root-defaults.$prefix}button-font-size: inherit;
+
+      text-decoration: link.$link-text-decoration;
+      text-decoration-thickness: link.$link-text-decoration-thickness;
+      text-decoration-style: link.$link-text-decoration-style;
+    }
+  }
+
+  // a
+  #{link-defaults.$link-selector-base}#{link-defaults.$link-selector} {
+    // &.button:not(.link)
+    &#{defaults.$button-selector-base}#{defaults.$button-selector}:not(
+        #{defaults.$button-link-selector-base}#{defaults.$button-link-selector}
+      ) {
+      --#{root-defaults.$prefix}link-padding: #{$button-padding};
+      --#{root-defaults.$prefix}link-transition: #{$button-transition};
+      --#{root-defaults.$prefix}link-transition-reduced-motion: #{$button-transition-reduced-motion};
+      --#{root-defaults.$prefix}link-transform: #{$button-transform};
+      --#{root-defaults.$prefix}link-visited-transform: #{$button-visited-transform};
+      --#{root-defaults.$prefix}link-focus-transform: #{$button-focus-transform};
+      --#{root-defaults.$prefix}link-hover-transform: #{$button-hover-transform};
+      --#{root-defaults.$prefix}link-active-transform: #{$button-active-transform};
+      --#{root-defaults.$prefix}link-disabled-transform: #{$button-disabled-transform};
+      --#{root-defaults.$prefix}link-border-width: #{$button-border-width};
+      --#{root-defaults.$prefix}link-border-style: #{$button-border-style};
+      --#{root-defaults.$prefix}link-border-radius: #{$button-border-radius};
+      --#{root-defaults.$prefix}link-min-width: #{$button-min-width};
+      --#{root-defaults.$prefix}link-min-height: #{$button-min-height};
+      --#{root-defaults.$prefix}link-text-decoration: none;
+      --#{root-defaults.$prefix}link-visited-text-decoration: none;
+      --#{root-defaults.$prefix}link-focus-text-decoration: none;
+      --#{root-defaults.$prefix}link-hover-text-decoration: none;
+      --#{root-defaults.$prefix}link-active-text-decoration: none;
+      --#{root-defaults.$prefix}link-disabled-text-decoration: none;
+    }
+  }
+}
+
+@include layer(theme) {
+  // .button
+  #{defaults.$button-selector-base}#{defaults.$button-selector} {
+    @include apply-theme;
+
+    // &.link
+    &#{defaults.$button-link-selector-base}#{defaults.$button-link-selector} {
+      --#{root-defaults.$prefix}button-color: #{link.$link-color};
+      --#{root-defaults.$prefix}button-visited-color: #{link.$link-visited-color};
+      --#{root-defaults.$prefix}button-focus-color: #{link.$link-focus-color};
+      --#{root-defaults.$prefix}button-hover-color: #{link.$link-hover-color};
+      --#{root-defaults.$prefix}button-active-color: #{link.$link-active-color};
+      --#{root-defaults.$prefix}button-disabled-color: #{link.$link-disabled-color};
+      --#{root-defaults.$prefix}button-background: #{link.$link-background};
+      --#{root-defaults.$prefix}button-visited-background: #{link.$link-visited-background};
+      --#{root-defaults.$prefix}button-focus-background: #{link.$link-focus-background};
+      --#{root-defaults.$prefix}button-hover-background: #{link.$link-hover-background};
+      --#{root-defaults.$prefix}button-active-background: #{link.$link-active-background};
+      --#{root-defaults.$prefix}button-disabled-background: #{link.$link-disabled-background};
+      --#{root-defaults.$prefix}button-border-color: #{link.$link-border-color};
+      --#{root-defaults.$prefix}button-visited-border-color: #{link.$link-visited-border-color};
+      --#{root-defaults.$prefix}button-focus-border-color: #{link.$link-focus-border-color};
+      --#{root-defaults.$prefix}button-hover-border-color: #{link.$link-hover-border-color};
+      --#{root-defaults.$prefix}button-active-border-color: #{link.$link-active-border-color};
+      --#{root-defaults.$prefix}button-disabled-border-color: #{link.$link-disabled-border-color};
+    }
+  }
+
+  // a
+  #{link-defaults.$link-selector-base}#{link-defaults.$link-selector} {
+    // &.button:not(.link)
+    &#{defaults.$button-selector-base}#{defaults.$button-selector}:not(
+        #{defaults.$button-link-selector-base}#{defaults.$button-link-selector}
+      ) {
+      --#{root-defaults.$prefix}link-color: #{$button-color};
+      --#{root-defaults.$prefix}link-visited-color: #{$button-visited-color};
+      --#{root-defaults.$prefix}link-focus-color: #{$button-focus-color};
+      --#{root-defaults.$prefix}link-hover-color: #{$button-hover-color};
+      --#{root-defaults.$prefix}link-active-color: #{$button-active-color};
+      --#{root-defaults.$prefix}link-disabled-color: #{$button-disabled-color};
+      --#{root-defaults.$prefix}link-background: #{$button-background};
+      --#{root-defaults.$prefix}link-visited-background: #{$button-visited-background};
+      --#{root-defaults.$prefix}link-focus-background: #{$button-focus-background};
+      --#{root-defaults.$prefix}link-hover-background: #{$button-hover-background};
+      --#{root-defaults.$prefix}link-active-background: #{$button-active-background};
+      --#{root-defaults.$prefix}link-disabled-background: #{$button-disabled-background};
+      --#{root-defaults.$prefix}link-border-color: #{$button-border-color};
+      --#{root-defaults.$prefix}link-visited-border-color: #{$button-visited-border-color};
+      --#{root-defaults.$prefix}link-focus-border-color: #{$button-focus-border-color};
+      --#{root-defaults.$prefix}link-hover-border-color: #{$button-hover-border-color};
+      --#{root-defaults.$prefix}link-active-border-color: #{$button-active-border-color};
+      --#{root-defaults.$prefix}link-disabled-border-color: #{$button-disabled-border-color};
+    }
+  }
+}

package/packages/core/src/scss/base/button/_mixins.scss

@@ -0,0 +1,104 @@
+// @graupl/core button base styles.
+
+@use "defaults";
+@use "../../defaults" as root-defaults;
+@use "../../theme/color/variables" as color;
+@use "variables" as *;
+@use "../../mixins/layer" as *;
+@use "../../mixins/animation";
+@use "../../functions/theme";
+@use "sass:map";
+
+/// Mixin to apply base styles for buttons.
+@mixin apply-base() {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: $button-min-width;
+  min-height: $button-min-height;
+  padding: $button-padding;
+  transform: $button-transform;
+  transition: $button-transition;
+  border-width: $button-border-width;
+  border-style: $button-border-style;
+  border-radius: $button-border-radius;
+  font-size: $button-font-size;
+  cursor: pointer;
+
+  @each $state, $selectors in root-defaults.$state-selectors {
+    @each $selector in $selectors {
+      // e.g &:visited, &:focus-visible, &:hover, &:active, &:disabled
+      &#{$selector} {
+        transform: map.get($button-transform-states, $state);
+
+        // If the state is disabled, we want that to supersede all other states.
+        @if $state == "disabled" {
+          cursor: not-allowed;
+
+          @each $sub-state, $sub-selectors in root-defaults.$state-selectors {
+            @if $sub-state != $state {
+              @each $sub-selector in $sub-selectors {
+                // e.g &:visited, &:focus-visible, &:hover, &:active
+                &#{$sub-selector} {
+                  transform: map.get($button-transform-states, $state);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+
+  @include animation.off {
+    --#{root-defaults.$prefix}button-transition: #{$button-transition-reduced-motion};
+  }
+}
+
+/// Mixin to apply theme styles for buttons.
+@mixin apply-theme() {
+  border-color: $button-border-color;
+  background: $button-background;
+  color: $button-color;
+
+  @each $color, $map in map.get(color.$themes, active) {
+    // e.g. &.primary, &.secondary, &.tertiary
+    &#{defaults.$button-theme-selector-base}#{defaults.$button-theme-selector-prefix}#{$color} {
+      @each $prop, $shade in defaults.$button-state-theme-map {
+        --#{root-defaults.$prefix}button-#{$prop}: #{theme.get($color, $shade)};
+      }
+    }
+  }
+
+  @each $state, $selectors in root-defaults.$state-selectors {
+    @each $selector in $selectors {
+      // e.g &:visited, &:focus-visible, &:hover, &:active, &:disabled
+      &#{$selector} {
+        border-color: map.get($button-border-color-states, $state);
+        background: map.get($button-background-states, $state);
+        color: map.get($button-color-states, $state);
+
+        // If the state is disabled, we want that to supersede all other states.
+        @if $state == "disabled" {
+          @each $sub-state, $sub-selectors in root-defaults.$state-selectors {
+            @if $sub-state != $state {
+              @each $sub-selector in $sub-selectors {
+                // e.g &:visited, &:focus-visible, &:hover, &:active
+                &#{$sub-selector} {
+                  border-color: map.get($button-border-color-states, $state);
+                  background: map.get($button-background-states, $state);
+                  color: map.get($button-color-states, $state);
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+@mixin apply() {
+  @include apply-base;
+  @include apply-theme;
+}