@breadstone/mosaik-themes 0.1.22 → 0.1.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/package.json +2 -2
  2. package/themes/cosmopolitan.scss +310 -274
  3. package/themes/joy.scss +422 -403
  4. package/themes/memphis.scss +342 -306
package/themes/cosmopolitan.scss CHANGED
@@ -5,11 +5,20 @@
5
5
  @mixin _generate-elevation-vars($map, $prefix, $mode) {
6
6
  @each $key, $value in $map {
7
7
  @if meta.type-of($value) == 'map' {
8
+ $primary-layer-key: null;
8
9
  @each $level-key, $level-value in $value {
10
+ @if $primary-layer-key == null {
11
+ $primary-layer-key: $level-key;
12
+ }
9
13
  @each $part, $val in $level-value {
10
14
  #{'--#{$prefix}-elevation-#{$mode}-#{$key}-#{$part}-#{$level-key}'}: #{$val};
11
15
  }
12
16
  }
17
+ @if $primary-layer-key != null {
18
+ @each $part, $val in map.get($value, $primary-layer-key) {
19
+ #{'--#{$prefix}-elevation-#{$mode}-#{$key}-#{$part}'}: var(--#{$prefix}-elevation-#{$mode}-#{$key}-#{$part}-#{$primary-layer-key});
20
+ }
21
+ }
13
22
  } @else {
14
23
  #{'--#{$prefix}-elevation-#{$mode}-#{$key}'}: #{$value};
15
24
  }
@@ -33,11 +42,20 @@
33
42
  @mixin _remap-elevation-vars($map, $prefix, $mode) {
34
43
  @each $key, $value in $map {
35
44
  @if meta.type-of($value) == 'map' {
45
+ $primary-layer-key: null;
36
46
  @each $level-key, $level-value in $value {
47
+ @if $primary-layer-key == null {
48
+ $primary-layer-key: $level-key;
49
+ }
37
50
  @each $part, $val in $level-value {
38
51
  #{'--#{$prefix}-elevation-#{$key}-#{$part}-#{$level-key}'}: var(--#{$prefix}-elevation-#{$mode}-#{$key}-#{$part}-#{$level-key});
39
52
  }
40
53
  }
54
+ @if $primary-layer-key != null {
55
+ @each $part, $val in map.get($value, $primary-layer-key) {
56
+ #{'--#{$prefix}-elevation-#{$key}-#{$part}'}: var(--#{$prefix}-elevation-#{$mode}-#{$key}-#{$part});
57
+ }
58
+ }
41
59
  #{'--#{$prefix}-elevation-#{$key}'}: var(--#{$prefix}-elevation-#{$mode}-#{$key});
42
60
  } @else {
43
61
  #{'--#{$prefix}-elevation-#{$key}'}: var(--#{$prefix}-elevation-#{$mode}-#{$key});
@@ -643,6 +661,23 @@ $_color-dark: (
643
661
  @include _scrollbar-style($prefix);
644
662
  @include _selection-style($prefix);
645
663
  }
664
+ @mixin duration-style($prefix) {
665
+ $durations: (
666
+ 'short': $duration-short,
667
+ 'medium': $duration-medium,
668
+ 'long': $duration-long
669
+ );
670
+ :root,
671
+ :host {
672
+ @each $key, $value in $durations {
673
+ --#{$prefix}-duration-#{$key}: #{$value};
674
+ --mosaik-duration-#{$key}: var(--#{$prefix}-duration-#{$key});
675
+ }
676
+ }
677
+ }
678
+ @function get-duration($duration) {
679
+ @return var(--#{$name}-duration-#{$duration});
680
+ }
646
681
  $_shadows-light: (
647
682
  none: $elevation-none,
648
683
  light: (
@@ -1166,6 +1201,7 @@ $scheme-dark: (
1166
1201
  @mixin cosmopolitan-style($radius: $layout-radius, $thickness: $layout-thickness, $space: $layout-space) {
1167
1202
  $theme: 'cosmopolitan';
1168
1203
  @include layout-style($theme, $radius, $thickness, $space);
1204
+ @include duration-style($theme);
1169
1205
  @include scheme-style($theme);
1170
1206
  @include color-style($theme);
1171
1207
  @include elevation-style($theme);
@@ -1632,7 +1668,7 @@ $auto-complete-box-props: (
1632
1668
  'shadow-offset-x': unset,
1633
1669
  'shadow-offset-y': unset,
1634
1670
  'shadow-spread': unset,
1635
- 'transition-duration': var(--cosmopolitan-duration-short),
1671
+ 'transition-duration': var(--mosaik-duration-short),
1636
1672
  'transition-mode': ease,
1637
1673
  'transition-property': (all),
1638
1674
  'translate': none
@@ -1818,12 +1854,12 @@ $badge-props: (
1818
1854
  'padding-left': unset,
1819
1855
  'padding-right': unset,
1820
1856
  'padding-top': unset,
1821
- 'shadow': var(--cosmopolitan-elevation-light-offset-x-1) var(--cosmopolitan-elevation-light-offset-y-1) var(--cosmopolitan-elevation-light-blur-1) var(--cosmopolitan-elevation-light-spread-1) var(--cosmopolitan-elevation-light-color-1),
1822
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-1),
1823
- 'shadow-color': var(--cosmopolitan-elevation-light-color-1),
1824
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-1),
1825
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-1),
1826
- 'shadow-spread': var(--cosmopolitan-elevation-light-spread-1),
1857
+ 'shadow': var(--cosmopolitan-elevation-light-offset-x) var(--cosmopolitan-elevation-light-offset-y) var(--cosmopolitan-elevation-light-blur) var(--cosmopolitan-elevation-light-spread) var(--cosmopolitan-elevation-light-color),
1858
+ 'shadow-blur': var(--cosmopolitan-elevation-light-blur),
1859
+ 'shadow-color': var(--cosmopolitan-elevation-light-color),
1860
+ 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x),
1861
+ 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y),
1862
+ 'shadow-spread': var(--cosmopolitan-elevation-light-spread),
1827
1863
  'transition-duration': unset,
1828
1864
  'transition-mode': unset,
1829
1865
  'transition-property': (unset),
@@ -1857,12 +1893,12 @@ $banner-props: (
1857
1893
  'padding-left': unset,
1858
1894
  'padding-right': unset,
1859
1895
  'padding-top': unset,
1860
- 'shadow': var(--cosmopolitan-elevation-light-offset-x-1) var(--cosmopolitan-elevation-light-offset-y-1) var(--cosmopolitan-elevation-light-blur-1) var(--cosmopolitan-elevation-light-spread-1) var(--cosmopolitan-elevation-light-color-1),
1861
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-1),
1862
- 'shadow-color': var(--cosmopolitan-elevation-light-color-1),
1863
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-1),
1864
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-1),
1865
- 'shadow-spread': var(--cosmopolitan-elevation-light-spread-1),
1896
+ 'shadow': var(--cosmopolitan-elevation-light-offset-x) var(--cosmopolitan-elevation-light-offset-y) var(--cosmopolitan-elevation-light-blur) var(--cosmopolitan-elevation-light-spread) var(--cosmopolitan-elevation-light-color),
1897
+ 'shadow-blur': var(--cosmopolitan-elevation-light-blur),
1898
+ 'shadow-color': var(--cosmopolitan-elevation-light-color),
1899
+ 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x),
1900
+ 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y),
1901
+ 'shadow-spread': var(--cosmopolitan-elevation-light-spread),
1866
1902
  'transition-duration': unset,
1867
1903
  'transition-mode': unset,
1868
1904
  'transition-property': (unset),
@@ -2162,12 +2198,12 @@ $button-props: (
2162
2198
  'progress-ring-width': var(--cosmopolitan-layout-thickness),
2163
2199
  'ripple-color': unset,
2164
2200
  'ripple-duration': 0.20s,
2165
- 'shadow': var(--cosmopolitan-elevation-semilight-offset-x-0) var(--cosmopolitan-elevation-semilight-offset-y-0) var(--cosmopolitan-elevation-semilight-blur-0) var(--cosmopolitan-elevation-semilight-spread-0) var(--cosmopolitan-elevation-semilight-color-0),
2166
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
2167
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
2168
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
2169
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
2170
- 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread-0),
2201
+ 'shadow': var(--cosmopolitan-elevation-semilight-offset-x) var(--cosmopolitan-elevation-semilight-offset-y) var(--cosmopolitan-elevation-semilight-blur) var(--cosmopolitan-elevation-semilight-spread) var(--cosmopolitan-elevation-semilight-color),
2202
+ 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur),
2203
+ 'shadow-color': var(--cosmopolitan-elevation-semilight-color),
2204
+ 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x),
2205
+ 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y),
2206
+ 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread),
2171
2207
  'transition-duration': var(--cosmopolitan-layout-transition),
2172
2208
  'transition-mode': ease,
2173
2209
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
@@ -2242,12 +2278,12 @@ $calendar-props: (
2242
2278
  'padding-left': calc(var(--cosmopolitan-layout-space) * 2),
2243
2279
  'padding-right': calc(var(--cosmopolitan-layout-space) * 2),
2244
2280
  'padding-top': var(--cosmopolitan-layout-space),
2245
- 'shadow': var(--cosmopolitan-elevation-light-offset-x-0) var(--cosmopolitan-elevation-light-offset-y-0) var(--cosmopolitan-elevation-light-blur-0) var(--cosmopolitan-elevation-light-spread-0) var(--cosmopolitan-elevation-light-color-0),
2246
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-0),
2247
- 'shadow-color': var(--cosmopolitan-elevation-light-color-0),
2248
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-0),
2249
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-0),
2250
- 'shadow-spread': var(--cosmopolitan-elevation-light-spread-0),
2281
+ 'shadow': var(--cosmopolitan-elevation-light-offset-x) var(--cosmopolitan-elevation-light-offset-y) var(--cosmopolitan-elevation-light-blur) var(--cosmopolitan-elevation-light-spread) var(--cosmopolitan-elevation-light-color),
2282
+ 'shadow-blur': var(--cosmopolitan-elevation-light-blur),
2283
+ 'shadow-color': var(--cosmopolitan-elevation-light-color),
2284
+ 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x),
2285
+ 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y),
2286
+ 'shadow-spread': var(--cosmopolitan-elevation-light-spread),
2251
2287
  'transition-duration': .2s,
