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

package/docs/state.md

@@ -14,54 +14,54 @@ Variables
 The focus width property:
 
 ```scss
---#{root-defaults.$prefix}-focus-width
+--#{root-defaults.$prefix}focus-width
 
 ```
 
 The focus outline color property:
 
 ```scss
---#{root-defaults.$prefix}-focus-outline-color
+--#{root-defaults.$prefix}focus-outline-color
 
 ```
 
 The focus outline width property:
 
 ```scss
---#{root-defaults.$prefix}-focus-outline-width
+--#{root-defaults.$prefix}focus-outline-width
 
 ```
 
 The focus outline style property:
 
 ```scss
---#{root-defaults.$prefix}-focus-outline-style
+--#{root-defaults.$prefix}focus-outline-style
 
 ```
 
 The focus outline offset property:
 
 ```scss
---#{root-defaults.$prefix}-focus-outline-offset
+--#{root-defaults.$prefix}focus-outline-offset
 
 ```
 
 The focus box shadow color property:
 
 ```scss
---#{root-defaults.$prefix}-focus-box-shadow-color
+--#{root-defaults.$prefix}focus-box-shadow-color
 
 ```
 
 The focus box shadow style property:
 
 ```scss
---#{root-defaults.$prefix}-focus-box-shadow-style
+--#{root-defaults.$prefix}focus-box-shadow-style
 
 ```
 
 The focus box shadow property:
 
 ```scss
---#{root-defaults.$prefix}-focus-box-shadow
+--#{root-defaults.$prefix}focus-box-shadow
 ```

package/docs/theme.md

@@ -65,19 +65,19 @@ Variables
 
 ```sass
 // A custom variable is defined for each color and shade.
---#{root-defaults.$prefix}-#{$color}--#{$shade}
+--#{root-defaults.$prefix}#{$color}--#{$shade}
 
 // There are three modes for the theme.
 // Active is what is currently being used.
---#{root-defaults.$prefix}-theme-active--#{$color}--#{$shade}
+--#{root-defaults.$prefix}theme-active--#{$color}--#{$shade}
 // Theme dark is the color used when dark mode is active.
---#{root-defaults.$prefix}-theme-dark--#{$color}--#{$shade}
+--#{root-defaults.$prefix}theme-dark--#{$color}--#{$shade}
 // Light theme is the color active whne light mode is active
---#{root-defaults.$prefix}-theme-light--#{$color}--#{$shade}
+--#{root-defaults.$prefix}theme-light--#{$color}--#{$shade}
 
 // Globaly defined root color and root background.
---#{root-defaults.$prefix}-root-color
---#{root-defaults.$prefix}-root-background
+--#{root-defaults.$prefix}root-color
+--#{root-defaults.$prefix}root-background
 ```
 
 ## Typography
