Refactoring

1 files changed, 222 insertions, 0 deletions

diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
new file mode 100644
index 0000000..fa903b1
--- /dev/null
+++ b/src/objects/_switch.scss
@@ -0,0 +1,222 @@
+@use 'iro-sass/src/iro-sass' as iro;
+@use '../functions' as fn;
+
+@include iro.props-namespace('switch') {
+    @include iro.props-store((
+        --dims: (
+            --width:           fn.global-dim(--size --350),
+            --height:          fn.global-dim(--size --200),
+            --label-gap:       fn.global-dim(--size --125),
+            --border:          fn.global-dim(--border --medium),
+            --pad-i:           fn.global-dim(--size --65),
+            --pad-b:           fn.global-dim(--size --65),
+            --rounding:        fn.global-dim(--rounding),
+            --spacing-sibling: fn.global-dim(--size --300),
+
+            --key-focus: (
+                --border:        fn.global-dim(--key-focus --border),
+                --border-offset: fn.global-dim(--key-focus --border-offset),
+                --outline:       fn.global-dim(--key-focus --outline),
+            ),
+        ),
+        --colors: (
+            --track-bg:      fn.global-color(--border),
+            --handle-border: fn.global-color(--text-mute-more),
+            --handle-bg:     fn.global-color(--base --50),
+    
+            --hover: (
+                --label:         fn.global-color(--heading),
+                --handle-border: fn.global-color(--text-mute),
+            ),
+            --accent: (
+                --handle-border: fn.global-color(--accent --900),
+    
+                --hover: (
+                    --handle-border: fn.global-color(--accent --1000),
+                ),
+            ),
+            --disabled: (
+                --label:         fn.global-color(--text-disabled),
+                --track-bg:      fn.global-color(--border),
+                --handle-border: fn.global-color(--border-strong),
+                --handle-bg:     fn.global-color(--base --50),
+            ),
+            --key-focus: (
+                --label:   fn.global-color(--focus --text),
+                --border:  fn.global-color(--focus --border),
+                --outline: fn.global-color(--focus --outline),
+            ),
+        ),
+    ));
+
+    @include iro.bem-object(iro.props-namespace()) {
+        position:       relative;
+        display:        inline-block;
+        padding-block:  fn.dim(--pad-b);
+        padding-inline: fn.dim(--pad-i);
+        margin-inline:
+            calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset))
+            calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset));
+    
+        @include iro.bem-elem('indicator') {
+            display:            inline-block;
+            flex:               0 0 auto;
+            inline-size:        fn.dim(--width);
+            block-size:         fn.dim(--height);
+            margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--height) - fn.dim(--key-focus --border-offset));
+            vertical-align:     top;
+            background-color:   fn.color(--track-bg);
+            background-clip:    padding-box;
+            border:             fn.dim(--key-focus --border-offset) solid transparent;
+            border-radius:      2em;
+            transition:         background-color .2s ease;
+    
+            &::after {
+                display:          block;
+                inline-size:      calc(fn.dim(--height) - 2 * fn.dim(--border));
+                block-size:       calc(fn.dim(--height) - 2 * fn.dim(--border));
+                content:          '';
+                background-color: fn.color(--handle-bg);
+                border:           fn.dim(--border) solid fn.color(--handle-border);
+                border-radius:    fn.dim(--width);
+                transition:       transform .2s ease;
+            }
+        }
+    
+        @include iro.bem-elem('label') {
+            margin-inline-start: fn.dim(--label-gap);
+        }
+    
+        @include iro.bem-elem('native') {
+            position:           absolute;
+            inset-block-start:  0;
+            inset-inline-start: 0;
+            z-index:            -1;
+            inline-size:        100%;
+            block-size:         100%;
+            padding:            0;
+            margin:             0;
+            overflow:           hidden;
+            appearance:         none;
+            border-radius:      fn.dim(--rounding);
+    
+            &:hover,
+            &:focus-visible {
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--hover --label);
+                }
+    
+                @include iro.bem-sibling-elem('indicator') {
+                    &::after {
+                        border-color: fn.color(--hover --handle-border);
+                    }
+                }
+            }
+    
+            &:checked {
+                @include iro.bem-sibling-elem('indicator') {
+                    background-color: fn.color(--handle-border);
+    
+                    &::after {
+                        border-color: fn.color(--handle-border);
+                        transform:    translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0);
+                    }
+                }
+    
+                &:hover,
+                &:focus-visible {
+                    @include iro.bem-sibling-elem('indicator') {
+                        background-color: fn.color(--hover --handle-border);
+
+                        &::after {
+                            border-color: fn.color(--hover --handle-border);
+                        }
+                    }
+                }
+            }
+    
+            &:disabled {
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--disabled --label);
+                }
+    
+                @include iro.bem-sibling-elem('indicator') {
+                    background-color: fn.color(--disabled --track-bg);
+    
+                    &::after {
+                        background-color: fn.color(--disabled --handle-bg);
+                        border-color:     fn.color(--disabled --handle-border);
+                    }
+                }
+    
+                &:checked {
+                    @include iro.bem-sibling-elem('indicator') {
+                        background-color: fn.color(--disabled --handle-border);
+    
+                        &::after {
+                            border-color: fn.color(--disabled --handle-border);
+                        }
+                    }
+                }
+            }
+    
+            &:focus-visible {
+                @include iro.bem-sibling-elem('label') {
+                    color: fn.color(--key-focus --label);
+                }
+
+                @include iro.bem-sibling-elem('indicator') {
+                    outline:    fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+                    box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+                }
+            }
+        }
+    
+        @include iro.bem-modifier('standalone') {
+            @include iro.bem-elem('indicator') {
+                margin-block-start: 0;
+            }
+        }
+    
+        @include iro.bem-modifier('accent') {
+            @include iro.bem-elem('native') {
+                &:checked {
+                    @include iro.bem-sibling-elem('indicator') {
+                        background-color: fn.color(--accent --handle-border);
+        
+                        &::after {
+                            border-color: fn.color(--accent --handle-border);
+                        }
+                    }
+        
+                    &:hover,
+                    &:focus-visible {
+                        @include iro.bem-sibling-elem('indicator') {
+                            background-color: fn.color(--accent --hover --handle-border);
+    
+                            &::after {
+                                border-color: fn.color(--accent --hover --handle-border);
+                            }
+                        }
+                    }
+                }
+        
+                &:disabled {
+                    @include iro.bem-sibling-elem('label') {
+                        color: fn.color(--disabled --label);
+                    }
+
+                    &:checked {
+                        @include iro.bem-sibling-elem('indicator') {
+                            background-color: fn.color(--disabled --handle-border);
+
+                            &::after {
+                                border-color: fn.color(--disabled --handle-border);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}