111 files changed, 6299 insertions, 5911 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/_apca.scss b/src/_apca.scss
new file mode 100644
index 0000000..c5da4a0
--- /dev/null
+++ b/src/_apca.scss
@@ -0,0 +1,127 @@
+// stylelint-disable scss/dollar-variable-pattern
+// stylelint-disable scss/at-function-pattern
+
+@use 'sass:color';
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+
+$SA98G: (
+        mainTRC:     2.4,
+
+        sRco:        .2126729, 
+        sGco:        .7151522, 
+        sBco:        .072175,
+
+        normBG:      .56, 
+        normTXT:     .57,
+        revTXT:      .62,
+        revBG:       .65,
+
+        blkThrs:     .022,
+        blkClmp:     1.414,
+        scaleBoW:    1.14,
+        scaleWoB:    1.14,
+        loBoWoffset: .027,
+        loWoBoffset: .027,
+        deltaYmin:   .0005,
+        loClip:      .0001,
+
+        mFactor:     1.9468554433171,
+        mOffsetIn:   .0387393816571401,
+        mExpAdj:     .283343396420869,
+        mOffsetOut:  .312865795870758,
+);
+
+@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 Y_to_sRGB($y) {
+        $c: math.round(math.pow($y, math.div(1, map.get($SA98G, mainTRC))) * 255);
+        @return rgb($c, $c, $c);
+}
+
+@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;
+        }
+
+        @if $txtY <= map.get($SA98G, blkThrs) {
+                $txtY: $txtY + math.pow(map.get($SA98G, blkThrs) - $txtY, map.get($SA98G, blkClmp));
+        }
+        @if $bgY <= map.get($SA98G, blkThrs) {
+                $bgY: $bgY + math.pow(map.get($SA98G, blkThrs) - $bgY, map.get($SA98G, blkClmp));
+        }
+
+        @if math.abs($bgY - $txtY) < map.get($SA98G, deltaYmin) {
+                @return 0;
+        }
+
+        $outputContrast: 0;
+
+        @if $bgY > $txtY {
+                $SAPC: map.get($SA98G, scaleBoW) * (math.pow($bgY, map.get($SA98G, normBG)) - math.pow($txtY, map.get($SA98G, normTXT)));
+        
+                @if $SAPC >= map.get($SA98G, loClip) {
+                        $outputContrast: $SAPC - map.get($SA98G, loBoWoffset);
+                }
+        } @else {
+                $SAPC: map.get($SA98G, scaleWoB) * (math.pow($bgY, map.get($SA98G, revBG)) - math.pow($txtY, map.get($SA98G, revTXT)));
+        
+                @if $SAPC <= -1 * map.get($SA98G, loClip) {
+                        $outputContrast: $SAPC + map.get($SA98G, loWoBoffset);
+                }
+        }
+
+        @return $outputContrast * 100;
+}
+
+@function reverse($contrast, $knownY, $knownType: 'bg') {
+        $unknownY:   $knownY;
+
+        $knownExp:   0;
+        $unknownExp: 0;
+
+        $scale:  map.get($SA98G, if($contrast > 0, scaleBoW, scaleWoB));
+        $offset: map.get($SA98G, if($contrast > 0, loBoWoffset, loWoBoffset));
+
+        $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));
+        }
+
+        @if $knownType == 'bg' {
+                $knownExp:   map.get($SA98G, if($contrast > 0, normBG, revBG));
+                $unknownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT));
+                $unknownY:   math.pow(math.pow($knownY, $knownExp) - $contrast, math.div(1, $unknownExp));
+        } @else {
+                $knownExp:   map.get($SA98G, if($contrast > 0, normTXT, revTXT));
+                $unknownExp: map.get($SA98G, if($contrast > 0, normBG, revBG));
+                $unknownY:   math.pow($contrast + math.pow($knownY, $knownExp), math.div(1, $unknownExp));
+        }
+
+        @if '#{$unknownY}' == '#{math.sqrt(-1)}' {
+                @return false;
+        }
+
+        @if $unknownY > 1.06 or $unknownY < 0 {
+                @return false;
+        }
+
+        @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.max(math.min($unknownY, 1), 0);
+
+        @return $unknownY;
+}
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..861b600
--- /dev/null
+++ b/src/_config.defaults.scss
@@ -0,0 +1,197 @@
+@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,
+
+                --box: (
+                        --border:        --base --200,
+                        --border-strong: --base --300,
+                ),
+        )),
+
+        --constants: (
+                --shadow: rgba(#000, .1),
+        ),
+);
+
+$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,
+
+                --box: (
+                        --border:        --base --100,
+                        --border-strong: --base --100,
+                ),
+        )),
+
+        --constants: (
+                --shadow: rgba(#000, .35),
+        ),
+);
diff --git a/src/_config.scss b/src/_config.scss
index 5449a04..764d953 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -1,230 +1,29 @@
 @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,
-        ),
-    ),
-
-    --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;
+$themes: map.deep-merge((
+        --main: (
+                light: $theme-light,
+                dark:  $theme-dark,
+        ),
+), $themes-override) !default;
 
 $theme-default: list.nth(map.keys($themes), 1) !default;
+
+$explicit-dark-theme: false !default;
diff --git a/src/_core.scss b/src/_core.scss
new file mode 100644
index 0000000..7be4b0d
--- /dev/null
+++ b/src/_core.scss
@@ -0,0 +1,45 @@
+@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'));
+                                        }
+                                }
+                        }
+
+                        @if map.has-key($theme, 'dark') and config.$explicit-dark-theme {
+                                @include bem.theme('dark') {
+                                        @include props.materialize(map.values(meta.module-variables('vars')));
+                                        @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..f7a9ebc
--- /dev/null
+++ b/src/_core.vars.scss
@@ -0,0 +1,183 @@
+// 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--l1--x:    props.def(--shadow--l1--x, 0) !default;
+$shadow--l1--y:    props.def(--shadow--l1--y, 2px) !default;
+$shadow--l1--blur: props.def(--shadow--l1--blur, 3px) !default;
+$shadow--l1--grow: props.def(--shadow--l1--grow, -1px) !default;
+
+$shadow--l2--x:    props.def(--shadow--l2--x, 0) !default;
+$shadow--l2--y:    props.def(--shadow--l2--y, 5px) !default;
+$shadow--l2--blur: props.def(--shadow--l2--blur, 12px) !default;
+$shadow--l2--grow: props.def(--shadow--l2--grow, -4px) !default;
+
+$rounding:     props.def(--rounding, 12px) !default;
+$rounding--sm: props.def(--rounding--sm, 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..ec1f9d8 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -4,149 +4,67 @@
 @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);
-}
+        $ref-l: color.channel($ref-lch, 'lightness');
+        $ref-y: apca.sRGB_to_Y($ref-lch);
 
-@function global-color($key, $tree: iro.$props-default-tree, $default: null, $global: true) {
-    @return color($key, $tree, $default, $global);
-}
+        $black-y: apca.sRGB_to_Y(#000);
+        $white-y: apca.sRGB_to_Y(#fff);
 
-@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);
-}
+        $palette: ();
 
-@function dim($key, $tree: iro.$props-default-tree, $default: null, $global: false) {
-    @return iro.props-get(list.join(--dims, $key), $tree, $default, $global);
-}
+        @each $key, $level in $levels {
+                $color: list.nth($level, 1);
+                $y: 0;
+                $c: 1;
+                $h: 0deg;
 
-@function global-dim($key, $tree: iro.$props-default-tree, $default: null, $global: true) {
-    @return dim($key, $tree, $default, $global);
-}
+                @if list.length($level) > 1 {
+                        $c: list.nth($level, 2);
+                }
+                @if list.length($level) > 2 {
+                        $h: list.nth($level, 3);
+                }
 
-@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);
-}
+                @if meta.type-of($color) != 'color' {
+                        $y: apca.reverse($color, $ref-y);
+                        $l: color.channel($base-lch, 'lightness');
 
-@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;
-}
+                        @if $y != false {
+                                $l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch);
+                        } @else {
+                                $y: $ref-y;
+                        }
 
-@function set-font($key, $overrides: ()) {
-    $font: iro.props-get-static(list.join(--dims --font, $key), $global: true);
+                        $color: oklch($l ($c * color.channel($base-lch, 'chroma')) ($h + color.channel($base-lch, 'hue')));
+                } @else {
+                        $y: apca.sRGB_to_Y($color);
+                }
 
-    $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),
-    );
+                $contrast-black: apca.contrast($black-y, $y);
+                $contrast-white: apca.contrast($white-y, $y);
 
-    @return $map;
-}
+                $palette: map.set($palette, $key, $color);
+                $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff));
+        }
 
-@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);
-
-    $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);
-        $c: 1;
-
-        @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 $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;
-        }
-
-        $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)
-        //        )
-        //    )
-        //);
-
-        $contrast-black: iro-colors.apcaContrast($black-y, $y);
-        $contrast-white: iro-colors.apcaContrast($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;
+        @return $palette;
 }
 
 @function transparent-palette($color, $text, $alphas) {
-    $palette: (
-        --text: $text,
-    );
+        $palette: (
+                --text: $text,
+        );
 
-    @each $key, $alpha in $alphas {
-        $palette: map.set($palette, $key, rgba($color, $alpha));
-    }
-
-    @return $palette;
-}
+        @each $key, $alpha in $alphas {
+                $palette: map.set($palette, $key, rgba($color, $alpha));
+        }
 
-@function px-to-em($size, $base: iro.$vars-root-size) {
-    @return math.div($size, $base) * 1em;
+        @return $palette;
 }
diff --git a/src/_iro-design.scss b/src/_iro-design.scss
new file mode 100644
index 0000000..22e50c0
--- /dev/null
+++ b/src/_iro-design.scss
@@ -0,0 +1,76 @@
+$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/alert' as o-alert--*;
+@forward 'objects/avatar' as o-avatar--*;
+@forward 'objects/backdrop' as o-backdrop--*;
+@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..2a80190
--- /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..8899778 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -2,37 +2,37 @@
 @use 'functions' as fn;
 
 @mixin set-font($basis, $values: ()) {
-    $values: fn.set-font($basis, $values);
+        $values: fn.set-font($basis, $values);
 
-    @each $prop, $value in $values {
-        @if $value != null {
-            #{$prop}: $value;
-        }
-    }
+        @each $prop, $value in $values {
+                @if $value != null {
+                        #{$prop}: $value;
+                }
+        }
 }
 
 @mixin heading-strong($size) {
-    color:     fn.global-color(--heading);
-    font-size: fn.global-dim(list.join(--heading, $size));
+        font-size: fn.global-dim(list.join(--heading, $size));
+        color:     fn.global-color(--heading);
 }
 
 @mixin heading-medium($size) {
-    @include set-font(--standard, (
-        --line-height: null,
-        --size:        fn.global-dim(list.join(--heading, $size)),
-        --weight:      bold
-    ));
+        @include set-font(--standard, (
+                --line-height: null,
+                --size:        fn.global-dim(list.join(--heading, $size)),
+                --weight:      bold
+        ));
 
-    color: fn.global-color(--heading);
+        color: fn.global-color(--heading);
 }
 
 @mixin heading-faint($size) {
-    @include set-font(--standard, (
-        --line-height: null,
-        --size:        fn.global-dim(list.join(--heading, $size)),
-        --weight:      500,
-        --spacing:     1px
-    ));
+        @include set-font(--standard, (
+                --line-height: null,
+                --size:        fn.global-dim(list.join(--heading, $size)),
+                --weight:      500,
+                --spacing:     1px
+        ));
 
-    color: fn.global-color(--text-mute);
+        color: fn.global-color(--text-mute);
 }
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..0b2306d
--- /dev/null
+++ b/src/_props.scss
@@ -0,0 +1,48 @@
+@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');
+                }
+        }
+
+        @if config.$explicit-dark-theme {
+                @include bem.theme('dark') {
+                        @include props.materialize($ref, 'color');
+                        @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..fe5a0cb 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..3dae3b6 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -1,209 +1,380 @@
 @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: (
-    '': '',
-    'bs': '-block-start',
-    'be': '-block-end',
-    'b':  '-block',
-    'is': '-inline-start',
-    'ie': '-inline-end',
-    'i':  '-inline',
+@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',
+        'i':  '-inline',
+        'is': '-inline-start',
+        'ie': '-inline-end',
 ) !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;
-}
+$-font-sizes: (
+        50: vars.$font-size--50,
+        75: vars.$font-size--75,
+        100: vars.$font-size--100,
+        150: vars.$font-size--150,
+        200: vars.$font-size--200,
+        300: vars.$font-size--300,
+) !default;
 
-@include iro.bem-utility('d-inline-block') {
-    display: inline-block;
-}
+@mixin styles {
+        @include bem.utility('d-block') {
+                display: block;
+        }
 
-@include iro.bem-utility('d-contents') {
-    display: contents;
-}
+        @include bem.utility('d-inline-block') {
+                display: inline-block;
+        }
 
-@include iro.bem-utility('td-none') {
-    text-decoration: none;
-}
+        @include bem.utility('d-contents') {
+                display: contents;
+        }
 
-@include iro.bem-utility('d-none') {
-    display: none;
+        @include bem.utility('d-flex') {
+                display: flex;
+        }
 
-    @each $breakpoint in map.keys(media.$breakpoints) {
-        @include media.media('<=#{$breakpoint}') {
-            @include iro.bem-suffix('#{$breakpoint}-lo') {
-                display: none;
-            }
-        }
+        @include bem.utility('td-none') {
+                text-decoration: none;
+        }
 
-        @include media.media('>#{$breakpoint}') {
-            @include iro.bem-suffix('#{$breakpoint}-hi') {
-                display: none;
-            }
-        }
-    }
+        @include bem.utility('d-none') {
+                display: none;
 
-    @include iro.bem-at-theme('js') {
-        @include iro.bem-suffix('js') {
-            display: none;
-        }
-    }
+                @each $breakpoint in map.keys(media.$breakpoints) {
+                        @include media.media('<=#{$breakpoint}') {
+                                @include bem.suffix('#{$breakpoint}-lo') {
+                                        display: none;
+                                }
+                        }
 
-    @include iro.bem-at-theme('no-js') {
-        @include iro.bem-suffix('no-js') {
-            display: none;
-        }
-    }
+                        @include media.media('>#{$breakpoint}') {
+                                @include bem.suffix('#{$breakpoint}-hi') {
+                                        display: none;
+                                }
+                        }
+                }
 
-    @include iro.bem-suffix('empty') {
-        &:empty {
-            display: none;
-        }
-    }
-}
+                @include bem.at-theme('js') {
+                        @include bem.suffix('js') {
+                                display: none;
+                        }
+                }
 
-@include iro.bem-utility('ta-start') {
-    text-align: start;
-}
+                @include bem.at-theme('no-js') {
+                        @include bem.suffix('no-js') {
+                                display: none;
+                        }
+                }
 
-@include iro.bem-utility('ta-end') {
-    text-align: end;
-}
+                @include bem.suffix('empty') {
+                        &:empty {
+                                display: none;
+                        }
+                }
+        }
 
-@include iro.bem-utility('ta-center') {
-    text-align: center;
-}
+        @include bem.utility('va-top') {
+                vertical-align: top;
+        }
 
-@include iro.bem-utility('fw-normal') {
-    font-weight: normal;
-}
+        @include bem.utility('va-baseline') {
+                vertical-align: baseline;
+        }
 
-@include iro.bem-utility('ai-center') {
-    align-items: center;
-}
+        @include bem.utility('va-middle') {
+                vertical-align: middle;
+        }
 
-@include iro.bem-utility('ai-start') {
-    align-items: flex-start;
-}
+        @include bem.utility('va-bottom') {
+                vertical-align: bottom;
+        }
 
-@include iro.bem-utility('ai-end') {
-    align-items: flex-end;
-}
+        @include bem.utility('ta-start') {
+                text-align: start;
+        }
 
-@include iro.bem-utility('jc-center') {
-    justify-content: center;
-}
+        @include bem.utility('ta-end') {
+                text-align: end;
+        }
 
-@include iro.bem-utility('jc-start') {
-    justify-content: flex-start;
-}
+        @include bem.utility('ta-center') {
+                text-align: center;
+        }
 
-@include iro.bem-utility('jc-end') {
-    justify-content: flex-end;
-}
+        @include bem.utility('fw-normal') {
+                font-weight: normal;
+        }
 
-@include iro.bem-utility('c-heading') {
-    color: fn.color(--heading);
-}
+        @include bem.utility('ai-center') {
+                align-items: center;
+        }
 
-@include iro.bem-utility('c-text') {
-    color: fn.color(--text);
-}
+        @include bem.utility('ai-start') {
+                align-items: flex-start;
+        }
 
-@include iro.bem-utility('c-mute') {
-    color: fn.color(--text-mute);
-}
+        @include bem.utility('ai-end') {
+                align-items: flex-end;
+        }
 
-@include iro.bem-utility('c-mute-more') {
-    color: fn.color(--text-mute-more);
-}
+        @include bem.utility('ac-center') {
+                align-content: center;
+        }
 
-@each $dir, $prop in (is: inline-size, bs: block-size) {
-    @include iro.bem-utility('#{$dir}-100') {
-        #{$prop}: 100%;
-    }
-    
-    @include iro.bem-utility('#{$dir}-75') {
-        #{$prop}: 75%;
-    }
+        @include bem.utility('jc-center') {
+                justify-content: center;
+        }
+
+        @include bem.utility('jc-start') {
+                justify-content: flex-start;
+        }
+
+        @include bem.utility('jc-end') {
+                justify-content: flex-end;
+        }
+
+        @include bem.utility('tt-upper') {
+                text-transform: uppercase;
+        }
+
+        @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}-50') {
-        #{$prop}: 50%;
-    }
+                        @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}-25') {
-        #{$prop}: 25%;
-    }
+                        @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}-1px') {
-        #{$prop}: 1px;
-    }
+                        @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}-0') {
-        #{$prop}: 0;
-    }
-}
+                        @include bem.at-theme($theme-name) {
+                                color: props.get(vars.$transparent-colors, $theme, --600);
+                        }
+                }
+        }
 
-@include iro.bem-utility('elp') {
-    overflow:      hidden;
-    text-overflow: ellipsis;
-    white-space:   nowrap;
-}
+        @each $mod, $size in $-font-sizes {
+                @include bem.utility('fs-#{$mod}') {
+                        font-size: props.get($size);
+                }
+        }
 
-@include iro.bem-utility('p-static') {
-    position: static;
-}
+        @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('p-relative') {
-    position: relative;
-}
+        @include bem.utility('elp') {
+                overflow:      hidden;
+                text-overflow: ellipsis;
+                white-space:   nowrap;
+        }
 
-@include iro.bem-utility('p-fixed') {
-    position: fixed;
-}
+        @include bem.utility('o-auto') {
+                overflow: auto;
+        }
 
-@include iro.bem-utility('p-sticky-bs') {
-    position:          sticky;
-    inset-block-start: 0;
-}
+        @include bem.utility('o-hidden') {
+                overflow: hidden;
+        }
 
