npm - @stapel/tokens - Versions diffs - 0.1.0 - Mend

@stapel/tokens 0.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (45) hide show

package/LICENSE ADDED Viewed

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

package/README.md ADDED Viewed

@@ -0,0 +1,41 @@
+# @stapel/tokens
+Semantic design tokens for the Stapel frontend pipeline (L0, frontend-standard
+§1). TypeScript is the single source of truth; `tokens.css` (CSS custom
+properties with `[data-theme="dark"]` overrides) is generated from it at build
+time. **No components live here.**
+## What's inside
+- `colors` — semantic colors; **every token is a light/dark pair**
+- `typography` — font families, size/line-height scale, weights
+- `spacing` — spacing scale (px)
+- `radii` — border radii
+- `elevation` — box-shadow levels (light/dark pairs)
+- `breakpoints` — exactly three: `phone` / `tablet` / `desktop` (min-width px)
+- `generateTokensCss()` — deterministic (byte-stable) CSS generator
+- `cssVar(name)` — helper returning `var(--stapel-…)` references
+## Usage
+```ts
+import { colors, breakpoints, cssVar } from "@stapel/tokens";
+import "@stapel/tokens/tokens.css";
+colors.primary.light; // "#4657d9"
+breakpoints.tablet;   // 768
+cssVar("color-primary"); // "var(--stapel-color-primary)"
+```
+Dark theme: set `data-theme="dark"` on `<html>` (or any subtree root).
+## Rules it exists to enforce
+Raw hex/px values are banned outside this package (frontend-standard §4.1) —
+consume `var(--stapel-*)` or the typed TS objects only.
+## Notes
+- Standalone-buildable; the npm tarball ships `src/` (frontend-standard §7).
+- TODO: React Compiler precompile at publish is not applicable here (no
+  components/hooks), tracked at the monorepo level for consistency.

package/dist/breakpoints.d.ts ADDED Viewed

@@ -0,0 +1,18 @@
+/**
+ * Exactly three breakpoints (frontend-standard §4.3): phone / tablet /
+ * desktop. Values are min-width px: a viewport is `tablet` when
+ * `width >= breakpoints.tablet` and `< breakpoints.desktop`.
+ * `@stapel/core`'s `useBreakpoint()` reads these.
+ */
+export declare const breakpoints: {
+    readonly phone: 0;
+    readonly tablet: 768;
+    readonly desktop: 1200;
+};
+export type Breakpoint = keyof typeof breakpoints;
+export declare const breakpointOrder: readonly ["phone", "tablet", "desktop"];
+/** Resolve which breakpoint a viewport width falls into. */
+export declare function breakpointForWidth(width: number): Breakpoint;
+/** CSS min-width media query for a breakpoint, e.g. `(min-width: 768px)`. */
+export declare function mediaQuery(breakpoint: Breakpoint): string;
+//# sourceMappingURL=breakpoints.d.ts.map

package/dist/breakpoints.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"breakpoints.d.ts","sourceRoot":"","sources":["../src/breakpoints.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,eAAO,MAAM,WAAW;;;;CAId,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,WAAW,CAAC;AAElD,eAAO,MAAM,eAAe,yCAA0C,CAAC;AAEvE,4DAA4D;AAC5D,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,UAAU,CAI5D;AAED,6EAA6E;AAC7E,wBAAgB,UAAU,CAAC,UAAU,EAAE,UAAU,GAAG,MAAM,CAEzD"}

package/dist/breakpoints.js ADDED Viewed

@@ -0,0 +1,25 @@
+/**
+ * Exactly three breakpoints (frontend-standard §4.3): phone / tablet /
+ * desktop. Values are min-width px: a viewport is `tablet` when
+ * `width >= breakpoints.tablet` and `< breakpoints.desktop`.
+ * `@stapel/core`'s `useBreakpoint()` reads these.
+ */
+export const breakpoints = {
+    phone: 0,
+    tablet: 768,
+    desktop: 1200,
+};
+export const breakpointOrder = ["phone", "tablet", "desktop"];
+/** Resolve which breakpoint a viewport width falls into. */
+export function breakpointForWidth(width) {
+    if (width >= breakpoints.desktop)
+        return "desktop";
+    if (width >= breakpoints.tablet)
+        return "tablet";
+    return "phone";
+}
+/** CSS min-width media query for a breakpoint, e.g. `(min-width: 768px)`. */
+export function mediaQuery(breakpoint) {
+    return `(min-width: ${String(breakpoints[breakpoint])}px)`;
+}
+//# sourceMappingURL=breakpoints.js.map

package/dist/breakpoints.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"breakpoints.js","sourceRoot":"","sources":["../src/breakpoints.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG;IACzB,KAAK,EAAE,CAAC;IACR,MAAM,EAAE,GAAG;IACX,OAAO,EAAE,IAAI;CACL,CAAC;AAIX,MAAM,CAAC,MAAM,eAAe,GAAG,CAAC,OAAO,EAAE,QAAQ,EAAE,SAAS,CAAU,CAAC;AAEvE,4DAA4D;AAC5D,MAAM,UAAU,kBAAkB,CAAC,KAAa;IAC9C,IAAI,KAAK,IAAI,WAAW,CAAC,OAAO;QAAE,OAAO,SAAS,CAAC;IACnD,IAAI,KAAK,IAAI,WAAW,CAAC,MAAM;QAAE,OAAO,QAAQ,CAAC;IACjD,OAAO,OAAO,CAAC;AACjB,CAAC;AAED,6EAA6E;AAC7E,MAAM,UAAU,UAAU,CAAC,UAAsB;IAC/C,OAAO,eAAe,MAAM,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC;AAC7D,CAAC"}

package/dist/colors.d.ts ADDED Viewed

