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

package/src/scss/component/accordion/_variables.scss

@@ -14,116 +14,116 @@
 
 // Accordion properties.
 $accordion-padding-x: var(
-  --#{root-defaults.$prefix}-accordion-padding-x,
+  --#{root-defaults.$prefix}accordion-padding-x,
   #{map.get(root-variables.$spacers, 0)}
 );
 $accordion-padding-y: var(
-  --#{root-defaults.$prefix}-accordion-padding-y,
+  --#{root-defaults.$prefix}accordion-padding-y,
   #{map.get(root-variables.$spacers, 0)}
 );
 $accordion-padding: var(
-  --#{root-defaults.$prefix}-accordion-padding,
+  --#{root-defaults.$prefix}accordion-padding,
   #{$accordion-padding-y} #{$accordion-padding-x}
 );
 
 // Accordion gap properties.
 $accordion-column-gap: var(
-  --#{root-defaults.$prefix}-accordion-column-gap,
+  --#{root-defaults.$prefix}accordion-column-gap,
   #{map.get(root-variables.$spacers, 0)}
 );
 $accordion-row-gap: var(
-  --#{root-defaults.$prefix}-accordion-row-gap,
+  --#{root-defaults.$prefix}accordion-row-gap,
   #{map.get(root-variables.$spacers, 0)}
 );
 $accordion-gap: var(
-  --#{root-defaults.$prefix}-accordion-gap,
+  --#{root-defaults.$prefix}accordion-gap,
   #{$accordion-column-gap} #{$accordion-row-gap}
 );
 
 // Accordion color properties.
 $accordion-color: var(
-  --#{root-defaults.$prefix}-accordion-color,
+  --#{root-defaults.$prefix}accordion-color,
   #{color.$root-color}
 );
 $accordion-background: var(
-  --#{root-defaults.$prefix}-accordion-background,
+  --#{root-defaults.$prefix}accordion-background,
   #{color.$root-background}
 );
 
 // Accordion item border properties.
 $accordion-item-border-color: var(
-  --#{root-defaults.$prefix}-accordion-item-border-color,
+  --#{root-defaults.$prefix}accordion-item-border-color,
   #{$accordion-color}
 );
 $accordion-item-top-left-border-radius: var(
-  --#{root-defaults.$prefix}-accordion-item-top-left-border-radius,
+  --#{root-defaults.$prefix}accordion-item-top-left-border-radius,
   #{root-variables.$border-radius}
 );
 $accordion-item-top-right-border-radius: var(
-  --#{root-defaults.$prefix}-accordion-item-top-right-border-radius,
+  --#{root-defaults.$prefix}accordion-item-top-right-border-radius,
   #{root-variables.$border-radius}
 );
 $accordion-item-bottom-left-border-radius: var(
-  --#{root-defaults.$prefix}-accordion-item-bottom-left-border-radius,
+  --#{root-defaults.$prefix}accordion-item-bottom-left-border-radius,
   #{root-variables.$border-radius}
 );
 $accordion-item-bottom-right-border-radius: var(
-  --#{root-defaults.$prefix}-accordion-item-bottom-right-border-radius,
+  --#{root-defaults.$prefix}accordion-item-bottom-right-border-radius,
   #{root-variables.$border-radius}
 );
 $accordion-item-border-radius: var(
-  --#{root-defaults.$prefix}-accordion-item-border-radius,
+  --#{root-defaults.$prefix}accordion-item-border-radius,
   #{$accordion-item-top-left-border-radius}
     #{$accordion-item-top-right-border-radius}
     #{$accordion-item-bottom-right-border-radius}
     #{$accordion-item-bottom-left-border-radius}
 );
 $accordion-item-border-style: var(
-  --#{root-defaults.$prefix}-accordion-item-border-style,
+  --#{root-defaults.$prefix}accordion-item-border-style,
   #{root-variables.$border-style}
 );
 $accordion-item-border-width: var(
-  --#{root-defaults.$prefix}-accordion-item-border-width,
+  --#{root-defaults.$prefix}accordion-item-border-width,
   #{root-variables.$border-width}
 );
 $accordion-item-border: var(
-  --#{root-defaults.$prefix}-accordion-item-border,
+  --#{root-defaults.$prefix}accordion-item-border,
   #{$accordion-item-border-width} #{$accordion-item-border-style}
 );
 
 // Accordion item properties.
 $accordion-item-toggle-padding: var(
-  --#{root-defaults.$prefix}-accordion-item-toggle-padding,
+  --#{root-defaults.$prefix}accordion-item-toggle-padding,
   #{button.$button-padding}
 );
 
 // Transform properties.
 $accordion-item-toggle-transform: var(
-  --#{root-defaults.$prefix}-accordion-item-toggle-transform,
+  --#{root-defaults.$prefix}accordion-item-toggle-transform,
   #{defaults.$accordion-item-toggle-transform}
 );
 $accordion-item-toggle-visited-transform: var(
-  --#{root-defaults.$prefix}-accordion-item-toggle-visited-transform,
+  --#{root-defaults.$prefix}accordion-item-toggle-visited-transform,
   #{defaults.$accordion-item-toggle-visited-transform}
 );
 $accordion-item-toggle-focus-transform: var(
-  --#{root-defaults.$prefix}-accordion-item-toggle-focus-transform,
+  --#{root-defaults.$prefix}accordion-item-toggle-focus-transform,
   #{defaults.$accordion-item-toggle-focus-transform}
 );
 $accordion-item-toggle-hover-transform: var(
-  --#{root-defaults.$prefix}-accordion-item-toggle-hover-transform,
+  --#{root-defaults.$prefix}accordion-item-toggle-hover-transform,
   #{defaults.$accordion-item-toggle-hover-transform}
 );
 $accordion-item-toggle-active-transform: var(
-  --#{root-defaults.$prefix}-accordion-item-toggle-active-transform,
+  --#{root-defaults.$prefix}accordion-item-toggle-active-transform,
   #{defaults.$accordion-item-toggle-active-transform}
 );
 $accordion-item-toggle-disabled-transform: var(
-  --#{root-defaults.$prefix}-accordion-item-toggle-disabled-transform,
+  --#{root-defaults.$prefix}accordion-item-toggle-disabled-transform,
   #{defaults.$accordion-item-toggle-disabled-transform}
 );
 $accordion-item-toggle-transition: var(
-  --#{root-defaults.$prefix}-accordion-item-toggle-transition,
+  --#{root-defaults.$prefix}accordion-item-toggle-transition,
   background #{map.get(root-variables.$transition-durations, fast)}
     #{root-variables.$transition-timing-function},
   color #{map.get(root-variables.$transition-durations, fast)}
@@ -132,7 +132,7 @@ $accordion-item-toggle-transition: var(
     #{root-variables.$transition-timing-function}
 );
 $accordion-item-toggle-transition-reduced-motion: var(
-  --#{root-defaults.$prefix}-accordion-item-toggle-transition-reduced-motion,
+  --#{root-defaults.$prefix}accordion-item-toggle-transition-reduced-motion,
   background #{map.get(root-variables.$transition-durations, none)}
     #{root-variables.$transition-timing-function},
   color #{map.get(root-variables.$transition-durations, none)}
@@ -141,176 +141,176 @@ $accordion-item-toggle-transition-reduced-motion: var(
 
 // Accordion item header properties.
 $accordion-item-header-padding-x: var(
-  --#{root-defaults.$prefix}-accordion-item-header-padding-x,
+  --#{root-defaults.$prefix}accordion-item-header-padding-x,
   #{map.get(root-variables.$spacers, 0)}
 );
 $accordion-item-header-padding-y: var(
-  --#{root-defaults.$prefix}-accordion-item-header-padding-y,
+  --#{root-defaults.$prefix}accordion-item-header-padding-y,
   #{map.get(root-variables.$spacers, 0)}
 );
 $accordion-item-header-padding: var(
-  --#{root-defaults.$prefix}-accordion-item-header-padding,
+  --#{root-defaults.$prefix}accordion-item-header-padding,
   #{$accordion-item-header-padding-y} #{$accordion-item-header-padding-x}
 );
 $accordion-item-header-margin: var(
-  --#{root-defaults.$prefix}-accordion-item-header-margin,
+  --#{root-defaults.$prefix}accordion-item-header-margin,
   calc(-1 * #{$accordion-item-border-width})
 );
 
 // Accordion item title properties.
 $accordion-item-title-padding-x: var(
-  --#{root-defaults.$prefix}-accordion-item-title-padding-x,
+  --#{root-defaults.$prefix}accordion-item-title-padding-x,
   #{map.get(root-variables.$spacers, 0)}
 );
 $accordion-item-title-padding-y: var(
-  --#{root-defaults.$prefix}-accordion-item-title-padding-y,
+  --#{root-defaults.$prefix}accordion-item-title-padding-y,
   #{map.get(root-variables.$spacers, 0)}
 );
 $accordion-item-title-padding: var(
-  --#{root-defaults.$prefix}-accordion-item-title-padding,
+  --#{root-defaults.$prefix}accordion-item-title-padding,
   #{$accordion-item-title-padding-y} #{$accordion-item-title-padding-x}
 );
 $accordion-item-title-margin-x: var(
-  --#{root-defaults.$prefix}-accordion-item-title-margin-x,
+  --#{root-defaults.$prefix}accordion-item-title-margin-x,
   #{map.get(root-variables.$spacers, 0)}
 );
 $accordion-item-title-margin-y: var(
-  --#{root-defaults.$prefix}-accordion-item-title-margin-y,
+  --#{root-defaults.$prefix}accordion-item-title-margin-y,
   #{map.get(root-variables.$spacers, 0)}
 );
 $accordion-item-title-margin: var(
-  --#{root-defaults.$prefix}-accordion-item-title-margin,
+  --#{root-defaults.$prefix}accordion-item-title-margin,
   #{$accordion-item-title-margin-y} #{$accordion-item-title-margin-x}
 );
 $accordion-title-color: var(
-  --#{root-defaults.$prefix}-accordion-title-color,
+  --#{root-defaults.$prefix}accordion-title-color,
   #{$accordion-color}
 );
 $accordion-title-font-size: var(
-  --#{root-defaults.$prefix}-accordion-title-font-size,
+  --#{root-defaults.$prefix}accordion-title-font-size,
   #{typography.$h5-font-size}
 );
 $accordion-title-font-weight: var(
-  --#{root-defaults.$prefix}-accordion-title-font-weight,
+  --#{root-defaults.$prefix}accordion-title-font-weight,
   #{typography.$h5-font-weight}
 );
 $accordion-title-font-family: var(
-  --#{root-defaults.$prefix}-accordion-title-font-family,
+  --#{root-defaults.$prefix}accordion-title-font-family,
   #{typography.$h5-font-family}
 );
 $accordion-title-line-height: var(
-  --#{root-defaults.$prefix}-accordion-title-line-height,
+  --#{root-defaults.$prefix}accordion-title-line-height,
   #{typography.$h5-line-height}
 );
 
 // Accordion item content properties.
 $accordion-item-content-padding-x: var(
-  --#{root-defaults.$prefix}-accordion-item-content-padding-x,
+  --#{root-defaults.$prefix}accordion-item-content-padding-x,
   #{map.get(root-variables.$spacers, 5)}
 );
 $accordion-item-content-padding-y: var(
-  --#{root-defaults.$prefix}-accordion-item-content-padding-y,
+  --#{root-defaults.$prefix}accordion-item-content-padding-y,
   #{map.get(root-variables.$spacers, 5)}
 );
 $accordion-item-content-padding: var(
-  --#{root-defaults.$prefix}-accordion-item-content-padding,
+  --#{root-defaults.$prefix}accordion-item-content-padding,
   #{$accordion-item-content-padding-y} #{$accordion-item-content-padding-x}
 );
 $accordion-item-content-column-gap: var(
-  --#{root-defaults.$prefix}-accordion-item-content-column-gap,
+  --#{root-defaults.$prefix}accordion-item-content-column-gap,
   #{map.get(root-variables.$spacers, 3)}
 );
 $accordion-item-content-row-gap: var(
-  --#{root-defaults.$prefix}-accordion-item-content-row-gap,
+  --#{root-defaults.$prefix}accordion-item-content-row-gap,
   #{map.get(root-variables.$spacers, 0)}
 );
 $accordion-item-content-gap: var(
-  --#{root-defaults.$prefix}-accordion-item-content-gap,
+  --#{root-defaults.$prefix}accordion-item-content-gap,
   #{$accordion-item-content-column-gap} #{$accordion-item-content-row-gap}
 );
 
 // Accordion item body properties.
 $accordion-item-body-padding-x: var(
-  --#{root-defaults.$prefix}-accordion-item-body-padding-x,
+  --#{root-defaults.$prefix}accordion-item-body-padding-x,
   #{map.get(root-variables.$spacers, 0)}
 );
 $accordion-item-body-padding-y: var(
-  --#{root-defaults.$prefix}-accordion-item-body-padding-y,
+  --#{root-defaults.$prefix}accordion-item-body-padding-y,
   #{map.get(root-variables.$spacers, 0)}
 );
 $accordion-item-body-padding: var(
-  --#{root-defaults.$prefix}-accordion-item-body-padding,
+  --#{root-defaults.$prefix}accordion-item-body-padding,
   #{$accordion-item-body-padding-y} #{$accordion-item-body-padding-x}
 );
 
 // Accordion item footer properties.
 $accordion-item-footer-padding-x: var(
-  --#{root-defaults.$prefix}-accordion-item-footer-padding-x,
+  --#{root-defaults.$prefix}accordion-item-footer-padding-x,
   #{map.get(root-variables.$spacers, 0)}
 );
 $accordion-item-footer-padding-y: var(
-  --#{root-defaults.$prefix}-accordion-item-footer-padding-y,
+  --#{root-defaults.$prefix}accordion-item-footer-padding-y,
   #{map.get(root-variables.$spacers, 0)}
 );
 $accordion-item-footer-padding: var(
-  --#{root-defaults.$prefix}-accordion-item-footer-padding,
+  --#{root-defaults.$prefix}accordion-item-footer-padding,
   #{$accordion-item-footer-padding-y} #{$accordion-item-footer-padding-x}
 );
 
 // Accordion item transition properties.
 $accordion-transition-duration: var(
-  --#{root-defaults.$prefix}-accordion-transition-duration,
+  --#{root-defaults.$prefix}accordion-transition-duration,
   #{map.get(root-variables.$transition-durations, slow)}
 );
 $accordion-item-toggle-transition-duration: var(
-  --#{root-defaults.$prefix}-accordion-item-toggle-transition-duration,
+  --#{root-defaults.$prefix}accordion-item-toggle-transition-duration,
   #{$accordion-transition-duration}
 );
 $accordion-transition: var(
-  --#{root-defaults.$prefix}-accordion-transition,
+  --#{root-defaults.$prefix}accordion-transition,
   height #{map.get(root-variables.$transition-durations, slow)}
     #{root-variables.$transition-timing-function}
 );
 $accordion-transition-reduced-motion: var(
-  --#{root-defaults.$prefix}-accordion-transition-reduced-motion,
+  --#{root-defaults.$prefix}accordion-transition-reduced-motion,
   none
 );
 $accordion-item-toggle-pseudo-transition: var(
-  --#{root-defaults.$prefix}-accordion-transition,
+  --#{root-defaults.$prefix}accordion-transition,
   transform #{map.get(root-variables.$transition-durations, slow)}
     #{root-variables.$transition-timing-function}
 );
 $accordion-item-toggle-pseudo-transition-reduced-motion: var(
-  --#{root-defaults.$prefix}-accordion-transition-reduced-motion,
+  --#{root-defaults.$prefix}accordion-transition-reduced-motion,
   none
 );
 $accordion-item-content-transition: var(
-  --#{root-defaults.$prefix}-accordion-transition,
+  --#{root-defaults.$prefix}accordion-transition,
   opacity #{map.get(root-variables.$transition-durations, slow)}
     #{root-variables.$transition-timing-function} transform
     #{map.get(root-variables.$transition-durations, slow)}
     #{root-variables.$transition-timing-function}
 );
 $accordion-item-content-transition-reduced-motion: var(
-  --#{root-defaults.$prefix}-accordion-transition-reduced-motion,
+  --#{root-defaults.$prefix}accordion-transition-reduced-motion,
   opacity #{map.get(root-variables.$transition-durations, slow)}
     #{root-variables.$transition-timing-function}
 );
 
 // Accordion item transform properties.
 $accordion-item-content-transform: var(
-  --#{root-defaults.$prefix}-accordion-item-content-transform,
+  --#{root-defaults.$prefix}accordion-item-content-transform,
   #{defaults.$accordion-item-content-transform}
 );
 $accordion-item-content-open-transform: var(
-  --#{root-defaults.$prefix}-accordion-item-content-open-transform,
+  --#{root-defaults.$prefix}accordion-item-content-open-transform,
   #{defaults.$accordion-item-content-open-transform}
 );
 $accordion-item-toggle-pseudo-transform: var(
-  --#{root-defaults.$prefix}-accordion-item-toggle-pseudo-transform,
+  --#{root-defaults.$prefix}accordion-item-toggle-pseudo-transform,
   #{defaults.$accordion-item-toggle-pseudo-transform}
 );
 $accordion-item-toggle-pseudo-open-transform: var(
-  --#{root-defaults.$prefix}-accordion-item-toggle-pseudo-open-transform,
+  --#{root-defaults.$prefix}accordion-item-toggle-pseudo-open-transform,
   #{defaults.$accordion-item-toggle-pseudo-open-transform}
 );

package/src/scss/component/alert/_index.scss

@@ -12,7 +12,7 @@
 
 #{defaults.$alert-selector} {
   @include layer(component) {
-    --#{root-defaults.$prefix}-button-border: 0;
+    --#{root-defaults.$prefix}button-border: 0;
 
     display: grid;
     grid-template-columns: [content-start] 1fr [content-end dismiss-start] auto [dismiss-end];
@@ -38,20 +38,20 @@
 
     @include animation.off {
       #{defaults.$alert-selector} {
-        --#{root-defaults.$prefix}-alert-transition: #{$alert-transition-reduced-motion};
+        --#{root-defaults.$prefix}alert-transition: #{$alert-transition-reduced-motion};
       }
     }
   }
 
   @include layer(theme) {
-    --#{root-defaults.$prefix}-button-background: #{$alert-background};
-    --#{root-defaults.$prefix}-button-focus-background: #{$alert-background};
-    --#{root-defaults.$prefix}-link-color: #{$alert-link-color};
-    --#{root-defaults.$prefix}-link-visited-color: #{$alert-link-visited-color};
-    --#{root-defaults.$prefix}-link-focus-color: #{$alert-link-focus-color};
-    --#{root-defaults.$prefix}-link-hover-color: #{$alert-link-hover-color};
-    --#{root-defaults.$prefix}-link-active-color: #{$alert-link-active-color};
-    --#{root-defaults.$prefix}-link-disabled-color: #{$alert-link-disabled-color};
+    --#{root-defaults.$prefix}button-background: #{$alert-background};
+    --#{root-defaults.$prefix}button-focus-background: #{$alert-background};
+    --#{root-defaults.$prefix}link-color: #{$alert-link-color};
+    --#{root-defaults.$prefix}link-visited-color: #{$alert-link-visited-color};
+    --#{root-defaults.$prefix}link-focus-color: #{$alert-link-focus-color};
+    --#{root-defaults.$prefix}link-hover-color: #{$alert-link-hover-color};
+    --#{root-defaults.$prefix}link-active-color: #{$alert-link-active-color};
+    --#{root-defaults.$prefix}link-disabled-color: #{$alert-link-disabled-color};
 
     border-color: $alert-border-color;
     background-color: $alert-background;
@@ -60,7 +60,7 @@
     @each $color, $map in map.get(color.$themes, active) {
       &#{defaults.$alert-theme-selector-prefix}#{$color} {
         @each $prop, $shade in defaults.$alert-state-theme-map {
-          --#{root-defaults.$prefix}-alert-#{$prop}: #{theme.get(
+          --#{root-defaults.$prefix}alert-#{$prop}: #{theme.get(
               $color,
               $shade
             )};

package/src/scss/component/alert/_variables.scss

@@ -12,162 +12,159 @@
 
 // Alert properties.
 $alert-padding-x: var(
-  --#{root-defaults.$prefix}-alert-padding-x,
+  --#{root-defaults.$prefix}alert-padding-x,
   #{map.get(root-variables.$spacers, 5)}
 );
 $alert-padding-y: var(
-  --#{root-defaults.$prefix}-alert-padding-y,
+  --#{root-defaults.$prefix}alert-padding-y,
   #{map.get(root-variables.$spacers, 5)}
 );
 $alert-padding: var(
-  --#{root-defaults.$prefix}-alert-padding,
+  --#{root-defaults.$prefix}alert-padding,
   #{$alert-padding-y} #{$alert-padding-x}
 );
 
 // Alert gap properties.
 $alert-column-gap: var(
-  --#{root-defaults.$prefix}-alert-column-gap,
+  --#{root-defaults.$prefix}alert-column-gap,
   #{map.get(root-variables.$spacers, 0)}
 );
 $alert-row-gap: var(
-  --#{root-defaults.$prefix}-alert-row-gap,
+  --#{root-defaults.$prefix}alert-row-gap,
   #{map.get(root-variables.$spacers, 3)}
 );
 $alert-gap: var(
-  --#{root-defaults.$prefix}-alert-gap,
+  --#{root-defaults.$prefix}alert-gap,
   #{$alert-column-gap} #{$alert-row-gap}
 );
 
 // Alert color properties.
 $alert-background: var(
-  --#{root-defaults.$prefix}-alert-background,
+  --#{root-defaults.$prefix}alert-background,
   #{color.$root-background}
 );
-$alert-color: var(--#{root-defaults.$prefix}-alert-color, #{color.$root-color});
-$alert-link-color: var(--#{root-defaults.$prefix}-alert-link-color);
+$alert-color: var(--#{root-defaults.$prefix}alert-color, #{color.$root-color});
+$alert-link-color: var(--#{root-defaults.$prefix}alert-link-color);
 $alert-link-visited-color: var(
-  --#{root-defaults.$prefix}-alert-link-visited-color
+  --#{root-defaults.$prefix}alert-link-visited-color
 );
-$alert-link-focus-color: var(--#{root-defaults.$prefix}-alert-link-focus-color);
-$alert-link-hover-color: var(--#{root-defaults.$prefix}-alert-link-hover-color);
+$alert-link-focus-color: var(--#{root-defaults.$prefix}alert-link-focus-color);
+$alert-link-hover-color: var(--#{root-defaults.$prefix}alert-link-hover-color);
 $alert-link-active-color: var(
-  --#{root-defaults.$prefix}-alert-link-active-color
+  --#{root-defaults.$prefix}alert-link-active-color
 );
 $alert-link-disabled-color: var(
-  --#{root-defaults.$prefix}-alert-link-disabled-color
+  --#{root-defaults.$prefix}alert-link-disabled-color
 );
 
 // Alert border-properties.
 $alert-border-color: var(
-  --#{root-defaults.$prefix}-alert-border-color,
+  --#{root-defaults.$prefix}alert-border-color,
   #{$alert-color}
 );
 $alert-top-left-border-radius: var(
-  --#{root-defaults.$prefix}-alert-top-left-border-radius,
+  --#{root-defaults.$prefix}alert-top-left-border-radius,
   #{root-variables.$border-radius}
 );
 $alert-top-right-border-radius: var(
-  --#{root-defaults.$prefix}-alert-top-right-border-radius,
+  --#{root-defaults.$prefix}alert-top-right-border-radius,
   #{root-variables.$border-radius}
 );
 $alert-bottom-left-border-radius: var(
-  --#{root-defaults.$prefix}-alert-bottom-left-border-radius,
+  --#{root-defaults.$prefix}alert-bottom-left-border-radius,
   #{root-variables.$border-radius}
 );
 $alert-bottom-right-border-radius: var(
-  --#{root-defaults.$prefix}-alert-bottom-right-border-radius,
+  --#{root-defaults.$prefix}alert-bottom-right-border-radius,
   #{root-variables.$border-radius}
 );
 $alert-border-radius: var(
-  --#{root-defaults.$prefix}-alert-border-radius,
+  --#{root-defaults.$prefix}alert-border-radius,
   #{$alert-top-left-border-radius} #{$alert-top-right-border-radius}
     #{$alert-bottom-right-border-radius} #{$alert-bottom-left-border-radius}
 );
 $alert-border-style: var(
-  --#{root-defaults.$prefix}-alert-border-style,
+  --#{root-defaults.$prefix}alert-border-style,
   #{root-variables.$border-style}
 );
 $alert-border-width: var(
-  --#{root-defaults.$prefix}-alert-border-width,
+  --#{root-defaults.$prefix}alert-border-width,
   #{root-variables.$border-width}
 );
 $alert-border: var(
-  --#{root-defaults.$prefix}-alert-border,
+  --#{root-defaults.$prefix}alert-border,
   #{$alert-border-width} #{$alert-border-style}
 );
 
 // Alert transition properties.
 $alert-transition: var(
-  --#{root-defaults.$prefix}-alert-transition,
+  --#{root-defaults.$prefix}alert-transition,
   opacity #{map.get(root-variables.$transition-durations, fast)}
     #{root-variables.$transition-timing-function},
   transform #{map.get(root-variables.$transition-durations, fast)}
     #{root-variables.$transition-timing-function}
 );
 $alert-transition-reduced-motion: var(
-  --#{root-defaults.$prefix}-alert-transition-reduced-motion,
+  --#{root-defaults.$prefix}alert-transition-reduced-motion,
   opacity #{map.get(root-variables.$transition-durations, fast)}
     #{root-variables.$transition-timing-function}
 );
 
 // Alert header properties.
 $alert-header-padding-x: var(
-  --#{root-defaults.$prefix}-alert-header-padding-x,
+  --#{root-defaults.$prefix}alert-header-padding-x,
   0
 );
 $alert-header-padding-y: var(
-  --#{root-defaults.$prefix}-alert-header-padding-y,
+  --#{root-defaults.$prefix}alert-header-padding-y,
   0
 );
 $alert-header-padding: var(
-  --#{root-defaults.$prefix}-alert-header-padding,
+  --#{root-defaults.$prefix}alert-header-padding,
   #{$alert-header-padding-y} #{$alert-header-padding-x}
 );
 
 // Alert title properties.
 $alert-title-color: var(
-  --#{root-defaults.$prefix}-alert-title-color,
+  --#{root-defaults.$prefix}alert-title-color,
   #{$alert-color}
 );
 $alert-title-font-size: var(
-  --#{root-defaults.$prefix}-alert-title-font-size,
+  --#{root-defaults.$prefix}alert-title-font-size,
   #{typography.$h4-font-size}
 );
 $alert-title-font-weight: var(
-  --#{root-defaults.$prefix}-alert-title-font-weight,
+  --#{root-defaults.$prefix}alert-title-font-weight,
   #{typography.$h4-font-weight}
 );
 $alert-title-font-family: var(
-  --#{root-defaults.$prefix}-alert-title-font-family,
+  --#{root-defaults.$prefix}alert-title-font-family,
   #{typography.$h4-font-family}
 );
 $alert-title-line-height: var(
-  --#{root-defaults.$prefix}-alert-title-line-height,
+  --#{root-defaults.$prefix}alert-title-line-height,
   #{typography.$h4-line-height}
 );
-$alert-title-margin: var(
-  --#{root-defaults.$prefix}-alert-title-margin,
-  0 0 0 0
-);
+$alert-title-margin: var(--#{root-defaults.$prefix}alert-title-margin, 0 0 0 0);
 
 // Alert body properties.
-$alert-body-padding-x: var(--#{root-defaults.$prefix}-alert-body-padding-x, 0);
-$alert-body-padding-y: var(--#{root-defaults.$prefix}-alert-body-padding-y, 0);
+$alert-body-padding-x: var(--#{root-defaults.$prefix}alert-body-padding-x, 0);
+$alert-body-padding-y: var(--#{root-defaults.$prefix}alert-body-padding-y, 0);
 $alert-body-padding: var(
-  --#{root-defaults.$prefix}-alert-body-padding,
+  --#{root-defaults.$prefix}alert-body-padding,
   #{$alert-body-padding-y} #{$alert-body-padding-x}
 );
 
 // Alert footer properties.
 $alert-footer-padding-x: var(
-  --#{root-defaults.$prefix}-alert-footer-padding-x,
+  --#{root-defaults.$prefix}alert-footer-padding-x,
   0
 );
 $alert-footer-padding-y: var(
-  --#{root-defaults.$prefix}-alert-footer-padding-y,
+  --#{root-defaults.$prefix}alert-footer-padding-y,
   0
 );
 $alert-footer-padding: var(
-  --#{root-defaults.$prefix}-alert-footer-padding,
+  --#{root-defaults.$prefix}alert-footer-padding,
   #{$alert-footer-padding-y} #{$alert-footer-padding-x}
 );

package/src/scss/component/card/_index.scss

@@ -41,14 +41,14 @@
     }
 
     &:hover {
-      --#{root-defaults.$prefix}-card-transform: #{$card-hover-transform};
+      --#{root-defaults.$prefix}card-transform: #{$card-hover-transform};
     }
 
     &#{defaults.$horizontal-card-selector} {
       &,
       &#{defaults.$horizontal-card-left-selector} {
-        --#{root-defaults.$prefix}-card-content-ratio: #{$horizontal-card-content-ratio};
-        --#{root-defaults.$prefix}-card-image-ratio: #{$horizontal-card-image-ratio};
+        --#{root-defaults.$prefix}card-content-ratio: #{$horizontal-card-content-ratio};
+        --#{root-defaults.$prefix}card-image-ratio: #{$horizontal-card-image-ratio};
 
         grid-template-columns:
           [image-start]
@@ -124,8 +124,8 @@
         &#{defaults.$horizontal-card-right-selector},
         &#{defaults.$vertical-card-bottom-selector},
         &#{defaults.$inverse-card-selector} {
-          --#{root-defaults.$prefix}-horizontal-card-image-ratio: #{defaults.$card-image-ratio};
-          --#{root-defaults.$prefix}-horizontal-card-content-ratio: #{defaults.$card-content-ratio};
+          --#{root-defaults.$prefix}horizontal-card-image-ratio: #{defaults.$card-image-ratio};
+          --#{root-defaults.$prefix}horizontal-card-content-ratio: #{defaults.$card-content-ratio};
 
           grid-template-columns: 1fr;
         }
@@ -157,7 +157,7 @@
 
   @include animation.off {
     #{defaults.$card-selector} {
-      --#{root-defaults.$prefix}-card-transition: #{$card-transition-reduced-motion};
+      --#{root-defaults.$prefix}card-transition: #{$card-transition-reduced-motion};
     }
   }
 }