@loidolt/theme-tokens 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Chris Loidolt
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/dark-auto.css

@@ -0,0 +1,74 @@
+/* Generated from src/index.ts. Do not edit directly. */
+[data-theme='dark'] {
+  color-scheme: dark;
+  --loidolt-background: #161814;
+  --loidolt-surface: #1e211c;
+  --loidolt-surface-alt: #24271f;
+  --loidolt-surface-sunken: #101210;
+  --loidolt-surface-inverse: #ebe7dc;
+  --loidolt-surface-input: #24271f;
+  --loidolt-text: #ebe7dc;
+  --loidolt-text-muted: #a8a394;
+  --loidolt-text-inverse: #161814;
+  --loidolt-text-accent: #f0895c;
+  --loidolt-border: #3a3d34;
+  --loidolt-border-soft: #2b2e26;
+  --loidolt-border-strong: #6a6e5f;
+  --loidolt-border-control: #787c6b;
+  --loidolt-accent: #e0672f;
+  --loidolt-accent-hover: #f0895c;
+  --loidolt-on-accent: #161814;
+  --loidolt-danger: #d75f55;
+  --loidolt-on-danger: #161814;
+  --loidolt-text-danger: #e88b81;
+  --loidolt-success: #7fa074;
+  --loidolt-on-success: #161814;
+  --loidolt-text-success: #93b287;
+  --loidolt-warning: #cc9a4e;
+  --loidolt-on-warning: #161814;
+  --loidolt-text-warning: #d9ab63;
+  --loidolt-info: #6ea5bd;
+  --loidolt-on-info: #161814;
+  --loidolt-text-info: #85b6ca;
+  --loidolt-focus-ring: #f0895c;
+  --loidolt-shadow-color: #000000;
+  --loidolt-scrim: color-mix(in srgb, var(--loidolt-shadow-color) 78%, transparent);
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    color-scheme: dark;
+    --loidolt-background: #161814;
+    --loidolt-surface: #1e211c;
+    --loidolt-surface-alt: #24271f;
+    --loidolt-surface-sunken: #101210;
+    --loidolt-surface-inverse: #ebe7dc;
+    --loidolt-surface-input: #24271f;
+    --loidolt-text: #ebe7dc;
+    --loidolt-text-muted: #a8a394;
+    --loidolt-text-inverse: #161814;
+    --loidolt-text-accent: #f0895c;
+    --loidolt-border: #3a3d34;
+    --loidolt-border-soft: #2b2e26;
+    --loidolt-border-strong: #6a6e5f;
+    --loidolt-border-control: #787c6b;
+    --loidolt-accent: #e0672f;
+    --loidolt-accent-hover: #f0895c;
+    --loidolt-on-accent: #161814;
+    --loidolt-danger: #d75f55;
+    --loidolt-on-danger: #161814;
+    --loidolt-text-danger: #e88b81;
+    --loidolt-success: #7fa074;
+    --loidolt-on-success: #161814;
+    --loidolt-text-success: #93b287;
+    --loidolt-warning: #cc9a4e;
+    --loidolt-on-warning: #161814;
+    --loidolt-text-warning: #d9ab63;
+    --loidolt-info: #6ea5bd;
+    --loidolt-on-info: #161814;
+    --loidolt-text-info: #85b6ca;
+    --loidolt-focus-ring: #f0895c;
+    --loidolt-shadow-color: #000000;
+    --loidolt-scrim: color-mix(in srgb, var(--loidolt-shadow-color) 78%, transparent);
+  }
+}

package/dist/dark.css

@@ -0,0 +1,36 @@
+/* Generated from src/index.ts. Do not edit directly. */
+[data-theme='dark'] {
+  color-scheme: dark;
+  --loidolt-background: #161814;
+  --loidolt-surface: #1e211c;
+  --loidolt-surface-alt: #24271f;
+  --loidolt-surface-sunken: #101210;
+  --loidolt-surface-inverse: #ebe7dc;
+  --loidolt-surface-input: #24271f;
+  --loidolt-text: #ebe7dc;
+  --loidolt-text-muted: #a8a394;
+  --loidolt-text-inverse: #161814;
+  --loidolt-text-accent: #f0895c;
+  --loidolt-border: #3a3d34;
+  --loidolt-border-soft: #2b2e26;
+  --loidolt-border-strong: #6a6e5f;
+  --loidolt-border-control: #787c6b;
+  --loidolt-accent: #e0672f;
+  --loidolt-accent-hover: #f0895c;
+  --loidolt-on-accent: #161814;
+  --loidolt-danger: #d75f55;
+  --loidolt-on-danger: #161814;
+  --loidolt-text-danger: #e88b81;
+  --loidolt-success: #7fa074;
+  --loidolt-on-success: #161814;
+  --loidolt-text-success: #93b287;
+  --loidolt-warning: #cc9a4e;
+  --loidolt-on-warning: #161814;
+  --loidolt-text-warning: #d9ab63;
+  --loidolt-info: #6ea5bd;
+  --loidolt-on-info: #161814;
+  --loidolt-text-info: #85b6ca;
+  --loidolt-focus-ring: #f0895c;
+  --loidolt-shadow-color: #000000;
+  --loidolt-scrim: color-mix(in srgb, var(--loidolt-shadow-color) 78%, transparent);
+}

