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

package/src/scss/component/navigation/_index.scss

@@ -22,11 +22,11 @@
       grid-area: menu;
 
       &#{menu-defaults.$menu-show-selector} {
-        --#{root-defaults.$prefix}-menu-display: #{menu-variables.$menu-show-display};
+        --#{root-defaults.$prefix}menu-display: #{menu-variables.$menu-show-display};
       }
 
       &#{menu-defaults.$menu-hide-selector} {
-        --#{root-defaults.$prefix}-menu-display: #{menu-variables.$menu-hide-display};
+        --#{root-defaults.$prefix}menu-display: #{menu-variables.$menu-hide-display};
       }
     }
   }
@@ -63,27 +63,27 @@
     text-decoration-thickness: $navigation-branding-text-decoration-thickness;
 
     &:visited {
-      --#{root-defaults.$prefix}-navigation-branding-text-decoration: #{$navigation-branding-visited-text-decoration};
-      --#{root-defaults.$prefix}-navigation-branding-text-decoration-thickness: #{$navigation-branding-visited-text-decoration-thickness};
-      --#{root-defaults.$prefix}-navigation-branding-text-decoration-style: #{$navigation-branding-visited-text-decoration-style};
+      --#{root-defaults.$prefix}navigation-branding-text-decoration: #{$navigation-branding-visited-text-decoration};
+      --#{root-defaults.$prefix}navigation-branding-text-decoration-thickness: #{$navigation-branding-visited-text-decoration-thickness};
+      --#{root-defaults.$prefix}navigation-branding-text-decoration-style: #{$navigation-branding-visited-text-decoration-style};
     }
 
     &:focus-visible {
-      --#{root-defaults.$prefix}-navigation-branding-text-decoration: #{$navigation-branding-focus-text-decoration};
-      --#{root-defaults.$prefix}-navigation-branding-text-decoration-thickness: #{$navigation-branding-focus-text-decoration-thickness};
-      --#{root-defaults.$prefix}-navigation-branding-text-decoration-style: #{$navigation-branding-focus-text-decoration-style};
+      --#{root-defaults.$prefix}navigation-branding-text-decoration: #{$navigation-branding-focus-text-decoration};
+      --#{root-defaults.$prefix}navigation-branding-text-decoration-thickness: #{$navigation-branding-focus-text-decoration-thickness};
+      --#{root-defaults.$prefix}navigation-branding-text-decoration-style: #{$navigation-branding-focus-text-decoration-style};
     }
 
     &:hover {
-      --#{root-defaults.$prefix}-navigation-branding-text-decoration: #{$navigation-branding-hover-text-decoration};
-      --#{root-defaults.$prefix}-navigation-branding-text-decoration-thickness: #{$navigation-branding-hover-text-decoration-thickness};
-      --#{root-defaults.$prefix}-navigation-branding-text-decoration-style: #{$navigation-branding-hover-text-decoration-style};
+      --#{root-defaults.$prefix}navigation-branding-text-decoration: #{$navigation-branding-hover-text-decoration};
+      --#{root-defaults.$prefix}navigation-branding-text-decoration-thickness: #{$navigation-branding-hover-text-decoration-thickness};
+      --#{root-defaults.$prefix}navigation-branding-text-decoration-style: #{$navigation-branding-hover-text-decoration-style};
     }
 
     &:active {
-      --#{root-defaults.$prefix}-navigation-branding-text-decoration: #{$navigation-branding-active-text-decoration};
-      --#{root-defaults.$prefix}-navigation-branding-text-decoration-thickness: #{$navigation-branding-active-text-decoration-thickness};
-      --#{root-defaults.$prefix}-navigation-branding-text-decoration-style: #{$navigation-branding-active-text-decoration-style};
+      --#{root-defaults.$prefix}navigation-branding-text-decoration: #{$navigation-branding-active-text-decoration};
+      --#{root-defaults.$prefix}navigation-branding-text-decoration-thickness: #{$navigation-branding-active-text-decoration-thickness};
+      --#{root-defaults.$prefix}navigation-branding-text-decoration-style: #{$navigation-branding-active-text-decoration-style};
     }
 
     &:disabled,
