@po-ui/style 14.4.0 → 14.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/css/po-theme-core.min.css +1 -1
  2. package/css/po-theme-default-variables.css +281 -174
  3. package/css/po-theme-default-variables.min.css +1 -1
  4. package/css/po-theme-default.min.css +1 -1
  5. package/package.json +1 -1
package/css/po-theme-default-variables.css CHANGED
@@ -160,22 +160,28 @@
160
160
  --color-primary-dark-40: #8b255a;
161
161
 
162
162
  /* Secondary */
163
- --color-secondary-light-20: var(--color-brand-01-lighter); /*Deprecated v16.x.x utilizar --color-brand-01-lighter*/
163
+ --color-secondary-light-20: var(--color-brand-01-lighter);
164
+ /*Deprecated v16.x.x utilizar --color-brand-01-lighter*/
164
165
 
165
- --color-secondary-light-40: var(--color-brand-01-light); /*Deprecated v16.x.x utilizar --color-brand-01-light*/
166
+ --color-secondary-light-40: var(--color-brand-01-light);
167
+ /*Deprecated v16.x.x utilizar --color-brand-01-light*/
166
168
 
167
- --color-secondary: var(--color-action-default); /*Deprecated v16.x.x utilizar --color-action-default*/
169
+ --color-secondary: var(--color-action-default);
170
+ /*Deprecated v16.x.x utilizar --color-action-default*/
168
171
 
169
- --color-secondary-dark-20: var(--color-brand-01-dark); /*Deprecated v16.x.x utilizar --color-brand-01-dark*/
172
+ --color-secondary-dark-20: var(--color-brand-01-dark);
173
+ /*Deprecated v16.x.x utilizar --color-brand-01-dark*/
170
174
 
171
- --color-secondary-dark-40: var(--color-brand-01-darker); /*Deprecated v16.x.x utilizar --color-brand-01-darker*/
175
+ --color-secondary-dark-40: var(--color-brand-01-darker);
176
+ /*Deprecated v16.x.x utilizar --color-brand-01-darker*/
172
177
 
173
178
  /* Overlay de Modal e Menu (70% de opacidade) */
174
179
  --color-secondary-dark-60-alpha-70: rgba(59, 28, 74, 0.7);
175
180
 
176
181
  --color-secondary-dark-60: #3b1c4a;
177
182
 
178
- --color-secondary-dark-80: var(--color-brand-01-darkest); /*Deprecated v16.x.x utilizar --color-brand-01-darkest*/
183
+ --color-secondary-dark-80: var(--color-brand-01-darkest);
184
+ /*Deprecated v16.x.x utilizar --color-brand-01-darkest*/
179
185
 
180
186
  /* Tertiary */
181
187
 
@@ -183,7 +189,8 @@
183
189
  --color-tertiary-light-90: #fffaef;
184
190
 
185
191
  /* Borda esquerda do menu lateral selecionado, Tab selecionada, Card em destaque */
186
- --color-tertiary: var(--color-brand-03-base); /*Deprecated v16.x.x utilizar --color-brand-03-base*/
192
+ --color-tertiary: var(--color-brand-03-base);
193
+ /*Deprecated v16.x.x utilizar --color-brand-03-base*/
187
194
 
188
195
  /* Cor de gráficos, botão do disclaimer */
189
196
  --color-tertiary-dark-5: #f4d069;
@@ -192,24 +199,30 @@
192
199
 
193
200
  --color-tertiary-dark-60: #ac9249;
194
201
 
195
- --color-white: var(--color-neutral-light-00); /*Deprecated v16.x.x utilizar --color-neutral-light-00*/
202
+ --color-white: var(--color-neutral-light-00);
203
+ /*Deprecated v16.x.x utilizar --color-neutral-light-00*/
196
204
 
197
205
  --color-white-alpha-30: rgba(255, 255, 255, 0.3);
198
206
 
199
207
  /* Background da página, Background da linha selecionada */
200
- --color-neutral-light-98: var(--color-neutral-light-05); /*Deprecated v16.x.x utilizar --color-neutral-light-05*/
208
+ --color-neutral-light-98: var(--color-neutral-light-05);
209
+ /*Deprecated v16.x.x utilizar --color-neutral-light-05*/
201
210
 
202
211
  /* Borda inferior de item de tabela, Base do Slider, Background do Input inativo */
203
- --color-neutral-light-90: var(--color-neutral-light-10); /*Deprecated v16.x.x utilizar --color-neutral-light-10*/
212
+ --color-neutral-light-90: var(--color-neutral-light-10);
213
+ /*Deprecated v16.x.x utilizar --color-neutral-light-10*/
204
214
 
