Design Tokens
This page documents the public Sass token surface exposed by Nuvex UI through setting.scss and how to override those tokens from assets/styles/variables.scss.
From Sass tokens to CSS variables
- Simple Sass tokens exposed by
setting.scssare exported as CSS variables using the--e-{token}pattern. For example,$border-radius-rootbecomes--e-border-radius-root. - Semantic theme maps become variables such as
--e-color-{key},--e-contrast-{key}, and--e-text-{key}, according to the group emitted byframework.scssforlightanddarkthemes. - Primitive palette maps generate variables such as
--e-palette-{family},--e-palette-{family}-{tone}, and their contrast pairs. This page focuses on the Sass tokens that produce those variables; the CSS Variables page covers final cascade usage.
Override tokens in Vue and Nuxt
Build-time overrides belong in assets/styles/variables.scss. Configure nuvex-ui/setting.scss there with @use ... with (...), then inject that file before framework.scss is processed in Vue or Nuxt.
This section is about Sass tokens only. The CSS custom properties generated from those tokens are documented separately in the CSS Variables page.
vite.config.ts
nuxt.config.ts
assets/styles/variables.scss
Framework token reference
Use this grouped reference as the public Sass inventory exposed by nuvex-ui/setting.scss. Each group maps to the tokens you can override from assets/styles/variables.scss before framework.scss is compiled.
nuvex-ui/setting.scss public Sass inventory
Recommended next steps
Continue with the page that best matches the next action after you choose the correct token family.