From cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Wed, 22 Jul 2026 12:27:09 +0200
Subject: Paths

---
 src/objects/_navbar.vars.scss | 332 +++++++++++++++++++++++++-----------------
 1 file changed, 198 insertions(+), 134 deletions(-)

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

diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss
index e96b714..b7d7e16 100644
--- a/src/objects/_navbar.vars.scss
+++ b/src/objects/_navbar.vars.scss
@@ -1,178 +1,242 @@
-@use 'sass:map';
-@use 'sass:string';
-@use 'pkg:iro-sass/src/props';
-@use '../core.vars' as core;
+@use "sass:map";
+@use "sass:string";
+@use "pkg:iro-sass/props";
+@use "../core.vars" as core;
 
 $block-size: props.def(--o-navbar--block-size, props.get(core.$size--1000)) !default;
-$spacing:    props.def(--o-navbar--spacing, props.get(core.$size--50)) !default;
-
-$item--pad-i:           props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default;
-$item--pad-i-label:     props.def(--o-navbar--item--pad-i-label, props.get(core.$size--75)) !default;
-$item--pad-i-icon:      props.def(--o-navbar--item--pad-i-icon, props.get(core.$size--250)) !default;
-$item--pad-b:           props.def(--o-navbar--item--pad-b, props.get(core.$size--75)) !default;
-$item--pad-b-icon:      props.def(--o-navbar--item--pad-b-icon, props.get(core.$size--40)) !default;
-$item--font-size:       props.def(--o-navbar--item--font-size, props.get(core.$font-size--100)) !default;
-$item--icon-size:       props.def(--o-navbar--item--icon-size, props.get(core.$font-size--200)) !default;
-$item--label-font-size: props.def(--o-navbar--item--label-font-size, props.get(core.$font-size--50)) !default;
-
-$key-focus--border-width:  props.def(--o-navbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
-$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');
+$spacing: props.def(--o-navbar--spacing, props.get(core.$size--50)) !default;
+
+$item--pad-i: props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default;
+$item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--75)) !default;
+$item--pad-i-icon: props.def(--o-navbar--item--pad-i-icon, props.get(core.$size--250)) !default;
+$item--pad-b: props.def(--o-navbar--item--pad-b, props.get(core.$size--75)) !default;
+$item--pad-b-icon: props.def(--o-navbar--item--pad-b-icon, props.get(core.$size--40)) !default;
+$item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--100)) !default;
+$item--icon-size: props.def(--o-navbar--item--icon-size, props.get(core.$font-size--200)) !default;
+$item--label-font-size: props.def(
+	--o-navbar--item--label-font-size,
+	props.get(core.$font-size--50)
+) !default;
+
+$key-focus--border-width: props.def(
+	--o-navbar--key-focus--border-width,
+	props.get(core.$key-focus--border-width)
+) !default;
+$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),
-	--label-color:  props.get(core.$theme, --text-mute),
-
-	--hover: (
-		--bg-color:    props.get(core.$theme, --border-mute),
-		--text-color:  props.get(core.$theme, --heading),
-		--label-color: props.get(core.$theme, --text),
-	),
-
-	--active: (
-		--bg-color:    props.get(core.$theme, --border),
-		--text-color:  props.get(core.$theme, --heading),
-		--label-color: props.get(core.$theme, --heading),
-	),
-
-	--disabled: (
-		--text-color:   props.get(core.$theme, --border-strong),
-		--label-color:  props.get(core.$theme, --text-disabled),
-	),
-
-	--key-focus: (
-		--label:   props.get(core.$theme, --focus, --text),
-		--border:  props.get(core.$theme, --focus, --border),
-		--outline: props.get(core.$theme, --focus, --outline),
-	),
-
-	--selected: (
-		--bg-color:    props.get(core.$theme, --heading),
-		--text-color:  props.get(core.$theme, --base, --50),
-		--label-color: props.get(core.$theme, --heading),
-
+$default-theme: map.deep-merge(
+	(
+		--text-color: props.get(core.$theme, --text),
+		--label-color: props.get(core.$theme, --text-mute),
 		--hover: (
-			--bg-color:    props.get(core.$theme, --text),
-			--text-color:  props.get(core.$theme, --base, --50),
-			--label-color: props.get(core.$theme, --heading),
+			--bg-color: props.get(core.$theme, --border-mute),
+			--text-color: props.get(core.$theme, --heading),
+			--label-color: props.get(core.$theme, --text),
 		),
 
 		--active: (
-			--bg-color:    props.get(core.$theme, --text-mute),
-			--text-color:  props.get(core.$theme, --base, --50),
+			--bg-color: props.get(core.$theme, --border),
+			--text-color: props.get(core.$theme, --heading),
 			--label-color: props.get(core.$theme, --heading),
 		),
 
 		--disabled: (
-			--bg-color:    props.get(core.$theme, --border-mute),
-			--text-color:  props.get(core.$theme, --border-strong),
+			--text-color: props.get(core.$theme, --border-strong),
 			--label-color: props.get(core.$theme, --text-disabled),
 		),
-	),
-
-	--quiet: (
-		--selected: (
-			--bg-color:     props.get(core.$theme, --border-mute),
-			--text-color:  props.get(core.$theme, --heading),
 
-			--hover: (
-				--bg-color:     props.get(core.$theme, --border),
-				--text-color:  props.get(core.$theme, --heading),
-			),
-
-			--active: (
-				--bg-color:     props.get(core.$theme, --border-strong),
-				--text-color:  props.get(core.$theme, --heading),
-			),
-
-			--disabled: (
-				--bg-color:     props.get(core.$theme, --border-mute),
-				--text-color:  props.get(core.$theme, --border-strong),
-			),
-		)
-	)
-), $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),
+		--key-focus: (
+			--label: props.get(core.$theme, --focus, --text),
+			--border: props.get(core.$theme, --focus, --border),
+			--outline: props.get(core.$theme, --focus, --outline),
+		),
 
