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/objects/_badge.scss | 300 ------------------------------------------------
 1 file changed, 300 deletions(-)
 delete mode 100644 src/objects/_badge.scss

(limited to 'src/objects/_badge.scss')

diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
deleted file mode 100644
index 4e1662f..0000000
--- a/src/objects/_badge.scss
+++ /dev/null
@@ -1,300 +0,0 @@
-@use 'sass:string';
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-$sizes:         'sm' 'lg' 'xl' !default;
-$themes:        'accent' 'positive' 'negative' 'warning' !default;
-$static-themes: 'black' 'white' !default;
-
-@mixin theme($theme) {
-    background-color: fn.color(--#{$theme} --bg);
-    color:            fn.color(--#{$theme} --label);
-
-    &:link,
-    &:visited,
-    &:enabled {
-        &:hover,
-        &:focus-visible {
-            background-color: fn.color(--#{$theme} --hover --bg);
-            color:            fn.color(--#{$theme} --hover --label);
-        }
-
-        &:active {
-            background-color: fn.color(--#{$theme} --active --bg);
-            color:            fn.color(--#{$theme} --active --label);
-        }
-    }
-
-    @include iro.bem-modifier('quiet') {
-        background-color: fn.color(--#{$theme}-quiet --bg);
-        color:            fn.color(--#{$theme}-quiet --label);
-
-        &:link,
-        &:visited,
-        &:enabled {
-            &:hover,
-            &:focus-visible {
-                background-color: fn.color(--#{$theme}-quiet --hover --bg);
-                color:            fn.color(--#{$theme}-quiet --hover --label);
-            }
-
-            &:active {
-                background-color: fn.color(--#{$theme}-quiet --active --bg);
-                color:            fn.color(--#{$theme}-quiet --active --label);
-            }
-        }
-    }
-
-    @if string.slice($theme, 1, 7) == 'static-' {
-        &::after {
-            outline:    fn.color(--#{$theme} --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(--#{$theme} --key-focus --outline);
-        }
-    }
-}
-
-@include iro.props-namespace('badge') {
-    @include iro.props-store((
-        --dims: (
-            --pad-b:       fn.global-dim(--size --50),
-            --pad-i:       fn.global-dim(--size --100),
-            --pad-i-pill:  fn.global-dim(--size --150),
-            --pad-i-label: fn.global-dim(--size --50),
-            --rounding:    fn.global-dim(--rounding),
-            --font-size:   fn.global-dim(--font-size --75),
-
-            --sm: (
-                --pad-b:       fn.global-dim(--size --25),
-                --pad-i:       fn.global-dim(--size --75),
-                --pad-i-pill:  fn.global-dim(--size --125),
-                --pad-i-label: fn.global-dim(--size --25),
-                --font-size:   fn.global-dim(--font-size --50),
-            ),
-            --lg: (
-                --pad-b:       fn.global-dim(--size --75),
-                --pad-i:       fn.global-dim(--size --125),
-                --pad-i-pill:  fn.global-dim(--size --175),
-                --pad-i-label: fn.global-dim(--size --50),
-                --font-size:   fn.global-dim(--font-size --100),
-            ), 
-            --xl: ( 
-                --pad-b:       fn.global-dim(--size --100),
-                --pad-i:       fn.global-dim(--size --150),
-                --pad-i-pill:  fn.global-dim(--size --225),
-                --pad-i-label: fn.global-dim(--size --75),
-                --font-size:   fn.global-dim(--font-size --150),
-            ),
-            
-            --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: (
-            --bg:    fn.global-color(--text-mute),
-            --label: fn.global-color(--bg-l2),
-            --hover: (
-                --bg: fn.global-color(--text),
-            ),
-            --active: (
-                --bg: fn.global-color(--heading),
-            ),
-            --key-focus: (
-                --label:   fn.global-color(--focus --text),
-                --border:  fn.global-color(--focus --border),
-                --outline: fn.global-color(--focus --outline),
-            ),
-
-            --quiet: (
-                --bg:    fn.global-color(--border-mute),
-                --label: fn.global-color(--heading),
-                --hover: (
-                    --bg: fn.global-color(--border),
-                ),
-                --active: (
-                    --bg: fn.global-color(--border-strong),
-                ),
-            ),
-        ),
-    ));
-
-    @each $theme in $themes {
-        @include iro.props-store((
-            --colors: (
-                --#{$theme}: (
-                    --bg:    fn.global-color(--#{$theme}-static --900),
-                    --label: fn.global-color(--#{$theme}-static --900-text),
-                    --hover: (
-                        --bg:    fn.global-color(--#{$theme}-static --1000),
-                        --label: fn.global-color(--#{$theme}-static --1000-text),
-                    ),
-                    --active: (
-                        --bg:    fn.global-color(--#{$theme}-static --1100),
-                        --label: fn.global-color(--#{$theme}-static --1000-text),
-                    ),
-                ),
-
-                --#{$theme}-quiet: (
-                    --bg:    fn.global-color(--#{$theme} --200),
-                    --label: fn.global-color(--#{$theme} --1100),
-                    --hover: (
-                        --bg:    fn.global-color(--#{$theme} --300),
-                        --label: fn.global-color(--#{$theme} --1200),
-                    ),
-                    --active: (
-                        --bg:    fn.global-color(--#{$theme} --400),
-                        --label: fn.global-color(--#{$theme} --1300),
-                    ),
-                )
-            ),
-        ));
-    }
-
-    @each $theme in $static-themes {
-        @include iro.props-store((
-            --colors: (
-                --static-#{$theme}: (
-                    --bg:    fn.global-color(--#{$theme}-transparent --800),
-                    --label: fn.global-color(--#{$theme}-transparent --text),
-                    --hover: (
-                        --bg:    fn.global-color(--#{$theme}-transparent --900),
-                        --label: fn.global-color(--#{$theme}-transparent --text),
-                    ),
-                    --active: (
-                        --bg:    fn.global-color(--#{$theme}-transparent --900),
-                        --label: fn.global-color(--#{$theme}-transparent --text),
-                    ),
-                    --key-focus: (
-                        --bg:      fn.global-color(--#{$theme}-transparent --100),
-                        --label:   fn.global-color(--#{$theme}-transparent --900),
-                        --border:  fn.global-color(--#{$theme}-transparent --900),
-                        --outline: fn.global-color(--#{$theme}-transparent --300),
-                    ),
-                ),
-
-                --static-#{$theme}-quiet: (
-                    --bg:    fn.global-color(--#{$theme}-transparent --200),
-                    --label: fn.global-color(--#{$theme}-transparent --900),
-                    --hover: (
-                        --bg:    fn.global-color(--#{$theme}-transparent --300),
-                        --label: fn.global-color(--#{$theme}-transparent --900),
-                    ),
-                    --active: (
-                        --bg:    fn.global-color(--#{$theme}-transparent --400),
-                        --label: fn.global-color(--#{$theme}-transparent --900),
-                    ),
-                )
-            )
-        ));
-    }
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:          inline-block;
-        position:         relative;
-        padding-block:    fn.dim(--pad-b);
-        padding-inline:   fn.dim(--pad-i);
-        border-radius:    fn.dim(--rounding);
-        background-color: fn.color(--bg);
-        background-clip:  padding-box;
-        color:            fn.color(--label);
-        font-size:        fn.dim(--font-size);
-        line-height:      fn.global-dim(--font --standard --line-height);
-        text-align:       center;
-        text-decoration:  none;
-
-        &::after {
-            content:        '';
-            display:        none;
-            position:       absolute;
-            z-index:        1;
-            inset:          calc(-1 * fn.dim(--key-focus --border-offset));
-            border-radius:  calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
-            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);
-            pointer-events: none;
-        }
-
-        &:link,
-        &:visited,
-        &:enabled {
-            &:hover,
-            &:focus-visible {
-                background-color: fn.color(--hover --bg);
-            }
-
-            &:active {
-                background-color: fn.color(--active --bg);
-            }
-        }
-
-        @include iro.bem-elem('label') {
-            margin-inline: fn.dim(--pad-i-label);
-        }
-
-        @include iro.bem-modifier('quiet') {
-            background-color: fn.color(--quiet --bg);
-            color:            fn.color(--quiet --label);
-
-            &:link,
-            &:visited,
-            &:enabled {
-                &:hover,
-                &:focus-visible {
-                    background-color: fn.color(--quiet --hover --bg);
-                }
-
-                &:active {
-                    background-color: fn.color(--quiet --active --bg);
-                }
-            }
-        }
-    
-        @each $theme in $themes {
-            @include iro.bem-modifier($theme) {
-                @include theme($theme);
-            }
-        }
-
-        &:link,
-        &:visited,
-        &:enabled {
-            &:focus-visible {
-                &::after {
-                    display: block;
-                }
-            }
-        }
-    
-        @each $theme in $static-themes {
-            @include iro.bem-modifier(static-#{$theme}) {
-                @include theme(static-#{$theme});
-            }
-        }
-    
-        @include iro.bem-modifier('pill') {
-            padding-inline: fn.dim(--pad-i-pill);
-            border-radius:  10em;
-
-            &::after {
-                border-radius: 10em;
-            }
-        }
-    
-        @each $size in $sizes {
-            @include iro.bem-modifier($size) {
-                padding-block:  fn.dim(--#{$size} --pad-b);
-                padding-inline: fn.dim(--#{$size} --pad-i);
-                font-size:      fn.dim(--#{$size} --font-size);
-
-                @include iro.bem-elem('label') {
-                    margin-inline: fn.dim(--#{$size} --pad-i-label);
-                }
-        
-                @include iro.bem-modifier('pill') {
-                    padding-inline: fn.dim(--#{$size} --pad-i-pill);
-                }
-            }
-        }
-    }
-}
-- 
cgit v1.3.1