@qw-ui/tokens 0.2.0-next.0 → 0.3.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.
Files changed (4) hide show
  1. package/dist/tokens.css +20 -12
  2. package/dist/tokens.json +19 -11
  3. package/dist/tokens.ts +33 -13
  4. package/package.json +3 -3
package/dist/tokens.css CHANGED
@@ -441,28 +441,36 @@
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;
445
+ --qw-compat-tag-dimension-border-width: 1px;
446
+ --qw-compat-tag-dimension-height-small: 12px;
447
+ --qw-compat-tag-dimension-height-medium: 16px;
448
+ --qw-compat-tag-dimension-height-large: 20px;
449
+ --qw-compat-tag-dimension-padding-inline-small: 3px;
450
+ --qw-compat-tag-dimension-padding-inline-medium: 4px;
451
+ --qw-compat-tag-dimension-padding-inline-large: 5px;
452
+ --qw-compat-tag-typography-line-height-small: 16px;
453
+ --qw-compat-tag-typography-line-height-medium: 22px;
454
+ --qw-compat-tag-typography-line-height-large: 22px;
455
+ --qw-compat-tag-typography-font-size-small: 8px;
456
+ --qw-compat-tag-typography-font-size-medium: 11px;
457
+ --qw-compat-tag-typography-font-size-large: 11px;
444
458
  --qw-compat-avatar-dimension-diameter-s: 40px;
445
459
  --qw-compat-avatar-dimension-diameter-m: 50px;
446
460
  --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;
461
+ --qw-compat-avatar-dimension-border-width: 1px;
462
+ --qw-compat-avatar-dimension-badge-font-size: 11px;
457
463
  --qw-compat-avatar-dimension-badge-line-height: 16px;
458
464
  --qw-compat-avatar-dimension-badge-padding: 5px;
459
- --qw-compat-avatar-dimension-border-width: 1px;
460
465
  --qw-compat-avatar-color-badge-border: #FFFFFF;
466
+ --qw-compat-textarea-color-paste-text: #FFFFFF;
467
+ --qw-compat-tabs-dimension-border-width: 1px;
468
+ --qw-compat-image-dimension-border-width: 1px;
461
469
  }
462
470
 
463
471
  /* ── Compat Sidecar（迁移债务，禁止业务方长期依赖）── */
464
472
  /* 治理：specs/rfcs/0002-token-compat-sidecar.md */
465
- /* 条目数：56 · graceDays：90 */
473
+ /* 条目数：64 · graceDays：90 */
466
474
  [data-qw-mode="dark"] {
467
475
  --qw-sem-color-surface-base: #222222;
468
476
  --qw-sem-color-surface-subtle: #202020;
package/dist/tokens.json CHANGED
@@ -447,23 +447,31 @@
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",
451
+ "--qw-compat-tag-dimension-border-width": "1px",
452
+ "--qw-compat-tag-dimension-height-small": "12px",
453
+ "--qw-compat-tag-dimension-height-medium": "16px",
454
+ "--qw-compat-tag-dimension-height-large": "20px",
455
+ "--qw-compat-tag-dimension-padding-inline-small": "3px",
456
+ "--qw-compat-tag-dimension-padding-inline-medium": "4px",
457
+ "--qw-compat-tag-dimension-padding-inline-large": "5px",
458
+ "--qw-compat-tag-typography-line-height-small": "16px",
459
+ "--qw-compat-tag-typography-line-height-medium": "22px",
460
+ "--qw-compat-tag-typography-line-height-large": "22px",
461
+ "--qw-compat-tag-typography-font-size-small": "8px",
462
+ "--qw-compat-tag-typography-font-size-medium": "11px",
463
+ "--qw-compat-tag-typography-font-size-large": "11px",
450
464
  "--qw-compat-avatar-dimension-diameter-s": "40px",
451
465
  "--qw-compat-avatar-dimension-diameter-m": "50px",
452
466
  "--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
467
  "--qw-compat-avatar-dimension-border-width": "1px",
463
- "--qw-compat-avatar-dimension-badge-font-size": "10px",
468
+ "--qw-compat-avatar-dimension-badge-font-size": "11px",
464
469
  "--qw-compat-avatar-dimension-badge-line-height": "16px",
465
470
  "--qw-compat-avatar-dimension-badge-padding": "5px",
466
- "--qw-compat-avatar-color-badge-border": "#FFFFFF"
471
+ "--qw-compat-avatar-color-badge-border": "#FFFFFF",
472
+ "--qw-compat-textarea-color-paste-text": "#FFFFFF",
473
+ "--qw-compat-tabs-dimension-border-width": "1px",
474
+ "--qw-compat-image-dimension-border-width": "1px"
467
475
  },
