@qw-ui/tokens 0.3.0-next.0 → 0.3.0-next.2

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.
Files changed (5) hide show
  1. package/README.md +76 -0
  2. package/dist/tokens.css +21 -2
  3. package/dist/tokens.json +22 -3
  4. package/dist/tokens.ts +35 -7
  5. package/package.json +1 -1
package/README.md ADDED
@@ -0,0 +1,76 @@
1
+ # @qw-ui/tokens
2
+
3
+ > QW token pipeline：Figma Color variables 是颜色唯一事实源；代码侧校验快照并构建出 CSS / TS 产物。
4
+
5
+ **层级 L1 · 设计令牌**。qw-ui 全链路样式的单一数据源，所有组件颜色/尺寸只允许引用本包派生出的 **T3 Semantic token（`--qw-sem-*`）**，禁止直写字面量。
6
+
7
+ ## 三层派生
8
+
9
+ ```
10
+ T1 Seed ──derive() OKLCH──► T2 Reference ──► T3 Semantic (--qw-sem-*)
11
+ （少量种子色） （完整色阶） （组件消费的语义角色）
12
+ ```
13
+
14
+ Style Dictionary 把三层编译成 CSS 变量与 TS 类型。组件与业务只碰 T3。
15
+
16
+ ## 安装
17
+
18
+ ```bash
19
+ pnpm add @qw-ui/tokens
20
+ ```
21
+
22
+ 无 peer 依赖。
23
+
24
+ ## 最小示例
25
+
26
+ ```ts
27
+ // 1. 静态变量（构建期固化，SSR 友好，不随运行时切换）
28
+ import "@qw-ui/tokens/tokens.css";
29
+
30
+ // 2. 或 live 变量（支持运行时亮暗/主题切换）
31
+ import "@qw-ui/tokens/tokens.live.css";
32
+
33
+ // 3. TS 侧拿 token 路径类型 / 原始 JSON
34
+ import type { TokenPath } from "@qw-ui/tokens/token-paths";
35
+ import tokens from "@qw-ui/tokens/tokens.json" with { type: "json" };
36
+ ```
37
+
38
+ CSS 里直接用变量：
39
+
40
+ ```css
41
+ .card { color: var(--qw-sem-color-content-primary); background: var(--qw-sem-color-surface-base); }
42
+ ```
43
+
44
+ ## tokens.css vs tokens.live.css
45
+
46
+ | 产物 | 用途 | 亮暗切换 |
47
+ |---|---|---|
48
+ | `tokens.css` | 默认静态变量，构建期固化 | 需整页换文件 |
49
+ | `tokens.live.css` | 语义变量随 `<html data-qw-mode>` / Provider 解析 | 运行时切换（见下） |
50
+
51
+ **亮暗两种做法**：① 在 `<html>` 上写 `data-qw-mode="dark"`；② React/Vue 用 `QwConfigProvider` 的 `applyMode` / `toggleMode`。两者都只切 T3 解析，不改组件。
52
+
53
+ ## 关联包
54
+
55
+ | 包 | 关系 |
56
+ |---|---|
57
+ | [@qw-ui/react](../react/README.md) / [@qw-ui/vue](../vue/README.md) | 消费 T3 token 渲染组件，需先引本包 CSS |
58
+ | [@qw-ui/theme-editor](../theme-editor/README.md) | 可视化编辑 Seed → 实时预览三层级联 |
59
+ | `@qw-ui/styles-core`（private，不发布） | vanilla-extract 样式事实源，只读本包 T3 token |
60
+
61
+ 设计稿老色值 → T3 映射见 skill `qw-legacy-token-map`。
62
+
63
+ ## 版本通道
64
+
65
+ | 通道 | 安装 | 说明 |
66
+ |---|---|---|
67
+ | `latest`（稳定） | `pnpm add @qw-ui/tokens` | `main` 通道，Release PR review 后发布 |
68
+ | `next`（预发布） | `pnpm add @qw-ui/tokens@next` | `release/next` 通道，高频自增 `x.y.z-next.N` |
69
+
70
+ 8 个公开包 `fixed` 锁步同版本号。npm 发布固定走 `registry.npmjs.org`；内网装依赖走 `registry.anpm.alibaba-inc.com`（tnpm 代理），发布 registry 不要指向内网。流程详见 [development-workflow.md](../../docs/development-workflow.md)。
71
+
72
+ ## 仓库 & License
73
+
74
+ - 主仓库：<http://gitlab.alibaba-inc.com/qianwen/qw-ui>
75
+ - 问题反馈：<http://gitlab.alibaba-inc.com/qianwen/qw-ui/issues>
76
+ - License：MIT
package/dist/tokens.css CHANGED
@@ -441,7 +441,9 @@
441
441
  --qw-compat-button-color-bg-neutral-gray: rgba(34, 34, 34, 0.06);
