@rolster/styles-foundations 2.4.18 → 2.5.21

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 (8) hide show
  1. package/package.json +1 -1
  2. package/scss/components/app.scss +15 -12
  3. package/scss/components/data-table.scss +46 -28
  4. package/scss/components/field-box.scss +28 -16
  5. package/scss/components/field-list.scss +35 -21
  6. package/scss/components/form.scss +3 -3
  7. package/scss/components.scss +2 -129
  8. package/scss/foundations/themes.scss +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rolster/styles-foundations",
3
- "version": "2.4.18",
3
+ "version": "2.5.21",
4
4
  "description": "Front-end style pack to develop responsive and mobile projects on the web with Rolster.",
5
5
  "sass": "scss/styles.scss",
6
6
  "style": "dist/styles.css",
package/scss/components/app.scss CHANGED
@@ -1,12 +1,14 @@
1
1
  // Rolster Technology App Component
2
- // v2.2.3
2
+ // v2.3.1
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 20/Mar/2018
6
- // Updated: 23/Abr/2025
6
+ // Updated: 14/May/2025
7
7
 
8
8
  .rls-app {
9
9
  &__body {
10
+ --pvt-navbar-width: var(--rlc-app-navbar-width, 160rem);
11
+
10
12
  display: flex;
11
13
  flex-direction: column;
12
14
  padding: 0rem;
@@ -17,27 +19,28 @@
17
19
  z-index: var(--rls-z-index-8);
18
20
 
19
21
  &--snackbar {
20
- --rlc-snackbar-left: calc(50% + calc(var(--rlc-app-navbar-width) / 2));
22
+ --rlc-snackbar-left: calc(50% + calc(var(--pvt-navbar-width) / 2));
21
23
  }
22
24
 
23
25
  &--navbar-condense {
24
- --rlc-app-navbar-width: 36rem;
26
+ --pvt-navbar-width: 36rem;
25
27
  }
26
28
  }
27
29
 
28
30
  &__header {
29
31
  --rlc-toolbar-height: 100%;
32
+ --pvt-header-height: var(--rlc-app-header-height, var(--rls-sizing-x28));
30
33
 
31
34
  position: relative;
32
35
  width: 100%;
33
- height: var(--rlc-app-header-height);
36
+ height: var(--pvt-header-height);
34
37
  box-sizing: border-box;
35
38
  z-index: var(--rls-z-index-8);
36
- background: var(--rlc-app-header-background);
39
+ background: var(--rlc-app-header-background, var(--rls-app-color-100));
37
40
 
38
41
  & + .rls-app__page,
39
42
  & + .rls-app__content {
40
- height: calc(100vh - var(--rlc-app-header-height));
43
+ height: calc(100vh - var(--pvt-header-height));
41
44
  }
42
45
  }
43
46
 
@@ -49,7 +52,7 @@
49
52
  padding: 0rem;
50
53
  overflow: auto;
51
54
  box-sizing: border-box;
52
- background: var(--rlc-app-content-background);
55
+ background: var(--rlc-app-content-background, var(--rls-app-color-050));
53
56
  }
54
57
 
