From 42dbc8cf369ba13216cfa45580fae0641badccd8 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Tue, 27 Jan 2026 16:01:32 +0100
Subject: o-navbar: Add static color themes

---
 src/objects/_navbar.vars.scss | 86 ++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 84 insertions(+), 2 deletions(-)

(limited to 'src/objects/_navbar.vars.scss')

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),
+					),
+				)
+			)
+		)
+	));
+}
-- 
cgit v1.2.3-70-g09d2