@breadstone/mosaik-themes 0.0.30 → 0.0.32

package/Themes/retro.scss

@@ -2,7 +2,6 @@
 @use 'sass:list';
 @use 'sass:meta';
 @use 'sass:string';
-
 @mixin _generate-elevation-vars($map, $prefix, $mode) {
     @each $key, $value in $map {
         @if meta.type-of($value) == 'map' {
@@ -16,7 +15,6 @@
         }
     }
 }
-
 @mixin _generate-elevation-composite($map, $prefix, $mode) {
     @each $key, $value in $map {
         @if meta.type-of($value) == 'map' {
@@ -32,7 +30,6 @@
         }
     }
 }
-
 @mixin _remap-elevation-vars($map, $prefix, $mode) {
     @each $key, $value in $map {
         @if meta.type-of($value) == 'map' {
@@ -47,24 +44,18 @@
         }
     }
 }
-
 @function box-shadow($x: 0px, $y: 0px, $blur: 0px, $spread: 0px, $color: rgba(0, 0, 0, 0.5), $inset: false) {
     $shadow: #{$x} #{$y} #{$blur} #{$spread} #{$color};
-
     @if $inset {
         $shadow: inset $shadow;
     }
-
     @return $shadow;
 }
-
 @function box-shadow-with-color($shadows, $new-color) {
     $output: ();
-
     @each $shadow in $shadows {
         $parts: ();
         $color: null;
-
         // break apart the shadow into components
         @each $part in $shadow {
             @if type-of($part) == 'color' {
@@ -73,15 +64,12 @@
                 $parts: append($parts, $part);
             }
         }
-
         // append the new color in place of the original
         $parts: append($parts, $new-color);
         $output: append($output, $parts, comma);
     }
-
     @return $output;
 }
-
 $name: "retro";
 $font-family: Nunito, sans-serif;
 $layout-radius: 0px;
@@ -466,10 +454,6 @@ $elevation-key: $elevation-key-light $elevation-key-semilight $elevation-key-reg
 $appearance: $appearance-default $appearance-outline $appearance-plain $appearance-soft $appearance-solid;
 $variant: $variant-primary $variant-secondary $variant-info $variant-warning $variant-danger $variant-success $variant-neutral;
 $size: $size-tiny $size-small $size-medium $size-large $size-giant;
