Design Tokens

Esta pagina documenta la superficie publica de tokens Sass que Nuvex UI expone mediante setting.scss y como sobreescribir esos tokens desde assets/styles/variables.scss.

De tokens Sass a CSS variables

  • Los tokens Sass simples que expone setting.scss se exportan como CSS variables con la forma --e-{token}. Por ejemplo, $border-radius-root termina en --e-border-radius-root.
  • Los mapas semanticos de tema terminan en variables como --e-color-{clave}, --e-contrast-{clave} y --e-text-{clave}, segun el grupo que framework.scss emite para light y dark.
  • La primitive palette genera variables como --e-palette-{familia}, --e-palette-{familia}-{tono} y sus pares de contraste. Esta pagina se centra en los tokens Sass que originan esas variables; la pagina de CSS Variables cubre el consumo final en cascada.

Sobrescribe tokens en Vue y Nuxt

Los overrides de build-time viven en assets/styles/variables.scss. Configura nuvex-ui/setting.scss ahi con @use ... with (...), y luego inyecta ese archivo antes de que framework.scss se compile en Vue o Nuxt.

Esta seccion trata solo de tokens Sass. Las CSS custom properties generadas a partir de esos tokens se documentan aparte en la pagina de CSS Variables.

vite.config.ts

nuxt.config.ts

assets/styles/variables.scss

Referencia de tokens del framework

Usa esta referencia agrupada como inventario publico Sass expuesto por nuvex-ui/setting.scss. Cada grupo corresponde a los tokens que puedes sobreescribir desde assets/styles/variables.scss antes de compilar framework.scss.

nuvex-ui/setting.scss public Sass inventory

Siguientes pasos recomendados

Continua con la pagina que mejor encaje con la accion siguiente despues de elegir la familia correcta de tokens.