vars

const vars: MapLeafNodes<{ borderRadius: { lg: "etui-radius-lg"; md: "etui-radius-md"; none: "etui-radius-none"; sm: "etui-radius-sm"; }; colors: { accent: { error: "etui-color-accent-error"; primary: "etui-color-accent-primary"; secondary: "etui-color-accent-secondary"; success: "etui-color-accent-success"; warning: "etui-color-accent-warning"; }; backdrop: "etui-color-backdrop"; background: { elevated: "etui-color-bg-elevated"; inset: "etui-color-bg-inset"; primary: "etui-color-bg-primary"; secondary: "etui-color-bg-secondary"; tertiary: "etui-color-bg-tertiary"; }; border: { default: "etui-color-border-default"; error: "etui-color-border-error"; focus: "etui-color-border-focus"; success: "etui-color-border-success"; }; surface: { active: "etui-color-surface-active"; default: "etui-color-surface-default"; disabled: "etui-color-surface-disabled"; hover: "etui-color-surface-hover"; row: "etui-color-surface-row"; rowHover: "etui-color-surface-row-hover"; whiteOverlay: "etui-color-surface-white-overlay"; }; text: { disabled: "etui-color-text-disabled"; muted: "etui-color-text-muted"; primary: "etui-color-text-primary"; secondary: "etui-color-text-secondary"; }; }; demo: { canvas: { gradientEnd: "etui-demo-gradient-end"; gradientMid: "etui-demo-gradient-mid"; gradientStart: "etui-demo-gradient-start"; }; }; shadows: { focus: "etui-shadow-focus"; lg: "etui-shadow-lg"; md: "etui-shadow-md"; separatorBottom: "etui-shadow-separator-bottom"; separatorLeft: "etui-shadow-separator-left"; separatorRight: "etui-shadow-separator-right"; sm: "etui-shadow-sm"; thumb: "etui-shadow-thumb"; xl: "etui-shadow-xl"; }; shell: { dock: { borderBarBg: "etui-shell-dock-border-bar-bg"; borderBarSize: "etui-shell-dock-border-bar-size"; dropOverlay: "etui-shell-dock-drop-overlay"; splitterColor: "etui-shell-dock-splitter-color"; splitterHoverColor: "etui-shell-dock-splitter-hover-color"; splitterSize: "etui-shell-dock-splitter-size"; tabActiveBg: "etui-shell-dock-tab-active-bg"; tabActiveText: "etui-shell-dock-tab-active-text"; tabBg: "etui-shell-dock-tab-bg"; tabHeight: "etui-shell-dock-tab-height"; tabHoverBg: "etui-shell-dock-tab-hover-bg"; tabText: "etui-shell-dock-tab-text"; }; menuBar: { activeBg: "etui-shell-menubar-active-bg"; bg: "etui-shell-menubar-bg"; height: "etui-shell-menubar-height"; hoverBg: "etui-shell-menubar-hover-bg"; shortcutText: "etui-shell-menubar-shortcut-text"; text: "etui-shell-menubar-text"; }; statusBar: { bg: "etui-shell-statusbar-bg"; height: "etui-shell-statusbar-height"; heightMd: "etui-shell-statusbar-height-md"; text: "etui-shell-statusbar-text"; }; toolbar: { bg: "etui-shell-toolbar-bg"; height: { md: "etui-shell-toolbar-height-md"; sm: "etui-shell-toolbar-height-sm"; }; separator: "etui-shell-toolbar-separator"; }; }; spacing: { lg: "etui-spacing-lg"; md: "etui-spacing-md"; sm: "etui-spacing-sm"; xl: "etui-spacing-xl"; xs: "etui-spacing-xs"; xxl: "etui-spacing-xxl"; xxxl: "etui-spacing-xxxl"; }; transitions: { fast: "etui-transition-fast"; normal: "etui-transition-normal"; slow: "etui-transition-slow"; }; typography: { fontFamily: { mono: "etui-font-family-mono"; sans: "etui-font-family-sans"; }; fontSize: { lg: "etui-font-size-lg"; md: "etui-font-size-md"; sm: "etui-font-size-sm"; xl: "etui-font-size-xl"; xs: "etui-font-size-xs"; xxs: "etui-font-size-xxs"; }; fontWeight: { medium: "etui-font-weight-medium"; normal: "etui-font-weight-normal"; semibold: "etui-font-weight-semibold"; }; lineHeight: { normal: "etui-line-height-normal"; relaxed: "etui-line-height-relaxed"; tight: "etui-line-height-tight"; }; }; zIndex: { base: "etui-z-base"; dropdown: "etui-z-dropdown"; modal: "etui-z-modal"; popover: "etui-z-popover"; tooltip: "etui-z-tooltip"; }; }, `var(--${string})`>

Defined in: src/theme/contract.css.ts:26

Theme contract with stable CSS custom property names.

Every value is the CSS custom property name (without —) that will be used in the output CSS. This means consumers can override any token with plain CSS:

.my-brand {
  --etui-color-accent-primary: #ff6600;
}

All property names follow the pattern: etui-{category}-{path} These names are part of the PUBLIC API — do not rename without a major version bump.

The structural data lives in themeContractData.ts so build-time tooling (token export, docs) can import the same shape without pulling in the Vanilla Extract runtime.