@rolster/react-components 18.21.24 → 18.21.25

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 (28) hide show
  1. package/dist/cjs/assets/{index-Buj4-HoB.css → index-yC2kyFNJ.css} +189 -114
  2. package/dist/es/assets/{index-Buj4-HoB.css → index-yC2kyFNJ.css} +189 -114
  3. package/dist/esm/components/atoms/Amount/Amount.css +5 -4
  4. package/dist/esm/components/atoms/Avatar/Avatar.css +5 -5
  5. package/dist/esm/components/atoms/Badge/Badge.css +1 -1
  6. package/dist/esm/components/atoms/Breadcrumb/Breadcrumb.css +3 -2
  7. package/dist/esm/components/atoms/Button/Button.css +11 -11
  8. package/dist/esm/components/atoms/ButtonAction/ButtonAction.css +13 -7
  9. package/dist/esm/components/atoms/CheckBox/CheckBox.css +9 -4
  10. package/dist/esm/components/atoms/Icon/Icon.css +6 -5
  11. package/dist/esm/components/atoms/Input/Input.css +20 -12
  12. package/dist/esm/components/atoms/InputSearch/InputSearch.css +1 -1
  13. package/dist/esm/components/atoms/Label/Label.css +6 -3
  14. package/dist/esm/components/atoms/Poster/Poster.css +10 -6
  15. package/dist/esm/components/atoms/ProgressCircular/ProgressCircular.css +6 -2
  16. package/dist/esm/components/atoms/RadioButton/RadioButton.css +9 -4
  17. package/dist/esm/components/atoms/Skeleton/Skeleton.css +7 -4
  18. package/dist/esm/components/atoms/SkeletonText/SkeletonText.css +9 -5
  19. package/dist/esm/components/atoms/Switch/Switch.css +8 -7
  20. package/dist/esm/components/atoms/TabularText/TabularText.css +4 -4
  21. package/dist/esm/components/molecules/Ballot/Ballot.css +50 -21
  22. package/dist/esm/components/molecules/PickerDay/PickerDay.css +1 -1
  23. package/dist/esm/components/molecules/PickerMonth/PickerMonth.css +1 -1
  24. package/dist/esm/components/molecules/PickerYear/PickerYear.css +1 -1
  25. package/dist/esm/components/molecules/Toolbar/Toolbar.css +1 -1
  26. package/dist/esm/components/organisms/Card/Card.css +1 -1
  27. package/dist/esm/components/organisms/Snackbar/Snackbar.css +1 -1
  28. package/package.json +2 -2
package/dist/cjs/assets/{index-Buj4-HoB.css → index-yC2kyFNJ.css} RENAMED
@@ -1,29 +1,30 @@
1
1
  .rls-tabular-text {
2
2
  display: flex;
3
3
  width: auto;
4
- justify-content: var(--rlc-tabulartext-text-align);
4
+ justify-content: var(--rlc-tabulartext-text-align, flex-start);
5
5
  }
6
6
  .rls-tabular-text span {
7
- font-size: var(--rlc-tabulartext-font-size);
7
+ font-size: var(--rlc-tabulartext-font-size, var(--rls-body-font-size));
8
8
  }
9
9
  .rls-tabular-text__char {
10
10
  display: block;
11
11
  text-align: center;
12
- width: var(--rlc-tabulartext-char-width);
12
+ width: var(--rlc-tabulartext-char-width, 5.5rem);
13
13
  }
14
14
  .rls-tabular-text__pointer {
15
15
  display: block;
16
16
  text-align: center;
17
- width: var(--rlc-tabulartext-pointer-width);
17
+ width: var(--rlc-tabulartext-pointer-width, 2rem);
18
18
  }
19
19
 
20
20
  .rls-amount {
21
- --rlc-tabulartext-font-size: var(--rlc-amount-font-size);
21
+ --pvt-font-size: var(--rlc-amount-font-size, inherit);
22
+ --rlc-tabulartext-font-size: var(--pvt-font-size);
22
23
  display: flex;
23
- width: var(--rlc-amount-width);
24
- justify-content: var(--rlc-amount-text-align);
24
+ width: var(--rlc-amount-width, auto);
25
+ justify-content: var(--rlc-amount-text-align, start);
25
26
  column-gap: var(--rls-sizing-x2);
26
- font-size: var(--rlc-amount-font-size);
27
+ font-size: var(--pvt-font-size);
27
28
  }
