@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.
package/themes/joy.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});
@@ -387,138 +405,78 @@ $typography-overline-letter-spacing: 2.6666666666666665px;
387
405
  $typography-overline-text-decoration: none;
388
406
  $typography-overline-text-transform: none;
389
407
  $elevation-none: none;
390
- $elevation-light-light: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 1px 2px 0px rgba(0, 0, 0, 0.14);
408
+ $elevation-light-light: 0px 2px 2px -2px rgba(0, 0, 0, 0.17);
391
409
  $elevation-light-light-offset-x-0: 0px;
392
- $elevation-light-light-offset-x-1: 0px;
393
- $elevation-light-light-offset-y-0: 0px;
394
- $elevation-light-light-offset-y-1: 1px;
410
+ $elevation-light-light-offset-y-0: 2px;
395
411
  $elevation-light-light-blur-0: 2px;
396
- $elevation-light-light-blur-1: 2px;
397
- $elevation-light-light-spread-0: 0px;
398
- $elevation-light-light-spread-1: 0px;
399
- $elevation-light-light-color-0: rgba(0, 0, 0, 0.12);
400
- $elevation-light-light-color-1: rgba(0, 0, 0, 0.14);
401
- $elevation-light-semilight: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14);
412
+ $elevation-light-light-spread-0: -2px;
413
+ $elevation-light-light-color-0: rgba(0, 0, 0, 0.17);
414
+ $elevation-light-semilight: 0px 4px 4px -2px rgba(0, 0, 0, 0.17);
402
415
  $elevation-light-semilight-offset-x-0: 0px;
403
- $elevation-light-semilight-offset-x-1: 0px;
404
- $elevation-light-semilight-offset-y-0: 0px;
405
- $elevation-light-semilight-offset-y-1: 2px;
406
- $elevation-light-semilight-blur-0: 2px;
407
- $elevation-light-semilight-blur-1: 4px;
408
- $elevation-light-semilight-spread-0: 0px;
409
- $elevation-light-semilight-spread-1: 0px;
410
- $elevation-light-semilight-color-0: rgba(0, 0, 0, 0.12);
411
- $elevation-light-semilight-color-1: rgba(0, 0, 0, 0.14);
412
- $elevation-light-regular: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.14);
416
+ $elevation-light-semilight-offset-y-0: 4px;
417
+ $elevation-light-semilight-blur-0: 4px;
418
+ $elevation-light-semilight-spread-0: -2px;
419
+ $elevation-light-semilight-color-0: rgba(0, 0, 0, 0.17);
420
+ $elevation-light-regular: 0px 6px 6px -2px rgba(0, 0, 0, 0.17);
413
421
  $elevation-light-regular-offset-x-0: 0px;
414
- $elevation-light-regular-offset-x-1: 0px;
415
- $elevation-light-regular-offset-y-0: 0px;
416
- $elevation-light-regular-offset-y-1: 4px;
417
- $elevation-light-regular-blur-0: 2px;
418
- $elevation-light-regular-blur-1: 8px;
419
- $elevation-light-regular-spread-0: 0px;
420
- $elevation-light-regular-spread-1: 0px;
421
- $elevation-light-regular-color-0: rgba(0, 0, 0, 0.12);
422
- $elevation-light-regular-color-1: rgba(0, 0, 0, 0.14);
423
- $elevation-light-semibold: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.14);
422
+ $elevation-light-regular-offset-y-0: 6px;
423
+ $elevation-light-regular-blur-0: 6px;
424
+ $elevation-light-regular-spread-0: -2px;
425
+ $elevation-light-regular-color-0: rgba(0, 0, 0, 0.17);
426
+ $elevation-light-semibold: 0px 8px 8px -2px rgba(0, 0, 0, 0.17);
424
427
  $elevation-light-semibold-offset-x-0: 0px;
425
- $elevation-light-semibold-offset-x-1: 0px;
426
- $elevation-light-semibold-offset-y-0: 0px;
427
- $elevation-light-semibold-offset-y-1: 8px;
428
- $elevation-light-semibold-blur-0: 2px;
429
- $elevation-light-semibold-blur-1: 16px;
430
- $elevation-light-semibold-spread-0: 0px;
431
- $elevation-light-semibold-spread-1: 0px;
432
- $elevation-light-semibold-color-0: rgba(0, 0, 0, 0.12);
433
- $elevation-light-semibold-color-1: rgba(0, 0, 0, 0.14);
434
- $elevation-light-bold: 0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 14px 28px 0px rgba(0, 0, 0, 0.14);
428
+ $elevation-light-semibold-offset-y-0: 8px;
429
+ $elevation-light-semibold-blur-0: 8px;
430
+ $elevation-light-semibold-spread-0: -2px;
431
+ $elevation-light-semibold-color-0: rgba(0, 0, 0, 0.17);
432
+ $elevation-light-bold: 0px 10px 10px -2px rgba(0, 0, 0, 0.17);
435
433
  $elevation-light-bold-offset-x-0: 0px;
436
- $elevation-light-bold-offset-x-1: 0px;
437
- $elevation-light-bold-offset-y-0: 0px;
438
- $elevation-light-bold-offset-y-1: 14px;
439
- $elevation-light-bold-blur-0: 8px;
440
- $elevation-light-bold-blur-1: 28px;
441
- $elevation-light-bold-spread-0: 0px;
442
- $elevation-light-bold-spread-1: 0px;
443
- $elevation-light-bold-color-0: rgba(0, 0, 0, 0.12);
444
- $elevation-light-bold-color-1: rgba(0, 0, 0, 0.14);
445
- $elevation-light-extrabold: 0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 32px 64px 0px rgba(0, 0, 0, 0.14);
434
+ $elevation-light-bold-offset-y-0: 10px;
435
+ $elevation-light-bold-blur-0: 10px;
436
+ $elevation-light-bold-spread-0: -2px;
437
+ $elevation-light-bold-color-0: rgba(0, 0, 0, 0.17);
438
+ $elevation-light-extrabold: 0px 12px 12px -2px rgba(0, 0, 0, 0.17);
446
439
  $elevation-light-extrabold-offset-x-0: 0px;
447
- $elevation-light-extrabold-offset-x-1: 0px;
448
- $elevation-light-extrabold-offset-y-0: 0px;
449
- $elevation-light-extrabold-offset-y-1: 32px;
450
- $elevation-light-extrabold-blur-0: 8px;
451
- $elevation-light-extrabold-blur-1: 64px;
452
- $elevation-light-extrabold-spread-0: 0px;
453
- $elevation-light-extrabold-spread-1: 0px;
454
- $elevation-light-extrabold-color-0: rgba(0, 0, 0, 0.12);
455
- $elevation-light-extrabold-color-1: rgba(0, 0, 0, 0.14);
456
- $elevation-dark-light: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 1px 2px 0px rgba(0, 0, 0, 0.28);
440
+ $elevation-light-extrabold-offset-y-0: 12px;
441
+ $elevation-light-extrabold-blur-0: 12px;
442
+ $elevation-light-extrabold-spread-0: -2px;
443
+ $elevation-light-extrabold-color-0: rgba(0, 0, 0, 0.17);
444
+ $elevation-dark-light: 0px 2px 2px -2px rgba(0, 0, 0, 0.24);
457
445
  $elevation-dark-light-offset-x-0: 0px;
458
- $elevation-dark-light-offset-x-1: 0px;
459
- $elevation-dark-light-offset-y-0: 0px;
460
- $elevation-dark-light-offset-y-1: 1px;
446
+ $elevation-dark-light-offset-y-0: 2px;
461
447
  $elevation-dark-light-blur-0: 2px;
462
- $elevation-dark-light-blur-1: 2px;
463
- $elevation-dark-light-spread-0: 0px;
464
- $elevation-dark-light-spread-1: 0px;
448
+ $elevation-dark-light-spread-0: -2px;
465
449
  $elevation-dark-light-color-0: rgba(0, 0, 0, 0.24);
466
- $elevation-dark-light-color-1: rgba(0, 0, 0, 0.28);
467
- $elevation-dark-semilight: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 2px 4px 0px rgba(0, 0, 0, 0.28);
450
+ $elevation-dark-semilight: 0px 4px 4px -2px rgba(0, 0, 0, 0.24);
468
451
  $elevation-dark-semilight-offset-x-0: 0px;
469
- $elevation-dark-semilight-offset-x-1: 0px;
470
- $elevation-dark-semilight-offset-y-0: 0px;
471
- $elevation-dark-semilight-offset-y-1: 2px;
472
- $elevation-dark-semilight-blur-0: 2px;
473
- $elevation-dark-semilight-blur-1: 4px;
474
- $elevation-dark-semilight-spread-0: 0px;
475
- $elevation-dark-semilight-spread-1: 0px;
452
+ $elevation-dark-semilight-offset-y-0: 4px;
453
+ $elevation-dark-semilight-blur-0: 4px;
454
+ $elevation-dark-semilight-spread-0: -2px;
476
455
  $elevation-dark-semilight-color-0: rgba(0, 0, 0, 0.24);
477
- $elevation-dark-semilight-color-1: rgba(0, 0, 0, 0.28);
478
- $elevation-dark-regular: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 4px 8px 0px rgba(0, 0, 0, 0.28);
456
+ $elevation-dark-regular: 0px 6px 6px -2px rgba(0, 0, 0, 0.24);
479
457
  $elevation-dark-regular-offset-x-0: 0px;
480
- $elevation-dark-regular-offset-x-1: 0px;
481
- $elevation-dark-regular-offset-y-0: 0px;
482
- $elevation-dark-regular-offset-y-1: 4px;
483
- $elevation-dark-regular-blur-0: 2px;
484
- $elevation-dark-regular-blur-1: 8px;
485
- $elevation-dark-regular-spread-0: 0px;
486
- $elevation-dark-regular-spread-1: 0px;
458
+ $elevation-dark-regular-offset-y-0: 6px;
459
+ $elevation-dark-regular-blur-0: 6px;
460
+ $elevation-dark-regular-spread-0: -2px;
487
461
  $elevation-dark-regular-color-0: rgba(0, 0, 0, 0.24);
488
- $elevation-dark-regular-color-1: rgba(0, 0, 0, 0.28);
489
- $elevation-dark-semibold: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 8px 16px 0px rgba(0, 0, 0, 0.28);
462
+ $elevation-dark-semibold: 0px 8px 8px -2px rgba(0, 0, 0, 0.24);
490
463
  $elevation-dark-semibold-offset-x-0: 0px;
491
- $elevation-dark-semibold-offset-x-1: 0px;
492
- $elevation-dark-semibold-offset-y-0: 0px;
493
- $elevation-dark-semibold-offset-y-1: 8px;
494
- $elevation-dark-semibold-blur-0: 2px;
495
- $elevation-dark-semibold-blur-1: 16px;
496
- $elevation-dark-semibold-spread-0: 0px;
497
- $elevation-dark-semibold-spread-1: 0px;
464
+ $elevation-dark-semibold-offset-y-0: 8px;
465
+ $elevation-dark-semibold-blur-0: 8px;
466
+ $elevation-dark-semibold-spread-0: -2px;
498
467
  $elevation-dark-semibold-color-0: rgba(0, 0, 0, 0.24);
499
- $elevation-dark-semibold-color-1: rgba(0, 0, 0, 0.28);
500
- $elevation-dark-bold: 0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 14px 28px 0px rgba(0, 0, 0, 0.28);
468
+ $elevation-dark-bold: 0px 10px 10px -2px rgba(0, 0, 0, 0.24);
501
469
  $elevation-dark-bold-offset-x-0: 0px;
502
- $elevation-dark-bold-offset-x-1: 0px;
503
- $elevation-dark-bold-offset-y-0: 0px;
504
- $elevation-dark-bold-offset-y-1: 14px;
505
- $elevation-dark-bold-blur-0: 8px;
506
- $elevation-dark-bold-blur-1: 28px;
507
- $elevation-dark-bold-spread-0: 0px;
508
- $elevation-dark-bold-spread-1: 0px;
470
+ $elevation-dark-bold-offset-y-0: 10px;
471
+ $elevation-dark-bold-blur-0: 10px;
472
+ $elevation-dark-bold-spread-0: -2px;
509
473
  $elevation-dark-bold-color-0: rgba(0, 0, 0, 0.24);
510
- $elevation-dark-bold-color-1: rgba(0, 0, 0, 0.28);
511
- $elevation-dark-extrabold: 0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 32px 64px 0px rgba(0, 0, 0, 0.28);
474
+ $elevation-dark-extrabold: 0px 12px 12px -2px rgba(0, 0, 0, 0.24);
512
475
  $elevation-dark-extrabold-offset-x-0: 0px;
513
- $elevation-dark-extrabold-offset-x-1: 0px;
514
- $elevation-dark-extrabold-offset-y-0: 0px;
515
- $elevation-dark-extrabold-offset-y-1: 32px;
516
- $elevation-dark-extrabold-blur-0: 8px;
517
- $elevation-dark-extrabold-blur-1: 64px;
518
- $elevation-dark-extrabold-spread-0: 0px;
519
- $elevation-dark-extrabold-spread-1: 0px;
476
+ $elevation-dark-extrabold-offset-y-0: 12px;
477
+ $elevation-dark-extrabold-blur-0: 12px;
478
+ $elevation-dark-extrabold-spread-0: -2px;
520
479
  $elevation-dark-extrabold-color-0: rgba(0, 0, 0, 0.24);
521
- $elevation-dark-extrabold-color-1: rgba(0, 0, 0, 0.28);
522
480
  $size-tiny: 2px;
523
481
  $size-small: 4px;
524
482
  $size-medium: 8px;
@@ -922,6 +880,7 @@ $_color-dark: (
922
880
  :host {
923
881
  @each $key, $value in $durations {
924
882
  --#{$prefix}-duration-#{$key}: #{$value};
883
+ --mosaik-duration-#{$key}: var(--#{$prefix}-duration-#{$key});
925
884
  }
926
885
  }
927
886
  }
@@ -937,13 +896,6 @@ $_shadows-light: (
937
896
  blur: $elevation-light-light-blur-0,
938
897
  spread: $elevation-light-light-spread-0,
939
898
  color: $elevation-light-light-color-0
940
- ),
941
- 1: (
942
- offset-x: $elevation-light-light-offset-x-1,
943
- offset-y: $elevation-light-light-offset-y-1,
944
- blur: $elevation-light-light-blur-1,
945
- spread: $elevation-light-light-spread-1,
946
- color: $elevation-light-light-color-1
947
899
  )
948
900
  ),
949
901
  semi-light: (
@@ -953,13 +905,6 @@ $_shadows-light: (
953
905
  blur: $elevation-light-semilight-blur-0,
954
906
  spread: $elevation-light-semilight-spread-0,
955
907
  color: $elevation-light-semilight-color-0
956
- ),
957
- 1: (
958
- offset-x: $elevation-light-semilight-offset-x-1,
959
- offset-y: $elevation-light-semilight-offset-y-1,
960
- blur: $elevation-light-semilight-blur-1,
961
- spread: $elevation-light-semilight-spread-1,
962
- color: $elevation-light-semilight-color-1
963
908
  )
964
909
  ),
965
910
  regular: (
@@ -969,13 +914,6 @@ $_shadows-light: (
969
914
  blur: $elevation-light-regular-blur-0,
970
915
  spread: $elevation-light-regular-spread-0,
971
916
  color: $elevation-light-regular-color-0
972
- ),
973
- 1: (
974
- offset-x: $elevation-light-regular-offset-x-1,
975
- offset-y: $elevation-light-regular-offset-y-1,
976
- blur: $elevation-light-regular-blur-1,
977
- spread: $elevation-light-regular-spread-1,
978
- color: $elevation-light-regular-color-1
979
917
  )
980
918
  ),
981
919
  semi-bold: (
@@ -985,13 +923,6 @@ $_shadows-light: (
985
923
  blur: $elevation-light-semibold-blur-0,
986
924
  spread: $elevation-light-semibold-spread-0,
987
925
  color: $elevation-light-semibold-color-0
988
- ),
989
- 1: (
990
- offset-x: $elevation-light-semibold-offset-x-1,
991
- offset-y: $elevation-light-semibold-offset-y-1,
992
- blur: $elevation-light-semibold-blur-1,
993
- spread: $elevation-light-semibold-spread-1,
994
- color: $elevation-light-semibold-color-1
995
926
  )
996
927
  ),
997
928
  bold: (
@@ -1001,13 +932,6 @@ $_shadows-light: (
1001
932
  blur: $elevation-light-bold-blur-0,
1002
933
  spread: $elevation-light-bold-spread-0,
1003
934
  color: $elevation-light-bold-color-0
1004
- ),
1005
- 1: (
1006
- offset-x: $elevation-light-bold-offset-x-1,
1007
- offset-y: $elevation-light-bold-offset-y-1,
1008
- blur: $elevation-light-bold-blur-1,
1009
- spread: $elevation-light-bold-spread-1,
1010
- color: $elevation-light-bold-color-1
1011
935
  )
1012
936
  ),
1013
937
  extra-bold: (
@@ -1017,13 +941,6 @@ $_shadows-light: (
1017
941
  blur: $elevation-light-extrabold-blur-0,
1018
942
  spread: $elevation-light-extrabold-spread-0,
1019
943
  color: $elevation-light-extrabold-color-0
1020
- ),
1021
- 1: (
1022
- offset-x: $elevation-light-extrabold-offset-x-1,
1023
- offset-y: $elevation-light-extrabold-offset-y-1,
1024
- blur: $elevation-light-extrabold-blur-1,
1025
- spread: $elevation-light-extrabold-spread-1,
1026
- color: $elevation-light-extrabold-color-1
1027
944
  )
1028
945
  )
1029
946
  );
@@ -1036,13 +953,6 @@ $_shadows-dark: (
1036
953
  blur: $elevation-dark-light-blur-0,
1037
954
  spread: $elevation-dark-light-spread-0,
1038
955
  color: $elevation-dark-light-color-0
1039
- ),
1040
- 1: (
1041
- offset-x: $elevation-dark-light-offset-x-1,
1042
- offset-y: $elevation-dark-light-offset-y-1,
1043
- blur: $elevation-dark-light-blur-1,
1044
- spread: $elevation-dark-light-spread-1,
1045
- color: $elevation-dark-light-color-1
1046
956
  )
1047
957
  ),
1048
958
  semi-light: (
@@ -1052,13 +962,6 @@ $_shadows-dark: (
1052
962
  blur: $elevation-dark-semilight-blur-0,
1053
963
  spread: $elevation-dark-semilight-spread-0,
1054
964
  color: $elevation-dark-semilight-color-0
1055
- ),
1056
- 1: (
1057
- offset-x: $elevation-dark-semilight-offset-x-1,
1058
- offset-y: $elevation-dark-semilight-offset-y-1,
1059
- blur: $elevation-dark-semilight-blur-1,
1060
- spread: $elevation-dark-semilight-spread-1,
1061
- color: $elevation-dark-semilight-color-1
1062
965
  )
1063
966
  ),
1064
967
  regular: (
@@ -1068,13 +971,6 @@ $_shadows-dark: (
1068
971
  blur: $elevation-dark-regular-blur-0,
1069
972
  spread: $elevation-dark-regular-spread-0,
1070
973
  color: $elevation-dark-regular-color-0
1071
- ),
1072
- 1: (
1073
- offset-x: $elevation-dark-regular-offset-x-1,
1074
- offset-y: $elevation-dark-regular-offset-y-1,
1075
- blur: $elevation-dark-regular-blur-1,
1076
- spread: $elevation-dark-regular-spread-1,
1077
- color: $elevation-dark-regular-color-1
1078
974
  )
1079
975
  ),
1080
976
  semi-bold: (
@@ -1084,13 +980,6 @@ $_shadows-dark: (
1084
980
  blur: $elevation-dark-semibold-blur-0,
1085
981
  spread: $elevation-dark-semibold-spread-0,
1086
982
  color: $elevation-dark-semibold-color-0
1087
- ),
1088
- 1: (
1089
- offset-x: $elevation-dark-semibold-offset-x-1,
1090
- offset-y: $elevation-dark-semibold-offset-y-1,
1091
- blur: $elevation-dark-semibold-blur-1,
1092
- spread: $elevation-dark-semibold-spread-1,
1093
- color: $elevation-dark-semibold-color-1
1094
983
  )
1095
984
  ),
