@po-ui/style 5.22.3 → 5.22.6

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 (17) hide show
  1. package/README.md +25 -25
  2. package/css/po-theme-default-variables.css +1255 -1255
  3. package/fonts/Roboto/Roboto-Bold.ttf +0 -0
  4. package/fonts/Roboto/Roboto-Light.ttf +0 -0
  5. package/fonts/Roboto/Roboto-Regular.ttf +0 -0
  6. package/icons/PoIcon.svg +184 -184
  7. package/images/big-lock.svg +19 -19
  8. package/images/blocked-user.svg +54 -54
  9. package/images/email-sent.svg +41 -41
  10. package/images/expired.svg +54 -54
  11. package/images/lock.svg +19 -19
  12. package/images/order-ascending.svg +6 -6
  13. package/images/order-descending.svg +6 -6
  14. package/images/order-unselected.svg +5 -5
  15. package/images/po_black.svg +9 -9
  16. package/images/success.svg +13 -13
  17. package/package.json +1 -1
package/css/po-theme-default-variables.css CHANGED
@@ -1,1255 +1,1255 @@
1
- /**
2
- * @theme: po-ui
3
- **/
4
-
5
- /**
6
- * CONTENTS
7
- *
8
- * COMMONS
9
- * Common......................configurações.
10
- * Color.......................variáveis globais de cores.
11
- * Color Palette...............variáveis da peleta de cores.
12
- * Font........................variáveis de fontes.
13
- *
14
- * COMPONENTS
15
- * Accordion...................variáveis do Accordion.
16
- * Avatar......................variáveis do Avatar.
17
- * Button......................variáveis do Button.
18
- * Badge.......................variáveis do Badge.
19
- * Breadcrumb..................variáveis do Breadcrumb.
20
- * Button Group................variáveis do Button Group.
21
- * Calendar....................variáveis do Calendar.
22
- * Chart.......................variáveis do Chart.
23
- * Checkbox Group..............variáveis do Checkbox Group.
24
- * Combo.......................variáveis do Combo.
25
- * Container...................variáveis do Container.
26
- * Datepicker Range............variáveis do Datepicker Range.
27
- * Disclaimer..................variáveis do Disclaimer.
28
- * Disclaimer Group............variáveis do Disclaimer Group.
29
- * Divider.....................variáveis do Divider.
30
- * Dropdown....................variáveis do Dropdown.
31
- * Field Container.............variáveis do Field Container.
32
- * Field Container Bottom......variáveis do Field Container Bottom.
33
- * Field Icon..................variáveis do Field Icon.
34
- * Gauge.......................variáveis do Gauge.
35
- * Info........................variáveis do Info.
36
- * Input.......................variáveis do Input.
37
- * List View...................variáveis do List View.
38
- * Loading.....................variáveis do Loading.
39
- * Loading Overlay.............variáveis do Loading Overlay.
40
- * Lookup......................variáveis do Lookup.
41
- * Menu........................variáveis do Menu.
42
- * Menu Filter.................variáveis do Menu Filter.
43
- * Menu Panel..................variáveis do Menu Panel.
44
- * Modal.......................variáveis do Modal.
45
- * Modal Password Recovery.....variáveis do Modal Password Recovery.
46
- * Multiselect.................variáveis do Multiselect.
47
- * Navbar......................variáveis do Navbar.
48
- * Navbar Action...............variáveis do Navbar Action.
49
- * Navbar Action Popup.........variáveis do Navbar Action Popup.
50
- * Navbar Item.................variáveis do Navbar Item.
51
- * Navbar Item Navigation......variáveis do Navbar Item Navigation.
52
- * Page........................variáveis do Page.
53
- * Page Background.............variáveis do Page Background.
54
- * Page Blocked User...........variáveis do Page Blocked User.
55
- * Page Change Password........variáveis do Page Change Password.
56
- * Page Content................variáveis do Page Content.
57
- * Page Header................ variáveis do Page Header.
58
- * Page List...................variáveis do Page List.
59
- * Page Login..................variáveis do Page Login.
60
- * Popover.....................variáveis do Popover.
61
- * Popup.......................variáveis do Popup.
62
- * Radio Group.................variáveis do Radio Group.
63
- * Rich Text...................variáveis do Rich Text.
64
- * Select......................variáveis do Select.
65
- * Slide.......................variáveis do Slide.
66
- * Stepper.....................variáveis do Stepper.
67
- * Switch......................variáveis do Switch.
68
- * Tab Button..................variáveis do Tab Button.
69
- * Tab Dropdown................variáveis do Tab Dropdown.
70
- * Table.......................variáveis do Table.
71
- * Table Column Link...........variáveis do Table Column Link.
72
- * Table Column Manager .......variáveis do Table Column Manager.
73
- * Tag.........................variáveis do Tag.
74
- * Textarea....................variáveis do Textarea.
75
- * Toolbar.....................variáveis do Toolbar.
76
- * Tooltip.....................variáveis do Tooltip.
77
- * Tree View...................variáveis do Tree View.
78
- * Upload......................variáveis do Upload.
79
- * Widget......................variáveis do Widget.
80
- */
81
-
82
- /*------------------------------------*\
83
- COMMONS
84
- \*------------------------------------*/
85
-
86
- /*------------------------------------*\
87
- COMMON
88
- \*------------------------------------*/
89
-
90
- :root {
91
- --color-wrapper-menu-panel-color-background: var(--color-white);
92
- --color-overlay-background-color-overlay: var(--color-secondary-dark-60-alpha-70);
93
-
94
- --color-hr-border-top: var(--color-neutral-light-90);
95
- }
96
-
97
- /*------------------------------------*\
98
- COLOR
99
- \*------------------------------------*/
100
-
101
- :root {
102
- /* Cor do background da linha da tabela */
103
- --color-primary-light-95: #fcf6f9;
104
-
105
- /* Borda inferior da Table Header */
106
- --color-primary-light-80: #f5dbe8;
107
-
108
- /* Scroll (opacidade de 50%) */
109
- --color-primary-alpha-50: rgba(201, 53, 125, 0.5);
110
-
111
- /* Botão primário, Links, Cor da borda do input selecionado, Cor da borda do botão secundário */
112
- --color-primary: #c9357d;
113
-
114
- /* Hover do Botão primário, Links, Cor da borda do botão secundário */
115
- --color-primary-dark-20: #9d2c67;
116
-
117
- /* Pressed do Botão primário, Links, Cor da borda do botão secundário */
118
- --color-primary-dark-40: #8b255a;
119
-
120
- /* Secondary */
121
- --color-secondary: #8241a4;
122
-
123
- --color-secondary-dark-20: #733b8e;
124
-
125
- --color-secondary-dark-40: #5e2e73;
126
-
127
- /* Overlay de Modal e Menu (70% de opacidade) */
128
- --color-secondary-dark-60-alpha-70: rgba(59, 28, 74, 0.7);
129
-
130
- --color-secondary-dark-60: #3b1c4a;
131
-
132
- /* Tertiary */
133
-
134
- /* Cor do background da linha de arquivo em carregamento (Upload) */
135
- --color-tertiary-light-90: #fffaef;
136
-
137
- /* Borda esquerda do menu lateral selecionado, Tab selecionada, Card em destaque */
138
- --color-tertiary: #ffd464;
139
-
140
- /* Cor de gráficos, botão do disclaimer */
141
- --color-tertiary-dark-5: #f4d069;
142
-
143
- --color-tertiary-dark-40: #d2b25a;
144
-
145
- --color-tertiary-dark-60: #ac9249;
146
-
147
- --color-white: #ffffff;
148
-
149
- --color-white-alpha-30: rgba(255, 255, 255, 0.3);
150
-
151
- /* Background da página, Background da linha selecionada */
152
- --color-neutral-light-98: #fbfbfb;
153
-
154
- /* Borda inferior de item de tabela, Base do Slider, Background do Input inativo */
155
- --color-neutral-light-90: #eceeee;
156
-
157
- /* Step inativo, Base Switch desligado */
158
- --color-neutral-light-80: #dadedf;
159
-
160
- /* Ícone desabilitado, Slider desabilitado, Borda de input */
161
- --color-neutral-light-60: #b6bdbf;
162
-
163
- /* Texto do Placeholder */
164
- --color-neutral-light-40: #9da7a9;
165
-
166
- /* Borda superior do itens do menu (45% de opacidade) */
167
- --color-neutral-alpha-45: rgba(74, 92, 96, 0.45);
168
-
169
- /* Background do Feedback, Pill de informação */
170
- --color-neutral: #4a5c60;
171
-
172
- /* Usar em menu: Área do logo, Background do menu */
173
- --color-neutral-dark-40: #2c3739;
174
-
175
- /* Texto */
176
- --color-neutral-dark-60: #1d2426;
177
-
178
- /* Usar em sombras (10% de opacidade) */
179
- --color-black-alpha-10: rgba(0, 0, 0, 0.1);
180
-
181
- /* Usar em menu: Hover - Background de item de menu (15% de opacidade) */
182
- --color-black-alpha-15: rgba(0, 0, 0, 0.15);
183
-
184
- /* Usar em menu: Background dos itens de segundo nível (30% de opacidade) */
185
- --color-black-alpha-30: rgba(0, 0, 0, 0.3);
186
-
187
- --color-black: #000000;
188
-
189
- /* Background do Feedback de sucesso */
190
- --color-success: #00b28e;
191
-
192
- /* Background do Feedback de atenção */
193
- --color-warning: #ea9b3e;
194
-
195
- --color-danger-light-40: #cd5f58;
196
-
197
- /* Background do Feedback de erro, Borda de Input com erro */
198
- --color-danger: #c64840;
199
-
200
- /* Background disclaimer danger */
201
- --color-danger-dark-5: #bb443c;
202
-
203
- /* Hover para botão danger */
204
- --color-danger-dark-20: #9e3933;
205
-
206
- /* Estilo ativo para botão danger */
207
- --color-danger-dark-40: #762b26;
208
-
209
- --color-transparent: transparent;
210
-
211
- /*------------------------------------*\
212
- COLOR-PALETTE
213
- \*------------------------------------*/
214
-
215
- /* Cores que podem ser utilizadas na coluna de labels, legenda e cor de icones do componente table, também utilizadas na tag e badge */
216
- --color-01: #0c9abe;
217
- --color-02: #2c85c8;
218
- --color-03: #2c43c8;
219
- --color-04: #5843c8;
220
- --color-05: #ab43c8;
221
- --color-06: #ab4391;
222
- --color-07: #c64840;
223
- --color-08: #ea9b3e;
224
- --color-09: #abc249;
225
- --color-10: #56b96b;
226
- --color-11: #00b28e;
227
- --color-12: #06a6a5;
228
-
229
- /*------------------------------------*\
230
- FONT
231
- \*------------------------------------*/
232
-
233
- /**
234
- * Variáveis para definições de fontes. O PO utiliza as variantes *extra light*, *regular* e *bold* em seus componentes e, para cada uma delas,
235
- * é atribuído um @font-face específico. Os nomes elencados no `font-family` no @font-face devem ser os mesmos atribuídos como valor para as variáveis.
236
- */
237
- --font-family-theme: Roboto;
238
- --font-family-theme-bold: Roboto-Bold;
239
- --font-family-theme-extra-light: Roboto-Condensed-Light;
240
- }
241
-
242
- @font-face {
243
- font-family: 'Roboto';
244
- src: url('./../fonts/Roboto/Roboto-Regular.ttf');
245
- font-weight: normal;
246
- font-style: normal;
247
- }
248
-
249
- @font-face {
250
- font-family: 'Roboto-Condensed-Light';
251
- src: url('./../fonts/Roboto/Roboto-Light.ttf');
252
- font-weight: 300;
253
- font-style: normal;
254
- font-stretch: condensed;
255
- }
256
-
257
- @font-face {
258
- font-family: 'Roboto-Bold';
259
- src: url('./../fonts/Roboto/Roboto-Bold.ttf');
260
- font-weight: bold;
261
- font-style: normal;
262
- }
263
-
264
- /*------------------------------------*\
265
- COMPONENTS
266
- \*------------------------------------*/
267
- :root {
268
- /*------------------------------------*\
269
- ACCORDION
270
- \*------------------------------------*/
271
-
272
- /**
273
- * Accordion Item
274
- */
275
- --color-accordion-item-border-color: var(--color-neutral-light-90);
276
-
277
- /**
278
- * Accordion Item Header
279
- */
280
- --color-accordion-header-button-background-color: var(--color-white);
281
- --color-accordion-header-color-primary: var(--color-primary);
282
- --color-accordion-header-color-hover: var(--color-secondary);
283
-
284
- /**
285
- * Accordion Item Header Button
286
- */
287
- --color-accordion-item-header-button-background-color: var(--color-transparent);
288
- --color-accordion-item-header-button-focus: var(--color-secondary);
289
-
290
- /**
291
- * Accordion Item Body
292
- */
293
- --color-accordion-item-body-color: var(--color-neutral);
294
-
295
- /*------------------------------------*\
296
- AVATAR
297
- \*------------------------------------*/
298
-
299
- --color-avatar-background-color-avatar: var(--color-neutral);
300
-
301
- /*------------------------------------*\
302
- BUTTON
303
- \*------------------------------------*/
304
-
305
- /**
306
- * Button Default
307
- */
308
- --color-button-background-color: var(--color-transparent);
309
- --color-button-border: var(--color-secondary);
310
- --color-button-color: var(--color-secondary);
311
-
312
- --color-button-background-color-hover: var(--color-transparent);
313
- --color-button-border-hover: var(--color-secondary-dark-20);
314
- --color-button-color-hover: var(--color-secondary-dark-20);
315
-
316
- --color-button-background-color-pressed: var(--color-transparent);
317
- --color-button-border-pressed: var(--color-secondary-dark-40);
318
- --color-button-color-pressed: var(--color-secondary-dark-40);
319
-
320
- --color-button-background-color-disabled: var(--color-transparent);
321
- --color-button-border-disabled: var(--color-neutral-light-60);
322
- --color-button-color-disabled: var(--color-neutral-light-60);
323
- /**
324
- * Button Primary
325
- */
326
- --color-button-background-color-primary: var(--color-tertiary);
327
- --color-button-border-primary: var(--color-tertiary);
328
- --color-button-color-primary: var(--color-neutral-dark-60);
329
-
330
- --color-button-background-color-primary-hover: var(--color-tertiary-dark-40);
331
- --color-button-border-primary-hover: var(--color-tertiary-dark-40);
332
- --color-button-color-primary-hover: var(--color-neutral-dark-60);
333
-
334
- --color-button-background-color-primary-pressed: var(--color-tertiary-dark-60);
335
- --color-button-border-primary-pressed: var(--color-tertiary-dark-60);
336
- --color-button-color-primary-pressed: var(--color-neutral-dark-60);
337
-
338
- --color-button-background-color-primary-disabled: var(--color-neutral-light-60);
339
- --color-button-border-primary-disabled: var(--color-neutral-light-60);
340
- --color-button-color-primary-disabled: var(--color-white);
341
- /**
342
- * Button Danger
343
- */
344
- --color-button-background-color-danger: var(--color-transparent);
345
- --color-button-border-danger: var(--color-danger);
346
- --color-button-color-danger: var(--color-danger);
347
-
348
- --color-button-background-color-danger-hover: var(--color-transparent);
349
- --color-button-border-danger-hover: var(--color-danger-dark-20);
350
- --color-button-color-danger-hover: var(--color-danger-dark-20);
351
-
352
- --color-button-background-color-danger-pressed: var(--color-transparent);
353
- --color-button-border-danger-pressed: var(--color-danger-dark-40);
354
- --color-button-color-danger-pressed: var(--color-danger-dark-40);
355
-
356
- --color-button-background-color-danger-disabled: var(--color-transparent);
357
- --color-button-border-danger-disabled: var(--color-neutral-light-60);
358
- --color-button-color-danger-disabled: var(--color-neutral-light-60);
359
- /**
360
- * Button Link
361
- */
362
- --color-button-background-color-link: var(--color-transparent);
363
- --color-button-color-link: var(--color-primary);
364
-
365
- --color-button-background-color-link-hover: var(--color-transparent);
366
- --color-button-color-link-hover: var(--color-primary-dark-20);
367
-
368
- --color-button-background-color-link-pressed: var(--color-transparent);
369
- --color-button-color-link-pressed: var(--color-primary-dark-40);
370
-
371
- --color-button-background-color-link-disabled: var(--color-transparent);
372
- --color-button-color-link-disabled: var(--color-neutral-light-60);
373
-
374
- /*------------------------------------*\
375
- BADGE
376
- \*------------------------------------*/
377
-
378
- --color-badge-color: var(--color-white);
379
-
380
- /*------------------------------------*\
381
- BREADCRUMB
382
- \*------------------------------------*/
383
-
384
- /**
385
- * Breadcrumb
386
- */
387
- --color-breadcrumb-background-color-container: var(--color-white);
388
- --color-breadcrumb-border-color-container: var(--color-neutral-light-90);
389
-
390
- --color-breadcrumb-color-item: var(--color-primary);
391
- --color-breadcrumb-color-item-link-hover: var(--color-primary-dark-40);
392
- --color-breadcrumb-color-item-unclickable: var(--color-neutral);
393
- --color-breadcrumb-color-star-active: var(--color-warning);
394
- /**
395
- * Breadcrumb Dropdown
396
- */
397
- --color-breadcrumb-background-color-dropdown: var(--color-white);
398
- --color-breadcrumb-background-color-dropdown-item-hover: var(--color-primary-light-95);
399
-
400
- /*------------------------------------*\
401
- BUTTON GROUP
402
- \*------------------------------------*/
403
-
404
- --color-button-group-border-button: var(--color-primary);
405
- --color-button-group-border-button-disabled: var(--color-neutral-light-60);
406
-
407
- --color-button-group-background-selected: var(--color-neutral);
408
- --color-button-group-border-selected: var(--color-neutral);
409
- --color-button-group-color-selected: var(--color-white);
410
-
411
- --color-button-group-background-color-neutral-hover: var(--color-neutral-dark-40);
412
- --color-button-group-border-button-hover: var(--color-button-border-primary-hover);
413
- --color-button-group-border-neutral-hover: var(--color-neutral-dark-40);
414
- --color-button-group-color-neutral-hover: var(--color-white);
415
-
416
- --color-button-group-background-color-neutral-pressed: var(--color-neutral-dark-60);
417
- --color-button-group-border-neutral-pressed: var(--color-neutral-dark-60);
418
- --color-button-group-color-neutral-pressed: var(--color-white);
419
-
420
- --color-button-group-background-color-neutral-disabled: var(--color-neutral-light-60);
421
- --color-button-group-border-neutral-disabled: var(--color-neutral-light-60);
422
- --color-button-group-color-neutral-disabled: var(--color-white);
423
-
424
- /*------------------------------------*\
425
- CALENDAR
426
- \*------------------------------------*/
427
-
428
- --color-calendar-background-color: var(--color-white);
429
- --color-calendar-arrow: var(--color-primary);
430
- --color-calendar-title: var(--color-primary);
431
- --color-calender-color-content-label: var(--color-neutral-light-40);
432
-
433
- --color-calendar-background-color-box-background-normal: var(--color-transparent);
434
- --color-calendar-background-color-box-background-hover: var(--color-neutral-light-80);
435
- --color-calendar-background-color-box-background-disabled: var(--color-neutral-light-60);
436
- --color-calendar-background-color-box-background-active: var(--color-tertiary);
437
- --color-calendar-background-color-mobile-overlay: var(--color-secondary-dark-60-alpha-70);
438
- --color-calendar-text-box-background-active: var(--color-neutral-dark-60);
439
-
440
- --color-calendar-background-color-box-background-selected: var(--color-tertiary);
441
- --color-calendar-background-color-box-background-range: var(--color-primary-light-80);
442
- --color-calendar-background-color-box-background-today-hover: var(--color-neutral-light-80);
443
-
444
- --color-calendar-background-color-border-today: var(--color-primary);
445
-
446
- --color-calendar-color-box-foreground: var(--color-neutral);
447
- --color-calendar-color-box-foreground-selected: var(--color-neutral-dark-60);
448
- --color-calendar-color-box-foreground-range: var(--color-primary);
449
- --color-calendar-color-box-foreground-today: var(--color-primary);
450
- --color-calendar-color-box-foreground-disabled: var(--color-neutral-light-80);
451
-
452
- /*------------------------------------*\
453
- CHART
454
- \*------------------------------------*/
455
-
456
- --color-chart-background-color: var(--color-white);
457
- --color-chart-legend-wrapper-scrollbar: var(--color-primary-alpha-50);
458
- --color-chart-axis-stroke: var(--color-neutral-light-80);
459
- --color-chart-legend-text: var(--color-neutral);
460
- --color-chart-axis-label-text: var(--color-neutral-dark-60);
461
-
462
- /**
463
- * Chart Types
464
- */
465
- --color-chart-gauge-base-path-color: var(--color-neutral-light-80);
466
- --color-chart-gauge-text-content-focus: var(--color-secondary);
467
- --color-chart-gauge-text-description-color: var(--color-neutral);
468
-
469
- --color-chart-line-point-fill: var(--color-white);
470
-
471
- /*------------------------------------*\
472
- CHECKBOX
473
- \*------------------------------------*/
474
-
475
- --color-checkbox-background-color: var(--color-white);
476
- --color-checkbox-background-color-active: var(--color-primary);
477
- --color-checkbox-background-color-disabled: var(--color-neutral-light-90);
478
- --color-checkbox-background-color-icon-disabled: var(--color-neutral-light-60);
479
- --color-checkbox-box-shadow-color-focusable: var(--color-primary-dark-20);
480
-
481
- --color-checkbox-border-input: var(--color-neutral-light-60);
482
- --color-checkbox-border-input-active: var(--color-primary);
483
- --color-checkbox-border-input-disabled: var(--color-neutral-light-60);
484
- --color-checkbox-border-input-invalid: var(--color-danger);
485
-
486
- --color-checkbox-color-active: var(--color-white);
487
-
488
- /*------------------------------------*\
489
- CHECKBOX GROUP
490
- \*------------------------------------*/
491
-
492
- --color-checkbox-group-background-color: var(--color-white);
493
- --color-checkbox-group-background-color-active: var(--color-primary);
494
- --color-checkbox-group-background-color-disabled: var(--color-neutral-light-90);
495
- --color-checkbox-group-background-color-icon-disabled: var(--color-neutral-light-60);
496
- --color-checkbox-group-box-shadow-color-focusable: var(--color-primary-dark-20);
497
-
498
- --color-checkbox-group-border-input: var(--color-neutral-light-60);
499
- --color-checkbox-group-border-input-active: var(--color-primary);
500
- --color-checkbox-group-border-input-disabled: var(--color-neutral-light-60);
501
- --color-checkbox-group-border-input-invalid: var(--color-danger);
502
-
503
- --color-checkbox-group-color-active: var(--color-white);
504
-
505
- /*------------------------------------*\
506
- COMBO
507
- \*------------------------------------*/
508
-
509
- --color-combo-background-color: var(--color-white);
510
-
511
- --color-combo-background-color-item-hover: var(--color-primary-light-95);
512
- --color-combo-background-color-scrollbar: var(--color-primary-alpha-50);
513
-
514
- --color-combo-border-button-error: var(--color-danger);
515
-
516
- --color-combo-background-color-group-title: var(--color-neutral-light-98);
517
- --color-combo-color-group-title: var(--color-neutral-dark-60);
518
- --color-combo-color-primary: var(--color-primary);
519
- --color-combo-color-selected: var(--color-white);
520
- --color-combo-background-color-selected-primary: var(--color-primary);
521
-
522
- /*------------------------------------*\
523
- CONTAINER
524
- \*------------------------------------*/
525
-
526
- --color-container-color-shadow: var(--color-neutral-light-90);
527
- --color-container-background-color-scrollbar: var(--color-primary);
528
-
529
- /*------------------------------------*\
530
- DATEPICKER RANGE
531
- \*------------------------------------*/
532
-
533
- --color-datepicker-range-background-color-disabled: var(--color-neutral-light-90);
534
- --color-datepicker-range-border-text: var(--color-neutral-light-60);
535
- --color-datepicker-range-border-text-error: var(--color-danger);
536
- --color-datepicker-range-color-disabled: var(--color-neutral-light-60);
537
- --color-datepicker-range-color-focused: var(--color-primary);
538
- --color-datepicker-range-color-text-error: var(--color-danger);
539
-
540
- /*------------------------------------*\
541
- DISCLAIMER
542
- \*------------------------------------*/
543
-
544
- --color-disclaimer-background-color-label: var(--color-tertiary);
545
- --color-disclaimer-background-color-label-danger: var(--color-danger);
546
-
547
- --color-disclaimer-color-text: var(--color-neutral-dark-60);
548
- --color-disclaimer-color-text-danger: var(--color-white);
549
-
550
- --color-disclaimer-background-color-remove: var(--color-tertiary-dark-5);
551
- --color-disclaimer-background-color-danger-remove: var(--color-danger-dark-5);
552
-
553
- /*------------------------------------*\
554
- DISCLAIMER GROUP
555
- \*------------------------------------*/
556
-
557
- --color-disclaimer-group-background-color: var(--color-white);
558
- --color-disclaimer-group-border-color: var(--color-neutral-light-90);
559
- --color-disclaimer-group-font-title: var(--color-neutral);
560
-
561
- /*------------------------------------*\
562
- DIVIDER
563
- \*------------------------------------*/
564
-
565
- --color-divider-label-color: var(--color-neutral-dark-60);
566
- --color-divider-line-color: var(--color-neutral-light-90);
567
-
568
- /*------------------------------------*\
569
- DROPDOWN
570
- \*------------------------------------*/
571
-
572
- --color-dropdown-button-background-color: var(--color-transparent);
573
- --color-dropdown-button-color: var(--color-secondary);
574
- --color-dropdown-button-border-color: var(--color-secondary);
575
-
576
- --color-dropdown-button-color-hover: var(--color-secondary-dark-20);
577
- --color-dropdown-button-border-color-hover: var(--color-secondary-dark-20);
578
-
579
- --color-dropdown-button-color-disabled: var(--color-neutral-light-60);
580
- --color-dropdown-button-border-color-disabled: var(--color-neutral-light-60);
581
-
582
- /*------------------------------------*\
583
- FIELD CONTAINER
584
- \*------------------------------------*/
585
-
586
- --color-field-container-color-title: var(--color-neutral);
587
- --color-field-container-color-opcional: var(--color-neutral);
588
- --color-field-container-color-help: var(--color-neutral);
589
-
590
- /*------------------------------------*\
591
- FIELD CONTAINER BOTTOM
592
- \*------------------------------------*/
593
-
594
- --color-field-container-bottom-color-text: var(--color-neutral-dark-60);
595
- --color-field-container-bottom-color-text-error: var(--color-danger);
596
-
597
- /*------------------------------------*\
598
- FIELD ICON
599
- \*------------------------------------*/
600
-
601
- --color-field-icon-color: var(--color-primary);
602
- --color-field-icon-color-error: var(--color-danger);
603
- --color-field-icon-color-disabled: var(--color-neutral-light-60);
604
-
605
- /*------------------------------------*\
606
- GAUGE
607
- \*------------------------------------*/
608
-
609
- --color-gauge-base-color: var(--color-neutral-light-80);
610
- --color-gauge-description-text-color: var(--color-neutral);
611
- --color-gauge-description-bottom-focus: var(--color-secondary);
612
- --color-gauge-legend-scrollbar: var(--color-primary-alpha-50);
613
- --color-gauge-legend-text: var(--color-neutral);
614
- --color-gauge-pointer-color: var(--color-neutral);
615
-
616
- /*------------------------------------*\
617
- INFO
618
- \*------------------------------------*/
619
-
620
- --color-info-color-text-label: var(--color-neutral);
621
- --color-info-color-text-value: var(--color-neutral-dark-60);
622
-
623
- --color-info-color-link: var(--color-primary);
624
- --color-info-color-link-hover: var(--color-primary-dark-20);
625
- --color-info-color-link-pressed: var(--color-primary-dark-40);
626
-
627
- /*------------------------------------*\
628
- INPUT
629
- \*------------------------------------*/
630
-
631
- --color-input-background-color-text: var(--color-white);
632
- --color-input-border-text: var(--color-neutral-light-60);
633
- --color-input-border-text-disabled: var(--color-neutral-light-90);
634
- --color-input-border-text-focusable: var(--color-primary);
635
- --color-input-border-text-error: var(--color-danger);
636
- --color-input-color-disabled: var(--color-neutral-light-60);
637
- --color-input-text-error: var(--color-danger);
638
- --color-input-text-placeholder: var(--color-neutral-light-40);
639
-
640
- /*------------------------------------*\
641
- LIST VIEW
642
- \*------------------------------------*/
643
-
644
- --color-list-view-background-color: var(--color-white);
645
- --color-list-view-border: var(--color-neutral-light-90);
646
- --color-list-view-color-primary: var(--color-primary);
647
- --color-list-view-color-primary-hover: var(--color-primary-dark-20);
648
- --color-list-view-color-select-all-label: var(--color-neutral);
649
-
650
- /*------------------------------------*\
651
- LOADING
652
- \*------------------------------------*/
653
- --color-loading-color-label: var(--color-neutral);
654
- --color-loading-icon-color-neutral: var(--color-neutral-light-80);
655
- --color-loading-icon-color-primary: var(--color-primary);
656
-
657
- /*------------------------------------*\
658
- LOADING OVERLAY
659
- \*------------------------------------*/
660
-
661
- --color-loading-overlay-background-color-content: var(--color-white);
662
- --color-loading-overlay-box-shadow-content: var(--color-black-alpha-30);
663
-
664
- /*------------------------------------*\
665
- LOOKUP
666
- \*------------------------------------*/
667
-
668
- --color-lookup-search-background-color-text: var(--color-white);
669
- --color-lookup-search-border-text: var(--color-neutral-light-60);
670
- --color-lookup-search-border-text-focusable: var(--color-primary);
671
- --color-lookup-advanced-search-link-color-text: var(--color-primary);
672
-
673
- /*------------------------------------*\
674
- MENU
675
- \*------------------------------------*/
676
-
677
- --color-menu-color-menu-collapse-icon: var(--color-primary);
678
- --color-menu-color-menu-item-text: var(--color-primary);
679
- --color-menu-color-menu-item-selected: var(--color-primary);
680
- --color-menu-color-menu-sub-item-text: var(--color-danger-light-40);
681
- --color-menu-color-menu-sub-item-selected: var(--color-neutral-dark-60);
682
- --color-menu-color-menu-responsive: var(--color-primary);
683
-
684
- --color-menu-background-color-item-grouper-up-hover: var(--color-neutral-light-98);
685
- --color-menu-background-color-item-hover: var(--color-black-alpha-15);
686
- --color-menu-background-color-item-selected: var(--color-neutral-light-80);
687
- --color-menu-background-color-menu: var(--color-white);
688
- --color-menu-background-color-menu-responsive-overlay: var(--color-secondary-dark-60-alpha-70);
689
- --color-menu-background-color-responsive: var(--color-neutral-light-98);
690
- --color-menu-background-color-sub-items: var(--color-neutral-light-98);
691
- --color-menu-background-color-sub-item-selected: var(--color-neutral-light-80);
692
-
693
- --color-menu-border-color-menu-item-selected: var(--color-danger-light-40);
694
- --color-menu-border-left-item: var(--color-transparent);
695
- --color-menu-border-top-item-grouper-up-hover: var(--color-neutral-light-80);
696
- --color-menu-border-top-logo: var(--color-neutral-light-80);
697
- --color-menu-border-top-collapse-button: var(--color-neutral-alpha-45);
698
-
699
- /*------------------------------------*\
700
- MENU FILTER
701
- \*------------------------------------*/
702
-
703
- --color-menu-filter-color-icon: var(--color-primary);
704
- --color-menu-filter-color-text: var(--color-neutral-dark-60);
705
-
706
- --color-menu-filter-background-color: var(--color-neutral-light-98);
707
-
708
- --color-menu-filter-border: var(--color-neutral-alpha-45);
709
- --color-menu-filter-border-focusable: var(--color-neutral);
710
-
711
- /*------------------------------------*\
712
- MENU PANEL
713
- \*------------------------------------*/
714
-
715
- --color-menu-panel-background-color-item-hover: var(--color-black-alpha-15);
716
- --color-menu-panel-background-color-item-selected: var(--color-neutral-light-80);
717
- --color-menu-panel-background-color-menu: var(--color-white);
718
-
719
- --color-menu-panel-border-top-logo: var(--color-neutral-light-80);
720
-
721
- --color-menu-panel-color-menu-item-text: var(--color-primary);
722
- --color-menu-panel-color-menu-item-selected: var(--color-neutral-dark-60);
723
-
724
- /*------------------------------------*\
725
- MODAL
726
- \*------------------------------------*/
727
-
728
- --color-modal-text-color-body: var(--color-neutral-dark-60);
729
- --color-modal-background-color-content: var(--color-white);
730
- --color-modal-background-color-footer: var(--color-white);
731
- --color-modal-background-color-scrollbar: var(--color-primary);
732
- --color-modal-color-overlay: var(--color-secondary-dark-60-alpha-70);
733
- --color-modal-color-title: var(--color-neutral);
734
- --color-modal-color-header-close-button: var(--color-primary);
735
-
736
- /*------------------------------------*\
737
- MODAL PASSWORD RECOVERY
738
- \*------------------------------------*/
739
-
740
- --color-modal-password-recovery-link-color: var(--color-primary);
741
- --color-modal-password-recovery-link-color-hover: var(--color-primary-dark-20);
742
- --color-modal-password-recovery-text-color: var(--color-neutral);
743
-
744
- /*------------------------------------*\
745
- MULTISELECT
746
- \*------------------------------------*/
747
-
748
- --color-multiselect-background-color: var(--color-white);
749
- --color-multiselect-background-color-item-hover: var(--color-primary-light-95);
750
- --color-multiselect-background-color-scrollbar: var(--color-primary-alpha-50);
751
-
752
- --color-multiselect-border-field: var(--color-neutral-light-60);
753
- --color-multiselect-border-field-error: var(--color-danger);
754
- --color-multiselect-border-field-focus: var(--color-primary);
755
- --color-multiselect-border-search: var(--color-neutral-light-80);
756
-
757
- --color-multiselect-color-field-focus: var(--color-primary);
758
-
759
- --color-multiselect-color-primary: var(--color-primary);
760
- --color-multiselect-color-text-error: var(--color-danger);
761
- --color-multiselect-color-text-disabled: var(--color-white);
762
-
763
- --color-multiselect-background-color-checkbox: var(--color-white);
764
- --color-multiselect-background-color-checkbox-active: var(--color-primary);
765
- --color-multiselect-background-color-checkbox-disabled: var(--color-neutral-light-90);
766
- --color-multiselect-background-color-checkbox-icon-disabled: var(--color-neutral-light-60);
767
-
768
- --color-multiselect-border-checkbox-input: var(--color-neutral-light-60);
769
- --color-multiselect-border-checkbox-input-active: var(--color-primary);
770
- --color-multiselect-border-checkbox-input-disabled: var(--color-neutral-light-60);
771
-
772
- --color-multiselect-color-checkbox-active: var(--color-white);
773
-
774
- --color-multiselect-disclaimer-background-color-disabled: var(--color-neutral-light-60);
775
-
776
- /*------------------------------------*\
777
- NAVBAR
778
- \*------------------------------------*/
779
-
780
- --color-navbar-color: var(--color-white);
781
-
782
- /*------------------------------------*\
783
- NAVBAR ACTION
784
- \*------------------------------------*/
785
-
786
- --color-navbar-action-color-content: var(--color-primary);
787
-
788
- /*------------------------------------*\
789
- NAVBAR ACTION POPUP
790
- \*------------------------------------*/
791
-
792
- --color-navbar-action-popup-color-content: var(--color-navbar-action-color-content);
793
-
794
- /*------------------------------------*\
795
- NAVBAR ITEM
796
- \*------------------------------------*/
797
-
798
- --color-navbar-item-color: var(--color-primary);
799
- --color-navbar-item-color-selected: var(--color-neutral);
800
- --color-navbar-item-color-shadow-selected: var(--color-danger-light-40);
801
-
802
- /*------------------------------------*\
803
- NAVBAR ITEM NAVIGATION
804
- \*------------------------------------*/
805
-
806
- --color-navbar-item-navigation-color-icon: var(--color-primary);
807
- --color-navbar-item-navigation-color-icon-disabled: var(--color-neutral-light-80);
808
-
809
- /*------------------------------------*\
810
- PAGE
811
- \*------------------------------------*/
812
-
813
- --color-page-background-color-page: var(--color-white);
814
-
815
- /*------------------------------------*\
816
- PAGE BACKGROUND
817
- \*------------------------------------*/
818
-
819
- --color-page-background-select-item-border-color: var(--color-neutral-light-90);
820
-
821
- /*------------------------------------*\
822
- PAGE BLOCKED USER
823
- \*------------------------------------*/
824
-
825
- --color-page-blocked-user-link-color: var(--color-primary);
826
- --color-page-blocked-user-link-color-hover: var(--color-primary-dark-20);
827
- --color-page-blocked-user-text-color: var(--color-neutral);
828
- --color-page--blocked-user-background-color: var(--color-neutral-light-98);
829
-
830
- /*------------------------------------*\
831
- PAGE CHANGE PASSWORD
832
- \*------------------------------------*/
833
-
834
- --color-page-change-password-background-color-buttons: var(--color-neutral-light-98);
835
- --color-page-change-password-background-color-container: var(--color-white);
836
- --color-page-change-password-background-color-secondary-logo: var(--color-neutral-light-98);
837
- --color-page-change-password-color-link: var(--color-primary);
838
- --color-page-change-password-color-text: var(--color-neutral);
839
- --color-page-change-password-color-required: var(--color-neutral);
840
- --color-page-change-password-color-required-ok: var(--color-success);
841
- --color-page-change-password-color-required-minus: var(--color-black-alpha-30);
842
- --color-page-change-password-color-required-text: var(--color-secondary-dark-60-alpha-70);
843
-
844
- /*------------------------------------*\
845
- PAGE CONTENT
846
- \*------------------------------------*/
847
-
848
- --color-page-content-background-color-scrollbar: var(--color-primary);
849
-
850
- /*------------------------------------*\
851
- PAGE HEADER
852
- \*------------------------------------*/
853
-
854
- --color-page-header-color-title: var(--color-neutral);
855
-
856
- /*------------------------------------*\
857
- PAGE LIST
858
- \*------------------------------------*/
859
-
860
- --color-page-list-color-link-text: var(--color-primary);
861
-
862
- /*------------------------------------*\
863
- PAGE LOGIN
864
- \*------------------------------------*/
865
-
866
- --color-page-login-header-product-name-color: var(--color-neutral);
867
- --color-page-login-header-welcome-color: var(--color-secondary);
868
- --color-page-login-background-color: var(--color-neutral-light-98);
869
- --color-page-login-background-highlight-image: var(--color-neutral-light-90);
870
- --color-page-login-highlight-text-color: var(--color-white);
871
- --color-page-login-link-color: var(--color-primary);
872
- --color-page-login-link-hover-color: var(--color-primary-dark-20);
873
- --color-page-login-popover-color-attempts: var(--color-primary);
874
- --color-page-login-popover-color-title: var(--color-tertiary);
875
- --color-page-login-support-background-color: var(--color-white);
876
- --color-page-login-support-color: var(--color-primary);
877
-
878
- /*------------------------------------*\
879
- PAGE SLIDE
880
- \*------------------------------------*/
881
-
882
- --color-page-slide-close-button-color: var(--color-primary);
883
- --color-page-slide-body-text-color: var(--color-neutral-dark-60);
884
-
885
- /*------------------------------------*\
886
- POPOVER
887
- \*------------------------------------*/
888
-
889
- --color-popover-background-color: var(--color-white);
890
- --color-popover-background-color-arrow: var(--color-white);
891
- --color-popover-background-color-scrollbar: var(--color-primary);
892
-
893
- --color-popover-color-text-title: var(--color-neutral);
894
-
895
- /*------------------------------------*\
896
- POPUP
897
- \*------------------------------------*/
898
-
899
- --color-popup-background-color-popup: var(--color-white);
900
- --color-popup-background-color-popup-item-hover: var(--color-primary-light-95);
901
- --color-popup-background-color-popup-item-selected: var(--color-primary);
902
- --color-popup-background-color-popup-item-selected-hover: var(--color-primary-dark-20);
903
- --color-popup-background-color-popup-item-selected-disabled: var(--color-neutral-light-60);
904
- --color-popup-background-color-scrollbar: var(--color-primary);
905
-
906
- --color-popup-border-color-separator: var(--color-neutral-light-90);
907
-
908
- --color-popup-color-danger: var(--color-danger);
909
- --color-popup-color-default: var(--color-primary);
910
- --color-popup-color-disabled: var(--color-neutral-light-80);
911
- --color-popup-color-item-selected: var(--color-white);
912
-
913
- /*------------------------------------*\
914
- PROGRESS
915
- \*------------------------------------*/
916
-
917
- --color-progress-color-info-icon: var(--color-primary);
918
- --color-progress-color-text: var(--color-neutral);
919
- --color-progress-color-text-success: var(--color-success);
920
- --color-progress-color-text-error: var(--color-danger);
921
- --color-progress-color-info: var(--color-neutral);
922
-
923
- --color-progress-border-color-info-icon-close: var(--color-secondary);
924
-
925
- /*------------------------------------*\
926
- PROGRESS BAR
927
- \*------------------------------------*/
928
-
929
- --color-progress-bar-background-color-bar: var(--color-primary-light-80);
930
- --color-progress-bar-background-color-default: var(--color-primary);
931
- --color-progress-bar-background-color-success: var(--color-success);
932
- --color-progress-bar-background-color-error: var(--color-danger);
933
-
934
- /*------------------------------------*\
935
- RADIO-GROUP
936
- \*------------------------------------*/
937
-
938
- --color-radio-group-background-color: var(--color-white);
939
- --color-radio-group-background-color-active: var(--color-primary);
940
- --color-radio-group-background-color-input-disabled: var(--color-neutral-light-90);
941
-
942
- --color-radio-group-border-color: var(--color-neutral-light-60);
943
- --color-radio-group-border-color-focusable: var(--color-primary-dark-20);
944
- --color-radio-group-border-color-input-error: var(--color-danger);
945
-
946
- --color-radio-group-color-label-active: var(--color-white);
947
- --color-radio-group-color-text-disabled: var(--color-neutral-light-60);
948
-
949
- /*------------------------------------*\
950
- RICH TEXT
951
- \*------------------------------------*/
952
-
953
- --color-rich-text-background-color-scrollbar: var(--color-primary-alpha-50);
954
-
955
- --color-rich-text-body-background-color: var(--color-white);
956
- --color-rich-text-body-border-error: var(--color-danger);
957
-
958
- --color-rich-text-body-text-error: var(--color-danger);
959
- --color-rich-text-body-text-link: var(--color-primary);
960
- --color-rich-text-body-text-link-hover: var(--color-primary-dark-20);
961
- --color-rich-text-body-text-selected-color: var(--color-primary-light-80);
962
-
963
- --color-rich-text-placeholder-color: var(--color-neutral-light-40);
964
-
965
- --color-rich-text-toolbar-background-color: var(--color-rich-text-body-background-color);
966
-
967
- /*------------------------------------*\
968
- SELECT
969
- \*------------------------------------*/
970
-
971
- --color-select-background-color: var(--color-white);
972
- --color-select-background-color-disabled: var(--color-neutral-light-90);
973
-
974
- --color-select-background-color-item-hover: var(--color-primary-light-95);
975
- --color-select-background-color-scrollbar: var(--color-primary-alpha-50);
976
-
977
- --color-select-border-button: var(--color-neutral-light-60);
978
- --color-select-border-button-error: var(--color-danger);
979
- --color-select-border-button-disabled: var(--color-neutral-light-60);
980
- --color-select-border-button-hover: var(--color-primary);
981
- --color-select-border-button-focus: var(--color-primary);
982
-
983
- --color-select-button-disabled: var(--color-neutral-light-60);
984
- --color-select-button-focus: var(--color-primary);
985
-
986
- --color-select-color-primary: var(--color-primary);
987
- --color-select-color-selected: var(--color-white);
988
- --color-select-background-color-unselected: var(--color-white);
989
- --color-select-background-color-selected: var(--color-primary);
990
- --color-select-color-text-error: var(--color-danger);
991
-
992
- /*------------------------------------*\
993
- SLIDE
994
- \*------------------------------------*/
995
-
996
- --color-slide-background-color-active-circle: var(--color-primary);
997
- --color-slide-background-color-arrow-circle: var(--color-white);
998
- --color-slide-background-color-circle: var(--color-neutral-light-80);
999
- --color-slide-background-color-scrollbar: var(--color-primary-alpha-50);
1000
- --color-slide-border-arrow: var(--color-primary);
1001
- --color-slide-box-shadow-arrow-circle: var(--color-black-alpha-15);
1002
- --color-slide-box-shadow-wrapper: var(--color-black-alpha-30);
1003
-
1004
- /*------------------------------------*\
1005
- STEPPER
1006
- \*------------------------------------*/
1007
-
1008
- --color-stepper-bar: var(--color-neutral);
1009
- --color-stepper-bar-disabled: var(--color-neutral-light-40);
1010
- --color-stepper-circle-active: var(--color-primary);
1011
- --color-stepper-circle-default: var(--color-primary);
1012
- --color-stepper-circle-disabled: var(--color-neutral-light-60);
1013
- --color-stepper-circle-error: var(--color-danger);
1014
-
1015
- /*------------------------------------*\
1016
- SWITCH
1017
- \*------------------------------------*/
1018
-
1019
- --color-switch-background-color-container-on: var(--color-primary);
1020
- --color-switch-background-color-container-off: var(--color-neutral-light-80);
1021
- --color-switch-background-color-container-disabled: var(--color-neutral-light-80);
1022
- --color-switch-box-shadow-color-focusable: var(--color-primary-dark-20);
1023
-
1024
- --color-switch-background-color-button: var(--color-white);
1025
- --color-switch-background-color-button-disabled: var(--color-neutral-light-40);
1026
-
1027
- --color-switch-color-icon-on: var(--color-primary);
1028
- --color-switch-color-icon-off: var(--color-neutral-light-80);
1029
- --color-switch-color-icon-disabled: var(--color-neutral-light-80);
1030
-
1031
- --color-switch-color-label: var(--color-neutral);
1032
-
1033
- /*------------------------------------*\
1034
- TAB BUTTON
1035
- \*------------------------------------*/
1036
-
1037
- --color-tab-button-box-shadow: var(--color-neutral-light-90);
1038
- --color-tab-button-box-shadow-active: var(--color-secondary);
1039
-
1040
- --color-tab-button-color: var(--color-secondary);
1041
- --color-tab-button-color-disabled: var(--color-neutral-light-60);
1042
-
1043
- /*------------------------------------*\
1044
- TAB DROPDOWN
1045
- \*------------------------------------*/
1046
-
1047
- --color-tab-dropdown-background-color-tab-dropdown-button-active: var(--color-primary);
1048
- --color-tab-dropdown-background-color-tab-dropdown-button-disabled: var(--color-white);
1049
- --color-tab-dropdown-background-color-tab-dropdown-button-hover: var(--color-primary-light-95);
1050
-
1051
- --color-tab-dropdown-color-tab-dropdown-button: var(--color-white);
1052
-
1053
- /*------------------------------------*\
1054
- TABLE
1055
- \*------------------------------------*/
1056
-
1057
- --color-table-background-color-action-hover: var(--color-primary-light-95);
1058
- --color-table-background-color-actions: var(--color-white);
1059
- --color-table-background-color-active: var(--color-primary-light-95);
1060
- --color-table-background-color-detail-content: var(--color-white);
1061
- --color-table-background-color-footer-show-subtitle: var(--color-white);
1062
- --color-table-background-color-header: var(--color-white);
1063
- --color-table-background-color-overlay: var(--color-secondary-dark-60-alpha-70);
1064
- --color-table-background-color-overlay-content: var(--color-white);
1065
- --color-table-background-color-row-strip: var(--color-neutral-light-98);
1066
- --color-table-background-color-scrollbar: var(--color-primary);
1067
- --color-table-background-color-selected: var(--color-primary);
1068
- --color-table-background-color-table: var(--color-white);
1069
- --color-table-background-color-radio: var(--color-white);
1070
- --color-table-background-color-radio-active: var(--color-primary);
1071
-
1072
- --color-table-border-footer-show-subtitle: var(--color-neutral-light-90);
1073
- --color-table-border-select-checkbox: var(--color-neutral-light-60);
1074
- --color-table-border-selected-checkbox: var(--color-primary);
1075
- --color-table-border-rows: var(--color-neutral-light-90);
1076
- --color-table-border-select-radio: var(--color-neutral-light-60);
1077
- --color-table-border-select-radio-focusable: var(--color-primary-dark-20);
1078
-
1079
- --color-table-box-shadow-action: var(--color-black-alpha-30);
1080
- --color-table-box-shadow-checkbox: var(--color-black-alpha-15);
1081
- --color-table-box-shadow-footer: var(--color-primary-light-80);
1082
- --color-table-box-shadow-overlay-content: var(--color-black-alpha-30);
1083
- --color-table-box-shadow-header: var(--color-primary-light-80);
1084
-
1085
- --color-table-color-actions: var(--color-primary);
1086
- --color-table-color-detail: var(--color-neutral-light-40);
1087
- --color-table-color-disabled: var(--color-neutral-light-80);
1088
- --color-table-color-footer-show-subtitle: var(--color-primary);
1089
- --color-table-color-header: var(--color-primary);
1090
- --color-table-color-select: var(--color-white);
1091
- --color-table-color-subtitle-text: var(--color-white);
1092
- --color-table-color-single-action-hover: var(--color-primary-dark-20);
1093
- --color-table-color-text: var(--color-neutral-dark-60);
1094
-
1095
- /*------------------------------------*\
1096
- TABLE COLUMN LINK
1097
- \*------------------------------------*/
1098
-
1099
- --color-table-color-link: var(--color-primary);
1100
- --color-table-color-link-disabled: var(--color-neutral-light-80);
1101
- --color-table-color-link-hover: var(--color-primary-dark-20);
1102
- --color-table-color-link-pressed: var(--color-primary-dark-40);
1103
-
1104
- /*------------------------------------*\
1105
- TABLE COLUMN MANAGER
1106
- \*------------------------------------*/
1107
-
1108
- --color-table-column-manager-body-color-background-scrollbar: var(--color-primary);
1109
- --color-table-column-manager-border-color: var(--color-neutral-light-90);
1110
- --color-table-column-manager-close-button-color: var(--color-primary);
1111
- --color-table-column-manager-header-title: var(--color-neutral-dark-60);
1112
- --color-table-column-manager-outline-color-focus: var(--color-secondary);
1113
-
1114
- /*------------------------------------*\
1115
- TAG
1116
- \*------------------------------------*/
1117
-
1118
- --color-tag-border-color-dashed-focus: var(--color-secondary);
1119
-
1120
- --color-tag-color: var(--color-white);
1121
- --color-tag-color-danger: var(--color-danger);
1122
- --color-tag-color-info: var(--color-neutral);
1123
- --color-tag-color-success: var(--color-success);
1124
- --color-tag-color-warning: var(--color-warning);
1125
- --color-tag-color-text-label: var(--color-neutral);
1126
-
1127
- --color-tag-background-color-danger: var(--color-danger);
1128
- --color-tag-background-color-info: var(--color-neutral);
1129
- --color-tag-background-color-success: var(--color-success);
1130
- --color-tag-background-color-warning: var(--color-warning);
1131
- --color-tag-background-color-white: var(--color-white);
1132
-
1133
- --color-tag-inverse-border-color-01: var(--color-01);
1134
- --color-tag-inverse-border-color-02: var(--color-02);
1135
- --color-tag-inverse-border-color-03: var(--color-03);
1136
- --color-tag-inverse-border-color-04: var(--color-04);
1137
- --color-tag-inverse-border-color-05: var(--color-05);
1138
- --color-tag-inverse-border-color-06: var(--color-06);
1139
- --color-tag-inverse-border-color-07: var(--color-07);
1140
- --color-tag-inverse-border-color-08: var(--color-08);
1141
- --color-tag-inverse-border-color-09: var(--color-09);
1142
- --color-tag-inverse-border-color-10: var(--color-10);
1143
- --color-tag-inverse-border-color-11: var(--color-11);
1144
- --color-tag-inverse-border-color-12: var(--color-12);
1145
-
1146
- /*------------------------------------*\
1147
- TEXTAREA
1148
- \*------------------------------------*/
1149
-
1150
- --color-textarea-background-color: var(--color-white);
1151
- --color-textarea-border: var(--color-neutral-light-60);
1152
- --color-textarea-background-color-disabled: var(--color-neutral-light-90);
1153
- --color-textarea-border-color-disabled: var(--color-neutral-light-90);
1154
- --color-textarea-border-focusable: var(--color-primary);
1155
- --color-textarea-color-error: var(--color-danger);
1156
- --color-textarea-color-disabled: var(--color-neutral-light-60);
1157
- --color-textarea-text-error: var(--color-danger);
1158
- --color-textarea-background-color-scrollbar: var(--color-primary);
1159
-
1160
- /*------------------------------------*\
1161
- TOOLBAR
1162
- \*------------------------------------*/
1163
-
1164
- --color-toolbar-background-color-badge: var(--color-danger);
1165
- --color-toolbar-background-color-toolbar: var(--color-white);
1166
-
1167
- --color-toolbar-border-color-separator: var(--color-neutral-light-90);
1168
-
1169
- --color-toolbar-color-badge-text: var(--color-white);
1170
- --color-toolbar-color-default: var(--color-primary);
1171
- --color-toolbar-color-title: var(--color-secondary);
1172
-
1173
- /*------------------------------------*\
1174
- TOOLTIP
1175
- \*------------------------------------*/
1176
-
1177
- --color-tooltip-background-color-balloon: var(--color-neutral);
1178
- --color-tooltip-color-text-balloon: var(--color-white);
1179
-
1180
- /*------------------------------------*\
1181
- TREEVIEW
1182
- \*------------------------------------*/
1183
-
1184
- /** Tree View Item */
1185
- --color-tree-view-item-border-bottom-color: var(--color-neutral-light-90);
1186
-
1187
- /** Tree View Item Header */
1188
- --color-tree-view-item-header-button-color: var(--color-primary);
1189
- --color-tree-view-item-header-button-focus: var(--color-secondary);
1190
- --color-tree-view-item-header-label-text-color: var(--color-neutral);
1191
-
1192
- /*------------------------------------*\
1193
- UPLOAD
1194
- \*------------------------------------*/
1195
-
1196
- --color-upload-color-text-filename-loading: var(--color-neutral-dark-60);
1197
-
1198
- --color-upload-background-color-disabled: var(--color-white);
1199
- --color-upload-border-disabled: var(--color-neutral-light-60);
1200
- --color-upload-color-disabled: var(--color-neutral-light-60);
1201
-
1202
- --color-upload-background-color-hover: var(--color-white);
1203
- --color-upload-border-hover: var(--color-primary-dark-20);
1204
- --color-upload-color-hover: var(--color-primary-dark-20);
1205
-
1206
- --color-upload-background-color-pressed: var(--color-white);
1207
- --color-upload-border-pressed: var(--color-primary-dark-40);
1208
- --color-upload-color-pressed: var(--color-primary-dark-40);
1209
-
1210
- --color-upload-color-progress: var(--color-tertiary);
1211
- --color-upload-color-text-load: var(--color-white);
1212
- --color-upload-background-color-success: var(--color-success);
1213
- --color-upload-background-color-load-progress: var(--color-tertiary);
1214
- --color-upload-background-color-error: var(--color-danger);
1215
- --color-upload-color-text-load-waiting: var(--color-neutral);
1216
- --color-upload-background-color-progress: var(--color-tertiary-light-90);
1217
-
1218
- --color-upload-drag-drop-overlay-icon: var(--color-primary-alpha-50);
1219
- --color-upload-drag-drop-overlay-text: var(--color-primary);
1220
- --color-upload-drag-drop-area-overlay-background-color: var(--color-white);
1221
-
1222
- --color-upload-drag-drop-area-icon: var(--color-neutral-light-80);
1223
- --color-upload-drag-drop-area-label-text: var(--color-neutral);
1224
- --color-upload-drag-drop-area-select-files-text: var(--color-primary);
1225
- --color-upload-drag-drop-area-border: var(--color-neutral-light-60);
1226
- --color-upload-drag-drop-area-border-primary: var(--color-primary);
1227
- --color-upload-drag-drop-area-border-error: var(--color-danger);
1228
-
1229
- --color-upload-drag-drop-area-background-color-disabled: var(--color-neutral-light-90);
1230
- --color-upload-drag-drop-area-color-disabled: var(--color-neutral-light-60);
1231
-
1232
- --color-upload-file-restrictions-color-text: var(--color-neutral);
1233
-
1234
- /*------------------------------------*\
1235
- WIDGET
1236
- \*------------------------------------*/
1237
-
1238
- --color-widget-color-action-active: var(--color-primary-dark-20);
1239
- --color-widget-color-action-hover: var(--color-primary-dark-20);
1240
- --color-widget-color-action: var(--color-primary);
1241
- --color-widget-color-default: var(--color-neutral);
1242
- --color-widget-color-title-action: var(--color-primary);
1243
- --color-widget-color-widget-primary: var(--color-neutral-dark-60);
1244
-
1245
- --color-widget-background-color: var(--color-white);
1246
- --color-widget-primary-background-color: var(--color-tertiary);
1247
-
1248
- --border-widget-border-no-shadow: solid 1px var(--color-neutral-light-90);
1249
- --color-widget-border-color-footer: var(--color-neutral-light-90);
1250
- --color-widget-border-color-footer-primary: var(--color-white-alpha-30);
1251
-
1252
- --color-widget-background-color-disabled: var(--color-neutral-light-90);
1253
- --color-widget-background-color-scroll-disabled: var(--color-neutral-light-40);
1254
- --color-widget-color-disabled: var(--color-neutral-light-40);
1255
- }
1
+ /**
2
+ * @theme: po-ui
3
+ **/
4
+
5
+ /**
6
+ * CONTENTS
7
+ *
8
+ * COMMONS
9
+ * Common......................configurações.
10
+ * Color.......................variáveis globais de cores.
11
+ * Color Palette...............variáveis da peleta de cores.
12
+ * Font........................variáveis de fontes.
13
+ *
14
+ * COMPONENTS
15
+ * Accordion...................variáveis do Accordion.
16
+ * Avatar......................variáveis do Avatar.
17
+ * Button......................variáveis do Button.
18
+ * Badge.......................variáveis do Badge.
19
+ * Breadcrumb..................variáveis do Breadcrumb.
20
+ * Button Group................variáveis do Button Group.
21
+ * Calendar....................variáveis do Calendar.
22
+ * Chart.......................variáveis do Chart.
23
+ * Checkbox Group..............variáveis do Checkbox Group.
24
+ * Combo.......................variáveis do Combo.
25
+ * Container...................variáveis do Container.
26
+ * Datepicker Range............variáveis do Datepicker Range.
27
+ * Disclaimer..................variáveis do Disclaimer.
28
+ * Disclaimer Group............variáveis do Disclaimer Group.
29
+ * Divider.....................variáveis do Divider.
30
+ * Dropdown....................variáveis do Dropdown.
31
+ * Field Container.............variáveis do Field Container.
32
+ * Field Container Bottom......variáveis do Field Container Bottom.
33
+ * Field Icon..................variáveis do Field Icon.
34
+ * Gauge.......................variáveis do Gauge.
35
+ * Info........................variáveis do Info.
36
+ * Input.......................variáveis do Input.
37
+ * List View...................variáveis do List View.
38
+ * Loading.....................variáveis do Loading.
39
+ * Loading Overlay.............variáveis do Loading Overlay.
40
+ * Lookup......................variáveis do Lookup.
41
+ * Menu........................variáveis do Menu.
42
+ * Menu Filter.................variáveis do Menu Filter.
43
+ * Menu Panel..................variáveis do Menu Panel.
44
+ * Modal.......................variáveis do Modal.
45
+ * Modal Password Recovery.....variáveis do Modal Password Recovery.
46
+ * Multiselect.................variáveis do Multiselect.
47
+ * Navbar......................variáveis do Navbar.
48
+ * Navbar Action...............variáveis do Navbar Action.
49
+ * Navbar Action Popup.........variáveis do Navbar Action Popup.
50
+ * Navbar Item.................variáveis do Navbar Item.
51
+ * Navbar Item Navigation......variáveis do Navbar Item Navigation.
52
+ * Page........................variáveis do Page.
53
+ * Page Background.............variáveis do Page Background.
54
+ * Page Blocked User...........variáveis do Page Blocked User.
55
+ * Page Change Password........variáveis do Page Change Password.
56
+ * Page Content................variáveis do Page Content.
57
+ * Page Header................ variáveis do Page Header.
58
+ * Page List...................variáveis do Page List.
59
+ * Page Login..................variáveis do Page Login.
60
+ * Popover.....................variáveis do Popover.
61
+ * Popup.......................variáveis do Popup.
62
+ * Radio Group.................variáveis do Radio Group.
63
+ * Rich Text...................variáveis do Rich Text.
64
+ * Select......................variáveis do Select.
65
+ * Slide.......................variáveis do Slide.
66
+ * Stepper.....................variáveis do Stepper.
67
+ * Switch......................variáveis do Switch.
68
+ * Tab Button..................variáveis do Tab Button.
69
+ * Tab Dropdown................variáveis do Tab Dropdown.
70
+ * Table.......................variáveis do Table.
71
+ * Table Column Link...........variáveis do Table Column Link.
72
+ * Table Column Manager .......variáveis do Table Column Manager.
73
+ * Tag.........................variáveis do Tag.
74
+ * Textarea....................variáveis do Textarea.
75
+ * Toolbar.....................variáveis do Toolbar.
76
+ * Tooltip.....................variáveis do Tooltip.
77
+ * Tree View...................variáveis do Tree View.
78
+ * Upload......................variáveis do Upload.
79
+ * Widget......................variáveis do Widget.
80
+ */
81
+
82
+ /*------------------------------------*\
83
+ COMMONS
84
+ \*------------------------------------*/
85
+
86
+ /*------------------------------------*\
87
+ COMMON
88
+ \*------------------------------------*/
89
+
90
+ :root {
91
+ --color-wrapper-menu-panel-color-background: var(--color-white);
92
+ --color-overlay-background-color-overlay: var(--color-secondary-dark-60-alpha-70);
93
+
94
+ --color-hr-border-top: var(--color-neutral-light-90);
95
+ }
96
+
97
+ /*------------------------------------*\
98
+ COLOR
99
+ \*------------------------------------*/
100
+
101
+ :root {
102
+ /* Cor do background da linha da tabela */
103
+ --color-primary-light-95: #fcf6f9;
104
+
105
+ /* Borda inferior da Table Header */
106
+ --color-primary-light-80: #f5dbe8;
107
+
108
+ /* Scroll (opacidade de 50%) */
109
+ --color-primary-alpha-50: rgba(201, 53, 125, 0.5);
110
+
111
+ /* Botão primário, Links, Cor da borda do input selecionado, Cor da borda do botão secundário */
112
+ --color-primary: #c9357d;
113
+
114
+ /* Hover do Botão primário, Links, Cor da borda do botão secundário */
115
+ --color-primary-dark-20: #9d2c67;
116
+
117
+ /* Pressed do Botão primário, Links, Cor da borda do botão secundário */
118
+ --color-primary-dark-40: #8b255a;
119
+
120
+ /* Secondary */
121
+ --color-secondary: #8241a4;
122
+
123
+ --color-secondary-dark-20: #733b8e;
124
+
125
+ --color-secondary-dark-40: #5e2e73;
126
+
127
+ /* Overlay de Modal e Menu (70% de opacidade) */
128
+ --color-secondary-dark-60-alpha-70: rgba(59, 28, 74, 0.7);
129
+
130
+ --color-secondary-dark-60: #3b1c4a;
131
+
132
+ /* Tertiary */
133
+
134
+ /* Cor do background da linha de arquivo em carregamento (Upload) */
135
+ --color-tertiary-light-90: #fffaef;
136
+
137
+ /* Borda esquerda do menu lateral selecionado, Tab selecionada, Card em destaque */
138
+ --color-tertiary: #ffd464;
139
+
140
+ /* Cor de gráficos, botão do disclaimer */
141
+ --color-tertiary-dark-5: #f4d069;
142
+
143
+ --color-tertiary-dark-40: #d2b25a;
144
+
145
+ --color-tertiary-dark-60: #ac9249;
146
+
147
+ --color-white: #ffffff;
148
+
149
+ --color-white-alpha-30: rgba(255, 255, 255, 0.3);
150
+
151
+ /* Background da página, Background da linha selecionada */
152
+ --color-neutral-light-98: #fbfbfb;
153
+
154
+ /* Borda inferior de item de tabela, Base do Slider, Background do Input inativo */
155
+ --color-neutral-light-90: #eceeee;
156
+
157
+ /* Step inativo, Base Switch desligado */
158
+ --color-neutral-light-80: #dadedf;
159
+
160
+ /* Ícone desabilitado, Slider desabilitado, Borda de input */
161
+ --color-neutral-light-60: #b6bdbf;
162
+
163
+ /* Texto do Placeholder */
164
+ --color-neutral-light-40: #9da7a9;
165
+
166
+ /* Borda superior do itens do menu (45% de opacidade) */
167
+ --color-neutral-alpha-45: rgba(74, 92, 96, 0.45);
168
+
169
+ /* Background do Feedback, Pill de informação */
170
+ --color-neutral: #4a5c60;
171
+
172
+ /* Usar em menu: Área do logo, Background do menu */
173
+ --color-neutral-dark-40: #2c3739;
174
+
175
+ /* Texto */
176
+ --color-neutral-dark-60: #1d2426;
177
+
178
+ /* Usar em sombras (10% de opacidade) */
179
+ --color-black-alpha-10: rgba(0, 0, 0, 0.1);
180
+
181
+ /* Usar em menu: Hover - Background de item de menu (15% de opacidade) */
182
+ --color-black-alpha-15: rgba(0, 0, 0, 0.15);
183
+
184
+ /* Usar em menu: Background dos itens de segundo nível (30% de opacidade) */
185
+ --color-black-alpha-30: rgba(0, 0, 0, 0.3);
186
+
187
+ --color-black: #000000;
188
+
189
+ /* Background do Feedback de sucesso */
190
+ --color-success: #00b28e;
191
+
192
+ /* Background do Feedback de atenção */
193
+ --color-warning: #ea9b3e;
194
+
195
+ --color-danger-light-40: #cd5f58;
196
+
197
+ /* Background do Feedback de erro, Borda de Input com erro */
198
+ --color-danger: #c64840;
199
+
200
+ /* Background disclaimer danger */
201
+ --color-danger-dark-5: #bb443c;
202
+
203
+ /* Hover para botão danger */
204
+ --color-danger-dark-20: #9e3933;
205
+
206
+ /* Estilo ativo para botão danger */
207
+ --color-danger-dark-40: #762b26;
208
+
209
+ --color-transparent: transparent;
210
+
211
+ /*------------------------------------*\
212
+ COLOR-PALETTE
213
+ \*------------------------------------*/
214
+
215
+ /* Cores que podem ser utilizadas na coluna de labels, legenda e cor de icones do componente table, também utilizadas na tag e badge */
216
+ --color-01: #0c9abe;
217
+ --color-02: #2c85c8;
218
+ --color-03: #2c43c8;
219
+ --color-04: #5843c8;
220
+ --color-05: #ab43c8;
221
+ --color-06: #ab4391;
222
+ --color-07: #c64840;
223
+ --color-08: #ea9b3e;
224
+ --color-09: #abc249;
225
+ --color-10: #56b96b;
226
+ --color-11: #00b28e;
227
+ --color-12: #06a6a5;
228
+
229
+ /*------------------------------------*\
230
+ FONT
231
+ \*------------------------------------*/
232
+
233
+ /**
234
+ * Variáveis para definições de fontes. O PO utiliza as variantes *extra light*, *regular* e *bold* em seus componentes e, para cada uma delas,
235
+ * é atribuído um @font-face específico. Os nomes elencados no `font-family` no @font-face devem ser os mesmos atribuídos como valor para as variáveis.
236
+ */
237
+ --font-family-theme: Roboto;
238
+ --font-family-theme-bold: Roboto-Bold;
239
+ --font-family-theme-extra-light: Roboto-Condensed-Light;
240
+ }
241
+
242
+ @font-face {
243
+ font-family: 'Roboto';
244
+ src: url('./../fonts/Roboto/Roboto-Regular.ttf');
245
+ font-weight: normal;
246
+ font-style: normal;
247
+ }
248
+
249
+ @font-face {
250
+ font-family: 'Roboto-Condensed-Light';
251
+ src: url('./../fonts/Roboto/Roboto-Light.ttf');
252
+ font-weight: 300;
253
+ font-style: normal;
254
+ font-stretch: condensed;
255
+ }
256
+
257
+ @font-face {
258
+ font-family: 'Roboto-Bold';
259
+ src: url('./../fonts/Roboto/Roboto-Bold.ttf');
260
+ font-weight: bold;
261
+ font-style: normal;
262
+ }
263
+
264
+ /*------------------------------------*\
265
+ COMPONENTS
266
+ \*------------------------------------*/
267
+ :root {
268
+ /*------------------------------------*\
269
+ ACCORDION
270
+ \*------------------------------------*/
271
+
272
+ /**
273
+ * Accordion Item
274
+ */
275
+ --color-accordion-item-border-color: var(--color-neutral-light-90);
276
+
277
+ /**
278
+ * Accordion Item Header
279
+ */
280
+ --color-accordion-header-button-background-color: var(--color-white);
281
+ --color-accordion-header-color-primary: var(--color-primary);
282
+ --color-accordion-header-color-hover: var(--color-secondary);
283
+
284
+ /**
285
+ * Accordion Item Header Button
286
+ */
287
+ --color-accordion-item-header-button-background-color: var(--color-transparent);
288
+ --color-accordion-item-header-button-focus: var(--color-secondary);
289
+
290
+ /**
291
+ * Accordion Item Body
292
+ */
293
+ --color-accordion-item-body-color: var(--color-neutral);
294
+
295
+ /*------------------------------------*\
296
+ AVATAR
297
+ \*------------------------------------*/
298
+
299
+ --color-avatar-background-color-avatar: var(--color-neutral);
300
+
301
+ /*------------------------------------*\
302
+ BUTTON
303
+ \*------------------------------------*/
304
+
305
+ /**
306
+ * Button Default
307
+ */
308
+ --color-button-background-color: var(--color-transparent);
309
+ --color-button-border: var(--color-secondary);
310
+ --color-button-color: var(--color-secondary);
311
+
312
+ --color-button-background-color-hover: var(--color-transparent);
313
+ --color-button-border-hover: var(--color-secondary-dark-20);
314
+ --color-button-color-hover: var(--color-secondary-dark-20);
315
+
316
+ --color-button-background-color-pressed: var(--color-transparent);
317
+ --color-button-border-pressed: var(--color-secondary-dark-40);
318
+ --color-button-color-pressed: var(--color-secondary-dark-40);
319
+
320
+ --color-button-background-color-disabled: var(--color-transparent);
321
+ --color-button-border-disabled: var(--color-neutral-light-60);
322
+ --color-button-color-disabled: var(--color-neutral-light-60);
323
+ /**
324
+ * Button Primary
325
+ */
326
+ --color-button-background-color-primary: var(--color-tertiary);
327
+ --color-button-border-primary: var(--color-tertiary);
328
+ --color-button-color-primary: var(--color-neutral-dark-60);
329
+
330
+ --color-button-background-color-primary-hover: var(--color-tertiary-dark-40);
331
+ --color-button-border-primary-hover: var(--color-tertiary-dark-40);
332
+ --color-button-color-primary-hover: var(--color-neutral-dark-60);
333
+
334
+ --color-button-background-color-primary-pressed: var(--color-tertiary-dark-60);
335
+ --color-button-border-primary-pressed: var(--color-tertiary-dark-60);
336
+ --color-button-color-primary-pressed: var(--color-neutral-dark-60);
337
+
338
+ --color-button-background-color-primary-disabled: var(--color-neutral-light-60);
339
+ --color-button-border-primary-disabled: var(--color-neutral-light-60);
340
+ --color-button-color-primary-disabled: var(--color-white);
341
+ /**
342
+ * Button Danger
343
+ */
344
+ --color-button-background-color-danger: var(--color-transparent);
345
+ --color-button-border-danger: var(--color-danger);
346
+ --color-button-color-danger: var(--color-danger);
347
+
348
+ --color-button-background-color-danger-hover: var(--color-transparent);
349
+ --color-button-border-danger-hover: var(--color-danger-dark-20);
350
+ --color-button-color-danger-hover: var(--color-danger-dark-20);
351
+
352
+ --color-button-background-color-danger-pressed: var(--color-transparent);
353
+ --color-button-border-danger-pressed: var(--color-danger-dark-40);
354
+ --color-button-color-danger-pressed: var(--color-danger-dark-40);
355
+
356
+ --color-button-background-color-danger-disabled: var(--color-transparent);
357
+ --color-button-border-danger-disabled: var(--color-neutral-light-60);
358
+ --color-button-color-danger-disabled: var(--color-neutral-light-60);
359
+ /**
360
+ * Button Link
361
+ */
362
+ --color-button-background-color-link: var(--color-transparent);
363
+ --color-button-color-link: var(--color-primary);
364
+
365
+ --color-button-background-color-link-hover: var(--color-transparent);
366
+ --color-button-color-link-hover: var(--color-primary-dark-20);
367
+
368
+ --color-button-background-color-link-pressed: var(--color-transparent);
369
+ --color-button-color-link-pressed: var(--color-primary-dark-40);
370
+
371
+ --color-button-background-color-link-disabled: var(--color-transparent);
372
+ --color-button-color-link-disabled: var(--color-neutral-light-60);
373
+
374
+ /*------------------------------------*\
375
+ BADGE
376
+ \*------------------------------------*/
377
+
378
+ --color-badge-color: var(--color-white);
379
+
380
+ /*------------------------------------*\
381
+ BREADCRUMB
382
+ \*------------------------------------*/
383
+
384
+ /**
385
+ * Breadcrumb
386
+ */
387
+ --color-breadcrumb-background-color-container: var(--color-white);
388
+ --color-breadcrumb-border-color-container: var(--color-neutral-light-90);
389
+
390
+ --color-breadcrumb-color-item: var(--color-primary);
391
+ --color-breadcrumb-color-item-link-hover: var(--color-primary-dark-40);
392
+ --color-breadcrumb-color-item-unclickable: var(--color-neutral);
393
+ --color-breadcrumb-color-star-active: var(--color-warning);
394
+ /**
395
+ * Breadcrumb Dropdown
396
+ */
397
+ --color-breadcrumb-background-color-dropdown: var(--color-white);
398
+ --color-breadcrumb-background-color-dropdown-item-hover: var(--color-primary-light-95);
399
+
400
+ /*------------------------------------*\
401
+ BUTTON GROUP
402
+ \*------------------------------------*/
403
+
404
+ --color-button-group-border-button: var(--color-primary);
405
+ --color-button-group-border-button-disabled: var(--color-neutral-light-60);
406
+
407
+ --color-button-group-background-selected: var(--color-neutral);
408
+ --color-button-group-border-selected: var(--color-neutral);
409
+ --color-button-group-color-selected: var(--color-white);
410
+
411
+ --color-button-group-background-color-neutral-hover: var(--color-neutral-dark-40);
412
+ --color-button-group-border-button-hover: var(--color-button-border-primary-hover);
413
+ --color-button-group-border-neutral-hover: var(--color-neutral-dark-40);
414
+ --color-button-group-color-neutral-hover: var(--color-white);
415
+
416
+ --color-button-group-background-color-neutral-pressed: var(--color-neutral-dark-60);
417
+ --color-button-group-border-neutral-pressed: var(--color-neutral-dark-60);
418
+ --color-button-group-color-neutral-pressed: var(--color-white);
419
+
420
+ --color-button-group-background-color-neutral-disabled: var(--color-neutral-light-60);
421
+ --color-button-group-border-neutral-disabled: var(--color-neutral-light-60);
422
+ --color-button-group-color-neutral-disabled: var(--color-white);
423
+
424
+ /*------------------------------------*\
425
+ CALENDAR
426
+ \*------------------------------------*/
427
+
428
+ --color-calendar-background-color: var(--color-white);
429
+ --color-calendar-arrow: var(--color-primary);
430
+ --color-calendar-title: var(--color-primary);
431
+ --color-calender-color-content-label: var(--color-neutral-light-40);
432
+
433
+ --color-calendar-background-color-box-background-normal: var(--color-transparent);
434
+ --color-calendar-background-color-box-background-hover: var(--color-neutral-light-80);
435
+ --color-calendar-background-color-box-background-disabled: var(--color-neutral-light-60);
436
+ --color-calendar-background-color-box-background-active: var(--color-tertiary);
437
+ --color-calendar-background-color-mobile-overlay: var(--color-secondary-dark-60-alpha-70);
438
+ --color-calendar-text-box-background-active: var(--color-neutral-dark-60);
439
+
440
+ --color-calendar-background-color-box-background-selected: var(--color-tertiary);
441
+ --color-calendar-background-color-box-background-range: var(--color-primary-light-80);
442
+ --color-calendar-background-color-box-background-today-hover: var(--color-neutral-light-80);
443
+
444
+ --color-calendar-background-color-border-today: var(--color-primary);
445
+
446
+ --color-calendar-color-box-foreground: var(--color-neutral);
447
+ --color-calendar-color-box-foreground-selected: var(--color-neutral-dark-60);
448
+ --color-calendar-color-box-foreground-range: var(--color-primary);
449
+ --color-calendar-color-box-foreground-today: var(--color-primary);
450
+ --color-calendar-color-box-foreground-disabled: var(--color-neutral-light-80);
451
+
452
+ /*------------------------------------*\
453
+ CHART
454
+ \*------------------------------------*/
455
+
456
+ --color-chart-background-color: var(--color-white);
457
+ --color-chart-legend-wrapper-scrollbar: var(--color-primary-alpha-50);
458
+ --color-chart-axis-stroke: var(--color-neutral-light-80);
459
+ --color-chart-legend-text: var(--color-neutral);
460
+ --color-chart-axis-label-text: var(--color-neutral-dark-60);
461
+
462
+ /**
463
+ * Chart Types
464
+ */
465
+ --color-chart-gauge-base-path-color: var(--color-neutral-light-80);
466
+ --color-chart-gauge-text-content-focus: var(--color-secondary);
467
+ --color-chart-gauge-text-description-color: var(--color-neutral);
468
+
469
+ --color-chart-line-point-fill: var(--color-white);
470
+
471
+ /*------------------------------------*\
472
+ CHECKBOX
473
+ \*------------------------------------*/
474
+
475
+ --color-checkbox-background-color: var(--color-white);
476
+ --color-checkbox-background-color-active: var(--color-primary);
477
+ --color-checkbox-background-color-disabled: var(--color-neutral-light-90);
478
+ --color-checkbox-background-color-icon-disabled: var(--color-neutral-light-60);
479
+ --color-checkbox-box-shadow-color-focusable: var(--color-primary-dark-20);
480
+
481
+ --color-checkbox-border-input: var(--color-neutral-light-60);
482
+ --color-checkbox-border-input-active: var(--color-primary);
483
+ --color-checkbox-border-input-disabled: var(--color-neutral-light-60);
484
+ --color-checkbox-border-input-invalid: var(--color-danger);
485
+
486
+ --color-checkbox-color-active: var(--color-white);
487
+
488
+ /*------------------------------------*\
489
+ CHECKBOX GROUP
490
+ \*------------------------------------*/
491
+
492
+ --color-checkbox-group-background-color: var(--color-white);
493
+ --color-checkbox-group-background-color-active: var(--color-primary);
494
+ --color-checkbox-group-background-color-disabled: var(--color-neutral-light-90);
495
+ --color-checkbox-group-background-color-icon-disabled: var(--color-neutral-light-60);
496
+ --color-checkbox-group-box-shadow-color-focusable: var(--color-primary-dark-20);
497
+
498
+ --color-checkbox-group-border-input: var(--color-neutral-light-60);
499
+ --color-checkbox-group-border-input-active: var(--color-primary);
500
+ --color-checkbox-group-border-input-disabled: var(--color-neutral-light-60);
501
+ --color-checkbox-group-border-input-invalid: var(--color-danger);
502
+
503
+ --color-checkbox-group-color-active: var(--color-white);
504
+
505
+ /*------------------------------------*\
506
+ COMBO
507
+ \*------------------------------------*/
508
+
509
+ --color-combo-background-color: var(--color-white);
510
+
511
+ --color-combo-background-color-item-hover: var(--color-primary-light-95);
512
+ --color-combo-background-color-scrollbar: var(--color-primary-alpha-50);
513
+
514
+ --color-combo-border-button-error: var(--color-danger);
515
+
516
+ --color-combo-background-color-group-title: var(--color-neutral-light-98);
517
+ --color-combo-color-group-title: var(--color-neutral-dark-60);
518
+ --color-combo-color-primary: var(--color-primary);
519
+ --color-combo-color-selected: var(--color-white);
520
+ --color-combo-background-color-selected-primary: var(--color-primary);
521
+
522
+ /*------------------------------------*\
523
+ CONTAINER
524
+ \*------------------------------------*/
525
+
526
+ --color-container-color-shadow: var(--color-neutral-light-90);
527
+ --color-container-background-color-scrollbar: var(--color-primary);
528
+
529
+ /*------------------------------------*\
530
+ DATEPICKER RANGE
531
+ \*------------------------------------*/
532
+
533
+ --color-datepicker-range-background-color-disabled: var(--color-neutral-light-90);
534
+ --color-datepicker-range-border-text: var(--color-neutral-light-60);
535
+ --color-datepicker-range-border-text-error: var(--color-danger);
536
+ --color-datepicker-range-color-disabled: var(--color-neutral-light-60);
537
+ --color-datepicker-range-color-focused: var(--color-primary);
538
+ --color-datepicker-range-color-text-error: var(--color-danger);
539
+
540
+ /*------------------------------------*\
541
+ DISCLAIMER
542
+ \*------------------------------------*/
543
+
544
+ --color-disclaimer-background-color-label: var(--color-tertiary);
545
+ --color-disclaimer-background-color-label-danger: var(--color-danger);
546
+
547
+ --color-disclaimer-color-text: var(--color-neutral-dark-60);
548
+ --color-disclaimer-color-text-danger: var(--color-white);
549
+
550
+ --color-disclaimer-background-color-remove: var(--color-tertiary-dark-5);
551
+ --color-disclaimer-background-color-danger-remove: var(--color-danger-dark-5);
552
+
553
+ /*------------------------------------*\
554
+ DISCLAIMER GROUP
555
+ \*------------------------------------*/
556
+
557
+ --color-disclaimer-group-background-color: var(--color-white);
558
+ --color-disclaimer-group-border-color: var(--color-neutral-light-90);
559
+ --color-disclaimer-group-font-title: var(--color-neutral);
560
+
561
+ /*------------------------------------*\
562
+ DIVIDER
563
+ \*------------------------------------*/
564
+
565
+ --color-divider-label-color: var(--color-neutral-dark-60);
566
+ --color-divider-line-color: var(--color-neutral-light-90);
567
+
568
+ /*------------------------------------*\
569
+ DROPDOWN
570
+ \*------------------------------------*/
571
+
572
+ --color-dropdown-button-background-color: var(--color-transparent);
573
+ --color-dropdown-button-color: var(--color-secondary);
574
+ --color-dropdown-button-border-color: var(--color-secondary);
575
+
576
+ --color-dropdown-button-color-hover: var(--color-secondary-dark-20);
577
+ --color-dropdown-button-border-color-hover: var(--color-secondary-dark-20);
578
+
579
+ --color-dropdown-button-color-disabled: var(--color-neutral-light-60);
580
+ --color-dropdown-button-border-color-disabled: var(--color-neutral-light-60);
581
+
582
+ /*------------------------------------*\
583
+ FIELD CONTAINER
584
+ \*------------------------------------*/
585
+
586
+ --color-field-container-color-title: var(--color-neutral);
587
+ --color-field-container-color-opcional: var(--color-neutral);
588
+ --color-field-container-color-help: var(--color-neutral);
589
+
590
+ /*------------------------------------*\
591
+ FIELD CONTAINER BOTTOM
592
+ \*------------------------------------*/
593
+
594
+ --color-field-container-bottom-color-text: var(--color-neutral-dark-60);
595
+ --color-field-container-bottom-color-text-error: var(--color-danger);
596
+
597
+ /*------------------------------------*\
598
+ FIELD ICON
599
+ \*------------------------------------*/
600
+
601
+ --color-field-icon-color: var(--color-primary);
602
+ --color-field-icon-color-error: var(--color-danger);
603
+ --color-field-icon-color-disabled: var(--color-neutral-light-60);
604
+
605
+ /*------------------------------------*\
606
+ GAUGE
607
+ \*------------------------------------*/
608
+
609
+ --color-gauge-base-color: var(--color-neutral-light-80);
610
+ --color-gauge-description-text-color: var(--color-neutral);
611
+ --color-gauge-description-bottom-focus: var(--color-secondary);
612
+ --color-gauge-legend-scrollbar: var(--color-primary-alpha-50);
613
+ --color-gauge-legend-text: var(--color-neutral);
614
+ --color-gauge-pointer-color: var(--color-neutral);
615
+
616
+ /*------------------------------------*\
617
+ INFO
618
+ \*------------------------------------*/
619
+
620
+ --color-info-color-text-label: var(--color-neutral);
621
+ --color-info-color-text-value: var(--color-neutral-dark-60);
622
+
623
+ --color-info-color-link: var(--color-primary);
624
+ --color-info-color-link-hover: var(--color-primary-dark-20);
625
+ --color-info-color-link-pressed: var(--color-primary-dark-40);
626
+
627
+ /*------------------------------------*\
628
+ INPUT
629
+ \*------------------------------------*/
630
+
631
+ --color-input-background-color-text: var(--color-white);
632
+ --color-input-border-text: var(--color-neutral-light-60);
633
+ --color-input-border-text-disabled: var(--color-neutral-light-90);
634
+ --color-input-border-text-focusable: var(--color-primary);
635
+ --color-input-border-text-error: var(--color-danger);
636
+ --color-input-color-disabled: var(--color-neutral-light-60);
637
+ --color-input-text-error: var(--color-danger);
638
+ --color-input-text-placeholder: var(--color-neutral-light-40);
639
+
640
+ /*------------------------------------*\
641
+ LIST VIEW
642
+ \*------------------------------------*/
643
+
644
+ --color-list-view-background-color: var(--color-white);
645
+ --color-list-view-border: var(--color-neutral-light-90);
646
+ --color-list-view-color-primary: var(--color-primary);
647
+ --color-list-view-color-primary-hover: var(--color-primary-dark-20);
648
+ --color-list-view-color-select-all-label: var(--color-neutral);
649
+
650
+ /*------------------------------------*\
651
+ LOADING
652
+ \*------------------------------------*/
653
+ --color-loading-color-label: var(--color-neutral);
654
+ --color-loading-icon-color-neutral: var(--color-neutral-light-80);
655
+ --color-loading-icon-color-primary: var(--color-primary);
656
+
657
+ /*------------------------------------*\
658
+ LOADING OVERLAY
659
+ \*------------------------------------*/
660
+
661
+ --color-loading-overlay-background-color-content: var(--color-white);
662
+ --color-loading-overlay-box-shadow-content: var(--color-black-alpha-30);
663
+
664
+ /*------------------------------------*\
665
+ LOOKUP
666
+ \*------------------------------------*/
667
+
668
+ --color-lookup-search-background-color-text: var(--color-white);
669
+ --color-lookup-search-border-text: var(--color-neutral-light-60);
670
+ --color-lookup-search-border-text-focusable: var(--color-primary);
671
+ --color-lookup-advanced-search-link-color-text: var(--color-primary);
672
+
673
+ /*------------------------------------*\
674
+ MENU
675
+ \*------------------------------------*/
676
+
677
+ --color-menu-color-menu-collapse-icon: var(--color-primary);
678
+ --color-menu-color-menu-item-text: var(--color-primary);
679
+ --color-menu-color-menu-item-selected: var(--color-primary);
680
+ --color-menu-color-menu-sub-item-text: var(--color-danger-light-40);
681
+ --color-menu-color-menu-sub-item-selected: var(--color-neutral-dark-60);
682
+ --color-menu-color-menu-responsive: var(--color-primary);
683
+
684
+ --color-menu-background-color-item-grouper-up-hover: var(--color-neutral-light-98);
685
+ --color-menu-background-color-item-hover: var(--color-black-alpha-15);
686
+ --color-menu-background-color-item-selected: var(--color-neutral-light-80);
687
+ --color-menu-background-color-menu: var(--color-white);
688
+ --color-menu-background-color-menu-responsive-overlay: var(--color-secondary-dark-60-alpha-70);
689
+ --color-menu-background-color-responsive: var(--color-neutral-light-98);
690
+ --color-menu-background-color-sub-items: var(--color-neutral-light-98);
691
+ --color-menu-background-color-sub-item-selected: var(--color-neutral-light-80);
692
+
693
+ --color-menu-border-color-menu-item-selected: var(--color-danger-light-40);
694
+ --color-menu-border-left-item: var(--color-transparent);
695
+ --color-menu-border-top-item-grouper-up-hover: var(--color-neutral-light-80);
696
+ --color-menu-border-top-logo: var(--color-neutral-light-80);
697
+ --color-menu-border-top-collapse-button: var(--color-neutral-alpha-45);
698
+
699
+ /*------------------------------------*\
700
+ MENU FILTER
701
+ \*------------------------------------*/
702
+
703
+ --color-menu-filter-color-icon: var(--color-primary);
704
+ --color-menu-filter-color-text: var(--color-neutral-dark-60);
705
+
706
+ --color-menu-filter-background-color: var(--color-neutral-light-98);
707
+
708
+ --color-menu-filter-border: var(--color-neutral-alpha-45);
709
+ --color-menu-filter-border-focusable: var(--color-neutral);
710
+
711
+ /*------------------------------------*\
712
+ MENU PANEL
713
+ \*------------------------------------*/
714
+
715
+ --color-menu-panel-background-color-item-hover: var(--color-black-alpha-15);
716
+ --color-menu-panel-background-color-item-selected: var(--color-neutral-light-80);
717
+ --color-menu-panel-background-color-menu: var(--color-white);
718
+
719
+ --color-menu-panel-border-top-logo: var(--color-neutral-light-80);
720
+
721
+ --color-menu-panel-color-menu-item-text: var(--color-primary);
722
+ --color-menu-panel-color-menu-item-selected: var(--color-neutral-dark-60);
723
+
724
+ /*------------------------------------*\
725
+ MODAL
726
+ \*------------------------------------*/
727
+
728
+ --color-modal-text-color-body: var(--color-neutral-dark-60);
729
+ --color-modal-background-color-content: var(--color-white);
730
+ --color-modal-background-color-footer: var(--color-white);
731
+ --color-modal-background-color-scrollbar: var(--color-primary);
732
+ --color-modal-color-overlay: var(--color-secondary-dark-60-alpha-70);
733
+ --color-modal-color-title: var(--color-neutral);
734
+ --color-modal-color-header-close-button: var(--color-primary);
735
+
736
+ /*------------------------------------*\
737
+ MODAL PASSWORD RECOVERY
738
+ \*------------------------------------*/
739
+
740
+ --color-modal-password-recovery-link-color: var(--color-primary);
741
+ --color-modal-password-recovery-link-color-hover: var(--color-primary-dark-20);
742
+ --color-modal-password-recovery-text-color: var(--color-neutral);
743
+
744
+ /*------------------------------------*\
745
+ MULTISELECT
746
+ \*------------------------------------*/
747
+
748
+ --color-multiselect-background-color: var(--color-white);
749
+ --color-multiselect-background-color-item-hover: var(--color-primary-light-95);
750
+ --color-multiselect-background-color-scrollbar: var(--color-primary-alpha-50);
751
+
752
+ --color-multiselect-border-field: var(--color-neutral-light-60);
753
+ --color-multiselect-border-field-error: var(--color-danger);
754
+ --color-multiselect-border-field-focus: var(--color-primary);
755
+ --color-multiselect-border-search: var(--color-neutral-light-80);
756
+
757
+ --color-multiselect-color-field-focus: var(--color-primary);
758
+
759
+ --color-multiselect-color-primary: var(--color-primary);
760
+ --color-multiselect-color-text-error: var(--color-danger);
761
+ --color-multiselect-color-text-disabled: var(--color-white);
762
+
763
+ --color-multiselect-background-color-checkbox: var(--color-white);
764
+ --color-multiselect-background-color-checkbox-active: var(--color-primary);
765
+ --color-multiselect-background-color-checkbox-disabled: var(--color-neutral-light-90);
766
+ --color-multiselect-background-color-checkbox-icon-disabled: var(--color-neutral-light-60);
767
+
768
+ --color-multiselect-border-checkbox-input: var(--color-neutral-light-60);
769
+ --color-multiselect-border-checkbox-input-active: var(--color-primary);
770
+ --color-multiselect-border-checkbox-input-disabled: var(--color-neutral-light-60);
771
+
772
+ --color-multiselect-color-checkbox-active: var(--color-white);
773
+
774
+ --color-multiselect-disclaimer-background-color-disabled: var(--color-neutral-light-60);
775
+
776
+ /*------------------------------------*\
777
+ NAVBAR
778
+ \*------------------------------------*/
779
+
780
+ --color-navbar-color: var(--color-white);
781
+
782
+ /*------------------------------------*\
783
+ NAVBAR ACTION
784
+ \*------------------------------------*/
785
+
786
+ --color-navbar-action-color-content: var(--color-primary);
787
+
788
+ /*------------------------------------*\
789
+ NAVBAR ACTION POPUP
790
+ \*------------------------------------*/
791
+
792
+ --color-navbar-action-popup-color-content: var(--color-navbar-action-color-content);
793
+
794
+ /*------------------------------------*\
795
+ NAVBAR ITEM
796
+ \*------------------------------------*/
797
+
798
+ --color-navbar-item-color: var(--color-primary);
799
+ --color-navbar-item-color-selected: var(--color-neutral);
800
+ --color-navbar-item-color-shadow-selected: var(--color-danger-light-40);
801
+
802
+ /*------------------------------------*\
803
+ NAVBAR ITEM NAVIGATION
804
+ \*------------------------------------*/
805
+
806
+ --color-navbar-item-navigation-color-icon: var(--color-primary);
807
+ --color-navbar-item-navigation-color-icon-disabled: var(--color-neutral-light-80);
808
+
809
+ /*------------------------------------*\
810
+ PAGE
811
+ \*------------------------------------*/
812
+
813
+ --color-page-background-color-page: var(--color-white);
814
+
815
+ /*------------------------------------*\
816
+ PAGE BACKGROUND
817
+ \*------------------------------------*/
818
+
819
+ --color-page-background-select-item-border-color: var(--color-neutral-light-90);
820
+
821
+ /*------------------------------------*\
822
+ PAGE BLOCKED USER
823
+ \*------------------------------------*/
824
+
825
+ --color-page-blocked-user-link-color: var(--color-primary);
826
+ --color-page-blocked-user-link-color-hover: var(--color-primary-dark-20);
827
+ --color-page-blocked-user-text-color: var(--color-neutral);
828
+ --color-page--blocked-user-background-color: var(--color-neutral-light-98);
829
+
830
+ /*------------------------------------*\
831
+ PAGE CHANGE PASSWORD
832
+ \*------------------------------------*/
833
+
834
+ --color-page-change-password-background-color-buttons: var(--color-neutral-light-98);
835
+ --color-page-change-password-background-color-container: var(--color-white);
836
+ --color-page-change-password-background-color-secondary-logo: var(--color-neutral-light-98);
837
+ --color-page-change-password-color-link: var(--color-primary);
838
+ --color-page-change-password-color-text: var(--color-neutral);
839
+ --color-page-change-password-color-required: var(--color-neutral);
840
+ --color-page-change-password-color-required-ok: var(--color-success);
841
+ --color-page-change-password-color-required-minus: var(--color-black-alpha-30);
842
+ --color-page-change-password-color-required-text: var(--color-secondary-dark-60-alpha-70);
843
+
844
+ /*------------------------------------*\
845
+ PAGE CONTENT
846
+ \*------------------------------------*/
847
+
848
+ --color-page-content-background-color-scrollbar: var(--color-primary);
849
+
850
+ /*------------------------------------*\
851
+ PAGE HEADER
852
+ \*------------------------------------*/
853
+
854
+ --color-page-header-color-title: var(--color-neutral);
855
+
856
+ /*------------------------------------*\
857
+ PAGE LIST
858
+ \*------------------------------------*/
859
+
860
+ --color-page-list-color-link-text: var(--color-primary);
861
+
862
+ /*------------------------------------*\
863
+ PAGE LOGIN
864
+ \*------------------------------------*/
865
+
866
+ --color-page-login-header-product-name-color: var(--color-neutral);
867
+ --color-page-login-header-welcome-color: var(--color-secondary);
868
+ --color-page-login-background-color: var(--color-neutral-light-98);
869
+ --color-page-login-background-highlight-image: var(--color-neutral-light-90);
870
+ --color-page-login-highlight-text-color: var(--color-white);
871
+ --color-page-login-link-color: var(--color-primary);
872
+ --color-page-login-link-hover-color: var(--color-primary-dark-20);
873
+ --color-page-login-popover-color-attempts: var(--color-primary);
874
+ --color-page-login-popover-color-title: var(--color-tertiary);
875
+ --color-page-login-support-background-color: var(--color-white);
876
+ --color-page-login-support-color: var(--color-primary);
877
+
878
+ /*------------------------------------*\
879
+ PAGE SLIDE
880
+ \*------------------------------------*/
881
+
882
+ --color-page-slide-close-button-color: var(--color-primary);
883
+ --color-page-slide-body-text-color: var(--color-neutral-dark-60);
884
+
885
+ /*------------------------------------*\
886
+ POPOVER
887
+ \*------------------------------------*/
888
+
889
+ --color-popover-background-color: var(--color-white);
890
+ --color-popover-background-color-arrow: var(--color-white);
891
+ --color-popover-background-color-scrollbar: var(--color-primary);
892
+
893
+ --color-popover-color-text-title: var(--color-neutral);
894
+
895
+ /*------------------------------------*\
896
+ POPUP
897
+ \*------------------------------------*/
898
+
899
+ --color-popup-background-color-popup: var(--color-white);
900
+ --color-popup-background-color-popup-item-hover: var(--color-primary-light-95);
901
+ --color-popup-background-color-popup-item-selected: var(--color-primary);
902
+ --color-popup-background-color-popup-item-selected-hover: var(--color-primary-dark-20);
903
+ --color-popup-background-color-popup-item-selected-disabled: var(--color-neutral-light-60);
904
+ --color-popup-background-color-scrollbar: var(--color-primary);
905
+
906
+ --color-popup-border-color-separator: var(--color-neutral-light-90);
907
+
908
+ --color-popup-color-danger: var(--color-danger);
909
+ --color-popup-color-default: var(--color-primary);
910
+ --color-popup-color-disabled: var(--color-neutral-light-80);
911
+ --color-popup-color-item-selected: var(--color-white);
912
+
913
+ /*------------------------------------*\
914
+ PROGRESS
915
+ \*------------------------------------*/
916
+
917
+ --color-progress-color-info-icon: var(--color-primary);
918
+ --color-progress-color-text: var(--color-neutral);
919
+ --color-progress-color-text-success: var(--color-success);
920
+ --color-progress-color-text-error: var(--color-danger);
921
+ --color-progress-color-info: var(--color-neutral);
922
+
923
+ --color-progress-border-color-info-icon-close: var(--color-secondary);
924
+
925
+ /*------------------------------------*\
926
+ PROGRESS BAR
927
+ \*------------------------------------*/
928
+
929
+ --color-progress-bar-background-color-bar: var(--color-primary-light-80);
930
+ --color-progress-bar-background-color-default: var(--color-primary);
931
+ --color-progress-bar-background-color-success: var(--color-success);
932
+ --color-progress-bar-background-color-error: var(--color-danger);
933
+
934
+ /*------------------------------------*\
935
+ RADIO-GROUP
936
+ \*------------------------------------*/
937
+
938
+ --color-radio-group-background-color: var(--color-white);
939
+ --color-radio-group-background-color-active: var(--color-primary);
940
+ --color-radio-group-background-color-input-disabled: var(--color-neutral-light-90);
941
+
942
+ --color-radio-group-border-color: var(--color-neutral-light-60);
943
+ --color-radio-group-border-color-focusable: var(--color-primary-dark-20);
944
+ --color-radio-group-border-color-input-error: var(--color-danger);
945
+
946
+ --color-radio-group-color-label-active: var(--color-white);
947
+ --color-radio-group-color-text-disabled: var(--color-neutral-light-60);
948
+
949
+ /*------------------------------------*\
950
+ RICH TEXT
951
+ \*------------------------------------*/
952
+
953
+ --color-rich-text-background-color-scrollbar: var(--color-primary-alpha-50);
954
+
955
+ --color-rich-text-body-background-color: var(--color-white);
956
+ --color-rich-text-body-border-error: var(--color-danger);
957
+
958
+ --color-rich-text-body-text-error: var(--color-danger);
959
+ --color-rich-text-body-text-link: var(--color-primary);
960
+ --color-rich-text-body-text-link-hover: var(--color-primary-dark-20);
961
+ --color-rich-text-body-text-selected-color: var(--color-primary-light-80);
962
+
963
+ --color-rich-text-placeholder-color: var(--color-neutral-light-40);
964
+
965
+ --color-rich-text-toolbar-background-color: var(--color-rich-text-body-background-color);
966
+
967
+ /*------------------------------------*\
968
+ SELECT
969
+ \*------------------------------------*/
970
+
971
+ --color-select-background-color: var(--color-white);
972
+ --color-select-background-color-disabled: var(--color-neutral-light-90);
973
+
974
+ --color-select-background-color-item-hover: var(--color-primary-light-95);
975
+ --color-select-background-color-scrollbar: var(--color-primary-alpha-50);
976
+
977
+ --color-select-border-button: var(--color-neutral-light-60);
978
+ --color-select-border-button-error: var(--color-danger);
979
+ --color-select-border-button-disabled: var(--color-neutral-light-60);
980
+ --color-select-border-button-hover: var(--color-primary);
981
+ --color-select-border-button-focus: var(--color-primary);
982
+
983
+ --color-select-button-disabled: var(--color-neutral-light-60);
984
+ --color-select-button-focus: var(--color-primary);
985
+
986
+ --color-select-color-primary: var(--color-primary);
987
+ --color-select-color-selected: var(--color-white);
988
+ --color-select-background-color-unselected: var(--color-white);
989
+ --color-select-background-color-selected: var(--color-primary);
990
+ --color-select-color-text-error: var(--color-danger);
991
+
992
+ /*------------------------------------*\
993
+ SLIDE
994
+ \*------------------------------------*/
995
+
996
+ --color-slide-background-color-active-circle: var(--color-primary);
997
+ --color-slide-background-color-arrow-circle: var(--color-white);
998
+ --color-slide-background-color-circle: var(--color-neutral-light-80);
999
+ --color-slide-background-color-scrollbar: var(--color-primary-alpha-50);
1000
+ --color-slide-border-arrow: var(--color-primary);
1001
+ --color-slide-box-shadow-arrow-circle: var(--color-black-alpha-15);
1002
+ --color-slide-box-shadow-wrapper: var(--color-black-alpha-30);
1003
+
1004
+ /*------------------------------------*\
1005
+ STEPPER
1006
+ \*------------------------------------*/
1007
+
1008
+ --color-stepper-bar: var(--color-neutral);
1009
+ --color-stepper-bar-disabled: var(--color-neutral-light-40);
1010
+ --color-stepper-circle-active: var(--color-primary);
1011
+ --color-stepper-circle-default: var(--color-primary);
1012
+ --color-stepper-circle-disabled: var(--color-neutral-light-60);
1013
+ --color-stepper-circle-error: var(--color-danger);
1014
+
1015
+ /*------------------------------------*\
1016
+ SWITCH
1017
+ \*------------------------------------*/
1018
+
1019
+ --color-switch-background-color-container-on: var(--color-primary);
1020
+ --color-switch-background-color-container-off: var(--color-neutral-light-80);
1021
+ --color-switch-background-color-container-disabled: var(--color-neutral-light-80);
1022
+ --color-switch-box-shadow-color-focusable: var(--color-primary-dark-20);
1023
+
1024
+ --color-switch-background-color-button: var(--color-white);
1025
+ --color-switch-background-color-button-disabled: var(--color-neutral-light-40);
1026
+
1027
+ --color-switch-color-icon-on: var(--color-primary);
1028
+ --color-switch-color-icon-off: var(--color-neutral-light-80);
1029
+ --color-switch-color-icon-disabled: var(--color-neutral-light-80);
1030
+
1031
+ --color-switch-color-label: var(--color-neutral);
1032
+
1033
+ /*------------------------------------*\
1034
+ TAB BUTTON
1035
+ \*------------------------------------*/
1036
+
1037
+ --color-tab-button-box-shadow: var(--color-neutral-light-90);
1038
+ --color-tab-button-box-shadow-active: var(--color-secondary);
1039
+
1040
+ --color-tab-button-color: var(--color-secondary);
1041
+ --color-tab-button-color-disabled: var(--color-neutral-light-60);
1042
+
1043
+ /*------------------------------------*\
1044
+ TAB DROPDOWN
1045
+ \*------------------------------------*/
1046
+
1047
+ --color-tab-dropdown-background-color-tab-dropdown-button-active: var(--color-primary);
1048
+ --color-tab-dropdown-background-color-tab-dropdown-button-disabled: var(--color-white);
1049
+ --color-tab-dropdown-background-color-tab-dropdown-button-hover: var(--color-primary-light-95);
1050
+
1051
+ --color-tab-dropdown-color-tab-dropdown-button: var(--color-white);
1052
+
1053
+ /*------------------------------------*\
1054
+ TABLE
1055
+ \*------------------------------------*/
1056
+
1057
+ --color-table-background-color-action-hover: var(--color-primary-light-95);
1058
+ --color-table-background-color-actions: var(--color-white);
1059
+ --color-table-background-color-active: var(--color-primary-light-95);
1060
+ --color-table-background-color-detail-content: var(--color-white);
1061
+ --color-table-background-color-footer-show-subtitle: var(--color-white);
1062
+ --color-table-background-color-header: var(--color-white);
1063
+ --color-table-background-color-overlay: var(--color-secondary-dark-60-alpha-70);
1064
+ --color-table-background-color-overlay-content: var(--color-white);
1065
+ --color-table-background-color-row-strip: var(--color-neutral-light-98);
1066
+ --color-table-background-color-scrollbar: var(--color-primary);
1067
+ --color-table-background-color-selected: var(--color-primary);
1068
+ --color-table-background-color-table: var(--color-white);
1069
+ --color-table-background-color-radio: var(--color-white);
1070
+ --color-table-background-color-radio-active: var(--color-primary);
1071
+
1072
+ --color-table-border-footer-show-subtitle: var(--color-neutral-light-90);
1073
+ --color-table-border-select-checkbox: var(--color-neutral-light-60);
1074
+ --color-table-border-selected-checkbox: var(--color-primary);
1075
+ --color-table-border-rows: var(--color-neutral-light-90);
1076
+ --color-table-border-select-radio: var(--color-neutral-light-60);
1077
+ --color-table-border-select-radio-focusable: var(--color-primary-dark-20);
1078
+
1079
+ --color-table-box-shadow-action: var(--color-black-alpha-30);
1080
+ --color-table-box-shadow-checkbox: var(--color-black-alpha-15);
1081
+ --color-table-box-shadow-footer: var(--color-primary-light-80);
1082
+ --color-table-box-shadow-overlay-content: var(--color-black-alpha-30);
1083
+ --color-table-box-shadow-header: var(--color-primary-light-80);
1084
+
1085
+ --color-table-color-actions: var(--color-primary);
1086
+ --color-table-color-detail: var(--color-neutral-light-40);
1087
+ --color-table-color-disabled: var(--color-neutral-light-80);
1088
+ --color-table-color-footer-show-subtitle: var(--color-primary);
1089
+ --color-table-color-header: var(--color-primary);
1090
+ --color-table-color-select: var(--color-white);
1091
+ --color-table-color-subtitle-text: var(--color-white);
1092
+ --color-table-color-single-action-hover: var(--color-primary-dark-20);
1093
+ --color-table-color-text: var(--color-neutral-dark-60);
1094
+
1095
+ /*------------------------------------*\
1096
+ TABLE COLUMN LINK
1097
+ \*------------------------------------*/
1098
+
1099
+ --color-table-color-link: var(--color-primary);
1100
+ --color-table-color-link-disabled: var(--color-neutral-light-80);
1101
+ --color-table-color-link-hover: var(--color-primary-dark-20);
1102
+ --color-table-color-link-pressed: var(--color-primary-dark-40);
1103
+
1104
+ /*------------------------------------*\
1105
+ TABLE COLUMN MANAGER
1106
+ \*------------------------------------*/
1107
+
1108
+ --color-table-column-manager-body-color-background-scrollbar: var(--color-primary);
1109
+ --color-table-column-manager-border-color: var(--color-neutral-light-90);
1110
+ --color-table-column-manager-close-button-color: var(--color-primary);
1111
+ --color-table-column-manager-header-title: var(--color-neutral-dark-60);
1112
+ --color-table-column-manager-outline-color-focus: var(--color-secondary);
1113
+
1114
+ /*------------------------------------*\
1115
+ TAG
1116
+ \*------------------------------------*/
1117
+
1118
+ --color-tag-border-color-dashed-focus: var(--color-secondary);
1119
+
1120
+ --color-tag-color: var(--color-white);
1121
+ --color-tag-color-danger: var(--color-danger);
1122
+ --color-tag-color-info: var(--color-neutral);
1123
+ --color-tag-color-success: var(--color-success);
1124
+ --color-tag-color-warning: var(--color-warning);
1125
+ --color-tag-color-text-label: var(--color-neutral);
1126
+
1127
+ --color-tag-background-color-danger: var(--color-danger);
1128
+ --color-tag-background-color-info: var(--color-neutral);
1129
+ --color-tag-background-color-success: var(--color-success);
1130
+ --color-tag-background-color-warning: var(--color-warning);
1131
+ --color-tag-background-color-white: var(--color-white);
1132
+
1133
+ --color-tag-inverse-border-color-01: var(--color-01);
1134
+ --color-tag-inverse-border-color-02: var(--color-02);
1135
+ --color-tag-inverse-border-color-03: var(--color-03);
1136
+ --color-tag-inverse-border-color-04: var(--color-04);
1137
+ --color-tag-inverse-border-color-05: var(--color-05);
1138
+ --color-tag-inverse-border-color-06: var(--color-06);
1139
+ --color-tag-inverse-border-color-07: var(--color-07);
1140
+ --color-tag-inverse-border-color-08: var(--color-08);
1141
+ --color-tag-inverse-border-color-09: var(--color-09);
1142
+ --color-tag-inverse-border-color-10: var(--color-10);
1143
+ --color-tag-inverse-border-color-11: var(--color-11);
1144
+ --color-tag-inverse-border-color-12: var(--color-12);
1145
+
1146
+ /*------------------------------------*\
1147
+ TEXTAREA
1148
+ \*------------------------------------*/
1149
+
1150
+ --color-textarea-background-color: var(--color-white);
1151
+ --color-textarea-border: var(--color-neutral-light-60);
1152
+ --color-textarea-background-color-disabled: var(--color-neutral-light-90);
1153
+ --color-textarea-border-color-disabled: var(--color-neutral-light-90);
1154
+ --color-textarea-border-focusable: var(--color-primary);
1155
+ --color-textarea-color-error: var(--color-danger);
1156
+ --color-textarea-color-disabled: var(--color-neutral-light-60);
1157
+ --color-textarea-text-error: var(--color-danger);
1158
+ --color-textarea-background-color-scrollbar: var(--color-primary);
1159
+
1160
+ /*------------------------------------*\
1161
+ TOOLBAR
1162
+ \*------------------------------------*/
1163
+
1164
+ --color-toolbar-background-color-badge: var(--color-danger);
1165
+ --color-toolbar-background-color-toolbar: var(--color-white);
1166
+
1167
+ --color-toolbar-border-color-separator: var(--color-neutral-light-90);
1168
+
1169
+ --color-toolbar-color-badge-text: var(--color-white);
1170
+ --color-toolbar-color-default: var(--color-primary);
1171
+ --color-toolbar-color-title: var(--color-secondary);
1172
+
1173
+ /*------------------------------------*\
1174
+ TOOLTIP
1175
+ \*------------------------------------*/
1176
+
1177
+ --color-tooltip-background-color-balloon: var(--color-neutral);
1178
+ --color-tooltip-color-text-balloon: var(--color-white);
1179
+
1180
+ /*------------------------------------*\
1181
+ TREEVIEW
1182
+ \*------------------------------------*/
1183
+
1184
+ /** Tree View Item */
1185
+ --color-tree-view-item-border-bottom-color: var(--color-neutral-light-90);
1186
+
1187
+ /** Tree View Item Header */
1188
+ --color-tree-view-item-header-button-color: var(--color-primary);
1189
+ --color-tree-view-item-header-button-focus: var(--color-secondary);
1190
+ --color-tree-view-item-header-label-text-color: var(--color-neutral);
1191
+
1192
+ /*------------------------------------*\
1193
+ UPLOAD
1194
+ \*------------------------------------*/
1195
+
1196
+ --color-upload-color-text-filename-loading: var(--color-neutral-dark-60);
1197
+
1198
+ --color-upload-background-color-disabled: var(--color-white);
1199
+ --color-upload-border-disabled: var(--color-neutral-light-60);
1200
+ --color-upload-color-disabled: var(--color-neutral-light-60);
1201
+
1202
+ --color-upload-background-color-hover: var(--color-white);
1203
+ --color-upload-border-hover: var(--color-primary-dark-20);
1204
+ --color-upload-color-hover: var(--color-primary-dark-20);
1205
+
1206
+ --color-upload-background-color-pressed: var(--color-white);
1207
+ --color-upload-border-pressed: var(--color-primary-dark-40);
1208
+ --color-upload-color-pressed: var(--color-primary-dark-40);
1209
+
1210
+ --color-upload-color-progress: var(--color-tertiary);
1211
+ --color-upload-color-text-load: var(--color-white);
1212
+ --color-upload-background-color-success: var(--color-success);
1213
+ --color-upload-background-color-load-progress: var(--color-tertiary);
1214
+ --color-upload-background-color-error: var(--color-danger);
1215
+ --color-upload-color-text-load-waiting: var(--color-neutral);
1216
+ --color-upload-background-color-progress: var(--color-tertiary-light-90);
1217
+
1218
+ --color-upload-drag-drop-overlay-icon: var(--color-primary-alpha-50);
1219
+ --color-upload-drag-drop-overlay-text: var(--color-primary);
1220
+ --color-upload-drag-drop-area-overlay-background-color: var(--color-white);
1221
+
1222
+ --color-upload-drag-drop-area-icon: var(--color-neutral-light-80);
1223
+ --color-upload-drag-drop-area-label-text: var(--color-neutral);
1224
+ --color-upload-drag-drop-area-select-files-text: var(--color-primary);
1225
+ --color-upload-drag-drop-area-border: var(--color-neutral-light-60);
1226
+ --color-upload-drag-drop-area-border-primary: var(--color-primary);
1227
+ --color-upload-drag-drop-area-border-error: var(--color-danger);
1228
+
1229
+ --color-upload-drag-drop-area-background-color-disabled: var(--color-neutral-light-90);
1230
+ --color-upload-drag-drop-area-color-disabled: var(--color-neutral-light-60);
1231
+
1232
+ --color-upload-file-restrictions-color-text: var(--color-neutral);
1233
+
1234
+ /*------------------------------------*\
1235
+ WIDGET
1236
+ \*------------------------------------*/
1237
+
1238
+ --color-widget-color-action-active: var(--color-primary-dark-20);
1239
+ --color-widget-color-action-hover: var(--color-primary-dark-20);
1240
+ --color-widget-color-action: var(--color-primary);
1241
+ --color-widget-color-default: var(--color-neutral);
1242
+ --color-widget-color-title-action: var(--color-primary);
1243
+ --color-widget-color-widget-primary: var(--color-neutral-dark-60);
1244
+
1245
+ --color-widget-background-color: var(--color-white);
1246
+ --color-widget-primary-background-color: var(--color-tertiary);
1247
+
1248
+ --border-widget-border-no-shadow: solid 1px var(--color-neutral-light-90);
1249
+ --color-widget-border-color-footer: var(--color-neutral-light-90);
1250
+ --color-widget-border-color-footer-primary: var(--color-white-alpha-30);
1251
+
1252
+ --color-widget-background-color-disabled: var(--color-neutral-light-90);
1253
+ --color-widget-background-color-scroll-disabled: var(--color-neutral-light-40);
1254
+ --color-widget-color-disabled: var(--color-neutral-light-40);
1255
+ }