@@ -0,0 +1,118 @@
+/**
+ * Semantic color tokens. Every token carries a light/dark pair
+ * (frontend-standard §4.1) — the CSS build emits the light value on `:root`
+ * and the dark value under `[data-theme="dark"]`.
+ */
+export interface ColorToken {
+    readonly light: string;
+    readonly dark: string;
+}
+export declare const colors: {
+    /** Page background. */
+    readonly background: {
+        readonly light: "#ffffff";
+        readonly dark: "#0b0e14";
+    };
+    /** Default surface (cards, panels). */
+    readonly surface: {
+        readonly light: "#f6f7f9";
+        readonly dark: "#151a23";
+    };
+    /** Raised surface (popovers, menus). */
+    readonly surfaceRaised: {
+        readonly light: "#ffffff";
+        readonly dark: "#1c2230";
+    };
+    /** Primary text. */
+    readonly text: {
+        readonly light: "#171b21";
+        readonly dark: "#e8eaf0";
+    };
+    /** Secondary / muted text. */
+    readonly textMuted: {
+        readonly light: "#5c6470";
+        readonly dark: "#9aa3b2";
+    };
+    /** Text on primary-colored surfaces. */
+    readonly textOnPrimary: {
+        readonly light: "#ffffff";
+        readonly dark: "#ffffff";
+    };
+    /** Brand / primary interactive color. */
+    readonly primary: {
+        readonly light: "#4657d9";
+        readonly dark: "#7c8cf8";
+    };
+    /** Primary hover state. */
+    readonly primaryHover: {
+        readonly light: "#3948b8";
+        readonly dark: "#98a5fa";
+    };
+    /** Subtle primary background (selected rows, badges). */
+    readonly primarySubtle: {
+        readonly light: "#eef0fd";
+        readonly dark: "#232b4d";
+    };
+    /** Default border. */
+    readonly border: {
+        readonly light: "#d9dde3";
+        readonly dark: "#2a3242";
+    };
+    /** Emphasised border (inputs on focus-within, table headers). */
+    readonly borderStrong: {
+        readonly light: "#aeb6c2";
+        readonly dark: "#3d4759";
+    };
+    /** Destructive actions and errors. */
+    readonly danger: {
+        readonly light: "#c93a3a";
+        readonly dark: "#f28b8b";
+    };
+    /** Subtle danger background. */
+    readonly dangerSubtle: {
+        readonly light: "#fdeeee";
+        readonly dark: "#3a2020";
+    };
+    /** Success states. */
+    readonly success: {
+        readonly light: "#1f7a4d";
+        readonly dark: "#6fd0a0";
+    };
+    /** Subtle success background. */
+    readonly successSubtle: {
+        readonly light: "#eaf7f0";
+        readonly dark: "#152e22";
+    };
+    /** Warnings. */
+    readonly warning: {
+        readonly light: "#9a6700";
+        readonly dark: "#e8b34b";
+    };
+    /** Subtle warning background. */
+    readonly warningSubtle: {
+        readonly light: "#fdf6e7";
+        readonly dark: "#33270f";
+    };
+    /** Informational accents. */
+    readonly info: {
+        readonly light: "#1168a7";
+        readonly dark: "#6cb8e8";
+    };
+    /** Subtle info background. */
+    readonly infoSubtle: {
+        readonly light: "#e9f4fb";
+        readonly dark: "#12293a";
+    };
+    /** Focus ring. */
+    readonly focusRing: {
+        readonly light: "#4657d9";
+        readonly dark: "#98a5fa";
+    };
+    /** Overlay scrim behind modals. */
+    readonly overlay: {
+        readonly light: "rgba(15, 18, 24, 0.45)";
+        readonly dark: "rgba(0, 0, 0, 0.6)";
+    };
+};
+export type ColorTokenName = keyof typeof colors;
+//# sourceMappingURL=colors.d.ts.map

package/dist/colors.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"colors.d.ts","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AACH,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,MAAM;IACjB,uBAAuB;;;;;IAEvB,uCAAuC;;;;;IAEvC,wCAAwC;;;;;IAExC,oBAAoB;;;;;IAEpB,8BAA8B;;;;;IAE9B,wCAAwC;;;;;IAExC,yCAAyC;;;;;IAEzC,2BAA2B;;;;;IAE3B,yDAAyD;;;;;IAEzD,sBAAsB;;;;;IAEtB,iEAAiE;;;;;IAEjE,sCAAsC;;;;;IAEtC,gCAAgC;;;;;IAEhC,sBAAsB;;;;;IAEtB,iCAAiC;;;;;IAEjC,gBAAgB;;;;;IAEhB,iCAAiC;;;;;IAEjC,6BAA6B;;;;;IAE7B,8BAA8B;;;;;IAE9B,kBAAkB;;;;;IAElB,mCAAmC;;;;;CAE3B,CAAC;AAMX,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,MAAM,CAAC"}

package/dist/colors.js ADDED Viewed

@@ -0,0 +1,48 @@
+export const colors = {
+    /** Page background. */
+    background: { light: "#ffffff", dark: "#0b0e14" },
+    /** Default surface (cards, panels). */
+    surface: { light: "#f6f7f9", dark: "#151a23" },
+    /** Raised surface (popovers, menus). */
+    surfaceRaised: { light: "#ffffff", dark: "#1c2230" },
+    /** Primary text. */
+    text: { light: "#171b21", dark: "#e8eaf0" },
+    /** Secondary / muted text. */
+    textMuted: { light: "#5c6470", dark: "#9aa3b2" },
+    /** Text on primary-colored surfaces. */
+    textOnPrimary: { light: "#ffffff", dark: "#ffffff" },
+    /** Brand / primary interactive color. */
+    primary: { light: "#4657d9", dark: "#7c8cf8" },
+    /** Primary hover state. */
+    primaryHover: { light: "#3948b8", dark: "#98a5fa" },
+    /** Subtle primary background (selected rows, badges). */
+    primarySubtle: { light: "#eef0fd", dark: "#232b4d" },
+    /** Default border. */
+    border: { light: "#d9dde3", dark: "#2a3242" },
+    /** Emphasised border (inputs on focus-within, table headers). */
+    borderStrong: { light: "#aeb6c2", dark: "#3d4759" },
+    /** Destructive actions and errors. */
+    danger: { light: "#c93a3a", dark: "#f28b8b" },
+    /** Subtle danger background. */
+    dangerSubtle: { light: "#fdeeee", dark: "#3a2020" },
+    /** Success states. */
+    success: { light: "#1f7a4d", dark: "#6fd0a0" },
+    /** Subtle success background. */
+    successSubtle: { light: "#eaf7f0", dark: "#152e22" },
+    /** Warnings. */
+    warning: { light: "#9a6700", dark: "#e8b34b" },
+    /** Subtle warning background. */
+    warningSubtle: { light: "#fdf6e7", dark: "#33270f" },
+    /** Informational accents. */
+    info: { light: "#1168a7", dark: "#6cb8e8" },
+    /** Subtle info background. */
+    infoSubtle: { light: "#e9f4fb", dark: "#12293a" },
+    /** Focus ring. */
+    focusRing: { light: "#4657d9", dark: "#98a5fa" },
+    /** Overlay scrim behind modals. */
+    overlay: { light: "rgba(15, 18, 24, 0.45)", dark: "rgba(0, 0, 0, 0.6)" },
+};
+// Constraint check (kept out of the public type surface for isolatedDeclarations).
+const _colorsCheck = colors;
+void _colorsCheck;
+//# sourceMappingURL=colors.js.map

