summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_action-button.scss46
-rw-r--r--src/objects/_action-button.vars.scss42
-rw-r--r--src/objects/_avatar.scss11
-rw-r--r--src/objects/_avatar.vars.scss6
-rw-r--r--src/objects/_badge.vars.scss6
-rw-r--r--src/objects/_button.vars.scss20
-rw-r--r--src/objects/_card.scss47
-rw-r--r--src/objects/_card.vars.scss12
-rw-r--r--src/objects/_divider.scss55
-rw-r--r--src/objects/_divider.vars.scss8
-rw-r--r--src/objects/_figure.scss26
-rw-r--r--src/objects/_figure.vars.scss9
-rw-r--r--src/objects/_heading.scss3
-rw-r--r--src/objects/_heading.vars.scss23
-rw-r--r--src/objects/_icon.vars.scss2
-rw-r--r--src/objects/_navbar.scss191
-rw-r--r--src/objects/_navbar.vars.scss84
-rw-r--r--src/objects/_placeholders.scss22
-rw-r--r--src/objects/_placeholders.vars.scss6
-rw-r--r--src/objects/_popover.scss4
-rw-r--r--src/objects/_tabbar.scss113
-rw-r--r--src/objects/_tabbar.vars.scss25
22 files changed, 684 insertions, 77 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index ca047bc..1dd4b84 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -137,6 +137,10 @@
137 } 137 }
138 } 138 }
139 139
140 @include bem.elem('label') {
141 margin-inline: props.get(vars.$pad-i-label);
142 }
143
140 @include -apply-theme(vars.$default-theme); 144 @include -apply-theme(vars.$default-theme);
141 145
142 @each $theme in map.keys(props.get(vars.$themes)) { 146 @each $theme in map.keys(props.get(vars.$themes)) {
@@ -154,26 +158,54 @@
154 } 158 }
155 } 159 }
156 160
157 @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { 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 {
158 @include bem.modifier($mod) { 167 @include bem.modifier($mod) {
159 padding-block: props.get($pad-b); 168 padding-block: props.get($pad-b);
160 padding-inline: props.get($pad-i); 169 padding-inline: props.get($pad-i);
161 font-size: props.get($font-size); 170 font-size: props.get($font-size);
162 171
172 @include bem.elem('label') {
173 margin-inline: props.get($pad-i-label);
174 }
175
163 @include bem.modifier('pill') { 176 @include bem.modifier('pill') {
164 padding-inline: props.get($pad-i-pill); 177 padding-inline: props.get($pad-i-pill);
165 } 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 }
166 } 184 }
167 } 185 }
168 186
169 @include bem.modifier('icon') { 187 @include bem.modifier('align-block') {
170 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); 188 margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width));
171 padding-inline: 0; 189
190 @include bem.modifier('pill') {
191 margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width));
192 }
172 193
173 @each $mod, $pad-i, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { 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 {
174 @include bem.modifier($mod) { 199 @include bem.modifier($mod) {
175 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); 200 margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width));
176 padding-inline: 0; 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 }
177 } 209 }
178 } 210 }
179 } 211 }
diff --git a/src/objects/_action-button.vars.scss b/src/objects/_action-button.vars.scss
index 9afd5d7..8c3d510 100644
--- a/src/objects/_action-button.vars.scss
+++ b/src/objects/_action-button.vars.scss
@@ -5,35 +5,39 @@
5 5
6$line-height: props.def(--o-action-button--line-height, 1.4) !default; 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; 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;
8$pad-i-pill: props.def(--o-action-button--pad-i-pill, props.get(core.$size--200)) !default; 9$pad-i-pill: props.def(--o-action-button--pad-i-pill, props.get(core.$size--200)) !default;
9$pad-b: props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default; 10$pad-b: props.def(--o-action-button--pad-b, props.get(core.$size--85)) !default;
10$border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default; 11$border-width: props.def(--o-action-button--border-width, props.get(core.$border-width--thin)) !default;
11$rounding: props.def(--o-action-button--rounding, props.get(core.$rounding)) !default; 12$rounding: props.def(--o-action-button--rounding, props.get(core.$rounding)) !default;
12$font-size: props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default; 13$font-size: props.def(--o-action-button--font-size, props.get(core.$font-size--100)) !default;
13 14
14$pad-i--sm: props.def(--o-action-button--sm--pad-i, props.get(core.$size--100)) !default; 15$pad-i--sm: props.def(--o-action-button--sm--pad-i, props.get(core.$size--100)) !default;
15$pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--150)) !default; 16$pad-i-label--sm: props.def(--o-action-button--sm--pad-i-label, props.get(core.$size--25)) !default;
16$pad-b--sm: props.def(--o-action-button--sm--pad-b, props.get(core.$size--40)) !default; 17$pad-i-pill--sm: props.def(--o-action-button--sm--pad-i-pill, props.get(core.$size--150)) !default;
17$font-size--sm: props.def(--o-action-button--sm--font-size, props.get(core.$font-size--75)) !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;
18 20
19$pad-i--lg: props.def(--o-action-button--lg--pad-i, props.get(core.$size--175)) !default; 21$pad-i--lg: props.def(--o-action-button--lg--pad-i, props.get(core.$size--175)) !default;
20$pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--225)) !default; 22$pad-i-label--lg: props.def(--o-action-button--lg--pad-i-label, props.get(core.$size--100)) !default;
21$pad-b--lg: props.def(--o-action-button--lg--pad-b, props.get(core.$size--115)) !default; 23$pad-i-pill--lg: props.def(--o-action-button--lg--pad-i-pill, props.get(core.$size--250)) !default;
22$font-size--lg: props.def(--o-action-button--lg--font-size, props.get(core.$font-size--150)) !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;
23 26
24$pad-i--xl: props.def(--o-action-button--xl--pad-i, props.get(core.$size--225)) !default; 27$pad-i--xl: props.def(--o-action-button--xl--pad-i, props.get(core.$size--225)) !default;
25$pad-i-pill--xl: props.def(--o-action-button--xl--pad-i-pill, props.get(core.$size--300)) !default; 28$pad-i-label--xl: props.def(--o-action-button--xl--pad-i-label, props.get(core.$size--150)) !default;
26$pad-b--xl: props.def(--o-action-button--xl--pad-b, 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;
27$font-size--xl: props.def(--o-action-button--xl--font-size, props.get(core.$font-size--200)) !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;
28 32
29$key-focus--border-width: props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default; 33$key-focus--border-width: props.def(--o-action-button--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
30$key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default; 34$key-focus--border-offset: props.def(--o-action-button--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
31$key-focus--outline-width: props.def(--o-action-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default; 35$key-focus--outline-width: props.def(--o-action-button--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
32 36
33$fixed-sizes: ( 37$fixed-sizes: (
34 'sm' $pad-i--sm $pad-i-pill--sm $pad-b--sm $font-size--sm, 38 '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-pill--lg $pad-b--lg $font-size--lg, 39 '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-pill--xl $pad-b--xl $font-size--xl, 40 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--xl $pad-b--xl $font-size--xl,
37) !default; 41) !default;
38 42
39$themes: props.def(--o-action-button, (), 'color'); 43$themes: props.def(--o-action-button, (), 'color');
@@ -68,9 +72,9 @@ $default-theme: map.deep-merge((
68 ), 72 ),
69 73
70 --selected: ( 74 --selected: (
71 --bg-color: props.get(core.$theme, --text-mute), 75 --bg-color: props.get(core.$theme, --heading),
72 --label-color: props.get(core.$theme, --base, --50), 76 --label-color: props.get(core.$theme, --base, --50),
73 --border-color: props.get(core.$theme, --text-mute), 77 --border-color: props.get(core.$theme, --heading),
74 78
75 --hover: ( 79 --hover: (
76 --bg-color: props.get(core.$theme, --text), 80 --bg-color: props.get(core.$theme, --text),
@@ -79,9 +83,9 @@ $default-theme: map.deep-merge((
79 ), 83 ),
80 84
81 --active: ( 85 --active: (
82 --bg-color: props.get(core.$theme, --heading), 86 --bg-color: props.get(core.$theme, --text-mute),
83 --label-color: props.get(core.$theme, --base, --50), 87 --label-color: props.get(core.$theme, --base, --50),
84 --border-color: props.get(core.$theme, --heading), 88 --border-color: props.get(core.$theme, --text-mute),
85 ), 89 ),
86 90
87 --disabled: ( 91 --disabled: (
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index fc4ffcd..81396e3 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -11,7 +11,7 @@
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)),
@@ -94,6 +94,15 @@
94 } 94 }
95 } 95 }
96 96
97 @include bem.modifier('colored-gradient') {
98 @include bem.elem('content') {
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
97 @each $mod, $size, $font-size, $indicator-size in vars.$sizes { 106 @each $mod, $size, $font-size, $indicator-size in vars.$sizes {
98 @include bem.modifier($mod) { 107 @include bem.modifier($mod) {
99 font-size: props.get($font-size); 108 font-size: props.get($font-size);
diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss
index 72fb397..9986de5 100644
--- a/src/objects/_avatar.vars.scss
+++ b/src/objects/_avatar.vars.scss
@@ -39,6 +39,12 @@ $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
diff --git a/src/objects/_badge.vars.scss b/src/objects/_badge.vars.scss
index d96d6c4..ff07148 100644
--- a/src/objects/_badge.vars.scss
+++ b/src/objects/_badge.vars.scss
@@ -40,7 +40,7 @@ $sizes: (
40 40
41$default-theme-override: () !default; 41$default-theme-override: () !default;
42$default-theme: props.def(--o-badge, ( 42$default-theme: props.def(--o-badge, (
43 --bg: props.get(core.$theme, --text-mute), 43 --bg: props.get(core.$theme, --heading),
44 --label: props.get(core.$theme, --bg-l2), 44 --label: props.get(core.$theme, --bg-l2),
45 45
46 --hover: ( 46 --hover: (
@@ -49,7 +49,7 @@ $default-theme: props.def(--o-badge, (
49 ), 49 ),
50 50
51 --active: ( 51 --active: (
52 --bg: props.get(core.$theme, --heading), 52 --bg: props.get(core.$theme, --text-mute),
53 --label: props.get(core.$theme, --bg-l2), 53 --label: props.get(core.$theme, --bg-l2),
54 ), 54 ),
55 55
@@ -73,7 +73,7 @@ $default-theme: props.def(--o-badge, (
73 --label: props.get(core.$theme, --heading), 73 --label: props.get(core.$theme, --heading),
74 ), 74 ),
75 ) 75 )
76), 'color'); 76), 'color') !default;
77$default-theme: props.merge($default-theme, $default-theme-override); 77$default-theme: props.merge($default-theme, $default-theme-override);
78 78
79$static-themes: props.def(--o-badge, (), 'color'); 79$static-themes: props.def(--o-badge, (), 'color');
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index bd3de91..4f7b552 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -5,14 +5,14 @@
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$pad-i: props.def(--o-button--pad-i, props.get(core.$size--200)) !default;
8$pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--75)) !default; 8$pad-i-label: props.def(--o-button--pad-i-label, props.get(core.$size--50)) !default;
9$pad-b: props.def(--o-button--pad-b, props.get(core.$size--65)) !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; 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; 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; 12$font-size: props.def(--o-button--font-size, props.get(core.$font-size--100)) !default;
13 13
14$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--150)) !default; 14$pad-i--sm: props.def(--o-button--sm--pad-i, props.get(core.$size--150)) !default;
15$pad-i-label--sm: props.def(--o-button--sm--pad-i-label, props.get(core.$size--50)) !default; 15$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; 16$pad-b--sm: props.def(--o-button--sm--pad-b, props.get(core.$size--25)) !default;
17$font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default; 17$font-size--sm: props.def(--o-button--sm--font-size, props.get(core.$font-size--75)) !default;
18 18
@@ -66,22 +66,22 @@ $default-theme: props.def(--o-button, (
66 ), 66 ),
67 67
68 --primary: ( 68 --primary: (
69 --bg: props.get(core.$theme, --base, --800), 69 --bg: props.get(core.$theme, --base, --900),
70 --label: props.get(core.$theme, --base, --800-text), 70 --label: props.get(core.$theme, --base, --900-text),
71 --outline-border: props.get(core.$theme, --base, --800), 71 --outline-border: props.get(core.$theme, --base, --900),
72 --outline-label: props.get(core.$theme, --text), 72 --outline-label: props.get(core.$theme, --text),
73 73
74 --hover: ( 74 --hover: (
75 --bg: props.get(core.$theme, --base, --900), 75 --bg: props.get(core.$theme, --base, --800),
76 --label: props.get(core.$theme, --base, --900-text), 76 --label: props.get(core.$theme, --base, --800-text),
77 ), 77 ),
78 78
79 --active: ( 79 --active: (
80 --bg: props.get(core.$theme, --base, --900), 80 --bg: props.get(core.$theme, --base, --700),
81 --label: props.get(core.$theme, --base, --900-text), 81 --label: props.get(core.$theme, --base, --700-text),
82 ), 82 ),
83 ), 83 ),
84), 'color'); 84), 'color') !default;
85$default-theme: props.merge($default-theme, $default-theme-override); 85$default-theme: props.merge($default-theme, $default-theme-override);
86 86
87$static-themes: props.def(--o-button, (), 'color'); 87$static-themes: props.def(--o-button, (), 'color');
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 99eb6f4..c87e676 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -55,11 +55,13 @@
55 } 55 }
56 56
57 @include bem.elem('image') { 57 @include bem.elem('image') {
58 position: relative;
58 display: block; 59 display: block;
59 flex: 0 0 auto; 60 flex: 0 0 auto;
60 inline-size: 100%; 61 inline-size: 100%;
62 overflow: hidden;
61 object-fit: cover; 63 object-fit: cover;
62 transition: transform .2s, opacity .2s; 64 transition: background-color .2s, transform .2s, opacity .2s;
63 65
64 &:first-child { 66 &:first-child {
65 border-start-start-radius: props.get(vars.$rounding); 67 border-start-start-radius: props.get(vars.$rounding);
@@ -76,6 +78,21 @@
76 } 78 }
77 } 79 }
78 80
81 @include bem.elem('image-img') {
82 display: block;
83 inline-size: 100%;
84 object-fit: cover;
85 }
86
87 @include bem.elem('image-overlay') {
88 position: absolute;
89 inset-block-end: 0;
90 inset-inline: 0;
91 z-index: 5;
92 padding-block: props.get(vars.$image-overlay--pad-b);
93 padding-inline: props.get(vars.$image-overlay--pad-i);
94 }
95
79 @include bem.elem('body') { 96 @include bem.elem('body') {
80 flex: 1 0 auto; 97 flex: 1 0 auto;
81 padding-block: props.get(vars.$pad-b); 98 padding-block: props.get(vars.$pad-b);
@@ -128,7 +145,7 @@
128 } 145 }
129 146
130 @include bem.modifier('quiet') { 147 @include bem.modifier('quiet') {
131 position: relative; 148 margin-inline: 0;
132 background-color: transparent; 149 background-color: transparent;
133 border: 0; 150 border: 0;
134 151
@@ -143,6 +160,12 @@
143 opacity: .75; 160 opacity: .75;
144 transform: translateY(props.get(vars.$hover--offset-b)); 161 transform: translateY(props.get(vars.$hover--offset-b));
145 } 162 }
163
164 @include bem.elem('body') {
165 @include bem.modifier('hidden') {
166 transform: translateY(props.get(vars.$hover--offset-b));
167 }
168 }
146 } 169 }
147 170
148 &:focus-visible { 171 &:focus-visible {
@@ -175,6 +198,11 @@
175 @include bem.elem('body') { 198 @include bem.elem('body') {
176 padding: 0; 199 padding: 0;
177 padding-block-start: props.get(vars.$spacing); 200 padding-block-start: props.get(vars.$spacing);
201
202 @include bem.modifier('hidden') {
203 padding-block: props.get(vars.$pad-b);
204 padding-inline: props.get(vars.$pad-i);
205 }
178 } 206 }
179 207
180 @include bem.elem('footer') { 208 @include bem.elem('footer') {
@@ -186,6 +214,21 @@
186 flex-direction: row; 214 flex-direction: row;
187 align-items: center; 215 align-items: center;
188 216
217 @include bem.elem('image') {
218 align-self: stretch;
219 inline-size: auto;
220
221 &:first-child {
222 border-start-end-radius: 0;
223 border-end-start-radius: props.get(vars.$rounding);
224 }
225
226 &:last-child {
227 border-start-end-radius: props.get(vars.$rounding);
228 border-end-start-radius: 0;
229 }
230 }
231
189 @include bem.elem('body') { 232 @include bem.elem('body') {
190 flex: 0 0 auto; 233 flex: 0 0 auto;
191 234
diff --git a/src/objects/_card.vars.scss b/src/objects/_card.vars.scss
index 8ee7158..8adbcde 100644
--- a/src/objects/_card.vars.scss
+++ b/src/objects/_card.vars.scss
@@ -2,11 +2,13 @@
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$pad-i: props.def(--o-card--pad-i, props.get(core.$size--300)) !default;
7$pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default; 7$pad-b: props.def(--o-card--pad-b, props.get(core.$size--250)) !default;
8$spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default; 8$spacing: props.def(--o-card--spacing, props.get(core.$size--200)) !default;
9$rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default; 9$rounding: props.def(--o-card--rounding, props.get(core.$rounding)) !default;
10$image-overlay--pad-i: props.def(--o-card--image-overlay--pad-i, props.get($pad-i)) !default;
11$image-overlay--pad-b: props.def(--o-card--image-overlay--pad-b, props.get($pad-b)) !default;
10 12
11$hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default; 13$hover--offset-b: props.def(--o-card--hover--offset-b, calc(-1 * props.get(core.$size--65))) !default;
12 14
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index b746551..4ed8092 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -13,18 +13,19 @@
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 29
29 &::before, 30 &::before,
30 &::after { 31 &::after {
@@ -45,10 +46,24 @@
45 46
46 @include bem.modifier('vertical') { 47 @include bem.modifier('vertical') {
47 align-self: stretch; 48 align-self: stretch;
48 inline-size: 1px; 49 inline-size: props.get(vars.$vertical--border-width);
49 block-size: auto; 50 block-size: auto;
50 margin-block: 0; 51 margin-block: 0;
51 background-color: props.get(vars.$faint--bg-color); 52 background-color: props.get(vars.$strong--bg-color);
53
54 &::before,
55 &::after {
56 display: none;
57 }
58 }
59
60 @include bem.modifier('dot') {
61 align-self: center;
62 inline-size: props.get(vars.$dot--size);
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);
52 67
53 &::before, 68 &::before,
54 &::after { 69 &::after {
@@ -66,6 +81,14 @@
66 block-size: props.get(vars.$medium--border-width); 81 block-size: props.get(vars.$medium--border-width);
67 background-color: props.get(vars.$medium--bg-color); 82 background-color: props.get(vars.$medium--bg-color);
68 } 83 }
84
85 @include bem.modifier('vertical') {
86 background-color: props.get(vars.$medium--bg-color);
87 }
88
89 @include bem.modifier('dot') {
90 background-color: props.get(vars.$medium--bg-color);
91 }
69 } 92 }
70 93
71 @include bem.modifier('faint') { 94 @include bem.modifier('faint') {
@@ -82,6 +105,10 @@
82 @include bem.modifier('vertical') { 105 @include bem.modifier('vertical') {
83 background-color: props.get(vars.$vertical--faint--bg-color); 106 background-color: props.get(vars.$vertical--faint--bg-color);
84 } 107 }
108
109 @include bem.modifier('dot') {
110 background-color: props.get(vars.$dot--faint--bg-color);
111 }
85 } 112 }
86 113
87 @include bem.modifier('labelled') { 114 @include bem.modifier('labelled') {
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
index 1117fd5..5cd68c1 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;
@@ -23,7 +25,9 @@ $medium--label-color: props.def(--o-divider--medium--label-color, props.get(core
23$faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border), 'color') !default; 25$faint--bg-color: props.def(--o-divider--faint--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; 26$faint--label-color: props.def(--o-divider--faint--label-color, props.get(core.$theme, --text-mute-more), 'color') !default;
25 27
26$vertical--faint--bg-color: props.def(--o-divider--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default; 28$vertical--faint--bg-color: props.def(--o-divider--vertical--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
29
30$dot--faint--bg-color: props.def(--o-divider--dot--faint--bg-color, props.get(core.$theme, --border-mute), 'color') !default;
27 31
28$static-themes: props.def(--o-divider, (), 'color'); 32$static-themes: props.def(--o-divider, (), 'color');
29 33
diff --git a/src/objects/_figure.scss b/src/objects/_figure.scss
new file mode 100644
index 0000000..38837be
--- /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 89fe568..bdc7027 100644
--- a/src/objects/_heading.scss
+++ b/src/objects/_heading.scss
@@ -16,9 +16,9 @@
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 text-transform: none; 20 text-transform: none;
20 letter-spacing: normal; 21 letter-spacing: normal;
21 transform: translateX(props.get(vars.$offset));
22 22
23 & + & { 23 & + & {
24 margin-block-start: props.get(vars.$margin-bs-sibling); 24 margin-block-start: props.get(vars.$margin-bs-sibling);
@@ -52,6 +52,7 @@
52 font-feature-settings: props.get($feature-settings); 52 font-feature-settings: props.get($feature-settings);
53 line-height: props.get($line-height); 53 line-height: props.get($line-height);
54 letter-spacing: props.get($letter-spacing); 54 letter-spacing: props.get($letter-spacing);
55 transform: translateX(props.get(vars.$offset));
55 } 56 }
56 } 57 }
57 } 58 }
diff --git a/src/objects/_heading.vars.scss b/src/objects/_heading.vars.scss
index d15e0b8..90278c8 100644
--- a/src/objects/_heading.vars.scss
+++ b/src/objects/_heading.vars.scss
@@ -5,12 +5,13 @@ $offset: props.def(--o-heading--offset, -.02em) !default;
5$margin-bs: props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default; 5$margin-bs: props.def(--o-heading--margin-bs, props.get(core.$size--700)) !default;
6$margin-bs-sibling: props.def(--o-heading--margin-bs-sibling, props.get(core.$size--325)) !default; 6$margin-bs-sibling: props.def(--o-heading--margin-bs-sibling, props.get(core.$size--325)) !default;
7 7
8$bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50)) !default; 8$text-color: props.def(--o-heading--text-color, props.get(core.$theme, --heading), 'color') !default;
9$bg-color: props.def(--o-heading--bg-color, props.get(core.$theme, --base, --50), 'color') !default;
9 10
10$font-family: props.def(--o-heading--font-family, props.get(core.$font--headline--family)) !default; 11$font-family: props.def(--o-heading--font-family, props.get(core.$font--standard--family)) !default;
11$line-height: props.def(--o-heading--line-height, props.get(core.$font--headline--line-height)) !default; 12$line-height: props.def(--o-heading--line-height, props.get(core.$font--standard--line-height)) !default;
12$font-weight: props.def(--o-heading--font-weight, props.get(core.$font--headline--weight)) !default; 13$font-weight: props.def(--o-heading--font-weight, bold) !default;
13$feature-settings: props.def(--o-heading--feature-settings, props.get(core.$font--headline--feature-settings)) !default; 14$feature-settings: props.def(--o-heading--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
14 15
15$font-family--xxl: props.def(--o-heading--xxl--font-family, props.get(core.$font--headline--family)) !default; 16$font-family--xxl: props.def(--o-heading--xxl--font-family, props.get(core.$font--headline--family)) !default;
16$line-height--xxl: props.def(--o-heading--xxl--line-height, props.get(core.$font--headline--line-height)) !default; 17$line-height--xxl: props.def(--o-heading--xxl--line-height, props.get(core.$font--headline--line-height)) !default;
@@ -27,28 +28,28 @@ $letter-spacing--xl: props.def(--o-heading--xl--letter-spacing, 0) !default;
27$feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default; 28$feature-settings--xl: props.def(--o-heading--xl--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
28 29
29$font-family--lg: props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default; 30$font-family--lg: props.def(--o-heading--lg--font-family, props.get(core.$font--standard--family)) !default;
30$line-height--lg: props.def(--o-heading--lg--line-height, props.get(core.$font--headline--line-height)) !default; 31$line-height--lg: props.def(--o-heading--lg--line-height, props.get(core.$font--standard--line-height)) !default;
31$font-size--lg: props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default; 32$font-size--lg: props.def(--o-heading--lg--font-size, props.get(core.$font-size--150)) !default;
32$font-weight--lg: props.def(--o-heading--lg--font-weight, bold) !default; 33$font-weight--lg: props.def(--o-heading--lg--font-weight, bold) !default;
33$letter-spacing--lg: props.def(--o-heading--lg--letter-spacing, 0) !default; 34$letter-spacing--lg: props.def(--o-heading--lg--letter-spacing, 0) !default;
34$feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 35$feature-settings--lg: props.def(--o-heading--lg--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
35 36
36$font-family--md: props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default; 37$font-family--md: props.def(--o-heading--md--font-family, props.get(core.$font--standard--family)) !default;
37$line-height--md: props.def(--o-heading--md--line-height, props.get(core.$font--headline--line-height)) !default; 38$line-height--md: props.def(--o-heading--md--line-height, props.get(core.$font--standard--line-height)) !default;
38$font-size--md: props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default; 39$font-size--md: props.def(--o-heading--md--font-size, props.get(core.$font-size--100)) !default;
39$font-weight--md: props.def(--o-heading--md--font-weight, bold) !default; 40$font-weight--md: props.def(--o-heading--md--font-weight, bold) !default;
40$letter-spacing--md: props.def(--o-heading--md--letter-spacing, 0) !default; 41$letter-spacing--md: props.def(--o-heading--md--letter-spacing, 0) !default;
41$feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 42$feature-settings--md: props.def(--o-heading--md--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
42 43
43$font-family--sm: props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default; 44$font-family--sm: props.def(--o-heading--sm--font-family, props.get(core.$font--standard--family)) !default;
44$line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--headline--line-height)) !default; 45$line-height--sm: props.def(--o-heading--sm--line-height, props.get(core.$font--standard--line-height)) !default;
45$font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--75)) !default; 46$font-size--sm: props.def(--o-heading--sm--font-size, props.get(core.$font-size--75)) !default;
46$font-weight--sm: props.def(--o-heading--sm--font-weight, 500) !default; 47$font-weight--sm: props.def(--o-heading--sm--font-weight, 500) !default;
47$letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 1px) !default; 48$letter-spacing--sm: props.def(--o-heading--sm--letter-spacing, 1px) !default;
48$feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 49$feature-settings--sm: props.def(--o-heading--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
49 50
50$font-family--xs: props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default; 51$font-family--xs: props.def(--o-heading--xs--font-family, props.get(core.$font--standard--family)) !default;
51$line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--headline--line-height)) !default; 52$line-height--xs: props.def(--o-heading--xs--line-height, props.get(core.$font--standard--line-height)) !default;
52$font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default; 53$font-size--xs: props.def(--o-heading--xs--font-size, props.get(core.$font-size--50)) !default;
53$font-weight--xs: props.def(--o-heading--xs--font-weight, 500) !default; 54$font-weight--xs: props.def(--o-heading--xs--font-weight, 500) !default;
54$letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default; 55$letter-spacing--xs: props.def(--o-heading--xs--letter-spacing, 1px) !default;
@@ -92,14 +93,14 @@ $display--letter-spacing--md: props.def(--o-heading--display--md--letter-spaci
92$display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--headline--feature-settings)) !default; 93$display--feature-settings--md: props.def(--o-heading--display--md--feature-settings, props.get(core.$font--headline--feature-settings)) !default;
93 94
94$display--font-family--sm: props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default; 95$display--font-family--sm: props.def(--o-heading--display--sm--font-family, props.get(core.$font--standard--family)) !default;
95$display--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--headline--line-height)) !default; 96$display--line-height--sm: props.def(--o-heading--display--sm--line-height, props.get(core.$font--standard--line-height)) !default;
96$display--font-size--sm: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75)) !default; 97$display--font-size--sm: props.def(--o-heading--display--sm--font-size, props.get(core.$font-size--75)) !default;
97$display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default; 98$display--font-weight--sm: props.def(--o-heading--display--sm--font-weight, bold) !default;
98$display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default; 99$display--letter-spacing--sm: props.def(--o-heading--display--sm--letter-spacing, 0) !default;
99$display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default; 100$display--feature-settings--sm: props.def(--o-heading--display--sm--feature-settings, props.get(core.$font--standard--feature-settings)) !default;
100 101
101$display--font-family--xs: props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default; 102$display--font-family--xs: props.def(--o-heading--display--xs--font-family, props.get(core.$font--standard--family)) !default;
102$display--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--headline--line-height)) !default; 103$display--line-height--xs: props.def(--o-heading--display--xs--line-height, props.get(core.$font--standard--line-height)) !default;
103$display--font-size--xs: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default; 104$display--font-size--xs: props.def(--o-heading--display--xs--font-size, props.get(core.$font-size--50)) !default;
104$display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, 500) !default; 105$display--font-weight--xs: props.def(--o-heading--display--xs--font-weight, 500) !default;
105$display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default; 106$display--letter-spacing--xs: props.def(--o-heading--display--xs--letter-spacing, 1px) !default;
diff --git a/src/objects/_icon.vars.scss b/src/objects/_icon.vars.scss
index 218f311..ff1541d 100644
--- a/src/objects/_icon.vars.scss
+++ b/src/objects/_icon.vars.scss
@@ -2,4 +2,4 @@
2 2
3$stroke-width: props.def(--o-icon--stroke-width, 1.5px) !default; 3$stroke-width: props.def(--o-icon--stroke-width, 1.5px) !default;
4$size: props.def(--o-icon--size, calc(1 / 14 * 16em)) !default; 4$size: props.def(--o-icon--size, calc(1 / 14 * 16em)) !default;
5$valign: props.def(--o-icon--valign, -.2em) !default; 5$valign: props.def(--o-icon--valign, -.18em) !default;
diff --git a/src/objects/_navbar.scss b/src/objects/_navbar.scss
new file mode 100644
index 0000000..59d4c51
--- /dev/null
+++ b/src/objects/_navbar.scss
@@ -0,0 +1,191 @@
1@use 'sass:map';
2@use 'sass:meta';
3@use 'sass:string';
4@use 'iro-sass/src/bem';
5@use 'iro-sass/src/props';
6@use '../props' as *;
7
8@forward 'navbar.vars';
9@use 'navbar.vars' as vars;
10
11@mixin styles {
12 @include materialize-at-root(meta.module-variables('vars'));
13
14 @include bem.object('navbar') {
15 display: flex;
16 block-size: props.get(vars.$block-size);
17
18 @include bem.elem('item-content-text') {
19 margin-inline: props.get(vars.$item--pad-i-label);
20 }
21
22 @include bem.elem('item-content') {
23 position: relative;
24 padding-block: props.get(vars.$item--pad-b);
25 padding-inline: props.get(vars.$item--pad-i);
26 font-size: props.get(vars.$item--font-size);
27 color: currentColor;
28 white-space: nowrap;
29 border-radius: 100em;
30
31 &::after {
32 position: absolute;
33 inset: calc(-1 * props.get(vars.$key-focus--border-offset));
34 z-index: -10;
35 display: block;
36 pointer-events: none;
37 visibility: hidden;
38 content: '';
39 border-radius: 100em;
40 outline: props.get(vars.$default-theme, --key-focus, --border) solid props.get(vars.$key-focus--border-width);
41 box-shadow:
42 0
43 0
44 0
45 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
46 props.get(vars.$default-theme, --key-focus, --outline);
47 }
48 }
49
50 @include bem.elem('item') {
51 display: flex;
52 flex-direction: column;
53 align-items: center;
54 justify-content: center;
55 inline-size: 100%;
56 padding-inline: calc(.5 * props.get(vars.$spacing));
57 font-weight: 500;
58 color: props.get(vars.$default-theme, --disabled, --label-color);
59
60 &:link,
61 &:visited,
62 &:enabled {
63 color: props.get(vars.$default-theme, --label-color);
64
65 &:hover,
66 &:focus-visible {
67 color: props.get(vars.$default-theme, --hover, --label-color);
68
69 @include bem.elem('item-content') {
70 background-color: props.get(vars.$default-theme, --hover, --bg-color);
71 }
72 }
73
74 &:focus-visible {
75 @include bem.elem('item-content') {
76 &::after {
77 visibility: visible;
78 }
79 }
80 }
81
82 &:active {
83 color: props.get(vars.$default-theme, --active, --label-color);
84
85 @include bem.elem('item-content') {
86 background-color: props.get(vars.$default-theme, --active, --bg-color);
87 }
88 }
89 }
90
91 @include bem.is('selected') {
92 font-weight: bold;
93 color: props.get(vars.$default-theme, --selected, --disabled, --label-color);
94
95 @include bem.elem('item-content') {
96 background-color: props.get(vars.$default-theme, --selected, --disabled, --bg-color);
97 }
98
99 &:link,
100 &:visited,
101 &:enabled {
102 color: props.get(vars.$default-theme, --selected, --label-color);
103
104 @include bem.elem('item-content') {
105 background-color: props.get(vars.$default-theme, --selected, --bg-color);
106 }
107
108 &:hover,
109 &:focus-visible {
110 color: props.get(vars.$default-theme, --selected, --hover, --label-color);
111
112 @include bem.elem('item-content') {
113 background-color: props.get(vars.$default-theme, --selected, --hover, --bg-color);
114 }
115 }
116
117 &:active {
118 color: props.get(vars.$default-theme, --selected, --active, --label-color);
119
120 @include bem.elem('item-content') {
121 background-color: props.get(vars.$default-theme, --selected, --active, --bg-color);
122 }
123 }
124 }
125 }
126 }
127
128 @include bem.modifier('hide-unselected') {
129 @include bem.elem('item') {
130 display: none;
131
132 @include bem.is('selected') {
133 display: flex;
134 }
135 }
136 }
137
138 @include bem.modifier('adapt') {
139 gap: props.get(vars.$spacing);
140 block-size: 100%;
141
142 @include bem.elem('item') {
143 padding-inline: 0;
144 }
145 }
146
147
148 @include bem.modifier('align-block') {
149 margin-inline: calc(-1 * props.get(vars.$item--pad-i));
150 }
151
152 @include bem.modifier('quiet') {
153 @include bem.elem('item') {
154 @include bem.is('selected') {
155 color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --label-color);
156
157 @include bem.elem('item-content') {
158 background-color: props.get(vars.$default-theme, --quiet, --selected, --disabled, --bg-color);
159 }
160
161 &:link,
162 &:visited,
163 &:enabled {
164 color: props.get(vars.$default-theme, --quiet, --selected, --label-color);
165
166 @include bem.elem('item-content') {
167 background-color: props.get(vars.$default-theme, --quiet, --selected, --bg-color);
168 }
169
170 &:hover,
171 &:focus-visible {
172 color: props.get(vars.$default-theme, --quiet, --selected, --hover, --label-color);
173
174 @include bem.elem('item-content') {
175 background-color: props.get(vars.$default-theme, --quiet, --selected, --hover, --bg-color);
176 }
177 }
178
179 &:active {
180 color: props.get(vars.$default-theme, --quiet, --selected, --active, --label-color);
181
182 @include bem.elem('item-content') {
183 background-color: props.get(vars.$default-theme, --quiet, --selected, --active, --bg-color);
184 }
185 }
186 }
187 }
188 }
189 }
190 }
191}
diff --git a/src/objects/_navbar.vars.scss b/src/objects/_navbar.vars.scss
new file mode 100644
index 0000000..fcdac80
--- /dev/null
+++ b/src/objects/_navbar.vars.scss
@@ -0,0 +1,84 @@
1@use 'sass:map';
2@use 'sass:string';
3@use 'iro-sass/src/props';
4@use '../core.vars' as core;
5
6$block-size: props.def(--o-navbar--block-size, props.get(core.$size--800)) !default;
7$spacing: props.def(--o-navbar--spacing, props.get(core.$size--200)) !default;
8
9$item--pad-i: props.def(--o-navbar--item--pad-i, props.get(core.$size--150)) !default;
10$item--pad-i-label: props.def(--o-navbar--item--pad-i-label, props.get(core.$size--25)) !default;
11$item--pad-b: props.def(--o-navbar--item--pad-b, props.get(core.$size--40)) !default;
12$item--font-size: props.def(--o-navbar--item--font-size, props.get(core.$font-size--75)) !default;
13
14$key-focus--border-width: props.def(--o-navbar--key-focus--border-width, props.get(core.$key-focus--border-width)) !default;
15$key-focus--border-offset: props.def(--o-navbar--key-focus--border-offset, props.get(core.$key-focus--border-offset)) !default;
16$key-focus--outline-width: props.def(--o-navbar--key-focus--outline-width, props.get(core.$key-focus--outline-width)) !default;
17
18$default-theme-override: () !default;
19$default-theme: map.deep-merge((
20 --label-color: props.get(core.$theme, --text),
21
22 --hover: (
23 --bg-color: props.get(core.$theme, --border-mute),
24 --label-color: props.get(core.$theme, --heading),
25 ),
26
27 --active: (
28 --bg-color: props.get(core.$theme, --border),
29 --label-color: props.get(core.$theme, --heading),
30 ),
31
32 --disabled: (
33 --label-color: props.get(core.$theme, --border-strong),
34 ),
35
36 --key-focus: (
37 --label: props.get(core.$theme, --focus, --text),
38 --border: props.get(core.$theme, --focus, --border),
39 --outline: props.get(core.$theme, --focus, --outline),
40 ),
41
42 --selected: (
43 --bg-color: props.get(core.$theme, --heading),
44 --label-color: props.get(core.$theme, --base, --50),
45
46 --hover: (
47 --bg-color: props.get(core.$theme, --text),
48 --label-color: props.get(core.$theme, --base, --50),
49 ),
50
51 --active: (
52 --bg-color: props.get(core.$theme, --text-mute),
53 --label-color: props.get(core.$theme, --base, --50),
54 ),
55
56 --disabled: (
57 --bg-color: props.get(core.$theme, --border-mute),
58 --label-color: props.get(core.$theme, --border-strong),
59 ),
60 ),
61
62 --quiet: (
63 --selected: (
64 --bg-color: props.get(core.$theme, --accent, --200),
65 --label-color: props.get(core.$theme, --accent, --1100),
66
67 --hover: (
68 --bg-color: props.get(core.$theme, --accent, --300),
69 --label-color: props.get(core.$theme, --accent, --1200),
70 ),
71
72 --active: (
73 --bg-color: props.get(core.$theme, --accent, --400),
74 --label-color: props.get(core.$theme, --accent, --1300),
75 ),
76
77 --disabled: (
78 --bg-color: props.get(core.$theme, --accent, --200),
79 --label-color: props.get(core.$theme, --accent, --800),
80 ),
81 )
82 )
83), $default-theme-override) !default;
84$default-theme: props.def(--o-navbar, $default-theme, 'color');
diff --git a/src/objects/_placeholders.scss b/src/objects/_placeholders.scss
new file mode 100644
index 0000000..e148f21
--- /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 fa65ddb..3fe6310 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -10,12 +10,14 @@
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: absolute; 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;
20 color: currentColor;
19 background-color: props.get(vars.$bg-color); 21 background-color: props.get(vars.$bg-color);
20 filter: props.get(vars.$filter); 22 filter: props.get(vars.$filter);
21 border: props.get(vars.$border-width) solid props.get(vars.$border-color); 23 border: props.get(vars.$border-width) solid props.get(vars.$border-color);
diff --git a/src/objects/_tabbar.scss b/src/objects/_tabbar.scss
new file mode 100644
index 0000000..131c832
--- /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..f4486d6
--- /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)) !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;
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-07-02 07:21:16 +0000