@will-ui/vue 1.0.0

package/dist/theme/tokens/_var.css

@@ -0,0 +1,1087 @@
+:root {
+  /*
+   * 色彩核心
+   *   主色三级：--w-prop-{comp}-color > --w-{comp}-color > --w-color
+   *     组件根：--__color；实例阶梯在组件根用 --__color + --__bg/--__text 重绑
+   *   背景三级：--w-prop-{comp}-bg-color > --w-{comp}-bg-color > --w-bg-color
+   *   文本三级：--w-prop-{comp}-text-color > --w-{comp}-text-color > --w-text-color
+   *     组件根：--__bg / --__text；实例中性字色/描边在组件根按需重绑
+   *     仅 CSS 变量（cssVars / 作用域），暂不新增 bgColor / textColor prop
+   *   错误 / 警示 / 成功：仅全局 --w-error / --w-warn / --w-success + soft（半透明），不做阶梯、不做组件三级
+   *   勿在 :root 写 --w-{comp}-bg/text-color: var(--w-bg/text-color)（算死）
+   */
+  --w-color: #62a10b; /* 品牌主色 */
+  --w-error: #eb1e1e; /* 错误色 */
+  --w-warn: #d97706; /* 警示色 */
+  --w-success: #16a34a; /* 成功色（语义独立，勿默认绑品牌主色） */
+  --w-error-soft: color-mix(in srgb, var(--w-error) 50%, transparent);
+  --w-warn-soft: color-mix(in srgb, var(--w-warn) 50%, transparent);
+  --w-success-soft: color-mix(in srgb, var(--w-success) 50%, transparent);
+
+  /* 表面 / 正文核：改二者可整体亮暗；中性字色、描边、disabled、placeholder、浅底由此派生 */
+  --w-bg-color: #fcfce8;
+  --w-text-color: #222;
+
+  /* 尺度核心：改 --w-size 驱动字号/间距；--w-radius 独立；字号下限见 --w-font-size-min */
+  --w-size: 44px;
+  --w-radius: 12px;
+  --w-font-size-min: 12px;
+
+  /* 主色阶梯（原命名）：向表面 / 正文核混合，暗色主题下自动跟 bg/text */
+  --w-color-primary: var(--w-color);
+  --w-color-primary-light-0: color-mix(
+    in srgb,
+    var(--w-color) 90%,
+    var(--w-bg-color)
+  );
+  --w-color-primary-light-1: color-mix(
+    in srgb,
+    var(--w-color) 80%,
+    var(--w-bg-color)
+  );
+  --w-color-primary-light-2: color-mix(
+    in srgb,
+    var(--w-color) 70%,
+    var(--w-bg-color)
+  );
+  --w-color-primary-light-3: color-mix(
+    in srgb,
+    var(--w-color) 60%,
+    var(--w-bg-color)
+  );
+  --w-color-primary-light-4: color-mix(
+    in srgb,
+    var(--w-color) 50%,
+    var(--w-bg-color)
+  );
+  --w-color-primary-light-5: color-mix(
+    in srgb,
+    var(--w-color) 40%,
+    var(--w-bg-color)
+  );
+  --w-color-primary-light-6: color-mix(
+    in srgb,
+    var(--w-color) 30%,
+    var(--w-bg-color)
+  );
+  --w-color-primary-light-7: color-mix(
+    in srgb,
+    var(--w-color) 20%,
+    var(--w-bg-color)
+  );
+  --w-color-primary-light-8: color-mix(
+    in srgb,
+    var(--w-color) 12%,
+    var(--w-bg-color)
+  );
+  --w-color-primary-light-9: color-mix(
+    in srgb,
+    var(--w-color) 6%,
+    var(--w-bg-color)
+  );
+  --w-color-primary-dark-0: color-mix(
+    in srgb,
+    var(--w-color) 90%,
+    var(--w-text-color)
+  );
+  --w-color-primary-dark-1: color-mix(
+    in srgb,
+    var(--w-color) 80%,
+    var(--w-text-color)
+  );
+  --w-color-primary-dark-2: color-mix(
+    in srgb,
+    var(--w-color) 70%,
+    var(--w-text-color)
+  );
+  --w-color-primary-dark-3: color-mix(
+    in srgb,
+    var(--w-color) 60%,
+    var(--w-text-color)
+  );
+  --w-color-primary-dark-4: color-mix(
+    in srgb,
+    var(--w-color) 50%,
+    var(--w-text-color)
+  );
+
+  /* danger/warn → error/warn */
+  --w-color-danger: var(--w-error);
+  --w-color-danger-5: var(--w-error-soft);
+  --w-color-warning-2: var(--w-warn-soft);
+
+  /*
+   * 中性阶梯（text → bg），语义从强到弱：
+   *   font-1 正文(=text核) → font-2 次要 → font-3 辅助/图标/placeholder
+   *   → font-4 更弱(清除图标) → font-5 极弱浅底(非文字)
+   *   border* 描边：比文字更贴 bg，仍保持相对表面可见
+   *   disabled 禁用文字：可读弱化，禁止绑 font-5 浅底
+   */
+  --w-color-font-1: var(--w-text-color);
+  --w-color-font-2: color-mix(
+    in srgb,
+    var(--w-text-color) 72%,
+    var(--w-bg-color)
+  );
+  --w-color-font-3: color-mix(
+    in srgb,
+    var(--w-text-color) 48%,
+    var(--w-bg-color)
+  );
+  --w-color-font-4: color-mix(
+    in srgb,
+    var(--w-text-color) 32%,
+    var(--w-bg-color)
+  );
+  --w-color-font-5: color-mix(
+    in srgb,
+    var(--w-text-color) 8%,
+    var(--w-bg-color)
+  );
+  --w-color-font: var(--w-color-font-1);
+  --w-color-disabled: var(--w-color-font-3);
+
+  --w-color-border: color-mix(
+    in srgb,
+    var(--w-text-color) 18%,
+    var(--w-bg-color)
+  );
+  --w-color-border-1: color-mix(
+    in srgb,
+    var(--w-text-color) 28%,
+    var(--w-bg-color)
+  );
+  --w-color-border-2: color-mix(
+    in srgb,
+    var(--w-text-color) 40%,
+    var(--w-bg-color)
+  );
+
+  /* 禁用底（disabled fill）；浅底场景统一用 --w-bg-color / --w-color-font-5 */
+  --w-bg-color-disabled: var(--w-color-font-5);
+
+  /* 品牌实心上的对比色（on-color）；不跟表面核，暗色主题下仍宜浅色 */
+  --w-on-color: #fff;
+
+  /* 全局滚动条：颜色跟 bg/text 核；厚度随 size；样式见 _scrollbar.css */
+  --w-scrollbar-size: calc(var(--w-size) / 4.5);
+  --w-scrollbar-radius: 99px;
+  --w-scrollbar-track-color: color-mix(
+    in srgb,
+    var(--w-text-color) 6%,
+    var(--w-bg-color)
+  );
+  --w-scrollbar-thumb-color: color-mix(
+    in srgb,
+    var(--w-text-color) 28%,
+    var(--w-bg-color)
+  );
+  --w-scrollbar-thumb-hover-color: color-mix(
+    in srgb,
+    var(--w-text-color) 42%,
+    var(--w-bg-color)
+  );
+  --w-scrollbar-thumb-active-color: color-mix(
+    in srgb,
+    var(--w-text-color) 55%,
+    var(--w-bg-color)
+  );
+
+  /* 表单控件内 clear / 箭头等 Icon：随控件 size 派生，夹在 10~30 */
+  --w-ctrl-icon-ratio: 0.4;
+  --w-ctrl-icon-size-min: 10px;
+  --w-ctrl-icon-size-max: 30px;
+
+  --w-font-size: max(var(--w-font-size-min), calc(var(--w-size) * 0.35));
+  --w-font-size-1: var(--w-font-size);
+  --w-font-size-2: max(var(--w-font-size-min), calc(var(--w-size) * 0.4));
+  --w-font-size-3: max(var(--w-font-size-min), calc(var(--w-size) * 0.45));
+  --w-font-size-4: max(var(--w-font-size-min), calc(var(--w-size) * 0.5));
+  --w-font-size-5: max(var(--w-font-size-min), calc(var(--w-size) * 0.55));
+
+  --w-gap: calc(var(--w-size) * 0.4);
+  --w-line-height: 1;
+
+  --w-padding-x: var(--w-gap);
+  --w-padding-y: calc(var(--w-size) * 0.3);
+  --w-box-shadow:
+    0 5px 12px 0 color-mix(in srgb, var(--w-text-color) 9%, transparent),
+    0 0 5px color-mix(in srgb, var(--w-text-color) 7.6%, transparent);
+
+  --w-transition-time: 0.3s;
+  --w-transition-slow-time: 0.618s;
+  --w-transition-quick-time: 0.25s;
+  --w-cubic-bezier-quick: cubic-bezier(0.4, 1, 0, 1);
+  --w-cubic-bezier: cubic-bezier(0.01, 0.7, 0.53, 1);
+
+  /*
+   * btn：可主题化 token
+   *   --w-btn-size / --w-btn-color / --w-btn-bg-color / --w-btn-text-color / --w-btn-radius
+   *     为可选二层钩子，勿在 :root 写 var(--w-size/--w-color/…) 算死
+   *   三级有效值派生的尺度比 / 阶梯 mix% 写在此；.w-btn 用 --__size / --__color 相乘、重绑
+   *   复合属性（border / outline 等）能整段写的整段写，勿拆 width + color 在组件里拼
+   */
+  --w-btn-font-ratio: 0.35;
+  --w-btn-pad-x-ratio: 0.4;
+  --w-btn-capsule-radius-ratio: 0.5;
+  --w-btn-inner-gap-ratio: 0.2;
+  --w-btn-color-light-4-mix: 50%;
+  --w-btn-color-light-8-mix: 12%;
+  --w-btn-color-light-9-mix: 6%;
+  --w-btn-color-dark-0-mix: 90%;
+  --w-btn-line-height: 1;
+  --w-btn-border: 1px solid transparent;
+  /* 复合 outline：色用三级公开回退 + mix，勿在 _var 引用组件私有 --__* */
+  --w-btn-focus-outline: 2px solid
+    color-mix(
+      in srgb,
+      var(--w-prop-btn-color, var(--w-btn-color, var(--w-color)))
+        var(--w-btn-color-light-4-mix),
+      var(--w-prop-btn-bg-color, var(--w-btn-bg-color, var(--w-bg-color)))
+    );
+  --w-btn-focus-outline-offset: 1px;
+  --w-btn-default-text-color: var(--w-color-font-2);
+  --w-btn-default-border-color: var(--w-color-border-1);
+  /* 实心 default：灰底无边框（边框留给 mode=line） */
+  --w-btn-default-bg-color: var(--w-color-font-5);
+  --w-btn-default-hover-bg-color: color-mix(
+    in srgb,
+    var(--w-text-color) 14%,
+    var(--w-bg-color)
+  );
+  --w-btn-default-divide-border-color: color-mix(
+    in srgb,
+    var(--w-text-color) 12%,
+    var(--w-bg-color)
+  );
+  --w-btn-solid-text-color: var(--w-on-color);
+  --w-btn-disabled-opacity: 0.55;
+  --w-btn-loading-opacity: 0.75;
+  /* danger 默认同语义 error，可单独覆写而不改全局 --w-error */
+  --w-btn-danger-color: var(--w-error);
+  --w-btn-danger-focus-outline: 2px solid var(--w-error-soft);
+  --w-btn-danger-hover-brightness: 0.95;
+  --w-btn-danger-text-hover-bg: color-mix(
+    in srgb,
+    var(--w-btn-danger-color) 8%,
+    transparent
+  );
+  --w-btn-divide-border-color: color-mix(
+    in srgb,
+    var(--w-on-color) 50%,
+    transparent
+  );
+  --w-btn-spinner-border: 2px solid currentColor;
+  --w-btn-spinner-duration: 0.7s;
+
+  /* write：--w-write-size 为可选主题钩子，勿在此写 var(--w-size)（算死） */
+  --w-write-radius: var(--w-radius);
+  --w-write-padding-x: var(--w-form-item-padding-x);
+  --w-write-limit-font-ratio: 0.3;
+  --w-write-limit-bottom-ratio: 0.15;
+  --w-write-limit-right-ratio: 0.3;
+  --w-write-close-margin-ratio: 0.3;
+
+  /*
+   * textarea：自动增高；派生在 .w-textarea 用 --__size / --__color / --__bg / --__text 重绑；
+   *   勿在 :root 写 --w-textarea-size|color|bg|text: var(--w-*) 算死
+   */
+  --w-textarea-font-ratio: 0.35;
+  --w-textarea-pad-x-ratio: 0.3;
+  --w-textarea-pad-y-ratio: 0.18;
+  --w-textarea-line-height: 1.5;
+  --w-textarea-radius: var(--w-radius);
+  --w-textarea-border: var(--w-form-item-border);
+  --w-textarea-border-color-hover: var(--w-form-item-border-color-hover);
+  --w-textarea-focus-ring: 0 0 6px
+    color-mix(
+      in srgb,
+      var(--w-prop-textarea-color, var(--w-textarea-color, var(--w-color))) 55%,
+      transparent
+    );
+  --w-textarea-transition:
+    border-color var(--w-transition-time), box-shadow var(--w-transition-time),
+    background-color var(--w-transition-time);
+
+  /* number：焦点/错误环与阶梯 mix；派生在 .w-number 用 --__color 重绑 */
+  --w-number-focus-ring-mix: 20%;
+  --w-number-focus-ring: 0 0 0 2px
+    color-mix(
+      in srgb,
+      var(--w-prop-number-color, var(--w-number-color, var(--w-color)))
+        var(--w-number-focus-ring-mix),
+      transparent
+    );
+  --w-number-error-ring: 0 0 0 2px
+    color-mix(
+      in srgb,
+      var(--w-error) var(--w-number-focus-ring-mix),
+      transparent
+    );
+  --w-number-color-light-6-mix: 30%;
+  --w-number-color-light-8-mix: 12%;
+  --w-number-btn-transition: all 0.2s ease;
+  --w-number-btn-divider: 0 -1px var(--w-color-font-4);
+  --w-number-hint-inset: 8px;
+  --w-number-hint-font-size: 12px;
+
+  /* switch：宽高在 .w-switch 用 --__size 重绑；--w-switch-size/color 为可选主题钩子 */
+  /* 关态/禁用黑白灰，开态才用品牌色；--w-switch-bg-color=关态轨道（非表面三级）；阀芯默认对比白 */
+  --w-switch-height-ratio: 0.4;
+  --w-switch-width-from-height-ratio: 1.88;
+  --w-switch-valve-inset: 2px;
+  --w-switch-pad-x: 10px;
+  --w-switch-disabled-opacity: 0.55;
+  --w-switch-valve-color: var(--w-on-color);
+  --w-switch-bg-color: var(--w-color-border);
+  --w-switch-valve-box-shadow: 0 0 5px 0
+    color-mix(in srgb, var(--w-text-color) 30%, transparent);
+
+  --w-mask-background-color: color-mix(
+    in srgb,
+    var(--w-text-color) 45%,
+    transparent
+  );
+
+  /*
+   * layer：尺度/箭头在 .w-layer-content 用 --__size / --__bg / --__text 重绑
+   *   --w-layer-size / --w-layer-bg-color / --w-layer-text-color 为可选主题钩子，勿写 var(--w-size) 算死
+   *   绘制覆写走 --_layer-*（组件 CSS / style），勿再经 --w-layer-background-color 跳板
+   */
+  --w-layer-font-ratio: 0.35;
+  --w-layer-gap-ratio: 0.4;
+  --w-layer-arrow-size-ratio: 0.2;
+  --w-layer-border-mix: 18%;
+  --w-layer-arrow-size-min: 2px;
+  --w-layer-arrow-size-max: 7px;
+  --w-layer-arrow-inset-min: 1px;
+  --w-layer-arrow-inset-max: 3px;
+  --w-layer-arrow-inset-ratio: 0.055556; /* 1/18；clamp 在 .w-layer-content 用 --__size 组装 */
+
+  /*
+   * tooltip：默认反色表面（正文核作底、表面核作字）；可用 --w-tooltip-bg/text-color 覆盖
+   *   字号/内边距在 .w-layer-content.w-tooltip 用 --__size 重绑
+   */
+  --w-tooltip-font-ratio: 0.3;
+  --w-tooltip-pad-x-ratio: 0.24;
+  --w-tooltip-pad-y-ratio: 0.166667; /* 1/6 */
+  --w-tooltip-radius-ratio: 0.5;
+  --w-tooltip-radius-min: 2px;
+  --w-tooltip-radius-max: 8px;
+  --w-tooltip-background-color: color-mix(
+    in srgb,
+    var(--w-text-color) 82%,
+    white
+  );
+  --w-tooltip-border-color: transparent;
+  --w-tooltip-color: var(--w-bg-color);
+  --w-tooltip-radius: var(--w-radius);
+  /* 默认固定值，避免 :root 写 var(--w-size) 算死；实例可用 cssVars 覆盖，组件根另回退 --__size */
+  --w-tooltip-min-width: 36px;
+  --w-tooltip-max-width: 280px;
+  /* 气泡正文行高（全局 --w-line-height 为 1，偏紧；Tooltip 单独放宽） */
+  --w-tooltip-line-height: 1.5;
+
+  /* empty：图标由组件根 --__size 派生；勿在 :root 写 --w-empty-size 算死 */
+  --w-empty-font-ratio: 0.35;
+  --w-empty-icon-ratio: 0.666667; /* 2/3 */
+  --w-empty-icon-color: var(--w-color-font-2);
+  --w-empty-text-color: var(--w-color-font-2);
+  --w-empty-text-gap: var(--w-gap);
+
+  /*
+   * copy：尺度/主色派生在 .w-copy 用 --__size / --__color 重绑；
+   *   勿在 :root 写 --w-copy-size|color|bg|text: var(--w-*) 算死
+   */
+  --w-copy-font-ratio: 0.3;
+  --w-copy-pad-x-ratio: 0.2;
+  --w-copy-pad-y-ratio: 0.08;
+  --w-copy-border: 1px solid var(--w-color-border-1);
+  --w-copy-hover-border-color: var(
+    --w-prop-copy-color,
+    var(--w-copy-color, var(--w-color))
+  );
+  --w-copy-active-bg: color-mix(
+    in srgb,
+    var(--w-prop-copy-color, var(--w-copy-color, var(--w-color))) 12%,
+    var(--w-prop-copy-bg-color, var(--w-copy-bg-color, var(--w-bg-color)))
+  );
+  --w-copy-transition:
+    color var(--w-transition-quick-time, 0.15s),
+    border-color var(--w-transition-quick-time, 0.15s),
+    background-color var(--w-transition-quick-time, 0.15s);
+  --w-copy-toast-bg: var(--w-text-color);
+  --w-copy-toast-color: var(--w-bg-color);
+  --w-copy-toast-font-ratio: 0.28;
+  --w-copy-toast-pad-x-ratio: 0.18;
+  --w-copy-toast-pad-y-ratio: 0.09;
+  --w-copy-toast-radius: calc(var(--w-radius) * 0.5);
+  --w-copy-toast-shadow: 0 10px 20px -5px
+    color-mix(in srgb, #000 30%, transparent);
+  --w-copy-toast-gap: 8px;
+  --w-copy-toast-fade-extra: 20px;
+  --w-copy-toast-show-duration: 0.4s;
+  --w-copy-toast-show-easing: cubic-bezier(0.68, -0.55, 0.265, 1.55);
+  --w-copy-toast-hold-ms: 1000;
+  --w-copy-toast-fade-ms: 500;
+
+  /*
+   * image：宽高由组件根 --__size；默认 60px 为绝对主题值（非 var(--w-size)）
+   *   占位剪影用 ratio；圆角默认 0，round 时 50%
+   */
+  --w-image-size: 60px;
+  --w-image-object-fit: contain;
+  --w-image-placeholder-bg: var(--w-color-border-1);
+  --w-image-placeholder-fg: color-mix(
+    in srgb,
+    var(--w-color-font-4) 70%,
+    var(--w-bg-color)
+  );
+  --w-image-placeholder-head-ratio: 0.4;
+  --w-image-placeholder-dot-ratio: calc(1 / 12);
+  --w-image-placeholder-body-top: 80%;
+  --w-image-placeholder-shadow-x-ratio: -0.4;
+  --w-image-placeholder-shadow-y-ratio: 0.546;
+  --w-image-shadow: 0 25px 40px color-mix(in srgb, #000 15%, transparent);
+
+  /*
+   * picture：缩略图叠放 + 全屏预览；尺度桥接 Image（--w-prop-image-size）
+   *   勿在 :root 写 --w-picture-color 等三级算死；默认宽高可用绝对 --w-picture-size
+   */
+  --w-picture-size: 40px;
+  --w-picture-overlap-ratio: 0.5;
+  --w-picture-thumb-bg: var(--w-color-border-1);
+  --w-picture-thumb-border: 1px solid var(--w-color-border-1);
+  --w-picture-thumb-mid-shadow:
+    -5px 0 8px -2px color-mix(in srgb, #000 30%, transparent),
+    5px 0 8px -2px color-mix(in srgb, #000 30%, transparent);
+  --w-picture-viewer-mask-bg: color-mix(in srgb, #000 37%, transparent);
+  --w-picture-viewer-close-inset: 12px;
+  --w-picture-viewer-close-color: var(--w-color-font-5);
+  --w-picture-viewer-close-hover-color: var(--w-bg-color);
+  --w-picture-viewer-nav-inset: 12px;
+  --w-picture-viewer-nav-color: var(--w-color-font-4);
+  --w-picture-viewer-nav-hover-color: var(
+    --w-prop-picture-color,
+    var(--w-picture-color, var(--w-color))
+  );
+  --w-picture-viewer-nav-size: 40px;
+  --w-picture-viewer-stage-pad: 40px;
+  --w-picture-viewer-thumb-h: 50px;
+  --w-picture-viewer-thumb-gap: 1px;
+  --w-picture-viewer-thumbs-pad: 12px;
+  --w-picture-viewer-thumbs-bottom: 20px;
+  --w-picture-viewer-thumbs-bg: color-mix(in srgb, #000 40%, transparent);
+  --w-picture-viewer-thumbs-blur: 12px;
+  --w-picture-viewer-thumbs-shadow:
+    0 4px 6px -1px color-mix(in srgb, #000 10%, transparent),
+    0 2px 4px -2px color-mix(in srgb, #000 10%, transparent);
+  --w-picture-viewer-thumb-opacity: 0.5;
+  --w-picture-viewer-thumb-active-shadow:
+    3px 0 5px color-mix(in srgb, #000 30%, transparent),
+    -3px 0 5px color-mix(in srgb, #000 30%, transparent);
+  --w-picture-viewer-thumb-scale: 1.25;
+  /* 点击缩略图 → 大图 FLIP；底栏自下而上 */
+  --w-picture-img-enter-duration: 0.52s;
+  /* 末端更柔，避免「撞停」感 */
+  --w-picture-img-enter-ease: cubic-bezier(0.33, 1, 0.68, 1);
+  --w-picture-thumbs-enter-duration: 0.38s;
+  --w-picture-thumbs-enter-ease: cubic-bezier(0.22, 1, 0.36, 1);
+  --w-picture-thumbs-enter-distance: 28px;
+  /* 视口缩放钳制 + 工具条（对齐 thumbs 风格） */
+  --w-picture-zoom-min: 0.1;
+  --w-picture-zoom-max: 8;
+  --w-picture-transform-transition: transform 0.2s
+    var(--w-transition-timing-function, ease);
+  --w-picture-toolbar-bottom: calc(
+    var(--w-picture-viewer-thumbs-bottom) + var(--w-picture-viewer-thumb-h) +
+      var(--w-picture-viewer-thumbs-pad) * 2 + 16px
+  );
+  --w-picture-toolbar-gap: 4px;
+  --w-picture-toolbar-pad: 8px 10px;
+  --w-picture-toolbar-btn-size: 32px;
+  --w-picture-toolbar-icon-size: 18px;
+  --w-picture-toolbar-bg: var(--w-picture-viewer-thumbs-bg);
+  --w-picture-toolbar-blur: var(--w-picture-viewer-thumbs-blur);
+  --w-picture-toolbar-shadow: var(--w-picture-viewer-thumbs-shadow);
+  --w-picture-toolbar-color: var(--w-color-font-5);
+  --w-picture-toolbar-hover-bg: color-mix(in srgb, #fff 16%, transparent);
+  --w-picture-toolbar-divider: color-mix(in srgb, #fff 22%, transparent);
+
+  /* loading：尺度/主色/正文由组件根 --__size / --__color / --__text 重绑；
+   *   --w-loading-size|color|text-color 为可选主题钩子；勿在 :root 写算死值
+   *   --w-loading-icon-color：主色三级最终回退（历史灰），父桥接写 --w-prop-loading-color */
+  --w-loading-font-ratio: 0.35;
+  --w-loading-icon-ratio: 0.416667; /* 5/12 */
+  --w-loading-icon-color: var(--w-color-font-2);
+  --w-loading-text-color: var(--w-color-font-2);
+  --w-loading-text-gap: var(--w-gap);
+  --w-loading-mask-bg: color-mix(in srgb, var(--w-bg-color) 75%, transparent);
+  --w-loading-spin-duration: 1.2s;
+
+  /*
+   * tree：派生在 .w-tree 用 --__size / --__bg / --__text 重绑；整体背景由使用方定义
+   *   --w-tree-size / --w-tree-color / --w-tree-bg-color / --w-tree-text-color 为可选主题钩子
+   */
+  --w-tree-font-ratio: 0.35;
+  --w-tree-icon-ratio: 0.4;
+  --w-tree-indent-ratio: 0.666667; /* 2/3 */
+  --w-tree-list-gap-ratio: 0.066667; /* 1/15 */
+  --w-tree-item-gap-ratio: 0.15;
+  --w-tree-item-pad-y-ratio: 0.066667; /* 2/30 */
+  --w-tree-item-pad-x-ratio: 0.3;
+  --w-tree-arrow-size-ratio: 0.7;
+  --w-tree-arrow-size-min: 24px;
+  --w-tree-item-label-pad-y-ratio: 0.2;
+  --w-tree-item-label-pad-x-ratio: 0.111111; /* 2/18 */
+  --w-tree-arrow-margin-ratio: 0.1;
+  --w-tree-color-light-4-mix: 50%;
+  --w-tree-color-light-9-mix: 6%;
+  --w-tree-item-hover-mix: 8%;
+  --w-tree-arrow-color-mix: 48%;
+  --w-tree-arrow-hover-bg-mix: 8%;
+  --w-tree-item-radius-inset: 2px;
+  --w-tree-radius: var(--w-radius);
+  /* 项圆角可选；色面在 .w-tree 用 --__* + mix 组装，勿在此写死 paint 别名 */
+
+  /* tree-choose：派生在组件根重绑；--w-tree-choose-size 为可选主题钩子 */
+  --w-tree-choose-item-radius-inset: 2px;
+
+  /*
+   * modal：字号/标题/header/padding 在 .w-modal 用 --__size 重绑；
+   *   Close / Btn / Loading 经 prop 层桥接跟随
+   *   表面走三级 --w-modal-bg/text-color（→ --__bg/--__text），勿在此写
+   *   --w-modal-background-color 等画笔别名（会被实例核盖掉）
+   *   --w-modal-size 为可选尺度钩子，勿写 var(--w-size) 算死
+   */
+  --w-modal-font-ratio: 0.35;
+  --w-modal-title-font-ratio: 0.45;
+  --w-modal-icon-ratio: 0.4;
+  --w-modal-header-height-ratio: 1.277778; /* 23/18 */
+  --w-modal-padding-x-ratio: 0.444444; /* 4/9 */
+  --w-modal-footer-bg-mix: 2%;
+  --w-modal-footer-padding-y: 12px;
+  --w-modal-title-weight: 700;
+  --w-modal-width: 600px;
+  --w-modal-height: 50vh;
+  --w-modal-min-height: auto;
+  --w-modal-box-shadow: var(--w-box-shadow);
+
+  /*
+   * drawer：字号/标题/header padding 在 .w-drawer 用 --__size 重绑
+   *   --w-drawer-size / --w-drawer-bg-color / --w-drawer-text-color 为可选主题钩子
+   */
+  --w-drawer-font-ratio: 0.35;
+  --w-drawer-title-font-ratio: 0.45;
+  --w-drawer-icon-ratio: 0.4;
+  --w-drawer-header-pad-y-ratio: 0.444444; /* 4/9 */
+  --w-drawer-header-pad-x-ratio: 0.555556; /* 5/9 */
+  --w-drawer-max-size-ratio: 1.2;
+  --w-drawer-shadow-text-mix: 15%;
+  /* 表面走三级 --w-drawer-bg/text-color（→ --__bg/--__text），勿写 background-color 画笔别名 */
+  --w-drawer-box-shadow: var(--w-box-shadow);
+  --w-drawer-shadow-right: -3px 0 10px
+    color-mix(
+      in srgb,
+      var(--w-text-color) var(--w-drawer-shadow-text-mix),
+      transparent
+    );
+  --w-drawer-shadow-left: 3px 0 10px
+    color-mix(
+      in srgb,
+      var(--w-text-color) var(--w-drawer-shadow-text-mix),
+      transparent
+    );
+  --w-drawer-shadow-top: 0 3px 10px
+    color-mix(
+      in srgb,
+      var(--w-text-color) var(--w-drawer-shadow-text-mix),
+      transparent
+    );
+  --w-drawer-shadow-bottom: 0 -3px 10px
+    color-mix(
+      in srgb,
+      var(--w-text-color) var(--w-drawer-shadow-text-mix),
+      transparent
+    );
+
+  /* cornerEars：默认尺度相对 --w-size；组件根用 ratio 求 --__size */
+  --w-corner-size-ratio: 0.555556; /* 5/9 */
+  --w-corner-fill: var(--w-color-font-4);
+  --w-corner-stroke: transparent;
+  --w-corner-stroke-width: 1px;
+
+  /*
+   * notice：字号/内边距/图标在 .w-notice-item 用 --__size 重绑
+   *   --w-notice-color 为可选主题钩子，勿写 var(--w-color)（算死）
+   */
+  --w-notice-font-ratio: 0.35;
+  --w-notice-icon-ratio: 0.5;
+  --w-notice-pad-y-ratio: 0.333333; /* 1/3 */
+  --w-notice-pad-x-ratio: 0.444444; /* 4/9 */
+  --w-notice-gap-item-ratio: 0.4;
+  --w-notice-inner-gap-ratio: 0.25;
+  --w-notice-icon-margin-top-ratio: 0.05;
+  --w-notice-title-margin-bottom-ratio: 0.1;
+  --w-notice-font-2-mix: 72%;
+  --w-notice-bg-blur-mix: 72%;
+  --w-notice-border-radius: var(--w-radius);
+  --w-notice-box-shadow: 0 0 15px
+    color-mix(in srgb, var(--w-text-color) 10%, transparent);
+  --w-notice-cubic-bezier: cubic-bezier(0.16, 1, 0.3, 1);
+  --w-notice-max-width: 360px;
+  --w-notice-min-width: 200px;
+  /* info 色勿在此写死 var(--w-color)，否则挡掉 --w-prop-notice-color / --w-notice-color */
+  --w-notice-success-color: var(--w-success);
+  --w-notice-warning-color: var(--w-warn);
+  --w-notice-error-color: var(--w-error);
+
+  /*
+   * confirm：尺度/字号/padding 在 .w-drawer.w-confirm 用 --__size 重绑
+   *   --w-confirm-size / --w-confirm-color 为可选主题钩子，勿写 var(--w-size/--w-color) 算死
+   */
+  --w-confirm-font-ratio: 0.35;
+  --w-confirm-title-font-ratio: 0.45;
+  --w-confirm-close-icon-ratio: 0.5;
+  --w-confirm-header-close-pad-ratio: 1;
+  --w-confirm-header-pad-y-ratio: 0.277778; /* 5/18 */
+  --w-confirm-header-pad-x-ratio: 0.4;
+  --w-confirm-body-pad-ratio: 0.4;
+  --w-confirm-footer-pad-y-ratio: 0.277778; /* 5/18 */
+  --w-confirm-footer-pad-x-ratio: 0.4;
+  --w-confirm-footer-gap-ratio: 0.222222; /* 2/9 */
+  --w-confirm-font-2-mix: 72%;
+  --w-confirm-title-weight: 600;
+  --w-confirm-line-height: 1.6;
+  --w-confirm-min-width: 420px;
+  --w-confirm-max-width: 560px;
+  --w-confirm-min-height: 44px;
+  --w-confirm-danger-color: var(--w-error);
+
+  --w-form-item-font-ratio: 0.35;
+  --w-form-item-pad-x-ratio: 0.25;
+  --w-form-item-width-ratio: 5;
+  --w-form-item-padding-x: calc(var(--w-size) * var(--w-form-item-pad-x-ratio));
+  /* 表单控件默认宽 = 5×尺度；有 --__size 的控件根会按有效 size 重绑 */
+  --w-form-item-width: calc(var(--w-size) * var(--w-form-item-width-ratio));
+  --w-form-item-color: var(--w-color-font-1);
+  --w-form-item-color-hover: var(--w-color-font-1);
+  --w-form-item-color-focus: var(--w-color-font-1);
+  --w-form-item-border-color: var(--w-color-border);
+  --w-form-item-border-color-hover: var(--w-color-border-2);
+  --w-form-item-border-color-focus: var(--w-color);
+  --w-form-item-border: 1px solid var(--w-form-item-border-color);
+  --w-form-item-background-color: var(--w-bg-color);
+  --w-form-item-background-color-hover: var(--w-bg-color);
+  --w-form-item-background-color-focus: var(--w-bg-color);
+  /* 禁用：文字可读弱化；描边仍用 border（勿用浅底当边框）；底用浅底 */
+  --w-form-item-disabled-color: var(--w-color-disabled);
+  --w-form-item-disabled-border-color: var(--w-color-border);
+  --w-form-item-disabled-background-color: var(--w-bg-color-disabled);
+  /* placeholder 用辅助字色，禁止绑 border（描边过淡，暗色下几乎不可见） */
+  --w-form-item-placeholder-color: var(--w-color-font-3);
+  --w-form-item-disabled-placeholder-color: var(--w-color-font-4);
+  /* 箭头 / 步进等表单控件内图标 */
+  --w-form-item-icon-color: var(--w-color-font-3);
+  --w-form-item-box-shadow: var(--w-color-primary-light-6);
+  --w-form-item-focus-ring: 0 0 6px var(--w-form-item-box-shadow);
+
+  --w-fade-white-background-color: color-mix(
+    in srgb,
+    var(--w-bg-color) 70%,
+    transparent
+  );
+  --w-fade-black-background-color: color-mix(
+    in srgb,
+    var(--w-text-color) 45%,
+    transparent
+  );
+
+  /* sheet：行高默认在组件根三级回退；--w-sheet-size / --w-sheet-bg-color / --w-sheet-text-color 为可选主题钩子
+   *   表面色在 .w-sheet-container 用 --__* + mix 组装，勿在此写 paint 别名 */
+  --w-sheet-thead-bg-mix: 8%;
+  --w-sheet-tr-stripe-mix: 1.5%;
+  --w-sheet-tr-checked-mix: 14%;
+  --w-sheet-sticky-top-shadow:
+    0 1px rgba(0, 0, 0, 0.03), 0 3px 7px rgba(0, 0, 0, 0.1);
+  --w-sheet-sticky-bottom-shadow:
+    inset 0 1px rgba(0, 0, 0, 0.05), 0 -1px 5px rgba(0, 0, 0, 0.1);
+  --w-sheet-resize-line-shadow: 0 1px 1px 2px rgba(0, 0, 0, 0.03);
+  --w-sheet-fixed-shadow-color: rgba(0, 0, 0, 0.07);
+  --w-sheet-fixed-shadow-left: linear-gradient(
+    90deg,
+    var(--w-sheet-fixed-shadow-color) 5%,
+    transparent 70%
+  );
+  --w-sheet-fixed-shadow-right: linear-gradient(
+    -90deg,
+    var(--w-sheet-fixed-shadow-color) 5%,
+    transparent 70%
+  );
+  --w-sheet-check-disabled-opacity: 0.35;
+
+  /* date-picker：派生在 .w-date-picker 用 --__size 重绑；--w-date-picker-size 为可选主题钩子 */
+
+  /* time-picker：派生在 .w-time-picker / .w-time-dial 用 --__size 重绑；--w-time-picker-size 为可选主题钩子 */
+  --w-svg-icon-size: calc(var(--w-size) * 0.6);
+
+  /* color-picker：派生在组件根用 --__size/--__color/--__bg/--__text/--__radius 重绑；内部圆角 = radius - 2 */
+  --w-color-picker-radius: var(--w-radius);
+  --w-color-picker-checker-color: var(--w-color-font-4);
+  --w-color-picker-color-light-6-mix: 30%;
+  --w-color-picker-panel-width-ratio: calc(32 / 3);
+  --w-color-picker-panel-padding-ratio: 0.4;
+  --w-color-picker-gap-ratio: 0.4;
+  --w-color-picker-inner-gap-ratio: calc(4 / 15);
+  --w-color-picker-saturation-height-ratio: calc(16 / 3);
+  --w-color-picker-slider-height-ratio: 0.4;
+  --w-color-picker-preview-square-ratio: calc(4 / 3);
+  --w-color-picker-value-min-width-ratio: 1.7;
+  --w-color-picker-value-label-font-ratio: 0.4;
+  --w-color-picker-value-gap-ratio: calc(2 / 15);
+  --w-color-picker-handle-size-ratio: 0.4;
+  --w-color-picker-slider-handle-width-ratio: calc(2 / 15);
+  --w-color-picker-slider-handle-height-ratio: 0.53;
+  --w-color-picker-checker-size-ratio: calc(4 / 15);
+
+  /* icon */
+  --w-icon-font-size: var(--w-font-size-2);
+  --w-icon-spin-duration: 1s;
+  --w-icon-rotate-duration: var(--w-transition-time);
+
+  /* close */
+  --w-close-font-size: var(--w-font-size-2);
+  --w-close-color: var(--w-color-font-4);
+  --w-close-hover-color: var(--w-color-font-2);
+
+  /* list：派生在 .w-list 用 --__size 重绑；--w-list-size 为可选主题钩子
+   *   项圆角可选覆写；未设时组件用 --__item-radius（radius - inset） */
+  --w-list-item-radius-inset: 2px;
+
+  /* choose / choose2 / match：尺度派生在组件根重绑；--w-*-size 为可选主题钩子 */
+  --w-choose-layer-max-height: 360px;
+  --w-choose-padding-x: var(--w-form-item-padding-x);
+  --w-choose-panel-pad-ratio: calc(5 / 36);
+  --w-choose-item-pad-x-ratio: 0.15;
+  --w-choose-item-color-light-9-mix: 6%;
+  --w-choose-item-hover-mix: 8%;
+  --w-choose-item-radius-inset: 2px;
+  --w-choose-color-light-6-mix: 35%;
+  --w-choose2-layer-max-height: 360px; /* 未测到 trigger 时的兜底；展开后按视口剩余空间覆盖，上限 360 */
+  --w-choose2-tag-gap-ratio: 0.1;
+  --w-choose2-tag-pad-x-ratio: 0.15;
+  --w-choose2-tag-h-ratio: 0.65;
+  --w-choose2-tag-inner-gap-ratio: 0.06;
+  --w-choose2-tag-close-pad-ratio: 0.08;
+  --w-choose2-tag-close-font-ratio: 0.28;
+  --w-choose2-tag-close-font-min: 8px;
+  --w-choose2-tag-close-font-max: 12px;
+  --w-choose2-checkall-btn-size-ratio: 0.65;
+  --w-choose2-checkall-checkbox-size-ratio: 0.85;
+  --w-choose2-checkall-gap-ratio: calc(2 / 9);
+  --w-choose2-color-light-6-mix: 35%;
+  --w-choose2-focus-ring: 0 0 6px
+    color-mix(
+      in srgb,
+      var(--w-prop-choose2-color, var(--w-choose2-color, var(--w-color)))
+        var(--w-choose2-color-light-6-mix),
+      transparent
+    );
+  --w-match-layer-max-height: 360px;
+  --w-match-icon-gap-ratio: 0.25;
+  --w-match-close-offset-ratio: 0.1;
+  --w-match-fallback-min-h-ratio: 2.3;
+  --w-match-item-color-light-5-mix: 40%;
+  --w-match-item-radius-inset: 2px;
+  --w-cascade-layer-max-height: 300px;
+  --w-cascade-list-min-width: 80px;
+  --w-cascade-gap-ratio: 0.4;
+  --w-cascade-list-min-width-ratio: 2.5;
+  --w-tree-choose-icon-gap-ratio: calc(4 / 15);
+  --w-tree-choose-min-width-ratio: 4;
+  --w-tree-choose-color-light-6-mix: 35%;
+  --w-tree-choose-focus-ring: 0 0 6px
+    color-mix(
+      in srgb,
+      var(
+          --w-prop-tree-choose-color,
+          var(--w-tree-choose-color, var(--w-color))
+        )
+        var(--w-tree-choose-color-light-6-mix),
+      transparent
+    );
+
+  /* trigger：--w-trigger-size|color|bg-color|text-color 为可选主题钩子；
+   *   字号/padding 在组件 CSS 内由 --__size 派生；子 Loading 桥 size/color/text */
+  --w-trigger-pad-l-ratio: 0.4;
+  --w-trigger-pad-r-ratio: calc(4 / 15);
+
+  /* pagination：派生在 .w-pagination 用 --__size 重绑；--w-pagination-item-size 为可选主题钩子
+   *   hover 边框跟主色阶梯（组件根 --__color-light-5），勿写死 primary-light-5 */
+  --w-pagination-border-color: var(--w-color-border);
+  --w-pagination-item-radius: var(--w-radius);
+
+  /* radio / checkbox：尺度派生在 .w-radio / .w-checkbox 根用 --__size 重绑；--w-*-size 为可选主题钩子 */
+  --w-radio-icon-ratio: 0.42;
+  --w-radio-pad-x-ratio: 0.4;
+  --w-radio-card-pad-y-ratio: 0.2;
+  --w-radio-icon-gap-ratio: 0.2;
+  --w-radio-item-gap-ratio: calc(23 / 36);
+  --w-radio-icon-gap: calc(var(--w-size) * var(--w-radio-icon-gap-ratio));
+  --w-radio-item-gap: calc(var(--w-size) * var(--w-radio-item-gap-ratio));
+  --w-radio-card-bg: var(--w-bg-color);
+  --w-radio-pop-duration: 0.28s;
+  --w-radio-color-light-5-mix: 40%;
+  --w-radio-color-light-8-mix: 12%;
+  --w-radio-card-checked-ring: 0 0 0 1px
+    color-mix(
+      in srgb,
+      var(--w-prop-radio-color, var(--w-radio-color, var(--w-color)))
+        var(--w-radio-color-light-8-mix),
+      var(--w-prop-radio-bg-color, var(--w-radio-bg-color, var(--w-bg-color)))
+    );
+  --w-radio-disabled-opacity: 0.6;
+
+  --w-checkbox-icon-ratio: 0.42;
+  --w-checkbox-pad-x-ratio: calc(17 / 80);
+  --w-checkbox-icon-gap-ratio: 0.2;
+  --w-checkbox-item-gap-ratio: calc(23 / 36);
+  --w-checkbox-icon-gap: calc(var(--w-size) * var(--w-checkbox-icon-gap-ratio));
+  --w-checkbox-item-gap: calc(var(--w-size) * var(--w-checkbox-item-gap-ratio));
+  --w-checkbox-pop-duration: 0.28s;
+  --w-checkbox-disabled-opacity: 0.6;
+
+  /* form */
+  --w-form-padding-ratio: 0.25;
+  --w-form-title-gap-ratio: 0.3;
+  --w-form-inline-gap-y-ratio: 0.3;
+  --w-form-inline-gap-x-ratio: 0.4;
+  --w-form-item-margin-bottom-ratio: 0.5;
+  --w-form-item-label-width-ratio: calc(20 / 9);
+  --w-form-item-label-gap-ratio: 0.3;
+  --w-form-item-label-top-gap-ratio: 0.15;
+  --w-form-item-label-align-pad-ratio: 0.2;
+  --w-form-item-required-gap-ratio: calc(1 / 9);
+  --w-form-item-error-gap-ratio: 0.1;
+  --w-form-item-error-right-gap-ratio: 0.25;
+  --w-form-item-error-font-ratio: 0.3;
+  --w-form-padding: calc(var(--w-size) * var(--w-form-padding-ratio));
+  --w-form-title-gap: calc(var(--w-size) * var(--w-form-title-gap-ratio));
+  --w-form-title-font-size: var(--w-font-size-2);
+  --w-form-inline-gap: calc(var(--w-size) * var(--w-form-inline-gap-y-ratio))
+    calc(var(--w-size) * var(--w-form-inline-gap-x-ratio));
+  --w-form-item-margin-bottom: calc(
+    var(--w-size) * var(--w-form-item-margin-bottom-ratio)
+  );
+  --w-form-item-label-width: calc(
+    var(--w-size) * var(--w-form-item-label-width-ratio)
+  );
+  --w-form-item-label-gap: calc(
+    var(--w-size) * var(--w-form-item-label-gap-ratio)
+  );
+  --w-form-item-label-top-gap: calc(
+    var(--w-size) * var(--w-form-item-label-top-gap-ratio)
+  );
+  --w-form-item-label-align-pad: calc(
+    var(--w-size) * var(--w-form-item-label-align-pad-ratio)
+  );
+  --w-form-item-label-font-size: var(--w-font-size);
+  --w-form-item-label-line-height: 1.4;
+  --w-form-item-required-gap: calc(
+    var(--w-size) * var(--w-form-item-required-gap-ratio)
+  );
+  --w-form-item-error-gap: calc(
+    var(--w-size) * var(--w-form-item-error-gap-ratio)
+  );
+  --w-form-item-error-right-gap: calc(
+    var(--w-size) * var(--w-form-item-error-right-gap-ratio)
+  );
+  --w-form-item-error-font-size: max(
+    var(--w-font-size-min),
+    calc(var(--w-size) * var(--w-form-item-error-font-ratio))
+  );
+  --w-form-item-error-line-height: 1.35;
+  --w-form-item-error-color: var(--w-error);
+
+  /* upload：卡片/缩略图等在 .w-upload 用 --__size 重绑；--w-upload-size 为可选主题钩子 */
+  --w-upload-card-size-ratio: calc(100 / 36);
+  --w-upload-thumb-size-ratio: calc(64 / 36);
+  --w-upload-trigger-min-width-ratio: calc(200 / 36);
+  --w-upload-item-padding-ratio: calc(2 / 9);
+  --w-upload-remove-height-ratio: calc(7 / 9);
+  --w-upload-disabled-opacity: 0.6;
+  --w-upload-color-light-9-mix: 6%;
+  --w-upload-remove-opacity: 0.7;
+  --w-upload-remove-text-opacity: 0.55;
+  --w-upload-remove-color: rgba(255, 255, 255, 0.85);
+  --w-upload-remove-bg: linear-gradient(
+    to bottom,
+    transparent 10%,
+    rgba(0, 0, 0, 0.75)
+  );
+
+  /* slider：轨道派生在组件根用 --__size 重绑；勿在 :root 写 --w-slider-size: var(--w-size) */
+  --w-slider-track-thickness-ratio: calc(2 / 9);
+  --w-slider-rod-extra-ratio: 0.2;
+  --w-slider-xy-size-ratio: calc(200 / 36);
+  --w-slider-xy-rod-ratio: calc(7 / 36);
+  --w-slider-color-light-8-mix: 12%;
+  --w-slider-focus-ring-mix: 28%;
+  --w-slider-rod-hover-shadow-mix: 35%;
+  --w-slider-disabled-opacity: 0.55;
+  --w-slider-hit-min: 24px;
+  --w-slider-rod-border-width: 2px;
+  --w-slider-rod-hover-scale: 1.12;
+  --w-slider-focus-ring: 0 0 0 3px
+    color-mix(
+      in srgb,
+      var(--w-prop-slider-color, var(--w-slider-color, var(--w-color)))
+        var(--w-slider-focus-ring-mix),
+      transparent
+    );
+  --w-slider-rod-hover-shadow: 0 1px 6px
+    color-mix(
+      in srgb,
+      var(--w-prop-slider-color, var(--w-slider-color, var(--w-color)))
+        var(--w-slider-rod-hover-shadow-mix),
+      transparent
+    );
+
+  /* list */
+  --w-list-font-ratio: 0.35;
+  --w-list-pad-x-ratio: 0.15;
+  --w-list-panel-pad-ratio: calc(5 / 36);
+  --w-list-fallback-min-h-ratio: 2.3;
+  --w-list-color-light-9-mix: 6%;
+  --w-list-item-hover-mix: 8%;
+
+  /* tab */
+  --w-tab-font-ratio: 0.35;
+  --w-tab-pad-y-ratio: 0.2;
+  --w-tab-pad-x-ratio: 0.35;
+  --w-tab-item-gap-ratio: 0.15;
+  --w-tab-close-ratio: 0.4;
+  --w-tab-panel-gap-ratio: 0.3;
+  --w-tab-panel-pad-ratio: 0.4;
+  --w-tab-card-gap-ratio: 0.1;
+  --w-tab-font-2-mix: 72%;
+  --w-tab-color-light-8-mix: 12%;
+  --w-tab-disabled-opacity: 0.45;
+  --w-tab-close-margin-ratio: 0.05;
+
+  /* pagination */
+  --w-pagination-font-ratio: 0.3;
+  --w-pagination-pad-x-ratio: 0.25;
+  --w-pagination-gap-ratio: calc(1 / 3);
+  --w-pagination-item-gap-ratio: calc(1 / 9);
+  --w-pagination-pager-gap-ratio: calc(5 / 36);
+  --w-pagination-ellipsis-pad-x-ratio: 0.15;
+  --w-pagination-jumper-min-width-ratio: 0.75;
+  --w-pagination-total-font-ratio: 0.4;
+  --w-pagination-sizes-min-width-ratio: 3.2;
+  --w-pagination-nav-gap-ratio: 0.25;
+  --w-pagination-goto-width-ratio: 1.5;
+  --w-pagination-color-light-5-mix: 40%;
+  --w-pagination-color-light-8-mix: 12%;
+  --w-pagination-disabled-opacity: 0.45;
+
+  /* sheet */
+  --w-sheet-font-ratio: 0.2625;
+  --w-sheet-gap-ratio: 0.4;
+  --w-sheet-color-light-5-mix: 40%;
+  --w-sheet-color-light-8-mix: 12%;
+  --w-sheet-font-2-mix: 72%;
+  --w-sheet-font-5-mix: 8%;
+  --w-sheet-border-mix: 18%;
+  --w-sheet-td-border-mix: 5%;
+  --w-sheet-td-pad-y-ratio: 0.125;
+  --w-sheet-td-narrow-pad-ratio: 0.075;
+  --w-sheet-sorter-icon-font-ratio: 0.309375;
+  --w-sheet-sorter-box-width-ratio: calc(5 / 12);
+  --w-sheet-sorter-box-height-ratio: 0.5;
+  --w-sheet-sorter-offset-right-ratio: 0.1;
+  --w-sheet-resize-handle-width-ratio: calc(1 / 6);
+  --w-sheet-fixed-shadow-width-ratio: calc(15 / 48);
+  --w-sheet-col-width-ratio: 2.5;
+  --w-sheet-col-checkbox-width-ratio: calc(45 / 48);
+  --w-sheet-col-radio-width-ratio: calc(42 / 48);
+  --w-sheet-col-action-width-ratio: calc(44 / 48);
+  --w-sheet-empty-min-height-ratio: 4;
+  --w-sheet-sorter-w-ratio: 0.4;
+  --w-sheet-sorter-h-ratio: 0.44;
+
+  /* progress */
+  --w-progress-h-ratio: 0.1;
+  --w-progress-h-active-ratio: 0.15;
+  --w-progress-thumb-ratio: 0.3;
+  --w-progress-thumb-ring-mix: 25%;
+
+  /* circle-progress：viewBox 100 下描边占比；渐变起色 / 底轨可主题化 */
+  --w-circle-progress-stroke-ratio: 0.3;
+  --w-circle-progress-color-start: #0690ff;
+  --w-circle-progress-track: var(--w-color-font-5);
+
+  /* audio-player */
+  --w-audio-player-font-ratio: 0.35;
+  --w-audio-player-bar-height-ratio: calc(50 / 36);
+  --w-audio-player-btn-font-ratio: 0.3;
+
+  /* time */
+  --w-time-font-ratio: 0.35;
+  --w-time-dial-item-width-ratio: 1.2;
+  --w-time-dial-col-gap-ratio: 0.25;
+  --w-time-picker-panel-padding-ratio: 0.4;
+  --w-time-dial-btn-size-ratio: 0.6;
+  --w-time-picker-panel-height-ratio: 8;
+  --w-time-dial-color-light-6-mix: 30%;
+  --w-time-dial-color-light-8-mix: 12%;
+
+  /* date */
+  --w-date-font-ratio: 0.35;
+  --w-date-font-2-ratio: 0.4;
+  --w-date-pad-x-ratio: 0.25;
+  --w-date-color-light-2-mix: 70%;
+  --w-date-color-light-6-mix: 30%;
+  --w-date-color-light-7-mix: 20%;
+  --w-date-color-light-8-mix: 12%;
+  --w-date-color-light-9-mix: 6%;
+  --w-date-hover-bg-mix: 8%;
+  --w-date-panel-width-ratio: 8;
+  --w-date-gap-ratio: 0.15;
+  --w-date-quick-gap-ratio: calc(4 / 15);
+  --w-date-quick-item-pad-y-ratio: calc(1 / 6);
+  --w-date-range-gap-ratio: 0.2;
+  --w-date-dot-size-ratio: 0.125;
+  --w-date-month-dot-bottom-ratio: calc(5 / 24);
+
+  /* tab：字号/间距在 .w-tab / .w-tab-wrapper 用 --__size 重绑；勿在 :root 写 --w-tab-size 算死 */
+
+  /* equalizer：高度在 .w-equalizer 用 --__size 重绑；勿在 :root 写 --w-equalizer-size 算死 */
+
+  /* audio-player：派生在 .w-audio-player 用 --__size 重绑；--w-audio-player-size 为可选主题钩子 */
+
+  /* progress：轨道/滑块由组件根 --__size 派生；主色三级；勿在 :root 写 --w-progress-size 算死 */
+  --w-progress-track: var(--w-color-font-5);
+  --w-progress-buffered: var(--w-color-font-2);
+  --w-progress-disabled-opacity: 0.55;
+  --w-progress-motion: 0.15s;
+
+  /* circle-progress：尺寸/主色由组件根 --__size / --__color 重绑；勿写 --w-circle-progress-size|color 算死 */
+
+  /* ellipsis：字号由组件根 --__size 派生；勿在 :root 写 --w-ellipsis-size 算死 */
+  --w-ellipsis-font-ratio: 0.35;
+
+  /* lcd-font：数字高度跟根 font-size（1em）；默认段厚 = 1.3 / viewBox高 18 */
+  /* 段粗细用 weight prop / --w-prop-lcd-font-weight / --w-lcd-font-weight（绝对长度）；未设时 font-weight 仍可加粗 */
+  --w-lcd-font-segment-thickness-ratio: 0.072222;
+  --w-lcd-font-digit-aspect: 0.5556;
+  --w-lcd-font-gap-ratio: 0.08;
+  --w-lcd-font-inactive-mix: 5%;
+  --w-lcd-font-bold-segment-scale: 1.12;
+  --w-lcd-font-dot-width-ratio: 0.2;
+  --w-lcd-font-comma-width-ratio: 0.26;
+  --w-lcd-font-minus-width-ratio: 0.5;
+  --w-lcd-font-plus-width-ratio: 0.55;
+  --w-lcd-font-space-width-ratio: 0.35;
+  --w-lcd-font-transition: 0.15s;
+}