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

package/src/scss/base/link/_index.scss

@@ -20,31 +20,31 @@
     text-decoration-thickness: $link-text-decoration-thickness;
 
     &:visited {
-      --#{root-defaults.$prefix}-link-text-decoration: #{$link-visited-text-decoration};
-      --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-visited-text-decoration-thickness};
-      --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-visited-text-decoration-style};
-      --#{root-defaults.$prefix}-link-transform: #{$link-visited-transform};
+      --#{root-defaults.$prefix}link-text-decoration: #{$link-visited-text-decoration};
+      --#{root-defaults.$prefix}link-text-decoration-thickness: #{$link-visited-text-decoration-thickness};
+      --#{root-defaults.$prefix}link-text-decoration-style: #{$link-visited-text-decoration-style};
+      --#{root-defaults.$prefix}link-transform: #{$link-visited-transform};
     }
 
     &:focus-visible {
-      --#{root-defaults.$prefix}-link-text-decoration: #{$link-focus-text-decoration};
-      --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-focus-text-decoration-thickness};
-      --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-focus-text-decoration-style};
-      --#{root-defaults.$prefix}-link-transform: #{$link-focus-transform};
+      --#{root-defaults.$prefix}link-text-decoration: #{$link-focus-text-decoration};
+      --#{root-defaults.$prefix}link-text-decoration-thickness: #{$link-focus-text-decoration-thickness};
+      --#{root-defaults.$prefix}link-text-decoration-style: #{$link-focus-text-decoration-style};
+      --#{root-defaults.$prefix}link-transform: #{$link-focus-transform};
     }
 
     &:hover {
-      --#{root-defaults.$prefix}-link-text-decoration: #{$link-hover-text-decoration};
-      --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-hover-text-decoration-thickness};
-      --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-hover-text-decoration-style};
-      --#{root-defaults.$prefix}-link-transform: #{$link-hover-transform};
+      --#{root-defaults.$prefix}link-text-decoration: #{$link-hover-text-decoration};
+      --#{root-defaults.$prefix}link-text-decoration-thickness: #{$link-hover-text-decoration-thickness};
+      --#{root-defaults.$prefix}link-text-decoration-style: #{$link-hover-text-decoration-style};
+      --#{root-defaults.$prefix}link-transform: #{$link-hover-transform};
     }
 
     &:active {
-      --#{root-defaults.$prefix}-link-text-decoration: #{$link-active-text-decoration};
-      --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-active-text-decoration-thickness};
-      --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-active-text-decoration-style};
-      --#{root-defaults.$prefix}-link-transform: #{$link-active-transform};
+      --#{root-defaults.$prefix}link-text-decoration: #{$link-active-text-decoration};
+      --#{root-defaults.$prefix}link-text-decoration-thickness: #{$link-active-text-decoration-thickness};
+      --#{root-defaults.$prefix}link-text-decoration-style: #{$link-active-text-decoration-style};
+      --#{root-defaults.$prefix}link-transform: #{$link-active-transform};
     }
 
     &:disabled,
@@ -56,10 +56,10 @@
       &:focus-visible,
       &:hover,
       &:active {
-        --#{root-defaults.$prefix}-link-text-decoration: #{$link-disabled-text-decoration};
-        --#{root-defaults.$prefix}-link-text-decoration-thickness: #{$link-disabled-text-decoration-thickness};
-        --#{root-defaults.$prefix}-link-text-decoration-style: #{$link-disabled-text-decoration-style};
-        --#{root-defaults.$prefix}-link-transform: #{$link-disabled-transform};
+        --#{root-defaults.$prefix}link-text-decoration: #{$link-disabled-text-decoration};
+        --#{root-defaults.$prefix}link-text-decoration-thickness: #{$link-disabled-text-decoration-thickness};
+        --#{root-defaults.$prefix}link-text-decoration-style: #{$link-disabled-text-decoration-style};
+        --#{root-defaults.$prefix}link-transform: #{$link-disabled-transform};
       }
     }
 
@@ -77,7 +77,7 @@
 
   @include animation.off {
     #{defaults.$link-selector} {
-      --#{root-defaults.$prefix}-link-transition: #{$link-transition-reduced-motion};
+      --#{root-defaults.$prefix}link-transition: #{$link-transition-reduced-motion};
     }
   }
 }
