@moderneinc/design-system-tokens 6.0.0-next.02da4a

package/README.md

@@ -0,0 +1,173 @@
+# @moderneinc/design-system-tokens
+
+**Internal Moderne package** - Design system build tools for processing design tokens into multiple output formats (CSS, JavaScript, JSON).
+
+## 🚀 Quick Start
+
+```bash
+npm install @moderneinc/design-system-tokens
+```
+
+## 📦 What's Included
+
+- **Design Tokens**: W3C DTCG format token files in `src/tokens/`
+  - `primitive/` — color, spacing, border-radius, shadow, typography, breakpoints
+  - `semantic/` — semantic colors, semantic typography (aliases into primitives)
+- **Internal Plugin System**: CSS Variables, JS Export, and DTS Export plugins (build-time only)
+- **DTCG Reader**: Reads W3C Design Tokens Community Group format into plugin-compatible structures
+- **Pure JavaScript**: Simplified architecture, no TypeScript complexity
+- **Multiple Output Formats**: CSS custom properties, JavaScript exports, and TypeScript declarations
+
+## 🎨 Generated Outputs
+
+The build process generates design token files:
+
+```bash
+# After running npm run build, generated files include:
+dist/
+├── colors.css              # Primitive color CSS custom properties
+├── colors.json             # Primitive color tokens (JSON)
+├── colors.js               # Primitive color tokens (JS)
+├── semantic-colors.css     # Semantic/theme color CSS custom properties
+├── semantic-colors.js      # Semantic color tokens (JS)
+├── typography.css          # Typography CSS custom properties
+├── typography.json         # Typography tokens (JSON)
+├── typography.js           # Typography tokens (JS)
+├── breakpoints.js          # Breakpoint tokens (JS)
+├── index.js                # Main CommonJS bundle
+└── index.esm.js            # Main ESM bundle
+```
+
+## 🌗 Dark Mode
+
+`semanticColors.*` values are now CSS variable references, not hex strings —
+e.g. `semanticColors.surfaces.card` returns `'var(--mod-surfaces-card)'`. Theme
+switching happens through the CSS cascade via `[data-theme="dark"]`, not by
+picking a different JS object.
+
+**This is a breaking change.** To upgrade:
+
+1. **Import the stylesheet.** Any code using `semanticColors` must import
+   `@moderneinc/design-system-tokens/semantic-colors.css` once, globally. Without it,
+   every `var(--mod-…)` reference is unset and renders as inherited or
+   transparent — no error, no warning, just a silently broken UI.
+
+   ```js
+   import '@moderneinc/design-system-tokens/semantic-colors.css'
+   ```
+
+2. **Switch themes by setting an attribute**, not by importing a different
+   token set:
+
+   ```js
+   document.documentElement.setAttribute('data-theme', 'dark') // or 'light'
+   ```
+
+   Dark mode is opt-in via `[data-theme="dark"]` only. It does **not** follow
+   `@media (prefers-color-scheme: dark)`, so a user's OS-level preference has
+   no effect unless your app wires it up.
+
+3. **Use `semanticColorsLight` / `semanticColorsDark` where a literal hex
+   value is required** — canvas, WebGL, charting libraries, and colour math
+   (e.g. `alpha()`) can't resolve a CSS variable. Reach for these only in
+   those cases; everywhere else, prefer `semanticColors` so the UI stays
+   theme-aware.
+
+   ```js
+   import { semanticColors, semanticColorsDark } from '@moderneinc/design-system-tokens'
+
+   // Correct — themes automatically via CSS
+   const border = semanticColors.border.primary
+
+   // Only when you need a literal value (e.g. a <canvas> fill)
+   ctx.fillStyle = semanticColorsDark.surfaces.card
+   ```
+
+4. **Don't append a hex alpha suffix to a `semanticColors` value.** This
+   worked when the value was a literal hex string; it does not work now
+   that it's a `var(...)` reference:
+
+   ```js
+   // Broken — "var(--mod-border-primary)80" is not valid CSS; the
+   // browser drops the whole declaration
+   const border = `${semanticColors.border.primary}80`
+
+   // Correct — color-mix keeps the value theme-aware
+   const border = `color-mix(in srgb, ${semanticColors.border.primary} 50%, transparent)`
+   ```
+
+## 🔧 Internal Build System
+
+The package includes an internal plugin system used during the build process:
+
+**Build-time Plugins:**
+
+- **CSS Variables Plugin**: Generates CSS custom properties from design tokens
+- **JS Export Plugin**: Creates JavaScript module exports from processed tokens
+- **JSON Export Plugin**: Generates JSON files with processed design tokens
+
+These plugins are configured in `tokens.config.js` and executed by `scripts/build-production.js` during `npm run build`. They read W3C DTCG format token files via the DTCG reader and are not exposed as public exports.
+
+## 🏗️ Architecture & Build Process
+
+```mermaid
+graph TB
+    A[DTCG Token Files<br/>src/tokens/*.tokens.json]
+
+    A --> B[npm run build<br/>scripts/build-production.js]
+
+    B --> C[Rollup Bundle Build<br/>rollup -c]
+    C --> D[Generated Bundles<br/>dist/]
+    D --> E[index.js<br/>CommonJS Bundle]
+    D --> Esm[index.esm.js<br/>ES Module Bundle]
+
+    B --> G[Token Contract Processing<br/>tokens.config.js]
+    G --> R[DTCG Reader<br/>dtcg-reader.js]
+    R --> G1[Colors]
+    R --> G2[Semantic Colors]
+    R --> G3[Typography]
+    R --> G4[Shadows + Spacing + ...]
+
+    G1 --> H[CSS Variables Plugin]
+    G1 --> I[JS Export Plugin]
+    G1 --> J[DTS Export Plugin]
+
+    H --> K[Generated Artifacts<br/>dist/]
+    I --> K
+    J --> K
+    G2 --> K
+    G3 --> K
+    G4 --> K
+
+    K --> L[Ready for npm publish]
+
+    style F fill:#fff3e0
+    style A fill:#e1f5fe
+    style K fill:#f3e5f5
+    style L fill:#e8f5e8
+```
+
+## 🔧 Development
+
+### Scripts
+
+- `npm run build` - Complete build pipeline with plugin execution
+- `npm run dev` - Watch mode development build with Rollup
+- `npm run clean` - Remove dist directory
+- `npm run storybook` - Preview tokens in Storybook (port 6006)
+- `npm run test` - Run Vitest test suite
+- `npm run lint` - Lint source code with Biome
+- `npm run format` - Format code with Biome
+- `npm run knip` - Check for unused dependencies and exports
+
+## 📖 Documentation
+
+- View token documentation in Storybook: `npm run storybook`
+- See `stories/` for color and typography showcases
+- Check `dist/` for built artifacts after running `npm run build`
+
+---
+
+**Package**: `@moderneinc/design-system-tokens` (Private - Internal Moderne use only)
+**Source**: hand-maintained DTCG token files in `src/tokens/`
+**Architecture**: Pure JavaScript ES6 modules

