tempest-react-sdk 0.23.0 → 0.25.0

package/dist/theme/color.js

@@ -0,0 +1,130 @@
+//#region src/theme/color.ts
+var e = [
+	50,
+	100,
+	200,
+	300,
+	400,
+	500,
+	600,
+	700,
+	800,
+	900
+], t = {
+	50: .972,
+	100: .938,
+	200: .878,
+	300: .798,
+	400: .712,
+	500: .624,
+	600: .542,
+	700: .458,
+	800: .378,
+	900: .292
+}, n = {
+	50: .238,
+	100: .288,
+	200: .362,
+	300: .452,
+	400: .544,
+	500: .632,
+	600: .712,
+	700: .788,
+	800: .862,
+	900: .928
+}, r = {
+	50: .18,
+	100: .34,
+	200: .6,
+	300: .82,
+	400: .95,
+	500: 1,
+	600: .98,
+	700: .88,
+	800: .74,
+	900: .58
+};
+function i(e, t, n) {
+	return Math.min(n, Math.max(t, e));
+}
+function a(e) {
+	let t = e.trim().replace(/^#/, ""), n = t.length === 3 || t.length === 4 ? t.slice(0, 3).split("").map((e) => e + e).join("") : t.slice(0, 6);
+	if (!/^[0-9a-fA-F]{6}$/.test(n)) throw Error(`Invalid hex color: "${e}"`);
+	return `#${n.toLowerCase()}`;
+}
+function o(e) {
+	let t = a(e).slice(1);
+	return {
+		r: parseInt(t.slice(0, 2), 16) / 255,
+		g: parseInt(t.slice(2, 4), 16) / 255,
+		b: parseInt(t.slice(4, 6), 16) / 255
+	};
+}
+function s(e, t, n) {
+	let r = (e) => Math.round(i(e, 0, 1) * 255).toString(16).padStart(2, "0");
+	return `#${r(e)}${r(t)}${r(n)}`;
+}
+function c(e) {
+	return e <= .04045 ? e / 12.92 : ((e + .055) / 1.055) ** 2.4;
+}
+function l(e) {
+	return e <= .0031308 ? e * 12.92 : 1.055 * e ** (1 / 2.4) - .055;
+}
+function u(e) {
+	let { r: t, g: n, b: r } = o(e), i = c(t), a = c(n), s = c(r), l = Math.cbrt(.4122214708 * i + .5363325363 * a + .0514459929 * s), u = Math.cbrt(.2119034982 * i + .6806995451 * a + .1073969566 * s), d = Math.cbrt(.0883024619 * i + .2817188376 * a + .6299787005 * s), f = .2104542553 * l + .793617785 * u - .0040720468 * d, p = 1.9779984951 * l - 2.428592205 * u + .4505937099 * d, m = .0259040371 * l + .7827717662 * u - .808675766 * d, h = Math.sqrt(p * p + m * m), g = h < 1e-6 ? 0 : Math.atan2(m, p) * 180 / Math.PI;
+	return {
+		l: f,
+		c: h,
+		h: g < 0 ? g + 360 : g
+	};
+}
+function d({ l: e, c: t, h: n }) {
+	let r = n * Math.PI / 180, i = Math.cos(r) * t, a = Math.sin(r) * t, o = (e + .3963377774 * i + .2158037573 * a) ** 3, s = (e - .1055613458 * i - .0638541728 * a) ** 3, c = (e - .0894841775 * i - 1.291485548 * a) ** 3;
+	return {
+		r: 4.0767416621 * o - 3.3077115913 * s + .2309699292 * c,
+		g: -1.2684380046 * o + 2.6097574011 * s - .3413193965 * c,
+		b: -.0041960863 * o - .7034186147 * s + 1.707614701 * c
+	};
+}
+function f({ r: e, g: t, b: n }) {
+	return e >= -1e-4 && e <= 1.0001 && t >= -1e-4 && t <= 1.0001 && n >= -1e-4 && n <= 1.0001;
+}
+function p(e) {
+	let t = Math.max(0, e.c), n = d({
+		...e,
+		c: t
+	});
+	for (let r = 0; r < 24 && !f(n); r += 1) t *= .9, n = d({
+		...e,
+		c: t
+	});
+	return s(l(n.r), l(n.g), l(n.b));
+}
+function m(i, a = "light") {
+	let o = u(i), s = a === "dark" ? n : t, c = {};
+	for (let t of e) c[t] = p({
+		l: s[t],
+		c: o.c * r[t],
+		h: o.h
+	});
+	return c;
+}
+function h(e) {
+	let { r: t, g: n, b: r } = o(e);
+	return .2126 * c(t) + .7152 * c(n) + .0722 * c(r);
+}
+function g(e, t) {
+	let n = h(e), r = h(t), i = Math.max(n, r), a = Math.min(n, r);
+	return (i + .05) / (a + .05);
+}
+function _(e, t = "#ffffff", n = "#101828") {
+	return g(e, t) >= g(e, n) ? t : n;
+}
+function v(e, t) {
+	let { r: n, g: r, b: a } = o(e), s = (e) => Math.round(i(e, 0, 1) * 255);
+	return `rgb(${s(n)} ${s(r)} ${s(a)} / ${i(t, 0, 1)})`;
+}
+//#endregion
+export { g as contrastRatio, m as createColorScale, u as hexToOklch, o as hexToRgb, v as hexToRgbaString, p as oklchToHex, _ as readableForeground, h as relativeLuminance, s as rgbToHex };
+
+//# sourceMappingURL=color.js.map

package/dist/theme/color.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"color.js","names":[],"sources":["../../src/theme/color.ts"],"sourcesContent":["/**\n * Color math behind {@link createTheme} — OKLab/OKLCH conversions, tint scale\n * generation and WCAG contrast picking.\n *\n * Everything here is pure and dependency-free: the SDK generates brand ramps at\n * runtime in the browser, so a color library would be a disproportionate cost\n * for ~150 lines of well-specified math. OKLCH is used instead of HSL because\n * HSL lightness is not perceptual — an HSL ramp of a yellow and of a blue at the\n * same `L` read as wildly different brightness, which is exactly what breaks a\n * generated palette.\n */\n\n/** A color in the OKLCH space: perceptual lightness, chroma and hue. */\nexport interface Oklch {\n    /** Perceptual lightness, `0` (black) to `1` (white). */\n    l: number;\n    /** Chroma (colorfulness). `0` is gray; sRGB rarely exceeds `~0.37`. */\n    c: number;\n    /** Hue angle in degrees, `0`–`360`. */\n    h: number;\n}\n\n/** The ten steps of a Tempest tint scale, lightest to darkest. */\nexport type ScaleStep = 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;\n\n/** A generated tint scale, keyed by step. */\nexport type ColorScale = Record<ScaleStep, string>;\n\nconst SCALE_STEPS: ScaleStep[] = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];\n\n/**\n * Target perceptual lightness per step for a light-theme ramp.\n *\n * Tuned against the hand-written scales in `colors.css` so a generated theme\n * sits in the same visual range as the built-in one: `500` is the action color,\n * `50`/`100` are usable as soft backgrounds, `700`+ carries text on white.\n */\nconst LIGHT_LIGHTNESS: Record<ScaleStep, number> = {\n    50: 0.972,\n    100: 0.938,\n    200: 0.878,\n    300: 0.798,\n    400: 0.712,\n    500: 0.624,\n    600: 0.542,\n    700: 0.458,\n    800: 0.378,\n    900: 0.292,\n};\n\n/**\n * Target lightness for a dark-theme ramp — the ramp is **inverted**: `50` is the\n * darkest tint (a surface) and `900` the lightest (text-grade), matching the\n * `[data-tempest-theme=\"dark\"]` block in `colors.css`.\n */\nconst DARK_LIGHTNESS: Record<ScaleStep, number> = {\n    50: 0.238,\n    100: 0.288,\n    200: 0.362,\n    300: 0.452,\n    400: 0.544,\n    500: 0.632,\n    600: 0.712,\n    700: 0.788,\n    800: 0.862,\n    900: 0.928,\n};\n\n/**\n * Chroma multiplier per step, relative to the input color's chroma.\n *\n * Peaks around `500`–`600` and falls off at both ends: near-white and near-black\n * tints hold very little chroma before they look muddy or leave the sRGB gamut.\n */\nconst CHROMA_CURVE: Record<ScaleStep, number> = {\n    50: 0.18,\n    100: 0.34,\n    200: 0.6,\n    300: 0.82,\n    400: 0.95,\n    500: 1,\n    600: 0.98,\n    700: 0.88,\n    800: 0.74,\n    900: 0.58,\n};\n\nfunction clamp(value: number, min: number, max: number): number {\n    return Math.min(max, Math.max(min, value));\n}\n\n/** Expand `#abc` to `#aabbcc` and normalize to a lowercase 6-digit hex. */\nfunction normalizeHex(hex: string): string {\n    const raw = hex.trim().replace(/^#/, \"\");\n    const expanded =\n        raw.length === 3 || raw.length === 4\n            ? raw\n                  .slice(0, 3)\n                  .split(\"\")\n                  .map((char) => char + char)\n                  .join(\"\")\n            : raw.slice(0, 6);\n    if (!/^[0-9a-fA-F]{6}$/.test(expanded)) {\n        throw new Error(`Invalid hex color: \"${hex}\"`);\n    }\n    return `#${expanded.toLowerCase()}`;\n}\n\n/** Parse a hex color into sRGB channels in the `0`–`1` range. */\nexport function hexToRgb(hex: string): { r: number; g: number; b: number } {\n    const normalized = normalizeHex(hex).slice(1);\n    return {\n        r: parseInt(normalized.slice(0, 2), 16) / 255,\n        g: parseInt(normalized.slice(2, 4), 16) / 255,\n        b: parseInt(normalized.slice(4, 6), 16) / 255,\n    };\n}\n\n/** Serialize sRGB channels (`0`–`1`, clamped) back to a `#rrggbb` string. */\nexport function rgbToHex(r: number, g: number, b: number): string {\n    const channel = (value: number): string =>\n        Math.round(clamp(value, 0, 1) * 255)\n            .toString(16)\n            .padStart(2, \"0\");\n    return `#${channel(r)}${channel(g)}${channel(b)}`;\n}\n\nfunction srgbToLinear(channel: number): number {\n    return channel <= 0.04045 ? channel / 12.92 : Math.pow((channel + 0.055) / 1.055, 2.4);\n}\n\nfunction linearToSrgb(channel: number): number {\n    return channel <= 0.0031308 ? channel * 12.92 : 1.055 * Math.pow(channel, 1 / 2.4) - 0.055;\n}\n\n/** Convert a hex color to OKLCH. */\nexport function hexToOklch(hex: string): Oklch {\n    const { r, g, b } = hexToRgb(hex);\n    const lr = srgbToLinear(r);\n    const lg = srgbToLinear(g);\n    const lb = srgbToLinear(b);\n\n    const long = Math.cbrt(0.4122214708 * lr + 0.5363325363 * lg + 0.0514459929 * lb);\n    const medium = Math.cbrt(0.2119034982 * lr + 0.6806995451 * lg + 0.1073969566 * lb);\n    const short = Math.cbrt(0.0883024619 * lr + 0.2817188376 * lg + 0.6299787005 * lb);\n\n    const l = 0.2104542553 * long + 0.793617785 * medium - 0.0040720468 * short;\n    const a = 1.9779984951 * long - 2.428592205 * medium + 0.4505937099 * short;\n    const bAxis = 0.0259040371 * long + 0.7827717662 * medium - 0.808675766 * short;\n\n    const c = Math.sqrt(a * a + bAxis * bAxis);\n    const hue = c < 1e-6 ? 0 : (Math.atan2(bAxis, a) * 180) / Math.PI;\n\n    return { l, c, h: hue < 0 ? hue + 360 : hue };\n}\n\n/** Convert OKLCH to linear-light sRGB, without gamut clamping. */\nfunction oklchToLinearRgb({ l, c, h }: Oklch): { r: number; g: number; b: number } {\n    const hRad = (h * Math.PI) / 180;\n    const a = Math.cos(hRad) * c;\n    const bAxis = Math.sin(hRad) * c;\n\n    const long = (l + 0.3963377774 * a + 0.2158037573 * bAxis) ** 3;\n    const medium = (l - 0.1055613458 * a - 0.0638541728 * bAxis) ** 3;\n    const short = (l - 0.0894841775 * a - 1.291485548 * bAxis) ** 3;\n\n    return {\n        r: 4.0767416621 * long - 3.3077115913 * medium + 0.2309699292 * short,\n        g: -1.2684380046 * long + 2.6097574011 * medium - 0.3413193965 * short,\n        b: -0.0041960863 * long - 0.7034186147 * medium + 1.707614701 * short,\n    };\n}\n\nfunction inGamut({ r, g, b }: { r: number; g: number; b: number }): boolean {\n    const epsilon = 1e-4;\n    return (\n        r >= -epsilon &&\n        r <= 1 + epsilon &&\n        g >= -epsilon &&\n        g <= 1 + epsilon &&\n        b >= -epsilon &&\n        b <= 1 + epsilon\n    );\n}\n\n/**\n * Convert OKLCH to a hex color, reducing chroma until the result fits sRGB.\n *\n * Lightness and hue are preserved: desaturating is far less noticeable than\n * shifting either of them, and a naive channel clamp would do both.\n */\nexport function oklchToHex(color: Oklch): string {\n    let chroma = Math.max(0, color.c);\n    let rgb = oklchToLinearRgb({ ...color, c: chroma });\n\n    for (let i = 0; i < 24 && !inGamut(rgb); i += 1) {\n        chroma *= 0.9;\n        rgb = oklchToLinearRgb({ ...color, c: chroma });\n    }\n\n    return rgbToHex(linearToSrgb(rgb.r), linearToSrgb(rgb.g), linearToSrgb(rgb.b));\n}\n\n/**\n * Build a ten-step tint scale from a single brand color.\n *\n * The input color's hue is kept throughout and its chroma sets the intensity of\n * the whole ramp, so a muted brand color yields a muted scale instead of being\n * \"corrected\" into something the brand never approved.\n *\n * @param hex - Any hex color (`#abc` or `#aabbcc`), the intended `500` step.\n * @param mode - `\"light\"` for a light→dark ramp, `\"dark\"` for the inverted ramp\n *   used under `[data-tempest-theme=\"dark\"]`.\n */\nexport function createColorScale(hex: string, mode: \"light\" | \"dark\" = \"light\"): ColorScale {\n    const base = hexToOklch(hex);\n    const lightness = mode === \"dark\" ? DARK_LIGHTNESS : LIGHT_LIGHTNESS;\n    const scale = {} as ColorScale;\n\n    for (const step of SCALE_STEPS) {\n        scale[step] = oklchToHex({\n            l: lightness[step],\n            c: base.c * CHROMA_CURVE[step],\n            h: base.h,\n        });\n    }\n\n    return scale;\n}\n\n/** WCAG 2.x relative luminance of a hex color. */\nexport function relativeLuminance(hex: string): number {\n    const { r, g, b } = hexToRgb(hex);\n    return 0.2126 * srgbToLinear(r) + 0.7152 * srgbToLinear(g) + 0.0722 * srgbToLinear(b);\n}\n\n/** WCAG 2.x contrast ratio between two hex colors, from `1` to `21`. */\nexport function contrastRatio(a: string, b: string): number {\n    const la = relativeLuminance(a);\n    const lb = relativeLuminance(b);\n    const lighter = Math.max(la, lb);\n    const darker = Math.min(la, lb);\n    return (lighter + 0.05) / (darker + 0.05);\n}\n\n/**\n * Pick the readable foreground for a background, by contrast ratio.\n *\n * Used for `--tempest-primary-foreground`: a generated brand color can land\n * anywhere on the lightness axis, and hardcoding white would silently produce\n * unreadable buttons for light brands (yellow, lime, cyan).\n */\nexport function readableForeground(\n    background: string,\n    light = \"#ffffff\",\n    dark = \"#101828\",\n): string {\n    return contrastRatio(background, light) >= contrastRatio(background, dark) ? light : dark;\n}\n\n/** Format a hex color as `rgb(r g b / alpha)`, for focus rings and overlays. */\nexport function hexToRgbaString(hex: string, alpha: number): string {\n    const { r, g, b } = hexToRgb(hex);\n    const channel = (value: number): number => Math.round(clamp(value, 0, 1) * 255);\n    return `rgb(${channel(r)} ${channel(g)} ${channel(b)} / ${clamp(alpha, 0, 1)})`;\n}\n"],"mappings":"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"}