@@ -93,9 +93,9 @@
       &:focus-visible,
       &:hover,
       &:active {
-        --#{root-defaults.$prefix}-navigation-branding-text-decoration: #{$navigation-branding-disabled-text-decoration};
-        --#{root-defaults.$prefix}-navigation-branding-text-decoration-thickness: #{$navigation-branding-disabled-text-decoration-thickness};
-        --#{root-defaults.$prefix}-navigation-branding-text-decoration-style: #{$navigation-branding-disabled-text-decoration-style};
+        --#{root-defaults.$prefix}navigation-branding-text-decoration: #{$navigation-branding-disabled-text-decoration};
+        --#{root-defaults.$prefix}navigation-branding-text-decoration-thickness: #{$navigation-branding-disabled-text-decoration-thickness};
+        --#{root-defaults.$prefix}navigation-branding-text-decoration-style: #{$navigation-branding-disabled-text-decoration-style};
       }
     }
   }
@@ -103,17 +103,17 @@
   @include screen.trigger(navigation-collapse) {
     // Navigation.
     #{defaults.$navigation-selector} {
-      --#{root-defaults.$prefix}-menu-flex-direction: column;
-      --#{root-defaults.$prefix}-submenu-position: relative;
-      --#{root-defaults.$prefix}-menu-item-min-width: 100%;
-      --#{root-defaults.$prefix}-submenu-inset: auto;
+      --#{root-defaults.$prefix}menu-flex-direction: column;
+      --#{root-defaults.$prefix}submenu-position: relative;
+      --#{root-defaults.$prefix}menu-item-min-width: 100%;
+      --#{root-defaults.$prefix}submenu-inset: auto;
     }
   }
 
   @include screen.trigger(navigation-expand) {
     // Navigation.
     #{defaults.$navigation-selector} {
-      --#{root-defaults.$prefix}-menu-hide-display: #{menu-variables.$menu-show-display};
+      --#{root-defaults.$prefix}menu-hide-display: #{menu-variables.$menu-show-display};
 
       grid-template-areas: "branding - menu";
     }
@@ -128,10 +128,10 @@
 @include layer(theme) {
   // Navigation.
   #{defaults.$navigation-selector} {
-    --#{root-defaults.$prefix}-menu-background: #{$navigation-background};
-    --#{root-defaults.$prefix}-menu-color: #{$navigation-color};
-    --#{root-defaults.$prefix}-submenu-background: #{$navigation-background};
-    --#{root-defaults.$prefix}-submenu-color: #{$navigation-color};
+    --#{root-defaults.$prefix}menu-background: #{$navigation-background};
+    --#{root-defaults.$prefix}menu-color: #{$navigation-color};
+    --#{root-defaults.$prefix}submenu-background: #{$navigation-background};
+    --#{root-defaults.$prefix}submenu-color: #{$navigation-color};
 
     background: $navigation-background;
     color: $navigation-color;
@@ -144,8 +144,8 @@
     color: $navigation-toggle-color;
 
     &:hover {
-      --#{root-defaults.$prefix}-navigation-toggle-background: #{$navigation-toggle-hover-background};
-      --#{root-defaults.$prefix}-navigation-toggle-color: #{$navigation-toggle-hover-color};
+      --#{root-defaults.$prefix}navigation-toggle-background: #{$navigation-toggle-hover-background};
+      --#{root-defaults.$prefix}navigation-toggle-color: #{$navigation-toggle-hover-color};
     }
   }
 
