CSS Variables

This page documents the CSS custom properties that Nuvex UI emits from its Sass tokens. Use them when the change belongs in the cascade, in theme scope, or in a local surface override.

Back to Theming OverviewOpen Design Tokens

Generated from Sass tokens

  • The variables emitted by framework.scss are generated from the public Sass tokens exposed by setting.scss and from the semantic maps of the active theme.
  • If the framework baseline should change for the whole app, go back to Design Tokens and override the source Sass token. If the change only needs cascade or scope, stay at the CSS variable layer.
  • Declare overrides after loading nuvex-ui/framework.scss, either in :root, in a theme selector such as [data-theme="dark"], or inside a local container.

Consume CSS variables in Vue and Nuxt

Keep CSS variable overrides in your app styles after framework.scss is present. Use root-level overrides for app-wide adjustments, theme selectors for light or dark variations, and local selectors when only one surface needs the change.

If the variable you need does not exist, or the value should become the new framework default everywhere, the correct change usually belongs in Design Tokens rather than in another local CSS override.

assets/styles/theme-overrides.css

components/MarketingBanner.vue <style scoped>

Recommended next steps

Continue with the page that matches the next decision after you validate the cascade override.

Design Tokens

Go back there if the override should move to the Sass source of truth instead of staying in app-level CSS.

Light and Dark Themes

Continue there if you need to confirm which variables change with the built-in theme switch.

Runtime Theme API

Move there if the next task is selecting, persisting, or reacting to the active theme at runtime.