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

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

@@ -1,4 +1,4 @@
-// @graupl/graupl accordion component styles.
+// @graupl/core accordion component styles.
 
 @use "defaults";
 @use "variables" as *;
@@ -8,8 +8,14 @@
 @use "../../state/focus/variables" as focus;
 @use "sass:map";
 
-#{defaults.$accordion-selector} {
-  @include layer(component) {
+@include layer(base) {
+  #{defaults.$accordion-item-toggle-selector} {
+    @include button-mixins.apply-base;
+  }
+}
+
+@include layer(component) {
+  #{defaults.$accordion-selector} {
     display: flex;
     flex-flow: column nowrap;
     padding: $accordion-padding;
@@ -17,22 +23,24 @@
 
     > #{defaults.$accordion-item-selector} {
       &:not(:first-child) {
-        margin-top: calc(-1 * #{$accordion-item-border-width});
+        /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
+        margin-top: calc(
+          -1 *
+            min(
+              #{$accordion-item-border-top-width},
+              #{$accordion-item-border-bottom-width}
+            )
+        );
+        /* stylelint-enable  scss/operator-no-newline-after */
       }
     }
   }
 
-  @include layer(theme) {
-    background: $accordion-background;
-    color: $accordion-color;
-  }
-}
-
-#{defaults.$accordion-item-selector} {
-  @include layer(component) {
+  #{defaults.$accordion-item-selector} {
     overflow: hidden;
     transition: $accordion-transition;
-    border: $accordion-item-border;
+    border-width: $accordion-item-border-width;
+    border-style: $accordion-item-border-style;
     border-radius: $accordion-item-border-radius;
     isolation: isolate;
 
@@ -53,23 +61,7 @@
     }
   }
 
-  @include layer(state) {
-    #{defaults.$accordion-item-toggle-selector} {
-      --#{root-defaults.$prefix}-focus-outline-offset: calc(
-        -1 * (#{$accordion-item-border-width} + #{focus.$focus-width})
-      );
-    }
-  }
-
-  @include layer(theme) {
-    border-color: $accordion-item-border-color;
-  }
-}
-
-#{defaults.$accordion-item-toggle-selector} {
-  @include button-mixins.apply-button;
-
-  @include layer(component) {
+  #{defaults.$accordion-item-toggle-selector} {
     z-index: 2;
     padding: $accordion-item-toggle-padding;
     transform: $accordion-item-toggle-transform;
@@ -77,31 +69,31 @@
 
     @each $selector in map.get(root-defaults.$state-selectors, visited) {
       &#{$selector} {
-        --#{root-defaults.$prefix}-accordion-item-toggle-transform: #{$accordion-item-toggle-visited-transform};
+        --#{root-defaults.$prefix}accordion-item-toggle-transform: #{$accordion-item-toggle-visited-transform};
       }
     }
 
     @each $selector in map.get(root-defaults.$state-selectors, focus) {
       &#{$selector} {
-        --#{root-defaults.$prefix}-accordion-item-toggle-transform: #{$accordion-item-toggle-focus-transform};
+        --#{root-defaults.$prefix}accordion-item-toggle-transform: #{$accordion-item-toggle-focus-transform};
       }
     }
 
     @each $selector in map.get(root-defaults.$state-selectors, hover) {
       &#{$selector} {
-        --#{root-defaults.$prefix}-accordion-item-toggle-transform: #{$accordion-item-toggle-hover-transform};
+        --#{root-defaults.$prefix}accordion-item-toggle-transform: #{$accordion-item-toggle-hover-transform};
       }
     }
 
     @each $selector in map.get(root-defaults.$state-selectors, active) {
       &#{$selector} {
-        --#{root-defaults.$prefix}-accordion-item-toggle-transform: #{$accordion-item-toggle-active-transform};
+        --#{root-defaults.$prefix}accordion-item-toggle-transform: #{$accordion-item-toggle-active-transform};
       }
     }
 
     @each $selector in map.get(root-defaults.$state-selectors, disabled) {
       &#{$selector} {
-        --#{root-defaults.$prefix}-accordion-item-toggle-transform: #{$accordion-item-toggle-disabled-transform};
+        --#{root-defaults.$prefix}accordion-item-toggle-transform: #{$accordion-item-toggle-disabled-transform};
       }
     }
 
