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/.old/objects/_dialog.scss          | 152 ++++++++++++++++++
 src_old/.old/objects/_icon-nav.scss        |  20 +++
 src_old/.old/objects/_list-group.scss      |  61 ++++++++
 src_old/.old/objects/_message.scss         |  51 ++++++
 src_old/.old/objects/_overflow-button.scss | 243 +++++++++++++++++++++++++++++
 5 files changed, 527 insertions(+)
 create mode 100644 src_old/.old/objects/_dialog.scss
 create mode 100644 src_old/.old/objects/_icon-nav.scss
 create mode 100644 src_old/.old/objects/_list-group.scss
 create mode 100644 src_old/.old/objects/_message.scss
 create mode 100644 src_old/.old/objects/_overflow-button.scss

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

diff --git a/src_old/.old/objects/_dialog.scss b/src_old/.old/objects/_dialog.scss
new file mode 100644
index 0000000..9333ce6
--- /dev/null
+++ b/src_old/.old/objects/_dialog.scss
@@ -0,0 +1,152 @@
+@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/.old/objects/_icon-nav.scss b/src_old/.old/objects/_icon-nav.scss
new file mode 100644
index 0000000..d1c6539
--- /dev/null
+++ b/src_old/.old/objects/_icon-nav.scss
@@ -0,0 +1,20 @@
+@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/.old/objects/_list-group.scss b/src_old/.old/objects/_list-group.scss
new file mode 100644
index 0000000..a346828
--- /dev/null
+++ b/src_old/.old/objects/_list-group.scss
@@ -0,0 +1,61 @@
+@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/.old/objects/_message.scss b/src_old/.old/objects/_message.scss
new file mode 100644
index 0000000..283ce26
--- /dev/null
+++ b/src_old/.old/objects/_message.scss
@@ -0,0 +1,51 @@
+@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/.old/objects/_overflow-button.scss b/src_old/.old/objects/_overflow-button.scss
new file mode 100644
index 0000000..b15ea1f
--- /dev/null
+++ b/src_old/.old/objects/_overflow-button.scss
@@ -0,0 +1,243 @@
+@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