@crewlethq/tokens 0.2.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Crewlet
+
+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

@@ -0,0 +1,75 @@
+# @crewlethq/tokens
+
+Single source of truth for the Crewlet design tokens: color, spacing, typography (`font`), radius, shadow, blur, breakpoint, motion and z-index. Authored as JSON, compiled by Style Dictionary into:
+
+- `dist/css/tokens.css` (CSS custom properties on `:root`)
+- `dist/index.js` + `dist/index.d.ts` (typed JS object for runtime use)
+
+## Use it from a consumer app
+
+```ts
+// 1) Canonical variables. Always import this once at the app entrypoint.
+import '@crewlethq/tokens/css';
+
+// 2) Optional: self-hosted Inter and JetBrains Mono (see "Fonts" below).
+//    Skip this if the app already loads its own fonts at the shell.
+import '@crewlethq/tokens/css/fonts';
+
+// 3) Required when the app renders @crewlethq/ui components and does not load
+//    the Material Symbols Outlined icon font itself. This is the only
+//    stylesheet in the package that contacts a third-party host (see
+//    "Material Symbols" below).
+import '@crewlethq/tokens/css/material-symbols';
+
+// 4) Optional: legacy aliases. Map short, unprefixed names (--accent,
+//    --bg-primary, --text-primary, --accent-pink, etc.) onto the canonical
+//    tokens. Use this while migrating an existing stylesheet that already
+//    uses those names, so it keeps working without a sweeping
+//    find-and-replace.
+import '@crewlethq/tokens/css/legacy';
+
+// Or read tokens at runtime / build theme objects
+import { color, spacing } from '@crewlethq/tokens';
+
+const accent = color.brand.primary;
+```
+
+CSS variables follow Style Dictionary's `--{group}-{path}` convention,
+for example `var(--color-brand-primary)` or `var(--spacing-4)`.
+
+## Fonts
+
+The design system uses two type families, both self-hosted inside this package and licensed under the SIL Open Font License 1.1:
+
+| Token | Family |
+| ----- | ------ |
+| `--font-family-sans` | Inter |
+| `--font-family-display` | An alias of `--font-family-sans` (see the note below) |
+| `--font-family-mono` | JetBrains Mono |
+
+`--font-family-display` is declared on `:root` as `var(--font-family-sans)`. A custom property that holds `var()` is resolved on the element that declares it and inherited as a finished value, so the alias follows an override of `--font-family-sans` declared on `:root` and no other. An app that overrides the sans family on `body`, a theme class or any narrower selector sets `--font-family-display` in the same rule.
+
+`@crewlethq/tokens/css/fonts` declares `@font-face` rules whose URLs point at the woff2 files in `fonts/`, relative to the stylesheet. A bundler (Vite, webpack, Rollup, esbuild) resolves those URLs and emits the files with the application's other assets, so the fonts render on a closed network and no request leaves for a third-party host. The files are also exported individually (for example `@crewlethq/tokens/fonts/inter-latin.woff2`) for apps that preload them or serve them from their own static directory.
+
+Versions, subsets and the replacement procedure are in [`fonts/README.md`](./fonts/README.md). The license text and copyright notices are in [`fonts/OFL.txt`](./fonts/OFL.txt), which must accompany the files wherever they are redistributed. An application that bundles the fonts ships it by importing `@crewlethq/tokens/fonts/OFL.txt` as an asset, so the bundler emits it beside the font files, or by copying its text into the application's third-party notices.
+
+## Material Symbols
+
+The `@crewlethq/ui` components render their glyphs (chevrons, close, copy, search and similar) as ligatures of the Material Symbols Outlined icon font, inside `<span class="material-symbols-outlined">`. That font is not part of this package. `@crewlethq/tokens/css/material-symbols` is a separate, opt-in stylesheet that loads it from Google Fonts: it requests `fonts.googleapis.com`, which serves the `@font-face` rule and the `material-symbols-outlined` class, and the browser then downloads the font from `fonts.gstatic.com`.
+
+Material Symbols is published by Google under the Apache License 2.0 (<https://github.com/google/material-design-icons>). Because this package only references the hosted font and redistributes none of its files, it carries no copy of that license.
+
+Keep `@crewlethq/tokens/css/fonts` and `@crewlethq/tokens/css/material-symbols` as separate imports: the first never leaves the application's own origin, so an app that must not contact third-party hosts imports only that one and loads the icon font from its own origin under the same class name.
+
+## Add or change a token
+
+1. Edit a JSON file in `tokens/`.
+2. Run `npm run build` (or `npm run dev` for watch).
+3. The generated `dist/` and `src/index.ts` are regenerated.
+
+Never edit files in `dist/` or `src/index.ts` directly. They are
+regenerated on every build.
+
+## License
+
+The tokens, stylesheets and scripts are licensed under the MIT License, whose text is in [`LICENSE`](./LICENSE). The font files in `fonts/` are licensed under the SIL Open Font License 1.1, whose text and copyright notices are in [`fonts/OFL.txt`](./fonts/OFL.txt). The package manifest records both as the SPDX expression `MIT AND OFL-1.1`.

package/dist/css/fonts.css

@@ -0,0 +1,46 @@
+/* Generated by style-dictionary. Self-hosted faces for the type families
+   referenced by --font-family-sans, --font-family-display (an alias of sans)
+   and --font-family-mono. Import this in addition to tokens.css when uilet
+   should own font loading:
+       import '@crewlethq/tokens/css';
+       import '@crewlethq/tokens/css/fonts';
+   Apps that already load these fonts at the shell can skip this file.
+
+   Inter and JetBrains Mono are licensed under the SIL Open Font License 1.1.
+   See fonts/OFL.txt in this package. */
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../../fonts/inter-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style: normal;
+  font-weight: 100 900;
+  font-display: swap;
+  src: url('../../fonts/inter-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 100 800;
+  font-display: swap;
+  src: url('../../fonts/jetbrains-mono-latin-ext.woff2') format('woff2');
+  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: 'JetBrains Mono';
+  font-style: normal;
+  font-weight: 100 800;
+  font-display: swap;
+  src: url('../../fonts/jetbrains-mono-latin.woff2') format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
+}

package/dist/css/legacy.css

@@ -0,0 +1,40 @@
+/* Generated by style-dictionary. Legacy aliases mapping short, unprefixed
+   variable names to the canonical token namespace. Import this in addition to
+   tokens.css when migrating an existing app: import '@crewlethq/tokens/css/legacy';
+   New code should reference --color-*, --spacing-*, --font-*, --radius-*,
+   --shadow-* directly.
+
+   The aliases are re-declared on the theme classes so they follow a theme
+   switch. Override an alias on the element that switches the theme (or a
+   descendant of it); an override on :root is replaced inside a themed body. */
+:root,
+body.theme-dark,
+body.theme-light {
+  /* Brand */
+  --accent: var(--color-brand-primary);
+  --primary-blue: var(--color-brand-primary);
+  --accent-purple: var(--color-brand-primary);
+  --accent-purple-deep: var(--color-brand-accent-deep);
+  --accent-pink: var(--color-brand-highlight);
+  --accent-slate: var(--color-brand-slate);
+  --accent-gradient: var(--color-brand-gradient);
+
+  /* Surface ramp */
+  --bg-primary: var(--color-surface-topbar);
+  --bg-secondary: var(--color-surface-topbar-lift);
+  --bg-tertiary: var(--color-surface-topbar-active);
+  --bg-elevated: var(--color-surface-topbar-active);
+
+  /* Text */
+  --text-primary: var(--color-text-primary);
+  --text-secondary: var(--color-text-secondary);
+  --text-tertiary: var(--color-text-tertiary);
+
+  /* Borders */
+  --border-color: var(--color-border-default);
+  --border-hover: var(--color-border-hover);
+
+  /* Type stacks */
+  --font-sans: var(--font-family-sans);
+  --font-mono: var(--font-family-mono);
+}

package/dist/css/material-symbols.css

@@ -0,0 +1,13 @@
+/* Generated by style-dictionary. Loads the Material Symbols Outlined icon
+   font that @crewlethq/ui components render through
+   <span class="material-symbols-outlined">. Import it when the app renders
+   those components and does not load the icon font itself:
+       import '@crewlethq/tokens/css/material-symbols';
+
+   This stylesheet requests fonts.googleapis.com, and the browser then
+   downloads the font from fonts.gstatic.com. Material Symbols is published
+   by Google under the Apache License 2.0
+   (https://github.com/google/material-design-icons). No part of it is
+   redistributed in this package. */
+
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=swap');

package/dist/css/themes.css

@@ -0,0 +1,57 @@
+/* Generated by style-dictionary. Dark and light theme overrides for the
+   canonical --color-* tokens. The base tokens.css already emits the dark
+   palette at :root; this file repaints the slots that change between
+   themes (the brand accent family is the same in both and is not
+   repainted). Import this in addition to tokens.css when an app needs
+   runtime theme switching:
+       import '@crewlethq/tokens/css';
+       import '@crewlethq/tokens/css/themes';
+   Apply by toggling body.theme-light or body.theme-dark. */
+
+/* Dark theme. Opaque surface ramp with a white primary action. */
+body.theme-dark {
+  --color-surface-background: #15171c;
+  --color-surface-subtle: #1c1e24;
+  --color-surface-muted: #1c1e24;
+  --color-surface-elevated: #22252b;
+  --color-surface-topbar: #15171c;
+  --color-surface-topbar-lift: #1c1e24;
+  --color-surface-topbar-active: #22252b;
+  --color-text-primary: #fafafa;
+  --color-text-secondary: #c9ced8;
+  --color-text-tertiary: #8c99ad;
+  --color-text-muted: rgba(255, 255, 255, 0.3);
+  --color-text-inverse: #09090b;
+  --color-brand-primary: #ffffff;
+  --color-brand-primary-hover: rgba(255, 255, 255, 0.9);
+  --color-brand-primary-active: rgba(255, 255, 255, 0.82);
+  --color-text-on-brand: #000000;
+  --color-border-default: #3f4145;
+  --color-border-hover: #4a4d52;
+  --color-border-strong: #3f4145;
+  --color-border-strong-hover: #4a4d52;
+}
+
+/* Light theme. White surfaces, near-black text and a black primary action. */
+body.theme-light {
+  --color-surface-background: #ffffff;
+  --color-surface-subtle: #f4f4f5;
+  --color-surface-muted: #f4f4f5;
+  --color-surface-elevated: #e3e3e6;
+  --color-surface-topbar: #ffffff;
+  --color-surface-topbar-lift: #f4f4f5;
+  --color-surface-topbar-active: #e3e3e6;
+  --color-text-primary: #09090b;
+  --color-text-secondary: #71717a;
+  --color-text-tertiary: rgba(25, 25, 28, 0.5);
+  --color-text-muted: rgba(0, 0, 0, 0.4);
+  --color-text-inverse: #fafafa;
+  --color-brand-primary: #000000;
+  --color-brand-primary-hover: rgba(0, 0, 0, 0.85);
+  --color-brand-primary-active: rgba(0, 0, 0, 0.7);
+  --color-text-on-brand: #ffffff;
+  --color-border-default: #e4e4e7;
+  --color-border-hover: #d4d4d8;
+  --color-border-strong: #e4e4e7;
+  --color-border-strong-hover: #d4d4d8;
+}

package/dist/css/tokens.css

@@ -0,0 +1,121 @@
+/**
+ * Do not edit directly, this file was auto-generated.
+ */
+
+:root {
+  --blur-sm: 6px; /** Subtle frosted glass. */
+  --blur-md: 10px;
+  --blur-lg: 16px; /** Standard frosted-panel effect for dropdowns and top bars. */
+  --blur-xl: 20px; /** Hero overlays and decorative panels. */
+  --blur-2xl: 24px; /** Aggressive backdrop blur for emphasis. */
+  --breakpoint-sm: 480px; /** Small phones. */
+  --breakpoint-md: 768px; /** Tablets. The primary layout switch between stacked and multi-column. */
+  --breakpoint-lg: 1024px; /** Small laptops. */
+  --breakpoint-xl: 1200px; /** Standard desktop. */
+  --breakpoint-2xl: 1600px; /** Large desktop, such as wide marketing hero containers. */
+  --color-brand-primary: #5469d4; /** Primary brand color and the fill of primary actions. The focus and glow shadows are tinted with it; the theme overrides repaint it per palette. */
+  --color-brand-primary-hover: #4759c2;
+  --color-brand-primary-active: #3b4caa;
+  --color-brand-accent: #5469d4; /** Interactive accent for selected, active and focus states (a checked checkbox, an active chip, a selected card). The same in both theme palettes. */
+  --color-brand-accent-hover: #6478e0;
+  --color-brand-accent-active: #4a5cc2;
+  --color-brand-accent-rgb: 84, 105, 212; /** The accent as an r, g, b triple for translucent tints: rgba(var(--color-brand-accent-rgb), 0.12). Rebind it together with the accent. */
+  --color-brand-accent-soft: rgba(84, 105, 212, 0.10); /** Translucent accent fill behind an active or selected control. */
+  --color-brand-accent-soft-strong: rgba(84, 105, 212, 0.32); /** Translucent accent border paired with the soft fill. */
+  --color-brand-accent-deep: #5c24ff; /** Deep purple. Distinct from primary; used as a gradient stop and rarely on its own. */
+  --color-brand-highlight: #ff3bff; /** Hot pink highlight. The first stop of the brand gradient; use sparingly on its own. */
+  --color-brand-slate: #3c4052; /** Muted blue-grey for low-emphasis informational fills (toast progress drains, hover halos, info notification tints). */
+  --color-brand-gradient: linear-gradient(90deg, #ff3bff 0%, #ecbfbf 38%, #5c24ff 76%, #d94fd5 100%); /** Brand gradient. The one 4-stop definition every gradient surface uses, so marketing and product surfaces match. */
+  --color-surface-background: #000000;
+  --color-surface-subtle: rgba(255, 255, 255, 0.05);
+  --color-surface-muted: rgba(255, 255, 255, 0.08);
+  --color-surface-elevated: rgba(255, 255, 255, 0.12);
+  --color-surface-topbar: #15171c;
+  --color-surface-topbar-lift: #1c1e24;
+  --color-surface-topbar-active: #22252b;
+  --color-surface-inverse: #ffffff;
+  --color-text-primary: #fafafa; /** Slightly off-white to reduce eye strain on dark surfaces. */
+  --color-text-secondary: #c9ced8;
+  --color-text-tertiary: #8c99ad;
+  --color-text-muted: rgba(255, 255, 255, 0.3);
+  --color-text-on-brand: #ffffff;
+  --color-text-inverse: #09090b;
+  --color-border-default: rgba(255, 255, 255, 0.08);
+  --color-border-hover: rgba(255, 255, 255, 0.15);
+  --color-border-strong: #3f4145;
+  --color-border-strong-hover: #4a4d52; /** Solid dark-mode hover border. Use when hover should be a solid color instead of a translucent overlay. */
+  --color-feedback-success: #46a758; /** Running and healthy status green for status dots, badges and success icons. Softer than Tailwind green-500 so it does not glare on dark surfaces. */
+  --color-feedback-warning: #f59e0b;
+  --color-feedback-danger: #ef4444; /** Semantic error red for destructive actions and failure states. */
+  --color-feedback-danger-hover: #dc2626;
+  --color-feedback-info: #3b82f6;
+  --motion-duration-instant: 75ms; /** Tooltip flash, dropdown indicator nudge. */
+  --motion-duration-fast: 120ms; /** Menu hover and active state changes. */
+  --motion-duration-base: 150ms; /** Default UI transition. */
+  --motion-duration-moderate: 200ms; /** Nav hover, topbar background changes. */
+  --motion-duration-slow: 300ms; /** Modal enter, drawer slide. */
+  --motion-easing-default: ease;
+  --motion-easing-out: ease-out;
+  --motion-easing-in-out: ease-in-out;
+  --motion-easing-spring: cubic-bezier(0.34, 1.56, 0.64, 1); /** Slight overshoot for emphasized entries. */
+  --radius-none: 0px;
+  --radius-xs: 4px;
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  --radius-2xl: 24px;
+  --radius-pill: 999px;
+  --radius-circle: 50%; /** Avatars, status dots, circular badges. */
+  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.2);
+  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.15);
+  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.25);
+  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.3);
+  --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.4);
+  --shadow-2xl: 0 16px 64px rgba(0, 0, 0, 0.6);
+  --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.1); /** Standard card depth on dark surfaces. */
+  --shadow-rim-lit: 0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04); /** Card with a subtle inset rim light, for cards that need to lift off an already elevated surface. */
+  --shadow-focus: 0 0 0 3px rgba(84, 105, 212, 0.35); /** Focus ring tinted with the canonical brand color. */
+  --shadow-glow: 0 4px 24px rgba(84, 105, 212, 0.3);
+  --spacing-0: 0px;
+  --spacing-1: 4px;
+  --spacing-2: 8px;
+  --spacing-3: 12px;
+  --spacing-4: 16px;
+  --spacing-5: 20px;
+  --spacing-6: 24px;
+  --spacing-7: 32px;
+  --spacing-8: 40px;
+  --spacing-9: 48px;
+  --spacing-10: 64px;
+  --spacing-11: 80px;
+  --font-family-sans: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'; /** Interface and body type. Inter is self-hosted by @crewlethq/tokens/css/fonts; the system stack covers the moment before it loads and any app that does not import that stylesheet. */
+  --font-family-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; /** Code, identifiers and tabular values. JetBrains Mono is self-hosted by @crewlethq/tokens/css/fonts. */
+  --font-size-xs: 12px;
+  --font-size-sm: 14px;
+  --font-size-md: 16px;
+  --font-size-lg: 18px;
+  --font-size-xl: 20px;
+  --font-size-2xl: 24px;
+  --font-size-3xl: 32px;
+  --font-size-4xl: 48px;
+  --font-size-5xl: 64px;
+  --font-weight-regular: 400;
+  --font-weight-medium: 500;
+  --font-weight-semibold: 600;
+  --font-weight-bold: 700;
+  --font-weight-extrabold: 800;
+  --font-line-height-tight: 1.2;
+  --font-line-height-snug: 1.4;
+  --font-line-height-normal: 1.5;
+  --font-line-height-relaxed: 1.7;
+  --z-index-base: 0;
+  --z-index-raised: 1; /** Lifts an element above its siblings inside its own stacking context, such as a control layered over a card. */
+  --z-index-sticky: 10; /** Sticky headers and pinned columns within the page flow. */
+  --z-index-dropdown: 100; /** In-flow menus that stay inside their container rather than portaling to the body. */
+  --z-index-overlay: 200; /** In-page overlays such as drawers and scrims that cover page chrome but not dialogs. */
+  --z-index-modal: 9999; /** Dialog backdrop and frame. High enough to clear any page chrome an application stacks with its own numbers. */
+  --z-index-popover: 10000; /** Floating panels portaled to the body (Select menus, Popover, date pickers). Above modal because they are routinely opened from inside a dialog, and a panel under the backdrop is hidden and swallows clicks. */
+  --z-index-toast: 10001; /** Top of the stack. A toast reports the outcome of what somebody just did, often in a dialog or from a menu opened inside one, so it sits above both. */
+  --font-family-display: var(--font-family-sans); /** Headings and other display type. An alias of the sans family, so a heading costs no extra download. Components keep reading this role token so a dedicated display face would land in one place. */
+}

