From 3799950b0a869aee0e2725a8aafbb53c26723942 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 19 Oct 2024 14:46:06 +0200
Subject: Update

---
 src/_iro-design.scss                    |   7 ++
 src/objects/_checkbox.vars.scss         |   6 +-
 src/objects/_field-label.scss           |   1 -
 src/objects/_lightbox.scss              | 104 +++++++++++++++------------
 src/objects/_lightbox.vars.scss         |  57 +++++++--------
 src/objects/_menu.scss                  | 122 +++++++++++---------------------
 src/objects/_menu.vars.scss             |  29 ++++++++
 src/objects/_palette.scss               |  29 ++++----
 src/objects/_popover.scss               |  45 ++++--------
 src/objects/_popover.vars.scss          |  14 ++++
 src/objects/_radio.scss                 | 118 +++++++++++-------------------
 src/objects/_radio.vars.scss            |  33 +++++++++
 src/objects/_side-nav.scss              | 103 +++++++++------------------
 src/objects/_side-nav.vars.scss         |  28 ++++++++
 src/objects/_status-indicator.scss      |  42 ++++-------
 src/objects/_status-indicator.vars.scss |  21 ++++++
 16 files changed, 384 insertions(+), 375 deletions(-)
 create mode 100644 src/objects/_menu.vars.scss
 create mode 100644 src/objects/_popover.vars.scss
 create mode 100644 src/objects/_radio.vars.scss
 create mode 100644 src/objects/_side-nav.vars.scss
 create mode 100644 src/objects/_status-indicator.vars.scss

(limited to 'src')

diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index 3abe3fa..eac485d 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -50,3 +50,10 @@ $breakpoints: (
 @forward 'objects/field-label' as o-field-label--*;
 @forward 'objects/heading' as o-heading--*;
 @forward 'objects/icon' as o-icon--*;
+@forward 'objects/lightbox' as o-lightbox--*;
+@forward 'objects/menu' as o-menu--*;
+@forward 'objects/palette' as o-palette--*;
+@forward 'objects/popover' as o-popover--*;
+@forward 'objects/radio' as o-radio--*;
+@forward 'objects/side-nav' as o-side-nav--*;
+@forward 'objects/status-indicator' as o-status-indicator--*;
diff --git a/src/objects/_checkbox.vars.scss b/src/objects/_checkbox.vars.scss
index d0785d7..cba736e 100644
--- a/src/objects/_checkbox.vars.scss
+++ b/src/objects/_checkbox.vars.scss
@@ -10,9 +10,9 @@ $pad-b:           props.def(--o-checkbox--pad-b, props.get(core.$size--65)) !def
 $rounding:        props.def(--o-checkbox--rounding, props.get(core.$rounding)) !default;
 $spacing-sibling: props.def(--o-checkbox--spacing-sibling, props.get(core.$size--300)) !default;
 
-$key-focus--border-width:  props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
-$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+$key-focus--border-width:  props.def(--o-checkbox--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
+$key-focus--border-offset: props.def(--o-checkbox--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
+$key-focus--outline-width: props.def(--o-checkbox--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
 
 $box-border-color: props.def(--o-checkbox--box-border-color, props.get(core.$theme, --text-mute-more)) !default;
 $box-bg-color:     props.def(--o-checkbox--box-bg-color, props.get(core.$theme, --base, --75)) !default;
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
index 467d30a..4ffe8f0 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -1,7 +1,6 @@
 @use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
 @use '../props';
-@use 'icon.vars' as icon;
 
 @forward 'field-label.vars';
 @use 'field-label.vars' as vars;
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 740f4e5..66faab5 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -1,14 +1,16 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
+@use '../props';
 
-@use 'action-button';
+@forward 'lightbox.vars';
+@use 'lightbox.vars' as vars;
 
-$static-themes: 'black' 'white' !default;
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
 
-@include iro.props-namespace('lightbox') {
-    
-
-    @include iro.bem-object(iro.props-namespace()) {
+    @include iro.bem-object('lightbox') {
         box-sizing:            border-box;
         display:               grid;
         flex:                  1 1 auto;
@@ -25,8 +27,8 @@ $static-themes: 'black' 'white' !default;
             display:             flex;
             grid-area:           header;
             align-items:         flex-start;
-            padding-block-start: fn.dim(--pad);
-            padding-inline:      fn.dim(--pad);
+            padding-block-start: props.get(vars.$pad);
+            padding-inline:      props.get(vars.$pad);
         }
 
         @include iro.bem-elem('img') {
@@ -36,7 +38,7 @@ $static-themes: 'black' 'white' !default;
             place-self:      center;
             max-inline-size: 100%;
             max-block-size:  100%;
-            padding:         fn.dim(--pad);
+            padding:         props.get(vars.$pad);
 
             @include iro.bem-sibling-elem('img') {
                 @include iro.bem-modifier('default') {
@@ -82,9 +84,9 @@ $static-themes: 'black' 'white' !default;
         @include iro.bem-elem('thumbnails') {
             display:            flex;
             grid-area:          thumbnails;
-            gap:                fn.dim(--thumbnail --spacing);
-            padding:            fn.dim(--pad);
-            margin-block-start: calc(-1 * fn.dim(--pad));
+            gap:                props.get(vars.$thumbnail--spacing);
+            padding:            props.get(vars.$pad);
+            margin-block-start: calc(-1 * props.get(vars.$pad));
             overflow:           auto;
         }
 
@@ -92,47 +94,52 @@ $static-themes: 'black' 'white' !default;
             display:        flex;
             grid-area:      footer;
             align-items:    flex-start;
-            padding-block:  0 fn.dim(--pad);
-            padding-inline: fn.dim(--pad);
+            padding-block:  0 props.get(vars.$pad);
+            padding-inline: props.get(vars.$pad);
         }
 
         @include iro.bem-elem('thumbnail') {
             position:       relative;
             flex:           0 0 auto;
-            inline-size:    fn.dim(--thumbnail --size);
-            block-size:     fn.dim(--thumbnail --size);
+            inline-size:    props.get(vars.$thumbnail--size);
+            block-size:     props.get(vars.$thumbnail--size);
             overflow:       hidden;
-            border-radius:  fn.dim(--thumbnail --rounding);
-            outline:        fn.dim(--thumbnail --border) solid fn.color(--thumbnail --border);
-            outline-offset: calc(-1 * fn.dim(--thumbnail --border));
+            border-radius:  props.get(vars.$thumbnail--rounding);
+            outline:        props.get(vars.$thumbnail--border-color) solid props.get(vars.$thumbnail--border-width);
+            outline-offset: calc(-1 * props.get(vars.$thumbnail--border-width));
             opacity:       .75;
 
             &:hover,
             &:active,
             &:focus-visible {
-                outline-color: fn.color(--thumbnail --hover --border);
+                outline-color: props.get(vars.$thumbnail--hover--border-color);
                 opacity:       1;
             }
 
             @include iro.bem-is('selected') {
-                $focus-border-offset: calc(-1 * fn.dim(--thumbnail --selected --border));
+                $focus-border-offset: calc(-1 * props.get(vars.$thumbnail--selected--border-width));
 
                 margin:        $focus-border-offset;
-                border:        fn.dim(--thumbnail --selected --border) solid fn.color(--thumbnail --selected --border);
-                border-radius: calc(fn.dim(--thumbnail --rounding) - $focus-border-offset);
+                border:        props.get(vars.$thumbnail--selected--border-width) solid props.get(vars.$thumbnail--selected--border-color);
+                border-radius: calc(props.get(vars.$thumbnail--rounding) - $focus-border-offset);
                 outline:       none;
                 opacity:       1;
             }
 
             &:focus-visible {
-                $focus-border-offset: calc(-1 * fn.dim(--thumbnail --key-focus --border-offset));
+                $focus-border-offset: calc(-1 * props.get(vars.$thumbnail--key-focus--border-offset));
 
                 margin:         $focus-border-offset;
-                border:         fn.dim(--thumbnail --key-focus --border-offset) solid transparent;
-                border-radius:  calc(fn.dim(--thumbnail --rounding) - $focus-border-offset);
-                outline:        fn.dim(--thumbnail --key-focus --border) solid fn.color(--thumbnail --key-focus --border);
+                border:         props.get(vars.$thumbnail--key-focus--border-offset) solid transparent;
+                border-radius:  calc(props.get(vars.$thumbnail--rounding) - $focus-border-offset);
+                outline:        props.get(vars.$thumbnail--key-focus--border-color) solid props.get(vars.$thumbnail--key-focus--border-width);
                 outline-offset: 0;
-                box-shadow:     0 0 0 calc(fn.dim(--thumbnail --key-focus --outline) + fn.dim(--thumbnail --key-focus --border)) fn.color(--thumbnail --key-focus --outline);
+                box-shadow:
+                    0
+                    0
+                    0
+                    calc(props.get(vars.$thumbnail--key-focus--outline-width) + props.get(vars.$thumbnail--key-focus--border-width))
+                    props.get(vars.$thumbnail--key-focus--outline-color);
             }
         }
 
@@ -156,9 +163,9 @@ $static-themes: 'black' 'white' !default;
 
         @include iro.bem-elem('close-btn') {
             flex:               0 0 auto;
-            margin-block-start: calc(-.5 * fn.dim(--pad));
-            margin-inline:      auto calc(-.5 * fn.dim(--pad));
-            font-size:          fn.dim(--close-button --font-size);
+            margin-block-start: calc(-.5 * props.get(vars.$pad));
+            margin-inline:      auto calc(-.5 * props.get(vars.$pad));
+            font-size:          props.get(vars.$close-button--font-size);
         }
 
         @include iro.bem-elem('nav-btn') {
@@ -166,21 +173,21 @@ $static-themes: 'black' 'white' !default;
             display:    none;
             align-self: center;
             overflow:   visible;
-            font-size:  fn.dim(--nav-button --font-size);
+            font-size:  props.get(vars.$nav-button--font-size);
 
             &::before {
                 position:           absolute;
                 inset-block-start:  50%;
                 display:            block;
-                inline-size:        fn.dim(--nav-button --width);
-                block-size:         fn.dim(--nav-button --height);
+                inline-size:        props.get(vars.$nav-button--inline-size);
+                block-size:         props.get(vars.$nav-button--block-size);
                 content:            '';
                 transform:          translateY(-50%);
             }
 
             @include iro.bem-modifier('prev') {
                 grid-area:     prev;
-                margin-inline: calc(.5 * fn.dim(--pad)) calc(-1 * fn.dim(--pad));
+                margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad));
 
                 &::before {
                     inset-inline-start: 0;
@@ -189,35 +196,40 @@ $static-themes: 'black' 'white' !default;
     
             @include iro.bem-modifier('next') {
                 grid-area:     next;
-                margin-inline: calc(-1 * fn.dim(--pad)) calc(.5 * fn.dim(--pad));
+                margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad));
 
                 &::before {
                     inset-inline-end: 0;
                 }
             }
         }
-    
-        @each $theme in $static-themes {
-            @include iro.bem-modifier(static-#{$theme}) {
-                color: fn.color(--static-#{$theme} --text);
+
+        @each $theme in map.keys(props.get(vars.$static-themes)) {
+            @include iro.bem-modifier(string.slice($theme, 3)) {
+                color: props.get(vars.$static-themes, $theme, --text);
 
                 @include iro.bem-elem('thumbnail') {
-                    outline-color: fn.color(--static-#{$theme} --thumbnail --border);
+                    outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --border);
 
                     &:hover,
                     &:active,
                     &:focus-visible {
-                        outline-color: fn.color(--static-#{$theme} --thumbnail --hover --border);
+                        outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --hover, --border);
                     }
         
                     @include iro.bem-is('selected') {
-                        border-color: fn.color(--static-#{$theme} --thumbnail --selected --border);
+                        border-color: props.get(vars.$static-themes, $theme, --thumbnail, --selected, --border);
                     }
 
                     &:focus-visible {
                         border-color:  transparent;
-                        outline-color: fn.color(--static-#{$theme} --thumbnail --key-focus --border);
-                        box-shadow:    0 0 0 calc(fn.dim(--thumbnail --key-focus --outline) + fn.dim(--thumbnail --key-focus --border)) fn.color(--static-#{$theme} --thumbnail --key-focus --outline);
+                        outline-color: props.get(vars.$static-themes, $theme, --thumbnail, --key-focus, --border);
+                        box-shadow: 
+                            0
+                            0
+                            0
+                            calc(props.get(vars.$thumbnail--key-focus--outline-width) + props.get(vars.$thumbnail--key-focus--border-width))
+                            props.get(vars.$static-themes, $theme, --thumbnail, --key-focus, --outline);
                     }
                 }
             }
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss
index 1538cae..32324a4 100644
--- a/src/objects/_lightbox.vars.scss
+++ b/src/objects/_lightbox.vars.scss
@@ -1,3 +1,4 @@
+@use 'sass:map';
 @use '../props';
 @use '../core.vars' as core;
 
@@ -29,42 +30,34 @@ $thumbnail--selected--border-color: props.def(--o-lightbox--thumbnail--selected-
 $thumbnail--key-focus--border-color:  props.def(--o-lightbox--thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
 $thumbnail--key-focus--outline-color: props.def(--o-lightbox--thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
 
+$thumbnail--size--md:         props.def(--o-lightbox--thumbnail--size, props.get(core.$size--600), 'md') !default;
+$nav-button--inline-size--md: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2500), 'md') !default;
+$nav-button--block-size--md:  props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--2500), 'md') !default;
 
+$static-themes: props.def(--o-lightbox);
 
-@each $theme in $static-themes {
-    @include iro.props-store((
-        --colors: (
-            --static-#{$theme}: (
-                --text: fn.global-color(--white-transparent --800),
-                --thumbnail: (
-                    --border: fn.global-color(--white-transparent --400),
-            
-                    --hover: (
-                        --border: fn.global-color(--white-transparent --500),
-                    ),
-                    
-                    --selected: (
-                        --border: fn.global-color(--white-transparent --900),
-                    ),
+@each $theme in map.keys(props.get(core.$transparent-colors)) {
+    $lightbox-theme: #{$theme}-static;
 
-                    --key-focus: (
-                        --border:  fn.global-color(--#{$theme}-transparent --900),
-                        --outline: fn.global-color(--#{$theme}-transparent --300),
-                    ),
+    $static-themes: props.merge($static-themes, (
+        $lightbox-theme: (
+            --text: props.get(core.$transparent-colors, $theme, --800),
+            --thumbnail: (
+                --border: props.get(core.$transparent-colors, $theme, --400),
+        
+                --hover: (
+                    --border: props.get(core.$transparent-colors, $theme, --500),
                 ),
-            )
+                
+                --selected: (
+                    --border: props.get(core.$transparent-colors, $theme, --900),
+                ),
+
+                --key-focus: (
+                    --border:  props.get(core.$transparent-colors, $theme, --900),
+                    --outline: props.get(core.$transparent-colors, $theme, --300),
+                ),
+            ),
         )
     ));
 }
-
-@include iro.props-store((
-    --dims: (
-        --thumbnail: (
-            --size: fn.global-dim(--size --600),
-        ),
-        --nav-button: (
-            --width:  fn.global-dim(--size --2500),
-            --height: fn.global-dim(--size --2500),
-        ),
-    ),
-), 'md');
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index 12e9755..f9453ce 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -1,82 +1,41 @@
-/* stylelint-disable length-zero-no-unit */
-
+@use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
-
-@use './icon';
-
-@include iro.props-namespace('menu') {
-    @include iro.props-store((
-        --dims: (
-            --spacing: 0em,
-            --header: (
-                --font-size: fn.global-dim(--font-size --50),
-            ),
-            --separator: fn.global-dim(--size --100),
-            --item: (
-                --pad-i:    fn.global-dim(--size --150),
-                --pad-b:    fn.global-dim(--size --100),
-                --rounding: 0em,
-            
-                --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: (
-            --separator: fn.global-color(--border),
-            --header: (
-                --label:  fn.global-color(--heading),
-            ),
-            --item: (
-                --hover: (
-                    --bg:    fn.global-color(--border-mute),
-                    --label: fn.global-color(--heading),
-                ),
-                --active: (
-                    --bg:    fn.global-color(--border),
-                    --label: fn.global-color(--heading),
-                ),
-                --disabled: (
-                    --label: fn.global-color(--text-disabled),
-                ),
-                --key-focus: (
-                    --border:  fn.global-color(--focus --border),
-                    --outline: fn.global-color(--focus --outline),
-                ),
-            ),
-        ),
-    ));
-
-    @include iro.bem-object(iro.props-namespace()) {
+@use '../props';
+@use 'icon.vars' as icon;
+
+@forward 'menu.vars';
+@use 'menu.vars' as vars;
+
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
+
+    @include iro.bem-object('menu') {
         display:        flex;
         flex-direction: column;
-        gap:            fn.dim(--spacing);
+        gap:            props.get(vars.$spacing);
 
         @include iro.bem-elem('header') {
-            padding-block:  fn.dim(--item --pad-b);
-            padding-inline: fn.dim(--item --pad-i);
-            font-size:      fn.dim(--header --font-size);
+            padding-block:  props.get(vars.$item--pad-b);
+            padding-inline: props.get(vars.$item--pad-i);
+            font-size:      props.get(vars.$header--font-size);
             font-weight:    500;
-            color:          fn.color(--header --label);
+            color:          props.get(vars.$header--label-color);
             text-transform: uppercase;
             letter-spacing: .5px;
 
             @include iro.bem-next-twin-elem {
-                margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing));
+                margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing));
             }
         }
 
         @include iro.bem-elem('item') {
-            padding-block:   fn.dim(--item --pad-b);
-            padding-inline:  fn.dim(--item --pad-i);
-            margin:          calc(-1 * fn.dim(--item --key-focus --outline));
-            color:           fn.color(--item --disabled --label);
+            padding-block:   props.get(vars.$item--pad-b);
+            padding-inline:  props.get(vars.$item--pad-i);
+            margin:          calc(-1 * props.get(vars.$item--key-focus--outline-width));
+            color:           props.get(vars.$item--disabled--label-color);
             background-clip: padding-box;
-            border:          fn.dim(--item --key-focus --outline) solid transparent;
-            border-radius:   calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --outline));
+            border:          props.get(vars.$item--key-focus--outline-width) solid transparent;
+            border-radius:   calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width));
 
             &:link,
             &:visited,
@@ -84,23 +43,28 @@
                 color: currentColor;
 
                 @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') {
-                    color:            fn.color(--item --hover --label);
-                    background-color: fn.color(--item --hover --bg);
+                    color:            props.get(vars.$item--hover--label-color);
+                    background-color: props.get(vars.$item--hover--bg-color);
                 }
 
                 &:active {
-                    color:            fn.color(--item --active --label);
-                    background-color: fn.color(--item --active --bg);
+                    color:            props.get(vars.$item--active--label-color);
+                    background-color: props.get(vars.$item--active--bg-color);
                 }
 
                 &:focus-visible {
-                    outline:    fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border);
-                    box-shadow: 0 0 0 calc(fn.dim(--item --key-focus --border) + fn.dim(--item --key-focus --outline)) fn.color(--item --key-focus --outline);
+                    outline:    props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width);
+                    box-shadow:
+                        0
+                        0
+                        0
+                        calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width))
+                        props.get(vars.$item--key-focus--outline-color);
                 }
             }
 
             @include iro.bem-next-elem('header') {
-                margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing));
+                margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing));
             }
         }
 
@@ -108,30 +72,30 @@
             &:link,
             &:visited,
             &:enabled {
-                color: fn.color(--header --label);
+                color: props.get(vars.$header--label-color);
             }
         }
 
         @include iro.bem-elem('separator') {
             block-size:       1px;
-            margin-block:     fn.dim(--separator);
-            margin-inline:    fn.dim(--item --pad-i);
-            background-color: fn.color(--separator);
+            margin-block:     props.get(vars.$separator-width);
+            margin-inline:    props.get(vars.$item--pad-i);
+            background-color: props.get(vars.$separator-color);
         }
 
         @include iro.bem-elem('slot') {
-            padding-block:  fn.dim(--item --pad-b);
-            padding-inline: fn.dim(--item --pad-i);
+            padding-block:  props.get(vars.$item--pad-b);
+            padding-inline: props.get(vars.$item--pad-i);
         }
 
         @include iro.bem-elem('icon-slot') {
             display:         flex;
             justify-content: center;
-            inline-size:     fn.foreign-dim(--icon, --size);
+            inline-size:     props.get(icon.$size);
         }
 
         @include iro.bem-modifier('pull') {
-            margin: calc(-1 * fn.dim(--item --pad-i));
+            margin: calc(-1 * props.get(vars.$item--pad-i));
         }
     }
 }
diff --git a/src/objects/_menu.vars.scss b/src/objects/_menu.vars.scss
new file mode 100644
index 0000000..74a9f8a
--- /dev/null
+++ b/src/objects/_menu.vars.scss
@@ -0,0 +1,29 @@
+@use 'sass:map';
+@use '../props';
+@use '../core.vars' as core;
+
+$spacing:           props.def(--o-menu--spacing, 0em) !default;
+$header--font-size: props.def(--o-menu--header--font-size, props.get(core.$font-size--50)) !default;
+$separator-width:   props.def(--o-menu--separator-width, props.get(core.$size--100)) !default;
+
+$item--pad-i:    props.def(--o-menu--item--pad-i, props.get(core.$size--150)) !default;
+$item--pad-b:    props.def(--o-menu--item--pad-b, props.get(core.$size--100)) !default;
+$item--rounding: props.def(--o-menu--item--pad-b, props.get(core.$rounding)) !default;
+
+$item--key-focus--border-width:  props.def(--o-menu--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
+$item--key-focus--border-offset: props.def(--o-menu--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
+$item--key-focus--outline-width: props.def(--o-menu--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+
+$separator-color:     props.def(--o-menu--separator-color, props.get(core.$theme, --border)) !default;
+$header--label-color: props.def(--o-menu--header--label-color, props.get(core.$theme, --heading)) !default;
+
+$item--hover--bg-color:    props.def(--o-menu--item--hover--bg-color, props.get(core.$theme, --border-mute)) !default;
+$item--hover--label-color: props.def(--o-menu--item--hover--label-color, props.get(core.$theme, --heading)) !default;
+
+$item--active--bg-color:    props.def(--o-menu--item--active--bg-color, props.get(core.$theme, --border)) !default;
+$item--active--label-color: props.def(--o-menu--item--active--label-color, props.get(core.$theme, --heading)) !default;
+
+$item--disabled--label-color: props.def(--o-menu--item--disabled--label-color, props.get(core.$theme, --text-disabled)) !default;
+
+$item--key-focus--border-color:  props.def(--o-menu--item--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
+$item--key-focus--outline-color: props.def(--o-menu--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index 8291750..c4f8e96 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -1,32 +1,33 @@
-@use 'sass:map';
 @use 'sass:list';
+@use 'sass:map';
 @use 'sass:string';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
-@use '../config';
+@use '../themes';
+@use '../props';
+@use '../core.vars' as core;
 
-@include iro.props-namespace('palette') {
-    @include iro.bem-object(iro.props-namespace()) {
+@mixin styles {
+    @include iro.bem-object('palette') {
         display:    flex;
         block-size: 3em;
 
         @include iro.bem-elem('item') {
             flex: 1 1 auto;
 
-            $palette:   map.get(config.$themes, config.$theme-default, --palettes, --base);
-            $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2));
+            $palette:   map.get(themes.$themes, themes.$theme-default, light, --palettes, --base);
+            $contrasts: map.get(themes.$themes, themes.$theme-default, light, --contrasts, list.nth($palette, 2));
 
             @for $i from 1 through list.length($contrasts) {
                 $key: list.nth(map.keys($contrasts), $i);
 
                 &:nth-child(#{$i}) {
-                    background-color: fn.global-color(--base $key);
+                    background-color: props.get(core.$theme, --base, $key);
                 }
             }
         }
 
-        @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, --palettes) {
-            $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2));
+        @each $palette-name, $palette in map.get(themes.$themes, themes.$theme-default, light, --palettes) {
+            $contrasts: map.get(themes.$themes, themes.$theme-default, light, --contrasts, list.nth($palette, 2));
 
             @include iro.bem-modifier(string.slice($palette-name, 3)) {
                 @include iro.bem-elem('item') {
@@ -34,7 +35,7 @@
                         $key: list.nth(map.keys($contrasts), $i);
         
                         &:nth-child(#{$i}) {
-                            background-color: fn.global-color($palette-name $key);
+                            background-color: props.get(core.$theme, $palette-name, $key);
                         }
                     }
                 }
@@ -42,8 +43,8 @@
         }
 
         @include iro.bem-modifier('static') {
-            @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
-                $contrasts: map.get(config.$static-colors, --contrasts);
+            @each $palette-name, $palette in map.get(themes.$static-colors, --palettes) {
+                $contrasts: map.get(themes.$static-colors, --contrasts);
 
                 @include iro.bem-modifier(string.slice($palette-name, 3)) {
                     @include iro.bem-elem('item') {
@@ -51,7 +52,7 @@
                             $key: list.nth(map.keys($contrasts), $i);
             
                             &:nth-child(#{$i}) {
-                                background-color: fn.global-color(#{$palette-name}-static $key);
+                                background-color: props.get(core.$static-colors, $palette-name, $key);
                             }
                         }
                     }
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
index 13550eb..f539da5 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -1,39 +1,24 @@
+@use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
+@use '../props';
 
-@include iro.props-namespace('popover') {
-    @include iro.props-store((
-        --dims: (
-            --z-index:   10000,
-            --pad-i:     0,
-            --pad-b:     fn.global-dim(--size --85),
-            --separator: fn.global-dim(--size --85),
-            --rounding:  fn.global-dim(--rounding),
-            --border:    fn.global-dim(--border --thin),
-        ),
-        --colors: (
-            --bg:        fn.global-color(--bg-l2),
-            --border:    fn.global-color(--border),
-            --filter:    drop-shadow(
-                fn.global-dim(--shadow --x)
-                fn.global-dim(--shadow --y)
-                fn.global-dim(--shadow --blur)
-                fn.global-color(--shadow)
-            ),
-        ),
-    ));
+@forward 'popover.vars';
+@use 'popover.vars' as vars;
 
-    @include iro.bem-object(iro.props-namespace()) {
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
+
+    @include iro.bem-object('popover') {
         position:           absolute;
         inset-block-start:  0;
         inset-inline-start: 0;
-        z-index:            fn.dim(--z-index);
-        padding-block:      fn.dim(--pad-b);
-        padding-inline:     fn.dim(--pad-i);
-        background-color:   fn.color(--bg);
-        filter:             fn.color(--filter);
-        border:             fn.dim(--border) solid fn.color(--border);
-        border-radius:      fn.dim(--rounding);
+        z-index:            props.get(vars.$z-index);
+        padding-block:      props.get(vars.$pad-b);
+        padding-inline:     props.get(vars.$pad-i);
+        background-color:   props.get(vars.$bg-color);
+        filter:             props.get(vars.$filter);
+        border:             props.get(vars.$border-width) solid props.get(vars.$border-color);
+        border-radius:      props.get(vars.$rounding);
         transform:          translate(var(--x), var(--y));
 
         @include iro.bem-modifier('up-left') {
diff --git a/src/objects/_popover.vars.scss b/src/objects/_popover.vars.scss
new file mode 100644
index 0000000..0d776ed
--- /dev/null
+++ b/src/objects/_popover.vars.scss
@@ -0,0 +1,14 @@
+@use 'sass:map';
+@use '../props';
+@use '../core.vars' as core;
+
+$z-index:         props.def(--o-popover--z-index, 11000) !default;
+$pad-i:           props.def(--o-popover--pad-i, 0) !default;
+$pad-b:           props.def(--o-popover--pad-b, props.get(core.$size--85)) !default;
+$separator-width: props.def(--o-popover--separator-width, props.get(core.$size--85)) !default;
+$rounding:        props.def(--o-popover--rounding, props.get(core.$rounding)) !default;
+$border-width:    props.def(--o-popover--border-width, props.get(core.$border-width--thin)) !default;
+
+$bg-color:     props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2)) !default;
+$border-color: props.def(--o-popover--border-color, props.get(core.$theme, --border)) !default;
+$filter:       props.def(--o-popover--filter, drop-shadow(props.get(core.$shadow--x) props.get(core.$shadow--y) props.get(core.$shadow--blur) props.get(core.$theme, --shadow))) !default;
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index ad3e8d4..c1182d0 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -1,88 +1,51 @@
+@use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
+@use '../props';
+@use '../core.vars' as core;
 
-@include iro.props-namespace('radio') {
-    @include iro.props-store((
-        --dims: (
-            --diameter:        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),
+@forward 'radio.vars';
+@use 'radio.vars' as vars;
 
-            --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: (
-            --circle-border: fn.global-color(--text-mute-more),
-            --circle-bg:     fn.global-color(--base --75),
-    
-            --hover: (
-                --label:         fn.global-color(--heading),
-                --circle-border: fn.global-color(--text-mute),
-            ),
-            --accent: (
-                --circle-border: fn.global-color(--accent --900),
-    
-                --hover: (
-                    --circle-border: fn.global-color(--accent --1000),
-                ),
-            ),
-            --disabled: (
-                --label:         fn.global-color(--text-disabled),
-                --circle-border: fn.global-color(--border-strong),
-                --circle-bg:     fn.global-color(--base --75),
-            ),
-            --key-focus: (
-                --label:   fn.global-color(--focus --text),
-                --border:  fn.global-color(--focus --border),
-                --outline: fn.global-color(--focus --outline),
-            ),
-        ),
-    ));
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
 
-    @include iro.bem-object(iro.props-namespace()) {
+    @include iro.bem-object('radio') {
         position:       relative;
         display:        inline-block;
-        padding-block:  fn.dim(--pad-b);
-        padding-inline: fn.dim(--pad-i);
+        padding-block:  props.get(vars.$pad-b);
+        padding-inline: props.get(vars.$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));
+            calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
+            calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));
     
         @include iro.bem-elem('circle') {
             display:            inline-block;
             flex:               0 0 auto;
-            inline-size:        fn.dim(--diameter);
-            block-size:         fn.dim(--diameter);
-            margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--diameter) - fn.dim(--key-focus --border-offset));
+            inline-size:        props.get(vars.$diameter);
+            block-size:         props.get(vars.$diameter);
+            margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$diameter) - props.get(vars.$key-focus--border-offset));
             vertical-align:     top;
-            background-color:   fn.color(--circle-border);
+            background-color:   props.get(vars.$circle-border-color);
             background-clip:    padding-box;
-            border:             fn.dim(--key-focus --border-offset) solid transparent;
+            border:             props.get(vars.$key-focus--border-offset) solid transparent;
             border-radius:      2em;
     
             &::after {
                 position:           relative;
-                inset-block-start:  fn.dim(--border);
-                inset-inline-start: fn.dim(--border);
+                inset-block-start:  props.get(vars.$border-width);
+                inset-inline-start: props.get(vars.$border-width);
                 display:            block;
-                inline-size:        calc(fn.dim(--diameter) - 2 * fn.dim(--border));
-                block-size:         calc(fn.dim(--diameter) - 2 * fn.dim(--border));
+                inline-size:        calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width));
+                block-size:         calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width));
                 content:            '';
-                background-color:   fn.color(--circle-bg);
-                border-radius:      fn.dim(--diameter);
+                background-color:   props.get(vars.$circle-bg-color);
+                border-radius:      props.get(vars.$diameter);
                 transition:         transform .2s ease;
             }
         }
     
         @include iro.bem-elem('label') {
-            margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset));
+            margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
         }
     
         @include iro.bem-elem('native') {
@@ -96,16 +59,16 @@
             margin:             0;
             overflow:           hidden;
             appearance:         none;
-            border-radius:      fn.dim(--rounding);
+            border-radius:      props.get(vars.$rounding);
     
             &:hover,
             &:focus-visible {
                 @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--hover --label);
+                    color: props.get(vars.$hover--label-color);
                 }
     
                 @include iro.bem-sibling-elem('circle') {
-                    background-color: fn.color(--hover --circle-border);
+                    background-color: props.get(vars.$hover--circle-border-color);
                 }
             }
     
@@ -119,26 +82,31 @@
     
             &:disabled {
                 @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--disabled --label);
+                    color: props.get(vars.$disabled--label-color);
                 }
     
                 @include iro.bem-sibling-elem('circle') {
-                    background-color: fn.color(--disabled --circle-border);
+                    background-color: props.get(vars.$disabled--circle-border-color);
     
                     &::after {
-                        background-color: fn.color(--disabled --circle-bg);
+                        background-color: props.get(vars.$disabled--circle-bg-color);
                     }
                 }
             }
 
             &:focus-visible {
                 @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--key-focus --label);
