@withlayers/tokens 0.8.0 → 0.9.0

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 +237 -86
  2. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -46,57 +46,68 @@
46
46
  --l--color--neutral--80: #334e68;
47
47
  --l--color--neutral--90: #243b53;
48
48
  --l--color--neutral--100: #102a43;
49
- --l--color--destructive--10: #ffe3e3;
50
- --l--color--destructive--20: #ffbdbd;
51
- --l--color--destructive--30: #ff9b9b;
52
- --l--color--destructive--40: #f86a6a;
53
- --l--color--destructive--50: #ef4e4e;
54
- --l--color--destructive--60: #e12d39;
55
- --l--color--destructive--70: #cf1124;
56
- --l--color--destructive--80: #ab091e;
57
- --l--color--destructive--90: #8a041a;
58
- --l--color--destructive--100: #610316;
59
- --l--color--informative--10: #ebf8ff;
60
- --l--color--informative--20: #d1eefc;
61
- --l--color--informative--30: #a7d8f0;
62
- --l--color--informative--40: #7cc1e4;
63
- --l--color--informative--50: #55aad4;
64
- --l--color--informative--60: #3994c1;
65
- --l--color--informative--70: #2d83ae;
66
- --l--color--informative--80: #1d6f98;
67
- --l--color--informative--90: #166086;
68
- --l--color--informative--100: #0b4f71;
69
- --l--color--positive--10: #effcf6;
70
- --l--color--positive--20: #c6f7e2;
71
- --l--color--positive--30: #8eedc7;
72
- --l--color--positive--40: #65d6ad;
73
- --l--color--positive--50: #3ebd93;
74
- --l--color--positive--60: #27ab83;
75
- --l--color--positive--70: #199473;
76
- --l--color--positive--80: #147d64;
77
- --l--color--positive--90: #0c6b58;
78
- --l--color--positive--100: #014d40;
79
- --l--color--warning--10: #fffbeb;
80
- --l--color--warning--20: #fff3c4;
81
- --l--color--warning--30: #fce588;
82
- --l--color--warning--40: #fadb5f;
83
- --l--color--warning--50: #f7c948;
84
- --l--color--warning--60: #f0b429;
85
- --l--color--warning--70: #de911d;
86
- --l--color--warning--80: #cb6e17;
87
- --l--color--warning--90: #b44d12;
88
- --l--color--warning--100: #8d2b0b;
89
- --l--color--transparent--0: rgba(0, 0, 0, 0);
90
- --l--color--transparent--10: rgba(0, 0, 0, 0.1);
91
- --l--color--transparent--20: rgba(0, 0, 0, 0.2);
92
- --l--color--transparent--30: rgba(0, 0, 0, 0.3);
93
- --l--color--transparent--40: rgba(0, 0, 0, 0.4);
94
- --l--color--transparent--50: rgba(0, 0, 0, 0.5);
95
- --l--color--transparent--60: rgba(0, 0, 0, 0.6);
96
- --l--color--transparent--70: rgba(0, 0, 0, 0.7);
97
- --l--color--transparent--80: rgba(0, 0, 0, 0.8);
98
- --l--color--transparent--90: rgba(0, 0, 0, 0.9);
99
- --l--color--transparent--100: rgba(0, 0, 0, 1);
49
+ --l--color--red--10: #ffe3e3;
50
+ --l--color--red--20: #ffbdbd;
51
+ --l--color--red--30: #ff9b9b;
52
+ --l--color--red--40: #f86a6a;
53
+ --l--color--red--50: #ef4e4e;
54
+ --l--color--red--60: #e12d39;
55
+ --l--color--red--70: #cf1124;
56
+ --l--color--red--80: #ab091e;
57
+ --l--color--red--90: #8a041a;
58
+ --l--color--red--100: #610316;
59
+ --l--color--blue--10: #ebf8ff;
60
+ --l--color--blue--20: #d1eefc;
61
+ --l--color--blue--30: #a7d8f0;
62
+ --l--color--blue--40: #7cc1e4;
63
+ --l--color--blue--50: #55aad4;
64
+ --l--color--blue--60: #3994c1;
65
+ --l--color--blue--70: #2d83ae;
66
+ --l--color--blue--80: #1d6f98;
67
+ --l--color--blue--90: #166086;
68
+ --l--color--blue--100: #0b4f71;
69
+ --l--color--green--10: #effcf6;
70
+ --l--color--green--20: #c6f7e2;
71
+ --l--color--green--30: #8eedc7;
72
+ --l--color--green--40: #65d6ad;
73
+ --l--color--green--50: #3ebd93;
74
+ --l--color--green--60: #27ab83;
75
+ --l--color--green--70: #199473;
76
+ --l--color--green--80: #147d64;
77
+ --l--color--green--90: #0c6b58;
78
+ --l--color--green--100: #014d40;
79
+ --l--color--yellow--10: #fffbeb;
80
+ --l--color--yellow--20: #fff3c4;
81
+ --l--color--yellow--30: #fce588;
82
+ --l--color--yellow--40: #fadb5f;
83
+ --l--color--yellow--50: #f7c948;
84
+ --l--color--yellow--60: #f0b429;
85
+ --l--color--yellow--70: #de911d;
86
+ --l--color--yellow--80: #cb6e17;
87
+ --l--color--yellow--90: #b44d12;
88
+ --l--color--yellow--100: #8d2b0b;
89
+ --l--color--dark-alpha--0: rgba(0, 0, 0, 0);
90
+ --l--color--dark-alpha--10: rgba(0, 0, 0, 0.1);
91
+ --l--color--dark-alpha--20: rgba(0, 0, 0, 0.2);
92
+ --l--color--dark-alpha--30: rgba(0, 0, 0, 0.3);
93
+ --l--color--dark-alpha--40: rgba(0, 0, 0, 0.4);
94
+ --l--color--dark-alpha--50: rgba(0, 0, 0, 0.5);
95
+ --l--color--dark-alpha--60: rgba(0, 0, 0, 0.6);
96
+ --l--color--dark-alpha--70: rgba(0, 0, 0, 0.7);
97
+ --l--color--dark-alpha--80: rgba(0, 0, 0, 0.8);
98
+ --l--color--dark-alpha--90: rgba(0, 0, 0, 0.9);
99
+ --l--color--dark-alpha--100: rgba(0, 0, 0, 1);
100
+ --l--color--light-alpha--0: rgba(255, 255, 255, 0);
101
+ --l--color--light-alpha--10: rgba(255, 255, 255, 0.1);
102
+ --l--color--light-alpha--20: rgba(255, 255, 255, 0.2);
103
+ --l--color--light-alpha--30: rgba(255, 255, 255, 0.3);
104
+ --l--color--light-alpha--40: rgba(255, 255, 255, 0.4);
105
+ --l--color--light-alpha--50: rgba(255, 255, 255, 0.5);
106
+ --l--color--light-alpha--60: rgba(255, 255, 255, 0.6);
107
+ --l--color--light-alpha--70: rgba(255, 255, 255, 0.7);
108
+ --l--color--light-alpha--80: rgba(255, 255, 255, 0.8);
109
+ --l--color--light-alpha--90: rgba(255, 255, 255, 0.9);
110
+ --l--color--light-alpha--100: rgba(255, 255, 255, 1);
100
111
  --l--typography--font-family--monospace: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