package/dist/index.d.ts

@@ -0,0 +1,155 @@
+export declare const blur: {
+    readonly sm: "6px";
+    readonly md: "10px";
+    readonly lg: "16px";
+    readonly xl: "20px";
+    readonly "2xl": "24px";
+};
+export declare const breakpoint: {
+    readonly sm: "480px";
+    readonly md: "768px";
+    readonly lg: "1024px";
+    readonly xl: "1200px";
+    readonly "2xl": "1600px";
+};
+export declare const color: {
+    readonly brand: {
+        readonly primary: "#5469d4";
+        readonly primaryHover: "#4759c2";
+        readonly primaryActive: "#3b4caa";
+        readonly accent: "#5469d4";
+        readonly accentHover: "#6478e0";
+        readonly accentActive: "#4a5cc2";
+        readonly accentRgb: "84, 105, 212";
+        readonly accentSoft: "rgba(84, 105, 212, 0.10)";
+        readonly accentSoftStrong: "rgba(84, 105, 212, 0.32)";
+        readonly accentDeep: "#5c24ff";
+        readonly highlight: "#ff3bff";
+        readonly slate: "#3c4052";
+        readonly gradient: "linear-gradient(90deg, #ff3bff 0%, #ecbfbf 38%, #5c24ff 76%, #d94fd5 100%)";
+    };
+    readonly surface: {
+        readonly background: "#000000";
+        readonly subtle: "rgba(255, 255, 255, 0.05)";
+        readonly muted: "rgba(255, 255, 255, 0.08)";
+        readonly elevated: "rgba(255, 255, 255, 0.12)";
+        readonly topbar: "#15171c";
+        readonly topbarLift: "#1c1e24";
+        readonly topbarActive: "#22252b";
+        readonly inverse: "#ffffff";
+    };
+    readonly text: {
+        readonly primary: "#fafafa";
+        readonly secondary: "#c9ced8";
+        readonly tertiary: "#8c99ad";
+        readonly muted: "rgba(255, 255, 255, 0.3)";
+        readonly onBrand: "#ffffff";
+        readonly inverse: "#09090b";
+    };
+    readonly border: {
+        readonly default: "rgba(255, 255, 255, 0.08)";
+        readonly hover: "rgba(255, 255, 255, 0.15)";
+        readonly strong: "#3f4145";
+        readonly strongHover: "#4a4d52";
+    };
+    readonly feedback: {
+        readonly success: "#46a758";
+        readonly warning: "#f59e0b";
+        readonly danger: "#ef4444";
+        readonly dangerHover: "#dc2626";
+        readonly info: "#3b82f6";
+    };
+};
+export declare const motion: {
+    readonly duration: {
+        readonly instant: "75ms";
+        readonly fast: "120ms";
+        readonly base: "150ms";
+        readonly moderate: "200ms";
+        readonly slow: "300ms";
+    };
+    readonly easing: {
+        readonly default: "ease";
+        readonly out: "ease-out";
+        readonly inOut: "ease-in-out";
+        readonly spring: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+    };
+};
+export declare const radius: {
+    readonly none: "0px";
+    readonly xs: "4px";
+    readonly sm: "6px";
+    readonly md: "8px";
+    readonly lg: "12px";
+    readonly xl: "16px";
+    readonly "2xl": "24px";
+    readonly pill: "999px";
+    readonly circle: "50%";
+};
+export declare const shadow: {
+    readonly xs: "0 1px 2px rgba(0, 0, 0, 0.2)";
+    readonly sm: "0 2px 8px rgba(0, 0, 0, 0.15)";
+    readonly md: "0 4px 12px rgba(0, 0, 0, 0.25)";
+    readonly lg: "0 8px 24px rgba(0, 0, 0, 0.3)";
+    readonly xl: "0 12px 32px rgba(0, 0, 0, 0.4)";
+    readonly "2xl": "0 16px 64px rgba(0, 0, 0, 0.6)";
+    readonly card: "0 8px 24px rgba(0, 0, 0, 0.1)";
+    readonly rimLit: "0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04)";
+    readonly focus: "0 0 0 3px rgba(84, 105, 212, 0.35)";
+    readonly glow: "0 4px 24px rgba(84, 105, 212, 0.3)";
+};
+export declare const spacing: {
+    readonly "0": "0px";
+    readonly "1": "4px";
+    readonly "2": "8px";
+    readonly "3": "12px";
+    readonly "4": "16px";
+    readonly "5": "20px";
+    readonly "6": "24px";
+    readonly "7": "32px";
+    readonly "8": "40px";
+    readonly "9": "48px";
+    readonly "10": "64px";
+    readonly "11": "80px";
+};
+export declare const font: {
+    readonly family: {
+        readonly sans: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
+        readonly display: "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'";
+        readonly mono: "'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace";
+    };
+    readonly size: {
+        readonly xs: "12px";
+        readonly sm: "14px";
+        readonly md: "16px";
+        readonly lg: "18px";
+        readonly xl: "20px";
+        readonly "2xl": "24px";
+        readonly "3xl": "32px";
+        readonly "4xl": "48px";
+        readonly "5xl": "64px";
+    };
+    readonly weight: {
+        readonly regular: "400";
+        readonly medium: "500";
+        readonly semibold: "600";
+        readonly bold: "700";
+        readonly extrabold: "800";
+    };
+    readonly lineHeight: {
+        readonly tight: "1.2";
+        readonly snug: "1.4";
+        readonly normal: "1.5";
+        readonly relaxed: "1.7";
+    };
+};
+export declare const zIndex: {
+    readonly base: "0";
+    readonly raised: "1";
+    readonly sticky: "10";
+    readonly dropdown: "100";
+    readonly overlay: "200";
+    readonly modal: "9999";
+    readonly popover: "10000";
+    readonly toast: "10001";
+};

