@yelison/forma-ui 0.0.0-stage → 0.1.0

package/dist/provider/strings.js

@@ -0,0 +1,7 @@
+//#region src/provider/strings.ts
+var e = /* @__PURE__ */ Object.freeze({
+	buttonLoading: "Loading…",
+	dialogClose: "Close"
+});
+//#endregion
+export { e as defaultStrings };

package/dist/provider/stringsContext.d.ts

@@ -0,0 +1,6 @@
+import { type FormaStrings } from './strings.js';
+/**
+ * Holds the library's text. Private: components read it with `useFormaStrings` and `FormaProvider` writes it.
+ * The pure annotation lets a consumer's bundler drop the context when nothing imports the provider or the hook.
+ */
+export declare const StringsContext: import("react").Context<FormaStrings>;

package/dist/provider/stringsContext.js

@@ -0,0 +1,6 @@
+import { defaultStrings as e } from "./strings.js";
+import { createContext as t } from "react";
+//#region src/provider/stringsContext.ts
+var n = /* @__PURE__ */ t(e);
+//#endregion
+export { n as StringsContext };

package/dist/provider/useFormaStrings.d.ts

@@ -0,0 +1,3 @@
+import type { FormaStrings } from './strings.js';
+/** Returns the library's text: the closest `FormaProvider`'s, or the English defaults when there is none. */
+export declare function useFormaStrings(): FormaStrings;

package/dist/provider/useFormaStrings.js

@@ -0,0 +1,8 @@
+import { StringsContext as e } from "./stringsContext.js";
+import { useContext as t } from "react";
+//#region src/provider/useFormaStrings.ts
+function n() {
+	return t(e);
+}
+//#endregion
+export { n as useFormaStrings };

package/dist/styles.css

