@boeet/next-tokens 0.1.0

package/README.md

@@ -0,0 +1,30 @@
+# @boeet/next-tokens
+
+Design tokens extracted from `design.md` and the Lanhu export.
+
+Use the TypeScript exports for token documentation and `styles.css` for CSS
+variables consumed by Tailwind/shadcn components.
+
+## Install
+
+```bash
+npm install @boeet/next-tokens
+```
+
+Import the CSS variables once in the consumer app:
+
+```css
+@import "@boeet/next-tokens/styles.css";
+```
+
+Use the TypeScript exports when a generated page or design-system document
+needs token metadata:
+
+```ts
+import {
+  brandTokens,
+  radiusTokens,
+  shadowTokens,
+  typographyScale,
+} from "@boeet/next-tokens"
+```

package/dist/index.d.ts

@@ -0,0 +1,37 @@
+export declare const brandTokens: {
+    name: string;
+    value: string;
+    usage: string;
+}[];
+export declare const semanticTokens: {
+    name: string;
+    value: string;
+    usage: string;
+}[];
+export declare const neutralTokens: {
+    name: string;
+    value: string;
+    usage: string;
+}[];
+export declare const typographyScale: {
+    name: string;
+    size: string;
+    lineHeight: string;
+    usage: string;
+}[];
+export declare const spacingTokens: {
+    name: string;
+    value: string;
+    usage: string;
+}[];
+export declare const radiusTokens: {
+    name: string;
+    value: string;
+    usage: string;
+}[];
+export declare const shadowTokens: {
+    name: string;
+    value: string;
+    usage: string;
+}[];
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,WAAW;;;;GAKvB,CAAA;AAED,eAAO,MAAM,cAAc;;;;GAO1B,CAAA;AAED,eAAO,MAAM,aAAa;;;;GAWzB,CAAA;AAED,eAAO,MAAM,eAAe;;;;;GAO3B,CAAA;AAED,eAAO,MAAM,aAAa;;;;GAMzB,CAAA;AAED,eAAO,MAAM,YAAY;;;;GAKxB,CAAA;AAED,eAAO,MAAM,YAAY;;;;GAIxB,CAAA"}

package/dist/index.js

