@qw-ui/tokens 0.3.0-next.4 → 0.3.0-next.40
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 +8 -5
- package/dist/color-architecture.d.ts +139 -2
- package/dist/derive/index.d.ts +2 -2
- package/dist/derive/live-css.d.ts +1 -1
- package/dist/derive/reference.d.ts +62 -13
- package/dist/derive/semantic.d.ts +17 -1
- package/dist/derive/tailwind.d.ts +31 -0
- package/dist/design-doc.d.ts +1 -1
- package/dist/figma/color-contract.d.ts +2 -0
- package/dist/figma/color-snapshot.d.ts +4 -0
- package/dist/index.d.ts +5 -4
- package/dist/index.js +759 -240
- package/dist/index.js.map +1 -1
- package/dist/schema.d.ts +3 -3
- package/dist/tailwind.css +79 -0
- package/dist/tokens.css +257 -218
- package/dist/tokens.json +196 -93
- package/dist/tokens.live.css +127 -9
- package/dist/tokens.ts +198 -130
- package/package.json +2 -1
- package/dist/compat/build.d.ts +0 -14
- package/dist/compat/color.d.ts +0 -8
- package/dist/compat/index.d.ts +0 -5
- package/dist/compat/schema.d.ts +0 -114
package/README.md
CHANGED
|
@@ -4,14 +4,17 @@
|
|
|
4
4
|
|
|
5
5
|
**层级 L1 · 设计令牌**。qw-ui 全链路样式的单一数据源,所有组件颜色/尺寸只允许引用本包派生出的 **T3 Semantic token(`--qw-sem-*`)**,禁止直写字面量。
|
|
6
6
|
|
|
7
|
-
##
|
|
7
|
+
## 三层架构
|
|
8
8
|
|
|
9
9
|
```
|
|
10
|
-
T1 Seed
|
|
11
|
-
|
|
10
|
+
T1 Seed(可选生成参数) ── alias / derive / calibrate ──► T2 Reference
|
|
11
|
+
│
|
|
12
|
+
▼
|
|
13
|
+
T3 Semantic (--qw-sem-*) → Component / Style
|
|
12
14
|
```
|
|
13
15
|
|
|
14
|
-
|
|
16
|
+
T2 是完整机械标尺,可来自 Seed、设计校准、标准常量或外部标准;每条都带 DTCG
|
|
17
|
+
provenance。T3 只引用 T2,组件与业务只碰 T3。
|
|
15
18
|
|
|
16
19
|
## 安装
|
|
17
20
|
|
|
@@ -67,7 +70,7 @@ CSS 里直接用变量:
|
|
|
67
70
|
| `latest`(稳定) | `pnpm add @qw-ui/tokens` | `main` 通道,Release PR review 后发布 |
|
|
68
71
|
| `next`(预发布) | `pnpm add @qw-ui/tokens@next` | `release/next` 通道,高频自增 `x.y.z-next.N` |
|
|
69
72
|
|
|
70
|
-
|
|
73
|
+
9 个公开包 `fixed` 锁步同版本号。npm 发布固定走 `registry.npmjs.org`;内网装依赖走 `registry.anpm.alibaba-inc.com`(tnpm 代理),发布 registry 不要指向内网。流程详见 [development-workflow.md](../../docs/development-workflow.md)。
|
|
71
74
|
|
|
72
75
|
## 仓库 & License
|
|
73
76
|
|
|
@@ -10,6 +10,11 @@ export type T2AlphaKey = (typeof T2_ALPHA_KEYS)[number];
|
|
|
10
10
|
export declare const T2_OKLCH_STEPS: readonly [50, 100, 200, 300, 400, 500, 600, 700, 800, 900];
|
|
11
11
|
export type T2OklchStep = (typeof T2_OKLCH_STEPS)[number];
|
|
12
12
|
export declare const FIGMA_T2_SOLID_SCALE: Record<T1ColorKey, Record<T2OklchStep, string>>;
|
|
13
|
+
/**
|
|
14
|
+
* Figma「Color Token System」T3 语义角色表(60 个,light/dark 均引用 T2 路径)。
|
|
15
|
+
* 与 Figma 节点 22258:49986 逐条对齐;`effect.shadow.*.color` 为复合阴影的颜色
|
|
16
|
+
* 分量(对应 Figma 变量 `--qw-sem-effect-shadow-*-color`)。
|
|
17
|
+
*/
|
|
13
18
|
export declare const FIGMA_T3_COLOR_ROLES: {
|
|
14
19
|
readonly "surface.base": {
|
|
15
20
|
readonly light: "color.white.base";
|
|
@@ -31,6 +36,26 @@ export declare const FIGMA_T3_COLOR_ROLES: {
|
|
|
31
36
|
readonly light: "color.blue.50";
|
|
32
37
|
readonly dark: "color.blue.800";
|
|
33
38
|
};
|
|
39
|
+
readonly "surface.canvas": {
|
|
40
|
+
readonly light: "color.white.base";
|
|
41
|
+
readonly dark: "color.black.900";
|
|
42
|
+
};
|
|
43
|
+
readonly "surface.sunken": {
|
|
44
|
+
readonly light: "color.gray.100";
|
|
45
|
+
readonly dark: "color.gray.800";
|
|
46
|
+
};
|
|
47
|
+
readonly "surface.selected": {
|
|
48
|
+
readonly light: "color.black.a5";
|
|
49
|
+
readonly dark: "color.white.a10";
|
|
50
|
+
};
|
|
51
|
+
readonly "surface.inverse": {
|
|
52
|
+
readonly light: "color.black.800";
|
|
53
|
+
readonly dark: "color.black.800";
|
|
54
|
+
};
|
|
55
|
+
readonly "surface.canvas-subtle": {
|
|
56
|
+
readonly light: "color.gray.50";
|
|
57
|
+
readonly dark: "color.black.900";
|
|
58
|
+
};
|
|
34
59
|
readonly "content.primary": {
|
|
35
60
|
readonly light: "color.black.base";
|
|
36
61
|
readonly dark: "color.white.base";
|
|
@@ -51,6 +76,30 @@ export declare const FIGMA_T3_COLOR_ROLES: {
|
|
|
51
76
|
readonly light: "color.gray.400";
|
|
52
77
|
readonly dark: "color.gray.500";
|
|
53
78
|
};
|
|
79
|
+
readonly "content.disabled": {
|
|
80
|
+
readonly light: "color.black.a30";
|
|
81
|
+
readonly dark: "color.white.a30";
|
|
82
|
+
};
|
|
83
|
+
readonly "content.link": {
|
|
84
|
+
readonly light: "color.blue.700";
|
|
85
|
+
readonly dark: "color.blue.400";
|
|
86
|
+
};
|
|
87
|
+
readonly "content.icon-subtle": {
|
|
88
|
+
readonly light: "color.black.a5";
|
|
89
|
+
readonly dark: "color.white.a10";
|
|
90
|
+
};
|
|
91
|
+
readonly "content.inverse": {
|
|
92
|
+
readonly light: "color.white.base";
|
|
93
|
+
readonly dark: "color.black.base";
|
|
94
|
+
};
|
|
95
|
+
readonly "content.on-solid": {
|
|
96
|
+
readonly light: "color.white.base";
|
|
97
|
+
readonly dark: "color.white.base";
|
|
98
|
+
};
|
|
99
|
+
readonly "content.on-warning-subtle": {
|
|
100
|
+
readonly light: "color.yellow.800";
|
|
101
|
+
readonly dark: "color.yellow.200";
|
|
102
|
+
};
|
|
54
103
|
readonly "border.default": {
|
|
55
104
|
readonly light: "color.gray.100";
|
|
56
105
|
readonly dark: "color.gray.700";
|
|
@@ -63,6 +112,18 @@ export declare const FIGMA_T3_COLOR_ROLES: {
|
|
|
63
112
|
readonly light: "color.brand.base";
|
|
64
113
|
readonly dark: "color.brand.500";
|
|
65
114
|
};
|
|
115
|
+
readonly "border.subtle": {
|
|
116
|
+
readonly light: "color.black.a5";
|
|
117
|
+
readonly dark: "color.white.a5";
|
|
118
|
+
};
|
|
119
|
+
readonly "border.disabled": {
|
|
120
|
+
readonly light: "color.black.a10";
|
|
121
|
+
readonly dark: "color.white.a10";
|
|
122
|
+
};
|
|
123
|
+
readonly "border.on-media": {
|
|
124
|
+
readonly light: "color.white.base";
|
|
125
|
+
readonly dark: "color.white.base";
|
|
126
|
+
};
|
|
66
127
|
readonly "fill.subtle": {
|
|
67
128
|
readonly light: "color.gray.50";
|
|
68
129
|
readonly dark: "color.white.a20";
|
|
@@ -79,6 +140,10 @@ export declare const FIGMA_T3_COLOR_ROLES: {
|
|
|
79
140
|
readonly light: "color.gray.50";
|
|
80
141
|
readonly dark: "color.gray.900";
|
|
81
142
|
};
|
|
143
|
+
readonly "fill.track": {
|
|
144
|
+
readonly light: "color.black.a10";
|
|
145
|
+
readonly dark: "color.white.a20";
|
|
146
|
+
};
|
|
82
147
|
readonly "action.brand": {
|
|
83
148
|
readonly light: "color.brand.base";
|
|
84
149
|
readonly dark: "color.brand.500";
|
|
@@ -95,6 +160,38 @@ export declare const FIGMA_T3_COLOR_ROLES: {
|
|
|
95
160
|
readonly light: "color.white.base";
|
|
96
161
|
readonly dark: "color.black.base";
|
|
97
162
|
};
|
|
163
|
+
readonly "control-action.brand.subtle": {
|
|
164
|
+
readonly light: "color.brand.a10";
|
|
165
|
+
readonly dark: "color.brand.a20";
|
|
166
|
+
};
|
|
167
|
+
readonly "control-action.product.subtle": {
|
|
168
|
+
readonly light: "color.blue.a10";
|
|
169
|
+
readonly dark: "color.blue.a20";
|
|
170
|
+
};
|
|
171
|
+
readonly "control-action.danger.default": {
|
|
172
|
+
readonly light: "color.red.400";
|
|
173
|
+
readonly dark: "color.red.400";
|
|
174
|
+
};
|
|
175
|
+
readonly "control-action.danger.subtle": {
|
|
176
|
+
readonly light: "color.red.a10";
|
|
177
|
+
readonly dark: "color.red.a20";
|
|
178
|
+
};
|
|
179
|
+
readonly "control-action.neutral.subtle": {
|
|
180
|
+
readonly light: "color.black.a5";
|
|
181
|
+
readonly dark: "color.white.a10";
|
|
182
|
+
};
|
|
183
|
+
readonly "control-selection.brand": {
|
|
184
|
+
readonly light: "color.brand.a10";
|
|
185
|
+
readonly dark: "color.brand.a20";
|
|
186
|
+
};
|
|
187
|
+
readonly "control-selection.product": {
|
|
188
|
+
readonly light: "color.blue.a10";
|
|
189
|
+
readonly dark: "color.blue.a20";
|
|
190
|
+
};
|
|
191
|
+
readonly "selection.text-background": {
|
|
192
|
+
readonly light: "color.blue.a20";
|
|
193
|
+
readonly dark: "color.blue.a40";
|
|
194
|
+
};
|
|
98
195
|
readonly "status.success": {
|
|
99
196
|
readonly light: "color.green.base";
|
|
100
197
|
readonly dark: "color.green.base";
|
|
@@ -111,12 +208,52 @@ export declare const FIGMA_T3_COLOR_ROLES: {
|
|
|
111
208
|
readonly light: "color.blue.base";
|
|
112
209
|
readonly dark: "color.blue.600";
|
|
113
210
|
};
|
|
211
|
+
readonly "status.success-subtle": {
|
|
212
|
+
readonly light: "color.green.a10";
|
|
213
|
+
readonly dark: "color.green.a20";
|
|
214
|
+
};
|
|
215
|
+
readonly "status.warning-subtle": {
|
|
216
|
+
readonly light: "color.yellow.a20";
|
|
217
|
+
readonly dark: "color.yellow.a20";
|
|
218
|
+
};
|
|
219
|
+
readonly "status.danger-subtle": {
|
|
220
|
+
readonly light: "color.red.a10";
|
|
221
|
+
readonly dark: "color.red.a20";
|
|
222
|
+
};
|
|
223
|
+
readonly "status.info-subtle": {
|
|
224
|
+
readonly light: "color.blue.a10";
|
|
225
|
+
readonly dark: "color.blue.a20";
|
|
226
|
+
};
|
|
114
227
|
readonly "overlay.scrim": {
|
|
115
228
|
readonly light: "color.black.a50";
|
|
116
229
|
readonly dark: "color.black.a70";
|
|
117
230
|
};
|
|
118
231
|
readonly "overlay.guide": {
|
|
119
|
-
readonly light: "color.
|
|
120
|
-
readonly dark: "color.
|
|
232
|
+
readonly light: "color.blue.a10";
|
|
233
|
+
readonly dark: "color.blue.a20";
|
|
234
|
+
};
|
|
235
|
+
readonly "overlay.media-subtle": {
|
|
236
|
+
readonly light: "color.black.a40";
|
|
237
|
+
readonly dark: "color.black.a40";
|
|
238
|
+
};
|
|
239
|
+
readonly "overlay.media-strong": {
|
|
240
|
+
readonly light: "color.black.a50";
|
|
241
|
+
readonly dark: "color.black.a50";
|
|
242
|
+
};
|
|
243
|
+
readonly shadow: {
|
|
244
|
+
readonly light: "color.black.a10";
|
|
245
|
+
readonly dark: "color.black.a50";
|
|
246
|
+
};
|
|
247
|
+
readonly "effect.shadow.card.color": {
|
|
248
|
+
readonly light: "color.black.a10";
|
|
249
|
+
readonly dark: "color.black.a50";
|
|
250
|
+
};
|
|
251
|
+
readonly "effect.shadow.floating.color": {
|
|
252
|
+
readonly light: "color.black.a10";
|
|
253
|
+
readonly dark: "color.black.a50";
|
|
254
|
+
};
|
|
255
|
+
readonly "effect.shadow.dialog.color": {
|
|
256
|
+
readonly light: "color.black.a10";
|
|
257
|
+
readonly dark: "color.black.a50";
|
|
121
258
|
};
|
|
122
259
|
};
|
package/dist/derive/index.d.ts
CHANGED
|
@@ -4,8 +4,8 @@ export type { Layer } from "./naming.js";
|
|
|
4
4
|
export { ramp, STEPS, L_TARGETS, chromaFactor, contrastRatio } from "./oklch.js";
|
|
5
5
|
export type { Step, Ramp } from "./oklch.js";
|
|
6
6
|
export type { SemanticMode as Mode } from "./semantic.js";
|
|
7
|
-
export type { ReferenceRecipe, ReferenceTokens, ReferenceBuild, Derivation, ShadowLevel, ShadowShape, } from "./reference.js";
|
|
8
|
-
export { buildReference, allReferenceRecipes, evaluateDerivation, seedRefsOf, formatDerivation, seedValueAt, RAMP_COLORS, BLACK_ALPHA, WHITE_ALPHA, RADIUS_FACTORS, FONT_SIZE_FACTORS, DURATION_FACTORS, SHADOW_LEVELS, FONT_FAMILY_KEYS, } from "./reference.js";
|
|
7
|
+
export type { ReferenceRecipe, ReferenceTokens, ReferenceBuild, Derivation, ReferenceSourceKind, ShadowLevel, ShadowShape, } from "./reference.js";
|
|
8
|
+
export { buildReference, allReferenceRecipes, evaluateDerivation, seedRefsOf, sourceKindOf, formatDerivation, seedValueAt, RAMP_COLORS, BLACK_ALPHA, WHITE_ALPHA, RADIUS_FACTORS, FONT_SIZE_FACTORS, DURATION_FACTORS, SHADOW_LEVELS, FONT_FAMILY_KEYS, } from "./reference.js";
|
|
9
9
|
export { buildSemanticStructural, buildSemanticColor, semanticRoleEntries, RADIUS_ROLES, CONTROL_HEIGHT_ROLES, ICON_SIZE_ROLES, INSET_STACK_ROLES, Z_INDEX_ROLES, MOTION_DURATION_ROLES, FONT_FAMILY_ROLES, TYPOGRAPHY_ROLES, TYPOGRAPHY_FIELDS, COLOR_ROLES, SHADOW_COMPOSITE_ROLES, } from "./semantic.js";
|
|
10
10
|
export type { SemanticRoleEntry, ColorRoleRefs, TypographyRole } from "./semantic.js";
|
|
11
11
|
export interface DerivedTokens {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { type Derivation } from "./reference.js";
|
|
2
2
|
import type { Seed } from "../schema.js";
|
|
3
|
-
/** Seed 拍平成 `--qw-seed-*` → CSS
|
|
3
|
+
/** Seed 拍平成 `--qw-seed-*` → CSS 值;T2 仍可包含校准值或标准常量。 */
|
|
4
4
|
export declare function seedCssVars(seed: Seed): Record<string, string>;
|
|
5
5
|
/** 一条 Derivation → 引用 `--qw-seed-*` 的 CSS 原生表达式。 */
|
|
6
6
|
export declare function derivationToCssExpr(d: Derivation): string;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { type Step } from "./oklch.js";
|
|
2
|
-
import { type T2OklchStep } from "../color-architecture.js";
|
|
2
|
+
import { type T1ColorKey, type T2OklchStep } from "../color-architecture.js";
|
|
3
3
|
import type { Seed } from "../schema.js";
|
|
4
4
|
/**
|
|
5
5
|
* T2 Reference(Primitive)派生 —— RFC 0001 §2.1,v3 声明式重构。
|
|
@@ -11,13 +11,26 @@ import type { Seed } from "../schema.js";
|
|
|
11
11
|
* 3. live CSS 生成(derive/live-css.ts,relative color / calc 表达式);
|
|
12
12
|
* 4. Token Studio 的派生公式展示(formatDerivation)。
|
|
13
13
|
*
|
|
14
|
-
* `seedRefs` 由 AST 自动推导(seedRefsOf
|
|
15
|
-
*
|
|
14
|
+
* `sourceKind` 与 `seedRefs` 由 AST 自动推导(sourceKindOf / seedRefsOf);
|
|
15
|
+
* Seed 来源类必须有血缘,标准常量与外部标准则记录来源/理由,不伪造 Seed。
|
|
16
16
|
* 颜色层对齐 Figma `Color/qw` 变量集合:
|
|
17
17
|
* - T1 Seed 为 12 个单色种子;
|
|
18
|
-
* - T2 Reference 为每个 seed 的 A5-A100 Alpha 通道、50-900 OKLCH 设计校准实色色阶、
|
|
18
|
+
* - T2 Reference 为每个 seed 的 A5-A100 Alpha 通道、50-900 OKLCH 设计校准实色色阶、
|
|
19
|
+
* base 引用。T2 Color 不接受零散补色或「色阶 × Alpha」组合。
|
|
19
20
|
*/
|
|
20
21
|
export type ShadowLevel = "sm" | "md" | "lg";
|
|
22
|
+
/**
|
|
23
|
+
* T2 Reference 的规范来源类型。
|
|
24
|
+
*
|
|
25
|
+
* DTCG 不要求 Reference 必须引用 Seed;它只规范 token、group 与 alias 的表达。
|
|
26
|
+
* qw-ui 用本字段补足跨 Figma / code 的血缘治理:
|
|
27
|
+
* - seed-alias:原样承接一个 T1;
|
|
28
|
+
* - seed-derived:通过确定公式从一个或多个 T1 生成;
|
|
29
|
+
* - design-calibrated:保留 T1 设计血缘,但 canonical 值由设计校准拍板;
|
|
30
|
+
* - standard-constant:机械标准或数学端点,不伪造 T1;
|
|
31
|
+
* - external-standard:来自外部平台/规范,由外部来源负责版本化。
|
|
32
|
+
*/
|
|
33
|
+
export type ReferenceSourceKind = "seed-alias" | "seed-derived" | "design-calibrated" | "standard-constant" | "external-standard";
|
|
21
34
|
export type Derivation =
|
|
22
35
|
/** 直通引用 Seed 字段(dimension/number/duration 字符串或数字)。 */
|
|
23
36
|
{
|
|
@@ -86,10 +99,10 @@ export type Derivation =
|
|
|
86
99
|
kind: "cubicBezier";
|
|
87
100
|
seedRef: string;
|
|
88
101
|
}
|
|
89
|
-
/**
|
|
102
|
+
/** canonical 常量(机械标准或数学端点,非主题生成参数)。 */
|
|
90
103
|
| {
|
|
91
104
|
kind: "literal";
|
|
92
|
-
value: string;
|
|
105
|
+
value: string | number;
|
|
93
106
|
}
|
|
94
107
|
/** 阴影档位:形状 = shadow.base × 档位比例,颜色 = alphaStep × 档位倍数。 */
|
|
95
108
|
| {
|
|
@@ -99,8 +112,14 @@ export type Derivation =
|
|
|
99
112
|
export interface ReferenceRecipe {
|
|
100
113
|
path: string[];
|
|
101
114
|
cssVar: string;
|
|
102
|
-
/**
|
|
115
|
+
/** 规范来源;决定 seedRefs 是否必须非空。 */
|
|
116
|
+
sourceKind: ReferenceSourceKind;
|
|
117
|
+
/** 由 derivation 自动推导的可选 Seed 依赖(点分路径),供可追溯性校验与血缘展示。 */
|
|
103
118
|
seedRefs: string[];
|
|
119
|
+
/** 标准、设计稿或外部规范的可读来源;非 Seed 来源类必填。 */
|
|
120
|
+
source?: string;
|
|
121
|
+
/** 为什么该值属于 T2 而不是 T1 的简短依据。 */
|
|
122
|
+
rationale?: string;
|
|
104
123
|
derivation: Derivation;
|
|
105
124
|
}
|
|
106
125
|
/** 拍平后的 CSS 变量映射:cssVar → 字符串值(--qw-ref-* 全集)。 */
|
|
@@ -125,6 +144,8 @@ export interface ReferenceBuild {
|
|
|
125
144
|
}
|
|
126
145
|
/** 按点分路径读 Seed 字段("size.spacing.step" → seed.size.spacing.step)。 */
|
|
127
146
|
export declare function seedValueAt(seed: Seed, dotted: string): unknown;
|
|
147
|
+
/** 从 Seed 颜色点分路径("color.brand")取 T1 键。 */
|
|
148
|
+
export declare function seedKeyOf(seedRef: string): T1ColorKey;
|
|
128
149
|
export declare function formatFontFamily(list: string[]): string;
|
|
129
150
|
/** 阴影档位系数:形状(offset/blur/spread 缩放)+ 颜色(alphaStep 倍数)。 */
|
|
130
151
|
export declare const SHADOW_LEVELS: Record<ShadowLevel, {
|
|
@@ -136,6 +157,8 @@ export declare const SHADOW_LEVELS: Record<ShadowLevel, {
|
|
|
136
157
|
export declare function evaluateDerivation(d: Derivation, seed: Seed): string;
|
|
137
158
|
/** Seed 依赖推导:AST 里出现的全部 Seed 点分路径。 */
|
|
138
159
|
export declare function seedRefsOf(d: Derivation): string[];
|
|
160
|
+
/** Derivation AST → 规范来源分类;作为 Figma/DTCG provenance 的唯一映射口。 */
|
|
161
|
+
export declare function sourceKindOf(d: Derivation): ReferenceSourceKind;
|
|
139
162
|
/** 人读派生公式(Token Studio 展示用)。 */
|
|
140
163
|
export declare function formatDerivation(d: Derivation): string;
|
|
141
164
|
export declare const RAMP_COLORS: readonly ["brand", "black", "white", "gray", "red", "orange", "yellow", "green", "cyan", "blue", "purple", "brown"];
|
|
@@ -149,18 +172,44 @@ export declare const WHITE_ALPHA: ReadonlyArray<readonly [string, number]>;
|
|
|
149
172
|
export declare function buildAlphaScaleRecipes(): ReferenceRecipe[];
|
|
150
173
|
/** 4. 间距刻度 = spacing.step × N (N=1..8)。 */
|
|
151
174
|
export declare function buildSpacingRecipes(): ReferenceRecipe[];
|
|
152
|
-
/** 圆角档位系数(sm/lg 从 base 派生;默认 base=8px → 4/8/14)。 */
|
|
175
|
+
/** 圆角档位系数(sm/lg/xl 从 base 派生;默认 base=8px → 4/8/14/16)。 */
|
|
153
176
|
export declare const RADIUS_FACTORS: {
|
|
154
177
|
readonly sm: 0.5;
|
|
155
178
|
readonly md: 1;
|
|
156
179
|
readonly lg: 1.75;
|
|
180
|
+
readonly xl: 2;
|
|
157
181
|
};
|
|
158
|
-
/** 5. 圆角刻度:sm/md/lg 由 radius.base 按系数派生,full 直通独立裁切基准。 */
|
|
182
|
+
/** 5. 圆角刻度:sm/md/lg/xl 由 radius.base 按系数派生,full 直通独立裁切基准。xl=2×base 对齐治理稿 Radius v2 的 T2 double。 */
|
|
159
183
|
export declare function buildRadiusRecipes(): ReferenceRecipe[];
|
|
160
184
|
/** 6. 控件/图标尺寸:md = base 直通,sm/lg = base ∓ spacing.step × n(控件 ×2、图标 ×1)。 */
|
|
161
185
|
export declare function buildControlIconSizeRecipes(): ReferenceRecipe[];
|
|
162
|
-
/**
|
|
163
|
-
export declare
|
|
186
|
+
/** 描边宽度梯度系数(Figma Stroke v1:Half/Base/Double/Triple = 0.5/1/2/3)。 */
|
|
187
|
+
export declare const STROKE_WIDTH_FACTORS: {
|
|
188
|
+
readonly half: 0.5;
|
|
189
|
+
readonly double: 2;
|
|
190
|
+
readonly triple: 3;
|
|
191
|
+
};
|
|
192
|
+
/** 7. 描边宽度(Figma Stroke v1):base 直通 Seed,half/double/triple 按系数派生。 */
|
|
193
|
+
export declare function buildStrokeWidthRecipes(): ReferenceRecipe[];
|
|
194
|
+
/** 六档动作控件高度(Figma Action Control v1):现有公开尺寸契约,不能由单一 T1 Base 可靠派生,直接定义在 T2(T1 不设 Control Size)。 */
|
|
195
|
+
export declare const ACTION_CONTROL_HEIGHTS: {
|
|
196
|
+
readonly "2xs": 24;
|
|
197
|
+
readonly xs: 28;
|
|
198
|
+
readonly sm: 32;
|
|
199
|
+
readonly md: 36;
|
|
200
|
+
readonly lg: 42;
|
|
201
|
+
readonly xl: 50;
|
|
202
|
+
};
|
|
203
|
+
/** 7b. 动作控件尺寸:六档高度 + 2XS 图标特例(Square 复用同档 Height,不另设 token)。 */
|
|
204
|
+
export declare function buildActionControlRecipes(): ReferenceRecipe[];
|
|
205
|
+
/** Avatar 三档直径(Figma 头像 · Avatar S/M/L = 40/50/58)。 */
|
|
206
|
+
export declare const AVATAR_DIAMETERS: {
|
|
207
|
+
readonly sm: 40;
|
|
208
|
+
readonly md: 50;
|
|
209
|
+
readonly lg: 58;
|
|
210
|
+
};
|
|
211
|
+
/** 7c. 展示类专用尺寸:Avatar 直径(Icon Size 规范要求 Avatar 直径使用自己的语义,禁止借用 Icon/Control 刻度)。 */
|
|
212
|
+
export declare function buildAvatarDiameterRecipes(): ReferenceRecipe[];
|
|
164
213
|
/** 8. 行高(typography 类目):normal 直通 Seed,tight/relaxed = base ∓ 0.25。 */
|
|
165
214
|
export declare function buildLineHeightRecipes(): ReferenceRecipe[];
|
|
166
215
|
/** 9. 禁用态不透明度 —— 直通引用。 */
|
|
@@ -168,9 +217,9 @@ export declare function buildOpacityRecipes(): ReferenceRecipe[];
|
|
|
168
217
|
/** 10. 层级刻度 = zIndex.step × N (N=1..4);角色分配交给 Semantic 层。 */
|
|
169
218
|
export declare function buildZIndexRecipes(): ReferenceRecipe[];
|
|
170
219
|
export declare const FONT_FAMILY_KEYS: readonly ["text", "number", "code", "textMacLatin", "textMacZh", "textMacJa", "textWindowsLatin", "textWindowsZh", "textWindowsJa"];
|
|
171
|
-
/** 字号档位倍数(沿用既定视觉:14px 基准 → 12/16/20/24)。 */
|
|
220
|
+
/** 字号档位倍数(沿用既定视觉:14px 基准 → 11/12/16/20/24;xs=11 对齐治理稿 T2 Font Size 2XS)。 */
|
|
172
221
|
export declare const FONT_SIZE_FACTORS: Record<string, number>;
|
|
173
|
-
/** 11.
|
|
222
|
+
/** 11. 排版原子:字体族来自平台 Seed;字重是机械标准常量;字号按既定倍数派生。 */
|
|
174
223
|
export declare function buildTypographyRecipes(): ReferenceRecipe[];
|
|
175
224
|
/** 动效时长档位倍数。 */
|
|
176
225
|
export declare const DURATION_FACTORS: {
|
|
@@ -14,6 +14,16 @@ export type SemanticMode = "light" | "dark";
|
|
|
14
14
|
export declare const RADIUS_ROLES: Record<string, string>;
|
|
15
15
|
export declare const CONTROL_HEIGHT_ROLES: Record<string, string>;
|
|
16
16
|
export declare const ICON_SIZE_ROLES: Record<string, string>;
|
|
17
|
+
export declare const ACTION_CONTROL_HEIGHT_ROLES: Record<string, string>;
|
|
18
|
+
export declare const ACTION_CONTROL_PADDING_INLINE_ROLES: Record<string, string>;
|
|
19
|
+
export declare const ACTION_CONTROL_ICON_ROLES: Record<string, string>;
|
|
20
|
+
export declare const ACTION_CONTROL_GAP_ROLES: Record<string, string>;
|
|
21
|
+
export declare const BORDER_WIDTH_ROLES: Record<string, string>;
|
|
22
|
+
export declare const DIVIDER_WIDTH_ROLES: Record<string, string>;
|
|
23
|
+
export declare const FOCUS_RING_ROLES: Record<string, string>;
|
|
24
|
+
export declare const INDICATOR_ROLES: Record<string, string>;
|
|
25
|
+
/** 展示类专用尺寸:Avatar 直径三档(Figma 头像 S/M/L)。 */
|
|
26
|
+
export declare const AVATAR_DIAMETER_ROLES: Record<string, string>;
|
|
17
27
|
export declare const INSET_STACK_ROLES: Record<string, string>;
|
|
18
28
|
export declare const Z_INDEX_ROLES: Record<string, string>;
|
|
19
29
|
export declare const MOTION_DURATION_ROLES: Record<string, string>;
|
|
@@ -33,8 +43,14 @@ export interface ColorRoleRefs {
|
|
|
33
43
|
light: string;
|
|
34
44
|
dark: string;
|
|
35
45
|
}
|
|
46
|
+
/**
|
|
47
|
+
* 颜色角色的 Semantic 变量路径:绝大多数角色落在 `--qw-sem-color-*` 下;
|
|
48
|
+
* `effect.shadow.*.color` 是复合阴影的颜色分量,对应 Figma 变量
|
|
49
|
+
* `--qw-sem-effect-shadow-*-color`,不带 `color-` 前缀。
|
|
50
|
+
*/
|
|
51
|
+
export declare function colorRoleSemPath(role: string): string[];
|
|
36
52
|
export declare const COLOR_ROLES: Record<string, ColorRoleRefs>;
|
|
37
|
-
/** 复合阴影角色:形状取 Reference effect.shadow.<level
|
|
53
|
+
/** 复合阴影角色:形状取 Reference effect.shadow.<level>,颜色取各自的 effect.shadow.<role>.color 分量。 */
|
|
38
54
|
export declare const SHADOW_COMPOSITE_ROLES: Record<string, ShadowLevel>;
|
|
39
55
|
export type SemanticRoleEntry = {
|
|
40
56
|
kind: "structural";
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Tailwind v4 适配器 —— dist/tailwind.css 的生成引擎。
|
|
3
|
+
*
|
|
4
|
+
* 把 T3 Semantic 变量映射进 Tailwind v4 的 @theme 命名空间,让工具类
|
|
5
|
+
* (bg-surface-base / text-content-primary / rounded-control / p-inset-md …)
|
|
6
|
+
* 直接吃组件库 token。只映射 T3(--qw-sem-*),--qw-ref-* 永不出现在产物里。
|
|
7
|
+
*
|
|
8
|
+
* 必须用 `@theme inline`:值是对外部变量的引用时,inline 让工具类直接内联
|
|
9
|
+
* var(--qw-sem-*),在使用元素处求值——子树级 [data-qw-mode="dark"] 覆盖才能
|
|
10
|
+
* 生效;非 inline 会在 :root 处解析一次,子树暗色失效。
|
|
11
|
+
*
|
|
12
|
+
* 映射规则(确定性,token 变了产物自动跟):
|
|
13
|
+
* - --qw-sem-color-<x> → --color-<x>
|
|
14
|
+
* - --qw-sem-size-radius-<x> → --radius-<x>
|
|
15
|
+
* - --qw-sem-size-inset-<x> → --spacing-inset-<x>
|
|
16
|
+
* - --qw-sem-size-stack-<x> → --spacing-stack-<x>
|
|
17
|
+
* - --qw-sem-typography-font-family-<x> → --font-<x>
|
|
18
|
+
* - --qw-sem-effect-shadow-<x> → --shadow-<x>
|
|
19
|
+
* - --qw-sem-motion-easing-<x> → --ease-<x>
|
|
20
|
+
*
|
|
21
|
+
* 其余子族(size 的 control-height/icon 等、typography 角色组、motion duration)
|
|
22
|
+
* 无对应 Tailwind 主题命名空间,不映射,消费方直接用 var(--qw-sem-*)。
|
|
23
|
+
* effect 的 shadow-<x>-color 是复合阴影的颜色通道,不是 box-shadow 值,同样不映射。
|
|
24
|
+
*/
|
|
25
|
+
/**
|
|
26
|
+
* 从 derive() 的 flat 变量映射(light 即可——变量名亮暗一致)挑出可映射的
|
|
27
|
+
* T3 token,产出 Tailwind @theme 变量 → `var(--qw-sem-*)` 引用表。
|
|
28
|
+
*/
|
|
29
|
+
export declare function tailwindThemeVars(flat: Record<string, string>): Record<string, string>;
|
|
30
|
+
/** 组装 dist/tailwind.css 文本(消费方需先引入 tokens.css 提供 --qw-sem-* 取值)。 */
|
|
31
|
+
export declare function buildTailwindCss(flat: Record<string, string>): string;
|
package/dist/design-doc.d.ts
CHANGED
|
@@ -5,6 +5,6 @@ export declare function buildReferenceDesignDoc(): Json;
|
|
|
5
5
|
export declare function buildSemanticDesignDoc(): Json;
|
|
6
6
|
/** 生成 design/semantic.color.tokens.json(light/dark 合并视图)。 */
|
|
7
7
|
export declare function buildSemanticColorDesignDoc(): Json;
|
|
8
|
-
/**
|
|
8
|
+
/** 生成文件的文件名 → 生成器映射,供导出脚本与 parity 测试共用。 */
|
|
9
9
|
export declare const GENERATED_DESIGN_DOCS: Record<string, () => Json>;
|
|
10
10
|
export {};
|
|
@@ -10,5 +10,7 @@ export interface FigmaColorTokenValidationResult {
|
|
|
10
10
|
t3: number;
|
|
11
11
|
};
|
|
12
12
|
}
|
|
13
|
+
/** T3 角色全集(qw 路径),由 FIGMA_T3_COLOR_ROLES 投影。 */
|
|
14
|
+
export declare function figmaT3RolePaths(): string[];
|
|
13
15
|
export declare function validateFigmaColorTokens(doc: unknown): FigmaColorTokenValidationResult;
|
|
14
16
|
export declare function assertFigmaColorTokens(doc: unknown): void;
|
package/dist/index.d.ts
CHANGED
|
@@ -5,9 +5,10 @@ export { hexToSeedColor, seedColorToHex, seedColorToCss } from "./color.js";
|
|
|
5
5
|
export type { SeedColorValue } from "./color.js";
|
|
6
6
|
export { FIGMA_COLOR_COLLECTION, FIGMA_COLOR_PREFIX, FIGMA_T1_SEED_HEX, FIGMA_T2_SOLID_SCALE, FIGMA_T3_COLOR_ROLES, T1_COLOR_KEYS, T2_ALPHA_KEYS, T2_ALPHA_STEPS, T2_OKLCH_STEPS, } from "./color-architecture.js";
|
|
7
7
|
export type { T1ColorKey, T2AlphaKey, T2AlphaStep, T2OklchStep } from "./color-architecture.js";
|
|
8
|
-
export { derive, toVar, ramp, STEPS, L_TARGETS, contrastRatio, buildReference, allReferenceRecipes, evaluateDerivation, formatDerivation, seedRefsOf, seedValueAt, buildSemanticStructural, buildSemanticColor, semanticRoleEntries, RAMP_COLORS, COLOR_ROLES, TYPOGRAPHY_ROLES, SHADOW_COMPOSITE_ROLES, } from "./derive/index.js";
|
|
9
|
-
export type { DerivedTokens, Mode, Layer, Step, Ramp, ReferenceRecipe, ReferenceBuild, ReferenceTokens, Derivation, SemanticRoleEntry, ColorRoleRefs, } from "./derive/index.js";
|
|
8
|
+
export { derive, toVar, ramp, STEPS, L_TARGETS, contrastRatio, buildReference, allReferenceRecipes, evaluateDerivation, formatDerivation, seedRefsOf, sourceKindOf, seedValueAt, buildSemanticStructural, buildSemanticColor, semanticRoleEntries, RAMP_COLORS, COLOR_ROLES, TYPOGRAPHY_ROLES, SHADOW_COMPOSITE_ROLES, } from "./derive/index.js";
|
|
9
|
+
export type { DerivedTokens, Mode, Layer, Step, Ramp, ReferenceRecipe, ReferenceBuild, ReferenceTokens, Derivation, ReferenceSourceKind, SemanticRoleEntry, ColorRoleRefs, } from "./derive/index.js";
|
|
10
10
|
export { buildLiveCss, seedCssVars, derivationToCssExpr } from "./derive/live-css.js";
|
|
11
11
|
export type { LiveCssOptions } from "./derive/live-css.js";
|
|
12
|
-
export {
|
|
13
|
-
export
|
|
12
|
+
export { buildFigmaColorSnapshot } from "./figma/color-snapshot.js";
|
|
13
|
+
export { validateFigmaColorTokens, assertFigmaColorTokens, figmaT3RolePaths, } from "./figma/color-contract.js";
|
|
14
|
+
export type { FigmaColorTokenValidationResult } from "./figma/color-contract.js";
|