Claritas

Keirost Claritas es el sistema de diseño de Keirost. Se distribuye como el paquete npm @openfactu/ui: 77 componentes React, 18 hooks y un motor de temas que deriva una interfaz completa a partir de dos colores.

npm install @openfactu/ui

import { Button, Table, Card } from '@openfactu/ui';

Es el mismo paquete que usa el propio ERP, así que un plugin que lo utilice se ve exactamente igual que el core, incluido el tema que haya elegido cada empresa.

Los dos principios

Los componentes no llevan colores, llevan tokens

Ningún componente tiene un hex escrito. Todos apuntan a variables CSS, y por eso cambiar el tema de una empresa entera es reescribir unas cuantas variables sobre <html> — no recompilar nada.

Un tema son dos colores y un modo

El resto se deriva: los estados de hover, los colores de texto contrastados, las superficies del modo oscuro y la escala del acento. Todo lo derivado se puede sobreescribir, pero rara vez hace falta.

import { applyTheme } from '@openfactu/ui';

applyTheme({
  mode: 'dark',
  colors: { primary: '#1E102C', accent: '#EC4899' },
});

Las dos capas de color

Esta es la distinción que más confusión causa, así que conviene tenerla clara antes de escribir el primer componente.

Capa	Tokens	Comportamiento
Paleta fija	`--k-ink-*`, `--k-line`, `--k-surface`	No cambia con el modo. Sirve igual para texto que para fondos (el degradado del `Avatar`, por ejemplo).
Capa semántica	`--bg-`, `--fg-`, `--border-*`	Responde al modo claro/oscuro. Es a la que deben apuntar tus componentes.

Para elegir el color de un texto:

Token	Para qué
`--fg-default`	Títulos y texto principal
`--fg-body`	Texto corriente
`--fg-muted`	Texto secundario, metadatos
`--fg-subtle`	Marcadores de posición, iconos, texto de ayuda

Lo mismo con los colores de estado: --k-danger es para rellenos y marcas; como texto va --k-danger-fg, que en modo oscuro sube el tono para seguir siendo legible.

Índice de componentes

Botones y accionesButton, DropdownMenu, ContextMenu, SegmentedControl, BulkActionsBar

FormulariosForm, Input, Select, SearchableSelect, DatePicker, FileDropzone y 11 más

Datos y tablasTable, EditableTable, List, Pagination, FilterBar, KpiCard, Card, Badge, Avatar

NavegaciónNavMenu, Tabs, Breadcrumbs, PageHeader, CommandPalette, SearchTrigger

PlanificaciónCalendar, Kanban, Gantt, Timeline, Stepper

Feedback y estadoLoader, Skeleton, Progress, Ring, EmptyState, Toast, Transition

OverlaysModal, Drawer, ConfirmDialog, Popup, Tooltip, Accordion

GráficosChart, Sparkline, StackedBar y la paleta de series

HooksLos 18 hooks de la librería

TemasapplyTheme, presets, registro de temas de plugin

RecetasPantallas completas montadas con varios componentes

Listado completo

Categoría	Componentes
Botones y acciones	`Button` · `DropdownMenu` · `ContextMenu` · `SegmentedControl` · `BulkActionsBar`
Formularios	`Form` · `Field` · `FormSection` · `FormGrid` · `FormRow` · `Input` · `Textarea` · `Select` · `SearchableSelect` · `NumberInput` · `CurrencyInput` · `PercentInput` · `PasswordInput` · `SearchInput` · `Checkbox` · `Switch` · `RadioGroup` · `DatePicker` · `ColorInput` · `FileDropzone`
Datos y tablas	`Table` · `EditableTable` · `List` · `ListItem` · `ListSection` · `Pagination` · `FilterBar` · `KpiCard` · `Card` · `Badge` · `Avatar`
Navegación	`NavMenu` · `NavItem` · `NavGroup` · `Tabs` · `Breadcrumbs` · `PageHeader` · `CommandPalette` · `SearchTrigger`
Planificación	`Calendar` · `Kanban` · `Gantt` · `Timeline` · `Stepper`
Feedback y estado	`Loader` · `GlobalLoader` · `Skeleton` · `SkeletonCard` · `SkeletonList` · `SkeletonTable` · `SkeletonPage` · `DashboardSkeleton` · `Progress` · `Ring` · `EmptyState` · `Toast` · `ToastProvider` · `Transition`
Overlays	`Modal` · `ModalHeader` · `ModalBody` · `ModalFooter` · `Drawer` · `ConfirmDialog` · `Popup` · `PopupProvider` · `PopupFrame` · `Tooltip` · `Accordion`
Gráficos	`Chart` · `Sparkline` · `StackedBar`
Temas	`ThemeProvider` · `UiThemeProvider`

Qué sigue

InstalaciónLos dos pasos de puesta en marcha, y cómo usarlo desde un plugin

RecetasSi prefieres empezar por una pantalla entera y desmontarla