@qw-ui/tokens 0.3.0-next.4 → 0.3.0-next.6
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 +7 -4
- package/dist/color-architecture.d.ts +153 -3
- package/dist/derive/index.d.ts +2 -2
- package/dist/derive/live-css.d.ts +1 -1
- package/dist/derive/reference.d.ts +73 -13
- package/dist/derive/semantic.d.ts +17 -1
- 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 +6 -5
- package/dist/index.js +863 -241
- package/dist/index.js.map +1 -1
- package/dist/schema.d.ts +3 -3
- package/dist/tokens.css +115 -94
- package/dist/tokens.json +209 -94
- package/dist/tokens.live.css +134 -10
- package/dist/tokens.ts +211 -131
- package/package.json +1 -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
|
|
|
@@ -9,7 +9,25 @@ export type T2AlphaStep = (typeof T2_ALPHA_STEPS)[number];
|
|
|
9
9
|
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
|
+
/**
|
|
13
|
+
* T2 步进锚定 Alpha:锚定 OKLCH 档位实色 + 固定 alpha 的设计校准 rgba
|
|
14
|
+
* (`{seed}/{step}-a{alpha}`,如 `brand/500-a20`)。只声明被 T3 角色消费的条目,
|
|
15
|
+
* 不作为完整刻度生成。
|
|
16
|
+
*/
|
|
17
|
+
export declare const FIGMA_T2_STEP_ALPHA: ReadonlyArray<{
|
|
18
|
+
seed: T1ColorKey;
|
|
19
|
+
step: T2OklchStep;
|
|
20
|
+
alpha: T2AlphaStep;
|
|
21
|
+
}>;
|
|
22
|
+
/** T2 `pure` 步进(标准常量 #000000,OLED 画布用)仅提供给 black。 */
|
|
23
|
+
export declare const T2_PURE_STEP = "pure";
|
|
24
|
+
export declare const T2_PURE_SEEDS: readonly ["black"];
|
|
12
25
|
export declare const FIGMA_T2_SOLID_SCALE: Record<T1ColorKey, Record<T2OklchStep, string>>;
|
|
26
|
+
/**
|
|
27
|
+
* Figma「Color Token System」T3 语义角色表(60 个,light/dark 均引用 T2 路径)。
|
|
28
|
+
* 与 Figma 节点 22258:49986 逐条对齐;`effect.shadow.*.color` 为复合阴影的颜色
|
|
29
|
+
* 分量(对应 Figma 变量 `--qw-sem-effect-shadow-*-color`)。
|
|
30
|
+
*/
|
|
13
31
|
export declare const FIGMA_T3_COLOR_ROLES: {
|
|
14
32
|
readonly "surface.base": {
|
|
15
33
|
readonly light: "color.white.base";
|
|
@@ -31,6 +49,26 @@ export declare const FIGMA_T3_COLOR_ROLES: {
|
|
|
31
49
|
readonly light: "color.blue.50";
|
|
32
50
|
readonly dark: "color.blue.800";
|
|
33
51
|
};
|
|
52
|
+
readonly "surface.canvas": {
|
|
53
|
+
readonly light: "color.white.base";
|
|
54
|
+
readonly dark: "color.black.pure";
|
|
55
|
+
};
|
|
56
|
+
readonly "surface.sunken": {
|
|
57
|
+
readonly light: "color.gray.100";
|
|
58
|
+
readonly dark: "color.gray.800";
|
|
59
|
+
};
|
|
60
|
+
readonly "surface.selected": {
|
|
61
|
+
readonly light: "color.black.a5";
|
|
62
|
+
readonly dark: "color.white.a10";
|
|
63
|
+
};
|
|
64
|
+
readonly "surface.inverse": {
|
|
65
|
+
readonly light: "color.black.800";
|
|
66
|
+
readonly dark: "color.black.800";
|
|
67
|
+
};
|
|
68
|
+
readonly "surface.canvas-subtle": {
|
|
69
|
+
readonly light: "color.gray.50";
|
|
70
|
+
readonly dark: "color.black.pure";
|
|
71
|
+
};
|
|
34
72
|
readonly "content.primary": {
|
|
35
73
|
readonly light: "color.black.base";
|
|
36
74
|
readonly dark: "color.white.base";
|
|
@@ -51,6 +89,30 @@ export declare const FIGMA_T3_COLOR_ROLES: {
|
|
|
51
89
|
readonly light: "color.gray.400";
|
|
52
90
|
readonly dark: "color.gray.500";
|
|
53
91
|
};
|
|
92
|
+
readonly "content.disabled": {
|
|
93
|
+
readonly light: "color.black.a30";
|
|
94
|
+
readonly dark: "color.white.a30";
|
|
95
|
+
};
|
|
96
|
+
readonly "content.link": {
|
|
97
|
+
readonly light: "color.blue.700";
|
|
98
|
+
readonly dark: "color.blue.400";
|
|
99
|
+
};
|
|
100
|
+
readonly "content.icon-subtle": {
|
|
101
|
+
readonly light: "color.black.a5";
|
|
102
|
+
readonly dark: "color.white.a10";
|
|
103
|
+
};
|
|
104
|
+
readonly "content.inverse": {
|
|
105
|
+
readonly light: "color.white.base";
|
|
106
|
+
readonly dark: "color.black.base";
|
|
107
|
+
};
|
|
108
|
+
readonly "content.on-solid": {
|
|
109
|
+
readonly light: "color.white.base";
|
|
110
|
+
readonly dark: "color.white.base";
|
|
111
|
+
};
|
|
112
|
+
readonly "content.on-warning-subtle": {
|
|
113
|
+
readonly light: "color.yellow.800";
|
|
114
|
+
readonly dark: "color.yellow.200";
|
|
115
|
+
};
|
|
54
116
|
readonly "border.default": {
|
|
55
117
|
readonly light: "color.gray.100";
|
|
56
118
|
readonly dark: "color.gray.700";
|
|
@@ -63,6 +125,18 @@ export declare const FIGMA_T3_COLOR_ROLES: {
|
|
|
63
125
|
readonly light: "color.brand.base";
|
|
64
126
|
readonly dark: "color.brand.500";
|
|
65
127
|
};
|
|
128
|
+
readonly "border.subtle": {
|
|
129
|
+
readonly light: "color.black.a5";
|
|
130
|
+
readonly dark: "color.white.a5";
|
|
131
|
+
};
|
|
132
|
+
readonly "border.disabled": {
|
|
133
|
+
readonly light: "color.black.a10";
|
|
134
|
+
readonly dark: "color.white.a10";
|
|
135
|
+
};
|
|
136
|
+
readonly "border.on-media": {
|
|
137
|
+
readonly light: "color.white.base";
|
|
138
|
+
readonly dark: "color.white.base";
|
|
139
|
+
};
|
|
66
140
|
readonly "fill.subtle": {
|
|
67
141
|
readonly light: "color.gray.50";
|
|
68
142
|
readonly dark: "color.white.a20";
|
|
@@ -79,6 +153,10 @@ export declare const FIGMA_T3_COLOR_ROLES: {
|
|
|
79
153
|
readonly light: "color.gray.50";
|
|
80
154
|
readonly dark: "color.gray.900";
|
|
81
155
|
};
|
|
156
|
+
readonly "fill.track": {
|
|
157
|
+
readonly light: "color.black.a10";
|
|
158
|
+
readonly dark: "color.white.a20";
|
|
159
|
+
};
|
|
82
160
|
readonly "action.brand": {
|
|
83
161
|
readonly light: "color.brand.base";
|
|
84
162
|
readonly dark: "color.brand.500";
|
|
@@ -89,12 +167,44 @@ export declare const FIGMA_T3_COLOR_ROLES: {
|
|
|
89
167
|
};
|
|
90
168
|
readonly "action.selected": {
|
|
91
169
|
readonly light: "color.blue.a20";
|
|
92
|
-
readonly dark: "color.blue.a40";
|
|
170
|
+
readonly dark: "color.blue.600-a40";
|
|
93
171
|
};
|
|
94
172
|
readonly "action.inverse": {
|
|
95
173
|
readonly light: "color.white.base";
|
|
96
174
|
readonly dark: "color.black.base";
|
|
97
175
|
};
|
|
176
|
+
readonly "control-action.brand.subtle": {
|
|
177
|
+
readonly light: "color.brand.a10";
|
|
178
|
+
readonly dark: "color.brand.500-a20";
|
|
179
|
+
};
|
|
180
|
+
readonly "control-action.product.subtle": {
|
|
181
|
+
readonly light: "color.blue.a10";
|
|
182
|
+
readonly dark: "color.blue.600-a20";
|
|
183
|
+
};
|
|
184
|
+
readonly "control-action.danger.default": {
|
|
185
|
+
readonly light: "color.red.400";
|
|
186
|
+
readonly dark: "color.red.400";
|
|
187
|
+
};
|
|
188
|
+
readonly "control-action.danger.subtle": {
|
|
189
|
+
readonly light: "color.red.400-a10";
|
|
190
|
+
readonly dark: "color.red.400-a20";
|
|
191
|
+
};
|
|
192
|
+
readonly "control-action.neutral.subtle": {
|
|
193
|
+
readonly light: "color.black.a5";
|
|
194
|
+
readonly dark: "color.white.a10";
|
|
195
|
+
};
|
|
196
|
+
readonly "control-selection.brand": {
|
|
197
|
+
readonly light: "color.brand.a10";
|
|
198
|
+
readonly dark: "color.brand.500-a20";
|
|
199
|
+
};
|
|
200
|
+
readonly "control-selection.product": {
|
|
201
|
+
readonly light: "color.blue.a10";
|
|
202
|
+
readonly dark: "color.blue.600-a20";
|
|
203
|
+
};
|
|
204
|
+
readonly "selection.text-background": {
|
|
205
|
+
readonly light: "color.blue.a20";
|
|
206
|
+
readonly dark: "color.blue.600-a40";
|
|
207
|
+
};
|
|
98
208
|
readonly "status.success": {
|
|
99
209
|
readonly light: "color.green.base";
|
|
100
210
|
readonly dark: "color.green.base";
|
|
@@ -111,12 +221,52 @@ export declare const FIGMA_T3_COLOR_ROLES: {
|
|
|
111
221
|
readonly light: "color.blue.base";
|
|
112
222
|
readonly dark: "color.blue.600";
|
|
113
223
|
};
|
|
224
|
+
readonly "status.success-subtle": {
|
|
225
|
+
readonly light: "color.green.a10";
|
|
226
|
+
readonly dark: "color.green.a20";
|
|
227
|
+
};
|
|
228
|
+
readonly "status.warning-subtle": {
|
|
229
|
+
readonly light: "color.yellow.a20";
|
|
230
|
+
readonly dark: "color.yellow.a20";
|
|
231
|
+
};
|
|
232
|
+
readonly "status.danger-subtle": {
|
|
233
|
+
readonly light: "color.red.400-a10";
|
|
234
|
+
readonly dark: "color.red.400-a20";
|
|
235
|
+
};
|
|
236
|
+
readonly "status.info-subtle": {
|
|
237
|
+
readonly light: "color.blue.a10";
|
|
238
|
+
readonly dark: "color.blue.600-a20";
|
|
239
|
+
};
|
|
114
240
|
readonly "overlay.scrim": {
|
|
115
241
|
readonly light: "color.black.a50";
|
|
116
242
|
readonly dark: "color.black.a70";
|
|
117
243
|
};
|
|
118
244
|
readonly "overlay.guide": {
|
|
119
|
-
readonly light: "color.
|
|
120
|
-
readonly dark: "color.
|
|
245
|
+
readonly light: "color.blue.a10";
|
|
246
|
+
readonly dark: "color.blue.600-a20";
|
|
247
|
+
};
|
|
248
|
+
readonly "overlay.media-subtle": {
|
|
249
|
+
readonly light: "color.black.a40";
|
|
250
|
+
readonly dark: "color.black.a40";
|
|
251
|
+
};
|
|
252
|
+
readonly "overlay.media-strong": {
|
|
253
|
+
readonly light: "color.black.a50";
|
|
254
|
+
readonly dark: "color.black.a50";
|
|
255
|
+
};
|
|
256
|
+
readonly shadow: {
|
|
257
|
+
readonly light: "color.black.a10";
|
|
258
|
+
readonly dark: "color.black.a50";
|
|
259
|
+
};
|
|
260
|
+
readonly "effect.shadow.card.color": {
|
|
261
|
+
readonly light: "color.black.a10";
|
|
262
|
+
readonly dark: "color.black.a50";
|
|
263
|
+
};
|
|
264
|
+
readonly "effect.shadow.floating.color": {
|
|
265
|
+
readonly light: "color.black.a10";
|
|
266
|
+
readonly dark: "color.black.a50";
|
|
267
|
+
};
|
|
268
|
+
readonly "effect.shadow.dialog.color": {
|
|
269
|
+
readonly light: "color.black.a10";
|
|
270
|
+
readonly dark: "color.black.a50";
|
|
121
271
|
};
|
|
122
272
|
};
|
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 引用,以及少量补充原语(步进锚定 Alpha `{seed}/{step}-a{alpha}`、black/pure 标准常量)。
|
|
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
|
{
|
|
@@ -69,6 +82,13 @@ export type Derivation =
|
|
|
69
82
|
seedRef: string;
|
|
70
83
|
alpha: number;
|
|
71
84
|
}
|
|
85
|
+
/** Figma 校准的步进锚定 Alpha:OKLCH 档位实色 + 固定 alpha(如 brand/500-a20)。 */
|
|
86
|
+
| {
|
|
87
|
+
kind: "stepAlpha";
|
|
88
|
+
seedRef: string;
|
|
89
|
+
step: T2OklchStep;
|
|
90
|
+
alpha: number;
|
|
91
|
+
}
|
|
72
92
|
/** 旧版纯黑/纯白透明度工具刻度。保留求值器兼容,不再由 T2 主链路生成。 */
|
|
73
93
|
| {
|
|
74
94
|
kind: "alphaScale";
|
|
@@ -86,10 +106,10 @@ export type Derivation =
|
|
|
86
106
|
kind: "cubicBezier";
|
|
87
107
|
seedRef: string;
|
|
88
108
|
}
|
|
89
|
-
/**
|
|
109
|
+
/** canonical 常量(机械标准或数学端点,非主题生成参数)。 */
|
|
90
110
|
| {
|
|
91
111
|
kind: "literal";
|
|
92
|
-
value: string;
|
|
112
|
+
value: string | number;
|
|
93
113
|
}
|
|
94
114
|
/** 阴影档位:形状 = shadow.base × 档位比例,颜色 = alphaStep × 档位倍数。 */
|
|
95
115
|
| {
|
|
@@ -99,8 +119,14 @@ export type Derivation =
|
|
|
99
119
|
export interface ReferenceRecipe {
|
|
100
120
|
path: string[];
|
|
101
121
|
cssVar: string;
|
|
102
|
-
/**
|
|
122
|
+
/** 规范来源;决定 seedRefs 是否必须非空。 */
|
|
123
|
+
sourceKind: ReferenceSourceKind;
|
|
124
|
+
/** 由 derivation 自动推导的可选 Seed 依赖(点分路径),供可追溯性校验与血缘展示。 */
|
|
103
125
|
seedRefs: string[];
|
|
126
|
+
/** 标准、设计稿或外部规范的可读来源;非 Seed 来源类必填。 */
|
|
127
|
+
source?: string;
|
|
128
|
+
/** 为什么该值属于 T2 而不是 T1 的简短依据。 */
|
|
129
|
+
rationale?: string;
|
|
104
130
|
derivation: Derivation;
|
|
105
131
|
}
|
|
106
132
|
/** 拍平后的 CSS 变量映射:cssVar → 字符串值(--qw-ref-* 全集)。 */
|
|
@@ -125,6 +151,10 @@ export interface ReferenceBuild {
|
|
|
125
151
|
}
|
|
126
152
|
/** 按点分路径读 Seed 字段("size.spacing.step" → seed.size.spacing.step)。 */
|
|
127
153
|
export declare function seedValueAt(seed: Seed, dotted: string): unknown;
|
|
154
|
+
/** 从 Seed 颜色点分路径("color.brand")取 T1 键。 */
|
|
155
|
+
export declare function seedKeyOf(seedRef: string): T1ColorKey;
|
|
156
|
+
/** 步进锚定 Alpha 的求值:FIGMA_T2_SOLID_SCALE 档位实色 + alpha → rgba。 */
|
|
157
|
+
export declare function stepAlphaCss(seed: T1ColorKey, step: T2OklchStep, alpha: number): string;
|
|
128
158
|
export declare function formatFontFamily(list: string[]): string;
|
|
129
159
|
/** 阴影档位系数:形状(offset/blur/spread 缩放)+ 颜色(alphaStep 倍数)。 */
|
|
130
160
|
export declare const SHADOW_LEVELS: Record<ShadowLevel, {
|
|
@@ -136,11 +166,15 @@ export declare const SHADOW_LEVELS: Record<ShadowLevel, {
|
|
|
136
166
|
export declare function evaluateDerivation(d: Derivation, seed: Seed): string;
|
|
137
167
|
/** Seed 依赖推导:AST 里出现的全部 Seed 点分路径。 */
|
|
138
168
|
export declare function seedRefsOf(d: Derivation): string[];
|
|
169
|
+
/** Derivation AST → 规范来源分类;作为 Figma/DTCG provenance 的唯一映射口。 */
|
|
170
|
+
export declare function sourceKindOf(d: Derivation): ReferenceSourceKind;
|
|
139
171
|
/** 人读派生公式(Token Studio 展示用)。 */
|
|
140
172
|
export declare function formatDerivation(d: Derivation): string;
|
|
141
173
|
export declare const RAMP_COLORS: readonly ["brand", "black", "white", "gray", "red", "orange", "yellow", "green", "cyan", "blue", "purple", "brown"];
|
|
142
174
|
/** 1. 12 个 Seed ×(A5-A100 Alpha 通道 + 50-900 Figma OKLCH 校准色阶 + base)。 */
|
|
143
175
|
export declare function buildColorRampRecipes(): ReferenceRecipe[];
|
|
176
|
+
/** 2. Figma T2 补充原语:步进锚定 Alpha(仅被 T3 消费的条目)+ black/pure 标准常量。 */
|
|
177
|
+
export declare function buildColorExtraRecipes(): ReferenceRecipe[];
|
|
144
178
|
/** @deprecated Figma T2 已不再使用 neutral 0/1000 端点;保留给历史迁移脚本。 */
|
|
145
179
|
export declare function buildNeutralEndpointRecipes(): ReferenceRecipe[];
|
|
146
180
|
export declare const BLACK_ALPHA: ReadonlyArray<readonly [string, number]>;
|
|
@@ -149,18 +183,44 @@ export declare const WHITE_ALPHA: ReadonlyArray<readonly [string, number]>;
|
|
|
149
183
|
export declare function buildAlphaScaleRecipes(): ReferenceRecipe[];
|
|
150
184
|
/** 4. 间距刻度 = spacing.step × N (N=1..8)。 */
|
|
151
185
|
export declare function buildSpacingRecipes(): ReferenceRecipe[];
|
|
152
|
-
/** 圆角档位系数(sm/lg 从 base 派生;默认 base=8px → 4/8/14)。 */
|
|
186
|
+
/** 圆角档位系数(sm/lg/xl 从 base 派生;默认 base=8px → 4/8/14/16)。 */
|
|
153
187
|
export declare const RADIUS_FACTORS: {
|
|
154
188
|
readonly sm: 0.5;
|
|
155
189
|
readonly md: 1;
|
|
156
190
|
readonly lg: 1.75;
|
|
191
|
+
readonly xl: 2;
|
|
157
192
|
};
|
|
158
|
-
/** 5. 圆角刻度:sm/md/lg 由 radius.base 按系数派生,full 直通独立裁切基准。 */
|
|
193
|
+
/** 5. 圆角刻度:sm/md/lg/xl 由 radius.base 按系数派生,full 直通独立裁切基准。xl=2×base 对齐治理稿 Radius v2 的 T2 double。 */
|
|
159
194
|
export declare function buildRadiusRecipes(): ReferenceRecipe[];
|
|
160
195
|
/** 6. 控件/图标尺寸:md = base 直通,sm/lg = base ∓ spacing.step × n(控件 ×2、图标 ×1)。 */
|
|
161
196
|
export declare function buildControlIconSizeRecipes(): ReferenceRecipe[];
|
|
162
|
-
/**
|
|
163
|
-
export declare
|
|
197
|
+
/** 描边宽度梯度系数(Figma Stroke v1:Half/Base/Double/Triple = 0.5/1/2/3)。 */
|
|
198
|
+
export declare const STROKE_WIDTH_FACTORS: {
|
|
199
|
+
readonly half: 0.5;
|
|
200
|
+
readonly double: 2;
|
|
201
|
+
readonly triple: 3;
|
|
202
|
+
};
|
|
203
|
+
/** 7. 描边宽度(Figma Stroke v1):base 直通 Seed,half/double/triple 按系数派生。 */
|
|
204
|
+
export declare function buildStrokeWidthRecipes(): ReferenceRecipe[];
|
|
205
|
+
/** 六档动作控件高度(Figma Action Control v1):现有公开尺寸契约,不能由单一 T1 Base 可靠派生,直接定义在 T2(T1 不设 Control Size)。 */
|
|
206
|
+
export declare const ACTION_CONTROL_HEIGHTS: {
|
|
207
|
+
readonly "2xs": 24;
|
|
208
|
+
readonly xs: 28;
|
|
209
|
+
readonly sm: 32;
|
|
210
|
+
readonly md: 36;
|
|
211
|
+
readonly lg: 42;
|
|
212
|
+
readonly xl: 50;
|
|
213
|
+
};
|
|
214
|
+
/** 7b. 动作控件尺寸:六档高度 + 2XS 图标特例(Square 复用同档 Height,不另设 token)。 */
|
|
215
|
+
export declare function buildActionControlRecipes(): ReferenceRecipe[];
|
|
216
|
+
/** Avatar 三档直径(Figma 头像 · Avatar S/M/L = 40/50/58)。 */
|
|
217
|
+
export declare const AVATAR_DIAMETERS: {
|
|
218
|
+
readonly sm: 40;
|
|
219
|
+
readonly md: 50;
|
|
220
|
+
readonly lg: 58;
|
|
221
|
+
};
|
|
222
|
+
/** 7c. 展示类专用尺寸:Avatar 直径(Icon Size 规范要求 Avatar 直径使用自己的语义,禁止借用 Icon/Control 刻度)。 */
|
|
223
|
+
export declare function buildAvatarDiameterRecipes(): ReferenceRecipe[];
|
|
164
224
|
/** 8. 行高(typography 类目):normal 直通 Seed,tight/relaxed = base ∓ 0.25。 */
|
|
165
225
|
export declare function buildLineHeightRecipes(): ReferenceRecipe[];
|
|
166
226
|
/** 9. 禁用态不透明度 —— 直通引用。 */
|
|
@@ -168,9 +228,9 @@ export declare function buildOpacityRecipes(): ReferenceRecipe[];
|
|
|
168
228
|
/** 10. 层级刻度 = zIndex.step × N (N=1..4);角色分配交给 Semantic 层。 */
|
|
169
229
|
export declare function buildZIndexRecipes(): ReferenceRecipe[];
|
|
170
230
|
export declare const FONT_FAMILY_KEYS: readonly ["text", "number", "code", "textMacLatin", "textMacZh", "textMacJa", "textWindowsLatin", "textWindowsZh", "textWindowsJa"];
|
|
171
|
-
/** 字号档位倍数(沿用既定视觉:14px 基准 → 12/16/20/24)。 */
|
|
231
|
+
/** 字号档位倍数(沿用既定视觉:14px 基准 → 11/12/16/20/24;xs=11 对齐治理稿 T2 Font Size 2XS)。 */
|
|
172
232
|
export declare const FONT_SIZE_FACTORS: Record<string, number>;
|
|
173
|
-
/** 11.
|
|
233
|
+
/** 11. 排版原子:字体族来自平台 Seed;字重是机械标准常量;字号按既定倍数派生。 */
|
|
174
234
|
export declare function buildTypographyRecipes(): ReferenceRecipe[];
|
|
175
235
|
/** 动效时长档位倍数。 */
|
|
176
236
|
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";
|
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
|
@@ -3,11 +3,12 @@ export { SeedSchema, validateSeed } from "./schema.js";
|
|
|
3
3
|
export type { Seed, SeedInput } from "./schema.js";
|
|
4
4
|
export { hexToSeedColor, seedColorToHex, seedColorToCss } from "./color.js";
|
|
5
5
|
export type { SeedColorValue } from "./color.js";
|
|
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";
|
|
6
|
+
export { FIGMA_COLOR_COLLECTION, FIGMA_COLOR_PREFIX, FIGMA_T1_SEED_HEX, FIGMA_T2_SOLID_SCALE, FIGMA_T2_STEP_ALPHA, FIGMA_T3_COLOR_ROLES, T1_COLOR_KEYS, T2_ALPHA_KEYS, T2_ALPHA_STEPS, T2_OKLCH_STEPS, T2_PURE_SEEDS, T2_PURE_STEP, } 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";
|