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

package/packages/core/src/scss/_normalize.scss

@@ -1,197 +0,0 @@
-// @graupl/core normalize.
-//
-// This file is manually forked from normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css
-//
-// We wanted to scope normalize.css to a normalize layer along with some customizations, so we forked it here.
-//
-// @use cannot be used in this file because you cannot insert it into a layer.
-//
-// @import would technically work, but it is not recommended by Sass and will eventually be removed.
-// Using @import would cause headaches down the line, so a manual fork was the best option.
-
-@use "mixins/layer" as *;
-
-@include layer(normalize) {
-  // Correct box sizing of all elements to ensure everything is consistent.
-  *,
-  *::before,
-  *::after {
-    box-sizing: border-box;
-  }
-
-  // Document.
-
-  // 1. Correct the line height in all browsers.
-  // 2. Prevent adjustments of font size after orientation changes in iOS.
-  html {
-    line-height: 1.15; // 1.
-    text-size-adjust: 100%; // 2.
-  }
-
-  // Secions.
-
-  // Remove the margin in all browsers.
-  body {
-    margin: 0;
-  }
-
-  // Grouping content.
-
-  // Add the correct box sizing in Firefox.
-  hr {
-    box-sizing: content-box;
-    height: 0;
-  }
-
-  // 1. Correct the inheritance and scaling of font size in all browsers.
-  // 2. Correct the odd `em` font sizing in all browsers.
-  pre {
-    font-family: monospace; // 1.
-    font-size: 1em; // 2.
-  }
-
-  // Text-level semantics.
-
-  // 1. Remove the bottom border in Chrome 57-
-  // 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
-  abbr[title] {
-    border-bottom: 0; // 1.
-    text-decoration: underline dotted; // 2.
-  }
-
-  // Add the correct font weight in Chrome, Edge, and Safari.
-  b,
-  strong {
-    font-weight: bolder;
-  }
-
-  // 1. Correct the inheritance and scaling of font size in all browsers.
-  // 2. Correct the odd `em` font sizing in all browsers.
-  code,
-  kbd,
-  samp {
-    font-family: monospace; // 1.
-    font-size: 1em; // 2.
-  }
-
-  // Add the correct font size in all browsers.
-  small {
-    font-size: 80%;
-  }
-
-  // Prevent `sub` and `sup` elements from affecting the line height in all browsers.
-  sub,
-  sup {
-    position: relative;
-    font-size: 75%;
-    line-height: 0;
-    vertical-align: baseline;
-  }
-
-  sub {
-    bottom: -0.25em;
-  }
-
-  sup {
-    top: -0.5em;
-  }
-
-  // Forms.
-
-  // 1. Change the font styles in all browsers.
-  // 2. Remove the margin in Firefox and Safari.
-  button,
-  input,
-  optgroup,
-  select,
-  textarea {
-    margin: 0; // 2.
-    font-family: inherit; // 1.
-    font-size: 100%; // 1.
-    line-height: 1.15; // 1.
-  }
-
-  // Remove the inheritance of text transform in Firefox.
-  button,
-  select {
-    /* 1 */
-    text-transform: none;
-  }
-
-  // Correct the inability to style clickable types in iOS and Safari.
-  button,
-  [type="button"],
-  [type="reset"],
-  [type="submit"] {
-    appearance: button;
-  }
-
-  // Remove the inner border and padding in Firefox.
-  button::-moz-focus-inner,
-  [type="button"]::-moz-focus-inner,
-  [type="reset"]::-moz-focus-inner,
-  [type="submit"]::-moz-focus-inner {
-    padding: 0;
-    border-style: none;
-  }
-
-  // Restore the focus styles unset by the previous rule.
-  button:-moz-focusring,
-  [type="button"]:-moz-focusring,
-  [type="reset"]:-moz-focusring,
-  [type="submit"]:-moz-focusring {
-    outline: 1px dotted ButtonText;
-  }
-
-  // Correct the padding in Firefox.
-  fieldset {
-    padding: 0.35em 0.75em 0.625em;
-  }
-
-  // Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
-  legend {
-    padding: 0;
-  }
-
-  // Add the correct vertical alignment in Chrome, Firefox, and Opera.
-  progress {
-    vertical-align: baseline;
-  }
-
-  // Correct the cursor style of increment and decrement buttons in Chrome.
-  [type="number"]::-webkit-inner-spin-button,
-  [type="number"]::-webkit-outer-spin-button {
-    height: auto;
-  }
-
-  // 1. Correct the odd appearance in Chrome and Safari.
-  // 2. Correct the outline style in Safari.
-  [type="search"] {
-    appearance: textfield; // 1.
-    outline-offset: -2px; // 2.
-  }
-
-  // Remove the inner padding in Chrome and Safari on macOS.
-  [type="search"]::-webkit-search-decoration {
-    appearance: none;
-  }
-
-  // 1. Correct the inability to style clickable types in iOS and Safari.
-  // 2. Change font properties to `inherit` in Safari.
-  ::-webkit-file-upload-button {
-    appearance: button; /* 1 */
-    font: inherit; /* 2 */
-  }
-
-  // Interactive.
-
-  // Add the correct display in Edge, IE 10+, and Firefox.
-  details {
-    display: block;
-  }
-
-  // Add the correct display in all browsers.
-  summary {
-    display: list-item;
-  }
-}

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

@@ -1,95 +0,0 @@
-// @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/packages/core/src/scss/base/_index.scss

@@ -1,6 +0,0 @@
-// @graupl/core base styles.
-
-@forward "button";
-@forward "form";
-@forward "link";
-@forward "table";

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

@@ -1,49 +0,0 @@
-// @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.
-//
-// 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.
-$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-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
-// 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.
-//
-// Secondary/tertiary buttons will use the same shade for their respective colours.
-$base-button-state-theme-map: (
-  color: 900,
-  border-color: 700,
-  hover-color: 100,
-  hover-background: 700,
-  hover-border-color: 700,
-  disabled-color: 200,
-  disabled-border-color: 200,
-);
-$custom-button-state-theme-map: () !default;
-$button-state-theme-map: map.merge(
-  $base-button-state-theme-map,
-  $custom-button-state-theme-map
-);

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

@@ -1,206 +0,0 @@
-// @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

@@ -1,104 +0,0 @@
-// @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;
-}