@timmo001/groundwork-tokens 0.0.0-stage → 0.3.0

package/src/generate.ts

@@ -0,0 +1,648 @@
+/**
+ * Writes the solved themes out to every target in `generated/`: CSS, TS,
+ * JSON, QML, OpenTUI and ANSI.
+ *
+ * @module
+ */
+import { toCss, toHex } from "./color.ts";
+import type { Font, MonoFont, Style } from "./schema.ts";
+import {
+  check,
+  modes,
+  statuses,
+  type Check,
+  type Mode,
+  type ResolvedTheme,
+  type Roles,
+} from "./solve.ts";
+
+const header = "Generated by `mise run gen` from packages/tokens. Don't edit.";
+
+const fontStack = (font: Font | MonoFont) => {
+  if (font === "System UI") {
+    return 'system-ui, -apple-system, "Segoe UI", Roboto, sans-serif';
+  }
+
+  const generic = font.endsWith("Mono")
+    ? "ui-monospace, monospace"
+    : "system-ui, sans-serif";
+
+  return `"${font} Variable", "${font}", ${generic}`;
+};
+
+const density = { compact: 0.85, normal: 1, roomy: 1.2 } as const;
+
+const borderColor = {
+  none: "transparent",
+  hairline: "var(--gw-color-border-quiet)",
+  soft: "var(--gw-color-border-normal)",
+  strong: "var(--gw-color-border-loud)",
+} as const;
+
+/** The style as `--gw-*` properties, so components never branch on a theme. */
+const styleProperties = (style: Style) => ({
+  "font-sans": fontStack(style.font),
+  "font-figures": fontStack(style.figures ?? style.font),
+  "font-mono": fontStack(style.mono),
+  "font-weight-regular": String(style.weights.regular),
+  "font-weight-strong": String(style.weights.strong),
+  density: String(density[style.density]),
+  ...spacing,
+  "radius-panel": `${style.radius.panel}px`,
+  "radius-control": `${style.radius.control}px`,
+  "radius-chip": `${style.radius.chip}px`,
+  "border-width":
+    style.border.strength === "none" ? "0px" : `${style.border.width}px`,
+  "border-color": borderColor[style.border.strength],
+  "label-transform": style.capitals ? "uppercase" : "none",
+  "label-tracking": style.capitals ? "0.06em" : "normal",
+  "link-color": "var(--gw-color-link)",
+  "link-underline": style.link.underline === "thick" ? "2px" : "1px",
+  "panel-sheen":
+    style.surfaceAccent === "sheen"
+      ? "linear-gradient(160deg, color-mix(in oklch, var(--gw-color-accent) 14%, transparent), transparent 55%)"
+      : "none",
+  "panel-marker": style.surfaceAccent === "marker" ? "4px" : "0px",
+  "panel-flange": style.surfaceAccent === "flange" ? "3px" : "0px",
+  "panel-flange-color":
+    style.surfaceAccent === "flange"
+      ? "var(--gw-color-accent)"
+      : "var(--gw-border-color)",
+  "row-padding":
+    style.rows === "dense"
+      ? "calc(var(--gw-space-1) * 1.5)"
+      : "var(--gw-space-3)",
+});
+
+const shadows = (dark: boolean) => {
+  const ink = dark ? "0 0 0" : "16 20 28";
+  const strength = dark ? 3 : 1;
+
+  return {
+    "shadow-s": `0 1px 2px rgb(${ink} / ${0.06 * strength})`,
+    "shadow-m": `0 4px 12px rgb(${ink} / ${0.08 * strength})`,
+    "shadow-l": `0 12px 32px rgb(${ink} / ${0.12 * strength})`,
+  };
+};
+
+/**
+ * Spacing scales with the theme's density. A custom property's `var()`
+ * resolves where it's declared, so the scale is declared again in every
+ * theme beside its density, not only on `:root`.
+ */
+const spacing = {
+  // Home Assistant's scale: 4px steps, space-1 to space-20, plus a half step
+  "space-0-5": "calc(0.125rem * var(--gw-density))",
+  ...Object.fromEntries(
+    Array.from({ length: 20 }, (_, index) => [
+      `space-${index + 1}`,
+      `calc(${(index + 1) * 0.25}rem * var(--gw-density))`,
+    ]),
+  ),
+};
+
+const foundations = {
+  density: "1",
+  ...spacing,
+  "font-size-multiplier": "1",
+  "font-size-2xs": "calc(0.6875rem * var(--gw-font-size-multiplier))",
+  "font-size-xs": "calc(0.75rem * var(--gw-font-size-multiplier))",
+  "font-size-s": "calc(0.875rem * var(--gw-font-size-multiplier))",
+  "font-size-m": "calc(1rem * var(--gw-font-size-multiplier))",
+  "font-size-l": "calc(1.125rem * var(--gw-font-size-multiplier))",
+  "font-size-xl": "calc(1.375rem * var(--gw-font-size-multiplier))",
+  "font-size-2xl": "calc(1.75rem * var(--gw-font-size-multiplier))",
+  "font-size-3xl": "calc(2.125rem * var(--gw-font-size-multiplier))",
+  "font-size-4xl": "calc(2.5rem * var(--gw-font-size-multiplier))",
+  "radius-xs": "2px",
+  "radius-s": "4px",
+  "radius-m": "8px",
+  "radius-l": "12px",
+  "radius-xl": "16px",
+  "radius-pill": "999px",
+  // Home Assistant's animation durations
+  "motion-instant": "75ms",
+  "motion-fast": "150ms",
+  "motion-normal": "250ms",
+  "motion-slow": "350ms",
+  "motion-easing": "cubic-bezier(0.2, 0, 0, 1)",
+  "focus-width": "2px",
+  "focus-offset": "2px",
+  "content-width": "72rem",
+  "content-width-narrow": "44rem",
+};
+
+const declarations = (properties: Record<string, string>, indent = "  ") =>
+  Object.entries(properties)
+    .map(([name, value]) => `${indent}--gw-${name}: ${value};`)
+    .join("\n");
+
+const colorProperties = (roles: Roles) =>
+  Object.fromEntries(
+    Object.entries(roles).map(([role, color]) => [
+      `color-${role}`,
+      toCss(color),
+    ]),
+  );
+
+const modeBlock = (roles: Roles, dark: boolean, indent = "  ") =>
+  [
+    `${indent}color-scheme: ${dark ? "dark" : "light"};`,
+    declarations({ ...colorProperties(roles), ...shadows(dark) }, indent),
+  ].join("\n");
+
+/** One theme's `--gw-*` rules under `[data-gw-theme]`, in each of its modes. */
+export const themeCss = (theme: ResolvedTheme) => {
+  const selector = `[data-gw-theme="${theme.id}"]`;
+  const style = `${selector} {\n${declarations(styleProperties(theme.style))}\n}`;
+  const { light, dark, darker } = theme.modes;
+  const blocks = [style];
+
+  if (light !== undefined) {
+    blocks.push(`${selector} {\n${modeBlock(light, false)}\n}`);
+  } else if (dark !== undefined) {
+    blocks.push(`${selector} {\n${modeBlock(dark, true)}\n}`);
+  }
+
+  if (dark !== undefined) {
+    blocks.push(
+      `${selector}[data-gw-mode="dark"] {\n${modeBlock(dark, true)}\n}`,
+    );
+
+    if (light !== undefined) {
+      blocks.push(
+        `@media (prefers-color-scheme: dark) {\n  ${selector}:not([data-gw-mode]) {\n${modeBlock(dark, true, "    ")}\n  }\n}`,
+      );
+    }
+  }
+
+  if (darker !== undefined) {
+    blocks.push(
+      `${selector}[data-gw-mode="darker"] {\n${modeBlock(darker, true)}\n}`,
+    );
+  }
+
+  return blocks.join("\n\n");
+};
+
+/**
+ * What each `gw-` element looks like before its script defines it: the
+ * display and block size it will have, so nothing moves when it upgrades.
+ */
+const preUpgrade = {
+  "gw-fade-in": { opacity: "0" },
+  "gw-button, gw-menu-button, gw-segmented": {
+    display: "inline-block",
+    "min-block-size": "2.5rem",
+    "vertical-align": "middle",
+  },
+  "gw-button": {
+    "padding-inline": "calc(var(--gw-space-4) + 1px)",
+    "font-size": "var(--gw-font-size-s)",
+    "font-weight": "var(--gw-font-weight-strong)",
+    "line-height": "2.5rem",
+    "white-space": "nowrap",
+    "text-transform": "var(--gw-label-transform)",
+    "letter-spacing": "var(--gw-label-tracking)",
+  },
+  'gw-button[size="xs"]': {
+    "min-block-size": "1.5rem",
+    "line-height": "1.5rem",
+  },
+  'gw-button[size="small"]': {
+    "min-block-size": "2rem",
+    "line-height": "2rem",
+  },
+  'gw-button[size="large"]': {
+    "min-block-size": "3rem",
+    "line-height": "3rem",
+  },
+  'gw-button[size="xl"]': {
+    "min-block-size": "3.5rem",
+    "line-height": "3.5rem",
+  },
+  "gw-card": {
+    display: "block",
+    padding: "var(--gw-space-4)",
+    border: "var(--gw-border-width) solid transparent",
+  },
+  "gw-card[heading]": {
+    "padding-block-start":
+      "calc(var(--gw-space-4) + 1.5rem + var(--gw-space-3))",
+  },
+  "gw-page-header": { display: "flex", "min-block-size": "3rem" },
+  "gw-page-header[description]": { "min-block-size": "3.6875rem" },
+  "gw-section-title": { display: "flex", "align-items": "center" },
+  "gw-button[icon]": {
+    "padding-inline-start":
+      "calc(var(--gw-space-4) + var(--gw-space-2) + 1.125rem + 1px)",
+  },
+  'gw-button:not(:defined) > [slot="icon"]': {
+    "inline-size": "1.125rem",
+    "block-size": "1.125rem",
+    "margin-inline-end": "var(--gw-space-2)",
+    "vertical-align": "middle",
+  },
+  "gw-chip": { display: "inline-flex", "min-block-size": "2rem" },
+  "gw-badge": { display: "inline-flex", "min-block-size": "2.25rem" },
+  'gw-badge[size="small"]': { "min-block-size": "1.75rem" },
+  "gw-dot": {
+    display: "inline-block",
+    "inline-size": "0.5rem",
+    "min-block-size": "0.5rem",
+  },
+  "gw-meter": { display: "block", "min-block-size": "2.25rem" },
+  "gw-gauge": {
+    display: "inline-block",
+    "inline-size": "8.5rem",
+    "min-block-size": "9.625rem",
+  },
+  "gw-alert": { display: "block", "min-block-size": "2.5rem" },
+  "gw-spinner, gw-skeleton-icon": {
+    display: "inline-flex",
+    "min-block-size": "1.25rem",
+  },
+  "gw-input, gw-select": { display: "flex", "min-block-size": "4.5rem" },
+  "gw-input:is([hint], [error]), gw-select:is([hint], [error])": {
+    "min-block-size": "6.25rem",
+  },
+  "gw-select:is([label-hidden], [inline-label])": {
+    "min-block-size": "2.5rem",
+  },
+  "gw-select[inline-label]": { display: "inline-flex" },
+  "gw-checkbox, gw-switch": { display: "flex", "min-block-size": "1.5rem" },
+  "gw-stack": {
+    display: "flex",
+    "flex-direction": "column",
+    gap: "var(--gw-space-3)",
+  },
+  "gw-row": {
+    display: "flex",
+    "flex-wrap": "wrap",
+    "align-items": "center",
+    gap: "var(--gw-space-2)",
+  },
+  "gw-grid": {
+    display: "grid",
+    "grid-template-columns":
+      "repeat(auto-fill, minmax(min(100%, var(--gw-grid-min, 18rem)), 1fr))",
+    gap: "var(--gw-space-3)",
+  },
+  "gw-dialog, gw-popover, gw-command-menu, gw-toaster, gw-option-list": {
+    display: "none",
+  },
+};
+
+const preUpgradeCss = Object.entries(preUpgrade)
+  .map(([selectors, properties]) => {
+    const selector = selectors
+      .split(", ")
+      .map((item) =>
+        item.includes(":not(:defined)") ? item : `${item}:not(:defined)`,
+      )
+      .join(",\n");
+
+    const body = Object.entries(properties)
+      .map(([name, value]) => `  ${name}: ${value};`)
+      .join("\n");
+
+    return `${selector} {\n${body}\n}`;
+  })
+  .join("\n\n");
+
+export const css = (themes: readonly ResolvedTheme[]) =>
+  [
+    `/* ${header} */`,
+    `:root {\n${declarations(foundations)}\n}`,
+    `@media (prefers-reduced-motion: reduce) {\n  :root {\n    --gw-motion-instant: 1ms;\n    --gw-motion-fast: 1ms;\n    --gw-motion-normal: 1ms;\n    --gw-motion-slow: 1ms;\n  }\n}`,
+    preUpgradeCss,
+    ...themes.map(themeCss),
+  ].join("\n\n") + "\n";
+
+/** Each Blume color token and the role it takes. */
+const blumeRoles = {
+  background: "surface-default",
+  foreground: "text-primary",
+  muted: "surface-low",
+  "muted-foreground": "text-secondary",
+  border: "border-normal",
+  accent: "accent",
+  "accent-foreground": "on-accent",
+  action: "fill-primary-resting",
+  "action-foreground": "on-primary",
+  "code-background": "surface-raised",
+  "code-highlight": "fill-info-quiet",
+  "code-highlight-border": "border-info",
+  "code-add": "fill-success-quiet",
+  "code-add-border": "border-success",
+  "code-remove": "fill-danger-quiet",
+  "code-remove-border": "border-danger",
+  "code-error": "fill-danger-quiet",
+  "code-error-border": "border-danger",
+  "code-warning": "fill-warning-quiet",
+  "code-warning-border": "border-warning",
+  "code-word": "fill-info-quiet",
+  "code-word-border": "border-info",
+};
+
+/** Blume's color tokens from a theme's roles in one mode. */
+const blumeColors = (roles: Roles) =>
+  Object.fromEntries(
+    Object.entries(blumeRoles).flatMap(([token, role]) => {
+      const color = roles[role];
+
+      return color === undefined ? [] : [[token, toCss(color)]];
+    }),
+  );
+
+const blumeDeclarations = (properties: Record<string, string>) =>
+  Object.entries(properties)
+    .map(([name, value]) => `  --blume-${name}: ${value};`)
+    .join("\n");
+
+/**
+ * A theme's Blume rules under one root selector: light on the root, dark on
+ * Blume's `data-theme="dark"`, and Darker when `data-gw-darker` is set too.
+ */
+const blumeRules = (theme: ResolvedTheme, root: string) => {
+  const { light, dark, darker } = theme.modes;
+
+  const style = {
+    radius: `${theme.style.radius.panel}px`,
+    "font-body": fontStack(theme.style.font),
+    "font-display": fontStack(theme.style.font),
+    "font-mono": fontStack(theme.style.mono),
+  };
+
+  const lightTokens: Record<string, string> =
+    light === undefined ? style : { ...style, ...blumeColors(light) };
+
+  const rules = [`${root} {\n${blumeDeclarations(lightTokens)}\n}`];
+
+  if (dark !== undefined) {
+    rules.push(
+      `${root}[data-theme="dark"] {\n${blumeDeclarations(blumeColors(dark))}\n}`,
+    );
+  }
+
+  if (darker !== undefined) {
+    rules.push(
+      `${root}[data-theme="dark"][data-gw-darker] {\n${blumeDeclarations(blumeColors(darker))}\n}`,
+    );
+  }
+
+  return rules;
+};
+
+/**
+ * One theme as Blume's tokens, for docs-kit. Fonts are stacks, so the site
+ * loads the files.
+ */
+export const blumeTheme = (theme: ResolvedTheme) =>
+  [
+    `/* ${header} */`,
+    `/* ${theme.name}: ${theme.description} */`,
+    ...blumeRules(theme, ":root"),
+  ].join("\n\n") + "\n";
+
+/**
+ * Every core theme as Blume's tokens, each under `data-gw-docs-theme`, for a
+ * site that lets readers pick one with the theme picker.
+ */
+export const blumeThemes = (themes: readonly ResolvedTheme[]) =>
+  [
+    `/* ${header} */`,
+    ...themes
+      .filter((theme) => !theme.optional)
+      .flatMap((theme) =>
+        blumeRules(theme, `:root[data-gw-docs-theme="${theme.id}"]`),
+      ),
+  ].join("\n\n") + "\n";
+
+const hexRoles = (roles: Roles) =>
+  Object.fromEntries(
+    Object.entries(roles).map(([role, color]) => [role, toHex(color)]),
+  );
+
+const hexModes = (theme: ResolvedTheme) =>
+  Object.fromEntries(
+    modes.flatMap((mode) => {
+      const roles = theme.modes[mode];
+
+      return roles === undefined ? [] : [[mode, hexRoles(roles)]];
+    }),
+  );
+
+const data = (themes: readonly ResolvedTheme[]) => ({
+  themes: themes.map((theme) => ({
+    id: theme.id,
+    name: theme.name,
+    description: theme.description,
+    optional: theme.optional,
+    family: theme.family ?? null,
+    examples: theme.examples,
+    style: theme.style,
+    properties: styleProperties(theme.style),
+    modes: hexModes(theme),
+  })),
+});
+
+export const json = (themes: readonly ResolvedTheme[]) =>
+  `${JSON.stringify(data(themes), null, 2)}\n`;
+
+export const typescript = (themes: readonly ResolvedTheme[]) =>
+  [
+    `// ${header}`,
+    "",
+    `export const themes = ${JSON.stringify(data(themes).themes, null, 2)} as const;`,
+    "",
+    'export type ThemeId = (typeof themes)[number]["id"];',
+    "",
+  ].join("\n");
+
+export const qml = (themes: readonly ResolvedTheme[]) =>
+  [
+    `// ${header}`,
+    "pragma Singleton",
+    "import QtQuick",
+    "",
+    "QtObject {",
+    `    readonly property var themes: (${JSON.stringify(
+      Object.fromEntries(themes.map((theme) => [theme.id, hexModes(theme)])),
+    )})`,
+    "}",
+    "",
+  ].join("\n");
+
+/** Resolved colors for OpenTUI, which takes hex strings. */
+export const opentui = (themes: readonly ResolvedTheme[]) =>
+  [
+    `// ${header}`,
+    "",
+    `export const opentuiThemes = ${JSON.stringify(
+      Object.fromEntries(themes.map((theme) => [theme.id, hexModes(theme)])),
+      null,
+      2,
+    )} as const;`,
+    "",
+  ].join("\n");
+
+/**
+ * Plain CLI output follows the terminal: roles map onto the 16 ANSI colors,
+ * so the terminal's own theme decides how they look.
+ */
+export const ansi = () =>
+  `${JSON.stringify(
+    {
+      $comment: header,
+      roles: {
+        "text-primary": { name: "default", index: null },
+        "text-strong": { name: "default", index: null, bold: true },
+        "text-secondary": { name: "brightBlack", index: 8 },
+        accent: { name: "cyan", index: 6 },
+        info: { name: "blue", index: 4 },
+        success: { name: "green", index: 2 },
+        important: { name: "magenta", index: 5 },
+        warning: { name: "yellow", index: 3 },
+        danger: { name: "red", index: 1 },
+      },
+      noColor: "Plain text when NO_COLOR is set or stdout isn't a terminal.",
+    },
+    null,
+    2,
+  )}\n`;
+
+const modeLabel: Record<Mode, string> = {
+  light: "Light",
+  dark: "Dark",
+  darker: "Darker",
+};
+
+const roleLabel = (role: string) =>
+  statuses.some((status) => status === role) ? `Status: ${role}` : role;
+
+/** The contrast report as a docs page, one table per theme. */
+export const contrastPage = (themes: readonly ResolvedTheme[]) => {
+  const sections = themes.map((theme) => {
+    const results = check(theme);
+
+    const rows = [...new Set(results.map((result) => result.role))].map(
+      (role) => {
+        const cells = modes.map((mode) => {
+          const result = results.find(
+            (item: Check) => item.role === role && item.mode === mode,
+          );
+
+          return result === undefined
+            ? "n/a"
+            : `${result.ratio.toFixed(2)}${result.passes ? "" : " ✗"}`;
+        });
+
+        const target = results.find((item) => item.role === role)?.target ?? 0;
+
+        return `| ${roleLabel(role)} | ${target} | ${cells.join(" | ")} |`;
+      },
+    );
+
+    return [
+      `## ${theme.name}`,
+      "",
+      theme.optional
+        ? "Optional. Mapped from its own palette, so it's reported rather than held to the targets."
+        : "",
+      "",
+      `| Role | Target | ${modes.map((mode) => modeLabel[mode]).join(" | ")} |`,
+      "| --- | --- | --- | --- | --- |",
+      ...rows,
+    ]
+      .filter((line, index, lines) => line !== "" || lines[index - 1] !== "")
+      .join("\n");
+  });
+
+  return [
+    "---",
+    "title: Contrast report",
+    "description: Every theme role measured against its contrast target on the raised surface, in light, dark and Darker.",
+    "---",
+    "",
+    `<!-- ${header} -->`,
+    "",
+    "Each role is measured with the WCAG 2 ratio against the raised surface, the lowest-contrast surface text sits on. `mise run check` fails when a core theme misses a target; ✗ marks a miss.",
+    "",
+    ...sections.flatMap((section) => [section, ""]),
+  ].join("\n");
+};
+
+const styleSummary = (style: Style) => [
+  `| Font | ${style.font}${style.figures === undefined ? "" : `, with ${style.figures} figures`} |`,
+  `| Code | ${style.mono} |`,
+  `| Radius | Panels ${style.radius.panel}px, controls ${style.radius.control === 999 ? "pill" : `${style.radius.control}px`}, chips ${style.radius.chip === 999 ? "pill" : `${style.radius.chip}px`} |`,
+  `| Borders | ${style.border.strength === "none" ? "None" : `${style.border.width}px, ${style.border.strength}`} |`,
+  `| Weights | ${style.weights.regular} and ${style.weights.strong} |`,
+  `| Density | ${style.density}${style.rows === "dense" ? ", lists as dense rows" : ""} |`,
+  `| Labels | ${style.capitals ? "Capitals" : "Sentence case"} |`,
+  `| Links | ${style.link.color === "accent" ? "Accent" : "Strong text"}, ${style.link.underline} underline |`,
+  `| Surface accent | ${style.surfaceAccent} |`,
+];
+
+/** A docs page for one core theme, rendering it live in every mode. */
+export const themePage = (theme: ResolvedTheme) =>
+  [
+    "---",
+    `title: ${theme.name}`,
+    `description: ${theme.description}`,
+    "---",
+    "",
+    `{/* ${header} */}`,
+    "",
+    `<ThemePreview theme="${theme.id}" />`,
+    "",
+    ...(theme.examples.length === 0
+      ? []
+      : [
+          `Example users: ${theme.examples.join(", ")}. Any app can pick any theme.`,
+          "",
+        ]),
+    "## Style",
+    "",
+    "| | |",
+    "| --- | --- |",
+    ...styleSummary(theme.style),
+    "",
+    "## Roles",
+    "",
+    `<ThemeSwatches theme="${theme.id}" />`,
+    "",
+    `The source is [\`packages/tokens/themes/${theme.id}.json\`](https://github.com/timmo001/groundwork/blob/main/packages/tokens/themes/${theme.id}.json).`,
+    "",
+  ].join("\n");
+
+/** One page for the optional themes, mapped from their own palettes. */
+export const optionalPage = (themes: readonly ResolvedTheme[]) => {
+  const optional = themes.filter((theme) => theme.optional);
+  const families = [...new Set(optional.map((theme) => theme.family ?? ""))];
+
+  return [
+    "---",
+    "title: Optional themes",
+    "description: Catppuccin and Tokyo Night, mapped onto the roles so they stay faithful to their palettes. Apps opt in.",
+    "---",
+    "",
+    `{/* ${header} */}`,
+    "",
+    "Each flavor is one mode of its palette, mapped straight onto the roles rather than solved, so it looks the way the palette's authors intended. They take Base's style. The [contrast report](/themes/contrast) shows where a palette sits below the core targets.",
+    "",
+    ...families.flatMap((family) => [
+      `## ${family}`,
+      "",
+      ...optional
+        .filter((theme) => theme.family === family)
+        .flatMap((theme) => [
+          `### ${theme.name}`,
+          "",
+          `<ThemePreview theme="${theme.id}" />`,
+          "",
+        ]),
+    ]),
+  ].join("\n");
+};

