@motion-proto/live-tokens 0.91.2 → 0.92.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 (46) hide show
  1. package/.claude/skills/live-tokens-create-page/SKILL.md +10 -3
  2. package/.claude/skills/live-tokens-set-type/SKILL.md +3 -3
  3. package/CHANGELOG.md +140 -0
  4. package/bin/lib/tokenVocabulary.mjs +2 -2
  5. package/bin/rules/testRuns.mjs +1 -1
  6. package/bin/rules/tokens.mjs +3 -3
  7. package/dist-plugin/chunk-JOSSYGR2.js +1634 -0
  8. package/dist-plugin/index.cjs +932 -15
  9. package/dist-plugin/index.js +1 -1
  10. package/dist-plugin/setType/index.cjs +23 -2
  11. package/dist-plugin/setType/index.js +23 -2
  12. package/dist-plugin/tokensCssMigrations/index.cjs +936 -15
  13. package/dist-plugin/tokensCssMigrations/index.d.cts +23 -3
  14. package/dist-plugin/tokensCssMigrations/index.d.ts +23 -3
  15. package/dist-plugin/tokensCssMigrations/index.js +5 -1
  16. package/package.json +1 -1
  17. package/src/app/site.css +243 -9
  18. package/src/demo/TestingLoops.svelte +9 -9
  19. package/src/editor/core/fonts/weightCoverage.ts +31 -2
  20. package/src/editor/core/palettes/tokenRegistry.ts +36 -37
  21. package/src/editor/core/themes/parsers/mediaBlocks.ts +46 -0
  22. package/src/editor/core/typeScale/typeScale.ts +341 -0
  23. package/src/editor/skill-atlas/SourcePane.svelte +3 -3
  24. package/src/editor/skill-atlas/skillSources.generated.ts +2 -2
  25. package/src/editor/skill-atlas/trees/create-page.ts +14 -14
  26. package/src/editor/skill-atlas/trees/set-type.ts +2 -2
  27. package/src/editor/ui/UIFontFamilySelector.svelte +5 -1
  28. package/src/editor/ui/UIFontWeightSelector.svelte +4 -0
  29. package/src/editor/ui/UILetterSpacingSelector.svelte +4 -0
  30. package/src/editor/ui/UILineHeightSelector.svelte +4 -0
  31. package/src/editor/ui/UITextTransformSelector.svelte +4 -0
  32. package/src/editor/ui/UIVariantSelector.svelte +6 -8
  33. package/src/editor/ui/VariablesTab.svelte +4 -4
  34. package/src/editor/ui/sections/textStyles.ts +44 -92
  35. package/src/editor/ui/text-styles/ControlBody.svelte +100 -0
  36. package/src/editor/ui/text-styles/ResetIcon.svelte +60 -0
  37. package/src/editor/ui/text-styles/StepRow.svelte +330 -0
  38. package/src/editor/ui/text-styles/StyleControl.svelte +128 -0
  39. package/src/editor/ui/text-styles/TextStylesSection.svelte +551 -0
  40. package/src/editor/ui/text-styles/textStyleEdits.ts +308 -0
  41. package/src/editor/ui/variantScales.ts +16 -0
  42. package/src/system/styles/tokens.css +412 -48
  43. package/src/testing-js/page-compliance.contract.js +233 -80
  44. package/src/testing-js/page-compliance.contract.js.map +1 -1
  45. package/dist-plugin/chunk-GWMEYBZ2.js +0 -715
  46. package/src/editor/ui/TextStylesSection.svelte +0 -171
