@matteusan/himig 1.7.4 → 1.8.1

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 (30) hide show
  1. package/.yarn/cache/{@matteusan-pintig-npm-1.8.0-fbcf4469f0-f83672ea90.zip → @matteusan-pintig-npm-1.9.0-c7e5b3fb64-9c9493bbb5.zip} +0 -0
  2. package/.yarn/install-state.gz +0 -0
  3. package/_index.scss +126 -106
  4. package/_init-font-pack.scss +1 -1
  5. package/ms-badge/_badge-styles.scss +12 -10
  6. package/ms-button/_button-base.scss +1 -1
  7. package/ms-button/_button-mixins.scss +16 -23
  8. package/ms-button/_button-styles.scss +121 -117
  9. package/ms-button/_button-theme.scss +2 -2
  10. package/ms-card/_card-base.scss +180 -138
  11. package/ms-card/_card-styles.scss +48 -29
  12. package/ms-card/_card-theme.scss +13 -8
  13. package/ms-form-field/_form-field-base.scss +4 -4
  14. package/ms-form-field/_form-field-styles.scss +75 -136
  15. package/ms-form-field/_form-field-theme.scss +7 -7
  16. package/ms-link/_link-styles.scss +29 -27
  17. package/ms-link/_link-theme.scss +3 -3
  18. package/ms-list/_list-base.scss +1 -1
  19. package/ms-list/_list-styles.scss +36 -34
  20. package/ms-select-field/_select-field-base.scss +5 -4
  21. package/ms-select-field/_select-field-styles.scss +85 -118
  22. package/ms-select-field/_select-field-theme.scss +7 -7
  23. package/ms-tick-field/_tick-field-base.scss +2 -2
  24. package/ms-tick-field/_tick-field-styles.scss +58 -56
  25. package/ms-tick-field/_tick-field-theme.scss +6 -6
  26. package/ms-utils/_color-utils.scss +37 -35
  27. package/ms-utils/_layout-utils.scss +154 -152
  28. package/ms-utils/_struct-utils.scss +150 -148
  29. package/ms-utils/_typography-utils.scss +100 -72
  30. package/package.json +29 -5
package/ms-utils/_layout-utils.scss CHANGED
@@ -58,238 +58,240 @@ $_gaps: (
58
58
  'gap',
59
59
  ), $include, $exclude);
60
60
 
