@motir/design-system 0.1.0

package/dist/theme/palettes.d.ts

@@ -0,0 +1,146 @@
+/**
+ * The Motir PALETTE LIBRARY — the named-colour registry (Subtask 7.3.48).
+ *
+ * A "palette" is a named COLOUR scheme the whole UI can swap to at runtime —
+ * the second half of the two-axis contract the style schema (7.3.32) wrote but
+ * did not implement. It is the COLOUR/hue axis, and it is deliberately
+ * INDEPENDENT of the SHAPE axis (`data-style` — see ./styles.ts): a palette
+ * decides what colours the product WEARS (surfaces, ink, accent, tints,
+ * semantic hues); a style decides how it FEELS (silhouette, elevation,
+ * density, motion). Picking a palette never changes a radius, and picking a
+ * style never changes a hue.
+ *
+ * ── The two-axis runtime contract ───────────────────────────────────────
+ *   data-palette="<palette-id>" — THIS axis. Layers per-palette `--el-*`
+ *                                 element-token overrides over the Tier-3
+ *                                 base in app/globals.css.
+ *   data-style="<style-id>"     — the INDEPENDENT shape/feel axis.
+ *   data-theme="light|dark"     — the light/dark base WITHIN a palette
+ *                                 (`--color-*`); orthogonal to the palette.
+ *
+ * A `[data-palette='…']` block in globals.css MUST override ONLY `--el-*`
+ * element colour tokens — NEVER a shape/feel token (radius / spacing / shadow
+ * / sizing / motion / type). That is the style axis's job, and keeping the two
+ * disjoint is what makes "style × palette" a true product of two independent
+ * choices rather than N×M hand-tuned combinations.
+ *
+ * ── v1 — Motir's own palette ─────────────────────────────────────────────
+ * v1 ships exactly ONE registered palette: **Motir** — the warm, Notion-warm
+ * scheme the product already wears (cream surfaces, charcoal ink, purple
+ * primary, pastel feature tints). It is the Tier-0/Tier-3 BASE, so — exactly
+ * like the `warm-editorial` base style — it needs NO `[data-palette]` override
+ * block; the base `--el-*` tokens already are it. (Per Yue, 2026-06-17: "use
+ * Motir's colour palette for the v1.") Each later "Palette: …" subtask ADDS its
+ * entry here, ships a `[data-palette='<id>']` block in globals.css overriding
+ * the `--el-*` layer, and authors its `docs/palettes/<id>.md` doc — exactly the
+ * shape the per-style subtasks (7.3.33+) follow on the other axis.
+ */
+/** A registered, runtime-selectable colour palette. */
+interface PaletteDefinition {
+    /** The `data-palette` attribute value. Stable; used as the localStorage value. */
+    id: string;
+    /** Display name shown in the gallery / `/tokens` toggle. */
+    name: string;
+    /** One-line characterization of the colour mood. */
+    tagline: string;
+    /** Where the colours are drawn from (credit / mood anchor). */
+    inspiration: string;
+    /**
+     * Repo-relative path to this palette's doc — the colour-role reference a
+     * later getdesign-style swap or the `/tokens` composer reads. Every
+     * registered palette maps to exactly one.
+     */
+    designDoc: string;
+}
+/**
+ * The registry. Insertion order is the gallery order. Each `id` matches a
+ * `[data-palette='<id>']` block in app/globals.css (Motir is the base, so its
+ * block is the Tier-3 defaults — no override block needed).
+ */
+declare const PALETTE_REGISTRY: {
+    motir: {
+        id: string;
+        name: string;
+        tagline: string;
+        inspiration: string;
+        designDoc: string;
+    };
+    cobalt: {
+        id: string;
+        name: string;
+        tagline: string;
+        inspiration: string;
+        designDoc: string;
+    };
+    graphite: {
+        id: string;
+        name: string;
+        tagline: string;
+        inspiration: string;
+        designDoc: string;
+    };
+    evergreen: {
+        id: string;
+        name: string;
+        tagline: string;
+        inspiration: string;
+        designDoc: string;
+    };
+    spectrum: {
+        id: string;
+        name: string;
+        tagline: string;
+        inspiration: string;
+        designDoc: string;
+    };
+    amber: {
+        id: string;
+        name: string;
+        tagline: string;
+        inspiration: string;
+        designDoc: string;
+    };
+    sienna: {
+        id: string;
+        name: string;
+        tagline: string;
+        inspiration: string;
+        designDoc: string;
+    };
+    garnet: {
+        id: string;
+        name: string;
+        tagline: string;
+        inspiration: string;
+        designDoc: string;
+    };
+    citrine: {
+        id: string;
+        name: string;
+        tagline: string;
+        inspiration: string;
+        designDoc: string;
+    };
+    candy: {
+        id: string;
+        name: string;
+        tagline: string;
+        inspiration: string;
+        designDoc: string;
+    };
+};
+/** The id of every registered palette — `data-palette` value space. */
+type PaletteId = keyof typeof PALETTE_REGISTRY;
+/** All registered palette ids, in gallery order. */
+declare const PALETTE_IDS: PaletteId[];
+/**
+ * The default palette a fresh install / unset preference resolves to. Motir is
+ * the house palette and the Tier-3 base.
+ */
+declare const DEFAULT_PALETTE_ID: PaletteId;
+/** Narrowing guard — is an arbitrary string a registered palette id? */
+declare function isPaletteId(value: unknown): value is PaletteId;
+/** Resolve a (possibly stale / unknown) value to a valid palette definition. */
+declare function resolvePalette(value: unknown): PaletteDefinition;
+
+export { DEFAULT_PALETTE_ID, PALETTE_IDS, PALETTE_REGISTRY, type PaletteDefinition, type PaletteId, isPaletteId, resolvePalette };

