summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_action-button.scss343
-rw-r--r--src/objects/_alert.scss73
-rw-r--r--src/objects/_alert.vars.scss36
-rw-r--r--src/objects/_avatar.scss251
-rw-r--r--src/objects/_avatar.vars.scss58
-rw-r--r--src/objects/_backdrop.scss43
-rw-r--r--src/objects/_backdrop.vars.scss6
-rw-r--r--src/objects/_badge.scss300
-rw-r--r--src/objects/_button.scss530
-rw-r--r--src/objects/_button.vars.scss374
-rw-r--r--src/objects/_card.scss388
-rw-r--r--src/objects/_card.vars.scss39
-rw-r--r--src/objects/_checkbox.scss428
-rw-r--r--src/objects/_checkbox.vars.scss32
-rw-r--r--src/objects/_divider.scss355
-rw-r--r--src/objects/_divider.vars.scss79
-rw-r--r--src/objects/_emoji.scss105
-rw-r--r--src/objects/_emoji.vars.scss26
-rw-r--r--src/objects/_field-label.scss134
-rw-r--r--src/objects/_field-label.vars.scss12
-rw-r--r--src/objects/_figure.scss26
-rw-r--r--src/objects/_figure.vars.scss9
-rw-r--r--src/objects/_heading.scss162
-rw-r--r--src/objects/_heading.vars.scss123
-rw-r--r--src/objects/_icon.scss43
-rw-r--r--src/objects/_icon.vars.scss5
-rw-r--r--src/objects/_lightbox.scss404
-rw-r--r--src/objects/_lightbox.vars.scss33
-rw-r--r--src/objects/_menu.scss205
-rw-r--r--src/objects/_menu.vars.scss29
-rw-r--r--src/objects/_navbar.scss191
-rw-r--r--src/objects/_navbar.vars.scss84
-rw-r--r--src/objects/_palette.scss95
-rw-r--r--src/objects/_placeholders.scss22
-rw-r--r--src/objects/_placeholders.vars.scss6
-rw-r--r--src/objects/_popover.scss84
-rw-r--r--src/objects/_popover.vars.scss19
-rw-r--r--src/objects/_radio.scss295
-rw-r--r--src/objects/_radio.vars.scss33
-rw-r--r--src/objects/_side-nav.scss182
-rw-r--r--src/objects/_side-nav.vars.scss28
-rw-r--r--src/objects/_status-indicator.scss56
-rw-r--r--src/objects/_status-indicator.vars.scss26
-rw-r--r--src/objects/_switch.scss352
-rw-r--r--src/objects/_switch.vars.scss37
-rw-r--r--src/objects/_tabbar.scss113
-rw-r--r--src/objects/_tabbar.vars.scss25
-rw-r--r--src/objects/_table.scss267
-rw-r--r--src/objects/_table.vars.scss25
-rw-r--r--src/objects/_text-field.scss338
-rw-r--r--src/objects/_text-field.vars.scss39
-rw-r--r--src/objects/_thumbnail.scss104
-rw-r--r--src/objects/_thumbnail.vars.scss51
53 files changed, 3862 insertions, 3261 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
deleted file mode 100644
index 7fe9d44..0000000
--- a/src/objects/_action-button.scss
+++ /dev/null
@@ -1,343 +0,0 @@
1@use 'sass:list';
2@use 'iro-sass/src/index' as iro;
3@use '../functions' as fn;
4
5$sizes: 'sm' 'lg' 'xl' !default;
6$static-themes: 'black' 'white' !default;
7
8@mixin static-theme($theme: ()) {
9 border-color: fn.color(list.join($theme, --disabled --border));
10 background-color: fn.color(list.join($theme, --disabled --bg));
11 color: fn.color(list.join($theme, --disabled --label));
12
13 &::after {
14 outline-color: fn.color(list.join($theme, --key-focus --border));
15 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline));
16 }
17
18 &:link,
19 &:visited,
20 &:enabled {
21 border-color: fn.color(list.join($theme, --border));
22 background-color: fn.color(list.join($theme, --bg));
23 color: fn.color(list.join($theme, --label));
24
25 &:hover,
26 &:focus-visible {
27 border-color: fn.color(list.join($theme, --hover --border));
28 background-color: fn.color(list.join($theme, --hover --bg));
29 color: fn.color(list.join($theme, --hover --label));
30 }
31
32 &:active {
33 border-color: fn.color(list.join($theme, --active --border));
34 background-color: fn.color(list.join($theme, --active --bg));
35 color: fn.color(list.join($theme, --active --label));
36 }
37 }
38
39 @include iro.bem-modifier('quiet') {
40 border-color: transparent;
41 background-color: transparent;
42 color: fn.color(list.join($theme, --quiet --disabled --label));
43
44 &:link,
45 &:visited,
46 &:enabled {
47 border-color: transparent;
48 background-color: transparent;
49 color: fn.color(list.join($theme, --quiet --label));
50
51 &:hover,
52 &:focus-visible {
53 border-color: transparent;
54 background-color: fn.color(list.join($theme, --quiet --hover --bg));
55 color: fn.color(list.join($theme, --quiet --hover --label));
56 }
57
58 &:active {
59 border-color: transparent;
60 background-color: fn.color(list.join($theme, --quiet --active --bg));
61 color: fn.color(list.join($theme, --quiet --active --label));
62 }
63 }
64 }
65
66 @include iro.bem-is('selected') {
67 border-color: fn.color(list.join($theme, --selected --disabled --border));
68 background-color: fn.color(list.join($theme, --selected --disabled --bg));
69 color: fn.color(list.join($theme, --selected --disabled --label));
70
71 &:link,
72 &:visited,
73 &:enabled {
74 border-color: fn.color(list.join($theme, --selected --border));
75 background-color: fn.color(list.join($theme, --selected --bg));
76 color: fn.color(list.join($theme, --selected --label));
77
78 &:hover,
79 &:focus-visible {
80 border-color: fn.color(list.join($theme, --selected --hover --border));
81 background-color: fn.color(list.join($theme, --selected --hover --bg));
82 color: fn.color(list.join($theme, --selected --hover --label));
83 }
84
85 &:active {
86 border-color: fn.color(list.join($theme, --selected --active --border));
87 background-color: fn.color(list.join($theme, --selected --active --bg));
88 color: fn.color(list.join($theme, --selected --active --label));
89 }
90 }
91 }
92}
93
94@include iro.props-namespace('action-button') {
95 @include iro.props-store((
96 --dims: (
97 --line-height: 1.4,
98 --pad-i: fn.global-dim(--size --150),
99 --pad-i-pill: fn.global-dim(--size --200),
100 --pad-b: fn.global-dim(--size --85),
101 --border: fn.global-dim(--border --thin),
102 --rounding: fn.global-dim(--rounding),
103 --font-size: fn.global-dim(--font-size --100),
104
105 --sm: (
106 --pad-i: fn.global-dim(--size --100),
107 --pad-i-pill: fn.global-dim(--size --150),
108 --pad-b: fn.global-dim(--size --40),
109 --font-size: fn.global-dim(--font-size --75),
110 ),
111 --lg: (
112 --pad-i: fn.global-dim(--size --175),
113 --pad-i-pill: fn.global-dim(--size --225),
114 --pad-b: fn.global-dim(--size --115),
115 --font-size: fn.global-dim(--font-size --150),
116 ),
117 --xl: (
118 --pad-i: fn.global-dim(--size --225),
119 --pad-i-pill: fn.global-dim(--size --300),
120 --pad-b: fn.global-dim(--size --150),
121 --font-size: fn.global-dim(--font-size --200),
122 ),
123
124 --key-focus: (
125 --border: fn.global-dim(--key-focus --border),
126 --border-offset: fn.global-dim(--key-focus --border-offset),
127 --outline: fn.global-dim(--key-focus --outline),
128 ),
129 ),
130 --colors: (
131 --bg: fn.global-color(--base --75),
132 --label: fn.global-color(--text),
133 --border: fn.global-color(--border-strong),
134
135 --hover: (
136 --bg: fn.global-color(--border-mute),
137 --label: fn.global-color(--heading),
138 --border: fn.global-color(--text-mute-more),
139 ),
140 --active: (
141 --bg: fn.global-color(--border),
142 --label: fn.global-color(--heading),
143 --border: fn.global-color(--text-mute),
144 ),
145 --disabled: (
146 --bg: fn.global-color(--bg-l1),
147 --label: fn.global-color(--border-strong),
148 --border: fn.global-color(--border),
149 ),
150 --key-focus: (
151 --border: fn.global-color(--focus --border),
152 --outline: fn.global-color(--focus --outline),
153 ),
154
155 --selected: (
156 --bg: fn.global-color(--text-mute),
157 --label: fn.global-color(--base --50),
158 --border: fn.global-color(--text-mute),
159
160 --hover: (
161 --bg: fn.global-color(--text),
162 --label: fn.global-color(--base --50),
163 --border: fn.global-color(--text),
164 ),
165 --active: (
166 --bg: fn.global-color(--heading),
167 --label: fn.global-color(--base --50),
168 --border: fn.global-color(--heading),
169 ),
170 --disabled: (
171 --bg: fn.global-color(--border-mute),
172 --label: fn.global-color(--border-strong),
173 --border: fn.global-color(--border-mute),
174 ),
175 ),
176
177 --quiet: (
178 --label: fn.global-color(--text),
179
180 --hover: (
181 --bg: fn.global-color(--border-mute),
182 --label: fn.global-color(--heading),
183 ),
184 --active: (
185 --bg: fn.global-color(--border),
186 --label: fn.global-color(--heading),
187 ),
188 --disabled: (
189 --label: fn.global-color(--border-strong),
190 ),
191 ),
192 ),
193 ));
194
195 @each $theme in $static-themes {
196 @include iro.props-store((
197 --colors: (
198 --static-#{$theme}: (
199 --bg: fn.global-color(--#{$theme}-transparent --100),
200 --label: fn.global-color(--#{$theme}-transparent --900),
201 --border: fn.global-color(--#{$theme}-transparent --400),
202
203 --hover: (
204 --bg: fn.global-color(--#{$theme}-transparent --300),
205 --label: fn.global-color(--#{$theme}-transparent --900),
206 --border: fn.global-color(--#{$theme}-transparent --500),
207 ),
208 --active: (
209 --bg: fn.global-color(--#{$theme}-transparent --400),
210 --label: fn.global-color(--#{$theme}-transparent --900),
211 --border: fn.global-color(--#{$theme}-transparent --600),
212 ),
213 --disabled: (
214 --bg: fn.global-color(--#{$theme}-transparent --100),
215 --label: fn.global-color(--#{$theme}-transparent --500),
216 --border: fn.global-color(--#{$theme}-transparent --300),
217 ),
218 --key-focus: (
219 --border: fn.global-color(--#{$theme}-transparent --900),
220 --outline: fn.global-color(--#{$theme}-transparent --300),
221 ),
222
223 --selected: (
224 --bg: fn.global-color(--#{$theme}-transparent --800),
225 --label: fn.global-color(--#{$theme}-transparent --text),
226 --border: fn.global-color(--#{$theme}-transparent --100),
227
228 --hover: (
229 --bg: fn.global-color(--#{$theme}-transparent --900),
230 --label: fn.global-color(--#{$theme}-transparent --text),
231 --border: fn.global-color(--#{$theme}-transparent --100),
232 ),
233 --active: (
234 --bg: fn.global-color(--#{$theme}-transparent --900),
235 --label: fn.global-color(--#{$theme}-transparent --text),
236 --border: fn.global-color(--#{$theme}-transparent --100),
237 ),
238 --disabled: (
239 --bg: fn.global-color(--#{$theme}-transparent --200),
240 --label: fn.global-color(--#{$theme}-transparent --500),
241 --border: fn.global-color(--#{$theme}-transparent --100),
242 ),
243 ),
244
245 --quiet: (
246 --label: fn.global-color(--#{$theme}-transparent --900),
247
248 --hover: (
249 --bg: fn.global-color(--#{$theme}-transparent --300),
250 --label: fn.global-color(--#{$theme}-transparent --900),
251 ),
252 --active: (
253 --bg: fn.global-color(--#{$theme}-transparent --400),
254 --label: fn.global-color(--#{$theme}-transparent --900),
255 ),
256 --disabled: (
257 --label: fn.global-color(--#{$theme}-transparent --500),
258 ),
259 ),
260 ),
261 )
262 ));
263 }
264
265 @include iro.bem-object(iro.props-namespace()) {
266 display: inline-block;
267 position: relative;
268 padding-block: fn.dim(--pad-b);
269 padding-inline: fn.dim(--pad-i);
270 border: fn.dim(--border) solid fn.color(--disabled --border);
271 border-radius: fn.dim(--rounding);
272 background-color: fn.color(--disabled --bg);
273 color: fn.color(--disabled --label);
274 line-height: fn.dim(--line-height);
275 text-align: center;
276 text-decoration: none;
277 text-overflow: ellipsis;
278 white-space: nowrap;
279
280 &::after {
281 content: '';
282 display: none;
283 position: absolute;
284 z-index: 1;
285 inset: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset));
286 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
287 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
288 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
289 pointer-events: none;
290 }
291
292 &:link,
293 &:visited,
294 &:enabled {
295 &:focus-visible {
296 &::after {
297 display: block;
298 }
299 }
300 }
301
302 @include static-theme;
303
304 @each $theme in $static-themes {
305 @include iro.bem-modifier(static-#{$theme}) {
306 @include static-theme(--static-#{$theme});
307 }
308 }
309
310 @include iro.bem-modifier('pill') {
311 padding-inline: fn.dim(--pad-i-pill);
312 border-radius: 100em;
313
314 &::after {
315 border-radius: 100em;
316 }
317 }
318
319 @each $size in $sizes {
320 @include iro.bem-modifier($size) {
321 padding-block: fn.dim(--#{$size} --pad-b);
322 padding-inline: fn.dim(--#{$size} --pad-i);
323 font-size: fn.dim(--#{$size} --font-size);
324
325 @include iro.bem-modifier('pill') {
326 padding-inline: fn.dim(--#{$size} --pad-i-pill);
327 }
328 }
329 }
330
331 @include iro.bem-modifier('icon') {
332 inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b));
333 padding-inline: 0;
334
335 @each $size in $sizes {
336 @include iro.bem-modifier($size) {
337 inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--#{$size} --pad-b));
338 padding-inline: 0;
339 }
340 }
341 }
342 }
343}
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index 067c00c..697ac18 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -1,43 +1,40 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:map';
2@use '../functions' as fn; 2@use 'sass:meta';
3@use 'iro-sass/src/bem';
4@use 'iro-sass/src/props';
5@use '../props' as *;
3 6
4$themes: 'accent' 'positive' 'negative' 'warning' !default; 7@forward 'alert.vars';
8@use 'alert.vars' as vars;
5 9
6@include iro.props-namespace('alert') { 10@mixin styles {
7 @include iro.props-store(( 11 @include materialize-at-root(meta.module-variables('vars'));
8 --dims: (
9 --border: fn.global-dim(--border --medium),
10 --pad-i: fn.global-dim(--size --250),
11 --pad-b: fn.global-dim(--size --200),
12 --rounding: fn.global-dim(--rounding),
13 ),
14 --colors: (
15 --bg: fn.global-color(--bg-l2),
16 --border: fn.global-color(--text-mute-more),
17 ),
18 ));
19 12
20 @each $theme in $themes { 13 @include bem.object('alert') {
21 @include iro.props-store(( 14 padding-block: props.get(vars.$pad-b);
22 --colors: ( 15 padding-inline: props.get(vars.$pad-i);
23 --#{$theme}: ( 16 background-color: props.get(vars.$bg-color);
24 --border: fn.global-color(--#{$theme} --700), 17 border: props.get(vars.$border-width) solid transparent;
25 ), 18 border-color: props.get(vars.$border-color);
26 ), 19 border-radius: props.get(vars.$rounding);
27 )); 20 box-shadow:
28 } 21 props.get(vars.$shadow-x)
22 props.get(vars.$shadow-y)
23 props.get(vars.$shadow-blur)
24 props.get(vars.$shadow-grow)
25 props.get(vars.$shadow-color);
29 26
30 @include iro.bem-object(iro.props-namespace()) { 27 @each $mod, $theme in vars.$themes-config {
31 padding-block: fn.dim(--pad-b); 28 @include bem.modifier($mod) {
32 padding-inline: fn.dim(--pad-i); 29 background-color: props.get(vars.$themes, $theme, --bg-color);
33 border: fn.dim(--border) solid fn.color(--border); 30 border-color: props.get(vars.$themes, $theme, --border-color);
34 border-radius: fn.dim(--rounding); 31 box-shadow:
35 background-color: fn.color(--bg); 32 props.get(vars.$shadow-x)
36 33 props.get(vars.$shadow-y)
37 @each $theme in $themes { 34 props.get(vars.$shadow-blur)
38 @include iro.bem-modifier($theme) { 35 props.get(vars.$shadow-grow)
39 border-color: fn.color(--#{$theme} --border); 36 props.get(vars.$themes, $theme, --shadow-color);
40 } 37 }
41 } 38 }
42 } 39 }
43} 40}
diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss
new file mode 100644
index 0000000..62d3414
--- /dev/null
+++ b/src/objects/_alert.vars.scss
@@ -0,0 +1,36 @@
1@use 'iro-sass/src/props';
2@use '../core.vars' as core;
3
4$border-width: props.def(--o-alert--border-width, props.get(core.$border-width--medium)) !default;
5$pad-i: props.def(--o-alert--pad-i, props.get(core.$size--250)) !default;
6$pad-b: props.def(--o-alert--pad-b, props.get(core.$size--200)) !default;
7$rounding: props.def(--o-alert--rounding, props.get(core.$rounding)) !default;
8
9$shadow-x: props.def(--o-alert--shadow-x, props.get(core.$shadow--l2--x)) !default;
10$shadow-y: props.def(--o-alert--shadow-y, props.get(core.$shadow--l2--y)) !default;
11$shadow-blur: props.def(--o-alert--shadow-blur, props.get(core.$shadow--l2--blur)) !default;
12$shadow-grow: props.def(--o-alert--shadow-grow, props.get(core.$shadow--l2--grow)) !default;
13
14$bg-color: props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
15$border-color: props.def(--o-alert--border-color, props.get(core.$theme, --text-mute-more) props.get(core.$theme, --text-mute-more) props.get(core.$theme, --text-mute), 'color') !default;
16
17$shadow-color: props.def(--o-alert--shadow-color, props.get(core.$transparent-colors, --black, --200), 'color') !default;
18
19$themes-config: (
20 accent: --accent,
21 positive: --positive,
22 negative: --negative,
23 warning: --warning,
24) !default;
25
26$themes: props.def(--o-alert, (), 'color');
27
28@each $theme, $key in $themes-config {
29 $themes: props.merge($themes, (
30 $key: (
31 --bg-color: props.get(core.$theme, --bg-l2),
32 --border-color: props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --800),
33 --shadow-color: props.get(core.$theme, $key, --200),
34 )
35 ));
36}
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 19bff10..9d51ffb 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -1,167 +1,126 @@
1@use 'sass:list'; 1@use 'sass:meta';
2@use 'iro-sass/src/index' as iro; 2@use 'iro-sass/src/bem';
3@use '../functions' as fn; 3@use 'iro-sass/src/props';
4@use '../props' as *;
4 5
5$sizes: 'xs' 'sm' 'lg' 'xl' 'xxl' 'xxxl'; 6@forward 'avatar.vars';
7@use 'avatar.vars' as vars;
6 8
7@mixin status($size: ()) { 9@mixin status($indicator-size) {
8 @include iro.bem-elem('status') { 10 @include bem.elem('status') {
9 inline-size: fn.dim(list.join($size, --indicator-size)); 11 inline-size: props.get($indicator-size);
10 block-size: fn.dim(list.join($size, --indicator-size)); 12 block-size: props.get($indicator-size);
11 13
12 @include iro.bem-next-elem('content') { 14 @include bem.sibling-elem('content') {
13 mask-image: radial-gradient( 15 mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at
14 circle calc(.5 * fn.dim(list.join($size, --indicator-size)) + fn.dim(--indicator-spacing)) at 16 calc(100% - .5 * props.get($indicator-size))
15 calc(100% - .5 * fn.dim(list.join($size, --indicator-size))) 17 calc(100% - .5 * props.get($indicator-size)),
16 calc(100% - .5 * fn.dim(list.join($size, --indicator-size))), 18 transparent 95%,
17 transparent 95%, 19 #fff);
18 #fff 20 }
19 ); 21 }
20 }
21 }
22} 22}
23 23
24@include iro.props-namespace('avatar') { 24@mixin styles {
25 @include iro.props-store(( 25 @include materialize-at-root(meta.module-variables('vars'));
26 --dims: (
27 --size: fn.global-dim(--size --500),
28 --font-size: fn.global-dim(--font-size --100),
29 --indicator-size: fn.global-dim(--size --150),
30 --indicator-spacing: fn.global-dim(--size --40),
31 --rounding: 25%,
32 26
33 --xxxl: ( 27 @include bem.object('avatar') {
34 --size: fn.global-dim(--size --1600), 28 position: relative;
35 --font-size: fn.global-dim(--font-size --800), 29 display: inline-block;
36 --indicator-size: fn.global-dim(--size --400), 30 font-size: props.get(vars.$font-size);
37 ), 31 font-style: normal;
38 --xxl: ( 32 vertical-align: .05em;
39 --size: fn.global-dim(--size --1200), 33 border-radius: props.get(vars.$rounding);
40 --font-size: fn.global-dim(--font-size --600),
41 --indicator-size: fn.global-dim(--size --300),
42 ),
43 --xl: (
44 --size: fn.global-dim(--size --800),
45 --font-size: fn.global-dim(--font-size --300),
46 --indicator-size: fn.global-dim(--size --225),
47 ),
48 --lg: (
49 --size: fn.global-dim(--size --650),
50 --font-size: fn.global-dim(--font-size --200),
51 --indicator-size: fn.global-dim(--size --175),
52 ),
53 --sm: (
54 --size: fn.global-dim(--size --375),
55 --font-size: fn.global-dim(--font-size --75),
56 --indicator-size: fn.global-dim(--size --125),
57 ),
58 --xs: (
59 --size: fn.global-dim(--size --250),
60 --font-size: fn.global-dim(--font-size --50),
61 --indicator-size: fn.global-dim(--size --100),
62 ),
63
64 --key-focus: (
65 --border: fn.global-dim(--key-focus --border),
66 --border-offset: fn.global-dim(--key-focus --border-offset),
67 --outline: fn.global-dim(--key-focus --outline),
68 ),
69 ),
70 --colors: (
71 --h: 354,
72 --s: 44%,
73 --l: 45%,
74 34
75 --key-focus: ( 35 &::after {
76 --border: fn.global-color(--focus --border), 36 position: absolute;
77 --outline: fn.global-color(--focus --outline), 37 inset: calc(-1 * props.get(vars.$key-focus--border-offset));
78 ), 38 z-index: 1;
79 ), 39 display: none;
80 )); 40 pointer-events: none;
41 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
42 content: '';
43 border: props.get(vars.$key-focus--border-offset) solid transparent;
44 border-radius: props.get(vars.$rounding);
45 box-shadow:
46 0
47 0
48 0
49 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
50 props.get(vars.$key-focus--outline-color);
51 }
81 52
82 @include iro.bem-object(iro.props-namespace()) { 53 @include bem.elem('status') {
83 display: inline-block; 54 position: absolute;
84 position: relative; 55 inset-block-end: 0;
85 border-radius: fn.dim(--rounding); 56 inset-inline-end: 0;
86 font-size: fn.dim(--font-size); 57 }
87 font-style: normal;
88 vertical-align: .05em;
89 58
90 &::after { 59 @include status(vars.$indicator-size);
91 content: '';
92 display: none;
93 position: absolute;
94 z-index: 1;
95 inset: calc(-1 * fn.dim(--key-focus --border-offset));
96 border: fn.dim(--key-focus --border-offset) solid transparent;
97 border-radius: fn.dim(--rounding);
98 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
99 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
100 pointer-events: none;
101 }
102 60
103 @include iro.bem-elem('status') { 61 @include bem.elem('content') {
104 position: absolute; 62 display: block;
105 inset-inline-end: 0; 63 inline-size: props.get(vars.$size);
106 inset-block-end: 0; 64 block-size: props.get(vars.$size);
107 } 65 line-height: props.get(vars.$size);
66 text-align: center;
67 object-fit: cover;
68 object-position: center center;
69 border-radius: props.get(vars.$rounding);
70 }
108 71
109 @include status; 72 @include bem.modifier('circle') {
73 border-radius: 100%;
110 74
111 @include iro.bem-elem('content') { 75 &::after {
112 display: block; 76 border-radius: 100%;
113 inline-size: fn.dim(--size); 77 }
114 block-size: fn.dim(--size);
115 border-radius: fn.dim(--rounding);
116 line-height: fn.dim(--size);
117 text-align: center;
118 object-fit: cover;
119 object-position: center center;
120 }
121 78
122 @include iro.bem-modifier('circle') { 79 @include bem.elem('content') {
123 border-radius: 100%; 80 border-radius: 100%;
81 }
82 }
124 83
125 &::after { 84 @include bem.modifier('placeholder') {
126 border-radius: 100%; 85 @include bem.elem('content') {
127 } 86 background-color: hsl(0, 0%, props.get(vars.$bg-color--l));
87 }
88 }
128 89
129 @include iro.bem-elem('content') { 90 @include bem.modifier('colored') {
130 border-radius: 100%; 91 @include bem.elem('content') {
131 } 92 color: #fff;
132 } 93 background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l));
94 }
95 }
133 96
134 @include iro.bem-modifier('placeholder') { 97 @include bem.modifier('colored-gradient') {
135 @include iro.bem-elem('content') { 98 @include bem.elem('content') {
136 background-color: hsl(0, 0%, fn.color(--l)); 99 color: #fff;
137 } 100 background: linear-gradient(props.get(vars.$bg-angle),
138 } 101 hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)),
102 hsl(props.get(vars.$bg-color-2--h), props.get(vars.$bg-color-2--s), props.get(vars.$bg-color-2--l)));
103 }
104 }
139 105
140 @include iro.bem-modifier('colored') { 106 @each $mod, $size, $font-size, $indicator-size in vars.$sizes {
141 @include iro.bem-elem('content') { 107 @include bem.modifier($mod) {
142 background-color: hsl(fn.color(--h), fn.color(--s), fn.color(--l)); 108 font-size: props.get($font-size);
143 color: #fff;
144 }
145 }
146
147 @each $size in $sizes {
148 @include iro.bem-modifier($size) {
149 font-size: fn.dim(--#{$size} --font-size);
150 109
151 @include status(--#{$size}); 110 @include status($indicator-size);
152 111
153 @include iro.bem-elem('content') { 112 @include bem.elem('content') {
154 inline-size: fn.dim(--#{$size} --size); 113 inline-size: props.get($size);
155 block-size: fn.dim(--#{$size} --size); 114 block-size: props.get($size);
156 line-height: fn.dim(--#{$size} --size); 115 line-height: props.get($size);
157 } 116 }
158 } 117 }
159 } 118 }
160 119
161 &:focus-visible { 120 &:focus-visible {
162 &::after { 121 &::after {
163 display: block; 122 display: block;
164 } 123 }
165 } 124 }
166 } 125 }
167} 126}
diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss
new file mode 100644
index 0000000..2374f5a
--- /dev/null
+++ b/src/objects/_avatar.vars.scss
@@ -0,0 +1,58 @@
1@use 'iro-sass/src/props';
2@use '../core.vars' as core;
3
4$size: props.def(--o-avatar--size, props.get(core.$size--500)) !default;
5$font-size: props.def(--o-avatar--font-size, props.get(core.$font-size--100)) !default;
6$indicator-size: props.def(--o-avatar--indicator-size, props.get(core.$size--150)) !default;
7$indicator-spacing: props.def(--o-avatar--indicator-spacing, props.get(core.$size--40)) !default;
8$rounding: props.def(--o-avatar--rounding, 25%) !default;
9
10$size--xxxl: props.def(--o-avatar--xxxl--size, props.get(core.$size--1600)) !default;
11$font-size--xxxl: props.def(--o-avatar--xxxl--font-size, props.get(core.$font-size--800)) !default;
12$indicator-size--xxxl: props.def(--o-avatar--xxxl--indicator-size, props.get(core.$size--400)) !default;
13
14$size--xxl: props.def(--o-avatar--xxl--size, props.get(core.$size--1200)) !default;
15$font-size--xxl: props.def(--o-avatar--xxl--font-size, props.get(core.$font-size--600)) !default;
16$indicator-size--xxl: props.def(--o-avatar--xxl--indicator-size, props.get(core.$size--300)) !default;
17
18$size--xl: props.def(--o-avatar--xl--size, props.get(core.$size--800)) !default;
19$font-size--xl: props.def(--o-avatar--xl--font-size, props.get(core.$font-size--300)) !default;
20$indicator-size--xl: props.def(--o-avatar--xl--indicator-size, props.get(core.$size--225)) !default;
21
22$size--lg: props.def(--o-avatar--lg--size, props.get(core.$size--650)) !default;
23$font-size--lg: props.def(--o-avatar--lg--font-size, props.get(core.$font-size--200)) !default;
24$indicator-size--lg: props.def(--o-avatar--lg--indicator-size, props.get(core.$size--175)) !default;
25
26$size--sm: props.def(--o-avatar--sm--size, props.get(core.$size--375)) !default;
27$font-size--sm: props.def(--o-avatar--sm--font-size, props.get(core.$font-size--75)) !default;
28$indicator-size--sm: props.def(--o-avatar--sm--indicator-size, props.get(core.$size--125)) !default;
29
30$size--xs: props.def(--o-avatar--xs--size, props.get(core.$size--250)) !default;
31$font-size--xs: props.def(--o-avatar--xs--font-size, props.get(core.$font-size--50)) !default;
32$indicator-size--xs: props.def(--o-avatar--xs--indicator-size, props.get(core.$size--100)) !default;
33
34$key-focus--border-width: props.def(--o-avatar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
35$key-focus--border-offset: props.def(--o-avatar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
36$key-focus--outline-width: props.def(--o-avatar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
37
38$bg-color--h: props.def(--o-avatar--bg-color--h, 354, 'color') !default;
39$bg-color--s: props.def(--o-avatar--bg-color--s, 44%, 'color') !default;
40$bg-color--l: props.def(--o-avatar--bg-color--l, 45%, 'color') !default;
41
42$bg-color-2--h: props.def(--o-avatar--bg-color-2--h, 354, 'color') !default;
43$bg-color-2--s: props.def(--o-avatar--bg-color-2--s, 44%, 'color') !default;
44$bg-color-2--l: props.def(--o-avatar--bg-color-2--l, 45%, 'color') !default;
45
46$bg-angle: props.def(--o-avatar--bg-angle, 180deg) !default;
47
48$key-focus--border-color: props.def(--o-avatar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
49$key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
50
51$sizes: (
52 'xs' $size--xs $font-size--xs $indicator-size--xs,
53 'sm' $size--sm $font-size--sm $indicator-size--sm,
54 'lg' $size--lg $font-size--lg $indicator-size--lg,
55 'xl' $size--xl $font-size--xl $indicator-size--xl,
56 'xxl' $size--xxl $font-size--xxl $indicator-size--xxl,
57 'xxxl' $size--xxxl $font-size--xxxl $indicator-size--xxxl,
58) !default;
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index d0eaf52..346cf5f 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -1,26 +1,23 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:meta';
2@use '../functions' as fn; 2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props';
4@use '../props' as *;
3 5
4@include iro.props-namespace('backdrop') { 6@forward 'backdrop.vars';
5 @include iro.props-store(( 7@use 'backdrop.vars' as vars;
6 --dims: (
7 --z-index: 10000,
8 --blur: 2em,
9 ),
10 --colors: (
11 --bg: rgba(#000, .75),
12 ),
13 ));
14 8
15 @include iro.bem-object(iro.props-namespace()) { 9@mixin styles {
16 display: flex; 10 @include materialize-at-root(meta.module-variables('vars'));
17 position: fixed; 11
18 z-index: fn.dim(--z-index); 12 @include bem.object('backdrop') {
19 inset: 0; 13 position: fixed;
20 box-sizing: border-box; 14 inset: 0;
21 flex-direction: column; 15 z-index: props.get(vars.$z-index);
22 overflow: auto; 16 box-sizing: border-box;
23 background-color: fn.color(--bg); 17 display: flex;
24 backdrop-filter: blur(fn.dim(--blur)); 18 flex-direction: column;
25 } 19 overflow: auto;
20 background-color: props.get(vars.$bg-color);
21 backdrop-filter: blur(props.get(vars.$blur));
22 }
26} 23}
diff --git a/src/objects/_backdrop.vars.scss b/src/objects/_backdrop.vars.scss
new file mode 100644
index 0000000..8bae733
--- /dev/null
+++ b/src/objects/_backdrop.vars.scss
@@ -0,0 +1,6 @@
1@use 'iro-sass/src/props';
2@use '../core.vars' as core;
3
4$z-index: props.def(--o-backdrop--z-index, 10000) !default;
5$blur: props.def(--o-backdrop--blur, 2em) !default;
6$bg-color: props.def(--o-backdrop--bg-color, props.get(core.$transparent-colors, --black, --600), 'color') !default;
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
deleted file mode 100644
index 4e1662f..0000000
--- a/src/objects/_badge.scss
+++ /dev/null
@@ -1,300 +0,0 @@
1@use 'sass:string';
2@use 'iro-sass/src/index' as iro;
3@use '../functions' as fn;
4
5$sizes: 'sm' 'lg' 'xl' !default;
6$themes: 'accent' 'positive' 'negative' 'warning' !default;
7$static-themes: 'black' 'white' !default;
8
9@mixin theme($theme) {
10 background-color: fn.color(--#{$theme} --bg);
11 color: fn.color(--#{$theme} --label);
12
13 &:link,
14 &:visited,
15 &:enabled {
16 &:hover,
17 &:focus-visible {
18 background-color: fn.color(--#{$theme} --hover --bg);
19 color: fn.color(--#{$theme} --hover --label);
20 }
21
22 &:active {
23 background-color: fn.color(--#{$theme} --active --bg);
24 color: fn.color(--#{$theme} --active --label);
25 }
26 }
27
28 @include iro.bem-modifier('quiet') {
29 background-color: fn.color(--#{$theme}-quiet --bg);
30 color: fn.color(--#{$theme}-quiet --label);
31
32 &:link,
33 &:visited,
34 &:enabled {
35 &:hover,
36 &:focus-visible {
37 background-color: fn.color(--#{$theme}-quiet --hover --bg);
38 color: fn.color(--#{$theme}-quiet --hover --label);
39 }
40
41 &:active {
42 background-color: fn.color(--#{$theme}-quiet --active --bg);
43 color: fn.color(--#{$theme}-quiet --active --label);
44 }
45 }
46 }
47
48 @if string.slice($theme, 1, 7) == 'static-' {
49 &::after {
50 outline: fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border);
51 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline);
52 }
53 }
54}
55
56@include iro.props-namespace('badge') {
57 @include iro.props-store((
58 --dims: (
59 --pad-b: fn.global-dim(--size --50),
60 --pad-i: fn.global-dim(--size --100),
61 --pad-i-pill: fn.global-dim(--size --150),
62 --pad-i-label: fn.global-dim(--size --50),
63 --rounding: fn.global-dim(--rounding),
64 --font-size: fn.global-dim(--font-size --75),
65
66 --sm: (
67 --pad-b: fn.global-dim(--size --25),
68 --pad-i: fn.global-dim(--size --75),
69 --pad-i-pill: fn.global-dim(--size --125),
70 --pad-i-label: fn.global-dim(--size --25),
71 --font-size: fn.global-dim(--font-size --50),
72 ),
73 --lg: (
74 --pad-b: fn.global-dim(--size --75),
75 --pad-i: fn.global-dim(--size --125),
76 --pad-i-pill: fn.global-dim(--size --175),
77 --pad-i-label: fn.global-dim(--size --50),
78 --font-size: fn.global-dim(--font-size --100),
79 ),
80 --xl: (
81 --pad-b: fn.global-dim(--size --100),
82 --pad-i: fn.global-dim(--size --150),
83 --pad-i-pill: fn.global-dim(--size --225),
84 --pad-i-label: fn.global-dim(--size --75),
85 --font-size: fn.global-dim(--font-size --150),
86 ),
87
88 --key-focus: (
89 --border: fn.global-dim(--key-focus --border),
90 --border-offset: fn.global-dim(--key-focus --border-offset),
91 --outline: fn.global-dim(--key-focus --outline),
92 ),
93 ),
94 --colors: (
95 --bg: fn.global-color(--text-mute),
96 --label: fn.global-color(--bg-l2),
97 --hover: (
98 --bg: fn.global-color(--text),
99 ),
100 --active: (
101 --bg: fn.global-color(--heading),
102 ),
103 --key-focus: (
104 --label: fn.global-color(--focus --text),
105 --border: fn.global-color(--focus --border),
106 --outline: fn.global-color(--focus --outline),
107 ),
108
109 --quiet: (
110 --bg: fn.global-color(--border-mute),
111 --label: fn.global-color(--heading),
112 --hover: (
113 --bg: fn.global-color(--border),
114 ),
115 --active: (
116 --bg: fn.global-color(--border-strong),
117 ),
118 ),
119 ),
120 ));
121
122 @each $theme in $themes {
123 @include iro.props-store((
124 --colors: (
125 --#{$theme}: (
126 --bg: fn.global-color(--#{$theme}-static --900),
127 --label: fn.global-color(--#{$theme}-static --900-text),
128 --hover: (
129 --bg: fn.global-color(--#{$theme}-static --1000),
130 --label: fn.global-color(--#{$theme}-static --1000-text),
131 ),
132 --active: (
133 --bg: fn.global-color(--#{$theme}-static --1100),
134 --label: fn.global-color(--#{$theme}-static --1000-text),
135 ),
136 ),
137
138 --#{$theme}-quiet: (
139 --bg: fn.global-color(--#{$theme} --200),
140 --label: fn.global-color(--#{$theme} --1100),
141 --hover: (
142 --bg: fn.global-color(--#{$theme} --300),
143 --label: fn.global-color(--#{$theme} --1200),
144 ),
145 --active: (
146 --bg: fn.global-color(--#{$theme} --400),
147 --label: fn.global-color(--#{$theme} --1300),
148 ),
149 )
150 ),
151 ));
152 }
153
154 @each $theme in $static-themes {
155 @include iro.props-store((
156 --colors: (
157 --static-#{$theme}: (
158 --bg: fn.global-color(--#{$theme}-transparent --800),
159 --label: fn.global-color(--#{$theme}-transparent --text),
160 --hover: (
161 --bg: fn.global-color(--#{$theme}-transparent --900),
162 --label: fn.global-color(--#{$theme}-transparent --text),
163 ),
164 --active: (
165 --bg: fn.global-color(--#{$theme}-transparent --900),
166 --label: fn.global-color(--#{$theme}-transparent --text),
167 ),
168 --key-focus: (
169 --bg: fn.global-color(--#{$theme}-transparent --100),
170 --label: fn.global-color(--#{$theme}-transparent --900),
171 --border: fn.global-color(--#{$theme}-transparent --900),
172 --outline: fn.global-color(--#{$theme}-transparent --300),
173 ),
174 ),
175
176 --static-#{$theme}-quiet: (
177 --bg: fn.global-color(--#{$theme}-transparent --200),
178 --label: fn.global-color(--#{$theme}-transparent --900),
179 --hover: (
180 --bg: fn.global-color(--#{$theme}-transparent --300),
181 --label: fn.global-color(--#{$theme}-transparent --900),
182 ),
183 --active: (
184 --bg: fn.global-color(--#{$theme}-transparent --400),
185 --label: fn.global-color(--#{$theme}-transparent --900),
186 ),
187 )
188 )
189 ));
190 }
191
192 @include iro.bem-object(iro.props-namespace()) {
193 display: inline-block;
194 position: relative;
195 padding-block: fn.dim(--pad-b);
196 padding-inline: fn.dim(--pad-i);
197 border-radius: fn.dim(--rounding);
198 background-color: fn.color(--bg);
199 background-clip: padding-box;
200 color: fn.color(--label);
201 font-size: fn.dim(--font-size);
202 line-height: fn.global-dim(--font --standard --line-height);
203 text-align: center;
204 text-decoration: none;
205
206 &::after {
207 content: '';
208 display: none;
209 position: absolute;
210 z-index: 1;
211 inset: calc(-1 * fn.dim(--key-focus --border-offset));
212 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset));
213 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
214 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
215 pointer-events: none;
216 }
217
218 &:link,
219 &:visited,
220 &:enabled {
221 &:hover,
222 &:focus-visible {
223 background-color: fn.color(--hover --bg);
224 }
225
226 &:active {
227 background-color: fn.color(--active --bg);
228 }
229 }
230
231 @include iro.bem-elem('label') {
232 margin-inline: fn.dim(--pad-i-label);
233 }
234
235 @include iro.bem-modifier('quiet') {
236 background-color: fn.color(--quiet --bg);
237 color: fn.color(--quiet --label);
238
239 &:link,
240 &:visited,
241 &:enabled {
242 &:hover,
243 &:focus-visible {
244 background-color: fn.color(--quiet --hover --bg);
245 }
246
247 &:active {
248 background-color: fn.color(--quiet --active --bg);
249 }
250 }
251 }
252
253 @each $theme in $themes {
254 @include iro.bem-modifier($theme) {
255 @include theme($theme);
256 }
257 }
258
259 &:link,
260 &:visited,
261 &:enabled {
262 &:focus-visible {
263 &::after {
264 display: block;
265 }
266 }
267 }
268
269 @each $theme in $static-themes {
270 @include iro.bem-modifier(static-#{$theme}) {
271 @include theme(static-#{$theme});
272 }
273 }
274
275 @include iro.bem-modifier('pill') {
276 padding-inline: fn.dim(--pad-i-pill);
277 border-radius: 10em;
278
279 &::after {
280 border-radius: 10em;
281 }
282 }
283
284 @each $size in $sizes {
285 @include iro.bem-modifier($size) {
286 padding-block: fn.dim(--#{$size} --pad-b);
287 padding-inline: fn.dim(--#{$size} --pad-i);
288 font-size: fn.dim(--#{$size} --font-size);
289
290 @include iro.bem-elem('label') {
291 margin-inline: fn.dim(--#{$size} --pad-i-label);
292 }
293
294 @include iro.bem-modifier('pill') {
295 padding-inline: fn.dim(--#{$size} --pad-i-pill);
296 }
297 }
298 }
299 }
300}
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 3ef4813..8163cf9 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -1,301 +1,285 @@
1@use 'sass:list'; 1@use 'sass:list';
2@use 'iro-sass/src/index' as iro; 2@use 'sass:map';
3@use '../functions' as fn; 3@use 'sass:meta';
4@use 'sass:string';
5@use 'iro-sass/src/bem';
6@use 'iro-sass/src/props';
7@use '../props' as *;
4 8
5$sizes: 'sm' 'lg' 'xl' !default; 9@forward 'button.vars';
6$themes: 'accent' 'negative' !default; 10@use 'button.vars' as vars;
7$static-themes: 'black' 'white' !default;
8 11
9@mixin theme($theme: ()) { 12@mixin -apply-theme($theme, $key: ()) {
10 &:link, 13 color: props.get($theme, list.join($key, --disabled --label-color)...);
11 &:visited, 14 background-color: props.get($theme, list.join($key, --disabled --bg-color)...);
12 &:enabled { 15 border-color: props.get($theme, list.join($key, --disabled --border-color)...);
13 border-color: transparent;
14 background-color: fn.color(list.join($theme, --bg));
15 color: fn.color(list.join($theme, --label));
16 }
17
18 @include iro.bem-modifier('outline') {
19 &:link,
20 &:visited,
21 &:enabled {
22 border-color: fn.color(list.join($theme, --outline-border));
23 background-color: transparent;
24 color: fn.color(list.join($theme, --outline-label));
25 }
26 }
27 16
28 &:link, 17 &::after {
29 &:visited, 18 outline-color: props.get($theme, list.join($key, --key-focus --border-color)...);
30 &:enabled { 19 box-shadow:
31 &:hover, 20 0
32 &:focus-visible { 21 0
33 border-color: transparent; 22 0
34 background-color: fn.color(list.join($theme, --hover --bg)); 23 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
35 color: fn.color(list.join($theme, --hover --label)); 24 props.get($theme, list.join($key, --key-focus --outline-color)...);
36 } 25 }
37 26
38 &:active { 27 &:link,
39 border-color: transparent; 28 &:visited,
40 background-color: fn.color(list.join($theme, --active --bg)); 29 &:enabled {
41 color: fn.color(list.join($theme, --active --label)); 30 color: props.get($theme, list.join($key, --label-color)...);
42 } 31 background-color: props.get($theme, list.join($key, --bg-color)...);
43 } 32 border-color: props.get($theme, list.join($key, --border-color)...);
44} 33 box-shadow:
34 props.get(vars.$shadow-x)
35 props.get(vars.$shadow-y)
36 props.get(vars.$shadow-blur)
37 props.get(vars.$shadow-grow)
38 props.get($theme, list.join($key, --shadow-color)...);
39
40 &:hover,
41 &:focus-visible {
42 color: props.get($theme, list.join($key, --hover --label-color)...);
43 background-color: props.get($theme, list.join($key, --hover --bg-color)...);
44 border-color: props.get($theme, list.join($key, --hover --border-color)...);
45 }
45 46
46@mixin static-theme($theme: ()) { 47 &:active {
47 border-color: transparent; 48 color: props.get($theme, list.join($key, --active --label-color)...);
48 background-color: fn.color(list.join($theme, --disabled --bg)); 49 background-color: props.get($theme, list.join($key, --active --bg-color)...);
49 color: fn.color(list.join($theme, --disabled --label)); 50 border-color: props.get($theme, list.join($key, --active --border-color)...);
51 box-shadow: none;
52 }
53 }
50 54
51 &::after { 55 @include bem.modifier('badge') {
52 outline: fn.color(list.join($theme, --key-focus --border)) solid fn.dim(--key-focus --border); 56 color: props.get($theme, list.join($key, --badge --label-color)...);
53 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline)); 57 background-color: props.get($theme, list.join($key, --badge --bg-color)...);
54 } 58 border-color: props.get($theme, list.join($key, --badge --border-color)...);
55 59 box-shadow: none;
56 @include iro.bem-modifier('outline') {
57 border-color: fn.color(list.join($theme, --disabled --outline-border));
58 background-color: transparent;
59 }
60 60
61 @include theme($theme); 61 &:link,
62 &:visited,
63 &:enabled {
64 color: props.get($theme, list.join($key, --badge --label-color)...);
65 background-color: props.get($theme, list.join($key, --badge --bg-color)...);
66 border-color: props.get($theme, list.join($key, --badge --border-color)...);
67 box-shadow: none;
62 68
63 @include iro.bem-modifier('primary') { 69 &:hover,
64 @include theme(list.join($theme, --primary)); 70 &:focus-visible {
65 } 71 color: props.get($theme, list.join($key, --badge --hover --label-color)...);
66} 72 background-color: props.get($theme, list.join($key, --badge --hover --bg-color)...);
73 border-color: props.get($theme, list.join($key, --badge --hover --border-color)...);
74 }
67 75
68@include iro.props-namespace('button') { 76 &:active {
69 @include iro.props-store(( 77 color: props.get($theme, list.join($key, --badge --active --label-color)...);
70 --dims: ( 78 background-color: props.get($theme, list.join($key, --badge --active --bg-color)...);
71 --line-height: 1.4, 79 border-color: props.get($theme, list.join($key, --badge --active --border-color)...);
72 --pad-i: fn.global-dim(--size --200), 80 }
73 --pad-i-label: fn.global-dim(--size --75), 81 }
74 --pad-b: fn.global-dim(--size --65), 82 }
75 --border: fn.global-dim(--border --medium),
76 --rounding: 10em,
77 --font-size: fn.global-dim(--font-size --100),
78 83
79 --sm: ( 84 @include bem.modifier('quiet') {
80 --pad-i: fn.global-dim(--size --150), 85 color: props.get($theme, list.join($key, --quiet --disabled --label-color)...);
81 --pad-i-label: fn.global-dim(--size --50), 86 background-color: transparent;
82 --pad-b: fn.global-dim(--size --25), 87 border-color: transparent;
83 --font-size: fn.global-dim(--font-size --75),
84 ),
85 --lg: (
86 --pad-i: fn.global-dim(--size --250),
87 --pad-i-label: fn.global-dim(--size --100),
88 --pad-b: fn.global-dim(--size --100),
89 --font-size: fn.global-dim(--font-size --150),
90 ),
91 --xl: (
92 --pad-i: fn.global-dim(--size --300),
93 --pad-i-label: fn.global-dim(--size --150),
94 --pad-b: fn.global-dim(--size --150),
95 --font-size: fn.global-dim(--font-size --200),
96 ),
97
98 --key-focus: (
99 --border: fn.global-dim(--key-focus --border),
100 --border-offset: fn.global-dim(--key-focus --border-offset),
101 --outline: fn.global-dim(--key-focus --outline),
102 ),
103 ),
104 --colors: (
105 --bg: fn.global-color(--border-mute),
106 --label: fn.global-color(--text),
107 --outline-border: fn.global-color(--border),
108 --outline-label: fn.global-color(--text),
109 88
110 --hover: ( 89 &:link,
111 --bg: fn.global-color(--border), 90 &:visited,
112 --label: fn.global-color(--heading), 91 &:enabled {
113 ), 92 color: props.get($theme, list.join($key, --quiet --label-color)...);
114 --active: ( 93 background-color: transparent;
115 --bg: fn.global-color(--border-strong), 94 border-color: transparent;
116 --label: fn.global-color(--heading), 95 box-shadow: none;
117 ),
118 --disabled: (
119 --bg: fn.global-color(--border-mute),
120 --outline-border: fn.global-color(--border),
121 --label: fn.global-color(--text-disabled),
122 ),
123 --key-focus: (
124 --label: fn.global-color(--focus --text),
125 --border: fn.global-color(--focus --border),
126 --outline: fn.global-color(--focus --outline),
127 ),
128
129 --primary: (
130 --bg: fn.global-color(--base --800),
131 --label: fn.global-color(--base --800-text),
132 --outline-border: fn.global-color(--base --800),
133 --outline-label: fn.global-color(--text),
134 96
135 --hover: ( 97 &:hover,
136 --bg: fn.global-color(--base --900), 98 &:focus-visible {
137 --label: fn.global-color(--base --900-text), 99 color: props.get($theme, list.join($key, --quiet --hover --label-color)...);
138 ), 100 background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
139 --active: ( 101 border-color: transparent;
140 --bg: fn.global-color(--base --900), 102 }
141 --label: fn.global-color(--base --900-text),
142 ),
143 ),
144 ),
145 ));
146 103
147 @each $theme in $themes { 104 &:active {
148 @include iro.props-store(( 105 color: props.get($theme, list.join($key, --quiet --active --label-color)...);
149 --colors: ( 106 background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
150 --#{$theme}: ( 107 border-color: transparent;
151 --bg: fn.global-color(--#{$theme}-static --900), 108 }
152 --label: fn.global-color(--#{$theme}-static --900-text), 109 }
153 --outline-border: fn.global-color(--#{$theme} --900), 110 }
154 --outline-label: fn.global-color(--#{$theme} --1000),
155 111
156 --hover: ( 112 @include bem.is('highlighted') {
157 --bg: fn.global-color(--#{$theme}-static --1000), 113 &:link,
158 --label: fn.global-color(--#{$theme}-static --1000-text), 114 &:visited,
159 ), 115 &:enabled {
160 --active: ( 116 &,
161 --bg: fn.global-color(--#{$theme}-static --1100), 117 &:hover,
162 --label: fn.global-color(--#{$theme}-static --1100-text), 118 &:focus-visible {
163 ), 119 border-color: props.get($theme, list.join($key, --highlighted --border-color)...);
164 ), 120 }
165 ),
166 ));
167 }
168 121
169 @each $theme in $static-themes { 122 box-shadow:
170 @include iro.props-store(( 123 0 0 0 1px props.get($theme, list.join($key, --highlighted --border-color)...),
171 --colors: ( 124 props.get(vars.$shadow-x)
172 --static-#{$theme}: ( 125 props.get(vars.$shadow-y)
173 --bg: fn.global-color(--#{$theme}-transparent --200), 126 props.get(vars.$shadow-blur)
174 --label: fn.global-color(--#{$theme}-transparent --900), 127 props.get(vars.$shadow-grow)
175 --outline-border: fn.global-color(--#{$theme}-transparent --300), 128 props.get($theme, list.join($key, --highlighted --shadow-color)...);
176 --outline-label: fn.global-color(--#{$theme}-transparent --900),
177 129
178 --hover: ( 130 &:focus-visible {
179 --bg: fn.global-color(--#{$theme}-transparent --300), 131 box-shadow:
180 --label: fn.global-color(--#{$theme}-transparent --900), 132 props.get(vars.$shadow-x)
181 ), 133 props.get(vars.$shadow-y)
182 --active: ( 134 props.get(vars.$shadow-blur)
183 --bg: fn.global-color(--#{$theme}-transparent --400), 135 props.get(vars.$shadow-grow)
184 --label: fn.global-color(--#{$theme}-transparent --900), 136 props.get($theme, list.join($key, --shadow-color)...);
185 ), 137 }
186 --disabled: ( 138 }
187 --bg: fn.global-color(--#{$theme}-transparent --200), 139 }
188 --outline-border: fn.global-color(--#{$theme}-transparent --300),
189 --label: fn.global-color(--#{$theme}-transparent --500),
190 ),
191 --key-focus: (
192 --bg: fn.global-color(--#{$theme}-transparent --100),
193 --label: fn.global-color(--#{$theme}-transparent --900),
194 --border: fn.global-color(--#{$theme}-transparent --900),
195 --outline: fn.global-color(--#{$theme}-transparent --300),
196 ),
197 140
198 --primary: ( 141 @include bem.is('selected') {
199 --bg: fn.global-color(--#{$theme}-transparent --800), 142 color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
200 --label: fn.global-color(--#{$theme}-transparent --text), 143 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
201 --outline-border: fn.global-color(--#{$theme}-transparent --800), 144 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...);
202 --outline-label: fn.global-color(--#{$theme}-transparent --900), 145
146 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'badge') {
147 color: props.get($theme, list.join($key, --selected --label-color)...);
148 background-color: props.get($theme, list.join($key, --selected --bg-color)...);
149 border-color: props.get($theme, list.join($key, --selected --border-color)...);
150 }
151
152 &:link,
153 &:visited,
154 &:enabled {
155 &:hover,
156 &:focus-visible {
157 color: props.get($theme, list.join($key, --selected --hover --label-color)...);
158 background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
159 border-color: props.get($theme, list.join($key, --selected --hover --border-color)...);
160 }
203 161
204 --hover: ( 162 &:active {
205 --bg: fn.global-color(--#{$theme}-transparent --900), 163 color: props.get($theme, list.join($key, --selected --active --label-color)...);
206 --label: fn.global-color(--#{$theme}-transparent --text), 164 background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
207 ), 165 border-color: props.get($theme, list.join($key, --selected --active --border-color)...);
208 --active: ( 166 }
209 --bg: fn.global-color(--#{$theme}-transparent --900), 167 }
210 --label: fn.global-color(--#{$theme}-transparent --text), 168 }
211 ), 169}
212 ),
213 ),
214 ),
215 ));
216 }
217 170
218 @include iro.bem-object(iro.props-namespace()) { 171@mixin styles {
219 display: inline-block; 172 @include materialize-at-root(meta.module-variables('vars'));
220 position: relative;
221 padding-block: fn.dim(--pad-b);
222 padding-inline: fn.dim(--pad-i);
223 border: fn.dim(--border) solid transparent;
224 border-radius: fn.dim(--rounding);
225 border-color: fn.color(--disabled --bg);
226 background-color: fn.color(--disabled --bg);
227 color: fn.color(--disabled --label);
228 font-size: fn.dim(--font-size);
229 font-weight: 500;
230 line-height: fn.dim(--line-height);
231 text-align: center;
232 text-decoration: none;
233 173
234 &::after { 174 @include bem.object('button') {
235 content: ''; 175 position: relative;
236 display: none; 176 display: inline-block;
237 position: absolute; 177 padding-block: props.get(vars.$pad-b);
238 z-index: 1; 178 padding-inline: props.get(vars.$pad-i);
239 inset: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset)); 179 text-overflow: ellipsis;
240 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); 180 font-size: props.get(vars.$font-size);
241 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); 181 line-height: props.get(vars.$line-height);
242 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); 182 text-align: center;
243 pointer-events: none; 183 white-space: nowrap;
244 } 184 text-decoration: none;
185 border: props.get(vars.$border-width) solid transparent;
186 border-radius: props.get(vars.$rounding);
187 transition: color .1s, background-color .1s, border-color .1s, box-shadow .1s;
245 188
246 &:link, 189 &::after {
247 &:visited, 190 position: absolute;
248 &:enabled { 191 inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset));
249 &:focus-visible { 192 z-index: 1;
250 &::after { 193 display: none;
251 display: block; 194 pointer-events: none;
252 } 195 outline: transparent solid props.get(vars.$key-focus--border-width);
253 } 196 content: '';
254 } 197 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
198 }
255 199
256 @include iro.bem-elem('label') { 200 &:link,
257 margin-inline: fn.dim(--pad-i-label); 201 &:visited,
258 } 202 &:enabled {
259 203 &:focus-visible {
260 @include iro.bem-modifier('block') { 204 transition: none;
261 display: block;
262 }
263
264 @include iro.bem-modifier('outline') {
265 border-color: fn.color(--disabled --outline-border);
266 background-color: transparent;
267 }
268 205
269 @each $size in $sizes { 206 &::after {
270 @include iro.bem-modifier($size) { 207 display: block;
271 padding-block: fn.dim(--#{$size} --pad-b); 208 }
272 padding-inline: fn.dim(--#{$size} --pad-i); 209 }
273 font-size: fn.dim(--#{$size} --font-size); 210 }
274 211
275 @include iro.bem-elem('label') { 212 @include bem.elem('label') {
276 margin-inline: fn.dim(--#{$size} --pad-i-label); 213 margin-inline: props.get(vars.$pad-i-label);
277 } 214 }
278 }
279 }
280 215
281 @include static-theme; 216 @include -apply-theme(vars.$default-theme);
282 217
283 @each $theme in $themes { 218 @each $theme in map.keys(props.get(vars.$themes)) {
284 @include iro.bem-modifier($theme) { 219 @include bem.modifier(string.slice($theme, 3)) {
285 @include theme(--#{$theme}); 220 @include -apply-theme(vars.$themes, $theme);
286 } 221 }
287 } 222 }
288 223
289 @each $theme in $static-themes { 224 @include bem.modifier('pill') {
290 @include iro.bem-modifier(static-#{$theme}) { 225 padding-inline: props.get(vars.$pad-i-pill);
291 @include static-theme(--static-#{$theme}); 226 border-radius: 100em;
292 } 227
293 } 228 &::after {
229 border-radius: 100em;
230 }
231 }
232
233 @include bem.modifier('icon') {
234 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
235 padding-inline: 0;
236 }
237
238 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
239 @include bem.modifier($mod) {
240 padding-block: props.get($pad-b);
241 padding-inline: props.get($pad-i);
242 font-size: props.get($font-size);
243
244 @include bem.elem('label') {
245 margin-inline: props.get($pad-i-label);
246 }
247
248 @include bem.modifier('pill') {
249 padding-inline: props.get($pad-i-pill);
250 }
251
252 @include bem.modifier('icon') {
253 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
254 padding-inline: 0;
255 }
256 }
257 }
258
259 @include bem.modifier('align-block') {
260 margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width));
261
262 @include bem.modifier('pill') {
263 margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width));
264 }
265
266 @include bem.modifier('icon') {
267 margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
268 }
269
270 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
271 @include bem.modifier($mod) {
272 margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width));
294 273
295 @include iro.bem-modifier('round') { 274 @include bem.modifier('pill') {
296 inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b)); 275 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width));
297 padding-inline: 0; 276 }
298 border-radius: 100em; 277
299 } 278 @include bem.modifier('icon') {
300 } 279 margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
280 }
281 }
282 }
283 }
284 }
301} 285}
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
new file mode 100644
index 0000000..6e2298f
--- /dev/null
+++ b/src/objects/_button.vars.scss
@@ -0,0 +1,374 @@
1@use 'sass:map';
2@use 'sass:string';
3@use 'iro-sass/src/props';
4@use '../core.vars' as core;
5
6$line-height: props.def(--o-button--line-height, 1.4) !default;
7$border-width: props.def(--o-button--border-width, props.get(core.$border-width--thin)) !default;
8$rounding: props.def(--o-button--rounding, props.get(core.$rounding--sm)) !default;
9
10$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--75)) !default;
11$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default;
12$pad-i-pill--sm: props.def(--o-button--sm--pad-i-pill, props.get(core.$size--115)) !default;
13$pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--40)) !default;
14$font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default;
15
16$pad-i: props.def(--o-button--pad-i, props.get(core.$size--115)) !default;
17$pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--40)) !default;
18$pad-i-pill: props.def(--o-button--pad-i-pill, props.get(core.$size--150)) !default;
19$pad-b: props.def(--o-button--pad-b, props.get(core.$size--85)) !default;
20$font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default;
21
22$pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--160)) !default;
23$pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--65)) !default;
24$pad-i-pill--lg: props.def(--o-button--lg--pad-i-pill, props.get(core.$size--175)) !default;
25$pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--115)) !default;
26$font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default;
27
28$pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--200)) !default;
29$pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--85)) !default;
30$pad-i-pill--xl: props.def(--o-button--xl--pad-i-pill, props.get(core.$size--225)) !default;
31$pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default;
32$font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default;
33
34$shadow-x: props.def(--o-button--shadow-x, props.get(core.$shadow--l1--x)) !default;
35$shadow-y: props.def(--o-button--shadow-y, props.get(core.$shadow--l1--y)) !default;
36$shadow-blur: props.def(--o-button--shadow-blur, props.get(core.$shadow--l1--blur)) !default;
37$shadow-grow: props.def(--o-button--shadow-grow, props.get(core.$shadow--l1--grow)) !default;
38
39$key-focus--border-width: props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
40$key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
41$key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
42
43$fixed-sizes: (
44 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
45 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
46 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
47) !default;
48
49$themes: props.def(--o-button, (), 'color');
50
51$default-theme-override: () !default;
52$default-theme: map.deep-merge((
53 --bg-color: props.get(core.$theme, --bg-l2),
54 --label-color: props.get(core.$theme, --text),
55 --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong),
56 --shadow-color: props.get(core.$theme, --shadow),
57
58 --hover: (
59 --bg-color: props.get(core.$theme, --bg-l1),
60 --label-color: props.get(core.$theme, --heading),
61 --border-color: props.get(core.$theme, --border),
62 ),
63
64 --active: (
65 --bg-color: props.get(core.$theme, --border-mute),
66 --label-color: props.get(core.$theme, --heading),
67 --border-color: props.get(core.$theme, --border-strong),
68 ),
69
70 --disabled: (
71 --bg-color: transparent,
72 --label-color: props.get(core.$theme, --border-strong),
73 --border-color: props.get(core.$theme, --text-disabled),
74 ),
75
76 --key-focus: (
77 --border-color: props.get(core.$theme, --focus, --border),
78 --outline-color: props.get(core.$theme, --focus, --outline),
79 ),
80
81 --highlighted: (
82 --border-color: props.get(core.$theme, --focus, --border),
83 --shadow-color: props.get(core.$theme, --focus, --outline),
84 ),
85
86 --selected: (
87 --bg-color: props.get(core.$theme, --text),
88 --label-color: props.get(core.$theme, --base, --50),
89 --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading),
90
91 --hover: (
92 --bg-color: props.get(core.$theme, --heading),
93 --label-color: props.get(core.$theme, --base, --50),
94 --border-color: props.get(core.$theme, --heading),
95 ),
96
97 --active: (
98 --bg-color: props.get(core.$theme, --heading),
99 --label-color: props.get(core.$theme, --base, --50),
100 --border-color: props.get(core.$theme, --heading),
101 ),
102
103 --disabled: (
104 --bg-color: props.get(core.$theme, --border-mute),
105 --label-color: props.get(core.$theme, --border-strong),
106 --border-color: props.get(core.$theme, --border-mute),
107 ),
108 ),
109
110 --badge: (
111 --bg-color: props.get(core.$theme, --border-mute),
112 --label-color: props.get(core.$theme, --heading),
113 --border-color: props.get(core.$theme, --border-mute),
114
115 --hover: (
116 --bg-color: props.get(core.$theme, --border),
117 --label-color: props.get(core.$theme, --heading),
118 --border-color: props.get(core.$theme, --border),
119 ),
120
121 --active: (
122 --bg-color: props.get(core.$theme, --border-strong),
123 --label-color: props.get(core.$theme, --heading),
124 --border-color: props.get(core.$theme, --border-strong),
125 ),
126 ),
127
128 --quiet: (
129 --label-color: props.get(core.$theme, --text),
130
131 --hover: (
132 --bg-color: props.get(core.$theme, --border-mute),
133 --label-color: props.get(core.$theme, --heading),
134 ),
135
136 --active: (
137 --bg-color: props.get(core.$theme, --border),
138 --label-color: props.get(core.$theme, --heading),
139 ),
140
141 --disabled: (
142 --label-color: props.get(core.$theme, --border-strong),
143 ),
144 ),
145), $default-theme-override) !default;
146$default-theme: props.def(--o-button, $default-theme, 'color');
147
148$default-theme-dark-override: () !default;
149$default-theme-dark: map.deep-merge((
150 --bg-color: props.get(core.$theme, --border-mute),
151 --border-color: props.get(core.$theme, --border-mute),
152
153 --hover: (
154 --bg-color: props.get(core.$theme, --border),
155 --border-color: props.get(core.$theme, --border),
156 ),
157
158 --active: (
159 --bg-color: props.get(core.$theme, --border-strong),
160 --border-color: props.get(core.$theme, --border-strong),
161 ),
162
163 --selected: (
164 --border-color: props.get(core.$theme, --text),
165 ),
166), $default-theme-override) !default;
167$default-theme-dark: props.def(--o-button, $default-theme-dark, 'dark');
168
169@each $theme in map.keys(props.get(core.$transparent-colors)) {
170 $button-theme: --static-#{string.slice($theme, 3)};
171
172 $themes: props.merge($themes, (
173 $button-theme: (
174 --bg-color: props.get(core.$transparent-colors, $theme, --200),
175 --label-color: props.get(core.$transparent-colors, $theme, --900),
176 --border-color: props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --300) props.get(core.$transparent-colors, $theme, --400),
177 --shadow-color: props.get(core.$transparent-colors, --black, --200),
178
179 --hover: (
180 --bg-color: props.get(core.$transparent-colors, $theme, --300),
181 --label-color: props.get(core.$transparent-colors, $theme, --900),
182 --border-color: props.get(core.$transparent-colors, $theme, --400),
183 ),
184
185 --active: (
186 --bg-color: props.get(core.$transparent-colors, $theme, --400),
187 --label-color: props.get(core.$transparent-colors, $theme, --900),
188 --border-color: props.get(core.$transparent-colors, $theme, --500),
189 ),
190
191 --disabled: (
192 --bg-color: props.get(core.$transparent-colors, $theme, --100),
193 --label-color: props.get(core.$transparent-colors, $theme, --500),
194 --border-color: props.get(core.$transparent-colors, $theme, --300),
195 ),
196
197 --key-focus: (
198 --border-color: props.get(core.$transparent-colors, $theme, --900),
199 --outline-color: props.get(core.$transparent-colors, $theme, --300),
200 ),
201
202 --highlighted: (
203 --border-color: props.get(core.$transparent-colors, $theme, --900),
204 --shadow-color: props.get(core.$transparent-colors, --black, --200),
205 ),
206
207 --selected: (
208 --bg-color: props.get(core.$transparent-colors, $theme, --800),
209 --label-color: props.get(core.$transparent-colors, $theme, --text),
210 --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200),
211
212 --hover: (
213 --bg-color: props.get(core.$transparent-colors, $theme, --900),
214 --label-color: props.get(core.$transparent-colors, $theme, --text),
215 --border-color: props.get(core.$transparent-colors, $theme, --100),
216 ),
217
218 --active: (
219 --bg-color: props.get(core.$transparent-colors, $theme, --900),
220 --label-color: props.get(core.$transparent-colors, $theme, --text),
221 --border-color: props.get(core.$transparent-colors, $theme, --100),
222 ),
223
224 --disabled: (
225 --bg-color: props.get(core.$transparent-colors, $theme, --200),
226 --label-color: props.get(core.$transparent-colors, $theme, --500),
227 --border-color: props.get(core.$transparent-colors, $theme, --100),
228 ),
229 ),
230
231 --badge: (
232 --bg-color: props.get(core.$transparent-colors, $theme, --200),
233 --label-color: props.get(core.$transparent-colors, $theme, --900),
234 --border-color: transparent,
235
236 --hover: (
237 --bg-color: props.get(core.$transparent-colors, $theme, --300),
238 --label-color: props.get(core.$transparent-colors, $theme, --900),
239 --border-color: transparent,
240 ),
241
242 --active: (
243 --bg-color: props.get(core.$transparent-colors, $theme, --400),
244 --label-color: props.get(core.$transparent-colors, $theme, --900),
245 --border-color: transparent,
246 ),
247 ),
248
249 --quiet: (
250 --label-color: props.get(core.$transparent-colors, $theme, --900),
251
252 --hover: (
253 --bg-color: props.get(core.$transparent-colors, $theme, --200),
254 --label-color: props.get(core.$transparent-colors, $theme, --900),
255 ),
256
257 --active: (
258 --bg-color: props.get(core.$transparent-colors, $theme, --300),
259 --label-color: props.get(core.$transparent-colors, $theme, --900),
260 ),
261
262 --disabled: (
263 --label-color: props.get(core.$transparent-colors, $theme, --500),
264 ),
265 ),
266 )
267 ));
268}
269
270$themes-config: (
271 accent: --accent,
272 positive: --positive,
273 negative: --negative,
274 warning: --warning,
275) !default;
276
277@each $theme, $key in $themes-config {
278 $themes: props.merge($themes, (
279 --#{$theme}: (
280 --bg-color: props.get(core.$theme, $key, --100),
281 --label-color: props.get(core.$theme, $key, --1100),
282 --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600),
283 --shadow-color: props.get(core.$theme, $key, --200),
284
285 --hover: (
286 --bg-color: props.get(core.$theme, $key, --200),
287 --label-color: props.get(core.$theme, $key, --1200),
288 --border-color: props.get(core.$theme, $key, --600),
289 ),
290
291 --active: (
292 --bg-color: props.get(core.$theme, $key, --300),
293 --label-color: props.get(core.$theme, $key, --1300),
294 --border-color: props.get(core.$theme, $key, --800),
295 ),
296
297 --disabled: (
298 --bg-color: props.get(core.$theme, --bg-l1),
299 --label-color: props.get(core.$theme, --border-strong),
300 --border-color: props.get(core.$theme, --border),
301 ),
302
303 --key-focus: (
304 --border-color: props.get(core.$theme, --focus, --border),
305 --outline-color: props.get(core.$theme, --focus, --outline),
306 ),
307
308 --highlighted: (
309 --border-color: props.get(core.$theme, $key, --900),
310 --shadow-color: props.get(core.$theme, $key, --200),
311 ),
312
313 --selected: (
314 --bg-color: props.get(core.$theme, #{$key}-static, --900),
315 --label-color: props.get(core.$theme, #{$key}-static, --900-text),
316 --border-color: props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --900) props.get(core.$theme, #{$key}-static, --1000),
317
318 --hover: (
319 --bg-color: props.get(core.$theme, #{$key}-static, --1000),
320 --label-color: props.get(core.$theme, #{$key}-static, --1000-text),
321 --border-color: props.get(core.$theme, #{$key}-static, --1000),
322 ),
323
324 --active: (
325 --bg-color: props.get(core.$theme, #{$key}-static, --1100),
326 --label-color: props.get(core.$theme, #{$key}-static, --1100-text),
327 --border-color: props.get(core.$theme, #{$key}-static, --1100),
328 ),
329
330 --disabled: (
331 --bg-color: props.get(core.$theme, --border-mute),
332 --label-color: props.get(core.$theme, --border-strong),
333 --border-color: props.get(core.$theme, --border-mute),
334 ),
335 ),
336
337 --badge: (
338 --bg-color: props.get(core.$theme, $key, --100),
339 --label-color: props.get(core.$theme, $key, --1100),
340 --border-color: props.get(core.$theme, $key, --300),
341
342 --hover: (
343 --bg-color: props.get(core.$theme, $key, --200),
344 --label-color: props.get(core.$theme, $key, --1200),
345 --border-color: props.get(core.$theme, $key, --400),
346 ),
347
348 --active: (
349 --bg-color: props.get(core.$theme, $key, --300),
350 --label-color: props.get(core.$theme, $key, --1300),
351 --border-color: props.get(core.$theme, $key, --500),
352 ),
353 ),
354
355 --quiet: (
356 --label-color: props.get(core.$theme, $key, --1100),
357
358 --hover: (
359 --bg-color: props.get(core.$theme, $key, --200),
360 --label-color: props.get(core.$theme, $key, --1200),
361 ),
362
363 --active: (
364 --bg-color: props.get(core.$theme, $key, --300),
365 --label-color: props.get(core.$theme, $key, --1300),
366 ),
367
368 --disabled: (
369 --label-color: props.get(core.$theme, --border-strong),
370 ),
371 ),
372 )
373 ));
374}
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index f56a96c..ebab339 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -1,165 +1,277 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:meta';
2@use '../functions' as fn; 2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props';
4@use '../props' as *;
5@use 'avatar.vars' as avatar;
3 6
4@include iro.props-namespace('card') { 7@forward 'card.vars';
5 @include iro.props-store(( 8@use 'card.vars' as vars;
6 --dims: (
7 --border: fn.global-dim(--border --thin),
8 --divider: fn.global-dim(--border --thin),
9 --pad-i: fn.global-dim(--size --300),
10 --pad-b: fn.global-dim(--size --250),
11 --spacing: fn.global-dim(--size --200),
12 --rounding: fn.global-dim(--rounding),
13 9
14 --key-focus: ( 10@mixin styles {
15 --border: fn.global-dim(--key-focus --border), 11 @include materialize-at-root(meta.module-variables('vars'));
16 --border-offset: fn.global-dim(--key-focus --border-offset),
17 --outline: fn.global-dim(--key-focus --outline),
18 ),
19 ),
20 --colors: (
21 --bg: fn.global-color(--bg-l2),
22 --border: fn.global-color(--border-mute),
23 --divider: fn.global-color(--border-mute),
24 12
25 --hover: ( 13 @include bem.object('card') {
26 --border: fn.global-color(--border), 14 position: relative;
27 ), 15 display: flex;
16 flex-direction: column;
17 background-color: props.get(vars.$bg-color);
18 border: props.get(vars.$border-width) solid transparent;
19 border-color: props.get(vars.$border-color);
20 border-radius: props.get(vars.$rounding);
21 transition: transform .2s, background-color .2s, border-color .2s, box-shadow .2s;
28 22
29 --key-focus: ( 23 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
30 --label: fn.global-color(--focus --text), 24 &:hover,
31 --border: fn.global-color(--focus --border), 25 &:active,
32 --outline: fn.global-color(--focus --outline), 26 &:focus-visible {
33 ), 27 background-color: props.get(vars.$hover--bg-color);
28 border-color: props.get(vars.$hover--border-color);
29 box-shadow: none;
30 transform: translateY(props.get(vars.$hover--offset-b));
31 }
34 32
35 --quiet: ( 33 &:focus-visible {
36 --image: fn.global-color(--bg-base), 34 margin: calc(-1 * props.get(vars.$key-focus--border-width));
35 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
36 border: calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent;
37 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
38 box-shadow:
39 0 0 0
40 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
41 props.get(vars.$key-focus--outline-color);
42 transition: transform .2s;
43 }
44 }
37 45
38 --hover: ( 46 @include bem.modifier('borderless') {
39 --image: fn.global-color(--border), 47 border-color: props.get(vars.$bg-color);
40 ), 48 }
41 )
42 ),
43 ));
44 49
45 @include iro.bem-object(iro.props-namespace()) { 50 @include bem.modifier('shadow') {
46 display: block; 51 box-shadow:
47 border: fn.dim(--border) solid fn.color(--border); 52 props.get(vars.$shadow-x)
48 border-radius: fn.dim(--rounding); 53 props.get(vars.$shadow-y)
49 background-color: fn.color(--bg); 54 props.get(vars.$shadow-blur)
55 props.get(vars.$shadow-grow)
56 props.get(vars.$shadow-color);
50 57
51 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 58 @include bem.modifier('quiet') {
52 &:hover, 59 @include bem.elem('image') {
53 &:focus-visible, 60 box-shadow:
54 &:active { 61 props.get(vars.$shadow-x)
55 border-color: fn.color(--hover --border); 62 props.get(vars.$shadow-y)
56 } 63 props.get(vars.$shadow-blur)
64 props.get(vars.$shadow-grow)
65 props.get(vars.$shadow-color);
66 }
67 }
68 }
57 69
58 &:focus-visible { 70 @include bem.elem('avatar') {
59 border-color: fn.color(--key-focus --border); 71 margin-block-start: props.get(vars.$pad-b);
60 outline: fn.color(--key-focus --border) solid calc(fn.dim(--key-focus --border) - fn.dim(--border)); 72 margin-inline-start: props.get(vars.$pad-i);
61 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); 73 }
62 }
63 }
64 74
65 @include iro.bem-elem('avatar') { 75 @include bem.elem('image') {
66 margin-block-start: fn.dim(--pad-b); 76 position: relative;
67 margin-inline-start: fn.dim(--pad-i); 77 display: block;
68 } 78 flex: 0 0 auto;
79 inline-size: calc(100% + 2 * props.get(vars.$border-width));
80 margin: calc(-1 * props.get(vars.$border-width));
81 overflow: hidden;
82 object-fit: cover;
83 transition: background-color .2s, transform .2s, opacity .2s;
69 84
70 @include iro.bem-elem('image') { 85 &:first-child {
71 display: block; 86 border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
72 inline-size: 100%; 87 border-start-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
73 object-fit: cover; 88 }
74 89
75 &:first-child { 90 &:last-child {
76 border-start-start-radius: calc(fn.dim(--rounding) - fn.dim(--border)); 91 border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
77 border-start-end-radius: calc(fn.dim(--rounding) - fn.dim(--border)); 92 border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
78 } 93 }
79 94
80 &:last-child { 95 @include bem.next-elem('avatar') {
81 border-end-start-radius: calc(fn.dim(--rounding) - fn.dim(--border)); 96 margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
82 border-end-end-radius: calc(fn.dim(--rounding) - fn.dim(--border)); 97 }
83 } 98 }
84 99
85 @include iro.bem-next-elem('avatar') { 100 @include bem.elem('image-img') {
86 margin-block-start: calc(-.7 * fn.foreign-dim(--avatar, --xl --size)); 101 display: block;
87 } 102 inline-size: 100%;
88 } 103 object-fit: cover;
104 }
89 105
90 @include iro.bem-elem('body') { 106 @include bem.elem('image-overlay') {
91 padding-block: fn.dim(--pad-b); 107 position: absolute;
92 padding-inline: fn.dim(--pad-i); 108 inset-block-end: 0;
109 inset-inline: 0;
110 z-index: 5;
111 padding-block: props.get(vars.$image-overlay--pad-b);
112 padding-inline: props.get(vars.$image-overlay--pad-i);
113 }
93 114
94 &::before { 115 @include bem.elem('body') {
95 content: ''; 116 flex: 1 0 auto;
96 display: block; 117 padding-block: props.get(vars.$pad-b);
97 margin-block: -100em 100em; 118 padding-inline: props.get(vars.$pad-i);
98 }
99 }
100 119
101 @include iro.bem-elem('content') { 120 &::before {
102 margin-block-start: fn.dim(--spacing); 121 display: block;
103 } 122 margin-block: -100em 100em;
123 content: '';
124 }
125 }
104 126
105 @include iro.bem-elem('footer') { 127 @include bem.elem('content') {
106 padding-block: 0 fn.dim(--pad-b); 128 margin-block-start: props.get(vars.$spacing);
107 padding-inline: fn.dim(--pad-i); 129 }
108 margin-block-start: calc(-1 * fn.dim(--pad-b));
109 130
110 &::before { 131 @include bem.elem('footer') {
111 content: ''; 132 flex: 0 0 auto;
112 display: block; 133 padding-block: 0 props.get(vars.$pad-b);
113 block-size: fn.dim(--divider); 134 padding-inline: props.get(vars.$pad-i);
114 margin-block: fn.dim(--spacing); 135 margin-block-start: calc(-1 * props.get(vars.$pad-b));
115 background-color: fn.color(--divider);
116 }
117 }
118 136
119 @include iro.bem-modifier('quiet') { 137 &::before {
120 position: relative; 138 display: block;
121 border: 0; 139 block-size: props.get(vars.$divider-width);
122 background-color: transparent; 140 margin-block: props.get(vars.$spacing);
141 content: '';
142 background-color: props.get(vars.$divider-width);
143 }
144 }
123 145
124 @include iro.bem-multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 146 @include bem.modifier('quiet') {
125 &:hover, 147 margin-inline: 0;
126 &:active { 148 background-color: transparent;
127 @include iro.bem-elem('image') { 149 border: 0;
128 opacity: .75; 150 box-shadow: none;
129 background-color: fn.color(--quiet --hover --image);
130 }
131 }
132 151
133 &:focus-visible { 152 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
134 outline: none; 153 &:hover,
135 box-shadow: none; 154 &:active,
155 &:focus-visible {
156 background-color: transparent;
157 transform: none;
136 158
137 @include iro.bem-elem('image') { 159 @include bem.elem('image') {
138 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); 160 background-color: props.get(vars.$quiet--hover--image-color);
139 opacity: 1; 161 opacity: .75;
140 background-color: fn.color(--quiet --hover --image); 162 transform: translateY(props.get(vars.$hover--offset-b));
141 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); 163 }
142 } 164 }
143 }
144 }
145 165
146 @include iro.bem-elem('image') { 166 &:focus-visible {
147 position: relative; 167 margin: 0;
148 margin: calc(-1 * fn.dim(--key-focus --border)); 168 outline: none;
149 border: fn.dim(--key-focus --border-offset) solid transparent; 169 border: 0;
150 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border-offset)); 170 box-shadow: none;
151 background-color: fn.color(--quiet --image);
152 background-clip: padding-box;
153 }
154 171
155 @include iro.bem-elem('body') { 172 @include bem.elem('image') {
156 padding: 0; 173 margin: calc(-1 * props.get(vars.$key-focus--border-width));
157 padding-block-start: fn.dim(--spacing); 174 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
158 } 175 background-color: props.get(vars.$quiet--hover--image-color);
176 border: props.get(vars.$key-focus--border-offset) solid transparent;
177 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
178 box-shadow:
179 0
180 0
181 0
182 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
183 props.get(vars.$key-focus--outline-color);
184 opacity: 1;
185 }
186 }
187 }
159 188
160 @include iro.bem-elem('footer') { 189 @include bem.elem('image') {
161 padding-inline: 0; 190 position: relative;
162 } 191 background-color: props.get(vars.$quiet--image-color);
163 } 192 background-clip: padding-box;
164 } 193 border-radius: props.get(vars.$rounding);
194 }
195
196 @include bem.elem('body') {
197 padding: 0;
198 padding-block-start: props.get(vars.$spacing);
199 }
200
201 @include bem.elem('footer') {
202 padding-inline: 0;
203 }
204 }
205
206 @include bem.modifier('thumbnail') {
207 @include bem.elem('image') {
208 border-radius: props.get(vars.$rounding);
209 }
210
211 @include bem.elem('body') {
212 position: absolute;
213 inset-block-end: calc(-1 * props.get(vars.$border-width));
214 inset-inline: calc(-1 * props.get(vars.$border-width));
215 z-index: 10;
216 visibility: hidden;
217 background-color: props.get(vars.$hover--bg-color);
218 border-color: transparent;
219 border-style: solid;
220 border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width);
221 border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
222 border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
223 opacity: 0;
224 transition:
225 border-color .2s ease,
226 opacity .2s ease,
227 visibility 0s .2s linear;
228 }
229
230 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
231 &:hover,
232 &:active,
233 &:focus-visible {
234 @include bem.elem('body') {
235 visibility: visible;
236 border-color: props.get(vars.$hover--border-color);
237 opacity: 1;
238 transition:
239 border-color .2s ease,
240 opacity .2s ease,
241 visibility .2s linear;
242 }
243 }
244 }
245 }
246
247 @include bem.modifier('horizontal') {
248 flex-direction: row;
249 align-items: center;
250
251 @include bem.elem('image') {
252 align-self: stretch;
253 inline-size: auto;
254
255 &:first-child {
256 border-start-end-radius: 0;
257 border-end-start-radius: props.get(vars.$rounding);
258 }
259
260 &:last-child {
261 border-start-end-radius: props.get(vars.$rounding);
262 border-end-start-radius: 0;
263 }
264 }
265
266 @include bem.elem('body') {
267 flex: 0 0 auto;
268
269 @include bem.modifier('main') {
270 flex-shrink: 1;
271 inline-size: 100%;
272 min-inline-size: 0;
273 }
274 }
275 }
276 }
165} 277}
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
new file mode 100644
index 0000000..ebfba10
--- /dev/null
+++ b/src/objects/_card.vars.scss
@@ -0,0 +1,39 @@
1@use 'sass:map';
2@use 'iro-sass/src/props';
3@use '../core.vars' as core;
4
5$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default;
6$border-width: props.def(--o-card--border-width, props.get(core.$border-width--thin)) !default;
7$sub-border-width: props.def(--o-card--sub-border-width, props.get(core.$border-width--thick)) !default;
8$pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default;
9$pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default;
10$spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default;
11$rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default;
12$image-overlay--pad-i: props.def(--o-card--image-overlay--pad-i, props.get($pad-i)) !default;
13$image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, props.get($pad-b)) !default;
14
15$hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default;
16
17$shadow-x: props.def(--o-card--shadow-x, props.get(core.$shadow--l1--x)) !default;
18$shadow-y: props.def(--o-card--shadow-y, props.get(core.$shadow--l1--y)) !default;
19$shadow-blur: props.def(--o-card--shadow-blur, props.get(core.$shadow--l1--blur)) !default;
20$shadow-grow: props.def(--o-card--shadow-grow, props.get(core.$shadow--l1--grow)) !default;
21
22$key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
23$key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
24$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
25
26$shadow-color: props.def(--o-card--shadow-color, props.get(core.$theme, --shadow), 'color') !default;
27$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
28$border-color: props.def(--o-card--border-color, props.get(core.$theme, --box, --border), 'color') !default;
29$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default;
30
31$hover--bg-color: props.def(--o-card--hover--bg-color, color-mix(in lch, props.get($bg-color), props.get(core.$theme, --border-mute)), 'color') !default;
32$hover--border-color: props.def(--o-card--hover--border-color, props.get(core.$theme, --border), 'color') !default;
33
34$key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
35$key-focus--border-color: props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
36$key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
37
38$quiet--image-color: props.def(--o-card--quiet--image-color, props.get(core.$theme, --bg-base), 'color') !default;
39$quiet--hover--image-color: props.def(--o-card--quiet--hover--image-color, props.get(core.$theme, --border), 'color') !default;
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 8527948..5faafb9 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -1,261 +1,231 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:meta';
2@use '../functions' as fn; 2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/functions' as fn;
4@use 'iro-sass/src/props';
5@use '../props' as *;
6@use '../core.vars' as core;
3 7
4@include iro.props-namespace('checkbox') { 8@forward 'checkbox.vars';
5 @include iro.props-store(( 9@use 'checkbox.vars' as vars;
6 --dims: (
7 --size: fn.global-dim(--size --175),
8 --label-gap: fn.global-dim(--size --125),
9 --border: fn.global-dim(--border --medium),
10 --pad-i: fn.global-dim(--size --65),
11 --pad-b: fn.global-dim(--size --65),
12 --rounding: fn.global-dim(--rounding),
13 --spacing-sibling: fn.global-dim(--size --300),
14 10
15 --key-focus: ( 11@mixin styles {
16 --border: fn.global-dim(--key-focus --border), 12 @include materialize-at-root(meta.module-variables('vars'));
17 --border-offset: fn.global-dim(--key-focus --border-offset),
18 --outline: fn.global-dim(--key-focus --outline),
19 ),
20 ),
21 --colors: (
22 --box-border: fn.global-color(--text-mute-more),
23 --box-bg: fn.global-color(--base --75),
24
25 --hover: (
26 --label: fn.global-color(--heading),
27 --box-border: fn.global-color(--text-mute),
28 ),
29 --accent: (
30 --box-border: fn.global-color(--accent --900),
31
32 --hover: (
33 --box-border: fn.global-color(--accent --1000),
34 ),
35 ),
36 --disabled: (
37 --label: fn.global-color(--text-disabled),
38 --box-border: fn.global-color(--border-strong),
39 --box-bg: fn.global-color(--base --75),
40 ),
41 --key-focus: (
42 --label: fn.global-color(--focus --text),
43 --border: fn.global-color(--focus --border),
44 --outline: fn.global-color(--focus --outline),
45 ),
46 ),
47 ));
48 13
49 @include iro.bem-object(iro.props-namespace()) { 14 @include bem.object('checkbox') {
50 display: inline-block; 15 position: relative;
51 position: relative; 16 display: inline-block;
52 margin-inline: 17 padding-block: props.get(vars.$pad-b);
53 calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)) 18 padding-inline: props.get(vars.$pad-i);
54 calc(fn.dim(--spacing-sibling) - fn.dim(--pad-b) - fn.dim(--key-focus --border-offset)); 19 margin-inline:
55 padding-block: fn.dim(--pad-b); 20 calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
56 padding-inline: fn.dim(--pad-i); 21 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset));
57 22
58 @include iro.bem-elem('box') { 23 @include bem.elem('box') {
59 display: inline-block; 24 position: relative;
60 position: relative; 25 display: inline-block;
61 flex: 0 0 auto; 26 flex: 0 0 auto;
62 inline-size: fn.dim(--size); 27 inline-size: props.get(vars.$size);
63 block-size: fn.dim(--size); 28 block-size: props.get(vars.$size);
64 margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--size) - fn.dim(--key-focus --border-offset)); 29 margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$size) - props.get(vars.$key-focus--border-offset));
65 border: fn.dim(--key-focus --border-offset) solid transparent; 30 vertical-align: top;
66 border-radius: calc(fn.dim(--border) + fn.dim(--key-focus --border-offset)); 31 background-color: props.get(vars.$box-border-color);
67 background-color: fn.color(--box-border); 32 background-clip: padding-box;
68 background-clip: padding-box; 33 border: props.get(vars.$key-focus--border-offset) solid transparent;
69 vertical-align: top; 34 border-radius: calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset));
70 35
71 &::before, 36 &::before,
72 &::after { 37 &::after {
73 content: ''; 38 position: absolute;
74 display: block; 39 display: block;
75 position: absolute; 40 content: '';
76 } 41 }
77 42
78 &::before { 43 &::before {
79 z-index: 2; 44 inset-block-start: props.get(vars.$border-width);
80 inset-block-start: fn.dim(--border); 45 inset-inline-start: props.get(vars.$border-width);
81 inset-inline-start: fn.dim(--border); 46 z-index: 2;
82 inline-size: calc(fn.dim(--size) - 2 * fn.dim(--border)); 47 inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
83 block-size: calc(fn.dim(--size) - 2 * fn.dim(--border)); 48 block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
84 transition: transform .2s ease; 49 background-color: props.get(vars.$box-bg-color);
85 background-color: fn.color(--box-bg); 50 transition: transform .2s ease;
86 } 51 }
87 52
88 &::after { 53 &::after {
89 z-index: 3; 54 inset-block-start: calc(.5 * props.get(vars.$size) - 1px);
90 inset-block-start: calc(.5 * fn.dim(--size) - 1px); 55 inset-inline-start: calc(1.5 * props.get(vars.$border-width));
91 inset-inline-start: calc(1.5 * fn.dim(--border)); 56 z-index: 3;
92 box-sizing: border-box; 57 box-sizing: border-box;
93 inline-size: calc(fn.dim(--size) - 3 * fn.dim(--border)); 58 inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width));
94 block-size: 0; 59 block-size: 0;
95 transform: scale(0); 60 border-color: props.get(vars.$box-bg-color);
96 transition: transform .2s ease; 61 border-style: solid;
97 border-block-width: 0 2px; 62 border-radius: 2px;
98 border-inline-width: 0 2px; 63 transform: scale(0);
99 border-style: solid; 64 transition: transform .2s ease;
100 border-radius: 2px; 65 border-block-width: 0 2px;
101 border-color: fn.color(--box-bg); 66 border-inline-width: 0 2px;
102 } 67 }
103 } 68 }
104 69
105 @include iro.bem-elem('check-icon') { 70 @include bem.elem('check-icon') {
106 display: block; 71 position: absolute;
107 position: absolute; 72 inset-block-start: calc(1 * props.get(vars.$border-width));
108 z-index: 2; 73 inset-inline-start: calc(1 * props.get(vars.$border-width));
109 inset-block-start: calc(1 * fn.dim(--border)); 74 z-index: 2;
110 inset-inline-start: calc(1 * fn.dim(--border)); 75 display: block;
111 inline-size: calc(100% - 2 * fn.dim(--border)); 76 inline-size: calc(100% - 2 * props.get(vars.$border-width));
112 block-size: calc(100% - 2 * fn.dim(--border)); 77 block-size: calc(100% - 2 * props.get(vars.$border-width));
113 margin: 0; 78 margin: 0;
114 transform: scale(0); 79 color: props.get(vars.$box-bg-color);
115 transform-origin: 40% 90%; 80 stroke-width: fn.px-to-rem(3px);
116 transition: transform .2s ease; 81 transform: scale(0);
117 stroke-width: iro.fn-px-to-rem(3px); 82 transform-origin: 40% 90%;
118 color: fn.color(--box-bg); 83 transition: transform .2s ease;
119 } 84 }
120 85
121 @include iro.bem-elem('label') { 86 @include bem.elem('label') {
122 margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset)); 87 margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
123 } 88 }
124 89
125 @include iro.bem-elem('native') { 90 @include bem.elem('native') {
126 appearance: none; 91 position: absolute;
127 position: absolute; 92 inset-block-start: 0;
128 z-index: -1; 93 inset-inline-start: 0;
129 inset-block-start: 0; 94 z-index: -1;
130 inset-inline-start: 0; 95 inline-size: 100%;
131 inline-size: 100%; 96 block-size: 100%;
132 block-size: 100%; 97 padding: 0;
133 margin: 0; 98 margin: 0;
134 padding: 0; 99 overflow: hidden;
135 overflow: hidden; 100 appearance: none;
136 border-radius: fn.dim(--rounding); 101 border-radius: props.get(vars.$rounding);
137 102
138 &:hover, 103 &:hover,
139 &:focus-visible { 104 &:focus-visible {
140 @include iro.bem-sibling-elem('label') { 105 @include bem.sibling-elem('label') {
141 color: fn.color(--hover --label); 106 color: props.get(vars.$hover--label-color);
142 } 107 }
143 108
144 @include iro.bem-sibling-elem('box') { 109 @include bem.sibling-elem('box') {
145 background-color: fn.color(--hover --box-border); 110 background-color: props.get(vars.$hover--box-border-color);
146 } 111 }
147 } 112 }
148 113
149 &:checked { 114 &:checked {
150 @include iro.bem-sibling-elem('box') { 115 @include bem.sibling-elem('box') {
151 &::before { 116 &::before {
152 transform: scale(0); 117 transform: scale(0);
153 } 118 }
154 119
155 @include iro.bem-elem('check-icon') { 120 @include bem.elem('check-icon') {
156 transform: scale(1); 121 transform: scale(1);
157 } 122 }
158 } 123 }
159 } 124 }
160 125
161 &:indeterminate { 126 &:indeterminate {
162 @include iro.bem-sibling-elem('box') { 127 @include bem.sibling-elem('box') {
163 &::before { 128 &::before {
164 transform: scale(0); 129 transform: scale(0);
165 } 130 }
166 131
167 &::after { 132 &::after {
168 transform: scale(1); 133 transform: scale(1);
169 } 134 }
170 135
171 @include iro.bem-elem('check-icon') { 136 @include bem.elem('check-icon') {
172 transform: scale(0); 137 transform: scale(0);
173 } 138 }
174 } 139 }
175 } 140 }
176 141
177 &:disabled { 142 &:disabled {
178 @include iro.bem-sibling-elem('label') { 143 @include bem.sibling-elem('label') {
179 color: fn.color(--disabled --label); 144 color: props.get(vars.$disabled--label-color);
180 } 145 }
181 146
182 @include iro.bem-sibling-elem('box') { 147 @include bem.sibling-elem('box') {
183 background-color: fn.color(--disabled --box-border); 148 background-color: props.get(vars.$disabled--box-border-color);
184 149
185 &::before { 150 &::before {
186 background-color: fn.color(--disabled --box-bg); 151 background-color: props.get(vars.$disabled--box-bg-color);
187 } 152 }
188 } 153 }
189 } 154 }
190 155
191 &:focus-visible { 156 &:focus-visible {
192 @include iro.bem-sibling-elem('label') { 157 @include bem.sibling-elem('label') {
193 color: fn.color(--key-focus --label); 158 color: props.get(vars.$key-focus--label-color);
194 } 159 }
195 160
196 @include iro.bem-sibling-elem('box') { 161 @include bem.sibling-elem('box') {
197 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); 162 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
198 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); 163 box-shadow:
199 } 164 0
200 } 165 0
201 } 166 0
167 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
168 props.get(vars.$key-focus--outline-color);
169 }
170 }
171 }
202 172
203 @include iro.bem-modifier('standalone') { 173 @include bem.modifier('standalone') {
204 @include iro.bem-elem('box') { 174 @include bem.elem('box') {
205 margin-block-start: 0; 175 margin-block-start: 0;
206 } 176 }
207 } 177 }
208 178
209 @include iro.bem-modifier('accent') { 179 @include bem.modifier('accent') {
210 @include iro.bem-elem('native') { 180 @include bem.elem('native') {
211 &:checked { 181 &:checked {
212 @include iro.bem-sibling-elem('box') { 182 @include bem.sibling-elem('box') {
213 background-color: fn.color(--accent --box-border); 183 background-color: props.get(vars.$accent--box-border-color);
214 } 184 }
215 185
216 &:hover, 186 &:hover,
217 &:focus-visible { 187 &:focus-visible {
218 @include iro.bem-sibling-elem('box') { 188 @include bem.sibling-elem('box') {
219 background-color: fn.color(--accent --hover --box-border); 189 background-color: props.get(vars.$accent--hover--box-border-color);
220 } 190 }
221 } 191 }
222 } 192 }
223 193
224 &:indeterminate { 194 &:indeterminate {
225 @include iro.bem-sibling-elem('box') { 195 @include bem.sibling-elem('box') {
226 background-color: fn.color(--accent --box-border); 196 background-color: props.get(vars.$accent--box-border-color);
227 } 197 }
228 198
229 &:hover, 199 &:hover,
230 &:focus-visible { 200 &:focus-visible {
231 @include iro.bem-sibling-elem('box') { 201 @include bem.sibling-elem('box') {
232 background-color: fn.color(--accent --hover --box-border); 202 background-color: props.get(vars.$accent--hover--box-border-color);
233 } 203 }
234 } 204 }
235 } 205 }
236 206
237 &:disabled { 207 &:disabled {
238 @include iro.bem-sibling-elem('box') { 208 @include bem.sibling-elem('box') {
239 background-color: fn.color(--disabled --box-border); 209 background-color: props.get(vars.$disabled--box-border-color);
240 210
241 &::before { 211 &::before {
242 background-color: fn.color(--disabled --box-bg); 212 background-color: props.get(vars.$disabled--box-bg-color);
243 } 213 }
244 } 214 }
245 215
246 &:checked { 216 &:checked {
247 @include iro.bem-sibling-elem('box') { 217 @include bem.sibling-elem('box') {
248 background-color: fn.color(--disabled --box-border); 218 background-color: props.get(vars.$disabled--box-border-color);
249 } 219 }
250 } 220 }
251 221
252 &:indeterminate { 222 &:indeterminate {
253 @include iro.bem-sibling-elem('box') { 223 @include bem.sibling-elem('box') {
254 background-color: fn.color(--disabled --box-border); 224 background-color: props.get(vars.$disabled--box-border-color);
255 } 225 }
256 } 226 }
257 } 227 }
258 } 228 }
259 } 229 }
260 } 230 }
261} 231}
diff --git a/src/objects/_checkbox.vars.scss b/src/objects/_checkbox.vars.scss
new file mode 100644
index 0000000..25a0d3d
--- /dev/null
+++ b/src/objects/_checkbox.vars.scss
@@ -0,0 +1,32 @@
1@use 'sass:map';
2@use 'iro-sass/src/props';
3@use '../core.vars' as core;
4
5$size: props.def(--o-checkbox--size, props.get(core.$size--175)) !default;
6$label-gap: props.def(--o-checkbox--label-gap, props.get(core.$size--125)) !default;
7$border-width: props.def(--o-checkbox--border-width, props.get(core.$border-width--medium)) !default;
8$pad-i: props.def(--o-checkbox--pad-i, props.get(core.$size--65)) !default;
9$pad-b: props.def(--o-checkbox--pad-b, props.get(core.$size--65)) !default;
10$rounding: props.def(--o-checkbox--rounding, props.get(core.$rounding--sm)) !default;
11$spacing-sibling: props.def(--o-checkbox--spacing-sibling, props.get(core.$size--300)) !default;
12
13$key-focus--border-width: props.def(--o-checkbox--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
14$key-focus--border-offset: props.def(--o-checkbox--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
15$key-focus--outline-width: props.def(--o-checkbox--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
16
17$box-border-color: props.def(--o-checkbox--box-border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
18$box-bg-color: props.def(--o-checkbox--box-bg-color, props.get(core.$theme, --base, --75), 'color') !default;
19
20$hover--label-color: props.def(--o-checkbox--hover--label-color, props.get(core.$theme, --heading), 'color') !default;
21$hover--box-border-color: props.def(--o-checkbox--hover--box-border-color, props.get(core.$theme, --text-mute), 'color') !default;
22
23$accent--box-border-color: props.def(--o-checkbox--accent--box-border-color, props.get(core.$theme, --accent, --900), 'color') !default;
24$accent--hover--box-border-color: props.def(--o-checkbox--accent--hover--box-border-color, props.get(core.$theme, --accent, --1000), 'color') !default;
25
26$disabled--label-color: props.def(--o-checkbox--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
27$disabled--box-border-color: props.def(--o-checkbox--disabled--box-border-color, props.get(core.$theme, --border-strong), 'color') !default;
28$disabled--box-bg-color: props.def(--o-checkbox--disabled--box-bg-color, props.get(core.$theme, --base, --75), 'color') !default;
29
30$key-focus--label-color: props.def(--o-checkbox--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
31$key-focus--border-color: props.def(--o-checkbox--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
32$key-focus--outline-color: props.def(--o-checkbox--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index d1e2897..27af173 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -1,203 +1,204 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'iro-sass/src/index' as iro; 2@use 'sass:meta';
3@use '../functions' as fn; 3@use 'sass:string';
4@use '../config'; 4@use 'iro-sass/src/bem';
5@use 'iro-sass/src/props';
6@use '../props' as *;
7@use '../core.vars' as core;
5 8
6$static-themes: 'black' 'white' !default; 9@forward 'divider.vars';
10@use 'divider.vars' as vars;
7 11
8@include iro.props-namespace('divider') { 12@mixin styles {
9 @include iro.props-store(( 13 @include materialize-at-root(meta.module-variables('vars'));
10 --dims: ( 14
11 --margin-b: fn.global-dim(--size --85), 15 @include bem.object('divider') {
12 16 display: flex;
13 --strong: ( 17 flex: 0 0 auto;
14 --border: fn.global-dim(--border --thick), 18 flex-direction: row;
15 --label-font-size: fn.global-dim(--font-size --100), 19 align-items: center;
16 ), 20 block-size: 1em;
17 --medium: ( 21 margin-block: props.get(vars.$margin-b);
18 --border: fn.global-dim(--border --medium), 22 font-size: props.get(vars.$strong--label-font-size);
19 --label-font-size: fn.global-dim(--font-size --75), 23 font-weight: 700;
20 ), 24 line-height: 1;
21 --faint: ( 25 color: props.get(vars.$strong--label-color);
22 --border: fn.global-dim(--border --thin), 26 text-transform: uppercase;
23 --label-font-size: fn.global-dim(--font-size --50), 27 letter-spacing: .5px;
24 ), 28 background-color: transparent;
25 ), 29
26 --colors: ( 30 &::before,
27 --strong: ( 31 &::after {
28 --bg: fn.global-color(--text), 32 flex: 1 1 auto;
29 --label: fn.global-color(--text), 33 inline-size: 100%;
30 ), 34 block-size: props.get(vars.$strong--border-width);
31 --medium: ( 35 content: '';
32 --bg: fn.global-color(--border), 36 background-color: props.get(vars.$strong--bg-color);
33 --label: fn.global-color(--text-mute), 37 }
34 ), 38
35 --faint: ( 39 &::before {
36 --bg: fn.global-color(--border), 40 display: block;
37 --label: fn.global-color(--text-mute-more), 41 }
38 ), 42
39 ), 43 @include bem.elem('label') {
40 )); 44 flex: 0 0 auto;
45 }
46
47 @include bem.modifier('vertical') {
48 align-self: stretch;
49 inline-size: props.get(vars.$vertical--border-width);
50 block-size: auto;
51 margin-block: 0;
52 background-color: props.get(vars.$strong--bg-color);
41 53
42 @each $color in map.keys(map.get(config.$themes, config.$theme-default, --palettes)) { 54 &::before,
43 @if $color != '--base' { 55 &::after {
44 @include iro.props-store(( 56 display: none;
45 --colors: ( 57 }
46 $color: ( 58 }
47 --bg: fn.global-color($color --800),
48 --label: fn.global-color($color --1000),
49 )
50 ),
51 ));
52 }
53 }
54 59
55 @each $theme in $static-themes { 60 @include bem.modifier('dot') {
56 @include iro.props-store(( 61 align-self: center;
57 --colors: ( 62 inline-size: props.get(vars.$dot--size);
58 --static-#{$theme}: ( 63 block-size: props.get(vars.$dot--size);
59 --strong: ( 64 margin-block: 0;
60 --bg: fn.global-color(--#{$theme}-transparent --800), 65 background-color: props.get(vars.$strong--bg-color);
61 --label: fn.global-color(--#{$theme}-transparent --900), 66 border-radius: props.get(vars.$dot--size);
62 ),
63 --medium: (
64 --bg: fn.global-color(--#{$theme}-transparent --300),
65 --label: fn.global-color(--#{$theme}-transparent --500),
66 ),
67 --faint: (
68 --bg: fn.global-color(--#{$theme}-transparent --300),
69 --label: fn.global-color(--#{$theme}-transparent --500),
70 ),
71 )
72 ),
73 ));
74 }
75 67
76 @include iro.bem-object(iro.props-namespace()) { 68 &::before,
77 display: flex; 69 &::after {
78 flex: 0 0 auto; 70 display: none;
79 flex-direction: row; 71 }
80 align-items: center; 72 }
81 block-size: 1em;
82 margin-block: fn.dim(--margin-b);
83 color: fn.color(--strong --label);
84 font-size: fn.dim(--strong --label-font-size);
85 font-weight: 700;
86 letter-spacing: .5px;
87 line-height: 1;
88 text-transform: uppercase;
89 73
90 &::before, 74 @include bem.modifier('medium') {
91 &::after { 75 font-size: props.get(vars.$medium--label-font-size);
92 content: ''; 76 font-weight: 500;
93 flex: 1 1 auto; 77 color: props.get(vars.$medium--label-color);
94 inline-size: 100%;
95 block-size: fn.dim(--strong --border);
96 background-color: fn.color(--strong --bg);
97 }
98 78
99 &::before { 79 &::before,
100 display: block; 80 &::after {
101 } 81 block-size: props.get(vars.$medium--border-width);
82 background-color: props.get(vars.$medium--bg-color);
83 }
102 84
103 @include iro.bem-elem('label') { 85 @include bem.modifier('vertical') {
104 flex: 0 0 auto; 86 background-color: props.get(vars.$medium--bg-color);
105 } 87 }
106 88
107 @include iro.bem-modifier('vertical') { 89 @include bem.modifier('dot') {
108 align-self: stretch; 90 background-color: props.get(vars.$medium--bg-color);
109 inline-size: 1px; 91 }
110 block-size: auto; 92 }
111 margin-block: 0;
112 background-color: fn.color(--faint --bg);
113 93
114 &::before, 94 @include bem.modifier('quiet') {
115 &::after { 95 font-size: props.get(vars.$quiet--label-font-size);
116 display: none; 96 font-weight: 500;
117 } 97 color: props.get(vars.$quiet--label-color);
118 }
119 98
120 @include iro.bem-modifier('medium') { 99 &::before,
121 color: fn.color(--medium --label); 100 &::after {
122 font-size: fn.dim(--medium --label-font-size); 101 block-size: props.get(vars.$quiet--border-width);
123 font-weight: 500; 102 background-color: props.get(vars.$quiet--bg-color);
103 }
124 104
125 &::before, 105 @include bem.modifier('vertical') {
126 &::after { 106 background-color: props.get(vars.$vertical--quiet--bg-color);
127 block-size: fn.dim(--medium --border); 107 }
128 background-color: fn.color(--medium --bg);
129 }
130 }
131 108
132 @include iro.bem-modifier('faint') { 109 @include bem.modifier('dot') {
133 color: fn.color(--faint --label); 110 background-color: props.get(vars.$dot--quiet--bg-color);
134 font-size: fn.dim(--faint --label-font-size); 111 }
135 font-weight: 500; 112 }
136 113
137 &::before, 114 @include bem.modifier('faint') {
138 &::after { 115 font-size: props.get(vars.$faint--label-font-size);
139 block-size: fn.dim(--faint --border); 116 font-weight: 500;
140 background-color: fn.color(--faint --bg); 117 color: props.get(vars.$faint--label-color);
141 }
142 }
143 118
144 @include iro.bem-modifier('labelled') { 119 &::before,
145 &::before { 120 &::after {
146 margin-inline-end: 1em; 121 block-size: props.get(vars.$faint--border-width);
147 } 122 background-color: props.get(vars.$faint--bg-color);
123 }
148 124
149 &::after { 125 @include bem.modifier('vertical') {
150 display: block; 126 background-color: props.get(vars.$vertical--quiet--bg-color);
151 margin-inline-start: 1em; 127 }
152 }
153 }
154 128
155 @each $color in 'blue' 'purple' 'red' 'green' 'yellow' { 129 @include bem.modifier('dot') {
156 @include iro.bem-modifier($color) { 130 background-color: props.get(vars.$dot--quiet--bg-color);
157 &::before, 131 }
158 &::after { 132 }
159 background-color: fn.color(--#{$color} --bg);
160 }
161 133
162 @include iro.bem-elem('label') { 134 @include bem.modifier('labelled') {
163 color: fn.color(--#{$color} --label); 135 &::before {
164 } 136 margin-inline-end: 1em;
165 } 137 }
166 }
167 138
168 @each $theme in $static-themes { 139 &::after {
169 @include iro.bem-modifier(static-#{$theme}) { 140 display: block;
170 &::before, 141 margin-inline-start: 1em;
171 &::after { 142 }
172 background-color: fn.color(--static-#{$theme} --strong --bg); 143 }
173 }
174 144
175 @include iro.bem-elem('label') { 145 @each $theme in map.keys(props.get(vars.$themes)) {
176 color: fn.color(--static-#{$theme} --strong --label); 146 @include bem.modifier(string.slice($theme, 3)) {
177 } 147 &::before,
148 &::after {
149 background-color: props.get(vars.$themes, $theme, --bg);
150 }
178 151
179 @include iro.bem-modifier('medium') { 152 @include bem.elem('label') {
180 &::before, 153 color: props.get(vars.$themes, $theme, --label);
181 &::after { 154 }
182 background-color: fn.color(--static-#{$theme} --medium --bg); 155 }
183 } 156 }
157
158 @each $theme in map.keys(props.get(vars.$static-themes)) {
159 @include bem.modifier(string.slice($theme, 3)) {
160 &::before,
161 &::after {
162 background-color: props.get(vars.$static-themes, $theme, --strong, --bg);
163 }
164
165 @include bem.elem('label') {
166 color: props.get(vars.$static-themes, $theme, --strong, --label);
167 }
168
169 @include bem.modifier('medium') {
170 &::before,
171 &::after {
172 background-color: props.get(vars.$static-themes, $theme, --medium, --bg);
173 }
174
175 @include bem.elem('label') {
176 color: props.get(vars.$static-themes, $theme, --medium, --label);
177 }
178 }
179
180 @include bem.modifier('quiet') {
181 &::before,
182 &::after {
183 background-color: props.get(vars.$static-themes, $theme, --quiet, --bg);
184 }
184 185
185 @include iro.bem-elem('label') { 186 @include bem.elem('label') {
186 color: fn.color(--static-#{$theme} --medium --label); 187 color: props.get(vars.$static-themes, $theme, --quiet, --label);
187 } 188 }
188 } 189 }
189 190
190 @include iro.bem-modifier('faint') { 191 @include bem.modifier('faint') {
191 &::before, 192 &::before,
192 &::after { 193 &::after {
193 background-color: fn.color(--static-#{$theme} --faint --bg); 194 background-color: props.get(vars.$static-themes, $theme, --faint, --bg);
194 } 195 }
195 196
196 @include iro.bem-elem('label') { 197 @include bem.elem('label') {
197 color: fn.color(--static-#{$theme} --faint --label); 198 color: props.get(vars.$static-themes, $theme, --faint, --label);
198 } 199 }
199 } 200 }
200 } 201 }
201 } 202 }
202 } 203 }
203} 204}
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
new file mode 100644
index 0000000..688fbb3
--- /dev/null
+++ b/src/objects/_divider.vars.scss
@@ -0,0 +1,79 @@
1@use 'sass:map';
2@use 'sass:string';
3@use 'iro-sass/src/props';
4@use '../core.vars' as core;
5
6$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default;
7$vertical--border-width: props.def(--o-divider--vertical--width, props.get(core.$border-width--thin)) !default;
8$dot--size: props.def(--o-divider--dot--size, props.get(core.$size--50)) !default;
9
10$strong--border-width: props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default;
11$strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default;
12
13$medium--border-width: props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default;
14$medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default;
15
16$quiet--border-width: props.def(--o-divider--quiet--border-width, props.get(core.$border-width--thin)) !default;
17$quiet--label-font-size: props.def(--o-divider--quiet--label-font-size, props.get(core.$font-size--50)) !default;
18
19$faint--border-width: props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default;
20$faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default;
21
22$strong--bg-color: props.def(--o-divider--strong--bg-color, props.get(core.$theme, --text), 'color') !default;
23$strong--label-color: props.def(--o-divider--strong--label-color, props.get(core.$theme, --text), 'color') !default;
24
25$medium--bg-color: props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border), 'color') !default;
26$medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute), 'color') !default;
27
28$quiet--bg-color: props.def(--o-divider--quiet--bg-color, props.get(core.$theme, --border), 'color') !default;
29$quiet--label-color: props.def(--o-divider--quiet--label-color, props.get(core.$theme, --text-mute-more), 'color') !default;
30
31$faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
32$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
33
34$vertical--quiet--bg-color: props.def(--o-divider--vertical--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
35
36$dot--quiet--bg-color: props.def(--o-divider--dot--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
37
38$static-themes: props.def(--o-divider, (), 'color');
39
40@each $theme in map.keys(props.get(core.$transparent-colors)) {
41 $button-theme: --static-#{string.slice($theme, 3)};
42
43 $static-themes: props.merge($static-themes, (
44 $button-theme: (
45 --strong: (
46 --bg: props.get(core.$transparent-colors, $theme, --800),
47 --label: props.get(core.$transparent-colors, $theme, --900),
48 ),
49 --medium: (
50 --bg: props.get(core.$transparent-colors, $theme, --300),
51 --label: props.get(core.$transparent-colors, $theme, --500),
52 ),
53 --quiet: (
54 --bg: props.get(core.$transparent-colors, $theme, --300),
55 --label: props.get(core.$transparent-colors, $theme, --500),
56 ),
57 --faint: (
58 --bg: props.get(core.$transparent-colors, $theme, --200),
59 --label: props.get(core.$transparent-colors, $theme, --400),
60 ),
61 )
62 ));
63}
64
65$themes-config: (
66 accent: --accent,
67 negative: --negative,
68) !default;
69
70$themes: props.def(--o-divider, (), 'color');
71
72@each $theme, $key in $themes-config {
73 $themes: props.merge($themes, (
74 --#{$theme}: (
75 --bg: props.get(core.$theme, $key, --800),
76 --label: props.get(core.$theme, $key, --1000),
77 )
78 ));
79}
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
index d8d1289..fd36535 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -1,73 +1,50 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:meta';
2@use '../functions' as fn; 2@use 'iro-sass/src/bem';
3@use 'sass:math'; 3@use 'iro-sass/src/props';
4@use '../props' as *;
5@use 'icon.vars' as icon;
4 6
5@use 'icon'; 7@forward 'emoji.vars';
8@use 'emoji.vars' as vars;
6 9
7@include iro.props-namespace('emoji') { 10@mixin styles {
8 @include iro.props-store(( 11 @include materialize-at-root(meta.module-variables('vars'));
9 --dims: (
10 --size: calc(1 / 14 * 18em),
11 --pad: .3em,
12 --rounding: fn.global-dim(--rounding),
13 --zoom: 3,
14 --valign: -.25em,
15 12
16 --125: ( 13 @include bem.object('emoji') {
17 --size: calc(1 / 14 * 23em), 14 position: relative;
18 --valign: -.45em, 15 display: inline-block;
19 ), 16 inline-size: calc(props.get(vars.$size));
17 block-size: calc(props.get(vars.$size));
18 padding: calc(props.get(vars.$pad));
19 margin: calc(-1 * props.get(vars.$pad));
20 vertical-align: props.get(vars.$valign);
21 object-fit: contain;
20 22
21 --150: ( 23 @include bem.modifier('icon') {
22 --size: calc(1 / 14 * 28em), 24 margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get(vars.$size) - props.get(icon.$size)));
23 --valign: -.65em, 25 vertical-align: props.get(icon.$valign);
24 ), 26 }
25 27
26 --200: ( 28 @each $mod, $size, $valign in vars.$sizes {
27 --size: calc(1 / 14 * 38em), 29 @include bem.modifier($mod) {
28 --valign: -1em, 30 inline-size: props.get($size);
29 ) 31 block-size: props.get($size);
30 ), 32 vertical-align: props.get($valign);
31 --colors: (
32 --bg: fn.global-color(--border-mute),
33 )
34 ));
35 33
36 @include iro.bem-object(iro.props-namespace()) { 34 @include bem.modifier('icon') {
37 display: inline-block; 35 margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size)));
38 position: relative; 36 }
39 inline-size: calc(fn.dim(--size)); 37 }
40 block-size: calc(fn.dim(--size)); 38 }
41 margin: calc(-1 * fn.dim(--pad));
42 padding: calc(fn.dim(--pad));
43 vertical-align: fn.dim(--valign);
44 object-fit: contain;
45 39
46 @include iro.bem-modifier('icon') { 40 @include bem.modifier('zoomable') {
47 margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--size) - fn.foreign-dim(--icon, --size))); 41 border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom));
48 vertical-align: fn.foreign-dim(--icon, --valign); 42 transition: transform .2s ease, background-color .2s ease;
49 }
50 43
51 @each $size in '125' '150' '200' { 44 &:hover {
52 @include iro.bem-modifier($size) { 45 background-color: props.get(vars.$bg-color);
53 inline-size: fn.dim(--#{$size} --size); 46 transform: scale(props.get(vars.$zoom));
54 block-size: fn.dim(--#{$size} --size); 47 }
55 vertical-align: fn.dim(--#{$size} --valign); 48 }
56 49 }
57 @include iro.bem-modifier('icon') {
58 margin: calc(-1 * fn.dim(--pad) - .5 * (fn.dim(--#{$size} --size) - fn.foreign-dim(--icon, --size)));
59 }
60 }
61 }
62
63 @include iro.bem-modifier('zoomable') {
64 transition: transform .2s ease, background-color .2s ease;
65 border-radius: calc(fn.dim(--rounding) / fn.dim(--zoom));
66
67 &:hover {
68 transform: scale(fn.dim(--zoom));
69 background-color: fn.color(--bg);
70 }
71 }
72 }
73} 50}
diff --git a/src/objects/_emoji.vars.scss b/src/objects/_emoji.vars.scss
new file mode 100644
index 0000000..b7a8a43
--- /dev/null
+++ b/src/objects/_emoji.vars.scss
@@ -0,0 +1,26 @@
1@use 'sass:map';
2@use 'iro-sass/src/props';
3@use '../core.vars' as core;
4
5$size: props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default;
6$pad: props.def(--o-emoji--pad, .3em) !default;
7$rounding: props.def(--o-emoji--rounding, props.get(core.$rounding--sm)) !default;
8$zoom: props.def(--o-emoji--zoom, 3) !default;
9$valign: props.def(--o-emoji--valign, -.25em) !default;
10
11$size--125: props.def(--o-emoji--125--size, calc(1 / 14 * 23em)) !default;
12$valign--125: props.def(--o-emoji--125--valign, -.45em) !default;
13
14$size--150: props.def(--o-emoji--150--size, calc(1 / 14 * 28em)) !default;
15$valign--150: props.def(--o-emoji--150--valign, -.65em) !default;
16
17$size--200: props.def(--o-emoji--200--size, calc(1 / 14 * 38em)) !default;
18$valign--200: props.def(--o-emoji--200--valign, -1em) !default;
19
20$sizes: (
21 '125' $size--125 $valign--125,
22 '150' $size--150 $valign--150,
23 '200' $size--200 $valign--200,
24) !default;
25
26$bg-color: props.def(--o-emoji--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
diff --git a/src/objects/_field-label.scss b/src/objects/_field-label.scss
index 1518ea6..aa12eb5 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -1,86 +1,76 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:meta';
2@use '../functions' as fn; 2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props';
4@use '../props' as *;
3 5
4@include iro.props-namespace('field-label') { 6@forward 'field-label.vars';
5 @include iro.props-store(( 7@use 'field-label.vars' as vars;
6 --dims: (
7 --spacing-i: fn.global-dim(--size --150),
8 --spacing-b: fn.global-dim(--size --85),
9 --label-font-size: fn.global-dim(--font-size --75),
10 --hint-font-size: fn.global-dim(--font-size --75),
11 ),
12 --colors: (
13 --label: fn.global-color(--text-mute),
14 --hint: fn.global-color(--text-mute),
15 --error-hint: fn.global-color(--negative --900),
16 --disabled: fn.global-color(--text-disabled),
17 ),
18 ));
19 8
20 @include iro.bem-object(iro.props-namespace()) { 9@mixin styles {
21 display: block; 10 @include materialize-at-root(meta.module-variables('vars'));
22 11
23 @include iro.bem-elem('label') { 12 @include bem.object('field-label') {
24 display: block; 13 @include bem.elem('label') {
25 flex: 0 0 auto; 14 display: block;
26 padding-inline-end: fn.dim(--spacing-i); 15 flex: 0 0 auto;
27 color: fn.color(--label); 16 padding-inline-end: props.get(vars.$spacing-i);
28 font-size: fn.dim(--label-font-size); 17 font-size: props.get(vars.$label-font-size);
29 font-weight: 400; 18 font-weight: 400;
30 line-height: 1.3; 19 line-height: 1.3;
20 color: props.get(vars.$label-color);
31 21
32 @include iro.bem-next-elem('content') { 22 @include bem.next-elem('content') {
33 margin-block-start: fn.dim(--spacing-b); 23 margin-block-start: props.get(vars.$spacing-b);
34 } 24 }
35 } 25 }
36 26
37 @include iro.bem-elem('content') { 27 @include bem.elem('content') {
38 display: block; 28 display: block;
39 flex: 1 1 auto; 29 flex: 1 1 auto;
40 } 30 }
41 31
42 @include iro.bem-elem('hint') { 32 @include bem.elem('hint') {
43 display: block; 33 display: block;
44 margin-block-start: fn.dim(--spacing-b); 34 margin-block-start: props.get(vars.$spacing-b);
45 color: fn.color(--hint); 35 font-size: props.get(vars.$hint-font-size);
46 font-size: fn.dim(--hint-font-size); 36 color: props.get(vars.$hint-color);
47 } 37 }
48 38
49 @include iro.bem-is('invalid') { 39 @include bem.is('invalid') {
50 @include iro.bem-elem('hint') { 40 @include bem.elem('hint') {
51 color: fn.color(--error-hint); 41 color: props.get(vars.$error-hint-color);
52 } 42 }
53 } 43 }
54 44
55 @include iro.bem-is('disabled') { 45 @include bem.is('disabled') {
56 @include iro.bem-elem('label', 'hint') { 46 @include bem.elem('label', 'hint') {
57 color: fn.color(--disabled); 47 color: props.get(vars.$disabled-color);
58 } 48 }
59 } 49 }
60 50
61 @include iro.bem-modifier('align-start', 'align-end') { 51 @include bem.modifier('align-start', 'align-end') {
62 display: flex; 52 display: flex;
63 align-items: baseline; 53 align-items: baseline;
64 54
65 @include iro.bem-elem('label') { 55 @include bem.elem('label') {
66 display: inline-block; 56 display: inline-block;
67 57
68 @include iro.bem-next-elem('content') { 58 @include bem.next-elem('content') {
69 margin-block-start: 0; 59 margin-block-start: 0;
70 } 60 }
71 } 61 }
72 } 62 }
73 63
74 @include iro.bem-modifier('align-start') { 64 @include bem.modifier('align-start') {
75 @include iro.bem-elem('label') { 65 @include bem.elem('label') {
76 text-align: start; 66 text-align: start;
77 } 67 }
78 } 68 }
79 69
80 @include iro.bem-modifier('align-end') { 70 @include bem.modifier('align-end') {
81 @include iro.bem-elem('label') { 71 @include bem.elem('label') {
82 text-align: end; 72 text-align: end;
83 } 73 }
84 } 74 }
85 } 75 }
86} 76}
diff --git a/src/objects/_field-label.vars.scss b/src/objects/_field-label.vars.scss
new file mode 100644
index 0000000..844a10b
--- /dev/null
+++ b/src/objects/_field-label.vars.scss
@@ -0,0 +1,12 @@
1@use 'iro-sass/src/props';
2@use '../core.vars' as core;
3
4$spacing-i: props.def(--o-field-label--spacing-i, props.get(core.$size--150)) !default;
5$spacing-b: props.def(--o-field-label--spacing-b, props.get(core.$size--85)) !default;
6$label-font-size: props.def(--o-field-label--label-font-size, props.get(core.$font-size--75)) !default;
7$hint-font-size: props.def(--o-field-label--hint-font-size, props.get(core.$font-size--75)) !default;
8
9$label-color: props.def(--o-field-label--label-color, props.get(core.$theme, --text-mute), 'color') !default;
10$hint-color: props.def(--o-field-label--hint-color, props.get(core.$theme, --text-mute), 'color') !default;
11$error-hint-color: props.def(--o-field-label--error-hint-color, props.get(core.$theme, --negative, --900), 'color') !default;
12$disabled-color: props.def(--o-field-label--disabled-color, props.get(core.$theme, --text-disabled), 'color') !default;
diff --git a/src/objects/_figure.scss b/src/objects/_figure.scss
new file mode 100644
index 0000000..27e0f6a
--- /dev/null
+++ b/src/objects/_figure.scss
@@ -0,0 +1,26 @@
1@use 'sass:meta';
2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props';
4@use '../props' as *;
5
6@forward 'figure.vars';
7@use 'figure.vars' as vars;
8
9@mixin styles {
10 @include materialize-at-root(meta.module-variables('vars'));
11
12 @include bem.object('figure') {
13 @include bem.elem('caption') {
14 padding-block: props.get(vars.$pad-b);
15 font-size: props.get(vars.$font-size);
16 color: props.get(vars.$text-color);
17 border-block-end: props.get(vars.$border-width) solid props.get(vars.$border-color);
18
19 &::before {
20 display: block;
21 margin-block: -100em 100em;
22 content: '';
23 }
24 }
25 }
26}
diff --git a/src/objects/_figure.vars.scss b/src/objects/_figure.vars.scss
new file mode 100644
index 0000000..78f5d15
--- /dev/null
+++ b/src/objects/_figure.vars.scss
@@ -0,0 +1,9 @@
1@use 'iro-sass/src/props';
2@use '../core.vars' as core;
3
4$pad-b: props.def(--o-figure--pad-b, props.get(core.$size--100)) !default;
5$border-width: props.def(--o-figure--border-width, props.get(core.$border-width--thin)) !default;
6$font-size: props.def(--o-figure--font-size, props.get(core.$font-size--100)) !default;
7
8$text-color: props.def(--o-figure--text-color, props.get(core.$theme, --text-mute-more), 'color') !default;
9$border-color: props.def(--o-figure--border-color, props.get(core.$theme, --border), 'color') !default;
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index 7990a6b..d27b595 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -1,118 +1,60 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:meta';
2@use '../functions' as fn; 2@use 'iro-sass/src/bem';
3@use '../mixins' as mx; 3@use 'iro-sass/src/props';
4@use '../config'; 4@use '../props' as *;
5@use 'include-media/dist/include-media' as media;
6 5
7$sizes: 'xxl' 'xl' 'lg' 'md' 'sm' 'xs'; 6@forward 'heading.vars';
7@use 'heading.vars' as vars;
8 8
9@include iro.props-namespace('heading') { 9@mixin styles {
10 @include iro.props-store(( 10 @include materialize-at-root(meta.module-variables('vars'));
11 --dims: (
12 --offset: -.02em,
13 ),
14 --colors: (
15 --bg: fn.global-color(--base --50),
16 ),
17 ));
18 11
19 @include iro.bem-object(iro.props-namespace()) { 12 @include bem.object('heading') {
20 @include mx.set-font(--headline); 13 display: block;
14 margin-block-start: props.get(vars.$margin-bs);
15 font-family: props.get(vars.$font-family);
16 font-weight: props.get(vars.$font-weight);
17 font-feature-settings: props.get(vars.$feature-settings);
18 line-height: props.get(vars.$line-height);
19 color: props.get(vars.$text-color);
20 text-transform: none;
21 letter-spacing: normal;
21 22
22 display: block; 23 & + & {
23 margin-block-start: fn.global-dim(--heading --margin-bs); 24 margin-block-start: props.get(vars.$margin-bs-sibling);
24 transform: translateX(fn.dim(--offset)); 25 }
25 letter-spacing: normal;
26 text-transform: none;
27 26
28 & + & { 27 @include bem.elem('highlight') {
29 margin-block-start: fn.global-dim(--heading --margin-bs-sibling); 28 background-image: linear-gradient(to top,
30 } 29 transparent .05em,
30 props.get(vars.$bg-color) .05em,
31 props.get(vars.$bg-color) .5em,
32 transparent .5em);
33 }
31 34
32 @include iro.bem-elem('highlight') { 35 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$sizes {
33 background-image: linear-gradient( 36 @include bem.modifier($mod) {
34 to top, 37 font-family: props.get($font-family);
35 transparent .05em, 38 font-size: props.get($font-size);
36 fn.color(--bg) .05em, 39 font-weight: props.get($font-weight);
37 fn.color(--bg) .5em, 40 font-feature-settings: props.get($feature-settings);
38 transparent .5em 41 line-height: props.get($line-height);
39 ); 42 letter-spacing: props.get($letter-spacing);
40 } 43 }
44 }
41 45
42 @include iro.bem-modifier('xxl') { 46 @include bem.modifier('display') {
43 @include mx.heading-strong(--xxl); 47 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$display--sizes {
44 } 48 @include bem.modifier($mod) {
45 49 font-family: props.get($font-family);
46 @include iro.bem-modifier('xl') { 50 font-size: props.get($font-size);
47 @include mx.heading-strong(--xl); 51 font-weight: props.get($font-weight);
48 } 52 font-feature-settings: props.get($feature-settings);
49 53 line-height: props.get($line-height);
50 @include iro.bem-modifier('lg') { 54 letter-spacing: props.get($letter-spacing);
51 @include mx.heading-medium(--lg); 55 transform: translateX(props.get(vars.$offset));
52 } 56 }
53 57 }
54 @include iro.bem-modifier('md') { 58 }
55 @include mx.heading-medium(--md); 59 }
56 }
57
58 @include iro.bem-modifier('sm') {
59 @include mx.heading-faint(--sm);
60 }
61
62 @include iro.bem-modifier('xs') {
63 @include mx.heading-faint(--xs);
64 }
65
66 @include iro.bem-modifier('display') {
67 @include mx.set-font(--headline);
68
69 @include iro.bem-modifier('xxl') {
70 @include mx.heading-strong(--display --xxl);
71
72 @include media.media('<=md') {
73 @include mx.heading-strong(--display-sm --xxl);
74 }
75 }
76
77 @include iro.bem-modifier('xl') {
78 @include mx.heading-strong(--display --xl);
79
80 @include media.media('<=md') {
81 @include mx.heading-strong(--display-sm --xl);
82 }
83 }
84
85 @include iro.bem-modifier('lg') {
86 @include mx.heading-strong(--display --lg);
87
88 @include media.media('<=md') {
89 @include mx.heading-strong(--display-sm --lg);
90 }
91 }
92
93 @include iro.bem-modifier('md') {
94 @include mx.heading-strong(--display --md);
95
96 @include media.media('<=md') {
97 @include mx.heading-strong(--display-sm --md);
98 }
99 }
100
101 @include iro.bem-modifier('sm') {
102 @include mx.heading-medium(--display --sm);
103
104 @include media.media('<=md') {
105 @include mx.heading-medium(--display-sm --sm);
106 }
107 }
108
109 @include iro.bem-modifier('xs') {
110 @include mx.heading-faint(--display --xs);
111
112 @include media.media('<=md') {
113 @include mx.heading-faint(--display-sm --xs);
114 }
115 }
116 }
117 }
118} 60}
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss
new file mode 100644
index 0000000..1d6df26
--- /dev/null
+++ b/src/objects/_heading.vars.scss
@@ -0,0 +1,123 @@
1@use 'iro-sass/src/props';
2@use '../core.vars' as core;
3
4$offset: props.def(--o-heading--offset, -.02em) !default;
5$margin-bs: props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default;
6$margin-bs-sibling: props.def(--o-heading--margin-bs-sibling, props.get(core.$size--325)) !default;
7
8$text-color: props.def(--o-heading--text-color, props.get(core.$theme, --heading), 'color') !default;
9$bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50), 'color') !default;
10
11$font-family: props.def(--o-heading--font-family, props.get(core.$font--standard--family)) !default;
12$line-height: props.def(--o-heading--line-height, props.get(core.$font--standard--line-height)) !default;
13$font-weight: props.def(--o-heading--font-weight, bold) !default;
14$feature-settings: props.def(--o-heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
15
16$font-family--xxl: props.def(--o-heading--xxl--font-family, props.get(core.$font--headline--family)) !default;
17$line-height--xxl: props.def(--o-heading--xxl--line-height, props.get(core.$font--headline--line-height)) !default;
18$font-size--xxl: props.def(--o-heading--xxl--font-size, props.get(core.$font-size--300)) !default;
19$font-weight--xxl: props.def(--o-heading--xxl--font-weight, props.get(core.$font--headline--weight)) !default;
20$letter-spacing--xxl: props.def(--o-heading--xxl--letter-spacing, 0) !default;
21$feature-settings--xxl: props.def(--o-heading--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
22
23$font-family--xl: props.def(--o-heading--xl--font-family, props.get(core.$font--headline--family)) !default;
24$line-height--xl: props.def(--o-heading--xl--line-height, props.get(core.$font--headline--line-height)) !default;
25$font-size--xl: props.def(--o-heading--xl--font-size, props.get(core.$font-size--200)) !default;
26$font-weight--xl: props.def(--o-heading--xl--font-weight, props.get(core.$font--headline--weight)) !default;
27$letter-spacing--xl: props.def(--o-heading--xl--letter-spacing, 0) !default;
28$feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
29
30$font-family--lg: props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default;
31$line-height--lg: props.def(--o-heading--lg--line-height, props.get(core.$font--standard--line-height)) !default;
32$font-size--lg: props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default;
33$font-weight--lg: props.def(--o-heading--lg--font-weight, bold) !default;
34$letter-spacing--lg: props.def(--o-heading--lg--letter-spacing, 0) !default;
35$feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
36
37$font-family--md: props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default;
38$line-height--md: props.def(--o-heading--md--line-height, props.get(core.$font--standard--line-height)) !default;
39$font-size--md: props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default;
40$font-weight--md: props.def(--o-heading--md--font-weight, bold) !default;
41$letter-spacing--md: props.def(--o-heading--md--letter-spacing, 0) !default;
42$feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
43
44$font-family--sm: props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default;
45$line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default;
46$font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--75)) !default;
47$font-weight--sm: props.def(--o-heading--sm--font-weight, 500) !default;
48$letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 1px) !default;
49$feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
50
51$font-family--xs: props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default;
52$line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default;
53$font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default;
54$font-weight--xs: props.def(--o-heading--xs--font-weight, 500) !default;
55$letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default;
56$feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
57
58$sizes: (
59 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs,
60 'sm' $font-family--sm $line-height--sm $font-size--sm $font-weight--sm $letter-spacing--sm $feature-settings--sm,
61 'md' $font-family--md $line-height--md $font-size--md $font-weight--md $letter-spacing--md $feature-settings--md,
62 'lg' $font-family--lg $line-height--lg $font-size--lg $font-weight--lg $letter-spacing--lg $feature-settings--lg,
63 'xl' $font-family--xl $line-height--xl $font-size--xl $font-weight--xl $letter-spacing--xl $feature-settings--xl,
64 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl,
65) !default;
66
67$display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default;
68$display--line-height--xxl: props.def(--o-heading--display--xxl--line-height, props.get(core.$font--headline--line-height)) !default;
69$display--font-size--xxl: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--1100)) !default;
70$display--font-weight--xxl: props.def(--o-heading--display--xxl--font-weight, props.get(core.$font--headline--weight)) !default;
71$display--letter-spacing--xxl: props.def(--o-heading--display--xxl--letter-spacing, 0) !default;
72$display--feature-settings--xxl: props.def(--o-heading--display--xxl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
73
74$display--font-family--xl: props.def(--o-heading--display--xl--font-family, props.get(core.$font--headline--family)) !default;
75$display--line-height--xl: props.def(--o-heading--display--xl--line-height, props.get(core.$font--headline--line-height)) !default;
76$display--font-size--xl: props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--700)) !default;
77$display--font-weight--xl: props.def(--o-heading--display--xl--font-weight, props.get(core.$font--headline--weight)) !default;
78$display--letter-spacing--xl: props.def(--o-heading--display--xl--letter-spacing, 0) !default;
79$display--feature-settings--xl: props.def(--o-heading--display--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
80
81$display--font-family--lg: props.def(--o-heading--display--lg--font-family, props.get(core.$font--headline--family)) !default;
82$display--line-height--lg: props.def(--o-heading--display--lg--line-height, props.get(core.$font--headline--line-height)) !default;
83$display--font-size--lg: props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--300)) !default;
84$display--font-weight--lg: props.def(--o-heading--display--lg--font-weight, props.get(core.$font--headline--weight)) !default;
85$display--letter-spacing--lg: props.def(--o-heading--display--lg--letter-spacing, 0) !default;
86$display--feature-settings--lg: props.def(--o-heading--display--lg--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
87
88$display--font-family--md: props.def(--o-heading--display--md--font-family, props.get(core.$font--headline--family)) !default;
89$display--line-height--md: props.def(--o-heading--display--md--line-height, props.get(core.$font--headline--line-height)) !default;
90$display--font-size--md: props.def(--o-heading--display--md--font-size, props.get(core.$font-size--150)) !default;
91$display--font-weight--md: props.def(--o-heading--display--md--font-weight, props.get(core.$font--headline--weight)) !default;
92$display--letter-spacing--md: props.def(--o-heading--display--md--letter-spacing, 0) !default;
93$display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
94
95$display--font-family--sm: props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default;
96$display--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default;
97$display--font-size--sm: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75)) !default;
98$display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default;
99$display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default;
100$display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
101
102$display--font-family--xs: props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default;
103$display--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default;
104$display--font-size--xs: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default;
105$display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, 500) !default;
106$display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default;
107$display--feature-settings--xs: props.def(--o-heading--display--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
108
109$display--font-size--xxl--md: props.def(--o-heading--display--xxl--font-size, props.get(core.$font-size--900), 'md') !default;
110$display--font-size--xl--md: props.def(--o-heading--display--xl--font-size, props.get(core.$font-size--600), 'md') !default;
111$display--font-size--lg--md: props.def(--o-heading--display--lg--font-size, props.get(core.$font-size--200), 'md') !default;
112$display--font-size--md--md: props.def(--o-heading--display--md--font-size, props.get(core.$font-size--100), 'md') !default;
113$display--font-size--sm--md: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75), 'md') !default;
114$display--font-size--xs--md: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), 'md') !default;
115
116$display--sizes: (
117 'xs' $display--font-family--xs $display--line-height--xs $display--font-size--xs $display--font-weight--xs $display--letter-spacing--xs $display--feature-settings--xs,
118 'sm' $display--font-family--sm $display--line-height--sm $display--font-size--sm $display--font-weight--sm $display--letter-spacing--sm $display--feature-settings--sm,
119 'md' $display--font-family--md $display--line-height--md $display--font-size--md $display--font-weight--md $display--letter-spacing--md $display--feature-settings--md,
120 'lg' $display--font-family--lg $display--line-height--lg $display--font-size--lg $display--font-weight--lg $display--letter-spacing--lg $display--feature-settings--lg,
121 'xl' $display--font-family--xl $display--line-height--xl $display--font-size--xl $display--font-weight--xl $display--letter-spacing--xl $display--feature-settings--xl,
122 'xxl' $display--font-family--xxl $display--line-height--xxl $display--font-size--xxl $display--font-weight--xxl $display--letter-spacing--xxl $display--feature-settings--xxl,
123) !default;
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
index 1491dd9..1941960 100644
--- a/src/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -1,26 +1,25 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:meta';
2@use '../functions' as fn; 2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props';
4@use '../props' as *;
3 5
4@include iro.props-namespace('icon') { 6@forward 'icon.vars';
5 @include iro.props-store(( 7@use 'icon.vars' as vars;
6 --dims: (
7 --stroke: 1.5px,
8 --size: calc(1 / 14 * 16em),
9 --valign: -.2em,
10 )
11 ));
12 8
13 @include iro.bem-object(iro.props-namespace()) { 9@mixin styles {
14 display: inline; 10 @include materialize-at-root(meta.module-variables('vars'));
15 inline-size: fn.dim(--size);
16 block-size: fn.dim(--size);
17 stroke-width: fn.dim(--stroke);
18 stroke-linecap: round;
19 stroke-linejoin: round;
20 vertical-align: fn.dim(--valign);
21 11
22 @include iro.bem-modifier('block') { 12 @include bem.object('icon') {
23 display: block; 13 display: inline;
24 } 14 inline-size: props.get(vars.$size);
25 } 15 block-size: props.get(vars.$size);
16 vertical-align: props.get(vars.$valign);
17 stroke-width: props.get(vars.$stroke-width);
18 stroke-linecap: round;
19 stroke-linejoin: round;
20
21 @include bem.modifier('block') {
22 display: block;
23 }
24 }
26} 25}
diff --git a/src/objects/_icon.vars.scss b/src/objects/_icon.vars.scss
new file mode 100644
index 0000000..ff1541d
--- /dev/null
+++ b/src/objects/_icon.vars.scss
@@ -0,0 +1,5 @@
1@use 'iro-sass/src/props';
2
3$stroke-width: props.def(--o-icon--stroke-width, 1.5px) !default;
4$size: props.def(--o-icon--size, calc(1 / 14 * 16em)) !default;
5$valign: props.def(--o-icon--valign, -.18em) !default;
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index 8ad8584..b95148f 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -1,313 +1,135 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:map';
2@use '../functions' as fn; 2@use 'sass:meta';
3@use 'sass:string';
4@use 'iro-sass/src/bem';
5@use 'iro-sass/src/props';
6@use '../props' as *;
3 7
4@use 'action-button'; 8@forward 'lightbox.vars';
9@use 'lightbox.vars' as vars;
5 10
6$static-themes: 'black' 'white' !default; 11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars'));
7 13
8@include iro.props-namespace('lightbox') { 14 @include bem.object('lightbox') {
9 @include iro.props-store(( 15 flex: 1 1 auto;
10 --dims: ( 16 min-block-size: 0;
11 --pad: fn.global-dim(--size --150),
12 17
13 --thumbnail: ( 18 @include bem.elem('header') {
14 --size: fn.global-dim(--size --700), 19 display: flex;
15 --rounding: fn.global-dim(--rounding), 20 grid-area: header;
16 --spacing: fn.global-dim(--size --100), 21 align-items: flex-start;
17 --border: fn.global-dim(--border --thin), 22 padding-block-start: props.get(vars.$pad);
18 23 padding-inline: props.get(vars.$pad);
19 --selected: ( 24 }
20 --border: fn.global-dim(--border --medium),
21 ),
22 25
23 --key-focus: ( 26 @include bem.elem('img') {
24 --border: fn.global-dim(--key-focus --border), 27 box-sizing: border-box;
25 --border-offset: fn.global-dim(--key-focus --border-offset), 28 display: block;
26 --outline: fn.global-dim(--key-focus --outline), 29 grid-area: content;
27 ), 30 place-self: center;
28 ), 31 inline-size: auto;
32 max-inline-size: 100%;
33 block-size: auto;
34 max-block-size: props.get(vars.$image--max-height);
35 padding: props.get(vars.$pad);
36 margin-inline: auto;
37 border-radius: calc(props.get(vars.$pad) + props.get(vars.$image--border-radius));
38 }
29 39
30 --close-button: ( 40 @include bem.elem('thumbnails') {
31 --font-size: fn.global-dim(--font-size --200), 41 display: none;
32 ), 42 grid-area: thumbnails;
43 gap: props.get(vars.$thumbnails--spacing);
44 padding: props.get(vars.$pad);
45 margin-block-start: calc(-1 * props.get(vars.$pad));
46 overflow: auto;
47 }
33 48
34 --nav-button: ( 49 @include bem.elem('close-btn') {
35 --width: fn.global-dim(--size --2000), 50 display: none;
36 --height: fn.global-dim(--size --3800), 51 flex: 0 0 auto;
37 --font-size: fn.global-dim(--font-size --200), 52 margin-block-start: calc(-.5 * props.get(vars.$pad));
38 ), 53 margin-inline: auto calc(-.5 * props.get(vars.$pad));
39 ), 54 font-size: props.get(vars.$close-button--font-size);
40 --colors: ( 55 }
41 --thumbnail: (
42 --border: fn.global-color(--border-strong),
43
44 --hover: (
45 --border: fn.global-color(--text-mute-more),
46 ),
47
48 --selected: (
49 --border: fn.global-color(--heading),
50 ),
51 56
52 --key-focus: ( 57 @include bem.elem('nav-btn') {
53 --border: fn.global-color(--focus --border), 58 position: relative;
54 --outline: fn.global-color(--focus --outline), 59 display: none;
55 ), 60 align-self: center;
56 ), 61 overflow: visible;
57 ), 62 font-size: props.get(vars.$nav-button--font-size);
58 ));
59 63
60 @each $theme in $static-themes { 64 &::before {
61 @include iro.props-store(( 65 position: absolute;
62 --colors: ( 66 inset-block-start: 50%;
63 --static-#{$theme}: ( 67 display: block;
64 --text: fn.global-color(--white-transparent --800), 68 inline-size: props.get(vars.$nav-button--inline-size);
65 --thumbnail: ( 69 block-size: props.get(vars.$nav-button--block-size);
66 --border: fn.global-color(--white-transparent --400), 70 content: '';
67 71 transform: translateY(-50%);
68 --hover: ( 72 }
69 --border: fn.global-color(--white-transparent --500),
70 ),
71
72 --selected: (
73 --border: fn.global-color(--white-transparent --900),
74 ),
75 73
76 --key-focus: ( 74 @include bem.modifier('prev') {
77 --border: fn.global-color(--#{$theme}-transparent --900), 75 grid-area: prev;
78 --outline: fn.global-color(--#{$theme}-transparent --300), 76 margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad));
79 ),
80 ),
81 )
82 )
83 ));
84 }
85 77
86 @include iro.props-store(( 78 &::before {
87 --dims: ( 79 inset-inline-start: 0;
88 --thumbnail: ( 80 }
89 --size: fn.global-dim(--size --600), 81 }
90 ),
91 --nav-button: (
92 --width: fn.global-dim(--size --2500),
93 --height: fn.global-dim(--size --2500),
94 ),
95 ),
96 ), 'md');
97
98 @include iro.bem-object(iro.props-namespace()) {
99 display: grid;
100 grid-template-rows: auto minmax(0, 1fr) auto auto;
101 grid-template-columns: auto minmax(0, 1fr) auto;
102 grid-template-areas:
103 'header header header'
104 'prev content next'
105 'thumbnails thumbnails thumbnails'
106 'footer footer footer';
107 box-sizing: border-box;
108 min-block-size: 0;
109 flex: 1 1 auto;
110
111 @include iro.bem-elem('header') {
112 grid-area: header;
113 display: flex;
114 align-items: flex-start;
115 padding-block-start: fn.dim(--pad);
116 padding-inline: fn.dim(--pad);
117 }
118
119 @include iro.bem-elem('img') {
120 display: none;
121 box-sizing: border-box;
122 grid-area: content;
123 max-inline-size: 100%;
124 max-block-size: 100%;
125 place-self: center;
126 padding: fn.dim(--pad);
127
128 @include iro.bem-sibling-elem('img') {
129 @include iro.bem-modifier('default') {
130 display: block;
131
132 @include iro.bem-next-elem('nav-btn') {
133 display: block;
134 82
135 @include iro.bem-next-elem('nav-btn') { 83 @include bem.modifier('next') {
136 display: block; 84 grid-area: next;
137 } 85 margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad));
138 }
139 }
140 }
141
142 @include iro.bem-multi('&:target', 'is' 'visible') {
143 display: block;
144
145 @include iro.bem-next-elem('nav-btn') {
146 display: block;
147
148 @include iro.bem-next-elem('nav-btn') {
149 display: block;
150 }
151 }
152
153 @include iro.bem-sibling-elem('img') {
154 @include iro.bem-modifier('default') {
155 display: none;
156
157 @include iro.bem-next-elem('nav-btn') {
158 display: none;
159
160 @include iro.bem-next-elem('nav-btn') {
161 display: none;
162 }
163 }
164 }
165 }
166 }
167 }
168
169 @include iro.bem-elem('thumbnails') {
170 grid-area: thumbnails;
171 display: flex;
172 gap: fn.dim(--thumbnail --spacing);
173 padding: fn.dim(--pad);
174 margin-block-start: calc(-1 * fn.dim(--pad));
175 overflow: auto;
176 }
177 86
178 @include iro.bem-elem('footer') { 87 &::before {
179 grid-area: footer; 88 inset-inline-end: 0;
180 display: flex; 89 }
181 align-items: flex-start; 90 }
182 padding-block: 0 fn.dim(--pad); 91 }
183 padding-inline: fn.dim(--pad);
184 }
185 92
186 @include iro.bem-elem('thumbnail') { 93 @include bem.modifier('interactive') {
187 position: relative; 94 display: grid;
188 flex: 0 0 auto; 95 grid-template-areas:
189 inline-size: fn.dim(--thumbnail --size); 96 'header header header'
190 block-size: fn.dim(--thumbnail --size); 97 'prev content next'
191 overflow: hidden; 98 'thumbnails thumbnails thumbnails';
192 border-radius: fn.dim(--thumbnail --rounding); 99 grid-template-rows: auto minmax(0, 1fr) auto auto;
193 outline: fn.dim(--thumbnail --border) solid fn.color(--thumbnail --border); 100 grid-template-columns: auto minmax(0, 1fr) auto;
194 outline-offset: calc(-1 * fn.dim(--thumbnail --border));
195 opacity: .75;
196 101
197 &:hover, 102 @include bem.modifier('fullscreen') {
198 &:active, 103 block-size: props.get(vars.$fullscreen--height);
199 &:focus-visible { 104 }
200 outline-color: fn.color(--thumbnail --hover --border);
201 opacity: 1;
202 }
203 105
204 @include iro.bem-is('selected') { 106 @include bem.elem('img') {
205 $focus-border-offset: calc(-1 * fn.dim(--thumbnail --selected --border)); 107 display: none;
108 max-block-size: 100%;
109 margin-inline: 0;
206 110
207 margin: $focus-border-offset; 111 @include bem.multi('&:target', 'is' 'visible') {
208 border: fn.dim(--thumbnail --selected --border) solid fn.color(--thumbnail --selected --border); 112 display: block;
209 border-radius: calc(fn.dim(--thumbnail --rounding) - $focus-border-offset); 113 }
210 outline: none; 114 }
211 opacity: 1;
212 }
213 115
214 &:focus-visible { 116 @include bem.elem('thumbnails') {
215 $focus-border-offset: calc(-1 * fn.dim(--thumbnail --key-focus --border-offset)); 117 display: flex;
216 118 }
217 margin: $focus-border-offset;
218 border: fn.dim(--thumbnail --key-focus --border-offset) solid transparent;
219 border-radius: calc(fn.dim(--thumbnail --rounding) - $focus-border-offset);
220 outline: fn.dim(--thumbnail --key-focus --border) solid fn.color(--thumbnail --key-focus --border);
221 outline-offset: 0;
222 box-shadow: 0 0 0 calc(fn.dim(--thumbnail --key-focus --outline) + fn.dim(--thumbnail --key-focus --border)) fn.color(--thumbnail --key-focus --outline);
223 }
224 }
225
226 @include iro.bem-elem('thumbnail-img') {
227 display: block;
228 position: absolute;
229 inset-block-start: 0;
230 inset-inline-start: 0;
231 inline-size: 100%;
232 block-size: 100%;
233 object-fit: cover;
234 object-position: center center;
235 }
236
237 @include iro.bem-elem('thumbnail-icon') {
238 position: absolute;
239 inset-block-start: 50%;
240 inset-inline-start: 50%;
241 transform: translate(-50%, -50%);
242 }
243
244 @include iro.bem-elem('close-btn') {
245 flex: 0 0 auto;
246 margin-block-start: calc(-.5 * fn.dim(--pad));
247 margin-inline: auto calc(-.5 * fn.dim(--pad));
248 font-size: fn.dim(--close-button --font-size);
249 }
250
251 @include iro.bem-elem('nav-btn') {
252 display: none;
253 position: relative;
254 align-self: center;
255 overflow: visible;
256 font-size: fn.dim(--nav-button --font-size);
257
258 &::before {
259 content: '';
260 display: block;
261 position: absolute;
262 inset-block-start: 50%;
263 inline-size: fn.dim(--nav-button --width);
264 block-size: fn.dim(--nav-button --height);
265 transform: translateY(-50%);
266 }
267
268 @include iro.bem-modifier('prev') {
269 grid-area: prev;
270 margin-inline: calc(.5 * fn.dim(--pad)) calc(-1 * fn.dim(--pad));
271
272 &::before {
273 inset-inline-start: 0;
274 }
275 }
276
277 @include iro.bem-modifier('next') {
278 grid-area: next;
279 margin-inline: calc(-1 * fn.dim(--pad)) calc(.5 * fn.dim(--pad));
280
281 &::before {
282 inset-inline-end: 0;
283 }
284 }
285 }
286
287 @each $theme in $static-themes {
288 @include iro.bem-modifier(static-#{$theme}) {
289 color: fn.color(--static-#{$theme} --text);
290 119
291 @include iro.bem-elem('thumbnail') { 120 @include bem.elem('close-btn') {
292 outline-color: fn.color(--static-#{$theme} --thumbnail --border); 121 display: block;
122 }
293 123
294 &:hover, 124 @include bem.elem('nav-btn') {
295 &:active, 125 display: block;
296 &:focus-visible { 126 }
297 outline-color: fn.color(--static-#{$theme} --thumbnail --hover --border); 127 }
298 }
299
300 @include iro.bem-is('selected') {
301 border-color: fn.color(--static-#{$theme} --thumbnail --selected --border);
302 }
303 128
304 &:focus-visible { 129 @each $theme in map.keys(props.get(vars.$static-themes)) {
305 border-color: transparent; 130 @include bem.modifier(string.slice($theme, 3)) {
306 outline-color: fn.color(--static-#{$theme} --thumbnail --key-focus --border); 131 color: props.get(vars.$static-themes, $theme, --text);
307 box-shadow: 0 0 0 calc(fn.dim(--thumbnail --key-focus --outline) + fn.dim(--thumbnail --key-focus --border)) fn.color(--static-#{$theme} --thumbnail --key-focus --outline); 132 }
308 } 133 }
309 } 134 }
310 }
311 }
312 }
313} 135}
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss
new file mode 100644
index 0000000..6d22aa8
--- /dev/null
+++ b/src/objects/_lightbox.vars.scss
@@ -0,0 +1,33 @@
1@use 'sass:map';
2@use 'sass:string';
3@use 'iro-sass/src/props';
4@use '../core.vars' as core;
5
6$pad: props.def(--o-lightbox--pad, props.get(core.$size--150)) !default;
7$fullscreen--height: props.def(--o-lightbox--fullscreen--height, 100vh) !default;
8
9$image--max-height: props.def(--o-lightbox--image--max-height, calc(100vh - props.get(core.$size--600))) !default;
10$image--border-radius: props.def(--o-lightbox--image--border-radius, props.get(core.$rounding)) !default;
11
12$close-button--font-size: props.def(--o-lightbox--close-button--font-size, props.get(core.$font-size--200)) !default;
13
14$nav-button--inline-size: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2000)) !default;
15$nav-button--block-size: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--3800)) !default;
16$nav-button--font-size: props.def(--o-lightbox--nav-button--font-size, props.get(core.$font-size--200)) !default;
17
18$nav-button--inline-size--md: props.def(--o-lightbox--nav-button--inline-size, props.get(core.$size--2500), 'md') !default;
19$nav-button--block-size--md: props.def(--o-lightbox--nav-button--block-size, props.get(core.$size--2500), 'md') !default;
20
21$thumbnails--spacing: props.def(--o-lightbox--thumbnails--spacing, props.get(core.$size--100)) !default;
22
23$static-themes: props.def(--o-lightbox, (), 'color');
24
25@each $theme in map.keys(props.get(core.$transparent-colors)) {
26 $lightbox-theme: --static-#{string.slice($theme, 3)};
27
28 $static-themes: props.merge($static-themes, (
29 $lightbox-theme: (
30 --text: props.get(core.$transparent-colors, $theme, --800),
31 )
32 ));
33}
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index 0f691a2..f370067 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -1,137 +1,102 @@
1/* stylelint-disable length-zero-no-unit */ 1@use 'sass:meta';
2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props';
4@use '../props' as *;
5@use 'icon.vars' as icon;
2 6
3@use 'iro-sass/src/index' as iro; 7@forward 'menu.vars';
4@use '../functions' as fn; 8@use 'menu.vars' as vars;
5 9
6@use './icon'; 10@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars'));
7 12
8@include iro.props-namespace('menu') { 13 @include bem.object('menu') {
9 @include iro.props-store(( 14 display: flex;
10 --dims: ( 15 flex-direction: column;
11 --spacing: 0em, 16 gap: props.get(vars.$spacing);
12 --header: (
13 --font-size: fn.global-dim(--font-size --50),
14 ),
15 --separator: fn.global-dim(--size --100),
16 --item: (
17 --pad-i: fn.global-dim(--size --150),
18 --pad-b: fn.global-dim(--size --100),
19 --rounding: 0em,
20
21 --key-focus: (
22 --border: fn.global-dim(--key-focus --border),
23 --border-offset: fn.global-dim(--key-focus --border-offset),
24 --outline: fn.global-dim(--key-focus --outline),
25 ),
26 ),
27 ),
28 --colors: (
29 --separator: fn.global-color(--border),
30 --header: (
31 --label: fn.global-color(--heading),
32 ),
33 --item: (
34 --hover: (
35 --bg: fn.global-color(--border-mute),
36 --label: fn.global-color(--heading),
37 ),
38 --active: (
39 --bg: fn.global-color(--border),
40 --label: fn.global-color(--heading),
41 ),
42 --disabled: (
43 --label: fn.global-color(--text-disabled),
44 ),
45 --key-focus: (
46 --border: fn.global-color(--focus --border),
47 --outline: fn.global-color(--focus --outline),
48 ),
49 ),
50 ),
51 ));
52 17
53 @include iro.bem-object(iro.props-namespace()) { 18 @include bem.elem('header') {
54 display: flex; 19 padding-block: props.get(vars.$item--pad-b);
55 flex-direction: column; 20 padding-inline: props.get(vars.$item--pad-i);
56 gap: fn.dim(--spacing); 21 font-size: props.get(vars.$header--font-size);
22 font-weight: 500;
23 color: props.get(vars.$header--label-color);
24 text-transform: uppercase;
25 letter-spacing: .5px;
57 26
58 @include iro.bem-elem('header') { 27 @include bem.next-twin-elem {
59 padding-block: fn.dim(--item --pad-b); 28 margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing));
60 padding-inline: fn.dim(--item --pad-i); 29 }
61 color: fn.color(--header --label); 30 }
62 font-size: fn.dim(--header --font-size);
63 font-weight: 500;
64 letter-spacing: .5px;
65 text-transform: uppercase;
66 31
67 @include iro.bem-next-twin-elem { 32 @include bem.elem('item') {
68 margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); 33 padding-block: props.get(vars.$item--pad-b);
69 } 34 padding-inline: props.get(vars.$item--pad-i);
70 } 35 margin: calc(-1 * props.get(vars.$item--key-focus--outline-width));
36 color: props.get(vars.$item--disabled--label-color);
37 background-clip: padding-box;
38 border: props.get(vars.$item--key-focus--outline-width) solid transparent;
39 border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width));
71 40
72 @include iro.bem-elem('item') { 41 &:link,
73 padding-block: fn.dim(--item --pad-b); 42 &:visited,
74 padding-inline: fn.dim(--item --pad-i); 43 &:enabled {
75 margin: calc(-1 * fn.dim(--item --key-focus --outline)); 44 color: currentColor;
76 border: fn.dim(--item --key-focus --outline) solid transparent;
77 border-radius: calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --outline));
78 color: fn.color(--item --disabled --label);
79 background-clip: padding-box;
80 45
81 &:link, 46 @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') {
82 &:visited, 47 color: props.get(vars.$item--hover--label-color);
83 &:enabled { 48 background-color: props.get(vars.$item--hover--bg-color);
84 color: currentColor; 49 }
85 50
86 @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') { 51 &:active {
87 background-color: fn.color(--item --hover --bg); 52 color: props.get(vars.$item--active--label-color);
88 color: fn.color(--item --hover --label); 53 background-color: props.get(vars.$item--active--bg-color);
89 } 54 }
90 55
91 &:active { 56 &:focus-visible {
92 background-color: fn.color(--item --active --bg); 57 outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width);
93 color: fn.color(--item --active --label); 58 box-shadow:
94 } 59 0
60 0
61 0
62 calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width))
63 props.get(vars.$item--key-focus--outline-color);
64 }
65 }
95 66
96 &:focus-visible { 67 @include bem.next-elem('header') {
97 outline: fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border); 68 margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing));
98 box-shadow: 0 0 0 calc(fn.dim(--item --key-focus --border) + fn.dim(--item --key-focus --outline)) fn.color(--item --key-focus --outline); 69 }
99 } 70 }
100 }
101 71
102 @include iro.bem-next-elem('header') { 72 @include bem.elem('header') {
103 margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); 73 &:link,
104 } 74 &:visited,
105 } 75 &:enabled {
76 color: props.get(vars.$header--label-color);
77 }
78 }
106 79
107 @include iro.bem-elem('header') { 80 @include bem.elem('separator') {
108 &:link, 81 block-size: 1px;
109 &:visited, 82 margin-block: props.get(vars.$separator-width);
110 &:enabled { 83 margin-inline: props.get(vars.$item--pad-i);
111 color: fn.color(--header --label); 84 background-color: props.get(vars.$separator-color);
112 } 85 }
113 }
114 86
115 @include iro.bem-elem('separator') { 87 @include bem.elem('slot') {
116 block-size: 1px; 88 padding-block: props.get(vars.$item--pad-b);
117 margin-block: fn.dim(--separator); 89 padding-inline: props.get(vars.$item--pad-i);
118 margin-inline: fn.dim(--item --pad-i); 90 }
119 background-color: fn.color(--separator);
120 }
121 91
122 @include iro.bem-elem('slot') { 92 @include bem.elem('icon-slot') {
123 padding-block: fn.dim(--item --pad-b); 93 display: flex;
124 padding-inline: fn.dim(--item --pad-i); 94 justify-content: center;
125 } 95 inline-size: props.get(icon.$size);
96 }
126 97
127 @include iro.bem-elem('icon-slot') { 98 @include bem.modifier('pull') {
128 display: flex; 99 margin: calc(-1 * props.get(vars.$item--pad-i));
129 justify-content: center; 100 }
130 inline-size: fn.foreign-dim(--icon, --size); 101 }
131 }
132
133 @include iro.bem-modifier('pull') {
134 margin: calc(-1 * fn.dim(--item --pad-i));
135 }
136 }
137} 102}
diff --git a/src/objects/_menu.vars.scss b/src/objects/_menu.vars.scss
new file mode 100644
index 0000000..d242a1f
--- /dev/null
+++ b/src/objects/_menu.vars.scss
@@ -0,0 +1,29 @@
1@use 'sass:map';
2@use 'iro-sass/src/props';
3@use '../core.vars' as core;
4
5$spacing: props.def(--o-menu--spacing, 0em) !default;
6$header--font-size: props.def(--o-menu--header--font-size, props.get(core.$font-size--50)) !default;
7$separator-width: props.def(--o-menu--separator-width, props.get(core.$size--100)) !default;
8
9$item--pad-i: props.def(--o-menu--item--pad-i, props.get(core.$size--150)) !default;
10$item--pad-b: props.def(--o-menu--item--pad-b, props.get(core.$size--100)) !default;
11$item--rounding: props.def(--o-menu--item--rounding, 0em) !default;
12
13$item--key-focus--border-width: props.def(--o-menu--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
14$item--key-focus--border-offset: props.def(--o-menu--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
15$item--key-focus--outline-width: props.def(--o-menu--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
16
17$separator-color: props.def(--o-menu--separator-color, props.get(core.$theme, --border), 'color') !default;
18$header--label-color: props.def(--o-menu--header--label-color, props.get(core.$theme, --heading), 'color') !default;
19
20$item--hover--bg-color: props.def(--o-menu--item--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
21$item--hover--label-color: props.def(--o-menu--item--hover--label-color, props.get(core.$theme, --heading), 'color') !default;
22
23$item--active--bg-color: props.def(--o-menu--item--active--bg-color, props.get(core.$theme, --border), 'color') !default;
24$item--active--label-color: props.def(--o-menu--item--active--label-color, props.get(core.$theme, --heading), 'color') !default;
25
26$item--disabled--label-color: props.def(--o-menu--item--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
27
28$item--key-focus--border-color: props.def(--o-menu--item--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
29$item--key-focus--outline-color: props.def(--o-menu--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss
new file mode 100644
index 0000000..ec03c62
--- /dev/null
+++ b/src/objects/_navbar.scss
@@ -0,0 +1,191 @@
1@use 'sass:map';
2@use 'sass:meta';
3@use 'sass:string';
4@use 'iro-sass/src/bem';
5@use 'iro-sass/src/props';
6@use '../props' as *;
7
8@forward 'navbar.vars';
9@use 'navbar.vars' as vars;
10
11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars'));
13
14 @include bem.object('navbar') {
15 display: flex;
16 block-size: props.get(vars.$block-size);
17
18 @include bem.elem('item-content-text') {
19 margin-inline: props.get(vars.$item--pad-i-label);
20 }
21
22 @include bem.elem('item-content') {
23 position: relative;
24 padding-block: props.get(vars.$item--pad-b);
25 padding-inline: props.get(vars.$item--pad-i);
26 font-size: props.get(vars.$item--font-size);
27 color: currentColor;
28 white-space: nowrap;
29 border-radius: 100em;
30
31 &::after {
32 position: absolute;
33 inset: calc(-1 * props.get(vars.$key-focus--border-offset));
34 z-index: -10;
35 display: block;
36 visibility: hidden;
37 pointer-events: none;
38 outline: props.get(vars.$default-theme, --key-focus, --border) solid props.get(vars.$key-focus--border-width);
39 content: '';
40 border-radius: 100em;
41 box-shadow:
42 0
43 0
44 0
45 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
46 props.get(vars.$default-theme, --key-focus, --outline);
47 }
48 }
49
50 @include bem.elem('item') {
51 display: flex;
52 flex-direction: column;
53 align-items: center;
54 justify-content: center;
55 inline-size: 100%;
56 padding-inline: calc(.5 * props.get(vars.$spacing));
57 font-weight: 500;
58 color: props.get(vars.$default-theme, --disabled, --label-color);
59
60 &:link,
61 &:visited,
62 &:enabled {
63 color: props.get(vars.$default-theme, --label-color);
64
65 &:hover,
66 &:focus-visible {
67 color: props.get(vars.$default-theme, --hover, --label-color);
68
69 @include bem.elem('item-content') {
70 background-color: props.get(vars.$default-theme, --hover, --bg-color);
71 }
72 }
73
74 &:focus-visible {
75 @include bem.elem('item-content') {
76 &::after {
77 visibility: visible;
78 }
79 }
80 }
81
82 &:active {
83 color: props.get(vars.$default-theme, --active, --label-color);
84
85 @include bem.elem('item-content') {
86 background-color: props.get(vars.$default-theme, --active, --bg-color);
87 }
88 }
89 }
90
91 @include bem.is('selected') {
92 font-weight: bold;
93 color: props.get(vars.$default-theme, --selected, --disabled, --label-color);
94
95 @include bem.elem('item-content') {
96 background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color);
97 }
98
99 &:link,
100 &:visited,
101 &:enabled {
102 color: props.get(vars.$default-theme, --selected, --label-color);
103
104 @include bem.elem('item-content') {
105 background-color: props.get(vars.$default-theme, --selected, --bg-color);
106 }
107
108 &:hover,
109 &:focus-visible {
110 color: props.get(vars.$default-theme, --selected, --hover, --label-color);
111
112 @include bem.elem('item-content') {
113 background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color);
114 }
115 }
116
117 &:active {
118 color: props.get(vars.$default-theme, --selected, --active, --label-color);
119
120 @include bem.elem('item-content') {
121 background-color: props.get(vars.$default-theme, --selected, --active, --bg-color);
122 }
123 }
124 }
125 }
126 }
127
128 @include bem.modifier('hide-unselected') {
129 @include bem.elem('item') {
130 display: none;
131
132 @include bem.is('selected') {
133 display: flex;
134 }
135 }
136 }
137
138 @include bem.modifier('adapt') {
139 gap: props.get(vars.$spacing);
140 block-size: 100%;
141
142 @include bem.elem('item') {
143 padding-inline: 0;
144 }
145 }
146
147
148 @include bem.modifier('align-block') {
149 margin-inline: calc(-1 * props.get(vars.$item--pad-i));
150 }
151
152 @include bem.modifier('quiet') {
153 @include bem.elem('item') {
154 @include bem.is('selected') {
155 color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color);
156
157 @include bem.elem('item-content') {
158 background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color);
159 }
160
161 &:link,
162 &:visited,
163 &:enabled {
164 color: props.get(vars.$default-theme, --quiet, --selected, --label-color);
165
166 @include bem.elem('item-content') {
167 background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color);
168 }
169
170 &:hover,
171 &:focus-visible {
172 color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color);
173
174 @include bem.elem('item-content') {
175 background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color);
176 }
177 }
178
179 &:active {
180 color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color);
181
182 @include bem.elem('item-content') {
183 background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color);
184 }
185 }
186 }
187 }
188 }
189 }
190 }
191}
diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss
new file mode 100644
index 0000000..8e18def
--- /dev/null
+++ b/src/objects/_navbar.vars.scss
@@ -0,0 +1,84 @@
1@use 'sass:map';
2@use 'sass:string';
3@use 'iro-sass/src/props';
4@use '../core.vars' as core;
5
6$block-size: props.def(--o-navbar--block-size, props.get(core.$size--800)) !default;
7$spacing: props.def(--o-navbar--spacing, props.get(core.$size--200)) !default;
8
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--25)) !default;
11$item--pad-b: props.def(--o-navbar--item--pad-b, props.get(core.$size--40)) !default;
12$item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default;
13
14$key-focus--border-width: props.def(--o-navbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
15$key-focus--border-offset: props.def(--o-navbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
16$key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
17
18$default-theme-override: () !default;
19$default-theme: map.deep-merge((
20 --label-color: props.get(core.$theme, --text),
21
22 --hover: (
23 --bg-color: props.get(core.$theme, --border-mute),
24 --label-color: props.get(core.$theme, --heading),
25 ),
26
27 --active: (
28 --bg-color: props.get(core.$theme, --border),
29 --label-color: props.get(core.$theme, --heading),
30 ),
31
32 --disabled: (
33 --label-color: props.get(core.$theme, --border-strong),
34 ),
35
36 --key-focus: (
37 --label: props.get(core.$theme, --focus, --text),
38 --border: props.get(core.$theme, --focus, --border),
39 --outline: props.get(core.$theme, --focus, --outline),
40 ),
41
42 --selected: (
43 --bg-color: props.get(core.$theme, --heading),
44 --label-color: props.get(core.$theme, --base, --50),
45
46 --hover: (
47 --bg-color: props.get(core.$theme, --text),
48 --label-color: props.get(core.$theme, --base, --50),
49 ),
50
51 --active: (
52 --bg-color: props.get(core.$theme, --text-mute),
53 --label-color: props.get(core.$theme, --base, --50),
54 ),
55
56 --disabled: (
57 --bg-color: props.get(core.$theme, --border-mute),
58 --label-color: props.get(core.$theme, --border-strong),
59 ),
60 ),
61
62 --quiet: (
63 --selected: (
64 --bg-color: props.get(core.$theme, --accent, --200),
65 --label-color: props.get(core.$theme, --accent, --1100),
66
67 --hover: (
68 --bg-color: props.get(core.$theme, --accent, --300),
69 --label-color: props.get(core.$theme, --accent, --1200),
70 ),
71
72 --active: (
73 --bg-color: props.get(core.$theme, --accent, --400),
74 --label-color: props.get(core.$theme, --accent, --1300),
75 ),
76
77 --disabled: (
78 --bg-color: props.get(core.$theme, --accent, --200),
79 --label-color: props.get(core.$theme, --accent, --800),
80 ),
81 )
82 )
83), $default-theme-override) !default;
84$default-theme: props.def(--o-navbar, $default-theme, 'color');
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index 19f282f..79c0f6c 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -1,62 +1,63 @@
1@use 'sass:map';
2@use 'sass:list'; 1@use 'sass:list';
2@use 'sass:map';
3@use 'sass:string'; 3@use 'sass:string';
4@use 'iro-sass/src/index' as iro; 4@use 'iro-sass/src/bem';
5@use '../functions' as fn;
6@use '../config'; 5@use '../config';
6@use 'iro-sass/src/props';
7@use '../core.vars' as core;
7 8
8@include iro.props-namespace('palette') { 9@mixin styles {
9 @include iro.bem-object(iro.props-namespace()) { 10 @include bem.object('palette') {
10 display: flex; 11 display: flex;
11 block-size: 3em; 12 block-size: 3em;
12 13
13 @include iro.bem-elem('item') { 14 @include bem.elem('item') {
14 flex: 1 1 auto; 15 flex: 1 1 auto;
15 16
16 $palette: map.get(config.$themes, config.$theme-default, --palettes, --base); 17 $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base);
17 $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2)); 18 $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2));
18 19
19 @for $i from 1 through list.length($contrasts) { 20 @for $i from 1 through list.length($levels) {
20 $key: list.nth(map.keys($contrasts), $i); 21 $key: list.nth(map.keys($levels), $i);
21 22
22 &:nth-child(#{$i}) { 23 &:nth-child(#{$i}) {
23 background-color: fn.global-color(--base $key); 24 background-color: props.get(core.$theme, --base, $key);
24 } 25 }
25 } 26 }
26 } 27 }
27 28
28 @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, --palettes) { 29 @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) {
29 $contrasts: map.get(config.$themes, config.$theme-default, --contrasts, list.nth($palette, 2)); 30 $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2));
30 31
31 @include iro.bem-modifier(string.slice($palette-name, 3)) { 32 @include bem.modifier(string.slice($palette-name, 3)) {
32 @include iro.bem-elem('item') { 33 @include bem.elem('item') {
33 @for $i from 1 through list.length($contrasts) { 34 @for $i from 1 through list.length($levels) {
34 $key: list.nth(map.keys($contrasts), $i); 35 $key: list.nth(map.keys($levels), $i);
35 36
36 &:nth-child(#{$i}) { 37 &:nth-child(#{$i}) {
37 background-color: fn.global-color($palette-name $key); 38 background-color: props.get(core.$theme, $palette-name, $key);
38 } 39 }
39 } 40 }
40 } 41 }
41 } 42 }
42 } 43 }
43 44
44 @include iro.bem-modifier('static') { 45 @include bem.modifier('static') {
45 @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { 46 @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
46 $contrasts: map.get(config.$static-colors, --contrasts); 47 $levels: map.get(config.$static-colors, --levels);
47 48
48 @include iro.bem-modifier(string.slice($palette-name, 3)) { 49 @include bem.modifier(string.slice($palette-name, 3)) {
49 @include iro.bem-elem('item') { 50 @include bem.elem('item') {
50 @for $i from 1 through list.length($contrasts) { 51 @for $i from 1 through list.length($levels) {
51 $key: list.nth(map.keys($contrasts), $i); 52 $key: list.nth(map.keys($levels), $i);
52 53
53 &:nth-child(#{$i}) { 54 &:nth-child(#{$i}) {
54 background-color: fn.global-color(#{$palette-name}-static $key); 55 background-color: props.get(core.$theme, #{$palette-name}-static, $key);
55 } 56 }
56 } 57 }
57 } 58 }
58 } 59 }
59 } 60 }
60 } 61 }
61 } 62 }
62} 63}
diff --git a/src/objects/_placeholders.scss b/src/objects/_placeholders.scss
new file mode 100644
index 0000000..80fc913
--- /dev/null
+++ b/src/objects/_placeholders.scss
@@ -0,0 +1,22 @@
1@use 'sass:meta';
2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props';
4@use '../props' as *;
5
6@forward 'placeholders.vars';
7@use 'placeholders.vars' as vars;
8
9@mixin styles {
10 @include materialize-at-root(meta.module-variables('vars'));
11
12 @include bem.object('placeholders') {
13 @include bem.elem('placeholder') {
14 display: inline-block;
15 min-block-size: props.get(vars.$min-block-size);
16 vertical-align: middle;
17 background-color: currentColor;
18 border-radius: props.get(vars.$rounding);
19 opacity: props.get(vars.$opacity);
20 }
21 }
22}
diff --git a/src/objects/_placeholders.vars.scss b/src/objects/_placeholders.vars.scss
new file mode 100644
index 0000000..a2e41e2
--- /dev/null
+++ b/src/objects/_placeholders.vars.scss
@@ -0,0 +1,6 @@
1@use 'iro-sass/src/props';
2@use '../core.vars' as core;
3
4$min-block-size: props.def(--o-placeholder--min-block-size, 1em) !default;
5$rounding: props.def(--o-placeholder--rounding, props.get(core.$rounding)) !default;
6$opacity: props.def(--o-placeholder--opacity, .5) !default;
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
index 5ad58ec..2746477 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -1,51 +1,45 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:meta';
2@use '../functions' as fn; 2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props';
4@use '../props' as *;
3 5
4@include iro.props-namespace('popover') { 6@forward 'popover.vars';
5 @include iro.props-store(( 7@use 'popover.vars' as vars;
6 --dims: (
7 --z-index: 10000,
8 --pad-i: 0,
9 --pad-b: fn.global-dim(--size --85),
10 --separator: fn.global-dim(--size --85),
11 --rounding: fn.global-dim(--rounding),
12 --border: fn.global-dim(--border --thin),
13 ),
14 --colors: (
15 --bg: fn.global-color(--bg-l2),
16 --border: fn.global-color(--border),
17 --filter: drop-shadow(
18 fn.global-dim(--shadow --x)
19 fn.global-dim(--shadow --y)
20 fn.global-dim(--shadow --blur)
21 fn.global-color(--shadow)
22 ),
23 ),
24 ));
25 8
26 @include iro.bem-object(iro.props-namespace()) { 9@mixin styles {
27 position: absolute; 10 @include materialize-at-root(meta.module-variables('vars'));
28 z-index: fn.dim(--z-index);
29 inset-block-start: 0;
30 inset-inline-start: 0;
31 padding-block: fn.dim(--pad-b);
32 padding-inline: fn.dim(--pad-i);
33 transform: translate(var(--x), var(--y));
34 border: fn.dim(--border) solid fn.color(--border);
35 border-radius: fn.dim(--rounding);
36 background-color: fn.color(--bg);
37 filter: fn.color(--filter);
38 11
39 @include iro.bem-modifier('up-left') { 12 @include bem.object('popover') {
40 transform: translate(var(--x), calc(var(--y) - 100%)); 13 position: fixed;
41 } 14 inset-block-start: 0;
15 inset-inline-start: 0;
16 z-index: props.get(vars.$z-index);
17 padding-block: props.get(vars.$pad-b);
18 padding-inline: props.get(vars.$pad-i);
19 margin: 0;
20 color: currentColor;
21 background-color: props.get(vars.$bg-color);
22 border: props.get(vars.$border-width) solid transparent;
23 border-color: props.get(vars.$border-color);
24 border-radius: props.get(vars.$rounding);
25 box-shadow:
26 props.get(vars.$shadow-x)
27 props.get(vars.$shadow-y)
28 props.get(vars.$shadow-blur)
29 props.get(vars.$shadow-grow)
30 props.get(vars.$shadow-color);
31 transform: translate(var(--x), var(--y));
42 32
43 @include iro.bem-modifier('up-right') { 33 @include bem.modifier('up-left') {
44 transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); 34 transform: translate(var(--x), calc(var(--y) - 100%));
45 } 35 }
46 36
47 @include iro.bem-modifier('down-right') { 37 @include bem.modifier('up-right') {
48 transform: translate(calc(var(--x) - 100%), var(--y)); 38 transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
49 } 39 }
50 } 40
41 @include bem.modifier('down-right') {
42 transform: translate(calc(var(--x) - 100%), var(--y));
43 }
44 }
51} 45}
diff --git a/src/objects/_popover.vars.scss b/src/objects/_popover.vars.scss
new file mode 100644
index 0000000..e560d1b
--- /dev/null
+++ b/src/objects/_popover.vars.scss
@@ -0,0 +1,19 @@
1@use 'sass:map';
2@use 'iro-sass/src/props';
3@use '../core.vars' as core;
4
5$z-index: props.def(--o-popover--z-index, 11000) !default;
6$pad-i: props.def(--o-popover--pad-i, 0) !default;
7$pad-b: props.def(--o-popover--pad-b, props.get(core.$size--85)) !default;
8$separator-width: props.def(--o-popover--separator-width, props.get(core.$size--85)) !default;
9$rounding: props.def(--o-popover--rounding, props.get(core.$rounding)) !default;
10$border-width: props.def(--o-popover--border-width, props.get(core.$border-width--thin)) !default;
11
12$shadow-x: props.def(--o-popover--shadow-x, props.get(core.$shadow--l2--x)) !default;
13$shadow-y: props.def(--o-popover--shadow-y, props.get(core.$shadow--l2--y)) !default;
14$shadow-blur: props.def(--o-popover--shadow-blur, props.get(core.$shadow--l2--blur)) !default;
15$shadow-grow: props.def(--o-popover--shadow-grow, props.get(core.$shadow--l2--grow)) !default;
16
17$bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
18$border-color: props.def(--o-popover--border-color, props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), 'color') !default;
19$shadow-color: props.def(--o-popover--shadow-color, props.get(core.$theme, --shadow), 'color') !default;
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 9fa937d..8327a15 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -1,185 +1,154 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:meta';
2@use '../functions' as fn; 2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props';
4@use '../props' as *;
5@use '../core.vars' as core;
3 6
4@include iro.props-namespace('radio') { 7@forward 'radio.vars';
5 @include iro.props-store(( 8@use 'radio.vars' as vars;
6 --dims: (
7 --diameter: fn.global-dim(--size --200),
8 --label-gap: fn.global-dim(--size --125),
9 --border: fn.global-dim(--border --medium),
10 --pad-i: fn.global-dim(--size --65),
11 --pad-b: fn.global-dim(--size --65),
12 --rounding: fn.global-dim(--rounding),
13 --spacing-sibling: fn.global-dim(--size --300),
14 9
15 --key-focus: ( 10@mixin styles {
16 --border: fn.global-dim(--key-focus --border), 11 @include materialize-at-root(meta.module-variables('vars'));
17 --border-offset: fn.global-dim(--key-focus --border-offset),
18 --outline: fn.global-dim(--key-focus --outline),
19 ),
20 ),
21 --colors: (
22 --circle-border: fn.global-color(--text-mute-more),
23 --circle-bg: fn.global-color(--base --75),
24
25 --hover: (
26 --label: fn.global-color(--heading),
27 --circle-border: fn.global-color(--text-mute),
28 ),
29 --accent: (
30 --circle-border: fn.global-color(--accent --900),
31
32 --hover: (
33 --circle-border: fn.global-color(--accent --1000),
34 ),
35 ),
36 --disabled: (
37 --label: fn.global-color(--text-disabled),
38 --circle-border: fn.global-color(--border-strong),
39 --circle-bg: fn.global-color(--base --75),
40 ),
41 --key-focus: (
42 --label: fn.global-color(--focus --text),
43 --border: fn.global-color(--focus --border),
44 --outline: fn.global-color(--focus --outline),
45 ),
46 ),
47 ));
48 12
49 @include iro.bem-object(iro.props-namespace()) { 13 @include bem.object('radio') {
50 display: inline-block; 14 position: relative;
51 position: relative; 15 display: inline-block;
52 margin-inline: 16 padding-block: props.get(vars.$pad-b);
53 calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)) 17 padding-inline: props.get(vars.$pad-i);
54 calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)); 18 margin-inline:
55 padding-block: fn.dim(--pad-b); 19 calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
56 padding-inline: fn.dim(--pad-i); 20 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));
57 21
58 @include iro.bem-elem('circle') { 22 @include bem.elem('circle') {
59 display: inline-block; 23 display: inline-block;
60 flex: 0 0 auto; 24 flex: 0 0 auto;
61 inline-size: fn.dim(--diameter); 25 inline-size: props.get(vars.$diameter);
62 block-size: fn.dim(--diameter); 26 block-size: props.get(vars.$diameter);
63 margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--diameter) - fn.dim(--key-focus --border-offset)); 27 margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$diameter) - props.get(vars.$key-focus--border-offset));
64 border: fn.dim(--key-focus --border-offset) solid transparent; 28 vertical-align: top;
65 border-radius: 2em; 29 background-color: props.get(vars.$circle-border-color);
66 background-color: fn.color(--circle-border); 30 background-clip: padding-box;
67 background-clip: padding-box; 31 border: props.get(vars.$key-focus--border-offset) solid transparent;
68 vertical-align: top; 32 border-radius: 2em;
69 33
70 &::after { 34 &::after {
71 content: ''; 35 position: relative;
72 display: block; 36 inset-block-start: props.get(vars.$border-width);
73 position: relative; 37 inset-inline-start: props.get(vars.$border-width);
74 inset-block-start: fn.dim(--border); 38 display: block;
75 inset-inline-start: fn.dim(--border); 39 inline-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width));
76 inline-size: calc(fn.dim(--diameter) - 2 * fn.dim(--border)); 40 block-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width));
77 block-size: calc(fn.dim(--diameter) - 2 * fn.dim(--border)); 41 content: '';
78 transition: transform .2s ease; 42 background-color: props.get(vars.$circle-bg-color);
79 border-radius: fn.dim(--diameter); 43 border-radius: props.get(vars.$diameter);
80 background-color: fn.color(--circle-bg); 44 transition: transform .2s ease;
81 } 45 }
82 } 46 }
83 47
84 @include iro.bem-elem('label') { 48 @include bem.elem('label') {
85 margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset)); 49 margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
86 } 50 }
87 51
88 @include iro.bem-elem('native') { 52 @include bem.elem('native') {
89 appearance: none; 53 position: absolute;
90 position: absolute; 54 inset-block-start: 0;
91 z-index: -1; 55 inset-inline-start: 0;
92 inset-block-start: 0; 56 z-index: -1;
93 inset-inline-start: 0; 57 inline-size: 100%;
94 inline-size: 100%; 58 block-size: 100%;
95 block-size: 100%; 59 padding: 0;
96 margin: 0; 60 margin: 0;
97 padding: 0; 61 overflow: hidden;
98 overflow: hidden; 62 appearance: none;
99 border-radius: fn.dim(--rounding); 63 border-radius: props.get(vars.$rounding);
100 64
101 &:hover, 65 &:hover,
102 &:focus-visible { 66 &:focus-visible {
103 @include iro.bem-sibling-elem('label') { 67 @include bem.sibling-elem('label') {
104 color: fn.color(--hover --label); 68 color: props.get(vars.$hover--label-color);
105 } 69 }
106 70
107 @include iro.bem-sibling-elem('circle') { 71 @include bem.sibling-elem('circle') {
108 background-color: fn.color(--hover --circle-border); 72 background-color: props.get(vars.$hover--circle-border-color);
109 } 73 }
110 } 74 }
111 75
112 &:checked { 76 &:checked {
113 @include iro.bem-sibling-elem('circle') { 77 @include bem.sibling-elem('circle') {
114 &::after { 78 &::after {
115 transform: scale(.44); 79 transform: scale(.44);
116 } 80 }
117 } 81 }
118 } 82 }
119 83
120 &:disabled { 84 &:disabled {
121 @include iro.bem-sibling-elem('label') { 85 @include bem.sibling-elem('label') {
122 color: fn.color(--disabled --label); 86 color: props.get(vars.$disabled--label-color);
123 } 87 }
124 88
125 @include iro.bem-sibling-elem('circle') { 89 @include bem.sibling-elem('circle') {
126 background-color: fn.color(--disabled --circle-border); 90 background-color: props.get(vars.$disabled--circle-border-color);
127 91
128 &::after { 92 &::after {
129 background-color: fn.color(--disabled --circle-bg); 93 background-color: props.get(vars.$disabled--circle-bg-color);
130 } 94 }
131 } 95 }
132 } 96 }
133 97
134 &:focus-visible { 98 &:focus-visible {
135 @include iro.bem-sibling-elem('label') { 99 @include bem.sibling-elem('label') {
136 color: fn.color(--key-focus --label); 100 color: props.get(vars.$key-focus--label-color);
137 } 101 }
138 102
139 @include iro.bem-sibling-elem('circle') { 103 @include bem.sibling-elem('circle') {
140 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); 104 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
141 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); 105 box-shadow:
142 } 106 0
143 } 107 0
144 } 108 0
109 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
110 props.get(vars.$key-focus--outline-color);
111 }
112 }
113 }
145 114
146 @include iro.bem-modifier('standalone') { 115 @include bem.modifier('standalone') {
147 @include iro.bem-elem('circle') { 116 @include bem.elem('circle') {
148 margin-block-start: 0; 117 margin-block-start: 0;
149 } 118 }
150 } 119 }
151 120
152 @include iro.bem-modifier('accent') { 121 @include bem.modifier('accent') {
153 @include iro.bem-elem('native') { 122 @include bem.elem('native') {
154 &:checked { 123 &:checked {
155 @include iro.bem-sibling-elem('circle') { 124 @include bem.sibling-elem('circle') {
156 background-color: fn.color(--accent --circle-border); 125 background-color: props.get(vars.$accent--circle-border-color);
157 } 126 }
158 127
159 &:hover, 128 &:hover,
160 &:focus-visible { 129 &:focus-visible {
161 @include iro.bem-sibling-elem('circle') { 130 @include bem.sibling-elem('circle') {
162 background-color: fn.color(--accent --hover --circle-border); 131 background-color: props.get(vars.$accent--hover--circle-border-color);
163 } 132 }
164 } 133 }
165 } 134 }
166 135
167 &:disabled { 136 &:disabled {
168 @include iro.bem-sibling-elem('circle') { 137 @include bem.sibling-elem('circle') {
169 background-color: fn.color(--disabled --circle-border); 138 background-color: props.get(vars.$disabled--circle-border-color);
170 139
171 &::after { 140 &::after {
172 background-color: fn.color(--disabled --circle-bg); 141 background-color: props.get(vars.$disabled--circle-bg-color);
173 } 142 }
174 } 143 }
175 144
176 &:checked { 145 &:checked {
177 @include iro.bem-sibling-elem('circle') { 146 @include bem.sibling-elem('circle') {
178 background-color: fn.color(--disabled --circle-border); 147 background-color: props.get(vars.$disabled--circle-border-color);
179 } 148 }
180 } 149 }
181 } 150 }
182 } 151 }
183 } 152 }
184 } 153 }
185} 154}
diff --git a/src/objects/_radio.vars.scss b/src/objects/_radio.vars.scss
new file mode 100644
index 0000000..b18ae2b
--- /dev/null
+++ b/src/objects/_radio.vars.scss
@@ -0,0 +1,33 @@
1@use 'sass:map';
2@use 'iro-sass/src/props';
3@use '../core.vars' as core;
4
5$diameter: props.def(--o-radio--diameter, props.get(core.$size--200)) !default;
6$label-gap: props.def(--o-radio--label-gap, props.get(core.$size--125)) !default;
7$border-width: props.def(--o-radio--border-width, props.get(core.$border-width--medium)) !default;
8$pad-i: props.def(--o-radio--pad-i, props.get(core.$size--65)) !default;
9$pad-b: props.def(--o-radio--pad-b, props.get(core.$size--65)) !default;
10$rounding: props.def(--o-radio--rounding, props.get(core.$rounding--sm)) !default;
11$spacing-sibling: props.def(--o-radio--spacing-sibling, props.get(core.$size--300)) !default;
12
13$key-focus--border-width: props.def(--o-radio--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
14$key-focus--border-offset: props.def(--o-radio--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
15$key-focus--outline-width: props.def(--o-radio--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
16
17$circle-border-color: props.def(--o-radio--circle-border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
18$circle-bg-color: props.def(--o-radio--circle-bg-color, props.get(core.$theme, --base, --75), 'color') !default;
19
20$hover--label-color: props.def(--o-radio--hover--label-color, props.get(core.$theme, --heading), 'color') !default;
21$hover--circle-border-color: props.def(--o-radio--hover--circle-border-color, props.get(core.$theme, --text-mute), 'color') !default;
22
23$accent--circle-border-color: props.def(--o-radio--accent--circle-border-color, props.get(core.$theme, --accent, --900), 'color') !default;
24
25$accent--hover--circle-border-color: props.def(--o-radio--accent--hover--circle-border-color, props.get(core.$theme, --accent, --1000), 'color') !default;
26
27$disabled--label-color: props.def(--o-radio--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
28$disabled--circle-border-color: props.def(--o-radio--disabled--circle-border-color, props.get(core.$theme, --border-strong), 'color') !default;
29$disabled--circle-bg-color: props.def(--o-radio--disabled--circle-bg-color, props.get(core.$theme, --base, --75), 'color') !default;
30
31$key-focus--label-color: props.def(--o-radio--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
32$key-focus--border-color: props.def(--o-radio--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
33$key-focus--outline-color: props.def(--o-radio--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss
index 8e4e131..4a1feda 100644
--- a/src/objects/_side-nav.scss
+++ b/src/objects/_side-nav.scss
@@ -1,122 +1,90 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:meta';
2@use '../functions' as fn; 2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props';
4@use '../props' as *;
5@use 'icon.vars' as icon;
3 6
4@use './icon'; 7@forward 'side-nav.vars';
8@use 'side-nav.vars' as vars;
5 9
6@include iro.props-namespace('side-nav') { 10@mixin styles {
7 @include iro.props-store(( 11 @include materialize-at-root(meta.module-variables('vars'));
8 --dims: (
9 --spacing: fn.global-dim(--size --50),
10 --header: (
11 --font-size: fn.global-dim(--font-size --50),
12 ),
13 --separator: fn.global-dim(--size --200),
14 --item: (
15 --pad-i: fn.global-dim(--size --150),
16 --pad-b: fn.global-dim(--size --100),
17 --rounding: fn.global-dim(--rounding),
18
19 --key-focus: (
20 --border: fn.global-dim(--key-focus --border),
21 --border-offset: fn.global-dim(--key-focus --border-offset),
22 --outline: fn.global-dim(--key-focus --outline),
23 ),
24 ),
25 ),
26 --colors: (
27 --header: (
28 --label: fn.global-color(--text-mute-more),
29 ),
30 --item: (
31 --hover: (
32 --bg: fn.global-color(--border-mute),
33 --label: fn.global-color(--heading),
34 ),
35 --active: (
36 --bg: fn.global-color(--border),
37 --label: fn.global-color(--heading),
38 ),
39 --disabled: (
40 --label: fn.global-color(--text-disabled),
41 ),
42 --key-focus: (
43 --border: fn.global-color(--focus --border),
44 --outline: fn.global-color(--focus --outline),
45 ),
46 ),
47 ),
48 ));
49 12
50 @include iro.bem-object(iro.props-namespace()) { 13 @include bem.object('side-nav') {
51 display: flex; 14 display: flex;
52 flex-direction: column; 15 flex-direction: column;
53 gap: fn.dim(--spacing); 16 gap: props.get(vars.$spacing);
54 17
55 @include iro.bem-elem('header') { 18 @include bem.elem('header') {
56 padding-block: fn.dim(--item --pad-b); 19 padding-block: props.get(vars.$item--pad-b);
57 padding-inline: fn.dim(--item --pad-i); 20 padding-inline: props.get(vars.$item--pad-i);
58 color: fn.color(--header --label); 21 font-size: props.get(vars.$header--font-size);
59 font-size: fn.dim(--header --font-size); 22 font-weight: 500;
60 font-weight: 500; 23 color: props.get(vars.$header--label-color);
61 letter-spacing: .5px; 24 text-transform: uppercase;
62 text-transform: uppercase; 25 letter-spacing: .5px;
63 26
64 @include iro.bem-next-twin-elem { 27 @include bem.next-twin-elem {
65 margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); 28 margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing));
66 } 29 }
67 } 30 }
68 31
69 @include iro.bem-elem('item') { 32 @include bem.elem('item') {
70 padding-block: fn.dim(--item --pad-b); 33 padding-block: props.get(vars.$item--pad-b);
71 padding-inline: fn.dim(--item --pad-i); 34 padding-inline: props.get(vars.$item--pad-i);
72 margin: calc(-1 * fn.dim(--item --key-focus --border-offset)); 35 margin: calc(-1 * props.get(vars.$item--key-focus--border-offset));
73 border: fn.dim(--item --key-focus --border-offset) solid transparent; 36 color: props.get(vars.$item--disabled--label-color);
74 border-radius: calc(fn.dim(--item --rounding) + fn.dim(--item --key-focus --border-offset)); 37 background-clip: padding-box;
75 color: fn.color(--item --disabled --label); 38 border: props.get(vars.$item--key-focus--border-offset) solid transparent;
76 background-clip: padding-box; 39 border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset));
77 40
78 &:link, 41 &:link,
79 &:visited, 42 &:visited,
80 &:enabled { 43 &:enabled {
81 color: currentColor; 44 color: currentColor;
82 45
83 @include iro.bem-multi('&:hover, &:focus-visible', 'is' 'selected') { 46 @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') {
84 background-color: fn.color(--item --hover --bg); 47 color: props.get(vars.$item--hover--label-color);
85 color: fn.color(--item --hover --label); 48 background-color: props.get(vars.$item--hover--bg-color);
86 } 49 }
87 50
88 &:active { 51 &:active {
89 background-color: fn.color(--item --active --bg); 52 color: props.get(vars.$item--active--label-color);
90 color: fn.color(--item --active --label); 53 background-color: props.get(vars.$item--active--bg-color);
91 } 54 }
92 55
93 &:focus-visible { 56 &:focus-visible {
94 outline: fn.color(--item --key-focus --border) solid fn.dim(--item --key-focus --border); 57 outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width);
95 box-shadow: 0 0 0 calc(fn.dim(--item --key-focus --border) + fn.dim(--item --key-focus --outline)) fn.color(--item --key-focus --outline); 58 box-shadow:
96 } 59 0
97 } 60 0
61 0
62 calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width))
63 props.get(vars.$item--key-focus--outline-color);
64 }
65 }
98 66
99 @include iro.bem-next-elem('header') { 67 @include bem.next-elem('header') {
100 margin-block-start: calc(fn.dim(--separator) + fn.dim(--spacing)); 68 margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing));
101 } 69 }
102 } 70 }
103 71
104 @include iro.bem-elem('header') { 72 @include bem.elem('header') {
105 &:link, 73 &:link,
106 &:visited, 74 &:visited,
107 &:enabled { 75 &:enabled {
108 color: fn.color(--header --label); 76 color: props.get(vars.$header--label-color);
109 } 77 }
110 } 78 }
111 79
112 @include iro.bem-elem('separator') { 80 @include bem.elem('separator') {
113 block-size: fn.dim(--separator); 81 block-size: props.get(vars.$separator);
114 } 82 }
115 83
116 @include iro.bem-elem('icon-slot') { 84 @include bem.elem('icon-slot') {
117 display: flex; 85 display: flex;
118 justify-content: center; 86 justify-content: center;
119 inline-size: fn.foreign-dim(--icon, --size); 87 inline-size: props.get(icon.$size);
120 } 88 }
121 } 89 }
122} 90}
diff --git a/src/objects/_side-nav.vars.scss b/src/objects/_side-nav.vars.scss
new file mode 100644
index 0000000..711b2a7
--- /dev/null
+++ b/src/objects/_side-nav.vars.scss
@@ -0,0 +1,28 @@
1@use 'sass:map';
2@use 'iro-sass/src/props';
3@use '../core.vars' as core;
4
5$spacing: props.def(--o-side-nav--spacing, props.get(core.$size--50)) !default;
6$header--font-size: props.def(--o-side-nav--header--font-size, props.get(core.$font-size--50)) !default;
7$separator: props.def(--o-side-nav--separator, props.get(core.$size--200)) !default;
8
9$item--pad-i: props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default;
10$item--pad-b: props.def(--o-side-nav--item--pad-b, props.get(core.$size--100)) !default;
11$item--rounding: props.def(--o-side-nav--item--rounding, props.get(core.$rounding--sm)) !default;
12
13$item--key-focus--border-width: props.def(--o-side-nav--item--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
14$item--key-focus--border-offset: props.def(--o-side-nav--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
15$item--key-focus--outline-width: props.def(--o-side-nav--item--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
16
17$header--label-color: props.def(--o-side-nav--header--label-color, props.get(core.$theme, --text-mute-more), 'color') !default;
18
19$item--hover--bg-color: props.def(--o-side-nav--item--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
20$item--hover--label-color: props.def(--o-side-nav--item--hover--label-color, props.get(core.$theme, --heading), 'color') !default;
21
22$item--active--bg-color: props.def(--o-side-nav--item--active--bg-color, props.get(core.$theme, --border), 'color') !default;
23$item--active--label-color: props.def(--o-side-nav--item--active--label-color, props.get(core.$theme, --heading), 'color') !default;
24
25$item--disabled--label-color: props.def(--o-side-nav--item--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
26
27$item--key-focus--border-color: props.def(--o-side-nav--item--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
28$item--key-focus--outline-color: props.def(--o-side-nav--item--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index 416e65e..4e4aa42 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -1,39 +1,27 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:map';
2@use '../functions' as fn; 2@use 'sass:meta';
3@use 'sass:string';
4@use 'iro-sass/src/bem';
5@use 'iro-sass/src/props';
6@use '../props' as *;
3 7
4$themes: 'accent' 'positive' 'negative' 'warning' !default; 8@forward 'status-indicator.vars';
9@use 'status-indicator.vars' as vars;
5 10
6@include iro.props-namespace('status-indicator') { 11@mixin styles {
7 @include iro.props-store(( 12 @include materialize-at-root(meta.module-variables('vars'));
8 --dims: (
9 --size: fn.global-dim(--size --125),
10 ),
11 --colors: (
12 --default: fn.global-color(--border-strong),
13 --primary: fn.global-color(--text),
14 ),
15 ));
16 13
17 @each $theme in $themes { 14 @include bem.object('status-indicator') {
18 @include iro.props-store(( 15 display: inline-block;
19 --colors: ( 16 inline-size: props.get(vars.$size);
20 --#{$theme}: fn.global-color(--#{$theme} --700), 17 block-size: props.get(vars.$size);
21 ), 18 background-color: props.get(vars.$default);
22 )); 19 border-radius: 10em;
23 }
24 20
25 @include iro.bem-object(iro.props-namespace()) { 21 @each $theme in map.keys(props.get(vars.$themes)) {
26 display: inline-block; 22 @include bem.is(string.slice($theme, 3)) {
27 inline-size: fn.dim(--size); 23 background-color: props.get(vars.$themes, $theme);
28 block-size: fn.dim(--size); 24 }
29 border-radius: 10em; 25 }
30 background-color: fn.color(--default); 26 }
31 vertical-align: middle;
32
33 @each $theme in $themes {
34 @include iro.bem-is($theme) {
35 background-color: fn.color(--#{$theme});
36 }
37 }
38 }
39} 27}
diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss
new file mode 100644
index 0000000..55b446a
--- /dev/null
+++ b/src/objects/_status-indicator.vars.scss
@@ -0,0 +1,26 @@
1@use 'sass:map';
2@use 'iro-sass/src/props';
3@use '../config';
4@use '../core.vars' as core;
5
6$size: props.def(--o-status-indicator--size, props.get(core.$size--125)) !default;
7
8$default: props.def(--o-status-indicator--default, props.get(core.$theme, --border-strong), 'color') !default;
9$primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text), 'color') !default;
10
11$themes-config: (
12 accent: --accent,
13 positive: --positive,
14 negative: --negative,
15 warning: --warning,
16) !default;
17
18$themes: props.def(--o-status-indicator, (), 'color');
19
20@each $theme, $key in $themes-config {
21 @if $theme != --base {
22 $themes: props.merge($themes, (
23 --#{$theme}: props.get(core.$theme, $key, --700),
24 ));
25 }
26}
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index e1f1132..48cec24 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -1,222 +1,188 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:meta';
2@use '../functions' as fn; 2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props';
4@use '../props' as *;
5@use '../core.vars' as core;
3 6
4@include iro.props-namespace('switch') { 7@forward 'switch.vars';
5 @include iro.props-store(( 8@use 'switch.vars' as vars;
6 --dims: (
7 --width: fn.global-dim(--size --350),
8 --height: fn.global-dim(--size --200),
9 --label-gap: fn.global-dim(--size --125),
10 --border: fn.global-dim(--border --medium),
11 --pad-i: fn.global-dim(--size --65),
12 --pad-b: fn.global-dim(--size --65),
13 --rounding: fn.global-dim(--rounding),
14 --spacing-sibling: fn.global-dim(--size --300),
15 9
16 --key-focus: ( 10@mixin styles {
17 --border: fn.global-dim(--key-focus --border), 11 @include materialize-at-root(meta.module-variables('vars'));
18 --border-offset: fn.global-dim(--key-focus --border-offset),
19 --outline: fn.global-dim(--key-focus --outline),
20 ),
21 ),
22 --colors: (
23 --track-bg: fn.global-color(--border),
24 --handle-border: fn.global-color(--text-mute-more),
25 --handle-bg: fn.global-color(--base --50),
26
27 --hover: (
28 --label: fn.global-color(--heading),
29 --handle-border: fn.global-color(--text-mute),
30 ),
31 --accent: (
32 --handle-border: fn.global-color(--accent --900),
33
34 --hover: (
35 --handle-border: fn.global-color(--accent --1000),
36 ),
37 ),
38 --disabled: (
39 --label: fn.global-color(--text-disabled),
40 --track-bg: fn.global-color(--border),
41 --handle-border: fn.global-color(--border-strong),
42 --handle-bg: fn.global-color(--base --50),
43 ),
44 --key-focus: (
45 --label: fn.global-color(--focus --text),
46 --border: fn.global-color(--focus --border),
47 --outline: fn.global-color(--focus --outline),
48 ),
49 ),
50 ));
51 12
52 @include iro.bem-object(iro.props-namespace()) { 13 @include bem.object('switch') {
53 display: inline-block; 14 position: relative;
54 position: relative; 15 display: inline-block;
55 margin-inline: 16 padding-block: props.get(vars.$pad-b);
56 calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)) 17 padding-inline: props.get(vars.$pad-i);
57 calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset)); 18 margin-inline:
58 padding-inline: fn.dim(--pad-i); 19 calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
59 padding-block: fn.dim(--pad-b); 20 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));
60 21
61 @include iro.bem-elem('indicator') { 22 @include bem.elem('indicator') {
62 display: inline-block; 23 display: inline-block;
63 flex: 0 0 auto; 24 flex: 0 0 auto;
64 inline-size: fn.dim(--width); 25 inline-size: props.get(vars.$inline-size);
65 block-size: fn.dim(--height); 26 block-size: props.get(vars.$block-size);
66 margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--height) - fn.dim(--key-focus --border-offset)); 27 margin-block-start: calc(.5em * props.get(core.$font--standard--line-height) - .5 * props.get(vars.$block-size) - props.get(vars.$key-focus--border-offset));
67 transition: background-color .2s ease; 28 vertical-align: top;
68 border: fn.dim(--key-focus --border-offset) solid transparent; 29 background-color: props.get(vars.$track-bg-color);
69 border-radius: 2em; 30 background-clip: padding-box;
70 background-color: fn.color(--track-bg); 31 border: props.get(vars.$key-focus--border-offset) solid transparent;
71 background-clip: padding-box; 32 border-radius: 2em;
72 vertical-align: top; 33 transition: background-color .2s ease;
73 34
74 &::after { 35 &::after {
75 content: ''; 36 display: block;
76 display: block; 37 inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
77 inline-size: calc(fn.dim(--height) - 2 * fn.dim(--border)); 38 block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
78 block-size: calc(fn.dim(--height) - 2 * fn.dim(--border)); 39 content: '';
79 transition: transform .2s ease; 40 background-color: props.get(vars.$handle-bg-color);
80 border: fn.dim(--border) solid fn.color(--handle-border); 41 border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color);
81 border-radius: fn.dim(--width); 42 border-radius: props.get(vars.$inline-size);
82 background-color: fn.color(--handle-bg); 43 transition: transform .2s ease;
83 } 44 }
84 } 45 }
85 46
86 @include iro.bem-elem('label') { 47 @include bem.elem('label') {
87 margin-inline-start: fn.dim(--label-gap); 48 margin-inline-start: props.get(vars.$label-gap);
88 } 49 }
89 50
90 @include iro.bem-elem('native') { 51 @include bem.elem('native') {
91 appearance: none; 52 position: absolute;
92 position: absolute; 53 inset-block-start: 0;
93 z-index: -1; 54 inset-inline-start: 0;
94 inset-block-start: 0; 55 z-index: -1;
95 inset-inline-start: 0; 56 inline-size: 100%;
96 inline-size: 100%; 57 block-size: 100%;
97 block-size: 100%; 58 padding: 0;
98 margin: 0; 59 margin: 0;
99 padding: 0; 60 overflow: hidden;
100 overflow: hidden; 61 appearance: none;
101 border-radius: fn.dim(--rounding); 62 border-radius: props.get(vars.$rounding);
102 63
103 &:hover, 64 &:hover,
104 &:focus-visible { 65 &:focus-visible {
105 @include iro.bem-sibling-elem('label') { 66 @include bem.sibling-elem('label') {
106 color: fn.color(--hover --label); 67 color: props.get(vars.$hover--label-color);
107 } 68 }
108 69
109 @include iro.bem-sibling-elem('indicator') { 70 @include bem.sibling-elem('indicator') {
110 &::after { 71 &::after {
111 border-color: fn.color(--hover --handle-border); 72 border-color: props.get(vars.$hover--handle-border-color);
112 } 73 }
113 } 74 }
114 } 75 }
115 76
116 &:checked { 77 &:checked {
117 @include iro.bem-sibling-elem('indicator') { 78 @include bem.sibling-elem('indicator') {
118 background-color: fn.color(--handle-border); 79 background-color: props.get(vars.$handle-border-color);
119 80
120 &::after { 81 &::after {
121 transform: translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0); 82 border-color: props.get(vars.$handle-border-color);
122 border-color: fn.color(--handle-border); 83 transform: translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0);
123 } 84 }
124 } 85 }
125 86
126 &:hover, 87 &:hover,
127 &:focus-visible { 88 &:focus-visible {
128 @include iro.bem-sibling-elem('indicator') { 89 @include bem.sibling-elem('indicator') {
129 background-color: fn.color(--hover --handle-border); 90 background-color: props.get(vars.$hover--handle-border-color);
130 91
131 &::after { 92 &::after {
132 border-color: fn.color(--hover --handle-border); 93 border-color: props.get(vars.$hover--handle-border-color);
133 } 94 }
134 } 95 }
135 } 96 }
136 } 97 }
137 98
138 &:disabled { 99 &:disabled {
139 @include iro.bem-sibling-elem('label') { 100 @include bem.sibling-elem('label') {
140 color: fn.color(--disabled --label); 101 color: props.get(vars.$disabled--label-color);
141 } 102 }
142 103
143 @include iro.bem-sibling-elem('indicator') { 104 @include bem.sibling-elem('indicator') {
144 background-color: fn.color(--disabled --track-bg); 105 background-color: props.get(vars.$disabled--track-bg-color);
145 106
146 &::after { 107 &::after {
147 border-color: fn.color(--disabled --handle-border); 108 background-color: props.get(vars.$disabled--handle-bg-color);
148 background-color: fn.color(--disabled --handle-bg); 109 border-color: props.get(vars.$disabled--handle-border-color);
149 } 110 }
150 } 111 }
151 112
152 &:checked { 113 &:checked {
153 @include iro.bem-sibling-elem('indicator') { 114 @include bem.sibling-elem('indicator') {
154 background-color: fn.color(--disabled --handle-border); 115 background-color: props.get(vars.$disabled--handle-border-color);
155 116
156 &::after { 117 &::after {
157 border-color: fn.color(--disabled --handle-border); 118 border-color: props.get(vars.$disabled--handle-border-color);
158 } 119 }
159 } 120 }
160 } 121 }
161 } 122 }
162 123
163 &:focus-visible { 124 &:focus-visible {
164 @include iro.bem-sibling-elem('label') { 125 @include bem.sibling-elem('label') {
165 color: fn.color(--key-focus --label); 126 color: props.get(vars.$key-focus--label-color);
166 } 127 }
167 128
168 @include iro.bem-sibling-elem('indicator') { 129 @include bem.sibling-elem('indicator') {
169 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border); 130 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
170 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline); 131 box-shadow:
171 } 132 0
172 } 133 0
173 } 134 0
135 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
136 props.get(vars.$key-focus--outline-color);
137 }
138 }
139 }
174 140
175 @include iro.bem-modifier('standalone') { 141 @include bem.modifier('standalone') {
176 @include iro.bem-elem('indicator') { 142 @include bem.elem('indicator') {
177 margin-block-start: 0; 143 margin-block-start: 0;
178 } 144 }
179 } 145 }
180 146
181 @include iro.bem-modifier('accent') { 147 @include bem.modifier('accent') {
182 @include iro.bem-elem('native') { 148 @include bem.elem('native') {
183 &:checked { 149 &:checked {
184 @include iro.bem-sibling-elem('indicator') { 150 @include bem.sibling-elem('indicator') {
185 background-color: fn.color(--accent --handle-border); 151 background-color: props.get(vars.$accent--handle-border-color);
186 152
187 &::after { 153 &::after {
188 border-color: fn.color(--accent --handle-border); 154 border-color: props.get(vars.$accent--handle-border-color);
189 } 155 }
190 } 156 }
191 157
192 &:hover, 158 &:hover,
193 &:focus-visible { 159 &:focus-visible {
194 @include iro.bem-sibling-elem('indicator') { 160 @include bem.sibling-elem('indicator') {
195 background-color: fn.color(--accent --hover --handle-border); 161 background-color: props.get(vars.$accent--hover--handle-border-color);
196 162
197 &::after { 163 &::after {
198 border-color: fn.color(--accent --hover --handle-border); 164 border-color: props.get(vars.$accent--hover--handle-border-color);
199 } 165 }
200 } 166 }
201 } 167 }
202 } 168 }
203 169
204 &:disabled { 170 &:disabled {
205 @include iro.bem-sibling-elem('label') { 171 @include bem.sibling-elem('label') {
206 color: fn.color(--disabled --label); 172 color: props.get(vars.$disabled--label-color);
207 } 173 }
208 174
209 &:checked { 175 &:checked {
210 @include iro.bem-sibling-elem('indicator') { 176 @include bem.sibling-elem('indicator') {
211 background-color: fn.color(--disabled --handle-border); 177 background-color: props.get(vars.$disabled--handle-border-color);
212 178
213 &::after { 179 &::after {
214 border-color: fn.color(--disabled --handle-border); 180 border-color: props.get(vars.$disabled--handle-border-color);
215 } 181 }
216 } 182 }
217 } 183 }
218 } 184 }
219 } 185 }
220 } 186 }
221 } 187 }
222} 188}
diff --git a/src/objects/_switch.vars.scss b/src/objects/_switch.vars.scss
new file mode 100644
index 0000000..10489a5
--- /dev/null
+++ b/src/objects/_switch.vars.scss
@@ -0,0 +1,37 @@
1@use 'sass:map';
2@use 'iro-sass/src/props';
3@use '../core.vars' as core;
4
5$inline-size: props.def(--o-switch--inline-size, props.get(core.$size--350)) !default;
6$block-size: props.def(--o-switch--block-size, props.get(core.$size--200)) !default;
7$label-gap: props.def(--o-switch--label-gap, props.get(core.$size--125)) !default;
8$border-width: props.def(--o-switch--border-width, props.get(core.$border-width--medium)) !default;
9$pad-i: props.def(--o-switch--pad-i, props.get(core.$size--65)) !default;
10$pad-b: props.def(--o-switch--pad-b, props.get(core.$size--65)) !default;
11$rounding: props.def(--o-switch--rounding, props.get(core.$rounding--sm)) !default;
12$spacing-sibling: props.def(--o-switch--spacing-sibling, props.get(core.$size--300)) !default;
13
14$key-focus--border-width: props.def(--o-switch--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
15$key-focus--border-offset: props.def(--o-switch--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
16$key-focus--outline-width: props.def(--o-switch--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
17
18$track-bg-color: props.def(--o-switch--track-bg-color, props.get(core.$theme, --border), 'color') !default;
19$handle-border-color: props.def(--o-switch--handle-border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
20$handle-bg-color: props.def(--o-switch--handle-bg-color, props.get(core.$theme, --base, --50), 'color') !default;
21
22$hover--label-color: props.def(--o-switch--hover--label-color, props.get(core.$theme, --heading), 'color') !default;
23$hover--handle-border-color: props.def(--o-switch--hover--handle-border-color, props.get(core.$theme, --text-mute), 'color') !default;
24
25$accent--handle-border-color: props.def(--o-switch--accent--handle-border-color, props.get(core.$theme, --accent, --900), 'color') !default;
26
27$accent--hover--handle-border-color: props.def(--o-switch--accent--hover--handle-border-color, props.get(core.$theme, --accent, --1000), 'color') !default;
28
29$disabled--label-color: props.def(--o-switch--disabled--label-color, props.get(core.$theme, --text-disabled), 'color') !default;
30$disabled--track-bg-color: props.def(--o-switch--disabled--track-bg-color, props.get(core.$theme, --border), 'color') !default;
31$disabled--handle-border-color: props.def(--o-switch--disabled--handle-border-color, props.get(core.$theme, --border-strong), 'color') !default;
32$disabled--handle-bg-color: props.def(--o-switch--disabled--handle-bg-color, props.get(core.$theme, --base, --50), 'color') !default;
33
34$key-focus--label-color: props.def(--o-switch--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
35$key-focus--border-color: props.def(--o-switch--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
36$key-focus--outline-color: props.def(--o-switch--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
37
diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
new file mode 100644
index 0000000..a9daaae
--- /dev/null
+++ b/src/objects/_tabbar.scss
@@ -0,0 +1,113 @@
1@use 'sass:map';
2@use 'sass:meta';
3@use 'sass:string';
4@use 'iro-sass/src/bem';
5@use 'iro-sass/src/props';
6@use '../props' as *;
7
8@forward 'tabbar.vars';
9@use 'tabbar.vars' as vars;
10
11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars'));
13
14 @include bem.object('tabbar') {
15 min-inline-size: 0;
16 block-size: props.get(vars.$block-size);
17 overflow: hidden;
18
19 &::after {
20 display: block;
21 block-size: props.get(vars.$indicator--width);
22 margin-block-start: calc(-1 * props.get(vars.$indicator--width));
23 content: '';
24 background-color: props.get(vars.$railing--bg-color);
25 }
26
27 @include bem.elem('tabs') {
28 display: flex;
29 block-size: 100%;
30 margin-inline: calc(-.5 * props.get(vars.$spacing));
31 overflow-inline: auto;
32 }
33
34 @include bem.modifier('quiet') {
35 box-shadow: none;
36 }
37
38 @include bem.modifier('adapt') {
39 block-size: 100%;
40 }
41
42 @include bem.elem('tab') {
43 position: relative;
44 display: flex;
45 align-items: center;
46 padding-inline: calc(.5 * props.get(vars.$spacing));
47 color: props.get(vars.$tab--text-color);
48 white-space: nowrap;
49
50 &::before {
51 position: absolute;
52 inset-block-start: 50%;
53 inset-inline: calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing));
54 z-index: -10;
55 block-size: 1.5em;
56 content: '';
57 border-radius: props.get(vars.$rounding);
58 transform: translateY(-50%);
59 }
60
61 &::after {
62 position: absolute;
63 inset-block-end: 0;
64 inset-inline: calc(.5 * props.get(vars.$spacing));
65 z-index: 10;
66 display: none;
67 block-size: props.get(vars.$indicator--width);
68 content: '';
69 background-color: props.get(vars.$tab--selected--text-color);
70 }
71
72 &:link,
73 &:visited {
74 &:hover,
75 &:active,
76 &:focus-visible {
77 color: props.get(vars.$tab--selected--text-color);
78 }
79
80 &:focus-visible {
81 &::before {
82 color: props.get(vars.$key-focus--text-color);
83 text-decoration: none;
84 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
85 box-shadow: 0 0 0
86 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
87 props.get(vars.$key-focus--outline-color);
88 }
89 }
90 }
91
92 @include bem.is('selected') {
93 color: props.get(vars.$tab--selected--text-color);
94
95 &::after {
96 display: block;
97 }
98 }
99 }
100
101 @include bem.modifier('accent') {
102 @include bem.elem('tab') {
103 &::after {
104 background-color: props.get(vars.$tab--accent--text-color);
105 }
106
107 @include bem.is('selected') {
108 color: props.get(vars.$tab--accent--text-color);
109 }
110 }
111 }
112 }
113}
diff --git a/src/objects/_tabbar.vars.scss b/src/objects/_tabbar.vars.scss
new file mode 100644
index 0000000..4095629
--- /dev/null
+++ b/src/objects/_tabbar.vars.scss
@@ -0,0 +1,25 @@
1@use 'sass:map';
2@use 'sass:string';
3@use 'iro-sass/src/props';
4@use '../core.vars' as core;
5
6$block-size: props.def(--o-tabbar--block-size, props.get(core.$size--700)) !default;
7$rounding: props.def(--o-tabbar--rounding, props.get(core.$rounding--sm)) !default;
8$spacing: props.def(--o-tabbar--spacing, props.get(core.$size--400)) !default;
9$tab--pad-i: props.def(--o-tabbar--tab--pad-i, props.get(core.$size--50)) !default;
10
11$indicator--width: props.def(--o-tabbar--indicator--width, props.get(core.$border-width--medium)) !default;
12
13$key-focus--border-width: props.def(--o-tabbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
14$key-focus--border-offset: props.def(--o-tabbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
15$key-focus--outline-width: props.def(--o-tabbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
16
17$tab--text-color: props.def(--o-tabbar--tab--text-color, props.get(core.$theme, --text-mute), 'color') !default;
18$tab--selected--text-color: props.def(--o-tabbar--tab--selected--text-color, props.get(core.$theme, --heading), 'color') !default;
19$tab--accent--text-color: props.def(--o-tabbar--tab--accent--text-color, props.get(core.$theme, --accent, --1100), 'color') !default;
20
21$railing--bg-color: props.def(--o-tabbar--railing--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
22
23$key-focus--text-color: props.def(--o-tabbar--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default;
24$key-focus--border-color: props.def(--o-tabbar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
25$key-focus--outline-color: props.def(--o-tabbar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
index 2c9f65b..9e4891d 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -1,168 +1,147 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:meta';
2@use '../functions' as fn; 2@use 'iro-sass/src/bem';
3@use '../mixins' as mx; 3@use 'iro-sass/src/props';
4@use '../props' as *;
4 5
5@include iro.props-namespace('table') { 6@forward 'table.vars';
6 @include iro.props-store(( 7@use 'table.vars' as vars;
7 --dims: (
8 --pad-i: fn.global-dim(--size --175),
9 --pad-b: fn.global-dim(--size --125),
10 --rounding: fn.global-dim(--rounding),
11 --border: fn.global-dim(--border --thin),
12 8
13 --sm: ( 9@mixin styles {
14 --pad-b: fn.global-dim(--size --75), 10 @include materialize-at-root(meta.module-variables('vars'));
15 )
16 ),
17 --colors: (
18 --border: fn.global-color(--border),
19 --heading: fn.global-color(--heading),
20 --hover: fn.global-color(--border-mute),
21 --active: fn.global-color(--border),
22 --box: (
23 --bg: fn.global-color(--base --50),
24 --hover: fn.global-color(--bg-base),
25 --active: fn.global-color(--border-mute),
26 )
27 )
28 ));
29 11
30 @include iro.bem-object(iro.props-namespace()) { 12 @include bem.object('table') {
31 border-spacing: 0; 13 border-spacing: 0;
32 border-collapse: separate; 14 border-collapse: separate;
33 15
34 @include iro.bem-modifier('fixed') { 16 @include bem.modifier('fixed') {
35 table-layout: fixed; 17 table-layout: fixed;
36 } 18 }
37 19
38 @include iro.bem-elem('head-cell') { 20 @include bem.elem('head-cell') {
39 @include mx.set-font(--standard, ( 21 padding-block: props.get(vars.$pad-b);
40 --line-height: null, 22 padding-inline: props.get(vars.$pad-i);
41 --size: fn.global-dim(--font-size --50), 23 font-family: props.get(vars.$heading--font-family);
42 --weight: bold, 24 font-size: props.get(vars.$heading--font-size);
43 --transform: uppercase, 25 font-weight: props.get(vars.$heading--font-weight);
44 --spacing: .5px 26 color: props.get(vars.$heading-color);
45 )); 27 text-align: start;
28 text-transform: props.get(vars.$heading--text-transform);
29 letter-spacing: props.get(vars.$heading--letter-spacing);
30 }
46 31
47 padding-inline: fn.dim(--pad-i); 32 @include bem.elem('cell') {
48 padding-block: fn.dim(--pad-b); 33 padding-block: props.get(vars.$pad-b);
49 color: fn.color(--heading); 34 padding-inline: props.get(vars.$pad-i);
50 text-align: start; 35 border-color: props.get(vars.$border-color);
51 } 36 border-style: solid;
37 border-width: 0;
38 border-block-start-width: props.get(vars.$border-width);
52 39
53 @include iro.bem-elem('cell') { 40 @include bem.modifier('divider') {
54 padding-inline: fn.dim(--pad-i); 41 border-inline-end-width: props.get(vars.$border-width);
55 padding-block: fn.dim(--pad-b); 42 }
56 border-width: 0; 43 }
57 border-block-start-width: fn.dim(--border);
58 border-style: solid;
59 border-color: fn.color(--border);
60 44
61 @include iro.bem-modifier('divider') { 45 @include bem.elem('row') {
62 border-inline-end-width: fn.dim(--border); 46 &:last-child {
63 } 47 @include bem.elem('cell') {
64 } 48 border-block-end-width: props.get(vars.$border-width);
49 }
50 }
51 }
65 52
66 @include iro.bem-elem('row') { 53 @include bem.modifier('flush') {
67 &:last-child { 54 @include bem.elem('head-cell', 'cell') {
68 @include iro.bem-elem('cell') { 55 &:first-child {
69 border-block-end-width: fn.dim(--border); 56 padding-inline-start: 0;
70 } 57 }
71 }
72 }
73 58
74 @include iro.bem-modifier('flush') { 59 &:last-child {
75 @include iro.bem-elem('head-cell', 'cell') { 60 padding-inline-end: 0;
76 &:first-child { 61 }
77 padding-inline-start: 0; 62 }
78 } 63 }
79 64
80 &:last-child { 65 @include bem.modifier('box') {
81 padding-inline-end: 0; 66 @include bem.elem('cell') {
82 } 67 background-color: props.get(vars.$box--bg-color);
83 }
84 }
85
86 @include iro.bem-modifier('box') {
87 @include iro.bem-elem('cell') {
88 background-color: fn.color(--box --bg);
89 68
90 &:first-child { 69 &:first-child {
91 border-inline-start-width: fn.dim(--border); 70 border-inline-start-width: props.get(vars.$border-width);
92 } 71 }
93 72
94 &:last-child { 73 &:last-child {
95 border-inline-end-width: fn.dim(--border); 74 border-inline-end-width: props.get(vars.$border-width);
96 } 75 }
97 } 76 }
98 77
99 @include iro.bem-elem('row') { 78 @include bem.elem('row') {
100 &:first-child { 79 &:first-child {
101 @include iro.bem-elem('cell') { 80 @include bem.elem('cell') {
102 &:first-child { 81 &:first-child {
103 border-start-start-radius: fn.dim(--rounding); 82 border-start-start-radius: props.get(vars.$rounding);
104 } 83 }
105 84
106 &:last-child { 85 &:last-child {
107 border-start-end-radius: fn.dim(--rounding); 86 border-start-end-radius: props.get(vars.$rounding);
108 } 87 }
109 } 88 }
110 } 89 }
111 90
112 &:last-child { 91 &:last-child {
113 @include iro.bem-elem('cell') { 92 @include bem.elem('cell') {
114 &:first-child { 93 &:first-child {
115 border-end-start-radius: fn.dim(--rounding); 94 border-end-start-radius: props.get(vars.$rounding);
116 } 95 }
117 96
118 &:last-child { 97 &:last-child {
119 border-end-end-radius: fn.dim(--rounding); 98 border-end-end-radius: props.get(vars.$rounding);
120 } 99 }
121 } 100 }
122 } 101 }
123 } 102 }
124 } 103 }
125 104
126 @include iro.bem-modifier('interactive') { 105 @include bem.modifier('interactive') {
127 @include iro.bem-elem('row') { 106 @include bem.elem('row') {
128 @include iro.bem-elem('cell') { 107 @include bem.elem('cell') {
129 cursor: pointer; 108 cursor: pointer;
130 } 109 }
131 110
132 &:hover { 111 &:hover {
133 @include iro.bem-elem('cell') { 112 @include bem.elem('cell') {
134 background-color: fn.color(--hover); 113 background-color: props.get(vars.$hover--bg-color);
135 } 114 }
136 } 115 }
137 116
138 &:active { 117 &:active {
139 @include iro.bem-elem('cell') { 118 @include bem.elem('cell') {
140 background-color: fn.color(--active); 119 background-color: props.get(vars.$active--bg-color);
141 } 120 }
142 } 121 }
143 } 122 }
144 123
145 @include iro.bem-modifier('box') { 124 @include bem.modifier('box') {
146 @include iro.bem-elem('row') { 125 @include bem.elem('row') {
147 &:hover { 126 &:hover {
148 @include iro.bem-elem('cell') { 127 @include bem.elem('cell') {
149 background-color: fn.color(--box --hover); 128 background-color: props.get(vars.$box--hover--bg-color);
150 } 129 }
151 } 130 }
152 131
153 &:active { 132 &:active {
154 @include iro.bem-elem('cell') { 133 @include bem.elem('cell') {
155 background-color: fn.color(--box --active); 134 background-color: props.get(vars.$box--active--bg-color);
156 } 135 }
157 } 136 }
158 } 137 }
159 } 138 }
160 } 139 }
161 140
162 @include iro.bem-modifier('sm') { 141 @include bem.modifier('sm') {
163 @include iro.bem-elem('head-cell', 'cell') { 142 @include bem.elem('head-cell', 'cell') {
164 padding-block: fn.dim(--sm --pad-b); 143 padding-block: props.get(vars.$pad-b--sm);
165 } 144 }
166 } 145 }
167 } 146 }
168} 147}
diff --git a/src/objects/_table.vars.scss b/src/objects/_table.vars.scss
new file mode 100644
index 0000000..b8d8093
--- /dev/null
+++ b/src/objects/_table.vars.scss
@@ -0,0 +1,25 @@
1@use 'sass:map';
2@use 'iro-sass/src/props';
3@use '../core.vars' as core;
4
5$pad-i: props.def(--o-table--pad-i, props.get(core.$size--175)) !default;
6$pad-b: props.def(--o-table--pad-b, props.get(core.$size--125)) !default;
7$rounding: props.def(--o-table--rounding, props.get(core.$rounding--sm)) !default;
8$border-width: props.def(--o-table--border-width, props.get(core.$border-width--thin)) !default;
9
10$heading--font-family: props.def(--o-table--heading--font-family, props.get(core.$font--standard--family)) !default;
11$heading--font-size: props.def(--o-table--heading--font-size, props.get(core.$font-size--50)) !default;
12$heading--font-weight: props.def(--o-table--heading--font-weight, bold) !default;
13$heading--text-transform: props.def(--o-table--heading--text-transform, uppercase) !default;
14$heading--letter-spacing: props.def(--o-table--heading--letter-spacing, .5px) !default;
15
16$pad-b--sm: props.def(--o-table--sm--pad-b, props.get(core.$size--75)) !default;
17
18$border-color: props.def(--o-table--border-color, props.get(core.$theme, --border), 'color') !default;
19$heading-color: props.def(--o-table--heading-color, props.get(core.$theme, --heading), 'color') !default;
20$hover--bg-color: props.def(--o-table--hover--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
21$active--bg-color: props.def(--o-table--active--bg-color, props.get(core.$theme, --border), 'color') !default;
22
23$box--bg-color: props.def(--o-table--box--bg-color, props.get(core.$theme, --base, --50), 'color') !default;
24$box--hover--bg-color: props.def(--o-table--box--hover--bg-color, props.get(core.$theme, --bg-base), 'color') !default;
25$box--active--bg-color: props.def(--o-table--box--active--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index 6611ea6..b89e148 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -1,213 +1,187 @@
1@use 'iro-sass/src/index' as iro; 1@use 'sass:meta';
2@use '../functions' as fn; 2@use 'iro-sass/src/bem';
3@use 'iro-sass/src/props';
4@use '../props' as *;
3 5
4@mixin invalid { 6@forward 'text-field.vars';
5 $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border)); 7@use 'text-field.vars' as vars;
8
9@mixin -invalid {
10 $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
6 11
7 @include iro.bem-sibling-elem('bg') { 12 @include bem.sibling-elem('bg') {
8 inset-block: $focus-border-offset; 13 inset-block: $focus-border-offset;
9 inset-inline: $focus-border-offset; 14 inset-inline: $focus-border-offset;
10 border: fn.dim(--focus --border) solid fn.color(--error --border); 15 border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color);
11 border-radius: calc(fn.dim(--rounding) - $focus-border-offset); 16 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
12 } 17 }
13 18
14 &:hover { 19 &:hover {
15 @include iro.bem-sibling-elem('bg') { 20 @include bem.sibling-elem('bg') {
16 border-color: fn.color(--error --hover --border); 21 border-color: props.get(vars.$error--hover--border-color);
17 } 22 }
18 } 23 }
19 24
20 &:focus { 25 &:focus {
21 @include iro.bem-sibling-elem('bg') { 26 @include bem.sibling-elem('bg') {
22 border-color: fn.color(--error --focus --border); 27 border-color: props.get(vars.$error--focus--border-color);
23 } 28 }
24 } 29 }
25} 30}
26 31
27@mixin keyboard-focus { 32@mixin -keyboard-focus {
28 @include iro.bem-sibling-elem('bg') { 33 @include bem.sibling-elem('bg') {
29 border-color: fn.color(--key-focus --border); 34 outline: props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width);
30 outline: fn.color(--key-focus --outline) solid fn.dim(--key-focus --border); 35 border-color: props.get(vars.$key-focus--border-color);
31 //outline-offset: fn.dim(--focus --border); 36 //outline-offset: props.get(vars.$focus --border);
32 } 37 }
33} 38}
34 39
35@include iro.props-namespace('text-field') { 40@mixin styles {
36 @include iro.props-store(( 41 @include materialize-at-root(meta.module-variables('vars'));
37 --dims: (
38 --line-height: 1.4,
39 --pad-i: fn.global-dim(--size --125),
40 --pad-b: fn.global-dim(--size --125),
41 --border: fn.global-dim(--border --thin),
42 --rounding: fn.global-dim(--rounding),
43 42
44 --extended: ( 43 @include bem.object('text-field') {
45 --pad: fn.global-dim(--size --50), 44 $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
46 ), 45
46 position: relative;
47 min-inline-size: 0;
48 background-color: props.get(vars.$bg-color);
49 border-radius: props.get(vars.$rounding);
47 50
48 --focus: ( 51 @include bem.elem('bg') {
49 --border: fn.global-dim(--border --medium), 52 position: absolute;
50 ), 53 inset-block: 0;
51 54 inset-inline: 0;
52 --key-focus: ( 55 display: block;
53 --border: fn.global-dim(--key-focus --outline), 56 pointer-events: none;
54 ), 57 border: props.get(vars.$border-width) solid props.get(vars.$border-color);
55 ), 58 border-radius: props.get(vars.$rounding);
56 --colors: ( 59 }
57 --bg: fn.global-color(--base --50),
58 --placeholder: fn.global-color(--text-mute-more),
59 --text: fn.global-color(--text),
60 --border: fn.global-color(--border-strong),
61
62 --hover: (
63 --border: fn.global-color(--text-mute-more),
64 ),
65 --focus: (
66 --border: fn.global-color(--focus --border),
67 ),
68 --key-focus: (
69 --border: fn.global-color(--focus --border),
70 --outline: fn.global-color(--focus --outline),
71 ),
72 --error: (
73 --border: fn.global-color(--negative --700),
74
75 --hover: (
76 --border: fn.global-color(--negative --900),
77 ),
78 --focus: (
79 --border: fn.global-color(--negative --900),
80 ),
81 ),
82 --disabled: (
83 --bg: fn.global-color(--border-mute),
84 --placeholder: fn.global-color(--text-disabled),
85 --text: fn.global-color(--text-disabled),
86 --border: fn.global-color(--border-mute),
87 ),
88 ),
89 ));
90 60
91 @include iro.bem-object(iro.props-namespace()) { 61 @include bem.elem('native') {
92 $focus-border-offset: calc(fn.dim(--border) - fn.dim(--focus --border)); 62 box-sizing: border-box;
93 63 inline-size: 100%;
94 position: relative; 64 padding-block: calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1));
95 min-inline-size: 0; 65 padding-inline: props.get(vars.$pad-i);
96 border-radius: fn.dim(--rounding); 66 font: inherit;
97 background-color: fn.color(--bg); 67 line-height: props.get(vars.$line-height);
68 color: props.get(vars.$text-color);
69 appearance: none;
70 resize: none;
71 background-color: transparent;
72 border: 1px solid transparent;
73
74 &::placeholder {
75 font-style: italic;
76 color: props.get(vars.$placeholder-color);
77 opacity: 1;
78 }
79
80 &:hover {
81 @include bem.sibling-elem('bg') {
82 border-color: props.get(vars.$hover--border-color);
83 }
84 }
98 85
99 @include iro.bem-elem('bg') { 86 &:focus {
100 display: block; 87 outline: 0;
101 position: absolute;
102 inset-block: 0;
103 inset-inline: 0;
104 border: fn.dim(--border) solid fn.color(--border);
105 border-radius: fn.dim(--rounding);
106 pointer-events: none;
107 }
108 88
109 @include iro.bem-elem('native') { 89 @include bem.sibling-elem('bg') {
110 box-sizing: border-box; 90 inset-block: $focus-border-offset;
111 inline-size: 100%; 91 inset-inline: $focus-border-offset;
112 padding-block: calc(fn.dim(--pad-b) - .5em * (fn.dim(--line-height) - 1)); 92 border: props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color);
113 padding-inline: fn.dim(--pad-i); 93 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
114 border: 1px solid transparent; 94 }
115 background-color: transparent; 95 }
116 color: fn.color(--text);
117 font: inherit;
118 line-height: fn.dim(--line-height);
119 resize: none;
120 appearance: none;
121 96
122 &::placeholder { 97 &:invalid {
123 opacity: 1; 98 @include -invalid;
124 color: fn.color(--placeholder); 99 }
125 font-style: italic;
126 }
127 100
128 &:hover { 101 &:focus-visible,
129 @include iro.bem-sibling-elem('bg') { 102 &:invalid:focus-visible {
130 border-color: fn.color(--hover --border); 103 @include -keyboard-focus;
131 } 104 }
132 } 105 }
133 106
134 &:focus { 107 @include bem.modifier('extended') {
135 outline: 0; 108 padding: props.get(vars.$extended--pad);
136 109
137 @include iro.bem-sibling-elem('bg') { 110 @include bem.multi('&', 'elem' 'bg') {
138 inset-block: $focus-border-offset; 111 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad));
139 inset-inline: $focus-border-offset; 112 }
140 border: fn.dim(--focus --border) solid fn.color(--focus --border);
141 border-radius: calc(fn.dim(--rounding) - $focus-border-offset);
142 }
143 }
144 113
145 &:invalid { 114 @include bem.elem('native') {
146 @include invalid; 115 &:focus {
147 } 116 @include bem.sibling-elem('bg') {
117 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset);
118 }
119 }
120 }
121 }
148 122
149 &:focus-visible, 123 @include bem.modifier('pill') {
150 &:invalid:focus-visible { 124 @include bem.multi('&', 'elem' 'bg') {
151 @include keyboard-focus; 125 border-radius: 100em;
152 } 126 }
153 }
154 127
155 @include iro.bem-modifier('extended') { 128 @include bem.elem('native') {
156 padding: fn.dim(--extended --pad); 129 padding-inline: props.get(vars.$pad-i-pill);
157 130
158 @include iro.bem-multi('&', 'elem' 'bg') { 131 &:focus {
159 border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad)); 132 @include bem.sibling-elem('bg') {
160 } 133 border-radius: 100em;
134 }
135 }
136 }
161 137
162 @include iro.bem-elem('native') { 138 @include bem.modifier('extended') {
163 &:focus { 139 @include bem.elem('native') {
164 @include iro.bem-sibling-elem('bg') { 140 padding-inline: props.get(vars.$pad-i);
165 border-radius: calc(fn.dim(--rounding) + fn.dim(--extended --pad) - $focus-border-offset); 141 }
166 } 142 }
167 } 143 }
168 }
169 }
170 144
171 @include iro.bem-is('invalid') { 145 @include bem.is('invalid') {
172 @include iro.bem-elem('native') { 146 @include bem.elem('native') {
173 @include invalid; 147 @include -invalid;
174 148
175 &:focus-visible { 149 &:focus-visible {
176 @include keyboard-focus; 150 @include -keyboard-focus;
177 } 151 }
178 } 152 }
179 } 153 }
180 154
181 @include iro.bem-is('disabled') { 155 @include bem.is('disabled') {
182 background-color: fn.color(--disabled --bg); 156 background-color: props.get(vars.$disabled--bg-color);
183 157
184 @include iro.bem-elem('native') { 158 @include bem.elem('native') {
185 color: fn.color(--disabled --text); 159 color: props.get(vars.$disabled--text-color);
186 160
187 &::placeholder { 161 &::placeholder {
188 color: fn.color(--disabled --placeholder); 162 color: props.get(vars.$disabled--placeholder-color);
189 } 163 }
190 } 164 }
191 165
192 @include iro.bem-elem('bg') { 166 @include bem.elem('bg') {
193 border-color: fn.color(--disabled --border); 167 border-color: props.get(vars.$disabled--border-color);
194 } 168 }
195 169
196 @include iro.bem-is('invalid') { 170 @include bem.is('invalid') {
197 @include iro.bem-elem('native') { 171 @include bem.elem('native') {
198 @include iro.bem-sibling-elem('bg') { 172 @include bem.sibling-elem('bg') {
199 border-color: fn.color(--disabled --border); 173 border-color: props.get(vars.$disabled--border-color);
200 } 174 }
201 } 175 }
202 } 176 }
203 177
204 @include iro.bem-elem('native') { 178 @include bem.elem('native') {
205 &:invalid { 179 &:invalid {
206 @include iro.bem-sibling-elem('bg') { 180 @include bem.sibling-elem('bg') {
207 border-color: fn.color(--disabled --border); 181 border-color: props.get(vars.$disabled--border-color);
208 } 182 }
209 } 183 }
210 } 184 }
211 } 185 }
212 } 186 }
213} 187}
diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss
new file mode 100644
index 0000000..51099d8
--- /dev/null
+++ b/src/objects/_text-field.vars.scss
@@ -0,0 +1,39 @@
1@use 'sass:map';
2@use 'iro-sass/src/props';
3@use '../core.vars' as core;
4
5$line-height: props.def(--o-text-field--line-height, 1.4) !default;
6$pad-i: props.def(--o-text-field--pad-i, props.get(core.$size--125)) !default;
7$pad-i-pill: props.def(--o-text-field--pad-i-pill, props.get(core.$size--175)) !default;
8$pad-b: props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default;
9$border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default;
10$rounding: props.def(--o-text-field--rounding, props.get(core.$rounding--sm)) !default;
11
12$extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default;
13
14$focus--border-width: props.def(--o-text-field--focus--border-width, props.get(core.$border-width--medium)) !default;
15
16$key-focus--border-width: props.def(--o-text-field--key-focus--border-width, props.get(core.$key-focus--outline-width)) !default;
17
18$bg-color: props.def(--o-text-field--bg-color, props.get(core.$theme, --base, --50), 'color') !default;
19$placeholder-color: props.def(--o-text-field--placeholder-color, props.get(core.$theme, --text-mute-more), 'color') !default;
20$text-color: props.def(--o-text-field--text-color, props.get(core.$theme, --text), 'color') !default;
21$border-color: props.def(--o-text-field--border-color, props.get(core.$theme, --border-strong), 'color') !default;
22
23$hover--border-color: props.def(--o-text-field--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
24
25$focus--border-color: props.def(--o-text-field--focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
26
27$key-focus--border-color: props.def(--o-text-field--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
28$key-focus--outline-color: props.def(--o-text-field--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
29
30$error--border-color: props.def(--o-text-field--error--border-color, props.get(core.$theme, --negative, --700), 'color') !default;
31
32$error--hover--border-color: props.def(--o-text-field--error--hover--border-color, props.get(core.$theme, --negative, --900), 'color') !default;
33
34$error--focus--border-color: props.def(--o-text-field--error--focus--border-color, props.get(core.$theme, --negative, --900), 'color') !default;
35
36$disabled--bg-color: props.def(--o-text-field--disabled--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
37$disabled--placeholder-color: props.def(--o-text-field--disabled--placeholder-color, props.get(core.$theme, --text-disabled), 'color') !default;
38$disabled--text-color: props.def(--o-text-field--disabled--text-color, props.get(core.$theme, --text-disabled), 'color') !default;
39$disabled--border-color: props.def(--o-text-field--disabled--border-color, props.get(core.$theme, --border-mute), 'color') !default;
diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss
new file mode 100644
index 0000000..60a98af
--- /dev/null
+++ b/src/objects/_thumbnail.scss
@@ -0,0 +1,104 @@
1@use 'sass:map';
2@use 'sass:meta';
3@use 'sass:string';
4@use 'iro-sass/src/bem';
5@use 'iro-sass/src/props';
6@use '../props' as *;
7
8@forward 'thumbnail.vars';
9@use 'thumbnail.vars' as vars;
10
11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars'));
13
14 @include bem.object('thumbnail') {
15 position: relative;
16 display: block;
17 flex: 0 0 auto;
18 inline-size: props.get(vars.$size);
19 block-size: props.get(vars.$size);
20 overflow: hidden;
21 outline: props.get(vars.$border-color) solid props.get(vars.$border-width);
22 outline-offset: calc(-1 * props.get(vars.$border-width));
23 border-radius: props.get(vars.$rounding);
24 opacity: .75;
25
26 &:hover,
27 &:active,
28 &:focus-visible {
29 outline-color: props.get(vars.$hover--border-color);
30 opacity: 1;
31 }
32
33 @include bem.is('selected') {
34 $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width));
35
36 margin: $focus-border-offset;
37 outline: none;
38 border: props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color);
39 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
40 opacity: 1;
41 }
42
43 @include bem.elem('image') {
44 position: absolute;
45 inset-block-start: 0;
46 inset-inline-start: 0;
47 display: block;
48 inline-size: 100%;
49 block-size: 100%;
50 object-fit: cover;
51 object-position: center center;
52 }
53
54 @include bem.elem('icon') {
55 position: absolute;
56 inset-block-start: 50%;
57 inset-inline-start: 50%;
58 transform: translate(-50%, -50%);
59 }
60
61 &:focus-visible {
62 $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset));
63
64 margin: $focus-border-offset;
65 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
66 outline-offset: 0;
67 border: props.get(vars.$key-focus--border-offset) solid transparent;
68 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
69 box-shadow:
70 0
71 0
72 0
73 calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))
74 props.get(vars.$key-focus--outline-color);
75 }
76
77 @each $theme in map.keys(props.get(vars.$static-themes)) {
78 @include bem.modifier(string.slice($theme, 3)) {
79 outline-color: props.get(vars.$static-themes, $theme, --border);
80
81 &:hover,
82 &:active,
83 &:focus-visible {
84 outline-color: props.get(vars.$static-themes, $theme, --hover, --border);
85 }
86
87 @include bem.is('selected') {
88 border-color: props.get(vars.$static-themes, $theme, --selected, --border);
89 }
90
91 &:focus-visible {
92 outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border);
93 border-color: transparent;
94 box-shadow:
95 0
96 0
97 0
98 calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))
99 props.get(vars.$static-themes, $theme, --key-focus, --outline);
100 }
101 }
102 }
103 }
104}
diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss
new file mode 100644
index 0000000..e49e52e
--- /dev/null
+++ b/src/objects/_thumbnail.vars.scss
@@ -0,0 +1,51 @@
1@use 'sass:map';
2@use 'sass:string';
3@use 'iro-sass/src/props';
4@use '../core.vars' as core;
5
6$size: props.def(--o-thumbnail--size, props.get(core.$size--700)) !default;
7$rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding--sm)) !default;
8$spacing: props.def(--o-thumbnail--spacing, props.get(core.$size--100)) !default;
9$border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default;
10
11$selected--border-width: props.def(--o-thumbnail--selected--border-width, props.get(core.$border-width--medium)) !default;
12
13$key-focus--border-width: props.def(--o-thumbnail--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
14$key-focus--border-offset: props.def(--o-thumbnail--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
15$key-focus--outline-width: props.def(--o-thumbnail--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
16
17$border-color: props.def(--o-thumbnail--border-color, props.get(core.$theme, --border-strong), 'color') !default;
18
19$hover--border-color: props.def(--o-thumbnail--hover--border-color, props.get(core.$theme, --text-mute-more), 'color') !default;
20
21$selected--border-color: props.def(--o-thumbnail--selected--border-color, props.get(core.$theme, --heading), 'color') !default;
22
23$key-focus--border-color: props.def(--o-thumbnail--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
24$key-focus--outline-color: props.def(--o-thumbnail--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
25
26$size--md: props.def(--o-thumbnail--size, props.get(core.$size--600), 'md') !default;
27
28$static-themes: props.def(--o-thumbnail, (), 'color');
29
30@each $theme in map.keys(props.get(core.$transparent-colors)) {
31 $thumbnail-theme: --static-#{string.slice($theme, 3)};
32
33 $static-themes: props.merge($static-themes, (
34 $thumbnail-theme: (
35 --border: props.get(core.$transparent-colors, $theme, --400),
36
37 --hover: (
38 --border: props.get(core.$transparent-colors, $theme, --500),
39 ),
40
41 --selected: (
42 --border: props.get(core.$transparent-colors, $theme, --900),
43 ),
44
45 --key-focus: (
46 --border: props.get(core.$transparent-colors, $theme, --900),
47 --outline: props.get(core.$transparent-colors, $theme, --300),
48 ),
49 )
50 ));
51}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-09-16 16:09:57 +0000