@breadstone/mosaik-themes 0.1.21 → 0.1.22
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/index.cjs +12 -12
- package/index.cjs.map +1 -1
- package/index.js +12 -12
- package/index.js.map +1 -1
- package/package.json +2 -2
- package/themes/___joy-tokens.css +52 -112
- package/themes/cosmopolitan.scss +57 -5
- package/themes/joy-tokens.scss +52 -112
- package/themes/joy.scss +137 -217
- package/themes/memphis.scss +52 -0
package/themes/joy.scss
CHANGED
|
@@ -387,138 +387,78 @@ $typography-overline-letter-spacing: 2.6666666666666665px;
|
|
|
387
387
|
$typography-overline-text-decoration: none;
|
|
388
388
|
$typography-overline-text-transform: none;
|
|
389
389
|
$elevation-none: none;
|
|
390
|
-
$elevation-light-light: 0px
|
|
390
|
+
$elevation-light-light: 0px 2px 2px -2px rgba(0, 0, 0, 0.17);
|
|
391
391
|
$elevation-light-light-offset-x-0: 0px;
|
|
392
|
-
$elevation-light-light-offset-
|
|
393
|
-
$elevation-light-light-offset-y-0: 0px;
|
|
394
|
-
$elevation-light-light-offset-y-1: 1px;
|
|
392
|
+
$elevation-light-light-offset-y-0: 2px;
|
|
395
393
|
$elevation-light-light-blur-0: 2px;
|
|
396
|
-
$elevation-light-light-
|
|
397
|
-
$elevation-light-light-
|
|
398
|
-
$elevation-light-
|
|
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);
|
|
394
|
+
$elevation-light-light-spread-0: -2px;
|
|
395
|
+
$elevation-light-light-color-0: rgba(0, 0, 0, 0.17);
|
|
396
|
+
$elevation-light-semilight: 0px 4px 4px -2px rgba(0, 0, 0, 0.17);
|
|
402
397
|
$elevation-light-semilight-offset-x-0: 0px;
|
|
403
|
-
$elevation-light-semilight-offset-
|
|
404
|
-
$elevation-light-semilight-
|
|
405
|
-
$elevation-light-semilight-
|
|
406
|
-
$elevation-light-semilight-
|
|
407
|
-
$elevation-light-
|
|
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);
|
|
398
|
+
$elevation-light-semilight-offset-y-0: 4px;
|
|
399
|
+
$elevation-light-semilight-blur-0: 4px;
|
|
400
|
+
$elevation-light-semilight-spread-0: -2px;
|
|
401
|
+
$elevation-light-semilight-color-0: rgba(0, 0, 0, 0.17);
|
|
402
|
+
$elevation-light-regular: 0px 6px 6px -2px rgba(0, 0, 0, 0.17);
|
|
413
403
|
$elevation-light-regular-offset-x-0: 0px;
|
|
414
|
-
$elevation-light-regular-offset-
|
|
415
|
-
$elevation-light-regular-
|
|
416
|
-
$elevation-light-regular-
|
|
417
|
-
$elevation-light-regular-
|
|
418
|
-
$elevation-light-
|
|
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);
|
|
404
|
+
$elevation-light-regular-offset-y-0: 6px;
|
|
405
|
+
$elevation-light-regular-blur-0: 6px;
|
|
406
|
+
$elevation-light-regular-spread-0: -2px;
|
|
407
|
+
$elevation-light-regular-color-0: rgba(0, 0, 0, 0.17);
|
|
408
|
+
$elevation-light-semibold: 0px 8px 8px -2px rgba(0, 0, 0, 0.17);
|
|
424
409
|
$elevation-light-semibold-offset-x-0: 0px;
|
|
425
|
-
$elevation-light-semibold-offset-
|
|
426
|
-
$elevation-light-semibold-
|
|
427
|
-
$elevation-light-semibold-
|
|
428
|
-
$elevation-light-semibold-
|
|
429
|
-
$elevation-light-
|
|
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);
|
|
410
|
+
$elevation-light-semibold-offset-y-0: 8px;
|
|
411
|
+
$elevation-light-semibold-blur-0: 8px;
|
|
412
|
+
$elevation-light-semibold-spread-0: -2px;
|
|
413
|
+
$elevation-light-semibold-color-0: rgba(0, 0, 0, 0.17);
|
|
414
|
+
$elevation-light-bold: 0px 10px 10px -2px rgba(0, 0, 0, 0.17);
|
|
435
415
|
$elevation-light-bold-offset-x-0: 0px;
|
|
436
|
-
$elevation-light-bold-offset-
|
|
437
|
-
$elevation-light-bold-
|
|
438
|
-
$elevation-light-bold-
|
|
439
|
-
$elevation-light-bold-
|
|
440
|
-
$elevation-light-
|
|
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);
|
|
416
|
+
$elevation-light-bold-offset-y-0: 10px;
|
|
417
|
+
$elevation-light-bold-blur-0: 10px;
|
|
418
|
+
$elevation-light-bold-spread-0: -2px;
|
|
419
|
+
$elevation-light-bold-color-0: rgba(0, 0, 0, 0.17);
|
|
420
|
+
$elevation-light-extrabold: 0px 12px 12px -2px rgba(0, 0, 0, 0.17);
|
|
446
421
|
$elevation-light-extrabold-offset-x-0: 0px;
|
|
447
|
-
$elevation-light-extrabold-offset-
|
|
448
|
-
$elevation-light-extrabold-
|
|
449
|
-
$elevation-light-extrabold-
|
|
450
|
-
$elevation-light-extrabold-
|
|
451
|
-
$elevation-light
|
|
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);
|
|
422
|
+
$elevation-light-extrabold-offset-y-0: 12px;
|
|
423
|
+
$elevation-light-extrabold-blur-0: 12px;
|
|
424
|
+
$elevation-light-extrabold-spread-0: -2px;
|
|
425
|
+
$elevation-light-extrabold-color-0: rgba(0, 0, 0, 0.17);
|
|
426
|
+
$elevation-dark-light: 0px 2px 2px -2px rgba(0, 0, 0, 0.24);
|
|
457
427
|
$elevation-dark-light-offset-x-0: 0px;
|
|
458
|
-
$elevation-dark-light-offset-
|
|
459
|
-
$elevation-dark-light-offset-y-0: 0px;
|
|
460
|
-
$elevation-dark-light-offset-y-1: 1px;
|
|
428
|
+
$elevation-dark-light-offset-y-0: 2px;
|
|
461
429
|
$elevation-dark-light-blur-0: 2px;
|
|
462
|
-
$elevation-dark-light-
|
|
463
|
-
$elevation-dark-light-spread-0: 0px;
|
|
464
|
-
$elevation-dark-light-spread-1: 0px;
|
|
430
|
+
$elevation-dark-light-spread-0: -2px;
|
|
465
431
|
$elevation-dark-light-color-0: rgba(0, 0, 0, 0.24);
|
|
466
|
-
$elevation-dark-
|
|
467
|
-
$elevation-dark-semilight: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 2px 4px 0px rgba(0, 0, 0, 0.28);
|
|
432
|
+
$elevation-dark-semilight: 0px 4px 4px -2px rgba(0, 0, 0, 0.24);
|
|
468
433
|
$elevation-dark-semilight-offset-x-0: 0px;
|
|
469
|
-
$elevation-dark-semilight-offset-
|
|
470
|
-
$elevation-dark-semilight-
|
|
471
|
-
$elevation-dark-semilight-
|
|
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;
|
|
434
|
+
$elevation-dark-semilight-offset-y-0: 4px;
|
|
435
|
+
$elevation-dark-semilight-blur-0: 4px;
|
|
436
|
+
$elevation-dark-semilight-spread-0: -2px;
|
|
476
437
|
$elevation-dark-semilight-color-0: rgba(0, 0, 0, 0.24);
|
|
477
|
-
$elevation-dark-
|
|
478
|
-
$elevation-dark-regular: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 4px 8px 0px rgba(0, 0, 0, 0.28);
|
|
438
|
+
$elevation-dark-regular: 0px 6px 6px -2px rgba(0, 0, 0, 0.24);
|
|
479
439
|
$elevation-dark-regular-offset-x-0: 0px;
|
|
480
|
-
$elevation-dark-regular-offset-
|
|
481
|
-
$elevation-dark-regular-
|
|
482
|
-
$elevation-dark-regular-
|
|
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;
|
|
440
|
+
$elevation-dark-regular-offset-y-0: 6px;
|
|
441
|
+
$elevation-dark-regular-blur-0: 6px;
|
|
442
|
+
$elevation-dark-regular-spread-0: -2px;
|
|
487
443
|
$elevation-dark-regular-color-0: rgba(0, 0, 0, 0.24);
|
|
488
|
-
$elevation-dark-
|
|
489
|
-
$elevation-dark-semibold: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 8px 16px 0px rgba(0, 0, 0, 0.28);
|
|
444
|
+
$elevation-dark-semibold: 0px 8px 8px -2px rgba(0, 0, 0, 0.24);
|
|
490
445
|
$elevation-dark-semibold-offset-x-0: 0px;
|
|
491
|
-
$elevation-dark-semibold-offset-
|
|
492
|
-
$elevation-dark-semibold-
|
|
493
|
-
$elevation-dark-semibold-
|
|
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;
|
|
446
|
+
$elevation-dark-semibold-offset-y-0: 8px;
|
|
447
|
+
$elevation-dark-semibold-blur-0: 8px;
|
|
448
|
+
$elevation-dark-semibold-spread-0: -2px;
|
|
498
449
|
$elevation-dark-semibold-color-0: rgba(0, 0, 0, 0.24);
|
|
499
|
-
$elevation-dark-
|
|
500
|
-
$elevation-dark-bold: 0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 14px 28px 0px rgba(0, 0, 0, 0.28);
|
|
450
|
+
$elevation-dark-bold: 0px 10px 10px -2px rgba(0, 0, 0, 0.24);
|
|
501
451
|
$elevation-dark-bold-offset-x-0: 0px;
|
|
502
|
-
$elevation-dark-bold-offset-
|
|
503
|
-
$elevation-dark-bold-
|
|
504
|
-
$elevation-dark-bold-
|
|
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;
|
|
452
|
+
$elevation-dark-bold-offset-y-0: 10px;
|
|
453
|
+
$elevation-dark-bold-blur-0: 10px;
|
|
454
|
+
$elevation-dark-bold-spread-0: -2px;
|
|
509
455
|
$elevation-dark-bold-color-0: rgba(0, 0, 0, 0.24);
|
|
510
|
-
$elevation-dark-
|
|
511
|
-
$elevation-dark-extrabold: 0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 32px 64px 0px rgba(0, 0, 0, 0.28);
|
|
456
|
+
$elevation-dark-extrabold: 0px 12px 12px -2px rgba(0, 0, 0, 0.24);
|
|
512
457
|
$elevation-dark-extrabold-offset-x-0: 0px;
|
|
513
|
-
$elevation-dark-extrabold-offset-
|
|
514
|
-
$elevation-dark-extrabold-
|
|
515
|
-
$elevation-dark-extrabold-
|
|
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;
|
|
458
|
+
$elevation-dark-extrabold-offset-y-0: 12px;
|
|
459
|
+
$elevation-dark-extrabold-blur-0: 12px;
|
|
460
|
+
$elevation-dark-extrabold-spread-0: -2px;
|
|
520
461
|
$elevation-dark-extrabold-color-0: rgba(0, 0, 0, 0.24);
|
|
521
|
-
$elevation-dark-extrabold-color-1: rgba(0, 0, 0, 0.28);
|
|
522
462
|
$size-tiny: 2px;
|
|
523
463
|
$size-small: 4px;
|
|
524
464
|
$size-medium: 8px;
|
|
@@ -937,13 +877,6 @@ $_shadows-light: (
|
|
|
937
877
|
blur: $elevation-light-light-blur-0,
|
|
938
878
|
spread: $elevation-light-light-spread-0,
|
|
939
879
|
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
880
|
)
|
|
948
881
|
),
|
|
949
882
|
semi-light: (
|
|
@@ -953,13 +886,6 @@ $_shadows-light: (
|
|
|
953
886
|
blur: $elevation-light-semilight-blur-0,
|
|
954
887
|
spread: $elevation-light-semilight-spread-0,
|
|
955
888
|
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
889
|
)
|
|
964
890
|
),
|
|
965
891
|
regular: (
|
|
@@ -969,13 +895,6 @@ $_shadows-light: (
|
|
|
969
895
|
blur: $elevation-light-regular-blur-0,
|
|
970
896
|
spread: $elevation-light-regular-spread-0,
|
|
971
897
|
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
898
|
)
|
|
980
899
|
),
|
|
981
900
|
semi-bold: (
|
|
@@ -985,13 +904,6 @@ $_shadows-light: (
|
|
|
985
904
|
blur: $elevation-light-semibold-blur-0,
|
|
986
905
|
spread: $elevation-light-semibold-spread-0,
|
|
987
906
|
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
907
|
)
|
|
996
908
|
),
|
|
997
909
|
bold: (
|
|
@@ -1001,13 +913,6 @@ $_shadows-light: (
|
|
|
1001
913
|
blur: $elevation-light-bold-blur-0,
|
|
1002
914
|
spread: $elevation-light-bold-spread-0,
|
|
1003
915
|
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
916
|
)
|
|
1012
917
|
),
|
|
1013
918
|
extra-bold: (
|
|
@@ -1017,13 +922,6 @@ $_shadows-light: (
|
|
|
1017
922
|
blur: $elevation-light-extrabold-blur-0,
|
|
1018
923
|
spread: $elevation-light-extrabold-spread-0,
|
|
1019
924
|
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
925
|
)
|
|
1028
926
|
)
|
|
1029
927
|
);
|
|
@@ -1036,13 +934,6 @@ $_shadows-dark: (
|
|
|
1036
934
|
blur: $elevation-dark-light-blur-0,
|
|
1037
935
|
spread: $elevation-dark-light-spread-0,
|
|
1038
936
|
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
937
|
)
|
|
1047
938
|
),
|
|
1048
939
|
semi-light: (
|
|
@@ -1052,13 +943,6 @@ $_shadows-dark: (
|
|
|
1052
943
|
blur: $elevation-dark-semilight-blur-0,
|
|
1053
944
|
spread: $elevation-dark-semilight-spread-0,
|
|
1054
945
|
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
946
|
)
|
|
1063
947
|
),
|
|
1064
948
|
regular: (
|
|
@@ -1068,13 +952,6 @@ $_shadows-dark: (
|
|
|
1068
952
|
blur: $elevation-dark-regular-blur-0,
|
|
1069
953
|
spread: $elevation-dark-regular-spread-0,
|
|
1070
954
|
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
955
|
)
|
|
1079
956
|
),
|
|
1080
957
|
semi-bold: (
|
|
@@ -1084,13 +961,6 @@ $_shadows-dark: (
|
|
|
1084
961
|
blur: $elevation-dark-semibold-blur-0,
|
|
1085
962
|
spread: $elevation-dark-semibold-spread-0,
|
|
1086
963
|
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
964
|
)
|
|
1095
965
|
),
|
|
1096
966
|
bold: (
|
|
@@ -1100,13 +970,6 @@ $_shadows-dark: (
|
|
|
1100
970
|
blur: $elevation-dark-bold-blur-0,
|
|
1101
971
|
spread: $elevation-dark-bold-spread-0,
|
|
1102
972
|
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
973
|
)
|
|
1111
974
|
),
|
|
1112
975
|
extra-bold: (
|
|
@@ -1116,13 +979,6 @@ $_shadows-dark: (
|
|
|
1116
979
|
blur: $elevation-dark-extrabold-blur-0,
|
|
1117
980
|
spread: $elevation-dark-extrabold-spread-0,
|
|
1118
981
|
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
982
|
)
|
|
1127
983
|
)
|
|
1128
984
|
);
|
|
@@ -1967,9 +1823,10 @@ $auto-complete-box-props: (
|
|
|
1967
1823
|
'border-style': solid,
|
|
1968
1824
|
'border-width': var(--joy-layout-thickness),
|
|
1969
1825
|
'focus-ring-active-width': 8px,
|
|
1970
|
-
'focus-ring-color': var(--joy-
|
|
1826
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
1971
1827
|
'focus-ring-inward-offset': 2px,
|
|
1972
|
-
'focus-ring-outward-offset':
|
|
1828
|
+
'focus-ring-outward-offset': 0px,
|
|
1829
|
+
'focus-ring-width': 0px,
|
|
1973
1830
|
'font-family': var(--joy-font-family),
|
|
1974
1831
|
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
|
|
1975
1832
|
'font-line-height': var(--joy-typography-body2-line-height),
|
|
@@ -3928,6 +3785,9 @@ $chip-box-props: (
|
|
|
3928
3785
|
'border-radius': var(--joy-layout-radius),
|
|
3929
3786
|
'border-style': solid,
|
|
3930
3787
|
'border-width': var(--joy-layout-thickness),
|
|
3788
|
+
'focus-ring-active-width': 8px,
|
|
3789
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
3790
|
+
'focus-ring-inward-offset': 2px,
|
|
3931
3791
|
'focus-ring-outward-offset': 0px,
|
|
3932
3792
|
'focus-ring-width': 0px,
|
|
3933
3793
|
'font-family': var(--joy-font-family),
|
|
@@ -4013,7 +3873,7 @@ $choice-props: (
|
|
|
4013
3873
|
'border-width': var(--joy-layout-thickness),
|
|
4014
3874
|
'checkmark-border-radius': calc(var(--joy-layout-radius) / 2),
|
|
4015
3875
|
'focus-ring-border-radius': calc(var(--joy-layout-radius) * 1.5),
|
|
4016
|
-
'focus-ring-color': var(--joy-
|
|
3876
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
4017
3877
|
'focus-ring-outward-offset': calc(var(--joy-layout-space) / 2),
|
|
4018
3878
|
'font-family': var(--joy-font-family),
|
|
4019
3879
|
'font-letter-spacing': var(--joy-typography-body1-letter-spacing),
|
|
@@ -4243,6 +4103,9 @@ $color-box-props: (
|
|
|
4243
4103
|
'border-radius': var(--joy-layout-radius),
|
|
4244
4104
|
'border-style': solid,
|
|
4245
4105
|
'border-width': var(--joy-layout-thickness),
|
|
4106
|
+
'focus-ring-active-width': 8px,
|
|
4107
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
4108
|
+
'focus-ring-inward-offset': 2px,
|
|
4246
4109
|
'focus-ring-outward-offset': 0px,
|
|
4247
4110
|
'focus-ring-width': 0px,
|
|
4248
4111
|
'font-family': var(--joy-font-family),
|
|
@@ -4286,7 +4149,7 @@ $color-editor-props: (
|
|
|
4286
4149
|
'border-style': solid,
|
|
4287
4150
|
'border-width': var(--joy-layout-thickness),
|
|
4288
4151
|
'focus-ring-active-width': 8px,
|
|
4289
|
-
'focus-ring-color': var(--joy-
|
|
4152
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
4290
4153
|
'focus-ring-inward-offset': 2px,
|
|
4291
4154
|
'focus-ring-outward-offset': 2px,
|
|
4292
4155
|
'font-family': var(--joy-font-family),
|
|
@@ -4332,7 +4195,7 @@ $color-editor-alpha-slider-props: (
|
|
|
4332
4195
|
'border-width': 0,
|
|
4333
4196
|
'checkerboard-size': 8px,
|
|
4334
4197
|
'focus-ring-active-width': 8px,
|
|
4335
|
-
'focus-ring-color': var(--joy-
|
|
4198
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
4336
4199
|
'focus-ring-inward-offset': 2px,
|
|
4337
4200
|
'focus-ring-outward-offset': 2px,
|
|
4338
4201
|
'font-family': unset,
|
|
@@ -4383,7 +4246,7 @@ $color-editor-area-props: (
|
|
|
4383
4246
|
'border-style': none,
|
|
4384
4247
|
'border-width': 0,
|
|
4385
4248
|
'focus-ring-active-width': 8px,
|
|
4386
|
-
'focus-ring-color': var(--joy-
|
|
4249
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
4387
4250
|
'focus-ring-inward-offset': 2px,
|
|
4388
4251
|
'focus-ring-outward-offset': 2px,
|
|
4389
4252
|
'font-family': unset,
|
|
@@ -4433,7 +4296,7 @@ $color-editor-hue-slider-props: (
|
|
|
4433
4296
|
'border-style': none,
|
|
4434
4297
|
'border-width': 0,
|
|
4435
4298
|
'focus-ring-active-width': 8px,
|
|
4436
|
-
'focus-ring-color': var(--joy-
|
|
4299
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
4437
4300
|
'focus-ring-inward-offset': 2px,
|
|
4438
4301
|
'focus-ring-outward-offset': 2px,
|
|
4439
4302
|
'font-family': unset,
|
|
@@ -4579,7 +4442,7 @@ $color-editor-shade-slider-props: (
|
|
|
4579
4442
|
'border-style': none,
|
|
4580
4443
|
'border-width': 0,
|
|
4581
4444
|
'focus-ring-active-width': 8px,
|
|
4582
|
-
'focus-ring-color': var(--joy-
|
|
4445
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
4583
4446
|
'focus-ring-inward-offset': 2px,
|
|
4584
4447
|
'focus-ring-outward-offset': 2px,
|
|
4585
4448
|
'font-family': unset,
|
|
@@ -4864,23 +4727,29 @@ $color-thumb-props: (
|
|
|
4864
4727
|
* ------------------------------------------------------------------------------
|
|
4865
4728
|
*/
|
|
4866
4729
|
$combo-props: (
|
|
4730
|
+
'background-color': var(--joy-scheme-background),
|
|
4731
|
+
'border-color': var(--joy-scheme-highlight),
|
|
4732
|
+
'border-radius': var(--joy-layout-radius),
|
|
4733
|
+
'border-style': solid,
|
|
4734
|
+
'border-width': var(--joy-layout-thickness),
|
|
4867
4735
|
'focus-ring-active-width': 8px,
|
|
4868
|
-
'focus-ring-color': var(--joy-
|
|
4736
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
4869
4737
|
'focus-ring-inward-offset': 2px,
|
|
4870
|
-
'focus-ring-outward-offset':
|
|
4738
|
+
'focus-ring-outward-offset': 0px,
|
|
4739
|
+
'focus-ring-width': 0px,
|
|
4871
4740
|
'font-family': var(--joy-font-family),
|
|
4872
4741
|
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
|
|
4873
4742
|
'font-line-height': var(--joy-typography-body2-line-height),
|
|
4874
4743
|
'font-size': var(--joy-typography-body2-font-size),
|
|
4875
4744
|
'font-text-decoration': var(--joy-typography-body2-text-decoration),
|
|
4876
4745
|
'font-text-transform': var(--joy-typography-body2-text-transform),
|
|
4877
|
-
'font-weight':
|
|
4746
|
+
'font-weight': normal,
|
|
4878
4747
|
'foreground-color': var(--joy-scheme-foreground),
|
|
4879
4748
|
'gap': var(--joy-layout-space),
|
|
4880
|
-
'padding-bottom':
|
|
4749
|
+
'padding-bottom': var(--joy-layout-space),
|
|
4881
4750
|
'padding-left': calc(var(--joy-layout-space) * 1.5),
|
|
4882
4751
|
'padding-right': calc(var(--joy-layout-space) * 1.5),
|
|
4883
|
-
'padding-top':
|
|
4752
|
+
'padding-top': var(--joy-layout-space),
|
|
4884
4753
|
'shadow': unset unset unset unset unset,
|
|
4885
4754
|
'shadow-blur': unset,
|
|
4886
4755
|
'shadow-color': unset,
|
|
@@ -4908,7 +4777,7 @@ $combo-item-props: (
|
|
|
4908
4777
|
'border-style': solid,
|
|
4909
4778
|
'border-width': 0px,
|
|
4910
4779
|
'focus-ring-active-width': 8px,
|
|
4911
|
-
'focus-ring-color': var(--joy-
|
|
4780
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
4912
4781
|
'focus-ring-inward-offset': 2px,
|
|
4913
4782
|
'focus-ring-outward-offset': 2px,
|
|
4914
4783
|
'font-family': var(--joy-font-family),
|
|
@@ -5173,6 +5042,10 @@ $date-box-props: (
|
|
|
5173
5042
|
'border-radius': var(--joy-layout-radius),
|
|
5174
5043
|
'border-style': solid,
|
|
5175
5044
|
'border-width': var(--joy-layout-thickness),
|
|
5045
|
+
'focus-ring-active-width': 8px,
|
|
5046
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
5047
|
+
'focus-ring-inward-offset': 2px,
|
|
5048
|
+
'focus-ring-outward-offset': 0px,
|
|
5176
5049
|
'focus-ring-width': 0px,
|
|
5177
5050
|
'font-family': var(--joy-font-family),
|
|
5178
5051
|
'font-letter-spacing': unset,
|
|
@@ -5214,6 +5087,11 @@ $date-time-box-props: (
|
|
|
5214
5087
|
'border-radius': var(--joy-layout-radius),
|
|
5215
5088
|
'border-style': solid,
|
|
5216
5089
|
'border-width': var(--joy-layout-thickness),
|
|
5090
|
+
'focus-ring-active-width': 8px,
|
|
5091
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
5092
|
+
'focus-ring-inward-offset': 2px,
|
|
5093
|
+
'focus-ring-outward-offset': 0px,
|
|
5094
|
+
'focus-ring-width': 0px,
|
|
5217
5095
|
'font-family': var(--joy-font-family),
|
|
5218
5096
|
'font-letter-spacing': unset,
|
|
5219
5097
|
'font-line-height': unset,
|
|
@@ -6260,6 +6138,11 @@ $duration-box-props: (
|
|
|
6260
6138
|
'border-radius': var(--joy-layout-radius),
|
|
6261
6139
|
'border-style': solid,
|
|
6262
6140
|
'border-width': var(--joy-layout-thickness),
|
|
6141
|
+
'focus-ring-active-width': 8px,
|
|
6142
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
6143
|
+
'focus-ring-inward-offset': 2px,
|
|
6144
|
+
'focus-ring-outward-offset': 0px,
|
|
6145
|
+
'focus-ring-width': 0px,
|
|
6263
6146
|
'font-family': var(--joy-font-family),
|
|
6264
6147
|
'font-letter-spacing': unset,
|
|
6265
6148
|
'font-line-height': unset,
|
|
@@ -6905,6 +6788,10 @@ $file-box-props: (
|
|
|
6905
6788
|
'border-radius': var(--joy-layout-radius),
|
|
6906
6789
|
'border-style': solid,
|
|
6907
6790
|
'border-width': var(--joy-layout-thickness),
|
|
6791
|
+
'focus-ring-active-width': 8px,
|
|
6792
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
6793
|
+
'focus-ring-inward-offset': 2px,
|
|
6794
|
+
'focus-ring-outward-offset': 0px,
|
|
6908
6795
|
'focus-ring-width': 0px,
|
|
6909
6796
|
'font-family': var(--joy-font-family),
|
|
6910
6797
|
'font-letter-spacing': unset,
|
|
@@ -7526,7 +7413,7 @@ $font-editor-props: (
|
|
|
7526
7413
|
'border-style': solid,
|
|
7527
7414
|
'border-width': var(--joy-layout-thickness),
|
|
7528
7415
|
'focus-ring-active-width': 8px,
|
|
7529
|
-
'focus-ring-color': var(--joy-
|
|
7416
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
7530
7417
|
'focus-ring-inward-offset': 2px,
|
|
7531
7418
|
'focus-ring-outward-offset': 2px,
|
|
7532
7419
|
'font-category-font-size': var(--joy-typography-caption-font-size),
|
|
@@ -9030,6 +8917,11 @@ $number-box-props: (
|
|
|
9030
8917
|
'border-radius': var(--joy-layout-radius),
|
|
9031
8918
|
'border-style': solid,
|
|
9032
8919
|
'border-width': var(--joy-layout-thickness),
|
|
8920
|
+
'focus-ring-active-width': 8px,
|
|
8921
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
8922
|
+
'focus-ring-inward-offset': 2px,
|
|
8923
|
+
'focus-ring-outward-offset': 0px,
|
|
8924
|
+
'focus-ring-width': 0px,
|
|
9033
8925
|
'font-family': var(--joy-font-family),
|
|
9034
8926
|
'font-letter-spacing': unset,
|
|
9035
8927
|
'font-line-height': unset,
|
|
@@ -9372,6 +9264,10 @@ $password-box-props: (
|
|
|
9372
9264
|
'border-radius': var(--joy-layout-radius),
|
|
9373
9265
|
'border-style': solid,
|
|
9374
9266
|
'border-width': var(--joy-layout-thickness),
|
|
9267
|
+
'focus-ring-active-width': 8px,
|
|
9268
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
9269
|
+
'focus-ring-inward-offset': 2px,
|
|
9270
|
+
'focus-ring-outward-offset': 0px,
|
|
9375
9271
|
'focus-ring-width': 0px,
|
|
9376
9272
|
'font-family': var(--joy-font-family),
|
|
9377
9273
|
'font-letter-spacing': unset,
|
|
@@ -9519,6 +9415,11 @@ $pin-box-props: (
|
|
|
9519
9415
|
'border-radius': var(--joy-layout-radius),
|
|
9520
9416
|
'border-style': solid,
|
|
9521
9417
|
'border-width': var(--joy-layout-thickness),
|
|
9418
|
+
'focus-ring-active-width': 8px,
|
|
9419
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
9420
|
+
'focus-ring-inward-offset': 2px,
|
|
9421
|
+
'focus-ring-outward-offset': 0px,
|
|
9422
|
+
'focus-ring-width': 0px,
|
|
9522
9423
|
'font-family': var(--joy-font-family),
|
|
9523
9424
|
'font-letter-spacing': unset,
|
|
9524
9425
|
'font-line-height': unset,
|
|
@@ -10333,6 +10234,11 @@ $rich-text-box-props: (
|
|
|
10333
10234
|
'border-radius': var(--joy-layout-radius),
|
|
10334
10235
|
'border-style': solid,
|
|
10335
10236
|
'border-width': var(--joy-layout-thickness),
|
|
10237
|
+
'focus-ring-active-width': 8px,
|
|
10238
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
10239
|
+
'focus-ring-inward-offset': 2px,
|
|
10240
|
+
'focus-ring-outward-offset': 0px,
|
|
10241
|
+
'focus-ring-width': 0px,
|
|
10336
10242
|
'font-family': var(--joy-font-family),
|
|
10337
10243
|
'font-letter-spacing': unset,
|
|
10338
10244
|
'font-line-height': unset,
|
|
@@ -11192,9 +11098,9 @@ $search-box-props: (
|
|
|
11192
11098
|
'border-style': solid,
|
|
11193
11099
|
'border-width': var(--joy-layout-thickness),
|
|
11194
11100
|
'focus-ring-active-width': 8px,
|
|
11195
|
-
'focus-ring-color':
|
|
11101
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
11196
11102
|
'focus-ring-inward-offset': 2px,
|
|
11197
|
-
'focus-ring-outward-offset':
|
|
11103
|
+
'focus-ring-outward-offset': 0px,
|
|
11198
11104
|
'focus-ring-width': 0px,
|
|
11199
11105
|
'font-family': var(--joy-font-family),
|
|
11200
11106
|
'font-letter-spacing': unset,
|
|
@@ -11311,9 +11217,10 @@ $select-props: (
|
|
|
11311
11217
|
'border-style': solid,
|
|
11312
11218
|
'border-width': var(--joy-layout-thickness),
|
|
11313
11219
|
'focus-ring-active-width': 8px,
|
|
11314
|
-
'focus-ring-color': var(--joy-
|
|
11220
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
11315
11221
|
'focus-ring-inward-offset': 2px,
|
|
11316
|
-
'focus-ring-outward-offset':
|
|
11222
|
+
'focus-ring-outward-offset': 0px,
|
|
11223
|
+
'focus-ring-width': 0px,
|
|
11317
11224
|
'font-family': var(--joy-font-family),
|
|
11318
11225
|
'font-letter-spacing': var(--joy-typography-body2-letter-spacing),
|
|
11319
11226
|
'font-line-height': var(--joy-typography-body2-line-height),
|
|
@@ -11335,7 +11242,7 @@ $select-props: (
|
|
|
11335
11242
|
'shadow-spread': unset,
|
|
11336
11243
|
'transition-duration': var(--joy-duration-short),
|
|
11337
11244
|
'transition-mode': ease,
|
|
11338
|
-
'transition-property': (
|
|
11245
|
+
'transition-property': (transform),
|
|
11339
11246
|
'translate': none
|
|
11340
11247
|
);
|
|
11341
11248
|
/**
|
|
@@ -11354,7 +11261,7 @@ $select-item-props: (
|
|
|
11354
11261
|
'border-style': solid,
|
|
11355
11262
|
'border-width': 0px,
|
|
11356
11263
|
'focus-ring-active-width': 8px,
|
|
11357
|
-
'focus-ring-color': var(--joy-
|
|
11264
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
11358
11265
|
'focus-ring-inward-offset': 2px,
|
|
11359
11266
|
'focus-ring-outward-offset': 2px,
|
|
11360
11267
|
'font-family': var(--joy-font-family),
|
|
@@ -11657,6 +11564,11 @@ $signature-pad-props: (
|
|
|
11657
11564
|
'border-radius': var(--joy-layout-radius),
|
|
11658
11565
|
'border-style': solid,
|
|
11659
11566
|
'border-width': var(--joy-layout-thickness),
|
|
11567
|
+
'focus-ring-active-width': 8px,
|
|
11568
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
11569
|
+
'focus-ring-inward-offset': 2px,
|
|
11570
|
+
'focus-ring-outward-offset': 0px,
|
|
11571
|
+
'focus-ring-width': 0px,
|
|
11660
11572
|
'font-family': var(--joy-font-family),
|
|
11661
11573
|
'font-letter-spacing': unset,
|
|
11662
11574
|
'font-line-height': unset,
|
|
@@ -12953,6 +12865,9 @@ $text-box-props: (
|
|
|
12953
12865
|
'border-radius': var(--joy-layout-radius),
|
|
12954
12866
|
'border-style': solid,
|
|
12955
12867
|
'border-width': var(--joy-layout-thickness),
|
|
12868
|
+
'focus-ring-active-width': 8px,
|
|
12869
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
12870
|
+
'focus-ring-inward-offset': 2px,
|
|
12956
12871
|
'focus-ring-outward-offset': 0px,
|
|
12957
12872
|
'focus-ring-width': 0px,
|
|
12958
12873
|
'font-family': var(--joy-font-family),
|
|
@@ -13360,6 +13275,11 @@ $time-box-props: (
|
|
|
13360
13275
|
'border-radius': var(--joy-layout-radius),
|
|
13361
13276
|
'border-style': solid,
|
|
13362
13277
|
'border-width': var(--joy-layout-thickness),
|
|
13278
|
+
'focus-ring-active-width': 8px,
|
|
13279
|
+
'focus-ring-color': var(--joy-scheme-highlight),
|
|
13280
|
+
'focus-ring-inward-offset': 2px,
|
|
13281
|
+
'focus-ring-outward-offset': 0px,
|
|
13282
|
+
'focus-ring-width': 0px,
|
|
13363
13283
|
'font-family': var(--joy-font-family),
|
|
13364
13284
|
'font-letter-spacing': unset,
|
|
13365
13285
|
'font-line-height': unset,
|