Tokens

Tokens Semánticos

Los tokens semánticos expresan intención de uso, no valores brutos. Son la capa que los componentes deben referenciar. Están definidos como referencias a tokens primitivos para facilitar theming futuro.

ExtraídoNivel 2 de 4 — 5 grupos · 26 tokens

Primitive→Semantic→Contextual→Component

brand

color.semantic.brand.*

Colores de marca — verde UPAX. Usa brand-primary para acciones principales.

primary

--ds-color-semantic-brand-primary

referencia

color.primitive.green.500

#008650

primary-light

--ds-color-semantic-brand-primary-light

referencia

color.primitive.green.300

#52bd83

primary-lighter

--ds-color-semantic-brand-primary-lighter

referencia

color.primitive.green.200

#6fda9d

primary-hover

--ds-color-semantic-brand-primary-hover

referencia

color.primitive.green.600

#006e41

primary-active

--ds-color-semantic-brand-primary-active

referencia

color.primitive.green.700

#005532

text

color.semantic.text.*

Colores de texto. Usa text-primary para cuerpo, text-secondary para metadata.

primary

--ds-color-semantic-text-primary

referencia

color.primitive.gray.900

#0a121b

secondary

--ds-color-semantic-text-secondary

referencia

color.primitive.gray.700

#3d3d3f

tertiary

--ds-color-semantic-text-tertiary

referencia

color.primitive.gray.500

#9e9e9e

disabled

--ds-color-semantic-text-disabled

referencia

color.primitive.gray.300

#a9abae

inverse

--ds-color-semantic-text-inverse

referencia

color.primitive.gray.0

#ffffff

brand

--ds-color-semantic-text-brand

referencia

color.primitive.green.500

#008650

background

color.semantic.background.*

Superficies de pantalla. background-secondary es el fondo base de la app.

primary

--ds-color-semantic-background-primary

referencia

color.primitive.gray.0

#ffffff

secondary

--ds-color-semantic-background-secondary

referencia

color.primitive.gray.100

#f4f5f7

tertiary

--ds-color-semantic-background-tertiary

referencia

color.primitive.gray.50

#f8f7f7

brand

--ds-color-semantic-background-brand

referencia

color.primitive.green.500

#008650

brand-sub

--ds-color-semantic-background-brand-sub

referencia

color.primitive.green.200

#6fda9d

border

color.semantic.border.*

Bordes y separadores. border-focus es exclusivo para estados de foco (accesibilidad).

default

--ds-color-semantic-border-default

referencia

color.primitive.gray.200

#c8c8c8

strong

--ds-color-semantic-border-strong

referencia

color.primitive.gray.500

#9e9e9e

brand

--ds-color-semantic-border-brand

referencia

color.primitive.green.500

#008650

focus

--ds-color-semantic-border-focus

referencia

color.primitive.blue.600

#2065b0

feedback

color.semantic.feedback.*

Estados de sistema: éxito, error, advertencia, información y Cobranza (flujo amarillo).

success

--ds-color-semantic-feedback-success

referencia

color.primitive.green.500

#008650

success-bg

--ds-color-semantic-feedback-success-bg

referencia

color.primitive.green.50

#e6f7ee

error

--ds-color-semantic-feedback-error

referencia

color.primitive.red.500

#e53535

error-bg

--ds-color-semantic-feedback-error-bg

referencia

color.primitive.red.100

#fde8e8

warning

--ds-color-semantic-feedback-warning

referencia

color.primitive.yellow.400

#ffca28

warning-bg

--ds-color-semantic-feedback-warning-bg

referencia

color.primitive.yellow.100

#fff8e1

info

--ds-color-semantic-feedback-info

referencia

color.primitive.blue.600

#2065b0

info-bg

--ds-color-semantic-feedback-info-bg

referencia

color.primitive.blue.100

#e8f0fa

cobranza

--ds-color-semantic-feedback-cobranza

referencia

color.primitive.yellow.500

#f5a623

Uso en CSS

/* ✓ Correcto — token semántico */
.btn-primary {
  background: var(--ds-color-semantic-brand-primary);
  color: var(--ds-color-semantic-text-inverse);
}

.input:focus {
  border-color: var(--ds-color-semantic-border-focus);
}

.error-msg {
  color: var(--ds-color-semantic-feedback-error);
  background: var(--ds-color-semantic-feedback-error-bg);
}

/* ✗ Incorrecto — token primitivo en componente */
.btn-primary {
  background: var(--ds-color-primitive-green-500); /* NO */
}