package/dist/colors.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"colors.js","sourceRoot":"","sources":["../src/colors.ts"],"names":[],"mappings":"AAUA,MAAM,CAAC,MAAM,MAAM,GAAG;IACpB,uBAAuB;IACvB,UAAU,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IACjD,uCAAuC;IACvC,OAAO,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IAC9C,wCAAwC;IACxC,aAAa,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IACpD,oBAAoB;IACpB,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IAC3C,8BAA8B;IAC9B,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IAChD,wCAAwC;IACxC,aAAa,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IACpD,yCAAyC;IACzC,OAAO,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IAC9C,2BAA2B;IAC3B,YAAY,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IACnD,yDAAyD;IACzD,aAAa,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IACpD,sBAAsB;IACtB,MAAM,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IAC7C,iEAAiE;IACjE,YAAY,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IACnD,sCAAsC;IACtC,MAAM,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IAC7C,gCAAgC;IAChC,YAAY,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IACnD,sBAAsB;IACtB,OAAO,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IAC9C,iCAAiC;IACjC,aAAa,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IACpD,gBAAgB;IAChB,OAAO,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IAC9C,iCAAiC;IACjC,aAAa,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IACpD,6BAA6B;IAC7B,IAAI,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IAC3C,8BAA8B;IAC9B,UAAU,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IACjD,kBAAkB;IAClB,SAAS,EAAE,EAAE,KAAK,EAAE,SAAS,EAAE,IAAI,EAAE,SAAS,EAAE;IAChD,mCAAmC;IACnC,OAAO,EAAE,EAAE,KAAK,EAAE,wBAAwB,EAAE,IAAI,EAAE,oBAAoB,EAAE;CAChE,CAAC;AAEX,mFAAmF;AACnF,MAAM,YAAY,GAA+B,MAAM,CAAC;AACxD,KAAK,YAAY,CAAC"}

package/dist/css.d.ts ADDED Viewed

@@ -0,0 +1,5 @@
+/** `cssVar("color-primary")` → `var(--stapel-color-primary)` */
+export declare function cssVar(name: string): string;
+/** Render the full tokens stylesheet (`:root` + `[data-theme="dark"]`). */
+export declare function generateTokensCss(): string;
+//# sourceMappingURL=css.d.ts.map

package/dist/css.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"css.d.ts","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"AA2BA,gEAAgE;AAChE,wBAAgB,MAAM,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAE3C;AAED,2EAA2E;AAC3E,wBAAgB,iBAAiB,IAAI,MAAM,CA8C1C"}

package/dist/css.js ADDED Viewed

@@ -0,0 +1,71 @@
+/**
+ * Deterministic tokens.css generator. TS tokens are the single source of
+ * truth; this module renders them to CSS custom properties. The output is
+ * byte-stable: keys are sorted, numbers stringified canonically, no
+ * timestamps — same input, same bytes (unit-tested).
+ */
+import { colors } from "./colors.js";
+import { elevation } from "./elevation.js";
+import { breakpoints } from "./breakpoints.js";
+import { radii } from "./radii.js";
+import { spacing } from "./spacing.js";
+import { fontFamily, fontSize, fontWeight } from "./typography.js";
+const PREFIX = "--stapel";
+function kebab(name) {
+    return name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function sortedEntries(record) {
+    return Object.entries(record).sort(([a], [b]) => (a < b ? -1 : 1));
+}
+function px(value) {
+    return value === 0 ? "0" : `${String(value)}px`;
+}
+/** `cssVar("color-primary")` → `var(--stapel-color-primary)` */
+export function cssVar(name) {
+    return `var(${PREFIX}-${name})`;
+}
+/** Render the full tokens stylesheet (`:root` + `[data-theme="dark"]`). */
+export function generateTokensCss() {
+    const root = [];
+    const dark = [];
+    for (const [name, pair] of sortedEntries(colors)) {
+        root.push(`${PREFIX}-color-${kebab(name)}: ${pair.light};`);
+        dark.push(`${PREFIX}-color-${kebab(name)}: ${pair.dark};`);
+    }
+    for (const [name, pair] of sortedEntries(elevation)) {
+        root.push(`${PREFIX}-elevation-${kebab(name)}: ${pair.light};`);
+        dark.push(`${PREFIX}-elevation-${kebab(name)}: ${pair.dark};`);
+    }
+    for (const [name, value] of sortedEntries(fontFamily)) {
+        root.push(`${PREFIX}-font-family-${kebab(name)}: ${value};`);
+    }
+    for (const [name, step] of sortedEntries(fontSize)) {
+        root.push(`${PREFIX}-font-size-${kebab(name)}: ${px(step.fontSize)};`);
+        root.push(`${PREFIX}-line-height-${kebab(name)}: ${px(step.lineHeight)};`);
+    }
+    for (const [name, value] of sortedEntries(fontWeight)) {
+        root.push(`${PREFIX}-font-weight-${kebab(name)}: ${String(value)};`);
+    }
+    for (const [name, value] of sortedEntries(spacing)) {
+        root.push(`${PREFIX}-space-${kebab(name)}: ${px(value)};`);
+    }
+    for (const [name, value] of sortedEntries(radii)) {
+        root.push(`${PREFIX}-radius-${kebab(name)}: ${px(value)};`);
+    }
+    for (const [name, value] of sortedEntries(breakpoints)) {
+        root.push(`${PREFIX}-breakpoint-${kebab(name)}: ${px(value)};`);
+    }
+    const indent = (lines) => lines.map((l) => `  ${l}`).join("\n");
+    return [
+        "/* Generated by @stapel/tokens — do not edit. Source: src/*.ts */",
+        ":root {",
+        indent(root),
+        "}",
+        "",
+        '[data-theme="dark"] {',
+        indent(dark),
+        "}",
+        "",
+    ].join("\n");
+}
+//# sourceMappingURL=css.js.map

package/dist/css.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"css.js","sourceRoot":"","sources":["../src/css.ts"],"names":[],"mappings":"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"}

package/dist/elevation.d.ts ADDED Viewed

