@qw-ui/tokens 0.1.0 → 0.2.0-next.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/dist/color-architecture.d.ts +122 -0
- package/dist/color.d.ts +38 -0
- package/dist/compat/build.d.ts +14 -0
- package/dist/compat/color.d.ts +8 -0
- package/dist/compat/index.d.ts +5 -0
- package/dist/compat/schema.d.ts +114 -0
- package/dist/derive/index.d.ts +25 -0
- package/dist/derive/live-css.d.ts +18 -0
- package/dist/derive/naming.d.ts +18 -0
- package/dist/derive/oklch.d.ts +28 -0
- package/dist/derive/reference.d.ts +189 -0
- package/dist/derive/semantic.d.ts +75 -0
- package/dist/design-doc.d.ts +10 -0
- package/dist/figma/color-contract.d.ts +14 -0
- package/dist/index.d.ts +13 -624
- package/dist/index.js +2118 -1068
- package/dist/index.js.map +1 -1
- package/dist/schema.d.ts +200 -0
- package/dist/seed/index.d.ts +2 -0
- package/dist/tokens.css +68 -1
- package/dist/tokens.json +66 -2
- package/dist/tokens.live.css +3 -0
- package/dist/tokens.ts +95 -0
- package/package.json +10 -6
package/dist/schema.d.ts
ADDED
|
@@ -0,0 +1,200 @@
|
|
|
1
|
+
import { z } from "zod";
|
|
2
|
+
/**
|
|
3
|
+
* SeedSchema — T1 Seed 的唯一事实源校验（RFC 0001 §2.1，v3 修订）。
|
|
4
|
+
*
|
|
5
|
+
* 五大类目 color/size/typography/motion/effect，字段结构对齐
|
|
6
|
+
* packages/tokens/design/seed.tokens.json，全部字段必填——不允许省略后静默
|
|
7
|
+
* 回退默认值，锚点缺口必须在 Seed 层显式补齐，Reference 层不得用硬编码兜底。
|
|
8
|
+
*
|
|
9
|
+
* v3 变化：
|
|
10
|
+
* - 颜色全部结构化（DTCG Color module，支持 srgb/oklch）。
|
|
11
|
+
* - radius/controlSize/iconSize 只留 base 锚点（full 是独立的裁切基准决策），
|
|
12
|
+
* sm/lg 由 Reference 层按既定公式派生。
|
|
13
|
+
* - lineHeight 从 size 移入 typography；新增 letterSpacing.base 锚点。
|
|
14
|
+
* - fontFamily 换 text/number/code 三族 + 平台/语言变体（textMacXx、textWindowsXx）。
|
|
15
|
+
*/
|
|
16
|
+
export declare const SeedSchema: z.ZodObject<{
|
|
17
|
+
color: z.ZodObject<{
|
|
18
|
+
black: z.ZodObject<{
|
|
19
|
+
colorSpace: z.ZodEnum<{
|
|
20
|
+
oklch: "oklch";
|
|
21
|
+
srgb: "srgb";
|
|
22
|
+
}>;
|
|
23
|
+
components: z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber], null>;
|
|
24
|
+
alpha: z.ZodNumber;
|
|
25
|
+
}, z.core.$strip>;
|
|
26
|
+
blue: z.ZodObject<{
|
|
27
|
+
colorSpace: z.ZodEnum<{
|
|
28
|
+
oklch: "oklch";
|
|
29
|
+
srgb: "srgb";
|
|
30
|
+
}>;
|
|
31
|
+
components: z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber], null>;
|
|
32
|
+
alpha: z.ZodNumber;
|
|
33
|
+
}, z.core.$strip>;
|
|
34
|
+
brand: z.ZodObject<{
|
|
35
|
+
colorSpace: z.ZodEnum<{
|
|
36
|
+
oklch: "oklch";
|
|
37
|
+
srgb: "srgb";
|
|
38
|
+
}>;
|
|
39
|
+
components: z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber], null>;
|
|
40
|
+
alpha: z.ZodNumber;
|
|
41
|
+
}, z.core.$strip>;
|
|
42
|
+
brown: z.ZodObject<{
|
|
43
|
+
colorSpace: z.ZodEnum<{
|
|
44
|
+
oklch: "oklch";
|
|
45
|
+
srgb: "srgb";
|
|
46
|
+
}>;
|
|
47
|
+
components: z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber], null>;
|
|
48
|
+
alpha: z.ZodNumber;
|
|
49
|
+
}, z.core.$strip>;
|
|
50
|
+
cyan: z.ZodObject<{
|
|
51
|
+
colorSpace: z.ZodEnum<{
|
|
52
|
+
oklch: "oklch";
|
|
53
|
+
srgb: "srgb";
|
|
54
|
+
}>;
|
|
55
|
+
components: z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber], null>;
|
|
56
|
+
alpha: z.ZodNumber;
|
|
57
|
+
}, z.core.$strip>;
|
|
58
|
+
gray: z.ZodObject<{
|
|
59
|
+
colorSpace: z.ZodEnum<{
|
|
60
|
+
oklch: "oklch";
|
|
61
|
+
srgb: "srgb";
|
|
62
|
+
}>;
|
|
63
|
+
components: z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber], null>;
|
|
64
|
+
alpha: z.ZodNumber;
|
|
65
|
+
}, z.core.$strip>;
|
|
66
|
+
green: z.ZodObject<{
|
|
67
|
+
colorSpace: z.ZodEnum<{
|
|
68
|
+
oklch: "oklch";
|
|
69
|
+
srgb: "srgb";
|
|
70
|
+
}>;
|
|
71
|
+
components: z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber], null>;
|
|
72
|
+
alpha: z.ZodNumber;
|
|
73
|
+
}, z.core.$strip>;
|
|
74
|
+
orange: z.ZodObject<{
|
|
75
|
+
colorSpace: z.ZodEnum<{
|
|
76
|
+
oklch: "oklch";
|
|
77
|
+
srgb: "srgb";
|
|
78
|
+
}>;
|
|
79
|
+
components: z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber], null>;
|
|
80
|
+
alpha: z.ZodNumber;
|
|
81
|
+
}, z.core.$strip>;
|
|
82
|
+
purple: z.ZodObject<{
|
|
83
|
+
colorSpace: z.ZodEnum<{
|
|
84
|
+
oklch: "oklch";
|
|
85
|
+
srgb: "srgb";
|
|
86
|
+
}>;
|
|
87
|
+
components: z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber], null>;
|
|
88
|
+
alpha: z.ZodNumber;
|
|
89
|
+
}, z.core.$strip>;
|
|
90
|
+
red: z.ZodObject<{
|
|
91
|
+
colorSpace: z.ZodEnum<{
|
|
92
|
+
oklch: "oklch";
|
|
93
|
+
srgb: "srgb";
|
|
94
|
+
}>;
|
|
95
|
+
components: z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber], null>;
|
|
96
|
+
alpha: z.ZodNumber;
|
|
97
|
+
}, z.core.$strip>;
|
|
98
|
+
white: z.ZodObject<{
|
|
99
|
+
colorSpace: z.ZodEnum<{
|
|
100
|
+
oklch: "oklch";
|
|
101
|
+
srgb: "srgb";
|
|
102
|
+
}>;
|
|
103
|
+
components: z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber], null>;
|
|
104
|
+
alpha: z.ZodNumber;
|
|
105
|
+
}, z.core.$strip>;
|
|
106
|
+
yellow: z.ZodObject<{
|
|
107
|
+
colorSpace: z.ZodEnum<{
|
|
108
|
+
oklch: "oklch";
|
|
109
|
+
srgb: "srgb";
|
|
110
|
+
}>;
|
|
111
|
+
components: z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber], null>;
|
|
112
|
+
alpha: z.ZodNumber;
|
|
113
|
+
}, z.core.$strip>;
|
|
114
|
+
}, z.core.$strip>;
|
|
115
|
+
size: z.ZodObject<{
|
|
116
|
+
spacing: z.ZodObject<{
|
|
117
|
+
step: z.ZodString;
|
|
118
|
+
}, z.core.$strip>;
|
|
119
|
+
borderWidth: z.ZodObject<{
|
|
120
|
+
hairline: z.ZodString;
|
|
121
|
+
}, z.core.$strip>;
|
|
122
|
+
radius: z.ZodObject<{
|
|
123
|
+
base: z.ZodString;
|
|
124
|
+
full: z.ZodString;
|
|
125
|
+
}, z.core.$strip>;
|
|
126
|
+
controlSize: z.ZodObject<{
|
|
127
|
+
base: z.ZodString;
|
|
128
|
+
}, z.core.$strip>;
|
|
129
|
+
iconSize: z.ZodObject<{
|
|
130
|
+
base: z.ZodString;
|
|
131
|
+
}, z.core.$strip>;
|
|
132
|
+
opacity: z.ZodObject<{
|
|
133
|
+
disabled: z.ZodNumber;
|
|
134
|
+
alphaStep: z.ZodNumber;
|
|
135
|
+
}, z.core.$strip>;
|
|
136
|
+
zIndex: z.ZodObject<{
|
|
137
|
+
step: z.ZodNumber;
|
|
138
|
+
}, z.core.$strip>;
|
|
139
|
+
}, z.core.$strip>;
|
|
140
|
+
typography: z.ZodObject<{
|
|
141
|
+
fontFamily: z.ZodObject<{
|
|
142
|
+
text: z.ZodArray<z.ZodString>;
|
|
143
|
+
number: z.ZodArray<z.ZodString>;
|
|
144
|
+
code: z.ZodArray<z.ZodString>;
|
|
145
|
+
textMacLatin: z.ZodArray<z.ZodString>;
|
|
146
|
+
textMacZh: z.ZodArray<z.ZodString>;
|
|
147
|
+
textMacJa: z.ZodArray<z.ZodString>;
|
|
148
|
+
textWindowsLatin: z.ZodArray<z.ZodString>;
|
|
149
|
+
textWindowsZh: z.ZodArray<z.ZodString>;
|
|
150
|
+
textWindowsJa: z.ZodArray<z.ZodString>;
|
|
151
|
+
}, z.core.$strip>;
|
|
152
|
+
fontWeight: z.ZodObject<{
|
|
153
|
+
regular: z.ZodNumber;
|
|
154
|
+
medium: z.ZodNumber;
|
|
155
|
+
semibold: z.ZodNumber;
|
|
156
|
+
}, z.core.$strip>;
|
|
157
|
+
fontSize: z.ZodObject<{
|
|
158
|
+
base: z.ZodString;
|
|
159
|
+
}, z.core.$strip>;
|
|
160
|
+
lineHeight: z.ZodObject<{
|
|
161
|
+
base: z.ZodNumber;
|
|
162
|
+
}, z.core.$strip>;
|
|
163
|
+
letterSpacing: z.ZodObject<{
|
|
164
|
+
base: z.ZodString;
|
|
165
|
+
}, z.core.$strip>;
|
|
166
|
+
}, z.core.$strip>;
|
|
167
|
+
motion: z.ZodObject<{
|
|
168
|
+
duration: z.ZodObject<{
|
|
169
|
+
base: z.ZodString;
|
|
170
|
+
}, z.core.$strip>;
|
|
171
|
+
easing: z.ZodObject<{
|
|
172
|
+
standard: z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber, z.ZodNumber], null>;
|
|
173
|
+
}, z.core.$strip>;
|
|
174
|
+
}, z.core.$strip>;
|
|
175
|
+
effect: z.ZodObject<{
|
|
176
|
+
shadow: z.ZodObject<{
|
|
177
|
+
base: z.ZodObject<{
|
|
178
|
+
color: z.ZodObject<{
|
|
179
|
+
colorSpace: z.ZodEnum<{
|
|
180
|
+
oklch: "oklch";
|
|
181
|
+
srgb: "srgb";
|
|
182
|
+
}>;
|
|
183
|
+
components: z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber], null>;
|
|
184
|
+
alpha: z.ZodNumber;
|
|
185
|
+
}, z.core.$strip>;
|
|
186
|
+
offsetX: z.ZodString;
|
|
187
|
+
offsetY: z.ZodString;
|
|
188
|
+
blur: z.ZodString;
|
|
189
|
+
spread: z.ZodString;
|
|
190
|
+
}, z.core.$strip>;
|
|
191
|
+
}, z.core.$strip>;
|
|
192
|
+
}, z.core.$strip>;
|
|
193
|
+
}, z.core.$strip>;
|
|
194
|
+
export type SeedInput = z.input<typeof SeedSchema>;
|
|
195
|
+
export type Seed = z.infer<typeof SeedSchema>;
|
|
196
|
+
/**
|
|
197
|
+
* validateSeed — ConfigProvider 在 dev 模式调用；生产环境可裁掉，不带 zod 体积。
|
|
198
|
+
* 解析失败抛错，错误信息直接定位到字段。
|
|
199
|
+
*/
|
|
200
|
+
export declare function validateSeed(seed: unknown): Seed;
|
package/dist/tokens.css
CHANGED
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
/* @qw-ui/tokens — 由 seed derive() 生成，请勿手改。 */
|
|
1
|
+
/* @qw-ui/tokens — 由 seed derive() + compat registry 生成，请勿手改。 */
|
|
2
2
|
:root {
|
|
3
3
|
--qw-ref-color-brand-50: #F2F6FF;
|
|
4
4
|
--qw-ref-color-brand-100: #E6ECFF;
|
|
@@ -400,8 +400,69 @@
|
|
|
400
400
|
--qw-sem-color-status-info: #0d53ff;
|
|
401
401
|
--qw-sem-color-overlay-scrim: rgba(34, 34, 34, 0.5);
|
|
402
402
|
--qw-sem-color-overlay-guide: rgba(34, 34, 34, 0.7);
|
|
403
|
+
--qw-sem-color-shadow: rgba(34, 34, 34, 0.1);
|
|
404
|
+
--qw-sem-effect-shadow-dialog: 0px 8px 24px 0px rgba(34, 34, 34, 0.1);
|
|
405
|
+
--qw-compat-button-dimension-height-mini: 24px;
|
|
406
|
+
--qw-compat-button-dimension-height-xs: 28px;
|
|
407
|
+
--qw-compat-button-dimension-height-s: 32px;
|
|
408
|
+
--qw-compat-button-dimension-height-normal: 36px;
|
|
409
|
+
--qw-compat-button-dimension-height-m: 42px;
|
|
410
|
+
--qw-compat-button-dimension-height-l: 50px;
|
|
411
|
+
--qw-compat-button-dimension-square-mini: 24px;
|
|
412
|
+
--qw-compat-button-dimension-square-xs: 28px;
|
|
413
|
+
--qw-compat-button-dimension-square-s: 32px;
|
|
414
|
+
--qw-compat-button-dimension-square-normal: 36px;
|
|
415
|
+
--qw-compat-button-dimension-square-m: 42px;
|
|
416
|
+
--qw-compat-button-dimension-square-l: 50px;
|
|
417
|
+
--qw-compat-button-dimension-padding-inline-mini: 8px;
|
|
418
|
+
--qw-compat-button-dimension-padding-inline-xs: 8px;
|
|
419
|
+
--qw-compat-button-dimension-padding-inline-s: 16px;
|
|
420
|
+
--qw-compat-button-dimension-padding-inline-normal: 16px;
|
|
421
|
+
--qw-compat-button-dimension-padding-inline-m: 20px;
|
|
422
|
+
--qw-compat-button-dimension-padding-inline-l: 32px;
|
|
423
|
+
--qw-compat-button-dimension-icon-mini: 14px;
|
|
424
|
+
--qw-compat-button-dimension-icon-xs: 16px;
|
|
425
|
+
--qw-compat-button-dimension-icon-s: 16px;
|
|
426
|
+
--qw-compat-button-dimension-icon-normal: 16px;
|
|
427
|
+
--qw-compat-button-dimension-icon-m: 16px;
|
|
428
|
+
--qw-compat-button-dimension-icon-l: 20px;
|
|
429
|
+
--qw-compat-button-dimension-gap-mini: 4px;
|
|
430
|
+
--qw-compat-button-dimension-gap-xs: 4px;
|
|
431
|
+
--qw-compat-button-dimension-gap-s: 8px;
|
|
432
|
+
--qw-compat-button-dimension-gap-normal: 8px;
|
|
433
|
+
--qw-compat-button-dimension-gap-m: 8px;
|
|
434
|
+
--qw-compat-button-dimension-gap-l: 8px;
|
|
435
|
+
--qw-compat-button-dimension-border-width: 1px;
|
|
436
|
+
--qw-compat-button-dimension-focus-ring-width: 2px;
|
|
437
|
+
--qw-compat-button-dimension-focus-ring-offset: 2px;
|
|
438
|
+
--qw-compat-button-dimension-spinner-stroke: 2px;
|
|
439
|
+
--qw-compat-button-color-bg-soft-brand: rgba(0, 68, 255, 0.1);
|
|
440
|
+
--qw-compat-button-color-bg-soft-danger: rgba(255, 87, 69, 0.1);
|
|
441
|
+
--qw-compat-button-color-bg-neutral-gray: rgba(34, 34, 34, 0.06);
|
|
442
|
+
--qw-compat-loading-color-logo: rgba(34, 34, 34, 0.06);
|
|
443
|
+
--qw-compat-loading-dimension-radius-surface: 16px;
|
|
444
|
+
--qw-compat-avatar-dimension-diameter-s: 40px;
|
|
445
|
+
--qw-compat-avatar-dimension-diameter-m: 50px;
|
|
446
|
+
--qw-compat-avatar-dimension-diameter-l: 58px;
|
|
447
|
+
--qw-compat-avatar-dimension-font-size-s: 12px;
|
|
448
|
+
--qw-compat-avatar-dimension-font-size-m: 16px;
|
|
449
|
+
--qw-compat-avatar-dimension-font-size-l: 18px;
|
|
450
|
+
--qw-compat-avatar-dimension-badge-size-s: 10px;
|
|
451
|
+
--qw-compat-avatar-dimension-badge-size-m: 12px;
|
|
452
|
+
--qw-compat-avatar-dimension-badge-size-l: 12px;
|
|
453
|
+
--qw-compat-avatar-dimension-badge-offset-s: -2px;
|
|
454
|
+
--qw-compat-avatar-dimension-badge-offset-m: -4px;
|
|
455
|
+
--qw-compat-avatar-dimension-badge-offset-l: -4px;
|
|
456
|
+
--qw-compat-avatar-dimension-badge-font-size: 10px;
|
|
457
|
+
--qw-compat-avatar-dimension-badge-line-height: 16px;
|
|
458
|
+
--qw-compat-avatar-dimension-badge-padding: 5px;
|
|
459
|
+
--qw-compat-avatar-dimension-border-width: 1px;
|
|
460
|
+
--qw-compat-avatar-color-badge-border: #FFFFFF;
|
|
403
461
|
}
|
|
404
462
|
|
|
463
|
+
/* ── Compat Sidecar（迁移债务，禁止业务方长期依赖）── */
|
|
464
|
+
/* 治理：specs/rfcs/0002-token-compat-sidecar.md */
|
|
465
|
+
/* 条目数：56 · graceDays：90 */
|
|
405
466
|
[data-qw-mode="dark"] {
|
|
406
467
|
--qw-sem-color-surface-base: #222222;
|
|
407
468
|
--qw-sem-color-surface-subtle: #202020;
|
|
@@ -426,4 +487,10 @@
|
|
|
426
487
|
--qw-sem-color-action-inverse: #222222;
|
|
427
488
|
--qw-sem-color-status-info: #266FFF;
|
|
428
489
|
--qw-sem-color-overlay-scrim: rgba(34, 34, 34, 0.7);
|
|
490
|
+
--qw-sem-color-shadow: rgba(34, 34, 34, 0.5);
|
|
491
|
+
--qw-sem-effect-shadow-dialog: 0px 8px 24px 0px rgba(34, 34, 34, 0.5);
|
|
492
|
+
--qw-compat-button-color-bg-soft-brand: rgba(66, 110, 255, 0.24);
|
|
493
|
+
--qw-compat-button-color-bg-soft-danger: rgba(254, 135, 122, 0.2);
|
|
494
|
+
--qw-compat-button-color-bg-neutral-gray: rgba(255, 255, 255, 0.1);
|
|
495
|
+
--qw-compat-loading-color-logo: rgba(255, 255, 255, 0.1);
|
|
429
496
|
}
|
package/dist/tokens.json
CHANGED
|
@@ -405,7 +405,65 @@
|
|
|
405
405
|
"--qw-sem-color-status-danger": "#FF5745",
|
|
406
406
|
"--qw-sem-color-status-info": "#0d53ff",
|
|
407
407
|
"--qw-sem-color-overlay-scrim": "rgba(34, 34, 34, 0.5)",
|
|
408
|
-
"--qw-sem-color-overlay-guide": "rgba(34, 34, 34, 0.7)"
|
|
408
|
+
"--qw-sem-color-overlay-guide": "rgba(34, 34, 34, 0.7)",
|
|
409
|
+
"--qw-sem-color-shadow": "rgba(34, 34, 34, 0.1)",
|
|
410
|
+
"--qw-sem-effect-shadow-dialog": "0px 8px 24px 0px rgba(34, 34, 34, 0.1)",
|
|
411
|
+
"--qw-compat-button-dimension-height-mini": "24px",
|
|
412
|
+
"--qw-compat-button-dimension-height-xs": "28px",
|
|
413
|
+
"--qw-compat-button-dimension-height-s": "32px",
|
|
414
|
+
"--qw-compat-button-dimension-height-normal": "36px",
|
|
415
|
+
"--qw-compat-button-dimension-height-m": "42px",
|
|
416
|
+
"--qw-compat-button-dimension-height-l": "50px",
|
|
417
|
+
"--qw-compat-button-dimension-square-mini": "24px",
|
|
418
|
+
"--qw-compat-button-dimension-square-xs": "28px",
|
|
419
|
+
"--qw-compat-button-dimension-square-s": "32px",
|
|
420
|
+
"--qw-compat-button-dimension-square-normal": "36px",
|
|
421
|
+
"--qw-compat-button-dimension-square-m": "42px",
|
|
422
|
+
"--qw-compat-button-dimension-square-l": "50px",
|
|
423
|
+
"--qw-compat-button-dimension-padding-inline-mini": "8px",
|
|
424
|
+
"--qw-compat-button-dimension-padding-inline-xs": "8px",
|
|
425
|
+
"--qw-compat-button-dimension-padding-inline-s": "16px",
|
|
426
|
+
"--qw-compat-button-dimension-padding-inline-normal": "16px",
|
|
427
|
+
"--qw-compat-button-dimension-padding-inline-m": "20px",
|
|
428
|
+
"--qw-compat-button-dimension-padding-inline-l": "32px",
|
|
429
|
+
"--qw-compat-button-dimension-icon-mini": "14px",
|
|
430
|
+
"--qw-compat-button-dimension-icon-xs": "16px",
|
|
431
|
+
"--qw-compat-button-dimension-icon-s": "16px",
|
|
432
|
+
"--qw-compat-button-dimension-icon-normal": "16px",
|
|
433
|
+
"--qw-compat-button-dimension-icon-m": "16px",
|
|
434
|
+
"--qw-compat-button-dimension-icon-l": "20px",
|
|
435
|
+
"--qw-compat-button-dimension-gap-mini": "4px",
|
|
436
|
+
"--qw-compat-button-dimension-gap-xs": "4px",
|
|
437
|
+
"--qw-compat-button-dimension-gap-s": "8px",
|
|
438
|
+
"--qw-compat-button-dimension-gap-normal": "8px",
|
|
439
|
+
"--qw-compat-button-dimension-gap-m": "8px",
|
|
440
|
+
"--qw-compat-button-dimension-gap-l": "8px",
|
|
441
|
+
"--qw-compat-button-dimension-border-width": "1px",
|
|
442
|
+
"--qw-compat-button-dimension-focus-ring-width": "2px",
|
|
443
|
+
"--qw-compat-button-dimension-focus-ring-offset": "2px",
|
|
444
|
+
"--qw-compat-button-dimension-spinner-stroke": "2px",
|
|
445
|
+
"--qw-compat-button-color-bg-soft-brand": "rgba(0, 68, 255, 0.1)",
|
|
446
|
+
"--qw-compat-button-color-bg-soft-danger": "rgba(255, 87, 69, 0.1)",
|
|
447
|
+
"--qw-compat-button-color-bg-neutral-gray": "rgba(34, 34, 34, 0.06)",
|
|
448
|
+
"--qw-compat-loading-color-logo": "rgba(34, 34, 34, 0.06)",
|
|
449
|
+
"--qw-compat-loading-dimension-radius-surface": "16px",
|
|
450
|
+
"--qw-compat-avatar-dimension-diameter-s": "40px",
|
|
451
|
+
"--qw-compat-avatar-dimension-diameter-m": "50px",
|
|
452
|
+
"--qw-compat-avatar-dimension-diameter-l": "58px",
|
|
453
|
+
"--qw-compat-avatar-dimension-font-size-s": "12px",
|
|
454
|
+
"--qw-compat-avatar-dimension-font-size-m": "16px",
|
|
455
|
+
"--qw-compat-avatar-dimension-font-size-l": "18px",
|
|
456
|
+
"--qw-compat-avatar-dimension-badge-size-s": "10px",
|
|
457
|
+
"--qw-compat-avatar-dimension-badge-size-m": "12px",
|
|
458
|
+
"--qw-compat-avatar-dimension-badge-size-l": "12px",
|
|
459
|
+
"--qw-compat-avatar-dimension-badge-offset-s": "-2px",
|
|
460
|
+
"--qw-compat-avatar-dimension-badge-offset-m": "-4px",
|
|
461
|
+
"--qw-compat-avatar-dimension-badge-offset-l": "-4px",
|
|
462
|
+
"--qw-compat-avatar-dimension-border-width": "1px",
|
|
463
|
+
"--qw-compat-avatar-dimension-badge-font-size": "10px",
|
|
464
|
+
"--qw-compat-avatar-dimension-badge-line-height": "16px",
|
|
465
|
+
"--qw-compat-avatar-dimension-badge-padding": "5px",
|
|
466
|
+
"--qw-compat-avatar-color-badge-border": "#FFFFFF"
|
|
409
467
|
},
|
|
410
468
|
"dark": {
|
|
411
469
|
"--qw-ref-color-brand-a5": "rgba(0, 17, 255, 0.05)",
|
|
@@ -813,6 +871,12 @@
|
|
|
813
871
|
"--qw-sem-color-status-danger": "#FF5745",
|
|
814
872
|
"--qw-sem-color-status-info": "#266FFF",
|
|
815
873
|
"--qw-sem-color-overlay-scrim": "rgba(34, 34, 34, 0.7)",
|
|
816
|
-
"--qw-sem-color-overlay-guide": "rgba(34, 34, 34, 0.7)"
|
|
874
|
+
"--qw-sem-color-overlay-guide": "rgba(34, 34, 34, 0.7)",
|
|
875
|
+
"--qw-sem-color-shadow": "rgba(34, 34, 34, 0.5)",
|
|
876
|
+
"--qw-sem-effect-shadow-dialog": "0px 8px 24px 0px rgba(34, 34, 34, 0.5)",
|
|
877
|
+
"--qw-compat-button-color-bg-soft-brand": "rgba(66, 110, 255, 0.24)",
|
|
878
|
+
"--qw-compat-button-color-bg-soft-danger": "rgba(254, 135, 122, 0.2)",
|
|
879
|
+
"--qw-compat-button-color-bg-neutral-gray": "rgba(255, 255, 255, 0.1)",
|
|
880
|
+
"--qw-compat-loading-color-logo": "rgba(255, 255, 255, 0.1)"
|
|
817
881
|
}
|
|
818
882
|
}
|
package/dist/tokens.live.css
CHANGED
|
@@ -449,6 +449,8 @@
|
|
|
449
449
|
--qw-sem-color-status-info: var(--qw-ref-color-blue-base);
|
|
450
450
|
--qw-sem-color-overlay-scrim: var(--qw-ref-color-black-a50);
|
|
451
451
|
--qw-sem-color-overlay-guide: var(--qw-ref-color-black-a70);
|
|
452
|
+
--qw-sem-color-shadow: var(--qw-ref-color-black-a10);
|
|
453
|
+
--qw-sem-effect-shadow-dialog: calc(var(--qw-seed-effect-shadow-base-offset-x) * 4) calc(var(--qw-seed-effect-shadow-base-offset-y) * 4) calc(var(--qw-seed-effect-shadow-base-blur) * 6) calc(var(--qw-seed-effect-shadow-base-spread) * 4) var(--qw-sem-color-shadow);
|
|
452
454
|
}
|
|
453
455
|
|
|
454
456
|
[data-qw-mode="dark"] {
|
|
@@ -475,4 +477,5 @@
|
|
|
475
477
|
--qw-sem-color-action-inverse: var(--qw-ref-color-black-base);
|
|
476
478
|
--qw-sem-color-status-info: var(--qw-ref-color-blue-600);
|
|
477
479
|
--qw-sem-color-overlay-scrim: var(--qw-ref-color-black-a70);
|
|
480
|
+
--qw-sem-color-shadow: var(--qw-ref-color-black-a50);
|
|
478
481
|
}
|
package/dist/tokens.ts
CHANGED
|
@@ -406,6 +406,64 @@ export const lightTokens = {
|
|
|
406
406
|
"--qw-sem-color-status-info": "#0d53ff",
|
|
407
407
|
"--qw-sem-color-overlay-scrim": "rgba(34, 34, 34, 0.5)",
|
|
408
408
|
"--qw-sem-color-overlay-guide": "rgba(34, 34, 34, 0.7)",
|
|
409
|
+
"--qw-sem-color-shadow": "rgba(34, 34, 34, 0.1)",
|
|
410
|
+
"--qw-sem-effect-shadow-dialog": "0px 8px 24px 0px rgba(34, 34, 34, 0.1)",
|
|
411
|
+
"--qw-compat-button-dimension-height-mini": "24px",
|
|
412
|
+
"--qw-compat-button-dimension-height-xs": "28px",
|
|
413
|
+
"--qw-compat-button-dimension-height-s": "32px",
|
|
414
|
+
"--qw-compat-button-dimension-height-normal": "36px",
|
|
415
|
+
"--qw-compat-button-dimension-height-m": "42px",
|
|
416
|
+
"--qw-compat-button-dimension-height-l": "50px",
|
|
417
|
+
"--qw-compat-button-dimension-square-mini": "24px",
|
|
418
|
+
"--qw-compat-button-dimension-square-xs": "28px",
|
|
419
|
+
"--qw-compat-button-dimension-square-s": "32px",
|
|
420
|
+
"--qw-compat-button-dimension-square-normal": "36px",
|
|
421
|
+
"--qw-compat-button-dimension-square-m": "42px",
|
|
422
|
+
"--qw-compat-button-dimension-square-l": "50px",
|
|
423
|
+
"--qw-compat-button-dimension-padding-inline-mini": "8px",
|
|
424
|
+
"--qw-compat-button-dimension-padding-inline-xs": "8px",
|
|
425
|
+
"--qw-compat-button-dimension-padding-inline-s": "16px",
|
|
426
|
+
"--qw-compat-button-dimension-padding-inline-normal": "16px",
|
|
427
|
+
"--qw-compat-button-dimension-padding-inline-m": "20px",
|
|
428
|
+
"--qw-compat-button-dimension-padding-inline-l": "32px",
|
|
429
|
+
"--qw-compat-button-dimension-icon-mini": "14px",
|
|
430
|
+
"--qw-compat-button-dimension-icon-xs": "16px",
|
|
431
|
+
"--qw-compat-button-dimension-icon-s": "16px",
|
|
432
|
+
"--qw-compat-button-dimension-icon-normal": "16px",
|
|
433
|
+
"--qw-compat-button-dimension-icon-m": "16px",
|
|
434
|
+
"--qw-compat-button-dimension-icon-l": "20px",
|
|
435
|
+
"--qw-compat-button-dimension-gap-mini": "4px",
|
|
436
|
+
"--qw-compat-button-dimension-gap-xs": "4px",
|
|
437
|
+
"--qw-compat-button-dimension-gap-s": "8px",
|
|
438
|
+
"--qw-compat-button-dimension-gap-normal": "8px",
|
|
439
|
+
"--qw-compat-button-dimension-gap-m": "8px",
|
|
440
|
+
"--qw-compat-button-dimension-gap-l": "8px",
|
|
441
|
+
"--qw-compat-button-dimension-border-width": "1px",
|
|
442
|
+
"--qw-compat-button-dimension-focus-ring-width": "2px",
|
|
443
|
+
"--qw-compat-button-dimension-focus-ring-offset": "2px",
|
|
444
|
+
"--qw-compat-button-dimension-spinner-stroke": "2px",
|
|
445
|
+
"--qw-compat-button-color-bg-soft-brand": "rgba(0, 68, 255, 0.1)",
|
|
446
|
+
"--qw-compat-button-color-bg-soft-danger": "rgba(255, 87, 69, 0.1)",
|
|
447
|
+
"--qw-compat-button-color-bg-neutral-gray": "rgba(34, 34, 34, 0.06)",
|
|
448
|
+
"--qw-compat-loading-color-logo": "rgba(34, 34, 34, 0.06)",
|
|
449
|
+
"--qw-compat-loading-dimension-radius-surface": "16px",
|
|
450
|
+
"--qw-compat-avatar-dimension-diameter-s": "40px",
|
|
451
|
+
"--qw-compat-avatar-dimension-diameter-m": "50px",
|
|
452
|
+
"--qw-compat-avatar-dimension-diameter-l": "58px",
|
|
453
|
+
"--qw-compat-avatar-dimension-font-size-s": "12px",
|
|
454
|
+
"--qw-compat-avatar-dimension-font-size-m": "16px",
|
|
455
|
+
"--qw-compat-avatar-dimension-font-size-l": "18px",
|
|
456
|
+
"--qw-compat-avatar-dimension-badge-size-s": "10px",
|
|
457
|
+
"--qw-compat-avatar-dimension-badge-size-m": "12px",
|
|
458
|
+
"--qw-compat-avatar-dimension-badge-size-l": "12px",
|
|
459
|
+
"--qw-compat-avatar-dimension-badge-offset-s": "-2px",
|
|
460
|
+
"--qw-compat-avatar-dimension-badge-offset-m": "-4px",
|
|
461
|
+
"--qw-compat-avatar-dimension-badge-offset-l": "-4px",
|
|
462
|
+
"--qw-compat-avatar-dimension-border-width": "1px",
|
|
463
|
+
"--qw-compat-avatar-dimension-badge-font-size": "10px",
|
|
464
|
+
"--qw-compat-avatar-dimension-badge-line-height": "16px",
|
|
465
|
+
"--qw-compat-avatar-dimension-badge-padding": "5px",
|
|
466
|
+
"--qw-compat-avatar-color-badge-border": "#FFFFFF",
|
|
409
467
|
} as const;
|
|
410
468
|
export const darkTokens = {
|
|
411
469
|
"--qw-ref-color-brand-a5": "rgba(0, 17, 255, 0.05)",
|
|
@@ -814,5 +872,42 @@ export const darkTokens = {
|
|
|
814
872
|
"--qw-sem-color-status-info": "#266FFF",
|
|
815
873
|
"--qw-sem-color-overlay-scrim": "rgba(34, 34, 34, 0.7)",
|
|
816
874
|
"--qw-sem-color-overlay-guide": "rgba(34, 34, 34, 0.7)",
|
|
875
|
+
"--qw-sem-color-shadow": "rgba(34, 34, 34, 0.5)",
|
|
876
|
+
"--qw-sem-effect-shadow-dialog": "0px 8px 24px 0px rgba(34, 34, 34, 0.5)",
|
|
877
|
+
"--qw-compat-button-color-bg-soft-brand": "rgba(66, 110, 255, 0.24)",
|
|
878
|
+
"--qw-compat-button-color-bg-soft-danger": "rgba(254, 135, 122, 0.2)",
|
|
879
|
+
"--qw-compat-button-color-bg-neutral-gray": "rgba(255, 255, 255, 0.1)",
|
|
880
|
+
"--qw-compat-loading-color-logo": "rgba(255, 255, 255, 0.1)",
|
|
817
881
|
} as const;
|
|
818
882
|
export type TokenName = keyof typeof lightTokens;
|
|
883
|
+
export type RefTokenPath = TokenName extends `--qw-ref-${infer P}` ? P : never;
|
|
884
|
+
export const semColorSuffixes = ["surface-base","surface-subtle","surface-elevated","surface-header","surface-brand-subtle","content-primary","content-secondary","content-tertiary","content-placeholder","content-intro","border-default","border-strong","border-focus","fill-subtle","fill-hover","fill-active","fill-disabled","action-brand","action-product","action-selected","action-inverse","status-success","status-warning","status-danger","status-info","overlay-scrim","overlay-guide","shadow"] as const;
|
|
885
|
+
export const semSizeSuffixes = ["radius-control","radius-card","radius-pill","radius-full","control-height-sm","control-height-md","control-height-lg","icon-size-sm","icon-size-md","icon-size-lg","inset-sm","stack-sm","inset-md","stack-md","inset-lg","stack-lg","opacity-disabled","z-index-dropdown","z-index-sticky","z-index-overlay","z-index-toast"] as const;
|
|
886
|
+
export const semTypeSuffixes = ["font-family-text","font-family-number","font-family-code","body-font-family","body-font-size","body-font-weight","body-line-height","body-letter-spacing","body-strong-font-family","body-strong-font-size","body-strong-font-weight","body-strong-line-height","body-strong-letter-spacing","heading-sm-font-family","heading-sm-font-size","heading-sm-font-weight","heading-sm-line-height","heading-sm-letter-spacing","heading-md-font-family","heading-md-font-size","heading-md-font-weight","heading-md-line-height","heading-md-letter-spacing","heading-lg-font-family","heading-lg-font-size","heading-lg-font-weight","heading-lg-line-height","heading-lg-letter-spacing","caption-font-family","caption-font-size","caption-font-weight","caption-line-height","caption-letter-spacing","code-font-family","code-font-size","code-font-weight","code-line-height","code-letter-spacing"] as const;
|
|
887
|
+
export const semMotionSuffixes = ["duration-fast","duration-base","duration-slow","easing-standard"] as const;
|
|
888
|
+
export const semEffectSuffixes = ["shadow-dialog"] as const;
|
|
889
|
+
export type SemColorSuffix = (typeof semColorSuffixes)[number];
|
|
890
|
+
export type SemSizeSuffix = (typeof semSizeSuffixes)[number];
|
|
891
|
+
export type SemTypeSuffix = (typeof semTypeSuffixes)[number];
|
|
892
|
+
export type SemMotionSuffix = (typeof semMotionSuffixes)[number];
|
|
893
|
+
export type SemEffectSuffix = (typeof semEffectSuffixes)[number];
|
|
894
|
+
export type SemTokenPath =
|
|
895
|
+
| `color-${SemColorSuffix}`
|
|
896
|
+
| `size-${SemSizeSuffix}`
|
|
897
|
+
| `typography-${SemTypeSuffix}`
|
|
898
|
+
| `motion-${SemMotionSuffix}`
|
|
899
|
+
| `effect-${SemEffectSuffix}`;
|
|
900
|
+
export const compatComponents = ["avatar","button","loading"] as const;
|
|
901
|
+
export type CompatComponent = (typeof compatComponents)[number];
|
|
902
|
+
export const compatAvatarSuffixes = ["color-badge-border","dimension-badge-font-size","dimension-badge-line-height","dimension-badge-offset-l","dimension-badge-offset-m","dimension-badge-offset-s","dimension-badge-padding","dimension-badge-size-l","dimension-badge-size-m","dimension-badge-size-s","dimension-border-width","dimension-diameter-l","dimension-diameter-m","dimension-diameter-s","dimension-font-size-l","dimension-font-size-m","dimension-font-size-s"] as const;
|
|
903
|
+
export type CompatAvatarSuffix = (typeof compatAvatarSuffixes)[number];
|
|
904
|
+
export const compatButtonSuffixes = ["color-bg-neutral-gray","color-bg-soft-brand","color-bg-soft-danger","dimension-border-width","dimension-focus-ring-offset","dimension-focus-ring-width","dimension-gap-l","dimension-gap-m","dimension-gap-mini","dimension-gap-normal","dimension-gap-s","dimension-gap-xs","dimension-height-l","dimension-height-m","dimension-height-mini","dimension-height-normal","dimension-height-s","dimension-height-xs","dimension-icon-l","dimension-icon-m","dimension-icon-mini","dimension-icon-normal","dimension-icon-s","dimension-icon-xs","dimension-padding-inline-l","dimension-padding-inline-m","dimension-padding-inline-mini","dimension-padding-inline-normal","dimension-padding-inline-s","dimension-padding-inline-xs","dimension-spinner-stroke","dimension-square-l","dimension-square-m","dimension-square-mini","dimension-square-normal","dimension-square-s","dimension-square-xs"] as const;
|
|
905
|
+
export type CompatButtonSuffix = (typeof compatButtonSuffixes)[number];
|
|
906
|
+
export const compatLoadingSuffixes = ["color-logo","dimension-radius-surface"] as const;
|
|
907
|
+
export type CompatLoadingSuffix = (typeof compatLoadingSuffixes)[number];
|
|
908
|
+
export type CompatSuffix<C extends CompatComponent> =
|
|
909
|
+
C extends "avatar" ? CompatAvatarSuffix :
|
|
910
|
+
C extends "button" ? CompatButtonSuffix :
|
|
911
|
+
C extends "loading" ? CompatLoadingSuffix :
|
|
912
|
+
never;
|
|
913
|
+
export const compatTokenCount = 56 as const;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@qw-ui/tokens",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0-next.0",
|
|
4
4
|
"description": "QW token pipeline: Figma Color variables are the color source of truth; code validates snapshots and builds CSS / TS exits.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"author": "qw-ui contributors",
|
|
@@ -30,7 +30,10 @@
|
|
|
30
30
|
},
|
|
31
31
|
"./tokens.css": "./dist/tokens.css",
|
|
32
32
|
"./tokens.live.css": "./dist/tokens.live.css",
|
|
33
|
-
"./tokens.json": "./dist/tokens.json"
|
|
33
|
+
"./tokens.json": "./dist/tokens.json",
|
|
34
|
+
"./token-paths": {
|
|
35
|
+
"types": "./dist/tokens.ts"
|
|
36
|
+
}
|
|
34
37
|
},
|
|
35
38
|
"sideEffects": [
|
|
36
39
|
"**/*.css"
|
|
@@ -46,12 +49,12 @@
|
|
|
46
49
|
"@vitest/coverage-v8": "^4.1.9",
|
|
47
50
|
"size-limit": "^12.1.0",
|
|
48
51
|
"style-dictionary": "^5.5.0",
|
|
49
|
-
"
|
|
52
|
+
"tsdown": "^0.22.4",
|
|
50
53
|
"tsx": "^4.22.4",
|
|
51
54
|
"typescript": "^6.0.3",
|
|
52
55
|
"vitest": "^4.1.9",
|
|
53
|
-
"@qw-ui/
|
|
54
|
-
"@qw-ui/
|
|
56
|
+
"@qw-ui/tsconfig": "0.0.0",
|
|
57
|
+
"@qw-ui/eslint-config": "0.0.0"
|
|
55
58
|
},
|
|
56
59
|
"size-limit": [
|
|
57
60
|
{
|
|
@@ -68,11 +71,12 @@
|
|
|
68
71
|
"registry": "https://registry.npmjs.org/"
|
|
69
72
|
},
|
|
70
73
|
"scripts": {
|
|
71
|
-
"build": "
|
|
74
|
+
"build": "tsdown && tsgo -p tsconfig.build.json && tsx build-tokens.ts",
|
|
72
75
|
"gen:design": "tsx scripts/export-design-tokens.ts",
|
|
73
76
|
"validate:figma-color": "tsx scripts/validate-figma-color-tokens.ts",
|
|
74
77
|
"test": "vitest run",
|
|
75
78
|
"lint": "eslint .",
|
|
79
|
+
"typecheck": "tsgo --noEmit -p tsconfig.build.json",
|
|
76
80
|
"size": "size-limit",
|
|
77
81
|
"api": "api-extractor run --local",
|
|
78
82
|
"clean": "rm -rf dist .turbo etc/*.api.json temp"
|