101
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;
102
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;
@@ -255,16 +266,16 @@
255
266
  --l--theme--button--color--background--secondary--on-default--disabled: var(--l--color--neutral--10);
256
267
  --l--theme--button--color--background--secondary--on-default--focus: var(--l--color--neutral--20);
257
268
  --l--theme--button--color--background--secondary--on-default--hover: var(--l--color--neutral--20);
258
- --l--theme--button--color--background--tertiary--on-default--rest: var(--l--color--transparent--0);
259
- --l--theme--button--color--background--tertiary--on-default--active: var(--l--color--transparent--10);
260
- --l--theme--button--color--background--tertiary--on-default--disabled: var(--l--color--transparent--0);
269
+ --l--theme--button--color--background--tertiary--on-default--rest: var(--l--color--dark-alpha--0);
270
+ --l--theme--button--color--background--tertiary--on-default--active: var(--l--color--dark-alpha--10);
271
+ --l--theme--button--color--background--tertiary--on-default--disabled: var(--l--color--dark-alpha--0);
261
272
  --l--theme--button--color--background--tertiary--on-default--focus: var(--l--color--neutral--0);
262
- --l--theme--button--color--background--tertiary--on-default--hover: var(--l--color--transparent--10);
263
- --l--theme--button--color--background--destructive--on-default--rest: var(--l--color--destructive--70);
264
- --l--theme--button--color--background--destructive--on-default--active: var(--l--color--destructive--60);
265
- --l--theme--button--color--background--destructive--on-default--disabled: var(--l--color--destructive--40);
266
- --l--theme--button--color--background--destructive--on-default--focus: var(--l--color--destructive--70);
267
- --l--theme--button--color--background--destructive--on-default--hover: var(--l--color--destructive--60);
273
+ --l--theme--button--color--background--tertiary--on-default--hover: var(--l--color--dark-alpha--10);
274
+ --l--theme--button--color--background--destructive--on-default--rest: var(--l--color--red--70);
275
+ --l--theme--button--color--background--destructive--on-default--active: var(--l--color--red--60);
276
+ --l--theme--button--color--background--destructive--on-default--disabled: var(--l--color--red--40);
277
+ --l--theme--button--color--background--destructive--on-default--focus: var(--l--color--red--70);
278
+ --l--theme--button--color--background--destructive--on-default--hover: var(--l--color--red--60);
268
279
  --l--theme--button--color--border--primary--on-default--rest: var(--l--color--neutral--100);