@@ -155,23 +155,23 @@
     text-decoration-color: $navigation-branding-text-decoration-color;
 
     &:visited {
-      --#{root-defaults.$prefix}-navigation-branding-color: #{$navigation-branding-visited-color};
-      --#{root-defaults.$prefix}-navigation-branding-text-decoration-color: #{$navigation-branding-visited-text-decoration-color};
+      --#{root-defaults.$prefix}navigation-branding-color: #{$navigation-branding-visited-color};
+      --#{root-defaults.$prefix}navigation-branding-text-decoration-color: #{$navigation-branding-visited-text-decoration-color};
     }
 
     &:focus-visible {
-      --#{root-defaults.$prefix}-navigation-branding-color: #{$navigation-branding-focus-color};
-      --#{root-defaults.$prefix}-navigation-branding-text-decoration-color: #{$navigation-branding-focus-text-decoration-color};
+      --#{root-defaults.$prefix}navigation-branding-color: #{$navigation-branding-focus-color};
+      --#{root-defaults.$prefix}navigation-branding-text-decoration-color: #{$navigation-branding-focus-text-decoration-color};
     }
 
     &:hover {
-      --#{root-defaults.$prefix}-navigation-branding-color: #{$navigation-branding-hover-color};
-      --#{root-defaults.$prefix}-navigation-branding-text-decoration-color: #{$navigation-branding-hover-text-decoration-color};
+      --#{root-defaults.$prefix}navigation-branding-color: #{$navigation-branding-hover-color};
+      --#{root-defaults.$prefix}navigation-branding-text-decoration-color: #{$navigation-branding-hover-text-decoration-color};
     }
 
     &:active {
-      --#{root-defaults.$prefix}-navigation-branding-color: #{$navigation-branding-active-color};
-      --#{root-defaults.$prefix}-navigation-branding-text-decoration-color: #{$navigation-branding-active-text-decoration-color};
+      --#{root-defaults.$prefix}navigation-branding-color: #{$navigation-branding-active-color};
+      --#{root-defaults.$prefix}navigation-branding-text-decoration-color: #{$navigation-branding-active-text-decoration-color};
     }
 
     &:disabled,
@@ -181,8 +181,8 @@
       &:focus-visible,
       &:hover,
       &:active {
-        --#{root-defaults.$prefix}-navigation-branding-color: #{$navigation-branding-disabled-color};
-        --#{root-defaults.$prefix}-navigation-branding-text-decoration-color: #{$navigation-branding-disabled-text-decoration-color};
+        --#{root-defaults.$prefix}navigation-branding-color: #{$navigation-branding-disabled-color};
+        --#{root-defaults.$prefix}navigation-branding-text-decoration-color: #{$navigation-branding-disabled-text-decoration-color};
       }
     }
   }

package/src/scss/component/navigation/_variables.scss