package/dist/theme/create-theme.cjs

@@ -0,0 +1,5 @@
+const e=require("./color.cjs");var t={none:{xs:`0`,sm:`0`,md:`0`,lg:`0`,xl:`0`,"2xl":`0`},sm:{xs:`1px`,sm:`2px`,md:`4px`,lg:`6px`,xl:`8px`,"2xl":`12px`},md:{xs:`2px`,sm:`4px`,md:`8px`,lg:`12px`,xl:`16px`,"2xl":`24px`},lg:{xs:`4px`,sm:`6px`,md:`12px`,lg:`16px`,xl:`22px`,"2xl":`32px`},xl:{xs:`6px`,sm:`10px`,md:`16px`,lg:`24px`,xl:`32px`,"2xl":`44px`},full:{xs:`4px`,sm:`8px`,md:`9999px`,lg:`9999px`,xl:`9999px`,"2xl":`9999px`}},n=[50,100,200,300,400,500,600,700,800,900];function r(e,t,r){for(let i of n)e[`--tempest-${t}-${i}`]=r[i]}var i=4.5;function a(t,n,r){for(let a of r)if(e.contrastRatio(t[n],t[a])>=i)return a;return r[r.length-1]}function o(t,n,r,i){t[`--tempest-primary`]=`var(--tempest-primary-500)`,r===`light`?(t[`--tempest-primary-hover`]=`var(--tempest-primary-600)`,t[`--tempest-primary-active`]=`var(--tempest-primary-700)`,t[`--tempest-primary-soft`]=`var(--tempest-primary-50)`,t[`--tempest-primary-soft-hover`]=`var(--tempest-primary-100)`,t[`--tempest-primary-on-soft`]=`var(--tempest-primary-${a(n,50,[600,700,800,900])})`):(t[`--tempest-primary-hover`]=`var(--tempest-primary-400)`,t[`--tempest-primary-active`]=`var(--tempest-primary-300)`,t[`--tempest-primary-soft`]=`var(--tempest-primary-100)`,t[`--tempest-primary-soft-hover`]=`var(--tempest-primary-200)`,t[`--tempest-primary-on-soft`]=`var(--tempest-primary-${a(n,100,[700,800,900])})`);let o=e.readableForeground(n[500]);t[`--tempest-primary-foreground`]=o,t[`--tempest-text-on-primary`]=o,t[`--tempest-focus-ring-color`]=e.hexToRgbaString(n[500],i)}function s(e,t,n){n===`light`?(e[`--tempest-bg`]=`#ffffff`,e[`--tempest-surface`]=`var(--tempest-gray-50)`,e[`--tempest-surface-2`]=`var(--tempest-gray-100)`,e[`--tempest-surface-3`]=`var(--tempest-gray-200)`,e[`--tempest-border`]=`var(--tempest-gray-200)`,e[`--tempest-border-strong`]=`var(--tempest-gray-300)`,e[`--tempest-text`]=`var(--tempest-gray-900)`,e[`--tempest-text-muted`]=`var(--tempest-gray-600)`,e[`--tempest-text-subtle`]=`var(--tempest-gray-500)`):(e[`--tempest-bg`]=t[50],e[`--tempest-surface`]=`var(--tempest-gray-100)`,e[`--tempest-surface-2`]=`var(--tempest-gray-200)`,e[`--tempest-surface-3`]=`var(--tempest-gray-300)`,e[`--tempest-border`]=`var(--tempest-gray-300)`,e[`--tempest-border-strong`]=`var(--tempest-gray-400)`,e[`--tempest-text`]=`var(--tempest-gray-900)`,e[`--tempest-text-muted`]=`var(--tempest-gray-700)`,e[`--tempest-text-subtle`]=`var(--tempest-gray-600)`)}function c(e,t,n,r){r===`light`?(e[`--tempest-${t}`]=n[700],e[`--tempest-${t}-fg`]=n[800],e[`--tempest-${t}-bg`]=n[50],e[`--tempest-${t}-border`]=n[200],e[`--tempest-${t}-solid`]=n[600]):(e[`--tempest-${t}`]=n[700],e[`--tempest-${t}-fg`]=n[700],e[`--tempest-${t}-bg`]=n[50],e[`--tempest-${t}-border`]=n[200],e[`--tempest-${t}-solid`]=n[500])}function l(e,t){let n=Object.entries(t);return n.length===0?``:`${e} {\n${n.map(([e,t])=>`    ${e}: ${t};`).join(`
+`)}\n}`}function u(n={}){let{primary:i,gray:a,chart:u,radius:d,focusRingAlpha:f=.35,selector:p=`:root`,darkSelector:m=`[data-tempest-theme="dark"]`}=n,h={},g={};if(i){let t=e.createColorScale(i,`light`),n=e.createColorScale(i,`dark`);r(h,`primary`,t),r(g,`primary`,n),o(h,t,`light`,f),o(g,n,`dark`,f)}if(a){let t=e.createColorScale(a,`light`),n=e.createColorScale(a,`dark`);r(h,`gray`,t),r(g,`gray`,n),s(h,t,`light`),s(g,n,`dark`)}for(let t of[`success`,`warning`,`danger`,`info`]){let r=n[t];r&&(c(h,t,e.createColorScale(r,`light`),`light`),c(g,t,e.createColorScale(r,`dark`),`dark`))}if(u?.length&&u.forEach((e,t)=>{h[`--tempest-chart-${t+1}`]=e}),d){let e=typeof d==`string`?t[d]:d;for(let[t,n]of Object.entries(e))h[`--tempest-radius-${t}`]=n}return{light:h,dark:g,css:[l(p,h),l(m,g)].filter(Boolean).join(`
+
+`)}}function d(t){if(!t.primary)return null;let n=e.createColorScale(t.primary,`light`);return e.contrastRatio(n[500],e.readableForeground(n[500]))}exports.createTheme=u,exports.themeContrast=d;
+//# sourceMappingURL=create-theme.cjs.map

