@withlayers/tokens 0.3.1 → 0.5.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 +49 -22
  2. package/package.json +1 -1
package/dist/index.css CHANGED
@@ -20,6 +20,9 @@
20
20
  --l--border--width--4: 4px;
21
21
  --l--border--width--8: 8px;
22
22
  --l--border--width--16: 16px;
23
+ --l--border--style--solid: solid;
24
+ --l--border--style--dashed: dashed;
25
+ --l--border--style--dotted: dotted;
23
26
  --l--breakpoint--xs: 360px;
24
27
  --l--breakpoint--sm: 490px;
25
28
  --l--breakpoint--md: 768px;
@@ -41,7 +44,7 @@
41
44
  --l--color--neutral--30: #bcccdc;
42
45
  --l--color--neutral--40: #9fb3c8;
43
46
  --l--color--neutral--50: #829ab1;
44
- --l--color--neutral--60: #627d98;
47
+ --l--color--neutral--60: #5e7892;
45
48
  --l--color--neutral--70: #486581;
46
49
  --l--color--neutral--80: #334e68;
47
50
  --l--color--neutral--90: #243b53;
@@ -186,22 +189,43 @@
186
189
  --l--theme--blockquote--default--typography--letter-spacing: var(--l--typography--letter-spacing--normal);
187
190
  --l--theme--blockquote--default--typography--line-height: var(--l--typography--line-height--1250);
188
191
  --l--theme--blockquote--default--typography--text-transform: var(--l--typography--text-transform--none);
192
+ --l--theme--focus-ring--color--on-default: var(--l--color--neutral--100);
193
+ --l--theme--focus-ring--color--on-subtle: var(--l--color--neutral--100);
194
+ --l--theme--focus-ring--color--on-knockout: var(--l--color--neutral--0);
195
+ --l--theme--focus-ring--outline--offset: var(--l--spacing--2);
196
+ --l--theme--focus-ring--outline--style: var(--l--border--style--solid);
197
+ --l--theme--focus-ring--outline--width: var(--l--border--width--2);
189
198
  --l--theme--layout--site-gutter: var(--l--spacing--24);
190
- --l--theme--link--default--color--content--default: var(--l--color--brand--primary--80);
191
- --l--theme--link--default--color--content--hover: var(--l--color--brand--primary--60);
192
- --l--theme--link--default--color--content--focus: var(--l--color--brand--primary--60);
193
- --l--theme--link--default--color--content--active: var(--l--color--brand--primary--60);
194
- --l--theme--link--default--color--content--visited: var(--l--color--brand--primary--60);
195
- --l--theme--link--knockout--color--content--default: var(--l--color--brand--primary--30);
196
- --l--theme--link--knockout--color--content--hover: var(--l--color--brand--primary--10);
197
- --l--theme--link--knockout--color--content--focus: var(--l--color--brand--primary--10);
198
- --l--theme--link--knockout--color--content--active: var(--l--color--brand--primary--10);
199
- --l--theme--link--knockout--color--content--visited: var(--l--color--brand--primary--10);
200
- --l--theme--link--subtle--color--content--default: var(--l--color--neutral--70);
201
- --l--theme--link--subtle--color--content--hover: var(--l--color--neutral--90);
202
- --l--theme--link--subtle--color--content--focus: var(--l--color--neutral--90);
203
- --l--theme--link--subtle--color--content--active: var(--l--color--neutral--90);
204
- --l--theme--link--subtle--color--content--visited: var(--l--color--neutral--90);
199
+ --l--theme--link--on-default--color--content--default: var(--l--color--brand--primary--80);
200
+ --l--theme--link--on-default--color--content--hover: var(--l--color--brand--primary--60);
201
+ --l--theme--link--on-default--color--content--focus: var(--l--color--brand--primary--60);
202
+ --l--theme--link--on-default--color--content--active: var(--l--color--brand--primary--60);
203
+ --l--theme--link--on-default--color--content--visited: var(--l--color--brand--primary--60);
204
+ --l--theme--link--on-default-muted--color--content--default: var(--l--color--neutral--60);
205
+ --l--theme--link--on-default-muted--color--content--hover: var(--l--color--neutral--90);
206
+ --l--theme--link--on-default-muted--color--content--focus: var(--l--color--neutral--90);
207
+ --l--theme--link--on-default-muted--color--content--active: var(--l--color--neutral--90);
208
+ --l--theme--link--on-default-muted--color--content--visited: var(--l--color--neutral--90);
209
+ --l--theme--link--on-knockout--color--content--default: var(--l--color--brand--primary--30);
210
+ --l--theme--link--on-knockout--color--content--hover: var(--l--color--brand--primary--20);
211
+ --l--theme--link--on-knockout--color--content--focus: var(--l--color--brand--primary--20);
212
+ --l--theme--link--on-knockout--color--content--active: var(--l--color--brand--primary--20);
213
+ --l--theme--link--on-knockout--color--content--visited: var(--l--color--brand--primary--20);
214
+ --l--theme--link--on-knockout-muted--color--content--default: var(--l--color--neutral--40);
215
+ --l--theme--link--on-knockout-muted--color--content--hover: var(--l--color--neutral--20);
216
+ --l--theme--link--on-knockout-muted--color--content--focus: var(--l--color--neutral--20);
217
+ --l--theme--link--on-knockout-muted--color--content--active: var(--l--color--neutral--20);
218
+ --l--theme--link--on-knockout-muted--color--content--visited: var(--l--color--neutral--20);
219
+ --l--theme--link--on-subtle--color--content--default: var(--l--color--brand--primary--80);
220
+ --l--theme--link--on-subtle--color--content--hover: var(--l--color--brand--primary--60);
221
+ --l--theme--link--on-subtle--color--content--focus: var(--l--color--brand--primary--60);
222
+ --l--theme--link--on-subtle--color--content--active: var(--l--color--brand--primary--60);
223
+ --l--theme--link--on-subtle--color--content--visited: var(--l--color--brand--primary--60);
224
+ --l--theme--link--on-subtle-muted--color--content--default: var(--l--color--neutral--70);
225
+ --l--theme--link--on-subtle-muted--color--content--hover: var(--l--color--neutral--90);
226
+ --l--theme--link--on-subtle-muted--color--content--focus: var(--l--color--neutral--90);
227
+ --l--theme--link--on-subtle-muted--color--content--active: var(--l--color--neutral--90);
228
+ --l--theme--link--on-subtle-muted--color--content--visited: var(--l--color--neutral--90);
205
229
  --l--theme--border--radius--sm: var(--l--border--radius--2);