-
-
-
-
 $_color-light: (
     primary: (
         0: $color-light-primary-0,
@@ -563,7 +547,6 @@ $_color-light: (
         900: $color-light-neutral-900
     )
 );
-
 $_color-dark: (
     primary: (
         0: $color-dark-primary-0,
@@ -657,7 +640,6 @@ $_color-dark: (
         900: $color-dark-neutral-900
     )
 );
-
 @mixin color-style($prefix) {
     :root,
     :host {
@@ -670,7 +652,6 @@ $_color-dark: (
                 #{'--#{$prefix}-color-light-#{$palette-key}'}: #{$palette-steps};
             }
         }
-
         // remap the light colors to the default colors
         @each $palette-key, $palette-steps in $_color-light {
             @if meta.type-of($palette-steps) == 'map' {
@@ -681,7 +662,6 @@ $_color-dark: (
                 #{'--#{$prefix}-color-light-#{$palette-key}'}: var(--#{$prefix}-color-#{$palette-key});
             }
         }
-
         &.dark,
         &[theme-mode='dark'] {
             @each $palette-key, $palette-steps in $_color-dark {
@@ -693,7 +673,6 @@ $_color-dark: (
                     #{'--#{$prefix}-color-dark-#{$palette-key}'}: #{$palette-steps};
                 }
             }
-
             // remap the dark colors to the default colors
             @each $palette-key, $palette-steps in $_color-dark {
                 @if meta.type-of($palette-steps) == 'map' {
@@ -707,38 +686,31 @@ $_color-dark: (
         }
     }
 }
-
 @function get-color($variant, $level, $mode: '') {
     @if $mode == '' {
         @return var(--#{$name}-color-#{$variant}-#{$level});
     }
-
     @return var(--#{$name}-color-#{$mode}-#{$variant}-#{$level});
 }
-
 @mixin _scrollbar-style($prefix) {
     * {
         /* Firefox */
         scrollbar-color: var(--#{$prefix}-scheme-highlight) var(--#{$prefix}-scheme-transparent);
         scrollbar-width: thin;
-
         /* Styling the scrollbar in Chrome and Safari */
         &::-webkit-scrollbar {
             width: 12px;
         }
-
         /* Set thumb color for Chrome and Safari */
         &::-webkit-scrollbar-thumb {
             background-color: var(--#{$prefix}-scheme-highlight);
         }
-
         /* Set track color for Chrome and Safari */
         &::-webkit-scrollbar-track {
             background-color: var(--#{$prefix}-scheme-transparent);
         }
     }
 }
-
 @mixin _selection-style($prefix) {
     * {
         /* Set selection color */
@@ -749,17 +721,10 @@ $_color-dark: (
         }
     }
 }
-
 @mixin common-style($prefix) {
     @include _scrollbar-style($prefix);
     @include _selection-style($prefix);
 }
-
-
-
-
-
-
 $_shadows-light: (
     none: $elevation-none,
     light: (
@@ -816,8 +781,7 @@ $_shadows-light: (
             color: $elevation-light-extrabold-color-0
         )
     )
-);
-
+);
 $_shadows-dark: (
     none: $elevation-none,
     light: (
@@ -874,16 +838,14 @@ $_shadows-dark: (
             color: $elevation-dark-extrabold-color-0
         )
     )
-);
-
+);
 @mixin elevation-style($prefix) {
     :root,
     :host {
         $mode: 'light';
         @include _generate-elevation-vars($_shadows-light, $prefix, $mode);
         @include _generate-elevation-composite($_shadows-light, $prefix, $mode);
-        @include _remap-elevation-vars($_shadows-light, $prefix, $mode);
-
+        @include _remap-elevation-vars($_shadows-light, $prefix, $mode);
         &.dark,
         &[theme-mode='dark'] {
             $mode: 'dark';
@@ -892,8 +854,7 @@ $_shadows-dark: (
             @include _remap-elevation-vars($_shadows-dark, $prefix, $mode);
         }
     }
-}
-
+}
 @function get-elevation($weight, $mode: '') {
     $elevations: (
         '': (
@@ -907,59 +868,42 @@ $_shadows-dark: (
         ),
         'light': $_shadows-light,
         'dark': $_shadows-dark
-    );
-
+    );
     @if (list.index($elevation-key, $weight) == null) {
         @error "Invalid weight: #{$weight}";
-    }
-
+    }
     @return var(map.get(map.get($elevations, $mode), $weight));
-}
-
+}
 @function get-shadow($elevation, $overrides: ()) {
     $shadow-props: (offset-x, offset-y, blur, spread, color);
     $name: $name;
     $shadows: ();
-    $max-layer: -1;
-
+    $max-layer: -1;
     @if meta.type-of($overrides) == 'map' {
         @each $layer, $values in $overrides {
             @if meta.type-of($layer) == 'number' and $layer > $max-layer {
                 $max-layer: $layer;
             }
         }
-    }
-
+    }
     @if $max-layer == -1 {
         $max-layer: 0;
-    }
-
+    }
     @for $layer from 0 through $max-layer {
-        $shadow-layer: ();
-
+        $shadow-layer: ();
         @each $prop in $shadow-props {
-            $value: null;
-
+            $value: null;
             @if map.has-key($overrides, $layer) and map.has-key(map.get($overrides, $layer), $prop) {
                 $value: map.get(map.get($overrides, $layer), $prop);
             } @else {
                 $value: var(--#{$name}-elevation-#{$elevation}-#{$prop}-#{$layer});
-            }
-
+            }
             $shadow-layer: list.append($shadow-layer, $value, $separator: space);
-        }
-
+        }
         $shadows: list.append($shadows, list.join($shadow-layer, (), $separator: space), $separator: comma);
-    }
-
+    }
     @return list.join($shadows, (), $separator: comma);
-}
-
-
-
-
-
-
+}
 @mixin layout-style($prefix, $radius: $layout-radius, $thickness: $layout-thickness, $space: $layout-space, $transition: $duration-short) {
     $layouts: ();
     $layouts: map.merge(
@@ -986,7 +930,6 @@ $_shadows-dark: (
             '#{$prefix}-layout-transition': $transition
         )
     );
-
     @if list.length($layouts) {
         :root,
         :host {
@@ -996,23 +939,18 @@ $_shadows-dark: (
         }
     }
 }
-
 @function get-layout($key) {
     $layouts: (
         'radius': --#{$name}-layout-radius,
         'space': --#{$name}-layout-space,
         'thickness': --#{$name}-layout-thickness
     );
-
     @if map.has-key($layouts, $key) {
         @return var(map.get($layouts, $key));
     } @else {
         @error "Invalid layout value: #{$key}";
     }
 }
-
-
-
 $scheme-light: (
     background: $scheme-light-background,
     foreground: $scheme-light-foreground,
@@ -1024,7 +962,6 @@ $scheme-light: (
     disabled: $scheme-light-disabled,
     contrast: $scheme-light-contrast
 );
-
 $scheme-dark: (
     background: $scheme-dark-background,
     foreground: $scheme-dark-foreground,
@@ -1036,36 +973,30 @@ $scheme-dark: (
     disabled: $scheme-dark-disabled,
     contrast: $scheme-dark-contrast
 );
-
 @mixin scheme-style($prefix) {
     :root,
     :host {
         @each $key, $value in $scheme-light {
             #{'--#{$prefix}-scheme-light-#{$key}'}: #{$value};
         }
-
         @each $key, $value in $scheme-light {
             #{'--#{$prefix}-scheme-#{$key}'}: var(--#{$prefix}-scheme-light-#{$key});
         }
-
         &.dark,
         &[theme-mode='dark'] {
             @each $key, $value in $scheme-dark {
                 #{'--#{$prefix}-scheme-dark-#{$key}'}: #{$value};
             }
-
             @each $key, $value in $scheme-dark {
                 #{'--#{$prefix}-scheme-#{$key}'}: var(--#{$prefix}-scheme-dark-#{$key});
             }
         }
     }
 }
-
 @function get-scheme($key, $mode: '') {
     @if ($mode == '') {
         $mode: '';
     }
-
     $schemes: (
         '': (
             'background': --#{$name}-scheme-background,
@@ -1101,7 +1032,6 @@ $scheme-dark: (
             'contrast': --#{$name}-scheme-dark-contrast
         )
     );
-
     @if map.has-key($schemes, $mode) {
         @if (map.has-key(map.get($schemes, $mode), $key)) {
             @return var(map.get(map.get($schemes, $mode), $key));
@@ -1112,14 +1042,8 @@ $scheme-dark: (
         @error "Invalid scheme mode: #{$mode}";
     }
 }
-
-
-
-
-
 @function typography-palette() {
-    $base-styles: (-moz-osx-font-smoothing: grayscale, -webkit-font-smoothing: antialiased, font-family: $font-family);
-
+    $base-styles: (-moz-osx-font-smoothing: grayscale, -webkit-font-smoothing: antialiased, font-family: $font-family);
     $scale-styles: (
         'typography': $base-styles,
         'typography-headline1': (
@@ -1239,33 +1163,26 @@ $scheme-dark: (
             text-decoration: $typography-overline-text-decoration,
             text-transform: $typography-overline-text-transform
         )
-    );
-
+    );
     @each $style, $style-props in $scale-styles {
         // Merge base properties for all styles.
         $style-props: map.merge($base-styles, $style-props);
         // Override original styles with new styles.
         $scale-styles: map.merge($scale-styles, (#{$style}: $style-props));
-    }
-
+    }
     @return $scale-styles;
-}
-
+}
 @mixin typography-style($prefix) {
-    $typographies-map: typography-palette();
-
+    $typographies-map: typography-palette();
     :root,
     :host {
-        --#{$prefix}-font-family: #{$font-family};
-
+        --#{$prefix}-font-family: #{$font-family};
         @each $style in map.keys($typographies-map) {
             @if $style != 'typography' {
                 @if not map.has-key($typographies-map, $style) {
                     @error 'Invalid style specified! #{$style} does not exist. Choose one of #{map.keys($typographies-map)}';
-                }
-
-                $style-props: map.get($typographies-map, $style);
-
+                }
+                $style-props: map.get($typographies-map, $style);
                 --#{$prefix}-#{$style}-font-family: #{map.get($style-props, 'font-family')};
                 --#{$prefix}-#{$style}-font-size: #{map.get($style-props, 'font-size')};
                 --#{$prefix}-#{$style}-line-height: #{map.get($style-props, 'line-height')};
@@ -1276,23 +1193,19 @@ $scheme-dark: (
                 --#{$prefix}-#{$style}: #{map.get($style-props, 'font-weight')} #{map.get($style-props, 'font-size')}/#{map.get($style-props, 'line-height')} #{map.get($style-props, 'font-family')};
             }
         }
-    }
-
+    }
     @each $style in map.keys($typographies-map) {
         .#{$style} {
-            $style-props: map.get($typographies-map, $style);
-
+            $style-props: map.get($typographies-map, $style);
             @if not map.has-key($typographies-map, $style) {
                 @error 'Invalid style specified! #{$style} does not exist. Choose one of #{map.keys($typographies-map)}';
-            }
-
+            }
             @each $key, $value in $style-props {
                 #{$key}: $value;
             }
         }
     }
-}
-
+}
 @function get-typography($type, $property) {
     $properties: (
         'font-family': --#{$name}-typography-#{$type}-font-family,
@@ -1302,39 +1215,25 @@ $scheme-dark: (
         'letter-spacing': --#{$name}-typography-#{$type}-letter-spacing,
         'text-decoration': --#{$name}-typography-#{$type}-text-decoration,
         'text-transform': --#{$name}-typography-#{$type}-text-transform
-    );
-
+    );
     @if map.has-key($properties, $property) {
         @return var(map.get($properties, $property));
     } @else {
         @error "Invalid typography property: #{$property}";
     }
-}
-
-
-
-
-
-
-
-
-
+}
 @mixin retro-style($radius: $layout-radius, $thickness: $layout-thickness, $space: $layout-space) {
     $theme: 'retro';
-
     @include layout-style($theme, $radius, $thickness, $space);
     @include scheme-style($theme);
     @include color-style($theme);
     @include elevation-style($theme);
     @include typography-style($theme);
     @include common-style($theme);
-
     :host {
         @content;
     }
 }
-
-
 $absolute-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1352,8 +1251,7 @@ $absolute-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $absolute-item-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1371,8 +1269,7 @@ $absolute-item-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $accordion-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1390,8 +1287,7 @@ $accordion-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $alert-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1409,8 +1305,7 @@ $alert-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $anchor-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-button-font-size),
@@ -1431,8 +1326,7 @@ $anchor-props: (
   'background-color': var(--retro-scheme-background),
   'border-color': var(--retro-scheme-highlight),
   'foreground-color': var(--retro-scheme-foreground)
-);
-
+);
 $app-props: (
   'font-family': var(--retro-typography-body1-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -1452,8 +1346,7 @@ $app-props: (
   'translate': "unset",
   'background-color': var(--retro-scheme-background),
   'foreground-color': var(--retro-scheme-foreground)
-);
-
+);
 $app-header-props: (
   'font-family': var(--retro-typography-headline6-font-family),
   'font-size': var(--retro-typography-headline6-font-size),
@@ -1477,8 +1370,7 @@ $app-header-props: (
   'border-style': solid,
   'border-width': var(--retro-layout-thickness),
   'foreground-color': var(--retro-scheme-foreground)
-);
-
+);
 $auto-complete-box-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1507,8 +1399,7 @@ $auto-complete-box-props: (
   'shadow-offset-x': unset,
   'shadow-offset-y': unset,
   'shadow-spread': unset
-);
-
+);
 $avatar-props: (
   'font-family': var(--retro-font-family),
   'font-size': 32px,
@@ -1543,8 +1434,7 @@ $avatar-props: (
   'shadow-offset-x': var(--retro-elevation-semilight-offset-x-0),
   'shadow-offset-y': var(--retro-elevation-semilight-offset-y-0),
   'shadow-spread': var(--retro-elevation-semilight-spread-0)
-);
-
+);
 $avatar-group-props: (
   'font-family': unset,
   'font-size': unset,
@@ -1573,8 +1463,7 @@ $avatar-group-props: (
   'shadow-offset-x': unset,
   'shadow-offset-y': unset,
   'shadow-spread': unset
-);
-
+);
 $back-top-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1592,8 +1481,7 @@ $back-top-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $backdrop-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1612,8 +1500,7 @@ $backdrop-props: (
   'transition-property': opacity,
   'translate': "unset",
   'background-color': var(--retro-scheme-semi-transparent)
-);
-
+);
 $badge-props: (
   'font-family': unset,
   'font-size': unset,
@@ -1643,8 +1530,7 @@ $badge-props: (
   'shadow-offset-y': unset,
   'shadow-spread': unset,
   'size': unset
-);
-
+);
 $banner-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -1673,8 +1559,7 @@ $banner-props: (
   'shadow-offset-x': var(--retro-elevation-semilight-offset-x-0),
   'shadow-offset-y': var(--retro-elevation-semilight-offset-y-0),
   'shadow-spread': var(--retro-elevation-semilight-spread-0)
-);
-
+);
 $banner-header-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -1695,8 +1580,7 @@ $banner-header-props: (
   'background-color': unset,
   'border-color': unset,
   'foreground-color': var(--retro-scheme-foreground)
-);
-
+);
 $banner-sub-header-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body2-font-size),
