@robosophy/prime-theme 1.0.14 → 3.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 +1130 -588
  5. package/package.json +37 -36
package/dist/prime.css CHANGED
@@ -1,589 +1,1131 @@
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
+ font-size: 16px;
398
+ gap: 8px;
399
+ border-radius: 6px;
400
+ border: 1px solid var(--rs-color-neutral-700);
401
+ background: var(--rs-color-neutral-50);
402
+ }
403
+ .p-inputtext::placeholder {
404
+ color: var(--rs-color-neutral-100);
405
+ }
406
+ /* Vue-only: PrimeReact 10 no emite clases de tamaño para InputText */
407
+ .p-inputtext-sm {
408
+ height: 36px;
409
+ font-size: 14px;
410
+ }
411
+ .p-inputtext:enabled:focus {
412
+ outline: none;
413
+ border-color: var(--rs-color-stroke-focused);
414
+ }
415
+ .p-inputtext:enabled:focus {
416
+ box-shadow: none;
417
+ }
418
+ .p-inputtext.p-variant-filled {
419
+ border: 1px solid var(--rs-color-blue-500);
420
+ background-color: var(--rs-color-blue-100);
421
+ border-bottom-left-radius: var(--p-inputtext-border-radius);
422
+ border-bottom-right-radius: var(--p-inputtext-border-radius);
423
+ }
424
+ /* textarea (both) */
425
+ .p-textarea, .p-inputtextarea {
426
+ border: 1px solid var(--rs-color-neutral-700);
427
+ border-radius: 6px;
428
+ background: var(--rs-color-neutral-50);
429
+ }
430
+ .p-textarea::placeholder, .p-inputtextarea::placeholder {
431
+ color: var(--rs-color-neutral-100);
432
+ }
433
+ .p-textarea:enabled:focus, .p-inputtextarea:enabled:focus {
434
+ outline: none;
435
+ border-color: var(--rs-color-stroke-focused);
436
+ box-shadow: none;
437
+ }
438
+ /* invalid states (both) */
439
+ .p-inputtext.p-invalid.p-component,
440
+ .p-textarea.p-invalid.p-component,
441
+ .p-inputtextarea.p-invalid.p-component {
442
+ border-color: var(--rs-color-stroke-error) !important;
443
+ }
444
+ .p-dropdown.p-invalid.p-component,
445
+ .p-select.p-invalid.p-component {
446
+ border-color: var(--rs-color-stroke-error) !important;
447
+ }
448
+ .p-password.p-invalid.p-component > .p-inputtext {
449
+ border-color: var(--rs-color-stroke-error) !important;
450
+ }
451
+ .p-cascadeselect.p-invalid.p-component,
452
+ .p-cascade-select.p-invalid.p-component {
453
+ border-color: var(--rs-color-stroke-error) !important;
454
+ }
455
+ .p-multiselect.p-invalid.p-component,
456
+ .p-multi-select.p-invalid.p-component {
457
+ border-color: var(--rs-color-stroke-error) !important;
458
+ }
459
+ /* disabled states (both) */
460
+ .p-inputtext:disabled,
461
+ .p-textarea:disabled,
462
+ .p-inputtextarea:disabled {
463
+ background: var(--rs-color-background-disabled) !important;
464
+ color: var(--rs-color-text-secondary) !important;
465
+ }
466
+ .p-dropdown.p-disabled,
467
+ .p-select.p-disabled {
468
+ background: var(--rs-color-background-disabled) !important;
469
+ }
470
+ .p-dropdown.p-disabled .p-dropdown-label,
471
+ .p-select.p-disabled .p-select-label {
472
+ color: var(--rs-color-text-secondary) !important;
473
+ }
474
+ .p-password.p-disabled > .p-inputtext {
475
+ background: var(--rs-color-background-disabled) !important;
476
+ color: var(--rs-color-text-secondary) !important;
477
+ }
478
+ .p-cascadeselect.p-disabled,
479
+ .p-cascade-select.p-disabled {
480
+ background: var(--rs-color-background-disabled) !important;
481
+ }
482
+ .p-cascadeselect.p-disabled .p-cascadeselect-label,
483
+ .p-cascade-select.p-disabled .p-cascade-select-label {
484
+ color: var(--rs-color-text-secondary) !important;
485
+ }
486
+ .p-multiselect.p-disabled,
487
+ .p-multi-select.p-disabled {
488
+ background: var(--rs-color-background-disabled) !important;
489
+ }
490
+ .p-multiselect.p-disabled .p-multiselect-label,
491
+ .p-multi-select.p-disabled .p-multi-select-label {
492
+ color: var(--rs-color-text-secondary) !important;
493
+ }
494
+ /* select/dropdown (both: .p-select=Vue, .p-dropdown=both) */
495
+ .p-select, .p-dropdown {
496
+ font-weight: var(--p-select-font-weight);
497
+ height: 48px;
498
+ font-size: 16px;
499
+ gap: 8px;
500
+ border-radius: 6px;
501
+ border: 1px solid var(--rs-color-neutral-700);
502
+ background: var(--rs-color-neutral-50);
503
+ padding: 0 16px;
504
+ }
505
+ .p-select:not(.p-disabled):hover,
506
+ .p-dropdown:not(.p-disabled):hover {
507
+ border-color: var(--rs-color-stroke-focused);
508
+ }
509
+ /* Vue-only: PrimeReact 10 no emite clases de tamaño para Dropdown */
510
+ .p-select-sm, .p-dropdown-sm {
511
+ height: 36px;
512
+ font-size: 14px;
513
+ }
514
+ .p-select:not(.p-disabled).p-focus, .p-dropdown:not(.p-disabled).p-focus {
515
+ outline: none;
516
+ border-color: var(--rs-color-stroke-focused);
517
+ box-shadow: none;
518
+ }
519
+ .p-select-label, .p-dropdown-label {
520
+ align-self: center;
521
+ border: none;
522
+ background: transparent;
523
+ }
524
+ /* Labels internos de selects - quitar height fijo de .p-inputtext */
525
+ .p-select-label.p-inputtext,
526
+ .p-dropdown-label.p-inputtext,
527
+ .p-cascadeselect-label.p-inputtext,
528
+ .p-cascade-select-label.p-inputtext,
529
+ .p-multiselect-label.p-inputtext,
530
+ .p-multi-select-label.p-inputtext {
531
+ height: auto;
532
+ line-height: 1.5;
533
+ border: none;
534
+ background: transparent;
535
+ }
536
+ /* Internal containers - remove duplicate borders */
537
+ .p-select-label-container,
538
+ .p-dropdown-label-container,
539
+ .p-select-trigger,
540
+ .p-dropdown-trigger {
541
+ border: none;
542
+ background: transparent;
543
+ }
544
+ /* cascadeselect (both: .p-cascadeselect=React, .p-cascade-select=Vue) */
545
+ .p-cascadeselect, .p-cascade-select {
546
+ height: 48px;
547
+ font-size: 16px;
548
+ gap: 8px;
549
+ border-radius: 6px;
550
+ border: 1px solid var(--rs-color-neutral-700);
551
+ background: var(--rs-color-neutral-50);
552
+ padding: 0 16px;
553
+ }
554
+ .p-cascadeselect:not(.p-disabled):hover,
555
+ .p-cascade-select:not(.p-disabled):hover {
556
+ border-color: var(--rs-color-stroke-focused);
557
+ }
558
+ .p-cascadeselect:not(.p-disabled).p-focus,
559
+ .p-cascade-select:not(.p-disabled).p-focus {
560
+ outline: none;
561
+ border-color: var(--rs-color-stroke-focused);
562
+ box-shadow: none;
563
+ }
564
+ /* Vue-only: PrimeReact 10 no emite clases de tamaño para CascadeSelect */
565
+ .p-cascadeselect-sm, .p-cascade-select-sm {
566
+ height: 36px;
567
+ font-size: 14px;
568
+ }
569
+ .p-cascadeselect-label, .p-cascade-select-label {
570
+ align-self: center;
571
+ border: none;
572
+ background: transparent;
573
+ }
574
+ .p-cascadeselect-label-container,
575
+ .p-cascade-select-label-container,
576
+ .p-cascadeselect-trigger,
577
+ .p-cascade-select-trigger {
578
+ border: none;
579
+ background: transparent;
580
+ }
581
+ /* multiselect (both: .p-multiselect=React, .p-multi-select=Vue) */
582
+ .p-multiselect, .p-multi-select {
583
+ height: 48px;
584
+ font-size: 16px;
585
+ gap: 8px;
586
+ border-radius: 6px;
587
+ border: 1px solid var(--rs-color-neutral-700);
588
+ background: var(--rs-color-neutral-50);
589
+ padding: 0 16px;
590
+ }
591
+ .p-multiselect:not(.p-disabled):hover,
592
+ .p-multi-select:not(.p-disabled):hover {
593
+ border-color: var(--rs-color-stroke-focused);
594
+ }
595
+ .p-multiselect:not(.p-disabled).p-focus,
596
+ .p-multi-select:not(.p-disabled).p-focus {
597
+ outline: none;
598
+ border-color: var(--rs-color-stroke-focused);
599
+ box-shadow: none;
600
+ }
601
+ /* Vue-only: PrimeReact 10 no emite clases de tamaño para MultiSelect */
602
+ .p-multiselect-sm, .p-multi-select-sm {
603
+ height: 36px;
604
+ font-size: 14px;
605
+ }
606
+ .p-multiselect-label, .p-multi-select-label {
607
+ align-self: center;
608
+ line-height: normal;
609
+ border: none;
610
+ background: transparent;
611
+ }
612
+ .p-multiselect-label-container,
613
+ .p-multi-select-label-container,
614
+ .p-multiselect-trigger,
615
+ .p-multi-select-trigger {
616
+ border: none;
617
+ background: transparent;
618
+ }
619
+ /* autocomplete (both) */
620
+ .p-autocomplete {
621
+ height: 48px;
622
+ font-size: 16px;
623
+ gap: 8px;
624
+ }
625
+ /* menu (both: .p-menuitem-text=React, .p-menu-item-label=Vue) */
626
+ .p-menu {
627
+ font-family: var(--rs-font-family);
628
+ font-weight: var(--p-font-weight);
629
+ }
630
+ .p-menu-item-label, .p-menuitem-text {
631
+ line-height: 1.2;
632
+ color: var(--rs-color-text-primary);
633
+ }
634
+ .p-menu .p-menuitem-link .p-menuitem-text {
635
+ color: var(--rs-color-text-primary);
636
+ }
637
+ /* datepicker (both: .p-datepicker-panel=React portaled, .p-calendar .p-datepicker=Vue inline) */
638
+ .p-datepicker-panel, .p-calendar .p-datepicker {
639
+ min-width: 320px;
640
+ max-width: 320px;
641
+ }
642
+ /* Vue: .p-datepicker-select-month/year | React: .p-datepicker-month/year */
643
+ .p-datepicker-select-month, .p-datepicker-select-year, .p-datepicker-month, .p-datepicker-year {
644
+ font-family: var(--rs-font-family);
645
+ }
646
+ /* file upload (both: .p-file-upload-dashed=custom, .p-fileupload-content=React drop zone) */
647
+ .p-file-upload-dashed,
648
+ .p-fileupload.p-fileupload-dashed .p-fileupload-content {
649
+ width: 100%;
650
+ border: 1px dashed var(--p-primary-500);
651
+ background-color: transparent;
652
+ color: var(--p-primary-500);
653
+ }
654
+ /* tabs (both: .p-tablist=Vue Tabs, .p-tabview-nav=both TabView) */
655
+ .p-tablist, .p-tabview-nav {
656
+ border-bottom: none;
657
+ }
658
+ .p-tab, .p-tabview-nav-link {
659
+ border-radius: 8px 8px 0 0;
660
+ border-bottom: none;
661
+ font-size: var(--p-tabs-tab-font-size);
662
+ }
663
+ .p-tab.p-tab-active, .p-tabview-nav-link.p-tabview-selected {
664
+ font-weight: var(--p-tabs-tab-active-font-weight);
665
+ }
666
+ .p-tablist-tab-list, .p-tabview-nav {
667
+ gap: 16px;
668
+ }
669
+
670
+ /* button group (both) */
671
+ .p-buttongroup, .p-button-group {
672
+ width: 100%;
673
+ justify-content: space-between;
674
+ }
675
+ /* button (both) */
676
+ .p-button {
677
+ height: 48px;
678
+ border-radius: 6px;
679
+ font-size: 14px;
680
+ font-weight: 400;
681
+ gap: 8px;
682
+ }
683
+ .p-button:not(.p-button-link):not(.p-button-text):not(.p-button-outlined):not(.p-button-icon-only) {
684
+ padding: 0 16px;
685
+ }
686
+ .p-button .p-button-icon-left {
687
+ margin-right: 0;
688
+ }
689
+ .p-button .p-button-icon-right {
690
+ margin-left: 0;
691
+ }
692
+ .p-button .p-button-label {
693
+ font-weight: 400;
694
+ }
695
+ .p-button-sm {
696
+ height: 36px;
697
+ font-size: 14px;
698
+ }
699
+ .p-button-sm:not(.p-button-link):not(.p-button-text):not(.p-button-outlined):not(.p-button-icon-only) {
700
+ padding: 0 16px;
701
+ }
702
+ .p-button-lg {
703
+ height: 54px;
704
+ font-size: 16px;
705
+ }
706
+ .p-button-lg:not(.p-button-link):not(.p-button-text):not(.p-button-outlined):not(.p-button-icon-only) {
707
+ padding: 0 16px;
708
+ }
709
+ .p-button-inline {
710
+ width: max-content;
711
+ }
712
+ .p-button-text:not(:disabled):hover {
713
+ background: transparent;
714
+ }
715
+ /* Icon-only text buttons - neutral color, no hover background, proper centering */
716
+ .p-button.p-button-icon-only.p-button-text {
717
+ color: var(--rs-color-button-primary);
718
+ }
719
+ .p-button.p-button-icon-only.p-button-text:not(:disabled):hover {
720
+ background: transparent;
721
+ }
722
+ .p-button.p-button-icon-only.p-button-text .p-button-label {
723
+ display: none;
724
+ }
725
+ /* Base button overrides - match fluent-light specificity for React */
726
+ .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) {
727
+ background: var(--rs-color-button-primary);
728
+ border-color: var(--rs-color-button-primary);
729
+ color: var(--rs-color-text-button-primary);
730
+ }
731
+ .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 {
732
+ background: var(--rs-color-button-primary-hover);
733
+ border-color: var(--rs-color-button-primary-hover);
734
+ color: var(--rs-color-text-button-primary);
735
+ }
736
+ .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 {
737
+ background: var(--rs-color-button-primary-hover);
738
+ border-color: var(--rs-color-button-primary-hover);
739
+ color: var(--rs-color-text-button-primary);
740
+ }
741
+ .p-button.p-button-outlined {
742
+ background: transparent;
743
+ border-color: var(--rs-color-text-button-tertiary);
744
+ color: var(--rs-color-text-button-tertiary);
745
+ }
746
+ .p-button.p-button-outlined:not(:disabled):hover {
747
+ background: var(--rs-color-button-blue-surface);
748
+ border-color: var(--rs-color-text-button-tertiary);
749
+ color: var(--rs-color-text-button-tertiary);
750
+ }
751
+ .p-button.p-button-text {
752
+ background: transparent;
753
+ border-color: transparent;
754
+ color: var(--rs-color-text-button-tertiary);
755
+ }
756
+ .p-button.p-button-text:not(:disabled):hover {
757
+ background: var(--rs-color-button-blue-surface);
758
+ border-color: transparent;
759
+ color: var(--rs-color-text-button-tertiary);
760
+ }
761
+ /* Button severity overrides - match fluent-light specificity for React */
762
+ /* PRIMARY */
763
+ .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 {
764
+ background: var(--rs-color-button-primary);
765
+ border-color: var(--rs-color-button-primary);
766
+ color: var(--rs-color-text-button-primary);
767
+ }
768
+ .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 {
769
+ background: var(--rs-color-button-primary-hover);
770
+ border-color: var(--rs-color-button-primary-hover);
771
+ color: var(--rs-color-text-button-primary);
772
+ }
773
+ .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 {
774
+ background: var(--rs-color-button-primary-hover);
775
+ border-color: var(--rs-color-button-primary-hover);
776
+ color: var(--rs-color-text-button-primary);
777
+ }
778
+ .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 {
779
+ background: transparent;
780
+ border-color: var(--rs-color-text-button-tertiary);
781
+ color: var(--rs-color-text-button-tertiary);
782
+ }
783
+ .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 {
784
+ background: var(--rs-color-button-blue-surface);
785
+ border-color: var(--rs-color-text-button-tertiary);
786
+ color: var(--rs-color-text-button-tertiary);
787
+ }
788
+ .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 {
789
+ background: transparent;
790
+ border-color: transparent;
791
+ color: var(--rs-color-text-button-tertiary);
792
+ }
793
+ .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 {
794
+ background: var(--rs-color-button-blue-surface);
795
+ border-color: transparent;
796
+ color: var(--rs-color-text-button-tertiary);
797
+ }
798
+
799
+ /* SECONDARY */
800
+ .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 {
801
+ background: var(--rs-color-button-secondary);
802
+ border-color: var(--rs-color-button-secondary);
803
+ color: var(--rs-color-text-button-secondary);
804
+ }
805
+ .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 {
806
+ background: var(--rs-color-button-secondary-hover);
807
+ border-color: var(--rs-color-button-secondary-hover);
808
+ color: var(--rs-color-text-button-secondary);
809
+ }
810
+ .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 {
811
+ background: var(--rs-color-button-secondary-hover);
812
+ border-color: var(--rs-color-button-secondary-hover);
813
+ color: var(--rs-color-text-button-secondary);
814
+ }
815
+ .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 {
816
+ background: transparent;
817
+ border-color: var(--rs-color-stroke-default);
818
+ color: var(--rs-color-text-button-secondary);
819
+ }
820
+ .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 {
821
+ background: transparent;
822
+ border-color: var(--rs-color-stroke-default);
823
+ color: var(--rs-color-text-button-secondary);
824
+ }
825
+ .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 {
826
+ background: transparent;
827
+ border-color: transparent;
828
+ color: var(--rs-color-text-button-secondary);
829
+ }
830
+ .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 {
831
+ background: transparent;
832
+ border-color: transparent;
833
+ color: var(--rs-color-text-button-secondary);
834
+ }
835
+
836
+ /* SUCCESS */
837
+ .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 {
838
+ background: var(--rs-color-severity-success-background);
839
+ border-color: var(--rs-color-severity-success-background);
840
+ color: var(--rs-color-text-button-secondary);
841
+ }
842
+ .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 {
843
+ background: var(--rs-color-severity-success-background);
844
+ border-color: var(--rs-color-severity-success-background);
845
+ color: var(--rs-color-text-button-secondary);
846
+ }
847
+ .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 {
848
+ background: var(--rs-color-severity-success-background);
849
+ border-color: var(--rs-color-severity-success-background);
850
+ color: var(--rs-color-text-button-secondary);
851
+ }
852
+ .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 {
853
+ background: transparent;
854
+ border-color: var(--rs-color-severity-success-icon);
855
+ color: var(--rs-color-severity-success-icon);
856
+ }
857
+ .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 {
858
+ background: var(--rs-color-severity-success-background);
859
+ border-color: var(--rs-color-severity-success-icon);
860
+ color: var(--rs-color-severity-success-icon);
861
+ }
862
+ .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 {
863
+ background: transparent;
864
+ border-color: transparent;
865
+ color: var(--rs-color-severity-success-icon);
866
+ }
867
+ .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 {
868
+ background: var(--rs-color-severity-success-background);
869
+ border-color: transparent;
870
+ color: var(--rs-color-severity-success-icon);
871
+ }
872
+
873
+ /* INFO */
874
+ .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 {
875
+ background: var(--rs-color-severity-info-background);
876
+ border-color: var(--rs-color-severity-info-background);
877
+ color: var(--rs-color-text-button-secondary);
878
+ }
879
+ .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 {
880
+ background: var(--rs-color-severity-info-background);
881
+ border-color: var(--rs-color-severity-info-background);
882
+ color: var(--rs-color-text-button-secondary);
883
+ }
884
+ .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 {
885
+ background: var(--rs-color-severity-info-background);
886
+ border-color: var(--rs-color-severity-info-background);
887
+ color: var(--rs-color-text-button-secondary);
888
+ }
889
+ .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 {
890
+ background: transparent;
891
+ border-color: var(--rs-color-severity-info-icon);
892
+ color: var(--rs-color-severity-info-icon);
893
+ }
894
+ .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 {
895
+ background: var(--rs-color-severity-info-background);
896
+ border-color: var(--rs-color-severity-info-icon);
897
+ color: var(--rs-color-severity-info-icon);
898
+ }
899
+ .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 {
900
+ background: transparent;
901
+ border-color: transparent;
902
+ color: var(--rs-color-blue-500);
903
+ }
904
+ .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 {
905
+ background: var(--rs-color-severity-info-background);
906
+ border-color: transparent;
907
+ color: var(--rs-color-severity-info-icon);
908
+ }
909
+
910
+ /* WARNING (React: .p-button-warning | Vue: .p-button-warn) */
911
+ .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,
912
+ .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 {
913
+ background: var(--rs-color-severity-warning-background);
914
+ border-color: var(--rs-color-severity-warning-background);
915
+ color: var(--rs-color-text-button-secondary);
916
+ }
917
+ .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,
918
+ .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 {
919
+ background: var(--rs-color-severity-warning-background);
920
+ border-color: var(--rs-color-severity-warning-background);
921
+ color: var(--rs-color-text-button-secondary);
922
+ }
923
+ .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,
924
+ .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 {
925
+ background: var(--rs-color-severity-warning-background);
926
+ border-color: var(--rs-color-severity-warning-background);
927
+ color: var(--rs-color-text-button-secondary);
928
+ }
929
+ .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,
930
+ .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 {
931
+ background: transparent;
932
+ border-color: var(--rs-color-severity-warning-icon);
933
+ color: var(--rs-color-severity-warning-icon);
934
+ }
935
+ .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,
936
+ .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 {
937
+ background: var(--rs-color-severity-warning-background);
938
+ border-color: var(--rs-color-severity-warning-icon);
939
+ color: var(--rs-color-severity-warning-icon);
940
+ }
941
+ .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,
942
+ .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 {
943
+ background: transparent;
944
+ border-color: transparent;
945
+ color: var(--rs-color-severity-warning-icon);
946
+ }
947
+ .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,
948
+ .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 {
949
+ background: var(--rs-color-severity-warning-background);
950
+ border-color: transparent;
951
+ color: var(--rs-color-severity-warning-icon);
952
+ }
953
+
954
+ /* DANGER */
955
+ .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 {
956
+ background: var(--rs-color-severity-danger-background);
957
+ border-color: var(--rs-color-severity-danger-background);
958
+ color: var(--rs-color-text-button-secondary);
959
+ }
960
+ .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 {
961
+ background: var(--rs-color-severity-danger-background);
962
+ border-color: var(--rs-color-severity-danger-background);
963
+ color: var(--rs-color-text-button-secondary);
964
+ }
965
+ .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 {
966
+ background: var(--rs-color-severity-danger-background);
967
+ border-color: var(--rs-color-severity-danger-background);
968
+ color: var(--rs-color-text-button-secondary);
969
+ }
970
+ .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 {
971
+ background: transparent;
972
+ border-color: var(--rs-color-severity-danger-icon);
973
+ color: var(--rs-color-severity-danger-icon);
974
+ }
975
+ .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 {
976
+ background: var(--rs-color-severity-danger-background);
977
+ border-color: var(--rs-color-severity-danger-icon);
978
+ color: var(--rs-color-severity-danger-icon);
979
+ }
980
+ .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 {
981
+ background: transparent;
982
+ border-color: transparent;
983
+ color: var(--rs-color-severity-danger-icon);
984
+ }
985
+ .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 {
986
+ background: var(--rs-color-severity-danger-background);
987
+ border-color: transparent;
988
+ color: var(--rs-color-severity-danger-icon);
989
+ }
990
+ .p-button > .icon-container {
991
+ line-height: 0;
992
+ }
993
+ /* dialog (both) */
994
+ .p-dialog {
995
+ border-radius: 8px;
996
+ }
997
+ .p-dialog-content {
998
+ display: flex;
999
+ flex-direction: column;
1000
+ gap: 1em;
1001
+ }
1002
+ /* tooltip (both) */
1003
+ .p-tooltip {
1004
+ max-width: 300px;
1005
+ }
1006
+ .p-tooltip-arrow {
1007
+ border-top-color: var(--rs-color-white-500);
1008
+ border-bottom-color: var(--rs-color-white-500);
1009
+ }
1010
+ .p-tooltip-text {
1011
+ background-color: var(--rs-color-white-500);
1012
+ color: var(--rs-color-black-500);
1013
+ }
1014
+ .p-tooltip-primary .p-tooltip-arrow {
1015
+ border-top-color: var(--rs-color-blue-100);
1016
+ border-bottom-color: var(--rs-color-blue-100);
1017
+ }
1018
+ .p-tooltip-primary .p-tooltip-text {
1019
+ background-color: var(--rs-color-blue-100);
1020
+ color: var(--rs-color-blue-500);
1021
+ }
1022
+ /* icon field (both: .p-iconfield=Vue, .p-icon-field=React) */
1023
+ .p-iconfield-money > .p-inputtext, .p-icon-field-money > .p-inputtext {
1024
+ padding-inline-start: calc((var(--p-form-field-padding-x) * 3) + var(--p-icon-size));
1025
+ }
1026
+ .p-iconfield .p-inputtext, .p-icon-field .p-inputtext {
1027
+ width: 100%;
1028
+ }
1029
+ .p-iconfield .p-inputicon, .p-icon-field .p-input-icon {
1030
+ user-select: none;
1031
+ }
1032
+ /* message (both: .p-message-text=Vue, .p-inline-message-text=both) */
1033
+ .p-message-text, .p-inline-message-text {
1034
+ display: flex;
1035
+ align-items: anchor-center;
1036
+ gap: 8px;
1037
+ font-size: 0.9em;
1038
+ font-weight: 400;
1039
+ }
1040
+ /* drawer/sidebar (both: .p-drawer-*=Vue, .p-sidebar-*=React) */
1041
+ .p-drawer-header, .p-sidebar-header {
1042
+ border-bottom: 1px solid var(--rs-color-stroke-disabled);
1043
+ }
1044
+ .p-drawer-close-button, .p-sidebar-close {
1045
+ width: auto;
1046
+ height: auto;
1047
+ padding: 2px;
1048
+ }
1049
+ /* Vue-only: PrimeReact 10 no emite .p-checkbox-lg */
1050
+ .p-checkbox-lg, .p-checkbox-lg .p-checkbox-box:before {
1051
+ left: 4px;
1052
+ }
1053
+ .p-checkbox-box::before {
1054
+ display: none;
1055
+ }
1056
+ /* datatable (both) */
1057
+ .p-datatable-table {
1058
+ table-layout: auto;
1059
+ }
1060
+ .p-datatable-thead > tr > th,
1061
+ .p-datatable-tbody > tr > td {
1062
+ white-space: nowrap;
1063
+ }
1064
+ .p-datatable-tbody > tr > td {
1065
+ border: none;
1066
+ }
1067
+ .p-datatable-tbody > tr:hover > td {
1068
+ background-color: var(--rs-color-gray-100);
1069
+ }
1070
+ /* toast (both) */
1071
+ .p-toast-message-content {
1072
+ gap: 0.5rem;
1073
+ padding: 0.75rem 1rem;
1074
+ }
1075
+ .p-toast-message-text {
1076
+ display: flex;
1077
+ flex-direction: column;
1078
+ gap: 0.25rem;
1079
+ }
1080
+ .p-toast-summary:only-child {
1081
+ line-height: 1.5;
1082
+ margin: 0;
1083
+ }
1084
+ .p-toast-message-content > div:last-child {
1085
+ align-items: center;
1086
+ display: flex;
1087
+ margin-left: auto;
1088
+ }
1089
+ .p-toast-message-close, .p-toast-icon-close {
1090
+ align-items: center;
1091
+ display: inline-flex;
1092
+ justify-content: center;
1093
+ padding: 0.25rem;
1094
+ }
1095
+ /* tag (both) */
1096
+ .p-tag.p-tag-primary {
1097
+ background: var(--rs-color-button-primary);
1098
+ color: var(--rs-color-text-button-primary);
1099
+ }
1100
+ .p-tag.p-tag-success {
1101
+ background: var(--rs-color-severity-success-background);
1102
+ color: var(--rs-color-text-button-secondary);
1103
+ }
1104
+ .p-tag.p-tag-info {
1105
+ background: var(--rs-color-severity-info-background);
1106
+ color: var(--rs-color-text-button-secondary);
1107
+ }
1108
+ .p-tag.p-tag-warning {
1109
+ background: var(--rs-color-severity-warning-background);
1110
+ color: var(--rs-color-text-button-secondary);
1111
+ }
1112
+ .p-tag.p-tag-danger {
1113
+ background: var(--rs-color-severity-danger-background);
1114
+ color: var(--rs-color-text-button-secondary);
1115
+ }
1116
+ .p-tag.p-tag-secondary {
1117
+ background: var(--rs-color-severity-secondary-background);
1118
+ color: var(--rs-color-text-button-secondary);
1119
+ }
1120
+ /* #endregion */
1121
+
1122
+ /* title-only toast overrides */
1123
+ .p-toast-message-content:not(:has(.p-toast-detail)) {
1124
+ align-items: center;
1125
+ }
1126
+ .p-toast-message-content:not(:has(.p-toast-detail)) .p-toast-close-button,
1127
+ .p-toast-message-content:not(:has(.p-toast-detail)) .p-toast-icon-close {
1128
+ margin-block: 0;
1129
+ right: 0;
1130
+ }
1131
+ }