2252
2288
  'transition-mode': ease,
2253
2289
  'transition-property': (background-color, color, border-color, opacity),
@@ -2364,12 +2400,12 @@ $calendar-item-props: (
2364
2400
  'ripple-color': unset,
2365
2401
  'ripple-duration': 0.20s,
2366
2402
  'selection-background-color': var(--cosmopolitan-scheme-selection),
2367
- 'shadow': var(--cosmopolitan-elevation-light-offset-x-0) var(--cosmopolitan-elevation-light-offset-y-0) var(--cosmopolitan-elevation-light-blur-0) var(--cosmopolitan-elevation-light-spread-0) var(--cosmopolitan-elevation-light-color-0),
2368
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-0),
2369
- 'shadow-color': var(--cosmopolitan-elevation-light-color-0),
2370
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-0),
2371
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-0),
2372
- 'shadow-spread': var(--cosmopolitan-elevation-light-spread-0),
2403
+ 'shadow': var(--cosmopolitan-elevation-light-offset-x) var(--cosmopolitan-elevation-light-offset-y) var(--cosmopolitan-elevation-light-blur) var(--cosmopolitan-elevation-light-spread) var(--cosmopolitan-elevation-light-color),
2404
+ 'shadow-blur': var(--cosmopolitan-elevation-light-blur),
2405
+ 'shadow-color': var(--cosmopolitan-elevation-light-color),
2406
+ 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x),
2407
+ 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y),
2408
+ 'shadow-spread': var(--cosmopolitan-elevation-light-spread),
2373
2409
  'today-border-color': var(--cosmopolitan-color-primary-500),
2374
2410
  'today-border-width': 2px,
2375
2411
  'transition-duration': .2s,
@@ -2967,12 +3003,12 @@ $cell-group-props: (
2967
3003
  'padding-left': unset,
2968
3004
  'padding-right': unset,
2969
3005
  'padding-top': unset,
2970
- 'shadow': var(--cosmopolitan-elevation-bold-offset-x-0) var(--cosmopolitan-elevation-bold-offset-y-0) var(--cosmopolitan-elevation-bold-blur-0) var(--cosmopolitan-elevation-bold-spread-0) var(--cosmopolitan-elevation-bold-color-0),
2971
- 'shadow-blur': var(--cosmopolitan-elevation-bold-blur-0),
2972
- 'shadow-color': var(--cosmopolitan-elevation-bold-color-0),
2973
- 'shadow-offset-x': var(--cosmopolitan-elevation-bold-offset-x-0),
2974
- 'shadow-offset-y': var(--cosmopolitan-elevation-bold-offset-y-0),
2975
- 'shadow-spread': var(--cosmopolitan-elevation-bold-spread-0),
3006
+ 'shadow': var(--cosmopolitan-elevation-bold-offset-x) var(--cosmopolitan-elevation-bold-offset-y) var(--cosmopolitan-elevation-bold-blur) var(--cosmopolitan-elevation-bold-spread) var(--cosmopolitan-elevation-bold-color),
3007
+ 'shadow-blur': var(--cosmopolitan-elevation-bold-blur),
3008
+ 'shadow-color': var(--cosmopolitan-elevation-bold-color),
3009
+ 'shadow-offset-x': var(--cosmopolitan-elevation-bold-offset-x),
3010
+ 'shadow-offset-y': var(--cosmopolitan-elevation-bold-offset-y),
3011
+ 'shadow-spread': var(--cosmopolitan-elevation-bold-spread),
2976
3012
  'transition-duration': unset,
2977
3013
  'transition-mode': unset,
2978
3014
  'transition-property': (unset),
@@ -3117,13 +3153,13 @@ $chat-input-props: (
3117
3153
  'padding-left': calc(var(--cosmopolitan-layout-space) * 1.5),
3118
3154
  'padding-right': calc(var(--cosmopolitan-layout-space) * 1.5),
3119
3155
  'padding-top': var(--cosmopolitan-layout-space),
3120
- 'shadow': var(--cosmopolitan-elevation-semilight-offset-x-0) var(--cosmopolitan-elevation-semilight-offset-y-0) var(--cosmopolitan-elevation-semilight-blur-0) var(--cosmopolitan-elevation-semilight-spread-0) var(--cosmopolitan-elevation-semilight-color-0),
3121
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
3122
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
3123
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
3124
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
3125
- 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread-0),
3126
- 'transition-duration': var(--cosmopolitan-duration-short),
3156
+ 'shadow': var(--cosmopolitan-elevation-semilight-offset-x) var(--cosmopolitan-elevation-semilight-offset-y) var(--cosmopolitan-elevation-semilight-blur) var(--cosmopolitan-elevation-semilight-spread) var(--cosmopolitan-elevation-semilight-color),
3157
+ 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur),
3158
+ 'shadow-color': var(--cosmopolitan-elevation-semilight-color),
3159
+ 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x),
3160
+ 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y),
3161
+ 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread),
3162
+ 'transition-duration': var(--mosaik-duration-short),
3127
3163
  'transition-mode': ease,
3128
3164
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
3129
3165
  'translate': none
@@ -3157,13 +3193,13 @@ $chat-input-attachment-list-props: (
3157
3193
  'padding-left': calc(var(--cosmopolitan-layout-space) * 1.5),
3158
3194
  'padding-right': calc(var(--cosmopolitan-layout-space) * 1.5),
3159
3195
  'padding-top': var(--cosmopolitan-layout-space),
3160
- 'shadow': var(--cosmopolitan-elevation-semilight-offset-x-0) var(--cosmopolitan-elevation-semilight-offset-y-0) var(--cosmopolitan-elevation-semilight-blur-0) var(--cosmopolitan-elevation-semilight-spread-0) var(--cosmopolitan-elevation-semilight-color-0),
3161
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
3162
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
3163
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
3164
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
3165
- 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread-0),
3166
- 'transition-duration': var(--cosmopolitan-duration-short),
3196
+ 'shadow': var(--cosmopolitan-elevation-semilight-offset-x) var(--cosmopolitan-elevation-semilight-offset-y) var(--cosmopolitan-elevation-semilight-blur) var(--cosmopolitan-elevation-semilight-spread) var(--cosmopolitan-elevation-semilight-color),
3197
+ 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur),
3198
+ 'shadow-color': var(--cosmopolitan-elevation-semilight-color),
3199
+ 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x),
3200
+ 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y),
3201
+ 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread),
3202
+ 'transition-duration': var(--mosaik-duration-short),
3167
3203
  'transition-mode': ease,
3168
3204
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
3169
3205
  'translate': none
@@ -3235,12 +3271,12 @@ $chat-message-props: (
3235
3271
  'padding-left': unset,
3236
3272
  'padding-right': unset,
3237
3273
  'padding-top': unset,
3238
- 'shadow': var(--cosmopolitan-elevation-light-offset-x-1) var(--cosmopolitan-elevation-light-offset-y-1) var(--cosmopolitan-elevation-light-blur-1) var(--cosmopolitan-elevation-light-spread-1) var(--cosmopolitan-elevation-light-color-1),
3239
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-1),
3240
- 'shadow-color': var(--cosmopolitan-elevation-light-color-1),
3241
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-1),
3242
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-1),
3243
- 'shadow-spread': var(--cosmopolitan-elevation-light-spread-1),
3274
+ 'shadow': var(--cosmopolitan-elevation-light-offset-x) var(--cosmopolitan-elevation-light-offset-y) var(--cosmopolitan-elevation-light-blur) var(--cosmopolitan-elevation-light-spread) var(--cosmopolitan-elevation-light-color),
3275
+ 'shadow-blur': var(--cosmopolitan-elevation-light-blur),
3276
+ 'shadow-color': var(--cosmopolitan-elevation-light-color),
3277
+ 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x),
3278
+ 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y),
3279
+ 'shadow-spread': var(--cosmopolitan-elevation-light-spread),
3244
3280
  'transition-duration': unset,
3245
3281
  'transition-mode': unset,
3246
3282
  'transition-property': (unset),
