@robosophy/prime-theme 3.0.2 → 3.1.1

package/README.md

@@ -2,6 +2,8 @@
 
 Preset y overrides de tema para PrimeVue y PrimeReact de Robosophy.
 
+`prime.css` importa los tokens y coloca los overrides de Robosophy en `prime-design`. No configura las layers del framework ni las de la aplicación: cada consumidor define el orden para que el CSS base de Prime quede primero, los overrides de Robosophy después y los estilos propios de la app (sin layer) puedan sobrescribir ambos.
+
 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`
@@ -19,21 +21,57 @@ npm install @robosophy/prime-theme primereact
 
 ## Uso con Vue
 
-Vue usa `@primeuix/themes` para aplicar el preset directamente:
+Vue usa `@primeuix/themes` para aplicar el preset. La app consumidora es responsable de definir el orden de layers y de habilitar la layer runtime de PrimeVue. Importa `prime.css` desde el CSS de la app, después de declarar el orden:
+
+```css
+/* src/layers.css */
+@layer primevue, prime-base, prime-design;
+@import "@robosophy/prime-theme/prime.css";
+```
+
+Registra PrimeVue y su preset en la app:
 
 ```ts
 import PrimeVue from "primevue/config";
 import RobosophyPreset from "@robosophy/prime-theme";
-import "@robosophy/prime-theme/prime-layers.css";
+import "./layers.css";
 
 app.use(PrimeVue, {
   theme: {
     preset: RobosophyPreset,
+    options: {
+      cssLayer: {
+        name: "primevue",
+        order: "primevue, prime-base, prime-design",
+      },
+    },
   },
 });
 ```
 
-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.
+El orden es `primevue` (estilos runtime de PrimeVue), `prime-base` (reservado para un tema base adicional) y `prime-design` (overrides de Robosophy). Los estilos de la aplicación que no estén en una layer tienen mayor prioridad. Prime Theme no incluye ni configura los estilos runtime de PrimeVue: eso queda a cargo de la app.
+
+### Vue con Tailwind CSS v4
+
+Tailwind v4 define `theme`, `base`, `components` y `utilities`. Si se importa junto con PrimeVue, declara el orden global completo para que el reset de `base` no prevalezca sobre los estilos de PrimeVue:
+
+```css
+/* src/layers.css */
+@layer theme, base, primevue, prime-base, prime-design, components, utilities;
+@import "tailwindcss";
+@import "@robosophy/prime-theme/prime.css";
+```
+
+Usa exactamente el mismo orden en la configuración de PrimeVue:
+
+```ts
+cssLayer: {
+  name: "primevue",
+  order: "theme, base, primevue, prime-base, prime-design, components, utilities",
+}
+```
+
+Esto mantiene los estilos runtime de PrimeVue y los overrides de Robosophy por encima del reset de Tailwind, y deja las utilidades de Tailwind con prioridad para ajustes locales. Sin Tailwind, basta el orden corto documentado arriba.
 
 ## Uso con React
 
@@ -41,7 +79,7 @@ PrimeReact 10 no usa `@primeuix/themes` como Vue. En su lugar, usa un sistema de
 
 ### Configuración de layers
 
-Crea un archivo `layers.css` en tu aplicación:
+Crea un archivo CSS de tema en tu aplicación. El tema base de PrimeReact va en `prime-base`; `prime.css` de Robosophy aporta sus reglas en `prime-design`:
 
 ```css
 /* layers.css */
