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.scss      | 274 +++++++++++++++++++++++-------------------
 src/objects/_navbar.vars.scss |  86 ++++++++++++-
 2 files changed, 236 insertions(+), 124 deletions(-)

(limited to 'src/objects')

diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss
index 59613fa..ae18614 100644
--- a/src/objects/_navbar.scss
+++ b/src/objects/_navbar.scss
@@ -1,3 +1,4 @@
+@use 'sass:list';
 @use 'sass:map';
 @use 'sass:meta';
 @use 'sass:string';
@@ -8,6 +9,151 @@
 @forward 'navbar.vars';
 @use 'navbar.vars' as vars;
 
+@mixin -apply-theme($theme, $key: ()) {
+	@include bem.elem('item-label') {
+		color: props.get($theme, list.join($key, --disabled --label-color)...);
+	}
+
+	@include bem.elem('item-content') {
+		color: props.get($theme, list.join($key, --disabled --text-color)...);
+
+		&::after {
+			outline: props.get($theme, list.join($key, --key-focus --border)...) solid props.get(vars.$key-focus--border-width);
+			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)...);
+		}
+	}
+
+	@include bem.elem('item') {
+		&:link,
+		&:visited,
+		&:enabled {
+			@include bem.elem('item-label') {
+				color: props.get($theme, list.join($key, --label-color)...);
+			}
+
+			@include bem.elem('item-content') {
+				color: props.get($theme, list.join($key, --text-color)...);
+			}
+
+			&:hover,
+			&:focus-visible {
+				@include bem.elem('item-label') {
+					color: props.get($theme, list.join($key, --hover --label-color)...);
+				}
+
+				@include bem.elem('item-content') {
+					color:            props.get($theme, list.join($key, --hover --text-color)...);
+					background-color: props.get($theme, list.join($key, --hover --bg-color)...);
+				}
+			}
+
+			&:focus-visible {
+				@include bem.elem('item-label') {
+					color: props.get($theme, list.join($key, --key-focus --label)...);
+				}
+			}
+
+			&:active {
+				@include bem.elem('item-label') {
+					color: props.get($theme, list.join($key, --active --label-color)...);
+				}
+
+				@include bem.elem('item-content') {
+					color:            props.get($theme, list.join($key, --active --text-color)...);
+					background-color: props.get($theme, list.join($key, --active --bg-color)...);
+				}
+			}
+		}
+
+		@include bem.is('selected') {
+			@include bem.elem('item-label') {
+				color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
+			}
+
+			@include bem.elem('item-content') {
+				color:            props.get($theme, list.join($key, --selected --disabled --text-color)...);
+				background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
+			}
+
+			&:link,
+			&:visited,
+			&:enabled {
+				@include bem.elem('item-label') {
+					color: props.get($theme, list.join($key, --selected --label-color)...);
+				}
+
+				@include bem.elem('item-content') {
+					color:            props.get($theme, list.join($key, --selected --text-color)...);
+					background-color: props.get($theme, list.join($key, --selected --bg-color)...);
+				}
+
+				&:hover,
+				&:focus-visible {
+					@include bem.elem('item-label') {
+						color: props.get($theme, list.join($key, --selected --hover --label-color)...);
+					}
+
+					@include bem.elem('item-content') {
+						color:            props.get($theme, list.join($key, --selected --hover --text-color)...);
+						background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
+					}
+				}
+
+				&:active {
+					@include bem.elem('item-label') {
+						color: props.get($theme, list.join($key, --selected --active --label-color)...);
+					}
+
+					@include bem.elem('item-content') {
+						color:            props.get($theme, list.join($key, --selected --active --text-color)...);
+						background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
+					}
+				}
+			}
+		}
+	}
+
+	@include bem.modifier('quiet') {
+		@include bem.elem('item') {
+			@include bem.is('selected') {
+				@include bem.elem('item-content') {
+					color:            props.get($theme, list.join($key, --quiet --selected --disabled --text-color)...);
+					background-color: props.get($theme, list.join($key, --quiet --selected --disabled --bg-color)...);
+				}
+
+				&:link,
+				&:visited,
+				&:enabled {
+					@include bem.elem('item-content') {
+						color:            props.get($theme, list.join($key, --quiet --selected --text-color)...);
+						background-color: props.get($theme, list.join($key, --quiet --selected --bg-color)...);
+					}
+
+					&:hover,
+					&:focus-visible {
+						@include bem.elem('item-content') {
+							color:            props.get($theme, list.join($key, --quiet --selected --hover --text-color)...);
+							background-color: props.get($theme, list.join($key, --quiet --selected --hover --bg-color)...);
+						}
+					}
+
+					&:active {
+						@include bem.elem('item-content') {
+							color:            props.get($theme, list.join($key, --quiet --selected --active --text-color)...);
+							background-color: props.get($theme, list.join($key, --quiet --selected --active --bg-color)...);
+						}
+					}
+				}
+			}
+		}
+	}
+}
+
 @mixin styles {
 	@include materialize-at-root(meta.module-variables('vars'));
 
@@ -20,7 +166,6 @@
 			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);
@@ -39,7 +184,6 @@
 			padding-block:   props.get(vars.$item--pad-b);
 			padding-inline:  props.get(vars.$item--pad-i);
 			font-size:       props.get(vars.$item--font-size);
-			color:           props.get(vars.$default-theme, --disabled, --text-color);
 			white-space:     nowrap;
 			border-radius:   100em;
 
@@ -50,15 +194,8 @@
 				display:        block;
 				visibility:     hidden;
 				pointer-events: none;
-				outline:        props.get(vars.$default-theme, --key-focus, --border) solid props.get(vars.$key-focus--border-width);
 				content:        '';
 				border-radius:  100em;
-				box-shadow:
-					0
-					0
-					0
-					calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
-					props.get(vars.$default-theme, --key-focus, --outline);
 			}
 		}
 
@@ -74,97 +211,25 @@
 			&:link,
 			&:visited,
 			&:enabled {
-				@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, --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;
 						}
 					}
 				}
-
-				&: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, --text-color);
-						background-color: props.get(vars.$default-theme, --active, --bg-color);
-					}
-				}
 			}
 
 			@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, --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, --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, --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 -apply-theme(vars.$default-theme);
 
-						@include bem.elem('item-content') {
-							color:            props.get(vars.$default-theme, --selected, --active, --text-color);
-							background-color: props.get(vars.$default-theme, --selected, --active, --bg-color);
-						}
-					}
-				}
+		@each $theme in map.keys(props.get(vars.$themes)) {
+			@include bem.modifier(string.slice($theme, 3)) {
+				@include -apply-theme(vars.$themes, $theme);
 			}
 		}
 
@@ -186,40 +251,5 @@
 		@include bem.modifier('align-block') {
 			margin-inline: calc(-1 * props.get(vars.$item--pad-i));
 		}
-
-		@include bem.modifier('quiet') {
-			@include bem.elem('item') {
-				@include bem.is('selected') {
-					@include bem.elem('item-content') {
-						color:            props.get(vars.$default-theme, --quiet, --selected, --disabled, --text-color);
-						background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color);
-					}
-
-					&:link,
-					&:visited,
-					&:enabled {
-						@include bem.elem('item-content') {
-							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, --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, --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 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