@@ -3287,7 +3323,7 @@ $chat-message-avatar-props: (
3287
3323
  'shadow-offset-x': unset,
3288
3324
  'shadow-offset-y': unset,
3289
3325
  'shadow-spread': unset,
3290
- 'transition-duration': var(--cosmopolitan-duration-short),
3326
+ 'transition-duration': var(--mosaik-duration-short),
3291
3327
  'transition-mode': ease,
3292
3328
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
3293
3329
  'translate': none
@@ -3321,7 +3357,7 @@ $chat-message-divider-props: (
3321
3357
  'shadow-offset-x': unset,
3322
3358
  'shadow-offset-y': unset,
3323
3359
  'shadow-spread': unset,
3324
- 'transition-duration': var(--cosmopolitan-duration-short),
3360
+ 'transition-duration': var(--mosaik-duration-short),
3325
3361
  'transition-mode': ease,
3326
3362
  'transition-property': (color, opacity, transform),
3327
3363
  'translate': none
@@ -3355,7 +3391,7 @@ $chat-message-reaction-props: (
3355
3391
  'shadow-offset-x': unset,
3356
3392
  'shadow-offset-y': unset,
3357
3393
  'shadow-spread': unset,
3358
- 'transition-duration': var(--cosmopolitan-duration-short),
3394
+ 'transition-duration': var(--mosaik-duration-short),
3359
3395
  'transition-mode': ease,
3360
3396
  'transition-property': (background-color, color, transform),
3361
3397
  'translate': none
@@ -3501,12 +3537,12 @@ $checkmark-props: (
3501
3537
  'padding-left': unset,
3502
3538
  'padding-right': unset,
3503
3539
  'padding-top': unset,
3504
- 'shadow': var(--cosmopolitan-elevation-light-offset-x-1) var(--cosmopolitan-elevation-light-offset-y-1) var(--cosmopolitan-elevation-light-blur-1) var(--cosmopolitan-elevation-light-spread-1) var(--cosmopolitan-elevation-light-color-1),
3505
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-1),
3506
- 'shadow-color': var(--cosmopolitan-elevation-light-color-1),
3507
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-1),
3508
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-1),
3509
- 'shadow-spread': var(--cosmopolitan-elevation-light-spread-1),
3540
+ 'shadow': var(--cosmopolitan-elevation-light-offset-x) var(--cosmopolitan-elevation-light-offset-y) var(--cosmopolitan-elevation-light-blur) var(--cosmopolitan-elevation-light-spread) var(--cosmopolitan-elevation-light-color),
3541
+ 'shadow-blur': var(--cosmopolitan-elevation-light-blur),
3542
+ 'shadow-color': var(--cosmopolitan-elevation-light-color),
3543
+ 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x),
3544
+ 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y),
3545
+ 'shadow-spread': var(--cosmopolitan-elevation-light-spread),
3510
3546
  'thickness': unset,
3511
3547
  'transition-duration': unset,
3512
3548
  'transition-mode': unset,
@@ -3549,12 +3585,12 @@ $chip-props: (
3549
3585
  'padding-top': unset,
3550
3586
  'ripple-color': unset,
3551
3587
  'ripple-duration': 0.20s,
3552
- 'shadow': var(--cosmopolitan-elevation-light-offset-x-0) var(--cosmopolitan-elevation-light-offset-y-0) var(--cosmopolitan-elevation-light-blur-0) var(--cosmopolitan-elevation-light-spread-0) var(--cosmopolitan-elevation-light-color-0),
3553
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-0),
3554
- 'shadow-color': var(--cosmopolitan-elevation-light-color-0),
3555
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-0),
3556
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-0),
3557
- 'shadow-spread': var(--cosmopolitan-elevation-light-spread-0),
3588
+ 'shadow': var(--cosmopolitan-elevation-light-offset-x) var(--cosmopolitan-elevation-light-offset-y) var(--cosmopolitan-elevation-light-blur) var(--cosmopolitan-elevation-light-spread) var(--cosmopolitan-elevation-light-color),
3589
+ 'shadow-blur': var(--cosmopolitan-elevation-light-blur),
3590
+ 'shadow-color': var(--cosmopolitan-elevation-light-color),
3591
+ 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x),
3592
+ 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y),
3593
+ 'shadow-spread': var(--cosmopolitan-elevation-light-spread),
3558
3594
  'transition-duration': unset,
3559
3595
  'transition-mode': unset,
3560
3596
  'transition-property': (unset),
@@ -3595,14 +3631,14 @@ $chip-box-props: (
3595
3631
  'padding-right': calc(var(--cosmopolitan-layout-space) * 1.5),
3596
3632
  'padding-top': var(--cosmopolitan-layout-space),
3597
3633
  'prefix-icon-size': 20px,
3598
- 'shadow': var(--cosmopolitan-elevation-semilight-offset-x-0) var(--cosmopolitan-elevation-semilight-offset-y-0) var(--cosmopolitan-elevation-semilight-blur-0) var(--cosmopolitan-elevation-semilight-spread-0) var(--cosmopolitan-elevation-semilight-color-0),
3599
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
3600
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
3601
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
3602
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
3603
- 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread-0),
3634
+ 'shadow': var(--cosmopolitan-elevation-semilight-offset-x) var(--cosmopolitan-elevation-semilight-offset-y) var(--cosmopolitan-elevation-semilight-blur) var(--cosmopolitan-elevation-semilight-spread) var(--cosmopolitan-elevation-semilight-color),
3635
+ 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur),
3636
+ 'shadow-color': var(--cosmopolitan-elevation-semilight-color),
3637
+ 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x),
3638
+ 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y),
3639
+ 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread),
3604
3640
  'suffix-icon-size': 20px,
3605
- 'transition-duration': var(--cosmopolitan-duration-short),
3641
+ 'transition-duration': var(--mosaik-duration-short),
3606
3642
  'transition-mode': ease,
3607
3643
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
3608
3644
  'translate': none
@@ -3723,7 +3759,7 @@ $choice-group-props: (
3723
3759
  'shadow-offset-x': unset,
3724
3760
  'shadow-offset-y': unset,
3725
3761
  'shadow-spread': unset,
3726
- 'transition-duration': var(--cosmopolitan-duration-short),
3762
+ 'transition-duration': var(--mosaik-duration-short),
3727
3763
  'transition-mode': ease,
3728
3764
  'transition-property': (background-color, color, border-color, box-shadow, transform),
3729
3765
  'translate': none
@@ -3762,7 +3798,7 @@ $choice-group-header-props: (
3762
3798
  'shadow-offset-x': unset,
3763
3799
  'shadow-offset-y': unset,
3764
3800
  'shadow-spread': unset,
3765
- 'transition-duration': var(--cosmopolitan-duration-short),
3801
+ 'transition-duration': var(--mosaik-duration-short),
3766
3802
  'transition-mode': ease,
3767
3803
  'transition-property': (color, transform),
3768
3804
  'translate': none
@@ -3800,7 +3836,7 @@ $clickable-props: (
3800
3836
  'padding-top': 0,
3801
3837
  'ripple-color': unset,
3802
3838
  'ripple-duration': 0.20s,
3803
- 'transition-duration': var(--cosmopolitan-duration-short),
3839
+ 'transition-duration': var(--mosaik-duration-short),
3804
3840
  'transition-mode': ease,
3805
3841
  'transition-property': (background-color),
3806
3842
  'translate': unset
@@ -3906,13 +3942,13 @@ $color-box-props: (
3906
3942
  'padding-left': calc(var(--cosmopolitan-layout-space) * 1.5),
3907
3943
  'padding-right': calc(var(--cosmopolitan-layout-space) * 1.5),
3908
3944
  'padding-top': var(--cosmopolitan-layout-space),
3909
- 'shadow': var(--cosmopolitan-elevation-semilight-offset-x-0) var(--cosmopolitan-elevation-semilight-offset-y-0) var(--cosmopolitan-elevation-semilight-blur-0) var(--cosmopolitan-elevation-semilight-spread-0) var(--cosmopolitan-elevation-semilight-color-0),
3910
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
3911
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
3912
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
3913
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
3914
- 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread-0),
3915
- 'transition-duration': var(--cosmopolitan-duration-short),
3945
+ 'shadow': var(--cosmopolitan-elevation-semilight-offset-x) var(--cosmopolitan-elevation-semilight-offset-y) var(--cosmopolitan-elevation-semilight-blur) var(--cosmopolitan-elevation-semilight-spread) var(--cosmopolitan-elevation-semilight-color),
3946
+ 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur),
3947
+ 'shadow-color': var(--cosmopolitan-elevation-semilight-color),
3948
+ 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x),
3949
+ 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y),
3950
+ 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread),
3951
+ 'transition-duration': var(--mosaik-duration-short),
3916
3952
  'transition-mode': ease,
3917
3953
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
3918
3954
  'translate': none
@@ -3956,7 +3992,7 @@ $color-editor-props: (
3956
3992
  'shadow-offset-x': unset,
3957
3993
  'shadow-offset-y': unset,
3958
3994
  'shadow-spread': unset,
3959
- 'transition-duration': var(--cosmopolitan-duration-short),
3995
+ 'transition-duration': var(--mosaik-duration-short),
3960
3996
  'transition-mode': ease,
3961
3997
  'transition-property': (background-color, border-color, box-shadow),
3962
3998
  'translate': none,
@@ -3996,19 +4032,19 @@ $color-editor-alpha-slider-props: (
3996
4032
  'padding-left': unset,
3997
4033
  'padding-right': unset,
3998
4034
  'padding-top': unset,
3999
- 'shadow': var(--cosmopolitan-elevation-light-offset-x-1) var(--cosmopolitan-elevation-light-offset-y-1) var(--cosmopolitan-elevation-light-blur-1) var(--cosmopolitan-elevation-light-spread-1) var(--cosmopolitan-elevation-light-color-1),
4000
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-1),
4001
- 'shadow-color': var(--cosmopolitan-elevation-light-color-1),
4002
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-1),
4003
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-1),
4004
- 'shadow-spread': var(--cosmopolitan-elevation-light-spread-1),
4035
+ 'shadow': var(--cosmopolitan-elevation-light-offset-x) var(--cosmopolitan-elevation-light-offset-y) var(--cosmopolitan-elevation-light-blur) var(--cosmopolitan-elevation-light-spread) var(--cosmopolitan-elevation-light-color),
4036
+ 'shadow-blur': var(--cosmopolitan-elevation-light-blur),
4037
+ 'shadow-color': var(--cosmopolitan-elevation-light-color),
4038
+ 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x),
4039
+ 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y),
4040
+ 'shadow-spread': var(--cosmopolitan-elevation-light-spread),
4005
4041
  'thumb-background-color': var(--cosmopolitan-scheme-neutral-container),
4006
4042
  'thumb-border-color': transparent,
4007
4043
  'thumb-border-radius': 50%,
4008
4044
  'thumb-border-width': 0,
4009
- 'thumb-shadow': var(--cosmopolitan-elevation-light-1),
4045
+ 'thumb-shadow': var(--cosmopolitan-elevation-light),
4010
4046
  'thumb-size': calc(var(--cosmopolitan-layout-space) * 1.75),
