1 files changed, 84 insertions, 2 deletions

diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss
index 18f30d6..ad7bc51 100644
--- a/src/objects/_navbar.vars.scss
+++ b/src/objects/_navbar.vars.scss
@@ -19,6 +19,8 @@ $key-focus--border-width:  props.def(--o-navbar--key-focus--border-width, props.
 $key-focus--border-offset: props.def(--o-navbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
 $key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
 
+$themes: props.def(--o-navbar, (), 'color');
+
 $default-theme-override: () !default;
 $default-theme: map.deep-merge((
         --text-color:  props.get(core.$theme, --text),
@@ -77,12 +79,12 @@ $default-theme: map.deep-merge((
                         --text-color:  props.get(core.$theme, --heading),
 
                         --hover: (
-                                --bg-color:     props.get(core.$theme, --border-mute),
+                                --bg-color:     props.get(core.$theme, --border),
                                 --text-color:  props.get(core.$theme, --heading),
                         ),
     
                         --active: (
-                                --bg-color:     props.get(core.$theme, --border-mute),
+                                --bg-color:     props.get(core.$theme, --border-strong),
                                 --text-color:  props.get(core.$theme, --heading),
                         ),
 
@@ -94,3 +96,83 @@ $default-theme: map.deep-merge((
         )
 ), $default-theme-override) !default;
 $default-theme: props.def(--o-navbar, $default-theme, 'color');
+
+@each $theme in map.keys(props.get(core.$transparent-colors)) {
+        $nav-theme: --static-#{string.slice($theme, 3)};
+
+        $themes: props.merge($themes, (
+                $nav-theme: (
+                        --text-color:  props.get(core.$transparent-colors, $theme, --800),
+                        --label-color: props.get(core.$transparent-colors, $theme, --700),
+
+                        --hover: (
+                                --bg-color:    props.get(core.$transparent-colors, $theme, --300),
+                                --text-color:  props.get(core.$transparent-colors, $theme, --900),
+                                --label-color: props.get(core.$transparent-colors, $theme, --800),
+                        ),
+
+                        --active: (
+                                --bg-color:    props.get(core.$transparent-colors, $theme, --400),
+                                --text-color:  props.get(core.$transparent-colors, $theme, --900),
+                                --label-color: props.get(core.$transparent-colors, $theme, --900),
+                        ),
+
+                        --disabled: (
+                                --text-color:   props.get(core.$transparent-colors, $theme, --500),
+                                --label-color:  props.get(core.$transparent-colors, $theme, --500),
+                        ),
+
+                        --key-focus: (
+                                --label:   props.get(core.$transparent-colors, $theme, --800),
+                                --border:  props.get(core.$transparent-colors, $theme, --900),
+                                --outline: props.get(core.$transparent-colors, $theme, --300),
+                        ),
+
+                        --selected: (
+                                --bg-color:    props.get(core.$transparent-colors, $theme, --800),
+                                --text-color:  props.get(core.$transparent-colors, $theme, --text),
+                                --label-color: props.get(core.$transparent-colors, $theme, --800),
+
+                                --hover: (
+                                        --bg-color:    props.get(core.$transparent-colors, $theme, --900),
+                                        --text-color:  props.get(core.$transparent-colors, $theme, --text),
+                                        --label-color: props.get(core.$transparent-colors, $theme, --900),
+                                ),
+
+                                --active: (
+                                        --bg-color:    props.get(core.$transparent-colors, $theme, --900),
+                                        --text-color:  props.get(core.$transparent-colors, $theme, --text),
+                                        --label-color: props.get(core.$transparent-colors, $theme, --900),
+                                ),
+
+                                --disabled: (
+                                        --bg-color:    props.get(core.$transparent-colors, $theme, --200),
+                                        --text-color:  props.get(core.$transparent-colors, $theme, --500),
+                                        --label-color: props.get(core.$transparent-colors, $theme, --100),
+                                ),
+                        ),
+
+                        --quiet: (
+                                --selected: (
+                                        --bg-color:    props.get(core.$transparent-colors, $theme, --200),
+                                        --text-color:  props.get(core.$transparent-colors, $theme, --900),
+
+                                        --hover: (
+                                                --bg-color:    props.get(core.$transparent-colors, $theme, --300),
+                                                --text-color:  props.get(core.$transparent-colors, $theme, --900),
+                                        ),
+                        
+                                        --active: (
+                                                --bg-color:    props.get(core.$transparent-colors, $theme, --400),
+                                                --text-color:  props.get(core.$transparent-colors, $theme, --900),
+                                        ),
+
+                                        --disabled: (
+                                                --bg-color:    props.get(core.$transparent-colors, $theme, --100),
+                                                --text-color:  props.get(core.$transparent-colors, $theme, --500),
+                                        ),
+                                )
+                        )
+                )
+        ));
+}