package/dist/theme/create-theme.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-theme.cjs","names":[],"sources":["../../src/theme/create-theme.ts"],"sourcesContent":["/**\n * Theme factory: turns a handful of brand colors into the full set of\n * `--tempest-*` token overrides, for both light and dark.\n *\n * Rebranding used to mean hand-writing ~167 custom properties (and getting the\n * dark ramp inversion right by hand). `createTheme({ primary: \"#7c3aed\" })`\n * emits the same thing, derived in OKLCH so the ramp stays perceptually even.\n */\nimport {\n    contrastRatio,\n    createColorScale,\n    hexToRgbaString,\n    readableForeground,\n    type ColorScale,\n    type ScaleStep,\n} from \"./color\";\n\n/** Radius presets, applied to the whole `--tempest-radius-*` family at once. */\nexport type ThemeRadius = \"none\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\n/** Status token families that {@link createTheme} can regenerate. */\nexport type ThemeStatus = \"success\" | \"warning\" | \"danger\" | \"info\";\n\n/** Input for {@link createTheme}. Every field is optional — omitted families keep the built-in tokens. */\nexport interface CreateThemeOptions {\n    /** Brand color, used as the `500` step of the primary scale. */\n    primary?: string;\n    /** Neutral color, used as the `500` step of the gray scale (surfaces, borders, text). */\n    gray?: string;\n    /** Success color (`--tempest-success*`). */\n    success?: string;\n    /** Warning color (`--tempest-warning*`). */\n    warning?: string;\n    /** Danger color (`--tempest-danger*`). */\n    danger?: string;\n    /** Info color (`--tempest-info*`). */\n    info?: string;\n    /**\n     * Categorical series colors for `tempest-react-sdk/charts`, in cycle order.\n     * Written to `--tempest-chart-1` … `--tempest-chart-N`, so charts follow the\n     * theme instead of a hardcoded palette.\n     */\n    chart?: string[];\n    /** Corner radius scale. A preset name, or explicit per-step values. */\n    radius?: ThemeRadius | Partial<Record<\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\", string>>;\n    /** Alpha of `--tempest-focus-ring-color`, derived from the brand color. Default `0.35`. */\n    focusRingAlpha?: number;\n    /** Selector the light tokens are written under. Default `\":root\"`. */\n    selector?: string;\n    /** Selector the dark tokens are written under. Default `'[data-tempest-theme=\"dark\"]'`. */\n    darkSelector?: string;\n}\n\n/** A generated theme: token maps per color scheme, plus the CSS text that carries them. */\nexport interface GeneratedTheme {\n    /** Light-scheme custom properties, without the leading `--`-less names (keys include `--`). */\n    light: Record<string, string>;\n    /** Dark-scheme custom properties. */\n    dark: Record<string, string>;\n    /** Both blocks rendered as CSS, ready for {@link applyTheme} or a stylesheet. */\n    css: string;\n}\n\nconst RADIUS_PRESETS: Record<ThemeRadius, Record<string, string>> = {\n    none: { xs: \"0\", sm: \"0\", md: \"0\", lg: \"0\", xl: \"0\", \"2xl\": \"0\" },\n    sm: { xs: \"1px\", sm: \"2px\", md: \"4px\", lg: \"6px\", xl: \"8px\", \"2xl\": \"12px\" },\n    md: { xs: \"2px\", sm: \"4px\", md: \"8px\", lg: \"12px\", xl: \"16px\", \"2xl\": \"24px\" },\n    lg: { xs: \"4px\", sm: \"6px\", md: \"12px\", lg: \"16px\", xl: \"22px\", \"2xl\": \"32px\" },\n    xl: { xs: \"6px\", sm: \"10px\", md: \"16px\", lg: \"24px\", xl: \"32px\", \"2xl\": \"44px\" },\n    full: { xs: \"4px\", sm: \"8px\", md: \"9999px\", lg: \"9999px\", xl: \"9999px\", \"2xl\": \"9999px\" },\n};\n\nconst SCALE_STEPS: ScaleStep[] = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];\n\nfunction writeScale(tokens: Record<string, string>, name: string, scale: ColorScale): void {\n    for (const step of SCALE_STEPS) {\n        tokens[`--tempest-${name}-${step}`] = scale[step];\n    }\n}\n\n/** Minimum contrast for body text, WCAG 2.x AA. */\nconst AA_TEXT_CONTRAST = 4.5;\n\n/**\n * Choose the ramp step for text sitting on the soft tint.\n *\n * A fixed step does not survive an arbitrary brand color: the built-in blue only\n * reaches 4.37:1 at `500` over its own `50` tint, and a generated emerald lands\n * at 4.41:1 at `600` — both fail AA for body text by a hair. So the step is\n * picked by measuring, walking away from the tint until it clears AA, and\n * falling back to the most extreme candidate when even that cannot (a very light\n * or very desaturated brand).\n *\n * @param scale - The generated ramp.\n * @param softStep - Step used as `--tempest-primary-soft`.\n * @param candidates - Steps to try, in order of preference.\n * @returns The first candidate clearing {@link AA_TEXT_CONTRAST}, else the last.\n */\nfunction pickOnSoftStep(\n    scale: ColorScale,\n    softStep: ScaleStep,\n    candidates: ScaleStep[],\n): ScaleStep {\n    for (const step of candidates) {\n        if (contrastRatio(scale[softStep], scale[step]) >= AA_TEXT_CONTRAST) return step;\n    }\n    return candidates[candidates.length - 1];\n}\n\n/**\n * Emit the primary aliases for one scheme.\n *\n * The dark scheme walks the ramp the other way (hover is *lighter*, the soft\n * tint is a dark shade, and readable text on that tint is a light shade) — the\n * same inversion the built-in `colors.css` dark block does by hand.\n */\nfunction writePrimaryAliases(\n    tokens: Record<string, string>,\n    scale: ColorScale,\n    scheme: \"light\" | \"dark\",\n    focusRingAlpha: number,\n): void {\n    tokens[\"--tempest-primary\"] = \"var(--tempest-primary-500)\";\n    if (scheme === \"light\") {\n        tokens[\"--tempest-primary-hover\"] = \"var(--tempest-primary-600)\";\n        tokens[\"--tempest-primary-active\"] = \"var(--tempest-primary-700)\";\n        tokens[\"--tempest-primary-soft\"] = \"var(--tempest-primary-50)\";\n        tokens[\"--tempest-primary-soft-hover\"] = \"var(--tempest-primary-100)\";\n        tokens[\"--tempest-primary-on-soft\"] =\n            `var(--tempest-primary-${pickOnSoftStep(scale, 50, [600, 700, 800, 900])})`;\n    } else {\n        tokens[\"--tempest-primary-hover\"] = \"var(--tempest-primary-400)\";\n        tokens[\"--tempest-primary-active\"] = \"var(--tempest-primary-300)\";\n        tokens[\"--tempest-primary-soft\"] = \"var(--tempest-primary-100)\";\n        tokens[\"--tempest-primary-soft-hover\"] = \"var(--tempest-primary-200)\";\n        tokens[\"--tempest-primary-on-soft\"] =\n            `var(--tempest-primary-${pickOnSoftStep(scale, 100, [700, 800, 900])})`;\n    }\n\n    const foreground = readableForeground(scale[500]);\n    tokens[\"--tempest-primary-foreground\"] = foreground;\n    tokens[\"--tempest-text-on-primary\"] = foreground;\n    tokens[\"--tempest-focus-ring-color\"] = hexToRgbaString(scale[500], focusRingAlpha);\n}\n\n/**\n * Emit the neutral surface/border/text aliases from a generated gray scale.\n *\n * `--tempest-bg` is pushed past the ramp on purpose: pure white in light mode and\n * a shade darker than `gray-50` in dark mode, so a raised surface still reads as\n * raised against the page.\n */\nfunction writeNeutralAliases(\n    tokens: Record<string, string>,\n    scale: ColorScale,\n    scheme: \"light\" | \"dark\",\n): void {\n    if (scheme === \"light\") {\n        tokens[\"--tempest-bg\"] = \"#ffffff\";\n        tokens[\"--tempest-surface\"] = \"var(--tempest-gray-50)\";\n        tokens[\"--tempest-surface-2\"] = \"var(--tempest-gray-100)\";\n        tokens[\"--tempest-surface-3\"] = \"var(--tempest-gray-200)\";\n        tokens[\"--tempest-border\"] = \"var(--tempest-gray-200)\";\n        tokens[\"--tempest-border-strong\"] = \"var(--tempest-gray-300)\";\n        tokens[\"--tempest-text\"] = \"var(--tempest-gray-900)\";\n        tokens[\"--tempest-text-muted\"] = \"var(--tempest-gray-600)\";\n        tokens[\"--tempest-text-subtle\"] = \"var(--tempest-gray-500)\";\n    } else {\n        tokens[\"--tempest-bg\"] = scale[50];\n        tokens[\"--tempest-surface\"] = \"var(--tempest-gray-100)\";\n        tokens[\"--tempest-surface-2\"] = \"var(--tempest-gray-200)\";\n        tokens[\"--tempest-surface-3\"] = \"var(--tempest-gray-300)\";\n        tokens[\"--tempest-border\"] = \"var(--tempest-gray-300)\";\n        tokens[\"--tempest-border-strong\"] = \"var(--tempest-gray-400)\";\n        tokens[\"--tempest-text\"] = \"var(--tempest-gray-900)\";\n        tokens[\"--tempest-text-muted\"] = \"var(--tempest-gray-700)\";\n        tokens[\"--tempest-text-subtle\"] = \"var(--tempest-gray-600)\";\n    }\n}\n\n/**\n * Emit one status family (`--tempest-danger`, `-fg`, `-bg`, `-border`, `-solid`).\n *\n * `-fg` is the text shade over `-bg`, so it has to cross the ramp in opposite\n * directions per scheme; `-solid` stays the saturated fill used by badges.\n */\nfunction writeStatus(\n    tokens: Record<string, string>,\n    name: ThemeStatus,\n    scale: ColorScale,\n    scheme: \"light\" | \"dark\",\n): void {\n    if (scheme === \"light\") {\n        tokens[`--tempest-${name}`] = scale[700];\n        tokens[`--tempest-${name}-fg`] = scale[800];\n        tokens[`--tempest-${name}-bg`] = scale[50];\n        tokens[`--tempest-${name}-border`] = scale[200];\n        tokens[`--tempest-${name}-solid`] = scale[600];\n    } else {\n        tokens[`--tempest-${name}`] = scale[700];\n        tokens[`--tempest-${name}-fg`] = scale[700];\n        tokens[`--tempest-${name}-bg`] = scale[50];\n        tokens[`--tempest-${name}-border`] = scale[200];\n        tokens[`--tempest-${name}-solid`] = scale[500];\n    }\n}\n\nfunction renderBlock(selector: string, tokens: Record<string, string>): string {\n    const entries = Object.entries(tokens);\n    if (entries.length === 0) return \"\";\n    const body = entries.map(([name, value]) => `    ${name}: ${value};`).join(\"\\n\");\n    return `${selector} {\\n${body}\\n}`;\n}\n\n/**\n * Generate `--tempest-*` overrides from a small brand description.\n *\n * Only the families you pass are generated; everything else falls through to the\n * SDK's own tokens, so a theme stays a patch and not a fork of `colors.css`.\n *\n * @example\n * ```ts\n * import { applyTheme, createTheme } from \"tempest-react-sdk\";\n *\n * const theme = createTheme({\n *   primary: \"#7c3aed\",\n *   radius: \"lg\",\n *   chart: [\"#7c3aed\", \"#0ea5e9\", \"#22c55e\", \"#f59e0b\"],\n * });\n *\n * applyTheme(theme);\n * ```\n *\n * @param options - Brand colors plus optional radius / chart / focus-ring tuning.\n * @returns The light and dark token maps and the CSS text that carries them.\n */\nexport function createTheme(options: CreateThemeOptions = {}): GeneratedTheme {\n    const {\n        primary,\n        gray,\n        chart,\n        radius,\n        focusRingAlpha = 0.35,\n        selector = \":root\",\n        darkSelector = '[data-tempest-theme=\"dark\"]',\n    } = options;\n\n    const light: Record<string, string> = {};\n    const dark: Record<string, string> = {};\n\n    if (primary) {\n        const lightScale = createColorScale(primary, \"light\");\n        const darkScale = createColorScale(primary, \"dark\");\n        writeScale(light, \"primary\", lightScale);\n        writeScale(dark, \"primary\", darkScale);\n        writePrimaryAliases(light, lightScale, \"light\", focusRingAlpha);\n        writePrimaryAliases(dark, darkScale, \"dark\", focusRingAlpha);\n    }\n\n    if (gray) {\n        const lightScale = createColorScale(gray, \"light\");\n        const darkScale = createColorScale(gray, \"dark\");\n        writeScale(light, \"gray\", lightScale);\n        writeScale(dark, \"gray\", darkScale);\n        writeNeutralAliases(light, lightScale, \"light\");\n        writeNeutralAliases(dark, darkScale, \"dark\");\n    }\n\n    for (const status of [\"success\", \"warning\", \"danger\", \"info\"] as const) {\n        const value = options[status];\n        if (!value) continue;\n        writeStatus(light, status, createColorScale(value, \"light\"), \"light\");\n        writeStatus(dark, status, createColorScale(value, \"dark\"), \"dark\");\n    }\n\n    if (chart?.length) {\n        chart.forEach((color, index) => {\n            light[`--tempest-chart-${index + 1}`] = color;\n        });\n    }\n\n    if (radius) {\n        const steps = typeof radius === \"string\" ? RADIUS_PRESETS[radius] : radius;\n        for (const [step, value] of Object.entries(steps)) {\n            light[`--tempest-radius-${step}`] = value;\n        }\n    }\n\n    const css = [renderBlock(selector, light), renderBlock(darkSelector, dark)]\n        .filter(Boolean)\n        .join(\"\\n\\n\");\n\n    return { light, dark, css };\n}\n\n/**\n * Contrast ratio of `--tempest-primary-foreground` over the brand color.\n *\n * Exposed so an app (or a test) can assert its own brand clears WCAG AA (4.5) for\n * body text or AA-large (3.0) for button labels, instead of trusting the pick.\n *\n * @param options - The same input given to {@link createTheme}.\n * @returns The ratio, or `null` when no `primary` was provided.\n */\nexport function themeContrast(options: CreateThemeOptions): number | null {\n    if (!options.primary) return null;\n    const scale = createColorScale(options.primary, \"light\");\n    return contrastRatio(scale[500], readableForeground(scale[500]));\n}\n"],"mappings":"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"}

