@wippy-fe/theme 0.0.8 → 0.0.10

package/README.md

@@ -31,7 +31,7 @@ export default {
 }
 ```
 
-This includes `tailwindcss-primeui` (color utilities, semantic classes, animations), `tailwind-scrollbar`, and the secondary color palette.
+This includes `tailwindcss-primeui` (color utilities, semantic classes, animations), `tailwind-scrollbar`, the secondary color palette, and severity/accent palettes (`danger`, `success`, `warn`, `info`, `help`, `accent`).
 
 ### 3. PrimeVue plugin (components using PrimeVue)
 

package/THEMING.md

@@ -121,6 +121,40 @@ Work with `bg-`, `text-`, `border-`, `outline-`, `ring-` prefixes:
 | `.animate-delay-{ms}` | Animation delay |
 | `.animate-ease-*` | Easing functions |
 
+### Severity & accent color utilities (MANDATORY for semantic colors)
+
+**Rule: Always use semantic severity classes over raw Tailwind color names when the color conveys meaning.** If a color represents an error, success, warning, info, or help state, you MUST use `danger-*`, `success-*`, `warn-*`, `info-*`, or `help-*` — never `red-*`, `green-*`, `orange-*`, `sky-*`, or `purple-*`. Raw Tailwind colors are only appropriate for purely decorative use where no semantic meaning is attached. Semantics first, decorative later.
+
+Added by the shared Tailwind preset via `theme.extend.colors`. Each has a full 50–950 shade scale backed by CSS variables.
+
+| Family | Base variable | Default color | Purpose |
+|--------|--------------|---------------|---------|
+| `danger` | `--p-danger` | `rgb(239, 68, 68)` (red-500) | Errors, destructive actions |
+| `success` | `--p-success` | `rgb(34, 197, 94)` (green-500) | Success states, confirmations |
+| `warn` | `--p-warn` | `rgb(249, 115, 22)` (orange-500) | Warnings, caution |
+| `info` | `--p-info` | `rgb(14, 165, 233)` (sky-500) | Informational messages |
+| `help` | `--p-help` | `rgb(168, 85, 247)` (purple-500) | Help, hints |
+| `accent` | `--p-accent` | `rgb(20, 184, 166)` (teal-500) | Highlights, special callouts |
+
+Usage with Tailwind prefixes (`bg-`, `text-`, `border-`, `outline-`, `ring-`):
+
+```
+bg-danger-500   text-success-700   border-warn-200
+bg-info-50      text-help-400      border-accent-300
+```
+
+PrimeVue component CSS (button, tag, badge, toast, message, password) references these semantic names instead of hardcoded Tailwind color names.
+
+**Overriding:** Set the base variable on `:root` to retheme all severity shades:
+
+```css
+:root {
+  --p-danger: rgb(220, 38, 38);  /* custom danger base */
+}
+```
+
+The full 50–950 scale auto-derives via `color-mix()`. No dark-mode override block is needed — component CSS picks the right shade per mode (e.g., `dark:bg-danger-400`). You may optionally override the base in `@media (prefers-color-scheme: dark)` for mode-specific tuning.
+
 ### Secondary color utilities
 
 Added by the shared Tailwind preset via `theme.extend.colors`:

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wippy-fe/theme",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "description": "Theme variables, shared Tailwind config, and PrimeVue styling for Wippy web components.",
   "type": "module",
   "main": "theme-config.css",

package/primevue/autocomplete.css

@@ -96,7 +96,7 @@
 }
 
 .p-autocomplete.p-invalid .p-autocomplete-input-multiple {
-    @apply border-red-400 dark:border-red-300
+    @apply border-danger-400 dark:border-danger-300
 }
 
 .p-variant-filled.p-autocomplete-input-multiple {

package/primevue/badge.css

@@ -17,19 +17,19 @@
 }
 
 .p-badge-success {
-    @apply bg-green-500 dark:bg-green-400 text-white dark:text-green-950
+    @apply bg-success-500 dark:bg-success-400 text-white dark:text-success-950
 }
 
 .p-badge-info {
-    @apply bg-sky-500 dark:bg-sky-400 text-white dark:text-sky-950
+    @apply bg-info-500 dark:bg-info-400 text-white dark:text-info-950
 }
 
 .p-badge-warn {
-    @apply bg-orange-500 dark:bg-orange-400 text-white dark:text-orange-950
+    @apply bg-warn-500 dark:bg-warn-400 text-white dark:text-warn-950
 }
 
 .p-badge-danger {
-    @apply bg-red-500 dark:bg-red-400 text-white dark:text-red-950
+    @apply bg-danger-500 dark:bg-danger-400 text-white dark:text-danger-950
 }
 
 .p-badge-contrast {

package/primevue/button.css

@@ -101,69 +101,69 @@
 }
 
 .p-button-success {
-    @apply bg-green-500 enabled:hover:bg-green-600 enabled:active:bg-green-700
-        border-green-500 enabled:hover:border-green-600 enabled:active:border-green-700
+    @apply bg-success-500 enabled:hover:bg-success-600 enabled:active:bg-success-700
+        border-success-500 enabled:hover:border-success-600 enabled:active:border-success-700
         text-white enabled:hover:text-white enabled:active:text-white
-        dark:bg-green-400 dark:enabled:hover:bg-green-300 dark:enabled:active:bg-green-200
-        dark:border-green-400 dark:enabled:hover:border-green-300 dark:enabled:active:border-green-200
-        dark:text-green-950 dark:enabled:hover:text-green-950 dark:enabled:active:text-green-950
+        dark:bg-success-400 dark:enabled:hover:bg-success-300 dark:enabled:active:bg-success-200
+        dark:border-success-400 dark:enabled:hover:border-success-300 dark:enabled:active:border-success-200
+        dark:text-success-950 dark:enabled:hover:text-success-950 dark:enabled:active:text-success-950
         focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
-        focus-visible:outline-green-500 dark:focus-visible:outline-green-400
+        focus-visible:outline-success-500 dark:focus-visible:outline-success-400
 }
 
 .p-button-info {
-    @apply bg-sky-500 enabled:hover:bg-sky-600 enabled:active:bg-sky-700
-        border-sky-500 enabled:hover:border-sky-600 enabled:active:border-sky-700
+    @apply bg-info-500 enabled:hover:bg-info-600 enabled:active:bg-info-700
+        border-info-500 enabled:hover:border-info-600 enabled:active:border-info-700
         text-white enabled:hover:text-white enabled:active:text-white
-        dark:bg-sky-400 dark:enabled:hover:bg-sky-300 dark:enabled:active:bg-sky-200
-        dark:border-sky-400 dark:enabled:hover:border-sky-300 dark:enabled:active:border-sky-200
-        dark:text-sky-950 dark:enabled:hover:text-sky-950 dark:enabled:active:text-sky-950
+        dark:bg-info-400 dark:enabled:hover:bg-info-300 dark:enabled:active:bg-info-200
+        dark:border-info-400 dark:enabled:hover:border-info-300 dark:enabled:active:border-info-200
+        dark:text-info-950 dark:enabled:hover:text-info-950 dark:enabled:active:text-info-950
         focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
-        focus-visible:outline-sky-500 dark:focus-visible:outline-sky-400
+        focus-visible:outline-info-500 dark:focus-visible:outline-info-400
 }
 
 .p-button-warn {
-    @apply bg-orange-500 enabled:hover:bg-orange-600 enabled:active:bg-orange-700
-        border-orange-500 enabled:hover:border-orange-600 enabled:active:border-orange-700
+    @apply bg-warn-500 enabled:hover:bg-warn-600 enabled:active:bg-warn-700
+        border-warn-500 enabled:hover:border-warn-600 enabled:active:border-warn-700
         text-white enabled:hover:text-white enabled:active:text-white
-        dark:bg-orange-400 dark:enabled:hover:bg-orange-300 dark:enabled:active:bg-orange-200
-        dark:border-orange-400 dark:enabled:hover:border-orange-300 dark:enabled:active:border-orange-200
-        dark:text-orange-950 dark:enabled:hover:text-orange-950 dark:enabled:active:text-orange-950
+        dark:bg-warn-400 dark:enabled:hover:bg-warn-300 dark:enabled:active:bg-warn-200
+        dark:border-warn-400 dark:enabled:hover:border-warn-300 dark:enabled:active:border-warn-200
+        dark:text-warn-950 dark:enabled:hover:text-warn-950 dark:enabled:active:text-warn-950
         focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
-        focus-visible:outline-orange-500 dark:focus-visible:outline-orange-400
+        focus-visible:outline-warn-500 dark:focus-visible:outline-warn-400
 }
 
 .p-button-help {
-    @apply bg-purple-500 enabled:hover:bg-purple-600 enabled:active:bg-purple-700
-        border-purple-500 enabled:hover:border-purple-600 enabled:active:border-purple-700
+    @apply bg-help-500 enabled:hover:bg-help-600 enabled:active:bg-help-700
+        border-help-500 enabled:hover:border-help-600 enabled:active:border-help-700
         text-white enabled:hover:text-white enabled:active:text-white
-        dark:bg-purple-400 dark:enabled:hover:bg-purple-300 dark:enabled:active:bg-purple-200
-        dark:border-purple-400 dark:enabled:hover:border-purple-300 dark:enabled:active:border-purple-200
-        dark:text-purple-950 dark:enabled:hover:text-purple-950 dark:enabled:active:text-purple-950
+        dark:bg-help-400 dark:enabled:hover:bg-help-300 dark:enabled:active:bg-help-200
+        dark:border-help-400 dark:enabled:hover:border-help-300 dark:enabled:active:border-help-200
+        dark:text-help-950 dark:enabled:hover:text-help-950 dark:enabled:active:text-help-950
         focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
-        focus-visible:outline-purple-500 dark:focus-visible:outline-purple-400
+        focus-visible:outline-help-500 dark:focus-visible:outline-help-400
 }
 
 .p-button-help {
-    @apply bg-purple-500 enabled:hover:bg-purple-600 enabled:active:bg-purple-700
-        border-purple-500 enabled:hover:border-purple-600 enabled:active:border-purple-700
+    @apply bg-help-500 enabled:hover:bg-help-600 enabled:active:bg-help-700
+        border-help-500 enabled:hover:border-help-600 enabled:active:border-help-700
         text-white enabled:hover:text-white enabled:active:text-white
-        dark:bg-purple-400 dark:enabled:hover:bg-purple-300 dark:enabled:active:bg-purple-200
-        dark:border-purple-400 dark:enabled:hover:border-purple-300 dark:enabled:active:border-purple-200
-        dark:text-purple-950 dark:enabled:hover:text-purple-950 dark:enabled:active:text-purple-950
+        dark:bg-help-400 dark:enabled:hover:bg-help-300 dark:enabled:active:bg-help-200
+        dark:border-help-400 dark:enabled:hover:border-help-300 dark:enabled:active:border-help-200
+        dark:text-help-950 dark:enabled:hover:text-help-950 dark:enabled:active:text-help-950
         focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
-        focus-visible:outline-purple-500 dark:focus-visible:outline-purple-400
+        focus-visible:outline-help-500 dark:focus-visible:outline-help-400
 }
 
 .p-button-danger {
-    @apply bg-red-500 enabled:hover:bg-red-600 enabled:active:bg-red-700
-        border-red-500 enabled:hover:border-red-600 enabled:active:border-red-700
+    @apply bg-danger-500 enabled:hover:bg-danger-600 enabled:active:bg-danger-700
+        border-danger-500 enabled:hover:border-danger-600 enabled:active:border-danger-700
         text-white enabled:hover:text-white enabled:active:text-white
-        dark:bg-red-400 dark:enabled:hover:bg-red-300 dark:enabled:active:bg-red-200
-        dark:border-red-400 dark:enabled:hover:border-red-300 dark:enabled:active:border-red-200
-        dark:text-red-950 dark:enabled:hover:text-red-950 dark:enabled:active:text-red-950
+        dark:bg-danger-400 dark:enabled:hover:bg-danger-300 dark:enabled:active:bg-danger-200
+        dark:border-danger-400 dark:enabled:hover:border-danger-300 dark:enabled:active:border-danger-200
+        dark:text-danger-950 dark:enabled:hover:text-danger-950 dark:enabled:active:text-danger-950
         focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2
-        focus-visible:outline-red-500 dark:focus-visible:outline-red-400
+        focus-visible:outline-danger-500 dark:focus-visible:outline-danger-400
 }
 
 .p-button-contrast {
@@ -196,48 +196,48 @@
 }
 
 .p-button-outlined.p-button-success {
-    @apply bg-transparent enabled:hover:bg-green-50 enabled:active:bg-green-100
-        border-green-200 enabled:hover:border-green-200 enabled:active:border-green-200
-        text-green-500 enabled:hover:text-green-500 enabled:active:text-green-500
-        dark:bg-transparent dark:enabled:hover:bg-green-400/5 dark:enabled:active:bg-green-400/15
-        dark:border-green-700 dark:enabled:hover:border-green-700 dark:enabled:active:border-green-700
-        dark:text-green-400 dark:enabled:hover:text-green-400 dark:enabled:active:text-green-400
+    @apply bg-transparent enabled:hover:bg-success-50 enabled:active:bg-success-100
+        border-success-200 enabled:hover:border-success-200 enabled:active:border-success-200
+        text-success-500 enabled:hover:text-success-500 enabled:active:text-success-500
+        dark:bg-transparent dark:enabled:hover:bg-success-400/5 dark:enabled:active:bg-success-400/15
+        dark:border-success-700 dark:enabled:hover:border-success-700 dark:enabled:active:border-success-700
+        dark:text-success-400 dark:enabled:hover:text-success-400 dark:enabled:active:text-success-400
 }
 
 .p-button-outlined.p-button-info {
-    @apply bg-transparent enabled:hover:bg-sky-50 enabled:active:bg-sky-100
-        border-sky-200 enabled:hover:border-sky-200 enabled:active:border-sky-200
-        text-sky-500 enabled:hover:text-sky-500 enabled:active:text-sky-500
-        dark:bg-transparent dark:enabled:hover:bg-sky-400/5 dark:enabled:active:bg-sky-400/15
-        dark:border-sky-700 dark:enabled:hover:border-sky-700 dark:enabled:active:border-sky-700
-        dark:text-sky-400 dark:enabled:hover:text-sky-400 dark:enabled:active:text-sky-400
+    @apply bg-transparent enabled:hover:bg-info-50 enabled:active:bg-info-100
+        border-info-200 enabled:hover:border-info-200 enabled:active:border-info-200
+        text-info-500 enabled:hover:text-info-500 enabled:active:text-info-500
+        dark:bg-transparent dark:enabled:hover:bg-info-400/5 dark:enabled:active:bg-info-400/15
+        dark:border-info-700 dark:enabled:hover:border-info-700 dark:enabled:active:border-info-700
+        dark:text-info-400 dark:enabled:hover:text-info-400 dark:enabled:active:text-info-400
 }
 
 .p-button-outlined.p-button-warn {
-    @apply bg-transparent enabled:hover:bg-orange-50 enabled:active:bg-orange-100
-        border-orange-200 enabled:hover:border-orange-200 enabled:active:border-orange-200
-        text-orange-500 enabled:hover:text-orange-500 enabled:active:text-orange-500
-        dark:bg-transparent dark:enabled:hover:bg-orange-400/5 dark:enabled:active:bg-orange-400/15
-        dark:border-orange-700 dark:enabled:hover:border-orange-700 dark:enabled:active:border-orange-700
-        dark:text-orange-400 dark:enabled:hover:text-orange-400 dark:enabled:active:text-orange-400
+    @apply bg-transparent enabled:hover:bg-warn-50 enabled:active:bg-warn-100
+        border-warn-200 enabled:hover:border-warn-200 enabled:active:border-warn-200
+        text-warn-500 enabled:hover:text-warn-500 enabled:active:text-warn-500
+        dark:bg-transparent dark:enabled:hover:bg-warn-400/5 dark:enabled:active:bg-warn-400/15
+        dark:border-warn-700 dark:enabled:hover:border-warn-700 dark:enabled:active:border-warn-700
+        dark:text-warn-400 dark:enabled:hover:text-warn-400 dark:enabled:active:text-warn-400
 }
 
 .p-button-outlined.p-button-help {
-    @apply bg-transparent enabled:hover:bg-purple-50 enabled:active:bg-purple-100
-        border-purple-200 enabled:hover:border-purple-200 enabled:active:border-purple-200
-        text-purple-500 enabled:hover:text-purple-500 enabled:active:text-purple-500
-        dark:bg-transparent dark:enabled:hover:bg-purple-400/5 dark:enabled:active:bg-purple-400/15
-        dark:border-purple-700 dark:enabled:hover:border-purple-700 dark:enabled:active:border-purple-700
-        dark:text-purple-400 dark:enabled:hover:text-purple-400 dark:enabled:active:text-purple-400
+    @apply bg-transparent enabled:hover:bg-help-50 enabled:active:bg-help-100
+        border-help-200 enabled:hover:border-help-200 enabled:active:border-help-200
+        text-help-500 enabled:hover:text-help-500 enabled:active:text-help-500
+        dark:bg-transparent dark:enabled:hover:bg-help-400/5 dark:enabled:active:bg-help-400/15
+        dark:border-help-700 dark:enabled:hover:border-help-700 dark:enabled:active:border-help-700
+        dark:text-help-400 dark:enabled:hover:text-help-400 dark:enabled:active:text-help-400
 }
 
 .p-button-outlined.p-button-danger {
-    @apply bg-transparent enabled:hover:bg-red-50 enabled:active:bg-red-100
-        border-red-200 enabled:hover:border-red-200 enabled:active:border-red-200
-        text-red-500 enabled:hover:text-red-500 enabled:active:text-red-500
-        dark:bg-transparent dark:enabled:hover:bg-red-400/5 dark:enabled:active:bg-red-400/15
-        dark:border-red-700 dark:enabled:hover:border-red-700 dark:enabled:active:border-red-700
-        dark:text-red-400 dark:enabled:hover:text-red-400 dark:enabled:active:text-red-400
+    @apply bg-transparent enabled:hover:bg-danger-50 enabled:active:bg-danger-100
+        border-danger-200 enabled:hover:border-danger-200 enabled:active:border-danger-200
+        text-danger-500 enabled:hover:text-danger-500 enabled:active:text-danger-500
+        dark:bg-transparent dark:enabled:hover:bg-danger-400/5 dark:enabled:active:bg-danger-400/15
+        dark:border-danger-700 dark:enabled:hover:border-danger-700 dark:enabled:active:border-danger-700
+        dark:text-danger-400 dark:enabled:hover:text-danger-400 dark:enabled:active:text-danger-400
 }
 
 .p-button-outlined.p-button-contrast {
@@ -277,48 +277,48 @@
 }
 
 .p-button-text.p-button-success {
-    @apply bg-transparent enabled:hover:bg-green-50 enabled:active:bg-green-100
+    @apply bg-transparent enabled:hover:bg-success-50 enabled:active:bg-success-100
         border-transparent enabled:hover:border-transparent enabled:active:border-transparent
-        text-green-500 enabled:hover:text-green-500 enabled:active:text-green-500
-        dark:bg-transparent dark:enabled:hover:bg-green-400/5 dark:enabled:active:bg-green-400/15
+        text-success-500 enabled:hover:text-success-500 enabled:active:text-success-500
+        dark:bg-transparent dark:enabled:hover:bg-success-400/5 dark:enabled:active:bg-success-400/15
         dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
-        dark:text-green-400 dark:enabled:hover:text-green-400 dark:enabled:active:text-green-400
+        dark:text-success-400 dark:enabled:hover:text-success-400 dark:enabled:active:text-success-400
 }
 
 .p-button-text.p-button-info {
-    @apply bg-transparent enabled:hover:bg-sky-50 enabled:active:bg-sky-100
+    @apply bg-transparent enabled:hover:bg-info-50 enabled:active:bg-info-100
         border-transparent enabled:hover:border-transparent enabled:active:border-transparent
-        text-sky-500 enabled:hover:text-sky-500 enabled:active:text-sky-500
-        dark:bg-transparent dark:enabled:hover:bg-sky-400/5 dark:enabled:active:bg-sky-400/15
+        text-info-500 enabled:hover:text-info-500 enabled:active:text-info-500
+        dark:bg-transparent dark:enabled:hover:bg-info-400/5 dark:enabled:active:bg-info-400/15
         dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
-        dark:text-sky-400 dark:enabled:hover:text-sky-400 dark:enabled:active:text-sky-400
+        dark:text-info-400 dark:enabled:hover:text-info-400 dark:enabled:active:text-info-400
 }
 
 .p-button-text.p-button-warn {
-    @apply bg-transparent enabled:hover:bg-orange-50 enabled:active:bg-orange-100
+    @apply bg-transparent enabled:hover:bg-warn-50 enabled:active:bg-warn-100
         border-transparent enabled:hover:border-transparent enabled:active:border-transparent
-        text-orange-500 enabled:hover:text-orange-500 enabled:active:text-orange-500
-        dark:bg-transparent dark:enabled:hover:bg-orange-400/5 dark:enabled:active:bg-orange-400/15
+        text-warn-500 enabled:hover:text-warn-500 enabled:active:text-warn-500
+        dark:bg-transparent dark:enabled:hover:bg-warn-400/5 dark:enabled:active:bg-warn-400/15
         dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
-        dark:text-orange-400 dark:enabled:hover:text-orange-400 dark:enabled:active:text-orange-400
+        dark:text-warn-400 dark:enabled:hover:text-warn-400 dark:enabled:active:text-warn-400
 }
 
 .p-button-text.p-button-help {
-    @apply bg-transparent enabled:hover:bg-purple-50 enabled:active:bg-purple-100
+    @apply bg-transparent enabled:hover:bg-help-50 enabled:active:bg-help-100
         border-transparent enabled:hover:border-transparent enabled:active:border-transparent
-        text-purple-500 enabled:hover:text-purple-500 enabled:active:text-purple-500
-        dark:bg-transparent dark:enabled:hover:bg-purple-400/5 dark:enabled:active:bg-purple-400/15
+        text-help-500 enabled:hover:text-help-500 enabled:active:text-help-500
+        dark:bg-transparent dark:enabled:hover:bg-help-400/5 dark:enabled:active:bg-help-400/15
         dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
-        dark:text-purple-400 dark:enabled:hover:text-purple-400 dark:enabled:active:text-purple-400
+        dark:text-help-400 dark:enabled:hover:text-help-400 dark:enabled:active:text-help-400
 }
 
 .p-button-text.p-button-danger {
-    @apply bg-transparent enabled:hover:bg-red-50 enabled:active:bg-red-100
+    @apply bg-transparent enabled:hover:bg-danger-50 enabled:active:bg-danger-100
         border-transparent enabled:hover:border-transparent enabled:active:border-transparent
-        text-red-500 enabled:hover:text-red-500 enabled:active:text-red-500
-        dark:bg-transparent dark:enabled:hover:bg-red-400/5 dark:enabled:active:bg-red-400/15
+        text-danger-500 enabled:hover:text-danger-500 enabled:active:text-danger-500
+        dark:bg-transparent dark:enabled:hover:bg-danger-400/5 dark:enabled:active:bg-danger-400/15
         dark:border-transparent dark:enabled:hover:border-transparent dark:enabled:active:border-transparent
-        dark:text-red-400 dark:enabled:hover:text-red-400 dark:enabled:active:text-red-400
+        dark:text-danger-400 dark:enabled:hover:text-danger-400 dark:enabled:active:text-danger-400
 }
 
 .p-button-text.p-button-plain {

package/primevue/cascadeselect.css

@@ -19,7 +19,7 @@
 }
 
 .p-cascadeselect.p-invalid {
-    @apply border-red-400 dark:border-red-300
+    @apply border-danger-400 dark:border-danger-300
 }
 
 .p-cascadeselect.p-disabled {

package/primevue/checkbox.css

@@ -46,7 +46,7 @@
 }
 
 .p-checkbox.p-invalid > .p-checkbox-box {
-    @apply border-red-400 dark:border-red-300
+    @apply border-danger-400 dark:border-danger-300
 }
 
 .p-checkbox.p-variant-filled .p-checkbox-box {

package/primevue/floatlabel.css

@@ -16,7 +16,7 @@
 }
 
 .p-floatlabel:has(.p-invalid) label {
-    @apply text-red-400 dark:text-red-300
+    @apply text-danger-400 dark:text-danger-300
 }
 
 .p-floatlabel:has(input:focus) label,

package/primevue/iftalabel.css

@@ -17,7 +17,7 @@
 }
 
 .p-iftalabel:has(.p-invalid) label {
-    @apply text-red-400 dark:text-red-300
+    @apply text-danger-400 dark:text-danger-300
 }
 
 .p-iftalabel:has(input:focus) label ,

package/primevue/inputtext.css

@@ -14,7 +14,7 @@
 }
 
 .p-inputtext.p-invalid {
-    @apply border-red-400 dark:border-red-300
+    @apply border-danger-400 dark:border-danger-300
 }
 
 .p-inputtext.p-variant-filled {

package/primevue/listbox.css

@@ -21,7 +21,7 @@
 }
 
 .p-listbox.p-invalid {
-    @apply border-red-400 dark:border-red-300
+    @apply border-danger-400 dark:border-danger-300
 }
 
 .p-listbox-header {

package/primevue/message.css

@@ -17,79 +17,79 @@
 }
 
 .p-message-info {
-    @apply bg-blue-50/95 outline-blue-200 text-blue-600
-        dark:bg-blue-500/15 dark:outline-blue-700/35 dark:text-blue-500
+    @apply bg-info-50/95 outline-info-200 text-info-600
+        dark:bg-info-500/15 dark:outline-info-700/35 dark:text-info-500
         shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]
 }
 
 .p-message-info .p-message-close-button {
-    @apply hover:bg-blue-100 focus-visible:outline-blue-600
-        dark:hover:bg-white/5 dark:focus-visible:outline-blue-500
+    @apply hover:bg-info-100 focus-visible:outline-info-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-info-500
 }
 
 .p-message-info.p-message-outlined {
-    @apply text-blue-500 outline-blue-500 dark:text-blue-600 dark:outline-blue-600
+    @apply text-info-500 outline-info-500 dark:text-info-600 dark:outline-info-600
 }
 
 .p-message-info.p-message-simple {
-    @apply text-blue-500 dark:text-blue-600
+    @apply text-info-500 dark:text-info-600
 }
 
 .p-message-success {
-    @apply bg-green-50/95 outline-green-200 text-green-600
-        dark:bg-green-500/15 dark:outline-green-700/35 dark:text-green-500
+    @apply bg-success-50/95 outline-success-200 text-success-600
+        dark:bg-success-500/15 dark:outline-success-700/35 dark:text-success-500
         shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)]
 }
 
 .p-message-success .p-message-close-button {
-    @apply hover:bg-green-100 focus-visible:outline-green-600
-        dark:hover:bg-white/5 dark:focus-visible:outline-green-500
+    @apply hover:bg-success-100 focus-visible:outline-success-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-success-500
 }
 
 .p-message-success.p-message-outlined {
-    @apply text-green-500 outline-green-500 dark:text-green-600 dark:outline-green-600
+    @apply text-success-500 outline-success-500 dark:text-success-600 dark:outline-success-600
 }
 
 .p-message-success.p-message-simple {
-    @apply text-green-500 dark:text-green-600
+    @apply text-success-500 dark:text-success-600
 }
 
 .p-message-warn {
-    @apply bg-yellow-50/95 outline-yellow-200 text-yellow-600
-        dark:bg-yellow-500/15 dark:outline-yellow-700/35 dark:text-yellow-500
+    @apply bg-warn-50/95 outline-warn-200 text-warn-600
+        dark:bg-warn-500/15 dark:outline-warn-700/35 dark:text-warn-500
         shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)]
 }
 
 .p-message-warn .p-message-close-button {
-    @apply hover:bg-yellow-100 focus-visible:outline-yellow-600
-        dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500
+    @apply hover:bg-warn-100 focus-visible:outline-warn-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-warn-500
 }
 
 .p-message-warn.p-message-outlined {
-    @apply text-yellow-500 outline-yellow-500 dark:text-yellow-600 dark:outline-yellow-600
+    @apply text-warn-500 outline-warn-500 dark:text-warn-600 dark:outline-warn-600
 }
 
 .p-message-warn.p-message-simple {
-    @apply text-yellow-500 dark:text-yellow-600
+    @apply text-warn-500 dark:text-warn-600
 }
 
 .p-message-error {
-    @apply bg-red-50/95 outline-red-200 text-red-600
-        dark:bg-red-500/15 dark:outline-red-700/35 dark:text-red-500
+    @apply bg-danger-50/95 outline-danger-200 text-danger-600
+        dark:bg-danger-500/15 dark:outline-danger-700/35 dark:text-danger-500
         shadow-[0px_4px_8px_0px_theme(colors.red.500/0.04)]
 }
 
 .p-message-error .p-message-close-button {
-    @apply hover:bg-red-100 focus-visible:outline-red-600
-        dark:hover:bg-white/5 dark:focus-visible:outline-red-500
+    @apply hover:bg-danger-100 focus-visible:outline-danger-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-danger-500
 }
 
 .p-message-error.p-message-outlined {
-    @apply text-red-500 outline-red-500 dark:text-red-600 dark:outline-red-600
+    @apply text-danger-500 outline-danger-500 dark:text-danger-600 dark:outline-danger-600
 }
 
 .p-message-error.p-message-simple {
-    @apply text-red-500 dark:text-red-600
+    @apply text-danger-500 dark:text-danger-600
 }
 
 .p-message-secondary {

package/primevue/multiselect.css

@@ -24,7 +24,7 @@
 }
 
 .p-multiselect.p-invalid {
-    @apply border-red-400 dark:border-red-300
+    @apply border-danger-400 dark:border-danger-300
 }
 
 .p-multiselect.p-disabled {

package/primevue/password.css

@@ -17,15 +17,15 @@
 }
 
 .p-password-meter-weak {
-    @apply bg-red-500 dark:bg-red-400
+    @apply bg-danger-500 dark:bg-danger-400
 }
 
 .p-password-meter-medium {
-    @apply bg-amber-500 dark:bg-amber-400
+    @apply bg-warn-500 dark:bg-warn-400
 }
 
 .p-password-meter-strong {
-    @apply bg-green-500 dark:bg-green-400
+    @apply bg-success-500 dark:bg-success-400
 }
 
 .p-password-fluid {

package/primevue/radiobutton.css

@@ -54,7 +54,7 @@
 }
 
 .p-radiobutton.p-invalid > .p-radiobutton-box {
-    @apply border-red-400 dark:border-red-300
+    @apply border-danger-400 dark:border-danger-300
 }
 
 .p-radiobutton.p-variant-filled .p-radiobutton-box {

package/primevue/select.css

@@ -23,7 +23,7 @@
 }
 
 .p-select.p-invalid {
-    @apply border-red-400 dark:border-red-300
+    @apply border-danger-400 dark:border-danger-300
 }
 
 .p-select.p-disabled {

package/primevue/selectbutton.css

@@ -21,5 +21,5 @@
 }
 
 .p-selectbutton.p-invalid {
-    @apply outline outline-offset-0 outline-red-400 dark:outline-red-300
+    @apply outline outline-offset-0 outline-danger-400 dark:outline-danger-300
 }

package/primevue/tag.css

@@ -14,19 +14,19 @@
 }
 
 .p-tag-success {
-    @apply bg-green-100 dark:bg-green-500/15 text-green-700 dark:text-green-300
+    @apply bg-success-100 dark:bg-success-500/15 text-success-700 dark:text-success-300
 }
 
 .p-tag-info {
-    @apply bg-sky-100 dark:bg-sky-500/15 text-sky-700 dark:text-sky-300
+    @apply bg-info-100 dark:bg-info-500/15 text-info-700 dark:text-info-300
 }
 
 .p-tag-warn {
-    @apply bg-orange-100 dark:bg-orange-500/15 text-orange-700 dark:text-orange-300
+    @apply bg-warn-100 dark:bg-warn-500/15 text-warn-700 dark:text-warn-300
 }
 
 .p-tag-danger {
-    @apply bg-red-100 dark:bg-red-500/15 text-red-700 dark:text-red-300
+    @apply bg-danger-100 dark:bg-danger-500/15 text-danger-700 dark:text-danger-300
 }
 
 .p-tag-secondary {

package/primevue/textarea.css

@@ -14,7 +14,7 @@
 }
 
 .p-textarea.p-invalid {
-    @apply border-red-400 dark:border-red-300
+    @apply border-danger-400 dark:border-danger-300
 }
 
 .p-textarea.p-variant-filled {

package/primevue/toast.css

@@ -50,8 +50,8 @@
 }
 
 .p-toast-message-info {
-    @apply bg-blue-50/95 border-blue-200 text-blue-600
-        dark:bg-blue-500/15 dark:border-blue-700/35 dark:text-blue-500
+    @apply bg-info-50/95 border-info-200 text-info-600
+        dark:bg-info-500/15 dark:border-info-700/35 dark:text-info-500
         shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]
 }
 
@@ -60,13 +60,13 @@
 }
 
 .p-toast-message-info .p-toast-close-button {
-    @apply hover:bg-blue-100 focus-visible:outline-blue-600
-        dark:hover:bg-white/5 dark:focus-visible:outline-blue-500
+    @apply hover:bg-info-100 focus-visible:outline-info-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-info-500
 }
 
 .p-toast-message-success {
-    @apply bg-green-50/95 border-green-200 text-green-600
-        dark:bg-green-500/15 dark:border-green-700/35 dark:text-green-500
+    @apply bg-success-50/95 border-success-200 text-success-600
+        dark:bg-success-500/15 dark:border-success-700/35 dark:text-success-500
         shadow-[0px_4px_8px_0px_theme(colors.green.500/0.04)]
 }
 
@@ -75,13 +75,13 @@
 }
 
 .p-toast-message-success .p-toast-close-button {
-    @apply hover:bg-green-100 focus-visible:outline-green-600
-        dark:hover:bg-white/5 dark:focus-visible:outline-green-500
+    @apply hover:bg-success-100 focus-visible:outline-success-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-success-500
 }
 
 .p-toast-message-warn {
-    @apply bg-yellow-50/95 border-yellow-200 text-yellow-600
-        dark:bg-yellow-500/15 dark:border-yellow-700/35 dark:text-yellow-500
+    @apply bg-warn-50/95 border-warn-200 text-warn-600
+        dark:bg-warn-500/15 dark:border-warn-700/35 dark:text-warn-500
         shadow-[0px_4px_8px_0px_theme(colors.yellow.500/0.04)]
 }
 
@@ -90,13 +90,13 @@
 }
 
 .p-toast-message-warn .p-toast-close-button {
-    @apply hover:bg-yellow-100 focus-visible:outline-yellow-600
-        dark:hover:bg-white/5 dark:focus-visible:outline-yellow-500
+    @apply hover:bg-warn-100 focus-visible:outline-warn-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-warn-500
 }
 
 .p-toast-message-error {
-    @apply bg-red-50/95 border-red-200 text-red-600
-        dark:bg-red-500/15 dark:border-red-700/35 dark:text-red-500
+    @apply bg-danger-50/95 border-danger-200 text-danger-600
+        dark:bg-danger-500/15 dark:border-danger-700/35 dark:text-danger-500
         shadow-[0px_4px_8px_0px_theme(colors.blue.500/0.04)]
 }
 
@@ -105,8 +105,8 @@
 }
 
 .p-toast-message-error .p-toast-close-button {
-    @apply hover:bg-red-100 focus-visible:outline-red-600
-        dark:hover:bg-white/5 dark:focus-visible:outline-red-500
+    @apply hover:bg-danger-100 focus-visible:outline-danger-600
+        dark:hover:bg-white/5 dark:focus-visible:outline-danger-500
 }
 
 .p-toast-message-secondary {

package/primevue/togglebutton.css

@@ -35,7 +35,7 @@
 }
 
 .p-togglebutton.p-invalid {
-    @apply border-red-400 dark:border-red-300
+    @apply border-danger-400 dark:border-danger-300
 }
 
 .p-togglebutton-icon {

package/primevue/toggleswitch.css

@@ -50,7 +50,7 @@
 }
 
 .p-toggleswitch.p-invalid > .p-toggleswitch-slider {
-    @apply border-red-400 dark:border-red-300
+    @apply border-danger-400 dark:border-danger-300
 }
 
 .p-toggleswitch.p-disabled {

package/primevue/treeselect.css

@@ -22,7 +22,7 @@
 }
 
 .p-treeselect.p-invalid {
-    @apply border-red-400 dark:border-red-300
+    @apply border-danger-400 dark:border-danger-300
 }
 
 .p-treeselect.p-disabled {

package/primevue-plugin.ts

@@ -1,8 +1,8 @@
-import PrimeVue from 'primevue/config'
 import type { App } from 'vue'
+import PrimeVue from 'primevue/config'
 
 export const PrimeVuePlugin = {
-  install: (app: App) => app.use(PrimeVue, { theme: 'none' })
+  install: (app: App) => app.use(PrimeVue, { theme: 'none' }),
 }
 
 export default PrimeVuePlugin

package/tailwind.config.ts

@@ -1,23 +1,29 @@
 import TailwindScrollbar from 'tailwind-scrollbar'
 import PrimeUI from 'tailwindcss-primeui'
 
+/* Helper: wraps a CSS variable in color-mix() so Tailwind's /opacity modifier works */
+const cm = (v: string) => `color-mix(in srgb, var(${v}) calc(100% * <alpha-value>), transparent)`
+
+/* Generate a full shade scale (50–950 + DEFAULT at 500) for a severity/accent palette */
+function severityScale(prefix: string) {
+  const shades = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950] as const
+  const scale: Record<string, string> = {}
+  for (const s of shades) scale[s] = cm(`--p-${prefix}-${s}`)
+  scale.DEFAULT = cm(`--p-${prefix}-500`)
+  return scale
+}
+
 export default {
   theme: {
     extend: {
       colors: {
-        secondary: {
-          50: 'var(--p-secondary-50)',
-          100: 'var(--p-secondary-100)',
-          200: 'var(--p-secondary-200)',
-          300: 'var(--p-secondary-300)',
-          400: 'var(--p-secondary-400)',
-          500: 'var(--p-secondary-500)',
-          600: 'var(--p-secondary-600)',
-          700: 'var(--p-secondary-700)',
-          800: 'var(--p-secondary-800)',
-          900: 'var(--p-secondary-900)',
-          950: 'var(--p-secondary-950)',
-        },
+        secondary: severityScale('secondary'),
+        danger: severityScale('danger'),
+        success: severityScale('success'),
+        warn: severityScale('warn'),
+        info: severityScale('info'),
+        help: severityScale('help'),
+        accent: severityScale('accent'),
       },
     },
   },

package/theme-config.css

@@ -30,6 +30,86 @@
     --p-secondary-800: color-mix(in srgb, var(--p-secondary) 55%, black);  /* #40424c */
     --p-secondary-900: color-mix(in srgb, var(--p-secondary) 50%, black);  /* #383942 */
     --p-secondary-950: color-mix(in srgb, var(--p-secondary) 30%, black);  /* #25252c */
+
+    /* Severity palettes */
+    --p-danger: rgb(239, 68, 68);
+    --p-danger-50: color-mix(in srgb, var(--p-danger) 5%, white);
+    --p-danger-100: color-mix(in srgb, var(--p-danger) 10%, white);
+    --p-danger-200: color-mix(in srgb, var(--p-danger) 20%, white);
+    --p-danger-300: color-mix(in srgb, var(--p-danger) 30%, white);
+    --p-danger-400: color-mix(in srgb, var(--p-danger) 40%, white);
+    --p-danger-500: var(--p-danger);
+    --p-danger-600: color-mix(in srgb, var(--p-danger) 80%, black);
+    --p-danger-700: color-mix(in srgb, var(--p-danger) 70%, black);
+    --p-danger-800: color-mix(in srgb, var(--p-danger) 60%, black);
+    --p-danger-900: color-mix(in srgb, var(--p-danger) 50%, black);
+    --p-danger-950: color-mix(in srgb, var(--p-danger) 40%, black);
+
+    --p-success: rgb(34, 197, 94);
+    --p-success-50: color-mix(in srgb, var(--p-success) 5%, white);
+    --p-success-100: color-mix(in srgb, var(--p-success) 10%, white);
+    --p-success-200: color-mix(in srgb, var(--p-success) 20%, white);
+    --p-success-300: color-mix(in srgb, var(--p-success) 30%, white);
+    --p-success-400: color-mix(in srgb, var(--p-success) 40%, white);
+    --p-success-500: var(--p-success);
+    --p-success-600: color-mix(in srgb, var(--p-success) 80%, black);
+    --p-success-700: color-mix(in srgb, var(--p-success) 70%, black);
+    --p-success-800: color-mix(in srgb, var(--p-success) 60%, black);
+    --p-success-900: color-mix(in srgb, var(--p-success) 50%, black);
+    --p-success-950: color-mix(in srgb, var(--p-success) 40%, black);
+
+    --p-warn: rgb(249, 115, 22);
+    --p-warn-50: color-mix(in srgb, var(--p-warn) 5%, white);
+    --p-warn-100: color-mix(in srgb, var(--p-warn) 10%, white);
+    --p-warn-200: color-mix(in srgb, var(--p-warn) 20%, white);
+    --p-warn-300: color-mix(in srgb, var(--p-warn) 30%, white);
+    --p-warn-400: color-mix(in srgb, var(--p-warn) 40%, white);
+    --p-warn-500: var(--p-warn);
+    --p-warn-600: color-mix(in srgb, var(--p-warn) 80%, black);
+    --p-warn-700: color-mix(in srgb, var(--p-warn) 70%, black);
+    --p-warn-800: color-mix(in srgb, var(--p-warn) 60%, black);
+    --p-warn-900: color-mix(in srgb, var(--p-warn) 50%, black);
+    --p-warn-950: color-mix(in srgb, var(--p-warn) 40%, black);
+
+    --p-info: rgb(14, 165, 233);
+    --p-info-50: color-mix(in srgb, var(--p-info) 5%, white);
+    --p-info-100: color-mix(in srgb, var(--p-info) 10%, white);
+    --p-info-200: color-mix(in srgb, var(--p-info) 20%, white);
+    --p-info-300: color-mix(in srgb, var(--p-info) 30%, white);
+    --p-info-400: color-mix(in srgb, var(--p-info) 40%, white);
+    --p-info-500: var(--p-info);
+    --p-info-600: color-mix(in srgb, var(--p-info) 80%, black);
+    --p-info-700: color-mix(in srgb, var(--p-info) 70%, black);
+    --p-info-800: color-mix(in srgb, var(--p-info) 60%, black);
+    --p-info-900: color-mix(in srgb, var(--p-info) 50%, black);
+    --p-info-950: color-mix(in srgb, var(--p-info) 40%, black);
+
+    --p-help: rgb(168, 85, 247);
+    --p-help-50: color-mix(in srgb, var(--p-help) 5%, white);
+    --p-help-100: color-mix(in srgb, var(--p-help) 10%, white);
+    --p-help-200: color-mix(in srgb, var(--p-help) 20%, white);
+    --p-help-300: color-mix(in srgb, var(--p-help) 30%, white);
+    --p-help-400: color-mix(in srgb, var(--p-help) 40%, white);
+    --p-help-500: var(--p-help);
+    --p-help-600: color-mix(in srgb, var(--p-help) 80%, black);
+    --p-help-700: color-mix(in srgb, var(--p-help) 70%, black);
+    --p-help-800: color-mix(in srgb, var(--p-help) 60%, black);
+    --p-help-900: color-mix(in srgb, var(--p-help) 50%, black);
+    --p-help-950: color-mix(in srgb, var(--p-help) 40%, black);
+
+    --p-accent: rgb(20, 184, 166);
+    --p-accent-50: color-mix(in srgb, var(--p-accent) 5%, white);
+    --p-accent-100: color-mix(in srgb, var(--p-accent) 10%, white);
+    --p-accent-200: color-mix(in srgb, var(--p-accent) 20%, white);
+    --p-accent-300: color-mix(in srgb, var(--p-accent) 30%, white);
+    --p-accent-400: color-mix(in srgb, var(--p-accent) 40%, white);
+    --p-accent-500: var(--p-accent);
+    --p-accent-600: color-mix(in srgb, var(--p-accent) 80%, black);
+    --p-accent-700: color-mix(in srgb, var(--p-accent) 70%, black);
+    --p-accent-800: color-mix(in srgb, var(--p-accent) 60%, black);
+    --p-accent-900: color-mix(in srgb, var(--p-accent) 50%, black);
+    --p-accent-950: color-mix(in srgb, var(--p-accent) 40%, black);
+
     --p-surface-0: #fff;
     --p-surface-50: #fafafa;
     --p-surface-100: #f4f4f5;