Design Tokens

Introducción

KoreUI usa un sistema de design tokens basado en CSS custom properties. Todos los componentes consumen estos tokens, lo que garantiza consistencia visual y facilita la personalización global.

Los tokens se definen en kore-theme.css con valores para light y dark mode. Tailwind v4 los registra automáticamente vía @theme inline, generando clases utilitarias como bg-kore-primary y rounded-kore-md.

Los colores usan el espacio OKLCH (Lightness, Chroma, Hue) para interpolación perceptualmente uniforme. Esto significa que colores con la misma luminosidad realmente se ven igual de brillantes.

Colores semánticos

Seis colores de propósito semántico. Cada uno tiene una variante -fg para texto sobre ese fondo.

primary-fg

Primary

Acciones principales, enlaces, foco

--kore-primary --kore-primary-fg

secondary-fg

Secondary

Acciones secundarias, fondos alternos

--kore-secondary --kore-secondary-fg

accent-fg

Accent

Acentos, highlights, hovers

--kore-accent --kore-accent-fg

destructive-fg

Destructive

Eliminar, errores, peligro

--kore-destructive --kore-destructive-fg

success-fg

Success

Confirmaciones, completado

--kore-success --kore-success-fg

warning-fg

Warning

Advertencias, precaución

--kore-warning --kore-warning-fg

info-fg

Info

Información, notas, tooltips

--kore-info --kore-info-fg

Superficies

Tokens para fondos, texto, bordes y estados interactivos que definen la estructura visual de la interfaz.

bg

--kore-bg / --kore-fg bg-kore-bg, text-kore-fg

Fondo y texto principal de la pagina.

surface

--kore-surface / --kore-surface-fg bg-kore-surface, text-kore-surface-fg

Fondo de tarjetas, modales, paneles elevados.

muted

--kore-muted / --kore-muted-fg bg-kore-muted, text-kore-muted-fg

Fondos secundarios, hovers, placeholders, texto de baja prioridad.

--kore-border border-kore-border

Bordes generales, separadores, dividers.

--kore-input border-kore-input

Borde de inputs, selects, textareas.

--kore-ring ring-kore-ring

Anillo de foco (focus ring) para accesibilidad.

Border radius

Cuatro niveles de border-radius que mantienen consistencia visual en toda la interfaz.

rounded-kore-sm 0.25rem

rounded-kore-md 0.375rem

rounded-kore-lg 0.5rem

rounded-kore-xl 0.75rem

Tokens de radio

:root {
    --kore-radius-sm: 0.25rem;   /* Badges, chips */
    --kore-radius-md: 0.375rem;  /* Inputs, botones */
    --kore-radius-lg: 0.5rem;    /* Cards, dropdowns */
    --kore-radius-xl: 0.75rem;   /* Contenedores grandes */
}

:root {
    --kore-radius-sm: 0.25rem;   /* Badges, chips */
    --kore-radius-md: 0.375rem;  /* Inputs, botones */
    --kore-radius-lg: 0.5rem;    /* Cards, dropdowns */
    --kore-radius-xl: 0.75rem;   /* Contenedores grandes */
}

Animaciones

Variables de animación para transiciones spring y keyframes incluidos en el tema.

Variables de animación

:root {
    /* Spring easing — curva de rebote realista */
    --kore-spring-easing: linear(
        0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%,
        0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%,
        1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1
    );
    --kore-spring-duration: 500ms;
}

:root {
    /* Spring easing — curva de rebote realista */
    --kore-spring-easing: linear(
        0, 0.006, 0.025 2.8%, 0.101 6.1%, 0.539 18.9%, 0.721 25.3%,
        0.849 31.5%, 0.937 38.1%, 0.968 41.8%, 0.991 45.7%,
        1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 85.9%, 1
    );
    --kore-spring-duration: 500ms;
}

El tema tambien incluye keyframes para:

Keyframe / Clase	Descripción
`kore-toast-countdown`	Barra de progreso del toast (scaleX 1 a 0)
`.kore-toast-progress`	Aplica el countdown con duración configurable via `--kore-toast-duration`
`.kore-toast`	Transición spring para entrada/salida de toasts
`kore-progress-stripes`	Barras de progreso con franjas animadas
`kore-progress-indeterminate`	Progreso indeterminado (bounce izquierda a derecha)
`kore-skeleton-shimmer`	Efecto shimmer para skeletons de carga

Registro en Tailwind v4

Los tokens se registran con @theme inline para que Tailwind v4 genere clases utilitarias automáticamente.

kore-theme.css — @theme inline (completo)