4011
- 'transition-duration': var(--cosmopolitan-duration-short),
4047
+ 'transition-duration': var(--mosaik-duration-short),
4012
4048
  'transition-mode': ease,
4013
4049
  'transition-property': (box-shadow, border-color),
4014
4050
  'translate': none,
@@ -4047,18 +4083,18 @@ $color-editor-area-props: (
4047
4083
  'padding-left': unset,
4048
4084
  'padding-right': unset,
4049
4085
  'padding-top': unset,
4050
- 'shadow': var(--cosmopolitan-elevation-light-offset-x-1) var(--cosmopolitan-elevation-light-offset-y-1) var(--cosmopolitan-elevation-light-blur-1) var(--cosmopolitan-elevation-light-spread-1) var(--cosmopolitan-elevation-light-color-1),
4051
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-1),
4052
- 'shadow-color': var(--cosmopolitan-elevation-light-color-1),
4053
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-1),
4054
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-1),
4055
- 'shadow-spread': var(--cosmopolitan-elevation-light-spread-1),
4086
+ 'shadow': var(--cosmopolitan-elevation-light-offset-x) var(--cosmopolitan-elevation-light-offset-y) var(--cosmopolitan-elevation-light-blur) var(--cosmopolitan-elevation-light-spread) var(--cosmopolitan-elevation-light-color),
4087
+ 'shadow-blur': var(--cosmopolitan-elevation-light-blur),
4088
+ 'shadow-color': var(--cosmopolitan-elevation-light-color),
4089
+ 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x),
4090
+ 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y),
4091
+ 'shadow-spread': var(--cosmopolitan-elevation-light-spread),
4056
4092
  'thumb-border-color': var(--cosmopolitan-scheme-surface),
4057
4093
  'thumb-border-radius': 50%,
4058
4094
  'thumb-border-width': calc(var(--cosmopolitan-layout-thickness) * 2),
4059
- 'thumb-shadow': var(--cosmopolitan-elevation-light-1),
4095
+ 'thumb-shadow': var(--cosmopolitan-elevation-light),
4060
4096
  'thumb-size': calc(var(--cosmopolitan-layout-space) * 1.75),
4061
- 'transition-duration': var(--cosmopolitan-duration-short),
4097
+ 'transition-duration': var(--mosaik-duration-short),
4062
4098
  'transition-mode': ease,
4063
4099
  'transition-property': (box-shadow, border-color),
4064
4100
  'translate': none,
@@ -4097,19 +4133,19 @@ $color-editor-hue-slider-props: (
4097
4133
  'padding-left': unset,
4098
4134
  'padding-right': unset,
4099
4135
  'padding-top': unset,
4100
- 'shadow': var(--cosmopolitan-elevation-light-offset-x-1) var(--cosmopolitan-elevation-light-offset-y-1) var(--cosmopolitan-elevation-light-blur-1) var(--cosmopolitan-elevation-light-spread-1) var(--cosmopolitan-elevation-light-color-1),
4101
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-1),
4102
- 'shadow-color': var(--cosmopolitan-elevation-light-color-1),
4103
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-1),
4104
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-1),
4105
- 'shadow-spread': var(--cosmopolitan-elevation-light-spread-1),
4136
+ 'shadow': var(--cosmopolitan-elevation-light-offset-x) var(--cosmopolitan-elevation-light-offset-y) var(--cosmopolitan-elevation-light-blur) var(--cosmopolitan-elevation-light-spread) var(--cosmopolitan-elevation-light-color),
4137
+ 'shadow-blur': var(--cosmopolitan-elevation-light-blur),
4138
+ 'shadow-color': var(--cosmopolitan-elevation-light-color),
4139
+ 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x),
4140
+ 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y),
4141
+ 'shadow-spread': var(--cosmopolitan-elevation-light-spread),
4106
4142
  'thumb-background-color': var(--cosmopolitan-scheme-neutral-container),
4107
4143
  'thumb-border-color': transparent,
4108
4144
  'thumb-border-radius': 50%,
4109
4145
  'thumb-border-width': 0,
4110
- 'thumb-shadow': var(--cosmopolitan-elevation-light-1),
4146
+ 'thumb-shadow': var(--cosmopolitan-elevation-light),
4111
4147
  'thumb-size': calc(var(--cosmopolitan-layout-space) * 1.75),
4112
- 'transition-duration': var(--cosmopolitan-duration-short),
4148
+ 'transition-duration': var(--mosaik-duration-short),
4113
4149
  'transition-mode': ease,
4114
4150
  'transition-property': (box-shadow, border-color),
4115
4151
  'translate': none,
@@ -4157,7 +4193,7 @@ $color-editor-inputs-props: (
4157
4193
  'shadow-offset-x': unset,
4158
4194
  'shadow-offset-y': unset,
4159
4195
  'shadow-spread': unset,
4160
- 'transition-duration': var(--cosmopolitan-duration-short),
4196
+ 'transition-duration': var(--mosaik-duration-short),
4161
4197
  'transition-mode': ease,
4162
4198
  'transition-property': (border-color, background-color),
4163
4199
  'translate': none,
@@ -4204,7 +4240,7 @@ $color-editor-palette-props: (
4204
4240
  'shadow-offset-x': unset,
4205
4241
  'shadow-offset-y': unset,
4206
4242
  'shadow-spread': unset,
4207
- 'transition-duration': var(--cosmopolitan-duration-short),
4243
+ 'transition-duration': var(--mosaik-duration-short),
4208
4244
  'transition-mode': ease,
4209
4245
  'transition-property': (transform, border-color),
4210
4246
  'translate': none,
@@ -4243,19 +4279,19 @@ $color-editor-shade-slider-props: (
4243
4279
  'padding-left': unset,
4244
4280
  'padding-right': unset,
4245
4281
  'padding-top': unset,
4246
- 'shadow': var(--cosmopolitan-elevation-light-offset-x-1) var(--cosmopolitan-elevation-light-offset-y-1) var(--cosmopolitan-elevation-light-blur-1) var(--cosmopolitan-elevation-light-spread-1) var(--cosmopolitan-elevation-light-color-1),
4247
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-1),
4248
- 'shadow-color': var(--cosmopolitan-elevation-light-color-1),
4249
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-1),
4250
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-1),
4251
- 'shadow-spread': var(--cosmopolitan-elevation-light-spread-1),
4282
+ 'shadow': var(--cosmopolitan-elevation-light-offset-x) var(--cosmopolitan-elevation-light-offset-y) var(--cosmopolitan-elevation-light-blur) var(--cosmopolitan-elevation-light-spread) var(--cosmopolitan-elevation-light-color),
4283
+ 'shadow-blur': var(--cosmopolitan-elevation-light-blur),
4284
+ 'shadow-color': var(--cosmopolitan-elevation-light-color),
4285
+ 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x),
4286
+ 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y),
4287
+ 'shadow-spread': var(--cosmopolitan-elevation-light-spread),
4252
4288
  'thumb-background-color': var(--cosmopolitan-scheme-background),
4253
4289
  'thumb-border-color': transparent,
4254
4290
  'thumb-border-radius': 50%,
4255
4291
  'thumb-border-width': 0,
4256
- 'thumb-shadow': var(--cosmopolitan-elevation-light-1),
4292
+ 'thumb-shadow': var(--cosmopolitan-elevation-light),
4257
4293
  'thumb-size': calc(var(--cosmopolitan-layout-space) * 1.75),
4258
- 'transition-duration': var(--cosmopolitan-duration-short),
4294
+ 'transition-duration': var(--mosaik-duration-short),
4259
4295
  'transition-mode': ease,
4260
4296
  'transition-property': (box-shadow, border-color),
4261
4297
  'translate': none,
@@ -4297,7 +4333,7 @@ $color-editor-swatch-props: (
4297
4333
  'shadow-offset-x': unset,
4298
4334
  'shadow-offset-y': unset,
4299
4335
  'shadow-spread': unset,
4300
- 'transition-duration': var(--cosmopolitan-duration-short),
4336
+ 'transition-duration': var(--mosaik-duration-short),
4301
4337
  'transition-mode': ease,
4302
4338
  'transition-property': (opacity, background-color),
4303
4339
  'translate': none,
@@ -4539,7 +4575,7 @@ $combo-props: (
4539
4575
  'shadow-offset-x': unset,
4540
4576
  'shadow-offset-y': unset,
4541
4577
  'shadow-spread': unset,
4542
- 'transition-duration': var(--cosmopolitan-duration-short),
4578
+ 'transition-duration': var(--mosaik-duration-short),
4543
4579
  'transition-mode': ease,
4544
4580
  'transition-property': (transform),
4545
4581
  'translate': none
@@ -4620,7 +4656,7 @@ $comment-props: (
4620
4656
  'shadow-offset-x': unset,
4621
4657
  'shadow-offset-y': unset,
4622
4658
  'shadow-spread': unset,
4623
- 'transition-duration': var(--cosmopolitan-duration-short),
4659
+ 'transition-duration': var(--mosaik-duration-short),
4624
4660
  'transition-mode': ease,
4625
4661
  'transition-property': (color, background-color, border-color, opacity, transform),
4626
4662
  'translate': none
@@ -4665,12 +4701,12 @@ $compound-button-props: (
4665
4701
  'progress-ring-width': var(--cosmopolitan-layout-thickness),
4666
4702
  'ripple-color': unset,
4667
4703
  'ripple-duration': 0.20s,
4668
- 'shadow': var(--cosmopolitan-elevation-semilight-offset-x-0) var(--cosmopolitan-elevation-semilight-offset-y-0) var(--cosmopolitan-elevation-semilight-blur-0) var(--cosmopolitan-elevation-semilight-spread-0) var(--cosmopolitan-elevation-semilight-color-0),
4669
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
4670
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
4671
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
4672
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
4673
- 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread-0),
4704
+ 'shadow': var(--cosmopolitan-elevation-semilight-offset-x) var(--cosmopolitan-elevation-semilight-offset-y) var(--cosmopolitan-elevation-semilight-blur) var(--cosmopolitan-elevation-semilight-spread) var(--cosmopolitan-elevation-semilight-color),
4705
+ 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur),
4706
+ 'shadow-color': var(--cosmopolitan-elevation-semilight-color),
4707
+ 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x),
4708
+ 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y),
4709
+ 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread),
4674
4710
  'transition-duration': .2s,