@@ -1717,8 +1601,7 @@ $banner-sub-header-props: (
   'background-color': unset,
   'border-color': unset,
   'foreground-color': var(--retro-scheme-foreground)
-);
-
+);
 $bottom-sheet-props: (
   'font-family': unset,
   'font-size': unset,
@@ -1741,8 +1624,7 @@ $bottom-sheet-props: (
   'border-width': unset,
   'foreground-color': unset,
   'translate-y': unset
-);
-
+);
 $box-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1765,9 +1647,10 @@ $box-props: (
   'border-radius': 0,
   'border-style': solid,
   'border-width': 0,
-  'foreground-color': unset
-);
-
+  'foreground-color': unset,
+  'height': auto,
+  'width': auto
+);
 $breadcrumb-props: (
   'font-family': unset,
   'font-size': unset,
@@ -1785,8 +1668,7 @@ $breadcrumb-props: (
   'transition-mode': unset,
   'transition-property': unset,
   'translate': unset
-);
-
+);
 $breadcrumb-item-props: (
   'font-family': unset,
   'font-size': unset,
@@ -1804,8 +1686,7 @@ $breadcrumb-item-props: (
   'transition-mode': unset,
   'transition-property': unset,
   'translate': unset
-);
-
+);
 $button-props: (
   'font-family': var(--retro-typography-button-font-family),
   'font-size': var(--retro-typography-button-font-size),
@@ -1828,6 +1709,7 @@ $button-props: (
   'border-radius': var(--retro-layout-radius),
   'border-style': solid,
   'border-width': var(--retro-layout-thickness),
+  'focus-ring-color': var(--retro-scheme-highlight),
   'foreground-color': var(--retro-scheme-foreground),
   'height': calc(calc(var(--retro-layout-space) * 5) - calc(var(--retro-layout-space) / 2)),
   'progress-thickness': var(--retro-layout-thickness),
@@ -1837,8 +1719,7 @@ $button-props: (
   'shadow-offset-y': var(--retro-elevation-semilight-offset-y-0),
   'shadow-spread': var(--retro-elevation-semilight-spread-0),
   'width': auto
-);
-
+);
 $button-group-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-button-font-size),
@@ -1867,8 +1748,7 @@ $button-group-props: (
   'shadow-offset-x': unset,
   'shadow-offset-y': unset,
   'shadow-spread': unset
-);
-
+);
 $calendar-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -1898,8 +1778,7 @@ $calendar-props: (
   'shadow-offset-x': var(--retro-elevation-light-offset-x-0),
   'shadow-offset-y': var(--retro-elevation-light-offset-y-0),
   'shadow-spread': var(--retro-elevation-light-spread-0)
-);
-
+);
 $calendar-days-view-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1917,8 +1796,7 @@ $calendar-days-view-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $calendar-header-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1942,8 +1820,7 @@ $calendar-header-props: (
   'border-style': solid,
   'border-width': var(--retro-layout-thickness),
   'foreground-color': var(--retro-scheme-lowlight)
-);
-
+);
 $calendar-item-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -1972,8 +1849,7 @@ $calendar-item-props: (
   'shadow-offset-x': var(--retro-elevation-light-offset-x-0),
   'shadow-offset-y': var(--retro-elevation-light-offset-y-0),
   'shadow-spread': var(--retro-elevation-light-spread-0)
-);
-
+);
 $calendar-months-view-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -1991,8 +1867,7 @@ $calendar-months-view-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $calendar-sub-header-props: (
   'font-family': "unset",
   'font-size': 18px,
@@ -2018,8 +1893,7 @@ $calendar-sub-header-props: (
   'font': var(--calendar-sub-header-font-weight) var(--calendar-sub-header-font-size) / var(--calendar-sub-header-line-height) var(--calendar-sub-header-font-family),
   'foreground-color': var(--retro-scheme-foreground),
   'line-height': 22px
-);
-
+);
 $calendar-years-view-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2037,8 +1911,7 @@ $calendar-years-view-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $camera-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2059,8 +1932,7 @@ $camera-props: (
   'background-color': unset,
   'border-radius': unset,
   'foreground-color': unset
-);
-
+);
 $card-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -2090,8 +1962,7 @@ $card-props: (
   'shadow-offset-x': var(--retro-elevation-bold-offset-x-0),
   'shadow-offset-y': var(--retro-elevation-bold-offset-y-0),
   'shadow-spread': var(--retro-elevation-bold-spread-0)
-);
-
+);
 $card-actions-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2109,8 +1980,7 @@ $card-actions-props: (
   'transition-mode': unset,
   'transition-property': unset,
   'translate': unset
-);
-
+);
 $card-content-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2128,8 +1998,7 @@ $card-content-props: (
   'transition-mode': unset,
   'transition-property': unset,
   'translate': unset
-);
-
+);
 $card-footer-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2147,8 +2016,7 @@ $card-footer-props: (
   'transition-mode': unset,
   'transition-property': unset,
   'translate': unset
-);
-
+);
 $card-header-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2166,8 +2034,7 @@ $card-header-props: (
   'transition-mode': unset,
   'transition-property': unset,
   'translate': unset
-);
-
+);
 $card-sub-title-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-subtitle1-font-size),