@@ -12,226 +12,226 @@
 
 // Navigation colors.
 $navigation-background: var(
-  --#{root-defaults.$prefix}-navigation-background,
+  --#{root-defaults.$prefix}navigation-background,
   #{color.$root-background}
 );
 $navigation-color: var(
-  --#{root-defaults.$prefix}-navigation-color,
+  --#{root-defaults.$prefix}navigation-color,
   #{color.$root-color}
 );
 
 // Navigation toggle size.
 $navigation-toggle-min-width: var(
-  --#{root-defaults.$prefix}-navigation-toggle-min-width,
+  --#{root-defaults.$prefix}navigation-toggle-min-width,
   #{root-defaults.$interactive-min-width}
 );
 $navigation-toggle-min-height: var(
-  --#{root-defaults.$prefix}-navigation-toggle-min-height,
+  --#{root-defaults.$prefix}navigation-toggle-min-height,
   #{root-defaults.$interactive-min-height}
 );
 
 // Navigation toggle spacing.
 $navigation-toggle-padding-x: var(
-  --#{root-defaults.$prefix}-navigation-toggle-padding-x,
+  --#{root-defaults.$prefix}navigation-toggle-padding-x,
   #{map.get(root-variables.$spacers, 5)}
 );
 $navigation-toggle-padding-y: var(
-  --#{root-defaults.$prefix}-navigation-toggle-padding-y,
+  --#{root-defaults.$prefix}navigation-toggle-padding-y,
   #{map.get(root-variables.$spacers, 3)}
 );
 $navigation-toggle-padding: var(
-  --#{root-defaults.$prefix}-navigation-toggle-padding,
+  --#{root-defaults.$prefix}navigation-toggle-padding,
   #{$navigation-toggle-padding-y} #{$navigation-toggle-padding-x}
 );
 
 // Navigation toggle colors.
 $navigation-toggle-background: var(
-  --#{root-defaults.$prefix}-navigation-toggle-background,
+  --#{root-defaults.$prefix}navigation-toggle-background,
   #{$navigation-background}
 );
 $navigation-toggle-color: var(
-  --#{root-defaults.$prefix}-navigation-toggle-color,
+  --#{root-defaults.$prefix}navigation-toggle-color,
   #{$navigation-color}
 );
 $navigation-toggle-hover-background: var(
-  --#{root-defaults.$prefix}-navigation-toggle-hover-background,
+  --#{root-defaults.$prefix}navigation-toggle-hover-background,
   #{$navigation-color}
 );
 $navigation-toggle-hover-color: var(
-  --#{root-defaults.$prefix}-navigation-toggle-hover-color,
+  --#{root-defaults.$prefix}navigation-toggle-hover-color,
   #{$navigation-background}
 );
 
 // Navigation toggle border properties.
 $navigation-toggle-border-width: var(
-  --#{root-defaults.$prefix}-navigation-toggle-border-width,
+  --#{root-defaults.$prefix}navigation-toggle-border-width,
   #{root-variables.$border-width}
 );
 $navigation-toggle-border-style: var(
-  --#{root-defaults.$prefix}-navigation-toggle-border-style,
+  --#{root-defaults.$prefix}navigation-toggle-border-style,
   #{root-variables.$border-style}
 );
 $navigation-toggle-border: var(
-  --#{root-defaults.$prefix}-navigation-toggle-border,
+  --#{root-defaults.$prefix}navigation-toggle-border,
   #{$navigation-toggle-border-width} #{$navigation-toggle-border-style}
 );
 $navigation-toggle-border-color: var(
-  --#{root-defaults.$prefix}-navigation-toggle-border-color,
+  --#{root-defaults.$prefix}navigation-toggle-border-color,
   #{$navigation-toggle-color}
 );
 $navigation-toggle-border-radius: var(
-  --#{root-defaults.$prefix}-navigation-toggle-border-radius,
+  --#{root-defaults.$prefix}navigation-toggle-border-radius,
   #{root-variables.$border-radius}
 );
 
 // Navigation branding properties.
 $navigation-branding-font-size: var(
-  --#{root-defaults.$prefix}-navigation-branding-font-size,
+  --#{root-defaults.$prefix}navigation-branding-font-size,
   #{map.get(typography.$font-sizes, "lg")}
 );
 $navigation-branding-font-weight: var(
-  --#{root-defaults.$prefix}-navigation-branding-font-weight,
+  --#{root-defaults.$prefix}navigation-branding-font-weight,
   #{typography.$font-weight-bold}
 );
 $navigation-branding-padding-x: var(
-  --#{root-defaults.$prefix}-navigation-branding-padding-x,
+  --#{root-defaults.$prefix}navigation-branding-padding-x,
   #{map.get(root-variables.$spacers, 3)}
 );
 $navigation-branding-padding-y: var(
-  --#{root-defaults.$prefix}-navigation-branding-padding-y,
+  --#{root-defaults.$prefix}navigation-branding-padding-y,
   #{map.get(root-variables.$spacers, 2)}
 );
 $navigation-branding-padding: var(
-  --#{root-defaults.$prefix}-navigation-branding-padding,
+  --#{root-defaults.$prefix}navigation-branding-padding,
   #{$navigation-branding-padding-y} #{$navigation-branding-padding-x}
 );
 
 // Navigation branding colors.
 $navigation-branding-color: var(
-  --#{root-defaults.$prefix}-navigation-branding-color,
+  --#{root-defaults.$prefix}navigation-branding-color,
   #{$navigation-color}
 );
 $navigation-branding-visited-color: var(
-  --#{root-defaults.$prefix}-navigation-branding-visited-color,
+  --#{root-defaults.$prefix}navigation-branding-visited-color,
   #{$navigation-color}
 );
 $navigation-branding-focus-color: var(
-  --#{root-defaults.$prefix}-navigation-branding-focus-color,
+  --#{root-defaults.$prefix}navigation-branding-focus-color,
   #{$navigation-color}
 );
 $navigation-branding-hover-color: var(
-  --#{root-defaults.$prefix}-navigation-branding-hover-color,
+  --#{root-defaults.$prefix}navigation-branding-hover-color,
   #{$navigation-color}
 );
 $navigation-branding-active-color: var(
-  --#{root-defaults.$prefix}-navigation-branding-active-color,
+  --#{root-defaults.$prefix}navigation-branding-active-color,
   #{$navigation-color}
 );
 $navigation-branding-disabled-color: var(
-  --#{root-defaults.$prefix}-navigation-branding-disabled-color,
+  --#{root-defaults.$prefix}navigation-branding-disabled-color,
   #{$navigation-color}
 );
 
 // Navigation branding text decoration properties.
 $navigation-branding-text-decoration: var(
-  --#{root-defaults.$prefix}-navigation-branding-text-decoration,
+  --#{root-defaults.$prefix}navigation-branding-text-decoration,
   #{defaults.$navigation-branding-text-decoration}
 );
 $navigation-branding-visited-text-decoration: var(
-  --#{root-defaults.$prefix}-navigation-branding-visited-text-decoration,
+  --#{root-defaults.$prefix}navigation-branding-visited-text-decoration,
   #{defaults.$navigation-branding-visited-text-decoration}
 );
 $navigation-branding-focus-text-decoration: var(
-  --#{root-defaults.$prefix}-navigation-branding-focus-text-decoration,
+  --#{root-defaults.$prefix}navigation-branding-focus-text-decoration,
   #{defaults.$navigation-branding-focus-text-decoration}
 );
 $navigation-branding-hover-text-decoration: var(
-  --#{root-defaults.$prefix}-navigation-branding-hover-text-decoration,
+  --#{root-defaults.$prefix}navigation-branding-hover-text-decoration,
   #{defaults.$navigation-branding-hover-text-decoration}
 );
 $navigation-branding-active-text-decoration: var(
-  --#{root-defaults.$prefix}-navigation-branding-active-text-decoration,
+  --#{root-defaults.$prefix}navigation-branding-active-text-decoration,
   #{defaults.$navigation-branding-active-text-decoration}
 );
 $navigation-branding-disabled-text-decoration: var(
-  --#{root-defaults.$prefix}-navigation-branding-disabled-text-decoration,
+  --#{root-defaults.$prefix}navigation-branding-disabled-text-decoration,
   #{defaults.$navigation-branding-disabled-text-decoration}
 );
 $navigation-branding-text-decoration-style: var(
-  --#{root-defaults.$prefix}-navigation-branding-text-decoration-style,
+  --#{root-defaults.$prefix}navigation-branding-text-decoration-style,
   #{defaults.$navigation-branding-text-decoration-style}
 );
 $navigation-branding-visited-text-decoration-style: var(
-  --#{root-defaults.$prefix}-navigation-branding-visited-text-decoration-style,
+  --#{root-defaults.$prefix}navigation-branding-visited-text-decoration-style,
   #{defaults.$navigation-branding-visited-text-decoration-style}
 );
 $navigation-branding-focus-text-decoration-style: var(
-  --#{root-defaults.$prefix}-navigation-branding-focus-text-decoration-style,
+  --#{root-defaults.$prefix}navigation-branding-focus-text-decoration-style,
   #{defaults.$navigation-branding-focus-text-decoration-style}
 );
 $navigation-branding-hover-text-decoration-style: var(
-  --#{root-defaults.$prefix}-navigation-branding-hover-text-decoration-style,
+  --#{root-defaults.$prefix}navigation-branding-hover-text-decoration-style,
   #{defaults.$navigation-branding-hover-text-decoration-style}
 );
 $navigation-branding-active-text-decoration-style: var(
-  --#{root-defaults.$prefix}-navigation-branding-active-text-decoration-style,
+  --#{root-defaults.$prefix}navigation-branding-active-text-decoration-style,
   #{defaults.$navigation-branding-active-text-decoration-style}
 );
 $navigation-branding-disabled-text-decoration-style: var(
-  --#{root-defaults.$prefix}-navigation-branding-disabled-text-decoration-style,
+  --#{root-defaults.$prefix}navigation-branding-disabled-text-decoration-style,
   #{defaults.$navigation-branding-disabled-text-decoration-style}
 );
 $navigation-branding-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}-navigation-branding-text-decoration-thickness,
