@motion-proto/live-tokens 0.91.2 → 0.92.0

package/src/testing-js/page-compliance.contract.js

@@ -13,91 +13,244 @@ import {
 // src/testing/page-compliance.contract.ts
 import { test } from "@playwright/test";
 
+// src/editor/core/typeScale/typeScale.ts
+var USAGES = ["display", "heading", "body", "editorial", "code"];
+var STEPS = ["2xs", "xs", "sm", "md", "lg", "xl", "2xl"];
+var EXPONENT = {
+  "2xs": -3,
+  xs: -2,
+  sm: -1,
+  md: 0,
+  lg: 1,
+  xl: 2,
+  "2xl": 3
+};
+var VIEWPORTS = ["desktop", "tablet", "phone"];
+var allNormal = {
+  "2xs": "normal",
+  xs: "normal",
+  sm: "normal",
+  md: "normal",
+  lg: "normal",
+  xl: "normal",
+  "2xl": "normal"
+};
+var DEFAULTS = {
+  compression: { tablet: 0.75, phone: 0.63 },
+  usages: {
+    display: {
+      face: "--font-display",
+      weight: "--font-weight-semibold",
+      base: 3,
+      ratio: 1.2,
+      lineHeight: {
+        "2xs": "tighter",
+        xs: "tighter",
+        sm: "tighter",
+        md: "tightest",
+        lg: "tightest",
+        xl: "tightest",
+        "2xl": "tightest"
+      },
+      letterSpacing: { ...allNormal, lg: "tight", xl: "tight", "2xl": "tight" },
+      familyPins: {},
+      elements: {}
+    },
+    heading: {
+      face: "--font-display",
+      weight: "--font-weight-semibold",
+      base: 1.5,
+      ratio: 1.25,
+      lineHeight: {
+        "2xs": "tight",
+        xs: "tight",
+        sm: "tighter",
+        md: "tighter",
+        lg: "tightest",
+        xl: "tightest",
+        "2xl": "tightest"
+      },
+      letterSpacing: allNormal,
+      familyPins: { "2xs": "--font-sans", xs: "--font-sans", sm: "--font-sans" },
+      elements: { "2xs": ["h6"], xs: ["h5"], sm: ["h4"], md: ["h3"], lg: ["h2"], xl: ["h1"] }
+    },
+    body: {
+      face: "--font-sans",
+      weight: "--font-weight-normal",
+      base: 1,
+      ratio: 1.125,
+      lineHeight: {
+        "2xs": "tight",
+        xs: "tight",
+        sm: "tight",
+        md: "normal",
+        lg: "tight",
+        xl: "tighter",
+        "2xl": "tighter"
+      },
+      letterSpacing: allNormal,
+      familyPins: {},
+      elements: { sm: ["small"], md: ["p", "li"] }
+    },
+    editorial: {
+      face: "--font-editorial",
+      weight: "--font-weight-normal",
+      base: 1,
+      ratio: 1.125,
+      lineHeight: {
+        "2xs": "tighter",
+        xs: "tighter",
+        sm: "tight",
+        md: "normal",
+        lg: "tight",
+        xl: "tighter",
+        "2xl": "tightest"
+      },
+      letterSpacing: allNormal,
+      familyPins: {},
+      elements: {}
+    },
+    code: {
+      face: "--font-mono",
+      weight: "--font-weight-normal",
+      base: 0.875,
+      ratio: 1.125,
+      lineHeight: {
+        "2xs": "normal",
+        xs: "normal",
+        sm: "normal",
+        md: "normal",
+        lg: "normal",
+        xl: "normal",
+        "2xl": "normal"
+      },
+      letterSpacing: allNormal,
+      familyPins: {},
+      elements: { md: ["pre"] }
+    }
+  },
+  eyebrow: {
+    usage: "body",
+    sizeStep: "sm",
+    lineHeight: "normal",
+    letterSpacing: "normal",
+    textTransform: "none"
+  }
+};
+var EYEBROW_PREFIX = "--eyebrow";
+var compressionName = (viewport) => `--type-${viewport}-scale-compression`;
+var usageName = (usage, setting) => `--${usage}-${setting}`;
+var stepPrefix = (usage, step) => `--${usage}-${step}`;
+var axisName = (prefix, axis) => `${prefix}-${axis}`;
+var sizeName = (prefix, viewport) => `${prefix}-${viewport}-font-size`;
+var fontSizeName = (prefix) => `${prefix}-font-size`;
+var STEPS_DOWN = [...STEPS].reverse();
+var STYLE_PREFIXES = [
+  ...USAGES.flatMap((usage) => STEPS_DOWN.map((step) => stepPrefix(usage, step))),
+  EYEBROW_PREFIX
+];
+function formatNumber(n) {
+  return String(Number(n.toFixed(4)));
+}
+function scaleTerm(usage, step) {
+  const base = `var(${usageName(usage, "scale-base")})`;
+  const n = EXPONENT[step];
+  return n === 0 ? base : `${base} * pow(var(${usageName(usage, "scale-ratio")}), ${n})`;
+}
+function desktopScaleExpression(usage, step) {
+  return `calc(${scaleTerm(usage, step)} * 1rem)`;
+}
+function recommendationExpression(prefix, remTerm, viewport) {
+  return `min(var(${sizeName(prefix, "desktop")}), calc(pow(${remTerm}, var(${compressionName(viewport)})) * 1rem))`;
+}
+function recommendedScaleExpression(usage, step, viewport) {
+  return recommendationExpression(stepPrefix(usage, step), scaleTerm(usage, step), viewport);
+}
+var ref = (name) => `var(${name})`;
+var COMPRESSED = ["tablet", "phone"];
+function typeScaleDeclarations() {
+  const out = COMPRESSED.map((vp) => ({
+    name: compressionName(vp),
+    value: formatNumber(DEFAULTS.compression[vp])
+  }));
+  for (const usage of USAGES) {
+    const d = DEFAULTS.usages[usage];
+    out.push(
+      { name: usageName(usage, "font-family"), value: ref(d.face) },
+      { name: usageName(usage, "font-weight"), value: ref(d.weight) },
+      { name: usageName(usage, "scale-base"), value: formatNumber(d.base) },
+      { name: usageName(usage, "scale-ratio"), value: formatNumber(d.ratio) }
+    );
+    for (const step of STEPS_DOWN) {
+      const prefix = stepPrefix(usage, step);
+      const pin = d.familyPins[step];
+      out.push(
+        { name: axisName(prefix, "font-family"), value: ref(pin ?? usageName(usage, "font-family")) },
+        { name: sizeName(prefix, "desktop"), value: desktopScaleExpression(usage, step) },
+        ...COMPRESSED.map((vp) => ({
+          name: sizeName(prefix, vp),
+          value: recommendedScaleExpression(usage, step, vp)
+        })),
+        { name: fontSizeName(prefix), value: ref(sizeName(prefix, "desktop")) },
+        { name: axisName(prefix, "font-weight"), value: ref(usageName(usage, "font-weight")) },
+        { name: axisName(prefix, "line-height"), value: ref(`--line-height-${d.lineHeight[step]}`) },
+        { name: axisName(prefix, "letter-spacing"), value: ref(`--letter-spacing-${d.letterSpacing[step]}`) }
+      );
+    }
+  }
+  const e = DEFAULTS.eyebrow;
+  const follows = stepPrefix(e.usage, e.sizeStep);
+  out.push(
+    { name: axisName(EYEBROW_PREFIX, "font-family"), value: ref(usageName(e.usage, "font-family")) },
+    ...VIEWPORTS.map((vp) => ({ name: sizeName(EYEBROW_PREFIX, vp), value: ref(sizeName(follows, vp)) })),
+    { name: fontSizeName(EYEBROW_PREFIX), value: ref(sizeName(EYEBROW_PREFIX, "desktop")) },
+    { name: axisName(EYEBROW_PREFIX, "font-weight"), value: ref(usageName(e.usage, "font-weight")) },
+    { name: axisName(EYEBROW_PREFIX, "line-height"), value: ref(`--line-height-${e.lineHeight}`) },
+    { name: axisName(EYEBROW_PREFIX, "letter-spacing"), value: ref(`--letter-spacing-${e.letterSpacing}`) },
+    { name: axisName(EYEBROW_PREFIX, "text-transform"), value: e.textTransform }
+  );
+  return out;
+}
+var STRUCTURAL_NAMES = new Set(STYLE_PREFIXES.map(fontSizeName));
+var EDITABLE_NAMES = new Set(
+  typeScaleDeclarations().map((d) => d.name).filter((name) => !STRUCTURAL_NAMES.has(name))
+);
+
 // src/editor/ui/sections/textStyles.ts
+var USAGE_LABEL = {
+  display: "Display",
+  heading: "Heading",
+  body: "Body",
+  editorial: "Editorial",
+  code: "Code"
+};
+var USAGE_PREVIEW = {
+  display: "Tokens that move with every edit",
+  heading: "Choosing a palette for the launch page",
+  body: "Body copy for comfortable reading.",
+  editorial: "A pull quote sets the tone for the essay.",
+  code: "const total = sum(items.map(price));"
+};
 var TEXT_STYLES = [
-  {
-    name: "heading-xl",
-    label: "Heading XL",
-    prefix: "--heading-xl",
-    defaultElement: "h1",
-    preview: "Page title"
-  },
-  {
-    name: "heading-lg",
-    label: "Heading LG",
-    prefix: "--heading-lg",
-    defaultElement: "h2",
-    preview: "Section heading"
-  },
-  {
-    name: "heading-md",
-    label: "Heading MD",
-    prefix: "--heading-md",
-    defaultElement: "h3",
-    preview: "Subsection heading"
-  },
-  {
-    name: "heading-sm",
-    label: "Heading SM",
-    prefix: "--heading-sm",
-    defaultElement: "h4",
-    preview: "Minor heading"
-  },
-  {
-    name: "body-md",
-    label: "Body MD",
-    prefix: "--body-md",
-    defaultElement: "p",
-    preview: "Body copy for comfortable reading."
-  },
-  {
-    name: "body-sm",
-    label: "Body SM",
-    prefix: "--body-sm",
-    defaultElement: "small",
-    preview: "Captions and secondary text."
-  },
-  {
-    name: "editorial-xl",
-    label: "Editorial XL",
-    prefix: "--editorial-xl",
-    defaultElement: "editorial-xl",
-    preview: "Pull quotes and opening statements."
-  },
-  {
-    name: "editorial-lg",
-    label: "Editorial LG",
-    prefix: "--editorial-lg",
-    defaultElement: "editorial-lg",
-    preview: "Standfirsts and section ledes."
-  },
-  {
-    name: "editorial-md",
-    label: "Editorial MD",
-    prefix: "--editorial-md",
-    defaultElement: "editorial-md",
-    preview: "Long-form reading, set in the editorial face."
-  },
-  {
-    name: "editorial-sm",
-    label: "Editorial SM",
-    prefix: "--editorial-sm",
-    defaultElement: "editorial-sm",
-    preview: "Captions, credits, and asides."
-  },
-  {
-    name: "code",
-    label: "Code",
-    prefix: "--code",
-    defaultElement: "code",
-    preview: "const total = sum(items);"
-  },
+  ...USAGES.flatMap(
+    (usage) => [...STEPS].reverse().map((step) => {
+      const name = `${usage}-${step}`;
+      const elements = DEFAULTS.usages[usage].elements[step];
+      return {
+        name,
+        label: `${USAGE_LABEL[usage]} ${step.toUpperCase()}`,
+        prefix: stepPrefix(usage, step),
+        defaultElement: elements ? elements.join(", ") : `.${name}`,
+        preview: USAGE_PREVIEW[usage]
+      };
+    })
+  ),
   {
     name: "eyebrow",
     label: "Eyebrow",
-    prefix: "--eyebrow",
-    defaultElement: "eyebrow",
-    preview: "Overline label",
+    prefix: EYEBROW_PREFIX,
+    defaultElement: ".eyebrow",
+    preview: "Release notes",
     hasTextTransform: true
   }
 ];