@rolster/react-components 18.21.15 → 18.21.16

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 (34) hide show
  1. package/dist/cjs/assets/{index-ogdfILLi.css → index-gIb32nSW.css} +82 -82
  2. package/dist/es/assets/{index-ogdfILLi.css → index-gIb32nSW.css} +82 -82
  3. package/dist/esm/components/atoms/Breadcrumb/Breadcrumb.css +2 -2
  4. package/dist/esm/components/atoms/Button/Button.css +2 -2
  5. package/dist/esm/components/atoms/ButtonAction/ButtonAction.css +2 -2
  6. package/dist/esm/components/atoms/Input/Input.css +2 -2
  7. package/dist/esm/components/atoms/InputPassword/InputPassword.css +2 -2
  8. package/dist/esm/components/atoms/MessageIcon/MessageIcon.css +1 -1
  9. package/dist/esm/components/atoms/Poster/Poster.css +3 -3
  10. package/dist/esm/components/atoms/Switch/Switch.css +3 -3
  11. package/dist/esm/components/definitions.d.ts +1 -1
  12. package/dist/esm/components/molecules/Ballot/Ballot.css +2 -2
  13. package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.css +4 -4
  14. package/dist/esm/components/molecules/LabelCheckBox/LabelCheckBox.css +1 -1
  15. package/dist/esm/components/molecules/LabelRadioButton/LabelRadioButton.css +1 -1
  16. package/dist/esm/components/molecules/LabelSwitch/LabelSwitch.css +1 -1
  17. package/dist/esm/components/molecules/Pagination/Pagination.css +5 -5
  18. package/dist/esm/components/molecules/PickerDay/PickerDay.css +7 -7
  19. package/dist/esm/components/molecules/PickerDayRange/PickerDayRange.css +8 -8
  20. package/dist/esm/components/molecules/PickerMonth/PickerMonth.css +2 -2
  21. package/dist/esm/components/molecules/PickerSelectorTitle/PickerSelectorTitle.css +1 -1
  22. package/dist/esm/components/molecules/PickerYear/PickerYear.css +7 -7
  23. package/dist/esm/components/molecules/Toolbar/Toolbar.css +2 -2
  24. package/dist/esm/components/organisms/Card/Card.css +1 -1
  25. package/dist/esm/components/organisms/Confirmation/Confirmation.css +3 -3
  26. package/dist/esm/components/organisms/FieldAutocomplete/FieldAutocomplete.css +5 -5
  27. package/dist/esm/components/organisms/FieldDate/FieldDate.css +3 -3
  28. package/dist/esm/components/organisms/FieldDateRange/FieldDateRange.css +2 -2
  29. package/dist/esm/components/organisms/FormNavigation/FormNavigation.css +1 -1
  30. package/dist/esm/components/organisms/Modal/Modal.css +1 -1
  31. package/dist/esm/components/organisms/PickerDate/PickerDate.css +2 -2
  32. package/dist/esm/components/organisms/PickerDateRange/PickerDateRange.css +3 -3
  33. package/dist/esm/components/organisms/Snackbar/Snackbar.css +3 -3
  34. package/package.json +2 -2
@@ -1,7 +1,7 @@
1
1
  .rls-switch {
2
2
  --pvt-element-left: var(--rls-sizing-x1);
3
- --pvt-element-background: var(--rls-app-background-500);
4
- --pvt-bar-background: var(--rls-app-background-100);
3
+ --pvt-element-background: var(--rls-app-color-050);
4
+ --pvt-bar-background: var(--rls-app-color-200);
5
5
  max-width: var(--rls-sizing-x20);
6
6
  }
7
7
  .rls-switch:hover {
@@ -34,7 +34,7 @@
34
34
  padding: var(--rls-sizing-x2);
35
35
  box-sizing: border-box;
36
36
  border-radius: 50%;
37
- background: var(--rls-app-background-500);
37
+ background: var(--rls-app-color-050);
38
38
  box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
39
39
  /*transition: left 240ms var(--rls-standard-curve);*/
40
40
  }