269
280
  --l--theme--button--color--border--primary--on-default--active: var(--l--color--neutral--80);
270
281
  --l--theme--button--color--border--primary--on-default--disabled: var(--l--color--neutral--80);
@@ -280,11 +291,11 @@
280
291
  --l--theme--button--color--border--tertiary--on-default--disabled: var(--l--color--neutral--40);
281
292
  --l--theme--button--color--border--tertiary--on-default--focus: var(--l--color--neutral--90);
282
293
  --l--theme--button--color--border--tertiary--on-default--hover: var(--l--color--neutral--90);
283
- --l--theme--button--color--border--destructive--on-default--rest: var(--l--color--destructive--70);
284
- --l--theme--button--color--border--destructive--on-default--active: var(--l--color--destructive--60);
285
- --l--theme--button--color--border--destructive--on-default--disabled: var(--l--color--destructive--40);
286
- --l--theme--button--color--border--destructive--on-default--focus: var(--l--color--destructive--70);
287
- --l--theme--button--color--border--destructive--on-default--hover: var(--l--color--destructive--60);
294
+ --l--theme--button--color--border--destructive--on-default--rest: var(--l--color--red--70);
295
+ --l--theme--button--color--border--destructive--on-default--active: var(--l--color--red--60);
296
+ --l--theme--button--color--border--destructive--on-default--disabled: var(--l--color--red--40);
297
+ --l--theme--button--color--border--destructive--on-default--focus: var(--l--color--red--70);
298
+ --l--theme--button--color--border--destructive--on-default--hover: var(--l--color--red--60);
288
299
  --l--theme--button--color--content--primary--on-default--rest: var(--l--color--neutral--10);
289
300
  --l--theme--button--color--content--primary--on-default--active: var(--l--color--neutral--10);
290
301
  --l--theme--button--color--content--primary--on-default--disabled: var(--l--color--neutral--40);
@@ -300,14 +311,33 @@
300
311
  --l--theme--button--color--content--tertiary--on-default--disabled: var(--l--color--neutral--40);
301
312
  --l--theme--button--color--content--tertiary--on-default--focus: var(--l--color--neutral--90);
302
313
  --l--theme--button--color--content--tertiary--on-default--hover: var(--l--color--neutral--90);
