@rolster/styles-foundations 2.6.8 → 2.6.9

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/dist/styles.css +157 -61
  2. package/dist/styles.css.map +1 -1
  3. package/dist/styles.min.css +1 -1
  4. package/dist/styles.rtl.css +157 -61
  5. package/dist/styles.rtl.min.css +1 -1
  6. package/package.json +1 -1
  7. package/scss/utilities/layout.scss +23 -2
  8. package/scss/utilities/typographics.scss +50 -42
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rolster/styles-foundations",
3
- "version": "2.6.8",
3
+ "version": "2.6.9",
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/utilities/layout.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  // Rolster Technology Layout Utilities
2
- // v2.1.2
2
+ // v2.1.3
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 11/Abr/2023
6
- // Updated: 13/Nov/2025
6
+ // Updated: 04/Dic/2025
7
7
 
8
8
  @mixin grid-responsive($size) {
9
9
  .#{$size}-grid-8 {
@@ -56,17 +56,20 @@
56
56
  --flex-grid-12-col-2: 3.4rem;
57
57
  --flex-grid-12-col-3: 3.1rem;
58
58
  --flex-grid-12-col-4: 2.8rem;
59
+ --flex-grid-12-col-5: 2.8rem;
59
60
  --flex-grid-12-col-6: 2.18rem;
60
61
  --flex-grid-12-col-8: 3rem;
61
62
 
62
63
  --flex-grid-8-col-2: 3.1rem;
63
64
  --flex-grid-8-col-3: 2.6rem;
64
65
  --flex-grid-8-col-4: 2.2rem;
66
+ --flex-grid-8-col-5: 2.2rem;
65
67
  --flex-grid-8-col-6: 1.8rem;
66
68
 
67
69
  --flex-grid-6-col-2: 2.82rem;
68
70
  --flex-grid-6-col-3: 2.2rem;
69
71
  --flex-grid-6-col-4: 1.7rem;
72
+ --flex-grid-6-col-5: 1.7rem;
70
73
 
71
74
  --flex-grid-4-col-2: 2rem;
72
75
  --flex-grid-4-col-3: 1rem;
@@ -85,17 +88,20 @@
85
88
  --flex-grid-12-col-2: 6.624rem;
86
89
  --flex-grid-12-col-3: 6rem;
87
90
  --flex-grid-12-col-4: 5.38rem;
91
+ --flex-grid-12-col-5: 5.38rem;
88
92
  --flex-grid-12-col-6: 4.1rem;
89
93
  --flex-grid-12-col-8: 3rem;
90
94
 
91
95
  --flex-grid-8-col-2: 6.182rem;
92
96
  --flex-grid-8-col-3: 5.2rem;
93
97
  --flex-grid-8-col-4: 4rem;
98
+ --flex-grid-8-col-5: 4rem;
94
99
  --flex-grid-8-col-6: 2.2rem;
95
100
 
96
101
  --flex-grid-6-col-2: 5.4rem;
97
102
  --flex-grid-6-col-3: 4rem;
98
103
  --flex-grid-6-col-4: 2.84rem;
104
+ --flex-grid-6-col-5: 2.84rem;
99
105
 
100
106
  --flex-grid-4-col-2: 4rem;
101
107
  --flex-grid-4-col-3: 2.2rem;
@@ -114,17 +120,20 @@
114
120
  --flex-grid-12-col-2: 6.66rem;
115
121
  --flex-grid-12-col-3: 6rem;
116
122
  --flex-grid-12-col-4: 5.38rem;
123
+ --flex-grid-12-col-5: 5.38rem;
117
124
  --flex-grid-12-col-6: 4.1rem;
118
125
  --flex-grid-12-col-8: 3rem;
119
126
 
120
127
  --flex-grid-8-col-2: 6.182rem;
121
128
  --flex-grid-8-col-3: 5.2rem;
122
129
  --flex-grid-8-col-4: 4rem;
130
+ --flex-grid-8-col-5: 4rem;
123
131
  --flex-grid-8-col-6: 2.2rem;
124
132
 
125
133
  --flex-grid-6-col-2: 5.4rem;
126
134
  --flex-grid-6-col-3: 4rem;
127
135
  --flex-grid-6-col-4: 2.84rem;
136
+ --flex-grid-6-col-5: 2.84rem;
128
137
 
129
138
  --flex-grid-4-col-2: 4rem;
130
139
  --flex-grid-4-col-3: 2.2rem;
@@ -179,6 +188,10 @@
179
188
  width: calc(66.67% - var(--flex-grid-6-col-4));
180
189
  }
