@withlayers/tokens 0.10.0 → 0.10.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/dist/index.css +39 -39
  2. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -108,9 +108,9 @@
108
108
  --l--color--light-alpha--80: rgba(255, 255, 255, 0.8);
109
109
  --l--color--light-alpha--90: rgba(255, 255, 255, 0.9);
110
110
  --l--color--light-alpha--100: rgba(255, 255, 255, 1);
111
+ --l--typography--font-family--primary: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
112
+ --l--typography--font-family--secondary: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
111
113
  --l--typography--font-family--monospace: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
112
- --l--typography--font-family--sans-serif: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
113
- --l--typography--font-family--serif: Iowan Old Style, Apple Garamond, Baskerville, Times New Roman, Droid Serif, Times, Source Serif Pro, serif, Apple Color Emoji, Segoe UI Emoji, Segoe UI Symbol;
114
114
  --l--typography--font-size--8: 0.5rem;
115
115
  --l--typography--font-size--10: 0.625rem;
116
116
  --l--typography--font-size--12: 0.75rem;
@@ -219,19 +219,11 @@
219
219
  --l--units--384: 24rem;
220
220
  --l--units--448: 28rem;
221
221
  --l--units--512: 32rem;
222
- --l--theme--measure--sm: 18.75rem;
223
- --l--theme--measure--md: 37.5rem;
224
- --l--theme--measure--lg: 48rem;
225
- --l--theme--measure--xl: 64rem;
226
- --l--theme--measure--xxl: 80rem;
227
- --l--theme--blockquote--typography--font-family: var(--l--typography--font-family--serif);
228
- --l--theme--blockquote--typography--font-size: clamp(var(--l--typography--font-size--24), 1.1765vw + 1.2353rem, var(--l--typography--font-size--32));
229
- --l--theme--blockquote--typography--font-style: var(--l--typography--font-style--italic);
230
- --l--theme--blockquote--typography--font-variant-caps: var(--l--typography--font-variant-caps--normal);
231
- --l--theme--blockquote--typography--font-weight: var(--l--typography--font-weight--medium);
232
- --l--theme--blockquote--typography--letter-spacing: var(--l--typography--letter-spacing--normal);
233
- --l--theme--blockquote--typography--line-height: var(--l--typography--line-height--1250);
234
- --l--theme--blockquote--typography--text-transform: var(--l--typography--text-transform--none);
222
+ --l--theme--size--measure--sm: 18.75rem;
223
+ --l--theme--size--measure--md: 37.5rem;
224
+ --l--theme--size--measure--lg: 48rem;
225
+ --l--theme--size--measure--xl: 64rem;
226
+ --l--theme--size--measure--xxl: 80rem;
235
227
  --l--theme--button--border--style: var(--l--border--style--solid);
236
228
  --l--theme--button--color--background--primary--on-default--rest: var(--l--color--neutral--100);
237
229
  --l--theme--button--color--background--primary--on-default--active: var(--l--color--neutral--80);
@@ -321,7 +313,7 @@
321
313
  --l--theme--checkbox-control--color--content--on-default--invalid-checked: var(--l--color--neutral--0);
322
314
  --l--theme--checkbox-control--size: clamp(1.3125rem, 0.27778vw + 1.2500rem, var(--l--units--24));
323
315
  --l--theme--dialog--border--style: var(--l--border--style--none);
324
- --l--theme--dialog--measure: var(--l--theme--measure--md);
316
+ --l--theme--dialog--measure: var(--l--theme--size--measure--md);
325
317
  --l--theme--focus-ring--color--outline--on-default: var(--l--color--neutral--100);
326
318
  --l--theme--focus-ring--outline--offset: var(--l--units--2);
327
319
  --l--theme--focus-ring--outline--style: var(--l--border--style--solid);
@@ -350,10 +342,10 @@
350
342
  --l--theme--selection--color--background--on-default: var(--l--color--neutral--90);
351
343
  --l--theme--selection--color--content--on-default: var(--l--color--neutral--10);
352
344
  --l--theme--text-control--border--style: var(--l--border--style--solid);
