@hanwenbo/x-taro-ui 0.0.1

package/lib/theme/runtime/componentTokens.js

@@ -0,0 +1,578 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/theme/runtime/componentTokens.ts
+var componentTokens_exports = {};
+__export(componentTokens_exports, {
+  ACTION_SHEET_SHADOW: () => ACTION_SHEET_SHADOW,
+  buildComponentSlotVariables: () => buildComponentSlotVariables,
+  buildSubtleShadow: () => buildSubtleShadow,
+  mixSolidColors: () => mixSolidColors
+});
+module.exports = __toCommonJS(componentTokens_exports);
+var import_design_system = require("../generated/design-system.generated");
+var import_selectionControl = require("../selectionControl");
+var px = (value) => `${Number(value.toFixed(3))}px`;
+var ACTION_SHEET_SHADOW = "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
+function mixAlpha(color, opacity) {
+  if (color.startsWith("#") && color.length === 7) {
+    const r = parseInt(color.slice(1, 3), 16);
+    const g = parseInt(color.slice(3, 5), 16);
+    const b = parseInt(color.slice(5, 7), 16);
+    return `rgba(${r}, ${g}, ${b}, ${opacity})`;
+  }
+  return color;
+}
+function parseColor(color) {
+  if (color.startsWith("#") && color.length === 7) {
+    return [
+      parseInt(color.slice(1, 3), 16),
+      parseInt(color.slice(3, 5), 16),
+      parseInt(color.slice(5, 7), 16)
+    ];
+  }
+  const rgb = color.match(/^rgba?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)/);
+  if (!rgb) return void 0;
+  return [Number(rgb[1]), Number(rgb[2]), Number(rgb[3])];
+}
+function mixSolidColors(foreground, background, weight) {
+  const foregroundRgb = parseColor(foreground);
+  const backgroundRgb = parseColor(background);
+  if (!foregroundRgb || !backgroundRgb) return mixAlpha(foreground, weight);
+  const mixed = foregroundRgb.map(
+    (channel, index) => Math.round(channel * weight + backgroundRgb[index] * (1 - weight))
+  );
+  return `rgb(${mixed[0]}, ${mixed[1]}, ${mixed[2]})`;
+}
+function buildSubtleShadow(color) {
+  return `0 1px 2px ${mixAlpha(color, 0.08)}`;
+}
+function buildActionSheetVariables(colors) {
+  return {
+    "--x-action-sheet-surface-default": colors.background,
+    "--x-action-sheet-surface-secondary": colors.secondary,
+    "--x-action-sheet-radius": "14px",
+    "--x-action-sheet-shadow": ACTION_SHEET_SHADOW,
+    "--x-action-sheet-extra-border": colors.border,
+    "--x-action-sheet-extra-foreground": colors["muted-foreground"],
+    "--x-action-sheet-item-foreground": colors.foreground,
+    "--x-action-sheet-item-hover-surface": colors.accent,
+    "--x-action-sheet-item-danger-foreground": colors.destructive,
+    "--x-action-sheet-item-danger-hover-surface": mixAlpha(colors.destructive, 0.1),
+    "--x-action-sheet-item-disabled-foreground": colors["muted-foreground"],
+    "--x-action-sheet-description-foreground": colors["muted-foreground"],
+    "--x-action-sheet-cancel-gap-surface": colors.muted,
+    "--x-action-sheet-cancel-surface": colors.background,
+    "--x-action-sheet-cancel-foreground": colors.foreground,
+    "--x-action-sheet-cancel-hover-surface": colors.accent,
+    "--x-action-sheet-divider": colors.border
+  };
+}
+function buildSegmentedVariables(colors) {
+  return {
+    "--x-segmented-surface-default": colors.muted,
+    "--x-segmented-surface-outline": colors.background,
+    "--x-segmented-surface-filled": colors.accent,
+    "--x-segmented-border-outline": colors.border,
+    "--x-segmented-thumb-default": colors.background,
+    "--x-segmented-thumb-outline": colors.muted,
+    "--x-segmented-thumb-filled": colors.primary,
+    "--x-segmented-text": colors["muted-foreground"],
+    "--x-segmented-text-active": colors.foreground,
+    "--x-segmented-text-active-filled": colors["primary-foreground"],
+    "--x-segmented-container-padding-mini": px((0, import_selectionControl.scaleMobileSelection)(2)),
+    "--x-segmented-container-padding-small": px((0, import_selectionControl.scaleMobileSelection)(4)),
+    "--x-segmented-container-padding-middle": px((0, import_selectionControl.scaleMobileSelection)(6)),
+    "--x-segmented-container-padding-large": px((0, import_selectionControl.scaleMobileSelection)(8)),
+    "--x-segmented-container-radius-mini": px((0, import_selectionControl.scaleMobileSelection)(import_design_system.designSystemRadius.lg)),
+    "--x-segmented-container-radius-small": px((0, import_selectionControl.scaleMobileSelection)(import_design_system.designSystemRadius.lg)),
+    "--x-segmented-container-radius-middle": px((0, import_selectionControl.scaleMobileSelection)(import_design_system.designSystemRadius.lg)),
+    "--x-segmented-container-radius-large": px((0, import_selectionControl.scaleMobileSelection)(import_design_system.designSystemRadius.lg)),
+    "--x-segmented-item-radius": px((0, import_selectionControl.scaleMobileSelection)(import_design_system.designSystemRadius.sm)),
+    "--x-segmented-item-padding-inline-mini": px((0, import_selectionControl.scaleMobileSelection)(8)),
+    "--x-segmented-item-padding-inline-small": px((0, import_selectionControl.scaleMobileSelection)(12)),
+    "--x-segmented-item-padding-inline-middle": px((0, import_selectionControl.scaleMobileSelection)(16)),
+    "--x-segmented-item-padding-inline-large": px((0, import_selectionControl.scaleMobileSelection)(20)),
+    "--x-segmented-item-padding-block-mini": px((0, import_selectionControl.scaleMobileSelection)(2)),
+    "--x-segmented-item-padding-block-small": px((0, import_selectionControl.scaleMobileSelection)(4)),
+    "--x-segmented-item-padding-block-middle": px((0, import_selectionControl.scaleMobileSelection)(6)),
+    "--x-segmented-item-padding-block-large": px((0, import_selectionControl.scaleMobileSelection)(8)),
+    "--x-segmented-item-gap-mini": px((0, import_selectionControl.scaleMobileSelection)(4)),
+    "--x-segmented-item-gap-small": px((0, import_selectionControl.scaleMobileSelection)(6)),
+    "--x-segmented-item-gap-middle": px((0, import_selectionControl.scaleMobileSelection)(6)),
+    "--x-segmented-item-gap-large": px((0, import_selectionControl.scaleMobileSelection)(8)),
+    "--x-segmented-thumb-radius": px((0, import_selectionControl.scaleMobileSelection)(import_design_system.designSystemRadius.md)),
+    "--x-segmented-thumb-shadow": `0 1px 2px ${mixAlpha(colors.foreground, 0.08)}`,
+    "--x-segmented-thumb-inset-mini": px((0, import_selectionControl.scaleMobileSelection)(2)),
+    "--x-segmented-thumb-inset-small": px((0, import_selectionControl.scaleMobileSelection)(4)),
+    "--x-segmented-thumb-inset-middle": px((0, import_selectionControl.scaleMobileSelection)(6)),
+    "--x-segmented-thumb-inset-large": px((0, import_selectionControl.scaleMobileSelection)(8))
+  };
+}
+function buildTabsVariables(colors) {
+  return {
+    "--x-tabs-list-surface": mixAlpha(colors.muted, 0.5),
+    "--x-tabs-outline-border": colors.border,
+    "--x-tabs-active-ghost-surface": colors.accent,
+    "--x-tabs-indicator": colors.primary,
+    "--x-tabs-text-active": colors.foreground,
+    "--x-tabs-text-inactive": colors["muted-foreground"],
+    "--x-tabs-header-height-mini": "calc(var(--x-space-8) * 0.875)",
+    "--x-tabs-header-height-small": "31.5px",
+    "--x-tabs-header-height-middle": "calc(var(--x-space-10) * 0.875)",
+    "--x-tabs-header-height-large": "calc(var(--x-space-12) * 0.875)",
+    "--x-tabs-trigger-padding-inline-mini": px((0, import_selectionControl.scaleMobileSelection)(12)),
+    "--x-tabs-trigger-padding-inline-small": px((0, import_selectionControl.scaleMobileSelection)(16)),
+    "--x-tabs-trigger-padding-inline-middle": px((0, import_selectionControl.scaleMobileSelection)(20)),
+    "--x-tabs-trigger-padding-inline-large": px((0, import_selectionControl.scaleMobileSelection)(24)),
+    "--x-tabs-item-gap-mini": px((0, import_selectionControl.scaleMobileSelection)(6)),
+    "--x-tabs-item-gap-small": px((0, import_selectionControl.scaleMobileSelection)(6)),
+    "--x-tabs-item-gap-middle": px((0, import_selectionControl.scaleMobileSelection)(6)),
+    "--x-tabs-item-gap-large": px((0, import_selectionControl.scaleMobileSelection)(6)),
+    "--x-tabs-fade-mask": colors.background,
+    "--x-tabs-fade-mask-width": px((0, import_selectionControl.scaleMobileSelection)(32))
+  };
+}
+function buildCascaderVariables(colors) {
+  return {
+    "--x-cascader-panel-surface": colors.popover,
+    "--x-cascader-panel-foreground": colors["popover-foreground"],
+    "--x-cascader-panel-border": colors.border,
+    "--x-cascader-panel-radius": `${import_design_system.designSystemRadius.xl}px`,
+    "--x-cascader-header-border": colors.border,
+    "--x-cascader-title": colors.foreground,
+    "--x-cascader-action-radius": `${import_design_system.designSystemRadius.md}px`,
+    "--x-cascader-action-muted": colors["muted-foreground"],
+    "--x-cascader-action-muted-hover-surface": colors.accent,
+    "--x-cascader-action-muted-hover-foreground": colors.foreground,
+    "--x-cascader-action-primary": colors.primary,
+    "--x-cascader-action-primary-hover-surface": colors.accent,
+    "--x-cascader-action-primary-hover-foreground": colors.primary,
+    "--x-cascader-column-divider": colors.border,
+    "--x-cascader-column-surface": colors.popover,
+    "--x-cascader-column-label": colors["muted-foreground"],
+    "--x-cascader-option-radius": `${import_design_system.designSystemRadius.md}px`,
+    "--x-cascader-option-foreground": colors["popover-foreground"],
+    "--x-cascader-option-hover-surface": colors.accent,
+    "--x-cascader-option-hover-foreground": colors["accent-foreground"],
+    "--x-cascader-option-selected-surface": colors.accent,
+    "--x-cascader-option-selected-foreground": colors["accent-foreground"],
+    "--x-cascader-option-chevron": colors["muted-foreground"]
+  };
+}
+function buildPickerVariables(colors) {
+  return {
+    "--x-picker-panel-surface": colors.popover,
+    "--x-picker-panel-foreground": colors["popover-foreground"],
+    "--x-picker-panel-border": colors.border,
+    "--x-picker-panel-radius": px(import_design_system.designSystemRadius.xl),
+    "--x-picker-panel-shadow": "var(--x-shadow-2xl)",
+    "--x-picker-header-border": colors.border,
+    "--x-picker-title": colors.foreground,
+    "--x-picker-action-muted": colors["muted-foreground"],
+    "--x-picker-action-radius": px(import_design_system.designSystemRadius.md),
+    "--x-picker-action-muted-hover-surface": colors.accent,
+    "--x-picker-action-muted-hover-foreground": colors.foreground,
+    "--x-picker-action-primary": colors.primary,
+    "--x-picker-action-primary-hover-surface": colors.accent,
+    "--x-picker-action-primary-hover-foreground": colors.primary,
+    "--x-picker-column-divider": colors.border,
+    "--x-picker-column-surface": colors.popover,
+    "--x-picker-item-radius": px(import_design_system.designSystemRadius.md),
+    "--x-picker-item-foreground": colors["popover-foreground"],
+    "--x-picker-item-hover-surface": colors.accent,
+    "--x-picker-item-hover-foreground": colors["accent-foreground"],
+    "--x-picker-item-selected-surface": colors.accent,
+    "--x-picker-item-selected-foreground": colors["accent-foreground"],
+    "--x-picker-empty": colors["muted-foreground"],
+    "--x-picker-loading-surface": colors.popover,
+    "--x-picker-loading-spinner": colors.primary
+  };
+}
+function buildPaginationVariables(colors) {
+  return {
+    "--x-pagination-gap-x-mini": px((0, import_selectionControl.scaleMobileSelection)(4)),
+    "--x-pagination-gap-x-small": px((0, import_selectionControl.scaleMobileSelection)(6)),
+    "--x-pagination-gap-x-middle": px((0, import_selectionControl.scaleMobileSelection)(8)),
+    "--x-pagination-gap-x-large": px((0, import_selectionControl.scaleMobileSelection)(10)),
+    "--x-pagination-gap-y-mini": px((0, import_selectionControl.scaleMobileSelection)(4)),
+    "--x-pagination-gap-y-small": px((0, import_selectionControl.scaleMobileSelection)(6)),
+    "--x-pagination-gap-y-middle": px((0, import_selectionControl.scaleMobileSelection)(8)),
+    "--x-pagination-gap-y-large": px((0, import_selectionControl.scaleMobileSelection)(10)),
+    "--x-pagination-group-gap-mini": px((0, import_selectionControl.scaleMobileSelection)(4)),
+    "--x-pagination-group-gap-small": px((0, import_selectionControl.scaleMobileSelection)(6)),
+    "--x-pagination-group-gap-middle": px((0, import_selectionControl.scaleMobileSelection)(8)),
+    "--x-pagination-group-gap-large": px((0, import_selectionControl.scaleMobileSelection)(10)),
+    "--x-pagination-compact-gap": px((0, import_selectionControl.scaleMobileSelection)(4)),
+    "--x-pagination-button-surface": colors.background,
+    "--x-pagination-button-surface-active": colors.primary,
+    "--x-pagination-button-foreground": colors.foreground,
+    "--x-pagination-button-foreground-active": colors["primary-foreground"],
+    "--x-pagination-button-border": colors.border,
+    "--x-pagination-button-hover-surface": colors.accent,
+    "--x-pagination-button-size-mini": px((0, import_selectionControl.scaleMobileSelection)(24)),
+    "--x-pagination-button-size-small": px((0, import_selectionControl.scaleMobileSelection)(28)),
+    "--x-pagination-button-size-middle": px((0, import_selectionControl.scaleMobileSelection)(32)),
+    "--x-pagination-button-size-large": px((0, import_selectionControl.scaleMobileSelection)(40)),
+    "--x-pagination-button-padding-inline-mini": px((0, import_selectionControl.scaleMobileSelection)(8)),
+    "--x-pagination-button-padding-inline-small": px((0, import_selectionControl.scaleMobileSelection)(10)),
+    "--x-pagination-button-padding-inline-middle": px((0, import_selectionControl.scaleMobileSelection)(12)),
+    "--x-pagination-button-padding-inline-large": px((0, import_selectionControl.scaleMobileSelection)(14)),
+    "--x-pagination-button-radius": px((0, import_selectionControl.scaleMobileSelection)(import_design_system.designSystemRadius.sm)),
+    "--x-pagination-button-border-active": colors.primary,
+    "--x-pagination-ellipsis-padding-inline-mini": px((0, import_selectionControl.scaleMobileSelection)(4)),
+    "--x-pagination-ellipsis-padding-inline-small": px((0, import_selectionControl.scaleMobileSelection)(6)),
+    "--x-pagination-ellipsis-padding-inline-middle": px((0, import_selectionControl.scaleMobileSelection)(8)),
+    "--x-pagination-ellipsis-padding-inline-large": px((0, import_selectionControl.scaleMobileSelection)(10)),
+    "--x-pagination-simple-radius": px((0, import_selectionControl.scaleMobileSelection)(import_design_system.designSystemRadius.md)),
+    "--x-pagination-simple-padding-inline-mini": px((0, import_selectionControl.scaleMobileSelection)(8)),
+    "--x-pagination-simple-padding-inline-small": px((0, import_selectionControl.scaleMobileSelection)(10)),
+    "--x-pagination-simple-padding-inline-middle": px((0, import_selectionControl.scaleMobileSelection)(12)),
+    "--x-pagination-simple-padding-inline-large": px((0, import_selectionControl.scaleMobileSelection)(14)),
+    "--x-pagination-summary": colors["muted-foreground"],
+    "--x-pagination-ellipsis": colors["muted-foreground"],
+    "--x-pagination-jump-label": colors["muted-foreground"],
+    "--x-pagination-jump-gap": px((0, import_selectionControl.scaleMobileSelection)(8)),
+    "--x-pagination-jump-surface": colors.background,
+    "--x-pagination-jump-border": colors.border,
+    "--x-pagination-jump-foreground": colors.foreground,
+    "--x-pagination-jump-radius": px((0, import_selectionControl.scaleMobileSelection)(import_design_system.designSystemRadius.sm)),
+    "--x-pagination-jump-padding-inline-middle": px((0, import_selectionControl.scaleMobileSelection)(8)),
+    "--x-pagination-jump-padding-inline-large": px((0, import_selectionControl.scaleMobileSelection)(10)),
+    "--x-pagination-jump-ring": colors.ring
+  };
+}
+function buildOverlayVariables(colors) {
+  return {
+    "--x-overlay-mask": mixAlpha(colors.foreground, 0.25),
+    "--x-popup-surface": colors.background,
+    "--x-popup-foreground": colors.foreground,
+    "--x-popup-border": colors.border,
+    "--x-popup-radius-edge": `${import_design_system.designSystemRadius.xl}px`,
+    "--x-popup-radius-side": `${import_design_system.designSystemRadius.xl}px`,
+    "--x-popup-radius-center": `${import_design_system.designSystemRadius.xl}px`,
+    "--x-popup-shadow": `0 20px 40px ${mixAlpha(colors.foreground, 0.14)}`
+  };
+}
+function buildModalVariables(colors) {
+  return {
+    "--x-modal-surface": colors.background,
+    "--x-modal-foreground": colors.foreground,
+    "--x-modal-border": colors.border,
+    "--x-modal-radius": `${import_design_system.designSystemRadius.lg}px`,
+    "--x-modal-title": colors.foreground,
+    "--x-modal-body": colors.foreground,
+    "--x-modal-divider": colors.border,
+    "--x-modal-close-foreground": colors["muted-foreground"],
+    "--x-modal-close-foreground-hover": colors.foreground
+  };
+}
+function buildCoreComponentVariables(theme) {
+  const { colors } = theme;
+  const subtleShadow = buildSubtleShadow(colors.foreground);
+  const floatingShadow = `0 8px 24px ${mixAlpha(colors.foreground, 0.1)}`;
+  return {
+    "--x-tag-radius": px(import_design_system.designSystemRadius.md),
+    "--x-checkbox-radius": px(import_design_system.designSystemRadius.sm),
+    "--x-tag-foreground-solid": colors["primary-foreground"],
+    "--x-avatar-square-radius": px(import_design_system.designSystemRadius.lg),
+    "--x-avatar-group-excess-square-radius": px(import_design_system.designSystemRadius.sm),
+    "--x-avatar-pulse-duration": `${import_design_system.designSystemMotion.durationsMs.overlayDefault * 4}ms`,
+    "--x-badge-foreground": colors["primary-foreground"],
+    "--x-badge-radius": px(import_design_system.designSystemRadius.full),
+    "--x-badge-dot-radius": px(import_design_system.designSystemRadius.full),
+    "--x-badge-ribbon-foreground": colors["primary-foreground"],
+    "--x-badge-ribbon-radius": px(import_design_system.designSystemRadius.sm),
+    "--x-alert-radius": px(import_design_system.designSystemRadius.lg),
+    "--x-cascader-panel-shadow": "var(--x-shadow-2xl)",
+    "--x-side-bar-root-radius": px(import_design_system.designSystemRadius.lg),
+    "--x-side-bar-item-radius": px(import_design_system.designSystemRadius.lg),
+    "--x-side-bar-item-active-line-radius": px(import_design_system.designSystemRadius.full),
+    "--x-skeleton-surface": colors.muted,
+    "--x-skeleton-radius": px(import_design_system.designSystemRadius.sm),
+    "--x-skeleton-avatar-square-radius": px(import_design_system.designSystemRadius.sm),
+    "--x-skeleton-image-radius": px(import_design_system.designSystemRadius.lg),
+    "--x-skeleton-input-radius": px(import_design_system.designSystemRadius.sm),
+    "--x-slider-track-surface-default": colors.muted,
+    "--x-slider-track-surface-filled": colors.accent,
+    "--x-slider-track-surface-outline": colors.muted,
+    "--x-slider-track-border-outline": colors.border,
+    "--x-slider-track-radius": px(import_design_system.designSystemRadius.full),
+    "--x-slider-fill-surface-default": colors.primary,
+    "--x-slider-fill-surface-filled": mixAlpha(colors.primary, 0.8),
+    "--x-slider-fill-surface-outline": colors.primary,
+    "--x-slider-fill-radius": px(import_design_system.designSystemRadius.full),
+    "--x-slider-thumb-surface-default": colors.background,
+    "--x-slider-thumb-surface-filled": colors.primary,
+    "--x-slider-thumb-surface-outline": colors.background,
+    "--x-slider-thumb-border-default": colors.primary,
+    "--x-slider-thumb-border-filled": colors.primary,
+    "--x-slider-thumb-border-outline": colors.border,
+    "--x-slider-thumb-radius": px(import_design_system.designSystemRadius.full),
+    "--x-slider-thumb-shadow": `0 10px 24px ${mixAlpha(colors.foreground, 0.14)}`,
+    "--x-slider-tick": colors.border,
+    "--x-tooltip-surface": colors.primary,
+    "--x-tooltip-foreground": colors["primary-foreground"],
+    "--x-tooltip-surface-light": colors.popover,
+    "--x-tooltip-foreground-light": colors.foreground,
+    "--x-tooltip-surface-primary": colors.primary,
+    "--x-tooltip-foreground-primary": colors["primary-foreground"],
+    "--x-tooltip-radius": px(import_design_system.designSystemRadius.md),
+    "--x-tooltip-shadow": `0 10px 24px ${mixAlpha(colors.foreground, 0.14)}`,
+    "--x-tooltip-arrow-ring": mixAlpha(colors.foreground, 0.08),
+    "--x-tooltip-arrow-ring-light": colors.border,
+    "--x-tooltip-arrow-ring-primary": colors.primary,
+    "--x-tooltip-arrow-radius": "2px",
+    "--x-typography-code-radius": px(import_design_system.designSystemRadius.md),
+    "--x-table-surface": colors.card,
+    "--x-table-foreground": colors["card-foreground"],
+    "--x-table-border": mixAlpha(colors.border, 0.76),
+    "--x-table-section-surface": colors.background,
+    "--x-table-section-foreground": colors["muted-foreground"],
+    "--x-table-header-surface": mixSolidColors(colors.muted, colors.card, 0.72),
+    "--x-table-header-foreground": mixAlpha(colors.foreground, 0.86),
+    "--x-table-body-foreground": mixAlpha(colors.foreground, 0.72),
+    "--x-table-toolbar-radius": px(import_design_system.designSystemRadius.md),
+    "--x-table-toolbar-active-surface": colors.accent,
+    "--x-table-toolbar-active-foreground": colors.foreground,
+    "--x-table-toolbar-foreground": colors["muted-foreground"],
+    "--x-table-toolbar-hover-surface": mixAlpha(colors.accent, 0.7),
+    "--x-table-filter-surface": colors.popover,
+    "--x-table-filter-foreground": colors["popover-foreground"],
+    "--x-table-filter-border": mixAlpha(colors.border, 0.76),
+    "--x-table-filter-radius": px(import_design_system.designSystemRadius.xl),
+    "--x-table-filter-shadow": `0 12px 32px ${mixAlpha(colors.foreground, 0.14)}`,
+    "--x-table-empty-icon-surface": colors.muted,
+    "--x-table-empty-icon-foreground": colors["muted-foreground"],
+    "--x-table-empty-foreground": colors["muted-foreground"],
+    "--x-table-row-surface": colors.card,
+    "--x-table-row-surface-alt": mixAlpha(colors.muted, 0.2),
+    "--x-table-row-hover-surface": mixSolidColors(colors.muted, colors.card, 0.64),
+    "--x-table-row-selected-surface": mixSolidColors(colors.muted, colors.card, 0.88),
+    "--x-table-row-selected-foreground": colors["accent-foreground"],
+    "--x-table-row-selected-ring": mixAlpha(colors.border, 0.76),
+    "--x-table-loading-surface": mixAlpha(colors.card, 0.8),
+    "--x-table-loading-spinner": colors.primary,
+    "--x-table-loading-foreground": colors["muted-foreground"],
+    "--x-table-focus-ring": mixAlpha(colors.primary, 0.35),
+    "--x-table-root-radius": px(import_design_system.designSystemRadius.xl),
+    "--x-table-fixed-edge-shadow-start": mixAlpha(colors.foreground, 0.1),
+    "--x-table-fixed-edge-shadow-mid": mixAlpha(colors.foreground, 0.05),
+    "--x-result-radius": px(import_design_system.designSystemRadius.xl),
+    "--x-dialog-radius": px(import_design_system.designSystemRadius.xl),
+    "--x-dialog-button-radius": px(import_design_system.designSystemRadius.lg),
+    "--x-transfer-list-radius": px(import_design_system.designSystemRadius.lg),
+    "--x-transfer-checkbox-radius": px(import_design_system.designSystemRadius.sm),
+    "--x-transfer-action-radius": px(import_design_system.designSystemRadius.md),
+    "--x-transfer-search-radius": px(import_design_system.designSystemRadius.md),
+    "--x-form-label-width": "104px",
+    "--x-form-inline-field-min-width": "280px",
+    "--x-select-tag-radius": px(import_design_system.designSystemRadius.sm),
+    "--x-select-search-radius": px(import_design_system.designSystemRadius.sm),
+    "--x-picker-view-radius": px(import_design_system.designSystemRadius.lg),
+    "--x-tab-bar-item-radius": px(import_design_system.designSystemRadius.xxl),
+    "--x-tab-bar-root-radius": px(import_design_system.designSystemRadius.xxl),
+    "--x-showcase-radius": px(import_design_system.designSystemRadius.xxl),
+    "--x-showcase-item-radius": px(import_design_system.designSystemRadius.xl),
+    "--x-grid-card-shell-radius": px(import_design_system.designSystemRadius.lg),
+    "--x-grid-item-radius-card": px(import_design_system.designSystemRadius.lg),
+    "--x-grid-item-shadow-card": subtleShadow,
+    "--x-grid-item-shadow-card-hover": `0 10px 24px ${mixAlpha(colors.foreground, 0.12)}`,
+    "--x-result-page-detail-radius": px(import_design_system.designSystemRadius.lg),
+    "--x-result-page-detail-shadow": subtleShadow,
+    "--x-bar-loading-radius": "var(--x-radius-xs)",
+    "--x-kbd-radius": px(import_design_system.designSystemRadius.md),
+    "--x-kbd-shadow": subtleShadow,
+    "--x-check-list-radius": px(import_design_system.designSystemRadius.lg),
+    "--x-check-list-card-shadow": subtleShadow,
+    "--x-check-list-surface": colors.background,
+    "--x-check-list-card-surface": colors.card,
+    "--x-check-list-border": colors.border,
+    "--x-check-list-item-border": colors.border,
+    "--x-check-list-divider": colors.border,
+    "--x-check-list-item-hover-surface": mixAlpha(colors.accent, 0.65),
+    "--x-check-list-item-active-surface": colors.accent,
+    "--x-check-list-item-checked-surface": mixAlpha(colors.accent, 0.85),
+    "--x-check-list-title": colors.foreground,
+    "--x-check-list-title-checked": colors.foreground,
+    "--x-check-list-description": colors["muted-foreground"],
+    "--x-check-list-description-checked": colors["muted-foreground"],
+    "--x-check-list-extra": colors["muted-foreground"],
+    "--x-ellipsis-foreground": colors.foreground,
+    "--x-ellipsis-action": colors.primary,
+    "--x-ellipsis-action-hover": mixAlpha(colors.primary, 0.8),
+    "--x-list-card-radius": px(import_design_system.designSystemRadius.lg),
+    "--x-list-card-shadow": subtleShadow,
+    "--x-progress-bar-radius": px(import_design_system.designSystemRadius.full),
+    "--x-progress-bar-container-radius": px(import_design_system.designSystemRadius.lg),
+    "--x-progress-bar-stripe-duration": `${import_design_system.designSystemMotion.durationsMs.overlayDefault * 4}ms`,
+    "--x-menu-root-radius": px(theme.radius),
+    "--x-menu-surface-panel-radius": px(import_design_system.designSystemRadius.xl),
+    "--x-menu-surface-item-radius": px(import_design_system.designSystemRadius.lg),
+    "--x-context-menu-shadow": "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1)",
+    "--x-menubar-radius": px(import_design_system.designSystemRadius.xl),
+    "--x-menubar-trigger-radius": px(import_design_system.designSystemRadius.lg),
+    "--x-menubar-submenu-radius": px(import_design_system.designSystemRadius.xl),
+    "--x-menubar-submenu-shadow": "var(--x-shadow-lg)",
+    "--x-popconfirm-surface": colors.popover,
+    "--x-popconfirm-border": colors.border,
+    "--x-popconfirm-title": colors["popover-foreground"],
+    "--x-popconfirm-description": colors["muted-foreground"],
+    "--x-popconfirm-icon": colors.primary,
+    "--x-popconfirm-radius": px(import_design_system.designSystemRadius.lg),
+    "--x-popconfirm-max-width": "440px",
+    "--x-popconfirm-shadow": "var(--x-shadow-xl)",
+    "--x-notification-radius": px(import_design_system.designSystemRadius.xl),
+    "--x-notification-shadow": floatingShadow,
+    "--x-sonner-toast-surface-default": mixAlpha(colors.popover, 0.95),
+    "--x-sonner-toast-surface": "var(--x-sonner-toast-surface-default)",
+    "--x-sonner-toast-border-default": colors.border,
+    "--x-sonner-toast-border": "var(--x-sonner-toast-border-default)",
+    "--x-sonner-toast-foreground-default": colors["popover-foreground"],
+    "--x-sonner-toast-foreground": "var(--x-sonner-toast-foreground-default)",
+    "--x-sonner-toast-surface-success": mixSolidColors(colors.success, colors.popover, 0.08),
+    "--x-sonner-toast-border-success": mixSolidColors(colors.success, colors.border, 0.24),
+    "--x-sonner-toast-foreground-success": colors.foreground,
+    "--x-sonner-toast-surface-error": mixSolidColors(colors.destructive, colors.popover, 0.08),
+    "--x-sonner-toast-border-error": mixSolidColors(colors.destructive, colors.border, 0.24),
+    "--x-sonner-toast-foreground-error": colors.foreground,
+    "--x-sonner-toast-surface-warning": mixSolidColors(colors.warning, colors.popover, 0.08),
+    "--x-sonner-toast-border-warning": mixSolidColors(colors.warning, colors.border, 0.24),
+    "--x-sonner-toast-foreground-warning": colors.foreground,
+    "--x-sonner-toast-surface-info": mixSolidColors(colors.primary, colors.popover, 0.07),
+    "--x-sonner-toast-border-info": mixSolidColors(colors.primary, colors.border, 0.22),
+    "--x-sonner-toast-foreground-info": colors.foreground,
+    "--x-sonner-toast-surface-loading": mixSolidColors(colors.primary, colors.popover, 0.05),
+    "--x-sonner-toast-border-loading": mixSolidColors(colors.primary, colors.border, 0.18),
+    "--x-sonner-toast-foreground-loading": colors.foreground,
+    "--x-sonner-radius": px(import_design_system.designSystemRadius.xxl),
+    "--x-sonner-shadow": floatingShadow,
+    "--x-sonner-title": colors.foreground,
+    "--x-sonner-description": colors["muted-foreground"],
+    "--x-sonner-icon-default": colors.foreground,
+    "--x-sonner-icon": "var(--x-sonner-icon-default)",
+    "--x-sonner-icon-success": colors.success,
+    "--x-sonner-icon-error": colors.destructive,
+    "--x-sonner-icon-warning": colors.warning,
+    "--x-sonner-icon-info": colors.primary,
+    "--x-sonner-icon-loading": colors.primary,
+    "--x-sonner-action-surface": colors.primary,
+    "--x-sonner-action-border": "transparent",
+    "--x-sonner-action-foreground": colors["primary-foreground"],
+    "--x-sonner-action-hover-surface": mixSolidColors(colors.primary, "#000000", 0.9),
+    "--x-sonner-action-radius": px(import_design_system.designSystemRadius.lg),
+    "--x-sonner-cancel-surface": colors.background,
+    "--x-sonner-cancel-border": colors.border,
+    "--x-sonner-cancel-foreground": colors.foreground,
+    "--x-sonner-cancel-hover-surface": mixAlpha(colors.accent, 0.7),
+    "--x-sonner-cancel-radius": px(import_design_system.designSystemRadius.lg),
+    "--x-sonner-close-surface": mixAlpha(colors.background, 0.75),
+    "--x-sonner-close-border": mixAlpha(colors.border, 0.7),
+    "--x-sonner-close-foreground": colors["muted-foreground"],
+    "--x-sonner-close-hover-surface": mixAlpha(colors.accent, 0.8),
+    "--x-sonner-close-hover-border": colors.border,
+    "--x-sonner-close-hover-foreground": colors.foreground,
+    "--x-sonner-surface-default": "var(--x-sonner-toast-surface-default)",
+    "--x-sonner-surface-success": "var(--x-sonner-toast-surface-success)",
+    "--x-sonner-surface-error": "var(--x-sonner-toast-surface-error)",
+    "--x-sonner-surface-warning": "var(--x-sonner-toast-surface-warning)",
+    "--x-sonner-surface-info": "var(--x-sonner-toast-surface-info)",
+    "--x-sonner-surface-loading": "var(--x-sonner-toast-surface-loading)",
+    "--x-sonner-border-default": "var(--x-sonner-toast-border-default)",
+    "--x-sonner-border-success": "var(--x-sonner-toast-border-success)",
+    "--x-sonner-border-error": "var(--x-sonner-toast-border-error)",
+    "--x-sonner-border-warning": "var(--x-sonner-toast-border-warning)",
+    "--x-sonner-border-info": "var(--x-sonner-toast-border-info)",
+    "--x-sonner-border-loading": "var(--x-sonner-toast-border-loading)",
+    "--x-sonner-close": "var(--x-sonner-close-foreground)",
+    "--x-sonner-loading-duration": `${import_design_system.designSystemMotion.durationsMs.overlayDefault * 3}ms`,
+    "--x-toast-loading-duration": `${import_design_system.designSystemMotion.durationsMs.overlayDefault * 3}ms`
+  };
+}
+function buildCapsuleTabsVariables(colors) {
+  return {
+    "--x-capsule-tabs-surface-default": colors.muted,
+    "--x-capsule-tabs-surface-outline": colors.background,
+    "--x-capsule-tabs-surface-ghost": "transparent",
+    "--x-capsule-tabs-surface-pills": colors.secondary,
+    "--x-capsule-tabs-list-gap-mini": px((0, import_selectionControl.scaleMobileSelection)(2)),
+    "--x-capsule-tabs-list-gap-small": px((0, import_selectionControl.scaleMobileSelection)(2)),
+    "--x-capsule-tabs-list-gap-middle": px((0, import_selectionControl.scaleMobileSelection)(4)),
+    "--x-capsule-tabs-list-gap-large": px((0, import_selectionControl.scaleMobileSelection)(6)),
+    "--x-capsule-tabs-list-padding-mini": px((0, import_selectionControl.scaleMobileSelection)(2)),
+    "--x-capsule-tabs-list-padding-small": px((0, import_selectionControl.scaleMobileSelection)(2)),
+    "--x-capsule-tabs-list-padding-middle": px((0, import_selectionControl.scaleMobileSelection)(4)),
+    "--x-capsule-tabs-list-padding-large": px((0, import_selectionControl.scaleMobileSelection)(6)),
+    "--x-capsule-tabs-list-radius-mini": px((0, import_selectionControl.scaleMobileSelection)(import_design_system.designSystemRadius.lg)),
+    "--x-capsule-tabs-list-radius-small": px((0, import_selectionControl.scaleMobileSelection)(import_design_system.designSystemRadius.lg)),
+    "--x-capsule-tabs-list-radius-middle": px((0, import_selectionControl.scaleMobileSelection)(import_design_system.designSystemRadius.xl)),
+    "--x-capsule-tabs-list-radius-large": px((0, import_selectionControl.scaleMobileSelection)(import_design_system.designSystemRadius.xxl)),
+    "--x-capsule-tabs-border-default": colors.border,
+    "--x-capsule-tabs-border-outline": colors.border,
+    "--x-capsule-tabs-active-border-default": colors.border,
+    "--x-capsule-tabs-active-border-outline": colors.primary,
+    "--x-capsule-tabs-item-radius": px((0, import_selectionControl.scaleMobileSelection)(import_design_system.designSystemRadius.lg)),
+    "--x-capsule-tabs-item-padding-inline-mini": px((0, import_selectionControl.scaleMobileSelection)(8)),
+    "--x-capsule-tabs-item-padding-inline-small": px((0, import_selectionControl.scaleMobileSelection)(12)),
+    "--x-capsule-tabs-item-padding-inline-middle": px((0, import_selectionControl.scaleMobileSelection)(16)),
+    "--x-capsule-tabs-item-padding-inline-large": px((0, import_selectionControl.scaleMobileSelection)(24)),
+    "--x-capsule-tabs-item-padding-block-mini": px((0, import_selectionControl.scaleMobileSelection)(2)),
+    "--x-capsule-tabs-item-padding-block-small": px((0, import_selectionControl.scaleMobileSelection)(4)),
+    "--x-capsule-tabs-item-padding-block-middle": px((0, import_selectionControl.scaleMobileSelection)(6)),
+    "--x-capsule-tabs-item-padding-block-large": px((0, import_selectionControl.scaleMobileSelection)(8)),
+    "--x-capsule-tabs-item-content-gap": px((0, import_selectionControl.scaleMobileSelection)(6)),
+    "--x-capsule-tabs-compact-padding": px((0, import_selectionControl.scaleMobileSelection)(2)),
+    "--x-capsule-tabs-text": colors["muted-foreground"],
+    "--x-capsule-tabs-text-active": colors.foreground,
+    "--x-capsule-tabs-text-active-outline": colors["primary-foreground"],
+    "--x-capsule-tabs-text-active-ghost": colors["accent-foreground"],
+    "--x-capsule-tabs-text-active-pills": colors.background,
+    "--x-capsule-tabs-active-surface-default": colors.background,
+    "--x-capsule-tabs-active-surface-outline": colors.primary,
+    "--x-capsule-tabs-active-surface-ghost": colors.accent,
+    "--x-capsule-tabs-indicator-pills": colors.foreground,
+    "--x-capsule-tabs-fade-mask": colors.background,
+    "--x-capsule-tabs-badge-foreground": colors["primary-foreground"],
+    "--x-capsule-tabs-badge-radius": px(import_design_system.designSystemRadius.full),
+    "--x-capsule-tabs-badge-surface-default": colors["muted-foreground"],
+    "--x-capsule-tabs-badge-surface-primary": colors.primary,
+    "--x-capsule-tabs-badge-surface-destructive": colors.destructive,
+    "--x-capsule-tabs-badge-surface-success": colors.success
+  };
+}
+function buildComponentSlotVariables(theme) {
+  return {
+    ...buildCoreComponentVariables(theme),
+    ...buildActionSheetVariables(theme.colors),
+    ...buildPickerVariables(theme.colors),
+    ...buildPaginationVariables(theme.colors),
+    ...buildCascaderVariables(theme.colors),
+    ...buildOverlayVariables(theme.colors),
+    ...buildModalVariables(theme.colors),
+    ...buildSegmentedVariables(theme.colors),
+    ...buildTabsVariables(theme.colors),
+    ...buildCapsuleTabsVariables(theme.colors)
+  };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ACTION_SHEET_SHADOW,
+  buildComponentSlotVariables,
+  buildSubtleShadow,
+  mixSolidColors
+});

package/lib/theme/runtime/cssVariables.d.ts

@@ -0,0 +1,28 @@
+/**
+ * CSS Variables Generation for Mini-program
+ * Generates theme variables as inline styles for mini-program environment
+ */
+/// <reference types="react" />
+import type { Theme } from '../types';
+/**
+ * Build all theme CSS variables
+ */
+export declare function buildThemeVariables(theme: Theme): Record<string, string>;
+/**
+ * Build theme as inline style object for mini-program
+ */
+export declare function buildThemeStyle(theme: Theme): React.CSSProperties;
+/**
+ * Build CSS variable string for style attribute
+ * Mini-program supports CSS variables in style
+ */
+export declare function buildThemeVariableString(theme: Theme): string;
+/**
+ * Get color with opacity
+ */
+export declare function withOpacity(color: string, opacity: number): string;
+/**
+ * Build component-specific CSS variables
+ */
+export declare function buildComponentVariables(theme: Theme, componentName: string): Record<string, string>;
+//# sourceMappingURL=cssVariables.d.ts.map