9 files changed, 85 insertions, 83 deletions

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;