Volver

Design Tokens

Variables CSS para mantener consistencia visual en tu proyecto.
Colores, tipografía, espaciado y efectos listos para usar.

Colores Tipografía Espaciado Efectos

Instalación

Los tokens se incluyen automáticamente con los componentes. También puedes importarlos por separado:

JavaScript / Bundler

main.js 
// Import only CSS tokens
import 'sagebox/dist/sagebox/styles/tokens.css';

// Or import all SageBox CSS (includes tokens)
import 'sagebox/dist/sagebox/sagebox.css';

HTML (CDN)

index.html 
<!-- From unpkg -->
<link rel="stylesheet" href="https://unpkg.com/sagebox/dist/sagebox/styles/tokens.css">

<!-- Or from jsDelivr -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sagebox/dist/sagebox/styles/tokens.css">

CSS @import

styles.css 
/* If using a bundler like Vite, Webpack, etc. */
@import 'sagebox/dist/sagebox/styles/tokens.css';

Colores

Acento

Light
Dark
--accent Primary accent color
Light
Dark
--accent-hover Accent on hover
Light
Dark
--accent-soft Soft accent background
Light
Dark
--accent-text Text on accent background

Fondos

Light
Dark
--bg Main background
Light
Dark
--bg-muted Muted background
Light
Dark
--surface Card surface
Light
Dark
--surface-elevated Elevated surface
Light
Dark
--surface-hover Surface on hover

Texto

Light
Dark
--text Primary text
Light
Dark
--text-muted Secondary text
Light
Dark
--text-subtle Subtle text

Semánticos

Light
Dark
--success Success / Positive
Light
Dark
--warning Warning
Light
Dark
--danger Error / Danger

Tipografía

Familias

Aa Bb Cc 123
--font-sans Primary typography
Aa Bb Cc 123
--font-mono Code and data

Tamaños

Tamaño Pixels Uso Preview
0.625rem 10px Micro text Sample
0.75rem 12px Small text, labels Sample
0.8125rem 13px Secondary text Sample
0.875rem 14px UI base text Sample
1rem 16px Body text Sample
1.125rem 18px Large text Sample
1.5rem 24px Heading H3 Sample
2rem 32px Heading H2 Sample
3rem 48px Heading H1 Sample

Espaciado

0.125rem 2px Micro spacing
0.25rem 4px XS spacing
0.5rem 8px SM spacing
0.75rem 12px MD spacing
1rem 16px Base spacing
1.5rem 24px LG spacing
2rem 32px XL spacing
3rem 48px 2XL spacing

Efectos

Border Radius

--radius-xs 4px Small badges, tags
--radius-sm 6px Small buttons, inputs
--radius-md 8px Buttons, small cards
--radius-lg 12px Cards, modals
--radius-xl 16px Large containers

Sombras

--shadow-xs Minimal elevation
--shadow-sm Low elevation
--shadow-md Medium elevation
--shadow-lg High elevation

Transiciones

Hover me
--transition-fast 0.15s ease Micro-interactions
Hover me
--transition-normal 0.2s ease Standard transitions
Hover me
--transition-slow 0.3s ease Smooth animations

Uso en CSS

component.css 
.my-component {
  /* Colors */
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  
  /* Spacing */
  padding: 1rem 1.5rem;
  gap: 0.75rem;
  
  /* Effects */
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  transition: all var(--transition-fast);
}

.my-component:hover {
  background: var(--surface-hover);
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

Figma Library

Descarga el archivo Figma con todos los tokens sincronizados para mantener consistencia entre diseño y desarrollo.

Próximamente