package/dist/index.js

@@ -0,0 +1,156 @@
+/* Generated by style-dictionary. Do not edit. */
+export const blur = {
+    "sm": "6px",
+    "md": "10px",
+    "lg": "16px",
+    "xl": "20px",
+    "2xl": "24px"
+};
+export const breakpoint = {
+    "sm": "480px",
+    "md": "768px",
+    "lg": "1024px",
+    "xl": "1200px",
+    "2xl": "1600px"
+};
+export const color = {
+    "brand": {
+        "primary": "#5469d4",
+        "primaryHover": "#4759c2",
+        "primaryActive": "#3b4caa",
+        "accent": "#5469d4",
+        "accentHover": "#6478e0",
+        "accentActive": "#4a5cc2",
+        "accentRgb": "84, 105, 212",
+        "accentSoft": "rgba(84, 105, 212, 0.10)",
+        "accentSoftStrong": "rgba(84, 105, 212, 0.32)",
+        "accentDeep": "#5c24ff",
+        "highlight": "#ff3bff",
+        "slate": "#3c4052",
+        "gradient": "linear-gradient(90deg, #ff3bff 0%, #ecbfbf 38%, #5c24ff 76%, #d94fd5 100%)"
+    },
+    "surface": {
+        "background": "#000000",
+        "subtle": "rgba(255, 255, 255, 0.05)",
+        "muted": "rgba(255, 255, 255, 0.08)",
+        "elevated": "rgba(255, 255, 255, 0.12)",
+        "topbar": "#15171c",
+        "topbarLift": "#1c1e24",
+        "topbarActive": "#22252b",
+        "inverse": "#ffffff"
+    },
+    "text": {
+        "primary": "#fafafa",
+        "secondary": "#c9ced8",
+        "tertiary": "#8c99ad",
+        "muted": "rgba(255, 255, 255, 0.3)",
+        "onBrand": "#ffffff",
+        "inverse": "#09090b"
+    },
+    "border": {
+        "default": "rgba(255, 255, 255, 0.08)",
+        "hover": "rgba(255, 255, 255, 0.15)",
+        "strong": "#3f4145",
+        "strongHover": "#4a4d52"
+    },
+    "feedback": {
+        "success": "#46a758",
+        "warning": "#f59e0b",
+        "danger": "#ef4444",
+        "dangerHover": "#dc2626",
+        "info": "#3b82f6"
+    }
+};
+export const motion = {
+    "duration": {
+        "instant": "75ms",
+        "fast": "120ms",
+        "base": "150ms",
+        "moderate": "200ms",
+        "slow": "300ms"
+    },
+    "easing": {
+        "default": "ease",
+        "out": "ease-out",
+        "inOut": "ease-in-out",
+        "spring": "cubic-bezier(0.34, 1.56, 0.64, 1)"
+    }
+};
+export const radius = {
+    "none": "0px",
+    "xs": "4px",
+    "sm": "6px",
+    "md": "8px",
+    "lg": "12px",
+    "xl": "16px",
+    "2xl": "24px",
+    "pill": "999px",
+    "circle": "50%"
+};
+export const shadow = {
+    "xs": "0 1px 2px rgba(0, 0, 0, 0.2)",
+    "sm": "0 2px 8px rgba(0, 0, 0, 0.15)",
+    "md": "0 4px 12px rgba(0, 0, 0, 0.25)",
+    "lg": "0 8px 24px rgba(0, 0, 0, 0.3)",
+    "xl": "0 12px 32px rgba(0, 0, 0, 0.4)",
+    "2xl": "0 16px 64px rgba(0, 0, 0, 0.6)",
+    "card": "0 8px 24px rgba(0, 0, 0, 0.1)",
+    "rimLit": "0 4px 24px rgba(0, 0, 0, 0.3), inset 0 1px 0 rgba(255, 255, 255, 0.04)",
+    "focus": "0 0 0 3px rgba(84, 105, 212, 0.35)",
+    "glow": "0 4px 24px rgba(84, 105, 212, 0.3)"
+};
+export const spacing = {
+    "0": "0px",
+    "1": "4px",
+    "2": "8px",
+    "3": "12px",
+    "4": "16px",
+    "5": "20px",
+    "6": "24px",
+    "7": "32px",
+    "8": "40px",
+    "9": "48px",
+    "10": "64px",
+    "11": "80px"
+};
+export const font = {
+    "family": {
+        "sans": "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+        "display": "Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji'",
+        "mono": "'JetBrains Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace"
+    },
+    "size": {
+        "xs": "12px",
+        "sm": "14px",
+        "md": "16px",
+        "lg": "18px",
+        "xl": "20px",
+        "2xl": "24px",
+        "3xl": "32px",
+        "4xl": "48px",
+        "5xl": "64px"
+    },
+    "weight": {
+        "regular": "400",
+        "medium": "500",
+        "semibold": "600",
+        "bold": "700",
+        "extrabold": "800"
+    },
+    "lineHeight": {
+        "tight": "1.2",
+        "snug": "1.4",
+        "normal": "1.5",
+        "relaxed": "1.7"
+    }
+};
+export const zIndex = {
+    "base": "0",
+    "raised": "1",
+    "sticky": "10",
+    "dropdown": "100",
+    "overlay": "200",
+    "modal": "9999",
+    "popover": "10000",
+    "toast": "10001"
+};