package/dist/theme/create-theme.js

@@ -0,0 +1,135 @@
+import { contrastRatio as e, createColorScale as t, hexToRgbaString as n, readableForeground as r } from "./color.js";
+//#region src/theme/create-theme.ts
+var i = {
+	none: {
+		xs: "0",
+		sm: "0",
+		md: "0",
+		lg: "0",
+		xl: "0",
+		"2xl": "0"
+	},
+	sm: {
+		xs: "1px",
+		sm: "2px",
+		md: "4px",
+		lg: "6px",
+		xl: "8px",
+		"2xl": "12px"
+	},
+	md: {
+		xs: "2px",
+		sm: "4px",
+		md: "8px",
+		lg: "12px",
+		xl: "16px",
+		"2xl": "24px"
+	},
+	lg: {
+		xs: "4px",
+		sm: "6px",
+		md: "12px",
+		lg: "16px",
+		xl: "22px",
+		"2xl": "32px"
+	},
+	xl: {
+		xs: "6px",
+		sm: "10px",
+		md: "16px",
+		lg: "24px",
+		xl: "32px",
+		"2xl": "44px"
+	},
+	full: {
+		xs: "4px",
+		sm: "8px",
+		md: "9999px",
+		lg: "9999px",
+		xl: "9999px",
+		"2xl": "9999px"
+	}
+}, a = [
+	50,
+	100,
+	200,
+	300,
+	400,
+	500,
+	600,
+	700,
+	800,
+	900
+];
+function o(e, t, n) {
+	for (let r of a) e[`--tempest-${t}-${r}`] = n[r];
+}
+var s = 4.5;
+function c(t, n, r) {
+	for (let i of r) if (e(t[n], t[i]) >= s) return i;
+	return r[r.length - 1];
+}
+function l(e, t, i, a) {
+	e["--tempest-primary"] = "var(--tempest-primary-500)", i === "light" ? (e["--tempest-primary-hover"] = "var(--tempest-primary-600)", e["--tempest-primary-active"] = "var(--tempest-primary-700)", e["--tempest-primary-soft"] = "var(--tempest-primary-50)", e["--tempest-primary-soft-hover"] = "var(--tempest-primary-100)", e["--tempest-primary-on-soft"] = `var(--tempest-primary-${c(t, 50, [
+		600,
+		700,
+		800,
+		900
+	])})`) : (e["--tempest-primary-hover"] = "var(--tempest-primary-400)", e["--tempest-primary-active"] = "var(--tempest-primary-300)", e["--tempest-primary-soft"] = "var(--tempest-primary-100)", e["--tempest-primary-soft-hover"] = "var(--tempest-primary-200)", e["--tempest-primary-on-soft"] = `var(--tempest-primary-${c(t, 100, [
+		700,
+		800,
+		900
+	])})`);
+	let o = r(t[500]);
+	e["--tempest-primary-foreground"] = o, e["--tempest-text-on-primary"] = o, e["--tempest-focus-ring-color"] = n(t[500], a);
+}
+function u(e, t, n) {
+	n === "light" ? (e["--tempest-bg"] = "#ffffff", e["--tempest-surface"] = "var(--tempest-gray-50)", e["--tempest-surface-2"] = "var(--tempest-gray-100)", e["--tempest-surface-3"] = "var(--tempest-gray-200)", e["--tempest-border"] = "var(--tempest-gray-200)", e["--tempest-border-strong"] = "var(--tempest-gray-300)", e["--tempest-text"] = "var(--tempest-gray-900)", e["--tempest-text-muted"] = "var(--tempest-gray-600)", e["--tempest-text-subtle"] = "var(--tempest-gray-500)") : (e["--tempest-bg"] = t[50], e["--tempest-surface"] = "var(--tempest-gray-100)", e["--tempest-surface-2"] = "var(--tempest-gray-200)", e["--tempest-surface-3"] = "var(--tempest-gray-300)", e["--tempest-border"] = "var(--tempest-gray-300)", e["--tempest-border-strong"] = "var(--tempest-gray-400)", e["--tempest-text"] = "var(--tempest-gray-900)", e["--tempest-text-muted"] = "var(--tempest-gray-700)", e["--tempest-text-subtle"] = "var(--tempest-gray-600)");
+}
+function d(e, t, n, r) {
+	r === "light" ? (e[`--tempest-${t}`] = n[700], e[`--tempest-${t}-fg`] = n[800], e[`--tempest-${t}-bg`] = n[50], e[`--tempest-${t}-border`] = n[200], e[`--tempest-${t}-solid`] = n[600]) : (e[`--tempest-${t}`] = n[700], e[`--tempest-${t}-fg`] = n[700], e[`--tempest-${t}-bg`] = n[50], e[`--tempest-${t}-border`] = n[200], e[`--tempest-${t}-solid`] = n[500]);
+}
+function f(e, t) {
+	let n = Object.entries(t);
+	return n.length === 0 ? "" : `${e} {\n${n.map(([e, t]) => `    ${e}: ${t};`).join("\n")}\n}`;
+}
+function p(e = {}) {
+	let { primary: n, gray: r, chart: a, radius: s, focusRingAlpha: c = .35, selector: p = ":root", darkSelector: m = "[data-tempest-theme=\"dark\"]" } = e, h = {}, g = {};
+	if (n) {
+		let e = t(n, "light"), r = t(n, "dark");
+		o(h, "primary", e), o(g, "primary", r), l(h, e, "light", c), l(g, r, "dark", c);
+	}
+	if (r) {
+		let e = t(r, "light"), n = t(r, "dark");
+		o(h, "gray", e), o(g, "gray", n), u(h, e, "light"), u(g, n, "dark");
+	}
+	for (let n of [
+		"success",
+		"warning",
+		"danger",
+		"info"
+	]) {
+		let r = e[n];
+		r && (d(h, n, t(r, "light"), "light"), d(g, n, t(r, "dark"), "dark"));
+	}
+	if (a?.length && a.forEach((e, t) => {
+		h[`--tempest-chart-${t + 1}`] = e;
+	}), s) {
+		let e = typeof s == "string" ? i[s] : s;
+		for (let [t, n] of Object.entries(e)) h[`--tempest-radius-${t}`] = n;
+	}
+	return {
+		light: h,
+		dark: g,
+		css: [f(p, h), f(m, g)].filter(Boolean).join("\n\n")
+	};
+}
+function m(n) {
+	if (!n.primary) return null;
+	let i = t(n.primary, "light");
+	return e(i[500], r(i[500]));
+}
+//#endregion
+export { p as createTheme, m as themeContrast };
+
+//# sourceMappingURL=create-theme.js.map