303
- --l--theme--button--color--content--destructive--on-default--rest: var(--l--color--destructive--10);
304
- --l--theme--button--color--content--destructive--on-default--active: var(--l--color--destructive--10);
305
- --l--theme--button--color--content--destructive--on-default--disabled: var(--l--color--destructive--20);
306
- --l--theme--button--color--content--destructive--on-default--focus: var(--l--color--destructive--10);
307
- --l--theme--button--color--content--destructive--on-default--hover: var(--l--color--destructive--10);
314
+ --l--theme--button--color--content--destructive--on-default--rest: var(--l--color--red--10);
315
+ --l--theme--button--color--content--destructive--on-default--active: var(--l--color--red--10);
316
+ --l--theme--button--color--content--destructive--on-default--disabled: var(--l--color--red--20);
317
+ --l--theme--button--color--content--destructive--on-default--focus: var(--l--color--red--10);
318
+ --l--theme--button--color--content--destructive--on-default--hover: var(--l--color--red--10);
319
+ --l--theme--checkbox-control--border--style: var(--l--border--style--solid);
320
+ --l--theme--checkbox-control--color--background--on-default--checked: var(--l--color--neutral--90);
321
+ --l--theme--checkbox-control--color--background--on-default--disabled: var(--l--color--neutral--20);
322
+ --l--theme--checkbox-control--color--background--on-default--disabled-checked: var(--l--color--neutral--20);
323
+ --l--theme--checkbox-control--color--background--on-default--focus-checked: var(--l--color--neutral--90);
324
+ --l--theme--checkbox-control--color--background--on-default--hover: var(--l--color--neutral--10);
325
+ --l--theme--checkbox-control--color--background--on-default--hover-checked: var(--l--color--neutral--80);
326
+ --l--theme--checkbox-control--color--border--on-default--checked: var(--l--color--neutral--90);
327
+ --l--theme--checkbox-control--color--border--on-default--disabled: var(--l--color--neutral--30);
328
+ --l--theme--checkbox-control--color--border--on-default--disabled-checked: var(--l--color--neutral--30);
329
+ --l--theme--checkbox-control--color--border--on-default--focus-checked: var(--l--color--neutral--90);
330
+ --l--theme--checkbox-control--color--border--on-default--hover-checked: var(--l--color--neutral--90);
331
+ --l--theme--checkbox-control--color--content--on-default--rest: var(--l--color--light-alpha--0);
332
+ --l--theme--checkbox-control--color--content--on-default--checked: var(--l--color--neutral--10);
333
+ --l--theme--checkbox-control--color--content--on-default--disabled: var(--l--color--light-alpha--0);
334
+ --l--theme--checkbox-control--color--content--on-default--disabled-checked: var(--l--color--neutral--40);
335
+ --l--theme--checkbox-control--color--content--on-default--focus: var(--l--color--light-alpha--0);
336
+ --l--theme--checkbox-control--color--content--on-default--focus-checked: var(--l--color--neutral--10);
337
+ --l--theme--checkbox-control--color--content--on-default--hover: var(--l--color--light-alpha--0);
338
+ --l--theme--checkbox-control--color--content--on-default--hover-checked: var(--l--color--neutral--10);
339
+ --l--theme--checkbox-control--size: clamp(1.3125rem, 0.27778vw + 1.2500rem, var(--l--units--24));
308
340
  --l--theme--dialog--border--style: var(--l--border--style--none);
309
- --l--theme--dialog--border--width: var(--l--border--width--0);
310
- --l--theme--dialog--color--border: var(--l--color--transparent--0);
311
341
  --l--theme--dialog--measure: var(--l--theme--measure--md);
312
342
  --l--theme--focus-ring--color--outline--on-default: var(--l--color--neutral--100);
313
343
  --l--theme--focus-ring--outline--offset: var(--l--units--2);
@@ -323,8 +353,65 @@
323
353
  --l--theme--link--color--content--secondary--on-default--focus: var(--l--color--neutral--90);
324
354
  --l--theme--link--color--content--secondary--on-default--active: var(--l--color--neutral--90);
325
355
  --l--theme--link--color--content--secondary--on-default--visited: var(--l--color--neutral--90);
356
+ --l--theme--radio-button-control--border--style: var(--l--border--style--solid);
357
+ --l--theme--radio-button-control--color--background--on-default--checked: var(--l--color--neutral--90);
358
+ --l--theme--radio-button-control--color--background--on-default--disabled: var(--l--color--neutral--20);
359
+ --l--theme--radio-button-control--color--background--on-default--disabled-checked: var(--l--color--neutral--20);
360
+ --l--theme--radio-button-control--color--background--on-default--focus-checked: var(--l--color--neutral--90);
361
+ --l--theme--radio-button-control--color--background--on-default--hover: var(--l--color--neutral--10);
362
+ --l--theme--radio-button-control--color--background--on-default--hover-checked: var(--l--color--neutral--80);
363
+ --l--theme--radio-button-control--color--border--on-default--checked: var(--l--color--neutral--90);
364
+ --l--theme--radio-button-control--color--border--on-default--disabled: var(--l--color--neutral--30);
365
+ --l--theme--radio-button-control--color--border--on-default--disabled-checked: var(--l--color--neutral--30);
366
+ --l--theme--radio-button-control--color--border--on-default--focus-checked: var(--l--color--neutral--90);
367
+ --l--theme--radio-button-control--color--border--on-default--hover-checked: var(--l--color--neutral--90);
368
+ --l--theme--radio-button-control--color--content--on-default--rest: var(--l--color--light-alpha--0);
369
+ --l--theme--radio-button-control--color--content--on-default--checked: var(--l--color--neutral--10);
370
+ --l--theme--radio-button-control--color--content--on-default--disabled: var(--l--color--light-alpha--0);
371
+ --l--theme--radio-button-control--color--content--on-default--disabled-checked: var(--l--color--neutral--40);
372
+ --l--theme--radio-button-control--color--content--on-default--focus: var(--l--color--light-alpha--0);
373
+ --l--theme--radio-button-control--color--content--on-default--focus-checked: var(--l--color--neutral--10);
374
+ --l--theme--radio-button-control--color--content--on-default--hover: var(--l--color--light-alpha--0);
375
+ --l--theme--radio-button-control--color--content--on-default--hover-checked: var(--l--color--neutral--10);
376
+ --l--theme--radio-button-control--size: clamp(1.3125rem, 0.27778vw + 1.2500rem, var(--l--units--24));
326
377
  --l--theme--selection--color--background--on-default: var(--l--color--neutral--90);