package/dist/index.d.ts

@@ -0,0 +1,374 @@
+/**
+ * Design tokens for Loidolt applications.
+ *
+ * Two tiers:
+ * - **Primitives** (`--loidolt-color-*`, `--loidolt-space-*`, …) are the raw palette and scales.
+ * - **Semantic** (`--loidolt-surface`, `--loidolt-text`, …) name a *role*. Stylesheets and
+ *   components consume only these, so a consumer can restyle the system — or add a dark
+ *   mode — by redefining the semantic tier alone.
+ */
+/** A token whose value points at another token, emitted as `var(--loidolt-…)`. */
+type TokenRef = {
+    readonly $ref: string;
+};
+/** `['font', 'lineHeight', 'tight']` → `--loidolt-font-line-height-tight`. */
+declare const cssVarName: (path: readonly string[]) => string;
+declare const colors: {
+    readonly paper: "#ebe7dc";
+    readonly panel: "#f5f2e9";
+    readonly panelAlt: "#efebe1";
+    readonly canvas: "#d8d3c7";
+    readonly canvasLine: "#c9c3b6";
+    readonly deep: "#20231d";
+    readonly muted: "#5f5b50";
+    readonly line: "#c8c1b1";
+    readonly lineSoft: "#ddd7c9";
+    readonly lineStrong: "#847d6a";
+    readonly white: "#ffffff";
+    readonly orange: "#c65224";
+    readonly orangeDark: "#a9441d";
+    readonly error: "#9b2822";
+    readonly success: "#3f5139";
+    readonly warning: "#7c4d17";
+    readonly info: "#265162";
+};
+declare const typography: {
+    readonly display: "\"Jost\", \"Avenir Next\", sans-serif";
+    readonly utility: "\"Archivo\", \"Helvetica Neue\", sans-serif";
+    readonly mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace";
+    readonly size: {
+        readonly xs: "0.6875rem";
+        readonly sm: "0.75rem";
+        readonly base: "0.875rem";
+        readonly md: "1rem";
+        readonly lg: "1.25rem";
+        readonly xl: "1.75rem";
+        readonly display: "2.5rem";
+    };
+    readonly tracking: {
+        readonly utility: "0.1em";
+        readonly wide: "0.13em";
+    };
+    readonly lineHeight: {
+        readonly tight: "1.15";
+        readonly normal: "1.45";
+        readonly relaxed: "1.65";
+    };
+};
+declare const spacing: {
+    readonly 0: "0";
+    readonly 1: "0.25rem";
+    readonly 2: "0.5rem";
+    readonly 3: "0.75rem";
+    readonly 4: "1rem";
+    readonly 5: "1.25rem";
+    readonly 6: "1.5rem";
+    readonly 8: "2rem";
+    readonly 10: "2.5rem";
+    readonly 12: "3rem";
+    readonly 16: "4rem";
+};
+declare const sizing: {
+    readonly controlSm: "2rem";
+    readonly control: "2.375rem";
+    readonly controlLg: "2.75rem";
+    readonly topbar: "3.875rem";
+    readonly contextbar: "2.5625rem";
+    readonly sidebar: "17rem";
+    readonly inspector: "18rem";
+    readonly content: "75rem";
+};
+declare const borders: {
+    readonly width: "1px";
+    readonly color: "#c8c1b1";
+    readonly radius: "0px";
+};
+declare const shadows: {
+    readonly popover: "0 12px 30px color-mix(in srgb, var(--loidolt-shadow-color) 18%, transparent)";
+    readonly modal: "0 24px 60px color-mix(in srgb, var(--loidolt-shadow-color) 24%, transparent)";
+    readonly artwork: "0 18px 23px color-mix(in srgb, var(--loidolt-shadow-color) 14%, transparent)";
+};
+declare const motion: {
+    readonly fast: "100ms";
+    readonly normal: "150ms";
+    readonly slow: "220ms";
+    readonly easing: "cubic-bezier(0.2, 0, 0, 1)";
+};
+declare const zIndex: {
+    readonly base: "0";
+    readonly raised: "10";
+    readonly sticky: "40";
+    readonly overlay: "60";
+    readonly dialog: "61";
+    readonly menu: "70";
+    readonly toast: "80";
+    readonly tooltip: "90";
+    readonly skipLink: "1000";
+};
+/** Breakpoints are not custom properties (`@media` cannot read `var()`), but stay tokenized here. */
+declare const breakpoints: {
+    readonly compact: "760px";
+};
+/**
+ * The role layer. Every value links to a primitive, so overriding a primitive propagates and
+ * overriding a role restyles every component that plays it.
+ */
+declare const semanticDefs: {
+    readonly background: TokenRef;
+    readonly surface: TokenRef;
+    readonly surfaceAlt: TokenRef;
+    readonly surfaceSunken: TokenRef;
+    readonly surfaceInverse: TokenRef;
+    readonly surfaceInput: TokenRef;
+    readonly text: TokenRef;
+    readonly textMuted: TokenRef;
+    readonly textInverse: TokenRef;
+    readonly textAccent: TokenRef;
+    readonly border: TokenRef;
+    readonly borderSoft: TokenRef;
+    readonly borderStrong: TokenRef;
+    /** Boundary of an input, select, textarea or switch — held to 3:1 against its surface. */
+    readonly borderControl: TokenRef;
+    readonly accent: TokenRef;
+    readonly accentHover: TokenRef;
+    readonly onAccent: TokenRef;
+    readonly danger: TokenRef;
+    readonly onDanger: TokenRef;
+    readonly textDanger: TokenRef;
+    readonly success: TokenRef;
+    readonly onSuccess: TokenRef;
+    readonly textSuccess: TokenRef;
+    readonly warning: TokenRef;
+    readonly onWarning: TokenRef;
+    readonly textWarning: TokenRef;
+    readonly info: TokenRef;
+    readonly onInfo: TokenRef;
+    readonly textInfo: TokenRef;
+    readonly focusRing: TokenRef;
+    readonly shadowColor: TokenRef;
+    readonly scrim: "color-mix(in srgb, var(--loidolt-shadow-color) 72%, transparent)";
+};
+/** Every custom property the package emits, in declaration order. */
+declare function flattenTokens(): Array<[string, string | TokenRef]>;
+/** Serializes the token set to CSS. The build writes this to `dist/tokens.css`. */
+declare function generateCss(): string;
+/** Semantic roles with their refs resolved to concrete values, for TS/JS consumers. */
+declare const semantic: { readonly [K in keyof typeof semanticDefs]: string; };
+/**
+ * Reference dark theme. Only the semantic tier is redefined — the primitives stay put — which
+ * is the same move a consumer makes for their own theme. Values are literal rather than linked
+ * because a dark surface set is not a re-mapping of the light palette.
+ *
+ * Every text pair here is asserted at WCAG AA in the token test suite, including the `on-*`
+ * inks: lightened status colours need *dark* ink, and pairing them with white is the single
+ * easiest mistake to make when hand-rolling a dark theme.
+ */
+declare const darkSemantic: {
+    readonly background: "#161814";
+    readonly surface: "#1e211c";
+    readonly surfaceAlt: "#24271f";
+    readonly surfaceSunken: "#101210";
+    readonly surfaceInverse: "#ebe7dc";
+    readonly surfaceInput: "#24271f";
+    readonly text: "#ebe7dc";
+    readonly textMuted: "#a8a394";
+    readonly textInverse: "#161814";
+    readonly textAccent: "#f0895c";
+    readonly border: "#3a3d34";
+    readonly borderSoft: "#2b2e26";
+    readonly borderStrong: "#6a6e5f";
+    readonly borderControl: "#787c6b";
+    readonly accent: "#e0672f";
+    readonly accentHover: "#f0895c";
+    readonly onAccent: "#161814";
+    readonly danger: "#d75f55";
+    readonly onDanger: "#161814";
+    readonly textDanger: "#e88b81";
+    readonly success: "#7fa074";
+    readonly onSuccess: "#161814";
+    readonly textSuccess: "#93b287";
+    readonly warning: "#cc9a4e";
+    readonly onWarning: "#161814";
+    readonly textWarning: "#d9ab63";
+    readonly info: "#6ea5bd";
+    readonly onInfo: "#161814";
+    readonly textInfo: "#85b6ca";
+    readonly focusRing: "#f0895c";
+    readonly shadowColor: "#000000";
+    readonly scrim: "color-mix(in srgb, var(--loidolt-shadow-color) 78%, transparent)";
+};
+/**
+ * Dark theme CSS. `scope` picks how it activates:
+ * - `attribute` (default): `[data-theme='dark']` only — the app drives it.
+ * - `auto`: the same block, plus a `prefers-color-scheme` rule that an explicit
+ *   `data-theme="light"` can still override.
+ */
+declare function generateDarkCss(scope?: 'attribute' | 'auto'): string;
+declare const tokens: {
+    readonly colors: {
+        readonly paper: "#ebe7dc";
+        readonly panel: "#f5f2e9";
+        readonly panelAlt: "#efebe1";
+        readonly canvas: "#d8d3c7";
+        readonly canvasLine: "#c9c3b6";
+        readonly deep: "#20231d";
+        readonly muted: "#5f5b50";
+        readonly line: "#c8c1b1";
+        readonly lineSoft: "#ddd7c9";
+        readonly lineStrong: "#847d6a";
+        readonly white: "#ffffff";
+        readonly orange: "#c65224";
+        readonly orangeDark: "#a9441d";
+        readonly error: "#9b2822";
+        readonly success: "#3f5139";
+        readonly warning: "#7c4d17";
+        readonly info: "#265162";
+    };
+    readonly typography: {
+        readonly display: "\"Jost\", \"Avenir Next\", sans-serif";
+        readonly utility: "\"Archivo\", \"Helvetica Neue\", sans-serif";
+        readonly mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace";
+        readonly size: {
+            readonly xs: "0.6875rem";
+            readonly sm: "0.75rem";
+            readonly base: "0.875rem";
+            readonly md: "1rem";
+            readonly lg: "1.25rem";
+            readonly xl: "1.75rem";
+            readonly display: "2.5rem";
+        };
+        readonly tracking: {
+            readonly utility: "0.1em";
+            readonly wide: "0.13em";
+        };
+        readonly lineHeight: {
+            readonly tight: "1.15";
+            readonly normal: "1.45";
+            readonly relaxed: "1.65";
+        };
+    };
+    readonly spacing: {
+        readonly 0: "0";
+        readonly 1: "0.25rem";
+        readonly 2: "0.5rem";
+        readonly 3: "0.75rem";
+        readonly 4: "1rem";
+        readonly 5: "1.25rem";
+        readonly 6: "1.5rem";
+        readonly 8: "2rem";
+        readonly 10: "2.5rem";
+        readonly 12: "3rem";
+        readonly 16: "4rem";
+    };
+    readonly sizing: {
+        readonly controlSm: "2rem";
+        readonly control: "2.375rem";
+        readonly controlLg: "2.75rem";
+        readonly topbar: "3.875rem";
+        readonly contextbar: "2.5625rem";
+        readonly sidebar: "17rem";
+        readonly inspector: "18rem";
+        readonly content: "75rem";
+    };
+    readonly borders: {
+        readonly width: "1px";
+        readonly color: "#c8c1b1";
+        readonly radius: "0px";
+    };
+    readonly shadows: {
+        readonly popover: "0 12px 30px color-mix(in srgb, var(--loidolt-shadow-color) 18%, transparent)";
+        readonly modal: "0 24px 60px color-mix(in srgb, var(--loidolt-shadow-color) 24%, transparent)";
+        readonly artwork: "0 18px 23px color-mix(in srgb, var(--loidolt-shadow-color) 14%, transparent)";
+    };
+    readonly motion: {
+        readonly fast: "100ms";
+        readonly normal: "150ms";
+        readonly slow: "220ms";
+        readonly easing: "cubic-bezier(0.2, 0, 0, 1)";
+    };
+    readonly zIndex: {
+        readonly base: "0";
+        readonly raised: "10";
+        readonly sticky: "40";
+        readonly overlay: "60";
+        readonly dialog: "61";
+        readonly menu: "70";
+        readonly toast: "80";
+        readonly tooltip: "90";
+        readonly skipLink: "1000";
+    };
+    readonly breakpoints: {
+        readonly compact: "760px";
+    };
+    readonly semantic: {
+        readonly background: string;
+        readonly surface: string;
+        readonly surfaceAlt: string;
+        readonly surfaceSunken: string;
+        readonly surfaceInverse: string;
+        readonly surfaceInput: string;
+        readonly text: string;
+        readonly textMuted: string;
+        readonly textInverse: string;
+        readonly textAccent: string;
+        readonly border: string;
+        readonly borderSoft: string;
+        readonly borderStrong: string;
+        readonly borderControl: string;
+        readonly accent: string;
+        readonly accentHover: string;
+        readonly onAccent: string;
+        readonly danger: string;
+        readonly onDanger: string;
+        readonly textDanger: string;
+        readonly success: string;
+        readonly onSuccess: string;
+        readonly textSuccess: string;
+        readonly warning: string;
+        readonly onWarning: string;
+        readonly textWarning: string;
+        readonly info: string;
+        readonly onInfo: string;
+        readonly textInfo: string;
+        readonly focusRing: string;
+        readonly shadowColor: string;
+        readonly scrim: string;
+    };
+    readonly darkSemantic: {
+        readonly background: "#161814";
+        readonly surface: "#1e211c";
+        readonly surfaceAlt: "#24271f";
+        readonly surfaceSunken: "#101210";
+        readonly surfaceInverse: "#ebe7dc";
+        readonly surfaceInput: "#24271f";
+        readonly text: "#ebe7dc";
+        readonly textMuted: "#a8a394";
+        readonly textInverse: "#161814";
+        readonly textAccent: "#f0895c";
+        readonly border: "#3a3d34";
+        readonly borderSoft: "#2b2e26";
+        readonly borderStrong: "#6a6e5f";
+        readonly borderControl: "#787c6b";
+        readonly accent: "#e0672f";
+        readonly accentHover: "#f0895c";
+        readonly onAccent: "#161814";
+        readonly danger: "#d75f55";
+        readonly onDanger: "#161814";
+        readonly textDanger: "#e88b81";
+        readonly success: "#7fa074";
+        readonly onSuccess: "#161814";
+        readonly textSuccess: "#93b287";
+        readonly warning: "#cc9a4e";
+        readonly onWarning: "#161814";
+        readonly textWarning: "#d9ab63";
+        readonly info: "#6ea5bd";
+        readonly onInfo: "#161814";
+        readonly textInfo: "#85b6ca";
+        readonly focusRing: "#f0895c";
+        readonly shadowColor: "#000000";
+        readonly scrim: "color-mix(in srgb, var(--loidolt-shadow-color) 78%, transparent)";
+    };
+};
+type ThemeTokens = typeof tokens;
+
+export { type ThemeTokens, type TokenRef, borders, breakpoints, colors, cssVarName, darkSemantic, tokens as default, flattenTokens, generateCss, generateDarkCss, motion, semantic, shadows, sizing, spacing, tokens, typography, zIndex };