package/dist/theme/create-theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"create-theme.js","names":[],"sources":["../../src/theme/create-theme.ts"],"sourcesContent":["/**\n * Theme factory: turns a handful of brand colors into the full set of\n * `--tempest-*` token overrides, for both light and dark.\n *\n * Rebranding used to mean hand-writing ~167 custom properties (and getting the\n * dark ramp inversion right by hand). `createTheme({ primary: \"#7c3aed\" })`\n * emits the same thing, derived in OKLCH so the ramp stays perceptually even.\n */\nimport {\n    contrastRatio,\n    createColorScale,\n    hexToRgbaString,\n    readableForeground,\n    type ColorScale,\n    type ScaleStep,\n} from \"./color\";\n\n/** Radius presets, applied to the whole `--tempest-radius-*` family at once. */\nexport type ThemeRadius = \"none\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"full\";\n\n/** Status token families that {@link createTheme} can regenerate. */\nexport type ThemeStatus = \"success\" | \"warning\" | \"danger\" | \"info\";\n\n/** Input for {@link createTheme}. Every field is optional — omitted families keep the built-in tokens. */\nexport interface CreateThemeOptions {\n    /** Brand color, used as the `500` step of the primary scale. */\n    primary?: string;\n    /** Neutral color, used as the `500` step of the gray scale (surfaces, borders, text). */\n    gray?: string;\n    /** Success color (`--tempest-success*`). */\n    success?: string;\n    /** Warning color (`--tempest-warning*`). */\n    warning?: string;\n    /** Danger color (`--tempest-danger*`). */\n    danger?: string;\n    /** Info color (`--tempest-info*`). */\n    info?: string;\n    /**\n     * Categorical series colors for `tempest-react-sdk/charts`, in cycle order.\n     * Written to `--tempest-chart-1` … `--tempest-chart-N`, so charts follow the\n     * theme instead of a hardcoded palette.\n     */\n    chart?: string[];\n    /** Corner radius scale. A preset name, or explicit per-step values. */\n    radius?: ThemeRadius | Partial<Record<\"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\", string>>;\n    /** Alpha of `--tempest-focus-ring-color`, derived from the brand color. Default `0.35`. */\n    focusRingAlpha?: number;\n    /** Selector the light tokens are written under. Default `\":root\"`. */\n    selector?: string;\n    /** Selector the dark tokens are written under. Default `'[data-tempest-theme=\"dark\"]'`. */\n    darkSelector?: string;\n}\n\n/** A generated theme: token maps per color scheme, plus the CSS text that carries them. */\nexport interface GeneratedTheme {\n    /** Light-scheme custom properties, without the leading `--`-less names (keys include `--`). */\n    light: Record<string, string>;\n    /** Dark-scheme custom properties. */\n    dark: Record<string, string>;\n    /** Both blocks rendered as CSS, ready for {@link applyTheme} or a stylesheet. */\n    css: string;\n}\n\nconst RADIUS_PRESETS: Record<ThemeRadius, Record<string, string>> = {\n    none: { xs: \"0\", sm: \"0\", md: \"0\", lg: \"0\", xl: \"0\", \"2xl\": \"0\" },\n    sm: { xs: \"1px\", sm: \"2px\", md: \"4px\", lg: \"6px\", xl: \"8px\", \"2xl\": \"12px\" },\n    md: { xs: \"2px\", sm: \"4px\", md: \"8px\", lg: \"12px\", xl: \"16px\", \"2xl\": \"24px\" },\n    lg: { xs: \"4px\", sm: \"6px\", md: \"12px\", lg: \"16px\", xl: \"22px\", \"2xl\": \"32px\" },\n    xl: { xs: \"6px\", sm: \"10px\", md: \"16px\", lg: \"24px\", xl: \"32px\", \"2xl\": \"44px\" },\n    full: { xs: \"4px\", sm: \"8px\", md: \"9999px\", lg: \"9999px\", xl: \"9999px\", \"2xl\": \"9999px\" },\n};\n\nconst SCALE_STEPS: ScaleStep[] = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];\n\nfunction writeScale(tokens: Record<string, string>, name: string, scale: ColorScale): void {\n    for (const step of SCALE_STEPS) {\n        tokens[`--tempest-${name}-${step}`] = scale[step];\n    }\n}\n\n/** Minimum contrast for body text, WCAG 2.x AA. */\nconst AA_TEXT_CONTRAST = 4.5;\n\n/**\n * Choose the ramp step for text sitting on the soft tint.\n *\n * A fixed step does not survive an arbitrary brand color: the built-in blue only\n * reaches 4.37:1 at `500` over its own `50` tint, and a generated emerald lands\n * at 4.41:1 at `600` — both fail AA for body text by a hair. So the step is\n * picked by measuring, walking away from the tint until it clears AA, and\n * falling back to the most extreme candidate when even that cannot (a very light\n * or very desaturated brand).\n *\n * @param scale - The generated ramp.\n * @param softStep - Step used as `--tempest-primary-soft`.\n * @param candidates - Steps to try, in order of preference.\n * @returns The first candidate clearing {@link AA_TEXT_CONTRAST}, else the last.\n */\nfunction pickOnSoftStep(\n    scale: ColorScale,\n    softStep: ScaleStep,\n    candidates: ScaleStep[],\n): ScaleStep {\n    for (const step of candidates) {\n        if (contrastRatio(scale[softStep], scale[step]) >= AA_TEXT_CONTRAST) return step;\n    }\n    return candidates[candidates.length - 1];\n}\n\n/**\n * Emit the primary aliases for one scheme.\n *\n * The dark scheme walks the ramp the other way (hover is *lighter*, the soft\n * tint is a dark shade, and readable text on that tint is a light shade) — the\n * same inversion the built-in `colors.css` dark block does by hand.\n */\nfunction writePrimaryAliases(\n    tokens: Record<string, string>,\n    scale: ColorScale,\n    scheme: \"light\" | \"dark\",\n    focusRingAlpha: number,\n): void {\n    tokens[\"--tempest-primary\"] = \"var(--tempest-primary-500)\";\n    if (scheme === \"light\") {\n        tokens[\"--tempest-primary-hover\"] = \"var(--tempest-primary-600)\";\n        tokens[\"--tempest-primary-active\"] = \"var(--tempest-primary-700)\";\n        tokens[\"--tempest-primary-soft\"] = \"var(--tempest-primary-50)\";\n        tokens[\"--tempest-primary-soft-hover\"] = \"var(--tempest-primary-100)\";\n        tokens[\"--tempest-primary-on-soft\"] =\n            `var(--tempest-primary-${pickOnSoftStep(scale, 50, [600, 700, 800, 900])})`;\n    } else {\n        tokens[\"--tempest-primary-hover\"] = \"var(--tempest-primary-400)\";\n        tokens[\"--tempest-primary-active\"] = \"var(--tempest-primary-300)\";\n        tokens[\"--tempest-primary-soft\"] = \"var(--tempest-primary-100)\";\n        tokens[\"--tempest-primary-soft-hover\"] = \"var(--tempest-primary-200)\";\n        tokens[\"--tempest-primary-on-soft\"] =\n            `var(--tempest-primary-${pickOnSoftStep(scale, 100, [700, 800, 900])})`;\n    }\n\n    const foreground = readableForeground(scale[500]);\n    tokens[\"--tempest-primary-foreground\"] = foreground;\n    tokens[\"--tempest-text-on-primary\"] = foreground;\n    tokens[\"--tempest-focus-ring-color\"] = hexToRgbaString(scale[500], focusRingAlpha);\n}\n\n/**\n * Emit the neutral surface/border/text aliases from a generated gray scale.\n *\n * `--tempest-bg` is pushed past the ramp on purpose: pure white in light mode and\n * a shade darker than `gray-50` in dark mode, so a raised surface still reads as\n * raised against the page.\n */\nfunction writeNeutralAliases(\n    tokens: Record<string, string>,\n    scale: ColorScale,\n    scheme: \"light\" | \"dark\",\n): void {\n    if (scheme === \"light\") {\n        tokens[\"--tempest-bg\"] = \"#ffffff\";\n        tokens[\"--tempest-surface\"] = \"var(--tempest-gray-50)\";\n        tokens[\"--tempest-surface-2\"] = \"var(--tempest-gray-100)\";\n        tokens[\"--tempest-surface-3\"] = \"var(--tempest-gray-200)\";\n        tokens[\"--tempest-border\"] = \"var(--tempest-gray-200)\";\n        tokens[\"--tempest-border-strong\"] = \"var(--tempest-gray-300)\";\n        tokens[\"--tempest-text\"] = \"var(--tempest-gray-900)\";\n        tokens[\"--tempest-text-muted\"] = \"var(--tempest-gray-600)\";\n        tokens[\"--tempest-text-subtle\"] = \"var(--tempest-gray-500)\";\n    } else {\n        tokens[\"--tempest-bg\"] = scale[50];\n        tokens[\"--tempest-surface\"] = \"var(--tempest-gray-100)\";\n        tokens[\"--tempest-surface-2\"] = \"var(--tempest-gray-200)\";\n        tokens[\"--tempest-surface-3\"] = \"var(--tempest-gray-300)\";\n        tokens[\"--tempest-border\"] = \"var(--tempest-gray-300)\";\n        tokens[\"--tempest-border-strong\"] = \"var(--tempest-gray-400)\";\n        tokens[\"--tempest-text\"] = \"var(--tempest-gray-900)\";\n        tokens[\"--tempest-text-muted\"] = \"var(--tempest-gray-700)\";\n        tokens[\"--tempest-text-subtle\"] = \"var(--tempest-gray-600)\";\n    }\n}\n\n/**\n * Emit one status family (`--tempest-danger`, `-fg`, `-bg`, `-border`, `-solid`).\n *\n * `-fg` is the text shade over `-bg`, so it has to cross the ramp in opposite\n * directions per scheme; `-solid` stays the saturated fill used by badges.\n */\nfunction writeStatus(\n    tokens: Record<string, string>,\n    name: ThemeStatus,\n    scale: ColorScale,\n    scheme: \"light\" | \"dark\",\n): void {\n    if (scheme === \"light\") {\n        tokens[`--tempest-${name}`] = scale[700];\n        tokens[`--tempest-${name}-fg`] = scale[800];\n        tokens[`--tempest-${name}-bg`] = scale[50];\n        tokens[`--tempest-${name}-border`] = scale[200];\n        tokens[`--tempest-${name}-solid`] = scale[600];\n    } else {\n        tokens[`--tempest-${name}`] = scale[700];\n        tokens[`--tempest-${name}-fg`] = scale[700];\n        tokens[`--tempest-${name}-bg`] = scale[50];\n        tokens[`--tempest-${name}-border`] = scale[200];\n        tokens[`--tempest-${name}-solid`] = scale[500];\n    }\n}\n\nfunction renderBlock(selector: string, tokens: Record<string, string>): string {\n    const entries = Object.entries(tokens);\n    if (entries.length === 0) return \"\";\n    const body = entries.map(([name, value]) => `    ${name}: ${value};`).join(\"\\n\");\n    return `${selector} {\\n${body}\\n}`;\n}\n\n/**\n * Generate `--tempest-*` overrides from a small brand description.\n *\n * Only the families you pass are generated; everything else falls through to the\n * SDK's own tokens, so a theme stays a patch and not a fork of `colors.css`.\n *\n * @example\n * ```ts\n * import { applyTheme, createTheme } from \"tempest-react-sdk\";\n *\n * const theme = createTheme({\n *   primary: \"#7c3aed\",\n *   radius: \"lg\",\n *   chart: [\"#7c3aed\", \"#0ea5e9\", \"#22c55e\", \"#f59e0b\"],\n * });\n *\n * applyTheme(theme);\n * ```\n *\n * @param options - Brand colors plus optional radius / chart / focus-ring tuning.\n * @returns The light and dark token maps and the CSS text that carries them.\n */\nexport function createTheme(options: CreateThemeOptions = {}): GeneratedTheme {\n    const {\n        primary,\n        gray,\n        chart,\n        radius,\n        focusRingAlpha = 0.35,\n        selector = \":root\",\n        darkSelector = '[data-tempest-theme=\"dark\"]',\n    } = options;\n\n    const light: Record<string, string> = {};\n    const dark: Record<string, string> = {};\n\n    if (primary) {\n        const lightScale = createColorScale(primary, \"light\");\n        const darkScale = createColorScale(primary, \"dark\");\n        writeScale(light, \"primary\", lightScale);\n        writeScale(dark, \"primary\", darkScale);\n        writePrimaryAliases(light, lightScale, \"light\", focusRingAlpha);\n        writePrimaryAliases(dark, darkScale, \"dark\", focusRingAlpha);\n    }\n\n    if (gray) {\n        const lightScale = createColorScale(gray, \"light\");\n        const darkScale = createColorScale(gray, \"dark\");\n        writeScale(light, \"gray\", lightScale);\n        writeScale(dark, \"gray\", darkScale);\n        writeNeutralAliases(light, lightScale, \"light\");\n        writeNeutralAliases(dark, darkScale, \"dark\");\n    }\n\n    for (const status of [\"success\", \"warning\", \"danger\", \"info\"] as const) {\n        const value = options[status];\n        if (!value) continue;\n        writeStatus(light, status, createColorScale(value, \"light\"), \"light\");\n        writeStatus(dark, status, createColorScale(value, \"dark\"), \"dark\");\n    }\n\n    if (chart?.length) {\n        chart.forEach((color, index) => {\n            light[`--tempest-chart-${index + 1}`] = color;\n        });\n    }\n\n    if (radius) {\n        const steps = typeof radius === \"string\" ? RADIUS_PRESETS[radius] : radius;\n        for (const [step, value] of Object.entries(steps)) {\n            light[`--tempest-radius-${step}`] = value;\n        }\n    }\n\n    const css = [renderBlock(selector, light), renderBlock(darkSelector, dark)]\n        .filter(Boolean)\n        .join(\"\\n\\n\");\n\n    return { light, dark, css };\n}\n\n/**\n * Contrast ratio of `--tempest-primary-foreground` over the brand color.\n *\n * Exposed so an app (or a test) can assert its own brand clears WCAG AA (4.5) for\n * body text or AA-large (3.0) for button labels, instead of trusting the pick.\n *\n * @param options - The same input given to {@link createTheme}.\n * @returns The ratio, or `null` when no `primary` was provided.\n */\nexport function themeContrast(options: CreateThemeOptions): number | null {\n    if (!options.primary) return null;\n    const scale = createColorScale(options.primary, \"light\");\n    return contrastRatio(scale[500], readableForeground(scale[500]));\n}\n"],"mappings":"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"}

