summaryrefslogtreecommitdiffstats
path: root/src/objects/_navbar.vars.scss
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2026-07-22 12:27:09 +0200
committerVolpeon <git@volpeon.ink>2026-07-22 12:27:09 +0200
commitcc5329a5f4d3ea91cac93bc7f9b8f943b7ced226 (patch)
treed16dea8f0a5edca2b610ecabeac5e93a4d98be2f /src/objects/_navbar.vars.scss
parentUpdate _index.scss (diff)
downloadiro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.gz
iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.tar.bz2
iro-design-cc5329a5f4d3ea91cac93bc7f9b8f943b7ced226.zip
Paths
Diffstat (limited to 'src/objects/_navbar.vars.scss')
-rw-r--r--src/objects/_navbar.vars.scss326
1 files changed, 195 insertions, 131 deletions
diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss
index e96b714..b7d7e16 100644
--- a/src/objects/_navbar.vars.scss
+++ b/src/objects/_navbar.vars.scss
@@ -1,178 +1,242 @@
1@use 'sass:map'; 1@use "sass:map";
2@use 'sass:string'; 2@use "sass:string";
3@use 'pkg:iro-sass/src/props'; 3@use "pkg:iro-sass/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--1000)) !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--50)) !default; 7$spacing: props.def(--o-navbar--spacing, props.get(core.$size--50)) !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--pad-b-icon: props.def(--o-navbar--item--pad-b-icon, props.get(core.$size--40)) !default;
14$item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--100)) !default; 14$item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--100)) !default;
15$item--icon-size: props.def(--o-navbar--item--icon-size, props.get(core.$font-size--200)) !default; 15$item--icon-size: props.def(--o-navbar--item--icon-size, props.get(core.$font-size--200)) !default;
16$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(
17 --o-navbar--item--label-font-size,
18 props.get(core.$font-size--50)
19) !default;
17 20
18$key-focus--border-width: props.def(--o-navbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 21$key-focus--border-width: props.def(
19$key-focus--border-offset: props.def(--o-navbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 22 --o-navbar--key-focus--border-width,
20$key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 23 props.get(core.$key-focus--border-width)
24) !default;
25$key-focus--border-offset: props.def(
26 --o-navbar--key-focus--border-offset,
27 props.get(core.$key-focus--border-offset)
28) !default;
29$key-focus--outline-width: props.def(
30 --o-navbar--key-focus--outline-width,
31 props.get(core.$key-focus--outline-width)
32) !default;
21 33
22$themes: props.def(--o-navbar, (), 'color'); 34$themes: props.def(--o-navbar, (), "color");
23 35
24$default-theme-override: () !default; 36$default-theme-override: () !default;
25$default-theme: map.deep-merge(( 37$default-theme: map.deep-merge(
26 --text-color: props.get(core.$theme, --text), 38 (
27 --label-color: props.get(core.$theme, --text-mute), 39 --text-color: props.get(core.$theme, --text),
28 40 --label-color: props.get(core.$theme, --text-mute),
29 --hover: (
30 --bg-color: props.get(core.$theme, --border-mute),
31 --text-color: props.get(core.$theme, --heading),
32 --label-color: props.get(core.$theme, --text),
33 ),
34
35 --active: (
36 --bg-color: props.get(core.$theme, --border),
37 --text-color: props.get(core.$theme, --heading),
38 --label-color: props.get(core.$theme, --heading),
39 ),
40
41 --disabled: (
42 --text-color: props.get(core.$theme, --border-strong),
43 --label-color: props.get(core.$theme, --text-disabled),
44 ),
45
46 --key-focus: (
47 --label: props.get(core.$theme, --focus, --text),
48 --border: props.get(core.$theme, --focus, --border),
49 --outline: props.get(core.$theme, --focus, --outline),
50 ),
51
52 --selected: (
53 --bg-color: props.get(core.$theme, --heading),
54 --text-color: props.get(core.$theme, --base, --50),
55 --label-color: props.get(core.$theme, --heading),
56
57 --hover: ( 41 --hover: (
58 --bg-color: props.get(core.$theme, --text), 42 --bg-color: props.get(core.$theme, --border-mute),
59 --text-color: props.get(core.$theme, --base, --50), 43 --text-color: props.get(core.$theme, --heading),
60 --label-color: props.get(core.$theme, --heading), 44 --label-color: props.get(core.$theme, --text),
61 ), 45 ),
62 46
63 --active: ( 47 --active: (
64 --bg-color: props.get(core.$theme, --text-mute), 48 --bg-color: props.get(core.$theme, --border),
65 --text-color: props.get(core.$theme, --base, --50), 49 --text-color: props.get(core.$theme, --heading),
66 --label-color: props.get(core.$theme, --heading), 50 --label-color: props.get(core.$theme, --heading),
67 ), 51 ),
68 52
69 --disabled: ( 53 --disabled: (
70 --bg-color: props.get(core.$theme, --border-mute), 54 --text-color: props.get(core.$theme, --border-strong),
71 --text-color: props.get(core.$theme, --border-strong),
72 --label-color: props.get(core.$theme, --text-disabled), 55 --label-color: props.get(core.$theme, --text-disabled),
73 ), 56 ),
74 ),
75
76 --quiet: (
77 --selected: (
78 --bg-color: props.get(core.$theme, --border-mute),
79 --text-color: props.get(core.$theme, --heading),
80
81 --hover: (
82 --bg-color: props.get(core.$theme, --border),
83 --text-color: props.get(core.$theme, --heading),
84 ),
85
86 --active: (
87 --bg-color: props.get(core.$theme, --border-strong),
88 --text-color: props.get(core.$theme, --heading),
89 ),
90
91 --disabled: (
92 --bg-color: props.get(core.$theme, --border-mute),
93 --text-color: props.get(core.$theme, --border-strong),
94 ),
95 )
96 )
97), $default-theme-override) !default;
98$default-theme: props.def(--o-navbar, $default-theme, 'color');
99
100@each $theme in map.keys(props.get(core.$transparent-colors)) {
101 $nav-theme: --static-#{string.slice($theme, 3)};
102 57
103 $themes: props.merge($themes, ( 58 --key-focus: (
104 $nav-theme: ( 59 --label: props.get(core.$theme, --focus, --text),
105 --text-color: props.get(core.$transparent-colors, $theme, --800), 60 --border: props.get(core.$theme, --focus, --border),
106 --label-color: props.get(core.$transparent-colors, $theme, --700), 61 --outline: props.get(core.$theme, --focus, --outline),
62 ),
107 63
64 --selected: (
65 --bg-color: props.get(core.$theme, --heading),
66 --text-color: props.get(core.$theme, --base, --50),
67 --label-color: props.get(core.$theme, --heading),
108 --hover: ( 68 --hover: (
109 --bg-color: props.get(core.$transparent-colors, $theme, --300), 69 --bg-color: props.get(core.$theme, --text),
110 --text-color: props.get(core.$transparent-colors, $theme, --900), 70 --text-color: props.get(core.$theme, --base, --50),
111 --label-color: props.get(core.$transparent-colors, $theme, --800), 71 --label-color: props.get(core.$theme, --heading),
112 ), 72 ),
113 73
114 --active: ( 74 --active: (
115 --bg-color: props.get(core.$transparent-colors, $theme, --400), 75 --bg-color: props.get(core.$theme, --text-mute),
116 --text-color: props.get(core.$transparent-colors, $theme, --900), 76 --text-color: props.get(core.$theme, --base, --50),
117 --label-color: props.get(core.$transparent-colors, $theme, --900), 77 --label-color: props.get(core.$theme, --heading),
118 ), 78 ),
119 79
120 --disabled: ( 80 --disabled: (
121 --text-color: props.get(core.$transparent-colors, $theme, --500), 81 --bg-color: props.get(core.$theme, --border-mute),
122 --label-color: props.get(core.$transparent-colors, $theme, --500), 82 --text-color: props.get(core.$theme, --border-strong),
123 ), 83 --label-color: props.get(core.$theme, --text-disabled),
124
125 --key-focus: (
126 --label: props.get(core.$transparent-colors, $theme, --800),
127 --border: props.get(core.$transparent-colors, $theme, --900),
128 --outline: props.get(core.$transparent-colors, $theme, --300),
129 ), 84 ),
85 ),
130 86
87 --quiet: (
131 --selected: ( 88 --selected: (
132 --bg-color: props.get(core.$transparent-colors, $theme, --900), 89 --bg-color: props.get(core.$theme, --border-mute),
133 --text-color: props.get(core.$transparent-colors, $theme, --text), 90 --text-color: props.get(core.$theme, --heading),
134 --label-color: props.get(core.$transparent-colors, $theme, --800),
135
136 --hover: ( 91 --hover: (
137 --bg-color: props.get(core.$transparent-colors, $theme, --800), 92 --bg-color: props.get(core.$theme, --border),
138 --text-color: props.get(core.$transparent-colors, $theme, --text), 93 --text-color: props.get(core.$theme, --heading),
139 --label-color: props.get(core.$transparent-colors, $theme, --900),
140 ), 94 ),
141 95
142 --active: ( 96 --active: (
143 --bg-color: props.get(core.$transparent-colors, $theme, --800), 97 --bg-color: props.get(core.$theme, --border-strong),
144 --text-color: props.get(core.$transparent-colors, $theme, --text), 98 --text-color: props.get(core.$theme, --heading),
145 --label-color: props.get(core.$transparent-colors, $theme, --900),
146 ), 99 ),
147 100
148 --disabled: ( 101 --disabled: (
149 --bg-color: props.get(core.$transparent-colors, $theme, --200), 102 --bg-color: props.get(core.$theme, --border-mute),
150 --text-color: props.get(core.$transparent-colors, $theme, --500), 103 --text-color: props.get(core.$theme, --border-strong),
151 --label-color: props.get(core.$transparent-colors, $theme, --100),
152 ), 104 ),
153 ), 105 ),
106 ),
107 ),
108 $default-theme-override
109) !default;
110$default-theme: props.def(--o-navbar, $default-theme, "color");
154 111
155 --quiet: ( 112@each $theme in map.keys(props.get(core.$transparent-colors)) {
156 --selected: ( 113 $nav-theme: --static-#{string.slice($theme, 3)};
157 --bg-color: props.get(core.$transparent-colors, $theme, --300),
158 --text-color: props.get(core.$transparent-colors, $theme, --900),
159 114
115 $themes: props.merge(
116 $themes,
117 (
118 $nav-theme: (
119 --text-color: props.get(core.$transparent-colors, $theme, --800),
120 --label-color: props.get(core.$transparent-colors, $theme, --700),
160 --hover: ( 121 --hover: (
161 --bg-color: props.get(core.$transparent-colors, $theme, --400), 122 --bg-color: props.get(core.$transparent-colors, $theme, --300),
162 --text-color: props.get(core.$transparent-colors, $theme, --900), 123 --text-color: props.get(core.$transparent-colors, $theme, --900),
163 ), 124 --label-color: props.get(core.$transparent-colors, $theme, --800),
125 ),
164 126
165 --active: ( 127 --active: (
166 --bg-color: props.get(core.$transparent-colors, $theme, --500), 128 --bg-color: props.get(core.$transparent-colors, $theme, --400),
167 --text-color: props.get(core.$transparent-colors, $theme, --900), 129 --text-color: props.get(core.$transparent-colors, $theme, --900),
168 ), 130 --label-color: props.get(core.$transparent-colors, $theme, --900),
131 ),
169 132
170 --disabled: ( 133 --disabled: (
171 --bg-color: props.get(core.$transparent-colors, $theme, --100), 134 --text-color: props.get(core.$transparent-colors, $theme, --500),
172 --text-color: props.get(core.$transparent-colors, $theme, --500), 135 --label-color: props.get(core.$transparent-colors, $theme, --500),
173 ), 136 ),
174 ) 137
175 ) 138 --key-focus: (
139 --label: props.get(core.$transparent-colors, $theme, --800),
140 --border: props.get(core.$transparent-colors, $theme, --900),
141 --outline: props.get(core.$transparent-colors, $theme, --300),
142 ),
143
144 --selected: (
145 --bg-color: props.get(core.$transparent-colors, $theme, --900),
146 --text-color: props.get(core.$transparent-colors, $theme, --text),
147 --label-color: props.get(core.$transparent-colors, $theme, --800),
148 --hover: (
149 --bg-color: props.get(core.$transparent-colors, $theme, --800),
150 --text-color: props.get(
151 core.$transparent-colors,
152 $theme,
153 --text
154 ),
155 --label-color: props.get(
156 core.$transparent-colors,
157 $theme,
158 --900
159 ),
160 ),
161
162 --active: (
163 --bg-color: props.get(core.$transparent-colors, $theme, --800),
164 --text-color: props.get(
165 core.$transparent-colors,
166 $theme,
167 --text
168 ),
169 --label-color: props.get(
170 core.$transparent-colors,
171 $theme,
172 --900
173 ),
174 ),
175
176 --disabled: (
177 --bg-color: props.get(core.$transparent-colors, $theme, --200),
178 --text-color: props.get(
179 core.$transparent-colors,
180 $theme,
181 --500
182 ),
183 --label-color: props.get(
184 core.$transparent-colors,
185 $theme,
186 --100
187 ),
188 ),
189 ),
190
191 --quiet: (
192 --selected: (
193 --bg-color: props.get(core.$transparent-colors, $theme, --300),
194 --text-color: props.get(
195 core.$transparent-colors,
196 $theme,
197 --900
198 ),
199 --hover: (
200 --bg-color: props.get(
201 core.$transparent-colors,
202 $theme,
203 --400
204 ),
205 --text-color: props.get(
206 core.$transparent-colors,
207 $theme,
208 --900
209 ),
210 ),
211
212 --active: (
213 --bg-color: props.get(
214 core.$transparent-colors,
215 $theme,
216 --500
217 ),
218 --text-color: props.get(
219 core.$transparent-colors,
220 $theme,
221 --900
222 ),
223 ),
224
225 --disabled: (
226 --bg-color: props.get(
227 core.$transparent-colors,
228 $theme,
229 --100
230 ),
231 --text-color: props.get(
232 core.$transparent-colors,
233 $theme,
234 --500
235 ),
236 ),
237 ),
238 ),
239 ),
176 ) 240 )
177 )); 241 );
178} 242}
generated by cgit v1.3.1 (git 2.54.0) at 2026-07-22 13:08:03 +0000