@robosophy/prime-theme 1.0.13 → 2.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/README.md +85 -5
  2. package/dist/index.js +39 -39
  3. package/dist/prime-layers.css +15 -0
  4. package/dist/prime.css +688 -144
  5. package/package.json +4 -3
package/dist/prime.css CHANGED
@@ -1,8 +1,31 @@
1
1
  /* AUTO-GENERATED FILE. DO NOT EDIT MANUALLY. */
2
+ /*
3
+ * Robosophy Prime Theme — compatible con PrimeVue 4 y PrimeReact 10.
4
+ *
5
+ * Selectores duales: cuando un componente tiene nombres de clase distintos
6
+ * en Vue vs React, se incluyen ambos (ej: .p-menu-item-label, .p-menuitem-text).
7
+ * Los comentarios indican la compatibilidad: (both), (Vue-only), (React-only).
8
+ *
9
+ * Nota sobre theming: las variables --p-* del bloque :root son consumidas
10
+ * únicamente por PrimeVue 4 (vía @primeuix/themes). PrimeReact 10 usa su
11
+ * propio sistema de temas CSS (resources/themes/fluent-light/). Las reglas
12
+ * de clase que usan var(--rs-*) directamente funcionan en ambos frameworks.
13
+ *
14
+ * Este archivo usa CSS Cascade Layers. Todos los estilos están en @layer prime-design
15
+ * para permitir que las aplicaciones sobrescriban estos estilos si es necesario.
16
+ */
2
17
  @import "@robosophy/tokens/tokens.css";
3
18
 