@@ -0,0 +1,28 @@
+/**
+ * Elevation (box-shadow) levels. Light/dark pairs like colors: dark themes
+ * need stronger shadows to read as raised.
+ */
+export interface ElevationToken {
+    readonly light: string;
+    readonly dark: string;
+}
+export declare const elevation: {
+    readonly none: {
+        readonly light: "none";
+        readonly dark: "none";
+    };
+    readonly low: {
+        readonly light: "0 1px 2px rgba(15, 18, 24, 0.08)";
+        readonly dark: "0 1px 2px rgba(0, 0, 0, 0.4)";
+    };
+    readonly medium: {
+        readonly light: "0 2px 8px rgba(15, 18, 24, 0.12)";
+        readonly dark: "0 2px 8px rgba(0, 0, 0, 0.5)";
+    };
+    readonly high: {
+        readonly light: "0 8px 24px rgba(15, 18, 24, 0.16)";
+        readonly dark: "0 8px 24px rgba(0, 0, 0, 0.6)";
+    };
+};
+export type ElevationName = keyof typeof elevation;
+//# sourceMappingURL=elevation.d.ts.map

package/dist/elevation.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"elevation.d.ts","sourceRoot":"","sources":["../src/elevation.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,MAAM,WAAW,cAAc;IAC7B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;CACvB;AAED,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;CAcZ,CAAC;AAKX,MAAM,MAAM,aAAa,GAAG,MAAM,OAAO,SAAS,CAAC"}

package/dist/elevation.js ADDED Viewed

@@ -0,0 +1,18 @@
+export const elevation = {
+    none: { light: "none", dark: "none" },
+    low: {
+        light: "0 1px 2px rgba(15, 18, 24, 0.08)",
+        dark: "0 1px 2px rgba(0, 0, 0, 0.4)",
+    },
+    medium: {
+        light: "0 2px 8px rgba(15, 18, 24, 0.12)",
+        dark: "0 2px 8px rgba(0, 0, 0, 0.5)",
+    },
+    high: {
+        light: "0 8px 24px rgba(15, 18, 24, 0.16)",
+        dark: "0 8px 24px rgba(0, 0, 0, 0.6)",
+    },
+};
+const _elevationCheck = elevation;
+void _elevationCheck;
+//# sourceMappingURL=elevation.js.map

package/dist/elevation.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"elevation.js","sourceRoot":"","sources":["../src/elevation.ts"],"names":[],"mappings":"AASA,MAAM,CAAC,MAAM,SAAS,GAAG;IACvB,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,EAAE;IACrC,GAAG,EAAE;QACH,KAAK,EAAE,kCAAkC;QACzC,IAAI,EAAE,8BAA8B;KACrC;IACD,MAAM,EAAE;QACN,KAAK,EAAE,kCAAkC;QACzC,IAAI,EAAE,8BAA8B;KACrC;IACD,IAAI,EAAE;QACJ,KAAK,EAAE,mCAAmC;QAC1C,IAAI,EAAE,+BAA+B;KACtC;CACO,CAAC;AAEX,MAAM,eAAe,GAAmC,SAAS,CAAC;AAClE,KAAK,eAAe,CAAC"}

package/dist/index.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+export { colors } from "./colors.js";
+export type { ColorToken, ColorTokenName } from "./colors.js";
+export { typography, fontFamily, fontSize, fontWeight, } from "./typography.js";
+export type { TypeStep, FontSizeName, FontWeightName } from "./typography.js";
+export { spacing } from "./spacing.js";
+export type { SpacingStep } from "./spacing.js";
+export { radii } from "./radii.js";
+export type { RadiusName } from "./radii.js";
+export { elevation } from "./elevation.js";
+export type { ElevationName, ElevationToken } from "./elevation.js";
+export { breakpoints, breakpointOrder, breakpointForWidth, mediaQuery, } from "./breakpoints.js";
+export type { Breakpoint } from "./breakpoints.js";
+export { generateTokensCss, cssVar } from "./css.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AACrC,YAAY,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAC9D,OAAO,EACL,UAAU,EACV,UAAU,EACV,QAAQ,EACR,UAAU,GACX,MAAM,iBAAiB,CAAC;AACzB,YAAY,EAAE,QAAQ,EAAE,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAC9E,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AACvC,YAAY,EAAE,WAAW,EAAE,MAAM,cAAc,CAAC;AAChD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,YAAY,EAAE,UAAU,EAAE,MAAM,YAAY,CAAC;AAC7C,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAC3C,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AACpE,OAAO,EACL,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,UAAU,GACX,MAAM,kBAAkB,CAAC;AAC1B,YAAY,EAAE,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACnD,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/index.js ADDED Viewed

@@ -0,0 +1,8 @@
+export { colors } from "./colors.js";
+export { typography, fontFamily, fontSize, fontWeight, } from "./typography.js";
+export { spacing } from "./spacing.js";
+export { radii } from "./radii.js";
+export { elevation } from "./elevation.js";
+export { breakpoints, breakpointOrder, breakpointForWidth, mediaQuery, } from "./breakpoints.js";
+export { generateTokensCss, cssVar } from "./css.js";
+//# sourceMappingURL=index.js.map

package/dist/index.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAErC,OAAO,EACL,UAAU,EACV,UAAU,EACV,QAAQ,EACR,UAAU,GACX,MAAM,iBAAiB,CAAC;AAEzB,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,OAAO,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AAE3C,OAAO,EACL,WAAW,EACX,eAAe,EACf,kBAAkB,EAClB,UAAU,GACX,MAAM,kBAAkB,CAAC;AAE1B,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC"}

package/dist/radii.d.ts ADDED Viewed

@@ -0,0 +1,11 @@
+/** Border radii in px (`full` is a pill/circle sentinel). */
+export declare const radii: {
+    readonly none: 0;
+    readonly sm: 4;
+    readonly md: 8;
+    readonly lg: 12;
+    readonly xl: 20;
+    readonly full: 9999;
+};
+export type RadiusName = keyof typeof radii;
+//# sourceMappingURL=radii.d.ts.map

package/dist/radii.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"radii.d.ts","sourceRoot":"","sources":["../src/radii.ts"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,eAAO,MAAM,KAAK;;;;;;;CAOR,CAAC;AAEX,MAAM,MAAM,UAAU,GAAG,MAAM,OAAO,KAAK,CAAC"}

package/dist/radii.js ADDED Viewed

@@ -0,0 +1,10 @@
+/** Border radii in px (`full` is a pill/circle sentinel). */
+export const radii = {
+    none: 0,
+    sm: 4,
+    md: 8,
+    lg: 12,
+    xl: 20,
+    full: 9999,
+};
+//# sourceMappingURL=radii.js.map

package/dist/radii.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"radii.js","sourceRoot":"","sources":["../src/radii.ts"],"names":[],"mappings":"AAAA,6DAA6D;AAC7D,MAAM,CAAC,MAAM,KAAK,GAAG;IACnB,IAAI,EAAE,CAAC;IACP,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,CAAC;IACL,EAAE,EAAE,EAAE;IACN,EAAE,EAAE,EAAE;IACN,IAAI,EAAE,IAAI;CACF,CAAC"}

