43 files changed, 929 insertions, 615 deletions

diff --git a/package.json b/package.json
index f2432e6..3b5b4ee 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
     "private": true,
     "sideEffects": false,
     "scripts": {
-        "build": "npm run build:app && npm run build:demostyle && npm run build:icons && npm run build:assets",
+        "build": "npm run build:app && npm run build:style && npm run build:icons && npm run build:assets",
         "build:assets": "cp -r static/* public/",
         "build:app": "pug tpl/index.pug -p tpl --out public/",
         "build:icons": "node node_modules/iro-icons/scripts/create_sprite.js image video volume-2 arrow-right check trash bookmark cog logout tags lock user chevron-left chevron-right hash x send smile repeat heart star arrow-corner-down-left public/icons.svg",
diff --git a/src/_config.scss b/src/_config.scss
new file mode 100644
index 0000000..ced2aa5
--- /dev/null
+++ b/src/_config.scss
@@ -0,0 +1,214 @@
+@use 'sass:list';
+@use 'sass:map';
+@use 'sass:math';
+@use 'iro-sass/src/easing' as easing;
+@use 'include-media/dist/include-media' as media;
+
+$palette-chroma-easing: 'ease' !default;
+
+$static-colors-override: () !default;
+$static-colors: map.deep-merge((
+    --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% .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,
+    ),
+), $static-colors-override) !default;
+
+$semantic-colors-common-override: () !default;
+$semantic-colors-common: map.deep-merge((
+    --accent:          --theme  --blue,
+    --accent-static:   --static --blue,
+    --positive:        --theme  --green,
+    --positive-static: --static --green,
+    --negative:        --theme  --red,
+    --negative-static: --static --red,
+    --warning:         --theme  --yellow,
+    --warning-static:  --static --yellow,
+
+    --focus-raw:       --theme  --accent,
+    --focus-static:    --theme  --accent-static,
+
+    --border-mute:     --theme --base --200,
+    --border:          --theme --base --300,
+    --border-strong:   --theme --base --400,
+
+    --text-disabled:   --theme --base --500,
+    --text-mute-more:  --theme --base --600,
+    --text-mute:       --theme --base --700,
+    --text:            --theme --base --800,
+    --heading:         --theme --base --900,
+
+    --focus: (
+        --outline:       --theme --focus-raw --400,
+        --border-mute:   --theme --focus-raw --900,
+        --border:        --theme --focus-raw --1000,
+        --border-text:   --theme --focus-raw --1000-text,
+        --border-strong: --theme --focus-raw --1100,
+        --text:          --theme --focus-raw --1100,
+    ),
+), $semantic-colors-common-override) !default;
+
+$theme-light-override: () !default;
+$theme-light: map.deep-merge((
+    --contrasts: (
+        --grays: (
+            --50:  -8,
+            --75:  -4,
+            --100: 0,
+        
+            --200: easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98,
+            --300: easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98,
+            --400: easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98,
+        
+            --500: easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98,
+            --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98,
+            --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98,
+            --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98,
+            --900: 106,
+        ),
+
+        --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:  .3,
+        --muted: .1,
+    ),
+    
+    --palettes: (
+        --base:  hsl(260, 90%, 98%)       --grays --full,
+        --blue:   oklch(56% .16 275.25) --colors --muted,
+        --purple: oklch(56% .16 305.58) --colors --muted,
+        --red:    oklch(56% .16 14.69)  --colors --muted,
+        --green:  oklch(56% .16 150.48) --colors --muted,
+        --yellow: oklch(56% .16 84.08)  --colors --muted,
+    ),
+
+    --semantic: map.merge($semantic-colors-common, (
+        --bg-l2:   --theme --base --50,
+        --bg-l1:   --theme --base --100,
+        --bg-base: --theme --base --200,
+    )),
+
+    --constants: (
+        --shadow: rgba(#000, .15),
+    ),
+), $theme-light-override) !default;
+
+$theme-dark-override: () !default;
+$theme-dark: map.deep-merge((
+    --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(257, 7%, 19%)       --grays --full,
+        --blue:   oklch(56% .16 275.25) --colors --muted,
+        --purple: oklch(56% .16 305.58) --colors --muted,
+        --red:    oklch(56% .16 14.69)  --colors --muted,
+        --green:  oklch(56% .16 150.48) --colors --muted,
+        --yellow: oklch(56% .16 84.08)  --colors --muted,
+    ),
+
+    --semantic: map.merge($semantic-colors-common, (
+        --bg-base: --theme --base --50,
+        --bg-l1:   --theme --base --75,
+        --bg-l2:   --theme --base --100,
+    )),
+
+    --constants: (
+        --shadow: rgba(#000, .5),
+    ),
+), $theme-dark-override) !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;
diff --git a/src/_core.scss b/src/_core.scss
index e1205c4..ea84f6c 100644
--- a/src/_core.scss
+++ b/src/_core.scss
@@ -1,14 +1,14 @@
 @use 'sass:map';
 @use 'sass:meta';
 @use 'iro-sass/src/props';
-@use 'themes';
+@use 'config';
 
 @use 'core.vars' as vars;
 @forward 'core.vars';
 
 @mixin styles {
     @each $theme-name, $theme in vars.$themes {
-        @if $theme-name == themes.$theme-default {
+        @if $theme-name == config.$theme-default {
             :root {
                 @include props.materialize(map.values(meta.module-variables('vars')));
                 
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index abaf879..3b23c32 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -3,7 +3,7 @@
 @use 'sass:list';
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'functions' as fn;
-@use 'themes';
+@use 'config';
 @use 'props';
 
 $size--0:    props.def(--size--0, 0) !default;
@@ -104,8 +104,8 @@ $list--compact-indent: props.def(--list--indent, props.get($size--250)) !default
 
 $static-colors: props.def(--static-colors);
 
-@each $palette-name, $palette in map.get(themes.$static-colors, --palettes) {
-    $palette: fn.palette($palette, map.get(themes.$static-colors, --contrasts), 1, map.get(themes.$static-colors, --base));
+@each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
+    $palette: fn.palette($palette, map.get(config.$static-colors, --contrasts), 1, map.get(config.$static-colors, --base));
     $static-colors: props.merge($static-colors, ( $palette-name: $palette ));
 }
 
@@ -117,7 +117,7 @@ $transparent-colors: props.def(--transparent-colors);
     $color: list.nth($palette, 1);
     $text:  list.nth($palette, 2);
 
-    $palette: fn.transparent-palette($color, $text, map.get(themes.$static-colors, --transparents));
+    $palette: fn.transparent-palette($color, $text, map.get(config.$static-colors, --transparents));
     $transparent-colors: props.merge($transparent-colors, ( $palette-name: $palette ));
 }
 
@@ -125,7 +125,7 @@ $transparent-colors: props.def(--transparent-colors);
 
 $themes: ();
 
-@each $theme-name, $theme in themes.$themes {
+@each $theme-name, $theme in config.$themes {
     @each $variant-name, $variant in $theme {
         $compiled: props.def(--colors);
 
@@ -182,4 +182,4 @@ $themes: ();
     }
 }
 
-$theme: map.get($themes, themes.$theme-default, light) !default;
+$theme: map.get($themes, config.$theme-default, light) !default;
diff --git a/src/_functions.scss b/src/_functions.scss
index ad45975..a3a9386 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -7,7 +7,7 @@
 @use 'iro-sass/src/iro-sass' as iro;
 @use 'iro-sass/src/easing';
 @use 'apca';
-@use 'themes';
+@use 'config';
 
 @function palette($base-color, $contrasts, $chroma-range: 1, $ref-color: $base-color) {
     $base-lch: color.to-space($base-color, oklch);
@@ -27,7 +27,7 @@
         $chroma-inv: true;
         $chroma-range: -1 * $chroma-range;
     }
-    $chroma-easing: meta.get-function(themes.$palette-chroma-easing, $module: easing);
+    $chroma-easing: meta.get-function(config.$palette-chroma-easing, $module: easing);
 
     $palette: ();
 
diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index eac485d..64b2ec9 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -35,7 +35,7 @@ $breakpoints: (
 @forward 'scopes/headings' as s-headings--*;
 @forward 'scopes/links' as s-links--*;
 @forward 'scopes/lists' as s-lists--*;
-//@use 'scopes/tables' as s-tables--*;
+@forward 'scopes/tables' as s-tables--*;
 
 @forward 'objects/action-button' as o-action-button--*;
 @forward 'objects/alert' as o-alert--*;
@@ -57,3 +57,10 @@ $breakpoints: (
 @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/text-field' as o-text-field--*;
+
+@forward 'utils' as utils--*;
+
+@forward 'themes' as themes--*;
diff --git a/src/_props.scss b/src/_props.scss
index 1a0f7d0..09082a3 100644
--- a/src/_props.scss
+++ b/src/_props.scss
@@ -1,7 +1,7 @@
 @use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
-@use 'themes';
+@use 'config';
 @use 'include-media/dist/include-media' as media;
 @use 'iro-sass/src/iro-sass' as iro;
 
@@ -26,8 +26,8 @@
         }
     }
 
-    @each $theme-name in map.keys(themes.$themes) {
-        @if $theme-name != themes.$theme-default {
+    @each $theme-name in map.keys(config.$themes) {
+        @if $theme-name != config.$theme-default {
             @include iro.bem-theme($theme-name) {
                 @include iro.props-materialize($ref, null);
 
diff --git a/src/_themes.scss b/src/_themes.scss
index ced2aa5..b460baf 100644
--- a/src/_themes.scss
+++ b/src/_themes.scss
@@ -1,214 +1,73 @@
-@use 'sass:list';
 @use 'sass:map';
-@use 'sass:math';
-@use 'iro-sass/src/easing' as easing;
+@use 'iro-sass/src/iro-sass' as iro;
 @use 'include-media/dist/include-media' as media;
-
-$palette-chroma-easing: 'ease' !default;
-
-$static-colors-override: () !default;
-$static-colors: map.deep-merge((
-    --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% .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,
-    ),
-), $static-colors-override) !default;
-
-$semantic-colors-common-override: () !default;
-$semantic-colors-common: map.deep-merge((
-    --accent:          --theme  --blue,
-    --accent-static:   --static --blue,
-    --positive:        --theme  --green,
-    --positive-static: --static --green,
-    --negative:        --theme  --red,
-    --negative-static: --static --red,
-    --warning:         --theme  --yellow,
-    --warning-static:  --static --yellow,
-
-    --focus-raw:       --theme  --accent,
-    --focus-static:    --theme  --accent-static,
-
-    --border-mute:     --theme --base --200,
-    --border:          --theme --base --300,
-    --border-strong:   --theme --base --400,
-
-    --text-disabled:   --theme --base --500,
-    --text-mute-more:  --theme --base --600,
-    --text-mute:       --theme --base --700,
-    --text:            --theme --base --800,
-    --heading:         --theme --base --900,
-
-    --focus: (
-        --outline:       --theme --focus-raw --400,
-        --border-mute:   --theme --focus-raw --900,
-        --border:        --theme --focus-raw --1000,
-        --border-text:   --theme --focus-raw --1000-text,
-        --border-strong: --theme --focus-raw --1100,
-        --text:          --theme --focus-raw --1100,
-    ),
-), $semantic-colors-common-override) !default;
-
-$theme-light-override: () !default;
-$theme-light: map.deep-merge((
-    --contrasts: (
-        --grays: (
-            --50:  -8,
-            --75:  -4,
-            --100: 0,
-        
-            --200: easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98,
-            --300: easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98,
-            --400: easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98,
-        
-            --500: easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98,
-            --600: easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98,
-            --700: easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98,
-            --800: easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98,
-            --900: 106,
-        ),
-
-        --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:  .3,
-        --muted: .1,
-    ),
-    
-    --palettes: (
-        --base:  hsl(260, 90%, 98%)       --grays --full,
-        --blue:   oklch(56% .16 275.25) --colors --muted,
-        --purple: oklch(56% .16 305.58) --colors --muted,
-        --red:    oklch(56% .16 14.69)  --colors --muted,
-        --green:  oklch(56% .16 150.48) --colors --muted,
-        --yellow: oklch(56% .16 84.08)  --colors --muted,
-    ),
-
-    --semantic: map.merge($semantic-colors-common, (
-        --bg-l2:   --theme --base --50,
-        --bg-l1:   --theme --base --100,
-        --bg-base: --theme --base --200,
-    )),
-
-    --constants: (
-        --shadow: rgba(#000, .15),
-    ),
-), $theme-light-override) !default;
-
-$theme-dark-override: () !default;
-$theme-dark: map.deep-merge((
-    --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(257, 7%, 19%)       --grays --full,
-        --blue:   oklch(56% .16 275.25) --colors --muted,
-        --purple: oklch(56% .16 305.58) --colors --muted,
-        --red:    oklch(56% .16 14.69)  --colors --muted,
-        --green:  oklch(56% .16 150.48) --colors --muted,
-        --yellow: oklch(56% .16 84.08)  --colors --muted,
-    ),
-
-    --semantic: map.merge($semantic-colors-common, (
-        --bg-base: --theme --base --50,
-        --bg-l1:   --theme --base --75,
-        --bg-l2:   --theme --base --100,
-    )),
-
-    --constants: (
-        --shadow: rgba(#000, .5),
-    ),
-), $theme-dark-override) !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;
+@use 'props';
+
+@use 'core.vars' as vars;
+@forward 'core.vars';
+
+@mixin styles {
+    @include iro.bem-theme('base') {
+        background-color: props.get(vars.$theme, --bg-base);
+
+        @include iro.bem-suffix('light') {
+            @media (prefers-color-scheme: light) {
+                background-color: props.get(vars.$theme, --bg-base);
+            }
+        }
+
+        @include iro.bem-suffix('dark') {
+            @media (prefers-color-scheme: dark) {
+                background-color: props.get(vars.$theme, --bg-base);
+            }
+        }
+    }
+
+    @include iro.bem-theme('l1') {
+        background-color: props.get(vars.$theme, --bg-l1);
+
+        @include iro.bem-suffix('light') {
+            @media (prefers-color-scheme: light) {
+                background-color: props.get(vars.$theme, --bg-l1);
+            }
+        }
+
+        @include iro.bem-suffix('dark') {
+            @media (prefers-color-scheme: dark) {
+                background-color: props.get(vars.$theme, --bg-l1);
+            }
+        }
+    }
+
+    @include iro.bem-theme('l2') {
+        background-color: props.get(vars.$theme, --bg-l2);
+
+        @include iro.bem-suffix('light') {
+            @media (prefers-color-scheme: light) {
+                background-color: props.get(vars.$theme, --bg-l2);
+            }
+        }
+
+        @include iro.bem-suffix('dark') {
+            @media (prefers-color-scheme: dark) {
+                background-color: props.get(vars.$theme, --bg-l2);
+            }
+        }
+    }
+
+    @include iro.bem-theme('50') {
+        background-color: props.get(vars.$theme, --base --50);
+
+        @include iro.bem-suffix('light') {
+            @media (prefers-color-scheme: light) {
+                background-color: props.get(vars.$theme, --base --50);
+            }
+        }
+
+        @include iro.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
new file mode 100644
index 0000000..fdec622
--- /dev/null
+++ b/src/_utils.scss
@@ -0,0 +1,251 @@
+@use 'sass:map';
+@use 'iro-sass/src/iro-sass' as iro;
+@use 'include-media/dist/include-media' as media;
+@use 'props';
+
+@use 'core.vars' as vars;
+@forward 'core.vars';
+
+/* stylelint-disable-next-line scss/dollar-variable-pattern */
+$-dirs: (
+    '': '',
+    'bs': '-block-start',
+    'be': '-block-end',
+    'b':  '-block',
+    'is': '-inline-start',
+    'ie': '-inline-end',
+    'i':  '-inline',
+) !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;
+
+@mixin styles {
+    @include iro.bem-utility('d-block') {
+        display: block;
+    }
+
+    @include iro.bem-utility('d-inline-block') {
+        display: inline-block;
+    }
+
+    @include iro.bem-utility('d-contents') {
+        display: contents;
+    }
+
+    @include iro.bem-utility('td-none') {
+        text-decoration: none;
+    }
+
+    @include iro.bem-utility('d-none') {
+        display: none;
+
+        @each $breakpoint in map.keys(media.$breakpoints) {
+            @include media.media('<=#{$breakpoint}') {
+                @include iro.bem-suffix('#{$breakpoint}-lo') {
+                    display: none;
+                }
+            }
+
+            @include media.media('>#{$breakpoint}') {
+                @include iro.bem-suffix('#{$breakpoint}-hi') {
+                    display: none;
+                }
+            }
+        }
+
+        @include iro.bem-at-theme('js') {
+            @include iro.bem-suffix('js') {
+                display: none;
+            }
+        }
+
+        @include iro.bem-at-theme('no-js') {
+            @include iro.bem-suffix('no-js') {
+                display: none;
+            }
+        }
+
+        @include iro.bem-suffix('empty') {
+            &:empty {
+                display: none;
+            }
+        }
+    }
+
+    @include iro.bem-utility('ta-start') {
+        text-align: start;
+    }
+
+    @include iro.bem-utility('ta-end') {
+        text-align: end;
+    }
+
+    @include iro.bem-utility('ta-center') {
+        text-align: center;
+    }
+
+    @include iro.bem-utility('fw-normal') {
+        font-weight: normal;
+    }
+
+    @include iro.bem-utility('ai-center') {
+        align-items: center;
+    }
+
+    @include iro.bem-utility('ai-start') {
+        align-items: flex-start;
+    }
+
+    @include iro.bem-utility('ai-end') {
+        align-items: flex-end;
+    }
+
+    @include iro.bem-utility('jc-center') {
+        justify-content: center;
+    }
+
+    @include iro.bem-utility('jc-start') {
+        justify-content: flex-start;
+    }
+
+    @include iro.bem-utility('jc-end') {
+        justify-content: flex-end;
+    }
+
+    @include iro.bem-utility('c-heading') {
+        color: props.get(vars.$theme, --heading);
+    }
+
+    @include iro.bem-utility('c-text') {
+        color: props.get(vars.$theme, --text);
+    }
+
+    @include iro.bem-utility('c-mute') {
+        color: props.get(vars.$theme, --text-mute);
+    }
+
+    @include iro.bem-utility('c-mute-more') {
+        color: props.get(vars.$theme, --text-mute-more);
+    }
+
+    @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 iro.bem-utility('#{$dir}-50') {
+            #{$prop}: 50%;
+        }
+        
+        @include iro.bem-utility('#{$dir}-25') {
+            #{$prop}: 25%;
+        }
+        
+        @include iro.bem-utility('#{$dir}-1px') {
+            #{$prop}: 1px;
+        }
+        
+        @include iro.bem-utility('#{$dir}-0') {
+            #{$prop}: 0;
+        }
+    }
+
+    @include iro.bem-utility('elp') {
+        overflow:      hidden;
+        text-overflow: ellipsis;
+        white-space:   nowrap;
+    }
+
+    @include iro.bem-utility('p-static') {
+        position: static;
+    }
+
+    @include iro.bem-utility('p-relative') {
+        position: relative;
+    }
+
+    @include iro.bem-utility('p-fixed') {
+        position: fixed;
+    }
+
+    @include iro.bem-utility('p-sticky-bs') {
+        position:          sticky;
+        inset-block-start: 0;
+    }
+
+    @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;
+        }
+
+        @each $mod, $size in $-sizes {
+            @include iro.bem-utility('m#{$dir}-#{$mod}') {
+                margin#{$suffix}: props.get($size);
+            }
+            
+            @include iro.bem-utility('p#{$dir}-#{$mod}') {
+                padding#{$suffix}: props.get($size);
+            }
+        }
+        
+        @include iro.bem-utility('b#{$dir}-0') {
+            border#{$suffix}: 0;
+
+            @include iro.bem-suffix('light') {
+                @media (prefers-color-scheme: light) {
+                    border#{$suffix}: 0;
+                }
+            }
+        
+            @include iro.bem-suffix('dark') {
+                @media (prefers-color-scheme: dark) {
+                    border#{$suffix}: 0;
+                }
+            }
+        }
+        
+        @include iro.bem-utility('b#{$dir}-1') {
+            border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
+
+            @include iro.bem-suffix('light') {
+                @media (prefers-color-scheme: light) {
+                    border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
+                }
+            }
+        
+            @include iro.bem-suffix('dark') {
+                @media (prefers-color-scheme: dark) {
+                    border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
+                }
+            }
+        }
+    }
+
+    @include iro.bem-utility('mbs-neutralize') {
+        &::before {
+            display:       block;
+            margin-block:  -100em 100em;
+            content:       '';
+        }
+    }
+}
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
index 4c9603c..9049a8f 100644
--- a/src/objects/_action-button.vars.scss
+++ b/src/objects/_action-button.vars.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:string';
 @use '../props';
 @use '../core.vars' as core;
 
@@ -111,7 +112,7 @@ $default-theme: map.deep-merge((
 $default-theme: props.def(--o-action-button, $default-theme);
 
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
-    $button-theme: #{$theme}-static;
+    $button-theme: --static-#{string.slice($theme, 3)};
 
     $themes: props.merge($themes, (
         $button-theme: (
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss
index 9254c83..f9a4ed5 100644
--- a/src/objects/_badge.vars.scss
+++ b/src/objects/_badge.vars.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:string';
 @use '../props';
 @use '../core.vars' as core;
 
@@ -76,7 +77,7 @@ $default-theme: props.merge($default-theme, $default-theme-override);
 $static-themes: props.def(--o-badge);
 
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
-    $badge-theme: #{$theme}-static;
+    $badge-theme: --static-#{string.slice($theme, 3)};
 
     $static-themes: props.merge($static-themes, (
         $badge-theme: (
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index 237cb79..7640e57 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:string';
 @use '../props';
 @use '../core.vars' as core;
 
@@ -86,7 +87,7 @@ $default-theme: props.merge($default-theme, $default-theme-override);
 $static-themes: props.def(--o-button);
 
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
-    $button-theme: #{$theme}-static;
+    $button-theme: --static-#{string.slice($theme, 3)};
 
     $static-themes: props.merge($static-themes, (
         $button-theme: (
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
index 09e734f..01c4b92 100644
--- a/src/objects/_divider.vars.scss
+++ b/src/objects/_divider.vars.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:string';
 @use '../props';
 @use '../core.vars' as core;
 
@@ -25,7 +26,7 @@ $faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$
 $static-themes: props.def(--o-divider);
 
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
-    $button-theme: #{$theme}-static;
+    $button-theme: --static-#{string.slice($theme, 3)};
 
     $static-themes: props.merge($static-themes, (
         $button-theme: (
@@ -52,8 +53,8 @@ $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),
+            --bg:    props.get(core.$theme, $theme, --800),
+            --label: props.get(core.$theme, $theme, --1000),
         )
     ));
 }
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss
index 31a2406..58b4d74 100644
--- a/src/objects/_heading.vars.scss
+++ b/src/objects/_heading.vars.scss
@@ -27,28 +27,28 @@ $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;
+$line-height--lg:      props.def(--o-heading--lg--line-height, props.get(core.$font--headline--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;
+$line-height--md:      props.def(--o-heading--md--line-height, props.get(core.$font--headline--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;
+$line-height--sm:      props.def(--o-heading--sm--line-height, props.get(core.$font--headline--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;
+$line-height--xs:      props.def(--o-heading--xs--line-height, props.get(core.$font--headline--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;
@@ -92,14 +92,14 @@ $display--letter-spacing--md:   props.def(--o-heading--display--md--letter-spaci
 $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--line-height--sm:      props.def(--o-heading--display--sm--line-height, props.get(core.$font--headline--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--line-height--xs:      props.def(--o-heading--display--xs--line-height, props.get(core.$font--headline--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;
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss
index 32324a4..3906716 100644
--- a/src/objects/_lightbox.vars.scss
+++ b/src/objects/_lightbox.vars.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:string';
 @use '../props';
 @use '../core.vars' as core;
 
@@ -37,7 +38,7 @@ $nav-button--block-size--md:  props.def(--o-lightbox--nav-button--block-size, pr
 $static-themes: props.def(--o-lightbox);
 
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
-    $lightbox-theme: #{$theme}-static;
+    $lightbox-theme: --static-#{string.slice($theme, 3)};
 
     $static-themes: props.merge($static-themes, (
         $lightbox-theme: (
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index c4f8e96..d83b297 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -2,7 +2,7 @@
 @use 'sass:map';
 @use 'sass:string';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../themes';
+@use '../config';
 @use '../props';
 @use '../core.vars' as core;
 
@@ -14,8 +14,8 @@
         @include iro.bem-elem('item') {
             flex: 1 1 auto;
 
-            $palette:   map.get(themes.$themes, themes.$theme-default, light, --palettes, --base);
-            $contrasts: map.get(themes.$themes, themes.$theme-default, light, --contrasts, list.nth($palette, 2));
+            $palette:   map.get(config.$themes, config.$theme-default, light, --palettes, --base);
+            $contrasts: map.get(config.$themes, config.$theme-default, light, --contrasts, list.nth($palette, 2));
 
             @for $i from 1 through list.length($contrasts) {
                 $key: list.nth(map.keys($contrasts), $i);
@@ -26,8 +26,8 @@
             }
         }
 
-        @each $palette-name, $palette in map.get(themes.$themes, themes.$theme-default, light, --palettes) {
-            $contrasts: map.get(themes.$themes, themes.$theme-default, light, --contrasts, list.nth($palette, 2));
+        @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) {
+            $contrasts: map.get(config.$themes, config.$theme-default, light, --contrasts, list.nth($palette, 2));
 
             @include iro.bem-modifier(string.slice($palette-name, 3)) {
                 @include iro.bem-elem('item') {
@@ -43,8 +43,8 @@
         }
 
         @include iro.bem-modifier('static') {
-            @each $palette-name, $palette in map.get(themes.$static-colors, --palettes) {
-                $contrasts: map.get(themes.$static-colors, --contrasts);
+            @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
+                $contrasts: map.get(config.$static-colors, --contrasts);
 
                 @include iro.bem-modifier(string.slice($palette-name, 3)) {
                     @include iro.bem-elem('item') {
diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss
index 1d0a06a..d83194f 100644
--- a/src/objects/_status-indicator.vars.scss
+++ b/src/objects/_status-indicator.vars.scss
@@ -1,6 +1,6 @@
 @use 'sass:map';
 @use '../props';
-@use '../themes' as themes;
+@use '../config';
 @use '../core.vars' as core;
 
 $size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !default;
@@ -8,7 +8,7 @@ $size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !defaul
 $default: props.def(--o-status-indicator--default, props.get(core.$theme, --border-strong)) !default;
 $primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text)) !default;
 
-$themes-config: map.keys(map.get(themes.$themes, themes.$theme-default, light, --palettes)) !default;
+$themes-config: map.keys(map.get(config.$themes, config.$theme-default, light, --palettes)) !default;
 
 $themes: props.def(--o-status-indicator);
 
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index fa903b1..5383432 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -1,90 +1,50 @@
+@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('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 props.materialize(meta.module-variables('vars'));
 
-    @include iro.bem-object(iro.props-namespace()) {
+    @include iro.bem-object('switch') {
         position:       relative;
         display:        inline-block;
-        padding-block:  fn.dim(--pad-b);
-        padding-inline: fn.dim(--pad-i);
+        padding-block:  props.get(vars.$pad-b);
+        padding-inline: props.get(vars.$pad-i);
         margin-inline:
-            calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset))
-            calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset));
+            calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
+            calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));
     
         @include iro.bem-elem('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));
+            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:   fn.color(--track-bg);
+            background-color:   props.get(vars.$track-bg-color);
             background-clip:    padding-box;
-            border:             fn.dim(--key-focus --border-offset) solid transparent;
+            border:             props.get(vars.$key-focus--border-offset) solid transparent;
             border-radius:      2em;
             transition:         background-color .2s ease;
     
             &::after {
                 display:          block;
-                inline-size:      calc(fn.dim(--height) - 2 * fn.dim(--border));
-                block-size:       calc(fn.dim(--height) - 2 * fn.dim(--border));
+                inline-size:      calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
+                block-size:       calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
                 content:          '';
-                background-color: fn.color(--handle-bg);
-                border:           fn.dim(--border) solid fn.color(--handle-border);
-                border-radius:    fn.dim(--width);
+                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);
+            margin-inline-start: props.get(vars.$label-gap);
         }
     
         @include iro.bem-elem('native') {
@@ -98,38 +58,38 @@
             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('indicator') {
                     &::after {
-                        border-color: fn.color(--hover --handle-border);
+                        border-color: props.get(vars.$hover--handle-border-color);
                     }
                 }
             }
     
             &:checked {
                 @include iro.bem-sibling-elem('indicator') {
-                    background-color: fn.color(--handle-border);
+                    background-color: props.get(vars.$handle-border-color);
     
                     &::after {
-                        border-color: fn.color(--handle-border);
-                        transform:    translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0);
+                        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);
+                        background-color: props.get(vars.$hover--handle-border-color);
 
                         &::after {
-                            border-color: fn.color(--hover --handle-border);
+                            border-color: props.get(vars.$hover--handle-border-color);
                         }
                     }
                 }
@@ -137,24 +97,24 @@
     
             &:disabled {
                 @include iro.bem-sibling-elem('label') {
-                    color: fn.color(--disabled --label);
+                    color: props.get(vars.$disabled--label-color);
                 }
     
                 @include iro.bem-sibling-elem('indicator') {
-                    background-color: fn.color(--disabled --track-bg);
+                    background-color: props.get(vars.$disabled--track-bg-color);
     
                     &::after {
-                        background-color: fn.color(--disabled --handle-bg);
-                        border-color:     fn.color(--disabled --handle-border);
+                        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);
+                        background-color: props.get(vars.$disabled--handle-border-color);
     
                         &::after {
-                            border-color: fn.color(--disabled --handle-border);
+                            border-color: props.get(vars.$disabled--handle-border-color);
                         }
                     }
                 }
@@ -162,12 +122,17 @@
     
             &: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('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);
+                    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);
                 }
             }
         }
@@ -182,20 +147,20 @@
             @include iro.bem-elem('native') {
                 &:checked {
                     @include iro.bem-sibling-elem('indicator') {
-                        background-color: fn.color(--accent --handle-border);
+                        background-color: props.get(vars.$accent--handle-border-color);
         
                         &::after {
-                            border-color: fn.color(--accent --handle-border);
+                            border-color: props.get(vars.$accent--handle-border-color);
                         }
                     }
         
                     &:hover,
                     &:focus-visible {
                         @include iro.bem-sibling-elem('indicator') {
-                            background-color: fn.color(--accent --hover --handle-border);
+                            background-color: props.get(vars.$accent--hover--handle-border-color);
     
                             &::after {
-                                border-color: fn.color(--accent --hover --handle-border);
+                                border-color: props.get(vars.$accent--hover--handle-border-color);
                             }
                         }
                     }
@@ -203,15 +168,15 @@
         
                 &:disabled {
                     @include iro.bem-sibling-elem('label') {
-                        color: fn.color(--disabled --label);
+                        color: props.get(vars.$disabled--label-color);
                     }
 
                     &:checked {
                         @include iro.bem-sibling-elem('indicator') {
-                            background-color: fn.color(--disabled --handle-border);
+                            background-color: props.get(vars.$disabled--handle-border-color);
 
                             &::after {
-                                border-color: fn.color(--disabled --handle-border);
+                                border-color: props.get(vars.$disabled--handle-border-color);
                             }
                         }
                     }
diff --git a/src/objects/_switch.vars.scss b/src/objects/_switch.vars.scss
new file mode 100644
index 0000000..118291d
--- /dev/null
+++ b/src/objects/_switch.vars.scss
@@ -0,0 +1,37 @@
+@use 'sass:map';
+@use '../props';
+@use '../core.vars' as core;
+
+$inline-size:     props.def(--o-switch--inline-size, props.get(core.$size--350)) !default;
+$block-size:      props.def(--o-switch--block-size, props.get(core.$size--200)) !default;
+$label-gap:       props.def(--o-switch--label-gap, props.get(core.$size--125)) !default;
+$border-width:    props.def(--o-switch--border-width, props.get(core.$border-width--medium)) !default;
+$pad-i:           props.def(--o-switch--pad-i, props.get(core.$size--65)) !default;
+$pad-b:           props.def(--o-switch--pad-b, props.get(core.$size--65)) !default;
+$rounding:        props.def(--o-switch--rounding, props.get(core.$rounding)) !default;
+$spacing-sibling: props.def(--o-switch--spacing-sibling, props.get(core.$size--300)) !default;
+
+$key-focus--border-width:  props.def(--o-switch--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
+$key-focus--border-offset: props.def(--o-switch--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
+$key-focus--outline-width: props.def(--o-switch--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
+
+$track-bg-color:      props.def(--o-switch--track-bg-color, props.get(core.$theme, --border)) !default;
+$handle-border-color: props.def(--o-switch--handle-border-color, props.get(core.$theme, --text-mute-more)) !default;
+$handle-bg-color:     props.def(--o-switch--handle-bg-color, props.get(core.$theme, --base, --50)) !default;
+
+$hover--label-color:         props.def(--o-switch--hover--label-color, props.get(core.$theme, --heading)) !default;
+$hover--handle-border-color: props.def(--o-switch--hover--handle-border-color, props.get(core.$theme, --text-mute)) !default;
+
+$accent--handle-border-color: props.def(--o-switch--accent--handle-border-color, props.get(core.$theme, --accent, --900)) !default;
+
+$accent--hover--handle-border-color: props.def(--o-switch--accent--hover--handle-border-color, props.get(core.$theme, --accent, --1000)) !default;
+
+$disabled--label-color:         props.def(--o-switch--disabled--label-color, props.get(core.$theme, --text-disabled)) !default;
+$disabled--track-bg-color:      props.def(--o-switch--disabled--track-bg-color, props.get(core.$theme, --border)) !default;
+$disabled--handle-border-color: props.def(--o-switch--disabled--handle-border-color, props.get(core.$theme, --border-strong)) !default;
+$disabled--handle-bg-color:     props.def(--o-switch--disabled--handle-bg-color, props.get(core.$theme, --base, --50)) !default;
+
+$key-focus--label-color:   props.def(--o-switch--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default;
+$key-focus--border-color:  props.def(--o-switch--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
+$key-focus--outline-color: props.def(--o-switch--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
+
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
index 5b16d66..d5b5545 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -1,33 +1,14 @@
+@use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
-@use '../mixins' as mx;
+@use '../props';
 
-@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 props.materialize(meta.module-variables('vars'));
 
-    @include iro.bem-object(iro.props-namespace()) {
+    @include iro.bem-object('table') {
         border-spacing:  0;
         border-collapse: separate;
 
@@ -36,37 +17,34 @@
         }
 
         @include iro.bem-elem('head-cell') {
-            @include mx.set-font(--standard, (
-                --line-height: null,
-                --size:        fn.global-dim(--font-size --50),
-                --weight:      bold,
-                --transform:   uppercase,
-                --spacing:     .5px
-            ));
-            padding-block:  fn.dim(--pad-b);
-
-            padding-inline: fn.dim(--pad-i);
-            color:          fn.color(--heading);
+            padding-block:  props.get(vars.$pad-b);
+            padding-inline: props.get(vars.$pad-i);
+            font-family:    props.get(vars.$heading--font-family);
+            font-size:      props.get(vars.$heading--font-size);
+            font-weight:    props.get(vars.$heading--font-weight);
+            color:          props.get(vars.$heading-color);
             text-align:     start;
+            text-transform: props.get(vars.$heading--text-transform);
+            letter-spacing: props.get(vars.$heading--letter-spacing);
         }
 
         @include iro.bem-elem('cell') {
-            padding-block:            fn.dim(--pad-b);
-            padding-inline:           fn.dim(--pad-i);
-            border-color:             fn.color(--border);
+            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: fn.dim(--border);
+            border-block-start-width: props.get(vars.$border-width);
 
             @include iro.bem-modifier('divider') {
-                border-inline-end-width: fn.dim(--border);
+                border-inline-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);
+                    border-block-end-width: props.get(vars.$border-width);
                 }
             }
         }
@@ -85,14 +63,14 @@
 
         @include iro.bem-modifier('box') {
             @include iro.bem-elem('cell') {
-                background-color: fn.color(--box --bg);
+                background-color: props.get(vars.$box--bg-color);
             
                 &:first-child {
-                    border-inline-start-width: fn.dim(--border);
+                    border-inline-start-width: props.get(vars.$border-width);
                 }
             
                 &:last-child {
-                    border-inline-end-width: fn.dim(--border);
+                    border-inline-end-width: props.get(vars.$border-width);
                 }
             }
     
@@ -100,11 +78,11 @@
                 &:first-child {
                     @include iro.bem-elem('cell') {
                         &:first-child {
-                            border-start-start-radius: fn.dim(--rounding);
+                            border-start-start-radius: props.get(vars.$rounding);
                         }
             
                         &:last-child {
-                            border-start-end-radius: fn.dim(--rounding);
+                            border-start-end-radius: props.get(vars.$rounding);
                         }
                     }
                 }
@@ -112,11 +90,11 @@
                 &:last-child {
                     @include iro.bem-elem('cell') {
                         &:first-child {
-                            border-end-start-radius: fn.dim(--rounding);
+                            border-end-start-radius: props.get(vars.$rounding);
                         }
             
                         &:last-child {
-                            border-end-end-radius: fn.dim(--rounding);
+                            border-end-end-radius: props.get(vars.$rounding);
                         }
                     }
                 }
@@ -131,13 +109,13 @@
 
                 &:hover {
                     @include iro.bem-elem('cell') {
-                        background-color: fn.color(--hover);
+                        background-color: props.get(vars.$hover--bg-color);
                     }
                 }
     
                 &:active {
                     @include iro.bem-elem('cell') {
-                        background-color: fn.color(--active);
+                        background-color: props.get(vars.$active--bg-color);
                     }
                 }
             }
@@ -146,13 +124,13 @@
                 @include iro.bem-elem('row') {
                     &:hover {
                         @include iro.bem-elem('cell') {
-                            background-color: fn.color(--box --hover);
+                            background-color: props.get(vars.$box--hover--bg-color);
                         }
                     }
         
                     &:active {
                         @include iro.bem-elem('cell') {
-                            background-color: fn.color(--box --active);
+                            background-color: props.get(vars.$box--active--bg-color);
                         }
                     }
                 }
@@ -161,7 +139,7 @@
 
         @include iro.bem-modifier('sm') {
             @include iro.bem-elem('head-cell', 'cell') {
-                padding-block: fn.dim(--sm --pad-b);
+                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..df97e17
--- /dev/null
+++ b/src/objects/_table.vars.scss
@@ -0,0 +1,25 @@
+@use 'sass:map';
+@use '../props';
+@use '../core.vars' as core;
+
+$pad-i:        props.def(--o-table--pad-i, props.get(core.$size--175)) !default;
+$pad-b:        props.def(--o-table--pad-b, props.get(core.$size--125)) !default;
+$rounding:     props.def(--o-table--rounding, props.get(core.$rounding)) !default;
+$border-width: props.def(--o-table--border-width, props.get(core.$border-width--thin)) !default;
+
+$heading--font-family:    props.def(--o-table--heading--font-family, props.get(core.$font--standard--family)) !default;
+$heading--font-size:      props.def(--o-table--heading--font-size, props.get(core.$font-size--50)) !default;
+$heading--font-weight:    props.def(--o-table--heading--font-weight, bold) !default;
+$heading--text-transform: props.def(--o-table--heading--text-transform, uppercase) !default;
+$heading--letter-spacing: props.def(--o-table--heading--letter-spacing, .5px) !default;
+
+$pad-b--sm: props.def(--o-table--sm--pad-b, props.get(core.$size--75)) !default;
+
+$border-color:     props.def(--o-table--border-color, props.get(core.$theme, --border)) !default;
+$heading-color:    props.def(--o-table--heading-color, props.get(core.$theme, --heading)) !default;
+$hover--bg-color:  props.def(--o-table--hover--bg-color, props.get(core.$theme, --border-mute)) !default;
+$active--bg-color: props.def(--o-table--active--bg-color, props.get(core.$theme, --border)) !default;
+
+$box--bg-color:         props.def(--o-table--box--bg-color, props.get(core.$theme, --base, --50)) !default;
+$box--hover--bg-color:  props.def(--o-table--box--hover--bg-color, props.get(core.$theme, --bg-base)) !default;
+$box--active--bg-color: props.def(--o-table--box--active--bg-color, props.get(core.$theme, --border-mute)) !default;
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index cfb5a6d..793d23a 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -1,100 +1,51 @@
+@use 'sass:meta';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
+@use '../props';
 
-@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);
+        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);
+            border-color: props.get(vars.$error--hover--border-color);
         }
     }
 
     &:focus {
         @include iro.bem-sibling-elem('bg') {
-            border-color: fn.color(--error --focus --border);
+            border-color: props.get(vars.$error--focus--border-color);
         }
     }
 }
 
-@mixin keyboard-focus {
+@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);
+        border-color:   props.get(vars.$key-focus--border-color);
+        outline:        props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width);
+        //outline-offset: props.get(vars.$focus --border);
     }
 }
 
-@include iro.props-namespace('text-field') {
-    @include iro.props-store((
-        --dims: (
-            --line-height: 1.4,
-            --pad-i:       fn.global-dim(--size --125),
-            --pad-b:       fn.global-dim(--size --125),
-            --border:      fn.global-dim(--border --thin),
-            --rounding:    fn.global-dim(--rounding),
-
-            --extended: (
-                --pad:     fn.global-dim(--size --50),
-            ),
-
-            --focus: (
-                --border:  fn.global-dim(--border --medium),
-            ),
-            
-            --key-focus: (
-                --border: fn.global-dim(--key-focus --outline),
-            ),
-        ),
-        --colors: (
-            --bg:          fn.global-color(--base --50),
-            --placeholder: fn.global-color(--text-mute-more),
-            --text:        fn.global-color(--text),
-            --border:      fn.global-color(--border-strong),
-    
-            --hover: (
-                --border: fn.global-color(--text-mute-more),
-            ),
-            --focus: (
-                --border: fn.global-color(--focus --border),
-            ),
-            --key-focus: (
-                --border:  fn.global-color(--focus --border),
-                --outline: fn.global-color(--focus --outline),
-            ),
-            --error: (
-                --border: fn.global-color(--negative --700),
-    
-                --hover: (
-                    --border: fn.global-color(--negative --900),
-                ),
-                --focus: (
-                    --border: fn.global-color(--negative --900),
-                ),
-            ),
-            --disabled: (
-                --bg:          fn.global-color(--border-mute),
-                --placeholder: fn.global-color(--text-disabled),
-                --text:        fn.global-color(--text-disabled),
-                --border:      fn.global-color(--border-mute),
-            ),
-        ),
-    ));
-
-    @include iro.bem-object(iro.props-namespace()) {
-        $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border));
+@mixin styles {
+    @include props.materialize(meta.module-variables('vars'));
+
+    @include iro.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: fn.color(--bg);
-        border-radius:    fn.dim(--rounding);
+        background-color: props.get(vars.$bg-color);
+        border-radius:    props.get(vars.$rounding);
 
         @include iro.bem-elem('bg') {
             position:       absolute;
@@ -102,18 +53,18 @@
             inset-inline:   0;
             display:        block;
             pointer-events: none;
-            border:         fn.dim(--border) solid fn.color(--border);
-            border-radius:  fn.dim(--rounding);
+            border:         props.get(vars.$border-width) solid props.get(vars.$border-color);
+            border-radius:  props.get(vars.$rounding);
         }
 
         @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);
+            padding-block:    calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1));
+            padding-inline:   props.get(vars.$pad-i);
             font:             inherit;
-            line-height:      fn.dim(--line-height);
-            color:            fn.color(--text);
+            line-height:      props.get(vars.$line-height);
+            color:            props.get(vars.$text-color);
             appearance:       none;
             resize:           none;
             background-color: transparent;
@@ -121,13 +72,13 @@
 
             &::placeholder {
                 font-style: italic;
-                color:      fn.color(--placeholder);
+                color:      props.get(vars.$placeholder-color);
                 opacity:    1;
             }
 
             &:hover {
                 @include iro.bem-sibling-elem('bg') {
-                    border-color: fn.color(--hover --border);
+                    border-color: props.get(vars.$hover--border-color);
                 }
             }
 
@@ -137,32 +88,32 @@
                 @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);
+                    border:        props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color);
+                    border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
                 }
             }
 
             &:invalid {
-                @include invalid;
+                @include -invalid;
             }
 
             &:focus-visible,
             &:invalid:focus-visible {
-                @include keyboard-focus;
+                @include -keyboard-focus;
             }
         }
 
         @include iro.bem-modifier('extended') {
-            padding: fn.dim(--extended --pad);
+            padding: props.get(vars.$extended--pad);
 
             @include iro.bem-multi('&', 'elem' 'bg') {
-                border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad));
+                border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad));
             }
 
             @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);
+                        border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset);
                     }
                 }
             }
@@ -170,33 +121,33 @@
 
         @include iro.bem-is('invalid') {
             @include iro.bem-elem('native') {
-                @include invalid;
+                @include -invalid;
 
                 &:focus-visible {
-                    @include keyboard-focus;
+                    @include -keyboard-focus;
                 }
             }
         }
 
         @include iro.bem-is('disabled') {
-            background-color: fn.color(--disabled --bg);
+            background-color: props.get(vars.$disabled--bg-color);
 
             @include iro.bem-elem('native') {
-                color: fn.color(--disabled --text);
+                color: props.get(vars.$disabled--text-color);
 
                 &::placeholder {
-                    color: fn.color(--disabled --placeholder);
+                    color: props.get(vars.$disabled--placeholder-color);
                 }
             }
 
             @include iro.bem-elem('bg') {
-                border-color: fn.color(--disabled --border);
+                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);
+                        border-color: props.get(vars.$disabled--border-color);
                     }
                 }
             }
@@ -204,7 +155,7 @@
             @include iro.bem-elem('native') {
                 &:invalid {
                     @include iro.bem-sibling-elem('bg') {
-                        border-color: fn.color(--disabled --border);
+                        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..3d0ef2d
--- /dev/null
+++ b/src/objects/_text-field.vars.scss
@@ -0,0 +1,38 @@
+@use 'sass:map';
+@use '../props';
+@use '../core.vars' as core;
+
+$line-height:  props.def(--o-text-field--line-height, 1.4) !default;
+$pad-i:        props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default;
+$pad-b:        props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default;
+$border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default;
+$rounding:     props.def(--o-text-field--rounding, props.get(core.$rounding)) !default;
+
+$extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default;
+
+$focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$border-width--medium)) !default;
+
+$key-focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$key-focus--outline-width)) !default;
+
+$bg-color:          props.def(--o-text-field--bg-color, props.get(core.$theme, --bg)) !default;
+$placeholder-color: props.def(--o-text-field--placeholder-color, props.get(core.$theme, --text-mute-more)) !default;
+$text-color:        props.def(--o-text-field--text-color, props.get(core.$theme, --text)) !default;
+$border-color:      props.def(--o-text-field--border-color, props.get(core.$theme, --border-strong)) !default;
+
+$hover--border-color: props.def(--o-text-field--hover--border-color, props.get(core.$theme, --text-mute-more)) !default;
+
+$focus--border-color: props.def(--o-text-field--focus--border-color, props.get(core.$theme, --focus, --border)) !default;
+
+$key-focus--border-color:  props.def(--o-text-field--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
+$key-focus--outline-color: props.def(--o-text-field--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
+
+$error--border-color: props.def(--o-text-field--error--border-color, props.get(core.$theme, --negative, --700)) !default;
+
+$error--hover--border-color: props.def(--o-text-field--error--hover--border-color, props.get(core.$theme, --negative, --900)) !default;
+
+$error--focus--border-color: props.def(--o-text-field--error--focus--border-color, props.get(core.$theme, --negative, --900)) !default;
+
+$disabled--bg-color:          props.def(--o-text-field--disabled--bg-color, props.get(core.$theme, --border-mute)) !default;
+$disabled--placeholder-color: props.def(--o-text-field--disabled--placeholder-color, props.get(core.$theme, --text-disabled)) !default;
+$disabled--text-color:        props.def(--o-text-field--disabled--text-color, props.get(core.$theme, --text-disabled)) !default;
+$disabled--border-color:      props.def(--o-text-field--disabled--border-color, props.get(core.$theme, --border-mute)) !default;
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index 2bf7b08..f6f62c3 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -1,7 +1,7 @@
 @use 'sass:map';
 @use 'iro-sass/src/iro-sass' as iro;
 @use '../props';
-@use '../objects/heading.vars' as headings;
+@use '../objects/heading.vars' as heading;
 
 @mixin styles {
     /* stylelint-disable-next-line scss/dollar-variable-pattern */
@@ -22,25 +22,25 @@
         h5,
         h6 {
             display:               block;
-            margin-block-start:    props.get(headings.$margin-bs);
-            font-family:           props.get(headings.$font-family);
-            font-weight:           props.get(headings.$font-weight);
-            font-feature-settings: props.get(headings.$feature-settings);
-            line-height:           props.get(headings.$line-height);
+            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(headings.$offset));
+            transform:             translateX(props.get(heading.$offset));
         }
 
         @include iro.bem-elem('highlight') {
             background-image: linear-gradient(to top,
             transparent .15em,
-            props.get(headings.$bg-color) .15em,
-            props.get(headings.$bg-color) .6em,
+            props.get(heading.$bg-color) .15em,
+            props.get(heading.$bg-color) .6em,
             transparent .6em);
         }
 
-        @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in headings.$sizes {
+        @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);
@@ -52,7 +52,7 @@
         }
 
         @include iro.bem-modifier('display') {
-            @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in headings.$display--sizes {
+            @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);
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index 7909943..4bb3482 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -21,12 +21,14 @@
     }
 
     body {
-        //@include mx.set-font(--standard, (--size: fn.dim(--font-size --100)));
-
-        padding:          0;
-        margin:           0;
-        color:            props.get(core.$theme, --text);
-        background-color: props.get(core.$theme, --bg-base);
+        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,
@@ -55,6 +57,7 @@
     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);
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss
index 80e2f67..f0eb45d 100644
--- a/src/scopes/_implicit.vars.scss
+++ b/src/scopes/_implicit.vars.scss
@@ -5,6 +5,11 @@ $paragraph--margin-bs: props.def(--s-implicit--paragraph--margin-bs, props.get(c
 
 $small--font-size: props.def(--s-implicit--code--font-family, 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);
@@ -13,6 +18,7 @@ $code--feature-settings: props.def(--s-implicit--code--feature-settings, props.g
 $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--headline--family)) !default;
-$heading--line-height:       props.def(--s-implicit--heading--line-height, props.get(core.$font--headline--line-height)) !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, props.get(core.$font--headline--weight)) !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--headline--feature-settings)) !default;
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss
index 4bf80c0..4c6cc5d 100644
--- a/src/scopes/_links.vars.scss
+++ b/src/scopes/_links.vars.scss
@@ -1,4 +1,5 @@
 @use 'sass:map';
+@use 'sass:string';
 @use '../props';
 @use '../core.vars' as core;
 
@@ -26,7 +27,7 @@ $key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.
 
 $static-themes: props.def(--s-links);
 @each $theme in map.keys(props.get(core.$transparent-colors)) {
-    $link-theme: #{$theme}-static;
+    $link-theme: --static-#{string.slice($theme, 3)};
 
     $static-themes: props.merge($static-themes, (
         $link-theme: (
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss
index f722864..f285207 100644
--- a/src/scopes/_tables.scss
+++ b/src/scopes/_tables.scss
@@ -1,49 +1,44 @@
-@use 'sass:meta';
+@use 'sass:map';
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../functions' as fn;
-@use '../mixins' as mx;
+@use '../props';
+@use '../objects/table.vars' as table;
 
-@forward 'lists.vars';
-@use 'lists.vars' as vars;
+@forward 'tables.vars';
+@use 'tables.vars' as vars;
 
 @mixin styles {
-    @include props.materialize(meta.module-variables('vars'));
-
     @include iro.bem-scope('tables') {
         table {
-            margin-block-start: fn.dim(--margin-bs);
+            margin-block-start: props.get(vars.$margin-bs);
             border-spacing:     0;
             border-collapse:    separate;
         }
 
         th {
-            @include mx.set-font(--standard, (
-                --line-height: null,
-                --size:        fn.global-dim(--font-size --50),
-                --weight:      bold,
-                --transform:   uppercase,
-                --spacing:     .5px
-            ));
-
-            padding-block:  fn.dim(--pad-b);
-            padding-inline: fn.dim(--pad-i);
-            color:          fn.color(--heading);
+            padding-block:  props.get(table.$pad-b);
+            padding-inline: props.get(table.$pad-i);
+            font-family:    props.get(table.$heading--font-family);
+            font-size:      props.get(table.$heading--font-size);
+            font-weight:    props.get(table.$heading--font-weight);
+            color:          props.get(table.$heading-color);
             text-align:     start;
+            text-transform: props.get(table.$heading--text-transform);
+            letter-spacing: props.get(table.$heading--letter-spacing);
         }
 
         td {
-            padding-block:            fn.dim(--pad-b);
-            padding-inline:           fn.dim(--pad-i);
-            border-color:             fn.color(--border);
+            padding-block:            props.get(table.$pad-b);
+            padding-inline:           props.get(table.$pad-i);
+            border-color:             props.get(table.$border-color);
             border-style:             solid;
             border-width:             0;
-            border-block-start-width: fn.dim(--border);
+            border-block-start-width: props.get(table.$border-width);
         }
 
         tr {
             &:last-child {
                 td {
-                    border-block-end-width: fn.dim(--border);
+                    border-block-end-width: props.get(table.$border-width);
                 }
             }
         }
@@ -63,14 +58,14 @@
 
         @include iro.bem-modifier('box') {
             td {
-                background-color: fn.color(--box --bg);
+                background-color: props.get(table.$box--bg-color);
             
                 &:first-child {
-                    border-inline-start-width: fn.dim(--border);
+                    border-inline-start-width: props.get(table.$border-width);
                 }
             
                 &:last-child {
-                    border-inline-end-width: fn.dim(--border);
+                    border-inline-end-width: props.get(table.$border-width);
                 }
             }
     
@@ -78,11 +73,11 @@
                 &:first-child {
                     td {
                         &:first-child {
-                            border-start-start-radius: fn.dim(--rounding);
+                            border-start-start-radius: props.get(table.$rounding);
                         }
             
                         &:last-child {
-                            border-start-end-radius: fn.dim(--rounding);
+                            border-start-end-radius: props.get(table.$rounding);
                         }
                     }
                 }
@@ -90,11 +85,11 @@
                 &:last-child {
                     td {
                         &:first-child {
-                            border-end-start-radius: fn.dim(--rounding);
+                            border-end-start-radius: props.get(table.$rounding);
                         }
             
                         &:last-child {
-                            border-end-end-radius: fn.dim(--rounding);
+                            border-end-end-radius: props.get(table.$rounding);
                         }
                     }
                 }
diff --git a/src/scopes/_tables.vars.scss b/src/scopes/_tables.vars.scss
index cdaca64..17c9eb4 100644
--- a/src/scopes/_tables.vars.scss
+++ b/src/scopes/_tables.vars.scss
@@ -1,24 +1,4 @@
 @use '../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(core.$paragraph--margin-bs)) !default;
-
-$compact--indent: props.def(--s-lists--compact--indent, props.get(core.$list--compact-indent)) !default;
-
-@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),
-        )
-    )
-));
+$margin-bs: props.def(--s-tables--margin-bs, props.get(implicit.$paragraph--margin-bs)) !default;
diff --git a/src_demo/_base.scss b/src_demo/_base.scss
index 129b319..67dfa06 100644
--- a/src_demo/_base.scss
+++ b/src_demo/_base.scss
@@ -1,13 +1,13 @@
 body {
     display:               grid;
-    grid-template-columns: auto 1fr;
     grid-template-areas:   'sidebar content';
+    grid-template-columns: auto 1fr;
 }
 
 @font-face {
     font-family:  'Garet';
     font-style:   normal;
     font-weight:  50 950;
-    font-display: swap;
     src:          url('/garet.woff2') format('woff2-variations');
+    font-display: swap;
 }
diff --git a/src_demo/components/_box.scss b/src_demo/components/_box.scss
index c746c33..ac217c0 100644
--- a/src_demo/components/_box.scss
+++ b/src_demo/components/_box.scss
@@ -1,16 +1,9 @@
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../../src/functions' as fn;
+@use '../../src/props';
+@use '../../src/core.vars';
 
-@include iro.props-namespace('box') {
-    @include iro.props-store((
-        --colors: (
-            --border: fn.global-color(--border),
-        ),
-    ));
-
-    @include iro.bem-component(iro.props-namespace()) {
-        margin-block: 2em;
-        padding:      2em;
-        border:       1px solid fn.color(--border);
-    }
+@include iro.bem-component('box') {
+    padding:      2em;
+    margin-block: 2em;
+    border:       1px solid props.get(core.$theme, --border);
 }
diff --git a/src_demo/components/_content.scss b/src_demo/components/_content.scss
index 262b116..cd38954 100644
--- a/src_demo/components/_content.scss
+++ b/src_demo/components/_content.scss
@@ -1,8 +1,6 @@
 @use 'iro-sass/src/iro-sass' as iro;
 
-@include iro.props-namespace('content') {
-    @include iro.bem-component(iro.props-namespace()) {
-        grid-area: content;
-        overflow:  auto;
-    }
+@include iro.bem-component('content') {
+    grid-area: content;
+    overflow:  auto;
 }
diff --git a/src_demo/components/_sidebar.scss b/src_demo/components/_sidebar.scss
index b9f8730..4cce9b8 100644
--- a/src_demo/components/_sidebar.scss
+++ b/src_demo/components/_sidebar.scss
@@ -1,10 +1,7 @@
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../../src/functions' as fn;
 
-@include iro.props-namespace('sidebar') {
-    @include iro.bem-component(iro.props-namespace()) {
-        grid-area:        sidebar;
-        min-inline-size:  15em;
-        min-block-size:   0;
-    }
+@include iro.bem-component('sidebar') {
+    grid-area:        sidebar;
+    min-inline-size:  15em;
+    min-block-size:   0;
 }
diff --git a/src_demo/components/_view.scss b/src_demo/components/_view.scss
index c0547d3..9516b12 100644
--- a/src_demo/components/_view.scss
+++ b/src_demo/components/_view.scss
@@ -1,12 +1,9 @@
 @use 'iro-sass/src/iro-sass' as iro;
-@use '../../src/functions' as fn;
 
-@include iro.props-namespace('view') {
-    @include iro.bem-component(iro.props-namespace()) {
-        display: none;
+@include iro.bem-component('view') {
+    display: none;
 
-        &:target {
-            display: block;
-        }
+    &:target {
+        display: block;
     }
 }
diff --git a/src_demo/index.scss b/src_demo/index.scss
index 93fa156..7fc1d99 100644
--- a/src_demo/index.scss
+++ b/src_demo/index.scss
@@ -8,6 +8,7 @@
 @include iro.s-headings--styles;
 @include iro.s-links--styles;
 @include iro.s-lists--styles;
+@include iro.s-tables--styles;
 
 @include iro.l-button-group--styles;
 @include iro.l-card-list--styles;
@@ -37,3 +38,16 @@
 @include iro.o-radio--styles;
 @include iro.o-side-nav--styles;
 @include iro.o-status-indicator--styles;
+@include iro.o-switch--styles;
+@include iro.o-table--styles;
+@include iro.o-text-field--styles;
+
+@include iro.utils--styles;
+
+@include iro.themes--styles;
+
+@import 'base';
+@import 'components/box';
+@import 'components/content';
+@import 'components/sidebar';
+@import 'components/view';
diff --git a/src_old/objects/_badge.scss b/src_old/objects/_badge.scss
index 4e1662f..8619826 100644
--- a/src_old/objects/_badge.scss
+++ b/src_old/objects/_badge.scss
@@ -123,15 +123,15 @@ $static-themes: 'black' 'white' !default;
         @include iro.props-store((
             --colors: (
                 --#{$theme}: (
-                    --bg:    fn.global-color(--#{$theme}-static --900),
-                    --label: fn.global-color(--#{$theme}-static --900-text),
+                    --bg:    fn.global-color(--static-#{$theme} --900),
+                    --label: fn.global-color(--static-#{$theme} --900-text),
                     --hover: (
-                        --bg:    fn.global-color(--#{$theme}-static --1000),
-                        --label: fn.global-color(--#{$theme}-static --1000-text),
+                        --bg:    fn.global-color(--static-#{$theme} --1000),
+                        --label: fn.global-color(--static-#{$theme} --1000-text),
                     ),
                     --active: (
-                        --bg:    fn.global-color(--#{$theme}-static --1100),
-                        --label: fn.global-color(--#{$theme}-static --1000-text),
+                        --bg:    fn.global-color(--static-#{$theme} --1100),
+                        --label: fn.global-color(--static-#{$theme} --1000-text),
                     ),
                 ),
 
diff --git a/src_old/objects/_button.scss b/src_old/objects/_button.scss
index 3ef4813..d195e05 100644
--- a/src_old/objects/_button.scss
+++ b/src_old/objects/_button.scss
@@ -148,18 +148,18 @@ $static-themes: 'black' 'white' !default;
         @include iro.props-store((
             --colors: (
                 --#{$theme}: (
-                    --bg:             fn.global-color(--#{$theme}-static --900),
-                    --label:          fn.global-color(--#{$theme}-static --900-text),
+                    --bg:             fn.global-color(--static-#{$theme} --900),
+                    --label:          fn.global-color(--static-#{$theme} --900-text),
                     --outline-border: fn.global-color(--#{$theme} --900),
                     --outline-label:  fn.global-color(--#{$theme} --1000),
 
                     --hover: (
-                        --bg:     fn.global-color(--#{$theme}-static --1000),
-                        --label:  fn.global-color(--#{$theme}-static --1000-text),
+                        --bg:     fn.global-color(--static-#{$theme} --1000),
+                        --label:  fn.global-color(--static-#{$theme} --1000-text),
                     ),
                     --active: (
-                        --bg:     fn.global-color(--#{$theme}-static --1100),
-                        --label:  fn.global-color(--#{$theme}-static --1100-text),
+                        --bg:     fn.global-color(--static-#{$theme} --1100),
+                        --label:  fn.global-color(--static-#{$theme} --1100-text),
                     ),
                 ),
             ),
diff --git a/tpl/index.pug b/tpl/index.pug
index c4baa64..cccfb2a 100644
--- a/tpl/index.pug
+++ b/tpl/index.pug
@@ -40,7 +40,7 @@ mixin view(id, title)
     -
         views.push({ id, title });
 
-    +container(narrow=!attributes.wide class='u-p-700 c-view' id=id)
+    +container(fixed=!attributes.wide class='u-p-700 c-view' id=id)
         +h1-heading('xl')(class='u-mt-0')= title
         +divider('medium')
         block
diff --git a/tpl/layouts/container.pug b/tpl/layouts/container.pug
index 56c0b86..522eb1a 100644
--- a/tpl/layouts/container.pug
+++ b/tpl/layouts/container.pug
@@ -1,10 +1,10 @@
 mixin container
     -
         let classes = {
-            'l-container':            true,
-            'l-container--narrow':    attributes.narrow,
-            'l-container--narrow-75': attributes.narrow50,
-            'u-themed':               !!attributes.theme
+            'l-container':           true,
+            'l-container--fixed':    attributes.fixed,
+            'l-container--fixed-75': attributes.fixed50,
+            'u-themed':              !!attributes.theme
         }
         if (!!attributes.theme) {
             classes['t-' + attributes.theme] = true
diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug
index 8fbf9ea..6fa0ce9 100644
--- a/tpl/views/action-button.pug
+++ b/tpl/views/action-button.pug
@@ -90,7 +90,7 @@ mixin view-action-button
             -
                 const bg = theme.startsWith('static-black') ? 500 : 1000;
 
-            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+            .c-box(style=`background-color: var(--static-colors--blue--${bg});`)
                 +action-button(theme=theme)= 'Idle'
                 = ' '
                 +action-button(theme=theme selected=true)= 'Selected'
@@ -99,7 +99,7 @@ mixin view-action-button
                 = ' '
                 +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled'
 
-            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+            .c-box(style=`background-color: var(--static-colors--blue--${bg});`)
                 +action-button(theme=theme quiet=true)= 'Idle'
                 = ' '
                 +action-button(theme=theme quiet=true selected=true)= 'Selected'
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug
index cc1f346..90fdabe 100644
--- a/tpl/views/badge.pug
+++ b/tpl/views/badge.pug
@@ -59,7 +59,7 @@ mixin view-badge
             -
                 const bg = theme.startsWith('static-black') ? 500 : 1000;
 
-            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+            .c-box(style=`background-color: var(--static-colors--blue--${bg});`)
                 +badge(theme)(href='#')= 'new'
                 = ' '
                 +badge(theme)(quiet=true href='#')= 'new'
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index edd8ef6..04414a4 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -58,7 +58,7 @@ mixin view-button
             -
                 const bg = theme.startsWith('static-black') ? 500 : 1000;
 
-            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+            .c-box(style=`background-color: var(--static-colors--blue--${bg});`)
                 .l-button-group
                     +a-button(variant=theme)= 'Button'
                     +a-button(variant=theme disabled=true)= 'Button'
@@ -71,7 +71,7 @@ mixin view-button
                     +a-button(variant=theme outline=true icon='trash')
                     +a-button(variant=theme outline=true disabled=true icon='trash')
 
-            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+            .c-box(style=`background-color: var(--static-colors--blue--${bg});`)
                 .l-button-group
                     +a-button(variant=theme primary=true)= 'Button'
                     +a-button(variant=theme primary=true disabled=true)= 'Button'
diff --git a/tpl/views/divider.pug b/tpl/views/divider.pug
index ee7b372..b5b6d70 100644
--- a/tpl/views/divider.pug
+++ b/tpl/views/divider.pug
@@ -23,7 +23,7 @@ mixin view-divider
             +divider('medium')
             +divider('faint')
 
-        each theme in ['blue', 'purple', 'red', 'green', 'yellow']
+        each theme in ['accent', 'negative']
             .c-box
                 +divider('strong')(color=theme)= 'Strong'
                 +divider('medium')(color=theme)= 'Medium'
@@ -36,7 +36,7 @@ mixin view-divider
             -
                 const bg = theme.startsWith('static-black') ? 500 : 1000;
 
-            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
+            .c-box(style=`background-color: var(--static-colors--blue--${bg});`)
                 +divider('strong')(color=theme)= 'Strong'
                 +divider('medium')(color=theme)= 'Medium'
                 +divider('faint')(color=theme)= 'Faint'