CSS 变量参考
这一页面向日常开发中的样式编写，集中说明 VEF 可直接使用的 CSS 自定义属性。当前共收录 701 个变量，重点回答三个问题：应该优先选哪一类变量、应该从哪个入口读取，以及怎样让页面样式和框架整体视觉保持一致。
提示
如果应用是通过 starter.createApp().render() 启动的，这些变量会自动注入到 :root。如果你是手动挂载组件层，请保留 @vef-framework-react/components 的 ConfigProvider，这样全局变量才会正常输出。
备注
下面展示的是默认主题下的输出值。像 --vef-color-primary* 这类语义变量、表面色变量和文本变量，在主题覆盖或暗色模式下都可能变化。开发时请依赖变量名，而不是把这里的示例十六进制值当成固定常量。
应该从哪个入口读取
VEF 通过三种入口暴露同一套设计语言：
- 在 CSS Modules、SCSS、第三方样式覆盖或 MDX 示例里，直接使用
var(--vef-color-primary)这类原始 CSS 变量。 - 在 Emotion 或其他 JS 对象样式里，优先使用
globalCssVars，这样可以避免反复手写字符串。 - 当值需要参与 JavaScript 逻辑，或者要传给图表、canvas 等运行时库时，使用
useThemeTokens()读取当前主题下已经解析好的值。
推荐使用方式
| 需求 | 推荐变量 | 原因 |
|---|---|---|
| 页面间距、卡片内边距、区块节奏 | --vef-spacing-*、--vef-padding-*、--vef-margin-* | 能和框架组件的整体节奏保持一致。 |
| 主按钮、链接、选中态 | --vef-color-primary、--vef-color-primary-hover、--vef-color-primary-active、--vef-color-primary-text | 会自动跟随主题覆盖和暗色模式变化。 |
| 中性面板、卡片表面、页面底色 | --vef-color-bg-container、--vef-color-bg-layout、--vef-color-border、--vef-shadow-*、--vef-border-radius* | 能与框架外壳和默认组件表面保持统一。 |
| 次级文本、说明文本、弱化文本 | --vef-color-text、--vef-color-text-secondary、--vef-color-text-tertiary、--vef-color-text-description | 不需要自己再调透明度，整体层级更稳定。 |
| 校验状态和业务状态提示 | --vef-color-success-*、--vef-color-warning-*、--vef-color-error-*、--vef-color-info-* | 同时提供背景、边框和文本状态，组合起来更顺手。 |
| 图表、插画、多色强调 | --vef-color-blue-50..950、--vef-color-emerald-50..950，或 --vef-blue-1..10 这类预设色阶 | 色阶更完整，适合语义色之外的多彩表达。 |
| TS/JS 里的 CSS-in-JS 样式 | globalCssVars.* | 可以避免在对象样式里重复写原始 var(--vef-...) 字符串。 |
在 CSS 里直接使用变量
当样式写在 CSS、SCSS 或 CSS Module 中时，直接使用原始变量最自然。
.configItem {
display: flex;
gap: var(--vef-spacing-xl);
padding: var(--vef-spacing-lg) var(--vef-spacing-xl);
background: var(--vef-color-bg-container);
border: 1px solid var(--vef-color-border-secondary);
border-radius: var(--vef-border-radius-lg);
box-shadow: var(--vef-shadow-sm);
}
.configItem:hover {
background: var(--vef-color-fill-quaternary);
}
这种方式最适合：
- 页面路由下的 CSS Modules
- 对框架组件做样式覆盖的 SCSS 文件
- MDX 示例和站点级样式
- 不认识
globalCssVars的第三方组件样式
在 Emotion 或对象样式里使用 globalCssVars
globalCssVars 是 @vef-framework-react/components 导出的 JS/TS 别名层。它把 CSS 变量映射成 camelCase 字段，例如：
| CSS 自定义属性 | JS 别名 |
|---|---|
var(--vef-color-primary) | globalCssVars.colorPrimary |
var(--vef-spacing-md) | globalCssVars.spacingMd |
var(--vef-border-radius-lg) | globalCssVars.borderRadiusLg |
var(--vef-font-family-code) | globalCssVars.fontFamilyCode |
import { css } from "@emotion/react";
import { globalCssVars } from "@vef-framework-react/components";
const panelStyle = css({
padding: globalCssVars.spacingMd,
borderRadius: globalCssVars.borderRadiusLg,
border: `1px solid ${globalCssVars.colorBorderSecondary}`,
backgroundColor: globalCssVars.colorBgContainer,
boxShadow: globalCssVars.shadowSm
});
如果样式本来就写在 TS 或 JS 里，这通常是最舒服的入口。它既保留了框架 token 的统一命名，也避免了反复拼接原始字符串。
在运行时读取 useThemeTokens()
useThemeTokens() 返回的是当前主题下已经解析完成的 Ant Design token 对象。只要你面对的是运行时库，需要的是实际颜色值或尺寸值，而不是 CSS 变量字符串，就应该优先用它。
import { useThemeTokens } from "@vef-framework-react/components";
export function MetricsChart() {
const { colorPrimary, colorTextSecondary } = useThemeTokens();
return (
<MyChart
palette={[colorPrimary, colorTextSecondary]}
/>
);
}
常见场景：
- 从 JS 配置图表颜色
- canvas 绘制
- 运行时颜色计算
- 依赖当前主题结果的分支逻辑
命名规律
理解了命名规律以后，整份目录会更好查：
--vef-color-primary-*、--vef-color-success-*这一类语义色阶，优先用于有明确语义含义的样式。--vef-color-blue-*、--vef-color-emerald-*这一类扩展色阶，适合图表、插画和非语义化强调。--vef-blue-1..10、--vef-purple-1..10这一类预设色阶，沿用了 Ant Design 风格的 1 到 10 编号方式。--vef-color-text*、--vef-color-bg*、--vef-color-fill*、--vef-color-border*主要是中性表面类变量。--vef-spacing-*、--vef-padding-*、--vef-margin-*、--vef-border-radius*、--vef-shadow-*则是布局与层次表达的基础变量。
信息
这一页聚焦的是全局设计 token。像 --vef-card-body-padding 这类组件级覆盖变量，如果某个组件文档里单独说明了，也可以使用，但它们不属于这一份共享全局变量目录。
完整目录
Foundation tokens (27 variables)
These are the first-choice variables for spacing rhythm, elevation, responsive thresholds, and reusable animations.
| Variable | Default value |
|---|---|
--vef-color-inverted | #0f172a |
--vef-spacing-xxs | var(--vef-size-xxs, 4px) |
--vef-spacing-xs | var(--vef-size-xs, 8px) |
--vef-spacing-sm | var(--vef-size-sm, 12px) |
--vef-spacing-md | var(--vef-size, 16px) |
--vef-spacing-lg | var(--vef-size-md, 20px) |
--vef-spacing-xl | var(--vef-size-lg, 24px) |
--vef-spacing-xxl | var(--vef-size-xl, 32px) |
--vef-shadow-xxs | 0 1px 2px rgb(0 0 0 / 0.04) |
--vef-shadow-xs | 0 1px 3px rgb(0 0 0 / 0.06), 0 1px 2px rgb(0 0 0 / 0.04) |
--vef-shadow-sm | 0 2px 4px rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.06) |
--vef-shadow-md | 0 4px 8px -2px rgb(0 0 0 / 0.06), 0 2px 4px -2px rgb(0 0 0 / 0.04) |
--vef-shadow-lg | 0 12px 24px -4px rgb(0 0 0 / 0.08), 0 4px 8px -2px rgb(0 0 0 / 0.04) |
--vef-shadow-xl | 0 20px 40px -8px rgb(0 0 0 / 0.1), 0 8px 16px -4px rgb(0 0 0 / 0.06) |
--vef-shadow-xxl | 0 32px 64px -12px rgb(0 0 0 / 0.14) |
--vef-shadow-glow | 0 0 20px rgb(99 102 241 / 0.15) |
--vef-shadow-card | 0 1px 3px rgb(0 0 0 / 0.04), 0 1px 2px rgb(0 0 0 / 0.06) |
--vef-shadow-card-hover | 0 12px 24px -4px rgb(0 0 0 / 0.08), 0 4px 8px -2px rgb(0 0 0 / 0.04) |
--vef-breakpoint-xs | 36em |
--vef-breakpoint-sm | 48em |
--vef-breakpoint-md | 62em |
--vef-breakpoint-lg | 75em |
--vef-breakpoint-xl | 88em |
--vef-animate-spin | spin 1s linear infinite |
--vef-animate-ping | ping 1s cubic-bezier(0, 0, 0.2, 1) infinite |
--vef-animate-pulse | pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite |
--vef-animate-bounce | bounce 1s infinite |
Semantic color ramps (50-950) (55 variables)
Use these when the color meaning matters. They follow the current VEF theme, so `primary`, `success`, `info`, `warning`, and `error` stay aligned with the app brand and status language.
| Variable | Default value |
|---|---|
--vef-color-primary-50 | #f0f9ff |
--vef-color-primary-100 | #dcf1ff |
--vef-color-primary-200 | #bde6ff |
--vef-color-primary-300 | #8fd8ff |
--vef-color-primary-400 | #52bfff |
--vef-color-primary-500 | #29a2ff |
--vef-color-primary-600 | #1486ff |
--vef-color-primary-700 | #106ced |
--vef-color-primary-800 | #1655bb |
--vef-color-primary-900 | #1a4a8f |
--vef-color-primary-950 | #152e56 |
--vef-color-success-50 | #f2fdf5 |
--vef-color-success-100 | #defce9 |
--vef-color-success-200 | #b9f8cf |
--vef-color-success-300 | #79f1a7 |
--vef-color-success-400 | #05e173 |
--vef-color-success-500 | #00c951 |
--vef-color-success-600 | #00a83e |
--vef-color-success-700 | #008035 |
--vef-color-success-800 | #016530 |
--vef-color-success-900 | #0d542b |
--vef-color-success-950 | #033016 |
--vef-color-info-50 | #f0f9ff |
--vef-color-info-100 | #e1f3fe |
--vef-color-info-200 | #b9e6fe |
--vef-color-info-300 | #75d3ff |
--vef-color-info-400 | #00bbff |
--vef-color-info-500 | #00a6f4 |
--vef-color-info-600 | #0084d1 |
--vef-color-info-700 | #0068a8 |
--vef-color-info-800 | #005a8a |
--vef-color-info-900 | #02486e |
--vef-color-info-950 | #052e48 |
--vef-color-warning-50 | #fff6eb |
--vef-color-warning-100 | #ffeed6 |
--vef-color-warning-200 | #ffd7a8 |
--vef-color-warning-300 | #ffb86b |
--vef-color-warning-400 | #ff8a05 |
--vef-color-warning-500 | #ff6900 |
--vef-color-warning-600 | #f54900 |
--vef-color-warning-700 | #cc3600 |
--vef-color-warning-800 | #9e2d00 |
--vef-color-warning-900 | #7e2a0c |
--vef-color-warning-950 | #461406 |
--vef-color-error-50 | #fef1f1 |
--vef-color-error-100 | #ffe0e0 |
--vef-color-error-200 | #ffc7c7 |
--vef-color-error-300 | #ffa3a3 |
--vef-color-error-400 | #ff6669 |
--vef-color-error-500 | #fb2c36 |
--vef-color-error-600 | #e6000b |
--vef-color-error-700 | #c20006 |
--vef-color-error-800 | #a20711 |
--vef-color-error-900 | #811819 |
--vef-color-error-950 | #440809 |
Extended palette ramps (50-950) (242 variables)
Use these for charts, illustrations, badges, and one-off visual accents when you need a named palette rather than a semantic meaning.
| Variable | Default value |
|---|---|
--vef-color-red-50 | #fef2f2 |
--vef-color-red-100 | #ffe2e2 |
--vef-color-red-200 | #ffc9c9 |
--vef-color-red-300 | #ffa2a2 |
--vef-color-red-400 | #ff6467 |
--vef-color-red-500 | #fb2c36 |
--vef-color-red-600 | #e7000b |
--vef-color-red-700 | #c10007 |
--vef-color-red-800 | #9f0712 |
--vef-color-red-900 | #82181a |
--vef-color-red-950 | #460809 |
--vef-color-orange-50 | #fff7ed |
--vef-color-orange-100 | #ffedd4 |
--vef-color-orange-200 | #ffd6a7 |
--vef-color-orange-300 | #ffb86a |
--vef-color-orange-400 | #ff8904 |
--vef-color-orange-500 | #ff6900 |
--vef-color-orange-600 | #f54900 |
--vef-color-orange-700 | #ca3500 |
--vef-color-orange-800 | #9f2d00 |
--vef-color-orange-900 | #7e2a0c |
--vef-color-orange-950 | #441306 |
--vef-color-amber-50 | #fffbeb |
--vef-color-amber-100 | #fef3c6 |
--vef-color-amber-200 | #fee685 |
--vef-color-amber-300 | #ffd230 |
--vef-color-amber-400 | #ffb900 |
--vef-color-amber-500 | #fe9a00 |
--vef-color-amber-600 | #e17100 |
--vef-color-amber-700 | #bb4d00 |
--vef-color-amber-800 | #973c00 |
--vef-color-amber-900 | #7b3306 |
--vef-color-amber-950 | #461901 |
--vef-color-yellow-50 | #fefce8 |
--vef-color-yellow-100 | #fef9c2 |
--vef-color-yellow-200 | #fff085 |
--vef-color-yellow-300 | #ffdf20 |
--vef-color-yellow-400 | #fdc700 |
--vef-color-yellow-500 | #f0b100 |
--vef-color-yellow-600 | #d08700 |
--vef-color-yellow-700 | #a65f00 |
--vef-color-yellow-800 | #894b00 |
--vef-color-yellow-900 | #733e0a |
--vef-color-yellow-950 | #432004 |
--vef-color-lime-50 | #f7fee7 |
--vef-color-lime-100 | #ecfcca |
--vef-color-lime-200 | #d8f999 |
--vef-color-lime-300 | #bbf451 |
--vef-color-lime-400 | #9ae600 |
--vef-color-lime-500 | #7ccf00 |
--vef-color-lime-600 | #5ea500 |
--vef-color-lime-700 | #497d00 |
--vef-color-lime-800 | #3c6300 |
--vef-color-lime-900 | #35530e |
--vef-color-lime-950 | #192e03 |
--vef-color-green-50 | #f0fdf4 |
--vef-color-green-100 | #dcfce7 |
--vef-color-green-200 | #b9f8cf |
--vef-color-green-300 | #7bf1a8 |
--vef-color-green-400 | #05df72 |
--vef-color-green-500 | #00c950 |
--vef-color-green-600 | #00a63e |
--vef-color-green-700 | #008236 |
--vef-color-green-800 | #016630 |
--vef-color-green-900 | #0d542b |
--vef-color-green-950 | #032e15 |
--vef-color-emerald-50 | #ecfdf5 |
--vef-color-emerald-100 | #d0fae5 |
--vef-color-emerald-200 | #a4f4cf |
--vef-color-emerald-300 | #5ee9b5 |
--vef-color-emerald-400 | #00d492 |
--vef-color-emerald-500 | #00bc7d |
--vef-color-emerald-600 | #009966 |
--vef-color-emerald-700 | #007a55 |
--vef-color-emerald-800 | #006045 |
--vef-color-emerald-900 | #004f3b |
--vef-color-emerald-950 | #002c22 |
--vef-color-teal-50 | #f0fdfa |
--vef-color-teal-100 | #cbfbf1 |
--vef-color-teal-200 | #96f7e4 |
--vef-color-teal-300 | #46ecd5 |
--vef-color-teal-400 | #00d5be |
--vef-color-teal-500 | #00bba7 |
--vef-color-teal-600 | #009689 |
--vef-color-teal-700 | #00786f |
--vef-color-teal-800 | #005f5a |
--vef-color-teal-900 | #0b4f4a |
--vef-color-teal-950 | #022f2e |
--vef-color-cyan-50 | #ecfeff |
--vef-color-cyan-100 | #cefafe |
--vef-color-cyan-200 | #a2f4fd |
--vef-color-cyan-300 | #53eafd |
--vef-color-cyan-400 | #00d3f2 |
--vef-color-cyan-500 | #00b8db |
--vef-color-cyan-600 | #0092b8 |
--vef-color-cyan-700 | #007595 |
--vef-color-cyan-800 | #005f78 |
--vef-color-cyan-900 | #104e64 |
--vef-color-cyan-950 | #053345 |
--vef-color-sky-50 | #f0f9ff |
--vef-color-sky-100 | #dff2fe |
--vef-color-sky-200 | #b8e6fe |
--vef-color-sky-300 | #74d4ff |
--vef-color-sky-400 | #00bcff |
--vef-color-sky-500 | #00a6f4 |
--vef-color-sky-600 | #0084d1 |
--vef-color-sky-700 | #0069a8 |
--vef-color-sky-800 | #00598a |
--vef-color-sky-900 | #024a70 |
--vef-color-sky-950 | #052f4a |
--vef-color-blue-50 | #eff6ff |
--vef-color-blue-100 | #dbeafe |
--vef-color-blue-200 | #bedbff |
--vef-color-blue-300 | #8ec5ff |
--vef-color-blue-400 | #51a2ff |
--vef-color-blue-500 | #2b7fff |
--vef-color-blue-600 | #155dfc |
--vef-color-blue-700 | #1447e6 |
--vef-color-blue-800 | #193cb8 |
--vef-color-blue-900 | #1c398e |
--vef-color-blue-950 | #162456 |
--vef-color-indigo-50 | #eef2ff |
--vef-color-indigo-100 | #e0e7ff |
--vef-color-indigo-200 | #c6d2ff |
--vef-color-indigo-300 | #a3b3ff |
--vef-color-indigo-400 | #7c86ff |
--vef-color-indigo-500 | #615fff |
--vef-color-indigo-600 | #4f39f6 |
--vef-color-indigo-700 | #432dd7 |
--vef-color-indigo-800 | #372aac |
--vef-color-indigo-900 | #312c85 |
--vef-color-indigo-950 | #1e1a4d |
--vef-color-violet-50 | #f5f3ff |
--vef-color-violet-100 | #ede9fe |
--vef-color-violet-200 | #ddd6ff |
--vef-color-violet-300 | #c4b4ff |
--vef-color-violet-400 | #a684ff |
--vef-color-violet-500 | #8e51ff |
--vef-color-violet-600 | #7f22fe |
--vef-color-violet-700 | #7008e7 |
--vef-color-violet-800 | #5d0ec0 |
--vef-color-violet-900 | #4d179a |
--vef-color-violet-950 | #2f0d68 |
--vef-color-purple-50 | #faf5ff |
--vef-color-purple-100 | #f3e8ff |
--vef-color-purple-200 | #e9d4ff |
--vef-color-purple-300 | #dab2ff |
--vef-color-purple-400 | #c27aff |
--vef-color-purple-500 | #ad46ff |
--vef-color-purple-600 | #9810fa |
--vef-color-purple-700 | #8200db |
--vef-color-purple-800 | #6e11b0 |
--vef-color-purple-900 | #59168b |
--vef-color-purple-950 | #3c0366 |
--vef-color-fuchsia-50 | #fdf4ff |
--vef-color-fuchsia-100 | #fae8ff |
--vef-color-fuchsia-200 | #f6cfff |
--vef-color-fuchsia-300 | #f4a8ff |
--vef-color-fuchsia-400 | #ed6aff |
--vef-color-fuchsia-500 | #e12afb |
--vef-color-fuchsia-600 | #c800de |
--vef-color-fuchsia-700 | #a800b7 |
--vef-color-fuchsia-800 | #8a0194 |
--vef-color-fuchsia-900 | #721378 |
--vef-color-fuchsia-950 | #4b004f |
--vef-color-pink-50 | #fdf2f8 |
--vef-color-pink-100 | #fce7f3 |
--vef-color-pink-200 | #fccee8 |
--vef-color-pink-300 | #fda5d5 |
--vef-color-pink-400 | #fb64b6 |
--vef-color-pink-500 | #f6339a |
--vef-color-pink-600 | #e60076 |
--vef-color-pink-700 | #c6005c |
--vef-color-pink-800 | #a3004c |
--vef-color-pink-900 | #861043 |
--vef-color-pink-950 | #510424 |
--vef-color-rose-50 | #fff1f2 |
--vef-color-rose-100 | #ffe4e6 |
--vef-color-rose-200 | #ffccd3 |
--vef-color-rose-300 | #ffa1ad |
--vef-color-rose-400 | #ff637e |
--vef-color-rose-500 | #ff2056 |
--vef-color-rose-600 | #ec003f |
--vef-color-rose-700 | #c70036 |
--vef-color-rose-800 | #a50036 |
--vef-color-rose-900 | #8b0836 |
--vef-color-rose-950 | #4d0218 |
--vef-color-slate-50 | #f8fafc |
--vef-color-slate-100 | #f1f5f9 |
--vef-color-slate-200 | #e2e8f0 |
--vef-color-slate-300 | #cad5e2 |
--vef-color-slate-400 | #90a1b9 |
--vef-color-slate-500 | #62748e |
--vef-color-slate-600 | #45556c |
--vef-color-slate-700 | #314158 |
--vef-color-slate-800 | #1d293d |
--vef-color-slate-900 | #0f172b |
--vef-color-slate-950 | #020618 |
--vef-color-gray-50 | #f9fafb |
--vef-color-gray-100 | #f3f4f6 |
--vef-color-gray-200 | #e5e7eb |
--vef-color-gray-300 | #d1d5dc |
--vef-color-gray-400 | #99a1af |
--vef-color-gray-500 | #6a7282 |
--vef-color-gray-600 | #4a5565 |
--vef-color-gray-700 | #364153 |
--vef-color-gray-800 | #1e2939 |
--vef-color-gray-900 | #101828 |
--vef-color-gray-950 | #030712 |
--vef-color-zinc-50 | #fafafa |
--vef-color-zinc-100 | #f4f4f5 |
--vef-color-zinc-200 | #e4e4e7 |
--vef-color-zinc-300 | #d4d4d8 |
--vef-color-zinc-400 | #9f9fa9 |
--vef-color-zinc-500 | #71717b |
--vef-color-zinc-600 | #52525c |
--vef-color-zinc-700 | #3f3f46 |
--vef-color-zinc-800 | #27272a |
--vef-color-zinc-900 | #18181b |
--vef-color-zinc-950 | #09090b |
--vef-color-neutral-50 | #fafafa |
--vef-color-neutral-100 | #f5f5f5 |
--vef-color-neutral-200 | #e5e5e5 |
--vef-color-neutral-300 | #d4d4d4 |
--vef-color-neutral-400 | #a1a1a1 |
--vef-color-neutral-500 | #737373 |
--vef-color-neutral-600 | #525252 |
--vef-color-neutral-700 | #404040 |
--vef-color-neutral-800 | #262626 |
--vef-color-neutral-900 | #171717 |
--vef-color-neutral-950 | #0a0a0a |
--vef-color-stone-50 | #fafaf9 |
--vef-color-stone-100 | #f5f5f4 |
--vef-color-stone-200 | #e7e5e4 |
--vef-color-stone-300 | #d6d3d1 |
--vef-color-stone-400 | #a6a09b |
--vef-color-stone-500 | #79716b |
--vef-color-stone-600 | #57534d |
--vef-color-stone-700 | #44403b |
--vef-color-stone-800 | #292524 |
--vef-color-stone-900 | #1c1917 |
--vef-color-stone-950 | #0c0a09 |
Base aliases and direct color entry points (21 variables)
These are single-value shortcuts for common brand colors, semantic colors, and the base text/background anchors.
| Variable | Default value |
|---|---|
--vef-blue | #2b7fff |
--vef-purple | #ad46ff |
--vef-cyan | #00b8db |
--vef-green | #00c951 |
--vef-magenta | #e12afb |
--vef-pink | #f6339a |
--vef-red | #fb2c36 |
--vef-orange | #ff6900 |
--vef-yellow | #efb100 |
--vef-volcano | #FA541C |
--vef-geekblue | #8e51ff |
--vef-gold | #fd9a00 |
--vef-lime | #7ccf00 |
--vef-color-primary | #106ced |
--vef-color-success | #00c951 |
--vef-color-warning | #ff6900 |
--vef-color-error | #fb2c36 |
--vef-color-info | #00a6f4 |
--vef-color-link | #00a6f4 |
--vef-color-text-base | #000 |
--vef-color-bg-base | #fff |
Preset palette scales (1-10) (130 variables)
These follow the Ant Design-style preset scale naming. They are useful when a component or design system example already expects the 1-10 pattern.
| Variable | Default value |
|---|---|
--vef-blue-1 | #f0f8ff |
--vef-blue-2 | #cfe8ff |
--vef-blue-3 | #a6d2ff |
--vef-blue-4 | #7dbaff |
--vef-blue-5 | #549eff |
--vef-blue-6 | #2b7fff |
--vef-blue-7 | #1a60d9 |
--vef-blue-8 | #0c44b3 |
--vef-blue-9 | #032c8c |
--vef-blue-10 | #011c66 |
--vef-purple-1 | #fbf0ff |
--vef-purple-2 | #f8e8ff |
--vef-purple-3 | #e9bfff |
--vef-purple-4 | #d796ff |
--vef-purple-5 | #c26eff |
--vef-purple-6 | #ad46ff |
--vef-purple-7 | #8730d9 |
--vef-purple-8 | #661eb3 |
--vef-purple-9 | #48118c |
--vef-purple-10 | #310b66 |
--vef-cyan-1 | #e6ffff |
--vef-cyan-2 | #a3fcff |
--vef-cyan-3 | #7af6ff |
--vef-cyan-4 | #4ee4f5 |
--vef-cyan-5 | #25cee8 |
--vef-cyan-6 | #00b8db |
--vef-cyan-7 | #0091b5 |
--vef-cyan-8 | #006d8f |
--vef-cyan-9 | #004d69 |
--vef-cyan-10 | #002e42 |
--vef-green-1 | #e6ffeb |
--vef-green-2 | #a2fcba |
--vef-green-3 | #73f098 |
--vef-green-4 | #49e37c |
--vef-green-5 | #22d664 |
--vef-green-6 | #00c951 |
--vef-green-7 | #00a347 |
--vef-green-8 | #007d3a |
--vef-green-9 | #00572b |
--vef-green-10 | #00301a |
--vef-magenta-1 | #fff0fe |
--vef-magenta-2 | #ffcffe |
--vef-magenta-3 | #fea6ff |
--vef-magenta-4 | #f87dff |
--vef-magenta-5 | #f154ff |
--vef-magenta-6 | #e12afb |
--vef-magenta-7 | #b819d4 |
--vef-magenta-8 | #900cad |
--vef-magenta-9 | #6a0387 |
--vef-magenta-10 | #490161 |
--vef-pink-1 | #fff0f5 |
--vef-pink-2 | #ffd9e8 |
--vef-pink-3 | #ffb0d2 |
--vef-pink-4 | #ff87bf |
--vef-pink-5 | #ff5eaf |
--vef-pink-6 | #f6339a |
--vef-pink-7 | #cf2183 |
--vef-pink-8 | #a8136c |
--vef-pink-9 | #820855 |
--vef-pink-10 | #5c053f |
--vef-red-1 | #fff1f0 |
--vef-red-2 | #ffd5d1 |
--vef-red-3 | #ffada8 |
--vef-red-4 | #ff8280 |
--vef-red-5 | #ff575a |
--vef-red-6 | #fb2c36 |
--vef-red-7 | #d41c2b |
--vef-red-8 | #ad0e20 |
--vef-red-9 | #870418 |
--vef-red-10 | #610213 |
--vef-orange-1 | #fff4e6 |
--vef-orange-2 | #ffd6a3 |
--vef-orange-3 | #ffbf7a |
--vef-orange-4 | #ffa552 |
--vef-orange-5 | #ff8929 |
--vef-orange-6 | #ff6900 |
--vef-orange-7 | #d95300 |
--vef-orange-8 | #b33e00 |
--vef-orange-9 | #8c2c00 |
--vef-orange-10 | #661d00 |
--vef-yellow-1 | #fffce6 |
--vef-yellow-2 | #fff3a3 |
--vef-yellow-3 | #ffe97a |
--vef-yellow-4 | #ffdc52 |
--vef-yellow-5 | #fccb28 |
--vef-yellow-6 | #efb100 |
--vef-yellow-7 | #c98d00 |
--vef-yellow-8 | #a36d00 |
--vef-yellow-9 | #7d4f00 |
--vef-yellow-10 | #573400 |
--vef-volcano-1 | #fff2e8 |
--vef-volcano-2 | #ffd8bf |
--vef-volcano-3 | #ffbb96 |
--vef-volcano-4 | #ff9c6e |
--vef-volcano-5 | #ff7a45 |
--vef-volcano-6 | #fa541c |
--vef-volcano-7 | #d4380d |
--vef-volcano-8 | #ad2102 |
--vef-volcano-9 | #871400 |
--vef-volcano-10 | #610b00 |
--vef-geekblue-1 | #f8f0ff |
--vef-geekblue-2 | #f7f0ff |
--vef-geekblue-3 | #e3ccff |
--vef-geekblue-4 | #c9a3ff |
--vef-geekblue-5 | #ad7aff |
--vef-geekblue-6 | #8e51ff |
--vef-geekblue-7 | #6d3bd9 |
--vef-geekblue-8 | #4f27b3 |
--vef-geekblue-9 | #35188c |
--vef-geekblue-10 | #231066 |
--vef-gold-1 | #fff9e6 |
--vef-gold-2 | #ffe8a3 |
--vef-gold-3 | #ffd97a |
--vef-gold-4 | #ffc852 |
--vef-gold-5 | #ffb429 |
--vef-gold-6 | #fd9a00 |
--vef-gold-7 | #d67d00 |
--vef-gold-8 | #b06100 |
--vef-gold-9 | #8a4700 |
--vef-gold-10 | #633000 |
--vef-lime-1 | #f9ffe6 |
--vef-lime-2 | #e7ffa3 |
--vef-lime-3 | #cff576 |
--vef-lime-4 | #b3e84a |
--vef-lime-5 | #98db23 |
--vef-lime-6 | #7ccf00 |
--vef-lime-7 | #5fa800 |
--vef-lime-8 | #458200 |
--vef-lime-9 | #2e5c00 |
--vef-lime-10 | #193600 |
Semantic interaction and state tokens (75 variables)
These cover hover, active, border, text, and background states for primary, success, warning, error, and info styling.
| Variable | Default value |
|---|---|
--vef-color-primary-bg | #e6f4ff |
--vef-color-primary-bg-hover | #b5deff |
--vef-color-primary-border | #8cc8ff |
--vef-color-primary-border-hover | #63afff |
--vef-color-primary-hover | #3990fa |
--vef-color-primary-active | #044fc7 |
--vef-color-primary-text-hover | #3990fa |
--vef-color-primary-text | #106ced |
--vef-color-primary-text-active | #044fc7 |
--vef-color-success-bg | #e6ffeb |
--vef-color-success-bg-hover | #a2fcba |
--vef-color-success-border | #73f098 |
--vef-color-success-border-hover | #49e37c |
--vef-color-success-hover | #49e37c |
--vef-color-success-active | #00a347 |
--vef-color-success-text-hover | #22d664 |
--vef-color-success-text | #00c951 |
--vef-color-success-text-active | #00a347 |
--vef-color-error-bg | #fff1f0 |
--vef-color-error-bg-hover | #ffd5d1 |
--vef-color-error-bg-filled-hover | #ffcfcc |
--vef-color-error-bg-active | #ffada8 |
--vef-color-error-border | #ffada8 |
--vef-color-error-border-hover | #ff8280 |
--vef-color-error-hover | #ff575a |
--vef-color-error-active | #d41c2b |
--vef-color-error-text-hover | #ff575a |
--vef-color-error-text | #fb2c36 |
--vef-color-error-text-active | #d41c2b |
--vef-color-warning-bg | #fff4e6 |
--vef-color-warning-bg-hover | #ffd6a3 |
--vef-color-warning-border | #ffbf7a |
--vef-color-warning-border-hover | #ffa552 |
--vef-color-warning-hover | #ffa552 |
--vef-color-warning-active | #d95300 |
--vef-color-warning-text-hover | #ff8929 |
--vef-color-warning-text | #ff6900 |
--vef-color-warning-text-active | #d95300 |
--vef-color-info-bg | #e6fbff |
--vef-color-info-bg-hover | #a3eeff |
--vef-color-info-border | #7ae2ff |
--vef-color-info-border-hover | #52d4ff |
--vef-color-info-hover | #52d4ff |
--vef-color-info-active | #0086cf |
--vef-color-info-text-hover | #29c2ff |
--vef-color-info-text | #00a6f4 |
--vef-color-info-text-active | #0086cf |
--vef-color-link-hover | #52d4ff |
--vef-color-link-active | #0086cf |
--vef-blue-hover | #549eff |
--vef-blue-active | #1a60d9 |
--vef-purple-hover | #c26eff |
--vef-purple-active | #8730d9 |
--vef-cyan-hover | #25cee8 |
--vef-cyan-active | #0091b5 |
--vef-green-hover | #22d664 |
--vef-green-active | #00a347 |
--vef-magenta-hover | #f154ff |
--vef-magenta-active | #b819d4 |
--vef-pink-hover | #ff5eaf |
--vef-pink-active | #cf2183 |
--vef-red-hover | #ff575a |
--vef-red-active | #d41c2b |
--vef-orange-hover | #ff8929 |
--vef-orange-active | #d95300 |
--vef-yellow-hover | #fccb28 |
--vef-yellow-active | #c98d00 |
--vef-volcano-hover | #ff7a45 |
--vef-volcano-active | #d4380d |
--vef-geekblue-hover | #ad7aff |
--vef-geekblue-active | #6d3bd9 |
--vef-lime-hover | #98db23 |
--vef-lime-active | #5fa800 |
--vef-gold-hover | #ffb429 |
--vef-gold-active | #d67d00 |
Surface, text, fill, border, and control tokens (46 variables)
Use these for page chrome, cards, separators, neutral text, disabled states, outlines, focus rings, and control feedback.
| Variable | Default value |
|---|---|
--vef-color-bg-container | #ffffff |
--vef-color-bg-layout | #f8fafc |
--vef-color-bg-elevated | #ffffff |
--vef-color-border | #e4e4e7 |
--vef-color-border-secondary | #f4f4f5 |
--vef-color-text | rgba(0, 0, 0, 0.88) |
--vef-color-text-secondary | rgba(0, 0, 0, 0.65) |
--vef-color-text-tertiary | rgba(0, 0, 0, 0.45) |
--vef-color-text-quaternary | rgba(0, 0, 0, 0.25) |
--vef-color-fill | rgba(0, 0, 0, 0.15) |
--vef-color-fill-secondary | rgba(0, 0, 0, 0.06) |
--vef-color-fill-tertiary | rgba(0, 0, 0, 0.04) |
--vef-color-fill-quaternary | rgba(0, 0, 0, 0.02) |
--vef-color-bg-solid | rgb(0, 0, 0) |
--vef-color-bg-solid-hover | rgba(0, 0, 0, 0.75) |
--vef-color-bg-solid-active | rgba(0, 0, 0, 0.95) |
--vef-color-bg-spotlight | rgba(0, 0, 0, 0.85) |
--vef-color-bg-blur | transparent |
--vef-color-border-disabled | #d9d9d9 |
--vef-color-bg-mask | rgba(0, 0, 0, 0.45) |
--vef-color-white | #fff |
--vef-color-fill-content | rgba(0, 0, 0, 0.06) |
--vef-color-fill-content-hover | rgba(0, 0, 0, 0.15) |
--vef-color-fill-alter | rgba(0, 0, 0, 0.02) |
--vef-color-bg-container-disabled | rgba(0, 0, 0, 0.04) |
--vef-color-border-bg | #ffffff |
--vef-color-split | rgba(35, 35, 55, 0.05) |
--vef-color-text-placeholder | rgba(0, 0, 0, 0.25) |
--vef-color-text-disabled | rgba(0, 0, 0, 0.25) |
--vef-color-text-heading | rgba(0, 0, 0, 0.88) |
--vef-color-text-label | rgba(0, 0, 0, 0.65) |
--vef-color-text-description | rgba(0, 0, 0, 0.45) |
--vef-color-text-light-solid | #fff |
--vef-color-highlight | #fb2c36 |
--vef-color-bg-text-hover | rgba(0, 0, 0, 0.06) |
--vef-color-bg-text-active | rgba(0, 0, 0, 0.15) |
--vef-color-icon | rgba(0, 0, 0, 0.45) |
--vef-color-icon-hover | rgba(0, 0, 0, 0.88) |
--vef-color-error-outline | rgba(255, 22, 5, 0.06) |
--vef-color-warning-outline | rgba(255, 145, 5, 0.1) |
--vef-control-item-bg-hover | rgba(0, 0, 0, 0.04) |
--vef-control-item-bg-active | #e6f4ff |
--vef-control-item-bg-active-hover | #b5deff |
--vef-control-item-bg-active-disabled | rgba(0, 0, 0, 0.15) |
--vef-control-tmp-outline | rgba(0, 0, 0, 0.02) |
--vef-control-outline | rgba(5, 145, 255, 0.1) |
Typography tokens (24 variables)
These variables define font stacks, type scale, line heights, and strong text weight.
| Variable | Default value |
|---|---|
--vef-font-family | -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji' |
--vef-font-family-code | 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace |
--vef-font-size | 14px |
--vef-font-size-sm | 12px |
--vef-font-size-lg | 16px |
--vef-font-size-xl | 20px |
--vef-font-size-heading-1 | 38px |
--vef-font-size-heading-2 | 30px |
--vef-font-size-heading-3 | 24px |
--vef-font-size-heading-4 | 20px |
--vef-font-size-heading-5 | 16px |
--vef-line-height | 1.5714285714285714 |
--vef-line-height-lg | 1.5 |
--vef-line-height-sm | 1.6666666666666667 |
--vef-font-height | 22px |
--vef-font-height-lg | 24px |
--vef-font-height-sm | 20px |
--vef-line-height-heading-1 | 1.2105263157894737 |
--vef-line-height-heading-2 | 1.2666666666666666 |
--vef-line-height-heading-3 | 1.3333333333333333 |
--vef-line-height-heading-4 | 1.4 |
--vef-line-height-heading-5 | 1.5 |
--vef-font-size-icon | 12px |
--vef-font-weight-strong | 600 |
Size, radius, padding, and margin tokens (50 variables)
These are the structural primitives for component height, padding, spacing aliases, radii, and general layout sizing.
| Variable | Default value |
|---|---|
--vef-line-width | 1px |
--vef-line-type | solid |
--vef-border-radius | 8px |
--vef-size-unit | 4px |
--vef-size-step | 4px |
--vef-size-popup-arrow | 16px |
--vef-control-height | 32px |
--vef-border-radius-sm | 6px |
--vef-border-radius-xs | 4px |
--vef-border-radius-lg | 12px |
--vef-border-radius-outer | 6px |
--vef-size-xxl | 48px |
--vef-size-xl | 32px |
--vef-size-lg | 24px |
--vef-size-md | 20px |
--vef-size-ms | 16px |
--vef-size | 16px |
--vef-size-sm | 12px |
--vef-size-xs | 8px |
--vef-size-xxs | 4px |
--vef-control-height-sm | 24px |
--vef-control-height-xs | 16px |
--vef-control-height-lg | 40px |
--vef-line-width-bold | 2px |
--vef-line-width-focus | 3px |
--vef-control-outline-width | 2px |
--vef-control-interactive-size | 16px |
--vef-control-padding-horizontal | 12px |
--vef-control-padding-horizontal-sm | 8px |
--vef-padding-xxs | 4px |
--vef-padding-xs | 8px |
--vef-padding-sm | 12px |
--vef-padding | 16px |
--vef-padding-md | 20px |
--vef-padding-lg | 24px |
--vef-padding-xl | 32px |
--vef-padding-content-horizontal-lg | 24px |
--vef-padding-content-vertical-lg | 16px |
--vef-padding-content-horizontal | 16px |
--vef-padding-content-vertical | 12px |
--vef-padding-content-horizontal-sm | 16px |
--vef-padding-content-vertical-sm | 8px |
--vef-margin-xxs | 4px |
--vef-margin-xs | 8px |
--vef-margin-sm | 12px |
--vef-margin | 16px |
--vef-margin-md | 20px |
--vef-margin-lg | 24px |
--vef-margin-xl | 32px |
--vef-margin-xxl | 48px |
Motion, stacking, opacity, and link-decoration tokens (18 variables)
Use these when you need the framework's default easing curves, motion durations, z-index baselines, or standard opacity values.
| Variable | Default value |
|---|---|
--vef-motion-ease-out-circ | cubic-bezier(0.08, 0.82, 0.17, 1) |
--vef-motion-ease-in-out-circ | cubic-bezier(0.78, 0.14, 0.15, 0.86) |
--vef-motion-ease-out | cubic-bezier(0.215, 0.61, 0.355, 1) |
--vef-motion-ease-in-out | cubic-bezier(0.645, 0.045, 0.355, 1) |
--vef-motion-ease-out-back | cubic-bezier(0.12, 0.4, 0.29, 1.46) |
--vef-motion-ease-in-back | cubic-bezier(0.71, -0.46, 0.88, 0.6) |
--vef-motion-ease-in-quint | cubic-bezier(0.755, 0.05, 0.855, 0.06) |
--vef-motion-ease-out-quint | cubic-bezier(0.23, 1, 0.32, 1) |
--vef-z-index-base | 0 |
--vef-z-index-popup-base | 1000 |
--vef-opacity-image | 1 |
--vef-motion-duration-fast | 0.1s |
--vef-motion-duration-mid | 0.2s |
--vef-motion-duration-slow | 0.3s |
--vef-opacity-loading | 0.65 |
--vef-link-decoration | none |
--vef-link-hover-decoration | none |
--vef-link-focus-decoration | none |
Box-shadow aliases (13 variables)
These are higher-level shadow tokens used by overlays, drawers, cards, and overflow affordances.
| Variable | Default value |
|---|---|
--vef-box-shadow | 0 2px 8px 0 rgba(0, 0, 0, 0.05), 0 1px 3px -1px rgba(0, 0, 0, 0.03), 0 4px 12px 4px rgba(0, 0, 0, 0.02) |
--vef-box-shadow-secondary | 0 0 0 1px rgba(0, 0, 0, 0.03), 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.06), 0 9px 28px 8px rgba(0, 0, 0, 0.04) |
--vef-box-shadow-tertiary | 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 2px 8px -2px rgba(0, 0, 0, 0.04), 0 4px 12px 0 rgba(0, 0, 0, 0.03) |
--vef-box-shadow-popover-arrow | 2px 2px 5px rgba(0, 0, 0, 0.05) |
--vef-box-shadow-card | 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0 3px 6px 0 rgba(0, 0, 0, 0.12), 0 5px 12px 4px rgba(0, 0, 0, 0.09) |
--vef-box-shadow-drawer-right | -6px 0 16px 0 rgba(0, 0, 0, 0.08), -3px 0 6px -4px rgba(0, 0, 0, 0.12), -9px 0 28px 8px rgba(0, 0, 0, 0.05) |
--vef-box-shadow-drawer-left | 6px 0 16px 0 rgba(0, 0, 0, 0.08), 3px 0 6px -4px rgba(0, 0, 0, 0.12), 9px 0 28px 8px rgba(0, 0, 0, 0.05) |
--vef-box-shadow-drawer-up | 0 6px 16px 0 rgba(0, 0, 0, 0.08), 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0 9px 28px 8px rgba(0, 0, 0, 0.05) |
--vef-box-shadow-drawer-down | 0 -6px 16px 0 rgba(0, 0, 0, 0.08), 0 -3px 6px -4px rgba(0, 0, 0, 0.12), 0 -9px 28px 8px rgba(0, 0, 0, 0.05) |
--vef-box-shadow-tabs-overflow-left | inset 10px 0 8px -8px rgba(0, 0, 0, 0.08) |
--vef-box-shadow-tabs-overflow-right | inset -10px 0 8px -8px rgba(0, 0, 0, 0.08) |
--vef-box-shadow-tabs-overflow-top | inset 0 10px 8px -8px rgba(0, 0, 0, 0.08) |
--vef-box-shadow-tabs-overflow-bottom | inset 0 -10px 8px -8px rgba(0, 0, 0, 0.08) |