-@each $dir, $suffix in $dirs {
-    @include iro.bem-utility('m#{$dir}-auto') {
-        margin#{$suffix}: auto;
-    }
-    
-    @include iro.bem-utility('p#{$dir}-auto') {
-        padding#{$suffix}: auto;
-    }
+        @include bem.utility('p-static') {
+                position: static;
+        }
+
+        @include bem.utility('p-relative') {
+                position: relative;
+        }
+
+        @include bem.utility('p-fixed') {
+                position: fixed;
+        }
+
+        @include bem.utility('p-sticky-bs') {
+                position:          sticky;
+                inset-block-start: props.get(vars.$sticky-top-offset);
+        }
+
+        @include bem.utility('p-sticky-be') {
+                position:        sticky;
+                inset-block-end: 0;
+        }
 
-    @each $size in $sizes {
-        @include iro.bem-utility('m#{$dir}-#{$size}') {
-            margin#{$suffix}: fn.global-dim(--size --#{$size});
-        }
+        @include bem.utility('br-round') {
+                border-radius: props.get(vars.$rounding);
+        }
+
+        @include bem.utility('br-round-sm') {
+                border-radius: props.get(vars.$rounding--sm);
+        }
+
+        @each $dir, $suffix in $-dirs {
+                @include bem.utility('m#{$dir}-auto') {
+                        margin#{$suffix}: auto;
+                }
         
-        @include iro.bem-utility('p#{$dir}-#{$size}') {
-            padding#{$suffix}: fn.global-dim(--size --#{$size});
-        }
-    }
-    
-    @include iro.bem-utility('b#{$dir}-0') {
-        border#{$suffix}: 0;
-    }
-    
-    @include iro.bem-utility('b#{$dir}-1') {
-        border#{$suffix}: fn.global-dim(--border --thin) solid fn.global-color(--border);
-    }
-}
+                @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 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('mbs-neutralize') {
-    &::before {
-        content:       '';
-        display:       block;
-        margin-block:  -100em 100em;
-    }
+        @include bem.utility('mbs-neutralize') {
+                &::before {
+                        display:       block;
+                        margin-block:  -100em 100em;
+                        content:       '';
+                }
+        }
+    
+        @include bem.utility('sr-only') {
+                position:    absolute;
+                width:       1px;
+                height:      1px;
+                padding:     0;
+                margin:      -1px;
+                overflow:    hidden;
+                white-space: nowrap;
+                border:      0;
+                clip-path:   inset(50%);
+        }
 }
diff --git a/src/functions/colors/_apca.scss b/src/functions/colors/_apca.scss
deleted file mode 100644
index d9236b2..0000000
--- a/src/functions/colors/_apca.scss
+++ /dev/null
@@ -1,127 +0,0 @@
-/* stylelint-disable scss/dollar-variable-pattern */
-/* stylelint-disable scss/at-function-pattern */
-
-@use 'sass:color';
-@use 'sass:list';
-@use 'sass:map';
-@use 'sass:math';
-
-$SA98G: (
-    mainTRC:     2.4,
-
-    sRco:        0.2126729, 
-    sGco:        0.7151522, 
-    sBco:        0.0721750,
-
-    normBG:      0.56, 
-    normTXT:     0.57,
-    revTXT:      0.62,
-    revBG:       0.65,
-
-    blkThrs:     0.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,
-);
-
-@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 apca_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;
-
-    @if math.min($txtY, $bgY) < list.nth($icp, 1) or math.max($txtY, $bgY) > list.nth($icp, 2) {
-        @return 0;
-    }
-
-    @if $txtY <= map.get($SA98G, blkThrs) {
-        $txtY: $txtY + math.pow(map.get($SA98G, blkThrs) - $txtY, map.get($SA98G, blkClmp));
-    }
-    @if $bgY <= map.get($SA98G, blkThrs) {
-        $bgY: $bgY + math.pow(map.get($SA98G, blkThrs) - $bgY, map.get($SA98G, blkClmp));
-    }
-
-    @if math.abs($bgY - $txtY) < map.get($SA98G, deltaYmin) {
-        @return 0;
-    }
-
-    $outputContrast: 0;
-
-    @if $bgY > $txtY {
-        $SAPC: map.get($SA98G, scaleBoW) * (math.pow($bgY, map.get($SA98G, normBG)) - math.pow($txtY, map.get($SA98G, normTXT)));
-        
-        @if $SAPC >= map.get($SA98G, loClip) {
-            $outputContrast: $SAPC - map.get($SA98G, loBoWoffset);
-        }
-    } @else {
-        $SAPC: map.get($SA98G, scaleWoB) * (math.pow($bgY, map.get($SA98G, revBG)) - math.pow($txtY, map.get($SA98G, revTXT)));
-        
-        @if $SAPC <= -1 * map.get($SA98G, loClip) {
-            $outputContrast: $SAPC + map.get($SA98G, loWoBoffset);
-        }
-    }
-
-    @return $outputContrast * 100.0;
-}
-
-@function apcaReverse($contrast, $knownY, $knownType: 'bg') {
-    $unknownY:   $knownY;
-
-    $knownExp:   0;
-    $unknownExp: 0;
-
-    $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);
-
-    @if $knownY <= map.get($SA98G, blkThrs) {
-        $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp));
-    }
-
-    @if $knownType == 'bg' {
-        $knownExp:   map.get($SA98G, if($contrast > 0, normBG, revBG));
-        $unknownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT));
-        $unknownY:   math.pow(math.pow($knownY, $knownExp) - $contrast, math.div(1, $unknownExp));
-    } @else {
-        $knownExp:   map.get($SA98G, if($contrast > 0, normTXT, revTXT));
-        $unknownExp: map.get($SA98G, if($contrast > 0, normBG, revBG));
-        $unknownY:   math.pow($contrast + math.pow($knownY, $knownExp), math.div(1, $unknownExp));
-    }
-
-    @if '#{$unknownY}' == '#{math.sqrt(-1)}' {
-        @return false;
-    }
-
-    @if $unknownY > 1.06 or $unknownY < 0 {
-        @return false;
-    }
-
-    @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.max(math.min($unknownY, 1), 0);
-
-    @return $unknownY;
-}
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..44719be 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;
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
 
-@include iro.props-namespace('button-group') {
-    @include iro.props-store((
-        --dims: (
-            --spacing: fn.global-dim(--size --150),
-        ),
-    ));
+@forward 'button-group.vars';
+@use 'button-group.vars' as vars;
+@use '../objects/button.vars' as button;
 
-    @include iro.bem-layout(iro.props-namespace()) {
-        display:   flex;
-        gap:       fn.dim(--spacing);
-        flex-wrap: wrap;
-    }
+@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(button.$pad-i) - props.get(button.$border-width));
+
+                        @include bem.modifier('pill') {
+                                margin-inline: calc(-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width));
+                        }
+
+                        @include bem.modifier('icon') {
+                                margin-inline: calc(-1 * props.get(button.$pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
+                        }
+
+                        @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes {
+                                @include bem.modifier('action-#{$mod}') {
+                                        margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width));
+    
+                                        @include bem.modifier('pill') {
+                                                margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width));
+                                        }
+
+                                        @include bem.modifier('icon') {
+                                                margin-inline: calc(-1 * props.get($pad-b) - props.get(button.$border-width) - .5em * (props.get(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..b56eec7
--- /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..aedbfd0 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -1,96 +1,158 @@
-@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()) {
-        display:        flex;
-        flex-direction: column;
-        gap:            fn.dim(--row-gap) fn.dim(--col-gap);
+        @include bem.layout('card-list') {
+                display:        flex;
+                flex-direction: column;
+                gap:            props.get(vars.$row-gap);
 
-        @include iro.bem-modifier('grid') {
-            display:               grid;
-            grid-template-columns: repeat(auto-fill, minmax(fn.dim(--grid --col-width), 1fr));
-            gap:                   fn.dim(--grid --col-gap);
+                @include bem.modifier('merge') {
+                        position:         relative;
+                        gap:              calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width));
+                        padding:          props.get(vars.$merge-padding);
+                        background-color: props.get(vars.$card-bg-color);
+                        border:           props.get(vars.$border-width) solid props.get(vars.$border-color);
+                        border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$merge-padding));
 
-            @include iro.bem-modifier('quiet') {
-                row-gap: fn.dim(--grid --row-gap);
-            }
-        }
+                        @include bem.elem('card') {
+                                &:not(:last-child) {
+                                        position:                relative;
+                                        border-end-start-radius: 0;
+                                        border-end-end-radius:   0;
 
-        @include iro.bem-modifier('masonry') {
-            display:    block;
-            columns:    auto fn.dim(--masonry --col-width);
-            column-gap: fn.dim(--masonry --col-gap);
+                                        &::after {
+                                                position:          absolute;
+                                                inset-block-start: calc(100% + props.get(vars.$merge-padding) + props.get(vars.$border-width));
+                                                inset-inline:      calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width));
+                                                display:           block;
+                                                block-size:        props.get(vars.$border-width);
+                                                content:           '';
+                                                background-color:  props.get(vars.$border-color);
+                                        }
+                                }
 
-            @include iro.bem-elem('card') {
-                margin-block-end: fn.dim(--masonry --col-gap);
-                break-inside:     avoid;
-            }
+                                &:hover,
+                                &:active,
+                                &:focus-visible {
+                                        transform:  none;
+                                }
 
-            @include iro.bem-modifier('quiet') {
-                @include iro.bem-elem('card') {
-                    margin-block-end: fn.dim(--masonry --row-gap);
-                }
-            }
-        }
+                                @include bem.next-twin-elem {
+                                        border-start-start-radius: 0;
+                                        border-start-end-radius:   0;
+                                }
+                        }
 
-        @include iro.bem-modifier('masonry-h') {
-            flex-flow: row wrap;
-            gap:       fn.dim(--masonry-h --col-gap);
+                        @include bem.modifier('borderless') {
+                                border-color: props.get(vars.$card-bg-color);
 
-            &::after {
-                content:     '';
-                display:     block;
-                flex:        1 0 auto;
-                inline-size: fn.dim(--masonry-h --row-height);
-                block-size:  0;
-            }
+                                @include bem.elem('card') {
+                                        &:not(:last-child) {
+                                                &::after {
+                                                        inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width));
+                                                }
+                                        }
+                                }
+                        }
 
-            @include iro.bem-elem('card') {
-                flex:            1 0 auto;
-                max-inline-size: 100%;
-            }
+                        @include bem.modifier('shadow') {
+                                box-shadow:
+                                        props.get(vars.$shadow-x)
+                                        props.get(vars.$shadow-y)
+                                        props.get(vars.$shadow-blur)
+                                        props.get(vars.$shadow-grow)
+                                        props.get(vars.$shadow-color);
+                        }
+                }
 
-            @include iro.bem-elem('card-image') {
-                block-size: fn.dim(--masonry-h --row-height);
-            }
+                @include bem.modifier('quiet') {
+                        row-gap: props.get(vars.$quiet--row-gap);
+                }
 
-            @include iro.bem-modifier('quiet') {
-                row-gap: fn.dim(--masonry-h --row-gap);
-            }
-        }
+                @include bem.modifier('grid') {
+                        display:               grid;
+                        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('aspect-5\\/4') {
-            @include iro.bem-elem('card-image') {
-                aspect-ratio: 5 / 4;
-            }
-        }
-    }
+                        @include bem.modifier('quiet') {
+                                row-gap: props.get(vars.$grid--quiet--row-gap);
+                        }
+                }
+
+                @include bem.modifier('grid-sm') {
+                        display:               grid;
+                        grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid-sm--col-width), 1fr));
+                        gap:                   props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap);
+
+                        @include bem.modifier('grid-sm') {
+                                @include media.media('<=md') {
+                                        display: flex;
+                                        gap:     props.get(vars.$row-gap);
+                                }
+                        }
+
+                        @include bem.modifier('quiet') {
+                                row-gap: props.get(vars.$grid-sm--quiet--row-gap);
+                        }
+                }
+
+                @include bem.modifier('masonry') {
+                        display:    block;
+                        columns:    auto props.get(vars.$masonry--col-width);
+                        column-gap: props.get(vars.$masonry--col-gap);
+
+                        @include bem.elem('card') {
+                                margin-block-end: props.get(vars.$masonry--row-gap);
+                                break-inside:     avoid;
+                        }
+
+                        @include bem.modifier('quiet') {
+                                @include bem.elem('card') {
+                                        margin-block-end: props.get(vars.$masonry--quiet--row-gap);
+                                }
+                        }
+                }
+
+                @include bem.modifier('masonry-h') {
+                        flex-flow: row wrap;
+                        gap:       props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap);
+
+                        @include bem.modifier('no-flush') {
+                                &::after {
+                                        display:     block;
+                                        flex:        1 0 auto;
+                                        inline-size: props.get(vars.$masonry-h--row-height);
+                                        content:     '';
+                                }
+                        }
+
+                        @include bem.elem('card') {
+                                flex:            1 0 auto;
+                                max-inline-size: 100%;
+                        }
+
+                        @include bem.elem('card-image') {
+                                block-size: props.get(vars.$masonry-h--row-height);
+                        }
+
+                        @include bem.modifier('quiet') {
+                                row-gap: props.get(vars.$masonry-h--quiet--row-gap);
+                        }
+                }
+
+                @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..75e72cc
--- /dev/null
+++ b/src/layouts/_card-list.vars.scss
@@ -0,0 +1,41 @@
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+@use '../objects/card' as card;
+
+$border-width:   props.def(--l-card-list--border-width, props.get(card.$border-width)) !default;
+$merge-padding:  props.def(--l-card-list--merge-padding, props.get(core.$border-width--thick)) !default;
+$rounding:       props.def(--l-card-list--rounding, props.get(card.$rounding)) !default;
+
+$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;
+
+$grid-sm--row-gap:        props.def(--l-card-list--grid-md--row-gap, props.get(core.$size--200)) !default;
+$grid-sm--col-gap:        props.def(--l-card-list--grid-md--col-gap, props.get(core.$size--200)) !default;
+$grid-sm--col-width:      props.def(--l-card-list--grid-md--col-width, props.get(core.$size--4600)) !default;
+$grid-sm--quiet--row-gap: props.def(--l-card-list--grid-sm--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;
+
+$shadow-x:    props.def(--l-card-list--shadow-x, props.get(card.$shadow-x)) !default;
+$shadow-y:    props.def(--l-card-list--shadow-y, props.get(card.$shadow-y)) !default;
+$shadow-blur: props.def(--l-card-list--shadow-blur, props.get(card.$shadow-blur)) !default;
+$shadow-grow: props.def(--l-card-list--shadow-grow, props.get(card.$shadow-grow)) !default;
+
+$card-bg-color:      props.def(--l-card-list--bg-color, props.get(card.$bg-color), 'color') !default;
+$border-color:       props.def(--l-card-list--border-color, props.get(card.$border-color), 'color') !default;
+$shadow-color:       props.def(--l-card-list--shadow-color, props.get(card.$shadow-color), 'color') !default;
+
+$border-color-dark:  props.def(--l-card-list--border-color, props.get(core.$theme, --bg-l1), 'dark') !default;
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index d13c4f3..0ae68c1 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 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-layout(iro.props-namespace()) {
-        @each $size in 'narrow-125' 'narrow' 'narrow-75' {
-            @include iro.bem-modifier($size) {
-                max-inline-size: fn.dim(--#{$size});
-                margin-inline:   auto;
-            }
-        }
+                @include bem.modifier('pad-i') {
+                        padding-inline: props.get(vars.$pad-i);
+                }
 
-        @include iro.bem-modifier('pad-i') {
-            padding-inline: fn.dim(--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..8f0cef6
--- /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..c99b253 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()) {
-        display: flex;
+@mixin styles {
+        @include bem.layout('flex') {
+                display: flex;
 
-        @include iro.bem-modifier('align-stretch') {
-            align-items: stretch;
-        }
+                @include bem.modifier('column') {
+                        flex-direction: column;
+                }
 
-        @include iro.bem-modifier('align-center') {
-            align-items: center;
-        }
+                @include bem.modifier('wrap') {
+                        flex-wrap: wrap;
+                }
 
-        @include iro.bem-modifier('align-start') {
-            align-items: flex-start;
-        }
-
-        @include iro.bem-modifier('align-end') {
-            align-items: flex-end;
-        }
-
-        @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..c804262 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -1,62 +1,59 @@
-@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()) {
-        display:        flex;
-        flex-direction: column;
-        gap:            fn.dim(--item-spacing-b) fn.dim(--label-spacing-i);
-    
-        @include iro.bem-elem('item') {
-            display: block;
-        }
+        @include bem.layout('form') {
+                display:        flex;
+                flex-direction: column;
+                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') {
-                align-self: start;
-            }
-        }
-    
-        @include iro.bem-modifier('row') {
-            flex-direction: row;
-            align-items:    flex-end;
-        }
-    
-        @include iro.bem-modifier('labels-start', 'labels-end') {
-            display:               grid;
-            grid-template-columns: auto 1fr;
-            grid-template-rows:    auto;
-            align-items:           baseline;
-    
-            @include iro.bem-elem('item') {
-                display: contents;
-            }
+                @include bem.elem('item-content') {
+                        @include bem.modifier('align-start') {
+                                align-self: start;
+                        }
+                }
+
+                @include bem.modifier('row') {
+                        flex-direction: row;
+                        align-items:    flex-end;
+                }
+
+                @include bem.modifier('labels-start', 'labels-end') {
+                        display:               grid;
+                        grid-template-rows:    auto;
+                        grid-template-columns: auto 1fr;
+                        align-items:           baseline;
+
+                        @include bem.elem('item') {
+                                display: contents;
+                        }
         
-            @include iro.bem-elem('item-label') {
-                grid-column:        1;
-                padding-inline-end: 0;
-            }
+                        @include bem.elem('item-label') {
+                                grid-column:        1;
+                                padding-inline-end: 0;
+                        }
         
-            @include iro.bem-elem('item-content') {
-                grid-column:        2;
-                margin-block-start: 0;
-            }
-        }
-    
-        @include iro.bem-modifier('labels-end') {
-            @include iro.bem-elem('item-label') {
-                text-align: end;
-            }
-        }
-    }
+                        @include bem.elem('item-content') {
+                                grid-column:        2;
+                                margin-block-start: 0;
+                        }
+                }
+
+                @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..929e60f 100644
--- a/src/layouts/_media.scss
+++ b/src/layouts/_media.scss
@@ -1,47 +1,41 @@
-@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 bem.layout('media') {
+                display:     flex;
+                gap:         props.get(vars.$gap);
+                align-items: center;
+                line-height: 1.4;
 
-    @include iro.bem-layout(iro.props-namespace()) {
-        display:     flex;
-        align-items: center;
-        gap:         fn.dim(--gap);
-        line-height: 1.4;
+                @each $mod, $size in vars.$sizes {
+                        @include bem.modifier($mod) {
+                                gap: props.get($size);
+                        }
+                }
 
-        @each $size in $sizes {
-            @include iro.bem-modifier($size) {
-                gap: fn.dim(--#{$size});
-            }
-        }
+                @include bem.modifier('wrap') {
+                        flex-wrap: wrap;
+                }
 
-        @include iro.bem-modifier('wrap') {
-            flex-wrap: wrap;
-        }
+                @include bem.elem('block') {
+                        flex: 0 0 auto;
 
-        @include iro.bem-elem('block') {
-            flex: 0 0 auto;
+                        @include bem.modifier('shrink', 'main') {
+                                flex-shrink:     1;
+                                min-inline-size: 0;
+                        }
 
-            @include iro.bem-modifier('shrink', 'main') {
-                flex-shrink:     1;
-                min-inline-size: 0;
-            }
-
-            @include iro.bem-modifier('main') {
-                inline-size: 100%;
-            }
-        }
-    }
+                        @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..dcb10de
--- /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..6d31d37 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()) {
-        overflow:        auto;
-        scrollbar-color: fn.global-color(--text-disabled) transparent;
-    }
+@mixin styles {
+        @include bem.layout('overflow') {
+                overflow:        auto;
+                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..6469a7d
--- /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
deleted file mode 100644
index 7fe9d44..0000000
--- a/src/objects/_action-button.scss
+++ /dev/null
@@ -1,343 +0,0 @@
-@use 'sass:list';
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-$sizes:         'sm' 'lg' 'xl' !default;
-$static-themes: 'black' 'white' !default;
-
-@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));
-
-    &::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));
-    }
-
-    &: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));
-
-        &: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));
-        }
-
-        &: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));
-        }
-    }
-
-    @include iro.bem-modifier('quiet') {
-        border-color:     transparent;
-        background-color: transparent;
-        color:            fn.color(list.join($theme, --quiet --disabled --label));
-
-        &:link,
-        &:visited,
-        &:enabled {
-            border-color:     transparent;
-            background-color: transparent;
-            color:            fn.color(list.join($theme, --quiet --label));
-
-            &:hover,
-            &:focus-visible {
-                border-color:     transparent;
-                background-color: fn.color(list.join($theme, --quiet --hover --bg));
-                color:            fn.color(list.join($theme, --quiet --hover --label));
-            }
-
-            &:active {
-                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));
-
-        &: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));
-    
-            &: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));
-            }
-    
-            &: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));
-            }
-        }
-    }
-}
-
-@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),
-                ),
-            ),
-        ),
-    ));
-
-    @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;
-        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);
-        text-align:       center;
-        text-decoration:  none;
-        text-overflow:    ellipsis;
-        white-space:      nowrap;
-
-        &::after {
-            content:        '';
-            display:        none;
-            position:       absolute;
-            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);
-            pointer-events: none;
-        }
-
-        &:link,
-        &:visited,
-        &:enabled {
-            &:focus-visible {
-                &::after {
-                    display: block;
-                }
-            }
-        }
-
-        @include static-theme;
-
-        @each $theme in $static-themes {
-            @include iro.bem-modifier(static-#{$theme}) {
-                @include static-theme(--static-#{$theme});
-            }
-        }
-
-        @include iro.bem-modifier('pill') {
-            padding-inline: fn.dim(--pad-i-pill);
-            border-radius:  100em;
-
-            &::after {
-                border-radius:  100em;
-            }
-        }
-
-        @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-modifier('pill') {
-                    padding-inline: fn.dim(--#{$size} --pad-i-pill);
-                }
-            }
-        }
-
-        @include iro.bem-modifier('icon') {
-            inline-size:    calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b));
-            padding-inline: 0;
-
-            @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;
-                }
-            }
-        }
-    }
-}
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index 067c00c..697ac18 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -1,43 +1,40 @@
-@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 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 transparent;
+                border-color:     props.get(vars.$border-color);
+                border-radius:    props.get(vars.$rounding);
+                box-shadow:
+                        props.get(vars.$shadow-x)
+                        props.get(vars.$shadow-y)
+                        props.get(vars.$shadow-blur)
+                        props.get(vars.$shadow-grow)
+                        props.get(vars.$shadow-color);
 
