From 6448b40f6224b271acb6010cac0672dec4755341 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Sat, 19 Oct 2024 08:51:30 +0200
Subject: Update

---
 src/_iro-design.scss            |   5 ++
 src/objects/_badge.scss         |   2 +-
 src/objects/_badge.vars.scss    |   6 +-
 src/objects/_button.scss        |  22 +++----
 src/objects/_card.scss          | 129 +++++++++++++++---------------------
 src/objects/_card.vars.scss     |  25 +++++++
 src/objects/_checkbox.scss      | 142 ++++++++++++++++------------------------
 src/objects/_checkbox.vars.scss |  32 +++++++++
 src/objects/_divider.scss       | 132 ++++++++++---------------------------
 src/objects/_divider.vars.scss  |  59 +++++++++++++++++
 src/objects/_emoji.scss         |  72 +++++++-------------
 src/objects/_emoji.vars.scss    |  26 ++++++++
 src/objects/_icon.scss          |  26 ++++----
 src/objects/_icon.vars.scss     |   5 ++
 src_demo/index.scss             |   5 ++
 15 files changed, 352 insertions(+), 336 deletions(-)
 create mode 100644 src/objects/_card.vars.scss
 create mode 100644 src/objects/_checkbox.vars.scss
 create mode 100644 src/objects/_divider.vars.scss
 create mode 100644 src/objects/_emoji.vars.scss
 create mode 100644 src/objects/_icon.vars.scss

diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index b8e8246..6cda866 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -43,3 +43,8 @@ $breakpoints: (
 @forward 'objects/backdrop' as o-backdrop--*;
 @forward 'objects/badge' as o-badge--*;
 @forward 'objects/button' as o-button--*;
+@forward 'objects/card' as o-card--*;
+@forward 'objects/checkbox' as o-checkbox--*;
+@forward 'objects/divider' as o-divider--*;
+@forward 'objects/emoji' as o-emoji--*;
+@forward 'objects/icon' as o-icon--*;
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 5a07630..41b2fbb 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -50,7 +50,7 @@
 
     @if $static {
         &::after {
-            outline:    props.get($theme, list.join($key, --key-focus --border)...) solid props.get(vars.$key-focus--border-width);
+            outline-color: props.get($theme, list.join($key, --key-focus --border)...);
             box-shadow:
                 0
                 0
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss
index c49474b..9254c83 100644
--- a/src/objects/_badge.vars.scss
+++ b/src/objects/_badge.vars.scss
@@ -37,9 +37,9 @@ $sizes: (
     'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl,
 ) !default;
 
-$key-focus--label-color:   props.def(--o-avatar--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default;
-$key-focus--border-color:  props.def(--o-avatar--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
-$key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
+$key-focus--label-color:   props.def(--o-badge--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default;
+$key-focus--border-color:  props.def(--o-badge--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
+$key-focus--outline-color: props.def(--o-badge--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
 
 $default-theme-override: () !default;
 $default-theme: props.def(--o-badge, (
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 854e1e3..e4a656c 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -22,9 +22,9 @@
         &:link,
         &:visited,
         &:enabled {
-            color:            props.get($theme, list.join($key, --outline-label));
+            color:            props.get($theme, list.join($key, --outline-label)...);
             background-color: transparent;
-            border-color:     props.get($theme, list.join($key, --outline-border));
+            border-color:     props.get($theme, list.join($key, --outline-border)...);
         }
     }
 
@@ -33,37 +33,37 @@
     &:enabled {
         &:hover,
         &:focus-visible {
-            color:            props.get($theme, list.join($key, --hover --label));
-            background-color: props.get($theme, list.join($key, --hover --bg));
+            color:            props.get($theme, list.join($key, --hover --label)...);
+            background-color: props.get($theme, list.join($key, --hover --bg)...);
             border-color:     transparent;
         }
 
         &:active {
-            color:            props.get($theme, list.join($key, --active --label));
-            background-color: props.get($theme, list.join($key, --active --bg));
+            color:            props.get($theme, list.join($key, --active --label)...);
+            background-color: props.get($theme, list.join($key, --active --bg)...);
             border-color:     transparent;
         }
     }
 }
 
 @mixin -apply-static-theme($theme, $key: ()) {
-    color:            props.get($theme, list.join($key, --disabled --label));
-    background-color: props.get($theme, list.join($key, --disabled --bg));
+    color:            props.get($theme, list.join($key, --disabled --label)...);
+    background-color: props.get($theme, list.join($key, --disabled --bg)...);
     border-color:     transparent;
 
     &::after {
-        outline:    props.get($theme, list.join($key, --key-focus --border)) solid props.get(vars.$key-focus--border-width);
+        outline-color: props.get($theme, list.join($key, --key-focus --border)...);
         box-shadow:
             0
             0
             0
             calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-            props.get($theme, list.join($key, --key-focus --outline));
+            props.get($theme, list.join($key, --key-focus --outline)...);
     }
     
     @include iro.bem-modifier('outline') {
         background-color: transparent;
-        border-color:     props.get($theme, list.join($key, --disabled --outline-border));
+        border-color:     props.get($theme, list.join($key, --disabled --outline-border)...);
     }
 
     @include -apply-theme($theme, $key);
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index cc9afc9..25e68d2 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -1,70 +1,44 @@
+@use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
-
-@include iro.props-namespace('card') {
-    @include iro.props-store((
-        --dims: (
-            --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),
-
-            --hover: (
-                --offset-b: calc(-1 * fn.global-dim(--size --65)),
-            ),
-
-            --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),
-            --divider:  fn.global-color(--border-mute),
-
-            --key-focus: (
-                --label:   fn.global-color(--focus --text),
-                --border:  fn.global-color(--focus --border),
-                --outline: fn.global-color(--focus --outline),
-            ),
-
-            --quiet: (
-                --image: fn.global-color(--bg-base),
-
-                --hover: (
-                    --image: fn.global-color(--border),
-                ),
-            )
-        ),
-    ));
-
-    @include iro.bem-object(iro.props-namespace()) {
+@use '../props';
+@use 'avatar.vars' as avatar;
+
+@forward 'card.vars';
+@use 'card.vars' as vars;
+
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
+
+    @include iro.bem-object('card') {
         display:          block;
-        margin:           calc(-1 * fn.dim(--key-focus --border));
-        background-color: fn.color(--bg);
+        margin:           calc(-1 * props.get(vars.$key-focus--border-width));
+        background-color: props.get(vars.$bg-color);
         background-clip:  content-box;
-        border:           fn.dim(--key-focus --border-offset) solid transparent;
-        border-radius:    calc(fn.dim(--rounding) + fn.dim(--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));
         transition:       transform .2s;
 
         @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
             &:hover,
             &:active,
             &:focus-visible {
-                transform: translateY(fn.dim(--hover --offset-b));
+                transform: translateY(props.get(vars.$hover--offset-b));
             }
 
             &: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);
+                outline:      props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                box-shadow:
+                    0
+                    0
+                    0
+                    calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                    props.get(vars.$key-focus--outline-color);
             }
         }
 
         @include iro.bem-elem('avatar') {
-            margin-block-start:  fn.dim(--pad-b);
-            margin-inline-start: fn.dim(--pad-i);
+            margin-block-start:  props.get(vars.$pad-b);
+            margin-inline-start: props.get(vars.$pad-i);
         }
 
         @include iro.bem-elem('image') {
@@ -74,23 +48,23 @@
             transition:       transform .2s, opacity .2s;
 
             &:first-child {
-                border-start-start-radius: fn.dim(--rounding);
-                border-start-end-radius:   fn.dim(--rounding);
+                border-start-start-radius: props.get(vars.$rounding);
+                border-start-end-radius:   props.get(vars.$rounding);
             }
 
             &:last-child {
-                border-end-start-radius: fn.dim(--rounding);
-                border-end-end-radius:   fn.dim(--rounding);
+                border-end-start-radius: props.get(vars.$rounding);
+                border-end-end-radius:   props.get(vars.$rounding);
             }
 
             @include iro.bem-next-elem('avatar') {
-                margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size));
+                margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
             }
         }
 
         @include iro.bem-elem('body') {
-            padding-block:  fn.dim(--pad-b);
-            padding-inline: fn.dim(--pad-i);
+            padding-block:  props.get(vars.$pad-b);
+            padding-inline: props.get(vars.$pad-i);
 
             &::before {
                 display:       block;
@@ -100,20 +74,20 @@
         }
 
         @include iro.bem-elem('content') {
-            margin-block-start: fn.dim(--spacing);
+            margin-block-start: props.get(vars.$spacing);
         }
 
         @include iro.bem-elem('footer') {
-            padding-block:      0 fn.dim(--pad-b);
-            padding-inline:     fn.dim(--pad-i);
-            margin-block-start: calc(-1 * fn.dim(--pad-b));
+            padding-block:      0 props.get(vars.$pad-b);
+            padding-inline:     props.get(vars.$pad-i);
+            margin-block-start: calc(-1 * props.get(vars.$pad-b));
 
             &::before {
                 display:          block;
-                block-size:       fn.dim(--divider);
-                margin-block:     fn.dim(--spacing);
+                block-size:       props.get(vars.$divider-width);
+                margin-block:     props.get(vars.$spacing);
                 content:          '';
-                background-color: fn.color(--divider);
+                background-color: props.get(vars.$divider-width);
             }
         }
 
@@ -129,9 +103,9 @@
                     transform: none;
 
                     @include iro.bem-elem('image') {
-                        background-color: fn.color(--quiet --hover --image);
+                        background-color: props.get(vars.$quiet--hover--image-color);
                         opacity:          .75;
-                        transform:        translateY(fn.dim(--hover --offset-b));
+                        transform:        translateY(props.get(vars.$hover--offset-b));
                     }
                 }
 
@@ -140,9 +114,14 @@
                     box-shadow: none;
 
                     @include iro.bem-elem('image') {
-                        background-color: fn.color(--quiet --hover --image);
-                        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);
+                        background-color: props.get(vars.$quiet--hover--image-color);
+                        outline:          props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
+                        box-shadow:
+                            0
+                            0
+                            0
+                            calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
+                            props.get(vars.$key-focus--outline-width);
                         opacity:          1;
                     }
                 }
@@ -150,16 +129,16 @@
 
             @include iro.bem-elem('image') {
                 position:         relative;
-                margin:           calc(-1 * fn.dim(--key-focus --border));
-                background-color: fn.color(--quiet --image);
+                margin:           calc(-1 * props.get(vars.$key-focus--border-width));
+                background-color: props.get(vars.$quiet--image-color);
                 background-clip:  padding-box;
-                border:           fn.dim(--key-focus --border-offset) solid transparent;
-                border-radius:    calc(fn.dim(--rounding) + fn.dim(--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));
             }
 
             @include iro.bem-elem('body') {
                 padding:             0;
-                padding-block-start: fn.dim(--spacing);
+                padding-block-start: props.get(vars.$spacing);
             }
 
             @include iro.bem-elem('footer') {
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
new file mode 100644
index 0000000..bf5f6db
--- /dev/null
+++ b/src/objects/_card.vars.scss
@@ -0,0 +1,25 @@
+@use 'sass:map';
+@use '../props';
+@use '../core.vars' as core;
+
+$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default;
+$pad-i:         props.def(--o-card--pad-i, props.get(core.$size--300)) !default;
+$pad-b:         props.def(--o-card--pad-b, props.get(core.$size--250)) !default;
+$spacing:       props.def(--o-card--spacing, props.get(core.$size--200)) !default;
+$rounding:      props.def(--o-card--rounding, props.get(core.$rounding)) !default;
+
+$hover--offset-b: props.def(--o-card--rounding, calc(-1 * props.get(core.$size--65))) !default;
+
+$key-focus--border-width:  props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
+$key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
+$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+
+$bg-color:      props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2)) !default;
+$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute)) !default;
+
+$key-focus--label-color:   props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default;
+$key-focus--border-color:  props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
+$key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
+
+$quiet--image-color:        props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base)) !default;
+$quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border)) !default;
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 8d82cd5..c6385bc 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -1,72 +1,35 @@
+@use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
+@use '../props';
+@use '../core.vars' as core;
 
