@robosophy/prime-theme

Preset y overrides de tema para PrimeVue y PrimeReact de Robosophy.

Este paquete instala @robosophy/tokens como dependencia. Por eso, al instalar @robosophy/prime-theme tambien queda disponible el contexto de tokens para desarrolladores y agentes de IA:

• node_modules/@robosophy/tokens/AGENTS.md
• node_modules/@robosophy/tokens/dist/ai-context.md
• node_modules/@robosophy/tokens/dist/tokens.md
• node_modules/@robosophy/tokens/dist/tokens.json

Instalacion

npm install @robosophy/prime-theme primevue
# o para React:
npm install @robosophy/prime-theme primereact

Uso con Vue

Vue usa @primeuix/themes para aplicar el preset directamente:

import PrimeVue from "primevue/config";
import RobosophyPreset from "@robosophy/prime-theme";
import "@robosophy/prime-theme/prime-layers.css";

app.use(PrimeVue, {
  theme: {
    preset: RobosophyPreset,
  },
});

El archivo prime-layers.css configura los CSS Cascade Layers automáticamente, permitiendo que los estilos de tu aplicación sobrescriban los del design system si es necesario.

Uso con React

PrimeReact 10 no usa @primeuix/themes como Vue. En su lugar, usa un sistema de temas CSS. Para configurar los CSS Cascade Layers correctamente, necesitas crear un archivo CSS local en tu aplicación.

Configuración de layers

Crea un archivo layers.css en tu aplicación:

/* layers.css */
@layer prime-base, prime-design;
@import "primereact/resources/themes/fluent-light/theme.css" layer(prime-base);
@import "@robosophy/prime-theme/prime.css" layer(prime-design);

Luego importa este archivo en tu aplicación:

import { PrimeReactProvider } from "primereact/api";
import "./layers.css";

function MyApp({ Component, pageProps }) {
  return (
    <PrimeReactProvider>
      <Component {...pageProps} />
    </PrimeReactProvider>
  );
}

Tema base requerido

Solo fluent-light es compatible con los overrides de Robosophy.

CSS Cascade Layers

Los estilos están organizados en layers para permitir que las aplicaciones sobrescriban los estilos del design system:

Layer "prime-base" (menor prioridad) ← Tema base de PrimeReact (fluent-light)
Layer "prime-design" (mayor prioridad) ← Design system de Robosophy
Sin layer (máxima prioridad) ← Estilos de tu aplicación

Si necesitas sobrescribir estilos del design system en tu aplicación, simplemente escribe tus estilos CSS sin usar @layer. Estos tendrán mayor prioridad que los estilos de prime-design.

Ejemplo:

/* En tu aplicación */
.p-button {
  border-radius: 12px; /* Esto sobrescribirá el border-radius del design system */
}

Componentes cubiertos

prime.css aplica estilos a: buttons, inputs, selects, tabs, menus, dialogs, tooltips, messages, toasts, datatables, checkboxes, radios, drawers/sidebars, file uploads, password, icons, chips, badges, tags.

Notas importantes

No importes @robosophy/tokens/tokens.css por separado en apps con PrimeVue o PrimeReact. prime-layers.css (o prime.css en React) ya importa los tokens y no es necesario duplicarlos.

Si tambien usas @robosophy/ui-vue o @robosophy/ui-react, importa este preset y los archivos CSS una sola vez en la app. Los componentes usan las mismas variables --rs-*.

Archivos CSS disponibles

• prime-layers.css: para aplicaciones Vue. Configura los layers e importa los estilos del design system.
• prime.css: archivo base con los estilos del design system. Para Vue, usa prime-layers.css. Para React, úsalo en tu archivo layers.css local como se muestra arriba.

Compatibilidad de navegadores

Los CSS Cascade Layers son soportados desde:

• Chrome 99 (marzo 2022)
• Firefox 97 (marzo 2022)
• Safari 15.4 (marzo 2022)
• Edge 99 (marzo 2022)