+  --#{root-defaults.$prefix}navigation-branding-text-decoration-thickness,
   #{root-variables.$border-width}
 );
 $navigation-branding-visited-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}-navigation-branding-visited-text-decoration-thickness,
+  --#{root-defaults.$prefix}navigation-branding-visited-text-decoration-thickness,
   #{root-variables.$border-width}
 );
 $navigation-branding-focus-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}-navigation-branding-focus-text-decoration-thickness,
+  --#{root-defaults.$prefix}navigation-branding-focus-text-decoration-thickness,
   #{root-variables.$border-width}
 );
 $navigation-branding-hover-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}-navigation-branding-hover-text-decoration-thickness,
+  --#{root-defaults.$prefix}navigation-branding-hover-text-decoration-thickness,
   #{root-variables.$border-width}
 );
 $navigation-branding-active-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}-navigation-branding-active-text-decoration-thickness,
+  --#{root-defaults.$prefix}navigation-branding-active-text-decoration-thickness,
   #{root-variables.$border-width}
 );
 $navigation-branding-disabled-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}-navigation-branding-disabled-text-decoration-thickness,
+  --#{root-defaults.$prefix}navigation-branding-disabled-text-decoration-thickness,
   #{root-variables.$border-width}
 );
 $navigation-branding-text-decoration-color: var(
-  --#{root-defaults.$prefix}-navigation-branding-text-decoration-color,
+  --#{root-defaults.$prefix}navigation-branding-text-decoration-color,
   #{$navigation-branding-color}
 );
 $navigation-branding-visited-text-decoration-color: var(
-  --#{root-defaults.$prefix}-navigation-branding-visited-text-decoration-color,
+  --#{root-defaults.$prefix}navigation-branding-visited-text-decoration-color,
   #{$navigation-branding-visited-color}
 );
 $navigation-branding-focus-text-decoration-color: var(
-  --#{root-defaults.$prefix}-navigation-branding-focus-text-decoration-color,
+  --#{root-defaults.$prefix}navigation-branding-focus-text-decoration-color,
   #{$navigation-branding-focus-color}
 );
 $navigation-branding-hover-text-decoration-color: var(
-  --#{root-defaults.$prefix}-navigation-branding-hover-text-decoration-color,
+  --#{root-defaults.$prefix}navigation-branding-hover-text-decoration-color,
   #{$navigation-branding-hover-color}
 );
 $navigation-branding-active-text-decoration-color: var(
-  --#{root-defaults.$prefix}-navigation-branding-active-text-decoration-color,
+  --#{root-defaults.$prefix}navigation-branding-active-text-decoration-color,
   #{$navigation-branding-active-color}
 );
 $navigation-branding-disabled-text-decoration-color: var(
-  --#{root-defaults.$prefix}-navigation-branding-disabled-text-decoration-color,
+  --#{root-defaults.$prefix}navigation-branding-disabled-text-decoration-color,
   #{$navigation-branding-disabled-color}
 );
 
 // Navigation toggle properties.
 $navigation-toggle-content: var(
-  --#{root-defaults.$prefix}-navigation-toggle-content,
+  --#{root-defaults.$prefix}navigation-toggle-content,
   #{defaults.$navigation-toggle-content}
 );