-@include iro.props-namespace('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 props.materialize(meta.module-variables('vars'));
 
-    @include iro.bem-object(iro.props-namespace()) {
+    @include iro.bem-object('checkbox') {
         position:       relative;
         display:        inline-block;
-        padding-block:  fn.dim(--pad-b);
-        padding-inline: fn.dim(--pad-i);
+        padding-block:  props.get(vars.$pad-b);
+        padding-inline: props.get(vars.$pad-i);
         margin-inline:
-            calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset))
-            calc(fn.dim(--spacing-sibling) - fn.dim(--pad-b) - fn.dim(--key-focus --border-offset));
+            calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
+            calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset));
 
         @include iro.bem-elem('box') {
             position:           relative;
             display:            inline-block;
             flex:               0 0 auto;
-            inline-size:        fn.dim(--size);
-            block-size:         fn.dim(--size);
-            margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--size) - fn.dim(--key-focus --border-offset));
+            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:   fn.color(--box-border);
+            background-color:   props.get(vars.$box-border-color);
             background-clip:    padding-box;
-            border:             fn.dim(--key-focus --border-offset) solid transparent;
-            border-radius:      calc(fn.dim(--border) + fn.dim(--key-focus --border-offset));
+            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 {
@@ -76,23 +39,23 @@
             }
     
             &::before {
-                inset-block-start:  fn.dim(--border);
-                inset-inline-start: fn.dim(--border);
+                inset-block-start:  props.get(vars.$border-width);
+                inset-inline-start: props.get(vars.$border-width);
                 z-index:            2;
-                inline-size:        calc(fn.dim(--size) - 2 * fn.dim(--border));
-                block-size:         calc(fn.dim(--size) - 2 * fn.dim(--border));
-                background-color:   fn.color(--box-bg);
+                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 {
-                inset-block-start:   calc(.5 * fn.dim(--size) - 1px);
-                inset-inline-start:  calc(1.5 * fn.dim(--border));
+                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(fn.dim(--size) - 3 * fn.dim(--border));
+                inline-size:         calc(props.get(vars.$size) - 3 * props.get(vars.$border-width));
                 block-size:          0;
-                border-color:        fn.color(--box-bg);
+                border-color:        props.get(vars.$box-bg-color);
                 border-style:        solid;
                 border-radius:       2px;
                 transition:          transform .2s ease;
@@ -104,14 +67,14 @@
     
         @include iro.bem-elem('check-icon') {
             position:           absolute;
-            inset-block-start:  calc(1 * fn.dim(--border));
-            inset-inline-start: calc(1 * fn.dim(--border));
+            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 * fn.dim(--border));
-            block-size:         calc(100% - 2 * fn.dim(--border));
+            inline-size:        calc(100% - 2 * props.get(vars.$border-width));
+            block-size:         calc(100% - 2 * props.get(vars.$border-width));
             margin:             0;
-            color:              fn.color(--box-bg);
+            color:              props.get(vars.$box-bg-color);
             stroke-width:       iro.fn-px-to-rem(3px);
             transition:         transform .2s ease;
             transform:          scale(0);
@@ -119,7 +82,7 @@
         }
     
         @include iro.bem-elem('label') {
-            margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset));
+            margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
         }
     
         @include iro.bem-elem('native') {
@@ -133,16 +96,16 @@
             margin:             0;
             overflow:           hidden;
             appearance:         none;
-            border-radius:      fn.dim(--rounding);
+            border-radius:      props.get(vars.$rounding);
     
             &:hover,
             &:focus-visible {
                 @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--hover --label);
+                    color: props.get(vars.$hover--label-color);
                 }
     
                 @include iro.bem-sibling-elem('box') {
-                    background-color: fn.color(--hover --box-border);
+                    background-color: props.get(vars.$hover--box-border-color);
                 }
             }
     
