@rolster/react-components 18.12.10 → 18.13.1

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 (136) hide show
  1. package/dist/cjs/assets/{index-VcI5p9dK.css → index-fykwrWLx.css} +700 -652
  2. package/dist/cjs/index.js +745 -779
  3. package/dist/cjs/index.js.map +1 -1
  4. package/dist/es/assets/{index-VcI5p9dK.css → index-fykwrWLx.css} +700 -652
  5. package/dist/es/index.js +747 -781
  6. package/dist/es/index.js.map +1 -1
  7. package/dist/esm/components/atoms/Amount/Amount.css +3 -3
  8. package/dist/esm/components/atoms/Avatar/Avatar.css +7 -7
  9. package/dist/esm/components/atoms/Badge/Badge.css +7 -7
  10. package/dist/esm/components/atoms/Breadcrumb/Breadcrumb.css +12 -12
  11. package/dist/esm/components/atoms/Button/Button.css +74 -53
  12. package/dist/esm/components/atoms/Button/Button.d.ts +1 -1
  13. package/dist/esm/components/atoms/Button/Button.js +1 -1
  14. package/dist/esm/components/atoms/Button/Button.js.map +1 -1
  15. package/dist/esm/components/atoms/ButtonAction/ButtonAction.css +22 -22
  16. package/dist/esm/components/atoms/CheckBox/CheckBox.css +8 -8
  17. package/dist/esm/components/atoms/Icon/Icon.css +7 -8
  18. package/dist/esm/components/atoms/Input/Input.css +13 -13
  19. package/dist/esm/components/atoms/InputMoney/InputMoney.css +1 -1
  20. package/dist/esm/components/atoms/InputNumber/InputNumber.css +1 -1
  21. package/dist/esm/components/atoms/InputPassword/InputPassword.css +8 -8
  22. package/dist/esm/components/atoms/InputText/InputText.css +1 -1
  23. package/dist/esm/components/atoms/Label/Label.css +1 -1
  24. package/dist/esm/components/atoms/MessageIcon/MessageIcon.css +6 -6
  25. package/dist/esm/components/atoms/Poster/Poster.css +6 -6
  26. package/dist/esm/components/atoms/ProgressBar/ProgressBar.css +7 -7
  27. package/dist/esm/components/atoms/ProgressCircular/ProgressCircular.css +5 -5
  28. package/dist/esm/components/atoms/RadioButton/RadioButton.css +6 -6
  29. package/dist/esm/components/atoms/SearchInput/SearchInput.css +4 -4
  30. package/dist/esm/components/atoms/Skeleton/Skeleton.css +6 -6
  31. package/dist/esm/components/atoms/SkeletonText/SkeletonText.css +6 -8
  32. package/dist/esm/components/atoms/Switch/Switch.css +16 -16
  33. package/dist/esm/components/atoms/TabularText/TabularText.css +2 -2
  34. package/dist/esm/components/definitions.d.ts +1 -1
  35. package/dist/esm/components/molecules/Ballot/Ballot.css +27 -34
  36. package/dist/esm/components/molecules/ButtonProgress/ButtonProgress.css +1 -1
  37. package/dist/esm/components/molecules/ButtonToggle/ButtonToggle.css +32 -30
  38. package/dist/esm/components/molecules/CheckBoxLabel/CheckBoxLabel.css +8 -8
  39. package/dist/esm/components/molecules/DayPicker/DayPicker.css +39 -27
  40. package/dist/esm/components/molecules/DayPicker/DayPicker.d.ts +3 -1
  41. package/dist/esm/components/molecules/DayPicker/DayPicker.js +32 -24
  42. package/dist/esm/components/molecules/DayPicker/DayPicker.js.map +1 -1
  43. package/dist/esm/components/molecules/DayRangePicker/DayRangePicker.css +28 -28
  44. package/dist/esm/components/molecules/DayRangePicker/DayRangePicker.js +16 -19
  45. package/dist/esm/components/molecules/DayRangePicker/DayRangePicker.js.map +1 -1
  46. package/dist/esm/components/molecules/MoneyField/MoneyField.css +1 -2
  47. package/dist/esm/components/molecules/MonthPicker/MonthPicker.css +34 -19
  48. package/dist/esm/components/molecules/MonthPicker/MonthPicker.d.ts +2 -1
  49. package/dist/esm/components/molecules/MonthPicker/MonthPicker.js +30 -19
  50. package/dist/esm/components/molecules/MonthPicker/MonthPicker.js.map +1 -1
  51. package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.css +6 -6
  52. package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.d.ts +1 -1
  53. package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.js +26 -21
  54. package/dist/esm/components/molecules/MonthTitlePicker/MonthTitlePicker.js.map +1 -1
  55. package/dist/esm/components/molecules/NumberField/NumberField.css +1 -2
  56. package/dist/esm/components/molecules/Pagination/Pagination.css +29 -30
  57. package/dist/esm/components/molecules/PasswordField/PasswordField.css +4 -5
  58. package/dist/esm/components/molecules/RadioButtonLabel/RadioButtonLabel.css +8 -10
  59. package/dist/esm/components/molecules/SwitchLabel/SwitchLabel.css +8 -9
  60. package/dist/esm/components/molecules/TextField/TextField.css +1 -2
  61. package/dist/esm/components/molecules/Toolbar/Toolbar.css +10 -10
  62. package/dist/esm/components/molecules/YearPicker/YearPicker.css +42 -28
  63. package/dist/esm/components/molecules/YearPicker/YearPicker.d.ts +1 -1
  64. package/dist/esm/components/molecules/YearPicker/YearPicker.js +33 -26
  65. package/dist/esm/components/molecules/YearPicker/YearPicker.js.map +1 -1
  66. package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.css +22 -22
  67. package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.d.ts +1 -1
  68. package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.js +1 -1
  69. package/dist/esm/components/organisms/AutocompleteField/AutocompleteField.js.map +1 -1
  70. package/dist/esm/components/organisms/AutocompleteField/AutocompleteFieldHook.d.ts +1 -1
  71. package/dist/esm/components/organisms/AutocompleteField/AutocompleteFieldHook.js +27 -81
  72. package/dist/esm/components/organisms/AutocompleteField/AutocompleteFieldHook.js.map +1 -1
  73. package/dist/esm/components/organisms/Card/Card.css +5 -5
  74. package/dist/esm/components/organisms/Confirmation/Confirmation.css +38 -38
  75. package/dist/esm/components/organisms/DateField/DateField.css +15 -15
  76. package/dist/esm/components/organisms/DateField/DateField.d.ts +2 -2
  77. package/dist/esm/components/organisms/DateField/DateField.js +27 -16
  78. package/dist/esm/components/organisms/DateField/DateField.js.map +1 -1
  79. package/dist/esm/components/organisms/DatePicker/DatePicker.css +27 -24
  80. package/dist/esm/components/organisms/DatePicker/DatePicker.d.ts +2 -2
  81. package/dist/esm/components/organisms/DatePicker/DatePicker.js +37 -55
  82. package/dist/esm/components/organisms/DatePicker/DatePicker.js.map +1 -1
  83. package/dist/esm/components/organisms/DateRangeField/DateRangeField.css +13 -15
  84. package/dist/esm/components/organisms/DateRangeField/DateRangeField.js +5 -5
  85. package/dist/esm/components/organisms/DateRangeField/DateRangeField.js.map +1 -1
  86. package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.css +20 -20
  87. package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.d.ts +2 -2
  88. package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.js +13 -33
  89. package/dist/esm/components/organisms/DateRangePicker/DateRangePicker.js.map +1 -1
  90. package/dist/esm/components/organisms/FormNavigation/FormNavigation.css +15 -14
  91. package/dist/esm/components/organisms/Modal/Modal.css +11 -11
  92. package/dist/esm/components/organisms/SelectField/SelectField.css +1 -1
  93. package/dist/esm/components/organisms/SelectField/SelectField.d.ts +1 -1
  94. package/dist/esm/components/organisms/SelectField/SelectField.js +1 -1
  95. package/dist/esm/components/organisms/SelectField/SelectField.js.map +1 -1
  96. package/dist/esm/components/organisms/SelectField/SelectFieldHook.d.ts +1 -1
  97. package/dist/esm/components/organisms/SelectField/SelectFieldHook.js +18 -35
  98. package/dist/esm/components/organisms/SelectField/SelectFieldHook.js.map +1 -1
  99. package/dist/esm/components/organisms/Snackbar/Snackbar.css +26 -26
  100. package/dist/esm/constants/index.d.ts +1 -0
  101. package/dist/esm/constants/index.js +2 -0
  102. package/dist/esm/constants/index.js.map +1 -0
  103. package/dist/esm/constants/picker.constant.d.ts +1 -0
  104. package/dist/esm/constants/picker.constant.js +2 -0
  105. package/dist/esm/constants/picker.constant.js.map +1 -0
  106. package/dist/esm/helpers/date-range-picker.d.ts +1 -12
  107. package/dist/esm/helpers/date-range-picker.js +5 -107
  108. package/dist/esm/helpers/date-range-picker.js.map +1 -1
  109. package/dist/esm/helpers/index.d.ts +2 -0
  110. package/dist/esm/helpers/index.js +3 -0
  111. package/dist/esm/helpers/index.js.map +1 -0
  112. package/dist/esm/hooks/ListControlHook.d.ts +2 -3
  113. package/dist/esm/hooks/ListControlHook.js +22 -92
  114. package/dist/esm/hooks/ListControlHook.js.map +1 -1
  115. package/dist/esm/index.d.ts +1 -2
  116. package/dist/esm/index.js +1 -2
  117. package/dist/esm/index.js.map +1 -1
  118. package/package.json +6 -5
  119. package/dist/esm/helpers/date-picker.d.ts +0 -1
  120. package/dist/esm/helpers/date-picker.js +0 -9
  121. package/dist/esm/helpers/date-picker.js.map +0 -1
  122. package/dist/esm/helpers/day-picker.d.ts +0 -9
  123. package/dist/esm/helpers/day-picker.js +0 -86
  124. package/dist/esm/helpers/day-picker.js.map +0 -1
  125. package/dist/esm/helpers/month-picker.d.ts +0 -14
  126. package/dist/esm/helpers/month-picker.js +0 -78
  127. package/dist/esm/helpers/month-picker.js.map +0 -1
  128. package/dist/esm/helpers/year-picker.d.ts +0 -17
  129. package/dist/esm/helpers/year-picker.js +0 -83
  130. package/dist/esm/helpers/year-picker.js.map +0 -1
  131. package/dist/esm/models.d.ts +0 -58
  132. package/dist/esm/models.js +0 -9
  133. package/dist/esm/models.js.map +0 -1
  134. package/dist/esm/types.d.ts +0 -12
  135. package/dist/esm/types.js +0 -7
  136. package/dist/esm/types.js.map +0 -1
package/dist/cjs/assets/{index-VcI5p9dK.css → index-fykwrWLx.css} RENAMED
@@ -5,22 +5,22 @@
5
5
  display: block;
6
6
  float: left;
7
7
  text-align: center;
8
- width: var(--rls-tabulartext-char-width);
8
+ width: var(--rlc-tabulartext-char-width);
9
9
  }
10
10
  .rls-tabular-text__pointer {
11
11
  display: block;
12
12
  float: left;
13
13
  text-align: center;
14
- width: var(--rls-tabulartext-pointer-width);
14
+ width: var(--rlc-tabulartext-pointer-width);
15
15
  }
16
16
 
17
17
  .rls-amount {
18
18
  display: flex;
19
- justify-content: var(--rls-amount-text-align);
20
- column-gap: var(--sizing-x2);
19
+ justify-content: var(--rlc-amount-text-align);
20
+ column-gap: var(--rls-sizing-x2);
21
21
  }
22
22
  .rls-amount[rls-theme] {
23
- color: var(--color-rolster-500);
23
+ color: var(--rls-theme-color-500);
24
24
  }
25
25
 
26
26
  .rls-avatar {
@@ -28,15 +28,15 @@
28
28
  display: flex;
29
29
  justify-content: center;
30
30
  overflow: hidden;
31
- font-size: var(--rls-avatar-font-size);
32
- width: var(--rls-avatar-width);
33
- height: var(--rls-avatar-height);
34
- background: var(--gradient-rolster-500);
35
- color: var(--color-light-500);
36
- border-radius: var(--rls-avatar-border-radius);
31
+ font-size: var(--rlc-avatar-font-size);
32
+ width: var(--rlc-avatar-width);
33
+ height: var(--rlc-avatar-height);
34
+ background: var(--rls-theme-gradient-500);
35
+ color: var(--rls-theme-font-500);
36
+ border-radius: var(--rlc-avatar-border-radius);
37
37
  }
38
38
  .rls-avatar--skeleton {
39
- background: var(--color-rolster-100);
39
+ background: var(--rls-theme-color-100);
40
40
  }
41
41
  .rls-avatar--skeleton > * {
42
42
  display: none;
@@ -55,14 +55,14 @@
55
55
  position: relative;
56
56
  display: inline-block;
57
57
  width: auto;
58
- padding: var(--sizing-x2);
58
+ padding: var(--rls-sizing-x2);
59
59
  box-sizing: border-box;
60
- font-size: var(--caption-font-size);
61
- letter-spacing: var(--caption-letter-spacing);
62
- line-height: var(--caption-line-height);
63
- color: var(--color-rolster-500);
64
- background: var(--color-rolster-100);
65
- border-radius: var(--sizing-x2);
60
+ font-size: var(--rls-caption-font-size);
61
+ letter-spacing: var(--rls-caption-letter-spacing);
62
+ line-height: var(--rls-caption-line-height);
63
+ color: var(--rls-theme-color-500);
64
+ background: var(--rls-theme-color-100);
65
+ border-radius: var(--rls-sizing-x2);
66
66
  }
67
67
  .rls-badge > span {
68
68
  font-size: inherit;
@@ -71,18 +71,18 @@
71
71
  }
72
72
 
73
73
  .rls-breadcrumb {
74
- --pvt-link-font-color: var(--color-theme-300);
74
+ --pvt-link-font-color: var(--rls-app-color-300);
75
75
  display: -webkit-box;
76
76
  width: 100%;
77
- height: var(--rls-breadcrumb-height);
78
- line-height: var(--rls-breadcrumb-height);
79
- padding: 0rem var(--sizing-x8);
77
+ height: var(--rlc-breadcrumb-height);
78
+ line-height: var(--rlc-breadcrumb-height);
79
+ padding: 0rem var(--rls-sizing-x8);
80
80
  box-sizing: border-box;
81
81
  user-select: none;
82
82
  overflow: auto;
83
83
  overflow-y: hidden;
84
- color: var(--color-theme-300);
85
- font-weight: var(--font-weight-medium);
84
+ color: var(--rls-app-color-300);
85
+ font-weight: var(--rls-font-weight-medium);
86
86
  }
87
87
  .rls-breadcrumb::-webkit-scrollbar {
88
88
  width: 0rem;
@@ -95,8 +95,8 @@
95
95
  cursor: pointer;
96
96
  font-weight: inherit;
97
97
  color: inherit;
98
- font-size: var(--body-font-size);
99
- letter-spacing: var(--body-letter-spacing);
98
+ font-size: var(--rls-body-font-size);
99
+ letter-spacing: var(--rls-body-letter-spacing);
100
100
  }
101
101
  .rls-breadcrumb__label:first-child::before {
102
102
  display: none;
@@ -105,10 +105,10 @@
105
105
  font-family: -rolster-icons;
106
106
  display: inline-block;
107
107
  content: '\e911';
108
- margin: 0rem var(--sizing-x2);
108
+ margin: 0rem var(--rls-sizing-x2);
109
109
  cursor: default;
110
110
  color: inherit;
111
- font-size: var(--sizing-x12);
111
+ font-size: var(--rls-sizing-x12);
112
112
  font-weight: normal;
113
113
  font-style: normal;
114
114
  letter-spacing: normal;
@@ -116,7 +116,7 @@
116
116
  -webkit-font-smoothing: antialiased;
117
117
  }
118
118
  .rls-breadcrumb__label--active {
119
- --pvt-link-font-color: var(--color-rolster-500);
119
+ --pvt-link-font-color: var(--rls-theme-color-500);
120
120
  }