327
378
  --l--theme--selection--color--content--on-default: var(--l--color--neutral--10);
379
+ --l--theme--text-control--border--style: var(--l--border--style--solid);
380
+ --l--theme--text-control--typography--font-family--xs: var(--l--typography--font-family--sans-serif);
381
+ --l--theme--text-control--typography--font-family--sm: var(--l--typography--font-family--sans-serif);
382
+ --l--theme--text-control--typography--font-family--md: var(--l--typography--font-family--sans-serif);
383
+ --l--theme--text-control--typography--font-family--lg: var(--l--typography--font-family--sans-serif);
384
+ --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));
385
+ --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));
386
+ --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));
387
+ --l--theme--text-control--typography--font-size--lg: clamp(var(--l--typography--font-size--16), 0.18519vw + 0.95833rem, var(--l--typography--font-size--18));
388
+ --l--theme--text-control--typography--font-style--xs: var(--l--typography--font-style--normal);
389
+ --l--theme--text-control--typography--font-style--sm: var(--l--typography--font-style--normal);
390
+ --l--theme--text-control--typography--font-style--md: var(--l--typography--font-style--normal);
391
+ --l--theme--text-control--typography--font-style--lg: var(--l--typography--font-style--normal);
392
+ --l--theme--text-control--typography--font-variant-caps--xs: var(--l--typography--font-variant-caps--normal);
393
+ --l--theme--text-control--typography--font-variant-caps--sm: var(--l--typography--font-variant-caps--normal);
394
+ --l--theme--text-control--typography--font-variant-caps--md: var(--l--typography--font-variant-caps--normal);
395
+ --l--theme--text-control--typography--font-variant-caps--lg: var(--l--typography--font-variant-caps--normal);
396
+ --l--theme--text-control--typography--font-weight--xs: var(--l--typography--font-weight--medium);
397
+ --l--theme--text-control--typography--font-weight--sm: var(--l--typography--font-weight--medium);
398
+ --l--theme--text-control--typography--font-weight--md: var(--l--typography--font-weight--medium);
399
+ --l--theme--text-control--typography--font-weight--lg: var(--l--typography--font-weight--medium);
400
+ --l--theme--text-control--typography--letter-spacing--xs: var(--l--typography--letter-spacing--normal);
401
+ --l--theme--text-control--typography--letter-spacing--sm: var(--l--typography--letter-spacing--normal);
402
+ --l--theme--text-control--typography--letter-spacing--md: var(--l--typography--letter-spacing--normal);
403
+ --l--theme--text-control--typography--letter-spacing--lg: var(--l--typography--letter-spacing--normal);
404
+ --l--theme--text-control--typography--line-height--xs: var(--l--typography--line-height--1250);
405
+ --l--theme--text-control--typography--line-height--sm: var(--l--typography--line-height--1250);
406
+ --l--theme--text-control--typography--line-height--md: var(--l--typography--line-height--1375);
407
+ --l--theme--text-control--typography--line-height--lg: var(--l--typography--line-height--1500);
408
+ --l--theme--text-control--typography--text-transform--xs: var(--l--typography--text-transform--none);
409
+ --l--theme--text-control--typography--text-transform--sm: var(--l--typography--text-transform--none);
410
+ --l--theme--text-control--typography--text-transform--md: var(--l--typography--text-transform--none);
411
+ --l--theme--text-control--typography--text-transform--lg: var(--l--typography--text-transform--none);
412
+ --l--theme--text-control--color--background--on-default--disabled: var(--l--color--neutral--10);
413
+ --l--theme--text-control--color--content--on-default--disabled: var(--l--color--neutral--40);
414
+ --l--theme--text-control--color--placeholder--on-default--disabled: var(--l--color--neutral--40);
328
415
  --l--theme--border--radius--none: var(--l--border--radius--0);