55
58
  &__page {
@@ -64,7 +67,7 @@
64
67
 
65
68
  &__nav {
66
69
  position: relative;
67
- width: var(--rlc-app-navbar-width);
70
+ width: var(--pvt-navbar-width);
68
71
  height: 100%;
69
72
  margin: 0rem;
70
73
  padding: 0rem;
@@ -72,12 +75,12 @@
72
75
  overflow-x: hidden;
73
76
  overflow-y: auto;
74
77
  border-radius: 0rem 0rem var(--rls-sizing-x16) 0rem;
75
- background: var(--rlc-app-navbar-background);
78
+ background: var(--rlc-app-navbar-background, var(--rls-app-color-100));
76
79
 
77
80
  & + .rls-app__page__content {
78
- --rlc-snackbar-left: calc(50% + calc(var(--rlc-app-navbar-width) / 2));
81
+ --rlc-snackbar-left: calc(50% + calc(var(--pvt-navbar-width) / 2));
79
82
 
80
- width: calc(100% - var(--rlc-app-navbar-width));
83
+ width: calc(100% - var(--pvt-navbar-width));
81
84
  }
82
85
  }
83
86
 
package/scss/components/data-table.scss CHANGED
@@ -1,15 +1,15 @@
1
1
  // Rolster Technology Datatable Component
2
- // v2.3.5
2
+ // v2.4.0
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 20/Mar/2018
6
- // Updated: 06/May/2025
6
+ // Updated: 14/May/2025
7
7
 
8
8
  @mixin datatable_cell_control() {
9
- --rlc-avatar-border-radius: var(--rls-sizing-x3);
9
+ --rlc-avatar-radius: var(--rls-sizing-x3);
10
10
  --rlc-avatar-width: var(--rls-sizing-x16);
11
11
  --rlc-avatar-height: var(--rls-sizing-x16);
12
- --rlc-avatar-font-size: var(--rlc-datatable-font-size);
12
+ --rlc-avatar-font-size: var(--pvt-datatable-font-size);
13
13
 
14
14
  --rlc-action-ripple-dimension: var(--rls-sizing-x16);
15
15
  --rlc-action-ripple-position: -8rem;
@@ -32,11 +32,25 @@
32
32
  }
33
33
 
34
34
  .rls-datatable {
35
- --pvt-datatable-record-background: var(--rlc-datatable-record-background);
35
+ --pvt-datatable-letter-spacing: var(--rlc-datatable-letter-spacing, 0.0625em);
36
+ --pvt-datatable-font-size: var(--rlc-datatable-font-size, 7rem);
37
+ --pvt-datatable-font-color: var(--rlc-datatable-font-color, var(--rls-app-color-900));
38
+
39
+ --pvt-datatable-header-background: var(
40
+ --rlc-datatable-header-background,
41
+ var(--rls-theme-color-050)
42
+ );
43
+
44
+ --pvt-datatable-record-background: var(
45
+ --rlc-datatable-record-background,
46
+ var(--rls-app-color-100)
47
+ );
48
+
36
49
  --pvt-datatable-padding-component: 0rem;
37
- --pvt-header-padding-right: var(--rlc-datatable-padding-scroll);
50
+ --pvt-datatable-padding-scroll: var(--rlc-datatable-padding-scroll, 0rem);
51
+ --pvt-datatable-header-padding-right: var(--pvt-datatable-padding-scroll);
38
52
 
39
- --rlc-amount-font-size: var(--rlc-datatable-font-size);
53
+ --rlc-amount-font-size: var(--pvt-datatable-font-size);
40
54
  --rlc-amount-width: 100%;
41
55
  --rlc-badge-padding: 0.5rem 1.5rem;
42
56
  --rlc-ballot-padding: 0rem;
@@ -52,9 +66,9 @@
52
66
  --rlc-fieldbox-width: 100%;
53
67
  --rlc-fieldbox-error-display: none;
54
68
  --rlc-fieldbox-label-display: none;
55
- --rlc-input-font-size: var(--rlc-datatable-font-size);
56
- --rlc-input-letter-spacing: var(--rlc-datatable-letter-spacing);
57
- --rlc-poster-font-size: var(--rlc-datatable-font-size);
69
+ --rlc-input-font-size: var(--pvt-datatable-font-size);
70
+ --rlc-input-letter-spacing: var(--pvt-datatable-letter-spacing);
71
+ --rlc-poster-font-size: var(--pvt-datatable-font-size);
58
72
  --rlc-poster-height: var(--rls-sizing-x8);
59
73
  --rlc-poster-padding: var(--rls-sizing-x2);
60
74
  --rlc-skeleton-text-column-gap: var(--rls-sizing-x2);
@@ -68,14 +82,15 @@
68
82
  box-sizing: border-box;
69
83
 
70
84
  &--scrolleable {
71
- --rlc-datatable-padding-scroll: var(--rls-sizing-x4);
85
+ --pvt-datatable-padding-scroll: var(--rls-sizing-x4);
72
86
 
73
- --pvt-header-padding-right: calc(
74
- var(--rlc-datatable-padding-scroll) + var(--rlc-datatable-width-scroll)
87
+ --pvt-datatable-header-padding-right: calc(
88
+ var(--pvt-datatable-padding-scroll) +
89
+ var(--rlc-datatable-width-scroll, var(--rls-sizing-x4))
75
90
  );
76
91
 
77
92
  --pvt-datatable-padding-component: 0rem
78
- calc(var(--rlc-datatable-padding-scroll) + 5rem) 0rem 0rem;
93
+ calc(var(--pvt-datatable-padding-scroll) + 5rem) 0rem 0rem;
79
94
  }
80
95
 
81
96
  & > table {
@@ -91,13 +106,13 @@
91
106
  column-gap: var(--rls-sizing-x6);
92
107
  padding: var(--pvt-datatable-padding-component);
93
108
  box-sizing: border-box;
94
- background: var(--rlc-datatable-header-background);
109
+ background: var(--pvt-datatable-header-background);
95
110
  border-radius: var(--rls-sizing-x4);
96
111
  }
97
112
 
98
113
  &__head {
99
114
  width: 100%;
100
- padding-right: var(--pvt-header-padding-right);
115
+ padding-right: var(--pvt-datatable-header-padding-right);
101
116
  box-sizing: border-box;
102
117
  }
103
118
 
@@ -106,7 +121,7 @@
106
121
  column-gap: var(--rls-sizing-x6);
107
122
  padding: 0rem var(--rls-sizing-x6);
108
123
  box-sizing: border-box;
109
- background: var(--rlc-datatable-header-background);
124
+ background: var(--pvt-datatable-header-background);
110
125
  border-radius: var(--rls-sizing-x4);
111
126
 
112
127
  .rls-poster {
@@ -124,9 +139,12 @@
124
139
  height: var(--rls-sizing-x20);
125
140
  line-height: var(--rls-sizing-x20);
126
141
  color: var(--rls-app-color-900);
127
- font-weight: var(--rlc-datatable-header-font-weight);
128
- font-size: var(--rlc-datatable-font-size);
129
- letter-spacing: var(--rlc-datatable-letter-spacing);
142
+ font-weight: var(
143
+ --rlc-datatable-header-font-weight,
144
+ var(--rls-font-weight-semibold)
145
+ );
146
+ font-size: var(--pvt-datatable-font-size);
147
+ letter-spacing: var(--pvt-datatable-letter-spacing);
130
148
  text-align: left;
131
149
  overflow: hidden;
132
150
  white-space: nowrap;
@@ -151,10 +169,10 @@
151
169
  display: flex;
152
170
  flex-direction: column;
153
171
  row-gap: var(--rls-sizing-x6);
154
- padding-right: var(--rlc-datatable-padding-scroll);
172
+ padding-right: var(--pvt-datatable-padding-scroll);
155
173
  box-sizing: border-box;
156
- overflow-y: var(--rlc-datatable-body-overflow);
157
- max-height: var(--rlc-datatable-body-max-height);
174
+ overflow-y: var(--rlc-datatable-body-overflow, initial);
175
+ max-height: var(--rlc-datatable-body-max-height, initial);
158
176
  }
159
177
 
160
178
  &__subheader,
@@ -206,9 +224,9 @@
206
224
  text-align: left;
207
225
  min-height: var(--rls-sizing-x20);
208
226
  font-weight: var(--rls-font-weight-regular);
209
- color: var(--rlc-input-font-color);
210
- font-size: var(--rlc-datatable-font-size);
211
- letter-spacing: var(--rlc-datatable-letter-spacing);
227
+ color: var(--pvt-datatable-font-color);
228
+ font-size: var(--pvt-datatable-font-size);
229
+ letter-spacing: var(--pvt-datatable-letter-spacing);
212
230
 
213
231
  &--overflow {
214
232
  overflow: initial;
@@ -240,7 +258,7 @@
240
258
  --rlc-fieldbox-body-shadow: none;
241
259
  --rlc-fieldbox-action-dimension: var(--rls-sizing-x10);
242
260
  --rlc-fieldbox-action-background: transparent;
243
- --rlc-fieldlist-control-font-size: var(--rlc-datatable-font-size);
261
+ --rlc-fieldlist-control-font-size: var(--pvt-datatable-font-size);
244
262
  --rlc-fieldlist-control-font-weight: var(--rls-font-weight-medium);
245
263
  --rlc-fieldlist-control-letter-spacing: var(--rls-body-letter-spacing);
246
264
  --rlc-fieldlist-element-padding: var(--rls-sizing-x4);
@@ -312,7 +330,7 @@
312
330
  &__summary {
313
331
  --pvt-datatable-record-background: var(--rls-app-color-200);
314
332
 
315
- padding-right: var(--pvt-header-padding-right);
333
+ padding-right: var(--pvt-datatable-header-padding-right);
316
334
  box-sizing: border-box;
317
335
  }
318
336
 
package/scss/components/field-box.scss CHANGED
@@ -1,31 +1,43 @@
1
1
  // Rolster Technology FieldBox Component
2
- // v2.1.6
2
+ // v2.2.0
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 08/Sep/2022
6
- // Updated: 24/Abr/2025
6
+ // Updated: 14/May/2025
7
7
 
8
8
  .rls-field-box {
9
+ --pvt-body-background: var(
10
+ --rlc-fieldbox-body-background,
11
+ var(--rls-app-color-100)
12
+ );
13
+
14
+ --pvt-body-shadow: var(--rlc-fieldbox-body-shadow, none);
15
+
16
+ --pvt-label-font-color: var(
17
+ --rlc-fieldbox-label-font-color,
18
+ var(--rls-app-color-600)
19
+ );
20
+
9
21
  --pvt-label-opacity: 1;
10
22
  --pvt-body-opacity: 1;
11
23
 
12
24
  position: relative;
13
25
  display: flex;
14
- width: var(--rlc-fieldbox-width);
26
+ width: var(--rlc-fieldbox-width, 100%);
15
27
  flex-direction: column;
16
- padding: var(--rlc-fieldbox-padding);
28
+ padding: var(--rlc-fieldbox-padding, 0rem);
17
29
  box-sizing: border-box;
18
30
  transition: height 160ms 0ms var(--rls-standard-curve);
19
31
 
20
32
  &--focused {
21
- --rlc-fieldbox-body-background: var(--rls-app-color-050);
22
- --rlc-fieldbox-body-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
23
- --rlc-fieldbox-label-font-color: var(--rls-theme-color-500);
33
+ --pvt-body-background: var(--rls-app-color-050);
34
+ --pvt-body-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
35
+ --pvt-label-font-color: var(--rls-theme-color-500);
24
36
  }
25
37
 
26
38
  &--error {
27
- --rlc-fieldbox-body-shadow: 0px 0px 0px 3px var(--rls-danger-shadow-500);
28
- --rlc-fieldbox-label-font-color: var(--rls-danger-color-500);
39
+ --pvt-body-shadow: 0px 0px 0px 3px var(--rls-danger-shadow-500);
40
+ --pvt-label-font-color: var(--rls-danger-color-500);
29
41
  }
30
42
 
31
43
  &--disabled {
@@ -35,12 +47,12 @@
35
47
 
36
48
  &__label {
37
49
  position: relative;
38
- display: var(--rlc-fieldbox-label-display);
50
+ display: var(--rlc-fieldbox-label-display, block);
39
51
  width: 100%;
40
52
  padding: 0rem 5rem;
41
53
  box-sizing: border-box;
42
54
  margin-bottom: var(--rls-sizing-x2);
43
- color: var(--rlc-fieldbox-label-font-color);
55
+ color: var(--pvt-label-font-color);
44
56
  opacity: var(--pvt-label-opacity);
45
57
  overflow: hidden;
46
58
  white-space: nowrap;
@@ -63,10 +75,10 @@
63
75
  box-sizing: border-box;
64
76
  overflow: hidden;
65
77
  opacity: var(--pvt-body-opacity);
66
- border-radius: var(--rls-sizing-x2);
67
- background: var(--rlc-fieldbox-body-background);
68
- padding: var(--rlc-fieldbox-body-padding);
69
- box-shadow: var(--rlc-fieldbox-body-shadow);
78
+ border-radius: var(--rlc-fieldbox-body-radius, var(--rls-sizing-x2));
79
+ background: var(--pvt-body-background);
80
+ padding: var(--rlc-fieldbox-body-padding, 0rem);
81
+ box-shadow: var(--pvt-body-shadow);
70
82
  }
71
83
 
72
84
  &__helper {
@@ -84,7 +96,7 @@
84
96
  }
85
97
 
86
98
  &__error {
87
- display: var(--rlc-fieldbox-error-display);
99
+ display: var(--rlc-fieldbox-error-display, block);
88
100
  padding: 0rem var(--rls-sizing-x4);
89
101
  box-sizing: border-box;
90
102
  margin-top: var(--rls-sizing-x2);
package/scss/components/field-list.scss CHANGED
@@ -1,11 +1,16 @@
1
- // Rolster Technology ListField Component
2
- // v1.3.9
1
+ // Rolster Technology FieldList Component
2
+ // v1.4.0
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 20/Mar/2018
6
- // Updated: 23/Abr/2025
6
+ // Updated: 14/May/2025
7
7
 
8
8
  .rls-field-list {
9
+ --pvt-action-dimension: var(
10
+ --rlc-fieldbox-action-dimension,
11
+ var(--rls-sizing-x12)
12
+ );
13
+
9
14
  --pvt-action-font-color: var(--rls-app-color-600);
10
15
  --pvt-list-height: 0rem;
11
16
  --pvt-list-max-height: 160rem;
@@ -19,19 +24,13 @@
19
24
  position: relative;
20
25
  box-sizing: border-box;
21
26
 
22
- &.rls-field-box--active {
23
- --rlc-fieldbox-body-shadow: 0px 0px 0px 3px var(--box-shadow-theme-100);
24
- --rlc-fieldbox-body-border: var(--rls-theme-border-1-300);
25
- --rlc-fieldbox-label-font-color: var(--rls-app-color-600);
26
- }
27
-
28
27
  &.rls-field-box--disabled {
29
28
  --pvt-action-font-color: var(--rls-app-color-400);
30
29
  }
31
30
 
32
31
  &__control {
33
32
  position: relative;
34
- width: calc(100% - var(--rlc-fieldbox-action-dimension));
33
+ width: calc(100% - var(--pvt-action-dimension));
35
34
  height: var(--rls-sizing-x12);
36
35
  line-height: var(--rls-sizing-x12);
37
36
  padding: 0rem;
@@ -39,9 +38,18 @@
39
38
  border: none;
40
39
  outline: none;
41
40
  background: transparent;
42
- font-weight: var(--rlc-fieldlist-control-font-weight);
43
- font-size: var(--rlc-fieldlist-control-font-size);
44
- letter-spacing: var(--rlc-fieldlist-control-letter-spacing);
41
+ font-weight: var(
42
+ --rlc-fieldlist-control-font-weight,
43
+ var(--rls-font-weight-medium)
44
+ );
45
+ font-size: var(
46
+ --rlc-fieldlist-control-font-size,
47
+ var(--rls-input-font-size)
48
+ );
49
+ letter-spacing: var(
50
+ --rlc-fieldlist-control-letter-spacing,
51
+ var(--rls-input-letter-spacing)
52
+ );
45
53
  color: var(--rlc-input-font-color);
46
54
 
47
55
  &::placeholder {
@@ -59,15 +67,15 @@
59
67
  }
60
68
 
61
69
  &__action {
62
- --rlc-icon-dimesion: calc(var(--rlc-fieldbox-action-dimension) - 2rem);
70
+ --rlc-icon-dimesion: calc(var(--pvt-action-dimension) - 2rem);
63
71
 
64
- width: var(--rlc-fieldbox-action-dimension);
65
- height: var(--rlc-fieldbox-action-dimension);
72
+ width: var(--pvt-action-dimension);
73
+ height: var(--pvt-action-dimension);
66
74
  color: var(--pvt-action-font-color);
67
75
  padding: 0rem;
68
76
  outline: none;
69
- border-radius: var(--rlc-fieldbox-action-radius);
70
- background: var(--rlc-fieldbox-action-background);
77
+ border-radius: var(--rlc-fieldbox-action-radius, var(--rls-sizing-x2));
78
+ background: var(--rlc-fieldbox-action-background, var(--rls-app-color-050));
71
79
 
72
80
  .rls-icon {
73
81
  margin: 1rem;
@@ -76,7 +84,10 @@
76
84
 
77
85
  &__suggestions {
78
86
  position: absolute;
79
- top: var(--rlc-fieldlist-suggestions-top);
87
+ top: var(
88
+ --rlc-fieldlist-suggestions-top,
89
+ calc(100% + var(--rls-sizing-x6))
90
+ );
80
91
  bottom: initial;
81
92
  left: 0rem;
82
93
  width: 100%;
@@ -99,7 +110,10 @@
99
110
 
100
111
  &--higher {
101
112
  top: initial;
102
- bottom: var(--rlc-fieldlist-suggestions-bottom);
113
+ bottom: var(
114
+ --rlc-fieldlist-suggestions-bottom,
115
+ calc(100% - var(--rls-sizing-x4))
116
+ );
103
117
  }
104
118
 
105
119
  &__body {
@@ -138,7 +152,7 @@
138
152
  box-sizing: border-box;
139
153
  outline: none;
140
154
  border-radius: var(--rls-sizing-x4);
141
- padding: var(--rlc-fieldlist-element-padding);
155
+ padding: var(--rlc-fieldlist-element-padding, var(--rls-sizing-x2));
142
156
  box-sizing: border-box;
143
157
 
144
158
  &:hover {
package/scss/components/form.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  // Rolster Technology Form Component
2
- // v2.0.0
2
+ // v2.1.0
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 20/Mar/2018
6
- // Updated: 26/May/2024
6
+ // Updated: 14/May/2025
7
7
 
8
8
  .rls-form {
9
9
  display: flex;
@@ -19,7 +19,7 @@
19
19
  &__footer {
20
20
  position: relative;
21
21
  display: flex;
22
- justify-content: var(--rlc-form-footer-justify-content);
22
+ justify-content: var(--rlc-form-footer-justify-content, end);
23
23
  column-gap: var(--rls-sizing-x8);
24
24
  padding: 0rem var(--rls-sizing-x8);
25
25
  box-sizing: border-box;
package/scss/components.scss CHANGED
@@ -1,139 +1,12 @@
1
1
  // Rolster Technology Components
2
- // v2.2.1
2
+ // v2.3.0
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 13/Abr/2023
6
- // Updated: 27/Abr/2025
6
+ // Updated: 14/May/2025
7
7
 
8
8
  @use 'sass:meta';
9
9
 
10
- body {
11
- --rlc-app-content-background: var(--rls-app-color-050);
12
- --rlc-app-header-background: var(--rls-app-color-100);
13
- --rlc-app-header-height: var(--rls-sizing-x28);
14
- --rlc-app-navbar-background: var(--rls-app-color-100);
15
- --rlc-app-navbar-width: 160rem;
16
-
17
- --rlc-action-color: var(--rls-app-color-600);
18
- --rlc-action-ripple-color: var(--rlc-action-color);
19
- --rlc-action-ripple-dimension: var(--rls-sizing-x18);
20
- --rlc-action-ripple-position: -9rem;
21
-
22
- --rlc-avatar-border-radius: var(--rls-sizing-x4);
23
- --rlc-avatar-font-size: var(--rls-title-font-size);
24
- --rlc-avatar-height: var(--rls-sizing-x24);
25
- --rlc-avatar-width: var(--rls-sizing-x24);
26
-
27
- --rlc-amount-font-size: inherit;
28
- --rlc-amount-text-align: start;
29
- --rlc-amount-width: auto;
30
-
31
- --rlc-badge-padding: var(--rls-sizing-x2);
32
-
33
- --rlc-ballot-padding: var(--rls-sizing-x4);
34
- --rlc-ballot-component-row-gap: var(--rls-sizing-x2);
35
- --rlc-ballot-title-letter-spacing: var(--rls-label-letter-spacing);
36
- --rlc-ballot-title-font-size: var(--rls-label-font-size);
37
- --rlc-ballot-title-font-weight: var(--rls-font-weight-medium);
38
- --rlc-ballot-title-height: var(--rls-label-line-height);
39
- --rlc-ballot-subtitle-width: 100%;
40
- --rlc-ballot-subtitle-letter-spacing: var(--rls-smalltext-letter-spacing);
41
- --rlc-ballot-subtitle-font-size: var(--rls-smalltext-font-size);
42
- --rlc-ballot-subtitle-font-weight: var(--rls-font-weight-semibold);
43
- --rlc-ballot-subtitle-height: var(--rls-smalltext-line-height);
44
- --rlc-ballot-subtitle-overflow: initial;
45
- --rlc-ballot-subtitle-text-overflow: initial;
46
- --rlc-ballot-subtitle-white-space: initial;
47
-
48
- --rlc-breadcrumb-height: var(--rls-sizing-x18);
49
-
50
- --rlc-button-label-text-transform: uppercase;
51
- --rlc-button-content-padding: 0rem var(--rls-sizing-x4);
52
- --rlc-button-content-radius: var(--rls-sizing-x2);
53
-
54
- --rlc-card-content-padding: var(--rls-sizing-x8);
55
-
56
- --rlc-checkbox-dimension: var(--rls-sizing-x12);
57
- --rlc-checkbox-children-dimension: 6rem;
58
-
59
- --rlc-datatable-body-max-height: initial;
60
- --rlc-datatable-body-overflow: initial;
61
- --rlc-datatable-letter-spacing: 0.0625em;
62
- --rlc-datatable-font-size: 7rem;
63
- --rlc-datatable-footer-background: var(--rls-theme-color-050);
64
- --rlc-datatable-header-background: var(--rls-theme-color-050);
65
- --rlc-datatable-header-font-weight: var(--rls-font-weight-semibold);
66
- --rlc-datatable-padding-scroll: 0rem;
67
- --rlc-datatable-record-background: var(--rls-app-color-100);
68
- --rlc-datatable-width-scroll: var(--rls-sizing-x4);
69
-
70
- --rlc-fieldbox-padding: 0rem;
71
- --rlc-fieldbox-width: 100%;
72
- --rlc-fieldbox-body-background: var(--rls-app-color-100);
73
- --rlc-fieldbox-body-padding: 0rem;
74
- --rlc-fieldbox-body-shadow: none;
75
- --rlc-fieldbox-error-display: block;
76
- --rlc-fieldbox-label-display: block;
77
- --rlc-fieldbox-label-font-color: var(--rls-app-color-600);
78
- --rlc-fieldbox-action-dimension: var(--rls-sizing-x12);
79
- --rlc-fieldbox-action-background: var(--rls-app-color-050);
80
- --rlc-fieldbox-action-radius: var(--rls-sizing-x2);
81
-
82
- --rlc-fieldlist-control-font-size: var(--rlc-input-font-size);
83
- --rlc-fieldlist-control-font-weight: var(--rls-font-weight-medium);
84
- --rlc-fieldlist-control-letter-spacing: var(--rlc-input-letter-spacing);
85
- --rlc-fieldlist-element-padding: var(--rls-sizing-x2);
86
- --rlc-fieldlist-suggestions-bottom: calc(100% - var(--rls-sizing-x4));
87
- --rlc-fieldlist-suggestions-top: calc(100% + var(--rls-sizing-x6));
88
-
89
- --rlc-form-footer-justify-content: end;
90
-
91
- --rlc-icon-color: inherit;
92
- --rlc-icon-dimesion: var(--rls-sizing-x12);
93
-
94
- --rlc-input-font-color: var(--rls-app-color-900);
95
- --rlc-input-font-size: var(--rls-input-font-size);
96
- --rlc-input-letter-spacing: var(--rls-input-letter-spacing);
97
- --rlc-input-height: var(--rls-sizing-x12);
98
- --rlc-input-text-align: left;
99
-
100
- --rlc-label-font-size: var(--rls-smalltext-font-size);
101
- --rlc-label-letter-spacing: var(--rls-smalltext-letter-spacing);
102
- --rlc-label-height: var(--rls-smalltext-line-height);
103
-
104
- --rlc-poster-font-size: var(--rls-body-font-size);
105
- --rlc-poster-letter-spacing: var(--rls-body-letter-spacing);
106
- --rlc-poster-height: var(--rls-body-line-height);
107
- --rlc-poster-padding: var(--rls-sizing-x4);
108
- --rlc-poster-text-align: center;
109
-
110
- --rlc-progress-circular-dimension: var(--rls-sizing-x28);
111
-
112
- --rlc-radiobutton-dimension: var(--rls-sizing-x12);
113
- --rlc-radiobutton-children-dimension: 6rem;
114
-
115
- --rlc-snackbar-left: 50%;
116
-
117
- --rlc-skeleton-height: inherit;
118
-
119
- --rlc-skeleton-text-column-gap: var(--rls-sizing-x4);
120
- --rlc-skeleton-text-font-size: var(--rls-body-font-size);
121
- --rlc-skeleton-text-height: var(--rls-body-line-height);
122
- --rlc-skeleton-text-letter-spacing: var(--rls-body-letter-spacing);
123
-
124
- --rlc-switch-max-width: var(--rls-sizing-x18);
125
- --rlc-switch-bar-radius: var(--rls-sizing-x2);
126
- --rlc-switch-bar-height: var(--rls-sizing-x4);
127
- --rlc-switch-element-size: var(--rls-sizing-x10);
128
-
129
- --rlc-tabulartext-char-width: 5.5rem;
130
- --rlc-tabulartext-font-size: var(--rls-body-font-size);
131
- --rlc-tabulartext-pointer-width: 2rem;
132
- --rlc-tabulartext-text-align: flex-start;
133
-
134
- --rlc-toolbar-height: var(--rls-sizing-x28);
135
- }
136
-
137
10
  * {
138
11
  scrollbar-width: thin;
139
12
  scrollbar-color: var(--rls-theme-color-300) var(--rls-app-color-200);
package/scss/foundations/themes.scss CHANGED
@@ -60,7 +60,7 @@
60
60
 
61
61
  --rls-theme-font-900: var(--rls-#{$theme}-color-050);
62
62
 
63
- --rls-theme-font-500: var(--rls-#{$theme}-color-050);
63
+ --rls-theme-color-050: var(--rls-#{$theme}-color-050);
64
64
 
65
65
  --rls-theme-font-100: var(--rls-#{$theme}-color-900);
66
66