@rolster/styles-foundations 3.0.4 → 3.0.6

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 (88) hide show
  1. package/LICENSE +21 -21
  2. package/dist/design-system-bordered.css +19 -19
  3. package/dist/design-system-bordered.css.map +1 -1
  4. package/dist/design-system-bordered.min.css +5 -5
  5. package/dist/design-system-filled.css +20 -21
  6. package/dist/design-system-filled.css.map +1 -1
  7. package/dist/design-system-filled.min.css +5 -5
  8. package/package.json +59 -41
  9. package/scss/design-system-bordered/app.scss +228 -228
  10. package/scss/design-system-bordered/atoms/amount.scss +58 -58
  11. package/scss/design-system-bordered/atoms/area-text.scss +100 -100
  12. package/scss/design-system-bordered/atoms/avatar.scss +50 -50
  13. package/scss/design-system-bordered/atoms/badge.scss +51 -51
  14. package/scss/design-system-bordered/atoms/breadcrumb.scss +87 -87
  15. package/scss/design-system-bordered/atoms/button-action.scss +124 -124
  16. package/scss/design-system-bordered/atoms/button-option.scss +49 -49
  17. package/scss/design-system-bordered/atoms/image.scss +38 -37
  18. package/scss/design-system-bordered/atoms/input-decimal.scss +15 -15
  19. package/scss/design-system-bordered/atoms/input-money.scss +15 -15
  20. package/scss/design-system-bordered/atoms/input-number.scss +12 -12
  21. package/scss/design-system-bordered/atoms/input-password.scss +48 -48
  22. package/scss/design-system-bordered/atoms/input-percentage.scss +12 -12
  23. package/scss/design-system-bordered/atoms/input-search.scss +28 -28
  24. package/scss/design-system-bordered/atoms/input-text.scss +12 -12
  25. package/scss/design-system-bordered/atoms/label.scss +20 -20
  26. package/scss/design-system-bordered/atoms/led.scss +32 -31
  27. package/scss/design-system-bordered/atoms/message-icon.scss +21 -21
  28. package/scss/design-system-bordered/atoms/poster.scss +42 -42
  29. package/scss/design-system-bordered/atoms/progress-bar.scss +83 -83
  30. package/scss/design-system-bordered/atoms/progress-circular.scss +59 -59
  31. package/scss/design-system-bordered/atoms/radio-button.scss +55 -55
  32. package/scss/design-system-bordered/atoms/spinner.scss +102 -102
  33. package/scss/design-system-bordered/atoms/switch.scss +71 -71
  34. package/scss/design-system-bordered/atoms/tabular-text.scss +38 -38
  35. package/scss/design-system-bordered/molecules/alert.scss +52 -52
  36. package/scss/design-system-bordered/molecules/button-progress.scss +15 -15
  37. package/scss/design-system-bordered/molecules/button-toggle.scss +100 -100
  38. package/scss/design-system-bordered/molecules/field-area.scss +13 -13
  39. package/scss/design-system-bordered/molecules/field-decimal.scss +14 -14
  40. package/scss/design-system-bordered/molecules/field-file.scss +41 -41
  41. package/scss/design-system-bordered/molecules/field-list-suggestions.scss +65 -65
  42. package/scss/design-system-bordered/molecules/field-money.scss +14 -14
  43. package/scss/design-system-bordered/molecules/field-password.scss +23 -23
  44. package/scss/design-system-bordered/molecules/field-readonly.scss +24 -24
  45. package/scss/design-system-bordered/molecules/label-check-box.scss +72 -72
  46. package/scss/design-system-bordered/molecules/label-radio-button.scss +79 -79
  47. package/scss/design-system-bordered/molecules/label-switch.scss +71 -71
  48. package/scss/design-system-bordered/molecules/message-empty.scss +16 -17
  49. package/scss/design-system-bordered/molecules/pagination.scss +114 -114
  50. package/scss/design-system-bordered/molecules/picker-day-range.scss +109 -109
  51. package/scss/design-system-bordered/molecules/picker-day.scss +117 -117
  52. package/scss/design-system-bordered/molecules/picker-month.scss +67 -67
  53. package/scss/design-system-bordered/molecules/picker-selector-title.scss +54 -54
  54. package/scss/design-system-bordered/molecules/picker-year.scss +113 -113
  55. package/scss/design-system-bordered/molecules/slider.scss +74 -74
  56. package/scss/design-system-bordered/molecules/tabs.scss +51 -51
  57. package/scss/design-system-bordered/molecules/toolbar.scss +53 -53
  58. package/scss/design-system-bordered/organisms/bottom-sheet.scss +108 -108
  59. package/scss/design-system-bordered/organisms/card.scss +36 -36
  60. package/scss/design-system-bordered/organisms/confirmation.scss +186 -186
  61. package/scss/design-system-bordered/organisms/dropdown.scss +45 -45
  62. package/scss/design-system-bordered/organisms/field-autocomplete.scss +79 -79
  63. package/scss/design-system-bordered/organisms/field-clock.scss +62 -62
  64. package/scss/design-system-bordered/organisms/field-date-range.scss +60 -60
  65. package/scss/design-system-bordered/organisms/field-date.scss +61 -61
  66. package/scss/design-system-bordered/organisms/form-navigation.scss +46 -46
  67. package/scss/design-system-bordered/organisms/image-chooser.scss +50 -50
  68. package/scss/design-system-bordered/organisms/image-editor-modal.scss +23 -23
  69. package/scss/design-system-bordered/organisms/image-editor.scss +118 -118
  70. package/scss/design-system-bordered/organisms/modal-sheet.scss +138 -138
  71. package/scss/design-system-bordered/organisms/modal.scss +75 -75
  72. package/scss/design-system-bordered/organisms/picker-clock.scss +144 -144
  73. package/scss/design-system-bordered/organisms/picker-date-range.scss +84 -84
  74. package/scss/design-system-bordered/organisms/picker-date.scss +86 -86
  75. package/scss/design-system-bordered/organisms/snackbar.scss +93 -93
  76. package/scss/design-system-filled/atoms/image.scss +3 -2
  77. package/scss/design-system-filled/atoms/led.scss +31 -31
  78. package/scss/design-system-filled/molecules/message-empty.scss +16 -17
  79. package/scss/foundations/borders.scss +14 -14
  80. package/scss/foundations/elevations.scss +130 -130
  81. package/scss/foundations/flex-boxs.scss +96 -96
  82. package/scss/foundations/helpers.scss +123 -123
  83. package/scss/foundations/themes.scss +230 -230
  84. package/scss/utilities/helpers.scss +124 -124
  85. package/scss/utilities/layout.scss +83 -83
  86. package/scss/utilities/typographics.scss +208 -208
  87. /package/scss/design-system-bordered/{_index.scss → index.scss} +0 -0
  88. /package/scss/design-system-filled/{_index.scss → index.scss} +0 -0