@@ -136,123 +136,123 @@ Variables
 The font properties:
 
 ```scss
---#{root-defaults.$prefix}-font-size-base
---#{root-defaults.$prefix}-line-height
+--#{root-defaults.$prefix}font-size-base
+--#{root-defaults.$prefix}line-height
 
 ```
 
 The font size properties:
 
 ```scss
---#{root-defaults.$prefix}-font-#{$key}
+--#{root-defaults.$prefix}font-#{$key}
 
 ```
 
 The font weight properties:
 
 ```scss
---#{root-defaults.$prefix}-font-weight-#{$key}
---#{root-defaults.$prefix}-font-weight-bold
+--#{root-defaults.$prefix}font-weight-#{$key}
+--#{root-defaults.$prefix}font-weight-bold
 
 ```
 
 The root properties:
 
 ```scss
---#{root-defaults.$prefix}-root-font-family
---#{root-defaults.$prefix}-root-font-size
+--#{root-defaults.$prefix}root-font-family
+--#{root-defaults.$prefix}root-font-size
 
 ```
 
 The typography properties:
 
 ```scss
---#{root-defaults.$prefix}-body-font-size
---#{root-defaults.$prefix}-body-line-height
---#{root-defaults.$prefix}-body-font-weight
---#{root-defaults.$prefix}-paragraph-font-size
---#{root-defaults.$prefix}-paragraph-line-height
---#{root-defaults.$prefix}-paragraph-margin
---#{root-defaults.$prefix}-paragraph-font-weight
---#{root-defaults.$prefix}-small-font-size
---#{root-defaults.$prefix}-small-line-height
---#{root-defaults.$prefix}-small-margin
---#{root-defaults.$prefix}-small-font-weight
+--#{root-defaults.$prefix}body-font-size
+--#{root-defaults.$prefix}body-line-height
+--#{root-defaults.$prefix}body-font-weight
+--#{root-defaults.$prefix}paragraph-font-size
+--#{root-defaults.$prefix}paragraph-line-height
+--#{root-defaults.$prefix}paragraph-margin
+--#{root-defaults.$prefix}paragraph-font-weight
+--#{root-defaults.$prefix}small-font-size
+--#{root-defaults.$prefix}small-line-height
+--#{root-defaults.$prefix}small-margin
+--#{root-defaults.$prefix}small-font-weight
 
 ```
 
 The heading properties:
 
 ```scss
---#{root-defaults.$prefix}-heading-font-family
---#{root-defaults.$prefix}-heading-line-height
---#{root-defaults.$prefix}-heading-margin
---#{root-defaults.$prefix}-heading-font-weight
+--#{root-defaults.$prefix}heading-font-family
+--#{root-defaults.$prefix}heading-line-height
+--#{root-defaults.$prefix}heading-margin
+--#{root-defaults.$prefix}heading-font-weight
 
 ```
 
 The H1 properties:
 
 ```scss
---#{root-defaults.$prefix}-h1-font-size
---#{root-defaults.$prefix}-h1-line-height
---#{root-defaults.$prefix}-h1-margin
---#{root-defaults.$prefix}-h1-font-family
---#{root-defaults.$prefix}-h1-font-weight
+--#{root-defaults.$prefix}h1-font-size
+--#{root-defaults.$prefix}h1-line-height
+--#{root-defaults.$prefix}h1-margin
+--#{root-defaults.$prefix}h1-font-family
+--#{root-defaults.$prefix}h1-font-weight
 
 ```
 
 The H2 properties:
 
 ```scss
---#{root-defaults.$prefix}-h2-font-size
---#{root-defaults.$prefix}-h2-line-height
---#{root-defaults.$prefix}-h2-margin
---#{root-defaults.$prefix}-h2-font-family
---#{root-defaults.$prefix}-h2-font-weight
+--#{root-defaults.$prefix}h2-font-size
+--#{root-defaults.$prefix}h2-line-height
+--#{root-defaults.$prefix}h2-margin
+--#{root-defaults.$prefix}h2-font-family
+--#{root-defaults.$prefix}h2-font-weight
 
 ```
 
 The H3 properties:
 
 ```scss
---#{root-defaults.$prefix}-h3-font-size
---#{root-defaults.$prefix}-h3-line-height
---#{root-defaults.$prefix}-h3-margin
---#{root-defaults.$prefix}-h3-font-family
---#{root-defaults.$prefix}-h3-font-weight
+--#{root-defaults.$prefix}h3-font-size
+--#{root-defaults.$prefix}h3-line-height
+--#{root-defaults.$prefix}h3-margin
+--#{root-defaults.$prefix}h3-font-family
+--#{root-defaults.$prefix}h3-font-weight
 
 ```
 
 The H4 properties:
 
 ```scss
---#{root-defaults.$prefix}-h4-font-size
---#{root-defaults.$prefix}-h4-line-height
---#{root-defaults.$prefix}-h4-margin
---#{root-defaults.$prefix}-h4-font-family
---#{root-defaults.$prefix}-h4-font-weight
+--#{root-defaults.$prefix}h4-font-size
+--#{root-defaults.$prefix}h4-line-height
+--#{root-defaults.$prefix}h4-margin
+--#{root-defaults.$prefix}h4-font-family
+--#{root-defaults.$prefix}h4-font-weight
 
 ```
 
 The H5 properties:
 
 ```scss
---#{root-defaults.$prefix}-h5-font-size
---#{root-defaults.$prefix}-h5-line-height
---#{root-defaults.$prefix}-h5-margin
---#{root-defaults.$prefix}-h5-font-family
---#{root-defaults.$prefix}-h5-font-weight
+--#{root-defaults.$prefix}h5-font-size
+--#{root-defaults.$prefix}h5-line-height
+--#{root-defaults.$prefix}h5-margin
+--#{root-defaults.$prefix}h5-font-family
+--#{root-defaults.$prefix}h5-font-weight
 
 ```
 
 The H6 properties:
 
 ```scss
---#{root-defaults.$prefix}-h6-font-size
---#{root-defaults.$prefix}-h6-line-height
---#{root-defaults.$prefix}-h6-margin
---#{root-defaults.$prefix}-h6-font-family
---#{root-defaults.$prefix}-h6-font-weight
+--#{root-defaults.$prefix}h6-font-size
+--#{root-defaults.$prefix}h6-line-height
+--#{root-defaults.$prefix}h6-margin
+--#{root-defaults.$prefix}h6-font-family
+--#{root-defaults.$prefix}h6-font-weight
 
 ```