-    @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);
-
-        @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) {
+                                background-color: props.get(vars.$themes, $theme, --bg-color);
+                                border-color: props.get(vars.$themes, $theme, --border-color);
+                                box-shadow:
+                                        props.get(vars.$shadow-x)
+                                        props.get(vars.$shadow-y)
+                                        props.get(vars.$shadow-blur)
+                                        props.get(vars.$shadow-grow)
+                                        props.get(vars.$themes, $theme, --shadow-color);
+                        }
+                }
+        }
 }
diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss
new file mode 100644
index 0000000..62d3414
--- /dev/null
+++ b/src/objects/_alert.vars.scss
@@ -0,0 +1,36 @@
+@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;
+
+$shadow-x:    props.def(--o-alert--shadow-x, props.get(core.$shadow--l2--x)) !default;
+$shadow-y:    props.def(--o-alert--shadow-y, props.get(core.$shadow--l2--y)) !default;
+$shadow-blur: props.def(--o-alert--shadow-blur, props.get(core.$shadow--l2--blur)) !default;
+$shadow-grow: props.def(--o-alert--shadow-grow, props.get(core.$shadow--l2--grow)) !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) props.get(core.$theme, --text-mute-more) props.get(core.$theme, --text-mute), 'color') !default;
+
+$shadow-color:  props.def(--o-alert--shadow-color, props.get(core.$transparent-colors, --black, --200), '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: (
+                        --bg-color:     props.get(core.$theme, --bg-l2),
+                        --border-color: props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --800),
+                        --shadow-color: props.get(core.$theme, $key, --200),
+                )
+        ));
+}
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 19bff10..9d51ffb 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -1,167 +1,126 @@
-@use 'sass:list';
-@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: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl';
+@forward 'avatar.vars';
+@use 'avatar.vars' as vars;
 
-@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));
+@mixin status($indicator-size) {
+        @include bem.elem('status') {
+                inline-size: props.get($indicator-size);
+                block-size:  props.get($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
-            );
-        }
-    }
+                @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%,
+@mixin styles {
+        @include materialize-at-root(meta.module-variables('vars'));
 
-            --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%,
+        @include bem.object('avatar') {
+                position:       relative;
+                display:        inline-block;
+                font-size:      props.get(vars.$font-size);
+                font-style:     normal;
+                vertical-align: .05em;
+                border-radius:  props.get(vars.$rounding);
 
-            --key-focus: (
-                --border:  fn.global-color(--focus --border),
-                --outline: fn.global-color(--focus --outline),
-            ),
-        ),
-    ));
+                &::after {
+                        position:       absolute;
+                        inset:          calc(-1 * props.get(vars.$key-focus--border-offset));
+                        z-index:        1;
+                        display:        none;
+                        pointer-events: none;
+                        outline:        props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                        content:        '';
+                        border:         props.get(vars.$key-focus--border-offset) solid transparent;
+                        border-radius:  props.get(vars.$rounding);
+                        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-object(iro.props-namespace()) {
-        display:        inline-block;
-        position:       relative;
-        border-radius:  fn.dim(--rounding);
-        font-size:      fn.dim(--font-size);
-        font-style:     normal;
-        vertical-align: .05em;
+                @include bem.elem('status') {
+                        position:         absolute;
+                        inset-block-end:  0;
+                        inset-inline-end: 0;
+                }
 
-        &::after {
-            content:        '';
-            display:        none;
-            position:       absolute;
-            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);
-            pointer-events: none;
-        }
+                @include status(vars.$indicator-size);
 
-        @include iro.bem-elem('status') {
-            position:         absolute;
-            inset-inline-end: 0;
-            inset-block-end:  0;
-        }
+                @include bem.elem('content') {
+                        display:          block;
+                        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 status;
+                @include bem.modifier('circle') {
+                        border-radius: 100%;
 
-        @include iro.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);
-            text-align:       center;
-            object-fit:       cover;
-            object-position:  center center;
-        }
+                        &::after {
+                                border-radius: 100%;
+                        }
 
-        @include iro.bem-modifier('circle') {
-            border-radius: 100%;
+                        @include bem.elem('content') {
+                                border-radius: 100%;
+                        }
+                }
 
-            &::after {
-                border-radius: 100%;
-            }
+                @include bem.modifier('placeholder') {
+                        @include bem.elem('content') {
+                                background-color: hsl(0, 0%, props.get(vars.$bg-color--l));
+                        }
+                }
 
-            @include iro.bem-elem('content') {
-                border-radius: 100%;
-            }
-        }
+                @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 iro.bem-modifier('placeholder') {
-            @include iro.bem-elem('content') {
-                background-color: hsl(0, 0%, fn.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)));
+                        }
+                }
 
-        @include iro.bem-modifier('colored') {
-            @include iro.bem-elem('content') {
-                background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l));
-                color:            #fff;
-            }
-        }
-
-        @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);
+                                }
+                        }
+                }
     
-        &:focus-visible {
-            &::after {
-                display: block;
-            }
-        }
-    }
+                &:focus-visible {
+                        &::after {
+                                display: block;
+                        }
+                }
+        }
 }
diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss
new file mode 100644
index 0000000..2374f5a
--- /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..346cf5f 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;
-        position:         fixed;
-        z-index:          fn.dim(--z-index);
-        inset:            0;
-        box-sizing:       border-box;
-        flex-direction:   column;
-        overflow:         auto;
-        background-color: fn.color(--bg);
-        backdrop-filter:  blur(fn.dim(--blur));
-    }
+@mixin styles {
+        @include materialize-at-root(meta.module-variables('vars'));
+
+        @include bem.object('backdrop') {
+                position:         fixed;
+                inset:            0;
+                z-index:          props.get(vars.$z-index);
+                box-sizing:       border-box;
+                display:          flex;
+                flex-direction:   column;
+                overflow:         auto;
+                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
deleted file mode 100644
index 4e1662f..0000000
--- a/src/objects/_badge.scss
+++ /dev/null
@@ -1,300 +0,0 @@
-@use 'sass:string';
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-
-$sizes:         'sm' 'lg' 'xl' !default;
-$themes:        'accent' 'positive' 'negative' 'warning' !default;
-$static-themes: 'black' 'white' !default;
-
-@mixin theme($theme) {
-    background-color: fn.color(--#{$theme} --bg);
-    color:            fn.color(--#{$theme} --label);
-
-    &:link,
-    &:visited,
-    &:enabled {
-        &:hover,
-        &:focus-visible {
-            background-color: fn.color(--#{$theme} --hover --bg);
-            color:            fn.color(--#{$theme} --hover --label);
-        }
-
-        &:active {
-            background-color: fn.color(--#{$theme} --active --bg);
-            color:            fn.color(--#{$theme} --active --label);
-        }
-    }
-
-    @include iro.bem-modifier('quiet') {
-        background-color: fn.color(--#{$theme}-quiet --bg);
-        color:            fn.color(--#{$theme}-quiet --label);
-
-        &:link,
-        &:visited,
-        &:enabled {
-            &:hover,
-            &:focus-visible {
-                background-color: fn.color(--#{$theme}-quiet --hover --bg);
-                color:            fn.color(--#{$theme}-quiet --hover --label);
-            }
-
-            &:active {
-                background-color: fn.color(--#{$theme}-quiet --active --bg);
-                color:            fn.color(--#{$theme}-quiet --active --label);
-            }
-        }
-    }
-
-    @if string.slice($theme, 1, 7) == 'static-' {
-        &::after {
-            outline:    fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border);
-            box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline);
-        }
-    }
-}
-
-@include iro.props-namespace('badge') {
-    @include iro.props-store((
-        --dims: (
-            --pad-b:       fn.global-dim(--size --50),
-            --pad-i:       fn.global-dim(--size --100),
-            --pad-i-pill:  fn.global-dim(--size --150),
-            --pad-i-label: fn.global-dim(--size --50),
-            --rounding:    fn.global-dim(--rounding),
-            --font-size:   fn.global-dim(--font-size --75),
-
-            --sm: (
-                --pad-b:       fn.global-dim(--size --25),
-                --pad-i:       fn.global-dim(--size --75),
-                --pad-i-pill:  fn.global-dim(--size --125),
-                --pad-i-label: fn.global-dim(--size --25),
-                --font-size:   fn.global-dim(--font-size --50),
-            ),
-            --lg: (
-                --pad-b:       fn.global-dim(--size --75),
-                --pad-i:       fn.global-dim(--size --125),
-                --pad-i-pill:  fn.global-dim(--size --175),
-                --pad-i-label: fn.global-dim(--size --50),
-                --font-size:   fn.global-dim(--font-size --100),
-            ), 
-            --xl: ( 
-                --pad-b:       fn.global-dim(--size --100),
-                --pad-i:       fn.global-dim(--size --150),
-                --pad-i-pill:  fn.global-dim(--size --225),
-                --pad-i-label: fn.global-dim(--size --75),
-                --font-size:   fn.global-dim(--font-size --150),
-            ),
-            
-            --key-focus: (
-                --border:        fn.global-dim(--key-focus --border),
-                --border-offset: fn.global-dim(--key-focus --border-offset),
-                --outline:       fn.global-dim(--key-focus --outline),
-            ),
-        ),
-        --colors: (
-            --bg:    fn.global-color(--text-mute),
-            --label: fn.global-color(--bg-l2),
-            --hover: (
-                --bg: fn.global-color(--text),
-            ),
-            --active: (
-                --bg: fn.global-color(--heading),
-            ),
-            --key-focus: (
-                --label:   fn.global-color(--focus --text),
-                --border:  fn.global-color(--focus --border),
-                --outline: fn.global-color(--focus --outline),
-            ),
-
-            --quiet: (
-                --bg:    fn.global-color(--border-mute),
-                --label: fn.global-color(--heading),
-                --hover: (
-                    --bg: fn.global-color(--border),
-                ),
-                --active: (
-                    --bg: fn.global-color(--border-strong),
-                ),
-            ),
-        ),
-    ));
-
-    @each $theme in $themes {
-        @include iro.props-store((
-            --colors: (
-                --#{$theme}: (
-                    --bg:    fn.global-color(--#{$theme}-static --900),
-                    --label: fn.global-color(--#{$theme}-static --900-text),
-                    --hover: (
-                        --bg:    fn.global-color(--#{$theme}-static --1000),
-                        --label: fn.global-color(--#{$theme}-static --1000-text),
-                    ),
-                    --active: (
-                        --bg:    fn.global-color(--#{$theme}-static --1100),
-                        --label: fn.global-color(--#{$theme}-static --1000-text),
-                    ),
-                ),
-
-                --#{$theme}-quiet: (
-                    --bg:    fn.global-color(--#{$theme} --200),
-                    --label: fn.global-color(--#{$theme} --1100),
-                    --hover: (
-                        --bg:    fn.global-color(--#{$theme} --300),
-                        --label: fn.global-color(--#{$theme} --1200),
-                    ),
-                    --active: (
-                        --bg:    fn.global-color(--#{$theme} --400),
-                        --label: fn.global-color(--#{$theme} --1300),
-                    ),
-                )
-            ),
-        ));
-    }
-
-    @each $theme in $static-themes {
-        @include iro.props-store((
-            --colors: (
-                --static-#{$theme}: (
-                    --bg:    fn.global-color(--#{$theme}-transparent --800),
-                    --label: fn.global-color(--#{$theme}-transparent --text),
-                    --hover: (
-                        --bg:    fn.global-color(--#{$theme}-transparent --900),
-                        --label: fn.global-color(--#{$theme}-transparent --text),
-                    ),
-                    --active: (
-                        --bg:    fn.global-color(--#{$theme}-transparent --900),
-                        --label: fn.global-color(--#{$theme}-transparent --text),
-                    ),
-                    --key-focus: (
-                        --bg:      fn.global-color(--#{$theme}-transparent --100),
-                        --label:   fn.global-color(--#{$theme}-transparent --900),
-                        --border:  fn.global-color(--#{$theme}-transparent --900),
-                        --outline: fn.global-color(--#{$theme}-transparent --300),
-                    ),
-                ),
-
-                --static-#{$theme}-quiet: (
-                    --bg:    fn.global-color(--#{$theme}-transparent --200),
-                    --label: fn.global-color(--#{$theme}-transparent --900),
-                    --hover: (
-                        --bg:    fn.global-color(--#{$theme}-transparent --300),
-                        --label: fn.global-color(--#{$theme}-transparent --900),
-                    ),
-                    --active: (
-                        --bg:    fn.global-color(--#{$theme}-transparent --400),
-                        --label: fn.global-color(--#{$theme}-transparent --900),
-                    ),
-                )
-            )
-        ));
-    }
-
-    @include iro.bem-object(iro.props-namespace()) {
-        display:          inline-block;
-        position:         relative;
-        padding-block:    fn.dim(--pad-b);
-        padding-inline:   fn.dim(--pad-i);
-        border-radius:    fn.dim(--rounding);
-        background-color: fn.color(--bg);
-        background-clip:  padding-box;
-        color:            fn.color(--label);
-        font-size:        fn.dim(--font-size);
-        line-height:      fn.global-dim(--font --standard --line-height);
-        text-align:       center;
-        text-decoration:  none;
-
-        &::after {
-            content:        '';
-            display:        none;
-            position:       absolute;
-            z-index:        1;
-            inset:          calc(-1 * fn.dim(--key-focus --border-offset));
-            border-radius:  calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
-            outline:        fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
-            box-shadow:     0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
-            pointer-events: none;
-        }
-
-        &:link,
-        &:visited,
-        &:enabled {
-            &:hover,
-            &:focus-visible {
-                background-color: fn.color(--hover --bg);
-            }
-
-            &:active {
-                background-color: fn.color(--active --bg);
-            }
-        }
-
-        @include iro.bem-elem('label') {
-            margin-inline: fn.dim(--pad-i-label);
-        }
-
-        @include iro.bem-modifier('quiet') {
-            background-color: fn.color(--quiet --bg);
-            color:            fn.color(--quiet --label);
-
-            &:link,
-            &:visited,
-            &:enabled {
-                &:hover,
-                &:focus-visible {
-                    background-color: fn.color(--quiet --hover --bg);
-                }
-
-                &:active {
-                    background-color: fn.color(--quiet --active --bg);
-                }
-            }
-        }
-    
-        @each $theme in $themes {
-            @include iro.bem-modifier($theme) {
-                @include theme($theme);
-            }
-        }
-
-        &:link,
-        &:visited,
-        &:enabled {
-            &:focus-visible {
-                &::after {
-                    display: block;
-                }
-            }
-        }
-    
-        @each $theme in $static-themes {
-            @include iro.bem-modifier(static-#{$theme}) {
-                @include theme(static-#{$theme});
-            }
-        }
-    
-        @include iro.bem-modifier('pill') {
-            padding-inline: fn.dim(--pad-i-pill);
-            border-radius:  10em;
-
-            &::after {
-                border-radius: 10em;
-            }
-        }
-    
-        @each $size in $sizes {
-            @include iro.bem-modifier($size) {
-                padding-block:  fn.dim(--#{$size} --pad-b);
-                padding-inline: fn.dim(--#{$size} --pad-i);
-                font-size:      fn.dim(--#{$size} --font-size);
-
-                @include iro.bem-elem('label') {
-                    margin-inline: fn.dim(--#{$size} --pad-i-label);
-                }
-        
-                @include iro.bem-modifier('pill') {
-                    padding-inline: fn.dim(--#{$size} --pad-i-pill);
-                }
-            }
-        }
-    }
-}
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 3ef4813..8163cf9 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -1,301 +1,285 @@
 @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;
-$themes:        'accent' 'negative' !default;
-$static-themes: 'black' 'white' !default;
+@forward 'button.vars';
+@use 'button.vars' as vars;
 
-@mixin theme($theme: ()) {
-    &:link,
-    &:visited,
-    &:enabled {
-        border-color:     transparent;
-        background-color: fn.color(list.join($theme, --bg));
-        color:            fn.color(list.join($theme, --label));
-    }
-    
-    @include iro.bem-modifier('outline') {
-        &:link,
-        &:visited,
-        &:enabled {
-            border-color:     fn.color(list.join($theme, --outline-border));
-            background-color: transparent;
-            color:            fn.color(list.join($theme, --outline-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)...);
 
-    &:link,
-    &:visited,
-    &:enabled {
-        &:hover,
-        &:focus-visible {
-            border-color:     transparent;
-            background-color: fn.color(list.join($theme, --hover --bg));
-            color:            fn.color(list.join($theme, --hover --label));
-        }
+        &::after {
+                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)...);
+        }
 
-        &:active {
-            border-color:     transparent;
-            background-color: fn.color(list.join($theme, --active --bg));
-            color:            fn.color(list.join($theme, --active --label));
-        }
-    }
-}
+        &:link,
+        &:visited,
+        &:enabled {
+                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)...);
+                box-shadow:
+                        props.get(vars.$shadow-x)
+                        props.get(vars.$shadow-y)
+                        props.get(vars.$shadow-blur)
+                        props.get(vars.$shadow-grow)
+                        props.get($theme, list.join($key, --shadow-color)...);
+            
+                &:hover,
+                &:focus-visible {
+                        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)...);
+                }
 
-@mixin static-theme($theme: ()) {
-    border-color:     transparent;
-    background-color: fn.color(list.join($theme, --disabled --bg));
-    color:            fn.color(list.join($theme, --disabled --label));
+                &:active {
+                        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)...);
+                        box-shadow:       none;
+                }
+        }
 
-    &::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));
-    }
-    
-    @include iro.bem-modifier('outline') {
-        border-color:     fn.color(list.join($theme, --disabled --outline-border));
-        background-color: transparent;
-    }
+        @include bem.modifier('badge') {
+                color:            props.get($theme, list.join($key, --badge --label-color)...);
+                background-color: props.get($theme, list.join($key, --badge --bg-color)...);
+                border-color:     props.get($theme, list.join($key, --badge --border-color)...);
+                box-shadow:       none;
 
-    @include theme($theme);
+                &:link,
+                &:visited,
+                &:enabled {
+                        color:            props.get($theme, list.join($key, --badge --label-color)...);
+                        background-color: props.get($theme, list.join($key, --badge --bg-color)...);
+                        border-color:     props.get($theme, list.join($key, --badge --border-color)...);
+                        box-shadow:       none;
 
-    @include iro.bem-modifier('primary') {
-        @include theme(list.join($theme, --primary));
-    }
-}
+                        &:hover,
+                        &:focus-visible {
+                                color:            props.get($theme, list.join($key, --badge --hover --label-color)...);
+                                background-color: props.get($theme, list.join($key, --badge --hover --bg-color)...);
+                                border-color:     props.get($theme, list.join($key, --badge --hover --border-color)...);
+                        }
 
-@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),
+                        &:active {
+                                color:            props.get($theme, list.join($key, --badge --active --label-color)...);
+                                background-color: props.get($theme, list.join($key, --badge --active --bg-color)...);
+                                border-color:     props.get($theme, list.join($key, --badge --active --border-color)...);
+                        }
+                }
+        }
 
-            --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),
+        @include bem.modifier('quiet') {
+                color:            props.get($theme, list.join($key, --quiet --disabled --label-color)...);
+                background-color: transparent;
+                border-color:     transparent;
 
-            --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),
+                &:link,
+                &:visited,
+                &:enabled {
+                        color:            props.get($theme, list.join($key, --quiet --label-color)...);
+                        background-color: transparent;
+                        border-color:     transparent;
+                        box-shadow:       none;
 
-                --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),
-                ),
-            ),
-        ),
-    ));
+                        &: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;
+                        }
 
-    @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),
+                        &: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;
+                        }
+                }
+        }
 
-                    --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),
-                    ),
-                ),
-            ),
-        ));
-    }
+        @include bem.is('highlighted') {
+                &:link,
+                &:visited,
+                &:enabled {
+                        &,
+                        &:hover,
+                        &:focus-visible {
+                                border-color: props.get($theme, list.join($key, --highlighted --border-color)...);
+                        }
 
-    @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),
+                        box-shadow:
+                                0 0 0 1px props.get($theme, list.join($key, --highlighted --border-color)...),
+                                props.get(vars.$shadow-x)
+                                props.get(vars.$shadow-y)
+                                props.get(vars.$shadow-blur)
+                                props.get(vars.$shadow-grow)
+                                props.get($theme, list.join($key, --highlighted --shadow-color)...);
 
-                    --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),
-                    ),
+                        &:focus-visible {
+                                box-shadow:
+                                        props.get(vars.$shadow-x)
+                                        props.get(vars.$shadow-y)
+                                        props.get(vars.$shadow-blur)
+                                        props.get(vars.$shadow-grow)
+                                        props.get($theme, list.join($key, --shadow-color)...);
+                        }
+                }
+        }
 
-                    --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),
+        @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)...);
+
+                @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'badge') {
+                        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)...);
+                }
+
+                &:link,
+                &:visited,
+                &:enabled {
+                        &:hover,
+                        &:focus-visible {
+                                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)...);
+                        }
     
-                        --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),
-                        ),
-                    ),
-                ),
-            ),
-        ));
-    }
+                        &:active {
+                                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.bem-object(iro.props-namespace()) {
-        display:          inline-block;
-        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);
-        font-weight:      500;
-        line-height:      fn.dim(--line-height);
-        text-align:       center;
-        text-decoration:  none;
+@mixin styles {
+        @include materialize-at-root(meta.module-variables('vars'));
 
-        &::after {
-            content:        '';
-            display:        none;
-            position:       absolute;
-            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);
-            pointer-events: none;
-        }
+        @include bem.object('button') {
+                position:         relative;
+                display:          inline-block;
+                padding-block:    props.get(vars.$pad-b);
+                padding-inline:   props.get(vars.$pad-i);
+                text-overflow:    ellipsis;
+                font-size:        props.get(vars.$font-size);
+                line-height:      props.get(vars.$line-height);
+                text-align:       center;
+                white-space:      nowrap;
+                text-decoration:  none;
+                border:           props.get(vars.$border-width) solid transparent;
+                border-radius:    props.get(vars.$rounding);
+                transition:       color .1s, background-color .1s, border-color .1s, box-shadow .1s;
 
-        &:link,
-        &:visited,
-        &:enabled {
-            &:focus-visible {
-                &::after {
-                    display: block;
-                }
-            }
-        }
+                &::after {
+                        position:       absolute;
+                        inset:          calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset));
+                        z-index:        1;
+                        display:        none;
+                        pointer-events: none;
+                        outline:        transparent solid props.get(vars.$key-focus--border-width);
+                        content:        '';
+                        border-radius:  calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+                }
 
