summaryrefslogtreecommitdiffstats
path: root/src/_utils.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/_utils.scss')
-rw-r--r--src/_utils.scss236
1 files changed, 121 insertions, 115 deletions
diff --git a/src/_utils.scss b/src/_utils.scss
index dd8e8bb..be2faab 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -1,27 +1,27 @@
1@use 'sass:map'; 1@use "sass:map";
2@use 'sass:string'; 2@use "sass:string";
3@use 'pkg:iro-sass/src/bem'; 3@use "pkg:iro-sass/bem";
4@use 'pkg:iro-sass/src/props'; 4@use "pkg:iro-sass/props";
5@use 'pkg:include-media/dist/include-media' as media; 5@use "pkg:include-media/dist/include-media" as media;
6 6
7@use 'core.vars' as vars; 7@use "core.vars" as vars;
8@forward 'core.vars'; 8@forward "core.vars";
9 9
10/* stylelint-disable-next-line scss/dollar-variable-pattern */ 10/* stylelint-disable-next-line scss/dollar-variable-pattern */
11$-dirs: ( 11$-dirs: (
12 '': '', 12 "": "",
13 'b': '-block', 13 "b": "-block",
14 'bs': '-block-start', 14 "bs": "-block-start",
15 'be': '-block-end', 15 "be": "-block-end",
16 'i': '-inline', 16 "i": "-inline",
17 'is': '-inline-start', 17 "is": "-inline-start",
18 'ie': '-inline-end', 18 "ie": "-inline-end",
19) !default; 19) !default;
20 20
21$-axes: ( 21$-axes: (
22 '': '', 22 "": "",
23 'r': 'row-', 23 "r": "row-",
24 'c': 'column-', 24 "c": "column-",
25) !default; 25) !default;
26 26
27/* stylelint-disable-next-line scss/dollar-variable-pattern */ 27/* stylelint-disable-next-line scss/dollar-variable-pattern */
@@ -48,145 +48,145 @@ $-font-sizes: (
48) !default; 48) !default;
49 49
50$-aspect-ratios: ( 50$-aspect-ratios: (
51 '1\\/1': '1 / 1', 51 "1\\/1": "1 / 1",
52 '4\\/3': '4 / 3', 52 "4\\/3": "4 / 3",
53 '5\\/4': '5 / 4', 53 "5\\/4": "5 / 4",
54) !default; 54) !default;
55 55
56@mixin styles { 56@mixin styles {
57 @include bem.utility('d-block') { 57 @include bem.utility("d-block") {
58 display: block; 58 display: block;
59 } 59 }
60 60
61 @include bem.utility('d-inline-block') { 61 @include bem.utility("d-inline-block") {
62 display: inline-block; 62 display: inline-block;
63 } 63 }
64 64
65 @include bem.utility('d-inline') { 65 @include bem.utility("d-inline") {
66 display: inline; 66 display: inline;
67 } 67 }
68 68
69 @include bem.utility('d-contents') { 69 @include bem.utility("d-contents") {
70 display: contents; 70 display: contents;
71 } 71 }
72 72
73 @include bem.utility('d-flex') { 73 @include bem.utility("d-flex") {
74 display: flex; 74 display: flex;
75 } 75 }
76 76
77 @include bem.utility('td-none') { 77 @include bem.utility("td-none") {
78 text-decoration: none; 78 text-decoration: none;
79 } 79 }
80 80
81 @include bem.utility('d-none') { 81 @include bem.utility("d-none") {
82 display: none; 82 display: none;
83 83
84 @each $breakpoint in map.keys(media.$breakpoints) { 84 @each $breakpoint in map.keys(media.$breakpoints) {
85 @include media.media('<=#{$breakpoint}') { 85 @include media.media("<=#{$breakpoint}") {
86 @include bem.suffix('#{$breakpoint}-lo') { 86 @include bem.suffix("#{$breakpoint}-lo") {
87 display: none; 87 display: none;
88 } 88 }
89 } 89 }
90 90
91 @include media.media('>#{$breakpoint}') { 91 @include media.media(">#{$breakpoint}") {
92 @include bem.suffix('#{$breakpoint}-hi') { 92 @include bem.suffix("#{$breakpoint}-hi") {
93 display: none; 93 display: none;
94 } 94 }
95 } 95 }
96 } 96 }
97 97
98 @include bem.at-theme('js') { 98 @include bem.at-theme("js") {
99 @include bem.suffix('js') { 99 @include bem.suffix("js") {
100 display: none; 100 display: none;
101 } 101 }
102 } 102 }
103 103
104 @include bem.at-theme('no-js') { 104 @include bem.at-theme("no-js") {
105 @include bem.suffix('no-js') { 105 @include bem.suffix("no-js") {
106 display: none; 106 display: none;
107 } 107 }
108 } 108 }
109 109
110 @include bem.suffix('empty') { 110 @include bem.suffix("empty") {
111 &:empty { 111 &:empty {
112 display: none; 112 display: none;
113 } 113 }
114 } 114 }
115 } 115 }
116 116
117 @include bem.utility('va-top') { 117 @include bem.utility("va-top") {
118 vertical-align: top; 118 vertical-align: top;
119 } 119 }
120 120
121 @include bem.utility('va-baseline') { 121 @include bem.utility("va-baseline") {
122 vertical-align: baseline; 122 vertical-align: baseline;
123 } 123 }
124 124
125 @include bem.utility('va-middle') { 125 @include bem.utility("va-middle") {
126 vertical-align: middle; 126 vertical-align: middle;
127 } 127 }
128 128
129 @include bem.utility('va-bottom') { 129 @include bem.utility("va-bottom") {
130 vertical-align: bottom; 130 vertical-align: bottom;
131 } 131 }
132 132
133 @include bem.utility('ta-start') { 133 @include bem.utility("ta-start") {
134 text-align: start; 134 text-align: start;
135 } 135 }
136 136
137 @include bem.utility('ta-end') { 137 @include bem.utility("ta-end") {
138 text-align: end; 138 text-align: end;
139 } 139 }
140 140
141 @include bem.utility('ta-center') { 141 @include bem.utility("ta-center") {
142 text-align: center; 142 text-align: center;
143 } 143 }
144 144
145 @include bem.utility('fw-normal') { 145 @include bem.utility("fw-normal") {
146 font-weight: normal; 146 font-weight: normal;
147 } 147 }
148 148
149 @include bem.utility('ai-center') { 149 @include bem.utility("ai-center") {
150 align-items: center; 150 align-items: center;
151 } 151 }
152 152
153 @include bem.utility('ai-start') { 153 @include bem.utility("ai-start") {
154 align-items: flex-start; 154 align-items: flex-start;
155 } 155 }
156 156
157 @include bem.utility('ai-end') { 157 @include bem.utility("ai-end") {
158 align-items: flex-end; 158 align-items: flex-end;
159 } 159 }
160 160
161 @include bem.utility('ai-stretch') { 161 @include bem.utility("ai-stretch") {
162 align-items: stretch; 162 align-items: stretch;
163 } 163 }
164 164
165 @include bem.utility('ac-center') { 165 @include bem.utility("ac-center") {
166 align-content: center; 166 align-content: center;
167 } 167 }
168 168
169 @include bem.utility('jc-center') { 169 @include bem.utility("jc-center") {
170 justify-content: center; 170 justify-content: center;
171 } 171 }
172 172
173 @include bem.utility('jc-start') { 173 @include bem.utility("jc-start") {
174 justify-content: flex-start; 174 justify-content: flex-start;
175 } 175 }
176 176
177 @include bem.utility('jc-end') { 177 @include bem.utility("jc-end") {
178 justify-content: flex-end; 178 justify-content: flex-end;
179 } 179 }
180 180
181 @include bem.utility('tt-upper') { 181 @include bem.utility("tt-upper") {
182 text-transform: uppercase; 182 text-transform: uppercase;
183 } 183 }
184 184
185 @include bem.utility('tt-lower') { 185 @include bem.utility("tt-lower") {
186 text-transform: lowercase; 186 text-transform: lowercase;
187 } 187 }
188 188
189 @include bem.utility('c-heading') { 189 @include bem.utility("c-heading") {
190 color: props.get(vars.$theme, --heading); 190 color: props.get(vars.$theme, --heading);
191 191
192 @each $theme in map.keys(props.get(vars.$transparent-colors)) { 192 @each $theme in map.keys(props.get(vars.$transparent-colors)) {
@@ -198,7 +198,7 @@ $-aspect-ratios: (
198 } 198 }
199 } 199 }
200 200
201 @include bem.utility('c-text') { 201 @include bem.utility("c-text") {
202 color: props.get(vars.$theme, --text); 202 color: props.get(vars.$theme, --text);
203 203
204 @each $theme in map.keys(props.get(vars.$transparent-colors)) { 204 @each $theme in map.keys(props.get(vars.$transparent-colors)) {
@@ -210,7 +210,7 @@ $-aspect-ratios: (
210 } 210 }
211 } 211 }
212 212
213 @include bem.utility('c-mute') { 213 @include bem.utility("c-mute") {
214 color: props.get(vars.$theme, --text-mute); 214 color: props.get(vars.$theme, --text-mute);
215 215
216 @each $theme in map.keys(props.get(vars.$transparent-colors)) { 216 @each $theme in map.keys(props.get(vars.$transparent-colors)) {
@@ -222,7 +222,7 @@ $-aspect-ratios: (
222 } 222 }
223 } 223 }
224 224
225 @include bem.utility('c-mute-more') { 225 @include bem.utility("c-mute-more") {
226 color: props.get(vars.$theme, --text-mute-more); 226 color: props.get(vars.$theme, --text-mute-more);
227 227
228 @each $theme in map.keys(props.get(vars.$transparent-colors)) { 228 @each $theme in map.keys(props.get(vars.$transparent-colors)) {
@@ -235,189 +235,195 @@ $-aspect-ratios: (
235 } 235 }
236 236
237 @each $mod, $size in $-font-sizes { 237 @each $mod, $size in $-font-sizes {
238 @include bem.utility('fs-#{$mod}') { 238 @include bem.utility("fs-#{$mod}") {
239 font-size: props.get($size); 239 font-size: props.get($size);
240 } 240 }
241 } 241 }
242 242
243 @each $dir, $prop in (is: inline-size, bs: block-size) { 243 @each $dir, $prop in (is: inline-size, bs: block-size) {
244 @include bem.utility('#{$dir}-100') { 244 @include bem.utility("#{$dir}-100") {
245 #{$prop}: 100%; 245 #{$prop}: 100%;
246 } 246 }
247 247
248 @include bem.utility('#{$dir}-75') { 248 @include bem.utility("#{$dir}-75") {
249 #{$prop}: 75%; 249 #{$prop}: 75%;
250 } 250 }
251 251
252 @include bem.utility('#{$dir}-50') { 252 @include bem.utility("#{$dir}-50") {
253 #{$prop}: 50%; 253 #{$prop}: 50%;
254 } 254 }
255 255
256 @include bem.utility('#{$dir}-25') { 256 @include bem.utility("#{$dir}-25") {
257 #{$prop}: 25%; 257 #{$prop}: 25%;
258 } 258 }
259 259
260 @include bem.utility('#{$dir}-1px') { 260 @include bem.utility("#{$dir}-1px") {
261 #{$prop}: 1px; 261 #{$prop}: 1px;
262 } 262 }
263 263
264 @include bem.utility('#{$dir}-0') { 264 @include bem.utility("#{$dir}-0") {
265 #{$prop}: 0; 265 #{$prop}: 0;
266 } 266 }
267 } 267 }
268 268
269 @include bem.utility('elp') { 269 @include bem.utility("elp") {
270 overflow: hidden; 270 overflow: hidden;
271 text-overflow: ellipsis; 271 text-overflow: ellipsis;
272 white-space: nowrap; 272 white-space: nowrap;
273 } 273 }
274 274
275 @include bem.utility('hyph') { 275 @include bem.utility("hyph") {
276 hyphens: auto; 276 hyphens: auto;
277 hyphenate-limit-chars: auto; 277 hyphenate-limit-chars: auto;
278 } 278 }
279 279
280 @include bem.utility('tw-balance') { 280 @include bem.utility("tw-balance") {
281 text-wrap-style: balance; 281 text-wrap-style: balance;
282 } 282 }
283 283
284 @include bem.utility('o-auto') { 284 @include bem.utility("o-auto") {
285 overflow: auto; 285 overflow: auto;
286 } 286 }
287 287
288 @include bem.utility('o-hidden') { 288 @include bem.utility("o-hidden") {
289 overflow: hidden; 289 overflow: hidden;
290 } 290 }
291 291
292 @include bem.utility('p-static') { 292 @include bem.utility("p-static") {
293 position: static; 293 position: static;
294 } 294 }
295 295
296 @include bem.utility('p-relative') { 296 @include bem.utility("p-relative") {
297 position: relative; 297 position: relative;
298 } 298 }
299 299
300 @include bem.utility('p-fixed') { 300 @include bem.utility("p-fixed") {
301 position: fixed; 301 position: fixed;
302 } 302 }
303 303
304 @include bem.utility('p-sticky-bs') { 304 @include bem.utility("p-sticky-bs") {
305 position: sticky; 305 position: sticky;
306 inset-block-start: props.get(vars.$sticky-top-offset); 306 inset-block-start: props.get(vars.$sticky-top-offset);
307 } 307 }
308 308
309 @include bem.utility('p-sticky-be') { 309 @include bem.utility("p-sticky-be") {
310 position: sticky; 310 position: sticky;
311 inset-block-end: 0; 311 inset-block-end: 0;
312 } 312 }
313 313
314 @include bem.utility('br-round') { 314 @include bem.utility("br-round") {
315 border-radius: props.get(vars.$rounding); 315 border-radius: props.get(vars.$rounding);
316 } 316 }
317 317
318 @include bem.utility('br-round-sm') { 318 @include bem.utility("br-round-sm") {
319 border-radius: props.get(vars.$rounding--sm); 319 border-radius: props.get(vars.$rounding--sm);
320 } 320 }
321 321
322 @each $dir, $prefix in $-axes { 322 @each $dir, $prefix in $-axes {
323 @each $mod, $size in $-sizes { 323 @each $mod, $size in $-sizes {
324 @include bem.utility('#{$dir}g-#{$mod}') { 324 @include bem.utility("#{$dir}g-#{$mod}") {
325 #{$prefix}gap: props.get($size); 325 #{$prefix}gap: props.get($size);
326 } 326 }
327 } 327 }
328 } 328 }
329 329
330 @each $dir, $suffix in $-dirs { 330 @each $dir, $suffix in $-dirs {
331 @include bem.utility('m#{$dir}-auto') { 331 @include bem.utility("m#{$dir}-auto") {
332 margin#{$suffix}: auto; 332 margin#{$suffix}: auto;
333 } 333 }
334 334
335 @include bem.utility('p#{$dir}-auto') { 335 @include bem.utility("p#{$dir}-auto") {
336 padding#{$suffix}: auto; 336 padding#{$suffix}: auto;
337 } 337 }
338 338
339 @each $mod, $size in $-sizes { 339 @each $mod, $size in $-sizes {
340 @include bem.utility('m#{$dir}-#{$mod}') { 340 @include bem.utility("m#{$dir}-#{$mod}") {
341 margin#{$suffix}: props.get($size); 341 margin#{$suffix}: props.get($size);
342 } 342 }
343 343
344 @include bem.utility('p#{$dir}-#{$mod}') { 344 @include bem.utility("p#{$dir}-#{$mod}") {
345 padding#{$suffix}: props.get($size); 345 padding#{$suffix}: props.get($size);
346 } 346 }
347 } 347 }
348 348
349 @include bem.utility('b#{$dir}-0') { 349 @include bem.utility("b#{$dir}-0") {
350 border#{$suffix}: 0; 350 border#{$suffix}: 0;
351 351
352 @include bem.suffix('light') { 352 @include bem.suffix("light") {
353 @media (prefers-color-scheme: light) { 353 @media (prefers-color-scheme: light) {
354 border#{$suffix}: 0; 354 border#{$suffix}: 0;
355 } 355 }
356 } 356 }
357 357
358 @include bem.suffix('dark') { 358 @include bem.suffix("dark") {
359 @media (prefers-color-scheme: dark) { 359 @media (prefers-color-scheme: dark) {
360 border#{$suffix}: 0; 360 border#{$suffix}: 0;
361 } 361 }
362 } 362 }
363 } 363 }
364 364
365 @include bem.utility('b#{$dir}-1') { 365 @include bem.utility("b#{$dir}-1") {
366 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); 366 border#{$suffix}: props.get(vars.$border-width--thin) solid
367 props.get(vars.$theme, --border);
367 368
368 @include bem.suffix('light') { 369 @include bem.suffix("light") {
369 @media (prefers-color-scheme: light) { 370 @media (prefers-color-scheme: light) {
370 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); 371 border#{$suffix}: props.get(vars.$border-width--thin) solid
372 props.get(vars.$theme, --border);
371 } 373 }
372 } 374 }
373 375
374 @include bem.suffix('dark') { 376 @include bem.suffix("dark") {
375 @media (prefers-color-scheme: dark) { 377 @media (prefers-color-scheme: dark) {
376 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); 378 border#{$suffix}: props.get(vars.$border-width--thin) solid
379 props.get(vars.$theme, --border);
377 } 380 }
378 } 381 }
379 } 382 }
380 383
381 @include bem.utility('b#{$dir}-1-mute') { 384 @include bem.utility("b#{$dir}-1-mute") {
382 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute); 385 border#{$suffix}: props.get(vars.$border-width--thin) solid
386 props.get(vars.$theme, --border-mute);
383 387
384 @include bem.suffix('light') { 388 @include bem.suffix("light") {
385 @media (prefers-color-scheme: light) { 389 @media (prefers-color-scheme: light) {
386 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute); 390 border#{$suffix}: props.get(vars.$border-width--thin) solid
391 props.get(vars.$theme, --border-mute);
387 } 392 }
388 } 393 }
389 394
390 @include bem.suffix('dark') { 395 @include bem.suffix("dark") {
391 @media (prefers-color-scheme: dark) { 396 @media (prefers-color-scheme: dark) {
392 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute); 397 border#{$suffix}: props.get(vars.$border-width--thin) solid
398 props.get(vars.$theme, --border-mute);
393 } 399 }
394 } 400 }
395 } 401 }
396 } 402 }
397 403
398 @include bem.utility('mbs-neutralize') { 404 @include bem.utility("mbs-neutralize") {
399 &::before { 405 &::before {
400 display: block; 406 display: block;
401 margin-block: -100em 100em; 407 margin-block: -100em 100em;
402 content: ''; 408 content: "";
403 } 409 }
404 } 410 }
405 411
406 @each $mod, $value in $-aspect-ratios { 412 @each $mod, $value in $-aspect-ratios {
407 @include bem.utility('ar-#{$mod}') { 413 @include bem.utility("ar-#{$mod}") {
408 aspect-ratio: string.unquote($value); 414 aspect-ratio: string.unquote($value);
409 } 415 }
410 } 416 }
411 417
412 @include bem.utility('sr-only') { 418 @include bem.utility("sr-only") {
413 position: absolute; 419 position: absolute;
414 width: 1px; 420 width: 1px;
415 height: 1px; 421 height: 1px;
416 padding: 0; 422 padding: 0;
417 margin: -1px; 423 margin: -1px;
418 overflow: hidden; 424 overflow: hidden;
419 white-space: nowrap; 425 white-space: nowrap;
420 border: 0; 426 border: 0;
421 clip-path: inset(50%); 427 clip-path: inset(50%);
422 } 428 }
423} 429}