@qw-ui/tokens 0.2.0 → 0.3.0-next.10

package/dist/tokens.ts

@@ -275,6 +275,7 @@ export const lightTokens = {
   "--qw-ref-size-radius-sm": "4px",
   "--qw-ref-size-radius-md": "8px",
   "--qw-ref-size-radius-lg": "14px",
+  "--qw-ref-size-radius-xl": "16px",
   "--qw-ref-size-radius-full": "9999px",
   "--qw-ref-size-control-size-sm": "32px",
   "--qw-ref-size-control-size-md": "40px",
@@ -282,7 +283,20 @@ export const lightTokens = {
   "--qw-ref-size-icon-size-sm": "16px",
   "--qw-ref-size-icon-size-md": "20px",
   "--qw-ref-size-icon-size-lg": "24px",
-  "--qw-ref-size-border-width-hairline": "1px",
+  "--qw-ref-size-stroke-width-half": "0.5px",
+  "--qw-ref-size-stroke-width-base": "1px",
+  "--qw-ref-size-stroke-width-double": "2px",
+  "--qw-ref-size-stroke-width-triple": "3px",
+  "--qw-ref-size-action-control-height-2xs": "24px",
+  "--qw-ref-size-action-control-height-xs": "28px",
+  "--qw-ref-size-action-control-height-sm": "32px",
+  "--qw-ref-size-action-control-height-md": "36px",
+  "--qw-ref-size-action-control-height-lg": "42px",
+  "--qw-ref-size-action-control-height-xl": "50px",
+  "--qw-ref-size-action-control-icon-2xs": "14px",
+  "--qw-ref-size-avatar-diameter-sm": "40px",
+  "--qw-ref-size-avatar-diameter-md": "50px",
+  "--qw-ref-size-avatar-diameter-lg": "58px",
   "--qw-ref-typography-line-height-tight": "1.25",
   "--qw-ref-typography-line-height-normal": "1.5",
   "--qw-ref-typography-line-height-relaxed": "1.75",
@@ -304,6 +318,7 @@ export const lightTokens = {
   "--qw-ref-typography-font-weight-medium": "500",
   "--qw-ref-typography-font-weight-semibold": "600",
   "--qw-ref-typography-font-size-base": "14px",
+  "--qw-ref-typography-font-size-xs": "11px",
   "--qw-ref-typography-font-size-sm": "12px",
   "--qw-ref-typography-font-size-lg": "16px",
   "--qw-ref-typography-font-size-xl": "20px",
@@ -316,8 +331,10 @@ export const lightTokens = {
   "--qw-ref-effect-shadow-sm": "0px 1px 2px 0px rgba(0, 0, 0, 0.08)",
   "--qw-ref-effect-shadow-md": "0px 4px 12px 0px rgba(0, 0, 0, 0.12)",
   "--qw-ref-effect-shadow-lg": "0px 8px 24px 0px rgba(0, 0, 0, 0.16)",
+  "--qw-sem-size-radius-sm": "4px",
   "--qw-sem-size-radius-control": "8px",
   "--qw-sem-size-radius-card": "14px",
+  "--qw-sem-size-radius-xl": "16px",
   "--qw-sem-size-radius-pill": "9999px",
   "--qw-sem-size-radius-full": "9999px",
   "--qw-sem-size-control-height-sm": "32px",
@@ -326,6 +343,40 @@ export const lightTokens = {
   "--qw-sem-size-icon-size-sm": "16px",
   "--qw-sem-size-icon-size-md": "20px",
   "--qw-sem-size-icon-size-lg": "24px",
+  "--qw-sem-size-action-control-height-2xs": "24px",
+  "--qw-sem-size-action-control-height-xs": "28px",
+  "--qw-sem-size-action-control-height-sm": "32px",
+  "--qw-sem-size-action-control-height-md": "36px",
+  "--qw-sem-size-action-control-height-lg": "42px",
+  "--qw-sem-size-action-control-height-xl": "50px",
+  "--qw-sem-size-action-control-padding-inline-2xs": "8px",
+  "--qw-sem-size-action-control-padding-inline-xs": "8px",
+  "--qw-sem-size-action-control-padding-inline-sm": "16px",
+  "--qw-sem-size-action-control-padding-inline-md": "16px",
+  "--qw-sem-size-action-control-padding-inline-lg": "20px",
+  "--qw-sem-size-action-control-padding-inline-xl": "32px",
+  "--qw-sem-size-action-control-icon-2xs": "14px",
+  "--qw-sem-size-action-control-icon-xs": "16px",
+  "--qw-sem-size-action-control-icon-sm": "16px",
+  "--qw-sem-size-action-control-icon-md": "16px",
+  "--qw-sem-size-action-control-icon-lg": "16px",
+  "--qw-sem-size-action-control-icon-xl": "20px",
+  "--qw-sem-size-action-control-gap-2xs": "4px",
+  "--qw-sem-size-action-control-gap-xs": "4px",
+  "--qw-sem-size-action-control-gap-sm": "8px",
+  "--qw-sem-size-action-control-gap-md": "8px",
+  "--qw-sem-size-action-control-gap-lg": "8px",
+  "--qw-sem-size-action-control-gap-xl": "8px",
+  "--qw-sem-size-border-width-default": "1px",
+  "--qw-sem-size-border-width-strong": "2px",
+  "--qw-sem-size-divider-width-thin": "0.5px",
+  "--qw-sem-size-divider-width-default": "1px",
+  "--qw-sem-size-focus-ring-width": "2px",
+  "--qw-sem-size-focus-ring-offset": "2px",
+  "--qw-sem-size-indicator-loading": "2px",
+  "--qw-sem-size-avatar-diameter-sm": "40px",
+  "--qw-sem-size-avatar-diameter-md": "50px",
+  "--qw-sem-size-avatar-diameter-lg": "58px",
   "--qw-sem-size-inset-sm": "8px",
   "--qw-sem-size-stack-sm": "8px",
   "--qw-sem-size-inset-md": "16px",
@@ -370,6 +421,16 @@ export const lightTokens = {
   "--qw-sem-typography-caption-font-weight": "400",
   "--qw-sem-typography-caption-line-height": "1.5",
   "--qw-sem-typography-caption-letter-spacing": "0px",
+  "--qw-sem-typography-body-lg-font-family": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+  "--qw-sem-typography-body-lg-font-size": "16px",
+  "--qw-sem-typography-body-lg-font-weight": "400",
+  "--qw-sem-typography-body-lg-line-height": "1.5",
+  "--qw-sem-typography-body-lg-letter-spacing": "0px",
+  "--qw-sem-typography-label-sm-font-family": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+  "--qw-sem-typography-label-sm-font-size": "11px",
+  "--qw-sem-typography-label-sm-font-weight": "500",
+  "--qw-sem-typography-label-sm-line-height": "1.5",
+  "--qw-sem-typography-label-sm-letter-spacing": "0px",
   "--qw-sem-typography-code-font-family": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
   "--qw-sem-typography-code-font-size": "12px",
   "--qw-sem-typography-code-font-weight": "400",
@@ -384,86 +445,64 @@ export const lightTokens = {
   "--qw-sem-color-surface-elevated": "#ffffff",
   "--qw-sem-color-surface-header": "#EEEEEE",
   "--qw-sem-color-surface-brand-subtle": "#EBF5FF",
+  "--qw-sem-color-surface-canvas": "#ffffff",
+  "--qw-sem-color-surface-sunken": "#EEEEEE",
+  "--qw-sem-color-surface-selected": "rgba(34, 34, 34, 0.05)",
+  "--qw-sem-color-surface-inverse": "#353535",
+  "--qw-sem-color-surface-canvas-subtle": "#F6F6F6",
   "--qw-sem-color-content-primary": "#222222",
   "--qw-sem-color-content-secondary": "#666666",
   "--qw-sem-color-content-tertiary": "#999999",
   "--qw-sem-color-content-placeholder": "#CCCCCC",
   "--qw-sem-color-content-intro": "#A2A9B6",
+  "--qw-sem-color-content-disabled": "rgba(34, 34, 34, 0.3)",
+  "--qw-sem-color-content-link": "#003DB8",
+  "--qw-sem-color-content-icon-subtle": "rgba(34, 34, 34, 0.05)",
+  "--qw-sem-color-content-inverse": "#ffffff",
+  "--qw-sem-color-content-on-solid": "#ffffff",
+  "--qw-sem-color-content-on-warning-subtle": "#453200",
   "--qw-sem-color-border-default": "#EEEEEE",
   "--qw-sem-color-border-strong": "#CCCCCC",
   "--qw-sem-color-border-focus": "#0011ff",
+  "--qw-sem-color-border-subtle": "rgba(34, 34, 34, 0.05)",
+  "--qw-sem-color-border-disabled": "rgba(34, 34, 34, 0.1)",
+  "--qw-sem-color-border-on-media": "#ffffff",
   "--qw-sem-color-fill-subtle": "#F6F6F6",
   "--qw-sem-color-fill-hover": "#EEEEEE",
   "--qw-sem-color-fill-active": "#EBF5FF",
   "--qw-sem-color-fill-disabled": "#F6F6F6",
+  "--qw-sem-color-fill-track": "rgba(34, 34, 34, 0.1)",
   "--qw-sem-color-action-brand": "#0011ff",
   "--qw-sem-color-action-product": "#0d53ff",
   "--qw-sem-color-action-selected": "rgba(13, 83, 255, 0.2)",
   "--qw-sem-color-action-inverse": "#ffffff",
+  "--qw-sem-color-control-action-brand-subtle": "rgba(0, 17, 255, 0.1)",
+  "--qw-sem-color-control-action-product-subtle": "rgba(13, 83, 255, 0.1)",
+  "--qw-sem-color-control-action-danger-default": "#FF5745",
+  "--qw-sem-color-control-action-danger-subtle": "rgba(255, 64, 64, 0.1)",
+  "--qw-sem-color-control-action-neutral-subtle": "rgba(34, 34, 34, 0.05)",
+  "--qw-sem-color-control-selection-brand": "rgba(0, 17, 255, 0.1)",
+  "--qw-sem-color-control-selection-product": "rgba(13, 83, 255, 0.1)",
+  "--qw-sem-color-selection-text-background": "rgba(13, 83, 255, 0.2)",
   "--qw-sem-color-status-success": "#1f993f",
   "--qw-sem-color-status-warning": "#ffd575",
   "--qw-sem-color-status-danger": "#FF5745",
   "--qw-sem-color-status-info": "#0d53ff",
+  "--qw-sem-color-status-success-subtle": "rgba(31, 153, 63, 0.1)",
+  "--qw-sem-color-status-warning-subtle": "rgba(255, 213, 117, 0.2)",
+  "--qw-sem-color-status-danger-subtle": "rgba(255, 64, 64, 0.1)",
+  "--qw-sem-color-status-info-subtle": "rgba(13, 83, 255, 0.1)",
   "--qw-sem-color-overlay-scrim": "rgba(34, 34, 34, 0.5)",
-  "--qw-sem-color-overlay-guide": "rgba(34, 34, 34, 0.7)",
+  "--qw-sem-color-overlay-guide": "rgba(13, 83, 255, 0.1)",
+  "--qw-sem-color-overlay-media-subtle": "rgba(34, 34, 34, 0.4)",
+  "--qw-sem-color-overlay-media-strong": "rgba(34, 34, 34, 0.5)",
   "--qw-sem-color-shadow": "rgba(34, 34, 34, 0.1)",
+  "--qw-sem-effect-shadow-card-color": "rgba(34, 34, 34, 0.1)",
+  "--qw-sem-effect-shadow-floating-color": "rgba(34, 34, 34, 0.1)",
+  "--qw-sem-effect-shadow-dialog-color": "rgba(34, 34, 34, 0.1)",
+  "--qw-sem-effect-shadow-card": "0px 1px 2px 0px rgba(34, 34, 34, 0.1)",
+  "--qw-sem-effect-shadow-floating": "0px 4px 12px 0px rgba(34, 34, 34, 0.1)",
   "--qw-sem-effect-shadow-dialog": "0px 8px 24px 0px rgba(34, 34, 34, 0.1)",
-  "--qw-compat-button-dimension-height-mini": "24px",
-  "--qw-compat-button-dimension-height-xs": "28px",
-  "--qw-compat-button-dimension-height-s": "32px",
-  "--qw-compat-button-dimension-height-normal": "36px",
-  "--qw-compat-button-dimension-height-m": "42px",
-  "--qw-compat-button-dimension-height-l": "50px",
-  "--qw-compat-button-dimension-square-mini": "24px",
-  "--qw-compat-button-dimension-square-xs": "28px",
-  "--qw-compat-button-dimension-square-s": "32px",
-  "--qw-compat-button-dimension-square-normal": "36px",
-  "--qw-compat-button-dimension-square-m": "42px",
-  "--qw-compat-button-dimension-square-l": "50px",
-  "--qw-compat-button-dimension-padding-inline-mini": "8px",
-  "--qw-compat-button-dimension-padding-inline-xs": "8px",
-  "--qw-compat-button-dimension-padding-inline-s": "16px",
-  "--qw-compat-button-dimension-padding-inline-normal": "16px",
-  "--qw-compat-button-dimension-padding-inline-m": "20px",
-  "--qw-compat-button-dimension-padding-inline-l": "32px",
-  "--qw-compat-button-dimension-icon-mini": "14px",
-  "--qw-compat-button-dimension-icon-xs": "16px",
-  "--qw-compat-button-dimension-icon-s": "16px",
-  "--qw-compat-button-dimension-icon-normal": "16px",
-  "--qw-compat-button-dimension-icon-m": "16px",
-  "--qw-compat-button-dimension-icon-l": "20px",
-  "--qw-compat-button-dimension-gap-mini": "4px",
-  "--qw-compat-button-dimension-gap-xs": "4px",
-  "--qw-compat-button-dimension-gap-s": "8px",
-  "--qw-compat-button-dimension-gap-normal": "8px",
-  "--qw-compat-button-dimension-gap-m": "8px",
-  "--qw-compat-button-dimension-gap-l": "8px",
-  "--qw-compat-button-dimension-border-width": "1px",
-  "--qw-compat-button-dimension-focus-ring-width": "2px",
-  "--qw-compat-button-dimension-focus-ring-offset": "2px",
-  "--qw-compat-button-dimension-spinner-stroke": "2px",
-  "--qw-compat-button-color-bg-soft-brand": "rgba(0, 68, 255, 0.1)",
-  "--qw-compat-button-color-bg-soft-danger": "rgba(255, 87, 69, 0.1)",
-  "--qw-compat-button-color-bg-neutral-gray": "rgba(34, 34, 34, 0.06)",
-  "--qw-compat-loading-color-logo": "rgba(34, 34, 34, 0.06)",
-  "--qw-compat-loading-dimension-radius-surface": "16px",
-  "--qw-compat-avatar-dimension-diameter-s": "40px",
-  "--qw-compat-avatar-dimension-diameter-m": "50px",
-  "--qw-compat-avatar-dimension-diameter-l": "58px",
-  "--qw-compat-avatar-dimension-font-size-s": "12px",
-  "--qw-compat-avatar-dimension-font-size-m": "16px",
-  "--qw-compat-avatar-dimension-font-size-l": "18px",
-  "--qw-compat-avatar-dimension-badge-size-s": "10px",
-  "--qw-compat-avatar-dimension-badge-size-m": "12px",
-  "--qw-compat-avatar-dimension-badge-size-l": "12px",
-  "--qw-compat-avatar-dimension-badge-offset-s": "-2px",
-  "--qw-compat-avatar-dimension-badge-offset-m": "-4px",
-  "--qw-compat-avatar-dimension-badge-offset-l": "-4px",
-  "--qw-compat-avatar-dimension-border-width": "1px",
-  "--qw-compat-avatar-dimension-badge-font-size": "10px",
-  "--qw-compat-avatar-dimension-badge-line-height": "16px",
-  "--qw-compat-avatar-dimension-badge-padding": "5px",
-  "--qw-compat-avatar-color-badge-border": "#FFFFFF",
 } as const;
 export const darkTokens = {
   "--qw-ref-color-brand-a5": "rgba(0, 17, 255, 0.05)",
@@ -741,6 +780,7 @@ export const darkTokens = {
   "--qw-ref-size-radius-sm": "4px",
   "--qw-ref-size-radius-md": "8px",
   "--qw-ref-size-radius-lg": "14px",
+  "--qw-ref-size-radius-xl": "16px",
   "--qw-ref-size-radius-full": "9999px",
   "--qw-ref-size-control-size-sm": "32px",
   "--qw-ref-size-control-size-md": "40px",
@@ -748,7 +788,20 @@ export const darkTokens = {
   "--qw-ref-size-icon-size-sm": "16px",
   "--qw-ref-size-icon-size-md": "20px",
   "--qw-ref-size-icon-size-lg": "24px",
-  "--qw-ref-size-border-width-hairline": "1px",
+  "--qw-ref-size-stroke-width-half": "0.5px",
+  "--qw-ref-size-stroke-width-base": "1px",
+  "--qw-ref-size-stroke-width-double": "2px",
+  "--qw-ref-size-stroke-width-triple": "3px",
+  "--qw-ref-size-action-control-height-2xs": "24px",
+  "--qw-ref-size-action-control-height-xs": "28px",
+  "--qw-ref-size-action-control-height-sm": "32px",
+  "--qw-ref-size-action-control-height-md": "36px",
+  "--qw-ref-size-action-control-height-lg": "42px",
+  "--qw-ref-size-action-control-height-xl": "50px",
+  "--qw-ref-size-action-control-icon-2xs": "14px",
+  "--qw-ref-size-avatar-diameter-sm": "40px",
+  "--qw-ref-size-avatar-diameter-md": "50px",
+  "--qw-ref-size-avatar-diameter-lg": "58px",
   "--qw-ref-typography-line-height-tight": "1.25",
   "--qw-ref-typography-line-height-normal": "1.5",
   "--qw-ref-typography-line-height-relaxed": "1.75",
@@ -770,6 +823,7 @@ export const darkTokens = {
   "--qw-ref-typography-font-weight-medium": "500",
   "--qw-ref-typography-font-weight-semibold": "600",
   "--qw-ref-typography-font-size-base": "14px",
+  "--qw-ref-typography-font-size-xs": "11px",
   "--qw-ref-typography-font-size-sm": "12px",
   "--qw-ref-typography-font-size-lg": "16px",
   "--qw-ref-typography-font-size-xl": "20px",
@@ -782,8 +836,10 @@ export const darkTokens = {
   "--qw-ref-effect-shadow-sm": "0px 1px 2px 0px rgba(0, 0, 0, 0.08)",
   "--qw-ref-effect-shadow-md": "0px 4px 12px 0px rgba(0, 0, 0, 0.12)",
   "--qw-ref-effect-shadow-lg": "0px 8px 24px 0px rgba(0, 0, 0, 0.16)",
+  "--qw-sem-size-radius-sm": "4px",
   "--qw-sem-size-radius-control": "8px",
   "--qw-sem-size-radius-card": "14px",
+  "--qw-sem-size-radius-xl": "16px",
   "--qw-sem-size-radius-pill": "9999px",
   "--qw-sem-size-radius-full": "9999px",
   "--qw-sem-size-control-height-sm": "32px",
@@ -792,6 +848,40 @@ export const darkTokens = {
   "--qw-sem-size-icon-size-sm": "16px",
   "--qw-sem-size-icon-size-md": "20px",
   "--qw-sem-size-icon-size-lg": "24px",
+  "--qw-sem-size-action-control-height-2xs": "24px",
+  "--qw-sem-size-action-control-height-xs": "28px",
+  "--qw-sem-size-action-control-height-sm": "32px",
+  "--qw-sem-size-action-control-height-md": "36px",
+  "--qw-sem-size-action-control-height-lg": "42px",
+  "--qw-sem-size-action-control-height-xl": "50px",
+  "--qw-sem-size-action-control-padding-inline-2xs": "8px",
+  "--qw-sem-size-action-control-padding-inline-xs": "8px",
+  "--qw-sem-size-action-control-padding-inline-sm": "16px",
+  "--qw-sem-size-action-control-padding-inline-md": "16px",
+  "--qw-sem-size-action-control-padding-inline-lg": "20px",
+  "--qw-sem-size-action-control-padding-inline-xl": "32px",
+  "--qw-sem-size-action-control-icon-2xs": "14px",
+  "--qw-sem-size-action-control-icon-xs": "16px",
+  "--qw-sem-size-action-control-icon-sm": "16px",
+  "--qw-sem-size-action-control-icon-md": "16px",
+  "--qw-sem-size-action-control-icon-lg": "16px",
+  "--qw-sem-size-action-control-icon-xl": "20px",
+  "--qw-sem-size-action-control-gap-2xs": "4px",
+  "--qw-sem-size-action-control-gap-xs": "4px",
+  "--qw-sem-size-action-control-gap-sm": "8px",
+  "--qw-sem-size-action-control-gap-md": "8px",
+  "--qw-sem-size-action-control-gap-lg": "8px",
+  "--qw-sem-size-action-control-gap-xl": "8px",
+  "--qw-sem-size-border-width-default": "1px",
+  "--qw-sem-size-border-width-strong": "2px",
+  "--qw-sem-size-divider-width-thin": "0.5px",
+  "--qw-sem-size-divider-width-default": "1px",
+  "--qw-sem-size-focus-ring-width": "2px",
+  "--qw-sem-size-focus-ring-offset": "2px",
+  "--qw-sem-size-indicator-loading": "2px",
+  "--qw-sem-size-avatar-diameter-sm": "40px",
+  "--qw-sem-size-avatar-diameter-md": "50px",
+  "--qw-sem-size-avatar-diameter-lg": "58px",
   "--qw-sem-size-inset-sm": "8px",
   "--qw-sem-size-stack-sm": "8px",
   "--qw-sem-size-inset-md": "16px",
@@ -836,6 +926,16 @@ export const darkTokens = {
   "--qw-sem-typography-caption-font-weight": "400",
   "--qw-sem-typography-caption-line-height": "1.5",
   "--qw-sem-typography-caption-letter-spacing": "0px",
+  "--qw-sem-typography-body-lg-font-family": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+  "--qw-sem-typography-body-lg-font-size": "16px",
+  "--qw-sem-typography-body-lg-font-weight": "400",
+  "--qw-sem-typography-body-lg-line-height": "1.5",
+  "--qw-sem-typography-body-lg-letter-spacing": "0px",
+  "--qw-sem-typography-label-sm-font-family": "system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif",
+  "--qw-sem-typography-label-sm-font-size": "11px",
+  "--qw-sem-typography-label-sm-font-weight": "500",
+  "--qw-sem-typography-label-sm-line-height": "1.5",
+  "--qw-sem-typography-label-sm-letter-spacing": "0px",
   "--qw-sem-typography-code-font-family": "ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace",
   "--qw-sem-typography-code-font-size": "12px",
   "--qw-sem-typography-code-font-weight": "400",
@@ -850,42 +950,72 @@ export const darkTokens = {
   "--qw-sem-color-surface-elevated": "#2D2D2D",
   "--qw-sem-color-surface-header": "#3A3A3A",
   "--qw-sem-color-surface-brand-subtle": "#001D66",
+  "--qw-sem-color-surface-canvas": "#121212",
+  "--qw-sem-color-surface-sunken": "#2D2D2D",
+  "--qw-sem-color-surface-selected": "rgba(255, 255, 255, 0.1)",
+  "--qw-sem-color-surface-inverse": "#353535",
+  "--qw-sem-color-surface-canvas-subtle": "#121212",
   "--qw-sem-color-content-primary": "#ffffff",
   "--qw-sem-color-content-secondary": "#999999",
   "--qw-sem-color-content-tertiary": "#666666",
   "--qw-sem-color-content-placeholder": "rgba(255, 255, 255, 0.3)",
   "--qw-sem-color-content-intro": "#888E99",
+  "--qw-sem-color-content-disabled": "rgba(255, 255, 255, 0.3)",
+  "--qw-sem-color-content-link": "#3086FF",
+  "--qw-sem-color-content-icon-subtle": "rgba(255, 255, 255, 0.1)",
+  "--qw-sem-color-content-inverse": "#222222",
+  "--qw-sem-color-content-on-solid": "#ffffff",
+  "--qw-sem-color-content-on-warning-subtle": "#F4D38B",
   "--qw-sem-color-border-default": "#3A3A3A",
   "--qw-sem-color-border-strong": "#666666",
   "--qw-sem-color-border-focus": "#426EFF",
+  "--qw-sem-color-border-subtle": "rgba(255, 255, 255, 0.05)",
+  "--qw-sem-color-border-disabled": "rgba(255, 255, 255, 0.1)",
+  "--qw-sem-color-border-on-media": "#ffffff",
   "--qw-sem-color-fill-subtle": "rgba(255, 255, 255, 0.2)",
   "--qw-sem-color-fill-hover": "#2D2D2D",
   "--qw-sem-color-fill-active": "#001D66",
   "--qw-sem-color-fill-disabled": "#202020",
+  "--qw-sem-color-fill-track": "rgba(255, 255, 255, 0.2)",
   "--qw-sem-color-action-brand": "#426EFF",
   "--qw-sem-color-action-product": "#266FFF",
   "--qw-sem-color-action-selected": "rgba(13, 83, 255, 0.4)",
   "--qw-sem-color-action-inverse": "#222222",
+  "--qw-sem-color-control-action-brand-subtle": "rgba(0, 17, 255, 0.2)",
+  "--qw-sem-color-control-action-product-subtle": "rgba(13, 83, 255, 0.2)",
+  "--qw-sem-color-control-action-danger-default": "#FF5745",
+  "--qw-sem-color-control-action-danger-subtle": "rgba(255, 64, 64, 0.2)",
+  "--qw-sem-color-control-action-neutral-subtle": "rgba(255, 255, 255, 0.1)",
+  "--qw-sem-color-control-selection-brand": "rgba(0, 17, 255, 0.2)",
+  "--qw-sem-color-control-selection-product": "rgba(13, 83, 255, 0.2)",
+  "--qw-sem-color-selection-text-background": "rgba(13, 83, 255, 0.4)",
   "--qw-sem-color-status-success": "#1f993f",
   "--qw-sem-color-status-warning": "#ffd575",
   "--qw-sem-color-status-danger": "#FF5745",
   "--qw-sem-color-status-info": "#266FFF",
+  "--qw-sem-color-status-success-subtle": "rgba(31, 153, 63, 0.2)",
+  "--qw-sem-color-status-warning-subtle": "rgba(255, 213, 117, 0.2)",
+  "--qw-sem-color-status-danger-subtle": "rgba(255, 64, 64, 0.2)",
+  "--qw-sem-color-status-info-subtle": "rgba(13, 83, 255, 0.2)",
   "--qw-sem-color-overlay-scrim": "rgba(34, 34, 34, 0.7)",
-  "--qw-sem-color-overlay-guide": "rgba(34, 34, 34, 0.7)",
+  "--qw-sem-color-overlay-guide": "rgba(13, 83, 255, 0.2)",
+  "--qw-sem-color-overlay-media-subtle": "rgba(34, 34, 34, 0.4)",
+  "--qw-sem-color-overlay-media-strong": "rgba(34, 34, 34, 0.5)",
   "--qw-sem-color-shadow": "rgba(34, 34, 34, 0.5)",
+  "--qw-sem-effect-shadow-card-color": "rgba(34, 34, 34, 0.5)",
+  "--qw-sem-effect-shadow-floating-color": "rgba(34, 34, 34, 0.5)",
+  "--qw-sem-effect-shadow-dialog-color": "rgba(34, 34, 34, 0.5)",
+  "--qw-sem-effect-shadow-card": "0px 1px 2px 0px rgba(34, 34, 34, 0.5)",
+  "--qw-sem-effect-shadow-floating": "0px 4px 12px 0px rgba(34, 34, 34, 0.5)",
   "--qw-sem-effect-shadow-dialog": "0px 8px 24px 0px rgba(34, 34, 34, 0.5)",
-  "--qw-compat-button-color-bg-soft-brand": "rgba(66, 110, 255, 0.24)",
-  "--qw-compat-button-color-bg-soft-danger": "rgba(254, 135, 122, 0.2)",
-  "--qw-compat-button-color-bg-neutral-gray": "rgba(255, 255, 255, 0.1)",
-  "--qw-compat-loading-color-logo": "rgba(255, 255, 255, 0.1)",
 } as const;
 export type TokenName = keyof typeof lightTokens;
 export type RefTokenPath = TokenName extends `--qw-ref-${infer P}` ? P : never;
-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;
-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;
-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;
+export const semColorSuffixes = ["surface-base","surface-subtle","surface-elevated","surface-header","surface-brand-subtle","surface-canvas","surface-sunken","surface-selected","surface-inverse","surface-canvas-subtle","content-primary","content-secondary","content-tertiary","content-placeholder","content-intro","content-disabled","content-link","content-icon-subtle","content-inverse","content-on-solid","content-on-warning-subtle","border-default","border-strong","border-focus","border-subtle","border-disabled","border-on-media","fill-subtle","fill-hover","fill-active","fill-disabled","fill-track","action-brand","action-product","action-selected","action-inverse","control-action-brand-subtle","control-action-product-subtle","control-action-danger-default","control-action-danger-subtle","control-action-neutral-subtle","control-selection-brand","control-selection-product","selection-text-background","status-success","status-warning","status-danger","status-info","status-success-subtle","status-warning-subtle","status-danger-subtle","status-info-subtle","overlay-scrim","overlay-guide","overlay-media-subtle","overlay-media-strong","shadow"] as const;
+export const semSizeSuffixes = ["radius-sm","radius-control","radius-card","radius-xl","radius-pill","radius-full","control-height-sm","control-height-md","control-height-lg","icon-size-sm","icon-size-md","icon-size-lg","action-control-height-2xs","action-control-height-xs","action-control-height-sm","action-control-height-md","action-control-height-lg","action-control-height-xl","action-control-padding-inline-2xs","action-control-padding-inline-xs","action-control-padding-inline-sm","action-control-padding-inline-md","action-control-padding-inline-lg","action-control-padding-inline-xl","action-control-icon-2xs","action-control-icon-xs","action-control-icon-sm","action-control-icon-md","action-control-icon-lg","action-control-icon-xl","action-control-gap-2xs","action-control-gap-xs","action-control-gap-sm","action-control-gap-md","action-control-gap-lg","action-control-gap-xl","border-width-default","border-width-strong","divider-width-thin","divider-width-default","focus-ring-width","focus-ring-offset","indicator-loading","avatar-diameter-sm","avatar-diameter-md","avatar-diameter-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;
+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","body-lg-font-family","body-lg-font-size","body-lg-font-weight","body-lg-line-height","body-lg-letter-spacing","label-sm-font-family","label-sm-font-size","label-sm-font-weight","label-sm-line-height","label-sm-letter-spacing","code-font-family","code-font-size","code-font-weight","code-line-height","code-letter-spacing"] as const;
 export const semMotionSuffixes = ["duration-fast","duration-base","duration-slow","easing-standard"] as const;
-export const semEffectSuffixes = ["shadow-dialog"] as const;
+export const semEffectSuffixes = ["shadow-card-color","shadow-floating-color","shadow-dialog-color","shadow-card","shadow-floating","shadow-dialog"] as const;
 export type SemColorSuffix = (typeof semColorSuffixes)[number];
 export type SemSizeSuffix = (typeof semSizeSuffixes)[number];
 export type SemTypeSuffix = (typeof semTypeSuffixes)[number];
@@ -897,17 +1027,3 @@ export type SemTokenPath =
   | `typography-${SemTypeSuffix}`
   | `motion-${SemMotionSuffix}`
   | `effect-${SemEffectSuffix}`;
-export const compatComponents = ["avatar","button","loading"] as const;
-export type CompatComponent = (typeof compatComponents)[number];
-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;
-export type CompatAvatarSuffix = (typeof compatAvatarSuffixes)[number];
-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;
-export type CompatButtonSuffix = (typeof compatButtonSuffixes)[number];
-export const compatLoadingSuffixes = ["color-logo","dimension-radius-surface"] as const;
-export type CompatLoadingSuffix = (typeof compatLoadingSuffixes)[number];
-export type CompatSuffix<C extends CompatComponent> =
-  C extends "avatar" ? CompatAvatarSuffix :
-  C extends "button" ? CompatButtonSuffix :
-  C extends "loading" ? CompatLoadingSuffix :
-  never;
-export const compatTokenCount = 56 as const;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qw-ui/tokens",
-  "version": "0.2.0",
+  "version": "0.3.0-next.10",
   "description": "QW token pipeline: Figma Color variables are the color source of truth; code validates snapshots and builds CSS / TS exits.",
   "license": "MIT",
   "author": "qw-ui contributors",
@@ -30,6 +30,7 @@
     },
     "./tokens.css": "./dist/tokens.css",
     "./tokens.live.css": "./dist/tokens.live.css",
+    "./tailwind.css": "./dist/tailwind.css",
     "./tokens.json": "./dist/tokens.json",
     "./token-paths": {
       "types": "./dist/tokens.ts"

package/dist/compat/build.d.ts

@@ -1,14 +0,0 @@
-import { type CompatEntry, type CompatRegistry } from "./schema.js";
-export interface CompatBuild {
-    light: Record<string, string>;
-    dark: Record<string, string>;
-    /** path → cssVar */
-    paths: Record<string, string>;
-    /** component → suffix[] */
-    byComponent: Record<string, string[]>;
-    entries: CompatEntry[];
-    graceDays: number;
-}
-export declare function buildCompatFromRegistry(registry: CompatRegistry): CompatBuild;
-/** 生成 compat token-paths TypeScript 片段（并入 tokens.ts） */
-export declare function formatCompatTypes(build: CompatBuild): string;

package/dist/compat/color.d.ts

@@ -1,8 +0,0 @@
-/**
- * 将 legacy hex（含 /NN% 透明度后缀）或 DTCG srgb 结构转为 CSS 颜色字符串。
- */
-export declare function compatColorToCss(input: string | {
-    colorSpace: "srgb";
-    components: [number, number, number];
-    alpha: number;
-}): string;

package/dist/compat/index.d.ts

@@ -1,5 +0,0 @@
-export { compatRegistrySchema, compatEntrySchema, compatPathToCssVar, compatComponentOf, compatSuffixOf, } from "./schema.js";
-export type { CompatEntry, CompatRegistry, CompatStatus } from "./schema.js";
-export { compatColorToCss } from "./color.js";
-export { buildCompatFromRegistry, formatCompatTypes, } from "./build.js";
-export type { CompatBuild } from "./build.js";

package/dist/compat/schema.d.ts

@@ -1,114 +0,0 @@
-import { z } from "zod";
-export declare const compatStatusSchema: z.ZodEnum<{
-    active: "active";
-    aliased: "aliased";
-    deprecated: "deprecated";
-}>;
-export declare const compatEntrySchema: z.ZodObject<{
-    path: z.ZodString;
-    type: z.ZodEnum<{
-        color: "color";
-        dimension: "dimension";
-        motion: "motion";
-        typography: "typography";
-    }>;
-    value: z.ZodUnion<readonly [z.ZodObject<{
-        light: z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
-            colorSpace: z.ZodLiteral<"srgb">;
-            components: z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber], null>;
-            alpha: z.ZodNumber;
-        }, z.core.$strip>, z.ZodString]>;
-        dark: z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
-            colorSpace: z.ZodLiteral<"srgb">;
-            components: z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber], null>;
-            alpha: z.ZodNumber;
-        }, z.core.$strip>, z.ZodString]>;
-    }, z.core.$strip>, z.ZodObject<{
-        value: z.ZodNumber;
-        unit: z.ZodEnum<{
-            "%": "%";
-            em: "em";
-            px: "px";
-            rem: "rem";
-        }>;
-    }, z.core.$strip>, z.ZodObject<{
-        aliasOf: z.ZodString;
-    }, z.core.$strip>]>;
-    source: z.ZodObject<{
-        figma: z.ZodString;
-        nodeId: z.ZodString;
-        legacyName: z.ZodNullable<z.ZodString>;
-    }, z.core.$strip>;
-    introducedBy: z.ZodString;
-    reason: z.ZodString;
-    owner: z.ZodString;
-    targetSemanticRole: z.ZodNullable<z.ZodString>;
-    status: z.ZodEnum<{
-        active: "active";
-        aliased: "aliased";
-        deprecated: "deprecated";
-    }>;
-    reviewAfter: z.ZodString;
-    migrationIssue: z.ZodNullable<z.ZodString>;
-}, z.core.$strip>;
-export declare const compatRegistrySchema: z.ZodObject<{
-    $description: z.ZodOptional<z.ZodString>;
-    version: z.ZodLiteral<1>;
-    graceDays: z.ZodDefault<z.ZodNumber>;
-    entries: z.ZodArray<z.ZodObject<{
-        path: z.ZodString;
-        type: z.ZodEnum<{
-            color: "color";
-            dimension: "dimension";
-            motion: "motion";
-            typography: "typography";
-        }>;
-        value: z.ZodUnion<readonly [z.ZodObject<{
-            light: z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
-                colorSpace: z.ZodLiteral<"srgb">;
-                components: z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber], null>;
-                alpha: z.ZodNumber;
-            }, z.core.$strip>, z.ZodString]>;
-            dark: z.ZodUnion<readonly [z.ZodString, z.ZodObject<{
-                colorSpace: z.ZodLiteral<"srgb">;
-                components: z.ZodTuple<[z.ZodNumber, z.ZodNumber, z.ZodNumber], null>;
-                alpha: z.ZodNumber;
-            }, z.core.$strip>, z.ZodString]>;
-        }, z.core.$strip>, z.ZodObject<{
-            value: z.ZodNumber;
-            unit: z.ZodEnum<{
-                "%": "%";
-                em: "em";
-                px: "px";
-                rem: "rem";
-            }>;
-        }, z.core.$strip>, z.ZodObject<{
-            aliasOf: z.ZodString;
-        }, z.core.$strip>]>;
-        source: z.ZodObject<{
-            figma: z.ZodString;
-            nodeId: z.ZodString;
-            legacyName: z.ZodNullable<z.ZodString>;
-        }, z.core.$strip>;
-        introducedBy: z.ZodString;
-        reason: z.ZodString;
-        owner: z.ZodString;
-        targetSemanticRole: z.ZodNullable<z.ZodString>;
-        status: z.ZodEnum<{
-            active: "active";
-            aliased: "aliased";
-            deprecated: "deprecated";
-        }>;
-        reviewAfter: z.ZodString;
-        migrationIssue: z.ZodNullable<z.ZodString>;
-    }, z.core.$strip>>;
-}, z.core.$strip>;
-export type CompatEntry = z.infer<typeof compatEntrySchema>;
-export type CompatRegistry = z.infer<typeof compatRegistrySchema>;
-export type CompatStatus = z.infer<typeof compatStatusSchema>;
-/** path → CSS 变量名：`button.color.bg-soft-brand` → `--qw-compat-button-color-bg-soft-brand` */
-export declare function compatPathToCssVar(path: string): string;
-/** path → component slug（第一段） */
-export declare function compatComponentOf(path: string): string;
-/** path → helper suffix（component 之后的段，用 `-` 连接） */
-export declare function compatSuffixOf(path: string): string;