@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.
- package/.claude/skills/live-tokens-create-page/SKILL.md +10 -3
- package/.claude/skills/live-tokens-set-type/SKILL.md +3 -3
- package/CHANGELOG.md +140 -0
- package/bin/lib/tokenVocabulary.mjs +2 -2
- package/bin/rules/testRuns.mjs +1 -1
- package/bin/rules/tokens.mjs +3 -3
- package/dist-plugin/chunk-JOSSYGR2.js +1634 -0
- package/dist-plugin/index.cjs +932 -15
- package/dist-plugin/index.js +1 -1
- package/dist-plugin/setType/index.cjs +23 -2
- package/dist-plugin/setType/index.js +23 -2
- package/dist-plugin/tokensCssMigrations/index.cjs +936 -15
- package/dist-plugin/tokensCssMigrations/index.d.cts +23 -3
- package/dist-plugin/tokensCssMigrations/index.d.ts +23 -3
- package/dist-plugin/tokensCssMigrations/index.js +5 -1
- package/package.json +1 -1
- package/src/app/site.css +243 -9
- package/src/demo/TestingLoops.svelte +9 -9
- package/src/editor/core/fonts/weightCoverage.ts +31 -2
- package/src/editor/core/palettes/tokenRegistry.ts +36 -37
- package/src/editor/core/themes/parsers/mediaBlocks.ts +46 -0
- package/src/editor/core/typeScale/typeScale.ts +341 -0
- package/src/editor/skill-atlas/SourcePane.svelte +3 -3
- package/src/editor/skill-atlas/skillSources.generated.ts +2 -2
- package/src/editor/skill-atlas/trees/create-page.ts +14 -14
- package/src/editor/skill-atlas/trees/set-type.ts +2 -2
- package/src/editor/ui/UIFontFamilySelector.svelte +5 -1
- package/src/editor/ui/UIFontWeightSelector.svelte +4 -0
- package/src/editor/ui/UILetterSpacingSelector.svelte +4 -0
- package/src/editor/ui/UILineHeightSelector.svelte +4 -0
- package/src/editor/ui/UITextTransformSelector.svelte +4 -0
- package/src/editor/ui/UIVariantSelector.svelte +6 -8
- package/src/editor/ui/VariablesTab.svelte +4 -4
- package/src/editor/ui/sections/textStyles.ts +44 -92
- package/src/editor/ui/text-styles/ControlBody.svelte +100 -0
- package/src/editor/ui/text-styles/ResetIcon.svelte +60 -0
- package/src/editor/ui/text-styles/StepRow.svelte +330 -0
- package/src/editor/ui/text-styles/StyleControl.svelte +128 -0
- package/src/editor/ui/text-styles/TextStylesSection.svelte +551 -0
- package/src/editor/ui/text-styles/textStyleEdits.ts +308 -0
- package/src/editor/ui/variantScales.ts +16 -0
- package/src/system/styles/tokens.css +412 -48
- package/src/testing-js/page-compliance.contract.js +233 -80
- package/src/testing-js/page-compliance.contract.js.map +1 -1
- package/dist-plugin/chunk-GWMEYBZ2.js +0 -715
- package/src/editor/ui/TextStylesSection.svelte +0 -171
|
@@ -1,715 +0,0 @@
|
|
|
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
|
-
// vite-plugin/tokensCssMigrations/cssTokenOps.ts
|
|
18
|
-
var DECL_RE = /(^|[\s;{])(--[a-z0-9-]+)\s*:/gi;
|
|
19
|
-
var REF_RE = /var\(\s*(--[a-z0-9-]+)/gi;
|
|
20
|
-
var DECL_VALUE_RE = /(^|[\s;{])(--[a-z0-9-]+)\s*:([^;}]*)/gi;
|
|
21
|
-
function collectDefinedTokens(css) {
|
|
22
|
-
const out = /* @__PURE__ */ new Set();
|
|
23
|
-
for (const m of css.matchAll(DECL_RE)) out.add(m[2]);
|
|
24
|
-
return out;
|
|
25
|
-
}
|
|
26
|
-
function collectTokenValues(css) {
|
|
27
|
-
const out = /* @__PURE__ */ new Map();
|
|
28
|
-
for (const m of css.matchAll(DECL_VALUE_RE)) out.set(m[2], m[3].trim());
|
|
29
|
-
return out;
|
|
30
|
-
}
|
|
31
|
-
function collectReferencedTokens(css) {
|
|
32
|
-
const out = /* @__PURE__ */ new Set();
|
|
33
|
-
for (const m of css.matchAll(REF_RE)) out.add(m[1]);
|
|
34
|
-
return out;
|
|
35
|
-
}
|
|
36
|
-
function ensureScale(css, opts) {
|
|
37
|
-
const defined = collectDefinedTokens(css);
|
|
38
|
-
const missing = opts.entries.filter((e) => !defined.has(e.name));
|
|
39
|
-
if (missing.length === 0) return css;
|
|
40
|
-
const lines = css.split("\n");
|
|
41
|
-
const { indent, insertAfter } = findInsertionPoint(lines, opts.anchorPrefixes ?? []);
|
|
42
|
-
const block = [];
|
|
43
|
-
if (opts.sectionComment) block.push(`${indent}/* ${opts.sectionComment} */`);
|
|
44
|
-
for (const e of missing) block.push(`${indent}${e.name}: ${e.value};`);
|
|
45
|
-
lines.splice(insertAfter + 1, 0, ...block);
|
|
46
|
-
return lines.join("\n");
|
|
47
|
-
}
|
|
48
|
-
function renameToken(css, oldName, newName) {
|
|
49
|
-
const defined = collectDefinedTokens(css);
|
|
50
|
-
if (!defined.has(oldName) || defined.has(newName)) return css;
|
|
51
|
-
const re = new RegExp(escapeRe(oldName) + "(?![a-z0-9-])", "gi");
|
|
52
|
-
return css.replace(re, newName);
|
|
53
|
-
}
|
|
54
|
-
function removeToken(css, name) {
|
|
55
|
-
const lines = css.split("\n");
|
|
56
|
-
const declRe = new RegExp("(^|[\\s;{])" + escapeRe(name) + "\\s*:");
|
|
57
|
-
const kept = lines.filter((line) => !declRe.test(line));
|
|
58
|
-
if (kept.length === lines.length) return css;
|
|
59
|
-
return kept.join("\n");
|
|
60
|
-
}
|
|
61
|
-
function removeTokensMatching(css, predicate) {
|
|
62
|
-
const lines = css.split("\n");
|
|
63
|
-
const declRe = /^\s*(--[a-z0-9-]+)\s*:/;
|
|
64
|
-
const kept = lines.filter((line) => {
|
|
65
|
-
const m = line.match(declRe);
|
|
66
|
-
return !(m && predicate(m[1]));
|
|
67
|
-
});
|
|
68
|
-
if (kept.length === lines.length) return css;
|
|
69
|
-
return kept.join("\n");
|
|
70
|
-
}
|
|
71
|
-
function findInsertionPoint(lines, anchorPrefixes) {
|
|
72
|
-
const root = findTopLevelRoot(lines);
|
|
73
|
-
if (!root) return { indent: " ", insertAfter: lines.length - 1 };
|
|
74
|
-
const lastByPrefix = /* @__PURE__ */ new Map();
|
|
75
|
-
let lastDecl = null;
|
|
76
|
-
let depth = 1;
|
|
77
|
-
for (let i = root.start + 1; i < root.end; i++) {
|
|
78
|
-
const line = lines[i];
|
|
79
|
-
if (depth === 1) {
|
|
80
|
-
const m = line.match(/^(\s*)(--[a-z0-9-]+)\s*:/);
|
|
81
|
-
if (m) {
|
|
82
|
-
const hit = { index: i, indent: m[1] || " " };
|
|
83
|
-
lastDecl = hit;
|
|
84
|
-
for (const prefix of anchorPrefixes) {
|
|
85
|
-
if (m[2].startsWith(prefix)) lastByPrefix.set(prefix, hit);
|
|
86
|
-
}
|
|
87
|
-
}
|
|
88
|
-
}
|
|
89
|
-
depth += (line.match(/\{/g)?.length ?? 0) - (line.match(/\}/g)?.length ?? 0);
|
|
90
|
-
}
|
|
91
|
-
for (const prefix of anchorPrefixes) {
|
|
92
|
-
const hit = lastByPrefix.get(prefix);
|
|
93
|
-
if (hit) return { indent: hit.indent, insertAfter: hit.index };
|
|
94
|
-
}
|
|
95
|
-
return { indent: lastDecl?.indent ?? " ", insertAfter: root.end - 1 };
|
|
96
|
-
}
|
|
97
|
-
function findTopLevelRoot(lines) {
|
|
98
|
-
let depth = 0;
|
|
99
|
-
for (let i = 0; i < lines.length; i++) {
|
|
100
|
-
const line = lines[i];
|
|
101
|
-
if (depth === 0 && /(^|[\s,]):root[^{]*\{/.test(line)) {
|
|
102
|
-
let d = 0;
|
|
103
|
-
for (let j = i; j < lines.length; j++) {
|
|
104
|
-
d += (lines[j].match(/\{/g)?.length ?? 0) - (lines[j].match(/\}/g)?.length ?? 0);
|
|
105
|
-
if (d === 0) return { start: i, end: j };
|
|
106
|
-
}
|
|
107
|
-
return { start: i, end: lines.length - 1 };
|
|
108
|
-
}
|
|
109
|
-
depth += (line.match(/\{/g)?.length ?? 0) - (line.match(/\}/g)?.length ?? 0);
|
|
110
|
-
}
|
|
111
|
-
return null;
|
|
112
|
-
}
|
|
113
|
-
function escapeRe(s) {
|
|
114
|
-
return s.replace(/[.*+?^${}()|[\]\\]/g, "\\$&");
|
|
115
|
-
}
|
|
116
|
-
|
|
117
|
-
// vite-plugin/tokensCssMigrations/migrations/2026-05-29-typography-scale-additions.ts
|
|
118
|
-
var tokensCssMigration_2026_05_29_typographyScaleAdditions = {
|
|
119
|
-
id: "2026-05-29-typography-scale-additions",
|
|
120
|
-
kind: "additive",
|
|
121
|
-
description: "Add --letter-spacing-* and --ease-out-quart scales",
|
|
122
|
-
apply(css) {
|
|
123
|
-
let out = css;
|
|
124
|
-
out = ensureScale(out, {
|
|
125
|
-
sectionComment: "Letter spacing",
|
|
126
|
-
anchorPrefixes: ["--letter-spacing-", "--line-height-", "--font-size-", "--font-"],
|
|
127
|
-
entries: [
|
|
128
|
-
{ name: "--letter-spacing-tighter", value: "-0.04em" },
|
|
129
|
-
{ name: "--letter-spacing-tight", value: "-0.02em" },
|
|
130
|
-
{ name: "--letter-spacing-normal", value: "0" },
|
|
131
|
-
{ name: "--letter-spacing-wide", value: "0.04em" },
|
|
132
|
-
{ name: "--letter-spacing-wider", value: "0.08em" }
|
|
133
|
-
]
|
|
134
|
-
});
|
|
135
|
-
out = ensureScale(out, {
|
|
136
|
-
sectionComment: "Easing",
|
|
137
|
-
anchorPrefixes: ["--ease-", "--transition-", "--duration-"],
|
|
138
|
-
entries: [{ name: "--ease-out-quart", value: "cubic-bezier(0.25, 1, 0.5, 1)" }]
|
|
139
|
-
});
|
|
140
|
-
return out;
|
|
141
|
-
}
|
|
142
|
-
};
|
|
143
|
-
|
|
144
|
-
// vite-plugin/tokensCssMigrations/migrations/2026-05-29-sectiondivider-legacy-axis-cleanup.ts
|
|
145
|
-
var KEEP_SEGMENTS = /* @__PURE__ */ new Set(["lg", "md", "sm"]);
|
|
146
|
-
var tokensCssMigration_2026_05_29_sectiondividerLegacyAxisCleanup = {
|
|
147
|
-
id: "2026-05-29-sectiondivider-legacy-axis-cleanup",
|
|
148
|
-
kind: "breaking",
|
|
149
|
-
description: "Remove legacy --sectiondivider-* tokens not on the lg/md/sm axis",
|
|
150
|
-
apply(css) {
|
|
151
|
-
return removeTokensMatching(css, (name) => {
|
|
152
|
-
if (!name.startsWith("--sectiondivider-")) return false;
|
|
153
|
-
const segment = name.slice("--sectiondivider-".length).split("-")[0];
|
|
154
|
-
return !KEEP_SEGMENTS.has(segment);
|
|
155
|
-
});
|
|
156
|
-
}
|
|
157
|
-
};
|
|
158
|
-
|
|
159
|
-
// vite-plugin/tokensCssMigrations/migrations/2026-06-03-transform-scale-additions.ts
|
|
160
|
-
var tokensCssMigration_2026_06_03_transformScaleAdditions = {
|
|
161
|
-
id: "2026-06-03-transform-scale-additions",
|
|
162
|
-
kind: "additive",
|
|
163
|
-
description: "Add the --scale-{sm..2xl} transform-multiplier scale",
|
|
164
|
-
apply(css) {
|
|
165
|
-
return ensureScale(css, {
|
|
166
|
-
sectionComment: "Transform-scale multipliers (e.g. hover zoom). 5% per step.",
|
|
167
|
-
anchorPrefixes: ["--blur-", "--shadow-", "--radius-"],
|
|
168
|
-
entries: [
|
|
169
|
-
{ name: "--scale-sm", value: "1.05" },
|
|
170
|
-
{ name: "--scale-md", value: "1.1" },
|
|
171
|
-
{ name: "--scale-lg", value: "1.15" },
|
|
172
|
-
{ name: "--scale-xl", value: "1.2" },
|
|
173
|
-
{ name: "--scale-2xl", value: "1.25" }
|
|
174
|
-
]
|
|
175
|
-
});
|
|
176
|
-
}
|
|
177
|
-
};
|
|
178
|
-
|
|
179
|
-
// vite-plugin/tokensCssMigrations/migrations/2026-06-04-remove-dead-size-icon-scale.ts
|
|
180
|
-
var tokensCssMigration_2026_06_04_removeDeadSizeIconScale = {
|
|
181
|
-
id: "2026-06-04-remove-dead-size-icon-scale",
|
|
182
|
-
kind: "breaking",
|
|
183
|
-
description: "Remove the unused --size-icon-* scale (live scale is --icon-size-*)",
|
|
184
|
-
apply(css) {
|
|
185
|
-
return removeTokensMatching(css, (name) => name.startsWith("--size-icon-"));
|
|
186
|
-
}
|
|
187
|
-
};
|
|
188
|
-
|
|
189
|
-
// vite-plugin/tokensCssMigrations/migrations/2026-06-04-easing-color-and-typescale-additions.ts
|
|
190
|
-
var tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions = {
|
|
191
|
-
id: "2026-06-04-easing-color-and-typescale-additions",
|
|
192
|
-
kind: "additive",
|
|
193
|
-
description: "Add the full --ease-* scale, --color-white/black, and --font-size-7xl",
|
|
194
|
-
apply(css) {
|
|
195
|
-
let out = css;
|
|
196
|
-
out = ensureScale(out, {
|
|
197
|
-
anchorPrefixes: ["--ease-", "--transition-", "--duration-"],
|
|
198
|
-
entries: [
|
|
199
|
-
{ name: "--ease-linear", value: "linear" },
|
|
200
|
-
{ name: "--ease-in-sine", value: "cubic-bezier(0.12, 0, 0.39, 0)" },
|
|
201
|
-
{ name: "--ease-out-sine", value: "cubic-bezier(0.61, 1, 0.88, 1)" },
|
|
202
|
-
{ name: "--ease-in-out-sine", value: "cubic-bezier(0.37, 0, 0.63, 1)" },
|
|
203
|
-
{ name: "--ease-in-quad", value: "cubic-bezier(0.11, 0, 0.5, 0)" },
|
|
204
|
-
{ name: "--ease-out-quad", value: "cubic-bezier(0.5, 1, 0.89, 1)" },
|
|
205
|
-
{ name: "--ease-in-out-quad", value: "cubic-bezier(0.45, 0, 0.55, 1)" },
|
|
206
|
-
{ name: "--ease-in-cubic", value: "cubic-bezier(0.32, 0, 0.67, 0)" },
|
|
207
|
-
{ name: "--ease-out-cubic", value: "cubic-bezier(0.33, 1, 0.68, 1)" },
|
|
208
|
-
{ name: "--ease-in-out-cubic", value: "cubic-bezier(0.65, 0, 0.35, 1)" },
|
|
209
|
-
{ name: "--ease-in-quart", value: "cubic-bezier(0.5, 0, 0.75, 0)" },
|
|
210
|
-
{ name: "--ease-out-quart", value: "cubic-bezier(0.25, 1, 0.5, 1)" },
|
|
211
|
-
{ name: "--ease-in-out-quart", value: "cubic-bezier(0.76, 0, 0.24, 1)" },
|
|
212
|
-
{ name: "--ease-in-quint", value: "cubic-bezier(0.64, 0, 0.78, 0)" },
|
|
213
|
-
{ name: "--ease-out-quint", value: "cubic-bezier(0.22, 1, 0.36, 1)" },
|
|
214
|
-
{ name: "--ease-in-out-quint", value: "cubic-bezier(0.83, 0, 0.17, 1)" },
|
|
215
|
-
{ name: "--ease-in-expo", value: "cubic-bezier(0.7, 0, 0.84, 0)" },
|
|
216
|
-
{ name: "--ease-out-expo", value: "cubic-bezier(0.16, 1, 0.3, 1)" },
|
|
217
|
-
{ name: "--ease-in-out-expo", value: "cubic-bezier(0.87, 0, 0.13, 1)" },
|
|
218
|
-
{ name: "--ease-in-circ", value: "cubic-bezier(0.55, 0, 1, 0.45)" },
|
|
219
|
-
{ name: "--ease-out-circ", value: "cubic-bezier(0, 0.55, 0.45, 1)" },
|
|
220
|
-
{ name: "--ease-in-out-circ", value: "cubic-bezier(0.85, 0, 0.15, 1)" },
|
|
221
|
-
{ name: "--ease-in-back", value: "cubic-bezier(0.36, 0, 0.66, -0.56)" },
|
|
222
|
-
{ name: "--ease-out-back", value: "cubic-bezier(0.34, 1.56, 0.64, 1)" },
|
|
223
|
-
{ name: "--ease-in-out-back", value: "cubic-bezier(0.68, -0.6, 0.32, 1.6)" },
|
|
224
|
-
{
|
|
225
|
-
name: "--ease-in-elastic",
|
|
226
|
-
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)"
|
|
227
|
-
},
|
|
228
|
-
{
|
|
229
|
-
name: "--ease-out-elastic",
|
|
230
|
-
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%)"
|
|
231
|
-
},
|
|
232
|
-
{
|
|
233
|
-
name: "--ease-in-out-elastic",
|
|
234
|
-
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)"
|
|
235
|
-
},
|
|
236
|
-
{
|
|
237
|
-
name: "--ease-in-bounce",
|
|
238
|
-
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)"
|
|
239
|
-
},
|
|
240
|
-
{
|
|
241
|
-
name: "--ease-out-bounce",
|
|
242
|
-
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)"
|
|
243
|
-
},
|
|
244
|
-
{
|
|
245
|
-
name: "--ease-in-out-bounce",
|
|
246
|
-
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)"
|
|
247
|
-
}
|
|
248
|
-
]
|
|
249
|
-
});
|
|
250
|
-
out = ensureScale(out, {
|
|
251
|
-
sectionComment: "Invariants \u2014 never themed, not part of any ramp.",
|
|
252
|
-
anchorPrefixes: ["--color-"],
|
|
253
|
-
entries: [
|
|
254
|
-
{ name: "--color-white", value: "#ffffff" },
|
|
255
|
-
{ name: "--color-black", value: "#000000" }
|
|
256
|
-
]
|
|
257
|
-
});
|
|
258
|
-
out = ensureScale(out, {
|
|
259
|
-
anchorPrefixes: ["--font-size-", "--font-"],
|
|
260
|
-
entries: [{ name: "--font-size-7xl", value: "4.5rem" }]
|
|
261
|
-
});
|
|
262
|
-
return out;
|
|
263
|
-
}
|
|
264
|
-
};
|
|
265
|
-
|
|
266
|
-
// vite-plugin/tokensCssMigrations/migrations/2026-07-20-line-height-rename.ts
|
|
267
|
-
var RENAMES = [
|
|
268
|
-
["--line-height-xs", "--line-height-none"],
|
|
269
|
-
["--line-height-sm", "--line-height-tighter"],
|
|
270
|
-
["--line-height-md", "--line-height-normal"],
|
|
271
|
-
["--line-height-lg", "--line-height-relaxed"]
|
|
272
|
-
];
|
|
273
|
-
var SCALE = [
|
|
274
|
-
{ name: "--line-height-none", value: "1" },
|
|
275
|
-
{ name: "--line-height-tightest", value: "1.1" },
|
|
276
|
-
{ name: "--line-height-tighter", value: "1.25" },
|
|
277
|
-
{ name: "--line-height-tight", value: "1.35" },
|
|
278
|
-
{ name: "--line-height-normal", value: "1.5" },
|
|
279
|
-
{ name: "--line-height-relaxed", value: "1.75" }
|
|
280
|
-
];
|
|
281
|
-
var tokensCssMigration_2026_07_20_lineHeightRename = {
|
|
282
|
-
id: "2026-07-20-line-height-rename",
|
|
283
|
-
kind: "breaking",
|
|
284
|
-
description: "Reshape --line-height-{xs..xl} to leading vocabulary (none/tightest/tighter/tight/normal/relaxed); retire the 2.0 slot",
|
|
285
|
-
apply(css) {
|
|
286
|
-
let out = css;
|
|
287
|
-
for (const [oldName, newName] of RENAMES) out = renameToken(out, oldName, newName);
|
|
288
|
-
out = removeToken(out, "--line-height-xl");
|
|
289
|
-
out = ensureScale(out, {
|
|
290
|
-
anchorPrefixes: ["--line-height-", "--font-size-", "--font-weight-", "--font-"],
|
|
291
|
-
entries: SCALE
|
|
292
|
-
});
|
|
293
|
-
return out;
|
|
294
|
-
}
|
|
295
|
-
};
|
|
296
|
-
|
|
297
|
-
// vite-plugin/tokensCssMigrations/migrations/2026-07-20-semantic-text-styles.ts
|
|
298
|
-
var BUNDLE = [
|
|
299
|
-
{ name: "--heading-xl-font-family", value: "var(--font-display)" },
|
|
300
|
-
{ name: "--heading-xl-font-size", value: "var(--font-size-4xl)" },
|
|
301
|
-
{ name: "--heading-xl-font-weight", value: "var(--font-weight-semibold)" },
|
|
302
|
-
{ name: "--heading-xl-line-height", value: "var(--line-height-tightest)" },
|
|
303
|
-
{ name: "--heading-xl-letter-spacing", value: "var(--letter-spacing-normal)" },
|
|
304
|
-
{ name: "--heading-lg-font-family", value: "var(--font-display)" },
|
|
305
|
-
{ name: "--heading-lg-font-size", value: "var(--font-size-2xl)" },
|
|
306
|
-
{ name: "--heading-lg-font-weight", value: "var(--font-weight-semibold)" },
|
|
307
|
-
{ name: "--heading-lg-line-height", value: "var(--line-height-tightest)" },
|
|
308
|
-
{ name: "--heading-lg-letter-spacing", value: "var(--letter-spacing-normal)" },
|
|
309
|
-
{ name: "--heading-md-font-family", value: "var(--font-display)" },
|
|
310
|
-
{ name: "--heading-md-font-size", value: "var(--font-size-xl)" },
|
|
311
|
-
{ name: "--heading-md-font-weight", value: "var(--font-weight-semibold)" },
|
|
312
|
-
{ name: "--heading-md-line-height", value: "var(--line-height-tighter)" },
|
|
313
|
-
{ name: "--heading-md-letter-spacing", value: "var(--letter-spacing-normal)" },
|
|
314
|
-
{ name: "--heading-sm-font-family", value: "var(--font-sans)" },
|
|
315
|
-
{ name: "--heading-sm-font-size", value: "var(--font-size-lg)" },
|
|
316
|
-
{ name: "--heading-sm-font-weight", value: "var(--font-weight-semibold)" },
|
|
317
|
-
{ name: "--heading-sm-line-height", value: "var(--line-height-tighter)" },
|
|
318
|
-
{ name: "--heading-sm-letter-spacing", value: "var(--letter-spacing-normal)" },
|
|
319
|
-
{ name: "--body-md-font-family", value: "var(--font-sans)" },
|
|
320
|
-
{ name: "--body-md-font-size", value: "var(--font-size-md)" },
|
|
321
|
-
{ name: "--body-md-font-weight", value: "var(--font-weight-normal)" },
|
|
322
|
-
{ name: "--body-md-line-height", value: "var(--line-height-normal)" },
|
|
323
|
-
{ name: "--body-md-letter-spacing", value: "var(--letter-spacing-normal)" },
|
|
324
|
-
{ name: "--body-sm-font-family", value: "var(--font-sans)" },
|
|
325
|
-
{ name: "--body-sm-font-size", value: "var(--font-size-sm)" },
|
|
326
|
-
{ name: "--body-sm-font-weight", value: "var(--font-weight-normal)" },
|
|
327
|
-
{ name: "--body-sm-line-height", value: "var(--line-height-tight)" },
|
|
328
|
-
{ name: "--body-sm-letter-spacing", value: "var(--letter-spacing-normal)" },
|
|
329
|
-
{ name: "--code-font-family", value: "var(--font-mono)" },
|
|
330
|
-
{ name: "--code-font-size", value: "var(--font-size-sm)" },
|
|
331
|
-
{ name: "--code-font-weight", value: "var(--font-weight-normal)" },
|
|
332
|
-
{ name: "--code-line-height", value: "var(--line-height-normal)" },
|
|
333
|
-
{ name: "--code-letter-spacing", value: "var(--letter-spacing-normal)" },
|
|
334
|
-
{ name: "--eyebrow-font-family", value: "var(--font-sans)" },
|
|
335
|
-
{ name: "--eyebrow-font-size", value: "var(--font-size-sm)" },
|
|
336
|
-
{ name: "--eyebrow-font-weight", value: "var(--font-weight-normal)" },
|
|
337
|
-
{ name: "--eyebrow-line-height", value: "var(--line-height-normal)" },
|
|
338
|
-
{ name: "--eyebrow-letter-spacing", value: "var(--letter-spacing-normal)" },
|
|
339
|
-
{ name: "--eyebrow-text-transform", value: "none" }
|
|
340
|
-
];
|
|
341
|
-
var tokensCssMigration_2026_07_20_semanticTextStyles = {
|
|
342
|
-
id: "2026-07-20-semantic-text-styles",
|
|
343
|
-
kind: "additive",
|
|
344
|
-
description: "Add the semantic text-style bundles (--heading-*/--body-*/--code-*/--eyebrow-*)",
|
|
345
|
-
apply(css) {
|
|
346
|
-
return ensureScale(css, {
|
|
347
|
-
sectionComment: "Text styles \u2014 semantic typography roles",
|
|
348
|
-
anchorPrefixes: [
|
|
349
|
-
"--eyebrow-",
|
|
350
|
-
"--code-",
|
|
351
|
-
"--body-",
|
|
352
|
-
"--heading-",
|
|
353
|
-
"--letter-spacing-",
|
|
354
|
-
"--line-height-",
|
|
355
|
-
"--font-weight-",
|
|
356
|
-
"--font-size-",
|
|
357
|
-
"--font-"
|
|
358
|
-
],
|
|
359
|
-
entries: BUNDLE
|
|
360
|
-
});
|
|
361
|
-
}
|
|
362
|
-
};
|
|
363
|
-
|
|
364
|
-
// vite-plugin/tokensCssMigrations/migrations/2026-08-19-oklch-color-values.ts
|
|
365
|
-
var HEX_DECLARATION_RE = /(--[a-z0-9-]+:\s*)#([0-9a-f]{6})(?=\s*[;}])/gi;
|
|
366
|
-
var tokensCssMigration_2026_08_19_oklchColorValues = {
|
|
367
|
-
id: "2026-08-19-oklch-color-values",
|
|
368
|
-
kind: "breaking",
|
|
369
|
-
description: "Rewrite hex token values as oklch()",
|
|
370
|
-
apply(css) {
|
|
371
|
-
return css.replace(HEX_DECLARATION_RE, (_match, prefix, hex) => {
|
|
372
|
-
const { l, c, h } = hexToOklch(`#${hex}`);
|
|
373
|
-
return `${prefix}${oklchToCss(l, c, h)}`;
|
|
374
|
-
});
|
|
375
|
-
}
|
|
376
|
-
};
|
|
377
|
-
|
|
378
|
-
// vite-plugin/tokensCssMigrations/migrations/2026-08-25-editorial-type-role.ts
|
|
379
|
-
var STACK = [{ name: "--font-editorial", value: "var(--font-sans)" }];
|
|
380
|
-
var tokensCssMigration_2026_08_25_editorialTypeRole = {
|
|
381
|
-
id: "2026-08-25-editorial-type-role",
|
|
382
|
-
kind: "additive",
|
|
383
|
-
description: "Add the editorial type role (--font-editorial)",
|
|
384
|
-
apply(css) {
|
|
385
|
-
return ensureScale(css, {
|
|
386
|
-
anchorPrefixes: ["--font-mono", "--font-serif", "--font-sans", "--font-display"],
|
|
387
|
-
entries: STACK
|
|
388
|
-
});
|
|
389
|
-
}
|
|
390
|
-
};
|
|
391
|
-
|
|
392
|
-
// vite-plugin/tokensCssMigrations/migrations/2026-08-26-gradient-stops.ts
|
|
393
|
-
var STOPS_RE = /^(?:linear|radial)-gradient\(\s*[^,]+,\s*(.+)\)$/i;
|
|
394
|
-
var tokensCssMigration_2026_08_26_gradientStops = {
|
|
395
|
-
id: "2026-08-26-gradient-stops",
|
|
396
|
-
kind: "additive",
|
|
397
|
-
description: "Add --gradient-N-stops companions to the gradient slots",
|
|
398
|
-
apply(css) {
|
|
399
|
-
const values = collectTokenValues(css);
|
|
400
|
-
const entries = [];
|
|
401
|
-
for (const [name, value] of values) {
|
|
402
|
-
if (!/^--gradient-\d+$/.test(name)) continue;
|
|
403
|
-
const stops = value.match(STOPS_RE);
|
|
404
|
-
if (stops) entries.push({ name: `${name}-stops`, value: stops[1].trim() });
|
|
405
|
-
}
|
|
406
|
-
if (entries.length === 0) return css;
|
|
407
|
-
return ensureScale(css, { anchorPrefixes: ["--gradient-"], entries });
|
|
408
|
-
}
|
|
409
|
-
};
|
|
410
|
-
|
|
411
|
-
// vite-plugin/tokensCssMigrations/migrations/2026-08-27-backdrop-polarity.ts
|
|
412
|
-
var MARKER = "[data-backdrop='dark']";
|
|
413
|
-
var RULES = `/* BACKDROP POLARITY \u2014 one attribute says which way a surface leans. State it
|
|
414
|
-
in markup (\`<section data-backdrop="dark">\`) or let \`use:backdrop\` measure
|
|
415
|
-
and stamp it. Either way \`light-dark()\` inside resolves the right half, and
|
|
416
|
-
a rule can key on the attribute for what colour alone cannot carry. */
|
|
417
|
-
|
|
418
|
-
[data-backdrop='light'] {
|
|
419
|
-
color-scheme: light;
|
|
420
|
-
}
|
|
421
|
-
|
|
422
|
-
[data-backdrop='dark'] {
|
|
423
|
-
color-scheme: dark;
|
|
424
|
-
}
|
|
425
|
-
`;
|
|
426
|
-
var tokensCssMigration_2026_08_27_backdropPolarity = {
|
|
427
|
-
id: "2026-08-27-backdrop-polarity",
|
|
428
|
-
kind: "additive",
|
|
429
|
-
description: "Add the [data-backdrop] \u2192 color-scheme rules",
|
|
430
|
-
apply(css) {
|
|
431
|
-
if (css.includes(MARKER)) return css;
|
|
432
|
-
const at = css.indexOf(":root");
|
|
433
|
-
if (at === -1) return `${css.trimEnd()}
|
|
434
|
-
|
|
435
|
-
${RULES}`;
|
|
436
|
-
return `${css.slice(0, at)}${RULES}
|
|
437
|
-
${css.slice(at)}`;
|
|
438
|
-
}
|
|
439
|
-
};
|
|
440
|
-
|
|
441
|
-
// vite-plugin/tokensCssMigrations/migrations/2026-08-27-editorial-size-steps.ts
|
|
442
|
-
var AXES = ["font-family", "font-size", "font-weight", "line-height", "letter-spacing"];
|
|
443
|
-
var BUNDLE2 = [
|
|
444
|
-
{ name: "--editorial-md-font-family", value: "var(--font-editorial)" },
|
|
445
|
-
{ name: "--editorial-md-font-size", value: "var(--font-size-md)" },
|
|
446
|
-
{ name: "--editorial-md-font-weight", value: "var(--font-weight-normal)" },
|
|
447
|
-
{ name: "--editorial-md-line-height", value: "var(--line-height-normal)" },
|
|
448
|
-
{ name: "--editorial-md-letter-spacing", value: "var(--letter-spacing-normal)" },
|
|
449
|
-
{ name: "--editorial-sm-font-family", value: "var(--font-editorial)" },
|
|
450
|
-
{ name: "--editorial-sm-font-size", value: "var(--font-size-sm)" },
|
|
451
|
-
{ name: "--editorial-sm-font-weight", value: "var(--font-weight-normal)" },
|
|
452
|
-
{ name: "--editorial-sm-line-height", value: "var(--line-height-tight)" },
|
|
453
|
-
{ name: "--editorial-sm-letter-spacing", value: "var(--letter-spacing-normal)" }
|
|
454
|
-
];
|
|
455
|
-
var tokensCssMigration_2026_08_27_editorialSizeSteps = {
|
|
456
|
-
id: "2026-08-27-editorial-size-steps",
|
|
457
|
-
kind: "breaking",
|
|
458
|
-
description: "Split the editorial bundle into --editorial-md-* and --editorial-sm-* steps",
|
|
459
|
-
apply(css) {
|
|
460
|
-
let out = css;
|
|
461
|
-
for (const axis of AXES) {
|
|
462
|
-
out = renameToken(out, `--editorial-${axis}`, `--editorial-md-${axis}`);
|
|
463
|
-
}
|
|
464
|
-
return ensureScale(out, {
|
|
465
|
-
sectionComment: "Editorial \u2014 the long-reading role, body face until repointed",
|
|
466
|
-
anchorPrefixes: [
|
|
467
|
-
"--eyebrow-",
|
|
468
|
-
"--code-",
|
|
469
|
-
"--body-",
|
|
470
|
-
"--heading-",
|
|
471
|
-
"--letter-spacing-",
|
|
472
|
-
"--line-height-",
|
|
473
|
-
"--font-weight-",
|
|
474
|
-
"--font-size-",
|
|
475
|
-
"--font-"
|
|
476
|
-
],
|
|
477
|
-
entries: BUNDLE2
|
|
478
|
-
});
|
|
479
|
-
}
|
|
480
|
-
};
|
|
481
|
-
|
|
482
|
-
// vite-plugin/tokensCssMigrations/migrations/2026-08-27-editorial-large-steps.ts
|
|
483
|
-
var BUNDLE3 = [
|
|
484
|
-
{ name: "--editorial-xl-font-family", value: "var(--font-editorial)" },
|
|
485
|
-
{ name: "--editorial-xl-font-size", value: "var(--font-size-xl)" },
|
|
486
|
-
{ name: "--editorial-xl-font-weight", value: "var(--font-weight-normal)" },
|
|
487
|
-
{ name: "--editorial-xl-line-height", value: "var(--line-height-tighter)" },
|
|
488
|
-
{ name: "--editorial-xl-letter-spacing", value: "var(--letter-spacing-normal)" },
|
|
489
|
-
{ name: "--editorial-lg-font-family", value: "var(--font-editorial)" },
|
|
490
|
-
{ name: "--editorial-lg-font-size", value: "var(--font-size-lg)" },
|
|
491
|
-
{ name: "--editorial-lg-font-weight", value: "var(--font-weight-normal)" },
|
|
492
|
-
{ name: "--editorial-lg-line-height", value: "var(--line-height-tight)" },
|
|
493
|
-
{ name: "--editorial-lg-letter-spacing", value: "var(--letter-spacing-normal)" }
|
|
494
|
-
];
|
|
495
|
-
var tokensCssMigration_2026_08_27_editorialLargeSteps = {
|
|
496
|
-
id: "2026-08-27-editorial-large-steps",
|
|
497
|
-
kind: "additive",
|
|
498
|
-
description: "Add the --editorial-lg-* and --editorial-xl-* steps above the reading size",
|
|
499
|
-
apply(css) {
|
|
500
|
-
return ensureScale(css, {
|
|
501
|
-
sectionComment: "Editorial \u2014 the steps above the reading size",
|
|
502
|
-
anchorPrefixes: [
|
|
503
|
-
"--editorial-",
|
|
504
|
-
"--eyebrow-",
|
|
505
|
-
"--code-",
|
|
506
|
-
"--body-",
|
|
507
|
-
"--heading-",
|
|
508
|
-
"--letter-spacing-",
|
|
509
|
-
"--line-height-",
|
|
510
|
-
"--font-weight-",
|
|
511
|
-
"--font-size-",
|
|
512
|
-
"--font-"
|
|
513
|
-
],
|
|
514
|
-
entries: BUNDLE3
|
|
515
|
-
});
|
|
516
|
-
}
|
|
517
|
-
};
|
|
518
|
-
|
|
519
|
-
// vite-plugin/tokensCssMigrations/migrations/2026-09-01-scrim-rename.ts
|
|
520
|
-
var RENAMES2 = [
|
|
521
|
-
["--overlay-low", "--scrim-low"],
|
|
522
|
-
["--overlay-high", "--scrim-high"],
|
|
523
|
-
["--overlay", "--scrim"]
|
|
524
|
-
];
|
|
525
|
-
var tokensCssMigration_2026_09_01_scrimRename = {
|
|
526
|
-
id: "2026-09-01-scrim-rename",
|
|
527
|
-
kind: "breaking",
|
|
528
|
-
description: "Rename --overlay-{low,base,high} to --scrim-*; a scrim dims what is behind it",
|
|
529
|
-
apply(css) {
|
|
530
|
-
let out = css;
|
|
531
|
-
for (const [oldName, newName] of RENAMES2) out = renameToken(out, oldName, newName);
|
|
532
|
-
return out;
|
|
533
|
-
}
|
|
534
|
-
};
|
|
535
|
-
|
|
536
|
-
// vite-plugin/tokensCssMigrations/migrations/2026-09-01-tint-scale.ts
|
|
537
|
-
var ENTRIES = [
|
|
538
|
-
{ name: "--tint-low", value: "rgba(255, 255, 255, 0.05)" },
|
|
539
|
-
{ name: "--tint", value: "rgba(255, 255, 255, 0.1)" },
|
|
540
|
-
{ name: "--tint-high", value: "rgba(255, 255, 255, 0.15)" }
|
|
541
|
-
];
|
|
542
|
-
var tokensCssMigration_2026_09_01_tintScale = {
|
|
543
|
-
id: "2026-09-01-tint-scale",
|
|
544
|
-
kind: "additive",
|
|
545
|
-
description: "Add the --tint-* scale; a tint shades the surface it sits on",
|
|
546
|
-
apply(css) {
|
|
547
|
-
return ensureScale(css, {
|
|
548
|
-
entries: ENTRIES,
|
|
549
|
-
sectionComment: "Tints \u2014 translucent washes that shade the surface they sit on",
|
|
550
|
-
anchorPrefixes: ["--scrim", "--overlay"]
|
|
551
|
-
});
|
|
552
|
-
}
|
|
553
|
-
};
|
|
554
|
-
|
|
555
|
-
// vite-plugin/tokensCssMigrations/migrations/2026-09-20-scrim-color-and-opacity.ts
|
|
556
|
-
var ENTRIES2 = [
|
|
557
|
-
{ name: "--scrim-color", value: "rgb(20, 3, 0)" },
|
|
558
|
-
{ name: "--scrim-opacity-low", value: "0.38" },
|
|
559
|
-
{ name: "--scrim-opacity", value: "0.51" },
|
|
560
|
-
{ name: "--scrim-opacity-high", value: "0.64" }
|
|
561
|
-
];
|
|
562
|
-
var tokensCssMigration_2026_09_20_scrimColorAndOpacity = {
|
|
563
|
-
id: "2026-09-20-scrim-color-and-opacity",
|
|
564
|
-
kind: "additive",
|
|
565
|
-
description: "Add --scrim-color and --scrim-opacity-*; a scrim's colour and strength are separate tokens",
|
|
566
|
-
apply(css) {
|
|
567
|
-
return ensureScale(css, {
|
|
568
|
-
entries: ENTRIES2,
|
|
569
|
-
sectionComment: "Scrim colour and strength, which each screen mixes where it paints",
|
|
570
|
-
anchorPrefixes: ["--scrim"]
|
|
571
|
-
});
|
|
572
|
-
}
|
|
573
|
-
};
|
|
574
|
-
|
|
575
|
-
// vite-plugin/tokensCssMigrations/migrations/2026-09-21-tint-color-and-opacity.ts
|
|
576
|
-
var ENTRIES3 = [
|
|
577
|
-
{ name: "--tint-color", value: "rgb(255, 255, 255)" },
|
|
578
|
-
{ name: "--tint-opacity-low", value: "0.05" },
|
|
579
|
-
{ name: "--tint-opacity", value: "0.1" },
|
|
580
|
-
{ name: "--tint-opacity-high", value: "0.15" }
|
|
581
|
-
];
|
|
582
|
-
var tokensCssMigration_2026_09_21_tintColorAndOpacity = {
|
|
583
|
-
id: "2026-09-21-tint-color-and-opacity",
|
|
584
|
-
kind: "additive",
|
|
585
|
-
description: "Add --tint-color and --tint-opacity-*; a tint's colour and strength are separate tokens",
|
|
586
|
-
apply(css) {
|
|
587
|
-
return ensureScale(css, {
|
|
588
|
-
entries: ENTRIES3,
|
|
589
|
-
sectionComment: "Tint colour and strength, which the --tint-* stops compose",
|
|
590
|
-
anchorPrefixes: ["--tint"]
|
|
591
|
-
});
|
|
592
|
-
}
|
|
593
|
-
};
|
|
594
|
-
|
|
595
|
-
// vite-plugin/tokensCssMigrations/index.ts
|
|
596
|
-
var TOKENS_CSS_MIGRATIONS = [
|
|
597
|
-
tokensCssMigration_2026_05_29_typographyScaleAdditions,
|
|
598
|
-
tokensCssMigration_2026_05_29_sectiondividerLegacyAxisCleanup,
|
|
599
|
-
tokensCssMigration_2026_06_03_transformScaleAdditions,
|
|
600
|
-
tokensCssMigration_2026_06_04_removeDeadSizeIconScale,
|
|
601
|
-
tokensCssMigration_2026_06_04_easingColorAndTypescaleAdditions,
|
|
602
|
-
tokensCssMigration_2026_07_20_lineHeightRename,
|
|
603
|
-
tokensCssMigration_2026_07_20_semanticTextStyles,
|
|
604
|
-
tokensCssMigration_2026_08_19_oklchColorValues,
|
|
605
|
-
tokensCssMigration_2026_08_25_editorialTypeRole,
|
|
606
|
-
tokensCssMigration_2026_08_26_gradientStops,
|
|
607
|
-
tokensCssMigration_2026_08_27_backdropPolarity,
|
|
608
|
-
tokensCssMigration_2026_08_27_editorialSizeSteps,
|
|
609
|
-
tokensCssMigration_2026_08_27_editorialLargeSteps,
|
|
610
|
-
tokensCssMigration_2026_09_01_scrimRename,
|
|
611
|
-
tokensCssMigration_2026_09_01_tintScale,
|
|
612
|
-
tokensCssMigration_2026_09_20_scrimColorAndOpacity,
|
|
613
|
-
tokensCssMigration_2026_09_21_tintColorAndOpacity
|
|
614
|
-
];
|
|
615
|
-
function runTokensCssMigrations(css) {
|
|
616
|
-
return foldMigrations(css, () => true);
|
|
617
|
-
}
|
|
618
|
-
function runAdditiveTokensCssMigrations(css) {
|
|
619
|
-
return foldMigrations(css, (m) => m.kind === "additive");
|
|
620
|
-
}
|
|
621
|
-
function foldMigrations(css, include) {
|
|
622
|
-
let out = css;
|
|
623
|
-
const applied = [];
|
|
624
|
-
for (const m of TOKENS_CSS_MIGRATIONS) {
|
|
625
|
-
if (!include(m)) continue;
|
|
626
|
-
const next = m.apply(out);
|
|
627
|
-
if (next !== out) {
|
|
628
|
-
applied.push(m.id);
|
|
629
|
-
out = next;
|
|
630
|
-
}
|
|
631
|
-
}
|
|
632
|
-
return { css: out, applied, changed: out !== css };
|
|
633
|
-
}
|
|
634
|
-
function findContractViolations(canonicalCss) {
|
|
635
|
-
const violations = [];
|
|
636
|
-
for (const m of TOKENS_CSS_MIGRATIONS) {
|
|
637
|
-
if (m.kind !== "additive") continue;
|
|
638
|
-
const before = collectTokenValues(canonicalCss);
|
|
639
|
-
const after = collectTokenValues(m.apply(canonicalCss));
|
|
640
|
-
const removed = [...before.keys()].filter((t) => !after.has(t)).sort();
|
|
641
|
-
const changed = [...before.entries()].filter(([t, v]) => after.has(t) && after.get(t) !== v).map(([t]) => t).sort();
|
|
642
|
-
if (removed.length || changed.length) violations.push({ id: m.id, removed, changed });
|
|
643
|
-
}
|
|
644
|
-
return violations;
|
|
645
|
-
}
|
|
646
|
-
function semverBumpType(prev, next) {
|
|
647
|
-
const p = parseSemver(prev);
|
|
648
|
-
const n = parseSemver(next);
|
|
649
|
-
if (n.major > p.major) return "major";
|
|
650
|
-
if (n.major === p.major && n.minor > p.minor) return "minor";
|
|
651
|
-
if (n.major === p.major && n.minor === p.minor && n.patch > p.patch) return "patch";
|
|
652
|
-
return "none";
|
|
653
|
-
}
|
|
654
|
-
function parseSemver(v) {
|
|
655
|
-
const [core] = v.replace(/^v/, "").split(/[-+]/);
|
|
656
|
-
const [major = 0, minor = 0, patch = 0] = core.split(".").map((n) => Number(n) || 0);
|
|
657
|
-
return { major, minor, patch };
|
|
658
|
-
}
|
|
659
|
-
function enforceBreakingRequiresMajor(args) {
|
|
660
|
-
const breakingIds = args.newMigrations.filter((m) => m.kind === "breaking").map((m) => m.id);
|
|
661
|
-
const bump = semverBumpType(args.prevVersion, args.nextVersion);
|
|
662
|
-
if (breakingIds.length === 0 || bump === "major") {
|
|
663
|
-
return { level: "ok", breakingIds, bump, message: "" };
|
|
664
|
-
}
|
|
665
|
-
const pre1 = parseSemver(args.nextVersion).major < 1;
|
|
666
|
-
const ids = breakingIds.join(", ");
|
|
667
|
-
return {
|
|
668
|
-
level: pre1 ? "warn" : "error",
|
|
669
|
-
breakingIds,
|
|
670
|
-
bump,
|
|
671
|
-
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.`)
|
|
672
|
-
};
|
|
673
|
-
}
|
|
674
|
-
function validateTokensCss(input) {
|
|
675
|
-
const defined = /* @__PURE__ */ new Set([
|
|
676
|
-
...collectDefinedTokens(input.tokensCss),
|
|
677
|
-
...collectDefinedTokens(input.generatedCss ?? "")
|
|
678
|
-
]);
|
|
679
|
-
const referencedBy = /* @__PURE__ */ new Map();
|
|
680
|
-
for (const { name, source } of input.componentSources) {
|
|
681
|
-
const body = extractGlobalRootBody(source);
|
|
682
|
-
if (!body) continue;
|
|
683
|
-
for (const t of collectDefinedTokens(body)) defined.add(t);
|
|
684
|
-
for (const ref of collectReferencedTokens(body)) {
|
|
685
|
-
let set = referencedBy.get(ref);
|
|
686
|
-
if (!set) referencedBy.set(ref, set = /* @__PURE__ */ new Set());
|
|
687
|
-
set.add(name);
|
|
688
|
-
}
|
|
689
|
-
}
|
|
690
|
-
const missing = [];
|
|
691
|
-
for (const [token, names] of referencedBy) {
|
|
692
|
-
if (!defined.has(token)) {
|
|
693
|
-
missing.push({ token, referencedBy: [...names].sort() });
|
|
694
|
-
}
|
|
695
|
-
}
|
|
696
|
-
return missing.sort((a, b) => a.token.localeCompare(b.token));
|
|
697
|
-
}
|
|
698
|
-
|
|
699
|
-
export {
|
|
700
|
-
extractGlobalRootBody,
|
|
701
|
-
collectDefinedTokens,
|
|
702
|
-
collectTokenValues,
|
|
703
|
-
collectReferencedTokens,
|
|
704
|
-
ensureScale,
|
|
705
|
-
renameToken,
|
|
706
|
-
removeToken,
|
|
707
|
-
removeTokensMatching,
|
|
708
|
-
TOKENS_CSS_MIGRATIONS,
|
|
709
|
-
runTokensCssMigrations,
|
|
710
|
-
runAdditiveTokensCssMigrations,
|
|
711
|
-
findContractViolations,
|
|
712
|
-
semverBumpType,
|
|
713
|
-
enforceBreakingRequiresMajor,
|
|
714
|
-
validateTokensCss
|
|
715
|
-
};
|