329
416
  --l--theme--border--radius--sm: var(--l--border--radius--2);
330
417
  --l--theme--border--radius--md: var(--l--border--radius--4);
@@ -339,25 +426,26 @@
339
426
  --l--theme--border--width--xl: var(--l--border--width--8);
340
427
  --l--theme--border--width--xxl: var(--l--border--width--16);
341
428
  --l--theme--color--background--default: var(--l--color--neutral--0);
342
- --l--theme--color--border--primary--on-default: var(--l--color--neutral--30);
429
+ --l--theme--color--border--primary--on-default: var(--l--color--neutral--60);
343
430
  --l--theme--color--border--secondary--on-default: var(--l--color--neutral--10);
344
431
  --l--theme--color--content--primary--on-default: var(--l--color--neutral--90);
345
432
  --l--theme--color--content--secondary--on-default: var(--l--color--neutral--60);
346
- --l--theme--color--overlay--on-default: var(--l--color--transparent--50);
433
+ --l--theme--color--content--disabled--on-default: var(--l--color--neutral--40);
434
+ --l--theme--color--overlay--on-default: var(--l--color--dark-alpha--50);
347
435
  --l--theme--color--code--background--on-default: var(--l--color--neutral--10);
348
436
  --l--theme--color--code--content--on-default: var(--l--color--neutral--90);
349
- --l--theme--color--feedback--destructive--background--on-default: var(--l--color--destructive--20);
350
- --l--theme--color--feedback--destructive--border--on-default: var(--l--color--destructive--30);
351
- --l--theme--color--feedback--destructive--content--on-default: var(--l--color--destructive--100);
352
- --l--theme--color--feedback--informative--background--on-default: var(--l--color--informative--20);
353
- --l--theme--color--feedback--informative--border--on-default: var(--l--color--informative--30);
354
- --l--theme--color--feedback--informative--content--on-default: var(--l--color--informative--100);
355
- --l--theme--color--feedback--positive--background--on-default: var(--l--color--positive--20);
356
- --l--theme--color--feedback--positive--border--on-default: var(--l--color--positive--30);
357
- --l--theme--color--feedback--positive--content--on-default: var(--l--color--positive--100);
358
- --l--theme--color--feedback--warning--background--on-default: var(--l--color--warning--20);
359
- --l--theme--color--feedback--warning--border--on-default: var(--l--color--warning--30);
360
- --l--theme--color--feedback--warning--content--on-default: var(--l--color--warning--100);
437
+ --l--theme--color--feedback--destructive--background--on-default: var(--l--color--red--20);
438
+ --l--theme--color--feedback--destructive--border--on-default: var(--l--color--red--30);
439
+ --l--theme--color--feedback--destructive--content--on-default: var(--l--color--red--100);
440
+ --l--theme--color--feedback--informative--background--on-default: var(--l--color--blue--20);
441
+ --l--theme--color--feedback--informative--border--on-default: var(--l--color--blue--30);
442
+ --l--theme--color--feedback--informative--content--on-default: var(--l--color--blue--100);
443
+ --l--theme--color--feedback--positive--background--on-default: var(--l--color--green--20);
444
+ --l--theme--color--feedback--positive--border--on-default: var(--l--color--green--30);
445
+ --l--theme--color--feedback--positive--content--on-default: var(--l--color--green--100);
446
+ --l--theme--color--feedback--warning--background--on-default: var(--l--color--yellow--20);
447
+ --l--theme--color--feedback--warning--border--on-default: var(--l--color--yellow--30);
448
+ --l--theme--color--feedback--warning--content--on-default: var(--l--color--yellow--100);
361
449
  --l--theme--typography--body--font-family--sm: var(--l--typography--font-family--serif);
362
450
  --l--theme--typography--body--font-family--md: var(--l--typography--font-family--serif);
363
451
  --l--theme--typography--body--font-family--lg: var(--l--typography--font-family--serif);
@@ -452,6 +540,14 @@
452
540
  --l--theme--typography--heading--text-transform--l4: var(--l--typography--text-transform--none);
453
541
  --l--theme--typography--heading--text-transform--l5: var(--l--typography--text-transform--none);
454
542
  --l--theme--typography--heading--text-transform--l6: var(--l--typography--text-transform--none);