@theme inline {
  /* Colores semánticos */
  --color-kore-primary: var(--kore-primary);
  --color-kore-primary-fg: var(--kore-primary-fg);
  --color-kore-secondary: var(--kore-secondary);
  --color-kore-secondary-fg: var(--kore-secondary-fg);
  --color-kore-accent: var(--kore-accent);
  --color-kore-accent-fg: var(--kore-accent-fg);
  --color-kore-destructive: var(--kore-destructive);
  --color-kore-destructive-fg: var(--kore-destructive-fg);
  --color-kore-success: var(--kore-success);
  --color-kore-success-fg: var(--kore-success-fg);
  --color-kore-warning: var(--kore-warning);
  --color-kore-warning-fg: var(--kore-warning-fg);
  --color-kore-info: var(--kore-info);
  --color-kore-info-fg: var(--kore-info-fg);

  /* Superficies */
  --color-kore-bg: var(--kore-bg);
  --color-kore-fg: var(--kore-fg);
  --color-kore-muted: var(--kore-muted);
  --color-kore-muted-fg: var(--kore-muted-fg);
  --color-kore-border: var(--kore-border);
  --color-kore-input: var(--kore-input);
  --color-kore-ring: var(--kore-ring);
  --color-kore-surface: var(--kore-surface);
  --color-kore-surface-fg: var(--kore-surface-fg);

  /* Border radius */
  --radius-kore-sm: var(--kore-radius-sm);
  --radius-kore-md: var(--kore-radius-md);
  --radius-kore-lg: var(--kore-radius-lg);
  --radius-kore-xl: var(--kore-radius-xl);
}

@theme inline {
  /* Colores semánticos */
  --color-kore-primary: var(--kore-primary);
  --color-kore-primary-fg: var(--kore-primary-fg);
  --color-kore-secondary: var(--kore-secondary);
  --color-kore-secondary-fg: var(--kore-secondary-fg);
  --color-kore-accent: var(--kore-accent);
  --color-kore-accent-fg: var(--kore-accent-fg);
  --color-kore-destructive: var(--kore-destructive);
  --color-kore-destructive-fg: var(--kore-destructive-fg);
  --color-kore-success: var(--kore-success);
  --color-kore-success-fg: var(--kore-success-fg);
  --color-kore-warning: var(--kore-warning);
  --color-kore-warning-fg: var(--kore-warning-fg);
  --color-kore-info: var(--kore-info);
  --color-kore-info-fg: var(--kore-info-fg);

  /* Superficies */
  --color-kore-bg: var(--kore-bg);
  --color-kore-fg: var(--kore-fg);
  --color-kore-muted: var(--kore-muted);
  --color-kore-muted-fg: var(--kore-muted-fg);
  --color-kore-border: var(--kore-border);
  --color-kore-input: var(--kore-input);
  --color-kore-ring: var(--kore-ring);
  --color-kore-surface: var(--kore-surface);
  --color-kore-surface-fg: var(--kore-surface-fg);

  /* Border radius */
  --radius-kore-sm: var(--kore-radius-sm);
  --radius-kore-md: var(--kore-radius-md);
  --radius-kore-lg: var(--kore-radius-lg);
  --radius-kore-xl: var(--kore-radius-xl);
}

Nota: La directiva @theme inline es exclusiva de Tailwind v4. Mapea CSS custom properties a tokens de Tailwind, permitiendo que --color-kore-primary genere clases como bg-kore-primary, text-kore-primary, border-kore-primary, etc.

Clases utilitarias

Referencia rápida de las clases Tailwind generadas a partir de los tokens.

Categoría	Ejemplo de clase	Descripción
Background	`bg-kore-primary`, `bg-kore-surface`	Color de fondo
Text	`text-kore-fg`, `text-kore-muted-fg`	Color de texto
Border	`border-kore-border`, `border-kore-input`	Color de borde
Ring	`ring-kore-ring`, `ring-kore-primary`	Anillo de foco
Radius	`rounded-kore-md`, `rounded-kore-lg`	Border radius
Opacidad	`bg-kore-primary/10`, `border-kore-info/30`	Color con opacidad (Tailwind v4 syntax)
Shadow	`shadow-kore-primary`	Color de sombra
Outline	`outline-kore-ring`	Color de outline

Valores Light

Todos los valores de los tokens en el tema claro (light mode).

:root (light mode)