package/dist/index.js

@@ -0,0 +1,261 @@
+// src/index.ts
+var ref = (name) => ({ $ref: `--loidolt-${name}` });
+var isRef = (value) => typeof value === "object" && value !== null && "$ref" in value;
+var kebab = (value) => value.replace(/[A-Z]/g, (letter) => `-${letter.toLowerCase()}`);
+var cssVarName = (path) => `--loidolt-${kebab(path.join("-"))}`;
+var colors = {
+  paper: "#ebe7dc",
+  panel: "#f5f2e9",
+  panelAlt: "#efebe1",
+  canvas: "#d8d3c7",
+  canvasLine: "#c9c3b6",
+  deep: "#20231d",
+  muted: "#5f5b50",
+  line: "#c8c1b1",
+  lineSoft: "#ddd7c9",
+  // Darker rule reserved for form-control boundaries, which must clear WCAG 1.4.11 (3:1)
+  // because the border is the only thing identifying the control.
+  lineStrong: "#847d6a",
+  white: "#ffffff",
+  orange: "#c65224",
+  orangeDark: "#a9441d",
+  error: "#9b2822",
+  success: "#3f5139",
+  warning: "#7c4d17",
+  info: "#265162"
+};
+var typography = {
+  display: '"Jost", "Avenir Next", sans-serif',
+  utility: '"Archivo", "Helvetica Neue", sans-serif',
+  mono: "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+  size: {
+    xs: "0.6875rem",
+    sm: "0.75rem",
+    base: "0.875rem",
+    md: "1rem",
+    lg: "1.25rem",
+    xl: "1.75rem",
+    display: "2.5rem"
+  },
+  tracking: { utility: "0.1em", wide: "0.13em" },
+  lineHeight: { tight: "1.15", normal: "1.45", relaxed: "1.65" }
+};
+var spacing = {
+  0: "0",
+  1: "0.25rem",
+  2: "0.5rem",
+  3: "0.75rem",
+  4: "1rem",
+  5: "1.25rem",
+  6: "1.5rem",
+  8: "2rem",
+  10: "2.5rem",
+  12: "3rem",
+  16: "4rem"
+};
+var sizing = {
+  controlSm: "2rem",
+  control: "2.375rem",
+  controlLg: "2.75rem",
+  topbar: "3.875rem",
+  contextbar: "2.5625rem",
+  sidebar: "17rem",
+  inspector: "18rem",
+  content: "75rem"
+};
+var borders = { width: "1px", color: colors.line, radius: "0px" };
+var shadows = {
+  popover: "0 12px 30px color-mix(in srgb, var(--loidolt-shadow-color) 18%, transparent)",
+  modal: "0 24px 60px color-mix(in srgb, var(--loidolt-shadow-color) 24%, transparent)",
+  artwork: "0 18px 23px color-mix(in srgb, var(--loidolt-shadow-color) 14%, transparent)"
+};
+var motion = {
+  fast: "100ms",
+  normal: "150ms",
+  slow: "220ms",
+  easing: "cubic-bezier(0.2, 0, 0, 1)"
+};
+var zIndex = {
+  base: "0",
+  raised: "10",
+  sticky: "40",
+  overlay: "60",
+  dialog: "61",
+  menu: "70",
+  toast: "80",
+  tooltip: "90",
+  skipLink: "1000"
+};
+var breakpoints = { compact: "760px" };
+var semanticDefs = {
+  background: ref("color-paper"),
+  surface: ref("color-panel"),
+  surfaceAlt: ref("color-panel-alt"),
+  surfaceSunken: ref("color-canvas"),
+  surfaceInverse: ref("color-deep"),
+  surfaceInput: ref("color-white"),
+  text: ref("color-deep"),
+  textMuted: ref("color-muted"),
+  textInverse: ref("color-panel"),
+  textAccent: ref("color-orange-dark"),
+  border: ref("color-line"),
+  borderSoft: ref("color-line-soft"),
+  borderStrong: ref("color-deep"),
+  /** Boundary of an input, select, textarea or switch — held to 3:1 against its surface. */
+  borderControl: ref("color-line-strong"),
+  accent: ref("color-orange"),
+  accentHover: ref("color-orange-dark"),
+  onAccent: ref("color-white"),
+  /*
+   * Status roles come in pairs. `danger`/`onDanger` are a *fill* and the ink that sits on it;
+   * `textDanger` is the same status used as text directly on a surface. They cannot be one
+   * value: a fill tuned for white ink is too light to read as text, and vice versa.
+   */
+  danger: ref("color-error"),
+  onDanger: ref("color-white"),
+  textDanger: ref("color-error"),
+  success: ref("color-success"),
+  onSuccess: ref("color-white"),
+  textSuccess: ref("color-success"),
+  warning: ref("color-warning"),
+  onWarning: ref("color-white"),
+  textWarning: ref("color-warning"),
+  info: ref("color-info"),
+  onInfo: ref("color-white"),
+  textInfo: ref("color-info"),
+  focusRing: ref("color-orange"),
+  shadowColor: ref("color-deep"),
+  scrim: "color-mix(in srgb, var(--loidolt-shadow-color) 72%, transparent)"
+};
+var PRIMITIVE_GROUPS = [
+  ["color", colors],
+  ["font", typography],
+  ["space", spacing],
+  ["size", sizing],
+  ["border", { width: borders.width, color: ref("color-line"), radius: borders.radius }],
+  ["shadow", shadows],
+  ["motion", motion],
+  ["z", zIndex]
+];
+var flattenInto = (prefix, tree, out) => {
+  for (const [key, value] of Object.entries(tree)) {
+    if (typeof value === "string" || isRef(value)) out.push([cssVarName([...prefix, key]), value]);
+    else flattenInto([...prefix, key], value, out);
+  }
+};
+function flattenTokens() {
+  const out = [];
+  for (const [prefix, tree] of PRIMITIVE_GROUPS) flattenInto([prefix], tree, out);
+  for (const [name, value] of Object.entries(semanticDefs)) out.push([cssVarName([name]), value]);
+  return out;
+}
+function generateCss() {
+  const declarations = flattenTokens().map(
+    ([name, value]) => `  ${name}: ${isRef(value) ? `var(${value.$ref})` : value};`
+  );
+  return [
+    "/* Generated from src/index.ts. Do not edit directly. */",
+    ":root {",
+    ...declarations,
+    "}",
+    ""
+  ].join("\n");
+}
+var resolved = new Map(
+  flattenTokens().filter((entry) => typeof entry[1] === "string")
+);
+var semantic = Object.fromEntries(
+  Object.entries(semanticDefs).map(([name, value]) => [
+    name,
+    isRef(value) ? resolved.get(value.$ref) ?? "" : value
+  ])
+);
+var darkSemantic = {
+  background: "#161814",
+  surface: "#1e211c",
+  surfaceAlt: "#24271f",
+  surfaceSunken: "#101210",
+  surfaceInverse: "#ebe7dc",
+  surfaceInput: "#24271f",
+  text: "#ebe7dc",
+  textMuted: "#a8a394",
+  textInverse: "#161814",
+  textAccent: "#f0895c",
+  border: "#3a3d34",
+  borderSoft: "#2b2e26",
+  borderStrong: "#6a6e5f",
+  borderControl: "#787c6b",
+  accent: "#e0672f",
+  accentHover: "#f0895c",
+  onAccent: "#161814",
+  danger: "#d75f55",
+  onDanger: "#161814",
+  textDanger: "#e88b81",
+  success: "#7fa074",
+  onSuccess: "#161814",
+  textSuccess: "#93b287",
+  warning: "#cc9a4e",
+  onWarning: "#161814",
+  textWarning: "#d9ab63",
+  info: "#6ea5bd",
+  onInfo: "#161814",
+  textInfo: "#85b6ca",
+  focusRing: "#f0895c",
+  shadowColor: "#000000",
+  scrim: "color-mix(in srgb, var(--loidolt-shadow-color) 78%, transparent)"
+};
+var darkDeclarations = () => Object.entries(darkSemantic).map(([name, value]) => `  ${cssVarName([name])}: ${value};`);
+function generateDarkCss(scope = "attribute") {
+  const body = ["  color-scheme: dark;", ...darkDeclarations()];
+  const lines = [
+    "/* Generated from src/index.ts. Do not edit directly. */",
+    "[data-theme='dark'] {",
+    ...body,
+    "}"
+  ];
+  if (scope === "auto") {
+    lines.push(
+      "",
+      "@media (prefers-color-scheme: dark) {",
+      "  :root:not([data-theme='light']) {",
+      ...body.map((line) => `  ${line}`),
+      "  }",
+      "}"
+    );
+  }
+  return `${lines.join("\n")}
+`;
+}
+var tokens = {
+  colors,
+  typography,
+  spacing,
+  sizing,
+  borders,
+  shadows,
+  motion,
+  zIndex,
+  breakpoints,
+  semantic,
+  darkSemantic
+};
+var index_default = tokens;
+export {
+  borders,
+  breakpoints,
+  colors,
+  cssVarName,
+  darkSemantic,
+  index_default as default,
+  flattenTokens,
+  generateCss,
+  generateDarkCss,
+  motion,
+  semantic,
+  shadows,
+  sizing,
+  spacing,
+  tokens,
+  typography,
+  zIndex
+};

