@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/memphis.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});
@@ -788,6 +806,23 @@ $_color-dark: (
788
806
  @include _scrollbar-style($prefix);
789
807
  @include _selection-style($prefix);
790
808
  }
809
+ @mixin duration-style($prefix) {
810
+ $durations: (
811
+ 'short': $duration-short,
812
+ 'medium': $duration-medium,
813
+ 'long': $duration-long
814
+ );
815
+ :root,
816
+ :host {
817
+ @each $key, $value in $durations {
818
+ --#{$prefix}-duration-#{$key}: #{$value};
819
+ --mosaik-duration-#{$key}: var(--#{$prefix}-duration-#{$key});
820
+ }
821
+ }
822
+ }
823
+ @function get-duration($duration) {
824
+ @return var(--#{$name}-duration-#{$duration});
825
+ }
791
826
  $_shadows-light: (
792
827
  none: $elevation-none,
793
828
  light: (
@@ -1292,6 +1327,7 @@ $scheme-dark: (
1292
1327
  @mixin memphis-style($radius: $layout-radius, $thickness: $layout-thickness, $space: $layout-space) {
1293
1328
  $theme: 'memphis';
1294
1329
  @include layout-style($theme, $radius, $thickness, $space);
1330
+ @include duration-style($theme);
1295
1331
  @include scheme-style($theme);
1296
1332
  @include color-style($theme);
1297
1333
  @include elevation-style($theme);
@@ -1758,7 +1794,7 @@ $auto-complete-box-props: (
1758
1794
  'shadow-offset-x': unset,
1759
1795
  'shadow-offset-y': unset,
1760
1796
  'shadow-spread': unset,
1761
- 'transition-duration': var(--memphis-duration-short),
1797
+ 'transition-duration': var(--mosaik-duration-short),
1762
1798
  'transition-mode': ease,
1763
1799
  'transition-property': (all),
1764
1800
  'translate': none
@@ -1797,12 +1833,12 @@ $avatar-props: (
1797
1833
  'padding-left': var(--memphis-layout-space),
1798
1834
  'padding-right': var(--memphis-layout-space),
1799
1835
  'padding-top': calc(var(--memphis-layout-space) / 2),
1800
- 'shadow': var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0),
1801
- 'shadow-blur': var(--memphis-elevation-semilight-blur-0),
1802
- 'shadow-color': var(--memphis-elevation-semilight-color-0),
1803
- 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x-0),
1804
- 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y-0),
1805
- 'shadow-spread': var(--memphis-elevation-semilight-spread-0),
1836
+ 'shadow': var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color),
1837
+ 'shadow-blur': var(--memphis-elevation-semilight-blur),
1838
+ 'shadow-color': var(--memphis-elevation-semilight-color),
1839
+ 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x),
1840
+ 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y),
1841
+ 'shadow-spread': var(--memphis-elevation-semilight-spread),
1806
1842
  'transition-duration': .2s,
1807
1843
  'transition-mode': ease,
1808
1844
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
@@ -1944,12 +1980,12 @@ $badge-props: (
1944
1980
  'padding-left': var(--memphis-layout-space),
1945
1981
  'padding-right': var(--memphis-layout-space),
1946
1982
  'padding-top': var(--memphis-layout-space),
1947
- 'shadow': var(--memphis-elevation-light-offset-x-0) var(--memphis-elevation-light-offset-y-0) var(--memphis-elevation-light-blur-0) var(--memphis-elevation-light-spread-0) var(--memphis-elevation-light-color-0),
1948
- 'shadow-blur': var(--memphis-elevation-light-blur-0),
1949
- 'shadow-color': var(--memphis-elevation-light-color-0),
1950
- 'shadow-offset-x': var(--memphis-elevation-light-offset-x-0),
1951
- 'shadow-offset-y': var(--memphis-elevation-light-offset-y-0),
1952
- 'shadow-spread': var(--memphis-elevation-light-spread-0),
1983
+ 'shadow': var(--memphis-elevation-light-offset-x) var(--memphis-elevation-light-offset-y) var(--memphis-elevation-light-blur) var(--memphis-elevation-light-spread) var(--memphis-elevation-light-color),
1984
+ 'shadow-blur': var(--memphis-elevation-light-blur),
1985
+ 'shadow-color': var(--memphis-elevation-light-color),
1986
+ 'shadow-offset-x': var(--memphis-elevation-light-offset-x),
1987
+ 'shadow-offset-y': var(--memphis-elevation-light-offset-y),
1988
+ 'shadow-spread': var(--memphis-elevation-light-spread),
1953
1989
  'transition-duration': .2s,
1954
1990
  'transition-mode': ease,
1955
1991
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
@@ -1983,12 +2019,12 @@ $banner-props: (
1983
2019
  'padding-left': calc(var(--memphis-layout-space) * 2),
1984
2020
  'padding-right': calc(var(--memphis-layout-space) * 2),
1985
2021
  'padding-top': calc(var(--memphis-layout-space) * 2),
1986
- 'shadow': var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0),
1987
- 'shadow-blur': var(--memphis-elevation-semilight-blur-0),
1988
- 'shadow-color': var(--memphis-elevation-semilight-color-0),
1989
- 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x-0),
1990
- 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y-0),
1991
- 'shadow-spread': var(--memphis-elevation-semilight-spread-0),
2022
+ 'shadow': var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color),
2023
+ 'shadow-blur': var(--memphis-elevation-semilight-blur),
2024
+ 'shadow-color': var(--memphis-elevation-semilight-color),
2025
+ 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x),
2026
+ 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y),
2027
+ 'shadow-spread': var(--memphis-elevation-semilight-spread),
1992
2028
  'transition-duration': .2s,
1993
2029
  'transition-mode': ease,
1994
2030
  'transition-property': (all),
@@ -2288,12 +2324,12 @@ $button-props: (
2288
2324
  'progress-ring-width': var(--memphis-layout-thickness),
2289
2325
  'ripple-color': unset,
2290
2326
  'ripple-duration': 0.20s,
2291
- 'shadow': var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0),
2292
- 'shadow-blur': var(--memphis-elevation-semilight-blur-0),
2293
- 'shadow-color': var(--memphis-elevation-semilight-color-0),
2294
- 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x-0),
2295
- 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y-0),
2296
- 'shadow-spread': var(--memphis-elevation-semilight-spread-0),
2327
+ 'shadow': var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color),
2328
+ 'shadow-blur': var(--memphis-elevation-semilight-blur),
2329
+ 'shadow-color': var(--memphis-elevation-semilight-color),
2330
+ 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x),
2331
+ 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y),
2332
+ 'shadow-spread': var(--memphis-elevation-semilight-spread),
2297
2333
  'transition-duration': var(--memphis-layout-transition),
2298
2334
  'transition-mode': ease,
2299
2335
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
@@ -2368,12 +2404,12 @@ $calendar-props: (
2368
2404
  'padding-left': calc(var(--memphis-layout-space) * 2),
2369
2405
  'padding-right': calc(var(--memphis-layout-space) * 2),
2370
2406
  'padding-top': var(--memphis-layout-space),
2371
- 'shadow': var(--memphis-elevation-light-offset-x-0) var(--memphis-elevation-light-offset-y-0) var(--memphis-elevation-light-blur-0) var(--memphis-elevation-light-spread-0) var(--memphis-elevation-light-color-0),
2372
- 'shadow-blur': var(--memphis-elevation-light-blur-0),
2373
- 'shadow-color': var(--memphis-elevation-light-color-0),
2374
- 'shadow-offset-x': var(--memphis-elevation-light-offset-x-0),
2375
- 'shadow-offset-y': var(--memphis-elevation-light-offset-y-0),
2376
- 'shadow-spread': var(--memphis-elevation-light-spread-0),
2407
+ 'shadow': var(--memphis-elevation-light-offset-x) var(--memphis-elevation-light-offset-y) var(--memphis-elevation-light-blur) var(--memphis-elevation-light-spread) var(--memphis-elevation-light-color),
2408
+ 'shadow-blur': var(--memphis-elevation-light-blur),
2409
+ 'shadow-color': var(--memphis-elevation-light-color),
2410
+ 'shadow-offset-x': var(--memphis-elevation-light-offset-x),
2411
+ 'shadow-offset-y': var(--memphis-elevation-light-offset-y),
2412
+ 'shadow-spread': var(--memphis-elevation-light-spread),
2377
2413
  'transition-duration': .2s,
2378
2414
  'transition-mode': ease,
2379
2415
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
@@ -2490,12 +2526,12 @@ $calendar-item-props: (
2490
2526
  'ripple-color': unset,
2491
2527
  'ripple-duration': 0.20s,
2492
2528
  'selection-background-color': var(--memphis-scheme-selection),
2493
- 'shadow': var(--memphis-elevation-light-offset-x-0) var(--memphis-elevation-light-offset-y-0) var(--memphis-elevation-light-blur-0) var(--memphis-elevation-light-spread-0) var(--memphis-elevation-light-color-0),
2494
- 'shadow-blur': var(--memphis-elevation-light-blur-0),
2495
- 'shadow-color': var(--memphis-elevation-light-color-0),
2496
- 'shadow-offset-x': var(--memphis-elevation-light-offset-x-0),
2497
- 'shadow-offset-y': var(--memphis-elevation-light-offset-y-0),
2498
- 'shadow-spread': var(--memphis-elevation-light-spread-0),
2529
+ 'shadow': var(--memphis-elevation-light-offset-x) var(--memphis-elevation-light-offset-y) var(--memphis-elevation-light-blur) var(--memphis-elevation-light-spread) var(--memphis-elevation-light-color),
2530
+ 'shadow-blur': var(--memphis-elevation-light-blur),
2531
+ 'shadow-color': var(--memphis-elevation-light-color),
2532
+ 'shadow-offset-x': var(--memphis-elevation-light-offset-x),
2533
+ 'shadow-offset-y': var(--memphis-elevation-light-offset-y),
2534
+ 'shadow-spread': var(--memphis-elevation-light-spread),
2499
2535
  'today-border-color': var(--memphis-color-primary-500),
2500
2536
  'today-border-width': 2px,
2501
2537
  'transition-duration': .2s,
@@ -2675,12 +2711,12 @@ $card-props: (
2675
2711
  'padding-left': unset,
2676
2712
  'padding-right': unset,
2677
2713
  'padding-top': unset,
2678
- 'shadow': var(--memphis-elevation-bold-offset-x-0) var(--memphis-elevation-bold-offset-y-0) var(--memphis-elevation-bold-blur-0) var(--memphis-elevation-bold-spread-0) var(--memphis-elevation-bold-color-0),
2679
- 'shadow-blur': var(--memphis-elevation-bold-blur-0),
2680
- 'shadow-color': var(--memphis-elevation-bold-color-0),
2681
- 'shadow-offset-x': var(--memphis-elevation-bold-offset-x-0),
2682
- 'shadow-offset-y': var(--memphis-elevation-bold-offset-y-0),
2683
- 'shadow-spread': var(--memphis-elevation-bold-spread-0),
2714
+ 'shadow': var(--memphis-elevation-bold-offset-x) var(--memphis-elevation-bold-offset-y) var(--memphis-elevation-bold-blur) var(--memphis-elevation-bold-spread) var(--memphis-elevation-bold-color),
2715
+ 'shadow-blur': var(--memphis-elevation-bold-blur),
2716
+ 'shadow-color': var(--memphis-elevation-bold-color),
2717
+ 'shadow-offset-x': var(--memphis-elevation-bold-offset-x),
2718
+ 'shadow-offset-y': var(--memphis-elevation-bold-offset-y),
2719
+ 'shadow-spread': var(--memphis-elevation-bold-spread),
2684
2720
  'transition-duration': .2s,
2685
2721
  'transition-mode': ease,
2686
2722
  'transition-property': (background-color, color, border-color, box-shadow),
@@ -3093,12 +3129,12 @@ $cell-group-props: (
3093
3129
  'padding-left': unset,
3094
3130
  'padding-right': unset,
3095
3131
  'padding-top': unset,
3096
- 'shadow': var(--memphis-elevation-bold-offset-x-0) var(--memphis-elevation-bold-offset-y-0) var(--memphis-elevation-bold-blur-0) var(--memphis-elevation-bold-spread-0) var(--memphis-elevation-bold-color-0),
3097
- 'shadow-blur': var(--memphis-elevation-bold-blur-0),
3098
- 'shadow-color': var(--memphis-elevation-bold-color-0),
3099
- 'shadow-offset-x': var(--memphis-elevation-bold-offset-x-0),
3100
- 'shadow-offset-y': var(--memphis-elevation-bold-offset-y-0),
3101
- 'shadow-spread': var(--memphis-elevation-bold-spread-0),
3132
+ 'shadow': var(--memphis-elevation-bold-offset-x) var(--memphis-elevation-bold-offset-y) var(--memphis-elevation-bold-blur) var(--memphis-elevation-bold-spread) var(--memphis-elevation-bold-color),
3133
+ 'shadow-blur': var(--memphis-elevation-bold-blur),
3134
+ 'shadow-color': var(--memphis-elevation-bold-color),
3135
+ 'shadow-offset-x': var(--memphis-elevation-bold-offset-x),
3136
+ 'shadow-offset-y': var(--memphis-elevation-bold-offset-y),
3137
+ 'shadow-spread': var(--memphis-elevation-bold-spread),
3102
3138
  'transition-duration': unset,
3103
3139
  'transition-mode': unset,
3104
3140
  'transition-property': (background-color, color, border-color, box-shadow),
@@ -3175,7 +3211,7 @@ $chat-props: (
3175
3211
  'shadow-offset-x': unset,
3176
3212
  'shadow-offset-y': unset,
3177
3213
  'shadow-spread': unset,
3178
- 'transition-duration': var(--memphis-duration-short),
3214
+ 'transition-duration': var(--mosaik-duration-short),
3179
3215
  'transition-mode': ease,
3180
3216
  'transition-property': (all),
3181
3217
  'translate': none
@@ -3243,13 +3279,13 @@ $chat-input-props: (
3243
3279
  'padding-left': calc(var(--memphis-layout-space) * 1.5),
3244
3280
  'padding-right': calc(var(--memphis-layout-space) * 1.5),
3245
3281
  'padding-top': var(--memphis-layout-space),
3246
- 'shadow': var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0),
3247
- 'shadow-blur': var(--memphis-elevation-semilight-blur-0),
3248
- 'shadow-color': var(--memphis-elevation-semilight-color-0),
3249
- 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x-0),
3250
- 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y-0),
3251
- 'shadow-spread': var(--memphis-elevation-semilight-spread-0),
3252
- 'transition-duration': var(--memphis-duration-short),
3282
+ 'shadow': var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color),
3283
+ 'shadow-blur': var(--memphis-elevation-semilight-blur),
3284
+ 'shadow-color': var(--memphis-elevation-semilight-color),
3285
+ 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x),
3286
+ 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y),
3287
+ 'shadow-spread': var(--memphis-elevation-semilight-spread),
3288
+ 'transition-duration': var(--mosaik-duration-short),
3253
3289
  'transition-mode': ease,
