设计变量表
全部变量来自仓库内的 packages/tokens 构建产物，已包含在 @ptengine/ui 的全局样式中。 这一页不是手写的：设计规范更新、tokens 重新构建，表就跟着变。 用法与分层见主题与设计变量。
语义层
组件只引用这一层。带 α 标记的档位本身带透明度， 它的通道形态不能再叠一层 alpha；标 同 的表示暗色主题没有单独定义、与亮色相同。
| 变量 | 亮色 | 暗色 | 通道形态 |
|---|---|---|---|
--pt-bg-secondary | rgb(243 244 244) | rgb(64 73 76) | --pt-bg-secondary-rgb |
--pt-border-default | rgb(231 232 233) | rgb(255 255 255 / 0.1) | --pt-border-default-rgb |
--pt-border-input | rgb(231 232 233) | rgb(255 255 255 / 0.15) | --pt-border-input-rgb |
--pt-brand | rgb(37 172 0) | rgb(37 172 0)同 | --pt-brand-rgb |
--pt-fg-default | rgb(16 28 31) | rgb(255 255 255) | --pt-fg-default-rgb |
--pt-fg-muted | rgb(112 119 121) | rgb(159 164 165) | --pt-fg-muted-rgb |
--pt-text-ai | rgb(121 71 158) | rgb(191 99 243) | --pt-text-ai-rgb |
--pt-text-ai-standard | rgb(191 99 243) | rgb(191 99 243)同 | --pt-text-ai-standard-rgb |
--pt-text-brand | rgb(90 113 51) | rgb(90 113 51)同 | --pt-text-brand-rgb |
--pt-text-brand-standard | rgb(200 240 80) | rgb(200 240 80)同 | --pt-text-brand-standard-rgb |
--pt-text-danger | rgb(159 54 55) | rgb(255 71 71) | --pt-text-danger-rgb |
--pt-text-danger-standard | rgb(207 62 63) | rgb(207 62 63)同 | --pt-text-danger-standard-rgb |
--pt-text-disabledα | rgb(16 28 31 / 0.3) | rgb(255 255 255 / 0.3) | --pt-text-disabled-rgb |
--pt-text-information | rgb(27 98 161) | rgb(34 145 248) | --pt-text-information-rgb |
--pt-text-information-standard | rgb(34 145 248) | rgb(34 145 248)同 | --pt-text-information-standard-rgb |
--pt-text-inverse | rgb(255 255 255) | rgb(16 28 31) | --pt-text-inverse-rgb |
--pt-text-neutral | rgb(88 96 98) | rgb(135 141 143) | --pt-text-neutral-rgb |
--pt-text-stable | rgb(255 255 255) | rgb(255 255 255)同 | --pt-text-stable-rgb |
--pt-text-standardα | rgb(16 28 31 / 0.7) | rgb(255 255 255 / 0.7) | --pt-text-standard-rgb |
--pt-text-strongα | rgb(16 28 31 / 0.9) | rgb(255 255 255 / 0.9) | --pt-text-strong-rgb |
--pt-text-success | rgb(29 114 12) | rgb(37 172 0) | --pt-text-success-rgb |
--pt-text-success-standard | rgb(37 172 0) | rgb(37 172 0)同 | --pt-text-success-standard-rgb |
--pt-text-tageα | rgb(16 28 31 / 0.6) | rgb(255 255 255 / 0.6) | --pt-text-tage-rgb |
--pt-text-warning | rgb(159 98 48) | rgb(255 144 59) | --pt-text-warning-rgb |
--pt-text-warning-standard | rgb(255 144 59) | rgb(255 144 59)同 | --pt-text-warning-standard-rgb |
--pt-text-weakα | rgb(16 28 31 / 0.4) | rgb(255 255 255 / 0.4) | --pt-text-weak-rgb |
--pt-bg-ai-standard | rgb(191 99 243) | rgb(191 99 243)同 | --pt-bg-ai-standard-rgb |
--pt-bg-ai-subtle | rgb(217 161 248) | rgb(217 161 248)同 | --pt-bg-ai-subtle-rgb |
--pt-bg-ai-subtlerα | rgb(191 99 243 / 0.2) | rgb(191 99 243 / 0.2)同 | --pt-bg-ai-subtler-rgb |
--pt-bg-box | rgb(255 255 255) | rgb(16 28 31) | --pt-bg-box-rgb |
--pt-bg-brand-standard | rgb(200 240 80) | rgb(200 240 80)同 | --pt-bg-brand-standard-rgb |
--pt-bg-brand-subtle | rgb(222 246 150) | rgb(222 246 150)同 | --pt-bg-brand-subtle-rgb |
--pt-bg-brand-subtler | rgb(244 252 220) | rgb(244 252 220)同 | --pt-bg-brand-subtler-rgb |
--pt-bg-danger-standard | rgb(207 62 63) | rgb(207 62 63)同 | --pt-bg-danger-standard-rgb |
--pt-bg-danger-subtle | rgb(255 145 145) | rgb(255 145 145)同 | --pt-bg-danger-subtle-rgb |
--pt-bg-danger-subtlerα | rgb(255 71 71 / 0.2) | rgb(255 71 71 / 0.2)同 | --pt-bg-danger-subtler-rgb |
--pt-bg-default | rgb(255 255 255) | rgb(28 39 42) | --pt-bg-default-rgb |
--pt-bg-disableα | rgb(16 28 31 / 0.1) | rgb(255 255 255 / 0.1) | --pt-bg-disable-rgb |
--pt-bg-information-standard | rgb(34 145 248) | rgb(34 145 248)同 | --pt-bg-information-standard-rgb |
--pt-bg-information-subtle | rgb(122 189 251) | rgb(122 189 251)同 | --pt-bg-information-subtle-rgb |
--pt-bg-information-subtlerα | rgb(34 145 248 / 0.2) | rgb(34 145 248 / 0.2)同 | --pt-bg-information-subtler-rgb |
--pt-bg-neutralα | rgb(16 28 31 / 0.08) | rgb(255 255 255 / 0.08) | --pt-bg-neutral-rgb |
--pt-bg-neutral-subtlerα | rgb(135 141 143 / 0.2) | rgb(135 141 143 / 0.2)同 | --pt-bg-neutral-subtler-rgb |
--pt-bg-overlayα | rgb(16 28 31 / 0.45) | rgb(16 28 31 / 0.6) | --pt-bg-overlay-rgb |
--pt-bg-overlay-strongα | rgb(16 28 31 / 0.8) | rgb(16 28 31 / 0.8)同 | --pt-bg-overlay-strong-rgb |
--pt-bg-positive-standard | rgb(37 172 0) | rgb(37 172 0)同 | --pt-bg-positive-standard-rgb |
--pt-bg-positive-subtle | rgb(124 205 102) | rgb(124 205 102)同 | --pt-bg-positive-subtle-rgb |
--pt-bg-positive-subtlerα | rgb(37 172 0 / 0.2) | rgb(37 172 0 / 0.2)同 | --pt-bg-positive-subtler-rgb |
--pt-bg-selectedα | rgb(16 28 31 / 0.08) | rgb(255 255 255 / 0.08) | --pt-bg-selected-rgb |
--pt-bg-strong | rgb(28 39 42) | rgb(255 255 255) | --pt-bg-strong-rgb |
--pt-bg-warning-standard | rgb(255 144 59) | rgb(255 144 59)同 | --pt-bg-warning-standard-rgb |
--pt-bg-warning-subtle | rgb(255 188 137) | rgb(255 188 137)同 | --pt-bg-warning-subtle-rgb |
--pt-bg-warning-subtlerα | rgb(255 144 59 / 0.2) | rgb(255 144 59 / 0.2)同 | --pt-bg-warning-subtler-rgb |
--pt-bg-weakα | rgb(16 28 31 / 0.03) | rgb(255 255 255 / 0.03) | --pt-bg-weak-rgb |
--pt-border-ai | rgb(242 224 253) | rgb(242 224 253)同 | --pt-border-ai-rgb |
--pt-border-brand | rgb(233 249 185) | rgb(233 249 185)同 | --pt-border-brand-rgb |
--pt-border-danger | rgb(255 218 218) | rgb(255 218 218)同 | --pt-border-danger-rgb |
--pt-border-information | rgb(211 233 254) | rgb(211 233 254)同 | --pt-border-information-rgb |
--pt-border-inverse | rgb(255 255 255) | rgb(16 28 31) | --pt-border-inverse-rgb |
--pt-border-neutralα | rgb(16 28 31 / 0.2) | rgb(255 255 255 / 0.2) | --pt-border-neutral-rgb |
--pt-border-strongα | rgb(16 28 31 / 0.9) | rgb(255 255 255 / 0.9) | --pt-border-strong-rgb |
--pt-border-success | rgb(211 238 204) | rgb(211 238 204)同 | --pt-border-success-rgb |
--pt-border-warning | rgb(255 233 216) | rgb(255 233 216)同 | --pt-border-warning-rgb |
--pt-border-weakα | rgb(16 28 31 / 0.08) | rgb(255 255 255 / 0.08) | --pt-border-weak-rgb |
--pt-interaction-focusα | rgb(16 28 31 / 0.9) | rgb(255 255 255 / 0.9) | --pt-interaction-focus-rgb |
--pt-interaction-hoverα | rgb(16 28 31 / 0.08) | rgb(255 255 255 / 0.08) | --pt-interaction-hover-rgb |
--pt-interaction-pressα | rgb(16 28 31 / 0.1) | rgb(255 255 255 / 0.1) | --pt-interaction-press-rgb |
--pt-interaction-reversal-focusα | rgb(255 255 255 / 0.9) | rgb(16 28 31 / 0.9) | --pt-interaction-reversal-focus-rgb |
--pt-interaction-reversal-hoverα | rgb(255 255 255 / 0.08) | rgb(16 28 31 / 0.08) | --pt-interaction-reversal-hover-rgb |
--pt-interaction-reversal-pressα | rgb(255 255 255 / 0.1) | rgb(16 28 31 / 0.1) | --pt-interaction-reversal-press-rgb |
--pt-chart-0 | rgb(16 28 31) | rgb(255 255 255) | --pt-chart-0-rgb |
--pt-chart-1 | rgb(37 172 0) | rgb(37 172 0)同 | --pt-chart-1-rgb |
--pt-chart-2 | rgb(200 240 80) | rgb(200 240 80)同 | --pt-chart-2-rgb |
--pt-chart-3 | rgb(255 144 59) | rgb(255 144 59)同 | --pt-chart-3-rgb |
--pt-chart-4 | rgb(34 145 248) | rgb(34 145 248)同 | --pt-chart-4-rgb |
--pt-chart-5 | rgb(191 99 243) | rgb(191 99 243)同 | --pt-chart-5-rgb |
--pt-link-blue | rgb(34 145 248) | rgb(34 145 248)同 | --pt-link-blue-rgb |
--pt-link-green | rgb(37 172 0) | rgb(37 172 0)同 | --pt-link-green-rgb |
刻度
圆角、排版、控件尺寸、层级、动效、阴影。组件内的 padding / gap 只从这里取值。 字阶的配对与字重角色见排版，圆角各档的用途见圆角。
| 变量 | 值 |
|---|---|
--pt-radius | 10px |
--pt-radius-md | calc(var(--pt-radius) - 2px) |
--pt-radius-sm | calc(var(--pt-radius) - 4px) |
--pt-radius-12 | 12px |
--pt-radius-16 | 16px |
--pt-radius-20 | 20px |
--pt-radius-full | 9999px |
--pt-font-sans | 'Inter', system-ui, -apple-system, sans-serif |
--pt-font-sans-ja | 'Inter', 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Yu Gothic', Meiryo, sans-serif |
--pt-font-sans-zh | 'Inter', 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif |
--pt-font-mono | ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace |
--pt-lh-2xs | 16px |
--pt-lh-xs | 20px |
--pt-lh-sm | 20px |
--pt-lh-base | 24px |
--pt-lh-lg | 28px |
--pt-lh-xl | 32px |
--pt-lh-2xl | 36px |
--pt-lh-3xl | 40px |
--pt-lh-4xl | 48px |
--pt-lh-5xl | 56px |
--pt-lh-6xl | 72px |
--pt-lh-7xl | 72px |
--pt-lh-8xl | 96px |
--pt-lh-9xl | 128px |
--pt-font-size-2xs | 12px |
--pt-font-size-xs | 13px |
--pt-font-size-sm | 14px |
--pt-font-size-base | 16px |
--pt-font-size-lg | 18px |
--pt-font-size-xl | 20px |
--pt-font-size-2xl | 24px |
--pt-font-size-3xl | 28px |
--pt-font-size-4xl | 32px |
--pt-font-size-5xl | 40px |
--pt-font-size-6xl | 48px |
--pt-font-size-7xl | 56px |
--pt-font-size-8xl | 64px |
--pt-font-size-9xl | 72px |
--pt-font-weight-normal | 400 |
--pt-font-weight-medium | 500 |
--pt-font-weight-semibold | 600 |
--pt-space-0 | 0px |
--pt-space-1 | 4px |
--pt-space-2 | 8px |
--pt-space-3 | 12px |
--pt-space-4 | 16px |
--pt-space-5 | 20px |
--pt-space-6 | 24px |
--pt-space-8 | 32px |
--pt-space-10 | 40px |
--pt-space-12 | 48px |
--pt-control-height-sm | 24px |
--pt-control-height-md | 32px |
--pt-control-height-lg | 40px |
--pt-control-padding-sm | 8px |
--pt-control-padding-md | 12px |
--pt-control-padding-lg | 16px |
--pt-control-font-size-sm | 12px |
--pt-control-font-size-md | 13px |
--pt-control-font-size-lg | 14px |
--pt-control-icon-sm | 16px |
--pt-control-icon-md | 16px |
--pt-control-icon-lg | 20px |
--pt-control-touch-target | 44px |
--pt-z-popup | 50 |
--pt-z-tooltip | var(--pt-z-popup) |
--pt-z-overlay | 60 |
--pt-duration-fast | 150ms |
--pt-duration-base | 200ms |
--pt-ease-standard | cubic-bezier(0.4, 0, 0.2, 1) |
--pt-ease-out | cubic-bezier(0, 0, 0.2, 1) |
--pt-shadow-sm | 0 1px 2px 0 rgb(var(--pt-black-rgb) / 0.05) |
--pt-shadow-md | 0 4px 6px -1px rgb(var(--pt-black-rgb) / 0.1), 0 2px 4px -2px rgb(var(--pt-black-rgb) / 0.1) |
--pt-shadow-lg | 0 10px 15px -3px rgb(var(--pt-black-rgb) / 0.1), 0 4px 6px -4px rgb(var(--pt-black-rgb) / 0.1) |
--pt-shadow-xl | 0 20px 25px -5px rgb(var(--pt-black-rgb) / 0.1), 0 8px 10px -6px rgb(var(--pt-black-rgb) / 0.1) |