@@ -2188,8 +2055,7 @@ $card-sub-title-props: (
   'background-color': var(--retro-scheme-transparent),
   'border-color': var(--retro-scheme-contrast),
   'foreground-color': var(--retro-scheme-middlelight)
-);
-
+);
 $card-title-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-headline6-font-size),
@@ -2210,8 +2076,7 @@ $card-title-props: (
   'background-color': var(--retro-scheme-transparent),
   'border-color': var(--retro-scheme-contrast),
   'foreground-color': var(--retro-scheme-foreground)
-);
-
+);
 $carousel-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2229,8 +2094,7 @@ $carousel-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $carousel2-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2248,8 +2112,7 @@ $carousel2-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $carousel-item-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2267,8 +2130,7 @@ $carousel-item-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $carousel-item2-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2286,8 +2148,7 @@ $carousel-item2-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $cell-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -2312,8 +2173,7 @@ $cell-props: (
   'sub-font-text-decoration': var(--retro-typography-body2-text-decoration),
   'sub-font-text-transform': var(--retro-typography-body2-text-transform),
   'sub-font-weight': var(--retro-typography-body2-font-weight)
-);
-
+);
 $cell-group-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-overline-font-size),
@@ -2342,8 +2202,7 @@ $cell-group-props: (
   'shadow-offset-x': var(--retro-elevation-bold-offset-x-0),
   'shadow-offset-y': var(--retro-elevation-bold-offset-y-0),
   'shadow-spread': var(--retro-elevation-bold-spread-0)
-);
-
+);
 $chart-props: (
   'font-family': var(--retro-typography-headline6-font-family),
   'font-size': var(--retro-typography-headline6-font-size),
@@ -2363,8 +2222,7 @@ $chart-props: (
   'translate': "unset",
   'background-color': var(--retro-scheme-background),
   'foreground-color': var(--retro-scheme-foreground)
-);
-
+);
 $chat-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2390,8 +2248,7 @@ $chat-props: (
   'focus-ring-outward-offset': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $chat-header-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2410,8 +2267,7 @@ $chat-header-props: (
   'transition-property': unset,
   'translate': "unset",
   'height': unset
-);
-
+);
 $chat-input-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2430,8 +2286,7 @@ $chat-input-props: (
   'transition-property': unset,
   'translate': "unset",
   'emoji-background-color': unset
-);
-
+);
 $chat-marker-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2456,8 +2311,7 @@ $chat-marker-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $chat-message-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2482,8 +2336,7 @@ $chat-message-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $chat-message-avatar-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2501,8 +2354,7 @@ $chat-message-avatar-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $chat-message-divider-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2520,8 +2372,7 @@ $chat-message-divider-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $check-box-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -2546,8 +2397,7 @@ $check-box-props: (
   'border-width': var(--retro-layout-thickness),
   'foreground-color': var(--retro-scheme-foreground),
   'shadow': var(--retro-elevation-none)
-);
-
+);
 $check-box-group-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2572,8 +2422,7 @@ $check-box-group-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $checkmark-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2602,8 +2451,7 @@ $checkmark-props: (
   'shadow': unset,
   'thickness': unset,
   'width': unset
-);
-
+);
 $chip-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body2-font-size),
@@ -2633,8 +2481,7 @@ $chip-props: (
   'shadow-offset-x': var(--retro-elevation-light-offset-x-0),
   'shadow-offset-y': var(--retro-elevation-light-offset-y-0),
   'shadow-spread': var(--retro-elevation-light-spread-0)
-);
-
+);
 $chip-box-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2660,8 +2507,7 @@ $chip-box-props: (
   'foreground-color': unset,
   'height': unset,
   'shadow': unset
-);
-
+);
 $choice-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2689,8 +2535,7 @@ $choice-props: (
   'focus-ring-outward-offset': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $choice-group-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2715,8 +2560,7 @@ $choice-group-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $choice-group-header-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2741,8 +2585,7 @@ $choice-group-header-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $code-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2761,8 +2604,7 @@ $code-props: (
   'transition-property': unset,
   'translate': "unset",
   'foreground-color': unset
-);
-
+);
 $color-area-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2780,8 +2622,7 @@ $color-area-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $color-box-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2807,8 +2648,7 @@ $color-box-props: (
   'foreground-color': unset,
   'height': unset,
   'shadow': unset
-);
-
+);
 $color-picker-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2833,8 +2673,7 @@ $color-picker-props: (
   'border-width': unset,
   'foreground-color': unset,
   'size': unset
-);
-
+);
 $color-slider-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2859,8 +2698,7 @@ $color-slider-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $color-swatch-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -2885,8 +2723,7 @@ $color-swatch-props: (
   'border-width': var(--retro-layout-thickness),
   'foreground-color': var(--retro-scheme-foreground),
   'size': 24px
-);
-
+);
 $color-swatch-group-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2911,8 +2748,7 @@ $color-swatch-group-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $color-thumb-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2937,8 +2773,7 @@ $color-thumb-props: (
   'border-width': unset,
   'foreground-color': unset,
   'size': unset
-);
-
+);
 $combo-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -2956,8 +2791,7 @@ $combo-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $combo-item-props: (
   'font-family': unset,
   'font-size': unset,
@@ -2982,8 +2816,7 @@ $combo-item-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $comment-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3003,8 +2836,7 @@ $comment-props: (
   'translate': "unset",
   'inner-gap': unset,
   'nested-indent': unset
-);
-
+);
 $compound-button-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-button-font-size),
@@ -3033,8 +2865,7 @@ $compound-button-props: (
   'shadow-offset-x': var(--retro-elevation-semilight-offset-x-0),
   'shadow-offset-y': var(--retro-elevation-semilight-offset-y-0),
   'shadow-spread': var(--retro-elevation-semilight-spread-0)
-);
-
+);
 $content-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3052,8 +2883,7 @@ $content-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $cookies-consent-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3071,8 +2901,7 @@ $cookies-consent-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $data-list-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3090,8 +2919,7 @@ $data-list-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $data-table-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3109,8 +2937,7 @@ $data-table-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $date-box-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -3141,8 +2968,7 @@ $date-box-props: (
   'shadow-offset-x': var(--retro-elevation-semilight-offset-x-0),
   'shadow-offset-y': var(--retro-elevation-semilight-offset-y-0),
   'shadow-spread': var(--retro-elevation-semilight-spread-0)
-);
-
+);
 $date-time-box-props: (
   'font-family': unset,
   'font-size': unset,
@@ -3171,8 +2997,7 @@ $date-time-box-props: (
   'foreground-color': unset,
   'height': unset,
   'shadow': unset
-);
-
+);
 $dialog-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -3202,8 +3027,7 @@ $dialog-props: (
   'shadow-offset-x': var(--retro-elevation-bold-offset-x-0),
   'shadow-offset-y': var(--retro-elevation-bold-offset-y-0),
   'shadow-spread': var(--retro-elevation-bold-spread-0)
-);
-
+);
 $dialog-actions-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3221,8 +3045,7 @@ $dialog-actions-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $dialog-content-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3240,8 +3063,7 @@ $dialog-content-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $dialog-footer-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3259,8 +3081,7 @@ $dialog-footer-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $dialog-header-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3278,8 +3099,7 @@ $dialog-header-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $dialog-header-sub-text-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-subtitle2-font-size),
@@ -3300,8 +3120,7 @@ $dialog-header-sub-text-props: (
   'background-color': var(--retro-scheme-background),
   'border-color': var(--retro-scheme-contrast),
   'foreground-color': var(--retro-scheme-middlelight)
-);
-
+);
 $dialog-header-text-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-headline6-font-size),
