@qw-ui/tokens 0.2.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 +39 -12
  3. package/dist/tokens.json +39 -12
  4. package/dist/tokens.ts +61 -13
  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,28 +441,50 @@
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-small: 2px;
445
+ --qw-compat-tag-dimension-radius-medium: 4px;
446
+ --qw-compat-tag-dimension-radius-large: 4px;
447
+ --qw-compat-tag-dimension-border-width: 1px;
448
+ --qw-compat-tag-dimension-height-small: 12px;
449
+ --qw-compat-tag-dimension-height-medium: 16px;
450
+ --qw-compat-tag-dimension-height-large: 20px;
451
+ --qw-compat-tag-dimension-padding-inline-small: 3px;
452
+ --qw-compat-tag-dimension-padding-inline-medium: 4px;
453
+ --qw-compat-tag-dimension-padding-inline-large: 5px;
454
+ --qw-compat-tag-typography-line-height-small: 16px;
455
+ --qw-compat-tag-typography-line-height-medium: 22px;
456
+ --qw-compat-tag-typography-line-height-large: 22px;
457
+ --qw-compat-tag-typography-font-size-small: 8px;
458
+ --qw-compat-tag-typography-font-size-medium: 11px;
459
+ --qw-compat-tag-typography-font-size-large: 11px;
444
460
  --qw-compat-avatar-dimension-diameter-s: 40px;
445
461
  --qw-compat-avatar-dimension-diameter-m: 50px;
446
462
  --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;
463
+ --qw-compat-avatar-dimension-border-width: 1px;
464
+ --qw-compat-avatar-dimension-badge-font-size: 11px;
457
465
  --qw-compat-avatar-dimension-badge-line-height: 16px;
458
466
  --qw-compat-avatar-dimension-badge-padding: 5px;
459
- --qw-compat-avatar-dimension-border-width: 1px;
467
+ --qw-compat-avatar-color-border: rgba(34, 34, 34, 0.06);
460
468
  --qw-compat-avatar-color-badge-border: #FFFFFF;
469
+ --qw-compat-avatar-color-badge-text: #FFFFFF;
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);
473
+ --qw-compat-tabs-dimension-border-width: 1px;
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);
461
483
  }
462
484
 
463
485
  /* ── Compat Sidecar（迁移债务，禁止业务方长期依赖）── */
464
486
  /* 治理：specs/rfcs/0002-token-compat-sidecar.md */
465
- /* 条目数：56 · graceDays：90 */
487
+ /* 条目数：78 · graceDays：90 */
466
488
  [data-qw-mode="dark"] {
467
489
  --qw-sem-color-surface-base: #222222;
468
490
  --qw-sem-color-surface-subtle: #202020;
@@ -493,4 +515,9 @@
493
515
  --qw-compat-button-color-bg-soft-danger: rgba(254, 135, 122, 0.2);
494
516
  --qw-compat-button-color-bg-neutral-gray: rgba(255, 255, 255, 0.1);
495
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;
496
523
  }
package/dist/tokens.json CHANGED
@@ -447,23 +447,45 @@
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-small": "2px",
451
+ "--qw-compat-tag-dimension-radius-medium": "4px",
452
+ "--qw-compat-tag-dimension-radius-large": "4px",
453
+ "--qw-compat-tag-dimension-border-width": "1px",
454
+ "--qw-compat-tag-dimension-height-small": "12px",
455
+ "--qw-compat-tag-dimension-height-medium": "16px",
456
+ "--qw-compat-tag-dimension-height-large": "20px",
457
+ "--qw-compat-tag-dimension-padding-inline-small": "3px",
458
+ "--qw-compat-tag-dimension-padding-inline-medium": "4px",
459
+ "--qw-compat-tag-dimension-padding-inline-large": "5px",
460
+ "--qw-compat-tag-typography-line-height-small": "16px",
461
+ "--qw-compat-tag-typography-line-height-medium": "22px",
462
+ "--qw-compat-tag-typography-line-height-large": "22px",
463
+ "--qw-compat-tag-typography-font-size-small": "8px",
464
+ "--qw-compat-tag-typography-font-size-medium": "11px",
465
+ "--qw-compat-tag-typography-font-size-large": "11px",
450
466
  "--qw-compat-avatar-dimension-diameter-s": "40px",
451
467
  "--qw-compat-avatar-dimension-diameter-m": "50px",
452
468
  "--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",
469
+ "--qw-compat-avatar-color-border": "rgba(34, 34, 34, 0.06)",
462
470
  "--qw-compat-avatar-dimension-border-width": "1px",
463
- "--qw-compat-avatar-dimension-badge-font-size": "10px",
471
+ "--qw-compat-avatar-dimension-badge-font-size": "11px",
464
472
  "--qw-compat-avatar-dimension-badge-line-height": "16px",
465
473
  "--qw-compat-avatar-dimension-badge-padding": "5px",
466
- "--qw-compat-avatar-color-badge-border": "#FFFFFF"
474
+ "--qw-compat-avatar-color-badge-border": "#FFFFFF",
475
+ "--qw-compat-avatar-color-badge-text": "#FFFFFF",
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)",
479
+ "--qw-compat-tabs-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)"
467
489
  },
