summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2026-01-27 16:01:32 +0100
committerVolpeon <git@volpeon.ink>2026-01-27 16:01:32 +0100
commit42dbc8cf369ba13216cfa45580fae0641badccd8 (patch)
tree61b0a7a80e17946a9980eda3e93743029e6b25ff /src/objects
parentHList: action- -> button- (diff)
downloadiro-design-42dbc8cf369ba13216cfa45580fae0641badccd8.tar.gz
iro-design-42dbc8cf369ba13216cfa45580fae0641badccd8.tar.bz2
iro-design-42dbc8cf369ba13216cfa45580fae0641badccd8.zip
o-navbar: Add static color themes
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_navbar.scss274
-rw-r--r--src/objects/_navbar.vars.scss86
2 files changed, 236 insertions, 124 deletions
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 @@
1@use 'sass:list';
1@use 'sass:map'; 2@use 'sass:map';
2@use 'sass:meta'; 3@use 'sass:meta';
3@use 'sass:string'; 4@use 'sass:string';
@@ -8,6 +9,151 @@
8@forward 'navbar.vars'; 9@forward 'navbar.vars';
9@use 'navbar.vars' as vars; 10@use 'navbar.vars' as vars;
10 11
12@mixin -apply-theme($theme, $key: ()) {
13 @include bem.elem('item-label') {
14 color: props.get($theme, list.join($key, --disabled --label-color)...);
15 }
16
17 @include bem.elem('item-content') {
18 color: props.get($theme, list.join($key, --disabled --text-color)...);
19
20 &::after {
21 outline: props.get($theme, list.join($key, --key-focus --border)...) solid props.get(vars.$key-focus--border-width);
22 box-shadow:
23 0
24 0
25 0
26 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
27 props.get($theme, list.join($key, --key-focus --outline)...);
28 }
29 }
30
31 @include bem.elem('item') {
32 &:link,
33 &:visited,
34 &:enabled {
35 @include bem.elem('item-label') {
36 color: props.get($theme, list.join($key, --label-color)...);
37 }
38
39 @include bem.elem('item-content') {
40 color: props.get($theme, list.join($key, --text-color)...);
41 }
42
43 &:hover,
44 &:focus-visible {
45 @include bem.elem('item-label') {
46 color: props.get($theme, list.join($key, --hover --label-color)...);
47 }
48
49 @include bem.elem('item-content') {
50 color: props.get($theme, list.join($key, --hover --text-color)...);
51 background-color: props.get($theme, list.join($key, --hover --bg-color)...);
52 }
53 }
54
55 &:focus-visible {
56 @include bem.elem('item-label') {
57 color: props.get($theme, list.join($key, --key-focus --label)...);
58 }
59 }
60
61 &:active {
62 @include bem.elem('item-label') {
63 color: props.get($theme, list.join($key, --active --label-color)...);
64 }
65
66 @include bem.elem('item-content') {
67 color: props.get($theme, list.join($key, --active --text-color)...);
68 background-color: props.get($theme, list.join($key, --active --bg-color)...);
69 }
70 }
71 }
72
73 @include bem.is('selected') {
74 @include bem.elem('item-label') {
75 color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
76 }
77
78 @include bem.elem('item-content') {
79 color: props.get($theme, list.join($key, --selected --disabled --text-color)...);
80 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
81 }
82
83 &:link,
84 &:visited,
85 &:enabled {
86 @include bem.elem('item-label') {
87 color: props.get($theme, list.join($key, --selected --label-color)...);
88 }
89
90 @include bem.elem('item-content') {
91 color: props.get($theme, list.join($key, --selected --text-color)...);
92 background-color: props.get($theme, list.join($key, --selected --bg-color)...);
93 }
94
95 &:hover,
96 &:focus-visible {
97 @include bem.elem('item-label') {
98 color: props.get($theme, list.join($key, --selected --hover --label-color)...);
99 }
100
101 @include bem.elem('item-content') {
102 color: props.get($theme, list.join($key, --selected --hover --text-color)...);
103 background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
104 }
105 }
106
107 &:active {
108 @include bem.elem('item-label') {
109 color: props.get($theme, list.join($key, --selected --active --label-color)...);
110 }
111
112 @include bem.elem('item-content') {
113 color: props.get($theme, list.join($key, --selected --active --text-color)...);
114 background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
115 }
116 }
117 }
118 }
119 }
120
121 @include bem.modifier('quiet') {
122 @include bem.elem('item') {
123 @include bem.is('selected') {
124 @include bem.elem('item-content') {
125 color: props.get($theme, list.join($key, --quiet --selected --disabled --text-color)...);
126 background-color: props.get($theme, list.join($key, --quiet --selected --disabled --bg-color)...);
127 }
128
129 &:link,
130 &:visited,
131 &:enabled {
132 @include bem.elem('item-content') {
133 color: props.get($theme, list.join($key, --quiet --selected --text-color)...);
134 background-color: props.get($theme, list.join($key, --quiet --selected --bg-color)...);
135 }
136
137 &:hover,
138 &:focus-visible {
139 @include bem.elem('item-content') {
140 color: props.get($theme, list.join($key, --quiet --selected --hover --text-color)...);
141 background-color: props.get($theme, list.join($key, --quiet --selected --hover --bg-color)...);
142 }
143 }
144
145 &:active {
146 @include bem.elem('item-content') {
147 color: props.get($theme, list.join($key, --quiet --selected --active --text-color)...);
148 background-color: props.get($theme, list.join($key, --quiet --selected --active --bg-color)...);
149 }
150 }
151 }
152 }
153 }
154 }
155}
156
11@mixin styles { 157@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars')); 158 @include materialize-at-root(meta.module-variables('vars'));
13 159
@@ -20,7 +166,6 @@
20 margin-block-start: props.get(vars.$item--pad-b-icon); 166 margin-block-start: props.get(vars.$item--pad-b-icon);
21 font-size: props.get(vars.$item--label-font-size); 167 font-size: props.get(vars.$item--label-font-size);
22 font-weight: bold; 168 font-weight: bold;
23 color: props.get(vars.$default-theme, --disabled, --label-color);
24 169
25 @include bem.next-elem('item-content') { 170 @include bem.next-elem('item-content') {
26 padding-block: props.get(vars.$item--pad-b-icon); 171 padding-block: props.get(vars.$item--pad-b-icon);
@@ -39,7 +184,6 @@
39 padding-block: props.get(vars.$item--pad-b); 184 padding-block: props.get(vars.$item--pad-b);
40 padding-inline: props.get(vars.$item--pad-i); 185 padding-inline: props.get(vars.$item--pad-i);
41 font-size: props.get(vars.$item--font-size); 186 font-size: props.get(vars.$item--font-size);
42 color: props.get(vars.$default-theme, --disabled, --text-color);
43 white-space: nowrap; 187 white-space: nowrap;
44 border-radius: 100em; 188 border-radius: 100em;
45 189
@@ -50,15 +194,8 @@
50 display: block; 194 display: block;
51 visibility: hidden; 195 visibility: hidden;
52 pointer-events: none; 196 pointer-events: none;
53 outline: props.get(vars.$default-theme, --key-focus, --border) solid props.get(vars.$key-focus--border-width);
54 content: ''; 197 content: '';
55 border-radius: 100em; 198 border-radius: 100em;
56 box-shadow:
57 0
58 0
59 0
60 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
61 props.get(vars.$default-theme, --key-focus, --outline);
62 } 199 }
63 } 200 }
64 201
@@ -74,97 +211,25 @@
74 &:link, 211 &:link,
75 &:visited, 212 &:visited,
76 &:enabled { 213 &:enabled {
77 @include bem.elem('item-label') {
78 color: props.get(vars.$default-theme, --label-color);
79 }
80
81 @include bem.elem('item-content') {
82 color: props.get(vars.$default-theme, --text-color);
83 }
84
85 &:hover,
86 &:focus-visible {
87 @include bem.elem('item-label') {
88 color: props.get(vars.$default-theme, --hover, --label-color);
89 }
90
91 @include bem.elem('item-content') {
92 color: props.get(vars.$default-theme, --hover, --text-color);
93 background-color: props.get(vars.$default-theme, --hover, --bg-color);
94 }
95 }
96
97 &:focus-visible { 214 &:focus-visible {
98 @include bem.elem('item-label') {
99 color: props.get(vars.$default-theme, --key-focus, --label);
100 }
101
102 @include bem.elem('item-content') { 215 @include bem.elem('item-content') {
103 &::after { 216 &::after {
104 visibility: visible; 217 visibility: visible;
105 } 218 }
106 } 219 }
107 } 220 }
108
109 &:active {
110 @include bem.elem('item-label') {
111 color: props.get(vars.$default-theme, --active, --label-color);
112 }
113
114 @include bem.elem('item-content') {
115 color: props.get(vars.$default-theme, --active, --text-color);
116 background-color: props.get(vars.$default-theme, --active, --bg-color);
117 }
118 }
119 } 221 }
120 222
121 @include bem.is('selected') { 223 @include bem.is('selected') {
122 font-weight: bold; 224 font-weight: bold;
225 }
226 }
123 227
124 @include bem.elem('item-label') { 228 @include -apply-theme(vars.$default-theme);
125 color: props.get(vars.$default-theme, --selected, --disabled, --label-color);
126 }
127
128 @include bem.elem('item-content') {
129 color: props.get(vars.$default-theme, --selected, --disabled, --text-color);
130 background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color);
131 }
132
133 &:link,
134 &:visited,
135 &:enabled {
136 @include bem.elem('item-label') {
137 color: props.get(vars.$default-theme, --selected, --label-color);
138 }
139
140 @include bem.elem('item-content') {
141 color: props.get(vars.$default-theme, --selected, --text-color);
142 background-color: props.get(vars.$default-theme, --selected, --bg-color);
143 }
144
145 &:hover,
146 &:focus-visible {
147 @include bem.elem('item-label') {
148 color: props.get(vars.$default-theme, --selected, --hover, --label-color);
149 }
150
151 @include bem.elem('item-content') {
152 color: props.get(vars.$default-theme, --selected, --hover, --text-color);
153 background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color);
154 }
155 }
156
157 &:active {
158 @include bem.elem('item-label') {
159 color: props.get(vars.$default-theme, --selected, --active, --label-color);
160 }
161 229
162 @include bem.elem('item-content') { 230 @each $theme in map.keys(props.get(vars.$themes)) {
163 color: props.get(vars.$default-theme, --selected, --active, --text-color); 231 @include bem.modifier(string.slice($theme, 3)) {
164 background-color: props.get(vars.$default-theme, --selected, --active, --bg-color); 232 @include -apply-theme(vars.$themes, $theme);
165 }
166 }
167 }
168 } 233 }
169 } 234 }
170 235
@@ -186,40 +251,5 @@
186 @include bem.modifier('align-block') { 251 @include bem.modifier('align-block') {
187 margin-inline: calc(-1 * props.get(vars.$item--pad-i)); 252 margin-inline: calc(-1 * props.get(vars.$item--pad-i));
188 } 253 }
189
190 @include bem.modifier('quiet') {
191 @include bem.elem('item') {
192 @include bem.is('selected') {
193 @include bem.elem('item-content') {
194 color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --text-color);
195 background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color);
196 }
197
198 &:link,
199 &:visited,
200 &:enabled {
201 @include bem.elem('item-content') {
202 color: props.get(vars.$default-theme, --quiet, --selected, --text-color);
203 background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color);
204 }
205
206 &:hover,
207 &:focus-visible {
208 @include bem.elem('item-content') {
209 color: props.get(vars.$default-theme, --quiet, --selected, --hover, --text-color);
210 background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color);
211 }
212 }
213
214 &:active {
215 @include bem.elem('item-content') {
216 color: props.get(vars.$default-theme, --quiet, --selected, --active, --text-color);
217 background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color);
218 }
219 }
220 }
221 }
222 }
223 }
224 } 254 }
225} 255}
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.
19$key-focus--border-offset: props.def(--o-navbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 19$key-focus--border-offset: props.def(--o-navbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
20$key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 20$key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
21 21
22$themes: props.def(--o-navbar, (), 'color');
23
22$default-theme-override: () !default; 24$default-theme-override: () !default;
23$default-theme: map.deep-merge(( 25$default-theme: map.deep-merge((
24 --text-color: props.get(core.$theme, --text), 26 --text-color: props.get(core.$theme, --text),
@@ -77,12 +79,12 @@ $default-theme: map.deep-merge((
77 --text-color: props.get(core.$theme, --heading), 79 --text-color: props.get(core.$theme, --heading),
78 80
79 --hover: ( 81 --hover: (
80 --bg-color: props.get(core.$theme, --border-mute), 82 --bg-color: props.get(core.$theme, --border),
81 --text-color: props.get(core.$theme, --heading), 83 --text-color: props.get(core.$theme, --heading),
82 ), 84 ),
83 85
84 --active: ( 86 --active: (
85 --bg-color: props.get(core.$theme, --border-mute), 87 --bg-color: props.get(core.$theme, --border-strong),
86 --text-color: props.get(core.$theme, --heading), 88 --text-color: props.get(core.$theme, --heading),
87 ), 89 ),
88 90
@@ -94,3 +96,83 @@ $default-theme: map.deep-merge((
94 ) 96 )
95), $default-theme-override) !default; 97), $default-theme-override) !default;
96$default-theme: props.def(--o-navbar, $default-theme, 'color'); 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
103 $themes: props.merge($themes, (
104 $nav-theme: (
105 --text-color: props.get(core.$transparent-colors, $theme, --800),
106 --label-color: props.get(core.$transparent-colors, $theme, --700),
107
108 --hover: (
109 --bg-color: props.get(core.$transparent-colors, $theme, --300),
110 --text-color: props.get(core.$transparent-colors, $theme, --900),
111 --label-color: props.get(core.$transparent-colors, $theme, --800),
112 ),
113
114 --active: (
115 --bg-color: props.get(core.$transparent-colors, $theme, --400),
116 --text-color: props.get(core.$transparent-colors, $theme, --900),
117 --label-color: props.get(core.$transparent-colors, $theme, --900),
118 ),
119
120 --disabled: (
121 --text-color: props.get(core.$transparent-colors, $theme, --500),
122 --label-color: props.get(core.$transparent-colors, $theme, --500),
123 ),
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 ),
130
131 --selected: (
132 --bg-color: props.get(core.$transparent-colors, $theme, --800),
133 --text-color: props.get(core.$transparent-colors, $theme, --text),
134 --label-color: props.get(core.$transparent-colors, $theme, --800),
135
136 --hover: (
137 --bg-color: props.get(core.$transparent-colors, $theme, --900),
138 --text-color: props.get(core.$transparent-colors, $theme, --text),
139 --label-color: props.get(core.$transparent-colors, $theme, --900),
140 ),
141
142 --active: (
143 --bg-color: props.get(core.$transparent-colors, $theme, --900),
144 --text-color: props.get(core.$transparent-colors, $theme, --text),
145 --label-color: props.get(core.$transparent-colors, $theme, --900),
146 ),
147
148 --disabled: (
149 --bg-color: props.get(core.$transparent-colors, $theme, --200),
150 --text-color: props.get(core.$transparent-colors, $theme, --500),
151 --label-color: props.get(core.$transparent-colors, $theme, --100),
152 ),
153 ),
154
155 --quiet: (
156 --selected: (
157 --bg-color: props.get(core.$transparent-colors, $theme, --200),
158 --text-color: props.get(core.$transparent-colors, $theme, --900),
159
160 --hover: (
161 --bg-color: props.get(core.$transparent-colors, $theme, --300),
162 --text-color: props.get(core.$transparent-colors, $theme, --900),
163 ),
164
165 --active: (
166 --bg-color: props.get(core.$transparent-colors, $theme, --400),
167 --text-color: props.get(core.$transparent-colors, $theme, --900),
168 ),
169
170 --disabled: (
171 --bg-color: props.get(core.$transparent-colors, $theme, --100),
172 --text-color: props.get(core.$transparent-colors, $theme, --500),
173 ),
174 )
175 )
176 )
177 ));
178}
generated by cgit v1.2.3-70-g09d2 (git 2.52.0) at 2026-01-29 04:24:34 +0000