4675
4711
  'transition-mode': ease,
4676
4712
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
@@ -4844,13 +4880,13 @@ $date-box-props: (
4844
4880
  'padding-left': calc(var(--cosmopolitan-layout-space) * 1.5),
4845
4881
  'padding-right': calc(var(--cosmopolitan-layout-space) * 1.5),
4846
4882
  'padding-top': var(--cosmopolitan-layout-space),
4847
- 'shadow': var(--cosmopolitan-elevation-semilight-offset-x-0) var(--cosmopolitan-elevation-semilight-offset-y-0) var(--cosmopolitan-elevation-semilight-blur-0) var(--cosmopolitan-elevation-semilight-spread-0) var(--cosmopolitan-elevation-semilight-color-0),
4848
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
4849
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
4850
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
4851
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
4852
- 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread-0),
4853
- 'transition-duration': var(--cosmopolitan-duration-short),
4883
+ 'shadow': var(--cosmopolitan-elevation-semilight-offset-x) var(--cosmopolitan-elevation-semilight-offset-y) var(--cosmopolitan-elevation-semilight-blur) var(--cosmopolitan-elevation-semilight-spread) var(--cosmopolitan-elevation-semilight-color),
4884
+ 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur),
4885
+ 'shadow-color': var(--cosmopolitan-elevation-semilight-color),
4886
+ 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x),
4887
+ 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y),
4888
+ 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread),
4889
+ 'transition-duration': var(--mosaik-duration-short),
4854
4890
  'transition-mode': ease,
4855
4891
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
4856
4892
  'translate': none
@@ -4897,7 +4933,7 @@ $date-time-box-props: (
4897
4933
  'shadow-offset-x': unset,
4898
4934
  'shadow-offset-y': unset,
4899
4935
  'shadow-spread': unset,
4900
- 'transition-duration': var(--cosmopolitan-duration-short),
4936
+ 'transition-duration': var(--mosaik-duration-short),
4901
4937
  'transition-mode': ease,
4902
4938
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
4903
4939
  'translate': none
@@ -5933,7 +5969,7 @@ $duration-box-props: (
5933
5969
  'shadow-offset-x': unset,
5934
5970
  'shadow-offset-y': unset,
5935
5971
  'shadow-spread': unset,
5936
- 'transition-duration': var(--cosmopolitan-duration-short),
5972
+ 'transition-duration': var(--mosaik-duration-short),
5937
5973
  'transition-mode': ease,
5938
5974
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
5939
5975
  'translate': none
@@ -6422,12 +6458,12 @@ $expander-props: (
6422
6458
  'padding-top': unset,
6423
6459
  'ripple-color': unset,
6424
6460
  'ripple-duration': 0.20s,
6425
- 'shadow': var(--cosmopolitan-elevation-light-offset-x-1) var(--cosmopolitan-elevation-light-offset-y-1) var(--cosmopolitan-elevation-light-blur-1) var(--cosmopolitan-elevation-light-spread-1) var(--cosmopolitan-elevation-light-color-1),
6426
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-1),
6427
- 'shadow-color': var(--cosmopolitan-elevation-light-color-1),
6428
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-1),
6429
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-1),
6430
- 'shadow-spread': var(--cosmopolitan-elevation-light-spread-1),
6461
+ 'shadow': var(--cosmopolitan-elevation-light-offset-x) var(--cosmopolitan-elevation-light-offset-y) var(--cosmopolitan-elevation-light-blur) var(--cosmopolitan-elevation-light-spread) var(--cosmopolitan-elevation-light-color),
6462
+ 'shadow-blur': var(--cosmopolitan-elevation-light-blur),
6463
+ 'shadow-color': var(--cosmopolitan-elevation-light-color),
6464
+ 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x),
6465
+ 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y),
6466
+ 'shadow-spread': var(--cosmopolitan-elevation-light-spread),
6431
6467
  'transition-duration': unset,
6432
6468
  'transition-mode': unset,
6433
6469
  'transition-property': (unset),
@@ -6578,13 +6614,13 @@ $file-box-props: (
6578
6614
  'padding-left': calc(var(--cosmopolitan-layout-space) * 1.5),
6579
6615
  'padding-right': calc(var(--cosmopolitan-layout-space) * 1.5),
6580
6616
  'padding-top': var(--cosmopolitan-layout-space),
6581
- 'shadow': var(--cosmopolitan-elevation-semilight-offset-x-0) var(--cosmopolitan-elevation-semilight-offset-y-0) var(--cosmopolitan-elevation-semilight-blur-0) var(--cosmopolitan-elevation-semilight-spread-0) var(--cosmopolitan-elevation-semilight-color-0),
6582
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
6583
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
6584
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
6585
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
6586
- 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread-0),
6587
- 'transition-duration': var(--cosmopolitan-duration-short),
6617
+ 'shadow': var(--cosmopolitan-elevation-semilight-offset-x) var(--cosmopolitan-elevation-semilight-offset-y) var(--cosmopolitan-elevation-semilight-blur) var(--cosmopolitan-elevation-semilight-spread) var(--cosmopolitan-elevation-semilight-color),
6618
+ 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur),
6619
+ 'shadow-color': var(--cosmopolitan-elevation-semilight-color),
6620
+ 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x),
6621
+ 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y),
6622
+ 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread),
6623
+ 'transition-duration': var(--mosaik-duration-short),
6588
6624
  'transition-mode': ease,
6589
6625
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
6590
6626
  'translate': none
@@ -6820,13 +6856,13 @@ $floating-action-button-props: (
6820
6856
  'progress-ring-width': var(--cosmopolitan-layout-thickness),
6821
6857
  'ripple-color': unset,
6822
6858
  'ripple-duration': 0.20s,
6823
- 'shadow': var(--cosmopolitan-elevation-semilight-offset-x-0) var(--cosmopolitan-elevation-semilight-offset-y-0) var(--cosmopolitan-elevation-semilight-blur-0) var(--cosmopolitan-elevation-semilight-spread-0) var(--cosmopolitan-elevation-semilight-color-0),
6824
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
6825
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
6826
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
6827
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
6828
- 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread-0),
6829
- 'transition-duration': var(--cosmopolitan-duration-short),
6859
+ 'shadow': var(--cosmopolitan-elevation-semilight-offset-x) var(--cosmopolitan-elevation-semilight-offset-y) var(--cosmopolitan-elevation-semilight-blur) var(--cosmopolitan-elevation-semilight-spread) var(--cosmopolitan-elevation-semilight-color),
6860
+ 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur),
6861
+ 'shadow-color': var(--cosmopolitan-elevation-semilight-color),
6862
+ 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x),
6863
+ 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y),
6864
+ 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread),
6865
+ 'transition-duration': var(--mosaik-duration-short),
6830
6866
  'transition-mode': ease,
6831
6867
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
6832
6868
  'translate': none
@@ -7065,13 +7101,13 @@ $flow-board-column-item-props: (
7065
7101
  'padding-right': unset,
7066
7102
  'padding-top': unset,
7067
7103
  'pinned-background-color': var(--cosmopolitan-color-light-primary-50),
7068
- 'shadow': var(--cosmopolitan-elevation-light-offset-x-1) var(--cosmopolitan-elevation-light-offset-y-1) var(--cosmopolitan-elevation-light-blur-1) var(--cosmopolitan-elevation-light-spread-1) var(--cosmopolitan-elevation-light-color-1),
7069
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-1),
7070
- 'shadow-color': var(--cosmopolitan-elevation-light-color-1),
7071
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-1),
7072
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-1),
7073
- 'shadow-spread': var(--cosmopolitan-elevation-light-spread-1),
7074
- 'transition-duration': var(--cosmopolitan-duration-medium),
7104
+ 'shadow': var(--cosmopolitan-elevation-light-offset-x) var(--cosmopolitan-elevation-light-offset-y) var(--cosmopolitan-elevation-light-blur) var(--cosmopolitan-elevation-light-spread) var(--cosmopolitan-elevation-light-color),
7105
+ 'shadow-blur': var(--cosmopolitan-elevation-light-blur),
7106
+ 'shadow-color': var(--cosmopolitan-elevation-light-color),
7107
+ 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x),
7108
+ 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y),
7109
+ 'shadow-spread': var(--cosmopolitan-elevation-light-spread),
7110
+ 'transition-duration': var(--mosaik-duration-medium),
7075
7111
  'transition-mode': ease,
7076
7112
  'transition-property': (background-color, box-shadow, transform),
7077
7113
  'translate': none
