@po-ui/style 16.6.0 → 16.7.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -6,82 +6,93 @@
|
|
|
6
6
|
* CONTENTS
|
|
7
7
|
*
|
|
8
8
|
* COMMONS
|
|
9
|
-
* Common
|
|
10
|
-
* Color
|
|
11
|
-
* Color Palette
|
|
12
|
-
* Font
|
|
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
13
|
*
|
|
14
14
|
* COMPONENTS
|
|
15
|
-
* Accordion
|
|
16
|
-
*
|
|
17
|
-
*
|
|
18
|
-
*
|
|
19
|
-
*
|
|
20
|
-
* Button
|
|
21
|
-
*
|
|
22
|
-
*
|
|
23
|
-
*
|
|
24
|
-
*
|
|
25
|
-
*
|
|
26
|
-
*
|
|
27
|
-
*
|
|
28
|
-
*
|
|
29
|
-
*
|
|
30
|
-
*
|
|
31
|
-
*
|
|
32
|
-
*
|
|
33
|
-
*
|
|
34
|
-
*
|
|
35
|
-
*
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
*
|
|
39
|
-
*
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
*
|
|
43
|
-
*
|
|
44
|
-
*
|
|
45
|
-
*
|
|
46
|
-
*
|
|
47
|
-
*
|
|
48
|
-
*
|
|
49
|
-
*
|
|
50
|
-
*
|
|
51
|
-
*
|
|
52
|
-
*
|
|
53
|
-
*
|
|
54
|
-
*
|
|
55
|
-
*
|
|
56
|
-
*
|
|
57
|
-
*
|
|
58
|
-
*
|
|
59
|
-
*
|
|
60
|
-
* Page
|
|
61
|
-
*
|
|
62
|
-
*
|
|
63
|
-
*
|
|
64
|
-
*
|
|
65
|
-
*
|
|
66
|
-
*
|
|
67
|
-
*
|
|
68
|
-
*
|
|
69
|
-
*
|
|
70
|
-
*
|
|
71
|
-
*
|
|
72
|
-
*
|
|
73
|
-
*
|
|
74
|
-
*
|
|
75
|
-
*
|
|
76
|
-
*
|
|
77
|
-
*
|
|
78
|
-
*
|
|
79
|
-
*
|
|
80
|
-
*
|
|
81
|
-
*
|
|
15
|
+
* Accordion......................variáveis do Accordion.
|
|
16
|
+
* Accordion Manager..............variáveis do Acoordion Manager.
|
|
17
|
+
* Accordion Item Header..........variáveis do Accordion Item Header.
|
|
18
|
+
* Accordion Item Header Button...variáveis do Accordion Item Header Button.
|
|
19
|
+
* Avatar.........................variáveis do Avatar.
|
|
20
|
+
* Button.........................variáveis do Button.
|
|
21
|
+
* Badge..........................variáveis do Badge.
|
|
22
|
+
* Breadcrumb.....................variáveis do Breadcrumb.
|
|
23
|
+
* Button Group...................variáveis do Button Group.
|
|
24
|
+
* Calendar.......................variáveis do Calendar.
|
|
25
|
+
* Chart..........................variáveis do Chart.
|
|
26
|
+
* Checkbox Group.................variáveis do Checkbox Group.
|
|
27
|
+
* Combo..........................variáveis do Combo.
|
|
28
|
+
* Container......................variáveis do Container.
|
|
29
|
+
* Datepicker Range...............variáveis do Datepicker Range.
|
|
30
|
+
* Disclaimer.....................variáveis do Disclaimer.
|
|
31
|
+
* Disclaimer Group...............variáveis do Disclaimer Group.
|
|
32
|
+
* Divider........................variáveis do Divider.
|
|
33
|
+
* Dropdown.......................variáveis do Dropdown.
|
|
34
|
+
* Field Container Bottom.........variáveis do Field Container Bottom.
|
|
35
|
+
* Field Icon.....................variáveis do Field Icon.
|
|
36
|
+
* Gauge..........................variáveis do Gauge.
|
|
37
|
+
* Info...........................variáveis do Info.
|
|
38
|
+
* Input..........................variáveis do Input.
|
|
39
|
+
* Itemlist.......................variáveis do Itemlist
|
|
40
|
+
* Label..........................variáveis do Label.
|
|
41
|
+
* Link...........................variáveis do Link.
|
|
42
|
+
* Listbox........................variáveis do listbox.
|
|
43
|
+
* List View......................variáveis do List View.
|
|
44
|
+
* Loading........................variáveis do Loading.
|
|
45
|
+
* Loading Overlay................variáveis do Loading Overlay.
|
|
46
|
+
* Lookup.........................variáveis do Lookup.
|
|
47
|
+
* Menu...........................variáveis do Menu.
|
|
48
|
+
* Menu Item......................variáveis do Menu Item.
|
|
49
|
+
* Menu Filter....................variáveis do Menu Filter.
|
|
50
|
+
* Menu Panel.....................variáveis do Menu Panel.
|
|
51
|
+
* Modal..........................variáveis do Modal.
|
|
52
|
+
* Modal Password Recovery........variáveis do Modal Password Recovery.
|
|
53
|
+
* Multiselect....................variáveis do Multiselect.
|
|
54
|
+
* Navbar.........................variáveis do Navbar.
|
|
55
|
+
* Navbar Action..................variáveis do Navbar Action.
|
|
56
|
+
* Navbar Action Popup............variáveis do Navbar Action Popup.
|
|
57
|
+
* Navbar Item....................variáveis do Navbar Item.
|
|
58
|
+
* Navbar Item Navigation.........variáveis do Navbar Item Navigation.
|
|
59
|
+
* Overlay........................variáveis do Overlay.
|
|
60
|
+
* Page...........................variáveis do Page.
|
|
61
|
+
* Page Background................variáveis do Page Background.
|
|
62
|
+
* Page Blocked User..............variáveis do Page Blocked User.
|
|
63
|
+
* Page Change Password...........variáveis do Page Change Password.
|
|
64
|
+
* Page Content...................variáveis do Page Content.
|
|
65
|
+
* Page Header................ ...variáveis do Page Header.
|
|
66
|
+
* Page List......................variáveis do Page List.
|
|
67
|
+
* Page Login.....................variáveis do Page Login.
|
|
68
|
+
* Page Slide.....................variáveis do Page Slide.
|
|
69
|
+
* Popover........................variáveis do Popover.
|
|
70
|
+
* Popup..........................variáveis do Popup.
|
|
71
|
+
* Popup Item List................variáveis do Popup Item List.
|
|
72
|
+
* Progress.......................variáveis do Progress.
|
|
73
|
+
* Progress Bar...................variáveis do Progress Bar.
|
|
74
|
+
* Radio..........................variáveis do Radio.
|
|
75
|
+
* Rich Text......................variáveis do Rich Text.
|
|
76
|
+
* Search.........................variáveis do Search.
|
|
77
|
+
* Select.........................variáveis do Select.
|
|
78
|
+
* Slide..........................variáveis do Slide.
|
|
79
|
+
* Stepper........................variáveis do Stepper.
|
|
80
|
+
* Switch.........................variáveis do Switch.
|
|
81
|
+
* Tab Button.....................variáveis do Tab Button.
|
|
82
|
+
* Tab Dropdown...................variáveis do Tab Dropdown.
|
|
83
|
+
* Table..........................variáveis do Table.
|
|
84
|
+
* Table Column Link..............variáveis do Table Column Link.
|
|
85
|
+
* Table List Manager.............variáveis do Table List Manager.
|
|
86
|
+
* Tag............................variáveis do Tag.
|
|
87
|
+
* Textarea.......................variáveis do Textarea.
|
|
88
|
+
* Toolbar........................variáveis do Toolbar.
|
|
89
|
+
* Tooltip........................variáveis do Tooltip.
|
|
90
|
+
* Tree View......................variáveis do Tree View.
|
|
91
|
+
* Upload.........................variáveis do Upload.
|
|
92
|
+
* Widget.........................variáveis do Widget.
|
|
82
93
|
*
|
|
83
94
|
* SERVICES
|
|
84
|
-
* Toaster
|
|
95
|
+
* Toaster........................variáveis do Toaster.
|
|
85
96
|
*/
|
|
86
97
|
|
|
87
98
|
/*------------------------------------*\
|
|
@@ -93,14 +104,15 @@
|
|
|
93
104
|
\*------------------------------------*/
|
|
94
105
|
|
|
95
106
|
:root {
|
|
96
|
-
--color-wrapper-menu-panel-color-background: var(--color-
|
|
107
|
+
--color-wrapper-menu-panel-color-background: var(--color-neutral-light-00);
|
|
97
108
|
--color-overlay-background-color-overlay: var(--color-secondary-dark-60-alpha-70);
|
|
109
|
+
--color-hr-border-top: var(--color-neutral-light-10);
|
|
98
110
|
|
|
99
|
-
--
|
|
111
|
+
--outline-width: var(--border-width-lg);
|
|
100
112
|
}
|
|
101
113
|
|
|
102
114
|
/*------------------------------------*\
|
|
103
|
-
BRAND TOKENS
|
|
115
|
+
BRAND TOKENS - PO UI
|
|
104
116
|
\*------------------------------------*/
|
|
105
117
|
|
|
106
118
|
:root {
|
|
@@ -129,6 +141,7 @@
|
|
|
129
141
|
/*------------------------------------*\
|
|
130
142
|
BRAND TOKENS - COLOR ACTIONS
|
|
131
143
|
\*------------------------------------*/
|
|
144
|
+
|
|
132
145
|
:root {
|
|
133
146
|
--color-action-default: var(--color-brand-01-base);
|
|
134
147
|
--color-action-hover: var(--color-brand-01-dark);
|
|
@@ -138,161 +151,50 @@
|
|
|
138
151
|
}
|
|
139
152
|
|
|
140
153
|
/*------------------------------------*\
|
|
141
|
-
COLOR
|
|
154
|
+
COLOR PO UI LEGACY - Essas variáveis serão removidas conforme evolução da implementação do AnimaliaDS
|
|
142
155
|
\*------------------------------------*/
|
|
143
156
|
|
|
144
157
|
:root {
|
|
145
|
-
/* Cor do background da linha da tabela */
|
|
146
|
-
--color-primary-light-
|
|
147
|
-
|
|
148
|
-
/* Borda inferior da Table Header */
|
|
149
|
-
--color-primary-light-80: #f5dbe8;
|
|
150
|
-
|
|
151
|
-
/* Scroll (opacidade de 50%) */
|
|
152
|
-
--color-primary-alpha-50: rgba(201, 53, 125, 0.5);
|
|
153
|
-
|
|
154
|
-
/* Botão primário, Links, Cor da borda do input selecionado, Cor da borda do botão secundário */
|
|
155
|
-
--color-primary: #c9357d;
|
|
156
|
-
|
|
157
|
-
/* Hover do Botão primário, Links, Cor da borda do botão secundário */
|
|
158
|
-
--color-primary-dark-20: #9d2c67;
|
|
159
|
-
|
|
160
|
-
/* Pressed do Botão primário, Links, Cor da borda do botão secundário */
|
|
161
|
-
--color-primary-dark-40: #8b255a;
|
|
158
|
+
--color-primary-light-95: #fcf6f9; /* Cor do background da linha da tabela */
|
|
159
|
+
--color-primary-light-80: #f5dbe8; /* Borda inferior da Table Header */
|
|
160
|
+
--color-primary-alpha-50: rgba(201, 53, 125, 0.5); /* Scroll (opacidade de 50%) */
|
|
162
161
|
|
|
163
|
-
/*
|
|
164
|
-
--color-secondary-light-20: var(--color-brand-01-lighter);
|
|
165
|
-
/*Deprecated v16.x.x utilizar --color-brand-01-lighter*/
|
|
162
|
+
--color-primary: var(--color-brand-02-base); /* Deprecated v18.x.x utilizar --color-brand-02-base */
|
|
166
163
|
|
|
167
|
-
--color-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
--color-secondary: var(--color-action-default);
|
|
171
|
-
/*Deprecated v16.x.x utilizar --color-action-default*/
|
|
172
|
-
|
|
173
|
-
--color-secondary-dark-20: var(--color-brand-01-dark);
|
|
174
|
-
/*Deprecated v16.x.x utilizar --color-brand-01-dark*/
|
|
175
|
-
|
|
176
|
-
--color-secondary-dark-40: var(--color-brand-01-darker);
|
|
177
|
-
/*Deprecated v16.x.x utilizar --color-brand-01-darker*/
|
|
178
|
-
|
|
179
|
-
/* Overlay de Modal e Menu (70% de opacidade) */
|
|
180
|
-
--color-secondary-dark-60-alpha-70: rgba(59, 28, 74, 0.7);
|
|
164
|
+
--color-primary-dark-20: #9d2c67; /* Hover do Botão primário, Links, Cor da borda do botão secundário */
|
|
165
|
+
--color-primary-dark-40: #8b255a; /* Pressed do Botão primário, Links, Cor da borda do botão secundário */
|
|
181
166
|
|
|
167
|
+
--color-secondary-dark-60-alpha-70: rgba(59, 28, 74, 0.7); /* Overlay de Modal e Menu (70% de opacidade) */
|
|
182
168
|
--color-secondary-dark-60: #3b1c4a;
|
|
183
169
|
|
|
184
|
-
--color-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
/* Tertiary */
|
|
188
|
-
|
|
189
|
-
/* Cor do background da linha de arquivo em carregamento (Upload) */
|
|
190
|
-
--color-tertiary-light-90: #fffaef;
|
|
191
|
-
|
|
192
|
-
/* Borda esquerda do menu lateral selecionado, Tab selecionada, Card em destaque */
|
|
193
|
-
--color-tertiary: var(--color-brand-03-base);
|
|
194
|
-
/*Deprecated v16.x.x utilizar --color-brand-03-base*/
|
|
195
|
-
|
|
196
|
-
/* Cor de gráficos, botão do disclaimer */
|
|
197
|
-
--color-tertiary-dark-5: #f4d069;
|
|
198
|
-
|
|
170
|
+
--color-tertiary-light-90: #fffaef; /* Cor do background da linha de arquivo em carregamento (Upload) */
|
|
171
|
+
--color-tertiary-dark-5: #f4d069; /* Cor de gráficos, botão do disclaimer */
|
|
199
172
|
--color-tertiary-dark-40: #d2b25a;
|
|
200
|
-
|
|
201
173
|
--color-tertiary-dark-60: #ac9249;
|
|
202
174
|
|
|
203
|
-
--color-white: var(--color-neutral-light-00);
|
|
204
|
-
/*Deprecated v16.x.x utilizar --color-neutral-light-00*/
|
|
205
|
-
|
|
206
175
|
--color-white-alpha-30: rgba(255, 255, 255, 0.3);
|
|
207
176
|
|
|
208
|
-
|
|
209
|
-
--color-neutral-light-98: var(--color-neutral-light-05);
|
|
210
|
-
/*Deprecated v16.x.x utilizar --color-neutral-light-05*/
|
|
211
|
-
|
|
212
|
-
/* Borda inferior de item de tabela, Base do Slider, Background do Input inativo */
|
|
213
|
-
--color-neutral-light-90: var(--color-neutral-light-10);
|
|
214
|
-
/*Deprecated v16.x.x utilizar --color-neutral-light-10*/
|
|
215
|
-
|
|
216
|
-
/* Step inativo, Base Switch desligado */
|
|
217
|
-
--color-neutral-light-80: var(--color-neutral-light-20);
|
|
218
|
-
/*Deprecated v16.x.x utilizar --color-neutral-light-20*/
|
|
219
|
-
|
|
220
|
-
/* Ícone desabilitado, Slider desabilitado, Borda de input */
|
|
221
|
-
--color-neutral-light-60: var(--color-neutral-light-30);
|
|
222
|
-
/*Deprecated v16.x.x utilizar --color-neutral-light-30*/
|
|
223
|
-
|
|
224
|
-
/* Texto do Placeholder */
|
|
225
|
-
--color-neutral-light-40: var(--color-neutral-mid-40);
|
|
226
|
-
/*Deprecated v16.x.x utilizar --color-neutral-mid-40*/
|
|
227
|
-
|
|
228
|
-
/* Borda superior do itens do menu (45% de opacidade) */
|
|
229
|
-
--color-neutral-alpha-45: rgba(74, 92, 96, 0.45);
|
|
230
|
-
|
|
231
|
-
/* Background do Feedback, Pill de informação */
|
|
232
|
-
--color-neutral: var(--color-neutral-dark-70);
|
|
233
|
-
/*Deprecated v16.x.x utilizar --color-neutral-dark-70*/
|
|
234
|
-
|
|
235
|
-
/* Usar em menu: Área do logo, Background do menu */
|
|
236
|
-
--color-neutral-dark-40: var(--color-neutral-dark-80);
|
|
237
|
-
/*Deprecated v16.x.x utilizar --color-neutral-dark-80*/
|
|
238
|
-
|
|
239
|
-
/* Texto */
|
|
240
|
-
--color-neutral-dark-60: var(--color-neutral-dark-90);
|
|
241
|
-
/*Deprecated v16.x.x utilizar --color-neutral-dark-90*/
|
|
242
|
-
|
|
243
|
-
/* Usar em sombras (10% de opacidade) */
|
|
244
|
-
--color-black-alpha-10: rgba(0, 0, 0, 0.1);
|
|
245
|
-
|
|
246
|
-
/* Usar em menu: Hover - Background de item de menu (15% de opacidade) */
|
|
247
|
-
--color-black-alpha-15: rgba(0, 0, 0, 0.15);
|
|
248
|
-
|
|
249
|
-
/* Usar em menu: Background dos itens de segundo nível (30% de opacidade) */
|
|
250
|
-
--color-black-alpha-30: rgba(0, 0, 0, 0.3);
|
|
177
|
+
--color-neutral-alpha-45: rgba(74, 92, 96, 0.45); /* Borda superior do itens do menu (45% de opacidade) */
|
|
251
178
|
|
|
179
|
+
--color-black-alpha-10: rgba(0, 0, 0, 0.1); /* Usar em sombras (10% de opacidade) */
|
|
180
|
+
--color-black-alpha-15: rgba(0, 0, 0, 0.15); /* Usar em menu: Hover - Background de item de menu (15% de opacidade) */
|
|
181
|
+
--color-black-alpha-30: rgba(
|
|
182
|
+
0,
|
|
183
|
+
0,
|
|
184
|
+
0,
|
|
185
|
+
0.3
|
|
186
|
+
); /* Usar em menu: Background dos itens de segundo nível (30% de opacidade) */
|
|
252
187
|
--color-black: #000000;
|
|
253
188
|
|
|
254
|
-
/* Background do Feedback de sucesso */
|
|
255
|
-
--color-
|
|
256
|
-
|
|
257
|
-
/* Background do Feedback de atenção */
|
|
258
|
-
--color-warning: #ea9b3e;
|
|
259
|
-
|
|
260
|
-
/* Background do Feedback de erro */
|
|
261
|
-
--color-danger-light-05: var(--color-feedback-negative-lightest);
|
|
262
|
-
/*Deprecated v16.x.x utilizar --color-feedback-negative-lightest*/
|
|
263
|
-
|
|
264
|
-
--color-danger-light-20: var(--color-feedback-negative-lighter);
|
|
265
|
-
/*Deprecated v16.x.x utilizar --color-feedback-negative-lighter*/
|
|
266
|
-
|
|
267
|
-
--color-danger-light-40: var(--color-feedback-negative-light);
|
|
268
|
-
/*Deprecated v16.x.x utilizar --color-feedback-negative-light*/
|
|
269
|
-
|
|
270
|
-
/* Background do Feedback de erro, Borda de Input com erro */
|
|
271
|
-
--color-danger: var(--color-feedback-negative-base);
|
|
272
|
-
/*Deprecated v16.x.x utilizar --color-feedback-negative-base*/
|
|
273
|
-
|
|
274
|
-
/* Background disclaimer danger */
|
|
275
|
-
--color-danger-dark-5: var(--color-feedback-negative-dark);
|
|
276
|
-
/*Deprecated v16.x.x utilizar --color-feedback-negative-dark*/
|
|
277
|
-
|
|
278
|
-
/* Hover para botão danger */
|
|
279
|
-
--color-danger-dark-20: #9e3933;
|
|
280
|
-
|
|
281
|
-
/* Estilo ativo para botão danger */
|
|
282
|
-
--color-danger-dark-40: var(--color-feedback-negative-darkest);
|
|
283
|
-
/*Deprecated v16.x.x utilizar --color-feedback-negative-darkest*/
|
|
189
|
+
--color-success: #00b28e; /* Background do Feedback de sucesso */
|
|
190
|
+
--color-warning: #ea9b3e; /* Background do Feedback de atenção */
|
|
191
|
+
--color-danger-dark-20: #9e3933; /* Hover para botão danger */
|
|
284
192
|
|
|
285
193
|
--color-transparent: transparent;
|
|
286
194
|
|
|
287
|
-
/* Cor padrão para o focus */
|
|
288
|
-
--color-outline-focused: var(--color-action-focus);
|
|
289
|
-
/*Deprecated v16.x.x utilizar --color-action-focus*/
|
|
290
|
-
|
|
291
|
-
--outline-width: var(--border-width-lg);
|
|
292
|
-
|
|
293
195
|
/*------------------------------------*\
|
|
294
|
-
|
|
295
|
-
|
|
196
|
+
COLOR-PALETTE
|
|
197
|
+
\*------------------------------------*/
|
|
296
198
|
|
|
297
199
|
/* Cores que podem ser utilizadas na coluna de labels, legenda e cor de icones do componente table, também utilizadas na tag e badge */
|
|
298
200
|
--color-01: #0c9abe;
|
|
@@ -309,14 +211,13 @@
|
|
|
309
211
|
--color-12: #06a6a5;
|
|
310
212
|
|
|
311
213
|
/*------------------------------------*\
|
|
312
|
-
|
|
313
|
-
|
|
214
|
+
FONT
|
|
215
|
+
\*------------------------------------*/
|
|
314
216
|
|
|
315
217
|
/**
|
|
316
218
|
* 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,
|
|
317
219
|
* é 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.
|
|
318
220
|
*/
|
|
319
|
-
/* --font-family: Roboto; */
|
|
320
221
|
--font-family-theme: Roboto;
|
|
321
222
|
--font-family-theme-bold: Roboto-Bold;
|
|
322
223
|
--font-family-theme-extra-light: Roboto-Condensed-Light;
|
|
@@ -358,8 +259,8 @@
|
|
|
358
259
|
ACCORDION
|
|
359
260
|
\*------------------------------------*/
|
|
360
261
|
po-accordion {
|
|
361
|
-
--background-color: var(--color-
|
|
362
|
-
--color: var(--color-
|
|
262
|
+
--background-color: var(--color-neutral-light-00);
|
|
263
|
+
--color: var(--color-action-default);
|
|
363
264
|
--font-family: var(--font-family-theme);
|
|
364
265
|
--font-size: var(--font-size-default);
|
|
365
266
|
--font-weight: var(--font-weight-bold);
|
|
@@ -367,60 +268,59 @@ po-accordion {
|
|
|
367
268
|
--background-hover: var(--color-brand-01-lightest);
|
|
368
269
|
--color-hover: var(--color-action-hover);
|
|
369
270
|
|
|
370
|
-
--background-pressed: var(--color-
|
|
271
|
+
--background-pressed: var(--color-brand-01-lighter);
|
|
371
272
|
--color-pressed: var(--color-action-pressed);
|
|
372
273
|
|
|
373
|
-
--color-focus: var(--color-
|
|
374
|
-
--outline-color-focused: var(--color-
|
|
274
|
+
--color-focus: var(--color-action-focus);
|
|
275
|
+
--outline-color-focused: var(--color-action-focus);
|
|
375
276
|
|
|
376
|
-
--background-disabled: var(--color-neutral-light-
|
|
277
|
+
--background-disabled: var(--color-neutral-light-10);
|
|
377
278
|
--color-disabled: var(--color-neutral-mid-60);
|
|
378
279
|
}
|
|
379
280
|
|
|
281
|
+
/*------------------------------------*\
|
|
282
|
+
ACCORDION MANAGER
|
|
283
|
+
\*------------------------------------*/
|
|
380
284
|
po-accordion-manager {
|
|
381
285
|
--background-color: var(--color-brand-01-lightest);
|
|
382
|
-
--color: var(--color-
|
|
286
|
+
--color: var(--color-action-default);
|
|
383
287
|
--font-family: var(--font-family-theme);
|
|
384
288
|
--font-size: var(--font-size-sm);
|
|
385
289
|
--font-weight: var(--font-weight-bold);
|
|
386
290
|
|
|
387
|
-
--background-pressed: var(--color-
|
|
291
|
+
--background-pressed: var(--color-brand-01-lighter);
|
|
388
292
|
--color-pressed: var(--color-action-pressed);
|
|
389
293
|
|
|
390
|
-
--color-focus: var(--color-
|
|
391
|
-
--outline-color-focused: var(--color-
|
|
294
|
+
--color-focus: var(--color-action-default);
|
|
295
|
+
--outline-color-focused: var(--color-action-focus);
|
|
392
296
|
}
|
|
393
297
|
|
|
394
298
|
:root {
|
|
395
|
-
|
|
396
|
-
|
|
397
|
-
|
|
299
|
+
/*------------------------------------*\
|
|
300
|
+
ACCORDION ITEM HEADER
|
|
301
|
+
\*------------------------------------*/
|
|
398
302
|
--color-accordion-header-color-primary: var(--color);
|
|
399
|
-
/*Deprecated
|
|
303
|
+
/*Deprecated v18.x.x utilizar --color*/
|
|
400
304
|
--color-accordion-header-color-hover: var(--color-hover);
|
|
401
|
-
/*Deprecated
|
|
305
|
+
/*Deprecated v18.x.x utilizar --color-hover*/
|
|
402
306
|
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
307
|
+
/*------------------------------------*\
|
|
308
|
+
ACCORDION ITEM HEADER BUTTON
|
|
309
|
+
\*------------------------------------*/
|
|
406
310
|
--color-accordion-item-header-button-background-color: var(--background-color);
|
|
407
|
-
/*Deprecated
|
|
311
|
+
/*Deprecated v18.x.x utilizar --background-color*/
|
|
408
312
|
--color-accordion-item-header-button-focus: var(--color-focus);
|
|
409
|
-
/*Deprecated
|
|
313
|
+
/*Deprecated v18.x.x utilizar --color-focus*/
|
|
410
314
|
|
|
411
315
|
/*------------------------------------*\
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
415
|
-
--color-avatar-background-color-avatar: var(--color-neutral);
|
|
316
|
+
AVATAR
|
|
317
|
+
\*------------------------------------*/
|
|
318
|
+
--color-avatar-background-color-avatar: var(--color-neutral-dark-70);
|
|
416
319
|
}
|
|
417
320
|
|
|
418
321
|
/*------------------------------------*\
|
|
419
322
|
BUTTON
|
|
420
323
|
\*------------------------------------*/
|
|
421
|
-
|
|
422
|
-
/* -------------------------------------------------------- */
|
|
423
|
-
|
|
424
324
|
po-button {
|
|
425
325
|
--font-family: var(--font-family-theme);
|
|
426
326
|
--font-size: var(--font-size-default);
|
|
@@ -432,31 +332,31 @@ po-button {
|
|
|
432
332
|
|
|
433
333
|
/* danger */
|
|
434
334
|
--text-color-danger: var(--color-neutral-light-00);
|
|
435
|
-
--color-button-danger: var(--color-
|
|
335
|
+
--color-button-danger: var(--color-feedback-negative-dark);
|
|
436
336
|
--color-danger-hover: var(--color-feedback-negative-darker);
|
|
437
|
-
--color-danger-pressed: var(--color-
|
|
438
|
-
--background-danger-hover: var(--color-
|
|
439
|
-
--border-color-danger-hover: var(--color-
|
|
440
|
-
--background-danger-pressed: var(--color-
|
|
337
|
+
--color-danger-pressed: var(--color-feedback-negative-darkest);
|
|
338
|
+
--background-danger-hover: var(--color-feedback-negative-lighter);
|
|
339
|
+
--border-color-danger-hover: var(--color-feedback-negative-darkest);
|
|
340
|
+
--background-danger-pressed: var(--color-feedback-negative-light);
|
|
441
341
|
--background-color-button-danger: var(--color-transparent);
|
|
442
342
|
|
|
443
|
-
--text-color: var(--color-
|
|
444
|
-
--color: var(--color-
|
|
343
|
+
--text-color: var(--color-neutral-light-00);
|
|
344
|
+
--color: var(--color-action-default);
|
|
445
345
|
--background-color: var(--color-transparent);
|
|
446
346
|
--border-color: var(--color-transparent);
|
|
447
347
|
--shadow: var(--shadow-none);
|
|
448
348
|
|
|
449
349
|
/* hover */
|
|
450
350
|
--color-hover: var(--color-action-hover);
|
|
451
|
-
--background-hover: var(--color-
|
|
452
|
-
--border-color-hover: var(--color-
|
|
351
|
+
--background-hover: var(--color-brand-01-lighter);
|
|
352
|
+
--border-color-hover: var(--color-brand-01-darkest);
|
|
453
353
|
|
|
454
354
|
/* focused */
|
|
455
|
-
--outline-color-focused: var(--color-
|
|
355
|
+
--outline-color-focused: var(--color-action-focus);
|
|
456
356
|
|
|
457
357
|
/* pressed */
|
|
458
358
|
--color-pressed: var(--color-action-pressed);
|
|
459
|
-
--background-pressed: var(--color-
|
|
359
|
+
--background-pressed: var(--color-brand-01-light);
|
|
460
360
|
|
|
461
361
|
/* disabled */
|
|
462
362
|
--text-color-disabled: var(--color-neutral-dark-70);
|
|
@@ -464,282 +364,153 @@ po-button {
|
|
|
464
364
|
--background-color-disabled: var(--color-transparent);
|
|
465
365
|
}
|
|
466
366
|
|
|
467
|
-
/* -------------------------------------------------------- */
|
|
468
|
-
|
|
469
|
-
/**
|
|
470
|
-
* Button Default
|
|
471
|
-
*/
|
|
472
|
-
|
|
473
367
|
:root {
|
|
474
|
-
--color-button-background-color: var(--background-color);
|
|
475
|
-
/*Deprecated v16.x.x utilizar --background-color*/
|
|
476
|
-
--color-button-border: var(--color);
|
|
477
|
-
/*Deprecated v16.x.x utilizar --color*/
|
|
478
|
-
--color-button-color: var(--color);
|
|
479
|
-
/*Deprecated v16.x.x utilizar --color*/
|
|
480
|
-
--color-button-box-shadow: var(--shadow);
|
|
481
|
-
|
|
482
|
-
--color-button-background-color-hover: var(--background-hover);
|
|
483
|
-
/*Deprecated v16.x.x utilizar --background-hover*/
|
|
484
|
-
--color-button-border-hover: var(--border-color-hover);
|
|
485
|
-
/*Deprecated v16.x.x utilizar --border-color-hover*/
|
|
486
|
-
--color-button-color-hover: var(--border-color-hover);
|
|
487
|
-
/*Deprecated v16.x.x utilizar --border-color-hover*/
|
|
488
|
-
|
|
489
|
-
--color-button-background-color-pressed: var(--background-pressed);
|
|
490
|
-
/*Deprecated v16.x.x utilizar --background-pressed*/
|
|
491
|
-
--color-button-border-pressed: var(--border-color-hover);
|
|
492
|
-
/*Deprecated v16.x.x utilizar --border-color-pressed*/
|
|
493
|
-
--color-button-color-pressed: var(--border-color-hover);
|
|
494
|
-
/*Deprecated v16.x.x utilizar --border-color-hover*/
|
|
495
|
-
|
|
496
|
-
--color-button-background-color-disabled: var(--background-color-disabled);
|
|
497
|
-
/*Deprecated v16.x.x utilizar --background-color-disabled*/
|
|
498
|
-
--color-button-border-disabled: var(--color-disabled);
|
|
499
|
-
/*Deprecated v16.x.x utilizar --border-color-disabled*/
|
|
500
|
-
--color-button-color-disabled: var(--color-disabled);
|
|
501
|
-
/*Deprecated v16.x.x utilizar --color-disabled*/
|
|
502
|
-
/**
|
|
503
|
-
* Button Primary
|
|
504
|
-
*/
|
|
505
|
-
--color-button-background-color-primary: var(--color);
|
|
506
|
-
/*Deprecated v16.x.x utilizar --background-color*/
|
|
507
|
-
--color-button-border-primary: var(--border-color);
|
|
508
|
-
/*Deprecated v16.x.x utilizar --border-color*/
|
|
509
|
-
--color-button-color-primary: var(--text-color);
|
|
510
|
-
/*Deprecated v16.x.x utilizar --color*/
|
|
511
|
-
|
|
512
|
-
--color-button-background-color-primary-hover: var(--color-hover);
|
|
513
|
-
/*Deprecated v16.x.x utilizar --color-hover*/
|
|
514
|
-
--color-button-color-primary-hover: var(--text-color);
|
|
515
|
-
/*Deprecated v16.x.x utilizar --text-color*/
|
|
516
|
-
|
|
517
|
-
--color-button-background-color-primary-pressed: var(--color-pressed);
|
|
518
|
-
/*Deprecated v16.x.x utilizar --color-pressed*/
|
|
519
|
-
--color-button-color-primary-pressed: var(--text-color);
|
|
520
|
-
/*Deprecated v16.x.x utilizar --color-pressed*/
|
|
521
|
-
|
|
522
|
-
--color-button-background-color-primary-disabled: var(--color-disabled);
|
|
523
|
-
/*Deprecated v16.x.x utilizar --background-color-disabled*/
|
|
524
|
-
--color-button-color-primary-disabled: var(--text-color-disabled);
|
|
525
|
-
/*Deprecated v16.x.x utilizar --color-disabled*/
|
|
526
|
-
|
|
527
|
-
/**
|
|
528
|
-
* Button Danger primary
|
|
529
|
-
*/
|
|
530
|
-
--color-button-primary-background-color-danger: var(--color-button-danger);
|
|
531
|
-
/*Deprecated v16.x.x utilizar --background-color-danger*/
|
|
532
|
-
--color-button-primary-background-color-danger-hover: var(--color-danger-hover);
|
|
533
|
-
/*Deprecated v16.x.x utilizar --color-danger-hover*/
|
|
534
|
-
--color-button-primary-background-color-danger-pressed: var(--color-danger-pressed);
|
|
535
|
-
/*Deprecated v16.x.x utilizar --background-color-danger-pressed*/
|
|
536
|
-
|
|
537
|
-
/**
|
|
538
|
-
* Button Danger secondary
|
|
539
|
-
*/
|
|
540
|
-
--color-button-background-color-danger: var(--background-color-button-danger);
|
|
541
|
-
/*Deprecated v16.x.x utilizar --background-color-danger*/
|
|
542
|
-
--color-button-border-danger: var(--color-button-danger);
|
|
543
|
-
/*Deprecated v16.x.x utilizar --border-color-danger*/
|
|
544
|
-
--color-button-color-danger: var(--color-button-danger);
|
|
545
|
-
/*Deprecated v16.x.x utilizar --color-danger*/
|
|
546
|
-
|
|
547
|
-
--color-button-background-color-danger-hover: var(--background-danger-hover);
|
|
548
|
-
/*Deprecated v16.x.x utilizar --background-danger-hover*/
|
|
549
|
-
--color-button-border-danger-hover: var(--border-color-danger-hover);
|
|
550
|
-
/*Deprecated v16.x.x utilizar --border-color-danger-hover*/
|
|
551
|
-
--color-button-color-danger-hover: var(--border-color-danger-hover);
|
|
552
|
-
/*Deprecated v16.x.x utilizar --color-danger-hover*/
|
|
553
|
-
|
|
554
|
-
--color-button-background-color-danger-pressed: var(--background-danger-pressed);
|
|
555
|
-
/*Deprecated v16.x.x utilizar --background-danger-pressed*/
|
|
556
|
-
--color-button-border-danger-pressed: var(--border-color-danger-hover);
|
|
557
|
-
/*Deprecated v16.x.x utilizar --border-color-danger-hover*/
|
|
558
|
-
--color-button-color-danger-pressed: var(--border-color-danger-hover);
|
|
559
|
-
/*Deprecated v16.x.x utilizar --border-color-danger-hover*/
|
|
560
|
-
|
|
561
|
-
/**
|
|
562
|
-
* Button Link
|
|
563
|
-
*/
|
|
564
|
-
--color-button-background-color-link: var(--background-color);
|
|
565
|
-
/*Deprecated v16.x.x utilizar --background-color*/
|
|
566
|
-
--color-button-color-link: var(--color);
|
|
567
|
-
/*Deprecated v16.x.x utilizar --color*/
|
|
568
|
-
--color-button-border-color-link: var(--border-color);
|
|
569
|
-
/*Deprecated v16.x.x utilizar --border-color*/
|
|
570
|
-
|
|
571
|
-
--color-button-background-color-link-hover: var(--background-hover);
|
|
572
|
-
/*Deprecated v16.x.x utilizar --background-color-hover*/
|
|
573
|
-
--color-button-color-link-hover: var(--border-color-hover);
|
|
574
|
-
/*Deprecated v16.x.x utilizar --border-color-hover*/
|
|
575
|
-
|
|
576
|
-
--color-button-background-color-link-pressed: var(--background-color-pressed);
|
|
577
|
-
/*Deprecated v16.x.x utilizar --background-color-pressed*/
|
|
578
|
-
--color-button-color-link-pressed: var(--color-pressed);
|
|
579
|
-
/*Deprecated v16.x.x utilizar --color-pressed*/
|
|
580
|
-
|
|
581
|
-
--color-button-background-color-link-disabled: var(--background-color-disabled);
|
|
582
|
-
/*Deprecated v16.x.x utilizar --background-color-disabled*/
|
|
583
|
-
--color-button-color-link-disabled: var(--color-disabled);
|
|
584
|
-
/*Deprecated v16.x.x utilizar --color-disabled*/
|
|
585
|
-
|
|
586
368
|
/*------------------------------------*\
|
|
587
|
-
|
|
588
|
-
|
|
589
|
-
|
|
590
|
-
--color-badge-color: var(--color-white);
|
|
591
|
-
|
|
592
|
-
/*------------------------------------*\
|
|
593
|
-
BREADCRUMB
|
|
594
|
-
\*------------------------------------*/
|
|
369
|
+
BADGE
|
|
370
|
+
\*------------------------------------*/
|
|
371
|
+
--color-badge-color: var(--color-neutral-light-00);
|
|
595
372
|
}
|
|
596
373
|
|
|
374
|
+
/*------------------------------------*\
|
|
375
|
+
BREADCRUMB
|
|
376
|
+
\*------------------------------------*/
|
|
597
377
|
po-breadcrumb {
|
|
598
378
|
--font-family: var(--font-family-theme);
|
|
599
379
|
--color-icon: var(--color-neutral-mid-60);
|
|
600
380
|
--color-current-page: var(--color-neutral-mid-60);
|
|
601
|
-
--color: var(--color-
|
|
381
|
+
--color: var(--color-action-default);
|
|
602
382
|
}
|
|
603
383
|
|
|
604
384
|
:root {
|
|
605
|
-
--color-breadcrumb-color-item: var(--color); /*Deprecated
|
|
385
|
+
--color-breadcrumb-color-item: var(--color); /*Deprecated v18.x.x utilizar --color */
|
|
606
386
|
|
|
607
387
|
/*------------------------------------*\
|
|
608
|
-
|
|
609
|
-
|
|
610
|
-
--color-button-group-background-selected: var(--color-
|
|
611
|
-
--color-button-group-border-selected: var(--color-
|
|
612
|
-
--color-button-group-color-selected: var(--color-
|
|
388
|
+
BUTTON GROUP
|
|
389
|
+
\*------------------------------------*/
|
|
390
|
+
--color-button-group-background-selected: var(--color-brand-01-darker);
|
|
391
|
+
--color-button-group-border-selected: var(--color-brand-01-darker);
|
|
392
|
+
--color-button-group-color-selected: var(--color-neutral-light-00);
|
|
613
393
|
|
|
614
|
-
--color-button-group-background-color-neutral-hover: var(--color-
|
|
615
|
-
--color-button-group-border-neutral-hover: var(--color-
|
|
616
|
-
--color-button-group-color-neutral-hover: var(--color-
|
|
394
|
+
--color-button-group-background-color-neutral-hover: var(--color-brand-01-dark);
|
|
395
|
+
--color-button-group-border-neutral-hover: var(--color-brand-01-dark);
|
|
396
|
+
--color-button-group-color-neutral-hover: var(--color-neutral-light-00);
|
|
617
397
|
|
|
618
|
-
--color-button-group-background-color-neutral-pressed: var(--color-
|
|
619
|
-
--color-button-group-border-neutral-pressed: var(--color-
|
|
620
|
-
--color-button-group-color-neutral-pressed: var(--color-
|
|
398
|
+
--color-button-group-background-color-neutral-pressed: var(--color-brand-01-darker);
|
|
399
|
+
--color-button-group-border-neutral-pressed: var(--color-brand-01-darker);
|
|
400
|
+
--color-button-group-color-neutral-pressed: var(--color-neutral-light-00);
|
|
621
401
|
|
|
622
402
|
--color-button-group-background-color-neutral-disabled: var(--color-transparent);
|
|
623
|
-
--color-button-group-border-neutral-disabled: var(--color-neutral-light-
|
|
624
|
-
--color-button-group-color-neutral-disabled: var(--color-neutral-light-
|
|
403
|
+
--color-button-group-border-neutral-disabled: var(--color-neutral-light-30);
|
|
404
|
+
--color-button-group-color-neutral-disabled: var(--color-neutral-light-30);
|
|
625
405
|
|
|
626
406
|
/*------------------------------------*\
|
|
627
|
-
|
|
628
|
-
|
|
629
|
-
|
|
630
|
-
--color-calendar-background-color: var(--color-white);
|
|
407
|
+
CALENDAR
|
|
408
|
+
\*------------------------------------*/
|
|
409
|
+
--color-calendar-background-color: var(--color-neutral-light-00);
|
|
631
410
|
--color-calendar-arrow: var(--color-primary);
|
|
632
411
|
--color-calendar-title: var(--color-primary);
|
|
633
|
-
--color-calender-color-content-label: var(--color-neutral-
|
|
412
|
+
--color-calender-color-content-label: var(--color-neutral-mid-40);
|
|
634
413
|
|
|
635
414
|
--color-calendar-background-color-box-background-normal: var(--color-transparent);
|
|
636
|
-
--color-calendar-background-color-box-background-hover: var(--color-neutral-light-
|
|
637
|
-
--color-calendar-background-color-box-background-disabled: var(--color-neutral-light-
|
|
638
|
-
--color-calendar-background-color-box-background-active: var(--color-
|
|
415
|
+
--color-calendar-background-color-box-background-hover: var(--color-neutral-light-20);
|
|
416
|
+
--color-calendar-background-color-box-background-disabled: var(--color-neutral-light-30);
|
|
417
|
+
--color-calendar-background-color-box-background-active: var(--color-brand-03-base);
|
|
639
418
|
--color-calendar-background-color-mobile-overlay: var(--color-secondary-dark-60-alpha-70);
|
|
640
|
-
--color-calendar-text-box-background-active: var(--color-neutral-dark-
|
|
419
|
+
--color-calendar-text-box-background-active: var(--color-neutral-dark-90);
|
|
641
420
|
|
|
642
|
-
--color-calendar-background-color-box-background-selected: var(--color-
|
|
421
|
+
--color-calendar-background-color-box-background-selected: var(--color-brand-03-base);
|
|
643
422
|
--color-calendar-background-color-box-background-range: var(--color-primary-light-80);
|
|
644
|
-
--color-calendar-background-color-box-background-today-hover: var(--color-neutral-light-
|
|
423
|
+
--color-calendar-background-color-box-background-today-hover: var(--color-neutral-light-20);
|
|
645
424
|
|
|
646
425
|
--color-calendar-background-color-border-today: var(--color-primary);
|
|
647
426
|
|
|
648
|
-
--color-calendar-color-box-foreground: var(--color-neutral);
|
|
649
|
-
--color-calendar-color-box-foreground-selected: var(--color-neutral-dark-
|
|
650
|
-
--color-calendar-color-box-foreground-pressed: var(--color-neutral-dark-
|
|
427
|
+
--color-calendar-color-box-foreground: var(--color-neutral-dark-70);
|
|
428
|
+
--color-calendar-color-box-foreground-selected: var(--color-neutral-dark-90);
|
|
429
|
+
--color-calendar-color-box-foreground-pressed: var(--color-neutral-dark-90);
|
|
651
430
|
--color-calendar-color-box-foreground-range: var(--color-primary);
|
|
652
431
|
--color-calendar-color-box-foreground-today: var(--color-primary);
|
|
653
|
-
--color-calendar-color-box-foreground-disabled: var(--color-neutral-light-
|
|
432
|
+
--color-calendar-color-box-foreground-disabled: var(--color-neutral-light-20);
|
|
654
433
|
|
|
655
434
|
/*------------------------------------*\
|
|
656
|
-
|
|
657
|
-
|
|
658
|
-
|
|
659
|
-
--color-chart-background-color: var(--color-white);
|
|
435
|
+
CHART
|
|
436
|
+
\*------------------------------------*/
|
|
437
|
+
--color-chart-background-color: var(--color-neutral-light-00);
|
|
660
438
|
--color-chart-legend-wrapper-scrollbar: var(--color-primary-alpha-50);
|
|
661
|
-
--color-chart-axis-stroke: var(--color-neutral-light-
|
|
662
|
-
--color-chart-legend-text: var(--color-neutral);
|
|
663
|
-
--color-chart-axis-label-text: var(--color-neutral-dark-
|
|
664
|
-
|
|
665
|
-
/**
|
|
666
|
-
* Chart Types
|
|
667
|
-
*/
|
|
439
|
+
--color-chart-axis-stroke: var(--color-neutral-light-20);
|
|
440
|
+
--color-chart-legend-text: var(--color-neutral-dark-70);
|
|
441
|
+
--color-chart-axis-label-text: var(--color-neutral-dark-90);
|
|
668
442
|
|
|
669
|
-
|
|
443
|
+
/* Chart Types */
|
|
444
|
+
--color-chart-line-point-fill: var(--color-neutral-light-00);
|
|
670
445
|
}
|
|
671
446
|
|
|
672
447
|
/*------------------------------------*\
|
|
673
|
-
|
|
674
|
-
|
|
675
|
-
|
|
448
|
+
CHECKBOX
|
|
449
|
+
\*------------------------------------*/
|
|
676
450
|
po-checkbox {
|
|
677
|
-
--border-color: var(--color-neutral);
|
|
678
|
-
--color-unchecked: var(--color-
|
|
451
|
+
--border-color: var(--color-neutral-dark-70);
|
|
452
|
+
--color-unchecked: var(--color-neutral-light-00);
|
|
679
453
|
|
|
680
|
-
--color-checked: var(--color-
|
|
454
|
+
--color-checked: var(--color-action-default);
|
|
681
455
|
|
|
682
456
|
--color-hover: var(--color-action-hover);
|
|
683
|
-
--shadow-color-hover: var(--color-
|
|
457
|
+
--shadow-color-hover: var(--color-brand-01-lighter);
|
|
684
458
|
|
|
685
|
-
--outline-color-focused: var(--color-
|
|
459
|
+
--outline-color-focused: var(--color-action-focus);
|
|
686
460
|
|
|
687
461
|
--color-unchecked-disabled: var(--color-action-disabled);
|
|
688
462
|
|
|
689
|
-
--color-checked-disabled: var(--color-neutral);
|
|
463
|
+
--color-checked-disabled: var(--color-neutral-dark-70);
|
|
690
464
|
}
|
|
691
465
|
|
|
692
466
|
:root {
|
|
693
467
|
--color-checkbox-background-color: var(--color-unchecked);
|
|
694
|
-
/* Deprecated
|
|
468
|
+
/* Deprecated v17.x.x utilizar --color-unchecked */
|
|
695
469
|
--color-checkbox-background-color-active: var(--color-checked);
|
|
696
|
-
/* Deprecated
|
|
470
|
+
/* Deprecated v17.x.x utilizar --color-checked */
|
|
697
471
|
--color-checkbox-background-color-disabled: var(--color-unchecked-disabled);
|
|
698
|
-
/* Deprecated
|
|
472
|
+
/* Deprecated v17.x.x utilizar --color-unchecked-disabled */
|
|
699
473
|
--color-checkbox-box-shadow-color-focusable: var(--outline-color-focused);
|
|
700
|
-
/* Deprecated
|
|
474
|
+
/* Deprecated v17.x.x utilizar --outline-color-focused */
|
|
701
475
|
|
|
702
476
|
--color-checkbox-border-input: var(--border-color);
|
|
703
|
-
/* Deprecated
|
|
477
|
+
/* Deprecated v17.x.x utilizar --border-color */
|
|
704
478
|
--color-checkbox-border-input-active: var(--color-hover);
|
|
705
|
-
/* Deprecated
|
|
479
|
+
/* Deprecated v17.x.x utilizar --border-color */
|
|
706
480
|
--color-checkbox-border-input-disabled: var(--color-checked-disabled);
|
|
707
|
-
/* Deprecated
|
|
708
|
-
--color-checkbox-border-input-invalid: var(--color-
|
|
709
|
-
/* Deprecated
|
|
481
|
+
/* Deprecated v17.x.x utilizar --color-hover */
|
|
482
|
+
--color-checkbox-border-input-invalid: var(--color-feedback-negative-base);
|
|
483
|
+
/* Deprecated v17.x.x utilizar --color-danger */
|
|
710
484
|
--color-checkbox-background-color-active-disabled: var(--color-checked-disabled);
|
|
711
|
-
/* Deprecated
|
|
485
|
+
/* Deprecated v17.x.x utilizar --color-checked-disabled */
|
|
712
486
|
--color-checkbox-hover-active: var(--shadow-color-hover);
|
|
713
|
-
/* Deprecated
|
|
487
|
+
/* Deprecated v17.x.x utilizar --shadow-color-hover */
|
|
714
488
|
|
|
715
489
|
/*------------------------------------*\
|
|
716
|
-
|
|
717
|
-
|
|
718
|
-
|
|
719
|
-
--color-checkbox-group-border-input-invalid: var(--color-danger);
|
|
490
|
+
CHECKBOX GROUP
|
|
491
|
+
\*------------------------------------*/
|
|
492
|
+
--color-checkbox-group-border-input-invalid: var(--color-feedback-negative-base);
|
|
720
493
|
}
|
|
721
|
-
|
|
722
494
|
/*------------------------------------*\
|
|
723
495
|
COMBO
|
|
724
496
|
\*------------------------------------*/
|
|
725
|
-
|
|
726
497
|
po-combo {
|
|
727
498
|
--font-family: var(--font-family-theme);
|
|
728
499
|
--font-size: var(--font-size-default);
|
|
729
|
-
--text-color: var(--color-neutral-dark-
|
|
730
|
-
--text-color-placeholder: var(--color-neutral-light-
|
|
500
|
+
--text-color: var(--color-neutral-dark-90);
|
|
501
|
+
--text-color-placeholder: var(--color-neutral-light-30);
|
|
731
502
|
--color: var(--color-neutral-dark-70);
|
|
732
|
-
--background: var(--color-neutral-light-
|
|
503
|
+
--background: var(--color-neutral-light-05);
|
|
733
504
|
--border-radius: var(--border-width-lg);
|
|
734
505
|
|
|
735
|
-
--color-hover: var(--color-
|
|
506
|
+
--color-hover: var(--color-action-hover);
|
|
736
507
|
--background-hover: var(--color-brand-01-lightest);
|
|
737
508
|
|
|
738
|
-
--color-focused: var(--color-
|
|
739
|
-
--outline-color-focused: var(--color-
|
|
509
|
+
--color-focused: var(--color-action-default);
|
|
510
|
+
--outline-color-focused: var(--color-action-focus);
|
|
740
511
|
|
|
741
|
-
--color-disabled: var(--color-neutral-light-
|
|
742
|
-
--background-disabled: var(--color-neutral-light-
|
|
512
|
+
--color-disabled: var(--color-neutral-light-30);
|
|
513
|
+
--background-disabled: var(--color-neutral-light-20);
|
|
743
514
|
|
|
744
515
|
--color-error: var(--color-feedback-negative-base);
|
|
745
516
|
|
|
@@ -748,8 +519,8 @@ po-combo {
|
|
|
748
519
|
}
|
|
749
520
|
|
|
750
521
|
/*------------------------------------*\
|
|
751
|
-
|
|
752
|
-
|
|
522
|
+
CONTAINER
|
|
523
|
+
\*------------------------------------*/
|
|
753
524
|
po-container {
|
|
754
525
|
--border-radius: var(--border-radius-md);
|
|
755
526
|
--background: var(--color-neutral-light-00);
|
|
@@ -762,12 +533,12 @@ po-container {
|
|
|
762
533
|
DATEPICKER RANGE
|
|
763
534
|
\*------------------------------------*/
|
|
764
535
|
:root {
|
|
765
|
-
--color-datepicker-range-background-color-disabled: var(--color-neutral-light-
|
|
766
|
-
--color-datepicker-range-border-text: var(--color-neutral-light-
|
|
767
|
-
--color-datepicker-range-border-text-error: var(--color-
|
|
768
|
-
--color-datepicker-range-color-disabled: var(--color-neutral-light-
|
|
769
|
-
--color-datepicker-range-color-focused: var(--color-
|
|
770
|
-
--color-datepicker-range-color-text-error: var(--color-
|
|
536
|
+
--color-datepicker-range-background-color-disabled: var(--color-neutral-light-20);
|
|
537
|
+
--color-datepicker-range-border-text: var(--color-neutral-light-30);
|
|
538
|
+
--color-datepicker-range-border-text-error: var(--color-feedback-negative-base);
|
|
539
|
+
--color-datepicker-range-color-disabled: var(--color-neutral-light-30);
|
|
540
|
+
--color-datepicker-range-color-focused: var(--color-action-default);
|
|
541
|
+
--color-datepicker-range-color-text-error: var(--color-feedback-negative-base);
|
|
771
542
|
}
|
|
772
543
|
|
|
773
544
|
/*------------------------------------*\
|
|
@@ -780,109 +551,81 @@ po-disclaimer {
|
|
|
780
551
|
--font-size: var(--font-size-sm);
|
|
781
552
|
--line-height: var(--line-height-sm);
|
|
782
553
|
|
|
783
|
-
--color-neutral: var(--color-neutral-light-
|
|
784
|
-
--text-color-neutral: var(--color-neutral-dark-
|
|
554
|
+
--color-neutral: var(--color-neutral-light-10);
|
|
555
|
+
--text-color-neutral: var(--color-neutral-dark-80);
|
|
785
556
|
|
|
786
557
|
--color: var(--color-brand-01-lightest);
|
|
787
|
-
--border-color: var(--color-
|
|
788
|
-
--color-icon: var(--color-
|
|
558
|
+
--border-color: var(--color-brand-01-lighter);
|
|
559
|
+
--color-icon: var(--color-action-default);
|
|
789
560
|
--text-color: var(--color-neutral-dark-80);
|
|
790
561
|
|
|
791
|
-
--color-hover: var(--color-
|
|
792
|
-
--outline-color-focused: var(--color-
|
|
562
|
+
--color-hover: var(--color-brand-01-lighter);
|
|
563
|
+
--outline-color-focused: var(--color-brand-01-darkest);
|
|
793
564
|
}
|
|
794
565
|
|
|
795
566
|
:root {
|
|
796
|
-
--color-disclaimer-background-color-label: var(--color); /*Deprecated v16.x.x utilizar --color */
|
|
797
|
-
--color-disclaimer-background-color-label-danger: var(
|
|
798
|
-
--color-danger-light-05
|
|
799
|
-
); /*Deprecated v16.x.x utilizar --color-danger-light-05 */
|
|
800
|
-
|
|
801
|
-
--color-disclaimer-color-text: var(--text-color); /*Deprecated v16.x.x utilizar --text-color */
|
|
802
|
-
--color-disclaimer-color-text-danger: var(
|
|
803
|
-
--color-feedback-negative-darker
|
|
804
|
-
); /*Deprecated v16.x.x utilizar --color-feedback-negative-darker */
|
|
805
|
-
|
|
806
|
-
--color-disclaimer-background-color-remove: var(--color); /*Deprecated v16.x.x utilizar --color */
|
|
807
|
-
--color-disclaimer-background-color-danger-remove: var(
|
|
808
|
-
--color-danger-light-05
|
|
809
|
-
); /*Deprecated v16.x.x utilizar --color-danger-light-05 */
|
|
810
|
-
|
|
811
567
|
/*------------------------------------*\
|
|
812
|
-
|
|
813
|
-
|
|
568
|
+
DISCLAIMER GROUP
|
|
569
|
+
\*------------------------------------*/
|
|
814
570
|
|
|
815
|
-
--color-disclaimer-group-background-color: var(--color-
|
|
816
|
-
--color-disclaimer-group-border-color: var(--color-neutral-light-
|
|
817
|
-
--color-disclaimer-group-font-title: var(--color-neutral);
|
|
571
|
+
--color-disclaimer-group-background-color: var(--color-neutral-light-00);
|
|
572
|
+
--color-disclaimer-group-border-color: var(--color-neutral-light-10);
|
|
573
|
+
--color-disclaimer-group-font-title: var(--color-neutral-dark-70);
|
|
818
574
|
}
|
|
819
575
|
|
|
576
|
+
/*------------------------------------*\
|
|
577
|
+
DIVIDER
|
|
578
|
+
\*------------------------------------*/
|
|
820
579
|
po-divider {
|
|
821
|
-
--color: var(--color-neutral-
|
|
580
|
+
--color: var(--color-neutral-mid-40);
|
|
822
581
|
--stroke-linecap: round;
|
|
823
582
|
}
|
|
824
583
|
|
|
825
|
-
|
|
826
|
-
|
|
827
|
-
|
|
828
|
-
\*------------------------------------*/
|
|
829
|
-
|
|
830
|
-
--color-divider-label-color: var(--color-neutral-dark-60);
|
|
831
|
-
--color-divider-line-color: var(--color); /*Deprecated v16.x.x utilizar --color*/
|
|
832
|
-
}
|
|
833
|
-
|
|
584
|
+
/*------------------------------------*\
|
|
585
|
+
DROPDOWN
|
|
586
|
+
\*------------------------------------*/
|
|
834
587
|
po-dropdown {
|
|
835
588
|
--font-family: var(--font-family-theme);
|
|
836
589
|
--font-size: var(--font-size-default);
|
|
837
590
|
--font-weight: var(--font-weight-bold);
|
|
838
591
|
--line-height: var(--line-height-none);
|
|
839
|
-
--color: var(--color-
|
|
592
|
+
--color: var(--color-action-default);
|
|
840
593
|
--border-radius: var(--border-radius-md);
|
|
841
594
|
--border-width: var(--border-width-md);
|
|
842
595
|
--padding: 0 1em;
|
|
843
596
|
|
|
844
597
|
/* hover */
|
|
845
|
-
--color-hover: var(--color-
|
|
846
|
-
--background-hover: var(--color-
|
|
598
|
+
--color-hover: var(--color-brand-01-darkest);
|
|
599
|
+
--background-hover: var(--color-brand-01-lighter);
|
|
847
600
|
|
|
848
601
|
/* focus */
|
|
849
|
-
--outline-color-focused: var(--color-
|
|
602
|
+
--outline-color-focused: var(--color-action-focus);
|
|
850
603
|
|
|
851
604
|
/* pressed */
|
|
852
|
-
--background-pressed: var(--color-
|
|
605
|
+
--background-pressed: var(--color-brand-01-light);
|
|
853
606
|
|
|
854
607
|
/* disabled */
|
|
855
608
|
--color-disabled: var(--color-action-disabled);
|
|
856
609
|
}
|
|
857
610
|
|
|
858
611
|
:root {
|
|
859
|
-
|
|
860
|
-
|
|
861
|
-
\*------------------------------------*/
|
|
862
|
-
|
|
863
|
-
--color-dropdown-button-color: var(--color); /* Deprecated v16.x.x utilizar --color */
|
|
864
|
-
--color-dropdown-button-border-color: var(--color); /* Deprecated v16.x.x utilizar --color */
|
|
612
|
+
--color-dropdown-button-color: var(--color); /* Deprecated v17.x.x utilizar --color */
|
|
613
|
+
--color-dropdown-button-border-color: var(--color); /* Deprecated v17.x.x utilizar --color */
|
|
865
614
|
|
|
866
|
-
--color-dropdown-button-color-hover: var(--color-hover); /* Deprecated
|
|
867
|
-
--color-dropdown-button-border-color-hover: var(--color-hover); /* Deprecated
|
|
615
|
+
--color-dropdown-button-color-hover: var(--color-hover); /* Deprecated v17.x.x utilizar --color-hover */
|
|
616
|
+
--color-dropdown-button-border-color-hover: var(--color-hover); /* Deprecated v17.x.x utilizar --color-hover */
|
|
868
617
|
|
|
869
618
|
--color-dropdown-button-color-disabled: var(
|
|
870
619
|
--color-disabled
|
|
871
|
-
); /* Deprecated
|
|
620
|
+
); /* Deprecated v17.x.x utilizar --color-action-disabled */
|
|
872
621
|
--color-dropdown-button-border-color-disabled: var(
|
|
873
622
|
--color-disabled
|
|
874
|
-
); /* Deprecated
|
|
875
|
-
|
|
876
|
-
/*------------------------------------*\
|
|
877
|
-
FIELD CONTAINER
|
|
878
|
-
\*------------------------------------*/
|
|
879
|
-
|
|
880
|
-
--color-field-container-color-title: var(--text-color);
|
|
881
|
-
/* Deprecated v16.x.x utilizar --text-color */
|
|
882
|
-
--color-field-container-color-opcional: var(--text-color-required);
|
|
883
|
-
/* Deprecated v16.x.x utilizar --text-color-required */
|
|
623
|
+
); /* Deprecated v17.x.x utilizar --color-action-disabled */
|
|
884
624
|
}
|
|
885
625
|
|
|
626
|
+
/*------------------------------------*\
|
|
627
|
+
FIELD CONTAINER BOTTOM
|
|
628
|
+
\*------------------------------------*/
|
|
886
629
|
po-field-container-bottom {
|
|
887
630
|
--font-family: var(--font-family-theme);
|
|
888
631
|
--font-size: var(--font-size-sm);
|
|
@@ -896,38 +639,31 @@ po-field-container-bottom {
|
|
|
896
639
|
}
|
|
897
640
|
|
|
898
641
|
:root {
|
|
899
|
-
/*------------------------------------*\
|
|
900
|
-
FIELD CONTAINER BOTTOM
|
|
901
|
-
\*------------------------------------*/
|
|
902
|
-
|
|
903
642
|
--color-field-container-bottom-color-text-error: var(--text-color-error);
|
|
904
643
|
--color-field-container-color-help: var(--text-color-help);
|
|
905
644
|
|
|
906
645
|
/*------------------------------------*\
|
|
907
|
-
|
|
908
|
-
|
|
909
|
-
|
|
646
|
+
FIELD ICON
|
|
647
|
+
\*------------------------------------*/
|
|
910
648
|
--color-field-icon-color: var(--color-primary);
|
|
911
|
-
--color-field-icon-color-error: var(--color-
|
|
912
|
-
--color-field-icon-color-disabled: var(--color-neutral-light-
|
|
649
|
+
--color-field-icon-color-error: var(--color-feedback-negative-base);
|
|
650
|
+
--color-field-icon-color-disabled: var(--color-neutral-light-30);
|
|
913
651
|
|
|
914
652
|
/*------------------------------------*\
|
|
915
|
-
|
|
916
|
-
|
|
917
|
-
|
|
918
|
-
--color-gauge-
|
|
919
|
-
--color-gauge-description-
|
|
920
|
-
--color-gauge-description-bottom-focus: var(--color-secondary);
|
|
653
|
+
GAUGE
|
|
654
|
+
\*------------------------------------*/
|
|
655
|
+
--color-gauge-base-color: var(--color-neutral-light-20);
|
|
656
|
+
--color-gauge-description-text-color: var(--color-neutral-dark-70);
|
|
657
|
+
--color-gauge-description-bottom-focus: var(--color-action-default);
|
|
921
658
|
--color-gauge-legend-scrollbar: var(--color-primary-alpha-50);
|
|
922
|
-
--color-gauge-legend-text: var(--color-neutral);
|
|
923
|
-
--color-gauge-pointer-color: var(--color-neutral);
|
|
659
|
+
--color-gauge-legend-text: var(--color-neutral-dark-70);
|
|
660
|
+
--color-gauge-pointer-color: var(--color-neutral-dark-70);
|
|
924
661
|
|
|
925
662
|
/*------------------------------------*\
|
|
926
|
-
|
|
927
|
-
|
|
928
|
-
|
|
929
|
-
--color-info-color-text-
|
|
930
|
-
--color-info-color-text-value: var(--color-neutral-dark-60);
|
|
663
|
+
INFO
|
|
664
|
+
\*------------------------------------*/
|
|
665
|
+
--color-info-color-text-label: var(--color-neutral-dark-70);
|
|
666
|
+
--color-info-color-text-value: var(--color-neutral-dark-90);
|
|
931
667
|
|
|
932
668
|
--color-info-color-link: var(--color-primary);
|
|
933
669
|
--color-info-color-link-hover: var(--color-primary-dark-20);
|
|
@@ -937,7 +673,6 @@ po-field-container-bottom {
|
|
|
937
673
|
/*------------------------------------*\
|
|
938
674
|
INPUT
|
|
939
675
|
\*------------------------------------*/
|
|
940
|
-
|
|
941
676
|
po-input,
|
|
942
677
|
po-url,
|
|
943
678
|
po-login,
|
|
@@ -952,17 +687,17 @@ div.po-lookup-filter-content input.po-input,
|
|
|
952
687
|
input.po-input {
|
|
953
688
|
--font-family: var(--font-family-theme);
|
|
954
689
|
--font-size: var(--font-size-default);
|
|
955
|
-
--text-color-placeholder: var(--color-neutral-light-
|
|
690
|
+
--text-color-placeholder: var(--color-neutral-light-30);
|
|
956
691
|
--color: var(--color-neutral-dark-70);
|
|
957
|
-
--background: var(--color-neutral-light-
|
|
692
|
+
--background: var(--color-neutral-light-05);
|
|
958
693
|
--padding: 0 0.5rem;
|
|
959
|
-
--text-color: var(--color-neutral-dark-
|
|
960
|
-
--color-hover: var(--color-
|
|
694
|
+
--text-color: var(--color-neutral-dark-90);
|
|
695
|
+
--color-hover: var(--color-brand-01-dark);
|
|
961
696
|
--background-hover: var(--color-brand-01-lightest);
|
|
962
|
-
--color-focused: var(--color-
|
|
963
|
-
--outline-color-focused: var(--color-
|
|
964
|
-
--color-disabled: var(--color-neutral-light-
|
|
965
|
-
--background-disabled: var(--color-neutral-light-
|
|
697
|
+
--color-focused: var(--color-action-default);
|
|
698
|
+
--outline-color-focused: var(--color-action-focus);
|
|
699
|
+
--color-disabled: var(--color-neutral-light-30);
|
|
700
|
+
--background-disabled: var(--color-neutral-light-20);
|
|
966
701
|
--text-color-disabled: var(--color-neutral-dark-70);
|
|
967
702
|
}
|
|
968
703
|
|
|
@@ -971,12 +706,44 @@ input.po-input {
|
|
|
971
706
|
--color-input-border-text: var(--color-disabled);
|
|
972
707
|
--color-input-border-text-disabled: var(--background-disabled);
|
|
973
708
|
--color-input-border-text-focusable: var(--color-focused);
|
|
974
|
-
--color-input-border-text-error: var(--color-
|
|
709
|
+
--color-input-border-text-error: var(--color-feedback-negative-base);
|
|
975
710
|
--color-input-color-disabled: var(--text-color-disabled);
|
|
976
|
-
--color-input-text-error: var(--color-
|
|
711
|
+
--color-input-text-error: var(--color-feedback-negative-base);
|
|
977
712
|
--color-input-text-placeholder: var(--text-color-placeholder);
|
|
978
713
|
}
|
|
979
714
|
|
|
715
|
+
/*------------------------------------*\
|
|
716
|
+
ITEM LIST
|
|
717
|
+
\*------------------------------------*/
|
|
718
|
+
po-item-list {
|
|
719
|
+
--font-family: var(--font-family-theme);
|
|
720
|
+
--font-size: var(--font-size-default);
|
|
721
|
+
--line-height: var(--line-height-md);
|
|
722
|
+
|
|
723
|
+
/* action */
|
|
724
|
+
--font-weight: var(--font-weight-bold);
|
|
725
|
+
--color: var(--color-action-default);
|
|
726
|
+
|
|
727
|
+
--color-hover: var(--color-brand-01-darkest);
|
|
728
|
+
--background-hover: var(--color-brand-01-lighter);
|
|
729
|
+
|
|
730
|
+
--outline-color-focused: var(--color-action-focus);
|
|
731
|
+
|
|
732
|
+
--background-pressed: var(--color-brand-01-light);
|
|
733
|
+
|
|
734
|
+
--color-disabled: var(--color-action-disabled);
|
|
735
|
+
|
|
736
|
+
/* option e check */
|
|
737
|
+
--color-option: var(--color-neutral-dark-90);
|
|
738
|
+
|
|
739
|
+
--font-weight-selected: var(--font-weight-bold);
|
|
740
|
+
--background-selected: var(--color-brand-01-lightest);
|
|
741
|
+
}
|
|
742
|
+
|
|
743
|
+
po-item-list:is([p-type='option'], [p-type='check']) {
|
|
744
|
+
--font-weight: var(--font-weight-normal);
|
|
745
|
+
}
|
|
746
|
+
|
|
980
747
|
/*------------------------------------*\
|
|
981
748
|
LABEL
|
|
982
749
|
\*------------------------------------*/
|
|
@@ -985,7 +752,7 @@ po-label {
|
|
|
985
752
|
--font-family: var(--font-family-theme);
|
|
986
753
|
--font-size: var(--font-size-default);
|
|
987
754
|
--line-height: var(--line-height-md);
|
|
988
|
-
--text-color: var(--color-neutral-dark-
|
|
755
|
+
--text-color: var(--color-neutral-dark-90);
|
|
989
756
|
|
|
990
757
|
/* field */
|
|
991
758
|
--font-weight-field: var(--font-weight-semibold);
|
|
@@ -1002,7 +769,6 @@ po-label {
|
|
|
1002
769
|
/*------------------------------------*\
|
|
1003
770
|
LINK
|
|
1004
771
|
\*------------------------------------*/
|
|
1005
|
-
|
|
1006
772
|
po-link {
|
|
1007
773
|
--font-family: var(--font-family-theme);
|
|
1008
774
|
--text-color: var(--color-action-default);
|
|
@@ -1016,78 +782,64 @@ po-link {
|
|
|
1016
782
|
/*------------------------------------*\
|
|
1017
783
|
LISTBOX
|
|
1018
784
|
\*------------------------------------*/
|
|
1019
|
-
|
|
1020
785
|
po-listbox {
|
|
1021
786
|
--border-radius: var(--border-radius-md);
|
|
1022
787
|
--border-width: var(--border-width-sm);
|
|
1023
|
-
--border-color: var(--color-neutral-light-
|
|
1024
|
-
--background: var(--color-
|
|
788
|
+
--border-color: var(--color-neutral-light-20);
|
|
789
|
+
--background: var(--color-neutral-light-00);
|
|
1025
790
|
--shadow: var(--shadow-md);
|
|
1026
791
|
}
|
|
1027
792
|
|
|
1028
793
|
/*------------------------------------*\
|
|
1029
|
-
|
|
794
|
+
LIST VIEW
|
|
1030
795
|
\*------------------------------------*/
|
|
796
|
+
:root {
|
|
797
|
+
--color-list-view-background-color: var(--color-neutral-light-00);
|
|
798
|
+
--color-list-view-border: var(--color-neutral-light-10);
|
|
799
|
+
--color-list-view-color-primary: var(--color-primary);
|
|
800
|
+
--color-list-view-color-primary-hover: var(--color-primary-dark-20);
|
|
801
|
+
--color-list-view-color-select-all-label: var(--color-neutral-dark-70);
|
|
802
|
+
}
|
|
1031
803
|
|
|
1032
|
-
|
|
804
|
+
/*------------------------------------*\
|
|
805
|
+
LOADING
|
|
806
|
+
\*------------------------------------*/
|
|
807
|
+
po-loading {
|
|
1033
808
|
--font-family: var(--font-family-theme);
|
|
1034
|
-
--font-
|
|
1035
|
-
--
|
|
1036
|
-
|
|
1037
|
-
/* action */
|
|
1038
|
-
--font-weight: var(--font-weight-bold);
|
|
1039
|
-
--color: var(--color-secondary);
|
|
1040
|
-
|
|
1041
|
-
--color-hover: var(--color-secondary-dark-80);
|
|
1042
|
-
--background-hover: var(--color-secondary-light-20);
|
|
1043
|
-
|
|
1044
|
-
--outline-color-focused: var(--color-outline-focused);
|
|
1045
|
-
|
|
1046
|
-
--background-pressed: var(--color-secondary-light-40);
|
|
1047
|
-
|
|
1048
|
-
--color-disabled: var(--color-action-disabled);
|
|
1049
|
-
|
|
1050
|
-
/* option e check */
|
|
1051
|
-
--color-option: var(--color-neutral-dark-60);
|
|
809
|
+
--font-weight: var(--font-weight-normal);
|
|
810
|
+
--text-color: var(--color-neutral-dark-70);
|
|
1052
811
|
|
|
1053
|
-
--
|
|
1054
|
-
--
|
|
812
|
+
--border-radius: var(--border-radius-md);
|
|
813
|
+
--border-width: var(--border-width-sm);
|
|
814
|
+
--border-color: var(--color-neutral-light-20);
|
|
815
|
+
--background: var(--color-neutral-light-00);
|
|
816
|
+
--shadow: var(--shadow-md);
|
|
1055
817
|
}
|
|
1056
818
|
|
|
1057
|
-
po-
|
|
1058
|
-
--
|
|
819
|
+
po-loading-icon {
|
|
820
|
+
--color: var(--color-action-default);
|
|
1059
821
|
}
|
|
1060
822
|
|
|
1061
|
-
/*------------------------------------*\
|
|
1062
|
-
LIST VIEW
|
|
1063
|
-
\*------------------------------------*/
|
|
1064
823
|
:root {
|
|
1065
|
-
--color-
|
|
1066
|
-
--
|
|
1067
|
-
--color-
|
|
1068
|
-
--color-
|
|
1069
|
-
--color-list-view-color-select-all-label: var(--color-neutral);
|
|
1070
|
-
|
|
1071
|
-
/*------------------------------------*\
|
|
1072
|
-
LOADING
|
|
1073
|
-
\*------------------------------------*/
|
|
1074
|
-
--color-loading-color-label: var(--color-neutral);
|
|
1075
|
-
--color-loading-icon-color-neutral: var(--color-neutral-light-80);
|
|
1076
|
-
--color-loading-icon-color-primary: var(--color-primary);
|
|
824
|
+
--color-loading-color-label: var(--text-color);
|
|
825
|
+
/*Deprecated v18.x.x utilizar --text-color*/
|
|
826
|
+
--color-loading-icon-color-neutral: var(--color-neutral-light-20);
|
|
827
|
+
--color-loading-icon-color-primary: var(--color); /*Deprecated v18.x.x utilizar --color*/
|
|
1077
828
|
|
|
1078
829
|
/*------------------------------------*\
|
|
1079
830
|
LOADING OVERLAY
|
|
1080
831
|
\*------------------------------------*/
|
|
1081
832
|
|
|
1082
|
-
--color-loading-overlay-background-color-content: var(--
|
|
1083
|
-
|
|
833
|
+
--color-loading-overlay-background-color-content: var(--background);
|
|
834
|
+
/*Deprecated v18.x.x utilizar --background*/
|
|
835
|
+
--color-loading-overlay-box-shadow-content: var(--shadow);
|
|
836
|
+
/*Deprecated v18.x.x utilizar --shadow*/
|
|
1084
837
|
|
|
1085
838
|
/*------------------------------------*\
|
|
1086
|
-
|
|
839
|
+
LOOKUP
|
|
1087
840
|
\*------------------------------------*/
|
|
1088
|
-
|
|
1089
|
-
--color-lookup-search-
|
|
1090
|
-
--color-lookup-search-border-text: var(--color-neutral-light-60);
|
|
841
|
+
--color-lookup-search-background-color-text: var(--color-neutral-light-00);
|
|
842
|
+
--color-lookup-search-border-text: var(--color-neutral-light-30);
|
|
1091
843
|
--color-lookup-search-border-text-focusable: var(--color-primary);
|
|
1092
844
|
--color-lookup-advanced-search-link-color-text: var(--color-primary);
|
|
1093
845
|
}
|
|
@@ -1097,11 +849,11 @@ po-item-list:is([p-type='option'], [p-type='check']) {
|
|
|
1097
849
|
\*------------------------------------*/
|
|
1098
850
|
po-menu {
|
|
1099
851
|
--border-radius: var(--border-radius-md);
|
|
1100
|
-
--border-color: var(--color-neutral-light-
|
|
852
|
+
--border-color: var(--color-neutral-light-20);
|
|
1101
853
|
--background-color: var(--color-neutral-light-05);
|
|
1102
854
|
|
|
1103
855
|
/* Menu Footer */
|
|
1104
|
-
--color: var(--color-
|
|
856
|
+
--color: var(--color-action-default);
|
|
1105
857
|
--font-size: var(--font-size-default);
|
|
1106
858
|
--line-height: var(--line-height-md);
|
|
1107
859
|
--outline-color-focused: var(--color-action-focus);
|
|
@@ -1116,15 +868,15 @@ po-menu-item {
|
|
|
1116
868
|
--font-size: var(--font-size-default);
|
|
1117
869
|
--line-height: var(--line-height-md);
|
|
1118
870
|
--border-radius: var(--border-radius-md);
|
|
1119
|
-
--color: var(--color-
|
|
871
|
+
--color: var(--color-action-default);
|
|
1120
872
|
--background-color: transparent;
|
|
1121
873
|
|
|
1122
874
|
--color-hover: var(--color-brand-01-darkest);
|
|
1123
|
-
--background-color-hover: var(--color-
|
|
875
|
+
--background-color-hover: var(--color-brand-01-lighter);
|
|
1124
876
|
|
|
1125
877
|
--outline-color-focused: var(--color-action-focus);
|
|
1126
878
|
|
|
1127
|
-
--background-color-pressed: var(--color-
|
|
879
|
+
--background-color-pressed: var(--color-brand-01-light);
|
|
1128
880
|
|
|
1129
881
|
--background-color-actived: var(--color-brand-01-lightest);
|
|
1130
882
|
--color-actived: var(--color-action-pressed);
|
|
@@ -1136,28 +888,28 @@ po-menu-item {
|
|
|
1136
888
|
|
|
1137
889
|
:root {
|
|
1138
890
|
--color-menu-color-menu-item-text: var(--color);
|
|
1139
|
-
/*Deprecated
|
|
891
|
+
/*Deprecated v17.x.x utilizar --color*/
|
|
1140
892
|
|
|
1141
893
|
--color-menu-color-menu-item-selected: var(--color-actived);
|
|
1142
|
-
/*Deprecated
|
|
894
|
+
/*Deprecated v17.x.x utilizar --color-actived*/
|
|
1143
895
|
|
|
1144
896
|
--color-menu-color-menu-responsive: var(--color);
|
|
1145
|
-
/*Deprecated
|
|
897
|
+
/*Deprecated v17.x.x utilizar --color*/
|
|
1146
898
|
|
|
1147
899
|
--color-menu-background-color-item-hover: var(--background-color-hover);
|
|
1148
|
-
/*Deprecated
|
|
900
|
+
/*Deprecated v17.x.x utilizar --background-color-hover*/
|
|
1149
901
|
|
|
1150
902
|
--color-menu-background-color-item-selected: var(--background-color-actived);
|
|
1151
|
-
/*Deprecated
|
|
903
|
+
/*Deprecated v17.x.x utilizar --background-color-actived*/
|
|
1152
904
|
|
|
1153
905
|
--color-menu-background-color-menu: var(--background-color);
|
|
1154
|
-
/*Deprecated
|
|
906
|
+
/*Deprecated v17.x.x utilizar --background-color*/
|
|
1155
907
|
|
|
1156
|
-
--color-menu-background-color-menu-responsive-overlay: var(--color-neutral-dark-
|
|
1157
|
-
/*
|
|
908
|
+
--color-menu-background-color-menu-responsive-overlay: var(--color-neutral-dark-80);
|
|
909
|
+
/*Deprecated v17.x.x utilizar --color-neutral-dark-80*/
|
|
1158
910
|
|
|
1159
911
|
--color-menu-border-top-collapse-button: var(--border-color);
|
|
1160
|
-
/*Deprecated
|
|
912
|
+
/*Deprecated v17.x.x utilizar --border-color*/
|
|
1161
913
|
}
|
|
1162
914
|
|
|
1163
915
|
/*------------------------------------*\
|
|
@@ -1166,79 +918,78 @@ po-menu-item {
|
|
|
1166
918
|
po-menu-filter {
|
|
1167
919
|
--font-family: var(--font-family-theme);
|
|
1168
920
|
--font-size: var(--font-size-default);
|
|
1169
|
-
--text-color-placeholder: var(--color-neutral-light-
|
|
1170
|
-
--color: var(--color-neutral);
|
|
921
|
+
--text-color-placeholder: var(--color-neutral-light-30);
|
|
922
|
+
--color: var(--color-neutral-dark-70);
|
|
1171
923
|
--border-radius: var(--border-radius-md);
|
|
1172
|
-
--background: var(--color-neutral-light-
|
|
924
|
+
--background: var(--color-neutral-light-05);
|
|
1173
925
|
|
|
1174
|
-
--text-color: var(--color-neutral-dark-
|
|
926
|
+
--text-color: var(--color-neutral-dark-90);
|
|
1175
927
|
|
|
1176
|
-
--color-icon-read: var(--color-neutral);
|
|
928
|
+
--color-icon-read: var(--color-neutral-dark-70);
|
|
1177
929
|
|
|
1178
|
-
--color-clear: var(--color-
|
|
930
|
+
--color-clear: var(--color-action-default);
|
|
1179
931
|
|
|
1180
932
|
--color-hover: var(--color-action-hover);
|
|
1181
933
|
--background-hover: var(--color-brand-01-lightest);
|
|
1182
934
|
|
|
1183
|
-
--color-focused: var(--color-
|
|
935
|
+
--color-focused: var(--color-action-default);
|
|
1184
936
|
--outline-color-focused: var(--color-action-focus);
|
|
1185
937
|
}
|
|
1186
938
|
|
|
1187
939
|
:root {
|
|
1188
940
|
--color-menu-filter-color-icon: var(--color-icon-read);
|
|
1189
|
-
/*Deprecated
|
|
941
|
+
/*Deprecated v17.x.x utilizar --color-icon-read*/
|
|
1190
942
|
|
|
1191
943
|
--color-menu-filter-color-text: var(--text-color);
|
|
1192
|
-
/*Deprecated
|
|
944
|
+
/*Deprecated v17.x.x utilizar --text-color*/
|
|
1193
945
|
|
|
1194
946
|
--color-menu-filter-background-color: var(--background);
|
|
1195
|
-
/*Deprecated
|
|
947
|
+
/*Deprecated v17.x.x utilizar --background*/
|
|
1196
948
|
|
|
1197
949
|
--color-menu-filter-border: var(--color);
|
|
1198
|
-
/*Deprecated
|
|
950
|
+
/*Deprecated v17.x.x utilizar --color*/
|
|
1199
951
|
|
|
1200
952
|
--color-menu-filter-border-focusable: var(--color-focused);
|
|
1201
|
-
/*Deprecated
|
|
953
|
+
/*Deprecated v17.x.x utilizar --color-focused*/
|
|
1202
954
|
|
|
1203
955
|
/*------------------------------------*\
|
|
1204
|
-
|
|
1205
|
-
|
|
1206
|
-
|
|
956
|
+
MENU PANEL
|
|
957
|
+
\*------------------------------------*/
|
|
1207
958
|
--color-menu-panel-background-color-item-hover: var(--color-black-alpha-15);
|
|
1208
|
-
--color-menu-panel-background-color-item-selected: var(--color-neutral-light-
|
|
1209
|
-
--color-menu-panel-background-color-menu: var(--color-
|
|
959
|
+
--color-menu-panel-background-color-item-selected: var(--color-neutral-light-20);
|
|
960
|
+
--color-menu-panel-background-color-menu: var(--color-neutral-light-00);
|
|
1210
961
|
|
|
1211
|
-
--color-menu-panel-border-top-logo: var(--color-neutral-light-
|
|
962
|
+
--color-menu-panel-border-top-logo: var(--color-neutral-light-20);
|
|
1212
963
|
|
|
1213
964
|
--color-menu-panel-color-menu-item-text: var(--color-primary);
|
|
1214
|
-
--color-menu-panel-color-menu-item-selected: var(--color-neutral-dark-
|
|
965
|
+
--color-menu-panel-color-menu-item-selected: var(--color-neutral-dark-90);
|
|
1215
966
|
}
|
|
1216
967
|
|
|
968
|
+
/*------------------------------------*\
|
|
969
|
+
MODAL
|
|
970
|
+
\*------------------------------------*/
|
|
1217
971
|
po-modal {
|
|
1218
972
|
--border-radius: var(--border-radius-md);
|
|
1219
973
|
--border-width: var(--border-width-sm);
|
|
1220
|
-
--border-color: var(--color-neutral-light-
|
|
1221
|
-
--background: var(--color-
|
|
974
|
+
--border-color: var(--color-neutral-light-20);
|
|
975
|
+
--background: var(--color-neutral-light-00);
|
|
1222
976
|
--shadow: var(--shadow-md);
|
|
1223
|
-
--color-overlay: var(--color-neutral-dark-
|
|
977
|
+
--color-overlay: var(--color-neutral-dark-80);
|
|
1224
978
|
--opacity-overlay: 0.7;
|
|
1225
|
-
--color-divider: var(--color-neutral-light-
|
|
979
|
+
--color-divider: var(--color-neutral-light-20);
|
|
1226
980
|
}
|
|
1227
|
-
|
|
1228
|
-
MODAL
|
|
1229
|
-
\*------------------------------------*/
|
|
981
|
+
|
|
1230
982
|
:root {
|
|
1231
|
-
--color-modal-background-color-content: var(--background); /*Deprecated
|
|
1232
|
-
--color-modal-color-overlay: var(--color-overlay); /*Deprecated
|
|
1233
|
-
--shadow-modal-content: var(--shadow); /*Deprecated
|
|
983
|
+
--color-modal-background-color-content: var(--background); /*Deprecated v17.x.x utilizar --background*/
|
|
984
|
+
--color-modal-color-overlay: var(--color-overlay); /*Deprecated v17.x.x utilizar --color-overlay*/
|
|
985
|
+
--shadow-modal-content: var(--shadow); /*Deprecated v17.x.x utilizar --shadow*/
|
|
1234
986
|
|
|
1235
987
|
/*------------------------------------*\
|
|
1236
|
-
|
|
1237
|
-
|
|
1238
|
-
|
|
988
|
+
MODAL PASSWORD RECOVERY
|
|
989
|
+
\*------------------------------------*/
|
|
1239
990
|
--color-modal-password-recovery-link-color: var(--color-primary);
|
|
1240
991
|
--color-modal-password-recovery-link-color-hover: var(--color-primary-dark-20);
|
|
1241
|
-
--color-modal-password-recovery-text-color: var(--color-neutral);
|
|
992
|
+
--color-modal-password-recovery-text-color: var(--color-neutral-dark-70);
|
|
1242
993
|
}
|
|
1243
994
|
|
|
1244
995
|
/*------------------------------------*\
|
|
@@ -1248,172 +999,165 @@ po-multiselect {
|
|
|
1248
999
|
--font-family: var(--font-family-theme);
|
|
1249
1000
|
--font-size: var(--font-size-default);
|
|
1250
1001
|
--text-color-placeholder: var(--color-action-disabled);
|
|
1251
|
-
--color: var(--color-neutral);
|
|
1252
|
-
--background: var(--color-neutral-light-
|
|
1002
|
+
--color: var(--color-neutral-dark-70);
|
|
1003
|
+
--background: var(--color-neutral-light-05);
|
|
1253
1004
|
|
|
1254
1005
|
/* hover */
|
|
1255
1006
|
--color-hover: var(--color-action-hover);
|
|
1256
1007
|
--background-hover: var(--color-brand-01-lightest);
|
|
1257
1008
|
|
|
1258
1009
|
/* focus */
|
|
1259
|
-
--color-focused: var(--color-
|
|
1260
|
-
--outline-color-focused: var(--color-
|
|
1010
|
+
--color-focused: var(--color-action-default);
|
|
1011
|
+
--outline-color-focused: var(--color-action-focus);
|
|
1261
1012
|
|
|
1262
1013
|
/* disabled */
|
|
1263
1014
|
--color-disabled: var(--color-action-disabled);
|
|
1264
|
-
--background-disabled: var(--color-neutral-light-
|
|
1015
|
+
--background-disabled: var(--color-neutral-light-20);
|
|
1265
1016
|
|
|
1266
1017
|
/* error */
|
|
1267
|
-
--color-error: var(--color-
|
|
1018
|
+
--color-error: var(--color-feedback-negative-base);
|
|
1268
1019
|
}
|
|
1269
1020
|
|
|
1270
1021
|
:root {
|
|
1271
1022
|
/*------------------------------------*\
|
|
1272
|
-
|
|
1273
|
-
|
|
1274
|
-
|
|
1275
|
-
--color-navbar-color: var(--color-white);
|
|
1023
|
+
NAVBAR
|
|
1024
|
+
\*------------------------------------*/
|
|
1025
|
+
--color-navbar-color: var(--color-neutral-light-00);
|
|
1276
1026
|
|
|
1277
1027
|
/*------------------------------------*\
|
|
1278
|
-
|
|
1279
|
-
|
|
1280
|
-
|
|
1028
|
+
NAVBAR ACTION
|
|
1029
|
+
\*------------------------------------*/
|
|
1281
1030
|
--color-navbar-action-color-content: var(--color-primary);
|
|
1282
1031
|
|
|
1283
1032
|
/*------------------------------------*\
|
|
1284
|
-
|
|
1285
|
-
|
|
1286
|
-
|
|
1033
|
+
NAVBAR ACTION POPUP
|
|
1034
|
+
\*------------------------------------*/
|
|
1287
1035
|
--color-navbar-action-popup-color-content: var(--color-navbar-action-color-content);
|
|
1288
1036
|
|
|
1289
1037
|
/*------------------------------------*\
|
|
1290
|
-
|
|
1291
|
-
|
|
1292
|
-
|
|
1038
|
+
NAVBAR ITEM
|
|
1039
|
+
\*------------------------------------*/
|
|
1293
1040
|
--color-navbar-item-color: var(--color-primary);
|
|
1294
|
-
--color-navbar-item-color-selected: var(--color-neutral);
|
|
1295
|
-
--color-navbar-item-color-shadow-selected: var(--color-
|
|
1041
|
+
--color-navbar-item-color-selected: var(--color-neutral-dark-70);
|
|
1042
|
+
--color-navbar-item-color-shadow-selected: var(--color-feedback-negative-light);
|
|
1296
1043
|
|
|
1297
1044
|
/*------------------------------------*\
|
|
1298
|
-
|
|
1299
|
-
|
|
1300
|
-
|
|
1045
|
+
NAVBAR ITEM NAVIGATION
|
|
1046
|
+
\*------------------------------------*/
|
|
1301
1047
|
--color-navbar-item-navigation-color-icon: var(--color-primary);
|
|
1302
|
-
--color-navbar-item-navigation-color-icon-disabled: var(--color-neutral-light-
|
|
1048
|
+
--color-navbar-item-navigation-color-icon-disabled: var(--color-neutral-light-20);
|
|
1049
|
+
}
|
|
1050
|
+
/*------------------------------------*\
|
|
1051
|
+
OVERLAY
|
|
1052
|
+
\*------------------------------------*/
|
|
1053
|
+
po-overlay {
|
|
1054
|
+
--color-overlay: var(--color-neutral-dark-80);
|
|
1055
|
+
--opacity-overlay: 0.7;
|
|
1056
|
+
}
|
|
1303
1057
|
|
|
1058
|
+
:root {
|
|
1304
1059
|
/*------------------------------------*\
|
|
1305
|
-
|
|
1306
|
-
|
|
1307
|
-
|
|
1308
|
-
--color-page-background-color-page: var(--color-white);
|
|
1060
|
+
PAGE
|
|
1061
|
+
\*------------------------------------*/
|
|
1062
|
+
--color-page-background-color-page: var(--color-neutral-light-00);
|
|
1309
1063
|
|
|
1310
1064
|
/*------------------------------------*\
|
|
1311
|
-
|
|
1312
|
-
|
|
1313
|
-
|
|
1314
|
-
--color-page-background-select-item-border-color: var(--color-neutral-light-90);
|
|
1065
|
+
PAGE BACKGROUND
|
|
1066
|
+
\*------------------------------------*/
|
|
1067
|
+
--color-page-background-select-item-border-color: var(--color-neutral-light-10);
|
|
1315
1068
|
|
|
1316
1069
|
/*------------------------------------*\
|
|
1317
|
-
|
|
1318
|
-
|
|
1319
|
-
|
|
1070
|
+
PAGE BLOCKED USER
|
|
1071
|
+
\*------------------------------------*/
|
|
1320
1072
|
--color-page-blocked-user-link-color: var(--color-primary);
|
|
1321
1073
|
--color-page-blocked-user-link-color-hover: var(--color-primary-dark-20);
|
|
1322
|
-
--color-page-blocked-user-text-color: var(--color-neutral);
|
|
1323
|
-
--color-page--blocked-user-background-color: var(--color-neutral-light-
|
|
1074
|
+
--color-page-blocked-user-text-color: var(--color-neutral-dark-70);
|
|
1075
|
+
--color-page--blocked-user-background-color: var(--color-neutral-light-05);
|
|
1324
1076
|
|
|
1325
1077
|
/*------------------------------------*\
|
|
1326
|
-
|
|
1327
|
-
|
|
1328
|
-
|
|
1329
|
-
--color-page-change-password-background-color-
|
|
1330
|
-
--color-page-change-password-background-color-
|
|
1331
|
-
--color-page-change-password-background-color-secondary-logo: var(--color-neutral-light-98);
|
|
1078
|
+
PAGE CHANGE PASSWORD
|
|
1079
|
+
\*------------------------------------*/
|
|
1080
|
+
--color-page-change-password-background-color-buttons: var(--color-neutral-light-05);
|
|
1081
|
+
--color-page-change-password-background-color-container: var(--color-neutral-light-00);
|
|
1082
|
+
--color-page-change-password-background-color-secondary-logo: var(--color-neutral-light-05);
|
|
1332
1083
|
--color-page-change-password-color-link: var(--color-primary);
|
|
1333
|
-
--color-page-change-password-color-text: var(--color-neutral);
|
|
1334
|
-
--color-page-change-password-color-required: var(--color-neutral);
|
|
1084
|
+
--color-page-change-password-color-text: var(--color-neutral-dark-70);
|
|
1085
|
+
--color-page-change-password-color-required: var(--color-neutral-dark-70);
|
|
1335
1086
|
--color-page-change-password-color-required-ok: var(--color-success);
|
|
1336
1087
|
--color-page-change-password-color-required-minus: var(--color-black-alpha-30);
|
|
1337
1088
|
--color-page-change-password-color-required-text: var(--color-secondary-dark-60-alpha-70);
|
|
1338
1089
|
|
|
1339
1090
|
/*------------------------------------*\
|
|
1340
|
-
|
|
1341
|
-
|
|
1342
|
-
|
|
1091
|
+
PAGE CONTENT
|
|
1092
|
+
\*------------------------------------*/
|
|
1343
1093
|
--color-page-content-background-color-scrollbar: var(--color-primary);
|
|
1344
1094
|
|
|
1345
1095
|
/*------------------------------------*\
|
|
1346
|
-
|
|
1347
|
-
|
|
1348
|
-
|
|
1349
|
-
--color-page-header-color-title: var(--color-neutral);
|
|
1096
|
+
PAGE HEADER
|
|
1097
|
+
\*------------------------------------*/
|
|
1098
|
+
--color-page-header-color-title: var(--color-neutral-dark-70);
|
|
1350
1099
|
|
|
1351
1100
|
/*------------------------------------*\
|
|
1352
|
-
|
|
1353
|
-
|
|
1354
|
-
|
|
1101
|
+
PAGE LIST
|
|
1102
|
+
\*------------------------------------*/
|
|
1355
1103
|
--color-page-list-color-link-text: var(--color-primary);
|
|
1356
1104
|
|
|
1357
1105
|
/*------------------------------------*\
|
|
1358
|
-
|
|
1359
|
-
|
|
1360
|
-
|
|
1361
|
-
--color-page-login-header-
|
|
1362
|
-
--color-page-login-
|
|
1363
|
-
--color-page-login-background-
|
|
1364
|
-
--color-page-login-
|
|
1365
|
-
--color-page-login-highlight-text-color: var(--color-white);
|
|
1106
|
+
PAGE LOGIN
|
|
1107
|
+
\*------------------------------------*/
|
|
1108
|
+
--color-page-login-header-product-name-color: var(--color-neutral-dark-70);
|
|
1109
|
+
--color-page-login-header-welcome-color: var(--color-action-default);
|
|
1110
|
+
--color-page-login-background-color: var(--color-neutral-light-05);
|
|
1111
|
+
--color-page-login-background-highlight-image: var(--color-neutral-light-10);
|
|
1112
|
+
--color-page-login-highlight-text-color: var(--color-neutral-light-00);
|
|
1366
1113
|
--color-page-login-link-color: var(--color-primary);
|
|
1367
1114
|
--color-page-login-link-hover-color: var(--color-primary-dark-20);
|
|
1368
1115
|
--color-page-login-popover-color-attempts: var(--color-primary);
|
|
1369
|
-
--color-page-login-popover-color-title: var(--color-
|
|
1370
|
-
--color-page-login-support-background-color: var(--color-
|
|
1116
|
+
--color-page-login-popover-color-title: var(--color-brand-03-base);
|
|
1117
|
+
--color-page-login-support-background-color: var(--color-neutral-light-00);
|
|
1371
1118
|
--color-page-login-support-color: var(--color-primary);
|
|
1372
1119
|
}
|
|
1373
1120
|
|
|
1121
|
+
/*------------------------------------*\
|
|
1122
|
+
PAGE SLIDE
|
|
1123
|
+
\*------------------------------------*/
|
|
1374
1124
|
po-page-slide {
|
|
1375
|
-
/*
|
|
1376
|
-
--background-color: var(--color-
|
|
1125
|
+
/* base */
|
|
1126
|
+
--background-color: var(--color-neutral-light-00);
|
|
1377
1127
|
--border-radius: var(--border-radius-md);
|
|
1378
1128
|
|
|
1379
|
-
/*
|
|
1380
|
-
--color-overlay: var(--color-neutral-dark-
|
|
1129
|
+
/* overlay */
|
|
1130
|
+
--color-overlay: var(--color-neutral-dark-80);
|
|
1381
1131
|
--opacity-overlay: 0.7;
|
|
1382
1132
|
|
|
1383
|
-
/*
|
|
1133
|
+
/* title */
|
|
1384
1134
|
--font-family: var(--font-family-heading);
|
|
1385
1135
|
--color-title: var(--color-neutral-dark-95);
|
|
1386
1136
|
}
|
|
1387
1137
|
|
|
1388
1138
|
:root {
|
|
1389
|
-
/*------------------------------------*\
|
|
1390
|
-
PAGE SLIDE
|
|
1391
|
-
\*------------------------------------*/
|
|
1392
|
-
|
|
1393
1139
|
--color-page-slide-close-button-color: var(--color-primary);
|
|
1394
|
-
--color-page-slide-body-text-color: var(--color-neutral-dark-
|
|
1140
|
+
--color-page-slide-body-text-color: var(--color-neutral-dark-90);
|
|
1395
1141
|
|
|
1396
1142
|
/*------------------------------------*\
|
|
1397
|
-
|
|
1398
|
-
|
|
1399
|
-
|
|
1400
|
-
--color-popover-background-color: var(--color-
|
|
1401
|
-
--color-popover-background-color-arrow: var(--color-white);
|
|
1143
|
+
POPOVER
|
|
1144
|
+
\*------------------------------------*/
|
|
1145
|
+
--color-popover-background-color: var(--color-neutral-light-00);
|
|
1146
|
+
--color-popover-background-color-arrow: var(--color-neutral-light-00);
|
|
1402
1147
|
--color-popover-background-color-scrollbar: var(--color-primary);
|
|
1403
1148
|
|
|
1404
|
-
--color-popover-color-text-title: var(--color-neutral);
|
|
1149
|
+
--color-popover-color-text-title: var(--color-neutral-dark-70);
|
|
1405
1150
|
}
|
|
1406
1151
|
|
|
1407
1152
|
/*------------------------------------*\
|
|
1408
|
-
|
|
1409
|
-
|
|
1410
|
-
|
|
1153
|
+
POPUP
|
|
1154
|
+
\*------------------------------------*/
|
|
1411
1155
|
po-popup,
|
|
1412
1156
|
po-popup po-listbox {
|
|
1413
1157
|
--border-radius: var(--border-radius-md);
|
|
1414
1158
|
--border-width: var(--border-width-sm);
|
|
1415
|
-
--border-color: var(--color-neutral-light-
|
|
1416
|
-
--background: var(--color-
|
|
1159
|
+
--border-color: var(--color-neutral-light-20);
|
|
1160
|
+
--background: var(--color-neutral-light-00);
|
|
1417
1161
|
--shadow: var(--shadow-md);
|
|
1418
1162
|
}
|
|
1419
1163
|
|
|
@@ -1424,410 +1168,345 @@ po-popup po-item-list {
|
|
|
1424
1168
|
|
|
1425
1169
|
/* action */
|
|
1426
1170
|
--font-weight: var(--font-weight-bold);
|
|
1427
|
-
--color: var(--color-
|
|
1171
|
+
--color: var(--color-action-default);
|
|
1428
1172
|
|
|
1429
|
-
--color-hover: var(--color-
|
|
1430
|
-
--background-hover: var(--color-
|
|
1173
|
+
--color-hover: var(--color-brand-01-darkest);
|
|
1174
|
+
--background-hover: var(--color-brand-01-lighter);
|
|
1431
1175
|
|
|
1432
|
-
--outline-color-focused: var(--color-
|
|
1176
|
+
--outline-color-focused: var(--color-action-focus);
|
|
1433
1177
|
|
|
1434
|
-
--background-pressed: var(--color-
|
|
1178
|
+
--background-pressed: var(--color-brand-01-light);
|
|
1435
1179
|
|
|
1436
1180
|
--color-disabled: var(--color-action-disabled);
|
|
1437
1181
|
|
|
1438
1182
|
/* option e check */
|
|
1439
|
-
--color-option: var(--color-neutral-dark-
|
|
1183
|
+
--color-option: var(--color-neutral-dark-90);
|
|
1440
1184
|
|
|
1441
1185
|
--font-weight-selected: var(--font-weight-bold);
|
|
1442
1186
|
--background-selected: var(--color-brand-01-lightest);
|
|
1443
1187
|
}
|
|
1444
1188
|
|
|
1445
1189
|
:root {
|
|
1446
|
-
--color-popup-background-color-popup: var(--background); /*Deprecated
|
|
1190
|
+
--color-popup-background-color-popup: var(--background); /*Deprecated v17.x.x utilizar --background */
|
|
1447
1191
|
--color-popup-background-color-popup-item-hover: var(
|
|
1448
1192
|
--background-hover
|
|
1449
|
-
); /*Deprecated
|
|
1193
|
+
); /*Deprecated v17.x.x utilizar --background-hover */
|
|
1450
1194
|
--color-popup-background-color-popup-item-selected: var(
|
|
1451
1195
|
--background-selected
|
|
1452
|
-
); /* Deprecated
|
|
1196
|
+
); /* Deprecated v17.x.x utilizar --background-selected */
|
|
1453
1197
|
|
|
1454
1198
|
--color-popup-background-color-popup-item-selected-hover: var(
|
|
1455
1199
|
--background-hover
|
|
1456
|
-
); /* Deprecated
|
|
1200
|
+
); /* Deprecated v17.x.x utilizar --background-hover */
|
|
1457
1201
|
|
|
1458
1202
|
--color-popup-border-color-separator: var(
|
|
1459
|
-
--color-neutral-light-
|
|
1460
|
-
); /*Deprecated
|
|
1461
|
-
--color-popup-color-danger: var(--color-
|
|
1462
|
-
--color-popup-color-default: var(--color); /*Deprecated
|
|
1463
|
-
--color-popup-color-disabled: var(--color-disabled); /*Deprecated
|
|
1464
|
-
--color-popup-color-item-selected: var(--color-option); /*Deprecated
|
|
1203
|
+
--color-neutral-light-10
|
|
1204
|
+
); /*Deprecated v17.x.x utilizar --color-neutral-light-10 */
|
|
1205
|
+
--color-popup-color-danger: var(--color-feedback-negative-base); /*Deprecated v17.x.x utilizar --color-danger */
|
|
1206
|
+
--color-popup-color-default: var(--color); /*Deprecated v17.x.x utilizar --color */
|
|
1207
|
+
--color-popup-color-disabled: var(--color-disabled); /*Deprecated v17.x.x utilizar --color-disabled */
|
|
1208
|
+
--color-popup-color-item-selected: var(--color-option); /*Deprecated v17.x.x utilizar --color-option */
|
|
1465
1209
|
|
|
1466
1210
|
/*------------------------------------*\
|
|
1467
|
-
|
|
1468
|
-
|
|
1469
|
-
|
|
1211
|
+
PROGRESS
|
|
1212
|
+
\*------------------------------------*/
|
|
1470
1213
|
--color-progress-color-info-icon: var(--color-primary);
|
|
1471
|
-
--color-progress-color-text: var(--color-neutral);
|
|
1214
|
+
--color-progress-color-text: var(--color-neutral-dark-70);
|
|
1472
1215
|
--color-progress-color-text-success: var(--color-success);
|
|
1473
|
-
--color-progress-color-text-error: var(--color-
|
|
1474
|
-
--color-progress-color-info: var(--color-neutral);
|
|
1216
|
+
--color-progress-color-text-error: var(--color-feedback-negative-base);
|
|
1217
|
+
--color-progress-color-info: var(--color-neutral-dark-70);
|
|
1475
1218
|
|
|
1476
|
-
--color-progress-border-color-info-icon-close: var(--color-
|
|
1219
|
+
--color-progress-border-color-info-icon-close: var(--color-action-default);
|
|
1477
1220
|
|
|
1478
1221
|
/*------------------------------------*\
|
|
1479
|
-
|
|
1480
|
-
|
|
1481
|
-
|
|
1222
|
+
PROGRESS BAR
|
|
1223
|
+
\*------------------------------------*/
|
|
1482
1224
|
--color-progress-bar-background-color-bar: var(--color-primary-light-80);
|
|
1483
1225
|
--color-progress-bar-background-color-default: var(--color-primary);
|
|
1484
1226
|
--color-progress-bar-background-color-success: var(--color-success);
|
|
1485
|
-
--color-progress-bar-background-color-error: var(--color-
|
|
1227
|
+
--color-progress-bar-background-color-error: var(--color-feedback-negative-base);
|
|
1486
1228
|
}
|
|
1487
1229
|
|
|
1488
1230
|
/*------------------------------------*\
|
|
1489
1231
|
RADIO
|
|
1490
1232
|
\*------------------------------------*/
|
|
1491
|
-
|
|
1492
1233
|
po-radio {
|
|
1493
|
-
--color-unchecked: var(--color-
|
|
1234
|
+
--color-unchecked: var(--color-neutral-light-00);
|
|
1494
1235
|
--border-color: var(--color-neutral-dark-70);
|
|
1495
1236
|
|
|
1496
1237
|
/* hover */
|
|
1497
|
-
--shadow-color-hover: var(--color-
|
|
1498
|
-
--color-hover: var(--color-
|
|
1238
|
+
--shadow-color-hover: var(--color-brand-01-lighter);
|
|
1239
|
+
--color-hover: var(--color-brand-01-dark);
|
|
1499
1240
|
|
|
1500
1241
|
/* focus */
|
|
1501
|
-
--outline-color-focused: var(--color-
|
|
1242
|
+
--outline-color-focused: var(--color-brand-01-darkest);
|
|
1502
1243
|
|
|
1503
1244
|
/* checked */
|
|
1504
|
-
--color-checked: var(--color-
|
|
1245
|
+
--color-checked: var(--color-action-default);
|
|
1505
1246
|
|
|
1506
1247
|
/* disabled */
|
|
1507
|
-
--color-unchecked-disabled: var(--color-neutral-light-
|
|
1248
|
+
--color-unchecked-disabled: var(--color-neutral-light-30);
|
|
1508
1249
|
--color-checked-disabled: var(--color-neutral-dark-70);
|
|
1509
1250
|
}
|
|
1510
1251
|
|
|
1511
1252
|
:root {
|
|
1512
1253
|
/*------------------------------------*\
|
|
1513
|
-
|
|
1514
|
-
|
|
1515
|
-
|
|
1516
|
-
--color-radio-group-background-color: var(--color-unchecked);
|
|
1517
|
-
/* Deprecated v16.x.x utilizar --color-unchecked */
|
|
1518
|
-
--color-radio-group-background-color-active: var(--color-checked);
|
|
1519
|
-
/* Deprecated v16.x.x utilizar --color-checked */
|
|
1520
|
-
--color-radio-group-background-color-input-disabled: var(--color-unchecked-disabled);
|
|
1521
|
-
/* Deprecated v16.x.x utilizar --color-unchecked-disabled */
|
|
1522
|
-
|
|
1523
|
-
--color-radio-group-border-color: var(--border-color);
|
|
1524
|
-
/* Deprecated v16.x.x utilizar --border-color */
|
|
1525
|
-
--color-radio-group-border-color-focusable: var(--outline-color-focused);
|
|
1526
|
-
/* Deprecated v16.x.x utilizar --outline-color-focused */
|
|
1527
|
-
|
|
1528
|
-
/*------------------------------------*\
|
|
1529
|
-
RICH TEXT
|
|
1530
|
-
\*------------------------------------*/
|
|
1531
|
-
|
|
1254
|
+
RICH TEXT
|
|
1255
|
+
\*------------------------------------*/
|
|
1532
1256
|
--color-rich-text-background-color-scrollbar: var(--color-primary-alpha-50);
|
|
1533
1257
|
|
|
1534
|
-
--color-rich-text-body-background-color: var(--color-
|
|
1535
|
-
--color-rich-text-body-border-error: var(--color-
|
|
1258
|
+
--color-rich-text-body-background-color: var(--color-neutral-light-00);
|
|
1259
|
+
--color-rich-text-body-border-error: var(--color-feedback-negative-base);
|
|
1536
1260
|
|
|
1537
|
-
--color-rich-text-body-text-error: var(--color-
|
|
1261
|
+
--color-rich-text-body-text-error: var(--color-feedback-negative-base);
|
|
1538
1262
|
--color-rich-text-body-text-link: var(--color-primary);
|
|
1539
1263
|
--color-rich-text-body-text-link-hover: var(--color-primary-dark-20);
|
|
1540
1264
|
--color-rich-text-body-text-selected-color: var(--color-primary-light-80);
|
|
1541
1265
|
|
|
1542
|
-
--color-rich-text-placeholder-color: var(--color-neutral-
|
|
1266
|
+
--color-rich-text-placeholder-color: var(--color-neutral-mid-40);
|
|
1543
1267
|
|
|
1544
1268
|
--color-rich-text-toolbar-background-color: var(--color-rich-text-body-background-color);
|
|
1545
1269
|
}
|
|
1546
1270
|
|
|
1547
1271
|
/*------------------------------------*\
|
|
1548
|
-
|
|
1272
|
+
SEARCH
|
|
1549
1273
|
\*------------------------------------*/
|
|
1274
|
+
po-search {
|
|
1275
|
+
--font-family: var(--font-family-theme);
|
|
1276
|
+
--font-size: var(--font-size-default);
|
|
1277
|
+
--text-color-placeholder: var(--color-neutral-light-30);
|
|
1278
|
+
--color: var(--color-neutral-dark-70);
|
|
1279
|
+
--border-radius: var(--border-radius-md);
|
|
1280
|
+
--background: var(--color-neutral-light-05);
|
|
1281
|
+
|
|
1282
|
+
--text-color: var(--color-neutral-dark-90);
|
|
1283
|
+
|
|
1284
|
+
--color-icon-read: var(--color-neutral-dark-70);
|
|
1285
|
+
|
|
1286
|
+
--color-clear: var(--color-action-default);
|
|
1550
1287
|
|
|
1288
|
+
--color-hover: var(--color-action-hover);
|
|
1289
|
+
--background-hover: var(--color-brand-01-lightest);
|
|
1290
|
+
|
|
1291
|
+
--color-focused: var(--color-action-default);
|
|
1292
|
+
--outline-color-focused: var(--color-action-focus);
|
|
1293
|
+
|
|
1294
|
+
--color-disabled: var(--color-action-disabled);
|
|
1295
|
+
--background-disabled: var(--color-neutral-light-20);
|
|
1296
|
+
}
|
|
1297
|
+
|
|
1298
|
+
/*------------------------------------*\
|
|
1299
|
+
SELECT
|
|
1300
|
+
\*------------------------------------*/
|
|
1551
1301
|
po-select {
|
|
1552
1302
|
--font-family: var(--font-family-theme);
|
|
1553
1303
|
--font-size: var(--font-size-default);
|
|
1554
1304
|
|
|
1555
|
-
--text-color-empty: var(--color-neutral-light-
|
|
1305
|
+
--text-color-empty: var(--color-neutral-light-30);
|
|
1556
1306
|
--color: var(--color-neutral-dark-70);
|
|
1557
|
-
--background: var(--color-neutral-light-
|
|
1307
|
+
--background: var(--color-neutral-light-05);
|
|
1558
1308
|
--padding-horizontal: 0.5em;
|
|
1559
1309
|
--padding-vertical: 0.7em;
|
|
1560
1310
|
|
|
1561
|
-
--text-color: var(--color-neutral-dark-
|
|
1311
|
+
--text-color: var(--color-neutral-dark-90);
|
|
1562
1312
|
|
|
1563
|
-
--color-hover: var(--color-
|
|
1313
|
+
--color-hover: var(--color-brand-01-dark);
|
|
1564
1314
|
--background-hover: var(--color-brand-01-lightest);
|
|
1565
1315
|
|
|
1566
|
-
--color-focused: var(--color-
|
|
1567
|
-
--outline-color-focused: var(--color-
|
|
1316
|
+
--color-focused: var(--color-action-default);
|
|
1317
|
+
--outline-color-focused: var(--color-action-focus);
|
|
1568
1318
|
|
|
1569
|
-
--color-disabled: var(--color-neutral-light-
|
|
1570
|
-
--background-disabled: var(--color-neutral-light-
|
|
1319
|
+
--color-disabled: var(--color-neutral-light-30);
|
|
1320
|
+
--background-disabled: var(--color-neutral-light-20);
|
|
1571
1321
|
--background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18.707 8.29301C18.316 7.90201 17.684 7.90201 17.293 8.29301L12 13.586L6.70701 8.29301C6.31601 7.90201 5.68401 7.90201 5.29301 8.29301C4.90201 8.68401 4.90201 9.31601 5.29301 9.70701L11.293 15.707C11.488 15.902 11.744 16 12 16C12.256 16 12.512 15.902 12.707 15.707L18.707 9.70701C19.098 9.31601 19.098 8.68401 18.707 8.29301Z' fill='#5b1c7d'/%3E%3C/svg%3E%0A");
|
|
1572
1322
|
}
|
|
1573
1323
|
|
|
1574
1324
|
:root {
|
|
1575
|
-
--color-select-background-color: var(--background);
|
|
1576
|
-
/* Deprecated v16.x.x utilizar --background */
|
|
1577
|
-
--color-select-background-color-disabled: var(--background-disabled);
|
|
1578
|
-
/* Deprecated v16.x.x utilizar --background-disabled */
|
|
1579
|
-
|
|
1580
|
-
--color-select-border-button: var(--color);
|
|
1581
|
-
/* Deprecated v16.x.x utilizar --color */
|
|
1582
|
-
--color-select-border-button-error: var(--color-danger);
|
|
1583
|
-
/* Deprecated v16.x.x utilizar --color-danger */
|
|
1584
|
-
--color-select-border-button-disabled: var(--color-disabled);
|
|
1585
|
-
/* Deprecated v16.x.x utilizar --color-disabled */
|
|
1586
|
-
--color-select-border-button-hover: var(--color-hover);
|
|
1587
|
-
/* Deprecated v16.x.x utilizar --color-hover */
|
|
1588
|
-
--color-select-border-button-focus: var(--color-focused);
|
|
1589
|
-
/* Deprecated v16.x.x utilizar --color-focused */
|
|
1590
|
-
|
|
1591
|
-
--color-select-button-hover: var(--background-hover);
|
|
1592
|
-
/* Deprecated v16.x.x utilizar --background-hover */
|
|
1593
|
-
--color-select-button-focus: var(--outline-color-focused);
|
|
1594
|
-
/* Deprecated v16.x.x utilizar --outline-color-focused */
|
|
1595
|
-
|
|
1596
|
-
--color-select-color-primary: var(--text-color);
|
|
1597
|
-
/* Deprecated v16.x.x utilizar --text-color */
|
|
1598
|
-
--color-select-color-text-error: var(--color-danger);
|
|
1599
|
-
/* Deprecated v16.x.x utilizar --color-danger */
|
|
1600
|
-
--color-select-color-text-empty: var(--text-color-empty);
|
|
1601
|
-
/* Deprecated v16.x.x utilizar --text-color-empty */
|
|
1602
|
-
|
|
1603
1325
|
/*------------------------------------*\
|
|
1604
|
-
|
|
1605
|
-
|
|
1606
|
-
|
|
1326
|
+
SLIDE
|
|
1327
|
+
\*------------------------------------*/
|
|
1607
1328
|
--color-slide-background-color-active-circle: var(--color-primary);
|
|
1608
|
-
--color-slide-background-color-arrow-circle: var(--color-
|
|
1609
|
-
--color-slide-background-color-circle: var(--color-neutral-light-
|
|
1329
|
+
--color-slide-background-color-arrow-circle: var(--color-neutral-light-00);
|
|
1330
|
+
--color-slide-background-color-circle: var(--color-neutral-light-20);
|
|
1610
1331
|
--color-slide-background-color-scrollbar: var(--color-primary-alpha-50);
|
|
1611
1332
|
--color-slide-border-arrow: var(--color-primary);
|
|
1612
1333
|
--color-slide-box-shadow-arrow-circle: var(--color-black-alpha-15);
|
|
1613
1334
|
--color-slide-box-shadow-wrapper: var(--color-black-alpha-30);
|
|
1614
1335
|
|
|
1615
1336
|
/*------------------------------------*\
|
|
1616
|
-
|
|
1617
|
-
|
|
1618
|
-
|
|
1619
|
-
--color-stepper-bar: var(--color-neutral);
|
|
1620
|
-
--color-stepper-bar-disabled: var(--color-neutral-light-40);
|
|
1337
|
+
STEPPER
|
|
1338
|
+
\*------------------------------------*/
|
|
1339
|
+
--color-stepper-bar: var(--color-neutral-dark-70);
|
|
1340
|
+
--color-stepper-bar-disabled: var(--color-neutral-mid-40);
|
|
1621
1341
|
--color-stepper-circle-active: var(--color-primary);
|
|
1622
1342
|
--color-stepper-circle-default: var(--color-primary);
|
|
1623
|
-
--color-stepper-circle-disabled: var(--color-neutral-light-
|
|
1624
|
-
--color-stepper-circle-error: var(--color-
|
|
1343
|
+
--color-stepper-circle-disabled: var(--color-neutral-light-30);
|
|
1344
|
+
--color-stepper-circle-error: var(--color-feedback-negative-base);
|
|
1625
1345
|
}
|
|
1626
1346
|
|
|
1627
1347
|
/*------------------------------------*\
|
|
1628
1348
|
SWITCH
|
|
1629
1349
|
\*------------------------------------*/
|
|
1630
|
-
|
|
1631
1350
|
po-switch {
|
|
1632
|
-
--color-unchecked: var(--color-
|
|
1351
|
+
--color-unchecked: var(--color-neutral-light-00);
|
|
1633
1352
|
--border-color: var(--color-neutral-dark-70);
|
|
1634
|
-
--track-unchecked: var(--color-neutral-light-
|
|
1353
|
+
--track-unchecked: var(--color-neutral-light-20);
|
|
1635
1354
|
|
|
1636
|
-
--color-checked: var(--color-
|
|
1637
|
-
--track-checked: var(--color-
|
|
1355
|
+
--color-checked: var(--color-action-default);
|
|
1356
|
+
--track-checked: var(--color-brand-01-light);
|
|
1638
1357
|
|
|
1639
1358
|
--color-unchecked-hover: var(--color-brand-01-lightest);
|
|
1640
1359
|
--color-checked-hover: var(--color-action-hover);
|
|
1641
1360
|
|
|
1642
1361
|
--outline-color-focused: var(--color-action-focus);
|
|
1643
1362
|
|
|
1644
|
-
--color-unchecked-disabled: var(--color-neutral-light-
|
|
1363
|
+
--color-unchecked-disabled: var(--color-neutral-light-20);
|
|
1645
1364
|
--color-checked-disabled: var(--color-action-disabled);
|
|
1646
1365
|
}
|
|
1647
1366
|
|
|
1648
1367
|
:root {
|
|
1649
|
-
--color-switch-background-color-container-on: var(--track-checked);
|
|
1650
|
-
/*Deprecated v16.x.x utilizar --track-checked */
|
|
1651
|
-
--color-switch-background-color-container-off: var(--track-unchecked);
|
|
1652
|
-
/*Deprecated v16.x.x utilizar --track-unchecked */
|
|
1653
|
-
--color-switch-background-color-container-disabled: var(--track-unchecked);
|
|
1654
|
-
/*Deprecated v16.x.x utilizar --track-unchecked */
|
|
1655
|
-
|
|
1656
|
-
--color-switch-box-shadow-color-focusable: var(--outline-color-focused);
|
|
1657
|
-
/*Deprecated v16.x.x utilizar --outline-color-focused*/
|
|
1658
|
-
|
|
1659
|
-
--color-switch-background-color-button: var(--color-unchecked);
|
|
1660
|
-
/*Deprecated v16.x.x utilizar --color-unchecked */
|
|
1661
|
-
--color-switch-background-color-button-disabled: var(--color-unchecked-disabled);
|
|
1662
|
-
/*Deprecated v16.x.x utilizar --color-unchecked-disabled */
|
|
1663
|
-
|
|
1664
|
-
--color-switch-color-icon-on: var(--color-unchecked);
|
|
1665
|
-
/*Deprecated v16.x.x utilizar --color-unchecked */
|
|
1666
|
-
|
|
1667
1368
|
/*------------------------------------*\
|
|
1668
|
-
|
|
1669
|
-
|
|
1670
|
-
|
|
1671
|
-
--color-tab-button-box-shadow: var(--color-
|
|
1672
|
-
--color-tab-button-box-shadow-active: var(--color-secondary);
|
|
1369
|
+
TAB BUTTON
|
|
1370
|
+
\*------------------------------------*/
|
|
1371
|
+
--color-tab-button-box-shadow: var(--color-neutral-light-10);
|
|
1372
|
+
--color-tab-button-box-shadow-active: var(--color-action-default);
|
|
1673
1373
|
|
|
1674
|
-
--color-tab-button-color: var(--color-
|
|
1675
|
-
--color-tab-button-color-disabled: var(--color-neutral-light-
|
|
1374
|
+
--color-tab-button-color: var(--color-action-default);
|
|
1375
|
+
--color-tab-button-color-disabled: var(--color-neutral-light-30);
|
|
1676
1376
|
|
|
1677
1377
|
/*------------------------------------*\
|
|
1678
|
-
|
|
1679
|
-
|
|
1680
|
-
|
|
1378
|
+
TAB DROPDOWN
|
|
1379
|
+
\*------------------------------------*/
|
|
1681
1380
|
--color-tab-dropdown-background-color-tab-dropdown-button-active: var(--color-primary);
|
|
1682
|
-
--color-tab-dropdown-background-color-tab-dropdown-button-disabled: var(--color-
|
|
1381
|
+
--color-tab-dropdown-background-color-tab-dropdown-button-disabled: var(--color-neutral-light-00);
|
|
1683
1382
|
--color-tab-dropdown-background-color-tab-dropdown-button-hover: var(--color-primary-light-95);
|
|
1684
1383
|
|
|
1685
|
-
--color-tab-dropdown-color-tab-dropdown-button: var(--color-
|
|
1384
|
+
--color-tab-dropdown-color-tab-dropdown-button: var(--color-neutral-light-00);
|
|
1686
1385
|
}
|
|
1687
1386
|
|
|
1688
1387
|
/*------------------------------------*\
|
|
1689
1388
|
TABLE
|
|
1690
1389
|
\*------------------------------------*/
|
|
1691
1390
|
po-table {
|
|
1692
|
-
--background-color: var(--color-
|
|
1391
|
+
--background-color: var(--color-neutral-light-00);
|
|
1693
1392
|
--color: var(--color-neutral-dark-95);
|
|
1694
1393
|
|
|
1695
1394
|
--font-family: var(--font-family-theme);
|
|
1696
1395
|
|
|
1697
|
-
--background-striped-color: var(--color-neutral-light-
|
|
1396
|
+
--background-striped-color: var(--color-neutral-light-05);
|
|
1698
1397
|
|
|
1699
|
-
--color-line: var(--color-neutral-
|
|
1398
|
+
--color-line: var(--color-neutral-mid-40);
|
|
1700
1399
|
|
|
1701
1400
|
--background-color-selected: var(--color-brand-01-lightest);
|
|
1702
1401
|
|
|
1703
|
-
--background-color-headline: var(--color-neutral-light-
|
|
1402
|
+
--background-color-headline: var(--color-neutral-light-10);
|
|
1704
1403
|
|
|
1705
1404
|
--font-weight-headline: var(--font-weight-bold);
|
|
1706
1405
|
|
|
1707
1406
|
--color-hover: var(--color-action-hover);
|
|
1708
|
-
--background-color-hover: var(--color-
|
|
1407
|
+
--background-color-hover: var(--color-brand-01-lighter);
|
|
1709
1408
|
|
|
1710
|
-
--outline-color-focused: var(--color-
|
|
1409
|
+
--outline-color-focused: var(--color-action-focus);
|
|
1711
1410
|
|
|
1712
|
-
--color-actived: var(--color-neutral-dark-
|
|
1713
|
-
--background-color-actived: var(--color-
|
|
1411
|
+
--color-actived: var(--color-neutral-dark-90);
|
|
1412
|
+
--background-color-actived: var(--color-brand-01-light);
|
|
1714
1413
|
|
|
1715
|
-
--color-disabled: var(--color-neutral-
|
|
1414
|
+
--color-disabled: var(--color-neutral-mid-40);
|
|
1716
1415
|
}
|
|
1717
1416
|
|
|
1718
1417
|
:root {
|
|
1719
1418
|
--color-table-background-color-action-hover: var(--color-action-hover);
|
|
1720
|
-
/*Deprecated
|
|
1419
|
+
/*Deprecated v17.x.x utilizar --color-action-hover*/
|
|
1721
1420
|
|
|
1722
1421
|
--color-table-background-color-active: var(--background-color-actived);
|
|
1723
|
-
/*Deprecated
|
|
1422
|
+
/*Deprecated v17.x.x utilizar --background-color-actived*/
|
|
1724
1423
|
|
|
1725
|
-
--color-table-background-color-header: var(--color-neutral-light-
|
|
1726
|
-
/*Deprecated
|
|
1424
|
+
--color-table-background-color-header: var(--color-neutral-light-10);
|
|
1425
|
+
/*Deprecated v17.x.x utilizar --color-neutral-light-10*/
|
|
1727
1426
|
|
|
1728
1427
|
--color-table-background-color-overlay: var(--color-secondary-dark-60-alpha-70);
|
|
1729
|
-
/*Deprecated
|
|
1428
|
+
/*Deprecated v17.x.x utilizar --color-secondary-dark-60-alpha-70*/
|
|
1730
1429
|
|
|
1731
|
-
--color-table-background-color-overlay-content: var(--color-
|
|
1732
|
-
/*Deprecated
|
|
1430
|
+
--color-table-background-color-overlay-content: var(--color-neutral-light-00);
|
|
1431
|
+
/*Deprecated v17.x.x utilizar --color-neutral-light-00*/
|
|
1733
1432
|
|
|
1734
1433
|
--color-table-background-color-row-strip: var(--background-striped-color);
|
|
1735
|
-
/*Deprecated
|
|
1434
|
+
/*Deprecated v17.x.x utilizar --background-striped-color*/
|
|
1736
1435
|
|
|
1737
1436
|
--color-table-background-color-selected: var(--background-color-selected);
|
|
1738
|
-
/*Deprecated
|
|
1437
|
+
/*Deprecated v17.x.x utilizar --background-color-selected*/
|
|
1739
1438
|
|
|
1740
|
-
--color-table-background-color-table: var(--color-
|
|
1741
|
-
/*Deprecated
|
|
1439
|
+
--color-table-background-color-table: var(--color-neutral-light-00);
|
|
1440
|
+
/*Deprecated v17.x.x utilizar --color-neutral-light-00*/
|
|
1742
1441
|
|
|
1743
1442
|
--color-table-border-rows: var(--color-line);
|
|
1744
|
-
/*Deprecated
|
|
1443
|
+
/*Deprecated v17.x.x utilizar --color-line*/
|
|
1745
1444
|
|
|
1746
1445
|
--color-table-color-footer-show-subtitle: var(--color-neutral-dark-95);
|
|
1747
|
-
/*Deprecated
|
|
1446
|
+
/*Deprecated v17.x.x utilizar --color-neutral-dark-95*/
|
|
1748
1447
|
|
|
1749
|
-
--color-table-background-color-footer-show-subtitle: var(--color-
|
|
1750
|
-
/*Deprecated
|
|
1448
|
+
--color-table-background-color-footer-show-subtitle: var(--color-neutral-light-00);
|
|
1449
|
+
/*Deprecated v17.x.x utilizar --color-neutral-light-00*/
|
|
1751
1450
|
|
|
1752
|
-
--color-table-border-footer-show-subtitle: var(--color-neutral-light-
|
|
1753
|
-
/*Deprecated
|
|
1451
|
+
--color-table-border-footer-show-subtitle: var(--color-neutral-light-10);
|
|
1452
|
+
/*Deprecated v17.x.x utilizar --color-neutral-light-10*/
|
|
1754
1453
|
|
|
1755
1454
|
--color-table-box-shadow-footer: var(--color-line);
|
|
1756
|
-
/*Deprecated
|
|
1455
|
+
/*Deprecated v17.x.x utilizar --color-line*/
|
|
1757
1456
|
|
|
1758
1457
|
--color-table-box-shadow-overlay-content: var(--color-black-alpha-30);
|
|
1759
|
-
/*Deprecated
|
|
1458
|
+
/*Deprecated v17.x.x utilizar --color-black-alpha-30*/
|
|
1760
1459
|
|
|
1761
1460
|
--color-table-color-actions: var(--color-action-default);
|
|
1762
|
-
/*Deprecated
|
|
1461
|
+
/*Deprecated v17.x.x utilizar --color-action-default*/
|
|
1763
1462
|
|
|
1764
1463
|
--color-table-color-header: var(--color);
|
|
1765
|
-
/*Deprecated
|
|
1464
|
+
/*Deprecated v17.x.x utilizar --color*/
|
|
1766
1465
|
|
|
1767
1466
|
--color-table-color-text: var(--color);
|
|
1768
|
-
/*Deprecated
|
|
1467
|
+
/*Deprecated v17.x.x utilizar --color*/
|
|
1769
1468
|
|
|
1770
1469
|
--color-table-color-disabled: var(--color-disabled);
|
|
1771
|
-
/*Deprecated
|
|
1470
|
+
/*Deprecated v17.x.x utilizar --color-disabled*/
|
|
1772
1471
|
|
|
1773
|
-
--color-table-color-subtitle-text: var(--color-
|
|
1472
|
+
--color-table-color-subtitle-text: var(--color-neutral-light-00);
|
|
1473
|
+
/*Deprecated v17.x.x utilizar --color-neutral-light-00*/
|
|
1774
1474
|
|
|
1775
1475
|
--color-table-color-single-action-hover: var(--color-action-hover);
|
|
1476
|
+
/*Deprecated v17.x.x utilizar --color-action-hover*/
|
|
1776
1477
|
|
|
1777
1478
|
/*------------------------------------*\
|
|
1778
|
-
|
|
1779
|
-
|
|
1780
|
-
|
|
1781
|
-
--color-table-color-link-disabled: var(--color-neutral-light-80);
|
|
1479
|
+
TABLE COLUMN LINK
|
|
1480
|
+
\*------------------------------------*/
|
|
1481
|
+
--color-table-color-link-disabled: var(--color-neutral-light-20);
|
|
1782
1482
|
}
|
|
1783
1483
|
|
|
1784
1484
|
/*------------------------------------*\
|
|
1785
|
-
|
|
1485
|
+
TABLE LIST MANAGER
|
|
1786
1486
|
\*------------------------------------*/
|
|
1787
|
-
po-search {
|
|
1788
|
-
--font-family: var(--font-family-theme);
|
|
1789
|
-
--font-size: var(--font-size-default);
|
|
1790
|
-
--text-color-placeholder: var(--color-neutral-light-60);
|
|
1791
|
-
--color: var(--color-neutral);
|
|
1792
|
-
--border-radius: var(--border-radius-md);
|
|
1793
|
-
--background: var(--color-neutral-light-98);
|
|
1794
|
-
|
|
1795
|
-
--text-color: var(--color-neutral-dark-60);
|
|
1796
|
-
|
|
1797
|
-
--color-icon-read: var(--color-neutral);
|
|
1798
|
-
|
|
1799
|
-
--color-clear: var(--color-secondary);
|
|
1800
|
-
|
|
1801
|
-
--color-hover: var(--color-action-hover);
|
|
1802
|
-
--background-hover: var(--color-brand-01-lightest);
|
|
1803
|
-
|
|
1804
|
-
--color-focused: var(--color-secondary);
|
|
1805
|
-
--outline-color-focused: var(--color-action-focus);
|
|
1806
|
-
|
|
1807
|
-
--color-disabled: var(--color-action-disabled);
|
|
1808
|
-
--background-disabled: var(--color-neutral-light-20);
|
|
1809
|
-
}
|
|
1810
1487
|
|
|
1811
1488
|
po-table-list-manager {
|
|
1812
|
-
/*
|
|
1813
|
-
--color-type: var(--color-neutral);
|
|
1489
|
+
/* type */
|
|
1490
|
+
--color-type: var(--color-neutral-dark-70);
|
|
1814
1491
|
|
|
1815
|
-
/*
|
|
1492
|
+
/* column text */
|
|
1816
1493
|
--color-column-text: var(--color-neutral-dark-95);
|
|
1817
1494
|
}
|
|
1818
1495
|
|
|
1819
1496
|
:root {
|
|
1820
1497
|
/*------------------------------------*\
|
|
1821
|
-
|
|
1822
|
-
|
|
1823
|
-
|
|
1498
|
+
TABLE COLUMN MANAGER
|
|
1499
|
+
\*------------------------------------*/
|
|
1824
1500
|
--color-table-column-manager-body-color-background-scrollbar: var(--color-primary);
|
|
1825
|
-
--color-table-column-manager-border-color: var(--color-neutral-light-
|
|
1501
|
+
--color-table-column-manager-border-color: var(--color-neutral-light-10);
|
|
1826
1502
|
--color-table-column-manager-close-button-color: var(--color-primary);
|
|
1827
|
-
--color-table-column-manager-header-title: var(--color-neutral-dark-
|
|
1828
|
-
--color-table-column-manager-outline-color-focus: var(--color-
|
|
1503
|
+
--color-table-column-manager-header-title: var(--color-neutral-dark-90);
|
|
1504
|
+
--color-table-column-manager-outline-color-focus: var(--color-action-default);
|
|
1829
1505
|
}
|
|
1830
1506
|
|
|
1507
|
+
/*------------------------------------*\
|
|
1508
|
+
TAG
|
|
1509
|
+
\*------------------------------------*/
|
|
1831
1510
|
po-tag {
|
|
1832
1511
|
--border-radius: var(--border-radius-pill);
|
|
1833
1512
|
--font-family: var(--font-family-theme);
|
|
@@ -1835,15 +1514,15 @@ po-tag {
|
|
|
1835
1514
|
--line-height: var(--line-height-sm);
|
|
1836
1515
|
|
|
1837
1516
|
/* neutral */
|
|
1838
|
-
--color-neutral: var(--color-neutral-light-
|
|
1839
|
-
--text-color-neutral: var(--color-neutral-dark-
|
|
1517
|
+
--color-neutral: var(--color-neutral-light-10);
|
|
1518
|
+
--text-color-neutral: var(--color-neutral-dark-80);
|
|
1840
1519
|
|
|
1841
1520
|
/* positive */
|
|
1842
1521
|
--color-positive: var(--color-feedback-positive-lightest);
|
|
1843
1522
|
--text-color-positive: var(--color-feedback-positive-dark);
|
|
1844
1523
|
|
|
1845
1524
|
/* negative */
|
|
1846
|
-
--color-negative: var(--color-
|
|
1525
|
+
--color-negative: var(--color-feedback-negative-lightest);
|
|
1847
1526
|
--text-color-negative: var(--color-feedback-negative-darker);
|
|
1848
1527
|
|
|
1849
1528
|
/* warning */
|
|
@@ -1856,35 +1535,21 @@ po-tag {
|
|
|
1856
1535
|
|
|
1857
1536
|
/* removable */
|
|
1858
1537
|
--color: var(--color-brand-01-lightest);
|
|
1859
|
-
--border-color: var(--color-
|
|
1860
|
-
--color-icon: var(--color-
|
|
1861
|
-
--text-color: var(--color-neutral-dark-
|
|
1862
|
-
--color-hover: var(--color-
|
|
1863
|
-
--outline-color-focused: var(--color-
|
|
1538
|
+
--border-color: var(--color-brand-01-lighter);
|
|
1539
|
+
--color-icon: var(--color-action-default);
|
|
1540
|
+
--text-color: var(--color-neutral-dark-80);
|
|
1541
|
+
--color-hover: var(--color-brand-01-lighter);
|
|
1542
|
+
--outline-color-focused: var(--color-action-focus);
|
|
1864
1543
|
|
|
1865
1544
|
/* disable */
|
|
1866
|
-
--color-disabled: var(--color-neutral-light-
|
|
1545
|
+
--color-disabled: var(--color-neutral-light-20);
|
|
1867
1546
|
--border-color-disabled: var(--color-action-disabled);
|
|
1868
1547
|
--color-icon-disabled: var(--color-action-disabled);
|
|
1869
1548
|
--text-color-disabled: var(--color-neutral-mid-60);
|
|
1870
1549
|
}
|
|
1871
1550
|
|
|
1872
1551
|
:root {
|
|
1873
|
-
|
|
1874
|
-
TAG
|
|
1875
|
-
\*------------------------------------*/
|
|
1876
|
-
|
|
1877
|
-
--color-tag-color-danger: var(--text-color-negative); /*Deprecated v16.x.x utilizar --text-color-negative*/
|
|
1878
|
-
--color-tag-color-info: var(--text-color-info); /*Deprecated v16.x.x utilizar --text-color-info*/
|
|
1879
|
-
--color-tag-color-success: var(--text-color-positive); /*Deprecated v16.x.x utilizar --text-color-positive*/
|
|
1880
|
-
--color-tag-color-warning: var(--text-color-warning); /*Deprecated v16.x.x utilizar --text-color-warning*/
|
|
1881
|
-
--color-tag-color-text-label: var(--color-neutral);
|
|
1882
|
-
|
|
1883
|
-
--color-tag-background-color-danger: var(--color-negative); /*Deprecated v16.x.x utilizar --color-negative*/
|
|
1884
|
-
--color-tag-background-color-info: var(--color-info); /*Deprecated v16.x.x utilizar --color-info*/
|
|
1885
|
-
--color-tag-background-color-success: var(--color-positive); /*Deprecated v16.x.x utilizar --color-positive*/
|
|
1886
|
-
--color-tag-background-color-warning: var(--color-tag-warning); /*Deprecated v16.x.x utilizar --color-tag-warning*/
|
|
1887
|
-
--color-tag-background-color-white: var(--color-white);
|
|
1552
|
+
--color-tag-background-color-white: var(--color-neutral-light-00);
|
|
1888
1553
|
|
|
1889
1554
|
--color-tag-inverse-border-color-01: var(--color-01);
|
|
1890
1555
|
--color-tag-inverse-border-color-02: var(--color-02);
|
|
@@ -1907,165 +1572,146 @@ po-textarea {
|
|
|
1907
1572
|
--font-family: var(--font-family-theme);
|
|
1908
1573
|
--font-size: var(--font-size-default);
|
|
1909
1574
|
|
|
1910
|
-
--text-color-placeholder: var(--color-neutral-light-
|
|
1575
|
+
--text-color-placeholder: var(--color-neutral-light-30);
|
|
1911
1576
|
--color: var(--color-neutral-dark-70);
|
|
1912
|
-
--background: var(--color-neutral-light-
|
|
1577
|
+
--background: var(--color-neutral-light-05);
|
|
1913
1578
|
|
|
1914
|
-
--text-color: var(--color-neutral-dark-
|
|
1579
|
+
--text-color: var(--color-neutral-dark-90);
|
|
1915
1580
|
|
|
1916
|
-
--color-hover: var(--color-
|
|
1581
|
+
--color-hover: var(--color-brand-01-dark);
|
|
1917
1582
|
--background-hover: var(--color-brand-01-lightest);
|
|
1918
1583
|
|
|
1919
|
-
--color-focused: var(--color-
|
|
1584
|
+
--color-focused: var(--color-action-default);
|
|
1920
1585
|
|
|
1921
|
-
--outline-color-focused: var(--color-
|
|
1586
|
+
--outline-color-focused: var(--color-action-focus);
|
|
1922
1587
|
|
|
1923
|
-
--color-disabled: var(--color-neutral-light-
|
|
1924
|
-
--background-disabled: var(--color-neutral-light-
|
|
1588
|
+
--color-disabled: var(--color-neutral-light-30);
|
|
1589
|
+
--background-disabled: var(--color-neutral-light-20);
|
|
1925
1590
|
|
|
1926
1591
|
--text-color-readonly: var(--color-neutral-dark-70);
|
|
1927
1592
|
|
|
1928
|
-
--color-error: var(--color-
|
|
1593
|
+
--color-error: var(--color-feedback-negative-base);
|
|
1929
1594
|
}
|
|
1930
1595
|
|
|
1931
1596
|
:root {
|
|
1932
|
-
--color-textarea-background-color: var(---background);
|
|
1933
|
-
/* Deprecated v16.x.x utilizar ---background */
|
|
1934
|
-
--color-textarea-border: var(--color);
|
|
1935
|
-
/* Deprecated v16.x.x utilizar --color */
|
|
1936
|
-
--color-textarea-background-color-disabled: var(--background-disabled);
|
|
1937
|
-
/* Deprecated v16.x.x utilizar --background-disabled */
|
|
1938
|
-
--color-textarea-border-color-disabled: var(--color-disabled);
|
|
1939
|
-
/* Deprecated v16.x.x utilizar --color-disabled */
|
|
1940
|
-
--color-textarea-border-focusable: var(--color-focused);
|
|
1941
|
-
/* Deprecated v16.x.x utilizar --color-focused */
|
|
1942
|
-
|
|
1943
|
-
--color-textarea-color-error: var(--color-error);
|
|
1944
|
-
/* Deprecated v16.x.x utilizar --color-error */
|
|
1945
|
-
|
|
1946
1597
|
/*------------------------------------*\
|
|
1947
|
-
|
|
1948
|
-
|
|
1598
|
+
TOOLBAR
|
|
1599
|
+
\*------------------------------------*/
|
|
1949
1600
|
|
|
1950
|
-
--color-toolbar-background-color-badge: var(--color-
|
|
1951
|
-
--color-toolbar-background-color-toolbar: var(--color-
|
|
1601
|
+
--color-toolbar-background-color-badge: var(--color-feedback-negative-base);
|
|
1602
|
+
--color-toolbar-background-color-toolbar: var(--color-neutral-light-00);
|
|
1952
1603
|
|
|
1953
|
-
--color-toolbar-border-color-separator: var(--color-neutral-light-
|
|
1604
|
+
--color-toolbar-border-color-separator: var(--color-neutral-light-10);
|
|
1954
1605
|
|
|
1955
|
-
--color-toolbar-color-badge-text: var(--color-
|
|
1606
|
+
--color-toolbar-color-badge-text: var(--color-neutral-light-00);
|
|
1956
1607
|
--color-toolbar-color-default: var(--color-primary);
|
|
1957
|
-
--color-toolbar-color-title: var(--color-
|
|
1958
|
-
|
|
1959
|
-
/*------------------------------------*\
|
|
1960
|
-
TOOLTIP
|
|
1961
|
-
\*------------------------------------*/
|
|
1608
|
+
--color-toolbar-color-title: var(--color-action-default);
|
|
1962
1609
|
}
|
|
1963
1610
|
|
|
1611
|
+
/*------------------------------------*\
|
|
1612
|
+
TOOLTIP
|
|
1613
|
+
\*------------------------------------*/
|
|
1964
1614
|
.po-tooltip {
|
|
1965
|
-
--color: var(--color-neutral-dark-
|
|
1615
|
+
--color: var(--color-neutral-dark-80);
|
|
1966
1616
|
--border-radius: var(--border-radius-md);
|
|
1967
1617
|
--font-family: var(--font-family-theme);
|
|
1968
|
-
--text-color: var(--color-
|
|
1618
|
+
--text-color: var(--color-neutral-light-00);
|
|
1969
1619
|
}
|
|
1970
1620
|
|
|
1971
1621
|
:root {
|
|
1972
|
-
--color-tooltip-background-color-balloon: var(--color); /* Deprecated v16.x.x utilizar --color */
|
|
1973
|
-
--color-tooltip-color-text-balloon: var(--text-color); /* Deprecated v16.x.x utilizar --text-color*/
|
|
1974
|
-
|
|
1975
1622
|
/*------------------------------------*\
|
|
1976
|
-
|
|
1977
|
-
|
|
1623
|
+
TREEVIEW
|
|
1624
|
+
\*------------------------------------*/
|
|
1978
1625
|
|
|
1979
1626
|
/** Tree View Item */
|
|
1980
|
-
--color-tree-view-item-border-bottom-color: var(--color-neutral-light-
|
|
1627
|
+
--color-tree-view-item-border-bottom-color: var(--color-neutral-light-10);
|
|
1981
1628
|
|
|
1982
1629
|
/** Tree View Item Header */
|
|
1983
1630
|
--color-tree-view-item-header-button-color: var(--color-primary);
|
|
1984
|
-
--color-tree-view-item-header-button-focus: var(--color-
|
|
1985
|
-
--color-tree-view-item-header-label-text-color: var(--color-neutral);
|
|
1631
|
+
--color-tree-view-item-header-button-focus: var(--color-action-default);
|
|
1632
|
+
--color-tree-view-item-header-label-text-color: var(--color-neutral-dark-70);
|
|
1986
1633
|
|
|
1987
1634
|
/*------------------------------------*\
|
|
1988
|
-
|
|
1989
|
-
|
|
1635
|
+
UPLOAD
|
|
1636
|
+
\*------------------------------------*/
|
|
1990
1637
|
|
|
1991
|
-
--color-upload-color-text-filename-loading: var(--color-neutral-dark-
|
|
1638
|
+
--color-upload-color-text-filename-loading: var(--color-neutral-dark-90);
|
|
1992
1639
|
|
|
1993
|
-
--color-upload-background-color-disabled: var(--color-
|
|
1994
|
-
--color-upload-border-disabled: var(--color-neutral-light-
|
|
1995
|
-
--color-upload-color-disabled: var(--color-neutral-light-
|
|
1640
|
+
--color-upload-background-color-disabled: var(--color-neutral-light-00);
|
|
1641
|
+
--color-upload-border-disabled: var(--color-neutral-light-30);
|
|
1642
|
+
--color-upload-color-disabled: var(--color-neutral-light-30);
|
|
1996
1643
|
|
|
1997
|
-
--color-upload-background-color-hover: var(--color-
|
|
1644
|
+
--color-upload-background-color-hover: var(--color-neutral-light-00);
|
|
1998
1645
|
--color-upload-border-hover: var(--color-primary-dark-20);
|
|
1999
1646
|
--color-upload-color-hover: var(--color-primary-dark-20);
|
|
2000
1647
|
|
|
2001
|
-
--color-upload-background-color-pressed: var(--color-
|
|
1648
|
+
--color-upload-background-color-pressed: var(--color-neutral-light-00);
|
|
2002
1649
|
--color-upload-border-pressed: var(--color-primary-dark-40);
|
|
2003
1650
|
--color-upload-color-pressed: var(--color-primary-dark-40);
|
|
2004
1651
|
|
|
2005
|
-
--color-upload-color-progress: var(--color-
|
|
2006
|
-
--color-upload-color-text-load: var(--color-
|
|
1652
|
+
--color-upload-color-progress: var(--color-brand-03-base);
|
|
1653
|
+
--color-upload-color-text-load: var(--color-neutral-light-00);
|
|
2007
1654
|
--color-upload-background-color-success: var(--color-success);
|
|
2008
|
-
--color-upload-background-color-load-progress: var(--color-
|
|
2009
|
-
--color-upload-background-color-error: var(--color-
|
|
2010
|
-
--color-upload-color-text-load-waiting: var(--color-neutral);
|
|
1655
|
+
--color-upload-background-color-load-progress: var(--color-brand-03-base);
|
|
1656
|
+
--color-upload-background-color-error: var(--color-feedback-negative-base);
|
|
1657
|
+
--color-upload-color-text-load-waiting: var(--color-neutral-dark-70);
|
|
2011
1658
|
--color-upload-background-color-progress: var(--color-tertiary-light-90);
|
|
2012
1659
|
|
|
2013
1660
|
--color-upload-drag-drop-overlay-icon: var(--color-primary-alpha-50);
|
|
2014
1661
|
--color-upload-drag-drop-overlay-text: var(--color-primary);
|
|
2015
|
-
--color-upload-drag-drop-area-overlay-background-color: var(--color-
|
|
1662
|
+
--color-upload-drag-drop-area-overlay-background-color: var(--color-neutral-light-00);
|
|
2016
1663
|
|
|
2017
|
-
--color-upload-drag-drop-area-icon: var(--color-neutral-light-
|
|
2018
|
-
--color-upload-drag-drop-area-label-text: var(--color-neutral);
|
|
1664
|
+
--color-upload-drag-drop-area-icon: var(--color-neutral-light-20);
|
|
1665
|
+
--color-upload-drag-drop-area-label-text: var(--color-neutral-dark-70);
|
|
2019
1666
|
--color-upload-drag-drop-area-select-files-text: var(--color-primary);
|
|
2020
|
-
--color-upload-drag-drop-area-border: var(--color-neutral-light-
|
|
1667
|
+
--color-upload-drag-drop-area-border: var(--color-neutral-light-30);
|
|
2021
1668
|
--color-upload-drag-drop-area-border-primary: var(--color-primary);
|
|
2022
|
-
--color-upload-drag-drop-area-border-error: var(--color-
|
|
1669
|
+
--color-upload-drag-drop-area-border-error: var(--color-feedback-negative-base);
|
|
2023
1670
|
|
|
2024
|
-
--color-upload-drag-drop-area-background-color-disabled: var(--color-neutral-light-
|
|
2025
|
-
--color-upload-drag-drop-area-color-disabled: var(--color-neutral-light-
|
|
1671
|
+
--color-upload-drag-drop-area-background-color-disabled: var(--color-neutral-light-10);
|
|
1672
|
+
--color-upload-drag-drop-area-color-disabled: var(--color-neutral-light-30);
|
|
2026
1673
|
|
|
2027
|
-
--color-upload-file-restrictions-color-text: var(--color-neutral);
|
|
1674
|
+
--color-upload-file-restrictions-color-text: var(--color-neutral-dark-70);
|
|
2028
1675
|
}
|
|
2029
|
-
/*------------------------------------*\
|
|
2030
|
-
WIDGET
|
|
2031
|
-
\*------------------------------------*/
|
|
2032
1676
|
|
|
1677
|
+
/*------------------------------------*\
|
|
1678
|
+
WIDGET
|
|
1679
|
+
\*------------------------------------*/
|
|
2033
1680
|
po-widget {
|
|
2034
1681
|
--padding: 1em;
|
|
2035
1682
|
--border-radius: var(--border-radius-md);
|
|
2036
|
-
--border-color: var(--color-neutral-light-
|
|
2037
|
-
--background: var(--color-
|
|
1683
|
+
--border-color: var(--color-neutral-light-20);
|
|
1684
|
+
--background: var(--color-neutral-light-00);
|
|
2038
1685
|
--border-width: var(--border-width-sm);
|
|
2039
1686
|
--shadow: var(--shadow-md);
|
|
2040
1687
|
|
|
2041
1688
|
--background-selected: var(--color-brand-01-lightest);
|
|
2042
|
-
--border-color-selected: var(--color-
|
|
1689
|
+
--border-color-selected: var(--color-action-default);
|
|
2043
1690
|
|
|
2044
|
-
--border-color-hover: var(--color-
|
|
1691
|
+
--border-color-hover: var(--color-brand-01-dark);
|
|
2045
1692
|
--shadow-hover: var(--shadow-lg);
|
|
2046
1693
|
|
|
2047
|
-
--color-focused: var(--color-
|
|
2048
|
-
--outline-color-focused: var(--color-
|
|
1694
|
+
--color-focused: var(--color-action-default);
|
|
1695
|
+
--outline-color-focused: var(--color-action-focus);
|
|
2049
1696
|
}
|
|
2050
1697
|
|
|
2051
1698
|
:root {
|
|
2052
1699
|
--color-widget-color-action-active: var(--color-primary-dark-20);
|
|
2053
1700
|
--color-widget-color-action-hover: var(--color-primary-dark-20);
|
|
2054
1701
|
--color-widget-color-action: var(--color-primary);
|
|
2055
|
-
--color-widget-color-default: var(--color-neutral);
|
|
1702
|
+
--color-widget-color-default: var(--color-neutral-dark-70);
|
|
2056
1703
|
--color-widget-color-title-action: var(--color-primary);
|
|
2057
|
-
--color-widget-color-widget-primary: var(--color-neutral-dark-
|
|
1704
|
+
--color-widget-color-widget-primary: var(--color-neutral-dark-90);
|
|
2058
1705
|
|
|
2059
|
-
--color-widget-background-color: var(--
|
|
2060
|
-
--color-widget-primary-background-color: var(--color-tertiary);
|
|
1706
|
+
--color-widget-primary-background-color: var(--color-brand-03-base);
|
|
2061
1707
|
|
|
2062
|
-
--border-widget-border-no-shadow: solid var(--border-width) var(--color-neutral-light-
|
|
2063
|
-
--color-widget-border-color-footer: var(--color-neutral-light-
|
|
1708
|
+
--border-widget-border-no-shadow: solid var(--border-width) var(--color-neutral-light-10);
|
|
1709
|
+
--color-widget-border-color-footer: var(--color-neutral-light-10);
|
|
2064
1710
|
--color-widget-border-color-footer-primary: var(--color-white-alpha-30);
|
|
2065
1711
|
|
|
2066
|
-
--color-widget-background-color-disabled: var(--color-neutral-light-
|
|
2067
|
-
--color-widget-background-color-scroll-disabled: var(--color-neutral-
|
|
2068
|
-
--color-widget-color-disabled: var(--color-neutral-
|
|
1712
|
+
--color-widget-background-color-disabled: var(--color-neutral-light-10);
|
|
1713
|
+
--color-widget-background-color-scroll-disabled: var(--color-neutral-mid-40);
|
|
1714
|
+
--color-widget-color-disabled: var(--color-neutral-mid-40);
|
|
2069
1715
|
}
|
|
2070
1716
|
|
|
2071
1717
|
/*------------------------------------*\
|
|
@@ -2073,16 +1719,15 @@ po-widget {
|
|
|
2073
1719
|
\*------------------------------------*/
|
|
2074
1720
|
:root {
|
|
2075
1721
|
/*------------------------------------*\
|
|
2076
|
-
|
|
2077
|
-
|
|
2078
|
-
|
|
1722
|
+
TOASTER
|
|
1723
|
+
\*------------------------------------*/
|
|
2079
1724
|
/**
|
|
2080
1725
|
* Toaster Item Success
|
|
2081
1726
|
*/
|
|
2082
1727
|
--color-toaster-background-color-success: var(--color-feedback-positive-lightest);
|
|
2083
1728
|
--color-toaster-border-color-success: var(--color-feedback-positive-lighter);
|
|
2084
1729
|
--color-toaster-icon-background-color-success: var(--color-feedback-positive-base);
|
|
2085
|
-
--color-toaster-icon-color-success: var(--color-
|
|
1730
|
+
--color-toaster-icon-color-success: var(--color-neutral-light-00);
|
|
2086
1731
|
|
|
2087
1732
|
/**
|
|
2088
1733
|
* Toaster Item Warning
|
|
@@ -2095,10 +1740,10 @@ po-widget {
|
|
|
2095
1740
|
/**
|
|
2096
1741
|
* Toaster Item Error
|
|
2097
1742
|
*/
|
|
2098
|
-
--color-toaster-background-color-error: var(--color-
|
|
2099
|
-
--color-toaster-border-color-error: var(--color-
|
|
2100
|
-
--color-toaster-icon-background-color-error: var(--color-
|
|
2101
|
-
--color-toaster-icon-color-error: var(--color-
|
|
1743
|
+
--color-toaster-background-color-error: var(--color-feedback-negative-lightest);
|
|
1744
|
+
--color-toaster-border-color-error: var(--color-feedback-negative-lighter);
|
|
1745
|
+
--color-toaster-icon-background-color-error: var(--color-feedback-negative-base);
|
|
1746
|
+
--color-toaster-icon-color-error: var(--color-neutral-light-00);
|
|
2102
1747
|
|
|
2103
1748
|
/**
|
|
2104
1749
|
* Toaster Item Info
|
|
@@ -2106,5 +1751,5 @@ po-widget {
|
|
|
2106
1751
|
--color-toaster-background-color-info: var(--color-feedback-info-lightest);
|
|
2107
1752
|
--color-toaster-border-color-info: var(--color-feedback-info-lighter);
|
|
2108
1753
|
--color-toaster-icon-background-color-info: var(--color-feedback-info-base);
|
|
2109
|
-
--color-toaster-icon-color-info: var(--color-
|
|
1754
|
+
--color-toaster-icon-color-info: var(--color-neutral-light-00);
|
|
2110
1755
|
}
|