@@ -90,31 +90,31 @@
     text-decoration-color: $link-text-decoration-color;
 
     &:visited {
-      --#{root-defaults.$prefix}-link-color: #{$link-visited-color};
-      --#{root-defaults.$prefix}-link-background: #{$link-visited-background};
-      --#{root-defaults.$prefix}-link-border-color: #{$link-visited-border-color};
-      --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-visited-text-decoration-color};
+      --#{root-defaults.$prefix}link-color: #{$link-visited-color};
+      --#{root-defaults.$prefix}link-background: #{$link-visited-background};
+      --#{root-defaults.$prefix}link-border-color: #{$link-visited-border-color};
+      --#{root-defaults.$prefix}link-text-decoration-color: #{$link-visited-text-decoration-color};
     }
 
     &:focus-visible {
-      --#{root-defaults.$prefix}-link-color: #{$link-focus-color};
-      --#{root-defaults.$prefix}-link-background: #{$link-focus-background};
-      --#{root-defaults.$prefix}-link-border-color: #{$link-focus-border-color};
-      --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-focus-text-decoration-color};
+      --#{root-defaults.$prefix}link-color: #{$link-focus-color};
+      --#{root-defaults.$prefix}link-background: #{$link-focus-background};
+      --#{root-defaults.$prefix}link-border-color: #{$link-focus-border-color};
+      --#{root-defaults.$prefix}link-text-decoration-color: #{$link-focus-text-decoration-color};
     }
 
     &:hover {
-      --#{root-defaults.$prefix}-link-color: #{$link-hover-color};
-      --#{root-defaults.$prefix}-link-background: #{$link-hover-background};
-      --#{root-defaults.$prefix}-link-border-color: #{$link-hover-border-color};
-      --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-hover-text-decoration-color};
+      --#{root-defaults.$prefix}link-color: #{$link-hover-color};
+      --#{root-defaults.$prefix}link-background: #{$link-hover-background};
+      --#{root-defaults.$prefix}link-border-color: #{$link-hover-border-color};
+      --#{root-defaults.$prefix}link-text-decoration-color: #{$link-hover-text-decoration-color};
     }
 
     &:active {
-      --#{root-defaults.$prefix}-link-color: #{$link-active-color};
-      --#{root-defaults.$prefix}-link-background: #{$link-active-background};
-      --#{root-defaults.$prefix}-link-border-color: #{$link-active-border-color};
-      --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-active-text-decoration-color};
+      --#{root-defaults.$prefix}link-color: #{$link-active-color};
+      --#{root-defaults.$prefix}link-background: #{$link-active-background};
+      --#{root-defaults.$prefix}link-border-color: #{$link-active-border-color};
+      --#{root-defaults.$prefix}link-text-decoration-color: #{$link-active-text-decoration-color};
     }
 
     &:disabled,
@@ -124,10 +124,10 @@
       &:focus-visible,
       &:hover,
       &:active {
-        --#{root-defaults.$prefix}-link-color: #{$link-disabled-color};
-        --#{root-defaults.$prefix}-link-background: #{$link-disabled-background};
-        --#{root-defaults.$prefix}-link-border-color: #{$link-disabled-border-color};
-        --#{root-defaults.$prefix}-link-text-decoration-color: #{$link-disabled-text-decoration-color};
+        --#{root-defaults.$prefix}link-color: #{$link-disabled-color};
+        --#{root-defaults.$prefix}link-background: #{$link-disabled-background};
+        --#{root-defaults.$prefix}link-border-color: #{$link-disabled-border-color};
+        --#{root-defaults.$prefix}link-text-decoration-color: #{$link-disabled-text-decoration-color};
       }
     }
   }

package/src/scss/base/link/_variables.scss