@@ -7224,7 +7260,7 @@ $font-editor-props: (
7224
7260
  'shadow-offset-x': unset,
7225
7261
  'shadow-offset-y': unset,
7226
7262
  'shadow-spread': unset,
7227
- 'transition-duration': var(--cosmopolitan-duration-short),
7263
+ 'transition-duration': var(--mosaik-duration-short),
7228
7264
  'transition-mode': ease,
7229
7265
  'transition-property': unset,
7230
7266
  'translate': none,
@@ -7438,7 +7474,7 @@ $ghost-props: (
7438
7474
  'shadow-offset-x': unset,
7439
7475
  'shadow-offset-y': unset,
7440
7476
  'shadow-spread': unset,
7441
- 'transition-duration': var(--cosmopolitan-duration-short),
7477
+ 'transition-duration': var(--mosaik-duration-short),
7442
7478
  'transition-mode': ease,
7443
7479
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
7444
7480
  'translate': none
@@ -7885,12 +7921,12 @@ $kbd-props: (
7885
7921
  'padding-left': unset,
7886
7922
  'padding-right': unset,
7887
7923
  'padding-top': unset,
7888
- 'shadow': var(--cosmopolitan-elevation-light-offset-x-1) var(--cosmopolitan-elevation-light-offset-y-1) var(--cosmopolitan-elevation-light-blur-1) var(--cosmopolitan-elevation-light-spread-1) var(--cosmopolitan-elevation-light-color-1),
7889
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-1),
7890
- 'shadow-color': var(--cosmopolitan-elevation-light-color-1),
7891
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-1),
7892
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-1),
7893
- 'shadow-spread': var(--cosmopolitan-elevation-light-spread-1),
7924
+ 'shadow': var(--cosmopolitan-elevation-light-offset-x) var(--cosmopolitan-elevation-light-offset-y) var(--cosmopolitan-elevation-light-blur) var(--cosmopolitan-elevation-light-spread) var(--cosmopolitan-elevation-light-color),
7925
+ 'shadow-blur': var(--cosmopolitan-elevation-light-blur),
7926
+ 'shadow-color': var(--cosmopolitan-elevation-light-color),
7927
+ 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x),
7928
+ 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y),
7929
+ 'shadow-spread': var(--cosmopolitan-elevation-light-spread),
7894
7930
  'transition-duration': unset,
7895
7931
  'transition-mode': unset,
7896
7932
  'transition-property': unset,
@@ -8184,12 +8220,12 @@ $listing-item-marker-props: (
8184
8220
  'padding-left': unset,
8185
8221
  'padding-right': unset,
8186
8222
  'padding-top': unset,
8187
- 'shadow': var(--cosmopolitan-elevation-light-offset-x-0) var(--cosmopolitan-elevation-light-offset-y-0) var(--cosmopolitan-elevation-light-blur-0) var(--cosmopolitan-elevation-light-spread-0) var(--cosmopolitan-elevation-light-color-0),
8188
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-0),
8189
- 'shadow-color': var(--cosmopolitan-elevation-light-color-0),
8190
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-0),
8191
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-0),
8192
- 'shadow-spread': var(--cosmopolitan-elevation-light-spread-0),
8223
+ 'shadow': var(--cosmopolitan-elevation-light-offset-x) var(--cosmopolitan-elevation-light-offset-y) var(--cosmopolitan-elevation-light-blur) var(--cosmopolitan-elevation-light-spread) var(--cosmopolitan-elevation-light-color),
8224
+ 'shadow-blur': var(--cosmopolitan-elevation-light-blur),
8225
+ 'shadow-color': var(--cosmopolitan-elevation-light-color),
8226
+ 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x),
8227
+ 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y),
8228
+ 'shadow-spread': var(--cosmopolitan-elevation-light-spread),
8193
8229
  'transition-duration': unset,
8194
8230
  'transition-mode': unset,
8195
8231
  'transition-property': (unset),
@@ -8497,12 +8533,12 @@ $message-props: (
8497
8533
  'padding-left': unset,
8498
8534
  'padding-right': unset,
8499
8535
  'padding-top': unset,
8500
- 'shadow': var(--cosmopolitan-elevation-semilight-offset-x-0) var(--cosmopolitan-elevation-semilight-offset-y-0) var(--cosmopolitan-elevation-semilight-blur-0) var(--cosmopolitan-elevation-semilight-spread-0) var(--cosmopolitan-elevation-semilight-color-0),
8501
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
8502
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
8503
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
8504
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
8505
- 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread-0),
8536
+ 'shadow': var(--cosmopolitan-elevation-semilight-offset-x) var(--cosmopolitan-elevation-semilight-offset-y) var(--cosmopolitan-elevation-semilight-blur) var(--cosmopolitan-elevation-semilight-spread) var(--cosmopolitan-elevation-semilight-color),
8537
+ 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur),
8538
+ 'shadow-color': var(--cosmopolitan-elevation-semilight-color),
8539
+ 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x),
8540
+ 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y),
8541
+ 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread),
8506
8542
  'transition-duration': unset,
8507
8543
  'transition-mode': unset,
8508
8544
  'transition-property': (unset),
@@ -8721,7 +8757,7 @@ $number-box-props: (
8721
8757
  'shadow-offset-x': unset,
8722
8758
  'shadow-offset-y': unset,
8723
8759
  'shadow-spread': unset,
8724
- 'transition-duration': var(--cosmopolitan-duration-short),
8760
+ 'transition-duration': var(--mosaik-duration-short),
8725
8761
  'transition-mode': ease,
8726
8762
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
8727
8763
  'translate': none
@@ -9071,13 +9107,13 @@ $password-box-props: (
9071
9107
  'padding-left': calc(var(--cosmopolitan-layout-space) * 1.5),
9072
9108
  'padding-right': calc(var(--cosmopolitan-layout-space) * 1.5),
9073
9109
  'padding-top': var(--cosmopolitan-layout-space),
9074
- 'shadow': var(--cosmopolitan-elevation-semilight-offset-x-0) var(--cosmopolitan-elevation-semilight-offset-y-0) var(--cosmopolitan-elevation-semilight-blur-0) var(--cosmopolitan-elevation-semilight-spread-0) var(--cosmopolitan-elevation-semilight-color-0),
9075
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
9076
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
9077
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
9078
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
9079
- 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread-0),
9080
- 'transition-duration': var(--cosmopolitan-duration-short),
9110
+ 'shadow': var(--cosmopolitan-elevation-semilight-offset-x) var(--cosmopolitan-elevation-semilight-offset-y) var(--cosmopolitan-elevation-semilight-blur) var(--cosmopolitan-elevation-semilight-spread) var(--cosmopolitan-elevation-semilight-color),
9111
+ 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur),
9112
+ 'shadow-color': var(--cosmopolitan-elevation-semilight-color),
9113
+ 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x),
9114
+ 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y),
9115
+ 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread),
9116
+ 'transition-duration': var(--mosaik-duration-short),
9081
9117
  'transition-mode': ease,
9082
9118
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
9083
9119
  'translate': none
@@ -9222,13 +9258,13 @@ $pin-box-props: (
9222
9258
  'padding-left': calc(var(--cosmopolitan-layout-space) * 1.5),
9223
9259
  'padding-right': calc(var(--cosmopolitan-layout-space) * 1.5),
9224
9260
  'padding-top': var(--cosmopolitan-layout-space),
9225
- 'shadow': var(--cosmopolitan-elevation-semilight-offset-x-0) var(--cosmopolitan-elevation-semilight-offset-y-0) var(--cosmopolitan-elevation-semilight-blur-0) var(--cosmopolitan-elevation-semilight-spread-0) var(--cosmopolitan-elevation-semilight-color-0),
9226
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
9227
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
9228
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
9229
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
9230
- 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread-0),
9231
- 'transition-duration': var(--cosmopolitan-duration-short),
9261
+ 'shadow': var(--cosmopolitan-elevation-semilight-offset-x) var(--cosmopolitan-elevation-semilight-offset-y) var(--cosmopolitan-elevation-semilight-blur) var(--cosmopolitan-elevation-semilight-spread) var(--cosmopolitan-elevation-semilight-color),
9262
+ 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur),
9263
+ 'shadow-color': var(--cosmopolitan-elevation-semilight-color),
9264
+ 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x),
9265
+ 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y),
9266
+ 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread),
9267
+ 'transition-duration': var(--mosaik-duration-short),
9232
9268
  'transition-mode': ease,
9233
9269
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
9234
9270
  'translate': none
@@ -9262,12 +9298,12 @@ $pip-props: (
9262
9298
  'padding-left': unset,
9263
9299
  'padding-right': unset,
9264
9300
  'padding-top': unset,
9265
- 'shadow': var(--cosmopolitan-elevation-light-offset-x-0) var(--cosmopolitan-elevation-light-offset-y-0) var(--cosmopolitan-elevation-light-blur-0) var(--cosmopolitan-elevation-light-spread-0) var(--cosmopolitan-elevation-light-color-0),
9266
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-0),
9267
- 'shadow-color': var(--cosmopolitan-elevation-light-color-0),
9268
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-0),
9269
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-0),
9270
- 'shadow-spread': var(--cosmopolitan-elevation-light-spread-0),
9301
+ 'shadow': var(--cosmopolitan-elevation-light-offset-x) var(--cosmopolitan-elevation-light-offset-y) var(--cosmopolitan-elevation-light-blur) var(--cosmopolitan-elevation-light-spread) var(--cosmopolitan-elevation-light-color),
9302
+ 'shadow-blur': var(--cosmopolitan-elevation-light-blur),
9303
+ 'shadow-color': var(--cosmopolitan-elevation-light-color),
9304
+ 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x),
9305
+ 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y),
9306
+ 'shadow-spread': var(--cosmopolitan-elevation-light-spread),
9271
9307
  'transition-duration': unset,
9272
9308
  'transition-mode': unset,
9273
9309
  'transition-property': (unset),