package/dist/theme/palettes.js

@@ -0,0 +1,85 @@
+// src/theme/palettes.ts
+var PALETTE_REGISTRY = {
+  motir: {
+    id: "motir",
+    name: "Motir",
+    tagline: "Warm and editorial \u2014 cream surfaces, charcoal ink, a purple primary, pastel tints.",
+    inspiration: "Notion's warm marketing palette \u2014 the product's house colours.",
+    designDoc: "docs/palettes/motir.md"
+  },
+  cobalt: {
+    id: "cobalt",
+    name: "Cobalt",
+    tagline: "Cool and institutional \u2014 slate-cool surfaces, a confident cobalt primary, cooled tints.",
+    inspiration: "Coinbase's clean institutional blue + IBM's structured blue, on Radix Blue/Indigo/Slate scales.",
+    designDoc: "docs/palettes/cobalt.md"
+  },
+  graphite: {
+    id: "graphite",
+    name: "Graphite",
+    tagline: "Stark and editorial \u2014 cool greyscale surfaces + ink, an ink CTA, a single restrained cool-blue accent.",
+    inspiration: "Vercel's black-and-white precision + Linear's ultra-minimal, on Radix Slate/Blue scales.",
+    designDoc: "docs/palettes/graphite.md"
+  },
+  evergreen: {
+    id: "evergreen",
+    name: "Evergreen",
+    tagline: "Fresh and technical \u2014 an emerald primary over cooled forest neutrals, a green-leaning UI.",
+    inspiration: "getdesign.md \u2014 Supabase (dark emerald) / Spotify (vibrant green) / MongoDB (spring green), on Radix green/jade ramps.",
+    designDoc: "docs/palettes/evergreen.md"
+  },
+  spectrum: {
+    id: "spectrum",
+    name: "Spectrum",
+    tagline: "Vibrant and playful \u2014 crisp cool surfaces, a bright violet primary, a candy-bright multi-hue accent & tint set.",
+    inspiration: "Figma's vibrant multi-colour brand + Airtable's colourful, friendly palette, on Radix Violet/Iris/Pink/Blue scales.",
+    designDoc: "docs/palettes/spectrum.md"
+  },
+  amber: {
+    id: "amber",
+    name: "Amber",
+    tagline: "Warm and electric \u2014 Binance trading-floor gold over the exchange\u2019s graphite near-blacks; dark labels on the gold.",
+    inspiration: "Binance \u2014 its whole documented palette: the bold gold #F0B90B/#FCD535 over cool graphite trading-floor blacks (#0B0E11/#1E2329) + greys, with the buy-green/sell-red semantics.",
+    designDoc: "docs/palettes/amber.md"
+  },
+  sienna: {
+    id: "sienna",
+    name: "Sienna",
+    tagline: "Warm and vivid \u2014 Mistral flame-orange over the Mediterranean warm-cream surfaces; dark labels on the flame.",
+    inspiration: "Mistral AI \u2014 its whole documented palette (getdesign.md/mistral.ai): the flame #fa520f + Block-gradient + Sunshine ambers over Warm-Ivory cream surfaces (#fffaeb) and Mistral-Black ink.",
+    designDoc: "docs/palettes/sienna.md"
+  },
+  garnet: {
+    id: "garnet",
+    name: "Garnet",
+    tagline: "Rich and bold \u2014 Pinterest Pushpin red over the brand\u2019s neutral greys; white labels on the red.",
+    inspiration: "Pinterest \u2014 its whole documented palette: Pushpin red #E60023/#BD081C over Cod-Gray ink (#111111) and neutral greys (#767676/#EFEFEF), with Gestalt \u201CSkycicle\u201D blue links.",
+    designDoc: "docs/palettes/garnet.md"
+  },
+  citrine: {
+    id: "citrine",
+    name: "Citrine",
+    tagline: "Bright and collaborative \u2014 Miro\u2019s Sunglow yellow over the whiteboard greys, with the Miro action-blue accent.",
+    inspiration: "Miro \u2014 its whole Mirotone palette (every value a documented Mirotone step): Sunglow yellow #FFD02F (primary) + the action-blue #3859FF over the gray ramp + Stratos ink #050038, with the green/red semantic ramps.",
+    designDoc: "docs/palettes/citrine.md"
+  },
+  candy: {
+    id: "candy",
+    name: "Candy",
+    tagline: "Sweet and playful \u2014 a light bubblegum-pink primary over candy-paper pinks, with a full pastel-candy rainbow.",
+    inspiration: "A candy concept grounded entirely in documented Radix Colors scales (every value a Radix step): Pink primary + Mauve neutrals + a Sky/Jade/Violet/Amber/Crimson candy rainbow; Glossier Pink #F5DADF as the pastel-pink mood reference.",
+    designDoc: "docs/palettes/candy.md"
+  }
+};
+var PALETTE_IDS = Object.keys(PALETTE_REGISTRY);
+var DEFAULT_PALETTE_ID = "motir";
+function isPaletteId(value) {
+  return typeof value === "string" && Object.prototype.hasOwnProperty.call(PALETTE_REGISTRY, value);
+}
+function resolvePalette(value) {
+  return PALETTE_REGISTRY[isPaletteId(value) ? value : DEFAULT_PALETTE_ID];
+}
+
+export { DEFAULT_PALETTE_ID, PALETTE_IDS, PALETTE_REGISTRY, isPaletteId, resolvePalette };
+//# sourceMappingURL=palettes.js.map
+//# sourceMappingURL=palettes.js.map