@@ -121,17 +113,13 @@
       }
     }
   }
-}
 
-#{defaults.$accordion-item-header-selector} {
-  @include layer(component) {
+  #{defaults.$accordion-item-header-selector} {
     margin: $accordion-item-header-margin;
     padding: $accordion-item-header-padding;
   }
-}
 
-#{defaults.$accordion-item-title-selector} {
-  @include layer(component) {
+  #{defaults.$accordion-item-title-selector} {
     margin: $accordion-item-title-margin;
     padding: $accordion-item-title-padding;
 
@@ -144,19 +132,7 @@
     }
   }
 
-  @include layer(theme) {
-    &,
-    #{defaults.$accordion-item-toggle-selector} {
-      font-family: $accordion-title-font-family;
-      font-size: $accordion-title-font-size;
-      font-weight: $accordion-title-font-weight;
-      line-height: $accordion-title-line-height;
-    }
-  }
-}
-
-#{defaults.$accordion-item-content-selector} {
-  @include layer(component) {
+  #{defaults.$accordion-item-content-selector} {
     display: flex;
     flex-flow: column nowrap;
     padding: $accordion-item-content-padding;
@@ -165,16 +141,58 @@
     opacity: 0;
     gap: $accordion-item-content-gap;
   }
-}
 
-#{defaults.$accordion-item-body-selector} {
-  @include layer(component) {
+  #{defaults.$accordion-item-body-selector} {
     padding: $accordion-item-body-padding;
   }
-}
 
-#{defaults.$accordion-item-footer-selector} {
-  @include layer(component) {
+  #{defaults.$accordion-item-footer-selector} {
     padding: $accordion-item-footer-padding;
   }
 }
+
+@include layer(state) {
+  #{defaults.$accordion-item-selector} {
+    #{defaults.$accordion-item-toggle-selector} {
+      /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
+      --#{root-defaults.$prefix}focus-outline-offset: calc(
+        -1 *
+          (
+            min(
+                #{$accordion-item-border-top-width},
+                #{$accordion-item-border-bottom-width},
+                #{$accordion-item-border-left-width},
+                #{$accordion-item-border-right-width}
+              ) +
+              #{focus.$focus-width}
+          )
+      );
+      /* stylelint-enable  scss/operator-no-newline-after */
+    }
+  }
+}
+
+@include layer(theme) {
+  #{defaults.$accordion-selector} {
+    background: $accordion-background;
+    color: $accordion-color;
+  }
+
+  #{defaults.$accordion-item-selector} {
+    border-color: $accordion-item-border-color;
+  }
+
+  #{defaults.$accordion-item-toggle-selector} {
+    @include button-mixins.apply-theme;
+  }
+
+  #{defaults.$accordion-item-title-selector} {
+    &,
+    #{defaults.$accordion-item-toggle-selector} {
+      font-family: $accordion-title-font-family;
+      font-size: $accordion-title-font-size;
+      font-weight: $accordion-title-font-weight;
+      line-height: $accordion-title-line-height;
+    }
+  }
+}

package/{src → packages/core/src}/scss/component/accordion/_variables.scss

@@ -1,4 +1,4 @@
-// @graupl/graupl accordion component variables.
+// @graupl/core accordion component variables.
 //
 // These values are to be used to directly style components and provide a
 // cleaner way to reference custom properties.
@@ -14,116 +14,146 @@
 
 // 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,