61
- @if list.index($utils-to-render, 'display') {
62
- @each $display in $_displays {
63
- .#{$display} {
64
- display: string.unquote($display);
65
- }
61
+ @layer utils {
62
+ @if list.index($utils-to-render, 'display') {
63
+ @each $display in $_displays {
64
+ .#{$display} {
65
+ display: string.unquote($display);
66
+ }
66
67
 
67
- @each $breakpoint in $_breakpoints {
68
- .\@#{$breakpoint}\:#{$display} {
69
- @include pintig.breakpoint-create($breakpoint) {
70
- display: string.unquote($display) !important;
68
+ @each $breakpoint in $_breakpoints {
69
+ .\@#{$breakpoint}\:#{$display} {
70
+ @include pintig.breakpoint-create($breakpoint) {
71
+ display: string.unquote($display) !important;
72
+ }
71
73
  }
72
74
  }
73
75
  }
74
76
  }
75
- }
76
77
 
77
- @if list.index($utils-to-render, 'position') {
78
- @each $position in $_positions {
79
- .#{$position} {
80
- position: string.unquote($position);
81
- }
78
+ @if list.index($utils-to-render, 'position') {
79
+ @each $position in $_positions {
80
+ .#{$position} {
81
+ position: string.unquote($position);
82
+ }
82
83
 
83
- @each $breakpoint in $_breakpoints {
84
- .\@#{$breakpoint}\:#{$position} {
85
- @include pintig.breakpoint-create($breakpoint) {
86
- position: string.unquote($position) !important;
84
+ @each $breakpoint in $_breakpoints {
85
+ .\@#{$breakpoint}\:#{$position} {
86
+ @include pintig.breakpoint-create($breakpoint) {
87
+ position: string.unquote($position) !important;
88
+ }
87
89
  }
88
90
  }
89
91
  }
90
92
  }
91
- }
92
93
 
93
- @if list.index($utils-to-render, 'flow') {
94
- @each $flow in $_flows {
95
- .flow-#{$flow} {
96
- flex-flow: string.unquote($flow);
97
- }
94
+ @if list.index($utils-to-render, 'flow') {
95
+ @each $flow in $_flows {
96
+ .flow-#{$flow} {
97
+ flex-flow: string.unquote($flow);
98
+ }
98
99
 
99
- @each $breakpoint in $_breakpoints {
100
- .\@#{$breakpoint}\:flow-#{$flow} {
101
- @include pintig.breakpoint-create($breakpoint) {
102
- flex-flow: string.unquote($flow) !important;
100
+ @each $breakpoint in $_breakpoints {
101
+ .\@#{$breakpoint}\:flow-#{$flow} {
102
+ @include pintig.breakpoint-create($breakpoint) {
103
+ flex-flow: string.unquote($flow) !important;
104
+ }
103
105
  }
104
106
  }
105
107
  }
106
108
  }
107
- }
108
-
109
- @if list.index($utils-to-render, 'wrap') {
110
- @each $wrap, $value in $_wraps {
111
- @if $wrap == 'default' {
112
- .wrap {
113
- flex-wrap: string.unquote($value);
114
- }
115
- } @else {
116
- .wrap-#{$wrap} {
117
- flex-wrap: string.unquote($value);
118
- }
119
- }
120
109
 
121
- @each $breakpoint in $_breakpoints {
110
+ @if list.index($utils-to-render, 'wrap') {
111
+ @each $wrap, $value in $_wraps {
122
112
  @if $wrap == 'default' {
123
- .\@#{$breakpoint}\:wrap {
124
- @include pintig.breakpoint-create($breakpoint) {
125
- flex-wrap: string.unquote($value) !important;
126
- }
113
+ .wrap {
114
+ flex-wrap: string.unquote($value);
127
115
  }
128
116
  } @else {
129
- .\@#{$breakpoint}\:wrap-#{$wrap} {
130
- @include pintig.breakpoint-create($breakpoint) {
131
- flex-wrap: string.unquote($value) !important;
117
+ .wrap-#{$wrap} {
118
+ flex-wrap: string.unquote($value);
119
+ }
120
+ }
121
+
122
+ @each $breakpoint in $_breakpoints {
123
+ @if $wrap == 'default' {
124
+ .\@#{$breakpoint}\:wrap {
125
+ @include pintig.breakpoint-create($breakpoint) {
126
+ flex-wrap: string.unquote($value) !important;
127
+ }
128
+ }
129
+ } @else {
130
+ .\@#{$breakpoint}\:wrap-#{$wrap} {
131
+ @include pintig.breakpoint-create($breakpoint) {
132
+ flex-wrap: string.unquote($value) !important;
133
+ }
132
134
  }
133
135
  }
134
136
  }
135
137
  }
136
138
  }
137
- }
138
139
 
139
- @each $alignment, $alignment-val in $_alignments {
140
- @if list.index($utils-to-render, 'jc') {
141
- .jc-#{$alignment} {
142
- justify-content: string.unquote($alignment-val);
143
- }
140
+ @each $alignment, $alignment-val in $_alignments {
141
+ @if list.index($utils-to-render, 'jc') {
142
+ .jc-#{$alignment} {
143
+ justify-content: string.unquote($alignment-val);
144
+ }
144
145
 
145
- @each $breakpoint in $_breakpoints {
146
- .\@#{$breakpoint}\:jc-#{$alignment} {
147
- @include pintig.breakpoint-create($breakpoint) {
148
- justify-content: string.unquote($alignment-val) !important;
146
+ @each $breakpoint in $_breakpoints {
147
+ .\@#{$breakpoint}\:jc-#{$alignment} {
148
+ @include pintig.breakpoint-create($breakpoint) {
149
+ justify-content: string.unquote($alignment-val) !important;
150
+ }
149
151
  }
150
152
  }
151
153
  }
152
- }
153
154
 
154
- @if list.index($utils-to-render, 'ji') {
155
- .ji-#{$alignment} {
156
- justify-items: string.unquote($alignment);
157
- }
155
+ @if list.index($utils-to-render, 'ji') {
156
+ .ji-#{$alignment} {
157
+ justify-items: string.unquote($alignment);
158
+ }
158
159
 
159
- @each $breakpoint in $_breakpoints {
160
- .\@#{$breakpoint}\:ji-#{$alignment} {
161
- @include pintig.breakpoint-create($breakpoint) {
162
- justify-items: string.unquote($alignment) !important;
160
+ @each $breakpoint in $_breakpoints {
161
+ .\@#{$breakpoint}\:ji-#{$alignment} {
162
+ @include pintig.breakpoint-create($breakpoint) {
163
+ justify-items: string.unquote($alignment) !important;
164
+ }
163
165
  }
164
166
  }
165
167
  }
166
- }
167
168
 