package/dist/theme/palettes.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/theme/palettes.ts"],"names":[],"mappings":";AA6DO,IAAM,gBAAA,GAAmB;AAAA,EAC9B,KAAA,EAAO;AAAA,IACL,EAAA,EAAI,OAAA;AAAA,IACJ,IAAA,EAAM,OAAA;AAAA,IACN,OAAA,EAAS,yFAAA;AAAA,IACT,WAAA,EAAa,qEAAA;AAAA,IACb,SAAA,EAAW;AAAA,GACb;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,EAAA,EAAI,QAAA;AAAA,IACJ,IAAA,EAAM,QAAA;AAAA,IACN,OAAA,EACE,8FAAA;AAAA,IACF,WAAA,EACE,iGAAA;AAAA,IACF,SAAA,EAAW;AAAA,GACb;AAAA,EACA,QAAA,EAAU;AAAA,IACR,EAAA,EAAI,UAAA;AAAA,IACJ,IAAA,EAAM,UAAA;AAAA,IACN,OAAA,EACE,6GAAA;AAAA,IACF,WAAA,EACE,0FAAA;AAAA,IACF,SAAA,EAAW;AAAA,GACb;AAAA,EACA,SAAA,EAAW;AAAA,IACT,EAAA,EAAI,WAAA;AAAA,IACJ,IAAA,EAAM,WAAA;AAAA,IACN,OAAA,EACE,gGAAA;AAAA,IACF,WAAA,EACE,4HAAA;AAAA,IACF,SAAA,EAAW;AAAA,GACb;AAAA,EACA,QAAA,EAAU;AAAA,IACR,EAAA,EAAI,UAAA;AAAA,IACJ,IAAA,EAAM,UAAA;AAAA,IACN,OAAA,EACE,sHAAA;AAAA,IACF,WAAA,EACE,qHAAA;AAAA,IACF,SAAA,EAAW;AAAA,GACb;AAAA,EACA,KAAA,EAAO;AAAA,IACL,EAAA,EAAI,OAAA;AAAA,IACJ,IAAA,EAAM,OAAA;AAAA,IACN,OAAA,EACE,6HAAA;AAAA,IACF,WAAA,EACE,sLAAA;AAAA,IACF,SAAA,EAAW;AAAA,GACb;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,EAAA,EAAI,QAAA;AAAA,IACJ,IAAA,EAAM,QAAA;AAAA,IACN,OAAA,EACE,kHAAA;AAAA,IACF,WAAA,EACE,gMAAA;AAAA,IACF,SAAA,EAAW;AAAA,GACb;AAAA,EACA,MAAA,EAAQ;AAAA,IACN,EAAA,EAAI,QAAA;AAAA,IACJ,IAAA,EAAM,QAAA;AAAA,IACN,OAAA,EACE,0GAAA;AAAA,IACF,WAAA,EACE,2LAAA;AAAA,IACF,SAAA,EAAW;AAAA,GACb;AAAA,EACA,OAAA,EAAS;AAAA,IACP,EAAA,EAAI,SAAA;AAAA,IACJ,IAAA,EAAM,SAAA;AAAA,IACN,OAAA,EACE,yHAAA;AAAA,IACF,WAAA,EACE,0NAAA;AAAA,IACF,SAAA,EAAW;AAAA,GACb;AAAA,EACA,KAAA,EAAO;AAAA,IACL,EAAA,EAAI,OAAA;AAAA,IACJ,IAAA,EAAM,OAAA;AAAA,IACN,OAAA,EACE,mHAAA;AAAA,IACF,WAAA,EACE,yOAAA;AAAA,IACF,SAAA,EAAW;AAAA;AAEf;AAMO,IAAM,WAAA,GAAc,MAAA,CAAO,IAAA,CAAK,gBAAgB;AAMhD,IAAM,kBAAA,GAAgC;AAGtC,SAAS,YAAY,KAAA,EAAoC;AAC9D,EAAA,OAAO,OAAO,UAAU,QAAA,IAAY,MAAA,CAAO,UAAU,cAAA,CAAe,IAAA,CAAK,kBAAkB,KAAK,CAAA;AAClG;AAGO,SAAS,eAAe,KAAA,EAAmC;AAChE,EAAA,OAAO,gBAAA,CAAiB,WAAA,CAAY,KAAK,CAAA,GAAI,QAAQ,kBAAkB,CAAA;AACzE","file":"palettes.js","sourcesContent":["/**\n * The Motir PALETTE LIBRARY — the named-colour registry (Subtask 7.3.48).\n *\n * A \"palette\" is a named COLOUR scheme the whole UI can swap to at runtime —\n * the second half of the two-axis contract the style schema (7.3.32) wrote but\n * did not implement. It is the COLOUR/hue axis, and it is deliberately\n * INDEPENDENT of the SHAPE axis (`data-style` — see ./styles.ts): a palette\n * decides what colours the product WEARS (surfaces, ink, accent, tints,\n * semantic hues); a style decides how it FEELS (silhouette, elevation,\n * density, motion). Picking a palette never changes a radius, and picking a\n * style never changes a hue.\n *\n * ── The two-axis runtime contract ───────────────────────────────────────\n *   data-palette=\"<palette-id>\" — THIS axis. Layers per-palette `--el-*`\n *                                 element-token overrides over the Tier-3\n *                                 base in app/globals.css.\n *   data-style=\"<style-id>\"     — the INDEPENDENT shape/feel axis.\n *   data-theme=\"light|dark\"     — the light/dark base WITHIN a palette\n *                                 (`--color-*`); orthogonal to the palette.\n *\n * A `[data-palette='…']` block in globals.css MUST override ONLY `--el-*`\n * element colour tokens — NEVER a shape/feel token (radius / spacing / shadow\n * / sizing / motion / type). That is the style axis's job, and keeping the two\n * disjoint is what makes \"style × palette\" a true product of two independent\n * choices rather than N×M hand-tuned combinations.\n *\n * ── v1 — Motir's own palette ─────────────────────────────────────────────\n * v1 ships exactly ONE registered palette: **Motir** — the warm, Notion-warm\n * scheme the product already wears (cream surfaces, charcoal ink, purple\n * primary, pastel feature tints). It is the Tier-0/Tier-3 BASE, so — exactly\n * like the `warm-editorial` base style — it needs NO `[data-palette]` override\n * block; the base `--el-*` tokens already are it. (Per Yue, 2026-06-17: \"use\n * Motir's colour palette for the v1.\") Each later \"Palette: …\" subtask ADDS its\n * entry here, ships a `[data-palette='<id>']` block in globals.css overriding\n * the `--el-*` layer, and authors its `docs/palettes/<id>.md` doc — exactly the\n * shape the per-style subtasks (7.3.33+) follow on the other axis.\n */\n\n/** A registered, runtime-selectable colour palette. */\nexport interface PaletteDefinition {\n  /** The `data-palette` attribute value. Stable; used as the localStorage value. */\n  id: string;\n  /** Display name shown in the gallery / `/tokens` toggle. */\n  name: string;\n  /** One-line characterization of the colour mood. */\n  tagline: string;\n  /** Where the colours are drawn from (credit / mood anchor). */\n  inspiration: string;\n  /**\n   * Repo-relative path to this palette's doc — the colour-role reference a\n   * later getdesign-style swap or the `/tokens` composer reads. Every\n   * registered palette maps to exactly one.\n   */\n  designDoc: string;\n}\n\n/**\n * The registry. Insertion order is the gallery order. Each `id` matches a\n * `[data-palette='<id>']` block in app/globals.css (Motir is the base, so its\n * block is the Tier-3 defaults — no override block needed).\n */\nexport const PALETTE_REGISTRY = {\n  motir: {\n    id: 'motir',\n    name: 'Motir',\n    tagline: 'Warm and editorial — cream surfaces, charcoal ink, a purple primary, pastel tints.',\n    inspiration: \"Notion's warm marketing palette — the product's house colours.\",\n    designDoc: 'docs/palettes/motir.md',\n  },\n  cobalt: {\n    id: 'cobalt',\n    name: 'Cobalt',\n    tagline:\n      'Cool and institutional — slate-cool surfaces, a confident cobalt primary, cooled tints.',\n    inspiration:\n      \"Coinbase's clean institutional blue + IBM's structured blue, on Radix Blue/Indigo/Slate scales.\",\n    designDoc: 'docs/palettes/cobalt.md',\n  },\n  graphite: {\n    id: 'graphite',\n    name: 'Graphite',\n    tagline:\n      'Stark and editorial — cool greyscale surfaces + ink, an ink CTA, a single restrained cool-blue accent.',\n    inspiration:\n      \"Vercel's black-and-white precision + Linear's ultra-minimal, on Radix Slate/Blue scales.\",\n    designDoc: 'docs/palettes/graphite.md',\n  },\n  evergreen: {\n    id: 'evergreen',\n    name: 'Evergreen',\n    tagline:\n      'Fresh and technical — an emerald primary over cooled forest neutrals, a green-leaning UI.',\n    inspiration:\n      'getdesign.md — Supabase (dark emerald) / Spotify (vibrant green) / MongoDB (spring green), on Radix green/jade ramps.',\n    designDoc: 'docs/palettes/evergreen.md',\n  },\n  spectrum: {\n    id: 'spectrum',\n    name: 'Spectrum',\n    tagline:\n      'Vibrant and playful — crisp cool surfaces, a bright violet primary, a candy-bright multi-hue accent & tint set.',\n    inspiration:\n      \"Figma's vibrant multi-colour brand + Airtable's colourful, friendly palette, on Radix Violet/Iris/Pink/Blue scales.\",\n    designDoc: 'docs/palettes/spectrum.md',\n  },\n  amber: {\n    id: 'amber',\n    name: 'Amber',\n    tagline:\n      'Warm and electric — Binance trading-floor gold over the exchange’s graphite near-blacks; dark labels on the gold.',\n    inspiration:\n      'Binance — its whole documented palette: the bold gold #F0B90B/#FCD535 over cool graphite trading-floor blacks (#0B0E11/#1E2329) + greys, with the buy-green/sell-red semantics.',\n    designDoc: 'docs/palettes/amber.md',\n  },\n  sienna: {\n    id: 'sienna',\n    name: 'Sienna',\n    tagline:\n      'Warm and vivid — Mistral flame-orange over the Mediterranean warm-cream surfaces; dark labels on the flame.',\n    inspiration:\n      'Mistral AI — its whole documented palette (getdesign.md/mistral.ai): the flame #fa520f + Block-gradient + Sunshine ambers over Warm-Ivory cream surfaces (#fffaeb) and Mistral-Black ink.',\n    designDoc: 'docs/palettes/sienna.md',\n  },\n  garnet: {\n    id: 'garnet',\n    name: 'Garnet',\n    tagline:\n      'Rich and bold — Pinterest Pushpin red over the brand’s neutral greys; white labels on the red.',\n    inspiration:\n      'Pinterest — its whole documented palette: Pushpin red #E60023/#BD081C over Cod-Gray ink (#111111) and neutral greys (#767676/#EFEFEF), with Gestalt “Skycicle” blue links.',\n    designDoc: 'docs/palettes/garnet.md',\n  },\n  citrine: {\n    id: 'citrine',\n    name: 'Citrine',\n    tagline:\n      'Bright and collaborative — Miro’s Sunglow yellow over the whiteboard greys, with the Miro action-blue accent.',\n    inspiration:\n      'Miro — its whole Mirotone palette (every value a documented Mirotone step): Sunglow yellow #FFD02F (primary) + the action-blue #3859FF over the gray ramp + Stratos ink #050038, with the green/red semantic ramps.',\n    designDoc: 'docs/palettes/citrine.md',\n  },\n  candy: {\n    id: 'candy',\n    name: 'Candy',\n    tagline:\n      'Sweet and playful — a light bubblegum-pink primary over candy-paper pinks, with a full pastel-candy rainbow.',\n    inspiration:\n      'A candy concept grounded entirely in documented Radix Colors scales (every value a Radix step): Pink primary + Mauve neutrals + a Sky/Jade/Violet/Amber/Crimson candy rainbow; Glossier Pink #F5DADF as the pastel-pink mood reference.',\n    designDoc: 'docs/palettes/candy.md',\n  },\n} satisfies Record<string, PaletteDefinition>;\n\n/** The id of every registered palette — `data-palette` value space. */\nexport type PaletteId = keyof typeof PALETTE_REGISTRY;\n\n/** All registered palette ids, in gallery order. */\nexport const PALETTE_IDS = Object.keys(PALETTE_REGISTRY) as PaletteId[];\n\n/**\n * The default palette a fresh install / unset preference resolves to. Motir is\n * the house palette and the Tier-3 base.\n */\nexport const DEFAULT_PALETTE_ID: PaletteId = 'motir';\n\n/** Narrowing guard — is an arbitrary string a registered palette id? */\nexport function isPaletteId(value: unknown): value is PaletteId {\n  return typeof value === 'string' && Object.prototype.hasOwnProperty.call(PALETTE_REGISTRY, value);\n}\n\n/** Resolve a (possibly stale / unknown) value to a valid palette definition. */\nexport function resolvePalette(value: unknown): PaletteDefinition {\n  return PALETTE_REGISTRY[isPaletteId(value) ? value : DEFAULT_PALETTE_ID];\n}\n"]}