@@ -0,0 +1,53 @@
+export const brandTokens = [
+    { name: "Primary", value: "#007AFF", usage: "主按钮 / 当前项 / 关键入口" },
+    { name: "Primary Hover", value: "#268EFF", usage: "悬浮态 / 高亮提醒" },
+    { name: "Primary Active", value: "#036BDC", usage: "点击态 / 按下态" },
+    { name: "Primary Soft", value: "rgba(0,122,255,0.10)", usage: "浅底按钮 / 导航选中底" },
+];
+export const semanticTokens = [
+    { name: "Success", value: "#18A058", usage: "成功 / 正常" },
+    { name: "Danger", value: "#D03050", usage: "错误 / 失败 / 危险操作" },
+    { name: "Warning", value: "#FCB040", usage: "警告 / 异常" },
+    { name: "Cyan", value: "#21CCFF", usage: "图表高亮 / 深色看板" },
+    { name: "Orange", value: "#FB6021", usage: "图表辅助 / 强调" },
+    { name: "Mint", value: "#05E9CA", usage: "图表辅助" },
+];
+export const neutralTokens = [
+    { name: "Dark Page", value: "#101015", usage: "深色全局背景" },
+    { name: "Dark Surface", value: "#18181D", usage: "深色卡片背景" },
+    { name: "Dark Section", value: "#26262B", usage: "深色分区 / 表头" },
+    { name: "Dark Control", value: "#2D2D30", usage: "深色输入框 / 边框" },
+    { name: "Text Primary", value: "#18181D", usage: "标题 / 正文" },
+    { name: "Text Secondary", value: "#4B4E52", usage: "副标题 / 辅助文字" },
+    { name: "Text Tertiary", value: "#8E9195", usage: "提示文字 / 占位" },
+    { name: "Disabled", value: "#B3B7BD", usage: "禁用 / 轻提示" },
+    { name: "Border", value: "#EFEFF5", usage: "分割线 / 浅边框" },
+    { name: "Background", value: "#FAFAFC", usage: "浅色页面 / 表头" },
+];
+export const typographyScale = [
+    { name: "Data XL", size: "34px", lineHeight: "42px", usage: "看板数据展示" },
+    { name: "Display", size: "24px", lineHeight: "36px", usage: "重要数字 / 特大标题" },
+    { name: "Title L", size: "20px", lineHeight: "30px", usage: "强调标题 / 重要提示" },
+    { name: "Title M", size: "16px", lineHeight: "24px", usage: "卡片标题 / 按钮 / 图表标题" },
+    { name: "Body", size: "14px", lineHeight: "20px", usage: "正文 / 列表 / 表格" },
+    { name: "Caption", size: "12px", lineHeight: "18px", usage: "注释 / 备注 / 标签" },
+];
+export const spacingTokens = [
+    { name: "Page Margin", value: "20px", usage: "内容区左右边距" },
+    { name: "Grid Gutter", value: "20px", usage: "24 栅格水槽" },
+    { name: "Card Gap", value: "20px", usage: "卡片之间间隔" },
+    { name: "Button Padding", value: "16px", usage: "按钮水平安全边距" },
+    { name: "Icon Gap", value: "8px", usage: "图标与文字间距" },
+];
+export const radiusTokens = [
+    { name: "Control", value: "3px", usage: "按钮 / 输入 / 弹层小容器" },
+    { name: "Card", value: "8px", usage: "业务卡片 / 看板卡片" },
+    { name: "Pill", value: "14px", usage: "28px 胶囊标签" },
+    { name: "Round", value: "50%", usage: "头像 / 状态点" },
+];
+export const shadowTokens = [
+    { name: "Card", value: "0 40px 16px -24px rgba(0,0,0,.04)", usage: "普通卡片" },
+    { name: "Float", value: "0 0 20px rgba(142,145,149,.10)", usage: "侧栏 / 顶栏 / 浮层" },
+    { name: "Popover", value: "0 2px 16px rgba(0,0,0,.10)", usage: "弹出层 / 确认框" },
+];
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,29 @@
+{
+  "name": "@boeet/next-tokens",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "files": [
+    "dist",
+    "styles.css",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "devDependencies": {
+    "typescript": "^5"
+  },
+  "scripts": {
+    "build": "tsc -p tsconfig.json"
+  }
+}

package/styles.css

@@ -0,0 +1,96 @@
+:root {
+  --color-primary-token: #007aff;
+  --color-primary-hover: #268eff;
+  --color-primary-active: #036bdc;
+  --color-primary-soft: rgba(0, 122, 255, 0.1);
+  --color-success-token: #18a058;
+  --color-success-soft: rgba(24, 160, 88, 0.1);
+  --color-danger-token: #d03050;
+  --color-warning-token: #fcb040;
+  --color-orange-token: #fb6021;
+  --color-cyan-token: #21ccff;
+  --color-mint-token: #05e9ca;
+  --color-purple-token: #280dd2;
+  --color-steel-token: #849dbf;
+  --color-yellow-token: #ffe057;
+
+  --background: #fafafc;
+  --foreground: #18181d;
+  --card: #ffffff;
+  --card-foreground: #18181d;
+  --popover: #ffffff;
+  --popover-foreground: #18181d;
+  --primary: #007aff;
+  --primary-foreground: #ffffff;
+  --secondary: #fafafc;
+  --secondary-foreground: #18181d;
+  --muted: #fafafc;
+  --muted-foreground: #8e9195;
+  --accent: rgba(0, 122, 255, 0.1);
+  --accent-foreground: #007aff;
+  --destructive: #d03050;
+  --destructive-foreground: #ffffff;
+  --border: #efeff5;
+  --input: #e0e0e6;
+  --ring: #007aff;
+  --chart-1: #849dbf;
+  --chart-2: #280dd2;
+  --chart-3: #21ccff;
+  --chart-4: #05e9ca;
+  --chart-5: #fcb040;
+  --radius: 8px;
+  --radius-control: 3px;
+  --radius-card: 8px;
+  --radius-pill: 14px;
+  --space-page: 20px;
+  --space-grid-gutter: 20px;
+  --sidebar-width: 244px;
+  --topbar-height: 64px;
+  --nav-item-height: 44px;
+  --shadow-card: 0 40px 16px -24px rgba(0, 0, 0, 0.04);
+  --shadow-float: 0 0 20px rgba(142, 145, 149, 0.1);
+  --shadow-popover: 0 2px 16px rgba(0, 0, 0, 0.1);
+  --sidebar: #ffffff;
+  --sidebar-foreground: #18181d;
+  --sidebar-primary: #007aff;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: rgba(0, 122, 255, 0.1);
+  --sidebar-accent-foreground: #007aff;
+  --sidebar-border: #efeff5;
+  --sidebar-ring: #007aff;
+}
+
+.dark {
+  --background: #101015;
+  --foreground: #efeff5;
+  --card: #18181d;
+  --card-foreground: #efeff5;
+  --popover: #18181d;
+  --popover-foreground: #efeff5;
+  --primary: #007aff;
+  --primary-foreground: #ffffff;
+  --secondary: #26262b;
+  --secondary-foreground: #efeff5;
+  --muted: #26262b;
+  --muted-foreground: #b3b7bd;
+  --accent: rgba(0, 122, 255, 0.15);
+  --accent-foreground: #268eff;
+  --destructive: #d03050;
+  --destructive-foreground: #ffffff;
+  --border: #2d2d30;
+  --input: #2d2d30;
+  --ring: #268eff;
+  --chart-1: #849dbf;
+  --chart-2: #21ccff;
+  --chart-3: #05e9ca;
+  --chart-4: #fcb040;
+  --chart-5: #fb6021;
+  --sidebar: #18181d;
+  --sidebar-foreground: #efeff5;
+  --sidebar-primary: #007aff;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: rgba(0, 122, 255, 0.15);
+  --sidebar-accent-foreground: #268eff;
+  --sidebar-border: #2d2d30;
+  --sidebar-ring: #268eff;
+}