@@ -9306,7 +9342,7 @@ $placeholder-props: (
9306
9342
  'shadow-offset-x': unset,
9307
9343
  'shadow-offset-y': unset,
9308
9344
  'shadow-spread': unset,
9309
- 'transition-duration': var(--cosmopolitan-duration-short),
9345
+ 'transition-duration': var(--mosaik-duration-short),
9310
9346
  'transition-mode': ease,
9311
9347
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
9312
9348
  'translate': unset
@@ -9339,13 +9375,13 @@ $popup-props: (
9339
9375
  'padding-left': calc(var(--cosmopolitan-layout-space) * 1.25),
9340
9376
  'padding-right': calc(var(--cosmopolitan-layout-space) * 1.25),
9341
9377
  'padding-top': calc(var(--cosmopolitan-layout-space) * 1),
9342
- 'shadow': var(--cosmopolitan-elevation-regular-offset-x-0) var(--cosmopolitan-elevation-regular-offset-y-0) var(--cosmopolitan-elevation-regular-blur-0) var(--cosmopolitan-elevation-regular-spread-0) var(--cosmopolitan-elevation-regular-color-0),
9343
- 'shadow-blur': var(--cosmopolitan-elevation-regular-blur-0),
9344
- 'shadow-color': var(--cosmopolitan-elevation-regular-color-0),
9345
- 'shadow-offset-x': var(--cosmopolitan-elevation-regular-offset-x-0),
9346
- 'shadow-offset-y': var(--cosmopolitan-elevation-regular-offset-y-0),
9347
- 'shadow-spread': var(--cosmopolitan-elevation-regular-spread-0),
9348
- 'transition-duration': var(--cosmopolitan-duration-short),
9378
+ 'shadow': var(--cosmopolitan-elevation-regular-offset-x) var(--cosmopolitan-elevation-regular-offset-y) var(--cosmopolitan-elevation-regular-blur) var(--cosmopolitan-elevation-regular-spread) var(--cosmopolitan-elevation-regular-color),
9379
+ 'shadow-blur': var(--cosmopolitan-elevation-regular-blur),
9380
+ 'shadow-color': var(--cosmopolitan-elevation-regular-color),
9381
+ 'shadow-offset-x': var(--cosmopolitan-elevation-regular-offset-x),
9382
+ 'shadow-offset-y': var(--cosmopolitan-elevation-regular-offset-y),
9383
+ 'shadow-spread': var(--cosmopolitan-elevation-regular-spread),
9384
+ 'transition-duration': var(--mosaik-duration-short),
9349
9385
  'transition-mode': ease,
9350
9386
  'transition-property': (background-color, border-color, box-shadow, color, transform, opacity),
9351
9387
  'translate': none
@@ -9693,7 +9729,7 @@ $radio-group-props: (
9693
9729
  'shadow-offset-x': unset,
9694
9730
  'shadow-offset-y': unset,
9695
9731
  'shadow-spread': unset,
9696
- 'transition-duration': var(--cosmopolitan-duration-short),
9732
+ 'transition-duration': var(--mosaik-duration-short),
9697
9733
  'transition-mode': ease,
9698
9734
  'transition-property': (background-color, color, border-color, box-shadow, transform),
9699
9735
  'translate': none
@@ -10048,7 +10084,7 @@ $rich-text-box-props: (
10048
10084
  'shadow-offset-y': unset,
10049
10085
  'shadow-spread': unset,
10050
10086
  'toolbox-border-color': unset,
10051
- 'transition-duration': var(--cosmopolitan-duration-short),
10087
+ 'transition-duration': var(--mosaik-duration-short),
10052
10088
  'transition-mode': ease,
10053
10089
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
10054
10090
  'translate': none
@@ -10191,7 +10227,7 @@ $router-anchor-props: (
10191
10227
  'shadow-offset-x': unset,
10192
10228
  'shadow-offset-y': unset,
10193
10229
  'shadow-spread': unset,
10194
- 'transition-duration': var(--cosmopolitan-duration-short),
10230
+ 'transition-duration': var(--mosaik-duration-short),
10195
10231
  'transition-mode': ease,
10196
10232
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
10197
10233
  'translate': none
@@ -10374,7 +10410,7 @@ $scheduler-props: (
10374
10410
  'shadow-spread': unset,
10375
10411
  'timescale-width': 80px,
10376
10412
  'today-background-color': var(--cosmopolitan-scheme-semi-transparent),
10377
- 'transition-duration': var(--cosmopolitan-duration-short),
10413
+ 'transition-duration': var(--mosaik-duration-short),
10378
10414
  'transition-mode': ease,
10379
10415
  'transition-property': (background-color, color, border-color),
10380
10416
  'translate': none
@@ -10530,12 +10566,12 @@ $scheduler-event-props: (
10530
10566
  'padding-top': unset,
10531
10567
  'ripple-color': unset,
10532
10568
  'ripple-duration': 0.20s,
10533
- 'shadow': var(--cosmopolitan-elevation-light-offset-x-1) var(--cosmopolitan-elevation-light-offset-y-1) var(--cosmopolitan-elevation-light-blur-1) var(--cosmopolitan-elevation-light-spread-1) var(--cosmopolitan-elevation-light-color-1),
10534
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-1),
10535
- 'shadow-color': var(--cosmopolitan-elevation-light-color-1),
10536
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-1),
10537
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-1),
10538
- 'shadow-spread': var(--cosmopolitan-elevation-light-spread-1),
10569
+ 'shadow': var(--cosmopolitan-elevation-light-offset-x) var(--cosmopolitan-elevation-light-offset-y) var(--cosmopolitan-elevation-light-blur) var(--cosmopolitan-elevation-light-spread) var(--cosmopolitan-elevation-light-color),
10570
+ 'shadow-blur': var(--cosmopolitan-elevation-light-blur),
10571
+ 'shadow-color': var(--cosmopolitan-elevation-light-color),
10572
+ 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x),
10573
+ 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y),
10574
+ 'shadow-spread': var(--cosmopolitan-elevation-light-spread),
10539
10575
  'transition-duration': var(--cosmopolitan-motion-duration),
10540
10576
  'transition-mode': var(--cosmopolitan-motion-mode),
10541
10577
  'transition-property': (background-color, box-shadow, transform),
@@ -10641,7 +10677,7 @@ $scheduler-now-indicator-props: (
10641
10677
  'shadow-offset-x': unset,
10642
10678
  'shadow-offset-y': unset,
10643
10679
  'shadow-spread': unset,
10644
- 'transition-duration': var(--cosmopolitan-duration-short),
10680
+ 'transition-duration': var(--mosaik-duration-short),
10645
10681
  'transition-mode': ease,
10646
10682
  'transition-property': (top),
10647
10683
  'translate': none
@@ -10797,7 +10833,7 @@ $scroll-props: (
10797
10833
  'shadow-offset-x': unset,
10798
10834
  'shadow-offset-y': unset,
10799
10835
  'shadow-spread': unset,
10800
- 'transition-duration': var(--cosmopolitan-duration-medium),
10836
+ 'transition-duration': var(--mosaik-duration-medium),
10801
10837
  'transition-mode': ease,
10802
10838
  'transition-property': (background-color, box-shadow, transform),
10803
10839
  'translate': none
@@ -10911,13 +10947,13 @@ $search-box-props: (
10911
10947
  'padding-left': calc(var(--cosmopolitan-layout-space) * 1.5),
10912
10948
  'padding-right': calc(var(--cosmopolitan-layout-space) * 1.5),
10913
10949
  'padding-top': var(--cosmopolitan-layout-space),
10914
- 'shadow': var(--cosmopolitan-elevation-semilight-offset-x-0) var(--cosmopolitan-elevation-semilight-offset-y-0) var(--cosmopolitan-elevation-semilight-blur-0) var(--cosmopolitan-elevation-semilight-spread-0) var(--cosmopolitan-elevation-semilight-color-0),
10915
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
10916
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
10917
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
10918
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
10919
- 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread-0),
10920
- 'transition-duration': var(--cosmopolitan-duration-short),
10950
+ 'shadow': var(--cosmopolitan-elevation-semilight-offset-x) var(--cosmopolitan-elevation-semilight-offset-y) var(--cosmopolitan-elevation-semilight-blur) var(--cosmopolitan-elevation-semilight-spread) var(--cosmopolitan-elevation-semilight-color),
10951
+ 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur),
10952
+ 'shadow-color': var(--cosmopolitan-elevation-semilight-color),
10953
+ 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x),
10954
+ 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y),
10955
+ 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread),
10956
+ 'transition-duration': var(--mosaik-duration-short),
10921
10957
  'transition-mode': ease,
10922
10958
  'transition-property': (all),
10923
10959
  'translate': none
@@ -10951,12 +10987,12 @@ $segment-props: (
10951
10987
  'padding-left': unset,
10952
10988
  'padding-right': unset,
10953
10989
  'padding-top': unset,
10954
- 'shadow': var(--cosmopolitan-elevation-semilight-offset-x-0) var(--cosmopolitan-elevation-semilight-offset-y-0) var(--cosmopolitan-elevation-semilight-blur-0) var(--cosmopolitan-elevation-semilight-spread-0) var(--cosmopolitan-elevation-semilight-color-0),
10955
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
10956
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
10957
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
10958
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
10959
- 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread-0),
10990
+ 'shadow': var(--cosmopolitan-elevation-semilight-offset-x) var(--cosmopolitan-elevation-semilight-offset-y) var(--cosmopolitan-elevation-semilight-blur) var(--cosmopolitan-elevation-semilight-spread) var(--cosmopolitan-elevation-semilight-color),
10991
+ 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur),
10992
+ 'shadow-color': var(--cosmopolitan-elevation-semilight-color),
10993
+ 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x),
10994
+ 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y),
10995
+ 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread),
10960
10996
  'transition-duration': var(--cosmopolitan-layout-transition),
10961
10997
  'transition-mode': ease,