-        @include iro.bem-elem('label') {
-            margin-inline: fn.dim(--pad-i-label);
-        }
-    
-        @include iro.bem-modifier('block') {
-            display: block;
-        }
-    
-        @include iro.bem-modifier('outline') {
-            border-color:     fn.color(--disabled --outline-border);
-            background-color: transparent;
-        }
+                &:link,
+                &:visited,
+                &:enabled {
+                        &:focus-visible {
+                                transition: none;
 
-        @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);
+                                &::after {
+                                        display: block;
+                                }
+                        }
+                }
 
-                @include iro.bem-elem('label') {
-                    margin-inline: fn.dim(--#{$size} --pad-i-label);
-                }
-            }
-        }
+                @include bem.elem('label') {
+                        margin-inline: props.get(vars.$pad-i-label);
+                }
 
-        @include static-theme;
-    
-        @each $theme in $themes {
-            @include iro.bem-modifier($theme) {
-                @include theme(--#{$theme});
-            }
-        }
-    
-        @each $theme in $static-themes {
-            @include iro.bem-modifier(static-#{$theme}) {
-                @include static-theme(--static-#{$theme});
-            }
-        }
+                @include -apply-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);
+                        }
+                }
+
+                @include bem.modifier('pill') {
+                        padding-inline: props.get(vars.$pad-i-pill);
+                        border-radius:  100em;
+
+                        &::after {
+                                border-radius:  100em;
+                        }
+                }
+
+                @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 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 bem.modifier('align-block') {
+                        margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width));
+
+                        @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 iro.bem-modifier('round') {
-            inline-size:    calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b));
-            padding-inline: 0;
-            border-radius:  100em;
-        }
-    }
+                                        @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/_button.vars.scss b/src/objects/_button.vars.scss
new file mode 100644
index 0000000..6e2298f
--- /dev/null
+++ b/src/objects/_button.vars.scss
@@ -0,0 +1,374 @@
+@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;
+$border-width: props.def(--o-button--border-width, props.get(core.$border-width--thin)) !default;
+$rounding:     props.def(--o-button--rounding, props.get(core.$rounding--sm)) !default;
+
+$pad-i--sm:       props.def(--o-button--sm--pad-i, props.get(core.$size--75)) !default;
+$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default;
+$pad-i-pill--sm:  props.def(--o-button--sm--pad-i-pill, props.get(core.$size--115)) !default;
+$pad-b--sm:       props.def(--o-button--sm--pad-b, props.get(core.$size--40)) !default;
+$font-size--sm:   props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default;
+
+$pad-i:        props.def(--o-button--pad-i, props.get(core.$size--115)) !default;
+$pad-i-label:  props.def(--o-button--pad-i-label, props.get(core.$size--40)) !default;
+$pad-i-pill:   props.def(--o-button--pad-i-pill, props.get(core.$size--150)) !default;
+$pad-b:        props.def(--o-button--pad-b, props.get(core.$size--85)) !default;
+$font-size:    props.def(--o-button--font-size, props.get(core.$font-size--100)) !default;
+
+$pad-i--lg:       props.def(--o-button--lg--pad-i, props.get(core.$size--160)) !default;
+$pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--65)) !default;
+$pad-i-pill--lg:  props.def(--o-button--lg--pad-i-pill, props.get(core.$size--175)) !default;
+$pad-b--lg:       props.def(--o-button--lg--pad-b, props.get(core.$size--115)) !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--200)) !default;
+$pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--85)) !default;
+$pad-i-pill--xl:  props.def(--o-button--xl--pad-i-pill, props.get(core.$size--225)) !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;
+
+$shadow-x:    props.def(--o-button--shadow-x, props.get(core.$shadow--l1--x)) !default;
+$shadow-y:    props.def(--o-button--shadow-y, props.get(core.$shadow--l1--y)) !default;
+$shadow-blur: props.def(--o-button--shadow-blur, props.get(core.$shadow--l1--blur)) !default;
+$shadow-grow: props.def(--o-button--shadow-grow, props.get(core.$shadow--l1--grow)) !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;
+
+$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-button, (), 'color');
+
+$default-theme-override: () !default;
+$default-theme: map.deep-merge((
+        --bg-color:             props.get(core.$theme, --bg-l2),
+        --label-color:          props.get(core.$theme, --text),
+        --border-color:         props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong),
+        --shadow-color:         props.get(core.$theme, --shadow),
+
+        --hover: (
+                --bg-color:     props.get(core.$theme, --bg-l1),
+                --label-color:  props.get(core.$theme, --heading),
+                --border-color: props.get(core.$theme, --border),
+        ),
+
+        --active: (
+                --bg-color:     props.get(core.$theme, --border-mute),
+                --label-color:  props.get(core.$theme, --heading),
+                --border-color: props.get(core.$theme, --border-strong),
+        ),
+
+        --disabled: (
+                --bg-color:     transparent,
+                --label-color:  props.get(core.$theme, --border-strong),
+                --border-color: props.get(core.$theme, --text-disabled),
+        ),
+
+        --key-focus: (
+                --border-color:  props.get(core.$theme, --focus, --border),
+                --outline-color: props.get(core.$theme, --focus, --outline),
+        ),
+
+        --highlighted: (
+                --border-color: props.get(core.$theme, --focus, --border),
+                --shadow-color: props.get(core.$theme, --focus, --outline),
+        ),
+
+        --selected: (
+                --bg-color:     props.get(core.$theme, --text),
+                --label-color:  props.get(core.$theme, --base, --50),
+                --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading),
+
+                --hover: (
+                        --bg-color:     props.get(core.$theme, --heading),
+                        --label-color:  props.get(core.$theme, --base, --50),
+                        --border-color: props.get(core.$theme, --heading),
+                ),
+
+                --active: (
+                        --bg-color:     props.get(core.$theme, --heading),
+                        --label-color:  props.get(core.$theme, --base, --50),
+                        --border-color: props.get(core.$theme, --heading),
+                ),
+
+                --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),
+                ),
+        ),
+
+        --badge: (
+                --bg-color:     props.get(core.$theme, --border-mute),
+                --label-color:  props.get(core.$theme, --heading),
+                --border-color: props.get(core.$theme, --border-mute),
+
+                --hover: (
+                        --bg-color:     props.get(core.$theme, --border),
+                        --label-color:  props.get(core.$theme, --heading),
+                        --border-color: props.get(core.$theme, --border),
+                ),
+
+                --active: (
+                        --bg-color:     props.get(core.$theme, --border-strong),
+                        --label-color:  props.get(core.$theme, --heading),
+                        --border-color: props.get(core.$theme, --border-strong),
+                ),
+        ),
+
+        --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-button, $default-theme, 'color');
+
+$default-theme-dark-override: () !default;
+$default-theme-dark: map.deep-merge((
+        --bg-color:             props.get(core.$theme, --border-mute),
+        --border-color:         props.get(core.$theme, --border-mute),
+
+        --hover: (
+                --bg-color:     props.get(core.$theme, --border),
+                --border-color: props.get(core.$theme, --border),
+        ),
+
+        --active: (
+                --bg-color:     props.get(core.$theme, --border-strong),
+                --border-color: props.get(core.$theme, --border-strong),
+        ),
+
+        --selected: (
+                --border-color: props.get(core.$theme, --text),
+        ),
+), $default-theme-override) !default;
+$default-theme-dark: props.def(--o-button, $default-theme-dark, 'dark');
+
+@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, --200),
+                        --label-color:  props.get(core.$transparent-colors, $theme, --900),
+                        --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400),
+                        --shadow-color: props.get(core.$transparent-colors, --black, --200),
+
+                        --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, --400),
+                        ),
+
+                        --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, --500),
+                        ),
+
+                        --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),
+                        ),
+
+                        --highlighted: (
+                                --border-color: props.get(core.$transparent-colors, $theme, --900),
+                                --shadow-color: props.get(core.$transparent-colors, --black, --200),
+                        ),
+
+                        --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) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200),
+
+                                --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),
+                                ),
+                        ),
+
+                        --badge: (
+                                --bg-color:     props.get(core.$transparent-colors, $theme, --200),
+                                --label-color:  props.get(core.$transparent-colors, $theme, --900),
+                                --border-color: transparent,
+        
+                                --hover: (
+                                        --bg-color:     props.get(core.$transparent-colors, $theme, --300),
+                                        --label-color:  props.get(core.$transparent-colors, $theme, --900),
+                                        --border-color: transparent,
+                                ),
+        
+                                --active: (
+                                        --bg-color:     props.get(core.$transparent-colors, $theme, --400),
+                                        --label-color:  props.get(core.$transparent-colors, $theme, --900),
+                                        --border-color: transparent,
+                                ),
+                        ),
+
+                        --quiet: (
+                                --label-color:  props.get(core.$transparent-colors, $theme, --900),
+        
+                                --hover: (
+                                        --bg-color:    props.get(core.$transparent-colors, $theme, --200),
+                                        --label-color: props.get(core.$transparent-colors, $theme, --900),
+                                ),
+        
+                                --active: (
+                                        --bg-color:    props.get(core.$transparent-colors, $theme, --300),
+                                        --label-color: props.get(core.$transparent-colors, $theme, --900),
+                                ),
+        
+                                --disabled: (
+                                        --label-color: props.get(core.$transparent-colors, $theme, --500),
+                                ),
+                        ),
+                )
+        ));
+}
+
+$themes-config: (
+        accent:   --accent,
+        positive: --positive,
+        negative: --negative,
+        warning:  --warning,
+) !default;
+
+@each $theme, $key in $themes-config {
+        $themes: props.merge($themes, (
+                --#{$theme}: (
+                        --bg-color:     props.get(core.$theme, $key, --100),
+                        --label-color:  props.get(core.$theme, $key, --1100),
+                        --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600),
+                        --shadow-color: props.get(core.$theme, $key, --200),
+
+                        --hover: (
+                                --bg-color:     props.get(core.$theme, $key, --200),
+                                --label-color:  props.get(core.$theme, $key, --1200),
+                                --border-color: props.get(core.$theme, $key, --600),
+                        ),
+
+                        --active: (
+                                --bg-color:     props.get(core.$theme, $key, --300),
+                                --label-color:  props.get(core.$theme, $key, --1300),
+                                --border-color: props.get(core.$theme, $key, --800),
+                        ),
+
+                        --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),
+                        ),
+
+                        --highlighted: (
+                                --border-color: props.get(core.$theme, $key, --900),
+                                --shadow-color: props.get(core.$theme, $key, --200),
+                        ),
+
+                        --selected: (
+                                --bg-color:     props.get(core.$theme, #{$key}-static, --900),
+                                --label-color:  props.get(core.$theme, #{$key}-static, --900-text),
+                                --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000),
+
+                                --hover: (
+                                        --bg-color:     props.get(core.$theme, #{$key}-static, --1000),
+                                        --label-color:  props.get(core.$theme, #{$key}-static, --1000-text),
+                                        --border-color: props.get(core.$theme, #{$key}-static, --1000),
+                                ),
+
+                                --active: (
+                                        --bg-color:     props.get(core.$theme, #{$key}-static, --1100),
+                                        --label-color:  props.get(core.$theme, #{$key}-static, --1100-text),
+                                        --border-color: props.get(core.$theme, #{$key}-static, --1100),
+                                ),
+
+                                --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),
+                                ),
+                        ),
+
+                        --badge: (
+                                --bg-color:     props.get(core.$theme, $key, --100),
+                                --label-color:  props.get(core.$theme, $key, --1100),
+                                --border-color: props.get(core.$theme, $key, --300),
+        
+                                --hover: (
+                                        --bg-color:     props.get(core.$theme, $key, --200),
+                                        --label-color:  props.get(core.$theme, $key, --1200),
+                                        --border-color: props.get(core.$theme, $key, --400),
+                                ),
+        
+                                --active: (
+                                        --bg-color:     props.get(core.$theme, $key, --300),
+                                        --label-color:  props.get(core.$theme, $key, --1300),
+                                        --border-color: props.get(core.$theme, $key, --500),
+                                ),
+                        ),
+
+                        --quiet: (
+                                --label-color:  props.get(core.$theme, $key, --1100),
+        
+                                --hover: (
+                                        --bg-color:    props.get(core.$theme, $key, --200),
+                                        --label-color: props.get(core.$theme, $key, --1200),
+                                ),
+        
+                                --active: (
+                                        --bg-color:    props.get(core.$theme, $key, --300),
+                                        --label-color: props.get(core.$theme, $key, --1300),
+                                ),
+        
+                                --disabled: (
+                                        --label-color: props.get(core.$theme, --border-strong),
+                                ),
+                        ),
+                )
+        ));
+}
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index f56a96c..5ae203d 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -1,165 +1,283 @@
-@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 'avatar.vars' as avatar;
 
-@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),
+@forward 'card.vars';
+@use 'card.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: (
-            --bg:       fn.global-color(--bg-l2),
-            --border:   fn.global-color(--border-mute),
-            --divider:  fn.global-color(--border-mute),
+@mixin styles {
+        @include materialize-at-root(meta.module-variables('vars'));
 
-            --hover: (
-                --border: fn.global-color(--border),
-            ),
+        @include bem.object('card') {
+                position:         relative;
+                display:          flex;
+                flex-direction:   column;
+                background-color: props.get(vars.$bg-color);
+                border:           props.get(vars.$border-width) solid transparent;
+                border-color:     props.get(vars.$border-color);
+                border-radius:    props.get(vars.$rounding);
+                transition:       transform .2s, background-color .2s, border-color .2s, box-shadow .2s;
 
-            --key-focus: (
-                --label:   fn.global-color(--focus --text),
-                --border:  fn.global-color(--focus --border),
-                --outline: fn.global-color(--focus --outline),
-            ),
+                @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+                        &:hover,
+                        &:active,
+                        &:focus-visible {
+                                background-color: props.get(vars.$hover--bg-color);
+                                border-color:     props.get(vars.$hover--border-color);
+                                box-shadow:       none;
+                                transform:        translateY(props.get(vars.$hover--offset-b));
+                        }
 
-            --quiet: (
-                --image: fn.global-color(--bg-base),
+                        &:focus-visible {
+                                margin:        calc(-1 * props.get(vars.$key-focus--border-width));
+                                outline:       props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                                border:        calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent;
+                                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+                                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);
+                                transition:    transform .2s;
+                        }
+                }
 
-                --hover: (
-                    --image: fn.global-color(--border),
-                ),
-            )
-        ),
-    ));
+                @include bem.modifier('borderless') {
+                        border-color: props.get(vars.$bg-color);
+                }
 