@@ -0,0 +1,1634 @@
1
+ import {
2
+ hexToOklch,
3
+ oklchToCss
4
+ } from "./chunk-7TQQTHI6.js";
5
+
6
+ // src/editor/core/themes/parsers/globalRootBlock.ts
7
+ function extractGlobalRootBody(source) {
8
+ const re = /:global\(:root\)\s*\{([^}]*)\}/g;
9
+ const bodies = [];
10
+ let m;
11
+ while ((m = re.exec(source)) !== null) {
12
+ bodies.push(m[1]);
13
+ }
14
+ return bodies.join("\n");
15
+ }
16
+
17
+ // src/editor/core/themes/parsers/mediaBlocks.ts
18
+ function stripMediaBlocks(css) {
19
+ const kept = [];
20
+ let from = 0;
21
+ let i = 0;
22
+ while (i < css.length) {
23
+ if (css.startsWith("/*", i)) {
24
+ i = commentEnd(css, i);
25
+ } else if (css[i] === "@" && /^@media\b/i.test(css.slice(i, i + 7))) {
26
+ kept.push(css.slice(from, i));
27
+ i = from = blockEnd(css, i);
28
+ } else {
29
+ i++;
30
+ }
31
+ }
32
+ kept.push(css.slice(from));
33
+ return kept.join("");
34
+ }
35
+ function commentEnd(css, start) {
36
+ const end = css.indexOf("*/", start + 2);
37
+ return end === -1 ? css.length : end + 2;
38
+ }
39
+ function blockEnd(css, start) {
40
+ let depth = 0;
41
+ let i = start;
42
+ while (i < css.length) {
43
+ if (css.startsWith("/*", i)) {
44
+ i = commentEnd(css, i);
45
+ continue;
46
+ }
47
+ const c = css[i++];
48
+ if (c === "{") depth++;
49
+ else if (c === "}" && --depth === 0) return i;
50
+ }
51
+ return css.length;
52
+ }
53
+
54
+ // vite-plugin/tokensCssMigrations/cssTokenOps.ts
55
+ var DECL_RE = /(^|[\s;{])(--[a-z0-9-]+)\s*:/gi;
56
+ var REF_RE = /var\(\s*(--[a-z0-9-]+)/gi;
57
+ var DECL_VALUE_RE = /(^|[\s;{])(--[a-z0-9-]+)\s*:([^;}]*)/gi;
58
+ function collectDefinedTokens(css) {
59
+ const out = /* @__PURE__ */ new Set();
60
+ for (const m of css.matchAll(DECL_RE)) out.add(m[2]);
61
+ return out;
62
+ }
63
+ function collectTokenValues(css) {
64
+ const out = /* @__PURE__ */ new Map();
65
+ for (const m of stripMediaBlocks(css).matchAll(DECL_VALUE_RE)) out.set(m[2], m[3].trim());
66
+ return out;
67
+ }
68
+ function collectReferencedTokens(css) {
69
+ const out = /* @__PURE__ */ new Set();
70
+ for (const m of css.matchAll(REF_RE)) out.add(m[1]);
71
+ return out;
72
+ }
73
+ function ensureScale(css, opts) {
74
+ const defined = collectDefinedTokens(css);
75
+ const missing = opts.entries.filter((e) => !defined.has(e.name));
76
+ if (missing.length === 0) return css;
77
+ const lines = css.split("\n");
78
+ const { indent, insertAfter } = findInsertionPoint(lines, opts.anchorPrefixes ?? []);
79
+ const block = [];
80
+ if (opts.sectionComment) block.push(`${indent}/* ${opts.sectionComment} */`);
81
+ for (const e of missing) block.push(`${indent}${e.name}: ${e.value};`);
82
+ lines.splice(insertAfter + 1, 0, ...block);
83
+ return lines.join("\n");
84
+ }
85
+ function renameToken(css, oldName, newName) {
86
+ const defined = collectDefinedTokens(css);
87
+ if (!defined.has(oldName) || defined.has(newName)) return css;
88
+ const re = new RegExp(escapeRe(oldName) + "(?![a-z0-9-])", "gi");
89
+ return css.replace(re, newName);
90
+ }
91
+ function removeToken(css, name) {
92
+ const lines = css.split("\n");
93
+ const declRe = new RegExp("(^|[\\s;{])" + escapeRe(name) + "\\s*:");
94
+ const kept = lines.filter((line) => !declRe.test(line));
95
+ if (kept.length === lines.length) return css;
96
+ return kept.join("\n");
97
+ }
98
+ function removeTokensMatching(css, predicate) {
99
+ const lines = css.split("\n");
100
+ const declRe = /^\s*(--[a-z0-9-]+)\s*:/;
101
+ const kept = lines.filter((line) => {
102
+ const m = line.match(declRe);
103
+ return !(m && predicate(m[1]));
104
+ });
105
+ if (kept.length === lines.length) return css;
106
+ return kept.join("\n");
107
+ }
108
+ function setTokenValue(css, name, value, opts = {}) {
109
+ const lines = css.split("\n");
110
+ const declRe = new RegExp("(^|[\\s;{])(" + escapeRe(name) + ")(\\s*:)([^;}]*)");
111
+ let changed = false;
112
+ for (const root of findTopLevelRoots(lines)) {
113
+ let depth = 1;
114
+ for (let i = root.start + 1; i < root.end; i++) {
115
+ if (depth === 1) {
116
+ const m = lines[i].match(declRe);
117
+ const current = m?.[4].trim();
118
+ if (m && current !== value && (opts.from === void 0 || current === opts.from.trim())) {
119
+ const at = m.index + m[1].length + m[2].length + m[3].length;
120
+ lines[i] = lines[i].slice(0, at) + " " + value + lines[i].slice(at + m[4].length);
121
+ changed = true;
122
+ }
123
+ }
124
+ depth += braceDelta(lines[i]);
125
+ }
126
+ }
127
+ return changed ? lines.join("\n") : css;
128
+ }
129
+ function appendMediaBlock(css, query, entries) {
130
+ const lines = css.split("\n");
131
+ const at = query.trim();
132
+ const blocks = findTopLevelBlocks(lines, (line) => mediaQueryOf(line) === at);
133
+ const declared = collectDefinedTokens(
134
+ blocks.map((b) => lines.slice(b.start, b.end + 1).join("\n")).join("\n")
135
+ );
136
+ const missing = entries.filter((e) => !declared.has(e.name));
137
+ if (missing.length === 0) return css;
138
+ const media = blocks.find((b) => b.end > b.start);
139
+ if (!media) {
140
+ const block = [`@media ${at} {`, " :root {", ...declarationLines(missing, " "), " }", "}", ""];
141
+ while (lines.length > 0 && lines[lines.length - 1].trim() === "") lines.pop();
142
+ return [...lines, "", ...block].join("\n");
143
+ }
144
+ const root = findNestedRoot(lines, media);
145
+ if (!root) {
146
+ lines.splice(media.end, 0, " :root {", ...declarationLines(missing, " "), " }");
147
+ return lines.join("\n");
148
+ }
149
+ let indent = (lines[root.end].match(/^\s*/)?.[0] ?? "") + " ";
150
+ for (let i = root.start + 1; i < root.end; i++) {
151
+ const m = lines[i].match(/^(\s*)--[a-z0-9-]+\s*:/i);
152
+ if (m) indent = m[1];
153
+ }
154
+ lines.splice(root.end, 0, ...declarationLines(missing, indent));
155
+ return lines.join("\n");
156
+ }
157
+ function declarationLines(entries, indent) {
158
+ return entries.map((e) => `${indent}${e.name}: ${e.value};`);
159
+ }
160
+ function findInsertionPoint(lines, anchorPrefixes) {
161
+ const root = findTopLevelRoot(lines);
162
+ if (!root) return { indent: " ", insertAfter: lines.length - 1 };
163
+ const lastByPrefix = /* @__PURE__ */ new Map();
164
+ let lastDecl = null;
165
+ let depth = 1;
166
+ for (let i = root.start + 1; i < root.end; i++) {
167
+ const line = lines[i];
168
+ if (depth === 1) {
169
+ const m = line.match(/^(\s*)(--[a-z0-9-]+)\s*:/);
170
+ if (m) {
171
+ const hit = { index: i, indent: m[1] || " " };
172
+ lastDecl = hit;
173
+ for (const prefix of anchorPrefixes) {
174
+ if (m[2].startsWith(prefix)) lastByPrefix.set(prefix, hit);
175
+ }
176
+ }
177
+ }
178
+ depth += braceDelta(line);
179
+ }
180
+ for (const prefix of anchorPrefixes) {
181
+ const hit = lastByPrefix.get(prefix);
182
+ if (hit) return { indent: hit.indent, insertAfter: hit.index };
183
+ }
184
+ return { indent: lastDecl?.indent ?? " ", insertAfter: root.end - 1 };
185
+ }
186
+ var ROOT_OPEN_RE = /(^|[\s,]):root[^{]*\{/;
187
+ function findTopLevelRoot(lines) {
188
+ return findTopLevelRoots(lines)[0] ?? null;
189
+ }
190
+ function findTopLevelRoots(lines) {
191
+ return findTopLevelBlocks(lines, (line) => ROOT_OPEN_RE.test(line));
192
+ }
193
+ function findTopLevelBlocks(lines, opens) {
194
+ const blocks = [];
195
+ let depth = 0;
196
+ for (let i = 0; i < lines.length; i++) {
197
+ if (depth === 0 && opens(lines[i])) {
198
+ const end = blockEnd2(lines, i);
199
+ blocks.push({ start: i, end });
200
+ i = end;
201
+ continue;
202
+ }
203
+ depth += braceDelta(lines[i]);
204
+ }
205
+ return blocks;
206
+ }
207
+ function findNestedRoot(lines, parent) {
208
+ let depth = 1;
209
+ for (let i = parent.start + 1; i < parent.end; i++) {
210
+ if (depth === 1 && ROOT_OPEN_RE.test(lines[i])) {
211
+ const end = blockEnd2(lines, i);
212
+ if (end > i && end < parent.end) return { start: i, end };
213
+ }
214
+ depth += braceDelta(lines[i]);
215
+ }
216
+ return null;
217
+ }
218
+ function blockEnd2(lines, start) {
219
+ let depth = 0;
220
+ for (let j = start; j < lines.length; j++) {
221
+ depth += braceDelta(lines[j]);
222
+ if (depth === 0) return j;
223
+ }
224
+ return lines.length - 1;
225
+ }
226
+ function mediaQueryOf(line) {
227
+ return line.match(/^\s*@media\s+([^{]*?)\s*\{/i)?.[1] ?? null;
228
+ }
229
+ function braceDelta(line) {
230
+ return (line.match(/\{/g)?.length ?? 0) - (line.match(/\}/g)?.length ?? 0);
231
+ }
232
+ function escapeRe(s) {
233
+ return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
234
+ }
235
+
236
+ // vite-plugin/tokensCssMigrations/migrations/2026-05-29-typography-scale-additions.ts
237
+ var tokensCssMigration_2026_05_29_typographyScaleAdditions = {
238
+ id: "2026-05-29-typography-scale-additions",
239
+ kind: "additive",
240
+ description: "Add --letter-spacing-* and --ease-out-quart scales",
241
+ apply(css) {
242
+ let out = css;
243
+ out = ensureScale(out, {
244
+ sectionComment: "Letter spacing",
245
+ anchorPrefixes: ["--letter-spacing-", "--line-height-", "--font-size-", "--font-"],
246
+ entries: [
247
+ { name: "--letter-spacing-tighter", value: "-0.04em" },
248
+ { name: "--letter-spacing-tight", value: "-0.02em" },
249
+ { name: "--letter-spacing-normal", value: "0" },
250
+ { name: "--letter-spacing-wide", value: "0.04em" },
251
+ { name: "--letter-spacing-wider", value: "0.08em" }
252
+ ]
253
+ });
254
+ out = ensureScale(out, {
255
+ sectionComment: "Easing",
256
+ anchorPrefixes: ["--ease-", "--transition-", "--duration-"],
257
+ entries: [{ name: "--ease-out-quart", value: "cubic-bezier(0.25, 1, 0.5, 1)" }]
258
+ });
259
+ return out;
260
+ }
261
+ };
262
+
263
+ // vite-plugin/tokensCssMigrations/migrations/2026-05-29-sectiondivider-legacy-axis-cleanup.ts
264
+ var KEEP_SEGMENTS = /* @__PURE__ */ new Set(["lg", "md", "sm"]);
265
+ var tokensCssMigration_2026_05_29_sectiondividerLegacyAxisCleanup = {
266
+ id: "2026-05-29-sectiondivider-legacy-axis-cleanup",
267
+ kind: "breaking",
268
+ description: "Remove legacy --sectiondivider-* tokens not on the lg/md/sm axis",
269
+ apply(css) {
270
+ return removeTokensMatching(css, (name) => {
271
+ if (!name.startsWith("--sectiondivider-")) return false;
272
+ const segment = name.slice("--sectiondivider-".length).split("-")[0];
273
+ return !KEEP_SEGMENTS.has(segment);
274
+ });
275
+ }
276
+ };
277
+
278
+ // vite-plugin/tokensCssMigrations/migrations/2026-06-03-transform-scale-additions.ts
279
+ var tokensCssMigration_2026_06_03_transformScaleAdditions = {
280
+ id: "2026-06-03-transform-scale-additions",
281
+ kind: "additive",
282
+ description: "Add the --scale-{sm..2xl} transform-multiplier scale",
283
+ apply(css) {
284
+ return ensureScale(css, {
285
+ sectionComment: "Transform-scale multipliers (e.g. hover zoom). 5% per step.",
286
+ anchorPrefixes: ["--blur-", "--shadow-", "--radius-"],
287
+ entries: [
288
+ { name: "--scale-sm", value: "1.05" },
289
+ { name: "--scale-md", value: "1.1" },
290
+ { name: "--scale-lg", value: "1.15" },
291
+ { name: "--scale-xl", value: "1.2" },
292
+ { name: "--scale-2xl", value: "1.25" }
293
+ ]
294
+ });
295
+ }
296
+ };
297
+
298
+ // vite-plugin/tokensCssMigrations/migrations/2026-06-04-remove-dead-size-icon-scale.ts
299
+ var tokensCssMigration_2026_06_04_removeDeadSizeIconScale = {
300
+ id: "2026-06-04-remove-dead-size-icon-scale",
301
+ kind: "breaking",
302
+ description: "Remove the unused --size-icon-* scale (live scale is --icon-size-*)",
303
+ apply(css) {
304
+ return removeTokensMatching(css, (name) => name.startsWith("--size-icon-"));
305
+ }
306
+ };
307
+
308
+ // vite-plugin/tokensCssMigrations/migrations/2026-06-04-easing-color-and-typescale-additions.ts
309
+ var tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions = {
310
+ id: "2026-06-04-easing-color-and-typescale-additions",
311
+ kind: "additive",
312
+ description: "Add the full --ease-* scale, --color-white/black, and --font-size-7xl",
313
+ apply(css) {
314
+ let out = css;
315
+ out = ensureScale(out, {
316
+ anchorPrefixes: ["--ease-", "--transition-", "--duration-"],
317
+ entries: [
318
+ { name: "--ease-linear", value: "linear" },
319
+ { name: "--ease-in-sine", value: "cubic-bezier(0.12, 0, 0.39, 0)" },
320
+ { name: "--ease-out-sine", value: "cubic-bezier(0.61, 1, 0.88, 1)" },
321
+ { name: "--ease-in-out-sine", value: "cubic-bezier(0.37, 0, 0.63, 1)" },
322
+ { name: "--ease-in-quad", value: "cubic-bezier(0.11, 0, 0.5, 0)" },
323
+ { name: "--ease-out-quad", value: "cubic-bezier(0.5, 1, 0.89, 1)" },
324
+ { name: "--ease-in-out-quad", value: "cubic-bezier(0.45, 0, 0.55, 1)" },
325
+ { name: "--ease-in-cubic", value: "cubic-bezier(0.32, 0, 0.67, 0)" },
326
+ { name: "--ease-out-cubic", value: "cubic-bezier(0.33, 1, 0.68, 1)" },
327
+ { name: "--ease-in-out-cubic", value: "cubic-bezier(0.65, 0, 0.35, 1)" },
328
+ { name: "--ease-in-quart", value: "cubic-bezier(0.5, 0, 0.75, 0)" },
329
+ { name: "--ease-out-quart", value: "cubic-bezier(0.25, 1, 0.5, 1)" },
330
+ { name: "--ease-in-out-quart", value: "cubic-bezier(0.76, 0, 0.24, 1)" },
331
+ { name: "--ease-in-quint", value: "cubic-bezier(0.64, 0, 0.78, 0)" },
332
+ { name: "--ease-out-quint", value: "cubic-bezier(0.22, 1, 0.36, 1)" },
333
+ { name: "--ease-in-out-quint", value: "cubic-bezier(0.83, 0, 0.17, 1)" },
334
+ { name: "--ease-in-expo", value: "cubic-bezier(0.7, 0, 0.84, 0)" },
335
+ { name: "--ease-out-expo", value: "cubic-bezier(0.16, 1, 0.3, 1)" },
336
+ { name: "--ease-in-out-expo", value: "cubic-bezier(0.87, 0, 0.13, 1)" },
337
+ { name: "--ease-in-circ", value: "cubic-bezier(0.55, 0, 1, 0.45)" },
338
+ { name: "--ease-out-circ", value: "cubic-bezier(0, 0.55, 0.45, 1)" },
339
+ { name: "--ease-in-out-circ", value: "cubic-bezier(0.85, 0, 0.15, 1)" },
340
+ { name: "--ease-in-back", value: "cubic-bezier(0.36, 0, 0.66, -0.56)" },
341
+ { name: "--ease-out-back", value: "cubic-bezier(0.34, 1.56, 0.64, 1)" },
342
+ { name: "--ease-in-out-back", value: "cubic-bezier(0.68, -0.6, 0.32, 1.6)" },
343
+ {
344
+ name: "--ease-in-elastic",
345
+ value: "linear(0, 0.0007 8.1%, 0.0019 12.1%, 0.0027 13.7%, 0.0046 15.7%, -0.0046 18.7%, -0.0202 22.1%, -0.0234 23.6%, -0.0224 24.9%, -0.0156 26.7%, 0.0091 29.4%, 0.0666 33.4%, 0.0848 34.9%, 0.0916 36.4%, 0.0837 38.1%, 0.0581 40.1%, -0.0204 43.7%, -0.221 51.3%, -0.2825 53.6%, -0.317 55.4%, -0.3253 57.1%, -0.3071 58.8%, -0.2554 60.9%, -0.1295 63.7%, 0.4515 73.1%, 0.7257 78.4%, 0.834 81.2%, 0.9221 84.1%, 0.9817 87.1%, 1.0144 90.4%, 1.026 94.6%, 1)"
346
+ },
347
+ {
348
+ name: "--ease-out-elastic",
349
+ value: "linear(0, 0.974 4.6%, 1.026 5.4%, 1.018 6.9%, 0.952 12.9%, 0.876 15.9%, 0.751 18.8%, 0.557 22.4%, -0.451 36.3%, -0.722 42.9%, -0.832 46.6%, -0.918 51.3%, -0.916 54.8%, -0.832 59.4%, -0.665 64.6%, 0.221 78%, 0.317 81.2%, 0.317 84.4%, 0.281 87.6%, 0.232 91.1%, 0.058 100%)"
350
+ },
351
+ {
352
+ name: "--ease-in-out-elastic",
353
+ value: "linear(0, 0.0001 7.7%, -0.0048 12.7%, -0.0064 14.6%, -0.0064 16.5%, -0.0026 18.5%, 0.0179 21.4%, 0.0617 24.1%, 0.0617 26.5%, 0.0309 29%, -0.0589 32.7%, -0.3 38.1%, -0.4307 40.6%, -0.4844 43%, -0.4844 48%, -0.4307 50.4%, -0.3 52.9%, 0.3 60.5%, 0.4307 63%, 0.4844 65.4%, 0.4844 70.4%, 0.4307 72.8%, 0.3 75.3%, 0.0589 80.7%, -0.0309 84.4%, -0.0617 86.9%, -0.0617 89.3%, -0.0179 92%, 0.0026 94.9%, 0.0064 96.8%, 0.0064 98.7%, 0.0048 100%, 1)"
354
+ },
355
+ {
356
+ name: "--ease-in-bounce",
357
+ value: "linear(0, 0.005, 0.018, 0.039, 0.069, 0.108, 0.156, 0.213, 0.281, 0.36, 0.451, 0.555, 0.674, 0.81, 0.967, 0.881, 0.838, 0.838, 0.881, 0.97, 0.952, 0.95, 0.969, 0.999, 0.984, 0.982, 0.989, 1)"
358
+ },
359
+ {
360
+ name: "--ease-out-bounce",
361
+ value: "linear(0, 0.011, 0.031, 0.018, 0.05, 0.151, 0.301, 0.5, 0.747, 0.945, 0.997, 1, 0.969, 0.954, 0.969, 0.952, 0.952, 0.969, 1, 0.984, 0.982, 0.984, 0.997, 0.984, 0.989, 1)"
362
+ },
363
+ {
364
+ name: "--ease-in-out-bounce",
365
+ value: "linear(0, 0.003, 0.009, 0.019, 0.034, 0.054, 0.078, 0.107, 0.141, 0.18, 0.226, 0.278, 0.337, 0.405, 0.483, 0.471, 0.42, 0.419, 0.46, 0.494, 0.5, 0.506, 0.54, 0.581, 0.58, 0.529, 0.517, 0.595, 0.663, 0.722, 0.774, 0.819, 0.859, 0.893, 0.922, 0.946, 0.966, 0.981, 0.991, 0.997, 1)"
366
+ }
367
+ ]
368
+ });
369
+ out = ensureScale(out, {
370
+ sectionComment: "Invariants \u2014 never themed, not part of any ramp.",
371
+ anchorPrefixes: ["--color-"],
372
+ entries: [
373
+ { name: "--color-white", value: "#ffffff" },
374
+ { name: "--color-black", value: "#000000" }
375
+ ]
376
+ });
377
+ out = ensureScale(out, {
378
+ anchorPrefixes: ["--font-size-", "--font-"],
379
+ entries: [{ name: "--font-size-7xl", value: "4.5rem" }]
380
+ });
381
+ return out;
382
+ }
383
+ };
384
+
385
+ // vite-plugin/tokensCssMigrations/migrations/2026-07-20-line-height-rename.ts
386
+ var RENAMES = [
387
+ ["--line-height-xs", "--line-height-none"],
388
+ ["--line-height-sm", "--line-height-tighter"],
389
+ ["--line-height-md", "--line-height-normal"],
390
+ ["--line-height-lg", "--line-height-relaxed"]
391
+ ];
392
+ var SCALE = [
393
+ { name: "--line-height-none", value: "1" },
394
+ { name: "--line-height-tightest", value: "1.1" },
395
+ { name: "--line-height-tighter", value: "1.25" },
396
+ { name: "--line-height-tight", value: "1.35" },
397
+ { name: "--line-height-normal", value: "1.5" },
398
+ { name: "--line-height-relaxed", value: "1.75" }
399
+ ];
400
+ var tokensCssMigration_2026_07_20_lineHeightRename = {
401
+ id: "2026-07-20-line-height-rename",
402
+ kind: "breaking",
403
+ description: "Reshape --line-height-{xs..xl} to leading vocabulary (none/tightest/tighter/tight/normal/relaxed); retire the 2.0 slot",
404
+ apply(css) {
405
+ let out = css;
406
+ for (const [oldName, newName] of RENAMES) out = renameToken(out, oldName, newName);
407
+ out = removeToken(out, "--line-height-xl");
408
+ out = ensureScale(out, {
409
+ anchorPrefixes: ["--line-height-", "--font-size-", "--font-weight-", "--font-"],
410
+ entries: SCALE
411
+ });
412
+ return out;
413
+ }
414
+ };
415
+
416
+ // vite-plugin/tokensCssMigrations/migrations/2026-07-20-semantic-text-styles.ts
417
+ var BUNDLE = [
418
+ { name: "--heading-xl-font-family", value: "var(--font-display)" },
419
+ { name: "--heading-xl-font-size", value: "var(--font-size-4xl)" },
420
+ { name: "--heading-xl-font-weight", value: "var(--font-weight-semibold)" },
421
+ { name: "--heading-xl-line-height", value: "var(--line-height-tightest)" },
422
+ { name: "--heading-xl-letter-spacing", value: "var(--letter-spacing-normal)" },
423
+ { name: "--heading-lg-font-family", value: "var(--font-display)" },
424
+ { name: "--heading-lg-font-size", value: "var(--font-size-2xl)" },
425
+ { name: "--heading-lg-font-weight", value: "var(--font-weight-semibold)" },
426
+ { name: "--heading-lg-line-height", value: "var(--line-height-tightest)" },
427
+ { name: "--heading-lg-letter-spacing", value: "var(--letter-spacing-normal)" },
428
+ { name: "--heading-md-font-family", value: "var(--font-display)" },
429
+ { name: "--heading-md-font-size", value: "var(--font-size-xl)" },
430
+ { name: "--heading-md-font-weight", value: "var(--font-weight-semibold)" },
431
+ { name: "--heading-md-line-height", value: "var(--line-height-tighter)" },
432
+ { name: "--heading-md-letter-spacing", value: "var(--letter-spacing-normal)" },
433
+ { name: "--heading-sm-font-family", value: "var(--font-sans)" },
434
+ { name: "--heading-sm-font-size", value: "var(--font-size-lg)" },
435
+ { name: "--heading-sm-font-weight", value: "var(--font-weight-semibold)" },
436
+ { name: "--heading-sm-line-height", value: "var(--line-height-tighter)" },
437
+ { name: "--heading-sm-letter-spacing", value: "var(--letter-spacing-normal)" },
438
+ { name: "--body-md-font-family", value: "var(--font-sans)" },
439
+ { name: "--body-md-font-size", value: "var(--font-size-md)" },
440
+ { name: "--body-md-font-weight", value: "var(--font-weight-normal)" },
441
+ { name: "--body-md-line-height", value: "var(--line-height-normal)" },
442
+ { name: "--body-md-letter-spacing", value: "var(--letter-spacing-normal)" },
443
+ { name: "--body-sm-font-family", value: "var(--font-sans)" },
444
+ { name: "--body-sm-font-size", value: "var(--font-size-sm)" },
445
+ { name: "--body-sm-font-weight", value: "var(--font-weight-normal)" },
446
+ { name: "--body-sm-line-height", value: "var(--line-height-tight)" },
447
+ { name: "--body-sm-letter-spacing", value: "var(--letter-spacing-normal)" },
448
+ // The code bundle's size, leading and tracking belong to 2026-10-08-type-scales,
449
+ // which renames them to `--code-md-*`. An additive migration must not re-add
450
+ // names a later breaking rename removes, or re-running the fold loses
451
+ // idempotency.
452
+ { name: "--code-font-family", value: "var(--font-mono)" },
453
+ { name: "--code-font-weight", value: "var(--font-weight-normal)" },
454
+ { name: "--eyebrow-font-family", value: "var(--font-sans)" },
455
+ { name: "--eyebrow-font-size", value: "var(--font-size-sm)" },
456
+ { name: "--eyebrow-font-weight", value: "var(--font-weight-normal)" },
457
+ { name: "--eyebrow-line-height", value: "var(--line-height-normal)" },
458
+ { name: "--eyebrow-letter-spacing", value: "var(--letter-spacing-normal)" },
459
+ { name: "--eyebrow-text-transform", value: "none" }
460
+ ];
461
+ var tokensCssMigration_2026_07_20_semanticTextStyles = {
462
+ id: "2026-07-20-semantic-text-styles",
463
+ kind: "additive",
464
+ description: "Add the semantic text-style bundles (--heading-*/--body-*/--code-*/--eyebrow-*)",
465
+ apply(css) {
466
+ return ensureScale(css, {
467
+ sectionComment: "Text styles \u2014 semantic typography roles",
468
+ anchorPrefixes: [
469
+ "--eyebrow-",
470
+ "--code-",
471
+ "--body-",
472
+ "--heading-",
473
+ "--letter-spacing-",
474
+ "--line-height-",
475
+ "--font-weight-",
476
+ "--font-size-",
477
+ "--font-"
478
+ ],
479
+ entries: BUNDLE
480
+ });
481
+ }
482
+ };
483
+
484
+ // vite-plugin/tokensCssMigrations/migrations/2026-08-19-oklch-color-values.ts
485
+ var HEX_DECLARATION_RE = /(--[a-z0-9-]+:\s*)#([0-9a-f]{6})(?=\s*[;}])/gi;
486
+ var tokensCssMigration_2026_08_19_oklchColorValues = {
487
+ id: "2026-08-19-oklch-color-values",
488
+ kind: "breaking",
489
+ description: "Rewrite hex token values as oklch()",
490
+ apply(css) {
491
+ return css.replace(HEX_DECLARATION_RE, (_match, prefix, hex) => {
492
+ const { l, c, h } = hexToOklch(`#${hex}`);
493
+ return `${prefix}${oklchToCss(l, c, h)}`;
494
+ });
495
+ }
496
+ };
497
+
498
+ // vite-plugin/tokensCssMigrations/migrations/2026-08-25-editorial-type-role.ts
499
+ var STACK = [{ name: "--font-editorial", value: "var(--font-sans)" }];
500
+ var tokensCssMigration_2026_08_25_editorialTypeRole = {
501
+ id: "2026-08-25-editorial-type-role",
502
+ kind: "additive",
503
+ description: "Add the editorial type role (--font-editorial)",
504
+ apply(css) {
505
+ return ensureScale(css, {
506
+ anchorPrefixes: ["--font-mono", "--font-serif", "--font-sans", "--font-display"],
507
+ entries: STACK
508
+ });
509
+ }
510
+ };
511
+
512
+ // vite-plugin/tokensCssMigrations/migrations/2026-08-26-gradient-stops.ts
513
+ var STOPS_RE = /^(?:linear|radial)-gradient\(\s*[^,]+,\s*(.+)\)$/i;
514
+ var tokensCssMigration_2026_08_26_gradientStops = {
515
+ id: "2026-08-26-gradient-stops",
516
+ kind: "additive",
517
+ description: "Add --gradient-N-stops companions to the gradient slots",
518
+ apply(css) {
519
+ const values = collectTokenValues(css);
520
+ const entries = [];
521
+ for (const [name, value] of values) {
522
+ if (!/^--gradient-\d+$/.test(name)) continue;
523
+ const stops = value.match(STOPS_RE);
524
+ if (stops) entries.push({ name: `${name}-stops`, value: stops[1].trim() });
525
+ }
526
+ if (entries.length === 0) return css;
527
+ return ensureScale(css, { anchorPrefixes: ["--gradient-"], entries });
528
+ }
529
+ };
530
+
531
+ // vite-plugin/tokensCssMigrations/migrations/2026-08-27-backdrop-polarity.ts
532
+ var MARKER = "[data-backdrop='dark']";
533
+ var RULES = `/* BACKDROP POLARITY \u2014 one attribute says which way a surface leans. State it
534
+ in markup (\`<section data-backdrop="dark">\`) or let \`use:backdrop\` measure
535
+ and stamp it. Either way \`light-dark()\` inside resolves the right half, and
536
+ a rule can key on the attribute for what colour alone cannot carry. */
537
+
538
+ [data-backdrop='light'] {
539
+ color-scheme: light;
540
+ }
541
+
542
+ [data-backdrop='dark'] {
543
+ color-scheme: dark;
544
+ }
545
+ `;
546
+ var tokensCssMigration_2026_08_27_backdropPolarity = {
547
+ id: "2026-08-27-backdrop-polarity",
548
+ kind: "additive",
549
+ description: "Add the [data-backdrop] \u2192 color-scheme rules",
550
+ apply(css) {
551
+ if (css.includes(MARKER)) return css;
552
+ const at = css.indexOf(":root");
553
+ if (at === -1) return `${css.trimEnd()}
554
+
555
+ ${RULES}`;
556
+ return `${css.slice(0, at)}${RULES}
557
+ ${css.slice(at)}`;
558
+ }
559
+ };
560
+
561
+ // vite-plugin/tokensCssMigrations/migrations/2026-08-27-editorial-size-steps.ts
562
+ var AXES = ["font-family", "font-size", "font-weight", "line-height", "letter-spacing"];
563
+ var BUNDLE2 = [
564
+ { name: "--editorial-md-font-family", value: "var(--font-editorial)" },
565
+ { name: "--editorial-md-font-size", value: "var(--font-size-md)" },
566
+ { name: "--editorial-md-font-weight", value: "var(--font-weight-normal)" },
567
+ { name: "--editorial-md-line-height", value: "var(--line-height-normal)" },
568
+ { name: "--editorial-md-letter-spacing", value: "var(--letter-spacing-normal)" },
569
+ { name: "--editorial-sm-font-family", value: "var(--font-editorial)" },
570
+ { name: "--editorial-sm-font-size", value: "var(--font-size-sm)" },
571
+ { name: "--editorial-sm-font-weight", value: "var(--font-weight-normal)" },
572
+ { name: "--editorial-sm-line-height", value: "var(--line-height-tight)" },
573
+ { name: "--editorial-sm-letter-spacing", value: "var(--letter-spacing-normal)" }
574
+ ];
575
+ var tokensCssMigration_2026_08_27_editorialSizeSteps = {
576
+ id: "2026-08-27-editorial-size-steps",
577
+ kind: "breaking",
578
+ description: "Split the editorial bundle into --editorial-md-* and --editorial-sm-* steps",
579
+ apply(css) {
580
+ let out = css;
581
+ for (const axis of AXES) {
582
+ out = renameToken(out, `--editorial-${axis}`, `--editorial-md-${axis}`);
583
+ }
584
+ return ensureScale(out, {
585
+ sectionComment: "Editorial \u2014 the long-reading role, body face until repointed",
586
+ anchorPrefixes: [
587
+ "--eyebrow-",
588
+ "--code-",
589
+ "--body-",
590
+ "--heading-",
591
+ "--letter-spacing-",
592
+ "--line-height-",
593
+ "--font-weight-",
594
+ "--font-size-",
595
+ "--font-"
596
+ ],
597
+ entries: BUNDLE2
598
+ });
599
+ }
600
+ };
601
+
602
+ // vite-plugin/tokensCssMigrations/migrations/2026-08-27-editorial-large-steps.ts
603
+ var BUNDLE3 = [
604
+ { name: "--editorial-xl-font-family", value: "var(--font-editorial)" },
605
+ { name: "--editorial-xl-font-size", value: "var(--font-size-xl)" },
606
+ { name: "--editorial-xl-font-weight", value: "var(--font-weight-normal)" },
607
+ { name: "--editorial-xl-line-height", value: "var(--line-height-tighter)" },
608
+ { name: "--editorial-xl-letter-spacing", value: "var(--letter-spacing-normal)" },
609
+ { name: "--editorial-lg-font-family", value: "var(--font-editorial)" },
610
+ { name: "--editorial-lg-font-size", value: "var(--font-size-lg)" },
611
+ { name: "--editorial-lg-font-weight", value: "var(--font-weight-normal)" },
612
+ { name: "--editorial-lg-line-height", value: "var(--line-height-tight)" },
613
+ { name: "--editorial-lg-letter-spacing", value: "var(--letter-spacing-normal)" }
614
+ ];
615
+ var tokensCssMigration_2026_08_27_editorialLargeSteps = {
616
+ id: "2026-08-27-editorial-large-steps",
617
+ kind: "additive",
618
+ description: "Add the --editorial-lg-* and --editorial-xl-* steps above the reading size",
619
+ apply(css) {
620
+ return ensureScale(css, {
621
+ sectionComment: "Editorial \u2014 the steps above the reading size",
622
+ anchorPrefixes: [
623
+ "--editorial-",
624
+ "--eyebrow-",
625
+ "--code-",
626
+ "--body-",
627
+ "--heading-",
628
+ "--letter-spacing-",
629
+ "--line-height-",
630
+ "--font-weight-",
631
+ "--font-size-",
632
+ "--font-"
633
+ ],
634
+ entries: BUNDLE3
635
+ });
636
+ }
637
+ };
638
+
639
+ // vite-plugin/tokensCssMigrations/migrations/2026-09-01-scrim-rename.ts
640
+ var RENAMES2 = [
641
+ ["--overlay-low", "--scrim-low"],
642
+ ["--overlay-high", "--scrim-high"],
643
+ ["--overlay", "--scrim"]
644
+ ];
645
+ var tokensCssMigration_2026_09_01_scrimRename = {
646
+ id: "2026-09-01-scrim-rename",
647
+ kind: "breaking",
648
+ description: "Rename --overlay-{low,base,high} to --scrim-*; a scrim dims what is behind it",
649
+ apply(css) {
650
+ let out = css;
651
+ for (const [oldName, newName] of RENAMES2) out = renameToken(out, oldName, newName);
652
+ return out;
653
+ }
654
+ };
655
+
656
+ // vite-plugin/tokensCssMigrations/migrations/2026-09-01-tint-scale.ts
657
+ var ENTRIES = [
658
+ { name: "--tint-low", value: "rgba(255, 255, 255, 0.05)" },
659
+ { name: "--tint", value: "rgba(255, 255, 255, 0.1)" },
660
+ { name: "--tint-high", value: "rgba(255, 255, 255, 0.15)" }
661
+ ];
662
+ var tokensCssMigration_2026_09_01_tintScale = {
663
+ id: "2026-09-01-tint-scale",
664
+ kind: "additive",
665
+ description: "Add the --tint-* scale; a tint shades the surface it sits on",
666
+ apply(css) {
667
+ return ensureScale(css, {
668
+ entries: ENTRIES,
669
+ sectionComment: "Tints \u2014 translucent washes that shade the surface they sit on",
670
+ anchorPrefixes: ["--scrim", "--overlay"]
671
+ });
672
+ }
673
+ };
674
+
675
+ // vite-plugin/tokensCssMigrations/migrations/2026-09-20-scrim-color-and-opacity.ts
676
+ var ENTRIES2 = [
677
+ { name: "--scrim-color", value: "rgb(20, 3, 0)" },
678
+ { name: "--scrim-opacity-low", value: "0.38" },
679
+ { name: "--scrim-opacity", value: "0.51" },
680
+ { name: "--scrim-opacity-high", value: "0.64" }
681
+ ];
682
+ var tokensCssMigration_2026_09_20_scrimColorAndOpacity = {
683
+ id: "2026-09-20-scrim-color-and-opacity",
684
+ kind: "additive",
685
+ description: "Add --scrim-color and --scrim-opacity-*; a scrim's colour and strength are separate tokens",
686
+ apply(css) {
687
+ return ensureScale(css, {
688
+ entries: ENTRIES2,
689
+ sectionComment: "Scrim colour and strength, which each screen mixes where it paints",
690
+ anchorPrefixes: ["--scrim"]
691
+ });
692
+ }
693
+ };
694
+
695
+ // vite-plugin/tokensCssMigrations/migrations/2026-09-21-tint-color-and-opacity.ts
696
+ var ENTRIES3 = [
697
+ { name: "--tint-color", value: "rgb(255, 255, 255)" },
698
+ { name: "--tint-opacity-low", value: "0.05" },
699
+ { name: "--tint-opacity", value: "0.1" },
700
+ { name: "--tint-opacity-high", value: "0.15" }
701
+ ];
702
+ var tokensCssMigration_2026_09_21_tintColorAndOpacity = {
703
+ id: "2026-09-21-tint-color-and-opacity",
704
+ kind: "additive",
705
+ description: "Add --tint-color and --tint-opacity-*; a tint's colour and strength are separate tokens",
706
+ apply(css) {
707
+ return ensureScale(css, {
708
+ entries: ENTRIES3,
709
+ sectionComment: "Tint colour and strength, which the --tint-* stops compose",
710
+ anchorPrefixes: ["--tint"]
711
+ });
712
+ }
713
+ };
714
+
715
+ // vite-plugin/tokensCssMigrations/migrations/2026-10-08-type-scales.ts
716
+ var RENAMES3 = [
717
+ ["--code-font-size", "--code-md-font-size"],
718
+ ["--code-line-height", "--code-md-line-height"],
719
+ ["--code-letter-spacing", "--code-md-letter-spacing"]
720
+ ];
721
+ var CARRIED = [
722
+ {
723
+ prefix: "--heading-xl",
724
+ size: "var(--font-size-4xl)",
725
+ links: [
726
+ { name: "--heading-xl-font-family", from: "var(--font-display)", to: "var(--heading-font-family)" },
727
+ { name: "--heading-xl-font-weight", from: "var(--font-weight-semibold)", to: "var(--heading-font-weight)" }
728
+ ]
729
+ },
730
+ {
731
+ prefix: "--heading-lg",
732
+ size: "var(--font-size-2xl)",
733
+ links: [
734
+ { name: "--heading-lg-font-family", from: "var(--font-display)", to: "var(--heading-font-family)" },
735
+ { name: "--heading-lg-font-weight", from: "var(--font-weight-semibold)", to: "var(--heading-font-weight)" }
736
+ ]
737
+ },
738
+ {
739
+ prefix: "--heading-md",
740
+ size: "var(--font-size-xl)",
741
+ links: [
742
+ { name: "--heading-md-font-family", from: "var(--font-display)", to: "var(--heading-font-family)" },
743
+ { name: "--heading-md-font-weight", from: "var(--font-weight-semibold)", to: "var(--heading-font-weight)" }
744
+ ]
745
+ },
746
+ {
747
+ // heading-sm keeps the sans face it shipped with, so only its weight links.
748
+ prefix: "--heading-sm",
749
+ size: "var(--font-size-lg)",
750
+ links: [
751
+ { name: "--heading-sm-font-weight", from: "var(--font-weight-semibold)", to: "var(--heading-font-weight)" }
752
+ ]
753
+ },
754
+ {
755
+ prefix: "--body-md",
756
+ size: "var(--font-size-md)",
757
+ links: [
758
+ { name: "--body-md-font-family", from: "var(--font-sans)", to: "var(--body-font-family)" },
759
+ { name: "--body-md-font-weight", from: "var(--font-weight-normal)", to: "var(--body-font-weight)" }
760
+ ]
761
+ },
762
+ {
763
+ prefix: "--body-sm",
764
+ size: "var(--font-size-sm)",
765
+ links: [
766
+ { name: "--body-sm-font-family", from: "var(--font-sans)", to: "var(--body-font-family)" },
767
+ { name: "--body-sm-font-weight", from: "var(--font-weight-normal)", to: "var(--body-font-weight)" }
768
+ ]
769
+ },
770
+ {
771
+ // 0.91.2 had no code-md face or weight: `--code-font-family` and
772
+ // `--code-font-weight` keep their names as the code usage's settings.
773
+ prefix: "--code-md",
774
+ size: "var(--font-size-sm)",
775
+ links: []
776
+ },
777
+ {
778
+ prefix: "--editorial-xl",
779
+ size: "var(--font-size-xl)",
780
+ links: [
781
+ { name: "--editorial-xl-font-family", from: "var(--font-editorial)", to: "var(--editorial-font-family)" },
782
+ { name: "--editorial-xl-font-weight", from: "var(--font-weight-normal)", to: "var(--editorial-font-weight)" }
783
+ ]
784
+ },
785
+ {
786
+ prefix: "--editorial-lg",
787
+ size: "var(--font-size-lg)",
788
+ links: [
789
+ { name: "--editorial-lg-font-family", from: "var(--font-editorial)", to: "var(--editorial-font-family)" },
790
+ { name: "--editorial-lg-font-weight", from: "var(--font-weight-normal)", to: "var(--editorial-font-weight)" }
791
+ ]
792
+ },
793
+ {
794
+ prefix: "--editorial-md",
795
+ size: "var(--font-size-md)",
796
+ links: [
797
+ { name: "--editorial-md-font-family", from: "var(--font-editorial)", to: "var(--editorial-font-family)" },
798
+ { name: "--editorial-md-font-weight", from: "var(--font-weight-normal)", to: "var(--editorial-font-weight)" }
799
+ ]
800
+ },
801
+ {
802
+ prefix: "--editorial-sm",
803
+ size: "var(--font-size-sm)",
804
+ links: [
805
+ { name: "--editorial-sm-font-family", from: "var(--font-editorial)", to: "var(--editorial-font-family)" },
806
+ { name: "--editorial-sm-font-weight", from: "var(--font-weight-normal)", to: "var(--editorial-font-weight)" }
807
+ ]
808
+ },
809
+ {
810
+ prefix: "--eyebrow",
811
+ size: "var(--font-size-sm)",
812
+ links: [
813
+ { name: "--eyebrow-font-family", from: "var(--font-sans)", to: "var(--body-font-family)" },
814
+ { name: "--eyebrow-font-weight", from: "var(--font-weight-normal)", to: "var(--body-font-weight)" }
815
+ ]
816
+ }
817
+ ];
818
+ var COMPRESSION = [
819
+ { name: "--type-tablet-scale-compression", value: "0.75" },
820
+ { name: "--type-phone-scale-compression", value: "0.63" }
821
+ ];
822
+ var COMPRESSED_VIEWPORTS = ["tablet", "phone"];
823
+ function literalRem(size) {
824
+ const m = /^(-?\d*\.?\d+)(rem|px)$/.exec(size.trim());
825
+ if (!m) return null;
826
+ return m[2] === "rem" ? Number(m[1]) : Number(m[1]) / 16;
827
+ }
828
+ function editedSizes(prefix, rem) {
829
+ const count = String(Number(rem.toFixed(4)));
830
+ return COMPRESSED_VIEWPORTS.map((viewport) => ({
831
+ name: `${prefix}-${viewport}-font-size`,
832
+ value: `min(var(${prefix}-desktop-font-size), calc(pow(${count}, var(--type-${viewport}-scale-compression)) * 1rem))`
833
+ }));
834
+ }
835
+ var USAGES = [
836
+ {
837
+ usage: "display",
838
+ comment: "Display: type outside the page outline, such as heroes, section titles and big numbers",
839
+ follows: "type",
840
+ settings: [
841
+ { name: "--display-font-family", value: "var(--font-display)" },
842
+ { name: "--display-font-weight", value: "var(--font-weight-semibold)" },
843
+ { name: "--display-scale-base", value: "3" },
844
+ { name: "--display-scale-ratio", value: "1.2" }
845
+ ],
846
+ steps: [
847
+ {
848
+ prefix: "--display-2xl",
849
+ entries: [
850
+ { name: "--display-2xl-font-family", value: "var(--display-font-family)" },
851
+ { name: "--display-2xl-desktop-font-size", value: "calc(var(--display-scale-base) * pow(var(--display-scale-ratio), 3) * 1rem)" },
852
+ { name: "--display-2xl-tablet-font-size", value: "min(var(--display-2xl-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), 3), var(--type-tablet-scale-compression)) * 1rem))" },
853
+ { name: "--display-2xl-phone-font-size", value: "min(var(--display-2xl-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), 3), var(--type-phone-scale-compression)) * 1rem))" },
854
+ { name: "--display-2xl-font-size", value: "var(--display-2xl-desktop-font-size)" },
855
+ { name: "--display-2xl-font-weight", value: "var(--display-font-weight)" },
856
+ { name: "--display-2xl-line-height", value: "var(--line-height-tightest)" },
857
+ { name: "--display-2xl-letter-spacing", value: "var(--letter-spacing-tight)" }
858
+ ]
859
+ },
860
+ {
861
+ prefix: "--display-xl",
862
+ entries: [
863
+ { name: "--display-xl-font-family", value: "var(--display-font-family)" },
864
+ { name: "--display-xl-desktop-font-size", value: "calc(var(--display-scale-base) * pow(var(--display-scale-ratio), 2) * 1rem)" },
865
+ { name: "--display-xl-tablet-font-size", value: "min(var(--display-xl-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), 2), var(--type-tablet-scale-compression)) * 1rem))" },
866
+ { name: "--display-xl-phone-font-size", value: "min(var(--display-xl-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), 2), var(--type-phone-scale-compression)) * 1rem))" },
867
+ { name: "--display-xl-font-size", value: "var(--display-xl-desktop-font-size)" },
868
+ { name: "--display-xl-font-weight", value: "var(--display-font-weight)" },
869
+ { name: "--display-xl-line-height", value: "var(--line-height-tightest)" },
870
+ { name: "--display-xl-letter-spacing", value: "var(--letter-spacing-tight)" }
871
+ ]
872
+ },
873
+ {
874
+ prefix: "--display-lg",
875
+ entries: [
876
+ { name: "--display-lg-font-family", value: "var(--display-font-family)" },
877
+ { name: "--display-lg-desktop-font-size", value: "calc(var(--display-scale-base) * pow(var(--display-scale-ratio), 1) * 1rem)" },
878
+ { name: "--display-lg-tablet-font-size", value: "min(var(--display-lg-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), 1), var(--type-tablet-scale-compression)) * 1rem))" },
879
+ { name: "--display-lg-phone-font-size", value: "min(var(--display-lg-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), 1), var(--type-phone-scale-compression)) * 1rem))" },
880
+ { name: "--display-lg-font-size", value: "var(--display-lg-desktop-font-size)" },
881
+ { name: "--display-lg-font-weight", value: "var(--display-font-weight)" },
882
+ { name: "--display-lg-line-height", value: "var(--line-height-tightest)" },
883
+ { name: "--display-lg-letter-spacing", value: "var(--letter-spacing-tight)" }
884
+ ]
885
+ },
886
+ {
887
+ prefix: "--display-md",
888
+ entries: [
889
+ { name: "--display-md-font-family", value: "var(--display-font-family)" },
890
+ { name: "--display-md-desktop-font-size", value: "calc(var(--display-scale-base) * 1rem)" },
891
+ { name: "--display-md-tablet-font-size", value: "min(var(--display-md-desktop-font-size), calc(pow(var(--display-scale-base), var(--type-tablet-scale-compression)) * 1rem))" },
892
+ { name: "--display-md-phone-font-size", value: "min(var(--display-md-desktop-font-size), calc(pow(var(--display-scale-base), var(--type-phone-scale-compression)) * 1rem))" },
893
+ { name: "--display-md-font-size", value: "var(--display-md-desktop-font-size)" },
894
+ { name: "--display-md-font-weight", value: "var(--display-font-weight)" },
895
+ { name: "--display-md-line-height", value: "var(--line-height-tightest)" },
896
+ { name: "--display-md-letter-spacing", value: "var(--letter-spacing-normal)" }
897
+ ]
898
+ },
899
+ {
900
+ prefix: "--display-sm",
901
+ entries: [
902
+ { name: "--display-sm-font-family", value: "var(--display-font-family)" },
903
+ { name: "--display-sm-desktop-font-size", value: "calc(var(--display-scale-base) * pow(var(--display-scale-ratio), -1) * 1rem)" },
904
+ { name: "--display-sm-tablet-font-size", value: "min(var(--display-sm-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), -1), var(--type-tablet-scale-compression)) * 1rem))" },
905
+ { name: "--display-sm-phone-font-size", value: "min(var(--display-sm-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), -1), var(--type-phone-scale-compression)) * 1rem))" },
906
+ { name: "--display-sm-font-size", value: "var(--display-sm-desktop-font-size)" },
907
+ { name: "--display-sm-font-weight", value: "var(--display-font-weight)" },
908
+ { name: "--display-sm-line-height", value: "var(--line-height-tighter)" },
909
+ { name: "--display-sm-letter-spacing", value: "var(--letter-spacing-normal)" }
910
+ ]
911
+ },
912
+ {
913
+ prefix: "--display-xs",
914
+ entries: [
915
+ { name: "--display-xs-font-family", value: "var(--display-font-family)" },
916
+ { name: "--display-xs-desktop-font-size", value: "calc(var(--display-scale-base) * pow(var(--display-scale-ratio), -2) * 1rem)" },
917
+ { name: "--display-xs-tablet-font-size", value: "min(var(--display-xs-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), -2), var(--type-tablet-scale-compression)) * 1rem))" },
918
+ { name: "--display-xs-phone-font-size", value: "min(var(--display-xs-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), -2), var(--type-phone-scale-compression)) * 1rem))" },
919
+ { name: "--display-xs-font-size", value: "var(--display-xs-desktop-font-size)" },
920
+ { name: "--display-xs-font-weight", value: "var(--display-font-weight)" },
921
+ { name: "--display-xs-line-height", value: "var(--line-height-tighter)" },
922
+ { name: "--display-xs-letter-spacing", value: "var(--letter-spacing-normal)" }
923
+ ]
924
+ },
925
+ {
926
+ prefix: "--display-2xs",
927
+ entries: [
928
+ { name: "--display-2xs-font-family", value: "var(--display-font-family)" },
929
+ { name: "--display-2xs-desktop-font-size", value: "calc(var(--display-scale-base) * pow(var(--display-scale-ratio), -3) * 1rem)" },
930
+ { name: "--display-2xs-tablet-font-size", value: "min(var(--display-2xs-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), -3), var(--type-tablet-scale-compression)) * 1rem))" },
931
+ { name: "--display-2xs-phone-font-size", value: "min(var(--display-2xs-desktop-font-size), calc(pow(var(--display-scale-base) * pow(var(--display-scale-ratio), -3), var(--type-phone-scale-compression)) * 1rem))" },
932
+ { name: "--display-2xs-font-size", value: "var(--display-2xs-desktop-font-size)" },
933
+ { name: "--display-2xs-font-weight", value: "var(--display-font-weight)" },
934
+ { name: "--display-2xs-line-height", value: "var(--line-height-tighter)" },
935
+ { name: "--display-2xs-letter-spacing", value: "var(--letter-spacing-normal)" }
936
+ ]
937
+ }
938
+ ]
939
+ },
940
+ {
941
+ usage: "heading",
942
+ comment: "Heading: the page outline, h1 at xl down to h6 at 2xs",
943
+ follows: "display",
944
+ settings: [
945
+ { name: "--heading-font-family", value: "var(--font-display)" },
946
+ { name: "--heading-font-weight", value: "var(--font-weight-semibold)" },
947
+ { name: "--heading-scale-base", value: "1.5" },
948
+ { name: "--heading-scale-ratio", value: "1.25" }
949
+ ],
950
+ steps: [
951
+ {
952
+ prefix: "--heading-2xl",
953
+ entries: [
954
+ { name: "--heading-2xl-font-family", value: "var(--heading-font-family)" },
955
+ { name: "--heading-2xl-desktop-font-size", value: "calc(var(--heading-scale-base) * pow(var(--heading-scale-ratio), 3) * 1rem)" },
956
+ { name: "--heading-2xl-tablet-font-size", value: "min(var(--heading-2xl-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), 3), var(--type-tablet-scale-compression)) * 1rem))" },
957
+ { name: "--heading-2xl-phone-font-size", value: "min(var(--heading-2xl-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), 3), var(--type-phone-scale-compression)) * 1rem))" },
958
+ { name: "--heading-2xl-font-size", value: "var(--heading-2xl-desktop-font-size)" },
959
+ { name: "--heading-2xl-font-weight", value: "var(--heading-font-weight)" },
960
+ { name: "--heading-2xl-line-height", value: "var(--line-height-tightest)" },
961
+ { name: "--heading-2xl-letter-spacing", value: "var(--letter-spacing-normal)" }
962
+ ]
963
+ },
964
+ {
965
+ prefix: "--heading-xl",
966
+ entries: [
967
+ { name: "--heading-xl-font-family", value: "var(--heading-font-family)" },
968
+ { name: "--heading-xl-desktop-font-size", value: "calc(var(--heading-scale-base) * pow(var(--heading-scale-ratio), 2) * 1rem)" },
969
+ { name: "--heading-xl-tablet-font-size", value: "min(var(--heading-xl-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), 2), var(--type-tablet-scale-compression)) * 1rem))" },
970
+ { name: "--heading-xl-phone-font-size", value: "min(var(--heading-xl-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), 2), var(--type-phone-scale-compression)) * 1rem))" },
971
+ { name: "--heading-xl-font-size", value: "var(--heading-xl-desktop-font-size)" },
972
+ { name: "--heading-xl-font-weight", value: "var(--heading-font-weight)" },
973
+ { name: "--heading-xl-line-height", value: "var(--line-height-tightest)" },
974
+ { name: "--heading-xl-letter-spacing", value: "var(--letter-spacing-normal)" }
975
+ ]
976
+ },
977
+ {
978
+ prefix: "--heading-lg",
979
+ entries: [
980
+ { name: "--heading-lg-font-family", value: "var(--heading-font-family)" },
981
+ { name: "--heading-lg-desktop-font-size", value: "calc(var(--heading-scale-base) * pow(var(--heading-scale-ratio), 1) * 1rem)" },
982
+ { name: "--heading-lg-tablet-font-size", value: "min(var(--heading-lg-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), 1), var(--type-tablet-scale-compression)) * 1rem))" },
983
+ { name: "--heading-lg-phone-font-size", value: "min(var(--heading-lg-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), 1), var(--type-phone-scale-compression)) * 1rem))" },
984
+ { name: "--heading-lg-font-size", value: "var(--heading-lg-desktop-font-size)" },
985
+ { name: "--heading-lg-font-weight", value: "var(--heading-font-weight)" },
986
+ { name: "--heading-lg-line-height", value: "var(--line-height-tightest)" },
987
+ { name: "--heading-lg-letter-spacing", value: "var(--letter-spacing-normal)" }
988
+ ]
989
+ },
990
+ {
991
+ prefix: "--heading-md",
992
+ entries: [
993
+ { name: "--heading-md-font-family", value: "var(--heading-font-family)" },
994
+ { name: "--heading-md-desktop-font-size", value: "calc(var(--heading-scale-base) * 1rem)" },
995
+ { name: "--heading-md-tablet-font-size", value: "min(var(--heading-md-desktop-font-size), calc(pow(var(--heading-scale-base), var(--type-tablet-scale-compression)) * 1rem))" },
996
+ { name: "--heading-md-phone-font-size", value: "min(var(--heading-md-desktop-font-size), calc(pow(var(--heading-scale-base), var(--type-phone-scale-compression)) * 1rem))" },
997
+ { name: "--heading-md-font-size", value: "var(--heading-md-desktop-font-size)" },
998
+ { name: "--heading-md-font-weight", value: "var(--heading-font-weight)" },
999
+ { name: "--heading-md-line-height", value: "var(--line-height-tighter)" },
1000
+ { name: "--heading-md-letter-spacing", value: "var(--letter-spacing-normal)" }
1001
+ ]
1002
+ },
1003
+ {
1004
+ prefix: "--heading-sm",
1005
+ entries: [
1006
+ { name: "--heading-sm-font-family", value: "var(--font-sans)" },
1007
+ { name: "--heading-sm-desktop-font-size", value: "calc(var(--heading-scale-base) * pow(var(--heading-scale-ratio), -1) * 1rem)" },
1008
+ { name: "--heading-sm-tablet-font-size", value: "min(var(--heading-sm-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), -1), var(--type-tablet-scale-compression)) * 1rem))" },
1009
+ { name: "--heading-sm-phone-font-size", value: "min(var(--heading-sm-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), -1), var(--type-phone-scale-compression)) * 1rem))" },
1010
+ { name: "--heading-sm-font-size", value: "var(--heading-sm-desktop-font-size)" },
1011
+ { name: "--heading-sm-font-weight", value: "var(--heading-font-weight)" },
1012
+ { name: "--heading-sm-line-height", value: "var(--line-height-tighter)" },
1013
+ { name: "--heading-sm-letter-spacing", value: "var(--letter-spacing-normal)" }
1014
+ ]
1015
+ },
1016
+ {
1017
+ prefix: "--heading-xs",
1018
+ entries: [
1019
+ { name: "--heading-xs-font-family", value: "var(--font-sans)" },
1020
+ { name: "--heading-xs-desktop-font-size", value: "calc(var(--heading-scale-base) * pow(var(--heading-scale-ratio), -2) * 1rem)" },
1021
+ { name: "--heading-xs-tablet-font-size", value: "min(var(--heading-xs-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), -2), var(--type-tablet-scale-compression)) * 1rem))" },
1022
+ { name: "--heading-xs-phone-font-size", value: "min(var(--heading-xs-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), -2), var(--type-phone-scale-compression)) * 1rem))" },
1023
+ { name: "--heading-xs-font-size", value: "var(--heading-xs-desktop-font-size)" },
1024
+ { name: "--heading-xs-font-weight", value: "var(--heading-font-weight)" },
1025
+ { name: "--heading-xs-line-height", value: "var(--line-height-tight)" },
1026
+ { name: "--heading-xs-letter-spacing", value: "var(--letter-spacing-normal)" }
1027
+ ]
1028
+ },
1029
+ {
1030
+ prefix: "--heading-2xs",
1031
+ entries: [
1032
+ { name: "--heading-2xs-font-family", value: "var(--font-sans)" },
1033
+ { name: "--heading-2xs-desktop-font-size", value: "calc(var(--heading-scale-base) * pow(var(--heading-scale-ratio), -3) * 1rem)" },
1034
+ { name: "--heading-2xs-tablet-font-size", value: "min(var(--heading-2xs-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), -3), var(--type-tablet-scale-compression)) * 1rem))" },
1035
+ { name: "--heading-2xs-phone-font-size", value: "min(var(--heading-2xs-desktop-font-size), calc(pow(var(--heading-scale-base) * pow(var(--heading-scale-ratio), -3), var(--type-phone-scale-compression)) * 1rem))" },
1036
+ { name: "--heading-2xs-font-size", value: "var(--heading-2xs-desktop-font-size)" },
1037
+ { name: "--heading-2xs-font-weight", value: "var(--heading-font-weight)" },
1038
+ { name: "--heading-2xs-line-height", value: "var(--line-height-tight)" },
1039
+ { name: "--heading-2xs-letter-spacing", value: "var(--letter-spacing-normal)" }
1040
+ ]
1041
+ }
1042
+ ]
1043
+ },
1044
+ {
1045
+ usage: "body",
1046
+ comment: "Body: interface text and short copy",
1047
+ follows: "heading",
1048
+ settings: [
1049
+ { name: "--body-font-family", value: "var(--font-sans)" },
1050
+ { name: "--body-font-weight", value: "var(--font-weight-normal)" },
1051
+ { name: "--body-scale-base", value: "1" },
1052
+ { name: "--body-scale-ratio", value: "1.125" }
1053
+ ],
1054
+ steps: [
1055
+ {
1056
+ prefix: "--body-2xl",
1057
+ entries: [
1058
+ { name: "--body-2xl-font-family", value: "var(--body-font-family)" },
1059
+ { name: "--body-2xl-desktop-font-size", value: "calc(var(--body-scale-base) * pow(var(--body-scale-ratio), 3) * 1rem)" },
1060
+ { name: "--body-2xl-tablet-font-size", value: "min(var(--body-2xl-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), 3), var(--type-tablet-scale-compression)) * 1rem))" },
1061
+ { name: "--body-2xl-phone-font-size", value: "min(var(--body-2xl-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), 3), var(--type-phone-scale-compression)) * 1rem))" },
1062
+ { name: "--body-2xl-font-size", value: "var(--body-2xl-desktop-font-size)" },
1063
+ { name: "--body-2xl-font-weight", value: "var(--body-font-weight)" },
1064
+ { name: "--body-2xl-line-height", value: "var(--line-height-tighter)" },
1065
+ { name: "--body-2xl-letter-spacing", value: "var(--letter-spacing-normal)" }
1066
+ ]
1067
+ },
1068
+ {
1069
+ prefix: "--body-xl",
1070
+ entries: [
1071
+ { name: "--body-xl-font-family", value: "var(--body-font-family)" },
1072
+ { name: "--body-xl-desktop-font-size", value: "calc(var(--body-scale-base) * pow(var(--body-scale-ratio), 2) * 1rem)" },
1073
+ { name: "--body-xl-tablet-font-size", value: "min(var(--body-xl-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), 2), var(--type-tablet-scale-compression)) * 1rem))" },
1074
+ { name: "--body-xl-phone-font-size", value: "min(var(--body-xl-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), 2), var(--type-phone-scale-compression)) * 1rem))" },
1075
+ { name: "--body-xl-font-size", value: "var(--body-xl-desktop-font-size)" },
1076
+ { name: "--body-xl-font-weight", value: "var(--body-font-weight)" },
1077
+ { name: "--body-xl-line-height", value: "var(--line-height-tighter)" },
1078
+ { name: "--body-xl-letter-spacing", value: "var(--letter-spacing-normal)" }
1079
+ ]
1080
+ },
1081
+ {
1082
+ prefix: "--body-lg",
1083
+ entries: [
1084
+ { name: "--body-lg-font-family", value: "var(--body-font-family)" },
1085
+ { name: "--body-lg-desktop-font-size", value: "calc(var(--body-scale-base) * pow(var(--body-scale-ratio), 1) * 1rem)" },
1086
+ { name: "--body-lg-tablet-font-size", value: "min(var(--body-lg-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), 1), var(--type-tablet-scale-compression)) * 1rem))" },
1087
+ { name: "--body-lg-phone-font-size", value: "min(var(--body-lg-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), 1), var(--type-phone-scale-compression)) * 1rem))" },
1088
+ { name: "--body-lg-font-size", value: "var(--body-lg-desktop-font-size)" },
1089
+ { name: "--body-lg-font-weight", value: "var(--body-font-weight)" },
1090
+ { name: "--body-lg-line-height", value: "var(--line-height-tight)" },
1091
+ { name: "--body-lg-letter-spacing", value: "var(--letter-spacing-normal)" }
1092
+ ]
1093
+ },
1094
+ {
1095
+ prefix: "--body-md",
1096
+ entries: [
1097
+ { name: "--body-md-font-family", value: "var(--body-font-family)" },
1098
+ { name: "--body-md-desktop-font-size", value: "calc(var(--body-scale-base) * 1rem)" },
1099
+ { name: "--body-md-tablet-font-size", value: "min(var(--body-md-desktop-font-size), calc(pow(var(--body-scale-base), var(--type-tablet-scale-compression)) * 1rem))" },
1100
+ { name: "--body-md-phone-font-size", value: "min(var(--body-md-desktop-font-size), calc(pow(var(--body-scale-base), var(--type-phone-scale-compression)) * 1rem))" },
1101
+ { name: "--body-md-font-size", value: "var(--body-md-desktop-font-size)" },
1102
+ { name: "--body-md-font-weight", value: "var(--body-font-weight)" },
1103
+ { name: "--body-md-line-height", value: "var(--line-height-normal)" },
1104
+ { name: "--body-md-letter-spacing", value: "var(--letter-spacing-normal)" }
1105
+ ]
1106
+ },
1107
+ {
1108
+ prefix: "--body-sm",
1109
+ entries: [
1110
+ { name: "--body-sm-font-family", value: "var(--body-font-family)" },
1111
+ { name: "--body-sm-desktop-font-size", value: "calc(var(--body-scale-base) * pow(var(--body-scale-ratio), -1) * 1rem)" },
1112
+ { name: "--body-sm-tablet-font-size", value: "min(var(--body-sm-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), -1), var(--type-tablet-scale-compression)) * 1rem))" },
1113
+ { name: "--body-sm-phone-font-size", value: "min(var(--body-sm-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), -1), var(--type-phone-scale-compression)) * 1rem))" },
1114
+ { name: "--body-sm-font-size", value: "var(--body-sm-desktop-font-size)" },
1115
+ { name: "--body-sm-font-weight", value: "var(--body-font-weight)" },
1116
+ { name: "--body-sm-line-height", value: "var(--line-height-tight)" },
1117
+ { name: "--body-sm-letter-spacing", value: "var(--letter-spacing-normal)" }
1118
+ ]
1119
+ },
1120
+ {
1121
+ prefix: "--body-xs",
1122
+ entries: [
1123
+ { name: "--body-xs-font-family", value: "var(--body-font-family)" },
1124
+ { name: "--body-xs-desktop-font-size", value: "calc(var(--body-scale-base) * pow(var(--body-scale-ratio), -2) * 1rem)" },
1125
+ { name: "--body-xs-tablet-font-size", value: "min(var(--body-xs-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), -2), var(--type-tablet-scale-compression)) * 1rem))" },
1126
+ { name: "--body-xs-phone-font-size", value: "min(var(--body-xs-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), -2), var(--type-phone-scale-compression)) * 1rem))" },
1127
+ { name: "--body-xs-font-size", value: "var(--body-xs-desktop-font-size)" },
1128
+ { name: "--body-xs-font-weight", value: "var(--body-font-weight)" },
1129
+ { name: "--body-xs-line-height", value: "var(--line-height-tight)" },
1130
+ { name: "--body-xs-letter-spacing", value: "var(--letter-spacing-normal)" }
1131
+ ]
1132
+ },
1133
+ {
1134
+ prefix: "--body-2xs",
1135
+ entries: [
1136
+ { name: "--body-2xs-font-family", value: "var(--body-font-family)" },
1137
+ { name: "--body-2xs-desktop-font-size", value: "calc(var(--body-scale-base) * pow(var(--body-scale-ratio), -3) * 1rem)" },
1138
+ { name: "--body-2xs-tablet-font-size", value: "min(var(--body-2xs-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), -3), var(--type-tablet-scale-compression)) * 1rem))" },
1139
+ { name: "--body-2xs-phone-font-size", value: "min(var(--body-2xs-desktop-font-size), calc(pow(var(--body-scale-base) * pow(var(--body-scale-ratio), -3), var(--type-phone-scale-compression)) * 1rem))" },
1140
+ { name: "--body-2xs-font-size", value: "var(--body-2xs-desktop-font-size)" },
1141
+ { name: "--body-2xs-font-weight", value: "var(--body-font-weight)" },
1142
+ { name: "--body-2xs-line-height", value: "var(--line-height-tight)" },
1143
+ { name: "--body-2xs-letter-spacing", value: "var(--letter-spacing-normal)" }
1144
+ ]
1145
+ }
1146
+ ]
1147
+ },
1148
+ {
1149
+ usage: "code",
1150
+ comment: "Code: code blocks and inline code",
1151
+ follows: "body",
1152
+ settings: [
1153
+ { name: "--code-font-family", value: "var(--font-mono)" },
1154
+ { name: "--code-font-weight", value: "var(--font-weight-normal)" },
1155
+ { name: "--code-scale-base", value: "0.875" },
1156
+ { name: "--code-scale-ratio", value: "1.125" }
1157
+ ],
1158
+ steps: [
1159
+ {
1160
+ prefix: "--code-2xl",
1161
+ entries: [
1162
+ { name: "--code-2xl-font-family", value: "var(--code-font-family)" },
1163
+ { name: "--code-2xl-desktop-font-size", value: "calc(var(--code-scale-base) * pow(var(--code-scale-ratio), 3) * 1rem)" },
1164
+ { name: "--code-2xl-tablet-font-size", value: "min(var(--code-2xl-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), 3), var(--type-tablet-scale-compression)) * 1rem))" },
1165
+ { name: "--code-2xl-phone-font-size", value: "min(var(--code-2xl-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), 3), var(--type-phone-scale-compression)) * 1rem))" },
1166
+ { name: "--code-2xl-font-size", value: "var(--code-2xl-desktop-font-size)" },
1167
+ { name: "--code-2xl-font-weight", value: "var(--code-font-weight)" },
1168
+ { name: "--code-2xl-line-height", value: "var(--line-height-normal)" },
1169
+ { name: "--code-2xl-letter-spacing", value: "var(--letter-spacing-normal)" }
1170
+ ]
1171
+ },
1172
+ {
1173
+ prefix: "--code-xl",
1174
+ entries: [
1175
+ { name: "--code-xl-font-family", value: "var(--code-font-family)" },
1176
+ { name: "--code-xl-desktop-font-size", value: "calc(var(--code-scale-base) * pow(var(--code-scale-ratio), 2) * 1rem)" },
1177
+ { name: "--code-xl-tablet-font-size", value: "min(var(--code-xl-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), 2), var(--type-tablet-scale-compression)) * 1rem))" },
1178
+ { name: "--code-xl-phone-font-size", value: "min(var(--code-xl-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), 2), var(--type-phone-scale-compression)) * 1rem))" },
1179
+ { name: "--code-xl-font-size", value: "var(--code-xl-desktop-font-size)" },
1180
+ { name: "--code-xl-font-weight", value: "var(--code-font-weight)" },
1181
+ { name: "--code-xl-line-height", value: "var(--line-height-normal)" },
1182
+ { name: "--code-xl-letter-spacing", value: "var(--letter-spacing-normal)" }
1183
+ ]
1184
+ },
1185
+ {
1186
+ prefix: "--code-lg",
1187
+ entries: [
1188
+ { name: "--code-lg-font-family", value: "var(--code-font-family)" },
1189
+ { name: "--code-lg-desktop-font-size", value: "calc(var(--code-scale-base) * pow(var(--code-scale-ratio), 1) * 1rem)" },
1190
+ { name: "--code-lg-tablet-font-size", value: "min(var(--code-lg-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), 1), var(--type-tablet-scale-compression)) * 1rem))" },
1191
+ { name: "--code-lg-phone-font-size", value: "min(var(--code-lg-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), 1), var(--type-phone-scale-compression)) * 1rem))" },
1192
+ { name: "--code-lg-font-size", value: "var(--code-lg-desktop-font-size)" },
1193
+ { name: "--code-lg-font-weight", value: "var(--code-font-weight)" },
1194
+ { name: "--code-lg-line-height", value: "var(--line-height-normal)" },
1195
+ { name: "--code-lg-letter-spacing", value: "var(--letter-spacing-normal)" }
1196
+ ]
1197
+ },
1198
+ {
1199
+ prefix: "--code-md",
1200
+ entries: [
1201
+ { name: "--code-md-font-family", value: "var(--code-font-family)" },
1202
+ { name: "--code-md-desktop-font-size", value: "calc(var(--code-scale-base) * 1rem)" },
1203
+ { name: "--code-md-tablet-font-size", value: "min(var(--code-md-desktop-font-size), calc(pow(var(--code-scale-base), var(--type-tablet-scale-compression)) * 1rem))" },
1204
+ { name: "--code-md-phone-font-size", value: "min(var(--code-md-desktop-font-size), calc(pow(var(--code-scale-base), var(--type-phone-scale-compression)) * 1rem))" },
1205
+ { name: "--code-md-font-size", value: "var(--code-md-desktop-font-size)" },
1206
+ { name: "--code-md-font-weight", value: "var(--code-font-weight)" },
1207
+ { name: "--code-md-line-height", value: "var(--line-height-normal)" },
1208
+ { name: "--code-md-letter-spacing", value: "var(--letter-spacing-normal)" }
1209
+ ]
1210
+ },
1211
+ {
1212
+ prefix: "--code-sm",
1213
+ entries: [
1214
+ { name: "--code-sm-font-family", value: "var(--code-font-family)" },
1215
+ { name: "--code-sm-desktop-font-size", value: "calc(var(--code-scale-base) * pow(var(--code-scale-ratio), -1) * 1rem)" },
1216
+ { name: "--code-sm-tablet-font-size", value: "min(var(--code-sm-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), -1), var(--type-tablet-scale-compression)) * 1rem))" },
1217
+ { name: "--code-sm-phone-font-size", value: "min(var(--code-sm-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), -1), var(--type-phone-scale-compression)) * 1rem))" },
1218
+ { name: "--code-sm-font-size", value: "var(--code-sm-desktop-font-size)" },
1219
+ { name: "--code-sm-font-weight", value: "var(--code-font-weight)" },
1220
+ { name: "--code-sm-line-height", value: "var(--line-height-normal)" },
1221
+ { name: "--code-sm-letter-spacing", value: "var(--letter-spacing-normal)" }
1222
+ ]
1223
+ },
1224
+ {
1225
+ prefix: "--code-xs",
1226
+ entries: [
1227
+ { name: "--code-xs-font-family", value: "var(--code-font-family)" },
1228
+ { name: "--code-xs-desktop-font-size", value: "calc(var(--code-scale-base) * pow(var(--code-scale-ratio), -2) * 1rem)" },
1229
+ { name: "--code-xs-tablet-font-size", value: "min(var(--code-xs-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), -2), var(--type-tablet-scale-compression)) * 1rem))" },
1230
+ { name: "--code-xs-phone-font-size", value: "min(var(--code-xs-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), -2), var(--type-phone-scale-compression)) * 1rem))" },
1231
+ { name: "--code-xs-font-size", value: "var(--code-xs-desktop-font-size)" },
1232
+ { name: "--code-xs-font-weight", value: "var(--code-font-weight)" },
1233
+ { name: "--code-xs-line-height", value: "var(--line-height-normal)" },
1234
+ { name: "--code-xs-letter-spacing", value: "var(--letter-spacing-normal)" }
1235
+ ]
1236
+ },
1237
+ {
1238
+ prefix: "--code-2xs",
1239
+ entries: [
1240
+ { name: "--code-2xs-font-family", value: "var(--code-font-family)" },
1241
+ { name: "--code-2xs-desktop-font-size", value: "calc(var(--code-scale-base) * pow(var(--code-scale-ratio), -3) * 1rem)" },
1242
+ { name: "--code-2xs-tablet-font-size", value: "min(var(--code-2xs-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), -3), var(--type-tablet-scale-compression)) * 1rem))" },
1243
+ { name: "--code-2xs-phone-font-size", value: "min(var(--code-2xs-desktop-font-size), calc(pow(var(--code-scale-base) * pow(var(--code-scale-ratio), -3), var(--type-phone-scale-compression)) * 1rem))" },
1244
+ { name: "--code-2xs-font-size", value: "var(--code-2xs-desktop-font-size)" },
1245
+ { name: "--code-2xs-font-weight", value: "var(--code-font-weight)" },
1246
+ { name: "--code-2xs-line-height", value: "var(--line-height-normal)" },
1247
+ { name: "--code-2xs-letter-spacing", value: "var(--letter-spacing-normal)" }
1248
+ ]
1249
+ }
1250
+ ]
1251
+ },
1252
+ {
1253
+ usage: "editorial",
1254
+ comment: "Editorial: the long-reading role",
1255
+ follows: "code",
1256
+ settings: [
1257
+ { name: "--editorial-font-family", value: "var(--font-editorial)" },
1258
+ { name: "--editorial-font-weight", value: "var(--font-weight-normal)" },
1259
+ { name: "--editorial-scale-base", value: "1" },
1260
+ { name: "--editorial-scale-ratio", value: "1.125" }
1261
+ ],
1262
+ steps: [
1263
+ {
1264
+ prefix: "--editorial-2xl",
1265
+ entries: [
1266
+ { name: "--editorial-2xl-font-family", value: "var(--editorial-font-family)" },
1267
+ { name: "--editorial-2xl-desktop-font-size", value: "calc(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), 3) * 1rem)" },
1268
+ { name: "--editorial-2xl-tablet-font-size", value: "min(var(--editorial-2xl-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), 3), var(--type-tablet-scale-compression)) * 1rem))" },
1269
+ { name: "--editorial-2xl-phone-font-size", value: "min(var(--editorial-2xl-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), 3), var(--type-phone-scale-compression)) * 1rem))" },
1270
+ { name: "--editorial-2xl-font-size", value: "var(--editorial-2xl-desktop-font-size)" },
1271
+ { name: "--editorial-2xl-font-weight", value: "var(--editorial-font-weight)" },
1272
+ { name: "--editorial-2xl-line-height", value: "var(--line-height-tightest)" },
1273
+ { name: "--editorial-2xl-letter-spacing", value: "var(--letter-spacing-normal)" }
1274
+ ]
1275
+ },
1276
+ {
1277
+ prefix: "--editorial-xl",
1278
+ entries: [
1279
+ { name: "--editorial-xl-font-family", value: "var(--editorial-font-family)" },
1280
+ { name: "--editorial-xl-desktop-font-size", value: "calc(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), 2) * 1rem)" },
1281
+ { name: "--editorial-xl-tablet-font-size", value: "min(var(--editorial-xl-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), 2), var(--type-tablet-scale-compression)) * 1rem))" },
1282
+ { name: "--editorial-xl-phone-font-size", value: "min(var(--editorial-xl-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), 2), var(--type-phone-scale-compression)) * 1rem))" },
1283
+ { name: "--editorial-xl-font-size", value: "var(--editorial-xl-desktop-font-size)" },
1284
+ { name: "--editorial-xl-font-weight", value: "var(--editorial-font-weight)" },
1285
+ { name: "--editorial-xl-line-height", value: "var(--line-height-tighter)" },
1286
+ { name: "--editorial-xl-letter-spacing", value: "var(--letter-spacing-normal)" }
1287
+ ]
1288
+ },
1289
+ {
1290
+ prefix: "--editorial-lg",
1291
+ entries: [
1292
+ { name: "--editorial-lg-font-family", value: "var(--editorial-font-family)" },
1293
+ { name: "--editorial-lg-desktop-font-size", value: "calc(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), 1) * 1rem)" },
1294
+ { name: "--editorial-lg-tablet-font-size", value: "min(var(--editorial-lg-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), 1), var(--type-tablet-scale-compression)) * 1rem))" },
1295
+ { name: "--editorial-lg-phone-font-size", value: "min(var(--editorial-lg-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), 1), var(--type-phone-scale-compression)) * 1rem))" },
1296
+ { name: "--editorial-lg-font-size", value: "var(--editorial-lg-desktop-font-size)" },
1297
+ { name: "--editorial-lg-font-weight", value: "var(--editorial-font-weight)" },
1298
+ { name: "--editorial-lg-line-height", value: "var(--line-height-tight)" },
1299
+ { name: "--editorial-lg-letter-spacing", value: "var(--letter-spacing-normal)" }
1300
+ ]
1301
+ },
1302
+ {
1303
+ prefix: "--editorial-md",
1304
+ entries: [
1305
+ { name: "--editorial-md-font-family", value: "var(--editorial-font-family)" },
1306
+ { name: "--editorial-md-desktop-font-size", value: "calc(var(--editorial-scale-base) * 1rem)" },
1307
+ { name: "--editorial-md-tablet-font-size", value: "min(var(--editorial-md-desktop-font-size), calc(pow(var(--editorial-scale-base), var(--type-tablet-scale-compression)) * 1rem))" },
1308
+ { name: "--editorial-md-phone-font-size", value: "min(var(--editorial-md-desktop-font-size), calc(pow(var(--editorial-scale-base), var(--type-phone-scale-compression)) * 1rem))" },
1309
+ { name: "--editorial-md-font-size", value: "var(--editorial-md-desktop-font-size)" },
1310
+ { name: "--editorial-md-font-weight", value: "var(--editorial-font-weight)" },
1311
+ { name: "--editorial-md-line-height", value: "var(--line-height-normal)" },
1312
+ { name: "--editorial-md-letter-spacing", value: "var(--letter-spacing-normal)" }
1313
+ ]
1314
+ },
1315
+ {
1316
+ prefix: "--editorial-sm",
1317
+ entries: [
1318
+ { name: "--editorial-sm-font-family", value: "var(--editorial-font-family)" },
1319
+ { name: "--editorial-sm-desktop-font-size", value: "calc(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), -1) * 1rem)" },
1320
+ { name: "--editorial-sm-tablet-font-size", value: "min(var(--editorial-sm-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), -1), var(--type-tablet-scale-compression)) * 1rem))" },
1321
+ { name: "--editorial-sm-phone-font-size", value: "min(var(--editorial-sm-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), -1), var(--type-phone-scale-compression)) * 1rem))" },
1322
+ { name: "--editorial-sm-font-size", value: "var(--editorial-sm-desktop-font-size)" },
1323
+ { name: "--editorial-sm-font-weight", value: "var(--editorial-font-weight)" },
1324
+ { name: "--editorial-sm-line-height", value: "var(--line-height-tight)" },
1325
+ { name: "--editorial-sm-letter-spacing", value: "var(--letter-spacing-normal)" }
1326
+ ]
1327
+ },
1328
+ {
1329
+ prefix: "--editorial-xs",
1330
+ entries: [
1331
+ { name: "--editorial-xs-font-family", value: "var(--editorial-font-family)" },
1332
+ { name: "--editorial-xs-desktop-font-size", value: "calc(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), -2) * 1rem)" },
1333
+ { name: "--editorial-xs-tablet-font-size", value: "min(var(--editorial-xs-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), -2), var(--type-tablet-scale-compression)) * 1rem))" },
1334
+ { name: "--editorial-xs-phone-font-size", value: "min(var(--editorial-xs-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), -2), var(--type-phone-scale-compression)) * 1rem))" },
1335
+ { name: "--editorial-xs-font-size", value: "var(--editorial-xs-desktop-font-size)" },
1336
+ { name: "--editorial-xs-font-weight", value: "var(--editorial-font-weight)" },
1337
+ { name: "--editorial-xs-line-height", value: "var(--line-height-tighter)" },
1338
+ { name: "--editorial-xs-letter-spacing", value: "var(--letter-spacing-normal)" }
1339
+ ]
1340
+ },
1341
+ {
1342
+ prefix: "--editorial-2xs",
1343
+ entries: [
1344
+ { name: "--editorial-2xs-font-family", value: "var(--editorial-font-family)" },
1345
+ { name: "--editorial-2xs-desktop-font-size", value: "calc(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), -3) * 1rem)" },
1346
+ { name: "--editorial-2xs-tablet-font-size", value: "min(var(--editorial-2xs-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), -3), var(--type-tablet-scale-compression)) * 1rem))" },
1347
+ { name: "--editorial-2xs-phone-font-size", value: "min(var(--editorial-2xs-desktop-font-size), calc(pow(var(--editorial-scale-base) * pow(var(--editorial-scale-ratio), -3), var(--type-phone-scale-compression)) * 1rem))" },
1348
+ { name: "--editorial-2xs-font-size", value: "var(--editorial-2xs-desktop-font-size)" },
1349
+ { name: "--editorial-2xs-font-weight", value: "var(--editorial-font-weight)" },
1350
+ { name: "--editorial-2xs-line-height", value: "var(--line-height-tighter)" },
1351
+ { name: "--editorial-2xs-letter-spacing", value: "var(--letter-spacing-normal)" }
1352
+ ]
1353
+ }
1354
+ ]
1355
+ }
1356
+ ];
1357
+ var EYEBROW = [
1358
+ { name: "--eyebrow-font-family", value: "var(--body-font-family)" },
1359
+ { name: "--eyebrow-desktop-font-size", value: "var(--body-sm-desktop-font-size)" },
1360
+ { name: "--eyebrow-tablet-font-size", value: "var(--body-sm-tablet-font-size)" },
1361
+ { name: "--eyebrow-phone-font-size", value: "var(--body-sm-phone-font-size)" },
1362
+ { name: "--eyebrow-font-size", value: "var(--eyebrow-desktop-font-size)" },
1363
+ { name: "--eyebrow-font-weight", value: "var(--body-font-weight)" },
1364
+ { name: "--eyebrow-line-height", value: "var(--line-height-normal)" },
1365
+ { name: "--eyebrow-letter-spacing", value: "var(--letter-spacing-normal)" },
1366
+ { name: "--eyebrow-text-transform", value: "none" }
1367
+ ];
1368
+ var MEDIA = [
1369
+ {
1370
+ query: "(max-width: 768px)",
1371
+ entries: [
1372
+ { name: "--display-2xl-font-size", value: "var(--display-2xl-tablet-font-size)" },
1373
+ { name: "--display-xl-font-size", value: "var(--display-xl-tablet-font-size)" },
1374
+ { name: "--display-lg-font-size", value: "var(--display-lg-tablet-font-size)" },
1375
+ { name: "--display-md-font-size", value: "var(--display-md-tablet-font-size)" },
1376
+ { name: "--display-sm-font-size", value: "var(--display-sm-tablet-font-size)" },
1377
+ { name: "--display-xs-font-size", value: "var(--display-xs-tablet-font-size)" },
1378
+ { name: "--display-2xs-font-size", value: "var(--display-2xs-tablet-font-size)" },
1379
+ { name: "--heading-2xl-font-size", value: "var(--heading-2xl-tablet-font-size)" },
1380
+ { name: "--heading-xl-font-size", value: "var(--heading-xl-tablet-font-size)" },
1381
+ { name: "--heading-lg-font-size", value: "var(--heading-lg-tablet-font-size)" },
1382
+ { name: "--heading-md-font-size", value: "var(--heading-md-tablet-font-size)" },
1383
+ { name: "--heading-sm-font-size", value: "var(--heading-sm-tablet-font-size)" },
1384
+ { name: "--heading-xs-font-size", value: "var(--heading-xs-tablet-font-size)" },
1385
+ { name: "--heading-2xs-font-size", value: "var(--heading-2xs-tablet-font-size)" },
1386
+ { name: "--body-2xl-font-size", value: "var(--body-2xl-tablet-font-size)" },
1387
+ { name: "--body-xl-font-size", value: "var(--body-xl-tablet-font-size)" },
1388
+ { name: "--body-lg-font-size", value: "var(--body-lg-tablet-font-size)" },
1389
+ { name: "--body-md-font-size", value: "var(--body-md-tablet-font-size)" },
1390
+ { name: "--body-sm-font-size", value: "var(--body-sm-tablet-font-size)" },
1391
+ { name: "--body-xs-font-size", value: "var(--body-xs-tablet-font-size)" },
1392
+ { name: "--body-2xs-font-size", value: "var(--body-2xs-tablet-font-size)" },
1393
+ { name: "--editorial-2xl-font-size", value: "var(--editorial-2xl-tablet-font-size)" },
1394
+ { name: "--editorial-xl-font-size", value: "var(--editorial-xl-tablet-font-size)" },
1395
+ { name: "--editorial-lg-font-size", value: "var(--editorial-lg-tablet-font-size)" },
1396
+ { name: "--editorial-md-font-size", value: "var(--editorial-md-tablet-font-size)" },
1397
+ { name: "--editorial-sm-font-size", value: "var(--editorial-sm-tablet-font-size)" },
1398
+ { name: "--editorial-xs-font-size", value: "var(--editorial-xs-tablet-font-size)" },
1399
+ { name: "--editorial-2xs-font-size", value: "var(--editorial-2xs-tablet-font-size)" },
1400
+ { name: "--code-2xl-font-size", value: "var(--code-2xl-tablet-font-size)" },
1401
+ { name: "--code-xl-font-size", value: "var(--code-xl-tablet-font-size)" },
1402
+ { name: "--code-lg-font-size", value: "var(--code-lg-tablet-font-size)" },
1403
+ { name: "--code-md-font-size", value: "var(--code-md-tablet-font-size)" },
1404
+ { name: "--code-sm-font-size", value: "var(--code-sm-tablet-font-size)" },
1405
+ { name: "--code-xs-font-size", value: "var(--code-xs-tablet-font-size)" },
1406
+ { name: "--code-2xs-font-size", value: "var(--code-2xs-tablet-font-size)" },
1407
+ { name: "--eyebrow-font-size", value: "var(--eyebrow-tablet-font-size)" }
1408
+ ]
1409
+ },
1410
+ {
1411
+ query: "(max-width: 480px)",
1412
+ entries: [
1413
+ { name: "--display-2xl-font-size", value: "var(--display-2xl-phone-font-size)" },
1414
+ { name: "--display-xl-font-size", value: "var(--display-xl-phone-font-size)" },
1415
+ { name: "--display-lg-font-size", value: "var(--display-lg-phone-font-size)" },
1416
+ { name: "--display-md-font-size", value: "var(--display-md-phone-font-size)" },
1417
+ { name: "--display-sm-font-size", value: "var(--display-sm-phone-font-size)" },
1418
+ { name: "--display-xs-font-size", value: "var(--display-xs-phone-font-size)" },
1419
+ { name: "--display-2xs-font-size", value: "var(--display-2xs-phone-font-size)" },
1420
+ { name: "--heading-2xl-font-size", value: "var(--heading-2xl-phone-font-size)" },
1421
+ { name: "--heading-xl-font-size", value: "var(--heading-xl-phone-font-size)" },
1422
+ { name: "--heading-lg-font-size", value: "var(--heading-lg-phone-font-size)" },
1423
+ { name: "--heading-md-font-size", value: "var(--heading-md-phone-font-size)" },
1424
+ { name: "--heading-sm-font-size", value: "var(--heading-sm-phone-font-size)" },
1425
+ { name: "--heading-xs-font-size", value: "var(--heading-xs-phone-font-size)" },
1426
+ { name: "--heading-2xs-font-size", value: "var(--heading-2xs-phone-font-size)" },
1427
+ { name: "--body-2xl-font-size", value: "var(--body-2xl-phone-font-size)" },
1428
+ { name: "--body-xl-font-size", value: "var(--body-xl-phone-font-size)" },
1429
+ { name: "--body-lg-font-size", value: "var(--body-lg-phone-font-size)" },
1430
+ { name: "--body-md-font-size", value: "var(--body-md-phone-font-size)" },
1431
+ { name: "--body-sm-font-size", value: "var(--body-sm-phone-font-size)" },
1432
+ { name: "--body-xs-font-size", value: "var(--body-xs-phone-font-size)" },
1433
+ { name: "--body-2xs-font-size", value: "var(--body-2xs-phone-font-size)" },
1434
+ { name: "--editorial-2xl-font-size", value: "var(--editorial-2xl-phone-font-size)" },
1435
+ { name: "--editorial-xl-font-size", value: "var(--editorial-xl-phone-font-size)" },
1436
+ { name: "--editorial-lg-font-size", value: "var(--editorial-lg-phone-font-size)" },
1437
+ { name: "--editorial-md-font-size", value: "var(--editorial-md-phone-font-size)" },
1438
+ { name: "--editorial-sm-font-size", value: "var(--editorial-sm-phone-font-size)" },
1439
+ { name: "--editorial-xs-font-size", value: "var(--editorial-xs-phone-font-size)" },
1440
+ { name: "--editorial-2xs-font-size", value: "var(--editorial-2xs-phone-font-size)" },
1441
+ { name: "--code-2xl-font-size", value: "var(--code-2xl-phone-font-size)" },
1442
+ { name: "--code-xl-font-size", value: "var(--code-xl-phone-font-size)" },
1443
+ { name: "--code-lg-font-size", value: "var(--code-lg-phone-font-size)" },
1444
+ { name: "--code-md-font-size", value: "var(--code-md-phone-font-size)" },
1445
+ { name: "--code-sm-font-size", value: "var(--code-sm-phone-font-size)" },
1446
+ { name: "--code-xs-font-size", value: "var(--code-xs-phone-font-size)" },
1447
+ { name: "--code-2xs-font-size", value: "var(--code-2xs-phone-font-size)" },
1448
+ { name: "--eyebrow-font-size", value: "var(--eyebrow-phone-font-size)" }
1449
+ ]
1450
+ }
1451
+ ];
1452
+ var DECLARED = new Map(
1453
+ USAGES.flatMap((u) => u.steps.flatMap((s) => s.entries)).concat(EYEBROW).map((e) => [e.name, e.value])
1454
+ );
1455
+ var TYPE_PRIMITIVES = ["--letter-spacing-", "--line-height-", "--font-weight-", "--font-size-", "--font-"];
1456
+ var tokensCssMigration_2026_10_08_typeScales = {
1457
+ id: "2026-10-08-type-scales",
1458
+ kind: "breaking",
1459
+ description: "Rebuild the text styles as five type scales with per-viewport sizes, and rename --code-font-size, --code-line-height and --code-letter-spacing to --code-md-*",
1460
+ apply(css) {
1461
+ let out = css;
1462
+ for (const [from, to] of RENAMES3) out = renameToken(out, from, to);
1463
+ const values = collectTokenValues(out);
1464
+ for (const step of CARRIED) {
1465
+ const size = values.get(`${step.prefix}-font-size`);
1466
+ if (size === void 0) continue;
1467
+ const desktop = `${step.prefix}-desktop-font-size`;
1468
+ const edited = size !== step.size;
1469
+ const rem = edited ? literalRem(size) : null;
1470
+ out = ensureScale(out, {
1471
+ anchorPrefixes: [`${step.prefix}-font-family`, `${step.prefix}-`],
1472
+ entries: [
1473
+ { name: desktop, value: edited ? size : DECLARED.get(desktop) },
1474
+ ...rem === null ? [] : editedSizes(step.prefix, rem)
1475
+ ]
1476
+ });
1477
+ out = setTokenValue(out, `${step.prefix}-font-size`, `var(${desktop})`);
1478
+ for (const link of step.links) out = setTokenValue(out, link.name, link.to, { from: link.from });
1479
+ }
1480
+ out = ensureScale(out, {
1481
+ sectionComment: "Text styles: the compression that sets each tablet and phone size",
1482
+ anchorPrefixes: ["--type-", ...TYPE_PRIMITIVES],
1483
+ entries: COMPRESSION
1484
+ });
1485
+ for (const block of USAGES) {
1486
+ const fallback = [`--${block.usage}-scale-`, `--${block.follows}-`, "--type-"];
1487
+ out = ensureScale(out, { sectionComment: block.comment, anchorPrefixes: fallback, entries: block.settings });
1488
+ block.steps.forEach((step, i) => {
1489
+ const above = block.steps.slice(0, i).reverse().map((s) => `${s.prefix}-`);
1490
+ out = ensureScale(out, {
1491
+ anchorPrefixes: [
1492
+ `${step.prefix}-desktop-font-size`,
1493
+ `${step.prefix}-font-family`,
1494
+ `${step.prefix}-`,
1495
+ ...above,
1496
+ ...fallback
1497
+ ],
1498
+ entries: step.entries
1499
+ });
1500
+ });
1501
+ }
1502
+ out = ensureScale(out, {
1503
+ anchorPrefixes: ["--eyebrow-desktop-font-size", "--eyebrow-font-family", "--eyebrow-", "--editorial-"],
1504
+ entries: EYEBROW
1505
+ });
1506
+ for (const media of MEDIA) out = appendMediaBlock(out, media.query, media.entries);
1507
+ return out;
1508
+ }
1509
+ };
1510
+
1511
+ // vite-plugin/tokensCssMigrations/index.ts
1512
+ var TOKENS_CSS_MIGRATIONS = [
1513
+ tokensCssMigration_2026_05_29_typographyScaleAdditions,
1514
+ tokensCssMigration_2026_05_29_sectiondividerLegacyAxisCleanup,
1515
+ tokensCssMigration_2026_06_03_transformScaleAdditions,
1516
+ tokensCssMigration_2026_06_04_removeDeadSizeIconScale,
1517
+ tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions,
1518
+ tokensCssMigration_2026_07_20_lineHeightRename,
1519
+ tokensCssMigration_2026_07_20_semanticTextStyles,
1520
+ tokensCssMigration_2026_08_19_oklchColorValues,
1521
+ tokensCssMigration_2026_08_25_editorialTypeRole,
1522
+ tokensCssMigration_2026_08_26_gradientStops,
1523
+ tokensCssMigration_2026_08_27_backdropPolarity,
1524
+ tokensCssMigration_2026_08_27_editorialSizeSteps,
1525
+ tokensCssMigration_2026_08_27_editorialLargeSteps,
1526
+ tokensCssMigration_2026_09_01_scrimRename,
1527
+ tokensCssMigration_2026_09_01_tintScale,
1528
+ tokensCssMigration_2026_09_20_scrimColorAndOpacity,
1529
+ tokensCssMigration_2026_09_21_tintColorAndOpacity,
1530
+ tokensCssMigration_2026_10_08_typeScales
1531
+ ];
1532
+ function runTokensCssMigrations(css) {
1533
+ return foldMigrations(css, () => true);
1534
+ }
1535
+ function runAdditiveTokensCssMigrations(css) {
1536
+ return foldMigrations(css, (m) => m.kind === "additive");
1537
+ }
1538
+ function foldMigrations(css, include) {
1539
+ let out = css;
1540
+ const applied = [];
1541
+ for (const m of TOKENS_CSS_MIGRATIONS) {
1542
+ if (!include(m)) continue;
1543
+ const next = m.apply(out);
1544
+ if (next !== out) {
1545
+ applied.push(m.id);
1546
+ out = next;
1547
+ }
1548
+ }
1549
+ return { css: out, applied, changed: out !== css };
1550
+ }
1551
+ function findContractViolations(canonicalCss) {
1552
+ const violations = [];
1553
+ for (const m of TOKENS_CSS_MIGRATIONS) {
1554
+ if (m.kind !== "additive") continue;
1555
+ const before = collectTokenValues(canonicalCss);
1556
+ const after = collectTokenValues(m.apply(canonicalCss));
1557
+ const removed = [...before.keys()].filter((t) => !after.has(t)).sort();
1558
+ const changed = [...before.entries()].filter(([t, v]) => after.has(t) && after.get(t) !== v).map(([t]) => t).sort();
1559
+ if (removed.length || changed.length) violations.push({ id: m.id, removed, changed });
1560
+ }
1561
+ return violations;
1562
+ }
1563
+ function semverBumpType(prev, next) {
1564
+ const p = parseSemver(prev);
1565
+ const n = parseSemver(next);
1566
+ if (n.major > p.major) return "major";
1567
+ if (n.major === p.major && n.minor > p.minor) return "minor";
1568
+ if (n.major === p.major && n.minor === p.minor && n.patch > p.patch) return "patch";
1569
+ return "none";
1570
+ }
1571
+ function parseSemver(v) {
1572
+ const [core] = v.replace(/^v/, "").split(/[-+]/);
1573
+ const [major = 0, minor = 0, patch = 0] = core.split(".").map((n) => Number(n) || 0);
1574
+ return { major, minor, patch };
1575
+ }
1576
+ function enforceBreakingRequiresMajor(args) {
1577
+ const breakingIds = args.newMigrations.filter((m) => m.kind === "breaking").map((m) => m.id);
1578
+ const bump = semverBumpType(args.prevVersion, args.nextVersion);
1579
+ if (breakingIds.length === 0 || bump === "major") {
1580
+ return { level: "ok", breakingIds, bump, message: "" };
1581
+ }
1582
+ const pre1 = parseSemver(args.nextVersion).major < 1;
1583
+ const ids = breakingIds.join(", ");
1584
+ return {
1585
+ level: pre1 ? "warn" : "error",
1586
+ breakingIds,
1587
+ bump,
1588
+ message: `Breaking token migration(s) [${ids}] are shipping in a ${bump} bump (${args.prevVersion} -> ${args.nextVersion}). Token names are public API; ` + (pre1 ? `pre-1.0 this is allowed, but the CHANGELOG must flag it under "Changed (breaking)".` : `from 1.0.0 a breaking token change requires a major bump.`)
1589
+ };
1590
+ }
1591
+ function validateTokensCss(input) {
1592
+ const defined = /* @__PURE__ */ new Set([
1593
+ ...collectDefinedTokens(input.tokensCss),
1594
+ ...collectDefinedTokens(input.generatedCss ?? "")
1595
+ ]);
1596
+ const referencedBy = /* @__PURE__ */ new Map();
1597
+ for (const { name, source } of input.componentSources) {
1598
+ const body = extractGlobalRootBody(source);
1599
+ if (!body) continue;
1600
+ for (const t of collectDefinedTokens(body)) defined.add(t);
1601
+ for (const ref of collectReferencedTokens(body)) {
1602
+ let set = referencedBy.get(ref);
1603
+ if (!set) referencedBy.set(ref, set = /* @__PURE__ */ new Set());
1604
+ set.add(name);
1605
+ }
1606
+ }
1607
+ const missing = [];
1608
+ for (const [token, names] of referencedBy) {
1609
+ if (!defined.has(token)) {
1610
+ missing.push({ token, referencedBy: [...names].sort() });
1611
+ }
1612
+ }
1613
+ return missing.sort((a, b) => a.token.localeCompare(b.token));
1614
+ }
1615
+
1616
+ export {
1617
+ extractGlobalRootBody,
1618
+ collectDefinedTokens,
1619
+ collectTokenValues,
1620
+ collectReferencedTokens,
1621
+ ensureScale,
1622
+ renameToken,
1623
+ removeToken,
1624
+ removeTokensMatching,
1625
+ setTokenValue,
1626
+ appendMediaBlock,
1627
+ TOKENS_CSS_MIGRATIONS,
1628
+ runTokensCssMigrations,
1629
+ runAdditiveTokensCssMigrations,
1630
+ findContractViolations,
1631
+ semverBumpType,
1632
+ enforceBreakingRequiresMajor,
1633
+ validateTokensCss
1634
+ };