28
29
  .rls-amount[rls-theme] {
29
30
  color: var(--rls-theme-color-500);
@@ -34,12 +35,12 @@
34
35
  display: flex;
35
36
  justify-content: center;
36
37
  overflow: hidden;
37
- font-size: var(--rlc-avatar-font-size);
38
- width: var(--rlc-avatar-width);
39
- height: var(--rlc-avatar-height);
38
+ font-size: var(--rlc-avatar-font-size, var(--rls-title-font-size));
39
+ width: var(--rlc-avatar-width, var(--rls-sizing-x24));
40
+ height: var(--rlc-avatar-height, var(--rls-sizing-x24));
40
41
  background: var(--rls-theme-gradient-500);
41
- color: var(--rls-theme-font-500);
42
- border-radius: var(--rlc-avatar-border-radius);
42
+ color: var(--rls-theme-color-050);
43
+ border-radius: var(--rlc-avatar-radius, var(--rls-sizing-x4));
43
44
  }
44
45
  .rls-avatar--skeleton {
45
46
  background: var(--rls-theme-color-200);
@@ -59,7 +60,7 @@
59
60
  position: relative;
60
61
  display: inline-block;
61
62
  width: auto;
62
- padding: var(--rlc-badge-padding);
63
+ padding: var(--rlc-badge-padding, var(--rls-sizing-x2));
63
64
  box-sizing: border-box;
64
65
  font-size: var(--rls-caption-font-size);
65
66
  letter-spacing: var(--rls-caption-letter-spacing);
@@ -75,11 +76,12 @@
75
76
  }
76
77
 
77
78
  .rls-breadcrumb {
79
+ --pvt-height: var(--rlc-breadcrumb-height, var(--rls-sizing-x18));
78
80
  --pvt-link-font-color: var(--rls-app-color-600);
79
81
  display: -webkit-box;
80
82
  width: 100%;
81
- height: var(--rlc-breadcrumb-height);
82
- line-height: var(--rlc-breadcrumb-height);
83
+ height: var(--pvt-height);
84
+ line-height: var(--pvt-height);
83
85
  padding: 0rem var(--rls-sizing-x8);
84
86
  box-sizing: border-box;
85
87
  user-select: none;
@@ -134,12 +136,13 @@
134
136
  }
135
137
 
136
138
  .rls-icon {
139
+ --pvt-icon-dimension: var(--rlc-icon-dimension, var(--rls-sizing-x12));
137
140
  --pvt-icon-display: block;
138
141
  position: relative;
139
- font-size: var(--rlc-icon-dimesion);
140
- width: var(--rlc-icon-dimesion);
141
- height: var(--rlc-icon-dimesion);
142
- line-height: var(--rlc-icon-dimesion);
142
+ font-size: var(--pvt-icon-dimesion);
143
+ width: var(--pvt-icon-dimesion);
144
+ height: var(--pvt-icon-dimesion);
145
+ line-height: var(--pvt-icon-dimesion);
143
146
  }
144
147
  .rls-icon--skeleton {
145
148
  --pvt-icon-display: none;
@@ -148,7 +151,7 @@
148
151
  }