@@ -3322,8 +3141,7 @@ $dialog-header-text-props: (
   'background-color': var(--retro-scheme-background),
   'border-color': var(--retro-scheme-contrast),
   'foreground-color': var(--retro-scheme-foreground)
-);
-
+);
 $dialog-host-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3341,8 +3159,7 @@ $dialog-host-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $disclosure-props: (
   'font-family': unset,
   'font-size': unset,
@@ -3360,8 +3177,7 @@ $disclosure-props: (
   'transition-mode': unset,
   'transition-property': unset,
   'translate': unset
-);
-
+);
 $divider-props: (
   'font-family': var(--retro-font-family),
   'font-size': 12px,
@@ -3383,8 +3199,7 @@ $divider-props: (
   'foreground-color': var(--retro-scheme-foreground),
   'shadow': var(--retro-elevation-none),
   'thickness': var(--retro-layout-thickness)
-);
-
+);
 $dot-props: (
   'font-family': var(--retro-font-family),
   'font-size': 16px,
@@ -3410,8 +3225,7 @@ $dot-props: (
   'foreground-color': var(--retro-color-neutral-50),
   'shadow': unset,
   'size': 16px
-);
-
+);
 $drawer-props: (
   'font-family': var(--retro-font-family),
   'font-size': 16px,
@@ -3438,8 +3252,7 @@ $drawer-props: (
   'height': 100%,
   'shadow': var(--retro-elevation-none),
   'width': 320px
-);
-
+);
 $drawer-container-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3457,8 +3270,7 @@ $drawer-container-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $drawer-content-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3476,8 +3288,7 @@ $drawer-content-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $drop-down-button-props: (
   'font-family': var(--retro-typography-button-font-family),
   'font-size': var(--retro-typography-button-font-size),
@@ -3506,8 +3317,7 @@ $drop-down-button-props: (
   'shadow': var(--retro-elevation-semilight),
   'transform': none,
   'width': auto
-);
-
+);
 $drop-zone-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3525,8 +3335,7 @@ $drop-zone-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $dropdown-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3544,8 +3353,7 @@ $dropdown-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $elevation-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3563,8 +3371,7 @@ $elevation-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $emoji-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3583,8 +3390,7 @@ $emoji-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': unset
-);
-
+);
 $empty-state-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3593,11 +3399,11 @@ $empty-state-props: (
   'font-letter-spacing': "unset",
   'font-text-decoration': "unset",
   'font-text-transform': "unset",
-  'padding-top': "unset",
-  'padding-right': "unset",
-  'padding-bottom': "unset",
-  'padding-left': "unset",
-  'gap': "unset",
+  'padding-top': calc(var(--retro-layout-space) * 2),
+  'padding-right': calc(var(--retro-layout-space) * 2),
+  'padding-bottom': calc(var(--retro-layout-space) * 2),
+  'padding-left': calc(var(--retro-layout-space) * 2),
+  'gap': var(--retro-layout-space),
   'transition-duration': "unset",
   'transition-mode': "unset",
   'transition-property': unset,
@@ -3610,8 +3416,7 @@ $empty-state-props: (
   'header-font-text-decoration': var(--retro-typography-body1-text-decoration),
   'header-font-text-transform': var(--retro-typography-body1-text-transform),
   'header-font-weight': var(--retro-typography-body1-font-weight)
-);
-
+);
 $error-props: (
   'font-family': unset,
   'font-size': unset,
@@ -3636,8 +3441,7 @@ $error-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $error-state-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3646,15 +3450,16 @@ $error-state-props: (
   'font-letter-spacing': "unset",
   'font-text-decoration': "unset",
   'font-text-transform': "unset",
-  'padding-top': "unset",
-  'padding-right': "unset",
-  'padding-bottom': "unset",
-  'padding-left': "unset",
-  'gap': "unset",
+  'padding-top': calc(var(--retro-layout-space) * 2),
+  'padding-right': calc(var(--retro-layout-space) * 2),
+  'padding-bottom': calc(var(--retro-layout-space) * 2),
+  'padding-left': calc(var(--retro-layout-space) * 2),
+  'gap': var(--retro-layout-space),
   'transition-duration': "unset",
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset",
+  'foreground-color': unset,
   'header-font-family': var(--retro-font-family),
   'header-font-letter-spacing': var(--retro-typography-body1-letter-spacing),
   'header-font-line-height': var(--retro-typography-body1-line-height),
@@ -3662,8 +3467,7 @@ $error-state-props: (
   'header-font-text-decoration': var(--retro-typography-body1-text-decoration),
   'header-font-text-transform': var(--retro-typography-body1-text-transform),
   'header-font-weight': var(--retro-typography-body1-font-weight)
-);
-
+);
 $expandable-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3681,8 +3485,7 @@ $expandable-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $expander-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -3712,8 +3515,7 @@ $expander-props: (
   'shadow-offset-x': var(--retro-elevation-semilight-offset-x-0),
   'shadow-offset-y': var(--retro-elevation-semilight-offset-y-0),
   'shadow-spread': var(--retro-elevation-semilight-spread-0)
-);
-
+);
 $expander-group-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -3738,8 +3540,7 @@ $expander-group-props: (
   'border-width': 0px,
   'foreground-color': var(--retro-scheme-foreground),
   'shadow': var(--retro-elevation-none)
-);
-
+);
 $expander-header-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-subtitle1-font-size),
@@ -3760,8 +3561,7 @@ $expander-header-props: (
   'background-color': var(--retro-scheme-transparent),
   'border-color': var(--retro-scheme-highlight),
   'foreground-color': var(--retro-scheme-foreground)
-);
-
+);
 $expander-sub-header-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-subtitle2-font-size),