3254
3290
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
3255
3291
  'translate': none
@@ -3283,13 +3319,13 @@ $chat-input-attachment-list-props: (
3283
3319
  'padding-left': calc(var(--memphis-layout-space) * 1.5),
3284
3320
  'padding-right': calc(var(--memphis-layout-space) * 1.5),
3285
3321
  'padding-top': var(--memphis-layout-space),
3286
- 'shadow': var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0),
3287
- 'shadow-blur': var(--memphis-elevation-semilight-blur-0),
3288
- 'shadow-color': var(--memphis-elevation-semilight-color-0),
3289
- 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x-0),
3290
- 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y-0),
3291
- 'shadow-spread': var(--memphis-elevation-semilight-spread-0),
3292
- 'transition-duration': var(--memphis-duration-short),
3322
+ 'shadow': var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color),
3323
+ 'shadow-blur': var(--memphis-elevation-semilight-blur),
3324
+ 'shadow-color': var(--memphis-elevation-semilight-color),
3325
+ 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x),
3326
+ 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y),
3327
+ 'shadow-spread': var(--memphis-elevation-semilight-spread),
3328
+ 'transition-duration': var(--mosaik-duration-short),
3293
3329
  'transition-mode': ease,
3294
3330
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
3295
3331
  'translate': none
