@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/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 +367 -279
- package/themes/joy-tokens.scss +52 -112
- package/themes/joy.scss +559 -620
- package/themes/memphis.scss +394 -306
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;
|