@lit-material/tokens 0.0.2 → 1.0.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.
@@ -0,0 +1,602 @@
1
+ {
2
+ "md": {
3
+ "sys": {
4
+ "color": {
5
+ "primary": {
6
+ "$type": "color",
7
+ "$value": "#6750a4"
8
+ },
9
+ "on-primary": {
10
+ "$type": "color",
11
+ "$value": "#ffffff"
12
+ },
13
+ "primary-container": {
14
+ "$type": "color",
15
+ "$value": "#eaddff"
16
+ },
17
+ "on-primary-container": {
18
+ "$type": "color",
19
+ "$value": "#21005d"
20
+ },
21
+ "secondary": {
22
+ "$type": "color",
23
+ "$value": "#625b71"
24
+ },
25
+ "on-secondary": {
26
+ "$type": "color",
27
+ "$value": "#ffffff"
28
+ },
29
+ "secondary-container": {
30
+ "$type": "color",
31
+ "$value": "#e8def8"
32
+ },
33
+ "on-secondary-container": {
34
+ "$type": "color",
35
+ "$value": "#1d192b"
36
+ },
37
+ "tertiary": {
38
+ "$type": "color",
39
+ "$value": "#7d5260"
40
+ },
41
+ "on-tertiary": {
42
+ "$type": "color",
43
+ "$value": "#ffffff"
44
+ },
45
+ "tertiary-container": {
46
+ "$type": "color",
47
+ "$value": "#ffd8e4"
48
+ },
49
+ "on-tertiary-container": {
50
+ "$type": "color",
51
+ "$value": "#31111d"
52
+ },
53
+ "error": {
54
+ "$type": "color",
55
+ "$value": "#b3261e"
56
+ },
57
+ "on-error": {
58
+ "$type": "color",
59
+ "$value": "#ffffff"
60
+ },
61
+ "error-container": {
62
+ "$type": "color",
63
+ "$value": "#f9dedc"
64
+ },
65
+ "on-error-container": {
66
+ "$type": "color",
67
+ "$value": "#410e0b"
68
+ },
69
+ "background": {
70
+ "$type": "color",
71
+ "$value": "#fffbfe"
72
+ },
73
+ "on-background": {
74
+ "$type": "color",
75
+ "$value": "#1c1b1f"
76
+ },
77
+ "surface": {
78
+ "$type": "color",
79
+ "$value": "#fffbfe"
80
+ },
81
+ "on-surface": {
82
+ "$type": "color",
83
+ "$value": "#1c1b1f"
84
+ },
85
+ "surface-variant": {
86
+ "$type": "color",
87
+ "$value": "#e7e0ec"
88
+ },
89
+ "on-surface-variant": {
90
+ "$type": "color",
91
+ "$value": "#49454f"
92
+ },
93
+ "surface-container-lowest": {
94
+ "$type": "color",
95
+ "$value": "#ffffff"
96
+ },
97
+ "surface-container-low": {
98
+ "$type": "color",
99
+ "$value": "#f7f2fa"
100
+ },
101
+ "surface-container": {
102
+ "$type": "color",
103
+ "$value": "#f3edf7"
104
+ },
105
+ "surface-container-high": {
106
+ "$type": "color",
107
+ "$value": "#ece6f0"
108
+ },
109
+ "surface-container-highest": {
110
+ "$type": "color",
111
+ "$value": "#e6e0e9"
112
+ },
113
+ "outline": {
114
+ "$type": "color",
115
+ "$value": "#79747e"
116
+ },
117
+ "outline-variant": {
118
+ "$type": "color",
119
+ "$value": "#c4c7c5"
120
+ },
121
+ "shadow": {
122
+ "$type": "color",
123
+ "$value": "#000000"
124
+ },
125
+ "scrim": {
126
+ "$type": "color",
127
+ "$value": "#000000"
128
+ },
129
+ "inverse-surface": {
130
+ "$type": "color",
131
+ "$value": "#313033"
132
+ },
133
+ "inverse-on-surface": {
134
+ "$type": "color",
135
+ "$value": "#f4eff4"
136
+ },
137
+ "inverse-primary": {
138
+ "$type": "color",
139
+ "$value": "#d0bcff"
140
+ }
141
+ },
142
+ "elevation": {
143
+ "level0": {
144
+ "$type": "shadow",
145
+ "$value": []
146
+ },
147
+ "level1": {
148
+ "$type": "shadow",
149
+ "$value": [
150
+ {
151
+ "color": "#0000004d",
152
+ "offsetX": "0px",
153
+ "offsetY": "1px",
154
+ "blur": "2px",
155
+ "spread": "0px"
156
+ },
157
+ {
158
+ "color": "#00000026",
159
+ "offsetX": "0px",
160
+ "offsetY": "1px",
161
+ "blur": "3px",
162
+ "spread": "1px"
163
+ }
164
+ ]
165
+ },
166
+ "level2": {
167
+ "$type": "shadow",
168
+ "$value": [
169
+ {
170
+ "color": "#0000004d",
171
+ "offsetX": "0px",
172
+ "offsetY": "1px",
173
+ "blur": "2px",
174
+ "spread": "0px"
175
+ },
176
+ {
177
+ "color": "#00000026",
178
+ "offsetX": "0px",
179
+ "offsetY": "2px",
180
+ "blur": "6px",
181
+ "spread": "2px"
182
+ }
183
+ ]
184
+ },
185
+ "level3": {
186
+ "$type": "shadow",
187
+ "$value": [
188
+ {
189
+ "color": "#0000004d",
190
+ "offsetX": "0px",
191
+ "offsetY": "1px",
192
+ "blur": "3px",
193
+ "spread": "0px"
194
+ },
195
+ {
196
+ "color": "#00000026",
197
+ "offsetX": "0px",
198
+ "offsetY": "4px",
199
+ "blur": "8px",
200
+ "spread": "3px"
201
+ }
202
+ ]
203
+ },
204
+ "level4": {
205
+ "$type": "shadow",
206
+ "$value": [
207
+ {
208
+ "color": "#0000004d",
209
+ "offsetX": "0px",
210
+ "offsetY": "2px",
211
+ "blur": "3px",
212
+ "spread": "0px"
213
+ },
214
+ {
215
+ "color": "#00000026",
216
+ "offsetX": "0px",
217
+ "offsetY": "6px",
218
+ "blur": "10px",
219
+ "spread": "4px"
220
+ }
221
+ ]
222
+ },
223
+ "level5": {
224
+ "$type": "shadow",
225
+ "$value": [
226
+ {
227
+ "color": "#0000004d",
228
+ "offsetX": "0px",
229
+ "offsetY": "4px",
230
+ "blur": "4px",
231
+ "spread": "0px"
232
+ },
233
+ {
234
+ "color": "#00000026",
235
+ "offsetX": "0px",
236
+ "offsetY": "8px",
237
+ "blur": "12px",
238
+ "spread": "6px"
239
+ }
240
+ ]
241
+ }
242
+ },
243
+ "motion": {
244
+ "easing": {
245
+ "standard": {
246
+ "$type": "cubicBezier",
247
+ "$value": [
248
+ 0.2,
249
+ 0,
250
+ 0,
251
+ 1
252
+ ]
253
+ },
254
+ "emphasized": {
255
+ "$type": "cubicBezier",
256
+ "$value": [
257
+ 0.2,
258
+ 0,
259
+ 0,
260
+ 1
261
+ ]
262
+ }
263
+ },
264
+ "duration": {
265
+ "short2": {
266
+ "$type": "duration",
267
+ "$value": "100ms"
268
+ },
269
+ "medium1": {
270
+ "$type": "duration",
271
+ "$value": "250ms"
272
+ }
273
+ }
274
+ },
275
+ "shape": {
276
+ "corner": {
277
+ "none": {
278
+ "$type": "dimension",
279
+ "$value": "0px"
280
+ },
281
+ "extra-small": {
282
+ "$type": "dimension",
283
+ "$value": "4px"
284
+ },
285
+ "small": {
286
+ "$type": "dimension",
287
+ "$value": "8px"
288
+ },
289
+ "medium": {
290
+ "$type": "dimension",
291
+ "$value": "12px"
292
+ },
293
+ "large": {
294
+ "$type": "dimension",
295
+ "$value": "16px"
296
+ },
297
+ "extra-large": {
298
+ "$type": "dimension",
299
+ "$value": "28px"
300
+ },
301
+ "full": {
302
+ "$type": "dimension",
303
+ "$value": "9999px"
304
+ }
305
+ }
306
+ },
307
+ "state": {
308
+ "hover-state-layer-opacity": {
309
+ "$type": "number",
310
+ "$value": 0.08
311
+ },
312
+ "focus-state-layer-opacity": {
313
+ "$type": "number",
314
+ "$value": 0.1
315
+ },
316
+ "pressed-state-layer-opacity": {
317
+ "$type": "number",
318
+ "$value": 0.1
319
+ },
320
+ "dragged-state-layer-opacity": {
321
+ "$type": "number",
322
+ "$value": 0.16
323
+ },
324
+ "disabled-container-opacity": {
325
+ "$type": "number",
326
+ "$value": 0.12
327
+ },
328
+ "disabled-content-opacity": {
329
+ "$type": "number",
330
+ "$value": 0.38
331
+ }
332
+ },
333
+ "typescale": {
334
+ "label-large": {
335
+ "font": {
336
+ "$type": "fontFamily",
337
+ "$value": "Roboto",
338
+ "$extensions": {
339
+ "dev.lit-material": {
340
+ "css": "Roboto, system-ui, sans-serif"
341
+ }
342
+ }
343
+ },
344
+ "weight": {
345
+ "$type": "fontWeight",
346
+ "$value": 500
347
+ },
348
+ "size": {
349
+ "$type": "dimension",
350
+ "$value": "14px",
351
+ "$extensions": {
352
+ "dev.lit-material": {
353
+ "css": "0.875rem"
354
+ }
355
+ }
356
+ },
357
+ "line-height": {
358
+ "$type": "dimension",
359
+ "$value": "20px",
360
+ "$extensions": {
361
+ "dev.lit-material": {
362
+ "css": "1.25rem"
363
+ }
364
+ }
365
+ },
366
+ "tracking": {
367
+ "$type": "dimension",
368
+ "$value": "0.1px",
369
+ "$extensions": {
370
+ "dev.lit-material": {
371
+ "css": "0.00625rem"
372
+ }
373
+ }
374
+ },
375
+ "style": {
376
+ "$type": "typography",
377
+ "$value": {
378
+ "fontFamily": "{md.sys.typescale.label-large.font}",
379
+ "fontSize": "{md.sys.typescale.label-large.size}",
380
+ "fontWeight": "{md.sys.typescale.label-large.weight}",
381
+ "lineHeight": "{md.sys.typescale.label-large.line-height}",
382
+ "letterSpacing": "{md.sys.typescale.label-large.tracking}"
383
+ },
384
+ "$description": "The label-large text style: the five --md-sys-typescale-label-large-* tokens together (no CSS property of its own)."
385
+ }
386
+ },
387
+ "label-medium": {
388
+ "font": {
389
+ "$type": "fontFamily",
390
+ "$value": "Roboto",
391
+ "$extensions": {
392
+ "dev.lit-material": {
393
+ "css": "Roboto, system-ui, sans-serif"
394
+ }
395
+ }
396
+ },
397
+ "weight": {
398
+ "$type": "fontWeight",
399
+ "$value": 500
400
+ },
401
+ "size": {
402
+ "$type": "dimension",
403
+ "$value": "12px",
404
+ "$extensions": {
405
+ "dev.lit-material": {
406
+ "css": "0.75rem"
407
+ }
408
+ }
409
+ },
410
+ "line-height": {
411
+ "$type": "dimension",
412
+ "$value": "16px",
413
+ "$extensions": {
414
+ "dev.lit-material": {
415
+ "css": "1rem"
416
+ }
417
+ }
418
+ },
419
+ "tracking": {
420
+ "$type": "dimension",
421
+ "$value": "0.5px",
422
+ "$extensions": {
423
+ "dev.lit-material": {
424
+ "css": "0.03125rem"
425
+ }
426
+ }
427
+ },
428
+ "style": {
429
+ "$type": "typography",
430
+ "$value": {
431
+ "fontFamily": "{md.sys.typescale.label-medium.font}",
432
+ "fontSize": "{md.sys.typescale.label-medium.size}",
433
+ "fontWeight": "{md.sys.typescale.label-medium.weight}",
434
+ "lineHeight": "{md.sys.typescale.label-medium.line-height}",
435
+ "letterSpacing": "{md.sys.typescale.label-medium.tracking}"
436
+ },
437
+ "$description": "The label-medium text style: the five --md-sys-typescale-label-medium-* tokens together (no CSS property of its own)."
438
+ }
439
+ },
440
+ "title-large": {
441
+ "font": {
442
+ "$type": "fontFamily",
443
+ "$value": "Roboto",
444
+ "$extensions": {
445
+ "dev.lit-material": {
446
+ "css": "Roboto, system-ui, sans-serif"
447
+ }
448
+ }
449
+ },
450
+ "weight": {
451
+ "$type": "fontWeight",
452
+ "$value": 400
453
+ },
454
+ "size": {
455
+ "$type": "dimension",
456
+ "$value": "22px",
457
+ "$extensions": {
458
+ "dev.lit-material": {
459
+ "css": "1.375rem"
460
+ }
461
+ }
462
+ },
463
+ "line-height": {
464
+ "$type": "dimension",
465
+ "$value": "28px",
466
+ "$extensions": {
467
+ "dev.lit-material": {
468
+ "css": "1.75rem"
469
+ }
470
+ }
471
+ },
472
+ "tracking": {
473
+ "$type": "dimension",
474
+ "$value": "0px",
475
+ "$extensions": {
476
+ "dev.lit-material": {
477
+ "css": "0rem"
478
+ }
479
+ }
480
+ },
481
+ "style": {
482
+ "$type": "typography",
483
+ "$value": {
484
+ "fontFamily": "{md.sys.typescale.title-large.font}",
485
+ "fontSize": "{md.sys.typescale.title-large.size}",
486
+ "fontWeight": "{md.sys.typescale.title-large.weight}",
487
+ "lineHeight": "{md.sys.typescale.title-large.line-height}",
488
+ "letterSpacing": "{md.sys.typescale.title-large.tracking}"
489
+ },
490
+ "$description": "The title-large text style: the five --md-sys-typescale-title-large-* tokens together (no CSS property of its own)."
491
+ }
492
+ },
493
+ "headline-small": {
494
+ "font": {
495
+ "$type": "fontFamily",
496
+ "$value": "Roboto",
497
+ "$extensions": {
498
+ "dev.lit-material": {
499
+ "css": "Roboto, system-ui, sans-serif"
500
+ }
501
+ }
502
+ },
503
+ "weight": {
504
+ "$type": "fontWeight",
505
+ "$value": 400
506
+ },
507
+ "size": {
508
+ "$type": "dimension",
509
+ "$value": "24px",
510
+ "$extensions": {
511
+ "dev.lit-material": {
512
+ "css": "1.5rem"
513
+ }
514
+ }
515
+ },
516
+ "line-height": {
517
+ "$type": "dimension",
518
+ "$value": "32px",
519
+ "$extensions": {
520
+ "dev.lit-material": {
521
+ "css": "2rem"
522
+ }
523
+ }
524
+ },
525
+ "tracking": {
526
+ "$type": "dimension",
527
+ "$value": "0px",
528
+ "$extensions": {
529
+ "dev.lit-material": {
530
+ "css": "0rem"
531
+ }
532
+ }
533
+ },
534
+ "style": {
535
+ "$type": "typography",
536
+ "$value": {
537
+ "fontFamily": "{md.sys.typescale.headline-small.font}",
538
+ "fontSize": "{md.sys.typescale.headline-small.size}",
539
+ "fontWeight": "{md.sys.typescale.headline-small.weight}",
540
+ "lineHeight": "{md.sys.typescale.headline-small.line-height}",
541
+ "letterSpacing": "{md.sys.typescale.headline-small.tracking}"
542
+ },
543
+ "$description": "The headline-small text style: the five --md-sys-typescale-headline-small-* tokens together (no CSS property of its own)."
544
+ }
545
+ },
546
+ "headline-medium": {
547
+ "font": {
548
+ "$type": "fontFamily",
549
+ "$value": "Roboto",
550
+ "$extensions": {
551
+ "dev.lit-material": {
552
+ "css": "Roboto, system-ui, sans-serif"
553
+ }
554
+ }
555
+ },
556
+ "weight": {
557
+ "$type": "fontWeight",
558
+ "$value": 400
559
+ },
560
+ "size": {
561
+ "$type": "dimension",
562
+ "$value": "28px",
563
+ "$extensions": {
564
+ "dev.lit-material": {
565
+ "css": "1.75rem"
566
+ }
567
+ }
568
+ },
569
+ "line-height": {
570
+ "$type": "dimension",
571
+ "$value": "36px",
572
+ "$extensions": {
573
+ "dev.lit-material": {
574
+ "css": "2.25rem"
575
+ }
576
+ }
577
+ },
578
+ "tracking": {
579
+ "$type": "dimension",
580
+ "$value": "0px",
581
+ "$extensions": {
582
+ "dev.lit-material": {
583
+ "css": "0rem"
584
+ }
585
+ }
586
+ },
587
+ "style": {
588
+ "$type": "typography",
589
+ "$value": {
590
+ "fontFamily": "{md.sys.typescale.headline-medium.font}",
591
+ "fontSize": "{md.sys.typescale.headline-medium.size}",
592
+ "fontWeight": "{md.sys.typescale.headline-medium.weight}",
593
+ "lineHeight": "{md.sys.typescale.headline-medium.line-height}",
594
+ "letterSpacing": "{md.sys.typescale.headline-medium.tracking}"
595
+ },
596
+ "$description": "The headline-medium text style: the five --md-sys-typescale-headline-medium-* tokens together (no CSS property of its own)."
597
+ }
598
+ }
599
+ }
600
+ }
601
+ }
602
+ }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lit-material/tokens",
3
- "version": "0.0.2",
3
+ "version": "1.0.0",
4
4
  "description": "Material Design 3 design tokens (color, type, shape, elevation, motion) for lit-material components.",
