@breadstone/mosaik-themes 0.0.206 → 0.0.210

package/themes/cosmopolitan.scss

@@ -75,6 +75,7 @@ $font-family: 'Noto Sans', sans-serif;
 $layout-radius: 3px;
 $layout-space: 8px;
 $layout-thickness: 1px;
+$scheme-light-surface: #fefefe;
 $scheme-light-contrast: #ffffff;
 $scheme-light-background: #ffffff;
 $scheme-light-foreground: #000000;
@@ -84,6 +85,8 @@ $scheme-light-lowlight: #4d4d4d;
 $scheme-light-transparent: rgba(255, 255, 255, 0);
 $scheme-light-semi-transparent: rgba(255, 255, 255, 0.67);
 $scheme-light-disabled: #b8b5b2;
+$scheme-light-selection: #ffaad4;
+$scheme-dark-surface: #2e2d2d;
 $scheme-dark-contrast: #ffffff;
 $scheme-dark-background: #2e2d2d;
 $scheme-dark-foreground: #ffffff;
@@ -93,24 +96,253 @@ $scheme-dark-lowlight: #999999;
 $scheme-dark-transparent: rgba(23, 23, 23, 0);
 $scheme-dark-semi-transparent: rgba(23, 23, 23, 0.67);
 $scheme-dark-disabled: #5c5956;
+$scheme-dark-selection: #ff66aa;
 $color-light-primary-0: #ffffff;
-$color-light-primary-100: #fed7ea;
-$color-light-primary-500: #dc1884;
+$color-light-primary-50: #fce4ec;
+$color-light-primary-100: #f8bcd0;
+$color-light-primary-200: #f48fb1;
+$color-light-primary-300: #f06292;
+$color-light-primary-400: #ec407a;
+$color-light-primary-500: #e91e63;
+$color-light-primary-600: #cb1a56;
+$color-light-primary-700: #a31545;
+$color-light-primary-800: #7e1035;
+$color-light-primary-900: #3a0819;
+$color-light-secondary-0: #ffffff;
+$color-light-secondary-50: #e6f6e9;
+$color-light-secondary-100: #c3e8c9;
+$color-light-secondary-200: #9bd9a7;
+$color-light-secondary-300: #70cb83;
+$color-light-secondary-400: #4dbf68;
+$color-light-secondary-500: #21b34d;
+$color-light-secondary-600: #16a444;
+$color-light-secondary-700: #009238;
+$color-light-secondary-800: #00812d;
+$color-light-secondary-900: #006218;
+$color-light-tertiary-0: #ffffff;
+$color-light-tertiary-50: #e1f5fc;
+$color-light-tertiary-100: #b4e6f7;
+$color-light-tertiary-200: #84d5f3;
+$color-light-tertiary-300: #56c5ee;
+$color-light-tertiary-400: #35b8eb;
+$color-light-tertiary-500: #19ace9;
+$color-light-tertiary-600: #139edb;
+$color-light-tertiary-700: #098bc7;
+$color-light-tertiary-800: #087ab4;
+$color-light-tertiary-900: #005a92;
+$color-light-info-0: #ffffff;
+$color-light-info-50: #f4faff;
+$color-light-info-100: #ddf1ff;
+$color-light-info-200: #addbff;
+$color-light-info-300: #6fb6ff;
+$color-light-info-400: #3990ff;
+$color-light-info-500: #096bde;
+$color-light-info-600: #054da7;
+$color-light-info-700: #02367d;
+$color-light-info-800: #072859;
+$color-light-info-900: #00153c;
+$color-light-warning-0: #ffffff;
+$color-light-warning-50: #fff8c5;
+$color-light-warning-100: #fae17d;
+$color-light-warning-200: #eac54f;
+$color-light-warning-300: #d4a72c;
+$color-light-warning-400: #bf8700;
+$color-light-warning-500: #9a6700;
+$color-light-warning-600: #7d4e00;
+$color-light-warning-700: #633c01;
+$color-light-warning-800: #4d2d00;
+$color-light-warning-900: #3b2300;
+$color-light-danger-0: #ffffff;
+$color-light-danger-50: #fff8f6;
+$color-light-danger-100: #ffe9e8;
+$color-light-danger-200: #ffc7c5;
+$color-light-danger-300: #ff9192;
+$color-light-danger-400: #fa5255;
+$color-light-danger-500: #d3232f;
+$color-light-danger-600: #a10e25;
+$color-light-danger-700: #77061b;
+$color-light-danger-800: #580013;
+$color-light-danger-900: #39000d;
+$color-light-success-0: #ffffff;
+$color-light-success-50: #f3fef5;
+$color-light-success-100: #d7f5dd;
+$color-light-success-200: #77ec95;
+$color-light-success-300: #4cc76e;
+$color-light-success-400: #2ca24d;
+$color-light-success-500: #1a7d36;
+$color-light-success-600: #0f5d26;
+$color-light-success-700: #034318;
+$color-light-success-800: #002f0f;
+$color-light-success-900: #001d09;
+$color-light-highlight-0: #ffffff;
+$color-light-highlight-50: #fdf7ff;
+$color-light-highlight-100: #f4eaff;
+$color-light-highlight-200: #e1cbff;
+$color-light-highlight-300: #c69eff;
+$color-light-highlight-400: #a374f9;
+$color-light-highlight-500: #814dde;
+$color-light-highlight-600: #5f35ae;
+$color-light-highlight-700: #452382;
+$color-light-highlight-800: #301761;
+$color-light-highlight-900: #1d0a42;
+$color-light-neutral-0: #ffffff;
+$color-light-neutral-50: #f7f7f8;
+$color-light-neutral-100: #ebebef;
+$color-light-neutral-200: #d8d8df;
+$color-light-neutral-300: #b9b9c6;
+$color-light-neutral-400: #8f8fa3;
+$color-light-neutral-500: #73738c;
+$color-light-neutral-600: #5a5a72;
+$color-light-neutral-700: #434356;
+$color-light-neutral-800: #25252d;
+$color-light-neutral-900: #131318;
 $color-dark-primary-0: #000000;