package/dist/border-radius.css

@@ -0,0 +1,10 @@
+:root {  --mod-border-radius-card: 12px;
+  --mod-border-radius-button: 4px;
+  --mod-border-radius-input: 10px;
+  --mod-border-radius-x-xs: 2px;
+  --mod-border-radius-x-s: 4px;
+  --mod-border-radius-s: 8px;
+  --mod-border-radius-m: 12px;
+  --mod-border-radius-l: 20px;
+  --mod-border-radius-x-l: 30px;
+  --mod-border-radius-full: 999px;}

package/dist/border-radius.d.ts

@@ -0,0 +1,40 @@
+/**
+ * Moderne Design System
+ * TypeScript declarations generated from Figma design tokens
+ * @generated
+ */
+
+export declare const card: 12;
+
+export declare const button: 4;
+
+export declare const input: 10;
+
+export declare const xXS: 2;
+
+export declare const xS: 4;
+
+export declare const s: 8;
+
+export declare const m: 12;
+
+export declare const l: 20;
+
+export declare const xL: 30;
+
+export declare const full: 999;
+
+declare const _default: {
+card: typeof card,
+button: typeof button,
+input: typeof input,
+xXS: typeof xXS,
+xS: typeof xS,
+s: typeof s,
+m: typeof m,
+l: typeof l,
+xL: typeof xL,
+full: typeof full,
+};
+
+export default _default;

package/dist/border-radius.js

