@rolster/styles-foundations 2.3.39 → 2.4.10

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 (14) hide show
  1. package/package.json +1 -1
  2. package/scss/components/app.scss +3 -3
  3. package/scss/components/data-table.scss +15 -7
  4. package/scss/components/field-box.scss +5 -5
  5. package/scss/components/field-list.scss +12 -12
  6. package/scss/components.scss +9 -9
  7. package/scss/foundations/colors.scss +228 -429
  8. package/scss/foundations/elevations.scss +84 -69
  9. package/scss/foundations/helpers.scss +101 -0
  10. package/scss/foundations/themes.scss +34 -49
  11. package/scss/utilities/normalize.scss +5 -5
  12. package/scss/utilities.scss +2 -4
  13. package/scss/utilities/colors.scss +0 -54
  14. package/scss/utilities/themes.scss +0 -42
package/scss/foundations/elevations.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  // Rolster Technology Elevations Foundations
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: 18/Abr/2025
7
7
 
8
8
  :root {
9
9
  --rls-z-index-2: 2;
@@ -22,136 +22,151 @@
22
22
 
23
23
  --rls-z-index-32: 32;
24
24
 
25
- --rls-app-shadow-1: 0px 4px 2px -2px rgba(50, 44, 47, 0.02);
25
+ --rls-app-shadow-1: 0px 4px 2px -2px rgba(173, 186, 230, 0.02);
26
26
 
27
- --rls-app-shadow-2: 0px 4px 8px -2px rgba(50, 44, 47, 0.04);
27
+ --rls-app-shadow-2: 0px 4px 8px -2px rgba(173, 186, 230, 0.04);
28
28
 
29
- --rls-app-shadow-3: 0px 2px 4px -2px rgba(50, 44, 47, 0.08);
29
+ --rls-app-shadow-3: 0px 2px 4px -2px rgba(173, 186, 230, 0.08);
30
30
 
31
- --rls-app-shadow-4: 0px 4px 8px -6px rgba(50, 44, 47, 0.03),
32
- 0px 16px 8px -4px rgba(50, 44, 47, 0.03);
31
+ --rls-app-shadow-4: 0px 4px 8px -6px rgba(173, 186, 230, 0.03),
32
+ 0px 16px 8px -4px rgba(173, 186, 230, 0.03);
33
33
 
34
- --rls-app-shadow-5: 0px 8px 24px -4px rgba(50, 44, 47, 0.08);
34
+ --rls-app-shadow-5: 0px 8px 24px -4px rgba(173, 186, 230, 0.08);
35
35
 
36
- --rls-app-shadow-6: 0px 8px 24px -4px rgba(50, 44, 47, 0.12);
36
+ --rls-app-shadow-6: 0px 8px 24px -4px rgba(173, 186, 230, 0.12);
37
+
38
+ --rls-app-shadow-bottom-2: 0px 2px 2px rgba(173, 186, 230, 0.4);
37
39
 
38
- --rls-light-shadow-bottom-2: 0px 2px 2px rgba(173, 186, 230, 0.4);
40
+ --rls-app-shadow-bottom-4: 0px 4px 4px rgba(173, 186, 230, 0.4);
39
41
 
40
- --rls-light-shadow-bottom-4: 0px 4px 4px rgba(173, 186, 230, 0.4);
42
+ --rls-app-shadow-bottom-8: 0px 8px 8px rgba(173, 186, 230, 0.4);
41
43
 
42
- --rls-light-shadow-bottom-8: 0px 8px 8px rgba(173, 186, 230, 0.4);
44
+ --rls-app-shadow-bottom-16: 0px 16px 16px rgba(173, 186, 230, 0.4);
43
45
 
44
- --rls-light-shadow-bottom-16: 0px 16px 16px rgba(173, 186, 230, 0.4);
46
+ --rls-app-shadow-bottom-24: 0px 24px 24px rgba(173, 186, 230, 0.4);
45
47
 
46
- --rls-light-shadow-bottom-24: 0px 24px 24px rgba(173, 186, 230, 0.4);
48
+ --rls-app-shadow-bottom-32: 0px 32px 32px rgba(173, 186, 230, 0.4);
47
49
 
48
- --rls-light-shadow-bottom-32: 0px 32px 32px rgba(173, 186, 230, 0.4);
50
+ --rls-app-shadow-top-2: 0px -2px 2px rgba(173, 186, 230, 0.4);
49
51
 
50
- --rls-light-shadow-top-2: 0px -2px 2px rgba(173, 186, 230, 0.4);
52
+ --rls-app-shadow-top-4: 0px -4px 4px rgba(173, 186, 230, 0.4);
51
53
 
52
- --rls-light-shadow-top-4: 0px -4px 4px rgba(173, 186, 230, 0.4);
54
+ --rls-app-shadow-top-8: 0px -8px 8px rgba(173, 186, 230, 0.4);
53
55
 
54
- --rls-light-shadow-top-8: 0px -8px 8px rgba(173, 186, 230, 0.4);
56
+ --rls-app-shadow-top-16: 0px -16px 16px rgba(173, 186, 230, 0.4);
55
57
 
56
- --rls-light-shadow-top-16: 0px -16px 16px rgba(173, 186, 230, 0.4);
58
+ --rls-app-shadow-top-24: 0px -24px 24px rgba(173, 186, 230, 0.4);
57
59
 
58
- --rls-light-shadow-top-24: 0px -24px 24px rgba(173, 186, 230, 0.4);
60
+ --rls-app-shadow-top-32: 0px -32px 32px rgba(173, 186, 230, 0.4);
59
61
 
60
- --rls-light-shadow-top-32: 0px -32px 32px rgba(173, 186, 230, 0.4);
62
+ --rls-app-shadow-right-2: 2px 0px 2px rgba(173, 186, 230, 0.4);
61
63
 
62
- --rls-light-shadow-right-2: 2px 0px 2px rgba(173, 186, 230, 0.4);
64
+ --rls-app-shadow-right-4: 4px 0px 4px rgba(173, 186, 230, 0.4);
63
65
 
64
- --rls-light-shadow-right-4: 4px 0px 4px rgba(173, 186, 230, 0.4);
66
+ --rls-app-shadow-right-8: 8px 0px 8px rgba(173, 186, 230, 0.4);
65
67
 
66
- --rls-light-shadow-right-8: 8px 0px 8px rgba(173, 186, 230, 0.4);
68
+ --rls-app-shadow-right-16: 16px 0px 16px rgba(173, 186, 230, 0.4);
67
69
 
68
- --rls-light-shadow-right-16: 16px 0px 16px rgba(173, 186, 230, 0.4);
70
+ --rls-app-shadow-right-24: 24px 0px 24px rgba(173, 186, 230, 0.4);
69
71
 
70
- --rls-light-shadow-right-24: 24px 0px 24px rgba(173, 186, 230, 0.4);
72
+ --rls-app-shadow-right-32: 32px 0px 32px rgba(173, 186, 230, 0.4);
71
73
 
72
- --rls-light-shadow-right-32: 32px 0px 32px rgba(173, 186, 230, 0.4);
74
+ --rls-app-shadow-left-2: -2px 0px 2px rgba(173, 186, 230, 0.4);
73
75
 
74
- --rls-light-shadow-left-2: -2px 0px 2px rgba(173, 186, 230, 0.4);
76
+ --rls-app-shadow-left-4: -4px 0px 4px rgba(173, 186, 230, 0.4);
75
77
 
76
- --rls-light-shadow-left-4: -4px 0px 4px rgba(173, 186, 230, 0.4);
78
+ --rls-app-shadow-left-8: -8px 0px 8px rgba(173, 186, 230, 0.4);
77
79
 
78
- --rls-light-shadow-left-8: -8px 0px 8px rgba(173, 186, 230, 0.4);
80
+ --rls-app-shadow-left-16: -16px 0px 16px rgba(173, 186, 230, 0.4);
79
81
 
80
- --rls-light-shadow-left-16: -16px 0px 16px rgba(173, 186, 230, 0.4);
82
+ --rls-app-shadow-left-24: -24px 0px 24px rgba(173, 186, 230, 0.4);
81
83
 
82
- --rls-light-shadow-left-24: -24px 0px 24px rgba(173, 186, 230, 0.4);
84
+ --rls-app-shadow-left-32: -32px 0px 32px rgba(173, 186, 230, 0.4);
83
85
 
84
- --rls-light-shadow-left-32: -32px 0px 32px rgba(173, 186, 230, 0.4);
86
+ --rls-app-shadow-center-2: 0px 0px 2px 0px rgba(173, 186, 230, 0.4);
85
87
 
86
- --rls-light-shadow-center-2: 0px 0px 2px 0px rgba(173, 186, 230, 0.4);
88
+ --rls-app-shadow-center-4: 0px 0px 4px 0px rgba(173, 186, 230, 0.4);
87
89
 
88
- --rls-light-shadow-center-4: 0px 0px 4px 0px rgba(173, 186, 230, 0.4);
90
+ --rls-app-shadow-center-8: 0px 0px 8px 0px rgba(173, 186, 230, 0.4);
89
91
 
90
- --rls-light-shadow-center-8: 0px 0px 8px 0px rgba(173, 186, 230, 0.4);
92
+ --rls-app-shadow-center-16: 0px 0px 16px 0px rgba(173, 186, 230, 0.4);
91
93
 
92
- --rls-light-shadow-center-16: 0px 0px 16px 0px rgba(173, 186, 230, 0.4);
94
+ --rls-app-shadow-center-24: 0px 0px 24px 0px rgba(173, 186, 230, 0.4);
93
95
 
94
- --rls-light-shadow-center-24: 0px 0px 24px 0px rgba(173, 186, 230, 0.4);
96
+ --rls-app-shadow-center-32: 0px 0px 32px 0px rgba(173, 186, 230, 0.4);
97
+ }
98
+
99
+ *[app-theme='dark'] {
100
+ --rls-app-shadow-1: 0px 4px 2px -2px rgba(50, 44, 47, 0.02);
95
101
 
96
- --rls-light-shadow-center-32: 0px 0px 32px 0px rgba(173, 186, 230, 0.4);
102
+ --rls-app-shadow-2: 0px 4px 8px -2px rgba(50, 44, 47, 0.04);
103
+
104
+ --rls-app-shadow-3: 0px 2px 4px -2px rgba(50, 44, 47, 0.08);
105
+
106
+ --rls-app-shadow-4: 0px 4px 8px -6px rgba(50, 44, 47, 0.03),
107
+ 0px 16px 8px -4px rgba(50, 44, 47, 0.03);
108
+
109
+ --rls-app-shadow-5: 0px 8px 24px -4px rgba(50, 44, 47, 0.08);
110
+
111
+ --rls-app-shadow-6: 0px 8px 24px -4px rgba(50, 44, 47, 0.12);
97
112
 
98
- --rls-dark-shadow-bottom-2: 0px 2px 2px rgba(50, 44, 47, 0.4);
113
+ --rls-app-shadow-bottom-2: 0px 2px 2px rgba(50, 44, 47, 0.4);
99
114
 
100
- --rls-dark-shadow-bottom-4: 0px 4px 4px rgba(50, 44, 47, 0.4);
115
+ --rls-app-shadow-bottom-4: 0px 4px 4px rgba(50, 44, 47, 0.4);
101
116
 
102
- --rls-dark-shadow-bottom-8: 0px 8px 8px rgba(50, 44, 47, 0.4);
117
+ --rls-app-shadow-bottom-8: 0px 8px 8px rgba(50, 44, 47, 0.4);
103
118
 
104
- --rls-dark-shadow-bottom-16: 0px 16px 16px rgba(50, 44, 47, 0.4);
119
+ --rls-app-shadow-bottom-16: 0px 16px 16px rgba(50, 44, 47, 0.4);
105
120
 
106
- --rls-dark-shadow-bottom-24: 0px 24px 24px rgba(50, 44, 47, 0.4);
121
+ --rls-app-shadow-bottom-24: 0px 24px 24px rgba(50, 44, 47, 0.4);
107
122
 
108
- --rls-dark-shadow-bottom-32: 0px 32px 32px rgba(50, 44, 47, 0.4);
123
+ --rls-app-shadow-bottom-32: 0px 32px 32px rgba(50, 44, 47, 0.4);
109
124
 
110
- --rls-dark-shadow-top-2: 0px -2px 2px rgba(50, 44, 47, 0.4);
125
+ --rls-app-shadow-top-2: 0px -2px 2px rgba(50, 44, 47, 0.4);
111
126
 
112
- --rls-dark-shadow-top-4: 0px -4px 4px rgba(50, 44, 47, 0.4);
127
+ --rls-app-shadow-top-4: 0px -4px 4px rgba(50, 44, 47, 0.4);
113
128
 
114
- --rls-dark-shadow-top-8: 0px -8px 8px rgba(50, 44, 47, 0.4);
129
+ --rls-app-shadow-top-8: 0px -8px 8px rgba(50, 44, 47, 0.4);
115
130
 
116
- --rls-dark-shadow-top-16: 0px -16px 16px rgba(50, 44, 47, 0.4);
131
+ --rls-app-shadow-top-16: 0px -16px 16px rgba(50, 44, 47, 0.4);
117
132
 
118
- --rls-dark-shadow-top-24: 0px -24px 24px rgba(50, 44, 47, 0.4);
133
+ --rls-app-shadow-top-24: 0px -24px 24px rgba(50, 44, 47, 0.4);
119
134
 
120
- --rls-dark-shadow-top-32: 0px -32px 32px rgba(50, 44, 47, 0.4);
135
+ --rls-app-shadow-top-32: 0px -32px 32px rgba(50, 44, 47, 0.4);
121
136
 
122
- --rls-dark-shadow-right-2: 2px 0px 2px rgba(50, 44, 47, 0.4);
137
+ --rls-app-shadow-right-2: 2px 0px 2px rgba(50, 44, 47, 0.4);
123
138
 
124
- --rls-dark-shadow-right-4: 4px 0px 4px rgba(50, 44, 47, 0.4);
139
+ --rls-app-shadow-right-4: 4px 0px 4px rgba(50, 44, 47, 0.4);
125
140
 
126
- --rls-dark-shadow-right-8: 8px 0px 8px rgba(50, 44, 47, 0.4);
141
+ --rls-app-shadow-right-8: 8px 0px 8px rgba(50, 44, 47, 0.4);
127
142
 
128
- --rls-dark-shadow-right-16: 16px 0px 16px rgba(50, 44, 47, 0.4);
143
+ --rls-app-shadow-right-16: 16px 0px 16px rgba(50, 44, 47, 0.4);
129
144
 
130
- --rls-dark-shadow-right-24: 24px 0px 24px rgba(50, 44, 47, 0.4);
145
+ --rls-app-shadow-right-24: 24px 0px 24px rgba(50, 44, 47, 0.4);
131
146
 
132
- --rls-dark-shadow-right-32: 32px 0px 32px rgba(50, 44, 47, 0.4);
147
+ --rls-app-shadow-right-32: 32px 0px 32px rgba(50, 44, 47, 0.4);
133
148
 
134
- --rls-dark-shadow-left-2: -2px 0px 2px rgba(50, 44, 47, 0.4);
149
+ --rls-app-shadow-left-2: -2px 0px 2px rgba(50, 44, 47, 0.4);
135
150
 
136
- --rls-dark-shadow-left-4: -4px 0px 4px rgba(50, 44, 47, 0.4);
151
+ --rls-app-shadow-left-4: -4px 0px 4px rgba(50, 44, 47, 0.4);
137
152
 
138
- --rls-dark-shadow-left-8: -8px 0px 8px rgba(50, 44, 47, 0.4);
153
+ --rls-app-shadow-left-8: -8px 0px 8px rgba(50, 44, 47, 0.4);
139
154
 
140
- --rls-dark-shadow-left-16: -16px 0px 16px rgba(50, 44, 47, 0.4);
155
+ --rls-app-shadow-left-16: -16px 0px 16px rgba(50, 44, 47, 0.4);
141
156
 
142
- --rls-dark-shadow-left-24: -24px 0px 24px rgba(50, 44, 47, 0.4);
157
+ --rls-app-shadow-left-24: -24px 0px 24px rgba(50, 44, 47, 0.4);
143
158
 
144
- --rls-dark-shadow-left-32: -32px 0px 32px rgba(50, 44, 47, 0.4);
159
+ --rls-app-shadow-left-32: -32px 0px 32px rgba(50, 44, 47, 0.4);
145
160
 
146
- --rls-dark-shadow-center-2: 0px 0px 2px 0px rgba(50, 44, 47, 0.4);
161
+ --rls-app-shadow-center-2: 0px 0px 2px 0px rgba(50, 44, 47, 0.4);
147
162
 
148
- --rls-dark-shadow-center-4: 0px 0px 4px 0px rgba(50, 44, 47, 0.4);
163
+ --rls-app-shadow-center-4: 0px 0px 4px 0px rgba(50, 44, 47, 0.4);
149
164
 
150
- --rls-dark-shadow-center-8: 0px 0px 8px 0px rgba(50, 44, 47, 0.4);
165
+ --rls-app-shadow-center-8: 0px 0px 8px 0px rgba(50, 44, 47, 0.4);
151
166
 
152
- --rls-dark-shadow-center-16: 0px 0px 16px 0px rgba(50, 44, 47, 0.4);
167
+ --rls-app-shadow-center-16: 0px 0px 16px 0px rgba(50, 44, 47, 0.4);
153
168
 
154
- --rls-dark-shadow-center-24: 0px 0px 24px 0px rgba(50, 44, 47, 0.4);
169
+ --rls-app-shadow-center-24: 0px 0px 24px 0px rgba(50, 44, 47, 0.4);
155
170
 
156
- --rls-dark-shadow-center-32: 0px 0px 32px 0px rgba(50, 44, 47, 0.4);
171
+ --rls-app-shadow-center-32: 0px 0px 32px 0px rgba(50, 44, 47, 0.4);
157
172
  }