442
442
  --qw-compat-loading-color-logo: rgba(34, 34, 34, 0.06);
443
443
  --qw-compat-loading-dimension-radius-surface: 16px;
444
- --qw-compat-tag-dimension-radius: 4px;
444
+ --qw-compat-tag-dimension-radius-small: 2px;
445
+ --qw-compat-tag-dimension-radius-medium: 4px;
446
+ --qw-compat-tag-dimension-radius-large: 4px;
445
447
  --qw-compat-tag-dimension-border-width: 1px;
446
448
  --qw-compat-tag-dimension-height-small: 12px;
447
449
  --qw-compat-tag-dimension-height-medium: 16px;
@@ -462,15 +464,27 @@
462
464
  --qw-compat-avatar-dimension-badge-font-size: 11px;
463
465
  --qw-compat-avatar-dimension-badge-line-height: 16px;
464
466
  --qw-compat-avatar-dimension-badge-padding: 5px;
467
+ --qw-compat-avatar-color-border: rgba(34, 34, 34, 0.06);
465
468
  --qw-compat-avatar-color-badge-border: #FFFFFF;
469
+ --qw-compat-avatar-color-badge-text: #FFFFFF;
466
470
  --qw-compat-textarea-color-paste-text: #FFFFFF;
471
+ --qw-compat-tabs-color-button-bg-selected: rgba(34, 34, 34, 0.06);
472
+ --qw-compat-tabs-color-button-border: rgba(34, 34, 34, 0.03);
467
473
  --qw-compat-tabs-dimension-border-width: 1px;
468
474
  --qw-compat-image-dimension-border-width: 1px;
475
+ --qw-compat-image-color-background: #F8F8F8;
476
+ --qw-compat-divider-color-border: rgba(34, 34, 34, 0.03);
477
+ --qw-compat-divider-dimension-weight-thin: 0.5px;
478
+ --qw-compat-divider-dimension-weight-thick: 1px;
479
+ --qw-compat-empty-dimension-description-font-size: 16px;
480
+ --qw-compat-empty-dimension-description-line-height: 26px;
481
+ --qw-compat-empty-dimension-title-gap: 10px;
482
+ --qw-compat-skeleton-color-background: rgba(185, 185, 185, 0.1);
469
483
  }
470
484
 
471
485
  /* ── Compat Sidecar（迁移债务，禁止业务方长期依赖）── */
472
486
  /* 治理：specs/rfcs/0002-token-compat-sidecar.md */
473
- /* 条目数：64 · graceDays：90 */
487
+ /* 条目数：78 · graceDays：90 */
474
488
  [data-qw-mode="dark"] {
475
489
  --qw-sem-color-surface-base: #222222;
476
490
  --qw-sem-color-surface-subtle: #202020;
@@ -501,4 +515,9 @@
501
515
  --qw-compat-button-color-bg-soft-danger: rgba(254, 135, 122, 0.2);
502
516
  --qw-compat-button-color-bg-neutral-gray: rgba(255, 255, 255, 0.1);
503
517
  --qw-compat-loading-color-logo: rgba(255, 255, 255, 0.1);
518
+ --qw-compat-avatar-color-border: rgba(255, 255, 255, 0.1);
519
+ --qw-compat-tabs-color-button-bg-selected: rgba(255, 255, 255, 0.1);
520
+ --qw-compat-tabs-color-button-border: rgba(255, 255, 255, 0.05);
521
+ --qw-compat-divider-color-border: rgba(255, 255, 255, 0.05);
522
+ --qw-compat-image-color-background: #333333;
504
523
  }
package/dist/tokens.json CHANGED
@@ -447,7 +447,9 @@
447
447
  "--qw-compat-button-color-bg-neutral-gray": "rgba(34, 34, 34, 0.06)",