353
- --l--theme--text-control--typography--font-family--xs: var(--l--typography--font-family--sans-serif);
354
- --l--theme--text-control--typography--font-family--sm: var(--l--typography--font-family--sans-serif);
355
- --l--theme--text-control--typography--font-family--md: var(--l--typography--font-family--sans-serif);
356
- --l--theme--text-control--typography--font-family--lg: var(--l--typography--font-family--sans-serif);
345
+ --l--theme--text-control--typography--font-family--xs: var(--l--typography--font-family--secondary);
346
+ --l--theme--text-control--typography--font-family--sm: var(--l--typography--font-family--secondary);
347
+ --l--theme--text-control--typography--font-family--md: var(--l--typography--font-family--secondary);
348
+ --l--theme--text-control--typography--font-family--lg: var(--l--typography--font-family--secondary);
357
349
  --l--theme--text-control--typography--font-size--xs: clamp(var(--l--typography--font-size--12), 0.18519vw + 0.70833rem, var(--l--typography--font-size--14));
358
350
  --l--theme--text-control--typography--font-size--sm: clamp(var(--l--typography--font-size--12), 0.18519vw + 0.70833rem, var(--l--typography--font-size--14));
359
351
  --l--theme--text-control--typography--font-size--md: clamp(var(--l--typography--font-size--14), 0.18519vw + 0.83333rem, var(--l--typography--font-size--16));
@@ -437,9 +429,17 @@
437
429
  --l--typography--text-decoration-thickness--sm: var(--l--units--1);
438
430
  --l--typography--text-decoration-thickness--md: var(--l--units--2);
439
431
  --l--typography--text-decoration-thickness--lg: var(--l--units--4);
440
- --l--theme--typography--body--font-family--sm: var(--l--typography--font-family--serif);
441
- --l--theme--typography--body--font-family--md: var(--l--typography--font-family--serif);
442
- --l--theme--typography--body--font-family--lg: var(--l--typography--font-family--serif);
432
+ --l--theme--typography--blockquote--font-family: var(--l--typography--font-family--primary);
433
+ --l--theme--typography--blockquote--font-size: clamp(var(--l--typography--font-size--24), 1.1765vw + 1.2353rem, var(--l--typography--font-size--32));
434
+ --l--theme--typography--blockquote--font-style: var(--l--typography--font-style--italic);
435
+ --l--theme--typography--blockquote--font-variant-caps: var(--l--typography--font-variant-caps--normal);
436
+ --l--theme--typography--blockquote--font-weight: var(--l--typography--font-weight--medium);
437
+ --l--theme--typography--blockquote--letter-spacing: var(--l--typography--letter-spacing--normal);
438
+ --l--theme--typography--blockquote--line-height: var(--l--typography--line-height--1250);
439
+ --l--theme--typography--blockquote--text-transform: var(--l--typography--text-transform--none);
440
+ --l--theme--typography--body--font-family--sm: var(--l--typography--font-family--primary);
441
+ --l--theme--typography--body--font-family--md: var(--l--typography--font-family--primary);
442
+ --l--theme--typography--body--font-family--lg: var(--l--typography--font-family--primary);
443
443
  --l--theme--typography--body--font-size--sm: clamp(var(--l--typography--font-size--14), 0.18519vw + 0.83333rem, var(--l--typography--font-size--16));
444
444
  --l--theme--typography--body--font-size--md: clamp(var(--l--typography--font-size--16), 0.18519vw + 0.95833rem, var(--l--typography--font-size--18));
445
445
  --l--theme--typography--body--font-size--lg: clamp(var(--l--typography--font-size--18), 0.18519vw + 1.0833rem, var(--l--typography--font-size--20));
@@ -461,10 +461,10 @@
461
461
  --l--theme--typography--body--text-transform--sm: var(--l--typography--text-transform--none);
462
462
  --l--theme--typography--body--text-transform--md: var(--l--typography--text-transform--none);
463
463
  --l--theme--typography--body--text-transform--lg: var(--l--typography--text-transform--none);
464
- --l--theme--typography--button--font-family--xs: var(--l--typography--font-family--sans-serif);
465
- --l--theme--typography--button--font-family--sm: var(--l--typography--font-family--sans-serif);
466
- --l--theme--typography--button--font-family--md: var(--l--typography--font-family--sans-serif);
467
- --l--theme--typography--button--font-family--lg: var(--l--typography--font-family--sans-serif);
464
+ --l--theme--typography--button--font-family--xs: var(--l--typography--font-family--secondary);
465
+ --l--theme--typography--button--font-family--sm: var(--l--typography--font-family--secondary);
466
+ --l--theme--typography--button--font-family--md: var(--l--typography--font-family--secondary);
467
+ --l--theme--typography--button--font-family--lg: var(--l--typography--font-family--secondary);
468
468
  --l--theme--typography--button--font-size--xs: clamp(var(--l--typography--font-size--12), 0.18519vw + 0.70833rem, var(--l--typography--font-size--14));