package/dist/theme/initial-theme.cjs

@@ -1,11 +1,11 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});function d(e={}){const{storageKey:r="tempest-theme",defaultTheme:t="system"}=e;if(typeof window>"u")return t==="dark"?"dark":"light";let a=null;try{a=window.localStorage.getItem(r)}catch{a=null}const o=a??t;return o==="dark"||o==="light"?o:window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"}function m(e={}){const r=e.storageKey??"tempest-theme",t=e.defaultTheme??"system";return`
+function e(e={}){let{storageKey:t=`tempest-theme`,defaultTheme:n=`system`}=e;if(typeof window>`u`)return n===`dark`?`dark`:`light`;let r;try{r=window.localStorage.getItem(t)}catch{r=null}let i=r??n;return i===`dark`||i===`light`?i:window.matchMedia(`(prefers-color-scheme: dark)`).matches?`dark`:`light`}function t(e={}){let t=e.storageKey??`tempest-theme`,n=e.defaultTheme??`system`;return`
 (function(){try{
-  var key=${JSON.stringify(r)};
-  var def=${JSON.stringify(t)};
+  var key=${JSON.stringify(t)};
+  var def=${JSON.stringify(n)};
   var stored=localStorage.getItem(key);
   var mode=stored||def;
   var resolved=mode==="dark"||mode==="light"?mode:(matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");
   document.documentElement.setAttribute("data-tempest-theme",resolved);
 }catch(e){}})();
-`.trim()}exports.getInitialTheme=d;exports.themeInitScript=m;
-//# sourceMappingURL=initial-theme.cjs.map
+`.trim()}exports.getInitialTheme=e,exports.themeInitScript=t;
+//# sourceMappingURL=initial-theme.cjs.map

package/dist/theme/initial-theme.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"initial-theme.cjs","sources":["../../src/theme/initial-theme.ts"],"sourcesContent":["import type { ResolvedTheme, ThemeMode } from \"./types\";\n\nexport interface GetInitialThemeOptions {\n    /** localStorage key. Default: `\"tempest-theme\"`. */\n    storageKey?: string;\n    /** Theme used when nothing is stored and the user has no system preference. */\n    defaultTheme?: ThemeMode;\n}\n\n/**\n * Inline-safe theme resolution intended for early bootstrap (e.g. inside the\n * `<head>` script that prevents the flash of incorrect theme). Reads from\n * localStorage and falls back to `prefers-color-scheme`.\n */\nexport function getInitialTheme(options: GetInitialThemeOptions = {}): ResolvedTheme {\n    const { storageKey = \"tempest-theme\", defaultTheme = \"system\" } = options;\n\n    if (typeof window === \"undefined\") {\n        return defaultTheme === \"dark\" ? \"dark\" : \"light\";\n    }\n\n    let stored: ThemeMode | null = null;\n    try {\n        stored = window.localStorage.getItem(storageKey) as ThemeMode | null;\n    } catch {\n        stored = null;\n    }\n\n    const mode: ThemeMode = stored ?? defaultTheme;\n    if (mode === \"dark\" || mode === \"light\") return mode;\n\n    return window.matchMedia(\"(prefers-color-scheme: dark)\").matches ? \"dark\" : \"light\";\n}\n\n/**\n * Plain HTML snippet that sets `data-tempest-theme` on `<html>` before React\n * hydrates. Inline this in `<head>` to avoid a flash of the wrong theme on\n * first paint.\n *\n * @example\n * <script dangerouslySetInnerHTML={{ __html: themeInitScript() }} />\n */\nexport function themeInitScript(options: GetInitialThemeOptions = {}): string {\n    const storageKey = options.storageKey ?? \"tempest-theme\";\n    const defaultTheme = options.defaultTheme ?? \"system\";\n    return `\n(function(){try{\n  var key=${JSON.stringify(storageKey)};\n  var def=${JSON.stringify(defaultTheme)};\n  var stored=localStorage.getItem(key);\n  var mode=stored||def;\n  var resolved=mode===\"dark\"||mode===\"light\"?mode:(matchMedia(\"(prefers-color-scheme: dark)\").matches?\"dark\":\"light\");\n  document.documentElement.setAttribute(\"data-tempest-theme\",resolved);\n}catch(e){}})();\n`.trim();\n}\n"],"names":["getInitialTheme","options","storageKey","defaultTheme","stored","mode","themeInitScript"],"mappings":"gFAcO,SAASA,EAAgBC,EAAkC,GAAmB,CACjF,KAAM,CAAE,WAAAC,EAAa,gBAAiB,aAAAC,EAAe,UAAaF,EAElE,GAAI,OAAO,OAAW,IAClB,OAAOE,IAAiB,OAAS,OAAS,QAG9C,IAAIC,EAA2B,KAC/B,GAAI,CACAA,EAAS,OAAO,aAAa,QAAQF,CAAU,CACnD,MAAQ,CACJE,EAAS,IACb,CAEA,MAAMC,EAAkBD,GAAUD,EAClC,OAAIE,IAAS,QAAUA,IAAS,QAAgBA,EAEzC,OAAO,WAAW,8BAA8B,EAAE,QAAU,OAAS,OAChF,CAUO,SAASC,EAAgBL,EAAkC,GAAY,CAC1E,MAAMC,EAAaD,EAAQ,YAAc,gBACnCE,EAAeF,EAAQ,cAAgB,SAC7C,MAAO;AAAA;AAAA,YAEC,KAAK,UAAUC,CAAU,CAAC;AAAA,YAC1B,KAAK,UAAUC,CAAY,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMtC,KAAA,CACF"}
+{"version":3,"file":"initial-theme.cjs","names":[],"sources":["../../src/theme/initial-theme.ts"],"sourcesContent":["import type { ResolvedTheme, ThemeMode } from \"./types\";\n\nexport interface GetInitialThemeOptions {\n    /** localStorage key. Default: `\"tempest-theme\"`. */\n    storageKey?: string;\n    /** Theme used when nothing is stored and the user has no system preference. */\n    defaultTheme?: ThemeMode;\n}\n\n/**\n * Inline-safe theme resolution intended for early bootstrap (e.g. inside the\n * `<head>` script that prevents the flash of incorrect theme). Reads from\n * localStorage and falls back to `prefers-color-scheme`.\n */\nexport function getInitialTheme(options: GetInitialThemeOptions = {}): ResolvedTheme {\n    const { storageKey = \"tempest-theme\", defaultTheme = \"system\" } = options;\n\n    if (typeof window === \"undefined\") {\n        return defaultTheme === \"dark\" ? \"dark\" : \"light\";\n    }\n\n    let stored: ThemeMode | null;\n    try {\n        stored = window.localStorage.getItem(storageKey) as ThemeMode | null;\n    } catch {\n        stored = null;\n    }\n\n    const mode: ThemeMode = stored ?? defaultTheme;\n    if (mode === \"dark\" || mode === \"light\") return mode;\n\n    return window.matchMedia(\"(prefers-color-scheme: dark)\").matches ? \"dark\" : \"light\";\n}\n\n/**\n * Plain HTML snippet that sets `data-tempest-theme` on `<html>` before React\n * hydrates. Inline this in `<head>` to avoid a flash of the wrong theme on\n * first paint.\n *\n * @example\n * <script dangerouslySetInnerHTML={{ __html: themeInitScript() }} />\n */\nexport function themeInitScript(options: GetInitialThemeOptions = {}): string {\n    const storageKey = options.storageKey ?? \"tempest-theme\";\n    const defaultTheme = options.defaultTheme ?? \"system\";\n    return `\n(function(){try{\n  var key=${JSON.stringify(storageKey)};\n  var def=${JSON.stringify(defaultTheme)};\n  var stored=localStorage.getItem(key);\n  var mode=stored||def;\n  var resolved=mode===\"dark\"||mode===\"light\"?mode:(matchMedia(\"(prefers-color-scheme: dark)\").matches?\"dark\":\"light\");\n  document.documentElement.setAttribute(\"data-tempest-theme\",resolved);\n}catch(e){}})();\n`.trim();\n}\n"],"mappings":"AAcA,SAAgB,EAAgB,EAAkC,CAAC,EAAkB,CACjF,GAAM,CAAE,aAAa,gBAAiB,eAAe,UAAa,EAElE,GAAI,OAAO,OAAW,IAClB,OAAO,IAAiB,OAAS,OAAS,QAG9C,IAAI,EACJ,GAAI,CACA,EAAS,OAAO,aAAa,QAAQ,CAAU,CACnD,MAAQ,CACJ,EAAS,IACb,CAEA,IAAM,EAAkB,GAAU,EAGlC,OAFI,IAAS,QAAU,IAAS,QAAgB,EAEzC,OAAO,WAAW,8BAA8B,CAAC,CAAC,QAAU,OAAS,OAChF,CAUA,SAAgB,EAAgB,EAAkC,CAAC,EAAW,CAC1E,IAAM,EAAa,EAAQ,YAAc,gBACnC,EAAe,EAAQ,cAAgB,SAC7C,MAAO;;YAEC,KAAK,UAAU,CAAU,EAAE;YAC3B,KAAK,UAAU,CAAY,EAAE;;;;;;EAMvC,KAAK,CACP"}