-    @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 bem.modifier('shadow') {
+                        box-shadow:
+                                props.get(vars.$shadow-x)
+                                props.get(vars.$shadow-y)
+                                props.get(vars.$shadow-blur)
+                                props.get(vars.$shadow-grow)
+                                props.get(vars.$shadow-color);
 
-        @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
-            &:hover,
-            &:focus-visible,
-            &:active {
-                border-color: fn.color(--hover --border);
-            }
+                        @include bem.modifier('quiet') {
+                                @include bem.elem('image') {
+                                        box-shadow:
+                                                props.get(vars.$shadow-x)
+                                                props.get(vars.$shadow-y)
+                                                props.get(vars.$shadow-blur)
+                                                props.get(vars.$shadow-grow)
+                                                props.get(vars.$shadow-color);
+                                }
+                        }
+                }
 
-            &: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);
-            }
-        }
+                @include bem.elem('avatar') {
+                        margin-block-start:  props.get(vars.$pad-b);
+                        margin-inline-start: props.get(vars.$pad-i);
+                }
 
-        @include iro.bem-elem('avatar') {
-            margin-block-start:  fn.dim(--pad-b);
-            margin-inline-start: fn.dim(--pad-i);
-        }
+                @include bem.elem('image') {
+                        position:      relative;
+                        display:       block;
+                        flex:          0 0 auto;
+                        inline-size:   calc(100% + 2 * props.get(vars.$border-width));
+                        margin:        calc(-1 * props.get(vars.$border-width));
+                        overflow:      hidden;
+                        object-fit:    cover;
+                        transition:    background-color .2s, transform .2s, opacity .2s;
 
-        @include iro.bem-elem('image') {
-            display:          block;
-            inline-size:      100%;
-            object-fit:       cover;
+                        &:first-child {
+                                border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                                border-start-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                        }
 
-            &:first-child {
-                border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border));
-                border-start-end-radius:   calc(fn.dim(--rounding) - fn.dim(--border));
-            }
+                        &:last-child {
+                                border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                                border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                        }
 
-            &:last-child {
-                border-end-start-radius: calc(fn.dim(--rounding) - fn.dim(--border));
-                border-end-end-radius:   calc(fn.dim(--rounding) - fn.dim(--border));
-            }
+                        @include bem.next-elem('avatar') {
+                                margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
+                        }
+                }
 
-            @include iro.bem-next-elem('avatar') {
-                margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size));
-            }
-        }
+                @include bem.elem('image-img') {
+                        display:     block;
+                        inline-size: 100%;
+                        object-fit:  cover;
+                }
 
-        @include iro.bem-elem('body') {
-            padding-block:  fn.dim(--pad-b);
-            padding-inline: fn.dim(--pad-i);
+                @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);
+                }
 
-            &::before {
-                content:       '';
-                display:       block;
-                margin-block:  -100em 100em;
-            }
-        }
+                @include bem.elem('body') {
+                        flex:            1 0 auto;
+                        padding-block:   props.get(vars.$pad-b);
+                        padding-inline:  props.get(vars.$pad-i);
 
-        @include iro.bem-elem('content') {
-            margin-block-start: fn.dim(--spacing);
-        }
+                        &::before {
+                                display:       block;
+                                margin-block:  -100em 100em;
+                                content:       '';
+                        }
 
-        @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.modifier('no-mbs-neutralize') {
+                                &::before {
+                                        display: none;
+                                }
+                        }
+                }
 
-            &::before {
-                content:          '';
-                display:          block;
-                block-size:       fn.dim(--divider);
-                margin-block:     fn.dim(--spacing);
-                background-color: fn.color(--divider);
-            }
-        }
+                @include bem.elem('content') {
+                        margin-block-start: props.get(vars.$spacing);
+                }
 
-        @include iro.bem-modifier('quiet') {
-            position:         relative;
-            border:           0;
-            background-color: transparent;
+                @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));
 
-            @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
-                &:hover,
-                &:active {
-                    @include iro.bem-elem('image') {
-                        opacity:          .75;
-                        background-color: fn.color(--quiet --hover --image);
-                    }
-                }
+                        &::before {
+                                display:          block;
+                                block-size:       props.get(vars.$divider-width);
+                                margin-block:     props.get(vars.$spacing);
+                                content:          '';
+                                background-color: props.get(vars.$divider-width);
+                        }
+                }
 
-                &:focus-visible {
-                    outline:    none;
-                    box-shadow: none;
+                @include bem.modifier('quiet') {
+                        margin-inline:    0;
+                        background-color: transparent;
+                        border:           0;
+                        box-shadow:       none;
 
-                    @include iro.bem-elem('image') {
-                        outline:          fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
-                        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 bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+                                &:hover,
+                                &:active,
+                                &:focus-visible {
+                                        background-color: transparent;
+                                        transform:        none;
 
-            @include iro.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);
-                background-clip:  padding-box;
-            }
+                                        @include bem.elem('image') {
+                                                background-color: props.get(vars.$quiet--hover--image-color);
+                                                opacity:          .75;
+                                                transform:        translateY(props.get(vars.$hover--offset-b));
+                                        }
+                                }
 
-            @include iro.bem-elem('body') {
-                padding:             0;
-                padding-block-start: fn.dim(--spacing);
-            }
+                                &:focus-visible {
+                                        margin:     0;
+                                        outline:    none;
+                                        border:     0;
+                                        box-shadow: none;
 
-            @include iro.bem-elem('footer') {
-                padding-inline: 0;
-            }
-        }
-    }
+                                        @include bem.elem('image') {
+                                                margin:           calc(-1 * props.get(vars.$key-focus--border-width));
+                                                outline:          props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                                                background-color: props.get(vars.$quiet--hover--image-color);
+                                                border:           props.get(vars.$key-focus--border-offset) solid transparent;
+                                                border-radius:    calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
+                                                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;
+                                        }
+                                }
+                        }
+
+                        @include bem.elem('image') {
+                                position:         relative;
+                                background-color: props.get(vars.$quiet--image-color);
+                                background-clip:  padding-box;
+                                border-radius:    props.get(vars.$rounding);
+                        }
+
+                        @include bem.elem('body') {
+                                padding:             0;
+                                padding-block-start: props.get(vars.$spacing);
+                        }
+
+                        @include bem.elem('footer') {
+                                padding-inline: 0;
+                        }
+                }
+
+                @include bem.modifier('thumbnail') {
+                        @include bem.elem('image') {
+                                border-radius: props.get(vars.$rounding);
+                        }
+
+                        @include bem.elem('body') {
+                                position:                absolute;
+                                inset-block-end:         calc(-1 * props.get(vars.$border-width));
+                                inset-inline:            calc(-1 * props.get(vars.$border-width));
+                                z-index:                 10;
+                                visibility:              hidden;
+                                background-color:        props.get(vars.$hover--bg-color);
+                                border-color:            transparent;
+                                border-style:            solid;
+                                border-width:            0 props.get(vars.$border-width) props.get(vars.$border-width);
+                                border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                                border-end-end-radius:   calc(props.get(vars.$rounding) - props.get(vars.$border-width));
+                                opacity:                 0;
+                                transition:
+                                        border-color .2s ease,
+                                        opacity .2s ease,
+                                        visibility 0s .2s linear;
+                        }
+
+                        @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
+                                &:hover,
+                                &:active,
+                                &:focus-visible {
+                                        @include bem.elem('body') {
+                                                visibility:   visible;
+                                                border-color: props.get(vars.$hover--border-color);
+                                                opacity:      1;
+                                                transition:
+                                                        border-color .2s ease,
+                                                        opacity .2s ease,
+                                                        visibility .2s linear;
+                                        }
+                                }
+                        }
+                }
+
+                @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..ebfba10
--- /dev/null
+++ b/src/objects/_card.vars.scss
@@ -0,0 +1,39 @@
+@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;
+$border-width:         props.def(--o-card--border-width, props.get(core.$border-width--thin)) !default;
+$sub-border-width:     props.def(--o-card--sub-border-width, props.get(core.$border-width--thick)) !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;
+
+$shadow-x:    props.def(--o-card--shadow-x, props.get(core.$shadow--l1--x)) !default;
+$shadow-y:    props.def(--o-card--shadow-y, props.get(core.$shadow--l1--y)) !default;
+$shadow-blur: props.def(--o-card--shadow-blur, props.get(core.$shadow--l1--blur)) !default;
+$shadow-grow: props.def(--o-card--shadow-grow, props.get(core.$shadow--l1--grow)) !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;
+
+$shadow-color:  props.def(--o-card--shadow-color, props.get(core.$theme, --shadow), 'color') !default;
+$bg-color:      props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
+$border-color:  props.def(--o-card--border-color, props.get(core.$theme, --box, --border), 'color') !default;
+$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default;
+
+$hover--bg-color:         props.def(--o-card--hover--bg-color, color-mix(in lch, props.get($bg-color), props.get(core.$theme, --border-mute)), 'color') !default;
+$hover--border-color:     props.def(--o-card--hover--border-color, props.get(core.$theme, --border), '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..5faafb9 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -1,261 +1,231 @@
-@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;
-        position:       relative;
-        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);
+        @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 * 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;
-            position:           relative;
-            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;
-            vertical-align:     top;
+                @include bem.elem('box') {
+                        position:           relative;
+                        display:            inline-block;
+                        flex:               0 0 auto;
+                        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;
-            }
+                        &::before,
+                        &::after {
+                                position: absolute;
+                                display:  block;
+                                content:  '';
+                        }
     
-            &::before {
-                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));
-                transition:         transform .2s ease;
-                background-color:   fn.color(--box-bg);
-            }
+                        &::before {
+                                inset-block-start:  props.get(vars.$border-width);
+                                inset-inline-start: props.get(vars.$border-width);
+                                z-index:            2;
+                                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;
+                        }
     
-            &::after {
-                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));
-                block-size:          0;
-                transform:           scale(0);
-                transition:          transform .2s ease;
-                border-block-width:  0 2px;
-                border-inline-width: 0 2px;
-                border-style:        solid;
-                border-radius:       2px;
-                border-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;
+                                box-sizing:          border-box;
+                                inline-size:         calc(props.get(vars.$size) - 3 * props.get(vars.$border-width));
+                                block-size:          0;
+                                border-color:        props.get(vars.$box-bg-color);
+                                border-style:        solid;
+                                border-radius:       2px;
+                                transform:           scale(0);
+                                transition:          transform .2s ease;
+                                border-block-width:  0 2px;
+                                border-inline-width: 0 2px;
+                        }
+                }
     
-        @include iro.bem-elem('check-icon') {
-            display:            block;
-            position:           absolute;
-            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));
-            margin:             0;
-            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 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;
+                        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);
+                        transform:          scale(0);
+                        transform-origin:   40% 90%;
+                        transition:         transform .2s ease;
+                }
     
-        @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;
-            position:           absolute;
-            z-index:            -1;
-            inset-block-start:  0;
-            inset-inline-start: 0;
-            inline-size:        100%;
-            block-size:         100%;
-            margin:             0;
-            padding:            0;
-            overflow:           hidden;
-            border-radius:      fn.dim(--rounding);
+                @include bem.elem('native') {
+                        position:           absolute;
+                        inset-block-start:  0;
+                        inset-inline-start: 0;
+                        z-index:            -1;
+                        inline-size:        100%;
+                        block-size:         100%;
+                        padding:            0;
+                        margin:             0;
+                        overflow:           hidden;
+                        appearance:         none;
+                        border-radius:      props.get(vars.$rounding);
     
-            &:hover,
-            &:focus-visible {
-                @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--hover --label);
-                }
+                        &:hover,
+                        &:focus-visible {
+                                @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') {
-                    &::before {
-                        transform: scale(0);
-                    }
+                        &:checked {
+                                @include bem.sibling-elem('box') {
+                                        &::before {
+                                                transform: scale(0);
+                                        }
     
-                    @include iro.bem-elem('check-icon') {
-                        transform: scale(1);
-                    }
-                }
-            }
+                                        @include bem.elem('check-icon') {
+                                                transform: scale(1);
+                                        }
+                                }
+                        }
     
-            &:indeterminate {
-                @include iro.bem-sibling-elem('box') {
-                    &::before {
-                        transform: scale(0);
-                    }
+                        &:indeterminate {
+                                @include bem.sibling-elem('box') {
+                                        &::before {
+                                                transform: scale(0);
+                                        }
     
-                    &::after {
-                        transform: scale(1);
-                    }
+                                        &::after {
+                                                transform: scale(1);
+                                        }
     
-                    @include iro.bem-elem('check-icon') {
-                        transform: scale(0);
-                    }
-                }
-            }
+                                        @include bem.elem('check-icon') {
+                                                transform: scale(0);
+                                        }
+                                }
+                        }
     
-            &:disabled {
-                @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--disabled --label);
-                }
+                        &:disabled {
+                                @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);
-                    }
-                }
-            }
+                                        &::before {
+                                                background-color: props.get(vars.$disabled--box-bg-color);
+                                        }
+                                }
+                        }
     
-            &:focus-visible {
-                @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--key-focus --label);
-                }
+                        &:focus-visible {
+                                @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') {
-                margin-block-start: 0;
-            }
-        }
+                @include bem.modifier('standalone') {
+                        @include bem.elem('box') {
+                                margin-block-start: 0;
+                        }
+                }
     
-        @include iro.bem-modifier('accent') {
-            @include iro.bem-elem('native') {
-                &:checked {
-                    @include iro.bem-sibling-elem('box') {
-                        background-color: fn.color(--accent --box-border);
-                    }
+                @include bem.modifier('accent') {
+                        @include bem.elem('native') {
+                                &:checked {
+                                        @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);
-                        }
-                    }
-                }
+                                        &:hover,
+                                        &:focus-visible {
+                                                @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);
-                    }
+                                &:indeterminate {
+                                        @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);
-                        }
-                    }
-                }
+                                        &:hover,
+                                        &:focus-visible {
+                                                @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);
+                                &:disabled {
+                                        @include bem.sibling-elem('box') {
+                                                background-color: props.get(vars.$disabled--box-border-color);
         
-                        &::before {
-                            background-color: fn.color(--disabled --box-bg);
-                        }
-                    }
+                                                &::before {
+                                                        background-color: props.get(vars.$disabled--box-bg-color);
+                                                }
+                                        }
 
-                    &:checked {
-                        @include iro.bem-sibling-elem('box') {
-                            background-color: fn.color(--disabled --box-border);
-                        }
-                    }
+                                        &:checked {
+                                                @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);
-                        }
-                    }
-                }
-            }
-        }
-    }
+                                        &:indeterminate {
+                                                @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..25a0d3d
--- /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--sm)) !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..27af173 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -1,203 +1,204 @@
 @use 'sass:map';
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-@use '../config';
+@use 'sass:meta';
+@use 'sass:string';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+@use '../core.vars' as core;
 
-$static-themes: 'black' 'white' !default;
+@forward 'divider.vars';
+@use 'divider.vars' as vars;
 
-@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),
-            ),
-        ),
-    ));
+@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 {
+                        flex:             1 1 auto;
+                        inline-size:      100%;
+                        block-size:       props.get(vars.$strong--border-width);
+                        content:          '';
+                        background-color: props.get(vars.$strong--bg-color);
+                }
+
+                &::before {
+                        display: block;
+                }
+
+                @include bem.elem('label') {
+                        flex: 0 0 auto;
+                }
+
+                @include bem.modifier('vertical') {
+                        align-self:       stretch;
+                        inline-size:      props.get(vars.$vertical--border-width);
+                        block-size:       auto;
+                        margin-block:     0;
+                        background-color: props.get(vars.$strong--bg-color);
 
-    @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),
-                    )
-                ),
-            ));
-        }
-    }
+                        &::before,
+                        &::after {
+                                display: none;
+                        }
+                }
 
-    @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 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);
 
-    @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;
+                        &::before,
+                        &::after {
+                                display: none;
+                        }
+                }
 