@@ -176,26 +139,31 @@
     
             &:disabled {
                 @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--disabled --label);
+                    color: props.get(vars.$disabled--label-color);
                 }
     
                 @include iro.bem-sibling-elem('box') {
-                    background-color: fn.color(--disabled --box-border);
+                    background-color: props.get(vars.$disabled--box-border-color);
     
                     &::before {
-                        background-color: fn.color(--disabled --box-bg);
+                        background-color: props.get(vars.$disabled--box-bg-color);
                     }
                 }
             }
     
             &:focus-visible {
                 @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--key-focus --label);
+                    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);
+                    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);
                 }
             }
         }
@@ -210,48 +178,48 @@
             @include iro.bem-elem('native') {
                 &:checked {
                     @include iro.bem-sibling-elem('box') {
-                        background-color: fn.color(--accent --box-border);
+                        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);
+                            background-color: props.get(vars.$accent--hover--box-border-color);
                         }
                     }
                 }
     
                 &:indeterminate {
                     @include iro.bem-sibling-elem('box') {
-                        background-color: fn.color(--accent --box-border);
+                        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);
+                            background-color: props.get(vars.$accent--hover--box-border-color);
                         }
                     }
                 }
     
                 &:disabled {
                     @include iro.bem-sibling-elem('box') {
-                        background-color: fn.color(--disabled --box-border);
+                        background-color: props.get(vars.$disabled--box-border-color);
         
                         &::before {
-                            background-color: fn.color(--disabled --box-bg);
+                            background-color: props.get(vars.$disabled--box-bg-color);
                         }
                     }
 
                     &:checked {
                         @include iro.bem-sibling-elem('box') {
-                            background-color: fn.color(--disabled --box-border);
+                            background-color: props.get(vars.$disabled--box-border-color);
                         }
                     }
         
                     &:indeterminate {
                         @include iro.bem-sibling-elem('box') {
-                            background-color: fn.color(--disabled --box-border);
+                            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..d0785d7
--- /dev/null
+++ b/src/objects/_checkbox.vars.scss
@@ -0,0 +1,32 @@
+@use 'sass:map';
+@use '../props';
+@use '../core.vars' as core;
+
+$size:            props.def(--o-checkbox--size, props.get(core.$size--175)) !default;
+$label-gap:       props.def(--o-checkbox--label-gap, props.get(core.$size--125)) !default;
+$border-width:    props.def(--o-checkbox--border-width, props.get(core.$border-width--medium)) !default;
+$pad-i:           props.def(--o-checkbox--pad-i, props.get(core.$size--65)) !default;
+$pad-b:           props.def(--o-checkbox--pad-b, props.get(core.$size--65)) !default;
+$rounding:        props.def(--o-checkbox--rounding, props.get(core.$rounding)) !default;
+$spacing-sibling: props.def(--o-checkbox--spacing-sibling, props.get(core.$size--300)) !default;
+
+$key-focus--border-width:  props.def(--o-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;
+
+$box-border-color: props.def(--o-checkbox--box-border-color, props.get(core.$theme, --text-mute-more)) !default;
+$box-bg-color:     props.def(--o-checkbox--box-bg-color, props.get(core.$theme, --base, --75)) !default;
+
+$hover--label-color:      props.def(--o-checkbox--hover--label-color, props.get(core.$theme, --heading)) !default;
+$hover--box-border-color: props.def(--o-checkbox--hover--box-border-color, props.get(core.$theme, --text-mute)) !default;
+
+$accent--box-border-color:        props.def(--o-checkbox--accent--box-border-color, props.get(core.$theme, --accent, --900)) !default;
+$accent--hover--box-border-color: props.def(--o-checkbox--accent--hover--box-border-color, props.get(core.$theme, --accent, --1000)) !default;
+
+$disabled--label-color:      props.def(--o-checkbox--disabled--label-color, props.get(core.$theme, --text-disabled)) !default;
+$disabled--box-border-color: props.def(--o-checkbox--disabled--box-border-color, props.get(core.$theme, --border-strong)) !default;
+$disabled--box-bg-color:     props.def(--o-checkbox--disabled--box-bg-color, props.get(core.$theme, --base, --75)) !default;
+
+$key-focus--label-color:   props.def(--o-checkbox--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default;
+$key-focus--border-color:  props.def(--o-checkbox--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
+$key-focus--outline-color: props.def(--o-checkbox--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 7d96206..122da78 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -1,89 +1,27 @@
 @use 'sass:map';
+@use 'sass:meta';
+@use 'sass:string';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
-@use '../config';
+@use '../props';
+@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),
-            ),
-        ),
-    ));
-
-    @each $color in map.keys(map.get(config.$themes, config.$theme-default, --palettes)) {
-        @if $color != '--base' {
-            @include iro.props-store((
-                --colors: (
-                    $color: (
-                        --bg:    fn.global-color($color --800),
-                        --label: fn.global-color($color --1000),
-                    )
-                ),
-            ));
-        }
-    }
-
-    @each $theme in $static-themes {
-        @include iro.props-store((
-            --colors: (
-                --static-#{$theme}: (
-                    --strong: (
-                        --bg:    fn.global-color(--#{$theme}-transparent --800),
-                        --label: fn.global-color(--#{$theme}-transparent --900),
-                    ),
-                    --medium: (
-                        --bg:    fn.global-color(--#{$theme}-transparent --300),
-                        --label: fn.global-color(--#{$theme}-transparent --500),
-                    ),
-                    --faint: (
-                        --bg:    fn.global-color(--#{$theme}-transparent --300),
-                        --label: fn.global-color(--#{$theme}-transparent --500),
-                    ),
-                )
-            ),
-        ));
-    }
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
 
-    @include iro.bem-object(iro.props-namespace()) {
+    @include iro.bem-object('divider') {
         display:        flex;
         flex:           0 0 auto;
         flex-direction: row;
         align-items:    center;
         block-size:     1em;
-        margin-block:   fn.dim(--margin-b);
-        font-size:      fn.dim(--strong --label-font-size);
+        margin-block:   props.get(vars.$margin-b);
+        font-size:      props.get(vars.$strong--label-font-size);
         font-weight:    700;
         line-height:    1;
-        color:          fn.color(--strong --label);
+        color:          props.get(vars.$strong--label-color);
         text-transform: uppercase;
         letter-spacing: .5px;
 
@@ -91,9 +29,9 @@ $static-themes: 'black' 'white' !default;
         &::after {
             flex:             1 1 auto;
             inline-size:      100%;
-            block-size:       fn.dim(--strong --border);
+            block-size:       props.get(vars.$strong--border-width);
             content:          '';
-            background-color: fn.color(--strong --bg);
+            background-color: props.get(vars.$strong--bg-color);
         }
 
         &::before {
@@ -109,7 +47,7 @@ $static-themes: 'black' 'white' !default;
             inline-size:      1px;
             block-size:       auto;
             margin-block:     0;
-            background-color: fn.color(--faint --bg);
+            background-color: props.get(vars.$faint--bg-color);
 
             &::before,
             &::after {
@@ -118,26 +56,26 @@ $static-themes: 'black' 'white' !default;
         }
 
         @include iro.bem-modifier('medium') {
-            font-size:   fn.dim(--medium --label-font-size);
+            font-size:   props.get(vars.$medium--label-font-size);
             font-weight: 500;
-            color:       fn.color(--medium --label);
+            color:       props.get(vars.$medium--label-color);
 
             &::before,
             &::after {
-                block-size:       fn.dim(--medium --border);
-                background-color: fn.color(--medium --bg);
+                block-size:       props.get(vars.$medium--border-width);
+                background-color: props.get(vars.$medium--bg-color);
             }
         }
 
         @include iro.bem-modifier('faint') {
-            font-size:   fn.dim(--faint --label-font-size);
+            font-size:   props.get(vars.$faint--label-font-size);
             font-weight: 500;
-            color:       fn.color(--faint --label);
+            color:       props.get(vars.$faint--label-color);
 
             &::before,
             &::after {
-                block-size:       fn.dim(--faint --border);
-                background-color: fn.color(--faint --bg);
+                block-size:       props.get(vars.$faint--border-width);
+                background-color: props.get(vars.$faint--bg-color);
             }
         }
 
@@ -152,49 +90,49 @@ $static-themes: 'black' 'white' !default;
             }
         }
 
-        @each $color in 'blue' 'purple' 'red' 'green' 'yellow' {
-            @include iro.bem-modifier($color) {
+        @each $theme in map.keys(props.get(vars.$themes)) {
+            @include iro.bem-modifier(string.slice($theme, 3)) {
                 &::before,
                 &::after {
-                    background-color: fn.color(--#{$color} --bg);
+                    background-color: props.get(vars.$themes, $theme, --bg);
                 }
 
                 @include iro.bem-elem('label') {
-                    color: fn.color(--#{$color} --label);
+                    color: props.get(vars.$themes, $theme, --label);
                 }
             }
         }
 
-        @each $theme in $static-themes {
-            @include iro.bem-modifier(static-#{$theme}) {
+        @each $theme in map.keys(props.get(vars.$static-themes)) {
+            @include iro.bem-modifier(string.slice($theme, 3)) {
                 &::before,
                 &::after {
-                    background-color: fn.color(--static-#{$theme} --strong --bg);
+                    background-color: props.get(vars.$static-themes, $theme, --strong, --bg);
                 }
 
                 @include iro.bem-elem('label') {
-                    color: fn.color(--static-#{$theme} --strong --label);
+                    color: props.get(vars.$static-themes, $theme, --strong, --label);
                 }
 
                 @include iro.bem-modifier('medium') {
                     &::before,
                     &::after {
-                        background-color: fn.color(--static-#{$theme} --medium --bg);
+                        background-color: props.get(vars.$static-themes, $theme, --medium, --bg);
                     }
     
                     @include iro.bem-elem('label') {
-                        color: fn.color(--static-#{$theme} --medium --label);
+                        color: props.get(vars.$static-themes, $theme, --medium, --label);
                     }
                 }
     
                 @include iro.bem-modifier('faint') {
                     &::before,
                     &::after {
-                        background-color: fn.color(--static-#{$theme} --faint --bg);
+                        background-color: props.get(vars.$static-themes, $theme, --faint, --bg);
                     }
     
                     @include iro.bem-elem('label') {
-                        color: fn.color(--static-#{$theme} --faint --label);
+                        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..09e734f
--- /dev/null
+++ b/src/objects/_divider.vars.scss
@@ -0,0 +1,59 @@
+@use 'sass:map';
+@use '../props';
+@use '../core.vars' as core;
+
+$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default;
+
+$strong--border-width:    props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default;
+$strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default;
+
+$medium--border-width:    props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default;
+$medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default;
+
+$faint--border-width:    props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default;
+$faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default;
+
+$strong--bg-color:    props.def(--o-divider--strong--bg-color, props.get(core.$theme, --text)) !default;
+$strong--label-color: props.def(--o-divider--strong--label-color, props.get(core.$theme, --text)) !default;
+
+$medium--bg-color:    props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border)) !default;
+$medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute)) !default;
+
+$faint--bg-color:    props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border)) !default;
+$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more)) !default;
+
+$static-themes: props.def(--o-divider);
+
+@each $theme in map.keys(props.get(core.$transparent-colors)) {
+    $button-theme: #{$theme}-static;
+
+    $static-themes: props.merge($static-themes, (
+        $button-theme: (
+            --strong: (
+                --bg:    props.get(core.$transparent-colors, $theme, --800),
+                --label: props.get(core.$transparent-colors, $theme, --900),
+            ),
+            --medium: (
+                --bg:    props.get(core.$transparent-colors, $theme, --300),
+                --label: props.get(core.$transparent-colors, $theme, --500),
+            ),
+            --faint: (
+                --bg:    props.get(core.$transparent-colors, $theme, --300),
+                --label: props.get(core.$transparent-colors, $theme, --500),
+            ),
+        )
+    ));
+}
+
+$themes-config: --accent --negative !default;
+
+$themes: props.def(--o-divider);
+
+@each $theme in $themes-config {
+    $themes: props.merge($themes, (
+        $theme: (
+            --bg:    props.get(core.$static-colors, $theme, --800),
+            --label: props.get(core.$static-colors, $theme, --1000),
+        )
+    ));
+}
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
index 41c614c..7747bbf 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -1,72 +1,48 @@
+@use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
-@use 'sass:math';
+@use '../props';
+@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 props.materialize(meta.module-variables('vars'));
 
-            --125: (
-                --size:   calc(1 / 14 * 23em),
-                --valign: -.45em,
-            ),
-
-            --150: (
-                --size:   calc(1 / 14 * 28em),
-                --valign: -.65em,
-            ),
-
-            --200: (
-                --size:   calc(1 / 14 * 38em),
-                --valign: -1em,
-            )
-        ),
-        --colors: (
-            --bg: fn.global-color(--border-mute),
-        )
-    ));
-
-    @include iro.bem-object(iro.props-namespace()) {
+    @include iro.bem-object('emoji') {
         position:       relative;
         display:        inline-block;
-        inline-size:    calc(fn.dim(--size));
-        block-size:     calc(fn.dim(--size));
-        padding:        calc(fn.dim(--pad));
-        margin:         calc(-1 * fn.dim(--pad));
-        vertical-align: fn.dim(--valign);
+        inline-size:    calc(props.get(vars.$size));
+        block-size:     calc(props.get(vars.$size));
+        padding:        calc(props.get(vars.$pad));
+        margin:         calc(-1 * props.get(vars.$pad));
+        vertical-align: props.get(vars.$valign);
         object-fit:     contain;
 
         @include iro.bem-modifier('icon') {
-            margin:         calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--size) - fn.foreign-dim(--icon, --size)));
-            vertical-align: fn.foreign-dim(--icon, --valign);
+            margin:         calc(-1 * props.get(vars.$pad) - .5 * (props.get(vars.$size) - props.get(icon.$size)));
+            vertical-align: props.get(icon.$valign);
         }
 
-        @each $size in '125' '150' '200' {
-            @include iro.bem-modifier($size) {
-                inline-size:    fn.dim(--#{$size} --size);
-                block-size:     fn.dim(--#{$size} --size);
-                vertical-align: fn.dim(--#{$size} --valign);
+        @each $mod, $size, $valign in vars.$sizes {
+            @include iro.bem-modifier($mod) {
+                inline-size:    props.get($size);
+                block-size:     props.get($size);
+                vertical-align: props.get($valign);
 
                 @include iro.bem-modifier('icon') {
-                    margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--#{$size} --size) - fn.foreign-dim(--icon, --size)));
+                    margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size)));
                 }
             }
         }
 
         @include iro.bem-modifier('zoomable') {
-            border-radius: calc(fn.dim(--rounding) / fn.dim(--zoom));
+            border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom));
             transition:    transform .2s ease, background-color .2s ease;
 
             &:hover {
-                background-color: fn.color(--bg);
-                transform:        scale(fn.dim(--zoom));
+                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..458ea9a
--- /dev/null
+++ b/src/objects/_emoji.vars.scss
@@ -0,0 +1,26 @@
+@use 'sass:map';
+@use '../props';
+@use '../core.vars' as core;
+
+$size:     props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default;
+$pad:      props.def(--o-emoji--pad, .3em) !default;
+$rounding: props.def(--o-emoji--rounding, props.get(core.$rounding)) !default;
+$zoom:     props.def(--o-emoji--zoom, 3) !default;
+$valign:   props.def(--o-emoji--valign, -.25em) !default;
+
+$size--125:   props.def(--o-emoji--125--size, calc(1 / 14 * 23em)) !default;
+$valign--125: props.def(--o-emoji--125--valign, -.45em) !default;
+
+$size--150:   props.def(--o-emoji--150--size, calc(1 / 14 * 28em)) !default;
+$valign--150: props.def(--o-emoji--150--valign, -.65em) !default;
+
+$size--200:   props.def(--o-emoji--200--size, calc(1 / 14 * 38em)) !default;
+$valign--200: props.def(--o-emoji--200--valign, -1em) !default;
+
+$sizes: (
+    '125' $size--125 $valign--125,
+    '150' $size--150 $valign--150,
+    '200' $size--200 $valign--200,
+) !default;
+
+$bg-color: props.def(--o-emoji--bg-color, props.get(core.$theme, --border-mute)) !default;
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
index 7cbb7db..23a606d 100644
--- a/src/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -1,23 +1,21 @@
+@use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
+@use '../props';
 
-@include iro.props-namespace('icon') {
-    @include iro.props-store((
-        --dims: (
-            --stroke:  1.5px,
-            --size:    calc(1 / 14 * 16em),
-            --valign:  -.2em,
-        )
-    ));
+@forward 'icon.vars';
+@use 'icon.vars' as vars;
 
-    @include iro.bem-object(iro.props-namespace()) {
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
+
+    @include iro.bem-object('icon') {
         display:         inline;
-        inline-size:     fn.dim(--size);
-        block-size:      fn.dim(--size);
-        vertical-align:  fn.dim(--valign);
+        inline-size:     props.get(vars.$size);
+        block-size:      props.get(vars.$size);
+        vertical-align:  props.get(vars.$valign);
         stroke-linecap:  round;
         stroke-linejoin: round;
-        stroke-width:    fn.dim(--stroke);
+        stroke-width:    props.get(vars.$stroke-width);
 
         @include iro.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..dedd23a
--- /dev/null
+++ b/src/objects/_icon.vars.scss
@@ -0,0 +1,5 @@
+@use '../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, -.2em) !default;
diff --git a/src_demo/index.scss b/src_demo/index.scss
index 4e5c8dd..756994d 100644
--- a/src_demo/index.scss
+++ b/src_demo/index.scss
@@ -22,3 +22,8 @@
 @include iro.o-backdrop--styles;
 @include iro.o-badge--styles;
 @include iro.o-button--styles;
+@include iro.o-card--styles;
+@include iro.o-checkbox--styles;
+@include iro.o-divider--styles;
+@include iro.o-emoji--styles;
+@include iro.o-icon--styles;
-- 
cgit v1.2.3-70-g09d2