From 5650fe9589ed6043f461b6b60e1303045a4ec6c4 Mon Sep 17 00:00:00 2001
From: Volpeon <git@volpeon.ink>
Date: Tue, 11 Nov 2025 21:27:14 +0100
Subject: Navbar

---
 src/objects/_navbar.scss      | 68 +++++++++++++++++++++++++++++++------------
 src/objects/_navbar.vars.scss | 50 ++++++++++++++++++-------------
 2 files changed, 79 insertions(+), 39 deletions(-)

(limited to 'src/objects')

diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss
index ce500f3..59613fa 100644
--- a/src/objects/_navbar.scss
+++ b/src/objects/_navbar.scss
@@ -17,18 +17,20 @@
 
 		@include bem.elem('item-label') {
 			order:              2;
-			margin-block-start: props.get(vars.$item--pad-b);
+			margin-block-start: props.get(vars.$item--pad-b-icon);
 			font-size:          props.get(vars.$item--label-font-size);
 			font-weight:        bold;
+			color:              props.get(vars.$default-theme, --disabled, --label-color);
 
 			@include bem.next-elem('item-content') {
+				padding-block:  props.get(vars.$item--pad-b-icon);
 				padding-inline: props.get(vars.$item--pad-i-icon);
+				font-size:      props.get(vars.$item--icon-size);
 			}
 		}
 
 		@include bem.elem('item-content-text') {
 			margin-inline: props.get(vars.$item--pad-i-label);
-			font-size:     props.get(vars.$item--font-size);
 		}
 
 		@include bem.elem('item-content') {
@@ -36,7 +38,8 @@
 			order:           1;
 			padding-block:   props.get(vars.$item--pad-b);
 			padding-inline:  props.get(vars.$item--pad-i);
-			color:           props.get(vars.$default-theme, --disabled, --label-color);
+			font-size:       props.get(vars.$item--font-size);
+			color:           props.get(vars.$default-theme, --disabled, --text-color);
 			white-space:     nowrap;
 			border-radius:   100em;
 
@@ -71,19 +74,31 @@
 			&:link,
 			&:visited,
 			&:enabled {
-				@include bem.elem('item-content') {
+				@include bem.elem('item-label') {
 					color: props.get(vars.$default-theme, --label-color);
 				}
 
+				@include bem.elem('item-content') {
+					color: props.get(vars.$default-theme, --text-color);
+				}
+
 				&:hover,
 				&:focus-visible {
+					@include bem.elem('item-label') {
+						color: props.get(vars.$default-theme, --hover, --label-color);
+					}
+
 					@include bem.elem('item-content') {
-						color:            props.get(vars.$default-theme, --hover, --label-color);
+						color:            props.get(vars.$default-theme, --hover, --text-color);
 						background-color: props.get(vars.$default-theme, --hover, --bg-color);
 					}
 				}
 
 				&:focus-visible {
+					@include bem.elem('item-label') {
+						color: props.get(vars.$default-theme, --key-focus, --label);
+					}
+					
 					@include bem.elem('item-content') {
 						&::after {
 							visibility: visible;
@@ -92,8 +107,12 @@
 				}
 
 				&:active {
+					@include bem.elem('item-label') {
+						color: props.get(vars.$default-theme, --active, --label-color);
+					}
+
 					@include bem.elem('item-content') {
-						color:            props.get(vars.$default-theme, --active, --label-color);
+						color:            props.get(vars.$default-theme, --active, --text-color);
 						background-color: props.get(vars.$default-theme, --active, --bg-color);
 					}
 				}
@@ -102,30 +121,46 @@
 			@include bem.is('selected') {
 				font-weight: bold;
 
+				@include bem.elem('item-label') {
+					color: props.get(vars.$default-theme, --selected, --disabled, --label-color);
+				}
+
 				@include bem.elem('item-content') {
-					color:            props.get(vars.$default-theme, --selected, --disabled, --label-color);
+					color:            props.get(vars.$default-theme, --selected, --disabled, --text-color);
 					background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color);
 				}
 
 				&:link,
 				&:visited,
 				&:enabled {
+					@include bem.elem('item-label') {
+						color: props.get(vars.$default-theme, --selected, --label-color);
+					}
+
 					@include bem.elem('item-content') {
-						color:            props.get(vars.$default-theme, --selected, --label-color);
+						color:            props.get(vars.$default-theme, --selected, --text-color);
 						background-color: props.get(vars.$default-theme, --selected, --bg-color);
 					}
 
 					&:hover,
 					&:focus-visible {
+						@include bem.elem('item-label') {
+							color: props.get(vars.$default-theme, --selected, --hover, --label-color);
+						}
+
 						@include bem.elem('item-content') {
-							color:            props.get(vars.$default-theme, --selected, --hover, --label-color);
+							color:            props.get(vars.$default-theme, --selected, --hover, --text-color);
 							background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color);
 						}
 					}
 
 					&:active {
+						@include bem.elem('item-label') {
+							color: props.get(vars.$default-theme, --selected, --active, --label-color);
+						}
+
 						@include bem.elem('item-content') {
-							color:            props.get(vars.$default-theme, --selected, --active, --label-color);
+							color:            props.get(vars.$default-theme, --selected, --active, --text-color);
 							background-color: props.get(vars.$default-theme, --selected, --active, --bg-color);
 						}
 					}
@@ -144,12 +179,7 @@
 		}
 
 		@include bem.modifier('adapt') {
-			gap:        props.get(vars.$spacing);
 			block-size: 100%;
-
-			@include bem.elem('item') {
-				padding-inline: 0;
-			}
 		}
 
 
@@ -161,7 +191,7 @@
 			@include bem.elem('item') {
 				@include bem.is('selected') {
 					@include bem.elem('item-content') {
-						color:            props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color);
+						color:            props.get(vars.$default-theme, --quiet, --selected, --disabled, --text-color);
 						background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color);
 					}
 
@@ -169,21 +199,21 @@
 					&:visited,
 					&:enabled {
 						@include bem.elem('item-content') {
-							color:            props.get(vars.$default-theme, --quiet, --selected, --label-color);
+							color:            props.get(vars.$default-theme, --quiet, --selected, --text-color);
 							background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color);
 						}
 
 						&:hover,
 						&:focus-visible {
 							@include bem.elem('item-content') {
-								color:            props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color);
+								color:            props.get(vars.$default-theme, --quiet, --selected, --hover, --text-color);
 								background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color);
 							}
 						}
 
 						&:active {
 							@include bem.elem('item-content') {
-								color:            props.get(vars.$default-theme, --quiet, --selected, --active, --label-color);
+								color:            props.get(vars.$default-theme, --quiet, --selected, --active, --text-color);
 								background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color);
 							}
 						}
diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss
index 4f5cde3..1cf460e 100644
--- a/src/objects/_navbar.vars.scss
+++ b/src/objects/_navbar.vars.scss
@@ -3,14 +3,16 @@
 @use 'iro-sass/src/props';
 @use '../core.vars' as core;
 
-$block-size: props.def(--o-navbar--block-size, props.get(core.$size--800)) !default;
+$block-size: props.def(--o-navbar--block-size, props.get(core.$size--1000)) !default;
 $spacing:    props.def(--o-navbar--spacing, props.get(core.$size--100)) !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--75)) !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;