10962
10998
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
@@ -11050,7 +11086,7 @@ $select-props: (
11050
11086
  'shadow-offset-x': unset,
11051
11087
  'shadow-offset-y': unset,
11052
11088
  'shadow-spread': unset,
11053
- 'transition-duration': var(--cosmopolitan-duration-short),
11089
+ 'transition-duration': var(--mosaik-duration-short),
11054
11090
  'transition-mode': ease,
11055
11091
  'transition-property': (all),
11056
11092
  'translate': none
@@ -11095,7 +11131,7 @@ $select-item-props: (
11095
11131
  'shadow-offset-x': unset,
11096
11132
  'shadow-offset-y': unset,
11097
11133
  'shadow-spread': unset,
11098
- 'transition-duration': var(--cosmopolitan-duration-short),
11134
+ 'transition-duration': var(--mosaik-duration-short),
11099
11135
  'transition-mode': ease,
11100
11136
  'transition-property': (all),
11101
11137
  'translate': none
@@ -11182,7 +11218,7 @@ $sheet-props: (
11182
11218
  'shadow-offset-x': unset,
11183
11219
  'shadow-offset-y': unset,
11184
11220
  'shadow-spread': unset,
11185
- 'transition-duration': var(--cosmopolitan-duration-short),
11221
+ 'transition-duration': var(--mosaik-duration-short),
11186
11222
  'transition-mode': ease,
11187
11223
  'transition-property': (transform, opacity, visibility),
11188
11224
  'translate': none,
@@ -11397,7 +11433,7 @@ $signature-pad-props: (
11397
11433
  'shadow-offset-x': unset,
11398
11434
  'shadow-offset-y': unset,
11399
11435
  'shadow-spread': unset,
11400
- 'transition-duration': var(--cosmopolitan-duration-short),
11436
+ 'transition-duration': var(--mosaik-duration-short),
11401
11437
  'transition-mode': ease,
11402
11438
  'transition-property': (all),
11403
11439
  'translate': none
@@ -11544,7 +11580,7 @@ $slider2-props: (
11544
11580
  'shadow-offset-x': unset,
11545
11581
  'shadow-offset-y': unset,
11546
11582
  'shadow-spread': unset,
11547
- 'transition-duration': var(--cosmopolitan-duration-short),
11583
+ 'transition-duration': var(--mosaik-duration-short),
11548
11584
  'transition-mode': ease,
11549
11585
  'transition-property': (background-color, color, border-color, box-shadow, transform),
11550
11586
  'translate': none
@@ -11578,7 +11614,7 @@ $slider2thumb-props: (
11578
11614
  'shadow-offset-y': unset,
11579
11615
  'shadow-spread': unset,
11580
11616
  'size': unset,
11581
- 'transition-duration': var(--cosmopolitan-duration-short),
11617
+ 'transition-duration': var(--mosaik-duration-short),
11582
11618
  'transition-mode': ease,
11583
11619
  'transition-property': (background-color, color, border-color, box-shadow, transform),
11584
11620
  'translate': none
@@ -11652,7 +11688,7 @@ $split-props: (
11652
11688
  'thumb-border-color': var(--cosmopolitan-scheme-highlight),
11653
11689
  'thumb-border-radius': var(--cosmopolitan-layout-radius),
11654
11690
  'thumb-foreground-color': var(--cosmopolitan-scheme-foreground),
11655
- 'transition-duration': var(--cosmopolitan-duration-short),
11691
+ 'transition-duration': var(--mosaik-duration-short),
11656
11692
  'transition-mode': ease,
11657
11693
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
11658
11694
  'translate': none
@@ -12004,12 +12040,12 @@ $tab-props: (
12004
12040
  'padding-right': 16px,
12005
12041
  'padding-top': 8px,
12006
12042
  'panel-background-color': var(--tab-background-color),
12007
- 'shadow': var(--cosmopolitan-elevation-bold-offset-x-0) var(--cosmopolitan-elevation-bold-offset-y-0) var(--cosmopolitan-elevation-bold-blur-0) var(--cosmopolitan-elevation-bold-spread-0) var(--cosmopolitan-elevation-bold-color-0),
12008
- 'shadow-blur': var(--cosmopolitan-elevation-bold-blur-0),
12009
- 'shadow-color': var(--cosmopolitan-elevation-bold-color-0),
12010
- 'shadow-offset-x': var(--cosmopolitan-elevation-bold-offset-x-0),
12011
- 'shadow-offset-y': var(--cosmopolitan-elevation-bold-offset-y-0),
12012
- 'shadow-spread': var(--cosmopolitan-elevation-bold-spread-0),
12043
+ 'shadow': var(--cosmopolitan-elevation-bold-offset-x) var(--cosmopolitan-elevation-bold-offset-y) var(--cosmopolitan-elevation-bold-blur) var(--cosmopolitan-elevation-bold-spread) var(--cosmopolitan-elevation-bold-color),
12044
+ 'shadow-blur': var(--cosmopolitan-elevation-bold-blur),
12045
+ 'shadow-color': var(--cosmopolitan-elevation-bold-color),
12046
+ 'shadow-offset-x': var(--cosmopolitan-elevation-bold-offset-x),
12047
+ 'shadow-offset-y': var(--cosmopolitan-elevation-bold-offset-y),
12048
+ 'shadow-spread': var(--cosmopolitan-elevation-bold-spread),
12013
12049
  'strip-background-color': var(--cosmopolitan-scheme-transparent),
12014
12050
  'strip-padding-bottom': 0,
12015
12051
  'strip-padding-left': 0,
@@ -12373,7 +12409,7 @@ $table-column-editor-props: (
12373
12409
  'padding-left': var(--cosmopolitan-layout-space),
12374
12410
  'padding-right': var(--cosmopolitan-layout-space),
12375
12411
  'padding-top': var(--cosmopolitan-layout-space),
12376
- 'transition-duration': var(--cosmopolitan-duration-short),
12412
+ 'transition-duration': var(--mosaik-duration-short),
12377
12413
  'transition-mode': ease,
12378
12414
  'transition-property': (background-color, color),
12379
12415
  'translate': unset
@@ -12692,14 +12728,14 @@ $text-box-props: (
12692
12728
  'padding-right': calc(var(--cosmopolitan-layout-space) * 1.5),
12693
12729
  'padding-top': var(--cosmopolitan-layout-space),
12694
12730
  'prefix-icon-size': 20px,
12695
- 'shadow': var(--cosmopolitan-elevation-semilight-offset-x-0) var(--cosmopolitan-elevation-semilight-offset-y-0) var(--cosmopolitan-elevation-semilight-blur-0) var(--cosmopolitan-elevation-semilight-spread-0) var(--cosmopolitan-elevation-semilight-color-0),
12696
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
12697
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
12698
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
12699
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
12700
- 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread-0),
12731
+ 'shadow': var(--cosmopolitan-elevation-semilight-offset-x) var(--cosmopolitan-elevation-semilight-offset-y) var(--cosmopolitan-elevation-semilight-blur) var(--cosmopolitan-elevation-semilight-spread) var(--cosmopolitan-elevation-semilight-color),
12732
+ 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur),
12733
+ 'shadow-color': var(--cosmopolitan-elevation-semilight-color),
12734
+ 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x),
12735
+ 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y),
12736
+ 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread),
12701
12737
  'suffix-icon-size': 20px,
12702
- 'transition-duration': var(--cosmopolitan-duration-short),
12738
+ 'transition-duration': var(--mosaik-duration-short),
12703
12739
  'transition-mode': ease,
12704
12740
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
12705
12741
  'translate': none
@@ -12764,13 +12800,13 @@ $thumb-props: (
12764
12800
  'padding-left': unset,
12765
12801
  'padding-right': unset,
12766
12802
  'padding-top': unset,
12767
- 'shadow': var(--cosmopolitan-elevation-light-offset-x-1) var(--cosmopolitan-elevation-light-offset-y-1) var(--cosmopolitan-elevation-light-blur-1) var(--cosmopolitan-elevation-light-spread-1) var(--cosmopolitan-elevation-light-color-1),
12768
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-1),
12769
- 'shadow-color': var(--cosmopolitan-elevation-light-color-1),
12770
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-1),
12771
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-1),
12772
- 'shadow-spread': var(--cosmopolitan-elevation-light-spread-1),
12773
- 'transition-duration': var(--cosmopolitan-duration-short),
12803
+ 'shadow': var(--cosmopolitan-elevation-light-offset-x) var(--cosmopolitan-elevation-light-offset-y) var(--cosmopolitan-elevation-light-blur) var(--cosmopolitan-elevation-light-spread) var(--cosmopolitan-elevation-light-color),
12804
+ 'shadow-blur': var(--cosmopolitan-elevation-light-blur),
12805
+ 'shadow-color': var(--cosmopolitan-elevation-light-color),
12806
+ 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x),
12807
+ 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y),
12808
+ 'shadow-spread': var(--cosmopolitan-elevation-light-spread),
12809
+ 'transition-duration': var(--mosaik-duration-short),
12774
12810
  'transition-mode': ease,
12775
12811
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
12776
12812
  'translate': none
@@ -13108,7 +13144,7 @@ $time-box-props: (
13108
13144
  'shadow-offset-x': unset,
13109
13145
  'shadow-offset-y': unset,
13110
13146
  'shadow-spread': unset,
13111
- 'transition-duration': var(--cosmopolitan-duration-short),
13147
+ 'transition-duration': var(--mosaik-duration-short),
13112
13148
  'transition-mode': ease,
13113
13149
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
13114
13150
  'translate': none
@@ -13150,7 +13186,7 @@ $timeline-props: (
13150
13186
  'shadow-offset-x': unset,
13151
13187
  'shadow-offset-y': unset,
13152
13188
  'shadow-spread': unset,
13153
- 'transition-duration': var(--cosmopolitan-duration-short),
13189
+ 'transition-duration': var(--mosaik-duration-short),
13154
13190
  'transition-mode': ease,
13155
13191
  'transition-property': (color, background-color, transform),
13156
13192
  'translate': unset
@@ -13992,7 +14028,7 @@ $wheel-picker-props: (
13992
14028
  'shadow-offset-x': unset,
13993
14029
  'shadow-offset-y': unset,
13994
14030
  'shadow-spread': unset,
13995
- 'transition-duration': var(--cosmopolitan-duration-short),
14031
+ 'transition-duration': var(--mosaik-duration-short),
13996
14032
  'transition-mode': ease,
13997
14033
  'transition-property': (background-color, color),
13998
14034
  'translate': none