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