Fixes

19 files changed, 144 insertions, 151 deletions

diff --git a/src/_config.scss b/src/_config.scss
index ced2aa5..81c6ff2 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -49,35 +49,35 @@ $static-colors: map.deep-merge((
 
 $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,
+    --accent:          --blue,
+    --accent-static:   --blue-static,
+    --positive:        --green,
+    --positive-static: --green-static,
+    --negative:        --red,
+    --negative-static: --red-static,
+    --warning:         --yellow,
+    --warning-static:  --yellow-static,
+
+    --focus-raw:       --accent,
+    --focus-static:    --accent-static,
+
+    --border-mute:     --base --200,
+    --border:          --base --300,
+    --border-strong:   --base --400,
+
+    --text-disabled:   --base --500,
+    --text-mute-more:  --base --600,
+    --text-mute:       --base --700,
+    --text:            --base --800,
+    --heading:         --base --900,
 
     --focus: (
-        --outline:       --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,
+        --outline:       --focus-raw --400,
+        --border-mute:   --focus-raw --900,
+        --border:        --focus-raw --1000,
+        --border-text:   --focus-raw --1000-text,
+        --border-strong: --focus-raw --1100,
+        --text:          --focus-raw --1100,
     ),
 ), $semantic-colors-common-override) !default;
 