@@ -3782,8 +3582,7 @@ $expander-sub-header-props: (
   'background-color': var(--retro-scheme-transparent),
   'border-color': var(--retro-scheme-highlight),
   'foreground-color': var(--retro-scheme-middlelight)
-);
-
+);
 $file-picker-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3808,8 +3607,7 @@ $file-picker-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $file-upload-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3834,8 +3632,7 @@ $file-upload-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $file-upload-item-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3860,8 +3657,7 @@ $file-upload-item-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $flip-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3879,8 +3675,7 @@ $flip-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $floating-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -3908,8 +3703,7 @@ $floating-props: (
   'border-width': var(--retro-layout-thickness),
   'foreground-color': var(--retro-scheme-foreground),
   'shadow': var(--retro-elevation-light)
-);
-
+);
 $floating-action-button-props: (
   'font-family': var(--retro-typography-button-font-family),
   'font-size': var(--retro-typography-button-font-size),
@@ -3938,8 +3732,7 @@ $floating-action-button-props: (
   'shadow-offset-x': var(--retro-elevation-semilight-offset-x-0),
   'shadow-offset-y': var(--retro-elevation-semilight-offset-y-0),
   'shadow-spread': var(--retro-elevation-semilight-spread-0)
-);
-
+);
 $floating-action-button-group-props: (
   'font-family': unset,
   'font-size': unset,
@@ -3957,8 +3750,7 @@ $floating-action-button-group-props: (
   'transition-mode': unset,
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $floating-trigger-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -3976,8 +3768,7 @@ $floating-trigger-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $focus-ring-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4009,8 +3800,7 @@ $focus-ring-props: (
   'width': unset,
   'x': unset,
   'y': unset
-);
-
+);
 $footer-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4035,8 +3825,7 @@ $footer-props: (
   'border-width': var(--retro-layout-thickness),
   'foreground-color': var(--retro-scheme-foreground),
   'inset': calc(var(--retro-layout-space) * 2)
-);
-
+);
 $footer-item-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4054,8 +3843,7 @@ $footer-item-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $footer-item-group-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4073,8 +3861,7 @@ $footer-item-group-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $form-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4093,8 +3880,7 @@ $form-props: (
   'transition-property': unset,
   'translate': unset,
   'font-text-trans': unset
-);
-
+);
 $form-field-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4112,8 +3898,7 @@ $form-field-props: (
   'transition-mode': unset,
   'transition-property': unset,
   'translate': unset
-);
-
+);
 $grid-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4131,8 +3916,7 @@ $grid-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $grid-item-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4150,8 +3934,7 @@ $grid-item-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $helmet-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4169,8 +3952,7 @@ $helmet-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $hint-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4195,8 +3977,7 @@ $hint-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $icon-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4222,8 +4003,7 @@ $icon-props: (
   'foreground-color': unset,
   'shadow': unset,
   'size': unset
-);
-
+);
 $image-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4256,8 +4036,7 @@ $image-props: (
   'legend-font-text-transform': unset,
   'legend-font-weight': unset,
   'shadow': unset
-);
-
+);
 $ink-bar-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4280,8 +4059,7 @@ $ink-bar-props: (
   'border-radius': calc(var(--ink-bar-thickness) / 2),
   'foreground-color': unset,
   'thickness': calc(var(--retro-layout-thickness) * 2)
-);
-
+);
 $jumbtron-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4306,8 +4084,7 @@ $jumbtron-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $jumbtron-header-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4328,8 +4105,7 @@ $jumbtron-header-props: (
   'background-color': unset,
   'border-color': unset,
   'foreground-color': unset
-);
-
+);
 $jumbtron-sub-header-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4350,8 +4126,7 @@ $jumbtron-sub-header-props: (
   'background-color': unset,
   'border-color': unset,
   'foreground-color': unset
-);
-
+);
 $kbd-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4376,8 +4151,7 @@ $kbd-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $kbd-shortcut-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4395,8 +4169,7 @@ $kbd-shortcut-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $light-chain-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4414,8 +4187,7 @@ $light-chain-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $list-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4440,8 +4212,7 @@ $list-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $list-item-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4466,8 +4237,7 @@ $list-item-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $list-item-group-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4492,8 +4262,7 @@ $list-item-group-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $marquee-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4513,8 +4282,7 @@ $marquee-props: (
   'translate': "unset",
   'direction': unset,
   'speed': unset
-);
-
+);
 $masonry-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4533,8 +4301,7 @@ $masonry-props: (
   'transition-property': unset,
   'translate': "unset",
   'columns': unset
-);
-
+);
 $menu-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4559,8 +4326,7 @@ $menu-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $menu-item-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -4584,9 +4350,12 @@ $menu-item-props: (
   'border-style': solid,
   'border-width': 0px,
   'foreground-color': var(--retro-scheme-foreground),
-  'shadow': var(--retro-elevation-none)
-);
-
+  'shadow': var(--retro-elevation-none),
+  'height': 45px,
+  'indent-color': var(--retro-scheme-highlight),
+  'indent-size': var(--retro-layout-thickness),
+  'indent-offset': calc(var(--retro-layout-space) * 2)
+);
 $menu-item-group-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4618,8 +4387,7 @@ $menu-item-group-props: (
   'header-font-text-transform': unset,
   'header-font-weight': unset,
   'shadow': unset
-);
-
+);
 $message-box-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4637,8 +4405,7 @@ $message-box-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $meter-bar-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4656,8 +4423,7 @@ $meter-bar-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $meter-ring-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4675,8 +4441,7 @@ $meter-ring-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $number-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4695,8 +4460,7 @@ $number-props: (
   'transition-property': unset,
   'translate': "unset",
   'alignment': unset
-);
-
+);
 $number-box-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4723,8 +4487,7 @@ $number-box-props: (
   'foreground-color': unset,
   'height': unset,
   'shadow': unset
-);
-
+);
 $number-counter-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4748,8 +4511,7 @@ $number-counter-props: (
   'n': unset,
   'timing': unset,
   'to': unset
-);
-
+);
 $page-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4767,8 +4529,7 @@ $page-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $page-content-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4790,8 +4551,7 @@ $page-content-props: (
   'left': unset,
   'max-width': unset,
   'width': unset
-);
-
+);
 $page-header-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-headline4-font-size),
@@ -4813,8 +4573,7 @@ $page-header-props: (
   'border-color': unset,
   'foreground-color': var(--retro-scheme-foreground),
   'inset': calc(var(--retro-layout-space) * 2)
-);
-
+);
 $page-menu-props: (
   'font-family': var(--retro-font-family),
   'font-size': 24px,
@@ -4841,8 +4600,7 @@ $page-menu-props: (
   'height': 64px,
   'line-height': 28px,
   'shadow': var(--retro-elevation-none)
-);
-
+);
 $page-pre-content-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4861,8 +4619,7 @@ $page-pre-content-props: (
   'transition-property': unset,
   'translate': "unset",
   'inset': calc(var(--retro-layout-space) * 2)
-);
-
+);
 $page-pre-header-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4881,8 +4638,7 @@ $page-pre-header-props: (
   'transition-property': unset,
   'translate': "unset",
   'inset': calc(var(--retro-layout-space) * 2)
-);
-
+);
 $paginator-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4901,8 +4657,7 @@ $paginator-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': unset
-);
-
+);
 $password-box-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -4933,8 +4688,7 @@ $password-box-props: (
   'shadow-offset-x': var(--retro-elevation-semilight-offset-x-0),
   'shadow-offset-y': var(--retro-elevation-semilight-offset-y-0),
   'shadow-spread': var(--retro-elevation-semilight-spread-0)
-);
-
+);
 $pattern-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -4953,8 +4707,7 @@ $pattern-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': var(--retro-color-neutral-400)