121
121
  .rls-breadcrumb__label__a {
122
122
  display: inline-block;
@@ -124,27 +124,26 @@
124
124
  color: var(--pvt-link-font-color);
125
125
  }
126
126
  .rls-breadcrumb__label__a:hover {
127
- color: var(--color-rolster-500);
127
+ color: var(--rls-theme-color-500);
128
128
  text-decoration: underline;
129
129
  }
130
130
 
131
131
  .rls-icon {
132
132
  --pvt-icon-display: block;
133
133
  position: relative;
134
- float: left;
135
- font-size: var(--rls-icon-font-size);
136
- width: var(--rls-icon-width);
137
- height: var(--rls-icon-height);
138
- line-height: var(--rls-icon-height);
134
+ font-size: var(--rlc-icon-font-size);
135
+ width: var(--rlc-icon-width);
136
+ height: var(--rlc-icon-height);
137
+ line-height: var(--rlc-icon-height);
139
138
  }
140
139
  .rls-icon--skeleton {
141
140
  --pvt-icon-display: none;
142
- background: var(--theme-rolster-300);
143
- border-radius: var(--sizing-x2);
141
+ background: var(--rls-theme-color-300);
142
+ border-radius: var(--rls-sizing-x2);
144
143
  }
145
144
  .rls-icon > i {
146
145
  display: var(--pvt-icon-display);
147
- color: var(--rls-icon-color);
146
+ color: var(--rlc-icon-color);
148
147
  float: left;
149
148
  width: 100%;
150
149
  height: 100%;
@@ -155,24 +154,26 @@
155
154
  .rls-button {
156
155
  --pvt-button-content-background: none;
157
156
  --pvt-button-content-border: none;
158
- --pvt-button-content-font-color: var(--color-rolster-500);
157
+ --pvt-button-content-font-color: var(--rls-theme-color-500);
159
158
  --pvt-button-content-animation: none;
160
159
  --pvt-button-content-visibility: hidden;
161
- --pvt-button-ripple-background: var(--color-rolster-700);
162
- --pvt-ghost-background: none;
163
- --pvt-ghost-font-color: var(--color-rolster-500);
164
- --pvt-ghost-border: none;
165
- --pvt-flat-background: var(--color-rolster-100);
166
- --pvt-flat-font-color: var(--color-rolster-500);
160
+ --pvt-button-ripple-background: var(--rls-theme-color-700);
161
+ --pvt-raised-background: var(--rls-theme-gradient-500);
162
+ --pvt-raised-font-color: var(--rls-theme-font-500);
163
+ --pvt-raised-border: none;
164
+ --pvt-flat-background: var(--rls-theme-color-200);
165
+ --pvt-flat-font-color: var(--rls-theme-color-500);
167
166
  --pvt-flat-border: none;
167
+ --pvt-stroked-background: transparent;
168
+ --pvt-stroked-font-color: var(--rls-theme-color-500);
169
+ --pvt-stroked-border: var(--rls-theme-border-1-500);
168
170
  --pvt-outline-background: transparent;
169
- --pvt-outline-font-color: var(--color-theme-300);
170
- --pvt-outline-border: var(--border-1-theme-300);
171
- --pvt-raised-background: var(--gradient-rolster-500);
172
- --pvt-raised-font-color: var(--color-light-500);
173
- --pvt-raised-border: none;
171
+ --pvt-outline-font-color: var(--rls-app-color-300);
172
+ --pvt-outline-border: var(--rls-app-border-1-300);
173
+ --pvt-ghost-background: none;
174
+ --pvt-ghost-font-color: var(--rls-theme-color-500);
175
+ --pvt-ghost-border: none;
174
176
  position: relative;
175
- float: left;
176
177
  padding: 0rem;
177
178
  overflow: hidden;
178
179
  outline: none;
@@ -180,38 +181,56 @@
180
181
  }
181
182
  .rls-button:not(:disabled):not(:active) {
182
183
  --pvt-button-content-animation: ripple-squarecenter 1000ms
183
- var(--standard-curve);
184
+ var(--rls-standard-curve);
184
185
  }
185
186
  .rls-button:not(:disabled):focus {
186
187
  --pvt-button-content-visibility: visible;
187
188
  }
188
189
  .rls-button:not(:disabled):hover {
189
- --pvt-ghost-background: var(--color-rolster-100);
190
- --pvt-ghost-font-color: var(--color-rolster-500);
191
- --pvt-ghost-border: none;
192
- --pvt-flat-background: var(--color-rolster-100);
193
- --pvt-flat-font-color: var(--color-rolster-700);
190
+ --pvt-raised-background: var(--rls-theme-color-700);
191
+ --pvt-raised-font-color: var(--rls-theme-font-900);
192
+ --pvt-raised-border: none;
193
+ --pvt-flat-background: var(--rls-theme-color-500);
194
+ --pvt-flat-font-color: var(--rls-theme-font-500);
194
195
  --pvt-flat-border: none;
196
+ --pvt-stroked-background: var(--rls-theme-color-100);
197
+ --pvt-stroked-font-color: var(--rls-theme-color-700);
198
+ --pvt-stroked-border: var(--rls-theme-border-1-700);
195
199
  --pvt-outline-background: transparent;
196
- --pvt-outline-font-color: var(--color-rolster-500);
197
- --pvt-outline-border: var(--border-1-rolster-500);
198
- --pvt-raised-background: var(--color-rolster-700);
199
- --pvt-raised-font-color: var(--color-light-500);
200
- --pvt-raised-border: none;
200
+ --pvt-outline-font-color: var(--rls-theme-color-500);
201
+ --pvt-outline-border: var(--rls-theme-border-1-500);
202
+ --pvt-ghost-background: var(--rls-theme-color-200);
203
+ --pvt-ghost-font-color: var(--rls-theme-font-100);
204
+ --pvt-ghost-border: none;
201
205
  }
202
206
  .rls-button:disabled {
203
- opacity: 0.5;
207
+ --pvt-raised-background: var(--rls-theme-color-200);
208
+ --pvt-raised-font-color: var(--rls-theme-color-400);
209
+ --pvt-raised-border: none;
210
+ --pvt-flat-background: var(--rls-theme-color-100);
211
+ --pvt-flat-font-color: var(--rls-theme-color-300);
212
+ --pvt-flat-border: none;
213
+ --pvt-stroked-background: transparent;
214
+ --pvt-stroked-font-color: var(--rls-theme-color-300);
215
+ --pvt-stroked-border: var(--rls-theme-border-1-300);
216
+ --pvt-outline-background: transparent;
217
+ --pvt-outline-font-color: var(--rls-app-color-100);
218
+ --pvt-outline-border: var(--rls-app-border-1-100);
219
+ --pvt-ghost-background: transparent;
220
+ --pvt-ghost-font-color: var(--rls-theme-color-300);
221
+ --pvt-ghost-border: none;
204
222
  pointer-events: none;
205
223
  }
206
224
  .rls-button__content {
207
225
  display: flex;
208
226
  justify-content: center;
227
+ align-items: center;
209
228
  overflow: hidden;
210
- line-height: var(--sizing-x20);
211
- height: var(--sizing-x20);
212
- padding: var(--rls-button-content-padding);
229
+ line-height: var(--rls-sizing-x20);
230
+ height: var(--rls-sizing-x20);
231
+ padding: var(--rlc-button-content-padding);
213
232
  box-sizing: border-box;
214
- border-radius: var(--rls-button-content-radius);
233
+ border-radius: var(--rlc-button-content-radius);
215
234
  color: var(--pvt-button-content-font-color);
216
235
  border: var(--pvt-button-content-border);
217
236
  background: var(--pvt-button-content-background);
@@ -222,52 +241,53 @@
222
241
  content: '';
223
242
  top: 50%;
224
243
  left: 50%;
225
- padding-top: calc(100% - var(--sizing-x8));
226
- padding-left: calc(100% - var(--sizing-x8));
227
- margin-top: calc(-50% + var(--sizing-x4));
228
- margin-left: calc(-50% + var(--sizing-x4));
244
+ padding-top: calc(100% - var(--rls-sizing-x8));
245
+ padding-left: calc(100% - var(--rls-sizing-x8));
246
+ margin-top: calc(-50% + var(--rls-sizing-x4));
247
+ margin-left: calc(-50% + var(--rls-sizing-x4));
229
248
  border-radius: 50%;
230
249
  opacity: 0.26;
231
250
  transform: scale(0);
232
- z-index: var(--z-index-2);
251
+ z-index: var(--rls-z-index-2);
233
252
  background: var(--pvt-button-ripple-background);
234
253
  animation: var(--pvt-button-content-animation);
235
254
  visibility: var(--pvt-button-content-visibility);
236
255
  }
237
- .rls-button__content--ghost {
238
- --pvt-button-content-font-color: var(--pvt-ghost-font-color);
239
- --pvt-button-content-background: var(--pvt-ghost-background);
240
- --pvt-button-content-border: var(--pvt-ghost-border);
256
+ .rls-button__content--raised {
257
+ --pvt-button-content-background: var(--pvt-raised-background);
258
+ --pvt-button-content-font-color: var(--pvt-raised-font-color);
259
+ --pvt-button-content-border: var(--pvt-raised-border);
260
+ --pvt-button-ripple-background: var(--rls-theme-font-900);
241
261
  }
242
262
  .rls-button__content--flat {
243
263
  --pvt-button-content-font-color: var(--pvt-flat-font-color);
244
264
  --pvt-button-content-background: var(--pvt-flat-background);
245
265
  --pvt-button-content-border: var(--pvt-flat-border);
246
- --pvt-button-ripple-background: var(--color-rolster-500);
266
+ --pvt-button-ripple-background: var(--rls-theme-font-900);
267
+ }
268
+ .rls-button__content--stroked {
269
+ --pvt-button-content-font-color: var(--pvt-stroked-font-color);
270
+ --pvt-button-content-background: var(--pvt-stroked-background);
271
+ --pvt-button-content-border: var(--pvt-stroked-border);
247
272
  }
248
273
  .rls-button__content--outline {
249
274
  --pvt-button-content-font-color: var(--pvt-outline-font-color);
250
275
  --pvt-button-content-background: var(--pvt-outline-background);
251
276
  --pvt-button-content-border: var(--pvt-outline-border);
252
277
  }
253
- .rls-button__content--raised {
254
- --pvt-button-content-background: var(--pvt-raised-background);
255
- --pvt-button-content-font-color: var(--pvt-raised-font-color);
256
- --pvt-button-content-border: var(--pvt-raised-border);
257
- --pvt-button-ripple-background: var(--color-light-500);
258
- }
259
- .rls-button .rls-icon {
260
- margin: auto var(--sizing-x2);
278
+ .rls-button__content--ghost {
279
+ --pvt-button-content-font-color: var(--pvt-ghost-font-color);
280
+ --pvt-button-content-background: var(--pvt-ghost-background);
281
+ --pvt-button-content-border: var(--pvt-ghost-border);
261
282
  }
262
283
  .rls-button__label {
263
- padding: 0rem var(--sizing-x2);
284
+ padding: 0rem var(--rls-sizing-x2);
264
285
  line-height: initial;
265
286
  width: auto;
266
- margin: auto 0rem;
267
- font-size: var(--button-font-size);
268
- font-weight: var(--font-weight-bold);
269
- letter-spacing: var(--button-letter-spacing);
270
- text-transform: var(--rls-button-label-text-transform);
287
+ font-size: var(--rls-button-font-size);
288
+ font-weight: var(--rls-font-weight-bold);
289
+ letter-spacing: var(--rls-button-letter-spacing);
290
+ text-transform: var(--rlc-button-label-text-transform);
271
291
  text-overflow: ellipsis;
272
292
  overflow: hidden;
273
293
  white-space: nowrap;
@@ -294,16 +314,16 @@
294
314
  --pvt-tooltip-transition-delay: 0ms;
295
315
  --pvt-tooltip-opacity: 0;
296
316
  position: relative;
297
- width: var(--sizing-x16);
298
- height: var(--sizing-x16);
317
+ width: var(--rls-sizing-x16);
318
+ height: var(--rls-sizing-x16);
299
319
  border: none;
300
320
  outline: none;
301
- padding: var(--sizing-x2);
321
+ padding: var(--rls-sizing-x2);
302
322
  box-sizing: border-box;
303
323
  user-select: none;
304
324
  cursor: default;
305
325
  background: transparent;
306
- color: var(--rls-action-color);
326
+ color: var(--rlc-action-color);
307
327
  }
308
328
  .rls-button-action::before {
309
329
  position: absolute;
@@ -315,14 +335,14 @@
315
335
  visibility: hidden;
316
336
  border-radius: 50%;
317
337
  transform: scale(0);
318
- background: var(--rls-action-ripple-color);
319
- padding-top: calc(120% - var(--sizing-x4));
320
- padding-left: calc(120% - var(--sizing-x4));
321
- margin-top: calc(-60% + var(--sizing-x2));
322
- margin-left: calc(-60% + var(--sizing-x2));
338
+ background: var(--rlc-action-ripple-color);
339
+ padding-top: calc(120% - var(--rls-sizing-x4));
340
+ padding-left: calc(120% - var(--rls-sizing-x4));
341
+ margin-top: calc(-60% + var(--rls-sizing-x2));
342
+ margin-left: calc(-60% + var(--rls-sizing-x2));
323
343
  }
324
344
  .rls-button-action:not(:active)::before {
325
- animation: ripple-button-action 1000ms var(--standard-curve);
345
+ animation: ripple-button-action 1000ms var(--rls-standard-curve);
326
346
  }
327
347
  .rls-button-action:focus::before {
328
348
  visibility: visible;
@@ -333,14 +353,14 @@
333
353
  top: 50%;
334
354
  left: 50%;
335
355
  opacity: 0.24;
336
- width: var(--rls-action-ripple-dimension);
337
- height: var(--rls-action-ripple-dimension);
338
- margin-top: var(--rls-action-ripple-position);
339
- margin-left: var(--rls-action-ripple-position);
356
+ width: var(--rlc-action-ripple-dimension);
357
+ height: var(--rlc-action-ripple-dimension);
358
+ margin-top: var(--rlc-action-ripple-position);
359
+ margin-left: var(--rlc-action-ripple-position);
340
360
  border-radius: 50%;
341
- background: var(--rls-action-ripple-color);
361
+ background: var(--rlc-action-ripple-color);
342
362
  transform: scale(0);
343
- transition: transform 160ms 0ms var(--sharp-curve);
363
+ transition: transform 160ms 0ms var(--rls-sharp-curve);
344
364
  }
345
365
  .rls-button-action:not(:disabled):hover {
346
366
  --pvt-tooltip-opacity: 1;
@@ -355,18 +375,18 @@
355
375
  }
356
376
  .rls-button-action__tooltip {
357
377
  position: absolute;
358
- top: calc(100% + var(--sizing-x6));
378
+ top: calc(100% + var(--rls-sizing-x6));
359
379
  left: 50%;
360
380
  width: auto;
361
381
  float: initial;
362
- padding: var(--sizing-x4);
363
- border-radius: var(--sizing-x2);
382
+ padding: var(--rls-sizing-x4);
383
+ border-radius: var(--rls-sizing-x2);
364
384
  white-space: nowrap;
365
385
  pointer-events: none;
366
386
  transform: translateX(-50%);
367
- background: var(--color-dark-500);
368
- color: var(--color-light-500);
369
- transition: opacity 200ms 0ms var(--deceleration-curve);
387
+ background: var(--rls-dark-color-500);
388
+ color: var(--rls-light-color-500);
389
+ transition: opacity 200ms 0ms var(--rls-deceleration-curve);
370
390
  opacity: var(--pvt-tooltip-opacity);
371
391
  transition-delay: var(--pvt-tooltip-transition-delay);
372
392
  }
@@ -389,44 +409,44 @@
389
409
  position: relative;
390
410
  float: left;
391
411
  display: flex;
392
- width: var(--sizing-x12);
393
- height: var(--sizing-x12);
412
+ width: var(--rls-sizing-x12);
413
+ height: var(--rls-sizing-x12);
394
414
  box-sizing: border-box;
395
415
  outline: none;
396
- border-radius: var(--sizing-x2);
397
- border: var(--border-1-theme-300);
416
+ border-radius: var(--rls-sizing-x2);
417
+ border: var(--rls-app-border-1-300);
398
418
  }
399
419
  .rls-checkbox:hover {
400
420
  cursor: pointer;
401
421
  }
402
422
  .rls-checkbox--checked {
403
423
  --pvt-component-transform: scale(1);
404
- border: var(--border-1-rolster-500);
424
+ border: var(--rls-theme-border-1-500);
405
425
  }
406
426
  .rls-checkbox--disabled {
407
427
  opacity: 0.5;
408
428
  pointer-events: none;
409
429
  }
410
430
  .rls-checkbox__component {
411
- border-radius: var(--sizing-x1);
431
+ border-radius: var(--rls-sizing-x1);
412
432
  width: 7rem;
413
433
  height: 7rem;
414
434
  margin: auto;
415
- background: var(--gradient-rolster-500);
435
+ background: var(--rls-theme-gradient-500);
416
436
  transform: var(--pvt-component-transform);
417
437
  transform-origin: 50% 50%;
418
- transition: all 160ms 0ms var(--standard-curve);
438
+ transition: all 160ms 0ms var(--rls-standard-curve);
419
439
  }
420
440
 
421
441
  .rls-input {
422
- --pvt-value-font-color: var(--rls-input-font-color);
442
+ --pvt-value-font-color: var(--rlc-input-font-color);
423
443
  --pvt-value-opacity: 1;
424
444
  --pvt-component-font-color: transparent;
425
445
  position: relative;
426
446
  width: 100%;
427
447
  }
428
448
  .rls-input--focused {
429
- --pvt-component-font-color: var(--rls-input-font-color);
449
+ --pvt-component-font-color: var(--rlc-input-font-color);
430
450
  --pvt-value-font-color: transparent;
431
451
  }
432
452
  .rls-input--disabled {
@@ -435,17 +455,17 @@
435
455
  .rls-input__component {
436
456
  position: relative;
437
457
  width: 100%;
438
- height: var(--rls-input-height);
439
- line-height: var(--rls-input-height);
458
+ height: var(--rlc-input-height);
459
+ line-height: var(--rlc-input-height);
440
460
  padding: 0rem;
441
461
  cursor: text;
442
462
  border: none;
443
463
  outline: none;
444
464
  background: transparent;
445
465
  color: var(--pvt-component-font-color);
446
- font-weight: var(--font-weight-medium);
466
+ font-weight: var(--rls-font-weight-medium);
447
467
  font-size: var(--rls-input-font-size);
448
- text-align: var(--rls-input-text-align);
468
+ text-align: var(--rlc-input-text-align);
449
469
  letter-spacing: var(--rls-input-letter-spacing);
450
470
  }
451
471
  .rls-input__component::-webkit-outer-spin-button,
@@ -454,11 +474,11 @@
454
474
  -webkit-appearance: none;
455
475
  }
456
476
  .rls-input__component::placeholder {
457
- color: var(--color-theme-100);
477
+ color: var(--rls-app-color-100);
458
478
  }
459
479
  .rls-input__component::selection {
460
- background: var(--color-rolster-700);
461
- color: var(--color-light-500);
480
+ background: var(--rls-theme-color-700);
481
+ color: var(--rls-light-color-500);
462
482
  }
463
483
  .rls-input__component:disabled {
464
484
  opacity: 0.5;
@@ -468,17 +488,17 @@
468
488
  top: 0rem;
469
489
  left: 0rem;
470
490
  width: 100%;
471
- height: var(--rls-input-height);
472
- line-height: var(--rls-input-height);
491
+ height: var(--rlc-input-height);
492
+ line-height: var(--rlc-input-height);
473
493
  background: transparent;
474
494
  pointer-events: none;
475
495
  overflow: hidden;
476
496
  white-space: nowrap;
477
497
  opacity: var(--pvt-value-opacity);
478
498
  color: var(--pvt-value-font-color);
479
- font-weight: var(--font-weight-medium);
499
+ font-weight: var(--rls-font-weight-medium);
480
500
  font-size: var(--rls-input-font-size);
481
- text-align: var(--rls-input-text-align);
501
+ text-align: var(--rlc-input-text-align);
482
502
  letter-spacing: var(--rls-input-letter-spacing);
483
503
  }
484
504
 
@@ -486,7 +506,7 @@
486
506
  position: relative;
487
507
  float: left;
488
508
  width: 100%;
489
- padding: var(--rls-input-parent-padding);
509
+ padding: var(--rlc-input-parent-padding);
490
510
  box-sizing: border-box;
491
511
  }
492
512
 
@@ -494,7 +514,7 @@
494
514
  position: relative;
495
515
  float: left;
496
516
  width: 100%;
497
- padding: var(--rls-input-parent-padding);
517
+ padding: var(--rlc-input-parent-padding);
498
518
  box-sizing: border-box;
499
519
  }