-  #{color.$root-color}
+  --#{root-defaults.$prefix}accordion-color,
+  #{color.$color}
 );
 $accordion-background: var(
-  --#{root-defaults.$prefix}-accordion-background,
-  #{color.$root-background}
+  --#{root-defaults.$prefix}accordion-background,
+  #{color.$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-variables.$border-radius}
+$accordion-item-border-top-left-radius: var(
+  --#{root-defaults.$prefix}accordion-item-border-top-left-radius,
+  #{root-variables.$border-top-left-radius}
 );
-$accordion-item-top-right-border-radius: var(
-  --#{root-defaults.$prefix}-accordion-item-top-right-border-radius,
-  #{root-variables.$border-radius}
+$accordion-item-border-top-right-radius: var(
+  --#{root-defaults.$prefix}accordion-item-border-top-right-radius,
+  #{root-variables.$border-top-right-radius}
 );
-$accordion-item-bottom-left-border-radius: var(
-  --#{root-defaults.$prefix}-accordion-item-bottom-left-border-radius,
-  #{root-variables.$border-radius}
+$accordion-item-border-bottom-left-radius: var(
+  --#{root-defaults.$prefix}accordion-item-border-bottom-left-radius,
+  #{root-variables.$border-bottom-left-radius}
 );
-$accordion-item-bottom-right-border-radius: var(
-  --#{root-defaults.$prefix}-accordion-item-bottom-right-border-radius,
-  #{root-variables.$border-radius}
+$accordion-item-border-bottom-right-radius: var(
+  --#{root-defaults.$prefix}accordion-item-border-bottom-right-radius,
+  #{root-variables.$border-bottom-right-radius}
 );
 $accordion-item-border-radius: var(
-  --#{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}
+  --#{root-defaults.$prefix}accordion-item-border-radius,
+  #{$accordion-item-border-top-left-radius}
+    #{$accordion-item-border-top-right-radius}
+    #{$accordion-item-border-bottom-right-radius}
+    #{$accordion-item-border-bottom-left-radius}
 );
-$accordion-item-border-style: var(
-  --#{root-defaults.$prefix}-accordion-item-border-style,
-  #{root-variables.$border-style}
+$accordion-item-border-top-width: var(
+  --#{root-defaults.$prefix}accordion-item-border-top-width,
+  #{root-variables.$border-top-width}
+);
+$accordion-item-border-right-width: var(
+  --#{root-defaults.$prefix}accordion-item-border-right-width,
+  #{root-variables.$border-right-width}
+);
+$accordion-item-border-bottom-width: var(
+  --#{root-defaults.$prefix}accordion-item-border-bottom-width,
+  #{root-variables.$border-bottom-width}
+);
+$accordion-item-border-left-width: var(
+  --#{root-defaults.$prefix}accordion-item-border-left-width,
+  #{root-variables.$border-left-width}
 );
 $accordion-item-border-width: var(
-  --#{root-defaults.$prefix}-accordion-item-border-width,
-  #{root-variables.$border-width}
+  --#{root-defaults.$prefix}accordion-item-border-width,
+  #{$accordion-item-border-top-width} #{$accordion-item-border-right-width}
+    #{$accordion-item-border-bottom-width} #{$accordion-item-border-left-width}
+);
+$accordion-item-border-top-style: var(
+  --#{root-defaults.$prefix}accordion-item-border-top-style,
+  #{root-variables.$border-top-style}
 );
-$accordion-item-border: var(
-  --#{root-defaults.$prefix}-accordion-item-border,
-  #{$accordion-item-border-width} #{$accordion-item-border-style}
+$accordion-item-border-right-style: var(
+  --#{root-defaults.$prefix}accordion-item-border-right-style,
+  #{root-variables.$border-right-style}
+);
+$accordion-item-border-bottom-style: var(
+  --#{root-defaults.$prefix}accordion-item-border-bottom-style,
+  #{root-variables.$border-bottom-style}
+);
+$accordion-item-border-left-style: var(
+  --#{root-defaults.$prefix}accordion-item-border-left-style,
+  #{root-variables.$border-left-style}
+);
+$accordion-item-border-style: var(
+  --#{root-defaults.$prefix}accordion-item-border-style,
+  #{$accordion-item-border-top-style} #{$accordion-item-border-right-style}
+    #{$accordion-item-border-bottom-style} #{$accordion-item-border-left-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 +162,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 +171,186 @@ $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}
 );
+/* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
 $accordion-item-header-margin: var(
-  --#{root-defaults.$prefix}-accordion-item-header-margin,
-  calc(-1 * #{$accordion-item-border-width})
-);
+  --#{root-defaults.$prefix}accordion-item-header-margin,
+  calc(
+    -1 *
+      min(
+        #{$accordion-item-border-top-width},
+        #{$accordion-item-border-bottom-width},
+        #{$accordion-item-border-left-width},
+        #{$accordion-item-border-right-width}
+      )
+  )
+);
+/* stylelint-enable  scss/operator-no-newline-after */
 
 // 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 → packages/core/src}/scss/component/alert/_defaults.scss

@@ -1,4 +1,4 @@
-// @graupl/graupl alert component default values.
+// @graupl/core alert component default values.
 //
 // Generally, these should not be used directly when styling components unless a static value is needed.
 // They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.