@@ -0,0 +1,69 @@
+/**
+ * Moderne Design System
+ * Generated from Figma design tokens
+ * @generated
+ */
+
+/**
+ * @type {number}
+ */
+export const card = 12;
+
+/**
+ * @type {number}
+ */
+export const button = 4;
+
+/**
+ * @type {number}
+ */
+export const input = 10;
+
+/**
+ * @type {number}
+ */
+export const xXS = 2;
+
+/**
+ * @type {number}
+ */
+export const xS = 4;
+
+/**
+ * @type {number}
+ */
+export const s = 8;
+
+/**
+ * @type {number}
+ */
+export const m = 12;
+
+/**
+ * @type {number}
+ */
+export const l = 20;
+
+/**
+ * @type {number}
+ */
+export const xL = 30;
+
+/**
+ * @type {number}
+ */
+export const full = 999;
+
+// Default export with all color groups
+export default {
+card,
+button,
+input,
+xXS,
+xS,
+s,
+m,
+l,
+xL,
+full,
+};

package/dist/breakpoints.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Moderne Design System
+ * TypeScript declarations generated from Figma design tokens
+ * @generated
+ */
+
+export declare const xl: 1920;
+
+export declare const lg: 1280;
+
+export declare const md: 960;
+
+export declare const sm: 600;
+
+declare const _default: {
+xl: typeof xl,
+lg: typeof lg,
+md: typeof md,
+sm: typeof sm,
+};
+
+export default _default;

package/dist/breakpoints.js

@@ -0,0 +1,33 @@
+/**
+ * Moderne Design System
+ * Generated from Figma design tokens
+ * @generated
+ */
+
+/**
+ * @type {number}
+ */
+export const xl = 1920;
+
+/**
+ * @type {number}
+ */
+export const lg = 1280;
+
+/**
+ * @type {number}
+ */
+export const md = 960;
+
+/**
+ * @type {number}
+ */
+export const sm = 600;
+
+// Default export with all color groups
+export default {
+xl,
+lg,
+md,
+sm,
+};

package/dist/colors.css

