@fultra/design-system

Sistema de diseño de Fultra — librería de componentes Angular para alinear el UI de todos los sistemas de la empresa. +57 componentes, tema claro/oscuro, tipografía Geist y tokens semánticos.

Arquitectura: comportamiento nativo — @angular/cdk (bidi, coerción, observadores) aporta las primitivas de primera parte; la accesibilidad/teclado/roving-tabindex de listbox y tabs, el positioning, las animaciones y el estado son lógica propia sobre plataforma web (signals, popover, CSS anchor positioning, <dialog>, <details>). Los componentes fx-* aportan el estilo (Tailwind + tokens Fultra). Tú controlas el look al 100% — ninguna librería de terceros te impone su CSS ni su comportamiento. Sin Angular Material, PrimeNG, spartan-ng ni @angular/aria.

Instalación

npm i @fultra/design-system @angular/cdk

tailwind-merge y tw-animate-css se instalan solos (dependencias directas del paquete). Requiere Angular 19+ (piso real fijado por linkedSignal(), usado internamente en varios componentes) y Tailwind CSS v4.

v1.0 — cambio mayor de tokens

La escala tipográfica, los radios y las sombras cambian de nombre, y el tema borra la configuración de Tailwind: text-sm, rounded-xl, shadow-lg y bg-red-500 ya no compilan. Guía de migración completa en SISTEMA-v1.md.

| | | |---|---| | Tipografía | text-micro · text-caption · text-base (14 px, cuerpo) · text-lead · text-title · text-figure | | Radios | rounded-sm 4 · rounded-md 6 · rounded-lg 8 | | Sombras | shadow-menu · shadow-float — el resto se separa con un borde de 1 px | | Alturas | --height-control{,-xs,-sm,-lg}, --height-row, --height-nav-item, … | | Densidad | <html data-density="compact"> | | Utilidades | fx-figure (cifras tabulares) · fx-overline (versalita) · fx-selected-accent |

Dos verificadores, encadenados a build:lib:

npm run verificar          # tokens + contraste

• verificar:tokens — rechaza colores crudos, escalas muertas, px literales y alturas sin token.
• verificar:contraste — recalcula el contraste WCAG de las 14 parejas del sistema y el gamut sRGB.

Configuración

1. Tema — en tu styles.css:

@import 'tailwindcss';
@import '@fultra/design-system/styles/theme.css';
@source '@fultra/design-system';

2. Providers — en app.config.ts:

import { provideFultraTheme, provideFultraOverlay } from '@fultra/design-system';

export const appConfig = {
  providers: [provideFultraTheme({ defaultMode: 'light' }), provideFultraOverlay()],
};

Uso

Cada componente es un secondary entry point standalone:

import { FxButton } from '@fultra/design-system/button';
import { FxBadge } from '@fultra/design-system/badge';

@Component({
  imports: [FxButton, FxBadge],
  template: `
    <button fxBtn variant="primary">Nuevo pedido</button>
    <span fxBadge variant="success">Completado</span>
  `,
})
export class Demo {}

Configurable en 3 capas: variantes por input (variant, size) · override por clase Tailwind (class="..." gana vía tailwind-merge) · tema por tokens CSS (:root / .dark).

Tema claro/oscuro

import { FxThemeService } from '@fultra/design-system';
private theme = inject(FxThemeService);
this.theme.toggle();   // claro <-> oscuro

Piezas de nivel aplicación

App shell — sidebar + navbar + responsive en un componente:

import { FxAppShellImports } from '@fultra/design-system/app-shell';
// <fx-app-shell brand="CRM" [nav]="nav" [user]="user"><router-outlet /></fx-app-shell>

Data table — grid server-side con orden, filtros por columna, selección, export y reload() para CRUD:

import { FxDataTableImports, type FxColumn, type FxDataSource } from '@fultra/design-system/data-table';
// <fx-data-table [columns]="columns" [dataSource]="api" selectable exportable />

Componentes

Formularios: button · input · input-group · input-number · textarea · label · checkbox · radio-group · switch · select · combobox · slider · toggle · toggle-group · rating · password-strength · file-upload · date-picker · calendar

Navegación: app-shell · sidebar · navbar · toolbar · breadcrumb · tabs · menubar · navigation-menu · stepper · pagination · page-header

Botones e indicadores: badge · status-badge · chips · split-button · progress · spinner · skeleton · meter-group

Overlays: dialog · sheet · popover · tooltip · hover-card · dropdown-menu · command · sonner (toast)

Datos y layout: card · stat-card · table · data-table · list · separator · accordion · collapsible · tree · timeline · avatar · aspect-ratio · grid-list · alert · login

Peer dependencies

@angular/core|common|forms ^19 || ^20 || ^21 · @angular/cdk ^19 || ^20 || ^21

Licencia

MIT © Fultra