@@ -11,163 +11,163 @@
 
 // Link properties.
 $link-text-decoration: var(
-  --#{root-defaults.$prefix}-link-text-decoration,
+  --#{root-defaults.$prefix}link-text-decoration,
   #{defaults.$link-text-decoration}
 );
 $link-visited-text-decoration: var(
-  --#{root-defaults.$prefix}-link-visited-text-decoration,
+  --#{root-defaults.$prefix}link-visited-text-decoration,
   #{defaults.$link-visited-text-decoration}
 );
 $link-focus-text-decoration: var(
-  --#{root-defaults.$prefix}-link-focus-text-decoration,
+  --#{root-defaults.$prefix}link-focus-text-decoration,
   #{defaults.$link-focus-text-decoration}
 );
 $link-hover-text-decoration: var(
-  --#{root-defaults.$prefix}-link-hover-text-decoration,
+  --#{root-defaults.$prefix}link-hover-text-decoration,
   #{defaults.$link-hover-text-decoration}
 );
 $link-active-text-decoration: var(
-  --#{root-defaults.$prefix}-link-active-text-decoration,
+  --#{root-defaults.$prefix}link-active-text-decoration,
   #{defaults.$link-active-text-decoration}
 );
 $link-disabled-text-decoration: var(
-  --#{root-defaults.$prefix}-link-disabled-text-decoration,
+  --#{root-defaults.$prefix}link-disabled-text-decoration,
   #{defaults.$link-disabled-text-decoration}
 );
 $link-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}-link-text-decoration-thickness,
+  --#{root-defaults.$prefix}link-text-decoration-thickness,
   #{root-variables.$border-width}
 );
 $link-visited-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}-link-visited-text-decoration-thickness,
+  --#{root-defaults.$prefix}link-visited-text-decoration-thickness,
   #{root-variables.$border-width}
 );
 $link-focus-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}-link-focus-text-decoration-thickness,
+  --#{root-defaults.$prefix}link-focus-text-decoration-thickness,
   #{root-variables.$border-width}
 );
 $link-hover-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}-link-hover-text-decoration-thickness,
+  --#{root-defaults.$prefix}link-hover-text-decoration-thickness,
   #{root-variables.$border-width}
 );
 $link-active-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}-link-active-text-decoration-thickness,