@@ -3361,13 +3397,13 @@ $chat-message-props: (
3361
3397
  'padding-left': calc(var(--memphis-layout-space) * 2),
3362
3398
  'padding-right': calc(var(--memphis-layout-space) * 2),
3363
3399
  'padding-top': var(--memphis-layout-space),
3364
- 'shadow': var(--memphis-elevation-light-offset-x-1) var(--memphis-elevation-light-offset-y-1) var(--memphis-elevation-light-blur-1) var(--memphis-elevation-light-spread-1) var(--memphis-elevation-light-color-1),
3365
- 'shadow-blur': var(--memphis-elevation-light-blur-1),
3366
- 'shadow-color': var(--memphis-elevation-light-color-1),
3367
- 'shadow-offset-x': var(--memphis-elevation-light-offset-x-1),
3368
- 'shadow-offset-y': var(--memphis-elevation-light-offset-y-1),
3369
- 'shadow-spread': var(--memphis-elevation-light-spread-1),
3370
- 'transition-duration': var(--memphis-duration-short),
3400
+ 'shadow': var(--memphis-elevation-light-offset-x) var(--memphis-elevation-light-offset-y) var(--memphis-elevation-light-blur) var(--memphis-elevation-light-spread) var(--memphis-elevation-light-color),
3401
+ 'shadow-blur': var(--memphis-elevation-light-blur),
3402
+ 'shadow-color': var(--memphis-elevation-light-color),
3403
+ 'shadow-offset-x': var(--memphis-elevation-light-offset-x),
3404
+ 'shadow-offset-y': var(--memphis-elevation-light-offset-y),
3405
+ 'shadow-spread': var(--memphis-elevation-light-spread),
3406
+ 'transition-duration': var(--mosaik-duration-short),
3371
3407
  'transition-mode': ease,
3372
3408
  'transition-property': (all),
3373
3409
  'translate': none,
@@ -3413,7 +3449,7 @@ $chat-message-avatar-props: (
3413
3449
  'shadow-offset-x': unset,
3414
3450
  'shadow-offset-y': unset,
3415
3451
  'shadow-spread': unset,
3416
- 'transition-duration': var(--memphis-duration-short),
3452
+ 'transition-duration': var(--mosaik-duration-short),
3417
3453
  'transition-mode': ease,
3418
3454
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
3419
3455
  'translate': none
@@ -3447,7 +3483,7 @@ $chat-message-divider-props: (
3447
3483
  'shadow-offset-x': unset,
3448
3484
  'shadow-offset-y': unset,
3449
3485
  'shadow-spread': unset,
3450
- 'transition-duration': var(--memphis-duration-short),
3486
+ 'transition-duration': var(--mosaik-duration-short),
3451
3487
  'transition-mode': ease,
3452
3488
  'transition-property': (color, opacity, transform),
3453
3489
  'translate': none
@@ -3481,7 +3517,7 @@ $chat-message-reaction-props: (
3481
3517
  'shadow-offset-x': unset,
3482
3518
  'shadow-offset-y': unset,
3483
3519
  'shadow-spread': unset,
3484
- 'transition-duration': var(--memphis-duration-short),
3520
+ 'transition-duration': var(--mosaik-duration-short),
3485
3521
  'transition-mode': ease,
3486
3522
  'transition-property': (background-color, color, transform),
3487
3523
  'translate': none
@@ -3627,14 +3663,14 @@ $checkmark-props: (
3627
3663
  'padding-left': calc(var(--memphis-layout-space) / 4),
3628
3664
  'padding-right': calc(var(--memphis-layout-space) / 4),
3629
3665
  'padding-top': calc(var(--memphis-layout-space) / 4),
3630
- 'shadow': var(--memphis-elevation-light-offset-x-1) var(--memphis-elevation-light-offset-y-1) var(--memphis-elevation-light-blur-1) var(--memphis-elevation-light-spread-1) var(--memphis-elevation-light-color-1),
3631
- 'shadow-blur': var(--memphis-elevation-light-blur-1),
3632
- 'shadow-color': var(--memphis-elevation-light-color-1),
3633
- 'shadow-offset-x': var(--memphis-elevation-light-offset-x-1),
3634
- 'shadow-offset-y': var(--memphis-elevation-light-offset-y-1),
3635
- 'shadow-spread': var(--memphis-elevation-light-spread-1),
3666
+ 'shadow': var(--memphis-elevation-light-offset-x) var(--memphis-elevation-light-offset-y) var(--memphis-elevation-light-blur) var(--memphis-elevation-light-spread) var(--memphis-elevation-light-color),
3667
+ 'shadow-blur': var(--memphis-elevation-light-blur),
3668
+ 'shadow-color': var(--memphis-elevation-light-color),
3669
+ 'shadow-offset-x': var(--memphis-elevation-light-offset-x),
3670
+ 'shadow-offset-y': var(--memphis-elevation-light-offset-y),
3671
+ 'shadow-spread': var(--memphis-elevation-light-spread),
3636
3672
  'thickness': var(--memphis-layout-thickness),
3637
- 'transition-duration': var(--memphis-duration-short),
3673
+ 'transition-duration': var(--mosaik-duration-short),
3638
3674
  'transition-mode': ease,
3639
3675
  'transition-property': (background-color, color, border-color, box-shadow, transform),
3640
3676
  'translate': none,
@@ -3675,12 +3711,12 @@ $chip-props: (
3675
3711
  'padding-top': var(--memphis-layout-space),
3676
3712
  'ripple-color': unset,
3677
3713
  'ripple-duration': 0.20s,
3678
- 'shadow': var(--memphis-elevation-light-offset-x-0) var(--memphis-elevation-light-offset-y-0) var(--memphis-elevation-light-blur-0) var(--memphis-elevation-light-spread-0) var(--memphis-elevation-light-color-0),
3679
- 'shadow-blur': var(--memphis-elevation-light-blur-0),
3680
- 'shadow-color': var(--memphis-elevation-light-color-0),
3681
- 'shadow-offset-x': var(--memphis-elevation-light-offset-x-0),
3682
- 'shadow-offset-y': var(--memphis-elevation-light-offset-y-0),
3683
- 'shadow-spread': var(--memphis-elevation-light-spread-0),
3714
+ 'shadow': var(--memphis-elevation-light-offset-x) var(--memphis-elevation-light-offset-y) var(--memphis-elevation-light-blur) var(--memphis-elevation-light-spread) var(--memphis-elevation-light-color),
3715
+ 'shadow-blur': var(--memphis-elevation-light-blur),
3716
+ 'shadow-color': var(--memphis-elevation-light-color),
3717
+ 'shadow-offset-x': var(--memphis-elevation-light-offset-x),
3718
+ 'shadow-offset-y': var(--memphis-elevation-light-offset-y),
3719
+ 'shadow-spread': var(--memphis-elevation-light-spread),
3684
3720
  'transition-duration': .2s,
3685
3721
  'transition-mode': ease,
3686
3722
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
@@ -3701,6 +3737,9 @@ $chip-box-props: (
3701
3737
  'border-radius': var(--memphis-layout-radius),
3702
3738
  'border-style': solid,
3703
3739
  'border-width': var(--memphis-layout-thickness),
3740
+ 'focus-ring-active-width': 8px,
3741
+ 'focus-ring-color': unset,
3742
+ 'focus-ring-inward-offset': 2px,
3704
3743
  'focus-ring-outward-offset': 0px,
3705
3744
  'focus-ring-width': 0px,
3706
3745
  'font-family': var(--memphis-font-family),
@@ -3718,12 +3757,12 @@ $chip-box-props: (
3718
3757
  'padding-right': calc(var(--memphis-layout-space) * 1.5),
3719
3758
  'padding-top': var(--memphis-layout-space),
3720
3759
  'prefix-icon-size': 20px,
3721
- 'shadow': var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0),
3722
- 'shadow-blur': var(--memphis-elevation-semilight-blur-0),
3723
- 'shadow-color': var(--memphis-elevation-semilight-color-0),
3724
- 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x-0),
3725
- 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y-0),
3726
- 'shadow-spread': var(--memphis-elevation-semilight-spread-0),
3760
+ 'shadow': var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color),
3761
+ 'shadow-blur': var(--memphis-elevation-semilight-blur),
3762
+ 'shadow-color': var(--memphis-elevation-semilight-color),
3763
+ 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x),
3764
+ 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y),
3765
+ 'shadow-spread': var(--memphis-elevation-semilight-spread),
3727
3766
  'suffix-icon-size': 20px,
3728
3767
  'transition-duration': .2s,
3729
3768
  'transition-mode': ease,
@@ -3807,7 +3846,7 @@ $choice-props: (
3807
3846
  'shadow-offset-x': unset,
3808
3847
  'shadow-offset-y': unset,
3809
3848
  'shadow-spread': unset,
3810
- 'transition-duration': var(--memphis-duration-short),
3849
+ 'transition-duration': var(--mosaik-duration-short),
3811
3850
  'transition-mode': ease,
3812
3851
  'transition-property': (background-color, color, border-color, box-shadow, transform),
3813
3852
  'translate': none
@@ -3846,7 +3885,7 @@ $choice-group-props: (
3846
3885
  'shadow-offset-x': unset,
3847
3886
  'shadow-offset-y': unset,
3848
3887
  'shadow-spread': unset,
3849
- 'transition-duration': var(--memphis-duration-short),
3888
+ 'transition-duration': var(--mosaik-duration-short),
3850
3889
  'transition-mode': ease,
3851
3890
  'transition-property': (background-color, color, border-color, box-shadow, transform),
3852
3891
  'translate': none
@@ -3885,7 +3924,7 @@ $choice-group-header-props: (
3885
3924
  'shadow-offset-x': unset,
3886
3925
  'shadow-offset-y': unset,
3887
3926
  'shadow-spread': unset,
3888
- 'transition-duration': var(--memphis-duration-short),
3927
+ 'transition-duration': var(--mosaik-duration-short),
3889
3928
  'transition-mode': ease,
3890
3929
  'transition-property': (color, transform),
3891
3930
  'translate': none
@@ -3923,7 +3962,7 @@ $clickable-props: (
3923
3962
  'padding-top': 0,
3924
3963
  'ripple-color': unset,
3925
3964
  'ripple-duration': 0.20s,
3926
- 'transition-duration': var(--memphis-duration-short),
3965
+ 'transition-duration': var(--mosaik-duration-short),
3927
3966
  'transition-mode': ease,
3928
3967
  'transition-property': (background-color),
3929
3968
  'translate': unset
@@ -4010,6 +4049,9 @@ $color-box-props: (
4010
4049
  'border-radius': var(--memphis-layout-radius),
4011
4050
  'border-style': solid,
4012
4051
  'border-width': var(--memphis-layout-thickness),
4052
+ 'focus-ring-active-width': 8px,
4053
+ 'focus-ring-color': unset,
4054
+ 'focus-ring-inward-offset': 2px,
4013
4055
  'focus-ring-outward-offset': 0px,
4014
4056
  'focus-ring-width': 0px,
4015
4057
  'font-family': var(--memphis-font-family),
@@ -4026,12 +4068,12 @@ $color-box-props: (
4026
4068
  'padding-left': calc(var(--memphis-layout-space) * 1.5),
4027
4069
  'padding-right': calc(var(--memphis-layout-space) * 1.5),
4028
4070
  'padding-top': var(--memphis-layout-space),
4029
- 'shadow': var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0),
4030
- 'shadow-blur': var(--memphis-elevation-semilight-blur-0),
4031
- 'shadow-color': var(--memphis-elevation-semilight-color-0),
4032
- 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x-0),
4033
- 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y-0),
4034
- 'shadow-spread': var(--memphis-elevation-semilight-spread-0),
4071
+ 'shadow': var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color),
4072
+ 'shadow-blur': var(--memphis-elevation-semilight-blur),
4073
+ 'shadow-color': var(--memphis-elevation-semilight-color),
4074
+ 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x),
4075
+ 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y),
4076
+ 'shadow-spread': var(--memphis-elevation-semilight-spread),
4035
4077
  'transition-duration': .2s,
4036
4078
  'transition-mode': ease,
4037
4079
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
@@ -4076,7 +4118,7 @@ $color-editor-props: (
4076
4118
  'shadow-offset-x': unset,
4077
4119
  'shadow-offset-y': unset,
4078
4120
  'shadow-spread': unset,
4079
- 'transition-duration': var(--memphis-duration-short),
4121
+ 'transition-duration': var(--mosaik-duration-short),
4080
4122
  'transition-mode': ease,
4081
4123
  'transition-property': (background-color, border-color, box-shadow),
4082
4124
  'translate': none,
@@ -4116,19 +4158,19 @@ $color-editor-alpha-slider-props: (
4116
4158
  'padding-left': unset,
4117
4159
  'padding-right': unset,
4118
4160
  'padding-top': unset,
4119
- 'shadow': var(--memphis-elevation-light-offset-x-1) var(--memphis-elevation-light-offset-y-1) var(--memphis-elevation-light-blur-1) var(--memphis-elevation-light-spread-1) var(--memphis-elevation-light-color-1),
4120
- 'shadow-blur': var(--memphis-elevation-light-blur-1),
4121
- 'shadow-color': var(--memphis-elevation-light-color-1),
4122
- 'shadow-offset-x': var(--memphis-elevation-light-offset-x-1),
4123
- 'shadow-offset-y': var(--memphis-elevation-light-offset-y-1),
4124
- 'shadow-spread': var(--memphis-elevation-light-spread-1),
4161
+ 'shadow': var(--memphis-elevation-light-offset-x) var(--memphis-elevation-light-offset-y) var(--memphis-elevation-light-blur) var(--memphis-elevation-light-spread) var(--memphis-elevation-light-color),
4162
+ 'shadow-blur': var(--memphis-elevation-light-blur),
4163
+ 'shadow-color': var(--memphis-elevation-light-color),
4164
+ 'shadow-offset-x': var(--memphis-elevation-light-offset-x),
4165
+ 'shadow-offset-y': var(--memphis-elevation-light-offset-y),
4166
+ 'shadow-spread': var(--memphis-elevation-light-spread),
4125
4167
  'thumb-background-color': var(--memphis-scheme-surface),
4126
4168
  'thumb-border-color': var(--memphis-scheme-contrast),
4127
4169
  'thumb-border-radius': 0,
4128
4170
  'thumb-border-width': var(--memphis-layout-thickness),
4129
4171
  'thumb-shadow': var(--memphis-shadow-1),
4130
4172
  'thumb-size': calc(var(--memphis-layout-space) * 1.75),
4131
- 'transition-duration': var(--memphis-duration-short),
4173
+ 'transition-duration': var(--mosaik-duration-short),
4132
4174
  'transition-mode': ease,
4133
4175
  'transition-property': (box-shadow, border-color),
4134
4176
  'translate': none,
@@ -4167,18 +4209,18 @@ $color-editor-area-props: (
4167
4209
  'padding-left': unset,
4168
4210
  'padding-right': unset,
4169
4211
  'padding-top': unset,
4170
- 'shadow': var(--memphis-elevation-light-offset-x-1) var(--memphis-elevation-light-offset-y-1) var(--memphis-elevation-light-blur-1) var(--memphis-elevation-light-spread-1) var(--memphis-elevation-light-color-1),
4171
- 'shadow-blur': var(--memphis-elevation-light-blur-1),
4172
- 'shadow-color': var(--memphis-elevation-light-color-1),
4173
- 'shadow-offset-x': var(--memphis-elevation-light-offset-x-1),
4174
- 'shadow-offset-y': var(--memphis-elevation-light-offset-y-1),
4175
- 'shadow-spread': var(--memphis-elevation-light-spread-1),
4212
+ 'shadow': var(--memphis-elevation-light-offset-x) var(--memphis-elevation-light-offset-y) var(--memphis-elevation-light-blur) var(--memphis-elevation-light-spread) var(--memphis-elevation-light-color),
4213
+ 'shadow-blur': var(--memphis-elevation-light-blur),
4214
+ 'shadow-color': var(--memphis-elevation-light-color),
4215
+ 'shadow-offset-x': var(--memphis-elevation-light-offset-x),
4216
+ 'shadow-offset-y': var(--memphis-elevation-light-offset-y),
4217
+ 'shadow-spread': var(--memphis-elevation-light-spread),
4176
4218
  'thumb-border-color': var(--memphis-scheme-contrast),
4177
4219
  'thumb-border-radius': 0,
4178
4220
  'thumb-border-width': var(--memphis-layout-thickness),
4179
4221
  'thumb-shadow': var(--memphis-shadow-1),
4180
4222
  'thumb-size': calc(var(--memphis-layout-space) * 1.5),
4181
- 'transition-duration': var(--memphis-duration-short),
4223
+ 'transition-duration': var(--mosaik-duration-short),
4182
4224
  'transition-mode': ease,
4183
4225
  'transition-property': (box-shadow, border-color),
4184
4226
  'translate': none,
@@ -4217,19 +4259,19 @@ $color-editor-hue-slider-props: (
4217
4259
  'padding-left': unset,
4218
4260
  'padding-right': unset,
4219
4261
  'padding-top': unset,
4220
- 'shadow': var(--memphis-elevation-light-offset-x-1) var(--memphis-elevation-light-offset-y-1) var(--memphis-elevation-light-blur-1) var(--memphis-elevation-light-spread-1) var(--memphis-elevation-light-color-1),
4221
- 'shadow-blur': var(--memphis-elevation-light-blur-1),
4222
- 'shadow-color': var(--memphis-elevation-light-color-1),
4223
- 'shadow-offset-x': var(--memphis-elevation-light-offset-x-1),
4224
- 'shadow-offset-y': var(--memphis-elevation-light-offset-y-1),
4225
- 'shadow-spread': var(--memphis-elevation-light-spread-1),
4262
+ 'shadow': var(--memphis-elevation-light-offset-x) var(--memphis-elevation-light-offset-y) var(--memphis-elevation-light-blur) var(--memphis-elevation-light-spread) var(--memphis-elevation-light-color),
4263
+ 'shadow-blur': var(--memphis-elevation-light-blur),
4264
+ 'shadow-color': var(--memphis-elevation-light-color),
4265
+ 'shadow-offset-x': var(--memphis-elevation-light-offset-x),
4266
+ 'shadow-offset-y': var(--memphis-elevation-light-offset-y),
4267
+ 'shadow-spread': var(--memphis-elevation-light-spread),
4226
4268
  'thumb-background-color': var(--memphis-scheme-surface),
4227
4269
  'thumb-border-color': var(--memphis-scheme-contrast),
4228
4270
  'thumb-border-radius': 0,
4229
4271
  'thumb-border-width': var(--memphis-layout-thickness),
4230
4272
  'thumb-shadow': var(--memphis-shadow-1),
4231
4273
  'thumb-size': calc(var(--memphis-layout-space) * 1.75),
4232
- 'transition-duration': var(--memphis-duration-short),
4274
+ 'transition-duration': var(--mosaik-duration-short),
4233
4275
  'transition-mode': ease,
4234
4276
  'transition-property': (box-shadow, border-color),
4235
4277
  'translate': none,
@@ -4277,7 +4319,7 @@ $color-editor-inputs-props: (
4277
4319
  'shadow-offset-x': unset,
4278
4320
  'shadow-offset-y': unset,
4279
4321
  'shadow-spread': unset,
4280
- 'transition-duration': var(--memphis-duration-short),
4322
+ 'transition-duration': var(--mosaik-duration-short),
4281
4323
  'transition-mode': ease,
4282
4324
  'transition-property': (border-color, background-color),
4283
4325
  'translate': none,
@@ -4324,7 +4366,7 @@ $color-editor-palette-props: (
4324
4366
  'shadow-offset-x': unset,
4325
4367
  'shadow-offset-y': unset,
4326
4368
  'shadow-spread': unset,
4327
- 'transition-duration': var(--memphis-duration-short),
4369
+ 'transition-duration': var(--mosaik-duration-short),
4328
4370
  'transition-mode': ease,
4329
4371
  'transition-property': (transform, border-color),
4330
4372
  'translate': none,
@@ -4363,19 +4405,19 @@ $color-editor-shade-slider-props: (
4363
4405
  'padding-left': unset,
4364
4406
  'padding-right': unset,
4365
4407
  'padding-top': unset,
4366
- 'shadow': var(--memphis-elevation-light-offset-x-1) var(--memphis-elevation-light-offset-y-1) var(--memphis-elevation-light-blur-1) var(--memphis-elevation-light-spread-1) var(--memphis-elevation-light-color-1),
4367
- 'shadow-blur': var(--memphis-elevation-light-blur-1),
4368
- 'shadow-color': var(--memphis-elevation-light-color-1),
4369
- 'shadow-offset-x': var(--memphis-elevation-light-offset-x-1),
4370
- 'shadow-offset-y': var(--memphis-elevation-light-offset-y-1),
4371
- 'shadow-spread': var(--memphis-elevation-light-spread-1),
4408
+ 'shadow': var(--memphis-elevation-light-offset-x) var(--memphis-elevation-light-offset-y) var(--memphis-elevation-light-blur) var(--memphis-elevation-light-spread) var(--memphis-elevation-light-color),
4409
+ 'shadow-blur': var(--memphis-elevation-light-blur),
4410
+ 'shadow-color': var(--memphis-elevation-light-color),
4411
+ 'shadow-offset-x': var(--memphis-elevation-light-offset-x),
4412
+ 'shadow-offset-y': var(--memphis-elevation-light-offset-y),
4413
+ 'shadow-spread': var(--memphis-elevation-light-spread),
4372
4414
  'thumb-background-color': var(--memphis-scheme-surface),
4373
4415
  'thumb-border-color': var(--memphis-scheme-contrast),
4374
4416
  'thumb-border-radius': 0,
4375
4417
  'thumb-border-width': var(--memphis-layout-thickness),
4376
4418
  'thumb-shadow': var(--memphis-shadow-1),
4377
4419
  'thumb-size': calc(var(--memphis-layout-space) * 1.75),
4378
- 'transition-duration': var(--memphis-duration-short),
4420
+ 'transition-duration': var(--mosaik-duration-short),
4379
4421
  'transition-mode': ease,
4380
4422
  'transition-property': (box-shadow, border-color),
4381
4423
  'translate': none,
@@ -4417,7 +4459,7 @@ $color-editor-swatch-props: (
4417
4459
  'shadow-offset-x': unset,
4418
4460
  'shadow-offset-y': unset,
4419
4461
  'shadow-spread': unset,
4420
- 'transition-duration': var(--memphis-duration-short),
4462
+ 'transition-duration': var(--mosaik-duration-short),
4421
4463
  'transition-mode': ease,
4422
4464
  'transition-property': (opacity, background-color),
4423
4465
  'translate': none,
@@ -4631,6 +4673,11 @@ $color-thumb-props: (
4631
4673
  * ------------------------------------------------------------------------------
4632
4674
  */
4633
4675
  $combo-props: (
4676
+ 'background-color': unset,
4677
+ 'border-color': unset,
4678
+ 'border-radius': unset,
4679
+ 'border-style': solid,
4680
+ 'border-width': unset,
4634
4681
  'focus-ring-active-width': 8px,
4635
4682
  'focus-ring-color': var(--memphis-color-light-secondary-400),
4636
4683
  'focus-ring-inward-offset': 2px,
@@ -4654,7 +4701,7 @@ $combo-props: (
4654
4701
  'shadow-offset-x': unset,
4655
4702
  'shadow-offset-y': unset,
4656
4703
  'shadow-spread': unset,
4657
- 'transition-duration': var(--memphis-duration-short),
4704
+ 'transition-duration': var(--mosaik-duration-short),
4658
4705
  'transition-mode': ease,
4659
4706
  'transition-property': (transform),
4660
4707
  'translate': none
@@ -4699,7 +4746,7 @@ $combo-item-props: (
4699
4746
  'shadow-offset-x': unset,
4700
4747
  'shadow-offset-y': unset,
4701
4748
  'shadow-spread': unset,
4702
- 'transition-duration': var(--memphis-duration-short),
4749
+ 'transition-duration': var(--mosaik-duration-short),
4703
4750
  'transition-mode': ease,
4704
4751
  'transition-property': (background-color, color, border-color, box-shadow, transform),
4705
4752
  'translate': none
@@ -4735,7 +4782,7 @@ $comment-props: (
4735
4782
  'shadow-offset-x': unset,
4736
4783
  'shadow-offset-y': unset,
4737
4784
  'shadow-spread': unset,
4738
- 'transition-duration': var(--memphis-duration-short),
4785
+ 'transition-duration': var(--mosaik-duration-short),
4739
4786
  'transition-mode': ease,
4740
4787
  'transition-property': (color, background-color, border-color, opacity, transform),
4741
4788
  'translate': none
@@ -4780,12 +4827,12 @@ $compound-button-props: (
4780
4827
  'progress-ring-width': var(--memphis-layout-thickness),
4781
4828
  'ripple-color': unset,
4782
4829
  'ripple-duration': 0.20s,
4783
- 'shadow': var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0),
4784
- 'shadow-blur': var(--memphis-elevation-semilight-blur-0),
4785
- 'shadow-color': var(--memphis-elevation-semilight-color-0),
4786
- 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x-0),
4787
- 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y-0),
4788
- 'shadow-spread': var(--memphis-elevation-semilight-spread-0),
4830
+ 'shadow': var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color),
4831
+ 'shadow-blur': var(--memphis-elevation-semilight-blur),
4832
+ 'shadow-color': var(--memphis-elevation-semilight-color),
4833
+ 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x),
4834
+ 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y),
4835
+ 'shadow-spread': var(--memphis-elevation-semilight-spread),
4789
4836
  'transition-duration': .2s,
4790
4837
  'transition-mode': ease,
4791
4838
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
@@ -4940,6 +4987,10 @@ $date-box-props: (
4940
4987
  'border-radius': var(--memphis-layout-radius),
4941
4988
  'border-style': solid,
4942
4989
  'border-width': var(--memphis-layout-thickness),
4990
+ 'focus-ring-active-width': 8px,
4991
+ 'focus-ring-color': unset,
4992
+ 'focus-ring-inward-offset': 2px,
4993
+ 'focus-ring-outward-offset': 2px,
4943
4994
  'focus-ring-width': 0px,
4944
4995
  'font-family': var(--memphis-font-family),
4945
4996
  'font-letter-spacing': unset,
@@ -4955,12 +5006,12 @@ $date-box-props: (
4955
5006
  'padding-left': calc(var(--memphis-layout-space) * 1.5),
4956
5007
  'padding-right': calc(var(--memphis-layout-space) * 1.5),
4957
5008
  'padding-top': var(--memphis-layout-space),
4958
- 'shadow': var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0),
4959
- 'shadow-blur': var(--memphis-elevation-semilight-blur-0),
4960
- 'shadow-color': var(--memphis-elevation-semilight-color-0),
4961
- 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x-0),
4962
- 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y-0),
4963
- 'shadow-spread': var(--memphis-elevation-semilight-spread-0),
5009
+ 'shadow': var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color),
5010
+ 'shadow-blur': var(--memphis-elevation-semilight-blur),
5011
+ 'shadow-color': var(--memphis-elevation-semilight-color),
5012
+ 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x),
5013
+ 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y),
5014
+ 'shadow-spread': var(--memphis-elevation-semilight-spread),
4964
5015
  'transition-duration': .2s,
4965
5016
  'transition-mode': ease,
4966
5017
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
@@ -4984,6 +5035,10 @@ $date-time-box-props: (
4984
5035
  'calendar-border-radius': unset,
4985
5036
  'calendar-border-style': unset,
4986
5037
  'calendar-border-width': unset,
5038
+ 'focus-ring-active-width': 8px,
5039
+ 'focus-ring-color': unset,
5040
+ 'focus-ring-inward-offset': 2px,
5041
+ 'focus-ring-outward-offset': 2px,
4987
5042
  'font-family': unset,
4988
5043
  'font-letter-spacing': unset,
4989
5044
  'font-line-height': unset,
@@ -5161,12 +5216,12 @@ $dialog-props: (
5161
5216
  'padding-left': calc(var(--memphis-layout-space)*2),
5162
5217
  'padding-right': calc(var(--memphis-layout-space)*2),
5163
5218
  'padding-top': var(--memphis-layout-space),
5164
- 'shadow': var(--memphis-elevation-bold-offset-x-0) var(--memphis-elevation-bold-offset-y-0) var(--memphis-elevation-bold-blur-0) var(--memphis-elevation-bold-spread-0) var(--memphis-elevation-bold-color-0),
5165
- 'shadow-blur': var(--memphis-elevation-bold-blur-0),
5166
- 'shadow-color': var(--memphis-elevation-bold-color-0),
5167
- 'shadow-offset-x': var(--memphis-elevation-bold-offset-x-0),
5168
- 'shadow-offset-y': var(--memphis-elevation-bold-offset-y-0),
5169
- 'shadow-spread': var(--memphis-elevation-bold-spread-0),
5219
+ 'shadow': var(--memphis-elevation-bold-offset-x) var(--memphis-elevation-bold-offset-y) var(--memphis-elevation-bold-blur) var(--memphis-elevation-bold-spread) var(--memphis-elevation-bold-color),
5220
+ 'shadow-blur': var(--memphis-elevation-bold-blur),
5221
+ 'shadow-color': var(--memphis-elevation-bold-color),
5222
+ 'shadow-offset-x': var(--memphis-elevation-bold-offset-x),
5223
+ 'shadow-offset-y': var(--memphis-elevation-bold-offset-y),
5224
+ 'shadow-spread': var(--memphis-elevation-bold-spread),
5170
5225
  'transition-duration': .2s,
5171
5226
  'transition-mode': ease,
5172
5227
  'transition-property': (background-color, color, border-color, opacity, box-shadow, margin),
@@ -6016,6 +6071,10 @@ $duration-box-props: (
6016
6071
  'border-radius': unset,
6017
6072
  'border-style': unset,
6018
6073
  'border-width': unset,
6074
+ 'focus-ring-active-width': 8px,
6075
+ 'focus-ring-color': unset,
6076
+ 'focus-ring-inward-offset': 2px,
6077
+ 'focus-ring-outward-offset': 2px,
6019
6078
  'font-family': unset,
6020
6079
  'font-letter-spacing': unset,
6021
6080
  'font-line-height': unset,
@@ -6525,12 +6584,12 @@ $expander-props: (
6525
6584
  'padding-top': var(--memphis-layout-space),
6526
6585
  'ripple-color': unset,
6527
6586
  'ripple-duration': 0.20s,
6528
- 'shadow': var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0),
6529
- 'shadow-blur': var(--memphis-elevation-semilight-blur-0),
6530
- 'shadow-color': var(--memphis-elevation-semilight-color-0),
6531
- 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x-0),
6532
- 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y-0),
6533
- 'shadow-spread': var(--memphis-elevation-semilight-spread-0),
6587
+ 'shadow': var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color),
6588
+ 'shadow-blur': var(--memphis-elevation-semilight-blur),
6589
+ 'shadow-color': var(--memphis-elevation-semilight-color),
6590
+ 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x),
6591
+ 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y),
6592
+ 'shadow-spread': var(--memphis-elevation-semilight-spread),
6534
6593
  'transition-duration': .2s,
6535
6594
  'transition-mode': ease,
6536
6595
  'transition-property': (background-color, color, border-color, opacity, box-shadow, transform, margin),
@@ -6662,6 +6721,10 @@ $file-box-props: (
6662
6721
  'border-radius': var(--memphis-layout-radius),
6663
6722
  'border-style': solid,
6664
6723
  'border-width': var(--memphis-layout-thickness),
6724
+ 'focus-ring-active-width': 8px,
6725
+ 'focus-ring-color': unset,
6726
+ 'focus-ring-inward-offset': 2px,
6727
+ 'focus-ring-outward-offset': 2px,
6665
6728
  'focus-ring-width': 0px,
6666
6729
  'font-family': var(--memphis-font-family),
6667
6730
  'font-letter-spacing': unset,
@@ -6677,12 +6740,12 @@ $file-box-props: (
6677
6740
  'padding-left': calc(var(--memphis-layout-space) * 1.5),
6678
6741
  'padding-right': calc(var(--memphis-layout-space) * 1.5),
6679
6742
  'padding-top': var(--memphis-layout-space),
6680
- 'shadow': var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0),
6681
- 'shadow-blur': var(--memphis-elevation-semilight-blur-0),
6682
- 'shadow-color': var(--memphis-elevation-semilight-color-0),
6683
- 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x-0),
6684
- 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y-0),
6685
- 'shadow-spread': var(--memphis-elevation-semilight-spread-0),
6743
+ 'shadow': var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color),
6744
+ 'shadow-blur': var(--memphis-elevation-semilight-blur),
6745
+ 'shadow-color': var(--memphis-elevation-semilight-color),
6746
+ 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x),
6747
+ 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y),
6748
+ 'shadow-spread': var(--memphis-elevation-semilight-spread),
6686
6749
  'transition-duration': .2s,