+		--selected: (
+			--bg-color: props.get(core.$theme, --heading),
+			--text-color: props.get(core.$theme, --base, --50),
+			--label-color: props.get(core.$theme, --heading),
 			--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),
+				--bg-color: props.get(core.$theme, --text),
+				--text-color: props.get(core.$theme, --base, --50),
+				--label-color: props.get(core.$theme, --heading),
 			),
 
 			--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),
+				--bg-color: props.get(core.$theme, --text-mute),
+				--text-color: props.get(core.$theme, --base, --50),
+				--label-color: props.get(core.$theme, --heading),
 			),
 
 			--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),
+				--bg-color: props.get(core.$theme, --border-mute),
+				--text-color: props.get(core.$theme, --border-strong),
+				--label-color: props.get(core.$theme, --text-disabled),
 			),
+		),
 
+		--quiet: (
 			--selected: (
-				--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, --800),
-
+				--bg-color: props.get(core.$theme, --border-mute),
+				--text-color: props.get(core.$theme, --heading),
 				--hover: (
-					--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, --900),
+					--bg-color: props.get(core.$theme, --border),
+					--text-color: props.get(core.$theme, --heading),
 				),
 
 				--active: (
-					--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, --900),
+					--bg-color: props.get(core.$theme, --border-strong),
+					--text-color: props.get(core.$theme, --heading),
 				),
 
 				--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),
+					--bg-color: props.get(core.$theme, --border-mute),
+					--text-color: props.get(core.$theme, --border-strong),
 				),
 			),
+		),
+	),
+	$default-theme-override
+) !default;
+$default-theme: props.def(--o-navbar, $default-theme, "color");
 
-			--quiet: (
-				--selected: (
-					--bg-color:    props.get(core.$transparent-colors, $theme, --300),
-					--text-color:  props.get(core.$transparent-colors, $theme, --900),
+@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, --400),
-						--text-color:  props.get(core.$transparent-colors, $theme, --900),
-					),
+							--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, --500),
-						--text-color:  props.get(core.$transparent-colors, $theme, --900),
-					),
+							--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: (
-						--bg-color:    props.get(core.$transparent-colors, $theme, --100),
-						--text-color:  props.get(core.$transparent-colors, $theme, --500),
-					),
-				)
-			)
+							--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, --900),
+							--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, --800),
+									--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, --800),
+									--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, --300),
+									--text-color: props.get(
+											core.$transparent-colors,
+											$theme,
+											--900
+										),
+									--hover: (
+											--bg-color: props.get(
+													core.$transparent-colors,
+													$theme,
+													--400
+												),
+											--text-color: props.get(
+													core.$transparent-colors,
+													$theme,
+													--900
+												),
+										),
+
+									--active: (
+											--bg-color: props.get(
+													core.$transparent-colors,
+													$theme,
+													--500
+												),
+											--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.3.1