448
448
  "--qw-compat-loading-color-logo": "rgba(34, 34, 34, 0.06)",
449
449
  "--qw-compat-loading-dimension-radius-surface": "16px",
450
- "--qw-compat-tag-dimension-radius": "4px",
450
+ "--qw-compat-tag-dimension-radius-small": "2px",
451
+ "--qw-compat-tag-dimension-radius-medium": "4px",
452
+ "--qw-compat-tag-dimension-radius-large": "4px",
451
453
  "--qw-compat-tag-dimension-border-width": "1px",
452
454
  "--qw-compat-tag-dimension-height-small": "12px",
453
455
  "--qw-compat-tag-dimension-height-medium": "16px",
@@ -464,14 +466,26 @@
464
466
  "--qw-compat-avatar-dimension-diameter-s": "40px",
465
467
  "--qw-compat-avatar-dimension-diameter-m": "50px",
466
468
  "--qw-compat-avatar-dimension-diameter-l": "58px",
469
+ "--qw-compat-avatar-color-border": "rgba(34, 34, 34, 0.06)",
467
470
  "--qw-compat-avatar-dimension-border-width": "1px",
468
471
  "--qw-compat-avatar-dimension-badge-font-size": "11px",
469
472
  "--qw-compat-avatar-dimension-badge-line-height": "16px",
470
473
  "--qw-compat-avatar-dimension-badge-padding": "5px",
471
474
  "--qw-compat-avatar-color-badge-border": "#FFFFFF",
475
+ "--qw-compat-avatar-color-badge-text": "#FFFFFF",
472
476
  "--qw-compat-textarea-color-paste-text": "#FFFFFF",
477
+ "--qw-compat-tabs-color-button-bg-selected": "rgba(34, 34, 34, 0.06)",
478
+ "--qw-compat-tabs-color-button-border": "rgba(34, 34, 34, 0.03)",
473
479
  "--qw-compat-tabs-dimension-border-width": "1px",
474
- "--qw-compat-image-dimension-border-width": "1px"
480
+ "--qw-compat-image-dimension-border-width": "1px",
481
+ "--qw-compat-divider-color-border": "rgba(34, 34, 34, 0.03)",
482
+ "--qw-compat-divider-dimension-weight-thin": "0.5px",
483
+ "--qw-compat-divider-dimension-weight-thick": "1px",
484
+ "--qw-compat-empty-dimension-description-font-size": "16px",
485
+ "--qw-compat-empty-dimension-description-line-height": "26px",
486
+ "--qw-compat-empty-dimension-title-gap": "10px",
487
+ "--qw-compat-image-color-background": "#F8F8F8",
488
+ "--qw-compat-skeleton-color-background": "rgba(185, 185, 185, 0.1)"
475
489
  },
476
490
  "dark": {
477
491
  "--qw-ref-color-brand-a5": "rgba(0, 17, 255, 0.05)",
@@ -885,6 +899,11 @@
885
899
  "--qw-compat-button-color-bg-soft-brand": "rgba(66, 110, 255, 0.24)",
886
900
  "--qw-compat-button-color-bg-soft-danger": "rgba(254, 135, 122, 0.2)",
887
901
  "--qw-compat-button-color-bg-neutral-gray": "rgba(255, 255, 255, 0.1)",
888
- "--qw-compat-loading-color-logo": "rgba(255, 255, 255, 0.1)"
902
+ "--qw-compat-loading-color-logo": "rgba(255, 255, 255, 0.1)",
903
+ "--qw-compat-avatar-color-border": "rgba(255, 255, 255, 0.1)",
904
+ "--qw-compat-tabs-color-button-bg-selected": "rgba(255, 255, 255, 0.1)",
905
+ "--qw-compat-tabs-color-button-border": "rgba(255, 255, 255, 0.05)",
906
+ "--qw-compat-divider-color-border": "rgba(255, 255, 255, 0.05)",
907
+ "--qw-compat-image-color-background": "#333333"
889
908
  }
890
909
  }
