summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_action-button.scss213
-rw-r--r--src/objects/_action-button.vars.scss193
-rw-r--r--src/objects/_alert.scss40
-rw-r--r--src/objects/_alert.vars.scss29
-rw-r--r--src/objects/_avatar.scss187
-rw-r--r--src/objects/_avatar.vars.scss18
-rw-r--r--src/objects/_backdrop.scss24
-rw-r--r--src/objects/_badge.scss144
-rw-r--r--src/objects/_badge.vars.scss161
-rw-r--r--src/objects/_button.scss379
-rw-r--r--src/objects/_button.vars.scss446
-rw-r--r--src/objects/_card.scss408
-rw-r--r--src/objects/_card.vars.scss24
-rw-r--r--src/objects/_checkbox.scss380
-rw-r--r--src/objects/_checkbox.vars.scss2
-rw-r--r--src/objects/_divider.scss283
-rw-r--r--src/objects/_divider.vars.scss72
-rw-r--r--src/objects/_emoji.scss66
-rw-r--r--src/objects/_emoji.vars.scss8
-rw-r--r--src/objects/_field-label.scss110
-rw-r--r--src/objects/_figure.scss26
-rw-r--r--src/objects/_figure.vars.scss9
-rw-r--r--src/objects/_heading.scss90
-rw-r--r--src/objects/_heading.vars.scss24
-rw-r--r--src/objects/_icon.scss26
-rw-r--r--src/objects/_lightbox.scss208
-rw-r--r--src/objects/_lightbox.vars.scss12
-rw-r--r--src/objects/_menu.scss154
-rw-r--r--src/objects/_navbar.scss292
-rw-r--r--src/objects/_navbar.vars.scss104
-rw-r--r--src/objects/_palette.scss86
-rw-r--r--src/objects/_placeholders.scss22
-rw-r--r--src/objects/_placeholders.vars.scss6
-rw-r--r--src/objects/_popover.scss56
-rw-r--r--src/objects/_popover.vars.scss11
-rw-r--r--src/objects/_radio.scss248
-rw-r--r--src/objects/_radio.vars.scss2
-rw-r--r--src/objects/_side-nav.scss134
-rw-r--r--src/objects/_side-nav.vars.scss2
-rw-r--r--src/objects/_status-indicator.scss26
-rw-r--r--src/objects/_status-indicator.vars.scss18
-rw-r--r--src/objects/_switch.scss302
-rw-r--r--src/objects/_switch.vars.scss2
-rw-r--r--src/objects/_tabbar.scss113
-rw-r--r--src/objects/_tabbar.vars.scss25
-rw-r--r--src/objects/_table.scss232
-rw-r--r--src/objects/_table.vars.scss2
-rw-r--r--src/objects/_tabs.scss127
-rw-r--r--src/objects/_tabs.vars.scss25
-rw-r--r--src/objects/_text-field.scss272
-rw-r--r--src/objects/_text-field.vars.scss3
-rw-r--r--src/objects/_thumbnail.scss160
-rw-r--r--src/objects/_thumbnail.vars.scss34
53 files changed, 2975 insertions, 3065 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
deleted file mode 100644
index 1dd4b84..0000000
--- a/src/objects/_action-button.scss
+++ /dev/null
@@ -1,213 +0,0 @@
1@use 'sass:list';
2@use 'sass:map';
3@use 'sass:meta';
4@use 'sass:string';
5@use 'iro-sass/src/bem';
6@use 'iro-sass/src/props';
7@use '../props' as *;
8
9@forward 'action-button.vars';
10@use 'action-button.vars' as vars;
11
12@mixin -apply-theme($theme, $key: ()) {
13 color: props.get($theme, list.join($key, --disabled --label-color)...);
14 background-color: props.get($theme, list.join($key, --disabled --bg-color)...);
15 border-color: props.get($theme, list.join($key, --disabled --border-color)...);
16
17 &::after {
18 outline-color: props.get($theme, list.join($key, --key-focus --border-color)...);
19 box-shadow:
20 0
21 0
22 0
23 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
24 props.get($theme, list.join($key, --key-focus --outline-color)...);
25 }
26
27 &:link,
28 &:visited,
29 &:enabled {
30 color: props.get($theme, list.join($key, --label-color)...);
31 background-color: props.get($theme, list.join($key, --bg-color)...);
32 border-color: props.get($theme, list.join($key, --border-color)...);
33
34 &:hover,
35 &:focus-visible {
36 color: props.get($theme, list.join($key, --hover --label-color)...);
37 background-color: props.get($theme, list.join($key, --hover --bg-color)...);
38 border-color: props.get($theme, list.join($key, --hover --border-color)...);
39 }
40
41 &:active {
42 color: props.get($theme, list.join($key, --active --label-color)...);
43 background-color: props.get($theme, list.join($key, --active --bg-color)...);
44 border-color: props.get($theme, list.join($key, --active --border-color)...);
45 }
46 }
47
48 @include bem.modifier('quiet') {
49 color: props.get($theme, list.join($key, --quiet --disabled --label-color)...);
50 background-color: transparent;
51 border-color: transparent;
52
53 &:link,
54 &:visited,
55 &:enabled {
56 color: props.get($theme, list.join($key, --quiet --label-color)...);
57 background-color: transparent;
58 border-color: transparent;
59
60 &:hover,
61 &:focus-visible {
62 color: props.get($theme, list.join($key, --quiet --hover --label-color)...);
63 background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
64 border-color: transparent;
65 }
66
67 &:active {
68 color: props.get($theme, list.join($key, --quiet --active --label-color)...);
69 background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
70 border-color: transparent;
71 }
72 }
73 }
74
75 @include bem.is('selected') {
76 color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
77 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
78 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...);
79
80 &:link,
81 &:visited,
82 &:enabled {
83 color: props.get($theme, list.join($key, --selected --label-color)...);
84 background-color: props.get($theme, list.join($key, --selected --bg-color)...);
85 border-color: props.get($theme, list.join($key, --selected --border-color)...);
86
87 &:hover,
88 &:focus-visible {
89 color: props.get($theme, list.join($key, --selected --hover --label-color)...);
90 background-color: props.get($theme, list.join($key, --selected --hover --bg-color)...);
91 border-color: props.get($theme, list.join($key, --selected --hover --border-color)...);
92 }
93
94 &:active {
95 color: props.get($theme, list.join($key, --selected --active --label-color)...);
96 background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
97 border-color: props.get($theme, list.join($key, --selected --active --border-color)...);
98 }
99 }
100 }
101}
102
103@mixin styles {
104 @include materialize-at-root(meta.module-variables('vars'));
105
106 @include bem.object('action-button') {
107 position: relative;
108 display: inline-block;
109 padding-block: props.get(vars.$pad-b);
110 padding-inline: props.get(vars.$pad-i);
111 line-height: props.get(vars.$line-height);
112 text-align: center;
113 text-decoration: none;
114 text-overflow: ellipsis;
115 white-space: nowrap;
116 border: props.get(vars.$border-width) solid transparent;
117 border-radius: props.get(vars.$rounding);
118
119 &::after {
120 position: absolute;
121 inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset));
122 z-index: 1;
123 display: none;
124 pointer-events: none;
125 content: '';
126 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
127 outline: transparent solid props.get(vars.$key-focus--border-width);
128 }
129
130 &:link,
131 &:visited,
132 &:enabled {
133 &:focus-visible {
134 &::after {
135 display: block;
136 }
137 }
138 }
139
140 @include bem.elem('label') {
141 margin-inline: props.get(vars.$pad-i-label);
142 }
143
144 @include -apply-theme(vars.$default-theme);
145
146 @each $theme in map.keys(props.get(vars.$themes)) {
147 @include bem.modifier(string.slice($theme, 3)) {
148 @include -apply-theme(vars.$themes, $theme);
149 }
150 }
151
152 @include bem.modifier('pill') {
153 padding-inline: props.get(vars.$pad-i-pill);
154 border-radius: 100em;
155
156 &::after {
157 border-radius: 100em;
158 }
159 }
160
161 @include bem.modifier('icon') {
162 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
163 padding-inline: 0;
164 }
165
166 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
167 @include bem.modifier($mod) {
168 padding-block: props.get($pad-b);
169 padding-inline: props.get($pad-i);
170 font-size: props.get($font-size);
171
172 @include bem.elem('label') {
173 margin-inline: props.get($pad-i-label);
174 }
175
176 @include bem.modifier('pill') {
177 padding-inline: props.get($pad-i-pill);
178 }
179
180 @include bem.modifier('icon') {
181 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
182 padding-inline: 0;
183 }
184 }
185 }
186
187 @include bem.modifier('align-block') {
188 margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width));
189
190 @include bem.modifier('pill') {
191 margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width));
192 }
193
194 @include bem.modifier('icon') {
195 margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
196 }
197
198 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
199 @include bem.modifier($mod) {
200 margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width));
201
202 @include bem.modifier('pill') {
203 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width));
204 }
205
206 @include bem.modifier('icon') {
207 margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
208 }
209 }
210 }
211 }
212 }
213}
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
deleted file mode 100644
index 8c3d510..0000000
--- a/src/objects/_action-button.vars.scss
+++ /dev/null
@@ -1,193 +0,0 @@
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-action-button--line-height, 1.4) !default;
7$pad-i: props.def(--o-action-button--pad-i, props.get(core.$size--150)) !default;
8$pad-i-label: props.def(--o-action-button--pad-i-label, props.get(core.$size--50)) !default;
9$pad-i-pill: props.def(--o-action-button--pad-i-pill, props.get(core.$size--200)) !default;
10$pad-b: props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default;
11$border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default;
12$rounding: props.def(--o-action-button--rounding, props.get(core.$rounding)) !default;
13$font-size: props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default;
14
15$pad-i--sm: props.def(--o-action-button--sm--pad-i, props.get(core.$size--100)) !default;
16$pad-i-label--sm: props.def(--o-action-button--sm--pad-i-label, props.get(core.$size--25)) !default;
17$pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--150)) !default;
18$pad-b--sm: props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default;
19$font-size--sm: props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !default;
20
21$pad-i--lg: props.def(--o-action-button--lg--pad-i, props.get(core.$size--175)) !default;
22$pad-i-label--lg: props.def(--o-action-button--lg--pad-i-label, props.get(core.$size--100)) !default;
23$pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--250)) !default;
24$pad-b--lg: props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default;
25$font-size--lg: props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !default;
26
27$pad-i--xl: props.def(--o-action-button--xl--pad-i, props.get(core.$size--225)) !default;
28$pad-i-label--xl: props.def(--o-action-button--xl--pad-i-label, props.get(core.$size--150)) !default;
29$pad-i-pill--xl: props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--300)) !default;
30$pad-b--xl: props.def(--o-action-button--xl--pad-b, props.get(core.$size--150)) !default;
31$font-size--xl: props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !default;
32
33$key-focus--border-width: props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
34$key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
35$key-focus--outline-width: props.def(--o-action-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
36
37$fixed-sizes: (
38 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
39 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
40 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
41) !default;
42
43$themes: props.def(--o-action-button, (), 'color');
44
45$default-theme-override: () !default;
46$default-theme: map.deep-merge((
47 --bg-color: props.get(core.$theme, --base, --75),
48 --label-color: props.get(core.$theme, --text),
49 --border-color: props.get(core.$theme, --border-strong),
50
51 --hover: (
52 --bg-color: props.get(core.$theme, --border-mute),
53 --label-color: props.get(core.$theme, --heading),
54 --border-color: props.get(core.$theme, --text-mute-more),
55 ),
56
57 --active: (
58 --bg-color: props.get(core.$theme, --border),
59 --label-color: props.get(core.$theme, --heading),
60 --border-color: props.get(core.$theme, --text-mute),
61 ),
62
63 --disabled: (
64 --bg-color: props.get(core.$theme, --bg-l1),
65 --label-color: props.get(core.$theme, --border-strong),
66 --border-color: props.get(core.$theme, --border),
67 ),
68
69 --key-focus: (
70 --border-color: props.get(core.$theme, --focus, --border),
71 --outline-color: props.get(core.$theme, --focus, --outline),
72 ),
73
74 --selected: (
75 --bg-color: props.get(core.$theme, --heading),
76 --label-color: props.get(core.$theme, --base, --50),
77 --border-color: props.get(core.$theme, --heading),
78
79 --hover: (
80 --bg-color: props.get(core.$theme, --text),
81 --label-color: props.get(core.$theme, --base, --50),
82 --border-color: props.get(core.$theme, --text),
83 ),
84
85 --active: (
86 --bg-color: props.get(core.$theme, --text-mute),
87 --label-color: props.get(core.$theme, --base, --50),
88 --border-color: props.get(core.$theme, --text-mute),
89 ),
90
91 --disabled: (
92 --bg-color: props.get(core.$theme, --border-mute),
93 --label-color: props.get(core.$theme, --border-strong),
94 --border-color: props.get(core.$theme, --border-mute),
95 ),
96 ),
97
98 --quiet: (
99 --label-color: props.get(core.$theme, --text),
100
101 --hover: (
102 --bg-color: props.get(core.$theme, --border-mute),
103 --label-color: props.get(core.$theme, --heading),
104 ),
105
106 --active: (
107 --bg-color: props.get(core.$theme, --border),
108 --label-color: props.get(core.$theme, --heading),
109 ),
110
111 --disabled: (
112 --label-color: props.get(core.$theme, --border-strong),
113 ),
114 ),
115), $default-theme-override) !default;
116$default-theme: props.def(--o-action-button, $default-theme, 'color');
117
118@each $theme in map.keys(props.get(core.$transparent-colors)) {
119 $button-theme: --static-#{string.slice($theme, 3)};
120
121 $themes: props.merge($themes, (
122 $button-theme: (
123 --bg-color: props.get(core.$transparent-colors, $theme, --100),
124 --label-color: props.get(core.$transparent-colors, $theme, --900),
125 --border-color: props.get(core.$transparent-colors, $theme, --400),
126
127 --hover: (
128 --bg-color: props.get(core.$transparent-colors, $theme, --300),
129 --label-color: props.get(core.$transparent-colors, $theme, --900),
130 --border-color: props.get(core.$transparent-colors, $theme, --500),
131 ),
132
133 --active: (
134 --bg-color: props.get(core.$transparent-colors, $theme, --400),
135 --label-color: props.get(core.$transparent-colors, $theme, --900),
136 --border-color: props.get(core.$transparent-colors, $theme, --600),
137 ),
138
139 --disabled: (
140 --bg-color: props.get(core.$transparent-colors, $theme, --100),
141 --label-color: props.get(core.$transparent-colors, $theme, --500),
142 --border-color: props.get(core.$transparent-colors, $theme, --300),
143 ),
144
145 --key-focus: (
146 --border-color: props.get(core.$transparent-colors, $theme, --900),
147 --outline-color: props.get(core.$transparent-colors, $theme, --300),
148 ),
149
150 --selected: (
151 --bg-color: props.get(core.$transparent-colors, $theme, --800),
152 --label-color: props.get(core.$transparent-colors, $theme, --text),
153 --border-color: props.get(core.$transparent-colors, $theme, --100),
154
155 --hover: (
156 --bg-color: props.get(core.$transparent-colors, $theme, --900),
157 --label-color: props.get(core.$transparent-colors, $theme, --text),
158 --border-color: props.get(core.$transparent-colors, $theme, --100),
159 ),
160
161 --active: (
162 --bg-color: props.get(core.$transparent-colors, $theme, --900),
163 --label-color: props.get(core.$transparent-colors, $theme, --text),
164 --border-color: props.get(core.$transparent-colors, $theme, --100),
165 ),
166
167 --disabled: (
168 --bg-color: props.get(core.$transparent-colors, $theme, --200),
169 --label-color: props.get(core.$transparent-colors, $theme, --500),
170 --border-color: props.get(core.$transparent-colors, $theme, --100),
171 ),
172 ),
173
174 --quiet: (
175 --label-color: props.get(core.$transparent-colors, $theme, --900),
176
177 --hover: (
178 --bg-color: props.get(core.$transparent-colors, $theme, --300),
179 --label-color: props.get(core.$transparent-colors, $theme, --900),
180 ),
181
182 --active: (
183 --bg-color: props.get(core.$transparent-colors, $theme, --400),
184 --label-color: props.get(core.$transparent-colors, $theme, --900),
185 ),
186
187 --disabled: (
188 --label-color: props.get(core.$transparent-colors, $theme, --500),
189 ),
190 ),
191 )
192 ));
193}
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index 825f7ce..697ac18 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -8,19 +8,33 @@
8@use 'alert.vars' as vars; 8@use 'alert.vars' as vars;
9 9
10@mixin styles { 10@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars')); 11 @include materialize-at-root(meta.module-variables('vars'));
12 12
13 @include bem.object('alert') { 13 @include bem.object('alert') {
14 padding-block: props.get(vars.$pad-b); 14 padding-block: props.get(vars.$pad-b);
15 padding-inline: props.get(vars.$pad-i); 15 padding-inline: props.get(vars.$pad-i);
16 background-color: props.get(vars.$bg-color); 16 background-color: props.get(vars.$bg-color);
17 border: props.get(vars.$border-width) solid props.get(vars.$border-color); 17 border: props.get(vars.$border-width) solid transparent;
18 border-radius: props.get(vars.$rounding); 18 border-color: props.get(vars.$border-color);
19 border-radius: props.get(vars.$rounding);
20 box-shadow:
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);
19 26
20 @each $mod, $theme in vars.$themes-config { 27 @each $mod, $theme in vars.$themes-config {
21 @include bem.modifier($mod) { 28 @include bem.modifier($mod) {
22 border-color: props.get(vars.$themes, $theme, --border-color); 29 background-color: props.get(vars.$themes, $theme, --bg-color);
23 } 30 border-color: props.get(vars.$themes, $theme, --border-color);
24 } 31 box-shadow:
25 } 32 props.get(vars.$shadow-x)
33 props.get(vars.$shadow-y)
34 props.get(vars.$shadow-blur)
35 props.get(vars.$shadow-grow)
36 props.get(vars.$themes, $theme, --shadow-color);
37 }
38 }
39 }
26} 40}
diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss
index 53c9e68..62d3414 100644
--- a/src/objects/_alert.vars.scss
+++ b/src/objects/_alert.vars.scss
@@ -6,22 +6,31 @@ $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; 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; 7$rounding: props.def(--o-alert--rounding, props.get(core.$rounding)) !default;
8 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
9$bg-color: props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; 14$bg-color: props.def(--o-alert--bg-color, props.get(core.$theme, --bg-l2), 'color') !default;
10$border-color: props.def(--o-alert--border-color, props.get(core.$theme, --text-mute-more), '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;
11 18
12$themes-config: ( 19$themes-config: (
13 accent: --accent, 20 accent: --accent,
14 positive: --positive, 21 positive: --positive,
15 negative: --negative, 22 negative: --negative,
16 warning: --warning, 23 warning: --warning,
17) !default; 24) !default;
18 25
19$themes: props.def(--o-alert, (), 'color'); 26$themes: props.def(--o-alert, (), 'color');
20 27
21@each $theme, $key in $themes-config { 28@each $theme, $key in $themes-config {
22 $themes: props.merge($themes, ( 29 $themes: props.merge($themes, (
23 $key: ( 30 $key: (
24 --border-color: props.get(core.$theme, $key, --700), 31 --bg-color: props.get(core.$theme, --bg-l2),
25 ) 32 --border-color: props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --800),
26 )); 33 --shadow-color: props.get(core.$theme, $key, --200),
34 )
35 ));
27} 36}
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index fc4ffcd..9d51ffb 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -7,111 +7,120 @@
7@use 'avatar.vars' as vars; 7@use 'avatar.vars' as vars;
8 8
9@mixin status($indicator-size) { 9@mixin status($indicator-size) {
10 @include bem.elem('status') { 10 @include bem.elem('status') {
11 inline-size: props.get($indicator-size); 11 inline-size: props.get($indicator-size);
12 block-size: props.get($indicator-size); 12 block-size: props.get($indicator-size);
13 13
14 @include bem.next-elem('content') { 14 @include bem.sibling-elem('content') {
15 mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at 15 mask-image: radial-gradient(circle calc(.5 * props.get($indicator-size) + props.get(vars.$indicator-spacing)) at
16 calc(100% - .5 * props.get($indicator-size)) 16 calc(100% - .5 * props.get($indicator-size))
17 calc(100% - .5 * props.get($indicator-size)), 17 calc(100% - .5 * props.get($indicator-size)),
18 transparent 95%, 18 transparent 95%,
19 #fff); 19 #fff);
20 } 20 }
21 } 21 }
22} 22}
23 23
24@mixin styles { 24@mixin styles {
25 @include materialize-at-root(meta.module-variables('vars')); 25 @include materialize-at-root(meta.module-variables('vars'));
26 26
27 @include bem.object('avatar') { 27 @include bem.object('avatar') {
28 position: relative; 28 position: relative;
29 display: inline-block; 29 display: inline-block;
30 font-size: props.get(vars.$font-size); 30 font-size: props.get(vars.$font-size);
31 font-style: normal; 31 font-style: normal;
32 vertical-align: .05em; 32 vertical-align: .05em;
33 border-radius: props.get(vars.$rounding); 33 border-radius: props.get(vars.$rounding);
34 34
35 &::after { 35 &::after {
36 position: absolute; 36 position: absolute;
37 inset: calc(-1 * props.get(vars.$key-focus--border-offset)); 37 inset: calc(-1 * props.get(vars.$key-focus--border-offset));
38 z-index: 1; 38 z-index: 1;
39 display: none; 39 display: none;
40 pointer-events: none; 40 pointer-events: none;
41 content: ''; 41 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
42 border: props.get(vars.$key-focus--border-offset) solid transparent; 42 content: '';
43 border-radius: props.get(vars.$rounding); 43 border: props.get(vars.$key-focus--border-offset) solid transparent;
44 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 44 border-radius: props.get(vars.$rounding);
45 box-shadow: 45 box-shadow:
46 0 46 0
47 0 47 0
48 0 48 0
49 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 49 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
50 props.get(vars.$key-focus--outline-color); 50 props.get(vars.$key-focus--outline-color);
51 } 51 }
52 52
53 @include bem.elem('status') { 53 @include bem.elem('status') {
54 position: absolute; 54 position: absolute;
55 inset-block-end: 0; 55 inset-block-end: 0;
56 inset-inline-end: 0; 56 inset-inline-end: 0;
57 } 57 }
58 58
59 @include status(vars.$indicator-size); 59 @include status(vars.$indicator-size);
60 60
61 @include bem.elem('content') { 61 @include bem.elem('content') {
62 display: block; 62 display: block;
63 inline-size: props.get(vars.$size); 63 inline-size: props.get(vars.$size);
64 block-size: props.get(vars.$size); 64 block-size: props.get(vars.$size);
65 line-height: props.get(vars.$size); 65 line-height: props.get(vars.$size);
66 text-align: center; 66 text-align: center;
67 object-fit: cover; 67 object-fit: cover;
68 object-position: center center; 68 object-position: center center;
69 border-radius: props.get(vars.$rounding); 69 border-radius: props.get(vars.$rounding);
70 } 70 }
71 71
72 @include bem.modifier('circle') { 72 @include bem.modifier('circle') {
73 border-radius: 100%; 73 border-radius: 100%;
74 74
75 &::after { 75 &::after {
76 border-radius: 100%; 76 border-radius: 100%;
77 } 77 }
78 78
79 @include bem.elem('content') { 79 @include bem.elem('content') {
80 border-radius: 100%; 80 border-radius: 100%;
81 } 81 }
82 } 82 }
83 83
84 @include bem.modifier('placeholder') { 84 @include bem.modifier('placeholder') {
85 @include bem.elem('content') { 85 @include bem.elem('content') {
86 background-color: hsl(0, 0%, props.get(vars.$bg-color--l)); 86 background-color: hsl(0, 0%, props.get(vars.$bg-color--l));
87 } 87 }
88 } 88 }
89 89
90 @include bem.modifier('colored') { 90 @include bem.modifier('colored') {
91 @include bem.elem('content') { 91 @include bem.elem('content') {
92 color: #fff; 92 color: #fff;
93 background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l)); 93 background-color: hsl(props.get(vars.$bg-color--h), props.get(vars.$bg-color--s), props.get(vars.$bg-color--l));
94 } 94 }
95 } 95 }
96 96
97 @each $mod, $size, $font-size, $indicator-size in vars.$sizes { 97 @include bem.modifier('colored-gradient') {
98 @include bem.modifier($mod) { 98 @include bem.elem('content') {
99 font-size: props.get($font-size); 99 color: #fff;
100 background: linear-gradient(props.get(vars.$bg-angle),
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 }
105
106 @each $mod, $size, $font-size, $indicator-size in vars.$sizes {
107 @include bem.modifier($mod) {
108 font-size: props.get($font-size);
100 109
101 @include status($indicator-size); 110 @include status($indicator-size);
102 111
103 @include bem.elem('content') { 112 @include bem.elem('content') {
104 inline-size: props.get($size); 113 inline-size: props.get($size);
105 block-size: props.get($size); 114 block-size: props.get($size);
106 line-height: props.get($size); 115 line-height: props.get($size);
107 } 116 }
108 } 117 }
109 } 118 }
110 119
111 &:focus-visible { 120 &:focus-visible {
112 &::after { 121 &::after {
113 display: block; 122 display: block;
114 } 123 }
115 } 124 }
116 } 125 }
117} 126}
diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss
index 72fb397..2374f5a 100644
--- a/src/objects/_avatar.vars.scss
+++ b/src/objects/_avatar.vars.scss
@@ -39,14 +39,20 @@ $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; 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; 40$bg-color--l: props.def(--o-avatar--bg-color--l, 45%, 'color') !default;
41 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
42$key-focus--border-color: props.def(--o-avatar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; 48$key-focus--border-color: props.def(--o-avatar--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
43$key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; 49$key-focus--outline-color: props.def(--o-avatar--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
44 50
45$sizes: ( 51$sizes: (
46 'xs' $size--xs $font-size--xs $indicator-size--xs, 52 'xs' $size--xs $font-size--xs $indicator-size--xs,
47 'sm' $size--sm $font-size--sm $indicator-size--sm, 53 'sm' $size--sm $font-size--sm $indicator-size--sm,
48 'lg' $size--lg $font-size--lg $indicator-size--lg, 54 'lg' $size--lg $font-size--lg $indicator-size--lg,
49 'xl' $size--xl $font-size--xl $indicator-size--xl, 55 'xl' $size--xl $font-size--xl $indicator-size--xl,
50 'xxl' $size--xxl $font-size--xxl $indicator-size--xxl, 56 'xxl' $size--xxl $font-size--xxl $indicator-size--xxl,
51 'xxxl' $size--xxxl $font-size--xxxl $indicator-size--xxxl, 57 'xxxl' $size--xxxl $font-size--xxxl $indicator-size--xxxl,
52) !default; 58) !default;
diff --git a/src/objects/_backdrop.scss b/src/objects/_backdrop.scss
index 9cc9e2e..346cf5f 100644
--- a/src/objects/_backdrop.scss
+++ b/src/objects/_backdrop.scss
@@ -7,17 +7,17 @@
7@use 'backdrop.vars' as vars; 7@use 'backdrop.vars' as vars;
8 8
9@mixin styles { 9@mixin styles {
10 @include materialize-at-root(meta.module-variables('vars')); 10 @include materialize-at-root(meta.module-variables('vars'));
11 11
12 @include bem.object('backdrop') { 12 @include bem.object('backdrop') {
13 position: fixed; 13 position: fixed;
14 inset: 0; 14 inset: 0;
15 z-index: props.get(vars.$z-index); 15 z-index: props.get(vars.$z-index);
16 box-sizing: border-box; 16 box-sizing: border-box;
17 display: flex; 17 display: flex;
18 flex-direction: column; 18 flex-direction: column;
19 overflow: auto; 19 overflow: auto;
20 background-color: props.get(vars.$bg-color); 20 background-color: props.get(vars.$bg-color);
21 backdrop-filter: blur(props.get(vars.$blur)); 21 backdrop-filter: blur(props.get(vars.$blur));
22 } 22 }
23} 23}
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
deleted file mode 100644
index 9f3e307..0000000
--- a/src/objects/_badge.scss
+++ /dev/null
@@ -1,144 +0,0 @@
1@use 'sass:list';
2@use 'sass:map';
3@use 'sass:meta';
4@use 'sass:string';
5@use 'iro-sass/src/bem';
6@use 'iro-sass/src/props';
7@use '../props' as *;
8@use '../core.vars' as core;
9
10@forward 'badge.vars';
11@use 'badge.vars' as vars;
12
13@mixin -apply-theme($theme, $key: (), $static: false) {
14 color: props.get($theme, list.join($key, --label)...);
15 background-color: props.get($theme, list.join($key, --bg)...);
16
17 &:link,
18 &:visited,
19 &:enabled {
20 &:hover,
21 &:focus-visible {
22 color: props.get($theme, list.join($key, --hover --label)...);
23 background-color: props.get($theme, list.join($key, --hover --bg)...);
24 }
25
26 &:active {
27 color: props.get($theme, list.join($key, --active --label)...);
28 background-color: props.get($theme, list.join($key, --active --bg)...);
29 }
30 }
31
32 @include bem.modifier('quiet') {
33 color: props.get($theme, list.join($key, --quiet --label)...);
34 background-color: props.get($theme, list.join($key, --quiet --bg)...);
35
36 &:link,
37 &:visited,
38 &:enabled {
39 &:hover,
40 &:focus-visible {
41 color: props.get($theme, list.join($key, --quiet --hover --label)...);
42 background-color: props.get($theme, list.join($key, --quiet --hover --bg)...);
43 }
44
45 &:active {
46 color: props.get($theme, list.join($key, --quiet --active --label)...);
47 background-color: props.get($theme, list.join($key, --quiet --active --bg)...);
48 }
49 }
50 }
51
52 @if $static {
53 &::after {
54 outline-color: props.get($theme, list.join($key, --key-focus --border)...);
55 box-shadow:
56 0
57 0
58 0
59 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
60 props.get($theme, list.join($key, --key-focus --outline)...);
61 }
62 }
63}
64
65@mixin styles {
66 @include materialize-at-root(meta.module-variables('vars'));
67
68 @include bem.object('badge') {
69 position: relative;
70 display: inline-block;
71 padding-block: props.get(vars.$pad-b);
72 padding-inline: props.get(vars.$pad-i);
73 font-size: props.get(vars.$font-size);
74 line-height: props.get(core.$font--standard--line-height);
75 text-align: center;
76 text-decoration: none;
77 background-clip: padding-box;
78 border-radius: props.get(vars.$rounding);
79
80 &::after {
81 position: absolute;
82 inset: calc(-1 * props.get(vars.$key-focus--border-offset));
83 z-index: 1;
84 display: none;
85 pointer-events: none;
86 content: '';
87 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
88 outline: transparent solid props.get(vars.$key-focus--border-width);
89 }
90
91 &:link,
92 &:visited,
93 &:enabled {
94 &:focus-visible {
95 &::after {
96 display: block;
97 }
98 }
99 }
100
101 @include bem.elem('label') {
102 margin-inline: props.get(vars.$pad-i-label);
103 }
104
105 @include -apply-theme(vars.$default-theme, $static: true);
106
107 @each $theme in map.keys(props.get(vars.$themes)) {
108 @include bem.modifier(string.slice($theme, 3)) {
109 @include -apply-theme(vars.$themes, $theme);
110 }
111 }
112
113 @each $theme in map.keys(props.get(vars.$static-themes)) {
114 @include bem.modifier(string.slice($theme, 3)) {
115 @include -apply-theme(vars.$static-themes, $theme, true);
116 }
117 }
118
119 @include bem.modifier('pill') {
120 padding-inline: props.get(vars.$pad-i-pill);
121 border-radius: 10em;
122
123 &::after {
124 border-radius: 10em;
125 }
126 }
127
128 @each $mod, $pad-b, $pad-i, $pad-i-pill, $pad-i-label, $font-size in vars.$sizes {
129 @include bem.modifier($mod) {
130 padding-block: props.get($pad-b);
131 padding-inline: props.get($pad-i);
132 font-size: props.get($font-size);
133
134 @include bem.elem('label') {
135 margin-inline: props.get($pad-i-label);
136 }
137
138 @include bem.modifier('pill') {
139 padding-inline: props.get($pad-i-pill);
140 }
141 }
142 }
143 }
144}
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss
deleted file mode 100644
index ff07148..0000000
--- a/src/objects/_badge.vars.scss
+++ /dev/null
@@ -1,161 +0,0 @@
1@use 'sass:map';
2@use 'sass:string';
3@use 'iro-sass/src/props';
4@use '../core.vars' as core;
5
6$pad-b: props.def(--o-badge--pad-b, props.get(core.$size--50)) !default;
7$pad-i: props.def(--o-badge--pad-i, props.get(core.$size--100)) !default;
8$pad-i-pill: props.def(--o-badge--pad-i-pill, props.get(core.$size--150)) !default;
9$pad-i-label: props.def(--o-badge--pad-i-label, props.get(core.$size--50)) !default;
10$rounding: props.def(--o-badge--rounding, props.get(core.$rounding)) !default;
11$font-size: props.def(--o-badge--font-size, props.get(core.$font-size--75)) !default;
12
13$pad-b--sm: props.def(--o-badge--sm--pad-b, props.get(core.$size--25)) !default;
14$pad-i--sm: props.def(--o-badge--sm--pad-i, props.get(core.$size--75)) !default;
15$pad-i-pill--sm: props.def(--o-badge--sm--pad-i-pill, props.get(core.$size--125)) !default;
16$pad-i-label--sm: props.def(--o-badge--sm--pad-i-label, props.get(core.$size--25)) !default;
17$font-size--sm: props.def(--o-badge--sm--font-size, props.get(core.$font-size--50)) !default;
18
19$pad-b--lg: props.def(--o-badge--lg--pad-b, props.get(core.$size--75)) !default;
20$pad-i--lg: props.def(--o-badge--lg--pad-i, props.get(core.$size--125)) !default;
21$pad-i-pill--lg: props.def(--o-badge--lg--pad-i-pill, props.get(core.$size--175)) !default;
22$pad-i-label--lg: props.def(--o-badge--lg--pad-i-label, props.get(core.$size--50)) !default;
23$font-size--lg: props.def(--o-badge--lg--font-size, props.get(core.$font-size--100)) !default;
24
25$pad-b--xl: props.def(--o-badge--xl--pad-b, props.get(core.$size--100)) !default;
26$pad-i--xl: props.def(--o-badge--xl--pad-i, props.get(core.$size--150)) !default;
27$pad-i-pill--xl: props.def(--o-badge--xl--pad-i-pill, props.get(core.$size--225)) !default;
28$pad-i-label--xl: props.def(--o-badge--xl--pad-i-label, props.get(core.$size--75)) !default;
29$font-size--xl: props.def(--o-badge--xl--font-size, props.get(core.$font-size--150)) !default;
30
31$key-focus--border-width: props.def(--o-badge--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
32$key-focus--border-offset: props.def(--o-badge--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
33$key-focus--outline-width: props.def(--o-badge--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
34
35$sizes: (
36 'sm' $pad-b--sm $pad-i--sm $pad-i-pill--sm $pad-i-label--sm $font-size--sm,
37 'lg' $pad-b--lg $pad-i--lg $pad-i-pill--lg $pad-i-label--lg $font-size--lg,
38 'xl' $pad-b--xl $pad-i--xl $pad-i-pill--xl $pad-i-label--xl $font-size--xl,
39) !default;
40
41$default-theme-override: () !default;
42$default-theme: props.def(--o-badge, (
43 --bg: props.get(core.$theme, --heading),
44 --label: props.get(core.$theme, --bg-l2),
45
46 --hover: (
47 --bg: props.get(core.$theme, --text),
48 --label: props.get(core.$theme, --bg-l2),
49 ),
50
51 --active: (
52 --bg: props.get(core.$theme, --text-mute),
53 --label: props.get(core.$theme, --bg-l2),
54 ),
55
56 --key-focus: (
57 --label: props.get(core.$theme, --focus, --text),
58 --border: props.get(core.$theme, --focus, --border),
59 --outline: props.get(core.$theme, --focus, --outline),
60 ),
61
62 --quiet: (
63 --bg: props.get(core.$theme, --border-mute),
64 --label: props.get(core.$theme, --heading),
65
66 --hover: (
67 --bg: props.get(core.$theme, --border),
68 --label: props.get(core.$theme, --heading),
69 ),
70
71 --active: (
72 --bg: props.get(core.$theme, --border-strong),
73 --label: props.get(core.$theme, --heading),
74 ),
75 )
76), 'color') !default;
77$default-theme: props.merge($default-theme, $default-theme-override);
78
79$static-themes: props.def(--o-badge, (), 'color');
80
81@each $theme in map.keys(props.get(core.$transparent-colors)) {
82 $badge-theme: --static-#{string.slice($theme, 3)};
83
84 $static-themes: props.merge($static-themes, (
85 $badge-theme: (
86 --bg: props.get(core.$transparent-colors, $theme, --800),
87 --label: props.get(core.$transparent-colors, $theme, --text),
88
89 --hover: (
90 --bg: props.get(core.$transparent-colors, $theme, --900),
91 --label: props.get(core.$transparent-colors, $theme, --text),
92 ),
93
94 --active: (
95 --bg: props.get(core.$transparent-colors, $theme, --900),
96 --label: props.get(core.$transparent-colors, $theme, --text),
97 ),
98
99 --key-focus: (
100 --bg: props.get(core.$transparent-colors, $theme, --100),
101 --label: props.get(core.$transparent-colors, $theme, --900),
102 --border: props.get(core.$transparent-colors, $theme, --900),
103 --outline: props.get(core.$transparent-colors, $theme, --300),
104 ),
105
106 --quiet: (
107 --bg: props.get(core.$transparent-colors, $theme, --200),
108 --label: props.get(core.$transparent-colors, $theme, --900),
109 --hover: (
110 --bg: props.get(core.$transparent-colors, $theme, --300),
111 --label: props.get(core.$transparent-colors, $theme, --900),
112 ),
113 --active: (
114 --bg: props.get(core.$transparent-colors, $theme, --400),
115 --label: props.get(core.$transparent-colors, $theme, --900),
116 ),
117 )
118 )
119 ));
120}
121
122$themes-config: (
123 accent: --accent,
124 positive: --positive,
125 negative: --negative,
126 warning: --warning,
127) !default;
128
129$themes: props.def(--o-badge, (), 'color');
130
131@each $theme, $key in $themes-config {
132 $themes: props.merge($themes, (
133 --#{$theme}: (
134 --bg: props.get(core.$theme, #{$key}-static, --900),
135 --label: props.get(core.$theme, #{$key}-static, --900-text),
136
137 --hover: (
138 --bg: props.get(core.$theme, #{$key}-static, --1000),
139 --label: props.get(core.$theme, #{$key}-static, --1000-text),
140 ),
141
142 --active: (
143 --bg: props.get(core.$theme, #{$key}-static, --1100),
144 --label: props.get(core.$theme, #{$key}-static, --1000-text),
145 ),
146
147 --quiet: (
148 --bg: props.get(core.$theme, $key, --200),
149 --label: props.get(core.$theme, $key, --1100),
150 --hover: (
151 --bg: props.get(core.$theme, $key, --300),
152 --label: props.get(core.$theme, $key, --1200),
153 ),
154 --active: (
155 --bg: props.get(core.$theme, $key, --400),
156 --label: props.get(core.$theme, $key, --1300),
157 ),
158 )
159 )
160 ));
161}
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index aaf55b5..8163cf9 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -5,154 +5,281 @@
5@use 'iro-sass/src/bem'; 5@use 'iro-sass/src/bem';
6@use 'iro-sass/src/props'; 6@use 'iro-sass/src/props';
7@use '../props' as *; 7@use '../props' as *;
8@use '../core.vars' as core;
9 8
10@forward 'button.vars'; 9@forward 'button.vars';
11@use 'button.vars' as vars; 10@use 'button.vars' as vars;
12 11
13@mixin -apply-theme($theme, $key: ()) { 12@mixin -apply-theme($theme, $key: ()) {
14 &:link, 13 color: props.get($theme, list.join($key, --disabled --label-color)...);
15 &:visited, 14 background-color: props.get($theme, list.join($key, --disabled --bg-color)...);
16 &:enabled { 15 border-color: props.get($theme, list.join($key, --disabled --border-color)...);
17 color: props.get($theme, list.join($key, --label)...);
18 background-color: props.get($theme, list.join($key, --bg)...);
19 border-color: transparent;
20 }
21
22 @include bem.modifier('outline') {
23 &:link,
24 &:visited,
25 &:enabled {
26 color: props.get($theme, list.join($key, --outline-label)...);
27 background-color: transparent;
28 border-color: props.get($theme, list.join($key, --outline-border)...);
29 }
30 }
31 16
32 &:link, 17 &::after {
33 &:visited, 18 outline-color: props.get($theme, list.join($key, --key-focus --border-color)...);
34 &:enabled { 19 box-shadow:
35 &:hover, 20 0
36 &:focus-visible { 21 0
37 color: props.get($theme, list.join($key, --hover --label)...); 22 0
38 background-color: props.get($theme, list.join($key, --hover --bg)...); 23 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
39 border-color: transparent; 24 props.get($theme, list.join($key, --key-focus --outline-color)...);
40 } 25 }
41 26
42 &:active { 27 &:link,
43 color: props.get($theme, list.join($key, --active --label)...); 28 &:visited,
44 background-color: props.get($theme, list.join($key, --active --bg)...); 29 &:enabled {
45 border-color: transparent; 30 color: props.get($theme, list.join($key, --label-color)...);
46 } 31 background-color: props.get($theme, list.join($key, --bg-color)...);
47 } 32 border-color: props.get($theme, list.join($key, --border-color)...);
48} 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 }
49 46
50@mixin -apply-static-theme($theme, $key: ()) { 47 &:active {
51 color: props.get($theme, list.join($key, --disabled --label)...); 48 color: props.get($theme, list.join($key, --active --label-color)...);
52 background-color: props.get($theme, list.join($key, --disabled --bg)...); 49 background-color: props.get($theme, list.join($key, --active --bg-color)...);
53 border-color: transparent; 50 border-color: props.get($theme, list.join($key, --active --border-color)...);
51 box-shadow: none;
52 }
53 }
54 54
55 &::after { 55 @include bem.modifier('badge') {
56 outline-color: props.get($theme, list.join($key, --key-focus --border)...); 56 color: props.get($theme, list.join($key, --badge --label-color)...);
57 box-shadow: 57 background-color: props.get($theme, list.join($key, --badge --bg-color)...);
58 0 58 border-color: props.get($theme, list.join($key, --badge --border-color)...);
59 0 59 box-shadow: none;
60 0 60
61 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 61 &:link,
62 props.get($theme, list.join($key, --key-focus --outline)...); 62 &:visited,
63 } 63 &:enabled {
64 64 color: props.get($theme, list.join($key, --badge --label-color)...);
65 @include bem.modifier('outline') { 65 background-color: props.get($theme, list.join($key, --badge --bg-color)...);
66 background-color: transparent; 66 border-color: props.get($theme, list.join($key, --badge --border-color)...);
67 border-color: props.get($theme, list.join($key, --disabled --outline-border)...); 67 box-shadow: none;
68 } 68
69 &:hover,
70 &:focus-visible {
71 color: props.get($theme, list.join($key, --badge --hover --label-color)...);
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 }
75
76 &:active {
77 color: props.get($theme, list.join($key, --badge --active --label-color)...);
78 background-color: props.get($theme, list.join($key, --badge --active --bg-color)...);
79 border-color: props.get($theme, list.join($key, --badge --active --border-color)...);
80 }
81 }
82 }
83
84 @include bem.modifier('quiet') {
85 color: props.get($theme, list.join($key, --quiet --disabled --label-color)...);
86 background-color: transparent;
87 border-color: transparent;
88
89 &:link,
90 &:visited,
91 &:enabled {
92 color: props.get($theme, list.join($key, --quiet --label-color)...);
93 background-color: transparent;
94 border-color: transparent;
95 box-shadow: none;
96
97 &:hover,
98 &:focus-visible {
99 color: props.get($theme, list.join($key, --quiet --hover --label-color)...);
100 background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
101 border-color: transparent;
102 }
103
104 &:active {
105 color: props.get($theme, list.join($key, --quiet --active --label-color)...);
106 background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
107 border-color: transparent;
108 }
109 }
110 }
111
112 @include bem.is('highlighted') {
113 &:link,
114 &:visited,
115 &:enabled {
116 &,
117 &:hover,
118 &:focus-visible {
119 border-color: props.get($theme, list.join($key, --highlighted --border-color)...);
120 }
121
122 box-shadow:
123 0 0 0 1px props.get($theme, list.join($key, --highlighted --border-color)...),
124 props.get(vars.$shadow-x)
125 props.get(vars.$shadow-y)
126 props.get(vars.$shadow-blur)
127 props.get(vars.$shadow-grow)
128 props.get($theme, list.join($key, --highlighted --shadow-color)...);
129
130 &:focus-visible {
131 box-shadow:
132 props.get(vars.$shadow-x)
133 props.get(vars.$shadow-y)
134 props.get(vars.$shadow-blur)
135 props.get(vars.$shadow-grow)
136 props.get($theme, list.join($key, --shadow-color)...);
137 }
138 }
139 }
140
141 @include bem.is('selected') {
142 color: props.get($theme, list.join($key, --selected --disabled --label-color)...);
143 background-color: props.get($theme, list.join($key, --selected --disabled --bg-color)...);
144 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...);
69 145
70 @include -apply-theme($theme, $key); 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 }
71 151
72 @include bem.modifier('primary') { 152 &:link,
73 @include -apply-theme($theme, list.join($key, --primary)); 153 &:visited,
74 } 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 }
161
162 &:active {
163 color: props.get($theme, list.join($key, --selected --active --label-color)...);
164 background-color: props.get($theme, list.join($key, --selected --active --bg-color)...);
165 border-color: props.get($theme, list.join($key, --selected --active --border-color)...);
166 }
167 }
168 }
75} 169}
76 170
77@mixin styles { 171@mixin styles {
78 @include materialize-at-root(meta.module-variables('vars')); 172 @include materialize-at-root(meta.module-variables('vars'));
79 173
80 @include bem.object('button') { 174 @include bem.object('button') {
81 position: relative; 175 position: relative;
82 display: inline-block; 176 display: inline-block;
83 padding-block: props.get(vars.$pad-b); 177 padding-block: props.get(vars.$pad-b);
84 padding-inline: props.get(vars.$pad-i); 178 padding-inline: props.get(vars.$pad-i);
85 font-size: props.get(vars.$font-size); 179 text-overflow: ellipsis;
86 font-weight: 500; 180 font-size: props.get(vars.$font-size);
87 line-height: props.get(vars.$line-height); 181 line-height: props.get(vars.$line-height);
88 text-align: center; 182 text-align: center;
89 text-decoration: none; 183 white-space: nowrap;
90 border: props.get(vars.$border-width) solid transparent; 184 text-decoration: none;
91 border-radius: props.get(vars.$rounding); 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;
92 188
93 &::after { 189 &::after {
94 position: absolute; 190 position: absolute;
95 inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset)); 191 inset: calc(-1 * props.get(vars.$border-width) - props.get(vars.$key-focus--border-offset));
96 z-index: 1; 192 z-index: 1;
97 display: none; 193 display: none;
98 pointer-events: none; 194 pointer-events: none;
99 content: ''; 195 outline: transparent solid props.get(vars.$key-focus--border-width);
100 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); 196 content: '';
101 outline: transparent solid props.get(vars.$key-focus--border-width); 197 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
102 } 198 }
103 199
104 &:link, 200 &:link,
105 &:visited, 201 &:visited,
106 &:enabled { 202 &:enabled {
107 &:focus-visible { 203 &:focus-visible {
108 &::after { 204 transition: none;
109 display: block;
110 }
111 }
112 }
113 205
114 @include bem.elem('label') { 206 &::after {
115 margin-inline: props.get(vars.$pad-i-label); 207 display: block;
116 } 208 }
117 209 }
118 @include bem.modifier('block') { 210 }
119 display: block; 211
120 } 212 @include bem.elem('label') {
121 213 margin-inline: props.get(vars.$pad-i-label);
122 @include bem.modifier('outline') { 214 }
123 background-color: transparent; 215
124 } 216 @include -apply-theme(vars.$default-theme);
217
218 @each $theme in map.keys(props.get(vars.$themes)) {
219 @include bem.modifier(string.slice($theme, 3)) {
220 @include -apply-theme(vars.$themes, $theme);
221 }
222 }
223
224 @include bem.modifier('pill') {
225 padding-inline: props.get(vars.$pad-i-pill);
226 border-radius: 100em;
125 227
126 @each $mod, $pad-i, $pad-i-label, $pad-b, $font-size in vars.$sizes { 228 &::after {
127 @include bem.modifier($mod) { 229 border-radius: 100em;
128 padding-block: props.get($pad-b); 230 }
129 padding-inline: props.get($pad-i); 231 }
130 font-size: props.get($font-size);
131 232
132 @include bem.elem('label') { 233 @include bem.modifier('icon') {
133 margin-inline: props.get($pad-i-label); 234 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
134 } 235 padding-inline: 0;
135 } 236 }
136 }
137 237
138 @include -apply-static-theme(vars.$default-theme); 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);
139 243
140 @each $theme in map.keys(props.get(vars.$themes)) { 244 @include bem.elem('label') {
141 @include bem.modifier(string.slice($theme, 3)) { 245 margin-inline: props.get($pad-i-label);
142 @include -apply-theme(vars.$themes, $theme); 246 }
143 }
144 }
145 247
146 @each $theme in map.keys(props.get(vars.$static-themes)) { 248 @include bem.modifier('pill') {
147 @include bem.modifier(string.slice($theme, 3)) { 249 padding-inline: props.get($pad-i-pill);
148 @include -apply-static-theme(vars.$static-themes, $theme); 250 }
149 } 251
150 } 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));
151 273
152 @include bem.modifier('round') { 274 @include bem.modifier('pill') {
153 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); 275 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width));
154 padding-inline: 0; 276 }
155 border-radius: 100em; 277
156 } 278 @include bem.modifier('icon') {
157 } 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 }
158} 285}
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index 4f7b552..6e2298f 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -4,165 +4,371 @@
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
6$line-height: props.def(--o-button--line-height, 1.4) !default; 6$line-height: props.def(--o-button--line-height, 1.4) !default;
7$pad-i: props.def(--o-button--pad-i, props.get(core.$size--200)) !default; 7$border-width: props.def(--o-button--border-width, props.get(core.$border-width--thin)) !default;
8$pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default; 8$rounding: props.def(--o-button--rounding, props.get(core.$rounding--sm)) !default;
9$pad-b: props.def(--o-button--pad-b, props.get(core.$size--65)) !default;
10$border-width: props.def(--o-button--border-width, props.get(core.$border-width--medium)) !default;
11$rounding: props.def(--o-button--rounding, 10em) !default;
12$font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default;
13 9
14$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--150)) !default; 10$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--75)) !default;
15$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default; 11$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--25)) !default;
16$pad-b--sm: props.def(--o-button--sm--pad-b, 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;
17$font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default; 14$font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default;
18 15
19$pad-i--lg: props.def(--o-button--lg--pad-i, props.get(core.$size--250)) !default; 16$pad-i: props.def(--o-button--pad-i, props.get(core.$size--115)) !default;
20$pad-i-label--lg: props.def(--o-button--lg--pad-i-label, props.get(core.$size--100)) !default; 17$pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--40)) !default;
21$pad-b--lg: props.def(--o-button--lg--pad-b, props.get(core.$size--100)) !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;
22$font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default; 26$font-size--lg: props.def(--o-button--lg--font-size, props.get(core.$font-size--150)) !default;
23 27
24$pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--300)) !default; 28$pad-i--xl: props.def(--o-button--xl--pad-i, props.get(core.$size--200)) !default;
25$pad-i-label--xl: props.def(--o-button--xl--pad-i-label, props.get(core.$size--150)) !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;
26$pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default; 31$pad-b--xl: props.def(--o-button--xl--pad-b, props.get(core.$size--150)) !default;
27$font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default; 32$font-size--xl: props.def(--o-button--xl--font-size, props.get(core.$font-size--200)) !default;
28 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
29$key-focus--border-width: props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 39$key-focus--border-width: props.def(--o-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
30$key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 40$key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
31$key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 41$key-focus--outline-width: props.def(--o-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
32 42
33$sizes: ( 43$fixed-sizes: (
34 'sm' $pad-i--sm $pad-i-label--sm $pad-b--sm $font-size--sm, 44 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--sm $pad-b--sm $font-size--sm,
35 'lg' $pad-i--lg $pad-i-label--lg $pad-b--lg $font-size--lg, 45 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--lg $pad-b--lg $font-size--lg,
36 'xl' $pad-i--xl $pad-i-label--xl $pad-b--xl $font-size--xl, 46 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
37) !default; 47) !default;
38 48
49$themes: props.def(--o-button, (), 'color');
50
39$default-theme-override: () !default; 51$default-theme-override: () !default;
40$default-theme: props.def(--o-button, ( 52$default-theme: map.deep-merge((
41 --bg: props.get(core.$theme, --border-mute), 53 --bg-color: props.get(core.$theme, --bg-l2),
42 --label: props.get(core.$theme, --text), 54 --label-color: props.get(core.$theme, --text),
43 --outline-border: props.get(core.$theme, --border), 55 --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong),
44 --outline-label: props.get(core.$theme, --text), 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 ),
45 120
46 --hover: ( 121 --active: (
47 --bg: props.get(core.$theme, --border), 122 --bg-color: props.get(core.$theme, --border-strong),
48 --label: props.get(core.$theme, --heading), 123 --label-color: props.get(core.$theme, --heading),
49 ), 124 --border-color: props.get(core.$theme, --border-strong),
125 ),
126 ),
50 127
51 --active: ( 128 --quiet: (
52 --bg: props.get(core.$theme, --border-strong), 129 --label-color: props.get(core.$theme, --text),
53 --label: props.get(core.$theme, --heading),
54 ),
55 130
56 --disabled: ( 131 --hover: (
57 --bg: props.get(core.$theme, --border-mute), 132 --bg-color: props.get(core.$theme, --border-mute),
58 --outline-border: props.get(core.$theme, --border), 133 --label-color: props.get(core.$theme, --heading),
59 --label: props.get(core.$theme, --text-disabled), 134 ),
60 ),
61 135
62 --key-focus: ( 136 --active: (
63 --label: props.get(core.$theme, --focus, --text), 137 --bg-color: props.get(core.$theme, --border),
64 --border: props.get(core.$theme, --focus, --border), 138 --label-color: props.get(core.$theme, --heading),
65 --outline: props.get(core.$theme, --focus, --outline), 139 ),
66 ),
67 140
68 --primary: ( 141 --disabled: (
69 --bg: props.get(core.$theme, --base, --900), 142 --label-color: props.get(core.$theme, --border-strong),
70 --label: props.get(core.$theme, --base, --900-text), 143 ),
71 --outline-border: props.get(core.$theme, --base, --900), 144 ),
72 --outline-label: props.get(core.$theme, --text), 145), $default-theme-override) !default;
146$default-theme: props.def(--o-button, $default-theme, 'color');
73 147
74 --hover: ( 148$default-theme-dark-override: () !default;
75 --bg: props.get(core.$theme, --base, --800), 149$default-theme-dark: map.deep-merge((
76 --label: props.get(core.$theme, --base, --800-text), 150 --bg-color: props.get(core.$theme, --border-mute),
77 ), 151 --border-color: props.get(core.$theme, --border-mute),
78 152
79 --active: ( 153 --hover: (
80 --bg: props.get(core.$theme, --base, --700), 154 --bg-color: props.get(core.$theme, --border),
81 --label: props.get(core.$theme, --base, --700-text), 155 --border-color: props.get(core.$theme, --border),
82 ), 156 ),
83 ),
84), 'color') !default;
85$default-theme: props.merge($default-theme, $default-theme-override);
86 157
87$static-themes: props.def(--o-button, (), 'color'); 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');
88 168
89@each $theme in map.keys(props.get(core.$transparent-colors)) { 169@each $theme in map.keys(props.get(core.$transparent-colors)) {
90 $button-theme: --static-#{string.slice($theme, 3)}; 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 ),
91 196
92 $static-themes: props.merge($static-themes, ( 197 --key-focus: (
93 $button-theme: ( 198 --border-color: props.get(core.$transparent-colors, $theme, --900),
94 --bg: props.get(core.$transparent-colors, $theme, --200), 199 --outline-color: props.get(core.$transparent-colors, $theme, --300),
95 --label: props.get(core.$transparent-colors, $theme, --900), 200 ),
96 --outline-border: props.get(core.$transparent-colors, $theme, --300),
97 --outline-label: props.get(core.$transparent-colors, $theme, --900),
98 201
99 --hover: ( 202 --highlighted: (
100 --bg: props.get(core.$transparent-colors, $theme, --300), 203 --border-color: props.get(core.$transparent-colors, $theme, --900),
101 --label: props.get(core.$transparent-colors, $theme, --900), 204 --shadow-color: props.get(core.$transparent-colors, --black, --200),
102 ), 205 ),
103 206
104 --active: ( 207 --selected: (
105 --bg: props.get(core.$transparent-colors, $theme, --400), 208 --bg-color: props.get(core.$transparent-colors, $theme, --800),
106 --label: props.get(core.$transparent-colors, $theme, --900), 209 --label-color: props.get(core.$transparent-colors, $theme, --text),
107 ), 210 --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200),
108 211
109 --disabled: ( 212 --hover: (
110 --bg: props.get(core.$transparent-colors, $theme, --200), 213 --bg-color: props.get(core.$transparent-colors, $theme, --900),
111 --outline-border: props.get(core.$transparent-colors, $theme, --300), 214 --label-color: props.get(core.$transparent-colors, $theme, --text),
112 --label: props.get(core.$transparent-colors, $theme, --500), 215 --border-color: props.get(core.$transparent-colors, $theme, --100),
113 ), 216 ),
114 217
115 --key-focus: ( 218 --active: (
116 --bg: props.get(core.$transparent-colors, $theme, --100), 219 --bg-color: props.get(core.$transparent-colors, $theme, --900),
117 --label: props.get(core.$transparent-colors, $theme, --900), 220 --label-color: props.get(core.$transparent-colors, $theme, --text),
118 --border: props.get(core.$transparent-colors, $theme, --900), 221 --border-color: props.get(core.$transparent-colors, $theme, --100),
119 --outline: props.get(core.$transparent-colors, $theme, --300), 222 ),
120 ),
121 223
122 --primary: ( 224 --disabled: (
123 --bg: props.get(core.$transparent-colors, $theme, --800), 225 --bg-color: props.get(core.$transparent-colors, $theme, --200),
124 --label: props.get(core.$transparent-colors, $theme, --text), 226 --label-color: props.get(core.$transparent-colors, $theme, --500),
125 --outline-border: props.get(core.$transparent-colors, $theme, --800), 227 --border-color: props.get(core.$transparent-colors, $theme, --100),
126 --outline-label: props.get(core.$transparent-colors, $theme, --900), 228 ),
127 229 ),
128 --hover: (
129 --bg: props.get(core.$transparent-colors, $theme, --900),
130 --label: props.get(core.$transparent-colors, $theme, --text),
131 ),
132 230
133 --active: ( 231 --badge: (
134 --bg: props.get(core.$transparent-colors, $theme, --900), 232 --bg-color: props.get(core.$transparent-colors, $theme, --200),
135 --label: props.get(core.$transparent-colors, $theme, --text), 233 --label-color: props.get(core.$transparent-colors, $theme, --900),
136 ), 234 --border-color: transparent,
137 ) 235
138 ) 236 --hover: (
139 )); 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 ));
140} 268}
141 269
142$themes-config: ( 270$themes-config: (
143 accent: --accent, 271 accent: --accent,
144 negative: --negative, 272 positive: --positive,
273 negative: --negative,
274 warning: --warning,
145) !default; 275) !default;
146 276
147$themes: props.def(--o-button, (), 'color');
148
149@each $theme, $key in $themes-config { 277@each $theme, $key in $themes-config {
150 $themes: props.merge($themes, ( 278 $themes: props.merge($themes, (
151 --#{$theme}: ( 279 --#{$theme}: (
152 --bg: props.get(core.$theme, #{$key}-static, --900), 280 --bg-color: props.get(core.$theme, $key, --100),
153 --label: props.get(core.$theme, #{$key}-static, --900-text), 281 --label-color: props.get(core.$theme, $key, --1100),
154 --outline-border: props.get(core.$theme, $key, --900), 282 --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600),
155 --outline-label: props.get(core.$theme, $key, --1000), 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 ),
156 336
157 --hover: ( 337 --badge: (
158 --bg: props.get(core.$theme, #{$key}-static, --1000), 338 --bg-color: props.get(core.$theme, $key, --100),
159 --label: props.get(core.$theme, #{$key}-static, --1000-text), 339 --label-color: props.get(core.$theme, $key, --1100),
160 ), 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 ),
161 354
162 --active: ( 355 --quiet: (
163 --bg: props.get(core.$theme, #{$key}-static, --1100), 356 --label-color: props.get(core.$theme, $key, --1100),
164 --label: props.get(core.$theme, #{$key}-static, --1100-text), 357
165 ), 358 --hover: (
166 ) 359 --bg-color: props.get(core.$theme, $key, --200),
167 )); 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 ));
168} 374}
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index e6f266d..5ae203d 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -8,194 +8,276 @@
8@use 'card.vars' as vars; 8@use 'card.vars' as vars;
9 9
10@mixin styles { 10@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars')); 11 @include materialize-at-root(meta.module-variables('vars'));
12 12
13 @include bem.object('card') { 13 @include bem.object('card') {
14 position: relative; 14 position: relative;
15 display: flex; 15 display: flex;
16 flex-direction: column; 16 flex-direction: column;
17 margin: calc(-1 * props.get(vars.$key-focus--border-width)); 17 background-color: props.get(vars.$bg-color);
18 background-color: props.get(vars.$bg-color); 18 border: props.get(vars.$border-width) solid transparent;
19 background-clip: content-box; 19 border-color: props.get(vars.$border-color);
20 border: props.get(vars.$key-focus--border-offset) solid transparent; 20 border-radius: props.get(vars.$rounding);
21 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); 21 transition: transform .2s, background-color .2s, border-color .2s, box-shadow .2s;
22 transition: transform .2s;
23 22
24 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 23 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
25 &:hover, 24 &:hover,
26 &:active, 25 &:active,
27 &:focus-visible { 26 &:focus-visible {
28 transform: translateY(props.get(vars.$hover--offset-b)); 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 }
29 32
30 @include bem.elem('body') { 33 &:focus-visible {
31 @include bem.modifier('hidden') { 34 margin: calc(-1 * props.get(vars.$key-focus--border-width));
32 visibility: visible; 35 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
33 opacity: 1; 36 border: calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent;
34 transition: 37 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
35 opacity .2s ease, 38 box-shadow:
36 visibility .2s linear; 39 0 0 0
37 } 40 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
38 } 41 props.get(vars.$key-focus--outline-color);
39 } 42 transition: transform .2s;
43 }
44 }
40 45
41 &:focus-visible { 46 @include bem.modifier('borderless') {
42 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 47 border-color: props.get(vars.$bg-color);
43 box-shadow: 48 }
44 0
45 0
46 0
47 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
48 props.get(vars.$key-focus--outline-color);
49 }
50 }
51 49
52 @include bem.elem('avatar') { 50 @include bem.modifier('shadow') {
53 margin-block-start: props.get(vars.$pad-b); 51 box-shadow:
54 margin-inline-start: props.get(vars.$pad-i); 52 props.get(vars.$shadow-x)
55 } 53 props.get(vars.$shadow-y)
54 props.get(vars.$shadow-blur)
55 props.get(vars.$shadow-grow)
56 props.get(vars.$shadow-color);
56 57
57 @include bem.elem('image') { 58 @include bem.modifier('quiet') {
58 display: block; 59 @include bem.elem('image') {
59 flex: 0 0 auto; 60 box-shadow:
60 inline-size: 100%; 61 props.get(vars.$shadow-x)
61 object-fit: cover; 62 props.get(vars.$shadow-y)
62 transition: transform .2s, opacity .2s; 63 props.get(vars.$shadow-blur)
64 props.get(vars.$shadow-grow)
65 props.get(vars.$shadow-color);
66 }
67 }
68 }
63 69
64 &:first-child { 70 @include bem.elem('avatar') {
65 border-start-start-radius: props.get(vars.$rounding); 71 margin-block-start: props.get(vars.$pad-b);
66 border-start-end-radius: props.get(vars.$rounding); 72 margin-inline-start: props.get(vars.$pad-i);
67 } 73 }
68 74
69 &:last-child { 75 @include bem.elem('image') {
70 border-end-start-radius: props.get(vars.$rounding); 76 position: relative;
71 border-end-end-radius: props.get(vars.$rounding); 77 display: block;
72 } 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;
73 84
74 @include bem.next-elem('avatar') { 85 &:first-child {
75 margin-block-start: calc(-.7 * props.get(avatar.$size--xl)); 86 border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
76 } 87 border-start-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
77 } 88 }
78 89
79 @include bem.elem('body') { 90 &:last-child {
80 flex: 1 0 auto; 91 border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
81 padding-block: props.get(vars.$pad-b); 92 border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
82 padding-inline: props.get(vars.$pad-i); 93 }
83 94
84 &::before { 95 @include bem.next-elem('avatar') {
85 display: block; 96 margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
86 margin-block: -100em 100em; 97 }
87 content: ''; 98 }
88 }
89 99
90 @include bem.modifier('hidden') { 100 @include bem.elem('image-img') {
91 position: absolute; 101 display: block;
92 inset-block-end: 0; 102 inline-size: 100%;
93 inset-inline: 0; 103 object-fit: cover;
94 z-index: 10; 104 }
95 visibility: hidden;
96 background-color: props.get(vars.$bg-color);
97 //border-end-start-radius: props.get(vars.$rounding);
98 //border-end-end-radius: props.get(vars.$rounding);
99 opacity: 0;
100 transition:
101 opacity .2s ease,
102 visibility 0s .2s linear;
103 105
104 @include bem.next-elem('image') { 106 @include bem.elem('image-overlay') {
105 border-start-start-radius: props.get(vars.$rounding); 107 position: absolute;
106 border-start-end-radius: props.get(vars.$rounding); 108 inset-block-end: 0;
107 } 109 inset-inline: 0;
108 } 110 z-index: 5;
109 } 111 padding-block: props.get(vars.$image-overlay--pad-b);
112 padding-inline: props.get(vars.$image-overlay--pad-i);
113 }
110 114
111 @include bem.elem('content') { 115 @include bem.elem('body') {
112 margin-block-start: props.get(vars.$spacing); 116 flex: 1 0 auto;
113 } 117 padding-block: props.get(vars.$pad-b);
118 padding-inline: props.get(vars.$pad-i);
114 119
115 @include bem.elem('footer') { 120 &::before {
116 flex: 0 0 auto; 121 display: block;
117 padding-block: 0 props.get(vars.$pad-b); 122 margin-block: -100em 100em;
118 padding-inline: props.get(vars.$pad-i); 123 content: '';
119 margin-block-start: calc(-1 * props.get(vars.$pad-b)); 124 }
120 125
121 &::before { 126 @include bem.modifier('no-mbs-neutralize') {
122 display: block; 127 &::before {
123 block-size: props.get(vars.$divider-width); 128 display: none;
124 margin-block: props.get(vars.$spacing); 129 }
125 content: ''; 130 }
126 background-color: props.get(vars.$divider-width); 131 }
127 }
128 }
129 132
130 @include bem.modifier('quiet') { 133 @include bem.elem('content') {
131 position: relative; 134 margin-block-start: props.get(vars.$spacing);
132 margin: 0; 135 }
133 background-color: transparent;
134 border: 0;
135 136
136 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 137 @include bem.elem('footer') {
137 &:hover, 138 flex: 0 0 auto;
138 &:active, 139 padding-block: 0 props.get(vars.$pad-b);
139 &:focus-visible { 140 padding-inline: props.get(vars.$pad-i);
140 transform: none; 141 margin-block-start: calc(-1 * props.get(vars.$pad-b));
141 142
142 @include bem.elem('image') { 143 &::before {
143 background-color: props.get(vars.$quiet--hover--image-color); 144 display: block;
144 opacity: .75; 145 block-size: props.get(vars.$divider-width);
145 transform: translateY(props.get(vars.$hover--offset-b)); 146 margin-block: props.get(vars.$spacing);
146 } 147 content: '';
147 } 148 background-color: props.get(vars.$divider-width);
149 }
150 }
148 151
149 &:focus-visible { 152 @include bem.modifier('quiet') {
150 outline: none; 153 margin-inline: 0;
151 box-shadow: none; 154 background-color: transparent;
155 border: 0;
156 box-shadow: none;
152 157
153 @include bem.elem('image') { 158 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
154 background-color: props.get(vars.$quiet--hover--image-color); 159 &:hover,
155 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 160 &:active,
156 box-shadow: 161 &:focus-visible {
157 0 162 background-color: transparent;
158 0 163 transform: none;
159 0
160 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
161 props.get(vars.$key-focus--outline-color);
162 opacity: 1;
163 }
164 }
165 }
166 164
167 @include bem.elem('image') { 165 @include bem.elem('image') {
168 position: relative; 166 background-color: props.get(vars.$quiet--hover--image-color);
169 margin: calc(-1 * props.get(vars.$key-focus--border-width)); 167 opacity: .75;
170 background-color: props.get(vars.$quiet--image-color); 168 transform: translateY(props.get(vars.$hover--offset-b));
171 background-clip: padding-box; 169 }
172 border: props.get(vars.$key-focus--border-offset) solid transparent; 170 }
173 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
174 }
175 171
176 @include bem.elem('body') { 172 &:focus-visible {
177 padding: 0; 173 margin: 0;
178 padding-block-start: props.get(vars.$spacing); 174 outline: none;
179 } 175 border: 0;
176 box-shadow: none;
180 177
181 @include bem.elem('footer') { 178 @include bem.elem('image') {
182 padding-inline: 0; 179 margin: calc(-1 * props.get(vars.$key-focus--border-width));
183 } 180 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
184 } 181 background-color: props.get(vars.$quiet--hover--image-color);
182 border: props.get(vars.$key-focus--border-offset) solid transparent;
183 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
184 box-shadow:
185 0
186 0
187 0
188 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
189 props.get(vars.$key-focus--outline-color);
190 opacity: 1;
191 }
192 }
193 }
185 194
186 @include bem.modifier('horizontal') { 195 @include bem.elem('image') {
187 flex-direction: row; 196 position: relative;
188 align-items: center; 197 background-color: props.get(vars.$quiet--image-color);
198 background-clip: padding-box;
199 border-radius: props.get(vars.$rounding);
200 }
189 201
190 @include bem.elem('body') { 202 @include bem.elem('body') {
191 flex: 0 0 auto; 203 padding: 0;
204 padding-block-start: props.get(vars.$spacing);
205 }
192 206
193 @include bem.modifier('main') { 207 @include bem.elem('footer') {
194 flex-shrink: 1; 208 padding-inline: 0;
195 inline-size: 100%; 209 }
196 min-inline-size: 0; 210 }
197 } 211
198 } 212 @include bem.modifier('thumbnail') {
199 } 213 @include bem.elem('image') {
200 } 214 border-radius: props.get(vars.$rounding);
215 }
216
217 @include bem.elem('body') {
218 position: absolute;
219 inset-block-end: calc(-1 * props.get(vars.$border-width));
220 inset-inline: calc(-1 * props.get(vars.$border-width));
221 z-index: 10;
222 visibility: hidden;
223 background-color: props.get(vars.$hover--bg-color);
224 border-color: transparent;
225 border-style: solid;
226 border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width);
227 border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
228 border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
229 opacity: 0;
230 transition:
231 border-color .2s ease,
232 opacity .2s ease,
233 visibility 0s .2s linear;
234 }
235
236 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
237 &:hover,
238 &:active,
239 &:focus-visible {
240 @include bem.elem('body') {
241 visibility: visible;
242 border-color: props.get(vars.$hover--border-color);
243 opacity: 1;
244 transition:
245 border-color .2s ease,
246 opacity .2s ease,
247 visibility .2s linear;
248 }
249 }
250 }
251 }
252
253 @include bem.modifier('horizontal') {
254 flex-direction: row;
255 align-items: center;
256
257 @include bem.elem('image') {
258 align-self: stretch;
259 inline-size: auto;
260
261 &:first-child {
262 border-start-end-radius: 0;
263 border-end-start-radius: props.get(vars.$rounding);
264 }
265
266 &:last-child {
267 border-start-end-radius: props.get(vars.$rounding);
268 border-end-start-radius: 0;
269 }
270 }
271
272 @include bem.elem('body') {
273 flex: 0 0 auto;
274
275 @include bem.modifier('main') {
276 flex-shrink: 1;
277 inline-size: 100%;
278 min-inline-size: 0;
279 }
280 }
281 }
282 }
201} 283}
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index 8ee7158..ebfba10 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -2,21 +2,35 @@
2@use 'iro-sass/src/props'; 2@use 'iro-sass/src/props';
3@use '../core.vars' as core; 3@use '../core.vars' as core;
4 4
5$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default; 5$divider-width: props.def(--o-card--divider-width, props.get(core.$border-width--thin)) !default;
6$pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default; 6$border-width: props.def(--o-card--border-width, props.get(core.$border-width--thin)) !default;
7$pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default; 7$sub-border-width: props.def(--o-card--sub-border-width, props.get(core.$border-width--thick)) !default;
8$spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default; 8$pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default;
9$rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !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;
10 14
11$hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default; 15$hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default;
12 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
13$key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 22$key-focus--border-width: props.def(--o-card--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
14$key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 23$key-focus--border-offset: props.def(--o-card--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
15$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 24$key-focus--outline-width: props.def(--o-card--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
16 25
26$shadow-color: props.def(--o-card--shadow-color, props.get(core.$theme, --shadow), 'color') !default;
17$bg-color: props.def(--o-card--bg-color, props.get(core.$theme, --bg-l2), '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;
18$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default; 29$divider-color: props.def(--o-card--divider-color, props.get(core.$theme, --border-mute), 'color') !default;
19 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
20$key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default; 34$key-focus--label-color: props.def(--o-card--key-focus--label-color, props.get(core.$theme, --focus, --text), 'color') !default;
21$key-focus--border-color: props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default; 35$key-focus--border-color: props.def(--o-card--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
22$key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default; 36$key-focus--outline-color: props.def(--o-card--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index 82dd596..5faafb9 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -9,223 +9,223 @@
9@use 'checkbox.vars' as vars; 9@use 'checkbox.vars' as vars;
10 10
11@mixin styles { 11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars')); 12 @include materialize-at-root(meta.module-variables('vars'));
13 13
14 @include bem.object('checkbox') { 14 @include bem.object('checkbox') {
15 position: relative; 15 position: relative;
16 display: inline-block; 16 display: inline-block;
17 padding-block: props.get(vars.$pad-b); 17 padding-block: props.get(vars.$pad-b);
18 padding-inline: props.get(vars.$pad-i); 18 padding-inline: props.get(vars.$pad-i);
19 margin-inline: 19 margin-inline:
20 calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) 20 calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
21 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset)); 21 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-b) - props.get(vars.$key-focus--border-offset));
22 22
23 @include bem.elem('box') { 23 @include bem.elem('box') {
24 position: relative; 24 position: relative;
25 display: inline-block; 25 display: inline-block;
26 flex: 0 0 auto; 26 flex: 0 0 auto;
27 inline-size: props.get(vars.$size); 27 inline-size: props.get(vars.$size);
28 block-size: props.get(vars.$size); 28 block-size: props.get(vars.$size);
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)); 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));
30 vertical-align: top; 30 vertical-align: top;
31 background-color: props.get(vars.$box-border-color); 31 background-color: props.get(vars.$box-border-color);
32 background-clip: padding-box; 32 background-clip: padding-box;
33 border: props.get(vars.$key-focus--border-offset) solid transparent; 33 border: props.get(vars.$key-focus--border-offset) solid transparent;
34 border-radius: calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset)); 34 border-radius: calc(props.get(vars.$border-width) + props.get(vars.$key-focus--border-offset));
35 35
36 &::before, 36 &::before,
37 &::after { 37 &::after {
38 position: absolute; 38 position: absolute;
39 display: block; 39 display: block;
40 content: ''; 40 content: '';
41 } 41 }
42 42
43 &::before { 43 &::before {
44 inset-block-start: props.get(vars.$border-width); 44 inset-block-start: props.get(vars.$border-width);
45 inset-inline-start: props.get(vars.$border-width); 45 inset-inline-start: props.get(vars.$border-width);
46 z-index: 2; 46 z-index: 2;
47 inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); 47 inline-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
48 block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width)); 48 block-size: calc(props.get(vars.$size) - 2 * props.get(vars.$border-width));
49 background-color: props.get(vars.$box-bg-color); 49 background-color: props.get(vars.$box-bg-color);
50 transition: transform .2s ease; 50 transition: transform .2s ease;
51 } 51 }
52 52
53 &::after { 53 &::after {
54 inset-block-start: calc(.5 * props.get(vars.$size) - 1px); 54 inset-block-start: calc(.5 * props.get(vars.$size) - 1px);
55 inset-inline-start: calc(1.5 * props.get(vars.$border-width)); 55 inset-inline-start: calc(1.5 * props.get(vars.$border-width));
56 z-index: 3; 56 z-index: 3;
57 box-sizing: border-box; 57 box-sizing: border-box;
58 inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width)); 58 inline-size: calc(props.get(vars.$size) - 3 * props.get(vars.$border-width));
59 block-size: 0; 59 block-size: 0;
60 border-color: props.get(vars.$box-bg-color); 60 border-color: props.get(vars.$box-bg-color);
61 border-style: solid; 61 border-style: solid;
62 border-radius: 2px; 62 border-radius: 2px;
63 transition: transform .2s ease; 63 transform: scale(0);
64 transform: scale(0); 64 transition: transform .2s ease;
65 border-block-width: 0 2px; 65 border-block-width: 0 2px;
66 border-inline-width: 0 2px; 66 border-inline-width: 0 2px;
67 } 67 }
68 } 68 }
69 69
70 @include bem.elem('check-icon') { 70 @include bem.elem('check-icon') {
71 position: absolute; 71 position: absolute;
72 inset-block-start: calc(1 * props.get(vars.$border-width)); 72 inset-block-start: calc(1 * props.get(vars.$border-width));
73 inset-inline-start: calc(1 * props.get(vars.$border-width)); 73 inset-inline-start: calc(1 * props.get(vars.$border-width));
74 z-index: 2; 74 z-index: 2;
75 display: block; 75 display: block;
76 inline-size: calc(100% - 2 * props.get(vars.$border-width)); 76 inline-size: calc(100% - 2 * props.get(vars.$border-width));
77 block-size: calc(100% - 2 * props.get(vars.$border-width)); 77 block-size: calc(100% - 2 * props.get(vars.$border-width));
78 margin: 0; 78 margin: 0;
79 color: props.get(vars.$box-bg-color); 79 color: props.get(vars.$box-bg-color);
80 stroke-width: fn.px-to-rem(3px); 80 stroke-width: fn.px-to-rem(3px);
81 transition: transform .2s ease; 81 transform: scale(0);
82 transform: scale(0); 82 transform-origin: 40% 90%;
83 transform-origin: 40% 90%; 83 transition: transform .2s ease;
84 } 84 }
85 85
86 @include bem.elem('label') { 86 @include bem.elem('label') {
87 margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); 87 margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
88 } 88 }
89 89
90 @include bem.elem('native') { 90 @include bem.elem('native') {
91 position: absolute; 91 position: absolute;
92 inset-block-start: 0; 92 inset-block-start: 0;
93 inset-inline-start: 0; 93 inset-inline-start: 0;
94 z-index: -1; 94 z-index: -1;
95 inline-size: 100%; 95 inline-size: 100%;
96 block-size: 100%; 96 block-size: 100%;
97 padding: 0; 97 padding: 0;
98 margin: 0; 98 margin: 0;
99 overflow: hidden; 99 overflow: hidden;
100 appearance: none; 100 appearance: none;
101 border-radius: props.get(vars.$rounding); 101 border-radius: props.get(vars.$rounding);
102 102
103 &:hover, 103 &:hover,
104 &:focus-visible { 104 &:focus-visible {
105 @include bem.sibling-elem('label') { 105 @include bem.sibling-elem('label') {
106 color: props.get(vars.$hover--label-color); 106 color: props.get(vars.$hover--label-color);
107 } 107 }
108 108
109 @include bem.sibling-elem('box') { 109 @include bem.sibling-elem('box') {
110 background-color: props.get(vars.$hover--box-border-color); 110 background-color: props.get(vars.$hover--box-border-color);
111 } 111 }
112 } 112 }
113 113
114 &:checked { 114 &:checked {
115 @include bem.sibling-elem('box') { 115 @include bem.sibling-elem('box') {
116 &::before { 116 &::before {
117 transform: scale(0); 117 transform: scale(0);
118 } 118 }
119 119
120 @include bem.elem('check-icon') { 120 @include bem.elem('check-icon') {
121 transform: scale(1); 121 transform: scale(1);
122 } 122 }
123 } 123 }
124 } 124 }
125 125
126 &:indeterminate { 126 &:indeterminate {
127 @include bem.sibling-elem('box') { 127 @include bem.sibling-elem('box') {
128 &::before { 128 &::before {
129 transform: scale(0); 129 transform: scale(0);
130 } 130 }
131 131
132 &::after { 132 &::after {
133 transform: scale(1); 133 transform: scale(1);
134 } 134 }
135 135
136 @include bem.elem('check-icon') { 136 @include bem.elem('check-icon') {
137 transform: scale(0); 137 transform: scale(0);
138 } 138 }
139 } 139 }
140 } 140 }
141 141
142 &:disabled { 142 &:disabled {
143 @include bem.sibling-elem('label') { 143 @include bem.sibling-elem('label') {
144 color: props.get(vars.$disabled--label-color); 144 color: props.get(vars.$disabled--label-color);
145 } 145 }
146 146
147 @include bem.sibling-elem('box') { 147 @include bem.sibling-elem('box') {
148 background-color: props.get(vars.$disabled--box-border-color); 148 background-color: props.get(vars.$disabled--box-border-color);
149 149
150 &::before { 150 &::before {
151 background-color: props.get(vars.$disabled--box-bg-color); 151 background-color: props.get(vars.$disabled--box-bg-color);
152 } 152 }
153 } 153 }
154 } 154 }
155 155
156 &:focus-visible { 156 &:focus-visible {
157 @include bem.sibling-elem('label') { 157 @include bem.sibling-elem('label') {
158 color: props.get(vars.$key-focus--label-color); 158 color: props.get(vars.$key-focus--label-color);
159 } 159 }
160 160
161 @include bem.sibling-elem('box') { 161 @include bem.sibling-elem('box') {
162 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 162 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
163 box-shadow: 163 box-shadow:
164 0 164 0
165 0 165 0
166 0 166 0
167 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 167 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
168 props.get(vars.$key-focus--outline-color); 168 props.get(vars.$key-focus--outline-color);
169 } 169 }
170 } 170 }
171 } 171 }
172 172
173 @include bem.modifier('standalone') { 173 @include bem.modifier('standalone') {
174 @include bem.elem('box') { 174 @include bem.elem('box') {
175 margin-block-start: 0; 175 margin-block-start: 0;
176 } 176 }
177 } 177 }
178 178
179 @include bem.modifier('accent') { 179 @include bem.modifier('accent') {
180 @include bem.elem('native') { 180 @include bem.elem('native') {
181 &:checked { 181 &:checked {
182 @include bem.sibling-elem('box') { 182 @include bem.sibling-elem('box') {
183 background-color: props.get(vars.$accent--box-border-color); 183 background-color: props.get(vars.$accent--box-border-color);
184 } 184 }
185 185
186 &:hover, 186 &:hover,
187 &:focus-visible { 187 &:focus-visible {
188 @include bem.sibling-elem('box') { 188 @include bem.sibling-elem('box') {
189 background-color: props.get(vars.$accent--hover--box-border-color); 189 background-color: props.get(vars.$accent--hover--box-border-color);
190 } 190 }
191 } 191 }
192 } 192 }
193 193
194 &:indeterminate { 194 &:indeterminate {
195 @include bem.sibling-elem('box') { 195 @include bem.sibling-elem('box') {
196 background-color: props.get(vars.$accent--box-border-color); 196 background-color: props.get(vars.$accent--box-border-color);
197 } 197 }
198 198
199 &:hover, 199 &:hover,
200 &:focus-visible { 200 &:focus-visible {
201 @include bem.sibling-elem('box') { 201 @include bem.sibling-elem('box') {
202 background-color: props.get(vars.$accent--hover--box-border-color); 202 background-color: props.get(vars.$accent--hover--box-border-color);
203 } 203 }
204 } 204 }
205 } 205 }
206 206
207 &:disabled { 207 &:disabled {
208 @include bem.sibling-elem('box') { 208 @include bem.sibling-elem('box') {
209 background-color: props.get(vars.$disabled--box-border-color); 209 background-color: props.get(vars.$disabled--box-border-color);
210 210
211 &::before { 211 &::before {
212 background-color: props.get(vars.$disabled--box-bg-color); 212 background-color: props.get(vars.$disabled--box-bg-color);
213 } 213 }
214 } 214 }
215 215
216 &:checked { 216 &:checked {
217 @include bem.sibling-elem('box') { 217 @include bem.sibling-elem('box') {
218 background-color: props.get(vars.$disabled--box-border-color); 218 background-color: props.get(vars.$disabled--box-border-color);
219 } 219 }
220 } 220 }
221 221
222 &:indeterminate { 222 &:indeterminate {
223 @include bem.sibling-elem('box') { 223 @include bem.sibling-elem('box') {
224 background-color: props.get(vars.$disabled--box-border-color); 224 background-color: props.get(vars.$disabled--box-border-color);
225 } 225 }
226 } 226 }
227 } 227 }
228 } 228 }
229 } 229 }
230 } 230 }
231} 231}
diff --git a/src/objects/_checkbox.vars.scss b/src/objects/_checkbox.vars.scss
index aee26e6..25a0d3d 100644
--- a/src/objects/_checkbox.vars.scss
+++ b/src/objects/_checkbox.vars.scss
@@ -7,7 +7,7 @@ $label-gap: props.def(--o-checkbox--label-gap, props.get(core.$size--125))
7$border-width: props.def(--o-checkbox--border-width, props.get(core.$border-width--medium)) !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; 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; 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)) !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; 11$spacing-sibling: props.def(--o-checkbox--spacing-sibling, props.get(core.$size--300)) !default;
12 12
13$key-focus--border-width: props.def(--o-checkbox--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 13$key-focus--border-width: props.def(--o-checkbox--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 65f1718..27af173 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -10,138 +10,195 @@
10@use 'divider.vars' as vars; 10@use 'divider.vars' as vars;
11 11
12@mixin styles { 12@mixin styles {
13 @include materialize-at-root(meta.module-variables('vars')); 13 @include materialize-at-root(meta.module-variables('vars'));
14 14
15 @include bem.object('divider') { 15 @include bem.object('divider') {
16 display: flex; 16 display: flex;
17 flex: 0 0 auto; 17 flex: 0 0 auto;
18 flex-direction: row; 18 flex-direction: row;
19 align-items: center; 19 align-items: center;
20 block-size: 1em; 20 block-size: 1em;
21 margin-block: props.get(vars.$margin-b); 21 margin-block: props.get(vars.$margin-b);
22 font-size: props.get(vars.$strong--label-font-size); 22 font-size: props.get(vars.$strong--label-font-size);
23 font-weight: 700; 23 font-weight: 700;
24 line-height: 1; 24 line-height: 1;
25 color: props.get(vars.$strong--label-color); 25 color: props.get(vars.$strong--label-color);
26 text-transform: uppercase; 26 text-transform: uppercase;
27 letter-spacing: .5px; 27 letter-spacing: .5px;
28 background-color: transparent; 28 background-color: transparent;
29 29
30 &::before, 30 &::before,
31 &::after { 31 &::after {
32 flex: 1 1 auto; 32 flex: 1 1 auto;
33 inline-size: 100%; 33 inline-size: 100%;
34 block-size: props.get(vars.$strong--border-width); 34 block-size: props.get(vars.$strong--border-width);
35 content: ''; 35 content: '';
36 background-color: props.get(vars.$strong--bg-color); 36 background-color: props.get(vars.$strong--bg-color);
37 } 37 }
38 38
39 &::before { 39 &::before {
40 display: block; 40 display: block;
41 } 41 }
42 42
43 @include bem.elem('label') { 43 @include bem.elem('label') {
44 flex: 0 0 auto; 44 flex: 0 0 auto;
45 } 45 }
46 46
47 @include bem.modifier('vertical') { 47 @include bem.modifier('vertical') {
48 align-self: stretch; 48 align-self: stretch;
49 inline-size: 1px; 49 inline-size: props.get(vars.$vertical--border-width);
50 block-size: auto; 50 block-size: auto;
51 margin-block: 0; 51 margin-block: 0;
52 background-color: props.get(vars.$faint--bg-color); 52 background-color: props.get(vars.$strong--bg-color);
53 53
54 &::before, 54 &::before,
55 &::after { 55 &::after {
56 display: none; 56 display: none;
57 } 57 }
58 } 58 }
59 59
60 @include bem.modifier('medium') { 60 @include bem.modifier('dot') {
61 font-size: props.get(vars.$medium--label-font-size); 61 align-self: center;
62 font-weight: 500; 62 inline-size: props.get(vars.$dot--size);
63 color: props.get(vars.$medium--label-color); 63 block-size: props.get(vars.$dot--size);
64 margin-block: 0;
65 background-color: props.get(vars.$strong--bg-color);
66 border-radius: props.get(vars.$dot--size);
64 67
65 &::before, 68 &::before,
66 &::after { 69 &::after {
67 block-size: props.get(vars.$medium--border-width); 70 display: none;
68 background-color: props.get(vars.$medium--bg-color); 71 }
69 } 72 }
70 }
71 73
72 @include bem.modifier('faint') { 74 @include bem.modifier('medium') {
73 font-size: props.get(vars.$faint--label-font-size); 75 font-size: props.get(vars.$medium--label-font-size);
74 font-weight: 500; 76 font-weight: 500;
75 color: props.get(vars.$faint--label-color); 77 color: props.get(vars.$medium--label-color);
76 78
77 &::before, 79 &::before,
78 &::after { 80 &::after {
79 block-size: props.get(vars.$faint--border-width); 81 block-size: props.get(vars.$medium--border-width);
80 background-color: props.get(vars.$faint--bg-color); 82 background-color: props.get(vars.$medium--bg-color);
81 } 83 }
82 84
83 @include bem.modifier('vertical') { 85 @include bem.modifier('vertical') {
84 background-color: props.get(vars.$vertical--faint--bg-color); 86 background-color: props.get(vars.$medium--bg-color);
85 } 87 }
86 }
87 88
88 @include bem.modifier('labelled') { 89 @include bem.modifier('dot') {
89 &::before { 90 background-color: props.get(vars.$medium--bg-color);
90 margin-inline-end: 1em; 91 }
91 } 92 }
92 93
93 &::after { 94 @include bem.modifier('quiet') {
94 display: block; 95 font-size: props.get(vars.$quiet--label-font-size);
95 margin-inline-start: 1em; 96 font-weight: 500;
96 } 97 color: props.get(vars.$quiet--label-color);
97 }
98 98
99 @each $theme in map.keys(props.get(vars.$themes)) { 99 &::before,
100 @include bem.modifier(string.slice($theme, 3)) { 100 &::after {
101 &::before, 101 block-size: props.get(vars.$quiet--border-width);
102 &::after { 102 background-color: props.get(vars.$quiet--bg-color);
103 background-color: props.get(vars.$themes, $theme, --bg); 103 }
104 }
105 104
106 @include bem.elem('label') { 105 @include bem.modifier('vertical') {
107 color: props.get(vars.$themes, $theme, --label); 106 background-color: props.get(vars.$vertical--quiet--bg-color);
108 } 107 }
109 }
110 }
111 108
112 @each $theme in map.keys(props.get(vars.$static-themes)) { 109 @include bem.modifier('dot') {
113 @include bem.modifier(string.slice($theme, 3)) { 110 background-color: props.get(vars.$dot--quiet--bg-color);
114 &::before, 111 }
115 &::after { 112 }
116 background-color: props.get(vars.$static-themes, $theme, --strong, --bg);
117 }
118 113
119 @include bem.elem('label') { 114 @include bem.modifier('faint') {
120 color: props.get(vars.$static-themes, $theme, --strong, --label); 115 font-size: props.get(vars.$faint--label-font-size);
121 } 116 font-weight: 500;
117 color: props.get(vars.$faint--label-color);
122 118
123 @include bem.modifier('medium') { 119 &::before,
124 &::before, 120 &::after {
125 &::after { 121 block-size: props.get(vars.$faint--border-width);
126 background-color: props.get(vars.$static-themes, $theme, --medium, --bg); 122 background-color: props.get(vars.$faint--bg-color);
127 } 123 }
124
125 @include bem.modifier('vertical') {
126 background-color: props.get(vars.$vertical--quiet--bg-color);
127 }
128
129 @include bem.modifier('dot') {
130 background-color: props.get(vars.$dot--quiet--bg-color);
131 }
132 }
133
134 @include bem.modifier('labelled') {
135 &::before {
136 margin-inline-end: 1em;
137 }
138
139 &::after {
140 display: block;
141 margin-inline-start: 1em;
142 }
143 }
144
145 @each $theme in map.keys(props.get(vars.$themes)) {
146 @include bem.modifier(string.slice($theme, 3)) {
147 &::before,
148 &::after {
149 background-color: props.get(vars.$themes, $theme, --bg);
150 }
151
152 @include bem.elem('label') {
153 color: props.get(vars.$themes, $theme, --label);
154 }
155 }
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 }
128 185
129 @include bem.elem('label') { 186 @include bem.elem('label') {
130 color: props.get(vars.$static-themes, $theme, --medium, --label); 187 color: props.get(vars.$static-themes, $theme, --quiet, --label);
131 } 188 }
132 } 189 }
133 190
134 @include bem.modifier('faint') { 191 @include bem.modifier('faint') {
135 &::before, 192 &::before,
136 &::after { 193 &::after {
137 background-color: props.get(vars.$static-themes, $theme, --faint, --bg); 194 background-color: props.get(vars.$static-themes, $theme, --faint, --bg);
138 } 195 }
139 196
140 @include bem.elem('label') { 197 @include bem.elem('label') {
141 color: props.get(vars.$static-themes, $theme, --faint, --label); 198 color: props.get(vars.$static-themes, $theme, --faint, --label);
142 } 199 }
143 } 200 }
144 } 201 }
145 } 202 }
146 } 203 }
147} 204}
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
index 1117fd5..688fbb3 100644
--- a/src/objects/_divider.vars.scss
+++ b/src/objects/_divider.vars.scss
@@ -3,7 +3,9 @@
3@use 'iro-sass/src/props'; 3@use 'iro-sass/src/props';
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
6$margin-b: props.def(--o-divider--size, props.get(core.$size--85)) !default; 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;
7 9
8$strong--border-width: props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default; 10$strong--border-width: props.def(--o-divider--strong--border-width, props.get(core.$border-width--thick)) !default;
9$strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default; 11$strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.get(core.$font-size--100)) !default;
@@ -11,6 +13,9 @@ $strong--label-font-size: props.def(--o-divider--strong--label-font-size, props.
11$medium--border-width: props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default; 13$medium--border-width: props.def(--o-divider--medium--border-width, props.get(core.$border-width--medium)) !default;
12$medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default; 14$medium--label-font-size: props.def(--o-divider--medium--label-font-size, props.get(core.$font-size--75)) !default;
13 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
14$faint--border-width: props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default; 19$faint--border-width: props.def(--o-divider--faint--border-width, props.get(core.$border-width--thin)) !default;
15$faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default; 20$faint--label-font-size: props.def(--o-divider--faint--label-font-size, props.get(core.$font-size--50)) !default;
16 21
@@ -20,46 +25,55 @@ $strong--label-color: props.def(--o-divider--strong--label-color, props.get(core
20$medium--bg-color: props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border), 'color') !default; 25$medium--bg-color: props.def(--o-divider--medium--bg-color, props.get(core.$theme, --border), 'color') !default;
21$medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute), 'color') !default; 26$medium--label-color: props.def(--o-divider--medium--label-color, props.get(core.$theme, --text-mute), 'color') !default;
22 27
23$faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border), 'color') !default; 28$quiet--bg-color: props.def(--o-divider--quiet--bg-color, props.get(core.$theme, --border), 'color') !default;
24$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more), '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;
25 35
26$vertical--faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; 36$dot--quiet--bg-color: props.def(--o-divider--dot--quiet--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
27 37
28$static-themes: props.def(--o-divider, (), 'color'); 38$static-themes: props.def(--o-divider, (), 'color');
29 39
30@each $theme in map.keys(props.get(core.$transparent-colors)) { 40@each $theme in map.keys(props.get(core.$transparent-colors)) {
31 $button-theme: --static-#{string.slice($theme, 3)}; 41 $button-theme: --static-#{string.slice($theme, 3)};
32 42
33 $static-themes: props.merge($static-themes, ( 43 $static-themes: props.merge($static-themes, (
34 $button-theme: ( 44 $button-theme: (
35 --strong: ( 45 --strong: (
36 --bg: props.get(core.$transparent-colors, $theme, --800), 46 --bg: props.get(core.$transparent-colors, $theme, --800),
37 --label: props.get(core.$transparent-colors, $theme, --900), 47 --label: props.get(core.$transparent-colors, $theme, --900),
38 ), 48 ),
39 --medium: ( 49 --medium: (
40 --bg: props.get(core.$transparent-colors, $theme, --300), 50 --bg: props.get(core.$transparent-colors, $theme, --300),
41 --label: props.get(core.$transparent-colors, $theme, --500), 51 --label: props.get(core.$transparent-colors, $theme, --500),
42 ), 52 ),
43 --faint: ( 53 --quiet: (
44 --bg: props.get(core.$transparent-colors, $theme, --300), 54 --bg: props.get(core.$transparent-colors, $theme, --300),
45 --label: props.get(core.$transparent-colors, $theme, --500), 55 --label: props.get(core.$transparent-colors, $theme, --500),
46 ), 56 ),
47 ) 57 --faint: (
48 )); 58 --bg: props.get(core.$transparent-colors, $theme, --200),
59 --label: props.get(core.$transparent-colors, $theme, --400),
60 ),
61 )
62 ));
49} 63}
50 64
51$themes-config: ( 65$themes-config: (
52 accent: --accent, 66 accent: --accent,
53 negative: --negative, 67 negative: --negative,
54) !default; 68) !default;
55 69
56$themes: props.def(--o-divider, (), 'color'); 70$themes: props.def(--o-divider, (), 'color');
57 71
58@each $theme, $key in $themes-config { 72@each $theme, $key in $themes-config {
59 $themes: props.merge($themes, ( 73 $themes: props.merge($themes, (
60 --#{$theme}: ( 74 --#{$theme}: (
61 --bg: props.get(core.$theme, $key, --800), 75 --bg: props.get(core.$theme, $key, --800),
62 --label: props.get(core.$theme, $key, --1000), 76 --label: props.get(core.$theme, $key, --1000),
63 ) 77 )
64 )); 78 ));
65} 79}
diff --git a/src/objects/_emoji.scss b/src/objects/_emoji.scss
index ce2dfa7..fd36535 100644
--- a/src/objects/_emoji.scss
+++ b/src/objects/_emoji.scss
@@ -8,43 +8,43 @@
8@use 'emoji.vars' as vars; 8@use 'emoji.vars' as vars;
9 9
10@mixin styles { 10@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars')); 11 @include materialize-at-root(meta.module-variables('vars'));
12 12
13 @include bem.object('emoji') { 13 @include bem.object('emoji') {
14 position: relative; 14 position: relative;
15 display: inline-block; 15 display: inline-block;
16 inline-size: calc(props.get(vars.$size)); 16 inline-size: calc(props.get(vars.$size));
17 block-size: calc(props.get(vars.$size)); 17 block-size: calc(props.get(vars.$size));
18 padding: calc(props.get(vars.$pad)); 18 padding: calc(props.get(vars.$pad));
19 margin: calc(-1 * props.get(vars.$pad)); 19 margin: calc(-1 * props.get(vars.$pad));
20 vertical-align: props.get(vars.$valign); 20 vertical-align: props.get(vars.$valign);
21 object-fit: contain; 21 object-fit: contain;
22 22
23 @include bem.modifier('icon') { 23 @include bem.modifier('icon') {
24 margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get(vars.$size) - props.get(icon.$size))); 24 margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get(vars.$size) - props.get(icon.$size)));
25 vertical-align: props.get(icon.$valign); 25 vertical-align: props.get(icon.$valign);
26 } 26 }
27 27
28 @each $mod, $size, $valign in vars.$sizes { 28 @each $mod, $size, $valign in vars.$sizes {
29 @include bem.modifier($mod) { 29 @include bem.modifier($mod) {
30 inline-size: props.get($size); 30 inline-size: props.get($size);
31 block-size: props.get($size); 31 block-size: props.get($size);
32 vertical-align: props.get($valign); 32 vertical-align: props.get($valign);
33 33
34 @include bem.modifier('icon') { 34 @include bem.modifier('icon') {
35 margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size))); 35 margin: calc(-1 * props.get(vars.$pad) - .5 * (props.get($size) - props.get(icon.$size)));
36 } 36 }
37 } 37 }
38 } 38 }
39 39
40 @include bem.modifier('zoomable') { 40 @include bem.modifier('zoomable') {
41 border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom)); 41 border-radius: calc(props.get(vars.$rounding) / props.get(vars.$zoom));
42 transition: transform .2s ease, background-color .2s ease; 42 transition: transform .2s ease, background-color .2s ease;
43 43
44 &:hover { 44 &:hover {
45 background-color: props.get(vars.$bg-color); 45 background-color: props.get(vars.$bg-color);
46 transform: scale(props.get(vars.$zoom)); 46 transform: scale(props.get(vars.$zoom));
47 } 47 }
48 } 48 }
49 } 49 }
50} 50}
diff --git a/src/objects/_emoji.vars.scss b/src/objects/_emoji.vars.scss
index fbfb935..b7a8a43 100644
--- a/src/objects/_emoji.vars.scss
+++ b/src/objects/_emoji.vars.scss
@@ -4,7 +4,7 @@
4 4
5$size: props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default; 5$size: props.def(--o-emoji--size, calc(1 / 14 * 18em)) !default;
6$pad: props.def(--o-emoji--pad, .3em) !default; 6$pad: props.def(--o-emoji--pad, .3em) !default;
7$rounding: props.def(--o-emoji--rounding, props.get(core.$rounding)) !default; 7$rounding: props.def(--o-emoji--rounding, props.get(core.$rounding--sm)) !default;
8$zoom: props.def(--o-emoji--zoom, 3) !default; 8$zoom: props.def(--o-emoji--zoom, 3) !default;
9$valign: props.def(--o-emoji--valign, -.25em) !default; 9$valign: props.def(--o-emoji--valign, -.25em) !default;
10 10
@@ -18,9 +18,9 @@ $size--200: props.def(--o-emoji--200--size, calc(1 / 14 * 38em)) !default;
18$valign--200: props.def(--o-emoji--200--valign, -1em) !default; 18$valign--200: props.def(--o-emoji--200--valign, -1em) !default;
19 19
20$sizes: ( 20$sizes: (
21 '125' $size--125 $valign--125, 21 '125' $size--125 $valign--125,
22 '150' $size--150 $valign--150, 22 '150' $size--150 $valign--150,
23 '200' $size--200 $valign--200, 23 '200' $size--200 $valign--200,
24) !default; 24) !default;
25 25
26$bg-color: props.def(--o-emoji--bg-color, props.get(core.$theme, --border-mute), 'color') !default; 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 564ab2b..aa12eb5 100644
--- a/src/objects/_field-label.scss
+++ b/src/objects/_field-label.scss
@@ -7,70 +7,70 @@
7@use 'field-label.vars' as vars; 7@use 'field-label.vars' as vars;
8 8
9@mixin styles { 9@mixin styles {
10 @include materialize-at-root(meta.module-variables('vars')); 10 @include materialize-at-root(meta.module-variables('vars'));
11 11
12 @include bem.object('field-label') { 12 @include bem.object('field-label') {
13 @include bem.elem('label') { 13 @include bem.elem('label') {
14 display: block; 14 display: block;
15 flex: 0 0 auto; 15 flex: 0 0 auto;
16 padding-inline-end: props.get(vars.$spacing-i); 16 padding-inline-end: props.get(vars.$spacing-i);
17 font-size: props.get(vars.$label-font-size); 17 font-size: props.get(vars.$label-font-size);
18 font-weight: 400; 18 font-weight: 400;
19 line-height: 1.3; 19 line-height: 1.3;
20 color: props.get(vars.$label-color); 20 color: props.get(vars.$label-color);
21 21
22 @include bem.next-elem('content') { 22 @include bem.next-elem('content') {
23 margin-block-start: props.get(vars.$spacing-b); 23 margin-block-start: props.get(vars.$spacing-b);
24 } 24 }
25 } 25 }
26 26
27 @include bem.elem('content') { 27 @include bem.elem('content') {
28 display: block; 28 display: block;
29 flex: 1 1 auto; 29 flex: 1 1 auto;
30 } 30 }
31 31
32 @include bem.elem('hint') { 32 @include bem.elem('hint') {
33 display: block; 33 display: block;
34 margin-block-start: props.get(vars.$spacing-b); 34 margin-block-start: props.get(vars.$spacing-b);
35 font-size: props.get(vars.$hint-font-size); 35 font-size: props.get(vars.$hint-font-size);
36 color: props.get(vars.$hint-color); 36 color: props.get(vars.$hint-color);
37 } 37 }
38 38
39 @include bem.is('invalid') { 39 @include bem.is('invalid') {
40 @include bem.elem('hint') { 40 @include bem.elem('hint') {
41 color: props.get(vars.$error-hint-color); 41 color: props.get(vars.$error-hint-color);
42 } 42 }
43 } 43 }
44 44
45 @include bem.is('disabled') { 45 @include bem.is('disabled') {
46 @include bem.elem('label', 'hint') { 46 @include bem.elem('label', 'hint') {
47 color: props.get(vars.$disabled-color); 47 color: props.get(vars.$disabled-color);
48 } 48 }
49 } 49 }
50 50
51 @include bem.modifier('align-start', 'align-end') { 51 @include bem.modifier('align-start', 'align-end') {
52 display: flex; 52 display: flex;
53 align-items: baseline; 53 align-items: baseline;
54 54
55 @include bem.elem('label') { 55 @include bem.elem('label') {
56 display: inline-block; 56 display: inline-block;
57 57
58 @include bem.next-elem('content') { 58 @include bem.next-elem('content') {
59 margin-block-start: 0; 59 margin-block-start: 0;
60 } 60 }
61 } 61 }
62 } 62 }
63 63
64 @include bem.modifier('align-start') { 64 @include bem.modifier('align-start') {
65 @include bem.elem('label') { 65 @include bem.elem('label') {
66 text-align: start; 66 text-align: start;
67 } 67 }
68 } 68 }
69 69
70 @include bem.modifier('align-end') { 70 @include bem.modifier('align-end') {
71 @include bem.elem('label') { 71 @include bem.elem('label') {
72 text-align: end; 72 text-align: end;
73 } 73 }
74 } 74 }
75 } 75 }
76} 76}
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 f5932f5..d27b595 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -7,54 +7,54 @@
7@use 'heading.vars' as vars; 7@use 'heading.vars' as vars;
8 8
9@mixin styles { 9@mixin styles {
10 @include materialize-at-root(meta.module-variables('vars')); 10 @include materialize-at-root(meta.module-variables('vars'));
11 11
12 @include bem.object('heading') { 12 @include bem.object('heading') {
13 display: block; 13 display: block;
14 margin-block-start: props.get(vars.$margin-bs); 14 margin-block-start: props.get(vars.$margin-bs);
15 font-family: props.get(vars.$font-family); 15 font-family: props.get(vars.$font-family);
16 font-weight: props.get(vars.$font-weight); 16 font-weight: props.get(vars.$font-weight);
17 font-feature-settings: props.get(vars.$feature-settings); 17 font-feature-settings: props.get(vars.$feature-settings);
18 line-height: props.get(vars.$line-height); 18 line-height: props.get(vars.$line-height);
19 color: props.get(vars.$text-color); 19 color: props.get(vars.$text-color);
20 text-transform: none; 20 text-transform: none;
21 letter-spacing: normal; 21 letter-spacing: normal;
22 transform: translateX(props.get(vars.$offset));
23 22
24 & + & { 23 & + & {
25 margin-block-start: props.get(vars.$margin-bs-sibling); 24 margin-block-start: props.get(vars.$margin-bs-sibling);
26 } 25 }
27 26
28 @include bem.elem('highlight') { 27 @include bem.elem('highlight') {
29 background-image: linear-gradient(to top, 28 background-image: linear-gradient(to top,
30 transparent .05em, 29 transparent .05em,
31 props.get(vars.$bg-color) .05em, 30 props.get(vars.$bg-color) .05em,
32 props.get(vars.$bg-color) .5em, 31 props.get(vars.$bg-color) .5em,
33 transparent .5em); 32 transparent .5em);
34 } 33 }
35 34
36 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$sizes { 35 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$sizes {
37 @include bem.modifier($mod) { 36 @include bem.modifier($mod) {
38 font-family: props.get($font-family); 37 font-family: props.get($font-family);
39 font-size: props.get($font-size); 38 font-size: props.get($font-size);
40 font-weight: props.get($font-weight); 39 font-weight: props.get($font-weight);
41 font-feature-settings: props.get($feature-settings); 40 font-feature-settings: props.get($feature-settings);
42 line-height: props.get($line-height); 41 line-height: props.get($line-height);
43 letter-spacing: props.get($letter-spacing); 42 letter-spacing: props.get($letter-spacing);
44 } 43 }
45 } 44 }
46 45
47 @include bem.modifier('display') { 46 @include bem.modifier('display') {
48 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$display--sizes { 47 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in vars.$display--sizes {
49 @include bem.modifier($mod) { 48 @include bem.modifier($mod) {
50 font-family: props.get($font-family); 49 font-family: props.get($font-family);
51 font-size: props.get($font-size); 50 font-size: props.get($font-size);
52 font-weight: props.get($font-weight); 51 font-weight: props.get($font-weight);
53 font-feature-settings: props.get($feature-settings); 52 font-feature-settings: props.get($feature-settings);
54 line-height: props.get($line-height); 53 line-height: props.get($line-height);
55 letter-spacing: props.get($letter-spacing); 54 letter-spacing: props.get($letter-spacing);
56 } 55 transform: translateX(props.get(vars.$offset));
57 } 56 }
58 } 57 }
59 } 58 }
59 }
60} 60}
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss
index 90278c8..1d6df26 100644
--- a/src/objects/_heading.vars.scss
+++ b/src/objects/_heading.vars.scss
@@ -56,12 +56,12 @@ $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; 56$feature-settings--xs: props.def(--o-heading--xs--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
57 57
58$sizes: ( 58$sizes: (
59 'xs' $font-family--xs $line-height--xs $font-size--xs $font-weight--xs $letter-spacing--xs $feature-settings--xs, 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, 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, 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, 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, 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, 64 'xxl' $font-family--xxl $line-height--xxl $font-size--xxl $font-weight--xxl $letter-spacing--xxl $feature-settings--xxl,
65) !default; 65) !default;
66 66
67$display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default; 67$display--font-family--xxl: props.def(--o-heading--display--xxl--font-family, props.get(core.$font--headline--family)) !default;
@@ -114,10 +114,10 @@ $display--font-size--sm--md: props.def(--o-heading--display--sm--font-size, pro
114$display--font-size--xs--md: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50), '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 115
116$display--sizes: ( 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, 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, 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, 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, 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, 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, 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; 123) !default;
diff --git a/src/objects/_icon.scss b/src/objects/_icon.scss
index 187938e..1941960 100644
--- a/src/objects/_icon.scss
+++ b/src/objects/_icon.scss
@@ -7,19 +7,19 @@
7@use 'icon.vars' as vars; 7@use 'icon.vars' as vars;
8 8
9@mixin styles { 9@mixin styles {
10 @include materialize-at-root(meta.module-variables('vars')); 10 @include materialize-at-root(meta.module-variables('vars'));
11 11
12 @include bem.object('icon') { 12 @include bem.object('icon') {
13 display: inline; 13 display: inline;
14 inline-size: props.get(vars.$size); 14 inline-size: props.get(vars.$size);
15 block-size: props.get(vars.$size); 15 block-size: props.get(vars.$size);
16 vertical-align: props.get(vars.$valign); 16 vertical-align: props.get(vars.$valign);
17 stroke-linecap: round; 17 stroke-width: props.get(vars.$stroke-width);
18 stroke-linejoin: round; 18 stroke-linecap: round;
19 stroke-width: props.get(vars.$stroke-width); 19 stroke-linejoin: round;
20 20
21 @include bem.modifier('block') { 21 @include bem.modifier('block') {
22 display: block; 22 display: block;
23 } 23 }
24 } 24 }
25} 25}
diff --git a/src/objects/_lightbox.scss b/src/objects/_lightbox.scss
index b62c353..b95148f 100644
--- a/src/objects/_lightbox.scss
+++ b/src/objects/_lightbox.scss
@@ -9,127 +9,127 @@
9@use 'lightbox.vars' as vars; 9@use 'lightbox.vars' as vars;
10 10
11@mixin styles { 11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars')); 12 @include materialize-at-root(meta.module-variables('vars'));
13 13
14 @include bem.object('lightbox') { 14 @include bem.object('lightbox') {
15 flex: 1 1 auto; 15 flex: 1 1 auto;
16 min-block-size: 0; 16 min-block-size: 0;
17 17
18 @include bem.elem('header') { 18 @include bem.elem('header') {
19 display: flex; 19 display: flex;
20 grid-area: header; 20 grid-area: header;
21 align-items: flex-start; 21 align-items: flex-start;
22 padding-block-start: props.get(vars.$pad); 22 padding-block-start: props.get(vars.$pad);
23 padding-inline: props.get(vars.$pad); 23 padding-inline: props.get(vars.$pad);
24 } 24 }
25 25
26 @include bem.elem('img') { 26 @include bem.elem('img') {
27 box-sizing: border-box; 27 box-sizing: border-box;
28 display: block; 28 display: block;
29 grid-area: content; 29 grid-area: content;
30 place-self: center; 30 place-self: center;
31 inline-size: auto; 31 inline-size: auto;
32 max-inline-size: 100%; 32 max-inline-size: 100%;
33 block-size: auto; 33 block-size: auto;
34 max-block-size: props.get(vars.$image--max-height); 34 max-block-size: props.get(vars.$image--max-height);
35 padding: props.get(vars.$pad); 35 padding: props.get(vars.$pad);
36 margin-inline: auto; 36 margin-inline: auto;
37 border-radius: calc(props.get(vars.$pad) + props.get(vars.$image--border-radius)); 37 border-radius: calc(props.get(vars.$pad) + props.get(vars.$image--border-radius));
38 } 38 }
39 39
40 @include bem.elem('thumbnails') { 40 @include bem.elem('thumbnails') {
41 display: none; 41 display: none;
42 grid-area: thumbnails; 42 grid-area: thumbnails;
43 gap: props.get(vars.$thumbnails--spacing); 43 gap: props.get(vars.$thumbnails--spacing);
44 padding: props.get(vars.$pad); 44 padding: props.get(vars.$pad);
45 margin-block-start: calc(-1 * props.get(vars.$pad)); 45 margin-block-start: calc(-1 * props.get(vars.$pad));
46 overflow: auto; 46 overflow: auto;
47 } 47 }
48 48
49 @include bem.elem('close-btn') { 49 @include bem.elem('close-btn') {
50 display: none; 50 display: none;
51 flex: 0 0 auto; 51 flex: 0 0 auto;
52 margin-block-start: calc(-.5 * props.get(vars.$pad)); 52 margin-block-start: calc(-.5 * props.get(vars.$pad));
53 margin-inline: auto calc(-.5 * props.get(vars.$pad)); 53 margin-inline: auto calc(-.5 * props.get(vars.$pad));
54 font-size: props.get(vars.$close-button--font-size); 54 font-size: props.get(vars.$close-button--font-size);
55 } 55 }
56 56
57 @include bem.elem('nav-btn') { 57 @include bem.elem('nav-btn') {
58 position: relative; 58 position: relative;
59 display: none; 59 display: none;
60 align-self: center; 60 align-self: center;
61 overflow: visible; 61 overflow: visible;
62 font-size: props.get(vars.$nav-button--font-size); 62 font-size: props.get(vars.$nav-button--font-size);
63 63
64 &::before { 64 &::before {
65 position: absolute; 65 position: absolute;
66 inset-block-start: 50%; 66 inset-block-start: 50%;
67 display: block; 67 display: block;
68 inline-size: props.get(vars.$nav-button--inline-size); 68 inline-size: props.get(vars.$nav-button--inline-size);
69 block-size: props.get(vars.$nav-button--block-size); 69 block-size: props.get(vars.$nav-button--block-size);
70 content: ''; 70 content: '';
71 transform: translateY(-50%); 71 transform: translateY(-50%);
72 } 72 }
73 73
74 @include bem.modifier('prev') { 74 @include bem.modifier('prev') {
75 grid-area: prev; 75 grid-area: prev;
76 margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad)); 76 margin-inline: calc(.5 * props.get(vars.$pad)) calc(-1 * props.get(vars.$pad));
77 77
78 &::before { 78 &::before {
79 inset-inline-start: 0; 79 inset-inline-start: 0;
80 } 80 }
81 } 81 }
82 82
83 @include bem.modifier('next') { 83 @include bem.modifier('next') {
84 grid-area: next; 84 grid-area: next;
85 margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad)); 85 margin-inline: calc(-1 * props.get(vars.$pad)) calc(.5 * props.get(vars.$pad));
86 86
87 &::before { 87 &::before {
88 inset-inline-end: 0; 88 inset-inline-end: 0;
89 } 89 }
90 } 90 }
91 } 91 }
92 92
93 @include bem.modifier('interactive') { 93 @include bem.modifier('interactive') {
94 display: grid; 94 display: grid;
95 grid-template-areas: 95 grid-template-areas:
96 'header header header' 96 'header header header'
97 'prev content next' 97 'prev content next'
98 'thumbnails thumbnails thumbnails'; 98 'thumbnails thumbnails thumbnails';
99 grid-template-rows: auto minmax(0, 1fr) auto auto; 99 grid-template-rows: auto minmax(0, 1fr) auto auto;
100 grid-template-columns: auto minmax(0, 1fr) auto; 100 grid-template-columns: auto minmax(0, 1fr) auto;
101 101
102 @include bem.modifier('fullscreen') { 102 @include bem.modifier('fullscreen') {
103 block-size: props.get(vars.$fullscreen--height); 103 block-size: props.get(vars.$fullscreen--height);
104 } 104 }
105 105
106 @include bem.elem('img') { 106 @include bem.elem('img') {
107 display: none; 107 display: none;
108 max-block-size: 100%; 108 max-block-size: 100%;
109 margin-inline: 0; 109 margin-inline: 0;
110 110
111 @include bem.multi('&:target', 'is' 'visible') { 111 @include bem.multi('&:target', 'is' 'visible') {
112 display: block; 112 display: block;
113 } 113 }
114 } 114 }
115 115
116 @include bem.elem('thumbnails') { 116 @include bem.elem('thumbnails') {
117 display: flex; 117 display: flex;
118 } 118 }
119 119
120 @include bem.elem('close-btn') { 120 @include bem.elem('close-btn') {
121 display: block; 121 display: block;
122 } 122 }
123 123
124 @include bem.elem('nav-btn') { 124 @include bem.elem('nav-btn') {
125 display: block; 125 display: block;
126 } 126 }
127 } 127 }
128 128
129 @each $theme in map.keys(props.get(vars.$static-themes)) { 129 @each $theme in map.keys(props.get(vars.$static-themes)) {
130 @include bem.modifier(string.slice($theme, 3)) { 130 @include bem.modifier(string.slice($theme, 3)) {
131 color: props.get(vars.$static-themes, $theme, --text); 131 color: props.get(vars.$static-themes, $theme, --text);
132 } 132 }
133 } 133 }
134 } 134 }
135} 135}
diff --git a/src/objects/_lightbox.vars.scss b/src/objects/_lightbox.vars.scss
index cc926e4..6d22aa8 100644
--- a/src/objects/_lightbox.vars.scss
+++ b/src/objects/_lightbox.vars.scss
@@ -23,11 +23,11 @@ $thumbnails--spacing: props.def(--o-lightbox--thumbnails--spacing, props.get(cor
23$static-themes: props.def(--o-lightbox, (), 'color'); 23$static-themes: props.def(--o-lightbox, (), 'color');
24 24
25@each $theme in map.keys(props.get(core.$transparent-colors)) { 25@each $theme in map.keys(props.get(core.$transparent-colors)) {
26 $lightbox-theme: --static-#{string.slice($theme, 3)}; 26 $lightbox-theme: --static-#{string.slice($theme, 3)};
27 27
28 $static-themes: props.merge($static-themes, ( 28 $static-themes: props.merge($static-themes, (
29 $lightbox-theme: ( 29 $lightbox-theme: (
30 --text: props.get(core.$transparent-colors, $theme, --800), 30 --text: props.get(core.$transparent-colors, $theme, --800),
31 ) 31 )
32 )); 32 ));
33} 33}
diff --git a/src/objects/_menu.scss b/src/objects/_menu.scss
index 4d31874..f370067 100644
--- a/src/objects/_menu.scss
+++ b/src/objects/_menu.scss
@@ -8,95 +8,95 @@
8@use 'menu.vars' as vars; 8@use 'menu.vars' as vars;
9 9
10@mixin styles { 10@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars')); 11 @include materialize-at-root(meta.module-variables('vars'));
12 12
13 @include bem.object('menu') { 13 @include bem.object('menu') {
14 display: flex; 14 display: flex;
15 flex-direction: column; 15 flex-direction: column;
16 gap: props.get(vars.$spacing); 16 gap: props.get(vars.$spacing);
17 17
18 @include bem.elem('header') { 18 @include bem.elem('header') {
19 padding-block: props.get(vars.$item--pad-b); 19 padding-block: props.get(vars.$item--pad-b);
20 padding-inline: props.get(vars.$item--pad-i); 20 padding-inline: props.get(vars.$item--pad-i);
21 font-size: props.get(vars.$header--font-size); 21 font-size: props.get(vars.$header--font-size);
22 font-weight: 500; 22 font-weight: 500;
23 color: props.get(vars.$header--label-color); 23 color: props.get(vars.$header--label-color);
24 text-transform: uppercase; 24 text-transform: uppercase;
25 letter-spacing: .5px; 25 letter-spacing: .5px;
26 26
27 @include bem.next-twin-elem { 27 @include bem.next-twin-elem {
28 margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); 28 margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing));
29 } 29 }
30 } 30 }
31 31
32 @include bem.elem('item') { 32 @include bem.elem('item') {
33 padding-block: props.get(vars.$item--pad-b); 33 padding-block: props.get(vars.$item--pad-b);
34 padding-inline: props.get(vars.$item--pad-i); 34 padding-inline: props.get(vars.$item--pad-i);
35 margin: calc(-1 * props.get(vars.$item--key-focus--outline-width)); 35 margin: calc(-1 * props.get(vars.$item--key-focus--outline-width));
36 color: props.get(vars.$item--disabled--label-color); 36 color: props.get(vars.$item--disabled--label-color);
37 background-clip: padding-box; 37 background-clip: padding-box;
38 border: props.get(vars.$item--key-focus--outline-width) solid transparent; 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)); 39 border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--outline-width));
40 40
41 &:link, 41 &:link,
42 &:visited, 42 &:visited,
43 &:enabled { 43 &:enabled {
44 color: currentColor; 44 color: currentColor;
45 45
46 @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') { 46 @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') {
47 color: props.get(vars.$item--hover--label-color); 47 color: props.get(vars.$item--hover--label-color);
48 background-color: props.get(vars.$item--hover--bg-color); 48 background-color: props.get(vars.$item--hover--bg-color);
49 } 49 }
50 50
51 &:active { 51 &:active {
52 color: props.get(vars.$item--active--label-color); 52 color: props.get(vars.$item--active--label-color);
53 background-color: props.get(vars.$item--active--bg-color); 53 background-color: props.get(vars.$item--active--bg-color);
54 } 54 }
55 55
56 &:focus-visible { 56 &:focus-visible {
57 outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); 57 outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width);
58 box-shadow: 58 box-shadow:
59 0 59 0
60 0 60 0
61 0 61 0
62 calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) 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); 63 props.get(vars.$item--key-focus--outline-color);
64 } 64 }
65 } 65 }
66 66
67 @include bem.next-elem('header') { 67 @include bem.next-elem('header') {
68 margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing)); 68 margin-block-start: calc(props.get(vars.$separator-width) + props.get(vars.$spacing));
69 } 69 }
70 } 70 }
71 71
72 @include bem.elem('header') { 72 @include bem.elem('header') {
73 &:link, 73 &:link,
74 &:visited, 74 &:visited,
75 &:enabled { 75 &:enabled {
76 color: props.get(vars.$header--label-color); 76 color: props.get(vars.$header--label-color);
77 } 77 }
78 } 78 }
79 79
80 @include bem.elem('separator') { 80 @include bem.elem('separator') {
81 block-size: 1px; 81 block-size: 1px;
82 margin-block: props.get(vars.$separator-width); 82 margin-block: props.get(vars.$separator-width);
83 margin-inline: props.get(vars.$item--pad-i); 83 margin-inline: props.get(vars.$item--pad-i);
84 background-color: props.get(vars.$separator-color); 84 background-color: props.get(vars.$separator-color);
85 } 85 }
86 86
87 @include bem.elem('slot') { 87 @include bem.elem('slot') {
88 padding-block: props.get(vars.$item--pad-b); 88 padding-block: props.get(vars.$item--pad-b);
89 padding-inline: props.get(vars.$item--pad-i); 89 padding-inline: props.get(vars.$item--pad-i);
90 } 90 }
91 91
92 @include bem.elem('icon-slot') { 92 @include bem.elem('icon-slot') {
93 display: flex; 93 display: flex;
94 justify-content: center; 94 justify-content: center;
95 inline-size: props.get(icon.$size); 95 inline-size: props.get(icon.$size);
96 } 96 }
97 97
98 @include bem.modifier('pull') { 98 @include bem.modifier('pull') {
99 margin: calc(-1 * props.get(vars.$item--pad-i)); 99 margin: calc(-1 * props.get(vars.$item--pad-i));
100 } 100 }
101 } 101 }
102} 102}
diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss
index 59d4c51..ec03c62 100644
--- a/src/objects/_navbar.scss
+++ b/src/objects/_navbar.scss
@@ -9,183 +9,183 @@
9@use 'navbar.vars' as vars; 9@use 'navbar.vars' as vars;
10 10
11@mixin styles { 11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars')); 12 @include materialize-at-root(meta.module-variables('vars'));
13 13
14 @include bem.object('navbar') { 14 @include bem.object('navbar') {
15 display: flex; 15 display: flex;
16 block-size: props.get(vars.$block-size); 16 block-size: props.get(vars.$block-size);
17 17
18 @include bem.elem('item-content-text') { 18 @include bem.elem('item-content-text') {
19 margin-inline: props.get(vars.$item--pad-i-label); 19 margin-inline: props.get(vars.$item--pad-i-label);
20 } 20 }
21 21
22 @include bem.elem('item-content') { 22 @include bem.elem('item-content') {
23 position: relative; 23 position: relative;
24 padding-block: props.get(vars.$item--pad-b); 24 padding-block: props.get(vars.$item--pad-b);
25 padding-inline: props.get(vars.$item--pad-i); 25 padding-inline: props.get(vars.$item--pad-i);
26 font-size: props.get(vars.$item--font-size); 26 font-size: props.get(vars.$item--font-size);
27 color: currentColor; 27 color: currentColor;
28 white-space: nowrap; 28 white-space: nowrap;
29 border-radius: 100em; 29 border-radius: 100em;
30 30
31 &::after { 31 &::after {
32 position: absolute; 32 position: absolute;
33 inset: calc(-1 * props.get(vars.$key-focus--border-offset)); 33 inset: calc(-1 * props.get(vars.$key-focus--border-offset));
34 z-index: -10; 34 z-index: -10;
35 display: block; 35 display: block;
36 pointer-events: none; 36 visibility: hidden;
37 visibility: hidden; 37 pointer-events: none;
38 content: ''; 38 outline: props.get(vars.$default-theme, --key-focus, --border) solid props.get(vars.$key-focus--border-width);
39 border-radius: 100em; 39 content: '';
40 outline: props.get(vars.$default-theme, --key-focus, --border) solid props.get(vars.$key-focus--border-width); 40 border-radius: 100em;
41 box-shadow: 41 box-shadow:
42 0 42 0
43 0 43 0
44 0 44 0
45 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 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); 46 props.get(vars.$default-theme, --key-focus, --outline);
47 } 47 }
48 } 48 }
49 49
50 @include bem.elem('item') { 50 @include bem.elem('item') {
51 display: flex; 51 display: flex;
52 flex-direction: column; 52 flex-direction: column;
53 align-items: center; 53 align-items: center;
54 justify-content: center; 54 justify-content: center;
55 inline-size: 100%; 55 inline-size: 100%;
56 padding-inline: calc(.5 * props.get(vars.$spacing)); 56 padding-inline: calc(.5 * props.get(vars.$spacing));
57 font-weight: 500; 57 font-weight: 500;
58 color: props.get(vars.$default-theme, --disabled, --label-color); 58 color: props.get(vars.$default-theme, --disabled, --label-color);
59 59
60 &:link, 60 &:link,
61 &:visited, 61 &:visited,
62 &:enabled { 62 &:enabled {
63 color: props.get(vars.$default-theme, --label-color); 63 color: props.get(vars.$default-theme, --label-color);
64 64
65 &:hover, 65 &:hover,
66 &:focus-visible { 66 &:focus-visible {
67 color: props.get(vars.$default-theme, --hover, --label-color); 67 color: props.get(vars.$default-theme, --hover, --label-color);
68 68
69 @include bem.elem('item-content') { 69 @include bem.elem('item-content') {
70 background-color: props.get(vars.$default-theme, --hover, --bg-color); 70 background-color: props.get(vars.$default-theme, --hover, --bg-color);
71 } 71 }
72 } 72 }
73 73
74 &:focus-visible { 74 &:focus-visible {
75 @include bem.elem('item-content') { 75 @include bem.elem('item-content') {
76 &::after { 76 &::after {
77 visibility: visible; 77 visibility: visible;
78 } 78 }
79 } 79 }
80 } 80 }
81 81
82 &:active { 82 &:active {
83 color: props.get(vars.$default-theme, --active, --label-color); 83 color: props.get(vars.$default-theme, --active, --label-color);
84 84
85 @include bem.elem('item-content') { 85 @include bem.elem('item-content') {
86 background-color: props.get(vars.$default-theme, --active, --bg-color); 86 background-color: props.get(vars.$default-theme, --active, --bg-color);
87 } 87 }
88 } 88 }
89 } 89 }
90 90
91 @include bem.is('selected') { 91 @include bem.is('selected') {
92 font-weight: bold; 92 font-weight: bold;
93 color: props.get(vars.$default-theme, --selected, --disabled, --label-color); 93 color: props.get(vars.$default-theme, --selected, --disabled, --label-color);
94 94
95 @include bem.elem('item-content') { 95 @include bem.elem('item-content') {
96 background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color); 96 background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color);
97 } 97 }
98 98
99 &:link, 99 &:link,
100 &:visited, 100 &:visited,
101 &:enabled { 101 &:enabled {
102 color: props.get(vars.$default-theme, --selected, --label-color); 102 color: props.get(vars.$default-theme, --selected, --label-color);
103 103
104 @include bem.elem('item-content') { 104 @include bem.elem('item-content') {
105 background-color: props.get(vars.$default-theme, --selected, --bg-color); 105 background-color: props.get(vars.$default-theme, --selected, --bg-color);
106 } 106 }
107 107
108 &:hover, 108 &:hover,
109 &:focus-visible { 109 &:focus-visible {
110 color: props.get(vars.$default-theme, --selected, --hover, --label-color); 110 color: props.get(vars.$default-theme, --selected, --hover, --label-color);
111 111
112 @include bem.elem('item-content') { 112 @include bem.elem('item-content') {
113 background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color); 113 background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color);
114 } 114 }
115 } 115 }
116 116
117 &:active { 117 &:active {
118 color: props.get(vars.$default-theme, --selected, --active, --label-color); 118 color: props.get(vars.$default-theme, --selected, --active, --label-color);
119 119
120 @include bem.elem('item-content') { 120 @include bem.elem('item-content') {
121 background-color: props.get(vars.$default-theme, --selected, --active, --bg-color); 121 background-color: props.get(vars.$default-theme, --selected, --active, --bg-color);
122 } 122 }
123 } 123 }
124 } 124 }
125 } 125 }
126 } 126 }
127 127
128 @include bem.modifier('hide-unselected') { 128 @include bem.modifier('hide-unselected') {
129 @include bem.elem('item') { 129 @include bem.elem('item') {
130 display: none; 130 display: none;
131 131
132 @include bem.is('selected') { 132 @include bem.is('selected') {
133 display: flex; 133 display: flex;
134 } 134 }
135 } 135 }
136 } 136 }
137 137
138 @include bem.modifier('adapt') { 138 @include bem.modifier('adapt') {
139 gap: props.get(vars.$spacing); 139 gap: props.get(vars.$spacing);
140 block-size: 100%; 140 block-size: 100%;
141 141
142 @include bem.elem('item') { 142 @include bem.elem('item') {
143 padding-inline: 0; 143 padding-inline: 0;
144 } 144 }
145 } 145 }
146 146
147 147
148 @include bem.modifier('align-block') { 148 @include bem.modifier('align-block') {
149 margin-inline: calc(-1 * props.get(vars.$item--pad-i)); 149 margin-inline: calc(-1 * props.get(vars.$item--pad-i));
150 } 150 }
151 151
152 @include bem.modifier('quiet') { 152 @include bem.modifier('quiet') {
153 @include bem.elem('item') { 153 @include bem.elem('item') {
154 @include bem.is('selected') { 154 @include bem.is('selected') {
155 color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color); 155 color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color);
156 156
157 @include bem.elem('item-content') { 157 @include bem.elem('item-content') {
158 background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color); 158 background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color);
159 } 159 }
160 160
161 &:link, 161 &:link,
162 &:visited, 162 &:visited,
163 &:enabled { 163 &:enabled {
164 color: props.get(vars.$default-theme, --quiet, --selected, --label-color); 164 color: props.get(vars.$default-theme, --quiet, --selected, --label-color);
165 165
166 @include bem.elem('item-content') { 166 @include bem.elem('item-content') {
167 background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color); 167 background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color);
168 } 168 }
169 169
170 &:hover, 170 &:hover,
171 &:focus-visible { 171 &:focus-visible {
172 color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color); 172 color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color);
173 173
174 @include bem.elem('item-content') { 174 @include bem.elem('item-content') {
175 background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color); 175 background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color);
176 } 176 }
177 } 177 }
178 178
179 &:active { 179 &:active {
180 color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color); 180 color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color);
181 181
182 @include bem.elem('item-content') { 182 @include bem.elem('item-content') {
183 background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color); 183 background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color);
184 } 184 }
185 } 185 }
186 } 186 }
187 } 187 }
188 } 188 }
189 } 189 }
190 } 190 }
191} 191}
diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss
index da280fd..8e18def 100644
--- a/src/objects/_navbar.vars.scss
+++ b/src/objects/_navbar.vars.scss
@@ -7,7 +7,7 @@ $block-size: props.def(--o-navbar--block-size, props.get(core.$size--800)) !defa
7$spacing: props.def(--o-navbar--spacing, props.get(core.$size--200)) !default; 7$spacing: props.def(--o-navbar--spacing, props.get(core.$size--200)) !default;
8 8
9$item--pad-i: props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default; 9$item--pad-i: props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default;
10$item--pad-i-label: props.def(--o-action-button--pad-i-label, props.get(core.$size--25)) !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; 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; 12$item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default;
13 13
@@ -17,68 +17,68 @@ $key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props
17 17
18$default-theme-override: () !default; 18$default-theme-override: () !default;
19$default-theme: map.deep-merge(( 19$default-theme: map.deep-merge((
20 --label-color: props.get(core.$theme, --text), 20 --label-color: props.get(core.$theme, --text),
21 21
22 --hover: ( 22 --hover: (
23 --bg-color: props.get(core.$theme, --border-mute), 23 --bg-color: props.get(core.$theme, --border-mute),
24 --label-color: props.get(core.$theme, --heading), 24 --label-color: props.get(core.$theme, --heading),
25 ), 25 ),
26 26
27 --active: ( 27 --active: (
28 --bg-color: props.get(core.$theme, --border), 28 --bg-color: props.get(core.$theme, --border),
29 --label-color: props.get(core.$theme, --heading), 29 --label-color: props.get(core.$theme, --heading),
30 ), 30 ),
31 31
32 --disabled: ( 32 --disabled: (
33 --label-color: props.get(core.$theme, --border-strong), 33 --label-color: props.get(core.$theme, --border-strong),
34 ), 34 ),
35 35
36 --key-focus: ( 36 --key-focus: (
37 --label: props.get(core.$theme, --focus, --text), 37 --label: props.get(core.$theme, --focus, --text),
38 --border: props.get(core.$theme, --focus, --border), 38 --border: props.get(core.$theme, --focus, --border),
39 --outline: props.get(core.$theme, --focus, --outline), 39 --outline: props.get(core.$theme, --focus, --outline),
40 ), 40 ),
41 41
42 --selected: ( 42 --selected: (
43 --bg-color: props.get(core.$theme, --heading), 43 --bg-color: props.get(core.$theme, --heading),
44 --label-color: props.get(core.$theme, --base, --50), 44 --label-color: props.get(core.$theme, --base, --50),
45 45
46 --hover: ( 46 --hover: (
47 --bg-color: props.get(core.$theme, --text), 47 --bg-color: props.get(core.$theme, --text),
48 --label-color: props.get(core.$theme, --base, --50), 48 --label-color: props.get(core.$theme, --base, --50),
49 ), 49 ),
50 50
51 --active: ( 51 --active: (
52 --bg-color: props.get(core.$theme, --text-mute), 52 --bg-color: props.get(core.$theme, --text-mute),
53 --label-color: props.get(core.$theme, --base, --50), 53 --label-color: props.get(core.$theme, --base, --50),
54 ), 54 ),
55 55
56 --disabled: ( 56 --disabled: (
57 --bg-color: props.get(core.$theme, --border-mute), 57 --bg-color: props.get(core.$theme, --border-mute),
58 --label-color: props.get(core.$theme, --border-strong), 58 --label-color: props.get(core.$theme, --border-strong),
59 ), 59 ),
60 ), 60 ),
61 61
62 --quiet: ( 62 --quiet: (
63 --selected: ( 63 --selected: (
64 --bg-color: props.get(core.$theme, --accent, --200), 64 --bg-color: props.get(core.$theme, --accent, --200),
65 --label-color: props.get(core.$theme, --accent, --1100), 65 --label-color: props.get(core.$theme, --accent, --1100),
66 66
67 --hover: ( 67 --hover: (
68 --bg-color: props.get(core.$theme, --accent, --300), 68 --bg-color: props.get(core.$theme, --accent, --300),
69 --label-color: props.get(core.$theme, --accent, --1200), 69 --label-color: props.get(core.$theme, --accent, --1200),
70 ), 70 ),
71 71
72 --active: ( 72 --active: (
73 --bg-color: props.get(core.$theme, --accent, --400), 73 --bg-color: props.get(core.$theme, --accent, --400),
74 --label-color: props.get(core.$theme, --accent, --1300), 74 --label-color: props.get(core.$theme, --accent, --1300),
75 ), 75 ),
76 76
77 --disabled: ( 77 --disabled: (
78 --bg-color: props.get(core.$theme, --accent, --200), 78 --bg-color: props.get(core.$theme, --accent, --200),
79 --label-color: props.get(core.$theme, --accent, --800), 79 --label-color: props.get(core.$theme, --accent, --800),
80 ), 80 ),
81 ) 81 )
82 ) 82 )
83), $default-theme-override) !default; 83), $default-theme-override) !default;
84$default-theme: props.def(--o-navbar, $default-theme, 'color'); 84$default-theme: props.def(--o-navbar, $default-theme, 'color');
diff --git a/src/objects/_palette.scss b/src/objects/_palette.scss
index 8a6cdb2..79c0f6c 100644
--- a/src/objects/_palette.scss
+++ b/src/objects/_palette.scss
@@ -7,57 +7,57 @@
7@use '../core.vars' as core; 7@use '../core.vars' as core;
8 8
9@mixin styles { 9@mixin styles {
10 @include bem.object('palette') { 10 @include bem.object('palette') {
11 display: flex; 11 display: flex;
12 block-size: 3em; 12 block-size: 3em;
13 13
14 @include bem.elem('item') { 14 @include bem.elem('item') {
15 flex: 1 1 auto; 15 flex: 1 1 auto;
16 16
17 $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base); 17 $palette: map.get(config.$themes, config.$theme-default, light, --palettes, --base);
18 $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2)); 18 $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2));
19 19
20 @for $i from 1 through list.length($levels) { 20 @for $i from 1 through list.length($levels) {
21 $key: list.nth(map.keys($levels), $i); 21 $key: list.nth(map.keys($levels), $i);
22 22
23 &:nth-child(#{$i}) { 23 &:nth-child(#{$i}) {
24 background-color: props.get(core.$theme, --base, $key); 24 background-color: props.get(core.$theme, --base, $key);
25 } 25 }
26 } 26 }
27 } 27 }
28 28
29 @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) { 29 @each $palette-name, $palette in map.get(config.$themes, config.$theme-default, light, --palettes) {
30 $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2)); 30 $levels: map.get(config.$themes, config.$theme-default, light, --levels, list.nth($palette, 2));
31 31
32 @include bem.modifier(string.slice($palette-name, 3)) { 32 @include bem.modifier(string.slice($palette-name, 3)) {
33 @include bem.elem('item') { 33 @include bem.elem('item') {
34 @for $i from 1 through list.length($levels) { 34 @for $i from 1 through list.length($levels) {
35 $key: list.nth(map.keys($levels), $i); 35 $key: list.nth(map.keys($levels), $i);
36 36
37 &:nth-child(#{$i}) { 37 &:nth-child(#{$i}) {
38 background-color: props.get(core.$theme, $palette-name, $key); 38 background-color: props.get(core.$theme, $palette-name, $key);
39 } 39 }
40 } 40 }
41 } 41 }
42 } 42 }
43 } 43 }
44 44
45 @include bem.modifier('static') { 45 @include bem.modifier('static') {
46 @each $palette-name, $palette in map.get(config.$static-colors, --palettes) { 46 @each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
47 $levels: map.get(config.$static-colors, --levels); 47 $levels: map.get(config.$static-colors, --levels);
48 48
49 @include bem.modifier(string.slice($palette-name, 3)) { 49 @include bem.modifier(string.slice($palette-name, 3)) {
50 @include bem.elem('item') { 50 @include bem.elem('item') {
51 @for $i from 1 through list.length($levels) { 51 @for $i from 1 through list.length($levels) {
52 $key: list.nth(map.keys($levels), $i); 52 $key: list.nth(map.keys($levels), $i);
53 53
54 &:nth-child(#{$i}) { 54 &:nth-child(#{$i}) {
55 background-color: props.get(core.$theme, #{$palette-name}-static, $key); 55 background-color: props.get(core.$theme, #{$palette-name}-static, $key);
56 } 56 }
57 } 57 }
58 } 58 }
59 } 59 }
60 } 60 }
61 } 61 }
62 } 62 }
63} 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 3fe6310..2746477 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -7,33 +7,39 @@
7@use 'popover.vars' as vars; 7@use 'popover.vars' as vars;
8 8
9@mixin styles { 9@mixin styles {
10 @include materialize-at-root(meta.module-variables('vars')); 10 @include materialize-at-root(meta.module-variables('vars'));
11 11
12 @include bem.object('popover') { 12 @include bem.object('popover') {
13 position: fixed; 13 position: fixed;
14 inset-block-start: 0; 14 inset-block-start: 0;
15 inset-inline-start: 0; 15 inset-inline-start: 0;
16 z-index: props.get(vars.$z-index); 16 z-index: props.get(vars.$z-index);
17 padding-block: props.get(vars.$pad-b); 17 padding-block: props.get(vars.$pad-b);
18 padding-inline: props.get(vars.$pad-i); 18 padding-inline: props.get(vars.$pad-i);
19 margin: 0; 19 margin: 0;
20 color: currentColor; 20 color: currentColor;
21 background-color: props.get(vars.$bg-color); 21 background-color: props.get(vars.$bg-color);
22 filter: props.get(vars.$filter); 22 border: props.get(vars.$border-width) solid transparent;
23 border: props.get(vars.$border-width) solid props.get(vars.$border-color); 23 border-color: props.get(vars.$border-color);
24 border-radius: props.get(vars.$rounding); 24 border-radius: props.get(vars.$rounding);
25 transform: translate(var(--x), var(--y)); 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));
26 32
27 @include bem.modifier('up-left') { 33 @include bem.modifier('up-left') {
28 transform: translate(var(--x), calc(var(--y) - 100%)); 34 transform: translate(var(--x), calc(var(--y) - 100%));
29 } 35 }
30 36
31 @include bem.modifier('up-right') { 37 @include bem.modifier('up-right') {
32 transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); 38 transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
33 } 39 }
34 40
35 @include bem.modifier('down-right') { 41 @include bem.modifier('down-right') {
36 transform: translate(calc(var(--x) - 100%), var(--y)); 42 transform: translate(calc(var(--x) - 100%), var(--y));
37 } 43 }
38 } 44 }
39} 45}
diff --git a/src/objects/_popover.vars.scss b/src/objects/_popover.vars.scss
index b76112e..e560d1b 100644
--- a/src/objects/_popover.vars.scss
+++ b/src/objects/_popover.vars.scss
@@ -9,6 +9,11 @@ $separator-width: props.def(--o-popover--separator-width, props.get(core.$size--
9$rounding: props.def(--o-popover--rounding, props.get(core.$rounding)) !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; 10$border-width: props.def(--o-popover--border-width, props.get(core.$border-width--thin)) !default;
11 11
12$bg-color: props.def(--o-popover--bg-color, props.get(core.$theme, --bg-l2), 'color') !default; 12$shadow-x: props.def(--o-popover--shadow-x, props.get(core.$shadow--l2--x)) !default;
13$border-color: props.def(--o-popover--border-color, props.get(core.$theme, --border), 'color') !default; 13$shadow-y: props.def(--o-popover--shadow-y, props.get(core.$shadow--l2--y)) !default;
14$filter: props.def(--o-popover--filter, drop-shadow(props.get(core.$shadow--x) props.get(core.$shadow--y) props.get(core.$shadow--blur) props.get(core.$theme, --shadow)), 'color') !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 aef6b92..8327a15 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -8,147 +8,147 @@
8@use 'radio.vars' as vars; 8@use 'radio.vars' as vars;
9 9
10@mixin styles { 10@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars')); 11 @include materialize-at-root(meta.module-variables('vars'));
12 12
13 @include bem.object('radio') { 13 @include bem.object('radio') {
14 position: relative; 14 position: relative;
15 display: inline-block; 15 display: inline-block;
16 padding-block: props.get(vars.$pad-b); 16 padding-block: props.get(vars.$pad-b);
17 padding-inline: props.get(vars.$pad-i); 17 padding-inline: props.get(vars.$pad-i);
18 margin-inline: 18 margin-inline:
19 calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) 19 calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
20 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); 20 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));
21 21
22 @include bem.elem('circle') { 22 @include bem.elem('circle') {
23 display: inline-block; 23 display: inline-block;
24 flex: 0 0 auto; 24 flex: 0 0 auto;
25 inline-size: props.get(vars.$diameter); 25 inline-size: props.get(vars.$diameter);
26 block-size: props.get(vars.$diameter); 26 block-size: props.get(vars.$diameter);
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)); 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));
28 vertical-align: top; 28 vertical-align: top;
29 background-color: props.get(vars.$circle-border-color); 29 background-color: props.get(vars.$circle-border-color);
30 background-clip: padding-box; 30 background-clip: padding-box;
31 border: props.get(vars.$key-focus--border-offset) solid transparent; 31 border: props.get(vars.$key-focus--border-offset) solid transparent;
32 border-radius: 2em; 32 border-radius: 2em;
33 33
34 &::after { 34 &::after {
35 position: relative; 35 position: relative;
36 inset-block-start: props.get(vars.$border-width); 36 inset-block-start: props.get(vars.$border-width);
37 inset-inline-start: props.get(vars.$border-width); 37 inset-inline-start: props.get(vars.$border-width);
38 display: block; 38 display: block;
39 inline-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); 39 inline-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width));
40 block-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width)); 40 block-size: calc(props.get(vars.$diameter) - 2 * props.get(vars.$border-width));
41 content: ''; 41 content: '';
42 background-color: props.get(vars.$circle-bg-color); 42 background-color: props.get(vars.$circle-bg-color);
43 border-radius: props.get(vars.$diameter); 43 border-radius: props.get(vars.$diameter);
44 transition: transform .2s ease; 44 transition: transform .2s ease;
45 } 45 }
46 } 46 }
47 47
48 @include bem.elem('label') { 48 @include bem.elem('label') {
49 margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset)); 49 margin-inline-start: calc(props.get(vars.$label-gap) - props.get(vars.$key-focus--border-offset));
50 } 50 }
51 51
52 @include bem.elem('native') { 52 @include bem.elem('native') {
53 position: absolute; 53 position: absolute;
54 inset-block-start: 0; 54 inset-block-start: 0;
55 inset-inline-start: 0; 55 inset-inline-start: 0;
56 z-index: -1; 56 z-index: -1;
57 inline-size: 100%; 57 inline-size: 100%;
58 block-size: 100%; 58 block-size: 100%;
59 padding: 0; 59 padding: 0;
60 margin: 0; 60 margin: 0;
61 overflow: hidden; 61 overflow: hidden;
62 appearance: none; 62 appearance: none;
63 border-radius: props.get(vars.$rounding); 63 border-radius: props.get(vars.$rounding);
64 64
65 &:hover, 65 &:hover,
66 &:focus-visible { 66 &:focus-visible {
67 @include bem.sibling-elem('label') { 67 @include bem.sibling-elem('label') {
68 color: props.get(vars.$hover--label-color); 68 color: props.get(vars.$hover--label-color);
69 } 69 }
70 70
71 @include bem.sibling-elem('circle') { 71 @include bem.sibling-elem('circle') {
72 background-color: props.get(vars.$hover--circle-border-color); 72 background-color: props.get(vars.$hover--circle-border-color);
73 } 73 }
74 } 74 }
75 75
76 &:checked { 76 &:checked {
77 @include bem.sibling-elem('circle') { 77 @include bem.sibling-elem('circle') {
78 &::after { 78 &::after {
79 transform: scale(.44); 79 transform: scale(.44);
80 } 80 }
81 } 81 }
82 } 82 }
83 83
84 &:disabled { 84 &:disabled {
85 @include bem.sibling-elem('label') { 85 @include bem.sibling-elem('label') {
86 color: props.get(vars.$disabled--label-color); 86 color: props.get(vars.$disabled--label-color);
87 } 87 }
88 88
89 @include bem.sibling-elem('circle') { 89 @include bem.sibling-elem('circle') {
90 background-color: props.get(vars.$disabled--circle-border-color); 90 background-color: props.get(vars.$disabled--circle-border-color);
91 91
92 &::after { 92 &::after {
93 background-color: props.get(vars.$disabled--circle-bg-color); 93 background-color: props.get(vars.$disabled--circle-bg-color);
94 } 94 }
95 } 95 }
96 } 96 }
97 97
98 &:focus-visible { 98 &:focus-visible {
99 @include bem.sibling-elem('label') { 99 @include bem.sibling-elem('label') {
100 color: props.get(vars.$key-focus--label-color); 100 color: props.get(vars.$key-focus--label-color);
101 } 101 }
102 102
103 @include bem.sibling-elem('circle') { 103 @include bem.sibling-elem('circle') {
104 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 104 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
105 box-shadow: 105 box-shadow:
106 0 106 0
107 0 107 0
108 0 108 0
109 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 109 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
110 props.get(vars.$key-focus--outline-color); 110 props.get(vars.$key-focus--outline-color);
111 } 111 }
112 } 112 }
113 } 113 }
114 114
115 @include bem.modifier('standalone') { 115 @include bem.modifier('standalone') {
116 @include bem.elem('circle') { 116 @include bem.elem('circle') {
117 margin-block-start: 0; 117 margin-block-start: 0;
118 } 118 }
119 } 119 }
120 120
121 @include bem.modifier('accent') { 121 @include bem.modifier('accent') {
122 @include bem.elem('native') { 122 @include bem.elem('native') {
123 &:checked { 123 &:checked {
124 @include bem.sibling-elem('circle') { 124 @include bem.sibling-elem('circle') {
125 background-color: props.get(vars.$accent--circle-border-color); 125 background-color: props.get(vars.$accent--circle-border-color);
126 } 126 }
127 127
128 &:hover, 128 &:hover,
129 &:focus-visible { 129 &:focus-visible {
130 @include bem.sibling-elem('circle') { 130 @include bem.sibling-elem('circle') {
131 background-color: props.get(vars.$accent--hover--circle-border-color); 131 background-color: props.get(vars.$accent--hover--circle-border-color);
132 } 132 }
133 } 133 }
134 } 134 }
135 135
136 &:disabled { 136 &:disabled {
137 @include bem.sibling-elem('circle') { 137 @include bem.sibling-elem('circle') {
138 background-color: props.get(vars.$disabled--circle-border-color); 138 background-color: props.get(vars.$disabled--circle-border-color);
139 139
140 &::after { 140 &::after {
141 background-color: props.get(vars.$disabled--circle-bg-color); 141 background-color: props.get(vars.$disabled--circle-bg-color);
142 } 142 }
143 } 143 }
144 144
145 &:checked { 145 &:checked {
146 @include bem.sibling-elem('circle') { 146 @include bem.sibling-elem('circle') {
147 background-color: props.get(vars.$disabled--circle-border-color); 147 background-color: props.get(vars.$disabled--circle-border-color);
148 } 148 }
149 } 149 }
150 } 150 }
151 } 151 }
152 } 152 }
153 } 153 }
154} 154}
diff --git a/src/objects/_radio.vars.scss b/src/objects/_radio.vars.scss
index 51ea581..b18ae2b 100644
--- a/src/objects/_radio.vars.scss
+++ b/src/objects/_radio.vars.scss
@@ -7,7 +7,7 @@ $label-gap: props.def(--o-radio--label-gap, props.get(core.$size--125)) !
7$border-width: props.def(--o-radio--border-width, props.get(core.$border-width--medium)) !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; 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; 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)) !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; 11$spacing-sibling: props.def(--o-radio--spacing-sibling, props.get(core.$size--300)) !default;
12 12
13$key-focus--border-width: props.def(--o-radio--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 13$key-focus--border-width: props.def(--o-radio--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
diff --git a/src/objects/_side-nav.scss b/src/objects/_side-nav.scss
index 6c60777..4a1feda 100644
--- a/src/objects/_side-nav.scss
+++ b/src/objects/_side-nav.scss
@@ -8,83 +8,83 @@
8@use 'side-nav.vars' as vars; 8@use 'side-nav.vars' as vars;
9 9
10@mixin styles { 10@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars')); 11 @include materialize-at-root(meta.module-variables('vars'));
12 12
13 @include bem.object('side-nav') { 13 @include bem.object('side-nav') {
14 display: flex; 14 display: flex;
15 flex-direction: column; 15 flex-direction: column;
16 gap: props.get(vars.$spacing); 16 gap: props.get(vars.$spacing);
17 17
18 @include bem.elem('header') { 18 @include bem.elem('header') {
19 padding-block: props.get(vars.$item--pad-b); 19 padding-block: props.get(vars.$item--pad-b);
20 padding-inline: props.get(vars.$item--pad-i); 20 padding-inline: props.get(vars.$item--pad-i);
21 font-size: props.get(vars.$header--font-size); 21 font-size: props.get(vars.$header--font-size);
22 font-weight: 500; 22 font-weight: 500;
23 color: props.get(vars.$header--label-color); 23 color: props.get(vars.$header--label-color);
24 text-transform: uppercase; 24 text-transform: uppercase;
25 letter-spacing: .5px; 25 letter-spacing: .5px;
26 26
27 @include bem.next-twin-elem { 27 @include bem.next-twin-elem {
28 margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); 28 margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing));
29 } 29 }
30 } 30 }
31 31
32 @include bem.elem('item') { 32 @include bem.elem('item') {
33 padding-block: props.get(vars.$item--pad-b); 33 padding-block: props.get(vars.$item--pad-b);
34 padding-inline: props.get(vars.$item--pad-i); 34 padding-inline: props.get(vars.$item--pad-i);
35 margin: calc(-1 * props.get(vars.$item--key-focus--border-offset)); 35 margin: calc(-1 * props.get(vars.$item--key-focus--border-offset));
36 color: props.get(vars.$item--disabled--label-color); 36 color: props.get(vars.$item--disabled--label-color);
37 background-clip: padding-box; 37 background-clip: padding-box;
38 border: props.get(vars.$item--key-focus--border-offset) solid transparent; 38 border: props.get(vars.$item--key-focus--border-offset) solid transparent;
39 border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset)); 39 border-radius: calc(props.get(vars.$item--rounding) + props.get(vars.$item--key-focus--border-offset));
40 40
41 &:link, 41 &:link,
42 &:visited, 42 &:visited,
43 &:enabled { 43 &:enabled {
44 color: currentColor; 44 color: currentColor;
45 45
46 @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') { 46 @include bem.multi('&:hover, &:focus-visible', 'is' 'selected') {
47 color: props.get(vars.$item--hover--label-color); 47 color: props.get(vars.$item--hover--label-color);
48 background-color: props.get(vars.$item--hover--bg-color); 48 background-color: props.get(vars.$item--hover--bg-color);
49 } 49 }
50 50
51 &:active { 51 &:active {
52 color: props.get(vars.$item--active--label-color); 52 color: props.get(vars.$item--active--label-color);
53 background-color: props.get(vars.$item--active--bg-color); 53 background-color: props.get(vars.$item--active--bg-color);
54 } 54 }
55 55
56 &:focus-visible { 56 &:focus-visible {
57 outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width); 57 outline: props.get(vars.$item--key-focus--border-color) solid props.get(vars.$item--key-focus--border-width);
58 box-shadow: 58 box-shadow:
59 0 59 0
60 0 60 0
61 0 61 0
62 calc(props.get(vars.$item--key-focus--border-width) + props.get(vars.$item--key-focus--outline-width)) 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); 63 props.get(vars.$item--key-focus--outline-color);
64 } 64 }
65 } 65 }
66 66
67 @include bem.next-elem('header') { 67 @include bem.next-elem('header') {
68 margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing)); 68 margin-block-start: calc(props.get(vars.$separator) + props.get(vars.$spacing));
69 } 69 }
70 } 70 }
71 71
72 @include bem.elem('header') { 72 @include bem.elem('header') {
73 &:link, 73 &:link,
74 &:visited, 74 &:visited,
75 &:enabled { 75 &:enabled {
76 color: props.get(vars.$header--label-color); 76 color: props.get(vars.$header--label-color);
77 } 77 }
78 } 78 }
79 79
80 @include bem.elem('separator') { 80 @include bem.elem('separator') {
81 block-size: props.get(vars.$separator); 81 block-size: props.get(vars.$separator);
82 } 82 }
83 83
84 @include bem.elem('icon-slot') { 84 @include bem.elem('icon-slot') {
85 display: flex; 85 display: flex;
86 justify-content: center; 86 justify-content: center;
87 inline-size: props.get(icon.$size); 87 inline-size: props.get(icon.$size);
88 } 88 }
89 } 89 }
90} 90}
diff --git a/src/objects/_side-nav.vars.scss b/src/objects/_side-nav.vars.scss
index 122dba6..711b2a7 100644
--- a/src/objects/_side-nav.vars.scss
+++ b/src/objects/_side-nav.vars.scss
@@ -8,7 +8,7 @@ $separator: props.def(--o-side-nav--separator, props.get(core.$size--200
8 8
9$item--pad-i: props.def(--o-side-nav--item--pad-i, props.get(core.$size--150)) !default; 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; 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)) !default; 11$item--rounding: props.def(--o-side-nav--item--rounding, props.get(core.$rounding--sm)) !default;
12 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; 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; 14$item--key-focus--border-offset: props.def(--o-side-nav--item--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
diff --git a/src/objects/_status-indicator.scss b/src/objects/_status-indicator.scss
index 1fcdf02..4e4aa42 100644
--- a/src/objects/_status-indicator.scss
+++ b/src/objects/_status-indicator.scss
@@ -9,19 +9,19 @@
9@use 'status-indicator.vars' as vars; 9@use 'status-indicator.vars' as vars;
10 10
11@mixin styles { 11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars')); 12 @include materialize-at-root(meta.module-variables('vars'));
13 13
14 @include bem.object('status-indicator') { 14 @include bem.object('status-indicator') {
15 display: inline-block; 15 display: inline-block;
16 inline-size: props.get(vars.$size); 16 inline-size: props.get(vars.$size);
17 block-size: props.get(vars.$size); 17 block-size: props.get(vars.$size);
18 background-color: props.get(vars.$default); 18 background-color: props.get(vars.$default);
19 border-radius: 10em; 19 border-radius: 10em;
20 20
21 @each $theme in map.keys(props.get(vars.$themes)) { 21 @each $theme in map.keys(props.get(vars.$themes)) {
22 @include bem.is(string.slice($theme, 3)) { 22 @include bem.is(string.slice($theme, 3)) {
23 background-color: props.get(vars.$themes, $theme); 23 background-color: props.get(vars.$themes, $theme);
24 } 24 }
25 } 25 }
26 } 26 }
27} 27}
diff --git a/src/objects/_status-indicator.vars.scss b/src/objects/_status-indicator.vars.scss
index 6289145..55b446a 100644
--- a/src/objects/_status-indicator.vars.scss
+++ b/src/objects/_status-indicator.vars.scss
@@ -9,18 +9,18 @@ $default: props.def(--o-status-indicator--default, props.get(core.$theme, --bord
9$primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text), 'color') !default; 9$primary: props.def(--o-status-indicator--primary, props.get(core.$theme, --text), 'color') !default;
10 10
11$themes-config: ( 11$themes-config: (
12 accent: --accent, 12 accent: --accent,
13 positive: --positive, 13 positive: --positive,
14 negative: --negative, 14 negative: --negative,
15 warning: --warning, 15 warning: --warning,
16) !default; 16) !default;
17 17
18$themes: props.def(--o-status-indicator, (), 'color'); 18$themes: props.def(--o-status-indicator, (), 'color');
19 19
20@each $theme, $key in $themes-config { 20@each $theme, $key in $themes-config {
21 @if $theme != --base { 21 @if $theme != --base {
22 $themes: props.merge($themes, ( 22 $themes: props.merge($themes, (
23 --#{$theme}: props.get(core.$theme, $key, --700), 23 --#{$theme}: props.get(core.$theme, $key, --700),
24 )); 24 ));
25 } 25 }
26} 26}
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index 8612d31..48cec24 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -8,181 +8,181 @@
8@use 'switch.vars' as vars; 8@use 'switch.vars' as vars;
9 9
10@mixin styles { 10@mixin styles {
11 @include materialize-at-root(meta.module-variables('vars')); 11 @include materialize-at-root(meta.module-variables('vars'));
12 12
13 @include bem.object('switch') { 13 @include bem.object('switch') {
14 position: relative; 14 position: relative;
15 display: inline-block; 15 display: inline-block;
16 padding-block: props.get(vars.$pad-b); 16 padding-block: props.get(vars.$pad-b);
17 padding-inline: props.get(vars.$pad-i); 17 padding-inline: props.get(vars.$pad-i);
18 margin-inline: 18 margin-inline:
19 calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)) 19 calc(-1 * props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset))
20 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset)); 20 calc(props.get(vars.$spacing-sibling) - props.get(vars.$pad-i) - props.get(vars.$key-focus--border-offset));
21 21
22 @include bem.elem('indicator') { 22 @include bem.elem('indicator') {
23 display: inline-block; 23 display: inline-block;
24 flex: 0 0 auto; 24 flex: 0 0 auto;
25 inline-size: props.get(vars.$inline-size); 25 inline-size: props.get(vars.$inline-size);
26 block-size: props.get(vars.$block-size); 26 block-size: props.get(vars.$block-size);
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)); 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));
28 vertical-align: top; 28 vertical-align: top;
29 background-color: props.get(vars.$track-bg-color); 29 background-color: props.get(vars.$track-bg-color);
30 background-clip: padding-box; 30 background-clip: padding-box;
31 border: props.get(vars.$key-focus--border-offset) solid transparent; 31 border: props.get(vars.$key-focus--border-offset) solid transparent;
32 border-radius: 2em; 32 border-radius: 2em;
33 transition: background-color .2s ease; 33 transition: background-color .2s ease;
34 34
35 &::after { 35 &::after {
36 display: block; 36 display: block;
37 inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); 37 inline-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
38 block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width)); 38 block-size: calc(props.get(vars.$block-size) - 2 * props.get(vars.$border-width));
39 content: ''; 39 content: '';
40 background-color: props.get(vars.$handle-bg-color); 40 background-color: props.get(vars.$handle-bg-color);
41 border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color); 41 border: props.get(vars.$border-width) solid props.get(vars.$handle-border-color);
42 border-radius: props.get(vars.$inline-size); 42 border-radius: props.get(vars.$inline-size);
43 transition: transform .2s ease; 43 transition: transform .2s ease;
44 } 44 }
45 } 45 }
46 46
47 @include bem.elem('label') { 47 @include bem.elem('label') {
48 margin-inline-start: props.get(vars.$label-gap); 48 margin-inline-start: props.get(vars.$label-gap);
49 } 49 }
50 50
51 @include bem.elem('native') { 51 @include bem.elem('native') {
52 position: absolute; 52 position: absolute;
53 inset-block-start: 0; 53 inset-block-start: 0;
54 inset-inline-start: 0; 54 inset-inline-start: 0;
55 z-index: -1; 55 z-index: -1;
56 inline-size: 100%; 56 inline-size: 100%;
57 block-size: 100%; 57 block-size: 100%;
58 padding: 0; 58 padding: 0;
59 margin: 0; 59 margin: 0;
60 overflow: hidden; 60 overflow: hidden;
61 appearance: none; 61 appearance: none;
62 border-radius: props.get(vars.$rounding); 62 border-radius: props.get(vars.$rounding);
63 63
64 &:hover, 64 &:hover,
65 &:focus-visible { 65 &:focus-visible {
66 @include bem.sibling-elem('label') { 66 @include bem.sibling-elem('label') {
67 color: props.get(vars.$hover--label-color); 67 color: props.get(vars.$hover--label-color);
68 } 68 }
69 69
70 @include bem.sibling-elem('indicator') { 70 @include bem.sibling-elem('indicator') {
71 &::after { 71 &::after {
72 border-color: props.get(vars.$hover--handle-border-color); 72 border-color: props.get(vars.$hover--handle-border-color);
73 } 73 }
74 } 74 }
75 } 75 }
76 76
77 &:checked { 77 &:checked {
78 @include bem.sibling-elem('indicator') { 78 @include bem.sibling-elem('indicator') {
79 background-color: props.get(vars.$handle-border-color); 79 background-color: props.get(vars.$handle-border-color);
80 80
81 &::after { 81 &::after {
82 border-color: props.get(vars.$handle-border-color); 82 border-color: props.get(vars.$handle-border-color);
83 transform: translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0); 83 transform: translate(calc(props.get(vars.$inline-size) - props.get(vars.$block-size) + .5px), 0);
84 } 84 }
85 } 85 }
86 86
87 &:hover, 87 &:hover,
88 &:focus-visible { 88 &:focus-visible {
89 @include bem.sibling-elem('indicator') { 89 @include bem.sibling-elem('indicator') {
90 background-color: props.get(vars.$hover--handle-border-color); 90 background-color: props.get(vars.$hover--handle-border-color);
91 91
92 &::after { 92 &::after {
93 border-color: props.get(vars.$hover--handle-border-color); 93 border-color: props.get(vars.$hover--handle-border-color);
94 } 94 }
95 } 95 }
96 } 96 }
97 } 97 }
98 98
99 &:disabled { 99 &:disabled {
100 @include bem.sibling-elem('label') { 100 @include bem.sibling-elem('label') {
101 color: props.get(vars.$disabled--label-color); 101 color: props.get(vars.$disabled--label-color);
102 } 102 }
103 103
104 @include bem.sibling-elem('indicator') { 104 @include bem.sibling-elem('indicator') {
105 background-color: props.get(vars.$disabled--track-bg-color); 105 background-color: props.get(vars.$disabled--track-bg-color);
106 106
107 &::after { 107 &::after {
108 background-color: props.get(vars.$disabled--handle-bg-color); 108 background-color: props.get(vars.$disabled--handle-bg-color);
109 border-color: props.get(vars.$disabled--handle-border-color); 109 border-color: props.get(vars.$disabled--handle-border-color);
110 } 110 }
111 } 111 }
112 112
113 &:checked { 113 &:checked {
114 @include bem.sibling-elem('indicator') { 114 @include bem.sibling-elem('indicator') {
115 background-color: props.get(vars.$disabled--handle-border-color); 115 background-color: props.get(vars.$disabled--handle-border-color);
116 116
117 &::after { 117 &::after {
118 border-color: props.get(vars.$disabled--handle-border-color); 118 border-color: props.get(vars.$disabled--handle-border-color);
119 } 119 }
120 } 120 }
121 } 121 }
122 } 122 }
123 123
124 &:focus-visible { 124 &:focus-visible {
125 @include bem.sibling-elem('label') { 125 @include bem.sibling-elem('label') {
126 color: props.get(vars.$key-focus--label-color); 126 color: props.get(vars.$key-focus--label-color);
127 } 127 }
128 128
129 @include bem.sibling-elem('indicator') { 129 @include bem.sibling-elem('indicator') {
130 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 130 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
131 box-shadow: 131 box-shadow:
132 0 132 0
133 0 133 0
134 0 134 0
135 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 135 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
136 props.get(vars.$key-focus--outline-color); 136 props.get(vars.$key-focus--outline-color);
137 } 137 }
138 } 138 }
139 } 139 }
140 140
141 @include bem.modifier('standalone') { 141 @include bem.modifier('standalone') {
142 @include bem.elem('indicator') { 142 @include bem.elem('indicator') {
143 margin-block-start: 0; 143 margin-block-start: 0;
144 } 144 }
145 } 145 }
146 146
147 @include bem.modifier('accent') { 147 @include bem.modifier('accent') {
148 @include bem.elem('native') { 148 @include bem.elem('native') {
149 &:checked { 149 &:checked {
150 @include bem.sibling-elem('indicator') { 150 @include bem.sibling-elem('indicator') {
151 background-color: props.get(vars.$accent--handle-border-color); 151 background-color: props.get(vars.$accent--handle-border-color);
152 152
153 &::after { 153 &::after {
154 border-color: props.get(vars.$accent--handle-border-color); 154 border-color: props.get(vars.$accent--handle-border-color);
155 } 155 }
156 } 156 }
157 157
158 &:hover, 158 &:hover,
159 &:focus-visible { 159 &:focus-visible {
160 @include bem.sibling-elem('indicator') { 160 @include bem.sibling-elem('indicator') {
161 background-color: props.get(vars.$accent--hover--handle-border-color); 161 background-color: props.get(vars.$accent--hover--handle-border-color);
162 162
163 &::after { 163 &::after {
164 border-color: props.get(vars.$accent--hover--handle-border-color); 164 border-color: props.get(vars.$accent--hover--handle-border-color);
165 } 165 }
166 } 166 }
167 } 167 }
168 } 168 }
169 169
170 &:disabled { 170 &:disabled {
171 @include bem.sibling-elem('label') { 171 @include bem.sibling-elem('label') {
172 color: props.get(vars.$disabled--label-color); 172 color: props.get(vars.$disabled--label-color);
173 } 173 }
174 174
175 &:checked { 175 &:checked {
176 @include bem.sibling-elem('indicator') { 176 @include bem.sibling-elem('indicator') {
177 background-color: props.get(vars.$disabled--handle-border-color); 177 background-color: props.get(vars.$disabled--handle-border-color);
178 178
179 &::after { 179 &::after {
180 border-color: props.get(vars.$disabled--handle-border-color); 180 border-color: props.get(vars.$disabled--handle-border-color);
181 } 181 }
182 } 182 }
183 } 183 }
184 } 184 }
185 } 185 }
186 } 186 }
187 } 187 }
188} 188}
diff --git a/src/objects/_switch.vars.scss b/src/objects/_switch.vars.scss
index 85596af..10489a5 100644
--- a/src/objects/_switch.vars.scss
+++ b/src/objects/_switch.vars.scss
@@ -8,7 +8,7 @@ $label-gap: props.def(--o-switch--label-gap, props.get(core.$size--125)) !
8$border-width: props.def(--o-switch--border-width, props.get(core.$border-width--medium)) !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; 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; 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)) !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; 12$spacing-sibling: props.def(--o-switch--spacing-sibling, props.get(core.$size--300)) !default;
13 13
14$key-focus--border-width: props.def(--o-switch--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 14$key-focus--border-width: props.def(--o-switch--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
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 2b63737..9e4891d 100644
--- a/src/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -7,141 +7,141 @@
7@use 'table.vars' as vars; 7@use 'table.vars' as vars;
8 8
9@mixin styles { 9@mixin styles {
10 @include materialize-at-root(meta.module-variables('vars')); 10 @include materialize-at-root(meta.module-variables('vars'));
11 11
12 @include bem.object('table') { 12 @include bem.object('table') {
13 border-spacing: 0; 13 border-spacing: 0;
14 border-collapse: separate; 14 border-collapse: separate;
15 15
16 @include bem.modifier('fixed') { 16 @include bem.modifier('fixed') {
17 table-layout: fixed; 17 table-layout: fixed;
18 } 18 }
19 19
20 @include bem.elem('head-cell') { 20 @include bem.elem('head-cell') {
21 padding-block: props.get(vars.$pad-b); 21 padding-block: props.get(vars.$pad-b);
22 padding-inline: props.get(vars.$pad-i); 22 padding-inline: props.get(vars.$pad-i);
23 font-family: props.get(vars.$heading--font-family); 23 font-family: props.get(vars.$heading--font-family);
24 font-size: props.get(vars.$heading--font-size); 24 font-size: props.get(vars.$heading--font-size);
25 font-weight: props.get(vars.$heading--font-weight); 25 font-weight: props.get(vars.$heading--font-weight);
26 color: props.get(vars.$heading-color); 26 color: props.get(vars.$heading-color);
27 text-align: start; 27 text-align: start;
28 text-transform: props.get(vars.$heading--text-transform); 28 text-transform: props.get(vars.$heading--text-transform);
29 letter-spacing: props.get(vars.$heading--letter-spacing); 29 letter-spacing: props.get(vars.$heading--letter-spacing);
30 } 30 }
31 31
32 @include bem.elem('cell') { 32 @include bem.elem('cell') {
33 padding-block: props.get(vars.$pad-b); 33 padding-block: props.get(vars.$pad-b);
34 padding-inline: props.get(vars.$pad-i); 34 padding-inline: props.get(vars.$pad-i);
35 border-color: props.get(vars.$border-color); 35 border-color: props.get(vars.$border-color);
36 border-style: solid; 36 border-style: solid;
37 border-width: 0; 37 border-width: 0;
38 border-block-start-width: props.get(vars.$border-width); 38 border-block-start-width: props.get(vars.$border-width);
39 39
40 @include bem.modifier('divider') { 40 @include bem.modifier('divider') {
41 border-inline-end-width: props.get(vars.$border-width); 41 border-inline-end-width: props.get(vars.$border-width);
42 } 42 }
43 } 43 }
44 44
45 @include bem.elem('row') { 45 @include bem.elem('row') {
46 &:last-child { 46 &:last-child {
47 @include bem.elem('cell') { 47 @include bem.elem('cell') {
48 border-block-end-width: props.get(vars.$border-width); 48 border-block-end-width: props.get(vars.$border-width);
49 } 49 }
50 } 50 }
51 } 51 }
52 52
53 @include bem.modifier('flush') { 53 @include bem.modifier('flush') {
54 @include bem.elem('head-cell', 'cell') { 54 @include bem.elem('head-cell', 'cell') {
55 &:first-child { 55 &:first-child {
56 padding-inline-start: 0; 56 padding-inline-start: 0;
57 } 57 }
58 58
59 &:last-child { 59 &:last-child {
60 padding-inline-end: 0; 60 padding-inline-end: 0;
61 } 61 }
62 } 62 }
63 } 63 }
64 64
65 @include bem.modifier('box') { 65 @include bem.modifier('box') {
66 @include bem.elem('cell') { 66 @include bem.elem('cell') {
67 background-color: props.get(vars.$box--bg-color); 67 background-color: props.get(vars.$box--bg-color);
68 68
69 &:first-child { 69 &:first-child {
70 border-inline-start-width: props.get(vars.$border-width); 70 border-inline-start-width: props.get(vars.$border-width);
71 } 71 }
72 72
73 &:last-child { 73 &:last-child {
74 border-inline-end-width: props.get(vars.$border-width); 74 border-inline-end-width: props.get(vars.$border-width);
75 } 75 }
76 } 76 }
77 77
78 @include bem.elem('row') { 78 @include bem.elem('row') {
79 &:first-child { 79 &:first-child {
80 @include bem.elem('cell') { 80 @include bem.elem('cell') {
81 &:first-child { 81 &:first-child {
82 border-start-start-radius: props.get(vars.$rounding); 82 border-start-start-radius: props.get(vars.$rounding);
83 } 83 }
84 84
85 &:last-child { 85 &:last-child {
86 border-start-end-radius: props.get(vars.$rounding); 86 border-start-end-radius: props.get(vars.$rounding);
87 } 87 }
88 } 88 }
89 } 89 }
90 90
91 &:last-child { 91 &:last-child {
92 @include bem.elem('cell') { 92 @include bem.elem('cell') {
93 &:first-child { 93 &:first-child {
94 border-end-start-radius: props.get(vars.$rounding); 94 border-end-start-radius: props.get(vars.$rounding);
95 } 95 }
96 96
97 &:last-child { 97 &:last-child {
98 border-end-end-radius: props.get(vars.$rounding); 98 border-end-end-radius: props.get(vars.$rounding);
99 } 99 }
100 } 100 }
101 } 101 }
102 } 102 }
103 } 103 }
104 104
105 @include bem.modifier('interactive') { 105 @include bem.modifier('interactive') {
106 @include bem.elem('row') { 106 @include bem.elem('row') {
107 @include bem.elem('cell') { 107 @include bem.elem('cell') {
108 cursor: pointer; 108 cursor: pointer;
109 } 109 }
110 110
111 &:hover { 111 &:hover {
112 @include bem.elem('cell') { 112 @include bem.elem('cell') {
113 background-color: props.get(vars.$hover--bg-color); 113 background-color: props.get(vars.$hover--bg-color);
114 } 114 }
115 } 115 }
116 116
117 &:active { 117 &:active {
118 @include bem.elem('cell') { 118 @include bem.elem('cell') {
119 background-color: props.get(vars.$active--bg-color); 119 background-color: props.get(vars.$active--bg-color);
120 } 120 }
121 } 121 }
122 } 122 }
123 123
124 @include bem.modifier('box') { 124 @include bem.modifier('box') {
125 @include bem.elem('row') { 125 @include bem.elem('row') {
126 &:hover { 126 &:hover {
127 @include bem.elem('cell') { 127 @include bem.elem('cell') {
128 background-color: props.get(vars.$box--hover--bg-color); 128 background-color: props.get(vars.$box--hover--bg-color);
129 } 129 }
130 } 130 }
131 131
132 &:active { 132 &:active {
133 @include bem.elem('cell') { 133 @include bem.elem('cell') {
134 background-color: props.get(vars.$box--active--bg-color); 134 background-color: props.get(vars.$box--active--bg-color);
135 } 135 }
136 } 136 }
137 } 137 }
138 } 138 }
139 } 139 }
140 140
141 @include bem.modifier('sm') { 141 @include bem.modifier('sm') {
142 @include bem.elem('head-cell', 'cell') { 142 @include bem.elem('head-cell', 'cell') {
143 padding-block: props.get(vars.$pad-b--sm); 143 padding-block: props.get(vars.$pad-b--sm);
144 } 144 }
145 } 145 }
146 } 146 }
147} 147}
diff --git a/src/objects/_table.vars.scss b/src/objects/_table.vars.scss
index d1d53d7..b8d8093 100644
--- a/src/objects/_table.vars.scss
+++ b/src/objects/_table.vars.scss
@@ -4,7 +4,7 @@
4 4
5$pad-i: props.def(--o-table--pad-i, props.get(core.$size--175)) !default; 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; 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)) !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; 8$border-width: props.def(--o-table--border-width, props.get(core.$border-width--thin)) !default;
9 9
10$heading--font-family: props.def(--o-table--heading--font-family, props.get(core.$font--standard--family)) !default; 10$heading--font-family: props.def(--o-table--heading--font-family, props.get(core.$font--standard--family)) !default;
diff --git a/src/objects/_tabs.scss b/src/objects/_tabs.scss
deleted file mode 100644
index 61085c2..0000000
--- a/src/objects/_tabs.scss
+++ /dev/null
@@ -1,127 +0,0 @@
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 'tabs.vars';
9@use 'tabs.vars' as vars;
10
11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars'));
13
14 @include bem.object('tabs') {
15 position: relative;
16 display: flex;
17 gap: props.get(vars.$spacing);
18 min-inline-size: 0;
19 block-size: props.get(vars.$block-size);
20 padding-inline: calc(.5 * props.get(vars.$spacing));
21 margin-inline: calc(-.5 * props.get(vars.$spacing));
22 overflow-inline: auto;
23
24 &::after {
25 position: absolute;
26 inset-block-end: 0;
27 inset-inline: calc(.5 * props.get(vars.$spacing));
28 z-index: -10;
29 block-size: props.get(vars.$indicator--width);
30 content: '';
31 background-color: props.get(vars.$railing--bg-color);
32 }
33
34 @include bem.modifier('quiet') {
35 &::after {
36 display: none;
37 }
38 }
39
40 @include bem.modifier('adapt') {
41 block-size: 100%;
42 }
43
44 @include bem.elem('tab') {
45 position: relative;
46 display: flex;
47 align-items: center;
48 color: props.get(vars.$tab--text-color);
49 white-space: nowrap;
50 border-block: props.get(vars.$indicator--width) solid transparent;
51
52 &::before {
53 position: absolute;
54 inset-block-start: 50%;
55 inset-inline: calc(-1 * props.get(vars.$tab--pad-i));
56 z-index: -10;
57 block-size: 1.5em;
58 content: '';
59 border-radius: props.get(vars.$rounding);
60 transform: translateY(-50%);
61 }
62
63 &:link,
64 &:visited {
65 &:hover,
66 &:active,
67 &:focus-visible {
68 color: props.get(vars.$tab--selected--text-color);
69 }
70
71 &:focus-visible {
72 &::before {
73 color: props.get(vars.$key-focus--text-color);
74 text-decoration: none;
75 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
76 box-shadow: 0 0 0
77 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
78 props.get(vars.$key-focus--outline-color);
79 }
80 }
81 }
82
83 @include bem.is('selected') {
84 color: props.get(vars.$tab--selected--text-color);
85 border-block-end-color: props.get(vars.$tab--selected--text-color);
86 }
87 }
88
89 @include bem.elem('caret') {
90 display: none;
91 }
92
93 @include bem.modifier('accent') {
94 @include bem.elem('tab') {
95 @include bem.is('selected') {
96 color: props.get(vars.$tab--accent--text-color);
97 border-block-end-color: props.get(vars.$tab--accent--text-color);
98 }
99 }
100 }
101
102 @include bem.is('collapsed') {
103 @include bem.elem('tab') {
104 display: none;
105
106 @include bem.is('selected') {
107 display: flex;
108 color: props.get(vars.$tab--text-color);
109 border-block-end-color: transparent;
110
111 &:link,
112 &:visited {
113 &:hover,
114 &:active,
115 &:focus-visible {
116 color: props.get(vars.$tab--selected--text-color);
117 }
118 }
119 }
120 }
121
122 @include bem.elem('caret') {
123 display: block;
124 }
125 }
126 }
127}
diff --git a/src/objects/_tabs.vars.scss b/src/objects/_tabs.vars.scss
deleted file mode 100644
index 08b24cb..0000000
--- a/src/objects/_tabs.vars.scss
+++ /dev/null
@@ -1,25 +0,0 @@
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-tabs--block-size, props.get(core.$size--700)) !default;
7$rounding: props.def(--o-tabs--rounding, props.get(core.$rounding)) !default;
8$spacing: props.def(--o-tabs--spacing, props.get(core.$size--400)) !default;
9$tab--pad-i: props.def(--o-tabs--tab--pad-i, props.get(core.$size--50)) !default;
10
11$indicator--width: props.def(--o-tabs--indicator--width, props.get(core.$border-width--medium)) !default;
12
13$key-focus--border-width: props.def(--o-tabs--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
14$key-focus--border-offset: props.def(--o-tabs--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
15$key-focus--outline-width: props.def(--o-tabs--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
16
17$tab--text-color: props.def(--o-tabs--tab--text-color, props.get(core.$theme, --text-mute), 'color') !default;
18$tab--selected--text-color: props.def(--o-tabs--tab--selected--text-color, props.get(core.$theme, --heading), 'color') !default;
19$tab--accent--text-color: props.def(--o-tabs--tab--accent--text-color, props.get(core.$theme, --accent, --1100), 'color') !default;
20
21$railing--bg-color: props.def(--o-tabs--railing--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
22
23$key-focus--text-color: props.def(--o-tabs--key-focus--text-color, props.get(core.$theme, --focus, --text), 'color') !default;
24$key-focus--border-color: props.def(--o-tabs--key-focus--border-color, props.get(core.$theme, --focus, --border), 'color') !default;
25$key-focus--outline-color: props.def(--o-tabs--key-focus--outline-color, props.get(core.$theme, --focus, --outline), 'color') !default;
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index 6c0e7d2..b89e148 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -7,159 +7,181 @@
7@use 'text-field.vars' as vars; 7@use 'text-field.vars' as vars;
8 8
9@mixin -invalid { 9@mixin -invalid {
10 $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); 10 $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
11 11
12 @include bem.sibling-elem('bg') { 12 @include bem.sibling-elem('bg') {
13 inset-block: $focus-border-offset; 13 inset-block: $focus-border-offset;
14 inset-inline: $focus-border-offset; 14 inset-inline: $focus-border-offset;
15 border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color); 15 border: props.get(vars.$focus--border-width) solid props.get(vars.$error--border-color);
16 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); 16 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
17 } 17 }
18 18
19 &:hover { 19 &:hover {
20 @include bem.sibling-elem('bg') { 20 @include bem.sibling-elem('bg') {
21 border-color: props.get(vars.$error--hover--border-color); 21 border-color: props.get(vars.$error--hover--border-color);
22 } 22 }
23 } 23 }
24 24
25 &:focus { 25 &:focus {
26 @include bem.sibling-elem('bg') { 26 @include bem.sibling-elem('bg') {
27 border-color: props.get(vars.$error--focus--border-color); 27 border-color: props.get(vars.$error--focus--border-color);
28 } 28 }
29 } 29 }
30} 30}
31 31
32@mixin -keyboard-focus { 32@mixin -keyboard-focus {
33 @include bem.sibling-elem('bg') { 33 @include bem.sibling-elem('bg') {
34 border-color: props.get(vars.$key-focus--border-color); 34 outline: props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width);
35 outline: props.get(vars.$key-focus--outline-color) solid props.get(vars.$key-focus--border-width); 35 border-color: props.get(vars.$key-focus--border-color);
36 //outline-offset: props.get(vars.$focus --border); 36 //outline-offset: props.get(vars.$focus --border);
37 } 37 }
38} 38}
39 39
40@mixin styles { 40@mixin styles {
41 @include materialize-at-root(meta.module-variables('vars')); 41 @include materialize-at-root(meta.module-variables('vars'));
42 42
43 @include bem.object('text-field') { 43 @include bem.object('text-field') {
44 $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width)); 44 $focus-border-offset: calc(props.get(vars.$border-width) - props.get(vars.$focus--border-width));
45 45
46 position: relative; 46 position: relative;
47 min-inline-size: 0; 47 min-inline-size: 0;
48 background-color: props.get(vars.$bg-color); 48 background-color: props.get(vars.$bg-color);
49 border-radius: props.get(vars.$rounding); 49 border-radius: props.get(vars.$rounding);
50 50
51 @include bem.elem('bg') { 51 @include bem.elem('bg') {
52 position: absolute; 52 position: absolute;
53 inset-block: 0; 53 inset-block: 0;
54 inset-inline: 0; 54 inset-inline: 0;
55 display: block; 55 display: block;
56 pointer-events: none; 56 pointer-events: none;
57 border: props.get(vars.$border-width) solid props.get(vars.$border-color); 57 border: props.get(vars.$border-width) solid props.get(vars.$border-color);
58 border-radius: props.get(vars.$rounding); 58 border-radius: props.get(vars.$rounding);
59 } 59 }
60 60
61 @include bem.elem('native') { 61 @include bem.elem('native') {
62 box-sizing: border-box; 62 box-sizing: border-box;
63 inline-size: 100%; 63 inline-size: 100%;
64 padding-block: calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1)); 64 padding-block: calc(props.get(vars.$pad-b) - .5em * (props.get(vars.$line-height) - 1));
65 padding-inline: props.get(vars.$pad-i); 65 padding-inline: props.get(vars.$pad-i);
66 font: inherit; 66 font: inherit;
67 line-height: props.get(vars.$line-height); 67 line-height: props.get(vars.$line-height);
68 color: props.get(vars.$text-color); 68 color: props.get(vars.$text-color);
69 appearance: none; 69 appearance: none;
70 resize: none; 70 resize: none;
71 background-color: transparent; 71 background-color: transparent;
72 border: 1px solid transparent; 72 border: 1px solid transparent;
73 73
74 &::placeholder { 74 &::placeholder {
75 font-style: italic; 75 font-style: italic;
76 color: props.get(vars.$placeholder-color); 76 color: props.get(vars.$placeholder-color);
77 opacity: 1; 77 opacity: 1;
78 } 78 }
79 79
80 &:hover { 80 &:hover {
81 @include bem.sibling-elem('bg') { 81 @include bem.sibling-elem('bg') {
82 border-color: props.get(vars.$hover--border-color); 82 border-color: props.get(vars.$hover--border-color);
83 } 83 }
84 } 84 }
85 85
86 &:focus { 86 &:focus {
87 outline: 0; 87 outline: 0;
88 88
89 @include bem.sibling-elem('bg') { 89 @include bem.sibling-elem('bg') {
90 inset-block: $focus-border-offset; 90 inset-block: $focus-border-offset;
91 inset-inline: $focus-border-offset; 91 inset-inline: $focus-border-offset;
92 border: props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color); 92 border: props.get(vars.$focus--border-width) solid props.get(vars.$focus--border-color);
93 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); 93 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
94 } 94 }
95 } 95 }
96 96
97 &:invalid { 97 &:invalid {
98 @include -invalid; 98 @include -invalid;
99 } 99 }
100 100
101 &:focus-visible, 101 &:focus-visible,
102 &:invalid:focus-visible { 102 &:invalid:focus-visible {
103 @include -keyboard-focus; 103 @include -keyboard-focus;
104 } 104 }
105 } 105 }
106 106
107 @include bem.modifier('extended') { 107 @include bem.modifier('extended') {
108 padding: props.get(vars.$extended--pad); 108 padding: props.get(vars.$extended--pad);
109 109
110 @include bem.multi('&', 'elem' 'bg') { 110 @include bem.multi('&', 'elem' 'bg') {
111 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad)); 111 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad));
112 } 112 }
113 113
114 @include bem.elem('native') { 114 @include bem.elem('native') {
115 &:focus { 115 &:focus {
116 @include bem.sibling-elem('bg') { 116 @include bem.sibling-elem('bg') {
117 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset); 117 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$extended--pad) - $focus-border-offset);
118 } 118 }
119 } 119 }
120 } 120 }
121 } 121 }
122 122
123 @include bem.is('invalid') { 123 @include bem.modifier('pill') {
124 @include bem.elem('native') { 124 @include bem.multi('&', 'elem' 'bg') {
125 @include -invalid; 125 border-radius: 100em;
126 }
126 127
127 &:focus-visible { 128 @include bem.elem('native') {
128 @include -keyboard-focus; 129 padding-inline: props.get(vars.$pad-i-pill);
129 }
130 }
131 }
132 130
133 @include bem.is('disabled') { 131 &:focus {
134 background-color: props.get(vars.$disabled--bg-color); 132 @include bem.sibling-elem('bg') {
133 border-radius: 100em;
134 }
135 }
136 }
135 137
136 @include bem.elem('native') { 138 @include bem.modifier('extended') {
137 color: props.get(vars.$disabled--text-color); 139 @include bem.elem('native') {
140 padding-inline: props.get(vars.$pad-i);
141 }
142 }
143 }
138 144
139 &::placeholder { 145 @include bem.is('invalid') {
140 color: props.get(vars.$disabled--placeholder-color); 146 @include bem.elem('native') {
141 } 147 @include -invalid;
142 }
143 148
144 @include bem.elem('bg') { 149 &:focus-visible {
145 border-color: props.get(vars.$disabled--border-color); 150 @include -keyboard-focus;
146 } 151 }
152 }
153 }
147 154
148 @include bem.is('invalid') { 155 @include bem.is('disabled') {
149 @include bem.elem('native') { 156 background-color: props.get(vars.$disabled--bg-color);
150 @include bem.sibling-elem('bg') {
151 border-color: props.get(vars.$disabled--border-color);
152 }
153 }
154 }
155 157
156 @include bem.elem('native') { 158 @include bem.elem('native') {
157 &:invalid { 159 color: props.get(vars.$disabled--text-color);
158 @include bem.sibling-elem('bg') { 160
159 border-color: props.get(vars.$disabled--border-color); 161 &::placeholder {
160 } 162 color: props.get(vars.$disabled--placeholder-color);
161 } 163 }
162 } 164 }
163 } 165
164 } 166 @include bem.elem('bg') {
167 border-color: props.get(vars.$disabled--border-color);
168 }
169
170 @include bem.is('invalid') {
171 @include bem.elem('native') {
172 @include bem.sibling-elem('bg') {
173 border-color: props.get(vars.$disabled--border-color);
174 }
175 }
176 }
177
178 @include bem.elem('native') {
179 &:invalid {
180 @include bem.sibling-elem('bg') {
181 border-color: props.get(vars.$disabled--border-color);
182 }
183 }
184 }
185 }
186 }
165} 187}
diff --git a/src/objects/_text-field.vars.scss b/src/objects/_text-field.vars.scss
index 833eacb..51099d8 100644
--- a/src/objects/_text-field.vars.scss
+++ b/src/objects/_text-field.vars.scss
@@ -4,9 +4,10 @@
4 4
5$line-height: props.def(--o-text-field--line-height, 1.4) !default; 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; 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;
7$pad-b: props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default; 8$pad-b: props.def(--o-text-field--pad-b, props.get(core.$size--125)) !default;
8$border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default; 9$border-width: props.def(--o-text-field--border-width, props.get(core.$border-width--thin)) !default;
9$rounding: props.def(--o-text-field--rounding, props.get(core.$rounding)) !default; 10$rounding: props.def(--o-text-field--rounding, props.get(core.$rounding--sm)) !default;
10 11
11$extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default; 12$extended--pad: props.def(--o-text-field--extended--pad, props.get(core.$size--50)) !default;
12 13
diff --git a/src/objects/_thumbnail.scss b/src/objects/_thumbnail.scss
index 73a8cb0..60a98af 100644
--- a/src/objects/_thumbnail.scss
+++ b/src/objects/_thumbnail.scss
@@ -9,96 +9,96 @@
9@use 'thumbnail.vars' as vars; 9@use 'thumbnail.vars' as vars;
10 10
11@mixin styles { 11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars')); 12 @include materialize-at-root(meta.module-variables('vars'));
13 13
14 @include bem.object('thumbnail') { 14 @include bem.object('thumbnail') {
15 position: relative; 15 position: relative;
16 display: block; 16 display: block;
17 flex: 0 0 auto; 17 flex: 0 0 auto;
18 inline-size: props.get(vars.$size); 18 inline-size: props.get(vars.$size);
19 block-size: props.get(vars.$size); 19 block-size: props.get(vars.$size);
20 overflow: hidden; 20 overflow: hidden;
21 border-radius: props.get(vars.$rounding); 21 outline: props.get(vars.$border-color) solid props.get(vars.$border-width);
22 outline: props.get(vars.$border-color) solid props.get(vars.$border-width); 22 outline-offset: calc(-1 * props.get(vars.$border-width));
23 outline-offset: calc(-1 * props.get(vars.$border-width)); 23 border-radius: props.get(vars.$rounding);
24 opacity: .75; 24 opacity: .75;
25 25
26 &:hover, 26 &:hover,
27 &:active, 27 &:active,
28 &:focus-visible { 28 &:focus-visible {
29 outline-color: props.get(vars.$hover--border-color); 29 outline-color: props.get(vars.$hover--border-color);
30 opacity: 1; 30 opacity: 1;
31 } 31 }
32 32
33 @include bem.is('selected') { 33 @include bem.is('selected') {
34 $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width)); 34 $focus-border-offset: calc(-1 * props.get(vars.$selected--border-width));
35 35
36 margin: $focus-border-offset; 36 margin: $focus-border-offset;
37 border: props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color); 37 outline: none;
38 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); 38 border: props.get(vars.$selected--border-width) solid props.get(vars.$selected--border-color);
39 outline: none; 39 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
40 opacity: 1; 40 opacity: 1;
41 } 41 }
42 42
43 @include bem.elem('image') { 43 @include bem.elem('image') {
44 position: absolute; 44 position: absolute;
45 inset-block-start: 0; 45 inset-block-start: 0;
46 inset-inline-start: 0; 46 inset-inline-start: 0;
47 display: block; 47 display: block;
48 inline-size: 100%; 48 inline-size: 100%;
49 block-size: 100%; 49 block-size: 100%;
50 object-fit: cover; 50 object-fit: cover;
51 object-position: center center; 51 object-position: center center;
52 } 52 }
53 53
54 @include bem.elem('icon') { 54 @include bem.elem('icon') {
55 position: absolute; 55 position: absolute;
56 inset-block-start: 50%; 56 inset-block-start: 50%;
57 inset-inline-start: 50%; 57 inset-inline-start: 50%;
58 transform: translate(-50%, -50%); 58 transform: translate(-50%, -50%);
59 } 59 }
60 60
61 &:focus-visible { 61 &:focus-visible {
62 $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset)); 62 $focus-border-offset: calc(-1 * props.get(vars.$key-focus--border-offset));
63 63
64 margin: $focus-border-offset; 64 margin: $focus-border-offset;
65 border: props.get(vars.$key-focus--border-offset) solid transparent; 65 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
66 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset); 66 outline-offset: 0;
67 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 67 border: props.get(vars.$key-focus--border-offset) solid transparent;
68 outline-offset: 0; 68 border-radius: calc(props.get(vars.$rounding) - $focus-border-offset);
69 box-shadow: 69 box-shadow:
70 0 70 0
71 0 71 0
72 0 72 0
73 calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) 73 calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width))
74 props.get(vars.$key-focus--outline-color); 74 props.get(vars.$key-focus--outline-color);
75 } 75 }
76 76
77 @each $theme in map.keys(props.get(vars.$static-themes)) { 77 @each $theme in map.keys(props.get(vars.$static-themes)) {
78 @include bem.modifier(string.slice($theme, 3)) { 78 @include bem.modifier(string.slice($theme, 3)) {
79 outline-color: props.get(vars.$static-themes, $theme, --border); 79 outline-color: props.get(vars.$static-themes, $theme, --border);
80 80
81 &:hover, 81 &:hover,
82 &:active, 82 &:active,
83 &:focus-visible { 83 &:focus-visible {
84 outline-color: props.get(vars.$static-themes, $theme, --hover, --border); 84 outline-color: props.get(vars.$static-themes, $theme, --hover, --border);
85 } 85 }
86 86
87 @include bem.is('selected') { 87 @include bem.is('selected') {
88 border-color: props.get(vars.$static-themes, $theme, --selected, --border); 88 border-color: props.get(vars.$static-themes, $theme, --selected, --border);
89 } 89 }
90 90
91 &:focus-visible { 91 &:focus-visible {
92 border-color: transparent; 92 outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border);
93 outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border); 93 border-color: transparent;
94 box-shadow: 94 box-shadow:
95 0 95 0
96 0 96 0
97 0 97 0
98 calc(props.get(vars.$key-focus--outline-width) + props.get(vars.$key-focus--border-width)) 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); 99 props.get(vars.$static-themes, $theme, --key-focus, --outline);
100 } 100 }
101 } 101 }
102 } 102 }
103 } 103 }
104} 104}
diff --git a/src/objects/_thumbnail.vars.scss b/src/objects/_thumbnail.vars.scss
index ba8cebe..e49e52e 100644
--- a/src/objects/_thumbnail.vars.scss
+++ b/src/objects/_thumbnail.vars.scss
@@ -4,7 +4,7 @@
4@use '../core.vars' as core; 4@use '../core.vars' as core;
5 5
6$size: props.def(--o-thumbnail--size, props.get(core.$size--700)) !default; 6$size: props.def(--o-thumbnail--size, props.get(core.$size--700)) !default;
7$rounding: props.def(--o-thumbnail--rounding, props.get(core.$rounding)) !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; 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; 9$border-width: props.def(--o-thumbnail--border-width, props.get(core.$border-width--thin)) !default;
10 10
@@ -28,24 +28,24 @@ $size--md: props.def(--o-thumbnail--size, props.get(core.$size--600), 'md') !def
28$static-themes: props.def(--o-thumbnail, (), 'color'); 28$static-themes: props.def(--o-thumbnail, (), 'color');
29 29
30@each $theme in map.keys(props.get(core.$transparent-colors)) { 30@each $theme in map.keys(props.get(core.$transparent-colors)) {
31 $thumbnail-theme: --static-#{string.slice($theme, 3)}; 31 $thumbnail-theme: --static-#{string.slice($theme, 3)};
32 32
33 $static-themes: props.merge($static-themes, ( 33 $static-themes: props.merge($static-themes, (
34 $thumbnail-theme: ( 34 $thumbnail-theme: (
35 --border: props.get(core.$transparent-colors, $theme, --400), 35 --border: props.get(core.$transparent-colors, $theme, --400),
36 36
37 --hover: ( 37 --hover: (
38 --border: props.get(core.$transparent-colors, $theme, --500), 38 --border: props.get(core.$transparent-colors, $theme, --500),
39 ), 39 ),
40 40
41 --selected: ( 41 --selected: (
42 --border: props.get(core.$transparent-colors, $theme, --900), 42 --border: props.get(core.$transparent-colors, $theme, --900),
43 ), 43 ),
44 44
45 --key-focus: ( 45 --key-focus: (
46 --border: props.get(core.$transparent-colors, $theme, --900), 46 --border: props.get(core.$transparent-colors, $theme, --900),
47 --outline: props.get(core.$transparent-colors, $theme, --300), 47 --outline: props.get(core.$transparent-colors, $theme, --300),
48 ), 48 ),
49 ) 49 )
50 )); 50 ));
51} 51}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-10-25 11:18:29 +0000