package/scss/foundations/helpers.scss ADDED
@@ -0,0 +1,101 @@
1
+ // Rolster Technology Helpers Foundations
2
+ // v1.0.1
3
+ // @license MIT
4
+ // Author: Rolster Developers
5
+ // Created: 18/Abr/2025
6
+ // Updated: 19/Abr/2025
7
+
8
+ @use 'sass:color' as *;
9
+
10
+ @mixin rolster-theme-900($theme, $color) {
11
+ $r: channel($color, 'red');
12
+ $g: channel($color, 'green');
13
+ $b: channel($color, 'blue');
14
+
15
+ --rls-#{$theme}-color-900: #{$color};
16
+
17
+ --rls-#{$theme}-backdrop-900: rgba(#{$r}, #{$g}, #{$b}, 0.8);
18
+ }
19
+
20
+ @mixin rolster-theme-700($theme, $color) {
21
+ $r: channel($color, 'red');
22
+ $g: channel($color, 'green');
23
+ $b: channel($color, 'blue');
24
+
25
+ --rls-#{$theme}-color-700: #{$color};
26
+
27
+ --rls-#{$theme}-skeleton-500: rgba(#{$r}, #{$g}, #{$b}, 0.5);
28
+
29
+ --rls-#{$theme}-skeleton-400: rgba(#{$r}, #{$g}, #{$b}, 0.325);
30
+
31
+ --rls-#{$theme}-skeleton-300: rgba(#{$r}, #{$g}, #{$b}, 0.25);
32
+
33
+ --rls-#{$theme}-skeleton-200: rgba(#{$r}, #{$g}, #{$b}, 0.175);
34
+
35
+ --rls-#{$theme}-skeleton-100: rgba(#{$r}, #{$g}, #{$b}, 0.1);
36
+ }
37
+
38
+ @mixin rolster-theme-500($theme, $color) {
39
+ $r: channel($color, 'red');
40
+ $g: channel($color, 'green');
41
+ $b: channel($color, 'blue');
42
+
43
+ --rls-#{$theme}-color-500: #{$color};
44
+
45
+ --rls-#{$theme}-shadow-500: rgba(#{$r}, #{$g}, #{$b}, 0.24);
46
+ }
47
+
48
+ @mixin rolster-theme(
49
+ $theme,
50
+ $c950,
51
+ $c900,
52
+ $c800,
53
+ $c700,
54
+ $c600,
55
+ $c500,
56
+ $c400,
57
+ $c300,
58
+ $c200,
59
+ $c100,
60
+ $c050
61
+ ) {
62
+ --rls-#{$theme}-color-950: #{$c950};
63
+
64
+ @include rolster-theme-900($theme, $c900);
65
+
66
+ --rls-#{$theme}-color-800: #{$c800};
67
+
68
+ @include rolster-theme-700($theme, $c700);
69
+
70
+ --rls-#{$theme}-color-600: #{$c600};
71
+
72
+ @include rolster-theme-500($theme, $c500);
73
+
74
+ --rls-#{$theme}-color-400: #{$c400};
75
+
76
+ --rls-#{$theme}-color-300: #{$c300};
77
+
78
+ --rls-#{$theme}-color-200: #{$c200};
79
+
80
+ --rls-#{$theme}-color-100: #{$c100};
81
+
82
+ --rls-#{$theme}-color-050: #{$c050};
83
+
84
+ --rls-#{$theme}-gradient-700: linear-gradient(
85
+ 180deg,
86
+ var(--rls-#{$theme}-color-700) 0%,
87
+ var(--rls-#{$theme}-color-900) 100%
88
+ );
89
+
90
+ --rls-#{$theme}-gradient-500: linear-gradient(
91
+ 180deg,
92
+ var(--rls-#{$theme}-color-500) 0%,
93
+ var(--rls-#{$theme}-color-700) 100%
94
+ );
95
+
96
+ --rls-#{$theme}-gradient-300: linear-gradient(
97
+ 180deg,
98
+ var(--rls-#{$theme}-color-300) 0%,
99
+ var(--rls-#{$theme}-color-500) 100%
100
+ );
101
+ }
package/scss/foundations/themes.scss CHANGED
@@ -1,34 +1,9 @@
1
1
  // Rolster Technology Themes Foundations
2
- // v2.3.3
2
+ // v2.4.1
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 03/Mar/2022
6
- // Updated: 12/Mar/2025
7
-
8
- @mixin app-border-token($theme, $token) {
9
- --rls-app-border-1-#{$token}: var(--rls-border-1) solid
10
- var(--rls-#{$theme}-border-#{$token});
11
-
12
- --rls-app-border-2-#{$token}: var(--rls-border-2) solid
13
- var(--rls-#{$theme}-border-#{$token});
14
-
15
- --rls-app-border-4-#{$token}: var(--rls-border-4) solid
16
- var(--rls-#{$theme}-border-#{$token});
17
- }
18
-
19
- @mixin app-shadow-position($theme, $position) {
20
- --rls-app-shadow-#{$position}-2: var(--rls-#{$theme}-shadow-#{$position}-2);
21
-
22
- --rls-app-shadow-#{$position}-4: var(--rls-#{$theme}-shadow-#{$position}-4);
23
-
24
- --rls-app-shadow-#{$position}-8: var(--rls-#{$theme}-shadow-#{$position}-8);
25
-
26
- --rls-app-shadow-#{$position}-16: var(--rls-#{$theme}-shadow-#{$position}-16);
27
-
28
- --rls-app-shadow-#{$position}-24: var(--rls-#{$theme}-shadow-#{$position}-24);
29
-
30
- --rls-app-shadow-#{$position}-32: var(--rls-#{$theme}-shadow-#{$position}-32);
31
- }
6
+ // Updated: 19/Abr/2025
32
7
 
33
8
  @mixin rolster-border-color($theme, $token) {
34
9
  --rls-#{$theme}-border-1-#{$token}: var(--rls-border-1) solid
@@ -76,7 +51,7 @@
76
51
  --rls-theme-color-400: var(--rls-#{$theme}-color-400);
77
52
 
78
53
  --rls-theme-color-300: var(--rls-#{$theme}-color-300);
79
-
54
+
80
55
  --rls-theme-color-200: var(--rls-#{$theme}-color-200);
81
56
 
82
57
  --rls-theme-color-100: var(--rls-#{$theme}-color-100);
@@ -115,45 +90,47 @@
115
90
  }
116
91
 
117
92
  :root {
118
- --rls-app-background-500: var(--rls-light-background-500);
119
-
120
- --rls-app-background-300: var(--rls-light-background-300);
121
-
122
- --rls-app-background-100: var(--rls-light-background-100);
93
+ --rls-app-border-1-100: var(--rls-border-1) solid var(--rls-app-color-200);
123
94
 
124
- --rls-app-color-500: var(--rls-dark-color-500);
95
+ --rls-app-border-2-100: var(--rls-border-2) solid var(--rls-app-color-200);
125
96
 
126
- --rls-app-color-300: var(--rls-dark-color-300);
97
+ --rls-app-border-4-100: var(--rls-border-4) solid var(--rls-app-color-200);
127
98
 
128
- --rls-app-color-100: var(--rls-dark-color-100);
99
+ --rls-app-border-1-300: var(--rls-border-1) solid var(--rls-app-color-400);
129
100
 
130
- --rls-app-border-500: var(--rls-dark-border-500);
101
+ --rls-app-border-2-300: var(--rls-border-2) solid var(--rls-app-color-400);
131
102
 
132
- --rls-app-border-300: var(--rls-dark-border-300);
103
+ --rls-app-border-4-300: var(--rls-border-4) solid var(--rls-app-color-400);
133
104
 
134
- --rls-app-border-100: var(--rls-dark-border-100);
105
+ --rls-app-border-1-500: var(--rls-border-1) solid var(--rls-app-color-600);
135
106
 
136
- @include app-border-token('dark', 500);
137
- @include app-border-token('dark', 300);
138
- @include app-border-token('dark', 100);
107
+ --rls-app-border-2-500: var(--rls-border-2) solid var(--rls-app-color-600);
139
108
 
140
- @include app-shadow-position('bottom', 'light');
141
- @include app-shadow-position('top', 'light');
142
- @include app-shadow-position('right', 'light');
143
- @include app-shadow-position('left', 'light');
144
- @include app-shadow-position('center', 'light');
109
+ --rls-app-border-4-500: var(--rls-border-4) solid var(--rls-app-color-600);
145
110
 
146
- @include rolster-border-token('standard');
111
+ @include rolster-border-token('primary');
112
+ @include rolster-border-token('secondary');
113
+ @include rolster-border-token('tertiary');
147
114
  @include rolster-border-token('success');
148
115
  @include rolster-border-token('info');
149
116
  @include rolster-border-token('warning');
150
117
  @include rolster-border-token('danger');
118
+ @include rolster-border-token('berry');
119
+ @include rolster-border-token('mountains');
151
120
  @include rolster-border-token('amaizing');
152
121
  @include rolster-border-token('amber');
153
122
  @include rolster-border-token('smartness');
154
123
  @include rolster-border-token('obsidian');
155
124
 
156
- @include rolster-theme('standard');
125
+ @include rolster-theme('primary');
126
+ }
127
+
128
+ *[rls-theme='secondary'] {
129
+ @include rolster-theme('secondary');
130
+ }
131
+
132
+ *[rls-theme='tertiary'] {
133
+ @include rolster-theme('tertiary');
157
134
  }
158
135
 
159
136
  *[rls-theme='success'] {
@@ -172,6 +149,14 @@
172
149
  @include rolster-theme('danger');
173
150
  }
174
151
 
152
+ *[rls-theme='berry'] {
153
+ @include rolster-theme('berry');
154
+ }
155
+
156
+ *[rls-theme='mountains'] {
157
+ @include rolster-theme('mountains');
158
+ }
159
+
175
160
  *[rls-theme='amaizing'] {
176
161
  @include rolster-theme('amaizing');
177
162
  }
package/scss/utilities/normalize.scss CHANGED
@@ -1,14 +1,14 @@
1
1
  // Rolster Technology Normalize Utilities
2
- // v2.0.1
2
+ // v2.0.2
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 11/Ago/2022
6
- // Updated: 02/Jun/2024
6
+ // Updated: 18/Abr/2025
7
7
 
8
8
  :root {
9
9
  --rls-app-font-family: -apple-system, -rolster-system-font, BlinkMacSystemFont,
10
10
  'Segoe UI', Roboto, Helvetica;
11
- --rlc-app-body-background: var(--rls-app-background-500);
11
+ --rlc-app-body-background: var(--rls-app-color-050);
12
12
  }
13
13
 
14
14
  html {
@@ -24,13 +24,13 @@ body {
24
24
  right: 0rem;
25
25
  margin: 0rem;
26
26
  padding: 0rem;
27
- color: var(--rls-app-color-500);
27
+ color: var(--rls-app-color-900);
28
28
  background: var(--rlc-app-body-background);
29
29
  -webkit-tap-highlight-color: transparent;
30
30
 
31
31
  &.rls-app-body {
32
32
  --rlc-fieldbox-body-background: rgba(248, 248, 248, 1);
33
- --rlc-app-body-background: var(--rls-app-background-300);
33
+ --rlc-app-body-background: var(--rls-app-color-100);
34
34
  }
35
35
  }
36
36
 
package/scss/utilities.scss CHANGED
@@ -1,14 +1,12 @@
1
1
  // Rolster Technology Utilities
2
- // v2.0.0
2
+ // v2.0.1
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 13/Abr/2023
6
- // Updated: 26/May/2023
6
+ // Updated: 18/Abr/2025
7
7
 
8
8
  @use 'utilities/normalize';
9
- @use 'utilities/colors';
10
9
  @use 'utilities/layout';
11
- @use 'utilities/themes';
12
10
  @use 'utilities/texts';
13
11
  @use 'utilities/typographics';
14
12
  @use 'utilities/helpers';
package/scss/utilities/colors.scss DELETED
@@ -1,54 +0,0 @@
1
- // Rolster Technology Colors Utilities
2
- // v1.1.0
3
- // @license MIT
4
- // Author: Rolster Developers
5
- // Created: 13/Abr/2023
6
- // Updated: 16/Dic/2024
7
-
8
- .rls-font-dark-500 {
9
- color: var(--rls-dark-color-500);
10
- }
11
-
12
- .rls-font-dark-300 {
13
- color: var(--rls-dark-color-300);
14
- }
15
-
16
- .rls-font-dark-100 {
17
- color: var(--rls-dark-color-100);
18
- }
19
-
20
- .rls-font-light-500 {
21
- color: var(--rls-light-color-500);
22
- }
23
-
24
- .rls-font-light-300 {
25
- color: var(--rls-light-color-300);
26
- }
27
-
28
- .rls-font-light-100 {
29
- color: var(--rls-light-color-100);
30
- }
31
-
32
- .rls-bg-dark-500 {
33
- background: var(--rls-dark-background-500);
34
- }
35
-
36
- .rls-bg-dark-300 {
37
- background: var(--rls-dark-background-300);
38
- }
39
-
40
- .rls-bg-dark-100 {
41
- background: var(--rls-dark-background-100);
42
- }
43
-
44
- .rls-bg-light-500 {
45
- background: var(--rls-light-background-500);
46
- }
47
-
48
- .rls-bg-light-300 {
49
- background: var(--rls-light-background-300);
50
- }
51
-
52
- .rls-bg-light-100 {
53
- background: var(--rls-light-background-100);
54
- }
package/scss/utilities/themes.scss DELETED
@@ -1,42 +0,0 @@
1
- // Rolster Technology Themes Utilities
2
- // v2.0.0
3
- // @license MIT
4
- // Author: Rolster Developers
5
- // Created: 13/Abr/2023
6
- // Updated: 26/May/2024
7
-
8
- .rls-app-color-500 {
9
- color: var(--rls-app-color-500);
10
- }
11
-
12
- .rls-app-color-300 {
13
- color: var(--rls-app-color-300);
14
- }
15
-
16
- .rls-app-color-100 {
17
- color: var(--rls-app-color-100);
18
- }
19
-
20
- .rls-app-background-500 {
21
- background: var(--rls-app-background-500);
22
- }
23
-
24
- .rls-app-background-300 {
25
- background: var(--rls-app-background-300);
26
- }
27
-
28
- .rls-app-background-100 {
29
- background: var(--rls-app-background-100);
30
- }
31
-
32
- .rls-app-border-1-500 {
33
- border: var(--rls-app-border-1-500);
34
- }
35
-
36
- .rls-app-border-2-500 {
37
- border: var(--rls-app-border-2-500);
38
- }
39
-
40
- .rls-app-border-4-500 {
41
- border: var(--rls-app-border-4-500);
42
- }