6687
6750
  'transition-mode': ease,
6688
6751
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
@@ -6919,12 +6982,12 @@ $floating-action-button-props: (
6919
6982
  'progress-ring-width': var(--memphis-layout-thickness),
6920
6983
  'ripple-color': unset,
6921
6984
  'ripple-duration': 0.20s,
6922
- 'shadow': var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0),
6923
- 'shadow-blur': var(--memphis-elevation-semilight-blur-0),
6924
- 'shadow-color': var(--memphis-elevation-semilight-color-0),
6925
- 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x-0),
6926
- 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y-0),
6927
- 'shadow-spread': var(--memphis-elevation-semilight-spread-0),
6985
+ 'shadow': var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color),
6986
+ 'shadow-blur': var(--memphis-elevation-semilight-blur),
6987
+ 'shadow-color': var(--memphis-elevation-semilight-color),
6988
+ 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x),
6989
+ 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y),
6990
+ 'shadow-spread': var(--memphis-elevation-semilight-spread),
6928
6991
  'transition-duration': var(--memphis-layout-transition),
6929
6992
  'transition-mode': ease,
6930
6993
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
@@ -7164,13 +7227,13 @@ $flow-board-column-item-props: (
7164
7227
  'padding-right': unset,
7165
7228
  'padding-top': unset,
7166
7229
  'pinned-background-color': var(--memphis-color-light-primary-50),
7167
- 'shadow': var(--memphis-elevation-light-offset-x-1) var(--memphis-elevation-light-offset-y-1) var(--memphis-elevation-light-blur-1) var(--memphis-elevation-light-spread-1) var(--memphis-elevation-light-color-1),
7168
- 'shadow-blur': var(--memphis-elevation-light-blur-1),
7169
- 'shadow-color': var(--memphis-elevation-light-color-1),
7170
- 'shadow-offset-x': var(--memphis-elevation-light-offset-x-1),
7171
- 'shadow-offset-y': var(--memphis-elevation-light-offset-y-1),
7172
- 'shadow-spread': var(--memphis-elevation-light-spread-1),
7173
- 'transition-duration': var(--memphis-duration-medium),
7230
+ 'shadow': var(--memphis-elevation-light-offset-x) var(--memphis-elevation-light-offset-y) var(--memphis-elevation-light-blur) var(--memphis-elevation-light-spread) var(--memphis-elevation-light-color),
7231
+ 'shadow-blur': var(--memphis-elevation-light-blur),
7232
+ 'shadow-color': var(--memphis-elevation-light-color),
7233
+ 'shadow-offset-x': var(--memphis-elevation-light-offset-x),
7234
+ 'shadow-offset-y': var(--memphis-elevation-light-offset-y),
7235
+ 'shadow-spread': var(--memphis-elevation-light-spread),
7236
+ 'transition-duration': var(--mosaik-duration-medium),
7174
7237
  'transition-mode': ease,
7175
7238
  'transition-property': (background-color, box-shadow, transform),
7176
7239
  'translate': none
@@ -7323,7 +7386,7 @@ $font-editor-props: (
7323
7386
  'shadow-offset-x': unset,
7324
7387
  'shadow-offset-y': unset,
7325
7388
  'shadow-spread': unset,
7326
- 'transition-duration': var(--memphis-duration-short),
7389
+ 'transition-duration': var(--mosaik-duration-short),
7327
7390
  'transition-mode': ease,
7328
7391
  'transition-property': unset,
7329
7392
  'translate': none,
@@ -7537,7 +7600,7 @@ $ghost-props: (
7537
7600
  'shadow-offset-x': unset,
7538
7601
  'shadow-offset-y': unset,
7539
7602
  'shadow-spread': unset,
7540
- 'transition-duration': var(--memphis-duration-short),
7603
+ 'transition-duration': var(--mosaik-duration-short),
7541
7604
  'transition-mode': ease,
7542
7605
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
7543
7606
  'translate': none
@@ -7984,12 +8047,12 @@ $kbd-props: (
7984
8047
  'padding-left': unset,
7985
8048
  'padding-right': unset,
7986
8049
  'padding-top': unset,
7987
- 'shadow': var(--memphis-elevation-light-offset-x-1) var(--memphis-elevation-light-offset-y-1) var(--memphis-elevation-light-blur-1) var(--memphis-elevation-light-spread-1) var(--memphis-elevation-light-color-1),
7988
- 'shadow-blur': var(--memphis-elevation-light-blur-1),
7989
- 'shadow-color': var(--memphis-elevation-light-color-1),
7990
- 'shadow-offset-x': var(--memphis-elevation-light-offset-x-1),
7991
- 'shadow-offset-y': var(--memphis-elevation-light-offset-y-1),
7992
- 'shadow-spread': var(--memphis-elevation-light-spread-1),
8050
+ 'shadow': var(--memphis-elevation-light-offset-x) var(--memphis-elevation-light-offset-y) var(--memphis-elevation-light-blur) var(--memphis-elevation-light-spread) var(--memphis-elevation-light-color),
8051
+ 'shadow-blur': var(--memphis-elevation-light-blur),
8052
+ 'shadow-color': var(--memphis-elevation-light-color),
8053
+ 'shadow-offset-x': var(--memphis-elevation-light-offset-x),
8054
+ 'shadow-offset-y': var(--memphis-elevation-light-offset-y),
8055
+ 'shadow-spread': var(--memphis-elevation-light-spread),
7993
8056
  'transition-duration': unset,
7994
8057
  'transition-mode': unset,
7995
8058
  'transition-property': unset,
@@ -8214,7 +8277,7 @@ $listing-props: (
8214
8277
  'shadow-offset-x': 0px,
8215
8278
  'shadow-offset-y': 0px,
8216
8279
  'shadow-spread': 0px,
8217
- 'transition-duration': var(--memphis-duration-short),
8280
+ 'transition-duration': var(--mosaik-duration-short),
8218
8281
  'transition-mode': ease,
8219
8282
  'transition-property': (color, opacity),
8220
8283
  'translate': none
@@ -8249,7 +8312,7 @@ $listing-item-props: (
8249
8312
  'shadow-offset-x': 0px,
8250
8313
  'shadow-offset-y': 0px,
8251
8314
  'shadow-spread': 0px,
8252
- 'transition-duration': var(--memphis-duration-short),
8315
+ 'transition-duration': var(--mosaik-duration-short),
8253
8316
  'transition-mode': ease,
8254
8317
  'transition-property': (color, opacity),
8255
8318
  'translate': none
@@ -8283,12 +8346,12 @@ $listing-item-marker-props: (
8283
8346
  'padding-left': var(--memphis-layout-space),
8284
8347
  'padding-right': var(--memphis-layout-space),
8285
8348
  'padding-top': var(--memphis-layout-space),
8286
- 'shadow': var(--memphis-elevation-light-offset-x-0) var(--memphis-elevation-light-offset-y-0) var(--memphis-elevation-light-blur-0) var(--memphis-elevation-light-spread-0) var(--memphis-elevation-light-color-0),
8287
- 'shadow-blur': var(--memphis-elevation-light-blur-0),
8288
- 'shadow-color': var(--memphis-elevation-light-color-0),
8289
- 'shadow-offset-x': var(--memphis-elevation-light-offset-x-0),
8290
- 'shadow-offset-y': var(--memphis-elevation-light-offset-y-0),
8291
- 'shadow-spread': var(--memphis-elevation-light-spread-0),
8349
+ 'shadow': var(--memphis-elevation-light-offset-x) var(--memphis-elevation-light-offset-y) var(--memphis-elevation-light-blur) var(--memphis-elevation-light-spread) var(--memphis-elevation-light-color),
8350
+ 'shadow-blur': var(--memphis-elevation-light-blur),
8351
+ 'shadow-color': var(--memphis-elevation-light-color),
8352
+ 'shadow-offset-x': var(--memphis-elevation-light-offset-x),
8353
+ 'shadow-offset-y': var(--memphis-elevation-light-offset-y),
8354
+ 'shadow-spread': var(--memphis-elevation-light-spread),
8292
8355
  'transition-duration': .2s,
8293
8356
  'transition-mode': ease,
8294
8357
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
@@ -8601,12 +8664,12 @@ $message-props: (
8601
8664
  'padding-left': calc(var(--memphis-layout-space) * 2),
8602
8665
  'padding-right': calc(var(--memphis-layout-space) * 2),
8603
8666
  'padding-top': calc(var(--memphis-layout-space) * 2),
8604
- 'shadow': var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0),
8605
- 'shadow-blur': var(--memphis-elevation-semilight-blur-0),
8606
- 'shadow-color': var(--memphis-elevation-semilight-color-0),
8607
- 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x-0),
8608
- 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y-0),
8609
- 'shadow-spread': var(--memphis-elevation-semilight-spread-0),
8667
+ 'shadow': var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color),
8668
+ 'shadow-blur': var(--memphis-elevation-semilight-blur),
8669
+ 'shadow-color': var(--memphis-elevation-semilight-color),
8670
+ 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x),
8671
+ 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y),
8672
+ 'shadow-spread': var(--memphis-elevation-semilight-spread),
8610
8673
  'transition-duration': .2s,
8611
8674
  'transition-mode': ease,
8612
8675
  'transition-property': (all),
@@ -8649,12 +8712,12 @@ $message-box-props: (
8649
8712
  'padding-left': calc(var(--memphis-layout-space)*2),
8650
8713
  'padding-right': calc(var(--memphis-layout-space)*2),
8651
8714
  'padding-top': var(--memphis-layout-space),
8652
- 'shadow': var(--memphis-elevation-bold-offset-x-0) var(--memphis-elevation-bold-offset-y-0) var(--memphis-elevation-bold-blur-0) var(--memphis-elevation-bold-spread-0) var(--memphis-elevation-bold-color-0),
8653
- 'shadow-blur': var(--memphis-elevation-bold-blur-0),
8654
- 'shadow-color': var(--memphis-elevation-bold-color-0),
8655
- 'shadow-offset-x': var(--memphis-elevation-bold-offset-x-0),
8656
- 'shadow-offset-y': var(--memphis-elevation-bold-offset-y-0),
8657
- 'shadow-spread': var(--memphis-elevation-bold-spread-0),
8715
+ 'shadow': var(--memphis-elevation-bold-offset-x) var(--memphis-elevation-bold-offset-y) var(--memphis-elevation-bold-blur) var(--memphis-elevation-bold-spread) var(--memphis-elevation-bold-color),
8716
+ 'shadow-blur': var(--memphis-elevation-bold-blur),
8717
+ 'shadow-color': var(--memphis-elevation-bold-color),
8718
+ 'shadow-offset-x': var(--memphis-elevation-bold-offset-x),
8719
+ 'shadow-offset-y': var(--memphis-elevation-bold-offset-y),
8720
+ 'shadow-spread': var(--memphis-elevation-bold-spread),
8658
8721
  'sub-header-font-family': var(--memphis-font-family),
8659
8722
  'sub-header-font-letter-spacing': var(--memphis-typography-subtitle2-letter-spacing),
8660
8723
  'sub-header-font-line-height': var(--memphis-typography-subtitle2-line-height),
@@ -8747,7 +8810,7 @@ $meter-ring-props: (
8747
8810
  'shadow-offset-y': unset,
8748
8811
  'shadow-spread': unset,
8749
8812
  'thickness': 6px,
8750
- 'transition-duration': var(--memphis-duration-short),
8813
+ 'transition-duration': var(--mosaik-duration-short),
8751
8814
  'transition-mode': ease,
8752
8815
  'transition-property': (background-color, color, border-color, opacity, box-shadow, stroke-dashoffset),
8753
8816
  'translate': none
@@ -8801,6 +8864,9 @@ $number-box-props: (
8801
8864
  'border-radius': unset,
8802
8865
  'border-style': unset,
8803
8866
  'border-width': unset,
8867
+ 'focus-ring-active-width': 8px,
8868
+ 'focus-ring-color': unset,
8869
+ 'focus-ring-inward-offset': 2px,
8804
8870
  'focus-ring-outward-offset': unset,
8805
8871
  'font-family': unset,
8806
8872
  'font-letter-spacing': unset,
@@ -9153,6 +9219,10 @@ $password-box-props: (
9153
9219
  'border-radius': var(--memphis-layout-radius),
9154
9220
  'border-style': solid,
9155
9221
  'border-width': var(--memphis-layout-thickness),
9222
+ 'focus-ring-active-width': 8px,
9223
+ 'focus-ring-color': unset,
9224
+ 'focus-ring-inward-offset': 2px,
9225
+ 'focus-ring-outward-offset': 2px,
9156
9226
  'focus-ring-width': 0px,
9157
9227
  'font-family': var(--memphis-font-family),
9158
9228
  'font-letter-spacing': unset,
@@ -9168,12 +9238,12 @@ $password-box-props: (
9168
9238
  'padding-left': calc(var(--memphis-layout-space) * 1.5),
9169
9239
  'padding-right': calc(var(--memphis-layout-space) * 1.5),
9170
9240
  'padding-top': var(--memphis-layout-space),
9171
- 'shadow': var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0),
9172
- 'shadow-blur': var(--memphis-elevation-semilight-blur-0),
9173
- 'shadow-color': var(--memphis-elevation-semilight-color-0),
9174
- 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x-0),
9175
- 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y-0),
9176
- 'shadow-spread': var(--memphis-elevation-semilight-spread-0),
9241
+ 'shadow': var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color),
9242
+ 'shadow-blur': var(--memphis-elevation-semilight-blur),
9243
+ 'shadow-color': var(--memphis-elevation-semilight-color),
9244
+ 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x),
9245
+ 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y),
9246
+ 'shadow-spread': var(--memphis-elevation-semilight-spread),
9177
9247
  'transition-duration': .2s,
9178
9248
  'transition-mode': ease,
9179
9249
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
@@ -9301,6 +9371,10 @@ $pin-box-props: (
9301
9371
  'border-radius': var(--memphis-layout-radius),
9302
9372
  'border-style': solid,
9303
9373
  'border-width': var(--memphis-layout-thickness),
9374
+ 'focus-ring-active-width': 8px,
9375
+ 'focus-ring-color': unset,
9376
+ 'focus-ring-inward-offset': 2px,
9377
+ 'focus-ring-outward-offset': 2px,
9304
9378
  'font-family': var(--memphis-font-family),
9305
9379
  'font-letter-spacing': unset,
9306
9380
  'font-line-height': unset,
@@ -9315,12 +9389,12 @@ $pin-box-props: (
9315
9389
  'padding-left': calc(var(--memphis-layout-space) * 1.5),
9316
9390
  'padding-right': calc(var(--memphis-layout-space) * 1.5),
9317
9391
  'padding-top': var(--memphis-layout-space),
9318
- 'shadow': var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0),
9319
- 'shadow-blur': var(--memphis-elevation-semilight-blur-0),
9320
- 'shadow-color': var(--memphis-elevation-semilight-color-0),
9321
- 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x-0),
9322
- 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y-0),
9323
- 'shadow-spread': var(--memphis-elevation-semilight-spread-0),
9392
+ 'shadow': var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color),
9393
+ 'shadow-blur': var(--memphis-elevation-semilight-blur),
9394
+ 'shadow-color': var(--memphis-elevation-semilight-color),
9395
+ 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x),
9396
+ 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y),
9397
+ 'shadow-spread': var(--memphis-elevation-semilight-spread),
9324
9398
  'transition-duration': .2s,