package/src/index.ts

@@ -0,0 +1,11 @@
+/**
+ * Design tokens: the theme schema, the OKLCH color helpers, and the solver
+ * that turns a theme into every role in every mode.
+ *
+ * @packageDocumentation
+ */
+export * from "./color.ts";
+
+export * from "./schema.ts";
+
+export * from "./solve.ts";

package/src/runtime.ts

@@ -0,0 +1,36 @@
+/**
+ * Themes at runtime: decodes a theme document a user uploaded or an agent
+ * wrote, solves it and returns its CSS and contrast checks. It needs no file
+ * system, so it runs in a browser.
+ *
+ * @module
+ */
+import { Schema } from "effect";
+import baseDocument from "../themes/base.json" with { type: "json" };
+import { themeCss } from "./generate.ts";
+import { SolvedTheme, Theme } from "./schema.ts";
+import { check, resolve, type Check, type ResolvedTheme } from "./solve.ts";
+
+const base = Schema.decodeUnknownSync(SolvedTheme)(baseDocument);
+
+/** A theme solved at runtime, with its CSS and every contrast check. */
+export interface RuntimeTheme {
+  readonly theme: ResolvedTheme;
+  readonly css: string;
+  readonly checks: readonly Check[];
+}
+
+/** Decodes a theme document from its JSON text, as a `Result`. */
+export const parseTheme = Schema.decodeUnknownResult(
+  Schema.fromJsonString(Theme),
+);
+
+/**
+ * Solves a theme into light, dark and Darker. Its CSS applies under
+ * `data-gw-theme` set to `id`, which defaults to the theme's own.
+ */
+export const runtimeTheme = (theme: Theme, id = theme.id): RuntimeTheme => {
+  const resolved = resolve({ ...theme, id }, base.style);
+
+  return { theme: resolved, css: themeCss(resolved), checks: check(resolved) };
+};