@datatechsolutions/tympan-tokens 0.3.0

package/src/print-themes.ts

@@ -0,0 +1,404 @@
+
+function createTextureSvg(style: any): string | undefined {
+  const papel = style.papel
+  if (!papel || papel.textura === 'nenhuma' || papel.intensidade <= 0) return undefined
+  const k = papel.intensidade
+  const n3 = (x: number) => Math.round(x * 1000) / 1000
+  const matriz = (cor: string, alfa: number, limiar: number) => {
+    const c = parseColor(cor)
+    return `0 0 0 0 ${n3(c.r)}  0 0 0 0 ${n3(c.g)}  0 0 0 0 ${n3(c.b)}  0 0 0 ${n3(alfa)} ${n3(limiar)}`
+  }
+
+  const tinta = style.cor.tinta
+  let defs = ''
+  let corpo = ''
+
+  if (papel.textura === 'grao') {
+    defs = `
+      <filter id="f" x="0" y="0" width="100%" height="100%">
+        <feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" seed="21" stitchTiles="stitch" />
+        <feColorMatrix values="${matriz(tinta, 0.9 * k, -0.34)}" />
+      </filter>
+    `
+    corpo = `<rect width="100%" height="100%" filter="url(#f)" />`
+  } else if (papel.textura === 'fibra') {
+    defs = `
+      <filter id="f" x="0" y="0" width="100%" height="100%">
+        <feTurbulence type="fractalNoise" baseFrequency="0.035 0.09" numOctaves="3" seed="4" />
+        <feColorMatrix values="${matriz(tinta, 0.55 * k, -0.2)}" />
+      </filter>
+      <filter id="g" x="0" y="0" width="100%" height="100%">
+        <feTurbulence type="fractalNoise" baseFrequency="0.85" numOctaves="2" seed="11" stitchTiles="stitch" />
+        <feColorMatrix values="${matriz(tinta, 1.1 * k, -0.45)}" />
+      </filter>
+    `
+    corpo = `
+      <rect width="100%" height="100%" filter="url(#f)" opacity="0.6" />
+      <rect width="100%" height="100%" filter="url(#g)" />
+    `
+  } else if (papel.textura === 'pauta') {
+    const linha = style.pb ? '#bdbdbd' : '#b7cbe0'
+    const passo = n3(7 * 3.7795)
+    defs = `
+      <pattern id="p" width="10" height="${passo}" patternUnits="userSpaceOnUse" y="${n3(16 * 3.7795)}">
+        <line x1="0" x2="10" y1="${n3(7 * 3.7795 - 0.5)}" y2="${n3(7 * 3.7795 - 0.5)}" stroke="${linha}" stroke-width="0.9" />
+      </pattern>
+    `
+    corpo = `
+      <g opacity="${Math.min(1, 0.4 + k)}">
+        <rect width="100%" height="100%" fill="url(#p)" />
+      </g>
+    `
+  } else if (papel.textura === 'milimetrado') {
+    const mm = 3.7795
+    const cm = 37.795
+    const mmStr = n3(mm)
+    const cmStr = n3(cm)
+    const op1 = n3(0.09 * k)
+    const op2 = n3(0.22 * k)
+    const linha = style.cor.linha
+    defs = `
+      <pattern id="mm" width="${mmStr}" height="${mmStr}" patternUnits="userSpaceOnUse">
+        <path d="M ${mmStr} 0 L 0 0 0 ${mmStr}" fill="none" stroke="${linha}" stroke-opacity="${op1}" stroke-width="0.5" />
+      </pattern>
+      <pattern id="cm" width="${cmStr}" height="${cmStr}" patternUnits="userSpaceOnUse">
+        <path d="M ${cmStr} 0 L 0 0 0 ${cmStr}" fill="none" stroke="${linha}" stroke-opacity="${op2}" stroke-width="0.8" />
+      </pattern>
+    `
+    corpo = `
+      <rect width="100%" height="100%" fill="url(#mm)" />
+      <rect width="100%" height="100%" fill="url(#cm)" />
+    `
+  } else {
+    return undefined
+  }
+
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><defs>${defs}</defs>${corpo}</svg>`
+  const cleanSvg = svg.replace(/>\s+</g, '><').trim()
+  return `url('data:image/svg+xml;utf8,${encodeURIComponent(cleanSvg)}')`
+}
+
+
+// UI themes derived from the book styles of print-presets.ts. One function,
+// `printStyleToTheme`, maps a PrintStyle onto a ThemeConfig: the paper and ink
+// become the surfaces and text of the style's native mode (light for paper
+// styles, dark for dark-paper styles), the first legible chromatic accent
+// becomes the brand, the proof-state colours become the semantic tones, the
+// display, body and mono families become the font roles, and the corner
+// radius, panel and chart treatment choose radius, glass, call to action and
+// elevation. The other mode is generated from the same hues. Every exact
+// colour is kept as a pin only while the generator's WCAG 2.2 AA pairs hold;
+// a pin that fails is dropped and the role is regenerated (and nudged) from
+// the style's hue, so identity is kept wherever contrast allows.
+
+import { contrastRatio, deltaE2000, luminance, oklchToRgb, parseColor, rgbToOklch, toCss } from './color.ts'
+import { PRINT_THEME_PREFIX } from './print-aliases.ts'
+import { googleFontsUrl, printPresets, type PrintPresetName, type PrintStyle } from './print-presets.ts'
+import {
+  DEFAULT_CHART_HUES,
+  parseFontStack,
+  resolveTheme,
+  type Mode,
+  type RoleName,
+  type Seed,
+  type SeedName,
+  type ThemeConfig,
+} from './theme.ts'
+
+
+/** Chroma under which a colour counts as grey (ink, paper, rules). */
+const CHROMATIC = 0.05
+/** One millimetre of the print radius in CSS pixels (96 dpi). */
+const MM = 96 / 25.4
+
+const oklch = (c: string) => rgbToOklch(parseColor(c))
+const chromatic = (c: string) => oklch(c).c >= CHROMATIC
+const ratio = (a: string, b: string) => contrastRatio(parseColor(a), parseColor(b))
+const shiftL = (c: string, dl: number, chromaScale = 1, alpha = 1): string => {
+  const v = oklch(c)
+  return toCss(oklchToRgb({ l: Math.min(0.998, Math.max(0.02, v.l + dl)), c: v.c * chromaScale, h: v.h }, alpha))
+}
+const seedOf = (c: string, fallback?: Seed): Seed => {
+  const v = oklch(c)
+  if (fallback && v.c < CHROMATIC) return fallback
+  return { hue: Math.round(v.h * 10) / 10, chroma: Math.round(v.c * 1000) / 1000 }
+}
+const hueGap = (a: number, b: number) => {
+  const d = Math.abs(a - b) % 360
+  return d > 180 ? 360 - d : d
+}
+
+/** Default semantic seeds, used where a style's proof colour is grey. */
+const TONE_FALLBACK: Record<'danger' | 'warning' | 'success' | 'info', Seed> = {
+  danger: { hue: 18, chroma: 0.19 },
+  warning: { hue: 70, chroma: 0.14 },
+  success: { hue: 150, chroma: 0.14 },
+  info: { hue: 255, chroma: 0.06 },
+}
+
+/** Per-style adjustments where the derivation misjudges; merged over the derived config. */
+export interface PrintThemeOverride {
+  /** Brand colour to use instead of the derived one. */
+  brand?: string
+  glass?: boolean
+  cta?: ThemeConfig['cta']
+  elevation?: ThemeConfig['elevation']
+  /** Radius in px. */
+  radius?: number
+  /** Extra pins per mode (applied before the contrast check, dropped if they fail like any pin). */
+  pins?: ThemeConfig['pins']
+}
+
+/**
+ * Where the derivation reads a style differently from its tradition. Kept
+ * short on purpose: every entry is a judgement the data cannot express.
+ */
+export const PRINT_THEME_OVERRIDES: Partial<Record<PrintPresetName, PrintThemeOverride>> = {}
+
+/** The colour moved along OKLCH lightness (hue and chroma kept) until it reaches `min` against `over`. */
+export function legibleOn(colour: string, over: string, min = 4.6): string {
+  const v = oklch(colour)
+  const step = luminance(parseColor(over)) > 0.2 ? -0.005 : 0.005
+  let out = colour
+  for (let i = 0; i < 200 && ratio(out, over) < min; i++) {
+    v.l = Math.min(0.995, Math.max(0.02, v.l + step))
+    out = toCss(oklchToRgb(v))
+  }
+  return out
+}
+
+/**
+ * The accent that represents a style, before any legibility adjustment: the
+ * first chromatic accent that nearly reads on the paper (3:1), else the most
+ * legible chromatic accent, else the first chromatic ornament, else the ink
+ * (or, on dark paper, the paper itself).
+ */
+export function printStyleAccent(style: PrintStyle): string {
+  const c = style.cor
+  const darkPaper = luminance(parseColor(c.papel)) < 0.2
+  const accents = [c.destaque, c.destaque2].filter(chromatic)
+  const near = accents.find((x) => ratio(x, c.papel) >= 3)
+  if (near) return near
+  if (accents.length) return [...accents].sort((a, b) => ratio(b, c.papel) - ratio(a, c.papel))[0]!
+  const ornament = (c.ornamento ?? []).find(chromatic)
+  if (ornament) return ornament
+  return darkPaper ? c.papel : c.tinta
+}
+
+function chartHues(style: PrintStyle): number[] {
+  const c = style.cor
+  const sources = [c.destaque, c.destaque2, ...(c.ornamento ?? []), c.prova.refutada, c.prova.sustentada, c.prova['nao-da-para-afirmar'], c.marcaTexto]
+  const hues: number[] = []
+  for (const s of sources) {
+    const v = oklch(s)
+    if (v.c < CHROMATIC) continue
+    if (hues.every((h) => hueGap(h, v.h) >= 30)) hues.push(Math.round(v.h))
+  }
+  for (const h of DEFAULT_CHART_HUES) {
+    if (hues.length >= 8) break
+    if (hues.every((x) => hueGap(x, h) >= 30)) hues.push(h)
+  }
+  for (const h of DEFAULT_CHART_HUES) if (hues.length < 8 && !hues.includes(h)) hues.push(h)
+  return hues.slice(0, 8)
+}
+
+/** Families of a print stack for a UI role; `mono` is kept only when the stack is really monospace. */
+function fontsOf(style: PrintStyle): { fonts: NonNullable<ThemeConfig['fonts']>; url?: string } {
+  const display = parseFontStack(style.fontes.titulo)
+  const body = parseFontStack(style.fontes.corpo)
+  const monoStack = parseFontStack(style.fontes.mono)
+  const fonts: any = { display, body, serif: display, sans: body }
+  if (monoStack.at(-1) === 'monospace') { fonts.mono = monoStack; fonts.mono = monoStack; }
+  const used = new Set([display[0], body[0], fonts.mono?.[0]].filter(Boolean))
+  const specs = style.googleFonts.filter((g) => used.has(g.split(':')[0]))
+  const url = googleFontsUrl({ googleFonts: specs }) ?? undefined
+  return { fonts, url }
+}
+
+/**
+ * Exact colours of the style's own mode (paper as background, ink as text).
+ * Surfaces step lighter than the paper, the sunken well a little darker.
+ */
+function nativePins(style: PrintStyle, brand: string, glass: boolean, darkPaper: boolean): Partial<Record<RoleName, string>> {
+  const c = style.cor
+  const paper = c.papel
+  const dl = 0
+  const surface = shiftL(paper, dl, 1)
+  const raised = shiftL(paper, dl, 1)
+  const pins: Partial<Record<RoleName, string>> = {
+    bg: paper,
+    'surface-solid': surface,
+    'surface-raised-solid': raised,
+    surface: glass ? shiftL(paper, dl, 0.7, 0.82) : surface,
+    'surface-raised': glass ? shiftL(paper, dl * 1.8, 0.6, 0.94) : raised,
+    'surface-sunken': shiftL(paper, darkPaper ? -0.04 : -0.03, 1.1),
+    secondary: raised,
+    ink: c.tinta,
+    'ink-2': c.tinta2,
+    'ink-3': c.tinta3,
+    'on-secondary': c.tinta,
+    brand,
+    'focus-ring': brand,
+    'cta-solid': brand,
+    'on-brand': ratio(paper, brand) >= ratio(c.tinta, brand) ? paper : c.tinta,
+    'on-cta': ratio(paper, brand) >= ratio(c.tinta, brand) ? paper : c.tinta,
+  }
+  // Rules: a pale printed rule is used as is; an ink-weight rule is thinned with alpha.
+  const lineRgb = parseColor(c.linha)
+  const lineAlpha = (a: number) => toCss({ ...lineRgb, a })
+  if (ratio(c.linha, paper) >= 3) {
+    pins.line = lineAlpha(0.3)
+    pins['line-soft'] = lineAlpha(0.16)
+    pins['line-strong'] = lineAlpha(0.55)
+  } else {
+    pins.line = c.linha
+    pins['line-soft'] = lineAlpha(0.6)
+    pins['line-strong'] = shiftL(c.linha, darkPaper ? 0.12 : -0.12)
+  }
+  // The highlighter tint is the soft brand (selected nav item, soft badges) when it reads against the paper.
+  if (deltaE2000(parseColor(c.marcaTexto), parseColor(paper)) >= 6) {
+    pins['brand-soft'] = c.marcaTexto
+    pins['nav-active'] = c.marcaTexto
+  }
+  for (const [tone, colour] of [
+    ['danger', c.prova.refutada],
+    ['success', c.prova.sustentada],
+    ['warning', c.prova['nao-da-para-afirmar']],
+  ] as const) {
+    if (chromatic(colour)) pins[tone] = colour
+  }
+  return pins
+}
+
+/**
+ * Exact colours of the other mode, over the generated background: the paper
+ * colour becomes the ink, and the accent is tried as the brand as printed (a
+ * grey accent, as in one-ink styles, is replaced by the paper colour).
+ */
+function counterPins(style: PrintStyle, accent: string): Partial<Record<RoleName, string>> {
+  const brand = chromatic(accent) ? accent : style.cor.papel
+  const pins: Partial<Record<RoleName, string>> = { ink: style.cor.papel, brand, 'focus-ring': brand }
+  if (!chromatic(accent)) pins['cta-solid'] = brand
+  return pins
+}
+
+/** Resolves both modes and drops every pin that takes part in a failing pair, until all pairs pass. */
+function settlePins(config: ThemeConfig): ThemeConfig {
+  const pins: Record<Mode, Partial<Record<RoleName, string>>> = { light: { ...config.pins?.light }, dark: { ...config.pins?.dark } }
+  for (const mode of ['light', 'dark'] as const) {
+    for (let round = 0; round < 12; round++) {
+      const failing = resolveTheme({ ...config, pins }, mode).report.filter((r) => !r.pass)
+      if (!failing.length) break
+      let dropped = false
+      // Foreground pins first; a background pin only when its foreground is already generated.
+      for (const r of failing) {
+        const fg = r.fg as RoleName
+        if (fg in pins[mode]) {
+          delete pins[mode][fg]
+          dropped = true
+        }
+      }
+      if (!dropped) {
+        for (const r of failing) {
+          for (const layer of r.over) {
+            if (layer in pins[mode]) {
+              delete pins[mode][layer as RoleName]
+              dropped = true
+            }
+          }
+        }
+      }
+      if (!dropped) break
+    }
+  }
+  return { ...config, pins }
+}
+
+/**
+ * The UI theme of a book style, in light and dark. The name is
+ * `print-<style name>`; the label is the style's own.
+ */
+export function printStyleToTheme(style: PrintStyle, override?: PrintThemeOverride): ThemeConfig {
+  return settlePins(draftPrintTheme(style, override))
+}
+
+/**
+ * Exact print colours the derivation had to give up for contrast, per mode
+ * (role -> the print colour that was dropped and regenerated).
+ */
+export function printThemeDroppedPins(style: PrintStyle, override?: PrintThemeOverride): Record<Mode, Partial<Record<RoleName, string>>> {
+  const draft = draftPrintTheme(style, override)
+  const settled = settlePins(draft)
+  const out: Record<Mode, Partial<Record<RoleName, string>>> = { light: {}, dark: {} }
+  for (const mode of ['light', 'dark'] as const) {
+    for (const [role, value] of Object.entries(draft.pins?.[mode] ?? {}) as Array<[RoleName, string]>) {
+      if (!(role in (settled.pins?.[mode] ?? {}))) out[mode][role] = value
+    }
+  }
+  return out
+}
+
+function draftPrintTheme(style: PrintStyle, override: PrintThemeOverride = PRINT_THEME_OVERRIDES[style.name as PrintPresetName] ?? {}): ThemeConfig {
+  const c = style.cor
+  const darkPaper = luminance(parseColor(c.papel)) < 0.2
+  const accent = override.brand ?? printStyleAccent(style)
+  // The brand is text on the paper (links, active states): the accent at a legible lightness.
+  const brand = legibleOn(accent, c.papel)
+  const e = style.estrutura
+
+  // Neutral hue: from the paper, or the ink when the paper is plain white or black.
+  const paper = oklch(c.papel)
+  const ink = oklch(c.tinta)
+  const tinted = paper.c >= ink.c ? paper : ink
+  const neutral: Seed = { hue: Math.round(tinted.h * 10) / 10, chroma: Math.min(0.02, Math.round(tinted.c * 1000) / 1000) }
+  const brandSeed = seedOf(accent)
+  const seeds: Record<SeedName, Seed> = {
+    brand: { hue: brandSeed.hue, chroma: Math.max(brandSeed.chroma, 0.01) },
+    neutral,
+    danger: seedOf(c.prova.refutada, TONE_FALLBACK.danger),
+    warning: seedOf(c.prova['nao-da-para-afirmar'], TONE_FALLBACK.warning),
+    success: seedOf(c.prova.sustentada, TONE_FALLBACK.success),
+    info: TONE_FALLBACK.info,
+  }
+
+  // Surface treatment: soft (glass, gradient, blurred shadow) only for the card and wash styles.
+  const soft = style.grafico === 'aquarela' || (e.painel === 'nenhum' && style.raio > 1)
+  const glass = override.glass ?? soft
+  const offset = e.tituloEstilo === 'sombra' || e.contornoBarra === true || e.painel === 'dossie'
+  const elevation = override.elevation ?? (offset ? 'offset' : soft || e.painel === 'cartao' ? 'soft' : 'flat')
+  const { fonts, url } = fontsOf(style)
+
+  const native = nativePins(style, brand, glass, darkPaper)
+  const counter = counterPins(style, accent)
+  const bgTexture = createTextureSvg(style)
+  const nativeMode: Mode = darkPaper ? 'dark' : 'light'
+  const counterMode: Mode = darkPaper ? 'light' : 'dark'
+
+  const config: ThemeConfig = {
+    name: `${PRINT_THEME_PREFIX}${style.name}`,
+    label: style.label,
+    seeds,
+    chartHues: chartHues(style),
+    radius: override.radius ?? Math.min(16, Math.round(style.raio * MM)),
+    contrast: 'default',
+    glass,
+    cta: override.cta ?? (soft ? 'gradient' : 'solid'),
+    elevation,
+    fonts,
+    ...(url ? { fontsUrl: url } : {}),
+    ...(bgTexture ? { strings: { "bg-image": bgTexture } } : {}),
+    pins: {
+      [nativeMode]: { ...native, ...override.pins?.[nativeMode] },
+      [counterMode]: { ...counter, ...override.pins?.[counterMode] },
+    },
+  }
+  return config
+}
+
+/** Every book style as a UI theme, in the order of `printPresets`. */
+export const printThemePresets: readonly ThemeConfig[] = (Object.values(printPresets) as PrintStyle[]).map((s) => printStyleToTheme(s))
+
+/** Stylesheet URL of the families of each print theme, by theme name (for ThemeProvider's `fonts`). */
+export const printThemeFontUrls: Readonly<Record<string, string>> = Object.fromEntries(
+  printThemePresets.filter((t) => t.fontsUrl).map((t) => [t.name, t.fontsUrl!]),
+)

package/src/scripts.ts

@@ -0,0 +1,75 @@
+// Per-script typography (`:lang()` overrides). Tympan serves the humanities and
+// the exact sciences in any language, so the base stacks (IBM Plex / Source
+// Serif with Noto fallbacks) are adapted per writing system:
+//  - the script's Noto family is moved to the front (CJK needs the right
+//    regional glyph set; Arabic and Indic need their shaping fonts first);
+//  - letter-spacing is removed where it breaks joining or reads badly
+//    (Arabic, Indic, Thai, CJK) and uppercase eyebrows lose their meaning;
+//  - line heights grow for scripts with tall stacks or marks;
+//  - line breaking follows the script (CJK strict, Thai by dictionary).
+import type { VarList } from './stylesheet.ts'
+
+interface ScriptRule {
+  /** BCP 47 language tags matched with :lang(). */
+  langs: string[]
+  sans: string[]
+  serif?: string[]
+  /** Line-height multiplier applied to every --ty-font-line-height-* token. */
+  leading?: number
+  /** Letter-spacing off (tracking tokens set to 0). */
+  noTracking?: boolean
+  /** Extra declarations for the element itself. */
+  text?: string[]
+}
+
+export const SCRIPT_RULES: ScriptRule[] = [
+  { langs: ['ar', 'fa', 'ur', 'ps', 'ckb', 'sd', 'ug'], sans: ['Noto Sans Arabic', 'Noto Naskh Arabic'], serif: ['Noto Naskh Arabic'], leading: 1.2, noTracking: true },
+  { langs: ['he', 'yi'], sans: ['Noto Sans Hebrew'], serif: ['Noto Serif Hebrew'], leading: 1.1, noTracking: true },
+  { langs: ['hi', 'mr', 'ne', 'sa', 'kok', 'mai'], sans: ['Noto Sans Devanagari'], serif: ['Noto Serif Devanagari'], leading: 1.25, noTracking: true },
+  { langs: ['bn', 'as'], sans: ['Noto Sans Bengali'], serif: ['Noto Serif Bengali'], leading: 1.25, noTracking: true },
+  { langs: ['ta'], sans: ['Noto Sans Tamil'], serif: ['Noto Serif Tamil'], leading: 1.25, noTracking: true },
+  { langs: ['te'], sans: ['Noto Sans Telugu'], leading: 1.25, noTracking: true },
+  { langs: ['kn'], sans: ['Noto Sans Kannada'], leading: 1.25, noTracking: true },
+  { langs: ['ml'], sans: ['Noto Sans Malayalam'], leading: 1.25, noTracking: true },
+  { langs: ['gu'], sans: ['Noto Sans Gujarati'], leading: 1.25, noTracking: true },
+  { langs: ['pa'], sans: ['Noto Sans Gurmukhi'], leading: 1.25, noTracking: true },
+  { langs: ['si'], sans: ['Noto Sans Sinhala'], leading: 1.25, noTracking: true },
+  { langs: ['th'], sans: ['Noto Sans Thai'], serif: ['Noto Serif Thai'], leading: 1.25, noTracking: true, text: ['word-break: normal;', 'line-break: auto;'] },
+  { langs: ['lo'], sans: ['Noto Sans Lao'], leading: 1.25, noTracking: true },
+  { langs: ['km'], sans: ['Noto Sans Khmer'], leading: 1.25, noTracking: true },
+  { langs: ['my'], sans: ['Noto Sans Myanmar'], leading: 1.35, noTracking: true },
+  { langs: ['am', 'ti', 'gez'], sans: ['Noto Sans Ethiopic'], serif: ['Noto Serif Ethiopic'], leading: 1.15, noTracking: true },
+  { langs: ['hy'], sans: ['Noto Sans Armenian'] },
+  { langs: ['ka'], sans: ['Noto Sans Georgian'] },
+  { langs: ['ja'], sans: ['Noto Sans JP'], serif: ['Noto Serif JP'], leading: 1.15, noTracking: true, text: ['line-break: strict;', 'word-break: normal;', 'overflow-wrap: anywhere;'] },
+  { langs: ['zh', 'zh-Hans', 'zh-CN', 'zh-SG'], sans: ['Noto Sans SC'], serif: ['Noto Serif SC'], leading: 1.15, noTracking: true, text: ['line-break: strict;', 'word-break: normal;', 'overflow-wrap: anywhere;'] },
+  { langs: ['zh-Hant', 'zh-TW', 'zh-HK', 'zh-MO'], sans: ['Noto Sans TC'], serif: ['Noto Serif TC'], leading: 1.15, noTracking: true, text: ['line-break: strict;', 'word-break: normal;', 'overflow-wrap: anywhere;'] },
+  { langs: ['ko'], sans: ['Noto Sans KR'], serif: ['Noto Serif KR'], leading: 1.15, noTracking: true, text: ['word-break: keep-all;', 'overflow-wrap: anywhere;'] },
+]
+
+const quote = (family: string) => (/^[\w-]+$/.test(family) && !/\s/.test(family) ? family : `"${family}"`)
+
+function scaledPx(value: string, factor: number): string {
+  const m = /^(\d+(?:\.\d+)?)px$/.exec(value.trim())
+  if (!m) return value
+  // Round up to an even pixel so text keeps sitting on the 4 px rhythm's half-steps.
+  return `${Math.ceil((Number(m[1]) * factor) / 2) * 2}px`
+}
+
+/** The `:lang()` blocks, derived from the base token values. */
+export function scriptRules(base: VarList): string {
+  const value = (name: string) => base.find(([n]) => n === name)?.[1] ?? ''
+  const sansBase = value('--ty-font-sans')
+  const serifBase = value('--ty-font-serif')
+  const leadings = base.filter(([n]) => n.startsWith('--ty-font-line-height-'))
+  const trackings = base.filter(([n]) => n.startsWith('--ty-font-tracking-'))
+  return SCRIPT_RULES.map((r) => {
+    const decls: string[] = [`--ty-font-sans: ${r.sans.map(quote).join(', ')}, ${sansBase};`]
+    if (r.serif) decls.push(`--ty-font-serif: ${r.serif.map(quote).join(', ')}, ${serifBase};`)
+    if (r.leading) for (const [n, v] of leadings) decls.push(`${n}: ${scaledPx(v, r.leading)};`)
+    if (r.noTracking) for (const [n] of trackings) decls.push(`${n}: 0em;`)
+    decls.push(...(r.text ?? []))
+    const selectors = r.langs.map((l) => `:lang(${l})`).join(',\n')
+    return `${selectors} {\n${decls.map((d) => `  ${d}`).join('\n')}\n}`
+  }).join('\n\n')
+}