+  --#{root-defaults.$prefix}link-active-text-decoration-thickness,
   #{root-variables.$border-width}
 );
 $link-disabled-text-decoration-thickness: var(
-  --#{root-defaults.$prefix}-link-disabled-text-decoration-thickness,
+  --#{root-defaults.$prefix}link-disabled-text-decoration-thickness,
   #{root-variables.$border-width}
 );
 $link-text-decoration-style: var(
-  --#{root-defaults.$prefix}-link-text-decoration-style,
+  --#{root-defaults.$prefix}link-text-decoration-style,
   #{defaults.$link-text-decoration-style}
 );
 $link-visited-text-decoration-style: var(
-  --#{root-defaults.$prefix}-link-visited-text-decoration-style,
+  --#{root-defaults.$prefix}link-visited-text-decoration-style,
   #{defaults.$link-visited-text-decoration-style}
 );
 $link-focus-text-decoration-style: var(
-  --#{root-defaults.$prefix}-link-focus-text-decoration-style,
+  --#{root-defaults.$prefix}link-focus-text-decoration-style,
   #{defaults.$link-focus-text-decoration-style}
 );
 $link-hover-text-decoration-style: var(
-  --#{root-defaults.$prefix}-link-hover-text-decoration-style,
+  --#{root-defaults.$prefix}link-hover-text-decoration-style,
   #{defaults.$link-hover-text-decoration-style}
 );
 $link-active-text-decoration-style: var(
-  --#{root-defaults.$prefix}-link-active-text-decoration-style,
+  --#{root-defaults.$prefix}link-active-text-decoration-style,
   #{defaults.$link-active-text-decoration-style}
 );
 $link-disabled-text-decoration-style: var(
-  --#{root-defaults.$prefix}-link-disabled-text-decoration-style,
+  --#{root-defaults.$prefix}link-disabled-text-decoration-style,
   #{defaults.$link-disabled-text-decoration-style}
 );
 $link-color: var(
-  --#{root-defaults.$prefix}-link-color,
+  --#{root-defaults.$prefix}link-color,
   #{theme.get(primary, 700)}
 );
 $link-visited-color: var(
-  --#{root-defaults.$prefix}-link-visited-color,
+  --#{root-defaults.$prefix}link-visited-color,
   #{theme.get(primary, 700)}
 );
 $link-focus-color: var(
-  --#{root-defaults.$prefix}-link-focus-color,
+  --#{root-defaults.$prefix}link-focus-color,
   #{theme.get(primary, 700)}
 );
 $link-hover-color: var(
-  --#{root-defaults.$prefix}-link-hover-color,
+  --#{root-defaults.$prefix}link-hover-color,
   #{theme.get(tertiary, 700)}
 );
 $link-active-color: var(
-  --#{root-defaults.$prefix}-link-active-color,
+  --#{root-defaults.$prefix}link-active-color,
   #{theme.get(tertiary, 700)}
 );
 $link-disabled-color: var(
-  --#{root-defaults.$prefix}-link-disabled-color,
+  --#{root-defaults.$prefix}link-disabled-color,
   #{theme.get(primary, 200)}
 );
 $link-text-decoration-color: var(
-  --#{root-defaults.$prefix}-link-text-decoration-color,
+  --#{root-defaults.$prefix}link-text-decoration-color,
   #{$link-color}
 );
 $link-visited-text-decoration-color: var(
-  --#{root-defaults.$prefix}-link-visited-text-decoration-color,
+  --#{root-defaults.$prefix}link-visited-text-decoration-color,
   #{$link-visited-color}
 );
 $link-focus-text-decoration-color: var(
-  --#{root-defaults.$prefix}-link-focus-text-decoration-color,
+  --#{root-defaults.$prefix}link-focus-text-decoration-color,
   #{$link-focus-color}
 );
 $link-hover-text-decoration-color: var(
-  --#{root-defaults.$prefix}-link-hover-text-decoration-color,
+  --#{root-defaults.$prefix}link-hover-text-decoration-color,
   #{$link-hover-color}
 );
 $link-active-text-decoration-color: var(
-  --#{root-defaults.$prefix}-link-active-text-decoration-color,
+  --#{root-defaults.$prefix}link-active-text-decoration-color,
   #{$link-active-color}
 );
 $link-disabled-text-decoration-color: var(
-  --#{root-defaults.$prefix}-link-disabled-text-decoration-color,
+  --#{root-defaults.$prefix}link-disabled-text-decoration-color,
   #{$link-disabled-color}
 );
 $link-background: var(
-  --#{root-defaults.$prefix}-link-background,
+  --#{root-defaults.$prefix}link-background,
   #{defaults.$link-background}
 );
 $link-visited-background: var(
-  --#{root-defaults.$prefix}-link-visited-background,
+  --#{root-defaults.$prefix}link-visited-background,
   #{defaults.$link-visited-background}
 );
 $link-focus-background: var(
-  --#{root-defaults.$prefix}-link-focus-background,
+  --#{root-defaults.$prefix}link-focus-background,
   #{defaults.$link-focus-background}
 );
 $link-hover-background: var(
-  --#{root-defaults.$prefix}-link-hover-background,
+  --#{root-defaults.$prefix}link-hover-background,
   #{defaults.$link-hover-background}
 );
 $link-active-background: var(
-  --#{root-defaults.$prefix}-link-active-background,
+  --#{root-defaults.$prefix}link-active-background,
   #{defaults.$link-active-background}
 );
 $link-disabled-background: var(
-  --#{root-defaults.$prefix}-link-disabled-background,
+  --#{root-defaults.$prefix}link-disabled-background,
   #{defaults.$link-disabled-background}
 );
 $link-padding-x: var(
-  --#{root-defaults.$prefix}-link-padding-x,
+  --#{root-defaults.$prefix}link-padding-x,
   #{map.get(root-variables.$spacers, 0)}
 );
 $link-padding-y: var(
-  --#{root-defaults.$prefix}-link-padding-y,
+  --#{root-defaults.$prefix}link-padding-y,
   #{map.get(root-variables.$spacers, 0)}
 );
 $link-padding: var(
-  --#{root-defaults.$prefix}-link-padding,
+  --#{root-defaults.$prefix}link-padding,
   #{$link-padding-y} #{$link-padding-x}
 );
 $link-transition: var(
-  --#{root-defaults.$prefix}-link-transition,
+  --#{root-defaults.$prefix}link-transition,
   background #{map.get(root-variables.$transition-durations, fast)}
     #{root-variables.$transition-timing-function},
   color #{map.get(root-variables.$transition-durations, fast)}
@@ -176,87 +176,87 @@ $link-transition: var(
     #{root-variables.$transition-timing-function}
 );
 $link-transition-reduced-motion: var(
-  --#{root-defaults.$prefix}-link-transition-reduced-motion,
+  --#{root-defaults.$prefix}link-transition-reduced-motion,
   background #{map.get(root-variables.$transition-durations, none)}
     #{root-variables.$transition-timing-function},
   color #{map.get(root-variables.$transition-durations, none)}
     #{root-variables.$transition-timing-function}
 );
 $link-transform: var(
-  --#{root-defaults.$prefix}-link-transform,
+  --#{root-defaults.$prefix}link-transform,
   #{defaults.$link-transform}
 );
 $link-visited-transform: var(
-  --#{root-defaults.$prefix}-link-visited-transform,
+  --#{root-defaults.$prefix}link-visited-transform,
   #{defaults.$link-visited-transform}
 );
 $link-focus-transform: var(
-  --#{root-defaults.$prefix}-link-focus-transform,
+  --#{root-defaults.$prefix}link-focus-transform,
   #{defaults.$link-focus-transform}
 );
 $link-hover-transform: var(
-  --#{root-defaults.$prefix}-link-hover-transform,
+  --#{root-defaults.$prefix}link-hover-transform,
   #{defaults.$link-hover-transform}
 );
 $link-active-transform: var(
-  --#{root-defaults.$prefix}-link-active-transform,
+  --#{root-defaults.$prefix}link-active-transform,
   #{defaults.$link-active-transform}
 );
 $link-disabled-transform: var(
-  --#{root-defaults.$prefix}-link-disabled-transform,
+  --#{root-defaults.$prefix}link-disabled-transform,
   #{defaults.$link-disabled-transform}
 );
 $link-border-width: var(
-  --#{root-defaults.$prefix}-link-border-width,
+  --#{root-defaults.$prefix}link-border-width,
   #{defaults.$link-border-width}
 );
 $link-border-style: var(
-  --#{root-defaults.$prefix}-link-border-style,
+  --#{root-defaults.$prefix}link-border-style,
   #{root-variables.$border-style}
 );
 $link-border: var(
-  --#{root-defaults.$prefix}-link-border,
+  --#{root-defaults.$prefix}link-border,
   #{$link-border-width} #{$link-border-style}
 );
 $link-border-radius: var(
-  --#{root-defaults.$prefix}-link-border-radius,
+  --#{root-defaults.$prefix}link-border-radius,
   #{root-variables.$border-radius}
 );
 $link-border-color: var(
-  --#{root-defaults.$prefix}-link-border-color,
+  --#{root-defaults.$prefix}link-border-color,
   #{defaults.$link-border-color}
 );
 $link-visited-border-color: var(
-  --#{root-defaults.$prefix}-link-visited-border-color,
+  --#{root-defaults.$prefix}link-visited-border-color,
   #{defaults.$link-visited-border-color}
 );
 $link-focus-border-color: var(
-  --#{root-defaults.$prefix}-link-focus-border-color,
+  --#{root-defaults.$prefix}link-focus-border-color,
   #{defaults.$link-focus-border-color}
 );
 $link-hover-border-color: var(
-  --#{root-defaults.$prefix}-link-hover-border-color,
+  --#{root-defaults.$prefix}link-hover-border-color,
   #{defaults.$link-hover-border-color}
 );
 $link-active-border-color: var(
-  --#{root-defaults.$prefix}-link-active-border-color,
+  --#{root-defaults.$prefix}link-active-border-color,
   #{defaults.$link-active-border-color}
 );
 $link-disabled-border-color: var(
-  --#{root-defaults.$prefix}-link-disabled-border-color,
+  --#{root-defaults.$prefix}link-disabled-border-color,
   #{defaults.$link-disabled-border-color}
 );
 $link-min-width: var(
-  --#{root-defaults.$prefix}-link-min-width,
+  --#{root-defaults.$prefix}link-min-width,
   defaults.$link-min-width
 );
 $link-min-height: var(
-  --#{root-defaults.$prefix}-link-min-height,
+  --#{root-defaults.$prefix}link-min-height,
   defaults.$link-min-height
 );
 
 // Stretched link properties.
 $stretched-link-z-index: var(
-  --#{root-defaults.$prefix}-stretched-link-z-index,
+  --#{root-defaults.$prefix}stretched-link-z-index,
   #{defaults.$stretched-link-z-index}
 );

package/src/scss/base/table/_index.scss

@@ -55,7 +55,7 @@
       &#{defaults.$table-theme-prefix-selector}#{$variant},
       #{defaults.$table-theme-prefix-selector}#{$variant} {
         @each $prop, $key in defaults.$table-theme-map {
-          --#{root-defaults.$prefix}-table-#{$prop}: #{theme.get(
+          --#{root-defaults.$prefix}table-#{$prop}: #{theme.get(
               $variant,
               $key
             )};
