@nebutra/tokens 0.1.1 → 0.1.2

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,180 @@
+{
+  "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"
+      }
+    ]
+  },
+  "zones": {
+    "product": {
+      "caption": {
+        "fontSize": "14px",
+        "lineHeight": 1.4,
+        "fontWeight": 400,
+        "letterSpacing": "-0.14px"
+      },
+      "bodySm": {
+        "fontSize": "16px",
+        "lineHeight": 1.15,
+        "fontWeight": 400
+      },
+      "body": {
+        "fontSize": "19px",
+        "lineHeight": 1.15,
+        "fontWeight": 400
+      },
+      "bodyLg": {
+        "fontSize": "23px",
+        "lineHeight": 1.38,
+        "fontWeight": 400,
+        "letterSpacing": "-0.23px"
+      },
+      "subheading": {
+        "fontSize": "34px",
+        "lineHeight": 1.2,
+        "fontWeight": 400,
+        "letterSpacing": "-0.34px"
+      },
+      "heading": {
+        "fontSize": "44px",
+        "lineHeight": 1.2,
+        "fontWeight": 600,
+        "letterSpacing": "-0.44px"
+      }
+    },
+    "marketing": {
+      "body": {
+        "fontSize": "19px",
+        "lineHeight": 1.15,
+        "fontWeight": 400
+      },
+      "heading": {
+        "fontSize": "66px",
+        "lineHeight": 1.2,
+        "fontWeight": 600,
+        "letterSpacing": "-0.66px"
+      },
+      "headingLg": {
+        "fontSize": "101px",
+        "lineHeight": 1,
+        "fontWeight": 600,
+        "letterSpacing": "-1.11px"
+      },
+      "display": {
+        "fontSize": "224px",
+        "lineHeight": 0.9,
+        "fontWeight": 600,
+        "letterSpacing": "-4.48px"
+      }
+    }
+  },
+  "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.",
+      "Use data-zone=\"marketing\" for hero/display; product zone for app chrome."
+    ]
+  },
+  "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,202 @@
+{
+  "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": "var(--shadow-sm, 0 1px 2px 0 rgb(0 0 0 / 0.05))",
+      "control": "var(--shadow-xs, 0 1px 2px 0 rgb(0 0 0 / 0.04))",
+      "raised": "var(--shadow-md, 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"
+      }
+    ]
+  },
+  "zones": {
+    "product": {
+      "caption": {
+        "fontSize": "13px",
+        "lineHeight": 1.2,
+        "fontWeight": 400
+      },
+      "bodySm": {
+        "fontSize": "14px",
+        "lineHeight": 1.5,
+        "fontWeight": 400
+      },
+      "body": {
+        "fontSize": "14px",
+        "lineHeight": 1.5,
+        "fontWeight": 400
+      },
+      "bodyLg": {
+        "fontSize": "16px",
+        "lineHeight": 1.5,
+        "fontWeight": 400
+      },
+      "heading": {
+        "fontSize": "24px",
+        "lineHeight": 1.25,
+        "fontWeight": 510,
+        "letterSpacing": "-0.012em"
+      },
+      "display": {
+        "fontSize": "32px",
+        "lineHeight": 1.15,
+        "fontWeight": 510,
+        "letterSpacing": "-0.022em"
+      }
+    },
+    "marketing": {
+      "body": {
+        "fontSize": "15px",
+        "lineHeight": 1.6,
+        "fontWeight": 400
+      },
+      "heading": {
+        "fontSize": "48px",
+        "lineHeight": 1,
+        "fontWeight": 510,
+        "letterSpacing": "-0.022em"
+      },
+      "display": {
+        "fontSize": "72px",
+        "lineHeight": 1,
+        "fontWeight": 510,
+        "letterSpacing": "-0.022em"
+      }
+    }
+  },
+  "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,189 @@
+{
+  "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"
+      }
+    ]
+  },
+  "zones": {
+    "product": {
+      "caption": {
+        "fontSize": "12px",
+        "lineHeight": 1.33,
+        "fontWeight": 500,
+        "letterSpacing": "0.12px"
+      },
+      "bodySm": {
+        "fontSize": "14px",
+        "lineHeight": 1.43,
+        "fontWeight": 500
+      },
+      "body": {
+        "fontSize": "16px",
+        "lineHeight": 1.5,
+        "fontWeight": 400
+      },
+      "subheading": {
+        "fontSize": "20px",
+        "lineHeight": 1,
+        "fontWeight": 500
+      },
+      "headingSm": {
+        "fontSize": "22px",
+        "lineHeight": 1.27,
+        "fontWeight": 600,
+        "letterSpacing": "-0.242px"
+      },
+      "heading": {
+        "fontSize": "40px",
+        "lineHeight": 1.5,
+        "fontWeight": 600
+      }
+    },
+    "marketing": {
+      "body": {
+        "fontSize": "16px",
+        "lineHeight": 1.5,
+        "fontWeight": 400
+      },
+      "heading": {
+        "fontSize": "48px",
+        "lineHeight": 1.5,
+        "fontWeight": 700
+      },
+      "headingLg": {
+        "fontSize": "54px",
+        "lineHeight": 1.04,
+        "fontWeight": 700,
+        "letterSpacing": "-1.89px"
+      },
+      "display": {
+        "fontSize": "72px",
+        "lineHeight": 1.21,
+        "fontWeight": 700,
+        "letterSpacing": "-2.016px"
+      }
+    }
+  },
+  "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 — never invert.",
+      "Card elev=none + hairline border; sticky nav soft shadow → elevation raised slot.",
+      "Buttons 8px, cards 12px, pills 9999px.",
+      "Lyon Text is editorial accent only — not product chrome UI."
+    ]
+  }
+}