9325
9399
  'transition-mode': ease,
9326
9400
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
@@ -9355,12 +9429,12 @@ $pip-props: (
9355
9429
  'padding-left': var(--memphis-layout-space),
9356
9430
  'padding-right': var(--memphis-layout-space),
9357
9431
  'padding-top': var(--memphis-layout-space),
9358
- 'shadow': var(--memphis-elevation-light-offset-x-0) var(--memphis-elevation-light-offset-y-0) var(--memphis-elevation-light-blur-0) var(--memphis-elevation-light-spread-0) var(--memphis-elevation-light-color-0),
9359
- 'shadow-blur': var(--memphis-elevation-light-blur-0),
9360
- 'shadow-color': var(--memphis-elevation-light-color-0),
9361
- 'shadow-offset-x': var(--memphis-elevation-light-offset-x-0),
9362
- 'shadow-offset-y': var(--memphis-elevation-light-offset-y-0),
9363
- 'shadow-spread': var(--memphis-elevation-light-spread-0),
9432
+ 'shadow': var(--memphis-elevation-light-offset-x) var(--memphis-elevation-light-offset-y) var(--memphis-elevation-light-blur) var(--memphis-elevation-light-spread) var(--memphis-elevation-light-color),
9433
+ 'shadow-blur': var(--memphis-elevation-light-blur),
9434
+ 'shadow-color': var(--memphis-elevation-light-color),
9435
+ 'shadow-offset-x': var(--memphis-elevation-light-offset-x),
9436
+ 'shadow-offset-y': var(--memphis-elevation-light-offset-y),
9437
+ 'shadow-spread': var(--memphis-elevation-light-spread),
9364
9438
  'transition-duration': .2s,
9365
9439
  'transition-mode': ease,
9366
9440
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
@@ -9399,7 +9473,7 @@ $placeholder-props: (
9399
9473
  'shadow-offset-x': unset,
9400
9474
  'shadow-offset-y': unset,
9401
9475
  'shadow-spread': unset,
9402
- 'transition-duration': var(--memphis-duration-short),
9476
+ 'transition-duration': var(--mosaik-duration-short),
9403
9477
  'transition-mode': ease,
9404
9478
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
9405
9479
  'translate': unset
@@ -9432,13 +9506,13 @@ $popup-props: (
9432
9506
  'padding-left': calc(var(--memphis-layout-space) * 1.8),
9433
9507
  'padding-right': calc(var(--memphis-layout-space) * 1.8),
9434
9508
  'padding-top': calc(var(--memphis-layout-space) * 1.2),
9435
- 'shadow': var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0),
9436
- 'shadow-blur': var(--memphis-elevation-semilight-blur-0),
9437
- 'shadow-color': var(--memphis-elevation-semilight-color-0),
9438
- 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x-0),
9439
- 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y-0),
9440
- 'shadow-spread': var(--memphis-elevation-semilight-spread-0),
9441
- 'transition-duration': var(--memphis-duration-short),
9509
+ 'shadow': var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color),
9510
+ 'shadow-blur': var(--memphis-elevation-semilight-blur),
9511
+ 'shadow-color': var(--memphis-elevation-semilight-color),
9512
+ 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x),
9513
+ 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y),
9514
+ 'shadow-spread': var(--memphis-elevation-semilight-spread),
9515
+ 'transition-duration': var(--mosaik-duration-short),
9442
9516
  'transition-mode': ease,
