@rolster/styles-foundations 2.7.0 → 2.7.2

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 (15) hide show
  1. package/LICENSE +21 -21
  2. package/dist/styles.css +989 -885
  3. package/dist/styles.css.map +1 -1
  4. package/dist/styles.min.css +1 -1
  5. package/dist/styles.rtl.css +989 -885
  6. package/dist/styles.rtl.min.css +1 -1
  7. package/package.json +2 -2
  8. package/scss/components/app.scss +3 -3
  9. package/scss/foundations/borders.scss +14 -14
  10. package/scss/foundations/elevations.scss +4 -2
  11. package/scss/foundations/flex-boxs.scss +96 -96
  12. package/scss/foundations/helpers.scss +123 -115
  13. package/scss/utilities/helpers.scss +124 -124
  14. package/scss/utilities/layout.scss +40 -293
  15. package/scss/utilities/typographics.scss +4 -3
package/scss/utilities/helpers.scss CHANGED
@@ -1,124 +1,124 @@
1
- // Rolster Technology Helpers Utilities
2
- // v2.0.0
3
- // @license MIT
4
- // Author: Rolster Developers
5
- // Created: 23/Sep/2023
6
- // Updated: 26/May/2024
7
-
8
- @mixin padding($size) {
9
- .rls-pdg-top-#{$size} {
10
- padding-top: var(--rls-sizing-#{$size});
11
- }
12
-
13
- .rls-pdg-rgt-#{$size} {
14
- padding-right: var(--rls-sizing-#{$size});
15
- }
16
-
17
- .rls-pdg-bot-#{$size} {
18
- padding-bottom: var(--rls-sizing-#{$size});
19
- }
20
-
21
- .rls-pdg-lft-#{$size} {
22
- padding-left: var(--rls-sizing-#{$size});
23
- }
24
-
25
- .rls-pdg-hrz-#{$size} {
26
- padding: 0rem var(--rls-sizing-#{$size});
27
- }
28
-
29
- .rls-pdg-vrt-#{$size} {
30
- padding: var(--rls-sizing-#{$size}) 0rem;
31
- }
32
-
33
- .rls-pdg-#{$size} {
34
- padding: var(--rls-sizing-#{$size});
35
- }
36
- }
37
-
38
- @mixin padding-box-sizing($size) {
39
- .rls-pdx-top-#{$size} {
40
- padding-top: var(--rls-sizing-#{$size});
41
- box-sizing: border-box;
42
- }
43
-
44
- .rls-pdx-rgt-#{$size} {
45
- padding-right: var(--rls-sizing-#{$size});
46
- box-sizing: border-box;
47
- }
48
-
49
- .rls-pdx-bot-#{$size} {
50
- padding-bottom: var(--rls-sizing-#{$size});
51
- box-sizing: border-box;
52
- }
53
-
54
- .rls-pdx-lft-#{$size} {
55
- padding-left: var(--rls-sizing-#{$size});
56
- box-sizing: border-box;
57
- }
58
-
59
- .rls-pdx-hrz-#{$size} {
60
- padding: 0rem var(--rls-sizing-#{$size});
61
- box-sizing: border-box;
62
- }
63
-
64
- .rls-pdx-vrt-#{$size} {
65
- padding: var(--rls-sizing-#{$size}) 0rem;
66
- box-sizing: border-box;
67
- }
68
-
69
- .rls-pdx-#{$size} {
70
- padding: var(--rls-sizing-#{$size});
71
- box-sizing: border-box;
72
- }
73
- }
74
-
75
- @mixin margin($size) {
76
- .rls-mrg-top-#{$size} {
77
- margin-top: var(--rls-sizing-#{$size});
78
- }
79
-
80
- .rls-mrg-rgt-#{$size} {
81
- margin-right: var(--rls-sizing-#{$size});
82
- }
83
-
84
- .rls-mrg-bot-#{$size} {
85
- margin-bottom: var(--rls-sizing-#{$size});
86
- }
87
-
88
- .rls-mrg-lft-#{$size} {
89
- margin-left: var(--rls-sizing-#{$size});
90
- }
91
-
92
- .rls-mrg-hrz-#{$size} {
93
- margin: 0rem var(--rls-sizing-#{$size});
94
- }
95
-
96
- .rls-mrg-vrt-#{$size} {
97
- margin: var(--rls-sizing-#{$size}) 0rem;
98
- }
99
-
100
- .rls-mrg-#{$size} {
101
- margin: var(--rls-sizing-#{$size});
102
- }
103
- }
104
-
105
- @include padding('x4');
106
- @include padding('x8');
107
- @include padding('x12');
108
- @include padding('x16');
109
- @include padding('x24');
110
- @include padding('x36');
111
-
112
- @include padding-box-sizing('x4');
113
- @include padding-box-sizing('x8');
114
- @include padding-box-sizing('x12');
115
- @include padding-box-sizing('x16');
116
- @include padding-box-sizing('x24');
117
- @include padding-box-sizing('x36');
118
-
119
- @include margin('x4');
120
- @include margin('x8');
121
- @include margin('x12');
122
- @include margin('x16');
123
- @include margin('x24');
124
- @include margin('x36');
1
+ // Rolster Technology Helpers Utilities
2
+ // v2.0.0
3
+ // @license MIT
4
+ // Author: Rolster Developers
5
+ // Created: 23/Sep/2023
6
+ // Updated: 26/May/2024
7
+
8
+ @mixin padding($size) {
9
+ .rls-pdg-top-#{$size} {
10
+ padding-top: var(--rls-sizing-#{$size});
11
+ }
12
+
13
+ .rls-pdg-rgt-#{$size} {
14
+ padding-right: var(--rls-sizing-#{$size});
15
+ }
16
+
17
+ .rls-pdg-bot-#{$size} {
18
+ padding-bottom: var(--rls-sizing-#{$size});
19
+ }
20
+
21
+ .rls-pdg-lft-#{$size} {
22
+ padding-left: var(--rls-sizing-#{$size});
23
+ }
24
+
25
+ .rls-pdg-hrz-#{$size} {
26
+ padding: 0rem var(--rls-sizing-#{$size});
27
+ }
28
+
29
+ .rls-pdg-vrt-#{$size} {
30
+ padding: var(--rls-sizing-#{$size}) 0rem;
31
+ }
32
+
33
+ .rls-pdg-#{$size} {
34
+ padding: var(--rls-sizing-#{$size});
35
+ }
36
+ }
37
+
38
+ @mixin padding-box-sizing($size) {
39
+ .rls-pdx-top-#{$size} {
40
+ padding-top: var(--rls-sizing-#{$size});
41
+ box-sizing: border-box;
42
+ }
43
+
44
+ .rls-pdx-rgt-#{$size} {
45
+ padding-right: var(--rls-sizing-#{$size});
46
+ box-sizing: border-box;
47
+ }
48
+
49
+ .rls-pdx-bot-#{$size} {
50
+ padding-bottom: var(--rls-sizing-#{$size});
51
+ box-sizing: border-box;
52
+ }
53
+
54
+ .rls-pdx-lft-#{$size} {
55
+ padding-left: var(--rls-sizing-#{$size});
56
+ box-sizing: border-box;
57
+ }
58
+
59
+ .rls-pdx-hrz-#{$size} {
60
+ padding: 0rem var(--rls-sizing-#{$size});
61
+ box-sizing: border-box;
62
+ }
63
+
64
+ .rls-pdx-vrt-#{$size} {
65
+ padding: var(--rls-sizing-#{$size}) 0rem;
66
+ box-sizing: border-box;
67
+ }
68
+
69
+ .rls-pdx-#{$size} {
70
+ padding: var(--rls-sizing-#{$size});
71
+ box-sizing: border-box;
72
+ }
73
+ }
74
+
75
+ @mixin margin($size) {
76
+ .rls-mrg-top-#{$size} {
77
+ margin-top: var(--rls-sizing-#{$size});
78
+ }
79
+
80
+ .rls-mrg-rgt-#{$size} {
81
+ margin-right: var(--rls-sizing-#{$size});
82
+ }
83
+
84
+ .rls-mrg-bot-#{$size} {
85
+ margin-bottom: var(--rls-sizing-#{$size});
86
+ }
87
+
88
+ .rls-mrg-lft-#{$size} {
89
+ margin-left: var(--rls-sizing-#{$size});
90
+ }
91
+
92
+ .rls-mrg-hrz-#{$size} {
93
+ margin: 0rem var(--rls-sizing-#{$size});
94
+ }
95
+
96
+ .rls-mrg-vrt-#{$size} {
97
+ margin: var(--rls-sizing-#{$size}) 0rem;
98
+ }
99
+
100
+ .rls-mrg-#{$size} {
101
+ margin: var(--rls-sizing-#{$size});
102
+ }
103
+ }
104
+
105
+ @include padding('x4');
106
+ @include padding('x8');
107
+ @include padding('x12');
108
+ @include padding('x16');
109
+ @include padding('x24');
110
+ @include padding('x36');
111
+
112
+ @include padding-box-sizing('x4');
113
+ @include padding-box-sizing('x8');
114
+ @include padding-box-sizing('x12');
115
+ @include padding-box-sizing('x16');
116
+ @include padding-box-sizing('x24');
117
+ @include padding-box-sizing('x36');
118
+
119
+ @include margin('x4');
120
+ @include margin('x8');
121
+ @include margin('x12');
122
+ @include margin('x16');
123
+ @include margin('x24');
124
+ @include margin('x36');
package/scss/utilities/layout.scss CHANGED
@@ -1,336 +1,83 @@
1
1
  // Rolster Technology Layout Utilities
