@tempoxyz/ds 0.3.11 → 0.3.13

package/src/marketing/vars.ts

@@ -0,0 +1,751 @@
+import { Vars } from 'zyzz'
+
+/**
+ * The Marketing variable set. It starts as a copy of the Web variables, so marketing pages
+ * share the TDS 1.0 Core primitives and the Platform token names, and diverges as the
+ * Marketing designs define their own values. Marketing never imports the Web surface, so a
+ * change here does not reach product interfaces. Extend it to add page tokens.
+ *
+ * @example
+ * export const { style, vars } = Config.create({
+ *   id: 'site',
+ *   vars: Vars.extend(variables, { spacing: { section: '7.5rem' } }, { id: 'site/vars' }),
+ * })
+ */
+export const variables = Vars.define(
+  {
+    aspect: {
+      video: '16 / 9',
+    },
+    blur: {
+      '4': '4px',
+      '8': '8px',
+      '12': '12px',
+      '16': '16px',
+      '24': '24px',
+      '40': '40px',
+      '64': '64px',
+    },
+    breakpoint: {
+      '640': '40rem',
+      '768': '48rem',
+      '1024': '64rem',
+      '1280': '80rem',
+      '1536': '96rem',
+    },
+    // TDS 1.0 Core `Tempo` colors. Each accent `background` pairs Core's light-mode and dark-mode
+    // steps, and its `foreground` pairs Core's text step with the dark-mode step, so accent text
+    // keeps 4.5:1 on the page in both schemes. Solid neutral steps name a percentage of black, and `shade` and `tint` steps are black
+    // and white at that opacity. Core no longer publishes `shade`, `tint`, or the accent alphas, but
+    // Platform tokens still alias them, so they keep the values Platform resolves.
+    color: {
+      accent: {
+        // `regular` is the light accent at 8% (100) and the dark accent at 16% (200). `strong`
+        // doubles both.
+        alpha: {
+          regular: {
+            blue: { '100': 'rgb(68 113 237 / 0.08)', '200': 'rgb(116 152 251 / 0.16)' },
+            green: { '100': 'rgb(19 169 99 / 0.08)', '200': 'rgb(89 229 164 / 0.16)' },
+            orange: { '100': 'rgb(224 111 18 / 0.08)', '200': 'rgb(250 142 54 / 0.16)' },
+            red: { '100': 'rgb(235 52 23 / 0.08)', '200': 'rgb(245 92 69 / 0.16)' },
+          },
+          strong: {
+            blue: { '100': 'rgb(68 113 237 / 0.16)', '200': 'rgb(116 152 251 / 0.32)' },
+            green: { '100': 'rgb(19 169 99 / 0.16)', '200': 'rgb(89 229 164 / 0.32)' },
+            orange: { '100': 'rgb(224 111 18 / 0.16)', '200': 'rgb(250 142 54 / 0.32)' },
+            red: { '100': 'rgb(235 52 23 / 0.16)', '200': 'rgb(245 92 69 / 0.32)' },
+          },
+        },
+        blue: {
+          background: { dark: '#7498fb', light: '#4471ed' },
+          foreground: { dark: '#7498fb', light: '#3059d3' },
+        },
+        cyan: {
+          background: { dark: '#48cce6', light: '#00aacb' },
+          foreground: { dark: '#48cce6', light: '#056e85' },
+        },
+        green: {
+          background: { dark: '#59e5a4', light: '#13a963' },
+          foreground: { dark: '#59e5a4', light: '#007441' },
+        },
+        magenta: {
+          background: { dark: '#e54088', light: '#cc055b' },
+          foreground: { dark: '#e54088', light: '#ba0352' },
+        },
+        olive: {
+          background: { dark: '#c4dc65', light: '#95b226' },
+          foreground: { dark: '#c4dc65', light: '#596d01' },
+        },
+        orange: {
+          background: { dark: '#fa8e36', light: '#e06f12' },
+          foreground: { dark: '#fa8e36', light: '#a14d04' },
+        },
+        purple: {
+          background: { dark: '#cf79ef', light: '#ba59dd' },
+          foreground: { dark: '#cf79ef', light: '#9835ba' },
+        },
+        red: {
+          background: { dark: '#f55c45', light: '#eb3417' },
+          foreground: { dark: '#f55c45', light: '#bf1d00' },
+        },
+        violet: {
+          background: { dark: '#9877f1', light: '#7e59e4' },
+          foreground: { dark: '#9877f1', light: '#6f47d1' },
+        },
+      },
+      neutral: {
+        '000': '#fff',
+        '003': '#f7f7f7',
+        '004': '#f5f5f5',
+        '006': '#f0f0f0',
+        '008': '#ebebeb',
+        '012': '#e0e0e0',
+        '016': '#d6d6d6',
+        '020': '#ccc',
+        '024': '#c2c2c2',
+        '028': '#b8b8b8',
+        '032': '#adadad',
+        '036': '#a3a3a3',
+        '040': '#999',
+        '044': '#8f8f8f',
+        '048': '#858585',
+        '052': '#7a7a7a',
+        '056': '#707070',
+        '060': '#666',
+        '064': '#5c5c5c',
+        '068': '#525252',
+        '072': '#474747',
+        '076': '#3d3d3d',
+        '080': '#333',
+        '084': '#292929',
+        '088': '#1f1f1f',
+        '092': '#141414',
+        '096': '#0a0a0a',
+        '100': '#000',
+        shade: {
+          '000': '#00000000',
+          '003': '#00000008',
+          '004': '#0000000a',
+          '006': '#0000000f',
+          '008': '#00000014',
+          '012': '#0000001f',
+          '016': '#00000029',
+          '020': '#00000033',
+          '032': '#00000052',
+          '040': '#00000066',
+          '056': '#0000008f',
+          '060': '#00000099',
+          '080': '#000000cc',
+        },
+        tint: {
+          '000': '#ffffff00',
+          '004': '#ffffff0a',
+          '006': '#ffffff0f',
+          '008': '#ffffff14',
+          '012': '#ffffff1f',
+          '016': '#ffffff29',
+          '020': '#ffffff33',
+          '024': '#ffffff3d',
+          '040': '#ffffff66',
+          '048': '#ffffff7a',
+          '052': '#ffffff85',
+          '056': '#ffffff8f',
+          '064': '#ffffffa3',
+          '080': '#ffffffcc',
+        },
+      },
+    },
+    container: {
+      '256': '16rem',
+      '288': '18rem',
+      '320': '20rem',
+      '384': '24rem',
+      '448': '28rem',
+      '512': '32rem',
+      '576': '36rem',
+      '672': '42rem',
+      '768': '48rem',
+      '896': '56rem',
+      '1024': '64rem',
+      '1152': '72rem',
+      '1280': '80rem',
+    },
+    dropShadow: {
+      '1': '0 1px 1px rgb(0 0 0 / 0.05)',
+      '2': '0 1px 2px rgb(0 0 0 / 0.15)',
+      '3': '0 3px 3px rgb(0 0 0 / 0.12)',
+      '4': '0 4px 4px rgb(0 0 0 / 0.15)',
+      '7': '0 9px 7px rgb(0 0 0 / 0.1)',
+      '25': '0 25px 25px rgb(0 0 0 / 0.15)',
+    },
+    // `snappy` is a quint ease-out for state changes, `overshoot` adds physical feedback to presses
+    // and thumbs, and `spring` moves surfaces and indicators.
+    ease: {
+      in: 'cubic-bezier(0.4, 0, 1, 1)',
+      'in-out': 'cubic-bezier(0.4, 0, 0.2, 1)',
+      out: 'cubic-bezier(0, 0, 0.2, 1)',
+      overshoot: 'cubic-bezier(0.34, 1.36, 0.64, 1)',
+      snappy: 'cubic-bezier(0.23, 1, 0.32, 1)',
+      spring: 'cubic-bezier(0.32, 0.72, 0, 1)',
+    },
+    // The Platform text styles set copy in Inter, titles, display copy, and values in Pilat, and code
+    // in JetBrains Mono. The Web contracts ship all three. The `display` stack keeps HB Set, which
+    // falls back to Pilat, for callers that still name it.
+    fontFamily: {
+      body: 'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"',
+      display:
+        '"HB Set v0.96", Pilat, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif',
+      heading:
+        'Pilat, Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", Arial, sans-serif',
+      mono: '"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace',
+    },
+    fontSize: {
+      '12': '0.75rem',
+      '14': '0.875rem',
+      '16': '1rem',
+      '18': '1.125rem',
+      '20': '1.25rem',
+      '24': '1.5rem',
+      '30': '1.875rem',
+      '36': '2.25rem',
+      '48': '3rem',
+      '60': '3.75rem',
+      '72': '4.5rem',
+      '96': '6rem',
+      '128': '8rem',
+    },
+    insetShadow: {
+      '0': 'inset 0 1px rgb(0 0 0 / 0.05)',
+      '1': 'inset 0 1px 1px rgb(0 0 0 / 0.05)',
+      '4': 'inset 0 2px 4px rgb(0 0 0 / 0.05)',
+    },
+    // `disabled` dims an unavailable control, and `hover` dims a filled control under the pointer.
+    opacity: {
+      disabled: 0.32,
+      hover: 0.86,
+    },
+    outlineOffset: {
+      '-2': '-2px',
+      '0': '0px',
+      '2': '2px',
+    },
+    outlineWidth: {
+      '1': '1px',
+      '2': '2px',
+    },
+    perspective: {
+      '100': '100px',
+      '300': '300px',
+      '500': '500px',
+      '800': '800px',
+      '1200': '1200px',
+    },
+    // `enter` is the start scale of a popup transition, and `press` shrinks a pressed control.
+    scale: {
+      enter: 0.96,
+      press: 0.98,
+    },
+    // The Platform `Shadow` effect styles.
+    shadow: {
+      large: '0 24px 64px #00000014, 0 8px 48px #00000014, 0 2px 8px #0000000a',
+      regular: '0 8px 48px #0000000a, 0 4px 16px #0000000a, 0 2px 8px #0000000a',
+      small: '0 4px 12px #0000000a, 0 2px 8px #0000000a, 0 0 2px #0000000a',
+    },
+    // TDS 1.0 Core `Values`, keyed by px at the default 16px root. Values stay in rem, so the scale
+    // follows the root size, except the sub-2px hairlines. Negative keys pull an element into its
+    // container's padding.
+    spacing: {
+      '-24': '-1.5rem',
+      '-20': '-1.25rem',
+      '-16': '-1rem',
+      '-12': '-0.75rem',
+      '-10': '-0.625rem',
+      '-8': '-0.5rem',
+      '-6': '-0.375rem',
+      '-4': '-0.25rem',
+      '0': '0rem',
+      '0-5': '0.5px',
+      '1': '1px',
+      '1-5': '1.5px',
+      '2': '0.125rem',
+      '3': '0.1875rem',
+      '4': '0.25rem',
+      '6': '0.375rem',
+      '8': '0.5rem',
+      '10': '0.625rem',
+      '12': '0.75rem',
+      '16': '1rem',
+      '20': '1.25rem',
+      '24': '1.5rem',
+      '28': '1.75rem',
+      '32': '2rem',
+      '36': '2.25rem',
+      '40': '2.5rem',
+      '44': '2.75rem',
+      '48': '3rem',
+      '52': '3.25rem',
+      '56': '3.5rem',
+      '60': '3.75rem',
+      '64': '4rem',
+      '72': '4.5rem',
+      '80': '5rem',
+      '100': '6.25rem',
+      '120': '7.5rem',
+      '140': '8.75rem',
+      '160': '10rem',
+      '180': '11.25rem',
+      '200': '12.5rem',
+      '240': '15rem',
+      '280': '17.5rem',
+      '320': '20rem',
+      '360': '22.5rem',
+      '999': '62.4375rem',
+    },
+    textShadow: {
+      '0': '0px 1px 0px rgb(0 0 0 / 0.15)',
+      '1': '0px 1px 1px rgb(0 0 0 / 0.2)',
+      '2': '0px 1px 0px rgb(0 0 0 / 0.075), 0px 1px 1px rgb(0 0 0 / 0.075), 0px 2px 2px rgb(0 0 0 / 0.075)',
+      '4': '0px 1px 1px rgb(0 0 0 / 0.1), 0px 1px 2px rgb(0 0 0 / 0.1), 0px 2px 4px rgb(0 0 0 / 0.1)',
+      '8': '0px 1px 2px rgb(0 0 0 / 0.1), 0px 3px 2px rgb(0 0 0 / 0.1), 0px 4px 8px rgb(0 0 0 / 0.1)',
+    },
+    // Keys are durations in ms.
+    transitionDuration: {
+      '0': '0ms',
+      '100': '100ms',
+      '120': '120ms',
+      '140': '140ms',
+      '150': '150ms',
+      '160': '160ms',
+      '180': '180ms',
+      '200': '200ms',
+      '220': '220ms',
+      '240': '240ms',
+      '280': '280ms',
+      '320': '320ms',
+    },
+    // Layers from the app shell overlay up to toasts.
+    zIndex: {
+      modal: 60,
+      overlay: 40,
+      popover: 50,
+      toast: 1000,
+    },
+  },
+  // TPDS 1.0 Platform `Base`, `Attributes`, and text styles, and the pressed action colors of
+  // `Working / Platform / Semantic` that the Platform Button paints. Base tokens that
+  // alias other Base tokens, such as `component.button.secondary.fill`, point at the same
+  // primitives instead.
+  (vars) => ({
+    borderWidth: {
+      none: vars.spacing['0'],
+      regular: vars.spacing['1'],
+      thick: vars.spacing['2'],
+      thin: vars.spacing['0-5'],
+    },
+    color: {
+      action: {
+        danger: {
+          fill: {
+            hover: '#eb3417',
+            rest: '#eb3417',
+          },
+          label: { rest: vars.color.neutral['000'] },
+        },
+        focusRing: { dark: vars.color.neutral.tint['056'], light: vars.color.neutral.shade['056'] },
+        primary: {
+          fill: {
+            hover: { dark: vars.color.neutral.tint['080'], light: vars.color.neutral.shade['080'] },
+            pressed: {
+              dark: vars.color.neutral.tint['064'],
+              light: vars.color.neutral.shade['060'],
+            },
+          },
+        },
+        secondary: {
+          fill: {
+            hover: { dark: vars.color.neutral.tint['006'], light: vars.color.neutral.shade['006'] },
+            pressed: {
+              dark: vars.color.neutral.tint['024'],
+              light: vars.color.neutral.shade['016'],
+            },
+          },
+        },
+        tertiary: {
+          fill: {
+            hover: { dark: vars.color.neutral.tint['004'], light: vars.color.neutral.shade['004'] },
+            pressed: {
+              dark: vars.color.neutral.tint['006'],
+              light: vars.color.neutral.shade['006'],
+            },
+          },
+        },
+      },
+      // Dark mode lifts the page to 92% black, and the elevated and menu fills step lighter from
+      // it, at the Platform primitive solid steps 090 and 087, which TDS 1.0 Core has no step for.
+      background: {
+        elevated: { dark: '#1a1a1a', light: vars.color.neutral['000'] },
+        menu: { dark: '#222', light: vars.color.neutral['000'] },
+        primary: { dark: vars.color.neutral['092'], light: vars.color.neutral['004'] },
+        secondary: { dark: vars.color.neutral['092'], light: vars.color.neutral['000'] },
+        // The layouts fill the sidebar a step lighter than the page in light mode, and with the page
+        // in dark mode.
+        sidebar: { dark: vars.color.neutral['092'], light: '#fafafa' },
+      },
+      border: {
+        focus: { dark: vars.color.neutral.tint['052'], light: vars.color.neutral.shade['040'] },
+        negative: {
+          dark: vars.color.accent.alpha.strong.red['200'],
+          light: vars.color.accent.alpha.strong.red['100'],
+        },
+        positive: {
+          dark: vars.color.accent.alpha.strong.green['200'],
+          light: vars.color.accent.alpha.strong.green['100'],
+        },
+        warning: {
+          dark: vars.color.accent.alpha.strong.orange['200'],
+          light: vars.color.accent.alpha.strong.orange['100'],
+        },
+      },
+      component: {
+        button: {
+          primary: {
+            border: {
+              dark: vars.color.neutral.tint['000'],
+              light: vars.color.neutral.shade['000'],
+            },
+            fill: { dark: vars.color.neutral['000'], light: vars.color.neutral['100'] },
+          },
+          secondary: {
+            border: {
+              dark: vars.color.neutral.tint['016'],
+              light: vars.color.neutral.shade['008'],
+            },
+            fill: { dark: vars.color.neutral.tint['012'], light: vars.color.neutral.shade['004'] },
+          },
+          tertiary: {
+            border: {
+              dark: vars.color.neutral.tint['000'],
+              light: vars.color.neutral.shade['000'],
+            },
+            fill: { dark: vars.color.neutral.tint['000'], light: vars.color.neutral.shade['000'] },
+          },
+        },
+        input: {
+          overlay: {
+            border: {
+              dark: vars.color.neutral.tint['000'],
+              light: vars.color.neutral.shade['000'],
+            },
+            fill: { dark: vars.color.neutral.tint['024'], light: vars.color.neutral.shade['020'] },
+          },
+          primary: {
+            border: {
+              dark: vars.color.neutral.tint['000'],
+              light: vars.color.neutral.shade['000'],
+            },
+            fill: { dark: vars.color.neutral.tint['012'], light: vars.color.neutral.shade['004'] },
+          },
+          secondary: {
+            border: {
+              dark: vars.color.neutral.tint['024'],
+              light: vars.color.neutral.shade['016'],
+            },
+            fill: { dark: vars.color.neutral.tint['000'], light: vars.color.neutral.shade['000'] },
+          },
+        },
+        pullTab: { dark: vars.color.neutral.tint['024'], light: vars.color.neutral.shade['012'] },
+      },
+      container: {
+        accent: vars.color.accent.alpha.regular.blue['100'],
+        // The quiet fill of inputs and other controls.
+        control: { dark: vars.color.neutral.tint['004'], light: vars.color.neutral.shade['004'] },
+        negative: {
+          dark: vars.color.accent.alpha.regular.red['200'],
+          light: vars.color.accent.alpha.regular.red['100'],
+        },
+        positive: {
+          dark: vars.color.accent.alpha.regular.green['200'],
+          light: vars.color.accent.alpha.regular.green['100'],
+        },
+        // Dark mode fills the regular container at 8% white, dimmer than Figma's 12%, so badges and
+        // other soft fills recede on the dark page.
+        regular: { dark: vars.color.neutral.tint['008'], light: vars.color.neutral.shade['004'] },
+        // The fill of a selected option, such as a picker row.
+        selected: { dark: vars.color.neutral.tint['012'], light: vars.color.neutral['000'] },
+        // An opaque fill at the Platform primitive solid steps 079 and 010.
+        solid: { dark: '#353535', light: '#e6e6e6' },
+        strong: { dark: vars.color.neutral.tint['016'], light: vars.color.neutral.shade['008'] },
+        special: 'rgb(126 89 228 / 0.08)',
+        subtle: { dark: vars.color.neutral.tint['008'], light: vars.color.neutral.shade['003'] },
+        warning: {
+          dark: vars.color.accent.alpha.regular.orange['200'],
+          light: vars.color.accent.alpha.regular.orange['100'],
+        },
+      },
+      content: {
+        accent: '#4471ed',
+        negative: vars.color.accent.red.background,
+        positive: vars.color.accent.green.background,
+        primary: { dark: vars.color.neutral['000'], light: vars.color.neutral['100'] },
+        secondary: { dark: vars.color.neutral.tint['064'], light: vars.color.neutral.shade['056'] },
+        special: '#7e59e4',
+        subtle: { dark: vars.color.neutral.tint['020'], light: vars.color.neutral.shade['020'] },
+        tertiary: { dark: vars.color.neutral.tint['052'], light: vars.color.neutral.shade['040'] },
+        warning: vars.color.accent.orange.background,
+      },
+      inverse: {
+        background: {
+          primary: { dark: vars.color.neutral['004'], light: vars.color.neutral['100'] },
+          secondary: { dark: vars.color.neutral['000'], light: vars.color.neutral['092'] },
+        },
+        container: {
+          regular: { dark: vars.color.neutral.shade['004'], light: vars.color.neutral.tint['012'] },
+        },
+        content: {
+          primary: { dark: vars.color.neutral['100'], light: vars.color.neutral['000'] },
+        },
+      },
+      line: {
+        // The border of a card, at 5% white in dark mode.
+        card: { dark: '#ffffff0d', light: vars.color.neutral.shade['008'] },
+        primary: { dark: vars.color.neutral.tint['024'], light: vars.color.neutral.shade['016'] },
+        // Dark mode draws the secondary line at 8% white, dimmer than Figma's 16%, so the borders
+        // and dividers recede on the dark fills.
+        secondary: { dark: vars.color.neutral.tint['008'], light: vars.color.neutral.shade['008'] },
+        tertiary: { dark: vars.color.neutral.tint['008'], light: vars.color.neutral.shade['004'] },
+      },
+      material: {
+        regular: { dark: vars.color.neutral.tint['048'], light: vars.color.neutral.shade['040'] },
+        // The grain over a material, at 7%.
+        texture: { dark: '#ffffff12', light: '#00000012' },
+        thick: { dark: vars.color.neutral.tint['064'], light: vars.color.neutral.shade['060'] },
+        thin: { dark: vars.color.neutral.tint['024'], light: vars.color.neutral.shade['020'] },
+        ultrathick: {
+          dark: vars.color.neutral.tint['080'],
+          light: vars.color.neutral.shade['080'],
+        },
+        ultrathin: { dark: vars.color.neutral.tint['016'], light: vars.color.neutral.shade['008'] },
+      },
+      // The fills and text of controls over an image or video, the same in both schemes.
+      overlay: {
+        action: {
+          secondary: { fill: { hover: '#70707047' } },
+          tertiary: { fill: { hover: vars.color.neutral.tint['012'] } },
+        },
+        container: { regular: '#70707052' },
+        content: {
+          primary: vars.color.neutral['000'],
+          secondary: vars.color.neutral.tint['064'],
+          tertiary: vars.color.neutral.tint['052'],
+        },
+      },
+      scrim: {
+        regular: vars.color.neutral.shade['016'],
+        strong: vars.color.neutral.shade['032'],
+      },
+      shadow: {
+        // The shadow under elevated fills, such as menus and modals.
+        elevated: { dark: '#0000003d', light: vars.color.neutral.shade['012'] },
+        primary: { dark: vars.color.neutral.shade['032'], light: vars.color.neutral.shade['008'] },
+        secondary: {
+          dark: vars.color.neutral.shade['016'],
+          light: vars.color.neutral.shade['004'],
+        },
+      },
+    },
+    // The Platform corner radii at their Figma values: 4, 8, 12, 16, 24, 32, 40, and 64px. The
+    // designs smooth each corner fully, which stretches its curve past the radius. A squircle at 1.84
+    // times the radius traces that curve, so the global `corner-shape` rule raises
+    // `--tds-corner-scale` where browsers draw squircles, and other browsers keep the round radius.
+    // `full` stays round, so circles and pills keep their shape.
+    radius: {
+      '2xl': 'calc(4rem * var(--tds-corner-scale, 1))',
+      '2xs': 'calc(0.5rem * var(--tds-corner-scale, 1))',
+      '3xs': 'calc(0.25rem * var(--tds-corner-scale, 1))',
+      full: vars.spacing['999'],
+      lg: 'calc(2rem * var(--tds-corner-scale, 1))',
+      md: 'calc(1.5rem * var(--tds-corner-scale, 1))',
+      none: vars.spacing['0'],
+      sm: 'calc(1rem * var(--tds-corner-scale, 1))',
+      xl: 'calc(2.5rem * var(--tds-corner-scale, 1))',
+      xs: 'calc(0.75rem * var(--tds-corner-scale, 1))',
+    },
+    // Section and page steps use the Mobile mode of the responsive Platform attributes.
+    spacing: {
+      none: vars.spacing['0'],
+      page: { gutter: vars.spacing['12'], margin: vars.spacing['24'] },
+      section: {
+        lg: vars.spacing['120'],
+        md: vars.spacing['80'],
+        none: vars.spacing['0'],
+        sm: vars.spacing['40'],
+        xl: vars.spacing['180'],
+        xs: vars.spacing['24'],
+      },
+    },
+    // Figma's percentage tracking is converted to px. Body tracking instead follows Inter's dynamic
+    // metrics, -0.0223 + 0.185 * e^(-0.1745 * size) em, rounded to 0.01px. The `utility` styles are
+    // uppercase in Figma, which a component applies with `textTransform`.
+    typography: {
+      body: {
+        b1: {
+          fontFamily: vars.fontFamily.body,
+          fontSize: '16px',
+          fontWeight: 400,
+          letterSpacing: '-.18px',
+          lineHeight: '22px',
+        },
+        b1Strong: {
+          fontFamily: vars.fontFamily.body,
+          fontSize: '16px',
+          fontWeight: 500,
+          letterSpacing: '-.18px',
+          lineHeight: '22px',
+        },
+        b2: {
+          fontFamily: vars.fontFamily.body,
+          fontSize: '14px',
+          fontWeight: 400,
+          letterSpacing: '-.09px',
+          lineHeight: '20px',
+        },
+        b2Strong: {
+          fontFamily: vars.fontFamily.body,
+          fontSize: '14px',
+          fontWeight: 500,
+          letterSpacing: '-.09px',
+          lineHeight: '20px',
+        },
+        b3: {
+          fontFamily: vars.fontFamily.body,
+          fontSize: '12px',
+          fontWeight: 400,
+          letterSpacing: '.01px',
+          lineHeight: '16px',
+        },
+        b3Strong: {
+          fontFamily: vars.fontFamily.body,
+          fontSize: '12px',
+          fontWeight: 500,
+          letterSpacing: '.01px',
+          lineHeight: '16px',
+        },
+      },
+      // Pilat Light is weight 300, and Pilat Regular is 400.
+      display: {
+        d1: {
+          fontFamily: vars.fontFamily.heading,
+          fontSize: '44px',
+          fontWeight: 300,
+          letterSpacing: '-1.76px',
+          lineHeight: '41.8px',
+        },
+        d2: {
+          fontFamily: vars.fontFamily.heading,
+          fontSize: '36px',
+          fontWeight: 400,
+          letterSpacing: '-1.44px',
+          lineHeight: '34.2px',
+        },
+      },
+      // Pilat Book is weight 500.
+      heading: {
+        h1: {
+          fontFamily: vars.fontFamily.heading,
+          fontSize: '32px',
+          fontWeight: 500,
+          letterSpacing: '-.48px',
+          lineHeight: '36.8px',
+        },
+        h2: {
+          fontFamily: vars.fontFamily.heading,
+          fontSize: '24px',
+          fontWeight: 500,
+          letterSpacing: '-.36px',
+          lineHeight: '27.6px',
+        },
+        h3: {
+          fontFamily: vars.fontFamily.heading,
+          fontSize: '20px',
+          fontWeight: 500,
+          letterSpacing: '-.3px',
+          lineHeight: '23px',
+        },
+        h4: {
+          fontFamily: vars.fontFamily.heading,
+          fontSize: '18px',
+          fontWeight: 500,
+          letterSpacing: '-.27px',
+          lineHeight: '20.7px',
+        },
+      },
+      // Labels set Pilat at the size and weight of B2 Strong and B3 Strong, tracked by 1% as the
+      // Platform Tab and Toast draw them.
+      label: {
+        l2: {
+          fontFamily: vars.fontFamily.heading,
+          fontSize: '14px',
+          fontWeight: 500,
+          letterSpacing: '.14px',
+          lineHeight: '20px',
+        },
+        l3: {
+          fontFamily: vars.fontFamily.heading,
+          fontSize: '12px',
+          fontWeight: 500,
+          letterSpacing: '.15px',
+          lineHeight: '16px',
+        },
+      },
+      mono: {
+        m1: {
+          fontFamily: vars.fontFamily.mono,
+          fontSize: '12px',
+          fontWeight: 400,
+          letterSpacing: '0px',
+          lineHeight: '16px',
+        },
+      },
+      utility: {
+        m1: {
+          fontFamily: vars.fontFamily.mono,
+          fontSize: '12px',
+          fontWeight: 400,
+          letterSpacing: '.72px',
+          lineHeight: '16px',
+        },
+        m2: {
+          fontFamily: vars.fontFamily.mono,
+          fontSize: '10px',
+          fontWeight: 400,
+          letterSpacing: '.6px',
+          lineHeight: '12px',
+        },
+      },
+      value: {
+        v1: {
+          fontFamily: vars.fontFamily.heading,
+          fontSize: '80px',
+          fontWeight: 400,
+          letterSpacing: '-2.4px',
+          lineHeight: 'normal',
+        },
+        v2: {
+          fontFamily: vars.fontFamily.heading,
+          fontSize: '52px',
+          fontWeight: 400,
+          letterSpacing: '-1.56px',
+          lineHeight: 'normal',
+        },
+        v3: {
+          fontFamily: vars.fontFamily.heading,
+          fontSize: '40px',
+          fontWeight: 400,
+          letterSpacing: '-1.2px',
+          lineHeight: 'normal',
+        },
+      },
+    },
+  }),
+  { id: 'tds/marketing/variables' },
+)