@jumbo/design-tokens

Fuente de verdad de los tokens visuales del Design System de Jumbo Colombia.

Instalación

# En un proyecto con acceso a GitHub Packages
npm install @jumbo/design-tokens
# o
pnpm add @jumbo/design-tokens

Uso básico

import { vars, lightTheme, darkTheme, primitives } from '@jumbo/design-tokens'

// Aplicar el tema claro al root de la app
document.documentElement.className = lightTheme

// Acceder a tokens en un archivo .css.ts (vanilla-extract)
import { style } from '@vanilla-extract/css'
import { vars } from '@jumbo/design-tokens'

const myClass = style({
  color: vars.color.text,
  backgroundColor: vars.color.background,
  fontFamily: vars.font.body,
  borderRadius: vars.radius.md,
})

Importar estilos

Los temas generan clases CSS que deben ser importadas para funcionar:

// En el entry point de tu aplicación
import '@jumbo/design-tokens/styles'

Tokens disponibles

| Categoría | Tokens | |-----------|--------| | vars.color | background, surface, surfaceHover, border, borderFocus, text, textMuted, textDisabled, brand, brandHover, brandSubtle, success, successSubtle, warning, warningSubtle, danger, dangerSubtle | | vars.space | sm, md, lg, xl | | vars.radius | sm, md, lg, full | | vars.font | body, display | | vars.shadow | sm, md, lg | | vars.transition | fast, normal |

Temas

import { lightTheme, darkTheme } from '@jumbo/design-tokens'

// Aplicar en el elemento raíz
<div className={lightTheme}>
  {/* contenido con tema claro */}
</div>

<div className={darkTheme}>
  {/* contenido con tema oscuro */}
</div>