181
190
 
191
+ &.#{$size}-flex-col-5 {
192
+ width: calc(83.34% - var(--flex-grid-6-col-5));
193
+ }
194
+
182
195
  &.#{$size}-flex-col-6,
183
196
  &.#{$size}-flex-col-8,
184
197
  &.#{$size}-flex-col-12 {
@@ -207,6 +220,10 @@
207
220
  width: calc(50% - var(--flex-grid-8-col-4));
208
221
  }
209
222
 
223
+ &.#{$size}-flex-col-5 {
224
+ width: calc(62.75% - var(--flex-grid-8-col-5));
225
+ }
226
+
210
227
  &.#{$size}-flex-col-6 {
211
228
  width: calc(75% - var(--flex-grid-8-col-6));
212
229
  }
@@ -238,6 +255,10 @@
238
255
  width: calc(33.33% - var(--flex-grid-12-col-4));
239
256
  }
240
257
 
258
+ &.#{$size}-flex-col-5 {
259
+ width: calc(41.66% - var(--flex-grid-12-col-5));
260
+ }
261
+
241
262
  &.#{$size}-flex-col-6 {
242
263
  width: calc(50% - var(--flex-grid-12-col-6));
243
264
  }
package/scss/utilities/typographics.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  // Rolster Technology Typographics Utilities
2
- // v2.1.2
2
+ // v2.1.4
3
3
  // @license MIT
4
4
  // Author: Rolster Developers
5
5
  // Created: 20/Mar/2018
6
- // Updated: 18/Sep/2025
6
+ // Updated: 03/Dic/2025
7
7
 