2
- // v2.1.3
2
+ // v3.1.0
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 11/Abr/2023
6
- // Updated: 04/Dic/2025
6
+ // Updated: 06/Abr/2026
7
7
 
8
- @mixin grid-responsive($size) {
9
- .#{$size}-grid-8 {
10
- display: grid;
11
- gap: var(--rls-sizing-x4);
12
- }
13
-
14
- .#{$size}-grid-12 {
15
- display: grid;
16
- gap: var(--rls-sizing-x6);
17
- }
18
-
19
- .#{$size}-grid-16 {
20
- display: grid;
21
- gap: var(--rls-sizing-x8);
22
- }
23
-
24
- .#{$size}-grid-col-12 {
25
- grid-template-columns: repeat(12, 1fr);
26
- }
27
-
28
- .#{$size}-grid-col-8 {
29
- grid-template-columns: repeat(8, 1fr);
30
- }
8
+ $rls-grid-col-sizes: 12, 8, 6, 4, 2, 1;
31
9
 
32
- .#{$size}-grid-col-6 {
33
- grid-template-columns: repeat(6, 1fr);
34
- }
10
+ @mixin grid-base() {
11
+ display: grid;
12
+ grid-template-columns: repeat(var(--rls-grid-columns), minmax(0, 1fr));
13
+ width: 100%;
14
+ box-sizing: border-box;
35
15
 
36
- .#{$size}-grid-col-4 {
37
- grid-template-columns: repeat(4, 1fr);
16
+ & > * {
17
+ min-width: 0;
18
+ max-width: 100%;
19
+ box-sizing: border-box;
38
20
  }
21
+ }
39
22
 