package/dist/tokens.css

@@ -0,0 +1,105 @@
+/* Generated from src/index.ts. Do not edit directly. */
+:root {
+  --loidolt-color-paper: #ebe7dc;
+  --loidolt-color-panel: #f5f2e9;
+  --loidolt-color-panel-alt: #efebe1;
+  --loidolt-color-canvas: #d8d3c7;
+  --loidolt-color-canvas-line: #c9c3b6;
+  --loidolt-color-deep: #20231d;
+  --loidolt-color-muted: #5f5b50;
+  --loidolt-color-line: #c8c1b1;
+  --loidolt-color-line-soft: #ddd7c9;
+  --loidolt-color-line-strong: #847d6a;
+  --loidolt-color-white: #ffffff;
+  --loidolt-color-orange: #c65224;
+  --loidolt-color-orange-dark: #a9441d;
+  --loidolt-color-error: #9b2822;
+  --loidolt-color-success: #3f5139;
+  --loidolt-color-warning: #7c4d17;
+  --loidolt-color-info: #265162;
+  --loidolt-font-display: "Jost", "Avenir Next", sans-serif;
+  --loidolt-font-utility: "Archivo", "Helvetica Neue", sans-serif;
+  --loidolt-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
+  --loidolt-font-size-xs: 0.6875rem;
+  --loidolt-font-size-sm: 0.75rem;
+  --loidolt-font-size-base: 0.875rem;
+  --loidolt-font-size-md: 1rem;
+  --loidolt-font-size-lg: 1.25rem;
+  --loidolt-font-size-xl: 1.75rem;
+  --loidolt-font-size-display: 2.5rem;
+  --loidolt-font-tracking-utility: 0.1em;
+  --loidolt-font-tracking-wide: 0.13em;
+  --loidolt-font-line-height-tight: 1.15;
+  --loidolt-font-line-height-normal: 1.45;
+  --loidolt-font-line-height-relaxed: 1.65;
+  --loidolt-space-0: 0;
+  --loidolt-space-1: 0.25rem;
+  --loidolt-space-2: 0.5rem;
+  --loidolt-space-3: 0.75rem;
+  --loidolt-space-4: 1rem;
+  --loidolt-space-5: 1.25rem;
+  --loidolt-space-6: 1.5rem;
+  --loidolt-space-8: 2rem;
+  --loidolt-space-10: 2.5rem;
+  --loidolt-space-12: 3rem;
+  --loidolt-space-16: 4rem;
+  --loidolt-size-control-sm: 2rem;
+  --loidolt-size-control: 2.375rem;
+  --loidolt-size-control-lg: 2.75rem;
+  --loidolt-size-topbar: 3.875rem;
+  --loidolt-size-contextbar: 2.5625rem;
+  --loidolt-size-sidebar: 17rem;
+  --loidolt-size-inspector: 18rem;
+  --loidolt-size-content: 75rem;
+  --loidolt-border-width: 1px;
+  --loidolt-border-color: var(--loidolt-color-line);
+  --loidolt-border-radius: 0px;
+  --loidolt-shadow-popover: 0 12px 30px color-mix(in srgb, var(--loidolt-shadow-color) 18%, transparent);
+  --loidolt-shadow-modal: 0 24px 60px color-mix(in srgb, var(--loidolt-shadow-color) 24%, transparent);
+  --loidolt-shadow-artwork: 0 18px 23px color-mix(in srgb, var(--loidolt-shadow-color) 14%, transparent);
+  --loidolt-motion-fast: 100ms;
+  --loidolt-motion-normal: 150ms;
+  --loidolt-motion-slow: 220ms;
+  --loidolt-motion-easing: cubic-bezier(0.2, 0, 0, 1);
+  --loidolt-z-base: 0;
+  --loidolt-z-raised: 10;
+  --loidolt-z-sticky: 40;
+  --loidolt-z-overlay: 60;
+  --loidolt-z-dialog: 61;
+  --loidolt-z-menu: 70;
+  --loidolt-z-toast: 80;
+  --loidolt-z-tooltip: 90;
+  --loidolt-z-skip-link: 1000;
+  --loidolt-background: var(--loidolt-color-paper);
+  --loidolt-surface: var(--loidolt-color-panel);
+  --loidolt-surface-alt: var(--loidolt-color-panel-alt);
+  --loidolt-surface-sunken: var(--loidolt-color-canvas);
+  --loidolt-surface-inverse: var(--loidolt-color-deep);
+  --loidolt-surface-input: var(--loidolt-color-white);
+  --loidolt-text: var(--loidolt-color-deep);
+  --loidolt-text-muted: var(--loidolt-color-muted);
+  --loidolt-text-inverse: var(--loidolt-color-panel);
+  --loidolt-text-accent: var(--loidolt-color-orange-dark);
+  --loidolt-border: var(--loidolt-color-line);
+  --loidolt-border-soft: var(--loidolt-color-line-soft);
+  --loidolt-border-strong: var(--loidolt-color-deep);
+  --loidolt-border-control: var(--loidolt-color-line-strong);
+  --loidolt-accent: var(--loidolt-color-orange);
+  --loidolt-accent-hover: var(--loidolt-color-orange-dark);
+  --loidolt-on-accent: var(--loidolt-color-white);
+  --loidolt-danger: var(--loidolt-color-error);
+  --loidolt-on-danger: var(--loidolt-color-white);
+  --loidolt-text-danger: var(--loidolt-color-error);
+  --loidolt-success: var(--loidolt-color-success);
+  --loidolt-on-success: var(--loidolt-color-white);
+  --loidolt-text-success: var(--loidolt-color-success);
+  --loidolt-warning: var(--loidolt-color-warning);
+  --loidolt-on-warning: var(--loidolt-color-white);
+  --loidolt-text-warning: var(--loidolt-color-warning);
+  --loidolt-info: var(--loidolt-color-info);
+  --loidolt-on-info: var(--loidolt-color-white);
+  --loidolt-text-info: var(--loidolt-color-info);
+  --loidolt-focus-ring: var(--loidolt-color-orange);
+  --loidolt-shadow-color: var(--loidolt-color-deep);
+  --loidolt-scrim: color-mix(in srgb, var(--loidolt-shadow-color) 72%, transparent);
+}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@loidolt/theme-tokens",
+  "version": "0.2.0",
+  "description": "Typed design tokens for Loidolt applications",
+  "license": "MIT",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "default": "./dist/index.js"
+    },
+    "./css": "./dist/tokens.css",
+    "./css/dark": "./dist/dark.css",
+    "./css/dark-auto": "./dist/dark-auto.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "engines": {
+    "node": ">=22"
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean && node scripts/generate-css.mjs",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "clean": "rimraf dist"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/loidolt/loidolt-theme.git",
+    "directory": "packages/tokens"
+  },
+  "devDependencies": {
+    "@types/node": "^24.3.0",
+    "tsup": "^8.5.0",
+    "typescript": "^6.0.3",
+    "rimraf": "^6.0.1",
+    "vitest": "^4.0.0"
+  }
+}