Activar FDS

FlowKit integra el Flowtitude Design System (FDS) como capa base de tokens y componentes CSS. Actívalo desde el panel para unificar tipografía, color, espaciado y componentes en el proyecto.

Qué activa el toggle de FDS

Al activar FDS en FlowKit → Tailwind Themes, el child theme:

• Encola el CSS compilado de FDS en frontend y en el editor de Bricks.
• Expone las variables CSS (colores, spacing, tipografía) en :root.
• Registra las clases de componentes (.btn, .card, .heading) como utilidades disponibles en Bricks.
• Añade las custom variants de Tailwind (parent, parent-hover, parent-focus-within).

Cuándo usarlo

• Sí: proyecto nuevo que quiere aprovechar el sistema completo.
• Sí: consolidar varios sitios bajo un mismo lenguaje visual.
• No: proyecto con sistema de diseño propio que no quieres mezclar con FDS.

En ese último caso, deshabilita FDS y usa solo las capas de FlowKit que necesites.

Capas CSS

FlowKit organiza los estilos en capas con @layer, de menor a mayor prioridad:

Cambiar los tokens

Los tokens de FDS se pueden sobrescribir desde tu proyecto sin tocar el core:

/* library/custom/css/overrides.css */
@theme {
  --color-primary-500: oklch(0.55 0.18 250);
  --font-display: "Inter", sans-serif;
}

Diferencia con FDS standalone

FlowKit usa FDS como capa base, pero añade templates, integraciones con WooCommerce y elementos de Bricks. Si solo quieres el sistema de diseño sin el child theme, usa FDS directamente via WindPress.