-$color-dark-primary-100: #4b0225;
-$color-dark-primary-500: #dc1884;
-$typography-heading-font-size: 24px;
-$typography-heading-line-height: 28px;
-$typography-heading-font-weight: 300;
-$typography-heading-letter-spacing: -0.25px;
-$typography-heading-text-decoration: none;
-$typography-heading-text-transform: none;
-$typography-content-font-size: 16px;
-$typography-content-line-height: 20px;
-$typography-content-font-weight: 300;
-$typography-content-letter-spacing: -0.25px;
-$typography-content-text-decoration: none;
-$typography-content-text-transform: none;
+$color-dark-primary-50: #3a0819;
+$color-dark-primary-100: #7e1035;
+$color-dark-primary-200: #a31545;
+$color-dark-primary-300: #cb1a56;
+$color-dark-primary-400: #e91e63;
+$color-dark-primary-500: #ec407a;
+$color-dark-primary-600: #f06292;
+$color-dark-primary-700: #f48fb1;
+$color-dark-primary-800: #f8bcd0;
+$color-dark-primary-900: #fce4ec;
+$color-dark-secondary-0: #000000;
+$color-dark-secondary-50: #006218;
+$color-dark-secondary-100: #00812d;
+$color-dark-secondary-200: #009238;
+$color-dark-secondary-300: #16a444;
+$color-dark-secondary-400: #21b34d;
+$color-dark-secondary-500: #4dbf68;
+$color-dark-secondary-600: #70cb83;
+$color-dark-secondary-700: #9bd9a7;
+$color-dark-secondary-800: #c3e8c9;
+$color-dark-secondary-900: #e6f6e9;
+$color-dark-tertiary-0: #000000;
+$color-dark-tertiary-50: #005a92;
+$color-dark-tertiary-100: #087ab4;
+$color-dark-tertiary-200: #098bc7;
+$color-dark-tertiary-300: #139edb;
+$color-dark-tertiary-400: #19ace9;
+$color-dark-tertiary-500: #35b8eb;
+$color-dark-tertiary-600: #56c5ee;
+$color-dark-tertiary-700: #84d5f3;
+$color-dark-tertiary-800: #b4e6f7;
+$color-dark-tertiary-900: #e1f5fc;
+$color-dark-info-0: #000000;
+$color-dark-info-50: #00153c;
+$color-dark-info-100: #072859;
+$color-dark-info-200: #02367d;
+$color-dark-info-300: #054da7;
+$color-dark-info-400: #096bde;
+$color-dark-info-500: #3990ff;
+$color-dark-info-600: #6fb6ff;
+$color-dark-info-700: #addbff;
+$color-dark-info-800: #ddf1ff;
+$color-dark-info-900: #f4faff;
+$color-dark-warning-0: #000000;
+$color-dark-warning-50: #3b2300;
+$color-dark-warning-100: #4d2d00;
+$color-dark-warning-200: #633c01;
+$color-dark-warning-300: #7d4e00;
+$color-dark-warning-400: #9a6700;
+$color-dark-warning-500: #bf8700;
+$color-dark-warning-600: #d4a72c;
+$color-dark-warning-700: #eac54f;
+$color-dark-warning-800: #fae17d;
+$color-dark-warning-900: #fff8c5;
+$color-dark-danger-0: #000000;
+$color-dark-danger-50: #39000d;
+$color-dark-danger-100: #580013;
+$color-dark-danger-200: #77061b;
+$color-dark-danger-300: #a10e25;
+$color-dark-danger-400: #d3232f;
+$color-dark-danger-500: #fa5255;
+$color-dark-danger-600: #ff9192;
+$color-dark-danger-700: #ffc7c5;
+$color-dark-danger-800: #ffe9e8;
+$color-dark-danger-900: #fff8f6;
+$color-dark-success-0: #000000;
+$color-dark-success-50: #001d09;
+$color-dark-success-100: #002f0f;
+$color-dark-success-200: #034318;
+$color-dark-success-300: #0f5d26;
+$color-dark-success-400: #1a7d36;
+$color-dark-success-500: #2ca24d;
+$color-dark-success-600: #4cc76e;
+$color-dark-success-700: #77ec95;
+$color-dark-success-800: #d7f5dd;
+$color-dark-success-900: #f3fef5;
+$color-dark-highlight-0: #000000;
+$color-dark-highlight-50: #1d0a42;
+$color-dark-highlight-100: #301761;
+$color-dark-highlight-200: #452382;
+$color-dark-highlight-300: #5f35ae;
+$color-dark-highlight-400: #814dde;
+$color-dark-highlight-500: #a374f9;
+$color-dark-highlight-600: #c69eff;
+$color-dark-highlight-700: #e1cbff;
+$color-dark-highlight-800: #f4eaff;
+$color-dark-highlight-900: #fdf7ff;
+$color-dark-neutral-0: #000000;
+$color-dark-neutral-50: #131318;
+$color-dark-neutral-100: #25252d;
+$color-dark-neutral-200: #434356;
+$color-dark-neutral-300: #5a5a72;
+$color-dark-neutral-400: #73738c;
+$color-dark-neutral-500: #8f8fa3;
+$color-dark-neutral-600: #b9b9c6;
+$color-dark-neutral-700: #d8d8df;
+$color-dark-neutral-800: #ebebef;
+$color-dark-neutral-900: #f7f7f8;
+$typography-headline1-font-size: 24px;
+$typography-headline1-line-height: 28px;
+$typography-headline1-font-weight: 300;
+$typography-headline1-letter-spacing: -0.25px;
+$typography-headline1-text-decoration: none;
+$typography-headline1-text-transform: none;
+$typography-headline2-font-size: 24px;
+$typography-headline2-line-height: 28px;
+$typography-headline2-font-weight: 300;
+$typography-headline2-letter-spacing: -0.25px;
+$typography-headline2-text-decoration: none;
+$typography-headline2-text-transform: none;
+$typography-headline3-font-size: 24px;
+$typography-headline3-line-height: 28px;
+$typography-headline3-font-weight: 300;
+$typography-headline3-letter-spacing: -0.25px;
+$typography-headline3-text-decoration: none;
+$typography-headline3-text-transform: none;
+$typography-headline4-font-size: 24px;
+$typography-headline4-line-height: 28px;
+$typography-headline4-font-weight: 300;
+$typography-headline4-letter-spacing: -0.25px;
+$typography-headline4-text-decoration: none;
+$typography-headline4-text-transform: none;
+$typography-headline5-font-size: 24px;
+$typography-headline5-line-height: 28px;
+$typography-headline5-font-weight: 300;
+$typography-headline5-letter-spacing: -0.25px;
+$typography-headline5-text-decoration: none;
+$typography-headline5-text-transform: none;
+$typography-headline6-font-size: 24px;
+$typography-headline6-line-height: 28px;
+$typography-headline6-font-weight: 300;
+$typography-headline6-letter-spacing: -0.25px;
+$typography-headline6-text-decoration: none;
+$typography-headline6-text-transform: none;
+$typography-body1-font-size: 16px;
+$typography-body1-line-height: 20px;
+$typography-body1-font-weight: 300;
+$typography-body1-letter-spacing: -0.25px;
+$typography-body1-text-decoration: none;
+$typography-body1-text-transform: none;
+$typography-body2-font-size: 16px;
+$typography-body2-line-height: 20px;
+$typography-body2-font-weight: 300;
+$typography-body2-letter-spacing: -0.25px;
+$typography-body2-text-decoration: none;
+$typography-body2-text-transform: none;
 $typography-button-font-size: 16px;
 $typography-button-line-height: 20px;
 $typography-button-font-weight: 700;
