@withlayers/tokens 0.5.0 → 0.7.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 +36 -7
  2. package/package.json +2 -2
package/dist/index.css CHANGED
@@ -3,11 +3,6 @@
3
3
  */
4
4
 
5
5
  :root {
6
- --l--theme--measure--sm: 18.75rem;
7
- --l--theme--measure--md: 37.5rem;
8
- --l--theme--measure--lg: 48rem;
9
- --l--theme--measure--xl: 64rem;
10
- --l--theme--measure--xxl: 80rem;
11
6
  --l--border--radius--0: 0px;
12
7
  --l--border--radius--2: 2px;
13
8
  --l--border--radius--4: 4px;
@@ -15,6 +10,7 @@
15
10
  --l--border--radius--16: 16px;
16
11
  --l--border--radius--32: 32px;
17
12
  --l--border--radius--round: 9999px;
13
+ --l--border--width--0: 0px;
18
14
  --l--border--width--1: 1px;
19
15
  --l--border--width--2: 2px;
20
16
  --l--border--width--4: 4px;
@@ -79,6 +75,16 @@
79
75
  --l--color--utility--attention--80: #cb6e17;
80
76
  --l--color--utility--attention--90: #b44d12;
81
77
  --l--color--utility--attention--100: #8d2b0b;
78
+ --l--color--transparent--10: rgba(0, 0, 0, 0.1);
79
+ --l--color--transparent--20: rgba(0, 0, 0, 0.2);
80
+ --l--color--transparent--30: rgba(0, 0, 0, 0.3);
81
+ --l--color--transparent--40: rgba(0, 0, 0, 0.4);
82
+ --l--color--transparent--50: rgba(0, 0, 0, 0.5);
83
+ --l--color--transparent--60: rgba(0, 0, 0, 0.6);
84
+ --l--color--transparent--70: rgba(0, 0, 0, 0.7);
85
+ --l--color--transparent--80: rgba(0, 0, 0, 0.8);
86
+ --l--color--transparent--90: rgba(0, 0, 0, 0.9);
87
+ --l--color--transparent--100: rgba(0, 0, 0, 1);
82
88
  --l--spacing--1: 0.0625rem;
83
89
  --l--spacing--2: 0.125rem;
84
90
  --l--spacing--4: 0.25rem;
@@ -181,6 +187,11 @@
181
187
  --l--typography--root: 16px;
182
188
  --l--theme--typography--h5--line-height: 1;
183
189
  --l--theme--typography--h6--line-height: 1;
190
+ --l--theme--measure--sm: 18.75rem;
191
+ --l--theme--measure--md: 37.5rem;
192
+ --l--theme--measure--lg: 48rem;
193
+ --l--theme--measure--xl: 64rem;
194
+ --l--theme--measure--xxl: 80rem;
184
195
  --l--theme--blockquote--default--typography--font-family: var(--l--typography--font-family--serif);
185
196
  --l--theme--blockquote--default--typography--font-size: clamp(var(--l--typography--font-size--24), 1.1765vw + 1.2353rem, var(--l--typography--font-size--32));
186
197
  --l--theme--blockquote--default--typography--font-style: var(--l--typography--font-style--italic);
@@ -189,13 +200,15 @@
189
200
  --l--theme--blockquote--default--typography--letter-spacing: var(--l--typography--letter-spacing--normal);
190
201
  --l--theme--blockquote--default--typography--line-height: var(--l--typography--line-height--1250);
191
202
  --l--theme--blockquote--default--typography--text-transform: var(--l--typography--text-transform--none);
203
+ --l--theme--dialog--default--border--style: var(--l--border--style--solid);
204
+ --l--theme--dialog--default--border--width: var(--l--border--width--0);
205
+ --l--theme--dialog--default--inline-size: var(--l--theme--measure--md);
192
206
  --l--theme--focus-ring--color--on-default: var(--l--color--neutral--100);
193
207
  --l--theme--focus-ring--color--on-subtle: var(--l--color--neutral--100);
194
208
  --l--theme--focus-ring--color--on-knockout: var(--l--color--neutral--0);
195
209
  --l--theme--focus-ring--outline--offset: var(--l--spacing--2);
196
210
  --l--theme--focus-ring--outline--style: var(--l--border--style--solid);
197
211
  --l--theme--focus-ring--outline--width: var(--l--border--width--2);
198
- --l--theme--layout--site-gutter: var(--l--spacing--24);
199
212
  --l--theme--link--on-default--color--content--default: var(--l--color--brand--primary--80);
200
213
  --l--theme--link--on-default--color--content--hover: var(--l--color--brand--primary--60);
201
214
  --l--theme--link--on-default--color--content--focus: var(--l--color--brand--primary--60);
@@ -226,6 +239,12 @@
226
239
  --l--theme--link--on-subtle-muted--color--content--focus: var(--l--color--neutral--90);
227
240
  --l--theme--link--on-subtle-muted--color--content--active: var(--l--color--neutral--90);
228
241
  --l--theme--link--on-subtle-muted--color--content--visited: var(--l--color--neutral--90);
242
+ --l--theme--selection--background--on-default: var(--l--color--neutral--90);
243
+ --l--theme--selection--background--on-subtle: var(--l--color--neutral--90);
244
+ --l--theme--selection--background--on-knockout: var(--l--color--neutral--0);
245
+ --l--theme--selection--color--on-default: var(--l--color--neutral--10);
246
+ --l--theme--selection--color--on-subtle: var(--l--color--neutral--10);
247
+ --l--theme--selection--color--on-knockout: var(--l--color--neutral--90);
229
248
  --l--theme--border--radius--sm: var(--l--border--radius--2);
230
249
  --l--theme--border--radius--md: var(--l--border--radius--4);
231
250
  --l--theme--border--radius--lg: var(--l--border--radius--8);
@@ -244,10 +263,13 @@
244
263
  --l--theme--color--border--subtle: var(--l--color--neutral--10);
245
264
  --l--theme--color--content--on-default: var(--l--color--neutral--90);
246
265
  --l--theme--color--content--on-default-muted: var(--l--color--neutral--60);
247
- --l--theme--color--content--on-knockout: var(--l--color--neutral--20);
266
+ --l--theme--color--content--on-knockout: var(--l--color--neutral--10);
248
267
  --l--theme--color--content--on-knockout-muted: var(--l--color--neutral--40);
249
268
  --l--theme--color--content--on-subtle: var(--l--color--neutral--90);
250
269
  --l--theme--color--content--on-subtle-muted: var(--l--color--neutral--70);
270
+ --l--theme--color--overlay--on-default: var(--l--color--transparent--50);
271
+ --l--theme--color--overlay--on-knockout: var(--l--color--transparent--50);
272
+ --l--theme--color--overlay--on-subtle: var(--l--color--transparent--50);
251
273
  --l--theme--typography--body--sm--font-family: var(--l--typography--font-family--serif);
252
274
  --l--theme--typography--body--sm--font-size: clamp(var(--l--typography--font-size--14), 0.18519vw + 0.83333rem, var(--l--typography--font-size--16));
253
275
  --l--theme--typography--body--sm--font-style: var(--l--typography--font-style--normal);
@@ -370,5 +392,12 @@
370
392
  --l--theme--space--100: clamp(var(--l--spacing--64), 2.9630vw + 3.3333rem, var(--l--spacing--96));
371
393
  --l--theme--space--110: clamp(var(--l--spacing--96), 2.9630vw + 5.3333rem, var(--l--spacing--128));
372
394
  --l--theme--space--120: clamp(var(--l--spacing--128), 5.9259vw + 6.6667rem, var(--l--spacing--192));
395
+ --l--theme--dialog--default--border--radius: var(--l--theme--border--radius--md);
396
+ --l--theme--dialog--default--color--background: var(--l--theme--color--background--default);
397
+ --l--theme--dialog--default--color--border: var(--l--theme--color--border--default);
398
+ --l--theme--dialog--default--color--content: var(--l--theme--color--content--on-default);
399
+ --l--theme--dialog--default--color--overlay: var(--l--theme--color--overlay--on-default);
373
400
  --l--theme--media--border--radius: var(--l--theme--border--radius--md);
401
+ --l--theme--space--gutter: var(--l--theme--space--80);
402
+ --l--theme--dialog--default--padding: var(--l--theme--space--gutter);
374
403
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@withlayers/tokens",
3
- "version": "0.5.0",
3
+ "version": "0.7.0",
4
4
  "description": "Design tokens layer",
5
5
  "license": "MIT",
6
6
  "author": "Dmitry Mayorov",
@@ -13,7 +13,7 @@
13
13
  "dist"
14
14
  ],
15
15
  "scripts": {
16
- "build": "style-dictionary build"
16
+ "build": "style-dictionary build --verbose"
17
17
  },
18
18
  "devDependencies": {
19
19
  "style-dictionary": "^4.4.0"