168
- @if list.index($utils-to-render, 'ac') {
169
- .ac-#{$alignment} {
170
- align-content: string.unquote($alignment);
171
- }
169
+ @if list.index($utils-to-render, 'ac') {
170
+ .ac-#{$alignment} {
171
+ align-content: string.unquote($alignment);
172
+ }
172
173
 
173
- @each $breakpoint in $_breakpoints {
174
- .\@#{$breakpoint}\:ac-#{$alignment} {
175
- @include pintig.breakpoint-create($breakpoint) {
176
- align-content: string.unquote($alignment) !important;
174
+ @each $breakpoint in $_breakpoints {
175
+ .\@#{$breakpoint}\:ac-#{$alignment} {
176
+ @include pintig.breakpoint-create($breakpoint) {
177
+ align-content: string.unquote($alignment) !important;
178
+ }
177
179
  }
178
180
  }
179
181
  }
180
- }
181
182
 
182
- @if list.index($utils-to-render, 'ai') {
183
- .ai-#{$alignment} {
184
- align-items: string.unquote($alignment);
185
- }
183
+ @if list.index($utils-to-render, 'ai') {
184
+ .ai-#{$alignment} {
185
+ align-items: string.unquote($alignment);
186
+ }
186
187
 
187
- @each $breakpoint in $_breakpoints {
188
- .\@#{$breakpoint}\:ai-#{$alignment} {
189
- @include pintig.breakpoint-create($breakpoint) {
190
- align-items: string.unquote($alignment) !important;
188
+ @each $breakpoint in $_breakpoints {
189
+ .\@#{$breakpoint}\:ai-#{$alignment} {
190
+ @include pintig.breakpoint-create($breakpoint) {
191
+ align-items: string.unquote($alignment) !important;
192
+ }
191
193
  }
192
194
  }
193
195
  }
194
- }
195
196
 
196
- @if list.index($utils-to-render, 'pc') {
197
- .pc-#{$alignment} {
198
- place-content: string.unquote($alignment);
199
- }
197
+ @if list.index($utils-to-render, 'pc') {
198
+ .pc-#{$alignment} {
199
+ place-content: string.unquote($alignment);
200
+ }
200
201
 
201
- @each $breakpoint in $_breakpoints {
202
- .\@#{$breakpoint}\:pc-#{$alignment} {
203
- @include pintig.breakpoint-create($breakpoint) {
204
- place-content: string.unquote($alignment) !important;
202
+ @each $breakpoint in $_breakpoints {
203
+ .\@#{$breakpoint}\:pc-#{$alignment} {
204
+ @include pintig.breakpoint-create($breakpoint) {
205
+ place-content: string.unquote($alignment) !important;
206
+ }
205
207
  }
206
208
  }
207
209
  }
208
- }
209
210
 
210
- @if list.index($utils-to-render, 'pi') {
211
- .pi-#{$alignment} {
212
- place-items: string.unquote($alignment);
213
- }
211
+ @if list.index($utils-to-render, 'pi') {
212
+ .pi-#{$alignment} {
213
+ place-items: string.unquote($alignment);
214
+ }
214
215
 
215
- @each $breakpoint in $_breakpoints {
216
- .\@#{$breakpoint}\:pi-#{$alignment} {
217
- @include pintig.breakpoint-create($breakpoint) {
218
- place-items: string.unquote($alignment) !important;
216
+ @each $breakpoint in $_breakpoints {
217
+ .\@#{$breakpoint}\:pi-#{$alignment} {
218
+ @include pintig.breakpoint-create($breakpoint) {
219
+ place-items: string.unquote($alignment) !important;
220
+ }
219
221
  }
220
222
  }
221
223
  }
222
224
  }
223
- }
224
225
 