543
+ --l--theme--typography--label--font-family: var(--l--typography--font-family--sans-serif);
544
+ --l--theme--typography--label--font-size: clamp(var(--l--typography--font-size--14), 0.18519vw + 0.83333rem, var(--l--typography--font-size--16));
545
+ --l--theme--typography--label--font-style: var(--l--typography--font-style--normal);
546
+ --l--theme--typography--label--font-variant-caps: var(--l--typography--font-variant-caps--normal);
547
+ --l--theme--typography--label--font-weight: var(--l--typography--font-weight--medium);
548
+ --l--theme--typography--label--letter-spacing: var(--l--typography--letter-spacing--normal);
549
+ --l--theme--typography--label--line-height: var(--l--typography--line-height--1500);
550
+ --l--theme--typography--label--text-transform: var(--l--typography--text-transform--none);
455
551
  --l--theme--typography--overline--font-family: var(--l--typography--font-family--sans-serif);
456
552
  --l--theme--typography--overline--font-size: clamp(var(--l--typography--font-size--12), 0.18519vw + 0.70833rem, var(--l--typography--font-size--14));
457
553
  --l--theme--typography--overline--font-style: var(--l--typography--font-style--normal);
@@ -468,6 +564,18 @@
468
564
  --l--theme--typography--subhead--letter-spacing: var(--l--typography--letter-spacing--normal);
469
565
  --l--theme--typography--subhead--line-height: var(--l--typography--line-height--1500);
470
566
  --l--theme--typography--subhead--text-transform: var(--l--typography--text-transform--none);
567
+ --l--theme--size--10: clamp(var(--l--units--1), 0.092593vw + 0.041667rem, var(--l--units--2));
568
+ --l--theme--size--20: clamp(var(--l--units--2), 0.18519vw + 0.083333rem, var(--l--units--4));
569
+ --l--theme--size--30: clamp(var(--l--units--4), 0.37037vw + 0.16667rem, var(--l--units--8));
570
+ --l--theme--size--40: clamp(var(--l--units--8), 0.37037vw + 0.41667rem, var(--l--units--12));
571
+ --l--theme--size--50: clamp(var(--l--units--12), 0.37037vw + 0.66667rem, var(--l--units--16));
572
+ --l--theme--size--60: clamp(var(--l--units--16), 0.74074vw + 0.83333rem, var(--l--units--24));
573
+ --l--theme--size--70: clamp(var(--l--units--24), 0.74074vw + 1.3333rem, var(--l--units--32));
574
+ --l--theme--size--80: clamp(var(--l--units--32), 1.4815vw + 1.6667rem, var(--l--units--48));
575
+ --l--theme--size--90: clamp(var(--l--units--48), 1.4815vw + 2.6667rem, var(--l--units--64));
576
+ --l--theme--size--100: clamp(var(--l--units--64), 2.9630vw + 3.3333rem, var(--l--units--96));
577
+ --l--theme--size--110: clamp(var(--l--units--96), 2.9630vw + 5.3333rem, var(--l--units--128));
578
+ --l--theme--size--120: clamp(var(--l--units--128), 5.9259vw + 6.6667rem, var(--l--units--192));
471
579
  --l--theme--space--10: clamp(var(--l--units--1), 0.092593vw + 0.041667rem, var(--l--units--2));
472
580
  --l--theme--space--20: clamp(var(--l--units--2), 0.18519vw + 0.083333rem, var(--l--units--4));
473
581
  --l--theme--space--30: clamp(var(--l--units--4), 0.37037vw + 0.16667rem, var(--l--units--8));
@@ -496,11 +604,54 @@
496
604
  --l--theme--button--space--inner--inline--sm: var(--l--theme--space--50);
497
605
  --l--theme--button--space--inner--inline--md: var(--l--theme--space--60);
498
606
  --l--theme--button--space--inner--inline--lg: var(--l--theme--space--70);
607
+ --l--theme--checkbox-control--border--width: var(--l--theme--border--width--sm);
608
+ --l--theme--checkbox-control--border--radius: var(--l--theme--border--radius--md);
609
+ --l--theme--checkbox-control--color--background--on-default--rest: var(--l--theme--color--background--default);
610
+ --l--theme--checkbox-control--color--background--on-default--focus: var(--l--theme--color--background--default);
611
+ --l--theme--checkbox-control--color--border--on-default--rest: var(--l--theme--color--border--primary--on-default);
612
+ --l--theme--checkbox-control--color--border--on-default--focus: var(--l--theme--color--border--primary--on-default);
613
+ --l--theme--checkbox-control--color--border--on-default--hover: var(--l--theme--color--border--primary--on-default);
499
614
  --l--theme--dialog--border--radius: var(--l--theme--border--radius--md);