package/dist/spacing.d.ts ADDED Viewed

@@ -0,0 +1,14 @@
+/** Spacing scale in px. Consume via TS or `--stapel-space-*` CSS vars. */
+export declare const spacing: {
+    readonly "0": 0;
+    readonly "1": 4;
+    readonly "2": 8;
+    readonly "3": 12;
+    readonly "4": 16;
+    readonly "5": 24;
+    readonly "6": 32;
+    readonly "7": 48;
+    readonly "8": 64;
+};
+export type SpacingStep = keyof typeof spacing;
+//# sourceMappingURL=spacing.d.ts.map

package/dist/spacing.d.ts.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"spacing.d.ts","sourceRoot":"","sources":["../src/spacing.ts"],"names":[],"mappings":"AAAA,0EAA0E;AAC1E,eAAO,MAAM,OAAO;;;;;;;;;;CAUV,CAAC;AAEX,MAAM,MAAM,WAAW,GAAG,MAAM,OAAO,OAAO,CAAC"}

package/dist/spacing.js ADDED Viewed

@@ -0,0 +1,13 @@
+/** Spacing scale in px. Consume via TS or `--stapel-space-*` CSS vars. */
+export const spacing = {
+    "0": 0,
+    "1": 4,
+    "2": 8,
+    "3": 12,
+    "4": 16,
+    "5": 24,
+    "6": 32,
+    "7": 48,
+    "8": 64,
+};
+//# sourceMappingURL=spacing.js.map

package/dist/spacing.js.map ADDED Viewed

	@@ -0,0 +1 @@
1	+ {"version":3,"file":"spacing.js","sourceRoot":"","sources":["../src/spacing.ts"],"names":[],"mappings":"AAAA,0EAA0E;AAC1E,MAAM,CAAC,MAAM,OAAO,GAAG;IACrB,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,CAAC;IACN,GAAG,EAAE,EAAE;IACP,GAAG,EAAE,EAAE;IACP,GAAG,EAAE,EAAE;IACP,GAAG,EAAE,EAAE;IACP,GAAG,EAAE,EAAE;IACP,GAAG,EAAE,EAAE;CACC,CAAC"}

package/dist/tokens.css ADDED Viewed

@@ -0,0 +1,94 @@
+/* Generated by @stapel/tokens — do not edit. Source: src/*.ts */
+:root {
+  --stapel-color-background: #ffffff;
+  --stapel-color-border: #d9dde3;
+  --stapel-color-border-strong: #aeb6c2;
+  --stapel-color-danger: #c93a3a;
+  --stapel-color-danger-subtle: #fdeeee;
+  --stapel-color-focus-ring: #4657d9;
+  --stapel-color-info: #1168a7;
+  --stapel-color-info-subtle: #e9f4fb;
+  --stapel-color-overlay: rgba(15, 18, 24, 0.45);
+  --stapel-color-primary: #4657d9;
+  --stapel-color-primary-hover: #3948b8;
+  --stapel-color-primary-subtle: #eef0fd;
+  --stapel-color-success: #1f7a4d;
+  --stapel-color-success-subtle: #eaf7f0;
+  --stapel-color-surface: #f6f7f9;
+  --stapel-color-surface-raised: #ffffff;
+  --stapel-color-text: #171b21;
+  --stapel-color-text-muted: #5c6470;
+  --stapel-color-text-on-primary: #ffffff;
+  --stapel-color-warning: #9a6700;
+  --stapel-color-warning-subtle: #fdf6e7;
+  --stapel-elevation-high: 0 8px 24px rgba(15, 18, 24, 0.16);
+  --stapel-elevation-low: 0 1px 2px rgba(15, 18, 24, 0.08);
+  --stapel-elevation-medium: 0 2px 8px rgba(15, 18, 24, 0.12);
+  --stapel-elevation-none: none;
+  --stapel-font-family-mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace;
+  --stapel-font-family-sans: 'Inter', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif;
+  --stapel-font-size-2xl: 28px;
+  --stapel-line-height-2xl: 36px;
+  --stapel-font-size-3xl: 36px;
+  --stapel-line-height-3xl: 44px;
+  --stapel-font-size-lg: 18px;
+  --stapel-line-height-lg: 28px;
+  --stapel-font-size-md: 16px;
+  --stapel-line-height-md: 24px;
+  --stapel-font-size-sm: 14px;
+  --stapel-line-height-sm: 20px;
+  --stapel-font-size-xl: 22px;
+  --stapel-line-height-xl: 30px;
+  --stapel-font-size-xs: 12px;
+  --stapel-line-height-xs: 16px;
+  --stapel-font-weight-bold: 700;
+  --stapel-font-weight-medium: 500;
+  --stapel-font-weight-regular: 400;
+  --stapel-font-weight-semibold: 600;
+  --stapel-space-0: 0;
+  --stapel-space-1: 4px;
+  --stapel-space-2: 8px;
+  --stapel-space-3: 12px;
+  --stapel-space-4: 16px;
+  --stapel-space-5: 24px;
+  --stapel-space-6: 32px;
+  --stapel-space-7: 48px;
+  --stapel-space-8: 64px;
+  --stapel-radius-full: 9999px;
+  --stapel-radius-lg: 12px;
+  --stapel-radius-md: 8px;
+  --stapel-radius-none: 0;
+  --stapel-radius-sm: 4px;
+  --stapel-radius-xl: 20px;
+  --stapel-breakpoint-desktop: 1200px;
+  --stapel-breakpoint-phone: 0;
+  --stapel-breakpoint-tablet: 768px;
+}
+[data-theme="dark"] {
+  --stapel-color-background: #0b0e14;
+  --stapel-color-border: #2a3242;
+  --stapel-color-border-strong: #3d4759;
+  --stapel-color-danger: #f28b8b;
+  --stapel-color-danger-subtle: #3a2020;
+  --stapel-color-focus-ring: #98a5fa;
+  --stapel-color-info: #6cb8e8;
+  --stapel-color-info-subtle: #12293a;
+  --stapel-color-overlay: rgba(0, 0, 0, 0.6);
+  --stapel-color-primary: #7c8cf8;
+  --stapel-color-primary-hover: #98a5fa;
+  --stapel-color-primary-subtle: #232b4d;
+  --stapel-color-success: #6fd0a0;
+  --stapel-color-success-subtle: #152e22;
+  --stapel-color-surface: #151a23;
+  --stapel-color-surface-raised: #1c2230;
+  --stapel-color-text: #e8eaf0;
+  --stapel-color-text-muted: #9aa3b2;
+  --stapel-color-text-on-primary: #ffffff;
+  --stapel-color-warning: #e8b34b;
+  --stapel-color-warning-subtle: #33270f;
+  --stapel-elevation-high: 0 8px 24px rgba(0, 0, 0, 0.6);
+  --stapel-elevation-low: 0 1px 2px rgba(0, 0, 0, 0.4);
+  --stapel-elevation-medium: 0 2px 8px rgba(0, 0, 0, 0.5);
+  --stapel-elevation-none: none;
+}