9443
9517
  'transition-property': (opacity, transform, background-color, color, border-color, box-shadow),
9444
9518
  'translate': none
@@ -9668,7 +9742,7 @@ $progress-ring-props: (
9668
9742
  'shadow-offset-y': unset,
9669
9743
  'shadow-spread': unset,
9670
9744
  'thickness': 6px,
9671
- 'transition-duration': var(--memphis-duration-short),
9745
+ 'transition-duration': var(--mosaik-duration-short),
9672
9746
  'transition-mode': ease,
9673
9747
  'transition-property': (stroke, stroke-dashoffset, stroke-dasharray, transform),
9674
9748
  'translate': none
@@ -9747,7 +9821,7 @@ $radio-props: (
9747
9821
  'shadow-offset-x': unset,
9748
9822
  'shadow-offset-y': unset,
9749
9823
  'shadow-spread': unset,
9750
- 'transition-duration': var(--memphis-duration-short),
9824
+ 'transition-duration': var(--mosaik-duration-short),
9751
9825
  'transition-mode': ease,
9752
9826
  'transition-property': (background-color, color, border-color, box-shadow, transform),
9753
9827
  'translate': none
@@ -9786,7 +9860,7 @@ $radio-group-props: (
9786
9860
  'shadow-offset-x': unset,
9787
9861
  'shadow-offset-y': unset,
9788
9862
  'shadow-spread': unset,
9789
- 'transition-duration': var(--memphis-duration-short),
9863
+ 'transition-duration': var(--mosaik-duration-short),
9790
9864
  'transition-mode': ease,
9791
9865
  'transition-property': (background-color, color, border-color, box-shadow, transform),
9792
9866
  'translate': none
@@ -10116,6 +10190,9 @@ $rich-text-box-props: (
10116
10190
  'border-radius': unset,
10117
10191
  'border-style': unset,
10118
10192
  'border-width': unset,
10193
+ 'focus-ring-active-width': 8px,
10194
+ 'focus-ring-color': unset,
10195
+ 'focus-ring-inward-offset': 2px,
10119
10196
  'focus-ring-outward-offset': unset,
10120
10197
  'font-family': unset,
10121
10198
  'font-letter-spacing': unset,
@@ -10464,7 +10541,7 @@ $scheduler-props: (
10464
10541
  'shadow-spread': unset,
10465
10542
  'timescale-width': 80px,
10466
10543
  'today-background-color': var(--memphis-scheme-semi-transparent),
10467
- 'transition-duration': var(--memphis-duration-short),
10544
+ 'transition-duration': var(--mosaik-duration-short),
10468
10545
  'transition-mode': ease,
10469
10546
  'transition-property': (background-color, color, border-color),
10470
10547
  'translate': none
@@ -10620,12 +10697,12 @@ $scheduler-event-props: (
10620
10697
  'padding-top': unset,
10621
10698
  'ripple-color': unset,
10622
10699
  'ripple-duration': 0.20s,
10623
- 'shadow': var(--memphis-elevation-light-offset-x-1) var(--memphis-elevation-light-offset-y-1) var(--memphis-elevation-light-blur-1) var(--memphis-elevation-light-spread-1) var(--memphis-elevation-light-color-1),
10624
- 'shadow-blur': var(--memphis-elevation-light-blur-1),
10625
- 'shadow-color': var(--memphis-elevation-light-color-1),
10626
- 'shadow-offset-x': var(--memphis-elevation-light-offset-x-1),
10627
- 'shadow-offset-y': var(--memphis-elevation-light-offset-y-1),
10628
- 'shadow-spread': var(--memphis-elevation-light-spread-1),
10700
+ 'shadow': var(--memphis-elevation-light-offset-x) var(--memphis-elevation-light-offset-y) var(--memphis-elevation-light-blur) var(--memphis-elevation-light-spread) var(--memphis-elevation-light-color),
10701
+ 'shadow-blur': var(--memphis-elevation-light-blur),
10702
+ 'shadow-color': var(--memphis-elevation-light-color),
10703
+ 'shadow-offset-x': var(--memphis-elevation-light-offset-x),
10704
+ 'shadow-offset-y': var(--memphis-elevation-light-offset-y),
10705
+ 'shadow-spread': var(--memphis-elevation-light-spread),
10629
10706
  'transition-duration': var(--memphis-motion-duration),
10630
10707
  'transition-mode': var(--memphis-motion-mode),
10631
10708
  'transition-property': (background-color, box-shadow, transform),
@@ -10731,7 +10808,7 @@ $scheduler-now-indicator-props: (
10731
10808
  'shadow-offset-x': unset,
10732
10809
  'shadow-offset-y': unset,
10733
10810
  'shadow-spread': unset,
10734
- 'transition-duration': var(--memphis-duration-short),
10811
+ 'transition-duration': var(--mosaik-duration-short),
10735
10812
  'transition-mode': ease,
10736
10813
  'transition-property': (top),
10737
10814
  'translate': none
@@ -10887,7 +10964,7 @@ $scroll-props: (
10887
10964
  'shadow-offset-x': unset,
10888
10965
  'shadow-offset-y': unset,
10889
10966
  'shadow-spread': unset,
10890
- 'transition-duration': var(--memphis-duration-medium),
10967
+ 'transition-duration': var(--mosaik-duration-medium),
10891
10968
  'transition-mode': ease,
10892
10969
  'transition-property': (background-color, box-shadow, transform),
10893
10970
  'translate': none
@@ -11001,12 +11078,12 @@ $search-box-props: (
11001
11078
  'padding-left': calc(var(--memphis-layout-space) * 1.5),
11002
11079
  'padding-right': calc(var(--memphis-layout-space) * 1.5),
11003
11080
  'padding-top': var(--memphis-layout-space),
11004
- 'shadow': var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0),
11005
- 'shadow-blur': var(--memphis-elevation-semilight-blur-0),
11006
- 'shadow-color': var(--memphis-elevation-semilight-color-0),
11007
- 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x-0),
11008
- 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y-0),
11009
- 'shadow-spread': var(--memphis-elevation-semilight-spread-0),
11081
+ 'shadow': var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color),
11082
+ 'shadow-blur': var(--memphis-elevation-semilight-blur),
11083
+ 'shadow-color': var(--memphis-elevation-semilight-color),
11084
+ 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x),
11085
+ 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y),
11086
+ 'shadow-spread': var(--memphis-elevation-semilight-spread),
11010
11087
  'transition-duration': .2s,
11011
11088
  'transition-mode': ease,
11012
11089
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
@@ -11041,12 +11118,12 @@ $segment-props: (
11041
11118
  'padding-left': var(--memphis-layout-space),
11042
11119
  'padding-right': var(--memphis-layout-space),
11043
11120
  'padding-top': var(--memphis-layout-space),
11044
- 'shadow': var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0),
11045
- 'shadow-blur': var(--memphis-elevation-semilight-blur-0),
11046
- 'shadow-color': var(--memphis-elevation-semilight-color-0),
11047
- 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x-0),
11048
- 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y-0),
11049
- 'shadow-spread': var(--memphis-elevation-semilight-spread-0),
11121
+ 'shadow': var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color),
11122
+ 'shadow-blur': var(--memphis-elevation-semilight-blur),
11123
+ 'shadow-color': var(--memphis-elevation-semilight-color),
11124
+ 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x),
11125
+ 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y),
11126
+ 'shadow-spread': var(--memphis-elevation-semilight-spread),
11050
11127
  'transition-duration': var(--memphis-layout-transition),
