@beonit/design-system
v0.1.3
Published
Beon Design System — componentes Vue 3 (Reka UI + Tailwind v4) de la plataforma Beon
Readme
@beonit/design-system
Componentes Vue 3 del design system de Beon (Reka UI + Tailwind CSS v4).
Instalación
npm install @beonit/design-systemRequisitos del proyecto consumidor:
- Vue
^3.5 - Tailwind CSS v4 (los componentes usan utilidades de Tailwind; el CSS del paquete se compila con el Tailwind del consumidor)
Uso
/* tu entry CSS */
@import "@beonit/design-system/styles.css";<script setup lang="ts">
import { ArButton } from '@beonit/design-system';
</script>
<template>
<ArButton>Guardar</ArButton>
</template>También hay subpath exports por componente:
import { ArButton } from '@beonit/design-system/button';
import { cn } from '@beonit/design-system/lib/utils';Componentes de formulario (ArForm*)
Los componentes de form integran vee-validate y por eso
NO se exportan desde el barrel raíz: instala vee-validate (peer opcional) e importa por subpath:
import { ArForm, ArFormField } from '@beonit/design-system/form';Theming
El paquete trae el tema Beon como base. Para personalizarlo, sobreescribe las CSS variables en tu propio CSS, después del import del DS:
@import "@beonit/design-system/styles.css";
:root {
--primary: oklch(0.55 0.2 260);
--radius: 0.25rem;
}Tokens principales sobrescribibles:
| Grupo | Tokens |
|---|---|
| Semánticos (shadcn) | --background --foreground --primary --primary-foreground --secondary --secondary-foreground --accent --muted --destructive --border --input --ring --card --popover --sidebar-* --chart-1..5 |
| Radios | --radius (los --radius-sm..4xl derivan de él) |
| Marca (capa Beon) | --brand-green --brand-blue --brand-magenta --brand-orange --brand-red --brand-yellow --gradient-brand* |
| Plataforma | --p-primary --p-primary-ink --p-secondary --p-accent --c-bg --c-surface --c-ink --c-line --c-danger --c-success --c-warning --c-info |
| Tenant | --customer-primary --customer-secondary |
| Tipografía | --font-corporate --font-product --font-display --font-mono --fs-* |
Modo oscuro: añade la clase dark al elemento raíz (<html class="dark">).
Desarrollo
pnpm install
pnpm test # vitest + @vue/test-utils
pnpm build # dist/ (ESM + d.ts)Releases con changesets: añade un changeset en tu PR
(pnpm changeset); al mergear a main, el workflow de release versiona y publica en npm.