From 50f6acc739f24bfa2ca080d08e90d82f8fa83543 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Thu, 17 Oct 2024 16:45:00 +0200
Subject: Revamped variable management

---
 src/.old/objects/_dialog.scss          | 152 ---------------------
 src/.old/objects/_icon-nav.scss        |  20 ---
 src/.old/objects/_list-group.scss      |  61 ---------
 src/.old/objects/_message.scss         |  51 -------
 src/.old/objects/_overflow-button.scss | 243 ---------------------------------
 5 files changed, 527 deletions(-)
 delete mode 100644 src/.old/objects/_dialog.scss
 delete mode 100644 src/.old/objects/_icon-nav.scss
 delete mode 100644 src/.old/objects/_list-group.scss
 delete mode 100644 src/.old/objects/_message.scss
 delete mode 100644 src/.old/objects/_overflow-button.scss

(limited to 'src/.old/objects')

diff --git a/src/.old/objects/_dialog.scss b/src/.old/objects/_dialog.scss
deleted file mode 100644
index 9333ce6..0000000
--- a/src/.old/objects/_dialog.scss
+++ /dev/null
@@ -1,152 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('dialog') {
-    @include iro.props-store((
-        --dims: (
-            --width-sm: iro.fn-px-to-rem(500px),
-            --width-md: iro.fn-px-to-rem(800px),
-            --width-lg: iro.fn-px-to-rem(1100px),
-            --rounding: 4px,
-            --border:   1px,
-
-            --header: (
-                --pad-x: fn.global-dim(--size --75),
-                --pad-y: fn.global-dim(--size --75),
-            ),
-
-            --sidebar: (
-                --pad-x: fn.global-dim(--size --75),
-                --pad-y: fn.global-dim(--size --75),
-            ),
-
-            --body: (
-                --pad-x: fn.global-dim(--size --200),
-                --pad-y: fn.global-dim(--size --200),
-            )
-        ),
-    ), 'dims');
-
-    @include iro.props-store((
-        --dims: (
-            --pad-x: fn.global-dim(--size --300),
-            --pad-y: fn.global-dim(--size --300),
-        ),
-    ), 'md');
-
-    @include iro.props-store((
-        --colors: (
-            --border: fn.global-color(--border --stable),
-        ),
-    ), 'colors');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:               grid;
-        grid-template-rows:    auto auto 1fr auto auto;
-        grid-template-columns: auto 1fr;
-        grid-template-areas:
-            'sidebar-header header'
-            'sidebar        top'
-            'sidebar        body'
-            'sidebar        bottom'
-            'sidebar        footer';
-        position:              relative;
-        box-sizing:            border-box;
-        flex:                  0 0 auto;
-        width:                 100%;
-        max-width:             fn.dim(--width-md);
-        margin:                0 auto;
-        overflow:              hidden;
-        border-radius:         fn.dim(--rounding);
-        background-clip:       padding-box;
-        background-color:      fn.global-color(--bg);
-        color:                 fn.global-color(--fg);
-
-        @include iro.bem-modifier('sm') {
-            max-width: fn.dim(--width-sm);
-        }
-
-        @include iro.bem-modifier('lg') {
-            max-width: fn.dim(--width-lg);
-        }
-
-        @include iro.bem-elem('header') {
-            grid-area: sidebar-header / sidebar-header / header / header;
-            padding:   fn.dim(--header --pad-y) fn.dim(--header --pad-x);
-
-            @include iro.bem-modifier('sidebar') {
-                grid-area:    sidebar-header;
-                border-right: 1px solid fn.color(--border);
-    
-                @include iro.bem-sibling-elem('header') {
-                    grid-area: header;
-                }
-            }
-        }
-
-        @include iro.bem-elem('title') {
-            margin-top:    0;
-            padding-right: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x));
-            padding-left:  calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x));
-        }
-
-        @include iro.bem-elem('close-btn') {
-            margin-left: auto;
-        }
-
-        @include iro.bem-elem('sidebar') {
-            grid-area:    sidebar;
-            padding:      fn.dim(--sidebar --pad-y) fn.dim(--sidebar --pad-x);
-            overflow:     auto;
-            border-right: 1px solid fn.color(--border);
-        }
-
-        @include iro.bem-elem('top') {
-            grid-area: top;
-            min-width: 0;
-            padding:   fn.dim(--body --pad-y) fn.dim(--body --pad-x);
-
-            @include iro.bem-sibling-elem('body') {
-                padding-top: 0;
-            }
-        }
-
-        @include iro.bem-elem('bottom') {
-            grid-area: bottom;
-            min-width: 0;
-            padding:   fn.dim(--body --pad-y) fn.dim(--body --pad-x);
-
-            @include iro.bem-sibling-elem('body') {
-                padding-bottom: 0;
-            }
-        }
-
-        @include iro.bem-elem('body') {
-            grid-area:  body;
-            min-width:  0;
-            min-height: 0;
-            padding:    fn.dim(--body --pad-y) fn.dim(--body --pad-x);
-        }
-
-        @include iro.bem-elem('footer') {
-            grid-area:       footer;
-            justify-content: flex-end;
-            padding:         fn.dim(--body --pad-y) fn.dim(--body --pad-x);
-        }
-
-        @include iro.bem-modifier('scrollable') {
-            flex-shrink: 1;
-
-            @include iro.bem-elem('body') {
-                overflow:        auto;
-                scrollbar-color: fn.global-color(--obj-lo) transparent;
-            }
-        }
-
-        @include iro.bem-modifier('flat') {
-            @include iro.bem-elem('body') {
-                padding-top: 0;
-            }
-        }
-    }
-}
diff --git a/src/.old/objects/_icon-nav.scss b/src/.old/objects/_icon-nav.scss
deleted file mode 100644
index d1c6539..0000000
--- a/src/.old/objects/_icon-nav.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('icon-nav') {
-    @include iro.props-store((
-        --dims: (
-            --spacing: fn.global-dim(--size --100),
-        )
-    ), 'dims');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:     flex;
-        align-items: center;
-        gap:         fn.dim(--spacing);
-
-        @include iro.bem-modifier('vertical') {
-            flex-direction: column;
-        }
-    }
-}
diff --git a/src/.old/objects/_list-group.scss b/src/.old/objects/_list-group.scss
deleted file mode 100644
index a346828..0000000
--- a/src/.old/objects/_list-group.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('list-group') {
-    @include iro.props-store((
-        --dims: (
-            --pad-i:    fn.global-dim(--size --175),
-            --pad-b:    fn.global-dim(--size --125),
-            --rounding: fn.global-dim(--rounding),
-            --border:   fn.global-dim(--border --thin),
-        ),
-        --colors: (
-            --bg:     fn.global-color(--base --75),
-            --border: fn.global-color(--border),
-            --hover:  fn.global-color(--border-mute),
-            --active: fn.global-color(--border),
-        )
-    ));
-
-    @include iro.bem-object(iro.props-namespace()) {
-        border:           fn.dim(--border) solid fn.color(--border);
-        border-radius:    fn.dim(--rounding);
-        background-color: fn.color(--bg);
-
-        @include iro.bem-elem('item') {
-            padding-block:  fn.dim(--pad-b);
-            padding-inline: fn.dim(--pad-i);
-
-            @include iro.bem-next-twin-elem {
-                border-width:             0;
-                border-block-start-width: fn.dim(--border);
-                border-style:             solid;
-                border-color:             fn.color(--border);
-            }
-
-            @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
-                &:hover,
-                &:focus-visible {
-                    background-color: fn.color(--hover);
-                }
-
-                &:active {
-                    background-color: fn.color(--active);
-                }
-            }
-        }
-
-        @include iro.bem-modifier('horizontal') {
-            display: flex;
-
-            @include iro.bem-elem('item') {
-                flex: 1 0 auto;
-
-                @include iro.bem-next-twin-elem {
-                    border-block-start-width:  0;
-                    border-inline-start-width: fn.dim(--border);
-                }
-            }
-        }
-    }
-}
diff --git a/src/.old/objects/_message.scss b/src/.old/objects/_message.scss
deleted file mode 100644
index 283ce26..0000000
--- a/src/.old/objects/_message.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('message') {
-    @include iro.props-store((
-        --dims: (
-            --bubble: (
-                --pad-x:    fn.global-dim(--size --200),
-                --pad-y:    fn.global-dim(--size --150),
-                --rounding: 0,
-
-                --75: (
-                    --pad-x: fn.global-dim(--size --150),
-                    --pad-y: fn.global-dim(--size --85),
-                ),
-            ),
-        )
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --highlight: fn.global-color(--fg-lo),
-        ),
-    ), 'colors');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        @include iro.bem-elem('suffix') {
-            margin-left: 1em;
-            float:       right;
-        }
-        
-        @include iro.bem-modifier('bubble') {
-            padding:          fn.dim(--bubble --pad-y) fn.dim(--bubble --pad-x);
-            border-radius:    fn.dim(--bubble --rounding);
-            background-color: fn.global-color(--bg);
-            color:            fn.global-color(--fg);
-        
-            @include iro.bem-elem('suffix') {
-                transform: translate(.2em, .2em);
-            }
-
-            @include iro.bem-modifier('highlight') {
-                box-shadow: -3px 0 0 0 fn.color(--highlight);
-            }
-        
-            @include iro.bem-modifier('75') {
-                padding: fn.dim(--bubble --75 --pad-y) fn.dim(--bubble --75 --pad-x);
-            }
-        }
-    }
-}
diff --git a/src/.old/objects/_overflow-button.scss b/src/.old/objects/_overflow-button.scss
deleted file mode 100644
index b15ea1f..0000000
--- a/src/.old/objects/_overflow-button.scss
+++ /dev/null
@@ -1,243 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('overflow-button') {
-    @include iro.props-store((
-        --dims: (
-            --pad-x:   calc(fn.global-dim(--size --125) - 1px),
-            --pad-y:   calc(fn.global-dim(--size --125) - 1px),
-            --spacing: fn.global-dim(--size --50)
-        ),
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --label:  fn.global-color(--fg),
-    
-            --hover: (
-                --bg:    fn.global-color(--obj-hi),
-                --label: fn.global-color(--fg-lo),
-            ),
-            --active: (
-                --bg:    fn.global-color(--obj),
-                --label: fn.global-color(--fg-lo),
-            ),
-            --selected: (
-                --bg:    fn.global-color(--obj-hi),
-                --label: fn.global-color(--fg),
-
-                --hover: (
-                    --bg:    fn.global-color(--obj),
-                    --label: fn.global-color(--fg-lo),
-                ),
-            ),
-            --disabled: (
-                --label: fn.global-color(--fg-hi3),
-            ),
-            --key-focus: (
-                --border: fn.global-color(--focus --fill),
-                --shadow: fn.global-color(--focus --shadow),
-            ),
-
-            --red: (
-                --hover: (
-                    --bg:    fn.global-color(--red --quiet --bg),
-                    --label: fn.global-color(--red --quiet --fg),
-                ),
-                --active: (
-                    --bg:    fn.global-color(--red --quiet --obj),
-                    --label: fn.global-color(--red --quiet --fg-lo),
-                ),
-
-                --selected: (
-                    --bg:    fn.global-color(--red --quiet --bg),
-                    --label: fn.global-color(--red --quiet --fg),
-    
-                    --hover: (
-                        --bg:    fn.global-color(--red --quiet --obj),
-                        --label: fn.global-color(--red --quiet --fg-lo),
-                    ),
-                ),
-            ),
-
-            --blue: (
-                --hover: (
-                    --bg:    fn.global-color(--blue --quiet --bg),
-                    --label: fn.global-color(--blue --quiet --fg),
-                ),
-                --active: (
-                    --bg:    fn.global-color(--blue --quiet --obj),
-                    --label: fn.global-color(--blue --quiet --fg-lo),
-                ),
-
-                --selected: (
-                    --bg:    fn.global-color(--blue --quiet --bg),
-                    --label: fn.global-color(--blue --quiet --fg),
-    
-                    --hover: (
-                        --bg:    fn.global-color(--blue --quiet --obj),
-                        --label: fn.global-color(--blue --quiet --fg-lo),
-                    ),
-                ),
-            ),
-
-            --green: (
-                --hover: (
-                    --bg:    fn.global-color(--green --quiet --bg),
-                    --label: fn.global-color(--green --quiet --fg),
-                ),
-                --active: (
-                    --bg:    fn.global-color(--green --quiet --obj),
-                    --label: fn.global-color(--green --quiet --fg-lo),
-                ),
-
-                --selected: (
-                    --bg:    fn.global-color(--green --quiet --bg),
-                    --label: fn.global-color(--green --quiet --fg),
-    
-                    --hover: (
-                        --bg:    fn.global-color(--green --quiet --obj),
-                        --label: fn.global-color(--green --quiet --fg-lo),
-                    ),
-                ),
-            )
-        ),
-    ), 'colors');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display: inline-block;
-        color:   fn.color(--disabled --label);
-
-        @include iro.bem-elem('outside') {
-            display:      inline-block;
-            margin-right: fn.dim(--spacing);
-        }
-
-        @include iro.bem-elem('inside') {
-            display:         inline-block;
-            padding:         fn.dim(--pad-y) fn.dim(--pad-x);
-            border:          2px solid transparent;
-            border-radius:   100em;
-            line-height:     1;
-            text-align:      center;
-            text-decoration: none;
-            text-overflow:   ellipsis;
-            white-space:     nowrap;
-
-            @include iro.bem-next-elem('outside') {
-                margin-right: 0;
-                margin-left:  fn.dim(--spacing);
-            }
-        }
-
-        &:link,
-        &:visited,
-        &:enabled {
-            color: fn.color(--label);
-
-            &:hover {
-                @include iro.bem-elem('inside') {
-                    background-color: fn.color(--hover --bg);
-                    color:            fn.color(--hover --label);
-                }
-            }
-    
-            &:active {
-                @include iro.bem-elem('inside') {
-                    background-color: fn.color(--active --bg);
-                    color:            fn.color(--active --label);
-                }
-            }
-    
-            @include iro.bem-at-theme('keyboard') {
-                &:focus {
-                    @include iro.bem-elem('inside') {
-                        background-color: fn.color(--hover --bg);
-                        color:            fn.color(--hover --label);
-                    }
-                }
-            }
-        }
-    
-        @include iro.bem-is('selected') {
-            @include iro.bem-elem('inside') {
-                background-color: fn.color(--selected --bg);    
-            }
-        
-            &:link,
-            &:visited,
-            &:enabled {
-                @include iro.bem-elem('inside') {
-                    color: fn.color(--selected --label);        
-                }
-            
-                &:hover,
-                &:active {
-                    @include iro.bem-elem('inside') {
-                        background-color: fn.color(--selected --hover --bg);
-                        color:            fn.color(--selected --hover --label);
-                    }
-                }
-    
-                @include iro.bem-at-theme('keyboard') {
-                    &:focus {
-                        @include iro.bem-elem('inside') {
-                            background-color: fn.color(--selected --bg);
-                            color:            fn.color(--selected --hover --label);
-                        }
-                    }
-                }
-            }
-        }
-
-        @each $color in 'red' 'blue' 'green' {
-            @include iro.bem-modifier($color) {
-                &:link,
-                &:visited,
-                &:enabled {
-                    &:hover {
-                        @include iro.bem-elem('inside') {
-                            background-color: fn.color(--#{$color} --hover --bg);
-                            color:            fn.color(--#{$color} --hover --label);
-                        }
-                    }
-            
-                    &:active {
-                        @include iro.bem-elem('inside') {
-                            background-color: fn.color(--#{$color} --active --bg);
-                            color:            fn.color(--#{$color} --active --label);
-                        }
-                    }
-                }
-        
-                @include iro.bem-is('selected') {
-                    &:link,
-                    &:visited,
-                    &:enabled {
-                        @include iro.bem-elem('inside') {
-                            background-color: fn.color(--#{$color} --selected --bg);
-                            color:            fn.color(--#{$color} --selected --label);
-                        }
-    
-                        &:hover,
-                        &:active {
-                            @include iro.bem-elem('inside') {
-                                background-color: fn.color(--#{$color} --selected --hover --bg);
-                                color:            fn.color(--#{$color} --selected --hover --label);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    
-        @include iro.bem-at-theme('keyboard') {
-            &:focus {
-                @include iro.bem-elem('inside') {
-                    border-color: fn.color(--key-focus --border);
-                    box-shadow:   fn.color(--key-focus --shadow);
-                }
-            }
-        }
-    }
-}
-- 
cgit v1.2.3-70-g09d2