-);
-
+);
 $persona-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4979,8 +4732,7 @@ $persona-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $perspective-props: (
   'font-family': unset,
   'font-size': unset,
@@ -4998,8 +4750,7 @@ $perspective-props: (
   'transition-mode': unset,
   'transition-property': unset,
   'translate': unset
-);
-
+);
 $pin-box-props: (
   'font-family': var(--retro-font-family),
   'font-size': 16px,
@@ -5029,8 +4780,7 @@ $pin-box-props: (
   'shadow-offset-x': var(--retro-elevation-semilight-offset-x-0),
   'shadow-offset-y': var(--retro-elevation-semilight-offset-y-0),
   'shadow-spread': var(--retro-elevation-semilight-spread-0)
-);
-
+);
 $popup-props: (
   'font-family': unset,
   'font-size': unset,
@@ -5059,8 +4809,7 @@ $popup-props: (
   'shadow-offset-x': unset,
   'shadow-offset-y': unset,
   'shadow-spread': unset
-);
-
+);
 $portal-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5078,8 +4827,7 @@ $portal-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $portal-projection-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5097,8 +4845,7 @@ $portal-projection-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $progress-bar-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5123,8 +4870,7 @@ $progress-bar-props: (
   'right-circle': unset,
   'segment-width': unset,
   'segment-gap': unset
-);
-
+);
 $progress-ring-props: (
   'font-family': unset,
   'font-size': unset,
@@ -5150,8 +4896,7 @@ $progress-ring-props: (
   'fill-color': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $qr-code-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5171,8 +4916,7 @@ $qr-code-props: (
   'translate': "unset",
   'background-color': unset,
   'foreground-color': unset
-);
-
+);
 $radio-props: (
   'font-family': unset,
   'font-size': unset,
@@ -5202,8 +4946,7 @@ $radio-props: (
   'focus-ring-outward-offset': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $radio-group-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5228,8 +4971,7 @@ $radio-group-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $rating-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5254,8 +4996,7 @@ $rating-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $repeat-button-props: (
   'font-family': var(--retro-typography-button-font-family),
   'font-size': var(--retro-typography-button-font-size),
@@ -5284,8 +5025,7 @@ $repeat-button-props: (
   'progress-thickness': var(--retro-layout-thickness),
   'shadow': var(--retro-elevation-none),
   'width': auto
-);
-
+);
 $resize-adorner-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5309,8 +5049,7 @@ $resize-adorner-props: (
   'border-width': unset,
   'thumb-background-color': unset,
   'thumb-border-radius': unset
-);
-
+);
 $ribbon-props: (
   'font-family': unset,
   'font-size': unset,
@@ -5336,8 +5075,7 @@ $ribbon-props: (
   'font': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $rich-text-box-props: (
   'font-family': unset,
   'font-size': unset,
@@ -5365,8 +5103,7 @@ $rich-text-box-props: (
   'height': unset,
   'shadow': unset,
   'toolbox-border-color': unset
-);
-
+);
 $rich-text-box-toolbox-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5392,8 +5129,7 @@ $rich-text-box-toolbox-props: (
   'foreground-color': unset,
   'orientation': unset,
   'shadow': unset
-);
-
+);
 $ripple-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5412,8 +5148,7 @@ $ripple-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': unset
-);
-
+);
 $router-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5431,8 +5166,7 @@ $router-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $router-anchor-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5453,8 +5187,7 @@ $router-anchor-props: (
   'background-color': var(--retro-scheme-transparent),
   'border-color': var(--retro-scheme-contrast),
   'foreground-color': var(--retro-scheme-foreground)
-);
-
+);
 $router-link-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5472,8 +5205,7 @@ $router-link-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $router-outlet-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5491,8 +5223,7 @@ $router-outlet-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $scale-props: (
   'font-family': unset,
   'font-size': unset,
@@ -5510,8 +5241,7 @@ $scale-props: (
   'transition-mode': unset,
   'transition-property': unset,
   'translate': unset
-);
-
+);
 $scroll-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5529,8 +5259,7 @@ $scroll-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $search-box-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -5561,8 +5290,7 @@ $search-box-props: (
   'shadow-offset-x': var(--retro-elevation-semilight-offset-x-0),
   'shadow-offset-y': var(--retro-elevation-semilight-offset-y-0),
   'shadow-spread': var(--retro-elevation-semilight-spread-0)
-);
-
+);
 $segment-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5592,8 +5320,7 @@ $segment-props: (
   'shadow-offset-x': var(--retro-elevation-semilight-offset-x-0),
   'shadow-offset-y': var(--retro-elevation-semilight-offset-y-0),
   'shadow-spread': var(--retro-elevation-semilight-spread-0)
-);
-
+);
 $segment-item-props: (
   'font-family': unset,
   'font-size': unset,
@@ -5628,8 +5355,7 @@ $segment-item-props: (
   'color-hover': unset,
   'padding-end': unset,
   'padding-start': unset
-);
-
+);
 $select-props: (
   'font-family': unset,
   'font-size': unset,
@@ -5654,8 +5380,7 @@ $select-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $select-item-props: (
   'font-family': unset,
   'font-size': unset,
@@ -5680,8 +5405,7 @@ $select-item-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $select-item-group-props: (
   'font-family': unset,
   'font-size': unset,
@@ -5706,8 +5430,7 @@ $select-item-group-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $signature-pad-props: (
   'font-family': unset,
   'font-size': unset,
@@ -5732,8 +5455,7 @@ $signature-pad-props: (
   'border-width': unset,
   'foreground-color': unset,
   'shadow': unset
-);
-
+);
 $skeleton-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5757,8 +5479,7 @@ $skeleton-props: (
   'border-style': unset,
   'border-width': unset,
   'foreground-color': unset
-);
-
+);
 $slider-props: (
   'font-family': unset,
   'font-size': unset,
@@ -5819,8 +5540,7 @@ $slider-props: (
   'tooltip-transition-mode': unset,
   'tooltip-transition-property': unset,
   'track-size': unset
-);
-
+);
 $slider2-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5838,8 +5558,7 @@ $slider2-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $slider2thumb-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5858,8 +5577,7 @@ $slider2thumb-props: (
   'transition-property': unset,
   'translate': "unset",
   'size': unset
-);
-
+);
 $spacer-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5877,8 +5595,7 @@ $spacer-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $split-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5906,8 +5623,7 @@ $split-props: (
   'thumb-border-color': var(--retro-scheme-highlight),
   'thumb-border-radius': var(--retro-layout-radius),
   'thumb-foreground-color': var(--retro-scheme-foreground)
-);
-
+);
 $split-button-props: (
   'font-family': var(--retro-typography-button-font-family),
   'font-size': var(--retro-typography-button-font-size),
@@ -5936,8 +5652,7 @@ $split-button-props: (
   'progress-thickness': var(--retro-layout-thickness),
   'shadow': var(--retro-elevation-none),
   'width': auto
-);
-
+);
 $stack-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5955,8 +5670,7 @@ $stack-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $sticky-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5976,8 +5690,7 @@ $sticky-props: (
   'translate': "unset",
   'left': unset,
   'top': unset
-);
-
+);
 $success-state-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -5986,15 +5699,16 @@ $success-state-props: (
   'font-letter-spacing': "unset",
   'font-text-decoration': "unset",
   'font-text-transform': "unset",
-  'padding-top': "unset",
-  'padding-right': "unset",
-  'padding-bottom': "unset",
-  'padding-left': "unset",
-  'gap': "unset",
+  'padding-top': calc(var(--retro-layout-space) * 2),
+  'padding-right': calc(var(--retro-layout-space) * 2),
+  'padding-bottom': calc(var(--retro-layout-space) * 2),
+  'padding-left': calc(var(--retro-layout-space) * 2),
+  'gap': var(--retro-layout-space),
   'transition-duration': "unset",
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset",
+  'foreground-color': unset,
   'header-font-family': var(--retro-font-family),
   'header-font-letter-spacing': var(--retro-typography-body1-letter-spacing),
   'header-font-line-height': var(--retro-typography-body1-line-height),
@@ -6002,8 +5716,7 @@ $success-state-props: (
   'header-font-text-decoration': var(--retro-typography-body1-text-decoration),
   'header-font-text-transform': var(--retro-typography-body1-text-transform),
   'header-font-weight': var(--retro-typography-body1-font-weight)
-);
-
+);
 $summary-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6021,8 +5734,7 @@ $summary-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $swipe-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6040,8 +5752,7 @@ $swipe-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $tab-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -6078,8 +5789,7 @@ $tab-props: (
   'strip-padding-left': 0,
   'strip-padding-right': 0,
   'strip-padding-top': 0
-);
-
+);
 $tab-item-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6100,8 +5810,7 @@ $tab-item-props: (
   'border-radius': var(--retro-layout-radius),
   'border-style': solid,
   'border-width': var(--retro-layout-space)
-);
-
+);
 $tab-panel-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6120,8 +5829,7 @@ $tab-panel-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': var(--retro-scheme-background)
-);
-
+);
 $tab-strip-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-button-font-size),
@@ -6145,8 +5853,7 @@ $tab-strip-props: (
   'border-style': solid,
   'border-width': 0,
   'foreground-color': unset
-);
-
+);
 $tab-strip-item-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-button-font-size),