5
5
  "license": "MIT",
6
6
  "author": {
@@ -8,7 +8,7 @@
8
8
  "email": "bohdaq@gmail.com",
9
9
  "url": "https://github.com/bohdaq"
10
10
  },
11
- "homepage": "https://github.com/bohdaq/lit-material#readme",
11
+ "homepage": "https://lit.rws8.tech/guides/theming/",
12
12
  "bugs": "https://github.com/bohdaq/lit-material/issues",
13
13
  "repository": {
14
14
  "type": "git",
@@ -32,20 +32,24 @@
32
32
  "types": "./dist/index.d.ts",
33
33
  "default": "./dist/index.js"
34
34
  },
35
- "./css/*": "./src/css/*"
35
+ "./css/*": "./src/css/*",
36
+ "./figma/*": "./figma/*"
36
37
  },
37
38
  "files": [
38
39
  "dist",
39
- "src/css"
40
+ "src/css",
41
+ "figma"
40
42
  ],
41
43
  "publishConfig": {
42
44
  "access": "public"
43
45
  },
44
46
  "devDependencies": {
47
+ "tsx": "^4.19.0",
45
48
  "typescript": "^5.7.0"
46
49
  },
47
50
  "scripts": {
48
51
  "build": "tsc -p tsconfig.json",
49
- "typecheck": "tsc -p tsconfig.json --noEmit"
52
+ "typecheck": "tsc -p tsconfig.json --noEmit",
53
+ "test": "node --import tsx --test src/*.ssr.test.ts"
50
54
  }
51
55
  }