@@ -260,8 +492,14 @@ $size-key-small: "small";
 $size-key-medium: "medium";
 $size-key-large: "large";
 $size-key-giant: "giant";
-$typography-key-heading: "heading";
-$typography-key-content: "content";
+$typography-key-headline1: "headline1";
+$typography-key-headline2: "headline2";
+$typography-key-headline3: "headline3";
+$typography-key-headline4: "headline4";
+$typography-key-headline5: "headline5";
+$typography-key-headline6: "headline6";
+$typography-key-body1: "body1";
+$typography-key-body2: "body2";
 $typography-key-button: "button";
 $elevation-key-light: "light";
 $elevation-key-semilight: "semilight";
@@ -275,8 +513,14 @@ $variant-tertiary: "tertiary";
 $duration-short: 200ms;
 $duration-medium: 400ms;
 $duration-long: 600ms;
-$typography-heading-font-family: $font-family;
-$typography-content-font-family: $font-family;
+$typography-headline1-font-family: $font-family;
+$typography-headline2-font-family: $font-family;
+$typography-headline3-font-family: $font-family;
+$typography-headline4-font-family: $font-family;
+$typography-headline5-font-family: $font-family;
+$typography-headline6-font-family: $font-family;
+$typography-body1-font-family: $font-family;
+$typography-body2-font-family: $font-family;
 $typography-button-font-family: $font-family;
 $size-key: $size-key-tiny $size-key-small $size-key-medium $size-key-large $size-key-giant;
 $elevation-key: $elevation-key-light $elevation-key-semilight $elevation-key-regular $elevation-key-semibold $elevation-key-bold $elevation-key-extrabold;
