Colores

Nuvex UI organiza el color en tokens semanticos para significado de producto, tokens de superficie para contexto estructural y paletas primitivas para rango tonal. Usa esta pagina para elegir la capa correcta, aplicar helper classes con criterio y consultar las variables CSS detras de cada familia de tokens.

Abrir overview de themingAbrir superficies

Helpers de fondo

Helpers de fondo como .primary o .success aplican color de fondo con el tratamiento de contraste correspondiente desde el sistema de tokens. Usalos para prototipado rapido, enfasis de estado y estados simples de interfaz sin CSS personalizado.

.primary
.secondary
.success
.warning
.error
.info

Helpers de texto

Usa helpers --text cuando la superficie deba mantenerse neutral pero el contenido todavia necesite enfasis semantico o tonal. Estos helpers afectan el color del texto, el caret y la herencia de fill en SVG.

Usa helpers de color de texto para agregar enfasis sin cambiar la superficie que los rodea. Aplica .primary--text en acciones principales, .secondary--text en informacion de apoyo, .success--text en feedback de exito, .warning--text en advertencias, .error--text en errores y .info--text en estados informativos. Cuando un diseno necesite mayor rango tonal, usa helpers primitivos como .blue-500--text, .teal-600--text, .purple-400--text y .neutral-700--text.

Colores semanticos

Usa estos tokens para acciones, feedback y significados de estado que deban mantenerse consistentes en todo el producto.

primary

var(--e-color-primary)

secondary

var(--e-color-secondary)

tertiary

var(--e-color-tertiary)

success

var(--e-color-success)

warning

var(--e-color-warning)

error

var(--e-color-error)

info

var(--e-color-info)

Tokens de superficie y soporte

Usa estos tokens para canvas, paneles, campos, labels, bordes y estados disabled para que las superficies estructurales se mantengan predecibles entre temas.

surface-canvas

var(--e-color-surface-canvas)

surface-base

var(--e-color-surface-base)

surface-raised

var(--e-color-surface-raised)

surface-subtle

var(--e-color-surface-subtle)

input

var(--e-color-input)

label

var(--e-color-label)

disabled

var(--e-color-disabled)

border

var(--e-color-border)

Paletas primitivas

Usa paletas primitivas cuando un diseno necesite mas rango tonal que la capa semantica, ya sea mediante helper classes o referencias directas a variables CSS.

red

red
red-50
red-100
red-200
red-300
red-400
red-500
red-600
red-700
red-800
red-900

pink

pink
pink-50
pink-100
pink-200
pink-300
pink-400
pink-500
pink-600
pink-700
pink-800
pink-900

purple

purple
purple-50
purple-100
purple-200
purple-300
purple-400
purple-500
purple-600
purple-700
purple-800
purple-900

indigo

indigo
indigo-50
indigo-100
indigo-200
indigo-300
indigo-400
indigo-500
indigo-600
indigo-700
indigo-800
indigo-900

blue

blue
blue-50
blue-100
blue-200
blue-300
blue-400
blue-500
blue-600
blue-700
blue-800
blue-900

cyan

cyan
cyan-50
cyan-100
cyan-200
cyan-300
cyan-400
cyan-500
cyan-600
cyan-700
cyan-800
cyan-900

teal

teal
teal-50
teal-100
teal-200
teal-300
teal-400
teal-500
teal-600
teal-700
teal-800
teal-900

green

green
green-50
green-100
green-200
green-300
green-400
green-500
green-600
green-700
green-800
green-900

lime

lime
lime-50
lime-100
lime-200
lime-300
lime-400
lime-500
lime-600
lime-700
lime-800
lime-900

yellow

yellow
yellow-50
yellow-100
yellow-200
yellow-300
yellow-400
yellow-500
yellow-600
yellow-700
yellow-800
yellow-900

amber

amber
amber-50
amber-100
amber-200
amber-300
amber-400
amber-500
amber-600
amber-700
amber-800
amber-900

orange

orange
orange-50
orange-100
orange-200
orange-300
orange-400
orange-500
orange-600
orange-700
orange-800
orange-900

brown

brown
brown-50
brown-100
brown-200
brown-300
brown-400
brown-500
brown-600
brown-700
brown-800
brown-900

neutral

neutral
neutral-50
neutral-100
neutral-200
neutral-300
neutral-400
neutral-500
neutral-600
neutral-700
neutral-800
neutral-900