package/dist/typography.d.ts ADDED Viewed

@@ -0,0 +1,54 @@
+/** Typography scale. Sizes/line-heights in px, emitted as rem-friendly px CSS. */
+export interface TypeStep {
+    readonly fontSize: number;
+    readonly lineHeight: number;
+}
+export declare const fontFamily: {
+    readonly sans: "'Inter', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif";
+    readonly mono: "'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace";
+};
+export declare const fontSize: {
+    readonly xs: {
+        readonly fontSize: 12;
+        readonly lineHeight: 16;
+    };
+    readonly sm: {
+        readonly fontSize: 14;
+        readonly lineHeight: 20;
+    };
+    readonly md: {
+        readonly fontSize: 16;
+        readonly lineHeight: 24;
+    };
+    readonly lg: {
+        readonly fontSize: 18;
+        readonly lineHeight: 28;
+    };
+    readonly xl: {
+        readonly fontSize: 22;
+        readonly lineHeight: 30;
+    };
+    readonly "2xl": {
+        readonly fontSize: 28;
+        readonly lineHeight: 36;
+    };
+    readonly "3xl": {
+        readonly fontSize: 36;
+        readonly lineHeight: 44;
+    };
+};
+export declare const fontWeight: {
+    readonly regular: 400;
+    readonly medium: 500;
+    readonly semibold: 600;
+    readonly bold: 700;
+};
+export interface Typography {
+    readonly fontFamily: typeof fontFamily;
+    readonly fontSize: typeof fontSize;
+    readonly fontWeight: typeof fontWeight;
+}
+export declare const typography: Typography;
+export type FontSizeName = keyof typeof fontSize;
+export type FontWeightName = keyof typeof fontWeight;
+//# sourceMappingURL=typography.d.ts.map

package/dist/typography.d.ts.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"typography.d.ts","sourceRoot":"","sources":["../src/typography.ts"],"names":[],"mappings":"AAAA,kFAAkF;AAClF,MAAM,WAAW,QAAQ;IACvB,QAAQ,CAAC,QAAQ,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,UAAU,EAAE,MAAM,CAAC;CAC7B;AAED,eAAO,MAAM,UAAU;;;CAGb,CAAC;AAEX,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAQX,CAAC;AAEX,eAAO,MAAM,UAAU;;;;;CAKb,CAAC;AAEX,MAAM,WAAW,UAAU;IACzB,QAAQ,CAAC,UAAU,EAAE,OAAO,UAAU,CAAC;IACvC,QAAQ,CAAC,QAAQ,EAAE,OAAO,QAAQ,CAAC;IACnC,QAAQ,CAAC,UAAU,EAAE,OAAO,UAAU,CAAC;CACxC;AAED,eAAO,MAAM,UAAU,EAAE,UAIxB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG,MAAM,OAAO,QAAQ,CAAC;AACjD,MAAM,MAAM,cAAc,GAAG,MAAM,OAAO,UAAU,CAAC"}

package/dist/typography.js ADDED Viewed

@@ -0,0 +1,25 @@
+export const fontFamily = {
+    sans: "'Inter', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif",
+    mono: "'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace",
+};
+export const fontSize = {
+    xs: { fontSize: 12, lineHeight: 16 },
+    sm: { fontSize: 14, lineHeight: 20 },
+    md: { fontSize: 16, lineHeight: 24 },
+    lg: { fontSize: 18, lineHeight: 28 },
+    xl: { fontSize: 22, lineHeight: 30 },
+    "2xl": { fontSize: 28, lineHeight: 36 },
+    "3xl": { fontSize: 36, lineHeight: 44 },
+};
+export const fontWeight = {
+    regular: 400,
+    medium: 500,
+    semibold: 600,
+    bold: 700,
+};
+export const typography = {
+    fontFamily: fontFamily,
+    fontSize: fontSize,
+    fontWeight: fontWeight,
+};
+//# sourceMappingURL=typography.js.map

package/dist/typography.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"typography.js","sourceRoot":"","sources":["../src/typography.ts"],"names":[],"mappings":"AAMA,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,IAAI,EAAE,oEAAoE;IAC1E,IAAI,EAAE,yDAAyD;CACvD,CAAC;AAEX,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;IACpC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;IACpC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;IACpC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;IACpC,EAAE,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;IACpC,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;IACvC,KAAK,EAAE,EAAE,QAAQ,EAAE,EAAE,EAAE,UAAU,EAAE,EAAE,EAAE;CAC/B,CAAC;AAEX,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,OAAO,EAAE,GAAG;IACZ,MAAM,EAAE,GAAG;IACX,QAAQ,EAAE,GAAG;IACb,IAAI,EAAE,GAAG;CACD,CAAC;AAQX,MAAM,CAAC,MAAM,UAAU,GAAe;IACpC,UAAU,EAAE,UAAU;IACtB,QAAQ,EAAE,QAAQ;IAClB,UAAU,EAAE,UAAU;CACvB,CAAC"}

package/package.json ADDED Viewed

@@ -0,0 +1,53 @@
+{
+  "name": "@stapel/tokens",
+  "version": "0.1.0",
+  "description": "Stapel design tokens: semantic colors (light/dark pairs), typography, spacing, radii, elevation, and the three breakpoints. TypeScript source of truth + generated CSS custom properties. Not components.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/usestapel/stapel-react.git",
+    "directory": "packages/tokens"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./tokens.css": "./dist/tokens.css",
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src",
+    "tsconfig.json",
+    "README.md"
+  ],
+  "size-limit": [
+    {
+      "path": "dist/index.js",
+      "limit": "4 KB"
+    }
+  ],
+  "devDependencies": {
+    "@size-limit/preset-small-lib": "^11.2.0",
+    "size-limit": "^11.2.0",
+    "typescript": "^5.8.3",
+    "vitest": "^3.2.4"
+  },
+  "engines": {
+    "node": ">=22"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json && node ./scripts/build-css.mjs",
+    "test": "vitest run",
+    "lint": "eslint .",
+    "size": "size-limit"
+  }
+}