615
+ --l--theme--dialog--border--width: var(--l--theme--border--width--sm);
500
616
  --l--theme--dialog--color--background: var(--l--theme--color--background--default);
617
+ --l--theme--dialog--color--border: var(--l--theme--color--border--primary--on-default);
501
618
  --l--theme--dialog--color--content: var(--l--theme--color--content--primary--on-default);
502
619
  --l--theme--dialog--color--overlay: var(--l--theme--color--overlay--on-default);
503
620
  --l--theme--media--border--radius: var(--l--theme--border--radius--md);
621
+ --l--theme--radio-button-control--border--width: var(--l--theme--border--width--sm);
622
+ --l--theme--radio-button-control--border--radius: var(--l--theme--border--radius--full);
623
+ --l--theme--radio-button-control--color--background--on-default--rest: var(--l--theme--color--background--default);
624
+ --l--theme--radio-button-control--color--background--on-default--focus: var(--l--theme--color--background--default);
625
+ --l--theme--radio-button-control--color--border--on-default--rest: var(--l--theme--color--border--primary--on-default);
626
+ --l--theme--radio-button-control--color--border--on-default--focus: var(--l--theme--color--border--primary--on-default);
627
+ --l--theme--radio-button-control--color--border--on-default--hover: var(--l--theme--color--border--primary--on-default);
628
+ --l--theme--text-control--border--width--xs: var(--l--theme--border--width--sm);
629
+ --l--theme--text-control--border--width--sm: var(--l--theme--border--width--sm);
630
+ --l--theme--text-control--border--width--md: var(--l--theme--border--width--sm);
631
+ --l--theme--text-control--border--width--lg: var(--l--theme--border--width--sm);
632
+ --l--theme--text-control--border--radius--xs: var(--l--theme--border--radius--md);
633
+ --l--theme--text-control--border--radius--sm: var(--l--theme--border--radius--md);
634
+ --l--theme--text-control--border--radius--md: var(--l--theme--border--radius--md);
635
+ --l--theme--text-control--border--radius--lg: var(--l--theme--border--radius--md);
636
+ --l--theme--text-control--space--inner--block--xs: var(--l--theme--space--20);
637
+ --l--theme--text-control--space--inner--block--sm: var(--l--theme--space--30);
638
+ --l--theme--text-control--space--inner--block--md: var(--l--theme--space--40);
639
+ --l--theme--text-control--space--inner--block--lg: var(--l--theme--space--50);
640
+ --l--theme--text-control--space--inner--inline--xs: var(--l--theme--space--30);
641
+ --l--theme--text-control--space--inner--inline--sm: var(--l--theme--space--40);
642
+ --l--theme--text-control--space--inner--inline--md: var(--l--theme--space--50);
643
+ --l--theme--text-control--space--inner--inline--lg: var(--l--theme--space--60);
644
+ --l--theme--text-control--color--background--on-default--rest: var(--l--theme--color--background--default);
645
+ --l--theme--text-control--color--background--on-default--focus: var(--l--theme--color--background--default);
646
+ --l--theme--text-control--color--background--on-default--hover: var(--l--theme--color--background--default);
647
+ --l--theme--text-control--color--border--on-default--rest: var(--l--theme--color--border--primary--on-default);
648
+ --l--theme--text-control--color--border--on-default--disabled: var(--l--theme--color--border--primary--on-default);
649
+ --l--theme--text-control--color--border--on-default--focus: var(--l--theme--color--border--primary--on-default);
650
+ --l--theme--text-control--color--border--on-default--hover: var(--l--theme--color--border--primary--on-default);
651
+ --l--theme--text-control--color--content--on-default--rest: var(--l--theme--color--content--primary--on-default);
652
+ --l--theme--text-control--color--content--on-default--focus: var(--l--theme--color--content--primary--on-default);
653
+ --l--theme--text-control--color--content--on-default--hover: var(--l--theme--color--content--primary--on-default);
654
+ --l--theme--text-control--color--placeholder--on-default--rest: var(--l--theme--color--content--secondary--on-default);
504
655
  --l--theme--space--gutter: var(--l--theme--space--70);
505
656
  --l--theme--dialog--space--inner--inline: var(--l--theme--space--gutter);
506
657
  --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.8.0",
3
+ "version": "0.9.0",
4
4
  "description": "Design tokens layer",
5
5
  "license": "MIT",
6
6
  "author": "Dmitry Mayorov",