225
- @for $i from 1 through $_max-columns {
226
- @if list.index($utils-to-render, 'cols') {
227
- .cols-#{$i} {
228
- grid-template-columns: repeat($i, 1fr);
229
- }
226
+ @for $i from 1 through $_max-columns {
227
+ @if list.index($utils-to-render, 'cols') {
228
+ .cols-#{$i} {
229
+ grid-template-columns: repeat($i, 1fr);
230
+ }
230
231
 
231
- @each $breakpoint in $_breakpoints {
232
- .\@#{$breakpoint}\:cols-#{$i} {
233
- @include pintig.breakpoint-create($breakpoint) {
234
- grid-template-columns: repeat($i, 1fr) !important;
232
+ @each $breakpoint in $_breakpoints {
233
+ .\@#{$breakpoint}\:cols-#{$i} {
234
+ @include pintig.breakpoint-create($breakpoint) {
235
+ grid-template-columns: repeat($i, 1fr) !important;
236
+ }
235
237
  }
236
238
  }
237
239
  }
238
- }
239
240
 
240
- @if list.index($utils-to-render, 'rows') {
241
- .rows-#{$i} {
242
- grid-template-rows: repeat($i, 1fr);
243
- }
241
+ @if list.index($utils-to-render, 'rows') {
242
+ .rows-#{$i} {
243
+ grid-template-rows: repeat($i, 1fr);
244
+ }
244
245
 
245
- @each $breakpoint in $_breakpoints {
246
- .\@#{$breakpoint}\:rows-#{$i} {
247
- @include pintig.breakpoint-create($breakpoint) {
248
- grid-template-rows: repeat($i, 1fr) !important;
246
+ @each $breakpoint in $_breakpoints {
247
+ .\@#{$breakpoint}\:rows-#{$i} {
248
+ @include pintig.breakpoint-create($breakpoint) {
249
+ grid-template-rows: repeat($i, 1fr) !important;
250
+ }
249
251
  }
250
252
  }
251
253
  }
252
- }
253
254
 
254
- @if list.index($utils-to-render, 'start') {
255
- .start-#{$i} {
256
- grid-column-start: $i;
257
- }
255
+ @if list.index($utils-to-render, 'start') {
256
+ .start-#{$i} {
257
+ grid-column-start: $i;
258
+ }
258
259
 
259
- @each $breakpoint in $_breakpoints {
260
- .\@#{$breakpoint}\:start-#{$i} {
261
- @include pintig.breakpoint-create($breakpoint) {
262
- grid-column-start: $i !important;
260
+ @each $breakpoint in $_breakpoints {
261
+ .\@#{$breakpoint}\:start-#{$i} {
262
+ @include pintig.breakpoint-create($breakpoint) {
263
+ grid-column-start: $i !important;
264
+ }
263
265
  }
264
266
  }
265
267
  }
266
- }
267
268
 
268
- @if list.index($utils-to-render, 'end') {
269
- .end-#{$i} {
270
- grid-column-end: $i + 1;
271
- }
269
+ @if list.index($utils-to-render, 'end') {
270
+ .end-#{$i} {
271
+ grid-column-end: $i + 1;
272
+ }
272
273
 
273
- @each $breakpoint in $_breakpoints {
274
- .\@#{$breakpoint}\:end-#{$i} {
275
- @include pintig.breakpoint-create($breakpoint) {
276
- grid-column-end: $i + 1 !important;
274
+ @each $breakpoint in $_breakpoints {
275
+ .\@#{$breakpoint}\:end-#{$i} {
276
+ @include pintig.breakpoint-create($breakpoint) {
277
+ grid-column-end: $i + 1 !important;
278
+ }
277
279
  }
278
280
  }
279
281
  }
280
282
  }
281
- }
282
283
 
283
- @if list.index($utils-to-render, 'gap') {
284
- @each $gap in $_gaps {
285
- .gap-#{$gap} {
286
- gap: pintig.primitive-token-get('gap.#{$gap}');
287
- }
284
+ @if list.index($utils-to-render, 'gap') {
285
+ @each $gap in $_gaps {
286
+ .gap-#{$gap} {
287
+ gap: pintig.primitive-token-get('gap.#{$gap}');
288
+ }
288
289
 
289
- @each $breakpoint in $_breakpoints {
290
- .\@#{$breakpoint}\:gap-#{$gap} {
291
- @include pintig.breakpoint-create($breakpoint) {
292
- gap: pintig.primitive-token-get('gap.#{$gap}') !important;
290
+ @each $breakpoint in $_breakpoints {
291
+ .\@#{$breakpoint}\:gap-#{$gap} {
292
+ @include pintig.breakpoint-create($breakpoint) {
293
+ gap: pintig.primitive-token-get('gap.#{$gap}') !important;
294
+ }
293
295
  }
294
296
  }
295
297
  }