@manohub/theme 0.10.1 → 0.10.3
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/dist/default/colors.css +14 -5
- package/dist/default/spacing.css +10 -0
- package/dist/farris/colors.css +11 -5
- package/dist/farris/spacing.css +5 -1
- package/package.json +1 -1
package/dist/default/colors.css
CHANGED
|
@@ -13,7 +13,7 @@
|
|
|
13
13
|
*
|
|
14
14
|
* 1. **中性阶是五个「槽位」,不是一条刻度**:`base-50`(比内容底更轻一档的底)/
|
|
15
15
|
* `base-100`(内容底)/ `base-200`(中性面:表头底 / hover 底 / 禁用底 / 斑马行)/
|
|
16
|
-
* `base-300
|
|
16
|
+
* `base-300`(**实线**线框)/ `base-400`(**虚线**线框 + 勾选类小控件框体)。
|
|
17
17
|
* **数字只是槽位标号**(借 daisyUI 的命名壳),**不承诺等差 / 等比** —— 取值是设计稿的
|
|
18
18
|
* **实测采样 + 近似合并**,不是从数列推出来的:别按数字补 `base-500`,也别把数字当
|
|
19
19
|
* 「浅一档 / 深一档」的通用梯度使(要更轻的底就 `base-50`、要「面」就 `base-200`,语义各归各)。
|
|
@@ -25,8 +25,10 @@
|
|
|
25
25
|
* 它**不是刻度上的一格**,是「比内容底更轻一档的底」这一语义槽位 —— 但它的可见度本来就不够,
|
|
26
26
|
* 故**库内已无消费**(`Tag` 悬停底与 `Badge --soft` 默认底 2026-09-30 起改取 `base-200`),
|
|
27
27
|
* 留着是给应用侧的浅底;**别拿它当「浅灰面」的通用档**。
|
|
28
|
-
* 2.
|
|
29
|
-
*
|
|
28
|
+
* 2. **线色按线型分两档**:**实线**一律取 `base-300`(输入框、按钮、表格、分页项、卡片、面板、
|
|
29
|
+
* 分隔线);**虚线**一律取 `--ui-line-dashed`(值 = `base-400`,比实线深一档)—— 同样粗细下
|
|
30
|
+
* 虚线的墨迹只有实线的一半,取同色会明显偏浅、整条框看着发虚。
|
|
31
|
+
* `base-400` 另外服务 **14×14 这类小尺寸勾选框体**(设计稿让复选框比容器线深一档,
|
|
30
32
|
* 否则小方块在浅底上看不见)。
|
|
31
33
|
* 3. **语义浅底与描边由基色按固定比例派生**(写在行尾):`-weak` = 基色 10% 入白、
|
|
32
34
|
* `-border` = 基色 30% 入白、`-strong` = 基色 85% 入黑。改基色时**必须同步重算这三档**
|
|
@@ -52,14 +54,21 @@
|
|
|
52
54
|
--ui-base-50: #FAFAFA; /* 比内容底更轻一档的底;不是刻度上的一格 */
|
|
53
55
|
--ui-base-100: #FFFFFF;
|
|
54
56
|
--ui-base-200: #F1F2F5; /* 中性面:表头底 / hover 底 / 禁用底 / 斑马行 */
|
|
55
|
-
--ui-base-300: #E6E6E6; /*
|
|
56
|
-
--ui-base-400: #DCDCDC; /*
|
|
57
|
+
--ui-base-300: #E6E6E6; /* **实线**线框一律取它(全库唯一的实线线色) */
|
|
58
|
+
--ui-base-400: #DCDCDC; /* **虚线**框(经 `--ui-line-dashed`)+ 勾选类小控件框体(checkbox / radio / switch 未选) */
|
|
57
59
|
--ui-base-content: #1A1A1A;
|
|
58
60
|
--ui-base-content-muted: #666666;
|
|
59
61
|
/* 说明 / 占位 / 禁用文字。设计稿的 `#888888`(禁用按钮字)与 `#bfbfbf` 并入本档
|
|
60
62
|
—— 三者只差一档且同为「弱化」,多开槽位只会再长出漂移(`filter.css` 已有同向裁决)。 */
|
|
61
63
|
--ui-base-content-subtle: #999999;
|
|
62
64
|
|
|
65
|
+
/* ===== 线型档 =====
|
|
66
|
+
跨件共用的**虚线**线色:`Tag` 的新增入口 / `Button--dashed` / `Upload` 拖拽区 /
|
|
67
|
+
`Avatar` 占位框 / `Divider` 虚线五处取同一枚。按本仓口径「跨件共用的值只能进主题包」,
|
|
68
|
+
故它是一枚全局令牌,而不是五处各写一遍 `var(--ui-base-400)` —— 虚线要换深浅时
|
|
69
|
+
只改这两套主题文件,五处一起动(口径见本文件头第 2 条)。 */
|
|
70
|
+
--ui-line-dashed: var(--ui-base-400);
|
|
71
|
+
|
|
63
72
|
/* ===== 语义状态(四组同词根:info / success / warning / error) =====
|
|
64
73
|
基色有设计实证;浅底 / 描边 / 深字按本文件头第 3 条的固定比例派生。 */
|
|
65
74
|
/* 信息:设计稿未覆盖本槽位 → 沿用原值(不合并进主色:无依据,且会破坏与 farris 主题的结构对称) */
|
package/dist/default/spacing.css
CHANGED
|
@@ -28,6 +28,16 @@
|
|
|
28
28
|
--ui-row-height: 36px;
|
|
29
29
|
--ui-header-height: 48px;
|
|
30
30
|
|
|
31
|
+
/* 标记体量档(**标记片**这一族的共用高度):20 / 24。
|
|
32
|
+
徽标(`Badge` 的 `sm` / `md`)、标签(`Tag` 的 `sm` / 常规档)、多选标签片(`Select` 的
|
|
33
|
+
`--ui-select-chip-height`)三处取同一枚令牌 —— 改档只改这里,不再各自写字面量。
|
|
34
|
+
出处:《Farris Web 基础视觉规范》的「表格内标签」实测 36×20(r3 + 12px 字),20 档是设计稿里
|
|
35
|
+
唯一有实证的标记尺寸;24 档按体量就近升一档(规范未给,与 `Badge` 面里那条登记同源)。
|
|
36
|
+
⚠️ 与 `--ui-control-height-*` 不是一族:控件高描述「可输入控件」的外框,标记片是**贴在内容上
|
|
37
|
+
的小色片**,两者只是数值上恰好都有 24,语义不同、别互相顶替。 */
|
|
38
|
+
--ui-mark-height-sm: 20px;
|
|
39
|
+
--ui-mark-height-md: 24px;
|
|
40
|
+
|
|
31
41
|
/* 栅格单元最小宽度(Layout.Row 与 ListView 共用):比表单列宽(--ui-form-column-min,见 form.css)
|
|
32
42
|
窄一档 —— 表单字段要放下「label + 控件」,而栅格单元(卡片/内容块)可以更窄。
|
|
33
43
|
用于「列数上限 N + 最小列宽」公式里 track 的下限(实测:600px 仍排 2 列、500px 折成 1 列)。 */
|
package/dist/farris/colors.css
CHANGED
|
@@ -8,9 +8,10 @@
|
|
|
8
8
|
* **本主题必须全量覆盖 default 的令牌**(否则会与 default 混成半套主题;护栏在
|
|
9
9
|
* `__tests__/contract-tokens.spec.ts` 的「主题覆盖度」用例)。
|
|
10
10
|
*
|
|
11
|
-
* **中性阶的语义槽位与 default 逐条对齐**(见 `../default/colors.css`
|
|
12
|
-
*
|
|
13
|
-
*
|
|
11
|
+
* **中性阶的语义槽位与 default 逐条对齐**(见 `../default/colors.css` 的「三条口径」):实线线框
|
|
12
|
+
* 一律取 `base-300`(输入框、按钮、表格、分页项、卡片、面板、分隔线),虚线一律取
|
|
13
|
+
* `--ui-line-dashed`(= `base-400`);`base-400` 另服务小尺寸勾选类框体。本套的值取自规范色板
|
|
14
|
+
* (`Ne08` / `Ne04`),**行尾括注是「值出处」**:
|
|
14
15
|
* 规范原文把 `Ne04` 记作「输入框默认边框」,本仓按上面的统一口径把它归给 `base-300` ——
|
|
15
16
|
* 故 `base-400` 的括注不再写「输入框」,否则读者会以为输入框该取它(`Input` 取的是 `base-300`)。
|
|
16
17
|
*/
|
|
@@ -33,12 +34,17 @@
|
|
|
33
34
|
--ui-base-50: #fafafc; /* Ne14 表格/树表禁用行(**库内已无消费**,保留给应用侧;见 default 口径第 1 条) */
|
|
34
35
|
--ui-base-100: #ffffff; /* Ne12 卡片与输入框背景 */
|
|
35
36
|
--ui-base-200: #f5f6f9; /* Ne10 选择器选中行 / 输入框禁用背景 */
|
|
36
|
-
--ui-base-300: #e8ebf2; /* Ne08
|
|
37
|
-
--ui-base-400: #d9dee7; /* Ne04
|
|
37
|
+
--ui-base-300: #e8ebf2; /* Ne08 弱边框:**实线**线框一律取它(含输入框描边) */
|
|
38
|
+
--ui-base-400: #d9dee7; /* Ne04 虚线框(经 `--ui-line-dashed`)+ 勾选类小控件框体(checkbox / radio / switch 未选) */
|
|
38
39
|
--ui-base-content: #2d2f33; /* Te01/Te02 标题与通用正文 */
|
|
39
40
|
--ui-base-content-muted: #5a5e66; /* Te04 标签文字 / 表头 */
|
|
40
41
|
--ui-base-content-subtle: #747b8b; /* Te06 辅助说明 */
|
|
41
42
|
|
|
43
|
+
/* ===== 线型档 =====
|
|
44
|
+
跨件共用的**虚线**线色(口径见 default 口径第 2 条):值 = 本套的 `base-400`,
|
|
45
|
+
故换主题时它自动跟着本套的色板走,五处虚线一起变。 */
|
|
46
|
+
--ui-line-dashed: var(--ui-base-400);
|
|
47
|
+
|
|
42
48
|
/* ===== 语义状态(01 文字 / 02 边框 / 03 浅背景三件套) ===== */
|
|
43
49
|
--ui-info: #4190ff; /* Focus01 */
|
|
44
50
|
--ui-info-content: #ffffff; /* Te11 */
|
package/dist/farris/spacing.css
CHANGED
|
@@ -21,9 +21,13 @@
|
|
|
21
21
|
--ui-control-height-sm: 26px;
|
|
22
22
|
--ui-control-height-md: 26px;
|
|
23
23
|
|
|
24
|
-
/*
|
|
24
|
+
/* 以下六枚规范未给槽位 → 沿用 default 值。
|
|
25
|
+
其中标记体量档(20 / 24):规范只给了「表格内标签 36×20」的实测值,没有把标记片立成档位,
|
|
26
|
+
故如实沿用 default,不凭空造数(与上一段的控件高不是一族,见 default/spacing.css 的注释)。 */
|
|
25
27
|
--ui-control-height-lg: 40px;
|
|
26
28
|
--ui-row-height: 36px;
|
|
27
29
|
--ui-header-height: 48px;
|
|
28
30
|
--ui-grid-column-min: 260px; /* 栅格水槽 28px 与「单元最小宽度」不是同一件事 */
|
|
31
|
+
--ui-mark-height-sm: 20px;
|
|
32
|
+
--ui-mark-height-md: 24px;
|
|
29
33
|
}
|