@lit-material/tokens 0.0.2 → 0.1.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 (3) hide show
  1. package/README.md +21 -0
  2. package/package.json +1 -1
  3. package/src/css/typography.css +256 -0
package/README.md CHANGED
@@ -23,6 +23,27 @@ Dark mode follows `prefers-color-scheme` automatically (via CSS `light-dark()`).
23
23
  a scheme regardless of OS preference, set `color-scheme="light"` or `color-scheme="dark"`
24
24
  on `<html>` or any ancestor element.
25
25
 
26
+ ## Typography (opt-in)
27
+
28
+ `css/typography.css` styles plain HTML on the M3 type scale. It's not part of `index.css`.
29
+
30
+ ```html
31
+ <link rel="stylesheet" href="node_modules/@lit-material/tokens/css/typography.css" />
32
+
33
+ <h2 class="md-typescale-title-large">A level-2 heading at title size</h2>
34
+ <article class="lit-material-content">…Markdown output…</article>
35
+ ```
36
+
37
+ - `.md-typescale-<role>-<size>`: one M3 text style (`display`, `headline`, `title`, `body`,
38
+ `label` × `large`, `medium`, `small`), so a heading's level and its size are separate.
39
+ - `.lit-material-content`: headings, paragraphs, lists, definition lists, quotes, code, rules and
40
+ links inside it get M3 styles and spacing.
41
+
42
+ Values come from the `--md-sys-typescale-*` tokens, with M3's baseline for roles the tokens don't
43
+ define. Classes don't reach into a shadow root: in a Lit component, add the sheet to its styles
44
+ (`import typography from "@lit-material/tokens/css/typography.css?inline"` with Vite, then
45
+ `unsafeCSS(typography)`).
46
+
26
47
  ## License
27
48
 
28
49
  MIT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lit-material/tokens",