@@ -1,4 +1,4 @@
1
- export type RlsTheme = 'standard' | 'success' | 'info' | 'warning' | 'danger' | 'amaizing' | 'amber' | 'smartness' | 'obsidian';
1
+ export type RlsTheme = 'primary' | 'secondary' | 'tertiary' | 'success' | 'info' | 'warning' | 'danger' | 'berry' | 'mountains' | 'amaizing' | 'amber' | 'smartness' | 'obsidian';
2
2
  export interface RlsComponent extends React.PropsWithChildren {
3
3
  identifier?: string;
4
4
  rlsTheme?: RlsTheme;
@@ -32,7 +32,7 @@
32
32
  --rlc-skeleton-text-font-size: var(--rlc-ballot-title-font-size);
33
33
  position: relative;
34
34
  width: 100%;
35
- color: var(--rls-app-color-500);
35
+ color: var(--rls-app-color-900);
36
36
  overflow: hidden;
37
37
  white-space: nowrap;
38
38
  text-overflow: ellipsis;
@@ -48,7 +48,7 @@
48
48
  --rlc-skeleton-text-font-size: var(--rlc-ballot-subtitle-font-size);
49
49
  position: relative;
50
50
  width: var(--rlc-ballot-subtitle-width);
51
- color: var(--rls-app-color-300);
51
+ color: var(--rls-app-color-600);
52
52
  font-weight: var(--rlc-ballot-subtitle-font-weight);
53
53
  font-size: var(--rls-ballot-subtitle-font-size);
54
54
  letter-spacing: var(--rlc-ballot-subtitle-letter-spacing);
@@ -54,7 +54,7 @@
54
54
  overflow-y: auto;
55
55
  overflow-x: hidden;
56
56
  z-index: var(--rls-z-index-2);
57
- background: var(--rls-app-background-500);
57
+ background: var(--rls-app-color-050);
58
58
  border: var(--rls-theme-border-1-500);
59
59
  transform: var(--rlc-button-toggle-ul-transform);
60
60
  transform-origin: 0% 0%;
@@ -72,9 +72,9 @@
72
72
  font-size: 6rem;
73
73
  letter-spacing: 0.825px;
74
74
  text-transform: uppercase;
75
- color: var(--rls-app-color-300);
75
+ color: var(--rls-app-color-600);
76
76
  }
77
77
  .rls-button-toggle__list ul li:hover {
78
- background: var(--rls-app-background-300);
79
- color: var(--rls-app-color-500);
78
+ background: var(--rls-app-color-100);
79
+ color: var(--rls-app-color-900);
80
80
  }
@@ -24,7 +24,7 @@
24
24
  max-width: calc(100% - var(--rls-sizing-x16));
25
25
  height: var(--pvt-text-height);
26
26
  line-height: var(--rls-sizing-x12);
27
- color: var(--rls-app-color-300);
27
+ color: var(--rls-app-color-600);
28
28
  font-size: var(--rls-label-font-size);
29
29
  font-weight: var(--rls-font-weight-medium);
30
30
  letter-spacing: var(--rls-label-letter-spacing);
@@ -26,7 +26,7 @@
26
26
  max-width: calc(100% - var(--rls-sizing-x16));
27
27
  height: var(--pvt-text-height);
28
28
  line-height: var(--rls-sizing-x12);
29
- color: var(--rls-app-color-300);
29
+ color: var(--rls-app-color-600);
30
30
  font-size: var(--rls-label-font-size);
31
31
  font-weight: var(--rls-font-weight-medium);
32
32
  letter-spacing: var(--rls-label-letter-spacing);
@@ -24,7 +24,7 @@
24
24
  max-width: calc(100% - var(--rls-sizing-x28));
25
25
  height: var(--pvt-text-height);
26
26
  line-height: var(--rls-sizing-x12);