40
- .#{$size}-grid-col-2 {
41
- grid-template-columns: repeat(2, 1fr);
23
+ @mixin grid-responsive($size) {
24
+ @each $cols in $rls-grid-col-sizes {
25
+ .rls-flex-#{$size}-grid-col-#{$cols} {
26
+ --rls-grid-columns: #{$cols};
27
+ }
42
28
  }
43
29
 
44
- .#{$size}-grid-col-1 {
45
- grid-template-columns: repeat(1, 1fr);
30
+ .rls-flex-#{$size}-grid-8,
31
+ .rls-flex-#{$size}-grid-12,
32
+ .rls-flex-#{$size}-grid-16 {
33
+ @include grid-base();
46
34
  }
47
- }
48
-
49
- @mixin flex-grid-responsive($size) {
50
- .#{$size}-flex-grid-8 {
51
- --flex-grid-12-gap: 3.6672rem;
52
- --flex-grid-8-gap: 28rem;
53
- --flex-grid-6-gap: 3.336rem;
54
- --flex-grid-4-gap: 3rem;
55
-
56
- --flex-grid-12-col-2: 3.4rem;
57
- --flex-grid-12-col-3: 3.1rem;
58
- --flex-grid-12-col-4: 2.8rem;
59
- --flex-grid-12-col-5: 2.8rem;
60
- --flex-grid-12-col-6: 2.18rem;
61
- --flex-grid-12-col-8: 3rem;
62
35
 
63
- --flex-grid-8-col-2: 3.1rem;
64
- --flex-grid-8-col-3: 2.6rem;
65
- --flex-grid-8-col-4: 2.2rem;
66
- --flex-grid-8-col-5: 2.2rem;
67
- --flex-grid-8-col-6: 1.8rem;
68
-
69
- --flex-grid-6-col-2: 2.82rem;
70
- --flex-grid-6-col-3: 2.2rem;
71
- --flex-grid-6-col-4: 1.7rem;
72
- --flex-grid-6-col-5: 1.7rem;
73
-
74
- --flex-grid-4-col-2: 2rem;
75
- --flex-grid-4-col-3: 1rem;
76
-
77
- display: inline-flex;
78
- flex-wrap: wrap;
36
+ .rls-flex-#{$size}-grid-8 {
79
37
  gap: var(--rls-sizing-x4);
80
38
  }
