diff options
Diffstat (limited to 'src/objects/_navbar.vars.scss')
| -rw-r--r-- | src/objects/_navbar.vars.scss | 50 |
1 files changed, 30 insertions, 20 deletions
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 @@ | |||
| 3 | @use 'iro-sass/src/props'; | 3 | @use 'iro-sass/src/props'; |
| 4 | @use '../core.vars' as core; | 4 | @use '../core.vars' as core; |
| 5 | 5 | ||
| 6 | $block-size: props.def(--o-navbar--block-size, props.get(core.$size--800)) !default; | 6 | $block-size: props.def(--o-navbar--block-size, props.get(core.$size--1000)) !default; |
| 7 | $spacing: props.def(--o-navbar--spacing, props.get(core.$size--100)) !default; | 7 | $spacing: props.def(--o-navbar--spacing, props.get(core.$size--100)) !default; |
| 8 | 8 | ||
| 9 | $item--pad-i: props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default; | 9 | $item--pad-i: props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default; |
| 10 | $item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--75)) !default; | 10 | $item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--75)) !default; |
| 11 | $item--pad-i-icon: props.def(--o-navbar--item--pad-i-icon, props.get(core.$size--250)) !default; | 11 | $item--pad-i-icon: props.def(--o-navbar--item--pad-i-icon, props.get(core.$size--250)) !default; |
| 12 | $item--pad-b: props.def(--o-navbar--item--pad-b, props.get(core.$size--75)) !default; | 12 | $item--pad-b: props.def(--o-navbar--item--pad-b, props.get(core.$size--75)) !default; |
| 13 | $item--pad-b-icon: props.def(--o-navbar--item--pad-b-icon, props.get(core.$size--40)) !default; | ||
| 13 | $item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default; | 14 | $item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default; |
| 15 | $item--icon-size: props.def(--o-navbar--item--icon-size, props.get(core.$font-size--200)) !default; | ||
| 14 | $item--label-font-size: props.def(--o-navbar--item--label-font-size, props.get(core.$font-size--50)) !default; | 16 | $item--label-font-size: props.def(--o-navbar--item--label-font-size, props.get(core.$font-size--50)) !default; |
| 15 | 17 | ||
| 16 | $key-focus--border-width: props.def(--o-navbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; | 18 | $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 | |||
| 19 | 21 | ||
| 20 | $default-theme-override: () !default; | 22 | $default-theme-override: () !default; |
| 21 | $default-theme: map.deep-merge(( | 23 | $default-theme: map.deep-merge(( |
| 22 | --label-color: props.get(core.$theme, --text), | 24 | --text-color: props.get(core.$theme, --text), |
| 25 | --label-color: props.get(core.$theme, --text-mute), | ||
| 23 | 26 | ||
| 24 | --hover: ( | 27 | --hover: ( |
| 25 | --bg-color: props.get(core.$theme, --border-mute), | 28 | --bg-color: props.get(core.$theme, --border-mute), |
| 26 | --label-color: props.get(core.$theme, --heading), | 29 | --text-color: props.get(core.$theme, --heading), |
| 30 | --label-color: props.get(core.$theme, --text), | ||
| 27 | ), | 31 | ), |
| 28 | 32 | ||
| 29 | --active: ( | 33 | --active: ( |
| 30 | --bg-color: props.get(core.$theme, --border), | 34 | --bg-color: props.get(core.$theme, --border), |
| 35 | --text-color: props.get(core.$theme, --heading), | ||
| 31 | --label-color: props.get(core.$theme, --heading), | 36 | --label-color: props.get(core.$theme, --heading), |
| 32 | ), | 37 | ), |
| 33 | 38 | ||
| 34 | --disabled: ( | 39 | --disabled: ( |
| 35 | --label-color: props.get(core.$theme, --border-strong), | 40 | --text-color: props.get(core.$theme, --border-strong), |
| 41 | --label-color: props.get(core.$theme, --text-disabled), | ||
| 36 | ), | 42 | ), |
| 37 | 43 | ||
| 38 | --key-focus: ( | 44 | --key-focus: ( |
| @@ -42,43 +48,47 @@ $default-theme: map.deep-merge(( | |||
| 42 | ), | 48 | ), |
| 43 | 49 | ||
| 44 | --selected: ( | 50 | --selected: ( |
| 45 | --bg-color: props.get(core.$theme, --heading), | 51 | --bg-color: props.get(core.$theme, --heading), |
| 46 | --label-color: props.get(core.$theme, --base, --50), | 52 | --text-color: props.get(core.$theme, --base, --50), |
| 53 | --label-color: props.get(core.$theme, --heading), | ||
| 47 | 54 | ||
| 48 | --hover: ( | 55 | --hover: ( |
| 49 | --bg-color: props.get(core.$theme, --text), | 56 | --bg-color: props.get(core.$theme, --text), |
| 50 | --label-color: props.get(core.$theme, --base, --50), | 57 | --text-color: props.get(core.$theme, --base, --50), |
| 58 | --label-color: props.get(core.$theme, --heading), | ||
| 51 | ), | 59 | ), |
| 52 | 60 | ||
| 53 | --active: ( | 61 | --active: ( |
| 54 | --bg-color: props.get(core.$theme, --text-mute), | 62 | --bg-color: props.get(core.$theme, --text-mute), |
| 55 | --label-color: props.get(core.$theme, --base, --50), | 63 | --text-color: props.get(core.$theme, --base, --50), |
| 64 | --label-color: props.get(core.$theme, --heading), | ||
| 56 | ), | 65 | ), |
| 57 | 66 | ||
| 58 | --disabled: ( | 67 | --disabled: ( |
| 59 | --bg-color: props.get(core.$theme, --border-mute), | 68 | --bg-color: props.get(core.$theme, --border-mute), |
| 60 | --label-color: props.get(core.$theme, --border-strong), | 69 | --text-color: props.get(core.$theme, --border-strong), |
| 70 | --label-color: props.get(core.$theme, --text-disabled), | ||
| 61 | ), | 71 | ), |
| 62 | ), | 72 | ), |
| 63 | 73 | ||
| 64 | --quiet: ( | 74 | --quiet: ( |
| 65 | --selected: ( | 75 | --selected: ( |
| 66 | --bg-color: props.get(core.$theme, --accent, --200), | 76 | --bg-color: props.get(core.$theme, --border-mute), |
| 67 | --label-color: props.get(core.$theme, --accent, --1100), | 77 | --text-color: props.get(core.$theme, --heading), |
| 68 | 78 | ||
| 69 | --hover: ( | 79 | --hover: ( |
| 70 | --bg-color: props.get(core.$theme, --accent, --300), | 80 | --bg-color: props.get(core.$theme, --border-mute), |
| 71 | --label-color: props.get(core.$theme, --accent, --1200), | 81 | --text-color: props.get(core.$theme, --heading), |
| 72 | ), | 82 | ), |
| 73 | 83 | ||
| 74 | --active: ( | 84 | --active: ( |
| 75 | --bg-color: props.get(core.$theme, --accent, --400), | 85 | --bg-color: props.get(core.$theme, --border-mute), |
| 76 | --label-color: props.get(core.$theme, --accent, --1300), | 86 | --text-color: props.get(core.$theme, --heading), |
| 77 | ), | 87 | ), |
| 78 | 88 | ||
| 79 | --disabled: ( | 89 | --disabled: ( |
| 80 | --bg-color: props.get(core.$theme, --accent, --200), | 90 | --bg-color: props.get(core.$theme, --border-mute), |
| 81 | --label-color: props.get(core.$theme, --accent, --800), | 91 | --text-color: props.get(core.$theme, --border-strong), |
| 82 | ), | 92 | ), |
| 83 | ) | 93 | ) |
| 84 | ) | 94 | ) |
