# Modra 设计令牌

修改视觉请通过令牌，不要硬编码颜色或改组件内部类名。使用规则见接入指南第 5 节。

## 切换方式

- 暗色：给 `<html>` 加 `.dark`。
- 品牌：`<html data-brand="ocean|forest|ids">`（`ids` 仅浅色）。
- 密度：`data-density="compact"`。
- 运行时主题：`<ThemeProvider theme={{ color: { primary: "..." } }}>`。
- CSS 变量入口：`@import "@modra/tokens/css";`；Tailwind 语义类由 `@modra/tailwind-preset` 提供。

## 语义令牌（281 个；另有 670 个组件级 --component-* 变量，不逐一列出）

### --color-*（2）

`--color-white` `--color-black`

### --density-*（62）

`--density-scale-height-sm` `--density-scale-height-md` `--density-scale-height-lg` `--density-scale-height-compact-sm` `--density-scale-height-compact-md` `--density-scale-height-compact-lg` `--density-scale-px-sm` `--density-scale-px-md` `--density-scale-px-lg` `--density-scale-input-px` `--density-scale-gap` `--density-scale-gap-compact` `--density-scale-font-sm` `--density-scale-font-md` `--density-scale-line-sm` `--density-scale-line-md` `--density-scale-padding` `--density-scale-padding-compact` `--density-scale-table-cell` `--density-scale-table-cell-compact` `--density-scale-header` `--density-scale-header-compact` `--density-scale-menu-py` `--density-scale-menu-py-compact` `--density-scale-menu-px` `--density-scale-layout-sm` `--density-scale-layout-md` `--density-scale-layout-lg` `--density-scale-tabs-height` `--density-scale-tabs-height-compact` `--density-scale-tag-px` `--density-scale-tag-py` `--density-scale-zero` `--density-scale-tag-gap` `--density-scale-tag-gap-compact` `--density-scale-tag-px-compact` `--density-scale-tag-py-compact` `--density-height-sm` `--density-height-md` `--density-height-lg` `--density-px-sm` `--density-px-md` `--density-px-lg` `--density-input-px` `--density-gap` `--density-font-sm` `--density-font-md` `--density-line-sm` `--density-line-md` `--density-padding` `--density-table-cell` `--density-header` `--density-menu-py` `--density-menu-px` `--density-layout-sm` `--density-layout-md` `--density-layout-lg` `--density-tabs-height` `--density-tag-px` `--density-tag-py` `--density-zero` `--density-tag-gap`

### --space-*（11）

`--space-0` `--space-1` `--space-2` `--space-3` `--space-4` `--space-5` `--space-6` `--space-8` `--space-0-5` `--space-1-5` `--space-2-5`

### --radius-*（7）

`--radius-none` `--radius-sm` `--radius-md` `--radius-lg` `--radius-xl` `--radius-2xl` `--radius-full`

### --interaction-*（5）

`--interaction-focus-ring-width` `--interaction-focus-ring-offset` `--interaction-overlay-color` `--interaction-overlay-blur` `--interaction-overlay-blur-sm`

### --duration-*（4）

`--duration-fast` `--duration-normal` `--duration-slow` `--duration-slower`

### --easing-*（5）

`--easing-standard` `--easing-in` `--easing-out` `--easing-in-out` `--easing-spring`

### --z-*（11）

`--z-index-base` `--z-index-raised` `--z-index-table-sticky` `--z-index-menu` `--z-index-dropdown` `--z-index-sticky` `--z-index-overlay` `--z-index-modal` `--z-index-popover` `--z-index-tooltip` `--z-index-toast`

### --shadow-*（7）

`--shadow-xs` `--shadow-sm` `--shadow-md` `--shadow-lg` `--shadow-xl` `--shadow-2xl` `--shadow-inset`

### --stroke-*（4）

`--stroke-width-none` `--stroke-width-thin` `--stroke-width-medium` `--stroke-width-thick`

### --font-*（27）

`--font-family-sans` `--font-family-mono` `--font-size-xs` `--font-size-sm` `--font-size-base` `--font-size-lg` `--font-size-xl` `--font-size-2xl` `--font-size-3xl` `--font-size-4xl` `--font-size-5xl` `--font-size-6xl` `--font-size-7xl` `--font-line-height-flat` `--font-line-height-tight` `--font-line-height-snug` `--font-line-height-normal` `--font-line-height-relaxed` `--font-tracking-tightest` `--font-tracking-tighter` `--font-tracking-tight` `--font-tracking-normal` `--font-tracking-wide` `--font-weight-normal` `--font-weight-medium` `--font-weight-semibold` `--font-weight-bold`