package/dist/theme/initial-theme.js

@@ -1,22 +1,22 @@
-function o(e = {}) {
-  const { storageKey: r = "tempest-theme", defaultTheme: t = "system" } = e;
-  if (typeof window > "u")
-    return t === "dark" ? "dark" : "light";
-  let a = null;
-  try {
-    a = window.localStorage.getItem(r);
-  } catch {
-    a = null;
-  }
-  const d = a ?? t;
-  return d === "dark" || d === "light" ? d : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+//#region src/theme/initial-theme.ts
+function e(e = {}) {
+	let { storageKey: t = "tempest-theme", defaultTheme: n = "system" } = e;
+	if (typeof window > "u") return n === "dark" ? "dark" : "light";
+	let r;
+	try {
+		r = window.localStorage.getItem(t);
+	} catch {
+		r = null;
+	}
+	let i = r ?? n;
+	return i === "dark" || i === "light" ? i : window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
 }
-function m(e = {}) {
-  const r = e.storageKey ?? "tempest-theme", t = e.defaultTheme ?? "system";
-  return `
+function t(e = {}) {
+	let t = e.storageKey ?? "tempest-theme", n = e.defaultTheme ?? "system";
+	return `
 (function(){try{
-  var key=${JSON.stringify(r)};
-  var def=${JSON.stringify(t)};
+  var key=${JSON.stringify(t)};
+  var def=${JSON.stringify(n)};
   var stored=localStorage.getItem(key);
   var mode=stored||def;
   var resolved=mode==="dark"||mode==="light"?mode:(matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light");
@@ -24,8 +24,7 @@ function m(e = {}) {
 }catch(e){}})();
 `.trim();
 }
-export {
-  o as getInitialTheme,
-  m as themeInitScript
-};
-//# sourceMappingURL=initial-theme.js.map
+//#endregion
+export { e as getInitialTheme, t as themeInitScript };
+
+//# sourceMappingURL=initial-theme.js.map

package/dist/theme/initial-theme.js.map

@@ -1 +1 @@
-{"version":3,"file":"initial-theme.js","sources":["../../src/theme/initial-theme.ts"],"sourcesContent":["import type { ResolvedTheme, ThemeMode } from \"./types\";\n\nexport interface GetInitialThemeOptions {\n    /** localStorage key. Default: `\"tempest-theme\"`. */\n    storageKey?: string;\n    /** Theme used when nothing is stored and the user has no system preference. */\n    defaultTheme?: ThemeMode;\n}\n\n/**\n * Inline-safe theme resolution intended for early bootstrap (e.g. inside the\n * `<head>` script that prevents the flash of incorrect theme). Reads from\n * localStorage and falls back to `prefers-color-scheme`.\n */\nexport function getInitialTheme(options: GetInitialThemeOptions = {}): ResolvedTheme {\n    const { storageKey = \"tempest-theme\", defaultTheme = \"system\" } = options;\n\n    if (typeof window === \"undefined\") {\n        return defaultTheme === \"dark\" ? \"dark\" : \"light\";\n    }\n\n    let stored: ThemeMode | null = null;\n    try {\n        stored = window.localStorage.getItem(storageKey) as ThemeMode | null;\n    } catch {\n        stored = null;\n    }\n\n    const mode: ThemeMode = stored ?? defaultTheme;\n    if (mode === \"dark\" || mode === \"light\") return mode;\n\n    return window.matchMedia(\"(prefers-color-scheme: dark)\").matches ? \"dark\" : \"light\";\n}\n\n/**\n * Plain HTML snippet that sets `data-tempest-theme` on `<html>` before React\n * hydrates. Inline this in `<head>` to avoid a flash of the wrong theme on\n * first paint.\n *\n * @example\n * <script dangerouslySetInnerHTML={{ __html: themeInitScript() }} />\n */\nexport function themeInitScript(options: GetInitialThemeOptions = {}): string {\n    const storageKey = options.storageKey ?? \"tempest-theme\";\n    const defaultTheme = options.defaultTheme ?? \"system\";\n    return `\n(function(){try{\n  var key=${JSON.stringify(storageKey)};\n  var def=${JSON.stringify(defaultTheme)};\n  var stored=localStorage.getItem(key);\n  var mode=stored||def;\n  var resolved=mode===\"dark\"||mode===\"light\"?mode:(matchMedia(\"(prefers-color-scheme: dark)\").matches?\"dark\":\"light\");\n  document.documentElement.setAttribute(\"data-tempest-theme\",resolved);\n}catch(e){}})();\n`.trim();\n}\n"],"names":["getInitialTheme","options","storageKey","defaultTheme","stored","mode","themeInitScript"],"mappings":"AAcO,SAASA,EAAgBC,IAAkC,IAAmB;AACjF,QAAM,EAAE,YAAAC,IAAa,iBAAiB,cAAAC,IAAe,aAAaF;AAElE,MAAI,OAAO,SAAW;AAClB,WAAOE,MAAiB,SAAS,SAAS;AAG9C,MAAIC,IAA2B;AAC/B,MAAI;AACA,IAAAA,IAAS,OAAO,aAAa,QAAQF,CAAU;AAAA,EACnD,QAAQ;AACJ,IAAAE,IAAS;AAAA,EACb;AAEA,QAAMC,IAAkBD,KAAUD;AAClC,SAAIE,MAAS,UAAUA,MAAS,UAAgBA,IAEzC,OAAO,WAAW,8BAA8B,EAAE,UAAU,SAAS;AAChF;AAUO,SAASC,EAAgBL,IAAkC,IAAY;AAC1E,QAAMC,IAAaD,EAAQ,cAAc,iBACnCE,IAAeF,EAAQ,gBAAgB;AAC7C,SAAO;AAAA;AAAA,YAEC,KAAK,UAAUC,CAAU,CAAC;AAAA,YAC1B,KAAK,UAAUC,CAAY,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMtC,KAAA;AACF;"}
+{"version":3,"file":"initial-theme.js","names":[],"sources":["../../src/theme/initial-theme.ts"],"sourcesContent":["import type { ResolvedTheme, ThemeMode } from \"./types\";\n\nexport interface GetInitialThemeOptions {\n    /** localStorage key. Default: `\"tempest-theme\"`. */\n    storageKey?: string;\n    /** Theme used when nothing is stored and the user has no system preference. */\n    defaultTheme?: ThemeMode;\n}\n\n/**\n * Inline-safe theme resolution intended for early bootstrap (e.g. inside the\n * `<head>` script that prevents the flash of incorrect theme). Reads from\n * localStorage and falls back to `prefers-color-scheme`.\n */\nexport function getInitialTheme(options: GetInitialThemeOptions = {}): ResolvedTheme {\n    const { storageKey = \"tempest-theme\", defaultTheme = \"system\" } = options;\n\n    if (typeof window === \"undefined\") {\n        return defaultTheme === \"dark\" ? \"dark\" : \"light\";\n    }\n\n    let stored: ThemeMode | null;\n    try {\n        stored = window.localStorage.getItem(storageKey) as ThemeMode | null;\n    } catch {\n        stored = null;\n    }\n\n    const mode: ThemeMode = stored ?? defaultTheme;\n    if (mode === \"dark\" || mode === \"light\") return mode;\n\n    return window.matchMedia(\"(prefers-color-scheme: dark)\").matches ? \"dark\" : \"light\";\n}\n\n/**\n * Plain HTML snippet that sets `data-tempest-theme` on `<html>` before React\n * hydrates. Inline this in `<head>` to avoid a flash of the wrong theme on\n * first paint.\n *\n * @example\n * <script dangerouslySetInnerHTML={{ __html: themeInitScript() }} />\n */\nexport function themeInitScript(options: GetInitialThemeOptions = {}): string {\n    const storageKey = options.storageKey ?? \"tempest-theme\";\n    const defaultTheme = options.defaultTheme ?? \"system\";\n    return `\n(function(){try{\n  var key=${JSON.stringify(storageKey)};\n  var def=${JSON.stringify(defaultTheme)};\n  var stored=localStorage.getItem(key);\n  var mode=stored||def;\n  var resolved=mode===\"dark\"||mode===\"light\"?mode:(matchMedia(\"(prefers-color-scheme: dark)\").matches?\"dark\":\"light\");\n  document.documentElement.setAttribute(\"data-tempest-theme\",resolved);\n}catch(e){}})();\n`.trim();\n}\n"],"mappings":";AAcA,SAAgB,EAAgB,IAAkC,CAAC,GAAkB;CACjF,IAAM,EAAE,gBAAa,iBAAiB,kBAAe,aAAa;CAElE,IAAI,OAAO,SAAW,KAClB,OAAO,MAAiB,SAAS,SAAS;CAG9C,IAAI;CACJ,IAAI;EACA,IAAS,OAAO,aAAa,QAAQ,CAAU;CACnD,QAAQ;EACJ,IAAS;CACb;CAEA,IAAM,IAAkB,KAAU;CAGlC,OAFI,MAAS,UAAU,MAAS,UAAgB,IAEzC,OAAO,WAAW,8BAA8B,CAAC,CAAC,UAAU,SAAS;AAChF;AAUA,SAAgB,EAAgB,IAAkC,CAAC,GAAW;CAC1E,IAAM,IAAa,EAAQ,cAAc,iBACnC,IAAe,EAAQ,gBAAgB;CAC7C,OAAO;;YAEC,KAAK,UAAU,CAAU,EAAE;YAC3B,KAAK,UAAU,CAAY,EAAE;;;;;;EAMvC,KAAK;AACP"}

package/dist/theme/theme-presets.cjs

@@ -0,0 +1,2 @@
+var e={tempest:{primary:`#0066ff`,gray:`#667085`,chart:[`#2563eb`,`#16a34a`,`#f59e0b`,`#7c3aed`,`#ec4899`,`#06b6d4`]},violet:{primary:`#7c3aed`,gray:`#6b7280`,chart:[`#7c3aed`,`#0ea5e9`,`#22c55e`,`#f59e0b`,`#ec4899`,`#14b8a6`]},emerald:{primary:`#059669`,gray:`#64748b`,chart:[`#059669`,`#0ea5e9`,`#f59e0b`,`#8b5cf6`,`#ef4444`,`#14b8a6`]},rose:{primary:`#e11d48`,gray:`#71717a`,chart:[`#e11d48`,`#7c3aed`,`#0ea5e9`,`#16a34a`,`#f59e0b`,`#06b6d4`]},slate:{primary:`#475569`,gray:`#64748b`,chart:[`#475569`,`#0ea5e9`,`#16a34a`,`#f59e0b`,`#a855f7`,`#06b6d4`]},amber:{primary:`#d97706`,gray:`#78716c`,chart:[`#d97706`,`#0284c7`,`#16a34a`,`#7c3aed`,`#dc2626`,`#0891b2`]}};function t(t){return e[t]}exports.getThemePreset=t,exports.themePresets=e;
+//# sourceMappingURL=theme-presets.cjs.map

package/dist/theme/theme-presets.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-presets.cjs","names":[],"sources":["../../src/theme/theme-presets.ts"],"sourcesContent":["/**\n * Ready-made brand descriptions for {@link createTheme}.\n *\n * Each preset is a plain {@link CreateThemeOptions} object — data, not CSS — so\n * an app can spread one and override a single field (`{ ...themePresets.violet,\n * radius: \"full\" }`) instead of forking a stylesheet. The chart arrays keep the\n * `/charts` module in the same family as the brand, which is the whole point of\n * `--tempest-chart-*`.\n */\nimport type { CreateThemeOptions } from \"./create-theme\";\n\n/** Name of a bundled preset. */\nexport type ThemePresetName = \"tempest\" | \"violet\" | \"emerald\" | \"rose\" | \"slate\" | \"amber\";\n\n/**\n * The bundled presets.\n *\n * `tempest` restates the SDK's own defaults — useful as a starting point to\n * tweak, and as the \"reset to default\" entry in a theme picker.\n */\nexport const themePresets: Record<ThemePresetName, CreateThemeOptions> = {\n    tempest: {\n        primary: \"#0066ff\",\n        gray: \"#667085\",\n        chart: [\"#2563eb\", \"#16a34a\", \"#f59e0b\", \"#7c3aed\", \"#ec4899\", \"#06b6d4\"],\n    },\n    violet: {\n        primary: \"#7c3aed\",\n        gray: \"#6b7280\",\n        chart: [\"#7c3aed\", \"#0ea5e9\", \"#22c55e\", \"#f59e0b\", \"#ec4899\", \"#14b8a6\"],\n    },\n    emerald: {\n        primary: \"#059669\",\n        gray: \"#64748b\",\n        chart: [\"#059669\", \"#0ea5e9\", \"#f59e0b\", \"#8b5cf6\", \"#ef4444\", \"#14b8a6\"],\n    },\n    rose: {\n        primary: \"#e11d48\",\n        gray: \"#71717a\",\n        chart: [\"#e11d48\", \"#7c3aed\", \"#0ea5e9\", \"#16a34a\", \"#f59e0b\", \"#06b6d4\"],\n    },\n    slate: {\n        primary: \"#475569\",\n        gray: \"#64748b\",\n        chart: [\"#475569\", \"#0ea5e9\", \"#16a34a\", \"#f59e0b\", \"#a855f7\", \"#06b6d4\"],\n    },\n    amber: {\n        primary: \"#d97706\",\n        gray: \"#78716c\",\n        chart: [\"#d97706\", \"#0284c7\", \"#16a34a\", \"#7c3aed\", \"#dc2626\", \"#0891b2\"],\n    },\n};\n\n/**\n * Look up a preset by name.\n *\n * @param name - Preset name.\n * @returns The preset options, or `undefined` when the name is unknown (so a\n *   value coming from `localStorage` or a query string cannot crash boot).\n */\nexport function getThemePreset(name: string): CreateThemeOptions | undefined {\n    return themePresets[name as ThemePresetName];\n}\n"],"mappings":"AAoBA,IAAa,EAA4D,CACrE,QAAS,CACL,QAAS,UACT,KAAM,UACN,MAAO,CAAC,UAAW,UAAW,UAAW,UAAW,UAAW,SAAS,CAC5E,EACA,OAAQ,CACJ,QAAS,UACT,KAAM,UACN,MAAO,CAAC,UAAW,UAAW,UAAW,UAAW,UAAW,SAAS,CAC5E,EACA,QAAS,CACL,QAAS,UACT,KAAM,UACN,MAAO,CAAC,UAAW,UAAW,UAAW,UAAW,UAAW,SAAS,CAC5E,EACA,KAAM,CACF,QAAS,UACT,KAAM,UACN,MAAO,CAAC,UAAW,UAAW,UAAW,UAAW,UAAW,SAAS,CAC5E,EACA,MAAO,CACH,QAAS,UACT,KAAM,UACN,MAAO,CAAC,UAAW,UAAW,UAAW,UAAW,UAAW,SAAS,CAC5E,EACA,MAAO,CACH,QAAS,UACT,KAAM,UACN,MAAO,CAAC,UAAW,UAAW,UAAW,UAAW,UAAW,SAAS,CAC5E,CACJ,EASA,SAAgB,EAAe,EAA8C,CACzE,OAAO,EAAa,EACxB"}

