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

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};
             }
           }
         }

package/src/scss/base/button/_variables.scss

@@ -13,31 +13,31 @@
 
 // Button properties.
 $button-min-width: var(
-  --#{root-defaults.$prefix}-button-min-width,
+  --#{root-defaults.$prefix}button-min-width,
   #{root-defaults.$interactive-min-width}
 );
 $button-min-height: var(
-  --#{root-defaults.$prefix}-button-min-height,
+  --#{root-defaults.$prefix}button-min-height,
   #{root-defaults.$interactive-min-height}
 );
 $button-padding-x: var(
-  --#{root-defaults.$prefix}-button-padding-x,
+  --#{root-defaults.$prefix}button-padding-x,
   #{map.get(root-variables.$spacers, 5)}
 );
 $button-padding-y: var(
-  --#{root-defaults.$prefix}-button-padding-y,
+  --#{root-defaults.$prefix}button-padding-y,
   #{map.get(root-variables.$spacers, 3)}
 );
 $button-padding: var(
-  --#{root-defaults.$prefix}-button-padding,
+  --#{root-defaults.$prefix}button-padding,
   #{$button-padding-y} #{$button-padding-x}
 );
 $button-font-size: var(
-  --#{root-defaults.$prefix}-button-font-size,
+  --#{root-defaults.$prefix}button-font-size,
   #{map.get(typography.$font-sizes, base)}
 );
 $button-transition: var(
-  --#{root-defaults.$prefix}-button-transition,
+  --#{root-defaults.$prefix}button-transition,
   background #{map.get(root-variables.$transition-durations, fast)}
     #{root-variables.$transition-timing-function},
   color #{map.get(root-variables.$transition-durations, fast)}
@@ -46,7 +46,7 @@ $button-transition: var(
     #{root-variables.$transition-timing-function}
 );
 $button-transition-reduced-motion: var(
-  --#{root-defaults.$prefix}-button-transition-reduced-motion,
+  --#{root-defaults.$prefix}button-transition-reduced-motion,
   background #{map.get(root-variables.$transition-durations, none)}
     #{root-variables.$transition-timing-function},
   color #{map.get(root-variables.$transition-durations, none)}
@@ -55,122 +55,122 @@ $button-transition-reduced-motion: var(
 
 // Transform properties.
 $button-transform: var(
-  --#{root-defaults.$prefix}-button-transform,
+  --#{root-defaults.$prefix}button-transform,
   #{defaults.$button-transform}
 );
 $button-visited-transform: var(
-  --#{root-defaults.$prefix}-button-visited-transform,
+  --#{root-defaults.$prefix}button-visited-transform,
   #{defaults.$button-visited-transform}
 );
 $button-focus-transform: var(
-  --#{root-defaults.$prefix}-button-focus-transform,
+  --#{root-defaults.$prefix}button-focus-transform,
   #{defaults.$button-focus-transform}
 );
 $button-hover-transform: var(
-  --#{root-defaults.$prefix}-button-hover-transform,
+  --#{root-defaults.$prefix}button-hover-transform,
   #{defaults.$button-hover-transform}
 );
 $button-active-transform: var(
-  --#{root-defaults.$prefix}-button-active-transform,
+  --#{root-defaults.$prefix}button-active-transform,
   #{defaults.$button-active-transform}
 );
 $button-disabled-transform: var(
-  --#{root-defaults.$prefix}-button-disabled-transform,
+  --#{root-defaults.$prefix}button-disabled-transform,
   #{defaults.$button-disabled-transform}
 );
 
 // Background properties.
 $button-background: var(
-  --#{root-defaults.$prefix}-button-background,
+  --#{root-defaults.$prefix}button-background,
   #{color.$root-background}
 );
 $button-visited-background: var(
-  --#{root-defaults.$prefix}-button-visited-background,
+  --#{root-defaults.$prefix}button-visited-background,
   #{color.$root-background}
 );
 $button-focus-background: var(
-  --#{root-defaults.$prefix}-button-focus-background,
+  --#{root-defaults.$prefix}button-focus-background,
   #{color.$root-background}
 );
 $button-hover-background: var(
-  --#{root-defaults.$prefix}-button-hover-background,
+  --#{root-defaults.$prefix}button-hover-background,
   #{theme.get(primary, 900)}
 );
 $button-active-background: var(
-  --#{root-defaults.$prefix}-button-active-background,
+  --#{root-defaults.$prefix}button-active-background,
   #{theme.get(primary, 900)}
 );
 $button-disabled-background: var(
-  --#{root-defaults.$prefix}-button-disabled-background,
+  --#{root-defaults.$prefix}button-disabled-background,
   #{color.$root-background}
 );
 
 // Text properties.
 $button-color: var(
-  --#{root-defaults.$prefix}-button-color,
+  --#{root-defaults.$prefix}button-color,
   #{color.$root-color}
 );
 $button-visited-color: var(
-  --#{root-defaults.$prefix}-button-visited-color,
+  --#{root-defaults.$prefix}button-visited-color,
   #{color.$root-color}
 );
 $button-focus-color: var(
-  --#{root-defaults.$prefix}-button-focus-color,
+  --#{root-defaults.$prefix}button-focus-color,
   #{color.$root-color}
 );
 $button-hover-color: var(
-  --#{root-defaults.$prefix}-button-hover-color,
+  --#{root-defaults.$prefix}button-hover-color,
   #{theme.get(primary, 100)}
 );
 $button-active-color: var(
-  --#{root-defaults.$prefix}-button-active-color,
+  --#{root-defaults.$prefix}button-active-color,
   #{theme.get(primary, 100)}
 );
 $button-disabled-color: var(
-  --#{root-defaults.$prefix}-button-disabled-color,
+  --#{root-defaults.$prefix}button-disabled-color,
   #{theme.get(primary, 200)}
 );
 
 // Border properties.
 $button-border-width: var(
-  --#{root-defaults.$prefix}-button-border-width,
+  --#{root-defaults.$prefix}button-border-width,
   #{root-variables.$border-width}
 );
 $button-border-style: var(
-  --#{root-defaults.$prefix}-botton-border-style,
+  --#{root-defaults.$prefix}botton-border-style,
   #{root-variables.$border-style}
 );
 $button-border: var(
-  --#{root-defaults.$prefix}-button-border,
+  --#{root-defaults.$prefix}button-border,
   #{$button-border-width} #{$button-border-style}
 );
 $button-border-radius: var(
-  --#{root-defaults.$prefix}-button-border-radius,
+  --#{root-defaults.$prefix}button-border-radius,
   #{root-variables.$border-radius}
 );
 
 // Border colour properties.
 $button-border-color: var(
-  --#{root-defaults.$prefix}-button-border-color,
+  --#{root-defaults.$prefix}button-border-color,
   #{color.$root-color}
 );
 $button-visited-border-color: var(
-  --#{root-defaults.$prefix}-button-visited-border-color,
+  --#{root-defaults.$prefix}button-visited-border-color,
   #{color.$root-color}
 );
 $button-focus-border-color: var(
-  --#{root-defaults.$prefix}-button-focus-border-color,
+  --#{root-defaults.$prefix}button-focus-border-color,
   #{color.$root-color}
 );
 $button-hover-border-color: var(
-  --#{root-defaults.$prefix}-button-hover-border-color,
+  --#{root-defaults.$prefix}button-hover-border-color,
   #{color.$root-color}
 );
 $button-active-border-color: var(
-  --#{root-defaults.$prefix}-button-active-border-color,
+  --#{root-defaults.$prefix}button-active-border-color,
   #{color.$root-color}
 );
 $button-disabled-border-color: var(
-  --#{root-defaults.$prefix}-button-disabled-border-color,
+  --#{root-defaults.$prefix}button-disabled-border-color,
   #{theme.get(primary, 200)}
 );

package/src/scss/base/form/_variables.scss

@@ -12,145 +12,142 @@
 @use "sass:map";
 
 $input-padding-x: var(
-  --#{root-defaults.$prefix}-input-padding-x,
+  --#{root-defaults.$prefix}input-padding-x,
   #{map.get(root-variables.$spacers, 5)}
 );
 $input-padding-y: var(
-  --#{root-defaults.$prefix}-input-padding-y,
+  --#{root-defaults.$prefix}input-padding-y,
   #{map.get(root-variables.$spacers, 3)}
 );
 $input-padding: var(
-  --#{root-defaults.$prefix}-input-padding,
+  --#{root-defaults.$prefix}input-padding,
   #{$input-padding-y} #{$input-padding-x}
 );
 $input-font-size: var(
-  --#{root-defaults.$prefix}-input-font-size,
+  --#{root-defaults.$prefix}input-font-size,
   #{map.get(typography.$font-sizes, base)}
 );
 $label-font-size: var(
-  --#{root-defaults.$prefix}-label-font-size,
+  --#{root-defaults.$prefix}label-font-size,
   #{$input-font-size}
 );
 $fieldset-direction: var(
-  --#{root-defaults.$prefix}-fieldset-direction,
+  --#{root-defaults.$prefix}fieldset-direction,
   #{defaults.$fieldset-direction}
 );
 $fieldset-gap: var(
-  --#{root-defaults.$prefix}-fieldset-gap,
+  --#{root-defaults.$prefix}fieldset-gap,
   map.get(root-variables.$spacers, 2)
 );
 $fieldset-padding-x: var(
-  --#{root-defaults.$prefix}-fieldset-padding-x,
+  --#{root-defaults.$prefix}fieldset-padding-x,
   #{$input-padding-x}
 );
 $fieldset-padding-y: var(
-  --#{root-defaults.$prefix}-fieldset-padding-y,
+  --#{root-defaults.$prefix}fieldset-padding-y,
   #{$input-padding-y}
 );
 $fieldset-padding: var(
-  --#{root-defaults.$prefix}-fieldset-padding,
+  --#{root-defaults.$prefix}fieldset-padding,
   #{$fieldset-padding-y} #{$fieldset-padding-x}
 );
 $fieldset-font-size: var(
-  --#{root-defaults.$prefix}-fieldset-font-size,
+  --#{root-defaults.$prefix}fieldset-font-size,
   #{$input-font-size}
 );
 
 // Background properties.
 $input-background: var(
-  --#{root-defaults.$prefix}-input-background,
+  --#{root-defaults.$prefix}input-background,
   #{color.$root-background}
 );
 $fieldset-background: var(
-  --#{root-defaults.$prefix}-fieldset-background,
+  --#{root-defaults.$prefix}fieldset-background,
   #{$input-background}
 );
 
 // Text properties.
 $input-color: var(
-  --#{root-defaults.$prefix}-input-color,
+  --#{root-defaults.$prefix}input-color,
   #{theme.get(primary, 900)}
 );
 $input-placeholder-color: var(
-  --#{root-defaults.$prefix}-input-placeholder-color,
+  --#{root-defaults.$prefix}input-placeholder-color,
   #{theme.get(secondary, 600)}
 );
-$label-color: var(--#{root-defaults.$prefix}-label-color, #{$input-color});
-$fieldset-color: var(
-  --#{root-defaults.$prefix}-fieldset-color,
-  #{$input-color}
-);
+$label-color: var(--#{root-defaults.$prefix}label-color, #{$input-color});
+$fieldset-color: var(--#{root-defaults.$prefix}fieldset-color, #{$input-color});
 $input-disabled-color: var(
-  --#{root-defaults.$prefix}-input-disabled-color,
+  --#{root-defaults.$prefix}input-disabled-color,
   #{theme.get(secondary, 400)}
 );
 $input-disabled-placeholder-color: var(
-  --#{root-defaults.$prefix}-input-disabled-placeholder-color,
+  --#{root-defaults.$prefix}input-disabled-placeholder-color,
   #{$input-disabled-color}
 );
 $label-disabled-color: var(
-  --#{root-defaults.$prefix}-label-disabled-color,
+  --#{root-defaults.$prefix}label-disabled-color,
   #{$input-disabled-color}
 );
 $fieldset-disabled-color: var(
-  --#{root-defaults.$prefix}-fieldset-disabled-color,
+  --#{root-defaults.$prefix}fieldset-disabled-color,
   #{$input-disabled-color}
 );
 
 // Border properties.
 $input-border-width: var(
-  --#{root-defaults.$prefix}-input-border-width,
+  --#{root-defaults.$prefix}input-border-width,
   #{root-variables.$border-width}
 );
 $input-border-style: var(
-  --#{root-defaults.$prefix}-botton-border-style,
+  --#{root-defaults.$prefix}botton-border-style,
   #{root-variables.$border-style}
 );
 $input-border: var(
-  --#{root-defaults.$prefix}-input-border,
+  --#{root-defaults.$prefix}input-border,
   #{$input-border-width} #{$input-border-style}
 );
 $input-border-radius: var(
-  --#{root-defaults.$prefix}-input-border-radius,
+  --#{root-defaults.$prefix}input-border-radius,
   #{root-variables.$border-radius}
 );
 $fieldset-border-width: var(
-  --#{root-defaults.$prefix}-fieldset-border-width,
+  --#{root-defaults.$prefix}fieldset-border-width,
   #{$input-border-width}
 );
 $fieldset-border-style: var(
-  --#{root-defaults.$prefix}-fieldset-border-style,
+  --#{root-defaults.$prefix}fieldset-border-style,
   #{$input-border-style}
 );
 $fieldset-border: var(
-  --#{root-defaults.$prefix}-fieldset-border,
+  --#{root-defaults.$prefix}fieldset-border,
   #{$fieldset-border-width} #{$fieldset-border-style}
 );
 $fieldset-border-radius: var(
-  --#{root-defaults.$prefix}-fieldset-border-radius,
+  --#{root-defaults.$prefix}fieldset-border-radius,
   #{$input-border-radius}
 );
 
 // Border colour properties.
 $input-border-color: var(
-  --#{root-defaults.$prefix}-input-border-color,
+  --#{root-defaults.$prefix}input-border-color,
   #{theme.get(secondary, 700)}
 );
 $input-disabled-border-color: var(
-  --#{root-defaults.$prefix}-input-disabled-border-color,
+  --#{root-defaults.$prefix}input-disabled-border-color,
   #{theme.get(secondary, 200)}
 );
 $fieldset-border-color: var(
-  --#{root-defaults.$prefix}-fieldset-border-color,
+  --#{root-defaults.$prefix}fieldset-border-color,
   #{$input-border-color}
 );
 $fieldset-disabled-border-color: var(
-  --#{root-defaults.$prefix}-fieldset-disabled-border-color,
+  --#{root-defaults.$prefix}fieldset-disabled-border-color,
   #{$input-disabled-border-color}
 );
 
 // Accent color properties.
 $input-accent-color: var(
-  --#{root-defaults.$prefix}-input-accent-color,
+  --#{root-defaults.$prefix}input-accent-color,
   #{theme.get(primary, 700)}
 );