@manohub/theme 1.0.3 → 1.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -5
- package/dist/default/colors.css +19 -42
- package/dist/default/index.css +9 -32
- package/dist/default/radius.css +7 -10
- package/dist/default/shadows.css +4 -9
- package/dist/default/spacing.css +14 -26
- package/dist/default/typography.css +9 -17
- package/dist/farris/colors.css +6 -14
- package/dist/farris/index.css +6 -12
- package/dist/farris/radius.css +5 -12
- package/dist/farris/shadows.css +4 -7
- package/dist/farris/spacing.css +3 -6
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -5,20 +5,21 @@ AIHub 前端体系里的**主题包**:纯 CSS 令牌层,只有「值」,
|
|
|
5
5
|
```
|
|
6
6
|
@manohub/theme 值(本包:全局令牌)
|
|
7
7
|
@manohub/ui 值 + 面(组件类 + 组件自己的令牌 + 命令式服务)
|
|
8
|
-
@manohub/kit 入口编排(容器锚 +
|
|
8
|
+
@manohub/kit 入口编排(容器锚 + 装配;只出 index.css)
|
|
9
9
|
```
|
|
10
10
|
|
|
11
11
|
## 接入
|
|
12
12
|
|
|
13
13
|
```css
|
|
14
|
-
/*
|
|
14
|
+
/* 应用的样式链(顺序即契约:先值、后面、库级基座收尾) */
|
|
15
15
|
@import "@manohub/theme/default.css"; /* ① 值(本包)—— 换主题只换这一行 */
|
|
16
|
-
@import "@manohub/ui/styles.css"; /* ②
|
|
16
|
+
@import "@manohub/ui/styles.css"; /* ② 面(元素级基线 + 组件类 + 组件令牌基础值) */
|
|
17
|
+
@import "@manohub/kit/index.css"; /* ③ 库级基座(兜底 / 容器布局 / 滚动条 / 富文本) */
|
|
17
18
|
@import "./app.css";
|
|
18
19
|
```
|
|
19
20
|
|
|
20
|
-
**没有哪个包会替你引本包**:`@manohub/kit`
|
|
21
|
-
|
|
21
|
+
**没有哪个包会替你引本包**:`@manohub/kit` 是纯入口编排层,只多出一条**库级基座**样式
|
|
22
|
+
(`@manohub/kit/index.css`,四节;2026-10-09 由 `reset.css` 正名并扩节),样式链那几行必须由应用自己写。
|
|
22
23
|
静态页 / 不用组件库的场景只需第一行(没有面可引)。
|
|
23
24
|
|
|
24
25
|
## 锚:`[data-manohub-ui]`
|
package/dist/default/colors.css
CHANGED
|
@@ -1,39 +1,15 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* 色彩令牌(品牌槽位 + 中性阶 +
|
|
2
|
+
* 色彩令牌(品牌槽位 + 中性阶 + 语义状态四组)。取值以设计稿《MH后台-0911》的四个品牌页
|
|
3
|
+
* (`00.1` / `01.1` / `01.2` / `02.1`)为唯一事实源。锚 `[data-manohub-ui]`,不写 `:root`(见 index.css)。
|
|
3
4
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* `
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
* ## 三条口径(改值前先读,别绕过)
|
|
13
|
-
*
|
|
14
|
-
* 1. **中性阶是五个「槽位」,不是一条刻度**:`base-50`(比内容底更轻一档的底)/
|
|
15
|
-
* `base-100`(内容底)/ `base-200`(中性面:表头底 / hover 底 / 禁用底 / 斑马行)/
|
|
16
|
-
* `base-300`(**实线**线框)/ `base-400`(**虚线**线框 + 勾选类小控件框体)。
|
|
17
|
-
* **数字只是槽位标号**(借 daisyUI 的命名壳),**不承诺等差 / 等比** —— 取值是设计稿的
|
|
18
|
-
* **实测采样 + 近似合并**,不是从数列推出来的:别按数字补 `base-500`,也别把数字当
|
|
19
|
-
* 「浅一档 / 深一档」的通用梯度使(要更轻的底就 `base-50`、要「面」就 `base-200`,语义各归各)。
|
|
20
|
-
* 实测事实:设计稿内容区**从未出现 `#F5F7FA`**;中性面只有 `#F2F2F2`(中性 hover / 禁用底)
|
|
21
|
-
* 与 `#F1F2F5`(表头底),二者差 3/255,故合并为 `base-200` —— **合并取的是后者**,
|
|
22
|
-
* 所以本套的 `base-200` 带一点冷调,而 `base-300` / `base-400` 是纯灰:这是实测取舍,不是刻度走样。
|
|
23
|
-
* 量级参考(按 L* 估算的相邻差):`100→200` −4.5 / `200→300` −4.2 / `300→400` −3.5,
|
|
24
|
-
* 大致是每档 4 上下的**感知步长**;而 `base-50` 只比 `base-100` 低 **1.7**,
|
|
25
|
-
* 它**不是刻度上的一格**,是「比内容底更轻一档的底」这一语义槽位 —— 但它的可见度本来就不够,
|
|
26
|
-
* 故**库内已无消费**(`Tag` 悬停底与 `Badge --soft` 默认底 2026-09-30 起改取 `base-200`),
|
|
27
|
-
* 留着是给应用侧的浅底;**别拿它当「浅灰面」的通用档**。
|
|
28
|
-
* 2. **线色按线型分两档**:**实线**一律取 `base-300`(输入框、按钮、表格、分页项、卡片、面板、
|
|
29
|
-
* 分隔线);**虚线**一律取 `--ui-line-dashed`(值 = `base-400`,比实线深一档)—— 同样粗细下
|
|
30
|
-
* 虚线的墨迹只有实线的一半,取同色会明显偏浅、整条框看着发虚。
|
|
31
|
-
* `base-400` 另外服务 **14×14 这类小尺寸勾选框体**(设计稿让复选框比容器线深一档,
|
|
32
|
-
* 否则小方块在浅底上看不见)。
|
|
33
|
-
* 3. **语义浅底与描边由基色按固定比例派生**(写在行尾):`-weak` = 基色 10% 入白、
|
|
34
|
-
* `-border` = 基色 30% 入白、`-strong` = 基色 85% 入黑。改基色时**必须同步重算这三档**
|
|
35
|
-
* (此处不写 `color-mix` 派生:自定义属性在**声明元素**上求值,派生写法会让
|
|
36
|
-
* 「在更深容器重设 `--ui-success`」的局部换肤失效)。
|
|
5
|
+
* 三条口径(改值前先读):
|
|
6
|
+
* 1. 中性阶是五个**槽位、不是一条刻度**:数字只是标号,不承诺等差 / 等比 —— 取值是设计稿的
|
|
7
|
+
* 实测采样 + 近似合并。别按数字补 `base-500`,也别把它当「浅一档 / 深一档」的通用梯度用。
|
|
8
|
+
* 2. 线色按线型分两档:实线一律 `base-300`;虚线一律 `--ui-line-dashed`(同粗细下虚线的墨迹只有
|
|
9
|
+
* 实线一半,取同色会明显偏浅);`base-400` 另服务 14×14 这类小尺寸勾选框体。
|
|
10
|
+
* 3. 语义族的 `-weak` / `-border` / `-strong` 由基色按固定比例派生(10% / 30% 入白、85% 入黑),
|
|
11
|
+
* 改基色必须同步重算;不写 `color-mix` —— 自定义属性在**声明元素**上求值,派生写法会让
|
|
12
|
+
* 「在更深容器重设 `--ui-success`」的局部换肤失效。
|
|
37
13
|
*/
|
|
38
14
|
[data-manohub-ui] {
|
|
39
15
|
/* ===== 品牌槽位:全仓唯一一处定义 ===== */
|
|
@@ -50,8 +26,11 @@
|
|
|
50
26
|
补这一枚是为了让主色族与四个语义族槽位等形(base / content / weak / border)。 */
|
|
51
27
|
--ui-primary-border: #B7CAFF;
|
|
52
28
|
|
|
53
|
-
/* ===== 中性阶(五个槽位 + 三级字;禁止再自由取值 —— 数字是槽位标号,不是色阶) =====
|
|
54
|
-
|
|
29
|
+
/* ===== 中性阶(五个槽位 + 三级字;禁止再自由取值 —— 数字是槽位标号,不是色阶) =====
|
|
30
|
+
实测:内容区**从未出现 `#F5F7FA`**;中性面只有 `#F2F2F2`(hover / 禁用底)与 `#F1F2F5`(表头底),
|
|
31
|
+
二者差 3/255 故合并取后者 ⇒ 本档带一点冷调,而 `base-300` / `base-400` 是纯灰(实测取舍,非刻度走样)。
|
|
32
|
+
相邻感知步长(按 L* 估算):100→200 −4.5 / 200→300 −4.2 / 300→400 −3.5。 */
|
|
33
|
+
--ui-base-50: #FAFAFA; /* 比内容底更轻一档的底(只低 1.7,不是刻度上的一格);库内已无消费,留给应用侧浅底 */
|
|
55
34
|
--ui-base-100: #FFFFFF;
|
|
56
35
|
--ui-base-200: #F1F2F5; /* 中性面:表头底 / hover 底 / 禁用底 / 斑马行 */
|
|
57
36
|
--ui-base-300: #E6E6E6; /* **实线**线框一律取它(全库唯一的实线线色) */
|
|
@@ -63,15 +42,13 @@
|
|
|
63
42
|
--ui-base-content-subtle: #999999;
|
|
64
43
|
|
|
65
44
|
/* ===== 线型档 =====
|
|
66
|
-
跨件共用的**虚线**线色:`Tag`
|
|
67
|
-
`
|
|
68
|
-
故它是一枚全局令牌,而不是五处各写一遍 `var(--ui-base-400)` —— 虚线要换深浅时
|
|
69
|
-
只改这两套主题文件,五处一起动(口径见本文件头第 2 条)。 */
|
|
45
|
+
跨件共用的**虚线**线色:`Tag` 新增入口 / `Button--dashed` / `Upload` 拖拽区 / `Avatar` 占位框 /
|
|
46
|
+
`Divider` 五处取同一枚 —— 换深浅只改这一处(口径见文件头第 2 条)。 */
|
|
70
47
|
--ui-line-dashed: var(--ui-base-400);
|
|
71
48
|
|
|
72
49
|
/* ===== 语义状态(四组同词根:info / success / warning / error) =====
|
|
73
|
-
基色有设计实证;浅底 / 描边 /
|
|
74
|
-
/* 信息:设计稿未覆盖本槽位 →
|
|
50
|
+
基色有设计实证;浅底 / 描边 / 深字按文件头第 3 条的固定比例派生。 */
|
|
51
|
+
/* 信息:设计稿未覆盖本槽位 → 沿用原值 */
|
|
75
52
|
--ui-info: #3B82F6; --ui-info-content: #FFFFFF;
|
|
76
53
|
/* 成功:设计实证 = 品牌页「已授权 2 个组织」13px 绿字 + 状态圆点(`#61cc77`) */
|
|
77
54
|
--ui-success: #61CC77; --ui-success-content: #FFFFFF;
|
package/dist/default/index.css
CHANGED
|
@@ -1,36 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* 默认主题(对外公开为 `@manohub/theme/default.css
|
|
3
|
-
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
* ## 锚:`[data-manohub-ui]`(跨包唯一作用域锚)
|
|
13
|
-
*
|
|
14
|
-
* 锚是一个**库品牌属性**,不是任何一个包的私有类名 —— `@manohub` 是这个库三个包共同的 scope,
|
|
15
|
-
* 谁都锚得起。它由入口层 `createSubApp` **无条件**写在应用容器上(见 `@manohub/kit`),
|
|
16
|
-
* 因此**有属性即生效**,不需要宿主额外配置。
|
|
17
|
-
*
|
|
18
|
-
* 本主题是**唯一不带属性选择器的兜底套**,永远先生效;
|
|
19
|
-
* 换皮 = 在同一个锚上加 `data-theme`(见 `farris/index.css`)。
|
|
20
|
-
* 局部换肤 = 在更深的元素上重设变量(如 `.role-tree-pane { --ui-primary: #7C3AED; }`)。
|
|
21
|
-
*
|
|
22
|
-
* 也是本包的默认身份色(primary 取 AIHub 品牌蓝 #2660FF,非 Farris 规范蓝 #2a87ff)。
|
|
23
|
-
*
|
|
24
|
-
* 新增主题 = 本包新目录 `src/<name>/` + 同结构分片,令牌一律锚 `[data-manohub-ui][data-theme='<name>']`,
|
|
25
|
-
* 并在 `package.json` 的 exports 加一行 `./<name>.css`。换皮靠锚上的属性切换,不动类名、
|
|
26
|
-
* 不动组件代码、不重打包。
|
|
27
|
-
*
|
|
28
|
-
* ⚠️ 不写 `:root`:micro-app 的 scopecss 不作用域化 `:root`,定义在 `:root` 的变量会泄漏到宿主
|
|
29
|
-
* 全局(多子应用互染、卸载残留)。
|
|
30
|
-
* ⚠️ icons / motion 两片**有意未建**(非遗漏):图标走 `@manohub/icon`(无 CSS 槽位),动效时长
|
|
31
|
-
* 内联在各组件规则里 —— 无消费者前不预置令牌(与「无出处令牌一律撤除」同一口径)。
|
|
32
|
-
*
|
|
33
|
-
* 分片与 `@aihub/theme` 的 base 对齐到 colors / typography / spacing / radius / shadows 五片。
|
|
2
|
+
* 默认主题(对外公开为 `@manohub/theme/default.css`):全仓唯一的全局令牌定义处(跨件共用的值)。
|
|
3
|
+
* 只服务单一组件的几何令牌不在这里,随组件落在 `@manohub/ui` 的 `styles/components/<件>.tokens.css`。
|
|
4
|
+
*
|
|
5
|
+
* - 锚 `[data-manohub-ui]`(`createSubApp` 无条件写在应用容器上)⇒ 有属性即生效。
|
|
6
|
+
* ⚠️ **不写 `:root`**:micro-app 的 scopecss 不作用域化它,写进去会泄漏到宿主全局。
|
|
7
|
+
* - 本套是**唯一不带属性选择器**的兜底套;换皮 = 同锚上加 `data-theme`(见 `farris/index.css`),
|
|
8
|
+
* 不动类名、不动组件代码、不重打包。局部换肤 = 在更深容器上重设变量。
|
|
9
|
+
* - ⚠️ icons / motion 两片**有意未建**(非遗漏):图标走 `@manohub/icon`,动效时长内联在组件规则里。
|
|
10
|
+
* - 新增主题 = 新目录 + 同结构五片(colors / typography / spacing / radius / shadows)+ exports 加一行。
|
|
34
11
|
*/
|
|
35
12
|
@import './colors.css';
|
|
36
13
|
@import './typography.css';
|
package/dist/default/radius.css
CHANGED
|
@@ -1,19 +1,16 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* 圆角令牌(四档,按**元素体量**分;设计稿《MH后台-0911》品牌页实测):
|
|
3
3
|
*
|
|
4
4
|
* | 档 | 值 | 用途 | 设计实证 |
|
|
5
5
|
* |---|---|---|---|
|
|
6
|
-
* | `xs` | 3px | 勾选框体、20 高标签 |
|
|
7
|
-
* | `sm` | 4px | 页头图标块、下拉选项行 | `0:3905`(26×26
|
|
8
|
-
* | `control` | 6px | 按钮 / 输入框 / 分页项 / 树行 |
|
|
6
|
+
* | `xs` | 3px | 勾选框体、20 高标签 | 控件画布 `0:4101`(14×14 复选框 r3)、`0:2723`(表格内标签 r3) |
|
|
7
|
+
* | `sm` | 4px | 页头图标块、下拉选项行 | `0:3905`(26×26 图标块 r4)、`0:4024`(选项行 r4) |
|
|
8
|
+
* | `control` | 6px | 按钮 / 输入框 / 分页项 / 树行 | 控件签名(`h32 r6` / `h28 r6`) |
|
|
9
9
|
* | `md` | 8px | 卡片 / 面板 / 下拉面板 / 表格外框 / 弹窗 | `0:1556`(卡片 r8)、`0:4025`(下拉面板 r8) |
|
|
10
10
|
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
*
|
|
14
|
-
*
|
|
15
|
-
* `xs` 与 `control` 拉开 3px 而不是 2px:`xs` 服务的是 14px 量级的小方块,
|
|
16
|
-
* 圆角一大就失去「方块」的识别度。
|
|
11
|
+
* 两处**登记偏差**(有意):表格外框设计 7px → 按「表格是容器」归 `md`;树行设计 8px → 按
|
|
12
|
+
* 「树行是控件级行元素」归 `control`。`xs` 与 `control` 拉开 3px:`xs` 服务 14px 量级的小方块,
|
|
13
|
+
* 圆角一大就失去「方块」识别度。
|
|
17
14
|
*/
|
|
18
15
|
[data-manohub-ui] {
|
|
19
16
|
--ui-radius-xs: 3px;
|
package/dist/default/shadows.css
CHANGED
|
@@ -1,21 +1,16 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* 阴影与遮罩令牌(卡片环境光 + 两类浮层关键光 +
|
|
3
|
-
*
|
|
4
|
-
* 分层与 `@aihub/theme` 的 `base/shadows.css` 对齐;**拟物重投影一律收敛到这里**,
|
|
2
|
+
* 阴影与遮罩令牌(卡片环境光 + 两类浮层关键光 + 蒙层)。**拟物重投影一律收敛到这里**,
|
|
5
3
|
* 组件里不再出现新的投影字面量。
|
|
6
4
|
*
|
|
7
|
-
*
|
|
5
|
+
* 两枚浮层阴影按**浮层的锚定方式**分工(不是按体量,别合并):
|
|
8
6
|
*
|
|
9
7
|
* | 令牌 | 角色 | 消费者 |
|
|
10
8
|
* |---|---|---|
|
|
11
9
|
* | `--ui-shadow-popover` | **锚定浮层**:挂在触发器旁,随定位档翻转 | Select 面板 / Button 菜单 / Input 菜单 / Pagination 条数选择器 / Input 气泡 |
|
|
12
10
|
* | `--ui-shadow-elevated` | **居中浮层**:居中或贴边、自带遮罩 | Dialog / Toast / Notification |
|
|
13
11
|
*
|
|
14
|
-
*
|
|
15
|
-
*
|
|
16
|
-
* `elevated` 取 `--mh-shadow-xl:18dp 对话框 / 抽屉` —— 两边语义完全对齐。
|
|
17
|
-
* 改前四处锚定浮层(Select / Button 菜单 / Input 菜单 / 页码条数选择器)都误用了 `elevated`,
|
|
18
|
-
* 等于把「对话框级」的投影打在「下拉」上。
|
|
12
|
+
* ⚠️ 锚定浮层误用 `elevated` = 把「对话框级」的投影打在下拉上(Select / 两个菜单 / 页码条数选择器
|
|
13
|
+
* 都踩过);设计稿的实证值是下拉面板 `0 4px 20px rgba(0,14,51,.10)`(`0:4025`),归 `popover`。
|
|
19
14
|
*/
|
|
20
15
|
[data-manohub-ui] {
|
|
21
16
|
/* 卡片环境光 */
|
package/dist/default/spacing.css
CHANGED
|
@@ -1,22 +1,14 @@
|
|
|
1
1
|
/**
|
|
2
|
-
*
|
|
2
|
+
* 布局间距与控件尺寸令牌。这里是**跨件共用**的几何(自绘件与骨架件都用);只服务单一组件的几何
|
|
3
|
+
* 不写在这里,随组件落在其同名 CSS 顶部(如 tree.css 的行高与缩进)。
|
|
3
4
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
* 也被骨架件(Page / Panel)共用。
|
|
7
|
-
* 只服务单一组件的几何**不写在这里**,随组件落在其同名 CSS 顶部(如 tree.css 的行高与缩进)。
|
|
5
|
+
* 间距档 `1/2/3/4/5/6` = `4/8/12/16/20/24`。`--ui-space-5`(20)是**页面级内距**:页头左右、
|
|
6
|
+
* 页面内容、卡片内距、表格单元格四处的实测值。
|
|
8
7
|
*
|
|
9
|
-
*
|
|
10
|
-
*
|
|
11
|
-
*
|
|
12
|
-
*
|
|
13
|
-
* **控件三档是 24 / 32 / 40**(对齐主流设计系统的 small / middle / large):
|
|
14
|
-
* `sm` 用于表格行内与密集工具条,`md` 是**标准档**(按钮 / 输入框 / 选择器的缺省高度),
|
|
15
|
-
* `lg` 用于表单首屏的主字段。
|
|
16
|
-
*
|
|
17
|
-
* ⚠️ 命名与档位的对应关系:`-sm` 是「小号控件高」,**不是「标准控件高」**。
|
|
18
|
-
* 组件里表示标准高一律取 `--ui-control-height-md`;早先把这个槽位当标准档用的写法已全部改正 ——
|
|
19
|
-
* 若某处仍写 `var(--ui-control-height-sm)` 当标准高,它渲染出来会比邻件矮一档(这是排查尺寸不齐的第一个入口)。
|
|
8
|
+
* 控件三档 24 / 32 / 40:`sm` 用于表格行内与密集工具条,`md` 是**标准档**(按钮 / 输入框 /
|
|
9
|
+
* 选择器缺省高),`lg` 用于表单首屏主字段。
|
|
10
|
+
* ⚠️ `-sm` 是「小号控件高」**不是标准高**:标准高一律取 `--ui-control-height-md`;
|
|
11
|
+
* 把 `-sm` 当标准高用会渲染得比邻件矮一档(尺寸不齐的第一个排查入口)。
|
|
20
12
|
*/
|
|
21
13
|
[data-manohub-ui] {
|
|
22
14
|
--ui-space-1: 4px; --ui-space-2: 8px; --ui-space-3: 12px;
|
|
@@ -26,17 +18,13 @@
|
|
|
26
18
|
--ui-control-height-md: 32px; /* 标准控件高:按钮 / 输入框 / 选择器缺省档 */
|
|
27
19
|
--ui-control-height-lg: 40px; /* 大号控件:表单首屏主字段 */
|
|
28
20
|
|
|
29
|
-
/*
|
|
30
|
-
- `--ui-control-width
|
|
31
|
-
重设它即给整片控件定宽(如筛选行 `--ui-control-width: 240px`),不必逐个挂类;
|
|
21
|
+
/* 可输入控件的宽度口径(Input / Textarea / NumberInput / Select / SelectTree / Search 共用):
|
|
22
|
+
- `--ui-control-width`:整件宽度,缺省撑满所在容器;消费方在任意容器上重设它即给整片控件定宽;
|
|
32
23
|
- `--ui-control-min-width`:**收缩下限**。控件落在「宽度由内容决定」的容器里时(flex 的
|
|
33
|
-
shrink-to-fit
|
|
34
|
-
—— 实测 SelectTree
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
下限取到同一枚数 ⇒ 不改变库内任何既有最窄用法。
|
|
38
|
-
⚠️ 它不是布局约束(远小于 `--ui-form-column-min` 320 / `--ui-grid-column-min` 260):
|
|
39
|
-
密集工具条 / 表格行内确实要更窄的,在该区域重设 `--ui-control-min-width: 0` 即局部放行。 */
|
|
24
|
+
shrink-to-fit 槽,典型是页头右位的筛选位),百分比宽度解析不出确定值、会回退成内容宽
|
|
25
|
+
—— 实测 SelectTree 只剩占位文字那一小截,两个筛选件还不等宽。
|
|
26
|
+
取值出处:库内最窄的可输入控件是 Tag 行内编辑框(120px),下限取同一枚数。
|
|
27
|
+
⚠️ 它不是布局约束:密集工具条 / 表格行内要更窄时,在该区域重设 `--ui-control-min-width: 0`。 */
|
|
40
28
|
--ui-control-width: 100%;
|
|
41
29
|
--ui-control-min-width: 120px;
|
|
42
30
|
|
|
@@ -1,24 +1,16 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* 字体令牌(字阶 / 行高 / 字重 /
|
|
2
|
+
* 字体令牌(字阶 / 行高 / 字重 / 等宽族)。取值取自《MH后台-0911》品牌页实测:页头标题 `18/28 w600`
|
|
3
|
+
* (`0:3902`)、卡片标题 `16/24`(`0:1556`)、正文 `14/20`、次级 `13/20`、表格内标签 `12/15`(`0:2723`)。
|
|
3
4
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
*
|
|
9
|
-
* - `--ui-line-body`(14px 档)取 **20**:设计稿里 14px 有两组行高 —— 控件内单行(按钮、
|
|
10
|
-
* 输入框)是 `14/18`,会换行的说明文字是 `14/20`。本令牌的消费者以「可能换行的说明文字」
|
|
11
|
-
* 为主(`notice` / `dialog` / `filter` / `form`),故取正文档;控件内单行文字走固定高 + 居中,
|
|
12
|
-
* 对行高不敏感,不为此另开一档。
|
|
13
|
-
* - `--ui-line-micro` / `--ui-line-display` **有意未建**:两档目前都只有字号消费者、没有行高消费者
|
|
14
|
-
* (12px 档用于标签,标签是 `line-height: 1`;20px 档见设计 `0:1548` 的 `20/28 w500` 但尚未落件)。
|
|
15
|
-
* 无消费者前不预置令牌(见 `default/index.css` 同一口径)—— 别为了「成对好看」补上空令牌,
|
|
16
|
-
* 那样只会多出一枚没人验证的值。
|
|
5
|
+
* `--ui-line-body`(14 档)取 **20**:设计稿里 14px 有 `14/18`(控件内单行)与 `14/20`(会换行的说明
|
|
6
|
+
* 文字)两组,本令牌的消费者以后者为主(notice / dialog / filter / form);控件内单行走固定高 + 居中,
|
|
7
|
+
* 对行高不敏感,不另开一档。
|
|
8
|
+
* `--ui-line-micro` / `--ui-line-display` **有意未建**:只有字号消费者、没有行高消费者(12px 用于标签,
|
|
9
|
+
* 标签 `line-height: 1`;20px 见 `0:1548` 但尚未落件)。别为「成对好看」补空令牌。
|
|
17
10
|
*/
|
|
18
11
|
[data-manohub-ui] {
|
|
19
|
-
/*
|
|
20
|
-
|
|
21
|
-
换品牌字族改这一枚即可,`@manohub/ui` 的 reset 与各组件面都只是消费它。 */
|
|
12
|
+
/* 字族:全库文本基线。中文优先 `Noto Sans SC`、西文 `Inter`,再退回系统字族。
|
|
13
|
+
换品牌字族只改这一枚(`@manohub/ui` 的 reset 与各组件面都只是消费它)。 */
|
|
22
14
|
--ui-font-family: 'Noto Sans SC', Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
|
23
15
|
sans-serif;
|
|
24
16
|
|
package/dist/farris/colors.css
CHANGED
|
@@ -1,19 +1,11 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Farris 主题 ·
|
|
2
|
+
* Farris 主题 · 色彩令牌。值取自《Farris Web 基础视觉规范》色板(Figma 导出 2026-09-09),
|
|
3
|
+
* **行尾括注是该规范的色板编号**(Th/Au/Ne/Te/Focus/Success/Warning/Danger),便于回规范对照检索。
|
|
3
4
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* **本主题必须全量覆盖 default 的令牌**(否则会与 default 混成半套主题;护栏在
|
|
9
|
-
* `__tests__/contract-tokens.spec.ts` 的「主题覆盖度」用例)。
|
|
10
|
-
*
|
|
11
|
-
* **中性阶的语义槽位与 default 逐条对齐**(见 `../default/colors.css` 的「三条口径」):实线线框
|
|
12
|
-
* 一律取 `base-300`(输入框、按钮、表格、分页项、卡片、面板、分隔线),虚线一律取
|
|
13
|
-
* `--ui-line-dashed`(= `base-400`);`base-400` 另服务小尺寸勾选类框体。本套的值取自规范色板
|
|
14
|
-
* (`Ne08` / `Ne04`),**行尾括注是「值出处」**:
|
|
15
|
-
* 规范原文把 `Ne04` 记作「输入框默认边框」,本仓按上面的统一口径把它归给 `base-300` ——
|
|
16
|
-
* 故 `base-400` 的括注不再写「输入框」,否则读者会以为输入框该取它(`Input` 取的是 `base-300`)。
|
|
5
|
+
* - 锚与「必须全量覆盖 default」见 `index.css`;中性阶的语义槽位与 default 逐条对齐
|
|
6
|
+
* (实线一律 `base-300`、虚线一律 `--ui-line-dashed`、`base-400` 另服务小尺寸勾选类框体)。
|
|
7
|
+
* - ⚠️ 规范原文把 `Ne04` 记作「输入框默认边框」,本仓按统一口径归给 `base-300`
|
|
8
|
+
* ⇒ `base-400` 的括注不再写「输入框」,否则会以为 `Input` 取它。
|
|
17
9
|
*/
|
|
18
10
|
[data-manohub-ui][data-theme='farris'] {
|
|
19
11
|
/* ===== 品牌主色(科技蓝 Th 族) ===== */
|
package/dist/farris/index.css
CHANGED
|
@@ -1,17 +1,11 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Farris 主题(对外公开为 `@manohub/theme/farris.css
|
|
2
|
+
* Farris 主题(对外公开为 `@manohub/theme/farris.css`):全量令牌取自《Farris Web 基础视觉规范》,
|
|
3
|
+
* 映射到本包的 `--ui-*` 槽位 —— 组件类名 / 代码 / 面一个字都不动,纯粹换「值」。
|
|
3
4
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* - `default/` 锚 `[data-manohub-ui]`,是**不带属性选择器的兜底套**,永远先生效;
|
|
9
|
-
* - 本主题锚 `[data-manohub-ui][data-theme='farris']`,给锚加上 `data-theme` 即整包换皮
|
|
10
|
-
* (`createSubApp({ theme: 'farris' })` 会写这个属性);
|
|
11
|
-
* - 因此本主题**必须全量覆盖 default 的每一枚令牌**,缺一枚就会出现"半套主题"(default 兜底 + farris 局部),
|
|
12
|
-
* 覆盖度由 `__tests__/contract-tokens.spec.ts` 的「主题覆盖度」用例机械校验。
|
|
13
|
-
*
|
|
14
|
-
* 锚点同样**不写 `:root`**:micro-app 的 scopecss 不作用域化 `:root`,变量会泄漏到宿主全局。
|
|
5
|
+
* - 锚 `[data-manohub-ui][data-theme='farris']`:给锚加 `data-theme` 即整包换皮
|
|
6
|
+
* (`createSubApp({ theme: 'farris' })` 会写它);同样**不写 `:root`**(理由见 default/index.css)。
|
|
7
|
+
* - 本主题**必须全量覆盖 default 的每一枚令牌**,缺一枚就会出现「半套主题」(default 兜底 + farris 局部);
|
|
8
|
+
* 覆盖度由 `__tests__/contract-tokens.spec.ts` 机械校验。
|
|
15
9
|
*/
|
|
16
10
|
@import './colors.css';
|
|
17
11
|
@import './typography.css';
|
package/dist/farris/radius.css
CHANGED
|
@@ -1,17 +1,10 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Farris 主题 ·
|
|
2
|
+
* Farris 主题 · 圆角令牌。取值取自规范(只有三档:控件 6 / 复选框 3 / 胶囊)与内容卡片 8px 实测。
|
|
3
3
|
*
|
|
4
|
-
*
|
|
5
|
-
* `
|
|
6
|
-
*
|
|
7
|
-
*
|
|
8
|
-
* 而本包的 `Badge` / `Tag` 走 `--ui-radius-xs`(3) 与 `--ui-radius-sm`(4) 的小圆角档
|
|
9
|
-
* (default 主题的设计源给的就是小圆角,见 `default/radius.css` 的四档表)。
|
|
10
|
-
* 一个槽位不能同时是 3px 与胶囊 —— 此处保留本包的体量档结构,徽标要不要变胶囊属**形态**问题
|
|
11
|
-
* (API 变更),不在换皮范围。
|
|
12
|
-
*
|
|
13
|
-
* 好消息:`--ui-radius-xs` 恰好对上规范的复选框档 3px,故**复选框在两套主题下都是 3px**
|
|
14
|
-
* (改前 default 用 4px 且被硬编码挡着、farris 声明的 3px 从未生效 —— 本轮一并修掉)。
|
|
4
|
+
* ⚠️ 已知差异(如实登记):规范里徽标 / 标签是**胶囊**(`9999px`),本包的 `Badge` / `Tag` 走
|
|
5
|
+
* `xs`(3) / `sm`(4) 的小圆角档(default 的设计源就是小圆角)。一个槽位不能同时是 3px 与胶囊 ——
|
|
6
|
+
* 此处保留本包的体量档结构;徽标要不要变胶囊属**形态**问题(API 变更),不在换皮范围。
|
|
7
|
+
* `--ui-radius-xs` 恰好对上规范的复选框 3px ⇒ 复选框在两套主题下都是 3px。
|
|
15
8
|
*/
|
|
16
9
|
[data-manohub-ui][data-theme='farris'] {
|
|
17
10
|
--ui-radius-xs: 3px; /* --mh-radius-checkbox:规范只有「复选框 3px」这一枚小圆角 */
|
package/dist/farris/shadows.css
CHANGED
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Farris 主题 ·
|
|
2
|
+
* Farris 主题 · 投影与遮罩令牌。投影取自规范的 4dp→18dp 阶梯(基准 `#031b4e`)与卡片实测
|
|
3
|
+
* (4dp 静态 → 10dp 悬浮)。
|
|
3
4
|
*
|
|
4
|
-
*
|
|
5
|
-
*
|
|
6
|
-
*
|
|
7
|
-
* 遮罩与微蒙层四枚规范未给对应槽位 → 沿用 default 值。**不映射规范的弹层遮罩档(0.45)**:
|
|
8
|
-
* 那是弹出层遮罩,与本包 `--ui-mask`(0.1 的轻蒙层,消费方可能用于局部压暗)不是同一语义,
|
|
9
|
-
* 直接换值会误伤消费方页面。
|
|
5
|
+
* ⚠️ 遮罩与微蒙层四枚规范未给对应槽位 → 沿用 default。**不映射规范的弹层遮罩档(0.45)**:
|
|
6
|
+
* 那是弹出层遮罩,与本包 `--ui-mask`(0.1 轻蒙层,消费方可能用于局部压暗)不是同一语义。
|
|
10
7
|
*/
|
|
11
8
|
[data-manohub-ui][data-theme='farris'] {
|
|
12
9
|
/* 卡片阶梯(环境光) */
|
package/dist/farris/spacing.css
CHANGED
|
@@ -1,12 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Farris 主题 ·
|
|
3
|
-
*
|
|
4
|
-
* 取值取自 `@aihub/theme` 的 `base/spacing.css`。注意规范的刻度比本包密(3=10px、4=12px、5=14px、6=16px…),
|
|
5
|
-
* 故本包的五档是**按值对位**(4/8/12/16/24),不是按序号对位。
|
|
2
|
+
* Farris 主题 · 间距与尺寸令牌。取值取自《Farris Web 基础视觉规范》;规范的刻度比本包密
|
|
3
|
+
* (3=10px、4=12px、5=14px、6=16px…),故本包的档位是**按值对位**(4/8/12/16/24)而非按序号对位。
|
|
6
4
|
*
|
|
7
5
|
* 规范**未给**的槽位(大号控件高、行高、页头条高、栅格单元下限)沿用 default 值并在此注明 ——
|
|
8
|
-
*
|
|
9
|
-
* 只是这里因为槽位已被消费方使用而不能撤)。
|
|
6
|
+
* 如实标注「无出处」,不凭空造数。
|
|
10
7
|
*/
|
|
11
8
|
[data-manohub-ui][data-theme='farris'] {
|
|
12
9
|
/* 布局间距(对位 --mh-space-1/2/4/6/8) */
|