package/src/scss/layout/columns/_index.scss

@@ -19,29 +19,29 @@
 
   @for $i from defaults.$columns-min-count through defaults.$columns-max-count {
     #{defaults.$columns-count-selector-prefix}#{$i} {
-      --#{root-defaults.$prefix}-columns-count: #{$i};
+      --#{root-defaults.$prefix}columns-count: #{$i};
 
       // For span values bigger than the actual column count, set them to the
       // maximum column count so they don't break the layout.
       @for $j from $i + 1 through defaults.$columns-max-count {
         #{defaults.$columns-span-selector-prefix}#{$j} {
-          --#{root-defaults.$prefix}-columns-span: #{$i};
+          --#{root-defaults.$prefix}columns-span: #{$i};
         }
       }
     }
 
     #{defaults.$columns-span-selector-prefix}#{$i} {
-      --#{root-defaults.$prefix}-columns-span: #{$i};
+      --#{root-defaults.$prefix}columns-span: #{$i};
     }
   }
 
   // Disable columns on small screens to avoid horizontal bleeding.
   @include screen.trigger(force-single-column) {
     #{defaults.$columns-selector} {
-      --#{root-defaults.$prefix}-columns-min-width: #{defaults.$columns-max-width};
+      --#{root-defaults.$prefix}columns-min-width: #{defaults.$columns-max-width};
 
       > * {
-        --#{root-defaults.$prefix}-columns-span: 1;
+        --#{root-defaults.$prefix}columns-span: 1;
       }
 
       // All spans should be set to 1 to avoid adding columns.
@@ -50,7 +50,7 @@
         through defaults.$columns-max-count
       {
         #{defaults.$columns-span-selector-prefix}#{$i} {
-          --#{root-defaults.$prefix}-columns-span: 1;
+          --#{root-defaults.$prefix}columns-span: 1;
         }
       }
     }

