CSS Variables Reference
This page documents the VEF CSS custom properties intended for day-to-day styling work. It covers 701 variables and focuses on the usage contract: which token family to reach for, where to read it from, and how to keep page styles aligned with the framework.
tip
If your app is bootstrapped through starter.createApp().render(), these variables are already injected onto :root. If you mount the component layer manually, keep @vef-framework-react/components ConfigProvider in place so the global variables are emitted.
note
The values below reflect the default theme output. Theme overrides and dark mode can change semantic tokens such as --vef-color-primary*, surface tokens, and text tokens. Build against the variable names, not against the sample hex values.
Choosing the right entry point
VEF exposes the same design language through three different access paths:
- Use raw CSS variables such as
var(--vef-color-primary)in CSS Modules, SCSS, third-party stylesheet overrides, or MDX snippets. - Use
globalCssVarsin Emotion and other JS object styles when you want the same token without repeating string literals. - Use
useThemeTokens()when a value must be consumed in JavaScript logic or passed to a library that expects a resolved color or size value at render time.
Recommended usage patterns
| Need | Prefer | Why |
|---|---|---|
| Page spacing, card padding, and section rhythm | --vef-spacing-*, --vef-padding-*, --vef-margin-* | Keeps layout rhythm consistent with framework components. |
| Primary actions, links, and selected states | --vef-color-primary, --vef-color-primary-hover, --vef-color-primary-active, --vef-color-primary-text | Stays aligned with theme overrides and dark-mode behavior. |
| Neutral panels, cards, and page chrome | --vef-color-bg-container, --vef-color-bg-layout, --vef-color-border, --vef-shadow-*, --vef-border-radius* | Matches the framework shell and default component surfaces. |
| Muted, secondary, and descriptive text | --vef-color-text, --vef-color-text-secondary, --vef-color-text-tertiary, --vef-color-text-description | Avoids ad-hoc opacity tuning and keeps contrast consistent. |
| Validation and status messaging | --vef-color-success-*, --vef-color-warning-*, --vef-color-error-*, --vef-color-info-* | Gives you matching background, border, and text states out of the box. |
| Charts, illustrations, and multicolor accents | --vef-color-blue-50..950, --vef-color-emerald-50..950, or the preset --vef-blue-1..10 style families | Provides broader ramps than semantic status tokens. |
| CSS-in-JS styles written in TS/JS | globalCssVars.* | Avoids repeating raw var(--vef-...) strings in Emotion objects. |
Raw CSS variable usage
Use raw variables when your style lives directly in CSS, SCSS, or a 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);
}
This is the best default for:
- CSS Modules used by page routes
- SCSS files that restyle framework components
- MDX examples and site-level styles
- CSS authored for third-party widgets that do not know about
globalCssVars
globalCssVars in Emotion or object styles
globalCssVars is the JS/TS alias layer exported by @vef-framework-react/components. It maps CSS variable names into camelCase fields, for example:
| CSS custom property | JS alias |
|---|---|
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
});
Use this when your style already lives in TS or JS. It keeps the token name consistent with the framework while avoiding raw string repetition.
useThemeTokens() for runtime values
useThemeTokens() returns the resolved Ant Design token object for the current theme. Reach for it when a runtime library needs concrete values rather than CSS variable strings.
import { useThemeTokens } from "@vef-framework-react/components";
export function MetricsChart() {
const { colorPrimary, colorTextSecondary } = useThemeTokens();
return (
<MyChart
palette={[colorPrimary, colorTextSecondary]}
/>
);
}
Typical cases:
- chart libraries configured from JS
- canvas drawing
- runtime color calculations
- conditional logic based on current theme output
Naming model
The variable catalog is easier to navigate once the families are clear:
--vef-color-primary-*,--vef-color-success-*, and similar semantic ramps are the first choice for meaning-driven styling.--vef-color-blue-*,--vef-color-emerald-*, and other extended ramps are useful when you need a named color family rather than a semantic intent.--vef-blue-1..10,--vef-purple-1..10, and similar preset scales follow the Ant Design-style palette numbering.--vef-color-text*,--vef-color-bg*,--vef-color-fill*, and--vef-color-border*are neutral UI surface tokens.--vef-spacing-*,--vef-padding-*,--vef-margin-*,--vef-border-radius*, and--vef-shadow-*are layout and elevation primitives.
info
This page focuses on global design tokens. Component-scoped override variables such as --vef-card-body-padding are still valid when a component documents them, but they are not part of this shared global token catalog.
Full catalog
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) |