4
- @layer primevue-custom {
19
+ @layer prime-base, prime-design;
20
+
21
+ @layer prime-design {
5
22
  :root {
23
+ /*
24
+ * Variables --p-* para PrimeVue 4 (@primeuix/themes).
25
+ * PrimeReact 10 no consume estas variables; usa su propio tema CSS.
26
+ * Las reglas de clase más abajo que referencian var(--p-*) las
27
+ * definen y consumen internamente, por lo que funcionan en ambos.
28
+ */
6
29
  /* === PRIMARY === */
7
30
  --p-primary-100: var(--rs-color-blue-100);
8
31
  --p-primary-500: var(--rs-color-blue-500);
@@ -50,19 +73,28 @@
50
73
  --p-focus-ring-offset: 2px;
51
74
 
52
75
  /* === INPUTS === */
53
- --p-inputtext-background: var(--rs-color-surface-primary);
76
+ --p-inputtext-background: var(--rs-color-neutral-50);
54
77
  --p-inputtext-color: var(--rs-color-text-primary);
55
- --p-inputtext-placeholder-color: var(--rs-color-text-placeholder);
56
- --p-inputtext-border-color: var(--rs-color-stroke-default);
78
+ --p-inputtext-placeholder-color: var(--rs-color-neutral-100);
79
+ --p-inputtext-border-color: var(--rs-color-neutral-700);
57
80
  --p-inputtext-hover-border-color: var(--rs-color-stroke-focused);
58
81
  --p-inputtext-focus-border-color: var(--rs-color-stroke-focused);
59
82
  --p-inputtext-invalid-border-color: var(--rs-color-stroke-error);
60
83
  --p-inputtext-disabled-background: var(--rs-color-background-disabled);
61
84
  --p-inputtext-disabled-color: var(--rs-color-text-secondary);
62
85
  --p-inputtext-font-weight: var(--p-font-weight);
86
+ --p-inputtext-border-radius: 6px;
63
87
 
64
88
  /* === TEXTAREA === */
65
- --p-textarea-hover-border-color: var(--rs-color-stroke-default);
89
+ --p-textarea-background: var(--rs-color-neutral-50);
90
+ --p-textarea-border-color: var(--rs-color-neutral-700);
91
+ --p-textarea-placeholder-color: var(--rs-color-neutral-100);
92
+ --p-textarea-hover-border-color: var(--rs-color-stroke-focused);
93
+ --p-textarea-focus-border-color: var(--rs-color-stroke-focused);
94
+ --p-textarea-border-radius: 6px;
95
+
96
+ /* === ICON === */
97
+ --p-icon-size: 24px;
66
98
 
67
99
  /* === BUTTON === */
68
100
  --p-button-padding-x: 16px;
@@ -104,48 +136,48 @@
104
136
  --p-button-outlined-contrast-border-color: var(--rs-color-stroke-default);
105
137
 
106
138
  /* === BUTTON SUCCESS === */
107
- --p-button-success-background: var(--rs-color-button-green-surface);
108
- --p-button-success-hover-background: var(--rs-color-button-green-surface);
109
- --p-button-success-active-background: var(--rs-color-button-green-surface);
139
+ --p-button-success-background: var(--rs-color-severity-success-background);
140
+ --p-button-success-hover-background: var(--rs-color-severity-success-background);
141
+ --p-button-success-active-background: var(--rs-color-severity-success-background);
110
142
  --p-button-success-color: var(--rs-color-text-button-secondary);
111
143
  --p-button-success-hover-color: var(--rs-color-text-button-secondary);
112
144
  --p-button-success-active-color: var(--rs-color-text-button-secondary);
113
- --p-button-success-border-color: var(--rs-color-button-green-surface);
114
- --p-button-success-hover-border-color: var(--rs-color-button-green-surface);
115
- --p-button-success-active-border-color: var(--rs-color-button-green-surface);
145
+ --p-button-success-border-color: var(--rs-color-severity-success-background);
146
+ --p-button-success-hover-border-color: var(--rs-color-severity-success-background);
147
+ --p-button-success-active-border-color: var(--rs-color-severity-success-background);
116
148
 
117
149
  /* === BUTTON INFO === */
118
- --p-button-info-background: var(--rs-color-button-blue-surface);
119
- --p-button-info-hover-background: var(--rs-color-button-blue-surface);
120
- --p-button-info-active-background: var(--rs-color-button-blue-surface);
150
+ --p-button-info-background: var(--rs-color-severity-info-background);
151
+ --p-button-info-hover-background: var(--rs-color-severity-info-background);
152
+ --p-button-info-active-background: var(--rs-color-severity-info-background);
121
153
  --p-button-info-color: var(--rs-color-text-button-secondary);
122
154
  --p-button-info-hover-color: var(--rs-color-text-button-secondary);
123
155
  --p-button-info-active-color: var(--rs-color-text-button-secondary);
124
- --p-button-info-border-color: var(--rs-color-button-blue-surface);
125
- --p-button-info-hover-border-color: var(--rs-color-button-blue-surface);
126
- --p-button-info-active-border-color: var(--rs-color-button-blue-surface);
156
+ --p-button-info-border-color: var(--rs-color-severity-info-background);
157
+ --p-button-info-hover-border-color: var(--rs-color-severity-info-background);
158
+ --p-button-info-active-border-color: var(--rs-color-severity-info-background);
127
159
 
128
160
  /* === BUTTON WARN === */
129
- --p-button-warn-background: var(--rs-color-button-yellow-surface);
130
- --p-button-warn-hover-background: var(--rs-color-button-yellow-surface);
131
- --p-button-warn-active-background: var(--rs-color-button-yellow-surface);
161
+ --p-button-warn-background: var(--rs-color-severity-warning-background);
162
+ --p-button-warn-hover-background: var(--rs-color-severity-warning-background);
163
+ --p-button-warn-active-background: var(--rs-color-severity-warning-background);
132
164
  --p-button-warn-color: var(--rs-color-text-button-secondary);
133
165
  --p-button-warn-hover-color: var(--rs-color-text-button-secondary);
134
166
  --p-button-warn-active-color: var(--rs-color-text-button-secondary);
135
- --p-button-warn-border-color: var(--rs-color-button-yellow-surface);
136
- --p-button-warn-hover-border-color: var(--rs-color-button-yellow-surface);
137
- --p-button-warn-active-border-color: var(--rs-color-button-yellow-surface);
167
+ --p-button-warn-border-color: var(--rs-color-severity-warning-background);
168
+ --p-button-warn-hover-border-color: var(--rs-color-severity-warning-background);
169
+ --p-button-warn-active-border-color: var(--rs-color-severity-warning-background);
138
170
 
139
171
  /* === BUTTON DANGER === */
140
- --p-button-danger-background: var(--rs-color-button-red-surface);
141
- --p-button-danger-hover-background: var(--rs-color-button-red-surface);
142
- --p-button-danger-active-background: var(--rs-color-button-red-surface);
172
+ --p-button-danger-background: var(--rs-color-severity-danger-background);
173
+ --p-button-danger-hover-background: var(--rs-color-severity-danger-background);
174
+ --p-button-danger-active-background: var(--rs-color-severity-danger-background);
143
175
  --p-button-danger-color: var(--rs-color-text-button-secondary);
144
176
  --p-button-danger-hover-color: var(--rs-color-text-button-secondary);
145
177
  --p-button-danger-active-color: var(--rs-color-text-button-secondary);
146
- --p-button-danger-border-color: var(--rs-color-button-red-surface);
147
- --p-button-danger-hover-border-color: var(--rs-color-button-red-surface);
148
- --p-button-danger-active-border-color: var(--rs-color-button-red-surface);
178
+ --p-button-danger-border-color: var(--rs-color-severity-danger-background);
179
+ --p-button-danger-hover-border-color: var(--rs-color-severity-danger-background);
180
+ --p-button-danger-active-border-color: var(--rs-color-severity-danger-background);
149
181
 
150
182
  /* === CHECKBOX / RADIO === */
151
183
  --p-checkbox-checked-background: var(--rs-color-button-primary);
@@ -190,35 +222,35 @@
190
222
  --p-menu-transition-duration: 150ms;
191
223
 
192
224
  /* === MENSAJES / TOAST === */
193
- --p-message-success-background: var(--rs-color-green-100);
194
- --p-message-success-color: var(--rs-color-green-700);
195
- --p-message-success-border-color: var(--rs-color-stroke-success);
196
- --p-message-warn-background: var(--rs-color-yellow-100);
197
- --p-message-warn-color: var(--rs-color-yellow-700);
198
- --p-message-warn-border-color: var(--rs-color-stroke-caution);
199
- --p-message-error-background: var(--rs-color-red-100);
200
- --p-message-error-color: var(--rs-color-red-700);
201
- --p-message-error-border-color: var(--rs-color-stroke-error);
202
- --p-message-info-background: var(--rs-color-blue-100);
203
- --p-message-info-color: var(--rs-color-blue-700);
204
- --p-message-info-border-color: var(--rs-color-blue-500);
225
+ --p-message-success-background: var(--rs-color-severity-success-background);
226
+ --p-message-success-color: var(--rs-color-severity-success-text);
227
+ --p-message-success-border-color: var(--rs-color-severity-success-border);
228
+ --p-message-warn-background: var(--rs-color-severity-warning-background);
229
+ --p-message-warn-color: var(--rs-color-severity-warning-text);
230
+ --p-message-warn-border-color: var(--rs-color-severity-warning-border);
231
+ --p-message-error-background: var(--rs-color-severity-danger-background);
232
+ --p-message-error-color: var(--rs-color-severity-danger-text);
233
+ --p-message-error-border-color: var(--rs-color-severity-danger-border);
234
+ --p-message-info-background: var(--rs-color-severity-info-background);
235
+ --p-message-info-color: var(--rs-color-severity-info-text);
236
+ --p-message-info-border-color: var(--rs-color-severity-info-border);
205
237
 
206
238
  /* === TOAST === */
207
- --p-toast-info-background: var(--rs-color-blue-100);
208
- --p-toast-info-color: var(--rs-color-blue-700);
209
- --p-toast-info-detail-color: var(--rs-color-gray-700);
210
- --p-toast-success-background: var(--rs-color-green-100);
211
- --p-toast-success-color: var(--rs-color-green-700);
212
- --p-toast-success-detail-color: var(--rs-color-gray-700);
213
- --p-toast-warn-background: var(--rs-color-yellow-100);
214
- --p-toast-warn-color: var(--rs-color-yellow-700);
215
- --p-toast-warn-detail-color: var(--rs-color-gray-700);
216
- --p-toast-error-background: var(--rs-color-red-100);
217
- --p-toast-error-color: var(--rs-color-red-700);
218
- --p-toast-error-detail-color: var(--rs-color-gray-700);
219
- --p-toast-secondary-background: var(--rs-color-gray-100);
220
- --p-toast-secondary-color: var(--rs-color-gray-600);
221
- --p-toast-secondary-detail-color: var(--rs-color-gray-700);
239
+ --p-toast-info-background: var(--rs-color-severity-info-background);
240
+ --p-toast-info-color: var(--rs-color-severity-info-text);
241
+ --p-toast-info-detail-color: var(--rs-color-text-secondary);
242
+ --p-toast-success-background: var(--rs-color-severity-success-background);
243
+ --p-toast-success-color: var(--rs-color-severity-success-text);
244
+ --p-toast-success-detail-color: var(--rs-color-text-secondary);
245
+ --p-toast-warn-background: var(--rs-color-severity-warning-background);
246
+ --p-toast-warn-color: var(--rs-color-severity-warning-text);
247
+ --p-toast-warn-detail-color: var(--rs-color-text-secondary);
248
+ --p-toast-error-background: var(--rs-color-severity-danger-background);
249
+ --p-toast-error-color: var(--rs-color-severity-danger-text);
250
+ --p-toast-error-detail-color: var(--rs-color-text-secondary);
251
+ --p-toast-secondary-background: var(--rs-color-severity-secondary-background);
252
+ --p-toast-secondary-color: var(--rs-color-severity-secondary-text);
253
+ --p-toast-secondary-detail-color: var(--rs-color-text-secondary);
222
254
  --p-toast-contrast-background: var(--rs-color-black-500);
223
255
  --p-toast-contrast-color: var(--rs-color-white-500);
224
256
  --p-toast-contrast-detail-color: var(--rs-color-white-500);
@@ -226,12 +258,30 @@
226
258
  /* === BADGE / TAG === */
227
259
  --p-badge-primary-background: var(--rs-color-button-primary);
228
260
  --p-badge-primary-color: var(--rs-color-text-button-primary);
229
- --p-badge-success-background: var(--rs-color-green-100);
230
- --p-badge-success-color: var(--rs-color-green-500);
231
- --p-badge-warning-background: var(--rs-color-yellow-100);
232
- --p-badge-warning-color: var(--rs-color-yellow-500);
233
- --p-badge-danger-background: var(--rs-color-red-100);
234
- --p-badge-danger-color: var(--rs-color-red-500);
261
+ --p-badge-success-background: var(--rs-color-severity-success-background);
262
+ --p-badge-success-color: var(--rs-color-severity-success-icon);
263
+ --p-badge-warning-background: var(--rs-color-severity-warning-background);
264
+ --p-badge-warning-color: var(--rs-color-severity-warning-icon);
265
+ --p-badge-danger-background: var(--rs-color-severity-danger-background);
266
+ --p-badge-danger-color: var(--rs-color-severity-danger-icon);
267
+ --p-badge-info-background: var(--rs-color-severity-info-background);
268
+ --p-badge-info-color: var(--rs-color-severity-info-icon);
269
+ --p-badge-secondary-background: var(--rs-color-severity-secondary-background);
270
+ --p-badge-secondary-color: var(--rs-color-severity-secondary-icon);
271
+
272
+ /* === TAG === */
273
+ --p-tag-primary-background: var(--rs-color-button-primary);
274
+ --p-tag-primary-color: var(--rs-color-text-button-primary);
275
+ --p-tag-success-background: var(--rs-color-severity-success-background);
276
+ --p-tag-success-color: var(--rs-color-text-button-secondary);
277
+ --p-tag-info-background: var(--rs-color-severity-info-background);
278
+ --p-tag-info-color: var(--rs-color-text-button-secondary);
279
+ --p-tag-warning-background: var(--rs-color-severity-warning-background);
280
+ --p-tag-warning-color: var(--rs-color-text-button-secondary);
281
+ --p-tag-danger-background: var(--rs-color-severity-danger-background);
282
+ --p-tag-danger-color: var(--rs-color-text-button-secondary);
283
+ --p-tag-secondary-background: var(--rs-color-severity-secondary-background);
284
+ --p-tag-secondary-color: var(--rs-color-text-button-secondary);
235
285
 
236
286
  /* === DIALOG === */
237
287
  --p-dialog-title-font-weight: 400;
@@ -275,7 +325,7 @@
275
325
  --p-tabs-active-bar-height: 0;
276
326
  }
277
327
 
278
- /* #region icons */
328
+ /* #region icons (both) */
279
329
  .pi {
280
330
  align-items: center;
281
331
  color: var(--rs-color-text-primary);
@@ -287,9 +337,24 @@
287
337
  justify-content: center;
288
338
  vertical-align: middle;
289
339
  }
290
- .p-input-icon-left > i, .p-input-icon-right>i {
291
- margin-top: unset;
340
+ /* Vue: .p-input-icon-left/right > i | React: .p-icon-field-left/right > .p-input-icon */
341
+ .p-input-icon-left,
342
+ .p-input-icon-right,
343
+ .p-icon-field-left,
344
+ .p-icon-field-right {
345
+ position: relative;
346
+ }
347
+ .p-input-icon-left > i,
348
+ .p-input-icon-right > i,
349
+ .p-icon-field-left > .p-input-icon,
350
+ .p-icon-field-right > .p-input-icon {
351
+ position: absolute;
352
+ top: 50%;
353
+ margin-top: 0 !important;
292
354
  transform: translateY(-50%);
355
+ display: flex;
356
+ align-items: center;
357
+ justify-content: center;
293
358
  }
294
359
  .pi-eye::before {
295
360
  font-family: 'Material Symbols Outlined';
@@ -311,26 +376,33 @@
311
376
  font-family: 'Material Symbols Outlined';
312
377
  content: 'check';
313
378
  }
314
- .p-inputicon {
315
- margin-top: 0 !important;
316
- transform: translateY(-50%);
317
- }
379
+ /* Vue: .p-iconfield | React: .p-icon-field */
380
+ .p-iconfield, .p-icon-field {
381
+ margin-top: 0;
382
+ }
318
383
  /* #endregion */
319
384
 
320
385
  /* #region classes */
321
- /* password */
386
+ /* password (both) */
322
387
  .p-password {
323
388
  width: 100%;
324
389
  }
325
390
  .p-password input {
326
391
  width: 100%;
327
392
  }
328
- /* input */
329
- :is(.p-inputtext) {
393
+ /* input (both) */
394
+ .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)) {
330
395
  font-weight: var(--p-inputtext-font-weight);
331
396
  height: 48px;
332
397
  gap: 10px;
398
+ border-radius: 6px;
399
+ border: 1px solid var(--rs-color-neutral-700);
400
+ background: var(--rs-color-neutral-50);
333
401
  }
402
+ .p-inputtext::placeholder {
403
+ color: var(--rs-color-neutral-100);
404
+ }
405
+ /* Vue-only: PrimeReact 10 no emite clases de tamaño para InputText */
334
406
  .p-inputtext-sm {
335
407
  height: 37px;
336
408
  }
@@ -349,143 +421,588 @@
349
421
  background-color: var(--rs-color-blue-100);
350
422
  border-bottom-left-radius: var(--p-inputtext-border-radius);
351
423
  border-bottom-right-radius: var(--p-inputtext-border-radius);
352
-
353
424
  }
354
- /* select */
355
- .p-select {
425
+ /* textarea (both) */
426
+ .p-textarea, .p-inputtextarea {
427
+ border: 1px solid var(--rs-color-neutral-700);
428
+ border-radius: 6px;
429
+ background: var(--rs-color-neutral-50);
430
+ }
431
+ .p-textarea::placeholder, .p-inputtextarea::placeholder {
432
+ color: var(--rs-color-neutral-100);
433
+ }
434
+ .p-textarea:enabled:focus, .p-inputtextarea:enabled:focus {
435
+ outline: none;
436
+ border-color: var(--rs-color-stroke-focused);
437
+ box-shadow: none;
438
+ }
439
+ /* invalid states (both) */
440
+ .p-inputtext.p-invalid.p-component,
441
+ .p-textarea.p-invalid.p-component,
442
+ .p-inputtextarea.p-invalid.p-component {
443
+ border-color: var(--rs-color-stroke-error) !important;
444
+ }
445
+ .p-dropdown.p-invalid.p-component,
446
+ .p-select.p-invalid.p-component {
447
+ border-color: var(--rs-color-stroke-error) !important;
448
+ }
449
+ .p-password.p-invalid.p-component > .p-inputtext {
450
+ border-color: var(--rs-color-stroke-error) !important;
451
+ }
452
+ .p-cascadeselect.p-invalid.p-component,
453
+ .p-cascade-select.p-invalid.p-component {
454
+ border-color: var(--rs-color-stroke-error) !important;
455
+ }
456
+ .p-multiselect.p-invalid.p-component,
457
+ .p-multi-select.p-invalid.p-component {
458
+ border-color: var(--rs-color-stroke-error) !important;
459
+ }
460
+ /* disabled states (both) */
461
+ .p-inputtext:disabled,
462
+ .p-textarea:disabled,
463
+ .p-inputtextarea:disabled {
464
+ background: var(--rs-color-background-disabled) !important;
465
+ color: var(--rs-color-text-secondary) !important;
466
+ }
467
+ .p-dropdown.p-disabled,
468
+ .p-select.p-disabled {
469
+ background: var(--rs-color-background-disabled) !important;
470
+ }
471
+ .p-dropdown.p-disabled .p-dropdown-label,
472
+ .p-select.p-disabled .p-select-label {
473
+ color: var(--rs-color-text-secondary) !important;
474
+ }
475
+ .p-password.p-disabled > .p-inputtext {
476
+ background: var(--rs-color-background-disabled) !important;
477
+ color: var(--rs-color-text-secondary) !important;
478
+ }
479
+ .p-cascadeselect.p-disabled,
480
+ .p-cascade-select.p-disabled {
481
+ background: var(--rs-color-background-disabled) !important;
482
+ }
483
+ .p-cascadeselect.p-disabled .p-cascadeselect-label,
484
+ .p-cascade-select.p-disabled .p-cascade-select-label {
485
+ color: var(--rs-color-text-secondary) !important;
486
+ }
487
+ .p-multiselect.p-disabled,
488
+ .p-multi-select.p-disabled {
489
+ background: var(--rs-color-background-disabled) !important;
490
+ }
491
+ .p-multiselect.p-disabled .p-multiselect-label,
492
+ .p-multi-select.p-disabled .p-multi-select-label {
493
+ color: var(--rs-color-text-secondary) !important;
494
+ }
495
+ /* select/dropdown (both: .p-select=Vue, .p-dropdown=both) */
496
+ .p-select, .p-dropdown {
356
497
  font-weight: var(--p-select-font-weight);
357
498
  height: 48px;
499
+ border-radius: 6px;
500
+ border: 1px solid var(--rs-color-neutral-700);
501
+ background: var(--rs-color-neutral-50);
502
+ padding: 0 16px;
503
+ }
504
+ .p-select:not(.p-disabled):hover,
505
+ .p-dropdown:not(.p-disabled):hover {
506
+ border-color: var(--rs-color-stroke-focused);
358
507
  }
359
- .p-select-sm {
508
+ /* Vue-only: PrimeReact 10 no emite clases de tamaño para Dropdown */
509
+ .p-select-sm, .p-dropdown-sm {
360
510
  height: 37px;
361
511
  }
362
- .p-select-lg {
512
+ .p-select-lg, .p-dropdown-lg {
363
513
  height: 52px;
364
514
  }
365
- .p-select:not(.p-disabled).p-focus {
366
- outline-color: transparent !important;
367
- border-color: var(--p-select-border-color) !important;
515
+ .p-select:not(.p-disabled).p-focus, .p-dropdown:not(.p-disabled).p-focus {
516
+ outline: none;
517
+ border-color: var(--rs-color-stroke-focused);
518
+ box-shadow: none;
368
519
  }
369
- .p-select-label {
520
+ .p-select-label, .p-dropdown-label {
370
521
  align-self: center;
522
+ border: none;
523
+ background: transparent;
524
+ }
525
+ /* Labels internos de selects - quitar height fijo de .p-inputtext */
526
+ .p-select-label.p-inputtext,
527
+ .p-dropdown-label.p-inputtext,
528
+ .p-cascadeselect-label.p-inputtext,
529
+ .p-cascade-select-label.p-inputtext,
530
+ .p-multiselect-label.p-inputtext,
531
+ .p-multi-select-label.p-inputtext {
532
+ height: auto;
533
+ line-height: 1.5;
534
+ border: none;
535
+ background: transparent;
371
536
  }
372
- /* cascadeselect */
373
- .p-cascadeselect {
537
+ /* Internal containers - remove duplicate borders */
538
+ .p-select-label-container,
539
+ .p-dropdown-label-container,
540
+ .p-select-trigger,
541
+ .p-dropdown-trigger {
542
+ border: none;
543
+ background: transparent;
544
+ }
545
+ /* cascadeselect (both: .p-cascadeselect=React, .p-cascade-select=Vue) */
546
+ .p-cascadeselect, .p-cascade-select {
374
547
  height: 48px;
548
+ border-radius: 6px;
549
+ border: 1px solid var(--rs-color-neutral-700);
550
+ background: var(--rs-color-neutral-50);
551
+ padding: 0 16px;
552
+ }
553
+ .p-cascadeselect:not(.p-disabled):hover,
554
+ .p-cascade-select:not(.p-disabled):hover {
555
+ border-color: var(--rs-color-stroke-focused);
556
+ }
557
+ .p-cascadeselect:not(.p-disabled).p-focus,
558
+ .p-cascade-select:not(.p-disabled).p-focus {
559
+ outline: none;
560
+ border-color: var(--rs-color-stroke-focused);
561
+ box-shadow: none;
375
562
  }
376
- .p-cascadeselect-sm {
563
+ /* Vue-only: PrimeReact 10 no emite clases de tamaño para CascadeSelect */
564
+ .p-cascadeselect-sm, .p-cascade-select-sm {
377
565
  height: 37px;
378
566
  }
379
- .p-cascadeselect-lg {
567
+ .p-cascadeselect-lg, .p-cascade-select-lg {
380
568
  height: 52px;
381
569
  }
382
- .p-cascadeselect-label {
570
+ .p-cascadeselect-label, .p-cascade-select-label {
383
571
  align-self: center;
572
+ border: none;
573
+ background: transparent;
384
574
  }
385
- /* multiselect */
386
- .p-multiselect {
575
+ .p-cascadeselect-label-container,
576
+ .p-cascade-select-label-container,
577
+ .p-cascadeselect-trigger,
578
+ .p-cascade-select-trigger {
579
+ border: none;
580
+ background: transparent;
581
+ }
582
+ /* multiselect (both: .p-multiselect=React, .p-multi-select=Vue) */
583
+ .p-multiselect, .p-multi-select {
387
584
  height: 48px;
585
+ border-radius: 6px;
586
+ border: 1px solid var(--rs-color-neutral-700);
587
+ background: var(--rs-color-neutral-50);
588
+ padding: 0 16px;
589
+ }
590
+ .p-multiselect:not(.p-disabled):hover,
591
+ .p-multi-select:not(.p-disabled):hover {
592
+ border-color: var(--rs-color-stroke-focused);
593
+ }
594
+ .p-multiselect:not(.p-disabled).p-focus,
595
+ .p-multi-select:not(.p-disabled).p-focus {
596
+ outline: none;
597
+ border-color: var(--rs-color-stroke-focused);
598
+ box-shadow: none;
388
599
  }
389
- .p-multiselect-sm {
600
+ /* Vue-only: PrimeReact 10 no emite clases de tamaño para MultiSelect */
601
+ .p-multiselect-sm, .p-multi-select-sm {
390
602
  height: 37px;
391
603
  }
392
- .p-multiselect-lg {
604
+ .p-multiselect-lg, .p-multi-select-lg {
393
605
  height: 52px;
394
606
  }
395
- .p-multiselect-label {
607
+ .p-multiselect-label, .p-multi-select-label {
396
608
  align-self: center;
609
+ line-height: normal;
610
+ border: none;
611
+ background: transparent;
397
612
  }
398
- /* autocomplete */
613
+ .p-multiselect-label-container,
614
+ .p-multi-select-label-container,
615
+ .p-multiselect-trigger,
616
+ .p-multi-select-trigger {
617
+ border: none;
618
+ background: transparent;
619
+ }
620
+ /* autocomplete (both) */
399
621
  .p-autocomplete {
400
622
  height: 48px;
401
623
  }
402
- /* menu */
624
+ /* menu (both: .p-menuitem-text=React, .p-menu-item-label=Vue) */
403
625
  .p-menu {
404
626
  font-family: var(--rs-font-family);
405
627
  font-weight: var(--p-font-weight);
406
628
  }
407
- .p-menu-item-label {
629
+ .p-menu-item-label, .p-menuitem-text {
408
630
  line-height: 1.2;
631
+ color: var(--rs-color-text-primary);
632
+ }
633
+ .p-menu .p-menuitem-link .p-menuitem-text {
634
+ color: var(--rs-color-text-primary);
409
635
  }
410
- /* datepicker */
411
- .p-datepicker-panel {
412
- min-width: 320px !important;
413
- max-width: 320px !important;
636
+ /* datepicker (both: .p-datepicker-panel=React portaled, .p-calendar .p-datepicker=Vue inline) */
637
+ .p-datepicker-panel, .p-calendar .p-datepicker {
638
+ min-width: 320px;
639
+ max-width: 320px;
414
640
  }
415
- .p-datepicker-select-month, .p-datepicker-select-year {
641
+ /* Vue: .p-datepicker-select-month/year | React: .p-datepicker-month/year */
642
+ .p-datepicker-select-month, .p-datepicker-select-year, .p-datepicker-month, .p-datepicker-year {
416
643
  font-family: var(--rs-font-family);
417
644
  }
418
- /* file upload */
419
- .p-file-upload-dashed {
420
- width: 100%;
421
- border: 1px dashed var(--p-primary-500) !important;
422
- background-color: transparent !important;
423
- color: var(--p-primary-500) !important;
424
- }
425
- /* tabs */
426
- .p-tablist {
645
+ /* file upload (both: .p-file-upload-dashed=custom, .p-fileupload-content=React drop zone) */
646
+ .p-file-upload-dashed,
647
+ .p-fileupload.p-fileupload-dashed .p-fileupload-content {
648
+ width: 100%;
649
+ border: 1px dashed var(--p-primary-500);
650
+ background-color: transparent;
651
+ color: var(--p-primary-500);
652
+ }
653
+ /* tabs (both: .p-tablist=Vue Tabs, .p-tabview-nav=both TabView) */
654
+ .p-tablist, .p-tabview-nav {
427
655
  border-bottom: none;
428
656
  }
429
- .p-tab {
657
+ .p-tab, .p-tabview-nav-link {
430
658
  border-radius: 8px 8px 0 0;
431
659
  border-bottom: none;
432
660
  font-size: var(--p-tabs-tab-font-size);
433
661
  }
434
- .p-tab.p-tab-active {
435
- font-weight: var(--p-tabs-tab-active-font-weight) !important;
662
+ .p-tab.p-tab-active, .p-tabview-nav-link.p-tabview-selected {
663
+ font-weight: var(--p-tabs-tab-active-font-weight);
436
664
  }
437
- .p-tablist-tab-list {
665
+ .p-tablist-tab-list, .p-tabview-nav {
438
666
  gap: 16px;
439
667
  }
440
668
 
441
- /* button group */
442
- .p-buttongroup {
669
+ /* button group (both) */
670
+ .p-buttongroup, .p-button-group {
443
671
  width: 100%;
444
672
  justify-content: space-between;
445
673
  }
446
- /* button */
674
+ /* button (both) */
447
675
  .p-button {
448
676
  height: 48px;
449
677
  border-radius: 6px;
450
- gap: 2px;
678
+ font-size: 1rem;
679
+ font-weight: 400;
680
+ gap: 8px;
681
+ }
682
+ .p-button:not(.p-button-link):not(.p-button-text):not(.p-button-outlined):not(.p-button-icon-only) {
683
+ padding: 0 16px;
684
+ }
685
+ .p-button .p-button-icon-left {
686
+ margin-right: 0;
687
+ }
688
+ .p-button .p-button-icon-right {
689
+ margin-left: 0;
690
+ }
691
+ .p-button .p-button-label {
692
+ font-weight: 400;
451
693
  }
452
694
  .p-button-sm {
453
695
  height: 37px;
696
+ font-size: 1rem;
697
+ }
698
+ .p-button-sm:not(.p-button-link):not(.p-button-text):not(.p-button-outlined):not(.p-button-icon-only) {
699
+ padding: 0 16px;
454
700
  }
455
701
  .p-button-lg {
456
702
  height: 52px;
703
+ font-size: 1rem;
704
+ }
705
+ .p-button-lg:not(.p-button-link):not(.p-button-text):not(.p-button-outlined):not(.p-button-icon-only) {
706
+ padding: 0 16px;
457
707
  }
458
708
  .p-button-inline {
459
709
  width: max-content;
460
710
  }
461
711
  .p-button-text:not(:disabled):hover {
462
- background: transparent !important;
712
+ background: transparent;
463
713
  }
464
714
  .p-button.p-button-success .rs-icon {
465
- color: var(--rs-color-green-500) !important;
715
+ color: var(--rs-color-green-500);
466
716
  }
467
717
  .p-button.p-button-info .rs-icon {
468
- color: var(--rs-color-blue-500) !important;
718
+ color: var(--rs-color-blue-500);
469
719
  }
720
+ /* React: .p-button-warning | Vue: .p-button-warn (ambos usan severity "warning") */
721
+ .p-button.p-button-warning .rs-icon,
470
722
  .p-button.p-button-warn .rs-icon {
471
- color: var(--rs-color-yellow-500) !important;
723
+ color: var(--rs-color-yellow-500);
472
724
  }
473
725
  .p-button.p-button-danger .rs-icon {
474
- color: var(--rs-color-red-500) !important;
726
+ color: var(--rs-color-red-500);
727
+ }
728
+ /* Base button overrides - match fluent-light specificity for React */
729
+ .p-button:not(.p-button-link):not(.p-button-text):not(.p-button-outlined):not(.p-button-success):not(.p-button-info):not(.p-button-warning):not(.p-button-warn):not(.p-button-danger):not(.p-button-secondary) {
730
+ background: var(--rs-color-button-primary);
731
+ border-color: var(--rs-color-button-primary);
732
+ color: var(--rs-color-text-button-primary);
733
+ }
734
+ .p-button:not(.p-button-link):not(.p-button-text):not(.p-button-outlined):not(.p-button-success):not(.p-button-info):not(.p-button-warning):not(.p-button-warn):not(.p-button-danger):not(.p-button-secondary):not(:disabled):hover {
735
+ background: var(--rs-color-button-primary-hover);
736
+ border-color: var(--rs-color-button-primary-hover);
737
+ color: var(--rs-color-text-button-primary);
738
+ }
739
+ .p-button:not(.p-button-link):not(.p-button-text):not(.p-button-outlined):not(.p-button-success):not(.p-button-info):not(.p-button-warning):not(.p-button-warn):not(.p-button-danger):not(.p-button-secondary):not(:disabled):active {
740
+ background: var(--rs-color-button-primary-hover);
741
+ border-color: var(--rs-color-button-primary-hover);
742
+ color: var(--rs-color-text-button-primary);
743
+ }
744
+ .p-button.p-button-outlined {
745
+ background: transparent;
746
+ border-color: var(--rs-color-text-button-tertiary);
747
+ color: var(--rs-color-text-button-tertiary);
748
+ }
749
+ .p-button.p-button-outlined:not(:disabled):hover {
750
+ background: var(--rs-color-button-blue-surface);
751
+ border-color: var(--rs-color-text-button-tertiary);
752
+ color: var(--rs-color-text-button-tertiary);
753
+ }
754
+ .p-button.p-button-text {
755
+ background: transparent;
756
+ border-color: transparent;
757
+ color: var(--rs-color-text-button-tertiary);
758
+ }
759
+ .p-button.p-button-text:not(:disabled):hover {
760
+ background: var(--rs-color-button-blue-surface);
761
+ border-color: transparent;
762
+ color: var(--rs-color-text-button-tertiary);
763
+ }
764
+ /* Button severity overrides - match fluent-light specificity for React */
765
+ /* PRIMARY */
766
+ .p-button.p-button-primary, .p-button-group.p-button-primary > .p-button, .p-splitbutton.p-button-primary > .p-button, .p-fileupload-choose.p-button-primary {
767
+ background: var(--rs-color-button-primary);
768
+ border-color: var(--rs-color-button-primary);
769
+ color: var(--rs-color-text-button-primary);
770
+ }
771
+ .p-button.p-button-primary:not(:disabled):hover, .p-button-group.p-button-primary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-primary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-primary:not(:disabled):hover {
772
+ background: var(--rs-color-button-primary-hover);
773
+ border-color: var(--rs-color-button-primary-hover);
774
+ color: var(--rs-color-text-button-primary);
775
+ }
776
+ .p-button.p-button-primary:not(:disabled):active, .p-button-group.p-button-primary > .p-button:not(:disabled):active, .p-splitbutton.p-button-primary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-primary:not(:disabled):active {
777
+ background: var(--rs-color-button-primary-hover);
778
+ border-color: var(--rs-color-button-primary-hover);
779
+ color: var(--rs-color-text-button-primary);
780
+ }
781
+ .p-button.p-button-primary.p-button-outlined, .p-button-group.p-button-primary > .p-button.p-button-outlined, .p-splitbutton.p-button-primary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-primary.p-button-outlined {
782
+ background: transparent;
783
+ border-color: var(--rs-color-text-button-tertiary);
784
+ color: var(--rs-color-text-button-tertiary);
785
+ }
786
+ .p-button.p-button-primary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-primary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-primary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-primary.p-button-outlined:not(:disabled):hover {
787
+ background: var(--rs-color-button-blue-surface);
788
+ border-color: var(--rs-color-text-button-tertiary);
789
+ color: var(--rs-color-text-button-tertiary);
790
+ }
791
+ .p-button.p-button-primary.p-button-text, .p-button-group.p-button-primary > .p-button.p-button-text, .p-splitbutton.p-button-primary > .p-button.p-button-text, .p-fileupload-choose.p-button-primary.p-button-text {
792
+ background: transparent;
793
+ border-color: transparent;
794
+ color: var(--rs-color-text-button-tertiary);
795
+ }
796
+ .p-button.p-button-primary.p-button-text:not(:disabled):hover, .p-button-group.p-button-primary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-primary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-primary.p-button-text:not(:disabled):hover {
797
+ background: var(--rs-color-button-blue-surface);
798
+ border-color: transparent;
799
+ color: var(--rs-color-text-button-tertiary);
800
+ }
801
+
802
+ /* SECONDARY */
803
+ .p-button.p-button-secondary, .p-button-group.p-button-secondary > .p-button, .p-splitbutton.p-button-secondary > .p-button, .p-fileupload-choose.p-button-secondary {
804
+ background: var(--rs-color-button-secondary);
805
+ border-color: var(--rs-color-button-secondary);
806
+ color: var(--rs-color-text-button-secondary);
807
+ }
808
+ .p-button.p-button-secondary:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-secondary:not(:disabled):hover {
809
+ background: var(--rs-color-button-secondary-hover);
810
+ border-color: var(--rs-color-button-secondary-hover);
811
+ color: var(--rs-color-text-button-secondary);
812
+ }
813
+ .p-button.p-button-secondary:not(:disabled):active, .p-button-group.p-button-secondary > .p-button:not(:disabled):active, .p-splitbutton.p-button-secondary > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-secondary:not(:disabled):active {
814
+ background: var(--rs-color-button-secondary-hover);
815
+ border-color: var(--rs-color-button-secondary-hover);
816
+ color: var(--rs-color-text-button-secondary);
817
+ }
818
+ .p-button.p-button-secondary.p-button-outlined, .p-button-group.p-button-secondary > .p-button.p-button-outlined, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined, .p-fileupload-choose.p-button-secondary.p-button-outlined {
819
+ background: transparent;
820
+ border-color: var(--rs-color-stroke-default);
821
+ color: var(--rs-color-text-button-secondary);
822
+ }
823
+ .p-button.p-button-secondary.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-outlined:not(:disabled):hover {
824
+ background: transparent;
825
+ border-color: var(--rs-color-stroke-default);
826
+ color: var(--rs-color-text-button-secondary);
827
+ }
828
+ .p-button.p-button-secondary.p-button-text, .p-button-group.p-button-secondary > .p-button.p-button-text, .p-splitbutton.p-button-secondary > .p-button.p-button-text, .p-fileupload-choose.p-button-secondary.p-button-text {
829
+ background: transparent;
830
+ border-color: transparent;
831
+ color: var(--rs-color-text-button-secondary);
832
+ }
833
+ .p-button.p-button-secondary.p-button-text:not(:disabled):hover, .p-button-group.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-secondary > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-secondary.p-button-text:not(:disabled):hover {
834
+ background: transparent;
835
+ border-color: transparent;
836
+ color: var(--rs-color-text-button-secondary);
837
+ }
838
+
839
+ /* SUCCESS */
840
+ .p-button.p-button-success, .p-button-group.p-button-success > .p-button, .p-splitbutton.p-button-success > .p-button, .p-fileupload-choose.p-button-success {
841
+ background: var(--rs-color-severity-success-background);
842
+ border-color: var(--rs-color-severity-success-background);
843
+ color: var(--rs-color-text-button-secondary);
844
+ }
845
+ .p-button.p-button-success:not(:disabled):hover, .p-button-group.p-button-success > .p-button:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-success:not(:disabled):hover {
846
+ background: var(--rs-color-severity-success-background);
847
+ border-color: var(--rs-color-severity-success-background);
848
+ color: var(--rs-color-text-button-secondary);
849
+ }
850
+ .p-button.p-button-success:not(:disabled):active, .p-button-group.p-button-success > .p-button:not(:disabled):active, .p-splitbutton.p-button-success > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-success:not(:disabled):active {
851
+ background: var(--rs-color-severity-success-background);
852
+ border-color: var(--rs-color-severity-success-background);
853
+ color: var(--rs-color-text-button-secondary);
854
+ }
855
+ .p-button.p-button-success.p-button-outlined, .p-button-group.p-button-success > .p-button.p-button-outlined, .p-splitbutton.p-button-success > .p-button.p-button-outlined, .p-fileupload-choose.p-button-success.p-button-outlined {
856
+ background: transparent;
857
+ border-color: var(--rs-color-severity-success-icon);
858
+ color: var(--rs-color-severity-success-icon);
859
+ }
860
+ .p-button.p-button-success.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-outlined:not(:disabled):hover {
861
+ background: var(--rs-color-severity-success-background);
862
+ border-color: var(--rs-color-severity-success-icon);
863
+ color: var(--rs-color-severity-success-icon);
864
+ }
865
+ .p-button.p-button-success.p-button-text, .p-button-group.p-button-success > .p-button.p-button-text, .p-splitbutton.p-button-success > .p-button.p-button-text, .p-fileupload-choose.p-button-success.p-button-text {
866
+ background: transparent;
867
+ border-color: transparent;
868
+ color: var(--rs-color-severity-success-icon);
869
+ }
870
+ .p-button.p-button-success.p-button-text:not(:disabled):hover, .p-button-group.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-success > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-success.p-button-text:not(:disabled):hover {
871
+ background: var(--rs-color-severity-success-background);
872
+ border-color: transparent;
873
+ color: var(--rs-color-severity-success-icon);
874
+ }
875
+
876
+ /* INFO */
877
+ .p-button.p-button-info, .p-button-group.p-button-info > .p-button, .p-splitbutton.p-button-info > .p-button, .p-fileupload-choose.p-button-info {
878
+ background: var(--rs-color-severity-info-background);
879
+ border-color: var(--rs-color-severity-info-background);
880
+ color: var(--rs-color-text-button-secondary);
881
+ }
882
+ .p-button.p-button-info:not(:disabled):hover, .p-button-group.p-button-info > .p-button:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-info:not(:disabled):hover {
883
+ background: var(--rs-color-severity-info-background);
884
+ border-color: var(--rs-color-severity-info-background);
885
+ color: var(--rs-color-text-button-secondary);
886
+ }
887
+ .p-button.p-button-info:not(:disabled):active, .p-button-group.p-button-info > .p-button:not(:disabled):active, .p-splitbutton.p-button-info > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-info:not(:disabled):active {
888
+ background: var(--rs-color-severity-info-background);
889
+ border-color: var(--rs-color-severity-info-background);
890
+ color: var(--rs-color-text-button-secondary);
891
+ }
892
+ .p-button.p-button-info.p-button-outlined, .p-button-group.p-button-info > .p-button.p-button-outlined, .p-splitbutton.p-button-info > .p-button.p-button-outlined, .p-fileupload-choose.p-button-info.p-button-outlined {
893
+ background: transparent;
894
+ border-color: var(--rs-color-severity-info-icon);
895
+ color: var(--rs-color-severity-info-icon);
896
+ }
897
+ .p-button.p-button-info.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-outlined:not(:disabled):hover {
898
+ background: var(--rs-color-severity-info-background);
899
+ border-color: var(--rs-color-severity-info-icon);
900
+ color: var(--rs-color-severity-info-icon);
901
+ }
902
+ .p-button.p-button-info.p-button-text, .p-button-group.p-button-info > .p-button.p-button-text, .p-splitbutton.p-button-info > .p-button.p-button-text, .p-fileupload-choose.p-button-info.p-button-text {
903
+ background: transparent;
904
+ border-color: transparent;
905
+ color: var(--rs-color-blue-500);
906
+ }
907
+ .p-button.p-button-info.p-button-text:not(:disabled):hover, .p-button-group.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-info > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-info.p-button-text:not(:disabled):hover {
908
+ background: var(--rs-color-severity-info-background);
909
+ border-color: transparent;
910
+ color: var(--rs-color-severity-info-icon);
911
+ }
912
+
913
+ /* WARNING (React: .p-button-warning | Vue: .p-button-warn) */
914
+ .p-button.p-button-warning, .p-button-group.p-button-warning > .p-button, .p-splitbutton.p-button-warning > .p-button, .p-fileupload-choose.p-button-warning,
915
+ .p-button.p-button-warn, .p-button-group.p-button-warn > .p-button, .p-splitbutton.p-button-warn > .p-button, .p-fileupload-choose.p-button-warn {
916
+ background: var(--rs-color-severity-warning-background);
917
+ border-color: var(--rs-color-severity-warning-background);
918
+ color: var(--rs-color-text-button-secondary);
919
+ }
920
+ .p-button.p-button-warning:not(:disabled):hover, .p-button-group.p-button-warning > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warning:not(:disabled):hover,
921
+ .p-button.p-button-warn:not(:disabled):hover, .p-button-group.p-button-warn > .p-button:not(:disabled):hover, .p-splitbutton.p-button-warn > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-warn:not(:disabled):hover {
922
+ background: var(--rs-color-severity-warning-background);
923
+ border-color: var(--rs-color-severity-warning-background);
924
+ color: var(--rs-color-text-button-secondary);
925
+ }
926
+ .p-button.p-button-warning:not(:disabled):active, .p-button-group.p-button-warning > .p-button:not(:disabled):active, .p-splitbutton.p-button-warning > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warning:not(:disabled):active,
927
+ .p-button.p-button-warn:not(:disabled):active, .p-button-group.p-button-warn > .p-button:not(:disabled):active, .p-splitbutton.p-button-warn > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-warn:not(:disabled):active {
928
+ background: var(--rs-color-severity-warning-background);
929
+ border-color: var(--rs-color-severity-warning-background);
930
+ color: var(--rs-color-text-button-secondary);
931
+ }
932
+ .p-button.p-button-warning.p-button-outlined, .p-button-group.p-button-warning > .p-button.p-button-outlined, .p-splitbutton.p-button-warning > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warning.p-button-outlined,
933
+ .p-button.p-button-warn.p-button-outlined, .p-button-group.p-button-warn > .p-button.p-button-outlined, .p-splitbutton.p-button-warn > .p-button.p-button-outlined, .p-fileupload-choose.p-button-warn.p-button-outlined {
934
+ background: transparent;
935
+ border-color: var(--rs-color-severity-warning-icon);
936
+ color: var(--rs-color-severity-warning-icon);
937
+ }
938
+ .p-button.p-button-warning.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-outlined:not(:disabled):hover,
939
+ .p-button.p-button-warn.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-warn > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-warn > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-warn.p-button-outlined:not(:disabled):hover {
940
+ background: var(--rs-color-severity-warning-background);
941
+ border-color: var(--rs-color-severity-warning-icon);
942
+ color: var(--rs-color-severity-warning-icon);
943
+ }
944
+ .p-button.p-button-warning.p-button-text, .p-button-group.p-button-warning > .p-button.p-button-text, .p-splitbutton.p-button-warning > .p-button.p-button-text, .p-fileupload-choose.p-button-warning.p-button-text,
945
+ .p-button.p-button-warn.p-button-text, .p-button-group.p-button-warn > .p-button.p-button-text, .p-splitbutton.p-button-warn > .p-button.p-button-text, .p-fileupload-choose.p-button-warn.p-button-text {
946
+ background: transparent;
947
+ border-color: transparent;
948
+ color: var(--rs-color-severity-warning-icon);
949
+ }
950
+ .p-button.p-button-warning.p-button-text:not(:disabled):hover, .p-button-group.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warning > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warning.p-button-text:not(:disabled):hover,
951
+ .p-button.p-button-warn.p-button-text:not(:disabled):hover, .p-button-group.p-button-warn > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-warn > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-warn.p-button-text:not(:disabled):hover {
952
+ background: var(--rs-color-severity-warning-background);
953
+ border-color: transparent;
954
+ color: var(--rs-color-severity-warning-icon);
955
+ }
956
+
957
+ /* DANGER */
958
+ .p-button.p-button-danger, .p-button-group.p-button-danger > .p-button, .p-splitbutton.p-button-danger > .p-button, .p-fileupload-choose.p-button-danger {
959
+ background: var(--rs-color-severity-danger-background);
960
+ border-color: var(--rs-color-severity-danger-background);
961
+ color: var(--rs-color-text-button-secondary);
962
+ }
963
+ .p-button.p-button-danger:not(:disabled):hover, .p-button-group.p-button-danger > .p-button:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button:not(:disabled):hover, .p-fileupload-choose.p-button-danger:not(:disabled):hover {
964
+ background: var(--rs-color-severity-danger-background);
965
+ border-color: var(--rs-color-severity-danger-background);
966
+ color: var(--rs-color-text-button-secondary);
967
+ }
968
+ .p-button.p-button-danger:not(:disabled):active, .p-button-group.p-button-danger > .p-button:not(:disabled):active, .p-splitbutton.p-button-danger > .p-button:not(:disabled):active, .p-fileupload-choose.p-button-danger:not(:disabled):active {
969
+ background: var(--rs-color-severity-danger-background);
970
+ border-color: var(--rs-color-severity-danger-background);
971
+ color: var(--rs-color-text-button-secondary);
972
+ }
973
+ .p-button.p-button-danger.p-button-outlined, .p-button-group.p-button-danger > .p-button.p-button-outlined, .p-splitbutton.p-button-danger > .p-button.p-button-outlined, .p-fileupload-choose.p-button-danger.p-button-outlined {
974
+ background: transparent;
975
+ border-color: var(--rs-color-severity-danger-icon);
976
+ color: var(--rs-color-severity-danger-icon);
977
+ }
978
+ .p-button.p-button-danger.p-button-outlined:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-outlined:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-outlined:not(:disabled):hover {
979
+ background: var(--rs-color-severity-danger-background);
980
+ border-color: var(--rs-color-severity-danger-icon);
981
+ color: var(--rs-color-severity-danger-icon);
982
+ }
983
+ .p-button.p-button-danger.p-button-text, .p-button-group.p-button-danger > .p-button.p-button-text, .p-splitbutton.p-button-danger > .p-button.p-button-text, .p-fileupload-choose.p-button-danger.p-button-text {
984
+ background: transparent;
985
+ border-color: transparent;
986
+ color: var(--rs-color-severity-danger-icon);
987
+ }
988
+ .p-button.p-button-danger.p-button-text:not(:disabled):hover, .p-button-group.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-splitbutton.p-button-danger > .p-button.p-button-text:not(:disabled):hover, .p-fileupload-choose.p-button-danger.p-button-text:not(:disabled):hover {
989
+ background: var(--rs-color-severity-danger-background);
990
+ border-color: transparent;
991
+ color: var(--rs-color-severity-danger-icon);
475
992
  }
476
993
  .p-button > .icon-container {
477
994
  line-height: 0;
478
995
  }
479
- /* dialog */
996
+ /* dialog (both) */
480
997
  .p-dialog {
481
- border-radius: 8px !important;
998
+ border-radius: 8px;
482
999
  }
483
1000
  .p-dialog-content {
484
1001
  display: flex;
485
1002
  flex-direction: column;
486
1003
  gap: 1em;
487
1004
  }
488
- /* tooltip */
1005
+ /* tooltip (both) */
489
1006
  .p-tooltip {
490
1007
  max-width: 300px;
491
1008
  }
@@ -505,40 +1022,41 @@
505
1022
  background-color: var(--rs-color-blue-100);
506
1023
  color: var(--rs-color-blue-500);
507
1024
  }
508
- /* icon field compatibility */
509
- .p-iconfield-money > .p-inputtext{
1025
+ /* icon field (both: .p-iconfield=Vue, .p-icon-field=React) */
1026
+ .p-iconfield-money > .p-inputtext, .p-icon-field-money > .p-inputtext {
510
1027
  padding-inline-start: calc((var(--p-form-field-padding-x) * 3) + var(--p-icon-size));
511
1028
  }
512
- .p-iconfield .p-inputtext {
1029
+ .p-iconfield .p-inputtext, .p-icon-field .p-inputtext {
513
1030
  width: 100%;
514
1031
  }
515
- .p-iconfield .p-inputicon {
1032
+ .p-iconfield .p-inputicon, .p-icon-field .p-input-icon {
516
1033
  user-select: none;
517
1034
  }
518
- /* message */
519
- .p-message-text {
1035
+ /* message (both: .p-message-text=Vue, .p-inline-message-text=both) */
1036
+ .p-message-text, .p-inline-message-text {
520
1037
  display: flex;
521
1038
  align-items: anchor-center;
522
1039
  gap: 8px;
523
1040
  font-size: 0.9em;
524
1041
  font-weight: 400;
525
1042
  }
526
- /* drawer */
527
- .p-drawer-header {
1043
+ /* drawer/sidebar (both: .p-drawer-*=Vue, .p-sidebar-*=React) */
1044
+ .p-drawer-header, .p-sidebar-header {
528
1045
  border-bottom: 1px solid var(--rs-color-stroke-disabled);
529
1046
  }
530
- .p-drawer-close-button {
1047
+ .p-drawer-close-button, .p-sidebar-close {
531
1048
  width: auto;
532
1049
  height: auto;
533
1050
  padding: 2px;
534
1051
  }
1052
+ /* Vue-only: PrimeReact 10 no emite .p-checkbox-lg */
535
1053
  .p-checkbox-lg, .p-checkbox-lg .p-checkbox-box:before {
536
1054
  left: 4px;
537
1055
  }
538
1056
  .p-checkbox-box::before {
539
1057
  display: none;
540
1058
  }
541
- /* datatable */
1059
+ /* datatable (both) */
542
1060
  .p-datatable-table {
543
1061
  table-layout: auto;
544
1062
  }
@@ -552,7 +1070,7 @@
552
1070
  .p-datatable-tbody > tr:hover > td {
553
1071
  background-color: var(--rs-color-gray-100);
554
1072
  }
555
- /* toast */
1073
+ /* toast (both) */
556
1074
  .p-toast-message-content {
557
1075
  gap: 0.5rem;
558
1076
  padding: 0.75rem 1rem;
@@ -571,20 +1089,46 @@
571
1089
  display: flex;
572
1090
  margin-left: auto;
573
1091
  }
574
- .p-toast-message-close {
1092
+ .p-toast-message-close, .p-toast-icon-close {
575
1093
  align-items: center;
576
1094
  display: inline-flex;
577
1095
  justify-content: center;
578
1096
  padding: 0.25rem;
579
1097
  }
1098
+ /* tag (both) */
1099
+ .p-tag.p-tag-primary {
1100
+ background: var(--rs-color-button-primary);
1101
+ color: var(--rs-color-text-button-primary);
1102
+ }
1103
+ .p-tag.p-tag-success {
1104
+ background: var(--rs-color-severity-success-background);
1105
+ color: var(--rs-color-text-button-secondary);
1106
+ }
1107
+ .p-tag.p-tag-info {
1108
+ background: var(--rs-color-severity-info-background);
1109
+ color: var(--rs-color-text-button-secondary);
1110
+ }
1111
+ .p-tag.p-tag-warning {
1112
+ background: var(--rs-color-severity-warning-background);
1113
+ color: var(--rs-color-text-button-secondary);
1114
+ }
1115
+ .p-tag.p-tag-danger {
1116
+ background: var(--rs-color-severity-danger-background);
1117
+ color: var(--rs-color-text-button-secondary);
1118
+ }
1119
+ .p-tag.p-tag-secondary {
1120
+ background: var(--rs-color-severity-secondary-background);
1121
+ color: var(--rs-color-text-button-secondary);
1122
+ }
580
1123
  /* #endregion */
581
- }
582
1124
 
583
- /* title-only toast overrides */
584
- .p-toast-message-content:not(:has(.p-toast-detail)) {
585
- align-items: center;
586
- }
587
- .p-toast-message-content:not(:has(.p-toast-detail)) .p-toast-close-button {
588
- margin-block: 0 !important;
589
- right: 0;
1125
+ /* title-only toast overrides */
1126
+ .p-toast-message-content:not(:has(.p-toast-detail)) {
1127
+ align-items: center;
1128
+ }
1129
+ .p-toast-message-content:not(:has(.p-toast-detail)) .p-toast-close-button,
1130
+ .p-toast-message-content:not(:has(.p-toast-detail)) .p-toast-icon-close {
1131
+ margin-block: 0;
1132
+ right: 0;
1133
+ }
590
1134
  }