48 files changed, 437 insertions, 490 deletions

diff --git a/src/objects/_action-button.scss b/src/.old/objects/_action-button.scss
index 48ac2a6..48ac2a6 100644
--- a/src/objects/_action-button.scss
+++ b/src/.old/objects/_action-button.scss
diff --git a/src/objects/_action-menu.scss b/src/.old/objects/_action-menu.scss
index 12e3b5f..12e3b5f 100644
--- a/src/objects/_action-menu.scss
+++ b/src/.old/objects/_action-menu.scss
diff --git a/src/objects/_alert.scss b/src/.old/objects/_alert.scss
index 289ef10..289ef10 100644
--- a/src/objects/_alert.scss
+++ b/src/.old/objects/_alert.scss
diff --git a/src/objects/_avatar.scss b/src/.old/objects/_avatar.scss
index 4be780e..4be780e 100644
--- a/src/objects/_avatar.scss
+++ b/src/.old/objects/_avatar.scss
diff --git a/src/objects/_backdrop.scss b/src/.old/objects/_backdrop.scss
index ac23d63..ac23d63 100644
--- a/src/objects/_backdrop.scss
+++ b/src/.old/objects/_backdrop.scss
diff --git a/src/objects/_badge.scss b/src/.old/objects/_badge.scss
index 0f73382..0f73382 100644
--- a/src/objects/_badge.scss
+++ b/src/.old/objects/_badge.scss
diff --git a/src/objects/_button.scss b/src/.old/objects/_button.scss
index 7cc24fa..7cc24fa 100644
--- a/src/objects/_button.scss
+++ b/src/.old/objects/_button.scss
diff --git a/src/objects/_checkbox.scss b/src/.old/objects/_checkbox.scss
index b3bb34d..b3bb34d 100644
--- a/src/objects/_checkbox.scss
+++ b/src/.old/objects/_checkbox.scss
diff --git a/src/objects/_dialog.scss b/src/.old/objects/_dialog.scss
index 9333ce6..9333ce6 100644
--- a/src/objects/_dialog.scss
+++ b/src/.old/objects/_dialog.scss
diff --git a/src/objects/_emoji.scss b/src/.old/objects/_emoji.scss
index 8d17212..8d17212 100644
--- a/src/objects/_emoji.scss
+++ b/src/.old/objects/_emoji.scss
diff --git a/src/objects/_field-label.scss b/src/.old/objects/_field-label.scss
index 2127a09..2127a09 100644
--- a/src/objects/_field-label.scss
+++ b/src/.old/objects/_field-label.scss
diff --git a/src/objects/_icon-nav.scss b/src/.old/objects/_icon-nav.scss
index d1c6539..d1c6539 100644
--- a/src/objects/_icon-nav.scss
+++ b/src/.old/objects/_icon-nav.scss
diff --git a/src/objects/_icon.scss b/src/.old/objects/_icon.scss
index 5c4bfab..5c4bfab 100644
--- a/src/objects/_icon.scss
+++ b/src/.old/objects/_icon.scss
diff --git a/src/objects/_lightbox.scss b/src/.old/objects/_lightbox.scss
index 31d3398..31d3398 100644
--- a/src/objects/_lightbox.scss
+++ b/src/.old/objects/_lightbox.scss
diff --git a/src/objects/_list-group.scss b/src/.old/objects/_list-group.scss
index d46722e..d46722e 100644
--- a/src/objects/_list-group.scss
+++ b/src/.old/objects/_list-group.scss
diff --git a/src/objects/_menu.scss b/src/.old/objects/_menu.scss
index 7db4896..7db4896 100644
--- a/src/objects/_menu.scss
+++ b/src/.old/objects/_menu.scss
diff --git a/src/objects/_message.scss b/src/.old/objects/_message.scss
index 283ce26..283ce26 100644
--- a/src/objects/_message.scss
+++ b/src/.old/objects/_message.scss
diff --git a/src/objects/_overflow-button.scss b/src/.old/objects/_overflow-button.scss
index b15ea1f..b15ea1f 100644
--- a/src/objects/_overflow-button.scss
+++ b/src/.old/objects/_overflow-button.scss
diff --git a/src/objects/_radio.scss b/src/.old/objects/_radio.scss
index 5af7a12..5af7a12 100644
--- a/src/objects/_radio.scss
+++ b/src/.old/objects/_radio.scss
diff --git a/src/objects/_status-indicator.scss b/src/.old/objects/_status-indicator.scss
index d8ea9ef..d8ea9ef 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/.old/objects/_status-indicator.scss
diff --git a/src/objects/_switch.scss b/src/.old/objects/_switch.scss
index cbbb9b7..cbbb9b7 100644
--- a/src/objects/_switch.scss
+++ b/src/.old/objects/_switch.scss
diff --git a/src/objects/_table.scss b/src/.old/objects/_table.scss
index 34512cb..34512cb 100644
--- a/src/objects/_table.scss
+++ b/src/.old/objects/_table.scss
diff --git a/src/objects/_text-field.scss b/src/.old/objects/_text-field.scss
index 88c4535..88c4535 100644
--- a/src/objects/_text-field.scss
+++ b/src/.old/objects/_text-field.scss
diff --git a/src/scopes/_blockquotes.scss b/src/.old/scopes/_blockquotes.scss
index 5383bd7..5383bd7 100644
--- a/src/scopes/_blockquotes.scss
+++ b/src/.old/scopes/_blockquotes.scss
diff --git a/src/scopes/_code.scss b/src/.old/scopes/_code.scss
index 4eb9458..4eb9458 100644
--- a/src/scopes/_code.scss
+++ b/src/.old/scopes/_code.scss
diff --git a/src/scopes/_lists.scss b/src/.old/scopes/_lists.scss
index 1322f2d..1322f2d 100644
--- a/src/scopes/_lists.scss
+++ b/src/.old/scopes/_lists.scss
diff --git a/src/scopes/_tables.scss b/src/.old/scopes/_tables.scss
index f78e81b..f78e81b 100644
--- a/src/scopes/_tables.scss
+++ b/src/.old/scopes/_tables.scss
diff --git a/src/_apply-vars.scss b/src/_apply-vars.scss
index bee2ff3..a2ee404 100644
--- a/src/_apply-vars.scss
+++ b/src/_apply-vars.scss
@@ -1,82 +1,17 @@
+@use 'sass:map';
 @use 'iro-sass/src/index' as iro;
 @use 'include-media/dist/include-media' as media;
 
 :root {
-    @include iro.props-assign('dims');
+    @include iro.props-assign;
 
-    @each $breakpoint in map-keys(media.$breakpoints) {
+    @each $breakpoint in map.keys(media.$breakpoints) {
         @include media.media('<=#{$breakpoint}') {
             @include iro.props-assign($breakpoint);
         }
     }
 
-    @include iro.props-assign('colors');
-    @include iro.props-assign('palette-light');
-
-    @media (prefers-color-scheme: dark) {
-        @include iro.props-assign('colors-dark');
-        @include iro.props-assign('palette-dark');
-    }
-}
-
-@include iro.bem-theme('media') {
-    @include iro.props-assign('colors');
-    @include iro.props-assign('colors-media');
-    @include iro.props-assign('palette-media-dark');
-}
-
-@include iro.bem-theme('media-light') {
-    @include iro.props-assign('colors');
-    @include iro.props-assign('colors-media-light');
-    @include iro.props-assign('palette-media-light');
-}
-
-@include iro.bem-theme('def') {
-    @include iro.props-assign('colors');
-    @include iro.props-assign('palette-light');
-
-    @media (prefers-color-scheme: dark) {
-        @include iro.props-assign('colors-dark');
-        @include iro.props-assign('palette-dark');
-    }
-}
-
-@include iro.bem-theme('hi') {
-    @include iro.props-assign('colors');
-    @include iro.props-assign('palette-light-hi');
-
-    @media (prefers-color-scheme: dark) {
-        @include iro.props-assign('colors-dark');
-        @include iro.props-assign('palette-dark-hi');
-    }
-}
-
-@include iro.bem-theme('lo') {
-    @include iro.props-assign('colors');
-    @include iro.props-assign('palette-light-lo');
-
-    @media (prefers-color-scheme: dark) {
-        @include iro.props-assign('colors-dark');
-        @include iro.props-assign('palette-dark-lo');
-    }
-}
-
-@include iro.bem-theme('up') {
-    @include iro.props-assign('colors');
-    @include iro.props-assign('palette-light-hi');
-
-    @media (prefers-color-scheme: dark) {
-        @include iro.props-assign('colors-dark');
-        @include iro.props-assign('palette-dark-lo');
-    }
-}
-
-@include iro.bem-theme('down') {
-    @include iro.props-assign('colors');
-    @include iro.props-assign('palette-light-lo');
-
     @media (prefers-color-scheme: dark) {
-        @include iro.props-assign('colors-dark');
-        @include iro.props-assign('palette-dark-hi');
+        @include iro.props-assign('dark');
     }
 }
diff --git a/src/_base.scss b/src/_base.scss
index 740fe3f..b4ce1ae 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -5,7 +5,7 @@
 @use 'config';
 
 html {
-    scrollbar-color: fn.color(--fg-hi3) fn.color(--bg);
+    scrollbar-color: fn.color(--text-disabled) transparent;
 }
 
 html,
@@ -18,8 +18,8 @@ body {
 
     margin:           0;
     padding:          0;
-    background-color: fn.color(--bg);
-    color:            fn.color(--fg);
+    background-color: fn.color(--bg-base);
+    color:            fn.color(--text);
 }
 
 pre,
@@ -48,21 +48,20 @@ h3,
 h4,
 h5,
 h6 {
-    margin:         fn.dim(--heading --margin-top) 0 0;
-    color:          fn.color(--fg-lo);
+    margin-block:   fn.dim(--heading --margin-bs) 0;
+    color:          fn.color(--heading);
     font-size:      fn.dim(--font-size --75);
     font-weight:    bold;
     letter-spacing: 1px;
     text-transform: uppercase;
 
     & + & {
-        margin-top: fn.dim(--heading --margin-top-sibling);
+        margin-block-start: fn.dim(--heading --margin-bs-sibling);
     }
 }
 
 p {
-    margin-top:    fn.dim(--paragraph --margin-top);
-    margin-bottom: 0;
+    margin-block: fn.dim(--paragraph --margin-bs) 0;
 
     &:empty {
         display: none;
@@ -70,12 +69,12 @@ p {
 }
 
 strong {
-    color:       fn.color(--fg-lo);
+    color:       fn.color(--heading);
     font-weight: bold;
 }
 
 small {
-    color:     fn.color(--fg-hi);
+    color:     fn.color(--text-mute);
     font-size: fn.dim(--font-size --75);
 }
 
@@ -129,11 +128,11 @@ input,
 textarea {
     &::placeholder {
         opacity: 1;
-        color:   fn.color(--obj);
+        color:   fn.color(--text-mute);
     }
 
     &:disabled {
-        color: fn.color(--fg-hi);
+        color: fn.color(--text-disabled);
     }
 }
 
@@ -141,20 +140,9 @@ textarea {
     height: calc(1em * fn.dim(--font --standard --line-height));
 }
 
-::selection {
-    background: fn.color(--selection --bg);
-    color:      fn.color(--selection --fg);
-}
-
-img {
-    &::selection {
-        background: fn.color(--selection --bg-img);
-    }
-}
-
 hr {
     height:           fn.dim(--border --thin);
-    margin:           calc(.5 * (fn.dim(--heading --margin-top) + fn.dim(--paragraph --margin-top))) 0;
+    margin-block:     calc(.5 * (fn.dim(--heading --margin-bs) + fn.dim(--paragraph --margin-bs))) 0;
     border:           0;
-    background-color: fn.color(--obj);
+    background-color: fn.color(--border);
 }
diff --git a/src/_config.scss b/src/_config.scss
index c42ad97..08374fb 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -1,6 +1,9 @@
+@use 'sass:list';
+@use 'sass:map';
 @use 'iro-sass/src/index' as iro;
 @use 'iro-sass/src/responsive' as res;
 @use 'include-media/dist/include-media' as media;
+@use '@oddbird/blend';
 
 iro.$vars-root-size: 16px;
 
@@ -20,18 +23,123 @@ media.$unit-intervals: (
 
 res.$named-viewports: media.$breakpoints;
 
-$wanted-grays: (
-    --1:  -1.3,
-    --2:  -1.15,
-    --3:  1,
+$palette-precision: 5 !default;
 
-    --4:  1.15,
-    --5:  1.35,
-    --6:  1.7,
+$theme-light: (
+    --base:  hsl(0, 0%, 97%),
+    --blue:   blend.lch(48% 50 279),
+    --purple: blend.lch(48% 50 308),
+    --red:    blend.lch(48% 50 23),
+    --green:  blend.lch(63% 50 147),
+    --yellow: blend.lch(68% 50 70),
 
-    --7:  2.4,
-    --8:  3.3,
-    --9:  6,
-    --10: 13,
-    --11: 20,
-);
+    --grays: (
+        --50:  1.1,
+        --75:  1.04,
+        --100: 1,
+    
+        --200: -1.15,
+        --300: -1.35,
+        --400: -1.7,
+    
+        --500: -2.4,
+        --600: -3.3,
+        --700: -6,
+        --800: -13,
+        --900: -20,
+    ),
+    --colors: (
+        --100:  -1.08,
+        --200:  -1.20,
+        --300:  -1.33,
+        --400:  -1.58,
+        --500:  -1.92,
+        --600:  -2.39,
+        --700:  -3.01,
+        --800:  -3.87,
+        --900:  -5.07,
+        --1000: -6.72,
+        --1100: -8.84,
+        --1200: -11.31,
+        --1300: -13.94,
+    ),
+
+    --accent:         --blue,
+
+    --bg-l2:          --50,
+    --bg-l1:          --100,
+    --bg-base:        --200,
+
+    --border-mute:    --200,
+    --border:         --300,
+    --border-strong:  --400,
+
+    --text-disabled:  --500,
+    --text-mute-more: --600,
+    --text-mute:      --700,
+    --text:           --800,
+    --heading:        --900,
+) !default;
+
+$theme-dark: (
+    --base:  hsl(0, 0%, 19%),
+    --blue:   blend.lch(48% 50 279),
+    --purple: blend.lch(48% 50 308),
+    --red:    blend.lch(48% 50 23),
+    --green:  blend.lch(63% 50 147),
+    --yellow: blend.lch(68% 50 70),
+
+    --grays: (
+        --50:  -1.31,
+        --75:  -1.18,
+        --100: 1,
+    
+        --200: 1.15,
+        --300: 1.35,
+        --400: 1.7,
+    
+        --500: 2.4,
+        --600: 3.3,
+        --700: 6,
+        --800: 13,
+        --900: 20,
+    ),
+    --colors: (
+        --100:  1.12,
+        --200:  1.30,
+        --300:  1.58,
+        --400:  1.96,
+        --500:  2.45,
+        --600:  3.09,
+        --700:  3.90,
+        --800:  4.85,
+        --900:  6.02,
+        --1000: 7.34,
+        --1100: 8.77,
+        --1200: 10.18,
+        --1300: 11.64,
+    ),
+
+    --accent:         --blue,
+
+    --bg-base:        --50,
+    --bg-l1:          --75,
+    --bg-l2:          --100,
+
+    --border-mute:    --200,
+    --border:         --300,
+    --border-strong:  --400,
+
+    --text-disabled:  --500,
+    --text-mute-more: --600,
+    --text-mute:      --700,
+    --text:           --800,
+    --heading:        --900,
+) !default;
+
+$themes: (
+    light: $theme-light,
+    dark:  $theme-dark,
+) !default;
+
+$theme-default: list.nth(map.keys($themes), 1) !default;
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index bf7e955..37d9cae 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -1,7 +1,9 @@
+@use 'sass:map';
 @use 'iro-sass/src/index' as iro;
 @use 'include-media/dist/include-media' as media;
 @use '@oddbird/blend';
 @use 'functions' as fn;
+@use 'config';
 
 @include iro.props-store((
     --dims: (
@@ -102,12 +104,12 @@
         ),
 
         --paragraph: (
-            --margin-top: fn.dim(--size --300, null),
+            --margin-bs: fn.dim(--size --300, null),
         ),
 
         --heading: (
-            --margin-top:         fn.dim(--size --700, null),
-            --margin-top-sibling: fn.dim(--size --325, null),
+            --margin-bs:         fn.dim(--size --700, null),
+            --margin-bs-sibling: fn.dim(--size --325, null),
 
             --lg: fn.dim(--font-size --400, null),
             --md: fn.dim(--font-size --75, null),
@@ -137,12 +139,18 @@
             --compact-indent: fn.dim(--size --250, null),
         ),
     ),
-), 'dims');
+));
+
+@each $breakpoint in map.keys(media.$breakpoints) {
+    @include media.media('<=#{$breakpoint}') {
+        @include iro.props-store((), $breakpoint);
+    }
+}
 
 @include iro.props-store((
     --dims: (
         --heading: (
-            --margin-top: fn.dim(--size --600, null),
+            --margin-bs: fn.dim(--size --600, null),
         ),
 
         --list: (
@@ -154,7 +162,7 @@
 @include iro.props-store((
     --dims: (
         --heading: (
-            --margin-top: fn.dim(--size --500, null),
+            --margin-bs: fn.dim(--size --500, null),
         ),
 
         --list: (
@@ -167,185 +175,56 @@
 
 @include iro.props-store((
     --colors: (
-        --gray: fn.gray-palette(100%),
-    ),
-), 'palette-light-hi');
-
-@include iro.props-store((
-    --colors: (
-        --gray: fn.gray-palette(97%),
-    ),
-), 'palette-light');
-
-@include iro.props-store((
-    --colors: (
-        --gray: fn.gray-palette(93%),
-    ),
-), 'palette-light-lo');
-
-// @include iro.props-store((
-//     --colors: (
-//         --gray: fn.gray-palette(88%),
-//     ),
-// ), 'palette-light-lo2');
-
-@include iro.props-store((
-    --colors: (
-        --bg-hi2: fn.color(--gray --1, null), // Lightest background
-        --bg-hi:  fn.color(--gray --2, null), // Lighter background
-        --bg:     fn.color(--gray --3, null), // Background
-
-        --obj-hi: fn.color(--gray --4, null),
-        --obj:    fn.color(--gray --5, null),
-        --obj-lo: fn.color(--gray --6, null),
-
-        --fg-hi3: fn.color(--gray --7, null),  // Disabled text
-        --fg-hi2: fn.color(--gray --8, null),  // Placeholder text
-        --fg-hi:  fn.color(--gray --9, null),  // Faint text
-        --fg:     fn.color(--gray --10, null), // Text
-        --fg-lo:  fn.color(--gray --11, null), // Strong text
-
-        --border: (
-            --regular:   fn.color(--obj, null),
-            --stable:    iro.props-get-static(--colors --gray --5, 'palette-light'),
-            --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-light'),
-        ),
-
-        --blue:   fn.color-palette(blend.lch(48% 50 279)),
-        --purple: fn.color-palette(blend.lch(48% 50 308)),
-        --red:    fn.color-palette(blend.lch(48% 50 23)),
-        --green:  fn.color-palette(blend.lch(63% 50 147)),
-        --yellow: fn.color-palette(blend.lch(68% 50 70)),
-
-        --accent: (
-            --primary:      iro.props-ref('colors', --colors --blue),
-            --error:        iro.props-ref('colors', --colors --red),
-            --success:      iro.props-ref('colors', --colors --green),
-            --warning:      iro.props-ref('colors', --colors --yellow),
-            --link-idle:    iro.props-ref('colors', --colors --blue),
-            --link-visited: iro.props-ref('colors', --colors --purple),
-        ),
-
-        --selection: (
-            --bg:     fn.color(--accent --primary --selection, null),
-            --bg-img: fn.color(--accent --primary --quiet --obj-lo, null),
-            --fg:     fn.color(--accent --primary --solid --fg, null),
+        --base: fn.palette(
+            map.get(config.$theme-light, --base),
+            map.get(config.$theme-light, --grays),
         ),
-
-        --focus: (
-            --shadow:    0 0 0 fn.dim(--focus --outline-width, null) fn.color(--accent --primary --quiet --obj-lo, null),
-            --fill:      fn.color(--accent --primary --solid --bg, null),
-            --text:      fn.color(--accent --primary --solid --obj, null),
-            --fill-text: fn.color(--accent --primary --solid --fg, null),
-        ),
-    ),
-), 'colors');
-
-//
-
-// @include iro.props-store((
-//     --colors: (
-//         --gray: fn.gray-palette(1%),
-//     ),
-// ), 'palette-dark-hi2');
-
-@include iro.props-store((
-    --colors: (
-        --gray: fn.gray-palette(7%),
-    ),
-), 'palette-dark-hi');
-
-@include iro.props-store((
-    --colors: (
-        --gray: fn.gray-palette(12%),
     ),
-), 'palette-dark');
+));
 
 @include iro.props-store((
     --colors: (
-        --gray: fn.gray-palette(17%),
-    ),
-), 'palette-dark-lo');
-
-@include iro.props-store((
-    --colors: (
-        --border: (
-            --stable:    iro.props-get-static(--colors --gray --5, 'palette-dark-lo'),
-            --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-dark-lo'),
+        --base: fn.palette(
+            map.get(config.$theme-dark, --base),
+            map.get(config.$theme-dark, --grays),
         ),
-
-        --blue:   fn.color-palette(blend.lch(63% 50 279), -1),
-        --purple: fn.color-palette(blend.lch(63% 50 308), -1),
-        --red:    fn.color-palette(blend.lch(63% 50 23), -1),
-        --green:  fn.color-palette(blend.lch(78% 50 147), -1),
-        --yellow: fn.color-palette(blend.lch(88% 50 70), -1),
-
-        --accent: (
-            --primary:      iro.props-ref('colors-dark', --colors --blue),
-            --error:        iro.props-ref('colors-dark', --colors --red),
-            --success:      iro.props-ref('colors-dark', --colors --green),
-            --warning:      iro.props-ref('colors-dark', --colors --yellow),
-            --link-idle:    iro.props-ref('colors-dark', --colors --blue),
-            --link-visited: iro.props-ref('colors-dark', --colors --purple),
-        ),
-    )
-), 'colors-dark');
-
-//
-
-@include iro.props-store((
-    --colors: (
-        --gray: fn.gray-palette(97%, true),
     ),
-), 'palette-media-light');
-
-@include iro.props-store((
-    --colors: (
-        --border: (
-            --stable:    iro.props-get-static(--colors --gray --5, 'palette-media-light'),
-            --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-media-light'),
-        ),
-    )
-), 'colors-media-light');
+), 'dark');
 
-//
+@each $name, $theme in config.$themes {
+    $props-name: if($name == config.$theme-default, iro.$props-default-tree, $name);
 
-@include iro.props-store((
-    --colors: (
-        --gray: fn.gray-palette(12%, true),
-    ),
-), 'palette-media-dark');
+    @each $color in 'blue' 'purple' 'red' 'green' 'yellow' {
+        @include iro.props-store((
+            --colors: (
+                --#{$color}: fn.palette(
+                    map.get($theme, --#{$color}),
+                    map.get($theme, --colors),
+                    map.get($theme, --base),
+                ),
+            ),
+        ), $props-name);
+    }
 
-@include iro.props-store((
-    --colors: (
-        --border: (
-            --stable:    iro.props-get-static(--colors --gray --5, 'palette-media-dark'),
-            --stable-lo: iro.props-get-static(--colors --gray --6, 'palette-media-dark'),
+    @include iro.props-store((
+        --colors: (
+            --accent: iro.props-get-static(--colors map.get($theme, --accent), $props-name),
         ),
+    ), $props-name);
 
-        --blue:   iro.props-get-static(--colors --blue, 'colors-dark'),
-        --purple: iro.props-get-static(--colors --purple, 'colors-dark'),
-        --red:    iro.props-get-static(--colors --red, 'colors-dark'),
-        --green:  iro.props-get-static(--colors --green, 'colors-dark'),
-        --yellow: iro.props-get-static(--colors --yellow, 'colors-dark'),
+    @each $color in 'bg-l2' 'bg-l1' 'bg-base' 'border-mute' 'border' 'border-strong' 'text-disabled' 'text-mute-more' 'text-mute' 'text' 'heading' {
+        @include iro.props-store((
+            --colors: (
+                --#{$color}: fn.color(--base map.get($theme, --#{$color})),
+            ),
+        ), $props-name);
+    }    
+}
 
-        --accent: (
-            --primary:      iro.props-ref('colors-media', --colors --blue),
-            --error:        iro.props-ref('colors-media', --colors --red),
-            --success:      iro.props-ref('colors-media', --colors --green),
-            --warning:      iro.props-ref('colors-media', --colors --yellow),
-            --link-idle:    iro.props-ref('colors-media', --colors --blue),
-            --link-visited: iro.props-ref('colors-media', --colors --purple),
+@each $color in 'blue' 'purple' 'red' 'green' 'yellow' {
+    @include iro.props-store((
+        --colors: (
+            --#{$color}-static: iro.props-get-static(--colors --#{$color}),
         ),
-    )
-), 'colors-media');
-
-//
-
-@each $breakpoint in map-keys(media.$breakpoints) {
-    @include media.media('<=#{$breakpoint}') {
-        @include iro.props-store((
-            --colors: ()
-        ), $breakpoint);
-    }
+    ));
 }
diff --git a/src/_functions.scss b/src/_functions.scss
index 148a28c..aaa8ac9 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -1,46 +1,47 @@
 @use 'sass:color';
 @use 'sass:math';
 @use 'sass:map';
+@use 'sass:list';
 @use 'iro-sass/src/index' as iro;
 @use 'config';
 @use '@oddbird/blend';
 @use '@oddbird/blend/sass/convert' as blend-convert;
 
-@function color($key, $tree: 'colors', $default: null, $global: false) {
-    @return iro.props-get(join(--colors, $key), $tree, $default, $global);
+@function color($key, $tree: iro.$props-default-tree, $default: null, $global: false) {
+    @return iro.props-get(list.join(--colors, $key), $tree, $default, $global);
 }
 
-@function global-color($key, $tree: 'colors', $default: null, $global: true) {
+@function global-color($key, $tree: iro.$props-default-tree, $default: null, $global: true) {
     @return color($key, $tree, $default, $global);
 }
 
-@function foreign-color($foreign-key, $key, $tree: 'colors', $default: null, $global: true) {
-    @return iro.props-get(join($foreign-key --colors, $key), $tree, $default, $global);
+@function foreign-color($foreign-key, $key, $tree: iro.$props-default-tree, $default: null, $global: true) {
+    @return iro.props-get(list.join($foreign-key --colors, $key), $tree, $default, $global);
 }
 
-@function dim($key, $tree: 'dims', $default: null, $global: false) {
-    @return iro.props-get(join(--dims, $key), $tree, $default, $global);
+@function dim($key, $tree: iro.$props-default-tree, $default: null, $global: false) {
+    @return iro.props-get(list.join(--dims, $key), $tree, $default, $global);
 }
 
-@function global-dim($key, $tree: 'dims', $default: null, $global: true) {
+@function global-dim($key, $tree: iro.$props-default-tree, $default: null, $global: true) {
     @return dim($key, $tree, $default, $global);
 }
 
-@function foreign-dim($foreign-key, $key, $tree: 'dims', $default: null, $global: true) {
-    @return iro.props-get(join($foreign-key --dims, $key), $tree, $default, $global);
+@function foreign-dim($foreign-key, $key, $tree: iro.$props-default-tree, $default: null, $global: true) {
+    @return iro.props-get(list.join($foreign-key --dims, $key), $tree, $default, $global);
 }
 
 @function font-prop($data, $overrides, $key, $prop) {
-    @if (map-has-key($overrides, $prop)) {
-        @return map-get($overrides, $prop);
-    } @else if (map-has-key($data, $prop)) {
+    @if (map.has-key($overrides, $prop)) {
+        @return map.get($overrides, $prop);
+    } @else if (map.has-key($data, $prop)) {
         @return global-dim(--font $key $prop);
     }
     @return null;
 }
 
 @function set-font($key, $overrides: ()) {
-    $font: iro.props-get-static(join(--dims --font, $key), 'dims', $global: true);
+    $font: iro.props-get-static(list.join(--dims --font, $key), $global: true);
 
     $map: (
         font-family:             font-prop($font, $overrides, $key, --family),
@@ -57,47 +58,48 @@
     @return $map;
 }
 
-@function multi-contrast($base-color, $colors, $wanted-contrasts) {
-    $dir:      if(lightness($base-color) >= 50%, -1, 1);
-    $base-lum: nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($base-color))), 2) + .05;
+@function lum($color) {
+    @return list.nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05;
+}
+
+@function multi-contrast($base-color, $colors, $wanted-contrasts, $reference-color: $base-color) {
+    $ref-lum: lum($reference-color);
 
     $result:     ();
-    $colors-len: length($colors);
-    $colors-idx: if($dir == -1, $colors-len, 1);
-    $wanted-len: length($wanted-contrasts);
+    $colors-len: list.length($colors);
+    $colors-idx: 1;
+    $wanted-len: list.length($wanted-contrasts);
     $wanted-idx: 1;
 
-    @while $colors-idx >= 1 and $colors-idx <= $colors-len and $wanted-idx <= $wanted-len {
-        $color:    nth($colors, $colors-idx);
-        $lum:      nth(blend-convert.lin_sRGB_to_XYZ(blend-convert.lin_sRGB(blend-convert.sassToRgb($color))), 2) + .05;
-        $contrast: math.div(math.max($base-lum, $lum), math.min($lum, $base-lum));
+    @while $colors-idx <= $colors-len and $wanted-idx <= $wanted-len {
+        $color:    list.nth($colors, $colors-idx);
+        $lum:      lum($color);
+        $contrast: math.div(math.max($ref-lum, $lum), math.min($lum, $ref-lum));
 
         @if $contrast != 1 {
-            $contrast: $dir * $contrast;
-
-            @if $lum <= $base-lum {
+            @if $lum <= $ref-lum {
                 $contrast: -1 * $contrast;
             }
         }
 
-        $wanted:          nth($wanted-contrasts, $wanted-idx);
-        $wanted-key:      nth($wanted, 1);
-        $wanted-contrast: nth($wanted, 2);
+        $wanted:          list.nth($wanted-contrasts, $wanted-idx);
+        $wanted-key:      list.nth($wanted, 1);
+        $wanted-contrast: list.nth($wanted, 2);
 
         @if $contrast >= $wanted-contrast {
             $result:     map.set($result, $wanted-key, $color);
             $wanted-idx: $wanted-idx + 1;
         } @else {
-            $colors-idx: $colors-idx + $dir * 1;
+            $colors-idx: $colors-idx + 1;
         }
     }
 
-    $last-color: nth($colors, if($dir == -1, 1, $colors-len));
+    $last-color: list.nth($colors, $colors-len);
 
     @if $wanted-idx <= $wanted-len {
         @for $i from $wanted-idx through $wanted-len {
-            $wanted:     nth($wanted-contrasts, $i);
-            $wanted-key: nth($wanted, 1);
+            $wanted:     list.nth($wanted-contrasts, $i);
+            $wanted-key: list.nth($wanted, 1);
             $result:     map.set($result, $wanted-key, $last-color);
         }
     }
@@ -105,53 +107,21 @@
     @return $result;
 }
 
-@function gray-to-alpha($lightness, $color) {
-    @if $lightness >= 50% {
-        @return rgba(#000, color.blackness($color));
-    } @else {
-        @return rgba(#fff, color.whiteness($color));
-    }
-}
+@function palette($base-color, $contrasts, $reference-color: $base-color) {
+    $palette: ();
 
-@function color-palette($base, $dir: 1) {
-    @return (
-        --solid: (
-            --bg-hi:     blend.scale($base, $lightness: $dir * 15%, $chroma: $dir * 7.5%),
-            --bg:        $base,
-            --obj:       blend.scale($base, $lightness: $dir * -15%, $chroma: $dir * -7.5%),
-            --obj-lo:    blend.scale($base, $lightness: $dir * -30%, $chroma: $dir * -15%),
-            --fg:        blend.contrast($base),
-        ),
-        --quiet: (
-            --bg:     rgba($base, .1),
-            --obj:    rgba($base, .2),
-            --obj-lo: rgba($base, .4),
-            --fg-hi:  rgba($base, .7),
-            --fg:     blend.scale($base, $lightness: $dir * -30%, $chroma: $dir * -15%),
-            --fg-lo:  blend.scale($base, $lightness: $dir * -45%, $chroma: $dir * -22.5%),
-        ),
-        --selection: rgba($base, .99),
-    );
-}
-
-@function gray-palette($lightness, $alpha: false) {
-    $grays: ();
-
-    @for $i from 0 through 100 {
-        $grays: append($grays, blend.lch($i * 1% 0 0));
+    @if list.nth(list.nth($contrasts, 1), 2) > list.nth(list.nth($contrasts, list.length($contrasts)), 2) {
+        $contrasts: iro.fn-list-reverse($contrasts);
     }
 
-    $colors: multi-contrast(blend.lch($lightness * 1% 0 0), $grays, config.$wanted-grays);
+    $i: -100%;
 
-    @each $key, $color in $colors {
-        @if $alpha {
-            $colors: map.set($colors, $key, gray-to-alpha($lightness, $color));
-        } @else {
-            $colors: map.set($colors, $key, $color);
-        }
+    @while $i <= 100% {
+        $palette: list.append($palette, blend.scale($base-color, $l: $i));
+        $i: $i + config.$palette-precision;
     }
 
-    @return $colors;
+    @return multi-contrast($base-color, $palette, $contrasts, $reference-color);
 }
 
 @function px-to-em($size, $base: iro.$vars-root-size) {
diff --git a/src/_mixins.scss b/src/_mixins.scss
index 4eeb1ad..dc62870 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -1,3 +1,4 @@
+@use 'sass:list';
 @use 'functions' as fn;
 
 @mixin set-font($basis, $values: ()) {
@@ -12,13 +13,13 @@
 
 @mixin heading-strong($size) {
     color:     fn.foreign-color(--heading, --strong);
-    font-size: fn.global-dim(join(--heading, $size));
+    font-size: fn.global-dim(list.join(--heading, $size));
 }
 
 @mixin heading-medium($size) {
     @include set-font(--standard, (
         --line-height: null,
-        --size:        fn.global-dim(join(--heading, $size)),
+        --size:        fn.global-dim(list.join(--heading, $size)),
         --weight:      bold,
         --transform:   uppercase,
         --spacing:     1px
@@ -31,7 +32,7 @@
 @mixin heading-faint($size) {
     @include set-font(--standard, (
         --line-height: null,
-        --size:        fn.global-dim(join(--heading, $size)),
+        --size:        fn.global-dim(list.join(--heading, $size)),
         --weight:      500,
         --transform:   uppercase,
         --spacing:     1px
diff --git a/src/_objects.scss b/src/_objects.scss
index 578de0c..aaace92 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -1,25 +1,26 @@
-@use 'objects/icon';
-@use 'objects/emoji';
+// @use 'objects/icon';
+// @use 'objects/emoji';
 @use 'objects/heading';
 @use 'objects/divider';
-@use 'objects/badge';
-@use 'objects/button';
-@use 'objects/text-field';
-@use 'objects/field-label';
-@use 'objects/radio';
-@use 'objects/checkbox';
-@use 'objects/switch';
-@use 'objects/action-button';
-@use 'objects/overflow-button';
-@use 'objects/status-indicator';
-@use 'objects/avatar';
-@use 'objects/message';
-@use 'objects/action-menu';
-@use 'objects/menu';
-@use 'objects/icon-nav';
-@use 'objects/backdrop';
-@use 'objects/dialog';
-@use 'objects/lightbox';
-@use 'objects/list-group';
-@use 'objects/table';
-@use 'objects/alert';
+// @use 'objects/badge';
+// @use 'objects/button';
+// @use 'objects/text-field';
+// @use 'objects/field-label';
+// @use 'objects/radio';
+// @use 'objects/checkbox';
+// @use 'objects/switch';
+// @use 'objects/action-button';
+// @use 'objects/overflow-button';
+// @use 'objects/status-indicator';
+// @use 'objects/avatar';
+// @use 'objects/message';
+// @use 'objects/action-menu';
+// @use 'objects/menu';
+// @use 'objects/icon-nav';
+// @use 'objects/backdrop';
+// @use 'objects/dialog';
+// @use 'objects/lightbox';
+// @use 'objects/list-group';
+// @use 'objects/table';
+// @use 'objects/alert';
+@use 'objects/palette';
diff --git a/src/_scopes.scss b/src/_scopes.scss
index a3aeb6c..eb28177 100644
--- a/src/_scopes.scss
+++ b/src/_scopes.scss
@@ -1,6 +1,6 @@
 @use 'scopes/links';
-@use 'scopes/code';
-@use 'scopes/blockquotes';
-@use 'scopes/lists';
+// @use 'scopes/code';
+// @use 'scopes/blockquotes';
+// @use 'scopes/lists';
 @use 'scopes/headings';
-@use 'scopes/tables';
+// @use 'scopes/tables';
diff --git a/src/_themes.scss b/src/_themes.scss
new file mode 100644
index 0000000..72562c0
--- /dev/null
+++ b/src/_themes.scss
@@ -0,0 +1,14 @@
+@use 'iro-sass/src/index' as iro;
+@use 'functions' as fn;
+
+@include iro.bem-theme('base') {
+    background-color: fn.global-color(--bg-base);
+}
+
+@include iro.bem-theme('l1') {
+    background-color: fn.global-color(--bg-l1);
+}
+
+@include iro.bem-theme('l2') {
+    background-color: fn.global-color(--bg-l2);
+}
diff --git a/src/_utils.scss b/src/_utils.scss
index d11a42c..e551136 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -1,13 +1,16 @@
+@use 'sass:map';
 @use 'iro-sass/src/index' as iro;
 @use 'functions' as fn;
 @use 'include-media/dist/include-media' as media;
 
 $dirs: (
     '': '',
-    't': '-top',
-    'r': '-right',
-    'b': '-bottom',
-    'l': '-left',
+    'bs': '-block-start',
+    'be': '-block-end',
+    'b':  '-block',
+    'is': '-inline-start',
+    'ie': '-inline-end',
+    'i':  '-inline',
 );
 
 @include iro.bem-utility('d-block') {
@@ -29,7 +32,7 @@ $dirs: (
 @include iro.bem-utility('d-none') {
     display: none;
 
-    @each $breakpoint in map-keys(media.$breakpoints) {
+    @each $breakpoint in map.keys(media.$breakpoints) {
         @include media.media('<=#{$breakpoint}') {
             @include iro.bem-suffix('#{$breakpoint}-lo') {
                 display: none;
@@ -62,12 +65,12 @@ $dirs: (
     }
 }
 
-@include iro.bem-utility('ta-left') {
-    text-align: left;
+@include iro.bem-utility('ta-start') {
+    text-align: start;
 }
 
-@include iro.bem-utility('ta-right') {
-    text-align: right;
+@include iro.bem-utility('ta-end') {
+    text-align: end;
 }
 
 @include iro.bem-utility('ta-center') {
@@ -102,28 +105,23 @@ $dirs: (
     justify-content: flex-end;
 }
 
-@include iro.bem-utility('c-strong') {
-    color: fn.color(--fg-lo);
+@include iro.bem-utility('c-heading') {
+    color: fn.color(--heading);
 }
 
-@include iro.bem-utility('c-fg') {
-    color: fn.color(--fg);
+@include iro.bem-utility('c-text') {
+    color: fn.color(--text);
 }
 
-@include iro.bem-utility('c-muted') {
-    color: fn.color(--fg-hi);
-}
-
-@include iro.bem-utility('c-muted-hi') {
-    color: fn.color(--fg-hi2);
+@include iro.bem-utility('c-mute') {
+    color: fn.color(--text-mute);
 }
 
 @include iro.bem-utility('mt-neutralize') {
     &::before {
         content:       '';
         display:       block;
-        margin-top:    -100em;
-        margin-bottom: 100em;
+        margin-block:  -100em 100em;
     }
 }
 
@@ -170,11 +168,6 @@ $dirs: (
     top:      0;
 }
 
-@include iro.bem-utility('themed') {
-    background-color: fn.global-color(--bg);
-    color:            fn.global-color(--fg);
-}
-
 @each $dir, $suffix in $dirs {
     @include iro.bem-utility('m#{$dir}-auto') {
         margin#{$suffix}: auto;
@@ -199,6 +192,6 @@ $dirs: (
     }
     
     @include iro.bem-utility('b#{$dir}-1') {
-        border#{$suffix}: 1px solid fn.global-color(--border --stable);
+        border#{$suffix}: 1px solid fn.global-color(--border);
     }
 }
diff --git a/src/index.scss b/src/index.scss
index 9e6c838..50927e2 100644
--- a/src/index.scss
+++ b/src/index.scss
@@ -4,6 +4,7 @@
 @use 'layouts';
 @use 'objects';
 @use 'scopes';
+@use 'themes';
 @use 'utils';
 
 @use 'apply-vars';
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss
index 5f2cbe7..a70d27a 100644
--- a/src/layouts/_button-group.scss
+++ b/src/layouts/_button-group.scss
@@ -6,7 +6,7 @@
         --dims: (
             --spacing: fn.global-dim(--size --150),
         ),
-    ), 'dims');
+    ));
 
     @include iro.bem-layout(iro.props-namespace()) {
         display:   flex;
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index b567119..b28eea2 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -10,7 +10,7 @@
             --pad-x:      fn.global-dim(--size --400),
             --pad-y:      fn.global-dim(--size --800),
         )
-    ), 'dims');
+    ));
 
     @include iro.props-store((
         --dims: (
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index 901f613..9c741ec 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -1,7 +1,7 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
-@use '../objects/field-label';
+// @use '../objects/field-label';
 
 @include iro.props-namespace('form') {
     @include iro.props-store((
@@ -10,7 +10,7 @@
             --label-spacing-x: fn.global-dim(--size --325),
             --hint-font-size:  fn.global-dim(--font-size --75),
         ),
-    ), 'dims');
+    ));
 
     @include iro.bem-layout(iro.props-namespace()) {
         display:        flex;
diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss
index d276d33..fa90975 100644
--- a/src/layouts/_media.scss
+++ b/src/layouts/_media.scss
@@ -22,7 +22,7 @@
                 --pad-y: fn.global-dim(--size --225),
             )
         )
-    ), 'dims');
+    ));
 
     @include iro.bem-layout(iro.props-namespace()) {
         display:     flex;
diff --git a/src/layouts/_message-group.scss b/src/layouts/_message-group.scss
index 125c215..f977b61 100644
--- a/src/layouts/_message-group.scss
+++ b/src/layouts/_message-group.scss
@@ -1,7 +1,7 @@
 @use 'iro-sass/src/index' as iro;
 @use '../functions' as fn;
 
-@use '../objects/message';
+// @use '../objects/message';
 
 @include iro.props-namespace('message-group') {
     @include iro.props-store((
@@ -15,7 +15,7 @@
                 --spacing-y: fn.global-dim(--size --50),
             )
         )
-    ), 'dims');
+    ));
 
     @include iro.bem-layout(iro.props-namespace()) {
         display:               grid;
@@ -43,7 +43,7 @@
                 position:            absolute;
                 top:                 0;
                 left:                calc(-1 * fn.dim(--arrow-size));
-                border:              fn.dim(--arrow-size) solid fn.global-color(--bg);
+                border:              fn.dim(--arrow-size) solid fn.global-color(--bg-l2);
                 border-bottom-color: transparent;
                 border-left-color:   transparent;
             }
@@ -59,7 +59,7 @@
                     right:              calc(-1 * fn.dim(--arrow-size));
                     left:               auto;
                     border-right-color: transparent;
-                    border-left-color:  fn.global-color(--bg);
+                    border-left-color:  fn.global-color(--bg-l2);
                 }
             }
         }
diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss
index d3af570..8643bbf 100644
--- a/src/layouts/_overflow.scss
+++ b/src/layouts/_overflow.scss
@@ -4,6 +4,6 @@
 @include iro.props-namespace('overflow') {
     @include iro.bem-layout(iro.props-namespace()) {
         overflow:        auto;
-        scrollbar-color: fn.global-color(--obj-lo) transparent;
+        scrollbar-color: fn.global-color(--text-disabled) transparent;
     }
 }
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 655080f..465bbcf 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -4,7 +4,7 @@
 @include iro.props-namespace('divider') {
     @include iro.props-store((
         --dims: (
-            --margin-y: fn.global-dim(--size --85),
+            --margin-b: fn.global-dim(--size --85),
     
             --strong: (
                 --border:          fn.global-dim(--border --thick),
@@ -19,52 +19,48 @@
                 --label-font-size: fn.global-dim(--font-size --50),
             ),
         ),
-    ), 'dims');
-
-    @include iro.props-store((
         --colors: (
             --strong: (
-                --bg:    fn.global-color(--fg),
-                --label: fn.global-color(--fg),
+                --bg:    fn.global-color(--text),
+                --label: fn.global-color(--text),
             ),
             --medium: (
-                --bg:    fn.global-color(--obj),
-                --label: fn.global-color(--fg-hi),
+                --bg:    fn.global-color(--border),
+                --label: fn.global-color(--text-mute),
             ),
             --faint: (
-                --bg:    fn.global-color(--obj),
-                --label: fn.global-color(--fg-hi2),
+                --bg:    fn.global-color(--border),
+                --label: fn.global-color(--text-mute-more),
             ),
             --blue: (
-                --bg:    fn.global-color(--blue --solid --bg),
-                --label: fn.global-color(--blue --solid --obj),
+                --bg:    fn.global-color(--blue --700),
+                --label: fn.global-color(--blue --1000),
             ),
             --purple: (
-                --bg:    fn.global-color(--purple --solid --bg),
-                --label: fn.global-color(--purple --solid --obj),
+                --bg:    fn.global-color(--purple --700),
+                --label: fn.global-color(--purple --1000),
             ),
             --red: (
-                --bg:    fn.global-color(--red --solid --bg),
-                --label: fn.global-color(--red --solid --obj),
+                --bg:    fn.global-color(--red --700),
+                --label: fn.global-color(--red --1000),
             ),
             --green: (
-                --bg:    fn.global-color(--green --solid --bg),
-                --label: fn.global-color(--green --solid --obj),
+                --bg:    fn.global-color(--green --700),
+                --label: fn.global-color(--green --1000),
             ),
             --yellow: (
-                --bg:    fn.global-color(--yellow --solid --bg),
-                --label: fn.global-color(--yellow --solid --obj),
+                --bg:    fn.global-color(--yellow --700),
+                --label: fn.global-color(--yellow --1000),
             ),
         ),
-    ), 'colors');
+    ));
 
     @include iro.bem-object(iro.props-namespace()) {
         display:        flex;
         flex-direction: row;
         align-items:    center;
         height:         1em;
-        margin-top:     fn.dim(--margin-y);
-        margin-bottom:  fn.dim(--margin-y);
+        margin-block:   fn.dim(--margin-b);
         color:          fn.color(--strong --label);
         font-size:      fn.dim(--strong --label-font-size);
         font-weight:    700;
@@ -93,8 +89,7 @@
             align-self:       stretch;
             width:            1px;
             height:           auto;
-            margin-top:       0;
-            margin-bottom:    0;
+            margin-block:     0;
             background-color: fn.color(--faint --bg);
 
             &::before,
@@ -129,12 +124,12 @@
 
         @include iro.bem-modifier('labelled') {
             &::before {
-                margin-right: 1em;
+                margin-inline-end: 1em;
             }
 
             &::after {
-                display:     block;
-                margin-left: 1em;
+                display:             block;
+                margin-inline-start: 1em;
             }
         }
 
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 5d84e61..6dcf7e9 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -8,37 +8,34 @@
     @include iro.props-store((
         --dims: (
             --offset: -.02em,
-        )
-    ), 'dims');
-
-    @include iro.props-store((
+        ),
         --colors: (
-            --light:  fn.global-color(--fg-hi),
-            --strong: fn.global-color(--fg-lo),
-            --bg:     fn.global-color(--bg-hi2),
+            --light:  fn.global-color(--text-mute),
+            --strong: fn.global-color(--heading),
+            --bg:     fn.global-color(--bg-l2),
         ),
-    ), 'colors');
+    ));
 
     @include iro.bem-object(iro.props-namespace()) {
         @include mx.set-font(--headline);
 
-        display:        block;
-        margin-top:     fn.global-dim(--heading --margin-top);
-        transform:      translateX(fn.dim(--offset));
-        letter-spacing: normal;
-        text-transform: none;
+        display:            block;
+        margin-block-start: fn.global-dim(--heading --margin-bs);
+        transform:          translateX(fn.dim(--offset));
+        letter-spacing:     normal;
+        text-transform:     none;
 
         & + & {
-            margin-top: fn.global-dim(--heading --margin-top-sibling);
+            margin-block-start: fn.global-dim(--heading --margin-bs-sibling);
         }
 
         @include iro.bem-elem('highlight') {
             background-image: linear-gradient(
                 to top,
-                transparent .05em,
+                transparent    .05em,
                 fn.color(--bg) .05em,
                 fn.color(--bg) .5em,
-                transparent .5em
+                transparent    .5em
             );
         }
 
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
new file mode 100644
index 0000000..a86c026
--- /dev/null
+++ b/src/objects/_palette.scss
@@ -0,0 +1,38 @@
+@use 'sass:map';
+@use 'sass:list';
+@use 'iro-sass/src/index' as iro;
+@use '../functions' as fn;
+@use '../config';
+
+@include iro.props-namespace('palette') {
+    @include iro.bem-object(iro.props-namespace()) {
+        display: flex;
+        height:  3em;
+
+        @include iro.bem-elem('item') {
+            flex: 1 1 auto;
+
+            @for $i from 1 through list.length(map.get(config.$theme-light, --grays)) {
+                $key: list.nth(map.keys(map.get(config.$theme-light, --grays)), $i);
+
+                &:nth-child(#{$i}) {
+                    background-color: fn.global-color(--base $key);
+                }
+            }
+        }
+
+        @each $palette in 'blue' 'purple' 'red' 'green' 'yellow' {
+            @include iro.bem-modifier($palette) {
+                @include iro.bem-elem('item') {
+                    @for $i from 1 through list.length(map.get(config.$theme-light, --colors)) {
+                        $key: list.nth(map.keys(map.get(config.$theme-light, --colors)), $i);
+        
+                        &:nth-child(#{$i}) {
+                            background-color: fn.global-color(--#{$palette} $key);
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 2e68952..115b199 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -3,42 +3,61 @@
 
 @include iro.props-namespace('links') {
     @include iro.props-store((
+        --dims: (
+            --underline:         fn.global-dim(--border --thin),
+
+            --hover: (
+                --underline:    fn.global-dim(--border --medium),
+            )
+        ),
         --colors: (
-            --underline:         fn.global-color(--fg-hi2),
+            --underline:         fn.global-color(--text-mute-more),
 
-            --idle:              fn.global-color(--accent --link-idle --quiet --fg),
-            --visited:           fn.global-color(--accent --link-visited --quiet --fg),
-            --idle-underline:    fn.global-color(--accent --link-idle --quiet --fg-hi),
-            --visited-underline: fn.global-color(--accent --link-visited --quiet --fg-hi),
+            --idle: (
+                --text:          fn.global-color(--accent --1000),
+                --underline:     fn.global-color(--accent --700),
 
-            --key-focus: (
-                --border: fn.global-color(--focus --fill),
-                --shadow: 0 0 0 calc(fn.global-dim(--focus --outline-width) + 2px) fn.global-color(--accent --primary --quiet --obj-lo),
+                --hover: (
+                    --text:      fn.global-color(--accent --1200),
+                ),
             ),
-        )
-    ), 'colors');
 
-    @include iro.props-store((
-        --colors: (
-            --underline: fn.global-color(--fg-hi),
+            --visited: (
+                --text:          fn.global-color(--purple --1000),
+                --underline:     fn.global-color(--purple --700),
+
+                --hover: (
+                    --text:      fn.global-color(--purple --1200),
+                ),
+            ),
+
+            --focus: (
+                --bg:            fn.global-color(--yellow-static --400),
+                --text:          #000,
+            )
         )
-    ), 'colors-dark');
+    ));
 
     @include iro.bem-scope(iro.props-namespace()) {
         :link,
         :visited {
-            border-radius:         .5px;
-            color:                 currentColor;
-            text-decoration:       underline;
-            text-decoration-color: fn.color(--underline);
+            border-radius:             .5px;
+            color:                     currentColor;
+            text-decoration:           underline;
+            text-decoration-color:     fn.color(--underline);
+            text-decoration-thickness: fn.dim(--underline);
 
             &:hover {
-                text-decoration: underline;
+                text-decoration:           underline;
+                text-decoration-thickness: fn.dim(--hover --underline);
             }
 
             @include iro.bem-at-theme('keyboard') {
                 &:focus {
-                    box-shadow: 0 0 0 2px fn.color(--key-focus --border), fn.color(--key-focus --shadow);
+                    background-color:          fn.color(--focus --bg);
+                    color:                     fn.color(--focus --text);
+                    text-decoration:           none;
+                    border-block-end:          fn.dim(--hover --underline) solid currentColor;
                 }
             }
         }
@@ -52,13 +71,21 @@
 
         @include iro.bem-modifier('colored') {
             :link {
-                color:                 fn.color(--idle);
-                text-decoration-color: fn.color(--idle-underline);
+                color:                 fn.color(--idle --text);
+                text-decoration-color: fn.color(--idle --underline);
+
+                &:hover {
+                    color:             fn.color(--idle --hover --text);
+                }
             }
     
             :visited {
-                color:                 fn.color(--visited);
-                text-decoration-color: fn.color(--visited-underline);
+                color:                 fn.color(--visited --text);
+                text-decoration-color: fn.color(--visited --underline);
+
+                &:hover {
+                    color:             fn.color(--visited --hover --text);
+                }
             }
         }
     }