package/scss/utilities/typographics.scss CHANGED
@@ -1,208 +1,208 @@
1
- // Rolster Technology Typographics Utilities
2
- // v2.2.0
3
- // @license MIT
4
- // Author: Rolster Developers
5
- // Created: 20/Mar/2018
6
- // Updated: 24/Abr/2026
7
-
8
- @mixin typographic($name, $key) {
9
- .rls-#{$name}-font-default {
10
- font-size: var(--rls-#{$key}-font-size);
11
- letter-spacing: var(--rls-#{$key}-letter-spacing);
12
- min-height: var(--rls-#{$key}-line-height);
13
- line-height: var(--rls-#{$key}-line-height);
14
- }
15
-
16
- .rls-#{$name}-font {
17
- @extend .rls-#{$name}-font-default;
18
- font-weight: var(--rls-#{$key}-font-weight);
19
- }
20
-
21
- .rls-#{$name}-font-regular {
22
- @extend .rls-#{$name}-font-default;
23
- font-weight: var(--rls-font-weight-regular);
24
- }
25
-
26
- .rls-#{$name}-font-medium {
27
- @extend .rls-#{$name}-font-default;
28
- font-weight: var(--rls-font-weight-medium);
29
- }
30
-
31
- .rls-#{$name}-font-semibold {
32
- @extend .rls-#{$name}-font-default;
33
- font-weight: var(--rls-font-weight-semibold);
34
- }
35
-
36
- .rls-#{$name}-font-bold {
37
- @extend .rls-#{$name}-font-default;
38
- font-weight: var(--rls-font-weight-bold);
39
- }
40
- }
41
-
42
- :root {
43
- --rls-app-font-size: 2px;
44
-
45
- --rls-heading1-font-size: 32rem;
46
- --rls-heading1-letter-spacing: -4%;
47
- --rls-heading1-line-height: 40rem;
48
- --rls-heading1-font-weight: 700;
49
-
50
- --rls-heading2-font-size: 24rem;
51
- --rls-heading2-letter-spacing: -4%;
52
- --rls-heading2-line-height: 32rem;
53
- --rls-heading2-font-weight: 700;
54
-
55
- --rls-heading3-font-size: 21rem;
56
- --rls-heading3-letter-spacing: -3%;
57
- --rls-heading3-line-height: 28rem;
58
- --rls-heading3-font-weight: 700;
59
-
60
- --rls-heading4-font-size: 17rem;
61
- --rls-heading4-letter-spacing: -3%;
62
- --rls-heading4-line-height: 24rem;
63
- --rls-heading4-font-weight: 700;
64
-
65
- --rls-heading5-font-size: 14rem;
66
- --rls-heading5-letter-spacing: -2%;
67
- --rls-heading5-line-height: 20rem;
68
- --rls-heading5-font-weight: 600;
69
-
70
- --rls-heading6-font-size: 12rem;
71
- --rls-heading6-letter-spacing: -2%;
72
- --rls-heading6-line-height: 16rem;
73
- --rls-heading6-font-weight: 600;
74
-
75
- --rls-title-font-size: 9.5rem;
76
- --rls-title-letter-spacing: -1%;
77
- --rls-title-line-height: 11rem;
78
- --rls-title-font-weight: 600;
79
-
80
- --rls-subtitle-font-size: 8.75rem;
81
- --rls-subtitle-letter-spacing: -1%;
82
- --rls-subtitle-line-height: 10.5rem;
83
- --rls-subtitle-font-weight: 500;
84
-
85
- --rls-body-font-size: 8rem;
86
- --rls-body-letter-spacing: -1%;
87
- --rls-body-line-height: 9.5rem;
88
- --rls-body-font-weight: 400;
89
-
90
- --rls-input-font-size: 7.65rem;
91
- --rls-input-letter-spacing: -1%;
92
- --rls-input-line-height: 8.125rem;
93
- --rls-input-font-weight: 500;
94
-
95
- --rls-paragraph-font-size: 7.325rem;
96
- --rls-paragraph-letter-spacing: -1%;
97
- --rls-paragraph-line-height: 8.5rem;
98
- --rls-paragraph-font-weight: 400;
99
-
100
- --rls-button-font-size: 7.5rem;
101
- --rls-button-letter-spacing: -1%;
102
- --rls-button-line-height: 9rem;
103
- --rls-button-font-weight: 600;
104
-
105
- --rls-label-font-size: 7rem;
106
- --rls-label-letter-spacing: -1%;
107
- --rls-label-line-height: 8.25rem;
108
- --rls-label-font-weight: 500;
109
-
110
- --rls-span-font-size: 6.5rem;
111
- --rls-span-letter-spacing: -1%;
112
- --rls-span-line-height: 8rem;
113
- --rls-span-font-weight: 400;
114
-
115
- --rls-smalltext-font-size: 6.125rem;
116
- --rls-smalltext-letter-spacing: -1%;
117
- --rls-smalltext-line-height: 7.5rem;
118
- --rls-smalltext-font-weight: 500;
119
-
120
- --rls-caption-font-size: 5.575rem;
121
- --rls-caption-letter-spacing: -1%;
122
- --rls-caption-line-height: 6.75rem;
123
- --rls-caption-font-weight: 400;
124
-
125
- --rls-overline-font-size: 5.125rem;
126
- --rls-overline-letter-spacing: -1%;
127
- --rls-overline-line-height: 6.25rem;
128
- --rls-overline-font-weight: 500;
129
-
130
- --rls-tiny-font-size: 4.5rem;
131
- --rls-tiny-letter-spacing: -1%;
132
- --rls-tiny-line-height: 5.25rem;
133
- --rls-tiny-font-weight: 400;
134
- }
135
-
136
- h1 {
137
- font-size: var(--rls-heading1-font-size);
138
- letter-spacing: var(--rls-heading1-letter-spacing);
139
- min-height: var(--rls-heading1-line-height);
140
- line-height: var(--rls-heading1-line-height);
141
- font-weight: var(--rls-heading1-font-weight);
142
- }
143
-
144
- h2 {
145
- font-size: var(--rls-heading2-font-size);
146
- letter-spacing: var(--rls-heading2-letter-spacing);
147
- min-height: var(--rls-heading2-line-height);
148
- line-height: var(--rls-heading2-line-height);
149
- font-weight: var(--rls-heading2-font-weight);
150
- }
151
-
152
- h3 {
153
- font-size: var(--rls-heading3-font-size);
154
- letter-spacing: var(--rls-heading3-letter-spacing);
155
- min-height: var(--rls-heading3-line-height);
156
- line-height: var(--rls-heading3-line-height);
157
- }
158
-
159
- h4 {
160
- font-size: var(--rls-heading4-font-size);
161
- letter-spacing: var(--rls-heading4-letter-spacing);
162
- min-height: var(--rls-heading4-line-height);
163
- line-height: var(--rls-heading4-line-height);
164
- font-weight: var(--rls-heading4-font-weight);
165
- }
166
-
167
- h5 {
168
- font-size: var(--rls-heading5-font-size);
169
- letter-spacing: var(--rls-heading5-letter-spacing);
170
- min-height: var(--rls-heading5-line-height);
171
- line-height: var(--rls-heading5-line-height);
172
- font-weight: var(--rls-heading5-font-weight);
173
- }
174
-
175
- h6 {
176
- font-size: var(--rls-heading6-font-size);
177
- letter-spacing: var(--rls-heading6-letter-spacing);
178
- min-height: var(--rls-heading6-line-height);
179
- line-height: var(--rls-heading6-line-height);
180
- font-weight: var(--rls-heading6-font-weight);
181
- }
182
-
183
- button {
184
- font-size: var(--rls-button-font-size);
185
- letter-spacing: var(--rls-button-letter-spacing);
186
- min-height: var(--rls-button-line-height);
187
- line-height: var(--rls-button-line-height);
188
- font-weight: var(--rls-button-font-weight);
189
- }
190
-
191
- @include typographic('h1', 'heading1');
192
- @include typographic('h2', 'heading2');
193
- @include typographic('h3', 'heading3');
194
- @include typographic('h4', 'heading4');
195
- @include typographic('h5', 'heading5');
196
- @include typographic('h6', 'heading6');
197
- @include typographic('title', 'title');
198
- @include typographic('subtitle', 'subtitle');
199
- @include typographic('body', 'body');
200
- @include typographic('input', 'input');
201
- @include typographic('button', 'button');
202
- @include typographic('paragraph', 'paragraph');
203
- @include typographic('label', 'label');
204
- @include typographic('span', 'span');
205
- @include typographic('smalltext', 'smalltext');
206
- @include typographic('caption', 'caption');
207
- @include typographic('overline', 'overline');
208
- @include typographic('tiny', 'tiny');
1
+ // Rolster Technology Typographics Utilities
2
+ // v2.2.0
3
+ // @license MIT
4
+ // Author: Rolster Developers
5
+ // Created: 20/Mar/2018
6
+ // Updated: 24/Abr/2026
7
+
8
+ @mixin typographic($name, $key) {
9
+ .rls-#{$name}-font-default {
10
+ font-size: var(--rls-#{$key}-font-size);
11
+ letter-spacing: var(--rls-#{$key}-letter-spacing);
12
+ min-height: var(--rls-#{$key}-line-height);
13
+ line-height: var(--rls-#{$key}-line-height);
14
+ }
15
+
16
+ .rls-#{$name}-font {
17
+ @extend .rls-#{$name}-font-default;
18
+ font-weight: var(--rls-#{$key}-font-weight);
19
+ }
20
+
21
+ .rls-#{$name}-font-regular {
22
+ @extend .rls-#{$name}-font-default;
23
+ font-weight: var(--rls-font-weight-regular);
24
+ }
25
+
26
+ .rls-#{$name}-font-medium {
27
+ @extend .rls-#{$name}-font-default;
28
+ font-weight: var(--rls-font-weight-medium);
29
+ }
30
+
31
+ .rls-#{$name}-font-semibold {
32
+ @extend .rls-#{$name}-font-default;
33
+ font-weight: var(--rls-font-weight-semibold);
34
+ }
35
+
36
+ .rls-#{$name}-font-bold {
37
+ @extend .rls-#{$name}-font-default;
38
+ font-weight: var(--rls-font-weight-bold);
39
+ }
40
+ }
41
+
42
+ :root {
43
+ --rls-app-font-size: 2px;
44
+
45
+ --rls-heading1-font-size: 32rem;
46
+ --rls-heading1-letter-spacing: -4%;
47
+ --rls-heading1-line-height: 40rem;
48
+ --rls-heading1-font-weight: 700;
49
+
50
+ --rls-heading2-font-size: 24rem;
51
+ --rls-heading2-letter-spacing: -4%;
52
+ --rls-heading2-line-height: 32rem;
53
+ --rls-heading2-font-weight: 700;
54
+
55
+ --rls-heading3-font-size: 21rem;
56
+ --rls-heading3-letter-spacing: -3%;
57
+ --rls-heading3-line-height: 28rem;
58
+ --rls-heading3-font-weight: 700;
59
+
60
+ --rls-heading4-font-size: 17rem;
61
+ --rls-heading4-letter-spacing: -3%;
62
+ --rls-heading4-line-height: 24rem;
63
+ --rls-heading4-font-weight: 700;
64
+
65
+ --rls-heading5-font-size: 14rem;
66
+ --rls-heading5-letter-spacing: -2%;
67
+ --rls-heading5-line-height: 20rem;
68
+ --rls-heading5-font-weight: 600;
69
+
70
+ --rls-heading6-font-size: 12rem;
71
+ --rls-heading6-letter-spacing: -2%;
72
+ --rls-heading6-line-height: 16rem;
73
+ --rls-heading6-font-weight: 600;
74
+
75
+ --rls-title-font-size: 9.5rem;
76
+ --rls-title-letter-spacing: -1%;
77
+ --rls-title-line-height: 11rem;
78
+ --rls-title-font-weight: 600;
79
+
80
+ --rls-subtitle-font-size: 8.75rem;
81
+ --rls-subtitle-letter-spacing: -1%;
82
+ --rls-subtitle-line-height: 10.5rem;
83
+ --rls-subtitle-font-weight: 500;
84
+
85
+ --rls-body-font-size: 8rem;
86
+ --rls-body-letter-spacing: -1%;
87
+ --rls-body-line-height: 9.5rem;
88
+ --rls-body-font-weight: 400;
89
+
90
+ --rls-input-font-size: 7.65rem;
91
+ --rls-input-letter-spacing: -1%;
92
+ --rls-input-line-height: 8.125rem;
93
+ --rls-input-font-weight: 500;
94
+
95
+ --rls-paragraph-font-size: 7.325rem;
96
+ --rls-paragraph-letter-spacing: -1%;
97
+ --rls-paragraph-line-height: 8.5rem;
98
+ --rls-paragraph-font-weight: 400;
99
+
100
+ --rls-button-font-size: 7.5rem;
101
+ --rls-button-letter-spacing: -1%;
102
+ --rls-button-line-height: 9rem;
103
+ --rls-button-font-weight: 600;
104
+
105
+ --rls-label-font-size: 7rem;
106
+ --rls-label-letter-spacing: -1%;
107
+ --rls-label-line-height: 8.25rem;
108
+ --rls-label-font-weight: 500;
109
+
110
+ --rls-span-font-size: 6.5rem;
111
+ --rls-span-letter-spacing: -1%;
112
+ --rls-span-line-height: 8rem;
113
+ --rls-span-font-weight: 400;
114
+
115
+ --rls-smalltext-font-size: 6.125rem;
116
+ --rls-smalltext-letter-spacing: -1%;
117
+ --rls-smalltext-line-height: 7.5rem;
118
+ --rls-smalltext-font-weight: 500;
119
+
120
+ --rls-caption-font-size: 5.575rem;
121
+ --rls-caption-letter-spacing: -1%;
122
+ --rls-caption-line-height: 6.75rem;
123
+ --rls-caption-font-weight: 400;
124
+
125
+ --rls-overline-font-size: 5.125rem;
126
+ --rls-overline-letter-spacing: -1%;
127
+ --rls-overline-line-height: 6.25rem;
128
+ --rls-overline-font-weight: 500;
129
+
130
+ --rls-tiny-font-size: 4.5rem;
131
+ --rls-tiny-letter-spacing: -1%;
132
+ --rls-tiny-line-height: 5.25rem;
133
+ --rls-tiny-font-weight: 400;
134
+ }
135
+
136
+ h1 {
137
+ font-size: var(--rls-heading1-font-size);
138
+ letter-spacing: var(--rls-heading1-letter-spacing);
139
+ min-height: var(--rls-heading1-line-height);
140
+ line-height: var(--rls-heading1-line-height);
141
+ font-weight: var(--rls-heading1-font-weight);
142
+ }
143
+
144
+ h2 {
145
+ font-size: var(--rls-heading2-font-size);
146
+ letter-spacing: var(--rls-heading2-letter-spacing);
147
+ min-height: var(--rls-heading2-line-height);
148
+ line-height: var(--rls-heading2-line-height);
149
+ font-weight: var(--rls-heading2-font-weight);
150
+ }
151
+
152
+ h3 {
153
+ font-size: var(--rls-heading3-font-size);
154
+ letter-spacing: var(--rls-heading3-letter-spacing);
155
+ min-height: var(--rls-heading3-line-height);
156
+ line-height: var(--rls-heading3-line-height);
157
+ }
158
+
159
+ h4 {
160
+ font-size: var(--rls-heading4-font-size);
161
+ letter-spacing: var(--rls-heading4-letter-spacing);
162
+ min-height: var(--rls-heading4-line-height);
163
+ line-height: var(--rls-heading4-line-height);
164
+ font-weight: var(--rls-heading4-font-weight);
165
+ }
166
+
167
+ h5 {
168
+ font-size: var(--rls-heading5-font-size);
169
+ letter-spacing: var(--rls-heading5-letter-spacing);
170
+ min-height: var(--rls-heading5-line-height);
171
+ line-height: var(--rls-heading5-line-height);
172
+ font-weight: var(--rls-heading5-font-weight);
173
+ }
174
+
175
+ h6 {
176
+ font-size: var(--rls-heading6-font-size);
177
+ letter-spacing: var(--rls-heading6-letter-spacing);
178
+ min-height: var(--rls-heading6-line-height);
179
+ line-height: var(--rls-heading6-line-height);
180
+ font-weight: var(--rls-heading6-font-weight);
181
+ }
182
+
183
+ button {
184
+ font-size: var(--rls-button-font-size);
185
+ letter-spacing: var(--rls-button-letter-spacing);
186
+ min-height: var(--rls-button-line-height);
187
+ line-height: var(--rls-button-line-height);
188
+ font-weight: var(--rls-button-font-weight);
189
+ }
190
+
191
+ @include typographic('h1', 'heading1');
192
+ @include typographic('h2', 'heading2');
193
+ @include typographic('h3', 'heading3');
194
+ @include typographic('h4', 'heading4');
195
+ @include typographic('h5', 'heading5');
196
+ @include typographic('h6', 'heading6');
197
+ @include typographic('title', 'title');
198
+ @include typographic('subtitle', 'subtitle');
199
+ @include typographic('body', 'body');
200
+ @include typographic('input', 'input');
201
+ @include typographic('button', 'button');
202
+ @include typographic('paragraph', 'paragraph');
203
+ @include typographic('label', 'label');
204
+ @include typographic('span', 'span');
205
+ @include typographic('smalltext', 'smalltext');
206
+ @include typographic('caption', 'caption');
207
+ @include typographic('overline', 'overline');
208
+ @include typographic('tiny', 'tiny');