@interstellarforge/matter-tokens 0.0.0-stage → 0.1.0

package/LICENSE

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

@@ -1,3 +1,37 @@
-# Temporary Holding Version
+# @interstellarforge/matter-tokens
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+Framework-agnostic design tokens for Matter. Source: [DTCG Format Module 2025.10](https://www.designtokens.org/tr/2025.10/format/) (Final Community Group Report), built with Style Dictionary 5.
+
+## Layers
+
+| Layer     | Where                                      | Notes                                                          |
+| --------- | ------------------------------------------ | -------------------------------------------------------------- |
+| Primitive | `tokens/core.json`                         | space, radius, type scale, weights, line-height, fonts, motion |
+| Semantic  | `tokens/themes/<theme>/<light\|dark>.json` | colour roles and shadows; one file per theme and colour mode   |
+| Theme     | `tokens/themes/<theme>/theme.json`         | theme-wide values, e.g. `control-radius`                       |
+| Density   | `tokens/density/<name>.json`               | control height, padding, gap, font size, row height            |
+
+Colour primitives are not a separate layer yet: themes hold their palette directly (ADR-006: simplicity before abstraction). Component tokens only when proven necessary.
+
+## Naming
+
+CSS custom property: `--m-<path>`; the leading `color` group is dropped. `color.surface.raised` becomes `--m-surface-raised`, `space.4` becomes `--m-space-4`.
+
+## Switching
+
+Attributes on `<html>`:
+
+- `data-theme="deep-space|professional"` (default: `deep-space`)
+- `data-color-mode="light|dark"` (default: OS preference; a theme without light mode uses its only mode)
+- `data-density="compact|comfortable|touch"` (default: `comfortable`; may be set on any element)
+
+Use `themeInitScript` from `@interstellarforge/matter-css` in `<head>` to apply stored values before first paint.
+
+## Adding a theme
+
+1. Create `tokens/themes/<name>/theme.json` plus at least one mode file with the same token names as the others.
+2. `pnpm build` fails when token sets differ or text contrast is below 4.5:1.
+
+## Scripts
+
+`pnpm build` writes `dist/` (CSS, `index.js`/`index.d.ts`, `tokens.index.json`); `pnpm test` runs Vitest.

package/dist/index.d.ts

@@ -0,0 +1,12 @@
+export type ThemeName = 'deep-space' | 'professional';
+export type ColorMode = 'light' | 'dark';
+export type Density = 'comfortable' | 'compact' | 'touch';
+export type TokenName = 'accent' | 'accent-hover' | 'accent-on' | 'accent-soft' | 'accent-soft-on' | 'bg' | 'border' | 'border-strong' | 'control-fs' | 'control-gap' | 'control-h' | 'control-pad-x' | 'control-radius' | 'danger' | 'danger-soft' | 'duration-base' | 'duration-fast' | 'duration-slow' | 'ease' | 'focus' | 'focus-halo' | 'font-mono' | 'font-sans' | 'fs-2xl' | 'fs-base' | 'fs-lg' | 'fs-md' | 'fs-sm' | 'fs-xl' | 'fs-xs' | 'fw-bold' | 'fw-medium' | 'fw-regular' | 'fw-semibold' | 'info' | 'info-soft' | 'lh-normal' | 'lh-relaxed' | 'lh-tight' | 'overlay' | 'placeholder' | 'primary' | 'primary-hover' | 'primary-on' | 'radius-lg' | 'radius-md' | 'radius-pill' | 'radius-sm' | 'radius-xl' | 'radius-xs' | 'row-h' | 'shadow-lg' | 'shadow-md' | 'shadow-sm' | 'sidebar' | 'space-0' | 'space-1' | 'space-10' | 'space-12' | 'space-2' | 'space-3' | 'space-4' | 'space-5' | 'space-6' | 'space-8' | 'success' | 'success-soft' | 'surface' | 'surface-disabled' | 'surface-hover' | 'surface-raised' | 'surface-soft' | 'text' | 'text-muted' | 'text-subtle' | 'warning' | 'warning-soft';
+export declare const themes: readonly ThemeName[];
+export declare const colorModes: readonly ColorMode[];
+export declare const densities: readonly Density[];
+export declare const defaultTheme: ThemeName;
+export declare const defaultDensity: Density;
+export declare const modesByTheme: Readonly<Record<ThemeName, readonly ColorMode[]>>;
+export declare const tokenNames: readonly TokenName[];
+export declare function cssVar(name: TokenName): string;

package/dist/index.js

@@ -0,0 +1,8 @@
+export const themes = ['deep-space', 'professional'];
+export const colorModes = ['light', 'dark'];
+export const densities = ['comfortable', 'compact', 'touch'];
+export const defaultTheme = 'deep-space';
+export const defaultDensity = 'comfortable';
+export const modesByTheme = {"deep-space":["light","dark"],"professional":["light","dark"]};
+export const tokenNames = ['accent', 'accent-hover', 'accent-on', 'accent-soft', 'accent-soft-on', 'bg', 'border', 'border-strong', 'control-fs', 'control-gap', 'control-h', 'control-pad-x', 'control-radius', 'danger', 'danger-soft', 'duration-base', 'duration-fast', 'duration-slow', 'ease', 'focus', 'focus-halo', 'font-mono', 'font-sans', 'fs-2xl', 'fs-base', 'fs-lg', 'fs-md', 'fs-sm', 'fs-xl', 'fs-xs', 'fw-bold', 'fw-medium', 'fw-regular', 'fw-semibold', 'info', 'info-soft', 'lh-normal', 'lh-relaxed', 'lh-tight', 'overlay', 'placeholder', 'primary', 'primary-hover', 'primary-on', 'radius-lg', 'radius-md', 'radius-pill', 'radius-sm', 'radius-xl', 'radius-xs', 'row-h', 'shadow-lg', 'shadow-md', 'shadow-sm', 'sidebar', 'space-0', 'space-1', 'space-10', 'space-12', 'space-2', 'space-3', 'space-4', 'space-5', 'space-6', 'space-8', 'success', 'success-soft', 'surface', 'surface-disabled', 'surface-hover', 'surface-raised', 'surface-soft', 'text', 'text-muted', 'text-subtle', 'warning', 'warning-soft'];
+export const cssVar = (name) => `var(--m-${name})`;

package/dist/matter-tokens.css

@@ -0,0 +1,378 @@
+/* Generated by @interstellarforge/matter-tokens. Do not edit. */
+@layer matter.reset, matter.tokens, matter.base, matter.components;
+@layer matter.tokens {
+  :root {
+    --m-duration-base: 0.15s;
+    --m-duration-fast: 0.12s;
+    --m-duration-slow: 0.22s;
+    --m-ease: cubic-bezier(0.2, 0.7, 0.25, 1);
+    --m-font-mono: ui-monospace, "SFMono-Regular", Consolas, monospace;
+    --m-font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+    --m-fs-2xl: 28px;
+    --m-fs-base: 15px;
+    --m-fs-lg: 17px;
+    --m-fs-md: 14px;
+    --m-fs-sm: 12px;
+    --m-fs-xl: 22px;
+    --m-fs-xs: 11px;
+    --m-fw-bold: 700;
+    --m-fw-medium: 500;
+    --m-fw-regular: 400;
+    --m-fw-semibold: 600;
+    --m-lh-normal: 1.45;
+    --m-lh-relaxed: 1.6;
+    --m-lh-tight: 1.2;
+    --m-radius-lg: 16px;
+    --m-radius-md: 12px;
+    --m-radius-pill: 9999px;
+    --m-radius-sm: 8px;
+    --m-radius-xl: 22px;
+    --m-radius-xs: 5px;
+    --m-space-0: 0px;
+    --m-space-1: 4px;
+    --m-space-10: 40px;
+    --m-space-12: 48px;
+    --m-space-2: 8px;
+    --m-space-3: 12px;
+    --m-space-4: 16px;
+    --m-space-5: 20px;
+    --m-space-6: 24px;
+    --m-space-8: 32px;
+  }
+  :root,
+  [data-density="comfortable"] {
+    --m-control-fs: 14px;
+    --m-control-gap: 12px;
+    --m-control-h: 36px;
+    --m-control-pad-x: 14px;
+    --m-row-h: 48px;
+  }
+  [data-density="compact"] {
+    --m-control-fs: 12px;
+    --m-control-gap: 8px;
+    --m-control-h: 28px;
+    --m-control-pad-x: 10px;
+    --m-row-h: 36px;
+  }
+  [data-density="touch"] {
+    --m-control-fs: 17px;
+    --m-control-gap: 16px;
+    --m-control-h: 48px;
+    --m-control-pad-x: 20px;
+    --m-row-h: 64px;
+  }
+  :root[data-theme="deep-space"],
+  :root:not([data-theme]) {
+    color-scheme: light;
+    --m-control-radius: 8px;
+    --m-accent: #165dba;
+    --m-accent-hover: #0e4e9e;
+    --m-accent-on: #ffffff;
+    --m-accent-soft: #e1edff;
+    --m-accent-soft-on: #164c9c;
+    --m-bg: #f3f6fb;
+    --m-border: #cdd9e8;
+    --m-border-strong: #98acc4;
+    --m-danger: #b22342;
+    --m-danger-soft: #fce8ed;
+    --m-focus: #165dba;
+    --m-focus-halo: #ffffff;
+    --m-info: #155bad;
+    --m-info-soft: #e2efff;
+    --m-overlay: rgba(7, 16, 32, 0.54);
+    --m-placeholder: #62758f;
+    --m-primary: #165dba;
+    --m-primary-hover: #0e4e9e;
+    --m-primary-on: #ffffff;
+    --m-shadow-lg: 0px 24px 64px 0px rgb(3.53% 9.41% 20% / 0.18);
+    --m-shadow-md: 0px 8px 28px 0px rgb(5.49% 14.51% 29.41% / 0.1);
+    --m-shadow-sm: 0px 1px 3px 0px rgb(4.31% 12.94% 25.1% / 0.07);
+    --m-sidebar: #ffffff;
+    --m-success: #086f50;
+    --m-success-soft: #ddf6eb;
+    --m-surface: #ffffff;
+    --m-surface-disabled: #ebeff6;
+    --m-surface-hover: #e3edf9;
+    --m-surface-raised: #ffffff;
+    --m-surface-soft: #eaf1fa;
+    --m-text: #11243e;
+    --m-text-muted: #435b78;
+    --m-text-subtle: #536b87;
+    --m-warning: #865200;
+    --m-warning-soft: #fff0d6;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root[data-theme="deep-space"]:not([data-color-mode="light"]),
+    :root:not([data-theme]):not([data-color-mode="light"]) {
+      color-scheme: dark;
+      --m-accent: #5aa9ff;
+      --m-accent-hover: #82bbff;
+      --m-accent-on: #04152b;
+      --m-accent-soft: #12335c;
+      --m-accent-soft-on: #cfe4ff;
+      --m-bg: #060e1d;
+      --m-border: #2a4662;
+      --m-border-strong: #4c6a8b;
+      --m-danger: #ff8da0;
+      --m-danger-soft: #4a1d2c;
+      --m-focus: #8fc4ff;
+      --m-focus-halo: #060e1d;
+      --m-info: #8fc4ff;
+      --m-info-soft: #12335c;
+      --m-overlay: rgba(0, 5, 13, 0.72);
+      --m-placeholder: #9fb3ca;
+      --m-primary: #1b6fd9;
+      --m-primary-hover: #2a82f0;
+      --m-primary-on: #ffffff;
+      --m-shadow-lg: 0px 24px 66px 0px rgb(0% 0% 0% / 0.55);
+      --m-shadow-md: 0px 12px 32px 0px rgb(0% 0% 0% / 0.32);
+      --m-shadow-sm: 0px 1px 2px 0px rgb(0% 0% 0% / 0.3);
+      --m-sidebar: #071322;
+      --m-success: #3fe0b0;
+      --m-success-soft: #0f3a35;
+      --m-surface: #0d1c30;
+      --m-surface-disabled: #14233a;
+      --m-surface-hover: #17304d;
+      --m-surface-raised: #13263d;
+      --m-surface-soft: #112238;
+      --m-text: #f4f7fc;
+      --m-text-muted: #b7c7d9;
+      --m-text-subtle: #9fb3ca;
+      --m-warning: #ffa24d;
+      --m-warning-soft: #3a2812;
+    }
+  }
+  :root[data-theme="deep-space"][data-color-mode="light"],
+  :root:not([data-theme])[data-color-mode="light"] {
+    color-scheme: light;
+    --m-accent: #165dba;
+    --m-accent-hover: #0e4e9e;
+    --m-accent-on: #ffffff;
+    --m-accent-soft: #e1edff;
+    --m-accent-soft-on: #164c9c;
+    --m-bg: #f3f6fb;
+    --m-border: #cdd9e8;
+    --m-border-strong: #98acc4;
+    --m-danger: #b22342;
+    --m-danger-soft: #fce8ed;
+    --m-focus: #165dba;
+    --m-focus-halo: #ffffff;
+    --m-info: #155bad;
+    --m-info-soft: #e2efff;
+    --m-overlay: rgba(7, 16, 32, 0.54);
+    --m-placeholder: #62758f;
+    --m-primary: #165dba;
+    --m-primary-hover: #0e4e9e;
+    --m-primary-on: #ffffff;
+    --m-shadow-lg: 0px 24px 64px 0px rgb(3.53% 9.41% 20% / 0.18);
+    --m-shadow-md: 0px 8px 28px 0px rgb(5.49% 14.51% 29.41% / 0.1);
+    --m-shadow-sm: 0px 1px 3px 0px rgb(4.31% 12.94% 25.1% / 0.07);
+    --m-sidebar: #ffffff;
+    --m-success: #086f50;
+    --m-success-soft: #ddf6eb;
+    --m-surface: #ffffff;
+    --m-surface-disabled: #ebeff6;
+    --m-surface-hover: #e3edf9;
+    --m-surface-raised: #ffffff;
+    --m-surface-soft: #eaf1fa;
+    --m-text: #11243e;
+    --m-text-muted: #435b78;
+    --m-text-subtle: #536b87;
+    --m-warning: #865200;
+    --m-warning-soft: #fff0d6;
+  }
+  :root[data-theme="deep-space"][data-color-mode="dark"],
+  :root:not([data-theme])[data-color-mode="dark"] {
+    color-scheme: dark;
+    --m-accent: #5aa9ff;
+    --m-accent-hover: #82bbff;
+    --m-accent-on: #04152b;
+    --m-accent-soft: #12335c;
+    --m-accent-soft-on: #cfe4ff;
+    --m-bg: #060e1d;
+    --m-border: #2a4662;
+    --m-border-strong: #4c6a8b;
+    --m-danger: #ff8da0;
+    --m-danger-soft: #4a1d2c;
+    --m-focus: #8fc4ff;
+    --m-focus-halo: #060e1d;
+    --m-info: #8fc4ff;
+    --m-info-soft: #12335c;
+    --m-overlay: rgba(0, 5, 13, 0.72);
+    --m-placeholder: #9fb3ca;
+    --m-primary: #1b6fd9;
+    --m-primary-hover: #2a82f0;
+    --m-primary-on: #ffffff;
+    --m-shadow-lg: 0px 24px 66px 0px rgb(0% 0% 0% / 0.55);
+    --m-shadow-md: 0px 12px 32px 0px rgb(0% 0% 0% / 0.32);
+    --m-shadow-sm: 0px 1px 2px 0px rgb(0% 0% 0% / 0.3);
+    --m-sidebar: #071322;
+    --m-success: #3fe0b0;
+    --m-success-soft: #0f3a35;
+    --m-surface: #0d1c30;
+    --m-surface-disabled: #14233a;
+    --m-surface-hover: #17304d;
+    --m-surface-raised: #13263d;
+    --m-surface-soft: #112238;
+    --m-text: #f4f7fc;
+    --m-text-muted: #b7c7d9;
+    --m-text-subtle: #9fb3ca;
+    --m-warning: #ffa24d;
+    --m-warning-soft: #3a2812;
+  }
+  :root[data-theme="professional"] {
+    color-scheme: light;
+    --m-control-radius: 12px;
+    --m-accent: #165dba;
+    --m-accent-hover: #0e4e9e;
+    --m-accent-on: #ffffff;
+    --m-accent-soft: #e1edff;
+    --m-accent-soft-on: #164c9c;
+    --m-bg: #f3f6fb;
+    --m-border: #cdd9e8;
+    --m-border-strong: #98acc4;
+    --m-danger: #b22342;
+    --m-danger-soft: #fce8ed;
+    --m-focus: #165dba;
+    --m-focus-halo: #ffffff;
+    --m-info: #155bad;
+    --m-info-soft: #e2efff;
+    --m-overlay: rgba(7, 16, 32, 0.54);
+    --m-placeholder: #62758f;
+    --m-primary: #165dba;
+    --m-primary-hover: #0e4e9e;
+    --m-primary-on: #ffffff;
+    --m-shadow-lg: 0px 24px 64px 0px rgb(3.53% 9.41% 20% / 0.18);
+    --m-shadow-md: 0px 8px 28px 0px rgb(5.49% 14.51% 29.41% / 0.1);
+    --m-shadow-sm: 0px 1px 3px 0px rgb(4.31% 12.94% 25.1% / 0.07);
+    --m-sidebar: #ffffff;
+    --m-success: #086f50;
+    --m-success-soft: #ddf6eb;
+    --m-surface: #ffffff;
+    --m-surface-disabled: #ebeff6;
+    --m-surface-hover: #e3edf9;
+    --m-surface-raised: #ffffff;
+    --m-surface-soft: #eaf1fa;
+    --m-text: #11243e;
+    --m-text-muted: #435b78;
+    --m-text-subtle: #536b87;
+    --m-warning: #865200;
+    --m-warning-soft: #fff0d6;
+  }
+  @media (prefers-color-scheme: dark) {
+    :root[data-theme="professional"]:not([data-color-mode="light"]) {
+      color-scheme: dark;
+      --m-accent: #5aa9ff;
+      --m-accent-hover: #82bbff;
+      --m-accent-on: #04152b;
+      --m-accent-soft: #12335c;
+      --m-accent-soft-on: #cfe4ff;
+      --m-bg: #060e1d;
+      --m-border: #2a4662;
+      --m-border-strong: #4c6a8b;
+      --m-danger: #ff8da0;
+      --m-danger-soft: #4a1d2c;
+      --m-focus: #8fc4ff;
+      --m-focus-halo: #060e1d;
+      --m-info: #8fc4ff;
+      --m-info-soft: #12335c;
+      --m-overlay: rgba(0, 5, 13, 0.72);
+      --m-placeholder: #9fb3ca;
+      --m-primary: #1b6fd9;
+      --m-primary-hover: #2a82f0;
+      --m-primary-on: #ffffff;
+      --m-shadow-lg: 0px 24px 66px 0px rgb(0% 0% 0% / 0.55);
+      --m-shadow-md: 0px 12px 32px 0px rgb(0% 0% 0% / 0.32);
+      --m-shadow-sm: 0px 1px 2px 0px rgb(0% 0% 0% / 0.3);
+      --m-sidebar: #071322;
+      --m-success: #3fe0b0;
+      --m-success-soft: #0f3a35;
+      --m-surface: #0d1c30;
+      --m-surface-disabled: #14233a;
+      --m-surface-hover: #17304d;
+      --m-surface-raised: #13263d;
+      --m-surface-soft: #112238;
+      --m-text: #f4f7fc;
+      --m-text-muted: #b7c7d9;
+      --m-text-subtle: #9fb3ca;
+      --m-warning: #ffa24d;
+      --m-warning-soft: #3a2812;
+    }
+  }
+  :root[data-theme="professional"][data-color-mode="light"] {
+    color-scheme: light;
+    --m-accent: #165dba;
+    --m-accent-hover: #0e4e9e;
+    --m-accent-on: #ffffff;
+    --m-accent-soft: #e1edff;
+    --m-accent-soft-on: #164c9c;
+    --m-bg: #f3f6fb;
+    --m-border: #cdd9e8;
+    --m-border-strong: #98acc4;
+    --m-danger: #b22342;
+    --m-danger-soft: #fce8ed;
+    --m-focus: #165dba;
+    --m-focus-halo: #ffffff;
+    --m-info: #155bad;
+    --m-info-soft: #e2efff;
+    --m-overlay: rgba(7, 16, 32, 0.54);
+    --m-placeholder: #62758f;
+    --m-primary: #165dba;
+    --m-primary-hover: #0e4e9e;
+    --m-primary-on: #ffffff;
+    --m-shadow-lg: 0px 24px 64px 0px rgb(3.53% 9.41% 20% / 0.18);
+    --m-shadow-md: 0px 8px 28px 0px rgb(5.49% 14.51% 29.41% / 0.1);
+    --m-shadow-sm: 0px 1px 3px 0px rgb(4.31% 12.94% 25.1% / 0.07);
+    --m-sidebar: #ffffff;
+    --m-success: #086f50;
+    --m-success-soft: #ddf6eb;
+    --m-surface: #ffffff;
+    --m-surface-disabled: #ebeff6;
+    --m-surface-hover: #e3edf9;
+    --m-surface-raised: #ffffff;
+    --m-surface-soft: #eaf1fa;
+    --m-text: #11243e;
+    --m-text-muted: #435b78;
+    --m-text-subtle: #536b87;
+    --m-warning: #865200;
+    --m-warning-soft: #fff0d6;
+  }
+  :root[data-theme="professional"][data-color-mode="dark"] {
+    color-scheme: dark;
+    --m-accent: #5aa9ff;
+    --m-accent-hover: #82bbff;
+    --m-accent-on: #04152b;
+    --m-accent-soft: #12335c;
+    --m-accent-soft-on: #cfe4ff;
+    --m-bg: #060e1d;
+    --m-border: #2a4662;
+    --m-border-strong: #4c6a8b;
+    --m-danger: #ff8da0;
+    --m-danger-soft: #4a1d2c;
+    --m-focus: #8fc4ff;
+    --m-focus-halo: #060e1d;
+    --m-info: #8fc4ff;
+    --m-info-soft: #12335c;
+    --m-overlay: rgba(0, 5, 13, 0.72);
+    --m-placeholder: #9fb3ca;
+    --m-primary: #1b6fd9;
+    --m-primary-hover: #2a82f0;
+    --m-primary-on: #ffffff;
+    --m-shadow-lg: 0px 24px 66px 0px rgb(0% 0% 0% / 0.55);
+    --m-shadow-md: 0px 12px 32px 0px rgb(0% 0% 0% / 0.32);
+    --m-shadow-sm: 0px 1px 2px 0px rgb(0% 0% 0% / 0.3);
+    --m-sidebar: #071322;
+    --m-success: #3fe0b0;
+    --m-success-soft: #0f3a35;
+    --m-surface: #0d1c30;
+    --m-surface-disabled: #14233a;
+    --m-surface-hover: #17304d;
+    --m-surface-raised: #13263d;
+    --m-surface-soft: #112238;
+    --m-text: #f4f7fc;
+    --m-text-muted: #b7c7d9;
+    --m-text-subtle: #9fb3ca;
+    --m-warning: #ffa24d;
+    --m-warning-soft: #3a2812;
+  }
+}

package/dist/tokens.index.json

@@ -0,0 +1,103 @@
+{
+  "prefix": "m",
+  "themes": [
+    "deep-space",
+    "professional"
+  ],
+  "modesByTheme": {
+    "deep-space": [
+      "light",
+      "dark"
+    ],
+    "professional": [
+      "light",
+      "dark"
+    ]
+  },
+  "densities": [
+    "comfortable",
+    "compact",
+    "touch"
+  ],
+  "defaultTheme": "deep-space",
+  "defaultDensity": "comfortable",
+  "tokenNames": [
+    "accent",
+    "accent-hover",
+    "accent-on",
+    "accent-soft",
+    "accent-soft-on",
+    "bg",
+    "border",
+    "border-strong",
+    "control-fs",
+    "control-gap",
+    "control-h",
+    "control-pad-x",
+    "control-radius",
+    "danger",
+    "danger-soft",
+    "duration-base",
+    "duration-fast",
+    "duration-slow",
+    "ease",
+    "focus",
+    "focus-halo",
+    "font-mono",
+    "font-sans",
+    "fs-2xl",
+    "fs-base",
+    "fs-lg",
+    "fs-md",
+    "fs-sm",
+    "fs-xl",
+    "fs-xs",
+    "fw-bold",
+    "fw-medium",
+    "fw-regular",
+    "fw-semibold",
+    "info",
+    "info-soft",
+    "lh-normal",
+    "lh-relaxed",
+    "lh-tight",
+    "overlay",
+    "placeholder",
+    "primary",
+    "primary-hover",
+    "primary-on",
+    "radius-lg",
+    "radius-md",
+    "radius-pill",
+    "radius-sm",
+    "radius-xl",
+    "radius-xs",
+    "row-h",
+    "shadow-lg",
+    "shadow-md",
+    "shadow-sm",
+    "sidebar",
+    "space-0",
+    "space-1",
+    "space-10",
+    "space-12",
+    "space-2",
+    "space-3",
+    "space-4",
+    "space-5",
+    "space-6",
+    "space-8",
+    "success",
+    "success-soft",
+    "surface",
+    "surface-disabled",
+    "surface-hover",
+    "surface-raised",
+    "surface-soft",
+    "text",
+    "text-muted",
+    "text-subtle",
+    "warning",
+    "warning-soft"
+  ]
+}

package/package.json

@@ -1,6 +1,38 @@
 {
   "name": "@interstellarforge/matter-tokens",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.1.0",
+  "license": "MIT",
+  "description": "Matter design tokens (DTCG source, CSS and TypeScript output). Framework-agnostic.",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/interstellarforge/matter.git",
+    "directory": "packages/tokens"
+  },
+  "type": "module",
+  "files": [
+    "dist",
+    "tokens"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./css": "./dist/matter-tokens.css",
+    "./index.json": "./dist/tokens.index.json",
+    "./tokens/*": "./tokens/*"
+  },
+  "publishConfig": {
+    "registry": "https://registry.npmjs.org/",
+    "access": "public",
+    "provenance": true
+  },
+  "devDependencies": {
+    "style-dictionary": "5.7.1",
+    "vitest": "4.1.6"
+  },
+  "scripts": {
+    "build": "node src/build.ts",
+    "test": "vitest run"
+  }
 }