package/dist/theme/styles.d.ts

@@ -0,0 +1,351 @@
+import { TypeId } from './typography.js';
+
+/**
+ * The Motir STYLE LIBRARY — the named-aesthetic registry (Subtask 7.3.32).
+ *
+ * A "style" is a named, end-to-end AESTHETIC the whole UI can swap to at
+ * runtime — the foundation the onboarding design wizard (7.3.27) and the
+ * `/tokens` composer (7.3.30) build on. It is the SHAPE/feel axis, and it is
+ * deliberately INDEPENDENT of the COLOR axis (`data-palette` — see below): a
+ * style decides how the product FEELS (silhouette, stroke, elevation, surface
+ * treatment, density, motion, typography, component silhouettes); a palette
+ * decides what colours it WEARS. Picking a style never changes a hue, and
+ * picking a palette never changes a radius.
+ *
+ * ── The two-axis runtime contract ───────────────────────────────────────
+ *   data-style="<style-id>"      — THIS axis. Layers per-style shape/feel
+ *                                  tokens (+ component-variant overrides) over
+ *                                  the Tier-0 base scale in app/globals.css.
+ *   data-palette="<palette-id>"  — the INDEPENDENT colour axis (re-skins the
+ *                                  `--el-*` layer). Orthogonal to data-style.
+ *   data-theme="light|dark"      — the light/dark base within a palette.
+ *
+ * A `[data-style='…']` TOKEN block in globals.css MUST override ONLY shape/feel
+ * tokens (radius / spacing / shadow / sizing / transition / type) — NEVER a
+ * `--color-*` or `--el-*` colour token. That is the palette axis's job, and
+ * keeping the two disjoint is what makes "style × palette" a true product of
+ * two independent choices rather than 2×N hand-tuned combinations.
+ *
+ * A SURFACE-MATERIAL style (glassmorphism, 7.3.35; later cybercore, aurora,
+ * neumorphism …) owns a richer surface — translucency, a gradient canvas,
+ * frosted backdrop-blur — that the token block cannot express. It adds a
+ * palette-DERIVED MATERIAL LAYER: style-scoped component rules
+ * (`[data-style='id'] [data-surface='…'] { … }`) whose colour comes ONLY from
+ * `color-mix()`/`var(--color-*|--el-*)` over the ACTIVE palette, never a raw
+ * hue — so the two axes stay disjoint (a palette swap re-tints the material; a
+ * style swap leaves hues untouched). Surfaces opt in via the `data-surface`
+ * hook the shared primitives emit. Both rules are enforced by
+ * tests/theme/styleRegistry.test.ts.
+ *
+ * ── Why a style is MORE than a token swap ───────────────────────────────
+ * The feel-bearing DIMENSIONS below are the axes a pure token swap ignores:
+ * two styles can share the Tier-0 scale yet feel utterly different because
+ * their silhouette, elevation philosophy, surface treatment, and component
+ * silhouettes diverge. The registry names those dimensions so each style (and
+ * its DESIGN.md) is authored against the same rubric.
+ *
+ * This module is the schema + the registration of the styles. Each "Style: …"
+ * subtask (7.3.33–7.3.42) ADDS its entry here, ships a `[data-style='<id>']`
+ * token block in globals.css (plus, for a surface-material style, the
+ * palette-derived material layer above), and authors its `docs/styles/<id>.md`
+ * DESIGN.md.
+ */
+
+/**
+ * The feel-bearing axes a named style controls. A token-only swap reaches the
+ * first few; the rest (surface treatment, motion, typography, component
+ * silhouettes) are what give a style its identity and must be authored, not
+ * derived. The order here is the canonical presentation order (the `/tokens`
+ * page + each style's DESIGN.md walk them in this sequence).
+ */
+declare const STYLE_DIMENSIONS: readonly [{
+    readonly key: "silhouette";
+    readonly label: "Shape / silhouette";
+    readonly description: "Corner-radius personality — sober rectangles vs. soft pills vs. hard right angles.";
+}, {
+    readonly key: "stroke";
+    readonly label: "Border / stroke";
+    readonly description: "Hairline vs. heavy outline; whether structure is drawn with borders at all.";
+}, {
+    readonly key: "elevation";
+    readonly label: "Elevation philosophy";
+    readonly description: "How depth is expressed — soft diffuse shadows, hard offset shadows, or flat.";
+}, {
+    readonly key: "surface";
+    readonly label: "Surface / background treatment";
+    readonly description: "Opaque cards vs. translucent glass vs. tinted washes — the material of a surface.";
+}, {
+    readonly key: "density";
+    readonly label: "Density rhythm";
+    readonly description: "Padding/sizing cadence — compact and efficient vs. roomy and relaxed.";
+}, {
+    readonly key: "motion";
+    readonly label: "Motion";
+    readonly description: "Transition speed and easing — snappy, gentle, or springy.";
+}, {
+    readonly key: "typography";
+    readonly label: "Typography";
+    readonly description: "The style's DEFAULT type pairing — type is the independent `data-type` axis now (see ./typography.ts + `defaultTypeId`); this describes the pairing the style ships with: editorial serif, all-sans, or mono headlines.";
+}, {
+    readonly key: "components";
+    readonly label: "Component silhouettes";
+    readonly description: "Per-component shape overrides beyond tokens (e.g. a pill button vs. a square one).";
+}];
+type StyleDimensionKey = (typeof STYLE_DIMENSIONS)[number]['key'];
+/** A registered, runtime-selectable style. */
+interface StyleDefinition {
+    /** The `data-style` attribute value. Stable; used as the localStorage value. */
+    id: string;
+    /** Display name shown in the gallery / `/tokens` toggle. */
+    name: string;
+    /** One-line characterization of the feel. */
+    tagline: string;
+    /** Where the look is drawn from (credit / mood anchor). */
+    inspiration: string;
+    /** One line per feel-bearing dimension — the authored rubric for this style. */
+    dimensions: Record<StyleDimensionKey, string>;
+    /**
+     * Repo-relative path to this style's DESIGN.md — the doc the `/tokens` page
+     * composes (and a later getdesign-style swap reads). Every registered style
+     * maps to exactly one.
+     */
+    designDoc: string;
+    /**
+     * The type pairing (`data-type`, see ./typography.ts) this style applies when
+     * the user has NOT pinned an explicit type — the style's curated default,
+     * overridable. Type is its own axis now; this is how a style keeps its
+     * out-of-the-box typographic feel (e.g. swiss → `motir-sans`, neo-brutalism /
+     * cybercore-y2k → `motir-mono`) without owning `--font-*` in its own block.
+     */
+    defaultTypeId: TypeId;
+}
+/**
+ * The registry. Insertion order is the gallery order. Each `id` matches a
+ * `[data-style='<id>']` block in app/globals.css (Warm Editorial is the base,
+ * so its block is the Tier-0 defaults — no override block needed).
+ */
+declare const STYLE_REGISTRY: {
+    'warm-editorial': {
+        id: string;
+        name: string;
+        tagline: string;
+        inspiration: string;
+        designDoc: string;
+        defaultTypeId: "motir";
+        dimensions: {
+            silhouette: string;
+            stroke: string;
+            elevation: string;
+            surface: string;
+            density: string;
+            motion: string;
+            typography: string;
+            components: string;
+        };
+    };
+    'soft-playful': {
+        id: string;
+        name: string;
+        tagline: string;
+        inspiration: string;
+        designDoc: string;
+        defaultTypeId: "motir";
+        dimensions: {
+            silhouette: string;
+            stroke: string;
+            elevation: string;
+            surface: string;
+            density: string;
+            motion: string;
+            typography: string;
+            components: string;
+        };
+    };
+    'swiss-minimal-flat': {
+        id: string;
+        name: string;
+        tagline: string;
+        inspiration: string;
+        designDoc: string;
+        defaultTypeId: "motir-sans";
+        dimensions: {
+            silhouette: string;
+            stroke: string;
+            elevation: string;
+            surface: string;
+            density: string;
+            motion: string;
+            typography: string;
+            components: string;
+        };
+    };
+    'neo-brutalism': {
+        id: string;
+        name: string;
+        tagline: string;
+        inspiration: string;
+        designDoc: string;
+        defaultTypeId: "motir-mono";
+        dimensions: {
+            silhouette: string;
+            stroke: string;
+            elevation: string;
+            surface: string;
+            density: string;
+            motion: string;
+            typography: string;
+            components: string;
+        };
+    };
+    glassmorphism: {
+        id: string;
+        name: string;
+        tagline: string;
+        inspiration: string;
+        designDoc: string;
+        defaultTypeId: "motir";
+        dimensions: {
+            silhouette: string;
+            stroke: string;
+            elevation: string;
+            surface: string;
+            density: string;
+            motion: string;
+            typography: string;
+            components: string;
+        };
+    };
+    'cybercore-y2k': {
+        id: string;
+        name: string;
+        tagline: string;
+        inspiration: string;
+        designDoc: string;
+        defaultTypeId: "motir-mono";
+        dimensions: {
+            silhouette: string;
+            stroke: string;
+            elevation: string;
+            surface: string;
+            density: string;
+            motion: string;
+            typography: string;
+            components: string;
+        };
+    };
+    aurora: {
+        id: string;
+        name: string;
+        tagline: string;
+        inspiration: string;
+        designDoc: string;
+        defaultTypeId: "motir";
+        dimensions: {
+            silhouette: string;
+            stroke: string;
+            elevation: string;
+            surface: string;
+            density: string;
+            motion: string;
+            typography: string;
+            components: string;
+        };
+    };
+    '3d-immersive': {
+        id: string;
+        name: string;
+        tagline: string;
+        inspiration: string;
+        designDoc: string;
+        defaultTypeId: "motir";
+        dimensions: {
+            silhouette: string;
+            stroke: string;
+            elevation: string;
+            surface: string;
+            density: string;
+            motion: string;
+            typography: string;
+            components: string;
+        };
+    };
+    neumorphism: {
+        id: string;
+        name: string;
+        tagline: string;
+        inspiration: string;
+        designDoc: string;
+        defaultTypeId: "motir";
+        dimensions: {
+            silhouette: string;
+            stroke: string;
+            elevation: string;
+            surface: string;
+            density: string;
+            motion: string;
+            typography: string;
+            components: string;
+        };
+    };
+    'hand-drawn-indie': {
+        id: string;
+        name: string;
+        tagline: string;
+        inspiration: string;
+        designDoc: string;
+        defaultTypeId: "editorial";
+        dimensions: {
+            silhouette: string;
+            stroke: string;
+            elevation: string;
+            surface: string;
+            density: string;
+            motion: string;
+            typography: string;
+            components: string;
+        };
+    };
+    retrofuturism: {
+        id: string;
+        name: string;
+        tagline: string;
+        inspiration: string;
+        designDoc: string;
+        defaultTypeId: "grotesk";
+        dimensions: {
+            silhouette: string;
+            stroke: string;
+            elevation: string;
+            surface: string;
+            density: string;
+            motion: string;
+            typography: string;
+            components: string;
+        };
+    };
+};
+/** The id of every registered style — `data-style` value space. */
+type StyleId = keyof typeof STYLE_REGISTRY;
+/** All registered style ids, in gallery order. */
+declare const STYLE_IDS: StyleId[];
+/**
+ * The default style a fresh install / unset preference resolves to. Warm
+ * Editorial is Motir's house style and the Tier-0 base.
+ */
+declare const DEFAULT_STYLE_ID: StyleId;
+/** Narrowing guard — is an arbitrary string a registered style id? */
+declare function isStyleId(value: unknown): value is StyleId;
+/** Resolve a (possibly stale / unknown) value to a valid style definition. */
+declare function resolveStyle(value: unknown): StyleDefinition;
+/**
+ * styleId → its `defaultTypeId` — the type pairing applied when the user has
+ * not pinned an explicit `data-type`. Baked into the FOUC init script (so the
+ * pre-hydration pass can resolve the right type for the active style) and used
+ * by the theme context's effective-type derivation. `resolveType` (the
+ * registry) supplies the ultimate fallback, so every value here is a real id.
+ */
+declare const STYLE_DEFAULT_TYPE: Record<StyleId, TypeId>;
+/** The default type for a (possibly unknown) style value — the fallback chain. */
+declare function defaultTypeForStyle(styleValue: unknown): TypeId;
+
+export { DEFAULT_STYLE_ID, STYLE_DEFAULT_TYPE, STYLE_DIMENSIONS, STYLE_IDS, STYLE_REGISTRY, type StyleDefinition, type StyleDimensionKey, type StyleId, defaultTypeForStyle, isStyleId, resolveStyle };