From 4ef7ba48a68980c126b89bf5ba5a9ddac804f88f Mon Sep 17 00:00:00 2001 From: Volpeon Date: Sun, 17 Nov 2024 15:51:24 +0100 Subject: Add navbar --- src/objects/_navbar.vars.scss | 83 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 src/objects/_navbar.vars.scss (limited to 'src/objects/_navbar.vars.scss') 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'); -- cgit v1.2.3-70-g09d2