From f441e288cb6d33e2338ab8047053022b81c9aa0b Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Fri, 18 Oct 2024 20:41:38 +0200
Subject: Update

---
 src/_iro-design.scss                 |   2 +
 src/layouts/_button-group.vars.scss  |   2 +-
 src/layouts/_card-list.vars.scss     |   2 +-
 src/layouts/_container.vars.scss     |   2 +-
 src/layouts/_form.vars.scss          |   2 +-
 src/layouts/_media.vars.scss         |   2 +-
 src/layouts/_overflow.scss           |   2 +-
 src/objects/_action-button.scss      |   6 +-
 src/objects/_action-button.vars.scss |   7 +-
 src/objects/_alert.scss              |   4 +-
 src/objects/_alert.vars.scss         |  11 +-
 src/objects/_avatar.vars.scss        |   2 +-
 src/objects/_backdrop.scss           |  26 ++--
 src/objects/_backdrop.vars.scss      |   6 +
 src/objects/_badge.scss              | 274 ++++++++---------------------------
 src/objects/_badge.vars.scss         | 158 ++++++++++++++++++++
 src/scopes/_blockquotes.vars.scss    |   2 +-
 src/scopes/_code.vars.scss           |   2 +-
 src/scopes/_headings.scss            |   2 +-
 src/scopes/_implicit.scss            |   2 +-
 src/scopes/_implicit.vars.scss       |   2 +-
 src/scopes/_links.vars.scss          |   2 +-
 src/scopes/_lists.scss               |   2 +-
 src/scopes/_lists.vars.scss          |   2 +-
 src/scopes/_tables.vars.scss         |   2 +-
 src_demo/index.scss                  |   2 +
 26 files changed, 268 insertions(+), 260 deletions(-)
 create mode 100644 src/objects/_backdrop.vars.scss
 create mode 100644 src/objects/_badge.vars.scss

diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index 9aacc95..31be892 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -40,3 +40,5 @@ $breakpoints: (
 @forward 'objects/action-button' as o-action-button--*;
 @forward 'objects/alert' as o-alert--*;
 @forward 'objects/avatar' as o-avatar--*;
+@forward 'objects/backdrop' as o-backdrop--*;
+@forward 'objects/badge' as o-badge--*;
diff --git a/src/layouts/_button-group.vars.scss b/src/layouts/_button-group.vars.scss
index 23b09c0..f42f2d4 100644
--- a/src/layouts/_button-group.vars.scss
+++ b/src/layouts/_button-group.vars.scss
@@ -1,4 +1,4 @@
 @use '../props';
-@use '../core';
+@use '../core.vars' as core;
 
 $spacing: props.def(--l-button-group--spacing, props.get(core.$size--150)) !default;
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
index 16be23e..05204d0 100644
--- a/src/layouts/_card-list.vars.scss
+++ b/src/layouts/_card-list.vars.scss
@@ -1,5 +1,5 @@
 @use '../props';
-@use '../core';
+@use '../core.vars' as core;
 
 $row-gap: props.def(--l-card-list--row-gap, props.get(core.$size--800)) !default;
 $col-gap: props.def(--l-card-list--col-gap, props.get(core.$size--400)) !default;
diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss
index a80a909..74114b2 100644
--- a/src/layouts/_container.vars.scss
+++ b/src/layouts/_container.vars.scss
@@ -1,6 +1,6 @@
 @use 'iro-sass/src/iro-sass' as iro;
 @use '../props';
-@use '../core';
+@use '../core.vars' as core;
 
 $fixed-125: props.def(--l-container--fixed-125, iro.fn-px-to-rem(720px)) !default;
 $fixed:     props.def(--l-container--fixed, iro.fn-px-to-rem(610px)) !default;
diff --git a/src/layouts/_form.vars.scss b/src/layouts/_form.vars.scss
index a46a337..e2cd1a9 100644
--- a/src/layouts/_form.vars.scss
+++ b/src/layouts/_form.vars.scss
@@ -1,5 +1,5 @@
 @use '../props';
-@use '../core';
+@use '../core.vars' as core;
 
 $item-spacing-b:  props.def(--l-form--item-spacing-b, props.get(core.$size--325)) !default;
 $label-spacing-i: props.def(--l-form--label-spacing-i, props.get(core.$size--325)) !default;
diff --git a/src/layouts/_media.vars.scss b/src/layouts/_media.vars.scss
index 55961b8..e082d0c 100644
--- a/src/layouts/_media.vars.scss
+++ b/src/layouts/_media.vars.scss
@@ -1,5 +1,5 @@
 @use '../props';
-@use '../core';
+@use '../core.vars' as core;
 
 $gap:  props.def(--l-media--gap, props.get(core.$size--150)) !default;
 
diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss
index 310c7ee..d9f028f 100644
--- a/src/layouts/_overflow.scss
+++ b/src/layouts/_overflow.scss
@@ -1,6 +1,6 @@
 @use 'iro-sass/src/iro-sass' as iro;
 @use '../props';
-@use '../core';
+@use '../core.vars' as core;
 
 @mixin styles {
     @include iro.bem-layout('overflow') {
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 0a65b8d..129e681 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -137,9 +137,9 @@
 
         @include -apply-theme(vars.$default-theme);
 
-        @each $theme in map.keys(props.get(vars.$static-themes)) {
+        @each $theme in map.keys(props.get(vars.$themes)) {
             @include iro.bem-modifier($theme) {
-                @include -apply-theme(vars.$static-themes, $theme);
+                @include -apply-theme(vars.$themes, $theme);
             }
         }
 
@@ -154,7 +154,7 @@
 
         @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
             @include iro.bem-modifier($mod) {
-                padding-block:  props.get($pad-i);
+                padding-block:  props.get($pad-b);
                 padding-inline: props.get($pad-i);
                 font-size:      props.get($font-size);
 
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
index d1b3a4a..4c9603c 100644
--- a/src/objects/_action-button.vars.scss
+++ b/src/objects/_action-button.vars.scss
@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use '../props';
-@use '../core';
+@use '../core.vars' as core;
 
 $line-height:  props.def(--o-action-button--line-height, 1.4) !default;
 $pad-i:        props.def(--o-action-button--pad-i, props.get(core.$size--150)) !default;
@@ -35,6 +35,8 @@ $fixed-sizes: (
     'xl' $pad-i--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
 ) !default;
 
+$themes: props.def(--o-action-button);
+
 $default-theme-override: () !default;
 $default-theme: map.deep-merge((
     --bg-color:     props.get(core.$theme, --base, --75),
@@ -108,11 +110,10 @@ $default-theme: map.deep-merge((
 ), $default-theme-override) !default;
 $default-theme: props.def(--o-action-button, $default-theme);
 
-$static-themes: props.def(--o-action-button);
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
     $button-theme: #{$theme}-static;
 
-    $static-themes: props.merge($static-themes, (
+    $themes: props.merge($themes, (
         $button-theme: (
             --bg-color:     props.get(core.$transparent-colors, $theme, --100),
             --label-color:  props.get(core.$transparent-colors, $theme, --900),
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index 651ad23..4efacab 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -16,9 +16,9 @@
         border:           props.get(vars.$border-width) solid props.get(vars.$border-color);
         border-radius:    props.get(vars.$rounding);
 
-        @each $mod, $theme in vars.$themes {
+        @each $mod, $theme in vars.$themes-config {
             @include iro.bem-modifier($mod) {
-                border-color: props.get(vars.$populated-themes, $theme, --border-color);
+                border-color: props.get(vars.$themes, $theme, --border-color);
             }
         }
     }
diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss
index 64d8f1f..e0c77d2 100644
--- a/src/objects/_alert.vars.scss
+++ b/src/objects/_alert.vars.scss
@@ -1,5 +1,5 @@
 @use '../props';
-@use '../core';
+@use '../core.vars' as core;
 
 $border-width: props.def(--o-alert--border-width, props.get(core.$border-width--medium)) !default;
 $pad-i:        props.def(--o-alert--pad-i, props.get(core.$size--250)) !default;
@@ -9,16 +9,17 @@ $rounding:     props.def(--o-alert--rounding, props.get(core.$rounding)) !defaul
 $bg-color:     props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2)) !default;
 $border-color: props.def(--o-alert--bg-color, props.get(core.$theme, --text-mute-more)) !default;
 
-$themes: (
+$themes-config: (
     accent:   --accent,
     positive: --positive,
     negative: --negative,
     warning:  --warning,
 ) !default;
 
-$populated-themes: props.def(--o-alert);
-@each $theme, $key in $themes {
-    $populated-themes: props.merge($populated-themes, (
+$themes: props.def(--o-alert);
+
+@each $theme, $key in $themes-config {
+    $themes: props.merge($themes, (
         $key: (
             --border-color: props.get(core.$theme, $key, --700),
         )
diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss
index 5b97ec8..74d9677 100644
--- a/src/objects/_avatar.vars.scss
+++ b/src/objects/_avatar.vars.scss
@@ -1,5 +1,5 @@
 @use '../props';
-@use '../core';
+@use '../core.vars' as core;
 
 $size:              props.def(--o-avatar--size, props.get(core.$size--500)) !default;
 $font-size:         props.def(--o-avatar--font-size, props.get(core.$font-size--100)) !default;
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index 9e0cc1e..82246ed 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -1,26 +1,22 @@
+@use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
+@use '../props';
 
-@include iro.props-namespace('backdrop') {
-    @include iro.props-store((
-        --dims: (
-            --z-index: 10000,
-            --blur:    2em,
-        ),
-        --colors: (
-            --bg: rgba(#000, .75),
-        ),
-    ));
+@forward 'backdrop.vars';
+@use 'backdrop.vars' as vars;
 
-    @include iro.bem-object(iro.props-namespace()) {
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
+
+    @include iro.bem-object('backdrop') {
         position:         fixed;
         inset:            0;
-        z-index:          fn.dim(--z-index);
+        z-index:          props.get(vars.$z-index);
         box-sizing:       border-box;
         display:          flex;
         flex-direction:   column;
         overflow:         auto;
-        background-color: fn.color(--bg);
-        backdrop-filter:  blur(fn.dim(--blur));
+        background-color: props.get(vars.$bg-color);
+        backdrop-filter:  blur(props.get(vars.$blur));
     }
 }
diff --git a/src/objects/_backdrop.vars.scss b/src/objects/_backdrop.vars.scss
new file mode 100644
index 0000000..c03c263
--- /dev/null
+++ b/src/objects/_backdrop.vars.scss
@@ -0,0 +1,6 @@
+@use '../props';
+@use '../core.vars' as core;
+
+$z-index:  props.def(--o-backdrop--z-index, 10000) !default;
+$blur:     props.def(--o-backdrop--blur, 2em) !default;
+$bg-color: props.def(--o-backdrop--bg-color, props.get(core.$transparent-colors, --black, --600)) !default;
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 72d85ff..3f68873 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -1,298 +1,140 @@
-@use 'sass:string';
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
+@use '../props';
+@use '../core.vars' as core;
 
-$sizes:         'sm' 'lg' 'xl' !default;
-$themes:        'accent' 'positive' 'negative' 'warning' !default;
-$static-themes: 'black' 'white' !default;
+@forward 'badge.vars';
+@use 'badge.vars' as vars;
 
-@mixin theme($theme) {
-    color:            fn.color(--#{$theme} --label);
-    background-color: fn.color(--#{$theme} --bg);
+@mixin -apply-theme($theme, $key: (), $static: false) {
+    color:            props.get($theme, list.join($key, --label)...);
+    background-color: props.get($theme, list.join($key, --bg)...);
 
     &:link,
     &:visited,
     &:enabled {
         &:hover,
         &:focus-visible {
-            color:            fn.color(--#{$theme} --hover --label);
-            background-color: fn.color(--#{$theme} --hover --bg);
+            color:            props.get($theme, list.join($key, --hover --label)...);
+            background-color: props.get($theme, list.join($key, --hover --bg)...);
         }
 
         &:active {
-            color:            fn.color(--#{$theme} --active --label);
-            background-color: fn.color(--#{$theme} --active --bg);
+            color:            props.get($theme, list.join($key, --active --label)...);
+            background-color: props.get($theme, list.join($key, --active --bg)...);
         }
     }
 
     @include iro.bem-modifier('quiet') {
-        color:            fn.color(--#{$theme}-quiet --label);
-        background-color: fn.color(--#{$theme}-quiet --bg);
+        color:            props.get($theme, list.join($key, --quiet --label)...);
+        background-color: props.get($theme, list.join($key, --quiet --bg)...);
 
         &:link,
         &:visited,
         &:enabled {
             &:hover,
             &:focus-visible {
-                color:            fn.color(--#{$theme}-quiet --hover --label);
-                background-color: fn.color(--#{$theme}-quiet --hover --bg);
+                color:            props.get($theme, list.join($key, --quiet --hover --label)...);
+                background-color: props.get($theme, list.join($key, --quiet --hover --bg)...);
             }
 
             &:active {
-                color:            fn.color(--#{$theme}-quiet --active --label);
-                background-color: fn.color(--#{$theme}-quiet --active --bg);
+                color:            props.get($theme, list.join($key, --quiet --active --label)...);
+                background-color: props.get($theme, list.join($key, --quiet --active --bg)...);
             }
         }
     }
 
-    @if string.slice($theme, 1, 7) == 'static-' {
+    @if $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);
+            outline:    props.get($theme, list.join($key, --key-focus --border)...) solid props.get(vars.$key-focus--border-width);
+            box-shadow:
+                0
+                0
+                0
+                calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                props.get($theme, list.join($key, --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),
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
 
-            --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()) {
+    @include iro.bem-object('badge') {
         position:         relative;
         display:          inline-block;
-        padding-block:    fn.dim(--pad-b);
-        padding-inline:   fn.dim(--pad-i);
-        font-size:        fn.dim(--font-size);
-        line-height:      fn.global-dim(--font --standard --line-height);
-        color:            fn.color(--label);
+        padding-block:    props.get(vars.$pad-b);
+        padding-inline:   props.get(vars.$pad-i);
+        font-size:        props.get(vars.$font-size);
+        line-height:      props.get(core.$font--standard--line-height);
         text-align:       center;
         text-decoration:  none;
-        background-color: fn.color(--bg);
         background-clip:  padding-box;
-        border-radius:    fn.dim(--rounding);
+        border-radius:    props.get(vars.$rounding);
 
         &::after {
             position:       absolute;
-            inset:          calc(-1 * fn.dim(--key-focus --border-offset));
+            inset:          calc(-1 * props.get(vars.$key-focus--border-offset));
             z-index:        1;
             display:        none;
             pointer-events: none;
             content:        '';
-            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);
+            border-radius:  calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+            outline:        transparent solid props.get(vars.$key-focus--border-width);
         }
 
         &:link,
         &:visited,
         &:enabled {
-            &:hover,
             &:focus-visible {
-                background-color: fn.color(--hover --bg);
-            }
-
-            &:active {
-                background-color: fn.color(--active --bg);
+                &::after {
+                    display: block;
+                }
             }
         }
 
         @include iro.bem-elem('label') {
-            margin-inline: fn.dim(--pad-i-label);
+            margin-inline: props.get(vars.$pad-i-label);
         }
 
-        @include iro.bem-modifier('quiet') {
-            color:            fn.color(--quiet --label);
-            background-color: fn.color(--quiet --bg);
-
-            &:link,
-            &:visited,
-            &:enabled {
-                &:hover,
-                &:focus-visible {
-                    background-color: fn.color(--quiet --hover --bg);
-                }
+        @include -apply-theme(vars.$default-theme);
 
-                &:active {
-                    background-color: fn.color(--quiet --active --bg);
-                }
-            }
-        }
-    
-        @each $theme in $themes {
+        @each $theme in map.keys(props.get(vars.$themes)) {
             @include iro.bem-modifier($theme) {
-                @include theme($theme);
+                @include -apply-theme(vars.$themes, $theme);
             }
         }
 
-        &:link,
-        &:visited,
-        &:enabled {
-            &:focus-visible {
-                &::after {
-                    display: block;
-                }
-            }
-        }
-    
-        @each $theme in $static-themes {
-            @include iro.bem-modifier(static-#{$theme}) {
-                @include theme(static-#{$theme});
+        @each $theme in map.keys(props.get(vars.$static-themes)) {
+            @include iro.bem-modifier($theme) {
+                @include -apply-theme(vars.$static-themes, $theme, true);
             }
         }
     
         @include iro.bem-modifier('pill') {
-            padding-inline: fn.dim(--pad-i-pill);
+            padding-inline: props.get(vars.$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);
+
+        @each $mod, $pad-b, $pad-i, $pad-i-pill, $pad-i-label, $font-size in vars.$sizes {
+            @include iro.bem-modifier($mod) {
+                padding-block:  props.get($pad-b);
+                padding-inline: props.get($pad-i);
+                font-size:      props.get($font-size);
 
                 @include iro.bem-elem('label') {
-                    margin-inline: fn.dim(--#{$size} --pad-i-label);
+                    margin-inline: props.get($pad-i-label);
                 }
         
                 @include iro.bem-modifier('pill') {
-                    padding-inline: fn.dim(--#{$size} --pad-i-pill);
+                    padding-inline: props.get($pad-i-pill);
                 }
             }
         }
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss
new file mode 100644
index 0000000..6a3dd15
--- /dev/null
+++ b/src/objects/_badge.vars.scss
@@ -0,0 +1,158 @@
+@use 'sass:map';
+@use '../props';
+@use '../core.vars' as core;
+
+$pad-b:       props.def(--o-badge--pad-b, props.get(core.$size--50)) !default;
+$pad-i:       props.def(--o-badge--pad-i, props.get(core.$size--100)) !default;
+$pad-i-pill:  props.def(--o-badge--pad-i-pill, props.get(core.$size--150)) !default;
+$pad-i-label: props.def(--o-badge--pad-i-label, props.get(core.$size--50)) !default;
+$rounding:    props.def(--o-badge--rounding, props.get(core.$rounding)) !default;
+$font-size:   props.def(--o-badge--font-size, props.get(core.$font-size--75)) !default;
+
+$pad-b--sm:       props.def(--o-badge--sm--pad-b, props.get(core.$size--25)) !default;
+$pad-i--sm:       props.def(--o-badge--sm--pad-i, props.get(core.$size--75)) !default;
+$pad-i-pill--sm:  props.def(--o-badge--sm--pad-i-pill, props.get(core.$size--125)) !default;
+$pad-i-label--sm: props.def(--o-badge--sm--pad-i-label, props.get(core.$size--25)) !default;
+$font-size--sm:   props.def(--o-badge--sm--font-size, props.get(core.$font-size--50)) !default;
+
+$pad-b--lg:       props.def(--o-badge--lg--pad-b, props.get(core.$size--75)) !default;
+$pad-i--lg:       props.def(--o-badge--lg--pad-i, props.get(core.$size--125)) !default;
+$pad-i-pill--lg:  props.def(--o-badge--lg--pad-i-pill, props.get(core.$size--175)) !default;
+$pad-i-label--lg: props.def(--o-badge--lg--pad-i-label, props.get(core.$size--50)) !default;
+$font-size--lg:   props.def(--o-badge--lg--font-size, props.get(core.$font-size--100)) !default;
+
+$pad-b--xl:       props.def(--o-badge--xl--pad-b, props.get(core.$size--100)) !default;
+$pad-i--xl:       props.def(--o-badge--xl--pad-i, props.get(core.$size--150)) !default;
+$pad-i-pill--xl:  props.def(--o-badge--xl--pad-i-pill, props.get(core.$size--225)) !default;
+$pad-i-label--xl: props.def(--o-badge--xl--pad-i-label, props.get(core.$size--75)) !default;
+$font-size--xl:   props.def(--o-badge--xl--font-size, props.get(core.$font-size--150)) !default;
+
+$key-focus--border-width:  props.def(--o-badge--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
+$key-focus--border-offset: props.def(--o-badge--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
+$key-focus--outline-width: props.def(--o-badge--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+
+$sizes: (
+    'sm' $pad-b--sm $pad-i--sm $pad-i-pill--sm $pad-i-label--sm $font-size--sm,
+    'lg' $pad-b--lg $pad-i--lg $pad-i-pill--lg $pad-i-label--lg $font-size--lg,
+    'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl,
+) !default;
+
+$key-focus--label-color:   props.def(--o-avatar--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default;
+$key-focus--border-color:  props.def(--o-avatar--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
+$key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
+
+$default-theme-override: () !default;
+$default-theme: props.def(--o-badge, (
+    --bg:    props.def(--o-badge--bg-color, props.get(core.$theme, --text-mute)),
+    --label: props.def(--o-badge--label-color, props.get(core.$theme, --bg-l2)),
+    
+    --hover: (
+        --bg:    props.def(--o-badge--hover--bg-color, props.get(core.$theme, --text)),
+        --label: props.def(--o-badge--label-color, props.get(core.$theme, --bg-l2)),
+    ),
+
+    --active: (
+        --bg:    props.def(--o-badge--active--bg-color, props.get(core.$theme, --heading)),
+        --label: props.def(--o-badge--label-color, props.get(core.$theme, --bg-l2)),
+    ),
+
+    --quiet: (
+        --bg:    props.def(--o-badge--quiet--bg-color, props.get(core.$theme, --border-mute)),
+        --label: props.def(--o-badge--quiet--label-color, props.get(core.$theme, --heading)),
+
+        --hover: (
+            --bg:    props.def(--o-badge--quiet--hover--bg-color, props.get(core.$theme, --border)),
+            --label: props.def(--o-badge--quiet--label-color, props.get(core.$theme, --heading)),
+        ),
+
+        --active: (
+            --bg:    props.def(--o-badge--quiet--active--bg-color, props.get(core.$theme, --border-strong)),
+            --label: props.def(--o-badge--quiet--label-color, props.get(core.$theme, --heading)),
+        ),
+    )
+));
+$default-theme: props.merge(--o-badge, $default-theme-override);
+
+$static-themes: props.def(--o-badge);
+
+@each $theme in map.keys(props.get(core.$transparent-colors)) {
+    $badge-theme: #{$theme}-static;
+
+    $static-themes: props.merge($static-themes, (
+        $badge-theme: (
+            --bg:    props.get(core.$transparent-colors, $theme, --800),
+            --label: props.get(core.$transparent-colors, $theme, --text),
+
+            --hover: (
+                --bg:    props.get(core.$transparent-colors, $theme, --900),
+                --label: props.get(core.$transparent-colors, $theme, --text),
+            ),
+
+            --active: (
+                --bg:    props.get(core.$transparent-colors, $theme, --900),
+                --label: props.get(core.$transparent-colors, $theme, --text),
+            ),
+
+            --key-focus: (
+                --bg:      props.get(core.$transparent-colors, $theme, --100),
+                --label:   props.get(core.$transparent-colors, $theme, --900),
+                --border:  props.get(core.$transparent-colors, $theme, --900),
+                --outline: props.get(core.$transparent-colors, $theme, --300),
+            ),
+
+            --quiet: (
+                --bg:    props.get(core.$transparent-colors, $theme, --200),
+                --label: props.get(core.$transparent-colors, $theme, --900),
+                --hover: (
+                    --bg:    props.get(core.$transparent-colors, $theme, --300),
+                    --label: props.get(core.$transparent-colors, $theme, --900),
+                ),
+                --active: (
+                    --bg:    props.get(core.$transparent-colors, $theme, --400),
+                    --label: props.get(core.$transparent-colors, $theme, --900),
+                ),
+            )
+        )
+    ));
+}
+
+$themes-config: (
+    accent:   --accent,
+    positive: --positive,
+    negative: --negative,
+    warning:  --warning,
+) !default;
+
+$themes: props.def(--o-badge);
+
+@each $theme, $key in $themes-config {
+    $themes: props.merge($themes, (
+        $key: (
+            --bg:    props.get(core.$static-colors, $key, --900),
+            --label: props.get(core.$static-colors, $key, --900-text),
+            
+            --hover: (
+                --bg:    props.get(core.$static-colors, $key, --1000),
+                --label: props.get(core.$static-colors, $key, --1000-text),
+            ),
+
+            --active: (
+                --bg:    props.get(core.$static-colors, $key, --1100),
+                --label: props.get(core.$static-colors, $key, --1000-text),
+            ),
+
+            --quiet: (
+                --bg:    props.get(core.$theme, $key, --200),
+                --label: props.get(core.$theme, $key, --1100),
+                --hover: (
+                    --bg:    props.get(core.$theme, $key, --300),
+                    --label: props.get(core.$theme, $key, --1200),
+                ),
+                --active: (
+                    --bg:    props.get(core.$theme, $key, --400),
+                    --label: props.get(core.$theme, $key, --1300),
+                ),
+            )
+        )
+    ));
+}
diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss
index 108392d..39d90bd 100644
--- a/src/scopes/_blockquotes.vars.scss
+++ b/src/scopes/_blockquotes.vars.scss
@@ -1,5 +1,5 @@
 @use '../props';
-@use '../core';
+@use '../core.vars' as core;
 @use './implicit' as implicit;
 
 $indent:       props.def(--s-blockquotes--indent, props.get(core.$list--indent)) !default;
diff --git a/src/scopes/_code.vars.scss b/src/scopes/_code.vars.scss
index 7f31b8c..ee7463d 100644
--- a/src/scopes/_code.vars.scss
+++ b/src/scopes/_code.vars.scss
@@ -1,5 +1,5 @@
 @use '../props';
-@use '../core';
+@use '../core.vars' as core;
 @use './implicit' as implicit;
 
 $inline--pad-i:    props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default;
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index 002a392..b4a16bd 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -2,7 +2,7 @@
 @use 'iro-sass/src/iro-sass' as iro;
 @use '../mixins' as mx;
 @use '../props';
-@use '../core';
+@use '../core.vars' as core;
 
 @mixin styles {
     @include iro.bem-scope('headings') {
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index d679bdc..ba34039 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -2,7 +2,7 @@
 @use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
 @use '../props';
-@use '../core';
+@use '../core.vars' as core;
 
 @forward 'implicit.vars';
 @use 'implicit.vars' as vars;
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss
index 036ace3..34979d9 100644
--- a/src/scopes/_implicit.vars.scss
+++ b/src/scopes/_implicit.vars.scss
@@ -1,5 +1,5 @@
 @use '../props';
-@use '../core';
+@use '../core.vars' as core;
 
 $paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--300)) !default;
 
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss
index b40cae8..4bf80c0 100644
--- a/src/scopes/_links.vars.scss
+++ b/src/scopes/_links.vars.scss
@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use '../props';
-@use '../core';
+@use '../core.vars' as core;
 
 $rounding:               props.def(--s-links--rounding, props.get(core.$rounding)) !default;
 $underline-width:        props.def(--s-links--underline-width, props.get(core.$border-width--thin)) !default;
diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss
index d5421ca..1cfe085 100644
--- a/src/scopes/_lists.scss
+++ b/src/scopes/_lists.scss
@@ -1,7 +1,7 @@
 @use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
 @use '../props';
-@use '../core';
+@use '../core.vars' as core;
 
 @forward 'lists.vars';
 @use 'lists.vars' as vars;
diff --git a/src/scopes/_lists.vars.scss b/src/scopes/_lists.vars.scss
index 6dd04ac..8a7852d 100644
--- a/src/scopes/_lists.vars.scss
+++ b/src/scopes/_lists.vars.scss
@@ -1,5 +1,5 @@
 @use '../props';
-@use '../core';
+@use '../core.vars' as core;
 @use './implicit' as implicit;
 
 $indent:    props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default;
diff --git a/src/scopes/_tables.vars.scss b/src/scopes/_tables.vars.scss
index 2d7fed1..cdaca64 100644
--- a/src/scopes/_tables.vars.scss
+++ b/src/scopes/_tables.vars.scss
@@ -1,5 +1,5 @@
 @use '../props';
-@use '../core';
+@use '../core.vars' as core;
 
 $indent:    props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default;
 $margin-bs: props.def(--s-lists--margin-bs, props.get(core.$paragraph--margin-bs)) !default;
diff --git a/src_demo/index.scss b/src_demo/index.scss
index 0189928..5e102a1 100644
--- a/src_demo/index.scss
+++ b/src_demo/index.scss
@@ -19,3 +19,5 @@
 @include iro.o-action-button--styles;
 @include iro.o-alert--styles;
 @include iro.o-avatar--styles;
+@include iro.o-backdrop--styles;
+@include iro.o-badge--styles;
-- 
cgit v1.2.3-70-g09d2