package/dist/theme/theme-presets.js

@@ -0,0 +1,82 @@
+//#region src/theme/theme-presets.ts
+var e = {
+	tempest: {
+		primary: "#0066ff",
+		gray: "#667085",
+		chart: [
+			"#2563eb",
+			"#16a34a",
+			"#f59e0b",
+			"#7c3aed",
+			"#ec4899",
+			"#06b6d4"
+		]
+	},
+	violet: {
+		primary: "#7c3aed",
+		gray: "#6b7280",
+		chart: [
+			"#7c3aed",
+			"#0ea5e9",
+			"#22c55e",
+			"#f59e0b",
+			"#ec4899",
+			"#14b8a6"
+		]
+	},
+	emerald: {
+		primary: "#059669",
+		gray: "#64748b",
+		chart: [
+			"#059669",
+			"#0ea5e9",
+			"#f59e0b",
+			"#8b5cf6",
+			"#ef4444",
+			"#14b8a6"
+		]
+	},
+	rose: {
+		primary: "#e11d48",
+		gray: "#71717a",
+		chart: [
+			"#e11d48",
+			"#7c3aed",
+			"#0ea5e9",
+			"#16a34a",
+			"#f59e0b",
+			"#06b6d4"
+		]
+	},
+	slate: {
+		primary: "#475569",
+		gray: "#64748b",
+		chart: [
+			"#475569",
+			"#0ea5e9",
+			"#16a34a",
+			"#f59e0b",
+			"#a855f7",
+			"#06b6d4"
+		]
+	},
+	amber: {
+		primary: "#d97706",
+		gray: "#78716c",
+		chart: [
+			"#d97706",
+			"#0284c7",
+			"#16a34a",
+			"#7c3aed",
+			"#dc2626",
+			"#0891b2"
+		]
+	}
+};
+function t(t) {
+	return e[t];
+}
+//#endregion
+export { t as getThemePreset, e as themePresets };
+
+//# sourceMappingURL=theme-presets.js.map

package/dist/theme/theme-presets.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-presets.js","names":[],"sources":["../../src/theme/theme-presets.ts"],"sourcesContent":["/**\n * Ready-made brand descriptions for {@link createTheme}.\n *\n * Each preset is a plain {@link CreateThemeOptions} object — data, not CSS — so\n * an app can spread one and override a single field (`{ ...themePresets.violet,\n * radius: \"full\" }`) instead of forking a stylesheet. The chart arrays keep the\n * `/charts` module in the same family as the brand, which is the whole point of\n * `--tempest-chart-*`.\n */\nimport type { CreateThemeOptions } from \"./create-theme\";\n\n/** Name of a bundled preset. */\nexport type ThemePresetName = \"tempest\" | \"violet\" | \"emerald\" | \"rose\" | \"slate\" | \"amber\";\n\n/**\n * The bundled presets.\n *\n * `tempest` restates the SDK's own defaults — useful as a starting point to\n * tweak, and as the \"reset to default\" entry in a theme picker.\n */\nexport const themePresets: Record<ThemePresetName, CreateThemeOptions> = {\n    tempest: {\n        primary: \"#0066ff\",\n        gray: \"#667085\",\n        chart: [\"#2563eb\", \"#16a34a\", \"#f59e0b\", \"#7c3aed\", \"#ec4899\", \"#06b6d4\"],\n    },\n    violet: {\n        primary: \"#7c3aed\",\n        gray: \"#6b7280\",\n        chart: [\"#7c3aed\", \"#0ea5e9\", \"#22c55e\", \"#f59e0b\", \"#ec4899\", \"#14b8a6\"],\n    },\n    emerald: {\n        primary: \"#059669\",\n        gray: \"#64748b\",\n        chart: [\"#059669\", \"#0ea5e9\", \"#f59e0b\", \"#8b5cf6\", \"#ef4444\", \"#14b8a6\"],\n    },\n    rose: {\n        primary: \"#e11d48\",\n        gray: \"#71717a\",\n        chart: [\"#e11d48\", \"#7c3aed\", \"#0ea5e9\", \"#16a34a\", \"#f59e0b\", \"#06b6d4\"],\n    },\n    slate: {\n        primary: \"#475569\",\n        gray: \"#64748b\",\n        chart: [\"#475569\", \"#0ea5e9\", \"#16a34a\", \"#f59e0b\", \"#a855f7\", \"#06b6d4\"],\n    },\n    amber: {\n        primary: \"#d97706\",\n        gray: \"#78716c\",\n        chart: [\"#d97706\", \"#0284c7\", \"#16a34a\", \"#7c3aed\", \"#dc2626\", \"#0891b2\"],\n    },\n};\n\n/**\n * Look up a preset by name.\n *\n * @param name - Preset name.\n * @returns The preset options, or `undefined` when the name is unknown (so a\n *   value coming from `localStorage` or a query string cannot crash boot).\n */\nexport function getThemePreset(name: string): CreateThemeOptions | undefined {\n    return themePresets[name as ThemePresetName];\n}\n"],"mappings":";AAoBA,IAAa,IAA4D;CACrE,SAAS;EACL,SAAS;EACT,MAAM;EACN,OAAO;GAAC;GAAW;GAAW;GAAW;GAAW;GAAW;EAAS;CAC5E;CACA,QAAQ;EACJ,SAAS;EACT,MAAM;EACN,OAAO;GAAC;GAAW;GAAW;GAAW;GAAW;GAAW;EAAS;CAC5E;CACA,SAAS;EACL,SAAS;EACT,MAAM;EACN,OAAO;GAAC;GAAW;GAAW;GAAW;GAAW;GAAW;EAAS;CAC5E;CACA,MAAM;EACF,SAAS;EACT,MAAM;EACN,OAAO;GAAC;GAAW;GAAW;GAAW;GAAW;GAAW;EAAS;CAC5E;CACA,OAAO;EACH,SAAS;EACT,MAAM;EACN,OAAO;GAAC;GAAW;GAAW;GAAW;GAAW;GAAW;EAAS;CAC5E;CACA,OAAO;EACH,SAAS;EACT,MAAM;EACN,OAAO;GAAC;GAAW;GAAW;GAAW;GAAW;GAAW;EAAS;CAC5E;AACJ;AASA,SAAgB,EAAe,GAA8C;CACzE,OAAO,EAAa;AACxB"}