# 曦寒视图组件 · 设计令牌 共 660 支。取值是缺省档(浅色 · 舒适 · 基础对比度)下的值; 「改写档」列出还有哪几份令牌源重新给过它——深色、紧凑、更高对比度、减弱动效、打印各是一档。 覆盖时在 `:root` 上直接设同名令牌即可,这一层是公开面。带下划线前缀的 `--xh-_*` 是私有槽,不要在外面设。 ## color | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-color-brand-50` | color | `oklch(0.971 0.014 258)` | — | | `--xh-color-brand-100` | color | `oklch(0.936 0.032 258)` | — | | `--xh-color-brand-200` | color | `oklch(0.885 0.062 258)` | — | | `--xh-color-brand-300` | color | `oklch(0.809 0.105 258)` | — | | `--xh-color-brand-400` | color | `oklch(0.702 0.165 258)` | — | | `--xh-color-brand-500` | color | `oklch(0.623 0.214 258)` | — | | `--xh-color-brand-600` | color | `oklch(0.546 0.216 258)` | — | | `--xh-color-brand-700` | color | `oklch(0.488 0.196 258)` | — | | `--xh-color-brand-800` | color | `oklch(0.424 0.164 258)` | — | | `--xh-color-brand-900` | color | `oklch(0.379 0.132 258)` | — | | `--xh-color-brand-950` | color | `oklch(0.282 0.089 258)` | — | | `--xh-color-neutral-0` | color | `oklch(1 0 0)` | — | | `--xh-color-neutral-50` | color | `oklch(0.985 0 0)` | — | | `--xh-color-neutral-100` | color | `oklch(0.967 0.001 258)` | — | | `--xh-color-neutral-200` | color | `oklch(0.922 0.002 258)` | — | | `--xh-color-neutral-300` | color | `oklch(0.87 0.003 258)` | — | | `--xh-color-neutral-400` | color | `oklch(0.708 0.005 258)` | — | | `--xh-color-neutral-450` | color | `oklch(0.65 0.006 258)` | — | | `--xh-color-neutral-500` | color | `oklch(0.556 0.006 258)` | — | | `--xh-color-neutral-550` | color | `oklch(0.52 0.006 258)` | — | | `--xh-color-neutral-600` | color | `oklch(0.439 0.006 258)` | — | | `--xh-color-neutral-650` | color | `oklch(0.4 0.006 258)` | — | | `--xh-color-neutral-700` | color | `oklch(0.371 0.006 258)` | — | | `--xh-color-neutral-750` | color | `oklch(0.28 0.006 258)` | — | | `--xh-color-neutral-800` | color | `oklch(0.269 0.006 258)` | — | | `--xh-color-neutral-900` | color | `oklch(0.208 0.006 258)` | — | | `--xh-color-neutral-950` | color | `oklch(0.145 0.005 258)` | — | | `--xh-color-danger-400` | color | `oklch(0.7 0.185 25)` | — | | `--xh-color-danger-500` | color | `oklch(0.637 0.208 25)` | — | | `--xh-color-danger-600` | color | `oklch(0.577 0.213 25)` | — | | `--xh-color-danger-700` | color | `oklch(0.5 0.2 25)` | — | | `--xh-color-success-500` | color | `oklch(0.723 0.171 149)` | — | | `--xh-color-success-600` | color | `oklch(0.648 0.165 149)` | — | | `--xh-color-success-700` | color | `oklch(0.51 0.15 149)` | — | | `--xh-color-warning-400` | color | `oklch(0.86 0.14 86)` | — | | `--xh-color-warning-500` | color | `oklch(0.795 0.161 86)` | — | | `--xh-color-warning-600` | color | `oklch(0.705 0.16 70)` | — | | `--xh-color-warning-700` | color | `oklch(0.62 0.15 70)` | — | | `--xh-color-warning-800` | color | `oklch(0.55 0.14 70)` | — | | `--xh-color-info-500` | color | `oklch(0.685 0.156 237)` | — | | `--xh-color-info-600` | color | `oklch(0.62 0.16 237)` | — | | `--xh-color-info-700` | color | `oklch(0.53 0.15 237)` | — | | `--xh-color-red-50` | color | `oklch(0.971 0.014 25)` | primitive.palette | | `--xh-color-red-100` | color | `oklch(0.936 0.032 25)` | primitive.palette | | `--xh-color-red-200` | color | `oklch(0.885 0.062 25)` | primitive.palette | | `--xh-color-red-300` | color | `oklch(0.809 0.105 25)` | primitive.palette | | `--xh-color-red-400` | color | `oklch(0.702 0.165 25)` | primitive.palette | | `--xh-color-red-500` | color | `oklch(0.623 0.214 25)` | primitive.palette | | `--xh-color-red-600` | color | `oklch(0.546 0.216 25)` | primitive.palette | | `--xh-color-red-700` | color | `oklch(0.488 0.196 25)` | primitive.palette | | `--xh-color-red-800` | color | `oklch(0.424 0.164 25)` | primitive.palette | | `--xh-color-red-900` | color | `oklch(0.379 0.132 25)` | primitive.palette | | `--xh-color-red-950` | color | `oklch(0.282 0.089 25)` | primitive.palette | | `--xh-color-orange-50` | color | `oklch(0.971 0.014 50)` | primitive.palette | | `--xh-color-orange-100` | color | `oklch(0.936 0.032 50)` | primitive.palette | | `--xh-color-orange-200` | color | `oklch(0.885 0.062 50)` | primitive.palette | | `--xh-color-orange-300` | color | `oklch(0.809 0.105 50)` | primitive.palette | | `--xh-color-orange-400` | color | `oklch(0.702 0.165 50)` | primitive.palette | | `--xh-color-orange-500` | color | `oklch(0.623 0.214 50)` | primitive.palette | | `--xh-color-orange-600` | color | `oklch(0.546 0.216 50)` | primitive.palette | | `--xh-color-orange-700` | color | `oklch(0.488 0.196 50)` | primitive.palette | | `--xh-color-orange-800` | color | `oklch(0.424 0.164 50)` | primitive.palette | | `--xh-color-orange-900` | color | `oklch(0.379 0.132 50)` | primitive.palette | | `--xh-color-orange-950` | color | `oklch(0.282 0.089 50)` | primitive.palette | | `--xh-color-amber-50` | color | `oklch(0.971 0.014 70)` | primitive.palette | | `--xh-color-amber-100` | color | `oklch(0.936 0.032 70)` | primitive.palette | | `--xh-color-amber-200` | color | `oklch(0.885 0.062 70)` | primitive.palette | | `--xh-color-amber-300` | color | `oklch(0.809 0.105 70)` | primitive.palette | | `--xh-color-amber-400` | color | `oklch(0.702 0.165 70)` | primitive.palette | | `--xh-color-amber-500` | color | `oklch(0.623 0.18 70)` | primitive.palette | | `--xh-color-amber-600` | color | `oklch(0.546 0.183 70)` | primitive.palette | | `--xh-color-amber-700` | color | `oklch(0.488 0.196 70)` | primitive.palette | | `--xh-color-amber-800` | color | `oklch(0.424 0.164 70)` | primitive.palette | | `--xh-color-amber-900` | color | `oklch(0.379 0.132 70)` | primitive.palette | | `--xh-color-amber-950` | color | `oklch(0.282 0.089 70)` | primitive.palette | | `--xh-color-yellow-50` | color | `oklch(0.971 0.014 95)` | primitive.palette | | `--xh-color-yellow-100` | color | `oklch(0.936 0.032 95)` | primitive.palette | | `--xh-color-yellow-200` | color | `oklch(0.885 0.062 95)` | primitive.palette | | `--xh-color-yellow-300` | color | `oklch(0.809 0.105 95)` | primitive.palette | | `--xh-color-yellow-400` | color | `oklch(0.702 0.165 95)` | primitive.palette | | `--xh-color-yellow-500` | color | `oklch(0.623 0.17 95)` | primitive.palette | | `--xh-color-yellow-600` | color | `oklch(0.546 0.171 95)` | primitive.palette | | `--xh-color-yellow-700` | color | `oklch(0.488 0.184 95)` | primitive.palette | | `--xh-color-yellow-800` | color | `oklch(0.424 0.164 95)` | primitive.palette | | `--xh-color-yellow-900` | color | `oklch(0.379 0.132 95)` | primitive.palette | | `--xh-color-yellow-950` | color | `oklch(0.282 0.089 95)` | primitive.palette | | `--xh-color-lime-50` | color | `oklch(0.971 0.014 125)` | primitive.palette | | `--xh-color-lime-100` | color | `oklch(0.936 0.032 125)` | primitive.palette | | `--xh-color-lime-200` | color | `oklch(0.885 0.062 125)` | primitive.palette | | `--xh-color-lime-300` | color | `oklch(0.809 0.105 125)` | primitive.palette | | `--xh-color-lime-400` | color | `oklch(0.702 0.165 125)` | primitive.palette | | `--xh-color-lime-500` | color | `oklch(0.623 0.206 125)` | primitive.palette | | `--xh-color-lime-600` | color | `oklch(0.546 0.206 125)` | primitive.palette | | `--xh-color-lime-700` | color | `oklch(0.488 0.196 125)` | primitive.palette | | `--xh-color-lime-800` | color | `oklch(0.424 0.164 125)` | primitive.palette | | `--xh-color-lime-900` | color | `oklch(0.379 0.132 125)` | primitive.palette | | `--xh-color-lime-950` | color | `oklch(0.282 0.089 125)` | primitive.palette | | `--xh-color-green-50` | color | `oklch(0.971 0.014 149)` | primitive.palette | | `--xh-color-green-100` | color | `oklch(0.936 0.032 149)` | primitive.palette | | `--xh-color-green-200` | color | `oklch(0.885 0.062 149)` | primitive.palette | | `--xh-color-green-300` | color | `oklch(0.809 0.105 149)` | primitive.palette | | `--xh-color-green-400` | color | `oklch(0.702 0.165 149)` | primitive.palette | | `--xh-color-green-500` | color | `oklch(0.623 0.214 149)` | primitive.palette | | `--xh-color-green-600` | color | `oklch(0.546 0.205 149)` | primitive.palette | | `--xh-color-green-700` | color | `oklch(0.488 0.196 149)` | primitive.palette | | `--xh-color-green-800` | color | `oklch(0.424 0.164 149)` | primitive.palette | | `--xh-color-green-900` | color | `oklch(0.379 0.132 149)` | primitive.palette | | `--xh-color-green-950` | color | `oklch(0.282 0.089 149)` | primitive.palette | | `--xh-color-teal-50` | color | `oklch(0.971 0.014 180)` | primitive.palette | | `--xh-color-teal-100` | color | `oklch(0.936 0.032 180)` | primitive.palette | | `--xh-color-teal-200` | color | `oklch(0.885 0.062 180)` | primitive.palette | | `--xh-color-teal-300` | color | `oklch(0.809 0.105 180)` | primitive.palette | | `--xh-color-teal-400` | color | `oklch(0.702 0.147 180)` | primitive.palette | | `--xh-color-teal-500` | color | `oklch(0.623 0.138 180)` | primitive.palette | | `--xh-color-teal-600` | color | `oklch(0.546 0.131 180)` | primitive.palette | | `--xh-color-teal-700` | color | `oklch(0.488 0.13 180)` | primitive.palette | | `--xh-color-teal-800` | color | `oklch(0.424 0.132 180)` | primitive.palette | | `--xh-color-teal-900` | color | `oklch(0.379 0.132 180)` | primitive.palette | | `--xh-color-teal-950` | color | `oklch(0.282 0.089 180)` | primitive.palette | | `--xh-color-cyan-50` | color | `oklch(0.971 0.014 215)` | primitive.palette | | `--xh-color-cyan-100` | color | `oklch(0.936 0.032 215)` | primitive.palette | | `--xh-color-cyan-200` | color | `oklch(0.885 0.062 215)` | primitive.palette | | `--xh-color-cyan-300` | color | `oklch(0.809 0.105 215)` | primitive.palette | | `--xh-color-cyan-400` | color | `oklch(0.702 0.143 215)` | primitive.palette | | `--xh-color-cyan-500` | color | `oklch(0.623 0.135 215)` | primitive.palette | | `--xh-color-cyan-600` | color | `oklch(0.546 0.129 215)` | primitive.palette | | `--xh-color-cyan-700` | color | `oklch(0.488 0.128 215)` | primitive.palette | | `--xh-color-cyan-800` | color | `oklch(0.424 0.132 215)` | primitive.palette | | `--xh-color-cyan-900` | color | `oklch(0.379 0.132 215)` | primitive.palette | | `--xh-color-cyan-950` | color | `oklch(0.282 0.089 215)` | primitive.palette | | `--xh-color-blue-50` | color | `oklch(0.971 0.014 237)` | primitive.palette | | `--xh-color-blue-100` | color | `oklch(0.936 0.032 237)` | primitive.palette | | `--xh-color-blue-200` | color | `oklch(0.885 0.062 237)` | primitive.palette | | `--xh-color-blue-300` | color | `oklch(0.809 0.105 237)` | primitive.palette | | `--xh-color-blue-400` | color | `oklch(0.702 0.165 237)` | primitive.palette | | `--xh-color-blue-500` | color | `oklch(0.623 0.169 237)` | primitive.palette | | `--xh-color-blue-600` | color | `oklch(0.546 0.163 237)` | primitive.palette | | `--xh-color-blue-700` | color | `oklch(0.488 0.163 237)` | primitive.palette | | `--xh-color-blue-800` | color | `oklch(0.424 0.164 237)` | primitive.palette | | `--xh-color-blue-900` | color | `oklch(0.379 0.132 237)` | primitive.palette | | `--xh-color-blue-950` | color | `oklch(0.282 0.089 237)` | primitive.palette | | `--xh-color-indigo-50` | color | `oklch(0.971 0.014 258)` | primitive.palette | | `--xh-color-indigo-100` | color | `oklch(0.936 0.032 258)` | primitive.palette | | `--xh-color-indigo-200` | color | `oklch(0.885 0.062 258)` | primitive.palette | | `--xh-color-indigo-300` | color | `oklch(0.809 0.105 258)` | primitive.palette | | `--xh-color-indigo-400` | color | `oklch(0.702 0.165 258)` | primitive.palette | | `--xh-color-indigo-500` | color | `oklch(0.623 0.214 258)` | primitive.palette | | `--xh-color-indigo-600` | color | `oklch(0.546 0.216 258)` | primitive.palette | | `--xh-color-indigo-700` | color | `oklch(0.488 0.196 258)` | primitive.palette | | `--xh-color-indigo-800` | color | `oklch(0.424 0.164 258)` | primitive.palette | | `--xh-color-indigo-900` | color | `oklch(0.379 0.132 258)` | primitive.palette | | `--xh-color-indigo-950` | color | `oklch(0.282 0.089 258)` | primitive.palette | | `--xh-color-purple-50` | color | `oklch(0.971 0.014 302)` | primitive.palette | | `--xh-color-purple-100` | color | `oklch(0.936 0.032 302)` | primitive.palette | | `--xh-color-purple-200` | color | `oklch(0.885 0.062 302)` | primitive.palette | | `--xh-color-purple-300` | color | `oklch(0.809 0.105 302)` | primitive.palette | | `--xh-color-purple-400` | color | `oklch(0.702 0.165 302)` | primitive.palette | | `--xh-color-purple-500` | color | `oklch(0.623 0.214 302)` | primitive.palette | | `--xh-color-purple-600` | color | `oklch(0.546 0.216 302)` | primitive.palette | | `--xh-color-purple-700` | color | `oklch(0.488 0.196 302)` | primitive.palette | | `--xh-color-purple-800` | color | `oklch(0.424 0.164 302)` | primitive.palette | | `--xh-color-purple-900` | color | `oklch(0.379 0.132 302)` | primitive.palette | | `--xh-color-purple-950` | color | `oklch(0.282 0.089 302)` | primitive.palette | | `--xh-color-pink-50` | color | `oklch(0.971 0.014 345)` | primitive.palette | | `--xh-color-pink-100` | color | `oklch(0.936 0.032 345)` | primitive.palette | | `--xh-color-pink-200` | color | `oklch(0.885 0.062 345)` | primitive.palette | | `--xh-color-pink-300` | color | `oklch(0.809 0.105 345)` | primitive.palette | | `--xh-color-pink-400` | color | `oklch(0.702 0.165 345)` | primitive.palette | | `--xh-color-pink-500` | color | `oklch(0.623 0.214 345)` | primitive.palette | | `--xh-color-pink-600` | color | `oklch(0.546 0.216 345)` | primitive.palette | | `--xh-color-pink-700` | color | `oklch(0.488 0.196 345)` | primitive.palette | | `--xh-color-pink-800` | color | `oklch(0.424 0.164 345)` | primitive.palette | | `--xh-color-pink-900` | color | `oklch(0.379 0.132 345)` | primitive.palette | | `--xh-color-pink-950` | color | `oklch(0.282 0.089 345)` | primitive.palette | ## space | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-space-0` | dimension | `0px` | — | | `--xh-space-1` | dimension | `4px` | — | | `--xh-space-2` | dimension | `8px` | — | | `--xh-space-3` | dimension | `12px` | — | | `--xh-space-4` | dimension | `16px` | — | | `--xh-space-5` | dimension | `20px` | — | | `--xh-space-6` | dimension | `24px` | — | | `--xh-space-7` | dimension | `28px` | — | | `--xh-space-8` | dimension | `32px` | — | | `--xh-space-0_5` | dimension | `2px` | — | | `--xh-space-1_5` | dimension | `6px` | — | | `--xh-space-2_5` | dimension | `10px` | — | ## radius | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-radius-none` | dimension | `0px` | — | | `--xh-radius-sm` | dimension | `4px` | — | | `--xh-radius-md` | dimension | `8px` | — | | `--xh-radius-lg` | dimension | `12px` | — | | `--xh-radius-xl` | dimension | `16px` | — | | `--xh-radius-full` | dimension | `9999px` | — | ## font | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-font-family-mono` | fontFamily | `ui-monospace, SFMono-Regular, Menlo, Consolas, monospace` | — | | `--xh-font-size-xs` | dimension | `0.75rem` | — | | `--xh-font-size-sm` | dimension | `0.8125rem` | — | | `--xh-font-size-md` | dimension | `0.875rem` | — | | `--xh-font-size-lg` | dimension | `1rem` | — | | `--xh-font-size-xl` | dimension | `1.125rem` | — | | `--xh-font-size-2xl` | dimension | `1.375rem` | — | | `--xh-font-size-3xl` | dimension | `1.75rem` | — | | `--xh-font-weight-regular` | number | `400` | — | | `--xh-font-weight-medium` | number | `500` | — | | `--xh-font-weight-semibold` | number | `600` | — | | `--xh-font-weight-bold` | number | `700` | — | ## leading | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-leading-none` | number | `1` | — | | `--xh-leading-tight` | number | `1.25` | — | | `--xh-leading-normal` | number | `1.5` | — | | `--xh-leading-relaxed` | number | `1.625` | — | ## alpha | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-alpha-opaque` | number | `1` | — | | `--xh-alpha-ultra-high` | number | `0.94` | — | | `--xh-alpha-high` | number | `0.88` | — | | `--xh-alpha-medium` | number | `0.76` | — | | `--xh-alpha-low` | number | `0.48` | — | | `--xh-alpha-ultra-low` | number | `0.16` | — | ## blur | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-blur-none` | dimension | `0px` | — | | `--xh-blur-xs` | dimension | `4px` | — | | `--xh-blur-sm` | dimension | `8px` | — | | `--xh-blur-md` | dimension | `16px` | — | | `--xh-blur-lg` | dimension | `24px` | — | | `--xh-blur-xl` | dimension | `32px` | — | | `--xh-blur-2xl` | dimension | `48px` | — | ## shadow | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-shadow-sm` | shadow | `0 1px 1px -0.5px oklch(0.145 0.005 258 / 0.05), 0 2px 3px -1.5px oklch(0.145 0.005 258 / 0.04), 0 3px 6px -3px oklch(0.145 0.005 258 / 0.03)` | — | | `--xh-shadow-md` | shadow | `0 1px 2px -0.5px oklch(0.145 0.005 258 / 0.06), 0 4px 8px -2px oklch(0.145 0.005 258 / 0.08), 0 10px 20px -6px oklch(0.145 0.005 258 / 0.07)` | — | | `--xh-shadow-lg` | shadow | `0 1px 3px -0.5px oklch(0.145 0.005 258 / 0.08), 0 8px 16px -4px oklch(0.145 0.005 258 / 0.1), 0 20px 40px -12px oklch(0.145 0.005 258 / 0.12)` | — | | `--xh-shadow-xl` | shadow | `0 2px 4px -1px oklch(0.145 0.005 258 / 0.1), 0 12px 24px -6px oklch(0.145 0.005 258 / 0.12), 0 32px 64px -16px oklch(0.145 0.005 258 / 0.16)` | — | ## stroke | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-stroke-thin` | dimension | `1px` | — | | `--xh-stroke-thick` | dimension | `2px` | — | | `--xh-stroke-strong` | dimension | `3px` | — | ## z | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-z-sticky` | number | `100` | — | | `--xh-z-modal` | number | `1100` | — | | `--xh-z-popover` | number | `1200` | — | | `--xh-z-toast` | number | `1300` | — | | `--xh-z-tooltip` | number | `1400` | — | ## breakpoint | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-breakpoint-sm` | dimension | `640px` | — | | `--xh-breakpoint-md` | dimension | `768px` | — | | `--xh-breakpoint-lg` | dimension | `1024px` | — | | `--xh-breakpoint-xl` | dimension | `1280px` | — | ## duration | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-duration-fast` | duration | `120ms` | — | | `--xh-duration-normal` | duration | `200ms` | — | | `--xh-duration-slow` | duration | `320ms` | — | ## ease | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-ease-standard` | cubicBezier | `cubic-bezier(0.2, 0, 0, 1)` | — | | `--xh-ease-in` | cubicBezier | `cubic-bezier(0.4, 0, 1, 1)` | — | | `--xh-ease-out` | cubicBezier | `cubic-bezier(0, 0, 0.2, 1)` | — | | `--xh-ease-out-strong` | cubicBezier | `cubic-bezier(0.23, 1, 0.32, 1)` | — | | `--xh-ease-out-fluid` | cubicBezier | `cubic-bezier(0.32, 0.72, 0, 1)` | — | | `--xh-ease-in-out` | cubicBezier | `cubic-bezier(0.4, 0, 0.2, 1)` | — | | `--xh-ease-out-back` | cubicBezier | `cubic-bezier(0.34, 1.56, 0.64, 1)` | — | | `--xh-ease-sine-in-out` | cubicBezier | `cubic-bezier(0.37, 0, 0.63, 1)` | — | | `--xh-ease-emphasized` | cubicBezier | `cubic-bezier(0.3, 0, 0, 1)` | — | ## control | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-control-h-sm` | dimension | `32px` | compact | | `--xh-control-h-md` | dimension | `36px` | compact | | `--xh-control-h-lg` | dimension | `40px` | compact | | `--xh-control-box-sm` | dimension | `32px` | compact | | `--xh-control-box-md` | dimension | `40px` | compact | | `--xh-control-box-lg` | dimension | `48px` | compact | | `--xh-control-w` | dimension | `16rem` | — | | `--xh-control-min-w` | dimension | `12rem` | — | | `--xh-control-px-sm` | dimension | `var(--xh-space-2)` | compact | | `--xh-control-px-md` | dimension | `var(--xh-space-3)` | compact | | `--xh-control-px-lg` | dimension | `var(--xh-space-4)` | compact | | `--xh-control-gap-sm` | dimension | `var(--xh-space-1)` | — | | `--xh-control-gap-md` | dimension | `var(--xh-space-2)` | compact | | `--xh-control-gap-lg` | dimension | `var(--xh-space-3)` | compact | | `--xh-control-font-sm` | dimension | `var(--xh-font-size-sm)` | — | | `--xh-control-font-md` | dimension | `var(--xh-font-size-md)` | — | | `--xh-control-font-lg` | dimension | `var(--xh-font-size-lg)` | — | | `--xh-control-separator-opacity` | number | `0.16` | — | | `--xh-control-separator-disabled-opacity` | number | `0.36` | — | | `--xh-control-caption-sm` | dimension | `var(--xh-font-size-xs)` | — | | `--xh-control-caption-md` | dimension | `var(--xh-font-size-sm)` | — | | `--xh-control-caption-lg` | dimension | `var(--xh-font-size-md)` | — | | `--xh-control-action-size` | dimension | `24px` | compact | | `--xh-control-indicator-size` | dimension | `var(--xh-control-indicator-md)` | compact | | `--xh-control-indicator-sm` | dimension | `12px` | compact | | `--xh-control-indicator-md` | dimension | `16px` | compact | | `--xh-control-indicator-lg` | dimension | `20px` | compact | ## scrollbar | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-scrollbar-thickness-sm` | dimension | `4px` | — | | `--xh-scrollbar-thickness-md` | dimension | `6px` | — | | `--xh-scrollbar-thickness-lg` | dimension | `8px` | — | | `--xh-scrollbar-gutter` | dimension | `1px` | — | ## glyph | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-glyph-size-text` | dimension | `1em` | — | | `--xh-glyph-size-sm` | dimension | `16px` | — | | `--xh-glyph-size-md` | dimension | `20px` | — | | `--xh-glyph-size-lg` | dimension | `24px` | — | | `--xh-glyph-size-xl` | dimension | `32px` | — | | `--xh-glyph-size-2xl` | dimension | `40px` | — | | `--xh-glyph-size-3xl` | dimension | `56px` | — | | `--xh-glyph-size-4xl` | dimension | `72px` | — | | `--xh-glyph-stroke-light` | dimension | `1.5px` | — | | `--xh-glyph-stroke-regular` | dimension | `2px` | — | | `--xh-glyph-stroke-bold` | dimension | `2.5px` | — | | `--xh-glyph-baseline-shift` | dimension | `-0.125em` | — | | `--xh-glyph-mark-check` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5L9.5 18L20 6'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-edit` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18.5 2.5L21.5 5.5L8 19L3.5 20.5L5 16Z'/%3E%3Cpath d='M16.4 4.6L19.4 7.6'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-minus` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12H19'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-plus` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5V19'/%3E%3Cpath d='M5 12H19'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-close` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6L18 18'/%3E%3Cpath d='M18 6L6 18'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-download` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4'/%3E%3Cpath d='M7 10L12 15L17 10'/%3E%3Cpath d='M12 3V15'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-chevron-down` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9L12 15L18 9'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-chevron-up` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15L12 9L18 15'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-chevron-left` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 6L9 12L15 18'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-chevron-right` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 6L15 12L9 18'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-chevrons-left` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 6L12 12L18 18'/%3E%3Cpath d='M12 6L6 12L12 18'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-chevrons-right` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 6L12 12L6 18'/%3E%3Cpath d='M12 6L18 12L12 18'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-arrow-up` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V4'/%3E%3Cpath d='M6 10L12 4L18 10'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-arrow-down` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4V20'/%3E%3Cpath d='M6 14L12 20L18 14'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-sort` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 20V4'/%3E%3Cpath d='M4 8L8 4L12 8'/%3E%3Cpath d='M16 4V20'/%3E%3Cpath d='M12 16L16 20L20 16'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-sort-asc` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 20V4'/%3E%3Cpath d='M6 10L12 4L18 10'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-sort-desc` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4V20'/%3E%3Cpath d='M6 14L12 20L18 14'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-info` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11V16.5'/%3E%3Cpath d='M12 7.5h.01'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-warning` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 4L21 20H3Z'/%3E%3Cpath d='M12 10V14'/%3E%3Cpath d='M12 17.5h.01'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-star` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5L14.12 9.59L20.56 9.72L15.42 13.61L17.29 19.78L12 16.1L6.71 19.78L8.58 13.61L3.44 9.72L9.88 9.59Z'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-eye` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5S21.5 12 21.5 12S18 18.5 12 18.5S2.5 12 2.5 12Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-eye-off` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.9 5.7A9.6 9.6 0 0 1 12 5.5c6 0 9.5 6.5 9.5 6.5a17 17 0 0 1-2.9 3.8'/%3E%3Cpath d='M6.4 7.7A17 17 0 0 0 2.5 12S6 18.5 12 18.5a9.4 9.4 0 0 0 3.9-.8'/%3E%3Cpath d='M9.9 9.9a3 3 0 0 0 4.2 4.2'/%3E%3Cpath d='M3.5 3.5L20.5 20.5'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-zoom-in` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20.5 20.5'/%3E%3Cpath d='M7.5 10.5h6'/%3E%3Cpath d='M10.5 7.5v6'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-zoom-out` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.5'/%3E%3Cpath d='M15.5 15.5L20.5 20.5'/%3E%3Cpath d='M7.5 10.5h6'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-rotate-left` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 12a8.5 8.5 0 1 0 2.5-6'/%3E%3Cpath d='M3.5 4v5.5H9'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-rotate-right` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20.5 12a8.5 8.5 0 1 1-2.5-6'/%3E%3Cpath d='M20.5 4v5.5H15'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-flip-horizontal` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5H6a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h3'/%3E%3Cpath d='M15 5h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3'/%3E%3Cpath d='M12 3v18'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-flip-vertical` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9V6a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v3'/%3E%3Cpath d='M5 15v3a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-3'/%3E%3Cpath d='M3 12h18'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-maximize` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4H4v5'/%3E%3Cpath d='M15 4h5v5'/%3E%3Cpath d='M20 15v5h-5'/%3E%3Cpath d='M4 15v5h5'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-restore` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9h5V4'/%3E%3Cpath d='M20 9h-5V4'/%3E%3Cpath d='M20 15h-5v5'/%3E%3Cpath d='M4 15h5v5'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-play` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 4.5L19.5 12L8 19.5Z'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-pause` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 4.5V19.5'/%3E%3Cpath d='M15 4.5V19.5'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-calendar` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18'/%3E%3Cpath d='M8 3v4'/%3E%3Cpath d='M16 3v4'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-clock` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 7v5.5l3.5 2'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-ellipsis` | icon | `url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='5' cy='12' r='1'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3Ccircle cx='19' cy='12' r='1'/%3E%3C/svg%3E")` | — | | `--xh-glyph-mark-required` | string | `'*'` | — | ## field | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-field-py` | dimension | `var(--xh-space-2)` | compact | ## action | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-action-brand-solid` | color | `var(--xh-color-brand-600)` | — | | `--xh-action-brand-solid-hover` | color | `var(--xh-color-brand-700)` | — | | `--xh-action-brand-solid-active` | color | `var(--xh-color-brand-800)` | — | | `--xh-action-on-brand-solid` | color | `var(--xh-color-neutral-0)` | — | ## list | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-list-item-py-sm` | dimension | `var(--xh-space-2)` | compact | | `--xh-list-item-py-md` | dimension | `var(--xh-space-3)` | compact | | `--xh-list-item-py-lg` | dimension | `var(--xh-space-4)` | compact | | `--xh-list-item-px-sm` | dimension | `var(--xh-space-3)` | compact | | `--xh-list-item-px-md` | dimension | `var(--xh-space-4)` | compact | | `--xh-list-item-px-lg` | dimension | `var(--xh-space-5)` | compact | | `--xh-list-option-py-sm` | dimension | `var(--xh-space-1)` | compact | | `--xh-list-option-py-md` | dimension | `var(--xh-space-1_5)` | compact | | `--xh-list-option-py-lg` | dimension | `var(--xh-space-2)` | compact | | `--xh-list-option-gap` | dimension | `var(--xh-space-0_5)` | — | ## table | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-table-cell-py-sm` | dimension | `var(--xh-space-1)` | compact | | `--xh-table-cell-py-md` | dimension | `var(--xh-space-2)` | compact | | `--xh-table-cell-py-lg` | dimension | `var(--xh-space-3)` | compact | ## shape | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-shape-inset` | dimension | `var(--xh-radius-sm)` | — | | `--xh-shape-control` | dimension | `var(--xh-radius-sm)` | — | | `--xh-shape-surface` | dimension | `var(--xh-radius-md)` | — | | `--xh-shape-overlay` | dimension | `var(--xh-radius-lg)` | — | | `--xh-shape-circle` | dimension | `50%` | — | | `--xh-shape-pill` | dimension | `var(--xh-radius-full)` | — | ## ring | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-ring-width` | dimension | `var(--xh-stroke-thick)` | — | | `--xh-ring-offset` | dimension | `calc(-1 * var(--xh-ring-width))` | — | | `--xh-ring-focus` | color | `var(--xh-color-brand-600)` | dark | | `--xh-ring-invalid` | color | `var(--xh-color-danger-500)` | dark | ## state | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-state-disabled-opacity` | number | `0.5` | — | | `--xh-state-dragging-opacity` | number | `0.6` | — | ## elevation | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-elevation-raised` | shadow | `var(--xh-shadow-sm)` | dark / print | | `--xh-elevation-lifted` | shadow | `0 1px 2px -0.5px oklch(0.145 0.005 258 / 0.06), 0 3px 6px -2px oklch(0.145 0.005 258 / 0.06), 0 6px 12px -5px oklch(0.145 0.005 258 / 0.05)` | dark / print | | `--xh-elevation-floating` | shadow | `var(--xh-shadow-md)` | dark / print | | `--xh-elevation-sheet` | shadow | `var(--xh-shadow-lg)` | dark / print | ## motion | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-motion-duration-enter` | duration | `var(--xh-duration-normal)` | reduce | | `--xh-motion-duration-exit` | duration | `var(--xh-duration-fast)` | — | | `--xh-motion-duration-micro` | duration | `var(--xh-duration-fast)` | — | | `--xh-motion-duration-move` | duration | `var(--xh-duration-normal)` | reduce | | `--xh-motion-duration-expand` | duration | `var(--xh-duration-normal)` | reduce | | `--xh-motion-duration-collapse` | duration | `var(--xh-duration-fast)` | reduce | | `--xh-motion-duration-slide` | duration | `var(--xh-duration-slow)` | reduce | | `--xh-motion-duration-nudge` | duration | `var(--xh-duration-fast)` | reduce | | `--xh-motion-duration-press` | duration | `var(--xh-duration-fast)` | reduce | | `--xh-motion-duration-release` | duration | `var(--xh-duration-normal)` | reduce | | `--xh-motion-duration-attention` | duration | `calc(var(--xh-duration-slow) * 2)` | reduce | | `--xh-motion-duration-glint` | duration | `calc(var(--xh-duration-slow) * 2)` | reduce | | `--xh-motion-duration-reveal` | duration | `calc(var(--xh-duration-slow) * 2)` | reduce | | `--xh-motion-duration-morph` | duration | `calc(var(--xh-duration-normal) * 2)` | reduce | | `--xh-motion-stagger-step` | duration | `calc(var(--xh-duration-normal) / 5)` | reduce | | `--xh-motion-ease-continuous` | cubicBezier | `var(--xh-ease-standard)` | — | | `--xh-motion-ease-loop` | cubicBezier | `linear` | — | | `--xh-motion-ease-enter` | cubicBezier | `var(--xh-ease-out)` | — | | `--xh-motion-ease-enter-strong` | cubicBezier | `var(--xh-ease-out-strong)` | — | | `--xh-motion-ease-exit` | cubicBezier | `var(--xh-ease-in)` | — | | `--xh-motion-ease-slide` | cubicBezier | `var(--xh-ease-out-fluid)` | — | | `--xh-motion-ease-sweep` | cubicBezier | `var(--xh-ease-in-out)` | — | | `--xh-motion-ease-press` | cubicBezier | `var(--xh-ease-standard)` | — | | `--xh-motion-ease-release` | cubicBezier | `var(--xh-ease-out-strong)` | — | | `--xh-motion-ease-breathe` | cubicBezier | `var(--xh-ease-sine-in-out)` | — | | `--xh-motion-loop-spin` | duration | `640ms` | — | | `--xh-motion-loop-caret` | duration | `1000ms` | — | | `--xh-motion-loop-shimmer` | duration | `1600ms` | — | | `--xh-motion-loop-breathe` | duration | `3600ms` | — | | `--xh-motion-scale-breathe` | number | `0.82` | reduce | | `--xh-motion-scale-halo` | number | `2.6` | reduce | | `--xh-motion-ease-settle` | cubicBezier | `var(--xh-ease-out-back)` | — | | `--xh-motion-ease-emphasis` | cubicBezier | `var(--xh-ease-emphasized)` | — | | `--xh-motion-distance-sm` | dimension | `var(--xh-space-1)` | reduce | | `--xh-motion-distance-md` | dimension | `var(--xh-space-2)` | reduce | | `--xh-motion-distance-lg` | dimension | `var(--xh-space-4)` | reduce | | `--xh-motion-travel` | dimension | `100%` | reduce | | `--xh-motion-travel-opacity` | number | `1` | reduce | | `--xh-motion-scale-enter` | number | `0.96` | reduce | | `--xh-motion-scale-exit` | number | `0.98` | reduce | | `--xh-motion-scale-stack` | number | `0.95` | reduce | | `--xh-motion-scale-press` | number | `0.97` | reduce | | `--xh-motion-scale-drag` | number | `1.12` | reduce | | `--xh-motion-scale-squash` | number | `0.86` | reduce | | `--xh-motion-spring-snappy-stiffness` | number | `380` | — | | `--xh-motion-spring-snappy-damping` | number | `30` | — | | `--xh-motion-spring-smooth-stiffness` | number | `300` | — | | `--xh-motion-spring-smooth-damping` | number | `30` | — | | `--xh-motion-spring-gentle-stiffness` | number | `170` | — | | `--xh-motion-spring-gentle-damping` | number | `26` | — | | `--xh-motion-spring-bouncy-stiffness` | number | `400` | — | | `--xh-motion-spring-bouncy-damping` | number | `18` | — | | `--xh-motion-spring-stiff-stiffness` | number | `600` | — | | `--xh-motion-spring-stiff-damping` | number | `42` | — | | `--xh-motion-spring-toggle-stiffness` | number | `420` | — | | `--xh-motion-spring-toggle-damping` | number | `26` | — | | `--xh-motion-spring-lead-stiffness` | number | `520` | — | | `--xh-motion-spring-lead-damping` | number | `34` | — | | `--xh-motion-spring-trail-stiffness` | number | `210` | — | | `--xh-motion-spring-trail-damping` | number | `24` | — | | `--xh-motion-spring-merge-stiffness` | number | `320` | — | | `--xh-motion-spring-merge-damping` | number | `24` | — | ## layer | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-layer-sticky` | number | `var(--xh-z-sticky)` | — | | `--xh-layer-drawer` | number | `var(--xh-z-modal)` | — | | `--xh-layer-modal` | number | `var(--xh-z-modal)` | — | | `--xh-layer-popover` | number | `var(--xh-z-popover)` | — | | `--xh-layer-toast` | number | `var(--xh-z-toast)` | — | | `--xh-layer-tooltip` | number | `var(--xh-z-tooltip)` | — | ## section | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-section-py` | dimension | `var(--xh-section-py-md)` | — | | `--xh-section-py-sm` | dimension | `var(--xh-space-4)` | compact | | `--xh-section-py-md` | dimension | `var(--xh-space-5)` | compact | | `--xh-section-py-lg` | dimension | `var(--xh-space-8)` | compact | ## stack | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-stack-gap-sm` | dimension | `var(--xh-space-2)` | compact | | `--xh-stack-gap-md` | dimension | `var(--xh-space-4)` | compact | | `--xh-stack-gap-lg` | dimension | `var(--xh-space-6)` | compact | ## layout | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-layout-gap-xs` | dimension | `var(--xh-space-1)` | — | | `--xh-layout-gap-sm` | dimension | `var(--xh-space-2)` | compact | | `--xh-layout-gap-md` | dimension | `var(--xh-space-3)` | compact | | `--xh-layout-gap-lg` | dimension | `var(--xh-space-4)` | compact | | `--xh-layout-gap-xl` | dimension | `var(--xh-space-6)` | compact | | `--xh-layout-col-min-xs` | dimension | `10rem` | — | | `--xh-layout-col-min-sm` | dimension | `14rem` | — | | `--xh-layout-col-min-md` | dimension | `18rem` | — | | `--xh-layout-col-min-lg` | dimension | `22rem` | — | ## track | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-track-thickness` | dimension | `6px` | — | | `--xh-track-thumb-size` | dimension | `18px` | — | ## nav | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-nav-link-max-w` | dimension | `12rem` | — | ## sider | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-sider-w` | dimension | `15rem` | — | | `--xh-sider-collapsed-w` | dimension | `4rem` | — | ## viewport | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-viewport-max-h` | dimension | `24rem` | compact | | `--xh-viewport-h-sm` | dimension | `12rem` | compact | | `--xh-viewport-h-md` | dimension | `16rem` | compact | | `--xh-viewport-h-lg` | dimension | `24rem` | compact | ## overlay | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-overlay-arrow-size` | dimension | `var(--xh-space-2)` | — | | `--xh-overlay-min-w` | dimension | `12rem` | — | | `--xh-overlay-menu-min-w` | dimension | `10rem` | — | | `--xh-overlay-column-min-w` | dimension | `3.5rem` | — | | `--xh-overlay-column-item-h` | dimension | `calc(var(--xh-control-h-sm) - var(--xh-space-1))` | — | | `--xh-overlay-menu-max-h` | dimension | `20rem` | compact | | `--xh-overlay-max-w-sm` | dimension | `16rem` | — | | `--xh-overlay-max-w` | dimension | `20rem` | — | | `--xh-overlay-max-w-lg` | dimension | `24rem` | — | | `--xh-overlay-max-w-xl` | dimension | `48rem` | — | | `--xh-overlay-max-h` | dimension | `16rem` | compact | | `--xh-overlay-sheet-w-sm` | dimension | `24rem` | — | | `--xh-overlay-sheet-w-md` | dimension | `32rem` | — | | `--xh-overlay-sheet-w-lg` | dimension | `48rem` | — | | `--xh-overlay-drawer-w-sm` | dimension | `16rem` | — | | `--xh-overlay-drawer-w-md` | dimension | `20rem` | — | | `--xh-overlay-drawer-w-lg` | dimension | `28rem` | — | | `--xh-overlay-backdrop-blur` | dimension | `12px` | — | ## text | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-text-label-size` | dimension | `var(--xh-font-size-md)` | — | | `--xh-text-label-weight` | number | `var(--xh-font-weight-medium)` | — | | `--xh-text-body-size` | dimension | `var(--xh-font-size-md)` | — | | `--xh-text-body-leading` | number | `var(--xh-leading-normal)` | — | | `--xh-text-prose-leading` | number | `var(--xh-leading-relaxed)` | — | | `--xh-text-body-weight` | number | `var(--xh-font-weight-regular)` | — | | `--xh-text-code-leading` | dimension | `1.5rem` | — | | `--xh-text-secondary-size` | dimension | `var(--xh-font-size-sm)` | — | | `--xh-text-heading-3-size` | dimension | `var(--xh-font-size-xl)` | — | | `--xh-text-heading-3-weight` | number | `var(--xh-font-weight-semibold)` | — | | `--xh-text-heading-1-size` | dimension | `var(--xh-font-size-3xl)` | — | | `--xh-text-heading-1-weight` | number | `var(--xh-font-weight-semibold)` | — | | `--xh-text-heading-2-size` | dimension | `var(--xh-font-size-2xl)` | — | | `--xh-text-heading-2-weight` | number | `var(--xh-font-weight-semibold)` | — | | `--xh-text-caption-size` | dimension | `var(--xh-font-size-xs)` | — | ## switch | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-switch-track-h-sm` | dimension | `18px` | compact | | `--xh-switch-track-h-md` | dimension | `22px` | compact | | `--xh-switch-track-h-lg` | dimension | `28px` | compact | ## measure | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-measure-prose` | dimension | `32rem` | — | ## surface | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-surface-py-sm` | dimension | `var(--xh-space-3)` | compact | | `--xh-surface-px-sm` | dimension | `var(--xh-space-4)` | compact | | `--xh-surface-py-md` | dimension | `var(--xh-space-5)` | compact | | `--xh-surface-px-md` | dimension | `var(--xh-space-4)` | compact | | `--xh-surface-pad-xs` | dimension | `var(--xh-space-1)` | — | | `--xh-surface-pad-sm` | dimension | `var(--xh-space-2)` | compact | | `--xh-surface-pad-md` | dimension | `var(--xh-space-3)` | compact | | `--xh-surface-pad-lg` | dimension | `var(--xh-space-4)` | compact | | `--xh-surface-action-inset` | dimension | `var(--xh-space-3)` | — | ## chart | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-chart-height` | dimension | `20rem` | — | | `--xh-chart-bar-max` | dimension | `var(--xh-space-6)` | — | | `--xh-chart-gap` | dimension | `var(--xh-stroke-thick)` | — | | `--xh-chart-line-width` | dimension | `var(--xh-stroke-thick)` | — | | `--xh-chart-point-size` | dimension | `var(--xh-space-2)` | — | | `--xh-chart-node-width` | dimension | `var(--xh-space-3)` | — | | `--xh-chart-hit-min` | dimension | `var(--xh-space-6)` | — | | `--xh-chart-tick-length` | dimension | `var(--xh-space-1)` | — | | `--xh-chart-label-gap` | dimension | `var(--xh-space-1)` | compact | | `--xh-chart-area-alpha` | number | `0.1` | — | | `--xh-chart-link-alpha` | number | `0.35` | — | | `--xh-chart-dim-alpha` | number | `0.3` | — | | `--xh-chart-pending-alpha` | number | `0.6` | — | | `--xh-chart-categorical-other` | color | `var(--xh-color-neutral-500)` | dark | | `--xh-chart-deemphasis` | color | `var(--xh-color-neutral-300)` | dark | | `--xh-chart-sequential-start` | color | `var(--xh-color-indigo-100)` | dark | | `--xh-chart-sequential-mid` | color | `var(--xh-color-indigo-400)` | dark | | `--xh-chart-sequential-end` | color | `var(--xh-color-indigo-800)` | dark | | `--xh-chart-ordinal-1` | color | `var(--xh-color-indigo-900)` | dark | | `--xh-chart-ordinal-2` | color | `var(--xh-color-indigo-800)` | dark | | `--xh-chart-ordinal-3` | color | `var(--xh-color-indigo-700)` | dark | | `--xh-chart-ordinal-4` | color | `var(--xh-color-indigo-600)` | dark | | `--xh-chart-ordinal-5` | color | `var(--xh-color-indigo-500)` | dark | | `--xh-chart-ordinal-6` | color | `var(--xh-color-indigo-400)` | dark | | `--xh-chart-diverging-negative` | color | `var(--xh-color-amber-600)` | dark | | `--xh-chart-diverging-center` | color | `var(--xh-color-neutral-100)` | dark | | `--xh-chart-diverging-positive` | color | `var(--xh-color-blue-600)` | dark | | `--xh-chart-rise` | color | `var(--xh-color-success-600)` | dark | | `--xh-chart-fall` | color | `var(--xh-color-danger-700)` | dark | | `--xh-chart-surface` | color | `var(--xh-bg-surface)` | dark | | `--xh-chart-grid` | color | `var(--xh-border-subtle)` | dark / dark.more / light.more | | `--xh-chart-axis` | color | `var(--xh-border-default)` | dark / dark.more / light.more | | `--xh-chart-label` | color | `var(--xh-fg-muted)` | dark | | `--xh-chart-crosshair` | color | `var(--xh-fg-subtle)` | dark | | `--xh-chart-band-highlight` | color | `var(--xh-bg-subtle)` | dark | | `--xh-chart-categorical-1` | | `var(--xh-color-indigo-500)` | — | | `--xh-chart-categorical-2` | | `var(--xh-color-lime-500)` | — | | `--xh-chart-categorical-3` | | `var(--xh-color-pink-600)` | — | | `--xh-chart-categorical-4` | | `var(--xh-color-amber-500)` | — | | `--xh-chart-categorical-5` | | `var(--xh-color-blue-700)` | — | | `--xh-chart-categorical-6` | | `var(--xh-color-green-700)` | — | | `--xh-chart-categorical-7` | | `var(--xh-color-purple-500)` | — | | `--xh-chart-categorical-8` | | `var(--xh-color-teal-500)` | — | | `--xh-chart-on-categorical-1` | | `var(--xh-color-neutral-950)` | — | | `--xh-chart-on-categorical-2` | | `var(--xh-color-neutral-950)` | — | | `--xh-chart-on-categorical-3` | | `var(--xh-color-neutral-0)` | — | | `--xh-chart-on-categorical-4` | | `var(--xh-color-neutral-950)` | — | | `--xh-chart-on-categorical-5` | | `var(--xh-color-neutral-0)` | — | | `--xh-chart-on-categorical-6` | | `var(--xh-color-neutral-0)` | — | | `--xh-chart-on-categorical-7` | | `var(--xh-color-neutral-950)` | — | | `--xh-chart-on-categorical-8` | | `var(--xh-color-neutral-950)` | — | ## material | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-material-solid-bg` | | `var(--xh-bg-surface)` | — | | `--xh-material-solid-backdrop` | | `none` | — | | `--xh-material-solid-border` | | `var(--xh-border-default)` | — | | `--xh-material-solid-highlight` | | `oklch(0 0 0 / 0)` | — | | `--xh-material-solid-shadow` | | `none` | — | | `--xh-material-solid-separator` | | `var(--xh-border-subtle)` | — | | `--xh-material-solid-fg` | | `var(--xh-fg-default)` | — | | `--xh-material-solid-fg-muted` | | `var(--xh-fg-muted)` | — | | `--xh-material-solid-focus-surface` | | `var(--xh-bg-surface)` | — | | `--xh-material-elevated-bg` | | `oklch(0.99 0.003 258)` | — | | `--xh-material-elevated-backdrop` | | `none` | — | | `--xh-material-elevated-border` | | `oklch(0.145 0.005 258 / 0.28)` | — | | `--xh-material-elevated-highlight` | | `oklch(0 0 0 / 0)` | — | | `--xh-material-elevated-shadow` | | `0 2px 4px -2px oklch(0.145 0.005 258 / 0.12), 0 12px 28px -12px oklch(0.145 0.005 258 / 0.16), 0 32px 64px -20px oklch(0.145 0.005 258 / 0.18)` | — | | `--xh-material-elevated-separator` | | `oklch(0.145 0.005 258 / 0.2)` | — | | `--xh-material-elevated-fg` | | `var(--xh-fg-default)` | — | | `--xh-material-elevated-fg-muted` | | `var(--xh-color-neutral-700)` | — | | `--xh-material-elevated-focus-surface` | | `var(--xh-bg-surface)` | — | | `--xh-material-soft-bg` | | `oklch(0.995 0.001 258)` | — | | `--xh-material-soft-backdrop` | | `none` | — | | `--xh-material-soft-border` | | `var(--xh-border-subtle)` | — | | `--xh-material-soft-highlight` | | `oklch(1 0 0 / 0.72)` | — | | `--xh-material-soft-shadow` | | `0 1px 1px -0.5px oklch(0.145 0.005 258 / 0.04), 0 4px 10px -6px oklch(0.145 0.005 258 / 0.05)` | — | | `--xh-material-soft-separator` | | `var(--xh-border-subtle)` | — | | `--xh-material-soft-fg` | | `var(--xh-fg-default)` | — | | `--xh-material-soft-fg-muted` | | `var(--xh-fg-muted)` | — | | `--xh-material-soft-focus-surface` | | `var(--xh-material-soft-bg)` | — | | `--xh-material-frosted-compact-alpha` | | `var(--xh-alpha-ultra-high)` | — | | `--xh-material-frosted-compact-backdrop` | | `blur(var(--xh-blur-sm)) saturate(104%)` | — | | `--xh-material-frosted-compact-shadow` | | `0 1px 2px -1px oklch(0.145 0.005 258 / 0.08), 0 6px 16px -8px oklch(0.145 0.005 258 / 0.12)` | — | | `--xh-material-frosted-bg` | | `oklch(0.99 0.003 258 / var(--xh-alpha-high))` | — | | `--xh-material-frosted-backdrop` | | `blur(var(--xh-blur-md)) saturate(108%)` | — | | `--xh-material-frosted-border` | | `oklch(0.145 0.005 258 / 0.14)` | — | | `--xh-material-frosted-highlight` | | `oklch(1 0 0 / 0.52)` | — | | `--xh-material-frosted-shadow` | | `0 2px 4px -2px oklch(0.145 0.005 258 / 0.1), 0 12px 28px -12px oklch(0.145 0.005 258 / 0.16)` | — | | `--xh-material-frosted-separator` | | `oklch(0.145 0.005 258 / 0.12)` | — | | `--xh-material-frosted-fg` | | `var(--xh-fg-default)` | — | | `--xh-material-frosted-fg-muted` | | `var(--xh-fg-muted)` | — | | `--xh-material-frosted-focus-surface` | | `var(--xh-bg-surface)` | — | | `--xh-material-liquid-bg` | | `oklch(1 0 0 / var(--xh-alpha-low))` | — | | `--xh-material-liquid-backdrop` | | `blur(var(--xh-blur-sm)) saturate(140%)` | — | | `--xh-material-liquid-border` | | `oklch(0 0 0 / 0.12)` | — | | `--xh-material-liquid-highlight` | | `oklch(1 0 0 / 0.9)` | — | | `--xh-material-liquid-shadow` | | `0 1px 3px oklch(0.145 0.005 258 / 0.1), 0 10px 28px -10px oklch(0.145 0.005 258 / 0.32)` | — | | `--xh-material-liquid-separator` | | `oklch(0 0 0 / 0.1)` | — | | `--xh-material-liquid-fg` | | `var(--xh-fg-default)` | — | | `--xh-material-liquid-fg-muted` | | `var(--xh-fg-muted)` | — | | `--xh-material-liquid-focus-surface` | | `var(--xh-bg-surface)` | — | | `--xh-material-liquid-tint` | | `oklch(1 0 0)` | — | | `--xh-material-liquid-alpha-clear` | | `0.24` | — | | `--xh-material-liquid-alpha-floor` | | `0.48` | — | | `--xh-material-liquid-rim-far` | | `oklch(1 0 0 / 0.36)` | — | | `--xh-material-liquid-bezel` | | `18px` | — | ## bg | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-bg-page` | color | `var(--xh-color-neutral-50)` | dark | | `--xh-bg-canvas` | color | `var(--xh-color-neutral-0)` | dark | | `--xh-bg-surface` | color | `var(--xh-color-neutral-0)` | dark | | `--xh-bg-surface-raised` | color | `var(--xh-color-neutral-0)` | dark | | `--xh-bg-subtle` | color | `color-mix(in oklab, var(--xh-ink) 4.3%, transparent)` | dark | | `--xh-bg-subtle-hover` | color | `color-mix(in oklab, var(--xh-ink) 10.2%, transparent)` | dark | | `--xh-bg-subtle-active` | color | `color-mix(in oklab, var(--xh-ink) 16.9%, transparent)` | dark | | `--xh-bg-muted` | color | `color-mix(in oklab, var(--xh-ink) 4.3%, transparent)` | dark | | `--xh-bg-brand` | color | `var(--xh-color-brand-600)` | dark | | `--xh-bg-brand-hover` | color | `var(--xh-color-brand-700)` | dark | | `--xh-bg-brand-active` | color | `var(--xh-color-brand-800)` | dark | | `--xh-bg-brand-subtle` | color | `color-mix(in oklab, var(--xh-bg-brand) 12%, var(--xh-bg-surface))` | dark | | `--xh-bg-brand-subtle-hover` | color | `color-mix(in oklab, var(--xh-bg-brand) 20%, var(--xh-bg-surface))` | dark | | `--xh-bg-brand-subtle-active` | color | `color-mix(in oklab, var(--xh-bg-brand) 28%, var(--xh-bg-surface))` | dark | | `--xh-bg-overlay` | color | `oklch(0 0 0 / 0.45)` | dark | | `--xh-bg-scrollbar-track` | color | `oklch(0 0 0 / 0)` | dark | | `--xh-bg-subtle-opaque` | | `color-mix(in srgb, var(--xh-ink) 4.3%, var(--xh-bg-surface))` | — | | `--xh-bg-subtle-hover-opaque` | | `color-mix(in srgb, var(--xh-ink) 10.2%, var(--xh-bg-surface))` | — | | `--xh-bg-subtle-active-opaque` | | `color-mix(in srgb, var(--xh-ink) 16.9%, var(--xh-bg-surface))` | — | | `--xh-bg-muted-opaque` | | `color-mix(in srgb, var(--xh-ink) 4.3%, var(--xh-bg-surface))` | — | ## fg | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-fg-default` | color | `var(--xh-color-neutral-950)` | dark | | `--xh-fg-muted` | color | `var(--xh-color-neutral-600)` | dark | | `--xh-fg-subtle` | color | `var(--xh-color-neutral-550)` | dark | | `--xh-fg-disabled` | color | `var(--xh-color-neutral-400)` | dark | | `--xh-fg-on-brand` | color | `var(--xh-color-neutral-0)` | dark | | `--xh-fg-on-brand-subtle` | color | `color-mix(in oklab, var(--xh-bg-brand) 60%, var(--xh-fg-default))` | dark | | `--xh-fg-brand` | color | `var(--xh-color-brand-600)` | dark | | `--xh-fg-brand-strong` | color | `var(--xh-color-brand-700)` | dark | | `--xh-fg-success` | color | `var(--xh-color-success-700)` | dark | | `--xh-fg-warning` | color | `var(--xh-color-warning-700)` | dark | | `--xh-fg-info` | color | `var(--xh-color-info-700)` | dark | | `--xh-fg-danger` | color | `var(--xh-color-danger-600)` | dark | | `--xh-fg-danger-hover` | color | `var(--xh-color-danger-700)` | dark | | `--xh-fg-scrollbar-thumb` | color | `color-mix(in oklab, var(--xh-fg-default) 15%, transparent)` | dark | | `--xh-fg-scrollbar-thumb-hover` | color | `color-mix(in oklab, var(--xh-fg-default) 25%, transparent)` | dark | | `--xh-fg-scrollbar-thumb-active` | color | `color-mix(in oklab, var(--xh-fg-default) 35%, transparent)` | dark | ## border | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-border-default` | color | `color-mix(in oklab, var(--xh-ink) 10.2%, transparent)` | dark / dark.more / light.more | | `--xh-border-subtle` | color | `color-mix(in oklab, var(--xh-ink) 4.3%, transparent)` | dark / dark.more / light.more | | `--xh-border-strong` | color | `color-mix(in oklab, var(--xh-ink) 16.9%, transparent)` | dark / dark.more / light.more | | `--xh-border-control` | color | `var(--xh-border-default)` | dark / dark.more / light.more | | `--xh-border-control-hover` | color | `color-mix(in oklab, var(--xh-ink) 37%, transparent)` | dark / dark.more / light.more | | `--xh-border-control-focus` | color | `var(--xh-ring-focus)` | dark | | `--xh-border-invalid` | color | `var(--xh-color-danger-600)` | dark / dark.more / light.more | | `--xh-border-at-limit` | color | `var(--xh-color-warning-600)` | dark / dark.more / light.more | | `--xh-border-default-opaque` | | `color-mix(in srgb, var(--xh-ink) 10.2%, var(--xh-bg-surface))` | — | ## gradient | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-gradient-brand-from` | color | `var(--xh-color-brand-500)` | dark | | `--xh-gradient-brand-to` | color | `var(--xh-color-brand-700)` | dark | ## diff | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-diff-added-bg` | color | `oklch(0.94 0.05 150)` | dark | | `--xh-diff-added-fg` | color | `oklch(0.44 0.13 150)` | dark | | `--xh-diff-removed-bg` | color | `oklch(0.94 0.05 25)` | dark | | `--xh-diff-removed-fg` | color | `oklch(0.47 0.16 25)` | dark | ## syntax | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-syntax-string` | color | `oklch(0.52 0.13 165)` | dark | | `--xh-syntax-number` | color | `oklch(0.5 0.13 70)` | dark | | `--xh-syntax-keyword` | color | `oklch(0.5 0.2 300)` | dark | ## ink | 令牌 | 类型 | 缺省值 | 改写档 | | --- | --- | --- | --- | | `--xh-ink` | | `oklch(0 0 0)` | — | ## 语气轴对外的一族 这一族不走令牌管线,声明在皮肤包的语气层上,**只在写了 `data-tone` 的节点及其后代里有取值**——`data-tone` 是它们的开关,不是可选修饰。 | 令牌 | | --- | | `--xh-tone-border` | | `--xh-tone-border-control` | | `--xh-tone-fg` | | `--xh-tone-on` | | `--xh-tone-soft` | | `--xh-tone-solid` | | `--xh-tone-solid-active` | | `--xh-tone-solid-hover` | | `--xh-tone-subtle` | | `--xh-tone-subtle-active` | | `--xh-tone-subtle-hover` |