@@ -0,0 +1,114 @@
+:root {  --mod-gold-50: #fef9e8;
+  --mod-gold-100: #fbf1d2;
+  --mod-gold-200: #f7e3a5;
+  --mod-gold-300: #f4d479;
+  --mod-gold-400: #ffd34d;
+  --mod-gold-500: #ecb81f;
+  --mod-gold-600: #bd9319;
+  --mod-gold-700: #8e6e13;
+  --mod-gold-800: #806a00;
+  --mod-gold-900: #2f2506;
+  --mod-violet-50: #f6eefb;
+  --mod-violet-100: #ebd5f1;
+  --mod-violet-200: #d6ace3;
+  --mod-violet-300: #c282d5;
+  --mod-violet-400: #ad59c7;
+  --mod-violet-500: #9d5be8;
+  --mod-violet-600: #7a2694;
+  --mod-violet-700: #5c1c6f;
+  --mod-violet-800: #3d134a;
+  --mod-violet-900: #1f0925;
+  --mod-warm-grey-50: #faf8f3;
+  --mod-warm-grey-100: #f6f1e8;
+  --mod-warm-grey-200: #f1ece0;
+  --mod-warm-grey-300: #dcd3c3;
+  --mod-warm-grey-400: #c9bfa6;
+  --mod-warm-grey-500: #9c927e;
+  --mod-warm-grey-600: #7b7263;
+  --mod-warm-grey-700: #564e41;
+  --mod-warm-grey-800: #38332a;
+  --mod-warm-grey-900: #15120f;
+  --mod-ink-50: #f1f1f6;
+  --mod-ink-100: #d9d9e4;
+  --mod-ink-200: #b4b4c4;
+  --mod-ink-300: #8a8a9e;
+  --mod-ink-400: #62627a;
+  --mod-ink-500: #4a4a66;
+  --mod-ink-600: #62627a;
+  --mod-ink-700: #2c2c50;
+  --mod-ink-800: #232342;
+  --mod-ink-900: #17171c;
+  --mod-cream-50: #fbfaf6;
+  --mod-cream-100: #f4f2eb;
+  --mod-cream-200: #f2f0ea;
+  --mod-cream-300: #f2efe7;
+  --mod-cream-400: #edebe2;
+  --mod-cream-500: #e4e1d6;
+  --mod-cream-600: #dedbd0;
+  --mod-cream-700: #918c7c;
+  --mod-cream-800: #5f5b4f;
+  --mod-cream-900: #33312b;
+  --mod-periwinkle-300: #8ca0f5;
+  --mod-periwinkle-500: #3e5be8;
+  --mod-digital-blue-50: #f2f3ff;
+  --mod-digital-blue-100: #dce0ff;
+  --mod-digital-blue-200: #b6bfff;
+  --mod-digital-blue-300: #8d99ff;
+  --mod-digital-blue-400: #626eff;
+/* primary color */
+  --mod-digital-blue-500: #2f42ff;
+  --mod-digital-blue-600: #2637e6;
+  --mod-digital-blue-700: #1e2ec2;
+  --mod-digital-blue-800: #131e7a;
+  --mod-digital-blue-900: #000855;
+  --mod-digital-green-50: #f3fff5;
+  --mod-digital-green-100: #cfffd7;
+  --mod-digital-green-200: #acffb9;
+  --mod-digital-green-300: #88fe9b;
+  --mod-digital-green-400: #72e184;
+  --mod-digital-green-500: #5ec46f;
+  --mod-digital-green-600: #4ca75a;
+  --mod-digital-green-700: #3b8948;
+  --mod-digital-green-800: #2c6c36;
+  --mod-digital-green-900: #1e4f26;
+  --mod-grey-50: #f9fafb;
+  --mod-grey-100: #f3f4f6;
+  --mod-grey-200: #e5e7eb;
+  --mod-grey-300: #d1d5db;
+  --mod-grey-400: #9ca3af;
+  --mod-grey-500: #6b7280;
+  --mod-grey-600: #4b5563;
+  --mod-grey-700: #374151;
+  --mod-grey-800: #1f2937;
+  --mod-grey-900: #111827;
+  --mod-orange-50: #fff8e5;
+  --mod-orange-100: #ffebb7;
+  --mod-orange-200: #ffde8a;
+  --mod-orange-300: #ffd15c;
+  --mod-orange-400: #ff8f52;
+  --mod-orange-500: #ffb800;
+  --mod-orange-600: #d69b00;
+  --mod-orange-700: #856000;
+  --mod-orange-800: #a34e14;
+  --mod-orange-900: #5c4200;
+  --mod-red-50: #fbefed;
+  --mod-red-100: #ffc6cd;
+  --mod-red-200: #f0b4ac;
+  --mod-red-300: #fa826f;
+  --mod-red-400: #ed4a5d;
+  --mod-red-500: #cb3446;
+  --mod-red-600: #c9291c;
+  --mod-red-700: #871421;
+  --mod-red-800: #650914;
+  --mod-red-900: #43020a;
+  --mod-teal-green-50: #eefffa;
+  --mod-teal-green-100: #c9fff1;
+  --mod-teal-green-200: #a4ffe7;
+  --mod-teal-green-300: #7fffde;
+  --mod-teal-green-400: #54eec6;
+  --mod-teal-green-500: #3bcca6;
+  --mod-teal-green-600: #27aa88;
+  --mod-teal-green-700: #17886b;
+  --mod-teal-green-800: #0b664e;
+  --mod-teal-green-900: #034433;
+  --mod-white: #ffffff;}

package/dist/colors.d.ts

@@ -0,0 +1,200 @@
+/**
+ * Moderne Design System
+ * TypeScript declarations generated from Figma design tokens
+ * @generated
+ */
+
+export type Gold = {
+'50': '#fef9e8';
+'100': '#fbf1d2';
+'200': '#f7e3a5';
+'300': '#f4d479';
+'400': '#ffd34d';
+'500': '#ecb81f';
+'600': '#bd9319';
+'700': '#8e6e13';
+'800': '#806a00';
+'900': '#2f2506';
+};
+
+export declare const gold: Gold;
+
+export type Violet = {
+'50': '#f6eefb';
+'100': '#ebd5f1';
+'200': '#d6ace3';
+'300': '#c282d5';
+'400': '#ad59c7';
+'500': '#9d5be8';
+'600': '#7a2694';
+'700': '#5c1c6f';
+'800': '#3d134a';
+'900': '#1f0925';
+};
+
+export declare const violet: Violet;
+
+export type WarmGrey = {
+'50': '#faf8f3';
+'100': '#f6f1e8';
+'200': '#f1ece0';
+'300': '#dcd3c3';
+'400': '#c9bfa6';
+'500': '#9c927e';
+'600': '#7b7263';
+'700': '#564e41';
+'800': '#38332a';
+'900': '#15120f';
+};
+
+export declare const warmGrey: WarmGrey;
+
+export type Ink = {
+'50': '#f1f1f6';
+'100': '#d9d9e4';
+'200': '#b4b4c4';
+'300': '#8a8a9e';
+'400': '#62627a';
+'500': '#4a4a66';
+'600': '#62627a';
+'700': '#2c2c50';
+'800': '#232342';
+'900': '#17171c';
+};
+
+export declare const ink: Ink;
+
+export type Cream = {
+'50': '#fbfaf6';
+'100': '#f4f2eb';
+'200': '#f2f0ea';
+'300': '#f2efe7';
+'400': '#edebe2';
+'500': '#e4e1d6';
+'600': '#dedbd0';
+'700': '#918c7c';
+'800': '#5f5b4f';
+'900': '#33312b';
+};
+
+export declare const cream: Cream;
+
+export type Periwinkle = {
+'300': '#8ca0f5';
+'500': '#3e5be8';
+};
+
+export declare const periwinkle: Periwinkle;
+
+export type DigitalBlue = {
+'50': '#f2f3ff';
+'100': '#dce0ff';
+'200': '#b6bfff';
+'300': '#8d99ff';
+'400': '#626eff';
+/**
+   * primary color
+   */
+'500': '#2f42ff';
+'600': '#2637e6';
+'700': '#1e2ec2';
+'800': '#131e7a';
+'900': '#000855';
+};
+
+export declare const digitalBlue: DigitalBlue;
+
+export type DigitalGreen = {
+'50': '#f3fff5';
+'100': '#cfffd7';
+'200': '#acffb9';
+'300': '#88fe9b';
+'400': '#72e184';
+'500': '#5ec46f';
+'600': '#4ca75a';
+'700': '#3b8948';
+'800': '#2c6c36';
+'900': '#1e4f26';
+};
+
+export declare const digitalGreen: DigitalGreen;
+
+export type Grey = {
+'50': '#f9fafb';
+'100': '#f3f4f6';
+'200': '#e5e7eb';
+'300': '#d1d5db';
+'400': '#9ca3af';
+'500': '#6b7280';
+'600': '#4b5563';
+'700': '#374151';
+'800': '#1f2937';
+'900': '#111827';
+};
+
+export declare const grey: Grey;
+
+export type Orange = {
+'50': '#fff8e5';
+'100': '#ffebb7';
+'200': '#ffde8a';
+'300': '#ffd15c';
+'400': '#ff8f52';
+'500': '#ffb800';
+'600': '#d69b00';
+'700': '#856000';
+'800': '#a34e14';
+'900': '#5c4200';
+};
+
+export declare const orange: Orange;
+
+export type Red = {
+'50': '#fbefed';
+'100': '#ffc6cd';
+'200': '#f0b4ac';
+'300': '#fa826f';
+'400': '#ed4a5d';
+'500': '#cb3446';
+'600': '#c9291c';
+'700': '#871421';
+'800': '#650914';
+'900': '#43020a';
+};
+
+export declare const red: Red;
+
+export type TealGreen = {
+'50': '#eefffa';
+'100': '#c9fff1';
+'200': '#a4ffe7';
+'300': '#7fffde';
+'400': '#54eec6';
+'500': '#3bcca6';
+'600': '#27aa88';
+'700': '#17886b';
+'800': '#0b664e';
+'900': '#034433';
+};
+
+export declare const tealGreen: TealGreen;
+
+export declare const white: '#ffffff';
+
+declare const _default: {
+gold: typeof gold,
+violet: typeof violet,
+warmGrey: typeof warmGrey,
+ink: typeof ink,
+cream: typeof cream,
+periwinkle: typeof periwinkle,
+digitalBlue: typeof digitalBlue,
+digitalGreen: typeof digitalGreen,
+grey: typeof grey,
+orange: typeof orange,
+red: typeof red,
+tealGreen: typeof tealGreen,
+white: typeof white,
+};
+
+export default _default;