+                    color: props.get(vars.$key-focus--label-color);
                 }
 
                 @include iro.bem-sibling-elem('circle') {
-                    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);
+                    outline:    props.get(vars.$key-focus--border-color) 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(vars.$key-focus--outline-color);
                 }
             }
         }
@@ -153,29 +121,29 @@
             @include iro.bem-elem('native') {
                 &:checked {
                     @include iro.bem-sibling-elem('circle') {
-                        background-color: fn.color(--accent --circle-border);
+                        background-color: props.get(vars.$accent--circle-border-color);
                     }
         
                     &:hover,
                     &:focus-visible {
                         @include iro.bem-sibling-elem('circle') {
-                            background-color: fn.color(--accent --hover --circle-border);
+                            background-color: props.get(vars.$accent--hover--circle-border-color);
                         }
                     }
                 }
     
                 &:disabled {
                     @include iro.bem-sibling-elem('circle') {
-                        background-color: fn.color(--disabled --circle-border);
+                        background-color: props.get(vars.$disabled--circle-border-color);
         
                         &::after {
-                            background-color: fn.color(--disabled --circle-bg);
+                            background-color: props.get(vars.$disabled--circle-bg-color);
                         }
                     }
         
                     &:checked {
                         @include iro.bem-sibling-elem('circle') {
-                            background-color: fn.color(--disabled --circle-border);
+                            background-color: props.get(vars.$disabled--circle-border-color);
                         }
                     }
                 }
diff --git a/src/objects/_radio.vars.scss b/src/objects/_radio.vars.scss
new file mode 100644
index 0000000..b776dd4
--- /dev/null
+++ b/src/objects/_radio.vars.scss
@@ -0,0 +1,33 @@
+@use 'sass:map';
+@use '../props';
+@use '../core.vars' as core;
+
+$diameter:         props.def(--o-radio--diameter, props.get(core.$size--200)) !default;
+$label-gap:        props.def(--o-radio--label-gap, props.get(core.$size--125)) !default;
+$border-width:     props.def(--o-radio--border-width, props.get(core.$border-width--medium)) !default;
+$pad-i:            props.def(--o-radio--pad-i, props.get(core.$size--65)) !default;
+$pad-b:            props.def(--o-radio--pad-b, props.get(core.$size--65)) !default;
+$rounding:         props.def(--o-radio--rounding, props.get(core.$rounding)) !default;
+$spacing-sibling:  props.def(--o-radio--spacing-sibling, props.get(core.$size--300)) !default;
+
+$key-focus--border-width:  props.def(--o-radio--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
+$key-focus--border-offset: props.def(--o-radio--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
+$key-focus--outline-width: props.def(--o-radio--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+
+$circle-border-color: props.def(--o-radio--circle-border-color, props.get(core.$theme, --text-mute-more)) !default;
+$circle-bg-color:     props.def(--o-radio--circle-bg-color, props.get(core.$theme, --base, --75)) !default;
+
+$hover--label-color:         props.def(--o-radio--hover--label-color, props.get(core.$theme, --heading)) !default;
+$hover--circle-border-color: props.def(--o-radio--hover--circle-border-color, props.get(core.$theme, --text-mute)) !default;
+
+$accent--circle-border-color: props.def(--o-radio--accent--circle-border-color, props.get(core.$theme, --accent, --900)) !default;
+
+$accent--hover--circle-border-color: props.def(--o-radio--accent--hover--circle-border-color, props.get(core.$theme, --accent, --1000)) !default;
+
+$disabled--label-color:         props.def(--o-radio--disabled--label-color, props.get(core.$theme, --text-disabled)) !default;
+$disabled--circle-border-color: props.def(--o-radio--disabled--circle-border-color, props.get(core.$theme, --border-strong)) !default;
+$disabled--circle-bg-color:     props.def(--o-radio--disabled--circle-bg-color, props.get(core.$theme, --base, --75)) !default;
+
+$key-focus--label-color:   props.def(--o-radio--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default;
+$key-focus--border-color:  props.def(--o-radio--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
+$key-focus--outline-color: props.def(--o-radio--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss
index 237b5aa..3a85560 100644
--- a/src/objects/_side-nav.scss
+++ b/src/objects/_side-nav.scss
@@ -1,79 +1,41 @@
+@use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
+@use '../props';
+@use 'icon.vars' as icon;
 
-@use './icon';
+@forward 'side-nav.vars';
+@use 'side-nav.vars' as vars;
 
-@include iro.props-namespace('side-nav') {
-    @include iro.props-store((
-        --dims: (
-            --spacing: fn.global-dim(--size --50),
-            --header: (
-                --font-size: fn.global-dim(--font-size --50),
-            ),
-            --separator: fn.global-dim(--size --200),
-            --item: (
-                --pad-i:    fn.global-dim(--size --150),
-                --pad-b:    fn.global-dim(--size --100),
-                --rounding: fn.global-dim(--rounding),
-            
-                --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: (
-            --header: (
-                --label:  fn.global-color(--text-mute-more),
-            ),
-            --item: (
-                --hover: (
-                    --bg:    fn.global-color(--border-mute),
-                    --label: fn.global-color(--heading),
-                ),
-                --active: (
-                    --bg:    fn.global-color(--border),
-                    --label: fn.global-color(--heading),
-                ),
-                --disabled: (
-                    --label: fn.global-color(--text-disabled),
-                ),
-                --key-focus: (
-                    --border:  fn.global-color(--focus --border),
-                    --outline: fn.global-color(--focus --outline),
-                ),
-            ),
-        ),
-    ));
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
 
-    @include iro.bem-object(iro.props-namespace()) {
+    @include iro.bem-object('side-nav') {
         display:        flex;
         flex-direction: column;
-        gap:            fn.dim(--spacing);
+        gap:            props.get(vars.$spacing);
 
         @include iro.bem-elem('header') {
-            padding-block:  fn.dim(--item --pad-b);
-            padding-inline: fn.dim(--item --pad-i);
-            font-size:      fn.dim(--header --font-size);
+            padding-block:  props.get(vars.$item--pad-b);
+            padding-inline: props.get(vars.$item--pad-i);
+            font-size:      props.get(vars.$header--font-size);
             font-weight:    500;
-            color:          fn.color(--header --label);
+            color:          props.get(vars.$header--label-color);
             text-transform: uppercase;
             letter-spacing: .5px;
 
             @include iro.bem-next-twin-elem {
-                margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing));
+                margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing));
             }
         }
 
         @include iro.bem-elem('item') {
-            padding-block:   fn.dim(--item --pad-b);
-            padding-inline:  fn.dim(--item --pad-i);
-            margin:          calc(-1 * fn.dim(--item --key-focus --border-offset));
-            color:           fn.color(--item --disabled --label);
+            padding-block:   props.get(vars.$item--pad-b);
+            padding-inline:  props.get(vars.$item--pad-i);
+            margin:          calc(-1 * props.get(vars.$item--key-focus--border-offset));
+            color:           props.get(vars.$item--disabled--label-color);
             background-clip: padding-box;
-            border:          fn.dim(--item --key-focus --border-offset) solid transparent;
-            border-radius:   calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --border-offset));
+            border:          props.get(vars.$item--key-focus--border-offset) solid transparent;
+            border-radius:   calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset));
 
             &:link,
             &:visited,
@@ -81,23 +43,28 @@
                 color: currentColor;
 
                 @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') {
-                    color:            fn.color(--item --hover --label);
-                    background-color: fn.color(--item --hover --bg);
+                    color:            props.get(vars.$item--hover--label-color);
+                    background-color: props.get(vars.$item--hover--bg-color);
                 }
 
                 &:active {
-                    color:            fn.color(--item --active --label);
-                    background-color: fn.color(--item --active --bg);
+                    color:            props.get(vars.$item--active--label-color);
+                    background-color: props.get(vars.$item--active--bg-color);
                 }
 
                 &:focus-visible {
-                    outline:    fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border);
-                    box-shadow: 0 0 0 calc(fn.dim(--item --key-focus --border) + fn.dim(--item --key-focus --outline)) fn.color(--item --key-focus --outline);
+                    outline:    props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width);
+                    box-shadow:
+                        0
+                        0
+                        0
+                        calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width))
+                        props.get(vars.$item--key-focus--outline-color);
                 }
             }
 
             @include iro.bem-next-elem('header') {
-                margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing));
+                margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing));
             }
         }
 