@@ -71,12 +109,12 @@ 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:
+La app consumidora controla el orden de las layers:
 
 ```
 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
+Layer "prime-design" ← Overrides de Prime Theme
+Sin layer (mayor prioridad) ← Estilos de la aplicación consumidora
 ```
 
 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`.
@@ -96,14 +134,14 @@ Ejemplo:
 
 ## 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.
+No importes `@robosophy/tokens/tokens.css` por separado en apps con PrimeVue o PrimeReact cuando ya importas `prime.css`: ese archivo ya incluye los tokens.
 
 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.
+- `prime.css`: importa los tokens y contiene los overrides de Robosophy en `prime-design`. Impórtalo desde el CSS de la app después de declarar el orden de layers.
+- `prime-layers.css`: entry de compatibilidad compartido que importa `prime.css`; no configura las layers runtime de PrimeVue ni el orden global. Las apps nuevas deberían declarar sus layers localmente, sea Vue o React.
 
 ### Compatibilidad de navegadores
 

package/dist/prime-layers.css

@@ -1,15 +1,15 @@
 /* AUTO-GENERATED FILE. DO NOT EDIT MANUALLY. */
 /*
- * Robosophy Prime Theme - Vue Layer Configuration
+ * Robosophy Prime Theme — CSS Cascade Layers para PrimeVue y PrimeReact.
+ * Este entry importa prime.css, que aporta los overrides de Robosophy en
+ * prime-design. La app consumidora define el orden de las layers del framework:
  *
- * Este archivo configura los CSS Cascade Layers para aplicaciones Vue.
- * Importa este archivo en lugar de prime.css directamente.
+ * - primevue: estilos runtime de PrimeVue (configurados por la app)
+ * - prime-base: tema base de PrimeReact o tema base opcional de la app
+ * - prime-design: overrides de Robosophy importados desde prime.css
  *
- * Jerarquía de layers:
- * - prime-base: reservado para futuras extensiones
- * - prime-design: estilos del design system de Robosophy
- *
- * Los estilos de la aplicación que NO estén en un layer tendrán mayor
- * prioridad y podrán sobrescribir los estilos de prime-design.
+ * Los estilos propios de la app sin layer tienen mayor prioridad y pueden
+ * sobrescribir las capas anteriores. Este archivo no configura el runtime
+ * de PrimeVue ni el orden global de las layers.
  */
 @import "./prime.css";

package/dist/prime.css

@@ -11,8 +11,8 @@
  * propio sistema de temas CSS (resources/themes/fluent-light/). Las reglas
  * de clase que usan var(--rs-*) directamente funcionan en ambos frameworks.
  *
- * Este archivo usa CSS Cascade Layers. Todos los estilos están en @layer prime-design
- * para permitir que las aplicaciones sobrescriban estos estilos si es necesario.
+ * Este archivo usa CSS Cascade Layers. Los overrides están en @layer
+ * prime-design; la capa runtime de PrimeVue se configura en la aplicación.
  */
 @import "@robosophy/tokens/tokens.css";
 
@@ -1042,6 +1042,27 @@
 		border-color: transparent;
 		color: var(--rs-color-severity-danger-icon);
 	}
+	/* Link buttons (both): text-style buttons with a persistent underline and no surface. */
+	.p-button.p-button-link,
+	.p-button.p-button-link:not(:disabled):hover,
+	.p-button.p-button-link:not(:disabled):active,
+	.p-button.p-button-link:focus-visible,
+	.p-button-group .p-button.p-button-link,
+	.p-button-group .p-button.p-button-link:not(:disabled):hover,
+	.p-button-group .p-button.p-button-link:not(:disabled):active,
+	.p-splitbutton .p-button.p-button-link,
+	.p-splitbutton .p-button.p-button-link:not(:disabled):hover,
+	.p-splitbutton .p-button.p-button-link:not(:disabled):active,
+	.p-fileupload-choose.p-button-link,
+	.p-fileupload-choose.p-button-link:not(:disabled):hover,
+	.p-fileupload-choose.p-button-link:not(:disabled):active {
+		background: transparent;
+		border-color: transparent;
+	}
+	.p-button.p-button-link .p-button-label {
+		text-decoration: underline;
+		text-underline-offset: 2px;
+	}
 	.p-button > .icon-container {
 		line-height: 0;
 	}
@@ -1183,4 +1204,59 @@
 		margin-block: 0;
 		right: 0;
 	}
+
+	/* Link button colors stay in prime-design so unlayered app styles can override them. */
+	.p-button.p-button-link,
+	:is(.p-button-group, .p-splitbutton) > .p-button.p-button-link,
+	.p-fileupload-choose.p-button-link {
+		color: var(--rs-color-text-button-tertiary);
+	}
+	.p-button.p-button-link:not(:disabled):is(:hover, :active),
+	:is(.p-button-group, .p-splitbutton) > .p-button.p-button-link:not(:disabled):is(:hover, :active),
+	.p-fileupload-choose.p-button-link:not(:disabled):is(:hover, :active) {
+		color: var(--rs-color-text-button-tertiary-hover);
+	}
+	:is(.p-button-group, .p-splitbutton).p-button-primary > .p-button.p-button-link {
+		color: var(--rs-color-text-button-tertiary);
+	}
+	.p-button.p-button-secondary.p-button-link,
+	:is(.p-button-group, .p-splitbutton).p-button-secondary > .p-button.p-button-link {
+		color: var(--rs-color-severity-secondary-text);
+	}
+	.p-button.p-button-secondary.p-button-link:not(:disabled):is(:hover, :active),
+	:is(.p-button-group, .p-splitbutton).p-button-secondary > .p-button.p-button-link:not(:disabled):is(:hover, :active) {
+		color: var(--rs-color-severity-secondary-icon);
+	}
+	.p-button.p-button-success.p-button-link,
+	:is(.p-button-group, .p-splitbutton).p-button-success > .p-button.p-button-link {
+		color: var(--rs-color-severity-success-icon);
+	}
+	.p-button.p-button-success.p-button-link:not(:disabled):is(:hover, :active),
+	:is(.p-button-group, .p-splitbutton).p-button-success > .p-button.p-button-link:not(:disabled):is(:hover, :active) {
+		color: var(--rs-color-severity-success-text);
+	}
+	.p-button.p-button-info.p-button-link,
+	:is(.p-button-group, .p-splitbutton).p-button-info > .p-button.p-button-link {
+		color: var(--rs-color-severity-info-icon);
+	}
+	.p-button.p-button-info.p-button-link:not(:disabled):is(:hover, :active),
+	:is(.p-button-group, .p-splitbutton).p-button-info > .p-button.p-button-link:not(:disabled):is(:hover, :active) {
+		color: var(--rs-color-severity-info-text);
+	}
+	.p-button:is(.p-button-warning, .p-button-warn).p-button-link,
+	:is(.p-button-group, .p-splitbutton):is(.p-button-warning, .p-button-warn) > .p-button.p-button-link {
+		color: var(--rs-color-severity-warning-icon);
+	}
+	.p-button:is(.p-button-warning, .p-button-warn).p-button-link:not(:disabled):is(:hover, :active),
+	:is(.p-button-group, .p-splitbutton):is(.p-button-warning, .p-button-warn) > .p-button.p-button-link:not(:disabled):is(:hover, :active) {
+		color: var(--rs-color-severity-warning-text);
+	}
+	.p-button.p-button-danger.p-button-link,
+	:is(.p-button-group, .p-splitbutton).p-button-danger > .p-button.p-button-link {
+		color: var(--rs-color-severity-danger-icon);
+	}
+	.p-button.p-button-danger.p-button-link:not(:disabled):is(:hover, :active),
+	:is(.p-button-group, .p-splitbutton).p-button-danger > .p-button.p-button-link:not(:disabled):is(:hover, :active) {
+		color: var(--rs-color-severity-danger-text);
+	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@robosophy/prime-theme",
-  "version": "3.0.2",
+  "version": "3.1.1",
   "private": false,
   "license": "UNLICENSED",
   "type": "module",