{"_id":"100city-theme","_rev":"2-337cb31e2fea1d72bb6ef5ce94f93648","name":"100city-theme","dist-tags":{"latest":"0.2.0"},"versions":{"0.1.0":{"name":"100city-theme","version":"0.1.0","keywords":["theme","design-tokens","css-variables"],"license":"MIT","_id":"100city-theme@0.1.0","maintainers":[{"name":"67ainilahhh","email":"67ainilahhh@gmail.com"}],"dist":{"shasum":"944812f2ca1a329e2325cb8ebcce0c8f1a36c0ab","tarball":"https://registry.npmjs.org/100city-theme/-/100city-theme-0.1.0.tgz","fileCount":9,"integrity":"sha512-k7yH0Bc+Q8ZyEp1HSRC/3SnVw1ThCx/ndtAAF9GrCBixXxAlL70CXzPAtQWhp7rWwFdx8kryGOP0DjcStTQL8Q==","signatures":[{"sig":"MEQCID8uJtrkxFAOYebiNtkEufzkAsAiI9Gjvw33AoPqGx9YAiB4vpoNVBVyoZk4HLJ81ehQ1kLPB+Znj22pqNUJpq1JXA==","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":23817},"main":"dist/index.js","types":"dist/index.d.ts","gitHead":"7d94806b4180254abcc5b4bd97d5802484de118d","private":false,"scripts":{"dev":"node build.js --watch","build":"node build.js"},"_npmUser":{"name":"67ainilahhh","email":"67ainilahhh@gmail.com"},"_npmVersion":"10.9.4","description":"100 City 多项目主题配色方案 - Design Token 系统","directories":{},"_nodeVersion":"22.22.0","_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/100city-theme_0.1.0_1773824054777_0.7613007889184467","host":"s3://npm-registry-packages-npm-production"}},"0.2.0":{"name":"100city-theme","version":"0.2.0","description":"100 City 多项目主题配色方案 - Design Token 系统","main":"dist/index.js","types":"dist/index.d.ts","scripts":{"build":"node build.js","dev":"node build.js --watch"},"keywords":["theme","design-tokens","css-variables"],"license":"MIT","private":false,"_id":"100city-theme@0.2.0","gitHead":"80afe14d983e687f3e96f3dec2777a1b94f39d91","_nodeVersion":"22.22.0","_npmVersion":"10.9.4","dist":{"integrity":"sha512-GlRIDvidFginMB0je3A3LOrqmnEJfs8FLl9FOYJpicZIt3CGnh2Fr/tURPCEwAlrETInNOxMnSqyIoJzV8RWhA==","shasum":"5ecee2292ca1178c7c8123bbb670ebfdd74ce2f5","tarball":"https://registry.npmjs.org/100city-theme/-/100city-theme-0.2.0.tgz","fileCount":9,"unpackedSize":30363,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICmfCe5lGiR9nwmkP7+c+Nr6WkU9vIwkNigJQ7xSZWlnAiEArI/oxOpWysCn9N6uyoGlMV1rf4spCBqjgagJbTvcxqg="}]},"_npmUser":{"name":"67ainilahhh","email":"67ainilahhh@gmail.com"},"directories":{},"maintainers":[{"name":"67ainilahhh","email":"67ainilahhh@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/100city-theme_0.2.0_1773827196545_0.5249232050122234"},"_hasShrinkwrap":false}},"time":{"created":"2026-03-18T08:54:14.776Z","modified":"2026-03-18T09:46:36.778Z","0.1.0":"2026-03-18T08:54:14.926Z","0.2.0":"2026-03-18T09:46:36.682Z"},"license":"MIT","keywords":["theme","design-tokens","css-variables"],"description":"100 City 多项目主题配色方案 - Design Token 系统","maintainers":[{"name":"67ainilahhh","email":"67ainilahhh@gmail.com"}],"readme":"# @100city/theme\n\n100 City 多项目主题配色方案。\n\n## 可用主题\n\n| 主题 | 风格 | 品牌色 | 适用场景 |\n|------|------|--------|----------|\n| `clarity` | Apple 极简，黑白灰高对比 | 蓝色 `#0071e3` | 数据产品、监控面板 |\n| `aurora` | 紫青渐变，毛玻璃光晕 | 紫色 `#7c3aed` | 内容平台、创作工具 |\n\n每个主题都包含亮色和暗色两套配色。\n\n## 安装\n\n```bash\n# monorepo 内部项目\npnpm add 100city-theme --workspace\n\n# 外部独立项目\npnpm add 100city-theme\n```\n\n## 使用\n\n### 方式一：直接引入 CSS（推荐）\n\n```css\n/* 引入基础变量（字体、圆角、过渡） */\n@import \"@100city/theme/shared/base.css\";\n\n/* 引入主题配色（二选一） */\n@import \"@100city/theme/presets/clarity/theme.css\";\n@import \"@100city/theme/presets/aurora/theme.css\";\n```\n\n### 方式二：SCSS 项目\n\n```scss\n@import \"@100city/theme/shared/base.css\";\n@import \"@100city/theme/presets/aurora/theme.css\";\n```\n\n### 在组件中使用\n\n```tsx\n// 背景色\n<div style={{ backgroundColor: \"var(--bg-card)\" }}>\n\n// 文字色\n<h1 style={{ color: \"var(--text-heading)\" }}>标题</h1>\n<p style={{ color: \"var(--text-muted)\" }}>描述</p>\n\n// 品牌色\n<button style={{ backgroundColor: \"var(--brand-primary)\" }}>按钮</button>\n\n// 阴影\n<div style={{ boxShadow: \"var(--shadow-card)\" }}>卡片</div>\n```\n\n### 暗色模式\n\n给 `<html>` 或任意父元素加 `.dark` 或 `data-theme=\"dark\"` 即可切换：\n\n```html\n<html class=\"dark\">\n```\n\n## 变量命名规则\n\n```\n--{类别}-{用途}\n\n类别：bg / text / border / brand / icon / status / shadow / interactive\n用途：primary / secondary / muted / light / dark / hover / ...\n```\n\n## 开发\n\n```bash\n# 修改 tokens.json 后重新生成 CSS\ncd packages/theme\nnode build.js\n```\n\n## 新增主题\n\n1. 复制 `presets/clarity/` 为新目录\n2. 修改 `tokens.json` 中的颜色值\n3. 运行 `node build.js`\n4. 新主题的 `theme.css` 自动生成\n","readmeFilename":"README.md"}