81
39
 
82
- .#{$size}-flex-grid-12 {
83
- --flex-grid-12-gap: 7.3125rem;
84
- --flex-grid-8-gap: 7rem;
85
- --flex-grid-6-gap: 6.6475rem;
86
- --flex-grid-4-gap: 6rem;
87
-
88
- --flex-grid-12-col-2: 6.624rem;
89
- --flex-grid-12-col-3: 6rem;
90
- --flex-grid-12-col-4: 5.38rem;
91
- --flex-grid-12-col-5: 5.38rem;
92
- --flex-grid-12-col-6: 4.1rem;
93
- --flex-grid-12-col-8: 3rem;
94
-
95
- --flex-grid-8-col-2: 6.182rem;
96
- --flex-grid-8-col-3: 5.2rem;
97
- --flex-grid-8-col-4: 4rem;
98
- --flex-grid-8-col-5: 4rem;
99
- --flex-grid-8-col-6: 2.2rem;
100
-
101
- --flex-grid-6-col-2: 5.4rem;
102
- --flex-grid-6-col-3: 4rem;
103
- --flex-grid-6-col-4: 2.84rem;
104
- --flex-grid-6-col-5: 2.84rem;
105
-
106
- --flex-grid-4-col-2: 4rem;
107
- --flex-grid-4-col-3: 2.2rem;
108
-
109
- display: inline-flex;
110
- flex-wrap: wrap;
40
+ .rls-flex-#{$size}-grid-12 {
111
41
  gap: var(--rls-sizing-x6);
112
42
  }
113
43
 
114
- .#{$size}-flex-grid-16 {
115
- --flex-grid-12-gap: 7.3125rem;
116
- --flex-grid-8-gap: 7rem;
117
- --flex-grid-6-gap: 6.6475rem;
118
- --flex-grid-4-gap: 6rem;
119
-
120
- --flex-grid-12-col-2: 6.66rem;
121
- --flex-grid-12-col-3: 6rem;
122
- --flex-grid-12-col-4: 5.38rem;
123
- --flex-grid-12-col-5: 5.38rem;
124
- --flex-grid-12-col-6: 4.1rem;
125
- --flex-grid-12-col-8: 3rem;
126
-
127
- --flex-grid-8-col-2: 6.182rem;
128
- --flex-grid-8-col-3: 5.2rem;
129
- --flex-grid-8-col-4: 4rem;
130
- --flex-grid-8-col-5: 4rem;
131
- --flex-grid-8-col-6: 2.2rem;
132
-
133
- --flex-grid-6-col-2: 5.4rem;
134
- --flex-grid-6-col-3: 4rem;
135
- --flex-grid-6-col-4: 2.84rem;
136
- --flex-grid-6-col-5: 2.84rem;
137
-
138
- --flex-grid-4-col-2: 4rem;
139
- --flex-grid-4-col-3: 2.2rem;
140
-
141
- display: inline-flex;
142
- flex-wrap: wrap;
44
+ .rls-flex-#{$size}-grid-16 {
143
45
  gap: var(--rls-sizing-x8);
144
46
  }