package/src/breakpoints.ts ADDED Viewed

@@ -0,0 +1,27 @@
+/**
+ * Exactly three breakpoints (frontend-standard §4.3): phone / tablet /
+ * desktop. Values are min-width px: a viewport is `tablet` when
+ * `width >= breakpoints.tablet` and `< breakpoints.desktop`.
+ * `@stapel/core`'s `useBreakpoint()` reads these.
+ */
+export const breakpoints = {
+  phone: 0,
+  tablet: 768,
+  desktop: 1200,
+} as const;
+export type Breakpoint = keyof typeof breakpoints;
+export const breakpointOrder = ["phone", "tablet", "desktop"] as const;
+/** Resolve which breakpoint a viewport width falls into. */
+export function breakpointForWidth(width: number): Breakpoint {
+  if (width >= breakpoints.desktop) return "desktop";
+  if (width >= breakpoints.tablet) return "tablet";
+  return "phone";
+}
+/** CSS min-width media query for a breakpoint, e.g. `(min-width: 768px)`. */
+export function mediaQuery(breakpoint: Breakpoint): string {
+  return `(min-width: ${String(breakpoints[breakpoint])}px)`;
+}

package/src/colors.ts ADDED Viewed

@@ -0,0 +1,60 @@
+/**
+ * Semantic color tokens. Every token carries a light/dark pair
+ * (frontend-standard §4.1) — the CSS build emits the light value on `:root`
+ * and the dark value under `[data-theme="dark"]`.
+ */
+export interface ColorToken {
+  readonly light: string;
+  readonly dark: string;
+}
+export const colors = {
+  /** Page background. */
+  background: { light: "#ffffff", dark: "#0b0e14" },
+  /** Default surface (cards, panels). */
+  surface: { light: "#f6f7f9", dark: "#151a23" },
+  /** Raised surface (popovers, menus). */
+  surfaceRaised: { light: "#ffffff", dark: "#1c2230" },
+  /** Primary text. */
+  text: { light: "#171b21", dark: "#e8eaf0" },
+  /** Secondary / muted text. */
+  textMuted: { light: "#5c6470", dark: "#9aa3b2" },
+  /** Text on primary-colored surfaces. */
+  textOnPrimary: { light: "#ffffff", dark: "#ffffff" },
+  /** Brand / primary interactive color. */
+  primary: { light: "#4657d9", dark: "#7c8cf8" },
+  /** Primary hover state. */
+  primaryHover: { light: "#3948b8", dark: "#98a5fa" },
+  /** Subtle primary background (selected rows, badges). */
+  primarySubtle: { light: "#eef0fd", dark: "#232b4d" },
+  /** Default border. */
+  border: { light: "#d9dde3", dark: "#2a3242" },
+  /** Emphasised border (inputs on focus-within, table headers). */
+  borderStrong: { light: "#aeb6c2", dark: "#3d4759" },
+  /** Destructive actions and errors. */
+  danger: { light: "#c93a3a", dark: "#f28b8b" },
+  /** Subtle danger background. */
+  dangerSubtle: { light: "#fdeeee", dark: "#3a2020" },
+  /** Success states. */
+  success: { light: "#1f7a4d", dark: "#6fd0a0" },
+  /** Subtle success background. */
+  successSubtle: { light: "#eaf7f0", dark: "#152e22" },
+  /** Warnings. */
+  warning: { light: "#9a6700", dark: "#e8b34b" },
+  /** Subtle warning background. */
+  warningSubtle: { light: "#fdf6e7", dark: "#33270f" },
+  /** Informational accents. */
+  info: { light: "#1168a7", dark: "#6cb8e8" },
+  /** Subtle info background. */
+  infoSubtle: { light: "#e9f4fb", dark: "#12293a" },
+  /** Focus ring. */
+  focusRing: { light: "#4657d9", dark: "#98a5fa" },
+  /** Overlay scrim behind modals. */
+  overlay: { light: "rgba(15, 18, 24, 0.45)", dark: "rgba(0, 0, 0, 0.6)" },
+} as const;
+// Constraint check (kept out of the public type surface for isolatedDeclarations).
+const _colorsCheck: Record<string, ColorToken> = colors;
+void _colorsCheck;
+export type ColorTokenName = keyof typeof colors;

package/src/css.ts ADDED Viewed

@@ -0,0 +1,80 @@
+/**
+ * Deterministic tokens.css generator. TS tokens are the single source of
+ * truth; this module renders them to CSS custom properties. The output is
+ * byte-stable: keys are sorted, numbers stringified canonically, no
+ * timestamps — same input, same bytes (unit-tested).
+ */
+import { colors } from "./colors.js";
+import { elevation } from "./elevation.js";
+import { breakpoints } from "./breakpoints.js";
+import { radii } from "./radii.js";
+import { spacing } from "./spacing.js";
+import { fontFamily, fontSize, fontWeight } from "./typography.js";
+const PREFIX = "--stapel";
+function kebab(name: string): string {
+  return name.replace(/([a-z0-9])([A-Z])/g, "$1-$2").toLowerCase();
+}
+function sortedEntries<T>(record: Record<string, T>): [string, T][] {
+  return Object.entries(record).sort(([a], [b]) => (a < b ? -1 : 1));
+}
+function px(value: number): string {
+  return value === 0 ? "0" : `${String(value)}px`;
+}
+/** `cssVar("color-primary")` → `var(--stapel-color-primary)` */
+export function cssVar(name: string): string {
+  return `var(${PREFIX}-${name})`;
+}
+/** Render the full tokens stylesheet (`:root` + `[data-theme="dark"]`). */
+export function generateTokensCss(): string {
+  const root: string[] = [];
+  const dark: string[] = [];
+  for (const [name, pair] of sortedEntries(colors)) {
+    root.push(`${PREFIX}-color-${kebab(name)}: ${pair.light};`);
+    dark.push(`${PREFIX}-color-${kebab(name)}: ${pair.dark};`);
+  }
+  for (const [name, pair] of sortedEntries(elevation)) {
+    root.push(`${PREFIX}-elevation-${kebab(name)}: ${pair.light};`);
+    dark.push(`${PREFIX}-elevation-${kebab(name)}: ${pair.dark};`);
+  }
+  for (const [name, value] of sortedEntries(fontFamily)) {
+    root.push(`${PREFIX}-font-family-${kebab(name)}: ${value};`);
+  }
+  for (const [name, step] of sortedEntries(fontSize)) {
+    root.push(`${PREFIX}-font-size-${kebab(name)}: ${px(step.fontSize)};`);
+    root.push(`${PREFIX}-line-height-${kebab(name)}: ${px(step.lineHeight)};`);
+  }
+  for (const [name, value] of sortedEntries(fontWeight)) {
+    root.push(`${PREFIX}-font-weight-${kebab(name)}: ${String(value)};`);
+  }
+  for (const [name, value] of sortedEntries(spacing)) {
+    root.push(`${PREFIX}-space-${kebab(name)}: ${px(value)};`);
+  }
+  for (const [name, value] of sortedEntries(radii)) {
+    root.push(`${PREFIX}-radius-${kebab(name)}: ${px(value)};`);
+  }
+  for (const [name, value] of sortedEntries(breakpoints)) {
+    root.push(`${PREFIX}-breakpoint-${kebab(name)}: ${px(value)};`);
+  }
+  const indent = (lines: string[]): string =>
+    lines.map((l) => `  ${l}`).join("\n");
+  return [
+    "/* Generated by @stapel/tokens — do not edit. Source: src/*.ts */",
+    ":root {",
+    indent(root),
+    "}",
+    "",
+    '[data-theme="dark"] {',
+    indent(dark),
+    "}",
+    "",
+  ].join("\n");
+}