### --motion-*（7）

`--motion-duration-instant` `--motion-duration-fast` `--motion-duration-normal` `--motion-duration-slow` `--motion-easing-standard` `--motion-easing-emphasized` `--motion-easing-decelerate`

### --background-*（1）

`--background`

### --foreground-*（1）

`--foreground`

### --surface-*（2）

`--surface` `--surface-subtle`

### --card-*（2）

`--card` `--card-foreground`

### --popover-*（2）

`--popover` `--popover-foreground`

### --muted-*（2）

`--muted` `--muted-foreground`

### --primary-*（3）

`--primary` `--primary-foreground` `--primary-emphasis`

### --secondary-*（2）

`--secondary` `--secondary-foreground`

### --accent-*（2）

`--accent` `--accent-foreground`

### --destructive-*（5）

`--destructive` `--destructive-foreground` `--destructive-subtle` `--destructive-subtle-foreground` `--destructive-emphasis`

### --success-*（5）

`--success` `--success-foreground` `--success-subtle` `--success-subtle-foreground` `--success-emphasis`

### --warning-*（5）

`--warning` `--warning-foreground` `--warning-subtle` `--warning-subtle-foreground` `--warning-emphasis`

### --info-*（5）

`--info` `--info-foreground` `--info-subtle` `--info-subtle-foreground` `--info-emphasis`

### --border-*（2）

`--border` `--border-width`

### --input-*（1）

`--input`

### --ring-*（1）

`--ring`

### --sidebar-*（7）

`--sidebar` `--sidebar-foreground` `--sidebar-muted-foreground` `--sidebar-accent` `--sidebar-accent-foreground` `--sidebar-border` `--sidebar-ring`

### --spacing-*（13）

`--spacing-inline-xs` `--spacing-inline-sm` `--spacing-inline-md` `--spacing-inline-lg` `--spacing-stack-xs` `--spacing-stack-sm` `--spacing-stack-md` `--spacing-stack-lg` `--spacing-section` `--spacing-fixed-2` `--spacing-fixed-4` `--spacing-fixed-6` `--spacing-fixed-8`

### --control-*（13）

`--control-height-sm` `--control-height-md` `--control-height-lg` `--control-icon-sm` `--control-icon-md` `--control-icon-lg` `--control-radius` `--control-radius-sm` `--control-radius-lg` `--control-radius-full` `--control-max-width` `--control-menu-min-width` `--control-dialog-max-width`

### --text-*（33）

`--text-weight-strong` `--text-body-font-size` `--text-body-line-height` `--text-body-font-weight` `--text-body-letter-spacing` `--text-body-sm-font-size` `--text-body-sm-line-height` `--text-body-sm-font-weight` `--text-body-sm-letter-spacing` `--text-heading-1-font-size` `--text-heading-1-line-height` `--text-heading-1-font-weight` `--text-heading-1-letter-spacing` `--text-heading-2-font-size` `--text-heading-2-line-height` `--text-heading-2-font-weight` `--text-heading-2-letter-spacing` `--text-heading-3-font-size` `--text-heading-3-line-height` `--text-heading-3-font-weight` `--text-heading-3-letter-spacing` `--text-heading-4-font-size` `--text-heading-4-line-height` `--text-heading-4-font-weight` `--text-heading-4-letter-spacing` `--text-caption-font-size` `--text-caption-line-height` `--text-caption-font-weight` `--text-caption-letter-spacing` `--text-code-font-size` `--text-code-line-height` `--text-code-font-weight` `--text-code-letter-spacing`

### --elevation-*（6）

`--elevation-card` `--elevation-raised` `--elevation-overlay` `--elevation-popover` `--elevation-modal` `--elevation-inset`

### --layer-*（11）

`--layer-base` `--layer-raised` `--layer-table-sticky` `--layer-menu` `--layer-sticky` `--layer-dropdown` `--layer-overlay` `--layer-modal` `--layer-popover` `--layer-tooltip` `--layer-toast`

### --focus-*（2）

`--focus-ring-width` `--focus-ring-offset`

### --overlay-*（3）

`--overlay-color` `--overlay-blur` `--overlay-blur-emphasis`

可视化预览：https://modra.feinian.net/tokens