package/fonts/OFL.txt

@@ -0,0 +1,101 @@
+The faces in this directory are redistributed under the SIL Open Font License,
+Version 1.1. They are the `latin` and `latin-ext` subsets that Google Fonts
+serves for these families: subsets and partial instances of the upstream
+variable fonts, and therefore Modified Versions under the definitions below.
+Neither family declares a Reserved Font Name. fonts/README.md records where
+each file was downloaded from, and SHA256SUMS its checksum.
+
+  Inter
+    Copyright (c) 2016 The Inter Project Authors
+    https://github.com/rsms/inter
+
+  JetBrains Mono
+    Copyright (c) 2020 The JetBrains Mono Project Authors
+    https://github.com/JetBrains/JetBrainsMono
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/fonts/README.md

@@ -0,0 +1,41 @@
+# Fonts
+
+The type families behind `--font-family-sans`, `--font-family-display` (an alias of sans) and `--font-family-mono`. `@crewlethq/tokens/css/fonts` declares an `@font-face` rule for every file below with a relative URL, so a bundler copies the files next to the application and no font is fetched from a third-party host.
+
+| Family | Version | Axes | Files | License | Upstream |
+| ------ | ------- | ---- | ----- | ------- | -------- |
+| Inter | 4.001 | `wght` 100 to 900 (optical size fixed at 14) | `inter-latin.woff2`, `inter-latin-ext.woff2` | SIL Open Font License 1.1 | <https://github.com/rsms/inter> |
+| JetBrains Mono | 2.211 | `wght` 100 to 800 | `jetbrains-mono-latin.woff2`, `jetbrains-mono-latin-ext.woff2` | SIL Open Font License 1.1 | <https://github.com/JetBrains/JetBrainsMono> |
+
+The version and axes are read from each file's `name` and `fvar` tables. Upright style only; a browser synthesises italics.
+
+## Provenance
+
+The files are the `latin` and `latin-ext` subsets that Google Fonts serves, downloaded unchanged from these stylesheet responses (requested with a current Chrome user agent, which selects variable woff2 files):
+
+| Stylesheet request | Subset | File | Downloaded from |
+| ------------------ | ------ | ---- | --------------- |
+| `https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap` | latin | `inter-latin.woff2` | `https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa1ZL7W0Q5nw.woff2` |
+| same | latin-ext | `inter-latin-ext.woff2` | `https://fonts.gstatic.com/s/inter/v20/UcC73FwrK3iLTeHuS_nVMrMxCp50SjIa25L7W0Q5n-wU.woff2` |
+| `https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@100..800&display=swap` | latin | `jetbrains-mono-latin.woff2` | `https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbV2o-flEEny0FZhsfKu5WU4xD7OwGtT0rU.woff2` |
+| same | latin-ext | `jetbrains-mono-latin-ext.woff2` | `https://fonts.gstatic.com/s/jetbrainsmono/v24/tDbV2o-flEEny0FZhsfKu5WU4xD1OwGtT0rU3BE.woff2` |
+
+[`SHA256SUMS`](./SHA256SUMS) holds the checksum of every file. `shasum -a 256 -c SHA256SUMS` verifies them, and the package build fails when a file does not match its checksum or has none.
+
+Google Fonts builds these subsets from the upstream variable fonts: it keeps only the glyphs in each subset's unicode range, fixes Inter's optical size axis at 14 and drops the license description from the `name` table. Under the definitions in the OFL that makes them Modified Versions. That is permitted, because neither family declares a Reserved Font Name, and they remain under the OFL. The copyright notices are preserved in each file and in `OFL.txt`.
+
+The `latin` subset covers basic Latin, Latin-1 and common punctuation; `latin-ext` adds the extended Latin alphabets. Each `@font-face` rule carries the same `unicode-range` the stylesheet response declares, so a page that renders only basic Latin text downloads one file per family. Other scripts (Cyrillic, Greek, Vietnamese) are not included and render in the fallback system fonts of the family stack.
+
+## License
+
+Both families are licensed under the SIL Open Font License, Version 1.1. [`OFL.txt`](./OFL.txt) holds the copyright notices and the full license text. The OFL requires that text to travel with the font files wherever they are redistributed, and it continues to apply to these files whatever license covers the rest of this package.
+
+An application that bundles the fonts meets that condition by shipping `OFL.txt` with them: import `@crewlethq/tokens/fonts/OFL.txt` as an asset so the bundler emits it beside the font files, or copy its text into the application's third-party notices.
+
+## Replacing a file
+
+1. Request the stylesheet in the table above (with the family's full `wght` range) using a current Chrome user agent, and download the `latin` and `latin-ext` woff2 files it references. Keep the file names.
+2. Read the version and the axes from each file (for example with `fonttools ttx -t name -t fvar -t STAT`).
+3. Regenerate the checksums with `shasum -a 256 *.woff2 > SHA256SUMS` in this directory.
+4. Update both tables above, the `weight` range for the family in `scripts/build.mjs`, the unicode ranges there if the stylesheet response changed them, and the copyright lines in `OFL.txt` if upstream changed them.
+5. Run `npm run build` in this package. The build fails if a file referenced by `scripts/build.mjs` is missing or does not match `SHA256SUMS`.

package/fonts/SHA256SUMS

@@ -0,0 +1,4 @@
+a28eb6d3ccb534ae0c94ca999371df024aab60b08c3c8a5720ee9e32fa0faaa2  inter-latin-ext.woff2
+c940764593d0fe5d596be327ca7558855e018039fb78509aa21921fd3644c3e4  inter-latin.woff2
+7db7affbce1fdee69c1ffc2641bbca289b049867f524c9d861fe35ab6670bf29  jetbrains-mono-latin-ext.woff2
+1e06740a02a443fb7f3eeda8fcaa685a0f6c620e3f01e6666e847295469ce3ad  jetbrains-mono-latin.woff2

package/package.json

@@ -0,0 +1,52 @@
+{
+  "name": "@crewlethq/tokens",
+  "version": "0.2.0",
+  "description": "Crewlet design tokens. Single JSON source compiled to CSS variables and typed JS modules.",
+  "license": "MIT AND OFL-1.1",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/crewlet/uilet.git",
+    "directory": "packages/tokens"
+  },
+  "homepage": "https://github.com/crewlet/uilet/tree/main/packages/tokens#readme",
+  "bugs": {
+    "url": "https://github.com/crewlet/uilet/issues"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./css": "./dist/css/tokens.css",
+    "./css/fonts": "./dist/css/fonts.css",
+    "./css/legacy": "./dist/css/legacy.css",
+    "./css/material-symbols": "./dist/css/material-symbols.css",
+    "./css/themes": "./dist/css/themes.css",
+    "./fonts/*": "./fonts/*"
+  },
+  "files": [
+    "dist",
+    "fonts"
+  ],
+  "scripts": {
+    "build": "node scripts/build.mjs && tsc -p tsconfig.json",
+    "dev": "node scripts/build.mjs --watch",
+    "lint": "eslint scripts",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "clean": "rm -rf dist src/index.ts"
+  },
+  "devDependencies": {
+    "style-dictionary": "^5.5.3"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  }
+}