206
230
  --l--theme--border--radius--md: var(--l--border--radius--4);
207
231
  --l--theme--border--radius--lg: var(--l--border--radius--8);
@@ -218,9 +242,12 @@
218
242
  --l--theme--color--border--default: var(--l--color--neutral--30);
219
243
  --l--theme--color--border--knockout: var(--l--color--neutral--80);
220
244
  --l--theme--color--border--subtle: var(--l--color--neutral--10);
221
- --l--theme--color--content--default: var(--l--color--neutral--90);
222
- --l--theme--color--content--knockout: var(--l--color--neutral--10);
223
- --l--theme--color--content--subtle: var(--l--color--neutral--70);
245
+ --l--theme--color--content--on-default: var(--l--color--neutral--90);
246
+ --l--theme--color--content--on-default-muted: var(--l--color--neutral--60);
247
+ --l--theme--color--content--on-knockout: var(--l--color--neutral--20);
248
+ --l--theme--color--content--on-knockout-muted: var(--l--color--neutral--40);
249
+ --l--theme--color--content--on-subtle: var(--l--color--neutral--90);
250
+ --l--theme--color--content--on-subtle-muted: var(--l--color--neutral--70);
224
251
  --l--theme--typography--body--sm--font-family: var(--l--typography--font-family--serif);
225
252
  --l--theme--typography--body--sm--font-size: clamp(var(--l--typography--font-size--14), 0.18519vw + 0.83333rem, var(--l--typography--font-size--16));
226
253
  --l--theme--typography--body--sm--font-style: var(--l--typography--font-style--normal);
@@ -306,21 +333,21 @@
306
333
  --l--theme--typography--h5--font-style: var(--l--typography--font-style--normal);
307
334
  --l--theme--typography--h5--font-variant-caps: var(--l--typography--font-variant-caps--all-small-caps);
308
335
  --l--theme--typography--h5--font-weight: var(--l--typography--font-weight--medium);
309
- --l--theme--typography--h5--letter-spacing: var(--l--typography--letter-spacing--1);
336
+ --l--theme--typography--h5--letter-spacing: var(--l--typography--letter-spacing--4);
310
337
  --l--theme--typography--h5--text-transform: var(--l--typography--text-transform--none);
311
338
  --l--theme--typography--h6--font-family: var(--l--typography--font-family--sans-serif);
312
339
  --l--theme--typography--h6--font-size: clamp(var(--l--typography--font-size--16), 0.18519vw + 0.95833rem, var(--l--typography--font-size--18));
313
340
  --l--theme--typography--h6--font-style: var(--l--typography--font-style--normal);
314
341
  --l--theme--typography--h6--font-variant-caps: var(--l--typography--font-variant-caps--all-small-caps);
315
342
  --l--theme--typography--h6--font-weight: var(--l--typography--font-weight--normal);
316
- --l--theme--typography--h6--letter-spacing: var(--l--typography--letter-spacing--1);
343
+ --l--theme--typography--h6--letter-spacing: var(--l--typography--letter-spacing--4);
317
344
  --l--theme--typography--h6--text-transform: var(--l--typography--text-transform--none);
318
345
  --l--theme--typography--overline--font-family: var(--l--typography--font-family--sans-serif);
319
346
  --l--theme--typography--overline--font-size: clamp(var(--l--typography--font-size--12), 0.18519vw + 0.70833rem, var(--l--typography--font-size--14));
320
347
  --l--theme--typography--overline--font-style: var(--l--typography--font-style--normal);
321
348
  --l--theme--typography--overline--font-variant-caps: var(--l--typography--font-variant-caps--all-small-caps);
322
349
  --l--theme--typography--overline--font-weight: var(--l--typography--font-weight--normal);
323
- --l--theme--typography--overline--letter-spacing: var(--l--typography--letter-spacing--2);
350
+ --l--theme--typography--overline--letter-spacing: var(--l--typography--letter-spacing--4);
324
351
  --l--theme--typography--overline--line-height: var(--l--typography--line-height--1000);
325
352
  --l--theme--typography--overline--text-transform: var(--l--typography--text-transform--none);
326
353
  --l--theme--typography--subhead--font-family: var(--l--typography--font-family--serif);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@withlayers/tokens",
3
- "version": "0.3.1",
3
+ "version": "0.5.0",
4
4
  "description": "Design tokens layer",
5
5
  "license": "MIT",
6
6
  "author": "Dmitry Mayorov",