@nebutra/tokens 0.1.1 → 0.1.3

package/README.md

@@ -5,8 +5,7 @@
 ## Installation
 
 ```bash
-# Internal monorepo dependency
-pnpm add @nebutra/tokens@workspace:*
+pnpm add @nebutra/tokens
 ```
 
 ## Usage
@@ -58,22 +57,56 @@ function ThemeToggle() {
 
 | Export | Description |
 |--------|-------------|
-| `ThemeProvider` | React provider for light/dark mode (from next-themes) |
+| `ThemeProvider` | React provider for light/dark mode (custom; class + cookie, not next-themes) |
 | `useTheme()` | Hook to read/set current theme |
 | `ThemeProviderProps` | Props type for ThemeProvider |
-| `THEME_IDS` | `["light", "dark"]` |
+| `THEME_IDS` | `["light", "dark"]` (appearance mode, not design language) |
 | `ThemeId` | `"light" \| "dark"` |
 | `DEFAULT_THEME` | `"dark"` |
 
 ## Token Architecture
 
 ```
-@nebutra/brand   --> Brand primitives (source data, not runtime)
-@nebutra/tokens  --> Runtime CSS variables (THIS PACKAGE)
-@nebutra/theme   --> Multi-theme presets (oklch, 6 variants)
-@nebutra/ui      --> Components (consume tokens via CSS vars)
+@nebutra/design-tokens  --> DTCG JSON + Style Dictionary → build/css/styles.generated.css
+@nebutra/tokens         --> styles.css (copied from generated; verify:parity must stay 100%)
+@nebutra/theme          --> design languages (Brand Packages, applyLanguage)
+@nebutra/ui             --> components (consume tokens via CSS vars)
+```
+
+### Regenerating `styles.css`
+
+```bash
+pnpm --filter @nebutra/design-tokens build
+pnpm --filter @nebutra/design-tokens verify:parity   # requires 100%
+pnpm --filter @nebutra/tokens sync                   # copies styles.generated.css → styles.css
+```
+
+### Brand Packages (design-language skins)
+
+```ts
+import { emitBrandCss, type BrandPackage } from "@nebutra/tokens/brand-package";
+
+// Optional dual light/dark palettes (orthogonal to catalog language id):
+const brand: BrandPackage = {
+  id: "acme",
+  name: "Acme",
+  darkDefault: false,
+  version: "1.0.0",
+  semantic: { /* default mode */ },
+  modes: {
+    light: { semantic: { /* light */ } },
+    dark: { semantic: { /* dark */ } },
+  },
+  recipe: { buttonDefault: "solid", density: "comfortable", radii: {…}, elevationTokens: {…} },
+  typography: { fontSans: "Inter, sans-serif" },
+};
+// emit: light under :root/html[data-brand]; dark under .dark/html.dark[data-brand]
 ```
 
 ## Peer Dependencies
 
 - `react` ^19
+
+## License
+
+MIT

package/brands/gsap/brand.json

@@ -0,0 +1,133 @@
+{
+  "id": "gsap",
+  "name": "GSAP",
+  "darkDefault": true,
+  "version": "1.0.0",
+  "semantic": {
+    "background": "150 7% 6%",
+    "foreground": "54 100% 94%",
+    "card": "0 0% 10%",
+    "cardForeground": "54 100% 94%",
+    "popover": "0 0% 10%",
+    "popoverForeground": "54 100% 94%",
+    "primary": "137 92% 47%",
+    "primaryForeground": "150 7% 6%",
+    "secondary": "70 5% 25%",
+    "secondaryForeground": "54 100% 94%",
+    "muted": "0 0% 10%",
+    "mutedForeground": "60 6% 46%",
+    "accent": "70 5% 25%",
+    "accentForeground": "54 100% 94%",
+    "destructive": "309 100% 47%",
+    "destructiveForeground": "54 100% 94%",
+    "border": "70 5% 25%",
+    "input": "70 5% 25%",
+    "ring": "137 92% 47%",
+    "success": "137 92% 47%",
+    "successForeground": "150 7% 6%",
+    "info": "191 100% 44%",
+    "infoForeground": "150 7% 6%"
+  },
+  "recipe": {
+    "buttonDefault": "gradient-stroke",
+    "density": "compact",
+    "badgeDefault": "match-action",
+    "radii": {
+      "button": "100px",
+      "card": "8px",
+      "badge": "9999px",
+      "input": "100px",
+      "pill": "9999px"
+    },
+    "elevationTokens": {
+      "card": "0 0 #0000",
+      "control": "0 0 #0000",
+      "raised": "0 0 #0000"
+    },
+    "primaryStrokeGradient": "linear-gradient(114.41deg, #0ae448 20.74%, #abff84 65.5%)",
+    "outlineBorder": "#fffce1"
+  },
+  "typography": {
+    "fontSans": "'Mori', 'Inter Tight', 'DM Sans', ui-sans-serif, system-ui, sans-serif",
+    "fontDisplay": "'Mori', 'Inter Tight', ui-sans-serif, system-ui, sans-serif",
+    "headingWeight": 600,
+    "faces": [
+      {
+        "family": "Mori",
+        "src": [
+          {
+            "url": "/brand-assets/mori-regular.woff2",
+            "format": "woff2"
+          }
+        ],
+        "weight": 400,
+        "display": "swap"
+      },
+      {
+        "family": "Mori",
+        "src": [
+          {
+            "url": "/brand-assets/mori-semibold.woff2",
+            "format": "woff2"
+          }
+        ],
+        "weight": 600,
+        "display": "swap"
+      }
+    ]
+  },
+  "motion": {
+    "easeOut": "cubic-bezier(0.22, 1, 0.36, 1)",
+    "easeInOut": "cubic-bezier(0.65, 0, 0.35, 1)",
+    "easeSpring": "cubic-bezier(0.68, -0.55, 0.265, 1.55)",
+    "micro": 120,
+    "flow": 250,
+    "reveal": 400,
+    "cinematic": 700
+  },
+  "spacing": {
+    "xs": "0.5rem",
+    "sm": "0.875rem",
+    "md": "1.25rem",
+    "lg": "1.75rem",
+    "xl": "2.5rem",
+    "2xl": "3.5rem"
+  },
+  "extensions": {
+    "categories": {
+      "gsap": "#0ae448",
+      "scroll": "#fec5fb",
+      "svg": "#ff8709",
+      "text": "#9d95ff",
+      "ui": "#00bae2",
+      "other": "#abff84"
+    },
+    "displaySizePx": 224,
+    "sourceUrl": "https://gsap.com",
+    "notes": [
+      "Outline-first product controls; category colors are marketing extensions.",
+      "Replace typography.faces[].src with Create Center hosted font URLs."
+    ]
+  },
+  "roles": {
+    "canvas": "150 7% 6%",
+    "canvasForeground": "54 100% 94%",
+    "surface": "0 0% 10%",
+    "surfaceForeground": "54 100% 94%",
+    "action": "137 92% 47%",
+    "actionForeground": "150 7% 6%",
+    "quiet": "70 5% 25%",
+    "quietForeground": "54 100% 94%",
+    "muted": "0 0% 10%",
+    "mutedForeground": "60 6% 46%",
+    "border": "70 5% 25%",
+    "input": "70 5% 25%",
+    "ring": "137 92% 47%",
+    "destructive": "309 100% 47%",
+    "destructiveForeground": "54 100% 94%",
+    "success": "137 92% 47%",
+    "successForeground": "150 7% 6%",
+    "info": "191 100% 44%",
+    "infoForeground": "150 7% 6%"
+  }
+}

package/brands/linear/brand.json

@@ -0,0 +1,163 @@
+{
+  "id": "linear",
+  "name": "Linear",
+  "darkDefault": true,
+  "version": "1.0.0",
+  "semantic": {
+    "background": "210 11% 4%",
+    "foreground": "0 0% 100%",
+    "card": "210 6% 6%",
+    "cardForeground": "0 0% 100%",
+    "popover": "210 6% 6%",
+    "popoverForeground": "0 0% 100%",
+    "primary": "64 89% 54%",
+    "primaryForeground": "210 11% 4%",
+    "secondary": "223 9% 15%",
+    "secondaryForeground": "218 21% 85%",
+    "muted": "210 4% 9%",
+    "mutedForeground": "218 5% 41%",
+    "accent": "223 9% 15%",
+    "accentForeground": "218 21% 85%",
+    "destructive": "0 79% 63%",
+    "destructiveForeground": "0 0% 100%",
+    "border": "223 9% 15%",
+    "input": "223 9% 15%",
+    "ring": "64 89% 54%",
+    "success": "134 62% 40%",
+    "successForeground": "0 0% 100%",
+    "info": "186 98% 40%",
+    "infoForeground": "0 0% 100%"
+  },
+  "recipe": {
+    "buttonDefault": "solid",
+    "density": "compact",
+    "badgeDefault": "match-action",
+    "radii": {
+      "button": "6px",
+      "card": "12px",
+      "badge": "9999px",
+      "input": "6px",
+      "pill": "9999px"
+    },
+    "elevationTokens": {
+      "card": "0 1px 2px 0 rgb(0 0 0 / 0.05)",
+      "control": "0 1px 2px 0 rgb(0 0 0 / 0.04)",
+      "raised": "0 4px 6px -1px rgb(0 0 0 / 0.1)"
+    }
+  },
+  "typography": {
+    "fontSans": "'Inter Variable', 'Inter', ui-sans-serif, system-ui, sans-serif",
+    "fontMono": "'Berkeley Mono', 'JetBrains Mono', ui-monospace, monospace",
+    "headingWeight": 510,
+    "faces": [
+      {
+        "family": "Inter Variable",
+        "src": [
+          {
+            "url": "https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2",
+            "format": "woff2"
+          }
+        ],
+        "weight": "100 900",
+        "display": "swap"
+      }
+    ]
+  },
+  "motion": {
+    "easeOut": "cubic-bezier(0.16, 1, 0.3, 1)",
+    "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "micro": 80,
+    "flow": 140,
+    "reveal": 200,
+    "cinematic": 320
+  },
+  "spacing": {
+    "xs": "0.375rem",
+    "sm": "0.5rem",
+    "md": "0.75rem",
+    "lg": "1rem",
+    "xl": "1.5rem",
+    "2xl": "2rem"
+  },
+  "extensions": {
+    "sourceUrl": "https://linear.app",
+    "notes": ["Dual-mode: dark void default + light paper; acid-lime solid CTA in both modes."]
+  },
+  "roles": {
+    "canvas": "210 11% 4%",
+    "canvasForeground": "0 0% 100%",
+    "surface": "210 6% 6%",
+    "surfaceForeground": "0 0% 100%",
+    "action": "64 89% 54%",
+    "actionForeground": "210 11% 4%",
+    "quiet": "223 9% 15%",
+    "quietForeground": "218 21% 85%",
+    "muted": "210 4% 9%",
+    "mutedForeground": "218 5% 41%",
+    "border": "223 9% 15%",
+    "input": "223 9% 15%",
+    "ring": "64 89% 54%",
+    "destructive": "0 79% 63%",
+    "destructiveForeground": "0 0% 100%",
+    "success": "134 62% 40%",
+    "successForeground": "0 0% 100%",
+    "info": "186 98% 40%",
+    "infoForeground": "0 0% 100%"
+  },
+  "modes": {
+    "dark": {
+      "semantic": {
+        "background": "210 11% 4%",
+        "foreground": "0 0% 100%",
+        "card": "210 6% 6%",
+        "cardForeground": "0 0% 100%",
+        "popover": "210 6% 6%",
+        "popoverForeground": "0 0% 100%",
+        "primary": "64 89% 54%",
+        "primaryForeground": "210 11% 4%",
+        "secondary": "223 9% 15%",
+        "secondaryForeground": "218 21% 85%",
+        "muted": "210 4% 9%",
+        "mutedForeground": "218 5% 41%",
+        "accent": "223 9% 15%",
+        "accentForeground": "218 21% 85%",
+        "destructive": "0 79% 63%",
+        "destructiveForeground": "0 0% 100%",
+        "border": "223 9% 15%",
+        "input": "223 9% 15%",
+        "ring": "64 89% 54%",
+        "success": "134 62% 40%",
+        "successForeground": "0 0% 100%",
+        "info": "186 98% 40%",
+        "infoForeground": "0 0% 100%"
+      }
+    },
+    "light": {
+      "semantic": {
+        "background": "0 0% 100%",
+        "foreground": "210 11% 4%",
+        "card": "0 0% 98%",
+        "cardForeground": "210 11% 4%",
+        "popover": "0 0% 100%",
+        "popoverForeground": "210 11% 4%",
+        "primary": "64 89% 54%",
+        "primaryForeground": "210 11% 4%",
+        "secondary": "220 14% 96%",
+        "secondaryForeground": "210 11% 4%",
+        "muted": "220 14% 96%",
+        "mutedForeground": "218 5% 41%",
+        "accent": "220 14% 96%",
+        "accentForeground": "210 11% 4%",
+        "destructive": "0 79% 63%",
+        "destructiveForeground": "0 0% 100%",
+        "border": "220 13% 91%",
+        "input": "0 0% 100%",
+        "ring": "64 89% 54%",
+        "success": "134 62% 40%",
+        "successForeground": "0 0% 100%",
+        "info": "186 98% 40%",
+        "infoForeground": "0 0% 100%"
+      }
+    }
+  }
+}

package/brands/notion/brand.json

@@ -0,0 +1,145 @@
+{
+  "id": "notion",
+  "name": "Notion",
+  "darkDefault": false,
+  "version": "1.0.0",
+  "roles": {
+    "canvas": "30 10% 96%",
+    "canvasForeground": "0 0% 0%",
+    "surface": "0 0% 100%",
+    "surfaceForeground": "0 0% 0%",
+    "action": "208 100% 44%",
+    "actionForeground": "0 0% 100%",
+    "quiet": "208 92% 95%",
+    "quietForeground": "208 100% 44%",
+    "muted": "208 92% 95%",
+    "mutedForeground": "0 0% 46%",
+    "border": "30 5% 88%",
+    "input": "0 0% 100%",
+    "ring": "208 100% 44%",
+    "destructive": "7 92% 58%",
+    "destructiveForeground": "0 0% 100%",
+    "brand": "0 0% 0%",
+    "brandForeground": "0 0% 100%",
+    "warning": "40 100% 53%",
+    "warningForeground": "0 0% 0%",
+    "info": "208 93% 47%",
+    "infoForeground": "0 0% 100%"
+  },
+  "semantic": {
+    "background": "30 10% 96%",
+    "foreground": "0 0% 0%",
+    "card": "0 0% 100%",
+    "cardForeground": "0 0% 0%",
+    "popover": "0 0% 100%",
+    "popoverForeground": "0 0% 0%",
+    "primary": "208 100% 44%",
+    "primaryForeground": "0 0% 100%",
+    "secondary": "208 92% 95%",
+    "secondaryForeground": "208 100% 44%",
+    "muted": "208 92% 95%",
+    "mutedForeground": "0 0% 46%",
+    "accent": "0 0% 0%",
+    "accentForeground": "0 0% 100%",
+    "destructive": "7 92% 58%",
+    "destructiveForeground": "0 0% 100%",
+    "border": "30 5% 88%",
+    "input": "0 0% 100%",
+    "ring": "208 100% 44%",
+    "warning": "40 100% 53%",
+    "warningForeground": "0 0% 0%",
+    "info": "208 93% 47%",
+    "infoForeground": "0 0% 100%"
+  },
+  "recipe": {
+    "buttonDefault": "solid",
+    "density": "comfortable",
+    "badgeDefault": "muted",
+    "radii": {
+      "button": "8px",
+      "card": "12px",
+      "badge": "9999px",
+      "input": "8px",
+      "pill": "9999px"
+    },
+    "elevationTokens": {
+      "card": "0 0 #0000",
+      "control": "0 0 #0000",
+      "raised": "0px 0.7px 1.462px 0px rgb(0 0 0 / 0.015), 0px 3px 9px 0px rgb(0 0 0 / 0.03)"
+    },
+    "outlineBorder": "#000000"
+  },
+  "typography": {
+    "fontSans": "'NotionInter', 'Inter', ui-sans-serif, system-ui, sans-serif",
+    "fontDisplay": "'NotionInter', 'Inter', ui-sans-serif, system-ui, sans-serif",
+    "headingWeight": 700,
+    "faces": [
+      {
+        "family": "NotionInter",
+        "src": [
+          {
+            "url": "https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2",
+            "format": "woff2"
+          }
+        ],
+        "weight": "100 900",
+        "display": "swap"
+      },
+      {
+        "family": "Lyon Text",
+        "src": [
+          {
+            "url": "/brand-assets/lyon-text-regular.woff2",
+            "format": "woff2"
+          }
+        ],
+        "weight": 400,
+        "display": "swap"
+      }
+    ]
+  },
+  "motion": {
+    "easeOut": "cubic-bezier(0.25, 0.46, 0.45, 0.94)",
+    "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "micro": 120,
+    "flow": 200,
+    "reveal": 280,
+    "cinematic": 460
+  },
+  "spacing": {
+    "xs": "0.625rem",
+    "sm": "1rem",
+    "md": "1.5rem",
+    "lg": "2rem",
+    "xl": "2.75rem",
+    "2xl": "3.75rem"
+  },
+  "extensions": {
+    "categories": {
+      "brand": "#000000",
+      "action": "#0075de",
+      "ghost": "#e6f3fe",
+      "marigold": "#ffb110",
+      "coral": "#f64932",
+      "midnight": "#02093a",
+      "charcoal": "#111111",
+      "graphite": "#615d59"
+    },
+    "decorative": {
+      "marigold": "#ffb110",
+      "coral": "#f64932",
+      "saffron": "#e89d01",
+      "sky-wash": "#62aef0",
+      "midnight": "#02093a"
+    },
+    "sourceUrl": "https://notion.so",
+    "notes": [
+      "roles.action = Notion Blue (only filled CTA). Accent hues are decorative card washes.",
+      "roles.brand = Ink Black (logo / wordmark / text hierarchy via alpha).",
+      "Canvas = Paper Warmth; cards = Pure White \u2014 never invert.",
+      "Card elev=none + hairline border; sticky nav soft shadow \u2192 elevation raised slot.",
+      "Buttons 8px, cards 12px, pills 9999px.",
+      "Lyon Text is editorial accent only \u2014 not product chrome UI."
+    ]
+  }
+}

package/brands/raycast/brand.json

@@ -0,0 +1,120 @@
+{
+  "id": "raycast",
+  "name": "Raycast",
+  "darkDefault": true,
+  "version": "1.0.0",
+  "semantic": {
+    "background": "210 20% 2%",
+    "foreground": "0 0% 100%",
+    "card": "220 18% 3%",
+    "cardForeground": "0 0% 100%",
+    "popover": "220 18% 3%",
+    "popoverForeground": "0 0% 100%",
+    "primary": "0 0% 90%",
+    "primaryForeground": "210 1% 27%",
+    "secondary": "220 5% 11%",
+    "secondaryForeground": "0 0% 100%",
+    "muted": "220 8% 7%",
+    "mutedForeground": "210 1% 42%",
+    "accent": "0 100% 69%",
+    "accentForeground": "210 1% 27%",
+    "destructive": "0 72% 51%",
+    "destructiveForeground": "0 0% 100%",
+    "border": "210 2% 19%",
+    "input": "220 8% 7%",
+    "ring": "240 1% 61%",
+    "success": "151 59% 59%",
+    "successForeground": "210 20% 2%",
+    "info": "202 100% 67%",
+    "infoForeground": "210 20% 2%"
+  },
+  "recipe": {
+    "buttonDefault": "solid",
+    "density": "compact",
+    "badgeDefault": "muted",
+    "radii": {
+      "button": "8px",
+      "card": "16px",
+      "badge": "6px",
+      "input": "8px",
+      "pill": "9999px"
+    },
+    "elevationTokens": {
+      "card": "rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset",
+      "control": "0 0 #0000",
+      "raised": "rgba(255, 255, 255, 0.05) 0px 1px 0px 0px inset, rgba(255, 255, 255, 0.25) 0px 0px 0px 1px, rgba(0, 0, 0, 0.2) 0px -1px 0px 0px inset"
+    }
+  },
+  "typography": {
+    "fontSans": "'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif",
+    "fontMono": "'Geist Mono', 'GeistMono', ui-monospace, Menlo, monospace",
+    "fontDisplay": "'Inter', ui-sans-serif, system-ui, sans-serif",
+    "headingWeight": 400,
+    "faces": [
+      {
+        "family": "Inter",
+        "src": [
+          {
+            "url": "https://cdn.jsdelivr.net/fontsource/fonts/inter:vf@latest/latin-wght-normal.woff2",
+            "format": "woff2"
+          }
+        ],
+        "weight": "100 900",
+        "display": "swap"
+      }
+    ]
+  },
+  "motion": {
+    "easeOut": "cubic-bezier(0.16, 1, 0.3, 1)",
+    "easeInOut": "cubic-bezier(0.4, 0, 0.2, 1)",
+    "easeSpring": "cubic-bezier(0.34, 1.56, 0.64, 1)",
+    "micro": 90,
+    "flow": 160,
+    "reveal": 220,
+    "cinematic": 340
+  },
+  "spacing": {
+    "xs": "0.375rem",
+    "sm": "0.5rem",
+    "md": "0.75rem",
+    "lg": "1rem",
+    "xl": "1.375rem",
+    "2xl": "2rem"
+  },
+  "extensions": {
+    "categories": {
+      "brand": "#ff6363",
+      "ember": "#452324",
+      "sky": "#63a1ff"
+    },
+    "sourceUrl": "https://raycast.com",
+    "notes": [
+      "Primary CTA = Mist fill + Iron text (neutral solid).",
+      "Coral Pulse is brand mark only \u2014 do not use for general product chrome CTAs.",
+      "Cards use elevation=key (keyboard-key inset shadow stack)."
+    ]
+  },
+  "roles": {
+    "canvas": "210 20% 2%",
+    "canvasForeground": "0 0% 100%",
+    "surface": "220 18% 3%",
+    "surfaceForeground": "0 0% 100%",
+    "action": "0 0% 90%",
+    "actionForeground": "210 1% 27%",
+    "quiet": "220 5% 11%",
+    "quietForeground": "0 0% 100%",
+    "muted": "220 8% 7%",
+    "mutedForeground": "210 1% 42%",
+    "border": "210 2% 19%",
+    "input": "220 8% 7%",
+    "ring": "240 1% 61%",
+    "destructive": "0 72% 51%",
+    "destructiveForeground": "0 0% 100%",
+    "brand": "0 100% 69%",
+    "brandForeground": "210 1% 27%",
+    "success": "151 59% 59%",
+    "successForeground": "210 20% 2%",
+    "info": "202 100% 67%",
+    "infoForeground": "210 20% 2%"
+  }
+}