1096
985
  bold: (
@@ -1100,13 +989,6 @@ $_shadows-dark: (
1100
989
  blur: $elevation-dark-bold-blur-0,
1101
990
  spread: $elevation-dark-bold-spread-0,
1102
991
  color: $elevation-dark-bold-color-0
1103
- ),
1104
- 1: (
1105
- offset-x: $elevation-dark-bold-offset-x-1,
1106
- offset-y: $elevation-dark-bold-offset-y-1,
1107
- blur: $elevation-dark-bold-blur-1,
1108
- spread: $elevation-dark-bold-spread-1,
1109
- color: $elevation-dark-bold-color-1
1110
992
  )
1111
993
  ),
1112
994
  extra-bold: (
@@ -1116,13 +998,6 @@ $_shadows-dark: (
1116
998
  blur: $elevation-dark-extrabold-blur-0,
1117
999
  spread: $elevation-dark-extrabold-spread-0,
1118
1000
  color: $elevation-dark-extrabold-color-0
1119
- ),
1120
- 1: (
1121
- offset-x: $elevation-dark-extrabold-offset-x-1,
1122
- offset-y: $elevation-dark-extrabold-offset-y-1,
1123
- blur: $elevation-dark-extrabold-blur-1,
1124
- spread: $elevation-dark-extrabold-spread-1,
1125
- color: $elevation-dark-extrabold-color-1
1126
1001
  )
1127
1002
  )
1128
1003
  );
