Update

1 files changed, 251 insertions, 0 deletions

diff --git a/src/_utils.scss b/src/_utils.scss
new file mode 100644
index 0000000..fdec622
--- /dev/null
+++ b/src/_utils.scss
@@ -0,0 +1,251 @@
+@use 'sass:map';
+@use 'iro-sass/src/iro-sass' as iro;
+@use 'include-media/dist/include-media' as media;
+@use 'props';
+
+@use 'core.vars' as vars;
+@forward 'core.vars';
+
+/* stylelint-disable-next-line scss/dollar-variable-pattern */
+$-dirs: (
+    '': '',
+    'bs': '-block-start',
+    'be': '-block-end',
+    'b':  '-block',
+    'is': '-inline-start',
+    'ie': '-inline-end',
+    'i':  '-inline',
+) !default;
+
+/* stylelint-disable-next-line scss/dollar-variable-pattern */
+$-sizes: (
+    0: vars.$size--0,
+    10: vars.$size--10,
+    50: vars.$size--50,
+    75: vars.$size--75,
+    100: vars.$size--100,
+    125: vars.$size--125,
+    200: vars.$size--200,
+    400: vars.$size--400,
+    700: vars.$size--700,
+    800: vars.$size--800,
+) !default;
+
+@mixin styles {
+    @include iro.bem-utility('d-block') {
+        display: block;
+    }
+
+    @include iro.bem-utility('d-inline-block') {
+        display: inline-block;
+    }
+
+    @include iro.bem-utility('d-contents') {
+        display: contents;
+    }
+
+    @include iro.bem-utility('td-none') {
+        text-decoration: none;
+    }
+
+    @include iro.bem-utility('d-none') {
+        display: none;
+
+        @each $breakpoint in map.keys(media.$breakpoints) {
+            @include media.media('<=#{$breakpoint}') {
+                @include iro.bem-suffix('#{$breakpoint}-lo') {
+                    display: none;
+                }
+            }
+
+            @include media.media('>#{$breakpoint}') {
+                @include iro.bem-suffix('#{$breakpoint}-hi') {
+                    display: none;
+                }
+            }
+        }
+
+        @include iro.bem-at-theme('js') {
+            @include iro.bem-suffix('js') {
+                display: none;
+            }
+        }
+
+        @include iro.bem-at-theme('no-js') {
+            @include iro.bem-suffix('no-js') {
+                display: none;
+            }
+        }
+
+        @include iro.bem-suffix('empty') {
+            &:empty {
+                display: none;
+            }
+        }
+    }
+
+    @include iro.bem-utility('ta-start') {
+        text-align: start;
+    }
+
+    @include iro.bem-utility('ta-end') {
+        text-align: end;
+    }
+
+    @include iro.bem-utility('ta-center') {
+        text-align: center;
+    }
+
+    @include iro.bem-utility('fw-normal') {
+        font-weight: normal;
+    }
+
+    @include iro.bem-utility('ai-center') {
+        align-items: center;
+    }
+
+    @include iro.bem-utility('ai-start') {
+        align-items: flex-start;
+    }
+
+    @include iro.bem-utility('ai-end') {
+        align-items: flex-end;
+    }
+
+    @include iro.bem-utility('jc-center') {
+        justify-content: center;
+    }
+
+    @include iro.bem-utility('jc-start') {
+        justify-content: flex-start;
+    }
+
+    @include iro.bem-utility('jc-end') {
+        justify-content: flex-end;
+    }
+
+    @include iro.bem-utility('c-heading') {
+        color: props.get(vars.$theme, --heading);
+    }
+
+    @include iro.bem-utility('c-text') {
+        color: props.get(vars.$theme, --text);
+    }
+
+    @include iro.bem-utility('c-mute') {
+        color: props.get(vars.$theme, --text-mute);
+    }
+
+    @include iro.bem-utility('c-mute-more') {
+        color: props.get(vars.$theme, --text-mute-more);
+    }
+
+    @each $dir, $prop in (is: inline-size, bs: block-size) {
+        @include iro.bem-utility('#{$dir}-100') {
+            #{$prop}: 100%;
+        }
+        
+        @include iro.bem-utility('#{$dir}-75') {
+            #{$prop}: 75%;
+        }
+        
+        @include iro.bem-utility('#{$dir}-50') {
+            #{$prop}: 50%;
+        }
+        
+        @include iro.bem-utility('#{$dir}-25') {
+            #{$prop}: 25%;
+        }
+        
+        @include iro.bem-utility('#{$dir}-1px') {
+            #{$prop}: 1px;
+        }
+        
+        @include iro.bem-utility('#{$dir}-0') {
+            #{$prop}: 0;
+        }
+    }
+
+    @include iro.bem-utility('elp') {
+        overflow:      hidden;
+        text-overflow: ellipsis;
+        white-space:   nowrap;
+    }
+
+    @include iro.bem-utility('p-static') {
+        position: static;
+    }
+
+    @include iro.bem-utility('p-relative') {
+        position: relative;
+    }
+
+    @include iro.bem-utility('p-fixed') {
+        position: fixed;
+    }
+
+    @include iro.bem-utility('p-sticky-bs') {
+        position:          sticky;
+        inset-block-start: 0;
+    }
+
+    @each $dir, $suffix in $-dirs {
+        @include iro.bem-utility('m#{$dir}-auto') {
+            margin#{$suffix}: auto;
+        }
+        
+        @include iro.bem-utility('p#{$dir}-auto') {
+            padding#{$suffix}: auto;
+        }
+
+        @each $mod, $size in $-sizes {
+            @include iro.bem-utility('m#{$dir}-#{$mod}') {
+                margin#{$suffix}: props.get($size);
+            }
+            
+            @include iro.bem-utility('p#{$dir}-#{$mod}') {
+                padding#{$suffix}: props.get($size);
+            }
+        }
+        
+        @include iro.bem-utility('b#{$dir}-0') {
+            border#{$suffix}: 0;
+
+            @include iro.bem-suffix('light') {
+                @media (prefers-color-scheme: light) {
+                    border#{$suffix}: 0;
+                }
+            }
+        
+            @include iro.bem-suffix('dark') {
+                @media (prefers-color-scheme: dark) {
+                    border#{$suffix}: 0;
+                }
+            }
+        }
+        
+        @include iro.bem-utility('b#{$dir}-1') {
+            border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
+
+            @include iro.bem-suffix('light') {
+                @media (prefers-color-scheme: light) {
+                    border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
+                }
+            }
+        
+            @include iro.bem-suffix('dark') {
+                @media (prefers-color-scheme: dark) {
+                    border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
+                }
+            }
+        }
+    }
+
+    @include iro.bem-utility('mbs-neutralize') {
+        &::before {
+            display:       block;
+            margin-block:  -100em 100em;
+            content:       '';
+        }
+    }
+}