205
215
  /* Step inativo, Base Switch desligado */
206
- --color-neutral-light-80: var(--color-neutral-light-20); /*Deprecated v16.x.x utilizar --color-neutral-light-20*/
216
+ --color-neutral-light-80: var(--color-neutral-light-20);
217
+ /*Deprecated v16.x.x utilizar --color-neutral-light-20*/
207
218
 
208
219
  /* Ícone desabilitado, Slider desabilitado, Borda de input */
209
- --color-neutral-light-60: var(--color-neutral-light-30); /*Deprecated v16.x.x utilizar --color-neutral-light-30*/
220
+ --color-neutral-light-60: var(--color-neutral-light-30);
221
+ /*Deprecated v16.x.x utilizar --color-neutral-light-30*/
210
222
 
211
223
  /* Texto do Placeholder */
212
- --color-neutral-light-40: var(--color-neutral-mid-40); /*Deprecated v16.x.x utilizar --color-neutral-mid-40*/
224
+ --color-neutral-light-40: var(--color-neutral-mid-40);
225
+ /*Deprecated v16.x.x utilizar --color-neutral-mid-40*/
213
226
 
214
227
  /* Borda superior do itens do menu (45% de opacidade) */
215
228
  --color-neutral-alpha-45: rgba(74, 92, 96, 0.45);
@@ -218,10 +231,12 @@
218
231
  --color-neutral: #4a5c60;
219
232
 
220
233
  /* Usar em menu: Área do logo, Background do menu */
221
- --color-neutral-dark-40: var(--color-neutral-dark-80); /*Deprecated v16.x.x utilizar --color-neutral-dark-80*/
234
+ --color-neutral-dark-40: var(--color-neutral-dark-80);
235
+ /*Deprecated v16.x.x utilizar --color-neutral-dark-80*/
222
236
 
223
237
  /* Texto */
224
- --color-neutral-dark-60: var(--color-neutral-dark-90); /*Deprecated v16.x.x utilizar --color-neutral-dark-90*/
238
+ --color-neutral-dark-60: var(--color-neutral-dark-90);
239
+ /*Deprecated v16.x.x utilizar --color-neutral-dark-90*/
225
240
 
226
241
  --color-neutral-dark-90: #1d1d30;
227
242
 
@@ -244,37 +259,35 @@
244
259
 
245
260
  /* Background do Feedback de erro */
246
261
  --color-danger-light-05: var(
247
- --color-feedback-negative-light
262
+ --color-feedback-negative-lightest
248
263
  ); /*Deprecated v16.x.x utilizar --color-feedback-negative-lightest*/
249
264
 
250
- --color-danger-light-20: var(
251
- --color-feedback-negative-lighter
252
- ); /*Deprecated v16.x.x utilizar --color-feedback-negative-lighter*/
265
+ --color-danger-light-20: var(--color-feedback-negative-lighter);
266
+ /*Deprecated v16.x.x utilizar --color-feedback-negative-lighter*/
253
267
 
254
- --color-danger-light-40: var(
255
- --color-feedback-negative-light
256
- ); /*Deprecated v16.x.x utilizar --color-feedback-negative-light*/
268
+ --color-danger-light-40: var(--color-feedback-negative-light);
269
+ /*Deprecated v16.x.x utilizar --color-feedback-negative-light*/
257
270
 
258
271
  /* Background do Feedback de erro, Borda de Input com erro */
259
- --color-danger: var(--color-feedback-negative-base); /*Deprecated v16.x.x utilizar --color-feedback-negative-base*/
272
+ --color-danger: var(--color-feedback-negative-base);
273
+ /*Deprecated v16.x.x utilizar --color-feedback-negative-base*/
260
274
 
261
275
  /* Background disclaimer danger */
262
- --color-danger-dark-5: var(
263
- --color-feedback-negative-dark
264
- ); /*Deprecated v16.x.x utilizar --color-feedback-negative-dark*/
276
+ --color-danger-dark-5: var(--color-feedback-negative-dark);
277
+ /*Deprecated v16.x.x utilizar --color-feedback-negative-dark*/
265
278
 
266
279
  /* Hover para botão danger */
267
280
  --color-danger-dark-20: #9e3933;
268
281
 
269
282
  /* Estilo ativo para botão danger */
270
- --color-danger-dark-40: var(
271
- --color-feedback-negative-darkest
272
- ); /*Deprecated v16.x.x utilizar --color-feedback-negative-darkest*/
283
+ --color-danger-dark-40: var(--color-feedback-negative-darkest);
284
+ /*Deprecated v16.x.x utilizar --color-feedback-negative-darkest*/
273
285
 
274
286
  --color-transparent: transparent;
275
287
 
