@breadstone/mosaik-themes 0.1.20 → 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/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@breadstone/mosaik-themes",
|
|
3
|
-
"version": "0.1.
|
|
3
|
+
"version": "0.1.22",
|
|
4
4
|
"description": "Mosaik elements various themes.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "andre.wehlert <awehlert@breadstone.de> (https://www.breadstone.de)",
|
|
@@ -14,7 +14,7 @@
|
|
|
14
14
|
"url": "git+ssh://git@github.com/RueDeRennes/mosaik.git"
|
|
15
15
|
},
|
|
16
16
|
"dependencies": {
|
|
17
|
-
"@breadstone/mosaik-elements": "0.1.
|
|
17
|
+
"@breadstone/mosaik-elements": "0.1.22",
|
|
18
18
|
"tslib": "2.8.1"
|
|
19
19
|
},
|
|
20
20
|
"peerDependencies": {
|
package/themes/___joy-tokens.css
CHANGED
|
@@ -319,138 +319,78 @@
|
|
|
319
319
|
--typography-overline-text-decoration: none;
|
|
320
320
|
--typography-overline-text-transform: none;
|
|
321
321
|
--elevation-none: none;
|
|
322
|
-
--elevation-light-light: 0px
|
|
322
|
+
--elevation-light-light: 0px 2px 2px -2px rgba(0, 0, 0, 0.17);
|
|
323
323
|
--elevation-light-light-offset-x-0: 0px;
|
|
324
|
-
--elevation-light-light-offset-
|
|
325
|
-
--elevation-light-light-offset-y-0: 0px;
|
|
326
|
-
--elevation-light-light-offset-y-1: 1px;
|
|
324
|
+
--elevation-light-light-offset-y-0: 2px;
|
|
327
325
|
--elevation-light-light-blur-0: 2px;
|
|
328
|
-
--elevation-light-light-
|
|
329
|
-
--elevation-light-light-
|
|
330
|
-
--elevation-light-
|
|
331
|
-
--elevation-light-light-color-0: rgba(0, 0, 0, 0.12);
|
|
332
|
-
--elevation-light-light-color-1: rgba(0, 0, 0, 0.14);
|
|
333
|
-
--elevation-light-semilight: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14);
|
|
326
|
+
--elevation-light-light-spread-0: -2px;
|
|
327
|
+
--elevation-light-light-color-0: rgba(0, 0, 0, 0.17);
|
|
328
|
+
--elevation-light-semilight: 0px 4px 4px -2px rgba(0, 0, 0, 0.17);
|
|
334
329
|
--elevation-light-semilight-offset-x-0: 0px;
|
|
335
|
-
--elevation-light-semilight-offset-
|
|
336
|
-
--elevation-light-semilight-
|
|
337
|
-
--elevation-light-semilight-
|
|
338
|
-
--elevation-light-semilight-
|
|
339
|
-
--elevation-light-
|
|
340
|
-
--elevation-light-semilight-spread-0: 0px;
|
|
341
|
-
--elevation-light-semilight-spread-1: 0px;
|
|
342
|
-
--elevation-light-semilight-color-0: rgba(0, 0, 0, 0.12);
|
|
343
|
-
--elevation-light-semilight-color-1: rgba(0, 0, 0, 0.14);
|
|
344
|
-
--elevation-light-regular: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.14);
|
|
330
|
+
--elevation-light-semilight-offset-y-0: 4px;
|
|
331
|
+
--elevation-light-semilight-blur-0: 4px;
|
|
332
|
+
--elevation-light-semilight-spread-0: -2px;
|
|
333
|
+
--elevation-light-semilight-color-0: rgba(0, 0, 0, 0.17);
|
|
334
|
+
--elevation-light-regular: 0px 6px 6px -2px rgba(0, 0, 0, 0.17);
|
|
345
335
|
--elevation-light-regular-offset-x-0: 0px;
|
|
346
|
-
--elevation-light-regular-offset-
|
|
347
|
-
--elevation-light-regular-
|
|
348
|
-
--elevation-light-regular-
|
|
349
|
-
--elevation-light-regular-
|
|
350
|
-
--elevation-light-
|
|
351
|
-
--elevation-light-regular-spread-0: 0px;
|
|
352
|
-
--elevation-light-regular-spread-1: 0px;
|
|
353
|
-
--elevation-light-regular-color-0: rgba(0, 0, 0, 0.12);
|
|
354
|
-
--elevation-light-regular-color-1: rgba(0, 0, 0, 0.14);
|
|
355
|
-
--elevation-light-semibold: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.14);
|
|
336
|
+
--elevation-light-regular-offset-y-0: 6px;
|
|
337
|
+
--elevation-light-regular-blur-0: 6px;
|
|
338
|
+
--elevation-light-regular-spread-0: -2px;
|
|
339
|
+
--elevation-light-regular-color-0: rgba(0, 0, 0, 0.17);
|
|
340
|
+
--elevation-light-semibold: 0px 8px 8px -2px rgba(0, 0, 0, 0.17);
|
|
356
341
|
--elevation-light-semibold-offset-x-0: 0px;
|
|
357
|
-
--elevation-light-semibold-offset-
|
|
358
|
-
--elevation-light-semibold-
|
|
359
|
-
--elevation-light-semibold-
|
|
360
|
-
--elevation-light-semibold-
|
|
361
|
-
--elevation-light-
|
|
362
|
-
--elevation-light-semibold-spread-0: 0px;
|
|
363
|
-
--elevation-light-semibold-spread-1: 0px;
|
|
364
|
-
--elevation-light-semibold-color-0: rgba(0, 0, 0, 0.12);
|
|
365
|
-
--elevation-light-semibold-color-1: rgba(0, 0, 0, 0.14);
|
|
366
|
-
--elevation-light-bold: 0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 14px 28px 0px rgba(0, 0, 0, 0.14);
|
|
342
|
+
--elevation-light-semibold-offset-y-0: 8px;
|
|
343
|
+
--elevation-light-semibold-blur-0: 8px;
|
|
344
|
+
--elevation-light-semibold-spread-0: -2px;
|
|
345
|
+
--elevation-light-semibold-color-0: rgba(0, 0, 0, 0.17);
|
|
346
|
+
--elevation-light-bold: 0px 10px 10px -2px rgba(0, 0, 0, 0.17);
|
|
367
347
|
--elevation-light-bold-offset-x-0: 0px;
|
|
368
|
-
--elevation-light-bold-offset-
|
|
369
|
-
--elevation-light-bold-
|
|
370
|
-
--elevation-light-bold-
|
|
371
|
-
--elevation-light-bold-
|
|
372
|
-
--elevation-light-
|
|
373
|
-
--elevation-light-bold-spread-0: 0px;
|
|
374
|
-
--elevation-light-bold-spread-1: 0px;
|
|
375
|
-
--elevation-light-bold-color-0: rgba(0, 0, 0, 0.12);
|
|
376
|
-
--elevation-light-bold-color-1: rgba(0, 0, 0, 0.14);
|
|
377
|
-
--elevation-light-extrabold: 0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 32px 64px 0px rgba(0, 0, 0, 0.14);
|
|
348
|
+
--elevation-light-bold-offset-y-0: 10px;
|
|
349
|
+
--elevation-light-bold-blur-0: 10px;
|
|
350
|
+
--elevation-light-bold-spread-0: -2px;
|
|
351
|
+
--elevation-light-bold-color-0: rgba(0, 0, 0, 0.17);
|
|
352
|
+
--elevation-light-extrabold: 0px 12px 12px -2px rgba(0, 0, 0, 0.17);
|
|
378
353
|
--elevation-light-extrabold-offset-x-0: 0px;
|
|
379
|
-
--elevation-light-extrabold-offset-
|
|
380
|
-
--elevation-light-extrabold-
|
|
381
|
-
--elevation-light-extrabold-
|
|
382
|
-
--elevation-light-extrabold-
|
|
383
|
-
--elevation-light
|
|
384
|
-
--elevation-light-extrabold-spread-0: 0px;
|
|
385
|
-
--elevation-light-extrabold-spread-1: 0px;
|
|
386
|
-
--elevation-light-extrabold-color-0: rgba(0, 0, 0, 0.12);
|
|
387
|
-
--elevation-light-extrabold-color-1: rgba(0, 0, 0, 0.14);
|
|
388
|
-
--elevation-dark-light: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 1px 2px 0px rgba(0, 0, 0, 0.28);
|
|
354
|
+
--elevation-light-extrabold-offset-y-0: 12px;
|
|
355
|
+
--elevation-light-extrabold-blur-0: 12px;
|
|
356
|
+
--elevation-light-extrabold-spread-0: -2px;
|
|
357
|
+
--elevation-light-extrabold-color-0: rgba(0, 0, 0, 0.17);
|
|
358
|
+
--elevation-dark-light: 0px 2px 2px -2px rgba(0, 0, 0, 0.24);
|
|
389
359
|
--elevation-dark-light-offset-x-0: 0px;
|
|
390
|
-
--elevation-dark-light-offset-
|
|
391
|
-
--elevation-dark-light-offset-y-0: 0px;
|
|
392
|
-
--elevation-dark-light-offset-y-1: 1px;
|
|
360
|
+
--elevation-dark-light-offset-y-0: 2px;
|
|
393
361
|
--elevation-dark-light-blur-0: 2px;
|
|
394
|
-
--elevation-dark-light-
|
|
395
|
-
--elevation-dark-light-spread-0: 0px;
|
|
396
|
-
--elevation-dark-light-spread-1: 0px;
|
|
362
|
+
--elevation-dark-light-spread-0: -2px;
|
|
397
363
|
--elevation-dark-light-color-0: rgba(0, 0, 0, 0.24);
|
|
398
|
-
--elevation-dark-
|
|
399
|
-
--elevation-dark-semilight: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 2px 4px 0px rgba(0, 0, 0, 0.28);
|
|
364
|
+
--elevation-dark-semilight: 0px 4px 4px -2px rgba(0, 0, 0, 0.24);
|
|
400
365
|
--elevation-dark-semilight-offset-x-0: 0px;
|
|
401
|
-
--elevation-dark-semilight-offset-
|
|
402
|
-
--elevation-dark-semilight-
|
|
403
|
-
--elevation-dark-semilight-
|
|
404
|
-
--elevation-dark-semilight-blur-0: 2px;
|
|
405
|
-
--elevation-dark-semilight-blur-1: 4px;
|
|
406
|
-
--elevation-dark-semilight-spread-0: 0px;
|
|
407
|
-
--elevation-dark-semilight-spread-1: 0px;
|
|
366
|
+
--elevation-dark-semilight-offset-y-0: 4px;
|
|
367
|
+
--elevation-dark-semilight-blur-0: 4px;
|
|
368
|
+
--elevation-dark-semilight-spread-0: -2px;
|
|
408
369
|
--elevation-dark-semilight-color-0: rgba(0, 0, 0, 0.24);
|
|
409
|
-
--elevation-dark-
|
|
410
|
-
--elevation-dark-regular: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 4px 8px 0px rgba(0, 0, 0, 0.28);
|
|
370
|
+
--elevation-dark-regular: 0px 6px 6px -2px rgba(0, 0, 0, 0.24);
|
|
411
371
|
--elevation-dark-regular-offset-x-0: 0px;
|
|
412
|
-
--elevation-dark-regular-offset-
|
|
413
|
-
--elevation-dark-regular-
|
|
414
|
-
--elevation-dark-regular-
|
|
415
|
-
--elevation-dark-regular-blur-0: 2px;
|
|
416
|
-
--elevation-dark-regular-blur-1: 8px;
|
|
417
|
-
--elevation-dark-regular-spread-0: 0px;
|
|
418
|
-
--elevation-dark-regular-spread-1: 0px;
|
|
372
|
+
--elevation-dark-regular-offset-y-0: 6px;
|
|
373
|
+
--elevation-dark-regular-blur-0: 6px;
|
|
374
|
+
--elevation-dark-regular-spread-0: -2px;
|
|
419
375
|
--elevation-dark-regular-color-0: rgba(0, 0, 0, 0.24);
|
|
420
|
-
--elevation-dark-
|
|
421
|
-
--elevation-dark-semibold: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 8px 16px 0px rgba(0, 0, 0, 0.28);
|
|
376
|
+
--elevation-dark-semibold: 0px 8px 8px -2px rgba(0, 0, 0, 0.24);
|
|
422
377
|
--elevation-dark-semibold-offset-x-0: 0px;
|
|
423
|
-
--elevation-dark-semibold-offset-
|
|
424
|
-
--elevation-dark-semibold-
|
|
425
|
-
--elevation-dark-semibold-
|
|
426
|
-
--elevation-dark-semibold-blur-0: 2px;
|
|
427
|
-
--elevation-dark-semibold-blur-1: 16px;
|
|
428
|
-
--elevation-dark-semibold-spread-0: 0px;
|
|
429
|
-
--elevation-dark-semibold-spread-1: 0px;
|
|
378
|
+
--elevation-dark-semibold-offset-y-0: 8px;
|
|
379
|
+
--elevation-dark-semibold-blur-0: 8px;
|
|
380
|
+
--elevation-dark-semibold-spread-0: -2px;
|
|
430
381
|
--elevation-dark-semibold-color-0: rgba(0, 0, 0, 0.24);
|
|
431
|
-
--elevation-dark-
|
|
432
|
-
--elevation-dark-bold: 0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 14px 28px 0px rgba(0, 0, 0, 0.28);
|
|
382
|
+
--elevation-dark-bold: 0px 10px 10px -2px rgba(0, 0, 0, 0.24);
|
|
433
383
|
--elevation-dark-bold-offset-x-0: 0px;
|
|
434
|
-
--elevation-dark-bold-offset-
|
|
435
|
-
--elevation-dark-bold-
|
|
436
|
-
--elevation-dark-bold-
|
|
437
|
-
--elevation-dark-bold-blur-0: 8px;
|
|
438
|
-
--elevation-dark-bold-blur-1: 28px;
|
|
439
|
-
--elevation-dark-bold-spread-0: 0px;
|
|
440
|
-
--elevation-dark-bold-spread-1: 0px;
|
|
384
|
+
--elevation-dark-bold-offset-y-0: 10px;
|
|
385
|
+
--elevation-dark-bold-blur-0: 10px;
|
|
386
|
+
--elevation-dark-bold-spread-0: -2px;
|
|
441
387
|
--elevation-dark-bold-color-0: rgba(0, 0, 0, 0.24);
|
|
442
|
-
--elevation-dark-
|
|
443
|
-
--elevation-dark-extrabold: 0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 32px 64px 0px rgba(0, 0, 0, 0.28);
|
|
388
|
+
--elevation-dark-extrabold: 0px 12px 12px -2px rgba(0, 0, 0, 0.24);
|
|
444
389
|
--elevation-dark-extrabold-offset-x-0: 0px;
|
|
445
|
-
--elevation-dark-extrabold-offset-
|
|
446
|
-
--elevation-dark-extrabold-
|
|
447
|
-
--elevation-dark-extrabold-
|
|
448
|
-
--elevation-dark-extrabold-blur-0: 8px;
|
|
449
|
-
--elevation-dark-extrabold-blur-1: 64px;
|
|
450
|
-
--elevation-dark-extrabold-spread-0: 0px;
|
|
451
|
-
--elevation-dark-extrabold-spread-1: 0px;
|
|
390
|
+
--elevation-dark-extrabold-offset-y-0: 12px;
|
|
391
|
+
--elevation-dark-extrabold-blur-0: 12px;
|
|
392
|
+
--elevation-dark-extrabold-spread-0: -2px;
|
|
452
393
|
--elevation-dark-extrabold-color-0: rgba(0, 0, 0, 0.24);
|
|
453
|
-
--elevation-dark-extrabold-color-1: rgba(0, 0, 0, 0.28);
|
|
454
394
|
--size-tiny: 2px;
|
|
455
395
|
--size-small: 4px;
|
|
456
396
|
--size-medium: 8px;
|
package/themes/cosmopolitan.scss
CHANGED
|
@@ -3575,6 +3575,9 @@ $chip-box-props: (
|
|
|
3575
3575
|
'border-radius': unset,
|
|
3576
3576
|
'border-style': unset,
|
|
3577
3577
|
'border-width': unset,
|
|
3578
|
+
'focus-ring-active-width': 8px,
|
|
3579
|
+
'focus-ring-color': unset,
|
|
3580
|
+
'focus-ring-inward-offset': 2px,
|
|
3578
3581
|
'focus-ring-outward-offset': 0px,
|
|
3579
3582
|
'focus-ring-width': 0px,
|
|
3580
3583
|
'font-family': var(--cosmopolitan-font-family),
|
|
@@ -3884,6 +3887,9 @@ $color-box-props: (
|
|
|
3884
3887
|
'border-radius': unset,
|
|
3885
3888
|
'border-style': unset,
|
|
3886
3889
|
'border-width': unset,
|
|
3890
|
+
'focus-ring-active-width': 8px,
|
|
3891
|
+
'focus-ring-color': unset,
|
|
3892
|
+
'focus-ring-inward-offset': 2px,
|
|
3887
3893
|
'focus-ring-outward-offset': 0px,
|
|
3888
3894
|
'focus-ring-width': 0px,
|
|
3889
3895
|
'font-family': var(--cosmopolitan-font-family),
|
|
@@ -4505,6 +4511,11 @@ $color-thumb-props: (
|
|
|
4505
4511
|
* ------------------------------------------------------------------------------
|
|
4506
4512
|
*/
|
|
4507
4513
|
$combo-props: (
|
|
4514
|
+
'background-color': unset,
|
|
4515
|
+
'border-color': unset,
|
|
4516
|
+
'border-radius': unset,
|
|
4517
|
+
'border-style': solid,
|
|
4518
|
+
'border-width': unset,
|
|
4508
4519
|
'focus-ring-active-width': 8px,
|
|
4509
4520
|
'focus-ring-color': var(--cosmopolitan-color-light-secondary-400),
|
|
4510
4521
|
'focus-ring-inward-offset': 2px,
|
|
@@ -4814,6 +4825,10 @@ $date-box-props: (
|
|
|
4814
4825
|
'border-radius': unset,
|
|
4815
4826
|
'border-style': unset,
|
|
4816
4827
|
'border-width': unset,
|
|
4828
|
+
'focus-ring-active-width': 8px,
|
|
4829
|
+
'focus-ring-color': unset,
|
|
4830
|
+
'focus-ring-inward-offset': 2px,
|
|
4831
|
+
'focus-ring-outward-offset': 2px,
|
|
4817
4832
|
'focus-ring-width': 0px,
|
|
4818
4833
|
'font-family': var(--cosmopolitan-font-family),
|
|
4819
4834
|
'font-letter-spacing': unset,
|
|
@@ -4858,6 +4873,10 @@ $date-time-box-props: (
|
|
|
4858
4873
|
'calendar-border-radius': unset,
|
|
4859
4874
|
'calendar-border-style': unset,
|
|
4860
4875
|
'calendar-border-width': unset,
|
|
4876
|
+
'focus-ring-active-width': 8px,
|
|
4877
|
+
'focus-ring-color': unset,
|
|
4878
|
+
'focus-ring-inward-offset': 2px,
|
|
4879
|
+
'focus-ring-outward-offset': 2px,
|
|
4861
4880
|
'font-family': var(--cosmopolitan-font-family),
|
|
4862
4881
|
'font-letter-spacing': unset,
|
|
4863
4882
|
'font-line-height': unset,
|
|
@@ -5890,6 +5909,10 @@ $duration-box-props: (
|
|
|
5890
5909
|
'border-radius': unset,
|
|
5891
5910
|
'border-style': unset,
|
|
5892
5911
|
'border-width': unset,
|
|
5912
|
+
'focus-ring-active-width': 8px,
|
|
5913
|
+
'focus-ring-color': unset,
|
|
5914
|
+
'focus-ring-inward-offset': 2px,
|
|
5915
|
+
'focus-ring-outward-offset': 2px,
|
|
5893
5916
|
'font-family': var(--cosmopolitan-font-family),
|
|
5894
5917
|
'font-letter-spacing': unset,
|
|
5895
5918
|
'font-line-height': unset,
|
|
@@ -6536,6 +6559,10 @@ $file-box-props: (
|
|
|
6536
6559
|
'border-radius': unset,
|
|
6537
6560
|
'border-style': unset,
|
|
6538
6561
|
'border-width': unset,
|
|
6562
|
+
'focus-ring-active-width': 8px,
|
|
6563
|
+
'focus-ring-color': unset,
|
|
6564
|
+
'focus-ring-inward-offset': 2px,
|
|
6565
|
+
'focus-ring-outward-offset': 2px,
|
|
6539
6566
|
'focus-ring-width': 0px,
|
|
6540
6567
|
'font-family': var(--cosmopolitan-font-family),
|
|
6541
6568
|
'font-letter-spacing': unset,
|
|
@@ -8670,6 +8697,9 @@ $number-box-props: (
|
|
|
8670
8697
|
'border-radius': unset,
|
|
8671
8698
|
'border-style': unset,
|
|
8672
8699
|
'border-width': unset,
|
|
8700
|
+
'focus-ring-active-width': 8px,
|
|
8701
|
+
'focus-ring-color': unset,
|
|
8702
|
+
'focus-ring-inward-offset': 2px,
|
|
8673
8703
|
'focus-ring-outward-offset': unset,
|
|
8674
8704
|
'font-family': var(--cosmopolitan-font-family),
|
|
8675
8705
|
'font-letter-spacing': unset,
|
|
@@ -9022,6 +9052,10 @@ $password-box-props: (
|
|
|
9022
9052
|
'border-radius': unset,
|
|
9023
9053
|
'border-style': unset,
|
|
9024
9054
|
'border-width': unset,
|
|
9055
|
+
'focus-ring-active-width': 8px,
|
|
9056
|
+
'focus-ring-color': unset,
|
|
9057
|
+
'focus-ring-inward-offset': 2px,
|
|
9058
|
+
'focus-ring-outward-offset': 2px,
|
|
9025
9059
|
'focus-ring-width': 0px,
|
|
9026
9060
|
'font-family': var(--cosmopolitan-font-family),
|
|
9027
9061
|
'font-letter-spacing': unset,
|
|
@@ -9170,6 +9204,10 @@ $pin-box-props: (
|
|
|
9170
9204
|
'border-radius': unset,
|
|
9171
9205
|
'border-style': unset,
|
|
9172
9206
|
'border-width': unset,
|
|
9207
|
+
'focus-ring-active-width': 8px,
|
|
9208
|
+
'focus-ring-color': unset,
|
|
9209
|
+
'focus-ring-inward-offset': 2px,
|
|
9210
|
+
'focus-ring-outward-offset': 2px,
|
|
9173
9211
|
'font-family': var(--cosmopolitan-font-family),
|
|
9174
9212
|
'font-letter-spacing': unset,
|
|
9175
9213
|
'font-line-height': unset,
|
|
@@ -9985,6 +10023,9 @@ $rich-text-box-props: (
|
|
|
9985
10023
|
'border-radius': unset,
|
|
9986
10024
|
'border-style': unset,
|
|
9987
10025
|
'border-width': unset,
|
|
10026
|
+
'focus-ring-active-width': 8px,
|
|
10027
|
+
'focus-ring-color': unset,
|
|
10028
|
+
'focus-ring-inward-offset': 2px,
|
|
9988
10029
|
'focus-ring-outward-offset': unset,
|
|
9989
10030
|
'font-family': var(--cosmopolitan-font-family),
|
|
9990
10031
|
'font-letter-spacing': unset,
|
|
@@ -10998,11 +11039,11 @@ $select-props: (
|
|
|
10998
11039
|
'font-text-transform': var(--cosmopolitan-typography-body2-text-transform),
|
|
10999
11040
|
'font-weight': normal,
|
|
11000
11041
|
'foreground-color': unset,
|
|
11001
|
-
'gap':
|
|
11002
|
-
'padding-bottom':
|
|
11003
|
-
'padding-left':
|
|
11004
|
-
'padding-right':
|
|
11005
|
-
'padding-top':
|
|
11042
|
+
'gap': var(--cosmopolitan-layout-space),
|
|
11043
|
+
'padding-bottom': calc(var(--cosmopolitan-layout-space) / 2),
|
|
11044
|
+
'padding-left': calc(var(--cosmopolitan-layout-space) * 1.5),
|
|
11045
|
+
'padding-right': calc(var(--cosmopolitan-layout-space) * 1.5),
|
|
11046
|
+
'padding-top': calc(var(--cosmopolitan-layout-space) / 2),
|
|
11006
11047
|
'shadow': unset unset unset unset unset,
|
|
11007
11048
|
'shadow-blur': unset,
|
|
11008
11049
|
'shadow-color': unset,
|
|
@@ -11333,6 +11374,10 @@ $signature-pad-props: (
|
|
|
11333
11374
|
'border-radius': unset,
|
|
11334
11375
|
'border-style': unset,
|
|
11335
11376
|
'border-width': unset,
|
|
11377
|
+
'focus-ring-active-width': 8px,
|
|
11378
|
+
'focus-ring-color': unset,
|
|
11379
|
+
'focus-ring-inward-offset': 2px,
|
|
11380
|
+
'focus-ring-outward-offset': 2px,
|
|
11336
11381
|
'font-family': var(--cosmopolitan-font-family),
|
|
11337
11382
|
'font-letter-spacing': unset,
|
|
11338
11383
|
'font-line-height': unset,
|
|
@@ -12627,6 +12672,9 @@ $text-box-props: (
|
|
|
12627
12672
|
'border-radius': unset,
|
|
12628
12673
|
'border-style': unset,
|
|
12629
12674
|
'border-width': unset,
|
|
12675
|
+
'focus-ring-active-width': 8px,
|
|
12676
|
+
'focus-ring-color': unset,
|
|
12677
|
+
'focus-ring-inward-offset': 2px,
|
|
12630
12678
|
'focus-ring-outward-offset': 0px,
|
|
12631
12679
|
'focus-ring-width': 0px,
|
|
12632
12680
|
'font-family': var(--cosmopolitan-font-family),
|
|
@@ -13035,6 +13083,10 @@ $time-box-props: (
|
|
|
13035
13083
|
'border-style': unset,
|
|
13036
13084
|
'border-width': unset,
|
|
13037
13085
|
'color': unset,
|
|
13086
|
+
'focus-ring-active-width': 8px,
|
|
13087
|
+
'focus-ring-color': unset,
|
|
13088
|
+
'focus-ring-inward-offset': 2px,
|
|
13089
|
+
'focus-ring-outward-offset': 2px,
|
|
13038
13090
|
'font-family': var(--cosmopolitan-font-family),
|
|
13039
13091
|
'font-letter-spacing': unset,
|
|
13040
13092
|
'font-line-height': unset,
|
package/themes/joy-tokens.scss
CHANGED
|
@@ -317,138 +317,78 @@ $typography-overline-letter-spacing: 2.6666666666666665px;
|
|
|
317
317
|
$typography-overline-text-decoration: none;
|
|
318
318
|
$typography-overline-text-transform: none;
|
|
319
319
|
$elevation-none: none;
|
|
320
|
-
$elevation-light-light: 0px
|
|
320
|
+
$elevation-light-light: 0px 2px 2px -2px rgba(0, 0, 0, 0.17);
|
|
321
321
|
$elevation-light-light-offset-x-0: 0px;
|
|
322
|
-
$elevation-light-light-offset-
|
|
323
|
-
$elevation-light-light-offset-y-0: 0px;
|
|
324
|
-
$elevation-light-light-offset-y-1: 1px;
|
|
322
|
+
$elevation-light-light-offset-y-0: 2px;
|
|
325
323
|
$elevation-light-light-blur-0: 2px;
|
|
326
|
-
$elevation-light-light-
|
|
327
|
-
$elevation-light-light-
|
|
328
|
-
$elevation-light-
|
|
329
|
-
$elevation-light-light-color-0: rgba(0, 0, 0, 0.12);
|
|
330
|
-
$elevation-light-light-color-1: rgba(0, 0, 0, 0.14);
|
|
331
|
-
$elevation-light-semilight: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 2px 4px 0px rgba(0, 0, 0, 0.14);
|
|
324
|
+
$elevation-light-light-spread-0: -2px;
|
|
325
|
+
$elevation-light-light-color-0: rgba(0, 0, 0, 0.17);
|
|
326
|
+
$elevation-light-semilight: 0px 4px 4px -2px rgba(0, 0, 0, 0.17);
|
|
332
327
|
$elevation-light-semilight-offset-x-0: 0px;
|
|
333
|
-
$elevation-light-semilight-offset-
|
|
334
|
-
$elevation-light-semilight-
|
|
335
|
-
$elevation-light-semilight-
|
|
336
|
-
$elevation-light-semilight-
|
|
337
|
-
$elevation-light-
|
|
338
|
-
$elevation-light-semilight-spread-0: 0px;
|
|
339
|
-
$elevation-light-semilight-spread-1: 0px;
|
|
340
|
-
$elevation-light-semilight-color-0: rgba(0, 0, 0, 0.12);
|
|
341
|
-
$elevation-light-semilight-color-1: rgba(0, 0, 0, 0.14);
|
|
342
|
-
$elevation-light-regular: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 4px 8px 0px rgba(0, 0, 0, 0.14);
|
|
328
|
+
$elevation-light-semilight-offset-y-0: 4px;
|
|
329
|
+
$elevation-light-semilight-blur-0: 4px;
|
|
330
|
+
$elevation-light-semilight-spread-0: -2px;
|
|
331
|
+
$elevation-light-semilight-color-0: rgba(0, 0, 0, 0.17);
|
|
332
|
+
$elevation-light-regular: 0px 6px 6px -2px rgba(0, 0, 0, 0.17);
|
|
343
333
|
$elevation-light-regular-offset-x-0: 0px;
|
|
344
|
-
$elevation-light-regular-offset-
|
|
345
|
-
$elevation-light-regular-
|
|
346
|
-
$elevation-light-regular-
|
|
347
|
-
$elevation-light-regular-
|
|
348
|
-
$elevation-light-
|
|
349
|
-
$elevation-light-regular-spread-0: 0px;
|
|
350
|
-
$elevation-light-regular-spread-1: 0px;
|
|
351
|
-
$elevation-light-regular-color-0: rgba(0, 0, 0, 0.12);
|
|
352
|
-
$elevation-light-regular-color-1: rgba(0, 0, 0, 0.14);
|
|
353
|
-
$elevation-light-semibold: 0px 0px 2px 0px rgba(0, 0, 0, 0.12), 0px 8px 16px 0px rgba(0, 0, 0, 0.14);
|
|
334
|
+
$elevation-light-regular-offset-y-0: 6px;
|
|
335
|
+
$elevation-light-regular-blur-0: 6px;
|
|
336
|
+
$elevation-light-regular-spread-0: -2px;
|
|
337
|
+
$elevation-light-regular-color-0: rgba(0, 0, 0, 0.17);
|
|
338
|
+
$elevation-light-semibold: 0px 8px 8px -2px rgba(0, 0, 0, 0.17);
|
|
354
339
|
$elevation-light-semibold-offset-x-0: 0px;
|
|
355
|
-
$elevation-light-semibold-offset-
|
|
356
|
-
$elevation-light-semibold-
|
|
357
|
-
$elevation-light-semibold-
|
|
358
|
-
$elevation-light-semibold-
|
|
359
|
-
$elevation-light-
|
|
360
|
-
$elevation-light-semibold-spread-0: 0px;
|
|
361
|
-
$elevation-light-semibold-spread-1: 0px;
|
|
362
|
-
$elevation-light-semibold-color-0: rgba(0, 0, 0, 0.12);
|
|
363
|
-
$elevation-light-semibold-color-1: rgba(0, 0, 0, 0.14);
|
|
364
|
-
$elevation-light-bold: 0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 14px 28px 0px rgba(0, 0, 0, 0.14);
|
|
340
|
+
$elevation-light-semibold-offset-y-0: 8px;
|
|
341
|
+
$elevation-light-semibold-blur-0: 8px;
|
|
342
|
+
$elevation-light-semibold-spread-0: -2px;
|
|
343
|
+
$elevation-light-semibold-color-0: rgba(0, 0, 0, 0.17);
|
|
344
|
+
$elevation-light-bold: 0px 10px 10px -2px rgba(0, 0, 0, 0.17);
|
|
365
345
|
$elevation-light-bold-offset-x-0: 0px;
|
|
366
|
-
$elevation-light-bold-offset-
|
|
367
|
-
$elevation-light-bold-
|
|
368
|
-
$elevation-light-bold-
|
|
369
|
-
$elevation-light-bold-
|
|
370
|
-
$elevation-light-
|
|
371
|
-
$elevation-light-bold-spread-0: 0px;
|
|
372
|
-
$elevation-light-bold-spread-1: 0px;
|
|
373
|
-
$elevation-light-bold-color-0: rgba(0, 0, 0, 0.12);
|
|
374
|
-
$elevation-light-bold-color-1: rgba(0, 0, 0, 0.14);
|
|
375
|
-
$elevation-light-extrabold: 0px 0px 8px 0px rgba(0, 0, 0, 0.12), 0px 32px 64px 0px rgba(0, 0, 0, 0.14);
|
|
346
|
+
$elevation-light-bold-offset-y-0: 10px;
|
|
347
|
+
$elevation-light-bold-blur-0: 10px;
|
|
348
|
+
$elevation-light-bold-spread-0: -2px;
|
|
349
|
+
$elevation-light-bold-color-0: rgba(0, 0, 0, 0.17);
|
|
350
|
+
$elevation-light-extrabold: 0px 12px 12px -2px rgba(0, 0, 0, 0.17);
|
|
376
351
|
$elevation-light-extrabold-offset-x-0: 0px;
|
|
377
|
-
$elevation-light-extrabold-offset-
|
|
378
|
-
$elevation-light-extrabold-
|
|
379
|
-
$elevation-light-extrabold-
|
|
380
|
-
$elevation-light-extrabold-
|
|
381
|
-
$elevation-light
|
|
382
|
-
$elevation-light-extrabold-spread-0: 0px;
|
|
383
|
-
$elevation-light-extrabold-spread-1: 0px;
|
|
384
|
-
$elevation-light-extrabold-color-0: rgba(0, 0, 0, 0.12);
|
|
385
|
-
$elevation-light-extrabold-color-1: rgba(0, 0, 0, 0.14);
|
|
386
|
-
$elevation-dark-light: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 1px 2px 0px rgba(0, 0, 0, 0.28);
|
|
352
|
+
$elevation-light-extrabold-offset-y-0: 12px;
|
|
353
|
+
$elevation-light-extrabold-blur-0: 12px;
|
|
354
|
+
$elevation-light-extrabold-spread-0: -2px;
|
|
355
|
+
$elevation-light-extrabold-color-0: rgba(0, 0, 0, 0.17);
|
|
356
|
+
$elevation-dark-light: 0px 2px 2px -2px rgba(0, 0, 0, 0.24);
|
|
387
357
|
$elevation-dark-light-offset-x-0: 0px;
|
|
388
|
-
$elevation-dark-light-offset-
|
|
389
|
-
$elevation-dark-light-offset-y-0: 0px;
|
|
390
|
-
$elevation-dark-light-offset-y-1: 1px;
|
|
358
|
+
$elevation-dark-light-offset-y-0: 2px;
|
|
391
359
|
$elevation-dark-light-blur-0: 2px;
|
|
392
|
-
$elevation-dark-light-
|
|
393
|
-
$elevation-dark-light-spread-0: 0px;
|
|
394
|
-
$elevation-dark-light-spread-1: 0px;
|
|
360
|
+
$elevation-dark-light-spread-0: -2px;
|
|
395
361
|
$elevation-dark-light-color-0: rgba(0, 0, 0, 0.24);
|
|
396
|
-
$elevation-dark-
|
|
397
|
-
$elevation-dark-semilight: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 2px 4px 0px rgba(0, 0, 0, 0.28);
|
|
362
|
+
$elevation-dark-semilight: 0px 4px 4px -2px rgba(0, 0, 0, 0.24);
|
|
398
363
|
$elevation-dark-semilight-offset-x-0: 0px;
|
|
399
|
-
$elevation-dark-semilight-offset-
|
|
400
|
-
$elevation-dark-semilight-
|
|
401
|
-
$elevation-dark-semilight-
|
|
402
|
-
$elevation-dark-semilight-blur-0: 2px;
|
|
403
|
-
$elevation-dark-semilight-blur-1: 4px;
|
|
404
|
-
$elevation-dark-semilight-spread-0: 0px;
|
|
405
|
-
$elevation-dark-semilight-spread-1: 0px;
|
|
364
|
+
$elevation-dark-semilight-offset-y-0: 4px;
|
|
365
|
+
$elevation-dark-semilight-blur-0: 4px;
|
|
366
|
+
$elevation-dark-semilight-spread-0: -2px;
|
|
406
367
|
$elevation-dark-semilight-color-0: rgba(0, 0, 0, 0.24);
|
|
407
|
-
$elevation-dark-
|
|
408
|
-
$elevation-dark-regular: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 4px 8px 0px rgba(0, 0, 0, 0.28);
|
|
368
|
+
$elevation-dark-regular: 0px 6px 6px -2px rgba(0, 0, 0, 0.24);
|
|
409
369
|
$elevation-dark-regular-offset-x-0: 0px;
|
|
410
|
-
$elevation-dark-regular-offset-
|
|
411
|
-
$elevation-dark-regular-
|
|
412
|
-
$elevation-dark-regular-
|
|
413
|
-
$elevation-dark-regular-blur-0: 2px;
|
|
414
|
-
$elevation-dark-regular-blur-1: 8px;
|
|
415
|
-
$elevation-dark-regular-spread-0: 0px;
|
|
416
|
-
$elevation-dark-regular-spread-1: 0px;
|
|
370
|
+
$elevation-dark-regular-offset-y-0: 6px;
|
|
371
|
+
$elevation-dark-regular-blur-0: 6px;
|
|
372
|
+
$elevation-dark-regular-spread-0: -2px;
|
|
417
373
|
$elevation-dark-regular-color-0: rgba(0, 0, 0, 0.24);
|
|
418
|
-
$elevation-dark-
|
|
419
|
-
$elevation-dark-semibold: 0px 0px 2px 0px rgba(0, 0, 0, 0.24), 0px 8px 16px 0px rgba(0, 0, 0, 0.28);
|
|
374
|
+
$elevation-dark-semibold: 0px 8px 8px -2px rgba(0, 0, 0, 0.24);
|
|
420
375
|
$elevation-dark-semibold-offset-x-0: 0px;
|
|
421
|
-
$elevation-dark-semibold-offset-
|
|
422
|
-
$elevation-dark-semibold-
|
|
423
|
-
$elevation-dark-semibold-
|
|
424
|
-
$elevation-dark-semibold-blur-0: 2px;
|
|
425
|
-
$elevation-dark-semibold-blur-1: 16px;
|
|
426
|
-
$elevation-dark-semibold-spread-0: 0px;
|
|
427
|
-
$elevation-dark-semibold-spread-1: 0px;
|
|
376
|
+
$elevation-dark-semibold-offset-y-0: 8px;
|
|
377
|
+
$elevation-dark-semibold-blur-0: 8px;
|
|
378
|
+
$elevation-dark-semibold-spread-0: -2px;
|
|
428
379
|
$elevation-dark-semibold-color-0: rgba(0, 0, 0, 0.24);
|
|
429
|
-
$elevation-dark-
|
|
430
|
-
$elevation-dark-bold: 0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 14px 28px 0px rgba(0, 0, 0, 0.28);
|
|
380
|
+
$elevation-dark-bold: 0px 10px 10px -2px rgba(0, 0, 0, 0.24);
|
|
431
381
|
$elevation-dark-bold-offset-x-0: 0px;
|
|
432
|
-
$elevation-dark-bold-offset-
|
|
433
|
-
$elevation-dark-bold-
|
|
434
|
-
$elevation-dark-bold-
|
|
435
|
-
$elevation-dark-bold-blur-0: 8px;
|
|
436
|
-
$elevation-dark-bold-blur-1: 28px;
|
|
437
|
-
$elevation-dark-bold-spread-0: 0px;
|
|
438
|
-
$elevation-dark-bold-spread-1: 0px;
|
|
382
|
+
$elevation-dark-bold-offset-y-0: 10px;
|
|
383
|
+
$elevation-dark-bold-blur-0: 10px;
|
|
384
|
+
$elevation-dark-bold-spread-0: -2px;
|
|
439
385
|
$elevation-dark-bold-color-0: rgba(0, 0, 0, 0.24);
|
|
440
|
-
$elevation-dark-
|
|
441
|
-
$elevation-dark-extrabold: 0px 0px 8px 0px rgba(0, 0, 0, 0.24), 0px 32px 64px 0px rgba(0, 0, 0, 0.28);
|
|
386
|
+
$elevation-dark-extrabold: 0px 12px 12px -2px rgba(0, 0, 0, 0.24);
|
|
442
387
|
$elevation-dark-extrabold-offset-x-0: 0px;
|
|
443
|
-
$elevation-dark-extrabold-offset-
|
|
444
|
-
$elevation-dark-extrabold-
|
|
445
|
-
$elevation-dark-extrabold-
|
|
446
|
-
$elevation-dark-extrabold-blur-0: 8px;
|
|
447
|
-
$elevation-dark-extrabold-blur-1: 64px;
|
|
448
|
-
$elevation-dark-extrabold-spread-0: 0px;
|
|
449
|
-
$elevation-dark-extrabold-spread-1: 0px;
|
|
388
|
+
$elevation-dark-extrabold-offset-y-0: 12px;
|
|
389
|
+
$elevation-dark-extrabold-blur-0: 12px;
|
|
390
|
+
$elevation-dark-extrabold-spread-0: -2px;
|
|
450
391
|
$elevation-dark-extrabold-color-0: rgba(0, 0, 0, 0.24);
|
|
451
|
-
$elevation-dark-extrabold-color-1: rgba(0, 0, 0, 0.28);
|
|
452
392
|
$size-tiny: 2px;
|
|
453
393
|
$size-small: 4px;
|
|
454
394
|
$size-medium: 8px;
|