Add navbar

1 files changed, 83 insertions, 0 deletions

diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss
new file mode 100644
index 0000000..dfd683a
--- /dev/null
+++ b/src/objects/_navbar.vars.scss
@@ -0,0 +1,83 @@
+@use 'sass:map';
+@use 'sass:string';
+@use 'iro-sass/src/props';
+@use '../core.vars' as core;
+
+$block-size: props.def(--o-navbar--block-size, props.get(core.$size--700)) !default;
+$spacing:    props.def(--o-tabs--spacing, props.get(core.$size--400)) !default;
+
+$item--pad-i:     props.def(--o-navbar--item--pad-i, props.get(core.$size--175)) !default;
+$item--pad-b:     props.def(--o-navbar--item--pad-b, props.get(core.$size--40)) !default;
+$item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !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;
+
+$default-theme-override: () !default;
+$default-theme: map.deep-merge((
+    --label-color:  props.get(core.$theme, --text),
+
+    --hover: (
+        --bg-color:    props.get(core.$theme, --border-mute),
+        --label-color: props.get(core.$theme, --heading),
+    ),
+
+    --active: (
+        --bg-color:    props.get(core.$theme, --border),
+        --label-color: props.get(core.$theme, --heading),
+    ),
+
+    --disabled: (
+        --label-color: props.get(core.$theme, --border-strong),
+    ),
+
+    --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),
+        --label-color:  props.get(core.$theme, --base, --50),
+
+        --hover: (
+            --bg-color:     props.get(core.$theme, --text),
+            --label-color:  props.get(core.$theme, --base, --50),
+        ),
+
+        --active: (
+            --bg-color:     props.get(core.$theme, --text-mute),
+            --label-color:  props.get(core.$theme, --base, --50),
+        ),
+
+        --disabled: (
+            --bg-color:     props.get(core.$theme, --border-mute),
+            --label-color:  props.get(core.$theme, --border-strong),
+        ),
+    ),
+
+    --quiet: (
+        --selected: (
+            --bg-color:     props.get(core.$theme, --accent, --200),
+            --label-color:  props.get(core.$theme, --accent, --1100),
+
+            --hover: (
+                --bg-color:     props.get(core.$theme, --accent, --300),
+                --label-color:  props.get(core.$theme, --accent, --1200),
+            ),
+    
+            --active: (
+                --bg-color:     props.get(core.$theme, --accent, --400),
+                --label-color:  props.get(core.$theme, --accent, --1300),
+            ),
+
+            --disabled: (
+                --bg-color:     props.get(core.$theme, --accent, --200),
+                --label-color:  props.get(core.$theme, --accent, --800),
+            ),
+        )
+    )
+), $default-theme-override) !default;
+$default-theme: props.def(--o-navbar, $default-theme, 'color');