package/dist/tokens.ts CHANGED
@@ -447,7 +447,9 @@ export const lightTokens = {
447
447
  "--qw-compat-button-color-bg-neutral-gray": "rgba(34, 34, 34, 0.06)",
448
448
  "--qw-compat-loading-color-logo": "rgba(34, 34, 34, 0.06)",
449
449
  "--qw-compat-loading-dimension-radius-surface": "16px",
450
- "--qw-compat-tag-dimension-radius": "4px",
450
+ "--qw-compat-tag-dimension-radius-small": "2px",
451
+ "--qw-compat-tag-dimension-radius-medium": "4px",
452
+ "--qw-compat-tag-dimension-radius-large": "4px",
451
453
  "--qw-compat-tag-dimension-border-width": "1px",
452
454
  "--qw-compat-tag-dimension-height-small": "12px",
453
455
  "--qw-compat-tag-dimension-height-medium": "16px",
@@ -464,14 +466,26 @@ export const lightTokens = {
464
466
  "--qw-compat-avatar-dimension-diameter-s": "40px",
465
467
  "--qw-compat-avatar-dimension-diameter-m": "50px",
466
468
  "--qw-compat-avatar-dimension-diameter-l": "58px",
469
+ "--qw-compat-avatar-color-border": "rgba(34, 34, 34, 0.06)",
467
470
  "--qw-compat-avatar-dimension-border-width": "1px",
468
471
  "--qw-compat-avatar-dimension-badge-font-size": "11px",
469
472
  "--qw-compat-avatar-dimension-badge-line-height": "16px",
470
473
  "--qw-compat-avatar-dimension-badge-padding": "5px",
471
474
  "--qw-compat-avatar-color-badge-border": "#FFFFFF",
475
+ "--qw-compat-avatar-color-badge-text": "#FFFFFF",
472
476
  "--qw-compat-textarea-color-paste-text": "#FFFFFF",
477
+ "--qw-compat-tabs-color-button-bg-selected": "rgba(34, 34, 34, 0.06)",
478
+ "--qw-compat-tabs-color-button-border": "rgba(34, 34, 34, 0.03)",
473
479
  "--qw-compat-tabs-dimension-border-width": "1px",
474
480
  "--qw-compat-image-dimension-border-width": "1px",
481
+ "--qw-compat-divider-color-border": "rgba(34, 34, 34, 0.03)",
482
+ "--qw-compat-divider-dimension-weight-thin": "0.5px",
483
+ "--qw-compat-divider-dimension-weight-thick": "1px",
484
+ "--qw-compat-empty-dimension-description-font-size": "16px",
485
+ "--qw-compat-empty-dimension-description-line-height": "26px",
486
+ "--qw-compat-empty-dimension-title-gap": "10px",
487
+ "--qw-compat-image-color-background": "#F8F8F8",
488
+ "--qw-compat-skeleton-color-background": "rgba(185, 185, 185, 0.1)",
475
489
  } as const;
476
490
  export const darkTokens = {
477
491
  "--qw-ref-color-brand-a5": "rgba(0, 17, 255, 0.05)",
@@ -886,6 +900,11 @@ export const darkTokens = {
886
900
  "--qw-compat-button-color-bg-soft-danger": "rgba(254, 135, 122, 0.2)",
887
901
  "--qw-compat-button-color-bg-neutral-gray": "rgba(255, 255, 255, 0.1)",
888
902
  "--qw-compat-loading-color-logo": "rgba(255, 255, 255, 0.1)",
903
+ "--qw-compat-avatar-color-border": "rgba(255, 255, 255, 0.1)",
904
+ "--qw-compat-tabs-color-button-bg-selected": "rgba(255, 255, 255, 0.1)",
905
+ "--qw-compat-tabs-color-button-border": "rgba(255, 255, 255, 0.05)",
906
+ "--qw-compat-divider-color-border": "rgba(255, 255, 255, 0.05)",
907
+ "--qw-compat-image-color-background": "#333333",
889
908
  } as const;
890
909
  export type TokenName = keyof typeof lightTokens;
891
910
  export type RefTokenPath = TokenName extends `--qw-ref-${infer P}` ? P : never;
@@ -905,29 +924,38 @@ export type SemTokenPath =
905
924
  | `typography-${SemTypeSuffix}`
906
925
  | `motion-${SemMotionSuffix}`
907
926
  | `effect-${SemEffectSuffix}`;
908
- export const compatComponents = ["avatar","button","image","loading","tabs","tag","textarea"] as const;
927
+ export const compatComponents = ["avatar","button","divider","empty","image","loading","skeleton","tabs","tag","textarea"] as const;
909
928
  export type CompatComponent = (typeof compatComponents)[number];
910
- export const compatAvatarSuffixes = ["color-badge-border","dimension-badge-font-size","dimension-badge-line-height","dimension-badge-padding","dimension-border-width","dimension-diameter-l","dimension-diameter-m","dimension-diameter-s"] as const;
929
+ export const compatAvatarSuffixes = ["color-badge-border","color-badge-text","color-border","dimension-badge-font-size","dimension-badge-line-height","dimension-badge-padding","dimension-border-width","dimension-diameter-l","dimension-diameter-m","dimension-diameter-s"] as const;
911
930
  export type CompatAvatarSuffix = (typeof compatAvatarSuffixes)[number];
912
931
  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;
913
932
  export type CompatButtonSuffix = (typeof compatButtonSuffixes)[number];
914
- export const compatImageSuffixes = ["dimension-border-width"] as const;
933
+ export const compatDividerSuffixes = ["color-border","dimension-weight-thick","dimension-weight-thin"] as const;
934
+ export type CompatDividerSuffix = (typeof compatDividerSuffixes)[number];
935
+ export const compatEmptySuffixes = ["dimension-description-font-size","dimension-description-line-height","dimension-title-gap"] as const;
936
+ export type CompatEmptySuffix = (typeof compatEmptySuffixes)[number];
937
+ export const compatImageSuffixes = ["color-background","dimension-border-width"] as const;
915
938
  export type CompatImageSuffix = (typeof compatImageSuffixes)[number];
916
939
  export const compatLoadingSuffixes = ["color-logo","dimension-radius-surface"] as const;
917
940
  export type CompatLoadingSuffix = (typeof compatLoadingSuffixes)[number];
918
- export const compatTabsSuffixes = ["dimension-border-width"] as const;
941
+ export const compatSkeletonSuffixes = ["color-background"] as const;
942
+ export type CompatSkeletonSuffix = (typeof compatSkeletonSuffixes)[number];
943
+ export const compatTabsSuffixes = ["color-button-bg-selected","color-button-border","dimension-border-width"] as const;
919
944
  export type CompatTabsSuffix = (typeof compatTabsSuffixes)[number];
920
- export const compatTagSuffixes = ["dimension-border-width","dimension-height-large","dimension-height-medium","dimension-height-small","dimension-padding-inline-large","dimension-padding-inline-medium","dimension-padding-inline-small","dimension-radius","typography-font-size-large","typography-font-size-medium","typography-font-size-small","typography-line-height-large","typography-line-height-medium","typography-line-height-small"] as const;
945
+ export const compatTagSuffixes = ["dimension-border-width","dimension-height-large","dimension-height-medium","dimension-height-small","dimension-padding-inline-large","dimension-padding-inline-medium","dimension-padding-inline-small","dimension-radius-large","dimension-radius-medium","dimension-radius-small","typography-font-size-large","typography-font-size-medium","typography-font-size-small","typography-line-height-large","typography-line-height-medium","typography-line-height-small"] as const;
921
946
  export type CompatTagSuffix = (typeof compatTagSuffixes)[number];
922
947
  export const compatTextareaSuffixes = ["color-paste-text"] as const;
923
948
  export type CompatTextareaSuffix = (typeof compatTextareaSuffixes)[number];
924
949
  export type CompatSuffix<C extends CompatComponent> =
925
950
  C extends "avatar" ? CompatAvatarSuffix :
926
951
  C extends "button" ? CompatButtonSuffix :
952
+ C extends "divider" ? CompatDividerSuffix :
953
+ C extends "empty" ? CompatEmptySuffix :
927
954
  C extends "image" ? CompatImageSuffix :
928
955
  C extends "loading" ? CompatLoadingSuffix :
956
+ C extends "skeleton" ? CompatSkeletonSuffix :
929
957
  C extends "tabs" ? CompatTabsSuffix :
930
958
  C extends "tag" ? CompatTagSuffix :
931
959
  C extends "textarea" ? CompatTextareaSuffix :
932
960
  never;
933
- export const compatTokenCount = 64 as const;
961
+ export const compatTokenCount = 78 as const;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qw-ui/tokens",
3
- "version": "0.3.0-next.0",
3
+ "version": "0.3.0-next.2",
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",