149
152
  .rls-icon > i {
150
153
  display: var(--pvt-icon-display);
151
- color: var(--rlc-icon-color);
154
+ color: var(--rlc-icon-color, inherit);
152
155
  width: 100%;
153
156
  height: 100%;
154
157
  line-height: inherit;
@@ -166,22 +169,22 @@
166
169
  --pvt-classic-font-color: var(--rls-app-color-500);
167
170
  --pvt-classic-border: none;
168
171
  --pvt-raised-background: var(--rls-theme-color-500);
169
- --pvt-raised-font-color: var(--rls-theme-font-500);
172
+ --pvt-raised-font-color: var(--rls-theme-color-050);
170
173
  --pvt-raised-border: none;
171
174
  --pvt-flat-background: var(--rls-theme-color-200);
172
175
  --pvt-flat-font-color: var(--rls-theme-color-700);
173
176
  --pvt-flat-border: none;
174
177
  --pvt-stroked-background: transparent;
175
178
  --pvt-stroked-font-color: var(--rls-theme-color-500);
176
- --pvt-stroked-border: var(--rls-theme-border-1-500);
179
+ --pvt-stroked-border: var(--rls-theme-border-2-500);
177
180
  --pvt-outline-background: transparent;
178
181
  --pvt-outline-font-color: var(--rls-app-color-600);
179
- --pvt-outline-border: var(--rls-app-border-1-300);
182
+ --pvt-outline-border: var(--rls-app-border-2-300);
180
183
  --pvt-ghost-background: none;
181
184
  --pvt-ghost-font-color: var(--rls-theme-color-500);
182
185
  --pvt-ghost-border: none;
183
186
  --pvt-gradient-background: var(--rls-theme-gradient-500);
184
- --pvt-gradient-font-color: var(--rls-theme-font-500);
187
+ --pvt-gradient-font-color: var(--rls-theme-color-050);
185
188
  --pvt-gradient-border: none;
186
189
  position: relative;
187
190
  padding: 0rem;
@@ -208,10 +211,10 @@
208
211
  --pvt-flat-border: none;
209
212
  --pvt-stroked-background: var(--rls-theme-color-100);
210
213
  --pvt-stroked-font-color: var(--rls-theme-color-700);
211
- --pvt-stroked-border: var(--rls-theme-border-1-700);
214
+ --pvt-stroked-border: var(--rls-theme-border-2-700);
212
215
  --pvt-outline-background: transparent;
213
216
  --pvt-outline-font-color: var(--rls-theme-color-500);
214
- --pvt-outline-border: var(--rls-theme-border-1-500);
217
+ --pvt-outline-border: var(--rls-theme-border-2-500);
215
218
  --pvt-ghost-background: var(--rls-theme-color-200);
216
219
  --pvt-ghost-font-color: var(--rls-theme-font-100);
217
220
  --pvt-ghost-border: none;
@@ -231,10 +234,10 @@
231
234
  --pvt-flat-border: none;
232
235
  --pvt-stroked-background: transparent;
233
236
  --pvt-stroked-font-color: var(--rls-theme-color-300);
234
- --pvt-stroked-border: var(--rls-theme-border-1-300);
237
+ --pvt-stroked-border: var(--rls-theme-border-2-300);
235
238
  --pvt-outline-background: transparent;
236
239
  --pvt-outline-font-color: var(--rls-app-color-400);
237
- --pvt-outline-border: var(--rls-app-border-1-100);
240
+ --pvt-outline-border: var(--rls-app-border-2-100);
238
241
  --pvt-ghost-background: transparent;
239
242
  --pvt-ghost-font-color: var(--rls-theme-color-300);
240
243
  --pvt-ghost-border: none;
@@ -250,9 +253,9 @@
250
253
  overflow: hidden;
251
254
  line-height: var(--rls-sizing-x20);
252
255
  height: var(--rls-sizing-x20);
253
- padding: var(--rlc-button-content-padding);
256
+ padding: var(--rlc-button-content-padding, 0rem var(--rls-sizing-x4));
254
257
  box-sizing: border-box;
255
- border-radius: var(--rlc-button-content-radius);
258
+ border-radius: var(--rlc-button-content-radius, var(--rls-sizing-x2));
256
259
  color: var(--pvt-button-content-font-color);
257
260
  border: var(--pvt-button-content-border);
258
261
  background: var(--pvt-button-content-background);
@@ -321,7 +324,7 @@
321
324
  font-size: var(--rls-button-font-size);
322
325
  font-weight: var(--rls-font-weight-bold);
323
326
  letter-spacing: var(--rls-button-letter-spacing);
324
- text-transform: var(--rlc-button-label-text-transform);
327
+ text-transform: var(--rlc-button-label-text-transform, uppercase);
325
328
  text-overflow: ellipsis;
326
329
  overflow: hidden;
327
330
  white-space: nowrap;
@@ -345,6 +348,12 @@
345
348
  }
346
349
 
347
350
  .rls-button-action {
351
+ --pvt-ripple-dimension: var(
352
+ --rlc-action-ripple-dimension,
353
+ var(--rls-sizing-x18)
354
+ );
355
+ --pvt-ripple-position: var(--rlc-action-ripple-position, -9rem);
356
+ --pvt-ripple-color: var(--rlc-action-ripple-color, var(--rls-app-color-600));
348
357
  --pvt-tooltip-transition-delay: 0ms;
349
358
  --pvt-tooltip-opacity: 0;
350
359
  position: relative;
@@ -357,7 +366,7 @@
357
366
  user-select: none;
358
367
  cursor: default;
359
368
  background: transparent;
360
- color: var(--rlc-action-color);
369
+ color: var(--rlc-action-color, var(--rls-app-color-600));
361
370
  }