468
476
  "dark": {
469
477
  "--qw-ref-color-brand-a5": "rgba(0, 17, 255, 0.05)",
package/dist/tokens.ts CHANGED
@@ -447,23 +447,31 @@ 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",
451
+ "--qw-compat-tag-dimension-border-width": "1px",
452
+ "--qw-compat-tag-dimension-height-small": "12px",
453
+ "--qw-compat-tag-dimension-height-medium": "16px",
454
+ "--qw-compat-tag-dimension-height-large": "20px",
455
+ "--qw-compat-tag-dimension-padding-inline-small": "3px",
456
+ "--qw-compat-tag-dimension-padding-inline-medium": "4px",
457
+ "--qw-compat-tag-dimension-padding-inline-large": "5px",
458
+ "--qw-compat-tag-typography-line-height-small": "16px",
459
+ "--qw-compat-tag-typography-line-height-medium": "22px",
460
+ "--qw-compat-tag-typography-line-height-large": "22px",
461
+ "--qw-compat-tag-typography-font-size-small": "8px",
462
+ "--qw-compat-tag-typography-font-size-medium": "11px",
463
+ "--qw-compat-tag-typography-font-size-large": "11px",
450
464
  "--qw-compat-avatar-dimension-diameter-s": "40px",
451
465
  "--qw-compat-avatar-dimension-diameter-m": "50px",
452
466
  "--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
467
  "--qw-compat-avatar-dimension-border-width": "1px",
463
- "--qw-compat-avatar-dimension-badge-font-size": "10px",
468
+ "--qw-compat-avatar-dimension-badge-font-size": "11px",
464
469
  "--qw-compat-avatar-dimension-badge-line-height": "16px",
465
470
  "--qw-compat-avatar-dimension-badge-padding": "5px",
466
471
  "--qw-compat-avatar-color-badge-border": "#FFFFFF",
472
+ "--qw-compat-textarea-color-paste-text": "#FFFFFF",
473
+ "--qw-compat-tabs-dimension-border-width": "1px",
474
+ "--qw-compat-image-dimension-border-width": "1px",
467
475
  } as const;
468
476
  export const darkTokens = {
469
477
  "--qw-ref-color-brand-a5": "rgba(0, 17, 255, 0.05)",
@@ -897,17 +905,29 @@ export type SemTokenPath =
897
905
  | `typography-${SemTypeSuffix}`
898
906
  | `motion-${SemMotionSuffix}`
899
907
  | `effect-${SemEffectSuffix}`;
900
- export const compatComponents = ["avatar","button","loading"] as const;
908
+ export const compatComponents = ["avatar","button","image","loading","tabs","tag","textarea"] as const;
901
909
  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;
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;
903
911
  export type CompatAvatarSuffix = (typeof compatAvatarSuffixes)[number];
904
912
  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
913
  export type CompatButtonSuffix = (typeof compatButtonSuffixes)[number];
914
+ export const compatImageSuffixes = ["dimension-border-width"] as const;
915
+ export type CompatImageSuffix = (typeof compatImageSuffixes)[number];
906
916
  export const compatLoadingSuffixes = ["color-logo","dimension-radius-surface"] as const;
907
917
  export type CompatLoadingSuffix = (typeof compatLoadingSuffixes)[number];
918
+ export const compatTabsSuffixes = ["dimension-border-width"] as const;
919
+ 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;
921
+ export type CompatTagSuffix = (typeof compatTagSuffixes)[number];
922
+ export const compatTextareaSuffixes = ["color-paste-text"] as const;
923
+ export type CompatTextareaSuffix = (typeof compatTextareaSuffixes)[number];
908
924
  export type CompatSuffix<C extends CompatComponent> =
909
925
  C extends "avatar" ? CompatAvatarSuffix :
910
926
  C extends "button" ? CompatButtonSuffix :
927
+ C extends "image" ? CompatImageSuffix :
911
928
  C extends "loading" ? CompatLoadingSuffix :
929
+ C extends "tabs" ? CompatTabsSuffix :
930
+ C extends "tag" ? CompatTagSuffix :
931
+ C extends "textarea" ? CompatTextareaSuffix :
912
932
  never;
913
- export const compatTokenCount = 56 as const;
933
+ export const compatTokenCount = 64 as const;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@qw-ui/tokens",
3
- "version": "0.2.0-next.0",
3
+ "version": "0.3.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",
@@ -53,8 +53,8 @@
53
53
  "tsx": "^4.22.4",
54
54
  "typescript": "^6.0.3",
55
55
  "vitest": "^4.1.9",
56
- "@qw-ui/tsconfig": "0.0.0",
57
- "@qw-ui/eslint-config": "0.0.0"
56
+ "@qw-ui/eslint-config": "0.0.1",
57
+ "@qw-ui/tsconfig": "0.0.1"
58
58
  },
59
59
  "size-limit": [
60
60
  {