3
- "version": "0.0.2",
3
+ "version": "0.1.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": {
package/src/css/typography.css ADDED
@@ -0,0 +1,256 @@
1
+ /*
2
+ * Opt-in typography for plain HTML, on the M3 type scale. Not part of
3
+ * index.css: import it where you want it.
4
+ *
5
+ * .md-typescale-<role>-<size> one M3 text style (display, headline, title,
6
+ * body, label × large, medium, small), so a
7
+ * heading's level and its size are separate:
8
+ * <h2 class="md-typescale-title-large">.
9
+ * .lit-material-content prose: headings, paragraphs, lists,
10
+ * definition lists, quotes, code, rules and
11
+ * links inside it get M3 styles and spacing.
12
+ *
13
+ * Values come from the --md-sys-typescale-* tokens, with M3's baseline as the
14
+ * fallback for any role the tokens don't define.
15
+ */
16
+
17
+ .md-typescale-display-large {
18
+ font-family: var(--md-sys-typescale-display-large-font, Roboto, system-ui, sans-serif);
19
+ font-size: var(--md-sys-typescale-display-large-size, 3.5625rem);
20
+ font-weight: var(--md-sys-typescale-display-large-weight, 400);
21
+ line-height: var(--md-sys-typescale-display-large-line-height, 4rem);
22
+ letter-spacing: var(--md-sys-typescale-display-large-tracking, -0.015625rem);
23
+ }
24
+
25
+ .md-typescale-display-medium {
26
+ font-family: var(--md-sys-typescale-display-medium-font, Roboto, system-ui, sans-serif);
27
+ font-size: var(--md-sys-typescale-display-medium-size, 2.8125rem);
28
+ font-weight: var(--md-sys-typescale-display-medium-weight, 400);
29
+ line-height: var(--md-sys-typescale-display-medium-line-height, 3.25rem);
30
+ letter-spacing: var(--md-sys-typescale-display-medium-tracking, 0rem);
31
+ }
32
+
33
+ .md-typescale-display-small {
34
+ font-family: var(--md-sys-typescale-display-small-font, Roboto, system-ui, sans-serif);
35
+ font-size: var(--md-sys-typescale-display-small-size, 2.25rem);
36
+ font-weight: var(--md-sys-typescale-display-small-weight, 400);
37
+ line-height: var(--md-sys-typescale-display-small-line-height, 2.75rem);
38
+ letter-spacing: var(--md-sys-typescale-display-small-tracking, 0rem);
39
+ }
40
+
41
+ .md-typescale-headline-large {
42
+ font-family: var(--md-sys-typescale-headline-large-font, Roboto, system-ui, sans-serif);
43
+ font-size: var(--md-sys-typescale-headline-large-size, 2rem);
44
+ font-weight: var(--md-sys-typescale-headline-large-weight, 400);
45
+ line-height: var(--md-sys-typescale-headline-large-line-height, 2.5rem);
46
+ letter-spacing: var(--md-sys-typescale-headline-large-tracking, 0rem);
47
+ }
48
+
49
+ .md-typescale-headline-medium {
50
+ font-family: var(--md-sys-typescale-headline-medium-font, Roboto, system-ui, sans-serif);
51
+ font-size: var(--md-sys-typescale-headline-medium-size, 1.75rem);
52
+ font-weight: var(--md-sys-typescale-headline-medium-weight, 400);
53
+ line-height: var(--md-sys-typescale-headline-medium-line-height, 2.25rem);
54
+ letter-spacing: var(--md-sys-typescale-headline-medium-tracking, 0rem);
55
+ }
56
+
57
+ .md-typescale-headline-small {
58
+ font-family: var(--md-sys-typescale-headline-small-font, Roboto, system-ui, sans-serif);
59
+ font-size: var(--md-sys-typescale-headline-small-size, 1.5rem);
60
+ font-weight: var(--md-sys-typescale-headline-small-weight, 400);
61
+ line-height: var(--md-sys-typescale-headline-small-line-height, 2rem);
62
+ letter-spacing: var(--md-sys-typescale-headline-small-tracking, 0rem);
63
+ }
64
+
65
+ .md-typescale-title-large {
66
+ font-family: var(--md-sys-typescale-title-large-font, Roboto, system-ui, sans-serif);
67
+ font-size: var(--md-sys-typescale-title-large-size, 1.375rem);
68
+ font-weight: var(--md-sys-typescale-title-large-weight, 400);
69
+ line-height: var(--md-sys-typescale-title-large-line-height, 1.75rem);
70
+ letter-spacing: var(--md-sys-typescale-title-large-tracking, 0rem);
71
+ }
72
+
73
+ .md-typescale-title-medium {
74
+ font-family: var(--md-sys-typescale-title-medium-font, Roboto, system-ui, sans-serif);
75
+ font-size: var(--md-sys-typescale-title-medium-size, 1rem);
76
+ font-weight: var(--md-sys-typescale-title-medium-weight, 500);
77
+ line-height: var(--md-sys-typescale-title-medium-line-height, 1.5rem);
78
+ letter-spacing: var(--md-sys-typescale-title-medium-tracking, 0.009375rem);
79
+ }
80
+
81
+ .md-typescale-title-small {
82
+ font-family: var(--md-sys-typescale-title-small-font, Roboto, system-ui, sans-serif);
83
+ font-size: var(--md-sys-typescale-title-small-size, 0.875rem);
84
+ font-weight: var(--md-sys-typescale-title-small-weight, 500);
85
+ line-height: var(--md-sys-typescale-title-small-line-height, 1.25rem);
86
+ letter-spacing: var(--md-sys-typescale-title-small-tracking, 0.00625rem);
87
+ }
88
+
89
+ .md-typescale-body-large {
90
+ font-family: var(--md-sys-typescale-body-large-font, Roboto, system-ui, sans-serif);
91
+ font-size: var(--md-sys-typescale-body-large-size, 1rem);
92
+ font-weight: var(--md-sys-typescale-body-large-weight, 400);
93
+ line-height: var(--md-sys-typescale-body-large-line-height, 1.5rem);
94
+ letter-spacing: var(--md-sys-typescale-body-large-tracking, 0.03125rem);
95
+ }
96
+
97
+ .md-typescale-body-medium {
98
+ font-family: var(--md-sys-typescale-body-medium-font, Roboto, system-ui, sans-serif);
99
+ font-size: var(--md-sys-typescale-body-medium-size, 0.875rem);
100
+ font-weight: var(--md-sys-typescale-body-medium-weight, 400);
101
+ line-height: var(--md-sys-typescale-body-medium-line-height, 1.25rem);
102
+ letter-spacing: var(--md-sys-typescale-body-medium-tracking, 0.015625rem);
103
+ }
104
+
105
+ .md-typescale-body-small {
106
+ font-family: var(--md-sys-typescale-body-small-font, Roboto, system-ui, sans-serif);
107
+ font-size: var(--md-sys-typescale-body-small-size, 0.75rem);
108
+ font-weight: var(--md-sys-typescale-body-small-weight, 400);
109
+ line-height: var(--md-sys-typescale-body-small-line-height, 1rem);
110
+ letter-spacing: var(--md-sys-typescale-body-small-tracking, 0.025rem);
111
+ }
112
+
113
+ .md-typescale-label-large {
114
+ font-family: var(--md-sys-typescale-label-large-font, Roboto, system-ui, sans-serif);
115
+ font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
116
+ font-weight: var(--md-sys-typescale-label-large-weight, 500);
117
+ line-height: var(--md-sys-typescale-label-large-line-height, 1.25rem);
118
+ letter-spacing: var(--md-sys-typescale-label-large-tracking, 0.00625rem);
119
+ }
120
+
121
+ .md-typescale-label-medium {
122
+ font-family: var(--md-sys-typescale-label-medium-font, Roboto, system-ui, sans-serif);
123
+ font-size: var(--md-sys-typescale-label-medium-size, 0.75rem);
124
+ font-weight: var(--md-sys-typescale-label-medium-weight, 500);
125
+ line-height: var(--md-sys-typescale-label-medium-line-height, 1rem);
126
+ letter-spacing: var(--md-sys-typescale-label-medium-tracking, 0.03125rem);
127
+ }
128
+
129
+ .md-typescale-label-small {
130
+ font-family: var(--md-sys-typescale-label-small-font, Roboto, system-ui, sans-serif);
131
+ font-size: var(--md-sys-typescale-label-small-size, 0.6875rem);
132
+ font-weight: var(--md-sys-typescale-label-small-weight, 500);
133
+ line-height: var(--md-sys-typescale-label-small-line-height, 1rem);
134
+ letter-spacing: var(--md-sys-typescale-label-small-tracking, 0.03125rem);
135
+ }
136
+
137
+ .lit-material-content {
138
+ font-family: var(--md-sys-typescale-body-large-font, Roboto, system-ui, sans-serif);
139
+ font-size: var(--md-sys-typescale-body-large-size, 1rem);
140
+ font-weight: var(--md-sys-typescale-body-large-weight, 400);
141
+ line-height: var(--md-sys-typescale-body-large-line-height, 1.5rem);
142
+ letter-spacing: var(--md-sys-typescale-body-large-tracking, 0.03125rem);
143
+ color: var(--md-sys-color-on-surface, light-dark(#1d1b20, #e6e0e9));
144
+ }
145
+
146
+ .lit-material-content h1 {
147
+ font-family: var(--md-sys-typescale-headline-large-font, Roboto, system-ui, sans-serif);
148
+ font-size: var(--md-sys-typescale-headline-large-size, 2rem);
149
+ font-weight: var(--md-sys-typescale-headline-large-weight, 400);
150
+ line-height: var(--md-sys-typescale-headline-large-line-height, 2.5rem);
151
+ letter-spacing: var(--md-sys-typescale-headline-large-tracking, 0rem);
152
+ margin: 1.5em 0 0.5em;
153
+ }
154
+
155
+ .lit-material-content h2 {
156
+ font-family: var(--md-sys-typescale-headline-small-font, Roboto, system-ui, sans-serif);
157
+ font-size: var(--md-sys-typescale-headline-small-size, 1.5rem);
158
+ font-weight: var(--md-sys-typescale-headline-small-weight, 400);
159
+ line-height: var(--md-sys-typescale-headline-small-line-height, 2rem);
160
+ letter-spacing: var(--md-sys-typescale-headline-small-tracking, 0rem);
161
+ margin: 1.5em 0 0.5em;
162
+ }
163
+
164
+ .lit-material-content h3 {
165
+ font-family: var(--md-sys-typescale-title-large-font, Roboto, system-ui, sans-serif);
166
+ font-size: var(--md-sys-typescale-title-large-size, 1.375rem);
167
+ font-weight: var(--md-sys-typescale-title-large-weight, 400);
168
+ line-height: var(--md-sys-typescale-title-large-line-height, 1.75rem);
169
+ letter-spacing: var(--md-sys-typescale-title-large-tracking, 0rem);
170
+ margin: 1.5em 0 0.5em;
171
+ }
172
+
173
+ .lit-material-content h4 {
174
+ font-family: var(--md-sys-typescale-title-medium-font, Roboto, system-ui, sans-serif);
175
+ font-size: var(--md-sys-typescale-title-medium-size, 1rem);
176
+ font-weight: var(--md-sys-typescale-title-medium-weight, 500);
177
+ line-height: var(--md-sys-typescale-title-medium-line-height, 1.5rem);
178
+ letter-spacing: var(--md-sys-typescale-title-medium-tracking, 0.009375rem);
179
+ margin: 1.5em 0 0.5em;
180
+ }
181
+
182
+ .lit-material-content h5 {
183
+ font-family: var(--md-sys-typescale-title-small-font, Roboto, system-ui, sans-serif);
184
+ font-size: var(--md-sys-typescale-title-small-size, 0.875rem);
185
+ font-weight: var(--md-sys-typescale-title-small-weight, 500);
186
+ line-height: var(--md-sys-typescale-title-small-line-height, 1.25rem);
187
+ letter-spacing: var(--md-sys-typescale-title-small-tracking, 0.00625rem);
188
+ margin: 1.5em 0 0.5em;
189
+ }
190
+
191
+ .lit-material-content h6 {
192
+ font-family: var(--md-sys-typescale-label-large-font, Roboto, system-ui, sans-serif);
193
+ font-size: var(--md-sys-typescale-label-large-size, 0.875rem);
194
+ font-weight: var(--md-sys-typescale-label-large-weight, 500);
195
+ line-height: var(--md-sys-typescale-label-large-line-height, 1.25rem);
196
+ letter-spacing: var(--md-sys-typescale-label-large-tracking, 0.00625rem);
197
+ margin: 1.5em 0 0.5em;
198
+ }
199
+
200
+ .lit-material-content :is(h1, h2, h3, h4, h5, h6):first-child {
201
+ margin-top: 0;
202
+ }
203
+ .lit-material-content :is(p, ul, ol, dl, blockquote, pre, table) {
204
+ margin: 0 0 1em;
205
+ }
206
+ .lit-material-content :is(ul, ol) {
207
+ padding-inline-start: 1.5em;
208
+ }
209
+ .lit-material-content li + li {
210
+ margin-top: 0.25em;
211
+ }
212
+ .lit-material-content dt {
213
+ font-weight: 500;
214
+ }
215
+ .lit-material-content dd {
216
+ margin: 0 0 0.5em;
217
+ margin-inline-start: 1.5em;
218
+ }
219
+ .lit-material-content blockquote {
220
+ padding-inline-start: 1em;
221
+ border-inline-start: 3px solid var(--md-sys-color-outline-variant, light-dark(#cac4d0, #49454f));
222
+ color: var(--md-sys-color-on-surface-variant, light-dark(#49454f, #cac4d0));
223
+ }
224
+ .lit-material-content :is(code, kbd, samp) {
225
+ padding: 0.1em 0.3em;
226
+ border-radius: var(--md-sys-shape-corner-extra-small, 4px);
227
+ background: var(--md-sys-color-surface-container-high, light-dark(#ece6f0, #2b2930));
228
+ font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
229
+ font-size: 0.9em;
230
+ }
231
+ .lit-material-content pre {
232
+ overflow-x: auto;
233
+ padding: 0.75em 1em;
234
+ border-radius: var(--md-sys-shape-corner-small, 8px);
235
+ background: var(--md-sys-color-surface-container-high, light-dark(#ece6f0, #2b2930));
236
+ }
237
+ .lit-material-content pre code {
238
+ padding: 0;
239
+ background: none;
240
+ }
241
+ .lit-material-content a {
242
+ color: var(--md-sys-color-primary, light-dark(#6750a4, #d0bcff));
243
+ text-underline-offset: 0.15em;
244
+ }
245
+ .lit-material-content hr {
246
+ margin: 1.5em 0;
247
+ border: 0;
248
+ border-top: 1px solid var(--md-sys-color-outline-variant, light-dark(#cac4d0, #49454f));
249
+ }
250
+ .lit-material-content small {
251
+ font-family: var(--md-sys-typescale-body-small-font, Roboto, system-ui, sans-serif);
252
+ font-size: var(--md-sys-typescale-body-small-size, 0.75rem);
253
+ font-weight: var(--md-sys-typescale-body-small-weight, 400);
254
+ line-height: var(--md-sys-typescale-body-small-line-height, 1rem);
255
+ letter-spacing: var(--md-sys-typescale-body-small-tracking, 0.025rem);
256
+ }