362
371
  .rls-button-action::before {
363
372
  position: absolute;
@@ -369,7 +378,7 @@
369
378
  visibility: hidden;
370
379
  border-radius: 50%;
371
380
  transform: scale(0);
372
- background: var(--rlc-action-ripple-color);
381
+ background: var(--pvt-ripple-color);
373
382
  padding-top: calc(120% - var(--rls-sizing-x4));
374
383
  padding-left: calc(120% - var(--rls-sizing-x4));
375
384
  margin-top: calc(-60% + var(--rls-sizing-x2));
@@ -387,12 +396,12 @@
387
396
  top: 50%;
388
397
  left: 50%;
389
398
  opacity: 0.24;
390
- width: var(--rlc-action-ripple-dimension);
391
- height: var(--rlc-action-ripple-dimension);
392
- margin-top: var(--rlc-action-ripple-position);
393
- margin-left: var(--rlc-action-ripple-position);
399
+ width: var(--pvt-ripple-dimension);
400
+ height: var(--pvt-ripple-dimension);
401
+ margin-top: var(--pvt-ripple-position);
402
+ margin-left: var(--pvt-ripple-position);
394
403
  border-radius: 50%;
395
- background: var(--rlc-action-ripple-color);
404
+ background: var(--pvt-ripple-color);
396
405
  transform: scale(0);
397
406
  transition: transform 160ms 0ms var(--rls-sharp-curve);
398
407
  }
@@ -439,12 +448,17 @@
439
448
  }
440
449
 
441
450
  .rls-checkbox {
451
+ --pvt-dimension: var(--rlc-checkbox-dimension, var(--rls-sizing-x12));
452
+ --pvt-component-dimension: var(
453
+ --rlc-checkbox-children-dimension,
454
+ var(--rls-sizing-x6)
455
+ );
442
456
  --pvt-component-border-color: var(--rls-app-color-500);
443
457
  --pvt-component-transform: scale(0);
444
458
  position: relative;
445
459
  display: flex;
446
- width: var(--rlc-checkbox-dimension);
447
- height: var(--rlc-checkbox-dimension);
460
+ width: var(--pvt-dimension);
461
+ height: var(--pvt-dimension);
448
462
  justify-content: center;
449
463
  align-items: center;
450
464
  box-sizing: border-box;
@@ -465,8 +479,8 @@
465
479
  pointer-events: none;
466
480
  }
467
481
  .rls-checkbox__component {
468
- width: var(--rlc-checkbox-children-dimension);
469
- height: var(--rlc-checkbox-children-dimension);
482
+ width: var(--pvt-component-dimension);
483
+ height: var(--pvt-component-dimension);
470
484
  border-radius: var(--rls-sizing-x1);
471
485
  background: var(--rls-theme-color-500);
472
486
  transform: var(--pvt-component-transform);
@@ -475,14 +489,22 @@
475
489
  }
476
490
 
477
491
  .rls-input {
478
- --pvt-value-font-color: var(--rlc-input-font-color);
492
+ --pvt-font-color: var(--rlc-input-font-color, var(--rls-app-color-900));
493
+ --pvt-font-size: var(--rlc-input-font-size, var(--rls-input-font-size));
494
+ --pvt-letter-spacing: var(
495
+ --rlc-input-letter-spacing,
496
+ var(--rls-input-letter-spacing)
497
+ );
498
+ --pvt-height: var(--rlc-input-height, var(--rls-sizing-x12));
499
+ --pvt-text-align: var(--rlc-input-text-align, left);
500
+ --pvt-value-font-color: var(--pvt-font-color);
479
501
  --pvt-value-opacity: 1;
480
502
  --pvt-component-font-color: transparent;
481
503
  position: relative;
482
504
  width: 100%;
483
505
  }
484
506
  .rls-input--focused {
485
- --pvt-component-font-color: var(--rlc-input-font-color);
507
+ --pvt-component-font-color: var(--pvt-font-color);
486
508
  --pvt-value-font-color: transparent;
487
509
  }
488
510
  .rls-input--disabled {
@@ -491,8 +513,8 @@
491
513
  .rls-input__component {
492
514
  position: relative;
493
515
  width: 100%;
494
- height: var(--rlc-input-height);
495
- line-height: var(--rlc-input-height);
516
+ height: var(--pvt-height);
517
+ line-height: var(--pvt-height);
496
518
  padding: 0rem;
497
519
  cursor: text;
498
520
  border: none;
@@ -500,9 +522,9 @@
500
522
  background: transparent;
501
523
  color: var(--pvt-component-font-color);
502
524
  font-weight: var(--rls-font-weight-medium);
503
- font-size: var(--rlc-input-font-size);
504
- text-align: var(--rlc-input-text-align);
505
- letter-spacing: var(--rlc-input-letter-spacing);
525
+ font-size: var(--pvt-font-size);
526
+ text-align: var(--pvt-text-align);
527
+ letter-spacing: var(--pvt-letter-spacing);
506
528
  }
507
529
  .rls-input__component::-webkit-outer-spin-button,
508
530
  .rls-input__component::-webkit-inner-spin-button {
@@ -524,8 +546,8 @@
524
546
  top: 0rem;
525
547
  left: 0rem;
526
548
  width: 100%;
527
- height: var(--rlc-input-height);
528
- line-height: var(--rlc-input-height);
549
+ height: var(--pvt-height);
550
+ line-height: var(--pvt-height);
529
551
  background: transparent;
530
552
  pointer-events: none;
531
553
  overflow: hidden;
@@ -533,9 +555,9 @@
533
555
  opacity: var(--pvt-value-opacity);
534
556
  color: var(--pvt-value-font-color);
535
557
  font-weight: var(--rls-font-weight-medium);
536
- font-size: var(--rlc-input-font-size);
537
- text-align: var(--rlc-input-text-align);
538
- letter-spacing: var(--rlc-input-letter-spacing);
558
+ font-size: var(--pvt-font-size);
559
+ text-align: var(--pvt-text-align);
560
+ letter-spacing: var(--pvt-letter-spacing);
539
561
  }
540
562
 
541
563
  .rls-input-money {
@@ -596,7 +618,7 @@
596
618
  align-items: center;
597
619
  padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
598
620
  box-sizing: border-box;
599
- background: var(--rls-app-color-100);
621
+ background: var(rlc-input-search-background, var(--rls-app-color-100));
600
622
  border-radius: var(--rls-sizing-x4);
601
623
  }
602
624
 
@@ -607,9 +629,12 @@
607
629
  }
