@mtn-ui/theme

MTN 设计令牌（CSS 变量）、亮/暗模式、data-mtn-density 紧凑模式、可选色板预设；与 @mtn-ui/utils 运行时 API 配套。

层叠顺序（业务 > MTN > Ant）

CSS 规定：未写在 @layer 里的规则，在同特异性下优先于任意 @layer 内的规则。因此：

1. 声明层顺序：@layer antd, mtn;
2. Ant Design Vue 样式放入 layer(antd)（或包在 @layer antd { ... }）
3. 本包与 @mtn-ui/components 样式放入 layer(mtn)
4. 业务全局样式不要写 @layer，并在入口 最后 引入，即可覆盖 MTN 与 Ant

示例（应用 main 或根样式入口）：

@layer antd, mtn;

@import 'ant-design-vue/dist/reset.css' layer(antd);

/* 组件库入口内已含 @layer mtn { tailwind + theme } 时，只引组件即可 */
@import '@mtn-ui/components/style';

/* 业务样式：无 @layer，最后加载 */
@import './app.css';

导出

| 子路径 | 说明 | |--------|------| | @mtn-ui/theme | 聚合 CSS（令牌 + 暗色 + 密度 + 别名 + Ant 桥接 + 预设） | | @mtn-ui/theme/vars | SCSS 别名（var(--*)），真源仍为 CSS 变量 |

DOM 约定

| 属性 | 含义 | |------|------| | data-theme="dark" | 暗色令牌；亮色请 移除 该属性 | | data-mtn-density="compact" | 紧凑间距与控件高度；默认移除属性即舒适模式 | | data-mtn-preset="ocean" | 色板（与亮/暗、密度正交） |

由 setThemeMode、setDensityMode、setThemePreset（utils）维护。

CSS 变量一览（节选）

• 颜色：--color-primary、*-hover、*-active，--color-success / warning / danger / info
• 文本：--color-text-primary、--color-text-secondary …
• 背景：--color-bg-page、--color-bg-base、--color-bg-elevated
• 边框：--color-border-base、--color-border-light、--color-border-lighter
• 圆角：--radius-base（px 字符串，utils 同步为 Ant borderRadius 数字）
• 密度：--mtn-control-height、--mtn-font-size-base、--mtn-padding-*、--mtn-margin-*
• 别名：--mtn-text-primary、--mtn-bg …（见 layers/mtn-aliases.css）

构建

pnpm build:tokens

从 token/tokens.json 生成 layers/tokens-root.css、mode-dark.css、density.css（手写 mtn-aliases、ant-bridge、preset-ocean 不由此脚本覆盖）。

原则

• 尽量不用 !important；依赖变量与 @layer 控制优先级。
• Ant 组件主题以 ConfigProvider theme.token + algorithm 为主；本包仅做页面级令牌与轻量布局桥接。