469
469
  --l--theme--typography--button--font-size--sm: clamp(var(--l--typography--font-size--12), 0.18519vw + 0.70833rem, var(--l--typography--font-size--14));
470
470
  --l--theme--typography--button--font-size--md: clamp(var(--l--typography--font-size--14), 0.18519vw + 0.83333rem, var(--l--typography--font-size--16));
@@ -493,8 +493,8 @@
493
493
  --l--theme--typography--button--text-transform--sm: var(--l--typography--text-transform--none);
494
494
  --l--theme--typography--button--text-transform--md: var(--l--typography--text-transform--none);
495
495
  --l--theme--typography--button--text-transform--lg: var(--l--typography--text-transform--none);
496
- --l--theme--typography--caption--font-family--primary: var(--l--typography--font-family--sans-serif);
497
- --l--theme--typography--caption--font-family--secondary: var(--l--typography--font-family--serif);
496
+ --l--theme--typography--caption--font-family--primary: var(--l--typography--font-family--secondary);
497
+ --l--theme--typography--caption--font-family--secondary: var(--l--typography--font-family--primary);
498
498
  --l--theme--typography--caption--font-size--primary: clamp(var(--l--typography--font-size--12), 0.18519vw + 0.70833rem, var(--l--typography--font-size--14));
499
499
  --l--theme--typography--caption--font-size--secondary: clamp(var(--l--typography--font-size--12), 0.18519vw + 0.70833rem, var(--l--typography--font-size--14));
500
500
  --l--theme--typography--caption--font-style--primary: var(--l--typography--font-style--normal);
@@ -517,12 +517,12 @@
517
517
  --l--theme--typography--code--letter-spacing: var(--l--typography--letter-spacing--normal);
518
518
  --l--theme--typography--code--line-height: var(--l--typography--line-height--1500);
519
519
  --l--theme--typography--code--text-transform: var(--l--typography--text-transform--none);
520
- --l--theme--typography--heading--font-family--l1: var(--l--typography--font-family--sans-serif);
521
- --l--theme--typography--heading--font-family--l2: var(--l--typography--font-family--sans-serif);
522
- --l--theme--typography--heading--font-family--l3: var(--l--typography--font-family--sans-serif);
523
- --l--theme--typography--heading--font-family--l4: var(--l--typography--font-family--sans-serif);
524
- --l--theme--typography--heading--font-family--l5: var(--l--typography--font-family--sans-serif);
525
- --l--theme--typography--heading--font-family--l6: var(--l--typography--font-family--sans-serif);
520
+ --l--theme--typography--heading--font-family--l1: var(--l--typography--font-family--secondary);
521
+ --l--theme--typography--heading--font-family--l2: var(--l--typography--font-family--secondary);
522
+ --l--theme--typography--heading--font-family--l3: var(--l--typography--font-family--secondary);
523
+ --l--theme--typography--heading--font-family--l4: var(--l--typography--font-family--secondary);
524
+ --l--theme--typography--heading--font-family--l5: var(--l--typography--font-family--secondary);
525
+ --l--theme--typography--heading--font-family--l6: var(--l--typography--font-family--secondary);
526
526
  --l--theme--typography--heading--font-size--l1: clamp(var(--l--typography--font-size--32), 0.74074vw + 1.8333rem, var(--l--typography--font-size--40));
527
527
  --l--theme--typography--heading--font-size--l2: clamp(var(--l--typography--font-size--24), 0.74074vw + 1.3333rem, var(--l--typography--font-size--32));
528
528
  --l--theme--typography--heading--font-size--l3: clamp(var(--l--typography--font-size--20), 0.37037vw + 1.1667rem, var(--l--typography--font-size--24));
@@ -563,7 +563,7 @@
563
563
  --l--theme--typography--heading--text-transform--l4: var(--l--typography--text-transform--none);
564
564
  --l--theme--typography--heading--text-transform--l5: var(--l--typography--text-transform--none);