500
520
 
@@ -502,22 +522,22 @@
502
522
  position: relative;
503
523
  float: left;
504
524
  width: 100%;
505
- padding: var(--rls-input-parent-padding);
525
+ padding: var(--rlc-input-parent-padding);
506
526
  box-sizing: border-box;
507
527
  }
508
528
  .rls-input-password__component {
509
529
  position: relative;
510
530
  float: left;
511
531
  width: 100%;
512
- height: var(--sizing-x12);
513
- line-height: var(--sizing-x12);
532
+ height: var(--rls-sizing-x12);
533
+ line-height: var(--rls-sizing-x12);
514
534
  padding: 0rem;
515
535
  cursor: text;
516
536
  border: none;
517
537
  outline: none;
518
538
  background: transparent;
519
- color: var(--rls-input-font-color);
520
- font-weight: var(--font-weight-medium);
539
+ color: var(--rlc-input-font-color);
540
+ font-weight: var(--rls-font-weight-medium);
521
541
  font-size: var(--rls-input-font-size);
522
542
  letter-spacing: var(--rls-input-letter-spacing);
523
543
  }
@@ -527,11 +547,11 @@
527
547
  -webkit-appearance: none;
528
548
  }
529
549
  .rls-input-password__component::placeholder {
530
- color: var(--color-theme-100);
550
+ color: var(--rls-app-color-100);
531
551
  }
532
552
  .rls-input-password__component::selection {
533
- background: var(--color-rolster-700);
534
- color: var(--color-light-500);
553
+ background: var(--rls-theme-color-700);
554
+ color: var(--rls-light-color-500);
535
555
  }
536
556
  .rls-input-password__component:disabled {
537
557
  opacity: 0.5;
@@ -541,34 +561,34 @@
541
561
  position: relative;
542
562
  float: left;
543
563
  width: 100%;
544
- padding: var(--rls-input-parent-padding);
564
+ padding: var(--rlc-input-parent-padding);
545
565
  box-sizing: border-box;
546
566
  }
547
567
 
548
568
  .rls-message-icon {
549
- --rls-icon-color: var(--color-rolster-500);
550
- --rls-icon-width: var(--sizing-x8);
551
- --rls-icon-height: var(--sizing-x8);
552
- --rls-icon-font-size: var(--sizing-x8);
569
+ --rlc-icon-color: var(--rls-theme-color-500);
570
+ --rlc-icon-width: var(--rls-sizing-x8);
571
+ --rlc-icon-height: var(--rls-sizing-x8);
572
+ --rlc-icon-font-size: var(--rls-sizing-x8);
553
573
  display: flex;
554
574
  align-items: center;
555
- column-gap: var(--sizing-x2);
575
+ column-gap: var(--rls-sizing-x2);
556
576
  }
557
577
  .rls-message-icon span {
558
- color: var(--color-theme-300);
578
+ color: var(--rls-app-color-300);
559
579
  }
560
580
 
561
581
  .rls-poster {
562
582
  position: relative;
563
583
  float: left;
564
584
  width: auto;
565
- height: var(--rls-poster-height);
566
- line-height: var(--rls-poster-height);
567
- padding: var(--rls-poster-padding);
585
+ height: var(--rlc-poster-height);
586
+ line-height: var(--rlc-poster-height);
587
+ padding: var(--rlc-poster-padding);
568
588
  box-sizing: border-box;
569
- border-radius: var(--sizing-x2);
570
- color: var(--color-light-500);
571
- background: var(--gradient-rolster-500);
589
+ border-radius: var(--rls-sizing-x2);
590
+ color: var(--rls-light-color-500);
591
+ background: var(--rls-theme-gradient-500);
572
592
  }
573
593
 
574
594
  .rls-progress-bar {
@@ -576,9 +596,9 @@
576
596
  position: relative;
577
597
  float: left;
578
598
  width: 100%;
579
- height: var(--sizing-x2);
599
+ height: var(--rls-sizing-x2);
580
600
  overflow: hidden;
581
- background: var(--color-rolster-100);
601
+ background: var(--rls-theme-color-100);
582
602
  }
583
603
  .rls-progress-bar--indeterminate {
584
604
  --pvt-component-display: none;
@@ -589,8 +609,8 @@
589
609
  content: '';
590
610
  top: 0rem;
591
611
  width: 0%;
592
- height: var(--sizing-x2);
593
- background: var(--gradient-rolster-500);
612
+ height: var(--rls-sizing-x2);
613
+ background: var(--rls-theme-gradient-500);
594
614
  }
595
615
  .rls-progress-bar--indeterminate::after {
596
616
  animation: progress-bar-indeterminate-after 2000ms infinite;
@@ -602,10 +622,10 @@
602
622
  position: absolute;
603
623
  top: 0rem;
604
624
  width: 0%;
605
- height: var(--sizing-x4);
625
+ height: var(--rls-sizing-x4);
606
626
  display: var(--pvt-component-display);
607
- background: var(--gradient-rolster-500);
608
- transition: width 320ms 0ms var(--standard-curve);
627
+ background: var(--rls-theme-gradient-500);
628
+ transition: width 320ms 0ms var(--rls-standard-curve);
609
629
  }
610
630
 