@@ -6173,8 +5880,7 @@ $tab-strip-item-props: (
   'shadow': var(--retro-elevation-none),
   'size': 56px,
   'thickness': 4px
-);
-
+);
 $table-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -6199,8 +5905,7 @@ $table-props: (
   'border-width': var(--retro-layout-thickness),
   'foreground-color': var(--retro-scheme-foreground),
   'shadow': var(--retro-elevation-bold)
-);
-
+);
 $table-body-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -6225,8 +5930,7 @@ $table-body-props: (
   'border-width': 0px,
   'foreground-color': var(--retro-scheme-foreground),
   'shadow': var(--retro-elevation-none)
-);
-
+);
 $table-cell-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -6250,8 +5954,32 @@ $table-cell-props: (
   'border-width': 0px,
   'foreground-color': var(--retro-color-neutral-50),
   'shadow': var(--retro-elevation-none)
-);
-
+);
+$table-footer-props: (
+  'font-family': var(--retro-font-family),
+  'font-size': var(--retro-typography-body2-font-size),
+  'font-line-height': "unset",
+  'font-weight': bold,
+  'font-letter-spacing': "unset",
+  'font-text-decoration': "unset",
+  'font-text-transform': "unset",
+  'padding-top': calc(var(--retro-layout-space) / 2),
+  'padding-right': var(--retro-layout-space),
+  'padding-bottom': calc(var(--retro-layout-space) / 2),
+  'padding-left': var(--retro-layout-space),
+  'gap': var(--retro-layout-space),
+  'transition-duration': .2s,
+  'transition-mode': ease,
+  'transition-property': all,
+  'translate': "unset",
+  'background-color': var(--retro-scheme-background),
+  'border-color': var(--retro-scheme-contrast),
+  'border-radius': var(--retro-layout-radius),
+  'border-style': solid,
+  'border-width': 0px,
+  'foreground-color': var(--retro-scheme-foreground),
+  'shadow': var(--retro-elevation-none)
+);
 $table-header-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body2-font-size),
@@ -6276,8 +6004,7 @@ $table-header-props: (
   'border-width': 0px,
   'foreground-color': var(--retro-scheme-foreground),
   'shadow': var(--retro-elevation-none)
-);
-
+);
 $table-row-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -6302,8 +6029,7 @@ $table-row-props: (
   'border-width': 0px,
   'foreground-color': var(--retro-color-neutral-50),
   'shadow': var(--retro-elevation-none)
-);
-
+);
 $text-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -6330,8 +6056,7 @@ $text-props: (
   'font-transform': var(--retro-typography-body1-text-transform),
   'foreground-color': var(--retro-scheme-foreground),
   'shadow': var(--retro-elevation-none)
-);
-
+);
 $text-box-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-body1-font-size),
@@ -6362,8 +6087,7 @@ $text-box-props: (
   'shadow-offset-x': var(--retro-elevation-semilight-offset-x-0),
   'shadow-offset-y': var(--retro-elevation-semilight-offset-y-0),
   'shadow-spread': var(--retro-elevation-semilight-spread-0)
-);
-
+);
 $text-format-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6381,8 +6105,7 @@ $text-format-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $tick-bar-props: (
   'font-family': unset,
   'font-size': unset,
@@ -6411,8 +6134,7 @@ $tick-bar-props: (
   'tick-size': unset,
   'tick-text-gap': unset,
   'tick-width': unset
-);
-
+);
 $tile-list-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6431,8 +6153,7 @@ $tile-list-props: (
   'transition-property': unset,
   'translate': "unset",
   'gutter-size': unset
-);
-
+);
 $tile-list-item-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6457,8 +6178,7 @@ $tile-list-item-props: (
   'dragover-border-color': unset,
   'header-bg-color': unset,
   'header-padding': unset
-);
-
+);
 $time-box-props: (
   'font-family': unset,
   'font-size': unset,
@@ -6481,14 +6201,12 @@ $time-box-props: (
   'border-radius': unset,
   'border-style': unset,
   'border-width': unset,
-  'calnedar-item-background-color': unset,
   'color': unset,
   'foreground-color': unset,
   'height': unset,
   'menu-item-border-radius': unset,
   'shadow': unset
-);
-
+);
 $title-bar-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-headline4-font-size),
@@ -6506,8 +6224,7 @@ $title-bar-props: (
   'transition-mode': unset,
   'transition-property': unset,
   'translate': unset
-);
-
+);
 $title-layout-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6526,8 +6243,7 @@ $title-layout-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': unset
-);
-
+);
 $toast-props: (
   'font-family': unset,
   'font-size': unset,
@@ -6554,8 +6270,7 @@ $toast-props: (
   'foreground-color': unset,
   'progress-ring-fill-color': unset,
   'shadow': unset
-);
-
+);
 $toggle-button-props: (
   'font-family': var(--retro-font-family),
   'font-size': var(--retro-typography-button-font-size),
@@ -6583,8 +6298,7 @@ $toggle-button-props: (
   'line-height': calc(var(--toggle-button-font-line-height)  - 4px),
   'shadow': var(--retro-elevation-semilight),
   'width': auto
-);
-
+);
 $toggle-switch-props: (
   'font-family': unset,
   'font-size': unset,
@@ -6607,8 +6321,7 @@ $toggle-switch-props: (
   'border-style': solid,
   'border-width': var(--retro-layout-thickness),
   'shadow': var(--elevation-light-semilight)
-);
-
+);
 $toggletip-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6627,8 +6340,7 @@ $toggletip-props: (
   'transition-property': unset,
   'translate': "unset",
   'background-color': unset
-);
-
+);
 $toolbar-props: (
   'font-family': var(--retro-font-family),
   'font-size': 24px,
@@ -6659,8 +6371,7 @@ $toolbar-props: (
   'shadow-offset-x': var(--retro-elevation-bold-offset-x-0),
   'shadow-offset-y': var(--retro-elevation-bold-offset-y-0),
   'shadow-spread': var(--retro-elevation-bold-spread-0)
-);
-
+);
 $tooltip-props: (
   'font-family': unset,
   'font-size': unset,
@@ -6686,8 +6397,7 @@ $tooltip-props: (
   'foreground-color': unset,
   'max-width': unset,
   'shadow': unset
-);
-
+);
 $tree-props: (
   'font-family': unset,
   'font-size': unset,
@@ -6705,8 +6415,7 @@ $tree-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $tree-item-props: (
   'font-family': unset,
   'font-size': unset,
@@ -6730,9 +6439,11 @@ $tree-item-props: (
   'border-style': unset,
   'border-width': unset,
   'foreground-color': unset,
-  'shadow': unset
-);
-
+  'shadow': unset,
+  'indent-color': var(--retro-scheme-highlight),
+  'indent-size': var(--retro-layout-thickness),
+  'indent-offset': calc(var(--retro-layout-space) * 2)
+);
 $up-down-spinner-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6750,8 +6461,7 @@ $up-down-spinner-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $video-props: (
   'font-family': unset,
   'font-size': unset,
@@ -6784,8 +6494,7 @@ $video-props: (
   'legend-font-text-transform': unset,
   'legend-font-weight': unset,
   'shadow': unset
-);
-
+);
 $virtualize-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6803,8 +6512,7 @@ $virtualize-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $wizard-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6823,8 +6531,7 @@ $wizard-props: (
   'transition-property': unset,
   'translate': "unset",
   'border-color': unset
-);
-
+);
 $wizard-step-props: (
   'font-family': "unset",
   'font-size': "unset",
@@ -6842,8 +6549,7 @@ $wizard-step-props: (
   'transition-mode': "unset",
   'transition-property': unset,
   'translate': "unset"
-);
-
+);
 $wrap-props: (
   'font-family': "unset",
   'font-size': "unset",