-        &::before,
-        &::after {
-            content:          '';
-            flex:             1 1 auto;
-            inline-size:      100%;
-            block-size:       fn.dim(--strong --border);
-            background-color: fn.color(--strong --bg);
-        }
+                @include bem.modifier('medium') {
+                        font-size:   props.get(vars.$medium--label-font-size);
+                        font-weight: 500;
+                        color:       props.get(vars.$medium--label-color);
 
-        &::before {
-            display: block;
-        }
+                        &::before,
+                        &::after {
+                                block-size:       props.get(vars.$medium--border-width);
+                                background-color: props.get(vars.$medium--bg-color);
+                        }
 
-        @include iro.bem-elem('label') {
-            flex: 0 0 auto;
-        }
+                        @include bem.modifier('vertical') {
+                                background-color: props.get(vars.$medium--bg-color);
+                        }
 
-        @include iro.bem-modifier('vertical') {
-            align-self:       stretch;
-            inline-size:      1px;
-            block-size:       auto;
-            margin-block:     0;
-            background-color: fn.color(--faint --bg);
+                        @include bem.modifier('dot') {
+                                background-color: props.get(vars.$medium--bg-color);
+                        }
+                }
 
-            &::before,
-            &::after {
-                display: none;
-            }
-        }
+                @include bem.modifier('quiet') {
+                        font-size:   props.get(vars.$quiet--label-font-size);
+                        font-weight: 500;
+                        color:       props.get(vars.$quiet--label-color);
 
-        @include iro.bem-modifier('medium') {
-            color:       fn.color(--medium --label);
-            font-size:   fn.dim(--medium --label-font-size);
-            font-weight: 500;
+                        &::before,
+                        &::after {
+                                block-size:       props.get(vars.$quiet--border-width);
+                                background-color: props.get(vars.$quiet--bg-color);
+                        }
 
-            &::before,
-            &::after {
-                block-size:       fn.dim(--medium --border);
-                background-color: fn.color(--medium --bg);
-            }
-        }
+                        @include bem.modifier('vertical') {
+                                background-color: props.get(vars.$vertical--quiet--bg-color);
+                        }
 
-        @include iro.bem-modifier('faint') {
-            color:       fn.color(--faint --label);
-            font-size:   fn.dim(--faint --label-font-size);
-            font-weight: 500;
+                        @include bem.modifier('dot') {
+                                background-color: props.get(vars.$dot--quiet--bg-color);
+                        }
+                }
 
-            &::before,
-            &::after {
-                block-size:       fn.dim(--faint --border);
-                background-color: fn.color(--faint --bg);
-            }
-        }
+                @include bem.modifier('faint') {
+                        font-size:   props.get(vars.$faint--label-font-size);
+                        font-weight: 500;
+                        color:       props.get(vars.$faint--label-color);
 
-        @include iro.bem-modifier('labelled') {
-            &::before {
-                margin-inline-end: 1em;
-            }
+                        &::before,
+                        &::after {
+                                block-size:       props.get(vars.$faint--border-width);
+                                background-color: props.get(vars.$faint--bg-color);
+                        }
 
-            &::after {
-                display:             block;
-                margin-inline-start: 1em;
-            }
-        }
+                        @include bem.modifier('vertical') {
+                                background-color: props.get(vars.$vertical--quiet--bg-color);
+                        }
 
-        @each $color in 'blue' 'purple' 'red' 'green' 'yellow' {
-            @include iro.bem-modifier($color) {
-                &::before,
-                &::after {
-                    background-color: fn.color(--#{$color} --bg);
-                }
+                        @include bem.modifier('dot') {
+                                background-color: props.get(vars.$dot--quiet--bg-color);
+                        }
+                }
 
-                @include iro.bem-elem('label') {
-                    color: fn.color(--#{$color} --label);
-                }
-            }
-        }
+                @include bem.modifier('labelled') {
+                        &::before {
+                                margin-inline-end: 1em;
+                        }
 
-        @each $theme in $static-themes {
-            @include iro.bem-modifier(static-#{$theme}) {
-                &::before,
-                &::after {
-                    background-color: fn.color(--static-#{$theme} --strong --bg);
-                }
+                        &::after {
+                                display:             block;
+                                margin-inline-start: 1em;
+                        }
+                }
 
-                @include iro.bem-elem('label') {
-                    color: fn.color(--static-#{$theme} --strong --label);
-                }
+                @each $theme in map.keys(props.get(vars.$themes)) {
+                        @include bem.modifier(string.slice($theme, 3)) {
+                                &::before,
+                                &::after {
+                                        background-color: props.get(vars.$themes, $theme, --bg);
+                                }
 
-                @include iro.bem-modifier('medium') {
-                    &::before,
-                    &::after {
-                        background-color: fn.color(--static-#{$theme} --medium --bg);
-                    }
+                                @include bem.elem('label') {
+                                        color: props.get(vars.$themes, $theme, --label);
+                                }
+                        }
+                }
+
+                @each $theme in map.keys(props.get(vars.$static-themes)) {
+                        @include bem.modifier(string.slice($theme, 3)) {
+                                &::before,
+                                &::after {
+                                        background-color: props.get(vars.$static-themes, $theme, --strong, --bg);
+                                }
+
+                                @include bem.elem('label') {
+                                        color: props.get(vars.$static-themes, $theme, --strong, --label);
+                                }
+
+                                @include bem.modifier('medium') {
+                                        &::before,
+                                        &::after {
+                                                background-color: props.get(vars.$static-themes, $theme, --medium, --bg);
+                                        }
+    
+                                        @include bem.elem('label') {
+                                                color: props.get(vars.$static-themes, $theme, --medium, --label);
+                                        }
+                                }
+    
+                                @include bem.modifier('quiet') {
+                                        &::before,
+                                        &::after {
+                                                background-color: props.get(vars.$static-themes, $theme, --quiet, --bg);
+                                        }
     
-                    @include iro.bem-elem('label') {
-                        color: fn.color(--static-#{$theme} --medium --label);
-                    }
-                }
+                                        @include bem.elem('label') {
+                                                color: props.get(vars.$static-themes, $theme, --quiet, --label);
+                                        }
+                                }
     
-                @include iro.bem-modifier('faint') {
-                    &::before,
-                    &::after {
-                        background-color: fn.color(--static-#{$theme} --faint --bg);
-                    }
+                                @include bem.modifier('faint') {
+                                        &::before,
+                                        &::after {
+                                                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..688fbb3
--- /dev/null
+++ b/src/objects/_divider.vars.scss
@@ -0,0 +1,79 @@
+@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;
+
+$quiet--border-width:    props.def(--o-divider--quiet--border-width, props.get(core.$border-width--thin)) !default;
+$quiet--label-font-size: props.def(--o-divider--quiet--label-font-size, props.get(core.$font-size--50)) !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;
+
+$quiet--bg-color:    props.def(--o-divider--quiet--bg-color, props.get(core.$theme, --border), 'color') !default;
+$quiet--label-color: props.def(--o-divider--quiet--label-color, props.get(core.$theme, --text-mute-more), 'color') !default;
+
+$faint--bg-color:    props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
+
+$vertical--quiet--bg-color:    props.def(--o-divider--vertical--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
+
+$dot--quiet--bg-color:    props.def(--o-divider--dot--quiet--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),
+                        ),
+                        --quiet: (
+                                --bg:    props.get(core.$transparent-colors, $theme, --300),
+                                --label: props.get(core.$transparent-colors, $theme, --500),
+                        ),
+                        --faint: (
+                                --bg:    props.get(core.$transparent-colors, $theme, --200),
+                                --label: props.get(core.$transparent-colors, $theme, --400),
+                        ),
+                )
+        ));
+}
+
+$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..fd36535 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -1,73 +1,50 @@
-@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,
-            ),
+        @include bem.object('emoji') {
+                position:       relative;
+                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;
 
-            --150: (
-                --size:   calc(1 / 14 * 28em),
-                --valign: -.65em,
-            ),
+                @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);
+                }
 
-            --200: (
-                --size:   calc(1 / 14 * 38em),
-                --valign: -1em,
-            )
-        ),
-        --colors: (
-            --bg: fn.global-color(--border-mute),
-        )
-    ));
+                @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-object(iro.props-namespace()) {
-        display:        inline-block;
-        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);
-        object-fit:     contain;
+                                @include bem.modifier('icon') {
+                                        margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size)));
+                                }
+                        }
+                }
 
-        @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('zoomable') {
+                        border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom));
+                        transition:    transform .2s ease, background-color .2s ease;
 
-        @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);
-
-                @include iro.bem-modifier('icon') {
-                    margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--#{$size} --size) - fn.foreign-dim(--icon, --size)));
-                }
-            }
-        }
-
-        @include iro.bem-modifier('zoomable') {
-            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);
-            }
-        }
-    }
+                        &:hover {
+                                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..b7a8a43
--- /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--sm)) !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..aa12eb5 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -1,86 +1,76 @@
-@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') {
-            display:            block;
-            flex:               0 0 auto;
-            padding-inline-end: fn.dim(--spacing-i);
-            color:              fn.color(--label);
-            font-size:          fn.dim(--label-font-size);
-            font-weight:        400;
-            line-height:        1.3;
+        @include bem.object('field-label') {
+                @include bem.elem('label') {
+                        display:            block;
+                        flex:               0 0 auto;
+                        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') {
-            display: block;
-            flex:    1 1 auto;
-        }
+                @include bem.elem('content') {
+                        display: block;
+                        flex:    1 1 auto;
+                }
     
-        @include iro.bem-elem('hint') {
-            display:            block;
-            margin-block-start: fn.dim(--spacing-b);
-            color:              fn.color(--hint);
-            font-size:          fn.dim(--hint-font-size);
-        }
+                @include bem.elem('hint') {
+                        display:            block;
+                        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') {
-            display:     flex;
-            align-items: baseline;
+                @include bem.modifier('align-start', 'align-end') {
+                        display:     flex;
+                        align-items: baseline;
     
-            @include iro.bem-elem('label') {
-                display: inline-block;
+                        @include bem.elem('label') {
+                                display: inline-block;
     
-                @include iro.bem-next-elem('content') {
-                    margin-block-start: 0;
-                }
-            }
-        }
+                                @include bem.next-elem('content') {
+                                        margin-block-start: 0;
+                                }
+                        }
+                }
     
-        @include iro.bem-modifier('align-start') {
-            @include iro.bem-elem('label') {
-                text-align: start;
-            }
-        }
+                @include bem.modifier('align-start') {
+                        @include bem.elem('label') {
+                                text-align: start;
+                        }
+                }
     
-        @include iro.bem-modifier('align-end') {
-            @include iro.bem-elem('label') {
-                text-align: end;
-            }
-        }
-    }
+                @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..27e0f6a
--- /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..d27b595 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,118 +1,60 @@
-@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;
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
 
-$sizes: 'xxl' 'xl' 'lg' 'md' 'sm' 'xs';
+@forward 'heading.vars';
+@use 'heading.vars' as vars;
 
-@include iro.props-namespace('heading') {
-    @include iro.props-store((
-        --dims: (
-            --offset: -.02em,
-        ),
-        --colors: (
-            --bg: fn.global-color(--base --50),
-        ),
-    ));
+@mixin styles {
+        @include materialize-at-root(meta.module-variables('vars'));
 
-    @include iro.bem-object(iro.props-namespace()) {
-        @include mx.set-font(--headline);
+        @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;
 
-        display:            block;
-        margin-block-start: fn.global-dim(--heading --margin-bs);
-        transform:          translateX(fn.dim(--offset));
-        letter-spacing:     normal;
-        text-transform:     none;
+                & + & {
+                        margin-block-start: props.get(vars.$margin-bs-sibling);
+                }
 
-        & + & {
-            margin-block-start: fn.global-dim(--heading --margin-bs-sibling);
-        }
+                @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-elem('highlight') {
-            background-image: linear-gradient(
-                to top,
-                transparent    .05em,
-                fn.color(--bg) .05em,
-                fn.color(--bg) .5em,
-                transparent    .5em
-            );
-        }
+                @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('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);
-        }
-
-        @include iro.bem-modifier('xs') {
-            @include mx.heading-faint(--xs);
-        }
-
-        @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);
-                }
-            }
-    
-            @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..1d6df26
--- /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..1941960 100644
--- a/src/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -1,26 +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('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()) {
-        display:         inline;
-        inline-size:     fn.dim(--size);
-        block-size:      fn.dim(--size);
-        stroke-width:    fn.dim(--stroke);
-        stroke-linecap:  round;
-        stroke-linejoin: round;
-        vertical-align:  fn.dim(--valign);
+@mixin styles {
+        @include materialize-at-root(meta.module-variables('vars'));
 
-        @include iro.bem-modifier('block') {
-            display: block;
-        }
-    }
+        @include bem.object('icon') {
+                display:         inline;
+                inline-size:     props.get(vars.$size);
+                block-size:      props.get(vars.$size);
+                vertical-align:  props.get(vars.$valign);
+                stroke-width:    props.get(vars.$stroke-width);
+                stroke-linecap:  round;
+                stroke-linejoin: round;
+
+                @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..b95148f 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),
-                ),
+                @include bem.elem('header') {
+                        display:             flex;
+                        grid-area:           header;
+                        align-items:         flex-start;
+                        padding-block-start: props.get(vars.$pad);
+                        padding-inline:      props.get(vars.$pad);
+                }
 
-                --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),
-                ),
-            ),
+                @include bem.elem('img') {
+                        box-sizing:      border-box;
+                        display:         block;
+                        grid-area:       content;
+                        place-self:      center;
+                        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));
+                }
 
-            --close-button: (
-                --font-size: fn.global-dim(--font-size --200),
-            ),
+                @include bem.elem('thumbnails') {
+                        display:            none;
+                        grid-area:          thumbnails;
+                        gap:                props.get(vars.$thumbnails--spacing);
+                        padding:            props.get(vars.$pad);
+                        margin-block-start: calc(-1 * props.get(vars.$pad));
+                        overflow:           auto;
+                }
 
-            --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),
-                ),
+                @include bem.elem('close-btn') {
+                        display:            none;
+                        flex:               0 0 auto;
+                        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);
+                }
 
-                --key-focus: (
-                    --border:  fn.global-color(--focus --border),
-                    --outline: fn.global-color(--focus --outline),
-                ),
-            ),
-        ),
-    ));
+                @include bem.elem('nav-btn') {
+                        position:   relative;
+                        display:    none;
+                        align-self: center;
+                        overflow:   visible;
+                        font-size:  props.get(vars.$nav-button--font-size);
 
-    @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),
-                        ),
+                        &::before {
+                                position:           absolute;
+                                inset-block-start:  50%;
+                                display:            block;
+                                inline-size:        props.get(vars.$nav-button--inline-size);
+                                block-size:         props.get(vars.$nav-button--block-size);
+                                content:            '';
+                                transform:          translateY(-50%);
+                        }
 
-                        --key-focus: (
-                            --border:  fn.global-color(--#{$theme}-transparent --900),
-                            --outline: fn.global-color(--#{$theme}-transparent --300),
-                        ),
-                    ),
-                )
-            )
-        ));
-    }
+                        @include bem.modifier('prev') {
+                                grid-area:     prev;
+                                margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad));
 
-    @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;
-            display:             flex;
-            align-items:         flex-start;
-            padding-block-start: fn.dim(--pad);
-            padding-inline:      fn.dim(--pad);
-        }
-
-        @include iro.bem-elem('img') {
-            display:         none;
-            box-sizing:      border-box;
-            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;
+                                &::before {
+                                        inset-inline-start: 0;
+                                }
+                        }
     
-                        @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;
-                            }
-                        }
-                    }
-                }
-            }
-        }
-
-        @include iro.bem-elem('thumbnails') {
-            grid-area:          thumbnails;
-            display:            flex;
-            gap:                fn.dim(--thumbnail --spacing);
-            padding:            fn.dim(--pad);
-            margin-block-start: calc(-1 * fn.dim(--pad));
-            overflow:           auto;
-        }
+                        @include bem.modifier('next') {
+                                grid-area:     next;
+                                margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad));
 
-        @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);
-        }
+                                &::before {
+                                        inset-inline-end: 0;
+                                }
+                        }
+                }
 
-        @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;
+                @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;
 
-            &:hover,
-            &:active,
-            &:focus-visible {
-                outline-color: fn.color(--thumbnail --hover --border);
-                opacity:       1;
-            }
+                        @include bem.modifier('fullscreen') {
+                                block-size: props.get(vars.$fullscreen--height);
+                        }
 
-            @include iro.bem-is('selected') {
-                $focus-border-offset: calc(-1 * fn.dim(--thumbnail --selected --border));
+                        @include bem.elem('img') {
+                                display:        none;
+                                max-block-size: 100%;
+                                margin-inline:  0;
 
-                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;
-            }
+                                @include bem.multi('&:target', 'is' 'visible') {
+                                        display: block;
+                                }
+                        }
 
-            &: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') {
-            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);
-        }
-
-        @include iro.bem-elem('nav-btn') {
-            display:    none;
-            position:   relative;
-            align-self: center;
-            overflow:   visible;
-            font-size:  fn.dim(--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);
-                transform:          translateY(-50%);
-            }
-
-            @include iro.bem-modifier('prev') {
-                grid-area:     prev;
-                margin-inline: calc(.5 * fn.dim(--pad)) calc(-1 * fn.dim(--pad));
-
-                &::before {
-                    inset-inline-start: 0;
-                }
-            }
-    
-            @include iro.bem-modifier('next') {
-                grid-area:     next;
-                margin-inline: calc(-1 * fn.dim(--pad)) calc(.5 * fn.dim(--pad));
-
-                &::before {
-                    inset-inline-end: 0;
-                }
-            }
-        }
-    
-        @each $theme in $static-themes {
-            @include iro.bem-modifier(static-#{$theme}) {
-                color: fn.color(--static-#{$theme} --text);
+                        @include bem.elem('thumbnails') {
+                                display: flex;
+                        }
 
-                @include iro.bem-elem('thumbnail') {
-                    outline-color: fn.color(--static-#{$theme} --thumbnail --border);
+                        @include bem.elem('close-btn') {
+                                display: block;
+                        }
 
-                    &: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('nav-btn') {
+                                display: block;
+                        }
+                }
 
-                    &: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);
-                    }
-                }
-            }
-        }
-    }
+                @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..6d22aa8
--- /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..f370067 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -1,137 +1,102 @@
-/* stylelint-disable length-zero-no-unit */
+@use 'sass:meta';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../props' as *;
+@use 'icon.vars' as icon;
 
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
+@forward 'menu.vars';
+@use 'menu.vars' as vars;
 
-@use './icon';
+@mixin styles {
+        @include materialize-at-root(meta.module-variables('vars'));
 
-@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 bem.object('menu') {
+                display:        flex;
+                flex-direction: column;
+                gap:            props.get(vars.$spacing);
 
-    @include iro.bem-object(iro.props-namespace()) {
-        display:        flex;
-        flex-direction: column;
-        gap:            fn.dim(--spacing);
+                @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;
+                        color:          props.get(vars.$header--label-color);
+                        text-transform: uppercase;
+                        letter-spacing: .5px;
 
-        @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);
-            font-weight:    500;
-            letter-spacing: .5px;
-            text-transform: uppercase;
+                        @include bem.next-twin-elem {
+                                margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing));
+                        }
+                }
 
-            @include iro.bem-next-twin-elem {
-                margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing));
-            }
-        }
+                @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));
 
-        @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);
-            background-clip: padding-box;
+                        &:link,
+                        &:visited,
+                        &:enabled {
+                                color: currentColor;
 
-            &:link,
-            &:visited,
-            &:enabled {
-                color: currentColor;
+                                @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);
+                                }
 
-                @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') {
-                    background-color: fn.color(--item --hover --bg);
-                    color:            fn.color(--item --hover --label);
-                }
+                                &:active {
+                                        color:            props.get(vars.$item--active--label-color);
+                                        background-color: props.get(vars.$item--active--bg-color);
+                                }
 
-                &:active {
-                    background-color: fn.color(--item --active --bg);
-                    color:            fn.color(--item --active --label);
-                }
+                                &:focus-visible {
+                                        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);
+                                }
+                        }
 
-                &: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);
-                }
-            }
+                        @include bem.next-elem('header') {
+                                margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing));
+                        }
+                }
 
-            @include iro.bem-next-elem('header') {
-                margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing));
-            }
-        }
+                @include bem.elem('header') {
+                        &:link,
+                        &:visited,
+                        &:enabled {
+                                color: props.get(vars.$header--label-color);
+                        }
+                }
 