145
47
 
146
- .#{$size}-flex-grid-col-4 {
147
- & > * {
148
- width: calc(25% - var(--flex-grid-4-gap));
149
-
150
- &.#{$size}-flex-col-1 {
151
- width: calc(25% - var(--flex-grid-4-gap));
152
- }
153
-
154
- &.#{$size}-flex-col-2 {
155
- width: calc(50% - var(--flex-grid-4-col-2));
156
- }
157
-
158
- &.#{$size}-flex-col-3 {
159
- width: calc(75% - var(--flex-grid-4-col-3));
160
- }
161
-
162
- &.#{$size}-flex-col-4,
163
- &.#{$size}-flex-col-6,
164
- &.#{$size}-flex-col-8,
165
- &.#{$size}-flex-col-12 {
166
- width: 100%;
167
- }
48
+ // Flex Grid — span classes
49
+ @for $i from 1 through 12 {
50
+ .rls-flex-#{$size}-col-#{$i} {
51
+ grid-column: span #{$i} / span #{$i};
168
52
  }
169
53
  }
170
54
 
171
- .#{$size}-flex-grid-col-6 {
172
- & > * {
173
- width: calc(16.66% - var(--flex-grid-6-gap));
174
-
175
- &.#{$size}-flex-col-1 {
176
- width: calc(16.66% - var(--flex-grid-6-gap));
177
- }
178
-
179
- &.#{$size}-flex-col-2 {
180
- width: calc(33.34% - var(--flex-grid-6-col-2));
181
- }
182
-
183
- &.#{$size}-flex-col-3 {
184
- width: calc(50% - var(--flex-grid-6-col-3));
185
- }
186
-
187
- &.#{$size}-flex-col-4 {
188
- width: calc(66.67% - var(--flex-grid-6-col-4));
189
- }
190
-
191
- &.#{$size}-flex-col-5 {
192
- width: calc(83.34% - var(--flex-grid-6-col-5));
193
- }
194
-
195
- &.#{$size}-flex-col-6,
196
- &.#{$size}-flex-col-8,
197
- &.#{$size}-flex-col-12 {
198
- width: 100%;
199
- }
200
- }
201
- }
202
-
203
- .#{$size}-flex-grid-col-8 {
204
- & > * {
205
- width: calc(12.5% - var(--flex-grid-8-gap));
206
-
207
- &.#{$size}-flex-col-1 {
208
- width: calc(12.5% - var(--flex-grid-8-gap));
209
- }
210
-
211
- &.#{$size}-flex-col-2 {
212
- width: calc(25% - var(--flex-grid-8-col-2));
213
- }
214
-
215
- &.#{$size}-flex-col-3 {
216
- width: calc(37.5% - var(--flex-grid-8-col-3));
217
- }
218
-
219
- &.#{$size}-flex-col-4 {
220
- width: calc(50% - var(--flex-grid-8-col-4));
221
- }
222
-
223
- &.#{$size}-flex-col-5 {
224
- width: calc(62.75% - var(--flex-grid-8-col-5));
225
- }
226
-
227
- &.#{$size}-flex-col-6 {
228
- width: calc(75% - var(--flex-grid-8-col-6));
229
- }
230
-
231
- &.#{$size}-flex-col-8,
232
- &.#{$size}-flex-col-12 {
233
- width: 100%;
234
- }
235
- }
236
- }
237
-
238
- .#{$size}-flex-grid-col-12 {
239
- & > * {
240
- width: calc(8.33% - var(--flex-grid-12-gap));
241
-
242
- &.#{$size}-flex-col-1 {
243
- width: calc(8.33% - var(--flex-grid-12-gap));
244
- }
245
-
246
- &.#{$size}-flex-col-2 {
247
- width: calc(16.66% - var(--flex-grid-12-col-2));
248
- }
249
-
250
- &.#{$size}-flex-col-3 {
251
- width: calc(25% - var(--flex-grid-12-col-3));
252
- }
253
-
254
- &.#{$size}-flex-col-4 {
255
- width: calc(33.33% - var(--flex-grid-12-col-4));
256
- }
257
-
258
- &.#{$size}-flex-col-5 {
259
- width: calc(41.66% - var(--flex-grid-12-col-5));
260
- }
261
-
262
- &.#{$size}-flex-col-6 {
263
- width: calc(50% - var(--flex-grid-12-col-6));
264
- }
265
-
266
- &.#{$size}-flex-col-8 {
267
- width: calc(66.66% - var(--flex-grid-12-col-8));
268
- }
269
-
270
- &.#{$size}-flex-col-12 {
271
- width: 100%;
55
+ // Flex Grid — clamp spans exceeding column count
56
+ @each $max in $rls-grid-col-sizes {
57
+ @if $max < 12 {
58
+ @for $col from ($max + 1) through 12 {
59
+ .rls-flex-#{$size}-grid-col-#{$max} > .rls-flex-#{$size}-col-#{$col} {
60
+ grid-column: span #{$max} / span #{$max};
61
+ }
272
62
  }
273
63
  }
