@robosophy/prime-theme 1.0.14 → 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 +114 -34
  2. package/dist/index.js +61 -27
  3. package/dist/prime-layers.css +15 -0
  4. package/dist/prime.css +1133 -588
  5. package/package.json +37 -36
package/dist/prime.css CHANGED
@@ -1,589 +1,1134 @@
1
1
  /* AUTO-GENERATED FILE. DO NOT EDIT MANUALLY. */
2
- @import "@robosophy/tokens/tokens.css";
3
-
4
- @layer primevue-custom {
5
- :root {
6
- /* === PRIMARY === */
7
- --p-primary-100: var(--rs-color-blue-100);
8
- --p-primary-500: var(--rs-color-blue-500);
9
- --p-primary-700: var(--rs-color-blue-700);
10
- --p-primary-color: var(--rs-color-blue-500);
11
- --p-primary-hover-color: var(--rs-color-blue-700);
12
- --p-primary-active-color: var(--rs-color-blue-700);
13
- --p-primary-contrast-color: var(--rs-color-white-500);
14
-
15
- --p-font-family: var(--rs-font-family);
16
- --p-font-weight: 300;
17
-
18
- --p-form-field-padding-x: 16px;
19
- --p-form-field-sm-padding-y: 0;
20
- --p-form-field-sm-padding-x: 16px;
21
- --p-form-field-lg-padding-y: 0;
22
- --p-form-field-lg-padding-x: 16px;
23
-
24
- /* === SURFACE === */
25
- --p-surface-ground: var(--rs-color-background);
26
- --p-surface-section: var(--rs-color-surface-primary);
27
- --p-surface-card: var(--rs-color-surface-primary);
28
- --p-surface-overlay: var(--rs-color-surface-primary);
29
- --p-surface-border: var(--rs-color-stroke-default);
30
- --p-surface-hover: var(--rs-color-blue-100);
31
-
32
- /* === TEXT === */
33
- --p-text-color: var(--rs-color-text-primary);
34
- --p-text-muted-color: var(--rs-color-text-secondary);
35
- --p-text-hover-color: var(--rs-color-text-primary);
36
-
37
- /* === STATUS === */
38
- --p-success-color: var(--rs-color-green-500);
39
- --p-success-contrast-color: var(--rs-color-white-500);
40
- --p-warning-color: var(--rs-color-yellow-500);
41
- --p-warning-contrast-color: var(--rs-color-white-500);
42
- --p-danger-color: var(--rs-color-red-500);
43
- --p-danger-contrast-color: var(--rs-color-white-500);
44
- --p-info-color: var(--rs-color-blue-500);
45
- --p-info-contrast-color: var(--rs-color-white-500);
46
-
47
- /* === FOCUS / OUTLINE === */
48
- --p-focus-ring-color: var(--rs-color-stroke-focused);
49
- --p-focus-ring-width: 2px;
50
- --p-focus-ring-offset: 2px;
51
-
52
- /* === INPUTS === */
53
- --p-inputtext-background: var(--rs-color-surface-primary);
54
- --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);
57
- --p-inputtext-hover-border-color: var(--rs-color-stroke-focused);
58
- --p-inputtext-focus-border-color: var(--rs-color-stroke-focused);
59
- --p-inputtext-invalid-border-color: var(--rs-color-stroke-error);
60
- --p-inputtext-disabled-background: var(--rs-color-background-disabled);
61
- --p-inputtext-disabled-color: var(--rs-color-text-secondary);
62
- --p-inputtext-font-weight: var(--p-font-weight);
63
-
64
- /* === TEXTAREA === */
65
- --p-textarea-hover-border-color: var(--rs-color-stroke-default);
66
-
67
- /* === BUTTON === */
68
- --p-button-padding-x: 16px;
69
- --p-button-sm-padding-x: 16px;
70
- --p-button-lg-padding-x: 16px;
71
- --p-button-label-font-weight: 400;
72
- --p-button-label-font-size: 14px;
73
-
74
- /* === BUTTON PRIMARY === */
75
- --p-button-primary-background: var(--rs-color-button-primary);
76
- --p-button-primary-hover-background: var(--rs-color-button-primary-hover);
77
- --p-button-primary-active-background: var(--rs-color-button-primary-hover);
78
- --p-button-primary-color: var(--rs-color-text-button-primary);
79
- --p-button-primary-hover-color: var(--rs-color-text-button-primary);
80
- --p-button-primary-border-color: var(--rs-color-button-primary);
81
- --p-button-primary-hover-border-color: var(--rs-color-button-primary-hover);
82
-
83
- /* === BUTTON SECONDARY === */
84
- --p-button-secondary-background: var(--rs-color-button-secondary);
85
- --p-button-secondary-hover-background: var(--rs-color-button-secondary-hover);
86
- --p-button-secondary-color: var(--rs-color-text-button-secondary);
87
- --p-button-secondary-hover-color: var(--rs-color-text-button-secondary);
88
- --p-button-secondary-border-color: var(--rs-color-button-secondary);
89
- --p-button-secondary-hover-border-color: var(--rs-color-button-secondary-hover);
90
-
91
- /* === BUTTON OUTLINED (tertiary) === */
92
- --p-button-outlined-primary-color: var(--rs-color-text-button-tertiary);
93
- --p-button-outlined-primary-hover-color: var(--rs-color-text-button-tertiary-hover);
94
- --p-button-outlined-primary-border-color: var(--rs-color-text-button-tertiary);
95
- --p-button-outlined-primary-hover-border-color: var(--rs-color-text-button-tertiary-hover);
96
- --p-button-outlined-primary-hover-background: var(--rs-color-button-blue-surface);
97
-
98
- /* === BUTTON OUTLINED SECONDARY === */
99
- --p-button-outlined-secondary-color: var(--rs-color-text-button-secondary);
100
- --p-button-outlined-secondary-border-color: var(--rs-color-stroke-default);
101
- --p-button-outlined-secondary-hover-background: transparent;
102
- --p-button-outlined-secondary-active-background: transparent;
103
-
104
- --p-button-outlined-contrast-border-color: var(--rs-color-stroke-default);
105
-
106
- /* === 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);
110
- --p-button-success-color: var(--rs-color-text-button-secondary);
111
- --p-button-success-hover-color: var(--rs-color-text-button-secondary);
112
- --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);
116
-
117
- /* === 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);
121
- --p-button-info-color: var(--rs-color-text-button-secondary);
122
- --p-button-info-hover-color: var(--rs-color-text-button-secondary);
123
- --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);
127
-
128
- /* === 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);
132
- --p-button-warn-color: var(--rs-color-text-button-secondary);
133
- --p-button-warn-hover-color: var(--rs-color-text-button-secondary);
134
- --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);
138
-
139
- /* === 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);
143
- --p-button-danger-color: var(--rs-color-text-button-secondary);
144
- --p-button-danger-hover-color: var(--rs-color-text-button-secondary);
145
- --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);
149
-
150
- /* === CHECKBOX / RADIO === */
151
- --p-checkbox-checked-background: var(--rs-color-button-primary);
152
- --p-checkbox-checked-hover-background: var(--rs-color-button-primary-hover);
153
- --p-checkbox-checked-border-color: var(--rs-color-button-primary);
154
- --p-radio-button-checked-background: var(--rs-color-button-primary);
155
- --p-radio-button-checked-border-color: var(--rs-color-button-primary);
156
- --p-checkbox-lg-width: 24px;
157
- --p-checkbox-lg-height: 24px;
158
- --p-checkbox-icon-lg-size: 12px;
159
- --p-border-radius-xs: 3px;
160
-
161
- /* === SELECT / DROPDOWN === */
162
- --p-select-background: var(--rs-color-surface-primary);
163
- --p-select-color: var(--rs-color-text-primary);
164
- --p-select-border-color: var(--rs-color-stroke-default);
165
- --p-select-hover-border-color: var(--rs-color-stroke-focused);
166
- --p-select-focus-border-color: var(--rs-color-stroke-focused);
167
- --p-select-placeholder-color: var(--rs-color-text-placeholder);
168
- --p-select-option-selected-background: var(--rs-color-button-blue-surface);
169
- --p-select-option-selected-color: var(--rs-color-text-primary);
170
- --p-select-option-focus-background: var(--rs-color-button-blue-surface);
171
- --p-select-option-selected-focus-color: var(--rs-color-button-secondary);
172
- --p-select-font-weight: var(--p-font-weight);
173
-
174
- /* === MENU === */
175
- --p-menu-background: var(--rs-color-surface-primary);
176
- --p-menu-color: var(--rs-color-text-primary);
177
- --p-menu-border-color: var(--rs-color-stroke-default);
178
- --p-menu-border-radius: 4px;
179
- --p-menu-list-padding: 0;
180
- --p-menu-list-gap: 0;
181
- --p-menu-item-color: var(--rs-color-text-primary);
182
- --p-menu-item-focus-background: var(--rs-color-button-blue-surface);
183
- --p-menu-item-focus-color: var(--rs-color-text-primary);
184
- --p-menu-item-border-radius: 0;
185
- --p-menu-item-gap: 8px;
186
- --p-menu-item-icon-color: var(--rs-color-icon-secondary);
187
- --p-menu-item-icon-focus-color: var(--rs-color-icon-secondary);
188
- --p-menu-item-padding: 10px 14px;
189
- --p-menu-shadow: 0 8px 24px rgb(0 0 0 / 18%);
190
- --p-menu-transition-duration: 150ms;
191
-
192
- /* === 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);
205
-
206
- /* === 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);
222
- --p-toast-contrast-background: var(--rs-color-black-500);
223
- --p-toast-contrast-color: var(--rs-color-white-500);
224
- --p-toast-contrast-detail-color: var(--rs-color-white-500);
225
-
226
- /* === BADGE / TAG === */
227
- --p-badge-primary-background: var(--rs-color-button-primary);
228
- --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);
235
-
236
- /* === DIALOG === */
237
- --p-dialog-title-font-weight: 400;
238
- --p-dialog-title-font-size: 1em;
239
- --p-overlay-modal-padding: 1rem;
240
-
241
- /* === DRAWER === */
242
- --p-drawer-header-padding: 16px 24px;
243
- --p-drawer-content-padding: 0 24px 16px;
244
-
245
- /* === DATATABLE === */
246
- --p-datatable-column-title-font-weight: 400;
247
- --p-datatable-header-cell-padding: 10px;
248
-
249
- /* === CHIP === */
250
- --p-chip-padding-x: 8px;
251
- --p-chip-padding-y: 6px;
252
- --p-chip-border-radius: 8px;
253
-
254
- /* === TABS === */
255
- --p-tabs-tablist-background: transparent;
256
- --p-tabs-tablist-border-width: 0;
257
- --p-tabs-tablist-border-color: transparent;
258
- --p-tabs-tab-background: transparent;
259
- --p-tabs-tab-hover-background: var(--rs-color-gray-100);
260
- --p-tabs-tab-active-background: var(--rs-color-surface-primary);
261
- --p-tabs-tab-border-width: 0;
262
- --p-tabs-tab-border-color: transparent;
263
- --p-tabs-tab-color: var(--rs-color-text-primary);
264
- --p-tabs-tab-hover-color: var(--rs-color-text-primary);
265
- --p-tabs-tab-active-color: var(--rs-color-text-primary);
266
- --p-tabs-tab-padding: 10px 16px;
267
- --p-tabs-tab-font-size: 16px;
268
- --p-tabs-tab-font-weight: 400;
269
- --p-tabs-tab-active-font-weight: 600;
270
- --p-tabs-tab-gap: 8px;
271
- --p-tabs-tab-margin: 0;
272
- --p-tabs-tabpanel-background: transparent;
273
- --p-tabs-tabpanel-color: var(--rs-color-text-primary);
274
- --p-tabs-tabpanel-padding: 0;
275
- --p-tabs-active-bar-height: 0;
276
- }
277
-
278
- /* #region icons */
279
- .pi {
280
- align-items: center;
281
- color: var(--rs-color-text-primary);
282
- display: inline-flex;
283
- font-size: 24px;
284
- font-weight: 400;
285
- font-style: normal;
286
- line-height: 1;
287
- justify-content: center;
288
- vertical-align: middle;
289
- }
290
- .p-input-icon-left > i, .p-input-icon-right>i {
291
- margin-top: unset;
292
- transform: translateY(-50%);
293
- }
294
- .pi-eye::before {
295
- font-family: 'Material Symbols Outlined';
296
- content: 'visibility_off';
297
- color: var(--rs-color-text-primary);
298
- cursor: pointer;
299
- }
300
- .pi-eye-slash::before {
301
- font-family: 'Material Symbols Outlined';
302
- content: 'visibility';
303
- color: var(--rs-color-text-primary);
304
- cursor: pointer;
305
- }
306
- .pi-chevron-down::before {
307
- font-family: 'Material Symbols Outlined';
308
- content: 'keyboard_arrow_down';
309
- }
310
- .pi-check::before {
311
- font-family: 'Material Symbols Outlined';
312
- content: 'check';
313
- }
314
- .p-inputicon {
315
- margin-top: 0 !important;
316
- transform: translateY(-50%);
317
- }
318
- /* #endregion */
319
-
320
- /* #region classes */
321
- /* password */
322
- .p-password {
323
- width: 100%;
324
- }
325
- .p-password input {
326
- width: 100%;
327
- }
328
- /* input */
329
- :is(.p-inputtext) {
330
- font-weight: var(--p-inputtext-font-weight);
331
- height: 48px;
332
- gap: 10px;
333
- }
334
- .p-inputtext-sm {
335
- height: 37px;
336
- }
337
- .p-inputtext-lg {
338
- height: 52px;
339
- }
340
- .p-inputtext:enabled:focus {
341
- outline: none;
342
- border-color: var(--rs-color-stroke-focused);
343
- }
344
- .p-inputtext:enabled:focus {
345
- box-shadow: none;
346
- }
347
- .p-inputtext.p-variant-filled {
348
- border: 1px solid var(--rs-color-blue-500);
349
- background-color: var(--rs-color-blue-100);
350
- border-bottom-left-radius: var(--p-inputtext-border-radius);
351
- border-bottom-right-radius: var(--p-inputtext-border-radius);
352
-
353
- }
354
- /* select */
355
- .p-select {
356
- font-weight: var(--p-select-font-weight);
357
- height: 48px;
358
- }
359
- .p-select-sm {
360
- height: 37px;
361
- }
362
- .p-select-lg {
363
- height: 52px;
364
- }
365
- .p-select:not(.p-disabled).p-focus {
366
- outline-color: transparent !important;
367
- border-color: var(--p-select-border-color) !important;
368
- }
369
- .p-select-label {
370
- align-self: center;
371
- }
372
- /* cascadeselect */
373
- .p-cascadeselect {
374
- height: 48px;
375
- }
376
- .p-cascadeselect-sm {
377
- height: 37px;
378
- }
379
- .p-cascadeselect-lg {
380
- height: 52px;
381
- }
382
- .p-cascadeselect-label {
383
- align-self: center;
384
- }
385
- /* multiselect */
386
- .p-multiselect {
387
- height: 48px;
388
- }
389
- .p-multiselect-sm {
390
- height: 37px;
391
- }
392
- .p-multiselect-lg {
393
- height: 52px;
394
- }
395
- .p-multiselect-label {
396
- align-self: center;
397
- }
398
- /* autocomplete */
399
- .p-autocomplete {
400
- height: 48px;
401
- }
402
- /* menu */
403
- .p-menu {
404
- font-family: var(--rs-font-family);
405
- font-weight: var(--p-font-weight);
406
- }
407
- .p-menu-item-label {
408
- line-height: 1.2;
409
- }
410
- /* datepicker */
411
- .p-datepicker-panel {
412
- min-width: 320px !important;
413
- max-width: 320px !important;
414
- }
415
- .p-datepicker-select-month, .p-datepicker-select-year {
416
- font-family: var(--rs-font-family);
417
- }
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 {
427
- border-bottom: none;
428
- }
429
- .p-tab {
430
- border-radius: 8px 8px 0 0;
431
- border-bottom: none;
432
- font-size: var(--p-tabs-tab-font-size);
433
- }
434
- .p-tab.p-tab-active {
435
- font-weight: var(--p-tabs-tab-active-font-weight) !important;
436
- }
437
- .p-tablist-tab-list {
438
- gap: 16px;
439
- }
440
-
441
- /* button group */
442
- .p-buttongroup {
443
- width: 100%;
444
- justify-content: space-between;
445
- }
446
- /* button */
447
- .p-button {
448
- height: 48px;
449
- border-radius: 6px;
450
- }
451
- .p-button-sm {
452
- height: 37px;
453
- }
454
- .p-button-lg {
455
- height: 52px;
456
- }
457
- .p-button-inline {
458
- width: max-content;
459
- }
460
- .p-button-text:not(:disabled):hover {
461
- background: transparent !important;
462
- }
463
- .p-button.p-button-success .rs-icon {
464
- color: var(--rs-color-green-500) !important;
465
- }
466
- .p-button.p-button-info .rs-icon {
467
- color: var(--rs-color-blue-500) !important;
468
- }
469
- .p-button.p-button-warn .rs-icon {
470
- color: var(--rs-color-yellow-500) !important;
471
- }
472
- .p-button.p-button-danger .rs-icon {
473
- color: var(--rs-color-red-500) !important;
474
- }
475
- .p-button > .icon-container {
476
- line-height: 0;
477
- }
478
- /* dialog */
479
- .p-dialog {
480
- border-radius: 8px !important;
481
- }
482
- .p-dialog-content {
483
- display: flex;
484
- flex-direction: column;
485
- gap: 1em;
486
- }
487
- /* tooltip */
488
- .p-tooltip {
489
- max-width: 300px;
490
- }
491
- .p-tooltip-arrow {
492
- border-top-color: var(--rs-color-white-500);
493
- border-bottom-color: var(--rs-color-white-500);
494
- }
495
- .p-tooltip-text {
496
- background-color: var(--rs-color-white-500);
497
- color: var(--rs-color-black-500);
498
- }
499
- .p-tooltip-primary .p-tooltip-arrow {
500
- border-top-color: var(--rs-color-blue-100);
501
- border-bottom-color: var(--rs-color-blue-100);
502
- }
503
- .p-tooltip-primary .p-tooltip-text {
504
- background-color: var(--rs-color-blue-100);
505
- color: var(--rs-color-blue-500);
506
- }
507
- /* icon field compatibility */
508
- .p-iconfield-money > .p-inputtext{
509
- padding-inline-start: calc((var(--p-form-field-padding-x) * 3) + var(--p-icon-size));
510
- }
511
- .p-iconfield .p-inputtext {
512
- width: 100%;
513
- }
514
- .p-iconfield .p-inputicon {
515
- user-select: none;
516
- }
517
- /* message */
518
- .p-message-text {
519
- display: flex;
520
- align-items: anchor-center;
521
- gap: 8px;
522
- font-size: 0.9em;
523
- font-weight: 400;
524
- }
525
- /* drawer */
526
- .p-drawer-header {
527
- border-bottom: 1px solid var(--rs-color-stroke-disabled);
528
- }
529
- .p-drawer-close-button {
530
- width: auto;
531
- height: auto;
532
- padding: 2px;
533
- }
534
- .p-checkbox-lg, .p-checkbox-lg .p-checkbox-box:before {
535
- left: 4px;
536
- }
537
- .p-checkbox-box::before {
538
- display: none;
539
- }
540
- /* datatable */
541
- .p-datatable-table {
542
- table-layout: auto;
543
- }
544
- .p-datatable-thead > tr > th,
545
- .p-datatable-tbody > tr > td {
546
- white-space: nowrap;
547
- }
548
- .p-datatable-tbody > tr > td {
549
- border: none;
550
- }
551
- .p-datatable-tbody > tr:hover > td {
552
- background-color: var(--rs-color-gray-100);
553
- }
554
- /* toast */
555
- .p-toast-message-content {
556
- gap: 0.5rem;
557
- padding: 0.75rem 1rem;
558
- }
559
- .p-toast-message-text {
560
- display: flex;
561
- flex-direction: column;
562
- gap: 0.25rem;
563
- }
564
- .p-toast-summary:only-child {
565
- line-height: 1.5;
566
- margin: 0;
567
- }
568
- .p-toast-message-content > div:last-child {
569
- align-items: center;
570
- display: flex;
571
- margin-left: auto;
572
- }
573
- .p-toast-message-close {
574
- align-items: center;
575
- display: inline-flex;
576
- justify-content: center;
577
- padding: 0.25rem;
578
- }
579
- /* #endregion */
580
- }
581
-
582
- /* title-only toast overrides */
583
- .p-toast-message-content:not(:has(.p-toast-detail)) {
584
- align-items: center;
585
- }
586
- .p-toast-message-content:not(:has(.p-toast-detail)) .p-toast-close-button {
587
- margin-block: 0 !important;
588
- right: 0;
589
- }
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
+ */
17
+ @import "@robosophy/tokens/tokens.css";
18
+
19
+ @layer prime-base, prime-design;
20
+
21
+ @layer prime-design {
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
+ */
29
+ /* === PRIMARY === */
30
+ --p-primary-100: var(--rs-color-blue-100);
31
+ --p-primary-500: var(--rs-color-blue-500);
32
+ --p-primary-700: var(--rs-color-blue-700);
33
+ --p-primary-color: var(--rs-color-blue-500);
34
+ --p-primary-hover-color: var(--rs-color-blue-700);
35
+ --p-primary-active-color: var(--rs-color-blue-700);
36
+ --p-primary-contrast-color: var(--rs-color-white-500);
37
+
38
+ --p-font-family: var(--rs-font-family);
39
+ --p-font-weight: 300;
40
+
41
+ --p-form-field-padding-x: 16px;
42
+ --p-form-field-sm-padding-y: 0;
43
+ --p-form-field-sm-padding-x: 16px;
44
+ --p-form-field-lg-padding-y: 0;
45
+ --p-form-field-lg-padding-x: 16px;
46
+
47
+ /* === SURFACE === */
48
+ --p-surface-ground: var(--rs-color-background);
49
+ --p-surface-section: var(--rs-color-surface-primary);
50
+ --p-surface-card: var(--rs-color-surface-primary);
51
+ --p-surface-overlay: var(--rs-color-surface-primary);
52
+ --p-surface-border: var(--rs-color-stroke-default);
53
+ --p-surface-hover: var(--rs-color-blue-100);
54
+
55
+ /* === TEXT === */
56
+ --p-text-color: var(--rs-color-text-primary);
57
+ --p-text-muted-color: var(--rs-color-text-secondary);
58
+ --p-text-hover-color: var(--rs-color-text-primary);
59
+
60
+ /* === STATUS === */
61
+ --p-success-color: var(--rs-color-green-500);
62
+ --p-success-contrast-color: var(--rs-color-white-500);
63
+ --p-warning-color: var(--rs-color-yellow-500);
64
+ --p-warning-contrast-color: var(--rs-color-white-500);
65
+ --p-danger-color: var(--rs-color-red-500);
66
+ --p-danger-contrast-color: var(--rs-color-white-500);
67
+ --p-info-color: var(--rs-color-blue-500);
68
+ --p-info-contrast-color: var(--rs-color-white-500);
69
+
70
+ /* === FOCUS / OUTLINE === */
71
+ --p-focus-ring-color: var(--rs-color-stroke-focused);
72
+ --p-focus-ring-width: 2px;
73
+ --p-focus-ring-offset: 2px;
74
+
75
+ /* === INPUTS === */
76
+ --p-inputtext-background: var(--rs-color-neutral-50);
77
+ --p-inputtext-color: var(--rs-color-text-primary);
78
+ --p-inputtext-placeholder-color: var(--rs-color-neutral-100);
79
+ --p-inputtext-border-color: var(--rs-color-neutral-700);
80
+ --p-inputtext-hover-border-color: var(--rs-color-stroke-focused);
81
+ --p-inputtext-focus-border-color: var(--rs-color-stroke-focused);
82
+ --p-inputtext-invalid-border-color: var(--rs-color-stroke-error);
83
+ --p-inputtext-disabled-background: var(--rs-color-background-disabled);
84
+ --p-inputtext-disabled-color: var(--rs-color-text-secondary);
85
+ --p-inputtext-font-weight: var(--p-font-weight);
86
+ --p-inputtext-border-radius: 6px;
87
+
88
+ /* === TEXTAREA === */
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;
98
+
99
+ /* === BUTTON === */
100
+ --p-button-padding-x: 16px;
101
+ --p-button-sm-padding-x: 16px;
102
+ --p-button-lg-padding-x: 16px;
103
+ --p-button-label-font-weight: 400;
104
+ --p-button-label-font-size: 14px;
105
+
106
+ /* === BUTTON PRIMARY === */
107
+ --p-button-primary-background: var(--rs-color-button-primary);
108
+ --p-button-primary-hover-background: var(--rs-color-button-primary-hover);
109
+ --p-button-primary-active-background: var(--rs-color-button-primary-hover);
110
+ --p-button-primary-color: var(--rs-color-text-button-primary);
111
+ --p-button-primary-hover-color: var(--rs-color-text-button-primary);
112
+ --p-button-primary-border-color: var(--rs-color-button-primary);
113
+ --p-button-primary-hover-border-color: var(--rs-color-button-primary-hover);
114
+
115
+ /* === BUTTON SECONDARY === */
116
+ --p-button-secondary-background: var(--rs-color-button-secondary);
117
+ --p-button-secondary-hover-background: var(--rs-color-button-secondary-hover);
118
+ --p-button-secondary-color: var(--rs-color-text-button-secondary);
119
+ --p-button-secondary-hover-color: var(--rs-color-text-button-secondary);
120
+ --p-button-secondary-border-color: var(--rs-color-button-secondary);
121
+ --p-button-secondary-hover-border-color: var(--rs-color-button-secondary-hover);
122
+
123
+ /* === BUTTON OUTLINED (tertiary) === */
124
+ --p-button-outlined-primary-color: var(--rs-color-text-button-tertiary);
125
+ --p-button-outlined-primary-hover-color: var(--rs-color-text-button-tertiary-hover);
126
+ --p-button-outlined-primary-border-color: var(--rs-color-text-button-tertiary);
127
+ --p-button-outlined-primary-hover-border-color: var(--rs-color-text-button-tertiary-hover);
128
+ --p-button-outlined-primary-hover-background: var(--rs-color-button-blue-surface);
129
+
130
+ /* === BUTTON OUTLINED SECONDARY === */
131
+ --p-button-outlined-secondary-color: var(--rs-color-text-button-secondary);
132
+ --p-button-outlined-secondary-border-color: var(--rs-color-stroke-default);
133
+ --p-button-outlined-secondary-hover-background: transparent;
134
+ --p-button-outlined-secondary-active-background: transparent;
135
+
136
+ --p-button-outlined-contrast-border-color: var(--rs-color-stroke-default);
137
+
138
+ /* === BUTTON SUCCESS === */
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);
142
+ --p-button-success-color: var(--rs-color-text-button-secondary);
143
+ --p-button-success-hover-color: var(--rs-color-text-button-secondary);
144
+ --p-button-success-active-color: var(--rs-color-text-button-secondary);
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);
148
+
149
+ /* === BUTTON INFO === */
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);
153
+ --p-button-info-color: var(--rs-color-text-button-secondary);
154
+ --p-button-info-hover-color: var(--rs-color-text-button-secondary);
155
+ --p-button-info-active-color: var(--rs-color-text-button-secondary);
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);
159
+
160
+ /* === BUTTON WARN === */
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);
164
+ --p-button-warn-color: var(--rs-color-text-button-secondary);
165
+ --p-button-warn-hover-color: var(--rs-color-text-button-secondary);
166
+ --p-button-warn-active-color: var(--rs-color-text-button-secondary);
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);
170
+
171
+ /* === BUTTON DANGER === */
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);
175
+ --p-button-danger-color: var(--rs-color-text-button-secondary);
176
+ --p-button-danger-hover-color: var(--rs-color-text-button-secondary);
177
+ --p-button-danger-active-color: var(--rs-color-text-button-secondary);
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);
181
+
182
+ /* === CHECKBOX / RADIO === */
183
+ --p-checkbox-checked-background: var(--rs-color-button-primary);
184
+ --p-checkbox-checked-hover-background: var(--rs-color-button-primary-hover);
185
+ --p-checkbox-checked-border-color: var(--rs-color-button-primary);
186
+ --p-radio-button-checked-background: var(--rs-color-button-primary);
187
+ --p-radio-button-checked-border-color: var(--rs-color-button-primary);
188
+ --p-checkbox-lg-width: 24px;
189
+ --p-checkbox-lg-height: 24px;
190
+ --p-checkbox-icon-lg-size: 12px;
191
+ --p-border-radius-xs: 3px;
192
+
193
+ /* === SELECT / DROPDOWN === */
194
+ --p-select-background: var(--rs-color-surface-primary);
195
+ --p-select-color: var(--rs-color-text-primary);
196
+ --p-select-border-color: var(--rs-color-stroke-default);
197
+ --p-select-hover-border-color: var(--rs-color-stroke-focused);
198
+ --p-select-focus-border-color: var(--rs-color-stroke-focused);
199
+ --p-select-placeholder-color: var(--rs-color-text-placeholder);
200
+ --p-select-option-selected-background: var(--rs-color-button-blue-surface);
201
+ --p-select-option-selected-color: var(--rs-color-text-primary);
202
+ --p-select-option-focus-background: var(--rs-color-button-blue-surface);
203
+ --p-select-option-selected-focus-color: var(--rs-color-button-secondary);
204
+ --p-select-font-weight: var(--p-font-weight);
205
+
206
+ /* === MENU === */
207
+ --p-menu-background: var(--rs-color-surface-primary);
208
+ --p-menu-color: var(--rs-color-text-primary);
209
+ --p-menu-border-color: var(--rs-color-stroke-default);
210
+ --p-menu-border-radius: 4px;
211
+ --p-menu-list-padding: 0;
212
+ --p-menu-list-gap: 0;
213
+ --p-menu-item-color: var(--rs-color-text-primary);
214
+ --p-menu-item-focus-background: var(--rs-color-button-blue-surface);
215
+ --p-menu-item-focus-color: var(--rs-color-text-primary);
216
+ --p-menu-item-border-radius: 0;
217
+ --p-menu-item-gap: 8px;
218
+ --p-menu-item-icon-color: var(--rs-color-icon-secondary);
219
+ --p-menu-item-icon-focus-color: var(--rs-color-icon-secondary);
220
+ --p-menu-item-padding: 10px 14px;
221
+ --p-menu-shadow: 0 8px 24px rgb(0 0 0 / 18%);
222
+ --p-menu-transition-duration: 150ms;
223
+
224
+ /* === MENSAJES / TOAST === */
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);
237
+
238
+ /* === TOAST === */
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);
254
+ --p-toast-contrast-background: var(--rs-color-black-500);
255
+ --p-toast-contrast-color: var(--rs-color-white-500);
256
+ --p-toast-contrast-detail-color: var(--rs-color-white-500);
257
+
258
+ /* === BADGE / TAG === */
259
+ --p-badge-primary-background: var(--rs-color-button-primary);
260
+ --p-badge-primary-color: var(--rs-color-text-button-primary);
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);
285
+
286
+ /* === DIALOG === */
287
+ --p-dialog-title-font-weight: 400;
288
+ --p-dialog-title-font-size: 1em;
289
+ --p-overlay-modal-padding: 1rem;
290
+
291
+ /* === DRAWER === */
292
+ --p-drawer-header-padding: 16px 24px;
293
+ --p-drawer-content-padding: 0 24px 16px;
294
+
295
+ /* === DATATABLE === */
296
+ --p-datatable-column-title-font-weight: 400;
297
+ --p-datatable-header-cell-padding: 10px;
298
+
299
+ /* === CHIP === */
300
+ --p-chip-padding-x: 8px;
301
+ --p-chip-padding-y: 6px;
302
+ --p-chip-border-radius: 8px;
303
+
304
+ /* === TABS === */
305
+ --p-tabs-tablist-background: transparent;
306
+ --p-tabs-tablist-border-width: 0;
307
+ --p-tabs-tablist-border-color: transparent;
308
+ --p-tabs-tab-background: transparent;
309
+ --p-tabs-tab-hover-background: var(--rs-color-gray-100);
310
+ --p-tabs-tab-active-background: var(--rs-color-surface-primary);
311
+ --p-tabs-tab-border-width: 0;
312
+ --p-tabs-tab-border-color: transparent;
313
+ --p-tabs-tab-color: var(--rs-color-text-primary);
314
+ --p-tabs-tab-hover-color: var(--rs-color-text-primary);
315
+ --p-tabs-tab-active-color: var(--rs-color-text-primary);
316
+ --p-tabs-tab-padding: 10px 16px;
317
+ --p-tabs-tab-font-size: 16px;
318
+ --p-tabs-tab-font-weight: 400;
319
+ --p-tabs-tab-active-font-weight: 600;
320
+ --p-tabs-tab-gap: 8px;
321
+ --p-tabs-tab-margin: 0;
322
+ --p-tabs-tabpanel-background: transparent;
323
+ --p-tabs-tabpanel-color: var(--rs-color-text-primary);
324
+ --p-tabs-tabpanel-padding: 0;
325
+ --p-tabs-active-bar-height: 0;
326
+ }
327
+
328
+ /* #region icons (both) */
329
+ .pi {
330
+ align-items: center;
331
+ color: var(--rs-color-text-primary);
332
+ display: inline-flex;
333
+ font-size: 24px;
334
+ font-weight: 400;
335
+ font-style: normal;
336
+ line-height: 1;
337
+ justify-content: center;
338
+ vertical-align: middle;
339
+ }
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;
354
+ transform: translateY(-50%);
355
+ display: flex;
356
+ align-items: center;
357
+ justify-content: center;
358
+ }
359
+ .pi-eye::before {
360
+ font-family: 'Material Symbols Outlined';
361
+ content: 'visibility_off';
362
+ color: var(--rs-color-text-primary);
363
+ cursor: pointer;
364
+ }
365
+ .pi-eye-slash::before {
366
+ font-family: 'Material Symbols Outlined';
367
+ content: 'visibility';
368
+ color: var(--rs-color-text-primary);
369
+ cursor: pointer;
370
+ }
371
+ .pi-chevron-down::before {
372
+ font-family: 'Material Symbols Outlined';
373
+ content: 'keyboard_arrow_down';
374
+ }
375
+ .pi-check::before {
376
+ font-family: 'Material Symbols Outlined';
377
+ content: 'check';
378
+ }
379
+ /* Vue: .p-iconfield | React: .p-icon-field */
380
+ .p-iconfield, .p-icon-field {
381
+ margin-top: 0;
382
+ }
383
+ /* #endregion */
384
+
385
+ /* #region classes */
386
+ /* password (both) */
387
+ .p-password {
388
+ width: 100%;
389
+ }
390
+ .p-password input {
391
+ width: 100%;
392
+ }
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)) {
395
+ font-weight: var(--p-inputtext-font-weight);
396
+ height: 48px;
397
+ gap: 10px;
398
+ border-radius: 6px;
399
+ border: 1px solid var(--rs-color-neutral-700);
400
+ background: var(--rs-color-neutral-50);
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 */
406
+ .p-inputtext-sm {
407
+ height: 37px;
408
+ }
409
+ .p-inputtext-lg {
410
+ height: 52px;
411
+ }
412
+ .p-inputtext:enabled:focus {
413
+ outline: none;
414
+ border-color: var(--rs-color-stroke-focused);
415
+ }
416
+ .p-inputtext:enabled:focus {
417
+ box-shadow: none;
418
+ }
419
+ .p-inputtext.p-variant-filled {
420
+ border: 1px solid var(--rs-color-blue-500);
421
+ background-color: var(--rs-color-blue-100);
422
+ border-bottom-left-radius: var(--p-inputtext-border-radius);
423
+ border-bottom-right-radius: var(--p-inputtext-border-radius);
424
+ }
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 {
497
+ font-weight: var(--p-select-font-weight);
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);
507
+ }
508
+ /* Vue-only: PrimeReact 10 no emite clases de tamaño para Dropdown */
509
+ .p-select-sm, .p-dropdown-sm {
510
+ height: 37px;
511
+ }
512
+ .p-select-lg, .p-dropdown-lg {
513
+ height: 52px;
514
+ }
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;
519
+ }
520
+ .p-select-label, .p-dropdown-label {
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;
536
+ }
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 {
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;
562
+ }
563
+ /* Vue-only: PrimeReact 10 no emite clases de tamaño para CascadeSelect */
564
+ .p-cascadeselect-sm, .p-cascade-select-sm {
565
+ height: 37px;
566
+ }
567
+ .p-cascadeselect-lg, .p-cascade-select-lg {
568
+ height: 52px;
569
+ }
570
+ .p-cascadeselect-label, .p-cascade-select-label {
571
+ align-self: center;
572
+ border: none;
573
+ background: transparent;
574
+ }
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 {
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;
599
+ }
600
+ /* Vue-only: PrimeReact 10 no emite clases de tamaño para MultiSelect */
601
+ .p-multiselect-sm, .p-multi-select-sm {
602
+ height: 37px;
603
+ }
604
+ .p-multiselect-lg, .p-multi-select-lg {
605
+ height: 52px;
606
+ }
607
+ .p-multiselect-label, .p-multi-select-label {
608
+ align-self: center;
609
+ line-height: normal;
610
+ border: none;
611
+ background: transparent;
612
+ }
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) */
621
+ .p-autocomplete {
622
+ height: 48px;
623
+ }
624
+ /* menu (both: .p-menuitem-text=React, .p-menu-item-label=Vue) */
625
+ .p-menu {
626
+ font-family: var(--rs-font-family);
627
+ font-weight: var(--p-font-weight);
628
+ }
629
+ .p-menu-item-label, .p-menuitem-text {
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);
635
+ }
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;
640
+ }
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 {
643
+ font-family: var(--rs-font-family);
644
+ }
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 {
655
+ border-bottom: none;
656
+ }
657
+ .p-tab, .p-tabview-nav-link {
658
+ border-radius: 8px 8px 0 0;
659
+ border-bottom: none;
660
+ font-size: var(--p-tabs-tab-font-size);
661
+ }
662
+ .p-tab.p-tab-active, .p-tabview-nav-link.p-tabview-selected {
663
+ font-weight: var(--p-tabs-tab-active-font-weight);
664
+ }
665
+ .p-tablist-tab-list, .p-tabview-nav {
666
+ gap: 16px;
667
+ }
668
+
669
+ /* button group (both) */
670
+ .p-buttongroup, .p-button-group {
671
+ width: 100%;
672
+ justify-content: space-between;
673
+ }
674
+ /* button (both) */
675
+ .p-button {
676
+ height: 48px;
677
+ border-radius: 6px;
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;
693
+ }
694
+ .p-button-sm {
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;
700
+ }
701
+ .p-button-lg {
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;
707
+ }
708
+ .p-button-inline {
709
+ width: max-content;
710
+ }
711
+ .p-button-text:not(:disabled):hover {
712
+ background: transparent;
713
+ }
714
+ .p-button.p-button-success .rs-icon {
715
+ color: var(--rs-color-green-500);
716
+ }
717
+ .p-button.p-button-info .rs-icon {
718
+ color: var(--rs-color-blue-500);
719
+ }
720
+ /* React: .p-button-warning | Vue: .p-button-warn (ambos usan severity "warning") */
721
+ .p-button.p-button-warning .rs-icon,
722
+ .p-button.p-button-warn .rs-icon {
723
+ color: var(--rs-color-yellow-500);
724
+ }
725
+ .p-button.p-button-danger .rs-icon {
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);
992
+ }
993
+ .p-button > .icon-container {
994
+ line-height: 0;
995
+ }
996
+ /* dialog (both) */
997
+ .p-dialog {
998
+ border-radius: 8px;
999
+ }
1000
+ .p-dialog-content {
1001
+ display: flex;
1002
+ flex-direction: column;
1003
+ gap: 1em;
1004
+ }
1005
+ /* tooltip (both) */
1006
+ .p-tooltip {
1007
+ max-width: 300px;
1008
+ }
1009
+ .p-tooltip-arrow {
1010
+ border-top-color: var(--rs-color-white-500);
1011
+ border-bottom-color: var(--rs-color-white-500);
1012
+ }
1013
+ .p-tooltip-text {
1014
+ background-color: var(--rs-color-white-500);
1015
+ color: var(--rs-color-black-500);
1016
+ }
1017
+ .p-tooltip-primary .p-tooltip-arrow {
1018
+ border-top-color: var(--rs-color-blue-100);
1019
+ border-bottom-color: var(--rs-color-blue-100);
1020
+ }
1021
+ .p-tooltip-primary .p-tooltip-text {
1022
+ background-color: var(--rs-color-blue-100);
1023
+ color: var(--rs-color-blue-500);
1024
+ }
1025
+ /* icon field (both: .p-iconfield=Vue, .p-icon-field=React) */
1026
+ .p-iconfield-money > .p-inputtext, .p-icon-field-money > .p-inputtext {
1027
+ padding-inline-start: calc((var(--p-form-field-padding-x) * 3) + var(--p-icon-size));
1028
+ }
1029
+ .p-iconfield .p-inputtext, .p-icon-field .p-inputtext {
1030
+ width: 100%;
1031
+ }
1032
+ .p-iconfield .p-inputicon, .p-icon-field .p-input-icon {
1033
+ user-select: none;
1034
+ }
1035
+ /* message (both: .p-message-text=Vue, .p-inline-message-text=both) */
1036
+ .p-message-text, .p-inline-message-text {
1037
+ display: flex;
1038
+ align-items: anchor-center;
1039
+ gap: 8px;
1040
+ font-size: 0.9em;
1041
+ font-weight: 400;
1042
+ }
1043
+ /* drawer/sidebar (both: .p-drawer-*=Vue, .p-sidebar-*=React) */
1044
+ .p-drawer-header, .p-sidebar-header {
1045
+ border-bottom: 1px solid var(--rs-color-stroke-disabled);
1046
+ }
1047
+ .p-drawer-close-button, .p-sidebar-close {
1048
+ width: auto;
1049
+ height: auto;
1050
+ padding: 2px;
1051
+ }
1052
+ /* Vue-only: PrimeReact 10 no emite .p-checkbox-lg */
1053
+ .p-checkbox-lg, .p-checkbox-lg .p-checkbox-box:before {
1054
+ left: 4px;
1055
+ }
1056
+ .p-checkbox-box::before {
1057
+ display: none;
1058
+ }
1059
+ /* datatable (both) */
1060
+ .p-datatable-table {
1061
+ table-layout: auto;
1062
+ }
1063
+ .p-datatable-thead > tr > th,
1064
+ .p-datatable-tbody > tr > td {
1065
+ white-space: nowrap;
1066
+ }
1067
+ .p-datatable-tbody > tr > td {
1068
+ border: none;
1069
+ }
1070
+ .p-datatable-tbody > tr:hover > td {
1071
+ background-color: var(--rs-color-gray-100);
1072
+ }
1073
+ /* toast (both) */
1074
+ .p-toast-message-content {
1075
+ gap: 0.5rem;
1076
+ padding: 0.75rem 1rem;
1077
+ }
1078
+ .p-toast-message-text {
1079
+ display: flex;
1080
+ flex-direction: column;
1081
+ gap: 0.25rem;
1082
+ }
1083
+ .p-toast-summary:only-child {
1084
+ line-height: 1.5;
1085
+ margin: 0;
1086
+ }
1087
+ .p-toast-message-content > div:last-child {
1088
+ align-items: center;
1089
+ display: flex;
1090
+ margin-left: auto;
1091
+ }
1092
+ .p-toast-message-close, .p-toast-icon-close {
1093
+ align-items: center;
1094
+ display: inline-flex;
1095
+ justify-content: center;
1096
+ padding: 0.25rem;
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
+ }
1123
+ /* #endregion */
1124
+
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
+ }
1134
+ }