{"_id":"@acuity-bookmarks/design-tokens","_rev":"2-203ba44eaf3dc935edaef1e5e80d244d","name":"@acuity-bookmarks/design-tokens","dist-tags":{"latest":"1.1.0"},"versions":{"1.0.0":{"name":"@acuity-bookmarks/design-tokens","version":"1.0.0","keywords":["design-tokens","design-system","theme","material-design","material-design-3","css-variables","typescript","acuity-bookmarks","ui","colors","spacing","typography"],"author":"AcuityBookmarks Team","license":"MIT","_id":"@acuity-bookmarks/design-tokens@1.0.0","maintainers":[{"name":"cqw","email":"547847705@qq.com"}],"homepage":"https://github.com/acuity-bookmarks/acuitybookmarks/tree/main/packages/design-tokens#readme","bugs":{"url":"https://github.com/acuity-bookmarks/acuitybookmarks/issues"},"dist":{"shasum":"d05ab0afefd30d3275f1c2c0118923a9ec9a06dc","tarball":"https://registry.npmjs.org/@acuity-bookmarks/design-tokens/-/design-tokens-1.0.0.tgz","fileCount":21,"integrity":"sha512-z1kD2nV57LJeMVWbocAuieh2EPrbYED/WK2PTuchoe/gvBam/XlqF522WdeuE8udKn17kO0SSVMzBwLcFJKM7Q==","signatures":[{"sig":"MEQCIC4l/MN5lbWrIxnRY8WJdGQIEOQDdgia4mrTyCuaYacVAiBO91sXmz43XVDsibIxBwFgRy8FkNCTh4T2k7M9xcRPYw==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":135897},"main":"./src/index.ts","type":"module","types":"./src/index.ts","shasum":"d05ab0afefd30d3275f1c2c0118923a9ec9a06dc","engines":{"node":">=18.0.0"},"exports":{".":{"types":"./src/index.ts","import":"./src/index.ts","default":"./src/index.ts","require":"./src/index.ts"},"./colors":{"types":"./src/colors.ts","import":"./src/colors.ts","default":"./src/colors.ts","require":"./src/colors.ts"},"./effects":{"types":"./src/effects.ts","import":"./src/effects.ts","default":"./src/effects.ts","require":"./src/effects.ts"},"./spacing":{"types":"./src/spacing.ts","import":"./src/spacing.ts","default":"./src/spacing.ts","require":"./src/spacing.ts"},"./css-vars":{"types":"./src/css-vars.ts","import":"./src/css-vars.ts","default":"./src/css-vars.ts","require":"./src/css-vars.ts"},"./animations":{"types":"./src/animations.ts","import":"./src/animations.ts","default":"./src/animations.ts","require":"./src/animations.ts"},"./typography":{"types":"./src/typography.ts","import":"./src/typography.ts","default":"./src/typography.ts","require":"./src/typography.ts"},"./css/variables.css":"./css/variables.css","./css/material-theme.css":"./css/material-theme.css"},"_npmUser":{"name":"cqw","email":"547847705@qq.com"},"_integrity":"sha512-z1kD2nV57LJeMVWbocAuieh2EPrbYED/WK2PTuchoe/gvBam/XlqF522WdeuE8udKn17kO0SSVMzBwLcFJKM7Q==","repository":{"url":"https://github.com/acuity-bookmarks/acuitybookmarks.git","type":"git","directory":"packages/design-tokens"},"_npmVersion":"10.8.3","description":"Shared design tokens for AcuityBookmarks - Material Design 3 based design system with colors, spacing, typography, and more","directories":{},"_nodeVersion":"24.3.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/design-tokens_1.0.0_1778395537967_0.28814563726019293","host":"s3://npm-registry-packages-npm-production"}},"1.1.0":{"name":"@acuity-bookmarks/design-tokens","version":"1.1.0","description":"Shared design tokens for AcuityBookmarks - Material Design 3 based design system with colors, spacing, typography, and more","type":"module","main":"./src/index.ts","types":"./src/index.ts","exports":{".":{"types":"./src/index.ts","import":"./src/index.ts","require":"./src/index.ts","default":"./src/index.ts"},"./colors":{"types":"./src/colors.ts","import":"./src/colors.ts","require":"./src/colors.ts","default":"./src/colors.ts"},"./spacing":{"types":"./src/spacing.ts","import":"./src/spacing.ts","require":"./src/spacing.ts","default":"./src/spacing.ts"},"./typography":{"types":"./src/typography.ts","import":"./src/typography.ts","require":"./src/typography.ts","default":"./src/typography.ts"},"./animations":{"types":"./src/animations.ts","import":"./src/animations.ts","require":"./src/animations.ts","default":"./src/animations.ts"},"./effects":{"types":"./src/effects.ts","import":"./src/effects.ts","require":"./src/effects.ts","default":"./src/effects.ts"},"./css-vars":{"types":"./src/css-vars.ts","import":"./src/css-vars.ts","require":"./src/css-vars.ts","default":"./src/css-vars.ts"},"./css/material-theme.css":"./css/material-theme.css","./css/variables.css":"./css/variables.css","./css/semantic-colors.css":"./css/semantic-colors.css"},"keywords":["design-tokens","design-system","theme","material-design","material-design-3","css-variables","typescript","acuity-bookmarks","ui","colors","spacing","typography"],"author":{"name":"AcuityBookmarks Team"},"license":"MIT","repository":{"type":"git","url":"git+https://github.com/acuity-bookmarks/acuitybookmarks.git","directory":"packages/design-tokens"},"bugs":{"url":"https://github.com/acuity-bookmarks/acuitybookmarks/issues"},"homepage":"https://github.com/acuity-bookmarks/acuitybookmarks/tree/main/packages/design-tokens#readme","publishConfig":{"access":"public"},"engines":{"node":">=18.0.0"},"_id":"@acuity-bookmarks/design-tokens@1.1.0","gitHead":"2c917ded535187b76a64902637f46c92b4cd3e29","_nodeVersion":"22.22.2","_npmVersion":"10.9.2","dist":{"integrity":"sha512-vlcvBMnrPvSS8NdOPbOQYwvM3ngON+zobkylL+p+m0nLwfjTuCmhmLxLq/KGL5f2MXh2PXOvkIojsc0AbnkdnQ==","shasum":"403ededcf0ad6a9f168e79871f0d932a10f3b6f8","tarball":"https://registry.npmjs.org/@acuity-bookmarks/design-tokens/-/design-tokens-1.1.0.tgz","fileCount":22,"unpackedSize":147060,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCIQC4zHgpJ4+PZ84f7GMaixQHCUASXXRQMdK9eec8wdrRfAIgGdpk4vtW1FNb9RZj+eAjdYeCBrLRuqLuLzV4xm3TYQ8="}]},"_npmUser":{"name":"cqw","email":"547847705@qq.com"},"directories":{},"maintainers":[{"name":"cqw","email":"547847705@qq.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-tokens_1.1.0_1778397493131_0.2484364867506772"},"_hasShrinkwrap":false}},"time":{"created":"2026-05-10T06:45:37.881Z","modified":"2026-05-10T07:18:13.405Z","1.0.0":"2026-05-10T06:45:38.095Z","1.1.0":"2026-05-10T07:18:13.262Z"},"bugs":{"url":"https://github.com/acuity-bookmarks/acuitybookmarks/issues"},"author":{"name":"AcuityBookmarks Team"},"license":"MIT","homepage":"https://github.com/acuity-bookmarks/acuitybookmarks/tree/main/packages/design-tokens#readme","keywords":["design-tokens","design-system","theme","material-design","material-design-3","css-variables","typescript","acuity-bookmarks","ui","colors","spacing","typography"],"repository":{"type":"git","url":"git+https://github.com/acuity-bookmarks/acuitybookmarks.git","directory":"packages/design-tokens"},"description":"Shared design tokens for AcuityBookmarks - Material Design 3 based design system with colors, spacing, typography, and more","maintainers":[{"name":"cqw","email":"547847705@qq.com"}],"readme":"# @acuity-bookmarks/design-tokens\n\nAcuityBookmarks 设计令牌包 - 基于 Material Design 3 的统一设计系统。\n\n## 📦 包含内容\n\n- **Material Design 3 主题** - 薄荷绿色系（种子色 #89EAD7）\n- **颜色系统** - 完整的 MD3 颜色方案 + 语义色\n- **间距系统** - Material Design spacing tokens\n- **形状系统** - Material Design shape tokens\n- **字体系统** - 字体家族、大小、字重\n- **CSS 变量** - 完整的 MD3 CSS 自定义属性\n\n## 🎨 设计理念\n\n### Material Design 3 主题\n\nAcuityBookmarks 完全采用 **Material Design 3** 设计系统：\n\n- **种子色**: `#89EAD7` (薄荷绿)\n- **Primary**: `#83d5c5` (亮色) / `#016b5d` (暗色)\n- **Secondary**: `#b1ccc5` (亮色) / `#4f5b58` (暗色)\n- **完整色系**: MD3 自动生成的完整颜色方案\n\n### 设计原则\n\n1. **遵循 Material Design 3 规范** - 不覆盖任何 MD3 自动生成的颜色\n2. **统一的设计语言** - 插件和官网使用相同的设计系统\n3. **深色主题优先** - 为专业用户设计的深色界面\n4. **可访问性** - 符合 WCAG 对比度要求\n\n## 📖 使用方法\n\n### 1. 在 CSS 中使用（推荐）\n\n推荐直接导入 CSS 文件使用 CSS 变量：\n\n```typescript\n// 在你的入口文件中\nimport '@acuity-bookmarks/design-tokens/css/material-theme.css'\nimport '@acuity-bookmarks/design-tokens/css/variables.css'\nimport '@acuity-bookmarks/design-tokens/css/semantic-colors.css'\n\n// 然后在 CSS 中使用\n.button {\n  background-color: var(--md-sys-color-primary);\n  color: var(--md-sys-color-on-primary);\n  padding: var(--md-sys-spacing-md);\n  border-radius: var(--md-sys-shape-corner-medium);\n}\n```\n\n### 2. 在 TypeScript/JavaScript 中使用（无法使用 CSS 变量的场景）\n\n**适用场景**：Canvas、Chrome Badge API、浏览器控制台等无法使用 CSS 变量的地方。\n\n```typescript\n// 导入颜色常量（提供 CSS、RGB、Hex 三种格式）\nimport { materialColors, semanticColors } from '@acuity-bookmarks/design-tokens/colors'\n\n// Canvas 绘图示例\nconst ctx = canvas.getContext('2d')\nctx.fillStyle = materialColors.primary.rgb  // 'rgb(47, 98, 140)'\nctx.fillRect(0, 0, 100, 100)\n\n// Chrome Badge API 示例\nchrome.action.setBadgeBackgroundColor({\n  color: semanticColors.success.rgb  // 'rgb(46, 125, 50)'\n})\n\n// 浏览器控制台样式示例\nconsole.log(\n  `%c成功`,\n  `background: ${semanticColors.successContainer.rgb}; color: ${semanticColors.success.rgb}`\n)\n\n// 获取不同格式的颜色值\nmaterialColors.primary.css  // 'var(--md-sys-color-primary)'\nmaterialColors.primary.rgb  // 'rgb(47, 98, 140)'\nmaterialColors.primary.hex  // '#2f628c'\n```\n\n**可用的颜色导出**：\n\n```typescript\n// Material Design 3 主题色\nmaterialColors.primary          // 主色（亮色主题）\nmaterialColors.primaryDark      // 主色（暗色主题）\nmaterialColors.secondary        // 次要色（亮色主题）\nmaterialColors.secondaryDark    // 次要色（暗色主题）\nmaterialColors.error            // 错误色（亮色主题）\nmaterialColors.errorDark        // 错误色（暗色主题）\nmaterialColors.surface          // 表面色（亮色主题）\nmaterialColors.surfaceDark      // 表面色（暗色主题）\nmaterialColors.onSurface        // 表面上的文本（亮色主题）\nmaterialColors.onSurfaceDark    // 表面上的文本（暗色主题）\n\n// 语义化颜色\nsemanticColors.warning          // 警告色\nsemanticColors.warningContainer // 警告容器色\nsemanticColors.success          // 成功色\nsemanticColors.successContainer // 成功容器色\nsemanticColors.info             // 信息色\nsemanticColors.infoContainer    // 信息容器色\n\n// 强调色/装饰色\naccentColors.teal               // 青色\naccentColors.gold               // 金色\naccentColors.amber              // 琥珀色\naccentColors.purple             // 紫色\naccentColors.ai                 // AI 功能色\n\n// Primary 色彩系列（50-900）\nprimaryScale[50]                // 最浅\nprimaryScale[500]               // 中等\nprimaryScale[900]               // 最深\n```\n\n**辅助函数**：\n\n```typescript\nimport { getColor, getThemeColor } from '@acuity-bookmarks/design-tokens/colors'\n\n// 获取特定格式的颜色\nconst rgbColor = getColor(materialColors.primary, 'rgb')\nconst hexColor = getColor(materialColors.primary, 'hex')\n\n// 根据主题获取颜色\nconst themeColor = getThemeColor(\n  materialColors.primary,      // 亮色\n  materialColors.primaryDark,  // 暗色\n  'dark'                       // 当前主题\n)\n```\n\n### 3. 在 Vue/Nuxt 中使用\n\n```vue\n<script setup>\n// CSS tokens 通过 CSS 变量自动可用\n</script>\n\n<template>\n  <button class=\"btn-primary\">\n    登录\n  </button>\n</template>\n\n<style scoped>\n.btn-primary {\n  background-color: var(--md-sys-color-primary);\n  color: var(--md-sys-color-on-primary);\n}\n</style>\n```\n\n### 4. Chrome Extension 中使用\n\n```typescript\n// 在入口文件中导入 CSS\nimport '@acuity-bookmarks/design-tokens/css/material-theme.css'\nimport '@acuity-bookmarks/design-tokens/css/variables.css'\nimport '@acuity-bookmarks/design-tokens/css/semantic-colors.css'\n\n// 在 CSS 中使用变量\n.button {\n  background-color: var(--md-sys-color-primary);\n}\n\n// 在无法使用 CSS 变量的场景（Badge API、Canvas 等）\nimport { materialColors, semanticColors } from '@acuity-bookmarks/design-tokens/colors'\n\n// Badge API\nchrome.action.setBadgeBackgroundColor({\n  color: semanticColors.success.rgb\n})\n\n// Canvas\nconst ctx = canvas.getContext('2d')\nctx.fillStyle = materialColors.primary.rgb\n```\n\n## 🎯 颜色自动同步\n\n**v1.1.0 新特性**：所有颜色现在支持自动同步！\n\n只要修改 `@acuity-bookmarks/design-tokens` 包中的颜色定义，所有使用这些颜色的地方都会自动同步，**包括无法使用 CSS 变量的场景**（Canvas、Badge API、Console 等）。\n\n**工作原理**：\n\n1. **CSS 变量场景**：通过 CSS 变量自动同步（已有功能）\n2. **TypeScript 常量场景**：通过导入 TypeScript 常量自动同步（v1.1.0 新增）\n\n**示例**：\n\n```typescript\n// ✅ 自动同步：修改 design-tokens 包后，这里的颜色会自动更新\nimport { materialColors } from '@acuity-bookmarks/design-tokens/colors'\n\nconst BADGE_COLORS = {\n  info: materialColors.primary.rgb,      // 自动同步\n  success: semanticColors.success.rgb,   // 自动同步\n  warning: semanticColors.warning.rgb,   // 自动同步\n  error: materialColors.error.rgb        // 自动同步\n}\n\n// ❌ 不会自动同步：硬编码的颜色值\nconst BADGE_COLORS = {\n  info: 'rgb(47, 98, 140)',    // 需要手动更新\n  success: 'rgb(46, 125, 50)', // 需要手动更新\n}\n```\n\n## 🎯 设计令牌列表\n\n### Material Design 颜色 tokens\n\n```css\n/* 主题色 */\nvar(--md-sys-color-primary)              /* 主色 - 薄荷绿 */\nvar(--md-sys-color-on-primary)           /* 主色上的文本 */\nvar(--md-sys-color-secondary)            /* 次要色 - 蓝绿色 */\nvar(--md-sys-color-on-secondary)         /* 次要色上的文本 */\n\n/* 表面色 */\nvar(--md-sys-color-surface)              /* 表面背景 */\nvar(--md-sys-color-on-surface)           /* 表面上的文本 */\nvar(--md-sys-color-background)           /* 页面背景 */\nvar(--md-sys-color-on-background)        /* 背景上的文本 */\n```\n\n### 语义化颜色（CSS 变量）\n\n```css\n/* 语义色 - 来自 semantic-colors.css */\nvar(--acuity-semantic-warning)           /* 警告色 */\nvar(--acuity-semantic-success)           /* 成功色 */\nvar(--acuity-semantic-info)              /* 信息色 */\n\n/* 强调色 - 来自 semantic-colors.css */\nvar(--acuity-accent-teal)                /* 青色 */\nvar(--acuity-accent-gold)                /* 金色 */\nvar(--acuity-accent-amber)               /* 琥珀色 */\nvar(--acuity-accent-purple)              /* 紫色 */\nvar(--acuity-accent-ai)                  /* AI 功能色 */\n```\n\n### 语义化颜色（TypeScript）\n\n```typescript\ncolors.semantic.success     // #22c55e - 成功\ncolors.semantic.error       // #ef4444 - 错误\ncolors.semantic.warning     // #f59e0b - 警告\ncolors.semantic.info        // #3b82f6 - 信息\n```\n\n### 间距\n\n```typescript\nspacing.xs      // 4px\nspacing.sm      // 8px\nspacing.md      // 12px\nspacing.base    // 16px\nspacing.lg      // 24px\nspacing.xl      // 32px\n```\n\n### 字体\n\n```typescript\nfontSize.sm     // 12px\nfontSize.base   // 14px\nfontSize.md     // 16px\nfontSize.lg     // 18px\n```\n\n## 🔄 跨平台使用\n\n### 插件前端 (Chrome Extension)\n\n```typescript\nimport { materialTheme } from '@acuity-bookmarks/design-tokens'\n// 自动映射到 Chrome Material Design\n```\n\n### 官网 (Nuxt)\n\n```typescript\nimport { colors, spacing } from '@acuity-bookmarks/design-tokens'\n// 直接使用设计令牌\n```\n\n## 📝 维护指南\n\n### 修改 Material Design 主题色\n\n1. 访问 [Material Design Theme Builder](https://m3.material.io/theme-builder)\n2. 调整种子色（当前为 #89EAD7）\n3. 导出 CSS 文件\n4. 替换 `css/material-theme.css`\n5. 更新 `src/colors.ts` 中的颜色值\n\n### 修改其他 tokens\n\n- **语义色**: 编辑 `src/colors.ts` 的 `semantic` 部分\n- **间距**: 编辑 `css/variables.css` 的 spacing tokens\n- **字体**: 编辑 `src/typography.ts`\n- **形状**: 编辑 `css/variables.css` 的 shape tokens\n\n### ⚠️ 不要做的事情\n\n- ❌ 不要手动覆盖 Material Design 自动生成的颜色\n- ❌ 不要使用 `brand-override.css`（已废弃）\n- ❌ 不要在 `variables.css` 中定义品牌色（应使用 MD3 颜色）\n\n## 🎯 设计原则\n\n1. **一致性优先**: 所有产品使用相同的设计令牌\n2. **简单实用**: 只提供真正需要的令牌\n3. **平台适配**: 支持 Web 和 Chrome Extension\n4. **类型安全**: 完整的 TypeScript 类型支持\n\n## 📚 完整文档\n\n### 设计规范\n- [设计原则](./docs/DESIGN_PRINCIPLES.md) - 核心设计理念\n- [颜色使用指南](./docs/COLOR_USAGE.md) - 如何使用颜色系统\n- [间距使用指南](./docs/SPACING_GUIDE.md) - 如何使用间距系统\n- [字体使用指南](./docs/TYPOGRAPHY_GUIDE.md) - 如何使用字体系统\n- [跨平台映射表](./docs/PLATFORM_MAPPING.md) - 不同平台的实现方式\n- [核心 UI 规范](./docs/CORE_UI_SPECS.md) - 核心 UI 元素规范\n\n### 实现示例\n- [Web CSS 变量示例](./examples/web-css-variables.html) - HTML/CSS 完整示例\n- [React Native 示例](./examples/react-native.tsx) - React Native 完整示例\n- [Flutter 示例](./examples/flutter.dart) - Flutter 完整示例\n- [Vue 组件示例](./examples/button-example.vue) - Vue 组件示例\n\n## 🚀 发布到 npm\n\n### 内部项目使用（Monorepo）\n\n```json\n// frontend/package.json 或 website/package.json\n{\n  \"dependencies\": {\n    \"@acuity-bookmarks/design-tokens\": \"workspace:*\"\n  }\n}\n```\n\n### 外部项目使用（npm）\n\n```bash\n# 发布到 npm（需要权限）\ncd packages/design-tokens\nnpm publish --access public\n\n# 外部项目安装\nnpm install @acuity-bookmarks/design-tokens\n# 或\nbun add @acuity-bookmarks/design-tokens\n```\n\n## 🤝 贡献指南\n\n### 修改设计 tokens\n\n1. **修改颜色**：编辑 `src/colors.ts` 或使用 [Material Theme Builder](https://m3.material.io/theme-builder) 生成新的 `css/material-theme.css`\n2. **修改间距**：编辑 `css/variables.css` 的 spacing tokens\n3. **修改字体**：编辑 `src/typography.ts`\n4. **测试变更**：在 `examples/` 中测试所有平台的实现\n5. **更新文档**：同步更新 `docs/` 中的相关文档\n\n### 添加新的 token\n\n1. 在对应的 TypeScript 文件中添加（如 `src/colors.ts`）\n2. 在 `css/variables.css` 中添加对应的 CSS 变量\n3. 更新文档说明使用方法\n4. 在示例中展示新 token 的用法\n\n## 📜 License\n\nMIT\n","readmeFilename":"README.md"}