@@ -0,0 +1,2 @@
+.forma-badge{box-sizing:border-box;min-height:var(--badge-min-height);padding:var(--space-4);border-radius:var(--radius-control);font:var(--font-caption);white-space:nowrap;align-items:center;display:inline-flex}.forma-badge__blue{background:var(--color-blue-bg);color:var(--color-blue-ink)}.forma-badge__green{background:var(--color-green-bg);color:var(--color-green-ink)}.forma-badge__amber{background:var(--color-amber-bg);color:var(--color-amber-ink)}.forma-badge__red{background:var(--color-red-bg);color:var(--color-red-ink)}.forma-badge__neutral{background:var(--color-bg);color:var(--color-muted)}.forma-field{box-sizing:border-box;gap:var(--space-6);flex-direction:column;min-width:0;display:flex}.forma-field__label{font:var(--font-label);color:var(--color-ink)}.forma-field__hint{font:var(--font-caption);color:var(--color-muted)}.forma-field__error{font:var(--font-caption);color:var(--color-red-ink)}:where(.forma-field-control){box-sizing:border-box;width:100%;min-height:var(--control-height);padding:0 var(--space-12);border:1px solid var(--color-line);border-radius:var(--radius-control);background:var(--color-surface);color:var(--color-ink);font:var(--font-body);transition:background-color var(--duration-fast) ease, border-color var(--duration-fast) ease}.forma-field-control::placeholder{color:var(--color-muted);opacity:1}.forma-field-control:hover:not(:disabled,:focus,[readonly]){background:var(--color-surface-hover)}.forma-field-control:focus-visible{border-color:var(--color-focus);outline:var(--focus-ring);outline-offset:0}.forma-field-control[aria-invalid=true]{border-color:var(--color-red-ink)}.forma-field-control[aria-invalid=true]:focus-visible{outline-color:var(--color-red-ink)}.forma-field-control[readonly]{background:var(--color-bg);border-style:dashed}.forma-field-control:disabled{background:var(--color-bg);color:var(--color-muted);cursor:not-allowed}@media (prefers-reduced-motion:reduce){.forma-field-control{transition:none}}.forma-button{box-sizing:border-box;justify-content:center;align-items:center;gap:var(--space-8);min-height:var(--button-height);padding:0 var(--space-8);border-radius:var(--radius-control);font:var(--font-label);white-space:nowrap;cursor:pointer;transition:background-color var(--duration-fast) ease, border-color var(--duration-fast) ease;border:1px solid #0000;text-decoration:none;display:inline-flex}.forma-button:focus-visible{outline:var(--focus-ring);outline-offset:2px}.forma-button:where(:disabled,[aria-disabled=true]){cursor:not-allowed}.forma-button:where([aria-busy=true]){cursor:progress}.forma-button__block{width:100%}.forma-button__primary{background:var(--color-brand);color:var(--color-on-brand)}.forma-button__primary:where(:not(:disabled,[aria-disabled=true]):hover){background:var(--color-brand-hover)}.forma-button__secondary{background:var(--color-surface);border-color:var(--color-line);color:var(--color-ink)}.forma-button__ghost{color:var(--color-ink);background:0 0}.forma-button__danger{background:var(--color-red-bg);color:var(--color-red-ink)}.forma-button__secondary:where(:not(:disabled,[aria-disabled=true]):hover),.forma-button__ghost:where(:not(:disabled,[aria-disabled=true]):hover),.forma-button__danger:where(:not(:disabled,[aria-disabled=true]):hover){background:var(--color-surface-hover)}.forma-button:where(:disabled){background:var(--color-disabled);border-color:#0000}.forma-button__secondary:where(:disabled),.forma-button__danger:where(:disabled),.forma-button__ghost:where(:disabled){color:var(--color-muted)}.forma-button__spinner{box-sizing:border-box;width:var(--spinner-size);height:var(--spinner-size);border-radius:var(--radius-round);border:2px solid;border-right-color:#0000;animation:.8s linear infinite forma-button__spin}@keyframes forma-button__spin{to{transform:rotate(360deg)}}@media (prefers-reduced-motion:reduce){.forma-button__spinner{animation:none}}.forma-button-icon-button{box-sizing:border-box;width:var(--touch-target);height:var(--touch-target);border-radius:var(--radius-control);color:var(--color-muted);cursor:pointer;transition:background-color var(--duration-fast) ease, color var(--duration-fast) ease;background:0 0;border:0;flex-shrink:0;place-items:center;padding:0;display:inline-grid}.forma-button-icon-button:focus-visible{outline:var(--focus-ring);outline-offset:2px}.forma-button-icon-button:where(:not(:disabled):hover){background:var(--color-surface-hover);color:var(--color-ink)}.forma-button-icon-button:where(:disabled){cursor:not-allowed;opacity:.45}.forma-button-icon-button__icons{--icon-size:20px;--icon-overlap:.7;align-items:center;display:inline-flex}.forma-button-icon-button__icons>svg{width:var(--icon-size);height:var(--icon-size)}.forma-button-icon-button__icons>svg+svg{margin-inline-start:calc(var(--icon-size) * var(--icon-overlap) * -1)}.forma-button-icon-button__flip{transform:scaleX(-1)}.forma-tooltip{box-sizing:border-box;z-index:var(--z-tooltip);max-width:var(--tooltip-max-width);padding:var(--space-8);border-radius:var(--radius-control);background:var(--color-nav);color:var(--color-nav-ink);font:var(--font-caption)}.forma-dialog{box-sizing:border-box;width:min(var(--dialog-width), calc(100% - 2 * var(--space-16)));max-width:none;max-height:calc(100dvh - 2 * var(--space-16));border:1px solid var(--color-line);border-radius:var(--radius-panel);background:var(--color-surface);color:var(--color-ink);box-shadow:var(--shadow-popover);padding:0}.forma-dialog:where([open]){animation:forma-dialog__enter var(--duration-base) ease-out}.forma-dialog::backdrop{background:color-mix(in srgb, var(--color-overlay) calc(var(--overlay-opacity) * 100%), transparent)}.forma-dialog__wide{width:min(var(--dialog-width-wide), calc(100% - 2 * var(--space-16)))}.forma-dialog__content{box-sizing:border-box;gap:var(--space-16);padding:var(--space-24);flex-direction:column;display:flex}.forma-dialog__title{font:var(--font-section);margin:0}.forma-dialog__description{font:var(--font-body);color:var(--color-muted);margin:0}.forma-dialog__footer{justify-content:flex-end;gap:var(--space-12);flex-wrap:wrap;display:flex}@keyframes forma-dialog__enter{0%{opacity:0;transform:translateY(8px)scale(.98)}}@media (prefers-reduced-motion:reduce){.forma-dialog:where([open]){animation:none}}
+/*$vite$:1*/

package/dist/theme/index.d.ts

@@ -0,0 +1,5 @@
+export { createThemeStore } from './themeStore.js';
+export type { ResolvedTheme, ThemePreference, ThemeStore, ThemeStoreOptions } from './themeStore.js';
+export { themeScript } from './themeScript.js';
+export { useTheme } from './useTheme.js';
+export type { UseThemeResult } from './useTheme.js';

package/dist/theme/themeScript.d.ts

@@ -0,0 +1,21 @@
+import type { ThemeStoreOptions } from './themeStore.js';
+/**
+ * The first-paint script: a string for an inline `<script>` in `<head>`, before the stylesheet paints. It sets the
+ * stored `light` or `dark` on `<html>` before React renders, so a reload does not flash the theme the operating system
+ * prefers. Any other stored value, or none, leaves the attribute off and `prefers-color-scheme` decides, as it does
+ * for `system` in `createThemeStore`.
+ *
+ * It has no dependencies, leaves no global behind and never throws: its only variable is block-scoped, so it neither
+ * overwrites nor clashes with a global of the page, and storage that cannot be read just leaves the page as the system
+ * has it.
+ * The options are the ones of `createThemeStore`, and they must be the same. Any `storageKey` and `attribute` are
+ * safe to pass, whatever characters they hold.
+ *
+ * It has to be in the HTML that is served, in `<head>` before the stylesheet paints: a `<script>` that React renders
+ * on the client does not run, and one that React renders on the server comes out HTML-escaped.
+ *
+ * @example
+ * // In index.html, or in a `transformIndexHtml` hook:
+ * const html = `<script>${themeScript({ storageKey: 'my-app-theme' })}</script>`
+ */
+export declare function themeScript({ storageKey, attribute }: ThemeStoreOptions): string;

package/dist/theme/themeScript.js

@@ -0,0 +1,7 @@
+//#region src/theme/themeScript.ts
+var e = (e) => JSON.stringify(e).replaceAll("<", "\\u003c");
+function t({ storageKey: t, attribute: n = "data-theme" }) {
+	return `try{const t=localStorage.getItem(${e(t)});if(t==="light"||t==="dark")document.documentElement.setAttribute(${e(n)},t)}catch{}`;
+}
+//#endregion
+export { t as themeScript };

package/dist/theme/themeStore.d.ts

@@ -0,0 +1,42 @@
+/** What the user chose: a fixed theme, or `system` to follow the operating system. */
+export type ThemePreference = 'light' | 'dark' | 'system';
+/** The theme that is actually painted. */
+export type ResolvedTheme = 'light' | 'dark';
+/** Options of {@link createThemeStore}. */
+export interface ThemeStoreOptions {
+    /** The `localStorage` key that holds the preference. The inline script from `themeScript` must use the same key. */
+    storageKey: string;
+    /**
+     * The attribute that `light` and `dark` set on `<html>`; `system` removes it. Defaults to `'data-theme'`, which is
+     * the one the selectors in `tokens.css` listen to: another attribute only makes sense with your own stylesheet.
+     */
+    attribute?: string;
+}
+/**
+ * An external store with the theme preference. It is the shape that `useSyncExternalStore` takes, so every method is
+ * a stable function that needs no `this`.
+ */
+export interface ThemeStore {
+    /** The stored preference. A missing, unreadable or unknown stored value is `system`. */
+    getPreference(): ThemePreference;
+    /** The theme that is painted: the preference, or the operating system's when the preference is `system`. */
+    getResolved(): ResolvedTheme;
+    /**
+     * Saves the preference and applies it to `<html>` right away. When storage is unavailable (private mode, blocked)
+     * the choice lasts in memory, for this store only.
+     */
+    setPreference(preference: ThemePreference): void;
+    /**
+     * Calls `listener` when the preference changes, here or in another tab, and when the operating system switches
+     * between light and dark. While anyone is subscribed the store also keeps `<html>` in line with the stored value.
+     * Returns the function that unsubscribes.
+     */
+    subscribe(listener: () => void): () => void;
+}
+/**
+ * Creates the theme store of one application. Each store has its own listeners and in-memory fallback: stores with
+ * different keys do not wake each other, although two stores that write the same `attribute` share the document.
+ *
+ * Creating a store has no effect on the page: the document is touched when a preference is set or someone subscribes.
+ */
+export declare function createThemeStore({ storageKey, attribute }: ThemeStoreOptions): ThemeStore;

package/dist/theme/themeStore.js

@@ -0,0 +1,55 @@
+//#region src/theme/themeStore.ts
+var e = "(prefers-color-scheme: dark)";
+function t({ storageKey: t, attribute: n = "data-theme" }) {
+	let r = /* @__PURE__ */ new Set(), i = null, a;
+	function o() {
+		try {
+			let e = localStorage.getItem(t);
+			return e === "light" || e === "dark" ? e : "system";
+		} catch {
+			return "system";
+		}
+	}
+	function s(e) {
+		try {
+			e === "system" ? localStorage.removeItem(t) : localStorage.setItem(t, e);
+		} catch {}
+	}
+	let c = () => i ?? o(), l = () => window.matchMedia(e).matches ? "dark" : "light";
+	function u() {
+		let e = c();
+		return e === "system" ? l() : e;
+	}
+	function d() {
+		let e = document.documentElement, t = c();
+		t === "system" ? e.removeAttribute(n) : e.setAttribute(n, t);
+	}
+	let f = () => r.forEach((e) => e());
+	function p() {
+		d(), f();
+	}
+	function m() {
+		let n = window.matchMedia(e), r = (e) => {
+			(e.key === null || e.key === t) && p();
+		};
+		return window.addEventListener("storage", r), n.addEventListener("change", f), d(), () => {
+			window.removeEventListener("storage", r), n.removeEventListener("change", f);
+		};
+	}
+	function h(e) {
+		s(e), i = o() === e ? null : e, p();
+	}
+	function g(e) {
+		return r.add(e), a ??= m(), () => {
+			r.delete(e), r.size === 0 && (a?.(), a = void 0);
+		};
+	}
+	return {
+		getPreference: c,
+		getResolved: u,
+		setPreference: h,
+		subscribe: g
+	};
+}
+//#endregion
+export { t as createThemeStore };

package/dist/theme/useTheme.d.ts

@@ -0,0 +1,21 @@
+import type { ResolvedTheme, ThemePreference, ThemeStore } from './themeStore.js';
+/** What {@link useTheme} returns. */
+export interface UseThemeResult {
+    /** What the user chose. `system` until they pick a theme, and whenever the stored value is not valid. */
+    preference: ThemePreference;
+    /** The theme that is painted now; it follows the operating system while the preference is `system`. */
+    resolved: ResolvedTheme;
+    /** Saves a preference and applies it to the document. */
+    setPreference(preference: ThemePreference): void;
+    /** Switches to the theme that is not painted when it is called. Its identity changes only with the store. */
+    toggle(): void;
+}
+/**
+ * Reads a theme store in a component. Every component that reads the same store sees the same preference, and the
+ * preference follows other tabs and the operating system.
+ *
+ * @example
+ * const themeStore = createThemeStore({ storageKey: 'my-app-theme' })
+ * const { resolved, toggle } = useTheme(themeStore)
+ */
+export declare function useTheme(store: ThemeStore): UseThemeResult;

package/dist/theme/useTheme.js

@@ -0,0 +1,16 @@
+import { useCallback as e, useSyncExternalStore as t } from "react";
+//#region src/theme/useTheme.ts
+var n = () => "system", r = () => "light";
+function i(i) {
+	let a = t(i.subscribe, i.getPreference, n), o = t(i.subscribe, i.getResolved, r), s = e(() => {
+		i.setPreference(i.getResolved() === "dark" ? "light" : "dark");
+	}, [i]);
+	return {
+		preference: a,
+		resolved: o,
+		setPreference: i.setPreference,
+		toggle: s
+	};
+}
+//#endregion
+export { i as useTheme };

package/dist/tokens/contrast.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Relative luminance of a `#rgb` or `#rrggbb` color: 0 for black, 1 for white.
+ *
+ * @throws Error on anything but `#rgb` or `#rrggbb`, such as the `rgb(...)` that `getComputedStyle` returns.
+ */
+export declare function relativeLuminance(color: string): number;
+/**
+ * Contrast ratio of two `#rgb` or `#rrggbb` colors, from 1 (identical) to 21 (black on white), in either order.
+ *
+ * @throws Error on anything but `#rgb` or `#rrggbb`, such as the `rgb(...)` that `getComputedStyle` returns.
+ */
+export declare function contrastRatio(first: string, second: string): number;

package/dist/tokens/contrast.js

@@ -0,0 +1,25 @@
+//#region src/tokens/contrast.ts
+function e(e) {
+	let t = e / 255;
+	return t <= .04045 ? t / 12.92 : ((t + .055) / 1.055) ** 2.4;
+}
+function t(e) {
+	let t = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i.exec(e)?.[1];
+	if (t === void 0) throw Error(`Not a #rgb or #rrggbb color: "${e}"`);
+	let n = parseInt(t.length === 3 ? [...t].map((e) => e + e).join("") : t, 16);
+	return [
+		n >> 16 & 255,
+		n >> 8 & 255,
+		n & 255
+	];
+}
+function n(n) {
+	let [r, i, a] = t(n);
+	return .2126 * e(r) + .7152 * e(i) + .0722 * e(a);
+}
+function r(e, t) {
+	let [r, i] = [n(e), n(t)];
+	return (Math.max(r, i) + .05) / (Math.min(r, i) + .05);
+}
+//#endregion
+export { r as contrastRatio, n as relativeLuminance };

package/dist/tokens/tokens.d.ts

@@ -0,0 +1,2 @@
+export declare const tokenNames: readonly ["--color-bg", "--color-surface", "--color-ink", "--color-muted", "--color-line", "--color-nav", "--color-nav-active", "--color-nav-text", "--color-brand", "--color-brand-hover", "--color-link", "--color-blue-bg", "--color-blue-ink", "--color-green-bg", "--color-green-ink", "--color-amber-bg", "--color-amber-ink", "--color-red-bg", "--color-red-ink", "--color-on-brand", "--color-nav-ink", "--color-focus", "--color-surface-hover", "--color-disabled", "--color-overlay", "--color-progress-track", "--font-family", "--font-caption", "--font-body", "--font-label", "--font-strong", "--font-section", "--font-title", "--font-title-mobile", "--font-metric", "--font-logo", "--space-0", "--space-1", "--space-2", "--space-4", "--space-6", "--space-8", "--space-12", "--space-16", "--space-20", "--space-24", "--space-28", "--space-32", "--space-40", "--space-48", "--space-64", "--radius-panel", "--radius-control", "--radius-small", "--radius-round", "--control-height", "--button-height", "--touch-target", "--badge-min-height", "--spinner-size", "--tooltip-max-width", "--dialog-width", "--dialog-width-wide", "--duration-fast", "--duration-base", "--overlay-opacity", "--focus-ring", "--shadow-popover", "--z-sticky", "--z-dropdown", "--z-menu", "--z-tooltip", "--z-toast", "--z-overlay"];
+export type TokenName = (typeof tokenNames)[number];

package/dist/tokens/tokens.js

@@ -0,0 +1,4 @@
+//#region src/tokens/tokens.ts
+var e = /* @__PURE__ */ "--color-bg.--color-surface.--color-ink.--color-muted.--color-line.--color-nav.--color-nav-active.--color-nav-text.--color-brand.--color-brand-hover.--color-link.--color-blue-bg.--color-blue-ink.--color-green-bg.--color-green-ink.--color-amber-bg.--color-amber-ink.--color-red-bg.--color-red-ink.--color-on-brand.--color-nav-ink.--color-focus.--color-surface-hover.--color-disabled.--color-overlay.--color-progress-track.--font-family.--font-caption.--font-body.--font-label.--font-strong.--font-section.--font-title.--font-title-mobile.--font-metric.--font-logo.--space-0.--space-1.--space-2.--space-4.--space-6.--space-8.--space-12.--space-16.--space-20.--space-24.--space-28.--space-32.--space-40.--space-48.--space-64.--radius-panel.--radius-control.--radius-small.--radius-round.--control-height.--button-height.--touch-target.--badge-min-height.--spinner-size.--tooltip-max-width.--dialog-width.--dialog-width-wide.--duration-fast.--duration-base.--overlay-opacity.--focus-ring.--shadow-popover.--z-sticky.--z-dropdown.--z-menu.--z-tooltip.--z-toast.--z-overlay".split(".");
+//#endregion
+export { e as tokenNames };

package/dist/tokens.css

@@ -0,0 +1,156 @@
+/* Generated by scripts/build-tokens.ts from tokens/*.tokens.json. Do not edit by hand:
+ * change the source and run `npm run build:tokens -w @yelison/forma-ui`. */
+
+:root {
+  color-scheme: light;
+
+  --color-bg: #f5f7fb;
+  --color-surface: #ffffff;
+  --color-ink: #17243d;
+  --color-muted: #616d81;
+  --color-line: #e4e9f1;
+  --color-nav: #111e35;
+  --color-nav-active: #263b5d;
+  --color-nav-text: #a8b7d0;
+  --color-brand: #3569f6;
+  --color-brand-hover: #3161e0;
+  --color-link: var(--color-blue-ink);
+  --color-blue-bg: #ebf1ff;
+  --color-blue-ink: #2455cd;
+  --color-green-bg: #e7f6ee;
+  --color-green-ink: #187349;
+  --color-amber-bg: #fff3dd;
+  --color-amber-ink: #94600d;
+  --color-red-bg: #fdecec;
+  --color-red-ink: #b63535;
+  --color-on-brand: #ffffff;
+  --color-nav-ink: #ffffff;
+  --color-focus: #3569f6;
+  --color-surface-hover: #edf2fa;
+  --color-disabled: #d2dae7;
+  --color-overlay: #0b1220;
+  --color-progress-track: var(--color-line);
+
+  --font-family: 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif;
+  --font-caption: 400 12px/17px var(--font-family);
+  --font-body: 400 14px/20px var(--font-family);
+  --font-label: 500 14px/20px var(--font-family);
+  --font-strong: 600 14px/20px var(--font-family);
+  --font-section: 600 17px/24px var(--font-family);
+  --font-title: 700 30px/42px var(--font-family);
+  --font-title-mobile: 700 24px/32px var(--font-family);
+  --font-metric: 600 30px/42px var(--font-family);
+  --font-logo: 700 25px/35px var(--font-family);
+
+  --space-0: 0px;
+  --space-1: 1px;
+  --space-2: 2px;
+  --space-4: 4px;
+  --space-6: 6px;
+  --space-8: 8px;
+  --space-12: 12px;
+  --space-16: 16px;
+  --space-20: 20px;
+  --space-24: 24px;
+  --space-28: 28px;
+  --space-32: 32px;
+  --space-40: 40px;
+  --space-48: 48px;
+  --space-64: 64px;
+  --radius-panel: 12px;
+  --radius-control: 8px;
+  --radius-small: 4px;
+  --radius-round: 999px;
+  --control-height: 40px;
+  --button-height: 42px;
+  --touch-target: 44px;
+  --badge-min-height: 28px;
+  --spinner-size: 16px;
+  --tooltip-max-width: 240px;
+  --dialog-width: 440px;
+  --dialog-width-wide: 640px;
+
+  --duration-fast: 120ms;
+  --duration-base: 200ms;
+  --overlay-opacity: 0.55;
+  --focus-ring: 2px solid var(--color-focus);
+  --shadow-popover: 0 8px 24px rgb(11 18 32 / 0.16);
+
+  --z-sticky: 20;
+  --z-dropdown: 30;
+  --z-menu: 80;
+  --z-tooltip: 90;
+  --z-toast: 100;
+  --z-overlay: 200;
+}
+
+@media (max-width: 767.98px) {
+  :root {
+    --control-height: var(--touch-target);
+    --button-height: var(--touch-target);
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root:not([data-theme='light']) {
+    color-scheme: dark;
+
+    --color-bg: #0b1220;
+    --color-surface: #141f32;
+    --color-ink: #e7edf8;
+    --color-muted: #a0afc5;
+    --color-line: #2a3951;
+    --color-nav: #0a101c;
+    --color-nav-active: #233652;
+    --color-nav-text: #a8b7d0;
+    --color-brand: #3068ff;
+    --color-brand-hover: #2a5ee6;
+    --color-link: var(--color-blue-ink);
+    --color-blue-bg: #1a2c4e;
+    --color-blue-ink: #9bbcff;
+    --color-green-bg: #173a30;
+    --color-green-ink: #8edcb5;
+    --color-amber-bg: #3d311b;
+    --color-amber-ink: #f2ce85;
+    --color-red-bg: #3f242b;
+    --color-red-ink: #ffacb3;
+    --color-on-brand: #ffffff;
+    --color-nav-ink: #ffffff;
+    --color-focus: #9bbcff;
+    --color-surface-hover: #1d2b42;
+    --color-disabled: #34445c;
+    --color-overlay: #000000;
+    --color-progress-track: #202b3d;
+  }
+}
+
+:root[data-theme='dark'] {
+  color-scheme: dark;
+
+  --color-bg: #0b1220;
+  --color-surface: #141f32;
+  --color-ink: #e7edf8;
+  --color-muted: #a0afc5;
+  --color-line: #2a3951;
+  --color-nav: #0a101c;
+  --color-nav-active: #233652;
+  --color-nav-text: #a8b7d0;
+  --color-brand: #3068ff;
+  --color-brand-hover: #2a5ee6;
+  --color-link: var(--color-blue-ink);
+  --color-blue-bg: #1a2c4e;
+  --color-blue-ink: #9bbcff;
+  --color-green-bg: #173a30;
+  --color-green-ink: #8edcb5;
+  --color-amber-bg: #3d311b;
+  --color-amber-ink: #f2ce85;
+  --color-red-bg: #3f242b;
+  --color-red-ink: #ffacb3;
+  --color-on-brand: #ffffff;
+  --color-nav-ink: #ffffff;
+  --color-focus: #9bbcff;
+  --color-surface-hover: #1d2b42;
+  --color-disabled: #34445c;
+  --color-overlay: #000000;
+  --color-progress-track: #202b3d;
+}

package/dist/tokens.json

@@ -0,0 +1,154 @@
+{
+  "light": {
+    "--color-bg": "#f5f7fb",
+    "--color-surface": "#ffffff",
+    "--color-ink": "#17243d",
+    "--color-muted": "#616d81",
+    "--color-line": "#e4e9f1",
+    "--color-nav": "#111e35",
+    "--color-nav-active": "#263b5d",
+    "--color-nav-text": "#a8b7d0",
+    "--color-brand": "#3569f6",
+    "--color-brand-hover": "#3161e0",
+    "--color-link": "#2455cd",
+    "--color-blue-bg": "#ebf1ff",
+    "--color-blue-ink": "#2455cd",
+    "--color-green-bg": "#e7f6ee",
+    "--color-green-ink": "#187349",
+    "--color-amber-bg": "#fff3dd",
+    "--color-amber-ink": "#94600d",
+    "--color-red-bg": "#fdecec",
+    "--color-red-ink": "#b63535",
+    "--color-on-brand": "#ffffff",
+    "--color-nav-ink": "#ffffff",
+    "--color-focus": "#3569f6",
+    "--color-surface-hover": "#edf2fa",
+    "--color-disabled": "#d2dae7",
+    "--color-overlay": "#0b1220",
+    "--color-progress-track": "#e4e9f1",
+    "--font-family": "'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "--font-caption": "400 12px/17px 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "--font-body": "400 14px/20px 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "--font-label": "500 14px/20px 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "--font-strong": "600 14px/20px 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "--font-section": "600 17px/24px 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "--font-title": "700 30px/42px 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "--font-title-mobile": "700 24px/32px 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "--font-metric": "600 30px/42px 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "--font-logo": "700 25px/35px 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "--space-0": "0px",
+    "--space-1": "1px",
+    "--space-2": "2px",
+    "--space-4": "4px",
+    "--space-6": "6px",
+    "--space-8": "8px",
+    "--space-12": "12px",
+    "--space-16": "16px",
+    "--space-20": "20px",
+    "--space-24": "24px",
+    "--space-28": "28px",
+    "--space-32": "32px",
+    "--space-40": "40px",
+    "--space-48": "48px",
+    "--space-64": "64px",
+    "--radius-panel": "12px",
+    "--radius-control": "8px",
+    "--radius-small": "4px",
+    "--radius-round": "999px",
+    "--control-height": "40px",
+    "--button-height": "42px",
+    "--touch-target": "44px",
+    "--badge-min-height": "28px",
+    "--spinner-size": "16px",
+    "--tooltip-max-width": "240px",
+    "--dialog-width": "440px",
+    "--dialog-width-wide": "640px",
+    "--duration-fast": "120ms",
+    "--duration-base": "200ms",
+    "--overlay-opacity": "0.55",
+    "--focus-ring": "2px solid #3569f6",
+    "--shadow-popover": "0 8px 24px rgb(11 18 32 / 0.16)",
+    "--z-sticky": "20",
+    "--z-dropdown": "30",
+    "--z-menu": "80",
+    "--z-tooltip": "90",
+    "--z-toast": "100",
+    "--z-overlay": "200"
+  },
+  "dark": {
+    "--color-bg": "#0b1220",
+    "--color-surface": "#141f32",
+    "--color-ink": "#e7edf8",
+    "--color-muted": "#a0afc5",
+    "--color-line": "#2a3951",
+    "--color-nav": "#0a101c",
+    "--color-nav-active": "#233652",
+    "--color-nav-text": "#a8b7d0",
+    "--color-brand": "#3068ff",
+    "--color-brand-hover": "#2a5ee6",
+    "--color-link": "#9bbcff",
+    "--color-blue-bg": "#1a2c4e",
+    "--color-blue-ink": "#9bbcff",
+    "--color-green-bg": "#173a30",
+    "--color-green-ink": "#8edcb5",
+    "--color-amber-bg": "#3d311b",
+    "--color-amber-ink": "#f2ce85",
+    "--color-red-bg": "#3f242b",
+    "--color-red-ink": "#ffacb3",
+    "--color-on-brand": "#ffffff",
+    "--color-nav-ink": "#ffffff",
+    "--color-focus": "#9bbcff",
+    "--color-surface-hover": "#1d2b42",
+    "--color-disabled": "#34445c",
+    "--color-overlay": "#000000",
+    "--color-progress-track": "#202b3d",
+    "--font-family": "'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "--font-caption": "400 12px/17px 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "--font-body": "400 14px/20px 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "--font-label": "500 14px/20px 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "--font-strong": "600 14px/20px 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "--font-section": "600 17px/24px 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "--font-title": "700 30px/42px 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "--font-title-mobile": "700 24px/32px 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "--font-metric": "600 30px/42px 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "--font-logo": "700 25px/35px 'Inter Variable', Inter, system-ui, -apple-system, 'Segoe UI', sans-serif",
+    "--space-0": "0px",
+    "--space-1": "1px",
+    "--space-2": "2px",
+    "--space-4": "4px",
+    "--space-6": "6px",
+    "--space-8": "8px",
+    "--space-12": "12px",
+    "--space-16": "16px",
+    "--space-20": "20px",
+    "--space-24": "24px",
+    "--space-28": "28px",
+    "--space-32": "32px",
+    "--space-40": "40px",
+    "--space-48": "48px",
+    "--space-64": "64px",
+    "--radius-panel": "12px",
+    "--radius-control": "8px",
+    "--radius-small": "4px",
+    "--radius-round": "999px",
+    "--control-height": "40px",
+    "--button-height": "42px",
+    "--touch-target": "44px",
+    "--badge-min-height": "28px",
+    "--spinner-size": "16px",
+    "--tooltip-max-width": "240px",
+    "--dialog-width": "440px",
+    "--dialog-width-wide": "640px",
+    "--duration-fast": "120ms",
+    "--duration-base": "200ms",
+    "--overlay-opacity": "0.55",
+    "--focus-ring": "2px solid #9bbcff",
+    "--shadow-popover": "0 8px 24px rgb(11 18 32 / 0.16)",
+    "--z-sticky": "20",
+    "--z-dropdown": "30",
+    "--z-menu": "80",
+    "--z-tooltip": "90",
+    "--z-toast": "100",
+    "--z-overlay": "200"
+  }
+}