{"_id":"@arcticworks/design","name":"@arcticworks/design","dist-tags":{"latest":"0.1.0"},"versions":{"0.1.0":{"name":"@arcticworks/design","version":"0.1.0","description":"ArcticWorks 设计令牌：W3C Design Tokens（JSON）与生成的 CSS 自定义属性（--aw-*）。 / ArcticWorks design tokens — W3C Design Tokens (JSON) plus generated CSS custom properties (--aw-*).","license":"MIT","type":"module","keywords":["design-tokens","tokens","css-variables","design-system"],"exports":{"./themes/dark.css":"./themes/dark/index.css","./themes/*":"./themes/*","./tokens/*.json":"./tokens/*.json","./package.json":"./package.json"},"scripts":{"build":"node scripts/build.mjs"},"sideEffects":["**/*.css"],"publishConfig":{"access":"public"},"_id":"@arcticworks/design@0.1.0","_nodeVersion":"26.6.0","_npmVersion":"12.0.2","dist":{"integrity":"sha512-z642NcfULp9QHp7FcVgsmGnNtS/OlhhXAXtqtxYXFSWJ5YczIsxqv7T6o5n/E/B4OGiZAHDbi78ejKwyWNeKGw==","shasum":"88f6cb9db7336de3c30daeefa6dd15a81a8365ca","tarball":"https://registry.npmjs.org/@arcticworks/design/-/design-0.1.0.tgz","fileCount":27,"unpackedSize":50869,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQDcNNCkN7AgCdMOOzt3W0A7qOIZCY4Aa/l7v2FY0X44vgIhAJ8nuwn/ZRlWehV5BYgs0aZwPsBj2cMGlij+Rc02sn2t"}]},"_npmUser":{"name":"bluefieldcreator","email":"tatsuya.hayami@proton.me"},"directories":{},"maintainers":[{"name":"bluefieldcreator","email":"tatsuya.hayami@proton.me"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design_0.1.0_1785927908463_0.6048749427974212"},"_hasShrinkwrap":false}},"time":{"created":"2026-08-05T11:05:08.154Z","0.1.0":"2026-08-05T11:05:08.628Z","modified":"2026-08-05T11:05:09.209Z"},"maintainers":[{"name":"bluefieldcreator","email":"tatsuya.hayami@proton.me"}],"description":"ArcticWorks 设计令牌：W3C Design Tokens（JSON）与生成的 CSS 自定义属性（--aw-*）。 / ArcticWorks design tokens — W3C Design Tokens (JSON) plus generated CSS custom properties (--aw-*).","keywords":["design-tokens","tokens","css-variables","design-system"],"license":"MIT","readme":"# ArcticWorks Design\n\n适用于所有 ArcticWorks 应用的设计系统。一种设计语言，四个产品，四十余个组件——同样的令牌、组件与规则，处处一致。\n\n[English](README.md) · [简体中文](README.zh-CN.md)\n\n## 仓库结构\n\n```\narcticworks-design/\n├── tokens/               # 唯一事实来源（W3C Design Tokens 格式）\n├── themes/\n│   └── dark/\n│       └── index.css     # 生成产物 — 请勿手动编辑\n├── scripts/\n│   └── build.mjs         # 零依赖构建（node 或 bun）\n├── preview.html          # 组件参考 — 每个组件都由令牌驱动\n├── preview.css           #   参考样式（仅用令牌，无裸值）\n├── ui/                   # SvelteKit 组件库（@arcticworks/svelte）\n│   ├── src/lib/          #   包本体：组件、图标、toast store\n│   ├── src/routes/       #   交互式 demo 应用\n│   ├── AGENTS.md         #   组件约定契约\n│   └── dist/             #   构建产物（bun run package）\n└── README.md\n```\n\n## 发布包（Packages）\n\n以下两个包已发布到 npm，均为 MIT 许可：\n\n- `@arcticworks/design` — 设计令牌：`tokens/` 中的 W3C Design Tokens（JSON），以及 `themes/` 中生成的 CSS 自定义属性。\n- `@arcticworks/svelte` — `ui/` 中的 Svelte 5 组件库。\n\n规划中：`icons/`（SVG 源）、`docs/`。\n\n## Svelte 组件库 — `ui/`\n\nSvelte 5（runes）+ TypeScript + SvelteKit。每个组件只消费 `--aw-*` 令牌，组件的 API 与样式均遵循 `ui/AGENTS.md`。\n\n```sh\ncd ui\nbun install          # 首次安装\nbun run dev          # 交互式 demo，http://localhost:5173\nbun run check        # svelte-check\nbun run build        # 静态 demo 构建 → ui/build\nbun run package      # 库构建 → ui/dist（svelte-package）\n```\n\n### 在应用中使用\n\n```ts\nimport '@arcticworks/design/themes/dark.css';\nimport { Button, Table, Dialog, toast, Toaster } from '@arcticworks/svelte';\n```\n\n在容器上设置 `data-density=\"dense\"`（或 `comfortable`）即可应用密度档位——行高、控件与内边距会通过 `var()` 链自动重排。\n\n### 组件列表\n\nActions（操作）：`Button`、`IconButton`、`Segmented` · Forms（表单）：`Input`、`Textarea`、`Search`、`Checkbox`、`Radio`、`Switch`、`Select`、`Kbd` · Feedback（反馈）：`Badge`、`Spinner`、`Progress`、`Skeleton` · Structure（结构）：`Card`、`List`、`ListItem`、`Breadcrumbs`、`Pagination`、`NavItem`、`NavSection`、`Sidebar`、`Tabs`、`Tree` · Data（数据）：`Table`、`PropertyGrid`、`SplitPane`、`LineChart`、`BarChart` · Overlays（浮层）：`Dialog`、`Tooltip`、`Menu`、`MenuItem`、`MenuSeparator`、`Toaster` + `toast`、`CommandPalette`、`Calendar` · Composite（复合）：`FilePicker` · Icons（图标）：`Icon` + `icons` 映射表。\n\n## 三层令牌结构\n\n组件绝不直接读取裸值。每个组件令牌都是一条穿过语义层的 `var()` 链：\n\n```\npalette.neutral.950  →  surface.1  →  surface.sidebar  →  nav.item-*\n```\n\n1. **Palette（调色板）** — 原始色阶（`palette.neutral.950`）。组件从不引用。\n2. **Semantic（语义）** — 角色：`surface.*`、`interactive.*`、`text.*`、`border.*`、`status.*`。组件与主题实际覆盖的就是这一层。\n3. **Component（组件）** — `button.*`、`input.*`、`table.*`、`nav.*`、`tabs.*`、`card.*` — 每个状态都有令牌。\n\n由于引用会编译成活链接的 `var()` 链（例如 `--aw-button-height: var(--aw-control-height)`），密度档位和未来的主题无需改动任何组件即可级联到整个系统。\n\n## 令牌分组\n\n| 分组 | 前缀 | 示例 |\n|---|---|---|\n| `palette` | `--aw-palette-` | `--aw-palette-blue-500` |\n| `surface` `interactive` `text` `border` `status` `chart` `scrim` | `--aw-color-*` | `--aw-color-interactive-primary` |\n| `typography` `lineheight` | `--aw-font-*` `--aw-line-height-*` | `--aw-font-size-sm` |\n| `space` | `--aw-space-*` | `--aw-space-4` |\n| `radius` | `--aw-radius-*` | `--aw-radius-md` |\n| `shadow` | `--aw-shadow-*` | `--aw-shadow-2` |\n| `motion` | `--aw-motion-*` | `--aw-motion-fast` |\n| `control` | `--aw-control-*` | `--aw-control-height` |\n| `icon` | `--aw-icon-*` | `--aw-icon-stroke` |\n| `layout` | `--aw-layout-*` | `--aw-layout-sidebar-width` |\n| `button` `input` `card` `table` `nav` `tabs` | `--aw-<component>-*` | `--aw-table-row-selected-background` |\n| `zindex` | `--aw-z-*` | `--aw-z-dialog` |\n| `breakpoint` | `--aw-breakpoint-*` | `--aw-breakpoint-xl` |\n| `opacity` `focus` | `--aw-*` | `--aw-opacity-disabled` |\n\n## 密度（Density）\n\n三档：`dense`（PLC 工程、DataExplorer、SecureNet）、`compact`（默认）、`comfortable`（Continuity、仪表盘）。\n\n```html\n<html data-density=\"dense\">\n```\n\n密度覆盖四个根变量——`control.height`、`control.padding-x`、`card.padding`、`layout.page-gutter`——其余一切（按钮、输入框、表格行、导航项）都通过 `var()` 链跟随变化。如果应用需要混合密度，可通过 `data-density` 按容器单独设置。\n\n## 动效（Motion）\n\n- `fast` 120ms — hover、focus、微交互\n- `normal` 180ms — 面板、toast\n- `slow` 250ms — 对话框、大型浮层（上限，不再更慢）\n- `easing-standard` / `easing-emphasized`\n\n`prefers-reduced-motion` 会在生成的 CSS 中把所有时长收敛为 0ms。\n\n## 图标（Icons）\n\n24px viewBox 网格，仅描边，`stroke: 1.75px`，圆角连接与端点（`corner-radius: 2px`）。尺寸：工具栏 16、默认 18、导航 20。默认无实心图标；不做逐图标描边变化。\n\n## 表格（Tables）\n\n企业软件活在表格里。每个状态都有令牌：\n\n`table.header.*`、`table.row.*`（高度、分隔线、hover、选中、展开、斑马纹、focus）、`table.cell.*`（正文、次要文本、表格数字）、`table.sort.*`、`table.resize.*`、`table.pinned.*`。\n\n## 无障碍（Accessibility）\n\n- 文本对比度 ≥ 4.5:1，UI 组件 ≥ 3:1 — 所有随包发布的令牌组合均已验证。\n- 焦点环：每个可交互元素上都有 `--aw-focus-ring`（2px outline + 2px offset）。\n- 点击目标：所有密度下控件 ≥ 28px（WCAG 2.5.8）。\n- `color-scheme: dark`，原生控件以深色渲染。\n- 减弱动效在生成的 CSS 中处理。\n\n## 构建\n\n```sh\nnode scripts/build.mjs        # 或：bun scripts/build.mjs\n```\n\n新主题是覆盖层文件：`themes/light/tokens.json` 重新映射语义分组（如 `text.primary: #111111`），`node scripts/build.mjs light` 生成 `themes/light/index.css`。调色板与所有组件令牌保持不动。\n\n## 扩展\n\n1. 在正确的分组文件中添加令牌，通过 `{group.name}` 引用语义令牌。\n2. 重新生成。未知的顶层分组会映射到自己的 CSS 前缀。\n3. 绝不要在组件文件中引入新的颜色、圆角、阴影、时长或高度。如果还不存在，那就是还不存在。\n\n## 路线图\n\n- `ui/` — 已完成：SvelteKit 组件库（`@arcticworks/svelte`），唯一构建组件的地方。\n- `icons/` — 与图标规范匹配的 SVG 源集（运行时映射表在 `ui/src/lib/icons.ts`）。\n- `themes/light` — 相同结构，仅语义覆盖（`node scripts/build.mjs light` + 一个 `themes/light/tokens.json` 覆盖文件）。\n- `docs/` — 各组件用法指南。\n","readmeFilename":"README.zh-CN.md","_rev":"1-a17e236a684b3f5d54473c92aa4421e3"}