@rolster/styles-foundations 2.4.12 → 2.4.14

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 +8 -3
  3. package/scss/components/data-table.scss +7 -9
  4. package/scss/components/field-box.scss +2 -6
  5. package/scss/components/field-list.scss +11 -7
  6. package/scss/components.scss +12 -12
  7. package/scss/foundations/colors.scss +34 -34
  8. package/scss/utilities/normalize.scss +2 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rolster/styles-foundations",
3
- "version": "2.4.12",
3
+ "version": "2.4.14",
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,9 +1,9 @@
1
1
  // Rolster Technology App Component
2
- // v2.2.1
2
+ // v2.2.3
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 20/Mar/2018
6
- // Updated: 18/Abr/2025
6
+ // Updated: 23/Abr/2025
7
7
 
8
8
  .rls-app {
9
9
  &__body {
@@ -19,6 +19,10 @@
19
19
  &--snackbar {
20
20
  --rlc-snackbar-left: calc(50% + calc(var(--rlc-app-navbar-width) / 2));
21
21
  }
22
+
23
+ &--navbar-condense {
24
+ --rlc-app-navbar-width: 36rem;
25
+ }
22
26
  }
23
27
 
24
28
  &__header {
@@ -64,8 +68,9 @@
64
68
  height: 100%;
65
69
  margin: 0rem;
66
70
  padding: 0rem;
67
- overflow: auto;
68
71
  box-sizing: border-box;
72
+ overflow-x: hidden;
73
+ overflow-y: auto;
69
74
  border-radius: 0rem 0rem var(--rls-sizing-x16) 0rem;
70
75
  background: var(--rlc-app-navbar-background);
71
76
 
package/scss/components/data-table.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  // Rolster Technology Datatable Component
2
- // v2.3.1
2
+ // v2.3.2
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 20/Mar/2018
@@ -15,9 +15,9 @@
15
15
  --rlc-action-ripple-position: -8rem;
16
16
 
17
17
  --rlc-fieldbox-body-background: transparent;
18
- --rlc-fieldbox-body-border: none;
19
18
  --rlc-fieldbox-body-padding: 0rem;
20
19
  --rlc-fieldbox-body-shadow: none;
20
+ --rlc-fieldbox-action-background: transparent;
21
21
 
22
22
  --rlc-switch-bar-radius: var(--rls-sizing-x2);
23
23
  --rlc-switch-bar-height: var(--rls-sizing-x4);
@@ -91,7 +91,6 @@
91
91
  padding: var(--pvt-datatable-padding-component);
92
92
  box-sizing: border-box;
93
93
  background: var(--rlc-datatable-header-background);
94
- border: var(--rls-app-border-1-100);
95
94
  border-radius: var(--rls-sizing-x4);
96
95
  }
97
96
 
@@ -166,7 +165,6 @@
166
165
  column-gap: var(--rls-sizing-x6);
167
166
  padding: 0rem var(--rls-sizing-x6);
168
167
  box-sizing: border-box;
169
- border: var(--rls-app-border-1-100);
170
168
  border-radius: var(--rls-sizing-x4);
171
169
  background: var(--pvt-datatable-record-background);
172
170
 
@@ -246,10 +244,10 @@
246
244
 
247
245
  .rls-field-list {
248
246
  --rlc-fieldbox-body-background: transparent;
249
- --rlc-fieldbox-body-border: none;
250
247
  --rlc-fieldbox-body-padding: var(--rls-sizing-x4) 0rem;
251
248
  --rlc-fieldbox-body-shadow: none;
252
- --rlc-fieldlist-action-dimension: var(--rls-sizing-x10);
249
+ --rlc-fieldbox-action-dimension: var(--rls-sizing-x10);
250
+ --rlc-fieldbox-action-background: transparent;
253
251
  --rlc-fieldlist-control-font-size: var(--rlc-datatable-font-size);
254
252
  --rlc-fieldlist-control-font-weight: var(--rls-font-weight-medium);
255
253
  --rlc-fieldlist-control-letter-spacing: var(--rls-body-letter-spacing);
@@ -287,7 +285,7 @@
287
285
  align-items: center;
288
286
  z-index: var(--rls-z-index-2);
289
287
  padding: 0rem var(--rls-sizing-x6);
290
- background: var(--rls-app-color-100);
288
+ background: var(--rls-theme-color-100);
291
289
  border-right: none;
292
290
  transform: translateX(calc(100% - var(--rls-sizing-x4)));
293
291
  transition: transform 240ms var(--rls-standard-curve);
@@ -316,14 +314,14 @@
316
314
  }
317
315
 
318
316
  &__summary {
319
- --pvt-datatable-record-background: var(--rls-theme-color-050);
317
+ --pvt-datatable-record-background: var(--rls-app-color-200);
320
318
 
321
319
  padding-right: var(--pvt-header-padding-right);
322
320
  box-sizing: border-box;
323
321
  }
324
322
 
325
323
  &__footer {
326
- --pvt-datatable-record-background: var(--rls-theme-color-050);
324
+ --pvt-datatable-record-background: var(--rls-app-color-200);
327
325
 
328
326
  position: relative;
329
327
  width: 100%;
package/scss/components/field-box.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  // Rolster Technology FieldBox Component
2
- // v2.1.4
2
+ // v2.1.5
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 08/Sep/2022
6
- // Updated: 18/Abr/2025
6
+ // Updated: 23/Abr/2025
7
7
 
8
8
  .rls-field-box {
9
9
  --pvt-label-opacity: 1;
@@ -19,14 +19,11 @@
19
19
 
20
20
  &--focused {
21
21
  --rlc-fieldbox-body-background: var(--rls-app-color-050);
22
- --rlc-fieldbox-body-border: var(--rls-theme-border-1-500);
23
22
  --rlc-fieldbox-body-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
24
23
  --rlc-fieldbox-label-font-color: var(--rls-theme-color-500);
25
24
  }
26
25
 
27
26
  &--error {
28
- --rlc-fieldbox-body-border: var(--rls-border-1) solid
29
- var(--rls-danger-color-500);
30
27
  --rlc-fieldbox-body-shadow: 0px 0px 0px 3px var(--rls-danger-shadow-500);
31
28
  --rlc-fieldbox-label-font-color: var(--rls-danger-color-500);
32
29
  }
@@ -70,7 +67,6 @@
70
67
  border-radius: var(--rls-sizing-x2);
71
68
  background: var(--rlc-fieldbox-body-background);
72
69
  padding: var(--rlc-fieldbox-body-padding);
73
- border: var(--rlc-fieldbox-body-border);
74
70
  box-shadow: var(--rlc-fieldbox-body-shadow);
75
71
  }
76
72
 
package/scss/components/field-list.scss CHANGED
@@ -14,7 +14,7 @@
14
14
  --pvt-backdrop-opacity: 0;
15
15
  --pvt-backdrop-bottom: initial;
16
16
 
17
- --rlc-fieldbox-body-padding: var(--rls-sizing-x3) var(--rls-sizing-x4);
17
+ --rlc-fieldbox-body-padding: var(--rls-sizing-x4);
18
18
 
19
19
  position: relative;
20
20
  box-sizing: border-box;
@@ -31,7 +31,7 @@
31
31
 
32
32
  &__control {
33
33
  position: relative;
34
- width: calc(100% - var(--rlc-fieldlist-action-dimension));
34
+ width: calc(100% - var(--rlc-fieldbox-action-dimension));
35
35
  height: var(--rls-sizing-x12);
36
36
  line-height: var(--rls-sizing-x12);
37
37
  padding: 0rem;
@@ -59,14 +59,19 @@
59
59
  }
60
60
 
61
61
  &__action {
62
- --rlc-icon-dimesion: var(--rlc-fieldlist-action-dimension);
62
+ --rlc-icon-dimesion: calc(var(--rlc-fieldbox-action-dimension) - 2rem);
63
63
 
64
+ width: var(--rlc-fieldbox-action-dimension);
65
+ height: var(--rlc-fieldbox-action-dimension);
64
66
  color: var(--pvt-action-font-color);
65
- width: var(--rlc-fieldlist-action-dimension);
66
- height: var(--rlc-fieldlist-action-dimension);
67
67
  padding: 0rem;
68
68
  outline: none;
69
- background: transparent;
69
+ border-radius: 50%;
70
+ background: var(--rlc-fieldbox-action-background);
71
+
72
+ .rls-icon {
73
+ margin: 1rem;
74
+ }
70
75
  }
71
76
 
72
77
  &__suggestions {
@@ -109,7 +114,6 @@
109
114
  overflow: hidden;
110
115
  z-index: var(--rls-z-index-2);
111
116
  background: var(--rls-app-color-050);
112
- border: var(--rls-theme-border-1-500);
113
117
  box-shadow: 0px 0px 0px 3px var(--rls-theme-shadow-500);
114
118
  transform: var(--pvt-list-transform);
115
119
  }
package/scss/components.scss CHANGED
@@ -1,17 +1,17 @@
1
1
  // Rolster Technology Components
2
- // v2.1.0
2
+ // v2.2.0
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 13/Abr/2023
6
- // Updated: 18/Abr/2025
6
+ // Updated: 23/Abr/2025
7
7
 
8
8
  @use 'sass:meta';
9
9
 
10
10
  :root {
11
11
  --rlc-app-content-background: var(--rls-app-color-050);
12
- --rlc-app-header-background: var(--rls-app-color-200);
12
+ --rlc-app-header-background: var(--rls-app-color-100);
13
13
  --rlc-app-header-height: var(--rls-sizing-x28);
14
- --rlc-app-navbar-background: var(--rls-app-color-200);
14
+ --rlc-app-navbar-background: var(--rls-app-color-100);
15
15
  --rlc-app-navbar-width: 160rem;
16
16
 
17
17
  --rlc-action-color: var(--rls-app-color-600);
@@ -57,30 +57,30 @@
57
57
  --rlc-datatable-body-overflow: initial;
58
58
  --rlc-datatable-letter-spacing: 0.0625em;
59
59
  --rlc-datatable-font-size: 7rem;
60
- --rlc-datatable-footer-background: var(--rls-theme-color-100);
61
- --rlc-datatable-header-background: transparent;
60
+ --rlc-datatable-footer-background: var(--rls-theme-color-050);
61
+ --rlc-datatable-header-background: var(--rls-theme-color-100);
62
62
  --rlc-datatable-header-font-weight: var(--rls-font-weight-semibold);
63
63
  --rlc-datatable-padding-scroll: 0rem;
64
- --rlc-datatable-record-background: rgb(252, 252, 252);
64
+ --rlc-datatable-record-background: var(--rls-app-color-100);
65
65
  --rlc-datatable-width-scroll: var(--rls-sizing-x4);
66
66
 
67
67
  --rlc-fieldbox-padding: 0rem;
68
68
  --rlc-fieldbox-width: 100%;
69
- --rlc-fieldbox-body-background: rgba(255, 255, 255, 1);
70
- --rlc-fieldbox-body-border: var(--rls-app-border-1-100);
69
+ --rlc-fieldbox-body-background: var(--rls-app-color-100);
71
70
  --rlc-fieldbox-body-padding: 0rem;
72
71
  --rlc-fieldbox-body-shadow: none;
73
72
  --rlc-fieldbox-error-display: block;
74
73
  --rlc-fieldbox-label-display: block;
75
74
  --rlc-fieldbox-label-font-color: var(--rls-app-color-600);
75
+ --rlc-fieldbox-action-dimension: var(--rls-sizing-x12);
76
+ --rlc-fieldbox-action-background: var(--rls-app-color-050);
76
77
 
77
- --rlc-fieldlist-action-dimension: var(--rls-sizing-x12);
78
78
  --rlc-fieldlist-control-font-size: var(--rlc-input-font-size);
79
79
  --rlc-fieldlist-control-font-weight: var(--rls-font-weight-medium);
80
80
  --rlc-fieldlist-control-letter-spacing: var(--rlc-input-letter-spacing);
81
81
  --rlc-fieldlist-element-padding: var(--rls-sizing-x2);
82
- --rlc-fieldlist-suggestions-bottom: 100%;
83
- --rlc-fieldlist-suggestions-top: calc(100% + var(--rls-sizing-x4));
82
+ --rlc-fieldlist-suggestions-bottom: calc(100% - var(--rls-sizing-x4));
83
+ --rlc-fieldlist-suggestions-top: calc(100% + var(--rls-sizing-x6));
84
84
 
85
85
  --rlc-form-footer-justify-content: end;
86
86
 
package/scss/foundations/colors.scss CHANGED
@@ -1,32 +1,54 @@
1
1
  // Rolster Technology Colors Foundations
2
- // v2.6.0
2
+ // v2.6.2
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 03/Mar/2022
6
- // Updated: 18/Abr/2025
6
+ // Updated: 23/Abr/2025
7
7
 
8
8
  @use 'helpers' as helpers;
9
9
 
10
10
  :root {
11
- --rls-app-color-900: rgba(40, 50, 61, 1);
11
+ --rls-app-color-900: rgb(40, 50, 61);
12
12
 
13
- --rls-app-color-800: rgba(52, 57, 87, 1);
13
+ --rls-app-color-800: rgb(52, 57, 87);
14
14
 
15
- --rls-app-color-700: rgba(72, 77, 107, 1);
15
+ --rls-app-color-700: rgb(72, 77, 107);
16
16
 
17
- --rls-app-color-600: rgba(98, 111, 155, 1);
17
+ --rls-app-color-600: rgb(98, 111, 155);
18
18
 
19
- --rls-app-color-500: rgba(128, 141, 190, 1);
19
+ --rls-app-color-500: rgb(128, 141, 190);
20
20
 
21
- --rls-app-color-400: rgba(173, 186, 212, 1);
21
+ --rls-app-color-400: rgb(189, 192, 220);
22
22
 
23
- --rls-app-color-300: rgba(197, 203, 209, 1);
23
+ --rls-app-color-300: rgb(214, 217, 240);
24
24
 
25
- --rls-app-color-200: rgba(209, 214, 239, 1);
25
+ --rls-app-color-200: rgb(229, 232, 245);
26
26
 
27
- --rls-app-color-100: rgba(239, 242, 252, 1);
27
+ --rls-app-color-100: rgb(244, 247, 255);
28
28
 
29
- --rls-app-color-050: rgba(255, 255, 255, 1);
29
+ --rls-app-color-050: rgb(255, 255, 255);
30
+
31
+ *[app-theme='dark'] {
32
+ --rls-app-color-050: rgb(40, 50, 61);
33
+
34
+ --rls-app-color-100: rgb(52, 57, 87);
35
+
36
+ --rls-app-color-200: rgb(72, 77, 107);
37
+
38
+ --rls-app-color-300: rgb(98, 111, 155);
39
+
40
+ --rls-app-color-400: rgb(128, 141, 190);
41
+
42
+ --rls-app-color-500: rgb(189, 192, 220);
43
+
44
+ --rls-app-color-600: rgb(214, 217, 240);
45
+
46
+ --rls-app-color-700: rgb(229, 232, 245);
47
+
48
+ --rls-app-color-800: rgb(244, 247, 255);
49
+
50
+ --rls-app-color-900: rgb(255, 255, 255);
51
+ }
30
52
 
31
53
  @include helpers.rolster-theme(
32
54
  'primary',
@@ -223,25 +245,3 @@
223
245
  #f5f5f1
224
246
  );
225
247
  }
226
-
227
- *[app-theme='dark'] {
228
- --rls-app-color-900: rgba(255, 255, 255, 1);
229
-
230
- --rls-app-color-800: rgba(239, 242, 252, 1);
231
-
232
- --rls-app-color-700: rgba(209, 214, 239, 1);
233
-
234
- --rls-app-color-600: rgba(197, 203, 209, 1);
235
-
236
- --rls-app-color-500: rgba(173, 186, 212, 1);
237
-
238
- --rls-app-color-400: rgba(128, 141, 190, 1);
239
-
240
- --rls-app-color-300: rgba(98, 111, 155, 1);
241
-
242
- --rls-app-color-200: rgba(72, 77, 107, 1);
243
-
244
- --rls-app-color-100: rgba(52, 57, 87, 1);
245
-
246
- --rls-app-color-050: rgba(40, 50, 61, 1);
247
- }
package/scss/utilities/normalize.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  // Rolster Technology Normalize Utilities
2
- // v2.0.2
2
+ // v2.0.3
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 11/Ago/2022
6
- // Updated: 18/Abr/2025
6
+ // Updated: 23/Abr/2025
7
7
 
8
8
  :root {
9
9
  --rls-app-font-family: -apple-system, -rolster-system-font, BlinkMacSystemFont,
@@ -27,11 +27,6 @@ body {
27
27
  color: var(--rls-app-color-900);
28
28
  background: var(--rlc-app-body-background);
29
29
  -webkit-tap-highlight-color: transparent;
30
-
31
- &.rls-app-body {
32
- --rlc-fieldbox-body-background: rgba(248, 248, 248, 1);
33
- --rlc-app-body-background: var(--rls-app-color-100);
34
- }
35
30
  }
36
31
 
37
32
  div {