package/src/elevation.ts ADDED Viewed

@@ -0,0 +1,29 @@
+/**
+ * Elevation (box-shadow) levels. Light/dark pairs like colors: dark themes
+ * need stronger shadows to read as raised.
+ */
+export interface ElevationToken {
+  readonly light: string;
+  readonly dark: string;
+}
+export const elevation = {
+  none: { light: "none", dark: "none" },
+  low: {
+    light: "0 1px 2px rgba(15, 18, 24, 0.08)",
+    dark: "0 1px 2px rgba(0, 0, 0, 0.4)",
+  },
+  medium: {
+    light: "0 2px 8px rgba(15, 18, 24, 0.12)",
+    dark: "0 2px 8px rgba(0, 0, 0, 0.5)",
+  },
+  high: {
+    light: "0 8px 24px rgba(15, 18, 24, 0.16)",
+    dark: "0 8px 24px rgba(0, 0, 0, 0.6)",
+  },
+} as const;
+const _elevationCheck: Record<string, ElevationToken> = elevation;
+void _elevationCheck;
+export type ElevationName = keyof typeof elevation;

package/src/index.ts ADDED Viewed

@@ -0,0 +1,23 @@
+export { colors } from "./colors.js";
+export type { ColorToken, ColorTokenName } from "./colors.js";
+export {
+  typography,
+  fontFamily,
+  fontSize,
+  fontWeight,
+} from "./typography.js";
+export type { TypeStep, FontSizeName, FontWeightName } from "./typography.js";
+export { spacing } from "./spacing.js";
+export type { SpacingStep } from "./spacing.js";
+export { radii } from "./radii.js";
+export type { RadiusName } from "./radii.js";
+export { elevation } from "./elevation.js";
+export type { ElevationName, ElevationToken } from "./elevation.js";
+export {
+  breakpoints,
+  breakpointOrder,
+  breakpointForWidth,
+  mediaQuery,
+} from "./breakpoints.js";
+export type { Breakpoint } from "./breakpoints.js";
+export { generateTokensCss, cssVar } from "./css.js";

package/src/radii.ts ADDED Viewed

@@ -0,0 +1,11 @@
+/** Border radii in px (`full` is a pill/circle sentinel). */
+export const radii = {
+  none: 0,
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 20,
+  full: 9999,
+} as const;
+export type RadiusName = keyof typeof radii;

package/src/spacing.ts ADDED Viewed

@@ -0,0 +1,14 @@
+/** Spacing scale in px. Consume via TS or `--stapel-space-*` CSS vars. */
+export const spacing = {
+  "0": 0,
+  "1": 4,
+  "2": 8,
+  "3": 12,
+  "4": 16,
+  "5": 24,
+  "6": 32,
+  "7": 48,
+  "8": 64,
+} as const;
+export type SpacingStep = keyof typeof spacing;

package/src/typography.ts ADDED Viewed

@@ -0,0 +1,42 @@
+/** Typography scale. Sizes/line-heights in px, emitted as rem-friendly px CSS. */
+export interface TypeStep {
+  readonly fontSize: number;
+  readonly lineHeight: number;
+}
+export const fontFamily = {
+  sans: "'Inter', 'Helvetica Neue', Helvetica, Arial, system-ui, sans-serif",
+  mono: "'JetBrains Mono', 'SF Mono', Menlo, Consolas, monospace",
+} as const;
+export const fontSize = {
+  xs: { fontSize: 12, lineHeight: 16 },
+  sm: { fontSize: 14, lineHeight: 20 },
+  md: { fontSize: 16, lineHeight: 24 },
+  lg: { fontSize: 18, lineHeight: 28 },
+  xl: { fontSize: 22, lineHeight: 30 },
+  "2xl": { fontSize: 28, lineHeight: 36 },
+  "3xl": { fontSize: 36, lineHeight: 44 },
+} as const;
+export const fontWeight = {
+  regular: 400,
+  medium: 500,
+  semibold: 600,
+  bold: 700,
+} as const;
+export interface Typography {
+  readonly fontFamily: typeof fontFamily;
+  readonly fontSize: typeof fontSize;
+  readonly fontWeight: typeof fontWeight;
+}
+export const typography: Typography = {
+  fontFamily: fontFamily,
+  fontSize: fontSize,
+  fontWeight: fontWeight,
+};
+export type FontSizeName = keyof typeof fontSize;
+export type FontWeightName = keyof typeof fontWeight;

package/tsconfig.json ADDED Viewed

@@ -0,0 +1,26 @@
+{
+  "$schema": "https://json.schemastore.org/tsconfig",
+  "_comment": "Self-contained on purpose: standalone-buildable per frontend-standard §7. Mirrors the root tsconfig.base.json settings.",
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "noUncheckedIndexedAccess": true,
+    "noImplicitOverride": true,
+    "exactOptionalPropertyTypes": true,
+    "isolatedModules": true,
+    "isolatedDeclarations": true,
+    "verbatimModuleSyntax": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "skipLibCheck": true,
+    "forceConsistentCasingInFileNames": true,
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}