@stridge/noctis-design-tokens 1.0.0-beta.0

package/dist/palettes.js

@@ -0,0 +1,114 @@
+//#region src/palettes.ts
+/**
+* Categorical chart series (8). Spread across the hue wheel with alternating lightness;
+* dark-mode values sit lighter (read on dark surfaces), light-mode values sit darker.
+*/
+const CHART_PALETTE = {
+	dark: [
+		"oklch(0.7 0.15 264)",
+		"oklch(0.78 0.13 195)",
+		"oklch(0.74 0.16 150)",
+		"oklch(0.83 0.15 95)",
+		"oklch(0.72 0.16 55)",
+		"oklch(0.68 0.18 25)",
+		"oklch(0.7 0.17 310)",
+		"oklch(0.76 0.14 350)"
+	],
+	light: [
+		"oklch(0.55 0.17 264)",
+		"oklch(0.6 0.13 195)",
+		"oklch(0.58 0.16 150)",
+		"oklch(0.68 0.15 95)",
+		"oklch(0.6 0.17 55)",
+		"oklch(0.55 0.2 25)",
+		"oklch(0.55 0.19 310)",
+		"oklch(0.6 0.16 350)"
+	]
+};
+/**
+* Avatar / identity backgrounds (10). Saturated mid-lightness colors chosen so white initials
+* read clearly on every swatch; picked deterministically by hashing a stable id.
+*/
+const AVATAR_PALETTE = {
+	dark: [
+		"oklch(0.62 0.17 264)",
+		"oklch(0.62 0.15 196)",
+		"oklch(0.62 0.16 152)",
+		"oklch(0.64 0.15 130)",
+		"oklch(0.66 0.16 70)",
+		"oklch(0.62 0.18 40)",
+		"oklch(0.6 0.2 18)",
+		"oklch(0.6 0.18 330)",
+		"oklch(0.6 0.18 300)",
+		"oklch(0.6 0.15 285)"
+	],
+	light: [
+		"oklch(0.58 0.18 264)",
+		"oklch(0.56 0.15 196)",
+		"oklch(0.56 0.16 152)",
+		"oklch(0.58 0.15 130)",
+		"oklch(0.62 0.16 70)",
+		"oklch(0.58 0.19 40)",
+		"oklch(0.56 0.21 18)",
+		"oklch(0.56 0.19 330)",
+		"oklch(0.56 0.19 300)",
+		"oklch(0.56 0.16 285)"
+	]
+};
+/** Number of distinct chart series and avatar swatches. */
+const CHART_SERIES_COUNT = CHART_PALETTE.dark.length;
+const AVATAR_SWATCH_COUNT = AVATAR_PALETTE.dark.length;
+/** On-avatar text — a fixed knockout that reads on every (saturated) avatar swatch. */
+const AVATAR_FOREGROUND = "oklch(0.99 0 0)";
+/**
+* Pick a stable avatar swatch index (1-based, matching `bg-avatar-N`) for an id. A small FNV-1a
+* hash keeps the mapping deterministic across renders and sessions.
+*/
+function avatarIndex(id) {
+	let hash = 2166136261;
+	for (let i = 0; i < id.length; i++) {
+		hash ^= id.charCodeAt(i);
+		hash = Math.imul(hash, 16777619);
+	}
+	return (hash >>> 0) % AVATAR_SWATCH_COUNT + 1;
+}
+/** Chart roles that alias engine semantics (kept here so the swatch/reference lists them together). */
+const CHART_SEMANTIC_ROLES = [
+	{
+		role: "chart-positive",
+		utility: "text-chart-positive",
+		description: "Up / gain trend (= success)."
+	},
+	{
+		role: "chart-negative",
+		utility: "text-chart-negative",
+		description: "Down / loss trend (= danger)."
+	},
+	{
+		role: "chart-neutral",
+		utility: "text-chart-neutral",
+		description: "Flat / baseline series."
+	},
+	{
+		role: "chart-grid",
+		utility: "border-chart-grid",
+		description: "Gridlines and axis ticks."
+	},
+	{
+		role: "chart-axis",
+		utility: "text-chart-axis",
+		description: "Axis labels and tick text."
+	},
+	{
+		role: "chart-track",
+		utility: "bg-chart-track",
+		description: "Empty bar / gauge remainder."
+	},
+	{
+		role: "chart-tooltip",
+		utility: "bg-chart-tooltip",
+		description: "Chart tooltip surface."
+	}
+];
+//#endregion
+export { AVATAR_FOREGROUND, AVATAR_PALETTE, AVATAR_SWATCH_COUNT, CHART_PALETTE, CHART_SEMANTIC_ROLES, CHART_SERIES_COUNT, avatarIndex };

