@mezzanine-ui/system 1.0.0-rc.8 → 1.0.0
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/DESIGN_TOKENS.md +671 -0
- package/llms.txt +17 -7
- package/package.json +1 -1
package/DESIGN_TOKENS.md
ADDED
|
@@ -0,0 +1,671 @@
|
|
|
1
|
+
# Mezzanine UI Design Tokens
|
|
2
|
+
|
|
3
|
+
視覺變數的基礎定義，採用 **Primitives + Semantic** 雙層架構。
|
|
4
|
+
|
|
5
|
+
> 基於 **v1.0.0**（`@mezzanine-ui/system`）
|
|
6
|
+
|
|
7
|
+
## 目錄
|
|
8
|
+
|
|
9
|
+
- [架構說明](#架構說明)
|
|
10
|
+
- [Primitives 色票](#primitives-色票)
|
|
11
|
+
- [Semantic 顏色](#semantic-顏色)
|
|
12
|
+
- [間距系統](#間距系統)
|
|
13
|
+
- [字體排版系統](#字體排版系統)
|
|
14
|
+
- [圓角](#圓角)
|
|
15
|
+
- [陰影](#陰影)
|
|
16
|
+
- [尺寸](#尺寸)
|
|
17
|
+
- [Z-Index](#z-index)
|
|
18
|
+
- [使用方式](#使用方式)
|
|
19
|
+
|
|
20
|
+
---
|
|
21
|
+
|
|
22
|
+
## 架構說明
|
|
23
|
+
|
|
24
|
+
v2 design tokens 採用雙層架構：
|
|
25
|
+
|
|
26
|
+
1. **Primitives**：原始值定義（顏色值、間距像素等）
|
|
27
|
+
2. **Semantic**：依使用情境命名，參照 Primitives
|
|
28
|
+
|
|
29
|
+
> **最佳實踐**：在應用程式中應一律使用 Semantic tokens，以支援自動切換主題。
|
|
30
|
+
|
|
31
|
+
---
|
|
32
|
+
|
|
33
|
+
## Primitives 色票
|
|
34
|
+
|
|
35
|
+
依分類與級距定義的原始顏色值。
|
|
36
|
+
|
|
37
|
+
### 色彩分類
|
|
38
|
+
|
|
39
|
+
| 分類 | 說明 | 級距 |
|
|
40
|
+
| ------------ | ------------ | -------------------------------------------------------- |
|
|
41
|
+
| `brand` | 品牌色 | 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 |
|
|
42
|
+
| `red` | 錯誤/危險 | 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 |
|
|
43
|
+
| `yellow` | 警告 | 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 |
|
|
44
|
+
| `green` | 成功 | 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 |
|
|
45
|
+
| `blue` | 資訊 | 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 |
|
|
46
|
+
| `gray` | 中性灰階 | 25, 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950 |
|
|
47
|
+
| `white-base` | 白色系 | white, white-alpha-0/5/10/20/30/40/50/60/70/80/90 |
|
|
48
|
+
| `black-base` | 黑色系 | black, black-alpha-0/3/5/8/10/20/30/40/50/60/70/80/90 |
|
|
49
|
+
| `brand-base` | 品牌色透明度 | brand-alpha-10/20/30/40/50/60/70/80/90 |
|
|
50
|
+
|
|
51
|
+
### 品牌色 (Brand)
|
|
52
|
+
|
|
53
|
+
| 級距 | 色值 |
|
|
54
|
+
| ---- | --------- |
|
|
55
|
+
| 25 | `#FAFAFF` |
|
|
56
|
+
| 50 | `#F2F4FE` |
|
|
57
|
+
| 100 | `#E2E6FD` |
|
|
58
|
+
| 200 | `#C2CCFA` |
|
|
59
|
+
| 300 | `#9DAAF5` |
|
|
60
|
+
| 400 | `#7689EF` |
|
|
61
|
+
| 500 | `#5D74E9` |
|
|
62
|
+
| 600 | `#5265E1` |
|
|
63
|
+
| 700 | `#4353D6` |
|
|
64
|
+
| 800 | `#3340C2` |
|
|
65
|
+
| 900 | `#24318F` |
|
|
66
|
+
| 950 | `#1A2558` |
|
|
67
|
+
|
|
68
|
+
### 錯誤色 (Red)
|
|
69
|
+
|
|
70
|
+
| 級距 | 色值 |
|
|
71
|
+
| ---- | --------- |
|
|
72
|
+
| 25 | `#FFFAFA` |
|
|
73
|
+
| 50 | `#FFF1F1` |
|
|
74
|
+
| 100 | `#FDDDDD` |
|
|
75
|
+
| 200 | `#FAB6B9` |
|
|
76
|
+
| 300 | `#F88B91` |
|
|
77
|
+
| 400 | `#F45D65` |
|
|
78
|
+
| 500 | `#F03740` |
|
|
79
|
+
| 600 | `#D03335` |
|
|
80
|
+
| 700 | `#B22B2D` |
|
|
81
|
+
| 800 | `#911F22` |
|
|
82
|
+
| 900 | `#6D1518` |
|
|
83
|
+
| 950 | `#4B0B0B` |
|
|
84
|
+
|
|
85
|
+
### 成功色 (Green)
|
|
86
|
+
|
|
87
|
+
| 級距 | 色值 |
|
|
88
|
+
| ---- | --------- |
|
|
89
|
+
| 25 | `#F3FCF7` |
|
|
90
|
+
| 50 | `#E5F9EE` |
|
|
91
|
+
| 100 | `#C5F0D8` |
|
|
92
|
+
| 200 | `#94DFB8` |
|
|
93
|
+
| 300 | `#57C78F` |
|
|
94
|
+
| 400 | `#2BB26D` |
|
|
95
|
+
| 500 | `#139F62` |
|
|
96
|
+
| 600 | `#11985A` |
|
|
97
|
+
| 700 | `#0E754D` |
|
|
98
|
+
| 800 | `#0A5C41` |
|
|
99
|
+
| 900 | `#064130` |
|
|
100
|
+
| 950 | `#042B1B` |
|
|
101
|
+
|
|
102
|
+
### 警告色 (Yellow)
|
|
103
|
+
|
|
104
|
+
| 級距 | 色值 |
|
|
105
|
+
| ---- | --------- |
|
|
106
|
+
| 25 | `#FFFCF5` |
|
|
107
|
+
| 50 | `#FFFAEB` |
|
|
108
|
+
| 100 | `#FEF0C7` |
|
|
109
|
+
| 200 | `#FEDF89` |
|
|
110
|
+
| 300 | `#FEC84B` |
|
|
111
|
+
| 400 | `#FEB022` |
|
|
112
|
+
| 500 | `#F7900A` |
|
|
113
|
+
| 600 | `#DC6803` |
|
|
114
|
+
| 700 | `#B54708` |
|
|
115
|
+
| 800 | `#93370D` |
|
|
116
|
+
| 900 | `#7A2E0E` |
|
|
117
|
+
| 950 | `#4E1D09` |
|
|
118
|
+
|
|
119
|
+
### 資訊色 (Blue)
|
|
120
|
+
|
|
121
|
+
| 級距 | 色值 |
|
|
122
|
+
| ---- | --------- |
|
|
123
|
+
| 25 | `#F5FAFF` |
|
|
124
|
+
| 50 | `#EFF8FF` |
|
|
125
|
+
| 100 | `#D1E9FF` |
|
|
126
|
+
| 200 | `#B2DDFF` |
|
|
127
|
+
| 300 | `#84CAFF` |
|
|
128
|
+
| 400 | `#53B1FD` |
|
|
129
|
+
| 500 | `#2E90FA` |
|
|
130
|
+
| 600 | `#1570EF` |
|
|
131
|
+
| 700 | `#175CD3` |
|
|
132
|
+
| 800 | `#1849A9` |
|
|
133
|
+
| 900 | `#194185` |
|
|
134
|
+
| 950 | `#102A56` |
|
|
135
|
+
|
|
136
|
+
### 中性灰階 (Gray)
|
|
137
|
+
|
|
138
|
+
| 級距 | 色值 |
|
|
139
|
+
| ---- | --------- |
|
|
140
|
+
| 25 | `#FBFBFC` |
|
|
141
|
+
| 50 | `#F9FAFB` |
|
|
142
|
+
| 100 | `#F3F4F6` |
|
|
143
|
+
| 200 | `#E5E7EB` |
|
|
144
|
+
| 300 | `#C9CBD4` |
|
|
145
|
+
| 400 | `#9DA4AE` |
|
|
146
|
+
| 500 | `#6C737F` |
|
|
147
|
+
| 600 | `#525A61` |
|
|
148
|
+
| 700 | `#404750` |
|
|
149
|
+
| 800 | `#29313B` |
|
|
150
|
+
| 900 | `#191E26` |
|
|
151
|
+
| 950 | `#101319` |
|
|
152
|
+
|
|
153
|
+
### CSS 變數格式
|
|
154
|
+
|
|
155
|
+
```
|
|
156
|
+
--mzn-color-primitive-{category}-{scale}
|
|
157
|
+
```
|
|
158
|
+
|
|
159
|
+
範例：
|
|
160
|
+
|
|
161
|
+
- `--mzn-color-primitive-brand-500`
|
|
162
|
+
- `--mzn-color-primitive-gray-100`
|
|
163
|
+
- `--mzn-color-primitive-red-600`
|
|
164
|
+
|
|
165
|
+
---
|
|
166
|
+
|
|
167
|
+
## Semantic 顏色
|
|
168
|
+
|
|
169
|
+
依使用情境命名，自動對應 light/dark 主題。
|
|
170
|
+
|
|
171
|
+
### 情境類型
|
|
172
|
+
|
|
173
|
+
| 情境 | 說明 |
|
|
174
|
+
| ------------ | ------------------------------------------------------------------ |
|
|
175
|
+
| `layer` | 層級背景（01, 02, 03） |
|
|
176
|
+
| `background` | 背景色（33 種 tone） |
|
|
177
|
+
| `text` | 文字色（17 種 tone） |
|
|
178
|
+
| `icon` | 圖示色（19 種 tone） |
|
|
179
|
+
| `border` | 邊框色（11 種 tone） |
|
|
180
|
+
| `separator` | 分隔線色（4 種 tone） |
|
|
181
|
+
| `scrollbar` | 捲軸色（僅 SCSS，3 種 tone：`neutral-light`, `neutral`, `strong`） |
|
|
182
|
+
| `overlay` | 覆蓋層色（3 種 tone） |
|
|
183
|
+
| `surface` | 表面色（4 種 tone） |
|
|
184
|
+
| `shadow` | 陰影色（6 種 tone） |
|
|
185
|
+
|
|
186
|
+
### 背景色 Tones
|
|
187
|
+
|
|
188
|
+
| Tone | 說明 |
|
|
189
|
+
| ---------------- | ------------ |
|
|
190
|
+
| `base` | 基底背景 |
|
|
191
|
+
| `menu` | 選單背景 |
|
|
192
|
+
| `inverse` | 反色背景 |
|
|
193
|
+
| `fixed-dark` | 固定深色背景 |
|
|
194
|
+
| `neutral-ghost` | 中性幽靈 |
|
|
195
|
+
| `neutral-faint` | 中性極淡 |
|
|
196
|
+
| `neutral-subtle` | 中性淡 |
|
|
197
|
+
| `neutral` | 中性標準 |
|
|
198
|
+
| `neutral-strong` | 中性強 |
|
|
199
|
+
| `neutral-solid` | 中性實心 |
|
|
200
|
+
| `brand-ghost` | 品牌幽靈 |
|
|
201
|
+
| `brand-faint` | 品牌極淡 |
|
|
202
|
+
| `brand-subtle` | 品牌淡 |
|
|
203
|
+
| `brand-light` | 品牌亮 |
|
|
204
|
+
| `brand` | 品牌背景 |
|
|
205
|
+
| `brand-strong` | 品牌強 |
|
|
206
|
+
| `brand-solid` | 品牌實心 |
|
|
207
|
+
| `error-ghost` | 錯誤幽靈 |
|
|
208
|
+
| `error-faint` | 錯誤極淡 |
|
|
209
|
+
| `error-subtle` | 錯誤淡 |
|
|
210
|
+
| `error-light` | 錯誤亮 |
|
|
211
|
+
| `error` | 錯誤背景 |
|
|
212
|
+
| `error-strong` | 錯誤強 |
|
|
213
|
+
| `error-solid` | 錯誤實心 |
|
|
214
|
+
| `warning-ghost` | 警告幽靈 |
|
|
215
|
+
| `warning-faint` | 警告極淡 |
|
|
216
|
+
| `warning` | 警告背景 |
|
|
217
|
+
| `success-ghost` | 成功幽靈 |
|
|
218
|
+
| `success-faint` | 成功極淡 |
|
|
219
|
+
| `success` | 成功背景 |
|
|
220
|
+
| `info-ghost` | 資訊幽靈 |
|
|
221
|
+
| `info-faint` | 資訊極淡 |
|
|
222
|
+
| `info` | 資訊背景 |
|
|
223
|
+
|
|
224
|
+
### 文字色 Tones
|
|
225
|
+
|
|
226
|
+
| Tone | 說明 |
|
|
227
|
+
| ---------------- | -------------------- |
|
|
228
|
+
| `fixed-light` | 固定淡色文字 |
|
|
229
|
+
| `neutral-faint` | 中性極淡文字 |
|
|
230
|
+
| `neutral-light` | 中性淡色文字 |
|
|
231
|
+
| `neutral` | 中性標準文字 |
|
|
232
|
+
| `neutral-strong` | 中性強文字 |
|
|
233
|
+
| `neutral-solid` | 中性實心文字（最深） |
|
|
234
|
+
| `brand` | 品牌文字 |
|
|
235
|
+
| `brand-strong` | 品牌強文字 |
|
|
236
|
+
| `brand-solid` | 品牌實心文字 |
|
|
237
|
+
| `error` | 錯誤文字 |
|
|
238
|
+
| `error-strong` | 錯誤強文字 |
|
|
239
|
+
| `error-solid` | 錯誤實心文字 |
|
|
240
|
+
| `warning` | 警告文字 |
|
|
241
|
+
| `warning-strong` | 警告強文字 |
|
|
242
|
+
| `success` | 成功文字 |
|
|
243
|
+
| `info` | 資訊文字 |
|
|
244
|
+
| `info-strong` | 資訊強文字 |
|
|
245
|
+
|
|
246
|
+
### 圖示色 Tones
|
|
247
|
+
|
|
248
|
+
| Tone | 說明 |
|
|
249
|
+
| ---------------- | ------------ |
|
|
250
|
+
| `fixed-light` | 固定淡色圖示 |
|
|
251
|
+
| `neutral-faint` | 中性極淡圖示 |
|
|
252
|
+
| `neutral-light` | 中性淡色圖示 |
|
|
253
|
+
| `neutral` | 中性標準圖示 |
|
|
254
|
+
| `neutral-strong` | 中性強圖示 |
|
|
255
|
+
| `neutral-bold` | 中性粗體圖示 |
|
|
256
|
+
| `neutral-solid` | 中性實心圖示 |
|
|
257
|
+
| `brand` | 品牌圖示 |
|
|
258
|
+
| `brand-strong` | 品牌強圖示 |
|
|
259
|
+
| `brand-solid` | 品牌實心圖示 |
|
|
260
|
+
| `error` | 錯誤圖示 |
|
|
261
|
+
| `error-strong` | 錯誤強圖示 |
|
|
262
|
+
| `error-solid` | 錯誤實心圖示 |
|
|
263
|
+
| `warning` | 警告圖示 |
|
|
264
|
+
| `warning-strong` | 警告強圖示 |
|
|
265
|
+
| `success` | 成功圖示 |
|
|
266
|
+
| `success-strong` | 成功強圖示 |
|
|
267
|
+
| `info` | 資訊圖示 |
|
|
268
|
+
| `info-strong` | 資訊強圖示 |
|
|
269
|
+
|
|
270
|
+
### 邊框色 Tones
|
|
271
|
+
|
|
272
|
+
| Tone | 說明 |
|
|
273
|
+
| ------------------- | ---------------- |
|
|
274
|
+
| `fixed-light` | 固定淡色邊框 |
|
|
275
|
+
| `fixed-light-alpha` | 固定淡色透明邊框 |
|
|
276
|
+
| `neutral-faint` | 中性極淡邊框 |
|
|
277
|
+
| `neutral-light` | 中性淡色邊框 |
|
|
278
|
+
| `neutral` | 中性標準邊框 |
|
|
279
|
+
| `neutral-strong` | 中性強邊框 |
|
|
280
|
+
| `brand` | 品牌邊框 |
|
|
281
|
+
| `error-subtle` | 錯誤淡邊框 |
|
|
282
|
+
| `error` | 錯誤邊框 |
|
|
283
|
+
| `warning-subtle` | 警告淡邊框 |
|
|
284
|
+
| `warning` | 警告邊框 |
|
|
285
|
+
|
|
286
|
+
### CSS 變數格式
|
|
287
|
+
|
|
288
|
+
```
|
|
289
|
+
--mzn-color-{context}-{tone}
|
|
290
|
+
```
|
|
291
|
+
|
|
292
|
+
範例：
|
|
293
|
+
|
|
294
|
+
- `--mzn-color-background-base`
|
|
295
|
+
- `--mzn-color-text-neutral-solid`
|
|
296
|
+
- `--mzn-color-border-brand`
|
|
297
|
+
|
|
298
|
+
---
|
|
299
|
+
|
|
300
|
+
## 間距系統
|
|
301
|
+
|
|
302
|
+
v2 使用語意化間距系統，支援 default / compact 兩種密度。
|
|
303
|
+
|
|
304
|
+
### Size（元素尺寸）
|
|
305
|
+
|
|
306
|
+
#### Element Tones
|
|
307
|
+
|
|
308
|
+
SCSS 中定義的 tones 比 TypeScript 型別定義多，下表同時標示兩者的差異。
|
|
309
|
+
|
|
310
|
+
| Tone | Default | Compact | 備註 |
|
|
311
|
+
| --------------------- | ------- | ------- | ---------------------- |
|
|
312
|
+
| `hairline` | 1px | 1px | |
|
|
313
|
+
| `micro` | 3px | 3px | 僅 SCSS，TypeScript 無 |
|
|
314
|
+
| `tiny` | 4px | 4px | |
|
|
315
|
+
| `tight` | 6px | 6px | |
|
|
316
|
+
| `compact` | 8px | 6px | |
|
|
317
|
+
| `slim` | 12px | 8px | |
|
|
318
|
+
| `narrow` | 14px | 12px | |
|
|
319
|
+
| `base` | 16px | 12px | |
|
|
320
|
+
| `base-fixed` | 16px | 16px | |
|
|
321
|
+
| `gentle` | 20px | 18px | |
|
|
322
|
+
| `relaxed` | 24px | 20px | |
|
|
323
|
+
| `airy` | 28px | 24px | |
|
|
324
|
+
| `roomy` | 32px | 28px | |
|
|
325
|
+
| `loose` | 36px | 32px | |
|
|
326
|
+
| `extra-wide` | 40px | 36px | |
|
|
327
|
+
| `extra-wide-condense` | 40px | 24px | |
|
|
328
|
+
| `expansive` | 60px | 56px | |
|
|
329
|
+
| `extra` | 64px | 48px | |
|
|
330
|
+
| `max` | 80px | 64px | |
|
|
331
|
+
|
|
332
|
+
> 注意：TypeScript `ElementTone` 型別不含 `micro`，但 SCSS 實作有此 tone。
|
|
333
|
+
|
|
334
|
+
#### Container Tones
|
|
335
|
+
|
|
336
|
+
下表列出 SCSS 中所有定義的 container tones（TypeScript `ContainerTone` 型別僅包含部分）。
|
|
337
|
+
|
|
338
|
+
| Tone | Default | Compact | TypeScript 型別 |
|
|
339
|
+
| ------------------- | ------- | ------- | --------------- |
|
|
340
|
+
| `atomic` | 30px | 26px | |
|
|
341
|
+
| `minimal` | 36px | 28px | |
|
|
342
|
+
| `micro` | 38px | 30px | |
|
|
343
|
+
| `minimized` | 40px | 32px | |
|
|
344
|
+
| `collapsed` | 52px | 52px | 有 |
|
|
345
|
+
| `reduced` | 56px | 48px | |
|
|
346
|
+
| `condensed` | 60px | 52px | |
|
|
347
|
+
| `compressed` | 70px | 70px | |
|
|
348
|
+
| `concentrate-fixed` | 72px | 72px | |
|
|
349
|
+
| `tightened` | 76px | 68px | |
|
|
350
|
+
| `tiny` | 80px | 80px | 有 |
|
|
351
|
+
| `medium` | 96px | 88px | |
|
|
352
|
+
| `small` | 100px | 92px | |
|
|
353
|
+
| `snug` | 140px | 120px | |
|
|
354
|
+
| `tight` | 160px | 160px | 有 |
|
|
355
|
+
| `slim` | 240px | 240px | 有 |
|
|
356
|
+
| `slender` | 280px | 280px | 有 |
|
|
357
|
+
| `narrow` | 320px | 320px | 有 |
|
|
358
|
+
| `compact` | 360px | 360px | 有 |
|
|
359
|
+
| `standard` | 400px | 400px | 有 |
|
|
360
|
+
| `balanced` | 480px | 480px | 有 |
|
|
361
|
+
| `broad` | 560px | 560px | 有 |
|
|
362
|
+
| `wide` | 640px | 640px | 有 |
|
|
363
|
+
| `expanded` | 720px | 720px | 有 |
|
|
364
|
+
| `max` | 960px | 960px | 有 |
|
|
365
|
+
| `xwide` | 1280px | 1280px | |
|
|
366
|
+
|
|
367
|
+
### Gap
|
|
368
|
+
|
|
369
|
+
> 注意：TypeScript `GapTone` 型別（15 種）與 SCSS 實作（12 種）使用**不同的 tone 名稱**。以下依 SCSS 實作為準（SCSS 產生實際 CSS 變數）。
|
|
370
|
+
|
|
371
|
+
#### SCSS 實作 Tones（12 種，產生 CSS 變數）
|
|
372
|
+
|
|
373
|
+
| Tone | Default | Compact |
|
|
374
|
+
| ------------- | ------- | ------- |
|
|
375
|
+
| `none` | 0 | 0 |
|
|
376
|
+
| `tiny` | 2px | 2px |
|
|
377
|
+
| `tight` | 4px | 2px |
|
|
378
|
+
| `tight-fixed` | 4px | 4px |
|
|
379
|
+
| `slim` | 6px | 4px |
|
|
380
|
+
| `base` | 8px | 6px |
|
|
381
|
+
| `calm` | 12px | 10px |
|
|
382
|
+
| `comfort` | 16px | 14px |
|
|
383
|
+
| `roomy` | 20px | 16px |
|
|
384
|
+
| `spacious` | 24px | 20px |
|
|
385
|
+
| `relaxed` | 32px | 28px |
|
|
386
|
+
| `loose` | 40px | 36px |
|
|
387
|
+
|
|
388
|
+
#### TypeScript `GapTone` 型別（15 種）
|
|
389
|
+
|
|
390
|
+
`'none' | 'micro' | 'tiny' | 'tight' | 'compact' | 'base' | 'base-fixed' | 'comfortable' | 'roomy' | 'spacious' | 'relaxed' | 'airy' | 'generous' | 'breath' | 'wide'`
|
|
391
|
+
|
|
392
|
+
> TypeScript 型別用於 component prop 型別檢查；SCSS 產生的 CSS 變數才是實際渲染值。兩者名稱不一致為已知問題。
|
|
393
|
+
|
|
394
|
+
### Padding
|
|
395
|
+
|
|
396
|
+
#### 水平 Tones
|
|
397
|
+
|
|
398
|
+
| Tone | Default | Compact |
|
|
399
|
+
| --------------- | ------- | ------- |
|
|
400
|
+
| `none` | 0 | 0 |
|
|
401
|
+
| `micro` | 2px | 2px |
|
|
402
|
+
| `tiny` | 4px | 2px |
|
|
403
|
+
| `tiny-fixed` | 4px | 4px |
|
|
404
|
+
| `tight` | 6px | 4px |
|
|
405
|
+
| `tight-fixed` | 6px | 6px |
|
|
406
|
+
| `base` | 8px | 4px |
|
|
407
|
+
| `base-fixed` | 8px | 8px |
|
|
408
|
+
| `cozy` | 10px | 8px |
|
|
409
|
+
| `comfort` | 12px | 10px |
|
|
410
|
+
| `comfort-fixed` | 12px | 12px |
|
|
411
|
+
| `roomy` | 14px | 12px |
|
|
412
|
+
| `spacious` | 16px | 14px |
|
|
413
|
+
| `open` | 20px | 16px |
|
|
414
|
+
| `relaxed` | 24px | 20px |
|
|
415
|
+
| `airy` | 28px | 24px |
|
|
416
|
+
| `breath` | 32px | 28px |
|
|
417
|
+
| `loose` | 36px | 32px |
|
|
418
|
+
| `wide` | 40px | 36px |
|
|
419
|
+
| `max` | 48px | 40px |
|
|
420
|
+
| `ultra` | 64px | 56px |
|
|
421
|
+
| `xultra` | 80px | 76px |
|
|
422
|
+
|
|
423
|
+
> 注意：TypeScript `HorizontalPaddingTone` 型別不含 `cozy`、`open`、`ultra`、`xultra`，但 SCSS 實作有這些 tone。
|
|
424
|
+
|
|
425
|
+
#### 垂直 Tones
|
|
426
|
+
|
|
427
|
+
| Tone | Default | Compact |
|
|
428
|
+
| ------------- | ------- | ------- |
|
|
429
|
+
| `none` | 0 | 0 |
|
|
430
|
+
| `micro` | 2px | 2px |
|
|
431
|
+
| `tiny` | 4px | 2px |
|
|
432
|
+
| `tight` | 6px | 4px |
|
|
433
|
+
| `tight-fixed` | 6px | 6px |
|
|
434
|
+
| `base` | 8px | 4px |
|
|
435
|
+
| `base-fixed` | 8px | 8px |
|
|
436
|
+
| `calm` | 10px | 6px |
|
|
437
|
+
| `comfort` | 12px | 8px |
|
|
438
|
+
| `roomy` | 14px | 10px |
|
|
439
|
+
| `spacious` | 16px | 12px |
|
|
440
|
+
| `generous` | 20px | 16px |
|
|
441
|
+
| `relaxed` | 24px | 20px |
|
|
442
|
+
| `airy` | 28px | 24px |
|
|
443
|
+
| `breath` | 32px | 28px |
|
|
444
|
+
| `loose` | 36px | 32px |
|
|
445
|
+
| `wide` | 40px | 36px |
|
|
446
|
+
| `max` | 48px | 44px |
|
|
447
|
+
| `ultra` | 68px | 64px |
|
|
448
|
+
|
|
449
|
+
> 注意：TypeScript `VerticalPaddingTone` 型別不含 `tight-fixed`、`base-fixed`、`airy`、`breath`、`loose`、`wide`、`max`、`ultra`，但 SCSS 實作有這些 tone。
|
|
450
|
+
|
|
451
|
+
### CSS 變數格式
|
|
452
|
+
|
|
453
|
+
```
|
|
454
|
+
--mzn-spacing-size-element-{tone}
|
|
455
|
+
--mzn-spacing-size-container-{tone}
|
|
456
|
+
--mzn-spacing-gap-{tone}
|
|
457
|
+
--mzn-spacing-padding-horizontal-{tone}
|
|
458
|
+
--mzn-spacing-padding-vertical-{tone}
|
|
459
|
+
```
|
|
460
|
+
|
|
461
|
+
---
|
|
462
|
+
|
|
463
|
+
## 字體排版系統
|
|
464
|
+
|
|
465
|
+
### 語意化排版類型
|
|
466
|
+
|
|
467
|
+
共 21 種語意化排版類型：
|
|
468
|
+
|
|
469
|
+
| 類型 | 字級 | 字重 | 說明 |
|
|
470
|
+
| ------------------------- | ---- | -------- | -------------- |
|
|
471
|
+
| `h1` | 24px | semibold | 標題 1 |
|
|
472
|
+
| `h2` | 18px | semibold | 標題 2 |
|
|
473
|
+
| `h3` | 16px | semibold | 標題 3 |
|
|
474
|
+
| `body` | 14px | regular | 內文 |
|
|
475
|
+
| `body-highlight` | 14px | medium | 強調內文 |
|
|
476
|
+
| `body-mono` | 14px | regular | 等寬內文 |
|
|
477
|
+
| `body-mono-highlight` | 14px | medium | 等寬強調內文 |
|
|
478
|
+
| `text-link-body` | 14px | regular | 內文連結 |
|
|
479
|
+
| `text-link-caption` | 12px | regular | 說明文字連結 |
|
|
480
|
+
| `caption` | 12px | regular | 說明文字 |
|
|
481
|
+
| `caption-highlight` | 12px | semibold | 強調說明文字 |
|
|
482
|
+
| `annotation` | 10px | regular | 註解 |
|
|
483
|
+
| `annotation-highlight` | 10px | semibold | 強調註解 |
|
|
484
|
+
| `button` | 14px | regular | 按鈕文字 |
|
|
485
|
+
| `button-highlight` | 14px | medium | 強調按鈕文字 |
|
|
486
|
+
| `input` | 14px | regular | 輸入框文字 |
|
|
487
|
+
| `input-highlight` | 14px | medium | 強調輸入框文字 |
|
|
488
|
+
| `input-mono` | 14px | regular | 等寬輸入框文字 |
|
|
489
|
+
| `label-primary` | 14px | regular | 主要標籤 |
|
|
490
|
+
| `label-primary-highlight` | 14px | medium | 強調主要標籤 |
|
|
491
|
+
| `label-secondary` | 12px | regular | 次要標籤 |
|
|
492
|
+
|
|
493
|
+
### 字重
|
|
494
|
+
|
|
495
|
+
| 字重 | 值 |
|
|
496
|
+
| ---------- | --- |
|
|
497
|
+
| `regular` | 400 |
|
|
498
|
+
| `medium` | 500 |
|
|
499
|
+
| `semibold` | 600 |
|
|
500
|
+
|
|
501
|
+
### CSS 變數格式
|
|
502
|
+
|
|
503
|
+
```
|
|
504
|
+
--mzn-typography-{type}-font-size
|
|
505
|
+
--mzn-typography-{type}-font-weight
|
|
506
|
+
--mzn-typography-{type}-line-height
|
|
507
|
+
--mzn-typography-{type}-letter-spacing
|
|
508
|
+
```
|
|
509
|
+
|
|
510
|
+
---
|
|
511
|
+
|
|
512
|
+
## 圓角
|
|
513
|
+
|
|
514
|
+
| Tone | 值 |
|
|
515
|
+
| ------- | ------------------ |
|
|
516
|
+
| `none` | 0 |
|
|
517
|
+
| `tiny` | 0.125rem (2px) |
|
|
518
|
+
| `base` | 0.25rem (4px) |
|
|
519
|
+
| `roomy` | 0.5rem (8px) |
|
|
520
|
+
| `full` | 62.4375rem (999px) |
|
|
521
|
+
|
|
522
|
+
TypeScript 型別：`RadiusSize = 'none' | 'tiny' | 'base' | 'roomy' | 'full'`
|
|
523
|
+
|
|
524
|
+
CSS 變數：`--mzn-radius-{tone}`
|
|
525
|
+
|
|
526
|
+
---
|
|
527
|
+
|
|
528
|
+
## 陰影
|
|
529
|
+
|
|
530
|
+
使用 Semantic 陰影色：
|
|
531
|
+
|
|
532
|
+
| Tone | 說明 |
|
|
533
|
+
| ------------- | ------------ |
|
|
534
|
+
| `dark` | 深色陰影 |
|
|
535
|
+
| `dark-light` | 淡深色陰影 |
|
|
536
|
+
| `dark-faint` | 極淡深色陰影 |
|
|
537
|
+
| `dark-ghost` | 幽靈深色陰影 |
|
|
538
|
+
| `light-faint` | 極淡亮色陰影 |
|
|
539
|
+
| `brand` | 品牌陰影 |
|
|
540
|
+
|
|
541
|
+
---
|
|
542
|
+
|
|
543
|
+
## 尺寸
|
|
544
|
+
|
|
545
|
+
通用 Size：
|
|
546
|
+
|
|
547
|
+
| 尺寸 | 說明 |
|
|
548
|
+
| ------- | -------- |
|
|
549
|
+
| `main` | 主要尺寸 |
|
|
550
|
+
| `sub` | 次要尺寸 |
|
|
551
|
+
| `minor` | 較小尺寸 |
|
|
552
|
+
|
|
553
|
+
---
|
|
554
|
+
|
|
555
|
+
## Z-Index
|
|
556
|
+
|
|
557
|
+
從基底值（預設 1000）開始，依序遞增。
|
|
558
|
+
|
|
559
|
+
| 名稱 | 預設值 | 說明 |
|
|
560
|
+
| ---------- | ------ | ------------------------- |
|
|
561
|
+
| `base` | 1001 | 基底層 |
|
|
562
|
+
| `alert` | 1002 | AlertBanner 層 |
|
|
563
|
+
| `drawer` | 1003 | Drawer 層 |
|
|
564
|
+
| `modal` | 1004 | Modal 層 |
|
|
565
|
+
| `popover` | 1005 | Popover / Tooltip 層 |
|
|
566
|
+
| `feedback` | 1006 | Message / Notification 層 |
|
|
567
|
+
|
|
568
|
+
CSS 變數：`--mzn-z-index-{name}`
|
|
569
|
+
|
|
570
|
+
SCSS 用法：
|
|
571
|
+
|
|
572
|
+
```scss
|
|
573
|
+
@use '~@mezzanine-ui/system/z-index' as z-index;
|
|
574
|
+
|
|
575
|
+
.my-overlay {
|
|
576
|
+
z-index: z-index.get(modal);
|
|
577
|
+
}
|
|
578
|
+
```
|
|
579
|
+
|
|
580
|
+
---
|
|
581
|
+
|
|
582
|
+
## 使用方式
|
|
583
|
+
|
|
584
|
+
### 在 SCSS 中使用
|
|
585
|
+
|
|
586
|
+
`_system.scss` 提供兩個主要 mixin：
|
|
587
|
+
|
|
588
|
+
- `mzn-system.colors($mode, $semantic, $primitives)` — 設定色彩相關的 CSS 變數（palette）
|
|
589
|
+
- `mzn-system.common-variables($mode, $options)` — 設定間距、字體、圓角、z-index 等 CSS 變數
|
|
590
|
+
|
|
591
|
+
```scss
|
|
592
|
+
@use '~@mezzanine-ui/system' as mzn-system;
|
|
593
|
+
@use '~@mezzanine-ui/system/palette' as palette;
|
|
594
|
+
@use '~@mezzanine-ui/system/spacing' as spacing;
|
|
595
|
+
@use '~@mezzanine-ui/system/typography' as typography;
|
|
596
|
+
@use '~@mezzanine-ui/system/radius' as radius;
|
|
597
|
+
|
|
598
|
+
// 設定變數
|
|
599
|
+
:root {
|
|
600
|
+
@include mzn-system.colors('light');
|
|
601
|
+
@include mzn-system.common-variables(default);
|
|
602
|
+
}
|
|
603
|
+
|
|
604
|
+
[data-theme='dark'] {
|
|
605
|
+
@include mzn-system.colors('dark');
|
|
606
|
+
}
|
|
607
|
+
|
|
608
|
+
[data-density='compact'] {
|
|
609
|
+
@include mzn-system.common-variables(compact);
|
|
610
|
+
}
|
|
611
|
+
|
|
612
|
+
// 使用變數
|
|
613
|
+
.my-component {
|
|
614
|
+
// 顏色
|
|
615
|
+
color: palette.semantic-variable(text, brand);
|
|
616
|
+
background-color: palette.semantic-variable(background, base);
|
|
617
|
+
border-color: palette.semantic-variable(border, neutral);
|
|
618
|
+
|
|
619
|
+
// 間距
|
|
620
|
+
padding: spacing.semantic-variable(padding, horizontal, base);
|
|
621
|
+
gap: spacing.semantic-variable(gap, base);
|
|
622
|
+
|
|
623
|
+
// 圓角
|
|
624
|
+
border-radius: radius.variable(base);
|
|
625
|
+
|
|
626
|
+
// 字體排版（mixin）
|
|
627
|
+
@include typography.semantic-variable(body);
|
|
628
|
+
}
|
|
629
|
+
```
|
|
630
|
+
|
|
631
|
+
### 自訂 Palette
|
|
632
|
+
|
|
633
|
+
```scss
|
|
634
|
+
@use '~@mezzanine-ui/system' as mzn-system;
|
|
635
|
+
|
|
636
|
+
$custom-semantic: (
|
|
637
|
+
background: (
|
|
638
|
+
base: (
|
|
639
|
+
light: #f5f5f5,
|
|
640
|
+
dark: #1a1a1a,
|
|
641
|
+
),
|
|
642
|
+
),
|
|
643
|
+
);
|
|
644
|
+
|
|
645
|
+
:root {
|
|
646
|
+
@include mzn-system.colors('light', $custom-semantic);
|
|
647
|
+
}
|
|
648
|
+
```
|
|
649
|
+
|
|
650
|
+
### 自訂 Spacing
|
|
651
|
+
|
|
652
|
+
```scss
|
|
653
|
+
@use '~@mezzanine-ui/system' as mzn-system;
|
|
654
|
+
|
|
655
|
+
$custom-options: (
|
|
656
|
+
spacing: (
|
|
657
|
+
size: (
|
|
658
|
+
element: (
|
|
659
|
+
base: (
|
|
660
|
+
default: 20px,
|
|
661
|
+
compact: 16px,
|
|
662
|
+
),
|
|
663
|
+
),
|
|
664
|
+
),
|
|
665
|
+
),
|
|
666
|
+
);
|
|
667
|
+
|
|
668
|
+
:root {
|
|
669
|
+
@include mzn-system.common-variables(default, $custom-options);
|
|
670
|
+
}
|
|
671
|
+
```
|
package/llms.txt
CHANGED
|
@@ -29,23 +29,29 @@ All tokens are emitted as CSS custom properties (e.g. `--mzn-color-primary`, `--
|
|
|
29
29
|
|
|
30
30
|
## Theme Setup
|
|
31
31
|
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
For manual setup, apply the SCSS mixins in your global stylesheet:
|
|
32
|
+
Apply the SCSS mixins in your global stylesheet:
|
|
35
33
|
|
|
36
34
|
```scss
|
|
37
|
-
@use '@mezzanine-ui/system' as system;
|
|
35
|
+
@use '@mezzanine-ui/system' as mzn-system;
|
|
38
36
|
|
|
39
37
|
:root {
|
|
40
|
-
@include system.common-variables();
|
|
41
|
-
@include system.colors('light');
|
|
38
|
+
@include mzn-system.common-variables('default');
|
|
39
|
+
@include mzn-system.colors('light');
|
|
42
40
|
}
|
|
43
41
|
|
|
44
42
|
[data-theme='dark'] {
|
|
45
|
-
@include system.colors('dark');
|
|
43
|
+
@include mzn-system.colors('dark');
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
[data-density='compact'] {
|
|
47
|
+
@include mzn-system.common-variables('compact');
|
|
46
48
|
}
|
|
47
49
|
```
|
|
48
50
|
|
|
51
|
+
The two public mixins are:
|
|
52
|
+
- `common-variables($mode, $options)` — emits spacing, typography, radius, motion, z-index, and effect tokens. `$mode` is `'default'` or `'compact'`.
|
|
53
|
+
- `colors($mode, $semantic, $primitives)` — emits palette color tokens. `$mode` is `'light'` or `'dark'`.
|
|
54
|
+
|
|
49
55
|
## TypeScript Exports
|
|
50
56
|
|
|
51
57
|
```ts
|
|
@@ -58,6 +64,10 @@ import { toCssVar } from '@mezzanine-ui/system/css';
|
|
|
58
64
|
- `Orientation` — `'horizontal' | 'vertical'`
|
|
59
65
|
- `toCssVar(token)` — converts a token name to its `var(--mzn-...)` CSS variable string
|
|
60
66
|
|
|
67
|
+
## Further Reference
|
|
68
|
+
|
|
69
|
+
- Complete token values (hex colors, spacing scales, typography variants): `packages/system/DESIGN_TOKENS.md`
|
|
70
|
+
|
|
61
71
|
## Consumed By
|
|
62
72
|
|
|
63
73
|
- `@mezzanine-ui/core` — imports SCSS mixins to generate all component stylesheets
|