27
- color: var(--rls-app-color-300);
27
+ color: var(--rls-app-color-600);
28
28
  font-size: var(--rls-label-font-size);
29
29
  font-weight: var(--rls-font-weight-medium);
30
30
  letter-spacing: var(--rls-label-letter-spacing);
@@ -15,8 +15,8 @@
15
15
  margin: 0rem var(--rls-sizing-x4);
16
16
  }
17
17
  .rls-pagination__page {
18
- background: var(--rls-app-background-100);
19
- color: var(--rls-app-color-500);
18
+ background: var(--rls-app-color-200);
19
+ color: var(--rls-app-color-900);
20
20
  cursor: default;
21
21
  margin: auto 0rem;
22
22
  text-align: center;
@@ -33,10 +33,10 @@
33
33
  }
34
34
  .rls-pagination__page--active {
35
35
  background: var(--rls-theme-gradient-500);
36
- color: var(--rls-light-color-500);
36
+ color: var(--rls-app-color-050);
37
37
  }
38
38
  .rls-pagination__description {
39
- color: var(--rls-app-color-500);
39
+ color: var(--rls-app-color-900);
40
40
  margin: 0rem var(--rls-sizing-x4);
41
41
  width: auto;
42
42
  height: var(--rls-sizing-x20);
@@ -51,7 +51,7 @@
51
51
  .rls-pagination__action {
52
52
  background: none;
53
53
  outline: none;
54
- color: var(--rls-app-color-300);
54
+ color: var(--rls-app-color-600);
55
55
  height: var(--rls-sizing-x18);
56
56
  width: var(--rls-sizing-x18);
57
57
  padding: var(--rls-sizing-x3);
@@ -1,6 +1,6 @@
1
1
  .rls-picker-day {
2
2
  --pvt-span-background: transparent;
3
- --pvt-span-font-color: var(--rls-app-color-500);
3
+ --pvt-span-font-color: var(--rls-app-color-900);
4
4
  --pvt-span-border: var(--rls-border-1) solid transparent;
5
5
  position: relative;
6
6
  width: 100%;
@@ -11,8 +11,8 @@
11
11
  .rls-picker-day__header {
12
12
  display: flex;
13
13
  margin-bottom: var(--rls-sizing-x4);
14
- background: var(--rls-app-background-100);
15
- color: var(--rls-app-color-500);
14
+ background: var(--rls-app-color-100);
15
+ color: var(--rls-app-color-900);
16
16
  border-radius: var(--rls-sizing-x4);
17
17
  }
18
18
  .rls-picker-day__label {
@@ -67,14 +67,14 @@
67
67
  --pvt-span-border: var(--rls-theme-border-1-500);
68
68
  }
69
69
  .rls-picker-day__element--forbidden {
70
- --pvt-span-background: var(--rls-app-background-300);
71
- --pvt-span-font-color: var(--rls-app-color-100);
72
- --pvt-span-border: var(--rls-border-1) solid var(--rls-app-background-300);
70
+ --pvt-span-background: var(--rls-app-color-100);
71
+ --pvt-span-font-color: var(--rls-app-color-400);
72
+ --pvt-span-border: var(--rls-border-1) solid var(--rls-app-color-100);
73
73
  pointer-events: none;
74
74
  }
75
75
  .rls-picker-day__element--disabled {
76
76
  --pvt-span-background: transparent;
77
- --pvt-span-font-color: var(--rls-app-color-100);
77
+ --pvt-span-font-color: var(--rls-app-color-400);
78
78
  --pvt-span-border: var(--rls-border-1) solid transparent;
79
79
  pointer-events: none;
80
80
  }
@@ -22,8 +22,8 @@
22
22
  }
23
23
  .rls-picker-day-range__header {
24
24
  display: flex;
25
- background: var(--rls-app-background-100);
26
- color: var(--rls-app-color-500);
25
+ background: var(--rls-app-color-200);
26
+ color: var(--rls-app-color-900);
27
27
  border-radius: var(--rls-sizing-x2);
28
28
  }
29
29
  .rls-picker-day-range__label {
@@ -44,7 +44,7 @@
44
44
  .rls-picker-day-range__element__span {
45
45
  position: relative;
46
46
  display: block;
47
- color: var(--rls-app-color-500);
47
+ color: var(--rls-app-color-900);
48
48
  border-radius: var(--rls-sizing-x4);
49
49
  height: var(--rls-sizing-x18);
50
50
  line-height: var(--rls-sizing-x18);
@@ -57,22 +57,22 @@
57
57
  color: var(--pvt-span-nothover-font-color);
58
58
  }
59
59
  .rls-picker-day-range__element__span:hover {
60
- color: var(--rls-light-color-500);
60
+ color: var(--rls-app-color-050);
61
61
  background: var(--rls-theme-color-900);
62
62
  }
63
63
  .rls-picker-day-range__element--end {
64
- --pvt-span-nothover-background: var(--rls-app-color-500);
65
- --pvt-span-nothover-font-color: var(--rls-app-background-500);
64
+ --pvt-span-nothover-background: var(--rls-app-color-900);
65
+ --pvt-span-nothover-font-color: var(--rls-app-color-050);
66
66
  }
67
67
  .rls-picker-day-range__element--source {
68
68
  --pvt-span-nothover-background: var(--rls-theme-color-500);
69
- --pvt-span-nothover-font-color: var(--rls-light-color-500);
69
+ --pvt-span-nothover-font-color: var(--rls-app-color-050);
70
70
  }
71
71
  .rls-picker-day-range__element--ranged {
72
72
  --pvt-span-nothover-background: var(--rls-theme-color-100);
73
73
  }
74
74
  .rls-picker-day-range__element--forbidden {
75
- --pvt-span-background: var(--rls-app-background-100);
75
+ --pvt-span-background: var(--rls-app-color-200);
76
76
  pointer-events: none;
77
77
  opacity: 0.5;
78
78
  }
@@ -1,6 +1,6 @@
1
1
  .rls-picker-month {
2
2
  --pvt-component-background: transparent;
3
- --pvt-component-font-color: var(--rls-app-color-500);
3
+ --pvt-component-font-color: var(--rls-app-color-900);
4
4
  --pvt-component-border: var(--rls-border-1) solid transparent;
5
5
  position: relative;
6
6
  display: grid;
@@ -42,7 +42,7 @@
42
42
  }
43
43
  .rls-picker-month__component--disabled {
44
44
  --pvt-component-background: transparent;
45
- --pvt-component-font-color: var(--rls-app-color-100);
45
+ --pvt-component-font-color: var(--rls-app-color-400);
46
46
  --pvt-component-border: var(--rls-border-1) solid transparent;
47
47
  pointer-events: none;
48
48
  }
@@ -4,7 +4,7 @@
4
4
  align-items: center;
5
5
  }
6
6
  .rls-picker-selector-title span {
7
- color: var(--rls-app-color-300);
7
+ color: var(--rls-app-color-600);
8
8
  cursor: default;
9
9
  height: var(--rls-sizing-x14);
10
10
  line-height: var(--rls-sizing-x14);
@@ -1,6 +1,6 @@
1
1
  .rls-picker-year {
2
2
  --pvt-component-background: transparent;
3
- --pvt-component-font-color: var(--rls-app-color-300);
3
+ --pvt-component-font-color: var(--rls-app-color-600);
4
4
  --pvt-component-border: var(--rls-border-1) solid transparent;
5
5
  position: relative;
6
6
  width: 100%;
@@ -15,8 +15,8 @@
15
15
  align-items: center;
16
16
  box-sizing: border-box;
17
17
  padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
18
- color: var(--rls-app-color-500);
19
- background: var(--rls-app-background-100);
18
+ color: var(--rls-app-color-900);
19
+ background: var(--rls-app-color-200);
20
20
  border-radius: var(--rls-sizing-x4);
21
21
  }
22
22
  .rls-picker-year__header > label {
@@ -30,7 +30,7 @@
30
30
  line-height: var(--rls-sizing-x16);
31
31
  }
32
32
  .rls-picker-year__action button {
33
- color: var(--rls-app-color-500);
33
+ color: var(--rls-app-color-900);
34
34
  background: transparent;
35
35
  outline: none;
36
36
  width: inherit;
@@ -81,9 +81,9 @@
81
81
  --pvt-component-border: var(--rls-theme-border-1-500);
82
82
  }
83
83
  .rls-picker-year__element--disabled {
84
- --pvt-span-background: var(--rls-app-background-300);
85
- --pvt-component-font-color: var(--rls-app-color-100);
86
- --pvt-span-border: var(--rls-border-1) solid var(--rls-app-background-300);
84
+ --pvt-span-background: var(--rls-app-color-100);
85
+ --pvt-component-font-color: var(--rls-app-color-400);
86
+ --pvt-span-border: var(--rls-border-1) solid var(--rls-app-color-100);
87
87
  pointer-events: none;
88
88
  }
89
89
  .rls-picker-year__span {
@@ -22,7 +22,7 @@
22
22
  white-space: nowrap;
23
23
  }
24
24
  .rls-toolbar__title {
25
- color: var(--rls-app-color-500);
25
+ color: var(--rls-app-color-900);
26
26
  height: var(--rls-sizing-x12);
27
27
  line-height: var(--rls-sizing-x12);
28
28
  font-size: 8.125rem;
@@ -30,7 +30,7 @@
30
30
  font-weight: var(--rls-font-weight-bold);
31
31
  }
32
32
  .rls-toolbar__subtitle {
33
- color: var(--rls-app-color-300);
33
+ color: var(--rls-app-color-600);
34
34
  }
35
35
  .rls-toolbar__actions {
36
36
  display: flex;
@@ -1,5 +1,5 @@
1
1
  .rls-card {
2
- background: var(--rls-app-background-500);
2
+ background: var(--rls-app-color-050);
3
3
  border-radius: var(--rls-sizing-x4);
4
4
  box-shadow: var(--rls-light-shadow-center-8);
5
5
  }
@@ -50,7 +50,7 @@
50
50
  box-sizing: border-box;
51
51
  z-index: var(--rls-z-index-4);
52
52
  border-radius: var(--rls-sizing-x4);
53
- background: var(--rls-app-background-500);
53
+ background: var(--rls-app-color-050);
54
54
  box-shadow: var(--rls-app-shadow-4);
55
55
  transform: var(--pvt-component-transform);
56
56
  /*transition: opacity 125ms 0ms var(--rls-deceleration-curve),
@@ -68,7 +68,7 @@
68
68
  }
69
69
  .rls-confirmation__title {
70
70
  text-align: center;
71
- color: var(--rls-app-color-500);
71
+ color: var(--rls-app-color-900);
72
72
  font-weight: var(--rls-font-weight-bold);
73
73
  font-size: var(--pvt-title-font-size);
74
74
  line-height: var(--pvt-title-line-height);
@@ -91,7 +91,7 @@
91
91
  box-sizing: border-box;
92
92
  }
93
93
  .rls-confirmation__message {
94
- color: var(--rls-app-color-300);
94
+ color: var(--rls-app-color-600);
95
95
  text-align: center;
96
96
  }
97
97
  .rls-confirmation__message p {
@@ -17,13 +17,13 @@
17
17
  width: 100%;
18
18
  margin-top: var(--rls-sizing-x2);
19
19
  margin-bottom: var(--rls-sizing-x6);
20
- background: var(--rls-app-background-300);
20
+ background: var(--rls-app-color-100);
21
21
  border-radius: var(--rls-sizing-x4);
22
22
  padding: var(--rls-sizing-x4);
23
23
  box-sizing: border-box;
24
24
  }
25
25
  .rls-field-autocomplete .rls-field-list__ul__search button {
26
- color: var(--rls-app-color-300);
26
+ color: var(--rls-app-color-600);
27
27
  background: transparent;
28
28
  }
29
29
  .rls-field-autocomplete
@@ -43,17 +43,17 @@
43
43
  border: none;
44
44
  outline: none;
45
45
  background: transparent;
46
- color: var(--rls-app-color-500);
46
+ color: var(--rls-app-color-900);
47
47
  font-size: var(--rls-input-font-size);
48
48
  font-weight: var(--rls-font-weight-medium);
49
49
  letter-spacing: var(--rls-input-letter-spacing);
50
50
  }
51
51
  .rls-field-autocomplete .rls-field-list__ul__control::placeholder {
52
- color: var(--rls-app-color-100);
52
+ color: var(--rls-app-color-400);
53
53
  }
54
54
  .rls-field-autocomplete .rls-field-list__ul__control::selection {
55
55
  background: var(--rls-theme-color-700);
56
- color: var(--rls-light-color-500);
56
+ color: var(--rls-app-color-050);
57
57
  }
58
58
  .rls-field-autocomplete .rls-field-list__ul__control:disabled {
59
59
  opacity: 0.5;
@@ -17,19 +17,19 @@
17
17
  border: none;
18
18
  outline: none;
19
19
  background: transparent;
20
- color: var(--rls-app-color-500);
20
+ color: var(--rls-app-color-900);
21
21
  font-weight: var(--rls-font-weight-medium);
22
22
  font-size: var(--rlc-input-font-size);
23
23
  letter-spacing: var(--rlc-input-letter-spacing);
24
24
  }
25
25
  .rls-field-date__control::placeholder {
26
- color: var(--rls-app-color-100);
26
+ color: var(--rls-app-color-400);
27
27
  }
28
28
  .rls-field-date__control:disabled {
29
29
  opacity: 0.5;
30
30
  }
31
31
  .rls-field-date__action {
32
- color: var(--rls-app-color-300);
32
+ color: var(--rls-app-color-600);
33
33
  width: var(--rls-sizing-x12);
34
34
  height: var(--rls-sizing-x12);
35
35
  padding: 0rem;
@@ -20,13 +20,13 @@
20
20
  letter-spacing: var(--rlc-input-letter-spacing);
21
21
  }
22
22
  .rls-field-date-range__control::placeholder {
23
- color: var(--rls-app-color-100);
23
+ color: var(--rls-app-color-400);
24
24
  }
25
25
  .rls-field-date-range__control:disabled {
26
26
  opacity: 0.5;
27
27
  }
28
28
  .rls-field-date-range__action {
29
- color: var(--rls-app-color-300);
29
+ color: var(--rls-app-color-600);
30
30
  width: var(--rls-sizing-x12);
31
31
  height: var(--rls-sizing-x12);
32
32
  padding: 0rem;
@@ -10,7 +10,7 @@
10
10
  padding: var(--rls-sizing-x8) var(--rls-sizing-x8) var(--rls-sizing-x12)
11
11
  var(--rls-sizing-x8);
12
12
  box-sizing: border-box;
13
- background: var(--rls-app-background-500);
13
+ background: var(--rls-app-color-050);
14
14
  border-radius: var(--rls-sizing-x4);
15
15
  box-shadow: var(--rls-dark-shadow-center-8);
16
16
  transform: translateX(calc(100% + var(--rls-sizing-x16)));
@@ -39,7 +39,7 @@
39
39
  z-index: var(--rls-z-index-2);
40
40
  overflow: var(--pvt-component-overflow);
41
41
  border-radius: var(--rls-sizing-x4);
42
- background: var(--rls-app-background-500);
42
+ background: var(--rls-app-color-050);
43
43
  transform: var(--pvt-component-transform);
44
44
  transition: opacity 125ms 0ms var(--rls-deceleration-curve),
45
45
  transform 125ms 0ms var(--rls-deceleration-curve),
@@ -20,7 +20,7 @@
20
20
  box-sizing: border-box;
21
21
  }
22
22
  .rls-picker-date__title {
23
- color: var(--rls-app-color-500);
23
+ color: var(--rls-app-color-900);
24
24
  text-align: center;
25
25
  cursor: default;
26
26
  font-weight: var(--rls-font-weight-bold);
@@ -37,7 +37,7 @@
37
37
  height: var(--rls-sizing-x16);
38
38
  line-height: var(--rls-sizing-x16);
39
39
  font-size: var(--rls-sizing-x12);
40
- color: var(--rls-app-color-300);
40
+ color: var(--rls-app-color-600);
41
41
  }
42
42
  .rls-picker-date__component {
43
43
  display: flex;
@@ -12,7 +12,7 @@
12
12
  box-sizing: border-box;
13
13
  }
14
14
  .rls-picker-date-range__title {
15
- color: var(--rls-app-color-500);
15
+ color: var(--rls-app-color-900);
16
16
  text-align: center;
17
17
  cursor: default;
18
18
  font-weight: var(--rls-font-weight-bold);
@@ -30,7 +30,7 @@
30
30
  height: var(--rls-sizing-x16);
31
31
  line-height: var(--rls-sizing-x16);
32
32
  font-size: var(--rls-sizing-x12);
33
- color: var(--rls-app-color-300);
33
+ color: var(--rls-app-color-600);
34
34
  }
35
35
  .rls-picker-date-range__title--month {
36
36
  display: flex;
@@ -40,7 +40,7 @@
40
40
  height: var(--rls-sizing-x14);
41
41
  line-height: var(--rls-sizing-x14);
42
42
  font-size: var(--rls-sizing-x10);
43
- color: var(--rls-app-color-300);
43
+ color: var(--rls-app-color-600);
44
44
  margin: auto 0rem;
45
45
  }
46
46
  .rls-picker-date-range__component {
@@ -11,7 +11,7 @@
11
11
  padding: var(--rls-sizing-x6);
12
12
  box-sizing: border-box;
13
13
  border-radius: var(--rls-sizing-x4);
14
- background: var(--rls-app-background-500);
14
+ background: var(--rls-app-color-050);
15
15
  box-shadow: var(--rls-light-shadow-bottom-4);
16
16
  border: var(--rls-theme-border-1-300);
17
17
  transform: translate(-50%, 100%);
@@ -21,7 +21,7 @@
21
21
  transform: translate(-50%, calc(0% - var(--rls-sizing-x8)));
22
22
  }
23
23
  .rls-snackbar__avatar {
24
- --rlc-icon-color: var(--rls-light-color-500);
24
+ --rlc-icon-color: var(--rls-app-color-050);
25
25
  display: flex;
26
26
  justify-content: center;
27
27
  align-items: center;
@@ -50,7 +50,7 @@
50
50
  }
51
51
  .rls-snackbar__content p {
52
52
  line-height: var(--rls-sizing-x10);
53
- color: var(--rls-app-color-300);
53
+ color: var(--rls-app-color-600);
54
54
  font-size: var(--rls-label-font-size);
55
55
  font-weight: var(--rls-font-weight-medium);
56
56
  letter-spacing: var(--rls-label-letter-spacing);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rolster/react-components",
3
- "version": "18.21.15",
3
+ "version": "18.21.16",
4
4
  "type": "module",
5
5
  "description": "Package containing UI components for React Project.",
6
6
  "module": "dist/esm/index.js",
@@ -49,7 +49,7 @@
49
49
  "@rollup/plugin-node-resolve": "^15.2.1",
50
50
  "@rollup/plugin-typescript": "^11.1.3",
51
51
  "@rolster/rollup": "^1.0.6",
52
- "@rolster/styles-foundations": "^2.3.39",
52
+ "@rolster/styles-foundations": "^2.4.10",
53
53
  "@rolster/types": "^1.1.0",
54
54
  "@types/node-sass": "^4.11.4",
55
55
  "@types/react": "^18.0.28",