@breadstone/mosaik-themes 0.1.21 → 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 (10) hide show
  1. package/index.cjs +12 -12
  2. package/index.cjs.map +1 -1
  3. package/index.js +12 -12
  4. package/index.js.map +1 -1
  5. package/package.json +2 -2
  6. package/themes/___joy-tokens.css +52 -112
  7. package/themes/cosmopolitan.scss +367 -279
  8. package/themes/joy-tokens.scss +52 -112
  9. package/themes/joy.scss +559 -620
  10. package/themes/memphis.scss +394 -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),
@@ -3575,6 +3611,9 @@ $chip-box-props: (
3575
3611
  'border-radius': unset,
3576
3612
  'border-style': unset,
3577
3613
  'border-width': unset,
3614
+ 'focus-ring-active-width': 8px,
3615
+ 'focus-ring-color': unset,
3616
+ 'focus-ring-inward-offset': 2px,
3578
3617
  'focus-ring-outward-offset': 0px,
3579
3618
  'focus-ring-width': 0px,
3580
3619
  'font-family': var(--cosmopolitan-font-family),
@@ -3592,14 +3631,14 @@ $chip-box-props: (
3592
3631
  'padding-right': calc(var(--cosmopolitan-layout-space) * 1.5),
3593
3632
  'padding-top': var(--cosmopolitan-layout-space),
3594
3633
  'prefix-icon-size': 20px,
3595
- '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),
3596
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
3597
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
3598
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
3599
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
3600
- '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),
3601
3640
  'suffix-icon-size': 20px,
3602
- 'transition-duration': var(--cosmopolitan-duration-short),
3641
+ 'transition-duration': var(--mosaik-duration-short),
3603
3642
  'transition-mode': ease,
3604
3643
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
3605
3644
  'translate': none
@@ -3720,7 +3759,7 @@ $choice-group-props: (
3720
3759
  'shadow-offset-x': unset,
3721
3760
  'shadow-offset-y': unset,
3722
3761
  'shadow-spread': unset,
3723
- 'transition-duration': var(--cosmopolitan-duration-short),
3762
+ 'transition-duration': var(--mosaik-duration-short),
3724
3763
  'transition-mode': ease,
3725
3764
  'transition-property': (background-color, color, border-color, box-shadow, transform),
3726
3765
  'translate': none
@@ -3759,7 +3798,7 @@ $choice-group-header-props: (
3759
3798
  'shadow-offset-x': unset,
3760
3799
  'shadow-offset-y': unset,
3761
3800
  'shadow-spread': unset,
3762
- 'transition-duration': var(--cosmopolitan-duration-short),
3801
+ 'transition-duration': var(--mosaik-duration-short),
3763
3802
  'transition-mode': ease,
3764
3803
  'transition-property': (color, transform),
3765
3804
  'translate': none
@@ -3797,7 +3836,7 @@ $clickable-props: (
3797
3836
  'padding-top': 0,
3798
3837
  'ripple-color': unset,
3799
3838
  'ripple-duration': 0.20s,
3800
- 'transition-duration': var(--cosmopolitan-duration-short),
3839
+ 'transition-duration': var(--mosaik-duration-short),
3801
3840
  'transition-mode': ease,
3802
3841
  'transition-property': (background-color),
3803
3842
  'translate': unset
@@ -3884,6 +3923,9 @@ $color-box-props: (
3884
3923
  'border-radius': unset,
3885
3924
  'border-style': unset,
3886
3925
  'border-width': unset,
3926
+ 'focus-ring-active-width': 8px,
3927
+ 'focus-ring-color': unset,
3928
+ 'focus-ring-inward-offset': 2px,
3887
3929
  'focus-ring-outward-offset': 0px,
3888
3930
  'focus-ring-width': 0px,
3889
3931
  'font-family': var(--cosmopolitan-font-family),
@@ -3900,13 +3942,13 @@ $color-box-props: (
3900
3942
  'padding-left': calc(var(--cosmopolitan-layout-space) * 1.5),
3901
3943
  'padding-right': calc(var(--cosmopolitan-layout-space) * 1.5),
3902
3944
  'padding-top': var(--cosmopolitan-layout-space),
3903
- '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),
3904
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
3905
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
3906
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
3907
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
3908
- 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread-0),
3909
- '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),
3910
3952
  'transition-mode': ease,
3911
3953
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
3912
3954
  'translate': none
@@ -3950,7 +3992,7 @@ $color-editor-props: (
3950
3992
  'shadow-offset-x': unset,
3951
3993
  'shadow-offset-y': unset,
3952
3994
  'shadow-spread': unset,
3953
- 'transition-duration': var(--cosmopolitan-duration-short),
3995
+ 'transition-duration': var(--mosaik-duration-short),
3954
3996
  'transition-mode': ease,
3955
3997
  'transition-property': (background-color, border-color, box-shadow),
3956
3998
  'translate': none,
@@ -3990,19 +4032,19 @@ $color-editor-alpha-slider-props: (
3990
4032
  'padding-left': unset,
3991
4033
  'padding-right': unset,
3992
4034
  'padding-top': unset,
3993
- '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),
3994
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-1),
3995
- 'shadow-color': var(--cosmopolitan-elevation-light-color-1),
3996
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-1),
3997
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-1),
3998
- '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),
3999
4041
  'thumb-background-color': var(--cosmopolitan-scheme-neutral-container),
4000
4042
  'thumb-border-color': transparent,
4001
4043
  'thumb-border-radius': 50%,
4002
4044
  'thumb-border-width': 0,
4003
- 'thumb-shadow': var(--cosmopolitan-elevation-light-1),
4045
+ 'thumb-shadow': var(--cosmopolitan-elevation-light),
4004
4046
  'thumb-size': calc(var(--cosmopolitan-layout-space) * 1.75),
4005
- 'transition-duration': var(--cosmopolitan-duration-short),
4047
+ 'transition-duration': var(--mosaik-duration-short),
4006
4048
  'transition-mode': ease,
4007
4049
  'transition-property': (box-shadow, border-color),
4008
4050
  'translate': none,
@@ -4041,18 +4083,18 @@ $color-editor-area-props: (
4041
4083
  'padding-left': unset,
4042
4084
  'padding-right': unset,
4043
4085
  'padding-top': unset,
4044
- '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),
4045
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-1),
4046
- 'shadow-color': var(--cosmopolitan-elevation-light-color-1),
4047
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-1),
4048
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-1),
4049
- '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),
4050
4092
  'thumb-border-color': var(--cosmopolitan-scheme-surface),
4051
4093
  'thumb-border-radius': 50%,
4052
4094
  'thumb-border-width': calc(var(--cosmopolitan-layout-thickness) * 2),
4053
- 'thumb-shadow': var(--cosmopolitan-elevation-light-1),
4095
+ 'thumb-shadow': var(--cosmopolitan-elevation-light),
4054
4096
  'thumb-size': calc(var(--cosmopolitan-layout-space) * 1.75),
4055
- 'transition-duration': var(--cosmopolitan-duration-short),
4097
+ 'transition-duration': var(--mosaik-duration-short),
4056
4098
  'transition-mode': ease,
4057
4099
  'transition-property': (box-shadow, border-color),
4058
4100
  'translate': none,
@@ -4091,19 +4133,19 @@ $color-editor-hue-slider-props: (
4091
4133
  'padding-left': unset,
4092
4134
  'padding-right': unset,
4093
4135
  'padding-top': unset,
4094
- '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),
4095
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-1),
4096
- 'shadow-color': var(--cosmopolitan-elevation-light-color-1),
4097
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-1),
4098
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-1),
4099
- '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),
4100
4142
  'thumb-background-color': var(--cosmopolitan-scheme-neutral-container),
4101
4143
  'thumb-border-color': transparent,
4102
4144
  'thumb-border-radius': 50%,
4103
4145
  'thumb-border-width': 0,
4104
- 'thumb-shadow': var(--cosmopolitan-elevation-light-1),
4146
+ 'thumb-shadow': var(--cosmopolitan-elevation-light),
4105
4147
  'thumb-size': calc(var(--cosmopolitan-layout-space) * 1.75),
4106
- 'transition-duration': var(--cosmopolitan-duration-short),
4148
+ 'transition-duration': var(--mosaik-duration-short),
4107
4149
  'transition-mode': ease,
4108
4150
  'transition-property': (box-shadow, border-color),
4109
4151
  'translate': none,
@@ -4151,7 +4193,7 @@ $color-editor-inputs-props: (
4151
4193
  'shadow-offset-x': unset,
4152
4194
  'shadow-offset-y': unset,
4153
4195
  'shadow-spread': unset,
4154
- 'transition-duration': var(--cosmopolitan-duration-short),
4196
+ 'transition-duration': var(--mosaik-duration-short),
4155
4197
  'transition-mode': ease,
4156
4198
  'transition-property': (border-color, background-color),
4157
4199
  'translate': none,
@@ -4198,7 +4240,7 @@ $color-editor-palette-props: (
4198
4240
  'shadow-offset-x': unset,
4199
4241
  'shadow-offset-y': unset,
4200
4242
  'shadow-spread': unset,
4201
- 'transition-duration': var(--cosmopolitan-duration-short),
4243
+ 'transition-duration': var(--mosaik-duration-short),
4202
4244
  'transition-mode': ease,
4203
4245
  'transition-property': (transform, border-color),
4204
4246
  'translate': none,
@@ -4237,19 +4279,19 @@ $color-editor-shade-slider-props: (
4237
4279
  'padding-left': unset,
4238
4280
  'padding-right': unset,
4239
4281
  'padding-top': unset,
4240
- '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),
4241
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-1),
4242
- 'shadow-color': var(--cosmopolitan-elevation-light-color-1),
4243
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-1),
4244
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-1),
4245
- '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),
4246
4288
  'thumb-background-color': var(--cosmopolitan-scheme-background),
4247
4289
  'thumb-border-color': transparent,
4248
4290
  'thumb-border-radius': 50%,
4249
4291
  'thumb-border-width': 0,
4250
- 'thumb-shadow': var(--cosmopolitan-elevation-light-1),
4292
+ 'thumb-shadow': var(--cosmopolitan-elevation-light),
4251
4293
  'thumb-size': calc(var(--cosmopolitan-layout-space) * 1.75),
4252
- 'transition-duration': var(--cosmopolitan-duration-short),
4294
+ 'transition-duration': var(--mosaik-duration-short),
4253
4295
  'transition-mode': ease,
4254
4296
  'transition-property': (box-shadow, border-color),
4255
4297
  'translate': none,
@@ -4291,7 +4333,7 @@ $color-editor-swatch-props: (
4291
4333
  'shadow-offset-x': unset,
4292
4334
  'shadow-offset-y': unset,
4293
4335
  'shadow-spread': unset,
4294
- 'transition-duration': var(--cosmopolitan-duration-short),
4336
+ 'transition-duration': var(--mosaik-duration-short),
4295
4337
  'transition-mode': ease,
4296
4338
  'transition-property': (opacity, background-color),
4297
4339
  'translate': none,
@@ -4505,6 +4547,11 @@ $color-thumb-props: (
4505
4547
  * ------------------------------------------------------------------------------
4506
4548
  */
4507
4549
  $combo-props: (
4550
+ 'background-color': unset,
4551
+ 'border-color': unset,
4552
+ 'border-radius': unset,
4553
+ 'border-style': solid,
4554
+ 'border-width': unset,
4508
4555
  'focus-ring-active-width': 8px,
4509
4556
  'focus-ring-color': var(--cosmopolitan-color-light-secondary-400),
4510
4557
  'focus-ring-inward-offset': 2px,
@@ -4528,7 +4575,7 @@ $combo-props: (
4528
4575
  'shadow-offset-x': unset,
4529
4576
  'shadow-offset-y': unset,
4530
4577
  'shadow-spread': unset,
4531
- 'transition-duration': var(--cosmopolitan-duration-short),
4578
+ 'transition-duration': var(--mosaik-duration-short),
4532
4579
  'transition-mode': ease,
4533
4580
  'transition-property': (transform),
4534
4581
  'translate': none
@@ -4609,7 +4656,7 @@ $comment-props: (
4609
4656
  'shadow-offset-x': unset,
4610
4657
  'shadow-offset-y': unset,
4611
4658
  'shadow-spread': unset,
4612
- 'transition-duration': var(--cosmopolitan-duration-short),
4659
+ 'transition-duration': var(--mosaik-duration-short),
4613
4660
  'transition-mode': ease,
4614
4661
  'transition-property': (color, background-color, border-color, opacity, transform),
4615
4662
  'translate': none
@@ -4654,12 +4701,12 @@ $compound-button-props: (
4654
4701
  'progress-ring-width': var(--cosmopolitan-layout-thickness),
4655
4702
  'ripple-color': unset,
4656
4703
  'ripple-duration': 0.20s,
4657
- '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),
4658
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
4659
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
4660
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
4661
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
4662
- '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),
4663
4710
  'transition-duration': .2s,
4664
4711
  'transition-mode': ease,
4665
4712
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
@@ -4814,6 +4861,10 @@ $date-box-props: (
4814
4861
  'border-radius': unset,
4815
4862
  'border-style': unset,
4816
4863
  'border-width': unset,
4864
+ 'focus-ring-active-width': 8px,
4865
+ 'focus-ring-color': unset,
4866
+ 'focus-ring-inward-offset': 2px,
4867
+ 'focus-ring-outward-offset': 2px,
4817
4868
  'focus-ring-width': 0px,
4818
4869
  'font-family': var(--cosmopolitan-font-family),
4819
4870
  'font-letter-spacing': unset,
@@ -4829,13 +4880,13 @@ $date-box-props: (
4829
4880
  'padding-left': calc(var(--cosmopolitan-layout-space) * 1.5),
4830
4881
  'padding-right': calc(var(--cosmopolitan-layout-space) * 1.5),
4831
4882
  'padding-top': var(--cosmopolitan-layout-space),
4832
- '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),
4833
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
4834
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
4835
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
4836
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
4837
- 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread-0),
4838
- '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),
4839
4890
  'transition-mode': ease,
4840
4891
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
4841
4892
  'translate': none
@@ -4858,6 +4909,10 @@ $date-time-box-props: (
4858
4909
  'calendar-border-radius': unset,
4859
4910
  'calendar-border-style': unset,
4860
4911
  'calendar-border-width': unset,
4912
+ 'focus-ring-active-width': 8px,
4913
+ 'focus-ring-color': unset,
4914
+ 'focus-ring-inward-offset': 2px,
4915
+ 'focus-ring-outward-offset': 2px,
4861
4916
  'font-family': var(--cosmopolitan-font-family),
4862
4917
  'font-letter-spacing': unset,
4863
4918
  'font-line-height': unset,
@@ -4878,7 +4933,7 @@ $date-time-box-props: (
4878
4933
  'shadow-offset-x': unset,
4879
4934
  'shadow-offset-y': unset,
4880
4935
  'shadow-spread': unset,
4881
- 'transition-duration': var(--cosmopolitan-duration-short),
4936
+ 'transition-duration': var(--mosaik-duration-short),
4882
4937
  'transition-mode': ease,
4883
4938
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
4884
4939
  'translate': none
@@ -5890,6 +5945,10 @@ $duration-box-props: (
5890
5945
  'border-radius': unset,
5891
5946
  'border-style': unset,
5892
5947
  'border-width': unset,
5948
+ 'focus-ring-active-width': 8px,
5949
+ 'focus-ring-color': unset,
5950
+ 'focus-ring-inward-offset': 2px,
5951
+ 'focus-ring-outward-offset': 2px,
5893
5952
  'font-family': var(--cosmopolitan-font-family),
5894
5953
  'font-letter-spacing': unset,
5895
5954
  'font-line-height': unset,
@@ -5910,7 +5969,7 @@ $duration-box-props: (
5910
5969
  'shadow-offset-x': unset,
5911
5970
  'shadow-offset-y': unset,
5912
5971
  'shadow-spread': unset,
5913
- 'transition-duration': var(--cosmopolitan-duration-short),
5972
+ 'transition-duration': var(--mosaik-duration-short),
5914
5973
  'transition-mode': ease,
5915
5974
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
5916
5975
  'translate': none
@@ -6399,12 +6458,12 @@ $expander-props: (
6399
6458
  'padding-top': unset,
6400
6459
  'ripple-color': unset,
6401
6460
  'ripple-duration': 0.20s,
6402
- '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),
6403
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-1),
6404
- 'shadow-color': var(--cosmopolitan-elevation-light-color-1),
6405
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-1),
6406
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-1),
6407
- '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),
6408
6467
  'transition-duration': unset,
6409
6468
  'transition-mode': unset,
6410
6469
  'transition-property': (unset),
@@ -6536,6 +6595,10 @@ $file-box-props: (
6536
6595
  'border-radius': unset,
6537
6596
  'border-style': unset,
6538
6597
  'border-width': unset,
6598
+ 'focus-ring-active-width': 8px,
6599
+ 'focus-ring-color': unset,
6600
+ 'focus-ring-inward-offset': 2px,
6601
+ 'focus-ring-outward-offset': 2px,
6539
6602
  'focus-ring-width': 0px,
6540
6603
  'font-family': var(--cosmopolitan-font-family),
6541
6604
  'font-letter-spacing': unset,
@@ -6551,13 +6614,13 @@ $file-box-props: (
6551
6614
  'padding-left': calc(var(--cosmopolitan-layout-space) * 1.5),
6552
6615
  'padding-right': calc(var(--cosmopolitan-layout-space) * 1.5),
6553
6616
  'padding-top': var(--cosmopolitan-layout-space),
6554
- '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),
6555
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
6556
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
6557
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
6558
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
6559
- 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread-0),
6560
- '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),
6561
6624
  'transition-mode': ease,
6562
6625
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
6563
6626
  'translate': none
@@ -6793,13 +6856,13 @@ $floating-action-button-props: (
6793
6856
  'progress-ring-width': var(--cosmopolitan-layout-thickness),
6794
6857
  'ripple-color': unset,
6795
6858
  'ripple-duration': 0.20s,
6796
- '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),
6797
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
6798
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
6799
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
6800
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
6801
- 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread-0),
6802
- '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),
6803
6866
  'transition-mode': ease,
6804
6867
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
6805
6868
  'translate': none
@@ -7038,13 +7101,13 @@ $flow-board-column-item-props: (
7038
7101
  'padding-right': unset,
7039
7102
  'padding-top': unset,
7040
7103
  'pinned-background-color': var(--cosmopolitan-color-light-primary-50),
7041
- '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),
7042
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-1),
7043
- 'shadow-color': var(--cosmopolitan-elevation-light-color-1),
7044
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-1),
7045
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-1),
7046
- 'shadow-spread': var(--cosmopolitan-elevation-light-spread-1),
7047
- '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),
7048
7111
  'transition-mode': ease,
7049
7112
  'transition-property': (background-color, box-shadow, transform),
7050
7113
  'translate': none
@@ -7197,7 +7260,7 @@ $font-editor-props: (
7197
7260
  'shadow-offset-x': unset,
7198
7261
  'shadow-offset-y': unset,
7199
7262
  'shadow-spread': unset,
7200
- 'transition-duration': var(--cosmopolitan-duration-short),
7263
+ 'transition-duration': var(--mosaik-duration-short),
7201
7264
  'transition-mode': ease,
7202
7265
  'transition-property': unset,
7203
7266
  'translate': none,
@@ -7411,7 +7474,7 @@ $ghost-props: (
7411
7474
  'shadow-offset-x': unset,
7412
7475
  'shadow-offset-y': unset,
7413
7476
  'shadow-spread': unset,
7414
- 'transition-duration': var(--cosmopolitan-duration-short),
7477
+ 'transition-duration': var(--mosaik-duration-short),
7415
7478
  'transition-mode': ease,
7416
7479
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
7417
7480
  'translate': none
@@ -7858,12 +7921,12 @@ $kbd-props: (
7858
7921
  'padding-left': unset,
7859
7922
  'padding-right': unset,
7860
7923
  'padding-top': unset,
7861
- '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),
7862
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-1),
7863
- 'shadow-color': var(--cosmopolitan-elevation-light-color-1),
7864
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-1),
7865
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-1),
7866
- '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),
7867
7930
  'transition-duration': unset,
7868
7931
  'transition-mode': unset,
7869
7932
  'transition-property': unset,
@@ -8157,12 +8220,12 @@ $listing-item-marker-props: (
8157
8220
  'padding-left': unset,
8158
8221
  'padding-right': unset,
8159
8222
  'padding-top': unset,
8160
- '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),
8161
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-0),
8162
- 'shadow-color': var(--cosmopolitan-elevation-light-color-0),
8163
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-0),
8164
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-0),
8165
- '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),
8166
8229
  'transition-duration': unset,
8167
8230
  'transition-mode': unset,
8168
8231
  'transition-property': (unset),
@@ -8470,12 +8533,12 @@ $message-props: (
8470
8533
  'padding-left': unset,
8471
8534
  'padding-right': unset,
8472
8535
  'padding-top': unset,
8473
- '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),
8474
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
8475
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
8476
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
8477
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
8478
- '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),
8479
8542
  'transition-duration': unset,
8480
8543
  'transition-mode': unset,
8481
8544
  'transition-property': (unset),
@@ -8670,6 +8733,9 @@ $number-box-props: (
8670
8733
  'border-radius': unset,
8671
8734
  'border-style': unset,
8672
8735
  'border-width': unset,
8736
+ 'focus-ring-active-width': 8px,
8737
+ 'focus-ring-color': unset,
8738
+ 'focus-ring-inward-offset': 2px,
8673
8739
  'focus-ring-outward-offset': unset,
8674
8740
  'font-family': var(--cosmopolitan-font-family),
8675
8741
  'font-letter-spacing': unset,
@@ -8691,7 +8757,7 @@ $number-box-props: (
8691
8757
  'shadow-offset-x': unset,
8692
8758
  'shadow-offset-y': unset,
8693
8759
  'shadow-spread': unset,
8694
- 'transition-duration': var(--cosmopolitan-duration-short),
8760
+ 'transition-duration': var(--mosaik-duration-short),
8695
8761
  'transition-mode': ease,
8696
8762
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
8697
8763
  'translate': none
@@ -9022,6 +9088,10 @@ $password-box-props: (
9022
9088
  'border-radius': unset,
9023
9089
  'border-style': unset,
9024
9090
  'border-width': unset,
9091
+ 'focus-ring-active-width': 8px,
9092
+ 'focus-ring-color': unset,
9093
+ 'focus-ring-inward-offset': 2px,
9094
+ 'focus-ring-outward-offset': 2px,
9025
9095
  'focus-ring-width': 0px,
9026
9096
  'font-family': var(--cosmopolitan-font-family),
9027
9097
  'font-letter-spacing': unset,
@@ -9037,13 +9107,13 @@ $password-box-props: (
9037
9107
  'padding-left': calc(var(--cosmopolitan-layout-space) * 1.5),
9038
9108
  'padding-right': calc(var(--cosmopolitan-layout-space) * 1.5),
9039
9109
  'padding-top': var(--cosmopolitan-layout-space),
9040
- '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),
9041
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
9042
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
9043
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
9044
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
9045
- 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread-0),
9046
- '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),
9047
9117
  'transition-mode': ease,
9048
9118
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
9049
9119
  'translate': none
@@ -9170,6 +9240,10 @@ $pin-box-props: (
9170
9240
  'border-radius': unset,
9171
9241
  'border-style': unset,
9172
9242
  'border-width': unset,
9243
+ 'focus-ring-active-width': 8px,
9244
+ 'focus-ring-color': unset,
9245
+ 'focus-ring-inward-offset': 2px,
9246
+ 'focus-ring-outward-offset': 2px,
9173
9247
  'font-family': var(--cosmopolitan-font-family),
9174
9248
  'font-letter-spacing': unset,
9175
9249
  'font-line-height': unset,
@@ -9184,13 +9258,13 @@ $pin-box-props: (
9184
9258
  'padding-left': calc(var(--cosmopolitan-layout-space) * 1.5),
9185
9259
  'padding-right': calc(var(--cosmopolitan-layout-space) * 1.5),
9186
9260
  'padding-top': var(--cosmopolitan-layout-space),
9187
- '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),
9188
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
9189
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
9190
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
9191
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
9192
- 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread-0),
9193
- '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),
9194
9268
  'transition-mode': ease,
9195
9269
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
9196
9270
  'translate': none
@@ -9224,12 +9298,12 @@ $pip-props: (
9224
9298
  'padding-left': unset,
9225
9299
  'padding-right': unset,
9226
9300
  'padding-top': unset,
9227
- '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),
9228
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-0),
9229
- 'shadow-color': var(--cosmopolitan-elevation-light-color-0),
9230
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-0),
9231
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-0),
9232
- '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),
9233
9307
  'transition-duration': unset,
9234
9308
  'transition-mode': unset,
9235
9309
  'transition-property': (unset),
@@ -9268,7 +9342,7 @@ $placeholder-props: (
9268
9342
  'shadow-offset-x': unset,
9269
9343
  'shadow-offset-y': unset,
9270
9344
  'shadow-spread': unset,
9271
- 'transition-duration': var(--cosmopolitan-duration-short),
9345
+ 'transition-duration': var(--mosaik-duration-short),
9272
9346
  'transition-mode': ease,
9273
9347
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
9274
9348
  'translate': unset
@@ -9301,13 +9375,13 @@ $popup-props: (
9301
9375
  'padding-left': calc(var(--cosmopolitan-layout-space) * 1.25),
9302
9376
  'padding-right': calc(var(--cosmopolitan-layout-space) * 1.25),
9303
9377
  'padding-top': calc(var(--cosmopolitan-layout-space) * 1),
9304
- '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),
9305
- 'shadow-blur': var(--cosmopolitan-elevation-regular-blur-0),
9306
- 'shadow-color': var(--cosmopolitan-elevation-regular-color-0),
9307
- 'shadow-offset-x': var(--cosmopolitan-elevation-regular-offset-x-0),
9308
- 'shadow-offset-y': var(--cosmopolitan-elevation-regular-offset-y-0),
9309
- 'shadow-spread': var(--cosmopolitan-elevation-regular-spread-0),
9310
- '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),
9311
9385
  'transition-mode': ease,
9312
9386
  'transition-property': (background-color, border-color, box-shadow, color, transform, opacity),
9313
9387
  'translate': none
@@ -9655,7 +9729,7 @@ $radio-group-props: (
9655
9729
  'shadow-offset-x': unset,
9656
9730
  'shadow-offset-y': unset,
9657
9731
  'shadow-spread': unset,
9658
- 'transition-duration': var(--cosmopolitan-duration-short),
9732
+ 'transition-duration': var(--mosaik-duration-short),
9659
9733
  'transition-mode': ease,
9660
9734
  'transition-property': (background-color, color, border-color, box-shadow, transform),
9661
9735
  'translate': none
@@ -9985,6 +10059,9 @@ $rich-text-box-props: (
9985
10059
  'border-radius': unset,
9986
10060
  'border-style': unset,
9987
10061
  'border-width': unset,
10062
+ 'focus-ring-active-width': 8px,
10063
+ 'focus-ring-color': unset,
10064
+ 'focus-ring-inward-offset': 2px,
9988
10065
  'focus-ring-outward-offset': unset,
9989
10066
  'font-family': var(--cosmopolitan-font-family),
9990
10067
  'font-letter-spacing': unset,
@@ -10007,7 +10084,7 @@ $rich-text-box-props: (
10007
10084
  'shadow-offset-y': unset,
10008
10085
  'shadow-spread': unset,
10009
10086
  'toolbox-border-color': unset,
10010
- 'transition-duration': var(--cosmopolitan-duration-short),
10087
+ 'transition-duration': var(--mosaik-duration-short),
10011
10088
  'transition-mode': ease,
10012
10089
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
10013
10090
  'translate': none
@@ -10150,7 +10227,7 @@ $router-anchor-props: (
10150
10227
  'shadow-offset-x': unset,
10151
10228
  'shadow-offset-y': unset,
10152
10229
  'shadow-spread': unset,
10153
- 'transition-duration': var(--cosmopolitan-duration-short),
10230
+ 'transition-duration': var(--mosaik-duration-short),
10154
10231
  'transition-mode': ease,
10155
10232
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
10156
10233
  'translate': none
@@ -10333,7 +10410,7 @@ $scheduler-props: (
10333
10410
  'shadow-spread': unset,
10334
10411
  'timescale-width': 80px,
10335
10412
  'today-background-color': var(--cosmopolitan-scheme-semi-transparent),
10336
- 'transition-duration': var(--cosmopolitan-duration-short),
10413
+ 'transition-duration': var(--mosaik-duration-short),
10337
10414
  'transition-mode': ease,
10338
10415
  'transition-property': (background-color, color, border-color),
10339
10416
  'translate': none
@@ -10489,12 +10566,12 @@ $scheduler-event-props: (
10489
10566
  'padding-top': unset,
10490
10567
  'ripple-color': unset,
10491
10568
  'ripple-duration': 0.20s,
10492
- '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),
10493
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-1),
10494
- 'shadow-color': var(--cosmopolitan-elevation-light-color-1),
10495
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-1),
10496
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-1),
10497
- '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),
10498
10575
  'transition-duration': var(--cosmopolitan-motion-duration),
10499
10576
  'transition-mode': var(--cosmopolitan-motion-mode),
10500
10577
  'transition-property': (background-color, box-shadow, transform),
@@ -10600,7 +10677,7 @@ $scheduler-now-indicator-props: (
10600
10677
  'shadow-offset-x': unset,
10601
10678
  'shadow-offset-y': unset,
10602
10679
  'shadow-spread': unset,
10603
- 'transition-duration': var(--cosmopolitan-duration-short),
10680
+ 'transition-duration': var(--mosaik-duration-short),
10604
10681
  'transition-mode': ease,
10605
10682
  'transition-property': (top),
10606
10683
  'translate': none
@@ -10756,7 +10833,7 @@ $scroll-props: (
10756
10833
  'shadow-offset-x': unset,
10757
10834
  'shadow-offset-y': unset,
10758
10835
  'shadow-spread': unset,
10759
- 'transition-duration': var(--cosmopolitan-duration-medium),
10836
+ 'transition-duration': var(--mosaik-duration-medium),
10760
10837
  'transition-mode': ease,
10761
10838
  'transition-property': (background-color, box-shadow, transform),
10762
10839
  'translate': none
@@ -10870,13 +10947,13 @@ $search-box-props: (
10870
10947
  'padding-left': calc(var(--cosmopolitan-layout-space) * 1.5),
10871
10948
  'padding-right': calc(var(--cosmopolitan-layout-space) * 1.5),
10872
10949
  'padding-top': var(--cosmopolitan-layout-space),
10873
- '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),
10874
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
10875
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
10876
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
10877
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
10878
- 'shadow-spread': var(--cosmopolitan-elevation-semilight-spread-0),
10879
- '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),
10880
10957
  'transition-mode': ease,
10881
10958
  'transition-property': (all),
10882
10959
  'translate': none
@@ -10910,12 +10987,12 @@ $segment-props: (
10910
10987
  'padding-left': unset,
10911
10988
  'padding-right': unset,
10912
10989
  'padding-top': unset,
10913
- '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),
10914
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
10915
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
10916
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
10917
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
10918
- '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),
10919
10996
  'transition-duration': var(--cosmopolitan-layout-transition),
10920
10997
  'transition-mode': ease,
10921
10998
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
@@ -10998,18 +11075,18 @@ $select-props: (
10998
11075
  'font-text-transform': var(--cosmopolitan-typography-body2-text-transform),
10999
11076
  'font-weight': normal,
11000
11077
  'foreground-color': unset,
11001
- 'gap': 8px,
11002
- 'padding-bottom': 8px,
11003
- 'padding-left': 12px,
11004
- 'padding-right': 12px,
11005
- 'padding-top': 8px,
11078
+ 'gap': var(--cosmopolitan-layout-space),
11079
+ 'padding-bottom': calc(var(--cosmopolitan-layout-space) / 2),
11080
+ 'padding-left': calc(var(--cosmopolitan-layout-space) * 1.5),
11081
+ 'padding-right': calc(var(--cosmopolitan-layout-space) * 1.5),
11082
+ 'padding-top': calc(var(--cosmopolitan-layout-space) / 2),
11006
11083
  'shadow': unset unset unset unset unset,
11007
11084
  'shadow-blur': unset,
11008
11085
  'shadow-color': unset,
11009
11086
  'shadow-offset-x': unset,
11010
11087
  'shadow-offset-y': unset,
11011
11088
  'shadow-spread': unset,
11012
- 'transition-duration': var(--cosmopolitan-duration-short),
11089
+ 'transition-duration': var(--mosaik-duration-short),
11013
11090
  'transition-mode': ease,
11014
11091
  'transition-property': (all),
11015
11092
  'translate': none
@@ -11054,7 +11131,7 @@ $select-item-props: (
11054
11131
  'shadow-offset-x': unset,
11055
11132
  'shadow-offset-y': unset,
11056
11133
  'shadow-spread': unset,
11057
- 'transition-duration': var(--cosmopolitan-duration-short),
11134
+ 'transition-duration': var(--mosaik-duration-short),
11058
11135
  'transition-mode': ease,
11059
11136
  'transition-property': (all),
11060
11137
  'translate': none
@@ -11141,7 +11218,7 @@ $sheet-props: (
11141
11218
  'shadow-offset-x': unset,
11142
11219
  'shadow-offset-y': unset,
11143
11220
  'shadow-spread': unset,
11144
- 'transition-duration': var(--cosmopolitan-duration-short),
11221
+ 'transition-duration': var(--mosaik-duration-short),
11145
11222
  'transition-mode': ease,
11146
11223
  'transition-property': (transform, opacity, visibility),
11147
11224
  'translate': none,
@@ -11333,6 +11410,10 @@ $signature-pad-props: (
11333
11410
  'border-radius': unset,
11334
11411
  'border-style': unset,
11335
11412
  'border-width': unset,
11413
+ 'focus-ring-active-width': 8px,
11414
+ 'focus-ring-color': unset,
11415
+ 'focus-ring-inward-offset': 2px,
11416
+ 'focus-ring-outward-offset': 2px,
11336
11417
  'font-family': var(--cosmopolitan-font-family),
11337
11418
  'font-letter-spacing': unset,
11338
11419
  'font-line-height': unset,
@@ -11352,7 +11433,7 @@ $signature-pad-props: (
11352
11433
  'shadow-offset-x': unset,
11353
11434
  'shadow-offset-y': unset,
11354
11435
  'shadow-spread': unset,
11355
- 'transition-duration': var(--cosmopolitan-duration-short),
11436
+ 'transition-duration': var(--mosaik-duration-short),
11356
11437
  'transition-mode': ease,
11357
11438
  'transition-property': (all),
11358
11439
  'translate': none
@@ -11499,7 +11580,7 @@ $slider2-props: (
11499
11580
  'shadow-offset-x': unset,
11500
11581
  'shadow-offset-y': unset,
11501
11582
  'shadow-spread': unset,
11502
- 'transition-duration': var(--cosmopolitan-duration-short),
11583
+ 'transition-duration': var(--mosaik-duration-short),
11503
11584
  'transition-mode': ease,
11504
11585
  'transition-property': (background-color, color, border-color, box-shadow, transform),
11505
11586
  'translate': none
@@ -11533,7 +11614,7 @@ $slider2thumb-props: (
11533
11614
  'shadow-offset-y': unset,
11534
11615
  'shadow-spread': unset,
11535
11616
  'size': unset,
11536
- 'transition-duration': var(--cosmopolitan-duration-short),
11617
+ 'transition-duration': var(--mosaik-duration-short),
11537
11618
  'transition-mode': ease,
11538
11619
  'transition-property': (background-color, color, border-color, box-shadow, transform),
11539
11620
  'translate': none
@@ -11607,7 +11688,7 @@ $split-props: (
11607
11688
  'thumb-border-color': var(--cosmopolitan-scheme-highlight),
11608
11689
  'thumb-border-radius': var(--cosmopolitan-layout-radius),
11609
11690
  'thumb-foreground-color': var(--cosmopolitan-scheme-foreground),
11610
- 'transition-duration': var(--cosmopolitan-duration-short),
11691
+ 'transition-duration': var(--mosaik-duration-short),
11611
11692
  'transition-mode': ease,
11612
11693
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
11613
11694
  'translate': none
@@ -11959,12 +12040,12 @@ $tab-props: (
11959
12040
  'padding-right': 16px,
11960
12041
  'padding-top': 8px,
11961
12042
  'panel-background-color': var(--tab-background-color),
11962
- '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),
11963
- 'shadow-blur': var(--cosmopolitan-elevation-bold-blur-0),
11964
- 'shadow-color': var(--cosmopolitan-elevation-bold-color-0),
11965
- 'shadow-offset-x': var(--cosmopolitan-elevation-bold-offset-x-0),
11966
- 'shadow-offset-y': var(--cosmopolitan-elevation-bold-offset-y-0),
11967
- '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),
11968
12049
  'strip-background-color': var(--cosmopolitan-scheme-transparent),
11969
12050
  'strip-padding-bottom': 0,
11970
12051
  'strip-padding-left': 0,
@@ -12328,7 +12409,7 @@ $table-column-editor-props: (
12328
12409
  'padding-left': var(--cosmopolitan-layout-space),
12329
12410
  'padding-right': var(--cosmopolitan-layout-space),
12330
12411
  'padding-top': var(--cosmopolitan-layout-space),
12331
- 'transition-duration': var(--cosmopolitan-duration-short),
12412
+ 'transition-duration': var(--mosaik-duration-short),
12332
12413
  'transition-mode': ease,
12333
12414
  'transition-property': (background-color, color),
12334
12415
  'translate': unset
@@ -12627,6 +12708,9 @@ $text-box-props: (
12627
12708
  'border-radius': unset,
12628
12709
  'border-style': unset,
12629
12710
  'border-width': unset,
12711
+ 'focus-ring-active-width': 8px,
12712
+ 'focus-ring-color': unset,
12713
+ 'focus-ring-inward-offset': 2px,
12630
12714
  'focus-ring-outward-offset': 0px,
12631
12715
  'focus-ring-width': 0px,
12632
12716
  'font-family': var(--cosmopolitan-font-family),
@@ -12644,14 +12728,14 @@ $text-box-props: (
12644
12728
  'padding-right': calc(var(--cosmopolitan-layout-space) * 1.5),
12645
12729
  'padding-top': var(--cosmopolitan-layout-space),
12646
12730
  'prefix-icon-size': 20px,
12647
- '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),
12648
- 'shadow-blur': var(--cosmopolitan-elevation-semilight-blur-0),
12649
- 'shadow-color': var(--cosmopolitan-elevation-semilight-color-0),
12650
- 'shadow-offset-x': var(--cosmopolitan-elevation-semilight-offset-x-0),
12651
- 'shadow-offset-y': var(--cosmopolitan-elevation-semilight-offset-y-0),
12652
- '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),
12653
12737
  'suffix-icon-size': 20px,
12654
- 'transition-duration': var(--cosmopolitan-duration-short),
12738
+ 'transition-duration': var(--mosaik-duration-short),
12655
12739
  'transition-mode': ease,
12656
12740
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
12657
12741
  'translate': none
@@ -12716,13 +12800,13 @@ $thumb-props: (
12716
12800
  'padding-left': unset,
12717
12801
  'padding-right': unset,
12718
12802
  'padding-top': unset,
12719
- '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),
12720
- 'shadow-blur': var(--cosmopolitan-elevation-light-blur-1),
12721
- 'shadow-color': var(--cosmopolitan-elevation-light-color-1),
12722
- 'shadow-offset-x': var(--cosmopolitan-elevation-light-offset-x-1),
12723
- 'shadow-offset-y': var(--cosmopolitan-elevation-light-offset-y-1),
12724
- 'shadow-spread': var(--cosmopolitan-elevation-light-spread-1),
12725
- '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),
12726
12810
  'transition-mode': ease,
12727
12811
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
12728
12812
  'translate': none
@@ -13035,6 +13119,10 @@ $time-box-props: (
13035
13119
  'border-style': unset,
13036
13120
  'border-width': unset,
13037
13121
  'color': unset,
13122
+ 'focus-ring-active-width': 8px,
13123
+ 'focus-ring-color': unset,
13124
+ 'focus-ring-inward-offset': 2px,
13125
+ 'focus-ring-outward-offset': 2px,
13038
13126
  'font-family': var(--cosmopolitan-font-family),
13039
13127
  'font-letter-spacing': unset,
13040
13128
  'font-line-height': unset,
@@ -13056,7 +13144,7 @@ $time-box-props: (
13056
13144
  'shadow-offset-x': unset,
13057
13145
  'shadow-offset-y': unset,
13058
13146
  'shadow-spread': unset,
13059
- 'transition-duration': var(--cosmopolitan-duration-short),
13147
+ 'transition-duration': var(--mosaik-duration-short),
13060
13148
  'transition-mode': ease,
13061
13149
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
13062
13150
  'translate': none
@@ -13098,7 +13186,7 @@ $timeline-props: (
13098
13186
  'shadow-offset-x': unset,
13099
13187
  'shadow-offset-y': unset,
13100
13188
  'shadow-spread': unset,
13101
- 'transition-duration': var(--cosmopolitan-duration-short),
13189
+ 'transition-duration': var(--mosaik-duration-short),
13102
13190
  'transition-mode': ease,
13103
13191
  'transition-property': (color, background-color, transform),
13104
13192
  'translate': unset
@@ -13940,7 +14028,7 @@ $wheel-picker-props: (
13940
14028
  'shadow-offset-x': unset,
13941
14029
  'shadow-offset-y': unset,
13942
14030
  'shadow-spread': unset,
13943
- 'transition-duration': var(--cosmopolitan-duration-short),
14031
+ 'transition-duration': var(--mosaik-duration-short),
13944
14032
  'transition-mode': ease,
13945
14033
  'transition-property': (background-color, color),
13946
14034
  'translate': none