@@ -19,20 +21,24 @@ $key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props
 
 $default-theme-override: () !default;
 $default-theme: map.deep-merge((
-	--label-color:  props.get(core.$theme, --text),
+	--text-color:  props.get(core.$theme, --text),
+	--label-color:  props.get(core.$theme, --text-mute),
 
 	--hover: (
 		--bg-color:    props.get(core.$theme, --border-mute),
-		--label-color: props.get(core.$theme, --heading),
+		--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: (
-		--label-color: props.get(core.$theme, --border-strong),
+		--text-color:   props.get(core.$theme, --border-strong),
+		--label-color:  props.get(core.$theme, --text-disabled),
 	),
 
 	--key-focus: (
@@ -42,43 +48,47 @@ $default-theme: map.deep-merge((
 	),
 
 	--selected: (
-		--bg-color:     props.get(core.$theme, --heading),
-		--label-color:  props.get(core.$theme, --base, --50),
+		--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.$theme, --text),
-			--label-color:  props.get(core.$theme, --base, --50),
+			--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.$theme, --text-mute),
-			--label-color:  props.get(core.$theme, --base, --50),
+			--bg-color:    props.get(core.$theme, --text-mute),
+			--text-color:  props.get(core.$theme, --base, --50),
+			--label-color: props.get(core.$theme, --heading),
 		),
 
 		--disabled: (
-			--bg-color:     props.get(core.$theme, --border-mute),
-			--label-color:  props.get(core.$theme, --border-strong),
+			--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.$theme, --accent, --200),
-			--label-color:  props.get(core.$theme, --accent, --1100),
+			--bg-color:     props.get(core.$theme, --border-mute),
+			--text-color:  props.get(core.$theme, --heading),
 
 			--hover: (
-				--bg-color:     props.get(core.$theme, --accent, --300),
-				--label-color:  props.get(core.$theme, --accent, --1200),
+				--bg-color:     props.get(core.$theme, --border-mute),
+				--text-color:  props.get(core.$theme, --heading),
 			),
     
 			--active: (
-				--bg-color:     props.get(core.$theme, --accent, --400),
-				--label-color:  props.get(core.$theme, --accent, --1300),
+				--bg-color:     props.get(core.$theme, --border-mute),
+				--text-color:  props.get(core.$theme, --heading),
 			),
 
 			--disabled: (
-				--bg-color:     props.get(core.$theme, --accent, --200),
-				--label-color:  props.get(core.$theme, --accent, --800),
+				--bg-color:     props.get(core.$theme, --border-mute),
+				--text-color:  props.get(core.$theme, --border-strong),
 			),
 		)
 	)
-- 
cgit v1.2.3-70-g09d2