611
631
  @keyframes progress-bar-indeterminate-before {
@@ -640,11 +660,11 @@
640
660
 
641
661
  .rls-progress-circular {
642
662
  position: relative;
643
- width: var(--rls-progress-circular-dimension);
644
- height: var(--rls-progress-circular-dimension);
645
- padding: var(--sizing-x2);
663
+ width: var(--rlc-progress-circular-dimension);
664
+ height: var(--rlc-progress-circular-dimension);
665
+ padding: var(--rls-sizing-x2);
646
666
  box-sizing: border-box;
647
- stroke: var(--color-rolster-500);
667
+ stroke: var(--rls-theme-color-500);
648
668
  }
649
669
  .rls-progress-circular__svg {
650
670
  height: 100%;
@@ -659,7 +679,7 @@
659
679
  stroke-dasharray: 65;
660
680
  stroke-dashoffset: 65;
661
681
  opacity: 1;
662
- animation: progress-circular-circle 1750ms var(--standard-curve) infinite;
682
+ animation: progress-circular-circle 1750ms var(--rls-standard-curve) infinite;
663
683
  }
664
684
 
665
685
  @keyframes progress-circular-svg {
@@ -689,18 +709,18 @@
689
709
  float: left;
690
710
  display: flex;
691
711
  outline: none;
692
- width: var(--sizing-x12);
693
- height: var(--sizing-x12);
712
+ width: var(--rls-sizing-x12);
713
+ height: var(--rls-sizing-x12);
694
714
  border-radius: 50%;
695
715
  box-sizing: border-box;
696
- border: var(--border-1-theme-300);
716
+ border: var(--rls-app-border-1-300);
697
717
  }
698
718
  .rls-radiobutton:hover {
699
719
  cursor: pointer;
700
720
  }
701
721
  .rls-radiobutton--checked {
702
722
  --pvt-component-transform: scale(1);
703
- border: var(--border-1-rolster-500);
723
+ border: var(--rls-theme-border-1-500);
704
724
  }
705
725
  .rls-radiobutton--disabled {
706
726
  opacity: 0.5;
@@ -711,22 +731,22 @@
711
731
  width: 7rem;
712
732
  height: 7rem;
713
733
  margin: auto;
714
- background: var(--gradient-rolster-500);
734
+ background: var(--rls-theme-gradient-500);
715
735
  transform: var(--pvt-component-transform);
716
736
  transform-origin: 50% 50%;
717
- transition: all 160ms 0ms var(--standard-curve);
737
+ transition: all 160ms 0ms var(--rls-standard-curve);
718
738
  }
719
739
 
720
740
  .rls-search-input {
721
- --rls-input-height: var(--sizing-x14);
741
+ --rlc-input-height: var(--rls-sizing-x14);
722
742
  position: relative;
723
743
  float: left;
724
744
  display: flex;
725
745
  align-items: center;
726
- padding: var(--sizing-x4) var(--sizing-x6);
746
+ padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
727
747
  box-sizing: border-box;
728
- border: var(--border-1-theme-300);
729
- border-radius: var(--sizing-x4);
748
+ border: var(--rls-app-border-1-300);
749
+ border-radius: var(--rls-sizing-x4);
730
750
  }
731
751
 
732
752
  .rls-skeleton {
@@ -739,8 +759,8 @@
739
759
  line-height: inherit;
740
760
  letter-spacing: inherit;
741
761
  overflow: hidden;
742
- background: var(--color-rolster-100);
743
- border-radius: var(--sizing-x2);
762
+ background: var(--rls-theme-color-100);
763
+ border-radius: var(--rls-sizing-x2);
744
764
  }
745
765
  .rls-skeleton::after {
746
766
  position: absolute;
@@ -752,10 +772,10 @@
752
772
  transform: translateX(-100%);
753
773
  background-image: linear-gradient(
754
774
  90deg,
755
- var(--skeleton-rolster-100) 0%,
756
- var(--skeleton-rolster-100) 20%,
757
- var(--skeleton-rolster-300) 60%,
758
- var(--skeleton-rolster-100)
775
+ var(--rls-theme-skeleton-100) 0%,
776
+ var(--rls-theme-skeleton-100) 20%,
777
+ var(--rls-theme-skeleton-300) 60%,
778
+ var(--rls-theme-skeleton-100)
759
779
  );
760
780
  animation: skeleton-animation 1600ms infinite;
761
781
  }
@@ -769,7 +789,6 @@
769
789
  .rls-skeleton-text {
770
790
  --pvt-value-visibility: visible;
771
791
  position: relative;
772
- float: left;
773
792
  width: 100%;
774
793
  max-height: inherit;
775
794
  min-height: inherit;
@@ -780,8 +799,8 @@
780
799
  }
781
800
  .rls-skeleton-text--active {
782
801
  --pvt-value-visibility: hidden;
783
- background: var(--color-rolster-100);
784
- border-radius: var(--sizing-x2);
802
+ background: var(--rls-theme-color-100);
803
+ border-radius: var(--rls-sizing-x2);
785
804
  }
786
805
  .rls-skeleton-text--active::after {
787
806
  animation: skeleton-text-animation 1600ms infinite;
@@ -796,16 +815,15 @@
796
815
  transform: translateX(-100%);
797
816
  background-image: linear-gradient(
798
817
  90deg,
799
- var(--skeleton-rolster-100) 0%,
800
- var(--skeleton-rolster-100) 20%,
801
- var(--skeleton-rolster-300) 60%,
802
- var(--skeleton-rolster-100)
818
+ var(--rls-theme-skeleton-100) 0%,
819
+ var(--rls-theme-skeleton-100) 20%,
820
+ var(--rls-theme-skeleton-300) 60%,
821
+ var(--rls-theme-skeleton-100)
803
822
  );
804
823
  }
805
824
  .rls-skeleton-text__value {
806
825
  position: relative;
807
826
  display: block;
808
- float: left;
809
827
  width: 100%;
810
828
  height: inherit;
811
829
  max-height: inherit;
@@ -827,20 +845,20 @@
827
845
  }
828
846
 
829
847
  .rls-switch {
830
- --pvt-element-left: var(--sizing-x1);
831
- --pvt-element-background: var(--background-theme-500);
832
- --pvt-bar-background: var(--background-theme-100);
833
- max-width: var(--sizing-x20);
848
+ --pvt-element-left: var(--rls-sizing-x1);
849
+ --pvt-element-background: var(--rls-app-background-500);
850
+ --pvt-bar-background: var(--rls-app-background-100);
851
+ max-width: var(--rls-sizing-x20);
834
852
  }
835
853
  .rls-switch:hover {
836
854
  cursor: pointer;
837
855
  }
838
856
  .rls-switch--checked {
839
- --pvt-element-background: var(--gradient-rolster-500);
857
+ --pvt-element-background: var(--rls-theme-gradient-500);
840
858
  --pvt-element-left: calc(
841
- 100% - var(--rls-switch-element-size) - var(--sizing-x1)
859
+ 100% - var(--rlc-switch-element-size) - var(--rls-sizing-x1)
842
860
  );
843
- --pvt-bar-background: var(--color-rolster-300);
861
+ --pvt-bar-background: var(--rls-theme-color-300);
844
862
  }
845
863
  .rls-switch--disabled {
846
864
  opacity: 0.5;
@@ -849,22 +867,22 @@
849
867
  .rls-switch__component {
850
868
  position: relative;
851
869
  width: 100%;
852
- padding: var(--sizing-x3) var(--sizing-x1);
870
+ padding: var(--rls-sizing-x3) var(--rls-sizing-x1);
853
871
  box-sizing: border-box;
854
872
  }
855
873
  .rls-switch__component__element {
856
874
  position: absolute;
857
875
  top: 0rem;
858
876
  left: var(--pvt-element-left);
859
- width: var(--rls-switch-element-size);
860
- height: var(--rls-switch-element-size);
861
- z-index: var(--z-index-2);
862
- padding: var(--sizing-x2);
877
+ width: var(--rlc-switch-element-size);
878
+ height: var(--rlc-switch-element-size);
879
+ z-index: var(--rls-z-index-2);
880
+ padding: var(--rls-sizing-x2);
863
881
  box-sizing: border-box;
864
882
  border-radius: 50%;
865
- background: var(--background-theme-500);
883
+ background: var(--rls-app-background-500);
866
884
  box-shadow: 0 0 2rem 0 rgba(37, 38, 65, 0.38);
867
- transition: left 240ms var(--standard-curve);
885
+ transition: left 240ms var(--rls-standard-curve);
868
886
  }
869
887
  .rls-switch__component__element::before {
870
888
  display: block;
@@ -877,71 +895,64 @@
877
895
  .rls-switch__component__bar {
878
896
  background: var(--pvt-bar-background);
879
897
  width: 100%;
880
- height: var(--rls-switch-bar-height);
881
- border-radius: var(--rls-switch-bar-radius);
898
+ height: var(--rlc-switch-bar-height);
899
+ border-radius: var(--rlc-switch-bar-radius);
882
900
  }
883
901
 
884
902
  .rls-ballot {
885
- --rls-avatar-width: var(--sizing-x20);
886
- --rls-avatar-height: var(--sizing-x20);
903
+ --rlc-avatar-width: var(--rls-sizing-x20);
904
+ --rlc-avatar-height: var(--rls-sizing-x20);
887
905
  position: relative;
888
- float: left;
889
906
  display: flex;
890
907
  width: 100%;
891
- padding: var(--sizing-x4);
908
+ align-content: center;
909
+ column-gap: var(--rls-sizing-x4);
910
+ padding: var(--rls-sizing-x4);
892
911
  box-sizing: border-box;
893
912
  overflow: hidden;
894
913
  }
895
914
  .rls-ballot--bordered {
896
- border-radius: var(--sizing-x4);
897
- border: var(--border-1-theme-300);
915
+ border-radius: var(--rls-sizing-x4);
916
+ border: var(--rls-app-border-1-300);
898
917
  }
899
918
  .rls-ballot--skeleton {
900
- --subtitle-width: 60%;
901
- }
902
- .rls-ballot > .rls-avatar {
903
- margin: auto 0rem;
904
- }
905
- .rls-ballot > .rls-avatar + .rls-ballot__component {
906
- width: calc(100% - var(--sizing-x28));
907
- margin-left: var(--sizing-x4);
919
+ --rls-subtitle-width: 60%;
908
920
  }
909
921
  .rls-ballot__component {
922
+ display: flex;
910
923
  overflow: hidden;
911
- margin: auto;
924
+ flex-direction: column;
925
+ row-gap: var(--rls-sizing-x2);
912
926
  }
913
927
  .rls-ballot__title {
914
928
  position: relative;
915
- float: left;
916
929
  width: 100%;
917
- color: var(--color-theme-500);
930
+ color: var(--rls-app-color-500);
918
931
  overflow: hidden;
919
932
  white-space: nowrap;
920
933
  text-overflow: ellipsis;
921
- font-weight: var(--font-weight-medium);
922
- font-size: var(--label-font-size);
923
- letter-spacing: var(--label-letter-spacing);
924
- min-height: var(--label-line-height);
925
- line-height: var(--label-line-height);
934
+ font-weight: var(--rls-font-weight-medium);
935
+ font-size: var(--rls-label-font-size);
936
+ letter-spacing: var(--rls-label-letter-spacing);
937
+ min-height: var(--rls-label-line-height);
938
+ line-height: var(--rls-label-line-height);
926
939
  }
927
940
  .rls-ballot__subtitle {
928
941
  position: relative;
929
- float: left;
930
- width: var(--rls-ballot-subtitle-width);
931
- color: var(--color-theme-300);
932
- margin-top: var(--sizing-x2);
933
- font-weight: var(--font-weight-semibold);
934
- font-size: var(--smalltext-font-size);
935
- letter-spacing: var(--smalltext-letter-spacing);
936
- min-height: var(--rls-ballot-subtitle-height);
937
- line-height: var(--rls-ballot-subtitle-height);
938
- overflow: var(--rls-ballot-subtitle-overflow);
939
- text-overflow: var(--rls-ballot-subtitle-text-overflow);
940
- white-space: var(--rls-ballot-subtitle-white-space);
942
+ width: var(--rlc-ballot-subtitle-width);
943
+ color: var(--rls-app-color-300);
944
+ font-weight: var(--rls-font-weight-semibold);
945
+ font-size: var(--rls-smalltext-font-size);
946
+ letter-spacing: var(--rls-smalltext-letter-spacing);
947
+ min-height: var(--rlc-ballot-subtitle-height);
948
+ line-height: var(--rlc-ballot-subtitle-height);
949
+ overflow: var(--rlc-ballot-subtitle-overflow);
950
+ text-overflow: var(--rlc-ballot-subtitle-text-overflow);
951
+ white-space: var(--rlc-ballot-subtitle-white-space);
941
952
  }
942
953
 
943
954
  .rls-button-progress {
944
- --rls-progress-circular-dimension: var(--sizing-x16);
955
+ --rlc-progress-circular-dimension: var(--rls-sizing-x16);
945
956
  position: relative;
946
957
  display: flex;
947
958
  justify-content: center;
@@ -956,34 +967,36 @@
956
967
  justify-content: center;
957
968
  }
958
969
  .rls-button-toggle__action {
959
- --rls-button-content-radius: var(--sizing-x2) 0rem 0rem var(--sizing-x2);
970
+ --rlc-button-content-radius: var(--rls-sizing-x2) 0rem 0rem
971
+ var(--rls-sizing-x2);
960
972
  width: auto;
961
973
  }
962
974
  .rls-button-toggle__icon {
963
- --rls-button-content-radius: 0rem var(--sizing-x2) var(--sizing-x2) 0rem;
964
- --rls-button-content-padding: var(--sizing-x2);
975
+ --rlc-button-content-radius: 0rem var(--rls-sizing-x2) var(--rls-sizing-x2)
976
+ 0rem;
977
+ --rlc-button-content-padding: var(--rls-sizing-x2);
965
978
  width: auto;
966
979
  }
967
980
  .rls-button-toggle__list {
968
- --rls-button-toggle-ul-height: 0rem;
969
- --rls-button-toggle-ul-opacity: 0;
970
- --rls-button-toggle-ul-transform: none;
981
+ --rlc-button-toggle-ul-height: 0rem;
982
+ --rlc-button-toggle-ul-opacity: 0;
983
+ --rlc-button-toggle-ul-transform: none;
971
984
  position: absolute;
972
985
  top: 22.5rem;
973
986
  left: 0rem;
974
987
  width: 100%;
975
988
  height: 0rem;
976
989
  overflow: hidden;
977
- z-index: var(--z-index-4);
990
+ z-index: var(--rls-z-index-4);
978
991
  }
979
992
  .rls-button-toggle__list--hide {
980
- --rls-button-toggle-ul-opacity: 0;
981
- --rls-button-toggle-ul-transform: scale(0, 0);
993
+ --rlc-button-toggle-ul-opacity: 0;
994
+ --rlc-button-toggle-ul-transform: scale(0, 0);
982
995
  }
983
996
  .rls-button-toggle__list--visible {
984
- --rls-button-toggle-ul-height: auto;
985
- --rls-button-toggle-ul-opacity: 1;
986
- --rls-button-toggle-ul-transform: scale(1, 1);
997
+ --rlc-button-toggle-ul-height: auto;
998
+ --rlc-button-toggle-ul-opacity: 1;
999
+ --rlc-button-toggle-ul-transform: scale(1, 1);
987
1000
  overflow: initial;
988
1001
  opacity: 1;
989
1002
  height: auto;
@@ -994,48 +1007,48 @@
994
1007
  flex-direction: column;
995
1008
  float: left;
996
1009
  width: 100%;
997
- height: var(--rls-button-toggle-ul-height);
998
- opacity: var(--rls-button-toggle-ul-opacity);
999
- padding: var(--sizing-x4) 0rem;
1000
- border-radius: var(--sizing-x4);
1010
+ height: var(--rlc-button-toggle-ul-height);
1011
+ opacity: var(--rlc-button-toggle-ul-opacity);
1012
+ padding: var(--rls-sizing-x4) 0rem;
1013
+ border-radius: var(--rls-sizing-x4);
1001
1014
  box-sizing: border-box;
1002
1015
  overflow-y: auto;
1003
1016
  overflow-x: hidden;
1004
- z-index: var(--z-index-2);
1005
- background: var(--background-theme-500);
1006
- border: var(--border-1-rolster-500);
1007
- transform: var(--rls-button-toggle-ul-transform);
1017
+ z-index: var(--rls-z-index-2);
1018
+ background: var(--rls-app-background-500);
1019
+ border: var(--rls-theme-border-1-500);
1020
+ transform: var(--rlc-button-toggle-ul-transform);
1008
1021
  transform-origin: 0% 0%;
1009
- transition: transform 240ms 0ms var(--standard-curve),
1010
- opacity 240ms 0ms var(--standard-curve);
1022
+ transition: transform 240ms 0ms var(--rls-standard-curve),
1023
+ opacity 240ms 0ms var(--rls-standard-curve);
1011
1024
  will-change: opacity, transform;
1012
- box-shadow: 0px 0px 0px 3px var(--box-shadow-rolster-500);
1025
+ box-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
1013
1026
  }
1014
1027
  .rls-button-toggle__list ul li {
1015
- padding: 0rem var(--sizing-x6);
1028
+ padding: 0rem var(--rls-sizing-x6);
1016
1029
  box-sizing: border-box;
1017
- height: var(--sizing-x20);
1018
- line-height: var(--sizing-x20);
1030
+ height: var(--rls-sizing-x20);
1031
+ line-height: var(--rls-sizing-x20);
1019
1032
  cursor: default;
1020
- font-weight: var(--font-weight-semibold);
1033
+ font-weight: var(--rls-font-weight-semibold);
1021
1034
  font-size: 6rem;
1022
1035
  letter-spacing: 0.825px;
1023
1036
  text-transform: uppercase;
1024
- color: var(--color-theme-300);
1037
+ color: var(--rls-app-color-300);
1025
1038
  }
1026
1039
  .rls-button-toggle__list ul li:hover {
1027
- background: var(--background-theme-300);
1028
- color: var(--color-theme-500);
1040
+ background: var(--rls-app-background-300);
1041
+ color: var(--rls-app-color-500);
1029
1042
  }
1030
1043
 
1031
1044
  .rls-checkbox-label {
1032
1045
  --pvt-text-opacity: 1;
1033
- --pvt-text-height: var(--sizing-x12);
1046
+ --pvt-text-height: var(--rls-sizing-x12);
1034
1047
  --pvt-text-overflow: hidden;
1035
1048
  --pvt-text-white-space: nowrap;
1036
1049
  --pvt-text-text-overflow: ellipsis;
1037
1050
  display: flex;
1038
- column-gap: var(--sizing-x4);
1051
+ column-gap: var(--rls-sizing-x4);
1039
1052
  }
1040
1053
  .rls-checkbox-label--disabled {
1041
1054
  --pvt-text-opacity: 0.5;
@@ -1051,13 +1064,13 @@
1051
1064
  width: auto;
1052
1065
  }
1053
1066
  .rls-checkbox-label__text {
1054
- max-width: calc(100% - var(--sizing-x16));
1067
+ max-width: calc(100% - var(--rls-sizing-x16));
1055
1068
  height: var(--pvt-text-height);
1056
- line-height: var(--sizing-x12);
1057
- color: var(--color-theme-300);
1058
- font-size: var(--label-font-size);
1059
- font-weight: var(--font-weight-medium);
1060
- letter-spacing: var(--label-letter-spacing);
1069
+ line-height: var(--rls-sizing-x12);
1070
+ color: var(--rls-app-color-300);
1071
+ font-size: var(--rls-label-font-size);
1072
+ font-weight: var(--rls-font-weight-medium);
1073
+ letter-spacing: var(--rls-label-letter-spacing);
1061
1074
  user-select: none;
1062
1075
  opacity: var(--pvt-text-opacity);
1063
1076
  overflow: var(--pvt-text-overflow);
@@ -1066,11 +1079,10 @@
1066
1079
  }
1067
1080
 
1068
1081
  .rls-day-picker {
1069
- --pvt-span-nothover-background: transparent;
1070
- --pvt-span-nothover-font-color: inherit;
1071
1082
  --pvt-span-background: transparent;
1083
+ --pvt-span-font-color: var(--rls-app-color-500);
1084
+ --pvt-span-border: var(--rls-border-1) solid transparent;
1072
1085
  position: relative;
1073
- float: left;
1074
1086
  width: 100%;
1075
1087
  max-width: 140rem;
1076
1088
  box-sizing: border-box;
@@ -1078,58 +1090,71 @@
1078
1090
  }
1079
1091
  .rls-day-picker__header {
1080
1092
  display: flex;
1081
- margin-bottom: var(--sizing-x4);
1082
- background: var(--background-theme-100);
1083
- color: var(--color-theme-500);
1084
- border-radius: var(--sizing-x2);
1093
+ margin-bottom: var(--rls-sizing-x4);
1094
+ background: var(--rls-app-background-100);
1095
+ color: var(--rls-app-color-500);
1096
+ border-radius: var(--rls-sizing-x2);
1085
1097
  }
1086
1098
  .rls-day-picker__label {
1087
- padding: var(--sizing-x6) 0rem;
1099
+ padding: var(--rls-sizing-x6) 0rem;
1088
1100
  text-align: center;
1089
1101
  width: 100%;
1090
- font-size: var(--sizing-x6);
1091
- font-weight: var(--font-weight-bold);
1102
+ font-size: var(--rls-sizing-x6);
1103
+ font-weight: var(--rls-font-weight-bold);
1092
1104
  }
1093
1105
  .rls-day-picker__week {
1094
1106
  display: flex;
1095
1107
  }
1096
1108
  .rls-day-picker__day {
1097
1109
  text-align: center;
1098
- padding: var(--sizing-x1);
1110
+ padding: var(--rls-sizing-x1);
1099
1111
  box-sizing: border-box;
1100
1112
  }
1101
1113
  .rls-day-picker__day__span {
1102
1114
  position: relative;
1103
1115
  display: block;
1104
- color: var(--color-theme-500);
1105
- border-radius: var(--sizing-x4);
1106
- height: var(--sizing-x18);
1107
- line-height: var(--sizing-x18);
1108
- margin: var(--sizing-x1) 0rem;
1109
1116
  font-size: 7rem;
1110
- font-weight: var(--font-weight-semibold);
1111
- background: var(--pvt-span-background);
1117
+ font-weight: var(--rls-font-weight-semibold);
1118
+ margin: var(--rls-sizing-x1) 0rem;
1119
+ border-radius: var(--rls-sizing-x4);
1120
+ height: var(--rls-sizing-x18);
1121
+ line-height: var(--rls-sizing-x18);
1122
+ box-sizing: border-box;
1112
1123
  }
1113
1124
  .rls-day-picker__day__span:not(:hover) {
1114
- background: var(--pvt-span-nothover-background);
1115
- color: var(--pvt-span-nothover-font-color);
1125
+ color: var(--pvt-span-font-color);
1126
+ border: var(--pvt-span-border);
1127
+ background: var(--pvt-span-background);
1116
1128
  }
1117
1129
  .rls-day-picker__day__span:hover {
1118
- background: var(--color-rolster-900);
1119
- color: var(--color-light-500);
1130
+ background: var(--rls-theme-color-900);
1131
+ color: var(--rls-theme-font-900);
1132
+ border: var(--rls-theme-border-1-900);
1133
+ }
1134
+ .rls-day-picker__day--today {
1135
+ --pvt-span-background: transparent;
1136
+ --pvt-span-font-color: var(--rls-theme-color-500);
1137
+ --pvt-span-border: var(--rls-theme-border-1-500);
1120
1138
  }
1121
1139
  .rls-day-picker__day--selected {
1122
- --pvt-span-nothover-background: var(--color-rolster-500);
1123
- --pvt-span-nothover-font-color: var(--color-light-500);
1140
+ --pvt-span-border: var(--rls-app-border-1-300);
1141
+ }
1142
+ .rls-day-picker__day--focused {
1143
+ --pvt-span-background: var(--rls-theme-color-500);
1144
+ --pvt-span-font-color: var(--rls-theme-font-500);
1145
+ --pvt-span-border: var(--rls-theme-border-1-500);
1124
1146
  }
1125
1147
  .rls-day-picker__day--forbidden {
1126
- --pvt-span-background: var(--background-theme-100);
1148
+ --pvt-span-background: var(--rls-app-background-300);
1149
+ --pvt-span-font-color: var(--rls-app-color-100);
1150
+ --pvt-span-border: var(--rls-border-1) solid var(--rls-app-background-300);
1127
1151
  pointer-events: none;
1128
- opacity: 0.5;
1129
1152
  }
1130
1153
  .rls-day-picker__day--disabled {
1154
+ --pvt-span-background: transparent;
1155
+ --pvt-span-font-color: var(--rls-app-color-100);
1156
+ --pvt-span-border: var(--rls-border-1) solid transparent;
1131
1157
  pointer-events: none;
1132
- opacity: 0.5;
1133
1158
  }
1134
1159
 
1135
1160
  .rls-day-range-picker {
@@ -1141,72 +1166,72 @@
1141
1166
  width: 100%;
1142
1167
  max-width: 140rem;
1143
1168
  flex-direction: column;
1144
- row-gap: var(--sizing-x4);
1169
+ row-gap: var(--rls-sizing-x4);
1145
1170
  box-sizing: border-box;
1146
1171
  user-select: none;
1147
1172
  }
1148
1173
  .rls-day-range-picker__title {
1149
- color: var(--color-rolster-500);
1174
+ color: var(--rls-theme-color-500);
1150
1175
  text-align: center;
1151
- padding: var(--sizing-x4) 0rem;
1152
- font-size: var(--subtitle-font-size);
1153
- letter-spacing: var(--subtitle-letter-spacing);
1154
- line-height: var(--subtitle-line-height);
1155
- font-weight: var(--font-weight-bold);
1176
+ padding: var(--rls-sizing-x4) 0rem;
1177
+ font-size: var(--rls-subtitle-font-size);
1178
+ letter-spacing: var(--rls-subtitle-letter-spacing);
1179
+ line-height: var(--rls-subtitle-line-height);
1180
+ font-weight: var(--rls-font-weight-bold);
1156
1181
  }
1157
1182
  .rls-day-range-picker__header {
1158
1183
  display: flex;
1159
- background: var(--background-theme-100);
1160
- color: var(--color-theme-500);
1161
- border-radius: var(--sizing-x2);
1184
+ background: var(--rls-app-background-100);
1185
+ color: var(--rls-app-color-500);
1186
+ border-radius: var(--rls-sizing-x2);
1162
1187
  }
1163
1188
  .rls-day-range-picker__label {
1164
- padding: var(--sizing-x6) 0rem;
1189
+ padding: var(--rls-sizing-x6) 0rem;
1165
1190
  text-align: center;
1166
1191
  width: 100%;
1167
- font-size: var(--sizing-x6);
1168
- font-weight: var(--font-weight-bold);
1192
+ font-size: var(--rls-sizing-x6);
1193
+ font-weight: var(--rls-font-weight-bold);
1169
1194
  }
1170
1195
  .rls-day-range-picker__week {
1171
1196
  display: flex;
1172
1197
  }
1173
1198
  .rls-day-range-picker__day {
1174
1199
  text-align: center;
1175
- padding: var(--sizing-x1);
1200
+ padding: var(--rls-sizing-x1);
1176
1201
  box-sizing: border-box;
1177
1202
  }
1178
1203
  .rls-day-range-picker__day__span {
1179
1204
  position: relative;
1180
1205
  display: block;
1181
- color: var(--color-theme-500);
1182
- border-radius: var(--sizing-x4);
1183
- height: var(--sizing-x18);
1184
- line-height: var(--sizing-x18);
1185
- margin: var(--sizing-x1) 0rem;
1206
+ color: var(--rls-app-color-500);
1207
+ border-radius: var(--rls-sizing-x4);
1208
+ height: var(--rls-sizing-x18);
1209
+ line-height: var(--rls-sizing-x18);
1210
+ margin: var(--rls-sizing-x1) 0rem;
1186
1211
  font-size: 7rem;
1187
- font-weight: var(--font-weight-semibold);
1212
+ font-weight: var(--rls-font-weight-semibold);
1188
1213
  }
1189
1214
  .rls-day-range-picker__day__span:not(:hover) {
1190
1215
  background: var(--pvt-span-nothover-background);
1191
1216
  color: var(--pvt-span-nothover-font-color);
1192
1217
  }
1193
1218
  .rls-day-range-picker__day__span:hover {
1194
- color: var(--color-light-500);
1195
- background: var(--color-rolster-900);
1219
+ color: var(--rls-light-color-500);
1220
+ background: var(--rls-theme-color-900);
1196
1221
  }
1197
1222
  .rls-day-range-picker__day--end {
1198
- --pvt-span-nothover-background: var(--color-theme-500);
1199
- --pvt-span-nothover-font-color: var(--background-theme-500);
1223
+ --pvt-span-nothover-background: var(--rls-app-color-500);
1224
+ --pvt-span-nothover-font-color: var(--rls-app-background-500);
1200
1225
  }
1201
1226
  .rls-day-range-picker__day--source {
1202
- --pvt-span-nothover-background: var(--color-rolster-500);
1203
- --pvt-span-nothover-font-color: var(--color-light-500);
1227
+ --pvt-span-nothover-background: var(--rls-theme-color-500);
1228
+ --pvt-span-nothover-font-color: var(--rls-light-color-500);
1204
1229
  }
1205
1230
  .rls-day-range-picker__day--ranged {
1206
- --pvt-span-nothover-background: var(--color-rolster-100);
1231
+ --pvt-span-nothover-background: var(--rls-theme-color-100);
1207
1232
  }
1208
1233
  .rls-day-range-picker__day--forbidden {
1209
- --pvt-span-background: var(--background-theme-100);
1234
+ --pvt-span-background: var(--rls-app-background-100);
1210
1235
  pointer-events: none;
1211
1236
  opacity: 0.5;
1212
1237
  }
@@ -1216,52 +1241,66 @@
1216
1241
  }
1217
1242
 
1218
1243
  .rls-money-field {
1219
- --rls-input-parent-padding: var(--sizing-x3) var(--sizing-x4);
1244
+ --rlc-input-parent-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
1220
1245
  position: relative;
1221
- float: left;
1222
1246
  width: 100%;
1223
1247
  box-sizing: border-box;
1224
1248
  }
1225
1249
 
1226
1250
  .rls-month-picker {
1251
+ --pvt-component-background: transparent;
1252
+ --pvt-component-font-color: var(--rls-app-color-500);
1253
+ --pvt-component-border: var(--rls-border-1) solid transparent;
1227
1254
  position: relative;
1228
- float: left;
1229
- width: 100%;
1230
- max-width: 140rem;
1231
1255
  display: grid;
1232
1256
  grid-template-columns: repeat(3, 1fr);
1233
- gap: var(--sizing-x2);
1234
- padding: var(--sizing-x1);
1257
+ width: 100%;
1258
+ max-width: 140rem;
1259
+ column-gap: var(--rls-sizing-x2);
1260
+ row-gap: var(--rls-sizing-x4);
1261
+ padding: var(--rls-sizing-x1);
1235
1262
  box-sizing: border-box;
1236
1263
  }
1237
1264
  .rls-month-picker__component {
1238
1265
  position: relative;
1239
- float: left;
1240
1266
  display: flex;
1241
1267
  box-sizing: border-box;
1242
- text-align: center;
1243
- height: var(--sizing-x18);
1244
- border-radius: var(--sizing-x4);
1245
- color: var(--color-theme-300);
1268
+ justify-content: center;
1269
+ align-items: center;
1270
+ height: var(--rls-sizing-x20);
1271
+ border-radius: var(--rls-sizing-x4);
1272
+ box-sizing: border-box;
1273
+ }
1274
+ .rls-month-picker__component:not(:hover) {
1275
+ color: var(--pvt-component-font-color);
1276
+ border: var(--pvt-component-border);
1277
+ background: var(--pvt-component-background);
1246
1278
  }
1247
1279
  .rls-month-picker__component:hover {
1248
- background: var(--color-rolster-900);
1249
- color: var(--color-light-500);
1280
+ background: var(--rls-theme-color-900);
1281
+ color: var(--rls-theme-font-900);
1282
+ border: var(--rls-theme-border-1-900);
1250
1283
  }
1251
- .rls-month-picker__component--selected:not(:hover) {
1252
- background: var(--color-rolster-500);
1253
- color: var(--color-light-500);
1284
+ .rls-month-picker__component--selected {
1285
+ --pvt-component-border: var(--rls-app-border-1-300);
1286
+ }
1287
+ .rls-month-picker__component--focused {
1288
+ --pvt-component-background: var(--rls-theme-color-500);
1289
+ --pvt-component-font-color: var(--rls-theme-font-500);
1290
+ --pvt-component-border: var(--rls-theme-border-1-500);
1254
1291
  }
1255
1292
  .rls-month-picker__component--disabled {
1293
+ --pvt-component-background: transparent;
1294
+ --pvt-component-font-color: var(--rls-app-color-100);
1295
+ --pvt-component-border: var(--rls-border-1) solid transparent;
1256
1296
  pointer-events: none;
1257
- opacity: 0.5;
1258
1297
  }
1259
1298
  .rls-month-picker__span {
1260
- font-size: 5.85rem;
1261
- margin: auto;
1299
+ font-weight: var(--rls-font-weight-semibold);
1300
+ font-size: 6rem;
1262
1301
  cursor: default;
1263
1302
  pointer-events: none;
1264
- font-weight: var(--font-weight-semibold);
1303
+ letter-spacing: 0.25rem;
1265
1304
  }
1266
1305
 
1267
1306
  .rls-month-title-picker {
@@ -1269,22 +1308,21 @@
1269
1308
  justify-content: space-between;
1270
1309
  }
1271
1310
  .rls-month-title-picker span {
1272
- color: var(--color-theme-300);
1311
+ color: var(--rls-app-color-300);
1273
1312
  cursor: default;
1274
1313
  margin: auto 0rem;
1275
- height: var(--sizing-x14);
1276
- line-height: var(--sizing-x14);
1277
- font-size: var(--sizing-x10);
1278
- font-weight: var(--font-weight-bold);
1314
+ height: var(--rls-sizing-x14);
1315
+ line-height: var(--rls-sizing-x14);
1316
+ font-size: var(--rls-sizing-x10);
1317
+ font-weight: var(--rls-font-weight-bold);
1279
1318
  }
1280
1319
  .rls-month-title-picker span:hover {
1281
- color: var(--color-rolster-500);
1320
+ color: var(--rls-theme-color-500);
1282
1321
  }
1283
1322
 
1284
1323
  .rls-number-field {
1285
- --rls-input-parent-padding: var(--sizing-x3) var(--sizing-x4);
1324
+ --rlc-input-parent-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
1286
1325
  position: relative;
1287
- float: left;
1288
1326
  width: 100%;
1289
1327
  box-sizing: border-box;
1290
1328
  }
@@ -1293,49 +1331,48 @@
1293
1331
  position: relative;
1294
1332
  display: flex;
1295
1333
  justify-content: center;
1296
- float: left;
1297
1334
  width: 100%;
1298
1335
  overflow: hidden;
1299
- height: var(--sizing-x20);
1300
- padding: 0rem var(--sizing-x6);
1336
+ height: var(--rls-sizing-x20);
1337
+ padding: 0rem var(--rls-sizing-x6);
1301
1338
  box-sizing: border-box;
1302
1339
  }
1303
1340
  .rls-pagination__pages {
1304
1341
  display: flex;
1305
- gap: var(--sizing-x4);
1342
+ gap: var(--rls-sizing-x4);
1306
1343
  width: auto;
1307
- margin: 0rem var(--sizing-x4);
1344
+ margin: 0rem var(--rls-sizing-x4);
1308
1345
  }
1309
1346
  .rls-pagination__page {
1310
- background: var(--background-theme-100);
1311
- color: var(--color-theme-500);
1347
+ background: var(--rls-app-background-100);
1348
+ color: var(--rls-app-color-500);
1312
1349
  cursor: default;
1313
1350
  margin: auto 0rem;
1314
1351
  text-align: center;
1315
- width: var(--sizing-x16);
1316
- height: var(--sizing-x16);
1317
- line-height: var(--sizing-x16);
1318
- border-radius: var(--sizing-x2);
1319
- font-size: var(--body-font-size);
1320
- letter-spacing: var(--body-letter-spacing);
1352
+ width: var(--rls-sizing-x16);
1353
+ height: var(--rls-sizing-x16);
1354
+ line-height: var(--rls-sizing-x16);
1355
+ border-radius: var(--rls-sizing-x2);
1356
+ font-size: var(--rls-body-font-size);
1357
+ letter-spacing: var(--rls-body-letter-spacing);
1321
1358
  }
1322
1359
  .rls-pagination__page:hover {
1323
- background: var(--color-rolster-300);
1324
- color: var(--color-rolster-900);
1360
+ background: var(--rls-theme-color-300);
1361
+ color: var(--rls-theme-color-900);
1325
1362
  }
1326
1363
  .rls-pagination__page--active {
1327
- background: var(--gradient-rolster-500);
1328
- color: var(--color-light-500);
1364
+ background: var(--rls-theme-gradient-500);
1365
+ color: var(--rls-light-color-500);
1329
1366
  }
1330
1367
  .rls-pagination__description {
1331
- color: var(--color-theme-500);
1332
- margin: 0rem var(--sizing-x4);
1368
+ color: var(--rls-app-color-500);
1369
+ margin: 0rem var(--rls-sizing-x4);
1333
1370
  width: auto;
1334
- height: var(--sizing-x20);
1335
- line-height: var(--sizing-x20);
1336
- font-size: var(--body-font-size);
1337
- font-weight: var(--font-weight-bold);
1338
- letter-spacing: var(--body-letter-spacing);
1371
+ height: var(--rls-sizing-x20);
1372
+ line-height: var(--rls-sizing-x20);
1373
+ font-size: var(--rls-body-font-size);
1374
+ font-weight: var(--rls-font-weight-bold);
1375
+ letter-spacing: var(--rls-body-letter-spacing);
1339
1376
  }
1340
1377
  .rls-pagination__actions {
1341
1378
  width: auto;
@@ -1343,14 +1380,14 @@
1343
1380
  .rls-pagination__action {
1344
1381
  background: none;
1345
1382
  outline: none;
1346
- color: var(--color-theme-300);
1347
- height: var(--sizing-x18);
1348
- width: var(--sizing-x18);
1349
- padding: var(--sizing-x3);
1350
- margin: var(--sizing-x1) 0rem;
1383
+ color: var(--rls-app-color-300);
1384
+ height: var(--rls-sizing-x18);
1385
+ width: var(--rls-sizing-x18);
1386
+ padding: var(--rls-sizing-x3);
1387
+ margin: var(--rls-sizing-x1) 0rem;
1351
1388
  }
1352
1389
  .rls-pagination__action:hover {
1353
- color: var(--color-rolster-300);
1390
+ color: var(--rls-theme-color-300);
1354
1391
  cursor: pointer;
1355
1392
  }
1356
1393
  .rls-pagination__action:disabled {
@@ -1359,26 +1396,24 @@
1359
1396
  }
1360
1397
 
1361
1398
  .rls-password-field {
1362
- --rls-input-parent-padding: var(--sizing-x3) var(--sizing-x4);
1363
- --rls-action-ripple-dimension: var(--sizing-x16);
1364
- --rls-action-ripple-position: -8rem;
1399
+ --rlc-input-parent-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
1400
+ --rlc-action-ripple-dimension: var(--rls-sizing-x16);
1401
+ --rlc-action-ripple-position: -8rem;
1365
1402
  position: relative;
1366
- float: left;
1367
1403
  width: 100%;
1368
1404
  box-sizing: border-box;
1369
1405
  }
1370
1406
  .rls-password-field .rls-button-action {
1371
- margin: auto var(--sizing-x2) auto 0rem;
1407
+ margin: auto var(--rls-sizing-x2) auto 0rem;
1372
1408
  }
1373
1409
 
1374
1410
  .rls-radiobutton-label {
1375
1411
  --pvt-text-opacity: 1;
1376
- --pvt-text-height: var(--sizing-x12);
1412
+ --pvt-text-height: var(--rls-sizing-x12);
1377
1413
  --pvt-text-overflow: hidden;
1378
1414
  --pvt-text-white-space: nowrap;
1379
1415
  --pvt-text-text-overflow: ellipsis;
1380
1416
  position: relative;
1381
- float: left;
1382
1417
  width: 100%;
1383
1418
  display: flex;
1384
1419
  }
@@ -1393,18 +1428,17 @@
1393
1428
  --pvt-text-height: auto;
1394
1429
  }
1395
1430
  .rls-radiobutton-label__component {
1396
- margin-right: var(--sizing-x4);
1431
+ margin-right: var(--rls-sizing-x4);
1397
1432
  width: auto;
1398
1433
  }
1399
1434
  .rls-radiobutton-label__text {
1400
- float: left;
1401
- max-width: calc(100% - var(--sizing-x16));
1435
+ max-width: calc(100% - var(--rls-sizing-x16));
1402
1436
  height: var(--pvt-text-height);
1403
- line-height: var(--sizing-x12);
1404
- color: var(--color-theme-300);
1405
- font-size: var(--label-font-size);
1406
- font-weight: var(--font-weight-medium);
1407
- letter-spacing: var(--label-letter-spacing);
1437
+ line-height: var(--rls-sizing-x12);
1438
+ color: var(--rls-app-color-300);
1439
+ font-size: var(--rls-label-font-size);
1440
+ font-weight: var(--rls-font-weight-medium);
1441
+ letter-spacing: var(--rls-label-letter-spacing);
1408
1442
  user-select: none;
1409
1443
  opacity: var(--pvt-text-opacity);
1410
1444
  overflow: var(--pvt-text-overflow);
@@ -1414,12 +1448,12 @@
1414
1448
 
1415
1449
  .rls-switch-label {
1416
1450
  --pvt-text-opacity: 1;
1417
- --pvt-text-height: var(--sizing-x12);
1451
+ --pvt-text-height: var(--rls-sizing-x12);
1418
1452
  --pvt-text-overflow: hidden;
1419
1453
  --pvt-text-white-space: nowrap;
1420
1454
  --pvt-text-text-overflow: ellipsis;
1421
1455
  display: flex;
1422
- column-gap: var(--sizing-x4);
1456
+ column-gap: var(--rls-sizing-x4);
1423
1457
  }
1424
1458
  .rls-switch-label--disabled {
1425
1459
  --pvt-text-opacity: 0.5;
@@ -1435,14 +1469,13 @@
1435
1469
  max-width: 20rem;
1436
1470
  }
1437
1471
  .rls-switch-label__text {
1438
- float: left;
1439
- max-width: calc(100% - var(--sizing-x28));
1472
+ max-width: calc(100% - var(--rls-sizing-x28));
1440
1473
  height: var(--pvt-text-height);
1441
- line-height: var(--sizing-x12);
1442
- color: var(--color-theme-300);
1443
- font-size: var(--label-font-size);
1444
- font-weight: var(--font-weight-medium);
1445
- letter-spacing: var(--label-letter-spacing);
1474
+ line-height: var(--rls-sizing-x12);
1475
+ color: var(--rls-app-color-300);
1476
+ font-size: var(--rls-label-font-size);
1477
+ font-weight: var(--rls-font-weight-medium);
1478
+ letter-spacing: var(--rls-label-letter-spacing);
1446
1479
  user-select: none;
1447
1480
  opacity: var(--pvt-text-opacity);
1448
1481
  overflow: var(--pvt-text-overflow);
@@ -1451,9 +1484,8 @@
1451
1484
  }
1452
1485
 
1453
1486
  .rls-text-field {
1454
- --rls-input-parent-padding: var(--sizing-x3) var(--sizing-x4);
1487
+ --rlc-input-parent-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
1455
1488
  position: relative;
1456
- float: left;
1457
1489
  width: 100%;
1458
1490
  box-sizing: border-box;
1459
1491
  }
@@ -1462,8 +1494,8 @@
1462
1494
  display: flex;
1463
1495
  justify-content: space-between;
1464
1496
  align-items: center;
1465
- column-gap: var(--sizing-x6);
1466
- height: var(--rls-toolbar-height);
1497
+ column-gap: var(--rls-sizing-x6);
1498
+ height: var(--rlc-toolbar-height);
1467
1499
  }
1468
1500
  .rls-toolbar > * {
1469
1501
  width: auto;
@@ -1471,7 +1503,7 @@
1471
1503
  .rls-toolbar__description {
1472
1504
  display: flex;
1473
1505
  flex-direction: column;
1474
- row-gap: var(--sizing-x2);
1506
+ row-gap: var(--rls-sizing-x2);
1475
1507
  overflow: hidden;
1476
1508
  }
1477
1509
  .rls-toolbar__description > label {
@@ -1482,26 +1514,28 @@
1482
1514
  white-space: nowrap;
1483
1515
  }
1484
1516
  .rls-toolbar__title {
1485
- color: var(--color-theme-500);
1486
- height: var(--sizing-x12);
1487
- line-height: var(--sizing-x12);
1517
+ color: var(--rls-app-color-500);
1518
+ height: var(--rls-sizing-x12);
1519
+ line-height: var(--rls-sizing-x12);
1488
1520
  font-size: 8.125rem;
1489
- letter-spacing: var(--label-letter-spacing);
1490
- font-weight: var(--font-weight-bold);
1521
+ letter-spacing: var(--rls-label-letter-spacing);
1522
+ font-weight: var(--rls-font-weight-bold);
1491
1523
  }
1492
1524
  .rls-toolbar__subtitle {
1493
- color: var(--color-theme-300);
1525
+ color: var(--rls-app-color-300);
1494
1526
  }
1495
1527
  .rls-toolbar__actions {
1496
1528
  display: flex;
1497
1529
  box-sizing: border-box;
1498
- column-gap: var(--sizing-x8);
1530
+ column-gap: var(--rls-sizing-x8);
1499
1531
  align-items: center;
1500
1532
  }
1501
1533
 
1502
1534
  .rls-year-picker {
1535
+ --pvt-component-background: transparent;
1536
+ --pvt-component-font-color: var(--rls-app-color-500);
1537
+ --pvt-component-border: var(--rls-border-1) solid transparent;
1503
1538
  position: relative;
1504
- float: left;
1505
1539
  width: 100%;
1506
1540
  max-width: 140rem;
1507
1541
  box-sizing: border-box;
@@ -1513,24 +1547,25 @@
1513
1547
  justify-content: space-between;
1514
1548
  align-items: center;
1515
1549
  box-sizing: border-box;
1516
- padding: var(--sizing-x4) var(--sizing-x6);
1517
- color: var(--color-theme-500);
1518
- background: var(--background-theme-100);
1550
+ padding: var(--rls-sizing-x4) var(--rls-sizing-x6);
1551
+ color: var(--rls-app-color-500);
1552
+ background: var(--rls-app-background-100);
1553
+ border-radius: var(--rls-sizing-x4);
1519
1554
  }
1520
1555
  .rls-year-picker__action {
1521
- width: var(--sizing-x16);
1522
- height: var(--sizing-x16);
1523
- line-height: var(--sizing-x16);
1556
+ width: var(--rls-sizing-x16);
1557
+ height: var(--rls-sizing-x16);
1558
+ line-height: var(--rls-sizing-x16);
1524
1559
  }
1525
1560
  .rls-year-picker__action button {
1526
- color: var(--color-theme-500);
1561
+ color: var(--rls-app-color-500);
1527
1562
  background: transparent;
1528
1563
  outline: none;
1529
1564
  width: inherit;
1530
1565
  height: inherit;
1531
1566
  }
1532
- .rls-year-picker__action button:hover {
1533
- color: var(--color-rolster-500);
1567
+ .rls-year-picker__action button:not(:disabled):hover {
1568
+ color: var(--rls-theme-color-500);
1534
1569
  }
1535
1570
  .rls-year-picker__action button:disabled {
1536
1571
  opacity: 0.5;
@@ -1538,42 +1573,53 @@
1538
1573
  .rls-year-picker__component {
1539
1574
  position: relative;
1540
1575
  display: grid;
1541
- grid-template-columns: repeat(3, 1fr);
1542
- gap: var(--sizing-x4);
1543
1576
  width: 100%;
1544
- float: left;
1545
- padding: var(--sizing-x4);
1577
+ grid-template-columns: repeat(3, 1fr);
1578
+ padding: var(--rls-sizing-x4);
1546
1579
  box-sizing: border-box;
1580
+ row-gap: var(--rls-sizing-x6);
1581
+ column-gap: var(--rls-sizing-x8);
1547
1582
  }
1548
1583
  .rls-year-picker__year {
1549
1584
  position: relative;
1550
- float: left;
1551
1585
  display: flex;
1586
+ align-items: center;
1587
+ justify-content: center;
1552
1588
  box-sizing: border-box;
1553
1589
  text-align: center;
1554
- height: var(--sizing-x18);
1555
- border-radius: var(--sizing-x4);
1556
- color: var(--color-theme-300);
1590
+ height: var(--rls-sizing-x20);
1591
+ border-radius: var(--rls-sizing-x4);
1592
+ }
1593
+ .rls-year-picker__year:not(:hover) {
1594
+ color: var(--pvt-component-font-color);
1595
+ border: var(--pvt-component-border);
1596
+ background: var(--pvt-component-background);
1557
1597
  }
1558
1598
  .rls-year-picker__year:hover {
1559
- background: var(--color-rolster-900);
1560
- color: var(--color-light-500);
1599
+ background: var(--rls-theme-color-900);
1600
+ color: var(--rls-theme-font-900);
1601
+ border: var(--rls-theme-border-1-900);
1602
+ }
1603
+ .rls-year-picker__year--selected {
1604
+ --pvt-component-border: var(--rls-app-border-1-300);
1561
1605
  }
1562
- .rls-year-picker__year--selected:not(:hover) {
1563
- background: var(--color-rolster-500);
1564
- color: var(--color-light-500);
1606
+ .rls-year-picker__year--focused {
1607
+ --pvt-component-background: var(--rls-theme-color-500);
1608
+ --pvt-component-font-color: var(--rls-theme-font-500);
1609
+ --pvt-component-border: var(--rls-theme-border-1-500);
1565
1610
  }
1566
1611
  .rls-year-picker__year--disabled {
1612
+ --pvt-span-background: var(--rls-app-background-300);
1613
+ --pvt-component-font-color: var(--rls-app-color-100);
1614
+ --pvt-span-border: var(--rls-border-1) solid var(--rls-app-background-300);
1567
1615
  pointer-events: none;
1568
- border: none;
1569
- opacity: 0.5;
1570
1616
  }
1571
1617
  .rls-year-picker__year__span {
1572
- font-size: var(--sizing-x8);
1573
- margin: auto;
1618
+ font-weight: var(--rls-font-weight-semibold);
1619
+ font-size: var(--rls-sizing-x8);
1574
1620
  cursor: default;
1575
1621
  pointer-events: none;
1576
- font-weight: var(--font-weight-medium);
1622
+ letter-spacing: 0.325rem;
1577
1623
  }
1578
1624
 
1579
1625
  .rls-autocomplete-field {
@@ -1581,7 +1627,7 @@
1581
1627
  --pvt-control-opacity: 1;
1582
1628
  }
1583
1629
  .rls-autocomplete-field.rls-box-field--selected {
1584
- --pvt-control-width: calc(100% - var(--sizing-x14));
1630
+ --pvt-control-width: calc(100% - var(--rls-sizing-x14));
1585
1631
  }
1586
1632
  .rls-autocomplete-field.rls-box-field--disabled {
1587
1633
  --pvt-control-opacity: 0.5;
@@ -1597,72 +1643,72 @@
1597
1643
  display: flex;
1598
1644
  align-items: center;
1599
1645
  width: 100%;
1600
- margin-top: var(--sizing-x2);
1601
- margin-bottom: var(--sizing-x6);
1602
- background: var(--background-theme-300);
1603
- border-radius: var(--sizing-x4);
1604
- padding: var(--sizing-x4);
1646
+ margin-top: var(--rls-sizing-x2);
1647
+ margin-bottom: var(--rls-sizing-x6);
1648
+ background: var(--rls-app-background-300);
1649
+ border-radius: var(--rls-sizing-x4);
1650
+ padding: var(--rls-sizing-x4);
1605
1651
  box-sizing: border-box;
1606
1652
  }
1607
1653
  .rls-autocomplete-field .rls-list-field__ul__search button {
1608
- color: var(--color-theme-300);
1654
+ color: var(--rls-app-color-300);
1609
1655
  background: transparent;
1610
1656
  }
1611
1657
  .rls-autocomplete-field
1612
1658
  .rls-list-field__ul__search
1613
1659
  button:not(:disabled):hover {
1614
- color: var(--color-rolster-300);
1660
+ color: var(--rls-theme-color-300);
1615
1661
  }
1616
1662
  .rls-autocomplete-field .rls-list-field__ul__search button:disabled {
1617
1663
  opacity: 0.5;
1618
1664
  }
1619
1665
  .rls-autocomplete-field .rls-list-field__ul__control {
1620
1666
  width: 100%;
1621
- height: var(--sizing-x12);
1622
- line-height: var(--sizing-x12);
1667
+ height: var(--rls-sizing-x12);
1668
+ line-height: var(--rls-sizing-x12);
1623
1669
  padding: 0rem;
1624
1670
  cursor: text;
1625
1671
  border: none;
1626
1672
  outline: none;
1627
1673
  background: transparent;
1628
- color: var(--color-theme-500);
1629
- font-size: var(--input-font-size);
1630
- font-weight: var(--font-weight-medium);
1631
- letter-spacing: var(--input-letter-spacing);
1674
+ color: var(--rls-app-color-500);
1675
+ font-size: var(--rls-input-font-size);
1676
+ font-weight: var(--rls-font-weight-medium);
1677
+ letter-spacing: var(--rls-input-letter-spacing);
1632
1678
  }
1633
1679
  .rls-autocomplete-field .rls-list-field__ul__control::placeholder {
1634
- color: var(--color-theme-100);
1680
+ color: var(--rls-app-color-100);
1635
1681
  }
1636
1682
  .rls-autocomplete-field .rls-list-field__ul__control::selection {
1637
- background: var(--color-rolster-700);
1638
- color: var(--color-light-500);
1683
+ background: var(--rls-theme-color-700);
1684
+ color: var(--rls-light-color-500);
1639
1685
  }
1640
1686
  .rls-autocomplete-field .rls-list-field__ul__control:disabled {
1641
1687
  opacity: 0.5;
1642
1688
  }
1643
1689
  .rls-autocomplete-field .rls-list-field__ul .rls-progress-bar {
1644
- margin-bottom: var(--sizing-x8);
1690
+ margin-bottom: var(--rls-sizing-x8);
1645
1691
  }
1646
1692
  .rls-autocomplete-field .rls-list-field__element .rls-ballot__title label {
1647
- background: var(--color-rolster-100);
1648
- color: var(--color-rolster-500);
1649
- padding: 0rem var(--sizing-x2);
1650
- border-radius: var(--sizing-x2);
1693
+ background: var(--rls-theme-color-100);
1694
+ color: var(--rls-theme-color-500);
1695
+ padding: 0rem var(--rls-sizing-x2);
1696
+ border-radius: var(--rls-sizing-x2);
1651
1697
  }
1652
1698
 
1653
1699
  .rls-card {
1654
- background: var(--background-theme-500);
1655
- border-radius: var(--sizing-x4);
1656
- box-shadow: var(--shadow-center-light-8);
1700
+ background: var(--rls-app-background-500);
1701
+ border-radius: var(--rls-sizing-x4);
1702
+ box-shadow: var(--rls-light-shadow-center-8);
1657
1703
  }
1658
1704
  .rls-card--outline {
1659
- border: var(--border-1-theme-100);
1705
+ border: var(--rls-app-border-1-100);
1660
1706
  box-shadow: none;
1661
1707
  }
1662
1708
  .rls-card__content {
1663
1709
  display: flex;
1664
1710
  flex-direction: column;
1665
- padding: var(--rls-card-content-padding);
1711
+ padding: var(--rlc-card-content-padding);
1666
1712
  box-sizing: border-box;
1667
1713
  }
1668
1714
 
@@ -1671,13 +1717,13 @@
1671
1717
  --pvt-component-height: 0rem;
1672
1718
  --pvt-component-opacity: 0;
1673
1719
  --pvt-component-visibility: hidden;
1674
- --pvt-title-font-size: var(--heading5-font-size);
1675
- --pvt-title-letter-spacing: var(--heading5-letter-spacing);
1676
- --pvt-title-line-height: var(--heading5-line-height);
1720
+ --pvt-title-font-size: var(--rls-heading5-font-size);
1721
+ --pvt-title-letter-spacing: var(--rls-heading5-letter-spacing);
1722
+ --pvt-title-line-height: var(--rls-heading5-line-height);
1677
1723
  --pvt-title-text-transform: initial;
1678
- --pvt-subtitle-font-size: var(--body-font-size);
1679
- --pvt-subtitle-letter-spacing: var(--body-letter-spacing);
1680
- --pvt-subtitle-line-height: var(--body-line-height);
1724
+ --pvt-subtitle-font-size: var(--rls-body-font-size);
1725
+ --pvt-subtitle-letter-spacing: var(--rls-body-letter-spacing);
1726
+ --pvt-subtitle-line-height: var(--rls-body-line-height);
1681
1727
  --pvt-subtitle-text-transform: initial;
1682
1728
  --pvt-content-font-size: 7.4rem;
1683
1729
  --pvt-content-letter-spacing: 0.05em;
@@ -1692,7 +1738,7 @@
1692
1738
  left: 0rem;
1693
1739
  width: 100vw;
1694
1740
  height: 100vh;
1695
- z-index: var(--z-index-24);
1741
+ z-index: var(--rls-z-index-24);
1696
1742
  visibility: hidden;
1697
1743
  }
1698
1744
  .rls-confirmation--visible {
@@ -1708,37 +1754,37 @@
1708
1754
  position: absolute;
1709
1755
  display: flex;
1710
1756
  flex-direction: column;
1711
- row-gap: var(--sizing-x8);
1712
- width: calc(100% - var(--sizing-x16));
1757
+ row-gap: var(--rls-sizing-x8);
1758
+ width: calc(100% - var(--rls-sizing-x16));
1713
1759
  max-width: 280rem;
1714
1760
  height: var(--pvt-component-height);
1715
1761
  opacity: var(--pvt-component-opacity);
1716
1762
  visibility: var(--pvt-component-visibility);
1717
- padding: var(--sizing-x8) 0rem;
1763
+ padding: var(--rls-sizing-x8) 0rem;
1718
1764
  box-sizing: border-box;
1719
- z-index: var(--z-index-2);
1720
- border-radius: var(--sizing-x4);
1721
- background: var(--background-theme-500);
1722
- box-shadow: var(--shadow-4);
1765
+ z-index: var(--rls-z-index-2);
1766
+ border-radius: var(--rls-sizing-x4);
1767
+ background: var(--rls-app-background-500);
1768
+ box-shadow: var(--rls-app-shadow-4);
1723
1769
  will-change: transform;
1724
1770
  transform: var(--pvt-component-transform);
1725
- transition: opacity 125ms 0ms var(--deceleration-curve),
1726
- transform 125ms 0ms var(--deceleration-curve),
1727
- visibility 125ms 0ms var(--deceleration-curve);
1771
+ transition: opacity 125ms 0ms var(--rls-deceleration-curve),
1772
+ transform 125ms 0ms var(--rls-deceleration-curve),
1773
+ visibility 125ms 0ms var(--rls-deceleration-curve);
1728
1774
  }
1729
1775
  .rls-confirmation__header {
1730
1776
  position: relative;
1731
1777
  display: flex;
1732
1778
  flex-direction: column;
1733
- row-gap: var(--sizing-x2);
1779
+ row-gap: var(--rls-sizing-x2);
1734
1780
  width: 100%;
1735
- padding: 0rem var(--sizing-x8);
1781
+ padding: 0rem var(--rls-sizing-x8);
1736
1782
  box-sizing: border-box;
1737
1783
  }
1738
1784
  .rls-confirmation__header__title {
1739
1785
  text-align: center;
1740
- color: var(--color-theme-500);
1741
- font-weight: var(--font-weight-bold);
1786
+ color: var(--rls-app-color-500);
1787
+ font-weight: var(--rls-font-weight-bold);
1742
1788
  font-size: var(--pvt-title-font-size);
1743
1789
  line-height: var(--pvt-title-line-height);
1744
1790
  letter-spacing: var(--pvt-title-letter-spacing);
@@ -1746,8 +1792,8 @@
1746
1792
  }
1747
1793
  .rls-confirmation__header__subtitle {
1748
1794
  text-align: center;
1749
- color: var(--color-rolster-300);
1750
- font-weight: var(--font-weight-bold);
1795
+ color: var(--rls-theme-color-300);
1796
+ font-weight: var(--rls-font-weight-bold);
1751
1797
  font-size: var(--pvt-subtitle-font-size);
1752
1798
  line-height: var(--pvt-subtitle-line-height);
1753
1799
  letter-spacing: var(--pvt-subtitle-letter-spacing);
@@ -1756,15 +1802,15 @@
1756
1802
  .rls-confirmation__body {
1757
1803
  position: relative;
1758
1804
  width: 100%;
1759
- padding: 0rem var(--sizing-x8);
1805
+ padding: 0rem var(--rls-sizing-x8);
1760
1806
  box-sizing: border-box;
1761
1807
  }
1762
1808
  .rls-confirmation__body__content {
1763
- color: var(--color-theme-300);
1809
+ color: var(--rls-app-color-300);
1764
1810
  text-align: center;
1765
1811
  }
1766
1812
  .rls-confirmation__body__content p {
1767
- font-weight: var(--font-weight-medium);
1813
+ font-weight: var(--rls-font-weight-medium);
1768
1814
  font-size: var(--pvt-content-font-size);
1769
1815
  line-height: var(--pvt-content-line-height);
1770
1816
  letter-spacing: var(--pvt-content-letter-spacing);
@@ -1772,7 +1818,7 @@
1772
1818
  .rls-confirmation__footer {
1773
1819
  position: relative;
1774
1820
  width: 100%;
1775
- padding: var(--sizing-x4) var(--sizing-x8) 0rem var(--sizing-x8);
1821
+ padding: var(--rls-sizing-x4) var(--rls-sizing-x8) 0rem var(--rls-sizing-x8);
1776
1822
  box-sizing: border-box;
1777
1823
  }
1778
1824
  .rls-confirmation__footer__actions {
@@ -1781,7 +1827,7 @@
1781
1827
  display: flex;
1782
1828
  flex-direction: row-reverse;
1783
1829
  justify-content: center;
1784
- column-gap: var(--sizing-x8);
1830
+ column-gap: var(--rls-sizing-x8);
1785
1831
  }
1786
1832
  .rls-confirmation__backdrop {
1787
1833
  position: absolute;
@@ -1793,26 +1839,26 @@
1793
1839
  opacity: var(--pvt-backdrop-opacity);
1794
1840
  z-index: 1;
1795
1841
  will-change: opacity;
1796
- background: var(--backdrop-rolster-500);
1842
+ background: var(--rls-theme-backdrop-900);
1797
1843
  backdrop-filter: blur(2px);
1798
- transition: opacity 120ms 0ms var(--deceleration-curve),
1799
- bottom 120ms 0ms var(--deceleration-curve);
1844
+ transition: opacity 120ms 0ms var(--rls-deceleration-curve),
1845
+ bottom 120ms 0ms var(--rls-deceleration-curve);
1800
1846
  }
1801
1847
 
1802
1848
  @media screen and (max-width: 480px) {
1803
1849
  .rls-confirmation {
1804
- --pvt-title-font-size: var(--title-font-size);
1805
- --pvt-title-letter-spacing: var(--title-letter-spacing);
1806
- --pvt-title-line-height: var(--title-line-height);
1807
- --pvt-subtitle-font-size: var(--smalltext-font-size);
1808
- --pvt-subtitle-letter-spacing: var(--smalltext-letter-spacing);
1809
- --pvt-subtitle-line-height: var(--smalltext-line-height);
1850
+ --pvt-title-font-size: var(--rls-title-font-size);
1851
+ --pvt-title-letter-spacing: var(--rls-title-letter-spacing);
1852
+ --pvt-title-line-height: var(--rls-title-line-height);
1853
+ --pvt-subtitle-font-size: var(--rls-smalltext-font-size);
1854
+ --pvt-subtitle-letter-spacing: var(--rls-smalltext-letter-spacing);
1855
+ --pvt-subtitle-line-height: var(--rls-smalltext-line-height);
1810
1856
  --pvt-content-font-size: 7.325rem;
1811
1857
  }
1812
1858
  .rls-confirmation__footer__actions {
1813
1859
  flex-direction: column-reverse;
1814
1860
  column-gap: 0rem;
1815
- row-gap: var(--sizing-x8);
1861
+ row-gap: var(--rls-sizing-x8);
1816
1862
  }
1817
1863
  }
1818
1864
 
@@ -1820,45 +1866,50 @@
1820
1866
  position: relative;
1821
1867
  display: flex;
1822
1868
  flex-direction: column;
1823
- overflow: hidden;
1824
1869
  max-width: 150rem;
1870
+ overflow: hidden;
1871
+ row-gap: var(--rls-sizing-x4);
1825
1872
  }
1826
1873
  .rls-date-picker__header {
1827
- background: var(--color-rolster-100);
1828
- padding: var(--sizing-x4);
1874
+ display: flex;
1875
+ flex-direction: column;
1876
+ row-gap: var(--rls-sizing-x4);
1877
+ padding: var(--rls-sizing-x4);
1878
+ box-sizing: border-box;
1879
+ background: var(--rls-theme-color-100);
1880
+ }
1881
+ .rls-date-picker__header .rls-month-title-picker {
1882
+ padding: 0rem var(--rls-sizing-x6);
1829
1883
  box-sizing: border-box;
1830
- margin-bottom: var(--sizing-x8);
1831
1884
  }
1832
1885
  .rls-date-picker__title {
1833
- color: var(--color-theme-500);
1886
+ color: var(--rls-app-color-500);
1834
1887
  text-align: center;
1835
1888
  cursor: default;
1836
- font-weight: var(--font-weight-bold);
1889
+ font-weight: var(--rls-font-weight-bold);
1837
1890
  }
1838
1891
  .rls-date-picker__title:hover {
1839
- color: var(--color-rolster-500);
1892
+ color: var(--rls-theme-color-500);
1840
1893
  }
1841
1894
  .rls-date-picker__title--description {
1842
- height: var(--sizing-x16);
1843
- line-height: var(--sizing-x16);
1895
+ height: var(--rls-sizing-x16);
1896
+ line-height: var(--rls-sizing-x16);
1844
1897
  font-size: 9.25rem;
1845
1898
  }
1846
1899
  .rls-date-picker__title--year {
1847
- margin: var(--sizing-x4) 0rem var(--sizing-x2) 0rem;
1848
- height: var(--sizing-x16);
1849
- line-height: var(--sizing-x16);
1850
- font-size: var(--sizing-x12);
1851
- color: var(--color-theme-300);
1900
+ height: var(--rls-sizing-x16);
1901
+ line-height: var(--rls-sizing-x16);
1902
+ font-size: var(--rls-sizing-x12);
1903
+ color: var(--rls-app-color-300);
1852
1904
  }
1853
1905
  .rls-date-picker__component {
1854
1906
  display: flex;
1907
+ justify-content: center;
1855
1908
  width: 150rem;
1856
- padding: 0rem var(--sizing-x2);
1909
+ padding: 0rem var(--rls-sizing-x2);
1857
1910
  box-sizing: border-box;
1858
- margin-bottom: var(--sizing-x4);
1859
1911
  }
1860
1912
  .rls-date-picker__component > * {
1861
- margin: 0rem auto;
1862
1913
  display: none;
1863
1914
  }
1864
1915
  .rls-date-picker__component--day .rls-day-picker {
@@ -1870,22 +1921,20 @@
1870
1921
  .rls-date-picker__component--year .rls-year-picker {
1871
1922
  display: block;
1872
1923
  }
1873
- .rls-date-picker__footer--hidden {
1874
- display: none;
1875
- }
1876
1924
  .rls-date-picker__actions {
1877
1925
  display: flex;
1878
1926
  flex-wrap: wrap;
1879
- gap: var(--sizing-x4);
1880
- padding: var(--sizing-x4) var(--sizing-x8) var(--sizing-x6) var(--sizing-x8);
1927
+ gap: var(--rls-sizing-x4);
1928
+ padding: var(--rls-sizing-x4) var(--rls-sizing-x8) var(--rls-sizing-x6)
1929
+ var(--rls-sizing-x8);
1881
1930
  overflow: hidden;
1882
1931
  box-sizing: border-box;
1883
1932
  }
1884
1933
  .rls-date-picker__actions--cancel {
1885
- width: calc(50% - var(--sizing-x2));
1934
+ width: calc(50% - var(--rls-sizing-x2));
1886
1935
  }
1887
1936
  .rls-date-picker__actions--today {
1888
- width: calc(50% - var(--sizing-x2));
1937
+ width: calc(50% - var(--rls-sizing-x2));
1889
1938
  }
1890
1939
  .rls-date-picker__actions--ok {
1891
1940
  width: 100%;
@@ -1907,7 +1956,7 @@
1907
1956
  left: 0rem;
1908
1957
  width: 100%;
1909
1958
  height: 100%;
1910
- z-index: var(--z-index-24);
1959
+ z-index: var(--rls-z-index-24);
1911
1960
  visibility: hidden;
1912
1961
  align-items: center;
1913
1962
  justify-content: center;
@@ -1924,19 +1973,19 @@
1924
1973
  .rls-modal__component {
1925
1974
  position: absolute;
1926
1975
  width: auto;
1927
- max-width: calc(100% - var(--sizing-x8));
1976
+ max-width: calc(100% - var(--rls-sizing-x8));
1928
1977
  height: var(--pvt-component-height);
1929
1978
  opacity: var(--pvt-component-opacity);
1930
1979
  visibility: var(--pvt-component-visibility);
1931
- z-index: var(--z-index-2);
1980
+ z-index: var(--rls-z-index-2);
1932
1981
  overflow: hidden;
1933
- border-radius: var(--sizing-x4);
1934
- background: var(--background-theme-500);
1982
+ border-radius: var(--rls-sizing-x4);
1983
+ background: var(--rls-app-background-500);
1935
1984
  will-change: transform;
1936
1985
  transform: var(--pvt-component-transform);
1937
- transition: opacity 125ms 0ms var(--deceleration-curve),
1938
- transform 125ms 0ms var(--deceleration-curve),
1939
- visibility 125ms 0ms var(--deceleration-curve);
1986
+ transition: opacity 125ms 0ms var(--rls-deceleration-curve),
1987
+ transform 125ms 0ms var(--rls-deceleration-curve),
1988
+ visibility 125ms 0ms var(--rls-deceleration-curve);
1940
1989
  }
1941
1990
  .rls-modal__backdrop {
1942
1991
  position: absolute;
@@ -1948,47 +1997,47 @@
1948
1997
  opacity: var(--pvt-backdrop-opacity);
1949
1998
  z-index: 1;
1950
1999
  will-change: opacity;
1951
- background: var(--backdrop-rolster-500);
2000
+ background: var(--rls-theme-backdrop-900);
1952
2001
  backdrop-filter: blur(2px);
1953
- transition: opacity 120ms 0ms var(--deceleration-curve),
1954
- bottom 120ms 0ms var(--deceleration-curve);
2002
+ transition: opacity 120ms 0ms var(--rls-deceleration-curve),
2003
+ bottom 120ms 0ms var(--rls-deceleration-curve);
1955
2004
  }
1956
2005
 
1957
2006
  .rls-date-field {
1958
- --rls-boxfield-body-padding: var(--sizing-x3) var(--sizing-x4);
2007
+ --rlc-boxfield-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
1959
2008
  position: relative;
1960
- float: left;
1961
2009
  width: 100%;
1962
2010
  box-sizing: border-box;
1963
2011
  }
2012
+ .rls-date-field .rls-box-field__body {
2013
+ column-gap: var(--rls-sizing-x2);
2014
+ }
1964
2015
  .rls-date-field__control {
1965
2016
  position: relative;
1966
- float: left;
1967
- width: calc(100% - var(--sizing-x14));
1968
- height: var(--sizing-x12);
1969
- line-height: var(--sizing-x12);
2017
+ width: calc(100% - var(--rls-sizing-x14));
2018
+ height: var(--rls-sizing-x12);
2019
+ line-height: var(--rls-sizing-x12);
1970
2020
  padding: 0rem;
1971
2021
  cursor: default;
1972
2022
  border: none;
1973
2023
  outline: none;
1974
- color: var(--color-theme-input);
1975
2024
  background: transparent;
1976
- font-size: var(--input-font-size);
1977
- font-weight: var(--font-weight-medium);
1978
- letter-spacing: var(--input-letter-spacing);
2025
+ color: var(--rls-app-color-500);
2026
+ font-size: var(--rls-input-font-size);
2027
+ font-weight: var(--rls-font-weight-medium);
2028
+ letter-spacing: var(--rls-input-letter-spacing);
1979
2029
  }
1980
2030
  .rls-date-field__control::placeholder {
1981
- color: var(--color-theme-100);
2031
+ color: var(--rls-app-color-100);
1982
2032
  }
1983
2033
  .rls-date-field__control:disabled {
1984
2034
  opacity: 0.5;
1985
2035
  }
1986
2036
  .rls-date-field__action {
1987
- color: var(--color-theme-300);
1988
- width: var(--sizing-x12);
1989
- height: var(--sizing-x12);
2037
+ color: var(--rls-app-color-300);
2038
+ width: var(--rls-sizing-x12);
2039
+ height: var(--rls-sizing-x12);
1990
2040
  padding: 0rem;
1991
- margin-left: var(--sizing-x2);
1992
2041
  background: transparent;
1993
2042
  }
1994
2043
  .rls-date-field__action:disabled {
@@ -1999,52 +2048,52 @@
1999
2048
  position: relative;
2000
2049
  display: flex;
2001
2050
  flex-direction: column;
2002
- row-gap: var(--sizing-x4);
2051
+ row-gap: var(--rls-sizing-x4);
2003
2052
  overflow: hidden;
2004
2053
  max-width: 150rem;
2005
2054
  }
2006
2055
  .rls-date-range-picker__header {
2007
- background: var(--color-rolster-100);
2008
- padding: var(--sizing-x4);
2056
+ background: var(--rls-theme-color-100);
2057
+ padding: var(--rls-sizing-x4);
2009
2058
  box-sizing: border-box;
2010
2059
  }
2011
2060
  .rls-date-range-picker__title {
2012
- color: var(--color-theme-500);
2061
+ color: var(--rls-app-color-500);
2013
2062
  text-align: center;
2014
2063
  cursor: default;
2015
- font-weight: var(--font-weight-bold);
2064
+ font-weight: var(--rls-font-weight-bold);
2016
2065
  }
2017
2066
  .rls-date-range-picker__title:hover {
2018
- color: var(--color-rolster-500);
2067
+ color: var(--rls-theme-color-500);
2019
2068
  }
2020
2069
  .rls-date-range-picker__title--description {
2021
- height: var(--sizing-x16);
2022
- line-height: var(--sizing-x16);
2070
+ height: var(--rls-sizing-x16);
2071
+ line-height: var(--rls-sizing-x16);
2023
2072
  font-size: 9.25rem;
2024
2073
  }
2025
2074
  .rls-date-range-picker__title--year {
2026
- margin: var(--sizing-x4) 0rem var(--sizing-x2) 0rem;
2027
- height: var(--sizing-x16);
2028
- line-height: var(--sizing-x16);
2029
- font-size: var(--sizing-x12);
2030
- color: var(--color-theme-300);
2075
+ margin: var(--rls-sizing-x4) 0rem var(--rls-sizing-x2) 0rem;
2076
+ height: var(--rls-sizing-x16);
2077
+ line-height: var(--rls-sizing-x16);
2078
+ font-size: var(--rls-sizing-x12);
2079
+ color: var(--rls-app-color-300);
2031
2080
  }
2032
2081
  .rls-date-range-picker__title--month {
2033
2082
  display: flex;
2034
2083
  justify-content: space-between;
2035
2084
  }
2036
2085
  .rls-date-range-picker__title--month span {
2037
- height: var(--sizing-x14);
2038
- line-height: var(--sizing-x14);
2039
- font-size: var(--sizing-x10);
2040
- color: var(--color-theme-300);
2086
+ height: var(--rls-sizing-x14);
2087
+ line-height: var(--rls-sizing-x14);
2088
+ font-size: var(--rls-sizing-x10);
2089
+ color: var(--rls-app-color-300);
2041
2090
  margin: auto 0rem;
2042
2091
  }
2043
2092
  .rls-date-range-picker__component {
2044
2093
  display: flex;
2045
2094
  justify-content: center;
2046
2095
  width: 150rem;
2047
- padding: 0rem var(--sizing-x2);
2096
+ padding: 0rem var(--rls-sizing-x2);
2048
2097
  box-sizing: border-box;
2049
2098
  }
2050
2099
  .rls-date-range-picker__component > * {
@@ -2065,8 +2114,8 @@
2065
2114
  .rls-date-range-picker__actions {
2066
2115
  display: flex;
2067
2116
  flex-wrap: wrap;
2068
- gap: var(--sizing-x4);
2069
- padding: 0rem var(--sizing-x8) var(--sizing-x6) var(--sizing-x8);
2117
+ gap: var(--rls-sizing-x4);
2118
+ padding: 0rem var(--rls-sizing-x8) var(--rls-sizing-x6) var(--rls-sizing-x8);
2070
2119
  overflow: hidden;
2071
2120
  box-sizing: border-box;
2072
2121
  }
@@ -2075,69 +2124,68 @@
2075
2124
  }
2076
2125
 
2077
2126
  .rls-date-range-field {
2078
- --rls-boxfield-body-padding: var(--sizing-x3) var(--sizing-x4);
2127
+ --rlc-boxfield-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
2079
2128
  position: relative;
2080
- float: left;
2081
2129
  width: 100%;
2082
2130
  box-sizing: border-box;
2083
2131
  }
2084
2132
  .rls-date-range-field__control {
2085
2133
  position: relative;
2086
- float: left;
2087
- width: calc(100% - var(--sizing-x14));
2088
- height: var(--sizing-x12);
2089
- line-height: var(--sizing-x12);
2134
+ width: calc(100% - var(--rls-sizing-x14));
2135
+ height: var(--rls-sizing-x12);
2136
+ line-height: var(--rls-sizing-x12);
2090
2137
  padding: 0rem;
2091
2138
  cursor: default;
2092
2139
  border: none;
2093
2140
  outline: none;
2094
- color: var(--rls-input-font-color);
2141
+ color: var(--rlc-input-font-color);
2095
2142
  background: transparent;
2096
- font-size: var(--input-font-size);
2097
- font-weight: var(--font-weight-medium);
2098
- letter-spacing: var(--input-letter-spacing);
2143
+ font-size: var(--rls-input-font-size);
2144
+ font-weight: var(--rls-font-weight-medium);
2145
+ letter-spacing: var(--rls-input-letter-spacing);
2099
2146
  }
2100
2147
  .rls-date-range-field__control::placeholder {
2101
- color: var(--color-theme-100);
2148
+ color: var(--rls-app-color-100);
2102
2149
  }
2103
2150
  .rls-date-range-field__control:disabled {
2104
2151
  opacity: 0.5;
2105
2152
  }
2106
2153
  .rls-date-range-field__action {
2107
- color: var(--color-theme-300);
2108
- width: var(--sizing-x12);
2109
- height: var(--sizing-x12);
2154
+ color: var(--rls-app-color-300);
2155
+ width: var(--rls-sizing-x12);
2156
+ height: var(--rls-sizing-x12);
2110
2157
  padding: 0rem;
2111
- margin-left: var(--sizing-x2);
2158
+ margin-left: var(--rls-sizing-x2);
2112
2159
  background: transparent;
2113
2160
  }
2114
2161
 
2115
2162
  .rls-form-navigation {
2116
2163
  position: fixed;
2117
- top: var(--sizing-x8);
2118
- right: var(--sizing-x8);
2119
- width: calc(100% - var(--sizing-x16));
2164
+ top: var(--rls-sizing-x8);
2165
+ right: var(--rls-sizing-x8);
2166
+ width: calc(100% - var(--rls-sizing-x16));
2120
2167
  max-width: 160rem;
2121
2168
  height: auto;
2122
- max-height: calc(100vh - var(--sizing-x16));
2123
- z-index: var(--z-index-12);
2124
- padding: var(--sizing-x8) var(--sizing-x8) var(--sizing-x12) var(--sizing-x8);
2169
+ max-height: calc(100vh - var(--rls-sizing-x16));
2170
+ z-index: var(--rls-z-index-12);
2171
+ padding: var(--rls-sizing-x8) var(--rls-sizing-x8) var(--rls-sizing-x12)
2172
+ var(--rls-sizing-x8);
2125
2173
  box-sizing: border-box;
2126
- background: var(--background-theme-500);
2127
- border-radius: var(--sizing-x4);
2128
- box-shadow: var(--shadow-center-dark-8);
2129
- transform: translateX(calc(100% + var(--sizing-x16)));
2130
- transition: transform 240ms 0ms var(--standard-curve);
2174
+ background: var(--rls-app-background-500);
2175
+ border-radius: var(--rls-sizing-x4);
2176
+ box-shadow: var(--rls-dark-shadow-center-8);
2177
+ transform: translateX(calc(100% + var(--rls-sizing-x16)));
2178
+ transition: transform 240ms 0ms var(--rls-standard-curve);
2131
2179
  }
2132
2180
  .rls-form-navigation--visible {
2133
2181
  transform: translateX(0%);
2134
2182
  }
2135
2183
  .rls-form-navigation__header {
2136
- margin-bottom: var(--sizing-x8);
2184
+ margin-bottom: var(--rls-sizing-x8);
2137
2185
  }
2138
2186
  .rls-form-navigation__header .rls-button-action {
2139
- width: var(--sizing-x12);
2140
- height: var(--sizing-x12);
2187
+ width: var(--rls-sizing-x12);
2188
+ height: var(--rls-sizing-x12);
2141
2189
  padding: 0rem;
2142
2190
  float: right;
2143
2191
  }
@@ -2147,7 +2195,7 @@
2147
2195
  }
2148
2196
 
2149
2197
  .rls-select-field .rls-list-field__action {
2150
- transition: transform 160ms 0ms var(--sharp-curve);
2198
+ transition: transform 160ms 0ms var(--rls-sharp-curve);
2151
2199
  }
2152
2200
  .rls-select-field .rls-list-field__action--visible {
2153
2201
  transform: rotate(180deg);
@@ -2156,64 +2204,64 @@
2156
2204
  .rls-snackbar {
2157
2205
  position: fixed;
2158
2206
  display: flex;
2159
- column-gap: var(--sizing-x6);
2207
+ column-gap: var(--rls-sizing-x6);
2160
2208
  bottom: 0rem;
2161
- left: var(--rls-snackbar-left);
2209
+ left: var(--rlc-snackbar-left);
2162
2210
  z-index: 32;
2163
2211
  width: auto;
2164
2212
  height: auto;
2165
2213
  max-width: 240rem;
2166
- padding: var(--sizing-x6);
2214
+ padding: var(--rls-sizing-x6);
2167
2215
  box-sizing: border-box;
2168
- border-radius: var(--sizing-x4);
2169
- background: var(--background-theme-500);
2170
- box-shadow: var(--shadow-bottom-light-4);
2171
- border: var(--border-1-rolster-300);
2216
+ border-radius: var(--rls-sizing-x4);
2217
+ background: var(--rls-app-background-500);
2218
+ box-shadow: var(--rls-light-shadow-bottom-4);
2219
+ border: var(--rls-theme-border-1-300);
2172
2220
  will-change: transform;
2173
2221
  transform: translate(-50%, 100%);
2174
- transition: transform 160ms 0ms var(--standard-curve);
2222
+ transition: transform 160ms 0ms var(--rls-standard-curve);
2175
2223
  }
2176
2224
  .rls-snackbar--visible {
2177
- transform: translate(-50%, calc(0% - var(--sizing-x8)));
2225
+ transform: translate(-50%, calc(0% - var(--rls-sizing-x8)));
2178
2226
  }
2179
2227
  .rls-snackbar__avatar {
2180
- --rls-icon-color: var(--color-light-500);
2228
+ --rlc-icon-color: var(--rls-light-color-500);
2181
2229
  display: flex;
2182
2230
  justify-content: center;
2183
2231
  align-items: center;
2184
2232
  overflow: hidden;
2185
- background: var(--color-rolster-500);
2186
- width: var(--sizing-x18);
2187
- height: var(--sizing-x18);
2188
- border-radius: var(--sizing-x4);
2233
+ background: var(--rls-theme-color-500);
2234
+ width: var(--rls-sizing-x18);
2235
+ height: var(--rls-sizing-x18);
2236
+ border-radius: var(--rls-sizing-x4);
2189
2237
  }
2190
2238
  .rls-snackbar__avatar + .rls-snackbar__component {
2191
- width: calc(100% - var(--sizing-x18));
2239
+ width: calc(100% - var(--rls-sizing-x18));
2192
2240
  }
2193
2241
  .rls-snackbar__component {
2194
2242
  display: flex;
2195
2243
  flex-direction: column;
2196
- row-gap: var(--sizing-x2);
2244
+ row-gap: var(--rls-sizing-x2);
2197
2245
  }
2198
2246
  .rls-snackbar__title {
2199
2247
  overflow: hidden;
2200
2248
  text-overflow: ellipsis;
2201
2249
  white-space: nowrap;
2202
- color: var(--color-rolster-500);
2203
- font-size: var(--body-font-size);
2204
- font-weight: var(--font-weight-bold);
2205
- letter-spacing: var(--body-letter-spacing);
2250
+ color: var(--rls-theme-color-500);
2251
+ font-size: var(--rls-body-font-size);
2252
+ font-weight: var(--rls-font-weight-bold);
2253
+ letter-spacing: var(--rls-body-letter-spacing);
2206
2254
  }
2207
2255
  .rls-snackbar__content p {
2208
- line-height: var(--sizing-x10);
2209
- color: var(--color-theme-300);
2210
- font-size: var(--label-font-size);
2211
- font-weight: var(--font-weight-medium);
2212
- letter-spacing: var(--label-letter-spacing);
2256
+ line-height: var(--rls-sizing-x10);
2257
+ color: var(--rls-app-color-300);
2258
+ font-size: var(--rls-label-font-size);
2259
+ font-weight: var(--rls-font-weight-medium);
2260
+ letter-spacing: var(--rls-label-letter-spacing);
2213
2261
  }
2214
2262
 
2215
2263
  @media only screen and (max-width: 375px) {
2216
2264
  .rls-snackbar {
2217
- width: calc(100% - var(--sizing-x12));
2265
+ width: calc(100% - var(--rls-sizing-x12));
2218
2266
  }
2219
2267
  }