112 files changed, 5106 insertions, 4636 deletions

diff --git a/src/.old/layouts/_message-group.scss b/src/.old/layouts/_message-group.scss
deleted file mode 100644
index 235e242..0000000
--- a/src/.old/layouts/_message-group.scss
+++ /dev/null
@@ -1,139 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-// @use '../objects/message';
-
-@include iro.props-namespace('message-group') {
-    @include iro.props-store((
-        --dims: (
-            --spacing-x:  fn.global-dim(--size --225),
-            --spacing-y:  fn.global-dim(--size --150),
-            --arrow-size: fn.global-dim(--size --100),
-
-            --compact: (
-                --spacing-x: fn.global-dim(--size --225),
-                --spacing-y: fn.global-dim(--size --50),
-            )
-        )
-    ));
-
-    @include iro.bem-layout(iro.props-namespace()) {
-        display:               grid;
-        grid-template-columns: auto 1fr;
-        grid-auto-rows:        auto;
-        grid-template-areas:   'avatar message' 'avatar .';
-        align-items:           flex-start;
-        gap:                   0 fn.dim(--spacing-x);
-        
-        @include iro.bem-elem('avatar') {
-            grid-area:  avatar;
-            block-size: 0;
-        }
-        
-        @include iro.bem-elem('message') {
-            grid-column:     message;
-            position:        relative;
-            box-sizing:      border-box;
-            min-inline-size: 0;
-            max-inline-size: 100%;
-
-            &::before {
-                content:             '';
-                display:             none;
-                position:            absolute;
-                top:                 0;
-                left:                calc(-1 * fn.dim(--arrow-size));
-                border:              fn.dim(--arrow-size) solid fn.global-color(--bg-l2);
-                border-bottom-color: transparent;
-                border-left-color:   transparent;
-            }
-
-            @include iro.bem-next-twin-elem {
-                margin-top: fn.dim(--spacing-y);
-            }
-        }
-        
-        @include iro.bem-modifier('right') {
-            @include iro.bem-elem('message') {
-                &::before {
-                    right:              calc(-1 * fn.dim(--arrow-size));
-                    left:               auto;
-                    border-right-color: transparent;
-                    border-left-color:  fn.global-color(--bg-l2);
-                }
-            }
-        }
-        
-        @include iro.bem-modifier('compact') {
-            gap: 0 fn.dim(--compact --spacing-x);
-        
-            @include iro.bem-modifier('left') {
-                justify-items: start;
-            }
-        
-            @include iro.bem-modifier('right') {
-                justify-items: end;
-            }
-        
-            @include iro.bem-elem('message') {
-                @include iro.bem-next-twin-elem {
-                    margin-top: fn.dim(--compact --spacing-y);
-                }
-            }
-        }
-        
-        @include iro.bem-modifier('right') {
-            grid-template-columns: 1fr auto;
-            grid-template-areas:   'message avatar' '. avatar';
-        }
-        
-        @include iro.bem-modifier('no-avatar') {
-            grid-template-columns: 1fr;
-            grid-template-areas:   'message';
-
-            @include iro.bem-elem('avatar') {
-                display: none;
-            }
-        }
-        
-        @include iro.bem-modifier('arrow') {
-            @include iro.bem-elem('message') {
-                &::before {
-                    display: block;
-                }
-
-                @include iro.bem-next-twin-elem {
-                    &::before {
-                        display: none;
-                    }
-                }
-            }
-        }
-        
-        & + & {
-            @include iro.bem-modifier('merge') {
-                margin-top: fn.dim(--spacing-y);
-
-                @include iro.bem-elem('avatar') {
-                    visibility: hidden;
-                }
-
-                @include iro.bem-modifier('compact') {
-                    margin-top: fn.dim(--compact --spacing-y);
-                }
-
-                @include iro.bem-elem('merge-hide') {
-                    display: none;
-                }
-        
-                @include iro.bem-modifier('arrow') {
-                    @include iro.bem-elem('message') {
-                        &::before {
-                            display: none;
-                        }
-                    }
-                }
-            }
-        }
-    }
-}
diff --git a/src/.old/objects/_dialog.scss b/src/.old/objects/_dialog.scss
deleted file mode 100644
index 9333ce6..0000000
--- a/src/.old/objects/_dialog.scss
+++ /dev/null
@@ -1,152 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('dialog') {
-    @include iro.props-store((
-        --dims: (
-            --width-sm: iro.fn-px-to-rem(500px),
-            --width-md: iro.fn-px-to-rem(800px),
-            --width-lg: iro.fn-px-to-rem(1100px),
-            --rounding: 4px,
-            --border:   1px,
-
-            --header: (
-                --pad-x: fn.global-dim(--size --75),
-                --pad-y: fn.global-dim(--size --75),
-            ),
-
-            --sidebar: (
-                --pad-x: fn.global-dim(--size --75),
-                --pad-y: fn.global-dim(--size --75),
-            ),
-
-            --body: (
-                --pad-x: fn.global-dim(--size --200),
-                --pad-y: fn.global-dim(--size --200),
-            )
-        ),
-    ), 'dims');
-
-    @include iro.props-store((
-        --dims: (
-            --pad-x: fn.global-dim(--size --300),
-            --pad-y: fn.global-dim(--size --300),
-        ),
-    ), 'md');
-
-    @include iro.props-store((
-        --colors: (
-            --border: fn.global-color(--border --stable),
-        ),
-    ), 'colors');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:               grid;
-        grid-template-rows:    auto auto 1fr auto auto;
-        grid-template-columns: auto 1fr;
-        grid-template-areas:
-            'sidebar-header header'
-            'sidebar        top'
-            'sidebar        body'
-            'sidebar        bottom'
-            'sidebar        footer';
-        position:              relative;
-        box-sizing:            border-box;
-        flex:                  0 0 auto;
-        width:                 100%;
-        max-width:             fn.dim(--width-md);
-        margin:                0 auto;
-        overflow:              hidden;
-        border-radius:         fn.dim(--rounding);
-        background-clip:       padding-box;
-        background-color:      fn.global-color(--bg);
-        color:                 fn.global-color(--fg);
-
-        @include iro.bem-modifier('sm') {
-            max-width: fn.dim(--width-sm);
-        }
-
-        @include iro.bem-modifier('lg') {
-            max-width: fn.dim(--width-lg);
-        }
-
-        @include iro.bem-elem('header') {
-            grid-area: sidebar-header / sidebar-header / header / header;
-            padding:   fn.dim(--header --pad-y) fn.dim(--header --pad-x);
-
-            @include iro.bem-modifier('sidebar') {
-                grid-area:    sidebar-header;
-                border-right: 1px solid fn.color(--border);
-    
-                @include iro.bem-sibling-elem('header') {
-                    grid-area: header;
-                }
-            }
-        }
-
-        @include iro.bem-elem('title') {
-            margin-top:    0;
-            padding-right: calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x));
-            padding-left:  calc(fn.dim(--body --pad-x) - fn.dim(--header --pad-x));
-        }
-
-        @include iro.bem-elem('close-btn') {
-            margin-left: auto;
-        }
-
-        @include iro.bem-elem('sidebar') {
-            grid-area:    sidebar;
-            padding:      fn.dim(--sidebar --pad-y) fn.dim(--sidebar --pad-x);
-            overflow:     auto;
-            border-right: 1px solid fn.color(--border);
-        }
-
-        @include iro.bem-elem('top') {
-            grid-area: top;
-            min-width: 0;
-            padding:   fn.dim(--body --pad-y) fn.dim(--body --pad-x);
-
-            @include iro.bem-sibling-elem('body') {
-                padding-top: 0;
-            }
-        }
-
-        @include iro.bem-elem('bottom') {
-            grid-area: bottom;
-            min-width: 0;
-            padding:   fn.dim(--body --pad-y) fn.dim(--body --pad-x);
-
-            @include iro.bem-sibling-elem('body') {
-                padding-bottom: 0;
-            }
-        }
-
-        @include iro.bem-elem('body') {
-            grid-area:  body;
-            min-width:  0;
-            min-height: 0;
-            padding:    fn.dim(--body --pad-y) fn.dim(--body --pad-x);
-        }
-
-        @include iro.bem-elem('footer') {
-            grid-area:       footer;
-            justify-content: flex-end;
-            padding:         fn.dim(--body --pad-y) fn.dim(--body --pad-x);
-        }
-
-        @include iro.bem-modifier('scrollable') {
-            flex-shrink: 1;
-
-            @include iro.bem-elem('body') {
-                overflow:        auto;
-                scrollbar-color: fn.global-color(--obj-lo) transparent;
-            }
-        }
-
-        @include iro.bem-modifier('flat') {
-            @include iro.bem-elem('body') {
-                padding-top: 0;
-            }
-        }
-    }
-}
diff --git a/src/.old/objects/_icon-nav.scss b/src/.old/objects/_icon-nav.scss
deleted file mode 100644
index d1c6539..0000000
--- a/src/.old/objects/_icon-nav.scss
+++ /dev/null
@@ -1,20 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('icon-nav') {
-    @include iro.props-store((
-        --dims: (
-            --spacing: fn.global-dim(--size --100),
-        )
-    ), 'dims');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:     flex;
-        align-items: center;
-        gap:         fn.dim(--spacing);
-
-        @include iro.bem-modifier('vertical') {
-            flex-direction: column;
-        }
-    }
-}
diff --git a/src/.old/objects/_list-group.scss b/src/.old/objects/_list-group.scss
deleted file mode 100644
index a346828..0000000
--- a/src/.old/objects/_list-group.scss
+++ /dev/null
@@ -1,61 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('list-group') {
-    @include iro.props-store((
-        --dims: (
-            --pad-i:    fn.global-dim(--size --175),
-            --pad-b:    fn.global-dim(--size --125),
-            --rounding: fn.global-dim(--rounding),
-            --border:   fn.global-dim(--border --thin),
-        ),
-        --colors: (
-            --bg:     fn.global-color(--base --75),
-            --border: fn.global-color(--border),
-            --hover:  fn.global-color(--border-mute),
-            --active: fn.global-color(--border),
-        )
-    ));
-
-    @include iro.bem-object(iro.props-namespace()) {
-        border:           fn.dim(--border) solid fn.color(--border);
-        border-radius:    fn.dim(--rounding);
-        background-color: fn.color(--bg);
-
-        @include iro.bem-elem('item') {
-            padding-block:  fn.dim(--pad-b);
-            padding-inline: fn.dim(--pad-i);
-
-            @include iro.bem-next-twin-elem {
-                border-width:             0;
-                border-block-start-width: fn.dim(--border);
-                border-style:             solid;
-                border-color:             fn.color(--border);
-            }
-
-            @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
-                &:hover,
-                &:focus-visible {
-                    background-color: fn.color(--hover);
-                }
-
-                &:active {
-                    background-color: fn.color(--active);
-                }
-            }
-        }
-
-        @include iro.bem-modifier('horizontal') {
-            display: flex;
-
-            @include iro.bem-elem('item') {
-                flex: 1 0 auto;
-
-                @include iro.bem-next-twin-elem {
-                    border-block-start-width:  0;
-                    border-inline-start-width: fn.dim(--border);
-                }
-            }
-        }
-    }
-}
diff --git a/src/.old/objects/_message.scss b/src/.old/objects/_message.scss
deleted file mode 100644
index 283ce26..0000000
--- a/src/.old/objects/_message.scss
+++ /dev/null
@@ -1,51 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('message') {
-    @include iro.props-store((
-        --dims: (
-            --bubble: (
-                --pad-x:    fn.global-dim(--size --200),
-                --pad-y:    fn.global-dim(--size --150),
-                --rounding: 0,
-
-                --75: (
-                    --pad-x: fn.global-dim(--size --150),
-                    --pad-y: fn.global-dim(--size --85),
-                ),
-            ),
-        )
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --highlight: fn.global-color(--fg-lo),
-        ),
-    ), 'colors');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        @include iro.bem-elem('suffix') {
-            margin-left: 1em;
-            float:       right;
-        }
-        
-        @include iro.bem-modifier('bubble') {
-            padding:          fn.dim(--bubble --pad-y) fn.dim(--bubble --pad-x);
-            border-radius:    fn.dim(--bubble --rounding);
-            background-color: fn.global-color(--bg);
-            color:            fn.global-color(--fg);
-        
-            @include iro.bem-elem('suffix') {
-                transform: translate(.2em, .2em);
-            }
-
-            @include iro.bem-modifier('highlight') {
-                box-shadow: -3px 0 0 0 fn.color(--highlight);
-            }
-        
-            @include iro.bem-modifier('75') {
-                padding: fn.dim(--bubble --75 --pad-y) fn.dim(--bubble --75 --pad-x);
-            }
-        }
-    }
-}
diff --git a/src/.old/objects/_overflow-button.scss b/src/.old/objects/_overflow-button.scss
deleted file mode 100644
index b15ea1f..0000000
--- a/src/.old/objects/_overflow-button.scss
+++ /dev/null
@@ -1,243 +0,0 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('overflow-button') {
-    @include iro.props-store((
-        --dims: (
-            --pad-x:   calc(fn.global-dim(--size --125) - 1px),
-            --pad-y:   calc(fn.global-dim(--size --125) - 1px),
-            --spacing: fn.global-dim(--size --50)
-        ),
-    ), 'dims');
-
-    @include iro.props-store((
-        --colors: (
-            --label:  fn.global-color(--fg),
-    
-            --hover: (
-                --bg:    fn.global-color(--obj-hi),
-                --label: fn.global-color(--fg-lo),
-            ),
-            --active: (
-                --bg:    fn.global-color(--obj),
-                --label: fn.global-color(--fg-lo),
-            ),
-            --selected: (
-                --bg:    fn.global-color(--obj-hi),
-                --label: fn.global-color(--fg),
-
-                --hover: (
-                    --bg:    fn.global-color(--obj),
-                    --label: fn.global-color(--fg-lo),
-                ),
-            ),
-            --disabled: (
-                --label: fn.global-color(--fg-hi3),
-            ),
-            --key-focus: (
-                --border: fn.global-color(--focus --fill),
-                --shadow: fn.global-color(--focus --shadow),
-            ),
-
-            --red: (
-                --hover: (
-                    --bg:    fn.global-color(--red --quiet --bg),
-                    --label: fn.global-color(--red --quiet --fg),
-                ),
-                --active: (
-                    --bg:    fn.global-color(--red --quiet --obj),
-                    --label: fn.global-color(--red --quiet --fg-lo),
-                ),
-
-                --selected: (
-                    --bg:    fn.global-color(--red --quiet --bg),
-                    --label: fn.global-color(--red --quiet --fg),
-    
-                    --hover: (
-                        --bg:    fn.global-color(--red --quiet --obj),
-                        --label: fn.global-color(--red --quiet --fg-lo),
-                    ),
-                ),
-            ),
-
-            --blue: (
-                --hover: (
-                    --bg:    fn.global-color(--blue --quiet --bg),
-                    --label: fn.global-color(--blue --quiet --fg),
-                ),
-                --active: (
-                    --bg:    fn.global-color(--blue --quiet --obj),
-                    --label: fn.global-color(--blue --quiet --fg-lo),
-                ),
-
-                --selected: (
-                    --bg:    fn.global-color(--blue --quiet --bg),
-                    --label: fn.global-color(--blue --quiet --fg),
-    
-                    --hover: (
-                        --bg:    fn.global-color(--blue --quiet --obj),
-                        --label: fn.global-color(--blue --quiet --fg-lo),
-                    ),
-                ),
-            ),
-
-            --green: (
-                --hover: (
-                    --bg:    fn.global-color(--green --quiet --bg),
-                    --label: fn.global-color(--green --quiet --fg),
-                ),
-                --active: (
-                    --bg:    fn.global-color(--green --quiet --obj),
-                    --label: fn.global-color(--green --quiet --fg-lo),
-                ),
-
-                --selected: (
-                    --bg:    fn.global-color(--green --quiet --bg),
-                    --label: fn.global-color(--green --quiet --fg),
-    
-                    --hover: (
-                        --bg:    fn.global-color(--green --quiet --obj),
-                        --label: fn.global-color(--green --quiet --fg-lo),
-                    ),
-                ),
-            )
-        ),
-    ), 'colors');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display: inline-block;
-        color:   fn.color(--disabled --label);
-
-        @include iro.bem-elem('outside') {
-            display:      inline-block;
-            margin-right: fn.dim(--spacing);
-        }
-
-        @include iro.bem-elem('inside') {
-            display:         inline-block;
-            padding:         fn.dim(--pad-y) fn.dim(--pad-x);
-            border:          2px solid transparent;
-            border-radius:   100em;
-            line-height:     1;
-            text-align:      center;
-            text-decoration: none;
-            text-overflow:   ellipsis;
-            white-space:     nowrap;
-
-            @include iro.bem-next-elem('outside') {
-                margin-right: 0;
-                margin-left:  fn.dim(--spacing);
-            }
-        }
-
-        &:link,
-        &:visited,
-        &:enabled {
-            color: fn.color(--label);
-
-            &:hover {
-                @include iro.bem-elem('inside') {
-                    background-color: fn.color(--hover --bg);
-                    color:            fn.color(--hover --label);
-                }
-            }
-    
-            &:active {
-                @include iro.bem-elem('inside') {
-                    background-color: fn.color(--active --bg);
-                    color:            fn.color(--active --label);
-                }
-            }
-    
-            @include iro.bem-at-theme('keyboard') {
-                &:focus {
-                    @include iro.bem-elem('inside') {
-                        background-color: fn.color(--hover --bg);
-                        color:            fn.color(--hover --label);
-                    }
-                }
-            }
-        }
-    
-        @include iro.bem-is('selected') {
-            @include iro.bem-elem('inside') {
-                background-color: fn.color(--selected --bg);    
-            }
-        
-            &:link,
-            &:visited,
-            &:enabled {
-                @include iro.bem-elem('inside') {
-                    color: fn.color(--selected --label);        
-                }
-            
-                &:hover,
-                &:active {
-                    @include iro.bem-elem('inside') {
-                        background-color: fn.color(--selected --hover --bg);
-                        color:            fn.color(--selected --hover --label);
-                    }
-                }
-    
-                @include iro.bem-at-theme('keyboard') {
-                    &:focus {
-                        @include iro.bem-elem('inside') {
-                            background-color: fn.color(--selected --bg);
-                            color:            fn.color(--selected --hover --label);
-                        }
-                    }
-                }
-            }
-        }
-
-        @each $color in 'red' 'blue' 'green' {
-            @include iro.bem-modifier($color) {
-                &:link,
-                &:visited,
-                &:enabled {
-                    &:hover {
-                        @include iro.bem-elem('inside') {
-                            background-color: fn.color(--#{$color} --hover --bg);
-                            color:            fn.color(--#{$color} --hover --label);
-                        }
-                    }
-            
-                    &:active {
-                        @include iro.bem-elem('inside') {
-                            background-color: fn.color(--#{$color} --active --bg);
-                            color:            fn.color(--#{$color} --active --label);
-                        }
-                    }
-                }
-        
-                @include iro.bem-is('selected') {
-                    &:link,
-                    &:visited,
-                    &:enabled {
-                        @include iro.bem-elem('inside') {
-                            background-color: fn.color(--#{$color} --selected --bg);
-                            color:            fn.color(--#{$color} --selected --label);
-                        }
-    
-                        &:hover,
-                        &:active {
-                            @include iro.bem-elem('inside') {
-                                background-color: fn.color(--#{$color} --selected --hover --bg);
-                                color:            fn.color(--#{$color} --selected --hover --label);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    
-        @include iro.bem-at-theme('keyboard') {
-            &:focus {
-                @include iro.bem-elem('inside') {
-                    border-color: fn.color(--key-focus --border);
-                    box-shadow:   fn.color(--key-focus --shadow);
-                }
-            }
-        }
-    }
-}
diff --git a/src/functions/colors/_apca.scss b/src/_apca.scss
index d9236b2..c65f46e 100644
--- a/src/functions/colors/_apca.scss
+++ b/src/_apca.scss
@@ -1,5 +1,5 @@
-/* stylelint-disable scss/dollar-variable-pattern */
-/* stylelint-disable scss/at-function-pattern */
+// stylelint-disable scss/dollar-variable-pattern
+// stylelint-disable scss/at-function-pattern
 
 @use 'sass:color';
 @use 'sass:list';
@@ -9,43 +9,46 @@
 $SA98G: (
     mainTRC:     2.4,
 
-    sRco:        0.2126729, 
-    sGco:        0.7151522, 
-    sBco:        0.0721750,
+    sRco:        .2126729, 
+    sGco:        .7151522, 
+    sBco:        .072175,
 
-    normBG:      0.56, 
-    normTXT:     0.57,
-    revTXT:      0.62,
-    revBG:       0.65,
+    normBG:      .56, 
+    normTXT:     .57,
+    revTXT:      .62,
+    revBG:       .65,
 
-    blkThrs:     0.022,
+    blkThrs:     .022,
     blkClmp:     1.414,
     scaleBoW:    1.14,
     scaleWoB:    1.14,
-    loBoWoffset: 0.027,
-    loWoBoffset: 0.027,
-    deltaYmin:   0.0005,
-    loClip:      0.0001,
-
-    mFactor:     1.94685544331710,
-    mOffsetIn:   0.03873938165714010,
-    mExpAdj:     0.2833433964208690,
-    mOffsetOut:  0.3128657958707580,
+    loBoWoffset: .027,
+    loWoBoffset: .027,
+    deltaYmin:   .0005,
+    loClip:      .0001,
+
+    mFactor:     1.9468554433171,
+    mOffsetIn:   .0387393816571401,
+    mExpAdj:     .283343396420869,
+    mOffsetOut:  .312865795870758,
 );
 
-@function apca_sRGB_to_Y($color) {
-    @return map.get($SA98G, sRco) * math.pow(math.div(color.red($color), 255), map.get($SA98G, mainTRC)) +
-        map.get($SA98G, sGco) * math.pow(math.div(color.green($color), 255), map.get($SA98G, mainTRC)) +
-        map.get($SA98G, sBco) * math.pow(math.div(color.blue($color), 255), map.get($SA98G, mainTRC));
+@function sRGB_to_Y($color) {
+    $rgb: color.to-space($color, rgb);
+
+    @return map.get($SA98G, sRco) * math.pow(math.div(color.channel($rgb, 'red'), 255), map.get($SA98G, mainTRC)) +
+        map.get($SA98G, sGco) * math.pow(math.div(color.channel($rgb, 'green'), 255), map.get($SA98G, mainTRC)) +
+        map.get($SA98G, sBco) * math.pow(math.div(color.channel($rgb, 'blue'), 255), map.get($SA98G, mainTRC));
 }
 
-@function apca_Y_to_sRGB($y) {
+@function Y_to_sRGB($y) {
     $c: math.round(math.pow($y, math.div(1, map.get($SA98G, mainTRC))) * 255);
     @return rgb($c, $c, $c);
 }
 
-@function apcaContrast($txtY, $bgY) {
-    $icp: 0.0 1.1;
+@function contrast($txtY, $bgY) {
+    /* stylelint-disable-next-line @stylistic/number-no-trailing-zeros */
+    $icp: .0 1.1;
 
     @if math.min($txtY, $bgY) < list.nth($icp, 1) or math.max($txtY, $bgY) > list.nth($icp, 2) {
         @return 0;
@@ -78,10 +81,10 @@ $SA98G: (
         }
     }
 
-    @return $outputContrast * 100.0;
+    @return $outputContrast * 100;
 }
 
-@function apcaReverse($contrast, $knownY, $knownType: 'bg') {
+@function reverse($contrast, $knownY, $knownType: 'bg') {
     $unknownY:   $knownY;
 
     $knownExp:   0;
@@ -90,7 +93,7 @@ $SA98G: (
     $scale:  map.get($SA98G, if($contrast > 0, scaleBoW, scaleWoB));
     $offset: map.get($SA98G, if($contrast > 0, loBoWoffset, loWoBoffset));
 
-    $contrast: math.div($contrast * 0.01 + $offset, $scale);
+    $contrast: math.div($contrast * .01 + $offset, $scale);
 
     @if $knownY <= map.get($SA98G, blkThrs) {
         $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp));
@@ -115,10 +118,7 @@ $SA98G: (
     }
 
     @if $unknownY <= map.get($SA98G, blkThrs) {
-        $unknownY: math.pow(
-            ($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor),
-            math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp))
-        ) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut);
+        $unknownY: math.pow(($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor), math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp))) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut);
     }
 
     $unknownY: math.max(math.min($unknownY, 1), 0);
diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss
deleted file mode 100644
index a2ee404..0000000
--- a/src/_apply-vars.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-@use 'sass:map';
-@use 'iro-sass/src/index' as iro;
-@use 'include-media/dist/include-media' as media;
-
-:root {
-    @include iro.props-assign;
-
-    @each $breakpoint in map.keys(media.$breakpoints) {
-        @include media.media('<=#{$breakpoint}') {
-            @include iro.props-assign($breakpoint);
-        }
-    }
-
-    @media (prefers-color-scheme: dark) {
-        @include iro.props-assign('dark');
-    }
-}
diff --git a/src/_base.scss b/src/_base.scss
deleted file mode 100644
index 8e4c1d9..0000000
--- a/src/_base.scss
+++ /dev/null
@@ -1,145 +0,0 @@
-@use 'sass:math';
-@use 'iro-sass/src/index' as iro;
-@use 'functions' as fn;
-@use 'mixins' as mx;
-@use 'config';
-
-html {
-    scrollbar-color: fn.color(--text-disabled) transparent;
-    accent-color:    fn.color(--accent --600);
-}
-
-html,
-body {
-    block-size: 100%;
-}
-
-body {
-    @include mx.set-font(--standard, (--size: fn.dim(--font-size --100)));
-
-    margin:           0;
-    padding:          0;
-    background-color: fn.color(--bg-base);
-    color:            fn.color(--text);
-}
-
-pre,
-code {
-    font-feature-settings: 'calt' 0, 'dlig' 1, 'ss09' 1;
-}
-
-pre,
-code {
-    @include mx.set-font(--mono, (--size: .93em));
-}
-
-pre {
-    margin:     0;
-    overflow-x: auto;
-
-    code {
-        color:     currentColor;
-        font-size: 1em;
-    }
-}
-
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-    @include mx.heading-medium(--md);
-
-    margin-block: fn.dim(--heading --margin-bs) 0;
-
-    & + & {
-        margin-block-start: fn.dim(--heading --margin-bs-sibling);
-    }
-}
-
-p {
-    margin-block: fn.dim(--paragraph --margin-bs) 0;
-
-    &:empty {
-        display: none;
-    }
-}
-
-strong {
-    font-weight: bold;
-}
-
-small {
-    font-size: fn.dim(--font-size --75);
-}
-
-ul,
-ol {
-    margin:     0;
-    padding:    0;
-    list-style: none;
-}
-
-li {
-    margin:  0;
-    padding: 0;
-}
-
-:focus,
-:focus-visible {
-    outline: 0;
-}
-
-:link,
-:visited {
-    color:           currentColor;
-    text-decoration: none;
-}
-
-
-button,
-input,
-textarea {
-    box-sizing:     content-box;
-    margin:         0;
-    padding:        0;
-    border:         0;
-    background:     none;
-    color:          currentColor;
-    font-family:    inherit;
-    font-size:      1em;
-    font-style:     inherit;
-    font-weight:    inherit;
-    line-height:    inherit;
-    text-align:     inherit;
-    text-transform: inherit;
-    appearance:     none;
-
-    &::-moz-focus-inner {
-        border: 0;
-    }
-}
-
-input,
-textarea {
-    &::placeholder {
-        opacity: 1;
-        color:   fn.color(--text-mute);
-    }
-
-    &:disabled {
-        color: fn.color(--text-disabled);
-    }
-}
-
-textarea {
-    block-size: calc(1em * fn.dim(--font --standard --line-height));
-}
-
-hr {
-    block-size:       fn.dim(--border --thin);
-    margin:           0;
-    border:           0;
-    background-color: fn.color(--border);
-}
diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss
new file mode 100644
index 0000000..cf23f29
--- /dev/null
+++ b/src/_config.defaults.scss
@@ -0,0 +1,187 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+@use 'iro-sass/src/easing' as easing;
+
+$static-colors: (
+    --base: hsl(0, 0%, 98%),
+
+    --levels: (
+        --100:  math.div(0, 12) * 110 - 10,
+        --200:  math.div(1, 12) * 110 - 10,
+        --300:  math.div(2, 12) * 110 - 10,
+        --400:  math.div(3, 12) * 110 - 10,
+        --500:  math.div(4, 12) * 110 - 10,
+        --600:  math.div(5, 12) * 110 - 10,
+        --700:  math.div(6, 12) * 110 - 10,
+        --800:  math.div(7, 12) * 110 - 10,
+        --900:  math.div(8, 12) * 110 - 10,
+        --1000: math.div(9, 12) * 110 - 10,
+        --1100: math.div(10, 12) * 110 - 10,
+        --1200: math.div(11, 12) * 110 - 10,
+        --1300: math.div(12, 12) * 110 - 10,
+    ),
+
+    --palettes: (
+        --blue:   oklch(56% .14 275.25),
+        --purple: oklch(56% .14 305.58),
+        --red:    oklch(56% .14 14.69),
+        --green:  oklch(56% .14 150.48),
+        --yellow: oklch(56% .14 84.08),
+    ),
+
+    --transparents: (
+        --100: 0,
+        --200: .1,
+        --300: .25,
+        --400: .4,
+        --500: .55,
+        --600: .7,
+        --700: .8,
+        --800: .9,
+        --900: 1,
+    ),
+);
+
+$semantic-colors-common: (
+    --accent:          --blue,
+    --accent-static:   --blue-static,
+    --positive:        --green,
+    --positive-static: --green-static,
+    --negative:        --red,
+    --negative-static: --red-static,
+    --warning:         --yellow,
+    --warning-static:  --yellow-static,
+
+    --focus-raw:       --accent,
+    --focus-static:    --accent-static,
+
+    --border-mute:     --base --200,
+    --border:          --base --300,
+    --border-strong:   --base --400,
+
+    --text-disabled:   --base --500,
+    --text-mute-more:  --base --600,
+    --text-mute:       --base --700,
+    --text:            --base --800,
+    --heading:         --base --900,
+
+    --focus: (
+        --outline:       --focus-raw --400,
+        --border-mute:   --focus-raw --900,
+        --border:        --focus-raw --1000,
+        --border-text:   --focus-raw --1000-text,
+        --border-strong: --focus-raw --1100,
+        --text:          --focus-raw --1100,
+    ),
+);
+
+$theme-light: (
+    --levels: (
+        --grays: (
+            --50:  (-8) (.2 + .8 * easing.ease(math.div(0, 12))),
+            --75:  (-4) (.2 + .8 * easing.ease(math.div(1, 12))),
+            --100: (0) (.2 + .8 * easing.ease(math.div(2, 12))),
+        
+            --200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))),
+            --300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))),
+            --400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))),
+        
+            --500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))),
+            --600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))),
+            --700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))),
+            --800: (easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98) (.2 + .8 * easing.ease(math.div(9, 12))),
+            --900: (106) (.2 + .8 * easing.ease(math.div(10, 12))),
+        ),
+
+        --colors: (
+            --100:  (math.div(0, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(0, 12))),
+            --200:  (math.div(1, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(1, 12))),
+            --300:  (math.div(2, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(2, 12))),
+            --400:  (math.div(3, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(3, 12))),
+            --500:  (math.div(4, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(4, 12))),
+            --600:  (math.div(5, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(5, 12))),
+            --700:  (math.div(6, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(6, 12))),
+            --800:  (math.div(7, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(7, 12))),
+            --900:  (math.div(8, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(8, 12))),
+            --1000: (math.div(9, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(9, 12))),
+            --1100: (math.div(10, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(10, 12))),
+            --1200: (math.div(11, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(11, 12))),
+            --1300: (math.div(12, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(12, 12))),
+        ),
+    ),
+    
+    --palettes: (
+        --base:   hsl(260, 70%, 98%)    --grays,
+        --blue:   oklch(56% .16 275.25) --colors,
+        --purple: oklch(56% .16 305.58) --colors,
+        --red:    oklch(56% .16 14.69)  --colors,
+        --green:  oklch(56% .16 150.48) --colors,
+        --yellow: oklch(56% .16 84.08)  --colors,
+    ),
+
+    --semantic: map.merge($semantic-colors-common, (
+        --bg-l2:   --base --50,
+        --bg-l1:   --base --100,
+        --bg-base: --base --200,
+    )),
+
+    --constants: (
+        --shadow: rgba(#000, .15),
+    ),
+);
+
+$theme-dark: (
+    --levels: (
+        --grays: (
+            --50:  (4.4) (.3 + .7 * easing.ease(math.div(10, 12))),
+            --75:  (2.5) (.3 + .7 * easing.ease(math.div(9, 12))),
+            --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))),
+        
+            --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))),
+            --300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))),
+            --400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))),
+        
+            --500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))),
+            --600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))),
+            --700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))),
+            --800: (easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108) (.3 + .7 * easing.ease(math.div(1, 12))),
+            --900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))),
+        ),
+
+        --colors: (
+            --100:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(0, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(0, 12))),
+            --200:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(1, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(1, 12))),
+            --300:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(2, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(2, 12))),
+            --400:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(3, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(3, 12))),
+            --500:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(4, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(4, 12))),
+            --600:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(5, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(5, 12))),
+            --700:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(6, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(6, 12))),
+            --800:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(7, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(7, 12))),
+            --900:  (easing.cubic-bezier(.2, .1, .8, .8, math.div(8, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(8, 12))),
+            --1000: (easing.cubic-bezier(.2, .1, .8, .8, math.div(9, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(9, 12))),
+            --1100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(10, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(10, 12))),
+            --1200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(11, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(11, 12))),
+            --1300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(12, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(12, 12))),
+        ),
+    ),
+    
+    --palettes: (
+        --base:   hsl(257, 7%, 20%)     --grays,
+        --blue:   oklch(56% .16 275.25) --colors,
+        --purple: oklch(56% .16 305.58) --colors,
+        --red:    oklch(56% .16 14.69)  --colors,
+        --green:  oklch(56% .16 150.48) --colors,
+        --yellow: oklch(56% .16 84.08)  --colors,
+    ),
+
+    --semantic: map.merge($semantic-colors-common, (
+        --bg-base: --base --50,
+        --bg-l1:   --base --75,
+        --bg-l2:   --base --100,
+    )),
+
+    --constants: (
+        --shadow: rgba(#000, .5),
+    ),
+);
diff --git a/src/_config.scss b/src/_config.scss
index 5449a04..284d6e7 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -1,230 +1,27 @@
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:math';
-@use 'iro-sass/src/index' as iro;
-@use 'iro-sass/src/responsive' as res;
 @use 'iro-sass/src/easing' as easing;
-@use 'include-media/dist/include-media' as media;
-@use '@oddbird/blend';
+@use 'config.defaults' as def;
 
-iro.$vars-root-size: 16px;
+$static-colors-override: () !default;
+$static-colors: map.deep-merge(def.$static-colors, $static-colors-override) !default;
 
-media.$breakpoints: (
-    lg: 1340px,
-    md: 900px,
-    sm: 620px,
-    xs: 400px,
-);
+$semantic-colors-common-override: () !default;
+$semantic-colors-common: map.deep-merge(def.$semantic-colors-common, $semantic-colors-common-override) !default;
 
-media.$unit-intervals: (
-    'px':  1,
-    'em':  .01,
-    'rem': .01,
-    '':    0
-);
+$theme-light-override: () !default;
+$theme-light: map.deep-merge(def.$theme-light, $theme-light-override) !default;
 
-res.$named-viewports: media.$breakpoints;
+$theme-dark-override: () !default;
+$theme-dark: map.deep-merge(def.$theme-dark, $theme-dark-override) !default;
 
-$palette-precision: 0.01 !default;
-
-$palette-chroma-easing: 'ease' !default;
-
-$static-colors: (
-    --base: hsl(0, 0%, 98%),
-
-    --contrasts: (
-        --100:  math.div( 0, 12) * 110 - 10,
-        --200:  math.div( 1, 12) * 110 - 10,
-        --300:  math.div( 2, 12) * 110 - 10,
-        --400:  math.div( 3, 12) * 110 - 10,
-        --500:  math.div( 4, 12) * 110 - 10,
-        --600:  math.div( 5, 12) * 110 - 10,
-        --700:  math.div( 6, 12) * 110 - 10,
-        --800:  math.div( 7, 12) * 110 - 10,
-        --900:  math.div( 8, 12) * 110 - 10,
-        --1000: math.div( 9, 12) * 110 - 10,
-        --1100: math.div(10, 12) * 110 - 10,
-        --1200: math.div(11, 12) * 110 - 10,
-        --1300: math.div(12, 12) * 110 - 10,
-    ),
-
-    --palettes: (
-        --blue:   oklch(56% 0.14 265.25),
-        --purple: oklch(56% 0.14 305.58),
-        --red:    oklch(56% 0.14 18.69),
-        --green:  oklch(56% 0.14 150.48),
-        --yellow: oklch(56% 0.14 84.08),
-    ),
-
-    --transparents: (
-        --100: 0,
-        --200: .1,
-        --300: .25,
-        --400: .4,
-        --500: .55,
-        --600: .7,
-        --700: .8,
-        --800: .9,
-        --900: 1,
-    ),
-) !default;
-
-$semantic-colors-common: (
-    --accent:          --blue,
-    --accent-static:   --blue-static,
-    --positive:        --green,
-    --positive-static: --green-static,
-    --negative:        --red,
-    --negative-static: --red-static,
-    --warning:         --yellow,
-    --warning-static:  --yellow-static,
-
-    --focus-raw:       --accent,
-    --focus-static:    --accent-static,
-
-    --border-mute:     --base --200,
-    --border:          --base --300,
-    --border-strong:   --base --400,
-
-    --text-disabled:   --base --500,
-    --text-mute-more:  --base --600,
-    --text-mute:       --base --700,
-    --text:            --base --800,
-    --heading:         --base --900,
-
-    --focus: (
-        --outline:       --focus-raw --400,
-        --border-mute:   --focus-raw --900,
-        --border:        --focus-raw --1000,
-        --border-text:   --focus-raw --1000-text,
-        --border-strong: --focus-raw --1100,
-        --text:          --focus-raw --1100,
-    ),
-) !default;
-
-$theme-light: (
-    --contrasts: (
-        --grays: (
-            --50:  -8,
-            --75:  -4,
-            --100: 0,
-        
-            --200: easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 100,
-            --300: easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 100,
-            --400: easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 100,
-        
-            --500: easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 100,
-            --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 100,
-            --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 100,
-            --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 100,
-            --900: 108,
-        ),
-
-        --colors: (
-            --100:  math.div( 0, 12) * 96 + 5,
-            --200:  math.div( 1, 12) * 96 + 5,
-            --300:  math.div( 2, 12) * 96 + 5,
-            --400:  math.div( 3, 12) * 96 + 5,
-            --500:  math.div( 4, 12) * 96 + 5,
-            --600:  math.div( 5, 12) * 96 + 5,
-            --700:  math.div( 6, 12) * 96 + 5,
-            --800:  math.div( 7, 12) * 96 + 5,
-            --900:  math.div( 8, 12) * 96 + 5,
-            --1000: math.div( 9, 12) * 96 + 5,
-            --1100: math.div(10, 12) * 96 + 5,
-            --1200: math.div(11, 12) * 96 + 5,
-            --1300: math.div(12, 12) * 96 + 5,
-        ),
-    ),
-
-    --ranges: (
-        --full:  1,
-        --muted: .1,
-    ),
-
-    --palettes: (
-        --base:  hsl(0, 0%, 98%)       --grays --full,
-        --blue:   oklch(56% 0.16 265.25) --colors --muted,
-        --purple: oklch(56% 0.16 305.58) --colors --muted,
-        --red:    oklch(56% 0.16 18.69)  --colors --muted,
-        --green:  oklch(56% 0.16 150.48) --colors --muted,
-        --yellow: oklch(56% 0.16 84.08)  --colors --muted,
-    ),
-
-    --semantic: map.merge($semantic-colors-common, (
-        --bg-l2:   --base --50,
-        --bg-l1:   --base --100,
-        --bg-base: --base --200,
-    )),
-
-    --constants: (
-        --shadow: rgba(#000, 0.15),
-    ),
-) !default;
-
-$theme-dark: (
-    --contrasts: (
-        --grays: (
-            --50:  4.4,
-            --75:  2.2,
-            --100: 0,
-        
-            --200: easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108,
-            --300: easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108,
-            --400: easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108,
-        
-            --500: easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108,
-            --600: easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108,
-            --700: easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108,
-            --800: easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108,
-            --900: easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108,
-        ),
-
-        --colors: (
-            --100:  math.div( 0, 12) * -100 - 5,
-            --200:  math.div( 1, 12) * -100 - 5,
-            --300:  math.div( 2, 12) * -100 - 5,
-            --400:  math.div( 3, 12) * -100 - 5,
-            --500:  math.div( 4, 12) * -100 - 5,
-            --600:  math.div( 5, 12) * -100 - 5,
-            --700:  math.div( 6, 12) * -100 - 5,
-            --800:  math.div( 7, 12) * -100 - 5,
-            --900:  math.div( 8, 12) * -100 - 5,
-            --1000: math.div( 9, 12) * -100 - 5,
-            --1100: math.div(10, 12) * -100 - 5,
-            --1200: math.div(11, 12) * -100 - 5,
-            --1300: math.div(12, 12) * -100 - 5,
-        ),
+$themes-override: () !default;
+$themes: map.deep-merge((
+    --main: (
+        light: $theme-light,
+        dark:  $theme-dark,
     ),
-
-    --ranges: (
-        --full:  1,
-        --muted: .3,
-    ),
-
-    --palettes: (
-        --base:  hsl(0, 0%, 20%)       --grays --full,
-        --blue:   oklch(56% 0.16 265.25) --colors --muted,
-        --purple: oklch(56% 0.16 305.58) --colors --muted,
-        --red:    oklch(56% 0.16 18.69)  --colors --muted,
-        --green:  oklch(56% 0.16 150.48) --colors --muted,
-        --yellow: oklch(56% 0.16 84.08)  --colors --muted,
-    ),
-
-    --semantic: map.merge($semantic-colors-common, (
-        --bg-base: --base --50,
-        --bg-l1:   --base --75,
-        --bg-l2:   --base --100,
-    )),
-
-    --constants: (
-        --shadow: rgba(#000, 0.5),
-    ),
-) !default;
-
-$themes: (
-    light: $theme-light,
-    dark:  $theme-dark,
-) !default;
+), $themes-override) !default;
 
 $theme-default: list.nth(map.keys($themes), 1) !default;
diff --git a/src/_core.scss b/src/_core.scss
new file mode 100644
index 0000000..7b7a384
--- /dev/null
+++ b/src/_core.scss
@@ -0,0 +1,38 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use 'config';
+
+@use 'core.vars' as vars;
+@forward 'core.vars';
+
+@mixin styles {
+    @each $theme-name, $theme in vars.$themes {
+        @if $theme-name == config.$theme-default {
+            :root {
+                @include props.materialize(map.values(meta.module-variables('vars')));
+                
+                @if map.has-key($theme, 'dark') {
+                    @media (prefers-color-scheme: dark) {
+                        @include props.materialize(map.get($theme, 'dark'));
+                    }
+                }
+            }
+        } @else {
+            @include bem.theme(string.slice($theme-name, 3)) {
+                @include props.materialize(map.get($theme, 'light'));
+
+                color:            props.get(vars.$theme, --text);
+                background-color: props.get(vars.$theme, --bg-base);
+
+                @if map.has-key($theme, 'dark') {
+                    @media (prefers-color-scheme: dark) {
+                        @include props.materialize(map.get($theme, 'dark'));
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
new file mode 100644
index 0000000..0a94534
--- /dev/null
+++ b/src/_core.vars.scss
@@ -0,0 +1,176 @@
+// stylelint-disable scss/dollar-variable-pattern
+
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:list';
+@use 'functions' as fn;
+@use 'config';
+@use 'iro-sass/src/functions';
+@use 'iro-sass/src/props';
+
+$size--0:    props.def(--size--0, 0) !default;
+$size--10:   props.def(--size--10, functions.px-to-rem(1px)) !default;
+$size--25:   props.def(--size--25, functions.px-to-rem(2px)) !default;
+$size--40:   props.def(--size--40, functions.px-to-rem(3px)) !default;
+$size--50:   props.def(--size--50, functions.px-to-rem(4px)) !default;
+$size--65:   props.def(--size--65, functions.px-to-rem(5px)) !default;
+$size--75:   props.def(--size--75, functions.px-to-rem(6px)) !default;
+$size--85:   props.def(--size--85, functions.px-to-rem(7px)) !default;
+$size--100:  props.def(--size--100, functions.px-to-rem(8px)) !default;
+$size--115:  props.def(--size--115, functions.px-to-rem(9px)) !default;
+$size--125:  props.def(--size--125, functions.px-to-rem(10px)) !default;
+$size--130:  props.def(--size--130, functions.px-to-rem(11px)) !default;
+$size--150:  props.def(--size--150, functions.px-to-rem(12px)) !default;
+$size--160:  props.def(--size--160, functions.px-to-rem(13px)) !default;
+$size--175:  props.def(--size--175, functions.px-to-rem(14px)) !default;
+$size--200:  props.def(--size--200, functions.px-to-rem(16px)) !default;
+$size--225:  props.def(--size--225, functions.px-to-rem(18px)) !default;
+$size--250:  props.def(--size--250, functions.px-to-rem(20px)) !default;
+$size--275:  props.def(--size--275, functions.px-to-rem(22px)) !default;
+$size--300:  props.def(--size--300, functions.px-to-rem(24px)) !default;
+$size--325:  props.def(--size--325, functions.px-to-rem(26px)) !default;
+$size--350:  props.def(--size--350, functions.px-to-rem(28px)) !default;
+$size--375:  props.def(--size--375, functions.px-to-rem(30px)) !default;
+$size--400:  props.def(--size--400, functions.px-to-rem(32px)) !default;
+$size--450:  props.def(--size--450, functions.px-to-rem(36px)) !default;
+$size--500:  props.def(--size--500, functions.px-to-rem(40px)) !default;
+$size--550:  props.def(--size--550, functions.px-to-rem(44px)) !default;
+$size--600:  props.def(--size--600, functions.px-to-rem(48px)) !default;
+$size--650:  props.def(--size--650, functions.px-to-rem(52px)) !default;
+$size--700:  props.def(--size--700, functions.px-to-rem(56px)) !default;
+$size--800:  props.def(--size--800, functions.px-to-rem(64px)) !default;
+$size--900:  props.def(--size--900, functions.px-to-rem(72px)) !default;
+$size--1000: props.def(--size--1000, functions.px-to-rem(80px)) !default;
+$size--1200: props.def(--size--1200, functions.px-to-rem(96px)) !default;
+$size--1600: props.def(--size--1600, functions.px-to-rem(128px)) !default;
+$size--2000: props.def(--size--2000, functions.px-to-rem(160px)) !default;
+$size--2400: props.def(--size--2400, functions.px-to-rem(192px)) !default;
+$size--2500: props.def(--size--2500, functions.px-to-rem(200px)) !default;
+$size--2600: props.def(--size--2600, functions.px-to-rem(208px)) !default;
+$size--2800: props.def(--size--2800, functions.px-to-rem(224px)) !default;
+$size--3200: props.def(--size--3200, functions.px-to-rem(256px)) !default;
+$size--3400: props.def(--size--3400, functions.px-to-rem(272px)) !default;
+$size--3500: props.def(--size--3500, functions.px-to-rem(280px)) !default;
+$size--3600: props.def(--size--3600, functions.px-to-rem(288px)) !default;
+$size--3800: props.def(--size--3800, functions.px-to-rem(304px)) !default;
+$size--4600: props.def(--size--4600, functions.px-to-rem(368px)) !default;
+$size--5000: props.def(--size--5000, functions.px-to-rem(400px)) !default;
+$size--6000: props.def(--size--6000, functions.px-to-rem(480px)) !default;
+
+$font--standard--family:           props.def(--font--standard--family, ('Inter', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif)) !default;
+$font--standard--line-height:      props.def(--font--standard--line-height, 1.5) !default;
+$font--standard--feature-settings: props.def(--font--standard--feature-settings, ('\'ss01\'')) !default;
+
+$font--headline--family:           props.def(--font--headline--family, ('Inter', props.get($font--standard--family))) !default;
+$font--headline--line-height:      props.def(--font--headline--line-height, 1.3) !default;
+$font--headline--weight:           props.def(--font--headline--weight, 800) !default;
+$font--headline--feature-settings: props.def(--font--headline--feature-settings, ('\'opsz\'' 32, '\'ss01\'', '\'cv06\'')) !default;
+
+$font--mono--family:               props.def(--font--mono--family, ('Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace)) !default;
+$font--mono--line-height:          props.def(--font--mono--line-height, 1.4) !default;
+$font--mono--feature-settings:     props.def(--font--mono--feature-settings, ('\'calt\'' 0, '\'dlig\' 1', '\'ss09\' 1')) !default;
+
+$font-size--50:   props.def(--font-size--50, functions.px-to-rem(12px)) !default;
+$font-size--75:   props.def(--font-size--75 , functions.px-to-rem(13px)) !default;
+$font-size--100:  props.def(--font-size--100, functions.px-to-rem(14px)) !default;
+$font-size--150:  props.def(--font-size--150, functions.px-to-rem(16px)) !default;
+$font-size--200:  props.def(--font-size--200, functions.px-to-rem(18px)) !default;
+$font-size--300:  props.def(--font-size--300, functions.px-to-rem(20px)) !default;
+$font-size--400:  props.def(--font-size--400, functions.px-to-rem(24px)) !default;
+$font-size--500:  props.def(--font-size--500, functions.px-to-rem(28px)) !default;
+$font-size--600:  props.def(--font-size--600, functions.px-to-rem(32px)) !default;
+$font-size--700:  props.def(--font-size--700, functions.px-to-rem(36px)) !default;
+$font-size--800:  props.def(--font-size--800, functions.px-to-rem(40px)) !default;
+$font-size--900:  props.def(--font-size--900, functions.px-to-rem(45px)) !default;
+$font-size--1000: props.def(--font-size--1000, functions.px-to-rem(50px)) !default;
+$font-size--1100: props.def(--font-size--1100, functions.px-to-rem(60px)) !default;
+
+$border-width--thick:  props.def(--border-width--thick, 4px) !default;
+$border-width--medium: props.def(--border-width--medium, 2px) !default;
+$border-width--thin:   props.def(--border-width--thin, 1px) !default;
+
+$shadow--x:    props.def(--shadow--x, 0) !default;
+$shadow--y:    props.def(--shadow--y, 1px) !default;
+$shadow--blur: props.def(--shadow--blur, 4px) !default;
+
+$rounding: props.def(--rounding, 4px) !default;
+
+$key-focus--outline-width: props.def(--key-focus--outline-width, props.get($border-width--thick)) !default;
+$key-focus--border-width:  props.def(--key-focus--border-width, props.get($border-width--medium)) !default;
+$key-focus--border-offset: props.def(--key-focus--border-offset, props.get($border-width--medium)) !default;
+
+$list--indent:         props.def(--list--indent, props.get($size--400)) !default;
+$list--compact-indent: props.def(--list--compact-indent, props.get($size--250)) !default;
+
+$sticky-top-offset: props.def(--sticky-top-offset, 0rem) !default;
+
+//
+
+$-static-colors: ();
+
+@each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
+    $palette: fn.palette($palette, map.get(config.$static-colors, --levels), map.get(config.$static-colors, --base));
+    $-static-colors: map.merge($-static-colors, ( $palette-name: $palette ));
+}
+
+//
+
+$transparent-colors: props.def(--transparent-colors, (), 'color');
+
+@each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) {
+    $color: list.nth($palette, 1);
+    $text:  list.nth($palette, 2);
+
+    $palette: fn.transparent-palette($color, $text, map.get(config.$static-colors, --transparents));
+    $transparent-colors: props.merge($transparent-colors, ( $palette-name: $palette ));
+}
+
+//
+
+$themes: ();
+
+@each $theme-name, $theme in config.$themes {
+    @each $variant-name, $variant in $theme {
+        @if $variant != null {
+            $compiled: props.def(--colors, (), 'color');
+
+            @each $palette-name, $palette in $-static-colors {
+                $compiled: props.merge($compiled, ( #{$palette-name}-static: $palette ));
+            }
+
+            @each $palette-name, $palette in map.get($variant, --palettes) {
+                $base-color: list.nth($palette, 1);
+                $levels:     list.nth($palette, 2);
+
+                $palette: fn.palette($base-color, map.get($variant, --levels, $levels), list.nth(map.get($variant, --palettes, --base), 1));
+                $compiled: props.merge($compiled, ( $palette-name: $palette ));
+            }
+
+            @each $color, $value in map.get($variant, --constants) {
+                $compiled: props.merge($compiled, ( $color: $value ));
+            }
+
+            @each $color, $ref in map.get($variant, --semantic) {
+                $res: ();
+
+                @if meta.type-of($ref) == 'map' {
+                    @each $key, $r in $ref {
+                        $re1: list.nth($r, 1);
+                        $re2: functions.list-slice($r, 2);
+                        $res: map.merge($res, ($key: props.get($compiled, $re1, $re2...)));
+                    }
+                } @else {
+                    $ref1: list.nth($ref, 1);
+                    $ref2: functions.list-slice($ref, 2);
+                    $res:  props.get($compiled, $ref1, $ref2...);
+                }
+
+                $compiled: props.merge($compiled, ( $color: $res ));
+            }
+
+            $themes: map.set($themes, $theme-name, $variant-name, $compiled);
+        }
+    }
+}
+
+$theme: map.get($themes, config.$theme-default, light) !default;
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
deleted file mode 100644
index e205354..0000000
--- a/src/_declare-vars.scss
+++ /dev/null
@@ -1,274 +0,0 @@
-@use 'sass:map';
-@use 'sass:meta';
-@use 'sass:list';
-@use 'iro-sass/src/index' as iro;
-@use 'include-media/dist/include-media' as media;
-@use '@oddbird/blend';
-@use 'functions' as fn;
-@use 'config';
-
-@include iro.props-store((
-    --dims: (
-        --size: (
-            --0:    0,
-            --10:   iro.fn-px-to-rem(1px),
-            --25:   iro.fn-px-to-rem(2px),
-            --40:   iro.fn-px-to-rem(3px),
-            --50:   iro.fn-px-to-rem(4px),
-            --65:   iro.fn-px-to-rem(5px),
-            --75:   iro.fn-px-to-rem(6px),
-            --85:   iro.fn-px-to-rem(7px),
-            --100:  iro.fn-px-to-rem(8px),
-            --115:  iro.fn-px-to-rem(9px),
-            --125:  iro.fn-px-to-rem(10px),
-            --130:  iro.fn-px-to-rem(11px),
-            --150:  iro.fn-px-to-rem(12px),
-            --160:  iro.fn-px-to-rem(13px),
-            --175:  iro.fn-px-to-rem(14px),
-            --200:  iro.fn-px-to-rem(16px),
-            --225:  iro.fn-px-to-rem(18px),
-            --250:  iro.fn-px-to-rem(20px),
-            --275:  iro.fn-px-to-rem(22px),
-            --300:  iro.fn-px-to-rem(24px),
-            --325:  iro.fn-px-to-rem(26px),
-            --350:  iro.fn-px-to-rem(28px),
-            --375:  iro.fn-px-to-rem(30px),
-            --400:  iro.fn-px-to-rem(32px),
-            --450:  iro.fn-px-to-rem(36px),
-            --500:  iro.fn-px-to-rem(40px),
-            --550:  iro.fn-px-to-rem(44px),
-            --600:  iro.fn-px-to-rem(48px),
-            --650:  iro.fn-px-to-rem(52px),
-            --700:  iro.fn-px-to-rem(56px),
-            --800:  iro.fn-px-to-rem(64px),
-            --900:  iro.fn-px-to-rem(72px),
-            --1000: iro.fn-px-to-rem(80px),
-            --1200: iro.fn-px-to-rem(96px),
-            --1600: iro.fn-px-to-rem(128px),
-            --2000: iro.fn-px-to-rem(160px),
-            --2400: iro.fn-px-to-rem(192px),
-            --2500: iro.fn-px-to-rem(200px),
-            --2600: iro.fn-px-to-rem(208px),
-            --2800: iro.fn-px-to-rem(224px),
-            --3200: iro.fn-px-to-rem(256px),
-            --3400: iro.fn-px-to-rem(272px),
-            --3500: iro.fn-px-to-rem(280px),
-            --3600: iro.fn-px-to-rem(288px),
-            --3800: iro.fn-px-to-rem(304px),
-            --4600: iro.fn-px-to-rem(368px),
-            --5000: iro.fn-px-to-rem(400px),
-            --6000: iro.fn-px-to-rem(480px),
-        ),
-
-        --font: (
-            --standard: (
-                --family:           ('Inter', 'Open Sans', 'Segoe UI', 'Droid Sans', Roboto, Oxygen, 'Helvetica Neue', Helvetica, Tahoma, Arial, sans-serif),
-                --line-height:      1.5,
-                --feature-settings: ('\'ss01\''),
-            ),
-            --headline: (
-                --family:           ('Inter', fn.dim(--font --standard --family, null)),
-                --line-height:      1.3,
-                --weight:           800,
-                --feature-settings: ('\'opsz\'' 32, '\'ss01\'', '\'cv06\''),
-            ),
-            --mono: (
-                --family:      ('Iosevka Term SS09', 'IBM Plex Mono', 'Menlo', 'DejaVu Sans Mono', 'Bitstream Vera Sans Mono', Courier, monospace),
-                --line-height: 1.4,
-            )
-        ),
-
-        --font-size: (
-            --50:   iro.fn-px-to-rem(12px),
-            --75:   iro.fn-px-to-rem(13px),
-            --100:  iro.fn-px-to-rem(14px),
-            --150:  iro.fn-px-to-rem(16px),
-            --200:  iro.fn-px-to-rem(18px),
-            --300:  iro.fn-px-to-rem(20px),
-            --400:  iro.fn-px-to-rem(24px),
-            --500:  iro.fn-px-to-rem(28px),
-            --600:  iro.fn-px-to-rem(32px),
-            --700:  iro.fn-px-to-rem(36px),
-            --800:  iro.fn-px-to-rem(40px),
-            --900:  iro.fn-px-to-rem(45px),
-            --1000: iro.fn-px-to-rem(50px),
-            --1100: iro.fn-px-to-rem(60px),
-        ),
-
-        --border: (
-            --thick:  4px,
-            --medium: 2px,
-            --thin:   1px,
-        ),
-
-        --shadow: (
-            --x:    0,
-            --y:    1px,
-            --blur: 4px,
-        ),
-
-        --rounding:   4px,
-
-        --key-focus: (
-            --outline:       fn.dim(--border --thick, null),
-            --border:        fn.dim(--border --medium, null),
-            --border-offset: fn.dim(--border --medium, null),
-        ),
-
-        --paragraph: (
-            --margin-bs: fn.dim(--size --300, null),
-        ),
-
-        --heading: (
-            --margin-bs:         fn.dim(--size --700, null),
-            --margin-bs-sibling: fn.dim(--size --325, null),
-
-            --xxl: fn.dim(--font-size --300, null),
-            --xl:  fn.dim(--font-size --200, null),
-            --lg:  fn.dim(--font-size --150, null),
-            --md:  fn.dim(--font-size --100, null),
-            --sm:  fn.dim(--font-size --75, null),
-            --xs:  fn.dim(--font-size --50, null),
-
-            --display: (
-                --xxl: fn.dim(--font-size --1100, null),
-                --xl:  fn.dim(--font-size --700, null),
-                --lg:  fn.dim(--font-size --300, null),
-                --md:  fn.dim(--font-size --150, null),
-                --sm:  fn.dim(--font-size --75, null),
-                --xs:  fn.dim(--font-size --50, null),
-            ),
-
-            --display-sm: (
-                --xxl: fn.dim(--font-size --900, null),
-                --xl:  fn.dim(--font-size --600, null),
-                --lg:  fn.dim(--font-size --200, null),
-                --md:  fn.dim(--font-size --100, null),
-                --sm:  fn.dim(--font-size --75, null),
-                --xs:  fn.dim(--font-size --50, null),
-            )
-        ),
-
-        --list: (
-            --indent:         fn.dim(--size --400, null),
-            --compact-indent: fn.dim(--size --250, null),
-        ),
-    ),
-));
-
-@each $breakpoint in map.keys(media.$breakpoints) {
-    @include media.media('<=#{$breakpoint}') {
-        @include iro.props-store((), $breakpoint);
-    }
-}
-
-@include iro.props-store((
-    --dims: (
-        --heading: (
-            --margin-bs: fn.dim(--size --600, null),
-        ),
-
-        --list: (
-            --indent: fn.dim(--size --300),
-        ),
-    )
-), 'sm');
-
-@include iro.props-store((
-    --dims: (
-        --heading: (
-            --margin-bs: fn.dim(--size --500, null),
-        ),
-
-        --list: (
-            --indent: fn.dim(--size --250),
-        ),
-    )
-), 'xs');
-
-//
-
-@each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
-    @include iro.props-store((
-        --colors: (
-            #{$palette-name}-static: fn.palette(
-                $palette,
-                map.get(config.$static-colors, --contrasts),
-                1,
-                map.get(config.$static-colors, --base),
-            ),
-        ),
-    ));
-}
-
-@each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) {
-    $color: list.nth($palette, 1);
-    $text:  list.nth($palette, 2);
-
-    @include iro.props-store((
-        --colors: (
-            #{$palette-name}-transparent: fn.transparent-palette(
-                $color,
-                $text,
-                map.get(config.$static-colors, --transparents),
-            ),
-        ),
-    ));
-}
-
-@each $theme-name, $theme in config.$themes {
-    $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name);
-
-    @each $palette-name, $palette in map.get($theme, --palettes) {
-        $base-color: list.nth($palette, 1);
-        $contrasts:  list.nth($palette, 2);
-        $ranges:     list.nth($palette, 3);
-
-        @include iro.props-store((
-            --colors: (
-                $palette-name: fn.palette(
-                    $base-color,
-                    map.get($theme, --contrasts, $contrasts),
-                    map.get($theme, --ranges, $ranges),
-                    list.nth(map.get($theme, --palettes, --base), 1),
-                ),
-            ),
-        ), $tree);
-    }
-
-    @each $color, $value in map.get($theme, --constants) {
-        @include iro.props-store((
-            --colors: (
-                $color: $value,
-            ),
-        ), $tree);
-    }
-
-    @each $color, $ref in map.get($theme, --semantic) {
-        $res: ();
-
-        @if meta.type-of($ref) == 'map' {
-            @each $key, $r in $ref {
-                $res: map.set($res, $key, fn.color($r));
-            }
-        } @else {
-            $res: fn.color($ref);
-        }
-
-        @include iro.props-store((
-            --colors: (
-                $color: $res,
-            ),
-        ), $tree);
-    }
-}
-
-@each $theme-name, $theme in config.$themes {
-    $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name);
-
-    @include iro.props-store((
-        --colors: (
-            
-        ),
-    ), $tree);
-}
diff --git a/src/_functions.scss b/src/_functions.scss
index d615614..b41609e 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -4,132 +4,54 @@
 @use 'sass:list';
 @use 'sass:meta';
 
-@use '@oddbird/blend';
-@use '@oddbird/blend/sass/convert' as blend-convert;
+@use 'iro-sass/src/easing';
+@use 'apca';
 
-@use 'iro-sass/src/index' as iro;
-@use 'iro-sass/src/easing' as easing;
-@use 'functions/colors' as iro-colors;
-@use 'config';
+@function palette($base-color, $levels, $ref-color: $base-color) {
+    $base-lch: color.to-space($base-color, oklch);
+    $ref-lch: color.to-space($ref-color, oklch);
 
-@function color($key, $tree: iro.$props-default-tree, $default: null, $global: false) {
-    @return iro.props-get(list.join(--colors, $key), $tree, $default, $global);
-}
-
-@function global-color($key, $tree: iro.$props-default-tree, $default: null, $global: true) {
-    @return color($key, $tree, $default, $global);
-}
-
-@function foreign-color($foreign-key, $key, $tree: iro.$props-default-tree, $default: null, $global: true) {
-    @return iro.props-get(list.join($foreign-key --colors, $key), $tree, $default, $global);
-}
-
-@function dim($key, $tree: iro.$props-default-tree, $default: null, $global: false) {
-    @return iro.props-get(list.join(--dims, $key), $tree, $default, $global);
-}
-
-@function global-dim($key, $tree: iro.$props-default-tree, $default: null, $global: true) {
-    @return dim($key, $tree, $default, $global);
-}
-
-@function foreign-dim($foreign-key, $key, $tree: iro.$props-default-tree, $default: null, $global: true) {
-    @return iro.props-get(list.join($foreign-key --dims, $key), $tree, $default, $global);
-}
-
-@function font-prop($data, $overrides, $key, $prop) {
-    @if (map.has-key($overrides, $prop)) {
-        @return map.get($overrides, $prop);
-    } @else if (map.has-key($data, $prop)) {
-        @return global-dim(--font $key $prop);
-    }
-    @return null;
-}
+    $ref-l: color.channel($ref-lch, 'lightness');
+    $ref-y: apca.sRGB_to_Y($ref-lch);
 
-@function set-font($key, $overrides: ()) {
-    $font: iro.props-get-static(list.join(--dims --font, $key), $global: true);
-
-    $map: (
-        font-family:             font-prop($font, $overrides, $key, --family),
-        font-size:               font-prop($font, $overrides, $key, --size),
-        font-weight:             font-prop($font, $overrides, $key, --weight),
-        font-style:              font-prop($font, $overrides, $key, --style),
-        line-height:             font-prop($font, $overrides, $key, --line-height),
-        text-transform:          font-prop($font, $overrides, $key, --transform),
-        letter-spacing:          font-prop($font, $overrides, $key, --spacing),
-        font-variant-alternates: font-prop($font, $overrides, $key, --variant-alternates),
-        font-feature-settings:   font-prop($font, $overrides, $key, --feature-settings),
-    );
-
-    @return $map;
-}
-
-@function lum($color) {
-    @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05;
-}
-
-@function palette($base-color, $contrasts, $chroma-range: 1, $reference-color: $base-color) {
-    $base-lch: iro-colors.parse-oklch($base-color);
-    $ref-lch:  iro-colors.parse-oklch($reference-color);
-    $ref-l:    list.nth($ref-lch, 1);
-    $ref-y:    iro-colors.apca_sRGB_to_Y($reference-color);
-
-    $cmax: math.max(map.values($contrasts)...);
-    $cmax: math.max($cmax, math.abs(math.min(map.values($contrasts)...)));
-
-    $black-y: iro-colors.apca_sRGB_to_Y(#000);
-    $white-y: iro-colors.apca_sRGB_to_Y(#fff);
-
-    $chroma-easing: meta.get-function(config.$palette-chroma-easing, $module: easing);
+    $black-y: apca.sRGB_to_Y(#000);
+    $white-y: apca.sRGB_to_Y(#fff);
 
     $palette: ();
 
-    @each $key, $contrast in $contrasts {
-        //$i: math.div(list.length($palette), 2 * (list.length($contrasts) - 1));
-        $y: iro-colors.apcaReverse($contrast, $ref-y);
-        $l: list.nth($base-lch, 1);
+    @each $key, $level in $levels {
+        $color: list.nth($level, 1);
+        $y: 0;
         $c: 1;
+        $h: 0deg;
 
-        @if $y != false {
-            $y-lch: blend-convert.Lab_to_LCH(
-                iro-colors.lin_sRGB_to_Oklab(
-                    blend-convert.lin_sRGB(
-                        blend-convert.sassToRgb(
-                            iro-colors.apca_Y_to_sRGB($y)
-                        )
-                    )
-                )
-            );
-            $l: list.nth($y-lch, 1);
-        } @else {
-            $y: $ref-y;
+        @if list.length($level) > 1 {
+            $c: list.nth($level, 2);
         }
-
-        @if $chroma-range != 1 {
-            $c: if(
-                $ref-l > .5,
-                math.clamp(0, math.div($contrast, $cmax), 1),
-                -1 * math.clamp(-1, math.div($contrast, $cmax), 0)
-            );
-            $c: meta.call($chroma-easing, $c);
-            $c: $chroma-range + (1 - $chroma-range) * $c;
+        @if list.length($level) > 2 {
+            $h: list.nth($level, 3);
         }
 
-        $color: oklch(($l * 100%) ($c * list.nth($base-lch, 2)) list.nth($base-lch, 3));
-        //$color: $l, $c * list.nth($base-lch, 2), list.nth($base-lch, 3);
-        //$color: blend-convert.rgbToSass(
-        //    blend-convert.gam_sRGB(
-        //        iro-colors.Oklab_to_lin_sRGB(
-        //            blend-convert.LCH_to_Lab($color)
-        //        )
-        //    )
-        //);
+        @if meta.type-of($color) != 'color' {
+            $y: apca.reverse($color, $ref-y);
+            $l: color.channel($base-lch, 'lightness');
+
+            @if $y != false {
+                $l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch);
+            } @else {
+                $y: $ref-y;
+            }
 
-        $contrast-black: iro-colors.apcaContrast($black-y, $y);
-        $contrast-white: iro-colors.apcaContrast($white-y, $y);
+            $color: oklch($l ($c * color.channel($base-lch, 'chroma')) ($h + color.channel($base-lch, 'hue')));
+        } @else {
+            $y: apca.sRGB_to_Y($color);
+        }
+
+        $contrast-black: apca.contrast($black-y, $y);
+        $contrast-white: apca.contrast($white-y, $y);
 
         $palette: map.set($palette, $key, $color);
         $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff));
-        //$palette: map.set($palette, #{$key}-text, blend.contrast($color));
     }
 
     @return $palette;
@@ -146,7 +68,3 @@
 
     @return $palette;
 }
-
-@function px-to-em($size, $base: iro.$vars-root-size) {
-    @return math.div($size, $base) * 1em;
-}
diff --git a/src/_iro-design.scss b/src/_iro-design.scss
new file mode 100644
index 0000000..bad29c5
--- /dev/null
+++ b/src/_iro-design.scss
@@ -0,0 +1,78 @@
+$breakpoints: (
+    lg: 1340px,
+    md: 900px,
+    sm: 620px,
+    xs: 400px,
+) !default;
+
+@use 'iro-sass/src/responsive' with (
+    $named-viewports: $breakpoints
+);
+
+@forward 'include-media/dist/include-media' as media--* with (
+    $breakpoints: $breakpoints,
+    $unit-intervals: (
+        'px':  1,
+        'em':  .01,
+        'rem': .01,
+        '':    0
+    ) !default,
+);
+
+@forward 'config.defaults' as config-defaults--*;
+@forward 'config' as config--*;
+@forward 'props' as props--*;
+@forward 'core' as core--*;
+@forward 'layers' as layers--*;
+
+@forward 'layouts/button-group' as l-button-group--*;
+@forward 'layouts/card-list' as l-card-list--*;
+@forward 'layouts/container' as l-container--*;
+@forward 'layouts/flex' as l-flex--*;
+@forward 'layouts/form' as l-form--*;
+@forward 'layouts/media' as l-media--*;
+@forward 'layouts/overflow' as l-overflow--*;
+@forward 'layouts/split-view' as l-split-view--*;
+
+@forward 'scopes/implicit' as s-implicit--*;
+@forward 'scopes/body' as s-body--*;
+@forward 'scopes/blockquotes' as s-blockquotes--*;
+@forward 'scopes/code' as s-code--*;
+@forward 'scopes/figures' as s-figures--*;
+@forward 'scopes/headings' as s-headings--*;
+@forward 'scopes/links' as s-links--*;
+@forward 'scopes/lists' as s-lists--*;
+@forward 'scopes/tables' as s-tables--*;
+
+@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--*;
+@forward 'objects/button' as o-button--*;
+@forward 'objects/card' as o-card--*;
+@forward 'objects/checkbox' as o-checkbox--*;
+@forward 'objects/divider' as o-divider--*;
+@forward 'objects/emoji' as o-emoji--*;
+@forward 'objects/figure' as o-figure--*;
+@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/navbar' as o-navbar--*;
+@forward 'objects/palette' as o-palette--*;
+@forward 'objects/placeholders' as o-placeholders--*;
+@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--*;
+@forward 'objects/switch' as o-switch--*;
+@forward 'objects/table' as o-table--*;
+@forward 'objects/tabbar' as o-tabbar--*;
+@forward 'objects/text-field' as o-text-field--*;
+@forward 'objects/thumbnail' as o-thumbnail--*;
+
+@forward 'utils' as utils--*;
+
+@forward 'themes' as themes--*;
diff --git a/src/_layers.scss b/src/_layers.scss
new file mode 100644
index 0000000..cc3bb50
--- /dev/null
+++ b/src/_layers.scss
@@ -0,0 +1,3 @@
+@mixin styles {
+    @layer scope, theme, object, layout, component, utility;
+}
diff --git a/src/_layouts.scss b/src/_layouts.scss
deleted file mode 100644
index 572308d..0000000
--- a/src/_layouts.scss
+++ /dev/null
@@ -1,8 +0,0 @@
-@use 'layouts/media';
-@use 'layouts/container';
-@use 'layouts/button-group';
-@use 'layouts/form';
-@use 'layouts/flex';
-@use 'layouts/overflow';
-@use 'layouts/card-list';
-//@use 'layouts/message-group';
diff --git a/src/_mixins.scss b/src/_mixins.scss
index dca6831..49d3b6f 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -12,8 +12,8 @@
 }
 
 @mixin heading-strong($size) {
-    color:     fn.global-color(--heading);
     font-size: fn.global-dim(list.join(--heading, $size));
+    color:     fn.global-color(--heading);
 }
 
 @mixin heading-medium($size) {
diff --git a/src/_objects.scss b/src/_objects.scss
deleted file mode 100644
index c5049cd..0000000
--- a/src/_objects.scss
+++ /dev/null
@@ -1,28 +0,0 @@
-@use 'objects/icon';
-@use 'objects/emoji';
-@use 'objects/heading';
-@use 'objects/divider';
-@use 'objects/badge';
-@use 'objects/button';
-@use 'objects/text-field';
-@use 'objects/field-label';
-@use 'objects/radio';
-@use 'objects/checkbox';
-@use 'objects/switch';
-@use 'objects/action-button';
-// @use 'objects/overflow-button';
-@use 'objects/status-indicator';
-@use 'objects/avatar';
-// @use 'objects/message';
-@use 'objects/side-nav';
-@use 'objects/popover';
-@use 'objects/menu';
-@use 'objects/card';
-// @use 'objects/icon-nav';
-@use 'objects/backdrop';
-// @use 'objects/dialog';
-@use 'objects/lightbox';
-// @use 'objects/list-group';
-@use 'objects/table';
-@use 'objects/alert';
-@use 'objects/palette';
diff --git a/src/_props.scss b/src/_props.scss
new file mode 100644
index 0000000..ffba054
--- /dev/null
+++ b/src/_props.scss
@@ -0,0 +1,41 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'config';
+@use 'include-media/dist/include-media' as media;
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+
+@mixin materialize-at-root($ref) {
+    @if meta.type-of($ref) == 'map' {
+        $ref: map.values($ref);
+    }
+
+    :root {
+        @include props.materialize($ref, null);
+        @include props.materialize($ref, 'color');
+
+        @each $breakpoint in map.keys(media.$breakpoints) {
+            @include media.media('<=#{$breakpoint}') {
+                @include props.materialize($ref, $breakpoint);
+            }
+        }
+
+        @media (prefers-color-scheme: dark) {
+            @include props.materialize($ref, 'dark');
+        }
+    }
+
+    @each $theme-name in map.keys(config.$themes) {
+        @if $theme-name != config.$theme-default {
+            @include bem.theme(string.slice($theme-name, 3)) {
+                @include props.materialize($ref, 'color');
+
+                @media (prefers-color-scheme: dark) {
+                    @include props.materialize($ref, 'dark');
+                }
+            }
+        }
+    }
+}
diff --git a/src/_scopes.scss b/src/_scopes.scss
deleted file mode 100644
index a3aeb6c..0000000
--- a/src/_scopes.scss
+++ /dev/null
@@ -1,6 +0,0 @@
-@use 'scopes/links';
-@use 'scopes/code';
-@use 'scopes/blockquotes';
-@use 'scopes/lists';
-@use 'scopes/headings';
-@use 'scopes/tables';
diff --git a/src/_themes.scss b/src/_themes.scss
index 8296064..caf1e80 100644
--- a/src/_themes.scss
+++ b/src/_themes.scss
@@ -1,26 +1,74 @@
-@use 'iro-sass/src/index' as iro;
-@use 'functions' as fn;
+@use 'sass:map';
+@use 'sass:string';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use 'include-media/dist/include-media' as media;
 
-$static-themes: 'black' 'white' !default;
+@use 'core.vars' as vars;
+@forward 'core.vars';
 
-@include iro.bem-theme('base') {
-    background-color: fn.global-color(--bg-base);
-}
+@mixin styles {
+    @include bem.theme('base') {
+        background-color: props.get(vars.$theme, --bg-base);
 
-@include iro.bem-theme('l1') {
-    background-color: fn.global-color(--bg-l1);
-}
+        @include bem.suffix('light') {
+            @media (prefers-color-scheme: light) {
+                background-color: props.get(vars.$theme, --bg-base);
+            }
+        }
 
-@include iro.bem-theme('l2') {
-    background-color: fn.global-color(--bg-l2);
-}
+        @include bem.suffix('dark') {
+            @media (prefers-color-scheme: dark) {
+                background-color: props.get(vars.$theme, --bg-base);
+            }
+        }
+    }
 
-@include iro.bem-theme('50') {
-    background-color: fn.global-color(--base --50);
-}
+    @include bem.theme('l1') {
+        background-color: props.get(vars.$theme, --bg-l1);
+
+        @include bem.suffix('light') {
+            @media (prefers-color-scheme: light) {
+                background-color: props.get(vars.$theme, --bg-l1);
+            }
+        }
+
+        @include bem.suffix('dark') {
+            @media (prefers-color-scheme: dark) {
+                background-color: props.get(vars.$theme, --bg-l1);
+            }
+        }
+    }
+
+    @include bem.theme('l2') {
+        background-color: props.get(vars.$theme, --bg-l2);
+
+        @include bem.suffix('light') {
+            @media (prefers-color-scheme: light) {
+                background-color: props.get(vars.$theme, --bg-l2);
+            }
+        }
+
+        @include bem.suffix('dark') {
+            @media (prefers-color-scheme: dark) {
+                background-color: props.get(vars.$theme, --bg-l2);
+            }
+        }
+    }
+
+    @include bem.theme('50') {
+        background-color: props.get(vars.$theme, --base, --50);
+
+        @include bem.suffix('light') {
+            @media (prefers-color-scheme: light) {
+                background-color: props.get(vars.$theme, --base, --50);
+            }
+        }
 
-@each $theme in $static-themes {
-    @include iro.bem-theme(static-#{$theme}) {
-        color: fn.global-color(--#{$theme}-transparent --800);
+        @include bem.suffix('dark') {
+            @media (prefers-color-scheme: dark) {
+                background-color: props.get(vars.$theme, --base, --50);
+            }
+        }
     }
 }
diff --git a/src/_utils.scss b/src/_utils.scss
index d5a3478..445e5c6 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -1,209 +1,361 @@
 @use 'sass:map';
-@use 'iro-sass/src/index' as iro;
-@use 'functions' as fn;
+@use 'sass:string';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
 @use 'include-media/dist/include-media' as media;
 
-$dirs: (
+@use 'core.vars' as vars;
+@forward 'core.vars';
+
+/* stylelint-disable-next-line scss/dollar-variable-pattern */
+$-dirs: (
     '': '',
+    'b':  '-block',
     'bs': '-block-start',
     'be': '-block-end',
-    'b':  '-block',
+    'i':  '-inline',
     'is': '-inline-start',
     'ie': '-inline-end',
-    'i':  '-inline',
 ) !default;
 
-$sizes: 0 10 50 75 100 125 200 400 700 800 !default;
+/* stylelint-disable-next-line scss/dollar-variable-pattern */
+$-sizes: (
+    0: vars.$size--0,
+    10: vars.$size--10,
+    50: vars.$size--50,
+    75: vars.$size--75,
+    100: vars.$size--100,
+    125: vars.$size--125,
+    200: vars.$size--200,
+    400: vars.$size--400,
+    700: vars.$size--700,
+    800: vars.$size--800,
+) !default;
 
-@include iro.bem-utility('d-block') {
-    display: block;
-}
+@mixin styles {
+    @include bem.utility('d-block') {
+        display: block;
+    }
 
-@include iro.bem-utility('d-inline-block') {
-    display: inline-block;
-}
+    @include bem.utility('d-inline-block') {
+        display: inline-block;
+    }
 
-@include iro.bem-utility('d-contents') {
-    display: contents;
-}
+    @include bem.utility('d-contents') {
+        display: contents;
+    }
 
-@include iro.bem-utility('td-none') {
-    text-decoration: none;
-}
+    @include bem.utility('d-flex') {
+        display: flex;
+    }
+
+    @include bem.utility('td-none') {
+        text-decoration: none;
+    }
 
-@include iro.bem-utility('d-none') {
-    display: none;
+    @include bem.utility('d-none') {
+        display: none;
 
-    @each $breakpoint in map.keys(media.$breakpoints) {
-        @include media.media('<=#{$breakpoint}') {
-            @include iro.bem-suffix('#{$breakpoint}-lo') {
+        @each $breakpoint in map.keys(media.$breakpoints) {
+            @include media.media('<=#{$breakpoint}') {
+                @include bem.suffix('#{$breakpoint}-lo') {
+                    display: none;
+                }
+            }
+
+            @include media.media('>#{$breakpoint}') {
+                @include bem.suffix('#{$breakpoint}-hi') {
+                    display: none;
+                }
+            }
+        }
+
+        @include bem.at-theme('js') {
+            @include bem.suffix('js') {
                 display: none;
             }
         }
 
-        @include media.media('>#{$breakpoint}') {
-            @include iro.bem-suffix('#{$breakpoint}-hi') {
+        @include bem.at-theme('no-js') {
+            @include bem.suffix('no-js') {
                 display: none;
             }
         }
-    }
 
-    @include iro.bem-at-theme('js') {
-        @include iro.bem-suffix('js') {
-            display: none;
+        @include bem.suffix('empty') {
+            &:empty {
+                display: none;
+            }
         }
     }
 
-    @include iro.bem-at-theme('no-js') {
-        @include iro.bem-suffix('no-js') {
-            display: none;
-        }
+    @include bem.utility('va-top') {
+        vertical-align: top;
     }
 
-    @include iro.bem-suffix('empty') {
-        &:empty {
-            display: none;
-        }
+    @include bem.utility('va-baseline') {
+        vertical-align: baseline;
     }
-}
 
-@include iro.bem-utility('ta-start') {
-    text-align: start;
-}
+    @include bem.utility('va-middle') {
+        vertical-align: middle;
+    }
 
-@include iro.bem-utility('ta-end') {
-    text-align: end;
-}
+    @include bem.utility('va-bottom') {
+        vertical-align: bottom;
+    }
 
-@include iro.bem-utility('ta-center') {
-    text-align: center;
-}
+    @include bem.utility('ta-start') {
+        text-align: start;
+    }
 
-@include iro.bem-utility('fw-normal') {
-    font-weight: normal;
-}
+    @include bem.utility('ta-end') {
+        text-align: end;
+    }
 
-@include iro.bem-utility('ai-center') {
-    align-items: center;
-}
+    @include bem.utility('ta-center') {
+        text-align: center;
+    }
 
-@include iro.bem-utility('ai-start') {
-    align-items: flex-start;
-}
+    @include bem.utility('fw-normal') {
+        font-weight: normal;
+    }
 
-@include iro.bem-utility('ai-end') {
-    align-items: flex-end;
-}
+    @include bem.utility('ai-center') {
+        align-items: center;
+    }
 
-@include iro.bem-utility('jc-center') {
-    justify-content: center;
-}
+    @include bem.utility('ai-start') {
+        align-items: flex-start;
+    }
 
-@include iro.bem-utility('jc-start') {
-    justify-content: flex-start;
-}
+    @include bem.utility('ai-end') {
+        align-items: flex-end;
+    }
 
-@include iro.bem-utility('jc-end') {
-    justify-content: flex-end;
-}
+    @include bem.utility('ac-center') {
+        align-content: center;
+    }
 
-@include iro.bem-utility('c-heading') {
-    color: fn.color(--heading);
-}
+    @include bem.utility('jc-center') {
+        justify-content: center;
+    }
 
-@include iro.bem-utility('c-text') {
-    color: fn.color(--text);
-}
+    @include bem.utility('jc-start') {
+        justify-content: flex-start;
+    }
 
-@include iro.bem-utility('c-mute') {
-    color: fn.color(--text-mute);
-}
+    @include bem.utility('jc-end') {
+        justify-content: flex-end;
+    }
 
-@include iro.bem-utility('c-mute-more') {
-    color: fn.color(--text-mute-more);
-}
+    @include bem.utility('tt-upper') {
+        text-transform: uppercase;
+    }
 
-@each $dir, $prop in (is: inline-size, bs: block-size) {
-    @include iro.bem-utility('#{$dir}-100') {
-        #{$prop}: 100%;
+    @include bem.utility('tt-lower') {
+        text-transform: lowercase;
     }
+
+    @include bem.utility('c-heading') {
+        color: props.get(vars.$theme, --heading);
+
+        @each $theme in map.keys(props.get(vars.$transparent-colors)) {
+            $theme-name: static-#{string.slice($theme, 3)};
     
-    @include iro.bem-utility('#{$dir}-75') {
-        #{$prop}: 75%;
+            @include bem.at-theme($theme-name) {
+                color: props.get(vars.$transparent-colors, $theme, --900);
+            }
+        }
     }
+
+    @include bem.utility('c-text') {
+        color: props.get(vars.$theme, --text);
+
+        @each $theme in map.keys(props.get(vars.$transparent-colors)) {
+            $theme-name: static-#{string.slice($theme, 3)};
     
-    @include iro.bem-utility('#{$dir}-50') {
-        #{$prop}: 50%;
+            @include bem.at-theme($theme-name) {
+                color: props.get(vars.$transparent-colors, $theme, --800);
+            }
+        }
     }
+
+    @include bem.utility('c-mute') {
+        color: props.get(vars.$theme, --text-mute);
+
+        @each $theme in map.keys(props.get(vars.$transparent-colors)) {
+            $theme-name: static-#{string.slice($theme, 3)};
     
-    @include iro.bem-utility('#{$dir}-25') {
-        #{$prop}: 25%;
+            @include bem.at-theme($theme-name) {
+                color: props.get(vars.$transparent-colors, $theme, --700);
+            }
+        }
     }
+
+    @include bem.utility('c-mute-more') {
+        color: props.get(vars.$theme, --text-mute-more);
+
+        @each $theme in map.keys(props.get(vars.$transparent-colors)) {
+            $theme-name: static-#{string.slice($theme, 3)};
     
-    @include iro.bem-utility('#{$dir}-1px') {
-        #{$prop}: 1px;
+            @include bem.at-theme($theme-name) {
+                color: props.get(vars.$transparent-colors, $theme, --600);
+            }
+        }
     }
-    
-    @include iro.bem-utility('#{$dir}-0') {
-        #{$prop}: 0;
+
+    @each $dir, $prop in (is: inline-size, bs: block-size) {
+        @include bem.utility('#{$dir}-100') {
+            #{$prop}: 100%;
+        }
+        
+        @include bem.utility('#{$dir}-75') {
+            #{$prop}: 75%;
+        }
+        
+        @include bem.utility('#{$dir}-50') {
+            #{$prop}: 50%;
+        }
+        
+        @include bem.utility('#{$dir}-25') {
+            #{$prop}: 25%;
+        }
+        
+        @include bem.utility('#{$dir}-1px') {
+            #{$prop}: 1px;
+        }
+        
+        @include bem.utility('#{$dir}-0') {
+            #{$prop}: 0;
+        }
     }
-}
 
-@include iro.bem-utility('elp') {
-    overflow:      hidden;
-    text-overflow: ellipsis;
-    white-space:   nowrap;
-}
+    @include bem.utility('elp') {
+        overflow:      hidden;
+        text-overflow: ellipsis;
+        white-space:   nowrap;
+    }
 
-@include iro.bem-utility('p-static') {
-    position: static;
-}
+    @include bem.utility('o-auto') {
+        overflow: auto;
+    }
 
-@include iro.bem-utility('p-relative') {
-    position: relative;
-}
+    @include bem.utility('o-hidden') {
+        overflow: hidden;
+    }
 
-@include iro.bem-utility('p-fixed') {
-    position: fixed;
-}
+    @include bem.utility('p-static') {
+        position: static;
+    }
 
-@include iro.bem-utility('p-sticky-bs') {
-    position:          sticky;
-    inset-block-start: 0;
-}
+    @include bem.utility('p-relative') {
+        position: relative;
+    }
 
-@each $dir, $suffix in $dirs {
-    @include iro.bem-utility('m#{$dir}-auto') {
-        margin#{$suffix}: auto;
+    @include bem.utility('p-fixed') {
+        position: fixed;
     }
-    
-    @include iro.bem-utility('p#{$dir}-auto') {
-        padding#{$suffix}: auto;
+
+    @include bem.utility('p-sticky-bs') {
+        position:          sticky;
+        inset-block-start: props.get(vars.$sticky-top-offset);
     }
 
-    @each $size in $sizes {
-        @include iro.bem-utility('m#{$dir}-#{$size}') {
-            margin#{$suffix}: fn.global-dim(--size --#{$size});
+    @include bem.utility('p-sticky-be') {
+        position:        sticky;
+        inset-block-end: 0;
+    }
+
+    @include bem.utility('br-round') {
+        border-radius: props.get(vars.$rounding);
+    }
+
+    @each $dir, $suffix in $-dirs {
+        @include bem.utility('m#{$dir}-auto') {
+            margin#{$suffix}: auto;
+        }
+        
+        @include bem.utility('p#{$dir}-auto') {
+            padding#{$suffix}: auto;
+        }
+
+        @each $mod, $size in $-sizes {
+            @include bem.utility('m#{$dir}-#{$mod}') {
+                margin#{$suffix}: props.get($size);
+            }
+            
+            @include bem.utility('p#{$dir}-#{$mod}') {
+                padding#{$suffix}: props.get($size);
+            }
+        }
+        
+        @include bem.utility('b#{$dir}-0') {
+            border#{$suffix}: 0;
+
+            @include bem.suffix('light') {
+                @media (prefers-color-scheme: light) {
+                    border#{$suffix}: 0;
+                }
+            }
+        
+            @include bem.suffix('dark') {
+                @media (prefers-color-scheme: dark) {
+                    border#{$suffix}: 0;
+                }
+            }
         }
         
-        @include iro.bem-utility('p#{$dir}-#{$size}') {
-            padding#{$suffix}: fn.global-dim(--size --#{$size});
+        @include bem.utility('b#{$dir}-1') {
+            border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
+
+            @include bem.suffix('light') {
+                @media (prefers-color-scheme: light) {
+                    border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
+                }
+            }
+        
+            @include bem.suffix('dark') {
+                @media (prefers-color-scheme: dark) {
+                    border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
+                }
+            }
+        }
+        
+        @include bem.utility('b#{$dir}-1-mute') {
+            border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
+
+            @include bem.suffix('light') {
+                @media (prefers-color-scheme: light) {
+                    border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
+                }
+            }
+        
+            @include bem.suffix('dark') {
+                @media (prefers-color-scheme: dark) {
+                    border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
+                }
+            }
         }
     }
-    
-    @include iro.bem-utility('b#{$dir}-0') {
-        border#{$suffix}: 0;
+
+    @include bem.utility('mbs-neutralize') {
+        &::before {
+            display:       block;
+            margin-block:  -100em 100em;
+            content:       '';
+        }
     }
     
-    @include iro.bem-utility('b#{$dir}-1') {
-        border#{$suffix}: fn.global-dim(--border --thin) solid fn.global-color(--border);
-    }
-}
-
-@include iro.bem-utility('mbs-neutralize') {
-    &::before {
-        content:       '';
-        display:       block;
-        margin-block:  -100em 100em;
+    @include bem.utility('sr-only') {
+        position:    absolute;
+        width:       1px;
+        height:      1px;
+        padding:     0;
+        margin:      -1px;
+        overflow:    hidden;
+        clip-path:   inset(50%);
+        white-space: nowrap;
+        border:      0;
     }
 }
diff --git a/src/functions/colors/_index.scss b/src/functions/colors/_index.scss
deleted file mode 100644
index 26c3027..0000000
--- a/src/functions/colors/_index.scss
+++ /dev/null
@@ -1,2 +0,0 @@
-@forward 'apca';
-@forward 'oklch';
diff --git a/src/functions/colors/_oklch.scss b/src/functions/colors/_oklch.scss
deleted file mode 100644
index e3df041..0000000
--- a/src/functions/colors/_oklch.scss
+++ /dev/null
@@ -1,88 +0,0 @@
-/* stylelint-disable scss/dollar-variable-pattern */
-/* stylelint-disable scss/at-function-pattern */
-
-@use 'sass:list';
-@use 'sass:math';
-@use 'sass:meta';
-@use 'sass:string';
-@use '@oddbird/blend/sass/convert' as blend-convert;
-@use '@oddbird/blend/sass/utils/pow';
-@use 'iro-sass/src/index' as iro;
-
-@function lin_sRGB_to_Oklab($color) {
-    $r_: list.nth($color, 1);
-    $g_: list.nth($color, 2);
-    $b_: list.nth($color, 3);
-
-    $l: pow.cbrt(0.4122214708 * $r_ + 0.5363325363 * $g_ + 0.0514459929 * $b_);
-    $m: pow.cbrt(0.2119034982 * $r_ + 0.6806995451 * $g_ + 0.1073969566 * $b_);
-        $s: pow.cbrt(0.0883024619 * $r_ + 0.2817188376 * $g_ + 0.6299787005 * $b_);
-    
-    @return (
-        0.2104542553 * $l + 0.7936177850 * $m - 0.0040720468 * $s,
-        1.9779984951 * $l - 2.4285922050 * $m + 0.4505937099 * $s,
-        0.0259040371 * $l + 0.7827717662 * $m - 0.8086757660 * $s,
-    );
-}
-
-@function Oklab_to_lin_sRGB($color) {
-    $l_: list.nth($color, 1);
-    $a_: list.nth($color, 2);
-    $b_: list.nth($color, 3);
-
-    $l: $l_ + 0.3963377774 * $a_ + 0.2158037573 * $b_;
-    $m: $l_ - 0.1055613458 * $a_ - 0.0638541728 * $b_;
-    $s: $l_ - 0.0894841775 * $a_ - 1.2914855480 * $b_;
-
-    $l: $l * $l * $l;
-    $m: $m * $m * $m;
-    $s: $s * $s * $s;
-    
-    @return (
-                 4.0767416621 * $l - 3.3077115913 * $m + 0.2309699292 * $s,
-                -1.2684380046 * $l + 2.6097574011 * $m - 0.3413193965 * $s,
-                -0.0041960863 * $l - 0.7034186147 * $m + 1.7076147010 * $s,
-    );
-}
-
-@function oklch($arg) {
-    $l: math.div(list.nth($arg, 1), 100%);
-    $c: list.nth($arg, 2);
-    $h: list.nth($arg, 3);
-
-    @return blend-convert.rgbToSass(
-        blend-convert.gam_sRGB(
-            Oklab_to_lin_sRGB(
-                blend-convert.LCH_to_Lab($l $c $h)
-            )
-        )
-    );
-}
-
-@function parse-oklch($color) {
-    @if meta.type-of($color) == 'color' {
-        @return blend-convert.Lab_to_LCH(
-            lin_sRGB_to_Oklab(
-                blend-convert.lin_sRGB(
-                    blend-convert.sassToRgb($color)
-                )
-            )
-        );
-    }
-
-    @if meta.type-of($color) != 'string' {
-        @return null;
-    }
-
-    @if string.slice($color, 1, 6) == 'oklch(' {
-        $args: string.split(string.slice($color, 7, -2), ' ');
-
-        $l: math.div(iro.fn-to-number(list.nth($args, 1)), 100%);
-        $c: iro.fn-to-number(list.nth($args, 2));
-        $h: iro.fn-to-number(list.nth($args, 3));
-
-        @return $l $c $h;
-    }
-
-    @return null;
-}
diff --git a/src/index.scss b/src/index.scss
deleted file mode 100644
index 50927e2..0000000
--- a/src/index.scss
+++ /dev/null
@@ -1,10 +0,0 @@
-@use 'declare-vars';
-
-@use 'base';
-@use 'layouts';
-@use 'objects';
-@use 'scopes';
-@use 'themes';
-@use 'utils';
-
-@use 'apply-vars';
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss
index a70d27a..b0a3c8e 100644
--- a/src/layouts/_button-group.scss
+++ b/src/layouts/_button-group.scss
@@ -1,16 +1,50 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('button-group') {
-    @include iro.props-store((
-        --dims: (
-            --spacing: fn.global-dim(--size --150),
-        ),
-    ));
-
-    @include iro.bem-layout(iro.props-namespace()) {
-        display:   flex;
-        gap:       fn.dim(--spacing);
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@forward 'button-group.vars';
+@use 'button-group.vars' as vars;
+@use '../objects/action-button.vars' as action-button;
+
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.layout('button-group') {
+        display:   inline-flex;
         flex-wrap: wrap;
+        gap:       props.get(vars.$gap);
+
+        @each $mod, $size in vars.$sizes {
+            @include bem.modifier($mod) {
+                gap: props.get($size);
+            }
+        }
+
+        @include bem.modifier('align-block') {
+            margin-inline: calc(-1 * props.get(action-button.$pad-i) - props.get(action-button.$border-width));
+
+            @include bem.modifier('pill') {
+                margin-inline: calc(-1 * props.get(action-button.$pad-i-pill) - props.get(action-button.$border-width));
+            }
+
+            @include bem.modifier('icon') {
+                margin-inline: calc(-1 * props.get(action-button.$pad-b) - props.get(action-button.$border-width) - .5em * (props.get(action-button.$line-height) - 1));
+            }
+
+            @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in action-button.$fixed-sizes {
+                @include bem.modifier('action-#{$mod}') {
+                    margin-inline: calc(-1 * props.get($pad-i) - props.get(action-button.$border-width));
+    
+                    @include bem.modifier('pill') {
+                        margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(action-button.$border-width));
+                    }
+
+                    @include bem.modifier('icon') {
+                        margin-inline: calc(-1 * props.get($pad-b) - props.get(action-button.$border-width) - .5em * (props.get(action-button.$line-height) - 1));
+                    }
+                }
+            }
+        }
     }
 }
diff --git a/src/layouts/_button-group.vars.scss b/src/layouts/_button-group.vars.scss
new file mode 100644
index 0000000..50c1b53
--- /dev/null
+++ b/src/layouts/_button-group.vars.scss
@@ -0,0 +1,16 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$gap: props.def(--l-button-group--gap, props.get(core.$size--150)) !default;
+
+$gapless: props.def(--l-button-group--gapless, 0) !default;
+$sm:      props.def(--l-button-group--sm, props.get(core.$size--100)) !default;
+$lg:      props.def(--l-button-group--lg, props.get(core.$size--300)) !default;
+$xl:      props.def(--l-button-group--xl, props.get(core.$size--450)) !default;
+
+$sizes: (
+    'gapless': $gapless,
+    'sm':      $sm,
+    'lg':      $lg,
+    'xl':      $xl,
+) !default;
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index 65b6a66..8ef40c5 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -1,94 +1,80 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:meta';
 @use 'include-media/dist/include-media' as media;
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
 
-@include iro.props-namespace('card-list') {
-    @include iro.props-store((
-        --dims: (
-            --row-gap: fn.global-dim(--size --800),
-            --col-gap: fn.global-dim(--size --400),
+@forward 'card-list.vars';
+@use 'card-list.vars' as vars;
 
-            --grid: (
-                --row-gap:   fn.global-dim(--size --800),
-                --col-gap:   fn.global-dim(--size --400),
-                --col-width: fn.global-dim(--size --3200),
-            ),
-            --masonry: (
-                --row-gap:   fn.global-dim(--size --800),
-                --col-gap:   fn.global-dim(--size --400),
-                --col-width: fn.global-dim(--size --3200),
-            ),
-            --masonry-h: (
-                --row-gap:    fn.global-dim(--size --800),
-                --col-gap:    fn.global-dim(--size --400),
-                --row-height: fn.global-dim(--size --3200),
-            )
-        ),
-        --colors: (
-            --border: fn.global-color(--border),
-        ),
-    ));
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-layout(iro.props-namespace()) {
+    @include bem.layout('card-list') {
         display:        flex;
         flex-direction: column;
-        gap:            fn.dim(--row-gap) fn.dim(--col-gap);
+        gap:            props.get(vars.$row-gap);
 
-        @include iro.bem-modifier('grid') {
+        @include bem.modifier('quiet') {
+            row-gap: props.get(vars.$quiet--row-gap);
+        }
+
+        @include bem.modifier('grid') {
             display:               grid;
-            grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr));
-            gap:                   fn.dim(--grid --col-gap);
+            grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr));
+            gap:                   props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap);
 
-            @include iro.bem-modifier('quiet') {
-                row-gap: fn.dim(--grid --row-gap);
+            @include bem.modifier('quiet') {
+                row-gap: props.get(vars.$grid--quiet--row-gap);
             }
         }
 
-        @include iro.bem-modifier('masonry') {
+        @include bem.modifier('masonry') {
             display:    block;
-            columns:    auto fn.dim(--masonry --col-width);
-            column-gap: fn.dim(--masonry --col-gap);
+            columns:    auto props.get(vars.$masonry--col-width);
+            column-gap: props.get(vars.$masonry--col-gap);
 
-            @include iro.bem-elem('card') {
-                margin-block-end: fn.dim(--masonry --col-gap);
+            @include bem.elem('card') {
+                margin-block-end: props.get(vars.$masonry--row-gap);
                 break-inside:     avoid;
             }
 
-            @include iro.bem-modifier('quiet') {
-                @include iro.bem-elem('card') {
-                    margin-block-end: fn.dim(--masonry --row-gap);
+            @include bem.modifier('quiet') {
+                @include bem.elem('card') {
+                    margin-block-end: props.get(vars.$masonry--quiet--row-gap);
                 }
             }
         }
 
-        @include iro.bem-modifier('masonry-h') {
+        @include bem.modifier('masonry-h') {
             flex-flow: row wrap;
-            gap:       fn.dim(--masonry-h --col-gap);
+            gap:       props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap);
 
-            &::after {
-                content:     '';
-                display:     block;
-                flex:        1 0 auto;
-                inline-size: fn.dim(--masonry-h --row-height);
-                block-size:  0;
+            @include bem.modifier('no-flush') {
+                &::after {
+                    display:     block;
+                    flex:        1 0 auto;
+                    inline-size: props.get(vars.$masonry-h--row-height);
+                    content:     '';
+                }
             }
 
-            @include iro.bem-elem('card') {
+            @include bem.elem('card') {
                 flex:            1 0 auto;
                 max-inline-size: 100%;
             }
 
-            @include iro.bem-elem('card-image') {
-                block-size: fn.dim(--masonry-h --row-height);
+            @include bem.elem('card-image') {
+                block-size: props.get(vars.$masonry-h--row-height);
             }
 
-            @include iro.bem-modifier('quiet') {
-                row-gap: fn.dim(--masonry-h --row-gap);
+            @include bem.modifier('quiet') {
+                row-gap: props.get(vars.$masonry-h--quiet--row-gap);
             }
         }
 
-        @include iro.bem-modifier('aspect-5\\/4') {
-            @include iro.bem-elem('card-image') {
+        @include bem.modifier('aspect-5\\/4') {
+            @include bem.elem('card-image') {
                 aspect-ratio: 5 / 4;
             }
         }
diff --git a/src/layouts/_card-list.vars.scss b/src/layouts/_card-list.vars.scss
new file mode 100644
index 0000000..f77bfbf
--- /dev/null
+++ b/src/layouts/_card-list.vars.scss
@@ -0,0 +1,22 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$row-gap:        props.def(--l-card-list--row-gap, props.get(core.$size--200)) !default;
+$quiet--row-gap: props.def(--l-card-list--quiet--row-gap, props.get(core.$size--800)) !default;
+
+$grid--row-gap:        props.def(--l-card-list--grid--row-gap, props.get(core.$size--400)) !default;
+$grid--col-gap:        props.def(--l-card-list--grid--col-gap, props.get(core.$size--400)) !default;
+$grid--col-width:      props.def(--l-card-list--grid--col-width, props.get(core.$size--3200)) !default;
+$grid--quiet--row-gap: props.def(--l-card-list--grid--quiet--row-gap, props.get(core.$size--800)) !default;
+
+$masonry--row-gap:        props.def(--l-card-list--masonry--row-gap, props.get(core.$size--400)) !default;
+$masonry--col-gap:        props.def(--l-card-list--masonry--col-gap, props.get(core.$size--400)) !default;
+$masonry--col-width:      props.def(--l-card-list--masonry--col-width, props.get(core.$size--3200)) !default;
+$masonry--quiet--row-gap: props.def(--l-card-list--masonry--quiet--row-gap, props.get(core.$size--800)) !default;
+
+$masonry-h--row-gap:        props.def(--l-card-list--masonry-h--row-gap, props.get(core.$size--400)) !default;
+$masonry-h--col-gap:        props.def(--l-card-list--masonry-h--col-gap, props.get(core.$size--400)) !default;
+$masonry-h--row-height:     props.def(--l-card-list--masonry-h--row-height, props.get(core.$size--3200)) !default;
+$masonry-h--quiet--row-gap: props.def(--l-card-list--masonry-h--quiet--row-gap, props.get(core.$size--800)) !default;
+
+$border-color: props.def(--l-card-list--border-color, props.get(core.$theme, --border), 'color') !default;
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index d13c4f3..17ab2f0 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -1,45 +1,28 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
 
-@include iro.props-namespace('container') {
-    @include iro.props-store((
-        --dims: (
-            --narrow-125: iro.fn-px-to-rem(720px),
-            --narrow:     iro.fn-px-to-rem(610px),
-            --narrow-75:  iro.fn-px-to-rem(500px),
-            --pad-i:      fn.global-dim(--size --400),
-            --pad-b:      fn.global-dim(--size --800),
-        )
-    ));
+@forward 'container.vars';
+@use 'container.vars' as vars;
 
-    @include iro.props-store((
-        --dims: (
-            --pad-i: fn.global-dim(--size --200),
-            --pad-b: fn.global-dim(--size --600),
-        )
-    ), 'sm');
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.props-store((
-        --dims: (
-            --pad-i: fn.global-dim(--size --150),
-            --pad-b: fn.global-dim(--size --450),
-        )
-    ), 'xs');
-
-    @include iro.bem-layout(iro.props-namespace()) {
-        @each $size in 'narrow-125' 'narrow' 'narrow-75' {
-            @include iro.bem-modifier($size) {
-                max-inline-size: fn.dim(--#{$size});
+    @include bem.layout('container') {
+        @each $mod, $size in vars.$fixed-sizes {
+            @include bem.modifier($mod) {
+                max-inline-size: props.get($size);
                 margin-inline:   auto;
             }
         }
 
-        @include iro.bem-modifier('pad-i') {
-            padding-inline: fn.dim(--pad-i);
+        @include bem.modifier('pad-i') {
+            padding-inline: props.get(vars.$pad-i);
         }
 
-        @include iro.bem-modifier('pad-b') {
-            padding-block: fn.dim(--pad-b);
+        @include bem.modifier('pad-b') {
+            padding-block: props.get(vars.$pad-b);
         }
     }
 }
diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss
new file mode 100644
index 0000000..56b6c89
--- /dev/null
+++ b/src/layouts/_container.vars.scss
@@ -0,0 +1,22 @@
+@use 'iro-sass/src/functions' as fn;
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$fixed-200: props.def(--l-container--fixed-200, fn.px-to-rem(1300px)) !default;
+$fixed-150: props.def(--l-container--fixed-150, fn.px-to-rem(860px)) !default;
+$fixed:     props.def(--l-container--fixed, fn.px-to-rem(680px)) !default;
+
+$fixed-sizes: (
+    'fixed-200': $fixed-200,
+    'fixed-150': $fixed-150,
+    'fixed':     $fixed
+) !default;
+
+$pad-i: props.def(--l-container--pad-i, props.get(core.$size--400)) !default;
+$pad-b: props.def(--l-container--pad-b, props.get(core.$size--800)) !default;
+
+$pad-i--sm: props.def(--l-container--pad-i, props.get(core.$size--200), 'sm') !default;
+$pad-b--sm: props.def(--l-container--pad-b, props.get(core.$size--600), 'sm') !default;
+
+$pad-i--xs: props.def(--l-container--pad-i, props.get(core.$size--150), 'xs') !default;
+$pad-b--xs: props.def(--l-container--pad-b, props.get(core.$size--450), 'xs') !default;
diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss
index d3f4f9c..902ecdb 100644
--- a/src/layouts/_flex.scss
+++ b/src/layouts/_flex.scss
@@ -1,27 +1,19 @@
-@use 'iro-sass/src/index' as iro;
+@use 'iro-sass/src/bem';
 
-@include iro.props-namespace('flex') {
-    @include iro.bem-layout(iro.props-namespace()) {
+@mixin styles {
+    @include bem.layout('flex') {
         display: flex;
 
-        @include iro.bem-modifier('align-stretch') {
-            align-items: stretch;
-        }
-
-        @include iro.bem-modifier('align-center') {
-            align-items: center;
-        }
-
-        @include iro.bem-modifier('align-start') {
-            align-items: flex-start;
+        @include bem.modifier('column') {
+            flex-direction: column;
         }
 
-        @include iro.bem-modifier('align-end') {
-            align-items: flex-end;
+        @include bem.modifier('wrap') {
+            flex-wrap: wrap;
         }
 
-        @include iro.bem-modifier('column') {
-            flex-direction: column;
+        @include bem.modifier('wrap-reverse') {
+            flex-wrap: wrap-reverse;
         }
     }
 }
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index f6b60ea..5f0567b 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -1,60 +1,57 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
 
-// @use '../objects/field-label';
+@forward 'form.vars';
+@use 'form.vars' as vars;
 
-@include iro.props-namespace('form') {
-    @include iro.props-store((
-        --dims: (
-            --item-spacing-b:  fn.global-dim(--size --325),
-            --label-spacing-i: fn.global-dim(--size --325),
-            --hint-font-size:  fn.global-dim(--font-size --75),
-        ),
-    ));
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-layout(iro.props-namespace()) {
+    @include bem.layout('form') {
         display:        flex;
         flex-direction: column;
-        gap:            fn.dim(--item-spacing-b) fn.dim(--label-spacing-i);
-    
-        @include iro.bem-elem('item') {
+        gap:            props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i);
+
+        @include bem.elem('item') {
             display: block;
         }
         
-        @include iro.bem-elem('item-content') {
-            @include iro.bem-modifier('align-start') {
+        @include bem.elem('item-content') {
+            @include bem.modifier('align-start') {
                 align-self: start;
             }
         }
-    
-        @include iro.bem-modifier('row') {
+
+        @include bem.modifier('row') {
             flex-direction: row;
             align-items:    flex-end;
         }
-    
-        @include iro.bem-modifier('labels-start', 'labels-end') {
+
+        @include bem.modifier('labels-start', 'labels-end') {
             display:               grid;
-            grid-template-columns: auto 1fr;
             grid-template-rows:    auto;
+            grid-template-columns: auto 1fr;
             align-items:           baseline;
-    
-            @include iro.bem-elem('item') {
+
+            @include bem.elem('item') {
                 display: contents;
             }
         
-            @include iro.bem-elem('item-label') {
+            @include bem.elem('item-label') {
                 grid-column:        1;
                 padding-inline-end: 0;
             }
         
-            @include iro.bem-elem('item-content') {
+            @include bem.elem('item-content') {
                 grid-column:        2;
                 margin-block-start: 0;
             }
         }
-    
-        @include iro.bem-modifier('labels-end') {
-            @include iro.bem-elem('item-label') {
+
+        @include bem.modifier('labels-end') {
+            @include bem.elem('item-label') {
                 text-align: end;
             }
         }
diff --git a/src/layouts/_form.vars.scss b/src/layouts/_form.vars.scss
new file mode 100644
index 0000000..c533e6b
--- /dev/null
+++ b/src/layouts/_form.vars.scss
@@ -0,0 +1,5 @@
+@use 'iro-sass/src/props';
+@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.scss b/src/layouts/_media.scss
index c42aa3e..2192db5 100644
--- a/src/layouts/_media.scss
+++ b/src/layouts/_media.scss
@@ -1,45 +1,39 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
 
-$sizes: 'gapless' 'sm' 'lg' 'xl' !default;
+@forward 'media.vars';
+@use 'media.vars' as vars;
 
-@include iro.props-namespace('media') {
-    @include iro.props-store((
-        --dims: (
-            --gap: fn.global-dim(--size --150),
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
 
-            --gapless: 0,
-            --sm: fn.global-dim(--size --100),
-            --lg: fn.global-dim(--size --300),
-            --xl: fn.global-dim(--size --450),
-        )
-    ));
-
-    @include iro.bem-layout(iro.props-namespace()) {
+    @include bem.layout('media') {
         display:     flex;
+        gap:         props.get(vars.$gap);
         align-items: center;
-        gap:         fn.dim(--gap);
         line-height: 1.4;
 
-        @each $size in $sizes {
-            @include iro.bem-modifier($size) {
-                gap: fn.dim(--#{$size});
+        @each $mod, $size in vars.$sizes {
+            @include bem.modifier($mod) {
+                gap: props.get($size);
             }
         }
 
-        @include iro.bem-modifier('wrap') {
+        @include bem.modifier('wrap') {
             flex-wrap: wrap;
         }
 
-        @include iro.bem-elem('block') {
+        @include bem.elem('block') {
             flex: 0 0 auto;
 
-            @include iro.bem-modifier('shrink', 'main') {
+            @include bem.modifier('shrink', 'main') {
                 flex-shrink:     1;
                 min-inline-size: 0;
             }
 
-            @include iro.bem-modifier('main') {
+            @include bem.modifier('main') {
                 inline-size: 100%;
             }
         }
diff --git a/src/layouts/_media.vars.scss b/src/layouts/_media.vars.scss
new file mode 100644
index 0000000..fd6d986
--- /dev/null
+++ b/src/layouts/_media.vars.scss
@@ -0,0 +1,16 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$gap:  props.def(--l-media--gap, props.get(core.$size--150)) !default;
+
+$gapless: props.def(--l-media--gapless, 0) !default;
+$sm:      props.def(--l-media--sm, props.get(core.$size--100)) !default;
+$lg:      props.def(--l-media--lg, props.get(core.$size--300)) !default;
+$xl:      props.def(--l-media--xl, props.get(core.$size--450)) !default;
+
+$sizes: (
+    'gapless': $gapless,
+    'sm':      $sm,
+    'lg':      $lg,
+    'xl':      $xl,
+) !default;
diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss
index 8643bbf..9fba7eb 100644
--- a/src/layouts/_overflow.scss
+++ b/src/layouts/_overflow.scss
@@ -1,9 +1,11 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
 
-@include iro.props-namespace('overflow') {
-    @include iro.bem-layout(iro.props-namespace()) {
+@mixin styles {
+    @include bem.layout('overflow') {
         overflow:        auto;
-        scrollbar-color: fn.global-color(--text-disabled) transparent;
+        scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
     }
 }
+
diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss
new file mode 100644
index 0000000..f522254
--- /dev/null
+++ b/src/layouts/_split-view.scss
@@ -0,0 +1,91 @@
+@use 'sass:meta';
+@use 'include-media/dist/include-media' as media;
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@forward 'split-view.vars';
+@use 'split-view.vars' as vars;
+
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.layout('split-view') {
+        display:     flex;
+        gap:         props.get(vars.$col-gap);
+        align-items: start;
+
+        @include bem.elem('panel') {
+            flex:            1 1 auto;
+            inline-size:     100%;
+            min-inline-size: 0;
+
+            @include bem.modifier('side-25') {
+                flex:            0 0 auto;
+                inline-size:     25%;
+                min-inline-size: props.get(vars.$panel--side-25--min);
+            }
+
+            @include bem.modifier('sticky-0') {
+                position:          sticky;
+                inset-block-start: 0;
+            }
+
+            @include bem.modifier('sticky') {
+                position:          sticky;
+                inset-block-start: props.get(vars.$panel--sticky-offset);
+            }
+
+            @include bem.modifier('sticky-400') {
+                position:          sticky;
+                inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset));
+            }
+
+            @include bem.modifier('sticky-1200') {
+                position:          sticky;
+                inset-block-start: calc(props.get(vars.$panel--sticky-1200--inset) + props.get(vars.$panel--sticky-offset));
+            }
+        }
+
+        @include bem.modifier('gapless') {
+            gap: props.get(vars.$gapless);
+
+            @include bem.elem('panel') {
+                @include bem.modifier('side-25') {
+                    min-inline-size: calc(props.get(vars.$panel--side-25--min) + props.get(vars.$col-gap) - props.get(vars.$gapless));
+                }
+            }
+        }
+
+        @include bem.elem('content') {
+            inline-size: 100%;
+        }
+
+        @include media.media('<=md') {
+            flex-direction: column;
+            gap:            props.get(vars.$row-gap);
+            align-items:    stretch;
+
+            @include bem.modifier('gapless') {
+                gap: props.get(vars.$gapless);
+            }
+
+            @include bem.modifier('wrap-reverse') {
+                flex-direction: column-reverse;
+            }
+
+            @include bem.elem('panel') {
+                inline-size: auto;
+                
+                @include bem.modifier('side-25') {
+                    inline-size:     auto;
+                    min-inline-size: 0;
+                }
+
+                @include bem.modifier('sticky', 'sticky-400', 'sticky-1200') {
+                    position: static;
+                }
+            }
+        }
+    }
+}
diff --git a/src/layouts/_split-view.vars.scss b/src/layouts/_split-view.vars.scss
new file mode 100644
index 0000000..d519939
--- /dev/null
+++ b/src/layouts/_split-view.vars.scss
@@ -0,0 +1,13 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$col-gap:  props.def(--l-split-view--col-gap, props.get(core.$size--800)) !default;
+$row-gap:  props.def(--l-split-view--row-gap, props.get(core.$size--600)) !default;
+
+$gapless: props.def(--l-split-view--gapless, 0rem) !default;
+
+$panel--side-25--min: props.def(--l-split-view--panel--side-25--min, props.get(core.$size--3200)) !default;
+$panel--sticky-400--inset: props.def(--l-split-view--panel--sticky-400--inset, props.get(core.$size--400)) !default;
+$panel--sticky-1200--inset: props.def(--l-split-view--panel--sticky-1200--inset, props.get(core.$size--1200)) !default;
+
+$panel--sticky-offset: props.def(--l-split-view--panel--sticky-offset, props.get(core.$sticky-top-offset)) !default;
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 7fe9d44..1dd4b84 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -1,292 +1,130 @@
 @use 'sass:list';
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
 
-$sizes:         'sm' 'lg' 'xl' !default;
-$static-themes: 'black' 'white' !default;
+@forward 'action-button.vars';
+@use 'action-button.vars' as vars;
 
-@mixin static-theme($theme: ()) {
-    border-color:     fn.color(list.join($theme, --disabled --border));
-    background-color: fn.color(list.join($theme, --disabled --bg));
-    color:            fn.color(list.join($theme, --disabled --label));
+@mixin -apply-theme($theme, $key: ()) {
+    color:            props.get($theme, list.join($key, --disabled --label-color)...);
+    background-color: props.get($theme, list.join($key, --disabled --bg-color)...);
+    border-color:     props.get($theme, list.join($key, --disabled --border-color)...);
 
     &::after {
-        outline-color: fn.color(list.join($theme, --key-focus --border));
-        box-shadow:    0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline));
+        outline-color: props.get($theme, list.join($key, --key-focus --border-color)...);
+        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-color)...);
     }
 
     &:link,
     &:visited,
     &:enabled {
-        border-color:     fn.color(list.join($theme, --border));
-        background-color: fn.color(list.join($theme, --bg));
-        color:            fn.color(list.join($theme, --label));
+        color:            props.get($theme, list.join($key, --label-color)...);
+        background-color: props.get($theme, list.join($key, --bg-color)...);
+        border-color:     props.get($theme, list.join($key, --border-color)...);
 
         &:hover,
         &:focus-visible {
-            border-color:     fn.color(list.join($theme, --hover --border));
-            background-color: fn.color(list.join($theme, --hover --bg));
-            color:            fn.color(list.join($theme, --hover --label));
+            color:            props.get($theme, list.join($key, --hover --label-color)...);
+            background-color: props.get($theme, list.join($key, --hover --bg-color)...);
+            border-color:     props.get($theme, list.join($key, --hover --border-color)...);
         }
 
         &:active {
-            border-color:     fn.color(list.join($theme, --active --border));
-            background-color: fn.color(list.join($theme, --active --bg));
-            color:            fn.color(list.join($theme, --active --label));
+            color:            props.get($theme, list.join($key, --active --label-color)...);
+            background-color: props.get($theme, list.join($key, --active --bg-color)...);
+            border-color:     props.get($theme, list.join($key, --active --border-color)...);
         }
     }
 
-    @include iro.bem-modifier('quiet') {
-        border-color:     transparent;
+    @include bem.modifier('quiet') {
+        color:            props.get($theme, list.join($key, --quiet --disabled --label-color)...);
         background-color: transparent;
-        color:            fn.color(list.join($theme, --quiet --disabled --label));
+        border-color:     transparent;
 
         &:link,
         &:visited,
         &:enabled {
-            border-color:     transparent;
+            color:            props.get($theme, list.join($key, --quiet --label-color)...);
             background-color: transparent;
-            color:            fn.color(list.join($theme, --quiet --label));
+            border-color:     transparent;
 
             &:hover,
             &:focus-visible {
+                color:            props.get($theme, list.join($key, --quiet --hover --label-color)...);
+                background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
                 border-color:     transparent;
-                background-color: fn.color(list.join($theme, --quiet --hover --bg));
-                color:            fn.color(list.join($theme, --quiet --hover --label));
             }
 
             &:active {
+                color:            props.get($theme, list.join($key, --quiet --active --label-color)...);
+                background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
                 border-color:     transparent;
-                background-color: fn.color(list.join($theme, --quiet --active --bg));
-                color:            fn.color(list.join($theme, --quiet --active --label));
             }
         }
     }
 
-    @include iro.bem-is('selected') {
-        border-color:     fn.color(list.join($theme, --selected --disabled --border));
-        background-color: fn.color(list.join($theme, --selected --disabled --bg));
-        color:            fn.color(list.join($theme, --selected --disabled --label));
+    @include bem.is('selected') {
+        color:            props.get($theme, list.join($key, --selected --disabled --label-color)...);
+        background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
+        border-color:     props.get($theme, list.join($key, --selected --disabled --border-color)...);
 
         &:link,
         &:visited,
         &:enabled {
-            border-color:     fn.color(list.join($theme, --selected --border));
-            background-color: fn.color(list.join($theme, --selected --bg));
-            color:            fn.color(list.join($theme, --selected --label));
+            color:            props.get($theme, list.join($key, --selected --label-color)...);
+            background-color: props.get($theme, list.join($key, --selected --bg-color)...);
+            border-color:     props.get($theme, list.join($key, --selected --border-color)...);
     
             &:hover,
             &:focus-visible {
-                border-color:     fn.color(list.join($theme, --selected --hover --border));
-                background-color: fn.color(list.join($theme, --selected --hover --bg));
-                color:            fn.color(list.join($theme, --selected --hover --label));
+                color:            props.get($theme, list.join($key, --selected --hover --label-color)...);
+                background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
+                border-color:     props.get($theme, list.join($key, --selected --hover --border-color)...);
             }
     
             &:active {
-                border-color:     fn.color(list.join($theme, --selected --active --border));
-                background-color: fn.color(list.join($theme, --selected --active --bg));
-                color:            fn.color(list.join($theme, --selected --active --label));
+                color:            props.get($theme, list.join($key, --selected --active --label-color)...);
+                background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
+                border-color:     props.get($theme, list.join($key, --selected --active --border-color)...);
             }
         }
     }
 }
 
-@include iro.props-namespace('action-button') {
-    @include iro.props-store((
-        --dims: (
-            --line-height: 1.4,
-            --pad-i:       fn.global-dim(--size --150),
-            --pad-i-pill:  fn.global-dim(--size --200),
-            --pad-b:       fn.global-dim(--size --85),
-            --border:      fn.global-dim(--border --thin),
-            --rounding:    fn.global-dim(--rounding),
-            --font-size:   fn.global-dim(--font-size --100),
-
-            --sm: (
-                --pad-i:      fn.global-dim(--size --100),
-                --pad-i-pill: fn.global-dim(--size --150),
-                --pad-b:      fn.global-dim(--size --40),
-                --font-size:  fn.global-dim(--font-size --75),
-            ),
-            --lg: (
-                --pad-i:      fn.global-dim(--size --175),
-                --pad-i-pill: fn.global-dim(--size --225),
-                --pad-b:      fn.global-dim(--size --115),
-                --font-size:  fn.global-dim(--font-size --150),
-            ),
-            --xl: (
-                --pad-i:      fn.global-dim(--size --225),
-                --pad-i-pill: fn.global-dim(--size --300),
-                --pad-b:      fn.global-dim(--size --150),
-                --font-size:  fn.global-dim(--font-size --200),
-            ),
-            
-            --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(--base --75),
-            --label:  fn.global-color(--text),
-            --border: fn.global-color(--border-strong),
-    
-            --hover: (
-                --bg:     fn.global-color(--border-mute),
-                --label:  fn.global-color(--heading),
-                --border: fn.global-color(--text-mute-more),
-            ),
-            --active: (
-                --bg:     fn.global-color(--border),
-                --label:  fn.global-color(--heading),
-                --border: fn.global-color(--text-mute),
-            ),
-            --disabled: (
-                --bg:     fn.global-color(--bg-l1),
-                --label:  fn.global-color(--border-strong),
-                --border: fn.global-color(--border),
-            ),
-            --key-focus: (
-                --border:  fn.global-color(--focus --border),
-                --outline: fn.global-color(--focus --outline),
-            ),
-
-            --selected: (
-                --bg:     fn.global-color(--text-mute),
-                --label:  fn.global-color(--base --50),
-                --border: fn.global-color(--text-mute),
-
-                --hover: (
-                    --bg:     fn.global-color(--text),
-                    --label:  fn.global-color(--base --50),
-                    --border: fn.global-color(--text),
-                ),
-                --active: (
-                    --bg:     fn.global-color(--heading),
-                    --label:  fn.global-color(--base --50),
-                    --border: fn.global-color(--heading),
-                ),
-                --disabled: (
-                    --bg:     fn.global-color(--border-mute),
-                    --label:  fn.global-color(--border-strong),
-                    --border: fn.global-color(--border-mute),
-                ),
-            ),
-
-            --quiet: (
-                --label: fn.global-color(--text),
-    
-                --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(--border-strong),
-                ),
-            ),
-        ),
-    ));
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
 
-    @each $theme in $static-themes {
-        @include iro.props-store((
-            --colors: (
-                --static-#{$theme}: (
-                    --bg:     fn.global-color(--#{$theme}-transparent --100),
-                    --label:  fn.global-color(--#{$theme}-transparent --900),
-                    --border: fn.global-color(--#{$theme}-transparent --400),
-            
-                    --hover: (
-                        --bg:     fn.global-color(--#{$theme}-transparent --300),
-                        --label:  fn.global-color(--#{$theme}-transparent --900),
-                        --border: fn.global-color(--#{$theme}-transparent --500),
-                    ),
-                    --active: (
-                        --bg:     fn.global-color(--#{$theme}-transparent --400),
-                        --label:  fn.global-color(--#{$theme}-transparent --900),
-                        --border: fn.global-color(--#{$theme}-transparent --600),
-                    ),
-                    --disabled: (
-                        --bg:     fn.global-color(--#{$theme}-transparent --100),
-                        --label:  fn.global-color(--#{$theme}-transparent --500),
-                        --border: fn.global-color(--#{$theme}-transparent --300),
-                    ),
-                    --key-focus: (
-                        --border:  fn.global-color(--#{$theme}-transparent --900),
-                        --outline: fn.global-color(--#{$theme}-transparent --300),
-                    ),
-
-                    --selected: (
-                        --bg:     fn.global-color(--#{$theme}-transparent --800),
-                        --label:  fn.global-color(--#{$theme}-transparent --text),
-                        --border: fn.global-color(--#{$theme}-transparent --100),
-        
-                        --hover: (
-                            --bg:     fn.global-color(--#{$theme}-transparent --900),
-                            --label:  fn.global-color(--#{$theme}-transparent --text),
-                            --border: fn.global-color(--#{$theme}-transparent --100),
-                        ),
-                        --active: (
-                            --bg:     fn.global-color(--#{$theme}-transparent --900),
-                            --label:  fn.global-color(--#{$theme}-transparent --text),
-                            --border: fn.global-color(--#{$theme}-transparent --100),
-                        ),
-                        --disabled: (
-                            --bg:     fn.global-color(--#{$theme}-transparent --200),
-                            --label:  fn.global-color(--#{$theme}-transparent --500),
-                            --border: fn.global-color(--#{$theme}-transparent --100),
-                        ),
-                    ),
-
-                    --quiet: (
-                        --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),
-                        ),
-                        --disabled: (
-                            --label: fn.global-color(--#{$theme}-transparent --500),
-                        ),
-                    ),
-                ),
-            )
-        ));
-    }
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:          inline-block;
+    @include bem.object('action-button') {
         position:         relative;
-        padding-block:    fn.dim(--pad-b);
-        padding-inline:   fn.dim(--pad-i);
-        border:           fn.dim(--border) solid fn.color(--disabled --border);
-        border-radius:    fn.dim(--rounding);
-        background-color: fn.color(--disabled --bg);
-        color:            fn.color(--disabled --label);
-        line-height:      fn.dim(--line-height);
+        display:          inline-block;
+        padding-block:    props.get(vars.$pad-b);
+        padding-inline:   props.get(vars.$pad-i);
+        line-height:      props.get(vars.$line-height);
         text-align:       center;
         text-decoration:  none;
         text-overflow:    ellipsis;
         white-space:      nowrap;
+        border:           props.get(vars.$border-width) solid transparent;
+        border-radius:    props.get(vars.$rounding);
 
         &::after {
-            content:        '';
-            display:        none;
             position:       absolute;
+            inset:          calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset));
             z-index:        1;
-            inset:          calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset));
-            border-radius:  calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
-            outline:        fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
-            box-shadow:     0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+            display:        none;
             pointer-events: none;
+            content:        '';
+            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,
@@ -299,16 +137,20 @@ $static-themes: 'black' 'white' !default;
             }
         }
 
-        @include static-theme;
+        @include bem.elem('label') {
+            margin-inline: props.get(vars.$pad-i-label);
+        }
+
+        @include -apply-theme(vars.$default-theme);
 
-        @each $theme in $static-themes {
-            @include iro.bem-modifier(static-#{$theme}) {
-                @include static-theme(--static-#{$theme});
+        @each $theme in map.keys(props.get(vars.$themes)) {
+            @include bem.modifier(string.slice($theme, 3)) {
+                @include -apply-theme(vars.$themes, $theme);
             }
         }
 
-        @include iro.bem-modifier('pill') {
-            padding-inline: fn.dim(--pad-i-pill);
+        @include bem.modifier('pill') {
+            padding-inline: props.get(vars.$pad-i-pill);
             border-radius:  100em;
 
             &::after {
@@ -316,26 +158,54 @@ $static-themes: 'black' 'white' !default;
             }
         }
 
-        @each $size in $sizes {
-            @include iro.bem-modifier($size) {
-                padding-block:  fn.dim(--#{$size} --pad-b);
-                padding-inline: fn.dim(--#{$size} --pad-i);
-                font-size:      fn.dim(--#{$size} --font-size);
+        @include bem.modifier('icon') {
+            inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
+            padding-inline: 0;
+        }
+
+        @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
+            @include bem.modifier($mod) {
+                padding-block:  props.get($pad-b);
+                padding-inline: props.get($pad-i);
+                font-size:      props.get($font-size);
+
+                @include bem.elem('label') {
+                    margin-inline: props.get($pad-i-label);
+                }
 
-                @include iro.bem-modifier('pill') {
-                    padding-inline: fn.dim(--#{$size} --pad-i-pill);
+                @include bem.modifier('pill') {
+                    padding-inline: props.get($pad-i-pill);
+                }
+
+                @include bem.modifier('icon') {
+                    inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
+                    padding-inline: 0;
                 }
             }
         }
 
-        @include iro.bem-modifier('icon') {
-            inline-size:    calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b));
-            padding-inline: 0;
+        @include bem.modifier('align-block') {
+            margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width));
 
-            @each $size in $sizes {
-                @include iro.bem-modifier($size) {
-                    inline-size:    calc(1em * fn.dim(--line-height) + 2 * fn.dim(--#{$size} --pad-b));
-                    padding-inline: 0;
+            @include bem.modifier('pill') {
+                margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width));
+            }
+
+            @include bem.modifier('icon') {
+                margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
+            }
+
+            @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
+                @include bem.modifier($mod) {
+                    margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width));
+    
+                    @include bem.modifier('pill') {
+                        margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width));
+                    }
+
+                    @include bem.modifier('icon') {
+                        margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
+                    }
                 }
             }
         }
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
new file mode 100644
index 0000000..8c3d510
--- /dev/null
+++ b/src/objects/_action-button.vars.scss
@@ -0,0 +1,193 @@
+@use 'sass:map';
+@use 'sass:string';
+@use 'iro-sass/src/props';
+@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;
+$pad-i-label:  props.def(--o-action-button--pad-i-label, props.get(core.$size--50)) !default;
+$pad-i-pill:   props.def(--o-action-button--pad-i-pill, props.get(core.$size--200)) !default;
+$pad-b:        props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default;
+$border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default;
+$rounding:     props.def(--o-action-button--rounding, props.get(core.$rounding)) !default;
+$font-size:    props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default;
+
+$pad-i--sm:       props.def(--o-action-button--sm--pad-i, props.get(core.$size--100)) !default;
+$pad-i-label--sm: props.def(--o-action-button--sm--pad-i-label, props.get(core.$size--25)) !default;
+$pad-i-pill--sm:  props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--150)) !default;
+$pad-b--sm:       props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default;
+$font-size--sm:   props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default;
+
+$pad-i--lg:       props.def(--o-action-button--lg--pad-i, props.get(core.$size--175)) !default;
+$pad-i-label--lg: props.def(--o-action-button--lg--pad-i-label, props.get(core.$size--100)) !default;
+$pad-i-pill--lg:  props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--250)) !default;
+$pad-b--lg:       props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default;
+$font-size--lg:   props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default;
+
+$pad-i--xl:       props.def(--o-action-button--xl--pad-i, props.get(core.$size--225)) !default;
+$pad-i-label--xl: props.def(--o-action-button--xl--pad-i-label, props.get(core.$size--150)) !default;
+$pad-i-pill--xl:  props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--300)) !default;
+$pad-b--xl:       props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default;
+$font-size--xl:   props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default;
+
+$key-focus--border-width:  props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
+$key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
+$key-focus--outline-width: props.def(--o-action-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+
+$fixed-sizes: (
+    'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
+    'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
+    'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
+) !default;
+
+$themes: props.def(--o-action-button, (), 'color');
+
+$default-theme-override: () !default;
+$default-theme: map.deep-merge((
+    --bg-color:     props.get(core.$theme, --base, --75),
+    --label-color:  props.get(core.$theme, --text),
+    --border-color: props.get(core.$theme, --border-strong),
+
+    --hover: (
+        --bg-color:     props.get(core.$theme, --border-mute),
+        --label-color:  props.get(core.$theme, --heading),
+        --border-color: props.get(core.$theme, --text-mute-more),
+    ),
+
+    --active: (
+        --bg-color:     props.get(core.$theme, --border),
+        --label-color:  props.get(core.$theme, --heading),
+        --border-color: props.get(core.$theme, --text-mute),
+    ),
+
+    --disabled: (
+        --bg-color:     props.get(core.$theme, --bg-l1),
+        --label-color:  props.get(core.$theme, --border-strong),
+        --border-color: props.get(core.$theme, --border),
+    ),
+
+    --key-focus: (
+        --border-color:  props.get(core.$theme, --focus, --border),
+        --outline-color: props.get(core.$theme, --focus, --outline),
+    ),
+
+    --selected: (
+        --bg-color:     props.get(core.$theme, --heading),
+        --label-color:  props.get(core.$theme, --base, --50),
+        --border-color: props.get(core.$theme, --heading),
+
+        --hover: (
+            --bg-color:     props.get(core.$theme, --text),
+            --label-color:  props.get(core.$theme, --base, --50),
+            --border-color: props.get(core.$theme, --text),
+        ),
+
+        --active: (
+            --bg-color:     props.get(core.$theme, --text-mute),
+            --label-color:  props.get(core.$theme, --base, --50),
+            --border-color: props.get(core.$theme, --text-mute),
+        ),
+
+        --disabled: (
+            --bg-color:     props.get(core.$theme, --border-mute),
+            --label-color:  props.get(core.$theme, --border-strong),
+            --border-color: props.get(core.$theme, --border-mute),
+        ),
+    ),
+
+    --quiet: (
+        --label-color:  props.get(core.$theme, --text),
+
+        --hover: (
+            --bg-color:    props.get(core.$theme, --border-mute),
+            --label-color: props.get(core.$theme, --heading),
+        ),
+
+        --active: (
+            --bg-color:    props.get(core.$theme, --border),
+            --label-color: props.get(core.$theme, --heading),
+        ),
+
+        --disabled: (
+            --label-color: props.get(core.$theme, --border-strong),
+        ),
+    ),
+), $default-theme-override) !default;
+$default-theme: props.def(--o-action-button, $default-theme, 'color');
+
+@each $theme in map.keys(props.get(core.$transparent-colors)) {
+    $button-theme: --static-#{string.slice($theme, 3)};
+
+    $themes: props.merge($themes, (
+        $button-theme: (
+            --bg-color:     props.get(core.$transparent-colors, $theme, --100),
+            --label-color:  props.get(core.$transparent-colors, $theme, --900),
+            --border-color: props.get(core.$transparent-colors, $theme, --400),
+
+            --hover: (
+                --bg-color:     props.get(core.$transparent-colors, $theme, --300),
+                --label-color:  props.get(core.$transparent-colors, $theme, --900),
+                --border-color: props.get(core.$transparent-colors, $theme, --500),
+            ),
+
+            --active: (
+                --bg-color:     props.get(core.$transparent-colors, $theme, --400),
+                --label-color:  props.get(core.$transparent-colors, $theme, --900),
+                --border-color: props.get(core.$transparent-colors, $theme, --600),
+            ),
+
+            --disabled: (
+                --bg-color:     props.get(core.$transparent-colors, $theme, --100),
+                --label-color:  props.get(core.$transparent-colors, $theme, --500),
+                --border-color: props.get(core.$transparent-colors, $theme, --300),
+            ),
+
+            --key-focus: (
+                --border-color:  props.get(core.$transparent-colors, $theme, --900),
+                --outline-color: props.get(core.$transparent-colors, $theme, --300),
+            ),
+
+            --selected: (
+                --bg-color:     props.get(core.$transparent-colors, $theme, --800),
+                --label-color:  props.get(core.$transparent-colors, $theme, --text),
+                --border-color: props.get(core.$transparent-colors, $theme, --100),
+
+                --hover: (
+                    --bg-color:     props.get(core.$transparent-colors, $theme, --900),
+                    --label-color:  props.get(core.$transparent-colors, $theme, --text),
+                    --border-color: props.get(core.$transparent-colors, $theme, --100),
+                ),
+
+                --active: (
+                    --bg-color:     props.get(core.$transparent-colors, $theme, --900),
+                    --label-color:  props.get(core.$transparent-colors, $theme, --text),
+                    --border-color: props.get(core.$transparent-colors, $theme, --100),
+                ),
+
+                --disabled: (
+                    --bg-color:     props.get(core.$transparent-colors, $theme, --200),
+                    --label-color:  props.get(core.$transparent-colors, $theme, --500),
+                    --border-color: props.get(core.$transparent-colors, $theme, --100),
+                ),
+            ),
+
+            --quiet: (
+                --label-color:  props.get(core.$transparent-colors, $theme, --900),
+        
+                --hover: (
+                    --bg-color:    props.get(core.$transparent-colors, $theme, --300),
+                    --label-color: props.get(core.$transparent-colors, $theme, --900),
+                ),
+        
+                --active: (
+                    --bg-color:    props.get(core.$transparent-colors, $theme, --400),
+                    --label-color: props.get(core.$transparent-colors, $theme, --900),
+                ),
+        
+                --disabled: (
+                    --label-color: props.get(core.$transparent-colors, $theme, --500),
+                ),
+            ),
+        )
+    ));
+}
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index 067c00c..825f7ce 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -1,42 +1,25 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:map';
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
 
-$themes: 'accent' 'positive' 'negative' 'warning' !default;
+@forward 'alert.vars';
+@use 'alert.vars' as vars;
 
-@include iro.props-namespace('alert') {
-    @include iro.props-store((
-        --dims: (
-            --border:   fn.global-dim(--border --medium),
-            --pad-i:    fn.global-dim(--size --250),
-            --pad-b:    fn.global-dim(--size --200),
-            --rounding: fn.global-dim(--rounding),
-        ),
-        --colors: (
-            --bg:     fn.global-color(--bg-l2),
-            --border: fn.global-color(--text-mute-more),
-        ),
-    ));
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
 
-    @each $theme in $themes {
-        @include iro.props-store((
-            --colors: (
-                --#{$theme}: (
-                    --border: fn.global-color(--#{$theme} --700),
-                ),
-            ),
-        ));
-    }
-
-    @include iro.bem-object(iro.props-namespace()) {
-        padding-block:    fn.dim(--pad-b);
-        padding-inline:   fn.dim(--pad-i);
-        border:           fn.dim(--border) solid fn.color(--border);
-        border-radius:    fn.dim(--rounding);
-        background-color: fn.color(--bg);
+    @include bem.object('alert') {
+        padding-block:    props.get(vars.$pad-b);
+        padding-inline:   props.get(vars.$pad-i);
+        background-color: props.get(vars.$bg-color);
+        border:           props.get(vars.$border-width) solid props.get(vars.$border-color);
+        border-radius:    props.get(vars.$rounding);
 
-        @each $theme in $themes {
-            @include iro.bem-modifier($theme) {
-                border-color: fn.color(--#{$theme} --border);
+        @each $mod, $theme in vars.$themes-config {
+            @include bem.modifier($mod) {
+                border-color: props.get(vars.$themes, $theme, --border-color);
             }
         }
     }
diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss
new file mode 100644
index 0000000..53c9e68
--- /dev/null
+++ b/src/objects/_alert.vars.scss
@@ -0,0 +1,27 @@
+@use 'iro-sass/src/props';
+@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;
+$pad-b:        props.def(--o-alert--pad-b, props.get(core.$size--200)) !default;
+$rounding:     props.def(--o-alert--rounding, props.get(core.$rounding)) !default;
+
+$bg-color:     props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
+$border-color: props.def(--o-alert--border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+
+$themes-config: (
+    accent:   --accent,
+    positive: --positive,
+    negative: --negative,
+    warning:  --warning,
+) !default;
+
+$themes: props.def(--o-alert, (), 'color');
+
+@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.scss b/src/objects/_avatar.scss
index 19bff10..81396e3 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -1,159 +1,118 @@
-@use 'sass:list';
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-$sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
-
-@mixin status($size: ()) {
-    @include iro.bem-elem('status') {
-        inline-size: fn.dim(list.join($size, --indicator-size));
-        block-size:  fn.dim(list.join($size, --indicator-size));
-
-        @include iro.bem-next-elem('content') {
-            mask-image: radial-gradient(
-                circle calc(.5 * fn.dim(list.join($size, --indicator-size)) + fn.dim(--indicator-spacing)) at
-                calc(100% - .5 * fn.dim(list.join($size, --indicator-size)))
-                calc(100% - .5 * fn.dim(list.join($size, --indicator-size))),
-                transparent 95%,
-                #fff
-            );
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@forward 'avatar.vars';
+@use 'avatar.vars' as vars;
+
+@mixin status($indicator-size) {
+    @include bem.elem('status') {
+        inline-size: props.get($indicator-size);
+        block-size:  props.get($indicator-size);
+
+        @include bem.sibling-elem('content') {
+            mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at
+            calc(100% - .5 * props.get($indicator-size))
+            calc(100% - .5 * props.get($indicator-size)),
+            transparent 95%,
+            #fff);
         }
     }
 }
 
-@include iro.props-namespace('avatar') {
-    @include iro.props-store((
-        --dims: (
-            --size:              fn.global-dim(--size --500),
-            --font-size:         fn.global-dim(--font-size --100),
-            --indicator-size:    fn.global-dim(--size --150),
-            --indicator-spacing: fn.global-dim(--size --40),
-            --rounding:          25%,
-
-            --xxxl: (
-                --size:           fn.global-dim(--size --1600),
-                --font-size:      fn.global-dim(--font-size --800),
-                --indicator-size: fn.global-dim(--size --400),
-            ),
-            --xxl: (
-                --size:           fn.global-dim(--size --1200),
-                --font-size:      fn.global-dim(--font-size --600),
-                --indicator-size: fn.global-dim(--size --300),
-            ),
-            --xl: (
-                --size:           fn.global-dim(--size --800),
-                --font-size:      fn.global-dim(--font-size --300),
-                --indicator-size: fn.global-dim(--size --225),
-            ),
-            --lg: (
-                --size:           fn.global-dim(--size --650),
-                --font-size:      fn.global-dim(--font-size --200),
-                --indicator-size: fn.global-dim(--size --175),
-            ),
-            --sm: (
-                --size:           fn.global-dim(--size --375),
-                --font-size:      fn.global-dim(--font-size --75),
-                --indicator-size: fn.global-dim(--size --125),
-            ),
-            --xs: (
-                --size:           fn.global-dim(--size --250),
-                --font-size:      fn.global-dim(--font-size --50),
-                --indicator-size: fn.global-dim(--size --100),
-            ),
-            
-            --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: (
-            --h: 354,
-            --s: 44%,
-            --l: 45%,
-
-            --key-focus: (
-                --border:  fn.global-color(--focus --border),
-                --outline: fn.global-color(--focus --outline),
-            ),
-        ),
-    ));
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:        inline-block;
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.object('avatar') {
         position:       relative;
-        border-radius:  fn.dim(--rounding);
-        font-size:      fn.dim(--font-size);
+        display:        inline-block;
+        font-size:      props.get(vars.$font-size);
         font-style:     normal;
         vertical-align: .05em;
+        border-radius:  props.get(vars.$rounding);
 
         &::after {
-            content:        '';
-            display:        none;
             position:       absolute;
+            inset:          calc(-1 * props.get(vars.$key-focus--border-offset));
             z-index:        1;
-            inset:          calc(-1 * fn.dim(--key-focus --border-offset));
-            border:         fn.dim(--key-focus --border-offset) solid transparent;
-            border-radius:  fn.dim(--rounding);
-            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);
+            display:        none;
             pointer-events: none;
+            content:        '';
+            border:         props.get(vars.$key-focus--border-offset) solid transparent;
+            border-radius:  props.get(vars.$rounding);
+            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);
         }
 
-        @include iro.bem-elem('status') {
+        @include bem.elem('status') {
             position:         absolute;
-            inset-inline-end: 0;
             inset-block-end:  0;
+            inset-inline-end: 0;
         }
 
-        @include status;
+        @include status(vars.$indicator-size);
 
-        @include iro.bem-elem('content') {
+        @include bem.elem('content') {
             display:          block;
-            inline-size:      fn.dim(--size);
-            block-size:       fn.dim(--size);
-            border-radius:    fn.dim(--rounding);
-            line-height:      fn.dim(--size);
+            inline-size:      props.get(vars.$size);
+            block-size:       props.get(vars.$size);
+            line-height:      props.get(vars.$size);
             text-align:       center;
             object-fit:       cover;
             object-position:  center center;
+            border-radius:    props.get(vars.$rounding);
         }
 
-        @include iro.bem-modifier('circle') {
+        @include bem.modifier('circle') {
             border-radius: 100%;
 
             &::after {
                 border-radius: 100%;
             }
 
-            @include iro.bem-elem('content') {
+            @include bem.elem('content') {
                 border-radius: 100%;
             }
         }
 
-        @include iro.bem-modifier('placeholder') {
-            @include iro.bem-elem('content') {
-                background-color: hsl(0, 0%, fn.color(--l));
+        @include bem.modifier('placeholder') {
+            @include bem.elem('content') {
+                background-color: hsl(0, 0%, props.get(vars.$bg-color--l));
             }
         }
 
-        @include iro.bem-modifier('colored') {
-            @include iro.bem-elem('content') {
-                background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l));
+        @include bem.modifier('colored') {
+            @include bem.elem('content') {
                 color:            #fff;
+                background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l));
+            }
+        }
+
+        @include bem.modifier('colored-gradient') {
+            @include bem.elem('content') {
+                color:      #fff;
+                background: linear-gradient(props.get(vars.$bg-angle),
+                hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)),
+                hsl(props.get(vars.$bg-color-2--h), props.get(vars.$bg-color-2--s), props.get(vars.$bg-color-2--l)));
             }
         }
 
-        @each $size in $sizes {
-            @include iro.bem-modifier($size) {
-                font-size: fn.dim(--#{$size} --font-size);
+        @each $mod, $size, $font-size, $indicator-size in vars.$sizes {
+            @include bem.modifier($mod) {
+                font-size: props.get($font-size);
     
-                @include status(--#{$size});
+                @include status($indicator-size);
     
-                @include iro.bem-elem('content') {
-                    inline-size: fn.dim(--#{$size} --size);
-                    block-size:  fn.dim(--#{$size} --size);
-                    line-height: fn.dim(--#{$size} --size);
+                @include bem.elem('content') {
+                    inline-size: props.get($size);
+                    block-size:  props.get($size);
+                    line-height: props.get($size);
                 }
             }
         }
diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss
new file mode 100644
index 0000000..9986de5
--- /dev/null
+++ b/src/objects/_avatar.vars.scss
@@ -0,0 +1,58 @@
+@use 'iro-sass/src/props';
+@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;
+$indicator-size:    props.def(--o-avatar--indicator-size, props.get(core.$size--150)) !default;
+$indicator-spacing: props.def(--o-avatar--indicator-spacing, props.get(core.$size--40)) !default;
+$rounding:          props.def(--o-avatar--rounding, 25%) !default;
+
+$size--xxxl:           props.def(--o-avatar--xxxl--size, props.get(core.$size--1600)) !default;
+$font-size--xxxl:      props.def(--o-avatar--xxxl--font-size, props.get(core.$font-size--800)) !default;
+$indicator-size--xxxl: props.def(--o-avatar--xxxl--indicator-size, props.get(core.$size--400)) !default;
+
+$size--xxl:           props.def(--o-avatar--xxl--size, props.get(core.$size--1200)) !default;
+$font-size--xxl:      props.def(--o-avatar--xxl--font-size, props.get(core.$font-size--600)) !default;
+$indicator-size--xxl: props.def(--o-avatar--xxl--indicator-size, props.get(core.$size--300)) !default;
+
+$size--xl:           props.def(--o-avatar--xl--size, props.get(core.$size--800)) !default;
+$font-size--xl:      props.def(--o-avatar--xl--font-size, props.get(core.$font-size--300)) !default;
+$indicator-size--xl: props.def(--o-avatar--xl--indicator-size, props.get(core.$size--225)) !default;
+
+$size--lg:           props.def(--o-avatar--lg--size, props.get(core.$size--650)) !default;
+$font-size--lg:      props.def(--o-avatar--lg--font-size, props.get(core.$font-size--200)) !default;
+$indicator-size--lg: props.def(--o-avatar--lg--indicator-size, props.get(core.$size--175)) !default;
+
+$size--sm:           props.def(--o-avatar--sm--size, props.get(core.$size--375)) !default;
+$font-size--sm:      props.def(--o-avatar--sm--font-size, props.get(core.$font-size--75)) !default;
+$indicator-size--sm: props.def(--o-avatar--sm--indicator-size, props.get(core.$size--125)) !default;
+
+$size--xs:           props.def(--o-avatar--xs--size, props.get(core.$size--250)) !default;
+$font-size--xs:      props.def(--o-avatar--xs--font-size, props.get(core.$font-size--50)) !default;
+$indicator-size--xs: props.def(--o-avatar--xs--indicator-size, props.get(core.$size--100)) !default;
+
+$key-focus--border-width:  props.def(--o-avatar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
+$key-focus--border-offset: props.def(--o-avatar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
+$key-focus--outline-width: props.def(--o-avatar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+
+$bg-color--h: props.def(--o-avatar--bg-color--h, 354, 'color') !default;
+$bg-color--s: props.def(--o-avatar--bg-color--s, 44%, 'color') !default;
+$bg-color--l: props.def(--o-avatar--bg-color--l, 45%, 'color') !default;
+
+$bg-color-2--h: props.def(--o-avatar--bg-color-2--h, 354, 'color') !default;
+$bg-color-2--s: props.def(--o-avatar--bg-color-2--s, 44%, 'color') !default;
+$bg-color-2--l: props.def(--o-avatar--bg-color-2--l, 45%, 'color') !default;
+
+$bg-angle: props.def(--o-avatar--bg-angle, 180deg) !default;
+
+$key-focus--border-color:  props.def(--o-avatar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
+$key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
+
+$sizes: (
+    'xs'   $size--xs   $font-size--xs   $indicator-size--xs,
+    'sm'   $size--sm   $font-size--sm   $indicator-size--sm,
+    'lg'   $size--lg   $font-size--lg   $indicator-size--lg,
+    'xl'   $size--xl   $font-size--xl   $indicator-size--xl,
+    'xxl'  $size--xxl  $font-size--xxl  $indicator-size--xxl,
+    'xxxl' $size--xxxl $font-size--xxxl $indicator-size--xxxl,
+) !default;
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index d0eaf52..9cc9e2e 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -1,26 +1,23 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
 
-@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()) {
-        display:          flex;
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.object('backdrop') {
         position:         fixed;
-        z-index:          fn.dim(--z-index);
         inset:            0;
+        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..8bae733
--- /dev/null
+++ b/src/objects/_backdrop.vars.scss
@@ -0,0 +1,6 @@
+@use 'iro-sass/src/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), 'color') !default;
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 4e1662f..9f3e307 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -1,298 +1,142 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:meta';
 @use 'sass:string';
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+@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) {
-    background-color: fn.color(--#{$theme} --bg);
-    color:            fn.color(--#{$theme} --label);
+@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 {
-            background-color: fn.color(--#{$theme} --hover --bg);
-            color:            fn.color(--#{$theme} --hover --label);
+            color:            props.get($theme, list.join($key, --hover --label)...);
+            background-color: props.get($theme, list.join($key, --hover --bg)...);
         }
 
         &:active {
-            background-color: fn.color(--#{$theme} --active --bg);
-            color:            fn.color(--#{$theme} --active --label);
+            color:            props.get($theme, list.join($key, --active --label)...);
+            background-color: props.get($theme, list.join($key, --active --bg)...);
         }
     }
 
-    @include iro.bem-modifier('quiet') {
-        background-color: fn.color(--#{$theme}-quiet --bg);
-        color:            fn.color(--#{$theme}-quiet --label);
+    @include bem.modifier('quiet') {
+        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 {
-                background-color: fn.color(--#{$theme}-quiet --hover --bg);
-                color:            fn.color(--#{$theme}-quiet --hover --label);
+                color:            props.get($theme, list.join($key, --quiet --hover --label)...);
+                background-color: props.get($theme, list.join($key, --quiet --hover --bg)...);
             }
 
             &:active {
-                background-color: fn.color(--#{$theme}-quiet --active --bg);
-                color:            fn.color(--#{$theme}-quiet --active --label);
+                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-color: props.get($theme, list.join($key, --key-focus --border)...);
+            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 materialize-at-root(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()) {
-        display:          inline-block;
+    @include bem.object('badge') {
         position:         relative;
-        padding-block:    fn.dim(--pad-b);
-        padding-inline:   fn.dim(--pad-i);
-        border-radius:    fn.dim(--rounding);
-        background-color: fn.color(--bg);
-        background-clip:  padding-box;
-        color:            fn.color(--label);
-        font-size:        fn.dim(--font-size);
-        line-height:      fn.global-dim(--font --standard --line-height);
+        display:          inline-block;
+        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-clip:  padding-box;
+        border-radius:    props.get(vars.$rounding);
 
         &::after {
-            content:        '';
-            display:        none;
             position:       absolute;
+            inset:          calc(-1 * props.get(vars.$key-focus--border-offset));
             z-index:        1;
-            inset:          calc(-1 * fn.dim(--key-focus --border-offset));
-            border-radius:  calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
-            outline:        fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
-            box-shadow:     0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+            display:        none;
             pointer-events: none;
+            content:        '';
+            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);
+        @include bem.elem('label') {
+            margin-inline: props.get(vars.$pad-i-label);
         }
 
-        @include iro.bem-modifier('quiet') {
-            background-color: fn.color(--quiet --bg);
-            color:            fn.color(--quiet --label);
+        @include -apply-theme(vars.$default-theme, $static: true);
 
-            &:link,
-            &:visited,
-            &:enabled {
-                &:hover,
-                &:focus-visible {
-                    background-color: fn.color(--quiet --hover --bg);
-                }
-
-                &:active {
-                    background-color: fn.color(--quiet --active --bg);
-                }
-            }
-        }
-    
-        @each $theme in $themes {
-            @include iro.bem-modifier($theme) {
-                @include theme($theme);
+        @each $theme in map.keys(props.get(vars.$themes)) {
+            @include bem.modifier(string.slice($theme, 3)) {
+                @include -apply-theme(vars.$themes, $theme);
             }
         }
 
-        &:link,
-        &:visited,
-        &:enabled {
-            &:focus-visible {
-                &::after {
-                    display: block;
-                }
+        @each $theme in map.keys(props.get(vars.$static-themes)) {
+            @include bem.modifier(string.slice($theme, 3)) {
+                @include -apply-theme(vars.$static-themes, $theme, true);
             }
         }
     
-        @each $theme in $static-themes {
-            @include iro.bem-modifier(static-#{$theme}) {
-                @include theme(static-#{$theme});
-            }
-        }
-    
-        @include iro.bem-modifier('pill') {
-            padding-inline: fn.dim(--pad-i-pill);
+        @include bem.modifier('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);
 
-                @include iro.bem-elem('label') {
-                    margin-inline: fn.dim(--#{$size} --pad-i-label);
+        @each $mod, $pad-b, $pad-i, $pad-i-pill, $pad-i-label, $font-size in vars.$sizes {
+            @include bem.modifier($mod) {
+                padding-block:  props.get($pad-b);
+                padding-inline: props.get($pad-i);
+                font-size:      props.get($font-size);
+
+                @include bem.elem('label') {
+                    margin-inline: props.get($pad-i-label);
                 }
         
-                @include iro.bem-modifier('pill') {
-                    padding-inline: fn.dim(--#{$size} --pad-i-pill);
+                @include bem.modifier('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..ff07148
--- /dev/null
+++ b/src/objects/_badge.vars.scss
@@ -0,0 +1,161 @@
+@use 'sass:map';
+@use 'sass:string';
+@use 'iro-sass/src/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;
+
+$default-theme-override: () !default;
+$default-theme: props.def(--o-badge, (
+    --bg:    props.get(core.$theme, --heading),
+    --label: props.get(core.$theme, --bg-l2),
+    
+    --hover: (
+        --bg:    props.get(core.$theme, --text),
+        --label: props.get(core.$theme, --bg-l2),
+    ),
+
+    --active: (
+        --bg:    props.get(core.$theme, --text-mute),
+        --label: props.get(core.$theme, --bg-l2),
+    ),
+
+    --key-focus: (
+        --label:   props.get(core.$theme, --focus, --text),
+        --border:  props.get(core.$theme, --focus, --border),
+        --outline: props.get(core.$theme, --focus, --outline),
+    ),
+
+    --quiet: (
+        --bg:    props.get(core.$theme, --border-mute),
+        --label: props.get(core.$theme, --heading),
+
+        --hover: (
+            --bg:    props.get(core.$theme, --border),
+            --label: props.get(core.$theme, --heading),
+        ),
+
+        --active: (
+            --bg:     props.get(core.$theme, --border-strong),
+            --label: props.get(core.$theme, --heading),
+        ),
+    )
+), 'color') !default;
+$default-theme: props.merge($default-theme, $default-theme-override);
+
+$static-themes: props.def(--o-badge, (), 'color');
+
+@each $theme in map.keys(props.get(core.$transparent-colors)) {
+    $badge-theme: --static-#{string.slice($theme, 3)};
+
+    $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, (), 'color');
+
+@each $theme, $key in $themes-config {
+    $themes: props.merge($themes, (
+        --#{$theme}: (
+            --bg:    props.get(core.$theme, #{$key}-static, --900),
+            --label: props.get(core.$theme, #{$key}-static, --900-text),
+            
+            --hover: (
+                --bg:    props.get(core.$theme, #{$key}-static, --1000),
+                --label: props.get(core.$theme, #{$key}-static, --1000-text),
+            ),
+
+            --active: (
+                --bg:    props.get(core.$theme, #{$key}-static, --1100),
+                --label: props.get(core.$theme, #{$key}-static, --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/objects/_button.scss b/src/objects/_button.scss
index 3ef4813..aaf55b5 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -1,27 +1,31 @@
 @use 'sass:list';
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-$sizes:         'sm' 'lg' 'xl' !default;
-$themes:        'accent' 'negative' !default;
-$static-themes: 'black' 'white' !default;
-
-@mixin theme($theme: ()) {
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+@use '../core.vars' as core;
+
+@forward 'button.vars';
+@use 'button.vars' as vars;
+
+@mixin -apply-theme($theme, $key: ()) {
     &:link,
     &:visited,
     &:enabled {
+        color:            props.get($theme, list.join($key, --label)...);
+        background-color: props.get($theme, list.join($key, --bg)...);
         border-color:     transparent;
-        background-color: fn.color(list.join($theme, --bg));
-        color:            fn.color(list.join($theme, --label));
     }
     
-    @include iro.bem-modifier('outline') {
+    @include bem.modifier('outline') {
         &:link,
         &:visited,
         &:enabled {
-            border-color:     fn.color(list.join($theme, --outline-border));
+            color:            props.get($theme, list.join($key, --outline-label)...);
             background-color: transparent;
-            color:            fn.color(list.join($theme, --outline-label));
+            border-color:     props.get($theme, list.join($key, --outline-border)...);
         }
     }
 
@@ -30,217 +34,71 @@ $static-themes: 'black' 'white' !default;
     &:enabled {
         &:hover,
         &:focus-visible {
+            color:            props.get($theme, list.join($key, --hover --label)...);
+            background-color: props.get($theme, list.join($key, --hover --bg)...);
             border-color:     transparent;
-            background-color: fn.color(list.join($theme, --hover --bg));
-            color:            fn.color(list.join($theme, --hover --label));
         }
 
         &:active {
+            color:            props.get($theme, list.join($key, --active --label)...);
+            background-color: props.get($theme, list.join($key, --active --bg)...);
             border-color:     transparent;
-            background-color: fn.color(list.join($theme, --active --bg));
-            color:            fn.color(list.join($theme, --active --label));
         }
     }
 }
 
-@mixin static-theme($theme: ()) {
+@mixin -apply-static-theme($theme, $key: ()) {
+    color:            props.get($theme, list.join($key, --disabled --label)...);
+    background-color: props.get($theme, list.join($key, --disabled --bg)...);
     border-color:     transparent;
-    background-color: fn.color(list.join($theme, --disabled --bg));
-    color:            fn.color(list.join($theme, --disabled --label));
 
     &::after {
-        outline:    fn.color(list.join($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(list.join($theme, --key-focus --outline));
+        outline-color: props.get($theme, list.join($key, --key-focus --border)...);
+        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.bem-modifier('outline') {
-        border-color:     fn.color(list.join($theme, --disabled --outline-border));
+    @include bem.modifier('outline') {
         background-color: transparent;
+        border-color:     props.get($theme, list.join($key, --disabled --outline-border)...);
     }
 
-    @include theme($theme);
+    @include -apply-theme($theme, $key);
 
-    @include iro.bem-modifier('primary') {
-        @include theme(list.join($theme, --primary));
+    @include bem.modifier('primary') {
+        @include -apply-theme($theme, list.join($key, --primary));
     }
 }
 
-@include iro.props-namespace('button') {
-    @include iro.props-store((
-        --dims: (
-            --line-height: 1.4,
-            --pad-i:       fn.global-dim(--size --200),
-            --pad-i-label: fn.global-dim(--size --75),
-            --pad-b:       fn.global-dim(--size --65),
-            --border:      fn.global-dim(--border --medium),
-            --rounding:    10em,
-            --font-size:   fn.global-dim(--font-size --100),
-
-            --sm: (
-                --pad-i:       fn.global-dim(--size --150),
-                --pad-i-label: fn.global-dim(--size --50),
-                --pad-b:       fn.global-dim(--size --25),
-                --font-size:   fn.global-dim(--font-size --75),
-            ),
-            --lg: (
-                --pad-i:       fn.global-dim(--size --250),
-                --pad-i-label: fn.global-dim(--size --100),
-                --pad-b:       fn.global-dim(--size --100),
-                --font-size:   fn.global-dim(--font-size --150),
-            ),
-            --xl: (
-                --pad-i:       fn.global-dim(--size --300),
-                --pad-i-label: fn.global-dim(--size --150),
-                --pad-b:       fn.global-dim(--size --150),
-                --font-size:   fn.global-dim(--font-size --200),
-            ),
-            
-            --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(--border-mute),
-            --label:          fn.global-color(--text),
-            --outline-border: fn.global-color(--border),
-            --outline-label:  fn.global-color(--text),
-
-            --hover: (
-                --bg:     fn.global-color(--border),
-                --label:  fn.global-color(--heading),
-            ),
-            --active: (
-                --bg:     fn.global-color(--border-strong),
-                --label:  fn.global-color(--heading),
-            ),
-            --disabled: (
-                --bg:             fn.global-color(--border-mute),
-                --outline-border: fn.global-color(--border),
-                --label:          fn.global-color(--text-disabled),
-            ),
-            --key-focus: (
-                --label:   fn.global-color(--focus --text),
-                --border:  fn.global-color(--focus --border),
-                --outline: fn.global-color(--focus --outline),
-            ),
-            
-            --primary: (
-                --bg:             fn.global-color(--base --800),
-                --label:          fn.global-color(--base --800-text),
-                --outline-border: fn.global-color(--base --800),
-                --outline-label:  fn.global-color(--text),
-
-                --hover: (
-                    --bg:     fn.global-color(--base --900),
-                    --label:  fn.global-color(--base --900-text),
-                ),
-                --active: (
-                    --bg:     fn.global-color(--base --900),
-                    --label:  fn.global-color(--base --900-text),
-                ),
-            ),
-        ),
-    ));
-
-    @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),
-                    --outline-border: fn.global-color(--#{$theme} --900),
-                    --outline-label:  fn.global-color(--#{$theme} --1000),
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
 
-                    --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 --1100-text),
-                    ),
-                ),
-            ),
-        ));
-    }
-
-    @each $theme in $static-themes {
-        @include iro.props-store((
-            --colors: (
-                --static-#{$theme}: (
-                    --bg:             fn.global-color(--#{$theme}-transparent --200),
-                    --label:          fn.global-color(--#{$theme}-transparent --900),
-                    --outline-border: fn.global-color(--#{$theme}-transparent --300),
-                    --outline-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),
-                    ),
-                    --disabled: (
-                        --bg:             fn.global-color(--#{$theme}-transparent --200),
-                        --outline-border: fn.global-color(--#{$theme}-transparent --300),
-                        --label:          fn.global-color(--#{$theme}-transparent --500),
-                    ),
-                    --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),
-                    ),
-
-                    --primary: (
-                        --bg:             fn.global-color(--#{$theme}-transparent --800),
-                        --label:          fn.global-color(--#{$theme}-transparent --text),
-                        --outline-border: fn.global-color(--#{$theme}-transparent --800),
-                        --outline-label:  fn.global-color(--#{$theme}-transparent --900),
-    
-                        --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),
-                        ),
-                    ),
-                ),
-            ),
-        ));
-    }
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:          inline-block;
+    @include bem.object('button') {
         position:         relative;
-        padding-block:    fn.dim(--pad-b);
-        padding-inline:   fn.dim(--pad-i);
-        border:           fn.dim(--border) solid transparent;
-        border-radius:    fn.dim(--rounding);
-        border-color:     fn.color(--disabled --bg);
-        background-color: fn.color(--disabled --bg);
-        color:            fn.color(--disabled --label);
-        font-size:        fn.dim(--font-size);
+        display:          inline-block;
+        padding-block:    props.get(vars.$pad-b);
+        padding-inline:   props.get(vars.$pad-i);
+        font-size:        props.get(vars.$font-size);
         font-weight:      500;
-        line-height:      fn.dim(--line-height);
+        line-height:      props.get(vars.$line-height);
         text-align:       center;
         text-decoration:  none;
+        border:           props.get(vars.$border-width) solid transparent;
+        border-radius:    props.get(vars.$rounding);
 
         &::after {
-            content:        '';
-            display:        none;
             position:       absolute;
+            inset:          calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset));
             z-index:        1;
-            inset:          calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset));
-            border-radius:  calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
-            outline:        fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
-            box-shadow:     0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
+            display:        none;
             pointer-events: none;
+            content:        '';
+            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,
@@ -253,47 +111,46 @@ $static-themes: 'black' 'white' !default;
             }
         }
 
-        @include iro.bem-elem('label') {
-            margin-inline: fn.dim(--pad-i-label);
+        @include bem.elem('label') {
+            margin-inline: props.get(vars.$pad-i-label);
         }
     
-        @include iro.bem-modifier('block') {
+        @include bem.modifier('block') {
             display: block;
         }
     
-        @include iro.bem-modifier('outline') {
-            border-color:     fn.color(--disabled --outline-border);
+        @include bem.modifier('outline') {
             background-color: transparent;
         }
 
-        @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-i, $pad-i-label, $pad-b, $font-size in vars.$sizes {
+            @include 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);
+                @include bem.elem('label') {
+                    margin-inline: props.get($pad-i-label);
                 }
             }
         }
 
-        @include static-theme;
-    
-        @each $theme in $themes {
-            @include iro.bem-modifier($theme) {
-                @include theme(--#{$theme});
+        @include -apply-static-theme(vars.$default-theme);
+
+        @each $theme in map.keys(props.get(vars.$themes)) {
+            @include bem.modifier(string.slice($theme, 3)) {
+                @include -apply-theme(vars.$themes, $theme);
             }
         }
-    
-        @each $theme in $static-themes {
-            @include iro.bem-modifier(static-#{$theme}) {
-                @include static-theme(--static-#{$theme});
+
+        @each $theme in map.keys(props.get(vars.$static-themes)) {
+            @include bem.modifier(string.slice($theme, 3)) {
+                @include -apply-static-theme(vars.$static-themes, $theme);
             }
         }
     
-        @include iro.bem-modifier('round') {
-            inline-size:    calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b));
+        @include bem.modifier('round') {
+            inline-size:    calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
             padding-inline: 0;
             border-radius:  100em;
         }
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
new file mode 100644
index 0000000..4f7b552
--- /dev/null
+++ b/src/objects/_button.vars.scss
@@ -0,0 +1,168 @@
+@use 'sass:map';
+@use 'sass:string';
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$line-height:  props.def(--o-button--line-height, 1.4) !default;
+$pad-i:        props.def(--o-button--pad-i, props.get(core.$size--200)) !default;
+$pad-i-label:  props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default;
+$pad-b:        props.def(--o-button--pad-b, props.get(core.$size--65)) !default;
+$border-width: props.def(--o-button--border-width, props.get(core.$border-width--medium)) !default;
+$rounding:     props.def(--o-button--rounding, 10em) !default;
+$font-size:    props.def(--o-button--font-size, props.get(core.$font-size--100)) !default;
+
+$pad-i--sm:       props.def(--o-button--sm--pad-i, props.get(core.$size--150)) !default;
+$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default;
+$pad-b--sm:       props.def(--o-button--sm--pad-b, props.get(core.$size--25)) !default;
+$font-size--sm:   props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default;
+
+$pad-i--lg:       props.def(--o-button--lg--pad-i, props.get(core.$size--250)) !default;
+$pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--100)) !default;
+$pad-b--lg:       props.def(--o-button--lg--pad-b, props.get(core.$size--100)) !default;
+$font-size--lg:   props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default;
+
+$pad-i--xl:       props.def(--o-button--xl--pad-i, props.get(core.$size--300)) !default;
+$pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--150)) !default;
+$pad-b--xl:       props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default;
+$font-size--xl:   props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default;
+
+$key-focus--border-width:  props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
+$key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
+$key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+
+$sizes: (
+    'sm' $pad-i--sm $pad-i-label--sm $pad-b--sm $font-size--sm,
+    'lg' $pad-i--lg $pad-i-label--lg $pad-b--lg $font-size--lg,
+    'xl' $pad-i--xl $pad-i-label--xl $pad-b--xl $font-size--xl,
+) !default;
+
+$default-theme-override: () !default;
+$default-theme: props.def(--o-button, (
+    --bg:             props.get(core.$theme, --border-mute),
+    --label:          props.get(core.$theme, --text),
+    --outline-border: props.get(core.$theme, --border),
+    --outline-label:  props.get(core.$theme, --text),
+
+    --hover: (
+        --bg:     props.get(core.$theme, --border),
+        --label:  props.get(core.$theme, --heading),
+    ),
+
+    --active: (
+        --bg:     props.get(core.$theme, --border-strong),
+        --label:  props.get(core.$theme, --heading),
+    ),
+
+    --disabled: (
+        --bg:             props.get(core.$theme, --border-mute),
+        --outline-border: props.get(core.$theme, --border),
+        --label:          props.get(core.$theme, --text-disabled),
+    ),
+
+    --key-focus: (
+        --label:   props.get(core.$theme, --focus, --text),
+        --border:  props.get(core.$theme, --focus, --border),
+        --outline: props.get(core.$theme, --focus, --outline),
+    ),
+
+    --primary: (
+        --bg:             props.get(core.$theme, --base, --900),
+        --label:          props.get(core.$theme, --base, --900-text),
+        --outline-border: props.get(core.$theme, --base, --900),
+        --outline-label:  props.get(core.$theme, --text),
+
+        --hover: (
+            --bg:     props.get(core.$theme, --base, --800),
+            --label:  props.get(core.$theme, --base, --800-text),
+        ),
+
+        --active: (
+            --bg:     props.get(core.$theme, --base, --700),
+            --label:  props.get(core.$theme, --base, --700-text),
+        ),
+    ),
+), 'color') !default;
+$default-theme: props.merge($default-theme, $default-theme-override);
+
+$static-themes: props.def(--o-button, (), 'color');
+
+@each $theme in map.keys(props.get(core.$transparent-colors)) {
+    $button-theme: --static-#{string.slice($theme, 3)};
+
+    $static-themes: props.merge($static-themes, (
+        $button-theme: (
+            --bg:             props.get(core.$transparent-colors, $theme, --200),
+            --label:          props.get(core.$transparent-colors, $theme, --900),
+            --outline-border: props.get(core.$transparent-colors, $theme, --300),
+            --outline-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),
+            ),
+
+            --disabled: (
+                --bg:             props.get(core.$transparent-colors, $theme, --200),
+                --outline-border: props.get(core.$transparent-colors, $theme, --300),
+                --label:          props.get(core.$transparent-colors, $theme, --500),
+            ),
+
+            --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),
+            ),
+
+            --primary: (
+                --bg:             props.get(core.$transparent-colors, $theme, --800),
+                --label:          props.get(core.$transparent-colors, $theme, --text),
+                --outline-border: props.get(core.$transparent-colors, $theme, --800),
+                --outline-label:  props.get(core.$transparent-colors, $theme, --900),
+    
+                --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),
+                ),
+            )
+        )
+    ));
+}
+
+$themes-config: (
+    accent:   --accent,
+    negative: --negative,
+) !default;
+
+$themes: props.def(--o-button, (), 'color');
+
+@each $theme, $key in $themes-config {
+    $themes: props.merge($themes, (
+        --#{$theme}: (
+            --bg:             props.get(core.$theme, #{$key}-static, --900),
+            --label:          props.get(core.$theme, #{$key}-static, --900-text),
+            --outline-border: props.get(core.$theme, $key, --900),
+            --outline-label:  props.get(core.$theme, $key, --1000),
+
+            --hover: (
+                --bg:     props.get(core.$theme, #{$key}-static, --1000),
+                --label:  props.get(core.$theme, #{$key}-static, --1000-text),
+            ),
+
+            --active: (
+                --bg:     props.get(core.$theme, #{$key}-static, --1100),
+                --label:  props.get(core.$theme, #{$key}-static, --1100-text),
+            ),
+        )
+    ));
+}
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index f56a96c..c87e676 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -1,132 +1,170 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('card') {
-    @include iro.props-store((
-        --dims: (
-            --border:   fn.global-dim(--border --thin),
-            --divider:  fn.global-dim(--border --thin),
-            --pad-i:    fn.global-dim(--size --300),
-            --pad-b:    fn.global-dim(--size --250),
-            --spacing:  fn.global-dim(--size --200),
-            --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: (
-            --bg:       fn.global-color(--bg-l2),
-            --border:   fn.global-color(--border-mute),
-            --divider:  fn.global-color(--border-mute),
-
-            --hover: (
-                --border: fn.global-color(--border),
-            ),
-
-            --key-focus: (
-                --label:   fn.global-color(--focus --text),
-                --border:  fn.global-color(--focus --border),
-                --outline: fn.global-color(--focus --outline),
-            ),
-
-            --quiet: (
-                --image: fn.global-color(--bg-base),
-
-                --hover: (
-                    --image: fn.global-color(--border),
-                ),
-            )
-        ),
-    ));
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:          block;
-        border:           fn.dim(--border) solid fn.color(--border);
-        border-radius:    fn.dim(--rounding);
-        background-color: fn.color(--bg);
-
-        @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+@use 'avatar.vars' as avatar;
+
+@forward 'card.vars';
+@use 'card.vars' as vars;
+
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.object('card') {
+        position:         relative;
+        display:          flex;
+        flex-direction:   column;
+        margin:           calc(-1 * props.get(vars.$key-focus--border-width));
+        background-color: props.get(vars.$bg-color);
+        background-clip:  content-box;
+        border:           props.get(vars.$key-focus--border-offset) solid transparent;
+        border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+        transition:       transform .2s;
+
+        @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
             &:hover,
-            &:focus-visible,
-            &:active {
-                border-color: fn.color(--hover --border);
+            &:active,
+            &:focus-visible {
+                transform: translateY(props.get(vars.$hover--offset-b));
+
+                @include bem.elem('body') {
+                    @include bem.modifier('hidden') {
+                        visibility: visible;
+                        opacity:    1;
+                        transition:
+                            opacity .2s ease,
+                            visibility .2s linear;
+                    }
+                }
             }
 
             &:focus-visible {
-                border-color: fn.color(--key-focus --border);
-                outline:      fn.color(--key-focus --border) solid calc(fn.dim(--key-focus --border) - fn.dim(--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);
             }
         }
 
-        @include iro.bem-elem('avatar') {
-            margin-block-start:  fn.dim(--pad-b);
-            margin-inline-start: fn.dim(--pad-i);
+        @include bem.elem('avatar') {
+            margin-block-start:  props.get(vars.$pad-b);
+            margin-inline-start: props.get(vars.$pad-i);
         }
 
-        @include iro.bem-elem('image') {
-            display:          block;
-            inline-size:      100%;
-            object-fit:       cover;
+        @include bem.elem('image') {
+            position:    relative;
+            display:     block;
+            flex:        0 0 auto;
+            inline-size: 100%;
+            overflow:    hidden;
+            object-fit:  cover;
+            transition:  background-color .2s, transform .2s, opacity .2s;
 
             &:first-child {
-                border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border));
-                border-start-end-radius:   calc(fn.dim(--rounding) - fn.dim(--border));
+                border-start-start-radius: props.get(vars.$rounding);
+                border-start-end-radius:   props.get(vars.$rounding);
             }
 
             &:last-child {
-                border-end-start-radius: calc(fn.dim(--rounding) - fn.dim(--border));
-                border-end-end-radius:   calc(fn.dim(--rounding) - fn.dim(--border));
+                border-end-start-radius: props.get(vars.$rounding);
+                border-end-end-radius:   props.get(vars.$rounding);
             }
 
-            @include iro.bem-next-elem('avatar') {
-                margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size));
+            @include bem.next-elem('avatar') {
+                margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
             }
         }
 
-        @include iro.bem-elem('body') {
-            padding-block:  fn.dim(--pad-b);
-            padding-inline: fn.dim(--pad-i);
+        @include bem.elem('image-img') {
+            display:     block;
+            inline-size: 100%;
+            object-fit:  cover;
+        }
+
+        @include bem.elem('image-overlay') {
+            position:        absolute;
+            inset-block-end: 0;
+            inset-inline:    0;
+            z-index:         5;
+            padding-block:   props.get(vars.$image-overlay--pad-b);
+            padding-inline:  props.get(vars.$image-overlay--pad-i);
+        }
+
+        @include bem.elem('body') {
+            flex:            1 0 auto;
+            padding-block:   props.get(vars.$pad-b);
+            padding-inline:  props.get(vars.$pad-i);
 
             &::before {
-                content:       '';
                 display:       block;
                 margin-block:  -100em 100em;
+                content:       '';
+            }
+
+            @include bem.modifier('hidden') {
+                position:                absolute;
+                inset-block-end:         0;
+                inset-inline:            0;
+                z-index:                 10;
+                visibility:              hidden;
+                background-color:        props.get(vars.$bg-color);
+                //border-end-start-radius: props.get(vars.$rounding);
+                //border-end-end-radius:   props.get(vars.$rounding);
+                opacity:                 0;
+                transition:
+                    opacity .2s ease,
+                    visibility 0s .2s linear;
+
+                @include bem.next-elem('image') {
+                    border-start-start-radius: props.get(vars.$rounding);
+                    border-start-end-radius:   props.get(vars.$rounding);
+                }
             }
         }
 
-        @include iro.bem-elem('content') {
-            margin-block-start: fn.dim(--spacing);
+        @include bem.elem('content') {
+            margin-block-start: props.get(vars.$spacing);
         }
 
-        @include iro.bem-elem('footer') {
-            padding-block:      0 fn.dim(--pad-b);
-            padding-inline:     fn.dim(--pad-i);
-            margin-block-start: calc(-1 * fn.dim(--pad-b));
+        @include bem.elem('footer') {
+            flex:               0 0 auto;
+            padding-block:      0 props.get(vars.$pad-b);
+            padding-inline:     props.get(vars.$pad-i);
+            margin-block-start: calc(-1 * props.get(vars.$pad-b));
 
             &::before {
-                content:          '';
                 display:          block;
-                block-size:       fn.dim(--divider);
-                margin-block:     fn.dim(--spacing);
-                background-color: fn.color(--divider);
+                block-size:       props.get(vars.$divider-width);
+                margin-block:     props.get(vars.$spacing);
+                content:          '';
+                background-color: props.get(vars.$divider-width);
             }
         }
 
-        @include iro.bem-modifier('quiet') {
-            position:         relative;
-            border:           0;
+        @include bem.modifier('quiet') {
+            margin-inline:    0;
             background-color: transparent;
+            border:           0;
 
-            @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+            @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
                 &:hover,
-                &:active {
-                    @include iro.bem-elem('image') {
+                &:active,
+                &:focus-visible {
+                    transform: none;
+
+                    @include bem.elem('image') {
+                        background-color: props.get(vars.$quiet--hover--image-color);
                         opacity:          .75;
-                        background-color: fn.color(--quiet --hover --image);
+                        transform:        translateY(props.get(vars.$hover--offset-b));
+                    }
+
+                    @include bem.elem('body') {
+                        @include bem.modifier('hidden') {
+                            transform: translateY(props.get(vars.$hover--offset-b));
+                        }
                     }
                 }
 
@@ -134,32 +172,72 @@
                     outline:    none;
                     box-shadow: none;
 
-                    @include iro.bem-elem('image') {
-                        outline:          fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
+                    @include bem.elem('image') {
+                        background-color: props.get(vars.$quiet--hover--image-color);
+                        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);
                         opacity:          1;
-                        background-color: fn.color(--quiet --hover --image);
-                        box-shadow:       0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
                     }
                 }
             }
 
-            @include iro.bem-elem('image') {
+            @include bem.elem('image') {
                 position:         relative;
-                margin:           calc(-1 * fn.dim(--key-focus --border));
-                border:           fn.dim(--key-focus --border-offset) solid transparent;
-                border-radius:    calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
-                background-color: fn.color(--quiet --image);
+                margin:           calc(-1 * props.get(vars.$key-focus--border-width));
+                background-color: props.get(vars.$quiet--image-color);
                 background-clip:  padding-box;
+                border:           props.get(vars.$key-focus--border-offset) solid transparent;
+                border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
             }
 
-            @include iro.bem-elem('body') {
+            @include bem.elem('body') {
                 padding:             0;
-                padding-block-start: fn.dim(--spacing);
+                padding-block-start: props.get(vars.$spacing);
+
+                @include bem.modifier('hidden') {
+                    padding-block:  props.get(vars.$pad-b);
+                    padding-inline: props.get(vars.$pad-i);
+                }
             }
 
-            @include iro.bem-elem('footer') {
+            @include bem.elem('footer') {
                 padding-inline: 0;
             }
         }
+
+        @include bem.modifier('horizontal') {
+            flex-direction: row;
+            align-items:    center;
+
+            @include bem.elem('image') {
+                align-self:  stretch;
+                inline-size: auto;
+
+                &:first-child {
+                    border-start-end-radius:   0;
+                    border-end-start-radius:   props.get(vars.$rounding);
+                }
+    
+                &:last-child {
+                    border-start-end-radius: props.get(vars.$rounding);
+                    border-end-start-radius: 0;
+                }
+            }
+
+            @include bem.elem('body') {
+                flex: 0 0 auto;
+
+                @include bem.modifier('main') {
+                    flex-shrink:     1;
+                    inline-size:     100%;
+                    min-inline-size: 0;
+                }
+            }
+        }
     }
 }
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
new file mode 100644
index 0000000..8adbcde
--- /dev/null
+++ b/src/objects/_card.vars.scss
@@ -0,0 +1,27 @@
+@use 'sass:map';
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$divider-width:        props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default;
+$pad-i:                props.def(--o-card--pad-i, props.get(core.$size--300)) !default;
+$pad-b:                props.def(--o-card--pad-b, props.get(core.$size--250)) !default;
+$spacing:              props.def(--o-card--spacing, props.get(core.$size--200)) !default;
+$rounding:             props.def(--o-card--rounding, props.get(core.$rounding)) !default;
+$image-overlay--pad-i: props.def(--o-card--image-overlay--pad-i, props.get($pad-i)) !default;
+$image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, props.get($pad-b)) !default;
+
+$hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !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;
+
+$bg-color:      props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
+$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default;
+
+$key-focus--label-color:   props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
+$key-focus--border-color:  props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
+$key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
+
+$quiet--image-color:        props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base), 'color') !default;
+$quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border), 'color') !default;
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 8527948..82dd596 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -1,165 +1,130 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/functions' as fn;
+@use 'iro-sass/src/props';
+@use '../props' as *;
+@use '../core.vars' as core;
 
-@include iro.props-namespace('checkbox') {
-    @include iro.props-store((
-        --dims: (
-            --size:            fn.global-dim(--size --175),
-            --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 'checkbox.vars';
+@use 'checkbox.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: (
-            --box-border: fn.global-color(--text-mute-more),
-            --box-bg:     fn.global-color(--base --75),
-    
-            --hover: (
-                --label:      fn.global-color(--heading),
-                --box-border: fn.global-color(--text-mute),
-            ),
-            --accent: (
-                --box-border: fn.global-color(--accent --900),
-    
-                --hover: (
-                    --box-border: fn.global-color(--accent --1000),
-                ),
-            ),
-            --disabled: (
-                --label:      fn.global-color(--text-disabled),
-                --box-border: fn.global-color(--border-strong),
-                --box-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 materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object(iro.props-namespace()) {
-        display:        inline-block;
+    @include bem.object('checkbox') {
         position:       relative;
+        display:        inline-block;
+        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-b) - fn.dim(--key-focus --border-offset));
-        padding-block:  fn.dim(--pad-b);
-        padding-inline: fn.dim(--pad-i);
+            calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
+            calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset));
 
-        @include iro.bem-elem('box') {
-            display:            inline-block;
+        @include bem.elem('box') {
             position:           relative;
+            display:            inline-block;
             flex:               0 0 auto;
-            inline-size:        fn.dim(--size);
-            block-size:         fn.dim(--size);
-            margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--size) - fn.dim(--key-focus --border-offset));
-            border:             fn.dim(--key-focus --border-offset) solid transparent;
-            border-radius:      calc(fn.dim(--border) + fn.dim(--key-focus --border-offset));
-            background-color:   fn.color(--box-border);
-            background-clip:    padding-box;
+            inline-size:        props.get(vars.$size);
+            block-size:         props.get(vars.$size);
+            margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset));
             vertical-align:     top;
+            background-color:   props.get(vars.$box-border-color);
+            background-clip:    padding-box;
+            border:             props.get(vars.$key-focus--border-offset) solid transparent;
+            border-radius:      calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset));
     
             &::before,
             &::after {
-                content:  '';
-                display:  block;
                 position: absolute;
+                display:  block;
+                content:  '';
             }
     
             &::before {
+                inset-block-start:  props.get(vars.$border-width);
+                inset-inline-start: props.get(vars.$border-width);
                 z-index:            2;
-                inset-block-start:  fn.dim(--border);
-                inset-inline-start: fn.dim(--border);
-                inline-size:        calc(fn.dim(--size) - 2 * fn.dim(--border));
-                block-size:         calc(fn.dim(--size) - 2 * fn.dim(--border));
+                inline-size:        calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
+                block-size:         calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
+                background-color:   props.get(vars.$box-bg-color);
                 transition:         transform .2s ease;
-                background-color:   fn.color(--box-bg);
             }
     
             &::after {
+                inset-block-start:   calc(.5 * props.get(vars.$size) - 1px);
+                inset-inline-start:  calc(1.5 * props.get(vars.$border-width));
                 z-index:             3;
-                inset-block-start:   calc(.5 * fn.dim(--size) - 1px);
-                inset-inline-start:  calc(1.5 * fn.dim(--border));
                 box-sizing:          border-box;
-                inline-size:         calc(fn.dim(--size) - 3 * fn.dim(--border));
+                inline-size:         calc(props.get(vars.$size) - 3 * props.get(vars.$border-width));
                 block-size:          0;
-                transform:           scale(0);
+                border-color:        props.get(vars.$box-bg-color);
+                border-style:        solid;
+                border-radius:       2px;
                 transition:          transform .2s ease;
+                transform:           scale(0);
                 border-block-width:  0 2px;
                 border-inline-width: 0 2px;
-                border-style:        solid;
-                border-radius:       2px;
-                border-color:        fn.color(--box-bg);
             }
         }
     
-        @include iro.bem-elem('check-icon') {
-            display:            block;
+        @include bem.elem('check-icon') {
             position:           absolute;
+            inset-block-start:  calc(1 * props.get(vars.$border-width));
+            inset-inline-start: calc(1 * props.get(vars.$border-width));
             z-index:            2;
-            inset-block-start:  calc(1 * fn.dim(--border));
-            inset-inline-start: calc(1 * fn.dim(--border));
-            inline-size:        calc(100% - 2 * fn.dim(--border));
-            block-size:         calc(100% - 2 * fn.dim(--border));
+            display:            block;
+            inline-size:        calc(100% - 2 * props.get(vars.$border-width));
+            block-size:         calc(100% - 2 * props.get(vars.$border-width));
             margin:             0;
+            color:              props.get(vars.$box-bg-color);
+            stroke-width:       fn.px-to-rem(3px);
+            transition:         transform .2s ease;
             transform:          scale(0);
             transform-origin:   40% 90%;
-            transition:         transform .2s ease;
-            stroke-width:       iro.fn-px-to-rem(3px);
-            color:              fn.color(--box-bg);
         }
     
-        @include iro.bem-elem('label') {
-            margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset));
+        @include bem.elem('label') {
+            margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
         }
     
-        @include iro.bem-elem('native') {
-            appearance:         none;
+        @include bem.elem('native') {
             position:           absolute;
-            z-index:            -1;
             inset-block-start:  0;
             inset-inline-start: 0;
+            z-index:            -1;
             inline-size:        100%;
             block-size:         100%;
-            margin:             0;
             padding:            0;
+            margin:             0;
             overflow:           hidden;
-            border-radius:      fn.dim(--rounding);
+            appearance:         none;
+            border-radius:      props.get(vars.$rounding);
     
             &:hover,
             &:focus-visible {
-                @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--hover --label);
+                @include bem.sibling-elem('label') {
+                    color: props.get(vars.$hover--label-color);
                 }
     
-                @include iro.bem-sibling-elem('box') {
-                    background-color: fn.color(--hover --box-border);
+                @include bem.sibling-elem('box') {
+                    background-color: props.get(vars.$hover--box-border-color);
                 }
             }
     
             &:checked {
-                @include iro.bem-sibling-elem('box') {
+                @include bem.sibling-elem('box') {
                     &::before {
                         transform: scale(0);
                     }
     
-                    @include iro.bem-elem('check-icon') {
+                    @include bem.elem('check-icon') {
                         transform: scale(1);
                     }
                 }
             }
     
             &:indeterminate {
-                @include iro.bem-sibling-elem('box') {
+                @include bem.sibling-elem('box') {
                     &::before {
                         transform: scale(0);
                     }
@@ -168,90 +133,95 @@
                         transform: scale(1);
                     }
     
-                    @include iro.bem-elem('check-icon') {
+                    @include bem.elem('check-icon') {
                         transform: scale(0);
                     }
                 }
             }
     
             &:disabled {
-                @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--disabled --label);
+                @include bem.sibling-elem('label') {
+                    color: props.get(vars.$disabled--label-color);
                 }
     
-                @include iro.bem-sibling-elem('box') {
-                    background-color: fn.color(--disabled --box-border);
+                @include bem.sibling-elem('box') {
+                    background-color: props.get(vars.$disabled--box-border-color);
     
                     &::before {
-                        background-color: fn.color(--disabled --box-bg);
+                        background-color: props.get(vars.$disabled--box-bg-color);
                     }
                 }
             }
     
             &:focus-visible {
-                @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--key-focus --label);
+                @include bem.sibling-elem('label') {
+                    color: props.get(vars.$key-focus--label-color);
                 }
 
-                @include iro.bem-sibling-elem('box') {
-                    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);
+                @include bem.sibling-elem('box') {
+                    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);
                 }
             }
         }
     
-        @include iro.bem-modifier('standalone') {
-            @include iro.bem-elem('box') {
+        @include bem.modifier('standalone') {
+            @include bem.elem('box') {
                 margin-block-start: 0;
             }
         }
     
-        @include iro.bem-modifier('accent') {
-            @include iro.bem-elem('native') {
+        @include bem.modifier('accent') {
+            @include bem.elem('native') {
                 &:checked {
-                    @include iro.bem-sibling-elem('box') {
-                        background-color: fn.color(--accent --box-border);
+                    @include bem.sibling-elem('box') {
+                        background-color: props.get(vars.$accent--box-border-color);
                     }
         
                     &:hover,
                     &:focus-visible {
-                        @include iro.bem-sibling-elem('box') {
-                            background-color: fn.color(--accent --hover --box-border);
+                        @include bem.sibling-elem('box') {
+                            background-color: props.get(vars.$accent--hover--box-border-color);
                         }
                     }
                 }
     
                 &:indeterminate {
-                    @include iro.bem-sibling-elem('box') {
-                        background-color: fn.color(--accent --box-border);
+                    @include bem.sibling-elem('box') {
+                        background-color: props.get(vars.$accent--box-border-color);
                     }
         
                     &:hover,
                     &:focus-visible {
-                        @include iro.bem-sibling-elem('box') {
-                            background-color: fn.color(--accent --hover --box-border);
+                        @include bem.sibling-elem('box') {
+                            background-color: props.get(vars.$accent--hover--box-border-color);
                         }
                     }
                 }
     
                 &:disabled {
-                    @include iro.bem-sibling-elem('box') {
-                        background-color: fn.color(--disabled --box-border);
+                    @include bem.sibling-elem('box') {
+                        background-color: props.get(vars.$disabled--box-border-color);
         
                         &::before {
-                            background-color: fn.color(--disabled --box-bg);
+                            background-color: props.get(vars.$disabled--box-bg-color);
                         }
                     }
 
                     &:checked {
-                        @include iro.bem-sibling-elem('box') {
-                            background-color: fn.color(--disabled --box-border);
+                        @include bem.sibling-elem('box') {
+                            background-color: props.get(vars.$disabled--box-border-color);
                         }
                     }
         
                     &:indeterminate {
-                        @include iro.bem-sibling-elem('box') {
-                            background-color: fn.color(--disabled --box-border);
+                        @include bem.sibling-elem('box') {
+                            background-color: props.get(vars.$disabled--box-border-color);
                         }
                     }
                 }
diff --git a/src/objects/_checkbox.vars.scss b/src/objects/_checkbox.vars.scss
new file mode 100644
index 0000000..aee26e6
--- /dev/null
+++ b/src/objects/_checkbox.vars.scss
@@ -0,0 +1,32 @@
+@use 'sass:map';
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$size:            props.def(--o-checkbox--size, props.get(core.$size--175)) !default;
+$label-gap:       props.def(--o-checkbox--label-gap, props.get(core.$size--125)) !default;
+$border-width:    props.def(--o-checkbox--border-width, props.get(core.$border-width--medium)) !default;
+$pad-i:           props.def(--o-checkbox--pad-i, props.get(core.$size--65)) !default;
+$pad-b:           props.def(--o-checkbox--pad-b, props.get(core.$size--65)) !default;
+$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-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), 'color') !default;
+$box-bg-color:     props.def(--o-checkbox--box-bg-color, props.get(core.$theme, --base, --75), 'color') !default;
+
+$hover--label-color:      props.def(--o-checkbox--hover--label-color, props.get(core.$theme, --heading), 'color') !default;
+$hover--box-border-color: props.def(--o-checkbox--hover--box-border-color, props.get(core.$theme, --text-mute), 'color') !default;
+
+$accent--box-border-color:        props.def(--o-checkbox--accent--box-border-color, props.get(core.$theme, --accent, --900), 'color') !default;
+$accent--hover--box-border-color: props.def(--o-checkbox--accent--hover--box-border-color, props.get(core.$theme, --accent, --1000), 'color') !default;
+
+$disabled--label-color:      props.def(--o-checkbox--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
+$disabled--box-border-color: props.def(--o-checkbox--disabled--box-border-color, props.get(core.$theme, --border-strong), 'color') !default;
+$disabled--box-bg-color:     props.def(--o-checkbox--disabled--box-bg-color, props.get(core.$theme, --base, --75), 'color') !default;
+
+$key-focus--label-color:   props.def(--o-checkbox--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
+$key-focus--border-color:  props.def(--o-checkbox--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
+$key-focus--outline-color: props.def(--o-checkbox--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index d1e2897..4ed8092 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -1,115 +1,69 @@
 @use 'sass:map';
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-@use '../config';
-
-$static-themes: 'black' 'white' !default;
-
-@include iro.props-namespace('divider') {
-    @include iro.props-store((
-        --dims: (
-            --margin-b: fn.global-dim(--size --85),
-    
-            --strong: (
-                --border:          fn.global-dim(--border --thick),
-                --label-font-size: fn.global-dim(--font-size --100),
-            ),
-            --medium: (
-                --border:          fn.global-dim(--border --medium),
-                --label-font-size: fn.global-dim(--font-size --75),
-            ),
-            --faint: (
-                --border:          fn.global-dim(--border --thin),
-                --label-font-size: fn.global-dim(--font-size --50),
-            ),
-        ),
-        --colors: (
-            --strong: (
-                --bg:    fn.global-color(--text),
-                --label: fn.global-color(--text),
-            ),
-            --medium: (
-                --bg:    fn.global-color(--border),
-                --label: fn.global-color(--text-mute),
-            ),
-            --faint: (
-                --bg:    fn.global-color(--border),
-                --label: fn.global-color(--text-mute-more),
-            ),
-        ),
-    ));
-
-    @each $color in map.keys(map.get(config.$themes, config.$theme-default, --palettes)) {
-        @if $color != '--base' {
-            @include iro.props-store((
-                --colors: (
-                    $color: (
-                        --bg:    fn.global-color($color --800),
-                        --label: fn.global-color($color --1000),
-                    )
-                ),
-            ));
-        }
-    }
-
-    @each $theme in $static-themes {
-        @include iro.props-store((
-            --colors: (
-                --static-#{$theme}: (
-                    --strong: (
-                        --bg:    fn.global-color(--#{$theme}-transparent --800),
-                        --label: fn.global-color(--#{$theme}-transparent --900),
-                    ),
-                    --medium: (
-                        --bg:    fn.global-color(--#{$theme}-transparent --300),
-                        --label: fn.global-color(--#{$theme}-transparent --500),
-                    ),
-                    --faint: (
-                        --bg:    fn.global-color(--#{$theme}-transparent --300),
-                        --label: fn.global-color(--#{$theme}-transparent --500),
-                    ),
-                )
-            ),
-        ));
-    }
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:        flex;
-        flex:           0 0 auto;
-        flex-direction: row;
-        align-items:    center;
-        block-size:     1em;
-        margin-block:   fn.dim(--margin-b);
-        color:          fn.color(--strong --label);
-        font-size:      fn.dim(--strong --label-font-size);
-        font-weight:    700;
-        letter-spacing: .5px;
-        line-height:    1;
-        text-transform: uppercase;
+@use 'sass:meta';
+@use 'sass:string';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+@use '../core.vars' as core;
+
+@forward 'divider.vars';
+@use 'divider.vars' as vars;
+
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.object('divider') {
+        display:          flex;
+        flex:             0 0 auto;
+        flex-direction:   row;
+        align-items:      center;
+        block-size:       1em;
+        margin-block:     props.get(vars.$margin-b);
+        font-size:        props.get(vars.$strong--label-font-size);
+        font-weight:      700;
+        line-height:      1;
+        color:            props.get(vars.$strong--label-color);
+        text-transform:   uppercase;
+        letter-spacing:   .5px;
+        background-color: transparent;
 
         &::before,
         &::after {
-            content:          '';
             flex:             1 1 auto;
             inline-size:      100%;
-            block-size:       fn.dim(--strong --border);
-            background-color: fn.color(--strong --bg);
+            block-size:       props.get(vars.$strong--border-width);
+            content:          '';
+            background-color: props.get(vars.$strong--bg-color);
         }
 
         &::before {
             display: block;
         }
 
-        @include iro.bem-elem('label') {
+        @include bem.elem('label') {
             flex: 0 0 auto;
         }
 
-        @include iro.bem-modifier('vertical') {
+        @include bem.modifier('vertical') {
             align-self:       stretch;
-            inline-size:      1px;
+            inline-size:      props.get(vars.$vertical--border-width);
             block-size:       auto;
             margin-block:     0;
-            background-color: fn.color(--faint --bg);
+            background-color: props.get(vars.$strong--bg-color);
+
+            &::before,
+            &::after {
+                display: none;
+            }
+        }
+
+        @include bem.modifier('dot') {
+            align-self:       center;
+            inline-size:      props.get(vars.$dot--size);
+            block-size:       props.get(vars.$dot--size);
+            margin-block:     0;
+            background-color: props.get(vars.$strong--bg-color);
+            border-radius:    props.get(vars.$dot--size);
 
             &::before,
             &::after {
@@ -117,31 +71,47 @@ $static-themes: 'black' 'white' !default;
             }
         }
 
-        @include iro.bem-modifier('medium') {
-            color:       fn.color(--medium --label);
-            font-size:   fn.dim(--medium --label-font-size);
+        @include bem.modifier('medium') {
+            font-size:   props.get(vars.$medium--label-font-size);
             font-weight: 500;
+            color:       props.get(vars.$medium--label-color);
 
             &::before,
             &::after {
-                block-size:       fn.dim(--medium --border);
-                background-color: fn.color(--medium --bg);
+                block-size:       props.get(vars.$medium--border-width);
+                background-color: props.get(vars.$medium--bg-color);
+            }
+
+            @include bem.modifier('vertical') {
+                background-color: props.get(vars.$medium--bg-color);
+            }
+
+            @include bem.modifier('dot') {
+                background-color: props.get(vars.$medium--bg-color);
             }
         }
 
-        @include iro.bem-modifier('faint') {
-            color:       fn.color(--faint --label);
-            font-size:   fn.dim(--faint --label-font-size);
+        @include bem.modifier('faint') {
+            font-size:   props.get(vars.$faint--label-font-size);
             font-weight: 500;
+            color:       props.get(vars.$faint--label-color);
 
             &::before,
             &::after {
-                block-size:       fn.dim(--faint --border);
-                background-color: fn.color(--faint --bg);
+                block-size:       props.get(vars.$faint--border-width);
+                background-color: props.get(vars.$faint--bg-color);
+            }
+
+            @include bem.modifier('vertical') {
+                background-color: props.get(vars.$vertical--faint--bg-color);
+            }
+
+            @include bem.modifier('dot') {
+                background-color: props.get(vars.$dot--faint--bg-color);
             }
         }
 
-        @include iro.bem-modifier('labelled') {
+        @include bem.modifier('labelled') {
             &::before {
                 margin-inline-end: 1em;
             }
@@ -152,49 +122,49 @@ $static-themes: 'black' 'white' !default;
             }
         }
 
-        @each $color in 'blue' 'purple' 'red' 'green' 'yellow' {
-            @include iro.bem-modifier($color) {
+        @each $theme in map.keys(props.get(vars.$themes)) {
+            @include bem.modifier(string.slice($theme, 3)) {
                 &::before,
                 &::after {
-                    background-color: fn.color(--#{$color} --bg);
+                    background-color: props.get(vars.$themes, $theme, --bg);
                 }
 
-                @include iro.bem-elem('label') {
-                    color: fn.color(--#{$color} --label);
+                @include bem.elem('label') {
+                    color: props.get(vars.$themes, $theme, --label);
                 }
             }
         }
 
-        @each $theme in $static-themes {
-            @include iro.bem-modifier(static-#{$theme}) {
+        @each $theme in map.keys(props.get(vars.$static-themes)) {
+            @include bem.modifier(string.slice($theme, 3)) {
                 &::before,
                 &::after {
-                    background-color: fn.color(--static-#{$theme} --strong --bg);
+                    background-color: props.get(vars.$static-themes, $theme, --strong, --bg);
                 }
 
-                @include iro.bem-elem('label') {
-                    color: fn.color(--static-#{$theme} --strong --label);
+                @include bem.elem('label') {
+                    color: props.get(vars.$static-themes, $theme, --strong, --label);
                 }
 
-                @include iro.bem-modifier('medium') {
+                @include bem.modifier('medium') {
                     &::before,
                     &::after {
-                        background-color: fn.color(--static-#{$theme} --medium --bg);
+                        background-color: props.get(vars.$static-themes, $theme, --medium, --bg);
                     }
     
-                    @include iro.bem-elem('label') {
-                        color: fn.color(--static-#{$theme} --medium --label);
+                    @include bem.elem('label') {
+                        color: props.get(vars.$static-themes, $theme, --medium, --label);
                     }
                 }
     
-                @include iro.bem-modifier('faint') {
+                @include bem.modifier('faint') {
                     &::before,
                     &::after {
-                        background-color: fn.color(--static-#{$theme} --faint --bg);
+                        background-color: props.get(vars.$static-themes, $theme, --faint, --bg);
                     }
     
-                    @include iro.bem-elem('label') {
-                        color: fn.color(--static-#{$theme} --faint --label);
+                    @include bem.elem('label') {
+                        color: props.get(vars.$static-themes, $theme, --faint, --label);
                     }
                 }
             }
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
new file mode 100644
index 0000000..5cd68c1
--- /dev/null
+++ b/src/objects/_divider.vars.scss
@@ -0,0 +1,69 @@
+@use 'sass:map';
+@use 'sass:string';
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$margin-b:               props.def(--o-divider--size, props.get(core.$size--85)) !default;
+$vertical--border-width: props.def(--o-divider--vertical--width, props.get(core.$border-width--thin)) !default;
+$dot--size:              props.def(--o-divider--dot--size, props.get(core.$size--50)) !default;
+
+$strong--border-width:    props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default;
+$strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default;
+
+$medium--border-width:    props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default;
+$medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default;
+
+$faint--border-width:    props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default;
+$faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default;
+
+$strong--bg-color:    props.def(--o-divider--strong--bg-color, props.get(core.$theme, --text), 'color') !default;
+$strong--label-color: props.def(--o-divider--strong--label-color, props.get(core.$theme, --text), 'color') !default;
+
+$medium--bg-color:    props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border), 'color') !default;
+$medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute), 'color') !default;
+
+$faint--bg-color:    props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border), 'color') !default;
+$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+
+$vertical--faint--bg-color:    props.def(--o-divider--vertical--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+
+$dot--faint--bg-color:    props.def(--o-divider--dot--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+
+$static-themes: props.def(--o-divider, (), 'color');
+
+@each $theme in map.keys(props.get(core.$transparent-colors)) {
+    $button-theme: --static-#{string.slice($theme, 3)};
+
+    $static-themes: props.merge($static-themes, (
+        $button-theme: (
+            --strong: (
+                --bg:    props.get(core.$transparent-colors, $theme, --800),
+                --label: props.get(core.$transparent-colors, $theme, --900),
+            ),
+            --medium: (
+                --bg:    props.get(core.$transparent-colors, $theme, --300),
+                --label: props.get(core.$transparent-colors, $theme, --500),
+            ),
+            --faint: (
+                --bg:    props.get(core.$transparent-colors, $theme, --300),
+                --label: props.get(core.$transparent-colors, $theme, --500),
+            ),
+        )
+    ));
+}
+
+$themes-config: (
+    accent:   --accent,
+    negative: --negative,
+) !default;
+
+$themes: props.def(--o-divider, (), 'color');
+
+@each $theme, $key in $themes-config {
+    $themes: props.merge($themes, (
+        --#{$theme}: (
+            --bg:    props.get(core.$theme, $key, --800),
+            --label: props.get(core.$theme, $key, --1000),
+        )
+    ));
+}
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
index d8d1289..ce2dfa7 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -1,72 +1,49 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-@use 'sass:math';
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+@use 'icon.vars' as icon;
 
-@use 'icon';
+@forward 'emoji.vars';
+@use 'emoji.vars' as vars;
 
-@include iro.props-namespace('emoji') {
-    @include iro.props-store((
-        --dims: (
-            --size:     calc(1 / 14 * 18em),
-            --pad:      .3em,
-            --rounding: fn.global-dim(--rounding),
-            --zoom:     3,
-            --valign:   -.25em,
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
 
-            --125: (
-                --size:   calc(1 / 14 * 23em),
-                --valign: -.45em,
-            ),
-
-            --150: (
-                --size:   calc(1 / 14 * 28em),
-                --valign: -.65em,
-            ),
-
-            --200: (
-                --size:   calc(1 / 14 * 38em),
-                --valign: -1em,
-            )
-        ),
-        --colors: (
-            --bg: fn.global-color(--border-mute),
-        )
-    ));
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:        inline-block;
+    @include bem.object('emoji') {
         position:       relative;
-        inline-size:    calc(fn.dim(--size));
-        block-size:     calc(fn.dim(--size));
-        margin:         calc(-1 * fn.dim(--pad));
-        padding:        calc(fn.dim(--pad));
-        vertical-align: fn.dim(--valign);
+        display:        inline-block;
+        inline-size:    calc(props.get(vars.$size));
+        block-size:     calc(props.get(vars.$size));
+        padding:        calc(props.get(vars.$pad));
+        margin:         calc(-1 * props.get(vars.$pad));
+        vertical-align: props.get(vars.$valign);
         object-fit:     contain;
 
-        @include iro.bem-modifier('icon') {
-            margin:         calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--size) - fn.foreign-dim(--icon, --size)));
-            vertical-align: fn.foreign-dim(--icon, --valign);
+        @include bem.modifier('icon') {
+            margin:         calc(-1 * props.get(vars.$pad) - .5 * (props.get(vars.$size) - props.get(icon.$size)));
+            vertical-align: props.get(icon.$valign);
         }
 
-        @each $size in '125' '150' '200' {
-            @include iro.bem-modifier($size) {
-                inline-size:    fn.dim(--#{$size} --size);
-                block-size:     fn.dim(--#{$size} --size);
-                vertical-align: fn.dim(--#{$size} --valign);
+        @each $mod, $size, $valign in vars.$sizes {
+            @include bem.modifier($mod) {
+                inline-size:    props.get($size);
+                block-size:     props.get($size);
+                vertical-align: props.get($valign);
 
-                @include iro.bem-modifier('icon') {
-                    margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--#{$size} --size) - fn.foreign-dim(--icon, --size)));
+                @include bem.modifier('icon') {
+                    margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size)));
                 }
             }
         }
 
-        @include iro.bem-modifier('zoomable') {
+        @include bem.modifier('zoomable') {
+            border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom));
             transition:    transform .2s ease, background-color .2s ease;
-            border-radius: calc(fn.dim(--rounding) / fn.dim(--zoom));
 
             &:hover {
-                transform:        scale(fn.dim(--zoom));
-                background-color: fn.color(--bg);
+                background-color: props.get(vars.$bg-color);
+                transform:        scale(props.get(vars.$zoom));
             }
         }
     }
diff --git a/src/objects/_emoji.vars.scss b/src/objects/_emoji.vars.scss
new file mode 100644
index 0000000..fbfb935
--- /dev/null
+++ b/src/objects/_emoji.vars.scss
@@ -0,0 +1,26 @@
+@use 'sass:map';
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$size:     props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default;
+$pad:      props.def(--o-emoji--pad, .3em) !default;
+$rounding: props.def(--o-emoji--rounding, props.get(core.$rounding)) !default;
+$zoom:     props.def(--o-emoji--zoom, 3) !default;
+$valign:   props.def(--o-emoji--valign, -.25em) !default;
+
+$size--125:   props.def(--o-emoji--125--size, calc(1 / 14 * 23em)) !default;
+$valign--125: props.def(--o-emoji--125--valign, -.45em) !default;
+
+$size--150:   props.def(--o-emoji--150--size, calc(1 / 14 * 28em)) !default;
+$valign--150: props.def(--o-emoji--150--valign, -.65em) !default;
+
+$size--200:   props.def(--o-emoji--200--size, calc(1 / 14 * 38em)) !default;
+$valign--200: props.def(--o-emoji--200--valign, -1em) !default;
+
+$sizes: (
+    '125' $size--125 $valign--125,
+    '150' $size--150 $valign--150,
+    '200' $size--200 $valign--200,
+) !default;
+
+$bg-color: props.def(--o-emoji--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
index 1518ea6..564ab2b 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -1,84 +1,74 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
 
-@include iro.props-namespace('field-label') {
-    @include iro.props-store((
-        --dims: (
-            --spacing-i:       fn.global-dim(--size --150),
-            --spacing-b:       fn.global-dim(--size --85),
-            --label-font-size: fn.global-dim(--font-size --75),
-            --hint-font-size:  fn.global-dim(--font-size --75),
-        ),
-        --colors: (
-            --label:      fn.global-color(--text-mute),
-            --hint:       fn.global-color(--text-mute),
-            --error-hint: fn.global-color(--negative --900),
-            --disabled:   fn.global-color(--text-disabled),
-        ),
-    ));
+@forward 'field-label.vars';
+@use 'field-label.vars' as vars;
 
-    @include iro.bem-object(iro.props-namespace()) {
-        display: block;
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
 
-        @include iro.bem-elem('label') {
+    @include bem.object('field-label') {
+        @include bem.elem('label') {
             display:            block;
             flex:               0 0 auto;
-            padding-inline-end: fn.dim(--spacing-i);
-            color:              fn.color(--label);
-            font-size:          fn.dim(--label-font-size);
+            padding-inline-end: props.get(vars.$spacing-i);
+            font-size:          props.get(vars.$label-font-size);
             font-weight:        400;
             line-height:        1.3;
+            color:              props.get(vars.$label-color);
     
-            @include iro.bem-next-elem('content') {
-                margin-block-start: fn.dim(--spacing-b);
+            @include bem.next-elem('content') {
+                margin-block-start: props.get(vars.$spacing-b);
             }
         }
     
-        @include iro.bem-elem('content') {
+        @include bem.elem('content') {
             display: block;
             flex:    1 1 auto;
         }
     
-        @include iro.bem-elem('hint') {
+        @include bem.elem('hint') {
             display:            block;
-            margin-block-start: fn.dim(--spacing-b);
-            color:              fn.color(--hint);
-            font-size:          fn.dim(--hint-font-size);
+            margin-block-start: props.get(vars.$spacing-b);
+            font-size:          props.get(vars.$hint-font-size);
+            color:              props.get(vars.$hint-color);
         }
     
-        @include iro.bem-is('invalid') {
-            @include iro.bem-elem('hint') {
-                color: fn.color(--error-hint);
+        @include bem.is('invalid') {
+            @include bem.elem('hint') {
+                color: props.get(vars.$error-hint-color);
             }
         }
     
-        @include iro.bem-is('disabled') {
-            @include iro.bem-elem('label', 'hint') {
-                color: fn.color(--disabled);
+        @include bem.is('disabled') {
+            @include bem.elem('label', 'hint') {
+                color: props.get(vars.$disabled-color);
             }
         }
     
-        @include iro.bem-modifier('align-start', 'align-end') {
+        @include bem.modifier('align-start', 'align-end') {
             display:     flex;
             align-items: baseline;
     
-            @include iro.bem-elem('label') {
+            @include bem.elem('label') {
                 display: inline-block;
     
-                @include iro.bem-next-elem('content') {
+                @include bem.next-elem('content') {
                     margin-block-start: 0;
                 }
             }
         }
     
-        @include iro.bem-modifier('align-start') {
-            @include iro.bem-elem('label') {
+        @include bem.modifier('align-start') {
+            @include bem.elem('label') {
                 text-align: start;
             }
         }
     
-        @include iro.bem-modifier('align-end') {
-            @include iro.bem-elem('label') {
+        @include bem.modifier('align-end') {
+            @include bem.elem('label') {
                 text-align: end;
             }
         }
diff --git a/src/objects/_field-label.vars.scss b/src/objects/_field-label.vars.scss
new file mode 100644
index 0000000..844a10b
--- /dev/null
+++ b/src/objects/_field-label.vars.scss
@@ -0,0 +1,12 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$spacing-i:       props.def(--o-field-label--spacing-i, props.get(core.$size--150)) !default;
+$spacing-b:       props.def(--o-field-label--spacing-b, props.get(core.$size--85)) !default;
+$label-font-size: props.def(--o-field-label--label-font-size, props.get(core.$font-size--75)) !default;
+$hint-font-size:  props.def(--o-field-label--hint-font-size, props.get(core.$font-size--75)) !default;
+
+$label-color:      props.def(--o-field-label--label-color, props.get(core.$theme, --text-mute), 'color') !default;
+$hint-color:       props.def(--o-field-label--hint-color, props.get(core.$theme, --text-mute), 'color') !default;
+$error-hint-color: props.def(--o-field-label--error-hint-color, props.get(core.$theme, --negative, --900), 'color') !default;
+$disabled-color:   props.def(--o-field-label--disabled-color, props.get(core.$theme, --text-disabled), 'color') !default;
diff --git a/src/objects/_figure.scss b/src/objects/_figure.scss
new file mode 100644
index 0000000..38837be
--- /dev/null
+++ b/src/objects/_figure.scss
@@ -0,0 +1,26 @@
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@forward 'figure.vars';
+@use 'figure.vars' as vars;
+
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.object('figure') {
+        @include bem.elem('caption') {
+            padding-block:    props.get(vars.$pad-b);
+            font-size:        props.get(vars.$font-size);
+            color:            props.get(vars.$text-color);
+            border-block-end: props.get(vars.$border-width) solid props.get(vars.$border-color);
+
+            &::before {
+                display:       block;
+                margin-block:  -100em 100em;
+                content:       '';
+            }
+        }
+    }
+}
diff --git a/src/objects/_figure.vars.scss b/src/objects/_figure.vars.scss
new file mode 100644
index 0000000..78f5d15
--- /dev/null
+++ b/src/objects/_figure.vars.scss
@@ -0,0 +1,9 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$pad-b:        props.def(--o-figure--pad-b, props.get(core.$size--100)) !default;
+$border-width: props.def(--o-figure--border-width, props.get(core.$border-width--thin)) !default;
+$font-size:    props.def(--o-figure--font-size, props.get(core.$font-size--100)) !default;
+
+$text-color:   props.def(--o-figure--text-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+$border-color: props.def(--o-figure--border-color, props.get(core.$theme, --border), 'color') !default;
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 7990a6b..bdc7027 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,116 +1,58 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-@use '../mixins' as mx;
-@use '../config';
-@use 'include-media/dist/include-media' as media;
-
-$sizes: 'xxl' 'xl' 'lg' 'md' 'sm' 'xs';
-
-@include iro.props-namespace('heading') {
-    @include iro.props-store((
-        --dims: (
-            --offset: -.02em,
-        ),
-        --colors: (
-            --bg: fn.global-color(--base --50),
-        ),
-    ));
-
-    @include iro.bem-object(iro.props-namespace()) {
-        @include mx.set-font(--headline);
-
-        display:            block;
-        margin-block-start: fn.global-dim(--heading --margin-bs);
-        transform:          translateX(fn.dim(--offset));
-        letter-spacing:     normal;
-        text-transform:     none;
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@forward 'heading.vars';
+@use 'heading.vars' as vars;
+
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.object('heading') {
+        display:               block;
+        margin-block-start:    props.get(vars.$margin-bs);
+        font-family:           props.get(vars.$font-family);
+        font-weight:           props.get(vars.$font-weight);
+        font-feature-settings: props.get(vars.$feature-settings);
+        line-height:           props.get(vars.$line-height);
+        color:                 props.get(vars.$text-color);
+        text-transform:        none;
+        letter-spacing:        normal;
 
         & + & {
-            margin-block-start: fn.global-dim(--heading --margin-bs-sibling);
-        }
-
-        @include iro.bem-elem('highlight') {
-            background-image: linear-gradient(
-                to top,
-                transparent    .05em,
-                fn.color(--bg) .05em,
-                fn.color(--bg) .5em,
-                transparent    .5em
-            );
-        }
-
-        @include iro.bem-modifier('xxl') {
-            @include mx.heading-strong(--xxl);
-        }
-
-        @include iro.bem-modifier('xl') {
-            @include mx.heading-strong(--xl);
-        }
-
-        @include iro.bem-modifier('lg') {
-            @include mx.heading-medium(--lg);
-        }
-
-        @include iro.bem-modifier('md') {
-            @include mx.heading-medium(--md);
-        }
-
-        @include iro.bem-modifier('sm') {
-            @include mx.heading-faint(--sm);
+            margin-block-start: props.get(vars.$margin-bs-sibling);
         }
 
-        @include iro.bem-modifier('xs') {
-            @include mx.heading-faint(--xs);
+        @include bem.elem('highlight') {
+            background-image: linear-gradient(to top,
+            transparent               .05em,
+            props.get(vars.$bg-color) .05em,
+            props.get(vars.$bg-color) .5em,
+            transparent               .5em);
         }
 
-        @include iro.bem-modifier('display') {
-            @include mx.set-font(--headline);
-
-            @include iro.bem-modifier('xxl') {
-                @include mx.heading-strong(--display --xxl);
-
-                @include media.media('<=md') {
-                    @include mx.heading-strong(--display-sm --xxl);
-                }
-            }
-    
-            @include iro.bem-modifier('xl') {
-                @include mx.heading-strong(--display --xl);
-
-                @include media.media('<=md') {
-                    @include mx.heading-strong(--display-sm --xl);
-                }
-            }
-    
-            @include iro.bem-modifier('lg') {
-                @include mx.heading-strong(--display --lg);
-
-                @include media.media('<=md') {
-                    @include mx.heading-strong(--display-sm --lg);
-                }
-            }
-    
-            @include iro.bem-modifier('md') {
-                @include mx.heading-strong(--display --md);
-
-                @include media.media('<=md') {
-                    @include mx.heading-strong(--display-sm --md);
-                }
+        @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$sizes {
+            @include bem.modifier($mod) {
+                font-family:           props.get($font-family);
+                font-size:             props.get($font-size);
+                font-weight:           props.get($font-weight);
+                font-feature-settings: props.get($feature-settings);
+                line-height:           props.get($line-height);
+                letter-spacing:        props.get($letter-spacing);
             }
-    
-            @include iro.bem-modifier('sm') {
-                @include mx.heading-medium(--display --sm);
-
-                @include media.media('<=md') {
-                    @include mx.heading-medium(--display-sm --sm);
-                }
-            }
-    
-            @include iro.bem-modifier('xs') {
-                @include mx.heading-faint(--display --xs);
+        }
 
-                @include media.media('<=md') {
-                    @include mx.heading-faint(--display-sm --xs);
+        @include bem.modifier('display') {
+            @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$display--sizes {
+                @include bem.modifier($mod) {
+                    font-family:           props.get($font-family);
+                    font-size:             props.get($font-size);
+                    font-weight:           props.get($font-weight);
+                    font-feature-settings: props.get($feature-settings);
+                    line-height:           props.get($line-height);
+                    letter-spacing:        props.get($letter-spacing);
+                    transform:             translateX(props.get(vars.$offset));
                 }
             }
         }
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss
new file mode 100644
index 0000000..90278c8
--- /dev/null
+++ b/src/objects/_heading.vars.scss
@@ -0,0 +1,123 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$offset:            props.def(--o-heading--offset, -.02em) !default;
+$margin-bs:         props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default;
+$margin-bs-sibling: props.def(--o-heading--margin-bs-sibling, props.get(core.$size--325)) !default;
+
+$text-color: props.def(--o-heading--text-color, props.get(core.$theme, --heading), 'color') !default;
+$bg-color:   props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50), 'color') !default;
+
+$font-family:      props.def(--o-heading--font-family, props.get(core.$font--standard--family)) !default;
+$line-height:      props.def(--o-heading--line-height, props.get(core.$font--standard--line-height)) !default;
+$font-weight:      props.def(--o-heading--font-weight, bold) !default;
+$feature-settings: props.def(--o-heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+
+$font-family--xxl:      props.def(--o-heading--xxl--font-family, props.get(core.$font--headline--family)) !default;
+$line-height--xxl:      props.def(--o-heading--xxl--line-height, props.get(core.$font--headline--line-height)) !default;
+$font-size--xxl:        props.def(--o-heading--xxl--font-size, props.get(core.$font-size--300)) !default;
+$font-weight--xxl:      props.def(--o-heading--xxl--font-weight, props.get(core.$font--headline--weight)) !default;
+$letter-spacing--xxl:   props.def(--o-heading--xxl--letter-spacing, 0) !default;
+$feature-settings--xxl: props.def(--o-heading--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
+
+$font-family--xl:      props.def(--o-heading--xl--font-family, props.get(core.$font--headline--family)) !default;
+$line-height--xl:      props.def(--o-heading--xl--line-height, props.get(core.$font--headline--line-height)) !default;
+$font-size--xl:        props.def(--o-heading--xl--font-size, props.get(core.$font-size--200)) !default;
+$font-weight--xl:      props.def(--o-heading--xl--font-weight, props.get(core.$font--headline--weight)) !default;
+$letter-spacing--xl:   props.def(--o-heading--xl--letter-spacing, 0) !default;
+$feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
+
+$font-family--lg:      props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default;
+$line-height--lg:      props.def(--o-heading--lg--line-height, props.get(core.$font--standard--line-height)) !default;
+$font-size--lg:        props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default;
+$font-weight--lg:      props.def(--o-heading--lg--font-weight, bold) !default;
+$letter-spacing--lg:   props.def(--o-heading--lg--letter-spacing, 0) !default;
+$feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+
+$font-family--md:      props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default;
+$line-height--md:      props.def(--o-heading--md--line-height, props.get(core.$font--standard--line-height)) !default;
+$font-size--md:        props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default;
+$font-weight--md:      props.def(--o-heading--md--font-weight, bold) !default;
+$letter-spacing--md:   props.def(--o-heading--md--letter-spacing, 0) !default;
+$feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+
+$font-family--sm:      props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default;
+$line-height--sm:      props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default;
+$font-size--sm:        props.def(--o-heading--sm--font-size, props.get(core.$font-size--75)) !default;
+$font-weight--sm:      props.def(--o-heading--sm--font-weight, 500) !default;
+$letter-spacing--sm:   props.def(--o-heading--sm--letter-spacing, 1px) !default;
+$feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+
+$font-family--xs:      props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default;
+$line-height--xs:      props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default;
+$font-size--xs:        props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default;
+$font-weight--xs:      props.def(--o-heading--xs--font-weight, 500) !default;
+$letter-spacing--xs:   props.def(--o-heading--xs--letter-spacing, 1px) !default;
+$feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+
+$sizes: (
+    'xs'  $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs,
+    'sm'  $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm,
+    'md'  $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md,
+    'lg'  $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg,
+    'xl'  $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl,
+    'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl,
+) !default;
+
+$display--font-family--xxl:      props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default;
+$display--line-height--xxl:      props.def(--o-heading--display--xxl--line-height, props.get(core.$font--headline--line-height)) !default;
+$display--font-size--xxl:        props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--1100)) !default;
+$display--font-weight--xxl:      props.def(--o-heading--display--xxl--font-weight, props.get(core.$font--headline--weight)) !default;
+$display--letter-spacing--xxl:   props.def(--o-heading--display--xxl--letter-spacing, 0) !default;
+$display--feature-settings--xxl: props.def(--o-heading--display--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
+
+$display--font-family--xl:      props.def(--o-heading--display--xl--font-family, props.get(core.$font--headline--family)) !default;
+$display--line-height--xl:      props.def(--o-heading--display--xl--line-height, props.get(core.$font--headline--line-height)) !default;
+$display--font-size--xl:        props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--700)) !default;
+$display--font-weight--xl:      props.def(--o-heading--display--xl--font-weight, props.get(core.$font--headline--weight)) !default;
+$display--letter-spacing--xl:   props.def(--o-heading--display--xl--letter-spacing, 0) !default;
+$display--feature-settings--xl: props.def(--o-heading--display--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
+
+$display--font-family--lg:      props.def(--o-heading--display--lg--font-family, props.get(core.$font--headline--family)) !default;
+$display--line-height--lg:      props.def(--o-heading--display--lg--line-height, props.get(core.$font--headline--line-height)) !default;
+$display--font-size--lg:        props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--300)) !default;
+$display--font-weight--lg:      props.def(--o-heading--display--lg--font-weight, props.get(core.$font--headline--weight)) !default;
+$display--letter-spacing--lg:   props.def(--o-heading--display--lg--letter-spacing, 0) !default;
+$display--feature-settings--lg: props.def(--o-heading--display--lg--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
+
+$display--font-family--md:      props.def(--o-heading--display--md--font-family, props.get(core.$font--headline--family)) !default;
+$display--line-height--md:      props.def(--o-heading--display--md--line-height, props.get(core.$font--headline--line-height)) !default;
+$display--font-size--md:        props.def(--o-heading--display--md--font-size, props.get(core.$font-size--150)) !default;
+$display--font-weight--md:      props.def(--o-heading--display--md--font-weight, props.get(core.$font--headline--weight)) !default;
+$display--letter-spacing--md:   props.def(--o-heading--display--md--letter-spacing, 0) !default;
+$display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
+
+$display--font-family--sm:      props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default;
+$display--line-height--sm:      props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default;
+$display--font-size--sm:        props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75)) !default;
+$display--font-weight--sm:      props.def(--o-heading--display--sm--font-weight, bold) !default;
+$display--letter-spacing--sm:   props.def(--o-heading--display--sm--letter-spacing, 0) !default;
+$display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+
+$display--font-family--xs:      props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default;
+$display--line-height--xs:      props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default;
+$display--font-size--xs:        props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default;
+$display--font-weight--xs:      props.def(--o-heading--display--xs--font-weight, 500) !default;
+$display--letter-spacing--xs:   props.def(--o-heading--display--xs--letter-spacing, 1px) !default;
+$display--feature-settings--xs: props.def(--o-heading--display--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+
+$display--font-size--xxl--md: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--900), 'md') !default;
+$display--font-size--xl--md:  props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--600), 'md') !default;
+$display--font-size--lg--md:  props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--200), 'md') !default;
+$display--font-size--md--md:  props.def(--o-heading--display--md--font-size, props.get(core.$font-size--100), 'md') !default;
+$display--font-size--sm--md:  props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75), 'md') !default;
+$display--font-size--xs--md:  props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default;
+
+$display--sizes: (
+    'xs'  $display--font-family--xs $display--line-height--xs $display--font-size--xs $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs,
+    'sm'  $display--font-family--sm $display--line-height--sm $display--font-size--sm $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm,
+    'md'  $display--font-family--md $display--line-height--md $display--font-size--md $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md,
+    'lg'  $display--font-family--lg $display--line-height--lg $display--font-size--lg $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg,
+    'xl'  $display--font-family--xl $display--line-height--xl $display--font-size--xl $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl,
+    'xxl' $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl,
+) !default;
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
index 1491dd9..187938e 100644
--- a/src/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -1,25 +1,24 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
 
-@include iro.props-namespace('icon') {
-    @include iro.props-store((
-        --dims: (
-            --stroke:  1.5px,
-            --size:    calc(1 / 14 * 16em),
-            --valign:  -.2em,
-        )
-    ));
+@forward 'icon.vars';
+@use 'icon.vars' as vars;
 
-    @include iro.bem-object(iro.props-namespace()) {
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.object('icon') {
         display:         inline;
-        inline-size:     fn.dim(--size);
-        block-size:      fn.dim(--size);
-        stroke-width:    fn.dim(--stroke);
+        inline-size:     props.get(vars.$size);
+        block-size:      props.get(vars.$size);
+        vertical-align:  props.get(vars.$valign);
         stroke-linecap:  round;
         stroke-linejoin: round;
-        vertical-align:  fn.dim(--valign);
+        stroke-width:    props.get(vars.$stroke-width);
 
-        @include iro.bem-modifier('block') {
+        @include bem.modifier('block') {
             display: block;
         }
     }
diff --git a/src/objects/_icon.vars.scss b/src/objects/_icon.vars.scss
new file mode 100644
index 0000000..ff1541d
--- /dev/null
+++ b/src/objects/_icon.vars.scss
@@ -0,0 +1,5 @@
+@use 'iro-sass/src/props';
+
+$stroke-width: props.def(--o-icon--stroke-width, 1.5px) !default;
+$size:         props.def(--o-icon--size, calc(1 / 14 * 16em)) !default;
+$valign:       props.def(--o-icon--valign, -.18em) !default;
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 8ad8584..b62c353 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -1,313 +1,135 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
 
-@use 'action-button';
+@forward 'lightbox.vars';
+@use 'lightbox.vars' as vars;
 
-$static-themes: 'black' 'white' !default;
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
 
-@include iro.props-namespace('lightbox') {
-    @include iro.props-store((
-        --dims: (
-            --pad: fn.global-dim(--size --150),
+    @include bem.object('lightbox') {
+        flex:           1 1 auto;
+        min-block-size: 0;
 
-            --thumbnail: (
-                --size:      fn.global-dim(--size --700),
-                --rounding:  fn.global-dim(--rounding),
-                --spacing:   fn.global-dim(--size --100),
-                --border:    fn.global-dim(--border --thin),
-                
-                --selected: (
-                    --border: fn.global-dim(--border --medium),
-                ),
-
-                --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),
-                ),
-            ),
-
-            --close-button: (
-                --font-size: fn.global-dim(--font-size --200),
-            ),
-
-            --nav-button: (
-                --width:     fn.global-dim(--size --2000),
-                --height:    fn.global-dim(--size --3800),
-                --font-size: fn.global-dim(--font-size --200),
-            ),
-        ),
-        --colors: (
-            --thumbnail: (
-                --border: fn.global-color(--border-strong),
-                
-                --hover: (
-                    --border: fn.global-color(--text-mute-more),
-                ),
-                
-                --selected: (
-                    --border: fn.global-color(--heading),
-                ),
-
-                --key-focus: (
-                    --border:  fn.global-color(--focus --border),
-                    --outline: fn.global-color(--focus --outline),
-                ),
-            ),
-        ),
-    ));
-
-    @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),
-                        ),
-
-                        --key-focus: (
-                            --border:  fn.global-color(--#{$theme}-transparent --900),
-                            --outline: fn.global-color(--#{$theme}-transparent --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');
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:               grid;
-        grid-template-rows:    auto minmax(0, 1fr) auto auto;
-        grid-template-columns: auto minmax(0, 1fr) auto;
-        grid-template-areas:
-            'header     header     header'
-            'prev       content    next'
-            'thumbnails thumbnails thumbnails'
-            'footer     footer     footer';
-        box-sizing:            border-box;
-        min-block-size:        0;
-        flex:                  1 1 auto;
-
-        @include iro.bem-elem('header') {
-            grid-area:           header;
+        @include bem.elem('header') {
             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') {
-            display:         none;
+        @include bem.elem('img') {
             box-sizing:      border-box;
+            display:         block;
             grid-area:       content;
-            max-inline-size: 100%;
-            max-block-size:  100%;
             place-self:      center;
-            padding:         fn.dim(--pad);
-
-            @include iro.bem-sibling-elem('img') {
-                @include iro.bem-modifier('default') {
-                    display: block;
-
-                    @include iro.bem-next-elem('nav-btn') {
-                        display: block;
-    
-                        @include iro.bem-next-elem('nav-btn') {
-                            display: block;
-                        }
-                    }
-                }
-            }
-
-            @include iro.bem-multi('&:target', 'is' 'visible') {
-                display: block;
-
-                @include iro.bem-next-elem('nav-btn') {
-                    display: block;
-
-                    @include iro.bem-next-elem('nav-btn') {
-                        display: block;
-                    }
-                }
-
-                @include iro.bem-sibling-elem('img') {
-                    @include iro.bem-modifier('default') {
-                        display: none;
-
-                        @include iro.bem-next-elem('nav-btn') {
-                            display: none;
-        
-                            @include iro.bem-next-elem('nav-btn') {
-                                display: none;
-                            }
-                        }
-                    }
-                }
-            }
+            inline-size:     auto;
+            max-inline-size: 100%;
+            block-size:      auto;
+            max-block-size:  props.get(vars.$image--max-height);
+            padding:         props.get(vars.$pad);
+            margin-inline:   auto;
+            border-radius:   calc(props.get(vars.$pad) + props.get(vars.$image--border-radius));
         }
 
-        @include iro.bem-elem('thumbnails') {
+        @include bem.elem('thumbnails') {
+            display:            none;
             grid-area:          thumbnails;
-            display:            flex;
-            gap:                fn.dim(--thumbnail --spacing);
-            padding:            fn.dim(--pad);
-            margin-block-start: calc(-1 * fn.dim(--pad));
+            gap:                props.get(vars.$thumbnails--spacing);
+            padding:            props.get(vars.$pad);
+            margin-block-start: calc(-1 * props.get(vars.$pad));
             overflow:           auto;
         }
 
-        @include iro.bem-elem('footer') {
-            grid-area:      footer;
-            display:        flex;
-            align-items:    flex-start;
-            padding-block:  0 fn.dim(--pad);
-            padding-inline: fn.dim(--pad);
-        }
-
-        @include iro.bem-elem('thumbnail') {
-            position:       relative;
-            flex:           0 0 auto;
-            inline-size:    fn.dim(--thumbnail --size);
-            block-size:     fn.dim(--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));
-            opacity:       .75;
-
-            &:hover,
-            &:active,
-            &:focus-visible {
-                outline-color: fn.color(--thumbnail --hover --border);
-                opacity:       1;
-            }
-
-            @include iro.bem-is('selected') {
-                $focus-border-offset: calc(-1 * fn.dim(--thumbnail --selected --border));
-
-                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);
-                outline:       none;
-                opacity:       1;
-            }
-
-            &:focus-visible {
-                $focus-border-offset: calc(-1 * fn.dim(--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);
-                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);
-            }
-        }
-
-        @include iro.bem-elem('thumbnail-img') {
-            display:            block;
-            position:           absolute;
-            inset-block-start:  0;
-            inset-inline-start: 0;
-            inline-size:        100%;
-            block-size:         100%;
-            object-fit:         cover;
-            object-position:    center center;
-        }
-
-        @include iro.bem-elem('thumbnail-icon') {
-            position:           absolute;
-            inset-block-start:  50%;
-            inset-inline-start: 50%;
-            transform:          translate(-50%, -50%);
-        }
-
-        @include iro.bem-elem('close-btn') {
+        @include bem.elem('close-btn') {
+            display:            none;
             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') {
-            display:    none;
+        @include bem.elem('nav-btn') {
             position:   relative;
+            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 {
-                content:            '';
-                display:            block;
                 position:           absolute;
                 inset-block-start:  50%;
-                inline-size:        fn.dim(--nav-button --width);
-                block-size:         fn.dim(--nav-button --height);
+                display:            block;
+                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') {
+            @include 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;
                 }
             }
     
-            @include iro.bem-modifier('next') {
+            @include 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);
 
-                @include iro.bem-elem('thumbnail') {
-                    outline-color: fn.color(--static-#{$theme} --thumbnail --border);
+        @include bem.modifier('interactive') {
+            display:               grid;
+            grid-template-areas:
+                'header     header     header'
+                'prev       content    next'
+                'thumbnails thumbnails thumbnails';
+            grid-template-rows:    auto minmax(0, 1fr) auto auto;
+            grid-template-columns: auto minmax(0, 1fr) auto;
+
+            @include bem.modifier('fullscreen') {
+                block-size: props.get(vars.$fullscreen--height);
+            }
 
-                    &:hover,
-                    &:active,
-                    &:focus-visible {
-                        outline-color: fn.color(--static-#{$theme} --thumbnail --hover --border);
-                    }
-        
-                    @include iro.bem-is('selected') {
-                        border-color: fn.color(--static-#{$theme} --thumbnail --selected --border);
-                    }
+            @include bem.elem('img') {
+                display:        none;
+                max-block-size: 100%;
+                margin-inline:  0;
 
-                    &: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);
-                    }
+                @include bem.multi('&:target', 'is' 'visible') {
+                    display: block;
                 }
             }
+
+            @include bem.elem('thumbnails') {
+                display: flex;
+            }
+
+            @include bem.elem('close-btn') {
+                display: block;
+            }
+
+            @include bem.elem('nav-btn') {
+                display: block;
+            }
+        }
+
+        @each $theme in map.keys(props.get(vars.$static-themes)) {
+            @include bem.modifier(string.slice($theme, 3)) {
+                color: props.get(vars.$static-themes, $theme, --text);
+            }
         }
     }
 }
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss
new file mode 100644
index 0000000..cc926e4
--- /dev/null
+++ b/src/objects/_lightbox.vars.scss
@@ -0,0 +1,33 @@
+@use 'sass:map';
+@use 'sass:string';
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default;
+$fullscreen--height:  props.def(--o-lightbox--fullscreen--height, 100vh) !default;
+
+$image--max-height:    props.def(--o-lightbox--image--max-height, calc(100vh - props.get(core.$size--600))) !default;
+$image--border-radius: props.def(--o-lightbox--image--border-radius, props.get(core.$rounding)) !default;
+
+$close-button--font-size: props.def(--o-lightbox--close-button--font-size, props.get(core.$font-size--200)) !default;
+
+$nav-button--inline-size: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2000)) !default;
+$nav-button--block-size:  props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--3800)) !default;
+$nav-button--font-size:   props.def(--o-lightbox--nav-button--font-size, props.get(core.$font-size--200)) !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;
+
+$thumbnails--spacing: props.def(--o-lightbox--thumbnails--spacing, props.get(core.$size--100)) !default;
+
+$static-themes: props.def(--o-lightbox, (), 'color');
+
+@each $theme in map.keys(props.get(core.$transparent-colors)) {
+    $lightbox-theme: --static-#{string.slice($theme, 3)};
+
+    $static-themes: props.merge($static-themes, (
+        $lightbox-theme: (
+            --text: props.get(core.$transparent-colors, $theme, --800),
+        )
+    ));
+}
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index 0f691a2..4d31874 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -1,137 +1,102 @@
-/* stylelint-disable length-zero-no-unit */
-
-@use 'iro-sass/src/index' 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 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+@use 'icon.vars' as icon;
+
+@forward 'menu.vars';
+@use 'menu.vars' as vars;
+
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include 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);
-            color:          fn.color(--header --label);
-            font-size:      fn.dim(--header --font-size);
+        @include bem.elem('header') {
+            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;
-            letter-spacing: .5px;
+            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));
+            @include bem.next-twin-elem {
+                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));
-            border:          fn.dim(--item --key-focus --outline) solid transparent;
-            border-radius:   calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --outline));
-            color:           fn.color(--item --disabled --label);
+        @include bem.elem('item') {
+            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:          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,
             &:enabled {
                 color: currentColor;
 
-                @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') {
-                    background-color: fn.color(--item --hover --bg);
-                    color:            fn.color(--item --hover --label);
+                @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') {
+                    color:            props.get(vars.$item--hover--label-color);
+                    background-color: props.get(vars.$item--hover--bg-color);
                 }
 
                 &:active {
-                    background-color: fn.color(--item --active --bg);
-                    color:            fn.color(--item --active --label);
+                    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));
+            @include bem.next-elem('header') {
+                margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing));
             }
         }
 
-        @include iro.bem-elem('header') {
+        @include bem.elem('header') {
             &:link,
             &:visited,
             &:enabled {
-                color: fn.color(--header --label);
+                color: props.get(vars.$header--label-color);
             }
         }
 
-        @include iro.bem-elem('separator') {
+        @include 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);
+        @include bem.elem('slot') {
+            padding-block:  props.get(vars.$item--pad-b);
+            padding-inline: props.get(vars.$item--pad-i);
         }
 
-        @include iro.bem-elem('icon-slot') {
+        @include 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));
+        @include bem.modifier('pull') {
+            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..d242a1f
--- /dev/null
+++ b/src/objects/_menu.vars.scss
@@ -0,0 +1,29 @@
+@use 'sass:map';
+@use 'iro-sass/src/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--rounding, 0em) !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), 'color') !default;
+$header--label-color: props.def(--o-menu--header--label-color, props.get(core.$theme, --heading), 'color') !default;
+
+$item--hover--bg-color:    props.def(--o-menu--item--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+$item--hover--label-color: props.def(--o-menu--item--hover--label-color, props.get(core.$theme, --heading), 'color') !default;
+
+$item--active--bg-color:    props.def(--o-menu--item--active--bg-color, props.get(core.$theme, --border), 'color') !default;
+$item--active--label-color: props.def(--o-menu--item--active--label-color, props.get(core.$theme, --heading), 'color') !default;
+
+$item--disabled--label-color: props.def(--o-menu--item--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
+
+$item--key-focus--border-color:  props.def(--o-menu--item--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
+$item--key-focus--outline-color: props.def(--o-menu--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss
new file mode 100644
index 0000000..59d4c51
--- /dev/null
+++ b/src/objects/_navbar.scss
@@ -0,0 +1,191 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@forward 'navbar.vars';
+@use 'navbar.vars' as vars;
+
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.object('navbar') {
+        display:    flex;
+        block-size: props.get(vars.$block-size);
+
+        @include bem.elem('item-content-text') {
+            margin-inline: props.get(vars.$item--pad-i-label);
+        }
+
+        @include bem.elem('item-content') {
+            position:        relative;
+            padding-block:   props.get(vars.$item--pad-b);
+            padding-inline:  props.get(vars.$item--pad-i);
+            font-size:       props.get(vars.$item--font-size);
+            color:           currentColor;
+            white-space:     nowrap;
+            border-radius:   100em;
+
+            &::after {
+                position:       absolute;
+                inset:          calc(-1 * props.get(vars.$key-focus--border-offset));
+                z-index:        -10;
+                display:        block;
+                pointer-events: none;
+                visibility:     hidden;
+                content:        '';
+                border-radius:  100em;
+                outline:        props.get(vars.$default-theme, --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(vars.$default-theme, --key-focus, --outline);
+            }
+        }
+
+        @include bem.elem('item') {
+            display:         flex;
+            flex-direction:  column;
+            align-items:     center;
+            justify-content: center;
+            inline-size:     100%;
+            padding-inline:  calc(.5 * props.get(vars.$spacing));
+            font-weight:     500;
+            color:           props.get(vars.$default-theme, --disabled, --label-color);
+
+            &:link,
+            &:visited,
+            &:enabled {
+                color: props.get(vars.$default-theme, --label-color);
+
+                &:hover,
+                &:focus-visible {
+                    color: props.get(vars.$default-theme, --hover, --label-color);
+
+                    @include bem.elem('item-content') {
+                        background-color: props.get(vars.$default-theme, --hover, --bg-color);
+                    }
+                }
+
+                &:focus-visible {
+                    @include bem.elem('item-content') {
+                        &::after {
+                            visibility: visible;
+                        }
+                    }
+                }
+
+                &:active {
+                    color: props.get(vars.$default-theme, --active, --label-color);
+
+                    @include bem.elem('item-content') {
+                        background-color: props.get(vars.$default-theme, --active, --bg-color);
+                    }
+                }
+            }
+
+            @include bem.is('selected') {
+                font-weight: bold;
+                color:       props.get(vars.$default-theme, --selected, --disabled, --label-color);
+
+                @include bem.elem('item-content') {
+                    background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color);
+                }
+
+                &:link,
+                &:visited,
+                &:enabled {
+                    color: props.get(vars.$default-theme, --selected, --label-color);
+
+                    @include bem.elem('item-content') {
+                        background-color: props.get(vars.$default-theme, --selected, --bg-color);
+                    }
+
+                    &:hover,
+                    &:focus-visible {
+                        color: props.get(vars.$default-theme, --selected, --hover, --label-color);
+
+                        @include bem.elem('item-content') {
+                            background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color);
+                        }
+                    }
+
+                    &:active {
+                        color: props.get(vars.$default-theme, --selected, --active, --label-color);
+
+                        @include bem.elem('item-content') {
+                            background-color: props.get(vars.$default-theme, --selected, --active, --bg-color);
+                        }
+                    }
+                }
+            }
+        }
+
+        @include bem.modifier('hide-unselected') {
+            @include bem.elem('item') {
+                display: none;
+
+                @include bem.is('selected') {
+                    display: flex;
+                }
+            }
+        }
+
+        @include bem.modifier('adapt') {
+            gap:        props.get(vars.$spacing);
+            block-size: 100%;
+
+            @include bem.elem('item') {
+                padding-inline: 0;
+            }
+        }
+
+
+        @include bem.modifier('align-block') {
+            margin-inline: calc(-1 * props.get(vars.$item--pad-i));
+        }
+
+        @include bem.modifier('quiet') {
+            @include bem.elem('item') {
+                @include bem.is('selected') {
+                    color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color);
+
+                    @include bem.elem('item-content') {
+                        background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color);
+                    }
+
+                    &:link,
+                    &:visited,
+                    &:enabled {
+                        color: props.get(vars.$default-theme, --quiet, --selected, --label-color);
+
+                        @include bem.elem('item-content') {
+                            background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color);
+                        }
+
+                        &:hover,
+                        &:focus-visible {
+                            color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color);
+
+                            @include bem.elem('item-content') {
+                                background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color);
+                            }
+                        }
+
+                        &:active {
+                            color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color);
+
+                            @include bem.elem('item-content') {
+                                background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color);
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss
new file mode 100644
index 0000000..fcdac80
--- /dev/null
+++ b/src/objects/_navbar.vars.scss
@@ -0,0 +1,84 @@
+@use 'sass:map';
+@use 'sass:string';
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$block-size: props.def(--o-navbar--block-size, props.get(core.$size--800)) !default;
+$spacing:    props.def(--o-navbar--spacing, props.get(core.$size--200)) !default;
+
+$item--pad-i:       props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default;
+$item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--25)) !default;
+$item--pad-b:       props.def(--o-navbar--item--pad-b, props.get(core.$size--40)) !default;
+$item--font-size:   props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default;
+
+$key-focus--border-width:  props.def(--o-navbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
+$key-focus--border-offset: props.def(--o-navbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
+$key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+
+$default-theme-override: () !default;
+$default-theme: map.deep-merge((
+    --label-color:  props.get(core.$theme, --text),
+
+    --hover: (
+        --bg-color:    props.get(core.$theme, --border-mute),
+        --label-color: props.get(core.$theme, --heading),
+    ),
+
+    --active: (
+        --bg-color:    props.get(core.$theme, --border),
+        --label-color: props.get(core.$theme, --heading),
+    ),
+
+    --disabled: (
+        --label-color: props.get(core.$theme, --border-strong),
+    ),
+
+    --key-focus: (
+        --label:   props.get(core.$theme, --focus, --text),
+        --border:  props.get(core.$theme, --focus, --border),
+        --outline: props.get(core.$theme, --focus, --outline),
+    ),
+
+    --selected: (
+        --bg-color:     props.get(core.$theme, --heading),
+        --label-color:  props.get(core.$theme, --base, --50),
+
+        --hover: (
+            --bg-color:     props.get(core.$theme, --text),
+            --label-color:  props.get(core.$theme, --base, --50),
+        ),
+
+        --active: (
+            --bg-color:     props.get(core.$theme, --text-mute),
+            --label-color:  props.get(core.$theme, --base, --50),
+        ),
+
+        --disabled: (
+            --bg-color:     props.get(core.$theme, --border-mute),
+            --label-color:  props.get(core.$theme, --border-strong),
+        ),
+    ),
+
+    --quiet: (
+        --selected: (
+            --bg-color:     props.get(core.$theme, --accent, --200),
+            --label-color:  props.get(core.$theme, --accent, --1100),
+
+            --hover: (
+                --bg-color:     props.get(core.$theme, --accent, --300),
+                --label-color:  props.get(core.$theme, --accent, --1200),
+            ),
+    
+            --active: (
+                --bg-color:     props.get(core.$theme, --accent, --400),
+                --label-color:  props.get(core.$theme, --accent, --1300),
+            ),
+
+            --disabled: (
+                --bg-color:     props.get(core.$theme, --accent, --200),
+                --label-color:  props.get(core.$theme, --accent, --800),
+            ),
+        )
+    )
+), $default-theme-override) !default;
+$default-theme: props.def(--o-navbar, $default-theme, 'color');
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index 19f282f..8a6cdb2 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -1,57 +1,58 @@
-@use 'sass:map';
 @use 'sass:list';
+@use 'sass:map';
 @use 'sass:string';
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'iro-sass/src/bem';
 @use '../config';
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
 
-@include iro.props-namespace('palette') {
-    @include iro.bem-object(iro.props-namespace()) {
+@mixin styles {
+    @include bem.object('palette') {
         display:    flex;
         block-size: 3em;
 
-        @include iro.bem-elem('item') {
+        @include 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(config.$themes, config.$theme-default, light, --palettes, --base);
+            $levels:  map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2));
 
-            @for $i from 1 through list.length($contrasts) {
-                $key: list.nth(map.keys($contrasts), $i);
+            @for $i from 1 through list.length($levels) {
+                $key: list.nth(map.keys($levels), $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(config.$themes, config.$theme-default, light, --palettes) {
+            $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2));
 
-            @include iro.bem-modifier(string.slice($palette-name, 3)) {
-                @include iro.bem-elem('item') {
-                    @for $i from 1 through list.length($contrasts) {
-                        $key: list.nth(map.keys($contrasts), $i);
+            @include bem.modifier(string.slice($palette-name, 3)) {
+                @include bem.elem('item') {
+                    @for $i from 1 through list.length($levels) {
+                        $key: list.nth(map.keys($levels), $i);
         
                         &:nth-child(#{$i}) {
-                            background-color: fn.global-color($palette-name $key);
+                            background-color: props.get(core.$theme, $palette-name, $key);
                         }
                     }
                 }
             }
         }
 
-        @include iro.bem-modifier('static') {
+        @include bem.modifier('static') {
             @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
-                $contrasts: map.get(config.$static-colors, --contrasts);
+                $levels: map.get(config.$static-colors, --levels);
 
-                @include iro.bem-modifier(string.slice($palette-name, 3)) {
-                    @include iro.bem-elem('item') {
-                        @for $i from 1 through list.length($contrasts) {
-                            $key: list.nth(map.keys($contrasts), $i);
+                @include bem.modifier(string.slice($palette-name, 3)) {
+                    @include bem.elem('item') {
+                        @for $i from 1 through list.length($levels) {
+                            $key: list.nth(map.keys($levels), $i);
             
                             &:nth-child(#{$i}) {
-                                background-color: fn.global-color(#{$palette-name}-static $key);
+                                background-color: props.get(core.$theme, #{$palette-name}-static, $key);
                             }
                         }
                     }
diff --git a/src/objects/_placeholders.scss b/src/objects/_placeholders.scss
new file mode 100644
index 0000000..e148f21
--- /dev/null
+++ b/src/objects/_placeholders.scss
@@ -0,0 +1,22 @@
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@forward 'placeholders.vars';
+@use 'placeholders.vars' as vars;
+
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.object('placeholders') {
+        @include bem.elem('placeholder') {
+            display:          inline-block;
+            min-block-size:   props.get(vars.$min-block-size);
+            vertical-align:   middle;
+            background-color: currentColor;
+            border-radius:    props.get(vars.$rounding);
+            opacity:          props.get(vars.$opacity);
+        }
+    }
+}
diff --git a/src/objects/_placeholders.vars.scss b/src/objects/_placeholders.vars.scss
new file mode 100644
index 0000000..a2e41e2
--- /dev/null
+++ b/src/objects/_placeholders.vars.scss
@@ -0,0 +1,6 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$min-block-size: props.def(--o-placeholder--min-block-size, 1em) !default;
+$rounding:       props.def(--o-placeholder--rounding, props.get(core.$rounding)) !default;
+$opacity:        props.def(--o-placeholder--opacity, .5) !default;
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
index 5ad58ec..3fe6310 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -1,50 +1,38 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
 
-@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()) {
-        position:           absolute;
-        z-index:            fn.dim(--z-index);
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.object('popover') {
+        position:           fixed;
         inset-block-start:  0;
         inset-inline-start: 0;
-        padding-block:      fn.dim(--pad-b);
-        padding-inline:     fn.dim(--pad-i);
+        z-index:            props.get(vars.$z-index);
+        padding-block:      props.get(vars.$pad-b);
+        padding-inline:     props.get(vars.$pad-i);
+        margin:             0;
+        color:              currentColor;
+        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));
-        border:             fn.dim(--border) solid fn.color(--border);
-        border-radius:      fn.dim(--rounding);
-        background-color:   fn.color(--bg);
-        filter:             fn.color(--filter);
 
-        @include iro.bem-modifier('up-left') {
+        @include bem.modifier('up-left') {
             transform: translate(var(--x), calc(var(--y) - 100%));
         }
 
-        @include iro.bem-modifier('up-right') {
+        @include bem.modifier('up-right') {
             transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
         }
 
-        @include iro.bem-modifier('down-right') {
+        @include bem.modifier('down-right') {
             transform: translate(calc(var(--x) - 100%), var(--y));
         }
     }
diff --git a/src/objects/_popover.vars.scss b/src/objects/_popover.vars.scss
new file mode 100644
index 0000000..b76112e
--- /dev/null
+++ b/src/objects/_popover.vars.scss
@@ -0,0 +1,14 @@
+@use 'sass:map';
+@use 'iro-sass/src/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), 'color') !default;
+$border-color: props.def(--o-popover--border-color, props.get(core.$theme, --border), 'color') !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)), 'color') !default;
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 9fa937d..aef6b92 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -1,116 +1,80 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+@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 materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object(iro.props-namespace()) {
-        display:        inline-block;
+    @include bem.object('radio') {
         position:       relative;
+        display:        inline-block;
+        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));
-        padding-block:  fn.dim(--pad-b);
-        padding-inline: fn.dim(--pad-i);
+            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') {
+        @include 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));
-            border:             fn.dim(--key-focus --border-offset) solid transparent;
-            border-radius:      2em;
-            background-color:   fn.color(--circle-border);
-            background-clip:    padding-box;
+            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:   props.get(vars.$circle-border-color);
+            background-clip:    padding-box;
+            border:             props.get(vars.$key-focus--border-offset) solid transparent;
+            border-radius:      2em;
     
             &::after {
-                content:            '';
-                display:            block;
                 position:           relative;
-                inset-block-start:  fn.dim(--border);
-                inset-inline-start: fn.dim(--border);
-                inline-size:        calc(fn.dim(--diameter) - 2 * fn.dim(--border));
-                block-size:         calc(fn.dim(--diameter) - 2 * fn.dim(--border));
+                inset-block-start:  props.get(vars.$border-width);
+                inset-inline-start: props.get(vars.$border-width);
+                display:            block;
+                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:   props.get(vars.$circle-bg-color);
+                border-radius:      props.get(vars.$diameter);
                 transition:         transform .2s ease;
-                border-radius:      fn.dim(--diameter);
-                background-color:   fn.color(--circle-bg);
             }
         }
     
-        @include iro.bem-elem('label') {
-            margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset));
+        @include bem.elem('label') {
+            margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
         }
     
-        @include iro.bem-elem('native') {
-            appearance:         none;
+        @include bem.elem('native') {
             position:           absolute;
-            z-index:            -1;
             inset-block-start:  0;
             inset-inline-start: 0;
+            z-index:            -1;
             inline-size:        100%;
             block-size:         100%;
-            margin:             0;
             padding:            0;
+            margin:             0;
             overflow:           hidden;
-            border-radius:      fn.dim(--rounding);
+            appearance:         none;
+            border-radius:      props.get(vars.$rounding);
     
             &:hover,
             &:focus-visible {
-                @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--hover --label);
+                @include bem.sibling-elem('label') {
+                    color: props.get(vars.$hover--label-color);
                 }
     
-                @include iro.bem-sibling-elem('circle') {
-                    background-color: fn.color(--hover --circle-border);
+                @include bem.sibling-elem('circle') {
+                    background-color: props.get(vars.$hover--circle-border-color);
                 }
             }
     
             &:checked {
-                @include iro.bem-sibling-elem('circle') {
+                @include bem.sibling-elem('circle') {
                     &::after {
                         transform: scale(.44);
                     }
@@ -118,64 +82,69 @@
             }
     
             &:disabled {
-                @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--disabled --label);
+                @include bem.sibling-elem('label') {
+                    color: props.get(vars.$disabled--label-color);
                 }
     
-                @include iro.bem-sibling-elem('circle') {
-                    background-color: fn.color(--disabled --circle-border);
+                @include bem.sibling-elem('circle') {
+                    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);
+                @include bem.sibling-elem('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);
+                @include bem.sibling-elem('circle') {
+                    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);
                 }
             }
         }
     
-        @include iro.bem-modifier('standalone') {
-            @include iro.bem-elem('circle') {
+        @include bem.modifier('standalone') {
+            @include bem.elem('circle') {
                 margin-block-start: 0;
             }
         }
     
-        @include iro.bem-modifier('accent') {
-            @include iro.bem-elem('native') {
+        @include bem.modifier('accent') {
+            @include bem.elem('native') {
                 &:checked {
-                    @include iro.bem-sibling-elem('circle') {
-                        background-color: fn.color(--accent --circle-border);
+                    @include bem.sibling-elem('circle') {
+                        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);
+                        @include bem.sibling-elem('circle') {
+                            background-color: props.get(vars.$accent--hover--circle-border-color);
                         }
                     }
                 }
     
                 &:disabled {
-                    @include iro.bem-sibling-elem('circle') {
-                        background-color: fn.color(--disabled --circle-border);
+                    @include bem.sibling-elem('circle') {
+                        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);
+                        @include bem.sibling-elem('circle') {
+                            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..51ea581
--- /dev/null
+++ b/src/objects/_radio.vars.scss
@@ -0,0 +1,33 @@
+@use 'sass:map';
+@use 'iro-sass/src/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), 'color') !default;
+$circle-bg-color:     props.def(--o-radio--circle-bg-color, props.get(core.$theme, --base, --75), 'color') !default;
+
+$hover--label-color:         props.def(--o-radio--hover--label-color, props.get(core.$theme, --heading), 'color') !default;
+$hover--circle-border-color: props.def(--o-radio--hover--circle-border-color, props.get(core.$theme, --text-mute), 'color') !default;
+
+$accent--circle-border-color: props.def(--o-radio--accent--circle-border-color, props.get(core.$theme, --accent, --900), 'color') !default;
+
+$accent--hover--circle-border-color: props.def(--o-radio--accent--hover--circle-border-color, props.get(core.$theme, --accent, --1000), 'color') !default;
+
+$disabled--label-color:         props.def(--o-radio--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
+$disabled--circle-border-color: props.def(--o-radio--disabled--circle-border-color, props.get(core.$theme, --border-strong), 'color') !default;
+$disabled--circle-bg-color:     props.def(--o-radio--disabled--circle-bg-color, props.get(core.$theme, --base, --75), 'color') !default;
+
+$key-focus--label-color:   props.def(--o-radio--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
+$key-focus--border-color:  props.def(--o-radio--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
+$key-focus--outline-color: props.def(--o-radio--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss
index 8e4e131..6c60777 100644
--- a/src/objects/_side-nav.scss
+++ b/src/objects/_side-nav.scss
@@ -1,122 +1,90 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+@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 materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object(iro.props-namespace()) {
+    @include 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);
-            color:          fn.color(--header --label);
-            font-size:      fn.dim(--header --font-size);
+        @include bem.elem('header') {
+            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;
-            letter-spacing: .5px;
+            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));
+            @include bem.next-twin-elem {
+                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));
-            border:          fn.dim(--item --key-focus --border-offset) solid transparent;
-            border-radius:   calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --border-offset));
-            color:           fn.color(--item --disabled --label);
+        @include bem.elem('item') {
+            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:          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,
             &:enabled {
                 color: currentColor;
 
-                @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') {
-                    background-color: fn.color(--item --hover --bg);
-                    color:            fn.color(--item --hover --label);
+                @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') {
+                    color:            props.get(vars.$item--hover--label-color);
+                    background-color: props.get(vars.$item--hover--bg-color);
                 }
 
                 &:active {
-                    background-color: fn.color(--item --active --bg);
-                    color:            fn.color(--item --active --label);
+                    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));
+            @include bem.next-elem('header') {
+                margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing));
             }
         }
 
-        @include iro.bem-elem('header') {
+        @include bem.elem('header') {
             &: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);
+        @include bem.elem('separator') {
+            block-size: props.get(vars.$separator);
         }
 
-        @include iro.bem-elem('icon-slot') {
+        @include 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..122dba6
--- /dev/null
+++ b/src/objects/_side-nav.vars.scss
@@ -0,0 +1,28 @@
+@use 'sass:map';
+@use 'iro-sass/src/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.$font-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), 'color') !default;
+
+$item--hover--bg-color:    props.def(--o-side-nav--item--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+$item--hover--label-color: props.def(--o-side-nav--item--hover--label-color, props.get(core.$theme, --heading), 'color') !default;
+
+$item--active--bg-color:    props.def(--o-side-nav--item--active--bg-color, props.get(core.$theme, --border), 'color') !default;
+$item--active--label-color: props.def(--o-side-nav--item--active--label-color, props.get(core.$theme, --heading), 'color') !default;
+
+$item--disabled--label-color: props.def(--o-side-nav--item--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
+
+$item--key-focus--border-color:  props.def(--o-side-nav--item--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
+$item--key-focus--outline-color: props.def(--o-side-nav--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index 416e65e..1fcdf02 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -1,38 +1,26 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
 
-$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 materialize-at-root(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 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);
+        background-color: props.get(vars.$default);
         border-radius:    10em;
-        background-color: fn.color(--default);
-        vertical-align:   middle;
 
-        @each $theme in $themes {
-            @include iro.bem-is($theme) {
-                background-color: fn.color(--#{$theme});
+        @each $theme in map.keys(props.get(vars.$themes)) {
+            @include 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..6289145
--- /dev/null
+++ b/src/objects/_status-indicator.vars.scss
@@ -0,0 +1,26 @@
+@use 'sass:map';
+@use 'iro-sass/src/props';
+@use '../config';
+@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), 'color') !default;
+$primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text), 'color') !default;
+
+$themes-config: (
+    accent:   --accent,
+    positive: --positive,
+    negative: --negative,
+    warning:  --warning,
+) !default;
+
+$themes: props.def(--o-status-indicator, (), 'color');
+
+@each $theme, $key in $themes-config {
+    @if $theme != --base {
+        $themes: props.merge($themes, (
+            --#{$theme}: props.get(core.$theme, $key, --700),
+        ));
+    }
+}
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index e1f1132..8612d31 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -1,217 +1,183 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+@use '../core.vars' as core;
 
-@include iro.props-namespace('switch') {
-    @include iro.props-store((
-        --dims: (
-            --width:           fn.global-dim(--size --350),
-            --height:          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 'switch.vars';
+@use 'switch.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: (
-            --track-bg:      fn.global-color(--border),
-            --handle-border: fn.global-color(--text-mute-more),
-            --handle-bg:     fn.global-color(--base --50),
-    
-            --hover: (
-                --label:         fn.global-color(--heading),
-                --handle-border: fn.global-color(--text-mute),
-            ),
-            --accent: (
-                --handle-border: fn.global-color(--accent --900),
-    
-                --hover: (
-                    --handle-border: fn.global-color(--accent --1000),
-                ),
-            ),
-            --disabled: (
-                --label:         fn.global-color(--text-disabled),
-                --track-bg:      fn.global-color(--border),
-                --handle-border: fn.global-color(--border-strong),
-                --handle-bg:     fn.global-color(--base --50),
-            ),
-            --key-focus: (
-                --label:   fn.global-color(--focus --text),
-                --border:  fn.global-color(--focus --border),
-                --outline: fn.global-color(--focus --outline),
-            ),
-        ),
-    ));
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object(iro.props-namespace()) {
-        display:        inline-block;
+    @include bem.object('switch') {
         position:       relative;
+        display:        inline-block;
+        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));
-        padding-inline: fn.dim(--pad-i);
-        padding-block:  fn.dim(--pad-b);
+            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('indicator') {
+        @include bem.elem('indicator') {
             display:            inline-block;
             flex:               0 0 auto;
-            inline-size:        fn.dim(--width);
-            block-size:         fn.dim(--height);
-            margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--height) - fn.dim(--key-focus --border-offset));
-            transition:         background-color .2s ease;
-            border:             fn.dim(--key-focus --border-offset) solid transparent;
-            border-radius:      2em;
-            background-color:   fn.color(--track-bg);
-            background-clip:    padding-box;
+            inline-size:        props.get(vars.$inline-size);
+            block-size:         props.get(vars.$block-size);
+            margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset));
             vertical-align:     top;
+            background-color:   props.get(vars.$track-bg-color);
+            background-clip:    padding-box;
+            border:             props.get(vars.$key-focus--border-offset) solid transparent;
+            border-radius:      2em;
+            transition:         background-color .2s ease;
     
             &::after {
-                content:          '';
                 display:          block;
-                inline-size:      calc(fn.dim(--height) - 2 * fn.dim(--border));
-                block-size:       calc(fn.dim(--height) - 2 * fn.dim(--border));
+                inline-size:      calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
+                block-size:       calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
+                content:          '';
+                background-color: props.get(vars.$handle-bg-color);
+                border:           props.get(vars.$border-width) solid props.get(vars.$handle-border-color);
+                border-radius:    props.get(vars.$inline-size);
                 transition:       transform .2s ease;
-                border:           fn.dim(--border) solid fn.color(--handle-border);
-                border-radius:    fn.dim(--width);
-                background-color: fn.color(--handle-bg);
             }
         }
     
-        @include iro.bem-elem('label') {
-            margin-inline-start: fn.dim(--label-gap);
+        @include bem.elem('label') {
+            margin-inline-start: props.get(vars.$label-gap);
         }
     
-        @include iro.bem-elem('native') {
-            appearance:         none;
+        @include bem.elem('native') {
             position:           absolute;
-            z-index:            -1;
             inset-block-start:  0;
             inset-inline-start: 0;
+            z-index:            -1;
             inline-size:        100%;
             block-size:         100%;
-            margin:             0;
             padding:            0;
+            margin:             0;
             overflow:           hidden;
-            border-radius:      fn.dim(--rounding);
+            appearance:         none;
+            border-radius:      props.get(vars.$rounding);
     
             &:hover,
             &:focus-visible {
-                @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--hover --label);
+                @include bem.sibling-elem('label') {
+                    color: props.get(vars.$hover--label-color);
                 }
     
-                @include iro.bem-sibling-elem('indicator') {
+                @include bem.sibling-elem('indicator') {
                     &::after {
-                        border-color: fn.color(--hover --handle-border);
+                        border-color: props.get(vars.$hover--handle-border-color);
                     }
                 }
             }
     
             &:checked {
-                @include iro.bem-sibling-elem('indicator') {
-                    background-color: fn.color(--handle-border);
+                @include bem.sibling-elem('indicator') {
+                    background-color: props.get(vars.$handle-border-color);
     
                     &::after {
-                        transform:    translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0);
-                        border-color: fn.color(--handle-border);
+                        border-color: props.get(vars.$handle-border-color);
+                        transform:    translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0);
                     }
                 }
     
                 &:hover,
                 &:focus-visible {
-                    @include iro.bem-sibling-elem('indicator') {
-                        background-color: fn.color(--hover --handle-border);
+                    @include bem.sibling-elem('indicator') {
+                        background-color: props.get(vars.$hover--handle-border-color);
 
                         &::after {
-                            border-color: fn.color(--hover --handle-border);
+                            border-color: props.get(vars.$hover--handle-border-color);
                         }
                     }
                 }
             }
     
             &:disabled {
-                @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--disabled --label);
+                @include bem.sibling-elem('label') {
+                    color: props.get(vars.$disabled--label-color);
                 }
     
-                @include iro.bem-sibling-elem('indicator') {
-                    background-color: fn.color(--disabled --track-bg);
+                @include bem.sibling-elem('indicator') {
+                    background-color: props.get(vars.$disabled--track-bg-color);
     
                     &::after {
-                        border-color:     fn.color(--disabled --handle-border);
-                        background-color: fn.color(--disabled --handle-bg);
+                        background-color: props.get(vars.$disabled--handle-bg-color);
+                        border-color:     props.get(vars.$disabled--handle-border-color);
                     }
                 }
     
                 &:checked {
-                    @include iro.bem-sibling-elem('indicator') {
-                        background-color: fn.color(--disabled --handle-border);
+                    @include bem.sibling-elem('indicator') {
+                        background-color: props.get(vars.$disabled--handle-border-color);
     
                         &::after {
-                            border-color: fn.color(--disabled --handle-border);
+                            border-color: props.get(vars.$disabled--handle-border-color);
                         }
                     }
                 }
             }
     
             &:focus-visible {
-                @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--key-focus --label);
+                @include bem.sibling-elem('label') {
+                    color: props.get(vars.$key-focus--label-color);
                 }
 
-                @include iro.bem-sibling-elem('indicator') {
-                    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);
+                @include bem.sibling-elem('indicator') {
+                    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);
                 }
             }
         }
     
-        @include iro.bem-modifier('standalone') {
-            @include iro.bem-elem('indicator') {
+        @include bem.modifier('standalone') {
+            @include bem.elem('indicator') {
                 margin-block-start: 0;
             }
         }
     
-        @include iro.bem-modifier('accent') {
-            @include iro.bem-elem('native') {
+        @include bem.modifier('accent') {
+            @include bem.elem('native') {
                 &:checked {
-                    @include iro.bem-sibling-elem('indicator') {
-                        background-color: fn.color(--accent --handle-border);
+                    @include bem.sibling-elem('indicator') {
+                        background-color: props.get(vars.$accent--handle-border-color);
         
                         &::after {
-                            border-color: fn.color(--accent --handle-border);
+                            border-color: props.get(vars.$accent--handle-border-color);
                         }
                     }
         
                     &:hover,
                     &:focus-visible {
-                        @include iro.bem-sibling-elem('indicator') {
-                            background-color: fn.color(--accent --hover --handle-border);
+                        @include bem.sibling-elem('indicator') {
+                            background-color: props.get(vars.$accent--hover--handle-border-color);
     
                             &::after {
-                                border-color: fn.color(--accent --hover --handle-border);
+                                border-color: props.get(vars.$accent--hover--handle-border-color);
                             }
                         }
                     }
                 }
         
                 &:disabled {
-                    @include iro.bem-sibling-elem('label') {
-                        color: fn.color(--disabled --label);
+                    @include bem.sibling-elem('label') {
+                        color: props.get(vars.$disabled--label-color);
                     }
 
                     &:checked {
-                        @include iro.bem-sibling-elem('indicator') {
-                            background-color: fn.color(--disabled --handle-border);
+                        @include bem.sibling-elem('indicator') {
+                            background-color: props.get(vars.$disabled--handle-border-color);
 
                             &::after {
-                                border-color: fn.color(--disabled --handle-border);
+                                border-color: props.get(vars.$disabled--handle-border-color);
                             }
                         }
                     }
diff --git a/src/objects/_switch.vars.scss b/src/objects/_switch.vars.scss
new file mode 100644
index 0000000..85596af
--- /dev/null
+++ b/src/objects/_switch.vars.scss
@@ -0,0 +1,37 @@
+@use 'sass:map';
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$inline-size:     props.def(--o-switch--inline-size, props.get(core.$size--350)) !default;
+$block-size:      props.def(--o-switch--block-size, props.get(core.$size--200)) !default;
+$label-gap:       props.def(--o-switch--label-gap, props.get(core.$size--125)) !default;
+$border-width:    props.def(--o-switch--border-width, props.get(core.$border-width--medium)) !default;
+$pad-i:           props.def(--o-switch--pad-i, props.get(core.$size--65)) !default;
+$pad-b:           props.def(--o-switch--pad-b, props.get(core.$size--65)) !default;
+$rounding:        props.def(--o-switch--rounding, props.get(core.$rounding)) !default;
+$spacing-sibling: props.def(--o-switch--spacing-sibling, props.get(core.$size--300)) !default;
+
+$key-focus--border-width:  props.def(--o-switch--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
+$key-focus--border-offset: props.def(--o-switch--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
+$key-focus--outline-width: props.def(--o-switch--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+
+$track-bg-color:      props.def(--o-switch--track-bg-color, props.get(core.$theme, --border), 'color') !default;
+$handle-border-color: props.def(--o-switch--handle-border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+$handle-bg-color:     props.def(--o-switch--handle-bg-color, props.get(core.$theme, --base, --50), 'color') !default;
+
+$hover--label-color:         props.def(--o-switch--hover--label-color, props.get(core.$theme, --heading), 'color') !default;
+$hover--handle-border-color: props.def(--o-switch--hover--handle-border-color, props.get(core.$theme, --text-mute), 'color') !default;
+
+$accent--handle-border-color: props.def(--o-switch--accent--handle-border-color, props.get(core.$theme, --accent, --900), 'color') !default;
+
+$accent--hover--handle-border-color: props.def(--o-switch--accent--hover--handle-border-color, props.get(core.$theme, --accent, --1000), 'color') !default;
+
+$disabled--label-color:         props.def(--o-switch--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
+$disabled--track-bg-color:      props.def(--o-switch--disabled--track-bg-color, props.get(core.$theme, --border), 'color') !default;
+$disabled--handle-border-color: props.def(--o-switch--disabled--handle-border-color, props.get(core.$theme, --border-strong), 'color') !default;
+$disabled--handle-bg-color:     props.def(--o-switch--disabled--handle-bg-color, props.get(core.$theme, --base, --50), 'color') !default;
+
+$key-focus--label-color:   props.def(--o-switch--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
+$key-focus--border-color:  props.def(--o-switch--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
+$key-focus--outline-color: props.def(--o-switch--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
+
diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
new file mode 100644
index 0000000..131c832
--- /dev/null
+++ b/src/objects/_tabbar.scss
@@ -0,0 +1,113 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@forward 'tabbar.vars';
+@use 'tabbar.vars' as vars;
+
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.object('tabbar') {
+        min-inline-size: 0;
+        block-size:      props.get(vars.$block-size);
+        overflow:        hidden;
+
+        &::after {
+            display:            block;
+            block-size:         props.get(vars.$indicator--width);
+            margin-block-start: calc(-1 * props.get(vars.$indicator--width));
+            content:            '';
+            background-color:   props.get(vars.$railing--bg-color);
+        }
+
+        @include bem.elem('tabs') {
+            display:         flex;
+            block-size:      100%;
+            margin-inline:   calc(-.5 * props.get(vars.$spacing));
+            overflow-inline: auto;
+        }
+
+        @include bem.modifier('quiet') {
+            box-shadow: none;
+        }
+
+        @include bem.modifier('adapt') {
+            block-size: 100%;
+        }
+
+        @include bem.elem('tab') {
+            position:       relative;
+            display:        flex;
+            align-items:    center;
+            padding-inline: calc(.5 * props.get(vars.$spacing));
+            color:          props.get(vars.$tab--text-color);
+            white-space:    nowrap;
+
+            &::before {
+                position:          absolute;
+                inset-block-start: 50%;
+                inset-inline:      calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing));
+                z-index:           -10;
+                block-size:        1.5em;
+                content:           '';
+                border-radius:     props.get(vars.$rounding);
+                transform:         translateY(-50%);
+            }
+
+            &::after {
+                position:         absolute;
+                inset-block-end:  0;
+                inset-inline:     calc(.5 * props.get(vars.$spacing));
+                z-index:          10;
+                display:          none;
+                block-size:       props.get(vars.$indicator--width);
+                content:          '';
+                background-color: props.get(vars.$tab--selected--text-color);
+            }
+
+            &:link,
+            &:visited {
+                &:hover,
+                &:active,
+                &:focus-visible {
+                    color: props.get(vars.$tab--selected--text-color);
+                }
+
+                &:focus-visible {
+                    &::before {
+                        color:           props.get(vars.$key-focus--text-color);
+                        text-decoration: none;
+                        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);
+                    }
+                }
+            }
+
+            @include bem.is('selected') {
+                color: props.get(vars.$tab--selected--text-color);
+                
+                &::after {
+                    display: block;
+                }
+            }
+        }
+
+        @include bem.modifier('accent') {
+            @include bem.elem('tab') {
+                &::after {
+                    background-color: props.get(vars.$tab--accent--text-color);
+                }
+
+                @include bem.is('selected') {
+                    color: props.get(vars.$tab--accent--text-color);
+                }
+            }
+        }
+    }
+}
diff --git a/src/objects/_tabbar.vars.scss b/src/objects/_tabbar.vars.scss
new file mode 100644
index 0000000..f4486d6
--- /dev/null
+++ b/src/objects/_tabbar.vars.scss
@@ -0,0 +1,25 @@
+@use 'sass:map';
+@use 'sass:string';
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$block-size: props.def(--o-tabbar--block-size, props.get(core.$size--700)) !default;
+$rounding:   props.def(--o-tabbar--rounding, props.get(core.$rounding)) !default;
+$spacing:    props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default;
+$tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !default;
+
+$indicator--width: props.def(--o-tabbar--indicator--width, props.get(core.$border-width--medium)) !default; 
+
+$key-focus--border-width:  props.def(--o-tabbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
+$key-focus--border-offset: props.def(--o-tabbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
+$key-focus--outline-width: props.def(--o-tabbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+
+$tab--text-color:           props.def(--o-tabbar--tab--text-color, props.get(core.$theme, --text-mute), 'color') !default;
+$tab--selected--text-color: props.def(--o-tabbar--tab--selected--text-color, props.get(core.$theme, --heading), 'color') !default;
+$tab--accent--text-color:   props.def(--o-tabbar--tab--accent--text-color, props.get(core.$theme, --accent, --1100), 'color') !default;
+
+$railing--bg-color: props.def(--o-tabbar--railing--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+
+$key-focus--text-color:    props.def(--o-tabbar--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default;
+$key-focus--border-color:  props.def(--o-tabbar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
+$key-focus--outline-color: props.def(--o-tabbar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
index 2c9f65b..2b63737 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -1,78 +1,57 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-@use '../mixins' as mx;
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
 
-@include iro.props-namespace('table') {
-    @include iro.props-store((
-        --dims: (
-            --pad-i:    fn.global-dim(--size --175),
-            --pad-b:    fn.global-dim(--size --125),
-            --rounding: fn.global-dim(--rounding),
-            --border:   fn.global-dim(--border --thin),
+@forward 'table.vars';
+@use 'table.vars' as vars;
 
-            --sm: (
-                --pad-b: fn.global-dim(--size --75),
-            )
-        ),
-        --colors: (
-            --border:   fn.global-color(--border),
-            --heading:  fn.global-color(--heading),
-            --hover:    fn.global-color(--border-mute),
-            --active:   fn.global-color(--border),
-            --box: (
-                --bg:     fn.global-color(--base --50),
-                --hover:  fn.global-color(--bg-base),
-                --active: fn.global-color(--border-mute),
-            )
-        )
-    ));
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object(iro.props-namespace()) {
+    @include bem.object('table') {
         border-spacing:  0;
         border-collapse: separate;
 
-        @include iro.bem-modifier('fixed') {
+        @include bem.modifier('fixed') {
             table-layout: fixed;
         }
 
-        @include iro.bem-elem('head-cell') {
-            @include mx.set-font(--standard, (
-                --line-height: null,
-                --size:        fn.global-dim(--font-size --50),
-                --weight:      bold,
-                --transform:   uppercase,
-                --spacing:     .5px
-            ));
-
-            padding-inline: fn.dim(--pad-i);
-            padding-block:  fn.dim(--pad-b);
-            color:          fn.color(--heading);
+        @include bem.elem('head-cell') {
+            padding-block:  props.get(vars.$pad-b);
+            padding-inline: props.get(vars.$pad-i);
+            font-family:    props.get(vars.$heading--font-family);
+            font-size:      props.get(vars.$heading--font-size);
+            font-weight:    props.get(vars.$heading--font-weight);
+            color:          props.get(vars.$heading-color);
             text-align:     start;
+            text-transform: props.get(vars.$heading--text-transform);
+            letter-spacing: props.get(vars.$heading--letter-spacing);
         }
 
-        @include iro.bem-elem('cell') {
-            padding-inline:           fn.dim(--pad-i);
-            padding-block:            fn.dim(--pad-b);
-            border-width:             0;
-            border-block-start-width: fn.dim(--border);
+        @include bem.elem('cell') {
+            padding-block:            props.get(vars.$pad-b);
+            padding-inline:           props.get(vars.$pad-i);
+            border-color:             props.get(vars.$border-color);
             border-style:             solid;
-            border-color:             fn.color(--border);
+            border-width:             0;
+            border-block-start-width: props.get(vars.$border-width);
 
-            @include iro.bem-modifier('divider') {
-                border-inline-end-width: fn.dim(--border);
+            @include bem.modifier('divider') {
+                border-inline-end-width: props.get(vars.$border-width);
             }
         }
 
-        @include iro.bem-elem('row') {
+        @include bem.elem('row') {
             &:last-child {
-                @include iro.bem-elem('cell') {
-                    border-block-end-width: fn.dim(--border);
+                @include bem.elem('cell') {
+                    border-block-end-width: props.get(vars.$border-width);
                 }
             }
         }
 
-        @include iro.bem-modifier('flush') {
-            @include iro.bem-elem('head-cell', 'cell') {
+        @include bem.modifier('flush') {
+            @include bem.elem('head-cell', 'cell') {
                 &:first-child {
                     padding-inline-start: 0;
                 }
@@ -83,85 +62,85 @@
             }
         }
 
-        @include iro.bem-modifier('box') {
-            @include iro.bem-elem('cell') {
-                background-color: fn.color(--box --bg);
+        @include bem.modifier('box') {
+            @include bem.elem('cell') {
+                background-color: props.get(vars.$box--bg-color);
             
                 &:first-child {
-                    border-inline-start-width: fn.dim(--border);
+                    border-inline-start-width: props.get(vars.$border-width);
                 }
             
                 &:last-child {
-                    border-inline-end-width: fn.dim(--border);
+                    border-inline-end-width: props.get(vars.$border-width);
                 }
             }
     
-            @include iro.bem-elem('row') {
+            @include bem.elem('row') {
                 &:first-child {
-                    @include iro.bem-elem('cell') {
+                    @include bem.elem('cell') {
                         &:first-child {
-                            border-start-start-radius: fn.dim(--rounding);
+                            border-start-start-radius: props.get(vars.$rounding);
                         }
             
                         &:last-child {
-                            border-start-end-radius: fn.dim(--rounding);
+                            border-start-end-radius: props.get(vars.$rounding);
                         }
                     }
                 }
     
                 &:last-child {
-                    @include iro.bem-elem('cell') {
+                    @include bem.elem('cell') {
                         &:first-child {
-                            border-end-start-radius: fn.dim(--rounding);
+                            border-end-start-radius: props.get(vars.$rounding);
                         }
             
                         &:last-child {
-                            border-end-end-radius: fn.dim(--rounding);
+                            border-end-end-radius: props.get(vars.$rounding);
                         }
                     }
                 }
             }
         }
 
-        @include iro.bem-modifier('interactive') {
-            @include iro.bem-elem('row') {
-                @include iro.bem-elem('cell') {
+        @include bem.modifier('interactive') {
+            @include bem.elem('row') {
+                @include bem.elem('cell') {
                     cursor: pointer;
                 }
 
                 &:hover {
-                    @include iro.bem-elem('cell') {
-                        background-color: fn.color(--hover);
+                    @include bem.elem('cell') {
+                        background-color: props.get(vars.$hover--bg-color);
                     }
                 }
     
                 &:active {
-                    @include iro.bem-elem('cell') {
-                        background-color: fn.color(--active);
+                    @include bem.elem('cell') {
+                        background-color: props.get(vars.$active--bg-color);
                     }
                 }
             }
 
-            @include iro.bem-modifier('box') {
-                @include iro.bem-elem('row') {
+            @include bem.modifier('box') {
+                @include bem.elem('row') {
                     &:hover {
-                        @include iro.bem-elem('cell') {
-                            background-color: fn.color(--box --hover);
+                        @include bem.elem('cell') {
+                            background-color: props.get(vars.$box--hover--bg-color);
                         }
                     }
         
                     &:active {
-                        @include iro.bem-elem('cell') {
-                            background-color: fn.color(--box --active);
+                        @include bem.elem('cell') {
+                            background-color: props.get(vars.$box--active--bg-color);
                         }
                     }
                 }
             }
         }
 
-        @include iro.bem-modifier('sm') {
-            @include iro.bem-elem('head-cell', 'cell') {
-                padding-block: fn.dim(--sm --pad-b);
+        @include bem.modifier('sm') {
+            @include bem.elem('head-cell', 'cell') {
+                padding-block: props.get(vars.$pad-b--sm);
             }
         }
     }
diff --git a/src/objects/_table.vars.scss b/src/objects/_table.vars.scss
new file mode 100644
index 0000000..d1d53d7
--- /dev/null
+++ b/src/objects/_table.vars.scss
@@ -0,0 +1,25 @@
+@use 'sass:map';
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$pad-i:        props.def(--o-table--pad-i, props.get(core.$size--175)) !default;
+$pad-b:        props.def(--o-table--pad-b, props.get(core.$size--125)) !default;
+$rounding:     props.def(--o-table--rounding, props.get(core.$rounding)) !default;
+$border-width: props.def(--o-table--border-width, props.get(core.$border-width--thin)) !default;
+
+$heading--font-family:    props.def(--o-table--heading--font-family, props.get(core.$font--standard--family)) !default;
+$heading--font-size:      props.def(--o-table--heading--font-size, props.get(core.$font-size--50)) !default;
+$heading--font-weight:    props.def(--o-table--heading--font-weight, bold) !default;
+$heading--text-transform: props.def(--o-table--heading--text-transform, uppercase) !default;
+$heading--letter-spacing: props.def(--o-table--heading--letter-spacing, .5px) !default;
+
+$pad-b--sm: props.def(--o-table--sm--pad-b, props.get(core.$size--75)) !default;
+
+$border-color:     props.def(--o-table--border-color, props.get(core.$theme, --border), 'color') !default;
+$heading-color:    props.def(--o-table--heading-color, props.get(core.$theme, --heading), 'color') !default;
+$hover--bg-color:  props.def(--o-table--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+$active--bg-color: props.def(--o-table--active--bg-color, props.get(core.$theme, --border), 'color') !default;
+
+$box--bg-color:         props.def(--o-table--box--bg-color, props.get(core.$theme, --base, --50), 'color') !default;
+$box--hover--bg-color:  props.def(--o-table--box--hover--bg-color, props.get(core.$theme, --bg-base), 'color') !default;
+$box--active--bg-color: props.def(--o-table--box--active--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index 6611ea6..6c0e7d2 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -1,210 +1,162 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
 
-@mixin invalid {
-    $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
+@forward 'text-field.vars';
+@use 'text-field.vars' as vars;
+
+@mixin -invalid {
+    $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
     
-    @include iro.bem-sibling-elem('bg') {
+    @include bem.sibling-elem('bg') {
         inset-block:   $focus-border-offset;
         inset-inline:  $focus-border-offset;
-        border:        fn.dim(--focus --border) solid fn.color(--error --border);
-        border-radius: calc(fn.dim(--rounding) - $focus-border-offset);
+        border:        props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color);
+        border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
     }
 
     &:hover {
-        @include iro.bem-sibling-elem('bg') {
-            border-color: fn.color(--error --hover --border);
+        @include bem.sibling-elem('bg') {
+            border-color: props.get(vars.$error--hover--border-color);
         }
     }
 
     &:focus {
-        @include iro.bem-sibling-elem('bg') {
-            border-color: fn.color(--error --focus --border);
+        @include bem.sibling-elem('bg') {
+            border-color: props.get(vars.$error--focus--border-color);
         }
     }
 }
 
-@mixin keyboard-focus {
-    @include iro.bem-sibling-elem('bg') {
-        border-color:   fn.color(--key-focus --border);
-        outline:        fn.color(--key-focus --outline) solid fn.dim(--key-focus --border);
-        //outline-offset: fn.dim(--focus --border);
+@mixin -keyboard-focus {
+    @include bem.sibling-elem('bg') {
+        border-color:   props.get(vars.$key-focus--border-color);
+        outline:        props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width);
+        //outline-offset: props.get(vars.$focus --border);
     }
 }
 
-@include iro.props-namespace('text-field') {
-    @include iro.props-store((
-        --dims: (
-            --line-height: 1.4,
-            --pad-i:       fn.global-dim(--size --125),
-            --pad-b:       fn.global-dim(--size --125),
-            --border:      fn.global-dim(--border --thin),
-            --rounding:    fn.global-dim(--rounding),
-
-            --extended: (
-                --pad:     fn.global-dim(--size --50),
-            ),
-
-            --focus: (
-                --border:  fn.global-dim(--border --medium),
-            ),
-            
-            --key-focus: (
-                --border: fn.global-dim(--key-focus --outline),
-            ),
-        ),
-        --colors: (
-            --bg:          fn.global-color(--base --50),
-            --placeholder: fn.global-color(--text-mute-more),
-            --text:        fn.global-color(--text),
-            --border:      fn.global-color(--border-strong),
-    
-            --hover: (
-                --border: fn.global-color(--text-mute-more),
-            ),
-            --focus: (
-                --border: fn.global-color(--focus --border),
-            ),
-            --key-focus: (
-                --border:  fn.global-color(--focus --border),
-                --outline: fn.global-color(--focus --outline),
-            ),
-            --error: (
-                --border: fn.global-color(--negative --700),
-    
-                --hover: (
-                    --border: fn.global-color(--negative --900),
-                ),
-                --focus: (
-                    --border: fn.global-color(--negative --900),
-                ),
-            ),
-            --disabled: (
-                --bg:          fn.global-color(--border-mute),
-                --placeholder: fn.global-color(--text-disabled),
-                --text:        fn.global-color(--text-disabled),
-                --border:      fn.global-color(--border-mute),
-            ),
-        ),
-    ));
-
-    @include iro.bem-object(iro.props-namespace()) {
-        $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.object('text-field') {
+        $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
         
         position:         relative;
         min-inline-size:  0;
-        border-radius:    fn.dim(--rounding);
-        background-color: fn.color(--bg);
+        background-color: props.get(vars.$bg-color);
+        border-radius:    props.get(vars.$rounding);
 
-        @include iro.bem-elem('bg') {
-            display:        block;
+        @include bem.elem('bg') {
             position:       absolute;
             inset-block:    0;
             inset-inline:   0;
-            border:         fn.dim(--border) solid fn.color(--border);
-            border-radius:  fn.dim(--rounding);
+            display:        block;
             pointer-events: none;
+            border:         props.get(vars.$border-width) solid props.get(vars.$border-color);
+            border-radius:  props.get(vars.$rounding);
         }
 
-        @include iro.bem-elem('native') {
+        @include bem.elem('native') {
             box-sizing:       border-box;
             inline-size:      100%;
-            padding-block:    calc(fn.dim(--pad-b) - .5em * (fn.dim(--line-height) - 1));
-            padding-inline:   fn.dim(--pad-i);
-            border:           1px solid transparent;
-            background-color: transparent;
-            color:            fn.color(--text);
+            padding-block:    calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1));
+            padding-inline:   props.get(vars.$pad-i);
             font:             inherit;
-            line-height:      fn.dim(--line-height);
-            resize:           none;
+            line-height:      props.get(vars.$line-height);
+            color:            props.get(vars.$text-color);
             appearance:       none;
+            resize:           none;
+            background-color: transparent;
+            border:           1px solid transparent;
 
             &::placeholder {
-                opacity:    1;
-                color:      fn.color(--placeholder);
                 font-style: italic;
+                color:      props.get(vars.$placeholder-color);
+                opacity:    1;
             }
 
             &:hover {
-                @include iro.bem-sibling-elem('bg') {
-                    border-color: fn.color(--hover --border);
+                @include bem.sibling-elem('bg') {
+                    border-color: props.get(vars.$hover--border-color);
                 }
             }
 
             &:focus {
                 outline: 0;
 
-                @include iro.bem-sibling-elem('bg') {
+                @include bem.sibling-elem('bg') {
                     inset-block:   $focus-border-offset;
                     inset-inline:  $focus-border-offset;
-                    border:        fn.dim(--focus --border) solid fn.color(--focus --border);
-                    border-radius: calc(fn.dim(--rounding) - $focus-border-offset);
+                    border:        props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color);
+                    border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
                 }
             }
 
             &:invalid {
-                @include invalid;
+                @include -invalid;
             }
 
             &:focus-visible,
             &:invalid:focus-visible {
-                @include keyboard-focus;
+                @include -keyboard-focus;
             }
         }
 
-        @include iro.bem-modifier('extended') {
-            padding: fn.dim(--extended --pad);
+        @include bem.modifier('extended') {
+            padding: props.get(vars.$extended--pad);
 
-            @include iro.bem-multi('&', 'elem' 'bg') {
-                border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad));
+            @include bem.multi('&', 'elem' 'bg') {
+                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad));
             }
 
-            @include iro.bem-elem('native') {
+            @include bem.elem('native') {
                 &:focus {
-                    @include iro.bem-sibling-elem('bg') {
-                        border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad) - $focus-border-offset);
+                    @include bem.sibling-elem('bg') {
+                        border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset);
                     }
                 }
             }
         }
 
-        @include iro.bem-is('invalid') {
-            @include iro.bem-elem('native') {
-                @include invalid;
+        @include bem.is('invalid') {
+            @include bem.elem('native') {
+                @include -invalid;
 
                 &:focus-visible {
-                    @include keyboard-focus;
+                    @include -keyboard-focus;
                 }
             }
         }
 
-        @include iro.bem-is('disabled') {
-            background-color: fn.color(--disabled --bg);
+        @include bem.is('disabled') {
+            background-color: props.get(vars.$disabled--bg-color);
 
-            @include iro.bem-elem('native') {
-                color: fn.color(--disabled --text);
+            @include bem.elem('native') {
+                color: props.get(vars.$disabled--text-color);
 
                 &::placeholder {
-                    color: fn.color(--disabled --placeholder);
+                    color: props.get(vars.$disabled--placeholder-color);
                 }
             }
 
-            @include iro.bem-elem('bg') {
-                border-color: fn.color(--disabled --border);
+            @include bem.elem('bg') {
+                border-color: props.get(vars.$disabled--border-color);
             }
 
-            @include iro.bem-is('invalid') {
-                @include iro.bem-elem('native') {
-                    @include iro.bem-sibling-elem('bg') {
-                        border-color: fn.color(--disabled --border);
+            @include bem.is('invalid') {
+                @include bem.elem('native') {
+                    @include bem.sibling-elem('bg') {
+                        border-color: props.get(vars.$disabled--border-color);
                     }
                 }
             }
 
-            @include iro.bem-elem('native') {
+            @include bem.elem('native') {
                 &:invalid {
-                    @include iro.bem-sibling-elem('bg') {
-                        border-color: fn.color(--disabled --border);
+                    @include bem.sibling-elem('bg') {
+                        border-color: props.get(vars.$disabled--border-color);
                     }
                 }
             }
diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss
new file mode 100644
index 0000000..833eacb
--- /dev/null
+++ b/src/objects/_text-field.vars.scss
@@ -0,0 +1,38 @@
+@use 'sass:map';
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$line-height:  props.def(--o-text-field--line-height, 1.4) !default;
+$pad-i:        props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default;
+$pad-b:        props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default;
+$border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default;
+$rounding:     props.def(--o-text-field--rounding, props.get(core.$rounding)) !default;
+
+$extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default;
+
+$focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$border-width--medium)) !default;
+
+$key-focus--border-width: props.def(--o-text-field--key-focus--border-width, props.get(core.$key-focus--outline-width)) !default;
+
+$bg-color:          props.def(--o-text-field--bg-color, props.get(core.$theme, --base, --50), 'color') !default;
+$placeholder-color: props.def(--o-text-field--placeholder-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+$text-color:        props.def(--o-text-field--text-color, props.get(core.$theme, --text), 'color') !default;
+$border-color:      props.def(--o-text-field--border-color, props.get(core.$theme, --border-strong), 'color') !default;
+
+$hover--border-color: props.def(--o-text-field--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+
+$focus--border-color: props.def(--o-text-field--focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
+
+$key-focus--border-color:  props.def(--o-text-field--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
+$key-focus--outline-color: props.def(--o-text-field--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
+
+$error--border-color: props.def(--o-text-field--error--border-color, props.get(core.$theme, --negative, --700), 'color') !default;
+
+$error--hover--border-color: props.def(--o-text-field--error--hover--border-color, props.get(core.$theme, --negative, --900), 'color') !default;
+
+$error--focus--border-color: props.def(--o-text-field--error--focus--border-color, props.get(core.$theme, --negative, --900), 'color') !default;
+
+$disabled--bg-color:          props.def(--o-text-field--disabled--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+$disabled--placeholder-color: props.def(--o-text-field--disabled--placeholder-color, props.get(core.$theme, --text-disabled), 'color') !default;
+$disabled--text-color:        props.def(--o-text-field--disabled--text-color, props.get(core.$theme, --text-disabled), 'color') !default;
+$disabled--border-color:      props.def(--o-text-field--disabled--border-color, props.get(core.$theme, --border-mute), 'color') !default;
diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss
new file mode 100644
index 0000000..73a8cb0
--- /dev/null
+++ b/src/objects/_thumbnail.scss
@@ -0,0 +1,104 @@
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@forward 'thumbnail.vars';
+@use 'thumbnail.vars' as vars;
+
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.object('thumbnail') {
+        position:       relative;
+        display:        block;
+        flex:           0 0 auto;
+        inline-size:    props.get(vars.$size);
+        block-size:     props.get(vars.$size);
+        overflow:       hidden;
+        border-radius:  props.get(vars.$rounding);
+        outline:        props.get(vars.$border-color) solid props.get(vars.$border-width);
+        outline-offset: calc(-1 * props.get(vars.$border-width));
+        opacity:       .75;
+
+        &:hover,
+        &:active,
+        &:focus-visible {
+            outline-color: props.get(vars.$hover--border-color);
+            opacity:       1;
+        }
+
+        @include bem.is('selected') {
+            $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width));
+
+            margin:        $focus-border-offset;
+            border:        props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color);
+            border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
+            outline:       none;
+            opacity:       1;
+        }
+
+        @include bem.elem('image') {
+            position:           absolute;
+            inset-block-start:  0;
+            inset-inline-start: 0;
+            display:            block;
+            inline-size:        100%;
+            block-size:         100%;
+            object-fit:         cover;
+            object-position:    center center;
+        }
+
+        @include bem.elem('icon') {
+            position:           absolute;
+            inset-block-start:  50%;
+            inset-inline-start: 50%;
+            transform:          translate(-50%, -50%);
+        }
+
+        &:focus-visible {
+            $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset));
+
+            margin:         $focus-border-offset;
+            border:         props.get(vars.$key-focus--border-offset) solid transparent;
+            border-radius:  calc(props.get(vars.$rounding) - $focus-border-offset);
+            outline:        props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+            outline-offset: 0;
+            box-shadow:
+                0
+                0
+                0
+                calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))
+                props.get(vars.$key-focus--outline-color);
+        }
+
+        @each $theme in map.keys(props.get(vars.$static-themes)) {
+            @include bem.modifier(string.slice($theme, 3)) {
+                outline-color: props.get(vars.$static-themes, $theme, --border);
+
+                &:hover,
+                &:active,
+                &:focus-visible {
+                    outline-color: props.get(vars.$static-themes, $theme, --hover, --border);
+                }
+    
+                @include bem.is('selected') {
+                    border-color: props.get(vars.$static-themes, $theme, --selected, --border);
+                }
+
+                &:focus-visible {
+                    border-color:  transparent;
+                    outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border);
+                    box-shadow: 
+                        0
+                        0
+                        0
+                        calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))
+                        props.get(vars.$static-themes, $theme, --key-focus, --outline);
+                }
+            }
+        }
+    }
+}
diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss
new file mode 100644
index 0000000..ba8cebe
--- /dev/null
+++ b/src/objects/_thumbnail.vars.scss
@@ -0,0 +1,51 @@
+@use 'sass:map';
+@use 'sass:string';
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$size:         props.def(--o-thumbnail--size, props.get(core.$size--700)) !default;
+$rounding:     props.def(--o-thumbnail--rounding, props.get(core.$rounding)) !default;
+$spacing:      props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default;
+$border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default;
+
+$selected--border-width: props.def(--o-thumbnail--selected--border-width, props.get(core.$border-width--medium)) !default;
+
+$key-focus--border-width:  props.def(--o-thumbnail--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
+$key-focus--border-offset: props.def(--o-thumbnail--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
+$key-focus--outline-width: props.def(--o-thumbnail--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+
+$border-color: props.def(--o-thumbnail--border-color, props.get(core.$theme, --border-strong), 'color') !default;
+
+$hover--border-color: props.def(--o-thumbnail--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+
+$selected--border-color: props.def(--o-thumbnail--selected--border-color, props.get(core.$theme, --heading), 'color') !default;
+
+$key-focus--border-color:  props.def(--o-thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
+$key-focus--outline-color: props.def(--o-thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
+
+$size--md: props.def(--o-thumbnail--size, props.get(core.$size--600), 'md') !default;
+
+$static-themes: props.def(--o-thumbnail, (), 'color');
+
+@each $theme in map.keys(props.get(core.$transparent-colors)) {
+    $thumbnail-theme: --static-#{string.slice($theme, 3)};
+
+    $static-themes: props.merge($static-themes, (
+        $thumbnail-theme: (
+            --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),
+            ),
+        )
+    ));
+}
diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss
index f6a13fe..91a7785 100644
--- a/src/scopes/_blockquotes.scss
+++ b/src/scopes/_blockquotes.scss
@@ -1,33 +1,25 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
 
-@include iro.props-namespace('blockquotes') {
-    @include iro.props-store((
-        --dims: (
-            --indent:    fn.global-dim(--list --indent),
-            --margin-bs: fn.global-dim(--paragraph --margin-bs),
-            --border:    fn.global-dim(--border --thick),
+@forward 'blockquotes.vars';
+@use 'blockquotes.vars' as vars;
 
-            --compact: (
-                --indent: fn.global-dim(--list --compact-indent),
-            ),
-        ),
-        --colors: (
-            --border: fn.global-color(--border),
-        )
-    ));
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-scope(iro.props-namespace()) {
+    @include bem.scope('blockquotes') {
         blockquote {
-            margin-block:         fn.dim(--margin-bs);
+            padding-inline-start: calc(props.get(vars.$indent) - props.get(vars.$border-width));
+            margin-block:         props.get(vars.$margin-bs) 0;
             margin-inline:        1px 0;
-            padding-inline-start: calc(fn.dim(--indent) - fn.dim(--border));
-            border-inline-start:  fn.dim(--border) solid fn.color(--border);
+            border-inline-start:  props.get(vars.$border-width) solid props.get(vars.$border-color);
         }
 
-        @include iro.bem-modifier('compact') {
+        @include bem.modifier('compact') {
             blockquote {
-                padding-inline-start: calc(fn.dim(--compact --indent) - fn.dim(--border));
+                padding-inline-start: calc(props.get(vars.$compact--indent) - props.get(vars.$border-width));
             }
         }
     }
diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss
new file mode 100644
index 0000000..6aae242
--- /dev/null
+++ b/src/scopes/_blockquotes.vars.scss
@@ -0,0 +1,11 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+@use './implicit.vars' as implicit;
+
+$indent:       props.def(--s-blockquotes--indent, props.get(core.$list--indent)) !default;
+$margin-bs:    props.def(--s-blockquotes--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
+$border-width: props.def(--s-blockquotes--border-width, props.get(core.$border-width--thick)) !default;
+
+$compact--indent: props.def(--s-blockquotes--compact--indent, props.get(core.$list--compact-indent)) !default;
+
+$border-color: props.def(--s-blockquotes--border-color, props.get(core.$theme, --border), 'color') !default;
diff --git a/src/scopes/_body.scss b/src/scopes/_body.scss
new file mode 100644
index 0000000..6d32212
--- /dev/null
+++ b/src/scopes/_body.scss
@@ -0,0 +1,59 @@
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+
+@forward 'body.vars';
+@use 'body.vars' as vars;
+
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.scope('body') {
+        font-size: props.get(vars.$font-size);
+        line-height: props.get(vars.$line-height);
+
+        strong {
+            color: props.get(vars.$strong--text-color);
+        }
+
+        p,
+        ul,
+        ol {
+            max-inline-size: props.get(vars.$paragraph--max-inline-size);
+            margin-block-start: props.get(vars.$paragraph--margin-bs);
+        }
+
+        ul,
+        ol {
+            box-sizing: border-box;
+        }
+
+        img {
+            display:            block;
+            inline-size:        auto;
+            max-inline-size:    100%;
+            block-size:         auto;
+            max-block-size:     props.get(vars.$img--max-block-size);
+            margin-block-start: props.get(vars.$paragraph--margin-bs);
+        }
+
+        figure {
+            margin-block-start: props.get(vars.$paragraph--margin-bs);
+
+            img {
+                margin-block: 0;
+            }
+        }
+
+        hr {
+            margin-block: calc(2 * props.get(vars.$paragraph--margin-bs));
+        }
+
+        table,
+        pre,
+        blockquote {
+            margin-block-start: props.get(vars.$paragraph--margin-bs);
+        }
+    } 
+}
diff --git a/src/scopes/_body.vars.scss b/src/scopes/_body.vars.scss
new file mode 100644
index 0000000..1de2cfd
--- /dev/null
+++ b/src/scopes/_body.vars.scss
@@ -0,0 +1,12 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+@use '../layouts/container.vars' as container;
+
+$font-size:                  props.def(--s-body--font-size, props.get(core.$font-size--150)) !default;
+$line-height:                props.def(--s-body--line-height, calc(props.get(core.$font--standard--line-height) + .1)) !default;
+$paragraph--margin-bs:       props.def(--s-body--paragraph--margin-bs, props.get(core.$size--300)) !default;
+$paragraph--max-inline-size: props.def(--s-body--paragraph--max-inline-size, props.get(container.$fixed)) !default;
+$img--max-block-size:        props.def(--s-body--img--max-block-size, none) !default;
+
+$strong--text-color: props.def(--s-body--strong--text-color, props.get(core.$theme, --heading), 'color') !default;
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss
index 4df711b..9b2a63d 100644
--- a/src/scopes/_code.scss
+++ b/src/scopes/_code.scss
@@ -1,58 +1,39 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
 
-@include iro.props-namespace('code') {
-    @include iro.props-store((
-        --dims: (
-            --inline: (
-                --pad-i:    fn.global-dim(--size --50),
-                --pad-b:    fn.global-dim(--size --10),
-                --rounding: fn.global-dim(--rounding),
-            ),
-            --block: (
-                --pad-i:      fn.global-dim(--size --150),
-                --pad-b:      fn.global-dim(--size --85),
-                --margin-bs:  fn.global-dim(--paragraph --margin-bs),
-                --rounding:   fn.global-dim(--rounding),
-            )
-        ),
-        --colors: (
-            --inline: (
-                --fg: fn.global-color(--red --1200),
-                --bg: fn.global-color(--red --200),
-            ),
-            --block: (
-                --fg: fn.global-color(--text),
-                --bg: fn.global-color(--base --50),
-            )
-        )
-    ));
+@forward 'code.vars';
+@use 'code.vars' as vars;
 
-    @include iro.bem-scope(iro.props-namespace()) {
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.scope('code') {
         code {
-            padding-block:    fn.dim(--inline --pad-b);
-            padding-inline:   fn.dim(--inline --pad-i);
-            border-radius:    fn.dim(--inline --rounding);
-            background-color: fn.color(--inline --bg);
-            color:            fn.color(--inline --fg);
+            padding-block:    props.get(vars.$inline--pad-b);
+            padding-inline:   props.get(vars.$inline--pad-i);
+            color:            props.get(vars.$inline--fg);
+            background-color: props.get(vars.$inline--bg);
+            border-radius:    props.get(vars.$inline--rounding);
         }
 
         pre {
-            margin-block:     fn.dim(--block --margin-bs) 0;
+            padding-block:    props.get(vars.$block--pad-b);
+            padding-inline:   props.get(vars.$block--pad-i);
+            margin-block:     props.get(vars.$block--margin-bs) 0;
             margin-inline:    0;
-            padding-block:    fn.dim(--block --pad-b);
-            padding-inline:   fn.dim(--block --pad-i);
-            border-radius:    fn.dim(--block --rounding);
-            background-color: fn.color(--block --bg);
-            color:            fn.color(--block --fg);
+            color:            props.get(vars.$block--fg);
+            background-color: props.get(vars.$block--bg);
+            border-radius:    props.get(vars.$block--rounding);
 
             code {
                 display:           inline-block;
-                margin-inline-end: fn.dim(--block --pad-i);
                 padding:           0;
-                border-radius:     0;
-                background-color:  transparent;
+                margin-inline-end: props.get(vars.$block--pad-i);
                 color:             currentColor;
+                background-color:  transparent;
+                border-radius:     0;
             }
         }
     }
diff --git a/src/scopes/_code.vars.scss b/src/scopes/_code.vars.scss
new file mode 100644
index 0000000..8a040c2
--- /dev/null
+++ b/src/scopes/_code.vars.scss
@@ -0,0 +1,18 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+@use './implicit.vars' as implicit;
+
+$inline--pad-i:    props.def(--s-code--inline--pad-i, props.get(core.$size--50)) !default;
+$inline--pad-b:    props.def(--s-code--inline--pad-b, props.get(core.$size--10)) !default;
+$inline--rounding: props.def(--s-code--inline--rounding, props.get(core.$rounding)) !default;
+
+$block--pad-i:     props.def(--s-code--block--pad-i, props.get(core.$size--150)) !default;
+$block--pad-b:     props.def(--s-code--block--pad-b, props.get(core.$size--85)) !default;
+$block--margin-bs: props.def(--s-code--block--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
+$block--rounding:  props.def(--s-code--block--rounding, props.get(core.$rounding)) !default;
+
+$inline--fg: props.def(--s-code--inline--fg, props.get(core.$theme, --heading), 'color') !default;
+$inline--bg: props.def(--s-code--inline--bg, props.get(core.$theme, --base, --200), 'color') !default;
+
+$block--fg: props.def(--s-code--block--fg, props.get(core.$theme, --text), 'color') !default;
+$block--bg: props.def(--s-code--block--bg, props.get(core.$theme, --base, --50), 'color') !default;
diff --git a/src/scopes/_figures.scss b/src/scopes/_figures.scss
new file mode 100644
index 0000000..981a8b6
--- /dev/null
+++ b/src/scopes/_figures.scss
@@ -0,0 +1,21 @@
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../objects/figure.vars' as figure;
+
+@mixin styles {
+    @include bem.scope('figures') {
+        figcaption {
+            padding-block:    props.get(figure.$pad-b);
+            font-size:        props.get(figure.$font-size);
+            color:            props.get(figure.$text-color);
+            border-block-end: props.get(figure.$border-width) solid props.get(figure.$border-color);
+
+            &::before {
+                display:       block;
+                margin-block:  -100em 100em;
+                content:       '';
+            }
+        }
+    }
+}
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index 9593792..32559cd 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -1,114 +1,65 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-@use '../mixins' as mx;
-@use 'include-media/dist/include-media' as media;
-
-@include iro.props-namespace('headings') {
-    @include iro.bem-scope(iro.props-namespace()) {
+@use 'sass:map';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../objects/heading.vars' as heading;
+
+@mixin styles {
+    /* stylelint-disable-next-line scss/dollar-variable-pattern */
+    $-size-map: (
+        xs: h6,
+        sm: h5,
+        md: h4,
+        lg: h3,
+        xl: h2,
+        xxl: h1,
+    );
+
+    @include bem.scope('headings') {
         h1,
         h2,
         h3,
         h4,
         h5,
         h6 {
-            @include mx.set-font(--headline);
-
-            display:        block;
-            transform:      translateX(-.06em);
-            letter-spacing: normal;
-            text-transform: none;
-        }
-
-
-        h1 {
-            @include mx.heading-strong(--xxl);
-        }
-
-        h2 {
-            @include mx.heading-strong(--xl);
-        }
-
-        h3 {
-            @include mx.heading-medium(--lg);
-        }
-
-        h4 {
-            @include mx.heading-medium(--md);
-        }
-
-        h5 {
-            @include mx.heading-faint(--sm);
-        }
-
-        h6 {
-            @include mx.heading-faint(--xs);
+            display:               block;
+            margin-block-start:    props.get(heading.$margin-bs);
+            font-family:           props.get(heading.$font-family);
+            font-weight:           props.get(heading.$font-weight);
+            font-feature-settings: props.get(heading.$feature-settings);
+            line-height:           props.get(heading.$line-height);
+            text-transform:        none;
+            letter-spacing:        normal;
+            transform:             translateX(props.get(heading.$offset));
         }
 
-        @include iro.bem-elem('highlight') {
-            background-image: linear-gradient(
-                to top,
-                transparent .15em,
-                fn.foreign-color(--heading, --bg) .15em,
-                fn.foreign-color(--heading, --bg) .6em,
-                transparent .6em
-            );
+        @include bem.elem('highlight') {
+            background-image: linear-gradient(to top,
+            transparent .15em,
+            props.get(heading.$bg-color) .15em,
+            props.get(heading.$bg-color) .6em,
+            transparent .6em);
         }
 
-        @include iro.bem-modifier('display') {
-            h1,
-            h2,
-            h3,
-            h4,
-            h5,
-            h6 {
-                @include mx.set-font(--headline);
+        @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$sizes {
+            #{map.get($-size-map, $mod)} {
+                font-family:           props.get($font-family);
+                font-size:             props.get($font-size);
+                font-weight:           props.get($font-weight);
+                font-feature-settings: props.get($feature-settings);
+                line-height:           props.get($line-height);
+                letter-spacing:        props.get($letter-spacing);
             }
+        }
 
-            h1 {
-                @include mx.heading-strong(--display --xxl);
-
-                @include media.media('<=md') {
-                    @include mx.heading-strong(--display-sm --xxl);
-                }
-            }
-    
-            h2 {
-                @include mx.heading-strong(--display --xl);
-
-                @include media.media('<=md') {
-                    @include mx.heading-strong(--display-sm --xl);
-                }
-            }
-    
-            h3 {
-                @include mx.heading-strong(--display --lg);
-
-                @include media.media('<=md') {
-                    @include mx.heading-strong(--display-sm --lg);
-                }
-            }
-    
-            h4 {
-                @include mx.heading-strong(--display --md);
-
-                @include media.media('<=md') {
-                    @include mx.heading-strong(--display-sm --md);
-                }
-            }
-
-            h5 {
-                @include mx.heading-medium(--display --sm);
-
-                @include media.media('<=md') {
-                    @include mx.heading-medium(--display-sm --sm);
-                }
-            }
-
-            h6 {
-                @include mx.heading-faint(--display --xs);
-
-                @include media.media('<=md') {
-                    @include mx.heading-faint(--display-sm --xs);
+        @include bem.modifier('display') {
+            @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$display--sizes {
+                #{map.get($-size-map, $mod)} {
+                    font-family:           props.get($font-family);
+                    font-size:             props.get($font-size);
+                    font-weight:           props.get($font-weight);
+                    font-feature-settings: props.get($feature-settings);
+                    line-height:           props.get($line-height);
+                    letter-spacing:        props.get($letter-spacing);
                 }
             }
         }
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
new file mode 100644
index 0000000..78f06be
--- /dev/null
+++ b/src/scopes/_implicit.scss
@@ -0,0 +1,180 @@
+@use 'sass:map';
+@use 'sass:math';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+@use '../core.vars' as core;
+
+@forward 'implicit.vars';
+@use 'implicit.vars' as vars;
+
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @layer scope {
+        html {
+            accent-color:    props.get(core.$theme, --accent, --600);
+            scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
+        }
+
+        body {
+            padding:               0;
+            margin:                0;
+            font-family:           props.get(vars.$body--font-family);
+            font-size:             props.get(vars.$body--font-size);
+            font-feature-settings: props.get(vars.$body--feature-settings);
+            line-height:           props.get(vars.$body--line-height);
+            color:                 props.get(core.$theme, --text);
+            background-color:      props.get(core.$theme, --bg-base);
+        }
+
+        pre,
+        code {
+            font-family:           props.get(vars.$code--font-family);
+            font-size:             props.get(vars.$code--font-size);
+            font-feature-settings: props.get(vars.$code--feature-settings);
+            line-height:           props.get(vars.$code--line-height);
+        }
+
+        pre {
+            margin:     0;
+            overflow-x: auto;
+
+            code {
+                font-size: 1em;
+                color:     currentColor;
+            }
+        }
+
+        h1,
+        h2,
+        h3,
+        h4,
+        h5,
+        h6 {
+            margin-block:          props.get(vars.$heading--margin-bs) 0;
+            font-family:           props.get(vars.$heading--font-family);
+            font-size:             props.get(vars.$heading--font-size);
+            font-weight:           props.get(vars.$heading--font-weight);
+            font-feature-settings: props.get(vars.$heading--feature-settings);
+            line-height:           props.get(vars.$heading--line-height);
+            color:                 props.get(vars.$heading--color);
+
+            & + & {
+                margin-block-start: props.get(vars.$heading--margin-bs-sibling);
+            }
+        }
+
+        p {
+            margin-block: props.get(vars.$paragraph--margin-bs) 0;
+
+            &:empty {
+                display: none;
+            }
+        }
+
+        strong {
+            font-weight: bold;
+        }
+
+        small {
+            font-size: props.get(vars.$small--font-size);
+        }
+
+        ul,
+        ol {
+            padding:    0;
+            margin:     0;
+            list-style: none;
+        }
+
+        li {
+            padding: 0;
+            margin:  0;
+        }
+
+        :focus,
+        :focus-visible {
+            outline: 0;
+        }
+
+        :link,
+        :visited {
+            color:           currentColor;
+            text-decoration: none;
+        }
+
+
+        button,
+        input,
+        textarea {
+            box-sizing:     content-box;
+            padding:        0;
+            margin:         0;
+            font-family:    inherit;
+            font-size:      1em;
+            font-style:     inherit;
+            font-weight:    inherit;
+            line-height:    inherit;
+            color:          currentColor;
+            text-align:     inherit;
+            text-transform: inherit;
+            appearance:     none;
+            background:     none;
+            border:         0;
+
+            &::-moz-focus-inner {
+                border: 0;
+            }
+        }
+
+        input,
+        textarea {
+            &::placeholder {
+                color:   props.get(core.$theme, --text-mute);
+                opacity: 1;
+            }
+
+            &:disabled {
+                color: props.get(core.$theme, --text-disabled);
+            }
+        }
+
+        textarea {
+            block-size: calc(1em * props.get(core.$font--standard--line-height));
+        }
+
+        hr {
+            block-size:       props.get(core.$border-width--thin);
+            margin:           0;
+            background-color: props.get(core.$theme, --border);
+            border:           0;
+        }
+
+        figure {
+            padding: 0;
+            margin:  0;
+        }
+
+        @each $theme in map.keys(props.get(core.$transparent-colors)) {
+            .t-static-#{string.slice($theme, 3)} {
+                color: props.get(core.$transparent-colors, $theme, --800);
+
+                h1,
+                h2,
+                h3,
+                h4,
+                h5,
+                h6 {
+                    color: props.get(core.$transparent-colors, $theme, --900);
+                }
+
+                hr {
+                    color: props.get(core.$transparent-colors, $theme, --400);
+                }
+            }
+        }
+    }
+}
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss
new file mode 100644
index 0000000..388f0af
--- /dev/null
+++ b/src/scopes/_implicit.vars.scss
@@ -0,0 +1,26 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(core.$size--200)) !default;
+
+$small--font-size: props.def(--s-implicit--small--font-size, props.get(core.$font-size--75)) !default;
+
+$body--font-family:      props.def(--s-implicit--body--font-family, props.get(core.$font--standard--family)) !default;
+$body--line-height:      props.def(--s-implicit--body--line-height, props.get(core.$font--standard--line-height)) !default;
+$body--font-size:        props.def(--s-implicit--body--font-size, props.get(core.$font-size--100));
+$body--feature-settings: props.def(--s-implicit--body--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+
+$code--font-family:      props.def(--s-implicit--code--font-family, props.get(core.$font--mono--family)) !default;
+$code--line-height:      props.def(--s-implicit--code--line-height, props.get(core.$font--mono--line-height)) !default;
+$code--font-size:        props.def(--s-implicit--code--font-size, .93em);
+$code--feature-settings: props.def(--s-implicit--code--feature-settings, props.get(core.$font--mono--feature-settings)) !default;
+
+$heading--margin-bs:         props.def(--s-implicit--heading--margin-bs, props.get(core.$size--700)) !default;
+$heading--margin-bs-sibling: props.def(--s-implicit--heading--margin-bs-sibling, props.get(core.$size--325)) !default;
+$heading--font-family:       props.def(--s-implicit--heading--font-family, props.get(core.$font--standard--family)) !default;
+$heading--line-height:       props.def(--s-implicit--heading--line-height, props.get(core.$font--standard--line-height)) !default;
+$heading--font-weight:       props.def(--s-implicit--heading--font-weight, bold) !default;
+$heading--font-size:         props.def(--s-implicit--heading--font-size, props.get(core.$font-size--100));
+$heading--feature-settings:  props.def(--s-implicit--heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
+
+$heading--color: props.def(--s-implicit--heading--color, props.get(core.$theme, --heading), 'color') !default;
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index d47c406..4092633 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -1,140 +1,116 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
 
-$static-themes: 'black' 'white' !default;
+@forward 'links.vars';
+@use 'links.vars' as vars;
 
-@include iro.props-namespace('links') {
-    @include iro.props-store((
-        --dims: (
-            --rounding:          fn.global-dim(--rounding),
-            --underline:         fn.global-dim(--border --thin),
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
 
-            --hover: (
-                --underline:     fn.global-dim(--border --medium),
-            ),
-
-            --key-focus: (
-                --border:        fn.global-dim(--key-focus --border),
-                --border-offset: fn.global-dim(--key-focus --border-offset),
-                --outline:       fn.global-dim(--key-focus --border),
-            ),
-        ),
-        --colors: (
-            --underline: fn.global-color(--text-mute-more),
-
-            --colored: (
-                --text:          fn.global-color(--accent --1100),
-                --underline:     fn.global-color(--accent --600),
-
-                --hover: (
-                    --text:      fn.global-color(--accent --1300),
-                ),
-    
-                --visited: (
-                    --text:          fn.global-color(--purple --1100),
-                    --underline:     fn.global-color(--purple --600),
-    
-                    --hover: (
-                        --text:      fn.global-color(--purple --1300),
-                    ),
-                ),
-            ),
-
-            --key-focus: (
-                --text:          fn.global-color(--focus --text),
-                --border:        fn.global-color(--focus --border),
-                --outline:       fn.global-color(--focus --outline),
-            ),
-        ),
-    ));
-
-    @each $theme in $static-themes {
-        @include iro.props-store((
-            --colors: (
-                --static-#{$theme}: (
-                    --text:          fn.global-color(--#{$theme}-transparent --800),
-                    --underline:     fn.global-color(--#{$theme}-transparent --500),
-    
-                    --hover: (
-                        --text:      fn.global-color(--#{$theme}-transparent --900),
-                    ),
-
-                    --key-focus: (
-                        --text:      fn.global-color(--#{$theme}-transparent --900),
-                        --border:    fn.global-color(--#{$theme}-transparent --900),
-                        --outline:   fn.global-color(--#{$theme}-transparent --300),
-                    ),
-                )
-            )
-        ));
-    }
-
-    @include iro.bem-scope(iro.props-namespace()) {
+    @include bem.scope('links') {
         :link,
         :visited {
-            border-radius:             fn.dim(--rounding);
             color:                     currentColor;
             text-decoration:           underline;
-            text-decoration-color:     fn.color(--underline);
-            text-decoration-thickness: fn.dim(--underline);
+            text-decoration-thickness: props.get(vars.$underline-width);
+            text-decoration-color:     props.get(vars.$underline-color);
+            border-radius:             props.get(vars.$rounding);
             box-decoration-break:      clone;
 
             &:hover {
                 text-decoration:           underline;
-                text-decoration-thickness: fn.dim(--hover --underline);
                 text-decoration-skip-ink:  none;
+                text-decoration-thickness: props.get(vars.$hover--underline-width);
             }
 
             &:focus-visible {
-                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);
-                color:            fn.color(--key-focus --text);
-                text-decoration:  none;
+                color:           props.get(vars.$key-focus--text-color);
+                text-decoration: none;
+                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);
             }
         }
 
-        @include iro.bem-modifier('invisible') {
+        @include bem.modifier('invisible') {
             :link,
             :visited {
                 text-decoration: none;
             }
         }
 
-        @include iro.bem-modifier('colored') {
+        @include bem.modifier('colored') {
             :link {
-                color:                 fn.color(--colored --text);
-                text-decoration-color: fn.color(--colored --underline);
+                color:                 props.get(vars.$colored--text-color);
+                text-decoration-color: props.get(vars.$colored--underline-color);
 
                 &:hover {
-                    color:             fn.color(--colored --hover --text);
+                    color:             props.get(vars.$colored--hover--text-color);
                 }
             }
-    
+
             :visited {
-                color:                 fn.color(--colored --visited --text);
-                text-decoration-color: fn.color(--colored --visited --underline);
+                color:                 props.get(vars.$colored--visited--text-color);
+                text-decoration-color: props.get(vars.$colored--visited--underline-color);
 
                 &:hover {
-                    color:             fn.color(--colored --visited --hover --text);
+                    color:             props.get(vars.$colored--visited--hover--text-color);
                 }
             }
         }
 
-        @each $theme in $static-themes {
-            @include iro.bem-modifier(static-#{$theme}) {
+        @each $theme in map.keys(props.get(vars.$static-themes)) {
+            @include bem.modifier(string.slice($theme, 3)) {
                 :link,
                 :visited {
-                    color:                 fn.color(--static-#{$theme} --text);
-                    text-decoration-color: fn.color(--static-#{$theme} --underline);
+                    color:                 props.get(vars.$static-themes, $theme, --text-color);
+                    text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color);
 
                     &:hover {
-                        color:             fn.color(--static-#{$theme} --hover --text);
+                        color:             props.get(vars.$static-themes, $theme, --hover, --text-color);
                     }
 
                     &:focus-visible {
-                        outline-color: fn.color(--static-#{$theme} --key-focus --border);
-                        box-shadow:    0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--static-#{$theme} --key-focus --outline);
-                        color:         fn.color(--static-#{$theme} --key-focus --text);
+                        color:         props.get(vars.$static-themes, $theme, --key-focus, --text-color);
+                        outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color);
+                        box-shadow:
+                            0
+                            0
+                            0
+                            calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                            props.get(vars.$static-themes, $theme, --key-focus, --outline-color);
+                    }
+                }
+            }
+        }
+
+        @include bem.elem('image') {
+            img {
+                margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset));
+                border:        props.get(vars.$key-focus--border-offset) solid transparent;
+                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+            }
+    
+            &:link,
+            &:visited {
+                &:focus-visible {
+                    outline:    none;
+                    box-shadow: none;
+    
+                    img {
+                        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);
                     }
                 }
             }
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss
new file mode 100644
index 0000000..b9bf4d1
--- /dev/null
+++ b/src/scopes/_links.vars.scss
@@ -0,0 +1,48 @@
+@use 'sass:map';
+@use 'sass:string';
+@use 'iro-sass/src/props';
+@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;
+$hover--underline-width: props.def(--s-links--hover--underline-width, props.get(core.$border-width--medium)) !default;
+
+$key-focus--border-width:  props.def(--s-links--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
+$key-focus--border-offset: props.def(--s-links--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
+$key-focus--outline-width: props.def(--s-links--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+
+$underline-color: props.def(--s-links--underline-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+
+$colored--text-color:        props.def(--s-links--colored--text-color, props.get(core.$theme, --accent, --1100), 'color') !default;
+$colored--underline-color:   props.def(--s-links--colored--underline-color, props.get(core.$theme, --accent, --600), 'color') !default;
+$colored--hover--text-color: props.def(--s-links--colored--hover--text-color, props.get(core.$theme, --accent, --1300), 'color') !default;
+
+$colored--visited--text-color:        props.def(--s-links--colored--visited--text-color, props.get(core.$theme, --purple, --1100), 'color') !default;
+$colored--visited--underline-color:   props.def(--s-links--colored--visited--underline-color, props.get(core.$theme, --purple, --600), 'color') !default;
+$colored--visited--hover--text-color: props.def(--s-links--colored--visited--hover--text-color, props.get(core.$theme, --purple, --1300), 'color') !default;
+
+$key-focus--text-color:    props.def(--s-links--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default;
+$key-focus--border-color:  props.def(--s-links--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
+$key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
+
+$static-themes: props.def(--s-links, (), 'color');
+@each $theme in map.keys(props.get(core.$transparent-colors)) {
+    $link-theme: --static-#{string.slice($theme, 3)};
+
+    $static-themes: props.merge($static-themes, (
+        $link-theme: (
+            --text-color:        currentColor,
+            --underline-color:   props.get(core.$transparent-colors, $theme, --500),
+
+            --hover: (
+                --text-color:    props.get(core.$transparent-colors, $theme, --900),
+            ),
+
+            --key-focus: (
+                --text-color:    props.get(core.$transparent-colors, $theme, --900),
+                --border-color:  props.get(core.$transparent-colors, $theme, --900),
+                --outline-color: props.get(core.$transparent-colors, $theme, --300),
+            ),
+        )
+    ));
+}
diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss
index bad9731..98b1df1 100644
--- a/src/scopes/_lists.scss
+++ b/src/scopes/_lists.scss
@@ -1,26 +1,20 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+@use '../core.vars' as core;
 
-@include iro.props-namespace('lists') {
-    @include iro.props-store((
-        --dims: (
-            --indent:    calc(fn.global-dim(--list --indent) + 1em),
-            --margin-bs: fn.global-dim(--paragraph --margin-bs),
+@forward 'lists.vars';
+@use 'lists.vars' as vars;
 
-            --compact: (
-                --indent: fn.global-dim(--list --compact-indent),
-            ),
-        ),
-        --colors: (
-            --border: fn.global-color(--border-mute),
-        )
-    ));
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-scope(iro.props-namespace()) {
+    @include bem.scope('lists') {
         ul,
         ol {
-            margin-block-start:   fn.dim(--margin-bs);
-            padding-inline-start: fn.dim(--indent);
+            padding-inline-start: props.get(vars.$indent);
+            margin-block-start:   props.get(vars.$margin-bs);
 
             ul,
             ol {
@@ -37,29 +31,29 @@
         }
 
         dl {
-            margin-block:  fn.dim(--margin-bs) 0;
-            margin-inline: 0;
             padding:       0;
+            margin-block:  props.get(vars.$margin-bs) 0;
+            margin-inline: 0;
         }
 
         dt {
-            color:       fn.global-color(--heading);
             font-weight: bold;
+            color:       props.get(core.$theme, --heading);
         }
 
         dd {
             margin-block:  0;
-            margin-inline: fn.dim(--indent) 0;
+            margin-inline: props.get(vars.$indent) 0;
         }
 
-        @include iro.bem-modifier('compact') {
+        @include bem.modifier('compact') {
             ul,
             ol {
-                padding-inline-start: calc(fn.dim(--compact --indent) - 3px);
+                padding-inline-start: calc(props.get(vars.$compact--indent) - 3px);
             }
 
             dd {
-                margin-inline-start: calc(fn.dim(--compact --indent) - 3px);
+                margin-inline-start: calc(props.get(vars.$compact--indent) - 3px);
             }
         }
     }
diff --git a/src/scopes/_lists.vars.scss b/src/scopes/_lists.vars.scss
new file mode 100644
index 0000000..8c46bc3
--- /dev/null
+++ b/src/scopes/_lists.vars.scss
@@ -0,0 +1,8 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+@use './implicit.vars' as implicit;
+
+$indent:    props.def(--s-lists--indent, calc(props.get(core.$list--indent) + 1em)) !default;
+$margin-bs: props.def(--s-lists--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
+
+$compact--indent: props.def(--s-lists--compact--indent, props.get(core.$list--compact-indent)) !default;
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss
index 9b2124d..0a87eaa 100644
--- a/src/scopes/_tables.scss
+++ b/src/scopes/_tables.scss
@@ -1,65 +1,52 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-@use '../mixins' as mx;
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+@use '../objects/table.vars' as table;
 
-@include iro.props-namespace('tables') {
-    @include iro.props-store((
-        --dims: (
-            --pad-i:     fn.foreign-dim(--table, --pad-i),
-            --pad-b:     fn.foreign-dim(--table, --pad-b),
-            --rounding:  fn.foreign-dim(--table, --rounding),
-            --border:    fn.foreign-dim(--table, --border),
-            --margin-bs: fn.global-dim(--paragraph --margin-bs),
-        ),
-        --colors: (
-            --border:  fn.foreign-color(--table, --border),
-            --heading: fn.foreign-color(--table, --heading),
-            --box: (
-                --bg: fn.foreign-color(--table, --box --bg),
-            )
-        )
-    ));
+@forward 'tables.vars';
+@use 'tables.vars' as vars;
 
-    @include iro.bem-scope(iro.props-namespace()) {
+@mixin styles {
+    @include materialize-at-root(meta.module-variables('vars'));
+
+    @include bem.scope('tables') {
         table {
-            margin-block-start: fn.dim(--margin-bs);
+            margin-block-start: props.get(vars.$margin-bs);
             border-spacing:     0;
             border-collapse:    separate;
         }
 
         th {
-            @include mx.set-font(--standard, (
-                --line-height: null,
-                --size:        fn.global-dim(--font-size --50),
-                --weight:      bold,
-                --transform:   uppercase,
-                --spacing:     .5px
-            ));
-
-            padding-block:  fn.dim(--pad-b);
-            padding-inline: fn.dim(--pad-i);
-            color:          fn.color(--heading);
+            padding-block:  props.get(table.$pad-b);
+            padding-inline: props.get(table.$pad-i);
+            font-family:    props.get(table.$heading--font-family);
+            font-size:      props.get(table.$heading--font-size);
+            font-weight:    props.get(table.$heading--font-weight);
+            color:          props.get(table.$heading-color);
             text-align:     start;
+            text-transform: props.get(table.$heading--text-transform);
+            letter-spacing: props.get(table.$heading--letter-spacing);
         }
 
         td {
-            padding-block:            fn.dim(--pad-b);
-            padding-inline:           fn.dim(--pad-i);
-            border-width:             0;
-            border-block-start-width: fn.dim(--border);
+            padding-block:            props.get(table.$pad-b);
+            padding-inline:           props.get(table.$pad-i);
+            border-color:             props.get(table.$border-color);
             border-style:             solid;
-            border-color:             fn.color(--border);
+            border-width:             0;
+            border-block-start-width: props.get(table.$border-width);
         }
 
         tr {
             &:last-child {
                 td {
-                    border-block-end-width: fn.dim(--border);
+                    border-block-end-width: props.get(table.$border-width);
                 }
             }
         }
 
-        @include iro.bem-modifier('flush') {
+        @include bem.modifier('flush') {
             th,
             td {
                 &:first-child {
@@ -72,16 +59,16 @@
             }
         }
 
-        @include iro.bem-modifier('box') {
+        @include bem.modifier('box') {
             td {
-                background-color: fn.color(--box --bg);
+                background-color: props.get(table.$box--bg-color);
             
                 &:first-child {
-                    border-inline-start-width: fn.dim(--border);
+                    border-inline-start-width: props.get(table.$border-width);
                 }
             
                 &:last-child {
-                    border-inline-end-width: fn.dim(--border);
+                    border-inline-end-width: props.get(table.$border-width);
                 }
             }
     
@@ -89,11 +76,11 @@
                 &:first-child {
                     td {
                         &:first-child {
-                            border-start-start-radius: fn.dim(--rounding);
+                            border-start-start-radius: props.get(table.$rounding);
                         }
             
                         &:last-child {
-                            border-start-end-radius: fn.dim(--rounding);
+                            border-start-end-radius: props.get(table.$rounding);
                         }
                     }
                 }
@@ -101,11 +88,11 @@
                 &:last-child {
                     td {
                         &:first-child {
-                            border-end-start-radius: fn.dim(--rounding);
+                            border-end-start-radius: props.get(table.$rounding);
                         }
             
                         &:last-child {
-                            border-end-end-radius: fn.dim(--rounding);
+                            border-end-end-radius: props.get(table.$rounding);
                         }
                     }
                 }
diff --git a/src/scopes/_tables.vars.scss b/src/scopes/_tables.vars.scss
new file mode 100644
index 0000000..362b70f
--- /dev/null
+++ b/src/scopes/_tables.vars.scss
@@ -0,0 +1,4 @@
+@use 'iro-sass/src/props';
+@use 'implicit.vars' as implicit;
+
+$margin-bs: props.def(--s-tables--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;