@@ -1638,7 +1513,7 @@ $actionbar-group-props: (
1638
1513
  'shadow-offset-x': unset,
1639
1514
  'shadow-offset-y': unset,
1640
1515
  'shadow-spread': unset,
1641
- 'transition-duration': var(--joy-duration-short),
1516
+ 'transition-duration': var(--mosaik-duration-short),
1642
1517
  'transition-mode': ease,
1643
1518
  'transition-property': (all),
1644
1519
  'translate': none
@@ -1675,7 +1550,7 @@ $actionbar-item-props: (
1675
1550
  'shadow-offset-x': unset,
1676
1551
  'shadow-offset-y': unset,
1677
1552
  'shadow-spread': unset,
1678
- 'transition-duration': var(--joy-duration-short),
1553
+ 'transition-duration': var(--mosaik-duration-short),
1679
1554
  'transition-mode': ease,
1680
1555
  'transition-property': (background-color),
1681
1556
  'translate': none
@@ -1710,7 +1585,7 @@ $actionbar-separator-props: (
1710
1585
  'shadow-offset-y': unset,
1711
1586
  'shadow-spread': unset,
1712
1587
  'thickness': 1px,
1713
- 'transition-duration': var(--joy-duration-short),
1588
+ 'transition-duration': var(--mosaik-duration-short),
1714
1589
  'transition-mode': ease,
1715
1590
  'transition-property': (all),
1716
1591
  'translate': none
@@ -1750,7 +1625,7 @@ $actionbar-props: (
1750
1625
  'shadow-offset-x': unset,
1751
1626
  'shadow-offset-y': unset,
1752
1627
  'shadow-spread': unset,
1753
- 'transition-duration': var(--joy-duration-short),
1628
+ 'transition-duration': var(--mosaik-duration-short),
1754
1629
  'transition-mode': ease,
1755
1630
  'transition-property': (all),
1756
1631
  'translate': none
@@ -1819,7 +1694,7 @@ $anchor-props: (
1819
1694
  'shadow-offset-x': unset,
1820
1695
  'shadow-offset-y': unset,
1821
1696
  'shadow-spread': unset,
1822
- 'transition-duration': var(--joy-duration-short),
1697
+ 'transition-duration': var(--mosaik-duration-short),
1823
1698
  'transition-mode': ease,
1824
1699
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
1825
1700
  'translate': none
@@ -1859,7 +1734,7 @@ $app-props: (
1859
1734
  'shadow-offset-x': unset,
1860
1735
  'shadow-offset-y': unset,
1861
1736
  'shadow-spread': unset,
1862
- 'transition-duration': var(--joy-duration-short),
1737
+ 'transition-duration': var(--mosaik-duration-short),
1863
1738
  'transition-mode': ease,
1864
1739
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
1865
1740
  'translate': none
@@ -1899,7 +1774,7 @@ $app-header-props: (
1899
1774
  'shadow-offset-x': unset,
1900
1775
  'shadow-offset-y': unset,
1901
1776
  'shadow-spread': unset,
1902
- 'transition-duration': var(--joy-duration-short),
1777
+ 'transition-duration': var(--mosaik-duration-short),
1903
1778
  'transition-mode': ease,
1904
1779
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
1905
1780
  'translate': none
@@ -1946,7 +1821,7 @@ $audio-props: (
1946
1821
  'shadow-offset-x': unset,
1947
1822
  'shadow-offset-y': unset,
1948
1823
  'shadow-spread': unset,
1949
- 'transition-duration': var(--joy-duration-short),
1824
+ 'transition-duration': var(--mosaik-duration-short),
1950
1825
  'transition-mode': ease,
1951
1826
  'transition-property': (color, background-color, border-color, opacity, box-shadow),
1952
1827
  'translate': none
@@ -1967,9 +1842,10 @@ $auto-complete-box-props: (
1967
1842
  'border-style': solid,
1968
1843
  'border-width': var(--joy-layout-thickness),
1969
1844
  'focus-ring-active-width': 8px,
1970
- 'focus-ring-color': var(--joy-color-light-secondary-400),
1845
+ 'focus-ring-color': var(--joy-scheme-highlight),
1971
1846
  'focus-ring-inward-offset': 2px,
1972
- 'focus-ring-outward-offset': 2px,
1847
+ 'focus-ring-outward-offset': 0px,
1848
+ 'focus-ring-width': 0px,
1973
1849
  'font-family': var(--joy-font-family),
1974
1850
  'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
1975
1851
  'font-line-height': var(--joy-typography-body2-line-height),
@@ -1989,7 +1865,7 @@ $auto-complete-box-props: (
1989
1865
  'shadow-offset-x': unset,
1990
1866
  'shadow-offset-y': unset,
1991
1867
  'shadow-spread': unset,
1992
- 'transition-duration': var(--joy-duration-short),
1868
+ 'transition-duration': var(--mosaik-duration-short),
1993
1869
  'transition-mode': ease,
1994
1870
  'transition-property': (all),
1995
1871
  'translate': none
@@ -2034,7 +1910,7 @@ $avatar-props: (
2034
1910
  'shadow-offset-x': unset,
2035
1911
  'shadow-offset-y': unset,
2036
1912
  'shadow-spread': unset,
2037
- 'transition-duration': var(--joy-duration-short),
1913
+ 'transition-duration': var(--mosaik-duration-short),
2038
1914
  'transition-mode': ease,
2039
1915
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
2040
1916
  'translate': none
@@ -2073,7 +1949,7 @@ $avatar-group-props: (
2073
1949
  'shadow-offset-x': unset,
2074
1950
  'shadow-offset-y': unset,
2075
1951
  'shadow-spread': unset,
2076
- 'transition-duration': var(--joy-duration-short),
1952
+ 'transition-duration': var(--mosaik-duration-short),
2077
1953
  'transition-mode': ease,
2078
1954
  'transition-property': (margin-left),
2079
1955
  'translate': none
@@ -2141,7 +2017,7 @@ $backdrop-props: (
2141
2017
  'shadow-offset-x': unset,
2142
2018
  'shadow-offset-y': unset,
2143
2019
  'shadow-spread': unset,
2144
- 'transition-duration': var(--joy-duration-short),
2020
+ 'transition-duration': var(--mosaik-duration-short),
2145
2021
  'transition-mode': ease,
2146
2022
  'transition-property': (opacity, backdrop-filter),
2147
2023
  'translate': none
@@ -2175,13 +2051,13 @@ $badge-props: (
2175
2051
  'padding-left': var(--joy-layout-space),
2176
2052
  'padding-right': var(--joy-layout-space),
2177
2053
  'padding-top': calc(var(--joy-layout-space) / 2),
2178
- 'shadow': var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1),
2179
- 'shadow-blur': var(--joy-elevation-light-blur-1),
2180
- 'shadow-color': var(--joy-elevation-light-color-1),
2181
- 'shadow-offset-x': var(--joy-elevation-light-offset-x-1),
2182
- 'shadow-offset-y': var(--joy-elevation-light-offset-y-1),
2183
- 'shadow-spread': var(--joy-elevation-light-spread-1),
2184
- 'transition-duration': var(--joy-duration-short),
2054
+ 'shadow': var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color),
2055
+ 'shadow-blur': var(--joy-elevation-light-blur),
2056
+ 'shadow-color': var(--joy-elevation-light-color),
2057
+ 'shadow-offset-x': var(--joy-elevation-light-offset-x),
2058
+ 'shadow-offset-y': var(--joy-elevation-light-offset-y),
2059
+ 'shadow-spread': var(--joy-elevation-light-spread),
2060
+ 'transition-duration': var(--mosaik-duration-short),
2185
2061
  'transition-mode': ease,
2186
2062
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
2187
2063
  'translate': none
@@ -2214,13 +2090,13 @@ $banner-props: (
2214
2090
  'padding-left': calc(var(--joy-layout-space) * 2),
2215
2091
  'padding-right': calc(var(--joy-layout-space) * 2),
2216
2092
  'padding-top': var(--joy-layout-space),
2217
- 'shadow': var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1),
2218
- 'shadow-blur': var(--joy-elevation-light-blur-1),
2219
- 'shadow-color': var(--joy-elevation-light-color-1),
2220
- 'shadow-offset-x': var(--joy-elevation-light-offset-x-1),
2221
- 'shadow-offset-y': var(--joy-elevation-light-offset-y-1),
2222
- 'shadow-spread': var(--joy-elevation-light-spread-1),
2223
- 'transition-duration': var(--joy-duration-short),
2093
+ 'shadow': var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color),
2094
+ 'shadow-blur': var(--joy-elevation-light-blur),
2095
+ 'shadow-color': var(--joy-elevation-light-color),
2096
+ 'shadow-offset-x': var(--joy-elevation-light-offset-x),
2097
+ 'shadow-offset-y': var(--joy-elevation-light-offset-y),
2098
+ 'shadow-spread': var(--joy-elevation-light-spread),
2099
+ 'transition-duration': var(--mosaik-duration-short),
2224
2100
  'transition-mode': ease,
2225
2101
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
2226
2102
  'translate': none
@@ -2518,13 +2394,13 @@ $button-props: (
2518
2394
  'progress-ring-width': var(--joy-layout-thickness),
2519
2395
  'ripple-color': unset,
2520
2396
  'ripple-duration': 0.20s,
2521
- 'shadow': var(--joy-elevation-semilight-offset-x-0) var(--joy-elevation-semilight-offset-y-0) var(--joy-elevation-semilight-blur-0) var(--joy-elevation-semilight-spread-0) var(--joy-elevation-semilight-color-0),
2522
- 'shadow-blur': var(--joy-elevation-semilight-blur-0),
2523
- 'shadow-color': var(--joy-elevation-semilight-color-0),
2524
- 'shadow-offset-x': var(--joy-elevation-semilight-offset-x-0),
2525
- 'shadow-offset-y': var(--joy-elevation-semilight-offset-y-0),
2526
- 'shadow-spread': var(--joy-elevation-semilight-spread-0),
2527
- 'transition-duration': var(--joy-duration-short),
2397
+ 'shadow': var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color),
2398
+ 'shadow-blur': var(--joy-elevation-semilight-blur),
2399
+ 'shadow-color': var(--joy-elevation-semilight-color),
2400
+ 'shadow-offset-x': var(--joy-elevation-semilight-offset-x),
2401
+ 'shadow-offset-y': var(--joy-elevation-semilight-offset-y),
2402
+ 'shadow-spread': var(--joy-elevation-semilight-spread),
2403
+ 'transition-duration': var(--mosaik-duration-short),
2528
2404
  'transition-mode': ease,
2529
2405
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
2530
2406
  'translate': none,
@@ -2564,7 +2440,7 @@ $button-group-props: (
2564
2440
  'shadow-offset-x': unset,
2565
2441
  'shadow-offset-y': unset,
2566
2442
  'shadow-spread': unset,
2567
- 'transition-duration': var(--joy-duration-short),
2443
+ 'transition-duration': var(--mosaik-duration-short),
2568
2444
  'transition-mode': ease,
2569
2445
  'transition-property': (background-color, color, border-color, opacity),
2570
2446
  'translate': none
@@ -2598,13 +2474,13 @@ $calendar-props: (
2598
2474
  'padding-left': calc(var(--joy-layout-space) * 2),
2599
2475
  'padding-right': calc(var(--joy-layout-space) * 2),
2600
2476
  'padding-top': var(--joy-layout-space),
2601
- 'shadow': var(--joy-elevation-light-offset-x-0) var(--joy-elevation-light-offset-y-0) var(--joy-elevation-light-blur-0) var(--joy-elevation-light-spread-0) var(--joy-elevation-light-color-0),
2602
- 'shadow-blur': var(--joy-elevation-light-blur-0),
2603
- 'shadow-color': var(--joy-elevation-light-color-0),
2604
- 'shadow-offset-x': var(--joy-elevation-light-offset-x-0),
2605
- 'shadow-offset-y': var(--joy-elevation-light-offset-y-0),
2606
- 'shadow-spread': var(--joy-elevation-light-spread-0),
2607
- 'transition-duration': var(--joy-duration-short),
2477
+ 'shadow': var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color),
2478
+ 'shadow-blur': var(--joy-elevation-light-blur),
2479
+ 'shadow-color': var(--joy-elevation-light-color),
2480
+ 'shadow-offset-x': var(--joy-elevation-light-offset-x),
2481
+ 'shadow-offset-y': var(--joy-elevation-light-offset-y),
2482
+ 'shadow-spread': var(--joy-elevation-light-spread),
2483
+ 'transition-duration': var(--mosaik-duration-short),
2608
2484
  'transition-mode': ease,
2609
2485
  'transition-property': (background-color, color, border-color, opacity),
2610
2486
  'translate': none
@@ -2720,15 +2596,15 @@ $calendar-item-props: (
2720
2596
  'ripple-color': unset,
2721
2597
  'ripple-duration': 0.20s,
2722
2598
  'selection-background-color': var(--joy-scheme-selection),
2723
- 'shadow': var(--joy-elevation-light-offset-x-0) var(--joy-elevation-light-offset-y-0) var(--joy-elevation-light-blur-0) var(--joy-elevation-light-spread-0) var(--joy-elevation-light-color-0),
2724
- 'shadow-blur': var(--joy-elevation-light-blur-0),
2725
- 'shadow-color': var(--joy-elevation-light-color-0),
2726
- 'shadow-offset-x': var(--joy-elevation-light-offset-x-0),
2727
- 'shadow-offset-y': var(--joy-elevation-light-offset-y-0),
2728
- 'shadow-spread': var(--joy-elevation-light-spread-0),
2599
+ 'shadow': var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color),
2600
+ 'shadow-blur': var(--joy-elevation-light-blur),
2601
+ 'shadow-color': var(--joy-elevation-light-color),
2602
+ 'shadow-offset-x': var(--joy-elevation-light-offset-x),
2603
+ 'shadow-offset-y': var(--joy-elevation-light-offset-y),
2604
+ 'shadow-spread': var(--joy-elevation-light-spread),
2729
2605
  'today-border-color': var(--joy-color-primary-500),
2730
2606
  'today-border-width': 2px,
2731
- 'transition-duration': var(--joy-duration-short),
2607
+ 'transition-duration': var(--mosaik-duration-short),
2732
2608
  'transition-mode': ease,
2733
2609
  'transition-property': (background-color, color, border-color, opacity),
2734
2610
  'translate': none
@@ -2905,13 +2781,13 @@ $card-props: (
2905
2781
  'padding-left': unset,
2906
2782
  'padding-right': unset,
2907
2783
  'padding-top': unset,
2908
- 'shadow': var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1),
2909
- 'shadow-blur': var(--joy-elevation-light-blur-1),
2910
- 'shadow-color': var(--joy-elevation-light-color-1),
2911
- 'shadow-offset-x': var(--joy-elevation-light-offset-x-1),
2912
- 'shadow-offset-y': var(--joy-elevation-light-offset-y-1),
2913
- 'shadow-spread': var(--joy-elevation-light-spread-1),
2914
- 'transition-duration': var(--joy-duration-short),
2784
+ 'shadow': var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color),
2785
+ 'shadow-blur': var(--joy-elevation-light-blur),
2786
+ 'shadow-color': var(--joy-elevation-light-color),
2787
+ 'shadow-offset-x': var(--joy-elevation-light-offset-x),
2788
+ 'shadow-offset-y': var(--joy-elevation-light-offset-y),
2789
+ 'shadow-spread': var(--joy-elevation-light-spread),
2790
+ 'transition-duration': var(--mosaik-duration-short),
2915
2791
  'transition-mode': ease,
2916
2792
  'transition-property': (background-color, color, border-color, box-shadow),
2917
2793
  'translate': none
@@ -3150,7 +3026,7 @@ $carousel-props: (
3150
3026
  'shadow-offset-x': unset,
3151
3027
  'shadow-offset-y': unset,
3152
3028
  'shadow-spread': unset,
3153
- 'transition-duration': var(--joy-duration-short),
3029
+ 'transition-duration': var(--mosaik-duration-short),
3154
3030
  'transition-mode': ease,
3155
3031
  'transition-property': unset,
3156
3032
  'translate': none
@@ -3323,12 +3199,12 @@ $cell-group-props: (
3323
3199
  'padding-left': unset,
3324
3200
  'padding-right': unset,
3325
3201
  'padding-top': unset,
3326
- 'shadow': var(--joy-elevation-bold-offset-x-0) var(--joy-elevation-bold-offset-y-0) var(--joy-elevation-bold-blur-0) var(--joy-elevation-bold-spread-0) var(--joy-elevation-bold-color-0),
3327
- 'shadow-blur': var(--joy-elevation-bold-blur-0),
3328
- 'shadow-color': var(--joy-elevation-bold-color-0),
3329
- 'shadow-offset-x': var(--joy-elevation-bold-offset-x-0),
3330
- 'shadow-offset-y': var(--joy-elevation-bold-offset-y-0),
3331
- 'shadow-spread': var(--joy-elevation-bold-spread-0),
3202
+ 'shadow': var(--joy-elevation-bold-offset-x) var(--joy-elevation-bold-offset-y) var(--joy-elevation-bold-blur) var(--joy-elevation-bold-spread) var(--joy-elevation-bold-color),
3203
+ 'shadow-blur': var(--joy-elevation-bold-blur),
3204
+ 'shadow-color': var(--joy-elevation-bold-color),
3205
+ 'shadow-offset-x': var(--joy-elevation-bold-offset-x),
3206
+ 'shadow-offset-y': var(--joy-elevation-bold-offset-y),
3207
+ 'shadow-spread': var(--joy-elevation-bold-spread),
3332
3208
  'transition-duration': unset,
3333
3209
  'transition-mode': unset,
3334
3210
  'transition-property': (background-color, color, border-color, box-shadow),
@@ -3404,7 +3280,7 @@ $chat-props: (
3404
3280
  'shadow-offset-x': unset,
3405
3281
  'shadow-offset-y': unset,
3406
3282
  'shadow-spread': unset,
3407
- 'transition-duration': var(--joy-duration-short),
3283
+ 'transition-duration': var(--mosaik-duration-short),
3408
3284
  'transition-mode': ease,
3409
3285
  'transition-property': (all),
3410
3286
  'translate': none
@@ -3471,13 +3347,13 @@ $chat-input-props: (
3471
3347
  'padding-left': calc(var(--joy-layout-space) * 1.5),
3472
3348
  'padding-right': calc(var(--joy-layout-space) * 1.5),
3473
3349
  'padding-top': var(--joy-layout-space),
3474
- 'shadow': var(--joy-elevation-semilight-offset-x-0) var(--joy-elevation-semilight-offset-y-0) var(--joy-elevation-semilight-blur-0) var(--joy-elevation-semilight-spread-0) var(--joy-elevation-semilight-color-0),
3475
- 'shadow-blur': var(--joy-elevation-semilight-blur-0),
3476
- 'shadow-color': var(--joy-elevation-semilight-color-0),
3477
- 'shadow-offset-x': var(--joy-elevation-semilight-offset-x-0),
3478
- 'shadow-offset-y': var(--joy-elevation-semilight-offset-y-0),
3479
- 'shadow-spread': var(--joy-elevation-semilight-spread-0),
3480
- 'transition-duration': var(--joy-duration-short),
3350
+ 'shadow': var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color),
3351
+ 'shadow-blur': var(--joy-elevation-semilight-blur),
3352
+ 'shadow-color': var(--joy-elevation-semilight-color),
3353
+ 'shadow-offset-x': var(--joy-elevation-semilight-offset-x),
3354
+ 'shadow-offset-y': var(--joy-elevation-semilight-offset-y),
3355
+ 'shadow-spread': var(--joy-elevation-semilight-spread),
3356
+ 'transition-duration': var(--mosaik-duration-short),
3481
3357
  'transition-mode': ease,
3482
3358
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
3483
3359
  'translate': none
@@ -3510,13 +3386,13 @@ $chat-input-attachment-list-props: (
3510
3386
  'padding-left': calc(var(--joy-layout-space) * 1.5),
3511
3387
  'padding-right': calc(var(--joy-layout-space) * 1.5),
3512
3388
  'padding-top': var(--joy-layout-space),
3513
- 'shadow': var(--joy-elevation-semilight-offset-x-0) var(--joy-elevation-semilight-offset-y-0) var(--joy-elevation-semilight-blur-0) var(--joy-elevation-semilight-spread-0) var(--joy-elevation-semilight-color-0),
3514
- 'shadow-blur': var(--joy-elevation-semilight-blur-0),
3515
- 'shadow-color': var(--joy-elevation-semilight-color-0),
3516
- 'shadow-offset-x': var(--joy-elevation-semilight-offset-x-0),
3517
- 'shadow-offset-y': var(--joy-elevation-semilight-offset-y-0),
3518
- 'shadow-spread': var(--joy-elevation-semilight-spread-0),
3519
- 'transition-duration': var(--joy-duration-short),
3389
+ 'shadow': var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color),
3390
+ 'shadow-blur': var(--joy-elevation-semilight-blur),
3391
+ 'shadow-color': var(--joy-elevation-semilight-color),
3392
+ 'shadow-offset-x': var(--joy-elevation-semilight-offset-x),
3393
+ 'shadow-offset-y': var(--joy-elevation-semilight-offset-y),
3394
+ 'shadow-spread': var(--joy-elevation-semilight-spread),
3395
+ 'transition-duration': var(--mosaik-duration-short),
3520
3396
  'transition-mode': ease,
3521
3397
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
3522
3398
  'translate': none
@@ -3588,13 +3464,13 @@ $chat-message-props: (
3588
3464
  'padding-left': calc(var(--joy-layout-space) * 2),
3589
3465
  'padding-right': calc(var(--joy-layout-space) * 2),
3590
3466
  'padding-top': var(--joy-layout-space),
3591
- 'shadow': var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1),
3592
- 'shadow-blur': var(--joy-elevation-light-blur-1),
3593
- 'shadow-color': var(--joy-elevation-light-color-1),
3594
- 'shadow-offset-x': var(--joy-elevation-light-offset-x-1),
3595
- 'shadow-offset-y': var(--joy-elevation-light-offset-y-1),
3596
- 'shadow-spread': var(--joy-elevation-light-spread-1),
3597
- 'transition-duration': var(--joy-duration-short),
3467
+ 'shadow': var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color),
3468
+ 'shadow-blur': var(--joy-elevation-light-blur),
3469
+ 'shadow-color': var(--joy-elevation-light-color),
3470
+ 'shadow-offset-x': var(--joy-elevation-light-offset-x),
3471
+ 'shadow-offset-y': var(--joy-elevation-light-offset-y),
3472
+ 'shadow-spread': var(--joy-elevation-light-spread),
3473
+ 'transition-duration': var(--mosaik-duration-short),
3598
3474
  'transition-mode': ease,
3599
3475
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate, transform),
3600
3476
  'translate': none,
@@ -3640,7 +3516,7 @@ $chat-message-avatar-props: (
3640
3516
  'shadow-offset-x': unset,
3641
3517
  'shadow-offset-y': unset,
3642
3518
  'shadow-spread': unset,
3643
- 'transition-duration': var(--joy-duration-short),
3519
+ 'transition-duration': var(--mosaik-duration-short),
3644
3520
  'transition-mode': ease,
3645
3521
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
3646
3522
  'translate': none
@@ -3674,7 +3550,7 @@ $chat-message-divider-props: (
3674
3550
  'shadow-offset-x': unset,
3675
3551
  'shadow-offset-y': unset,
3676
3552
  'shadow-spread': unset,
3677
- 'transition-duration': var(--joy-duration-short),
3553
+ 'transition-duration': var(--mosaik-duration-short),
3678
3554
  'transition-mode': ease,
3679
3555
  'transition-property': (color, opacity, transform),
3680
3556
  'translate': none
@@ -3708,7 +3584,7 @@ $chat-message-reaction-props: (
3708
3584
  'shadow-offset-x': unset,
3709
3585
  'shadow-offset-y': unset,
3710
3586
  'shadow-spread': unset,
3711
- 'transition-duration': var(--joy-duration-short),
3587
+ 'transition-duration': var(--mosaik-duration-short),
3712
3588
  'transition-mode': ease,
3713
3589
  'transition-property': (background-color, color, transform),
3714
3590
  'translate': none
@@ -3780,7 +3656,7 @@ $check-box-props: (
3780
3656
  'shadow-offset-x': unset,
3781
3657
  'shadow-offset-y': unset,
3782
3658
  'shadow-spread': unset,
3783
- 'transition-duration': var(--joy-duration-short),
3659
+ 'transition-duration': var(--mosaik-duration-short),
3784
3660
  'transition-mode': ease,
3785
3661
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
3786
3662
  'translate': none
@@ -3854,14 +3730,14 @@ $checkmark-props: (
3854
3730
  'padding-left': var(--joy-layout-space),
3855
3731
  'padding-right': var(--joy-layout-space),
3856
3732
  'padding-top': calc(var(--joy-layout-space) / 2),
3857
- 'shadow': var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1),
3858
- 'shadow-blur': var(--joy-elevation-light-blur-1),
3859
- 'shadow-color': var(--joy-elevation-light-color-1),
3860
- 'shadow-offset-x': var(--joy-elevation-light-offset-x-1),
3861
- 'shadow-offset-y': var(--joy-elevation-light-offset-y-1),
3862
- 'shadow-spread': var(--joy-elevation-light-spread-1),
3733
+ 'shadow': var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color),
3734
+ 'shadow-blur': var(--joy-elevation-light-blur),
3735
+ 'shadow-color': var(--joy-elevation-light-color),
3736
+ 'shadow-offset-x': var(--joy-elevation-light-offset-x),
3737
+ 'shadow-offset-y': var(--joy-elevation-light-offset-y),
3738
+ 'shadow-spread': var(--joy-elevation-light-spread),
3863
3739
  'thickness': 2px,
3864
- 'transition-duration': var(--joy-duration-short),
3740
+ 'transition-duration': var(--mosaik-duration-short),
3865
3741
  'transition-mode': ease,
3866
3742
  'transition-property': (background-color, color),
3867
3743
  'translate': none,
@@ -3902,13 +3778,13 @@ $chip-props: (
3902
3778
  'padding-top': var(--joy-layout-space),
3903
3779
  'ripple-color': unset,
3904
3780
  'ripple-duration': 0.20s,
3905
- 'shadow': var(--joy-elevation-light-offset-x-0) var(--joy-elevation-light-offset-y-0) var(--joy-elevation-light-blur-0) var(--joy-elevation-light-spread-0) var(--joy-elevation-light-color-0),
3906
- 'shadow-blur': var(--joy-elevation-light-blur-0),
3907
- 'shadow-color': var(--joy-elevation-light-color-0),
3908
- 'shadow-offset-x': var(--joy-elevation-light-offset-x-0),
3909
- 'shadow-offset-y': var(--joy-elevation-light-offset-y-0),
3910
- 'shadow-spread': var(--joy-elevation-light-spread-0),
3911
- 'transition-duration': var(--joy-duration-short),
3781
+ 'shadow': var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color),
3782
+ 'shadow-blur': var(--joy-elevation-light-blur),
3783
+ 'shadow-color': var(--joy-elevation-light-color),
3784
+ 'shadow-offset-x': var(--joy-elevation-light-offset-x),
3785
+ 'shadow-offset-y': var(--joy-elevation-light-offset-y),
3786
+ 'shadow-spread': var(--joy-elevation-light-spread),
3787
+ 'transition-duration': var(--mosaik-duration-short),
3912
3788
  'transition-mode': ease,
3913
3789
  'transition-property': (background-color, color, border-color, box-shadow, opacity, box-shadow),
3914
3790
  'translate': none
@@ -3928,6 +3804,9 @@ $chip-box-props: (
3928
3804
  'border-radius': var(--joy-layout-radius),
3929
3805
  'border-style': solid,
3930
3806
  'border-width': var(--joy-layout-thickness),
3807
+ 'focus-ring-active-width': 8px,
3808
+ 'focus-ring-color': var(--joy-scheme-highlight),
3809
+ 'focus-ring-inward-offset': 2px,
3931
3810
  'focus-ring-outward-offset': 0px,
3932
3811
  'focus-ring-width': 0px,
3933
3812
  'font-family': var(--joy-font-family),
@@ -3945,14 +3824,14 @@ $chip-box-props: (
3945
3824
  'padding-right': calc(var(--joy-layout-space) * 1.5),
3946
3825
  'padding-top': var(--joy-layout-space),
3947
3826
  'prefix-icon-size': 20px,
3948
- 'shadow': var(--joy-elevation-semilight-offset-x-0) var(--joy-elevation-semilight-offset-y-0) var(--joy-elevation-semilight-blur-0) var(--joy-elevation-semilight-spread-0) var(--joy-elevation-semilight-color-0),
3949
- 'shadow-blur': var(--joy-elevation-semilight-blur-0),
3950
- 'shadow-color': var(--joy-elevation-semilight-color-0),
3951
- 'shadow-offset-x': var(--joy-elevation-semilight-offset-x-0),
3952
- 'shadow-offset-y': var(--joy-elevation-semilight-offset-y-0),
3953
- 'shadow-spread': var(--joy-elevation-semilight-spread-0),
3827
+ 'shadow': var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color),
3828
+ 'shadow-blur': var(--joy-elevation-semilight-blur),
3829
+ 'shadow-color': var(--joy-elevation-semilight-color),
3830
+ 'shadow-offset-x': var(--joy-elevation-semilight-offset-x),
3831
+ 'shadow-offset-y': var(--joy-elevation-semilight-offset-y),
3832
+ 'shadow-spread': var(--joy-elevation-semilight-spread),
3954
3833
  'suffix-icon-size': 20px,
3955
- 'transition-duration': var(--joy-duration-short),
3834
+ 'transition-duration': var(--mosaik-duration-short),
3956
3835
  'transition-mode': ease,
3957
3836
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
3958
3837
  'translate': none
@@ -4013,7 +3892,7 @@ $choice-props: (
4013
3892
  'border-width': var(--joy-layout-thickness),
4014
3893
  'checkmark-border-radius': calc(var(--joy-layout-radius) / 2),
4015
3894
  'focus-ring-border-radius': calc(var(--joy-layout-radius) * 1.5),
4016
- 'focus-ring-color': var(--joy-color-light-secondary-400),
3895
+ 'focus-ring-color': var(--joy-scheme-highlight),
4017
3896
  'focus-ring-outward-offset': calc(var(--joy-layout-space) / 2),
4018
3897
  'font-family': var(--joy-font-family),
4019
3898
  'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
@@ -4034,7 +3913,7 @@ $choice-props: (
4034
3913
  'shadow-offset-x': unset,
4035
3914
  'shadow-offset-y': unset,
4036
3915
  'shadow-spread': unset,
4037
- 'transition-duration': var(--joy-duration-short),
3916
+ 'transition-duration': var(--mosaik-duration-short),
4038
3917
  'transition-mode': ease,
4039
3918
  'transition-property': (background-color, color, border-color, box-shadow),
4040
3919
  'translate': none
@@ -4073,7 +3952,7 @@ $choice-group-props: (
4073
3952
  'shadow-offset-x': unset,
4074
3953
  'shadow-offset-y': unset,
4075
3954
  'shadow-spread': unset,
4076
- 'transition-duration': var(--joy-duration-short),
3955
+ 'transition-duration': var(--mosaik-duration-short),
4077
3956
  'transition-mode': ease,
4078
3957
  'transition-property': (background-color, color, border-color, box-shadow, transform),
4079
3958
  'translate': none
@@ -4112,7 +3991,7 @@ $choice-group-header-props: (
4112
3991
  'shadow-offset-x': unset,
4113
3992
  'shadow-offset-y': unset,
4114
3993
  'shadow-spread': unset,
4115
- 'transition-duration': var(--joy-duration-short),
3994
+ 'transition-duration': var(--mosaik-duration-short),
4116
3995
  'transition-mode': ease,
4117
3996
  'transition-property': (color, transform),
4118
3997
  'translate': none
@@ -4156,7 +4035,7 @@ $clickable-props: (
4156
4035
  'shadow-offset-x': unset,
4157
4036
  'shadow-offset-y': unset,
4158
4037
  'shadow-spread': unset,
4159
- 'transition-duration': var(--joy-duration-short),
4038
+ 'transition-duration': var(--mosaik-duration-short),
4160
4039
  'transition-mode': ease,
4161
4040
  'transition-property': (border-color, background-color),
4162
4041
  'translate': none
@@ -4243,6 +4122,9 @@ $color-box-props: (
4243
4122
  'border-radius': var(--joy-layout-radius),
4244
4123
  'border-style': solid,
4245
4124
  'border-width': var(--joy-layout-thickness),
4125
+ 'focus-ring-active-width': 8px,
4126
+ 'focus-ring-color': var(--joy-scheme-highlight),
4127
+ 'focus-ring-inward-offset': 2px,
4246
4128
  'focus-ring-outward-offset': 0px,
4247
4129
  'focus-ring-width': 0px,
4248
4130
  'font-family': var(--joy-font-family),
@@ -4259,13 +4141,13 @@ $color-box-props: (
4259
4141
  'padding-left': calc(var(--joy-layout-space) * 1.5),
4260
4142
  'padding-right': calc(var(--joy-layout-space) * 1.5),
4261
4143
  'padding-top': var(--joy-layout-space),
4262
- 'shadow': var(--joy-elevation-semilight-offset-x-0) var(--joy-elevation-semilight-offset-y-0) var(--joy-elevation-semilight-blur-0) var(--joy-elevation-semilight-spread-0) var(--joy-elevation-semilight-color-0),
4263
- 'shadow-blur': var(--joy-elevation-semilight-blur-0),
4264
- 'shadow-color': var(--joy-elevation-semilight-color-0),
4265
- 'shadow-offset-x': var(--joy-elevation-semilight-offset-x-0),
4266
- 'shadow-offset-y': var(--joy-elevation-semilight-offset-y-0),
4267
- 'shadow-spread': var(--joy-elevation-semilight-spread-0),
4268
- 'transition-duration': var(--joy-duration-short),
4144
+ 'shadow': var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color),
4145
+ 'shadow-blur': var(--joy-elevation-semilight-blur),
4146
+ 'shadow-color': var(--joy-elevation-semilight-color),
4147
+ 'shadow-offset-x': var(--joy-elevation-semilight-offset-x),
4148
+ 'shadow-offset-y': var(--joy-elevation-semilight-offset-y),
4149
+ 'shadow-spread': var(--joy-elevation-semilight-spread),
4150
+ 'transition-duration': var(--mosaik-duration-short),
4269
4151
  'transition-mode': ease,
4270
4152
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
4271
4153
  'translate': none
@@ -4286,7 +4168,7 @@ $color-editor-props: (
4286
4168
  'border-style': solid,
4287
4169
  'border-width': var(--joy-layout-thickness),
4288
4170
  'focus-ring-active-width': 8px,
4289
- 'focus-ring-color': var(--joy-color-primary-500),
4171
+ 'focus-ring-color': var(--joy-scheme-highlight),
4290
4172
  'focus-ring-inward-offset': 2px,
4291
4173
  'focus-ring-outward-offset': 2px,
4292
4174
  'font-family': var(--joy-font-family),
@@ -4309,7 +4191,7 @@ $color-editor-props: (
4309
4191
  'shadow-offset-x': unset,
4310
4192
  'shadow-offset-y': unset,
4311
4193
  'shadow-spread': unset,
4312
- 'transition-duration': var(--joy-duration-short),
4194
+ 'transition-duration': var(--mosaik-duration-short),
4313
4195
  'transition-mode': ease,
4314
4196
  'transition-property': (background-color, border-color, box-shadow),
4315
4197
  'translate': none,
@@ -4332,7 +4214,7 @@ $color-editor-alpha-slider-props: (
4332
4214
  'border-width': 0,
4333
4215
  'checkerboard-size': 8px,
4334
4216
  'focus-ring-active-width': 8px,
4335
- 'focus-ring-color': var(--joy-color-primary-500),
4217
+ 'focus-ring-color': var(--joy-scheme-highlight),
4336
4218
  'focus-ring-inward-offset': 2px,
4337
4219
  'focus-ring-outward-offset': 2px,
4338
4220
  'font-family': unset,
@@ -4349,19 +4231,19 @@ $color-editor-alpha-slider-props: (
4349
4231
  'padding-left': unset,
4350
4232
  'padding-right': unset,
4351
4233
  'padding-top': unset,
4352
- 'shadow': var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1),
4353
- 'shadow-blur': var(--joy-elevation-light-blur-1),
4354
- 'shadow-color': var(--joy-elevation-light-color-1),
4355
- 'shadow-offset-x': var(--joy-elevation-light-offset-x-1),
4356
- 'shadow-offset-y': var(--joy-elevation-light-offset-y-1),
4357
- 'shadow-spread': var(--joy-elevation-light-spread-1),
4234
+ 'shadow': var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color),
4235
+ 'shadow-blur': var(--joy-elevation-light-blur),
4236
+ 'shadow-color': var(--joy-elevation-light-color),
4237
+ 'shadow-offset-x': var(--joy-elevation-light-offset-x),
4238
+ 'shadow-offset-y': var(--joy-elevation-light-offset-y),
4239
+ 'shadow-spread': var(--joy-elevation-light-spread),
4358
4240
  'thumb-background-color': var(--joy-scheme-highlight),
4359
4241
  'thumb-border-color': var(--joy-scheme-highlight),
4360
4242
  'thumb-border-radius': 50%,
4361
4243
  'thumb-border-width': var(--joy-layout-thickness),
4362
4244
  'thumb-shadow': var(--joy-elevation-light-light),
4363
4245
  'thumb-size': 14px,
4364
- 'transition-duration': var(--joy-duration-short),
4246
+ 'transition-duration': var(--mosaik-duration-short),
4365
4247
  'transition-mode': ease,
4366
4248
  'transition-property': (box-shadow, border-color),
4367
4249
  'translate': none,
@@ -4383,7 +4265,7 @@ $color-editor-area-props: (
4383
4265
  'border-style': none,
4384
4266
  'border-width': 0,
4385
4267
  'focus-ring-active-width': 8px,
4386
- 'focus-ring-color': var(--joy-color-primary-500),
4268
+ 'focus-ring-color': var(--joy-scheme-highlight),
4387
4269
  'focus-ring-inward-offset': 2px,
4388
4270
  'focus-ring-outward-offset': 2px,
4389
4271
  'font-family': unset,
@@ -4400,18 +4282,18 @@ $color-editor-area-props: (
4400
4282
  'padding-left': unset,
4401
4283
  'padding-right': unset,
4402
4284
  'padding-top': unset,
4403
- 'shadow': var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1),
4404
- 'shadow-blur': var(--joy-elevation-light-blur-1),
4405
- 'shadow-color': var(--joy-elevation-light-color-1),
4406
- 'shadow-offset-x': var(--joy-elevation-light-offset-x-1),
4407
- 'shadow-offset-y': var(--joy-elevation-light-offset-y-1),
4408
- 'shadow-spread': var(--joy-elevation-light-spread-1),
4285
+ 'shadow': var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color),
4286
+ 'shadow-blur': var(--joy-elevation-light-blur),
4287
+ 'shadow-color': var(--joy-elevation-light-color),
4288
+ 'shadow-offset-x': var(--joy-elevation-light-offset-x),
4289
+ 'shadow-offset-y': var(--joy-elevation-light-offset-y),
4290
+ 'shadow-spread': var(--joy-elevation-light-spread),
4409
4291
  'thumb-border-color': var(--joy-scheme-surface),
4410
4292
  'thumb-border-radius': 50%,
4411
4293
  'thumb-border-width': var(--joy-layout-thickness),
4412
4294
  'thumb-shadow': var(--joy-elevation-light-light),
4413
4295
  'thumb-size': calc(var(--joy-layout-space) * 1.5),
4414
- 'transition-duration': var(--joy-duration-short),
4296
+ 'transition-duration': var(--mosaik-duration-short),
4415
4297
  'transition-mode': ease,
4416
4298
  'transition-property': (box-shadow, border-color),
4417
4299
  'translate': none,
@@ -4433,7 +4315,7 @@ $color-editor-hue-slider-props: (
4433
4315
  'border-style': none,
4434
4316
  'border-width': 0,
4435
4317
  'focus-ring-active-width': 8px,
4436
- 'focus-ring-color': var(--joy-color-primary-500),
4318
+ 'focus-ring-color': var(--joy-scheme-highlight),
4437
4319
  'focus-ring-inward-offset': 2px,
4438
4320
  'focus-ring-outward-offset': 2px,
4439
4321
  'font-family': unset,
@@ -4450,19 +4332,19 @@ $color-editor-hue-slider-props: (
4450
4332
  'padding-left': unset,
4451
4333
  'padding-right': unset,
4452
4334
  'padding-top': unset,
4453
- 'shadow': var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1),
4454
- 'shadow-blur': var(--joy-elevation-light-blur-1),
4455
- 'shadow-color': var(--joy-elevation-light-color-1),
4456
- 'shadow-offset-x': var(--joy-elevation-light-offset-x-1),
4457
- 'shadow-offset-y': var(--joy-elevation-light-offset-y-1),
4458
- 'shadow-spread': var(--joy-elevation-light-spread-1),
4335
+ 'shadow': var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color),
4336
+ 'shadow-blur': var(--joy-elevation-light-blur),
4337
+ 'shadow-color': var(--joy-elevation-light-color),
4338
+ 'shadow-offset-x': var(--joy-elevation-light-offset-x),
4339
+ 'shadow-offset-y': var(--joy-elevation-light-offset-y),
4340
+ 'shadow-spread': var(--joy-elevation-light-spread),
4459
4341
  'thumb-background-color': var(--joy-scheme-highlight),
4460
4342
  'thumb-border-color': var(--joy-scheme-highlight),
4461
4343
  'thumb-border-radius': 50%,
4462
4344
  'thumb-border-width': var(--joy-layout-thickness),
4463
4345
  'thumb-shadow': var(--joy-elevation-light-light),
4464
4346
  'thumb-size': 14px,
4465
- 'transition-duration': var(--joy-duration-short),
4347
+ 'transition-duration': var(--mosaik-duration-short),
4466
4348
  'transition-mode': ease,
4467
4349
  'transition-property': (box-shadow, border-color),
4468
4350
  'translate': none,
@@ -4510,7 +4392,7 @@ $color-editor-inputs-props: (
4510
4392
  'shadow-offset-x': unset,
4511
4393
  'shadow-offset-y': unset,
4512
4394
  'shadow-spread': unset,
4513
- 'transition-duration': var(--joy-duration-short),
4395
+ 'transition-duration': var(--mosaik-duration-short),
4514
4396
  'transition-mode': ease,
4515
4397
  'transition-property': (border-color, background-color),
4516
4398
  'translate': none,
@@ -4557,7 +4439,7 @@ $color-editor-palette-props: (
4557
4439
  'shadow-offset-x': unset,
4558
4440
  'shadow-offset-y': unset,
4559
4441
  'shadow-spread': unset,
4560
- 'transition-duration': var(--joy-duration-short),
4442
+ 'transition-duration': var(--mosaik-duration-short),
4561
4443
  'transition-mode': ease,
4562
4444
  'transition-property': (transform, border-color),
4563
4445
  'translate': none,
@@ -4579,7 +4461,7 @@ $color-editor-shade-slider-props: (
4579
4461
  'border-style': none,
4580
4462
  'border-width': 0,
4581
4463
  'focus-ring-active-width': 8px,
4582
- 'focus-ring-color': var(--joy-color-primary-500),
4464
+ 'focus-ring-color': var(--joy-scheme-highlight),
4583
4465
  'focus-ring-inward-offset': 2px,
4584
4466
  'focus-ring-outward-offset': 2px,
4585
4467
  'font-family': unset,
@@ -4596,19 +4478,19 @@ $color-editor-shade-slider-props: (
4596
4478
  'padding-left': unset,
4597
4479
  'padding-right': unset,
4598
4480
  'padding-top': unset,
4599
- 'shadow': var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1),
4600
- 'shadow-blur': var(--joy-elevation-light-blur-1),
4601
- 'shadow-color': var(--joy-elevation-light-color-1),
4602
- 'shadow-offset-x': var(--joy-elevation-light-offset-x-1),
4603
- 'shadow-offset-y': var(--joy-elevation-light-offset-y-1),
4604
- 'shadow-spread': var(--joy-elevation-light-spread-1),
4481
+ 'shadow': var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color),
4482
+ 'shadow-blur': var(--joy-elevation-light-blur),
4483
+ 'shadow-color': var(--joy-elevation-light-color),
4484
+ 'shadow-offset-x': var(--joy-elevation-light-offset-x),
4485
+ 'shadow-offset-y': var(--joy-elevation-light-offset-y),
4486
+ 'shadow-spread': var(--joy-elevation-light-spread),
4605
4487
  'thumb-background-color': var(--joy-scheme-highlight),
4606
4488
  'thumb-border-color': var(--joy-scheme-highlight),
4607
4489
  'thumb-border-radius': 50%,
4608
4490
  'thumb-border-width': var(--joy-layout-thickness),
4609
4491
  'thumb-shadow': var(--joy-elevation-light-light),
4610
4492
  'thumb-size': 14px,
4611
- 'transition-duration': var(--joy-duration-short),
4493
+ 'transition-duration': var(--mosaik-duration-short),
4612
4494
  'transition-mode': ease,
4613
4495
  'transition-property': (box-shadow, border-color),
4614
4496
  'translate': none,
@@ -4650,7 +4532,7 @@ $color-editor-swatch-props: (
4650
4532
  'shadow-offset-x': unset,
4651
4533
  'shadow-offset-y': unset,
4652
4534
  'shadow-spread': unset,
4653
- 'transition-duration': var(--joy-duration-short),
4535
+ 'transition-duration': var(--mosaik-duration-short),
4654
4536
  'transition-mode': ease,
4655
4537
  'transition-property': (opacity, background-color),
4656
4538
  'translate': none,
@@ -4691,7 +4573,7 @@ $color-picker-props: (
4691
4573
  'shadow-offset-y': unset,
4692
4574
  'shadow-spread': unset,
4693
4575
  'size': 24px,
4694
- 'transition-duration': var(--joy-duration-short),
4576
+ 'transition-duration': var(--mosaik-duration-short),
4695
4577
  'transition-mode': ease,
4696
4578
  'transition-property': (all),
4697
4579
  'translate': none
@@ -4770,7 +4652,7 @@ $color-swatch-props: (
4770
4652
  'shadow-offset-y': unset,
4771
4653
  'shadow-spread': unset,
4772
4654
  'size': 24px,
4773
- 'transition-duration': var(--joy-duration-short),
4655
+ 'transition-duration': var(--mosaik-duration-short),
4774
4656
  'transition-mode': ease,
4775
4657
  'transition-property': (all),
4776
4658
  'translate': none
@@ -4809,7 +4691,7 @@ $color-swatch-group-props: (
4809
4691
  'shadow-offset-x': unset,
4810
4692
  'shadow-offset-y': unset,
4811
4693
  'shadow-spread': unset,
4812
- 'transition-duration': var(--joy-duration-short),
4694
+ 'transition-duration': var(--mosaik-duration-short),
4813
4695
  'transition-mode': ease,
4814
4696
  'transition-property': (margin-left),
4815
4697
  'translate': none
@@ -4849,7 +4731,7 @@ $color-thumb-props: (
4849
4731
  'shadow-offset-y': unset,
4850
4732
  'shadow-spread': unset,
4851
4733
  'size': 24px,
4852
- 'transition-duration': var(--joy-duration-short),
4734
+ 'transition-duration': var(--mosaik-duration-short),
4853
4735
  'transition-mode': ease,
4854
4736
  'transition-property': (all),
4855
4737
  'translate': none
@@ -4864,30 +4746,36 @@ $color-thumb-props: (
4864
4746
  * ------------------------------------------------------------------------------
4865
4747
  */
4866
4748
  $combo-props: (
4749
+ 'background-color': var(--joy-scheme-background),
4750
+ 'border-color': var(--joy-scheme-highlight),
4751
+ 'border-radius': var(--joy-layout-radius),
4752
+ 'border-style': solid,
4753
+ 'border-width': var(--joy-layout-thickness),
4867
4754
  'focus-ring-active-width': 8px,
4868
- 'focus-ring-color': var(--joy-color-light-secondary-400),
4755
+ 'focus-ring-color': var(--joy-scheme-highlight),
4869
4756
  'focus-ring-inward-offset': 2px,
4870
- 'focus-ring-outward-offset': 2px,
4757
+ 'focus-ring-outward-offset': 0px,
4758
+ 'focus-ring-width': 0px,
4871
4759
  'font-family': var(--joy-font-family),
4872
4760
  'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
4873
4761
  'font-line-height': var(--joy-typography-body2-line-height),
4874
4762
  'font-size': var(--joy-typography-body2-font-size),
4875
4763
  'font-text-decoration': var(--joy-typography-body2-text-decoration),
4876
4764
  'font-text-transform': var(--joy-typography-body2-text-transform),
4877
- 'font-weight': var(--joy-typography-body2-font-weight),
4765
+ 'font-weight': normal,
4878
4766
  'foreground-color': var(--joy-scheme-foreground),
4879
4767
  'gap': var(--joy-layout-space),
4880
- 'padding-bottom': calc(var(--joy-layout-space) / 2),
4768
+ 'padding-bottom': var(--joy-layout-space),
4881
4769
  'padding-left': calc(var(--joy-layout-space) * 1.5),
4882
4770
  'padding-right': calc(var(--joy-layout-space) * 1.5),
4883
- 'padding-top': calc(var(--joy-layout-space) / 2),
4771
+ 'padding-top': var(--joy-layout-space),
4884
4772
  'shadow': unset unset unset unset unset,
4885
4773
  'shadow-blur': unset,
4886
4774
  'shadow-color': unset,
4887
4775
  'shadow-offset-x': unset,
4888
4776
  'shadow-offset-y': unset,
4889
4777
  'shadow-spread': unset,
4890
- 'transition-duration': var(--joy-duration-short),
4778
+ 'transition-duration': var(--mosaik-duration-short),
4891
4779
  'transition-mode': ease,
4892
4780
  'transition-property': (transform),
4893
4781
  'translate': none
@@ -4908,7 +4796,7 @@ $combo-item-props: (
4908
4796
  'border-style': solid,
4909
4797
  'border-width': 0px,
4910
4798
  'focus-ring-active-width': 8px,
4911
- 'focus-ring-color': var(--joy-color-light-secondary-400),
4799
+ 'focus-ring-color': var(--joy-scheme-highlight),
4912
4800
  'focus-ring-inward-offset': 2px,
4913
4801
  'focus-ring-outward-offset': 2px,
4914
4802
  'font-family': var(--joy-font-family),
@@ -4932,7 +4820,7 @@ $combo-item-props: (
4932
4820
  'shadow-offset-x': unset,
4933
4821
  'shadow-offset-y': unset,
4934
4822
  'shadow-spread': unset,
4935
- 'transition-duration': var(--joy-duration-short),
4823
+ 'transition-duration': var(--mosaik-duration-short),
4936
4824
  'transition-mode': ease,
4937
4825
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
4938
4826
  'translate': none
@@ -4968,7 +4856,7 @@ $comment-props: (
4968
4856
  'shadow-offset-x': unset,
4969
4857
  'shadow-offset-y': unset,
4970
4858
  'shadow-spread': unset,
4971
- 'transition-duration': var(--joy-duration-short),
4859
+ 'transition-duration': var(--mosaik-duration-short),
4972
4860
  'transition-mode': ease,
4973
4861
  'transition-property': (color, background-color, border-color, opacity, transform),
4974
4862
  'translate': none
@@ -5013,13 +4901,13 @@ $compound-button-props: (
5013
4901
  'progress-ring-width': var(--joy-layout-thickness),
5014
4902
  'ripple-color': unset,
5015
4903
  'ripple-duration': 0.20s,
5016
- 'shadow': var(--joy-elevation-semilight-offset-x-0) var(--joy-elevation-semilight-offset-y-0) var(--joy-elevation-semilight-blur-0) var(--joy-elevation-semilight-spread-0) var(--joy-elevation-semilight-color-0),
5017
- 'shadow-blur': var(--joy-elevation-semilight-blur-0),
5018
- 'shadow-color': var(--joy-elevation-semilight-color-0),
5019
- 'shadow-offset-x': var(--joy-elevation-semilight-offset-x-0),
5020
- 'shadow-offset-y': var(--joy-elevation-semilight-offset-y-0),
5021
- 'shadow-spread': var(--joy-elevation-semilight-spread-0),
5022
- 'transition-duration': var(--joy-duration-short),
4904
+ 'shadow': var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color),
4905
+ 'shadow-blur': var(--joy-elevation-semilight-blur),
4906
+ 'shadow-color': var(--joy-elevation-semilight-color),
4907
+ 'shadow-offset-x': var(--joy-elevation-semilight-offset-x),
4908
+ 'shadow-offset-y': var(--joy-elevation-semilight-offset-y),
4909
+ 'shadow-spread': var(--joy-elevation-semilight-spread),
4910
+ 'transition-duration': var(--mosaik-duration-short),
5023
4911
  'transition-mode': ease,
5024
4912
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
5025
4913
  'translate': none,
@@ -5173,6 +5061,10 @@ $date-box-props: (
5173
5061
  'border-radius': var(--joy-layout-radius),
5174
5062
  'border-style': solid,
5175
5063
  'border-width': var(--joy-layout-thickness),
5064
+ 'focus-ring-active-width': 8px,
5065
+ 'focus-ring-color': var(--joy-scheme-highlight),
5066
+ 'focus-ring-inward-offset': 2px,
5067
+ 'focus-ring-outward-offset': 0px,
5176
5068
  'focus-ring-width': 0px,
5177
5069
  'font-family': var(--joy-font-family),
5178
5070
  'font-letter-spacing': unset,
@@ -5188,13 +5080,13 @@ $date-box-props: (
5188
5080
  'padding-left': calc(var(--joy-layout-space) * 1.5),
5189
5081
  'padding-right': calc(var(--joy-layout-space) * 1.5),
5190
5082
  'padding-top': var(--joy-layout-space),
5191
- 'shadow': var(--joy-elevation-semilight-offset-x-0) var(--joy-elevation-semilight-offset-y-0) var(--joy-elevation-semilight-blur-0) var(--joy-elevation-semilight-spread-0) var(--joy-elevation-semilight-color-0),
5192
- 'shadow-blur': var(--joy-elevation-semilight-blur-0),
5193
- 'shadow-color': var(--joy-elevation-semilight-color-0),
5194
- 'shadow-offset-x': var(--joy-elevation-semilight-offset-x-0),
5195
- 'shadow-offset-y': var(--joy-elevation-semilight-offset-y-0),
5196
- 'shadow-spread': var(--joy-elevation-semilight-spread-0),
5197
- 'transition-duration': var(--joy-duration-short),
5083
+ 'shadow': var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color),
5084
+ 'shadow-blur': var(--joy-elevation-semilight-blur),
5085
+ 'shadow-color': var(--joy-elevation-semilight-color),
5086
+ 'shadow-offset-x': var(--joy-elevation-semilight-offset-x),
5087
+ 'shadow-offset-y': var(--joy-elevation-semilight-offset-y),
5088
+ 'shadow-spread': var(--joy-elevation-semilight-spread),
5089
+ 'transition-duration': var(--mosaik-duration-short),
5198
5090
  'transition-mode': ease,
5199
5091
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
5200
5092
  'translate': none
@@ -5214,6 +5106,11 @@ $date-time-box-props: (
5214
5106
  'border-radius': var(--joy-layout-radius),
5215
5107
  'border-style': solid,
5216
5108
  'border-width': var(--joy-layout-thickness),
5109
+ 'focus-ring-active-width': 8px,
5110
+ 'focus-ring-color': var(--joy-scheme-highlight),
5111
+ 'focus-ring-inward-offset': 2px,
5112
+ 'focus-ring-outward-offset': 0px,
5113
+ 'focus-ring-width': 0px,
5217
5114
  'font-family': var(--joy-font-family),
5218
5115
  'font-letter-spacing': unset,
5219
5116
  'font-line-height': unset,
@@ -5234,7 +5131,7 @@ $date-time-box-props: (
5234
5131
  'shadow-offset-x': unset,
5235
5132
  'shadow-offset-y': unset,
5236
5133
  'shadow-spread': unset,
5237
- 'transition-duration': var(--joy-duration-short),
5134
+ 'transition-duration': var(--mosaik-duration-short),
5238
5135
  'transition-mode': ease,
5239
5136
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
5240
5137
  'translate': none
@@ -5409,13 +5306,13 @@ $dialog-props: (
5409
5306
  'padding-left': calc(var(--joy-layout-space)*2),
5410
5307
  'padding-right': calc(var(--joy-layout-space)*2),
5411
5308
  'padding-top': var(--joy-layout-space),
5412
- 'shadow': var(--joy-elevation-regular-offset-x-0) var(--joy-elevation-regular-offset-y-0) var(--joy-elevation-regular-blur-0) var(--joy-elevation-regular-spread-0) var(--joy-elevation-regular-color-0),
5413
- 'shadow-blur': var(--joy-elevation-regular-blur-0),
5414
- 'shadow-color': var(--joy-elevation-regular-color-0),
5415
- 'shadow-offset-x': var(--joy-elevation-regular-offset-x-0),
5416
- 'shadow-offset-y': var(--joy-elevation-regular-offset-y-0),
5417
- 'shadow-spread': var(--joy-elevation-regular-spread-0),
5418
- 'transition-duration': var(--joy-duration-short),
5309
+ 'shadow': var(--joy-elevation-regular-offset-x) var(--joy-elevation-regular-offset-y) var(--joy-elevation-regular-blur) var(--joy-elevation-regular-spread) var(--joy-elevation-regular-color),
5310
+ 'shadow-blur': var(--joy-elevation-regular-blur),
5311
+ 'shadow-color': var(--joy-elevation-regular-color),
5312
+ 'shadow-offset-x': var(--joy-elevation-regular-offset-x),
5313
+ 'shadow-offset-y': var(--joy-elevation-regular-offset-y),
5314
+ 'shadow-spread': var(--joy-elevation-regular-spread),
5315
+ 'transition-duration': var(--mosaik-duration-short),
5419
5316
  'transition-mode': ease,
5420
5317
  'transition-property': (background-color, color, border-color, opacity, box-shadow, margin),
5421
5318
  'translate': none
@@ -5721,7 +5618,7 @@ $divider-props: (
5721
5618
  'shadow-offset-y': unset,
5722
5619
  'shadow-spread': unset,
5723
5620
  'thickness': var(--joy-layout-thickness),
5724
- 'transition-duration': var(--joy-duration-short),
5621
+ 'transition-duration': var(--mosaik-duration-short),
5725
5622
  'transition-mode': ease,
5726
5623
  'transition-property': (background-color, color),
5727
5624
  'translate': none
@@ -5794,7 +5691,7 @@ $dot-props: (
5794
5691
  'shadow-offset-y': unset,
5795
5692
  'shadow-spread': unset,
5796
5693
  'size': 16px,
5797
- 'transition-duration': var(--joy-duration-short),
5694
+ 'transition-duration': var(--mosaik-duration-short),
5798
5695
  'transition-mode': ease,
5799
5696
  'transition-property': (all),
5800
5697
  'translate': none
@@ -5833,7 +5730,7 @@ $dot-group-props: (
5833
5730
  'shadow-offset-x': unset,
5834
5731
  'shadow-offset-y': unset,
5835
5732
  'shadow-spread': unset,
5836
- 'transition-duration': var(--joy-duration-short),
5733
+ 'transition-duration': var(--mosaik-duration-short),
5837
5734
  'transition-mode': ease,
5838
5735
  'transition-property': (margin-left),
5839
5736
  'translate': none
@@ -5875,7 +5772,7 @@ $drawer-props: (
5875
5772
  'shadow-offset-x': unset,
5876
5773
  'shadow-offset-y': unset,
5877
5774
  'shadow-spread': unset,
5878
- 'transition-duration': var(--joy-duration-short),
5775
+ 'transition-duration': var(--mosaik-duration-short),
5879
5776
  'transition-mode': ease,
5880
5777
  'transition-property': (background-color, color, border-color, opacity, box-shadow, margin, width, max-width, height),
5881
5778
  'translate': none,
@@ -6168,7 +6065,7 @@ $drop-down-button-props: (
6168
6065
  'shadow-offset-y': unset,
6169
6066
  'shadow-spread': unset,
6170
6067
  'transform': none,
6171
- 'transition-duration': var(--joy-duration-short),
6068
+ 'transition-duration': var(--mosaik-duration-short),
6172
6069
  'transition-mode': ease,
6173
6070
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
6174
6071
  'translate': none,
@@ -6260,6 +6157,11 @@ $duration-box-props: (
6260
6157
  'border-radius': var(--joy-layout-radius),
6261
6158
  'border-style': solid,
6262
6159
  'border-width': var(--joy-layout-thickness),
6160
+ 'focus-ring-active-width': 8px,
6161
+ 'focus-ring-color': var(--joy-scheme-highlight),
6162
+ 'focus-ring-inward-offset': 2px,
6163
+ 'focus-ring-outward-offset': 0px,
6164
+ 'focus-ring-width': 0px,
6263
6165
  'font-family': var(--joy-font-family),
6264
6166
  'font-letter-spacing': unset,
6265
6167
  'font-line-height': unset,
@@ -6280,7 +6182,7 @@ $duration-box-props: (
6280
6182
  'shadow-offset-x': unset,
6281
6183
  'shadow-offset-y': unset,
6282
6184
  'shadow-spread': unset,
6283
- 'transition-duration': var(--joy-duration-short),
6185
+ 'transition-duration': var(--mosaik-duration-short),
6284
6186
  'transition-mode': ease,
6285
6187
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
6286
6188
  'translate': none
@@ -6659,7 +6561,7 @@ $error-props: (
6659
6561
  'shadow-offset-x': unset,
6660
6562
  'shadow-offset-y': unset,
6661
6563
  'shadow-spread': unset,
6662
- 'transition-duration': var(--joy-duration-short),
6564
+ 'transition-duration': var(--mosaik-duration-short),
6663
6565
  'transition-mode': ease,
6664
6566
  'transition-property': (all),
6665
6567
  'translate': none
@@ -6768,13 +6670,13 @@ $expander-props: (
6768
6670
  'padding-top': var(--joy-layout-space),
6769
6671
  'ripple-color': unset,
6770
6672
  'ripple-duration': 0.20s,
6771
- 'shadow': var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1),
6772
- 'shadow-blur': var(--joy-elevation-light-blur-1),
6773
- 'shadow-color': var(--joy-elevation-light-color-1),
6774
- 'shadow-offset-x': var(--joy-elevation-light-offset-x-1),
6775
- 'shadow-offset-y': var(--joy-elevation-light-offset-y-1),
6776
- 'shadow-spread': var(--joy-elevation-light-spread-1),
6777
- 'transition-duration': var(--joy-duration-short),
6673
+ 'shadow': var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color),
6674
+ 'shadow-blur': var(--joy-elevation-light-blur),
6675
+ 'shadow-color': var(--joy-elevation-light-color),
6676
+ 'shadow-offset-x': var(--joy-elevation-light-offset-x),
6677
+ 'shadow-offset-y': var(--joy-elevation-light-offset-y),
6678
+ 'shadow-spread': var(--joy-elevation-light-spread),
6679
+ 'transition-duration': var(--mosaik-duration-short),
6778
6680
  'transition-mode': ease,
6779
6681
  'transition-property': (background-color, color, border-color, box-shadow, opacity, box-shadow, transform, margin),
6780
6682
  'translate': none
@@ -6813,7 +6715,7 @@ $expander-group-props: (
6813
6715
  'shadow-offset-x': unset,
6814
6716
  'shadow-offset-y': unset,
6815
6717
  'shadow-spread': unset,
6816
- 'transition-duration': var(--joy-duration-short),
6718
+ 'transition-duration': var(--mosaik-duration-short),
6817
6719
  'transition-mode': ease-out,
6818
6720
  'transition-property': (margin),
6819
6721
  'translate': none
@@ -6905,6 +6807,10 @@ $file-box-props: (
6905
6807
  'border-radius': var(--joy-layout-radius),
6906
6808
  'border-style': solid,
6907
6809
  'border-width': var(--joy-layout-thickness),
6810
+ 'focus-ring-active-width': 8px,
6811
+ 'focus-ring-color': var(--joy-scheme-highlight),
6812
+ 'focus-ring-inward-offset': 2px,
6813
+ 'focus-ring-outward-offset': 0px,
6908
6814
  'focus-ring-width': 0px,
6909
6815
  'font-family': var(--joy-font-family),
6910
6816
  'font-letter-spacing': unset,
@@ -6920,13 +6826,13 @@ $file-box-props: (
6920
6826
  'padding-left': calc(var(--joy-layout-space) * 1.5),
6921
6827
  'padding-right': calc(var(--joy-layout-space) * 1.5),
6922
6828
  'padding-top': var(--joy-layout-space),
6923
- 'shadow': var(--joy-elevation-semilight-offset-x-0) var(--joy-elevation-semilight-offset-y-0) var(--joy-elevation-semilight-blur-0) var(--joy-elevation-semilight-spread-0) var(--joy-elevation-semilight-color-0),
6924
- 'shadow-blur': var(--joy-elevation-semilight-blur-0),
6925
- 'shadow-color': var(--joy-elevation-semilight-color-0),
6926
- 'shadow-offset-x': var(--joy-elevation-semilight-offset-x-0),
6927
- 'shadow-offset-y': var(--joy-elevation-semilight-offset-y-0),
6928
- 'shadow-spread': var(--joy-elevation-semilight-spread-0),
6929
- 'transition-duration': var(--joy-duration-short),
6829
+ 'shadow': var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color),
6830
+ 'shadow-blur': var(--joy-elevation-semilight-blur),
6831
+ 'shadow-color': var(--joy-elevation-semilight-color),
6832
+ 'shadow-offset-x': var(--joy-elevation-semilight-offset-x),
6833
+ 'shadow-offset-y': var(--joy-elevation-semilight-offset-y),
6834
+ 'shadow-spread': var(--joy-elevation-semilight-spread),
6835
+ 'transition-duration': var(--mosaik-duration-short),
6930
6836
  'transition-mode': ease,
6931
6837
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
6932
6838
  'translate': none
@@ -7118,7 +7024,7 @@ $floating-props: (
7118
7024
  'shadow-offset-x': unset,
7119
7025
  'shadow-offset-y': unset,
7120
7026
  'shadow-spread': unset,
7121
- 'transition-duration': var(--joy-duration-short),
7027
+ 'transition-duration': var(--mosaik-duration-short),
7122
7028
  'transition-mode': ease,
7123
7029
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
7124
7030
  'translate': none
@@ -7162,13 +7068,13 @@ $floating-action-button-props: (
7162
7068
  'progress-ring-width': var(--joy-layout-thickness),
7163
7069
  'ripple-color': unset,
7164
7070
  'ripple-duration': 0.20s,
7165
- 'shadow': var(--joy-elevation-semilight-offset-x-0) var(--joy-elevation-semilight-offset-y-0) var(--joy-elevation-semilight-blur-0) var(--joy-elevation-semilight-spread-0) var(--joy-elevation-semilight-color-0),
7166
- 'shadow-blur': var(--joy-elevation-semilight-blur-0),
7167
- 'shadow-color': var(--joy-elevation-semilight-color-0),
7168
- 'shadow-offset-x': var(--joy-elevation-semilight-offset-x-0),
7169
- 'shadow-offset-y': var(--joy-elevation-semilight-offset-y-0),
7170
- 'shadow-spread': var(--joy-elevation-semilight-spread-0),
7171
- 'transition-duration': var(--joy-duration-short),
7071
+ 'shadow': var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color),
7072
+ 'shadow-blur': var(--joy-elevation-semilight-blur),
7073
+ 'shadow-color': var(--joy-elevation-semilight-color),
7074
+ 'shadow-offset-x': var(--joy-elevation-semilight-offset-x),
7075
+ 'shadow-offset-y': var(--joy-elevation-semilight-offset-y),
7076
+ 'shadow-spread': var(--joy-elevation-semilight-spread),
7077
+ 'transition-duration': var(--mosaik-duration-short),
7172
7078
  'transition-mode': ease,
7173
7079
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
7174
7080
  'translate': none
@@ -7201,7 +7107,7 @@ $floating-action-button-group-props: (
7201
7107
  'shadow-offset-x': unset,
7202
7108
  'shadow-offset-y': unset,
7203
7109
  'shadow-spread': unset,
7204
- 'transition-duration': var(--joy-duration-short),
7110
+ 'transition-duration': var(--mosaik-duration-short),
7205
7111
  'transition-mode': ease,
7206
7112
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
7207
7113
  'translate': none
@@ -7403,13 +7309,13 @@ $flow-board-column-item-props: (
7403
7309
  'padding-right': unset,
7404
7310
  'padding-top': unset,
7405
7311
  'pinned-background-color': var(--joy-scheme-surface),
7406
- 'shadow': var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1),
7407
- 'shadow-blur': var(--joy-elevation-light-blur-1),
7408
- 'shadow-color': var(--joy-elevation-light-color-1),
7409
- 'shadow-offset-x': var(--joy-elevation-light-offset-x-1),
7410
- 'shadow-offset-y': var(--joy-elevation-light-offset-y-1),
7411
- 'shadow-spread': var(--joy-elevation-light-spread-1),
7412
- 'transition-duration': var(--joy-duration-medium),
7312
+ 'shadow': var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color),
7313
+ 'shadow-blur': var(--joy-elevation-light-blur),
7314
+ 'shadow-color': var(--joy-elevation-light-color),
7315
+ 'shadow-offset-x': var(--joy-elevation-light-offset-x),
7316
+ 'shadow-offset-y': var(--joy-elevation-light-offset-y),
7317
+ 'shadow-spread': var(--joy-elevation-light-spread),
7318
+ 'transition-duration': var(--mosaik-duration-medium),
7413
7319
  'transition-mode': ease,
7414
7320
  'transition-property': (background-color, box-shadow, transform),
7415
7321
  'translate': none
@@ -7493,7 +7399,7 @@ $focus-ring-props: (
7493
7399
  'shadow-offset-y': var(--focus-ring-y, 0),
7494
7400
  'shadow-spread': var(--focus-ring-width),
7495
7401
  'shape': 6px,
7496
- 'transition-duration': var(--joy-duration-short),
7402
+ 'transition-duration': var(--mosaik-duration-short),
7497
7403
  'transition-mode': ease,
7498
7404
  'transition-property': (all),
7499
7405
  'translate': none,
@@ -7526,7 +7432,7 @@ $font-editor-props: (
7526
7432
  'border-style': solid,
7527
7433
  'border-width': var(--joy-layout-thickness),
7528
7434
  'focus-ring-active-width': 8px,
7529
- 'focus-ring-color': var(--joy-color-primary-500),
7435
+ 'focus-ring-color': var(--joy-scheme-highlight),
7530
7436
  'focus-ring-inward-offset': 2px,
7531
7437
  'focus-ring-outward-offset': 2px,
7532
7438
  'font-category-font-size': var(--joy-typography-caption-font-size),
@@ -7562,7 +7468,7 @@ $font-editor-props: (
7562
7468
  'shadow-offset-x': unset,
7563
7469
  'shadow-offset-y': unset,
7564
7470
  'shadow-spread': unset,
7565
- 'transition-duration': var(--joy-duration-short),
7471
+ 'transition-duration': var(--mosaik-duration-short),
7566
7472
  'transition-mode': ease,
7567
7473
  'transition-property': unset,
7568
7474
  'translate': none,
@@ -7775,7 +7681,7 @@ $ghost-props: (
7775
7681
  'shadow-offset-x': unset,
7776
7682
  'shadow-offset-y': unset,
7777
7683
  'shadow-spread': unset,
7778
- 'transition-duration': var(--joy-duration-short),
7684
+ 'transition-duration': var(--mosaik-duration-short),
7779
7685
  'transition-mode': ease,
7780
7686
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
7781
7687
  'translate': none
@@ -7913,7 +7819,7 @@ $hint-props: (
7913
7819
  'shadow-offset-x': unset,
7914
7820
  'shadow-offset-y': unset,
7915
7821
  'shadow-spread': unset,
7916
- 'transition-duration': var(--joy-duration-short),
7822
+ 'transition-duration': var(--mosaik-duration-short),
7917
7823
  'transition-mode': ease,
7918
7824
  'transition-property': (all),
7919
7825
  'translate': none
@@ -7952,7 +7858,7 @@ $icon-props: (
7952
7858
  'shadow-offset-x': unset,
7953
7859
  'shadow-offset-y': unset,
7954
7860
  'shadow-spread': unset,
7955
- 'transition-duration': var(--joy-duration-short),
7861
+ 'transition-duration': var(--mosaik-duration-short),
7956
7862
  'transition-mode': ease,
7957
7863
  'transition-property': (all),
7958
7864
  'translate': none
@@ -8000,7 +7906,7 @@ $image-props: (
8000
7906
  'shadow-offset-y': unset,
8001
7907
  'shadow-spread': unset,
8002
7908
  'thumbnail-blur': 2px,
8003
- 'transition-duration': var(--joy-duration-short),
7909
+ 'transition-duration': var(--mosaik-duration-short),
8004
7910
  'transition-mode': ease,
8005
7911
  'transition-property': (color, background-color, border-color, opacity, box-shadow),
8006
7912
  'translate': none
@@ -8039,7 +7945,7 @@ $indicator-props: (
8039
7945
  'shadow-offset-x': unset,
8040
7946
  'shadow-offset-y': unset,
8041
7947
  'shadow-spread': unset,
8042
- 'transition-duration': var(--joy-duration-short),
7948
+ 'transition-duration': var(--mosaik-duration-short),
8043
7949
  'transition-mode': ease,
8044
7950
  'transition-property': (all),
8045
7951
  'translate': none
@@ -8114,7 +8020,7 @@ $jumbotron-props: (
8114
8020
  'shadow-offset-x': unset,
8115
8021
  'shadow-offset-y': unset,
8116
8022
  'shadow-spread': unset,
8117
- 'transition-duration': var(--joy-duration-short),
8023
+ 'transition-duration': var(--mosaik-duration-short),
8118
8024
  'transition-mode': ease,
8119
8025
  'transition-property': (all),
8120
8026
  'translate': none
@@ -8219,12 +8125,12 @@ $kbd-props: (
8219
8125
  'padding-left': calc(var(--joy-layout-space) / 2),
8220
8126
  'padding-right': calc(var(--joy-layout-space) / 2),
8221
8127
  'padding-top': calc(var(--joy-layout-space) / 2),
8222
- 'shadow': var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1),
8223
- 'shadow-blur': var(--joy-elevation-light-blur-1),
8224
- 'shadow-color': var(--joy-elevation-light-color-1),
8225
- 'shadow-offset-x': var(--joy-elevation-light-offset-x-1),
8226
- 'shadow-offset-y': var(--joy-elevation-light-offset-y-1),
8227
- 'shadow-spread': var(--joy-elevation-light-spread-1),
8128
+ 'shadow': var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color),
8129
+ 'shadow-blur': var(--joy-elevation-light-blur),
8130
+ 'shadow-color': var(--joy-elevation-light-color),
8131
+ 'shadow-offset-x': var(--joy-elevation-light-offset-x),
8132
+ 'shadow-offset-y': var(--joy-elevation-light-offset-y),
8133
+ 'shadow-spread': var(--joy-elevation-light-spread),
8228
8134
  'transition-duration': unset,
8229
8135
  'transition-mode': unset,
8230
8136
  'transition-property': unset,
@@ -8330,7 +8236,7 @@ $list-props: (
8330
8236
  'shadow-offset-x': unset,
8331
8237
  'shadow-offset-y': unset,
8332
8238
  'shadow-spread': unset,
8333
- 'transition-duration': var(--joy-duration-short),
8239
+ 'transition-duration': var(--mosaik-duration-short),
8334
8240
  'transition-mode': ease,
8335
8241
  'transition-property': (all),
8336
8242
  'translate': none
@@ -8375,7 +8281,7 @@ $list-item-props: (
8375
8281
  'shadow-offset-x': unset,
8376
8282
  'shadow-offset-y': unset,
8377
8283
  'shadow-spread': unset,
8378
- 'transition-duration': var(--joy-duration-short),
8284
+ 'transition-duration': var(--mosaik-duration-short),
8379
8285
  'transition-mode': ease,
8380
8286
  'transition-property': (border-color, background-color),
8381
8287
  'translate': none
@@ -8414,7 +8320,7 @@ $list-item-group-props: (
8414
8320
  'shadow-offset-x': unset,
8415
8321
  'shadow-offset-y': unset,
8416
8322
  'shadow-spread': unset,
8417
- 'transition-duration': var(--joy-duration-short),
8323
+ 'transition-duration': var(--mosaik-duration-short),
8418
8324
  'transition-mode': ease,
8419
8325
  'transition-property': (all),
8420
8326
  'translate': none
@@ -8449,7 +8355,7 @@ $listing-props: (
8449
8355
  'shadow-offset-x': 0px,
8450
8356
  'shadow-offset-y': 0px,
8451
8357
  'shadow-spread': 0px,
8452
- 'transition-duration': var(--joy-duration-short),
8358
+ 'transition-duration': var(--mosaik-duration-short),
8453
8359
  'transition-mode': ease,
8454
8360
  'transition-property': (color, opacity),
8455
8361
  'translate': none
@@ -8484,7 +8390,7 @@ $listing-item-props: (
8484
8390
  'shadow-offset-x': 0px,
8485
8391
  'shadow-offset-y': 0px,
8486
8392
  'shadow-spread': 0px,
8487
- 'transition-duration': var(--joy-duration-short),
8393
+ 'transition-duration': var(--mosaik-duration-short),
8488
8394
  'transition-mode': ease,
8489
8395
  'transition-property': (color, opacity),
8490
8396
  'translate': none
@@ -8518,13 +8424,13 @@ $listing-item-marker-props: (
8518
8424
  'padding-left': calc(var(--joy-layout-space) / 2),
8519
8425
  'padding-right': calc(var(--joy-layout-space) / 2),
8520
8426
  'padding-top': calc(var(--joy-layout-space) / 2),
8521
- 'shadow': var(--joy-elevation-light-offset-x-0) var(--joy-elevation-light-offset-y-0) var(--joy-elevation-light-blur-0) var(--joy-elevation-light-spread-0) var(--joy-elevation-light-color-0),
8522
- 'shadow-blur': var(--joy-elevation-light-blur-0),
8523
- 'shadow-color': var(--joy-elevation-light-color-0),
8524
- 'shadow-offset-x': var(--joy-elevation-light-offset-x-0),
8525
- 'shadow-offset-y': var(--joy-elevation-light-offset-y-0),
8526
- 'shadow-spread': var(--joy-elevation-light-spread-0),
8527
- 'transition-duration': var(--joy-duration-short),
8427
+ 'shadow': var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color),
8428
+ 'shadow-blur': var(--joy-elevation-light-blur),
8429
+ 'shadow-color': var(--joy-elevation-light-color),
8430
+ 'shadow-offset-x': var(--joy-elevation-light-offset-x),
8431
+ 'shadow-offset-y': var(--joy-elevation-light-offset-y),
8432
+ 'shadow-spread': var(--joy-elevation-light-spread),
8433
+ 'transition-duration': var(--mosaik-duration-short),
8528
8434
  'transition-mode': ease,
8529
8435
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
8530
8436
  'translate': none
@@ -8625,7 +8531,7 @@ $marquee-props: (
8625
8531
  'shadow-offset-x': unset,
8626
8532
  'shadow-offset-y': unset,
8627
8533
  'shadow-spread': unset,
8628
- 'speed': calc(var(--joy-duration-long) * 10),
8534
+ 'speed': calc(var(--mosaik-duration-long) * 10),
8629
8535
  'transition-duration': unset,
8630
8536
  'transition-mode': unset,
8631
8537
  'transition-property': unset,
@@ -8699,7 +8605,7 @@ $menu-props: (
8699
8605
  'shadow-offset-x': unset,
8700
8606
  'shadow-offset-y': unset,
8701
8607
  'shadow-spread': unset,
8702
- 'transition-duration': var(--joy-duration-short),
8608
+ 'transition-duration': var(--mosaik-duration-short),
8703
8609
  'transition-mode': ease,
8704
8610
  'transition-property': (background-color, color, border-color, box-shadow),
8705
8611
  'translate': none
@@ -8748,7 +8654,7 @@ $menu-item-props: (
8748
8654
  'shadow-offset-x': unset,
8749
8655
  'shadow-offset-y': unset,
8750
8656
  'shadow-spread': unset,
8751
- 'transition-duration': var(--joy-duration-short),
8657
+ 'transition-duration': var(--mosaik-duration-short),
8752
8658
  'transition-mode': ease,
8753
8659
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
8754
8660
  'translate': none
@@ -8798,7 +8704,7 @@ $menu-item-group-props: (
8798
8704
  'shadow-offset-x': unset,
8799
8705
  'shadow-offset-y': unset,
8800
8706
  'shadow-spread': unset,
8801
- 'transition-duration': var(--joy-duration-short),
8707
+ 'transition-duration': var(--mosaik-duration-short),
8802
8708
  'transition-mode': ease,
8803
8709
  'transition-property': (background-color, color, border-color, box-shadow),
8804
8710
  'translate': none
@@ -8831,13 +8737,13 @@ $message-props: (
8831
8737
  'padding-left': calc(var(--joy-layout-space) * 2),
8832
8738
  'padding-right': calc(var(--joy-layout-space) * 2),
8833
8739
  'padding-top': var(--joy-layout-space),
8834
- 'shadow': var(--joy-elevation-semilight-offset-x-0) var(--joy-elevation-semilight-offset-y-0) var(--joy-elevation-semilight-blur-0) var(--joy-elevation-semilight-spread-0) var(--joy-elevation-semilight-color-0),
8835
- 'shadow-blur': var(--joy-elevation-semilight-blur-0),
8836
- 'shadow-color': var(--joy-elevation-semilight-color-0),
8837
- 'shadow-offset-x': var(--joy-elevation-semilight-offset-x-0),
8838
- 'shadow-offset-y': var(--joy-elevation-semilight-offset-y-0),
8839
- 'shadow-spread': var(--joy-elevation-semilight-spread-0),
8840
- 'transition-duration': var(--joy-duration-short),
8740
+ 'shadow': var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color),
8741
+ 'shadow-blur': var(--joy-elevation-semilight-blur),
8742
+ 'shadow-color': var(--joy-elevation-semilight-color),
8743
+ 'shadow-offset-x': var(--joy-elevation-semilight-offset-x),
8744
+ 'shadow-offset-y': var(--joy-elevation-semilight-offset-y),
8745
+ 'shadow-spread': var(--joy-elevation-semilight-spread),
8746
+ 'transition-duration': var(--mosaik-duration-short),
8841
8747
  'transition-mode': ease,
8842
8748
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
8843
8749
  'translate': none
@@ -8879,12 +8785,12 @@ $message-box-props: (
8879
8785
  'padding-left': calc(var(--joy-layout-space)*2),
8880
8786
  'padding-right': calc(var(--joy-layout-space)*2),
8881
8787
  'padding-top': var(--joy-layout-space),
8882
- 'shadow': var(--joy-elevation-regular-offset-x-0) var(--joy-elevation-regular-offset-y-0) var(--joy-elevation-regular-blur-0) var(--joy-elevation-regular-spread-0) var(--joy-elevation-regular-color-0),
8883
- 'shadow-blur': var(--joy-elevation-regular-blur-0),
8884
- 'shadow-color': var(--joy-elevation-regular-color-0),
8885
- 'shadow-offset-x': var(--joy-elevation-regular-offset-x-0),
8886
- 'shadow-offset-y': var(--joy-elevation-regular-offset-y-0),
8887
- 'shadow-spread': var(--joy-elevation-regular-spread-0),
8788
+ 'shadow': var(--joy-elevation-regular-offset-x) var(--joy-elevation-regular-offset-y) var(--joy-elevation-regular-blur) var(--joy-elevation-regular-spread) var(--joy-elevation-regular-color),
8789
+ 'shadow-blur': var(--joy-elevation-regular-blur),
8790
+ 'shadow-color': var(--joy-elevation-regular-color),
8791
+ 'shadow-offset-x': var(--joy-elevation-regular-offset-x),
8792
+ 'shadow-offset-y': var(--joy-elevation-regular-offset-y),
8793
+ 'shadow-spread': var(--joy-elevation-regular-spread),
8888
8794
  'sub-header-font-family': var(--joy-font-family),
8889
8795
  'sub-header-font-letter-spacing': var(--joy-typography-subtitle2-letter-spacing),
8890
8796
  'sub-header-font-line-height': var(--joy-typography-subtitle2-line-height),
@@ -8893,7 +8799,7 @@ $message-box-props: (
8893
8799
  'sub-header-font-text-transform': var(--joy-typography-subtitle2-text-transform),
8894
8800
  'sub-header-font-weight': var(--joy-typography-subtitle2-font-weight),
8895
8801
  'sub-header-foreground-color': var(--joy-scheme-middlelight),
8896
- 'transition-duration': var(--joy-duration-short),
8802
+ 'transition-duration': var(--mosaik-duration-short),
8897
8803
  'transition-mode': ease,
8898
8804
  'transition-property': (background-color, color, border-color, opacity, box-shadow, margin),
8899
8805
  'translate': none
@@ -8977,7 +8883,7 @@ $meter-ring-props: (
8977
8883
  'shadow-offset-y': unset,
8978
8884
  'shadow-spread': unset,
8979
8885
  'thickness': 6px,
8980
- 'transition-duration': var(--joy-duration-short),
8886
+ 'transition-duration': var(--mosaik-duration-short),
8981
8887
  'transition-mode': ease,
8982
8888
  'transition-property': (background-color, color, border-color, opacity, box-shadow, stroke-dashoffset),
8983
8889
  'translate': none
@@ -9010,7 +8916,7 @@ $number-props: (
9010
8916
  'shadow-offset-x': unset,
9011
8917
  'shadow-offset-y': unset,
9012
8918
  'shadow-spread': unset,
9013
- 'transition-duration': var(--joy-duration-short),
8919
+ 'transition-duration': var(--mosaik-duration-short),
9014
8920
  'transition-mode': ease,
9015
8921
  'transition-property': (color, opacity, box-shadow),
9016
8922
  'translate': none
@@ -9030,6 +8936,11 @@ $number-box-props: (
9030
8936
  'border-radius': var(--joy-layout-radius),
9031
8937
  'border-style': solid,
9032
8938
  'border-width': var(--joy-layout-thickness),
8939
+ 'focus-ring-active-width': 8px,
8940
+ 'focus-ring-color': var(--joy-scheme-highlight),
8941
+ 'focus-ring-inward-offset': 2px,
8942
+ 'focus-ring-outward-offset': 0px,
8943
+ 'focus-ring-width': 0px,
9033
8944
  'font-family': var(--joy-font-family),
9034
8945
  'font-letter-spacing': unset,
9035
8946
  'font-line-height': unset,
@@ -9050,7 +8961,7 @@ $number-box-props: (
9050
8961
  'shadow-offset-x': unset,
9051
8962
  'shadow-offset-y': unset,
9052
8963
  'shadow-spread': unset,
9053
- 'transition-duration': var(--joy-duration-short),
8964
+ 'transition-duration': var(--mosaik-duration-short),
9054
8965
  'transition-mode': ease,
9055
8966
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
9056
8967
  'translate': none
@@ -9083,7 +8994,7 @@ $number-counter-props: (
9083
8994
  'shadow-offset-x': unset,
9084
8995
  'shadow-offset-y': unset,
9085
8996
  'shadow-spread': unset,
9086
- 'transition-duration': var(--joy-duration-short),
8997
+ 'transition-duration': var(--mosaik-duration-short),
9087
8998
  'transition-mode': ease,
9088
8999
  'transition-property': (color, opacity, box-shadow),
9089
9000
  'translate': none
@@ -9250,7 +9161,7 @@ $page-menu-props: (
9250
9161
  'shadow-offset-x': unset,
9251
9162
  'shadow-offset-y': unset,
9252
9163
  'shadow-spread': unset,
9253
- 'transition-duration': var(--joy-duration-short),
9164
+ 'transition-duration': var(--mosaik-duration-short),
9254
9165
  'transition-mode': ease,
9255
9166
  'transition-property': (all),
9256
9167
  'translate': none
@@ -9372,6 +9283,10 @@ $password-box-props: (
9372
9283
  'border-radius': var(--joy-layout-radius),
9373
9284
  'border-style': solid,
9374
9285
  'border-width': var(--joy-layout-thickness),
9286
+ 'focus-ring-active-width': 8px,
9287
+ 'focus-ring-color': var(--joy-scheme-highlight),
9288
+ 'focus-ring-inward-offset': 2px,
9289
+ 'focus-ring-outward-offset': 0px,
9375
9290
  'focus-ring-width': 0px,
9376
9291
  'font-family': var(--joy-font-family),
9377
9292
  'font-letter-spacing': unset,
@@ -9387,13 +9302,13 @@ $password-box-props: (
9387
9302
  'padding-left': calc(var(--joy-layout-space) * 1.5),
9388
9303
  'padding-right': calc(var(--joy-layout-space) * 1.5),
9389
9304
  'padding-top': var(--joy-layout-space),
9390
- 'shadow': var(--joy-elevation-semilight-offset-x-0) var(--joy-elevation-semilight-offset-y-0) var(--joy-elevation-semilight-blur-0) var(--joy-elevation-semilight-spread-0) var(--joy-elevation-semilight-color-0),
9391
- 'shadow-blur': var(--joy-elevation-semilight-blur-0),
9392
- 'shadow-color': var(--joy-elevation-semilight-color-0),
9393
- 'shadow-offset-x': var(--joy-elevation-semilight-offset-x-0),
9394
- 'shadow-offset-y': var(--joy-elevation-semilight-offset-y-0),
9395
- 'shadow-spread': var(--joy-elevation-semilight-spread-0),
9396
- 'transition-duration': var(--joy-duration-short),
9305
+ 'shadow': var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color),
9306
+ 'shadow-blur': var(--joy-elevation-semilight-blur),
9307
+ 'shadow-color': var(--joy-elevation-semilight-color),
9308
+ 'shadow-offset-x': var(--joy-elevation-semilight-offset-x),
9309
+ 'shadow-offset-y': var(--joy-elevation-semilight-offset-y),
9310
+ 'shadow-spread': var(--joy-elevation-semilight-spread),
9311
+ 'transition-duration': var(--mosaik-duration-short),
9397
9312
  'transition-mode': ease,
9398
9313
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
9399
9314
  'translate': none
@@ -9466,7 +9381,7 @@ $persona-props: (
9466
9381
  'shadow-offset-x': unset,
9467
9382
  'shadow-offset-y': unset,
9468
9383
  'shadow-spread': unset,
9469
- 'transition-duration': var(--joy-duration-short),
9384
+ 'transition-duration': var(--mosaik-duration-short),
9470
9385
  'transition-mode': ease,
9471
9386
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
9472
9387
  'translate': none
@@ -9519,6 +9434,11 @@ $pin-box-props: (
9519
9434
  'border-radius': var(--joy-layout-radius),
9520
9435
  'border-style': solid,
9521
9436
  'border-width': var(--joy-layout-thickness),
9437
+ 'focus-ring-active-width': 8px,
9438
+ 'focus-ring-color': var(--joy-scheme-highlight),
9439
+ 'focus-ring-inward-offset': 2px,
9440
+ 'focus-ring-outward-offset': 0px,
9441
+ 'focus-ring-width': 0px,
9522
9442
  'font-family': var(--joy-font-family),
9523
9443
  'font-letter-spacing': unset,
9524
9444
  'font-line-height': unset,
@@ -9533,13 +9453,13 @@ $pin-box-props: (
9533
9453
  'padding-left': calc(var(--joy-layout-space) * 1.5),
9534
9454
  'padding-right': calc(var(--joy-layout-space) * 1.5),
9535
9455
  'padding-top': var(--joy-layout-space),
9536
- 'shadow': var(--joy-elevation-semilight-offset-x-0) var(--joy-elevation-semilight-offset-y-0) var(--joy-elevation-semilight-blur-0) var(--joy-elevation-semilight-spread-0) var(--joy-elevation-semilight-color-0),
9537
- 'shadow-blur': var(--joy-elevation-semilight-blur-0),
9538
- 'shadow-color': var(--joy-elevation-semilight-color-0),
9539
- 'shadow-offset-x': var(--joy-elevation-semilight-offset-x-0),
9540
- 'shadow-offset-y': var(--joy-elevation-semilight-offset-y-0),
9541
- 'shadow-spread': var(--joy-elevation-semilight-spread-0),
9542
- 'transition-duration': var(--joy-duration-short),
9456
+ 'shadow': var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color),
9457
+ 'shadow-blur': var(--joy-elevation-semilight-blur),
9458
+ 'shadow-color': var(--joy-elevation-semilight-color),
9459
+ 'shadow-offset-x': var(--joy-elevation-semilight-offset-x),
9460
+ 'shadow-offset-y': var(--joy-elevation-semilight-offset-y),
9461
+ 'shadow-spread': var(--joy-elevation-semilight-spread),
9462
+ 'transition-duration': var(--mosaik-duration-short),
9543
9463
  'transition-mode': ease,
9544
9464
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
9545
9465
  'translate': none
@@ -9573,13 +9493,13 @@ $pip-props: (
9573
9493
  'padding-left': calc(var(--joy-layout-space) / 2),
9574
9494
  'padding-right': calc(var(--joy-layout-space) / 2),
9575
9495
  'padding-top': calc(var(--joy-layout-space) / 2),
9576
- 'shadow': var(--joy-elevation-light-offset-x-0) var(--joy-elevation-light-offset-y-0) var(--joy-elevation-light-blur-0) var(--joy-elevation-light-spread-0) var(--joy-elevation-light-color-0),
9577
- 'shadow-blur': var(--joy-elevation-light-blur-0),
9578
- 'shadow-color': var(--joy-elevation-light-color-0),
9579
- 'shadow-offset-x': var(--joy-elevation-light-offset-x-0),
9580
- 'shadow-offset-y': var(--joy-elevation-light-offset-y-0),
9581
- 'shadow-spread': var(--joy-elevation-light-spread-0),
9582
- 'transition-duration': var(--joy-duration-short),
9496
+ 'shadow': var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color),
9497
+ 'shadow-blur': var(--joy-elevation-light-blur),
9498
+ 'shadow-color': var(--joy-elevation-light-color),
9499
+ 'shadow-offset-x': var(--joy-elevation-light-offset-x),
9500
+ 'shadow-offset-y': var(--joy-elevation-light-offset-y),
9501
+ 'shadow-spread': var(--joy-elevation-light-spread),
9502
+ 'transition-duration': var(--mosaik-duration-short),
9583
9503
  'transition-mode': ease,
9584
9504
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
9585
9505
  'translate': none
@@ -9617,7 +9537,7 @@ $placeholder-props: (
9617
9537
  'shadow-offset-x': unset,
9618
9538
  'shadow-offset-y': unset,
9619
9539
  'shadow-spread': unset,
9620
- 'transition-duration': var(--joy-duration-short),
9540
+ 'transition-duration': var(--mosaik-duration-short),
9621
9541
  'transition-mode': ease,
9622
9542
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
9623
9543
  'translate': none
@@ -9650,13 +9570,13 @@ $popup-props: (
9650
9570
  'padding-left': calc(var(--joy-layout-space) * 1.25),
9651
9571
  'padding-right': calc(var(--joy-layout-space) * 1.25),
9652
9572
  'padding-top': calc(var(--joy-layout-space) * 1),
9653
- 'shadow': var(--joy-elevation-regular-offset-x-0) var(--joy-elevation-regular-offset-y-0) var(--joy-elevation-regular-blur-0) var(--joy-elevation-regular-spread-0) var(--joy-elevation-regular-color-0),
9654
- 'shadow-blur': var(--joy-elevation-regular-blur-0),
9655
- 'shadow-color': var(--joy-elevation-regular-color-0),
9656
- 'shadow-offset-x': var(--joy-elevation-regular-offset-x-0),
9657
- 'shadow-offset-y': var(--joy-elevation-regular-offset-y-0),
9658
- 'shadow-spread': var(--joy-elevation-regular-spread-0),
9659
- 'transition-duration': var(--joy-duration-short),
9573
+ 'shadow': var(--joy-elevation-regular-offset-x) var(--joy-elevation-regular-offset-y) var(--joy-elevation-regular-blur) var(--joy-elevation-regular-spread) var(--joy-elevation-regular-color),
9574
+ 'shadow-blur': var(--joy-elevation-regular-blur),
9575
+ 'shadow-color': var(--joy-elevation-regular-color),
9576
+ 'shadow-offset-x': var(--joy-elevation-regular-offset-x),
9577
+ 'shadow-offset-y': var(--joy-elevation-regular-offset-y),
9578
+ 'shadow-spread': var(--joy-elevation-regular-spread),
9579
+ 'transition-duration': var(--mosaik-duration-short),
9660
9580
  'transition-mode': ease,
9661
9581
  'transition-property': (background-color, border-color, box-shadow, color, transform, opacity),
9662
9582
  'translate': none
@@ -9809,7 +9729,7 @@ $press-button-props: (
9809
9729
  'shadow-offset-x': unset,
9810
9730
  'shadow-offset-y': unset,
9811
9731
  'shadow-spread': unset,
9812
- 'transition-duration': var(--joy-duration-short),
9732
+ 'transition-duration': var(--mosaik-duration-short),
9813
9733
  'transition-mode': ease,
9814
9734
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
9815
9735
  'translate': none,
@@ -9885,7 +9805,7 @@ $progress-ring-props: (
9885
9805
  'shadow-offset-y': unset,
9886
9806
  'shadow-spread': unset,
9887
9807
  'thickness': 6px,
9888
- 'transition-duration': var(--joy-duration-short),
9808
+ 'transition-duration': var(--mosaik-duration-short),
9889
9809
  'transition-mode': ease,
9890
9810
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
9891
9811
  'translate': none
@@ -9964,7 +9884,7 @@ $radio-props: (
9964
9884
  'shadow-offset-x': unset,
9965
9885
  'shadow-offset-y': unset,
9966
9886
  'shadow-spread': unset,
9967
- 'transition-duration': var(--joy-duration-short),
9887
+ 'transition-duration': var(--mosaik-duration-short),
9968
9888
  'transition-mode': ease,
9969
9889
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
9970
9890
  'translate': none
@@ -10003,7 +9923,7 @@ $radio-group-props: (
10003
9923
  'shadow-offset-x': unset,
10004
9924
  'shadow-offset-y': unset,
10005
9925
  'shadow-spread': unset,
10006
- 'transition-duration': var(--joy-duration-short),
9926
+ 'transition-duration': var(--mosaik-duration-short),
10007
9927
  'transition-mode': ease,
10008
9928
  'transition-property': (background-color, color, border-color, box-shadow, transform),
10009
9929
  'translate': none
@@ -10161,7 +10081,7 @@ $repeat-button-props: (
10161
10081
  'shadow-offset-x': unset,
10162
10082
  'shadow-offset-y': unset,
10163
10083
  'shadow-spread': unset,
10164
- 'transition-duration': var(--joy-duration-short),
10084
+ 'transition-duration': var(--mosaik-duration-short),
10165
10085
  'transition-mode': ease,
10166
10086
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
10167
10087
  'translate': none,
@@ -10313,7 +10233,7 @@ $ribbon-props: (
10313
10233
  'shadow-offset-x': unset,
10314
10234
  'shadow-offset-y': unset,
10315
10235
  'shadow-spread': unset,
10316
- 'transition-duration': var(--joy-duration-short),
10236
+ 'transition-duration': var(--mosaik-duration-short),
10317
10237
  'transition-mode': ease,
10318
10238
  'transition-property': (background-color foreground-color border-color),
10319
10239
  'translate': none
@@ -10333,6 +10253,11 @@ $rich-text-box-props: (
10333
10253
  'border-radius': var(--joy-layout-radius),
10334
10254
  'border-style': solid,
10335
10255
  'border-width': var(--joy-layout-thickness),
10256
+ 'focus-ring-active-width': 8px,
10257
+ 'focus-ring-color': var(--joy-scheme-highlight),
10258
+ 'focus-ring-inward-offset': 2px,
10259
+ 'focus-ring-outward-offset': 0px,
10260
+ 'focus-ring-width': 0px,
10336
10261
  'font-family': var(--joy-font-family),
10337
10262
  'font-letter-spacing': unset,
10338
10263
  'font-line-height': unset,
@@ -10353,7 +10278,7 @@ $rich-text-box-props: (
10353
10278
  'shadow-offset-x': unset,
10354
10279
  'shadow-offset-y': unset,
10355
10280
  'shadow-spread': unset,
10356
- 'transition-duration': var(--joy-duration-short),
10281
+ 'transition-duration': var(--mosaik-duration-short),
10357
10282
  'transition-mode': ease,
10358
10283
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
10359
10284
  'translate': none
@@ -10495,7 +10420,7 @@ $router-anchor-props: (
10495
10420
  'shadow-offset-x': unset,
10496
10421
  'shadow-offset-y': unset,
10497
10422
  'shadow-spread': unset,
10498
- 'transition-duration': var(--joy-duration-short),
10423
+ 'transition-duration': var(--mosaik-duration-short),
10499
10424
  'transition-mode': ease,
10500
10425
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
10501
10426
  'translate': none
@@ -10678,7 +10603,7 @@ $scheduler-props: (
10678
10603
  'shadow-spread': unset,
10679
10604
  'timescale-width': 80px,
10680
10605
  'today-background-color': var(--joy-scheme-semi-transparent),
10681
- 'transition-duration': var(--joy-duration-short),
10606
+ 'transition-duration': var(--mosaik-duration-short),
10682
10607
  'transition-mode': ease,
10683
10608
  'transition-property': (background-color, color, border-color),
10684
10609
  'translate': none
@@ -10834,13 +10759,13 @@ $scheduler-event-props: (
10834
10759
  'padding-top': unset,
10835
10760
  'ripple-color': unset,
10836
10761
  'ripple-duration': 0.20s,
10837
- 'shadow': var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1),
10838
- 'shadow-blur': var(--joy-elevation-light-blur-1),
10839
- 'shadow-color': var(--joy-elevation-light-color-1),
10840
- 'shadow-offset-x': var(--joy-elevation-light-offset-x-1),
10841
- 'shadow-offset-y': var(--joy-elevation-light-offset-y-1),
10842
- 'shadow-spread': var(--joy-elevation-light-spread-1),
10843
- 'transition-duration': var(--joy-duration-medium),
10762
+ 'shadow': var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color),
10763
+ 'shadow-blur': var(--joy-elevation-light-blur),
10764
+ 'shadow-color': var(--joy-elevation-light-color),
10765
+ 'shadow-offset-x': var(--joy-elevation-light-offset-x),
10766
+ 'shadow-offset-y': var(--joy-elevation-light-offset-y),
10767
+ 'shadow-spread': var(--joy-elevation-light-spread),
10768
+ 'transition-duration': var(--mosaik-duration-medium),
10844
10769
  'transition-mode': ease,
10845
10770
  'transition-property': (background-color, box-shadow, transform),
10846
10771
  'translate': none
@@ -10945,7 +10870,7 @@ $scheduler-now-indicator-props: (
10945
10870
  'shadow-offset-x': unset,
10946
10871
  'shadow-offset-y': unset,
10947
10872
  'shadow-spread': unset,
10948
- 'transition-duration': var(--joy-duration-short),
10873
+ 'transition-duration': var(--mosaik-duration-short),
10949
10874
  'transition-mode': ease,
10950
10875
  'transition-property': (top),
10951
10876
  'translate': none
@@ -11101,7 +11026,7 @@ $scroll-props: (
11101
11026
  'shadow-offset-x': unset,
11102
11027
  'shadow-offset-y': unset,
11103
11028
  'shadow-spread': unset,
11104
- 'transition-duration': var(--joy-duration-medium),
11029
+ 'transition-duration': var(--mosaik-duration-medium),
11105
11030
  'transition-mode': ease,
11106
11031
  'transition-property': (background-color, box-shadow, transform),
11107
11032
  'translate': none
@@ -11167,11 +11092,11 @@ $scrub-slider-props: (
11167
11092
  'tooltip-padding-right': var(--joy-layout-space),
11168
11093
  'tooltip-padding-top': var(--joy-layout-space),
11169
11094
  'tooltip-shadow': var(--joy-elevation-light),
11170
- 'tooltip-transition-duration': var(--joy-duration-short),
11095
+ 'tooltip-transition-duration': var(--mosaik-duration-short),
11171
11096
  'tooltip-transition-mode': ease,
11172
11097
  'tooltip-transition-property': (background-color, color, border-color, opacity, transform),
11173
11098
  'track-size': 4px,
11174
- 'transition-duration': var(--joy-duration-short),
11099
+ 'transition-duration': var(--mosaik-duration-short),
11175
11100
  'transition-mode': ease,
11176
11101
  'transition-property': (background-color, color, border-color, opacity, transform),
11177
11102
  'translate': none
@@ -11192,9 +11117,9 @@ $search-box-props: (
11192
11117
  'border-style': solid,
11193
11118
  'border-width': var(--joy-layout-thickness),
11194
11119
  'focus-ring-active-width': 8px,
11195
- 'focus-ring-color': unset,
11120
+ 'focus-ring-color': var(--joy-scheme-highlight),
11196
11121
  'focus-ring-inward-offset': 2px,
11197
- 'focus-ring-outward-offset': 2px,
11122
+ 'focus-ring-outward-offset': 0px,
11198
11123
  'focus-ring-width': 0px,
11199
11124
  'font-family': var(--joy-font-family),
11200
11125
  'font-letter-spacing': unset,
@@ -11210,13 +11135,13 @@ $search-box-props: (
11210
11135
  'padding-left': calc(var(--joy-layout-space) * 1.5),
11211
11136
  'padding-right': calc(var(--joy-layout-space) * 1.5),
11212
11137
  'padding-top': var(--joy-layout-space),
11213
- 'shadow': var(--joy-elevation-semilight-offset-x-0) var(--joy-elevation-semilight-offset-y-0) var(--joy-elevation-semilight-blur-0) var(--joy-elevation-semilight-spread-0) var(--joy-elevation-semilight-color-0),
11214
- 'shadow-blur': var(--joy-elevation-semilight-blur-0),
11215
- 'shadow-color': var(--joy-elevation-semilight-color-0),
11216
- 'shadow-offset-x': var(--joy-elevation-semilight-offset-x-0),
11217
- 'shadow-offset-y': var(--joy-elevation-semilight-offset-y-0),
11218
- 'shadow-spread': var(--joy-elevation-semilight-spread-0),
11219
- 'transition-duration': var(--joy-duration-short),
11138
+ 'shadow': var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color),
11139
+ 'shadow-blur': var(--joy-elevation-semilight-blur),
11140
+ 'shadow-color': var(--joy-elevation-semilight-color),
11141
+ 'shadow-offset-x': var(--joy-elevation-semilight-offset-x),
11142
+ 'shadow-offset-y': var(--joy-elevation-semilight-offset-y),
11143
+ 'shadow-spread': var(--joy-elevation-semilight-spread),
11144
+ 'transition-duration': var(--mosaik-duration-short),
11220
11145
  'transition-mode': ease,
11221
11146
  'transition-property': (all),
11222
11147
  'translate': none
@@ -11250,12 +11175,12 @@ $segment-props: (
11250
11175
  'padding-left': var(--joy-layout-space),
11251
11176
  'padding-right': var(--joy-layout-space),
11252
11177
  'padding-top': var(--joy-layout-space),
11253
- 'shadow': var(--joy-elevation-semilight-offset-x-0) var(--joy-elevation-semilight-offset-y-0) var(--joy-elevation-semilight-blur-0) var(--joy-elevation-semilight-spread-0) var(--joy-elevation-semilight-color-0),
11254
- 'shadow-blur': var(--joy-elevation-semilight-blur-0),
11255
- 'shadow-color': var(--joy-elevation-semilight-color-0),
11256
- 'shadow-offset-x': var(--joy-elevation-semilight-offset-x-0),
11257
- 'shadow-offset-y': var(--joy-elevation-semilight-offset-y-0),
11258
- 'shadow-spread': var(--joy-elevation-semilight-spread-0),
11178
+ 'shadow': var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color),
11179
+ 'shadow-blur': var(--joy-elevation-semilight-blur),
11180
+ 'shadow-color': var(--joy-elevation-semilight-color),
11181
+ 'shadow-offset-x': var(--joy-elevation-semilight-offset-x),
11182
+ 'shadow-offset-y': var(--joy-elevation-semilight-offset-y),
11183
+ 'shadow-spread': var(--joy-elevation-semilight-spread),
11259
11184
  'transition-duration': var(--joy-layout-transition),
11260
11185
  'transition-mode': ease,
11261
11186
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
@@ -11311,9 +11236,10 @@ $select-props: (
11311
11236
  'border-style': solid,
11312
11237
  'border-width': var(--joy-layout-thickness),
11313
11238
  'focus-ring-active-width': 8px,
11314
- 'focus-ring-color': var(--joy-color-light-secondary-400),
11239
+ 'focus-ring-color': var(--joy-scheme-highlight),
11315
11240
  'focus-ring-inward-offset': 2px,
11316
- 'focus-ring-outward-offset': 2px,
11241
+ 'focus-ring-outward-offset': 0px,
11242
+ 'focus-ring-width': 0px,
11317
11243
  'font-family': var(--joy-font-family),
11318
11244
  'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
11319
11245
  'font-line-height': var(--joy-typography-body2-line-height),
@@ -11333,9 +11259,9 @@ $select-props: (
11333
11259
  'shadow-offset-x': unset,
11334
11260
  'shadow-offset-y': unset,
11335
11261
  'shadow-spread': unset,
11336
- 'transition-duration': var(--joy-duration-short),
11262
+ 'transition-duration': var(--mosaik-duration-short),
11337
11263
  'transition-mode': ease,
11338
- 'transition-property': (all),
11264
+ 'transition-property': (transform),
11339
11265
  'translate': none
11340
11266
  );
11341
11267
  /**
@@ -11354,7 +11280,7 @@ $select-item-props: (
11354
11280
  'border-style': solid,
11355
11281
  'border-width': 0px,
11356
11282
  'focus-ring-active-width': 8px,
11357
- 'focus-ring-color': var(--joy-color-light-secondary-400),
11283
+ 'focus-ring-color': var(--joy-scheme-highlight),
11358
11284
  'focus-ring-inward-offset': 2px,
11359
11285
  'focus-ring-outward-offset': 2px,
11360
11286
  'font-family': var(--joy-font-family),
@@ -11378,7 +11304,7 @@ $select-item-props: (
11378
11304
  'shadow-offset-x': unset,
11379
11305
  'shadow-offset-y': unset,
11380
11306
  'shadow-spread': unset,
11381
- 'transition-duration': var(--joy-duration-short),
11307
+ 'transition-duration': var(--mosaik-duration-short),
11382
11308
  'transition-mode': ease,
11383
11309
  'transition-property': (all),
11384
11310
  'translate': none
@@ -11428,7 +11354,7 @@ $select-item-group-props: (
11428
11354
  'shadow-offset-x': unset,
11429
11355
  'shadow-offset-y': unset,
11430
11356
  'shadow-spread': unset,
11431
- 'transition-duration': var(--joy-duration-short),
11357
+ 'transition-duration': var(--mosaik-duration-short),
11432
11358
  'transition-mode': ease,
11433
11359
  'transition-property': (background-color, color, border-color, box-shadow),
11434
11360
  'translate': none
@@ -11465,7 +11391,7 @@ $sheet-props: (
11465
11391
  'shadow-offset-x': unset,
11466
11392
  'shadow-offset-y': unset,
11467
11393
  'shadow-spread': unset,
11468
- 'transition-duration': var(--joy-duration-short),
11394
+ 'transition-duration': var(--mosaik-duration-short),
11469
11395
  'transition-mode': ease,
11470
11396
  'transition-property': (transform, opacity, visibility),
11471
11397
  'translate': none,
@@ -11657,6 +11583,11 @@ $signature-pad-props: (
11657
11583
  'border-radius': var(--joy-layout-radius),
11658
11584
  'border-style': solid,
11659
11585
  'border-width': var(--joy-layout-thickness),
11586
+ 'focus-ring-active-width': 8px,
11587
+ 'focus-ring-color': var(--joy-scheme-highlight),
11588
+ 'focus-ring-inward-offset': 2px,
11589
+ 'focus-ring-outward-offset': 0px,
11590
+ 'focus-ring-width': 0px,
11660
11591
  'font-family': var(--joy-font-family),
11661
11592
  'font-letter-spacing': unset,
11662
11593
  'font-line-height': unset,
@@ -11676,7 +11607,7 @@ $signature-pad-props: (
11676
11607
  'shadow-offset-x': unset,
11677
11608
  'shadow-offset-y': unset,
11678
11609
  'shadow-spread': unset,
11679
- 'transition-duration': var(--joy-duration-short),
11610
+ 'transition-duration': var(--mosaik-duration-short),
11680
11611
  'transition-mode': ease,
11681
11612
  'transition-property': (all),
11682
11613
  'translate': none
@@ -11786,11 +11717,11 @@ $slider-props: (
11786
11717
  'tooltip-padding-right': var(--joy-layout-space),
11787
11718
  'tooltip-padding-top': var(--joy-layout-space),
11788
11719
  'tooltip-shadow': var(--joy-elevation-light),
11789
- 'tooltip-transition-duration': var(--joy-duration-short),
11720
+ 'tooltip-transition-duration': var(--mosaik-duration-short),
11790
11721
  'tooltip-transition-mode': ease,
11791
11722
  'tooltip-transition-property': (background-color, color, border-color, opacity, transform),
11792
11723
  'track-size': 4px,
11793
- 'transition-duration': var(--joy-duration-short),
11724
+ 'transition-duration': var(--mosaik-duration-short),
11794
11725
  'transition-mode': ease,
11795
11726
  'transition-property': (background-color, color, border-color, opacity, transform),
11796
11727
  'translate': none
@@ -11823,7 +11754,7 @@ $slider2-props: (
11823
11754
  'shadow-offset-x': unset,
11824
11755
  'shadow-offset-y': unset,
11825
11756
  'shadow-spread': unset,
11826
- 'transition-duration': var(--joy-duration-short),
11757
+ 'transition-duration': var(--mosaik-duration-short),
11827
11758
  'transition-mode': ease,
11828
11759
  'transition-property': (background-color, color, border-color, box-shadow, transform),
11829
11760
  'translate': none
@@ -11857,7 +11788,7 @@ $slider2thumb-props: (
11857
11788
  'shadow-offset-y': unset,
11858
11789
  'shadow-spread': unset,
11859
11790
  'size': 24px,
11860
- 'transition-duration': var(--joy-duration-short),
11791
+ 'transition-duration': var(--mosaik-duration-short),
11861
11792
  'transition-mode': ease,
11862
11793
  'transition-property': (background-color, color, border-color, box-shadow, transform),
11863
11794
  'translate': none
@@ -11931,7 +11862,7 @@ $split-props: (
11931
11862
  'thumb-border-color': var(--joy-scheme-highlight),
11932
11863
  'thumb-border-radius': var(--joy-layout-radius),
11933
11864
  'thumb-foreground-color': var(--joy-scheme-foreground),
11934
- 'transition-duration': var(--joy-duration-short),
11865
+ 'transition-duration': var(--mosaik-duration-short),
11935
11866
  'transition-mode': ease,
11936
11867
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
11937
11868
  'translate': none
@@ -11984,7 +11915,7 @@ $split-button-props: (
11984
11915
  'shadow-offset-x': unset,
11985
11916
  'shadow-offset-y': unset,
11986
11917
  'shadow-spread': unset,
11987
- 'transition-duration': var(--joy-duration-short),
11918
+ 'transition-duration': var(--mosaik-duration-short),
11988
11919
  'transition-mode': ease,
11989
11920
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
11990
11921
  'translate': none,
@@ -12282,18 +12213,18 @@ $tab-props: (
12282
12213
  'padding-right': calc(var(--joy-layout-space) * 2),
12283
12214
  'padding-top': var(--joy-layout-space),
12284
12215
  'panel-background-color': var(--tab-background-color),
12285
- 'shadow': var(--joy-elevation-bold-offset-x-0) var(--joy-elevation-bold-offset-y-0) var(--joy-elevation-bold-blur-0) var(--joy-elevation-bold-spread-0) var(--joy-elevation-bold-color-0),
12286
- 'shadow-blur': var(--joy-elevation-bold-blur-0),
12287
- 'shadow-color': var(--joy-elevation-bold-color-0),
12288
- 'shadow-offset-x': var(--joy-elevation-bold-offset-x-0),
12289
- 'shadow-offset-y': var(--joy-elevation-bold-offset-y-0),
12290
- 'shadow-spread': var(--joy-elevation-bold-spread-0),
12216
+ 'shadow': var(--joy-elevation-bold-offset-x) var(--joy-elevation-bold-offset-y) var(--joy-elevation-bold-blur) var(--joy-elevation-bold-spread) var(--joy-elevation-bold-color),
12217
+ 'shadow-blur': var(--joy-elevation-bold-blur),
12218
+ 'shadow-color': var(--joy-elevation-bold-color),
12219
+ 'shadow-offset-x': var(--joy-elevation-bold-offset-x),
12220
+ 'shadow-offset-y': var(--joy-elevation-bold-offset-y),
12221
+ 'shadow-spread': var(--joy-elevation-bold-spread),
12291
12222
  'strip-background-color': var(--joy-scheme-transparent),
12292
12223
  'strip-padding-bottom': 0,
12293
12224
  'strip-padding-left': 0,
12294
12225
  'strip-padding-right': 0,
12295
12226
  'strip-padding-top': 0,
12296
- 'transition-duration': var(--joy-duration-short),
12227
+ 'transition-duration': var(--mosaik-duration-short),
12297
12228
  'transition-mode': ease,
12298
12229
  'transition-property': (background-color, color, border-color, opacity, box-shadow, transform),
12299
12230
  'translate': none
@@ -12402,7 +12333,7 @@ $tab-strip-props: (
12402
12333
  'shadow-offset-x': unset,
12403
12334
  'shadow-offset-y': unset,
12404
12335
  'shadow-spread': unset,
12405
- 'transition-duration': var(--joy-duration-short),
12336
+ 'transition-duration': var(--mosaik-duration-short),
12406
12337
  'transition-mode': ease,
12407
12338
  'transition-property': (background-color, color, border-color, opacity, box-shadow, transform),
12408
12339
  'translate': none
@@ -12449,7 +12380,7 @@ $tab-strip-item-props: (
12449
12380
  'shadow-spread': unset,
12450
12381
  'size': 56px,
12451
12382
  'thickness': 4px,
12452
- 'transition-duration': var(--joy-duration-short),
12383
+ 'transition-duration': var(--mosaik-duration-short),
12453
12384
  'transition-mode': ease,
12454
12385
  'transition-property': (background-color, color, border-color, opacity, box-shadow, transform),
12455
12386
  'translate': none
@@ -12498,7 +12429,7 @@ $table-props: (
12498
12429
  'shadow-offset-x': unset,
12499
12430
  'shadow-offset-y': unset,
12500
12431
  'shadow-spread': unset,
12501
- 'transition-duration': var(--joy-duration-short),
12432
+ 'transition-duration': var(--mosaik-duration-short),
12502
12433
  'transition-mode': ease,
12503
12434
  'transition-property': (background-color, border-color, color, fill, stroke, opacity, box-shadow, transform),
12504
12435
  'translate': none
@@ -12537,7 +12468,7 @@ $table-body-props: (
12537
12468
  'shadow-offset-x': unset,
12538
12469
  'shadow-offset-y': unset,
12539
12470
  'shadow-spread': unset,
12540
- 'transition-duration': var(--joy-duration-short),
12471
+ 'transition-duration': var(--mosaik-duration-short),
12541
12472
  'transition-mode': ease,
12542
12473
  'transition-property': (all),
12543
12474
  'translate': none
@@ -12575,7 +12506,7 @@ $table-body-cell-props: (
12575
12506
  'shadow-offset-x': unset,
12576
12507
  'shadow-offset-y': unset,
12577
12508
  'shadow-spread': unset,
12578
- 'transition-duration': var(--joy-duration-short),
12509
+ 'transition-duration': var(--mosaik-duration-short),
12579
12510
  'transition-mode': ease,
12580
12511
  'transition-property': (all),
12581
12512
  'translate': none
@@ -12613,7 +12544,7 @@ $table-body-row-props: (
12613
12544
  'shadow-offset-x': unset,
12614
12545
  'shadow-offset-y': unset,
12615
12546
  'shadow-spread': unset,
12616
- 'transition-duration': var(--joy-duration-short),
12547
+ 'transition-duration': var(--mosaik-duration-short),
12617
12548
  'transition-mode': ease,
12618
12549
  'transition-property': (background-color, border-color),
12619
12550
  'translate': none
@@ -12656,7 +12587,7 @@ $table-column-editor-props: (
12656
12587
  'shadow-offset-x': unset,
12657
12588
  'shadow-offset-y': unset,
12658
12589
  'shadow-spread': unset,
12659
- 'transition-duration': var(--joy-duration-short),
12590
+ 'transition-duration': var(--mosaik-duration-short),
12660
12591
  'transition-mode': ease,
12661
12592
  'transition-property': (background-color, color),
12662
12593
  'translate': none
@@ -12695,7 +12626,7 @@ $table-footer-props: (
12695
12626
  'shadow-offset-x': unset,
12696
12627
  'shadow-offset-y': unset,
12697
12628
  'shadow-spread': unset,
12698
- 'transition-duration': var(--joy-duration-short),
12629
+ 'transition-duration': var(--mosaik-duration-short),
12699
12630
  'transition-mode': ease,
12700
12631
  'transition-property': (all),
12701
12632
  'translate': none
@@ -12733,7 +12664,7 @@ $table-footer-cell-props: (
12733
12664
  'shadow-offset-x': unset,
12734
12665
  'shadow-offset-y': unset,
12735
12666
  'shadow-spread': unset,
12736
- 'transition-duration': var(--joy-duration-short),
12667
+ 'transition-duration': var(--mosaik-duration-short),
12737
12668
  'transition-mode': ease,
12738
12669
  'transition-property': (all),
12739
12670
  'translate': none
@@ -12772,7 +12703,7 @@ $table-footer-row-props: (
12772
12703
  'shadow-offset-x': unset,
12773
12704
  'shadow-offset-y': unset,
12774
12705
  'shadow-spread': unset,
12775
- 'transition-duration': var(--joy-duration-short),
12706
+ 'transition-duration': var(--mosaik-duration-short),
12776
12707
  'transition-mode': ease,
12777
12708
  'transition-property': (all),
12778
12709
  'translate': none
@@ -12811,7 +12742,7 @@ $table-header-props: (
12811
12742
  'shadow-offset-x': unset,
12812
12743
  'shadow-offset-y': unset,
12813
12744
  'shadow-spread': unset,
12814
- 'transition-duration': var(--joy-duration-short),
12745
+ 'transition-duration': var(--mosaik-duration-short),
12815
12746
  'transition-mode': ease,
12816
12747
  'transition-property': (all),
12817
12748
  'translate': none
@@ -12853,7 +12784,7 @@ $table-header-cell-props: (
12853
12784
  'shadow-offset-x': unset,
12854
12785
  'shadow-offset-y': unset,
12855
12786
  'shadow-spread': unset,
12856
- 'transition-duration': var(--joy-duration-short),
12787
+ 'transition-duration': var(--mosaik-duration-short),
12857
12788
  'transition-mode': ease,
12858
12789
  'transition-property': (all),
12859
12790
  'translate': none
@@ -12892,7 +12823,7 @@ $table-header-row-props: (
12892
12823
  'shadow-offset-x': unset,
12893
12824
  'shadow-offset-y': unset,
12894
12825
  'shadow-spread': unset,
12895
- 'transition-duration': var(--joy-duration-short),
12826
+ 'transition-duration': var(--mosaik-duration-short),
12896
12827
  'transition-mode': ease,
12897
12828
  'transition-property': (background-color, border-color),
12898
12829
  'translate': none
@@ -12933,7 +12864,7 @@ $text-props: (
12933
12864
  'shadow-offset-x': unset,
12934
12865
  'shadow-offset-y': unset,
12935
12866
  'shadow-spread': unset,
12936
- 'transition-duration': var(--joy-duration-short),
12867
+ 'transition-duration': var(--mosaik-duration-short),
12937
12868
  'transition-mode': ease,
12938
12869
  'transition-property': (color, opacity, box-shadow),
12939
12870
  'translate': none
@@ -12953,6 +12884,9 @@ $text-box-props: (
12953
12884
  'border-radius': var(--joy-layout-radius),
12954
12885
  'border-style': solid,
12955
12886
  'border-width': var(--joy-layout-thickness),
12887
+ 'focus-ring-active-width': 8px,
12888
+ 'focus-ring-color': var(--joy-scheme-highlight),
12889
+ 'focus-ring-inward-offset': 2px,
12956
12890
  'focus-ring-outward-offset': 0px,
12957
12891
  'focus-ring-width': 0px,
12958
12892
  'font-family': var(--joy-font-family),
@@ -12970,14 +12904,14 @@ $text-box-props: (
12970
12904
  'padding-right': calc(var(--joy-layout-space) * 1.5),
12971
12905
  'padding-top': var(--joy-layout-space),
12972
12906
  'prefix-icon-size': 20px,
12973
- 'shadow': var(--joy-elevation-semilight-offset-x-0) var(--joy-elevation-semilight-offset-y-0) var(--joy-elevation-semilight-blur-0) var(--joy-elevation-semilight-spread-0) var(--joy-elevation-semilight-color-0),
12974
- 'shadow-blur': var(--joy-elevation-semilight-blur-0),
12975
- 'shadow-color': var(--joy-elevation-semilight-color-0),
12976
- 'shadow-offset-x': var(--joy-elevation-semilight-offset-x-0),
12977
- 'shadow-offset-y': var(--joy-elevation-semilight-offset-y-0),
12978
- 'shadow-spread': var(--joy-elevation-semilight-spread-0),
12907
+ 'shadow': var(--joy-elevation-semilight-offset-x) var(--joy-elevation-semilight-offset-y) var(--joy-elevation-semilight-blur) var(--joy-elevation-semilight-spread) var(--joy-elevation-semilight-color),
12908
+ 'shadow-blur': var(--joy-elevation-semilight-blur),
12909
+ 'shadow-color': var(--joy-elevation-semilight-color),
12910
+ 'shadow-offset-x': var(--joy-elevation-semilight-offset-x),
12911
+ 'shadow-offset-y': var(--joy-elevation-semilight-offset-y),
12912
+ 'shadow-spread': var(--joy-elevation-semilight-spread),
12979
12913
  'suffix-icon-size': 20px,
12980
- 'transition-duration': var(--joy-duration-short),
12914
+ 'transition-duration': var(--mosaik-duration-short),
12981
12915
  'transition-mode': ease,
12982
12916
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
12983
12917
  'translate': none
@@ -13042,13 +12976,13 @@ $thumb-props: (
13042
12976
  'padding-left': unset,
13043
12977
  'padding-right': unset,
13044
12978
  'padding-top': unset,
13045
- 'shadow': var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1),
13046
- 'shadow-blur': var(--joy-elevation-light-blur-1),
13047
- 'shadow-color': var(--joy-elevation-light-color-1),
13048
- 'shadow-offset-x': var(--joy-elevation-light-offset-x-1),
13049
- 'shadow-offset-y': var(--joy-elevation-light-offset-y-1),
13050
- 'shadow-spread': var(--joy-elevation-light-spread-1),
13051
- 'transition-duration': var(--joy-duration-short),
12979
+ 'shadow': var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color),
12980
+ 'shadow-blur': var(--joy-elevation-light-blur),
12981
+ 'shadow-color': var(--joy-elevation-light-color),
12982
+ 'shadow-offset-x': var(--joy-elevation-light-offset-x),
12983
+ 'shadow-offset-y': var(--joy-elevation-light-offset-y),
12984
+ 'shadow-spread': var(--joy-elevation-light-spread),
12985
+ 'transition-duration': var(--mosaik-duration-short),
13052
12986
  'transition-mode': ease,
13053
12987
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate, transform),
13054
12988
  'translate': none
@@ -13124,7 +13058,7 @@ $tick-bar-props: (
13124
13058
  'tick-size': 2px,
13125
13059
  'tick-text-gap': 4px,
13126
13060
  'tick-width': var(--joy-layout-thickness),
13127
- 'transition-duration': var(--joy-duration-short),
13061
+ 'transition-duration': var(--mosaik-duration-short),
13128
13062
  'transition-mode': ease,
13129
13063
  'transition-property': (background-color, color, border-color, opacity, transform),
13130
13064
  'translate': none
@@ -13163,13 +13097,13 @@ $tile-props: (
13163
13097
  'padding-top': var(--joy-layout-space),
13164
13098
  'ripple-color': var(--joy-scheme-highlight),
13165
13099
  'ripple-duration': 0.20s,
13166
- 'shadow': var(--joy-elevation-light-offset-x-1) var(--joy-elevation-light-offset-y-1) var(--joy-elevation-light-blur-1) var(--joy-elevation-light-spread-1) var(--joy-elevation-light-color-1),
13167
- 'shadow-blur': var(--joy-elevation-light-blur-1),
13168
- 'shadow-color': var(--joy-elevation-light-color-1),
13169
- 'shadow-offset-x': var(--joy-elevation-light-offset-x-1),
13170
- 'shadow-offset-y': var(--joy-elevation-light-offset-y-1),
13171
- 'shadow-spread': var(--joy-elevation-light-spread-1),
13172
- 'transition-duration': var(--joy-duration-short),
13100
+ 'shadow': var(--joy-elevation-light-offset-x) var(--joy-elevation-light-offset-y) var(--joy-elevation-light-blur) var(--joy-elevation-light-spread) var(--joy-elevation-light-color),
13101
+ 'shadow-blur': var(--joy-elevation-light-blur),
13102
+ 'shadow-color': var(--joy-elevation-light-color),
13103
+ 'shadow-offset-x': var(--joy-elevation-light-offset-x),
13104
+ 'shadow-offset-y': var(--joy-elevation-light-offset-y),
13105
+ 'shadow-spread': var(--joy-elevation-light-spread),
13106
+ 'transition-duration': var(--mosaik-duration-short),
13173
13107
  'transition-mode': ease,
13174
13108
  'transition-property': (background-color, color, border-color, box-shadow),
13175
13109
  'translate': none
@@ -13360,6 +13294,11 @@ $time-box-props: (
13360
13294
  'border-radius': var(--joy-layout-radius),
13361
13295
  'border-style': solid,
13362
13296
  'border-width': var(--joy-layout-thickness),
13297
+ 'focus-ring-active-width': 8px,
13298
+ 'focus-ring-color': var(--joy-scheme-highlight),
13299
+ 'focus-ring-inward-offset': 2px,
13300
+ 'focus-ring-outward-offset': 0px,
13301
+ 'focus-ring-width': 0px,
13363
13302
  'font-family': var(--joy-font-family),
13364
13303
  'font-letter-spacing': unset,
13365
13304
  'font-line-height': unset,
@@ -13380,7 +13319,7 @@ $time-box-props: (
13380
13319
  'shadow-offset-x': unset,
13381
13320
  'shadow-offset-y': unset,
13382
13321
  'shadow-spread': unset,
13383
- 'transition-duration': var(--joy-duration-short),
13322
+ 'transition-duration': var(--mosaik-duration-short),
13384
13323
  'transition-mode': ease,
13385
13324
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
13386
13325
  'translate': none
@@ -13422,7 +13361,7 @@ $timeline-props: (
13422
13361
  'shadow-offset-x': unset,
13423
13362
  'shadow-offset-y': unset,
13424
13363
  'shadow-spread': unset,
13425
- 'transition-duration': var(--joy-duration-short),
13364
+ 'transition-duration': var(--mosaik-duration-short),
13426
13365
  'transition-mode': ease,
13427
13366
  'transition-property': (color, background-color, transform),
13428
13367
  'translate': none
@@ -13671,13 +13610,13 @@ $toast-props: (
13671
13610
  'padding-top': var(--joy-layout-space),
13672
13611
  'progress-fill-color': currentColor,
13673
13612
  'progress-ring-fill-color': var(--joy-scheme-foreground),
13674
- 'shadow': (var(--joy-elevation-regular-offset-x-0), var(--joy-elevation-regular-offset-x-1)) (var(--joy-elevation-regular-offset-y-0), var(--joy-elevation-regular-offset-y-1)) (var(--joy-elevation-regular-blur-0), var(--joy-elevation-regular-blur-1)) (var(--joy-elevation-regular-spread-0), var(--joy-elevation-regular-spread-1)) (var(--joy-elevation-regular-color-0), var(--joy-elevation-regular-color-1)),
13675
- 'shadow-blur': (var(--joy-elevation-regular-blur-0), var(--joy-elevation-regular-blur-1)),
13676
- 'shadow-color': (var(--joy-elevation-regular-color-0), var(--joy-elevation-regular-color-1)),
13677
- 'shadow-offset-x': (var(--joy-elevation-regular-offset-x-0), var(--joy-elevation-regular-offset-x-1)),
13678
- 'shadow-offset-y': (var(--joy-elevation-regular-offset-y-0), var(--joy-elevation-regular-offset-y-1)),
13679
- 'shadow-spread': (var(--joy-elevation-regular-spread-0), var(--joy-elevation-regular-spread-1)),
13680
- 'transition-duration': var(--joy-duration-short),
13613
+ 'shadow': var(--joy-elevation-regular-offset-x) var(--joy-elevation-regular-offset-y) var(--joy-elevation-regular-blur) var(--joy-elevation-regular-spread) var(--joy-elevation-regular-color),
13614
+ 'shadow-blur': var(--joy-elevation-regular-blur),
13615
+ 'shadow-color': var(--joy-elevation-regular-color),
13616
+ 'shadow-offset-x': var(--joy-elevation-regular-offset-x),
13617
+ 'shadow-offset-y': var(--joy-elevation-regular-offset-y),
13618
+ 'shadow-spread': var(--joy-elevation-regular-spread),
13619
+ 'transition-duration': var(--mosaik-duration-short),
13681
13620
  'transition-mode': ease,
13682
13621
  'transition-property': (background-color, color, border-color, opacity, box-shadow, margin),
13683
13622
  'translate': none
@@ -13729,7 +13668,7 @@ $toggle-button-props: (
13729
13668
  'shadow-offset-x': unset,
13730
13669
  'shadow-offset-y': unset,
13731
13670
  'shadow-spread': unset,
13732
- 'transition-duration': var(--joy-duration-short),
13671
+ 'transition-duration': var(--mosaik-duration-short),
13733
13672
  'transition-mode': ease,
13734
13673
  'transition-property': (background-color, color, border-color, opacity, box-shadow, translate),
13735
13674
  'translate': none,
@@ -13769,7 +13708,7 @@ $toggle-button-group-props: (
13769
13708
  'shadow-offset-x': unset,
13770
13709
  'shadow-offset-y': unset,
13771
13710
  'shadow-spread': unset,
13772
- 'transition-duration': var(--joy-duration-short),
13711
+ 'transition-duration': var(--mosaik-duration-short),
13773
13712
  'transition-mode': ease,
13774
13713
  'transition-property': (background-color, color, border-color, opacity),
13775
13714
  'translate': none
@@ -13883,7 +13822,7 @@ $toolbar-props: (
13883
13822
  'shadow-offset-x': unset,
13884
13823
  'shadow-offset-y': unset,
13885
13824
  'shadow-spread': unset,
13886
- 'transition-duration': var(--joy-duration-short),
13825
+ 'transition-duration': var(--mosaik-duration-short),
13887
13826
  'transition-mode': ease,
13888
13827
  'transition-property': (all),
13889
13828
  'translate': none
@@ -13923,7 +13862,7 @@ $tooltip-props: (
13923
13862
  'shadow-offset-x': unset,
13924
13863
  'shadow-offset-y': unset,
13925
13864
  'shadow-spread': unset,
13926
- 'transition-duration': var(--joy-duration-short),
13865
+ 'transition-duration': var(--mosaik-duration-short),
13927
13866
  'transition-mode': ease,
13928
13867
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
13929
13868
  'translate': none
@@ -13958,7 +13897,7 @@ $tour-props: (
13958
13897
  'shadow-offset-y': unset,
13959
13898
  'shadow-spread': unset,
13960
13899
  'tooltip-max-width': 340px,
13961
- 'transition-duration': var(--joy-duration-short),
13900
+ 'transition-duration': var(--mosaik-duration-short),
13962
13901
  'transition-mode': ease,
13963
13902
  'transition-property': (transform, opacity),
13964
13903
  'translate': none
@@ -14035,7 +13974,7 @@ $tour-step-props: (
14035
13974
  'shadow-offset-x': none,
14036
13975
  'shadow-offset-y': 16px,
14037
13976
  'shadow-spread': none,
14038
- 'transition-duration': var(--joy-duration-short),
13977
+ 'transition-duration': var(--mosaik-duration-short),
14039
13978
  'transition-mode': ease,
14040
13979
  'transition-property': (background-color, color, border-color, opacity, box-shadow),
14041
13980
  'translate': none
@@ -14110,7 +14049,7 @@ $tree-item-props: (
14110
14049
  'shadow-offset-x': unset,
14111
14050
  'shadow-offset-y': unset,
14112
14051
  'shadow-spread': unset,
14113
- 'transition-duration': var(--joy-duration-short),
14052
+ 'transition-duration': var(--mosaik-duration-short),
14114
14053
  'transition-mode': ease,
14115
14054
  'transition-property': ((background-color, color, border-color, box-shadow)),
14116
14055
  'translate': none
@@ -14190,7 +14129,7 @@ $video-props: (
14190
14129
  'shadow-offset-x': unset,
14191
14130
  'shadow-offset-y': unset,
14192
14131
  'shadow-spread': unset,
14193
- 'transition-duration': var(--joy-duration-short),
14132
+ 'transition-duration': var(--mosaik-duration-short),
14194
14133
  'transition-mode': ease,
14195
14134
  'transition-property': (color, background-color, border-color, opacity, box-shadow),
14196
14135
  'translate': none
@@ -14263,7 +14202,7 @@ $wheel-picker-props: (
14263
14202
  'shadow-offset-x': unset,
14264
14203
  'shadow-offset-y': unset,
14265
14204
  'shadow-spread': unset,
14266
- 'transition-duration': var(--joy-duration-short),
14205
+ 'transition-duration': var(--mosaik-duration-short),
14267
14206
  'transition-mode': ease,
14268
14207
  'transition-property': (background-color, color),
14269
14208
  'translate': none