565
565
  --l--theme--typography--heading--text-transform--l6: var(--l--typography--text-transform--none);
566
- --l--theme--typography--label--font-family: var(--l--typography--font-family--sans-serif);
566
+ --l--theme--typography--label--font-family: var(--l--typography--font-family--secondary);
567
567
  --l--theme--typography--label--font-size: clamp(var(--l--typography--font-size--14), 0.18519vw + 0.83333rem, var(--l--typography--font-size--16));
568
568
  --l--theme--typography--label--font-style: var(--l--typography--font-style--normal);
569
569
  --l--theme--typography--label--font-variant-caps: var(--l--typography--font-variant-caps--normal);
@@ -579,7 +579,7 @@
579
579
  --l--theme--typography--link--text-decoration-line--secondary--hover: var(--l--typography--text-decoration-line--underline);
580
580
  --l--theme--typography--link--text-decoration-line--secondary--focus: var(--l--typography--text-decoration-line--none);
581
581
  --l--theme--typography--link--text-decoration-line--secondary--active: var(--l--typography--text-decoration-line--underline);
582
- --l--theme--typography--overline--font-family: var(--l--typography--font-family--sans-serif);
582
+ --l--theme--typography--overline--font-family: var(--l--typography--font-family--secondary);
583
583
  --l--theme--typography--overline--font-size: clamp(var(--l--typography--font-size--12), 0.18519vw + 0.70833rem, var(--l--typography--font-size--14));
584
584
  --l--theme--typography--overline--font-style: var(--l--typography--font-style--normal);
585
585
  --l--theme--typography--overline--font-variant-caps: var(--l--typography--font-variant-caps--all-small-caps);
@@ -587,7 +587,7 @@
587
587
  --l--theme--typography--overline--letter-spacing: var(--l--typography--letter-spacing--4);
588
588
  --l--theme--typography--overline--line-height: var(--l--typography--line-height--1000);
589
589
  --l--theme--typography--overline--text-transform: var(--l--typography--text-transform--none);
590
- --l--theme--typography--subhead--font-family: var(--l--typography--font-family--serif);
590
+ --l--theme--typography--subhead--font-family: var(--l--typography--font-family--primary);
591
591
  --l--theme--typography--subhead--font-size: clamp(var(--l--typography--font-size--20), 0.37037vw + 1.1667rem, var(--l--typography--font-size--24));
592
592
  --l--theme--typography--subhead--font-style: var(--l--typography--font-style--italic);
593
593
  --l--theme--typography--subhead--font-variant-caps: var(--l--typography--font-variant-caps--normal);
@@ -648,7 +648,6 @@
648
648
  --l--theme--dialog--color--border: var(--l--theme--color--border--primary--on-default);
649
649
  --l--theme--dialog--color--content: var(--l--theme--color--content--primary--on-default);
650
650
  --l--theme--dialog--color--overlay: var(--l--theme--color--overlay--on-default);
651
- --l--theme--media--border--radius: var(--l--theme--border--radius--md);
652
651
  --l--theme--radio-button-control--border--width: var(--l--theme--border--width--sm);
653
652
  --l--theme--radio-button-control--border--radius: var(--l--theme--border--radius--full);
654
653
  --l--theme--radio-button-control--color--background--on-default--rest: var(--l--theme--color--background--default);
@@ -683,6 +682,7 @@
683
682
  --l--theme--text-control--color--content--on-default--focus: var(--l--theme--color--content--primary--on-default);
684
683
  --l--theme--text-control--color--content--on-default--hover: var(--l--theme--color--content--primary--on-default);
685
684
  --l--theme--text-control--color--placeholder--on-default--rest: var(--l--theme--color--content--secondary--on-default);
685
+ --l--theme--border--media--radius: var(--l--theme--border--radius--md);
686
686
  --l--theme--space--gutter: var(--l--theme--space--70);
687
687
  --l--theme--dialog--space--inner--inline: var(--l--theme--space--gutter);
688
688
  --l--theme--dialog--space--inner--block: var(--l--theme--space--gutter);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@withlayers/tokens",
3
- "version": "0.10.0",
3
+ "version": "0.10.1",
4
4
  "description": "Design tokens layer",
5
5
  "license": "MIT",
6
6
  "author": "Dmitry Mayorov",