-        @include iro.bem-elem('header') {
-            &:link,
-            &:visited,
-            &:enabled {
-                color: fn.color(--header --label);
-            }
-        }
+                @include bem.elem('separator') {
+                        block-size:       1px;
+                        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('separator') {
-            block-size:       1px;
-            margin-block:     fn.dim(--separator);
-            margin-inline:    fn.dim(--item --pad-i);
-            background-color: fn.color(--separator);
-        }
+                @include bem.elem('slot') {
+                        padding-block:  props.get(vars.$item--pad-b);
+                        padding-inline: props.get(vars.$item--pad-i);
+                }
 
-        @include iro.bem-elem('slot') {
-            padding-block:  fn.dim(--item --pad-b);
-            padding-inline: fn.dim(--item --pad-i);
-        }
+                @include bem.elem('icon-slot') {
+                        display:         flex;
+                        justify-content: center;
+                        inline-size:     props.get(icon.$size);
+                }
 
-        @include iro.bem-elem('icon-slot') {
-            display:         flex;
-            justify-content: center;
-            inline-size:     fn.foreign-dim(--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..ec03c62
--- /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;
+                                visibility:     hidden;
+                                pointer-events: none;
+                                outline:        props.get(vars.$default-theme, --key-focus, --border) solid props.get(vars.$key-focus--border-width);
+                                content:        '';
+                                border-radius:  100em;
+                                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..8e18def
--- /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..79c0f6c 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -1,62 +1,63 @@
-@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()) {
-        display:    flex;
-        block-size: 3em;
+@mixin styles {
+        @include bem.object('palette') {
+                display:    flex;
+                block-size: 3em;
 
-        @include iro.bem-elem('item') {
-            flex: 1 1 auto;
+                @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);
-                }
-            }
-        }
+                                &:nth-child(#{$i}) {
+                                        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);
-                        }
-                    }
-                }
-            }
-        }
+                                                &:nth-child(#{$i}) {
+                                                        background-color: props.get(core.$theme, $palette-name, $key);
+                                                }
+                                        }
+                                }
+                        }
+                }
 
-        @include iro.bem-modifier('static') {
-            @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
-                $contrasts: map.get(config.$static-colors, --contrasts);
+                @include bem.modifier('static') {
+                        @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
+                                $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);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
+                                                        &:nth-child(#{$i}) {
+                                                                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..80fc913
--- /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..2746477 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -1,51 +1,45 @@
-@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);
-        inset-block-start:  0;
-        inset-inline-start: 0;
-        padding-block:      fn.dim(--pad-b);
-        padding-inline:     fn.dim(--pad-i);
-        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);
+@mixin styles {
+        @include materialize-at-root(meta.module-variables('vars'));
 
-        @include iro.bem-modifier('up-left') {
-            transform: translate(var(--x), calc(var(--y) - 100%));
-        }
+        @include bem.object('popover') {
+                position:           fixed;
+                inset-block-start:  0;
+                inset-inline-start: 0;
+                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);
+                border:             props.get(vars.$border-width) solid transparent;
+                border-color:       props.get(vars.$border-color);
+                border-radius:      props.get(vars.$rounding);
+                box-shadow:
+                        props.get(vars.$shadow-x)
+                        props.get(vars.$shadow-y)
+                        props.get(vars.$shadow-blur)
+                        props.get(vars.$shadow-grow)
+                        props.get(vars.$shadow-color);
+                transform:          translate(var(--x), var(--y));
 
-        @include iro.bem-modifier('up-right') {
-            transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
-        }
+                @include bem.modifier('up-left') {
+                        transform: translate(var(--x), calc(var(--y) - 100%));
+                }
 
-        @include iro.bem-modifier('down-right') {
-            transform: translate(calc(var(--x) - 100%), var(--y));
-        }
-    }
+                @include bem.modifier('up-right') {
+                        transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
+                }
+
+                @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..e560d1b
--- /dev/null
+++ b/src/objects/_popover.vars.scss
@@ -0,0 +1,19 @@
+@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;
+
+$shadow-x:    props.def(--o-popover--shadow-x, props.get(core.$shadow--l2--x)) !default;
+$shadow-y:    props.def(--o-popover--shadow-y, props.get(core.$shadow--l2--y)) !default;
+$shadow-blur: props.def(--o-popover--shadow-blur, props.get(core.$shadow--l2--blur)) !default;
+$shadow-grow: props.def(--o-popover--shadow-grow, props.get(core.$shadow--l2--grow)) !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, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), 'color') !default;
+$shadow-color:  props.def(--o-popover--shadow-color, props.get(core.$theme, --shadow), 'color') !default;
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 9fa937d..8327a15 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -1,185 +1,154 @@
-@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;
-        position:       relative;
-        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);
+        @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 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
+                        calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));
     
-        @include iro.bem-elem('circle') {
-            display:            inline-block;
-            flex:               0 0 auto;
-            inline-size:        fn.dim(--diameter);
-            block-size:         fn.dim(--diameter);
-            margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--diameter) - fn.dim(--key-focus --border-offset));
-            border:             fn.dim(--key-focus --border-offset) solid transparent;
-            border-radius:      2em;
-            background-color:   fn.color(--circle-border);
-            background-clip:    padding-box;
-            vertical-align:     top;
+                @include bem.elem('circle') {
+                        display:            inline-block;
+                        flex:               0 0 auto;
+                        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));
-                transition:         transform .2s ease;
-                border-radius:      fn.dim(--diameter);
-                background-color:   fn.color(--circle-bg);
-            }
-        }
+                        &::after {
+                                position:           relative;
+                                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;
+                        }
+                }
     
-        @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;
-            position:           absolute;
-            z-index:            -1;
-            inset-block-start:  0;
-            inset-inline-start: 0;
-            inline-size:        100%;
-            block-size:         100%;
-            margin:             0;
-            padding:            0;
-            overflow:           hidden;
-            border-radius:      fn.dim(--rounding);
+                @include bem.elem('native') {
+                        position:           absolute;
+                        inset-block-start:  0;
+                        inset-inline-start: 0;
+                        z-index:            -1;
+                        inline-size:        100%;
+                        block-size:         100%;
+                        padding:            0;
+                        margin:             0;
+                        overflow:           hidden;
+                        appearance:         none;
+                        border-radius:      props.get(vars.$rounding);
     
-            &:hover,
-            &:focus-visible {
-                @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--hover --label);
-                }
+                        &:hover,
+                        &:focus-visible {
+                                @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') {
-                    &::after {
-                        transform: scale(.44);
-                    }
-                }
-            }
+                        &:checked {
+                                @include bem.sibling-elem('circle') {
+                                        &::after {
+                                                transform: scale(.44);
+                                        }
+                                }
+                        }
     
-            &:disabled {
-                @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--disabled --label);
-                }
+                        &:disabled {
+                                @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);
-                    }
-                }
-            }
+                                        &::after {
+                                                background-color: props.get(vars.$disabled--circle-bg-color);
+                                        }
+                                }
+                        }
 
-            &:focus-visible {
-                @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--key-focus --label);
-                }
+                        &:focus-visible {
+                                @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') {
-                margin-block-start: 0;
-            }
-        }
+                @include bem.modifier('standalone') {
+                        @include bem.elem('circle') {
+                                margin-block-start: 0;
+                        }
+                }
     
-        @include iro.bem-modifier('accent') {
-            @include iro.bem-elem('native') {
-                &:checked {
-                    @include iro.bem-sibling-elem('circle') {
-                        background-color: fn.color(--accent --circle-border);
-                    }
+                @include bem.modifier('accent') {
+                        @include bem.elem('native') {
+                                &:checked {
+                                        @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);
-                        }
-                    }
-                }
+                                        &:hover,
+                                        &:focus-visible {
+                                                @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);
+                                &:disabled {
+                                        @include bem.sibling-elem('circle') {
+                                                background-color: props.get(vars.$disabled--circle-border-color);
         
-                        &::after {
-                            background-color: fn.color(--disabled --circle-bg);
-                        }
-                    }
+                                                &::after {
+                                                        background-color: props.get(vars.$disabled--circle-bg-color);
+                                                }
+                                        }
         
-                    &:checked {
-                        @include iro.bem-sibling-elem('circle') {
-                            background-color: fn.color(--disabled --circle-border);
-                        }
-                    }
-                }
-            }
-        }
-    }
+                                        &:checked {
+                                                @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..b18ae2b
--- /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--sm)) !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..4a1feda 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()) {
-        display:        flex;
-        flex-direction: column;
-        gap:            fn.dim(--spacing);
+        @include bem.object('side-nav') {
+                display:        flex;
+                flex-direction: column;
+                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);
-            font-weight:    500;
-            letter-spacing: .5px;
-            text-transform: uppercase;
+                @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;
+                        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);
-            background-clip: padding-box;
+                @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;
+                        &: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);
-                }
+                                &:active {
+                                        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);
-                }
-            }
+                                &:focus-visible {
+                                        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') {
-            &:link,
-            &:visited,
-            &:enabled {
-                color: fn.color(--header --label);
-            }
-        }
+                @include bem.elem('header') {
+                        &:link,
+                        &:visited,
+                        &:enabled {
+                                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') {
-            display:         flex;
-            justify-content: center;
-            inline-size:     fn.foreign-dim(--icon, --size);
-        }
-    }
+                @include bem.elem('icon-slot') {
+                        display:         flex;
+                        justify-content: center;
+                        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..711b2a7
--- /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--sm)) !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..4e4aa42 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -1,39 +1,27 @@
-@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 bem.object('status-indicator') {
+                display:          inline-block;
+                inline-size:      props.get(vars.$size);
+                block-size:       props.get(vars.$size);
+                background-color: props.get(vars.$default);
+                border-radius:    10em;
 
-    @include iro.bem-object(iro.props-namespace()) {
-        display:          inline-block;
-        inline-size:      fn.dim(--size);
-        block-size:       fn.dim(--size);
-        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..55b446a
--- /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..48cec24 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -1,222 +1,188 @@
-@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;
-        position:       relative;
-        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);
+        @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 * 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') {
-            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;
-            vertical-align:     top;
+                @include bem.elem('indicator') {
+                        display:            inline-block;
+                        flex:               0 0 auto;
+                        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));
-                transition:       transform .2s ease;
-                border:           fn.dim(--border) solid fn.color(--handle-border);
-                border-radius:    fn.dim(--width);
-                background-color: fn.color(--handle-bg);
-            }
-        }
+                        &::after {
+                                display:          block;
+                                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;
+                        }
+                }
     
-        @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;
-            position:           absolute;
-            z-index:            -1;
-            inset-block-start:  0;
-            inset-inline-start: 0;
-            inline-size:        100%;
-            block-size:         100%;
-            margin:             0;
-            padding:            0;
-            overflow:           hidden;
-            border-radius:      fn.dim(--rounding);
+                @include bem.elem('native') {
+                        position:           absolute;
+                        inset-block-start:  0;
+                        inset-inline-start: 0;
+                        z-index:            -1;
+                        inline-size:        100%;
+                        block-size:         100%;
+                        padding:            0;
+                        margin:             0;
+                        overflow:           hidden;
+                        appearance:         none;
+                        border-radius:      props.get(vars.$rounding);
     
-            &:hover,
-            &:focus-visible {
-                @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--hover --label);
-                }
+                        &:hover,
+                        &:focus-visible {
+                                @include bem.sibling-elem('label') {
+                                        color: props.get(vars.$hover--label-color);
+                                }
     
-                @include iro.bem-sibling-elem('indicator') {
-                    &::after {
-                        border-color: fn.color(--hover --handle-border);
-                    }
-                }
-            }
+                                @include bem.sibling-elem('indicator') {
+                                        &::after {
+                                                border-color: props.get(vars.$hover--handle-border-color);
+                                        }
+                                }
+                        }
     
-            &:checked {
-                @include iro.bem-sibling-elem('indicator') {
-                    background-color: fn.color(--handle-border);
+                        &:checked {
+                                @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);
-                    }
-                }
+                                        &::after {
+                                                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);
+                                &:hover,
+                                &:focus-visible {
+                                        @include bem.sibling-elem('indicator') {
+                                                background-color: props.get(vars.$hover--handle-border-color);
 
-                        &::after {
-                            border-color: fn.color(--hover --handle-border);
-                        }
-                    }
-                }
-            }
+                                                &::after {
+                                                        border-color: props.get(vars.$hover--handle-border-color);
+                                                }
+                                        }
+                                }
+                        }
     
-            &:disabled {
-                @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--disabled --label);
-                }
+                        &:disabled {
+                                @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);
-                    }
-                }
+                                        &::after {
+                                                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);
+                                &:checked {
+                                        @include bem.sibling-elem('indicator') {
+                                                background-color: props.get(vars.$disabled--handle-border-color);
     
-                        &::after {
-                            border-color: fn.color(--disabled --handle-border);
-                        }
-                    }
-                }
-            }
+                                                &::after {
+                                                        border-color: props.get(vars.$disabled--handle-border-color);
+                                                }
+                                        }
+                                }
+                        }
     
-            &:focus-visible {
-                @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--key-focus --label);
-                }
+                        &:focus-visible {
+                                @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') {
-                margin-block-start: 0;
-            }
-        }
+                @include bem.modifier('standalone') {
+                        @include bem.elem('indicator') {
+                                margin-block-start: 0;
+                        }
+                }
     
-        @include iro.bem-modifier('accent') {
-            @include iro.bem-elem('native') {
-                &:checked {
-                    @include iro.bem-sibling-elem('indicator') {
-                        background-color: fn.color(--accent --handle-border);
+                @include bem.modifier('accent') {
+                        @include bem.elem('native') {
+                                &:checked {
+                                        @include bem.sibling-elem('indicator') {
+                                                background-color: props.get(vars.$accent--handle-border-color);
         
-                        &::after {
-                            border-color: fn.color(--accent --handle-border);
-                        }
-                    }
+                                                &::after {
+                                                        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);
+                                        &:hover,
+                                        &:focus-visible {
+                                                @include bem.sibling-elem('indicator') {
+                                                        background-color: props.get(vars.$accent--hover--handle-border-color);
     
-                            &::after {
-                                border-color: fn.color(--accent --hover --handle-border);
-                            }
-                        }
-                    }
-                }
+                                                        &::after {
+                                                                border-color: props.get(vars.$accent--hover--handle-border-color);
+                                                        }
+                                                }
+                                        }
+                                }
         
-                &:disabled {
-                    @include iro.bem-sibling-elem('label') {
-                        color: fn.color(--disabled --label);
-                    }
+                                &:disabled {
+                                        @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);
+                                        &:checked {
+                                                @include bem.sibling-elem('indicator') {
+                                                        background-color: props.get(vars.$disabled--handle-border-color);
 
-                            &::after {
-                                border-color: fn.color(--disabled --handle-border);
-                            }
-                        }
-                    }
-                }
-            }
-        }
-    }
+                                                        &::after {
+                                                                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..10489a5
--- /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--sm)) !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..a9daaae
--- /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..4095629
--- /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--sm)) !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..9e4891d 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -1,168 +1,147 @@
-@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()) {
-        border-spacing:  0;
-        border-collapse: separate;
+        @include bem.object('table') {
+                border-spacing:  0;
+                border-collapse: separate;
 
-        @include iro.bem-modifier('fixed') {
-            table-layout: 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
-            ));
+                @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);
+                }
 
-            padding-inline: fn.dim(--pad-i);
-            padding-block:  fn.dim(--pad-b);
-            color:          fn.color(--heading);
-            text-align:     start;
-        }
+                @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-width:             0;
+                        border-block-start-width: props.get(vars.$border-width);
 
-        @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);
-            border-style:             solid;
-            border-color:             fn.color(--border);
+                        @include bem.modifier('divider') {
+                                border-inline-end-width: props.get(vars.$border-width);
+                        }
+                }
 
-            @include iro.bem-modifier('divider') {
-                border-inline-end-width: fn.dim(--border);
-            }
-        }
+                @include bem.elem('row') {
+                        &:last-child {
+                                @include bem.elem('cell') {
+                                        border-block-end-width: props.get(vars.$border-width);
+                                }
+                        }
+                }
 
-        @include iro.bem-elem('row') {
-            &:last-child {
-                @include iro.bem-elem('cell') {
-                    border-block-end-width: fn.dim(--border);
-                }
-            }
-        }
+                @include bem.modifier('flush') {
+                        @include bem.elem('head-cell', 'cell') {
+                                &:first-child {
+                                        padding-inline-start: 0;
+                                }
 
-        @include iro.bem-modifier('flush') {
-            @include iro.bem-elem('head-cell', 'cell') {
-                &:first-child {
-                    padding-inline-start: 0;
-                }
+                                &:last-child {
+                                        padding-inline-end: 0;
+                                }
+                        }
+                }
 
-                &:last-child {
-                    padding-inline-end: 0;
-                }
-            }
-        }
-
-        @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);
-                }
+                                &:first-child {
+                                        border-inline-start-width: props.get(vars.$border-width);
+                                }
             
-                &:last-child {
-                    border-inline-end-width: fn.dim(--border);
-                }
-            }
+                                &:last-child {
+                                        border-inline-end-width: props.get(vars.$border-width);
+                                }
+                        }
     
-            @include iro.bem-elem('row') {
-                &:first-child {
-                    @include iro.bem-elem('cell') {
-                        &:first-child {
-                            border-start-start-radius: fn.dim(--rounding);
-                        }
+                        @include bem.elem('row') {
+                                &:first-child {
+                                        @include bem.elem('cell') {
+                                                &:first-child {
+                                                        border-start-start-radius: props.get(vars.$rounding);
+                                                }
             
-                        &:last-child {
-                            border-start-end-radius: fn.dim(--rounding);
-                        }
-                    }
-                }
+                                                &:last-child {
+                                                        border-start-end-radius: props.get(vars.$rounding);
+                                                }
+                                        }
+                                }
     
-                &:last-child {
-                    @include iro.bem-elem('cell') {
-                        &:first-child {
-                            border-end-start-radius: fn.dim(--rounding);
-                        }
+                                &:last-child {
+                                        @include bem.elem('cell') {
+                                                &:first-child {
+                                                        border-end-start-radius: props.get(vars.$rounding);
+                                                }
             
-                        &:last-child {
-                            border-end-end-radius: fn.dim(--rounding);
-                        }
-                    }
-                }
-            }
-        }
+                                                &:last-child {
+                                                        border-end-end-radius: props.get(vars.$rounding);
+                                                }
+                                        }
+                                }
+                        }
+                }
 
-        @include iro.bem-modifier('interactive') {
-            @include iro.bem-elem('row') {
-                @include iro.bem-elem('cell') {
-                    cursor: pointer;
-                }
+                @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);
-                    }
-                }
+                                &:hover {
+                                        @include bem.elem('cell') {
+                                                background-color: props.get(vars.$hover--bg-color);
+                                        }
+                                }
     
-                &:active {
-                    @include iro.bem-elem('cell') {
-                        background-color: fn.color(--active);
-                    }
-                }
-            }
+                                &:active {
+                                        @include bem.elem('cell') {
+                                                background-color: props.get(vars.$active--bg-color);
+                                        }
+                                }
+                        }
 
