Refactoring

1 files changed, 203 insertions, 0 deletions

diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
new file mode 100644
index 0000000..7d96206
--- /dev/null
+++ b/src/objects/_divider.scss
@@ -0,0 +1,203 @@
+@use 'sass:map';
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+@use '../config';
+
+$static-themes: 'black' 'white' !default;
+
+@include iro.props-namespace('divider') {
+    @include iro.props-store((
+        --dims: (
+            --margin-b: fn.global-dim(--size --85),
+    
+            --strong: (
+                --border:          fn.global-dim(--border --thick),
+                --label-font-size: fn.global-dim(--font-size --100),
+            ),
+            --medium: (
+                --border:          fn.global-dim(--border --medium),
+                --label-font-size: fn.global-dim(--font-size --75),
+            ),
+            --faint: (
+                --border:          fn.global-dim(--border --thin),
+                --label-font-size: fn.global-dim(--font-size --50),
+            ),
+        ),
+        --colors: (
+            --strong: (
+                --bg:    fn.global-color(--text),
+                --label: fn.global-color(--text),
+            ),
+            --medium: (
+                --bg:    fn.global-color(--border),
+                --label: fn.global-color(--text-mute),
+            ),
+            --faint: (
+                --bg:    fn.global-color(--border),
+                --label: fn.global-color(--text-mute-more),
+            ),
+        ),
+    ));
+
+    @each $color in map.keys(map.get(config.$themes, config.$theme-default, --palettes)) {
+        @if $color != '--base' {
+            @include iro.props-store((
+                --colors: (
+                    $color: (
+                        --bg:    fn.global-color($color --800),
+                        --label: fn.global-color($color --1000),
+                    )
+                ),
+            ));
+        }
+    }
+
+    @each $theme in $static-themes {
+        @include iro.props-store((
+            --colors: (
+                --static-#{$theme}: (
+                    --strong: (
+                        --bg:    fn.global-color(--#{$theme}-transparent --800),
+                        --label: fn.global-color(--#{$theme}-transparent --900),
+                    ),
+                    --medium: (
+                        --bg:    fn.global-color(--#{$theme}-transparent --300),
+                        --label: fn.global-color(--#{$theme}-transparent --500),
+                    ),
+                    --faint: (
+                        --bg:    fn.global-color(--#{$theme}-transparent --300),
+                        --label: fn.global-color(--#{$theme}-transparent --500),
+                    ),
+                )
+            ),
+        ));
+    }
+
+    @include iro.bem-object(iro.props-namespace()) {
+        display:        flex;
+        flex:           0 0 auto;
+        flex-direction: row;
+        align-items:    center;
+        block-size:     1em;
+        margin-block:   fn.dim(--margin-b);
+        font-size:      fn.dim(--strong --label-font-size);
+        font-weight:    700;
+        line-height:    1;
+        color:          fn.color(--strong --label);
+        text-transform: uppercase;
+        letter-spacing: .5px;
+
+        &::before,
+        &::after {
+            flex:             1 1 auto;
+            inline-size:      100%;
+            block-size:       fn.dim(--strong --border);
+            content:          '';
+            background-color: fn.color(--strong --bg);
+        }
+
+        &::before {
+            display: block;
+        }
+
+        @include iro.bem-elem('label') {
+            flex: 0 0 auto;
+        }
+
+        @include iro.bem-modifier('vertical') {
+            align-self:       stretch;
+            inline-size:      1px;
+            block-size:       auto;
+            margin-block:     0;
+            background-color: fn.color(--faint --bg);
+
+            &::before,
+            &::after {
+                display: none;
+            }
+        }
+
+        @include iro.bem-modifier('medium') {
+            font-size:   fn.dim(--medium --label-font-size);
+            font-weight: 500;
+            color:       fn.color(--medium --label);
+
+            &::before,
+            &::after {
+                block-size:       fn.dim(--medium --border);
+                background-color: fn.color(--medium --bg);
+            }
+        }
+
+        @include iro.bem-modifier('faint') {
+            font-size:   fn.dim(--faint --label-font-size);
+            font-weight: 500;
+            color:       fn.color(--faint --label);
+
+            &::before,
+            &::after {
+                block-size:       fn.dim(--faint --border);
+                background-color: fn.color(--faint --bg);
+            }
+        }
+
+        @include iro.bem-modifier('labelled') {
+            &::before {
+                margin-inline-end: 1em;
+            }
+
+            &::after {
+                display:             block;
+                margin-inline-start: 1em;
+            }
+        }
+
+        @each $color in 'blue' 'purple' 'red' 'green' 'yellow' {
+            @include iro.bem-modifier($color) {
+                &::before,
+                &::after {
+                    background-color: fn.color(--#{$color} --bg);
+                }
+
+                @include iro.bem-elem('label') {
+                    color: fn.color(--#{$color} --label);
+                }
+            }
+        }
+
+        @each $theme in $static-themes {
+            @include iro.bem-modifier(static-#{$theme}) {
+                &::before,
+                &::after {
+                    background-color: fn.color(--static-#{$theme} --strong --bg);
+                }
+
+                @include iro.bem-elem('label') {
+                    color: fn.color(--static-#{$theme} --strong --label);
+                }
+
+                @include iro.bem-modifier('medium') {
+                    &::before,
+                    &::after {
+                        background-color: fn.color(--static-#{$theme} --medium --bg);
+                    }
+    
+                    @include iro.bem-elem('label') {
+                        color: fn.color(--static-#{$theme} --medium --label);
+                    }
+                }
+    
+                @include iro.bem-modifier('faint') {
+                    &::before,
+                    &::after {
+                        background-color: fn.color(--static-#{$theme} --faint --bg);
+                    }
+    
+                    @include iro.bem-elem('label') {
+                        color: fn.color(--static-#{$theme} --faint --label);
+                    }
+                }
+            }
+        }
+    }
+}