@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
@@ -23,7 +23,7 @@ import {
23
23
  runAdditiveTokensCssMigrations,
24
24
  runTokensCssMigrations,
25
25
  validateTokensCss
26
- } from "./chunk-GWMEYBZ2.js";
26
+ } from "./chunk-JOSSYGR2.js";
27
27
  import {
28
28
  hexToOklch,
29
29
  oklchToRgb255,
@@ -324,6 +324,7 @@ function inferFontFamilyVariable(weightVariable) {
324
324
  // src/editor/core/fonts/weightCoverage.ts
325
325
  var STACK_REF = /var\(\s*(--font-(?:display|sans|serif|mono))\s*\)/;
326
326
  var VAR_REF = /var\(\s*(--[a-z0-9-]+)/i;
327
+ var ALIAS = /^var\(\s*(--[a-z0-9-]+)\s*\)$/i;
327
328
  function declarations(css) {
328
329
  const decls = /* @__PURE__ */ new Map();
329
330
  for (const [, name, value] of css.matchAll(/(--[a-z0-9-]+)\s*:\s*([^;{}]+);/gi)) {
@@ -331,6 +332,18 @@ function declarations(css) {
331
332
  }
332
333
  return decls;
333
334
  }
335
+ function follow(decls, value, read) {
336
+ const seen = /* @__PURE__ */ new Set();
337
+ while (value !== void 0) {
338
+ const hit = read(value);
339
+ if (hit !== void 0) return hit;
340
+ const next = value.match(ALIAS)?.[1];
341
+ if (!next || next.startsWith("--font-") || seen.has(next)) return void 0;
342
+ seen.add(next);
343
+ value = decls.get(next);
344
+ }
345
+ return void 0;
346
+ }
334
347
  function requiredWeights(tokensCss, overrides = {}) {
335
348
  const decls = declarations(tokensCss);
336
349
  for (const [name, value] of Object.entries(overrides)) decls.set(name, String(value).trim());
@@ -343,9 +356,17 @@ function requiredWeights(tokensCss, overrides = {}) {
343
356
  for (const [name, value] of decls) {
344
357
  const familyVariable = inferFontFamilyVariable(name);
345
358
  if (!familyVariable) continue;
346
- const stack = decls.get(familyVariable)?.match(STACK_REF)?.[1];
359
+ const stack = follow(
360
+ decls,
361
+ decls.get(familyVariable),
362
+ (v) => v.match(STACK_REF)?.[1]
363
+ );
347
364
  if (!stack) continue;
348
- const weight = /^\d+$/.test(value) ? Number(value) : scale.get(value.match(VAR_REF)?.[1] ?? "");
365
+ const weight = follow(
366
+ decls,
367
+ value,
368
+ (v) => /^\d+$/.test(v) ? Number(v) : scale.get(v.match(VAR_REF)?.[1] ?? "")
369
+ );
349
370
  if (weight === void 0) continue;
350
371
  const key = `${stack}:${weight}`;
351
372
  if (seen.has(key)) continue;
@@ -282,6 +282,7 @@ function inferFontFamilyVariable(weightVariable) {
282
282
  // src/editor/core/fonts/weightCoverage.ts
283
283
  var STACK_REF = /var\(\s*(--font-(?:display|sans|serif|mono))\s*\)/;
284
284
  var VAR_REF = /var\(\s*(--[a-z0-9-]+)/i;
285
+ var ALIAS = /^var\(\s*(--[a-z0-9-]+)\s*\)$/i;
285
286
  function declarations(css) {
286
287
  const decls = /* @__PURE__ */ new Map();
287
288
  for (const [, name, value] of css.matchAll(/(--[a-z0-9-]+)\s*:\s*([^;{}]+);/gi)) {
@@ -289,6 +290,18 @@ function declarations(css) {
289
290
  }
290
291
  return decls;
291
292
  }
293
+ function follow(decls, value, read) {
294
+ const seen = /* @__PURE__ */ new Set();
295
+ while (value !== void 0) {
296
+ const hit = read(value);
297
+ if (hit !== void 0) return hit;
298
+ const next = value.match(ALIAS)?.[1];
299
+ if (!next || next.startsWith("--font-") || seen.has(next)) return void 0;
300
+ seen.add(next);
301
+ value = decls.get(next);
302
+ }
303
+ return void 0;
304
+ }
292
305
  function requiredWeights(tokensCss, overrides = {}) {
293
306
  const decls = declarations(tokensCss);
294
307
  for (const [name, value] of Object.entries(overrides)) decls.set(name, String(value).trim());
@@ -301,9 +314,17 @@ function requiredWeights(tokensCss, overrides = {}) {
301
314
  for (const [name, value] of decls) {
302
315
  const familyVariable = inferFontFamilyVariable(name);
303
316
  if (!familyVariable) continue;
304
- const stack = decls.get(familyVariable)?.match(STACK_REF)?.[1];
317
+ const stack = follow(
318
+ decls,
319
+ decls.get(familyVariable),
320
+ (v) => v.match(STACK_REF)?.[1]
321
+ );
305
322
  if (!stack) continue;
306
- const weight = /^\d+$/.test(value) ? Number(value) : scale.get(value.match(VAR_REF)?.[1] ?? "");
323
+ const weight = follow(
324
+ decls,
325
+ value,
326
+ (v) => /^\d+$/.test(v) ? Number(v) : scale.get(v.match(VAR_REF)?.[1] ?? "")
327
+ );
307
328
  if (weight === void 0) continue;
308
329
  const key = `${stack}:${weight}`;
309
330
  if (seen.has(key)) continue;