-            @include iro.bem-modifier('box') {
-                @include iro.bem-elem('row') {
-                    &:hover {
-                        @include iro.bem-elem('cell') {
-                            background-color: fn.color(--box --hover);
-                        }
-                    }
+                        @include bem.modifier('box') {
+                                @include bem.elem('row') {
+                                        &: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);
-                        }
-                    }
-                }
-            }
-        }
+                                        &: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..b8d8093
--- /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--sm)) !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..b89e148 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -1,213 +1,187 @@
-@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') {
-        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);
-    }
+        @include bem.sibling-elem('bg') {
+                inset-block:   $focus-border-offset;
+                inset-inline:  $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);
-        }
-    }
+        &:hover {
+                @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);
-        }
-    }
+        &:focus {
+                @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') {
+                outline:        props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width);
+                border-color:   props.get(vars.$key-focus--border-color);
+                //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),
+@mixin styles {
+        @include materialize-at-root(meta.module-variables('vars'));
 
-            --extended: (
-                --pad:     fn.global-dim(--size --50),
-            ),
+        @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;
+                background-color: props.get(vars.$bg-color);
+                border-radius:    props.get(vars.$rounding);
 
-            --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 bem.elem('bg') {
+                        position:       absolute;
+                        inset-block:    0;
+                        inset-inline:   0;
+                        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-object(iro.props-namespace()) {
-        $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
-        
-        position:         relative;
-        min-inline-size:  0;
-        border-radius:    fn.dim(--rounding);
-        background-color: fn.color(--bg);
+                @include bem.elem('native') {
+                        box-sizing:       border-box;
+                        inline-size:      100%;
+                        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:      props.get(vars.$line-height);
+                        color:            props.get(vars.$text-color);
+                        appearance:       none;
+                        resize:           none;
+                        background-color: transparent;
+                        border:           1px solid transparent;
+
+                        &::placeholder {
+                                font-style: italic;
+                                color:      props.get(vars.$placeholder-color);
+                                opacity:    1;
+                        }
+
+                        &:hover {
+                                @include bem.sibling-elem('bg') {
+                                        border-color: props.get(vars.$hover--border-color);
+                                }
+                        }
 
-        @include iro.bem-elem('bg') {
-            display:        block;
-            position:       absolute;
-            inset-block:    0;
-            inset-inline:   0;
-            border:         fn.dim(--border) solid fn.color(--border);
-            border-radius:  fn.dim(--rounding);
-            pointer-events: none;
-        }
+                        &:focus {
+                                outline: 0;
 
-        @include iro.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);
-            font:             inherit;
-            line-height:      fn.dim(--line-height);
-            resize:           none;
-            appearance:       none;
+                                @include bem.sibling-elem('bg') {
+                                        inset-block:   $focus-border-offset;
+                                        inset-inline:  $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);
+                                }
+                        }
 
-            &::placeholder {
-                opacity:    1;
-                color:      fn.color(--placeholder);
-                font-style: italic;
-            }
+                        &:invalid {
+                                @include -invalid;
+                        }
 
-            &:hover {
-                @include iro.bem-sibling-elem('bg') {
-                    border-color: fn.color(--hover --border);
-                }
-            }
+                        &:focus-visible,
+                        &:invalid:focus-visible {
+                                @include -keyboard-focus;
+                        }
+                }
 
-            &:focus {
-                outline: 0;
+                @include bem.modifier('extended') {
+                        padding: props.get(vars.$extended--pad);
 
-                @include iro.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);
-                }
-            }
+                        @include bem.multi('&', 'elem' 'bg') {
+                                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad));
+                        }
 
-            &:invalid {
-                @include invalid;
-            }
+                        @include bem.elem('native') {
+                                &:focus {
+                                        @include bem.sibling-elem('bg') {
+                                                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset);
+                                        }
+                                }
+                        }
+                }
 
-            &:focus-visible,
-            &:invalid:focus-visible {
-                @include keyboard-focus;
-            }
-        }
+                @include bem.modifier('pill') {
+                        @include bem.multi('&', 'elem' 'bg') {
+                                border-radius: 100em;
+                        }
 
-        @include iro.bem-modifier('extended') {
-            padding: fn.dim(--extended --pad);
+                        @include bem.elem('native') {
+                                padding-inline: props.get(vars.$pad-i-pill);
 
-            @include iro.bem-multi('&', 'elem' 'bg') {
-                border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad));
-            }
+                                &:focus {
+                                        @include bem.sibling-elem('bg') {
+                                                border-radius: 100em;
+                                        }
+                                }
+                        }
 
-            @include iro.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.modifier('extended') {
+                                @include bem.elem('native') {
+                                        padding-inline: props.get(vars.$pad-i);
+                                }
+                        }
+                }
 
-        @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;
-                }
-            }
-        }
+                                &:focus-visible {
+                                        @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);
-                }
-            }
+                                &::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') {
-                &:invalid {
-                    @include iro.bem-sibling-elem('bg') {
-                        border-color: fn.color(--disabled --border);
-                    }
-                }
-            }
-        }
-    }
+                        @include bem.elem('native') {
+                                &:invalid {
+                                        @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..51099d8
--- /dev/null
+++ b/src/objects/_text-field.vars.scss
@@ -0,0 +1,39 @@
+@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-i-pill:   props.def(--o-text-field--pad-i-pill, props.get(core.$size--175)) !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--sm)) !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..60a98af
--- /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;
+                outline:        props.get(vars.$border-color) solid props.get(vars.$border-width);
+                outline-offset: calc(-1 * props.get(vars.$border-width));
+                border-radius:  props.get(vars.$rounding);
+                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;
+                        outline:       none;
+                        border:        props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color);
+                        border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
+                        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;
+                        outline:        props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                        outline-offset: 0;
+                        border:         props.get(vars.$key-focus--border-offset) solid transparent;
+                        border-radius:  calc(props.get(vars.$rounding) - $focus-border-offset);
+                        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 {
+                                        outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border);
+                                        border-color:  transparent;
+                                        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..e49e52e
--- /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--sm)) !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..a99add8 100644
--- a/src/scopes/_blockquotes.scss
+++ b/src/scopes/_blockquotes.scss
@@ -1,34 +1,26 @@
-@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()) {
-        blockquote {
-            margin-block:         fn.dim(--margin-bs);
-            margin-inline:        1px 0;
-            padding-inline-start: calc(fn.dim(--indent) - fn.dim(--border));
-            border-inline-start:  fn.dim(--border) solid fn.color(--border);
-        }
+        @include bem.scope('blockquotes') {
+                blockquote {
+                        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;
+                        border-inline-start:  props.get(vars.$border-width) solid props.get(vars.$border-color);
+                }
 
-        @include iro.bem-modifier('compact') {
-            blockquote {
-                padding-inline-start: calc(fn.dim(--compact --indent) - fn.dim(--border));
-            }
-        }
-    }
+                @include bem.modifier('compact') {
+                        blockquote {
+                                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..f307f58
--- /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..8147a14 100644
--- a/src/scopes/_code.scss
+++ b/src/scopes/_code.scss
@@ -1,59 +1,40 @@
-@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()) {
-        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);
-        }
+@mixin styles {
+        @include materialize-at-root(meta.module-variables('vars'));
 
-        pre {
-            margin-block:     fn.dim(--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);
+        @include bem.scope('code') {
+                code {
+                        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);
+                }
 
-            code {
-                display:           inline-block;
-                margin-inline-end: fn.dim(--block --pad-i);
-                padding:           0;
-                border-radius:     0;
-                background-color:  transparent;
-                color:             currentColor;
-            }
-        }
-    }
+                pre {
+                        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;
+                        color:            props.get(vars.$block--fg);
+                        background-color: props.get(vars.$block--bg);
+                        border-radius:    props.get(vars.$block--rounding);
+
+                        code {
+                                display:           inline-block;
+                                padding:           0;
+                                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..08472f2
--- /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--sm)) !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--sm)) !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..d931820
--- /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..f8a7854 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -1,116 +1,67 @@
-@use 'iro-sass/src/index' as iro;
-@use '../functions' as fn;
-@use '../mixins' as mx;
-@use 'include-media/dist/include-media' as media;
+@use 'sass:map';
+@use 'iro-sass/src/bem';
+@use 'iro-sass/src/props';
+@use '../objects/heading.vars' as heading;
 
-@include iro.props-namespace('headings') {
-    @include iro.bem-scope(iro.props-namespace()) {
-        h1,
-        h2,
-        h3,
-        h4,
-        h5,
-        h6 {
-            @include mx.set-font(--headline);
+@mixin styles {
+        /* stylelint-disable-next-line scss/dollar-variable-pattern */
+        $-size-map: (
+                xs: h6,
+                sm: h5,
+                md: h4,
+                lg: h3,
+                xl: h2,
+                xxl: h1,
+        );
 
-            display:        block;
-            transform:      translateX(-.06em);
-            letter-spacing: normal;
-            text-transform: none;
-        }
+        @include bem.scope('headings') {
+                h1,
+                h2,
+                h3,
+                h4,
+                h5,
+                h6 {
+                        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 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);
+                }
 
-        h1 {
-            @include mx.heading-strong(--xxl);
-        }
+                @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);
+                        }
+                }
 
-        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);
-        }
-
-        @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 iro.bem-modifier('display') {
-            h1,
-            h2,
-            h3,
-            h4,
-            h5,
-            h6 {
-                @include mx.set-font(--headline);
-            }
-
-            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..cee1639
--- /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..9ade0c2 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -1,143 +1,119 @@
-@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),
-            ),
+        @include bem.scope('links') {
+                :link,
+                :visited {
+                        color:                     currentColor;
+                        text-decoration:           underline;
+                        text-decoration-thickness: props.get(vars.$underline-width);
+                        text-decoration-color:     props.get(vars.$underline-color);
+                        border-radius:             props.get(vars.$rounding-sm);
+                        box-decoration-break:      clone;
 
-            --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),
+                        &:hover {
+                                text-decoration:           underline;
+                                text-decoration-thickness: props.get(vars.$hover--underline-width);
+                                text-decoration-skip-ink:  none;
+                        }
 
-            --colored: (
-                --text:          fn.global-color(--accent --1100),
-                --underline:     fn.global-color(--accent --600),
+                        &:focus-visible {
+                                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);
+                        }
+                }
 
-                --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),
-                    ),
-                ),
-            ),
+                @include bem.modifier('invisible') {
+                        :link,
+                        :visited {
+                                text-decoration: none;
+                        }
+                }
 
-            --key-focus: (
-                --text:          fn.global-color(--focus --text),
-                --border:        fn.global-color(--focus --border),
-                --outline:       fn.global-color(--focus --outline),
-            ),
-        ),
-    ));
+                @include bem.modifier('colored') {
+                        :link {
+                                color:                 props.get(vars.$colored--text-color);
+                                text-decoration-color: props.get(vars.$colored--underline-color);
 
-    @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),
-                    ),
+                                &:hover {
+                                        color:             props.get(vars.$colored--hover--text-color);
+                                }
+                        }
 
-                    --key-focus: (
-                        --text:      fn.global-color(--#{$theme}-transparent --900),
-                        --border:    fn.global-color(--#{$theme}-transparent --900),
-                        --outline:   fn.global-color(--#{$theme}-transparent --300),
-                    ),
-                )
-            )
-        ));
-    }
+                        :visited {
+                                color:                 props.get(vars.$colored--visited--text-color);
+                                text-decoration-color: props.get(vars.$colored--visited--underline-color);
 
-    @include iro.bem-scope(iro.props-namespace()) {
-        :link,
-        :visited {
-            border-radius:             fn.dim(--rounding);
-            color:                     currentColor;
-            text-decoration:           underline;
-            text-decoration-color:     fn.color(--underline);
-            text-decoration-thickness: fn.dim(--underline);
-            box-decoration-break:      clone;
+                                &:hover {
+                                        color:             props.get(vars.$colored--visited--hover--text-color);
+                                }
+                        }
+                }
 
-            &:hover {
-                text-decoration:           underline;
-                text-decoration-thickness: fn.dim(--hover --underline);
-                text-decoration-skip-ink:  none;
-            }
+                @each $theme in map.keys(props.get(vars.$static-themes)) {
+                        @include bem.modifier(string.slice($theme, 3)) {
+                                :link,
+                                :visited {
+                                        color:                 props.get(vars.$static-themes, $theme, --text-color);
+                                        text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color);
 
-            &: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;
-            }
-        }
+                                        &:hover {
+                                                color:             props.get(vars.$static-themes, $theme, --hover, --text-color);
+                                        }
 
-        @include iro.bem-modifier('invisible') {
-            :link,
-            :visited {
-                text-decoration: none;
-            }
-        }
+                                        &:focus-visible {
+                                                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 iro.bem-modifier('colored') {
-            :link {
-                color:                 fn.color(--colored --text);
-                text-decoration-color: fn.color(--colored --underline);
-
-                &:hover {
-                    color:             fn.color(--colored --hover --text);
-                }
-            }
+                @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));
+                        }
     
-            :visited {
-                color:                 fn.color(--colored --visited --text);
-                text-decoration-color: fn.color(--colored --visited --underline);
-
-                &:hover {
-                    color:             fn.color(--colored --visited --hover --text);
-                }
-            }
-        }
-
-        @each $theme in $static-themes {
-            @include iro.bem-modifier(static-#{$theme}) {
-                :link,
-                :visited {
-                    color:                 fn.color(--static-#{$theme} --text);
-                    text-decoration-color: fn.color(--static-#{$theme} --underline);
-
-                    &:hover {
-                        color:             fn.color(--static-#{$theme} --hover --text);
-                    }
-
-                    &: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);
-                    }
-                }
-            }
-        }
-    }
+                        &: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..c69cc32
--- /dev/null
+++ b/src/scopes/_links.vars.scss
@@ -0,0 +1,49 @@
+@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;
+$rounding-sm:            props.def(--s-links--rounding-sm, props.get(core.$rounding--sm)) !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..fc8a577 100644
--- a/src/scopes/_lists.scss
+++ b/src/scopes/_lists.scss
@@ -1,66 +1,60 @@
-@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()) {
-        ul,
-        ol {
-            margin-block-start:   fn.dim(--margin-bs);
-            padding-inline-start: fn.dim(--indent);
+        @include bem.scope('lists') {
+                ul,
+                ol {
+                        padding-inline-start: props.get(vars.$indent);
+                        margin-block-start:   props.get(vars.$margin-bs);
 
-            ul,
-            ol {
-                margin-block-start: 0;
-            }
-        }
+                        ul,
+                        ol {
+                                margin-block-start: 0;
+                        }
+                }
 
-        ul {
-            list-style: disc;
-        }
+                ul {
+                        list-style: disc;
+                }
 
-        ol {
-            list-style: decimal;
-        }
+                ol {
+                        list-style: decimal;
+                }
 
-        dl {
-            margin-block:  fn.dim(--margin-bs) 0;
-            margin-inline: 0;
-            padding:       0;
-        }
+                dl {
+                        padding:       0;
+                        margin-block:  props.get(vars.$margin-bs) 0;
+                        margin-inline: 0;
+                }
 
-        dt {
-            color:       fn.global-color(--heading);
-            font-weight: bold;
-        }
+                dt {
+                        font-weight: bold;
+                        color:       props.get(core.$theme, --heading);
+                }
 
-        dd {
-            margin-block:  0;
-            margin-inline: fn.dim(--indent) 0;
-        }
+                dd {
+                        margin-block:  0;
+                        margin-inline: props.get(vars.$indent) 0;
+                }
 
-        @include iro.bem-modifier('compact') {
-            ul,
-            ol {
-                padding-inline-start: calc(fn.dim(--compact --indent) - 3px);
-            }
+                @include bem.modifier('compact') {
+                        ul,
+                        ol {
+                                padding-inline-start: calc(props.get(vars.$compact--indent) - 3px);
+                        }
 
-            dd {
-                margin-inline-start: calc(fn.dim(--compact --indent) - 3px);
-            }
-        }
-    }
+                        dd {
+                                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..5b64301 100644
--- a/src/scopes/_tables.scss
+++ b/src/scopes/_tables.scss
@@ -1,115 +1,102 @@
-@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()) {
-        table {
-            margin-block-start: fn.dim(--margin-bs);
-            border-spacing:     0;
-            border-collapse:    separate;
-        }
+@mixin styles {
+        @include materialize-at-root(meta.module-variables('vars'));
 
-        th {
-            @include mx.set-font(--standard, (
-                --line-height: null,
-                --size:        fn.global-dim(--font-size --50),
-                --weight:      bold,
-                --transform:   uppercase,
-                --spacing:     .5px
-            ));
+        @include bem.scope('tables') {
+                table {
+                        margin-block-start: props.get(vars.$margin-bs);
+                        border-spacing:     0;
+                        border-collapse:    separate;
+                }
 
-            padding-block:  fn.dim(--pad-b);
-            padding-inline: fn.dim(--pad-i);
-            color:          fn.color(--heading);
-            text-align:     start;
-        }
+                th {
+                        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);
-            border-style:             solid;
-            border-color:             fn.color(--border);
-        }
+                td {
+                        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-width:             0;
+                        border-block-start-width: props.get(table.$border-width);
+                }
 
-        tr {
-            &:last-child {
-                td {
-                    border-block-end-width: fn.dim(--border);
-                }
-            }
-        }
+                tr {
+                        &:last-child {
+                                td {
+                                        border-block-end-width: props.get(table.$border-width);
+                                }
+                        }
+                }
 
-        @include iro.bem-modifier('flush') {
-            th,
-            td {
-                &:first-child {
-                    padding-inline-start: 0;
-                }
+                @include bem.modifier('flush') {
+                        th,
+                        td {
+                                &:first-child {
+                                        padding-inline-start: 0;
+                                }
 
-                &:last-child {
-                    padding-inline-end: 0;
-                }
-            }
-        }
+                                &:last-child {
+                                        padding-inline-end: 0;
+                                }
+                        }
+                }
 
-        @include iro.bem-modifier('box') {
-            td {
-                background-color: fn.color(--box --bg);
+                @include bem.modifier('box') {
+                        td {
+                                background-color: props.get(table.$box--bg-color);
             
-                &:first-child {
-                    border-inline-start-width: fn.dim(--border);
-                }
+                                &:first-child {
+                                        border-inline-start-width: props.get(table.$border-width);
+                                }
             
-                &:last-child {
-                    border-inline-end-width: fn.dim(--border);
-                }
-            }
+                                &:last-child {
+                                        border-inline-end-width: props.get(table.$border-width);
+                                }
+                        }
     
-            tr {
-                &:first-child {
-                    td {
-                        &:first-child {
-                            border-start-start-radius: fn.dim(--rounding);
-                        }
+                        tr {
+                                &:first-child {
+                                        td {
+                                                &:first-child {
+                                                        border-start-start-radius: props.get(table.$rounding);
+                                                }
             
-                        &:last-child {
-                            border-start-end-radius: fn.dim(--rounding);
-                        }
-                    }
-                }
+                                                &:last-child {
+                                                        border-start-end-radius: props.get(table.$rounding);
+                                                }
+                                        }
+                                }
     
-                &:last-child {
-                    td {
-                        &:first-child {
-                            border-end-start-radius: fn.dim(--rounding);
-                        }
+                                &:last-child {
+                                        td {
+                                                &:first-child {
+                                                        border-end-start-radius: props.get(table.$rounding);
+                                                }
             
-                        &:last-child {
-                            border-end-end-radius: fn.dim(--rounding);
-                        }
-                    }
-                }
-            }
-        }
-    }
+                                                &:last-child {
+                                                        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;