@@ -307,7 +551,7 @@ $_color-dark: (
                 #{'--#{$prefix}-color-light-#{$palette-key}'}: #{$palette-steps};
             }
         }
-        // remap the light colors to the default colors
+        // remap light colors to default colors
         @each $palette-key, $palette-steps in $_color-light {
             @if meta.type-of($palette-steps) == 'map' {
                 @each $palette-step-key, $palette-step in $palette-steps {
@@ -328,7 +572,7 @@ $_color-dark: (
                     #{'--#{$prefix}-color-dark-#{$palette-key}'}: #{$palette-steps};
                 }
             }
-            // remap the dark colors to the default colors
+            // remap dark colors to default colors
             @each $palette-key, $palette-steps in $_color-dark {
                 @if meta.type-of($palette-steps) == 'map' {
                     @each $palette-step-key, $palette-step in $palette-steps {
@@ -672,6 +916,7 @@ $transition: $duration-short;
     }
 }
 $scheme-light: (
+    surface: $scheme-light-surface,
     contrast: $scheme-light-contrast,
     background: $scheme-light-background,
     foreground: $scheme-light-foreground,
@@ -680,9 +925,11 @@ $scheme-light: (
     lowlight: $scheme-light-lowlight,
     transparent: $scheme-light-transparent,
     semi-transparent: $scheme-light-semi-transparent,
-    disabled: $scheme-light-disabled
+    disabled: $scheme-light-disabled,
+    selection: $scheme-light-selection
 );
 $scheme-dark: (
+    surface: $scheme-dark-surface,
     contrast: $scheme-dark-contrast,
     background: $scheme-dark-background,
     foreground: $scheme-dark-foreground,
@@ -691,7 +938,8 @@ $scheme-dark: (
     lowlight: $scheme-dark-lowlight,
     transparent: $scheme-dark-transparent,
     semi-transparent: $scheme-dark-semi-transparent,
-    disabled: $scheme-dark-disabled
+    disabled: $scheme-dark-disabled,
+    selection: $scheme-dark-selection
 );
 @mixin scheme-style($prefix) {
     :root,
@@ -756,23 +1004,77 @@ $scheme-dark: (
     $base-styles: (-moz-osx-font-smoothing: grayscale, -webkit-font-smoothing: antialiased, font-family: $font-family);
     $scale-styles: (
         'typography': $base-styles,
-        'typography-heading': (
-            font-family: $typography-heading-font-family,
-            font-size: $typography-heading-font-size,
-            line-height: $typography-heading-line-height,
-            font-weight: $typography-heading-font-weight,
-            letter-spacing: $typography-heading-letter-spacing,
-            text-decoration: $typography-heading-text-decoration,
-            text-transform: $typography-heading-text-transform
+        'typography-headline1': (
+            font-family: $typography-headline1-font-family,
+            font-size: $typography-headline1-font-size,
+            line-height: $typography-headline1-line-height,
+            font-weight: $typography-headline1-font-weight,
+            letter-spacing: $typography-headline1-letter-spacing,
+            text-decoration: $typography-headline1-text-decoration,
+            text-transform: $typography-headline1-text-transform
         ),
-        'typography-content': (
-            font-family: $typography-content-font-family,
-            font-size: $typography-content-font-size,
-            line-height: $typography-content-line-height,
-            font-weight: $typography-content-font-weight,
-            letter-spacing: $typography-content-letter-spacing,
-            text-decoration: $typography-content-text-decoration,
-            text-transform: $typography-content-text-transform
+        'typography-headline2': (
+            font-family: $typography-headline2-font-family,
+            font-size: $typography-headline2-font-size,
+            line-height: $typography-headline2-line-height,
+            font-weight: $typography-headline2-font-weight,
+            letter-spacing: $typography-headline2-letter-spacing,
+            text-decoration: $typography-headline2-text-decoration,
+            text-transform: $typography-headline2-text-transform
+        ),
+        'typography-headline3': (
+            font-family: $typography-headline3-font-family,
+            font-size: $typography-headline3-font-size,
+            line-height: $typography-headline3-line-height,
+            font-weight: $typography-headline3-font-weight,
+            letter-spacing: $typography-headline3-letter-spacing,
+            text-decoration: $typography-headline3-text-decoration,
+            text-transform: $typography-headline3-text-transform
+        ),
+        'typography-headline4': (
+            font-family: $typography-headline4-font-family,
+            font-size: $typography-headline4-font-size,
+            line-height: $typography-headline4-line-height,
+            font-weight: $typography-headline4-font-weight,
+            letter-spacing: $typography-headline4-letter-spacing,
+            text-decoration: $typography-headline4-text-decoration,
+            text-transform: $typography-headline4-text-transform
+        ),
+        'typography-headline5': (
+            font-family: $typography-headline5-font-family,
+            font-size: $typography-headline5-font-size,
+            line-height: $typography-headline5-line-height,
+            font-weight: $typography-headline5-font-weight,
+            letter-spacing: $typography-headline5-letter-spacing,
+            text-decoration: $typography-headline5-text-decoration,
+            text-transform: $typography-headline5-text-transform
+        ),
+        'typography-headline6': (
+            font-family: $typography-headline6-font-family,
+            font-size: $typography-headline6-font-size,
+            line-height: $typography-headline6-line-height,
+            font-weight: $typography-headline6-font-weight,
+            letter-spacing: $typography-headline6-letter-spacing,
+            text-decoration: $typography-headline6-text-decoration,
+            text-transform: $typography-headline6-text-transform
+        ),
+        'typography-body1': (
+            font-family: $typography-body1-font-family,
+            font-size: $typography-body1-font-size,
+            line-height: $typography-body1-line-height,
+            font-weight: $typography-body1-font-weight,
+            letter-spacing: $typography-body1-letter-spacing,
+            text-decoration: $typography-body1-text-decoration,
+            text-transform: $typography-body1-text-transform
+        ),
+        'typography-body2': (
+            font-family: $typography-body2-font-family,
+            font-size: $typography-body2-font-size,
+            line-height: $typography-body2-line-height,
+            font-weight: $typography-body2-font-weight,
+            letter-spacing: $typography-body2-letter-spacing,
+            text-decoration: $typography-body2-text-decoration,
+            text-transform: $typography-body2-text-transform
         ),
         'typography-button': (
             font-family: $typography-button-font-family,
@@ -1031,11 +1333,15 @@ $audio-props: (
   'translate': unset
 );
 $auto-complete-box-props: (
-  'background-color': var(--cosmopolitan-scheme-background),
-  'border-color': var(--cosmopolitan-scheme-highlight),
-  'border-radius': var(--cosmopolitan-layout-radius),
-  'border-style': solid,
-  'border-width': var(--cosmopolitan-layout-thickness),
+  'background-color': unset,
+  'border-color': unset,
+  'border-radius': unset,
+  'border-style': unset,
+  'border-width': unset,
+  'focus-ring-active-width': 8px,
+  'focus-ring-color': unset,
+  'focus-ring-inward-offset': 2px,
+  'focus-ring-outward-offset': 2px,
   'font-family': unset,
   'font-letter-spacing': unset,
   'font-line-height': unset,
@@ -1043,17 +1349,13 @@ $auto-complete-box-props: (
   'font-text-decoration': unset,
   'font-text-transform': unset,
   'font-weight': unset,
-  'foreground-color': var(--cosmopolitan-scheme-foreground),
+  'foreground-color': unset,
   'gap': unset,
   'padding-bottom': unset,
   'padding-left': unset,
   'padding-right': unset,
   'padding-top': unset,
-  'shadow-blur': unset,
-  'shadow-color': unset,
-  'shadow-offset-x': unset,
-  'shadow-offset-y': unset,
-  'shadow-spread': unset,
+  'shadow': unset,
   'transition-duration': unset,
   'transition-mode': unset,
   'transition-property': unset,
@@ -1143,6 +1445,7 @@ $back-top-props: (
 );
 $backdrop-props: (
   'background-color': var(--cosmopolitan-scheme-semi-transparent),
+  'blur': none,
   'font-family': unset,
   'font-letter-spacing': unset,
   'font-line-height': unset,
@@ -1157,7 +1460,7 @@ $backdrop-props: (
   'padding-top': unset,
   'transition-duration': .2s,
   'transition-mode': ease,
-  'transition-property': opacity,
+  'transition-property': (opacity),
   'translate': unset
 );
 $badge-props: (
@@ -1270,29 +1573,6 @@ $banner-sub-header-props: (
   'transition-property': unset,
   'translate': unset
 );
-$bottom-sheet-props: (
-  'background-color': unset,
-  'border-color': unset,
-  'border-width': unset,
-  'font-family': unset,
-  'font-letter-spacing': unset,
-  'font-line-height': unset,
-  'font-size': unset,
-  'font-text-decoration': unset,
-  'font-text-transform': unset,
-  'font-weight': unset,
-  'foreground-color': unset,
-  'gap': unset,
-  'padding-bottom': unset,
-  'padding-left': unset,
-  'padding-right': unset,
-  'padding-top': unset,
-  'transition-duration': unset,
-  'transition-mode': unset,
-  'transition-property': unset,
-  'translate': unset,
-  'translate-y': unset
-);
 $box-props: (
   'background-color': unset,
   'border-color': unset,
@@ -1839,6 +2119,7 @@ $carousel-item2-props: (
   'translate': unset
 );
 $cell-props: (
+  'background-color': var(--cosmopolitan-scheme-background),
   'font-family': unset,
   'font-letter-spacing': unset,
   'font-line-height': unset,
@@ -3089,6 +3370,84 @@ $drawer-content-props: (
   'transition-property': unset,
   'translate': unset
 );
+$drawer-footer-props: (
+  'font-family': unset,
+  'font-letter-spacing': unset,
+  'font-line-height': unset,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': unset,
+  'gap': unset,
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset
+);
+$drawer-header-props: (
+  'font-family': unset,
+  'font-letter-spacing': unset,
+  'font-line-height': unset,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': unset,
+  'gap': unset,
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset
+);
+$drawer-header-sub-text-props: (
+  'background-color': unset,
+  'border-color': unset,
+  'font-family': unset,
+  'font-letter-spacing': unset,
+  'font-line-height': unset,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': unset,
+  'foreground-color': unset,
+  'gap': unset,
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset
+);
+$drawer-header-text-props: (
+  'background-color': unset,
+  'border-color': unset,
+  'font-family': unset,
+  'font-letter-spacing': unset,
+  'font-line-height': unset,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': unset,
+  'foreground-color': unset,
+  'gap': unset,
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset
+);
 $drop-down-button-props: (
   'background-color': var(--cosmopolitan-scheme-background),
   'border-color': var(--cosmopolitan-scheme-highlight),
@@ -5009,6 +5368,42 @@ $rating-props: (
   'transition-property': unset,
   'translate': unset
 );
+$region-props: (
+  'font-family': unset,
+  'font-letter-spacing': unset,
+  'font-line-height': unset,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': unset,
+  'gap': unset,
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset
+);
+$region-view-props: (
+  'font-family': unset,
+  'font-letter-spacing': unset,
+  'font-line-height': unset,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': unset,
+  'gap': unset,
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset
+);
 $repeat-button-props: (
   'background-color': unset,
   'border-color': unset,
@@ -5509,6 +5904,29 @@ $select-item-group-props: (
   'transition-property': unset,
   'translate': unset
 );
+$sheet-props: (
+  'background-color': unset,
+  'border-color': unset,
+  'border-width': unset,
+  'font-family': unset,
+  'font-letter-spacing': unset,
+  'font-line-height': unset,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': unset,
+  'foreground-color': unset,
+  'gap': unset,
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset,
+  'translate-y': unset
+);
 $signature-pad-props: (
   'background-color': unset,
   'border-color': unset,
@@ -5687,8 +6105,6 @@ $split-props: (
   'font-text-transform': unset,
   'font-weight': unset,
   'gap': unset,
-  'max': 100%,
-  'min': 0%,
   'padding-bottom': unset,
   'padding-left': unset,
   'padding-right': unset,
@@ -5756,6 +6172,63 @@ $stack-props: (
   'transition-property': unset,
   'translate': unset
 );
+$stepper-props: (
+  'connector-background': linear-gradient(90deg, var(--cosmopolitan-scheme-middlelight), var(--cosmopolitan-scheme-middlelight)),
+  'connector-margin': calc(var(--cosmopolitan-layout-space) / 2),
+  'connector-radius': 999px,
+  'connector-size': calc(var(--cosmopolitan-layout-thickness) * 2),
+  'content-gap': calc(var(--cosmopolitan-layout-space) * 2),
+  'description-size': 0.875rem,
+  'focus-outline-offset': 4px,
+  'focus-outline-width': var(--cosmopolitan-layout-thickness),
+  'font-family': unset,
+  'font-letter-spacing': unset,
+  'font-line-height': unset,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': unset,
+  'foreground-color': var(--cosmopolitan-scheme-foreground),
+  'gap': var(--cosmopolitan-layout-space),
+  'header-padding-vertical': var(--cosmopolitan-layout-space),
+  'icon-border-width': calc(var(--cosmopolitan-layout-thickness) * 3),
+  'icon-radius': 999px,
+  'icon-shadow': 0 1px 2px rgba(0,0,0,0.12),
+  'icon-size': calc(var(--cosmopolitan-layout-space) * 3),
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'step-padding-vertical': calc(var(--cosmopolitan-layout-space) / 2),
+  'text-gap': 0.15rem,
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset,
+  'vertical-connector-length': calc(var(--cosmopolitan-layout-space) * 3),
+  'vertical-connector-margin': calc(var(--cosmopolitan-layout-space) * 0.5)
+);
+$stepper-item-props: (
+  'font-family': unset,
+  'font-letter-spacing': unset,
+  'font-line-height': unset,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': unset,
+  'gap': unset,
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'panel-padding': calc(var(--cosmopolitan-layout-space) * 2),
+  'panel-radius': var(--cosmopolitan-layout-radius),
+  'panel-shadow': 0 1px 2px rgba(0,0,0,0.08),
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset
+);
 $sticky-props: (
   'font-family': unset,
   'font-letter-spacing': unset,
@@ -6307,6 +6780,117 @@ $time-box-props: (
   'transition-property': unset,
   'translate': unset
 );
+$timeline-props: (
+  'content-gap': var(--cosmopolitan-layout-space),
+  'font-family': var(--cosmopolitan-font-family),
+  'font-letter-spacing': unset,
+  'font-line-height': 1.5,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': 400,
+  'foreground-color': var(--cosmopolitan-scheme-foreground),
+  'gap': calc(var(--cosmopolitan-layout-space) * 2),
+  'line-color': var(--cosmopolitan-scheme-highlight),
+  'line-offset': calc(var(--cosmopolitan-layout-space) * 3),
+  'line-thickness': var(--cosmopolitan-layout-thickness),
+  'marker-border-color': var(--cosmopolitan-scheme-highlight),
+  'marker-border-width': var(--cosmopolitan-layout-thickness),
+  'marker-color': var(--cosmopolitan-scheme-background),
+  'marker-size': calc(var(--cosmopolitan-layout-space) * 2.5),
+  'padding-bottom': var(--cosmopolitan-layout-space),
+  'padding-left': var(--cosmopolitan-layout-space),
+  'padding-right': var(--cosmopolitan-layout-space),
+  'padding-top': var(--cosmopolitan-layout-space),
+  'transition-duration': var(--cosmopolitan-duration-short),
+  'transition-mode': ease,
+  'transition-property': (color, background-color, transform),
+  'translate': unset
+);
+$timeline-content-props: (
+  'font-family': var(--cosmopolitan-font-family),
+  'font-letter-spacing': unset,
+  'font-line-height': 1.5,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': 400,
+  'foreground-color': var(--cosmopolitan-scheme-foreground),
+  'gap': unset,
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset
+);
+$timeline-item-props: (
+  'content-gap': var(--cosmopolitan-layout-space),
+  'font-family': unset,
+  'font-letter-spacing': unset,
+  'font-line-height': unset,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': unset,
+  'gap': unset,
+  'line-offset': calc(var(--cosmopolitan-layout-space) * 3),
+  'marker-border-color': var(--cosmopolitan-scheme-highlight),
+  'marker-border-width': var(--cosmopolitan-layout-thickness),
+  'marker-color': var(--cosmopolitan-scheme-background),
+  'marker-size': calc(var(--cosmopolitan-layout-space) * 2.5),
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset
+);
+$timeline-marker-props: (
+  'font-family': unset,
+  'font-letter-spacing': unset,
+  'font-line-height': unset,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': unset,
+  'gap': unset,
+  'marker-border-color': var(--cosmopolitan-scheme-highlight),
+  'marker-border-width': var(--cosmopolitan-layout-thickness),
+  'marker-color': var(--cosmopolitan-scheme-background),
+  'marker-size': calc(var(--cosmopolitan-layout-space) * 2.5),
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset
+);
+$timeline-opposite-props: (
+  'font-family': var(--cosmopolitan-font-family),
+  'font-letter-spacing': unset,
+  'font-line-height': 1.5,
+  'font-size': unset,
+  'font-text-decoration': unset,
+  'font-text-transform': unset,
+  'font-weight': 400,
+  'foreground-color': var(--cosmopolitan-scheme-foreground),
+  'gap': unset,
+  'padding-bottom': unset,
+  'padding-left': unset,
+  'padding-right': unset,
+  'padding-top': unset,
+  'transition-duration': unset,
+  'transition-mode': unset,
+  'transition-property': unset,
+  'translate': unset
+);
 $title-bar-props: (
   'font-family': unset,
   'font-letter-spacing': unset,