8
8
  @mixin typographic($name, $key) {
9
9
  .rls-#{$name}-default {
@@ -38,68 +38,76 @@
38
38
  --rls-app-font-size: 2px;
39
39
 
40
40
  --rls-heading1-font-size: 16rem;
41
- --rls-heading1-letter-spacing: 0.0234375em;
42
- --rls-heading1-line-height: 18.25rem;
41
+ --rls-heading1-letter-spacing: 0.0135rem;
42
+ --rls-heading1-line-height: 17.5rem;
43
43
 
44
- --rls-heading2-font-size: 14.45rem;
45
- --rls-heading2-letter-spacing: 0.0234375em;
46
- --rls-heading2-line-height: 15.75rem;
44
+ --rls-heading2-font-size: 14.75rem;
45
+ --rls-heading2-letter-spacing: 0.0135rem;
46
+ --rls-heading2-line-height: 16rem;
47
47
 
48
- --rls-heading3-font-size: 13.45rem;
49
- --rls-heading3-letter-spacing: 0.0234375em;
50
- --rls-heading3-line-height: 14.75rem;
48
+ --rls-heading3-font-size: 13.525rem;
49
+ --rls-heading3-letter-spacing: 0.0135rem;
50
+ --rls-heading3-line-height: 15rem;
51
51
 
52
- --rls-heading4-font-size: 12rem;
53
- --rls-heading4-letter-spacing: 0.0234375em;
54
- --rls-heading4-line-height: 13.25rem;
52
+ --rls-heading4-font-size: 12.125rem;
53
+ --rls-heading4-letter-spacing: 0.0135rem;
54
+ --rls-heading4-line-height: 13.5rem;
55
55
 
56
56
  --rls-heading5-font-size: 11rem;
57
- --rls-heading5-letter-spacing: 0.0234375em;
58
- --rls-heading5-line-height: 12.75rem;
57
+ --rls-heading5-letter-spacing: 0.0135rem;
58
+ --rls-heading5-line-height: 12.125rem;
59
59
 
60
60
  --rls-heading6-font-size: 10rem;
61
- --rls-heading6-letter-spacing: 0.0234375em;
62
- --rls-heading6-line-height: 11.25rem;
61
+ --rls-heading6-letter-spacing: 0.0135rem;
62
+ --rls-heading6-line-height: 11rem;
63
63
 
64
- --rls-title-font-size: 9rem;
65
- --rls-title-letter-spacing: 0.0546875em;
66
- --rls-title-line-height: 10rem;
64
+ --rls-title-font-size: 9.25rem;
65
+ --rls-title-letter-spacing: 0.0375rem;
66
+ --rls-title-line-height: 10.25rem;
67
67
 
68
68
  --rls-subtitle-font-size: 8.75rem;
69
- --rls-subtitle-letter-spacing: 0.0546875em;
70
- --rls-subtitle-line-height: 8.95rem;
69
+ --rls-subtitle-letter-spacing: 0.0375rem;
70
+ --rls-subtitle-line-height: 9.75rem;
71
71
 
72
72
  --rls-body-font-size: 8rem;
73
- --rls-body-letter-spacing: 0.03125em;
73
+ --rls-body-letter-spacing: 0.0125rem;
74
74
  --rls-body-line-height: 9rem;
75
75
 
76
- --rls-paragraph-font-size: 7.25rem;
76
+ --rls-input-font-size: 7.65rem;
77
+ --rls-input-letter-spacing: 0.0125rem;
78
+ --rls-input-line-height: 8.125rem;
79
+
80
+ --rls-paragraph-font-size: 7.325rem;
77
81
  --rls-paragraph-letter-spacing: 0.02625em;
78
82
  --rls-paragraph-line-height: 8rem;
79
83
 
80
- --rls-input-font-size: 7.65rem;
81
- --rls-input-letter-spacing: 0.03125em;
82
- --rls-input-line-height: 9rem;
84
+ --rls-button-font-size: 7rem;
85
+ --rls-button-letter-spacing: 0.0125rem;
86
+ --rls-button-line-height: 7.875rem;
83
87
 
84
88
  --rls-label-font-size: 7rem;
85
- --rls-label-letter-spacing: 0.03125em;
86
- --rls-label-line-height: 8.25rem;
89
+ --rls-label-letter-spacing: 0.0125rem;
90
+ --rls-label-line-height: 7.875rem;
87
91
 
88
- --rls-button-font-size: 7.125rem;
89
- --rls-button-letter-spacing: 0.05725em;
90
- --rls-button-line-height: 8.5rem;
92
+ --rls-span-font-size: 6.425rem;
93
+ --rls-span-letter-spacing: 0.0175rem;
94
+ --rls-span-line-height: 7.5rem;
91
95
 
92
- --rls-smalltext-font-size: 6rem;
93
- --rls-smalltext-letter-spacing: 0.03125em;
94
- --rls-smalltext-line-height: 8.5rem;
96
+ --rls-smalltext-font-size: 6.125rem;
97
+ --rls-smalltext-letter-spacing: 0.0125rem;
98
+ --rls-smalltext-line-height: 7.125rem;
95
99
 
96
- --rls-caption-font-size: 5.75rem;
97
- --rls-caption-letter-spacing: 0.046875em;
98
- --rls-caption-line-height: 7.25rem;
100
+ --rls-caption-font-size: 5.575rem;
101
+ --rls-caption-letter-spacing: 0.0275rem;
102
+ --rls-caption-line-height: 6.25rem;
99
103
 
100
- --rls-overline-font-size: 5.35rem;
101
- --rls-overline-letter-spacing: 0.0625em;
102
- --rls-overline-line-height: 7.25rem;
104
+ --rls-overline-font-size: 5.125rem;
105
+ --rls-overline-letter-spacing: 0.0425rem;
106
+ --rls-overline-line-height: 5.825rem;
107
+
108
+ --rls-tiny-font-size: 4.325rem;
109
+ --rls-tiny-letter-spacing: 0.0425rem;
110
+ --rls-tiny-line-height: 5rem;
103
111
  }
104
112
 
105
113
  h1 {
@@ -167,8 +175,8 @@ button {
167
175
  @include typographic('title', 'title');
168
176
  @include typographic('subtitle', 'subtitle');
169
177
  @include typographic('body', 'body');
170
- @include typographic('paragraph', 'paragraph');
171
178
  @include typographic('input', 'input');
179
+ @include typographic('paragraph', 'paragraph');
172
180
  @include typographic('label', 'label');
173
181
  @include typographic('button', 'button');
174
182
  @include typographic('smalltext', 'smalltext');