608
630
 
609
631
  .rls-label {
610
- font-size: var(--rlc-label-font-size);
611
- letter-spacing: var(--rlc-label-letter-spacing);
612
- line-height: var(--rlc-label-height);
632
+ font-size: var(--rlc-label-font-size, var(--rls-smalltext-font-size));
633
+ letter-spacing: var(
634
+ --rlc-label-letter-spacing,
635
+ var(--rls-smalltext-letter-spacing)
636
+ );
637
+ line-height: var(--rlc-label-height, var(--rls-smalltext-line-height));
613
638
  font-weight: inherit;
614
639
  }
615
640
  .rls-label[rls-theme] {
@@ -631,18 +656,22 @@
631
656
 
632
657
  .rls-poster {
633
658
  --pvt-background: var(--rls-theme-color-100);
659
+ --pvt-height: var(--rlc-poster-height, var(--rls-body-line-height));
634
660
  --pvt-border-content: none;
635
661
  --pvt-border-color: var(--rls-app-color-400);
636
662
  position: relative;
637
663
  display: block;
638
664
  width: auto;
639
665
  font-weight: inherit;
640
- font-size: var(--rlc-poster-font-size);
641
- letter-spacing: var(--rlc-poster-letter-spacing);
642
- height: var(--rlc-poster-height);
643
- line-height: var(--rlc-poster-height);
644
- padding: var(--rlc-poster-padding);
645
- text-align: var(--rlc-poster-text-align);
666
+ font-size: var(--rlc-poster-font-size, var(--rls-body-font-size));
667
+ letter-spacing: var(
668
+ --rlc-poster-letter-spacing,
669
+ var(--rls-body-letter-spacing)
670
+ );
671
+ height: var(--pvt-height);
672
+ line-height: var(--pvt-height);
673
+ padding: var(--rlc-poster-padding, var(--rls-sizing-x4));
674
+ text-align: var(--rlc-poster-text-align, center);
646
675
  border-radius: var(--rls-sizing-x2);
647
676
  color: var(--rls-app-color-600);
648
677
  background: var(--rls-app-color-200);
@@ -730,9 +759,13 @@
730
759
  }
731
760
 
732
761
  .rls-progress-circular {
762
+ --pvt-dimension: var(
763
+ --rlc-progress-circular-dimension,
764
+ var(--rls-sizing-x28)
765
+ );
733
766
  position: relative;
734
- width: var(--rlc-progress-circular-dimension);
735
- height: var(--rlc-progress-circular-dimension);
767
+ width: var(--pvt-dimension);
768
+ height: var(--pvt-dimension);
736
769
  padding: var(--rls-sizing-x2);
737
770
  box-sizing: border-box;
738
771
  stroke: var(--rls-theme-color-500);
@@ -775,12 +808,17 @@
775
808
  }
776
809
 
777
810
  .rls-radiobutton {
811
+ --pvt-dimension: var(--rlc-radiobutton-dimension, var(--rls-sizing-x12));
812
+ --pvt-component-dimension: var(
813
+ --rlc-radiobutton-children-dimension,
814
+ var(--rls-sizing-x6)
815
+ );
778
816
  --pvt-component-border-color: var(--rls-app-color-500);
779
817
  --pvt-component-transform: scale(0);
780
818
  position: relative;
781
819
  display: flex;
782
- width: var(--rlc-radiobutton-dimension);
783
- height: var(--rlc-radiobutton-dimension);
820
+ width: var(--pvt-dimension);
821
+ height: var(--pvt-dimension);
784
822
  justify-content: center;
785
823
  align-items: center;
786
824
  outline: none;
@@ -801,8 +839,8 @@
801
839
  pointer-events: none;
802
840
  }
803
841
  .rls-radiobutton__component {
804
- width: var(--rlc-radiobutton-children-dimension);
805
- height: var(--rlc-radiobutton-children-dimension);
842
+ width: var(--pvt-component-dimension);
843
+ height: var(--pvt-component-dimension);
806
844
  border-radius: 50%;
807
845
  background: var(--rls-theme-color-500);
808
846
  transform: var(--pvt-component-transform);
@@ -811,12 +849,15 @@
811
849
  }
812
850
 
813
851
  .rls-skeleton {
852
+ --pvt-height: var(--rlc-skeleton-height, inherit);
853
+ --pvt-max-height: var(--rlc-skeleton-max-height, inherit);
854
+ --pvt-min-height: var(--rlc-skeleton-min-height, inherit);
814
855
  position: relative;
815
856
  width: 100%;
816
- max-height: inherit;
817
- min-height: inherit;
818
- height: inherit;
819
- line-height: inherit;
857
+ max-height: var(--pvt-max-height);
858
+ min-height: var(--pvt-min-height);
859
+ height: var(--pvt-height);
860
+ line-height: var(--pvt-height);
820
861
  letter-spacing: inherit;
821
862
  overflow: hidden;
822
863
  background: var(--rls-theme-color-100);
@@ -847,18 +888,22 @@
847
888
  }
848
889
 
849
890
  .rls-skeleton-text {
850
- --rlc-skeleton-height: var(--rlc-skeleton-text-height);
891
+ --pvt-height: var(--rlc-skeleton-text-height, var(--rls-body-line-height));
892
+ --rlc-skeleton-height: var(--pvt-height);
851
893
  position: relative;
852
894
  display: block;
853
895
  overflow: inherit;
854
896
  font-weight: inherit;
855
- font-size: var(--rlc-skeleton-text-font-size);
856
- letter-spacing: var(--rlc-skeleton-text-letter-spacing);
857
- line-height: var(--rlc-skeleton-text-height);
897
+ font-size: var(--rlc-skeleton-text-font-size, var(--rls-body-font-size));
898
+ letter-spacing: var(
899
+ --rlc-skeleton-text-letter-spacing,
900
+ var(--rls-body-letter-spacing)
901
+ );
902
+ line-height: var(--pvt-height);
858
903
  }
859
904
  .rls-skeleton-text__value {
860
905
  display: flex;
861
- column-gap: var(--rlc-skeleton-text-column-gap);
906
+ column-gap: var(--rlc-skeleton-text-column-gap, var(--rls-sizing-x4));
862
907
  align-items: center;
863
908
  font-weight: inherit;
864
909
  font-size: inherit;
@@ -873,19 +918,20 @@
873
918
  }
874
919
 
875
920
  .rls-switch {
921
+ --pvt-element-size: var(--rlc-switch-element-size, var(--rls-sizing-x10));
876
922
  --pvt-element-left: var(--rls-sizing-x1);
877
923
  --pvt-element-border-color: var(--rls-app-color-400);
878
924
  --pvt-element-background: var(--rls-app-color-050);
879
925
  --pvt-element-item-background: transparent;
880
- --pvt-bar-background: var(--rls-app-color-200);
881
- max-width: var(--rlc-switch-max-width);
926
+ --pvt-bar-background: var(--rls-app-color-300);
927
+ max-width: var(--rlc-switch-max-width, var(--rls-sizing-x18));
882
928
  }
883
929
  .rls-switch:hover {
884
930
  cursor: pointer;
885
931
  }
886
932
  .rls-switch--checked {
887
933
  --pvt-element-left: calc(
888
- 100% - var(--rlc-switch-element-size) - var(--rls-sizing-x1)
934
+ 100% - var(--pvt-element-size) - var(--rls-sizing-x1)
889
935
  );
890
936
  --pvt-element-border-color: var(--rls-theme-color-500);
891
937
  --pvt-element-background: var(--rls-theme-color-050);
@@ -906,8 +952,8 @@
906
952
  position: absolute;
907
953
  top: 0rem;
908
954
  left: var(--pvt-element-left);
909
- width: var(--rlc-switch-element-size);
910
- height: var(--rlc-switch-element-size);
955
+ width: var(--pvt-element-size);
956
+ height: var(--pvt-element-size);
911
957
  z-index: var(--rls-z-index-2);
912
958
  padding: var(--rls-sizing-x2);
913
959
  box-sizing: border-box;
@@ -927,8 +973,8 @@
927
973
  .rls-switch__component__bar {
928
974
  background: var(--pvt-bar-background);
929
975
  width: 100%;
930
- height: var(--rlc-switch-bar-height);
931
- border-radius: var(--rlc-switch-bar-radius);
976
+ height: var(--rlc-switch-bar-height, var(--rls-sizing-x4));
977
+ border-radius: var(--rlc-switch-bar-radius, var(--rls-sizing-x2));
932
978
  }
933
979
 
934
980
  .rls-alert {
@@ -964,12 +1010,32 @@
964
1010
  .rls-ballot {
965
1011
  --rlc-avatar-width: var(--rls-sizing-x20);
966
1012
  --rlc-avatar-height: var(--rls-sizing-x20);
1013
+ --pvt-title-letter-spacing: var(
1014
+ --rlc-ballot-title-letter-spacing,
1015
+ var(--rls-label-letter-spacing)
1016
+ );
1017
+ --pvt-title-font-size: var(
1018
+ --rlc-ballot-title-font-size,
1019
+ var(--rls-label-font-size)
1020
+ );
1021
+ --pvt-title-height: var(
1022
+ --rlc-ballot-title-height,
1023
+ var(--rls-label-line-height)
1024
+ );
1025
+ --pvt-subtitle-letter-spacing: var(
1026
+ --rlc-ballot-subtitle-letter-spacing,
1027
+ var(--rls-smalltext-letter-spacing)
1028
+ );
1029
+ --pvt-subtitle-height: var(
1030
+ --rlc-ballot-subtitle-height,
1031
+ var(--rls-smalltext-line-height)
1032
+ );
967
1033
  position: relative;
968
1034
  display: flex;
969
1035
  width: 100%;
970
1036
  align-items: center;
971
1037
  column-gap: var(--rls-sizing-x4);
972
- padding: var(--rlc-ballot-padding);
1038
+ padding: var(--rlc-ballot-padding, var(--rls-sizing-x4));
973
1039
  box-sizing: border-box;
974
1040
  overflow: hidden;
975
1041
  }
@@ -984,42 +1050,51 @@
984
1050
  display: flex;
985
1051
  overflow: hidden;
986
1052
  flex-direction: column;
987
- row-gap: var(--rlc-ballot-component-row-gap);
1053
+ row-gap: var(--rlc-ballot-component-row-gap, var(--rls-sizing-x2));
988
1054
  }
989
1055
  .rls-ballot .rls-avatar + .rls-ballot__component {
990
1056
  width: calc(100% - var(--rlc-avatar-width) - var(--rls-sizing-x4));
991
1057
  }
992
1058
  .rls-ballot__title {
993
- --rlc-skeleton-text-height: var(--rlc-ballot-title-height);
994
- --rlc-skeleton-text-letter-spacing: var(--rlc-ballot-title-letter-spacing);
995
- --rlc-skeleton-text-font-size: var(--rlc-ballot-title-font-size);
1059
+ --rlc-skeleton-text-height: var(--pvt-title-height);
1060
+ --rlc-skeleton-text-letter-spacing: var(--pvt-title-letter-spacing);
1061
+ --rlc-skeleton-text-font-size: var(--pvt-title-font-size);
996
1062
  position: relative;
997
1063
  width: 100%;
998
1064
  color: var(--rls-app-color-900);
999
1065
  overflow: hidden;
1000
1066
  white-space: nowrap;
1001
1067
  text-overflow: ellipsis;
1002
- font-weight: var(--rlc-ballot-title-font-weight);
1003
- font-size: var(--rlc-ballot-title-font-size);
1004
- letter-spacing: var(--rlc-ballot-title-letter-spacing);
1005
- min-height: var(--rlc-ballot-title-height);
1006
- line-height: var(--rlc-ballot-title-height);
1068
+ font-weight: var(
1069
+ --rlc-ballot-title-font-weight,
1070
+ var(--rls-font-weight-medium)
1071
+ );
1072
+ font-size: var(--pvt-title-font-size);
1073
+ letter-spacing: var(--pvt-title-letter-spacing);
1074
+ min-height: var(--pvt-title-height);
1075
+ line-height: var(--pvt-title-height);
1007
1076
  }
1008
1077
  .rls-ballot__subtitle {
1009
- --rlc-skeleton-text-height: var(--rlc-ballot-subtitle-height);
1010
- --rlc-skeleton-text-letter-spacing: var(--rlc-ballot-subtitle-letter-spacing);
1011
- --rlc-skeleton-text-font-size: var(--rlc-ballot-subtitle-font-size);
1078
+ --rlc-skeleton-text-height: var(--pvt-subtitle-height);
1079
+ --rlc-skeleton-text-letter-spacing: var(--pvt-subtitle-letter-spacing);
1080
+ --rlc-skeleton-text-font-size: var(
1081
+ --rlc-ballot-subtitle-font-size,
1082
+ var(--rls-smalltext-font-size)
1083
+ );
1012
1084
  position: relative;
1013
- width: var(--rlc-ballot-subtitle-width);
1085
+ width: var(--rlc-ballot-subtitle-width, 100%);
1014
1086
  color: var(--rls-app-color-600);
1015
- font-weight: var(--rlc-ballot-subtitle-font-weight);
1087
+ font-weight: var(
1088
+ --rlc-ballot-subtitle-font-weight,
1089
+ var(--rls-font-weight-semibold)
1090
+ );
1016
1091
  font-size: var(--rls-ballot-subtitle-font-size);
1017
- letter-spacing: var(--rlc-ballot-subtitle-letter-spacing);
1018
- min-height: var(--rlc-ballot-subtitle-height);
1019
- line-height: var(--rlc-ballot-subtitle-height);
1020
- overflow: var(--rlc-ballot-subtitle-overflow);
1021
- text-overflow: var(--rlc-ballot-subtitle-text-overflow);
1022
- white-space: var(--rlc-ballot-subtitle-white-space);
1092
+ letter-spacing: var(--pvt-subtitle-letter-spacing);
1093
+ min-height: var(--pvt-subtitle-height);
1094
+ line-height: var(--pvt-subtitle-height);
1095
+ overflow: var(--rlc-ballot-subtitle-overflow, initial);
1096
+ text-overflow: var(--rlc-ballot-subtitle-text-overflow, initial);
1097
+ white-space: var(--rlc-ballot-subtitle-white-space, initial);
1023
1098
  }
1024
1099
 
1025
1100
  .rls-button-progress {
@@ -1401,7 +1476,7 @@
1401
1476
  }
1402
1477
  .rls-picker-day__element--focused {
1403
1478
  --pvt-span-background: var(--rls-theme-color-500);
1404
- --pvt-span-font-color: var(--rls-theme-font-500);
1479
+ --pvt-span-font-color: var(--rls-theme-color-050);
1405
1480
  --pvt-span-border: var(--rls-theme-border-1-500);
1406
1481
  }
1407
1482
  .rls-picker-day__element--forbidden {
@@ -1539,7 +1614,7 @@
1539
1614
  }
1540
1615
  .rls-picker-month__component--focused {
1541
1616
  --pvt-component-background: var(--rls-theme-color-500);
1542
- --pvt-component-font-color: var(--rls-theme-font-500);
1617
+ --pvt-component-font-color: var(--rls-theme-color-050);
1543
1618
  --pvt-component-border: var(--rls-theme-border-1-500);
1544
1619
  }
1545
1620
  .rls-picker-month__component--disabled {
@@ -1652,7 +1727,7 @@
1652
1727
  }
1653
1728
  .rls-picker-year__element--focused {
1654
1729
  --pvt-component-background: var(--rls-theme-color-500);
1655
- --pvt-component-font-color: var(--rls-theme-font-500);
1730
+ --pvt-component-font-color: var(--rls-theme-color-050);
1656
1731
  --pvt-component-border: var(--rls-theme-border-1-500);
1657
1732
  }
1658
1733
  .rls-picker-year__element--disabled {
@@ -1674,7 +1749,7 @@
1674
1749
  justify-content: space-between;
1675
1750
  align-items: center;
1676
1751
  column-gap: var(--rls-sizing-x6);
1677
- height: var(--rlc-toolbar-height);
1752
+ height: var(--rlc-toolbar-height, var(--rls-sizing-x28));
1678
1753
  }
1679
1754
  .rls-toolbar > * {
1680
1755
  width: auto;
@@ -1722,7 +1797,7 @@
1722
1797
  .rls-card__content {
1723
1798
  display: flex;
1724
1799
  flex-direction: column;
1725
- padding: var(--rlc-card-content-padding);
1800
+ padding: var(--rlc-card-content-padding, var(--rls-sizing-x8));
1726
1801
  box-sizing: border-box;
1727
1802
  }
1728
1803
 
@@ -2299,7 +2374,7 @@
2299
2374
  display: flex;
2300
2375
  column-gap: var(--rls-sizing-x6);
2301
2376
  bottom: 0rem;
2302
- left: var(--rlc-snackbar-left);
2377
+ left: var(--rlc-snackbar-left, 50%);
2303
2378
  z-index: 32;
2304
2379
  width: auto;
2305
2380
  height: auto;