@@ -132,9 +132,9 @@ $theme-light: map.deep-merge((
     ),
 
     --semantic: map.merge($semantic-colors-common, (
-        --bg-l2:   --theme --base --50,
-        --bg-l1:   --theme --base --100,
-        --bg-base: --theme --base --200,
+        --bg-l2:   --base --50,
+        --bg-l1:   --base --100,
+        --bg-base: --base --200,
     )),
 
     --constants: (
@@ -193,9 +193,9 @@ $theme-dark: map.deep-merge((
     ),
 
     --semantic: map.merge($semantic-colors-common, (
-        --bg-base: --theme --base --50,
-        --bg-l1:   --theme --base --75,
-        --bg-l2:   --theme --base --100,
+        --bg-base: --base --50,
+        --bg-l1:   --base --75,
+        --bg-l2:   --base --100,
     )),
 
     --constants: (
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index 3b23c32..83d3a6a 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -1,3 +1,5 @@
+// stylelint-disable scss/dollar-variable-pattern
+
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:list';
@@ -98,15 +100,15 @@ $key-focus--border-width:  props.def(--key-focus--border-width, props.get($borde
 $key-focus--border-offset: props.def(--key-focus--border-offset, props.get($border-width--medium)) !default;
 
 $list--indent:         props.def(--list--indent, props.get($size--400)) !default;
-$list--compact-indent: props.def(--list--indent, props.get($size--250)) !default;
+$list--compact-indent: props.def(--list--compact-indent, props.get($size--250)) !default;
 
 //
 
-$static-colors: props.def(--static-colors);
+$-static-colors: ();
 
 @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 ));
+    $-static-colors: map.merge($-static-colors, ( $palette-name: $palette ));
 }
 
 //
@@ -129,6 +131,10 @@ $themes: ();
     @each $variant-name, $variant in $theme {
         $compiled: props.def(--colors);
 
+        @each $palette-name, $palette in $-static-colors {
+            $compiled: props.merge($compiled, ( #{$palette-name}-static: $palette ));
+        }
+
         @each $palette-name, $palette in map.get($variant, --palettes) {
             $base-color: list.nth($palette, 1);
             $contrasts:  list.nth($palette, 2);
@@ -147,32 +153,14 @@ $themes: ();
 
             @if meta.type-of($ref) == 'map' {
                 @each $key, $r in $ref {
-                    $repo-name: list.nth($r, 1);
-                    $re1:       list.nth($r, 2);
-                    $re2:       iro.fn-list-slice($r, 3);
-
-                    $res2: null;
-
-                    @if $repo-name == --static {
-                        $res2: props.get($static-colors, $re1, $re2...);
-                    } @else {
-                        $res2: props.get($compiled, $re1, $re2...);
-                    }
-
-                    $res: map.merge($res, ($key: $res2));
+                    $re1: list.nth($r, 1);
+                    $re2: iro.fn-list-slice($r, 2);
+                    $res: map.merge($res, ($key: props.get($compiled, $re1, $re2...)));
                 }
             } @else {
-                $repo-name: list.nth($ref, 1);
-                $ref1:      list.nth($ref, 2);
-                $ref2:      iro.fn-list-slice($ref, 3);
-
-                $res: null;
-
-                @if $repo-name == --static {
-                    $res: props.get($static-colors, $ref1, $ref2...);
-                } @else {
-                    $res: props.get($compiled, $ref1, $ref2...);
-                }
+                $ref1: list.nth($ref, 1);
+                $ref2: iro.fn-list-slice($ref, 2);
+                $res:  props.get($compiled, $ref1, $ref2...);
             }
 
             $compiled: props.merge($compiled, ( $color: $res ));
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 48149b1..8efdad9 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -9,91 +9,91 @@
 @use 'action-button.vars' as vars;
 
 @mixin -apply-theme($theme, $key: ()) {
-    color:            props.get($theme, list.join($key, --disabled --label)...);
-    background-color: props.get($theme, list.join($key, --disabled --bg)...);
-    border-color:     props.get($theme, list.join($key, --disabled --border)...);
+    color:            props.get($theme, list.join($key, --disabled --label-color)...);
+    background-color: props.get($theme, list.join($key, --disabled --bg-color)...);
+    border-color:     props.get($theme, list.join($key, --disabled --border-color)...);
 
     &::after {
-        outline-color: props.get($theme, list.join($key, --key-focus --border)...);
+        outline-color: props.get($theme, list.join($key, --key-focus --border-color)...);
         box-shadow:
             0
             0
             0
             calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-            props.get($theme, list.join($key, --key-focus --outline-width)...);
+            props.get($theme, list.join($key, --key-focus --outline-color)...);
     }
 
     &:link,
     &:visited,
     &:enabled {
-        color:            props.get($theme, list.join($key, --label)...);
-        background-color: props.get($theme, list.join($key, --bg)...);
-        border-color:     props.get($theme, list.join($key, --border)...);
+        color:            props.get($theme, list.join($key, --label-color)...);
+        background-color: props.get($theme, list.join($key, --bg-color)...);
+        border-color:     props.get($theme, list.join($key, --border-color)...);
 
         &:hover,
         &:focus-visible {
-            color:            props.get($theme, list.join($key, --hover --label)...);
-            background-color: props.get($theme, list.join($key, --hover --bg)...);
-            border-color:     props.get($theme, list.join($key, --hover --border)...);
+            color:            props.get($theme, list.join($key, --hover --label-color)...);
+            background-color: props.get($theme, list.join($key, --hover --bg-color)...);
+            border-color:     props.get($theme, list.join($key, --hover --border-color)...);
         }
 
         &:active {
-            color:            props.get($theme, list.join($key, --active --label)...);
-            background-color: props.get($theme, list.join($key, --active --bg)...);
-            border-color:     props.get($theme, list.join($key, --active --border)...);
+            color:            props.get($theme, list.join($key, --active --label-color)...);
+            background-color: props.get($theme, list.join($key, --active --bg-color)...);
+            border-color:     props.get($theme, list.join($key, --active --border-color)...);
         }
     }
 
     @include iro.bem-modifier('quiet') {
-        color:            props.get($theme, list.join($key, --quiet --disabled --label)...);
+        color:            props.get($theme, list.join($key, --quiet --disabled --label-color)...);
         background-color: transparent;
         border-color:     transparent;
 
         &:link,
         &:visited,
         &:enabled {
-            color:            props.get($theme, list.join($key, --quiet --label)...);
+            color:            props.get($theme, list.join($key, --quiet --label-color)...);
             background-color: transparent;
             border-color:     transparent;
 
             &:hover,
             &:focus-visible {
-                color:            props.get($theme, list.join($key, --quiet --hover --label)...);
-                background-color: props.get($theme, list.join($key, --quiet --hover --bg)...);
+                color:            props.get($theme, list.join($key, --quiet --hover --label-color)...);
+                background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
                 border-color:     transparent;
             }
 
             &:active {
-                color:            props.get($theme, list.join($key, --quiet --active --label)...);
-                background-color: props.get($theme, list.join($key, --quiet --active --bg)...);
+                color:            props.get($theme, list.join($key, --quiet --active --label-color)...);
+                background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
                 border-color:     transparent;
             }
         }
     }
 
     @include iro.bem-is('selected') {
-        color:            props.get($theme, list.join($key, --selected --disabled --label)...);
-        background-color: props.get($theme, list.join($key, --selected --disabled --bg)...);
-        border-color:     props.get($theme, list.join($key, --selected --disabled --border)...);
+        color:            props.get($theme, list.join($key, --selected --disabled --label-color)...);
+        background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
+        border-color:     props.get($theme, list.join($key, --selected --disabled --border-color)...);
 
         &:link,
         &:visited,
         &:enabled {
-            color:            props.get($theme, list.join($key, --selected --label)...);
-            background-color: props.get($theme, list.join($key, --selected --bg)...);
-            border-color:     props.get($theme, list.join($key, --selected --border)...);
+            color:            props.get($theme, list.join($key, --selected --label-color)...);
+            background-color: props.get($theme, list.join($key, --selected --bg-color)...);
+            border-color:     props.get($theme, list.join($key, --selected --border-color)...);
     
             &:hover,
             &:focus-visible {
-                color:            props.get($theme, list.join($key, --selected --hover --label)...);
-                background-color: props.get($theme, list.join($key, --selected --hover --bg)...);
-                border-color:     props.get($theme, list.join($key, --selected --hover --border)...);
+                color:            props.get($theme, list.join($key, --selected --hover --label-color)...);
+                background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
+                border-color:     props.get($theme, list.join($key, --selected --hover --border-color)...);
             }
     
             &:active {
-                color:            props.get($theme, list.join($key, --selected --active --label)...);
-                background-color: props.get($theme, list.join($key, --selected --active --bg)...);
-                border-color:     props.get($theme, list.join($key, --selected --active --border)...);
+                color:            props.get($theme, list.join($key, --selected --active --label-color)...);
+                background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
+                border-color:     props.get($theme, list.join($key, --selected --active --border-color)...);
             }
         }
     }
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
index 9049a8f..ec312b4 100644
--- a/src/objects/_action-button.vars.scss
+++ b/src/objects/_action-button.vars.scss
@@ -11,20 +11,20 @@ $border-width: props.def(--o-action-button--border-width, props.get(core.$border
 $rounding:     props.def(--o-action-button--rounding, props.get(core.$rounding)) !default;
 $font-size:    props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default;
 
-$pad-i--sm:      props.def(--o-action-button--pad-i, props.get(core.$size--100), 'sm') !default;
-$pad-i-pill--sm: props.def(--o-action-button--pad-i-pill, props.get(core.$size--150), 'sm') !default;
-$pad-b--sm:      props.def(--o-action-button--pad-b, props.get(core.$size--40), 'sm') !default;
-$font-size--sm:  props.def(--o-action-button--font-size, props.get(core.$font-size--75), 'sm') !default;
-
-$pad-i--lg:      props.def(--o-action-button--pad-i, props.get(core.$size--175), 'lg') !default;
-$pad-i-pill--lg: props.def(--o-action-button--pad-i-pill, props.get(core.$size--225), 'lg') !default;
-$pad-b--lg:      props.def(--o-action-button--pad-b, props.get(core.$size--115), 'lg') !default;
-$font-size--lg:  props.def(--o-action-button--font-size, props.get(core.$font-size--150), 'lg') !default;
-
-$pad-i--xl:      props.def(--o-action-button--pad-i, props.get(core.$size--225), 'xl') !default;
-$pad-i-pill--xl: props.def(--o-action-button--pad-i-pill, props.get(core.$size--300), 'xl') !default;
-$pad-b--xl:      props.def(--o-action-button--pad-b, props.get(core.$size--150), 'xl') !default;
-$font-size--xl:  props.def(--o-action-button--font-size, props.get(core.$font-size--200), 'xl') !default;
+$pad-i--sm:      props.def(--o-action-button--sm--pad-i, props.get(core.$size--100)) !default;
+$pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--150)) !default;
+$pad-b--sm:      props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default;
+$font-size--sm:  props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default;
+
+$pad-i--lg:      props.def(--o-action-button--lg--pad-i, props.get(core.$size--175)) !default;
+$pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--225)) !default;
+$pad-b--lg:      props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default;
+$font-size--lg:  props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default;
+
+$pad-i--xl:      props.def(--o-action-button--xl--pad-i, props.get(core.$size--225)) !default;
+$pad-i-pill--xl: props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--300)) !default;
+$pad-b--xl:      props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default;
+$font-size--xl:  props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default;
 
 $key-focus--border-width:  props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
 $key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 41b2fbb..55a2051 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -101,7 +101,7 @@
             margin-inline: props.get(vars.$pad-i-label);
         }
 
-        @include -apply-theme(vars.$default-theme);
+        @include -apply-theme(vars.$default-theme, $static: true);
 
         @each $theme in map.keys(props.get(vars.$themes)) {
             @include iro.bem-modifier(string.slice($theme, 3)) {
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss
index f9a4ed5..4941ccf 100644
--- a/src/objects/_badge.vars.scss
+++ b/src/objects/_badge.vars.scss
@@ -38,10 +38,6 @@ $sizes: (
     'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl,
 ) !default;
 
-$key-focus--label-color:   props.def(--o-badge--key-focus--label-color, props.get(core.$theme, --focus, --text)) !default;
-$key-focus--border-color:  props.def(--o-badge--key-focus--border-color, props.get(core.$theme, --focus, --border)) !default;
-$key-focus--outline-color: props.def(--o-badge--key-focus--outline-color, props.get(core.$theme, --focus, --outline)) !default;
-
 $default-theme-override: () !default;
 $default-theme: props.def(--o-badge, (
     --bg:    props.get(core.$theme, --text-mute),
@@ -57,6 +53,12 @@ $default-theme: props.def(--o-badge, (
         --label: props.get(core.$theme, --bg-l2),
     ),
 
+    --key-focus: (
+        --label:   props.get(core.$theme, --focus, --text),
+        --border:  props.get(core.$theme, --focus, --border),
+        --outline: props.get(core.$theme, --focus, --outline),
+    ),
+
     --quiet: (
         --bg:    props.get(core.$theme, --border-mute),
         --label: props.get(core.$theme, --heading),
@@ -117,36 +119,36 @@ $static-themes: props.def(--o-badge);
     ));
 }
 
-$themes-config: --accent --positive --negative --warning !default;
+$themes-config: accent positive negative warning !default;
 
 $themes: props.def(--o-badge);
 
 @each $theme in $themes-config {
     $themes: props.merge($themes, (
-        $theme: (
-            --bg:    props.get(core.$static-colors, $theme, --900),
-            --label: props.get(core.$static-colors, $theme, --900-text),
+        --#{$theme}: (
+            --bg:    props.get(core.$theme, --#{$theme}-static, --900),
+            --label: props.get(core.$theme, --#{$theme}-static, --900-text),
             
             --hover: (
-                --bg:    props.get(core.$static-colors, $theme, --1000),
-                --label: props.get(core.$static-colors, $theme, --1000-text),
+                --bg:    props.get(core.$theme, --#{$theme}-static, --1000),
+                --label: props.get(core.$theme, --#{$theme}-static, --1000-text),
             ),
 
             --active: (
-                --bg:    props.get(core.$static-colors, $theme, --1100),
-                --label: props.get(core.$static-colors, $theme, --1000-text),
+                --bg:    props.get(core.$theme, --#{$theme}-static, --1100),
+                --label: props.get(core.$theme, --#{$theme}-static, --1000-text),
             ),
 
             --quiet: (
-                --bg:    props.get(core.$theme, $theme, --200),
-                --label: props.get(core.$theme, $theme, --1100),
+                --bg:    props.get(core.$theme, --#{$theme}, --200),
+                --label: props.get(core.$theme, --#{$theme}, --1100),
                 --hover: (
-                    --bg:    props.get(core.$theme, $theme, --300),
-                    --label: props.get(core.$theme, $theme, --1200),
+                    --bg:    props.get(core.$theme, --#{$theme}, --300),
+                    --label: props.get(core.$theme, --#{$theme}, --1200),
                 ),
                 --active: (
-                    --bg:    props.get(core.$theme, $theme, --400),
-                    --label: props.get(core.$theme, $theme, --1300),
+                    --bg:    props.get(core.$theme, --#{$theme}, --400),
+                    --label: props.get(core.$theme, --#{$theme}, --1300),
                 ),
             )
         )
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index 7640e57..cc82d46 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -139,26 +139,26 @@ $static-themes: props.def(--o-button);
     ));
 }
 
-$themes-config: --accent --negative !default;
+$themes-config: accent negative !default;
 
 $themes: props.def(--o-button);
 
 @each $theme in $themes-config {
     $themes: props.merge($themes, (
-        $theme: (
-            --bg:             props.get(core.$static-colors, $theme, --900),
-            --label:          props.get(core.$static-colors, $theme, --900-text),
-            --outline-border: props.get(core.$theme, $theme, --900),
-            --outline-label:  props.get(core.$theme, $theme, --1000),
+        --#{$theme}: (
+            --bg:             props.get(core.$theme, --#{$theme}-static, --900),
+            --label:          props.get(core.$theme, --#{$theme}-static, --900-text),
+            --outline-border: props.get(core.$theme, --#{$theme}, --900),
+            --outline-label:  props.get(core.$theme, --#{$theme}, --1000),
 
             --hover: (
-                --bg:     props.get(core.$static-colors, $theme, --1000),
-                --label:  props.get(core.$static-colors, $theme, --1000-text),
+                --bg:     props.get(core.$theme, --#{$theme}-static, --1000),
+                --label:  props.get(core.$theme, --#{$theme}-static, --1000-text),
             ),
 
             --active: (
-                --bg:     props.get(core.$static-colors, $theme, --1100),
-                --label:  props.get(core.$static-colors, $theme, --1100-text),
+                --bg:     props.get(core.$theme, --#{$theme}-static, --1100),
+                --label:  props.get(core.$theme, --#{$theme}-static, --1100-text),
             ),
         )
     ));
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
index 01c4b92..4a55f36 100644
--- a/src/objects/_divider.vars.scss
+++ b/src/objects/_divider.vars.scss
@@ -46,15 +46,15 @@ $static-themes: props.def(--o-divider);
     ));
 }
 
-$themes-config: --accent --negative !default;
+$themes-config: accent negative !default;
 
 $themes: props.def(--o-divider);
 
 @each $theme in $themes-config {
     $themes: props.merge($themes, (
-        $theme: (
-            --bg:    props.get(core.$theme, $theme, --800),
-            --label: props.get(core.$theme, $theme, --1000),
+        --#{$theme}: (
+            --bg:    props.get(core.$theme, --#{$theme}, --800),
+            --label: props.get(core.$theme, --#{$theme}, --1000),
         )
     ));
 }
diff --git a/src/objects/_field-label.vars.scss b/src/objects/_field-label.vars.scss
index 699836e..d39aa2d 100644
--- a/src/objects/_field-label.vars.scss
+++ b/src/objects/_field-label.vars.scss
@@ -8,5 +8,5 @@ $hint-font-size:  props.def(--o-field-label--hint-font-size, props.get(core.$fon
 
 $label-color:      props.def(--o-field-label--label-color, props.get(core.$theme, --text-mute)) !default;
 $hint-color:       props.def(--o-field-label--hint-color, props.get(core.$theme, --text-mute)) !default;
-$error-hint-color: props.def(--o-field-label--hint-color, props.get(core.$theme, --negative, --900)) !default;
+$error-hint-color: props.def(--o-field-label--error-hint-color, props.get(core.$theme, --negative, --900)) !default;
 $disabled-color:   props.def(--o-field-label--disabled-color, props.get(core.$theme, --text-disabled)) !default;
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index d83b297..00c0881 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -52,7 +52,7 @@
                             $key: list.nth(map.keys($contrasts), $i);
             
                             &:nth-child(#{$i}) {
-                                background-color: props.get(core.$static-colors, $palette-name, $key);
+                                background-color: props.get(core.$theme, #{$palette-name}-static, $key);
                             }
                         }
                     }
diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss
index 3d0ef2d..6d8abdd 100644
--- a/src/objects/_text-field.vars.scss
+++ b/src/objects/_text-field.vars.scss
@@ -12,9 +12,9 @@ $extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--5
 
 $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;
+$key-focus--border-width: props.def(--o-text-field--key-focus--border-width, props.get(core.$key-focus--outline-width)) !default;
 
-$bg-color:          props.def(--o-text-field--bg-color, props.get(core.$theme, --bg)) !default;
+$bg-color:          props.def(--o-text-field--bg-color, props.get(core.$theme, --base, --50)) !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;
diff --git a/src/scopes/_blockquotes.vars.scss b/src/scopes/_blockquotes.vars.scss
index 39d90bd..f2cf935 100644
--- a/src/scopes/_blockquotes.vars.scss
+++ b/src/scopes/_blockquotes.vars.scss
@@ -8,4 +8,4 @@ $border-width: props.def(--s-blockquotes--border-width, props.get(core.$border-w
 
 $compact--indent: props.def(--s-blockquotes--compact--indent, props.get(core.$list--compact-indent)) !default;
 
-$border-color: props.def(--s-blockquotes--border-width, props.get(core.$theme, --border)) !default;
+$border-color: props.def(--s-blockquotes--border-color, props.get(core.$theme, --border)) !default;
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index 4bb3482..d66950a 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -61,6 +61,7 @@
         font-weight:           props.get(vars.$heading--font-weight);
         font-feature-settings: props.get(vars.$heading--feature-settings);
         line-height:           props.get(vars.$heading--line-height);
+        color:                 props.get(vars.$heading--color);
 
         & + & {
             margin-block-start: props.get(vars.$heading--margin-bs-sibling);
diff --git a/src/scopes/_implicit.vars.scss b/src/scopes/_implicit.vars.scss
index f0eb45d..7390672 100644
--- a/src/scopes/_implicit.vars.scss
+++ b/src/scopes/_implicit.vars.scss
@@ -22,3 +22,5 @@ $heading--line-height:       props.def(--s-implicit--heading--line-height, props
 $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;
+
+$heading--color: props.def(--s-implicit--heading--color, props.get(core.$theme, --heading));
diff --git a/src_demo/index.scss b/src_demo/index.scss
index 7fc1d99..3611d71 100644
--- a/src_demo/index.scss
+++ b/src_demo/index.scss
@@ -18,6 +18,7 @@
 @include iro.l-media--styles;
 @include iro.l-overflow--styles;
 
+@include iro.o-icon--styles;
 @include iro.o-action-button--styles;
 @include iro.o-alert--styles;
 @include iro.o-avatar--styles;
@@ -30,7 +31,6 @@
 @include iro.o-emoji--styles;
 @include iro.o-field-label--styles;
 @include iro.o-heading--styles;
-@include iro.o-icon--styles;
 @include iro.o-lightbox--styles;
 @include iro.o-menu--styles;
 @include iro.o-palette--styles;
diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug
index 6fa0ce9..8fbf9ea 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(--static-colors--blue--${bg});`)
+            .c-box(style=`background-color: var(--colors--blue-static--${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(--static-colors--blue--${bg});`)
+            .c-box(style=`background-color: var(--colors--blue-static--${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 90fdabe..cc1f346 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(--static-colors--blue--${bg});`)
+            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
                 +badge(theme)(href='#')= 'new'
                 = ' '
                 +badge(theme)(quiet=true href='#')= 'new'
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index 04414a4..edd8ef6 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(--static-colors--blue--${bg});`)
+            .c-box(style=`background-color: var(--colors--blue-static--${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(--static-colors--blue--${bg});`)
+            .c-box(style=`background-color: var(--colors--blue-static--${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 b5b6d70..e2f2e01 100644
--- a/tpl/views/divider.pug
+++ b/tpl/views/divider.pug
@@ -36,7 +36,7 @@ mixin view-divider
             -
                 const bg = theme.startsWith('static-black') ? 500 : 1000;
 
-            .c-box(style=`background-color: var(--static-colors--blue--${bg});`)
+            .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
                 +divider('strong')(color=theme)= 'Strong'
                 +divider('medium')(color=theme)= 'Medium'
                 +divider('faint')(color=theme)= 'Faint'