11051
11128
  'transition-mode': ease,
11052
11129
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
@@ -11140,7 +11217,7 @@ $select-props: (
11140
11217
  'shadow-offset-x': unset,
11141
11218
  'shadow-offset-y': unset,
11142
11219
  'shadow-spread': unset,
11143
- 'transition-duration': var(--memphis-duration-short),
11220
+ 'transition-duration': var(--mosaik-duration-short),
11144
11221
  'transition-mode': ease,
11145
11222
  'transition-property': (background-color, color, border-color, box-shadow, transform),
11146
11223
  'translate': none
@@ -11185,7 +11262,7 @@ $select-item-props: (
11185
11262
  'shadow-offset-x': unset,
11186
11263
  'shadow-offset-y': unset,
11187
11264
  'shadow-spread': unset,
11188
- 'transition-duration': var(--memphis-duration-short),
11265
+ 'transition-duration': var(--mosaik-duration-short),
11189
11266
  'transition-mode': ease,
11190
11267
  'transition-property': (background-color, color, border-color, box-shadow, transform),
11191
11268
  'translate': none
@@ -11272,7 +11349,7 @@ $sheet-props: (
11272
11349
  'shadow-offset-x': unset,
11273
11350
  'shadow-offset-y': unset,
11274
11351
  'shadow-spread': unset,
11275
- 'transition-duration': var(--memphis-duration-short),
11352
+ 'transition-duration': var(--mosaik-duration-short),
11276
11353
  'transition-mode': ease,
11277
11354
  'transition-property': (transform, opacity, visibility),
11278
11355
  'translate': none,
@@ -11464,6 +11541,10 @@ $signature-pad-props: (
11464
11541
  'border-radius': unset,
11465
11542
  'border-style': unset,
11466
11543
  'border-width': unset,
11544
+ 'focus-ring-active-width': 8px,
11545
+ 'focus-ring-color': unset,
11546
+ 'focus-ring-inward-offset': 2px,
11547
+ 'focus-ring-outward-offset': 2px,
11467
11548
  'font-family': unset,
11468
11549
  'font-letter-spacing': unset,
11469
11550
  'font-line-height': unset,
@@ -11593,11 +11674,11 @@ $slider-props: (
11593
11674
  'tooltip-padding-right': var(--memphis-layout-space),
11594
11675
  'tooltip-padding-top': var(--memphis-layout-space),
11595
11676
  'tooltip-shadow': var(--memphis-elevation-semilight),
11596
- 'tooltip-transition-duration': var(--memphis-duration-short),
11677
+ 'tooltip-transition-duration': var(--mosaik-duration-short),
11597
11678
  'tooltip-transition-mode': ease,
11598
11679
  'tooltip-transition-property': (background-color, color, border-color, box-shadow, transform),
11599
11680
  'track-size': calc(var(--memphis-layout-thickness) * 1.5),
11600
- 'transition-duration': var(--memphis-duration-short),
11681
+ 'transition-duration': var(--mosaik-duration-short),
11601
11682
  'transition-mode': ease,
11602
11683
  'transition-property': (background-color, color, border-color, box-shadow, transform),
11603
11684
  'translate': none
@@ -11630,7 +11711,7 @@ $slider2-props: (
11630
11711
  'shadow-offset-x': unset,
11631
11712
  'shadow-offset-y': unset,
11632
11713
  'shadow-spread': unset,
11633
- 'transition-duration': var(--memphis-duration-short),
11714
+ 'transition-duration': var(--mosaik-duration-short),
11634
11715
  'transition-mode': ease,
11635
11716
  'transition-property': (background-color, color, border-color, box-shadow, transform),
11636
11717
  'translate': none
@@ -11664,7 +11745,7 @@ $slider2thumb-props: (
11664
11745
  'shadow-offset-y': unset,
11665
11746
  'shadow-spread': unset,
11666
11747
  'size': calc(var(--memphis-layout-space) * 2.4),
11667
- 'transition-duration': var(--memphis-duration-short),
11748
+ 'transition-duration': var(--mosaik-duration-short),
11668
11749
  'transition-mode': ease,
11669
11750
  'transition-property': (background-color, color, border-color, box-shadow, transform),
11670
11751
  'translate': none
@@ -11738,7 +11819,7 @@ $split-props: (
11738
11819
  'thumb-border-color': var(--memphis-scheme-highlight),
11739
11820
  'thumb-border-radius': var(--memphis-layout-radius),
11740
11821
  'thumb-foreground-color': var(--memphis-scheme-foreground),
11741
- 'transition-duration': var(--memphis-duration-short),
11822
+ 'transition-duration': var(--mosaik-duration-short),
11742
11823
  'transition-mode': ease,
11743
11824
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
11744
11825
  'translate': none
@@ -12090,12 +12171,12 @@ $tab-props: (
12090
12171
  'padding-right': calc(var(--memphis-layout-space) * 2),
12091
12172
  'padding-top': var(--memphis-layout-space),
12092
12173
  'panel-background-color': var(--tab-background-color),
12093
- 'shadow': var(--memphis-elevation-bold-offset-x-0) var(--memphis-elevation-bold-offset-y-0) var(--memphis-elevation-bold-blur-0) var(--memphis-elevation-bold-spread-0) var(--memphis-elevation-bold-color-0),
12094
- 'shadow-blur': var(--memphis-elevation-bold-blur-0),
12095
- 'shadow-color': var(--memphis-elevation-bold-color-0),
12096
- 'shadow-offset-x': var(--memphis-elevation-bold-offset-x-0),
12097
- 'shadow-offset-y': var(--memphis-elevation-bold-offset-y-0),
12098
- 'shadow-spread': var(--memphis-elevation-bold-spread-0),
12174
+ 'shadow': var(--memphis-elevation-bold-offset-x) var(--memphis-elevation-bold-offset-y) var(--memphis-elevation-bold-blur) var(--memphis-elevation-bold-spread) var(--memphis-elevation-bold-color),
12175
+ 'shadow-blur': var(--memphis-elevation-bold-blur),
12176
+ 'shadow-color': var(--memphis-elevation-bold-color),
12177
+ 'shadow-offset-x': var(--memphis-elevation-bold-offset-x),
12178
+ 'shadow-offset-y': var(--memphis-elevation-bold-offset-y),
12179
+ 'shadow-spread': var(--memphis-elevation-bold-spread),
12099
12180
  'strip-background-color': var(--memphis-scheme-transparent),
12100
12181
  'strip-padding-bottom': 0,
12101
12182
  'strip-padding-left': 0,
@@ -12459,7 +12540,7 @@ $table-column-editor-props: (
12459
12540
  'padding-left': var(--memphis-layout-space),
12460
12541
  'padding-right': var(--memphis-layout-space),
12461
12542
  'padding-top': var(--memphis-layout-space),
12462
- 'transition-duration': var(--memphis-duration-short),
12543
+ 'transition-duration': var(--mosaik-duration-short),
12463
12544
  'transition-mode': ease,
12464
12545
  'transition-property': (background-color, color),
12465
12546
  'translate': unset
@@ -12758,6 +12839,9 @@ $text-box-props: (
12758
12839
  'border-radius': var(--memphis-layout-radius),
12759
12840
  'border-style': solid,
12760
12841
  'border-width': var(--memphis-layout-thickness),
12842
+ 'focus-ring-active-width': 8px,
12843
+ 'focus-ring-color': unset,
12844
+ 'focus-ring-inward-offset': 2px,
12761
12845
  'focus-ring-outward-offset': 0px,
12762
12846
  'focus-ring-width': 0px,
12763
12847
  'font-family': var(--memphis-font-family),
@@ -12775,12 +12859,12 @@ $text-box-props: (
12775
12859
  'padding-right': calc(var(--memphis-layout-space) * 1.5),
12776
12860
  'padding-top': var(--memphis-layout-space),
12777
12861
  'prefix-icon-size': 20px,
12778
- 'shadow': var(--memphis-elevation-semilight-offset-x-0) var(--memphis-elevation-semilight-offset-y-0) var(--memphis-elevation-semilight-blur-0) var(--memphis-elevation-semilight-spread-0) var(--memphis-elevation-semilight-color-0),
12779
- 'shadow-blur': var(--memphis-elevation-semilight-blur-0),
12780
- 'shadow-color': var(--memphis-elevation-semilight-color-0),
12781
- 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x-0),
12782
- 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y-0),
12783
- 'shadow-spread': var(--memphis-elevation-semilight-spread-0),
12862
+ 'shadow': var(--memphis-elevation-semilight-offset-x) var(--memphis-elevation-semilight-offset-y) var(--memphis-elevation-semilight-blur) var(--memphis-elevation-semilight-spread) var(--memphis-elevation-semilight-color),
12863
+ 'shadow-blur': var(--memphis-elevation-semilight-blur),
12864
+ 'shadow-color': var(--memphis-elevation-semilight-color),
12865
+ 'shadow-offset-x': var(--memphis-elevation-semilight-offset-x),
12866
+ 'shadow-offset-y': var(--memphis-elevation-semilight-offset-y),
12867
+ 'shadow-spread': var(--memphis-elevation-semilight-spread),
12784
12868
  'suffix-icon-size': 20px,
12785
12869
  'transition-duration': .2s,
12786
12870
  'transition-mode': ease,
@@ -12847,13 +12931,13 @@ $thumb-props: (
12847
12931
  'padding-left': unset,
12848
12932
  'padding-right': unset,
12849
12933
  'padding-top': unset,
12850
- 'shadow': var(--memphis-elevation-light-offset-x-1) var(--memphis-elevation-light-offset-y-1) var(--memphis-elevation-light-blur-1) var(--memphis-elevation-light-spread-1) var(--memphis-elevation-light-color-1),
12851
- 'shadow-blur': var(--memphis-elevation-light-blur-1),
12852
- 'shadow-color': var(--memphis-elevation-light-color-1),
12853
- 'shadow-offset-x': var(--memphis-elevation-light-offset-x-1),
12854
- 'shadow-offset-y': var(--memphis-elevation-light-offset-y-1),
12855
- 'shadow-spread': var(--memphis-elevation-light-spread-1),
12856
- 'transition-duration': var(--memphis-duration-short),
12934
+ 'shadow': var(--memphis-elevation-light-offset-x) var(--memphis-elevation-light-offset-y) var(--memphis-elevation-light-blur) var(--memphis-elevation-light-spread) var(--memphis-elevation-light-color),
12935
+ 'shadow-blur': var(--memphis-elevation-light-blur),
12936
+ 'shadow-color': var(--memphis-elevation-light-color),
12937
+ 'shadow-offset-x': var(--memphis-elevation-light-offset-x),
12938
+ 'shadow-offset-y': var(--memphis-elevation-light-offset-y),
12939
+ 'shadow-spread': var(--memphis-elevation-light-spread),
12940
+ 'transition-duration': var(--mosaik-duration-short),
12857
12941
  'transition-mode': ease,
12858
12942
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
12859
12943
  'translate': none
@@ -12968,12 +13052,12 @@ $tile-props: (
12968
13052
  'padding-top': var(--memphis-layout-space),
12969
13053
  'ripple-color': var(--memphis-scheme-highlight),
12970
13054
  'ripple-duration': 0.20s,
12971
- 'shadow': var(--memphis-elevation-bold-offset-x-0) var(--memphis-elevation-bold-offset-y-0) var(--memphis-elevation-bold-blur-0) var(--memphis-elevation-bold-spread-0) var(--memphis-elevation-bold-color-0),
12972
- 'shadow-blur': var(--memphis-elevation-bold-blur-0),
12973
- 'shadow-color': var(--memphis-elevation-bold-color-0),
12974
- 'shadow-offset-x': var(--memphis-elevation-bold-offset-x-0),
12975
- 'shadow-offset-y': var(--memphis-elevation-bold-offset-y-0),
12976
- 'shadow-spread': var(--memphis-elevation-bold-spread-0),
13055
+ 'shadow': var(--memphis-elevation-bold-offset-x) var(--memphis-elevation-bold-offset-y) var(--memphis-elevation-bold-blur) var(--memphis-elevation-bold-spread) var(--memphis-elevation-bold-color),
13056
+ 'shadow-blur': var(--memphis-elevation-bold-blur),
13057
+ 'shadow-color': var(--memphis-elevation-bold-color),
13058
+ 'shadow-offset-x': var(--memphis-elevation-bold-offset-x),
13059
+ 'shadow-offset-y': var(--memphis-elevation-bold-offset-y),
13060
+ 'shadow-spread': var(--memphis-elevation-bold-spread),
12977
13061
  'transition-duration': .2s,
12978
13062
  'transition-mode': ease,
12979
13063
  'transition-property': (background-color, color, border-color, box-shadow),
@@ -13166,6 +13250,10 @@ $time-box-props: (
13166
13250
  'border-style': unset,
13167
13251
  'border-width': unset,
13168
13252
  'color': unset,
13253
+ 'focus-ring-active-width': 8px,
13254
+ 'focus-ring-color': unset,
13255
+ 'focus-ring-inward-offset': 2px,
13256
+ 'focus-ring-outward-offset': 2px,
13169
13257
  'font-family': unset,
13170
13258
  'font-letter-spacing': unset,
13171
13259
  'font-line-height': unset,
@@ -13229,7 +13317,7 @@ $timeline-props: (
13229
13317
  'shadow-offset-x': unset,
13230
13318
  'shadow-offset-y': unset,
13231
13319
  'shadow-spread': unset,
13232
- 'transition-duration': var(--memphis-duration-medium),
13320
+ 'transition-duration': var(--mosaik-duration-medium),
13233
13321
  'transition-mode': ease,
13234
13322
  'transition-property': (color, background-color, transform),
13235
13323
  'translate': unset
@@ -13484,7 +13572,7 @@ $toast-props: (
13484
13572
  'shadow-offset-x': unset,
13485
13573
  'shadow-offset-y': unset,
13486
13574
  'shadow-spread': unset,
13487
- 'transition-duration': var(--memphis-duration-short),
13575
+ 'transition-duration': var(--mosaik-duration-short),
13488
13576
  'transition-mode': ease,
13489
13577
  'transition-property': (transform, opacity, background-color, color, border-color, box-shadow),
13490
13578
  'translate': none
@@ -13615,7 +13703,7 @@ $toggle-switch-props: (
13615
13703
  'shadow-offset-x': unset,
13616
13704
  'shadow-offset-y': unset,
13617
13705
  'shadow-spread': unset,
13618
- 'transition-duration': var(--memphis-duration-short),
13706
+ 'transition-duration': var(--mosaik-duration-short),
13619
13707
  'transition-mode': ease,
13620
13708
  'transition-property': (background-color, color, border-color, box-shadow, transform),
13621
13709
  'translate': none
@@ -13685,12 +13773,12 @@ $toolbar-props: (
13685
13773
  'padding-left': calc(var(--memphis-layout-space) * 2),
13686
13774
  'padding-right': calc(var(--memphis-layout-space) * 2),
13687
13775
  'padding-top': var(--memphis-layout-space),
13688
- 'shadow': var(--memphis-elevation-bold-offset-x-0) var(--memphis-elevation-bold-offset-y-0) var(--memphis-elevation-bold-blur-0) var(--memphis-elevation-bold-spread-0) var(--memphis-elevation-bold-color-0),
13689
- 'shadow-blur': var(--memphis-elevation-bold-blur-0),
13690
- 'shadow-color': var(--memphis-elevation-bold-color-0),
13691
- 'shadow-offset-x': var(--memphis-elevation-bold-offset-x-0),
13692
- 'shadow-offset-y': var(--memphis-elevation-bold-offset-y-0),
13693
- 'shadow-spread': var(--memphis-elevation-bold-spread-0),
13776
+ 'shadow': var(--memphis-elevation-bold-offset-x) var(--memphis-elevation-bold-offset-y) var(--memphis-elevation-bold-blur) var(--memphis-elevation-bold-spread) var(--memphis-elevation-bold-color),
13777
+ 'shadow-blur': var(--memphis-elevation-bold-blur),
13778
+ 'shadow-color': var(--memphis-elevation-bold-color),
13779
+ 'shadow-offset-x': var(--memphis-elevation-bold-offset-x),
13780
+ 'shadow-offset-y': var(--memphis-elevation-bold-offset-y),
13781
+ 'shadow-spread': var(--memphis-elevation-bold-spread),
13694
13782
  'transition-duration': .2s,
13695
13783
  'transition-mode': ease,
13696
13784
  'transition-property': (all),
@@ -13731,7 +13819,7 @@ $tooltip-props: (
13731
13819
  'shadow-offset-x': unset,
13732
13820
  'shadow-offset-y': unset,
13733
13821
  'shadow-spread': unset,
13734
- 'transition-duration': var(--memphis-duration-short),
13822
+ 'transition-duration': var(--mosaik-duration-short),
13735
13823
  'transition-mode': ease,
13736
13824
  'transition-property': (opacity, transform, visibility),
13737
13825
  'translate': none
@@ -13766,7 +13854,7 @@ $tour-props: (
13766
13854
  'shadow-offset-y': unset,
13767
13855
  'shadow-spread': unset,
13768
13856
  'tooltip-max-width': 340px,
13769
- 'transition-duration': var(--memphis-duration-short),
13857
+ 'transition-duration': var(--mosaik-duration-short),
13770
13858
  'transition-mode': ease,
13771
13859
  'transition-property': (transform, opacity),
13772
13860
  'translate': none
@@ -14071,7 +14159,7 @@ $wheel-picker-props: (
14071
14159
  'shadow-offset-x': unset,
14072
14160
  'shadow-offset-y': unset,
14073
14161
  'shadow-spread': unset,
14074
- 'transition-duration': var(--memphis-duration-short),
14162
+ 'transition-duration': var(--mosaik-duration-short),
14075
14163
  'transition-mode': ease,
14076
14164
  'transition-property': (background-color, color),
14077
14165
  'translate': none