@qw-ui/tokens 0.3.0-next.6 → 0.3.0-next.8
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/color-architecture.d.ts +14 -27
- package/dist/derive/reference.d.ts +1 -12
- package/dist/index.d.ts +1 -1
- package/dist/index.js +19 -122
- package/dist/index.js.map +1 -1
- package/dist/tokens.css +11 -12
- package/dist/tokens.json +14 -26
- package/dist/tokens.live.css +14 -20
- package/dist/tokens.ts +14 -26
- package/package.json +1 -1
|
@@ -9,19 +9,6 @@ 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"];
|
|
25
12
|
export declare const FIGMA_T2_SOLID_SCALE: Record<T1ColorKey, Record<T2OklchStep, string>>;
|
|
26
13
|
/**
|
|
27
14
|
* Figma「Color Token System」T3 语义角色表(60 个,light/dark 均引用 T2 路径)。
|
|
@@ -51,7 +38,7 @@ export declare const FIGMA_T3_COLOR_ROLES: {
|
|
|
51
38
|
};
|
|
52
39
|
readonly "surface.canvas": {
|
|
53
40
|
readonly light: "color.white.base";
|
|
54
|
-
readonly dark: "color.black.
|
|
41
|
+
readonly dark: "color.black.900";
|
|
55
42
|
};
|
|
56
43
|
readonly "surface.sunken": {
|
|
57
44
|
readonly light: "color.gray.100";
|
|
@@ -67,7 +54,7 @@ export declare const FIGMA_T3_COLOR_ROLES: {
|
|
|
67
54
|
};
|
|
68
55
|
readonly "surface.canvas-subtle": {
|
|
69
56
|
readonly light: "color.gray.50";
|
|
70
|
-
readonly dark: "color.black.
|
|
57
|
+
readonly dark: "color.black.900";
|
|
71
58
|
};
|
|
72
59
|
readonly "content.primary": {
|
|
73
60
|
readonly light: "color.black.base";
|
|
@@ -167,7 +154,7 @@ export declare const FIGMA_T3_COLOR_ROLES: {
|
|
|
167
154
|
};
|
|
168
155
|
readonly "action.selected": {
|
|
169
156
|
readonly light: "color.blue.a20";
|
|
170
|
-
readonly dark: "color.blue.
|
|
157
|
+
readonly dark: "color.blue.a40";
|
|
171
158
|
};
|
|
172
159
|
readonly "action.inverse": {
|
|
173
160
|
readonly light: "color.white.base";
|
|
@@ -175,19 +162,19 @@ export declare const FIGMA_T3_COLOR_ROLES: {
|
|
|
175
162
|
};
|
|
176
163
|
readonly "control-action.brand.subtle": {
|
|
177
164
|
readonly light: "color.brand.a10";
|
|
178
|
-
readonly dark: "color.brand.
|
|
165
|
+
readonly dark: "color.brand.a20";
|
|
179
166
|
};
|
|
180
167
|
readonly "control-action.product.subtle": {
|
|
181
168
|
readonly light: "color.blue.a10";
|
|
182
|
-
readonly dark: "color.blue.
|
|
169
|
+
readonly dark: "color.blue.a20";
|
|
183
170
|
};
|
|
184
171
|
readonly "control-action.danger.default": {
|
|
185
172
|
readonly light: "color.red.400";
|
|
186
173
|
readonly dark: "color.red.400";
|
|
187
174
|
};
|
|
188
175
|
readonly "control-action.danger.subtle": {
|
|
189
|
-
readonly light: "color.red.
|
|
190
|
-
readonly dark: "color.red.
|
|
176
|
+
readonly light: "color.red.a10";
|
|
177
|
+
readonly dark: "color.red.a20";
|
|
191
178
|
};
|
|
192
179
|
readonly "control-action.neutral.subtle": {
|
|
193
180
|
readonly light: "color.black.a5";
|
|
@@ -195,15 +182,15 @@ export declare const FIGMA_T3_COLOR_ROLES: {
|
|
|
195
182
|
};
|
|
196
183
|
readonly "control-selection.brand": {
|
|
197
184
|
readonly light: "color.brand.a10";
|
|
198
|
-
readonly dark: "color.brand.
|
|
185
|
+
readonly dark: "color.brand.a20";
|
|
199
186
|
};
|
|
200
187
|
readonly "control-selection.product": {
|
|
201
188
|
readonly light: "color.blue.a10";
|
|
202
|
-
readonly dark: "color.blue.
|
|
189
|
+
readonly dark: "color.blue.a20";
|
|
203
190
|
};
|
|
204
191
|
readonly "selection.text-background": {
|
|
205
192
|
readonly light: "color.blue.a20";
|
|
206
|
-
readonly dark: "color.blue.
|
|
193
|
+
readonly dark: "color.blue.a40";
|
|
207
194
|
};
|
|
208
195
|
readonly "status.success": {
|
|
209
196
|
readonly light: "color.green.base";
|
|
@@ -230,12 +217,12 @@ export declare const FIGMA_T3_COLOR_ROLES: {
|
|
|
230
217
|
readonly dark: "color.yellow.a20";
|
|
231
218
|
};
|
|
232
219
|
readonly "status.danger-subtle": {
|
|
233
|
-
readonly light: "color.red.
|
|
234
|
-
readonly dark: "color.red.
|
|
220
|
+
readonly light: "color.red.a10";
|
|
221
|
+
readonly dark: "color.red.a20";
|
|
235
222
|
};
|
|
236
223
|
readonly "status.info-subtle": {
|
|
237
224
|
readonly light: "color.blue.a10";
|
|
238
|
-
readonly dark: "color.blue.
|
|
225
|
+
readonly dark: "color.blue.a20";
|
|
239
226
|
};
|
|
240
227
|
readonly "overlay.scrim": {
|
|
241
228
|
readonly light: "color.black.a50";
|
|
@@ -243,7 +230,7 @@ export declare const FIGMA_T3_COLOR_ROLES: {
|
|
|
243
230
|
};
|
|
244
231
|
readonly "overlay.guide": {
|
|
245
232
|
readonly light: "color.blue.a10";
|
|
246
|
-
readonly dark: "color.blue.
|
|
233
|
+
readonly dark: "color.blue.a20";
|
|
247
234
|
};
|
|
248
235
|
readonly "overlay.media-subtle": {
|
|
249
236
|
readonly light: "color.black.a40";
|
|
@@ -16,7 +16,7 @@ import type { Seed } from "../schema.js";
|
|
|
16
16
|
* 颜色层对齐 Figma `Color/qw` 变量集合:
|
|
17
17
|
* - T1 Seed 为 12 个单色种子;
|
|
18
18
|
* - T2 Reference 为每个 seed 的 A5-A100 Alpha 通道、50-900 OKLCH 设计校准实色色阶、
|
|
19
|
-
* base
|
|
19
|
+
* base 引用。T2 Color 不接受零散补色或「色阶 × Alpha」组合。
|
|
20
20
|
*/
|
|
21
21
|
export type ShadowLevel = "sm" | "md" | "lg";
|
|
22
22
|
/**
|
|
@@ -82,13 +82,6 @@ export type Derivation =
|
|
|
82
82
|
seedRef: string;
|
|
83
83
|
alpha: number;
|
|
84
84
|
}
|
|
85
|
-
/** Figma 校准的步进锚定 Alpha:OKLCH 档位实色 + 固定 alpha(如 brand/500-a20)。 */
|
|
86
|
-
| {
|
|
87
|
-
kind: "stepAlpha";
|
|
88
|
-
seedRef: string;
|
|
89
|
-
step: T2OklchStep;
|
|
90
|
-
alpha: number;
|
|
91
|
-
}
|
|
92
85
|
/** 旧版纯黑/纯白透明度工具刻度。保留求值器兼容,不再由 T2 主链路生成。 */
|
|
93
86
|
| {
|
|
94
87
|
kind: "alphaScale";
|
|
@@ -153,8 +146,6 @@ export interface ReferenceBuild {
|
|
|
153
146
|
export declare function seedValueAt(seed: Seed, dotted: string): unknown;
|
|
154
147
|
/** 从 Seed 颜色点分路径("color.brand")取 T1 键。 */
|
|
155
148
|
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;
|
|
158
149
|
export declare function formatFontFamily(list: string[]): string;
|
|
159
150
|
/** 阴影档位系数:形状(offset/blur/spread 缩放)+ 颜色(alphaStep 倍数)。 */
|
|
160
151
|
export declare const SHADOW_LEVELS: Record<ShadowLevel, {
|
|
@@ -173,8 +164,6 @@ export declare function formatDerivation(d: Derivation): string;
|
|
|
173
164
|
export declare const RAMP_COLORS: readonly ["brand", "black", "white", "gray", "red", "orange", "yellow", "green", "cyan", "blue", "purple", "brown"];
|
|
174
165
|
/** 1. 12 个 Seed ×(A5-A100 Alpha 通道 + 50-900 Figma OKLCH 校准色阶 + base)。 */
|
|
175
166
|
export declare function buildColorRampRecipes(): ReferenceRecipe[];
|
|
176
|
-
/** 2. Figma T2 补充原语:步进锚定 Alpha(仅被 T3 消费的条目)+ black/pure 标准常量。 */
|
|
177
|
-
export declare function buildColorExtraRecipes(): ReferenceRecipe[];
|
|
178
167
|
/** @deprecated Figma T2 已不再使用 neutral 0/1000 端点;保留给历史迁移脚本。 */
|
|
179
168
|
export declare function buildNeutralEndpointRecipes(): ReferenceRecipe[];
|
|
180
169
|
export declare const BLACK_ALPHA: ReadonlyArray<readonly [string, number]>;
|
package/dist/index.d.ts
CHANGED
|
@@ -3,7 +3,7 @@ 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,
|
|
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
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
9
|
export type { DerivedTokens, Mode, Layer, Step, Ramp, ReferenceRecipe, ReferenceBuild, ReferenceTokens, Derivation, ReferenceSourceKind, SemanticRoleEntry, ColorRoleRefs, } from "./derive/index.js";
|
package/dist/index.js
CHANGED
|
@@ -474,41 +474,6 @@ const T2_OKLCH_STEPS = [
|
|
|
474
474
|
800,
|
|
475
475
|
900
|
|
476
476
|
];
|
|
477
|
-
/**
|
|
478
|
-
* T2 步进锚定 Alpha:锚定 OKLCH 档位实色 + 固定 alpha 的设计校准 rgba
|
|
479
|
-
* (`{seed}/{step}-a{alpha}`,如 `brand/500-a20`)。只声明被 T3 角色消费的条目,
|
|
480
|
-
* 不作为完整刻度生成。
|
|
481
|
-
*/
|
|
482
|
-
const FIGMA_T2_STEP_ALPHA = [
|
|
483
|
-
{
|
|
484
|
-
seed: "brand",
|
|
485
|
-
step: 500,
|
|
486
|
-
alpha: 20
|
|
487
|
-
},
|
|
488
|
-
{
|
|
489
|
-
seed: "blue",
|
|
490
|
-
step: 600,
|
|
491
|
-
alpha: 20
|
|
492
|
-
},
|
|
493
|
-
{
|
|
494
|
-
seed: "blue",
|
|
495
|
-
step: 600,
|
|
496
|
-
alpha: 40
|
|
497
|
-
},
|
|
498
|
-
{
|
|
499
|
-
seed: "red",
|
|
500
|
-
step: 400,
|
|
501
|
-
alpha: 10
|
|
502
|
-
},
|
|
503
|
-
{
|
|
504
|
-
seed: "red",
|
|
505
|
-
step: 400,
|
|
506
|
-
alpha: 20
|
|
507
|
-
}
|
|
508
|
-
];
|
|
509
|
-
/** T2 `pure` 步进(标准常量 #000000,OLED 画布用)仅提供给 black。 */
|
|
510
|
-
const T2_PURE_STEP = "pure";
|
|
511
|
-
const T2_PURE_SEEDS = ["black"];
|
|
512
477
|
const FIGMA_T2_SOLID_SCALE = {
|
|
513
478
|
brand: {
|
|
514
479
|
50: "#F2F6FF",
|
|
@@ -683,7 +648,7 @@ const FIGMA_T3_COLOR_ROLES = {
|
|
|
683
648
|
},
|
|
684
649
|
"surface.canvas": {
|
|
685
650
|
light: "color.white.base",
|
|
686
|
-
dark: "color.black.
|
|
651
|
+
dark: "color.black.900"
|
|
687
652
|
},
|
|
688
653
|
"surface.sunken": {
|
|
689
654
|
light: "color.gray.100",
|
|
@@ -699,7 +664,7 @@ const FIGMA_T3_COLOR_ROLES = {
|
|
|
699
664
|
},
|
|
700
665
|
"surface.canvas-subtle": {
|
|
701
666
|
light: "color.gray.50",
|
|
702
|
-
dark: "color.black.
|
|
667
|
+
dark: "color.black.900"
|
|
703
668
|
},
|
|
704
669
|
"content.primary": {
|
|
705
670
|
light: "color.black.base",
|
|
@@ -799,7 +764,7 @@ const FIGMA_T3_COLOR_ROLES = {
|
|
|
799
764
|
},
|
|
800
765
|
"action.selected": {
|
|
801
766
|
light: "color.blue.a20",
|
|
802
|
-
dark: "color.blue.
|
|
767
|
+
dark: "color.blue.a40"
|
|
803
768
|
},
|
|
804
769
|
"action.inverse": {
|
|
805
770
|
light: "color.white.base",
|
|
@@ -807,19 +772,19 @@ const FIGMA_T3_COLOR_ROLES = {
|
|
|
807
772
|
},
|
|
808
773
|
"control-action.brand.subtle": {
|
|
809
774
|
light: "color.brand.a10",
|
|
810
|
-
dark: "color.brand.
|
|
775
|
+
dark: "color.brand.a20"
|
|
811
776
|
},
|
|
812
777
|
"control-action.product.subtle": {
|
|
813
778
|
light: "color.blue.a10",
|
|
814
|
-
dark: "color.blue.
|
|
779
|
+
dark: "color.blue.a20"
|
|
815
780
|
},
|
|
816
781
|
"control-action.danger.default": {
|
|
817
782
|
light: "color.red.400",
|
|
818
783
|
dark: "color.red.400"
|
|
819
784
|
},
|
|
820
785
|
"control-action.danger.subtle": {
|
|
821
|
-
light: "color.red.
|
|
822
|
-
dark: "color.red.
|
|
786
|
+
light: "color.red.a10",
|
|
787
|
+
dark: "color.red.a20"
|
|
823
788
|
},
|
|
824
789
|
"control-action.neutral.subtle": {
|
|
825
790
|
light: "color.black.a5",
|
|
@@ -827,15 +792,15 @@ const FIGMA_T3_COLOR_ROLES = {
|
|
|
827
792
|
},
|
|
828
793
|
"control-selection.brand": {
|
|
829
794
|
light: "color.brand.a10",
|
|
830
|
-
dark: "color.brand.
|
|
795
|
+
dark: "color.brand.a20"
|
|
831
796
|
},
|
|
832
797
|
"control-selection.product": {
|
|
833
798
|
light: "color.blue.a10",
|
|
834
|
-
dark: "color.blue.
|
|
799
|
+
dark: "color.blue.a20"
|
|
835
800
|
},
|
|
836
801
|
"selection.text-background": {
|
|
837
802
|
light: "color.blue.a20",
|
|
838
|
-
dark: "color.blue.
|
|
803
|
+
dark: "color.blue.a40"
|
|
839
804
|
},
|
|
840
805
|
"status.success": {
|
|
841
806
|
light: "color.green.base",
|
|
@@ -862,12 +827,12 @@ const FIGMA_T3_COLOR_ROLES = {
|
|
|
862
827
|
dark: "color.yellow.a20"
|
|
863
828
|
},
|
|
864
829
|
"status.danger-subtle": {
|
|
865
|
-
light: "color.red.
|
|
866
|
-
dark: "color.red.
|
|
830
|
+
light: "color.red.a10",
|
|
831
|
+
dark: "color.red.a20"
|
|
867
832
|
},
|
|
868
833
|
"status.info-subtle": {
|
|
869
834
|
light: "color.blue.a10",
|
|
870
|
-
dark: "color.blue.
|
|
835
|
+
dark: "color.blue.a20"
|
|
871
836
|
},
|
|
872
837
|
"overlay.scrim": {
|
|
873
838
|
light: "color.black.a50",
|
|
@@ -875,7 +840,7 @@ const FIGMA_T3_COLOR_ROLES = {
|
|
|
875
840
|
},
|
|
876
841
|
"overlay.guide": {
|
|
877
842
|
light: "color.blue.a10",
|
|
878
|
-
dark: "color.blue.
|
|
843
|
+
dark: "color.blue.a20"
|
|
879
844
|
},
|
|
880
845
|
"overlay.media-subtle": {
|
|
881
846
|
light: "color.black.a40",
|
|
@@ -1268,14 +1233,6 @@ function seedAlphaCss(seedColor, alpha) {
|
|
|
1268
1233
|
});
|
|
1269
1234
|
return rgba(hexRgb(seedColorToHex(seedColor)), alpha);
|
|
1270
1235
|
}
|
|
1271
|
-
/** 从 Seed 颜色点分路径("color.brand")取 T1 键。 */
|
|
1272
|
-
function seedKeyOf(seedRef) {
|
|
1273
|
-
return seedRef.split(".")[1];
|
|
1274
|
-
}
|
|
1275
|
-
/** 步进锚定 Alpha 的求值:FIGMA_T2_SOLID_SCALE 档位实色 + alpha → rgba。 */
|
|
1276
|
-
function stepAlphaCss(seed, step, alpha) {
|
|
1277
|
-
return rgba(hexRgb(FIGMA_T2_SOLID_SCALE[seed][step]), alpha);
|
|
1278
|
-
}
|
|
1279
1236
|
function formatFontFamily(list) {
|
|
1280
1237
|
return list.map((f) => /[\s./]/.test(f) ? `'${f}'` : f).join(", ");
|
|
1281
1238
|
}
|
|
@@ -1337,7 +1294,6 @@ function evaluateDerivation(d, seed) {
|
|
|
1337
1294
|
case "oklchRamp": return ramp(seed.color[d.seedRef.split(".")[1]])[d.step];
|
|
1338
1295
|
case "figmaOklchScale": return d.value;
|
|
1339
1296
|
case "seedAlpha": return seedAlphaCss(seedValueAt(seed, d.seedRef), d.alpha);
|
|
1340
|
-
case "stepAlpha": return stepAlphaCss(seedKeyOf(d.seedRef), d.step, d.alpha);
|
|
1341
1297
|
case "alphaScale": {
|
|
1342
1298
|
const step = seedValueAt(seed, d.stepRef);
|
|
1343
1299
|
return rgba(d.channel === "black" ? [
|
|
@@ -1373,7 +1329,6 @@ function seedRefsOf(d) {
|
|
|
1373
1329
|
case "oklchRamp":
|
|
1374
1330
|
case "figmaOklchScale":
|
|
1375
1331
|
case "seedAlpha":
|
|
1376
|
-
case "stepAlpha":
|
|
1377
1332
|
case "fontStack":
|
|
1378
1333
|
case "cubicBezier": return [d.seedRef];
|
|
1379
1334
|
case "offsetSteps": return [d.seedRef, d.stepRef];
|
|
@@ -1388,8 +1343,7 @@ function sourceKindOf(d) {
|
|
|
1388
1343
|
case "alias":
|
|
1389
1344
|
case "fontStack":
|
|
1390
1345
|
case "cubicBezier": return "seed-alias";
|
|
1391
|
-
case "figmaOklchScale":
|
|
1392
|
-
case "stepAlpha": return "design-calibrated";
|
|
1346
|
+
case "figmaOklchScale": return "design-calibrated";
|
|
1393
1347
|
case "literal": return "standard-constant";
|
|
1394
1348
|
default: return "seed-derived";
|
|
1395
1349
|
}
|
|
@@ -1407,7 +1361,6 @@ function formatDerivation(d) {
|
|
|
1407
1361
|
case "offsetSteps": return `= seed.${d.seedRef} ${sign(d.n)} seed.${d.stepRef} × ${Math.abs(d.n)}`;
|
|
1408
1362
|
case "oklchRamp": return `= oklch(seed.${d.seedRef}) @ L ${L_TARGETS[d.step]} · C × ${round2(chromaFactor(L_TARGETS[d.step]))}`;
|
|
1409
1363
|
case "figmaOklchScale": return `= figma Color/qw/t2/${d.seedRef.split(".")[1]}/${d.step}(OKLCH 设计校准)`;
|
|
1410
|
-
case "stepAlpha": return `= figma Color/qw/t2/${d.seedRef.split(".")[1]}/${d.step}-a${round2(d.alpha * 100)}(步进锚定 Alpha)`;
|
|
1411
1364
|
case "seedAlpha": return `= seed.${d.seedRef} / ${round2(d.alpha * 100)}%`;
|
|
1412
1365
|
case "alphaScale": return `= ${d.channel === "black" ? "黑" : "白"} / seed.${d.stepRef} × ${d.multiplier}`;
|
|
1413
1366
|
case "literal": return `= ${d.value}(canonical 标准常量)`;
|
|
@@ -1467,35 +1420,6 @@ function buildColorRampRecipes() {
|
|
|
1467
1420
|
}
|
|
1468
1421
|
return out;
|
|
1469
1422
|
}
|
|
1470
|
-
/** 2. Figma T2 补充原语:步进锚定 Alpha(仅被 T3 消费的条目)+ black/pure 标准常量。 */
|
|
1471
|
-
function buildColorExtraRecipes() {
|
|
1472
|
-
const out = [];
|
|
1473
|
-
for (const { seed, step, alpha } of FIGMA_T2_STEP_ALPHA) out.push(ref([
|
|
1474
|
-
"color",
|
|
1475
|
-
seed,
|
|
1476
|
-
`${step}-a${alpha}`
|
|
1477
|
-
], {
|
|
1478
|
-
kind: "stepAlpha",
|
|
1479
|
-
seedRef: `color.${seed}`,
|
|
1480
|
-
step,
|
|
1481
|
-
alpha: alpha / 100
|
|
1482
|
-
}, {
|
|
1483
|
-
source: `Figma Color/qw/t2/${seed}/${step}-a${alpha}`,
|
|
1484
|
-
rationale: "Step-anchored alpha is design-calibrated: both the anchored solid step and the alpha are pinned by the design file."
|
|
1485
|
-
}));
|
|
1486
|
-
out.push(ref([
|
|
1487
|
-
"color",
|
|
1488
|
-
"black",
|
|
1489
|
-
"pure"
|
|
1490
|
-
], {
|
|
1491
|
-
kind: "literal",
|
|
1492
|
-
value: "#000000"
|
|
1493
|
-
}, {
|
|
1494
|
-
source: "CSS Color sRGB endpoint",
|
|
1495
|
-
rationale: "Mathematical black endpoint for OLED canvas; replaces deprecated neutral/1000 semantics; no theme-level generator input."
|
|
1496
|
-
}));
|
|
1497
|
-
return out;
|
|
1498
|
-
}
|
|
1499
1423
|
/** 4. 间距刻度 = spacing.step × N (N=1..8)。 */
|
|
1500
1424
|
function buildSpacingRecipes() {
|
|
1501
1425
|
const out = [];
|
|
@@ -1927,7 +1851,6 @@ function buildShadowRecipes() {
|
|
|
1927
1851
|
function allReferenceRecipes() {
|
|
1928
1852
|
return [
|
|
1929
1853
|
...buildColorRampRecipes(),
|
|
1930
|
-
...buildColorExtraRecipes(),
|
|
1931
1854
|
...buildSpacingRecipes(),
|
|
1932
1855
|
...buildRadiusRecipes(),
|
|
1933
1856
|
...buildControlIconSizeRecipes(),
|
|
@@ -2438,7 +2361,6 @@ function derivationToCssExpr(d) {
|
|
|
2438
2361
|
}
|
|
2439
2362
|
case "figmaOklchScale": return d.value;
|
|
2440
2363
|
case "seedAlpha": return `rgb(from var(${seedVar(d.seedRef)}) r g b / ${round4$1(d.alpha)})`;
|
|
2441
|
-
case "stepAlpha": return stepAlphaCss(seedKeyOf(d.seedRef), d.step, d.alpha);
|
|
2442
2364
|
case "alphaScale": return `rgb(${d.channel === "black" ? "0 0 0" : "255 255 255"} / calc(var(${seedVar(d.stepRef)}) * ${d.multiplier}))`;
|
|
2443
2365
|
case "literal": return String(d.value);
|
|
2444
2366
|
case "shadowLayer": {
|
|
@@ -2513,7 +2435,7 @@ function colorValue(hex, alpha = 1) {
|
|
|
2513
2435
|
function t1Ref(seed) {
|
|
2514
2436
|
return `{qw.t1.${seed}}`;
|
|
2515
2437
|
}
|
|
2516
|
-
/** T3 角色引用的 T2 点分路径("color.blue.
|
|
2438
|
+
/** T3 角色引用的 T2 点分路径("color.blue.a20" → "qw.t2.blue.a20")。 */
|
|
2517
2439
|
function t2Ref(dotted) {
|
|
2518
2440
|
const [, seed, step] = dotted.split(".");
|
|
2519
2441
|
return `{qw.t2.${seed}.${step}}`;
|
|
@@ -2554,22 +2476,6 @@ function buildT2() {
|
|
|
2554
2476
|
source: `Figma Color/qw/t2/${seed}/${step}`,
|
|
2555
2477
|
formula: `= figma Color/qw/t2/${seed}/${step}(OKLCH 设计校准)`
|
|
2556
2478
|
});
|
|
2557
|
-
for (const extra of FIGMA_T2_STEP_ALPHA) {
|
|
2558
|
-
if (extra.seed !== seed) continue;
|
|
2559
|
-
steps[`${extra.step}-a${extra.alpha}`] = t2Token(colorValue(FIGMA_T2_SOLID_SCALE[seed][extra.step], extra.alpha / 100), {
|
|
2560
|
-
sourceKind: "design-calibrated",
|
|
2561
|
-
seedRefs: [t1Ref(seed)],
|
|
2562
|
-
source: `Figma Color/qw/t2/${seed}/${extra.step}-a${extra.alpha}`,
|
|
2563
|
-
formula: `= figma Color/qw/t2/${seed}/${extra.step}-a${extra.alpha}(步进锚定 Alpha)`
|
|
2564
|
-
});
|
|
2565
|
-
}
|
|
2566
|
-
if (T2_PURE_SEEDS.includes(seed)) steps.pure = t2Token(colorValue("#000000"), {
|
|
2567
|
-
sourceKind: "standard-constant",
|
|
2568
|
-
seedRefs: [],
|
|
2569
|
-
source: "CSS Color sRGB endpoint",
|
|
2570
|
-
rationale: "Mathematical black endpoint for OLED canvas; no theme-level generator input.",
|
|
2571
|
-
formula: "= #000000(canonical 标准常量)"
|
|
2572
|
-
});
|
|
2573
2479
|
t2[seed] = steps;
|
|
2574
2480
|
}
|
|
2575
2481
|
return t2;
|
|
@@ -2624,10 +2530,7 @@ const NS = "com.qianwen.qw-ui";
|
|
|
2624
2530
|
const T1_SET = new Set(T1_COLOR_KEYS);
|
|
2625
2531
|
const T2_ALPHA_SET = new Set(T2_ALPHA_KEYS);
|
|
2626
2532
|
const T2_OKLCH_SET = new Set(T2_OKLCH_STEP_KEYS);
|
|
2627
|
-
const T2_PURE_SEED_SET = new Set(T2_PURE_SEEDS);
|
|
2628
2533
|
const T3_SEGMENT = /^[a-z]+(?:-[a-z]+)*$/;
|
|
2629
|
-
/** 步进锚定 Alpha 步名(如 "500-a20"):OKLCH 档位 + Alpha 档位两段。 */
|
|
2630
|
-
const T2_STEP_ALPHA_RE = /^(\d+)-a(\d+)$/;
|
|
2631
2534
|
const PROVENANCE_SOURCE_KINDS = /* @__PURE__ */ new Set([
|
|
2632
2535
|
"seed-alias",
|
|
2633
2536
|
"seed-derived",
|
|
@@ -2705,23 +2608,18 @@ function validateT3Path(path, errors) {
|
|
|
2705
2608
|
const joined = pathKey(path);
|
|
2706
2609
|
for (const segment of path.slice(2)) if (!T3_SEGMENT.test(segment)) errors.push(`${joined}: T3 semantic segment "${segment}" must use kebab-case words without numeric suffixes`);
|
|
2707
2610
|
}
|
|
2708
|
-
/** T2
|
|
2611
|
+
/** T2 Color 固定为 base / Seed Alpha / OKLCH 三类标准档位。 */
|
|
2709
2612
|
function classifyT2Step(step) {
|
|
2710
2613
|
if (step === "base") return "base";
|
|
2711
2614
|
if (T2_ALPHA_SET.has(step)) return "alpha";
|
|
2712
2615
|
if (T2_OKLCH_SET.has(step)) return "oklch";
|
|
2713
|
-
if (step === "pure") return "pure";
|
|
2714
|
-
const match = T2_STEP_ALPHA_RE.exec(step);
|
|
2715
|
-
if (match && T2_OKLCH_SET.has(match[1]) && T2_ALPHA_SET.has(`a${match[2]}`)) return "step-alpha";
|
|
2716
2616
|
return null;
|
|
2717
2617
|
}
|
|
2718
2618
|
/** 各 T2 步类对应的 provenance.sourceKind(血缘治理不变量)。 */
|
|
2719
2619
|
const T2_STEP_SOURCE_KIND = {
|
|
2720
2620
|
base: "seed-alias",
|
|
2721
2621
|
alpha: "seed-derived",
|
|
2722
|
-
oklch: "design-calibrated"
|
|
2723
|
-
"step-alpha": "design-calibrated",
|
|
2724
|
-
pure: "standard-constant"
|
|
2622
|
+
oklch: "design-calibrated"
|
|
2725
2623
|
};
|
|
2726
2624
|
function validateT2Provenance(leaf, seed, step, errors) {
|
|
2727
2625
|
const joined = pathKey(leaf.path);
|
|
@@ -2798,7 +2696,6 @@ function validateFigmaColorTokens(doc) {
|
|
|
2798
2696
|
if (seed && !T1_SET.has(seed)) errors.push(`${joined}: T2 seed "${seed}" must exist in T1`);
|
|
2799
2697
|
const stepKind = step ? classifyT2Step(step) : null;
|
|
2800
2698
|
if (step && !stepKind) errors.push(`${joined}: unsupported T2 step "${step}"`);
|
|
2801
|
-
if (stepKind === "pure" && seed && !T2_PURE_SEED_SET.has(seed)) errors.push(`${joined}: "pure" step is only provided for seeds ${[...T2_PURE_SEED_SET].join(", ")}`);
|
|
2802
2699
|
if (!isColorLikeValue(leaf.value) && step !== "base") errors.push(`${joined}: T2 token must carry a concrete color value`);
|
|
2803
2700
|
if (seed && step && T1_SET.has(seed) && stepKind) {
|
|
2804
2701
|
t2BySeed.get(seed).add(step);
|
|
@@ -2849,6 +2746,6 @@ function assertFigmaColorTokens(doc) {
|
|
|
2849
2746
|
if (!result.ok) throw new Error(`Invalid Figma Color tokens:\n${result.errors.map((error) => `- ${error}`).join("\n")}`);
|
|
2850
2747
|
}
|
|
2851
2748
|
//#endregion
|
|
2852
|
-
export { COLOR_ROLES, FIGMA_COLOR_COLLECTION, FIGMA_COLOR_PREFIX, FIGMA_T1_SEED_HEX, FIGMA_T2_SOLID_SCALE,
|
|
2749
|
+
export { COLOR_ROLES, FIGMA_COLOR_COLLECTION, FIGMA_COLOR_PREFIX, FIGMA_T1_SEED_HEX, FIGMA_T2_SOLID_SCALE, FIGMA_T3_COLOR_ROLES, L_TARGETS, RAMP_COLORS, SHADOW_COMPOSITE_ROLES, STEPS, SeedSchema, T1_COLOR_KEYS, T2_ALPHA_KEYS, T2_ALPHA_STEPS, T2_OKLCH_STEPS, TYPOGRAPHY_ROLES, allReferenceRecipes, assertFigmaColorTokens, buildFigmaColorSnapshot, buildLiveCss, buildReference, buildSemanticColor, buildSemanticStructural, contrastRatio, defaultSeed, derivationToCssExpr, derive, evaluateDerivation, figmaT3RolePaths, formatDerivation, hexToSeedColor, ramp, seedColorToCss, seedColorToHex, seedCssVars, seedRefsOf, seedValueAt, semanticRoleEntries, sourceKindOf, toVar, validateFigmaColorTokens, validateSeed };
|
|
2853
2750
|
|
|
2854
2751
|
//# sourceMappingURL=index.js.map
|