@robosophy/prime-theme 3.0.1 → 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";
 
@@ -358,32 +358,103 @@
     align-items: center;
     justify-content: center;
   }
+  /* Vue: .p-iconfield | React: .p-icon-field */
+  .p-iconfield, .p-icon-field {
+    margin-top: 0;
+  }
+  /* Icon overrides (both) - Use Material Symbols instead of PrimeIcons */
   .pi-eye::before {
-    font-family: 'Material Symbols Outlined';
-    content: 'visibility_off';
+    font-family: "Material Symbols Outlined";
+    content: "visibility_off";
     color: var(--rs-color-text-primary);
     cursor: pointer;
   }
   .pi-eye-slash::before {
-    font-family: 'Material Symbols Outlined';
-    content: 'visibility';
+    font-family: "Material Symbols Outlined";
+    content: "visibility";
     color: var(--rs-color-text-primary);
     cursor: pointer;
   }
+  .pi-chevron-down::before,
+  .pi-chevron-up::before {
+    font-family: "Material Symbols Outlined";
+  }
   .pi-chevron-down::before {
-    font-family: 'Material Symbols Outlined';
-    content: 'keyboard_arrow_down';
+    content: "keyboard_arrow_down";
   }
-  .pi-check::before {
-    font-family: 'Material Symbols Outlined';
-    content: 'check';
+  .pi-chevron-up::before {
+    content: "keyboard_arrow_up";
   }
-  /* Vue: .p-iconfield | React: .p-icon-field */
-  .p-iconfield, .p-icon-field {
-    margin-top: 0;
+  .pi-check::before {
+    font-family: "Material Symbols Outlined";
+    content: "check";
   }
   /* #endregion */
 
+  /* PrimeVue 4 - Dropdown icon rotation */
+  .p-select .p-select-dropdown-icon,
+  .p-cascadeselect .p-cascadeselect-dropdown-icon,
+  .p-multiselect .p-multiselect-dropdown-icon {
+    transition: transform 0.2s ease;
+  }
+
+  .p-select-open .p-select-dropdown-icon,
+  .p-cascadeselect-open .p-cascadeselect-dropdown-icon,
+  .p-multiselect-open .p-multiselect-dropdown-icon {
+    transform: rotate(180deg);
+  }
+
+  /* PrimeReact - Dropdown CSS chevron stays mounted so its rotation can animate */
+  .p-dropdown .p-dropdown-trigger {
+    align-items: center;
+  }
+  .p-dropdown .p-dropdown-trigger > svg.p-dropdown-trigger-icon {
+    display: none !important;
+  }
+  /* PrimeReact - Dropdown CSS chevron only draws when the default icon slot exists.
+     With a custom dropdownIcon the icon has no .p-dropdown-trigger-icon class, so the
+     ::after is suppressed and no duplicate arrow appears. Same when PrimeReact swaps
+     the default icon for a loading spinner. */
+  .p-dropdown .p-dropdown-trigger:has(> .p-dropdown-trigger-icon)::after {
+    border: solid currentColor;
+    border-width: 0 1.5px 1.5px 0;
+    content: "";
+    height: 8px;
+    transform: translateY(-2px) rotate(45deg);
+    transition: transform 0.2s ease;
+    width: 8px;
+  }
+  .p-dropdown .p-dropdown-trigger:has(> .p-dropdown-trigger-icon)[aria-expanded="true"]::after {
+    transform: translateY(2px) rotate(225deg);
+  }
+
+  /* PrimeReact - CascadeSelect and MultiSelect: hide default chevron SVG icons and use CSS ::after chevron.
+     Same pattern as Dropdown above — keeps icon style consistent across all select components,
+     supports animation on open, and avoids duplicate arrows with custom icons or loading spinners. */
+  .p-cascadeselect .p-cascadeselect-trigger > svg.p-cascadeselect-trigger-icon,
+  .p-multiselect .p-multiselect-trigger > svg.p-multiselect-trigger-icon:not(.p-icon-spin) {
+    display: none !important;
+  }
+
+  .p-cascadeselect .p-cascadeselect-trigger:has(> svg.p-cascadeselect-trigger-icon)::after,
+  .p-multiselect .p-multiselect-trigger:has(> svg.p-multiselect-trigger-icon:not(.p-icon-spin))::after {
+    border: solid currentColor;
+    border-width: 0 1.5px 1.5px 0;
+    content: "";
+    height: 8px;
+    transform: translateY(-2px) rotate(45deg);
+    transition: transform 0.2s ease;
+    width: 8px;
+  }
+
+  .p-cascadeselect .p-cascadeselect-trigger:has(> svg.p-cascadeselect-trigger-icon)[aria-expanded="true"]::after {
+    transform: translateY(2px) rotate(225deg);
+  }
+
+  .p-multiselect:has(input[aria-expanded="true"]) .p-multiselect-trigger:has(> svg.p-multiselect-trigger-icon:not(.p-icon-spin))::after {
+    transform: translateY(2px) rotate(225deg);
+  }
+
   /* #region classes */
 	/* password (both) */
   .p-password {
@@ -393,7 +464,7 @@
     width: 100%;
   }
 	/* input (both) */
-	.p-inputtext:not(:where(.p-inputtextarea, .p-dropdown-label, .p-select-label, .p-cascadeselect-label, .p-cascade-select-label, .p-multiselect-label, .p-multi-select-label, .p-autocomplete-multiple-container)) {
+	.p-inputtext:not(:where(.p-inputtextarea, .p-dropdown-label, .p-select-label, .p-cascadeselect-label, .p-multiselect-label, .p-autocomplete-multiple-container)) {
 		font-weight: var(--p-inputtext-font-weight);
 		height: 48px;
 		font-size: 16px;
@@ -450,12 +521,10 @@
   .p-password.p-invalid.p-component > .p-inputtext {
     border-color: var(--rs-color-stroke-error) !important;
   }
-  .p-cascadeselect.p-invalid.p-component,
-  .p-cascade-select.p-invalid.p-component {
+  .p-cascadeselect.p-invalid.p-component {
     border-color: var(--rs-color-stroke-error) !important;
   }
-  .p-multiselect.p-invalid.p-component,
-  .p-multi-select.p-invalid.p-component {
+  .p-multiselect.p-invalid.p-component {
     border-color: var(--rs-color-stroke-error) !important;
   }
   /* disabled states (both) */
@@ -477,23 +546,19 @@
     background: var(--rs-color-background-disabled) !important;
     color: var(--rs-color-text-secondary) !important;
   }
-  .p-cascadeselect.p-disabled,
-  .p-cascade-select.p-disabled {
+  .p-cascadeselect.p-disabled {
     background: var(--rs-color-background-disabled) !important;
   }
-  .p-cascadeselect.p-disabled .p-cascadeselect-label,
-  .p-cascade-select.p-disabled .p-cascade-select-label {
+  .p-cascadeselect.p-disabled .p-cascadeselect-label {
     color: var(--rs-color-text-secondary) !important;
   }
-  .p-multiselect.p-disabled,
-  .p-multi-select.p-disabled {
+  .p-multiselect.p-disabled {
     background: var(--rs-color-background-disabled) !important;
   }
-  .p-multiselect.p-disabled .p-multiselect-label,
-  .p-multi-select.p-disabled .p-multi-select-label {
+  .p-multiselect.p-disabled .p-multiselect-label {
     color: var(--rs-color-text-secondary) !important;
   }
-	/* select/dropdown (both: .p-select=Vue, .p-dropdown=both) */
+	/* select/dropdown (both: .p-select=Vue, .p-dropdown=React) */
 	.p-select, .p-dropdown {
 		font-weight: var(--p-select-font-weight);
 		height: 48px;
@@ -502,8 +567,8 @@
 		border-radius: 6px;
 		border: 1px solid var(--rs-color-neutral-700);
 		background: var(--rs-color-neutral-50);
-		padding: 0 16px;
 	}
+	.p-select, .p-dropdown { padding: 0; }
 	.p-select:not(.p-disabled):hover,
 	.p-dropdown:not(.p-disabled):hover {
 		border-color: var(--rs-color-stroke-focused);
@@ -527,97 +592,86 @@
 	.p-select-label.p-inputtext,
 	.p-dropdown-label.p-inputtext,
 	.p-cascadeselect-label.p-inputtext,
-	.p-cascade-select-label.p-inputtext,
-	.p-multiselect-label.p-inputtext,
-	.p-multi-select-label.p-inputtext {
+	.p-multiselect-label.p-inputtext {
 		height: auto;
 		line-height: 1.5;
 		border: none;
 		background: transparent;
 	}
-	/* Internal containers - remove duplicate borders */
+	/* Internal containers - remove duplicate borders and padding from triggers.
+	   PrimeReact (React) adds internal padding to triggers, so we reset it here
+	   for both Vue and React variants. */
 	.p-select-label-container,
 	.p-dropdown-label-container,
+	.p-cascadeselect-label-container,
+	.p-multiselect-label-container,
 	.p-select-trigger,
-	.p-dropdown-trigger {
+	.p-dropdown-trigger,
+	.p-cascadeselect-trigger,
+	.p-multiselect-trigger {
 		border: none;
 		background: transparent;
+		padding: 0;
 	}
-	/* cascadeselect (both: .p-cascadeselect=React, .p-cascade-select=Vue) */
-	.p-cascadeselect, .p-cascade-select {
+	/* cascadeselect (both) */
+	.p-cascadeselect {
 		height: 48px;
 		font-size: 16px;
 		gap: 8px;
 		border-radius: 6px;
 		border: 1px solid var(--rs-color-neutral-700);
 		background: var(--rs-color-neutral-50);
-		padding: 0 16px;
+		padding: 0;
 	}
-	.p-cascadeselect:not(.p-disabled):hover,
-	.p-cascade-select:not(.p-disabled):hover {
+	.p-cascadeselect:not(.p-disabled):hover {
 		border-color: var(--rs-color-stroke-focused);
 	}
-	.p-cascadeselect:not(.p-disabled).p-focus,
-	.p-cascade-select:not(.p-disabled).p-focus {
+	.p-cascadeselect:not(.p-disabled).p-focus {
 		outline: none;
 		border-color: var(--rs-color-stroke-focused);
 		box-shadow: none;
 	}
 	/* Vue-only: PrimeReact 10 no emite clases de tamaño para CascadeSelect */
-	.p-cascadeselect-sm, .p-cascade-select-sm {
+	.p-cascadeselect-sm {
 		height: 36px;
 		font-size: 14px;
 	}
-	.p-cascadeselect-label, .p-cascade-select-label {
+	.p-cascadeselect-label {
 		align-self: center;
 		border: none;
 		background: transparent;
 	}
-	.p-cascadeselect-label-container,
-	.p-cascade-select-label-container,
-	.p-cascadeselect-trigger,
-	.p-cascade-select-trigger {
-		border: none;
-		background: transparent;
-	}
-	/* multiselect (both: .p-multiselect=React, .p-multi-select=Vue) */
-	.p-multiselect, .p-multi-select {
+	/* multiselect (both) */
+	.p-multiselect {
+		display: flex;
+		align-items: center;
 		height: 48px;
 		font-size: 16px;
 		gap: 8px;
 		border-radius: 6px;
 		border: 1px solid var(--rs-color-neutral-700);
 		background: var(--rs-color-neutral-50);
-		padding: 0 16px;
+		padding: 0;
 	}
-	.p-multiselect:not(.p-disabled):hover,
-	.p-multi-select:not(.p-disabled):hover {
+	.p-multiselect:not(.p-disabled):hover {
 		border-color: var(--rs-color-stroke-focused);
 	}
-	.p-multiselect:not(.p-disabled).p-focus,
-	.p-multi-select:not(.p-disabled).p-focus {
+	.p-multiselect:not(.p-disabled).p-focus {
 		outline: none;
 		border-color: var(--rs-color-stroke-focused);
 		box-shadow: none;
 	}
 	/* Vue-only: PrimeReact 10 no emite clases de tamaño para MultiSelect */
-	.p-multiselect-sm, .p-multi-select-sm {
+	.p-multiselect-sm {
 		height: 36px;
 		font-size: 14px;
 	}
-	.p-multiselect-label, .p-multi-select-label {
+	.p-multiselect-label {
 		align-self: center;
 		line-height: normal;
 		border: none;
 		background: transparent;
 	}
-	.p-multiselect-label-container,
-	.p-multi-select-label-container,
-	.p-multiselect-trigger,
-	.p-multi-select-trigger {
-		border: none;
-		background: transparent;
-	}
 	/* autocomplete (Vue-only: :has(.p-autocomplete-input) targets Vue's structure, not React's) */
 	.p-autocomplete:has(.p-autocomplete-input) {
 		height: 48px;
@@ -988,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;
 	}
@@ -1129,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.1",
+  "version": "3.1.1",
   "private": false,
   "license": "UNLICENSED",
   "type": "module",