package/docs/utilities.md

@@ -240,7 +240,7 @@ List style position properties
 
 Variables
 
-`$ratio: var(*--#{root-defaults.$prefix}-ratio*);`
+`$ratio: var(*--#{root-defaults.$prefix}ratio*);`
 
 Contains element add this class to
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@graupl/graupl",
-  "version": "1.0.0-beta.0",
+  "version": "1.0.0-beta.1",
   "description": "A modular and modern CSS framework.",
   "type": "module",
   "exports": {

package/src/scss/_defaults.scss

@@ -9,7 +9,7 @@
 @use "sass:map";
 
 // Prefix for custom properties and other naming conventions.
-$prefix: "graupl" !default;
+$prefix: "graupl-" !default;
 
 // Settings.
 $use-important: true !default;

package/src/scss/_variables.scss

@@ -8,17 +8,17 @@
 
 // Layout properties.
 $content-max-width: var(
-  --#{defaults.$prefix}-content-max-width,
+  --#{defaults.$prefix}content-max-width,
   defaults.$content-max-width
 );
 
 // Spacing properties.
-$spacer: var(--#{defaults.$prefix}-spacer, defaults.$spacer);
+$spacer: var(--#{defaults.$prefix}spacer, defaults.$spacer);
 $spacers: ();
 
 @each $key, $value in defaults.$spacer-multipliers {
   $space: var(
-    --#{defaults.$prefix}-spacer-#{$key},
+    --#{defaults.$prefix}spacer-#{$key},
     calc(#{$value} * #{$spacer})
   );
   $spacers: map.set($spacers, $key, $space);
@@ -26,28 +26,28 @@ $spacers: ();
 
 // Border properties.
 $border-radius: var(
-  --#{defaults.$prefix}-border-radius,
+  --#{defaults.$prefix}border-radius,
   defaults.$border-radius
 );
-$border-width: var(--#{defaults.$prefix}-border-width, defaults.$border-width);
-$border-style: var(--#{defaults.$prefix}-border-style, defaults.$border-style);
+$border-width: var(--#{defaults.$prefix}border-width, defaults.$border-width);
+$border-style: var(--#{defaults.$prefix}border-style, defaults.$border-style);
 
 // Transition properties.
 $transition-durations: (
   fast: var(
-      --#{defaults.$prefix}-transition-duration-fast,
+      --#{defaults.$prefix}transition-duration-fast,
       map.get(defaults.$transition-durations, fast)
     ),
   default: var(
-      --#{defaults.$prefix}-transition-duration-default,
+      --#{defaults.$prefix}transition-duration-default,
       map.get(defaults.$transition-durations, default)
     ),
   slow: var(
-      --#{defaults.$prefix}-transition-duration-slow,
+      --#{defaults.$prefix}transition-duration-slow,
       map.get(defaults.$transition-durations, slow)
     ),
 );
 $transition-timing-function: var(
-  --#{defaults.$prefix}-transition-timing-function,
+  --#{defaults.$prefix}transition-timing-function,
   defaults.$transition-timing-function
 );

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

@@ -12,20 +12,20 @@
   @include apply-button;
 
   &#{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;
+    --#{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;
@@ -35,48 +35,48 @@
 
 @include layer(base) {
   #{defaults.$button-selector}#{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};
+    --#{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};
   }
 
   #{link-defaults.$link-selector} {
     &#{defaults.$button-selector}:not(#{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;
+      --#{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;
     }
   }
 }
@@ -84,24 +84,24 @@
 @include layer(theme) {
   #{link-defaults.$link-selector} {
     &#{defaults.$button-selector}:not(#{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};
+      --#{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/src/scss/base/button/_mixins.scss

@@ -58,25 +58,25 @@
 
     @each $selector in map.get(root-defaults.$state-selectors, visited) {
       &#{$selector} {
-        --#{root-defaults.$prefix}-button-transform: #{$visited-transform};
+        --#{root-defaults.$prefix}button-transform: #{$visited-transform};
       }
     }
 
     @each $selector in map.get(root-defaults.$state-selectors, focus) {
       &#{$selector} {
-        --#{root-defaults.$prefix}-button-transform: #{$focus-transform};
+        --#{root-defaults.$prefix}button-transform: #{$focus-transform};
       }
     }
 
     @each $selector in map.get(root-defaults.$state-selectors, hover) {
       &#{$selector} {
-        --#{root-defaults.$prefix}-button-transform: #{$hover-transform};
+        --#{root-defaults.$prefix}button-transform: #{$hover-transform};
       }
     }
 
     @each $selector in map.get(root-defaults.$state-selectors, active) {
       &#{$selector} {
-        --#{root-defaults.$prefix}-button-transform: #{$active-transform};
+        --#{root-defaults.$prefix}button-transform: #{$active-transform};
       }
     }
 
@@ -86,7 +86,7 @@
           @each $selector in $selectors {
             &,
             &#{$selector} {
-              --#{root-defaults.$prefix}-button-transform: #{$disabled-transform};
+              --#{root-defaults.$prefix}button-transform: #{$disabled-transform};
 
               cursor: not-allowed;
             }
@@ -96,7 +96,7 @@
     }
 
     @include animation.off {
-      --#{root-defaults.$prefix}-button-transition: #{$button-transition-reduced-motion};
+      --#{root-defaults.$prefix}button-transition: #{$button-transition-reduced-motion};
     }
   }
 
@@ -108,7 +108,7 @@
     @each $color, $map in map.get(color.$themes, active) {
       &#{defaults.$button-theme-selector-prefix}#{$color} {
         @each $prop, $shade in defaults.$button-state-theme-map {
-          --#{root-defaults.$prefix}-button-#{$prop}: #{theme.get(
+          --#{root-defaults.$prefix}button-#{$prop}: #{theme.get(
               $color,
               $shade
             )};
@@ -118,33 +118,33 @@
 
     @each $selector in map.get(root-defaults.$state-selectors, visited) {
       &#{$selector} {
-        --#{root-defaults.$prefix}-button-border-color: #{$visited-border-color};
-        --#{root-defaults.$prefix}-button-background: #{$visited-background};
-        --#{root-defaults.$prefix}-button-color: #{$visited-color};
+        --#{root-defaults.$prefix}button-border-color: #{$visited-border-color};
+        --#{root-defaults.$prefix}button-background: #{$visited-background};
+        --#{root-defaults.$prefix}button-color: #{$visited-color};
       }
     }
 
     @each $selector in map.get(root-defaults.$state-selectors, focus) {
       &#{$selector} {
-        --#{root-defaults.$prefix}-button-border-color: #{$focus-border-color};
-        --#{root-defaults.$prefix}-button-background: #{$focus-background};
-        --#{root-defaults.$prefix}-button-color: #{$focus-color};
+        --#{root-defaults.$prefix}button-border-color: #{$focus-border-color};
+        --#{root-defaults.$prefix}button-background: #{$focus-background};
+        --#{root-defaults.$prefix}button-color: #{$focus-color};
       }
     }
 
     @each $selector in map.get(root-defaults.$state-selectors, hover) {
       &#{$selector} {
-        --#{root-defaults.$prefix}-button-border-color: #{$hover-border-color};
-        --#{root-defaults.$prefix}-button-background: #{$hover-background};
-        --#{root-defaults.$prefix}-button-color: #{$hover-color};
+        --#{root-defaults.$prefix}button-border-color: #{$hover-border-color};
+        --#{root-defaults.$prefix}button-background: #{$hover-background};
+        --#{root-defaults.$prefix}button-color: #{$hover-color};
       }
     }
 
     @each $selector in map.get(root-defaults.$state-selectors, active) {
       &#{$selector} {
-        --#{root-defaults.$prefix}-button-border-color: #{$active-border-color};
-        --#{root-defaults.$prefix}-button-background: #{$active-background};
-        --#{root-defaults.$prefix}-button-color: #{$active-color};
+        --#{root-defaults.$prefix}button-border-color: #{$active-border-color};
+        --#{root-defaults.$prefix}button-background: #{$active-background};
+        --#{root-defaults.$prefix}button-color: #{$active-color};
       }
     }
 
@@ -154,9 +154,9 @@
           @each $selector in $selectors {
             &,
             &#{$selector} {
-              --#{root-defaults.$prefix}-button-border-color: #{$disabled-border-color};
-              --#{root-defaults.$prefix}-button-background: #{$disabled-background};
-              --#{root-defaults.$prefix}-button-color: #{$disabled-color};
+              --#{root-defaults.$prefix}button-border-color: #{$disabled-border-color};
+              --#{root-defaults.$prefix}button-background: #{$disabled-background};
+              --#{root-defaults.$prefix}button-color: #{$disabled-color};
             }
           }
         }