:root {
    /* Colores semánticos */
    --kore-primary: oklch(0.55 0.25 250);
    --kore-primary-fg: oklch(0.98 0 0);
    --kore-secondary: oklch(0.97 0.01 260);
    --kore-secondary-fg: oklch(0.20 0.02 260);
    --kore-accent: oklch(0.92 0.01 260);
    --kore-accent-fg: oklch(0.20 0.02 260);
    --kore-destructive: oklch(0.58 0.25 27);
    --kore-destructive-fg: oklch(0.98 0 0);
    --kore-success: oklch(0.62 0.19 145);
    --kore-success-fg: oklch(0.98 0 0);
    --kore-warning: oklch(0.75 0.18 85);
    --kore-warning-fg: oklch(0.20 0 0);
    --kore-info: oklch(0.62 0.15 250);
    --kore-info-fg: oklch(0.98 0 0);

    /* Superficies */
    --kore-bg: oklch(1 0 0);
    --kore-fg: oklch(0.15 0 0);
    --kore-muted: oklch(0.97 0 0);
    --kore-muted-fg: oklch(0.55 0 0);
    --kore-border: oklch(0.92 0 0);
    --kore-input: oklch(0.92 0 0);
    --kore-ring: oklch(0.55 0.25 250);
    --kore-surface: oklch(1 0 0);
    --kore-surface-fg: oklch(0.15 0 0);

    /* Border radius */
    --kore-radius-sm: 0.25rem;
    --kore-radius-md: 0.375rem;
    --kore-radius-lg: 0.5rem;
    --kore-radius-xl: 0.75rem;
}

:root {
    /* Colores semánticos */
    --kore-primary: oklch(0.55 0.25 250);
    --kore-primary-fg: oklch(0.98 0 0);
    --kore-secondary: oklch(0.97 0.01 260);
    --kore-secondary-fg: oklch(0.20 0.02 260);
    --kore-accent: oklch(0.92 0.01 260);
    --kore-accent-fg: oklch(0.20 0.02 260);
    --kore-destructive: oklch(0.58 0.25 27);
    --kore-destructive-fg: oklch(0.98 0 0);
    --kore-success: oklch(0.62 0.19 145);
    --kore-success-fg: oklch(0.98 0 0);
    --kore-warning: oklch(0.75 0.18 85);
    --kore-warning-fg: oklch(0.20 0 0);
    --kore-info: oklch(0.62 0.15 250);
    --kore-info-fg: oklch(0.98 0 0);

    /* Superficies */
    --kore-bg: oklch(1 0 0);
    --kore-fg: oklch(0.15 0 0);
    --kore-muted: oklch(0.97 0 0);
    --kore-muted-fg: oklch(0.55 0 0);
    --kore-border: oklch(0.92 0 0);
    --kore-input: oklch(0.92 0 0);
    --kore-ring: oklch(0.55 0.25 250);
    --kore-surface: oklch(1 0 0);
    --kore-surface-fg: oklch(0.15 0 0);

    /* Border radius */
    --kore-radius-sm: 0.25rem;
    --kore-radius-md: 0.375rem;
    --kore-radius-lg: 0.5rem;
    --kore-radius-xl: 0.75rem;
}

Valores Dark

Todos los valores de los tokens en el tema oscuro (dark mode).

.dark, [data-theme='dark']

.dark, [data-theme="dark"] {
    /* Colores semánticos */
    --kore-primary: oklch(0.70 0.20 250);
    --kore-primary-fg: oklch(0.15 0 0);
    --kore-secondary: oklch(0.25 0.01 260);
    --kore-secondary-fg: oklch(0.90 0 0);
    --kore-accent: oklch(0.30 0.01 260);
    --kore-accent-fg: oklch(0.90 0 0);
    --kore-destructive: oklch(0.55 0.25 27);
    --kore-destructive-fg: oklch(0.98 0 0);
    --kore-success: oklch(0.58 0.19 145);
    --kore-success-fg: oklch(0.98 0 0);
    --kore-warning: oklch(0.70 0.18 85);
    --kore-warning-fg: oklch(0.20 0 0);
    --kore-info: oklch(0.58 0.15 250);
    --kore-info-fg: oklch(0.98 0 0);

    /* Superficies */
    --kore-bg: oklch(0.13 0 0);
    --kore-fg: oklch(0.93 0 0);
    --kore-muted: oklch(0.20 0 0);
    --kore-muted-fg: oklch(0.65 0 0);
    --kore-border: oklch(0.25 0 0);
    --kore-input: oklch(0.25 0 0);
    --kore-ring: oklch(0.70 0.20 250);
    --kore-surface: oklch(0.17 0 0);
    --kore-surface-fg: oklch(0.93 0 0);
}