@@ -110,12 +110,12 @@
     }
 
     #{defaults.$table-highlight-selector} {
-      --#{root-defaults.$prefix}-table-cell-background: #{$table-highlight-background};
-      --#{root-defaults.$prefix}-table-cell-color: #{$table-highlight-color};
-      --#{root-defaults.$prefix}-table-header-background: #{$table-highlight-background};
-      --#{root-defaults.$prefix}-table-header-color: #{$table-highlight-color};
-      --#{root-defaults.$prefix}-table-striped-background: #{$table-highlight-background};
-      --#{root-defaults.$prefix}-table-striped-color: #{$table-highlight-color};
+      --#{root-defaults.$prefix}table-cell-background: #{$table-highlight-background};
+      --#{root-defaults.$prefix}table-cell-color: #{$table-highlight-color};
+      --#{root-defaults.$prefix}table-header-background: #{$table-highlight-background};
+      --#{root-defaults.$prefix}table-header-color: #{$table-highlight-color};
+      --#{root-defaults.$prefix}table-striped-background: #{$table-highlight-background};
+      --#{root-defaults.$prefix}table-striped-color: #{$table-highlight-color};
     }
   }
 }

package/src/scss/base/table/_variables.scss

@@ -13,123 +13,123 @@
 
 // Table caption properties.
 $table-caption-side: var(
-  --#{root-defaults.$prefix}-table-caption-side,
+  --#{root-defaults.$prefix}table-caption-side,
   #{defaults.$table-caption-side}
 );
 $table-caption-padding-x: var(
-  --#{root-defaults.$prefix}-table-caption-padding-x,
+  --#{root-defaults.$prefix}table-caption-padding-x,
   #{map.get(root-variables.$spacers, 3)}
 );
 $table-caption-padding-y: var(
-  --#{root-defaults.$prefix}-table-caption-padding-y,
+  --#{root-defaults.$prefix}table-caption-padding-y,
   #{map.get(root-variables.$spacers, 3)}
 );
 $table-caption-padding: $table-caption-padding-y $table-caption-padding-x;
 
 // Table header properties.
 $table-header-font-weight: var(
-  --#{root-defaults.$prefix}-table-header-font-weight,
+  --#{root-defaults.$prefix}table-header-font-weight,
   #{typography.$font-weight-bold}
 );
 $table-header-padding-x: var(
-  --#{root-defaults.$prefix}-table-header-padding-x,
+  --#{root-defaults.$prefix}table-header-padding-x,
   #{map.get(root-variables.$spacers, 3)}
 );
 $table-header-padding-y: var(
-  --#{root-defaults.$prefix}-table-header-padding-y,
+  --#{root-defaults.$prefix}table-header-padding-y,
   #{map.get(root-variables.$spacers, 3)}
 );
 $table-header-padding: $table-header-padding-y $table-header-padding-x;
 $table-header-background: var(
-  --#{root-defaults.$prefix}-table-header-background,
+  --#{root-defaults.$prefix}table-header-background,
   #{color.$root-background}
 );
 $table-header-color: var(
-  --#{root-defaults.$prefix}-table-header-color,
+  --#{root-defaults.$prefix}table-header-color,
   #{color.$root-color}
 );
 
 // Table cell properties.
 $table-cell-padding-x: var(
-  --#{root-defaults.$prefix}-table-cell-padding-x,
+  --#{root-defaults.$prefix}table-cell-padding-x,
   #{map.get(root-variables.$spacers, 3)}
 );
 $table-cell-padding-y: var(
-  --#{root-defaults.$prefix}-table-cell-padding-y,
+  --#{root-defaults.$prefix}table-cell-padding-y,
   #{map.get(root-variables.$spacers, 3)}
 );
 $table-cell-padding: $table-cell-padding-y $table-cell-padding-x;
 $table-cell-background: var(
-  --#{root-defaults.$prefix}-table-cell-background,
+  --#{root-defaults.$prefix}table-cell-background,
   #{color.$root-background}
 );
 $table-cell-color: var(
-  --#{root-defaults.$prefix}-table-cell-color,
+  --#{root-defaults.$prefix}table-cell-color,
   #{color.$root-color}
 );
 
 // Table border properties.
 $table-border-width: var(
-  --#{root-defaults.$prefix}-table-border-width,
+  --#{root-defaults.$prefix}table-border-width,
   #{root-variables.$border-width}
 );
 $table-border-style: var(
-  --#{root-defaults.$prefix}-table-border-style,
+  --#{root-defaults.$prefix}table-border-style,
   #{root-variables.$border-style}
 );
 $table-border: var(
-  --#{root-defaults.$prefix}-table-border,
+  --#{root-defaults.$prefix}table-border,
   #{$table-border-width} #{$table-border-style}
 );
 $table-border-color: var(
-  --#{root-defaults.$prefix}-table-border-color,
+  --#{root-defaults.$prefix}table-border-color,
   #{theme.get(primary, 900)}
 );
 
 // Table cell border properties.
 $table-cell-border-width: var(
-  --#{root-defaults.$prefix}-table-cell-border-width,
+  --#{root-defaults.$prefix}table-cell-border-width,
   #{$table-border-width}
 );
 $table-cell-border-style: var(
-  --#{root-defaults.$prefix}-table-cell-border-style,
+  --#{root-defaults.$prefix}table-cell-border-style,
   #{$table-border-style}
 );
 $table-cell-border: var(
-  --#{root-defaults.$prefix}-table-cell-border,
+  --#{root-defaults.$prefix}table-cell-border,
   #{$table-cell-border-width} #{$table-cell-border-style}
 );
 $table-cell-border-color: var(
-  --#{root-defaults.$prefix}-table-cell-border-color,
+  --#{root-defaults.$prefix}table-cell-border-color,
   #{$table-border-color}
 );
 
 // Table striped properties.
 $table-striped-background: var(
-  --#{root-defaults.$prefix}-table-striped-background,
+  --#{root-defaults.$prefix}table-striped-background,
   #{theme.get(secondary, 200)}
 );
 $table-striped-color: var(
-  --#{root-defaults.$prefix}-table-striped-color,
+  --#{root-defaults.$prefix}table-striped-color,
   #{theme.get(secondary, 900)}
 );
 
 // Table hover properties.
 $table-hover-background: var(
-  --#{root-defaults.$prefix}-table-hover-background,
+  --#{root-defaults.$prefix}table-hover-background,
   #{theme.get(secondary, 300)}
 );
 $table-hover-color: var(
-  --#{root-defaults.$prefix}-table-hover-color,
+  --#{root-defaults.$prefix}table-hover-color,
   #{theme.get(secondary, 900)}
 );
 
 // Table highlight properties.
 $table-highlight-background: var(
-  --#{root-defaults.$prefix}-table-highlight-background,
+  --#{root-defaults.$prefix}table-highlight-background,
   #{theme.get(secondary, 500)}
 );
 $table-highlight-color: var(
-  --#{root-defaults.$prefix}-table-highlight-color,
+  --#{root-defaults.$prefix}table-highlight-color,
   #{theme.get(secondary, 100)}
 );

package/src/scss/component/_index.scss

@@ -5,5 +5,6 @@
 @forward "card";
 @forward "carousel";
 @forward "input-group";
+@forward "list";
 @forward "menu";
 @forward "navigation";