@@ -105,18 +72,18 @@
             &:link,
             &:visited,
             &:enabled {
-                color: fn.color(--header --label);
+                color: props.get(vars.$header--label-color);
             }
         }
 
         @include iro.bem-elem('separator') {
-            block-size: fn.dim(--separator);
+            block-size: props.get(vars.$separator);
         }
 
         @include iro.bem-elem('icon-slot') {
             display:         flex;
             justify-content: center;
-            inline-size:     fn.foreign-dim(--icon, --size);
+            inline-size:     props.get(icon.$size);
         }
     }
 }
diff --git a/src/objects/_side-nav.vars.scss b/src/objects/_side-nav.vars.scss
new file mode 100644
index 0000000..08516a6
--- /dev/null
+++ b/src/objects/_side-nav.vars.scss
@@ -0,0 +1,28 @@
+@use 'sass:map';
+@use '../props';
+@use '../core.vars' as core;
+
+$spacing:           props.def(--o-side-nav--spacing, props.get(core.$size--50)) !default;
+$header--font-size: props.def(--o-side-nav--header--font-size, props.get(core.$size--50)) !default;
+$separator:         props.def(--o-side-nav--separator, props.get(core.$size--200)) !default;
+
+$item--pad-i:         props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default;
+$item--pad-b:         props.def(--o-side-nav--item--pad-b, props.get(core.$size--100)) !default;
+$item--rounding:      props.def(--o-side-nav--item--rounding, props.get(core.$rounding)) !default;
+
+$item--key-focus--border-width:  props.def(--o-side-nav--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
+$item--key-focus--border-offset: props.def(--o-side-nav--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
+$item--key-focus--outline-width: props.def(--o-side-nav--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+
+$header--label-color: props.def(--o-side-nav--header--label-color, props.get(core.$theme, --text-mute-more)) !default;
+
+$item--hover--bg-color:    props.def(--o-side-nav--item--hover--bg-color, props.get(core.$theme, --border-mute)) !default;
+$item--hover--label-color: props.def(--o-side-nav--item--hover--label-color, props.get(core.$theme, --heading)) !default;
+
+$item--active--bg-color:    props.def(--o-side-nav--item--active--bg-color, props.get(core.$theme, --border)) !default;
+$item--active--label-color: props.def(--o-side-nav--item--active--label-color, props.get(core.$theme, --heading)) !default;
+
+$item--disabled--label-color: props.def(--o-side-nav--item--disabled--label-color, props.get(core.$theme, --text-disabled)) !default;
+
+$item--key-focus--border-color:  props.def(--o-side-nav--item--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
+$item--key-focus--outline-color: props.def(--o-side-nav--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index ce1794a..2555894 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -1,38 +1,26 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
+@use '../props';
 
-$themes: 'accent' 'positive' 'negative' 'warning' !default;
+@forward 'status-indicator.vars';
+@use 'status-indicator.vars' as vars;
 
-@include iro.props-namespace('status-indicator') {
-    @include iro.props-store((
-        --dims: (
-            --size: fn.global-dim(--size --125),
-        ),
-        --colors: (
-            --default: fn.global-color(--border-strong),
-            --primary: fn.global-color(--text),
-        ),
-    ));
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
 
-    @each $theme in $themes {
-        @include iro.props-store((
-            --colors: (
-                --#{$theme}: fn.global-color(--#{$theme} --700),
-            ),
-        ));
-    }
-
-    @include iro.bem-object(iro.props-namespace()) {
+    @include iro.bem-object('status-indicator') {
         display:          inline-block;
-        inline-size:      fn.dim(--size);
-        block-size:       fn.dim(--size);
+        inline-size:      props.get(vars.$size);
+        block-size:       props.get(vars.$size);
         vertical-align:   middle;
-        background-color: fn.color(--default);
+        background-color: props.get(vars.$default);
         border-radius:    10em;
 
-        @each $theme in $themes {
-            @include iro.bem-is($theme) {
-                background-color: fn.color(--#{$theme});
+        @each $theme in map.keys(props.get(vars.$themes)) {
+            @include iro.bem-is(string.slice($theme, 3)) {
+                background-color: props.get(vars.$themes, $theme);
             }
         }
     }
diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss
new file mode 100644
index 0000000..1d0a06a
--- /dev/null
+++ b/src/objects/_status-indicator.vars.scss
@@ -0,0 +1,21 @@
+@use 'sass:map';
+@use '../props';
+@use '../themes' as themes;
+@use '../core.vars' as core;
+
+$size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !default;
+
+$default: props.def(--o-status-indicator--default, props.get(core.$theme, --border-strong)) !default;
+$primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text)) !default;
+
+$themes-config: map.keys(map.get(themes.$themes, themes.$theme-default, light, --palettes)) !default;
+
+$themes: props.def(--o-status-indicator);
+
+@each $theme in $themes-config {
+    @if $theme != --base {
+        $themes: props.merge($themes, (
+            $theme: props.get(core.$theme, $theme, --700),
+        ));
+    }
+}
-- 
cgit v1.2.3-70-g09d2