package/src/scss/layout/columns/_variables.scss

@@ -9,15 +9,15 @@
 @use "sass:map";
 
 $columns-row-gap: var(
-  --#{root-defaults.$prefix}-columns-row-gap,
+  --#{root-defaults.$prefix}columns-row-gap,
   #{map.get(root-variables.$spacers, 5)}
 );
 $columns-column-gap: var(
-  --#{root-defaults.$prefix}-columns-column-gap,
+  --#{root-defaults.$prefix}columns-column-gap,
   #{map.get(root-variables.$spacers, 5)}
 );
 $columns-count: var(
-  --#{root-defaults.$prefix}-columns-count,
+  --#{root-defaults.$prefix}columns-count,
   #{defaults.$columns-count}
 );
 
@@ -27,7 +27,7 @@ $columns-count: var(
 // We then divide this by the number of columns to get the min-width of each column.
 /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
 $columns-min-width: var(
-  --#{root-defaults.$prefix}-columns-min-width,
+  --#{root-defaults.$prefix}columns-min-width,
   calc(
     (
         #{root-variables.$content-max-width} - #{$columns-column-gap} *
@@ -38,14 +38,14 @@ $columns-min-width: var(
 );
 /* stylelint-enable  scss/operator-no-newline-after */
 $columns-max-width: var(
-  --#{root-defaults.$prefix}-columns-max-width,
+  --#{root-defaults.$prefix}columns-max-width,
   #{defaults.$columns-max-width}
 );
 $columns-grid-template-columns: var(
-  --#{root-defaults.$prefix}-columns-grid-template-columns,
+  --#{root-defaults.$prefix}columns-grid-template-columns,
   repeat(auto-fit, minmax(#{$columns-min-width}, #{$columns-max-width}))
 );
 $columns-span: var(
-  --#{root-defaults.$prefix}-columns-span,
+  --#{root-defaults.$prefix}columns-span,
   #{defaults.$columns-span}
 );

package/src/scss/layout/container/_variables.scss

@@ -9,42 +9,42 @@
 @use "sass:map";
 
 $container-gap: var(
-  --#{root-defaults.$prefix}-container-gap,
+  --#{root-defaults.$prefix}container-gap,
   #{map.get(root-variables.$spacers, 5)}
 );
 $container-content-max-width: var(
-  --#{root-defaults.$prefix}-container-content-max-width,
+  --#{root-defaults.$prefix}container-content-max-width,
   #{root-variables.$content-max-width}
 );
 $container-breakout-max-width: var(
-  --#{root-defaults.$prefix}-container-breakout-max-width,
+  --#{root-defaults.$prefix}container-breakout-max-width,
   calc(#{$container-content-max-width} + #{defaults.$container-breakout-width})
 );
 $container-breakout-width: var(
-  --#{root-defaults.$prefix}-container-breakout-width,
+  --#{root-defaults.$prefix}container-breakout-width,
   calc((#{$container-breakout-max-width} - #{$container-content-max-width}) / 2)
 );
 $container-feature-max-width: var(
-  --#{root-defaults.$prefix}-container-feature-max-width,
+  --#{root-defaults.$prefix}container-feature-max-width,
   calc(#{$container-breakout-max-width} + #{defaults.$container-feature-width})
 );
 $container-feature-width: var(
-  --#{root-defaults.$prefix}-container-feature-width,
+  --#{root-defaults.$prefix}container-feature-width,
   calc((#{$container-feature-max-width} - #{$container-breakout-max-width}) / 2)
 );
 $container-content-section-width: var(
-  --#{root-defaults.$prefix}-container-content-section-width,
+  --#{root-defaults.$prefix}container-content-section-width,
   min(#{$container-content-max-width}, calc(100% - #{$container-gap} * 2))
 );
 $container-full-width-section-width: var(
-  --#{root-defaults.$prefix}-container-full-width-section-width,
+  --#{root-defaults.$prefix}container-full-width-section-width,
   minmax(#{$container-gap}, 1fr)
 );
 $container-breakout-section-width: var(
-  --#{root-defaults.$prefix}-container-breakout-section-width,
+  --#{root-defaults.$prefix}container-breakout-section-width,
   minmax(0, #{$container-breakout-width})
 );
 $container-feature-section-width: var(
-  --#{root-defaults.$prefix}-container-feature-section-width,
+  --#{root-defaults.$prefix}container-feature-section-width,
   minmax(0, #{$container-feature-width})
 );

package/src/scss/layout/flex-columns/_index.scss

@@ -19,7 +19,7 @@
     }
 
     #{defaults.$flex-columns-fill-selector} {
-      --#{root-defaults.$prefix}-flex-columns-max-width: unset;
+      --#{root-defaults.$prefix}flex-columns-max-width: unset;
     }
   }
 
@@ -29,11 +29,11 @@
   {
     #{defaults.$flex-columns-column-selector-prefix}#{$i} {
       /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
-      --#{root-defaults.$prefix}-flex-columns-size: calc(
+      --#{root-defaults.$prefix}flex-columns-size: calc(
         (100% / #{defaults.$flex-columns-max-count} * #{$i}) -
           #{$flex-columns-column-gap}
       );
-      --#{root-defaults.$prefix}-flex-columns-max-width: calc(
+      --#{root-defaults.$prefix}flex-columns-max-width: calc(
         100% / #{defaults.$flex-columns-max-count} * #{$i}
       );
       /* stylelint-enable  scss/operator-no-newline-after */
@@ -41,8 +41,8 @@
 
     @include screen.trigger(force-single-column) {
       #{defaults.$flex-columns-column-selector-prefix}#{$i} {
-        --#{root-defaults.$prefix}-flex-columns-size: 100%;
-        --#{root-defaults.$prefix}-flex-columns-max-width: auto;
+        --#{root-defaults.$prefix}flex-columns-size: 100%;
+        --#{root-defaults.$prefix}flex-columns-max-width: auto;
       }
     }
   }
@@ -61,17 +61,17 @@
       @include screen.up($screen) {
         #{defaults.$flex-columns-column-selector-prefix}#{$screen}-#{$i} {
           /* stylelint-disable scss/operator-no-newline-after -- Prettier wants to format it this way. */
-          --#{root-defaults.$prefix}-flex-columns-size: calc(
+          --#{root-defaults.$prefix}flex-columns-size: calc(
             (100% / #{defaults.$flex-columns-max-count} * #{$i}) -
               #{$flex-columns-column-gap}
           );
           /* stylelint-enable  scss/operator-no-newline-after */
-          --#{root-defaults.$prefix}-flex-columns-max-width: calc(
+          --#{root-defaults.$prefix}flex-columns-max-width: calc(
             100% / #{defaults.$flex-columns-max-count} * #{$i}
           );
 
           &#{defaults.$flex-columns-fill-selector} {
-            --#{root-defaults.$prefix}-flex-columns-max-width: unset;
+            --#{root-defaults.$prefix}flex-columns-max-width: unset;
           }
         }
       }

package/src/scss/layout/flex-columns/_variables.scss

@@ -9,18 +9,18 @@
 
 // Flex columns properties.
 $flex-columns-row-gap: var(
-  --#{root-defaults.$prefix}-flex-columns-row-gap,
+  --#{root-defaults.$prefix}flex-columns-row-gap,
   #{columns-variables.$columns-row-gap}
 );
 $flex-columns-column-gap: var(
-  --#{root-defaults.$prefix}-flex-columns-column-gap,
+  --#{root-defaults.$prefix}flex-columns-column-gap,
   #{columns-variables.$columns-column-gap}
 );
 $flex-columns-size: var(
-  --#{root-defaults.$prefix}-flex-columns-size,
+  --#{root-defaults.$prefix}flex-columns-size,
   #{defaults.$flex-columns-size}
 );
 $flex-columns-max-width: var(
-  --#{root-defaults.$prefix}-flex-columns-max-width,
+  --#{root-defaults.$prefix}flex-columns-max-width,
   #{defaults.$flex-columns-max-width}
 );