276
288
  /* Cor padrão para o focus */
277
- --color-outline-focused: var(--color-action-focus); /*Deprecated v16.x.x utilizar --color-action-focus*/
289
+ --color-outline-focused: var(--color-action-focus);
290
+ /*Deprecated v16.x.x utilizar --color-action-focus*/
278
291
 
279
292
  /*------------------------------------*\
280
293
  COLOR-PALETTE
@@ -430,107 +443,117 @@ po-button {
430
443
  */
431
444
 
432
445
  :root {
433
- --color-button-background-color: var(--background-color); /*Deprecated v16.x.x utilizar --background-color*/
434
- --color-button-border: var(--color); /*Deprecated v16.x.x utilizar --color*/
435
- --color-button-color: var(--color); /*Deprecated v16.x.x utilizar --color*/
446
+ --color-button-background-color: var(--background-color);
447
+ /*Deprecated v16.x.x utilizar --background-color*/
448
+ --color-button-border: var(--color);
449
+ /*Deprecated v16.x.x utilizar --color*/
450
+ --color-button-color: var(--color);
451
+ /*Deprecated v16.x.x utilizar --color*/
436
452
  --color-button-box-shadow: var(--shadow);
437
453
 
438
- --color-button-background-color-hover: var(--background-hover); /*Deprecated v16.x.x utilizar --background-hover*/
439
- --color-button-border-hover: var(--border-color-hover); /*Deprecated v16.x.x utilizar --border-color-hover*/
440
- --color-button-color-hover: var(--border-color-hover); /*Deprecated v16.x.x utilizar --border-color-hover*/
441
-
442
- --color-button-background-color-pressed: var(
443
- --background-pressed
444
- ); /*Deprecated v16.x.x utilizar --background-pressed*/
445
- --color-button-border-pressed: var(--border-color-hover); /*Deprecated v16.x.x utilizar --border-color-pressed*/
446
- --color-button-color-pressed: var(--border-color-hover); /*Deprecated v16.x.x utilizar --border-color-hover*/
447
-
448
- --color-button-background-color-disabled: var(
449
- --background-color-disabled
450
- ); /*Deprecated v16.x.x utilizar --background-color-disabled*/
451
- --color-button-border-disabled: var(--color-disabled); /*Deprecated v16.x.x utilizar --border-color-disabled*/
452
- --color-button-color-disabled: var(--color-disabled); /*Deprecated v16.x.x utilizar --color-disabled*/
454
+ --color-button-background-color-hover: var(--background-hover);
455
+ /*Deprecated v16.x.x utilizar --background-hover*/
456
+ --color-button-border-hover: var(--border-color-hover);
457
+ /*Deprecated v16.x.x utilizar --border-color-hover*/
458
+ --color-button-color-hover: var(--border-color-hover);
459
+ /*Deprecated v16.x.x utilizar --border-color-hover*/
460
+
461
+ --color-button-background-color-pressed: var(--background-pressed);
462
+ /*Deprecated v16.x.x utilizar --background-pressed*/
463
+ --color-button-border-pressed: var(--border-color-hover);
464
+ /*Deprecated v16.x.x utilizar --border-color-pressed*/
465
+ --color-button-color-pressed: var(--border-color-hover);
466
+ /*Deprecated v16.x.x utilizar --border-color-hover*/
467
+
468
+ --color-button-background-color-disabled: var(--background-color-disabled);
469
+ /*Deprecated v16.x.x utilizar --background-color-disabled*/
470
+ --color-button-border-disabled: var(--color-disabled);
471
+ /*Deprecated v16.x.x utilizar --border-color-disabled*/
472
+ --color-button-color-disabled: var(--color-disabled);
473
+ /*Deprecated v16.x.x utilizar --color-disabled*/
453
474
  /**
454
475
  * Button Primary
455
476
  */
456
- --color-button-background-color-primary: var(--color); /*Deprecated v16.x.x utilizar --background-color*/
457
- --color-button-border-primary: var(--border-color); /*Deprecated v16.x.x utilizar --border-color*/
458
- --color-button-color-primary: var(--text-color); /*Deprecated v16.x.x utilizar --color*/
459
-
460
- --color-button-background-color-primary-hover: var(--color-hover); /*Deprecated v16.x.x utilizar --color-hover*/
461
- --color-button-color-primary-hover: var(--text-color); /*Deprecated v16.x.x utilizar --text-color*/
462
-
463
- --color-button-background-color-primary-pressed: var(--color-pressed); /*Deprecated v16.x.x utilizar --color-pressed*/
464
- --color-button-color-primary-pressed: var(--text-color); /*Deprecated v16.x.x utilizar --color-pressed*/
465
-
466
- --color-button-background-color-primary-disabled: var(
467
- --color-disabled
468
- ); /*Deprecated v16.x.x utilizar --background-color-disabled*/
469
- --color-button-color-primary-disabled: var(--text-color-disabled); /*Deprecated v16.x.x utilizar --color-disabled*/
477
+ --color-button-background-color-primary: var(--color);
478
+ /*Deprecated v16.x.x utilizar --background-color*/
479
+ --color-button-border-primary: var(--border-color);
480
+ /*Deprecated v16.x.x utilizar --border-color*/
481
+ --color-button-color-primary: var(--text-color);
482
+ /*Deprecated v16.x.x utilizar --color*/
483
+
484
+ --color-button-background-color-primary-hover: var(--color-hover);
485
+ /*Deprecated v16.x.x utilizar --color-hover*/
486
+ --color-button-color-primary-hover: var(--text-color);
487
+ /*Deprecated v16.x.x utilizar --text-color*/
488
+
489
+ --color-button-background-color-primary-pressed: var(--color-pressed);
490
+ /*Deprecated v16.x.x utilizar --color-pressed*/
491
+ --color-button-color-primary-pressed: var(--text-color);
492
+ /*Deprecated v16.x.x utilizar --color-pressed*/
493
+
494
+ --color-button-background-color-primary-disabled: var(--color-disabled);
495
+ /*Deprecated v16.x.x utilizar --background-color-disabled*/
496
+ --color-button-color-primary-disabled: var(--text-color-disabled);
497
+ /*Deprecated v16.x.x utilizar --color-disabled*/
470
498
 
471
499
  /**
472
500
  * Button Danger primary
473
501
  */
474
- --color-button-primary-background-color-danger: var(
475
- --color-button-danger
476
- ); /*Deprecated v16.x.x utilizar --background-color-danger*/
477
- --color-button-primary-background-color-danger-hover: var(
478
- --color-danger-hover
479
- ); /*Deprecated v16.x.x utilizar --color-danger-hover*/
480
- --color-button-primary-background-color-danger-pressed: var(
481
- --color-danger-pressed
482
- ); /*Deprecated v16.x.x utilizar --background-color-danger-pressed*/
502
+ --color-button-primary-background-color-danger: var(--color-button-danger);
503
+ /*Deprecated v16.x.x utilizar --background-color-danger*/
504
+ --color-button-primary-background-color-danger-hover: var(--color-danger-hover);
505
+ /*Deprecated v16.x.x utilizar --color-danger-hover*/
506
+ --color-button-primary-background-color-danger-pressed: var(--color-danger-pressed);
507
+ /*Deprecated v16.x.x utilizar --background-color-danger-pressed*/
483
508
 
484
509
  /**
485
510
  * Button Danger secondary
486
511
  */
487
- --color-button-background-color-danger: var(
488
- --background-color-button-danger
489
- ); /*Deprecated v16.x.x utilizar --background-color-danger*/
490
- --color-button-border-danger: var(--color-button-danger); /*Deprecated v16.x.x utilizar --border-color-danger*/
491
- --color-button-color-danger: var(--color-button-danger); /*Deprecated v16.x.x utilizar --color-danger*/
492
-
493
- --color-button-background-color-danger-hover: var(
494
- --background-danger-hover
495
- ); /*Deprecated v16.x.x utilizar --background-danger-hover*/
496
- --color-button-border-danger-hover: var(
497
- --border-color-danger-hover
498
- ); /*Deprecated v16.x.x utilizar --border-color-danger-hover*/
499
- --color-button-color-danger-hover: var(
500
- --border-color-danger-hover
501
- ); /*Deprecated v16.x.x utilizar --color-danger-hover*/
502
-
503
- --color-button-background-color-danger-pressed: var(
504
- --background-danger-pressed
505
- ); /*Deprecated v16.x.x utilizar --background-danger-pressed*/
506
- --color-button-border-danger-pressed: var(
507
- --border-color-danger-hover
508
- ); /*Deprecated v16.x.x utilizar --border-color-danger-hover*/
509
- --color-button-color-danger-pressed: var(
510
- --border-color-danger-hover
511
- ); /*Deprecated v16.x.x utilizar --border-color-danger-hover*/
512
+ --color-button-background-color-danger: var(--background-color-button-danger);
513
+ /*Deprecated v16.x.x utilizar --background-color-danger*/
514
+ --color-button-border-danger: var(--color-button-danger);
515
+ /*Deprecated v16.x.x utilizar --border-color-danger*/
516
+ --color-button-color-danger: var(--color-button-danger);
517
+ /*Deprecated v16.x.x utilizar --color-danger*/
518
+
519
+ --color-button-background-color-danger-hover: var(--background-danger-hover);
520
+ /*Deprecated v16.x.x utilizar --background-danger-hover*/
521
+ --color-button-border-danger-hover: var(--border-color-danger-hover);
522
+ /*Deprecated v16.x.x utilizar --border-color-danger-hover*/
523
+ --color-button-color-danger-hover: var(--border-color-danger-hover);
524
+ /*Deprecated v16.x.x utilizar --color-danger-hover*/
525
+
526
+ --color-button-background-color-danger-pressed: var(--background-danger-pressed);
527
+ /*Deprecated v16.x.x utilizar --background-danger-pressed*/
528
+ --color-button-border-danger-pressed: var(--border-color-danger-hover);
529
+ /*Deprecated v16.x.x utilizar --border-color-danger-hover*/
530
+ --color-button-color-danger-pressed: var(--border-color-danger-hover);
531
+ /*Deprecated v16.x.x utilizar --border-color-danger-hover*/
512
532
 
513
533
  /**
514
534
  * Button Link
515
535
  */
516
- --color-button-background-color-link: var(--background-color); /*Deprecated v16.x.x utilizar --background-color*/
517
- --color-button-color-link: var(--color); /*Deprecated v16.x.x utilizar --color*/
518
- --color-button-border-color-link: var(--border-color); /*Deprecated v16.x.x utilizar --border-color*/
536
+ --color-button-background-color-link: var(--background-color);
537
+ /*Deprecated v16.x.x utilizar --background-color*/
538
+ --color-button-color-link: var(--color);
539
+ /*Deprecated v16.x.x utilizar --color*/
540
+ --color-button-border-color-link: var(--border-color);
541
+ /*Deprecated v16.x.x utilizar --border-color*/
519
542
 
520
- --color-button-background-color-link-hover: var(
521
- --background-hover
522
- ); /*Deprecated v16.x.x utilizar --background-color-hover*/
523
- --color-button-color-link-hover: var(--border-color-hover); /*Deprecated v16.x.x utilizar --border-color-hover*/
543
+ --color-button-background-color-link-hover: var(--background-hover);
544
+ /*Deprecated v16.x.x utilizar --background-color-hover*/
545
+ --color-button-color-link-hover: var(--border-color-hover);
546
+ /*Deprecated v16.x.x utilizar --border-color-hover*/
524
547
 
525
- --color-button-background-color-link-pressed: var(
526
- --background-color-pressed
527
- ); /*Deprecated v16.x.x utilizar --background-color-pressed*/
528
- --color-button-color-link-pressed: var(--color-pressed); /*Deprecated v16.x.x utilizar --color-pressed*/
548
+ --color-button-background-color-link-pressed: var(--background-color-pressed);
549
+ /*Deprecated v16.x.x utilizar --background-color-pressed*/
550
+ --color-button-color-link-pressed: var(--color-pressed);
551
+ /*Deprecated v16.x.x utilizar --color-pressed*/
529
552
 
530
- --color-button-background-color-link-disabled: var(
531
- --background-color-disabled
532
- ); /*Deprecated v16.x.x utilizar --background-color-disabled*/
533
- --color-button-color-link-disabled: var(--color-disabled); /*Deprecated v16.x.x utilizar --color-disabled*/
553
+ --color-button-background-color-link-disabled: var(--background-color-disabled);
554
+ /*Deprecated v16.x.x utilizar --background-color-disabled*/
555
+ --color-button-color-link-disabled: var(--color-disabled);
556
+ /*Deprecated v16.x.x utilizar --color-disabled*/
534
557
 
535
558
  /*------------------------------------*\
536
559
  BADGE
@@ -687,11 +710,11 @@ po-button {
687
710
  DATEPICKER RANGE
688
711
  \*------------------------------------*/
689
712
 
690
- --color-datepicker-range-background-color-disabled: var(--color-neutral-light-90);
713
+ --color-datepicker-range-background-color-disabled: var(--color-neutral-light-80);
691
714
  --color-datepicker-range-border-text: var(--color-neutral-light-60);
692
715
  --color-datepicker-range-border-text-error: var(--color-danger);
693
716
  --color-datepicker-range-color-disabled: var(--color-neutral-light-60);
694
- --color-datepicker-range-color-focused: var(--color-primary);
717
+ --color-datepicker-range-color-focused: var(--color-secondary);
695
718
  --color-datepicker-range-color-text-error: var(--color-danger);
696
719
 
697
720
  /*------------------------------------*\
@@ -780,19 +803,50 @@ po-button {
780
803
  --color-info-color-link: var(--color-primary);
781
804
  --color-info-color-link-hover: var(--color-primary-dark-20);
782
805
  --color-info-color-link-pressed: var(--color-primary-dark-40);
783
-
784
- /*------------------------------------*\
806
+ }
807
+ /*------------------------------------*\
785
808
  INPUT
786
809
  \*------------------------------------*/
787
810
 
788
- --color-input-background-color-text: var(--color-white);
789
- --color-input-border-text: var(--color-neutral-light-60);
790
- --color-input-border-text-disabled: var(--color-neutral-light-90);
791
- --color-input-border-text-focusable: var(--color-primary);
811
+ po-input,
812
+ po-url,
813
+ po-login,
814
+ po-email,
815
+ po-password,
816
+ po-combo,
817
+ po-lookup,
818
+ po-decimal,
819
+ po-number,
820
+ po-multiselect,
821
+ po-datepicker,
822
+ po-datepicker-range,
823
+ div.po-lookup-filter-content input.po-input,
824
+ input.po-input {
825
+ --font-family: var(--font-family-theme);
826
+ --font-size: var(--font-size-default);
827
+ --text-color-placeholder: var(--color-neutral-light-60);
828
+ --color: var(--color-neutral-dark-70);
829
+ --background: var(--color-neutral-light-98);
830
+ --padding: 0 0.5rem;
831
+ --text-color: var(--color-neutral-dark-60);
832
+ --color-hover: var(--color-secondary-dark-20);
833
+ --background-hover: var(--color-brand-01-lightest);
834
+ --color-focused: var(--color-secondary);
835
+ --outline-color-focused: var(--color-outline-focused);
836
+ --color-disabled: var(--color-neutral-light-60);
837
+ --background-disabled: var(--color-neutral-light-80);
838
+ --text-color-disabled: var(--color-neutral-dark-70);
839
+ }
840
+
841
+ :root {
842
+ --color-input-background-color-text: var(--background);
843
+ --color-input-border-text: var(--color-disabled);
844
+ --color-input-border-text-disabled: var(--background-disabled);
845
+ --color-input-border-text-focusable: var(--color-focused);
792
846
  --color-input-border-text-error: var(--color-danger);
793
- --color-input-color-disabled: var(--color-neutral-light-60);
847
+ --color-input-color-disabled: var(--text-color-disabled);
794
848
  --color-input-text-error: var(--color-danger);
795
- --color-input-text-placeholder: var(--color-neutral-light-40);
849
+ --color-input-text-placeholder: var(--text-color-placeholder);
796
850
 
797
851
  /*------------------------------------*\
798
852
  LIST VIEW
@@ -908,7 +962,7 @@ po-button {
908
962
 
909
963
  --color-multiselect-border-field: var(--color-neutral-light-60);
910
964
  --color-multiselect-border-field-error: var(--color-danger);
911
- --color-multiselect-border-field-focus: var(--color-primary);
965
+ --color-multiselect-border-field-focus: var(--color-secondary-dark-20);
912
966
  --color-multiselect-border-search: var(--color-neutral-light-80);
913
967
 
914
968
  --color-multiselect-color-field-focus: var(--color-primary);
@@ -1087,38 +1141,46 @@ po-button {
1087
1141
  --color-progress-bar-background-color-default: var(--color-primary);
1088
1142
  --color-progress-bar-background-color-success: var(--color-success);
1089
1143
  --color-progress-bar-background-color-error: var(--color-danger);
1144
+ }
1090
1145
 
1091
- /*------------------------------------*\
1092
- RADIO
1093
- \*------------------------------------*/
1146
+ /*------------------------------------*\
1147
+ RADIO
1148
+ \*------------------------------------*/
1149
+
1150
+ po-radio {
1151
+ --color-unchecked: var(--color-white);
1152
+ --border-color: var(--color-neutral-dark-70);
1094
1153
 
1095
- --color-radio-background-color: var(--color-white);
1096
- --color-radio-background-color-active: var(--color-secondary);
1097
- --color-radio-background-color-disabled: var(--color-neutral-light-60);
1098
- --color-radio-box-shadow-color-focusable: var(--color-secondary-dark-80);
1154
+ /* hover */
1155
+ --shadow-color-hover: var(--color-secondary-light-20);
1156
+ --color-hover: var(--color-secondary-dark-20);
1099
1157
 
1100
- --color-radio-border-input: var(--color-neutral-dark-70);
1101
- --color-radio-border-input-active: var(--color-secondary);
1102
- --color-radio-border-input-disabled: var(--color-neutral-dark-70);
1103
- --color-radio-border-input-invalid: var(--danger-color);
1104
- --color-radio-hover-active: var(--color-secondary-light-20);
1158
+ /* focus */
1159
+ --outline-color-focused: var(--color-secondary-dark-80);
1105
1160
 
1106
- --color-radio-color-active: var(--color-secondary);
1161
+ /* checked */
1162
+ --color-checked: var(--color-secondary);
1107
1163
 
1164
+ /* disabled */
1165
+ --color-unchecked-disabled: var(--color-neutral-light-60);
1166
+ --color-checked-disabled: var(--color-neutral-dark-70);
1167
+ }
1168
+
1169
+ :root {
1108
1170
  /*------------------------------------*\
1109
1171
  RADIO-GROUP
1110
1172
  \*------------------------------------*/
1111
1173
 
1112
- --color-radio-group-background-color: var(--color-white);
1113
- --color-radio-group-background-color-active: var(--color-primary);
1114
- --color-radio-group-background-color-input-disabled: var(--color-neutral-light-90);
1115
-
1116
- --color-radio-group-border-color: var(--color-neutral-light-60);
1117
- --color-radio-group-border-color-focusable: var(--color-primary-dark-20);
1118
- --color-radio-group-border-color-input-error: var(--color-danger);
1174
+ --color-radio-group-background-color: var(--color-unchecked); /* Deprecated v16.x.x utilizar --color-unchecked */
1175
+ --color-radio-group-background-color-active: var(--color-checked); /* Deprecated v16.x.x utilizar --color-checked */
1176
+ --color-radio-group-background-color-input-disabled: var(
1177
+ --color-unchecked-disabled
1178
+ ); /* Deprecated v16.x.x utilizar --color-unchecked-disabled */
1119
1179
 
1120
- --color-radio-group-color-label-active: var(--color-white);
1121
- --color-radio-group-color-text-disabled: var(--color-neutral-light-60);
1180
+ --color-radio-group-border-color: var(--border-color); /* Deprecated v16.x.x utilizar --border-color */
1181
+ --color-radio-group-border-color-focusable: var(
1182
+ --outline-color-focused
1183
+ ); /* Deprecated v16.x.x utilizar --outline-color-focused */
1122
1184
 
1123
1185
  /*------------------------------------*\
1124
1186
  RICH TEXT
@@ -1137,31 +1199,52 @@ po-button {
1137
1199
  --color-rich-text-placeholder-color: var(--color-neutral-light-40);
1138
1200
 
1139
1201
  --color-rich-text-toolbar-background-color: var(--color-rich-text-body-background-color);
1202
+ }
1140
1203
 
1141
- /*------------------------------------*\
1142
- SELECT
1143
- \*------------------------------------*/
1204
+ /*------------------------------------*\
1205
+ SELECT
1206
+ \*------------------------------------*/
1207
+
1208
+ po-select {
1209
+ --font-family: var(--font-family-theme);
1210
+ --font-size: var(--font-size-default);
1144
1211
 
1145
- --color-select-background-color: var(--color-white);
1146
- --color-select-background-color-disabled: var(--color-neutral-light-90);
1212
+ --text-color-empty: var(--color-neutral-light-60);
1213
+ --color: var(--color-neutral-dark-70);
1214
+ --background: var(--color-neutral-light-98);
1215
+ --padding-horizontal: 0.5em;
1216
+ --padding-vertical: 0.7em;
1147
1217
 
1148
- --color-select-background-color-item-hover: var(--color-primary-light-95);
1149
- --color-select-background-color-scrollbar: var(--color-primary-alpha-50);
1218
+ --text-color: var(--color-neutral-dark-60);
1150
1219
 
1151
- --color-select-border-button: var(--color-neutral-light-60);
1152
- --color-select-border-button-error: var(--color-danger);
1153
- --color-select-border-button-disabled: var(--color-neutral-light-60);
1154
- --color-select-border-button-hover: var(--color-primary);
1155
- --color-select-border-button-focus: var(--color-primary);
1220
+ --color-hover: var(--color-secondary-dark-20);
1221
+ --background-hover: var(--color-brand-01-lightest);
1156
1222
 
1157
- --color-select-button-disabled: var(--color-neutral-light-60);
1158
- --color-select-button-focus: var(--color-primary);
1223
+ --color-focused: var(--color-secondary);
1224
+ --outline-color-focused: var(--color-outline-focused);
1225
+
1226
+ --color-disabled: var(--color-neutral-light-60);
1227
+ --background-disabled: var(--color-neutral-light-80);
1228
+ }
1229
+
1230
+ :root {
1231
+ --color-select-background-color: var(--background); /* Deprecated v16.x.x utilizar --background */
1232
+ --color-select-background-color-disabled: var(
1233
+ --background-disabled
1234
+ ); /* Deprecated v16.x.x utilizar --background-disabled */
1235
+
1236
+ --color-select-border-button: var(--color); /* Deprecated v16.x.x utilizar --color */
1237
+ --color-select-border-button-error: var(--color-danger); /* Deprecated v16.x.x utilizar --color-danger */
1238
+ --color-select-border-button-disabled: var(--color-disabled); /* Deprecated v16.x.x utilizar --color-disabled */
1239
+ --color-select-border-button-hover: var(--color-hover); /* Deprecated v16.x.x utilizar --color-hover */
1240
+ --color-select-border-button-focus: var(--color-focused); /* Deprecated v16.x.x utilizar --color-focused */
1159
1241
 
1160
- --color-select-color-primary: var(--color-primary);
1161
- --color-select-color-selected: var(--color-white);
1162
- --color-select-background-color-unselected: var(--color-white);
1163
- --color-select-background-color-selected: var(--color-primary);
1164
- --color-select-color-text-error: var(--color-danger);
1242
+ --color-select-button-hover: var(--background-hover); /* Deprecated v16.x.x utilizar --background-hover */
1243
+ --color-select-button-focus: var(--outline-color-focused); /* Deprecated v16.x.x utilizar --outline-color-focused */
1244
+
1245
+ --color-select-color-primary: var(--text-color); /* Deprecated v16.x.x utilizar --text-color */
1246
+ --color-select-color-text-error: var(--color-danger); /* Deprecated v16.x.x utilizar --color-danger */
1247
+ --color-select-color-text-empty: var(--text-color-empty); /* Deprecated v16.x.x utilizar --text-color-empty */
1165
1248
 
1166
1249
  /*------------------------------------*\
1167
1250
  SLIDE
@@ -1341,20 +1424,44 @@ po-switch {
1341
1424
  --color-tag-inverse-border-color-10: var(--color-10);
1342
1425
  --color-tag-inverse-border-color-11: var(--color-11);
1343
1426
  --color-tag-inverse-border-color-12: var(--color-12);
1344
-
1345
- /*------------------------------------*\
1427
+ }
1428
+ /*------------------------------------*\
1346
1429
  TEXTAREA
1347
1430
  \*------------------------------------*/
1431
+ po-textarea {
1432
+ --font-family: var(--font-family-theme);
1433
+ --font-size: var(--font-size-default);
1434
+
1435
+ --text-color-placeholder: var(--color-neutral-light-60);
1436
+ --color: var(--color-neutral-dark-70);
1437
+ --background: var(--color-neutral-light-98);
1438
+
1439
+ --text-color: var(--color-neutral-dark-60);
1440
+
1441
+ --color-hover: var(--color-secondary-dark-20);
1442
+ --background-hover: var(--color-brand-01-lightest);
1348
1443
 
1349
- --color-textarea-background-color: var(--color-white);
1350
- --color-textarea-border: var(--color-neutral-light-60);
1351
- --color-textarea-background-color-disabled: var(--color-neutral-light-90);
1352
- --color-textarea-border-color-disabled: var(--color-neutral-light-90);
1353
- --color-textarea-border-focusable: var(--color-primary);
1354
- --color-textarea-color-error: var(--color-danger);
1355
- --color-textarea-color-disabled: var(--color-neutral-light-60);
1356
- --color-textarea-text-error: var(--color-danger);
1357
- --color-textarea-background-color-scrollbar: var(--color-primary);
1444
+ --color-focused: var(--color-secondary);
1445
+
1446
+ --outline-color-focused: var(--color-outline-focused);
1447
+
1448
+ --color-disabled: var(--color-neutral-light-60);
1449
+ --background-disabled: var(--color-neutral-light-80);
1450
+
1451
+ --text-color-readonly: var(--color-neutral-dark-70);
1452
+
1453
+ --color-error: var(--color-danger);
1454
+ }
1455
+ :root {
1456
+ --color-textarea-background-color: var(---background); /* Deprecated v16.x.x utilizar ---background */
1457
+ --color-textarea-border: var(--color); /* Deprecated v16.x.x utilizar --color */
1458
+ --color-textarea-background-color-disabled: var(
1459
+ --background-disabled
1460
+ ); /* Deprecated v16.x.x utilizar --background-disabled */
1461
+ --color-textarea-border-color-disabled: var(--color-disabled); /* Deprecated v16.x.x utilizar --color-disabled */
1462
+ --color-textarea-border-focusable: var(--color-focused); /* Deprecated v16.x.x utilizar --color-focused */
1463
+
1464
+ --color-textarea-color-error: var(--color-error); /* Deprecated v16.x.x utilizar --color-error */
1358
1465
 
1359
1466
  /*------------------------------------*\
1360
1467
  TOOLBAR