package/dist/react/provider.d.ts

@@ -0,0 +1,23 @@
+import { ThemeInput, ThemeOverrides } from "@stridge/noctis-theme-engine";
+import { ReactNode } from "react";
+
+//#region src/react/provider.d.ts
+interface ThemeProviderProps {
+  /** Server-resolved seed (from the persisted cookie) — falls back to the default preset. */
+  initialInput?: ThemeInput;
+  /** Generation-time primitive overrides, threaded to the engine provider and the scope sets. */
+  overrides?: ThemeOverrides;
+  children: ReactNode;
+}
+/**
+ * The app's theme provider: the engine provider plus elevation-scope application, so the
+ * root theme and the `elevated`/`sunken` scope sets are emitted together and stay in sync
+ * across theme changes. Components reach scopes with a `data-elevation` attribute.
+ */
+declare function ThemeProvider({
+  initialInput,
+  overrides,
+  children
+}: ThemeProviderProps): ReactNode;
+//#endregion
+export { ThemeProvider, ThemeProviderProps };

package/dist/react/provider.js

@@ -0,0 +1,28 @@
+"use client";
+import { applyThemeWithScopes } from "../apply-scopes.js";
+import { ThemeProvider, useTheme } from "@stridge/noctis-theme-engine/react";
+import { useInsertionEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/provider.tsx
+/** Applies the active theme with its elevation scopes whenever the input or overrides change. */
+function ElevationScopes() {
+	const { input, overrides } = useTheme();
+	useInsertionEffect(() => {
+		applyThemeWithScopes(input, void 0, { overrides });
+	}, [input, overrides]);
+	return null;
+}
+/**
+* The app's theme provider: the engine provider plus elevation-scope application, so the
+* root theme and the `elevated`/`sunken` scope sets are emitted together and stay in sync
+* across theme changes. Components reach scopes with a `data-elevation` attribute.
+*/
+function ThemeProvider$1({ initialInput, overrides, children }) {
+	return /* @__PURE__ */ jsxs(ThemeProvider, {
+		initialInput,
+		overrides,
+		children: [/* @__PURE__ */ jsx(ElevationScopes, {}), children]
+	});
+}
+//#endregion
+export { ThemeProvider$1 as ThemeProvider };

package/dist/react.d.ts

@@ -0,0 +1,3 @@
+import { ThemeProvider, ThemeProviderProps } from "./react/provider.js";
+import { useTheme } from "@stridge/noctis-theme-engine/react";
+export { ThemeProvider, type ThemeProviderProps, useTheme };

package/dist/react.js

@@ -0,0 +1,3 @@
+import { ThemeProvider } from "./react/provider.js";
+import { useTheme } from "@stridge/noctis-theme-engine/react";
+export { ThemeProvider, useTheme };

package/dist/scales.d.ts

@@ -0,0 +1,186 @@
+//#region src/scales.d.ts
+/**
+ * The foundation scales — typography, radius, motion, z-index, breakpoints — as data.
+ *
+ * These mirror the values declared in `tokens.css` (which is what the app actually consumes)
+ * and exist so the debug reference page can list them and so the scale stays documented in
+ * one typed place. The engine owns color + shadows.
+ */
+/** Named font sizes (rem base, before the `--noctis-seed-font-scale` multiplier) and their Tailwind utility. */
+declare const FONT_SIZES: {
+  readonly micro: {
+    readonly rem: 0.6875;
+    readonly utility: "text-micro";
+  };
+  readonly mini: {
+    readonly rem: 0.75;
+    readonly utility: "text-mini";
+  };
+  readonly small: {
+    readonly rem: 0.8125;
+    readonly utility: "text-small";
+  };
+  readonly regular: {
+    readonly rem: 0.9375;
+    readonly utility: "text-regular";
+  };
+  readonly large: {
+    readonly rem: 1.125;
+    readonly utility: "text-large";
+  };
+  readonly "title-3": {
+    readonly rem: 1.25;
+    readonly utility: "text-title-3";
+  };
+  readonly "title-2": {
+    readonly rem: 1.5;
+    readonly utility: "text-title-2";
+  };
+  readonly "title-1": {
+    readonly rem: 2.25;
+    readonly utility: "text-title-1";
+  };
+};
+/** Font weights (Inter's variable steps) and their Tailwind utility. */
+declare const FONT_WEIGHTS: {
+  readonly light: {
+    readonly value: 300;
+    readonly utility: "font-light";
+  };
+  readonly normal: {
+    readonly value: 450;
+    readonly utility: "font-normal";
+  };
+  readonly medium: {
+    readonly value: 500;
+    readonly utility: "font-medium";
+  };
+  readonly semibold: {
+    readonly value: 600;
+    readonly utility: "font-semibold";
+  };
+  readonly bold: {
+    readonly value: 700;
+    readonly utility: "font-bold";
+  };
+  readonly extrabold: {
+    readonly value: 800;
+    readonly utility: "font-extrabold";
+  };
+  readonly black: {
+    readonly value: 900;
+    readonly utility: "font-black";
+  };
+};
+/**
+ * Corner radii and their Tailwind utility. Every box step derives from the `--radius` knob
+ * ({@link RADIUS_VAR}), so one root value scales the whole UI live. Noctis is pill by default — the
+ * knob is `9999px`, so short interactive controls (buttons, chips, inputs, segmented) read as true
+ * pills while SURFACES stay capped. Each box step is `min()`-capped so surfaces (cards, sheets,
+ * popovers) stay bounded and never become pills, no matter how large the knob — a pill card never reads
+ * right. `full` is the only fully-round value (a constant) for genuine circles. `control` is the
+ * exception: it follows the knob uncapped, so controls reach a true pill at the Pill default (and go
+ * square when the knob is dialled to 0).
+ */
+declare const RADII: {
+  readonly xs: {
+    readonly value: "min(calc(var(--noctis-seed-radius) * 0.5), 0.375rem)";
+    readonly utility: "rounded-xs";
+  };
+  readonly sm: {
+    readonly value: "min(calc(var(--noctis-seed-radius) * 0.75), 0.5rem)";
+    readonly utility: "rounded-sm";
+  };
+  readonly md: {
+    readonly value: "min(var(--noctis-seed-radius), 0.625rem)";
+    readonly utility: "rounded-md";
+  };
+  readonly lg: {
+    readonly value: "min(calc(var(--noctis-seed-radius) * 1.5), 0.875rem)";
+    readonly utility: "rounded-lg";
+  };
+  readonly xl: {
+    readonly value: "min(calc(var(--noctis-seed-radius) * 2), 1.25rem)";
+    readonly utility: "rounded-xl";
+  };
+  readonly full: {
+    readonly value: "9999px";
+    readonly utility: "rounded-full";
+  };
+  readonly control: {
+    readonly value: "var(--noctis-seed-radius)";
+    readonly utility: "rounded-control";
+  };
+};
+/** Easing curves and their Tailwind utility. */
+declare const EASINGS: {
+  readonly standard: {
+    readonly value: "cubic-bezier(0.25, 0.46, 0.45, 0.94)";
+    readonly utility: "ease-standard";
+  };
+  readonly in: {
+    readonly value: "cubic-bezier(0.55, 0.055, 0.675, 0.19)";
+    readonly utility: "ease-in";
+  };
+  readonly out: {
+    readonly value: "cubic-bezier(0.215, 0.61, 0.355, 1)";
+    readonly utility: "ease-out";
+  };
+  readonly "in-out": {
+    readonly value: "cubic-bezier(0.645, 0.045, 0.355, 1)";
+    readonly utility: "ease-in-out";
+  };
+  readonly overlay: {
+    readonly value: "cubic-bezier(0.32, 0.72, 0, 1)";
+    readonly utility: "ease-overlay";
+  };
+};
+/**
+ * Transition speeds, bridged into the `duration-…` utilities and read as `var(--noctis-duration-…)`.
+ * `quick` is the library-wide control-feedback stop; `overlay` drives modal-overlay motion.
+ */
+declare const SPEEDS: {
+  readonly fast: "0.1s";
+  readonly quick: "0.15s";
+  readonly regular: "0.2s";
+  readonly slow: "0.35s";
+  readonly overlay: "0.26s";
+};
+/** Named stacking contexts, bridged into the `z-…` utilities and read as `var(--z-…)`. */
+declare const Z_INDEX: {
+  readonly base: 0;
+  readonly raised: 1;
+  readonly dropdown: 1000;
+  readonly sticky: 1100;
+  readonly overlay: 1300;
+  readonly modal: 1400;
+  readonly popover: 1500;
+  readonly toast: 1700;
+};
+/** Responsive breakpoints (Tailwind `sm:`/`md:`/… prefixes). */
+declare const BREAKPOINTS: {
+  readonly sm: "40rem";
+  readonly md: "48rem";
+  readonly lg: "64rem";
+  readonly xl: "80rem";
+  readonly "2xl": "96rem";
+};
+/**
+ * The seed variable that scales the entire type ramp. Set on `:root` (System Controls, host tweaks),
+ * it resizes every named `text-*` utility live, since each size is a `calc()` of its base times this seed.
+ */
+declare const FONT_SCALE_VAR: "--noctis-seed-font-scale";
+/**
+ * The seed variable the whole radius scale derives from. Set on `:root` (System Controls, host tweaks),
+ * it rounds every `rounded-*` utility live, since each {@link RADII} step is a `calc()` of this seed.
+ * `9999px` is the pill Noctis default (controls go fully round; surfaces stay capped).
+ */
+declare const RADIUS_VAR: "--noctis-seed-radius";
+/**
+ * The seed variable that tunes spacing density. Set on `:root` (System Controls, host tweaks), it tightens
+ * or loosens the spacing ramp, control heights, and region padding, each a `calc()` over this seed. `1` is
+ * the default; focus-ring geometry and border widths stay fixed.
+ */
+declare const DENSITY_VAR: "--noctis-seed-density";
+//#endregion
+export { BREAKPOINTS, DENSITY_VAR, EASINGS, FONT_SCALE_VAR, FONT_SIZES, FONT_WEIGHTS, RADII, RADIUS_VAR, SPEEDS, Z_INDEX };

package/dist/scales.js

@@ -0,0 +1,186 @@
+//#region src/scales.ts
+/**
+* The foundation scales — typography, radius, motion, z-index, breakpoints — as data.
+*
+* These mirror the values declared in `tokens.css` (which is what the app actually consumes)
+* and exist so the debug reference page can list them and so the scale stays documented in
+* one typed place. The engine owns color + shadows.
+*/
+/** Named font sizes (rem base, before the `--noctis-seed-font-scale` multiplier) and their Tailwind utility. */
+const FONT_SIZES = {
+	micro: {
+		rem: .6875,
+		utility: "text-micro"
+	},
+	mini: {
+		rem: .75,
+		utility: "text-mini"
+	},
+	small: {
+		rem: .8125,
+		utility: "text-small"
+	},
+	regular: {
+		rem: .9375,
+		utility: "text-regular"
+	},
+	large: {
+		rem: 1.125,
+		utility: "text-large"
+	},
+	"title-3": {
+		rem: 1.25,
+		utility: "text-title-3"
+	},
+	"title-2": {
+		rem: 1.5,
+		utility: "text-title-2"
+	},
+	"title-1": {
+		rem: 2.25,
+		utility: "text-title-1"
+	}
+};
+/** Font weights (Inter's variable steps) and their Tailwind utility. */
+const FONT_WEIGHTS = {
+	light: {
+		value: 300,
+		utility: "font-light"
+	},
+	normal: {
+		value: 450,
+		utility: "font-normal"
+	},
+	medium: {
+		value: 500,
+		utility: "font-medium"
+	},
+	semibold: {
+		value: 600,
+		utility: "font-semibold"
+	},
+	bold: {
+		value: 700,
+		utility: "font-bold"
+	},
+	extrabold: {
+		value: 800,
+		utility: "font-extrabold"
+	},
+	black: {
+		value: 900,
+		utility: "font-black"
+	}
+};
+/**
+* Corner radii and their Tailwind utility. Every box step derives from the `--radius` knob
+* ({@link RADIUS_VAR}), so one root value scales the whole UI live. Noctis is pill by default — the
+* knob is `9999px`, so short interactive controls (buttons, chips, inputs, segmented) read as true
+* pills while SURFACES stay capped. Each box step is `min()`-capped so surfaces (cards, sheets,
+* popovers) stay bounded and never become pills, no matter how large the knob — a pill card never reads
+* right. `full` is the only fully-round value (a constant) for genuine circles. `control` is the
+* exception: it follows the knob uncapped, so controls reach a true pill at the Pill default (and go
+* square when the knob is dialled to 0).
+*/
+const RADII = {
+	xs: {
+		value: "min(calc(var(--noctis-seed-radius) * 0.5), 0.375rem)",
+		utility: "rounded-xs"
+	},
+	sm: {
+		value: "min(calc(var(--noctis-seed-radius) * 0.75), 0.5rem)",
+		utility: "rounded-sm"
+	},
+	md: {
+		value: "min(var(--noctis-seed-radius), 0.625rem)",
+		utility: "rounded-md"
+	},
+	lg: {
+		value: "min(calc(var(--noctis-seed-radius) * 1.5), 0.875rem)",
+		utility: "rounded-lg"
+	},
+	xl: {
+		value: "min(calc(var(--noctis-seed-radius) * 2), 1.25rem)",
+		utility: "rounded-xl"
+	},
+	full: {
+		value: "9999px",
+		utility: "rounded-full"
+	},
+	control: {
+		value: "var(--noctis-seed-radius)",
+		utility: "rounded-control"
+	}
+};
+/** Easing curves and their Tailwind utility. */
+const EASINGS = {
+	standard: {
+		value: "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+		utility: "ease-standard"
+	},
+	in: {
+		value: "cubic-bezier(0.55, 0.055, 0.675, 0.19)",
+		utility: "ease-in"
+	},
+	out: {
+		value: "cubic-bezier(0.215, 0.61, 0.355, 1)",
+		utility: "ease-out"
+	},
+	"in-out": {
+		value: "cubic-bezier(0.645, 0.045, 0.355, 1)",
+		utility: "ease-in-out"
+	},
+	overlay: {
+		value: "cubic-bezier(0.32, 0.72, 0, 1)",
+		utility: "ease-overlay"
+	}
+};
+/**
+* Transition speeds, bridged into the `duration-…` utilities and read as `var(--noctis-duration-…)`.
+* `quick` is the library-wide control-feedback stop; `overlay` drives modal-overlay motion.
+*/
+const SPEEDS = {
+	fast: "0.1s",
+	quick: "0.15s",
+	regular: "0.2s",
+	slow: "0.35s",
+	overlay: "0.26s"
+};
+/** Named stacking contexts, bridged into the `z-…` utilities and read as `var(--z-…)`. */
+const Z_INDEX = {
+	base: 0,
+	raised: 1,
+	dropdown: 1e3,
+	sticky: 1100,
+	overlay: 1300,
+	modal: 1400,
+	popover: 1500,
+	toast: 1700
+};
+/** Responsive breakpoints (Tailwind `sm:`/`md:`/… prefixes). */
+const BREAKPOINTS = {
+	sm: "40rem",
+	md: "48rem",
+	lg: "64rem",
+	xl: "80rem",
+	"2xl": "96rem"
+};
+/**
+* The seed variable that scales the entire type ramp. Set on `:root` (System Controls, host tweaks),
+* it resizes every named `text-*` utility live, since each size is a `calc()` of its base times this seed.
+*/
+const FONT_SCALE_VAR = "--noctis-seed-font-scale";
+/**
+* The seed variable the whole radius scale derives from. Set on `:root` (System Controls, host tweaks),
+* it rounds every `rounded-*` utility live, since each {@link RADII} step is a `calc()` of this seed.
+* `9999px` is the pill Noctis default (controls go fully round; surfaces stay capped).
+*/
+const RADIUS_VAR = "--noctis-seed-radius";
+/**
+* The seed variable that tunes spacing density. Set on `:root` (System Controls, host tweaks), it tightens
+* or loosens the spacing ramp, control heights, and region padding, each a `calc()` over this seed. `1` is
+* the default; focus-ring geometry and border widths stay fixed.
+*/
+const DENSITY_VAR = "--noctis-seed-density";
+//#endregion
+export { BREAKPOINTS, DENSITY_VAR, EASINGS, FONT_SCALE_VAR, FONT_SIZES, FONT_WEIGHTS, RADII, RADIUS_VAR, SPEEDS, Z_INDEX };

package/dist/semantic.d.ts

@@ -0,0 +1,36 @@
+import { TokenBridge, TokenGroup } from "./graph/model.js";
+import { ThemeVar } from "@stridge/noctis-theme-engine";
+
+//#region src/semantic.d.ts
+/** Shared shape for a token entry (engine-backed entries also carry a `primitive`). */
+interface TokenBase {
+  readonly role: string;
+  readonly label: string;
+  readonly cssVar: `--noctis-${string}`;
+  readonly utility: string;
+  readonly group: TokenGroup;
+  readonly bridge?: TokenBridge;
+  readonly description: string;
+  /** The component surfaces this token drives across the app. */
+  readonly usage: string;
+}
+/** An engine-backed semantic role: resolves to one generated primitive. */
+interface SemanticRole extends TokenBase {
+  readonly primitive: ThemeVar;
+}
+/** An authored static token: a value the engine does not generate. */
+type StaticToken = TokenBase;
+/** The engine-backed semantic role set, in display order — a view over the graph's semantic tier. */
+declare const SEMANTIC_ROLES: readonly SemanticRole[];
+/** Authored static tokens (accent-independent; no engine primitive) — a view over the graph. */
+declare const STATIC_TOKENS: readonly StaticToken[];
+/** An elevation scope a `data-elevation` subtree adopts (a full re-generated, consistent set). */
+interface ElevationScope {
+  readonly level: "elevated" | "menu" | "sunken";
+  readonly attribute: string;
+  readonly description: string;
+}
+/** The elevation scopes the layer ships. Scopes are absolute (not relative/compounding). */
+declare const ELEVATION_SCOPES: readonly ElevationScope[];
+//#endregion
+export { ELEVATION_SCOPES, ElevationScope, SEMANTIC_ROLES, STATIC_TOKENS, SemanticRole, StaticToken };

package/dist/semantic.js

@@ -0,0 +1,49 @@
+import { ROLE_VAR_PREFIX } from "./graph/registry.js";
+import { serializeTokenName } from "./graph/serialize.js";
+import { cssVarName } from "./graph/model.js";
+import { SEMANTIC_TOKENS } from "./graph/roles.js";
+import { STATIC_SEMANTIC_TOKENS } from "./graph/statics.js";
+import "./graph/index.js";
+//#region src/semantic.ts
+function base(token) {
+	return {
+		role: serializeTokenName(token.name),
+		label: token.label ?? "",
+		cssVar: cssVarName(token, ROLE_VAR_PREFIX),
+		utility: token.utility ?? "",
+		group: token.group ?? "utility",
+		...token.bridge ? { bridge: token.bridge } : {},
+		description: token.description,
+		usage: token.usage
+	};
+}
+/** The engine-backed semantic role set, in display order — a view over the graph's semantic tier. */
+const SEMANTIC_ROLES = SEMANTIC_TOKENS.map((token) => {
+	if (!("primitive" in token.value)) throw new Error(`role "${serializeTokenName(token.name)}" is not engine-backed`);
+	return {
+		...base(token),
+		primitive: token.value.primitive
+	};
+});
+/** Authored static tokens (accent-independent; no engine primitive) — a view over the graph. */
+const STATIC_TOKENS = STATIC_SEMANTIC_TOKENS.map(base);
+/** The elevation scopes the layer ships. Scopes are absolute (not relative/compounding). */
+const ELEVATION_SCOPES = [
+	{
+		level: "elevated",
+		attribute: "data-elevation=\"elevated\"",
+		description: "Raised surfaces — dialogs, sheets, drawers, popovers, tooltips."
+	},
+	{
+		level: "menu",
+		attribute: "data-elevation=\"menu\"",
+		description: "Highest float — dropdown and context menus, select listboxes, the command palette."
+	},
+	{
+		level: "sunken",
+		attribute: "data-elevation=\"sunken\"",
+		description: "Recessed regions — sidebars and content wells."
+	}
+];
+//#endregion
+export { ELEVATION_SCOPES, SEMANTIC_ROLES, STATIC_TOKENS };

package/dist/swatches.d.ts

@@ -0,0 +1,24 @@
+//#region src/swatches.d.ts
+/**
+ * Seed swatches for the preference controls — the accent and background options a user (or the
+ * debug tweak panel) can pick. Each is an OKLCH seed fed straight into the theme engine, which
+ * regenerates a full, contrast-correct token set around it. Authoring raw OKLCH is the token
+ * layer's job (the same as the brand presets), so these live here rather than in app code.
+ */
+/** A named color seed offered as a swatch. */
+interface ThemeSwatch {
+  /** Display name shown as the control's accessible label. */
+  name: string;
+  /** OKLCH seed handed to the theme engine. */
+  value: string;
+}
+/** Accent options spread across the hue wheel at a consistent lightness/chroma so each calibrates well.
+ *  The first is the brand accent itself — kept identical to `defaultPreset.accent` so the shipped Dark
+ *  theme lights up its own swatch (and the readout names it) rather than reading as a custom color. */
+declare const ACCENT_SWATCHES: readonly ThemeSwatch[];
+/** Background options — the base lightness the engine reads to resolve light vs dark and the full ramp.
+ *  The first is the brand canvas itself — kept identical to `defaultPreset.background` so the shipped
+ *  Dark theme lights up its own swatch. `Light` already matches the Light preset's canvas. */
+declare const BACKGROUND_SWATCHES: readonly ThemeSwatch[];
+//#endregion
+export { ACCENT_SWATCHES, BACKGROUND_SWATCHES, ThemeSwatch };