@rolster/styles-foundations 2.4.11 → 2.4.13

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 (7) hide show
  1. package/package.json +1 -1
  2. package/scss/components/data-table.scss +4 -6
  3. package/scss/components/field-box.scss +2 -6
  4. package/scss/components/field-list.scss +11 -7
  5. package/scss/components.scss +10 -10
  6. package/scss/foundations/colors.scss +37 -37
  7. 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.11",
3
+ "version": "2.4.13",
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/data-table.scss CHANGED
@@ -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);
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,9 +1,9 @@
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
 
@@ -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-app-color-200);
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,50 +1,35 @@
1
1
  // Rolster Technology Colors Foundations
2
- // v2.6.0
2
+ // v2.6.1
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
30
 
31
31
  @include helpers.rolster-theme(
32
32
  'primary',
33
- #0e2425,
34
- #204140,
35
- #224d4b,
36
- #265f5c,
37
- #2c7873,
38
- #39938b,
39
- #52afa5,
40
- #7dcbc1,
41
- #aee1d8,
42
- #d7f0ec,
43
- #f3faf8
44
- );
45
-
46
- @include helpers.rolster-theme(
47
- 'secondary',
48
33
  #0b2446,
49
34
  #0e335d,
50
35
  #0c4480,
@@ -58,6 +43,21 @@
58
43
  #f1f7fe
59
44
  );
60
45
 
46
+ @include helpers.rolster-theme(
47
+ 'secondary',
48
+ #0e2425,
49
+ #204140,
50
+ #224d4b,
51
+ #265f5c,
52
+ #2c7873,
53
+ #39938b,
54
+ #52afa5,
55
+ #7dcbc1,
56
+ #aee1d8,
57
+ #d7f0ec,
58
+ #f3faf8
59
+ );
60
+
61
61
  @include helpers.rolster-theme(
62
62
  'tertiary',
63
63
  #440d0b,
@@ -225,23 +225,23 @@
225
225
  }
226
226
 
227
227
  *[app-theme='dark'] {
228
- --rls-app-color-900: rgba(255, 255, 255, 1);
228
+ --rls-app-color-050: rgb(40, 50, 61);
229
229
 
230
- --rls-app-color-800: rgba(239, 242, 252, 1);
230
+ --rls-app-color-100: rgb(52, 57, 87);
231
231
 
232
- --rls-app-color-700: rgba(209, 214, 239, 1);
232
+ --rls-app-color-200: rgb(72, 77, 107);
233
233
 
234
- --rls-app-color-600: rgba(197, 203, 209, 1);
234
+ --rls-app-color-300: rgb(98, 111, 155);
235
235
 
236
- --rls-app-color-500: rgba(173, 186, 212, 1);
236
+ --rls-app-color-400: rgb(128, 141, 190);
237
237
 
238
- --rls-app-color-400: rgba(128, 141, 190, 1);
238
+ --rls-app-color-500: rgb(189, 192, 220);
239
239
 
240
- --rls-app-color-300: rgba(98, 111, 155, 1);
240
+ --rls-app-color-600: rgb(214, 217, 240);
241
241
 
242
- --rls-app-color-200: rgba(72, 77, 107, 1);
242
+ --rls-app-color-700: rgb(229, 232, 245);
243
243
 
244
- --rls-app-color-100: rgba(52, 57, 87, 1);
244
+ --rls-app-color-800: rgb(244, 247, 255);
245
245
 
246
- --rls-app-color-050: rgba(40, 50, 61, 1);
246
+ --rls-app-color-900: rgb(255, 255, 255);
247
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 {