468
490
  "dark": {
469
491
  "--qw-ref-color-brand-a5": "rgba(0, 17, 255, 0.05)",
@@ -877,6 +899,11 @@
877
899
  "--qw-compat-button-color-bg-soft-brand": "rgba(66, 110, 255, 0.24)",
878
900
  "--qw-compat-button-color-bg-soft-danger": "rgba(254, 135, 122, 0.2)",
879
901
  "--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)"
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"
881
908
  }
882
909
  }
package/dist/tokens.ts CHANGED
@@ -447,23 +447,45 @@ 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-small": "2px",
451
+ "--qw-compat-tag-dimension-radius-medium": "4px",
452
+ "--qw-compat-tag-dimension-radius-large": "4px",
453
+ "--qw-compat-tag-dimension-border-width": "1px",
454
+ "--qw-compat-tag-dimension-height-small": "12px",
455
+ "--qw-compat-tag-dimension-height-medium": "16px",
456
+ "--qw-compat-tag-dimension-height-large": "20px",
457
+ "--qw-compat-tag-dimension-padding-inline-small": "3px",
458
+ "--qw-compat-tag-dimension-padding-inline-medium": "4px",
459
+ "--qw-compat-tag-dimension-padding-inline-large": "5px",
460
+ "--qw-compat-tag-typography-line-height-small": "16px",
461
+ "--qw-compat-tag-typography-line-height-medium": "22px",
462
+ "--qw-compat-tag-typography-line-height-large": "22px",
463
+ "--qw-compat-tag-typography-font-size-small": "8px",
464
+ "--qw-compat-tag-typography-font-size-medium": "11px",
465
+ "--qw-compat-tag-typography-font-size-large": "11px",
450
466
  "--qw-compat-avatar-dimension-diameter-s": "40px",
451
467
  "--qw-compat-avatar-dimension-diameter-m": "50px",
452
468
  "--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",
469
+ "--qw-compat-avatar-color-border": "rgba(34, 34, 34, 0.06)",
462
470
  "--qw-compat-avatar-dimension-border-width": "1px",
463
- "--qw-compat-avatar-dimension-badge-font-size": "10px",
471
+ "--qw-compat-avatar-dimension-badge-font-size": "11px",
464
472
  "--qw-compat-avatar-dimension-badge-line-height": "16px",
465
473
  "--qw-compat-avatar-dimension-badge-padding": "5px",
466
474
  "--qw-compat-avatar-color-badge-border": "#FFFFFF",
475
+ "--qw-compat-avatar-color-badge-text": "#FFFFFF",
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)",
479
+ "--qw-compat-tabs-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)",
467
489
  } as const;
468
490
  export const darkTokens = {
469
491
  "--qw-ref-color-brand-a5": "rgba(0, 17, 255, 0.05)",
@@ -878,6 +900,11 @@ export const darkTokens = {
878
900
  "--qw-compat-button-color-bg-soft-danger": "rgba(254, 135, 122, 0.2)",
879
901
  "--qw-compat-button-color-bg-neutral-gray": "rgba(255, 255, 255, 0.1)",
880
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",
881
908
  } as const;
882
909
  export type TokenName = keyof typeof lightTokens;
883
910
  export type RefTokenPath = TokenName extends `--qw-ref-${infer P}` ? P : never;
@@ -897,17 +924,38 @@ export type SemTokenPath =
897
924
  | `typography-${SemTypeSuffix}`
898
925
  | `motion-${SemMotionSuffix}`
899
926
  | `effect-${SemEffectSuffix}`;
900
- export const compatComponents = ["avatar","button","loading"] as const;
927
+ export const compatComponents = ["avatar","button","divider","empty","image","loading","skeleton","tabs","tag","textarea"] as const;
901
928
  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;
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;
903
930
  export type CompatAvatarSuffix = (typeof compatAvatarSuffixes)[number];
904
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;
905
932
  export type CompatButtonSuffix = (typeof compatButtonSuffixes)[number];
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;
938
+ export type CompatImageSuffix = (typeof compatImageSuffixes)[number];
906
939
  export const compatLoadingSuffixes = ["color-logo","dimension-radius-surface"] as const;
907
940
  export type CompatLoadingSuffix = (typeof compatLoadingSuffixes)[number];
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;
944
+ export type CompatTabsSuffix = (typeof compatTabsSuffixes)[number];
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;
946
+ export type CompatTagSuffix = (typeof compatTagSuffixes)[number];
947
+ export const compatTextareaSuffixes = ["color-paste-text"] as const;
948
+ export type CompatTextareaSuffix = (typeof compatTextareaSuffixes)[number];
908
949
  export type CompatSuffix<C extends CompatComponent> =
909
950
  C extends "avatar" ? CompatAvatarSuffix :
910
951
  C extends "button" ? CompatButtonSuffix :
952
+ C extends "divider" ? CompatDividerSuffix :
953
+ C extends "empty" ? CompatEmptySuffix :
954
+ C extends "image" ? CompatImageSuffix :
911
955
  C extends "loading" ? CompatLoadingSuffix :
956
+ C extends "skeleton" ? CompatSkeletonSuffix :
957
+ C extends "tabs" ? CompatTabsSuffix :
958
+ C extends "tag" ? CompatTagSuffix :
959
+ C extends "textarea" ? CompatTextareaSuffix :
912
960
  never;
913
- export const compatTokenCount = 56 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.2.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",