274
64
  }
275
65
  }
276
66
 
277
- body {
278
- --flex-grid-12-gap: 0rem;
279
- --flex-grid-8-gap: 0rem;
280
- --flex-grid-6-gap: 0rem;
281
- --flex-grid-4-gap: 0rem;
282
-
283
- --flex-grid-12-col-2: 0rem;
284
- --flex-grid-12-col-3: 0rem;
285
- --flex-grid-12-col-4: 0rem;
286
- --flex-grid-12-col-6: 0rem;
287
- --flex-grid-12-col-8: 0rem;
288
-
289
- --flex-grid-8-col-2: 0rem;
290
- --flex-grid-8-col-3: 0rem;
291
- --flex-grid-8-col-4: 0rem;
292
- --flex-grid-8-col-6: 0rem;
293
-
294
- --flex-grid-6-col-2: 0rem;
295
- --flex-grid-6-col-3: 0rem;
296
- --flex-grid-6-col-4: 0rem;
297
-
298
- --flex-grid-4-col-2: 0rem;
299
- --flex-grid-4-col-3: 0rem;
300
- }
301
-
302
67
  @include grid-responsive('xs');
303
68
 
304
- @media screen and (min-width: 360px) {
69
+ @media screen and (min-width: 420px) {
305
70
  @include grid-responsive('sm');
306
71
  }
307
72
 
308
- @media screen and (min-width: 640px) {
73
+ @media screen and (min-width: 720px) {
309
74
  @include grid-responsive('md');
310
75
  }
311
76
 
312
- @media screen and (min-width: 960px) {
77
+ @media screen and (min-width: 1024px) {
313
78
  @include grid-responsive('lg');
314
79
  }
315
80
 
316
- @media screen and (min-width: 1280px) {
81
+ @media screen and (min-width: 1440px) {
317
82
  @include grid-responsive('xl');
318
83
  }
319
-
320
- @include flex-grid-responsive('xs');
321
-
322
- @media screen and (min-width: 360px) {
323
- @include flex-grid-responsive('sm');
324
- }
325
-
326
- @media screen and (min-width: 640px) {
327
- @include flex-grid-responsive('md');
328
- }
329
-
330
- @media screen and (min-width: 960px) {
331
- @include flex-grid-responsive('lg');
332
- }
333
-
334
- @media screen and (min-width: 1280px) {
335
- @include flex-grid-responsive('xl');
336
- }
package/scss/utilities/typographics.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  // Rolster Technology Typographics Utilities
2
- // v2.1.4
2
+ // v2.1.5
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 20/Mar/2018
6
- // Updated: 03/Dic/2025
6
+ // Updated: 09/Abr/2026
7
7
 
8
8
  @mixin typographic($name, $key) {
9
9
  .rls-#{$name}-default {
@@ -176,9 +176,10 @@ button {
176
176
  @include typographic('subtitle', 'subtitle');
177
177
  @include typographic('body', 'body');
178
178
  @include typographic('input', 'input');
179
+ @include typographic('button', 'button');
179
180
  @include typographic('paragraph', 'paragraph');
180
181
  @include typographic('label', 'label');
181
- @include typographic('button', 'button');
182
+ @include typographic('span', 'span');
182
183
  @include typographic('smalltext', 'smalltext');
183
184
  @include typographic('caption', 'caption');
184
185
  @include typographic('overline', 'overline');