@lit-material/tokens 0.1.0 → 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.
Files changed (5) hide show
  1. package/README.md +52 -0
  2. package/dist/sbom.cdx.json +65 -0
  3. package/figma/tokens.dark.json +602 -0
  4. package/figma/tokens.light.json +602 -0
  5. package/package.json +9 -5
package/README.md CHANGED
@@ -44,6 +44,58 @@ define. Classes don't reach into a shadow root: in a Lit component, add the shee
44
44
  (`import typography from "@lit-material/tokens/css/typography.css?inline"` with Vite, then
45
45
  `unsafeCSS(typography)`).
46
46
 
47
+ ## Figma
48
+
49
+ `figma/tokens.light.json` and `figma/tokens.dark.json` hold the same tokens as the CSS, in the
50
+ [W3C Design Tokens Community Group](https://www.designtokens.org/) (DTCG) format: nested groups
51
+ (`md.sys.color.primary` for `--md-sys-color-primary`) of `$type` / `$value` tokens. They're generated
52
+ from `src/css` by `node tools/figma-tokens.mjs` (CI fails when they're stale), and published with the
53
+ package (`@lit-material/tokens/figma/tokens.light.json`), or download them from the repository.
54
+
55
+ **One file per mode.** The colors written `light-dark(light, dark)` in CSS are split: the light value
56
+ goes in `tokens.light.json`, the dark one in `tokens.dark.json`. Every other token is identical in both.
57
+ This is the shape both importers want: Figma's Variables import creates one mode per file it's given
58
+ (and only for tokens present, with the same type, in every file), and Tokens Studio treats each file as
59
+ a token set you can switch between with a theme. A single file with per-mode `$extensions` would need
60
+ a plugin-specific convention neither reads.
61
+
62
+ ### Figma Variables (native import)
63
+
64
+ 1. In a Figma Design file, open the **Local variables** panel and choose **Import**.
65
+ 2. Select both files. Figma creates a collection with a **light** and a **dark** mode (rename them if
66
+ the names come from the files), one variable per token, grouped `md/sys/color/…`, `md/sys/shape/…`.
67
+ 3. To update later, right-click a mode and choose **Import mode** with the matching file.
68
+
69
+ Variables hold colors, numbers, strings and lengths. The composite tokens (shadows, easing curves,
70
+ typography styles) have no variable type, so Figma's importer leaves them out: use Tokens Studio for
71
+ those, or build the effect and text styles from the variables by hand.
72
+
73
+ ### Tokens Studio for Figma
74
+
75
+ 1. Open the plugin, choose a sync provider (**Local document**, or a Git provider pointed at this
76
+ package's `figma/` folder) and set the token format to **W3C DTCG** in the settings.
77
+ 2. Create two sets, `light` and `dark`, and paste or load each file into its set.
78
+ 3. Under **Themes**, make a `Light` theme with the `light` set enabled and a `Dark` theme with `dark`.
79
+ 4. **Export to Figma** → **Variables** (both themes become modes of one collection) and **Styles**:
80
+ elevation levels become effect styles and each `md.sys.typescale.<role>.style` a text style.
81
+ (Themes are a Tokens Studio Pro feature; on the free plan, apply one set at a time.)
82
+
83
+ ### What's included
84
+
85
+ | Group | `$type` | Notes |
86
+ | --- | --- | --- |
87
+ | `md.sys.color.*` | `color` | M3 baseline scheme, hex (`#rrggbb`). |
88
+ | `md.sys.shape.corner.*` | `dimension` | px. |
89
+ | `md.sys.typescale.<role>.*` | `fontFamily`, `fontWeight`, `dimension` | `font`, `weight`, `size`, `line-height`, `tracking`. rem values are converted to px at 16px; the CSS value is kept in `$extensions["dev.lit-material"].css`, as is the full font stack (`$value` is its first family). |
90
+ | `md.sys.typescale.<role>.style` | `typography` | Aliases to the five tokens above; no CSS property of its own. |
91
+ | `md.sys.elevation.level0`–`5` | `shadow` | Layers with `#rrggbbaa` colors; `level0` (`none`) is an empty list. |
92
+ | `md.sys.state.*` | `number` | State-layer and disabled opacities. |
93
+ | `md.sys.motion.easing.*`, `.duration.*` | `cubicBezier`, `duration` | |
94
+
95
+ A token whose CSS value is `var(--md-sys-…)` becomes a DTCG alias (`{md.sys.…}`). Only the tokens the
96
+ CSS declares are exported: the type scale is the subset the components use (the other roles exist only as
97
+ fallbacks in `typography.css`). These are tokens only: there are no component symbols or a Figma kit yet.
98
+
47
99
  ## License
48
100
 
49
101
  MIT
package/dist/sbom.cdx.json ADDED
@@ -0,0 +1,65 @@
1
+ {
2
+ "$schema": "http://cyclonedx.org/schema/bom-1.7.schema.json",
3
+ "bomFormat": "CycloneDX",
4
+ "specVersion": "1.7",
5
+ "serialNumber": "urn:uuid:9d849b7a-3825-4719-b6b5-68c9007d0abb",
6
+ "version": 1,
7
+ "metadata": {
8
+ "timestamp": "2026-11-04T17:55:36.891Z",
9
+ "lifecycles": [
10
+ {
11
+ "phase": "pre-build"
12
+ }
13
+ ],
14
+ "tools": {
15
+ "components": [
16
+ {
17
+ "type": "application",
18
+ "name": "pnpm",
19
+ "version": "11.10.0"
20
+ }
21
+ ]
22
+ },
23
+ "component": {
24
+ "type": "library",
25
+ "name": "tokens",
26
+ "version": "1.0.0",
27
+ "purl": "pkg:npm/%40lit-material/tokens@1.0.0",
28
+ "bom-ref": "pkg:npm/%40lit-material/tokens@1.0.0",
29
+ "group": "@lit-material",
30
+ "authors": [
31
+ {
32
+ "name": "bohdaq"
33
+ }
34
+ ],
35
+ "licenses": [
36
+ {
37
+ "license": {
38
+ "id": "MIT"
39
+ }
40
+ }
41
+ ],
42
+ "description": "Material Design 3 design tokens (color, type, shape, elevation, motion) for lit-material components.",
43
+ "externalReferences": [
44
+ {
45
+ "type": "vcs",
46
+ "url": "git+ssh://git@github.com/bohdaq/lit-material.git"
47
+ },
48
+ {
49
+ "type": "issue-tracker",
50
+ "url": "https://github.com/bohdaq/lit-material/issues"
51
+ }
52
+ ]
53
+ },
54
+ "supplier": {
55
+ "name": "lit-material"
56
+ }
57
+ },
58
+ "components": [],
59
+ "dependencies": [
60
+ {
61
+ "ref": "pkg:npm/%40lit-material/tokens@1.0.0",
62
+ "dependsOn": []
63
+ }
64
+ ]
65
+ }
package/figma/tokens.dark.json ADDED
@@ -0,0 +1,602 @@
1
+ {
2
+ "md": {
3
+ "sys": {
4
+ "color": {
5
+ "primary": {
6
+ "$type": "color",
7
+ "$value": "#d0bcff"
8
+ },
9
+ "on-primary": {
10
+ "$type": "color",
11
+ "$value": "#381e72"
12
+ },
13
+ "primary-container": {
14
+ "$type": "color",
15
+ "$value": "#4f378b"
16
+ },
17
+ "on-primary-container": {
18
+ "$type": "color",
19
+ "$value": "#eaddff"
20
+ },
21
+ "secondary": {
22
+ "$type": "color",
23
+ "$value": "#ccc2dc"
24
+ },
25
+ "on-secondary": {
26
+ "$type": "color",
27
+ "$value": "#332d41"
28
+ },
29
+ "secondary-container": {
30
+ "$type": "color",
31
+ "$value": "#4a4458"
32
+ },
33
+ "on-secondary-container": {
34
+ "$type": "color",
35
+ "$value": "#e8def8"
36
+ },
37
+ "tertiary": {
38
+ "$type": "color",
39
+ "$value": "#efb8c8"
40
+ },
41
+ "on-tertiary": {
42
+ "$type": "color",
43
+ "$value": "#492532"
44
+ },
45
+ "tertiary-container": {
46
+ "$type": "color",
47
+ "$value": "#633b48"
48
+ },
49
+ "on-tertiary-container": {
50
+ "$type": "color",
51
+ "$value": "#ffd8e4"
52
+ },
53
+ "error": {
54
+ "$type": "color",
55
+ "$value": "#f2b8b5"
56
+ },
57
+ "on-error": {
58
+ "$type": "color",
59
+ "$value": "#601410"
60
+ },
61
+ "error-container": {
62
+ "$type": "color",
63
+ "$value": "#8c1d18"
64
+ },
65
+ "on-error-container": {
66
+ "$type": "color",
67
+ "$value": "#f9dedc"
68
+ },
69
+ "background": {
70
+ "$type": "color",
71
+ "$value": "#1c1b1f"
72
+ },
73
+ "on-background": {
74
+ "$type": "color",
75
+ "$value": "#e6e1e5"
76
+ },
77
+ "surface": {
78
+ "$type": "color",
79
+ "$value": "#1c1b1f"
80
+ },
81
+ "on-surface": {
82
+ "$type": "color",
83
+ "$value": "#e6e1e5"
84
+ },
85
+ "surface-variant": {
86
+ "$type": "color",
87
+ "$value": "#49454f"
88
+ },
89
+ "on-surface-variant": {
90
+ "$type": "color",
91
+ "$value": "#cac4d0"
92
+ },
93
+ "surface-container-lowest": {
94
+ "$type": "color",
95
+ "$value": "#0f0d13"
96
+ },
97
+ "surface-container-low": {
98
+ "$type": "color",
99
+ "$value": "#1d1b20"
100
+ },
101
+ "surface-container": {
102
+ "$type": "color",
103
+ "$value": "#211f26"
104
+ },
105
+ "surface-container-high": {
106
+ "$type": "color",
107
+ "$value": "#2b2930"
108
+ },
109
+ "surface-container-highest": {
110
+ "$type": "color",
111
+ "$value": "#36343b"
112
+ },
113
+ "outline": {
114
+ "$type": "color",
115
+ "$value": "#938f99"
116
+ },
117
+ "outline-variant": {
118
+ "$type": "color",
119
+ "$value": "#444746"
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": "#e6e1e5"
132
+ },
133
+ "inverse-on-surface": {
134
+ "$type": "color",
135
+ "$value": "#313033"
136
+ },
137
+ "inverse-primary": {
138
+ "$type": "color",
139
+ "$value": "#6750a4"
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/figma/tokens.light.json ADDED
@@ -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.1.0",
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
  }