@withlayers/tokens 0.8.0 → 0.8.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 +96 -85
  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,12 @@
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);
308
319
  --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
320
  --l--theme--dialog--measure: var(--l--theme--measure--md);
312
321
  --l--theme--focus-ring--color--outline--on-default: var(--l--color--neutral--100);
313
322
  --l--theme--focus-ring--outline--offset: var(--l--units--2);
@@ -343,21 +352,21 @@
343
352
  --l--theme--color--border--secondary--on-default: var(--l--color--neutral--10);
344
353
  --l--theme--color--content--primary--on-default: var(--l--color--neutral--90);
345
354
  --l--theme--color--content--secondary--on-default: var(--l--color--neutral--60);
346
- --l--theme--color--overlay--on-default: var(--l--color--transparent--50);
355
+ --l--theme--color--overlay--on-default: var(--l--color--dark-alpha--50);
347
356
  --l--theme--color--code--background--on-default: var(--l--color--neutral--10);
348
357
  --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);
358
+ --l--theme--color--feedback--destructive--background--on-default: var(--l--color--red--20);
359
+ --l--theme--color--feedback--destructive--border--on-default: var(--l--color--red--30);
360
+ --l--theme--color--feedback--destructive--content--on-default: var(--l--color--red--100);
361
+ --l--theme--color--feedback--informative--background--on-default: var(--l--color--blue--20);
362
+ --l--theme--color--feedback--informative--border--on-default: var(--l--color--blue--30);
363
+ --l--theme--color--feedback--informative--content--on-default: var(--l--color--blue--100);
364
+ --l--theme--color--feedback--positive--background--on-default: var(--l--color--green--20);
365
+ --l--theme--color--feedback--positive--border--on-default: var(--l--color--green--30);
366
+ --l--theme--color--feedback--positive--content--on-default: var(--l--color--green--100);
367
+ --l--theme--color--feedback--warning--background--on-default: var(--l--color--yellow--20);
368
+ --l--theme--color--feedback--warning--border--on-default: var(--l--color--yellow--30);
369
+ --l--theme--color--feedback--warning--content--on-default: var(--l--color--yellow--100);
361
370
  --l--theme--typography--body--font-family--sm: var(--l--typography--font-family--serif);
362
371
  --l--theme--typography--body--font-family--md: var(--l--typography--font-family--serif);
363
372
  --l--theme--typography--body--font-family--lg: var(--l--typography--font-family--serif);
@@ -497,7 +506,9 @@
497
506
  --l--theme--button--space--inner--inline--md: var(--l--theme--space--60);
498
507
  --l--theme--button--space--inner--inline--lg: var(--l--theme--space--70);
499
508
  --l--theme--dialog--border--radius: var(--l--theme--border--radius--md);
509
+ --l--theme--dialog--border--width: var(--l--theme--border--width--sm);
500
510
  --l--theme--dialog--color--background: var(--l--theme--color--background--default);
511
+ --l--theme--dialog--color--border: var(--l--theme--color--border--primary--on-default);
501
512
  --l--theme--dialog--color--content: var(--l--theme--color--content--primary--on-default);
502
513
  --l--theme--dialog--color--overlay: var(--l--theme--color--overlay--on-default);
503
514
  --l--theme--media--border--radius: var(--l--theme--border--radius--md);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@withlayers/tokens",
3
- "version": "0.8.0",
3
+ "version": "0.8.1",
4
4
  "description": "Design tokens layer",
5
5
  "license": "MIT",
6
6
  "author": "Dmitry Mayorov",