.dark, [data-theme="dark"] {
    /* Colores semánticos */
    --kore-primary: oklch(0.70 0.20 250);
    --kore-primary-fg: oklch(0.15 0 0);
    --kore-secondary: oklch(0.25 0.01 260);
    --kore-secondary-fg: oklch(0.90 0 0);
    --kore-accent: oklch(0.30 0.01 260);
    --kore-accent-fg: oklch(0.90 0 0);
    --kore-destructive: oklch(0.55 0.25 27);
    --kore-destructive-fg: oklch(0.98 0 0);
    --kore-success: oklch(0.58 0.19 145);
    --kore-success-fg: oklch(0.98 0 0);
    --kore-warning: oklch(0.70 0.18 85);
    --kore-warning-fg: oklch(0.20 0 0);
    --kore-info: oklch(0.58 0.15 250);
    --kore-info-fg: oklch(0.98 0 0);

    /* Superficies */
    --kore-bg: oklch(0.13 0 0);
    --kore-fg: oklch(0.93 0 0);
    --kore-muted: oklch(0.20 0 0);
    --kore-muted-fg: oklch(0.65 0 0);
    --kore-border: oklch(0.25 0 0);
    --kore-input: oklch(0.25 0 0);
    --kore-ring: oklch(0.70 0.20 250);
    --kore-surface: oklch(0.17 0 0);
    --kore-surface-fg: oklch(0.93 0 0);
}

Personalización

Sobrescribe tokens en tu CSS para adaptar el sistema visual a tu marca.

resources/css/app.css — Ejemplo de personalización

@import 'tailwindcss';
@import '../../vendor/kore-ui/kore-ui/resources/css/kore-theme.css';

@layer base {
  :root {
    /* Cambiar el primary a verde */
    --kore-primary: oklch(0.60 0.20 160);
    --kore-primary-fg: oklch(0.98 0 0);
    --kore-ring: oklch(0.60 0.20 160);

    /* Bordes más redondeados */
    --kore-radius-sm: 0.375rem;
    --kore-radius-md: 0.5rem;
    --kore-radius-lg: 0.75rem;
    --kore-radius-xl: 1rem;
  }

  .dark, [data-theme="dark"] {
    --kore-primary: oklch(0.70 0.18 160);
    --kore-primary-fg: oklch(0.15 0 0);
    --kore-ring: oklch(0.70 0.18 160);
  }
}

@import 'tailwindcss';
@import '../../vendor/kore-ui/kore-ui/resources/css/kore-theme.css';

@layer base {
  :root {
    /* Cambiar el primary a verde */
    --kore-primary: oklch(0.60 0.20 160);
    --kore-primary-fg: oklch(0.98 0 0);
    --kore-ring: oklch(0.60 0.20 160);

    /* Bordes más redondeados */
    --kore-radius-sm: 0.375rem;
    --kore-radius-md: 0.5rem;
    --kore-radius-lg: 0.75rem;
    --kore-radius-xl: 1rem;
  }

  .dark, [data-theme="dark"] {
    --kore-primary: oklch(0.70 0.18 160);
    --kore-primary-fg: oklch(0.15 0 0);
    --kore-ring: oklch(0.70 0.18 160);
  }
}

Importante: Tu CSS debe importarse despues de kore-theme.css para que las sobrescrituras tengan efecto. Ambos deben estar en @layer base para mantener la misma especificidad.

Movimiento reducido

KoreUI respeta automáticamente la preferencia prefers-reduced-motion del sistema operativo.

Soporte de movimiento reducido

@media (prefers-reduced-motion: reduce) {
  :root {
    --kore-spring-easing: ease;
    --kore-spring-duration: 0ms;
  }

  .kore-toast-progress {
    animation-duration: 0.01ms !important;
  }

  .kore-toast {
    transition: none !important;
  }

  .kore-progress-animated,
  .kore-progress-indeterminate {
    animation: none !important;
  }

  .kore-skeleton-shimmer::after {
    animation: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --kore-spring-easing: ease;
    --kore-spring-duration: 0ms;
  }

  .kore-toast-progress {
    animation-duration: 0.01ms !important;
  }

  .kore-toast {
    transition: none !important;
  }

  .kore-progress-animated,
  .kore-progress-indeterminate {
    animation: none !important;
  }

  .kore-skeleton-shimmer::after {
    animation: none !important;
  }
}

Cuando el usuario tiene activada la preferencia de movimiento reducido en su sistema operativo, todas las animaciones spring, las barras de progreso animadas, los shimmers de skeleton y las transiciones de toast se desactivan automaticamente. No necesitas hacer nada adicional.