summaryrefslogtreecommitdiffstats
path: root/src
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2025-08-06 16:40:56 +0200
committerVolpeon <git@volpeon.ink>2025-08-06 16:40:56 +0200
commit41b0d0497988274057fc2512c822a6bc9d2d3ebd (patch)
tree015a95ede42b799ac1fd049baa8b0a853b6d3bb3 /src
parentFix button font size (diff)
downloadiro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.gz
iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.tar.bz2
iro-design-41b0d0497988274057fc2512c822a6bc9d2d3ebd.zip
Switch to tab indentationHEADmaster
Diffstat (limited to 'src')
-rw-r--r--src/_apca.scss164
-rw-r--r--src/_config.defaults.scss320
-rw-r--r--src/_config.scss8
-rw-r--r--src/_core.scss58
-rw-r--r--src/_core.vars.scss78
-rw-r--r--src/_functions.scss86
-rw-r--r--src/_iro-design.scss24
-rw-r--r--src/_layers.scss2
-rw-r--r--src/_mixins.scss42
-rw-r--r--src/_props.scss62
-rw-r--r--src/_themes.scss104
-rw-r--r--src/_utils.scss574
-rw-r--r--src/layouts/_button-group.scss62
-rw-r--r--src/layouts/_button-group.vars.scss8
-rw-r--r--src/layouts/_card-list.scss246
-rw-r--r--src/layouts/_container.scss30
-rw-r--r--src/layouts/_container.vars.scss6
-rw-r--r--src/layouts/_flex.scss24
-rw-r--r--src/layouts/_form.scss80
-rw-r--r--src/layouts/_media.scss50
-rw-r--r--src/layouts/_media.vars.scss8
-rw-r--r--src/layouts/_overflow.scss8
-rw-r--r--src/layouts/_split-view.scss128
-rw-r--r--src/objects/_alert.scss54
-rw-r--r--src/objects/_alert.vars.scss22
-rw-r--r--src/objects/_avatar.scss194
-rw-r--r--src/objects/_avatar.vars.scss12
-rw-r--r--src/objects/_backdrop.scss24
-rw-r--r--src/objects/_button.scss460
-rw-r--r--src/objects/_button.vars.scss514
-rw-r--r--src/objects/_card.scss462
-rw-r--r--src/objects/_checkbox.scss380
-rw-r--r--src/objects/_divider.scss318
-rw-r--r--src/objects/_divider.vars.scss58
-rw-r--r--src/objects/_emoji.scss66
-rw-r--r--src/objects/_emoji.vars.scss6
-rw-r--r--src/objects/_field-label.scss110
-rw-r--r--src/objects/_figure.scss28
-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.scss102
-rw-r--r--src/objects/_palette.scss86
-rw-r--r--src/objects/_placeholders.scss22
-rw-r--r--src/objects/_popover.scss62
-rw-r--r--src/objects/_radio.scss248
-rw-r--r--src/objects/_side-nav.scss134
-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/_tabbar.scss174
-rw-r--r--src/objects/_table.scss232
-rw-r--r--src/objects/_text-field.scss286
-rw-r--r--src/objects/_thumbnail.scss160
-rw-r--r--src/objects/_thumbnail.vars.scss32
-rw-r--r--src/scopes/_blockquotes.scss28
-rw-r--r--src/scopes/_body.scss80
-rw-r--r--src/scopes/_code.scss54
-rw-r--r--src/scopes/_figures.scss26
-rw-r--r--src/scopes/_headings.scss112
-rw-r--r--src/scopes/_implicit.scss280
-rw-r--r--src/scopes/_links.scss186
-rw-r--r--src/scopes/_links.vars.scss30
-rw-r--r--src/scopes/_lists.scss80
-rw-r--r--src/scopes/_tables.scss156
69 files changed, 4301 insertions, 4301 deletions
diff --git a/src/_apca.scss b/src/_apca.scss
index c65f46e..c5da4a0 100644
--- a/src/_apca.scss
+++ b/src/_apca.scss
@@ -7,121 +7,121 @@
7@use 'sass:math'; 7@use 'sass:math';
8 8
9$SA98G: ( 9$SA98G: (
10 mainTRC: 2.4, 10 mainTRC: 2.4,
11 11
12 sRco: .2126729, 12 sRco: .2126729,
13 sGco: .7151522, 13 sGco: .7151522,
14 sBco: .072175, 14 sBco: .072175,
15 15
16 normBG: .56, 16 normBG: .56,
17 normTXT: .57, 17 normTXT: .57,
18 revTXT: .62, 18 revTXT: .62,
19 revBG: .65, 19 revBG: .65,
20 20
21 blkThrs: .022, 21 blkThrs: .022,
22 blkClmp: 1.414, 22 blkClmp: 1.414,
23 scaleBoW: 1.14, 23 scaleBoW: 1.14,
24 scaleWoB: 1.14, 24 scaleWoB: 1.14,
25 loBoWoffset: .027, 25 loBoWoffset: .027,
26 loWoBoffset: .027, 26 loWoBoffset: .027,
27 deltaYmin: .0005, 27 deltaYmin: .0005,
28 loClip: .0001, 28 loClip: .0001,
29 29
30 mFactor: 1.9468554433171, 30 mFactor: 1.9468554433171,
31 mOffsetIn: .0387393816571401, 31 mOffsetIn: .0387393816571401,
32 mExpAdj: .283343396420869, 32 mExpAdj: .283343396420869,
33 mOffsetOut: .312865795870758, 33 mOffsetOut: .312865795870758,
34); 34);
35 35
36@function sRGB_to_Y($color) { 36@function sRGB_to_Y($color) {
37 $rgb: color.to-space($color, rgb); 37 $rgb: color.to-space($color, rgb);
38 38
39 @return map.get($SA98G, sRco) * math.pow(math.div(color.channel($rgb, 'red'), 255), map.get($SA98G, mainTRC)) + 39 @return map.get($SA98G, sRco) * math.pow(math.div(color.channel($rgb, 'red'), 255), map.get($SA98G, mainTRC)) +
40 map.get($SA98G, sGco) * math.pow(math.div(color.channel($rgb, 'green'), 255), map.get($SA98G, mainTRC)) + 40 map.get($SA98G, sGco) * math.pow(math.div(color.channel($rgb, 'green'), 255), map.get($SA98G, mainTRC)) +
41 map.get($SA98G, sBco) * math.pow(math.div(color.channel($rgb, 'blue'), 255), map.get($SA98G, mainTRC)); 41 map.get($SA98G, sBco) * math.pow(math.div(color.channel($rgb, 'blue'), 255), map.get($SA98G, mainTRC));
42} 42}
43 43
44@function Y_to_sRGB($y) { 44@function Y_to_sRGB($y) {
45 $c: math.round(math.pow($y, math.div(1, map.get($SA98G, mainTRC))) * 255); 45 $c: math.round(math.pow($y, math.div(1, map.get($SA98G, mainTRC))) * 255);
46 @return rgb($c, $c, $c); 46 @return rgb($c, $c, $c);
47} 47}
48 48
49@function contrast($txtY, $bgY) { 49@function contrast($txtY, $bgY) {
50 /* stylelint-disable-next-line @stylistic/number-no-trailing-zeros */ 50 /* stylelint-disable-next-line @stylistic/number-no-trailing-zeros */
51 $icp: .0 1.1; 51 $icp: .0 1.1;
52 52
53 @if math.min($txtY, $bgY) < list.nth($icp, 1) or math.max($txtY, $bgY) > list.nth($icp, 2) { 53 @if math.min($txtY, $bgY) < list.nth($icp, 1) or math.max($txtY, $bgY) > list.nth($icp, 2) {
54 @return 0; 54 @return 0;
55 } 55 }
56 56
57 @if $txtY <= map.get($SA98G, blkThrs) { 57 @if $txtY <= map.get($SA98G, blkThrs) {
58 $txtY: $txtY + math.pow(map.get($SA98G, blkThrs) - $txtY, map.get($SA98G, blkClmp)); 58 $txtY: $txtY + math.pow(map.get($SA98G, blkThrs) - $txtY, map.get($SA98G, blkClmp));
59 } 59 }
60 @if $bgY <= map.get($SA98G, blkThrs) { 60 @if $bgY <= map.get($SA98G, blkThrs) {
61 $bgY: $bgY + math.pow(map.get($SA98G, blkThrs) - $bgY, map.get($SA98G, blkClmp)); 61 $bgY: $bgY + math.pow(map.get($SA98G, blkThrs) - $bgY, map.get($SA98G, blkClmp));
62 } 62 }
63 63
64 @if math.abs($bgY - $txtY) < map.get($SA98G, deltaYmin) { 64 @if math.abs($bgY - $txtY) < map.get($SA98G, deltaYmin) {
65 @return 0; 65 @return 0;
66 } 66 }
67 67
68 $outputContrast: 0; 68 $outputContrast: 0;
69 69
70 @if $bgY > $txtY { 70 @if $bgY > $txtY {
71 $SAPC: map.get($SA98G, scaleBoW) * (math.pow($bgY, map.get($SA98G, normBG)) - math.pow($txtY, map.get($SA98G, normTXT))); 71 $SAPC: map.get($SA98G, scaleBoW) * (math.pow($bgY, map.get($SA98G, normBG)) - math.pow($txtY, map.get($SA98G, normTXT)));
72 72
73 @if $SAPC >= map.get($SA98G, loClip) { 73 @if $SAPC >= map.get($SA98G, loClip) {
74 $outputContrast: $SAPC - map.get($SA98G, loBoWoffset); 74 $outputContrast: $SAPC - map.get($SA98G, loBoWoffset);
75 } 75 }
76 } @else { 76 } @else {
77 $SAPC: map.get($SA98G, scaleWoB) * (math.pow($bgY, map.get($SA98G, revBG)) - math.pow($txtY, map.get($SA98G, revTXT))); 77 $SAPC: map.get($SA98G, scaleWoB) * (math.pow($bgY, map.get($SA98G, revBG)) - math.pow($txtY, map.get($SA98G, revTXT)));
78 78
79 @if $SAPC <= -1 * map.get($SA98G, loClip) { 79 @if $SAPC <= -1 * map.get($SA98G, loClip) {
80 $outputContrast: $SAPC + map.get($SA98G, loWoBoffset); 80 $outputContrast: $SAPC + map.get($SA98G, loWoBoffset);
81 } 81 }
82 } 82 }
83 83
84 @return $outputContrast * 100; 84 @return $outputContrast * 100;
85} 85}
86 86
87@function reverse($contrast, $knownY, $knownType: 'bg') { 87@function reverse($contrast, $knownY, $knownType: 'bg') {
88 $unknownY: $knownY; 88 $unknownY: $knownY;
89 89
90 $knownExp: 0; 90 $knownExp: 0;
91 $unknownExp: 0; 91 $unknownExp: 0;
92 92
93 $scale: map.get($SA98G, if($contrast > 0, scaleBoW, scaleWoB)); 93 $scale: map.get($SA98G, if($contrast > 0, scaleBoW, scaleWoB));
94 $offset: map.get($SA98G, if($contrast > 0, loBoWoffset, loWoBoffset)); 94 $offset: map.get($SA98G, if($contrast > 0, loBoWoffset, loWoBoffset));
95 95
96 $contrast: math.div($contrast * .01 + $offset, $scale); 96 $contrast: math.div($contrast * .01 + $offset, $scale);
97 97
98 @if $knownY <= map.get($SA98G, blkThrs) { 98 @if $knownY <= map.get($SA98G, blkThrs) {
99 $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp)); 99 $knownY: $knownY + math.pow(map.get($SA98G, blkThrs) - $knownY, map.get($SA98G, blkClmp));
100 } 100 }
101 101
102 @if $knownType == 'bg' { 102 @if $knownType == 'bg' {
103 $knownExp: map.get($SA98G, if($contrast > 0, normBG, revBG)); 103 $knownExp: map.get($SA98G, if($contrast > 0, normBG, revBG));
104 $unknownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT)); 104 $unknownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT));
105 $unknownY: math.pow(math.pow($knownY, $knownExp) - $contrast, math.div(1, $unknownExp)); 105 $unknownY: math.pow(math.pow($knownY, $knownExp) - $contrast, math.div(1, $unknownExp));
106 } @else { 106 } @else {
107 $knownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT)); 107 $knownExp: map.get($SA98G, if($contrast > 0, normTXT, revTXT));
108 $unknownExp: map.get($SA98G, if($contrast > 0, normBG, revBG)); 108 $unknownExp: map.get($SA98G, if($contrast > 0, normBG, revBG));
109 $unknownY: math.pow($contrast + math.pow($knownY, $knownExp), math.div(1, $unknownExp)); 109 $unknownY: math.pow($contrast + math.pow($knownY, $knownExp), math.div(1, $unknownExp));
110 } 110 }
111 111
112 @if '#{$unknownY}' == '#{math.sqrt(-1)}' { 112 @if '#{$unknownY}' == '#{math.sqrt(-1)}' {
113 @return false; 113 @return false;
114 } 114 }
115 115
116 @if $unknownY > 1.06 or $unknownY < 0 { 116 @if $unknownY > 1.06 or $unknownY < 0 {
117 @return false; 117 @return false;
118 } 118 }
119 119
120 @if $unknownY <= map.get($SA98G, blkThrs) { 120 @if $unknownY <= map.get($SA98G, blkThrs) {
121 $unknownY: math.pow(($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor), math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp))) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut); 121 $unknownY: math.pow(($unknownY + map.get($SA98G, mOffsetIn)) * map.get($SA98G, mFactor), math.div(map.get($SA98G, mExpAdj), map.get($SA98G, blkClmp))) * math.div(1, map.get($SA98G, mFactor)) - map.get($SA98G, mOffsetOut);
122 } 122 }
123 123
124 $unknownY: math.max(math.min($unknownY, 1), 0); 124 $unknownY: math.max(math.min($unknownY, 1), 0);
125 125
126 @return $unknownY; 126 @return $unknownY;
127} 127}
diff --git a/src/_config.defaults.scss b/src/_config.defaults.scss
index 799ee47..861b600 100644
--- a/src/_config.defaults.scss
+++ b/src/_config.defaults.scss
@@ -4,194 +4,194 @@
4@use 'iro-sass/src/easing' as easing; 4@use 'iro-sass/src/easing' as easing;
5 5
6$static-colors: ( 6$static-colors: (
7 --base: hsl(0, 0%, 98%), 7 --base: hsl(0, 0%, 98%),
8 8
9 --levels: ( 9 --levels: (
10 --100: math.div(0, 12) * 110 - 10, 10 --100: math.div(0, 12) * 110 - 10,
11 --200: math.div(1, 12) * 110 - 10, 11 --200: math.div(1, 12) * 110 - 10,
12 --300: math.div(2, 12) * 110 - 10, 12 --300: math.div(2, 12) * 110 - 10,
13 --400: math.div(3, 12) * 110 - 10, 13 --400: math.div(3, 12) * 110 - 10,
14 --500: math.div(4, 12) * 110 - 10, 14 --500: math.div(4, 12) * 110 - 10,
15 --600: math.div(5, 12) * 110 - 10, 15 --600: math.div(5, 12) * 110 - 10,
16 --700: math.div(6, 12) * 110 - 10, 16 --700: math.div(6, 12) * 110 - 10,
17 --800: math.div(7, 12) * 110 - 10, 17 --800: math.div(7, 12) * 110 - 10,
18 --900: math.div(8, 12) * 110 - 10, 18 --900: math.div(8, 12) * 110 - 10,
19 --1000: math.div(9, 12) * 110 - 10, 19 --1000: math.div(9, 12) * 110 - 10,
20 --1100: math.div(10, 12) * 110 - 10, 20 --1100: math.div(10, 12) * 110 - 10,
21 --1200: math.div(11, 12) * 110 - 10, 21 --1200: math.div(11, 12) * 110 - 10,
22 --1300: math.div(12, 12) * 110 - 10, 22 --1300: math.div(12, 12) * 110 - 10,
23 ), 23 ),
24 24
25 --palettes: ( 25 --palettes: (
26 --blue: oklch(56% .14 275.25), 26 --blue: oklch(56% .14 275.25),
27 --purple: oklch(56% .14 305.58), 27 --purple: oklch(56% .14 305.58),
28 --red: oklch(56% .14 14.69), 28 --red: oklch(56% .14 14.69),
29 --green: oklch(56% .14 150.48), 29 --green: oklch(56% .14 150.48),
30 --yellow: oklch(56% .14 84.08), 30 --yellow: oklch(56% .14 84.08),
31 ), 31 ),
32 32
33 --transparents: ( 33 --transparents: (
34 --100: 0, 34 --100: 0,
35 --200: .1, 35 --200: .1,
36 --300: .25, 36 --300: .25,
37 --400: .4, 37 --400: .4,
38 --500: .55, 38 --500: .55,
39 --600: .7, 39 --600: .7,
40 --700: .8, 40 --700: .8,
41 --800: .9, 41 --800: .9,
42 --900: 1, 42 --900: 1,
43 ), 43 ),
44); 44);
45 45
46$semantic-colors-common: ( 46$semantic-colors-common: (
47 --accent: --blue, 47 --accent: --blue,
48 --accent-static: --blue-static, 48 --accent-static: --blue-static,
49 --positive: --green, 49 --positive: --green,
50 --positive-static: --green-static, 50 --positive-static: --green-static,
51 --negative: --red, 51 --negative: --red,
52 --negative-static: --red-static, 52 --negative-static: --red-static,
53 --warning: --yellow, 53 --warning: --yellow,
54 --warning-static: --yellow-static, 54 --warning-static: --yellow-static,
55 55
56 --focus-raw: --accent, 56 --focus-raw: --accent,
57 --focus-static: --accent-static, 57 --focus-static: --accent-static,
58 58
59 --border-mute: --base --200, 59 --border-mute: --base --200,
60 --border: --base --300, 60 --border: --base --300,
61 --border-strong: --base --400, 61 --border-strong: --base --400,
62 62
63 --text-disabled: --base --500, 63 --text-disabled: --base --500,
64 --text-mute-more: --base --600, 64 --text-mute-more: --base --600,
65 --text-mute: --base --700, 65 --text-mute: --base --700,
66 --text: --base --800, 66 --text: --base --800,
67 --heading: --base --900, 67 --heading: --base --900,
68 68
69 --focus: ( 69 --focus: (
70 --outline: --focus-raw --400, 70 --outline: --focus-raw --400,
71 --border-mute: --focus-raw --900, 71 --border-mute: --focus-raw --900,
72 --border: --focus-raw --1000, 72 --border: --focus-raw --1000,
73 --border-text: --focus-raw --1000-text, 73 --border-text: --focus-raw --1000-text,
74 --border-strong: --focus-raw --1100, 74 --border-strong: --focus-raw --1100,
75 --text: --focus-raw --1100, 75 --text: --focus-raw --1100,
76 ), 76 ),
77); 77);
78 78
79$theme-light: ( 79$theme-light: (
80 --levels: ( 80 --levels: (
81 --grays: ( 81 --grays: (
82 --50: (-8) (.2 + .8 * easing.ease(math.div(0, 12))), 82 --50: (-8) (.2 + .8 * easing.ease(math.div(0, 12))),
83 --75: (-4) (.2 + .8 * easing.ease(math.div(1, 12))), 83 --75: (-4) (.2 + .8 * easing.ease(math.div(1, 12))),
84 --100: (0) (.2 + .8 * easing.ease(math.div(2, 12))), 84 --100: (0) (.2 + .8 * easing.ease(math.div(2, 12))),
85 85
86 --200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))), 86 --200: (easing.cubic-bezier(.2, .1, .9, .9, math.div(1, 7)) * 98) (.2 + .8 * easing.ease(math.div(3, 12))),
87 --300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))), 87 --300: (easing.cubic-bezier(.2, .1, .9, .9, math.div(2, 7)) * 98) (.2 + .8 * easing.ease(math.div(4, 12))),
88 --400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))), 88 --400: (easing.cubic-bezier(.2, .1, .9, .9, math.div(3, 7)) * 98) (.2 + .8 * easing.ease(math.div(5, 12))),
89 89
90 --500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))), 90 --500: (easing.cubic-bezier(.2, .1, .9, .9, math.div(4, 7)) * 98) (.2 + .8 * easing.ease(math.div(6, 12))),
91 --600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))), 91 --600: (easing.cubic-bezier(.2, .1, .9, .9, math.div(5, 7)) * 98) (.2 + .8 * easing.ease(math.div(7, 12))),
92 --700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))), 92 --700: (easing.cubic-bezier(.2, .1, .9, .9, math.div(6, 7)) * 98) (.2 + .8 * easing.ease(math.div(8, 12))),
93 --800: (easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98) (.2 + .8 * easing.ease(math.div(9, 12))), 93 --800: (easing.cubic-bezier(.2, .1, .9, .9, math.div(7, 7)) * 98) (.2 + .8 * easing.ease(math.div(9, 12))),
94 --900: (106) (.2 + .8 * easing.ease(math.div(10, 12))), 94 --900: (106) (.2 + .8 * easing.ease(math.div(10, 12))),
95 ), 95 ),
96 96
97 --colors: ( 97 --colors: (
98 --100: (math.div(0, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(0, 12))), 98 --100: (math.div(0, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(0, 12))),
99 --200: (math.div(1, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(1, 12))), 99 --200: (math.div(1, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(1, 12))),
100 --300: (math.div(2, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(2, 12))), 100 --300: (math.div(2, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(2, 12))),
101 --400: (math.div(3, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(3, 12))), 101 --400: (math.div(3, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(3, 12))),
102 --500: (math.div(4, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(4, 12))), 102 --500: (math.div(4, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(4, 12))),
103 --600: (math.div(5, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(5, 12))), 103 --600: (math.div(5, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(5, 12))),
104 --700: (math.div(6, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(6, 12))), 104 --700: (math.div(6, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(6, 12))),
105 --800: (math.div(7, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(7, 12))), 105 --800: (math.div(7, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(7, 12))),
106 --900: (math.div(8, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(8, 12))), 106 --900: (math.div(8, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(8, 12))),
107 --1000: (math.div(9, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(9, 12))), 107 --1000: (math.div(9, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(9, 12))),
108 --1100: (math.div(10, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(10, 12))), 108 --1100: (math.div(10, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(10, 12))),
109 --1200: (math.div(11, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(11, 12))), 109 --1200: (math.div(11, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(11, 12))),
110 --1300: (math.div(12, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(12, 12))), 110 --1300: (math.div(12, 12) * 94 + 7) (.2 + .8 * easing.ease(math.div(12, 12))),
111 ), 111 ),
112 ), 112 ),
113 113
114 --palettes: ( 114 --palettes: (
115 --base: hsl(260, 70%, 98%) --grays, 115 --base: hsl(260, 70%, 98%) --grays,
116 --blue: oklch(56% .16 275.25) --colors, 116 --blue: oklch(56% .16 275.25) --colors,
117 --purple: oklch(56% .16 305.58) --colors, 117 --purple: oklch(56% .16 305.58) --colors,
118 --red: oklch(56% .16 14.69) --colors, 118 --red: oklch(56% .16 14.69) --colors,
119 --green: oklch(56% .16 150.48) --colors, 119 --green: oklch(56% .16 150.48) --colors,
120 --yellow: oklch(56% .16 84.08) --colors, 120 --yellow: oklch(56% .16 84.08) --colors,
121 ), 121 ),
122 122
123 --semantic: map.merge($semantic-colors-common, ( 123 --semantic: map.merge($semantic-colors-common, (
124 --bg-l2: --base --50, 124 --bg-l2: --base --50,
125 --bg-l1: --base --100, 125 --bg-l1: --base --100,
126 --bg-base: --base --200, 126 --bg-base: --base --200,
127 127
128 --box: ( 128 --box: (
129 --border: --base --200, 129 --border: --base --200,
130 --border-strong: --base --300, 130 --border-strong: --base --300,
131 ), 131 ),
132 )), 132 )),
133 133
134 --constants: ( 134 --constants: (
135 --shadow: rgba(#000, .1), 135 --shadow: rgba(#000, .1),
136 ), 136 ),
137); 137);
138 138
139$theme-dark: ( 139$theme-dark: (
140 --levels: ( 140 --levels: (
141 --grays: ( 141 --grays: (
142 --50: (4.4) (.3 + .7 * easing.ease(math.div(10, 12))), 142 --50: (4.4) (.3 + .7 * easing.ease(math.div(10, 12))),
143 --75: (2.5) (.3 + .7 * easing.ease(math.div(9, 12))), 143 --75: (2.5) (.3 + .7 * easing.ease(math.div(9, 12))),
144 --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))), 144 --100: (0) (.3 + .7 * easing.ease(math.div(8, 12))),
145 145
146 --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))), 146 --200: (easing.cubic-bezier(.3, .1, .8, .8, math.div(1, 8)) * -108) (.3 + .7 * easing.ease(math.div(7, 12))),
147 --300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))), 147 --300: (easing.cubic-bezier(.3, .1, .8, .8, math.div(2, 8)) * -108) (.3 + .7 * easing.ease(math.div(6, 12))),
148 --400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))), 148 --400: (easing.cubic-bezier(.3, .1, .8, .8, math.div(3, 8)) * -108) (.3 + .7 * easing.ease(math.div(5, 12))),
149 149
150 --500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))), 150 --500: (easing.cubic-bezier(.3, .1, .8, .8, math.div(4, 8)) * -108) (.3 + .7 * easing.ease(math.div(4, 12))),
151 --600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))), 151 --600: (easing.cubic-bezier(.3, .1, .8, .8, math.div(5, 8)) * -108) (.3 + .7 * easing.ease(math.div(3, 12))),
152 --700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))), 152 --700: (easing.cubic-bezier(.3, .1, .8, .8, math.div(6, 8)) * -108) (.3 + .7 * easing.ease(math.div(2, 12))),
153 --800: (easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108) (.3 + .7 * easing.ease(math.div(1, 12))), 153 --800: (easing.cubic-bezier(.3, .1, .8, .8, math.div(7, 8)) * -108) (.3 + .7 * easing.ease(math.div(1, 12))),
154 --900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))), 154 --900: (easing.cubic-bezier(.3, .1, .8, .8, math.div(8, 8)) * -108) (.3 + .7 * easing.ease(math.div(0, 12))),
155 ), 155 ),
156 156
157 --colors: ( 157 --colors: (
158 --100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(0, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(0, 12))), 158 --100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(0, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(0, 12))),
159 --200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(1, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(1, 12))), 159 --200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(1, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(1, 12))),
160 --300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(2, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(2, 12))), 160 --300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(2, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(2, 12))),
161 --400: (easing.cubic-bezier(.2, .1, .8, .8, math.div(3, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(3, 12))), 161 --400: (easing.cubic-bezier(.2, .1, .8, .8, math.div(3, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(3, 12))),
162 --500: (easing.cubic-bezier(.2, .1, .8, .8, math.div(4, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(4, 12))), 162 --500: (easing.cubic-bezier(.2, .1, .8, .8, math.div(4, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(4, 12))),
163 --600: (easing.cubic-bezier(.2, .1, .8, .8, math.div(5, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(5, 12))), 163 --600: (easing.cubic-bezier(.2, .1, .8, .8, math.div(5, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(5, 12))),
164 --700: (easing.cubic-bezier(.2, .1, .8, .8, math.div(6, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(6, 12))), 164 --700: (easing.cubic-bezier(.2, .1, .8, .8, math.div(6, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(6, 12))),
165 --800: (easing.cubic-bezier(.2, .1, .8, .8, math.div(7, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(7, 12))), 165 --800: (easing.cubic-bezier(.2, .1, .8, .8, math.div(7, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(7, 12))),
166 --900: (easing.cubic-bezier(.2, .1, .8, .8, math.div(8, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(8, 12))), 166 --900: (easing.cubic-bezier(.2, .1, .8, .8, math.div(8, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(8, 12))),
167 --1000: (easing.cubic-bezier(.2, .1, .8, .8, math.div(9, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(9, 12))), 167 --1000: (easing.cubic-bezier(.2, .1, .8, .8, math.div(9, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(9, 12))),
168 --1100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(10, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(10, 12))), 168 --1100: (easing.cubic-bezier(.2, .1, .8, .8, math.div(10, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(10, 12))),
169 --1200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(11, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(11, 12))), 169 --1200: (easing.cubic-bezier(.2, .1, .8, .8, math.div(11, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(11, 12))),
170 --1300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(12, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(12, 12))), 170 --1300: (easing.cubic-bezier(.2, .1, .8, .8, math.div(12, 12)) * -109 - .5) (.3 + .7 * easing.ease(math.div(12, 12))),
171 ), 171 ),
172 ), 172 ),
173 173
174 --palettes: ( 174 --palettes: (
175 --base: hsl(257, 7%, 20%) --grays, 175 --base: hsl(257, 7%, 20%) --grays,
176 --blue: oklch(56% .16 275.25) --colors, 176 --blue: oklch(56% .16 275.25) --colors,
177 --purple: oklch(56% .16 305.58) --colors, 177 --purple: oklch(56% .16 305.58) --colors,
178 --red: oklch(56% .16 14.69) --colors, 178 --red: oklch(56% .16 14.69) --colors,
179 --green: oklch(56% .16 150.48) --colors, 179 --green: oklch(56% .16 150.48) --colors,
180 --yellow: oklch(56% .16 84.08) --colors, 180 --yellow: oklch(56% .16 84.08) --colors,
181 ), 181 ),
182 182
183 --semantic: map.merge($semantic-colors-common, ( 183 --semantic: map.merge($semantic-colors-common, (
184 --bg-base: --base --50, 184 --bg-base: --base --50,
185 --bg-l1: --base --75, 185 --bg-l1: --base --75,
186 --bg-l2: --base --100, 186 --bg-l2: --base --100,
187 187
188 --box: ( 188 --box: (
189 --border: --base --100, 189 --border: --base --100,
190 --border-strong: --base --100, 190 --border-strong: --base --100,
191 ), 191 ),
192 )), 192 )),
193 193
194 --constants: ( 194 --constants: (
195 --shadow: rgba(#000, .35), 195 --shadow: rgba(#000, .35),
196 ), 196 ),
197); 197);
diff --git a/src/_config.scss b/src/_config.scss
index 25c0adb..764d953 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -18,10 +18,10 @@ $theme-dark: map.deep-merge(def.$theme-dark, $theme-dark-override) !default;
18 18
19$themes-override: () !default; 19$themes-override: () !default;
20$themes: map.deep-merge(( 20$themes: map.deep-merge((
21 --main: ( 21 --main: (
22 light: $theme-light, 22 light: $theme-light,
23 dark: $theme-dark, 23 dark: $theme-dark,
24 ), 24 ),
25), $themes-override) !default; 25), $themes-override) !default;
26 26
27$theme-default: list.nth(map.keys($themes), 1) !default; 27$theme-default: list.nth(map.keys($themes), 1) !default;
diff --git a/src/_core.scss b/src/_core.scss
index 2eb04fc..7be4b0d 100644
--- a/src/_core.scss
+++ b/src/_core.scss
@@ -9,37 +9,37 @@
9@forward 'core.vars'; 9@forward 'core.vars';
10 10
11@mixin styles { 11@mixin styles {
12 @each $theme-name, $theme in vars.$themes { 12 @each $theme-name, $theme in vars.$themes {
13 @if $theme-name == config.$theme-default { 13 @if $theme-name == config.$theme-default {
14 :root { 14 :root {
15 @include props.materialize(map.values(meta.module-variables('vars'))); 15 @include props.materialize(map.values(meta.module-variables('vars')));
16 16
17 @if map.has-key($theme, 'dark') { 17 @if map.has-key($theme, 'dark') {
18 @media (prefers-color-scheme: dark) { 18 @media (prefers-color-scheme: dark) {
19 @include props.materialize(map.get($theme, 'dark')); 19 @include props.materialize(map.get($theme, 'dark'));
20 } 20 }
21 } 21 }
22 } 22 }
23 23
24 @if map.has-key($theme, 'dark') and config.$explicit-dark-theme { 24 @if map.has-key($theme, 'dark') and config.$explicit-dark-theme {
25 @include bem.theme('dark') { 25 @include bem.theme('dark') {
26 @include props.materialize(map.values(meta.module-variables('vars'))); 26 @include props.materialize(map.values(meta.module-variables('vars')));
27 @include props.materialize(map.get($theme, 'dark')); 27 @include props.materialize(map.get($theme, 'dark'));
28 } 28 }
29 } 29 }
30 } @else { 30 } @else {
31 @include bem.theme(string.slice($theme-name, 3)) { 31 @include bem.theme(string.slice($theme-name, 3)) {
32 @include props.materialize(map.get($theme, 'light')); 32 @include props.materialize(map.get($theme, 'light'));
33 33
34 color: props.get(vars.$theme, --text); 34 color: props.get(vars.$theme, --text);
35 background-color: props.get(vars.$theme, --bg-base); 35 background-color: props.get(vars.$theme, --bg-base);
36 36
37 @if map.has-key($theme, 'dark') { 37 @if map.has-key($theme, 'dark') {
38 @media (prefers-color-scheme: dark) { 38 @media (prefers-color-scheme: dark) {
39 @include props.materialize(map.get($theme, 'dark')); 39 @include props.materialize(map.get($theme, 'dark'));
40 } 40 }
41 } 41 }
42 } 42 }
43 } 43 }
44 } 44 }
45} 45}
diff --git a/src/_core.vars.scss b/src/_core.vars.scss
index 8c0b74f..f7a9ebc 100644
--- a/src/_core.vars.scss
+++ b/src/_core.vars.scss
@@ -116,8 +116,8 @@ $sticky-top-offset: props.def(--sticky-top-offset, 0rem) !default;
116$-static-colors: (); 116$-static-colors: ();
117 117
118@each $palette-name, $palette in map.get(config.$static-colors, --palettes) { 118@each $palette-name, $palette in map.get(config.$static-colors, --palettes) {
119 $palette: fn.palette($palette, map.get(config.$static-colors, --levels), map.get(config.$static-colors, --base)); 119 $palette: fn.palette($palette, map.get(config.$static-colors, --levels), map.get(config.$static-colors, --base));
120 $-static-colors: map.merge($-static-colors, ( $palette-name: $palette )); 120 $-static-colors: map.merge($-static-colors, ( $palette-name: $palette ));
121} 121}
122 122
123// 123//
@@ -125,11 +125,11 @@ $-static-colors: ();
125$transparent-colors: props.def(--transparent-colors, (), 'color'); 125$transparent-colors: props.def(--transparent-colors, (), 'color');
126 126
127@each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) { 127@each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) {
128 $color: list.nth($palette, 1); 128 $color: list.nth($palette, 1);
129 $text: list.nth($palette, 2); 129 $text: list.nth($palette, 2);
130 130
131 $palette: fn.transparent-palette($color, $text, map.get(config.$static-colors, --transparents)); 131 $palette: fn.transparent-palette($color, $text, map.get(config.$static-colors, --transparents));
132 $transparent-colors: props.merge($transparent-colors, ( $palette-name: $palette )); 132 $transparent-colors: props.merge($transparent-colors, ( $palette-name: $palette ));
133} 133}
134 134
135// 135//
@@ -137,47 +137,47 @@ $transparent-colors: props.def(--transparent-colors, (), 'color');
137$themes: (); 137$themes: ();
138 138
139@each $theme-name, $theme in config.$themes { 139@each $theme-name, $theme in config.$themes {
140 @each $variant-name, $variant in $theme { 140 @each $variant-name, $variant in $theme {
141 @if $variant != null { 141 @if $variant != null {
142 $compiled: props.def(--colors, (), 'color'); 142 $compiled: props.def(--colors, (), 'color');
143 143
144 @each $palette-name, $palette in $-static-colors { 144 @each $palette-name, $palette in $-static-colors {
145 $compiled: props.merge($compiled, ( #{$palette-name}-static: $palette )); 145 $compiled: props.merge($compiled, ( #{$palette-name}-static: $palette ));
146 } 146 }
147 147
148 @each $palette-name, $palette in map.get($variant, --palettes) { 148 @each $palette-name, $palette in map.get($variant, --palettes) {
149 $base-color: list.nth($palette, 1); 149 $base-color: list.nth($palette, 1);
150 $levels: list.nth($palette, 2); 150 $levels: list.nth($palette, 2);
151 151
152 $palette: fn.palette($base-color, map.get($variant, --levels, $levels), list.nth(map.get($variant, --palettes, --base), 1)); 152 $palette: fn.palette($base-color, map.get($variant, --levels, $levels), list.nth(map.get($variant, --palettes, --base), 1));
153 $compiled: props.merge($compiled, ( $palette-name: $palette )); 153 $compiled: props.merge($compiled, ( $palette-name: $palette ));
154 } 154 }
155 155
156 @each $color, $value in map.get($variant, --constants) { 156 @each $color, $value in map.get($variant, --constants) {
157 $compiled: props.merge($compiled, ( $color: $value )); 157 $compiled: props.merge($compiled, ( $color: $value ));
158 } 158 }
159 159
160 @each $color, $ref in map.get($variant, --semantic) { 160 @each $color, $ref in map.get($variant, --semantic) {
161 $res: (); 161 $res: ();
162 162
163 @if meta.type-of($ref) == 'map' { 163 @if meta.type-of($ref) == 'map' {
164 @each $key, $r in $ref { 164 @each $key, $r in $ref {
165 $re1: list.nth($r, 1); 165 $re1: list.nth($r, 1);
166 $re2: functions.list-slice($r, 2); 166 $re2: functions.list-slice($r, 2);
167 $res: map.merge($res, ($key: props.get($compiled, $re1, $re2...))); 167 $res: map.merge($res, ($key: props.get($compiled, $re1, $re2...)));
168 } 168 }
169 } @else { 169 } @else {
170 $ref1: list.nth($ref, 1); 170 $ref1: list.nth($ref, 1);
171 $ref2: functions.list-slice($ref, 2); 171 $ref2: functions.list-slice($ref, 2);
172 $res: props.get($compiled, $ref1, $ref2...); 172 $res: props.get($compiled, $ref1, $ref2...);
173 } 173 }
174 174
175 $compiled: props.merge($compiled, ( $color: $res )); 175 $compiled: props.merge($compiled, ( $color: $res ));
176 } 176 }
177 177
178 $themes: map.set($themes, $theme-name, $variant-name, $compiled); 178 $themes: map.set($themes, $theme-name, $variant-name, $compiled);
179 } 179 }
180 } 180 }
181} 181}
182 182
183$theme: map.get($themes, config.$theme-default, light) !default; 183$theme: map.get($themes, config.$theme-default, light) !default;
diff --git a/src/_functions.scss b/src/_functions.scss
index b41609e..ec1f9d8 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -8,63 +8,63 @@
8@use 'apca'; 8@use 'apca';
9 9
10@function palette($base-color, $levels, $ref-color: $base-color) { 10@function palette($base-color, $levels, $ref-color: $base-color) {
11 $base-lch: color.to-space($base-color, oklch); 11 $base-lch: color.to-space($base-color, oklch);
12 $ref-lch: color.to-space($ref-color, oklch); 12 $ref-lch: color.to-space($ref-color, oklch);
13 13
14 $ref-l: color.channel($ref-lch, 'lightness'); 14 $ref-l: color.channel($ref-lch, 'lightness');
15 $ref-y: apca.sRGB_to_Y($ref-lch); 15 $ref-y: apca.sRGB_to_Y($ref-lch);
16 16
17 $black-y: apca.sRGB_to_Y(#000); 17 $black-y: apca.sRGB_to_Y(#000);
18 $white-y: apca.sRGB_to_Y(#fff); 18 $white-y: apca.sRGB_to_Y(#fff);
19 19
20 $palette: (); 20 $palette: ();
21 21
22 @each $key, $level in $levels { 22 @each $key, $level in $levels {
23 $color: list.nth($level, 1); 23 $color: list.nth($level, 1);
24 $y: 0; 24 $y: 0;
25 $c: 1; 25 $c: 1;
26 $h: 0deg; 26 $h: 0deg;
27 27
28 @if list.length($level) > 1 { 28 @if list.length($level) > 1 {
29 $c: list.nth($level, 2); 29 $c: list.nth($level, 2);
30 } 30 }
31 @if list.length($level) > 2 { 31 @if list.length($level) > 2 {
32 $h: list.nth($level, 3); 32 $h: list.nth($level, 3);
33 } 33 }
34 34
35 @if meta.type-of($color) != 'color' { 35 @if meta.type-of($color) != 'color' {
36 $y: apca.reverse($color, $ref-y); 36 $y: apca.reverse($color, $ref-y);
37 $l: color.channel($base-lch, 'lightness'); 37 $l: color.channel($base-lch, 'lightness');
38 38
39 @if $y != false { 39 @if $y != false {
40 $l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch); 40 $l: color.channel(apca.Y_to_sRGB($y), 'lightness', oklch);
41 } @else { 41 } @else {
42 $y: $ref-y; 42 $y: $ref-y;
43 } 43 }
44 44
45 $color: oklch($l ($c * color.channel($base-lch, 'chroma')) ($h + color.channel($base-lch, 'hue'))); 45 $color: oklch($l ($c * color.channel($base-lch, 'chroma')) ($h + color.channel($base-lch, 'hue')));
46 } @else { 46 } @else {
47 $y: apca.sRGB_to_Y($color); 47 $y: apca.sRGB_to_Y($color);
48 } 48 }
49 49
50 $contrast-black: apca.contrast($black-y, $y); 50 $contrast-black: apca.contrast($black-y, $y);
51 $contrast-white: apca.contrast($white-y, $y); 51 $contrast-white: apca.contrast($white-y, $y);
52 52
53 $palette: map.set($palette, $key, $color); 53 $palette: map.set($palette, $key, $color);
54 $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff)); 54 $palette: map.set($palette, #{$key}-text, if(math.abs($contrast-black) > math.abs($contrast-white), #000, #fff));
55 } 55 }
56 56
57 @return $palette; 57 @return $palette;
58} 58}
59 59
60@function transparent-palette($color, $text, $alphas) { 60@function transparent-palette($color, $text, $alphas) {
61 $palette: ( 61 $palette: (
62 --text: $text, 62 --text: $text,
63 ); 63 );
64 64
65 @each $key, $alpha in $alphas { 65 @each $key, $alpha in $alphas {
66 $palette: map.set($palette, $key, rgba($color, $alpha)); 66 $palette: map.set($palette, $key, rgba($color, $alpha));
67 } 67 }
68 68
69 @return $palette; 69 @return $palette;
70} 70}
diff --git a/src/_iro-design.scss b/src/_iro-design.scss
index ede8d34..22e50c0 100644
--- a/src/_iro-design.scss
+++ b/src/_iro-design.scss
@@ -1,22 +1,22 @@
1$breakpoints: ( 1$breakpoints: (
2 lg: 1340px, 2 lg: 1340px,
3 md: 900px, 3 md: 900px,
4 sm: 620px, 4 sm: 620px,
5 xs: 400px, 5 xs: 400px,
6) !default; 6) !default;
7 7
8@use 'iro-sass/src/responsive' with ( 8@use 'iro-sass/src/responsive' with (
9 $named-viewports: $breakpoints 9 $named-viewports: $breakpoints
10); 10);
11 11
12@forward 'include-media/dist/include-media' as media--* with ( 12@forward 'include-media/dist/include-media' as media--* with (
13 $breakpoints: $breakpoints, 13 $breakpoints: $breakpoints,
14 $unit-intervals: ( 14 $unit-intervals: (
15 'px': 1, 15 'px': 1,
16 'em': .01, 16 'em': .01,
17 'rem': .01, 17 'rem': .01,
18 '': 0 18 '': 0
19 ) !default, 19 ) !default,
20); 20);
21 21
22@forward 'config.defaults' as config-defaults--*; 22@forward 'config.defaults' as config-defaults--*;
diff --git a/src/_layers.scss b/src/_layers.scss
index cc3bb50..2a80190 100644
--- a/src/_layers.scss
+++ b/src/_layers.scss
@@ -1,3 +1,3 @@
1@mixin styles { 1@mixin styles {
2 @layer scope, theme, object, layout, component, utility; 2 @layer scope, theme, object, layout, component, utility;
3} 3}
diff --git a/src/_mixins.scss b/src/_mixins.scss
index 49d3b6f..8899778 100644
--- a/src/_mixins.scss
+++ b/src/_mixins.scss
@@ -2,37 +2,37 @@
2@use 'functions' as fn; 2@use 'functions' as fn;
3 3
4@mixin set-font($basis, $values: ()) { 4@mixin set-font($basis, $values: ()) {
5 $values: fn.set-font($basis, $values); 5 $values: fn.set-font($basis, $values);
6 6
7 @each $prop, $value in $values { 7 @each $prop, $value in $values {
8 @if $value != null { 8 @if $value != null {
9 #{$prop}: $value; 9 #{$prop}: $value;
10 } 10 }
11 } 11 }
12} 12}
13 13
14@mixin heading-strong($size) { 14@mixin heading-strong($size) {
15 font-size: fn.global-dim(list.join(--heading, $size)); 15 font-size: fn.global-dim(list.join(--heading, $size));
16 color: fn.global-color(--heading); 16 color: fn.global-color(--heading);
17} 17}
18 18
19@mixin heading-medium($size) { 19@mixin heading-medium($size) {
20 @include set-font(--standard, ( 20 @include set-font(--standard, (
21 --line-height: null, 21 --line-height: null,
22 --size: fn.global-dim(list.join(--heading, $size)), 22 --size: fn.global-dim(list.join(--heading, $size)),
23 --weight: bold 23 --weight: bold
24 )); 24 ));
25 25
26 color: fn.global-color(--heading); 26 color: fn.global-color(--heading);
27} 27}
28 28
29@mixin heading-faint($size) { 29@mixin heading-faint($size) {
30 @include set-font(--standard, ( 30 @include set-font(--standard, (
31 --line-height: null, 31 --line-height: null,
32 --size: fn.global-dim(list.join(--heading, $size)), 32 --size: fn.global-dim(list.join(--heading, $size)),
33 --weight: 500, 33 --weight: 500,
34 --spacing: 1px 34 --spacing: 1px
35 )); 35 ));
36 36
37 color: fn.global-color(--text-mute); 37 color: fn.global-color(--text-mute);
38} 38}
diff --git a/src/_props.scss b/src/_props.scss
index 5590aed..0b2306d 100644
--- a/src/_props.scss
+++ b/src/_props.scss
@@ -8,41 +8,41 @@
8@use 'iro-sass/src/props'; 8@use 'iro-sass/src/props';
9 9
10@mixin materialize-at-root($ref) { 10@mixin materialize-at-root($ref) {
11 @if meta.type-of($ref) == 'map' { 11 @if meta.type-of($ref) == 'map' {
12 $ref: map.values($ref); 12 $ref: map.values($ref);
13 } 13 }
14 14
15 :root { 15 :root {
16 @include props.materialize($ref, null); 16 @include props.materialize($ref, null);
17 @include props.materialize($ref, 'color'); 17 @include props.materialize($ref, 'color');
18 18
19 @each $breakpoint in map.keys(media.$breakpoints) { 19 @each $breakpoint in map.keys(media.$breakpoints) {
20 @include media.media('<=#{$breakpoint}') { 20 @include media.media('<=#{$breakpoint}') {
21 @include props.materialize($ref, $breakpoint); 21 @include props.materialize($ref, $breakpoint);
22 } 22 }
23 } 23 }
24 24
25 @media (prefers-color-scheme: dark) { 25 @media (prefers-color-scheme: dark) {
26 @include props.materialize($ref, 'dark'); 26 @include props.materialize($ref, 'dark');
27 } 27 }
28 } 28 }
29 29
30 @if config.$explicit-dark-theme { 30 @if config.$explicit-dark-theme {
31 @include bem.theme('dark') { 31 @include bem.theme('dark') {
32 @include props.materialize($ref, 'color'); 32 @include props.materialize($ref, 'color');
33 @include props.materialize($ref, 'dark'); 33 @include props.materialize($ref, 'dark');
34 } 34 }
35 } 35 }
36 36
37 @each $theme-name in map.keys(config.$themes) { 37 @each $theme-name in map.keys(config.$themes) {
38 @if $theme-name != config.$theme-default { 38 @if $theme-name != config.$theme-default {
39 @include bem.theme(string.slice($theme-name, 3)) { 39 @include bem.theme(string.slice($theme-name, 3)) {
40 @include props.materialize($ref, 'color'); 40 @include props.materialize($ref, 'color');
41 41
42 @media (prefers-color-scheme: dark) { 42 @media (prefers-color-scheme: dark) {
43 @include props.materialize($ref, 'dark'); 43 @include props.materialize($ref, 'dark');
44 } 44 }
45 } 45 }
46 } 46 }
47 } 47 }
48} 48}
diff --git a/src/_themes.scss b/src/_themes.scss
index caf1e80..fe5a0cb 100644
--- a/src/_themes.scss
+++ b/src/_themes.scss
@@ -8,67 +8,67 @@
8@forward 'core.vars'; 8@forward 'core.vars';
9 9
10@mixin styles { 10@mixin styles {
11 @include bem.theme('base') { 11 @include bem.theme('base') {
12 background-color: props.get(vars.$theme, --bg-base); 12 background-color: props.get(vars.$theme, --bg-base);
13 13
14 @include bem.suffix('light') { 14 @include bem.suffix('light') {
15 @media (prefers-color-scheme: light) { 15 @media (prefers-color-scheme: light) {
16 background-color: props.get(vars.$theme, --bg-base); 16 background-color: props.get(vars.$theme, --bg-base);
17 } 17 }
18 } 18 }
19 19
20 @include bem.suffix('dark') { 20 @include bem.suffix('dark') {
21 @media (prefers-color-scheme: dark) { 21 @media (prefers-color-scheme: dark) {
22 background-color: props.get(vars.$theme, --bg-base); 22 background-color: props.get(vars.$theme, --bg-base);
23 } 23 }
24 } 24 }
25 } 25 }
26 26
27 @include bem.theme('l1') { 27 @include bem.theme('l1') {
28 background-color: props.get(vars.$theme, --bg-l1); 28 background-color: props.get(vars.$theme, --bg-l1);
29 29
30 @include bem.suffix('light') { 30 @include bem.suffix('light') {
31 @media (prefers-color-scheme: light) { 31 @media (prefers-color-scheme: light) {
32 background-color: props.get(vars.$theme, --bg-l1); 32 background-color: props.get(vars.$theme, --bg-l1);
33 } 33 }
34 } 34 }
35 35
36 @include bem.suffix('dark') { 36 @include bem.suffix('dark') {
37 @media (prefers-color-scheme: dark) { 37 @media (prefers-color-scheme: dark) {
38 background-color: props.get(vars.$theme, --bg-l1); 38 background-color: props.get(vars.$theme, --bg-l1);
39 } 39 }
40 } 40 }
41 } 41 }
42 42
43 @include bem.theme('l2') { 43 @include bem.theme('l2') {
44 background-color: props.get(vars.$theme, --bg-l2); 44 background-color: props.get(vars.$theme, --bg-l2);
45 45
46 @include bem.suffix('light') { 46 @include bem.suffix('light') {
47 @media (prefers-color-scheme: light) { 47 @media (prefers-color-scheme: light) {
48 background-color: props.get(vars.$theme, --bg-l2); 48 background-color: props.get(vars.$theme, --bg-l2);
49 } 49 }
50 } 50 }
51 51
52 @include bem.suffix('dark') { 52 @include bem.suffix('dark') {
53 @media (prefers-color-scheme: dark) { 53 @media (prefers-color-scheme: dark) {
54 background-color: props.get(vars.$theme, --bg-l2); 54 background-color: props.get(vars.$theme, --bg-l2);
55 } 55 }
56 } 56 }
57 } 57 }
58 58
59 @include bem.theme('50') { 59 @include bem.theme('50') {
60 background-color: props.get(vars.$theme, --base, --50); 60 background-color: props.get(vars.$theme, --base, --50);
61 61
62 @include bem.suffix('light') { 62 @include bem.suffix('light') {
63 @media (prefers-color-scheme: light) { 63 @media (prefers-color-scheme: light) {
64 background-color: props.get(vars.$theme, --base, --50); 64 background-color: props.get(vars.$theme, --base, --50);
65 } 65 }
66 } 66 }
67 67
68 @include bem.suffix('dark') { 68 @include bem.suffix('dark') {
69 @media (prefers-color-scheme: dark) { 69 @media (prefers-color-scheme: dark) {
70 background-color: props.get(vars.$theme, --base, --50); 70 background-color: props.get(vars.$theme, --base, --50);
71 } 71 }
72 } 72 }
73 } 73 }
74} 74}
diff --git a/src/_utils.scss b/src/_utils.scss
index 371a357..3dae3b6 100644
--- a/src/_utils.scss
+++ b/src/_utils.scss
@@ -9,372 +9,372 @@
9 9
10/* stylelint-disable-next-line scss/dollar-variable-pattern */ 10/* stylelint-disable-next-line scss/dollar-variable-pattern */
11$-dirs: ( 11$-dirs: (
12 '': '', 12 '': '',
13 'b': '-block', 13 'b': '-block',
14 'bs': '-block-start', 14 'bs': '-block-start',
15 'be': '-block-end', 15 'be': '-block-end',
16 'i': '-inline', 16 'i': '-inline',
17 'is': '-inline-start', 17 'is': '-inline-start',
18 'ie': '-inline-end', 18 'ie': '-inline-end',
19) !default; 19) !default;
20 20
21/* stylelint-disable-next-line scss/dollar-variable-pattern */ 21/* stylelint-disable-next-line scss/dollar-variable-pattern */
22$-sizes: ( 22$-sizes: (
23 0: vars.$size--0, 23 0: vars.$size--0,
24 10: vars.$size--10, 24 10: vars.$size--10,
25 50: vars.$size--50, 25 50: vars.$size--50,
26 75: vars.$size--75, 26 75: vars.$size--75,
27 100: vars.$size--100, 27 100: vars.$size--100,
28 125: vars.$size--125, 28 125: vars.$size--125,
29 200: vars.$size--200, 29 200: vars.$size--200,
30 400: vars.$size--400, 30 400: vars.$size--400,
31 700: vars.$size--700, 31 700: vars.$size--700,
32 800: vars.$size--800, 32 800: vars.$size--800,
33) !default; 33) !default;
34 34
35$-font-sizes: ( 35$-font-sizes: (
36 50: vars.$font-size--50, 36 50: vars.$font-size--50,
37 75: vars.$font-size--75, 37 75: vars.$font-size--75,
38 100: vars.$font-size--100, 38 100: vars.$font-size--100,
39 150: vars.$font-size--150, 39 150: vars.$font-size--150,
40 200: vars.$font-size--200, 40 200: vars.$font-size--200,
41 300: vars.$font-size--300, 41 300: vars.$font-size--300,
42) !default; 42) !default;
43 43
44@mixin styles { 44@mixin styles {
45 @include bem.utility('d-block') { 45 @include bem.utility('d-block') {
46 display: block; 46 display: block;
47 } 47 }
48 48
49 @include bem.utility('d-inline-block') { 49 @include bem.utility('d-inline-block') {
50 display: inline-block; 50 display: inline-block;
51 } 51 }
52 52
53 @include bem.utility('d-contents') { 53 @include bem.utility('d-contents') {
54 display: contents; 54 display: contents;
55 } 55 }
56 56
57 @include bem.utility('d-flex') { 57 @include bem.utility('d-flex') {
58 display: flex; 58 display: flex;
59 } 59 }
60 60
61 @include bem.utility('td-none') { 61 @include bem.utility('td-none') {
62 text-decoration: none; 62 text-decoration: none;
63 } 63 }
64 64
65 @include bem.utility('d-none') { 65 @include bem.utility('d-none') {
66 display: none; 66 display: none;
67 67
68 @each $breakpoint in map.keys(media.$breakpoints) { 68 @each $breakpoint in map.keys(media.$breakpoints) {
69 @include media.media('<=#{$breakpoint}') { 69 @include media.media('<=#{$breakpoint}') {
70 @include bem.suffix('#{$breakpoint}-lo') { 70 @include bem.suffix('#{$breakpoint}-lo') {
71 display: none; 71 display: none;
72 } 72 }
73 } 73 }
74 74
75 @include media.media('>#{$breakpoint}') { 75 @include media.media('>#{$breakpoint}') {
76 @include bem.suffix('#{$breakpoint}-hi') { 76 @include bem.suffix('#{$breakpoint}-hi') {
77 display: none; 77 display: none;
78 } 78 }
79 } 79 }
80 } 80 }
81 81
82 @include bem.at-theme('js') { 82 @include bem.at-theme('js') {
83 @include bem.suffix('js') { 83 @include bem.suffix('js') {
84 display: none; 84 display: none;
85 } 85 }
86 } 86 }
87 87
88 @include bem.at-theme('no-js') { 88 @include bem.at-theme('no-js') {
89 @include bem.suffix('no-js') { 89 @include bem.suffix('no-js') {
90 display: none; 90 display: none;
91 } 91 }
92 } 92 }
93 93
94 @include bem.suffix('empty') { 94 @include bem.suffix('empty') {
95 &:empty { 95 &:empty {
96 display: none; 96 display: none;
97 } 97 }
98 } 98 }
99 } 99 }
100 100
101 @include bem.utility('va-top') { 101 @include bem.utility('va-top') {
102 vertical-align: top; 102 vertical-align: top;
103 } 103 }
104 104
105 @include bem.utility('va-baseline') { 105 @include bem.utility('va-baseline') {
106 vertical-align: baseline; 106 vertical-align: baseline;
107 } 107 }
108 108
109 @include bem.utility('va-middle') { 109 @include bem.utility('va-middle') {
110 vertical-align: middle; 110 vertical-align: middle;
111 } 111 }
112 112
113 @include bem.utility('va-bottom') { 113 @include bem.utility('va-bottom') {
114 vertical-align: bottom; 114 vertical-align: bottom;
115 } 115 }
116 116
117 @include bem.utility('ta-start') { 117 @include bem.utility('ta-start') {
118 text-align: start; 118 text-align: start;
119 } 119 }
120 120
121 @include bem.utility('ta-end') { 121 @include bem.utility('ta-end') {
122 text-align: end; 122 text-align: end;
123 } 123 }
124 124
125 @include bem.utility('ta-center') { 125 @include bem.utility('ta-center') {
126 text-align: center; 126 text-align: center;
127 } 127 }
128 128
129 @include bem.utility('fw-normal') { 129 @include bem.utility('fw-normal') {
130 font-weight: normal; 130 font-weight: normal;
131 } 131 }
132 132
133 @include bem.utility('ai-center') { 133 @include bem.utility('ai-center') {
134 align-items: center; 134 align-items: center;
135 } 135 }
136 136
137 @include bem.utility('ai-start') { 137 @include bem.utility('ai-start') {
138 align-items: flex-start; 138 align-items: flex-start;
139 } 139 }
140 140
141 @include bem.utility('ai-end') { 141 @include bem.utility('ai-end') {
142 align-items: flex-end; 142 align-items: flex-end;
143 } 143 }
144 144
145 @include bem.utility('ac-center') { 145 @include bem.utility('ac-center') {
146 align-content: center; 146 align-content: center;
147 } 147 }
148 148
149 @include bem.utility('jc-center') { 149 @include bem.utility('jc-center') {
150 justify-content: center; 150 justify-content: center;
151 } 151 }
152 152
153 @include bem.utility('jc-start') { 153 @include bem.utility('jc-start') {
154 justify-content: flex-start; 154 justify-content: flex-start;
155 } 155 }
156 156
157 @include bem.utility('jc-end') { 157 @include bem.utility('jc-end') {
158 justify-content: flex-end; 158 justify-content: flex-end;
159 } 159 }
160 160
161 @include bem.utility('tt-upper') { 161 @include bem.utility('tt-upper') {
162 text-transform: uppercase; 162 text-transform: uppercase;
163 } 163 }
164 164
165 @include bem.utility('tt-lower') { 165 @include bem.utility('tt-lower') {
166 text-transform: lowercase; 166 text-transform: lowercase;
167 } 167 }
168 168
169 @include bem.utility('c-heading') { 169 @include bem.utility('c-heading') {
170 color: props.get(vars.$theme, --heading); 170 color: props.get(vars.$theme, --heading);
171 171
172 @each $theme in map.keys(props.get(vars.$transparent-colors)) { 172 @each $theme in map.keys(props.get(vars.$transparent-colors)) {
173 $theme-name: static-#{string.slice($theme, 3)}; 173 $theme-name: static-#{string.slice($theme, 3)};
174 174
175 @include bem.at-theme($theme-name) { 175 @include bem.at-theme($theme-name) {
176 color: props.get(vars.$transparent-colors, $theme, --900); 176 color: props.get(vars.$transparent-colors, $theme, --900);
177 } 177 }
178 } 178 }
179 } 179 }
180 180
181 @include bem.utility('c-text') { 181 @include bem.utility('c-text') {
182 color: props.get(vars.$theme, --text); 182 color: props.get(vars.$theme, --text);
183 183
184 @each $theme in map.keys(props.get(vars.$transparent-colors)) { 184 @each $theme in map.keys(props.get(vars.$transparent-colors)) {
185 $theme-name: static-#{string.slice($theme, 3)}; 185 $theme-name: static-#{string.slice($theme, 3)};
186 186
187 @include bem.at-theme($theme-name) { 187 @include bem.at-theme($theme-name) {
188 color: props.get(vars.$transparent-colors, $theme, --800); 188 color: props.get(vars.$transparent-colors, $theme, --800);
189 } 189 }
190 } 190 }
191 } 191 }
192 192
193 @include bem.utility('c-mute') { 193 @include bem.utility('c-mute') {
194 color: props.get(vars.$theme, --text-mute); 194 color: props.get(vars.$theme, --text-mute);
195 195
196 @each $theme in map.keys(props.get(vars.$transparent-colors)) { 196 @each $theme in map.keys(props.get(vars.$transparent-colors)) {
197 $theme-name: static-#{string.slice($theme, 3)}; 197 $theme-name: static-#{string.slice($theme, 3)};
198 198
199 @include bem.at-theme($theme-name) { 199 @include bem.at-theme($theme-name) {
200 color: props.get(vars.$transparent-colors, $theme, --700); 200 color: props.get(vars.$transparent-colors, $theme, --700);
201 } 201 }
202 } 202 }
203 } 203 }
204 204
205 @include bem.utility('c-mute-more') { 205 @include bem.utility('c-mute-more') {
206 color: props.get(vars.$theme, --text-mute-more); 206 color: props.get(vars.$theme, --text-mute-more);
207 207
208 @each $theme in map.keys(props.get(vars.$transparent-colors)) { 208 @each $theme in map.keys(props.get(vars.$transparent-colors)) {
209 $theme-name: static-#{string.slice($theme, 3)}; 209 $theme-name: static-#{string.slice($theme, 3)};
210 210
211 @include bem.at-theme($theme-name) { 211 @include bem.at-theme($theme-name) {
212 color: props.get(vars.$transparent-colors, $theme, --600); 212 color: props.get(vars.$transparent-colors, $theme, --600);
213 } 213 }
214 } 214 }
215 } 215 }
216 216
217 @each $mod, $size in $-font-sizes { 217 @each $mod, $size in $-font-sizes {
218 @include bem.utility('fs-#{$mod}') { 218 @include bem.utility('fs-#{$mod}') {
219 font-size: props.get($size); 219 font-size: props.get($size);
220 } 220 }
221 } 221 }
222 222
223 @each $dir, $prop in (is: inline-size, bs: block-size) { 223 @each $dir, $prop in (is: inline-size, bs: block-size) {
224 @include bem.utility('#{$dir}-100') { 224 @include bem.utility('#{$dir}-100') {
225 #{$prop}: 100%; 225 #{$prop}: 100%;
226 } 226 }
227 227
228 @include bem.utility('#{$dir}-75') { 228 @include bem.utility('#{$dir}-75') {
229 #{$prop}: 75%; 229 #{$prop}: 75%;
230 } 230 }
231 231
232 @include bem.utility('#{$dir}-50') { 232 @include bem.utility('#{$dir}-50') {
233 #{$prop}: 50%; 233 #{$prop}: 50%;
234 } 234 }
235 235
236 @include bem.utility('#{$dir}-25') { 236 @include bem.utility('#{$dir}-25') {
237 #{$prop}: 25%; 237 #{$prop}: 25%;
238 } 238 }
239 239
240 @include bem.utility('#{$dir}-1px') { 240 @include bem.utility('#{$dir}-1px') {
241 #{$prop}: 1px; 241 #{$prop}: 1px;
242 } 242 }
243 243
244 @include bem.utility('#{$dir}-0') { 244 @include bem.utility('#{$dir}-0') {
245 #{$prop}: 0; 245 #{$prop}: 0;
246 } 246 }
247 } 247 }
248 248
249 @include bem.utility('elp') { 249 @include bem.utility('elp') {
250 overflow: hidden; 250 overflow: hidden;
251 text-overflow: ellipsis; 251 text-overflow: ellipsis;
252 white-space: nowrap; 252 white-space: nowrap;
253 } 253 }
254 254
255 @include bem.utility('o-auto') { 255 @include bem.utility('o-auto') {
256 overflow: auto; 256 overflow: auto;
257 } 257 }
258 258
259 @include bem.utility('o-hidden') { 259 @include bem.utility('o-hidden') {
260 overflow: hidden; 260 overflow: hidden;
261 } 261 }
262 262
263 @include bem.utility('p-static') { 263 @include bem.utility('p-static') {
264 position: static; 264 position: static;
265 } 265 }
266 266
267 @include bem.utility('p-relative') { 267 @include bem.utility('p-relative') {
268 position: relative; 268 position: relative;
269 } 269 }
270 270
271 @include bem.utility('p-fixed') { 271 @include bem.utility('p-fixed') {
272 position: fixed; 272 position: fixed;
273 } 273 }
274 274
275 @include bem.utility('p-sticky-bs') { 275 @include bem.utility('p-sticky-bs') {
276 position: sticky; 276 position: sticky;
277 inset-block-start: props.get(vars.$sticky-top-offset); 277 inset-block-start: props.get(vars.$sticky-top-offset);
278 } 278 }
279 279
280 @include bem.utility('p-sticky-be') { 280 @include bem.utility('p-sticky-be') {
281 position: sticky; 281 position: sticky;
282 inset-block-end: 0; 282 inset-block-end: 0;
283 } 283 }
284 284
285 @include bem.utility('br-round') { 285 @include bem.utility('br-round') {
286 border-radius: props.get(vars.$rounding); 286 border-radius: props.get(vars.$rounding);
287 } 287 }
288 288
289 @include bem.utility('br-round-sm') { 289 @include bem.utility('br-round-sm') {
290 border-radius: props.get(vars.$rounding--sm); 290 border-radius: props.get(vars.$rounding--sm);
291 } 291 }
292 292
293 @each $dir, $suffix in $-dirs { 293 @each $dir, $suffix in $-dirs {
294 @include bem.utility('m#{$dir}-auto') { 294 @include bem.utility('m#{$dir}-auto') {
295 margin#{$suffix}: auto; 295 margin#{$suffix}: auto;
296 } 296 }
297 297
298 @include bem.utility('p#{$dir}-auto') { 298 @include bem.utility('p#{$dir}-auto') {
299 padding#{$suffix}: auto; 299 padding#{$suffix}: auto;
300 } 300 }
301 301
302 @each $mod, $size in $-sizes { 302 @each $mod, $size in $-sizes {
303 @include bem.utility('m#{$dir}-#{$mod}') { 303 @include bem.utility('m#{$dir}-#{$mod}') {
304 margin#{$suffix}: props.get($size); 304 margin#{$suffix}: props.get($size);
305 } 305 }
306 306
307 @include bem.utility('p#{$dir}-#{$mod}') { 307 @include bem.utility('p#{$dir}-#{$mod}') {
308 padding#{$suffix}: props.get($size); 308 padding#{$suffix}: props.get($size);
309 } 309 }
310 } 310 }
311 311
312 @include bem.utility('b#{$dir}-0') { 312 @include bem.utility('b#{$dir}-0') {
313 border#{$suffix}: 0; 313 border#{$suffix}: 0;
314 314
315 @include bem.suffix('light') { 315 @include bem.suffix('light') {
316 @media (prefers-color-scheme: light) { 316 @media (prefers-color-scheme: light) {
317 border#{$suffix}: 0; 317 border#{$suffix}: 0;
318 } 318 }
319 } 319 }
320 320
321 @include bem.suffix('dark') { 321 @include bem.suffix('dark') {
322 @media (prefers-color-scheme: dark) { 322 @media (prefers-color-scheme: dark) {
323 border#{$suffix}: 0; 323 border#{$suffix}: 0;
324 } 324 }
325 } 325 }
326 } 326 }
327 327
328 @include bem.utility('b#{$dir}-1') { 328 @include bem.utility('b#{$dir}-1') {
329 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); 329 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
330 330
331 @include bem.suffix('light') { 331 @include bem.suffix('light') {
332 @media (prefers-color-scheme: light) { 332 @media (prefers-color-scheme: light) {
333 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); 333 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
334 } 334 }
335 } 335 }
336 336
337 @include bem.suffix('dark') { 337 @include bem.suffix('dark') {
338 @media (prefers-color-scheme: dark) { 338 @media (prefers-color-scheme: dark) {
339 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border); 339 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border);
340 } 340 }
341 } 341 }
342 } 342 }
343 343
344 @include bem.utility('b#{$dir}-1-mute') { 344 @include bem.utility('b#{$dir}-1-mute') {
345 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute); 345 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
346 346
347 @include bem.suffix('light') { 347 @include bem.suffix('light') {
348 @media (prefers-color-scheme: light) { 348 @media (prefers-color-scheme: light) {
349 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute); 349 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
350 } 350 }
351 } 351 }
352 352
353 @include bem.suffix('dark') { 353 @include bem.suffix('dark') {
354 @media (prefers-color-scheme: dark) { 354 @media (prefers-color-scheme: dark) {
355 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute); 355 border#{$suffix}: props.get(vars.$border-width--thin) solid props.get(vars.$theme, --border-mute);
356 } 356 }
357 } 357 }
358 } 358 }
359 } 359 }
360 360
361 @include bem.utility('mbs-neutralize') { 361 @include bem.utility('mbs-neutralize') {
362 &::before { 362 &::before {
363 display: block; 363 display: block;
364 margin-block: -100em 100em; 364 margin-block: -100em 100em;
365 content: ''; 365 content: '';
366 } 366 }
367 } 367 }
368 368
369 @include bem.utility('sr-only') { 369 @include bem.utility('sr-only') {
370 position: absolute; 370 position: absolute;
371 width: 1px; 371 width: 1px;
372 height: 1px; 372 height: 1px;
373 padding: 0; 373 padding: 0;
374 margin: -1px; 374 margin: -1px;
375 overflow: hidden; 375 overflow: hidden;
376 clip-path: inset(50%); 376 white-space: nowrap;
377 white-space: nowrap; 377 border: 0;
378 border: 0; 378 clip-path: inset(50%);
379 } 379 }
380} 380}
diff --git a/src/layouts/_button-group.scss b/src/layouts/_button-group.scss
index 6c874e1..44719be 100644
--- a/src/layouts/_button-group.scss
+++ b/src/layouts/_button-group.scss
@@ -8,43 +8,43 @@
8@use '../objects/button.vars' as button; 8@use '../objects/button.vars' as button;
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.layout('button-group') { 13 @include bem.layout('button-group') {
14 display: inline-flex; 14 display: inline-flex;
15 flex-wrap: wrap; 15 flex-wrap: wrap;
16 gap: props.get(vars.$gap); 16 gap: props.get(vars.$gap);
17 17
18 @each $mod, $size in vars.$sizes { 18 @each $mod, $size in vars.$sizes {
19 @include bem.modifier($mod) { 19 @include bem.modifier($mod) {
20 gap: props.get($size); 20 gap: props.get($size);
21 } 21 }
22 } 22 }
23 23
24 @include bem.modifier('align-block') { 24 @include bem.modifier('align-block') {
25 margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width)); 25 margin-inline: calc(-1 * props.get(button.$pad-i) - props.get(button.$border-width));
26 26
27 @include bem.modifier('pill') { 27 @include bem.modifier('pill') {
28 margin-inline: calc(-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width)); 28 margin-inline: calc(-1 * props.get(button.$pad-i-pill) - props.get(button.$border-width));
29 } 29 }
30 30
31 @include bem.modifier('icon') { 31 @include bem.modifier('icon') {
32 margin-inline: calc(-1 * props.get(button.$pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1)); 32 margin-inline: calc(-1 * props.get(button.$pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
33 } 33 }
34 34
35 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes { 35 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in button.$fixed-sizes {
36 @include bem.modifier('action-#{$mod}') { 36 @include bem.modifier('action-#{$mod}') {
37 margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width)); 37 margin-inline: calc(-1 * props.get($pad-i) - props.get(button.$border-width));
38 38
39 @include bem.modifier('pill') { 39 @include bem.modifier('pill') {
40 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width)); 40 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(button.$border-width));
41 } 41 }
42 42
43 @include bem.modifier('icon') { 43 @include bem.modifier('icon') {
44 margin-inline: calc(-1 * props.get($pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1)); 44 margin-inline: calc(-1 * props.get($pad-b) - props.get(button.$border-width) - .5em * (props.get(button.$line-height) - 1));
45 } 45 }
46 } 46 }
47 } 47 }
48 } 48 }
49 } 49 }
50} 50}
diff --git a/src/layouts/_button-group.vars.scss b/src/layouts/_button-group.vars.scss
index 50c1b53..b56eec7 100644
--- a/src/layouts/_button-group.vars.scss
+++ b/src/layouts/_button-group.vars.scss
@@ -9,8 +9,8 @@ $lg: props.def(--l-button-group--lg, props.get(core.$size--300)) !default;
9$xl: props.def(--l-button-group--xl, props.get(core.$size--450)) !default; 9$xl: props.def(--l-button-group--xl, props.get(core.$size--450)) !default;
10 10
11$sizes: ( 11$sizes: (
12 'gapless': $gapless, 12 'gapless': $gapless,
13 'sm': $sm, 13 'sm': $sm,
14 'lg': $lg, 14 'lg': $lg,
15 'xl': $xl, 15 'xl': $xl,
16) !default; 16) !default;
diff --git a/src/layouts/_card-list.scss b/src/layouts/_card-list.scss
index cca6e72..aedbfd0 100644
--- a/src/layouts/_card-list.scss
+++ b/src/layouts/_card-list.scss
@@ -8,151 +8,151 @@
8@use 'card-list.vars' as vars; 8@use 'card-list.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.layout('card-list') { 13 @include bem.layout('card-list') {
14 display: flex; 14 display: flex;
15 flex-direction: column; 15 flex-direction: column;
16 gap: props.get(vars.$row-gap); 16 gap: props.get(vars.$row-gap);
17 17
18 @include bem.modifier('merge') { 18 @include bem.modifier('merge') {
19 position: relative; 19 position: relative;
20 gap: calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width)); 20 gap: calc(2 * props.get(vars.$merge-padding) + props.get(vars.$border-width));
21 padding: props.get(vars.$merge-padding); 21 padding: props.get(vars.$merge-padding);
22 background-color: props.get(vars.$card-bg-color); 22 background-color: props.get(vars.$card-bg-color);
23 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);
24 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$merge-padding)); 24 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$merge-padding));
25 25
26 @include bem.elem('card') { 26 @include bem.elem('card') {
27 &:not(:last-child) { 27 &:not(:last-child) {
28 position: relative; 28 position: relative;
29 border-end-start-radius: 0; 29 border-end-start-radius: 0;
30 border-end-end-radius: 0; 30 border-end-end-radius: 0;
31 31
32 &::after { 32 &::after {
33 position: absolute; 33 position: absolute;
34 inset-block-start: calc(100% + props.get(vars.$merge-padding) + props.get(vars.$border-width)); 34 inset-block-start: calc(100% + props.get(vars.$merge-padding) + props.get(vars.$border-width));
35 inset-inline: calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width)); 35 inset-inline: calc(-1 * props.get(vars.$merge-padding) - props.get(vars.$border-width));
36 content: ''; 36 display: block;
37 display: block; 37 block-size: props.get(vars.$border-width);
38 block-size: props.get(vars.$border-width); 38 content: '';
39 background-color: props.get(vars.$border-color); 39 background-color: props.get(vars.$border-color);
40 } 40 }
41 } 41 }
42 42
43 &:hover, 43 &:hover,
44 &:active, 44 &:active,
45 &:focus-visible { 45 &:focus-visible {
46 transform: none; 46 transform: none;
47 } 47 }
48 48
49 @include bem.next-twin-elem { 49 @include bem.next-twin-elem {
50 border-start-start-radius: 0; 50 border-start-start-radius: 0;
51 border-start-end-radius: 0; 51 border-start-end-radius: 0;
52 } 52 }
53 } 53 }
54 54
55 @include bem.modifier('borderless') { 55 @include bem.modifier('borderless') {
56 border-color: props.get(vars.$card-bg-color); 56 border-color: props.get(vars.$card-bg-color);
57 57
58 @include bem.elem('card') { 58 @include bem.elem('card') {
59 &:not(:last-child) { 59 &:not(:last-child) {
60 &::after { 60 &::after {
61 inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width)); 61 inset-inline: calc(-1 * props.get(vars.$merge-padding) - 2 * props.get(vars.$border-width));
62 } 62 }
63 } 63 }
64 } 64 }
65 } 65 }
66 66
67 @include bem.modifier('shadow') { 67 @include bem.modifier('shadow') {
68 box-shadow: 68 box-shadow:
69 props.get(vars.$shadow-x) 69 props.get(vars.$shadow-x)
70 props.get(vars.$shadow-y) 70 props.get(vars.$shadow-y)
71 props.get(vars.$shadow-blur) 71 props.get(vars.$shadow-blur)
72 props.get(vars.$shadow-grow) 72 props.get(vars.$shadow-grow)
73 props.get(vars.$shadow-color); 73 props.get(vars.$shadow-color);
74 } 74 }
75 } 75 }
76 76
77 @include bem.modifier('quiet') { 77 @include bem.modifier('quiet') {
78 row-gap: props.get(vars.$quiet--row-gap); 78 row-gap: props.get(vars.$quiet--row-gap);
79 } 79 }
80 80
81 @include bem.modifier('grid') { 81 @include bem.modifier('grid') {
82 display: grid; 82 display: grid;
83 grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr)); 83 grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid--col-width), 1fr));
84 gap: props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap); 84 gap: props.get(vars.$grid--row-gap) props.get(vars.$grid--col-gap);
85 85
86 @include bem.modifier('quiet') { 86 @include bem.modifier('quiet') {
87 row-gap: props.get(vars.$grid--quiet--row-gap); 87 row-gap: props.get(vars.$grid--quiet--row-gap);
88 } 88 }
89 } 89 }
90 90
91 @include bem.modifier('grid-sm') { 91 @include bem.modifier('grid-sm') {
92 display: grid; 92 display: grid;
93 grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid-sm--col-width), 1fr)); 93 grid-template-columns: repeat(auto-fill, minmax(props.get(vars.$grid-sm--col-width), 1fr));
94 gap: props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap); 94 gap: props.get(vars.$grid-sm--row-gap) props.get(vars.$grid-sm--col-gap);
95 95
96 @include bem.modifier("grid-sm") { 96 @include bem.modifier('grid-sm') {
97 @include media.media("<=md") { 97 @include media.media('<=md') {
98 display: flex; 98 display: flex;
99 gap: props.get(vars.$row-gap); 99 gap: props.get(vars.$row-gap);
100 } 100 }
101 } 101 }
102 102
103 @include bem.modifier('quiet') { 103 @include bem.modifier('quiet') {
104 row-gap: props.get(vars.$grid-sm--quiet--row-gap); 104 row-gap: props.get(vars.$grid-sm--quiet--row-gap);
105 } 105 }
106 } 106 }
107 107
108 @include bem.modifier('masonry') { 108 @include bem.modifier('masonry') {
109 display: block; 109 display: block;
110 columns: auto props.get(vars.$masonry--col-width); 110 columns: auto props.get(vars.$masonry--col-width);
111 column-gap: props.get(vars.$masonry--col-gap); 111 column-gap: props.get(vars.$masonry--col-gap);
112 112
113 @include bem.elem('card') { 113 @include bem.elem('card') {
114 margin-block-end: props.get(vars.$masonry--row-gap); 114 margin-block-end: props.get(vars.$masonry--row-gap);
115 break-inside: avoid; 115 break-inside: avoid;
116 } 116 }
117 117
118 @include bem.modifier('quiet') { 118 @include bem.modifier('quiet') {
119 @include bem.elem('card') { 119 @include bem.elem('card') {
120 margin-block-end: props.get(vars.$masonry--quiet--row-gap); 120 margin-block-end: props.get(vars.$masonry--quiet--row-gap);
121 } 121 }
122 } 122 }
123 } 123 }
124 124
125 @include bem.modifier('masonry-h') { 125 @include bem.modifier('masonry-h') {
126 flex-flow: row wrap; 126 flex-flow: row wrap;
127 gap: props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap); 127 gap: props.get(vars.$masonry-h--row-gap) props.get(vars.$masonry-h--col-gap);
128 128
129 @include bem.modifier('no-flush') { 129 @include bem.modifier('no-flush') {
130 &::after { 130 &::after {
131 display: block; 131 display: block;
132 flex: 1 0 auto; 132 flex: 1 0 auto;
133 inline-size: props.get(vars.$masonry-h--row-height); 133 inline-size: props.get(vars.$masonry-h--row-height);
134 content: ''; 134 content: '';
135 } 135 }
136 } 136 }
137 137
138 @include bem.elem('card') { 138 @include bem.elem('card') {
139 flex: 1 0 auto; 139 flex: 1 0 auto;
140 max-inline-size: 100%; 140 max-inline-size: 100%;
141 } 141 }
142 142
143 @include bem.elem('card-image') { 143 @include bem.elem('card-image') {
144 block-size: props.get(vars.$masonry-h--row-height); 144 block-size: props.get(vars.$masonry-h--row-height);
145 } 145 }
146 146
147 @include bem.modifier('quiet') { 147 @include bem.modifier('quiet') {
148 row-gap: props.get(vars.$masonry-h--quiet--row-gap); 148 row-gap: props.get(vars.$masonry-h--quiet--row-gap);
149 } 149 }
150 } 150 }
151 151
152 @include bem.modifier('aspect-5\\/4') { 152 @include bem.modifier('aspect-5\\/4') {
153 @include bem.elem('card-image') { 153 @include bem.elem('card-image') {
154 aspect-ratio: 5 / 4; 154 aspect-ratio: 5 / 4;
155 } 155 }
156 } 156 }
157 } 157 }
158} 158}
diff --git a/src/layouts/_container.scss b/src/layouts/_container.scss
index 17ab2f0..0ae68c1 100644
--- a/src/layouts/_container.scss
+++ b/src/layouts/_container.scss
@@ -7,22 +7,22 @@
7@use 'container.vars' as vars; 7@use 'container.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.layout('container') { 12 @include bem.layout('container') {
13 @each $mod, $size in vars.$fixed-sizes { 13 @each $mod, $size in vars.$fixed-sizes {
14 @include bem.modifier($mod) { 14 @include bem.modifier($mod) {
15 max-inline-size: props.get($size); 15 max-inline-size: props.get($size);
16 margin-inline: auto; 16 margin-inline: auto;
17 } 17 }
18 } 18 }
19 19
20 @include bem.modifier('pad-i') { 20 @include bem.modifier('pad-i') {
21 padding-inline: props.get(vars.$pad-i); 21 padding-inline: props.get(vars.$pad-i);
22 } 22 }
23 23
24 @include bem.modifier('pad-b') { 24 @include bem.modifier('pad-b') {
25 padding-block: props.get(vars.$pad-b); 25 padding-block: props.get(vars.$pad-b);
26 } 26 }
27 } 27 }
28} 28}
diff --git a/src/layouts/_container.vars.scss b/src/layouts/_container.vars.scss
index 56b6c89..8f0cef6 100644
--- a/src/layouts/_container.vars.scss
+++ b/src/layouts/_container.vars.scss
@@ -7,9 +7,9 @@ $fixed-150: props.def(--l-container--fixed-150, fn.px-to-rem(860px)) !default;
7$fixed: props.def(--l-container--fixed, fn.px-to-rem(680px)) !default; 7$fixed: props.def(--l-container--fixed, fn.px-to-rem(680px)) !default;
8 8
9$fixed-sizes: ( 9$fixed-sizes: (
10 'fixed-200': $fixed-200, 10 'fixed-200': $fixed-200,
11 'fixed-150': $fixed-150, 11 'fixed-150': $fixed-150,
12 'fixed': $fixed 12 'fixed': $fixed
13) !default; 13) !default;
14 14
15$pad-i: props.def(--l-container--pad-i, props.get(core.$size--400)) !default; 15$pad-i: props.def(--l-container--pad-i, props.get(core.$size--400)) !default;
diff --git a/src/layouts/_flex.scss b/src/layouts/_flex.scss
index 902ecdb..c99b253 100644
--- a/src/layouts/_flex.scss
+++ b/src/layouts/_flex.scss
@@ -1,19 +1,19 @@
1@use 'iro-sass/src/bem'; 1@use 'iro-sass/src/bem';
2 2
3@mixin styles { 3@mixin styles {
4 @include bem.layout('flex') { 4 @include bem.layout('flex') {
5 display: flex; 5 display: flex;
6 6
7 @include bem.modifier('column') { 7 @include bem.modifier('column') {
8 flex-direction: column; 8 flex-direction: column;
9 } 9 }
10 10
11 @include bem.modifier('wrap') { 11 @include bem.modifier('wrap') {
12 flex-wrap: wrap; 12 flex-wrap: wrap;
13 } 13 }
14 14
15 @include bem.modifier('wrap-reverse') { 15 @include bem.modifier('wrap-reverse') {
16 flex-wrap: wrap-reverse; 16 flex-wrap: wrap-reverse;
17 } 17 }
18 } 18 }
19} 19}
diff --git a/src/layouts/_form.scss b/src/layouts/_form.scss
index 5f0567b..c804262 100644
--- a/src/layouts/_form.scss
+++ b/src/layouts/_form.scss
@@ -7,53 +7,53 @@
7@use 'form.vars' as vars; 7@use 'form.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.layout('form') { 12 @include bem.layout('form') {
13 display: flex; 13 display: flex;
14 flex-direction: column; 14 flex-direction: column;
15 gap: props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i); 15 gap: props.get(vars.$item-spacing-b) props.get(vars.$label-spacing-i);
16 16
17 @include bem.elem('item') { 17 @include bem.elem('item') {
18 display: block; 18 display: block;
19 } 19 }
20 20
21 @include bem.elem('item-content') { 21 @include bem.elem('item-content') {
22 @include bem.modifier('align-start') { 22 @include bem.modifier('align-start') {
23 align-self: start; 23 align-self: start;
24 } 24 }
25 } 25 }
26 26
27 @include bem.modifier('row') { 27 @include bem.modifier('row') {
28 flex-direction: row; 28 flex-direction: row;
29 align-items: flex-end; 29 align-items: flex-end;
30 } 30 }
31 31
32 @include bem.modifier('labels-start', 'labels-end') { 32 @include bem.modifier('labels-start', 'labels-end') {
33 display: grid; 33 display: grid;
34 grid-template-rows: auto; 34 grid-template-rows: auto;
35 grid-template-columns: auto 1fr; 35 grid-template-columns: auto 1fr;
36 align-items: baseline; 36 align-items: baseline;
37 37
38 @include bem.elem('item') { 38 @include bem.elem('item') {
39 display: contents; 39 display: contents;
40 } 40 }
41 41
42 @include bem.elem('item-label') { 42 @include bem.elem('item-label') {
43 grid-column: 1; 43 grid-column: 1;
44 padding-inline-end: 0; 44 padding-inline-end: 0;
45 } 45 }
46 46
47 @include bem.elem('item-content') { 47 @include bem.elem('item-content') {
48 grid-column: 2; 48 grid-column: 2;
49 margin-block-start: 0; 49 margin-block-start: 0;
50 } 50 }
51 } 51 }
52 52
53 @include bem.modifier('labels-end') { 53 @include bem.modifier('labels-end') {
54 @include bem.elem('item-label') { 54 @include bem.elem('item-label') {
55 text-align: end; 55 text-align: end;
56 } 56 }
57 } 57 }
58 } 58 }
59} 59}
diff --git a/src/layouts/_media.scss b/src/layouts/_media.scss
index 2192db5..929e60f 100644
--- a/src/layouts/_media.scss
+++ b/src/layouts/_media.scss
@@ -7,35 +7,35 @@
7@use 'media.vars' as vars; 7@use 'media.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.layout('media') { 12 @include bem.layout('media') {
13 display: flex; 13 display: flex;
14 gap: props.get(vars.$gap); 14 gap: props.get(vars.$gap);
15 align-items: center; 15 align-items: center;
16 line-height: 1.4; 16 line-height: 1.4;
17 17
18 @each $mod, $size in vars.$sizes { 18 @each $mod, $size in vars.$sizes {
19 @include bem.modifier($mod) { 19 @include bem.modifier($mod) {
20 gap: props.get($size); 20 gap: props.get($size);
21 } 21 }
22 } 22 }
23 23
24 @include bem.modifier('wrap') { 24 @include bem.modifier('wrap') {
25 flex-wrap: wrap; 25 flex-wrap: wrap;
26 } 26 }
27 27
28 @include bem.elem('block') { 28 @include bem.elem('block') {
29 flex: 0 0 auto; 29 flex: 0 0 auto;
30 30
31 @include bem.modifier('shrink', 'main') { 31 @include bem.modifier('shrink', 'main') {
32 flex-shrink: 1; 32 flex-shrink: 1;
33 min-inline-size: 0; 33 min-inline-size: 0;
34 } 34 }
35 35
36 @include bem.modifier('main') { 36 @include bem.modifier('main') {
37 inline-size: 100%; 37 inline-size: 100%;
38 } 38 }
39 } 39 }
40 } 40 }
41} 41}
diff --git a/src/layouts/_media.vars.scss b/src/layouts/_media.vars.scss
index fd6d986..dcb10de 100644
--- a/src/layouts/_media.vars.scss
+++ b/src/layouts/_media.vars.scss
@@ -9,8 +9,8 @@ $lg: props.def(--l-media--lg, props.get(core.$size--300)) !default;
9$xl: props.def(--l-media--xl, props.get(core.$size--450)) !default; 9$xl: props.def(--l-media--xl, props.get(core.$size--450)) !default;
10 10
11$sizes: ( 11$sizes: (
12 'gapless': $gapless, 12 'gapless': $gapless,
13 'sm': $sm, 13 'sm': $sm,
14 'lg': $lg, 14 'lg': $lg,
15 'xl': $xl, 15 'xl': $xl,
16) !default; 16) !default;
diff --git a/src/layouts/_overflow.scss b/src/layouts/_overflow.scss
index 9fba7eb..6d31d37 100644
--- a/src/layouts/_overflow.scss
+++ b/src/layouts/_overflow.scss
@@ -3,9 +3,9 @@
3@use '../core.vars' as core; 3@use '../core.vars' as core;
4 4
5@mixin styles { 5@mixin styles {
6 @include bem.layout('overflow') { 6 @include bem.layout('overflow') {
7 overflow: auto; 7 overflow: auto;
8 scrollbar-color: props.get(core.$theme, --text-disabled) transparent; 8 scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
9 } 9 }
10} 10}
11 11
diff --git a/src/layouts/_split-view.scss b/src/layouts/_split-view.scss
index f522254..6469a7d 100644
--- a/src/layouts/_split-view.scss
+++ b/src/layouts/_split-view.scss
@@ -8,84 +8,84 @@
8@use 'split-view.vars' as vars; 8@use 'split-view.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.layout('split-view') { 13 @include bem.layout('split-view') {
14 display: flex; 14 display: flex;
15 gap: props.get(vars.$col-gap); 15 gap: props.get(vars.$col-gap);
16 align-items: start; 16 align-items: start;
17 17
18 @include bem.elem('panel') { 18 @include bem.elem('panel') {
19 flex: 1 1 auto; 19 flex: 1 1 auto;
20 inline-size: 100%; 20 inline-size: 100%;
21 min-inline-size: 0; 21 min-inline-size: 0;
22 22
23 @include bem.modifier('side-25') { 23 @include bem.modifier('side-25') {
24 flex: 0 0 auto; 24 flex: 0 0 auto;
25 inline-size: 25%; 25 inline-size: 25%;
26 min-inline-size: props.get(vars.$panel--side-25--min); 26 min-inline-size: props.get(vars.$panel--side-25--min);
27 } 27 }
28 28
29 @include bem.modifier('sticky-0') { 29 @include bem.modifier('sticky-0') {
30 position: sticky; 30 position: sticky;
31 inset-block-start: 0; 31 inset-block-start: 0;
32 } 32 }
33 33
34 @include bem.modifier('sticky') { 34 @include bem.modifier('sticky') {
35 position: sticky; 35 position: sticky;
36 inset-block-start: props.get(vars.$panel--sticky-offset); 36 inset-block-start: props.get(vars.$panel--sticky-offset);
37 } 37 }
38 38
39 @include bem.modifier('sticky-400') { 39 @include bem.modifier('sticky-400') {
40 position: sticky; 40 position: sticky;
41 inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset)); 41 inset-block-start: calc(props.get(vars.$panel--sticky-400--inset) + props.get(vars.$panel--sticky-offset));
42 } 42 }
43 43
44 @include bem.modifier('sticky-1200') { 44 @include bem.modifier('sticky-1200') {
45 position: sticky; 45 position: sticky;
46 inset-block-start: calc(props.get(vars.$panel--sticky-1200--inset) + props.get(vars.$panel--sticky-offset)); 46 inset-block-start: calc(props.get(vars.$panel--sticky-1200--inset) + props.get(vars.$panel--sticky-offset));
47 } 47 }
48 } 48 }
49 49
50 @include bem.modifier('gapless') { 50 @include bem.modifier('gapless') {
51 gap: props.get(vars.$gapless); 51 gap: props.get(vars.$gapless);
52 52
53 @include bem.elem('panel') { 53 @include bem.elem('panel') {
54 @include bem.modifier('side-25') { 54 @include bem.modifier('side-25') {
55 min-inline-size: calc(props.get(vars.$panel--side-25--min) + props.get(vars.$col-gap) - props.get(vars.$gapless)); 55 min-inline-size: calc(props.get(vars.$panel--side-25--min) + props.get(vars.$col-gap) - props.get(vars.$gapless));
56 } 56 }
57 } 57 }
58 } 58 }
59 59
60 @include bem.elem('content') { 60 @include bem.elem('content') {
61 inline-size: 100%; 61 inline-size: 100%;
62 } 62 }
63 63
64 @include media.media('<=md') { 64 @include media.media('<=md') {
65 flex-direction: column; 65 flex-direction: column;
66 gap: props.get(vars.$row-gap); 66 gap: props.get(vars.$row-gap);
67 align-items: stretch; 67 align-items: stretch;
68 68
69 @include bem.modifier('gapless') { 69 @include bem.modifier('gapless') {
70 gap: props.get(vars.$gapless); 70 gap: props.get(vars.$gapless);
71 } 71 }
72 72
73 @include bem.modifier('wrap-reverse') { 73 @include bem.modifier('wrap-reverse') {
74 flex-direction: column-reverse; 74 flex-direction: column-reverse;
75 } 75 }
76 76
77 @include bem.elem('panel') { 77 @include bem.elem('panel') {
78 inline-size: auto; 78 inline-size: auto;
79 79
80 @include bem.modifier('side-25') { 80 @include bem.modifier('side-25') {
81 inline-size: auto; 81 inline-size: auto;
82 min-inline-size: 0; 82 min-inline-size: 0;
83 } 83 }
84 84
85 @include bem.modifier('sticky', 'sticky-400', 'sticky-1200') { 85 @include bem.modifier('sticky', 'sticky-400', 'sticky-1200') {
86 position: static; 86 position: static;
87 } 87 }
88 } 88 }
89 } 89 }
90 } 90 }
91} 91}
diff --git a/src/objects/_alert.scss b/src/objects/_alert.scss
index de0e913..697ac18 100644
--- a/src/objects/_alert.scss
+++ b/src/objects/_alert.scss
@@ -8,33 +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 transparent; 17 border: props.get(vars.$border-width) solid transparent;
18 border-color: props.get(vars.$border-color); 18 border-color: props.get(vars.$border-color);
19 border-radius: props.get(vars.$rounding); 19 border-radius: props.get(vars.$rounding);
20 box-shadow: 20 box-shadow:
21 props.get(vars.$shadow-x) 21 props.get(vars.$shadow-x)
22 props.get(vars.$shadow-y) 22 props.get(vars.$shadow-y)
23 props.get(vars.$shadow-blur) 23 props.get(vars.$shadow-blur)
24 props.get(vars.$shadow-grow) 24 props.get(vars.$shadow-grow)
25 props.get(vars.$shadow-color); 25 props.get(vars.$shadow-color);
26 26
27 @each $mod, $theme in vars.$themes-config { 27 @each $mod, $theme in vars.$themes-config {
28 @include bem.modifier($mod) { 28 @include bem.modifier($mod) {
29 background-color: props.get(vars.$themes, $theme, --bg-color); 29 background-color: props.get(vars.$themes, $theme, --bg-color);
30 border-color: props.get(vars.$themes, $theme, --border-color); 30 border-color: props.get(vars.$themes, $theme, --border-color);
31 box-shadow: 31 box-shadow:
32 props.get(vars.$shadow-x) 32 props.get(vars.$shadow-x)
33 props.get(vars.$shadow-y) 33 props.get(vars.$shadow-y)
34 props.get(vars.$shadow-blur) 34 props.get(vars.$shadow-blur)
35 props.get(vars.$shadow-grow) 35 props.get(vars.$shadow-grow)
36 props.get(vars.$themes, $theme, --shadow-color); 36 props.get(vars.$themes, $theme, --shadow-color);
37 } 37 }
38 } 38 }
39 } 39 }
40} 40}
diff --git a/src/objects/_alert.vars.scss b/src/objects/_alert.vars.scss
index f23928d..62d3414 100644
--- a/src/objects/_alert.vars.scss
+++ b/src/objects/_alert.vars.scss
@@ -17,20 +17,20 @@ $border-color: props.def(--o-alert--border-color, props.get(core.$theme, --text-
17$shadow-color: props.def(--o-alert--shadow-color, props.get(core.$transparent-colors, --black, --200), 'color') !default; 17$shadow-color: props.def(--o-alert--shadow-color, props.get(core.$transparent-colors, --black, --200), 'color') !default;
18 18
19$themes-config: ( 19$themes-config: (
20 accent: --accent, 20 accent: --accent,
21 positive: --positive, 21 positive: --positive,
22 negative: --negative, 22 negative: --negative,
23 warning: --warning, 23 warning: --warning,
24) !default; 24) !default;
25 25
26$themes: props.def(--o-alert, (), 'color'); 26$themes: props.def(--o-alert, (), 'color');
27 27
28@each $theme, $key in $themes-config { 28@each $theme, $key in $themes-config {
29 $themes: props.merge($themes, ( 29 $themes: props.merge($themes, (
30 $key: ( 30 $key: (
31 --bg-color: props.get(core.$theme, --bg-l2), 31 --bg-color: props.get(core.$theme, --bg-l2),
32 --border-color: props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --800), 32 --border-color: props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --700) props.get(core.$theme, $key, --800),
33 --shadow-color: props.get(core.$theme, $key, --200), 33 --shadow-color: props.get(core.$theme, $key, --200),
34 ) 34 )
35 )); 35 ));
36} 36}
diff --git a/src/objects/_avatar.scss b/src/objects/_avatar.scss
index 81396e3..9d51ffb 100644
--- a/src/objects/_avatar.scss
+++ b/src/objects/_avatar.scss
@@ -7,120 +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.sibling-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 @include bem.modifier('colored-gradient') { 97 @include bem.modifier('colored-gradient') {
98 @include bem.elem('content') { 98 @include bem.elem('content') {
99 color: #fff; 99 color: #fff;
100 background: linear-gradient(props.get(vars.$bg-angle), 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)), 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))); 102 hsl(props.get(vars.$bg-color-2--h), props.get(vars.$bg-color-2--s), props.get(vars.$bg-color-2--l)));
103 } 103 }
104 } 104 }
105 105
106 @each $mod, $size, $font-size, $indicator-size in vars.$sizes { 106 @each $mod, $size, $font-size, $indicator-size in vars.$sizes {
107 @include bem.modifier($mod) { 107 @include bem.modifier($mod) {
108 font-size: props.get($font-size); 108 font-size: props.get($font-size);
109 109
110 @include status($indicator-size); 110 @include status($indicator-size);
111 111
112 @include bem.elem('content') { 112 @include bem.elem('content') {
113 inline-size: props.get($size); 113 inline-size: props.get($size);
114 block-size: props.get($size); 114 block-size: props.get($size);
115 line-height: props.get($size); 115 line-height: props.get($size);
116 } 116 }
117 } 117 }
118 } 118 }
119 119
120 &:focus-visible { 120 &:focus-visible {
121 &::after { 121 &::after {
122 display: block; 122 display: block;
123 } 123 }
124 } 124 }
125 } 125 }
126} 126}
diff --git a/src/objects/_avatar.vars.scss b/src/objects/_avatar.vars.scss
index 9986de5..2374f5a 100644
--- a/src/objects/_avatar.vars.scss
+++ b/src/objects/_avatar.vars.scss
@@ -49,10 +49,10 @@ $key-focus--border-color: props.def(--o-avatar--key-focus--border-color, props.
49$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;
50 50
51$sizes: ( 51$sizes: (
52 'xs' $size--xs $font-size--xs $indicator-size--xs, 52 'xs' $size--xs $font-size--xs $indicator-size--xs,
53 'sm' $size--sm $font-size--sm $indicator-size--sm, 53 'sm' $size--sm $font-size--sm $indicator-size--sm,
54 'lg' $size--lg $font-size--lg $indicator-size--lg, 54 'lg' $size--lg $font-size--lg $indicator-size--lg,
55 'xl' $size--xl $font-size--xl $indicator-size--xl, 55 'xl' $size--xl $font-size--xl $indicator-size--xl,
56 'xxl' $size--xxl $font-size--xxl $indicator-size--xxl, 56 'xxl' $size--xxl $font-size--xxl $indicator-size--xxl,
57 'xxxl' $size--xxxl $font-size--xxxl $indicator-size--xxxl, 57 'xxxl' $size--xxxl $font-size--xxxl $indicator-size--xxxl,
58) !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/_button.scss b/src/objects/_button.scss
index 5ba8576..8163cf9 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -10,276 +10,276 @@
10@use 'button.vars' as vars; 10@use 'button.vars' as vars;
11 11
12@mixin -apply-theme($theme, $key: ()) { 12@mixin -apply-theme($theme, $key: ()) {
13 color: props.get($theme, list.join($key, --disabled --label-color)...); 13 color: props.get($theme, list.join($key, --disabled --label-color)...);
14 background-color: props.get($theme, list.join($key, --disabled --bg-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)...); 15 border-color: props.get($theme, list.join($key, --disabled --border-color)...);
16 16
17 &::after { 17 &::after {
18 outline-color: props.get($theme, list.join($key, --key-focus --border-color)...); 18 outline-color: props.get($theme, list.join($key, --key-focus --border-color)...);
19 box-shadow: 19 box-shadow:
20 0 20 0
21 0 21 0
22 0 22 0
23 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 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)...); 24 props.get($theme, list.join($key, --key-focus --outline-color)...);
25 } 25 }
26 26
27 &:link, 27 &:link,
28 &:visited, 28 &:visited,
29 &:enabled { 29 &:enabled {
30 color: props.get($theme, list.join($key, --label-color)...); 30 color: props.get($theme, list.join($key, --label-color)...);
31 background-color: props.get($theme, list.join($key, --bg-color)...); 31 background-color: props.get($theme, list.join($key, --bg-color)...);
32 border-color: props.get($theme, list.join($key, --border-color)...); 32 border-color: props.get($theme, list.join($key, --border-color)...);
33 box-shadow: 33 box-shadow:
34 props.get(vars.$shadow-x) 34 props.get(vars.$shadow-x)
35 props.get(vars.$shadow-y) 35 props.get(vars.$shadow-y)
36 props.get(vars.$shadow-blur) 36 props.get(vars.$shadow-blur)
37 props.get(vars.$shadow-grow) 37 props.get(vars.$shadow-grow)
38 props.get($theme, list.join($key, --shadow-color)...); 38 props.get($theme, list.join($key, --shadow-color)...);
39 39
40 &:hover, 40 &:hover,
41 &:focus-visible { 41 &:focus-visible {
42 color: props.get($theme, list.join($key, --hover --label-color)...); 42 color: props.get($theme, list.join($key, --hover --label-color)...);
43 background-color: props.get($theme, list.join($key, --hover --bg-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)...); 44 border-color: props.get($theme, list.join($key, --hover --border-color)...);
45 } 45 }
46 46
47 &:active { 47 &:active {
48 color: props.get($theme, list.join($key, --active --label-color)...); 48 color: props.get($theme, list.join($key, --active --label-color)...);
49 background-color: props.get($theme, list.join($key, --active --bg-color)...); 49 background-color: props.get($theme, list.join($key, --active --bg-color)...);
50 border-color: props.get($theme, list.join($key, --active --border-color)...); 50 border-color: props.get($theme, list.join($key, --active --border-color)...);
51 box-shadow: none; 51 box-shadow: none;
52 } 52 }
53 } 53 }
54 54
55 @include bem.modifier('badge') { 55 @include bem.modifier('badge') {
56 color: props.get($theme, list.join($key, --badge --label-color)...); 56 color: props.get($theme, list.join($key, --badge --label-color)...);
57 background-color: props.get($theme, list.join($key, --badge --bg-color)...); 57 background-color: props.get($theme, list.join($key, --badge --bg-color)...);
58 border-color: props.get($theme, list.join($key, --badge --border-color)...); 58 border-color: props.get($theme, list.join($key, --badge --border-color)...);
59 box-shadow: none; 59 box-shadow: none;
60 60
61 &:link, 61 &:link,
62 &:visited, 62 &:visited,
63 &:enabled { 63 &:enabled {
64 color: props.get($theme, list.join($key, --badge --label-color)...); 64 color: props.get($theme, list.join($key, --badge --label-color)...);
65 background-color: props.get($theme, list.join($key, --badge --bg-color)...); 65 background-color: props.get($theme, list.join($key, --badge --bg-color)...);
66 border-color: props.get($theme, list.join($key, --badge --border-color)...); 66 border-color: props.get($theme, list.join($key, --badge --border-color)...);
67 box-shadow: none; 67 box-shadow: none;
68 68
69 &:hover, 69 &:hover,
70 &:focus-visible { 70 &:focus-visible {
71 color: props.get($theme, list.join($key, --badge --hover --label-color)...); 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)...); 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)...); 73 border-color: props.get($theme, list.join($key, --badge --hover --border-color)...);
74 } 74 }
75 75
76 &:active { 76 &:active {
77 color: props.get($theme, list.join($key, --badge --active --label-color)...); 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)...); 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)...); 79 border-color: props.get($theme, list.join($key, --badge --active --border-color)...);
80 } 80 }
81 } 81 }
82 } 82 }
83 83
84 @include bem.modifier('quiet') { 84 @include bem.modifier('quiet') {
85 color: props.get($theme, list.join($key, --quiet --disabled --label-color)...); 85 color: props.get($theme, list.join($key, --quiet --disabled --label-color)...);
86 background-color: transparent; 86 background-color: transparent;
87 border-color: transparent; 87 border-color: transparent;
88 88
89 &:link, 89 &:link,
90 &:visited, 90 &:visited,
91 &:enabled { 91 &:enabled {
92 color: props.get($theme, list.join($key, --quiet --label-color)...); 92 color: props.get($theme, list.join($key, --quiet --label-color)...);
93 background-color: transparent; 93 background-color: transparent;
94 border-color: transparent; 94 border-color: transparent;
95 box-shadow: none; 95 box-shadow: none;
96 96
97 &:hover, 97 &:hover,
98 &:focus-visible { 98 &:focus-visible {
99 color: props.get($theme, list.join($key, --quiet --hover --label-color)...); 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)...); 100 background-color: props.get($theme, list.join($key, --quiet --hover --bg-color)...);
101 border-color: transparent; 101 border-color: transparent;
102 } 102 }
103 103
104 &:active { 104 &:active {
105 color: props.get($theme, list.join($key, --quiet --active --label-color)...); 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)...); 106 background-color: props.get($theme, list.join($key, --quiet --active --bg-color)...);
107 border-color: transparent; 107 border-color: transparent;
108 } 108 }
109 } 109 }
110 } 110 }
111 111
112 @include bem.is('highlighted') { 112 @include bem.is('highlighted') {
113 &:link, 113 &:link,
114 &:visited, 114 &:visited,
115 &:enabled { 115 &:enabled {
116 &, 116 &,
117 &:hover, 117 &:hover,
118 &:focus-visible { 118 &:focus-visible {
119 border-color: props.get($theme, list.join($key, --highlighted --border-color)...); 119 border-color: props.get($theme, list.join($key, --highlighted --border-color)...);
120 } 120 }
121 121
122 box-shadow: 122 box-shadow:
123 0 0 0 1px props.get($theme, list.join($key, --highlighted --border-color)...), 123 0 0 0 1px props.get($theme, list.join($key, --highlighted --border-color)...),
124 props.get(vars.$shadow-x) 124 props.get(vars.$shadow-x)
125 props.get(vars.$shadow-y) 125 props.get(vars.$shadow-y)
126 props.get(vars.$shadow-blur) 126 props.get(vars.$shadow-blur)
127 props.get(vars.$shadow-grow) 127 props.get(vars.$shadow-grow)
128 props.get($theme, list.join($key, --highlighted --shadow-color)...); 128 props.get($theme, list.join($key, --highlighted --shadow-color)...);
129 129
130 &:focus-visible { 130 &:focus-visible {
131 box-shadow: 131 box-shadow:
132 props.get(vars.$shadow-x) 132 props.get(vars.$shadow-x)
133 props.get(vars.$shadow-y) 133 props.get(vars.$shadow-y)
134 props.get(vars.$shadow-blur) 134 props.get(vars.$shadow-blur)
135 props.get(vars.$shadow-grow) 135 props.get(vars.$shadow-grow)
136 props.get($theme, list.join($key, --shadow-color)...); 136 props.get($theme, list.join($key, --shadow-color)...);
137 } 137 }
138 } 138 }
139 } 139 }
140 140
141 @include bem.is('selected') { 141 @include bem.is('selected') {
142 color: props.get($theme, list.join($key, --selected --disabled --label-color)...); 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)...); 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)...); 144 border-color: props.get($theme, list.join($key, --selected --disabled --border-color)...);
145 145
146 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'badge') { 146 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'badge') {
147 color: props.get($theme, list.join($key, --selected --label-color)...); 147 color: props.get($theme, list.join($key, --selected --label-color)...);
148 background-color: props.get($theme, list.join($key, --selected --bg-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)...); 149 border-color: props.get($theme, list.join($key, --selected --border-color)...);
150 } 150 }
151 151
152 &:link, 152 &:link,
153 &:visited, 153 &:visited,
154 &:enabled { 154 &:enabled {
155 &:hover, 155 &:hover,
156 &:focus-visible { 156 &:focus-visible {
157 color: props.get($theme, list.join($key, --selected --hover --label-color)...); 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)...); 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)...); 159 border-color: props.get($theme, list.join($key, --selected --hover --border-color)...);
160 } 160 }
161 161
162 &:active { 162 &:active {
163 color: props.get($theme, list.join($key, --selected --active --label-color)...); 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)...); 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)...); 165 border-color: props.get($theme, list.join($key, --selected --active --border-color)...);
166 } 166 }
167 } 167 }
168 } 168 }
169} 169}
170 170
171@mixin styles { 171@mixin styles {
172 @include materialize-at-root(meta.module-variables('vars')); 172 @include materialize-at-root(meta.module-variables('vars'));
173 173
174 @include bem.object('button') { 174 @include bem.object('button') {
175 position: relative; 175 position: relative;
176 display: inline-block; 176 display: inline-block;
177 padding-block: props.get(vars.$pad-b); 177 padding-block: props.get(vars.$pad-b);
178 padding-inline: props.get(vars.$pad-i); 178 padding-inline: props.get(vars.$pad-i);
179 line-height: props.get(vars.$line-height); 179 text-overflow: ellipsis;
180 font-size: props.get(vars.$font-size); 180 font-size: props.get(vars.$font-size);
181 text-align: center; 181 line-height: props.get(vars.$line-height);
182 text-decoration: none; 182 text-align: center;
183 text-overflow: ellipsis; 183 white-space: nowrap;
184 white-space: nowrap; 184 text-decoration: none;
185 border: props.get(vars.$border-width) solid transparent; 185 border: props.get(vars.$border-width) solid transparent;
186 border-radius: props.get(vars.$rounding); 186 border-radius: props.get(vars.$rounding);
187 transition: color .1s, background-color .1s, border-color .1s, box-shadow .1s; 187 transition: color .1s, background-color .1s, border-color .1s, box-shadow .1s;
188 188
189 &::after { 189 &::after {
190 position: absolute; 190 position: absolute;
191 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));
192 z-index: 1; 192 z-index: 1;
193 display: none; 193 display: none;
194 pointer-events: none; 194 pointer-events: none;
195 content: ''; 195 outline: transparent solid props.get(vars.$key-focus--border-width);
196 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); 196 content: '';
197 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));
198 } 198 }
199 199
200 &:link, 200 &:link,
201 &:visited, 201 &:visited,
202 &:enabled { 202 &:enabled {
203 &:focus-visible { 203 &:focus-visible {
204 transition: none; 204 transition: none;
205 205
206 &::after { 206 &::after {
207 display: block; 207 display: block;
208 } 208 }
209 } 209 }
210 } 210 }
211 211
212 @include bem.elem('label') { 212 @include bem.elem('label') {
213 margin-inline: props.get(vars.$pad-i-label); 213 margin-inline: props.get(vars.$pad-i-label);
214 } 214 }
215 215
216 @include -apply-theme(vars.$default-theme); 216 @include -apply-theme(vars.$default-theme);
217 217
218 @each $theme in map.keys(props.get(vars.$themes)) { 218 @each $theme in map.keys(props.get(vars.$themes)) {
219 @include bem.modifier(string.slice($theme, 3)) { 219 @include bem.modifier(string.slice($theme, 3)) {
220 @include -apply-theme(vars.$themes, $theme); 220 @include -apply-theme(vars.$themes, $theme);
221 } 221 }
222 } 222 }
223 223
224 @include bem.modifier('pill') { 224 @include bem.modifier('pill') {
225 padding-inline: props.get(vars.$pad-i-pill); 225 padding-inline: props.get(vars.$pad-i-pill);
226 border-radius: 100em; 226 border-radius: 100em;
227 227
228 &::after { 228 &::after {
229 border-radius: 100em; 229 border-radius: 100em;
230 } 230 }
231 } 231 }
232 232
233 @include bem.modifier('icon') { 233 @include bem.modifier('icon') {
234 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b)); 234 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get(vars.$pad-b));
235 padding-inline: 0; 235 padding-inline: 0;
236 } 236 }
237 237
238 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { 238 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
239 @include bem.modifier($mod) { 239 @include bem.modifier($mod) {
240 padding-block: props.get($pad-b); 240 padding-block: props.get($pad-b);
241 padding-inline: props.get($pad-i); 241 padding-inline: props.get($pad-i);
242 font-size: props.get($font-size); 242 font-size: props.get($font-size);
243 243
244 @include bem.elem('label') { 244 @include bem.elem('label') {
245 margin-inline: props.get($pad-i-label); 245 margin-inline: props.get($pad-i-label);
246 } 246 }
247 247
248 @include bem.modifier('pill') { 248 @include bem.modifier('pill') {
249 padding-inline: props.get($pad-i-pill); 249 padding-inline: props.get($pad-i-pill);
250 } 250 }
251 251
252 @include bem.modifier('icon') { 252 @include bem.modifier('icon') {
253 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b)); 253 inline-size: calc(1em * props.get(vars.$line-height) + 2 * props.get($pad-b));
254 padding-inline: 0; 254 padding-inline: 0;
255 } 255 }
256 } 256 }
257 } 257 }
258 258
259 @include bem.modifier('align-block') { 259 @include bem.modifier('align-block') {
260 margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width)); 260 margin-inline: calc(-1 * props.get(vars.$pad-i) - props.get(vars.$border-width));
261 261
262 @include bem.modifier('pill') { 262 @include bem.modifier('pill') {
263 margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width)); 263 margin-inline: calc(-1 * props.get(vars.$pad-i-pill) - props.get(vars.$border-width));
264 } 264 }
265 265
266 @include bem.modifier('icon') { 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)); 267 margin-inline: calc(-1 * props.get(vars.$pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
268 } 268 }
269 269
270 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes { 270 @each $mod, $pad-i, $pad-i-label, $pad-i-pill, $pad-b, $font-size in vars.$fixed-sizes {
271 @include bem.modifier($mod) { 271 @include bem.modifier($mod) {
272 margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width)); 272 margin-inline: calc(-1 * props.get($pad-i) - props.get(vars.$border-width));
273 273
274 @include bem.modifier('pill') { 274 @include bem.modifier('pill') {
275 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width)); 275 margin-inline: calc(-1 * props.get($pad-i-pill) - props.get(vars.$border-width));
276 } 276 }
277 277
278 @include bem.modifier('icon') { 278 @include bem.modifier('icon') {
279 margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1)); 279 margin-inline: calc(-1 * props.get($pad-b) - props.get(vars.$border-width) - .5em * (props.get(vars.$line-height) - 1));
280 } 280 }
281 } 281 }
282 } 282 }
283 } 283 }
284 } 284 }
285} 285}
diff --git a/src/objects/_button.vars.scss b/src/objects/_button.vars.scss
index 00a11c3..6e2298f 100644
--- a/src/objects/_button.vars.scss
+++ b/src/objects/_button.vars.scss
@@ -41,334 +41,334 @@ $key-focus--border-offset: props.def(--o-button--key-focus--border-offset, props
41$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;
42 42
43$fixed-sizes: ( 43$fixed-sizes: (
44 'sm' $pad-i--sm $pad-i-label--sm $pad-i-pill--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,
45 'lg' $pad-i--lg $pad-i-label--lg $pad-i-pill--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,
46 'xl' $pad-i--xl $pad-i-label--xl $pad-i-pill--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,
47) !default; 47) !default;
48 48
49$themes: props.def(--o-button, (), 'color'); 49$themes: props.def(--o-button, (), 'color');
50 50
51$default-theme-override: () !default; 51$default-theme-override: () !default;
52$default-theme: map.deep-merge(( 52$default-theme: map.deep-merge((
53 --bg-color: props.get(core.$theme, --bg-l2), 53 --bg-color: props.get(core.$theme, --bg-l2),
54 --label-color: props.get(core.$theme, --text), 54 --label-color: props.get(core.$theme, --text),
55 --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong), 55 --border-color: props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border) props.get(core.$theme, --box, --border-strong),
56 --shadow-color: props.get(core.$theme, --shadow), 56 --shadow-color: props.get(core.$theme, --shadow),
57 57
58 --hover: ( 58 --hover: (
59 --bg-color: props.get(core.$theme, --bg-l1), 59 --bg-color: props.get(core.$theme, --bg-l1),
60 --label-color: props.get(core.$theme, --heading), 60 --label-color: props.get(core.$theme, --heading),
61 --border-color: props.get(core.$theme, --border), 61 --border-color: props.get(core.$theme, --border),
62 ), 62 ),
63 63
64 --active: ( 64 --active: (
65 --bg-color: props.get(core.$theme, --border-mute), 65 --bg-color: props.get(core.$theme, --border-mute),
66 --label-color: props.get(core.$theme, --heading), 66 --label-color: props.get(core.$theme, --heading),
67 --border-color: props.get(core.$theme, --border-strong), 67 --border-color: props.get(core.$theme, --border-strong),
68 ), 68 ),
69 69
70 --disabled: ( 70 --disabled: (
71 --bg-color: transparent, 71 --bg-color: transparent,
72 --label-color: props.get(core.$theme, --border-strong), 72 --label-color: props.get(core.$theme, --border-strong),
73 --border-color: props.get(core.$theme, --text-disabled), 73 --border-color: props.get(core.$theme, --text-disabled),
74 ), 74 ),
75 75
76 --key-focus: ( 76 --key-focus: (
77 --border-color: props.get(core.$theme, --focus, --border), 77 --border-color: props.get(core.$theme, --focus, --border),
78 --outline-color: props.get(core.$theme, --focus, --outline), 78 --outline-color: props.get(core.$theme, --focus, --outline),
79 ), 79 ),
80 80
81 --highlighted: ( 81 --highlighted: (
82 --border-color: props.get(core.$theme, --focus, --border), 82 --border-color: props.get(core.$theme, --focus, --border),
83 --shadow-color: props.get(core.$theme, --focus, --outline), 83 --shadow-color: props.get(core.$theme, --focus, --outline),
84 ), 84 ),
85 85
86 --selected: ( 86 --selected: (
87 --bg-color: props.get(core.$theme, --text), 87 --bg-color: props.get(core.$theme, --text),
88 --label-color: props.get(core.$theme, --base, --50), 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), 89 --border-color: props.get(core.$theme, --text) props.get(core.$theme, --text) props.get(core.$theme, --heading),
90 90
91 --hover: ( 91 --hover: (
92 --bg-color: props.get(core.$theme, --heading), 92 --bg-color: props.get(core.$theme, --heading),
93 --label-color: props.get(core.$theme, --base, --50), 93 --label-color: props.get(core.$theme, --base, --50),
94 --border-color: props.get(core.$theme, --heading), 94 --border-color: props.get(core.$theme, --heading),
95 ), 95 ),
96 96
97 --active: ( 97 --active: (
98 --bg-color: props.get(core.$theme, --heading), 98 --bg-color: props.get(core.$theme, --heading),
99 --label-color: props.get(core.$theme, --base, --50), 99 --label-color: props.get(core.$theme, --base, --50),
100 --border-color: props.get(core.$theme, --heading), 100 --border-color: props.get(core.$theme, --heading),
101 ), 101 ),
102 102
103 --disabled: ( 103 --disabled: (
104 --bg-color: props.get(core.$theme, --border-mute), 104 --bg-color: props.get(core.$theme, --border-mute),
105 --label-color: props.get(core.$theme, --border-strong), 105 --label-color: props.get(core.$theme, --border-strong),
106 --border-color: props.get(core.$theme, --border-mute), 106 --border-color: props.get(core.$theme, --border-mute),
107 ), 107 ),
108 ), 108 ),
109 109
110 --badge: ( 110 --badge: (
111 --bg-color: props.get(core.$theme, --border-mute), 111 --bg-color: props.get(core.$theme, --border-mute),
112 --label-color: props.get(core.$theme, --heading), 112 --label-color: props.get(core.$theme, --heading),
113 --border-color: props.get(core.$theme, --border-mute), 113 --border-color: props.get(core.$theme, --border-mute),
114 114
115 --hover: ( 115 --hover: (
116 --bg-color: props.get(core.$theme, --border), 116 --bg-color: props.get(core.$theme, --border),
117 --label-color: props.get(core.$theme, --heading), 117 --label-color: props.get(core.$theme, --heading),
118 --border-color: props.get(core.$theme, --border), 118 --border-color: props.get(core.$theme, --border),
119 ), 119 ),
120 120
121 --active: ( 121 --active: (
122 --bg-color: props.get(core.$theme, --border-strong), 122 --bg-color: props.get(core.$theme, --border-strong),
123 --label-color: props.get(core.$theme, --heading), 123 --label-color: props.get(core.$theme, --heading),
124 --border-color: props.get(core.$theme, --border-strong), 124 --border-color: props.get(core.$theme, --border-strong),
125 ), 125 ),
126 ), 126 ),
127 127
128 --quiet: ( 128 --quiet: (
129 --label-color: props.get(core.$theme, --text), 129 --label-color: props.get(core.$theme, --text),
130 130
131 --hover: ( 131 --hover: (
132 --bg-color: props.get(core.$theme, --border-mute), 132 --bg-color: props.get(core.$theme, --border-mute),
133 --label-color: props.get(core.$theme, --heading), 133 --label-color: props.get(core.$theme, --heading),
134 ), 134 ),
135 135
136 --active: ( 136 --active: (
137 --bg-color: props.get(core.$theme, --border), 137 --bg-color: props.get(core.$theme, --border),
138 --label-color: props.get(core.$theme, --heading), 138 --label-color: props.get(core.$theme, --heading),
139 ), 139 ),
140 140
141 --disabled: ( 141 --disabled: (
142 --label-color: props.get(core.$theme, --border-strong), 142 --label-color: props.get(core.$theme, --border-strong),
143 ), 143 ),
144 ), 144 ),
145), $default-theme-override) !default; 145), $default-theme-override) !default;
146$default-theme: props.def(--o-button, $default-theme, 'color'); 146$default-theme: props.def(--o-button, $default-theme, 'color');
147 147
148$default-theme-dark-override: () !default; 148$default-theme-dark-override: () !default;
149$default-theme-dark: map.deep-merge(( 149$default-theme-dark: map.deep-merge((
150 --bg-color: props.get(core.$theme, --border-mute), 150 --bg-color: props.get(core.$theme, --border-mute),
151 --border-color: props.get(core.$theme, --border-mute), 151 --border-color: props.get(core.$theme, --border-mute),
152 152
153 --hover: ( 153 --hover: (
154 --bg-color: props.get(core.$theme, --border), 154 --bg-color: props.get(core.$theme, --border),
155 --border-color: props.get(core.$theme, --border), 155 --border-color: props.get(core.$theme, --border),
156 ), 156 ),
157 157
158 --active: ( 158 --active: (
159 --bg-color: props.get(core.$theme, --border-strong), 159 --bg-color: props.get(core.$theme, --border-strong),
160 --border-color: props.get(core.$theme, --border-strong), 160 --border-color: props.get(core.$theme, --border-strong),
161 ), 161 ),
162 162
163 --selected: ( 163 --selected: (
164 --border-color: props.get(core.$theme, --text), 164 --border-color: props.get(core.$theme, --text),
165 ), 165 ),
166), $default-theme-override) !default; 166), $default-theme-override) !default;
167$default-theme-dark: props.def(--o-button, $default-theme-dark, 'dark'); 167$default-theme-dark: props.def(--o-button, $default-theme-dark, 'dark');
168 168
169@each $theme in map.keys(props.get(core.$transparent-colors)) { 169@each $theme in map.keys(props.get(core.$transparent-colors)) {
170 $button-theme: --static-#{string.slice($theme, 3)}; 170 $button-theme: --static-#{string.slice($theme, 3)};
171 171
172 $themes: props.merge($themes, ( 172 $themes: props.merge($themes, (
173 $button-theme: ( 173 $button-theme: (
174 --bg-color: props.get(core.$transparent-colors, $theme, --200), 174 --bg-color: props.get(core.$transparent-colors, $theme, --200),
175 --label-color: props.get(core.$transparent-colors, $theme, --900), 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), 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), 177 --shadow-color: props.get(core.$transparent-colors, --black, --200),
178 178
179 --hover: ( 179 --hover: (
180 --bg-color: props.get(core.$transparent-colors, $theme, --300), 180 --bg-color: props.get(core.$transparent-colors, $theme, --300),
181 --label-color: props.get(core.$transparent-colors, $theme, --900), 181 --label-color: props.get(core.$transparent-colors, $theme, --900),
182 --border-color: props.get(core.$transparent-colors, $theme, --400), 182 --border-color: props.get(core.$transparent-colors, $theme, --400),
183 ), 183 ),
184 184
185 --active: ( 185 --active: (
186 --bg-color: props.get(core.$transparent-colors, $theme, --400), 186 --bg-color: props.get(core.$transparent-colors, $theme, --400),
187 --label-color: props.get(core.$transparent-colors, $theme, --900), 187 --label-color: props.get(core.$transparent-colors, $theme, --900),
188 --border-color: props.get(core.$transparent-colors, $theme, --500), 188 --border-color: props.get(core.$transparent-colors, $theme, --500),
189 ), 189 ),
190 190
191 --disabled: ( 191 --disabled: (
192 --bg-color: props.get(core.$transparent-colors, $theme, --100), 192 --bg-color: props.get(core.$transparent-colors, $theme, --100),
193 --label-color: props.get(core.$transparent-colors, $theme, --500), 193 --label-color: props.get(core.$transparent-colors, $theme, --500),
194 --border-color: props.get(core.$transparent-colors, $theme, --300), 194 --border-color: props.get(core.$transparent-colors, $theme, --300),
195 ), 195 ),
196 196
197 --key-focus: ( 197 --key-focus: (
198 --border-color: props.get(core.$transparent-colors, $theme, --900), 198 --border-color: props.get(core.$transparent-colors, $theme, --900),
199 --outline-color: props.get(core.$transparent-colors, $theme, --300), 199 --outline-color: props.get(core.$transparent-colors, $theme, --300),
200 ), 200 ),
201 201
202 --highlighted: ( 202 --highlighted: (
203 --border-color: props.get(core.$transparent-colors, $theme, --900), 203 --border-color: props.get(core.$transparent-colors, $theme, --900),
204 --shadow-color: props.get(core.$transparent-colors, --black, --200), 204 --shadow-color: props.get(core.$transparent-colors, --black, --200),
205 ), 205 ),
206 206
207 --selected: ( 207 --selected: (
208 --bg-color: props.get(core.$transparent-colors, $theme, --800), 208 --bg-color: props.get(core.$transparent-colors, $theme, --800),
209 --label-color: props.get(core.$transparent-colors, $theme, --text), 209 --label-color: props.get(core.$transparent-colors, $theme, --text),
210 --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200), 210 --border-color: props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --100) props.get(core.$transparent-colors, $theme, --200),
211 211
212 --hover: ( 212 --hover: (
213 --bg-color: props.get(core.$transparent-colors, $theme, --900), 213 --bg-color: props.get(core.$transparent-colors, $theme, --900),
214 --label-color: props.get(core.$transparent-colors, $theme, --text), 214 --label-color: props.get(core.$transparent-colors, $theme, --text),
215 --border-color: props.get(core.$transparent-colors, $theme, --100), 215 --border-color: props.get(core.$transparent-colors, $theme, --100),
216 ), 216 ),
217 217
218 --active: ( 218 --active: (
219 --bg-color: props.get(core.$transparent-colors, $theme, --900), 219 --bg-color: props.get(core.$transparent-colors, $theme, --900),
220 --label-color: props.get(core.$transparent-colors, $theme, --text), 220 --label-color: props.get(core.$transparent-colors, $theme, --text),
221 --border-color: props.get(core.$transparent-colors, $theme, --100), 221 --border-color: props.get(core.$transparent-colors, $theme, --100),
222 ), 222 ),
223 223
224 --disabled: ( 224 --disabled: (
225 --bg-color: props.get(core.$transparent-colors, $theme, --200), 225 --bg-color: props.get(core.$transparent-colors, $theme, --200),
226 --label-color: props.get(core.$transparent-colors, $theme, --500), 226 --label-color: props.get(core.$transparent-colors, $theme, --500),
227 --border-color: props.get(core.$transparent-colors, $theme, --100), 227 --border-color: props.get(core.$transparent-colors, $theme, --100),
228 ), 228 ),
229 ), 229 ),
230 230
231 --badge: ( 231 --badge: (
232 --bg-color: props.get(core.$transparent-colors, $theme, --200), 232 --bg-color: props.get(core.$transparent-colors, $theme, --200),
233 --label-color: props.get(core.$transparent-colors, $theme, --900), 233 --label-color: props.get(core.$transparent-colors, $theme, --900),
234 --border-color: transparent, 234 --border-color: transparent,
235 235
236 --hover: ( 236 --hover: (
237 --bg-color: props.get(core.$transparent-colors, $theme, --300), 237 --bg-color: props.get(core.$transparent-colors, $theme, --300),
238 --label-color: props.get(core.$transparent-colors, $theme, --900), 238 --label-color: props.get(core.$transparent-colors, $theme, --900),
239 --border-color: transparent, 239 --border-color: transparent,
240 ), 240 ),
241 241
242 --active: ( 242 --active: (
243 --bg-color: props.get(core.$transparent-colors, $theme, --400), 243 --bg-color: props.get(core.$transparent-colors, $theme, --400),
244 --label-color: props.get(core.$transparent-colors, $theme, --900), 244 --label-color: props.get(core.$transparent-colors, $theme, --900),
245 --border-color: transparent, 245 --border-color: transparent,
246 ), 246 ),
247 ), 247 ),
248 248
249 --quiet: ( 249 --quiet: (
250 --label-color: props.get(core.$transparent-colors, $theme, --900), 250 --label-color: props.get(core.$transparent-colors, $theme, --900),
251 251
252 --hover: ( 252 --hover: (
253 --bg-color: props.get(core.$transparent-colors, $theme, --200), 253 --bg-color: props.get(core.$transparent-colors, $theme, --200),
254 --label-color: props.get(core.$transparent-colors, $theme, --900), 254 --label-color: props.get(core.$transparent-colors, $theme, --900),
255 ), 255 ),
256 256
257 --active: ( 257 --active: (
258 --bg-color: props.get(core.$transparent-colors, $theme, --300), 258 --bg-color: props.get(core.$transparent-colors, $theme, --300),
259 --label-color: props.get(core.$transparent-colors, $theme, --900), 259 --label-color: props.get(core.$transparent-colors, $theme, --900),
260 ), 260 ),
261 261
262 --disabled: ( 262 --disabled: (
263 --label-color: props.get(core.$transparent-colors, $theme, --500), 263 --label-color: props.get(core.$transparent-colors, $theme, --500),
264 ), 264 ),
265 ), 265 ),
266 ) 266 )
267 )); 267 ));
268} 268}
269 269
270$themes-config: ( 270$themes-config: (
271 accent: --accent, 271 accent: --accent,
272 positive: --positive, 272 positive: --positive,
273 negative: --negative, 273 negative: --negative,
274 warning: --warning, 274 warning: --warning,
275) !default; 275) !default;
276 276
277@each $theme, $key in $themes-config { 277@each $theme, $key in $themes-config {
278 $themes: props.merge($themes, ( 278 $themes: props.merge($themes, (
279 --#{$theme}: ( 279 --#{$theme}: (
280 --bg-color: props.get(core.$theme, $key, --100), 280 --bg-color: props.get(core.$theme, $key, --100),
281 --label-color: props.get(core.$theme, $key, --1100), 281 --label-color: props.get(core.$theme, $key, --1100),
282 --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600), 282 --border-color: props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --500) props.get(core.$theme, $key, --600),
283 --shadow-color: props.get(core.$theme, $key, --200), 283 --shadow-color: props.get(core.$theme, $key, --200),
284 284
285 --hover: ( 285 --hover: (
286 --bg-color: props.get(core.$theme, $key, --200), 286 --bg-color: props.get(core.$theme, $key, --200),
287 --label-color: props.get(core.$theme, $key, --1200), 287 --label-color: props.get(core.$theme, $key, --1200),
288 --border-color: props.get(core.$theme, $key, --600), 288 --border-color: props.get(core.$theme, $key, --600),
289 ), 289 ),
290 290
291 --active: ( 291 --active: (
292 --bg-color: props.get(core.$theme, $key, --300), 292 --bg-color: props.get(core.$theme, $key, --300),
293 --label-color: props.get(core.$theme, $key, --1300), 293 --label-color: props.get(core.$theme, $key, --1300),
294 --border-color: props.get(core.$theme, $key, --800), 294 --border-color: props.get(core.$theme, $key, --800),
295 ), 295 ),
296 296
297 --disabled: ( 297 --disabled: (
298 --bg-color: props.get(core.$theme, --bg-l1), 298 --bg-color: props.get(core.$theme, --bg-l1),
299 --label-color: props.get(core.$theme, --border-strong), 299 --label-color: props.get(core.$theme, --border-strong),
300 --border-color: props.get(core.$theme, --border), 300 --border-color: props.get(core.$theme, --border),
301 ), 301 ),
302 302
303 --key-focus: ( 303 --key-focus: (
304 --border-color: props.get(core.$theme, --focus, --border), 304 --border-color: props.get(core.$theme, --focus, --border),
305 --outline-color: props.get(core.$theme, --focus, --outline), 305 --outline-color: props.get(core.$theme, --focus, --outline),
306 ), 306 ),
307 307
308 --highlighted: ( 308 --highlighted: (
309 --border-color: props.get(core.$theme, $key, --900), 309 --border-color: props.get(core.$theme, $key, --900),
310 --shadow-color: props.get(core.$theme, $key, --200), 310 --shadow-color: props.get(core.$theme, $key, --200),
311 ), 311 ),
312 312
313 --selected: ( 313 --selected: (
314 --bg-color: props.get(core.$theme, #{$key}-static, --900), 314 --bg-color: props.get(core.$theme, #{$key}-static, --900),
315 --label-color: props.get(core.$theme, #{$key}-static, --900-text), 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), 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 317
318 --hover: ( 318 --hover: (
319 --bg-color: props.get(core.$theme, #{$key}-static, --1000), 319 --bg-color: props.get(core.$theme, #{$key}-static, --1000),
320 --label-color: props.get(core.$theme, #{$key}-static, --1000-text), 320 --label-color: props.get(core.$theme, #{$key}-static, --1000-text),
321 --border-color: props.get(core.$theme, #{$key}-static, --1000), 321 --border-color: props.get(core.$theme, #{$key}-static, --1000),
322 ), 322 ),
323 323
324 --active: ( 324 --active: (
325 --bg-color: props.get(core.$theme, #{$key}-static, --1100), 325 --bg-color: props.get(core.$theme, #{$key}-static, --1100),
326 --label-color: props.get(core.$theme, #{$key}-static, --1100-text), 326 --label-color: props.get(core.$theme, #{$key}-static, --1100-text),
327 --border-color: props.get(core.$theme, #{$key}-static, --1100), 327 --border-color: props.get(core.$theme, #{$key}-static, --1100),
328 ), 328 ),
329 329
330 --disabled: ( 330 --disabled: (
331 --bg-color: props.get(core.$theme, --border-mute), 331 --bg-color: props.get(core.$theme, --border-mute),
332 --label-color: props.get(core.$theme, --border-strong), 332 --label-color: props.get(core.$theme, --border-strong),
333 --border-color: props.get(core.$theme, --border-mute), 333 --border-color: props.get(core.$theme, --border-mute),
334 ), 334 ),
335 ), 335 ),
336 336
337 --badge: ( 337 --badge: (
338 --bg-color: props.get(core.$theme, $key, --100), 338 --bg-color: props.get(core.$theme, $key, --100),
339 --label-color: props.get(core.$theme, $key, --1100), 339 --label-color: props.get(core.$theme, $key, --1100),
340 --border-color: props.get(core.$theme, $key, --300), 340 --border-color: props.get(core.$theme, $key, --300),
341 341
342 --hover: ( 342 --hover: (
343 --bg-color: props.get(core.$theme, $key, --200), 343 --bg-color: props.get(core.$theme, $key, --200),
344 --label-color: props.get(core.$theme, $key, --1200), 344 --label-color: props.get(core.$theme, $key, --1200),
345 --border-color: props.get(core.$theme, $key, --400), 345 --border-color: props.get(core.$theme, $key, --400),
346 ), 346 ),
347 347
348 --active: ( 348 --active: (
349 --bg-color: props.get(core.$theme, $key, --300), 349 --bg-color: props.get(core.$theme, $key, --300),
350 --label-color: props.get(core.$theme, $key, --1300), 350 --label-color: props.get(core.$theme, $key, --1300),
351 --border-color: props.get(core.$theme, $key, --500), 351 --border-color: props.get(core.$theme, $key, --500),
352 ), 352 ),
353 ), 353 ),
354 354
355 --quiet: ( 355 --quiet: (
356 --label-color: props.get(core.$theme, $key, --1100), 356 --label-color: props.get(core.$theme, $key, --1100),
357 357
358 --hover: ( 358 --hover: (
359 --bg-color: props.get(core.$theme, $key, --200), 359 --bg-color: props.get(core.$theme, $key, --200),
360 --label-color: props.get(core.$theme, $key, --1200), 360 --label-color: props.get(core.$theme, $key, --1200),
361 ), 361 ),
362 362
363 --active: ( 363 --active: (
364 --bg-color: props.get(core.$theme, $key, --300), 364 --bg-color: props.get(core.$theme, $key, --300),
365 --label-color: props.get(core.$theme, $key, --1300), 365 --label-color: props.get(core.$theme, $key, --1300),
366 ), 366 ),
367 367
368 --disabled: ( 368 --disabled: (
369 --label-color: props.get(core.$theme, --border-strong), 369 --label-color: props.get(core.$theme, --border-strong),
370 ), 370 ),
371 ), 371 ),
372 ) 372 )
373 )); 373 ));
374} 374}
diff --git a/src/objects/_card.scss b/src/objects/_card.scss
index 4bd6a59..ebab339 100644
--- a/src/objects/_card.scss
+++ b/src/objects/_card.scss
@@ -8,270 +8,270 @@
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 background-color: props.get(vars.$bg-color); 17 background-color: props.get(vars.$bg-color);
18 border: props.get(vars.$border-width) solid transparent; 18 border: props.get(vars.$border-width) solid transparent;
19 border-color: props.get(vars.$border-color); 19 border-color: props.get(vars.$border-color);
20 border-radius: props.get(vars.$rounding); 20 border-radius: props.get(vars.$rounding);
21 transition: transform .2s, background-color .2s, border-color .2s, box-shadow .2s; 21 transition: transform .2s, background-color .2s, border-color .2s, box-shadow .2s;
22 22
23 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 23 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
24 &:hover, 24 &:hover,
25 &:active, 25 &:active,
26 &:focus-visible { 26 &:focus-visible {
27 transform: translateY(props.get(vars.$hover--offset-b)); 27 background-color: props.get(vars.$hover--bg-color);
28 background-color: props.get(vars.$hover--bg-color); 28 border-color: props.get(vars.$hover--border-color);
29 border-color: props.get(vars.$hover--border-color); 29 box-shadow: none;
30 box-shadow: none; 30 transform: translateY(props.get(vars.$hover--offset-b));
31 } 31 }
32 32
33 &:focus-visible { 33 &:focus-visible {
34 margin: calc(-1 * props.get(vars.$key-focus--border-width)); 34 margin: calc(-1 * props.get(vars.$key-focus--border-width));
35 transition: transform .2s; 35 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
36 border: calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent; 36 border: calc(props.get(vars.$key-focus--border-offset) + props.get(vars.$border-width)) solid transparent;
37 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); 37 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
38 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 38 box-shadow:
39 box-shadow: 39 0 0 0
40 0 0 0 40 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
41 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 41 props.get(vars.$key-focus--outline-color);
42 props.get(vars.$key-focus--outline-color); 42 transition: transform .2s;
43 } 43 }
44 } 44 }
45 45
46 @include bem.modifier('borderless') { 46 @include bem.modifier('borderless') {
47 border-color: props.get(vars.$bg-color); 47 border-color: props.get(vars.$bg-color);
48 } 48 }
49 49
50 @include bem.modifier('shadow') { 50 @include bem.modifier('shadow') {
51 box-shadow: 51 box-shadow:
52 props.get(vars.$shadow-x) 52 props.get(vars.$shadow-x)
53 props.get(vars.$shadow-y) 53 props.get(vars.$shadow-y)
54 props.get(vars.$shadow-blur) 54 props.get(vars.$shadow-blur)
55 props.get(vars.$shadow-grow) 55 props.get(vars.$shadow-grow)
56 props.get(vars.$shadow-color); 56 props.get(vars.$shadow-color);
57 57
58 @include bem.modifier('quiet') { 58 @include bem.modifier('quiet') {
59 @include bem.elem('image') { 59 @include bem.elem('image') {
60 box-shadow: 60 box-shadow:
61 props.get(vars.$shadow-x) 61 props.get(vars.$shadow-x)
62 props.get(vars.$shadow-y) 62 props.get(vars.$shadow-y)
63 props.get(vars.$shadow-blur) 63 props.get(vars.$shadow-blur)
64 props.get(vars.$shadow-grow) 64 props.get(vars.$shadow-grow)
65 props.get(vars.$shadow-color); 65 props.get(vars.$shadow-color);
66 } 66 }
67 } 67 }
68 } 68 }
69 69
70 @include bem.elem('avatar') { 70 @include bem.elem('avatar') {
71 margin-block-start: props.get(vars.$pad-b); 71 margin-block-start: props.get(vars.$pad-b);
72 margin-inline-start: props.get(vars.$pad-i); 72 margin-inline-start: props.get(vars.$pad-i);
73 } 73 }
74 74
75 @include bem.elem('image') { 75 @include bem.elem('image') {
76 position: relative; 76 position: relative;
77 display: block; 77 display: block;
78 flex: 0 0 auto; 78 flex: 0 0 auto;
79 inline-size: calc(100% + 2 * props.get(vars.$border-width)); 79 inline-size: calc(100% + 2 * props.get(vars.$border-width));
80 margin: calc(-1 * props.get(vars.$border-width)); 80 margin: calc(-1 * props.get(vars.$border-width));
81 overflow: hidden; 81 overflow: hidden;
82 object-fit: cover; 82 object-fit: cover;
83 transition: background-color .2s, transform .2s, opacity .2s; 83 transition: background-color .2s, transform .2s, opacity .2s;
84 84
85 &:first-child { 85 &:first-child {
86 border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); 86 border-start-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
87 border-start-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); 87 border-start-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
88 } 88 }
89 89
90 &:last-child { 90 &:last-child {
91 border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); 91 border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
92 border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); 92 border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
93 } 93 }
94 94
95 @include bem.next-elem('avatar') { 95 @include bem.next-elem('avatar') {
96 margin-block-start: calc(-.7 * props.get(avatar.$size--xl)); 96 margin-block-start: calc(-.7 * props.get(avatar.$size--xl));
97 } 97 }
98 } 98 }
99 99
100 @include bem.elem('image-img') { 100 @include bem.elem('image-img') {
101 display: block; 101 display: block;
102 inline-size: 100%; 102 inline-size: 100%;
103 object-fit: cover; 103 object-fit: cover;
104 } 104 }
105 105
106 @include bem.elem('image-overlay') { 106 @include bem.elem('image-overlay') {
107 position: absolute; 107 position: absolute;
108 inset-block-end: 0; 108 inset-block-end: 0;
109 inset-inline: 0; 109 inset-inline: 0;
110 z-index: 5; 110 z-index: 5;
111 padding-block: props.get(vars.$image-overlay--pad-b); 111 padding-block: props.get(vars.$image-overlay--pad-b);
112 padding-inline: props.get(vars.$image-overlay--pad-i); 112 padding-inline: props.get(vars.$image-overlay--pad-i);
113 } 113 }
114 114
115 @include bem.elem('body') { 115 @include bem.elem('body') {
116 flex: 1 0 auto; 116 flex: 1 0 auto;
117 padding-block: props.get(vars.$pad-b); 117 padding-block: props.get(vars.$pad-b);
118 padding-inline: props.get(vars.$pad-i); 118 padding-inline: props.get(vars.$pad-i);
119 119
120 &::before { 120 &::before {
121 display: block; 121 display: block;
122 margin-block: -100em 100em; 122 margin-block: -100em 100em;
123 content: ''; 123 content: '';
124 } 124 }
125 } 125 }
126 126
127 @include bem.elem('content') { 127 @include bem.elem('content') {
128 margin-block-start: props.get(vars.$spacing); 128 margin-block-start: props.get(vars.$spacing);
129 } 129 }
130 130
131 @include bem.elem('footer') { 131 @include bem.elem('footer') {
132 flex: 0 0 auto; 132 flex: 0 0 auto;
133 padding-block: 0 props.get(vars.$pad-b); 133 padding-block: 0 props.get(vars.$pad-b);
134 padding-inline: props.get(vars.$pad-i); 134 padding-inline: props.get(vars.$pad-i);
135 margin-block-start: calc(-1 * props.get(vars.$pad-b)); 135 margin-block-start: calc(-1 * props.get(vars.$pad-b));
136 136
137 &::before { 137 &::before {
138 display: block; 138 display: block;
139 block-size: props.get(vars.$divider-width); 139 block-size: props.get(vars.$divider-width);
140 margin-block: props.get(vars.$spacing); 140 margin-block: props.get(vars.$spacing);
141 content: ''; 141 content: '';
142 background-color: props.get(vars.$divider-width); 142 background-color: props.get(vars.$divider-width);
143 } 143 }
144 } 144 }
145 145
146 @include bem.modifier('quiet') { 146 @include bem.modifier('quiet') {
147 margin-inline: 0; 147 margin-inline: 0;
148 background-color: transparent; 148 background-color: transparent;
149 border: 0; 149 border: 0;
150 box-shadow: none; 150 box-shadow: none;
151 151
152 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 152 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
153 &:hover, 153 &:hover,
154 &:active, 154 &:active,
155 &:focus-visible { 155 &:focus-visible {
156 transform: none; 156 background-color: transparent;
157 background-color: transparent; 157 transform: none;
158 158
159 @include bem.elem('image') { 159 @include bem.elem('image') {
160 background-color: props.get(vars.$quiet--hover--image-color); 160 background-color: props.get(vars.$quiet--hover--image-color);
161 opacity: .75; 161 opacity: .75;
162 transform: translateY(props.get(vars.$hover--offset-b)); 162 transform: translateY(props.get(vars.$hover--offset-b));
163 } 163 }
164 } 164 }
165 165
166 &:focus-visible { 166 &:focus-visible {
167 margin: 0; 167 margin: 0;
168 outline: none; 168 outline: none;
169 border: 0; 169 border: 0;
170 box-shadow: none; 170 box-shadow: none;
171 171
172 @include bem.elem('image') { 172 @include bem.elem('image') {
173 margin: calc(-1 * props.get(vars.$key-focus--border-width)); 173 margin: calc(-1 * props.get(vars.$key-focus--border-width));
174 border: props.get(vars.$key-focus--border-offset) solid transparent; 174 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
175 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); 175 background-color: props.get(vars.$quiet--hover--image-color);
176 background-color: props.get(vars.$quiet--hover--image-color); 176 border: props.get(vars.$key-focus--border-offset) solid transparent;
177 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 177 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
178 box-shadow: 178 box-shadow:
179 0 179 0
180 0 180 0
181 0 181 0
182 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 182 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
183 props.get(vars.$key-focus--outline-color); 183 props.get(vars.$key-focus--outline-color);
184 opacity: 1; 184 opacity: 1;
185 } 185 }
186 } 186 }
187 } 187 }
188 188
189 @include bem.elem('image') { 189 @include bem.elem('image') {
190 position: relative; 190 position: relative;
191 background-color: props.get(vars.$quiet--image-color); 191 background-color: props.get(vars.$quiet--image-color);
192 background-clip: padding-box; 192 background-clip: padding-box;
193 border-radius: props.get(vars.$rounding); 193 border-radius: props.get(vars.$rounding);
194 } 194 }
195 195
196 @include bem.elem('body') { 196 @include bem.elem('body') {
197 padding: 0; 197 padding: 0;
198 padding-block-start: props.get(vars.$spacing); 198 padding-block-start: props.get(vars.$spacing);
199 } 199 }
200 200
201 @include bem.elem('footer') { 201 @include bem.elem('footer') {
202 padding-inline: 0; 202 padding-inline: 0;
203 } 203 }
204 } 204 }
205 205
206 @include bem.modifier('thumbnail') { 206 @include bem.modifier('thumbnail') {
207 @include bem.elem('image') { 207 @include bem.elem('image') {
208 border-radius: props.get(vars.$rounding); 208 border-radius: props.get(vars.$rounding);
209 } 209 }
210 210
211 @include bem.elem('body') { 211 @include bem.elem('body') {
212 position: absolute; 212 position: absolute;
213 inset-block-end: calc(-1 * props.get(vars.$border-width)); 213 inset-block-end: calc(-1 * props.get(vars.$border-width));
214 inset-inline: calc(-1 * props.get(vars.$border-width)); 214 inset-inline: calc(-1 * props.get(vars.$border-width));
215 z-index: 10; 215 z-index: 10;
216 visibility: hidden; 216 visibility: hidden;
217 background-color: props.get(vars.$hover--bg-color); 217 background-color: props.get(vars.$hover--bg-color);
218 border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width); 218 border-color: transparent;
219 border-color: transparent; 219 border-style: solid;
220 border-style: solid; 220 border-width: 0 props.get(vars.$border-width) props.get(vars.$border-width);
221 border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); 221 border-end-start-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
222 border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width)); 222 border-end-end-radius: calc(props.get(vars.$rounding) - props.get(vars.$border-width));
223 opacity: 0; 223 opacity: 0;
224 transition: 224 transition:
225 border-color .2s ease, 225 border-color .2s ease,
226 opacity .2s ease, 226 opacity .2s ease,
227 visibility 0s .2s linear; 227 visibility 0s .2s linear;
228 } 228 }
229 229
230 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') { 230 @include bem.multi('&:link, &:visited, &:enabled', 'modifier' 'interactive') {
231 &:hover, 231 &:hover,
232 &:active, 232 &:active,
233 &:focus-visible { 233 &:focus-visible {
234 @include bem.elem('body') { 234 @include bem.elem('body') {
235 border-color: props.get(vars.$hover--border-color); 235 visibility: visible;
236 visibility: visible; 236 border-color: props.get(vars.$hover--border-color);
237 opacity: 1; 237 opacity: 1;
238 transition: 238 transition:
239 border-color .2s ease, 239 border-color .2s ease,
240 opacity .2s ease, 240 opacity .2s ease,
241 visibility .2s linear; 241 visibility .2s linear;
242 } 242 }
243 } 243 }
244 } 244 }
245 } 245 }
246 246
247 @include bem.modifier('horizontal') { 247 @include bem.modifier('horizontal') {
248 flex-direction: row; 248 flex-direction: row;
249 align-items: center; 249 align-items: center;
250 250
251 @include bem.elem('image') { 251 @include bem.elem('image') {
252 align-self: stretch; 252 align-self: stretch;
253 inline-size: auto; 253 inline-size: auto;
254 254
255 &:first-child { 255 &:first-child {
256 border-start-end-radius: 0; 256 border-start-end-radius: 0;
257 border-end-start-radius: props.get(vars.$rounding); 257 border-end-start-radius: props.get(vars.$rounding);
258 } 258 }
259 259
260 &:last-child { 260 &:last-child {
261 border-start-end-radius: props.get(vars.$rounding); 261 border-start-end-radius: props.get(vars.$rounding);
262 border-end-start-radius: 0; 262 border-end-start-radius: 0;
263 } 263 }
264 } 264 }
265 265
266 @include bem.elem('body') { 266 @include bem.elem('body') {
267 flex: 0 0 auto; 267 flex: 0 0 auto;
268 268
269 @include bem.modifier('main') { 269 @include bem.modifier('main') {
270 flex-shrink: 1; 270 flex-shrink: 1;
271 inline-size: 100%; 271 inline-size: 100%;
272 min-inline-size: 0; 272 min-inline-size: 0;
273 } 273 }
274 } 274 }
275 } 275 }
276 } 276 }
277} 277}
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/_divider.scss b/src/objects/_divider.scss
index 9b58e77..27af173 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -10,195 +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: props.get(vars.$vertical--border-width); 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.$strong--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('dot') { 60 @include bem.modifier('dot') {
61 align-self: center; 61 align-self: center;
62 inline-size: props.get(vars.$dot--size); 62 inline-size: props.get(vars.$dot--size);
63 block-size: props.get(vars.$dot--size); 63 block-size: props.get(vars.$dot--size);
64 margin-block: 0; 64 margin-block: 0;
65 background-color: props.get(vars.$strong--bg-color); 65 background-color: props.get(vars.$strong--bg-color);
66 border-radius: props.get(vars.$dot--size); 66 border-radius: props.get(vars.$dot--size);
67 67
68 &::before, 68 &::before,
69 &::after { 69 &::after {
70 display: none; 70 display: none;
71 } 71 }
72 } 72 }
73 73
74 @include bem.modifier('medium') { 74 @include bem.modifier('medium') {
75 font-size: props.get(vars.$medium--label-font-size); 75 font-size: props.get(vars.$medium--label-font-size);
76 font-weight: 500; 76 font-weight: 500;
77 color: props.get(vars.$medium--label-color); 77 color: props.get(vars.$medium--label-color);
78 78
79 &::before, 79 &::before,
80 &::after { 80 &::after {
81 block-size: props.get(vars.$medium--border-width); 81 block-size: props.get(vars.$medium--border-width);
82 background-color: props.get(vars.$medium--bg-color); 82 background-color: props.get(vars.$medium--bg-color);
83 } 83 }
84 84
85 @include bem.modifier('vertical') { 85 @include bem.modifier('vertical') {
86 background-color: props.get(vars.$medium--bg-color); 86 background-color: props.get(vars.$medium--bg-color);
87 } 87 }
88 88
89 @include bem.modifier('dot') { 89 @include bem.modifier('dot') {
90 background-color: props.get(vars.$medium--bg-color); 90 background-color: props.get(vars.$medium--bg-color);
91 } 91 }
92 } 92 }
93 93
94 @include bem.modifier('quiet') { 94 @include bem.modifier('quiet') {
95 font-size: props.get(vars.$quiet--label-font-size); 95 font-size: props.get(vars.$quiet--label-font-size);
96 font-weight: 500; 96 font-weight: 500;
97 color: props.get(vars.$quiet--label-color); 97 color: props.get(vars.$quiet--label-color);
98 98
99 &::before, 99 &::before,
100 &::after { 100 &::after {
101 block-size: props.get(vars.$quiet--border-width); 101 block-size: props.get(vars.$quiet--border-width);
102 background-color: props.get(vars.$quiet--bg-color); 102 background-color: props.get(vars.$quiet--bg-color);
103 } 103 }
104 104
105 @include bem.modifier('vertical') { 105 @include bem.modifier('vertical') {
106 background-color: props.get(vars.$vertical--quiet--bg-color); 106 background-color: props.get(vars.$vertical--quiet--bg-color);
107 } 107 }
108 108
109 @include bem.modifier('dot') { 109 @include bem.modifier('dot') {
110 background-color: props.get(vars.$dot--quiet--bg-color); 110 background-color: props.get(vars.$dot--quiet--bg-color);
111 } 111 }
112 } 112 }
113 113
114 @include bem.modifier('faint') { 114 @include bem.modifier('faint') {
115 font-size: props.get(vars.$faint--label-font-size); 115 font-size: props.get(vars.$faint--label-font-size);
116 font-weight: 500; 116 font-weight: 500;
117 color: props.get(vars.$faint--label-color); 117 color: props.get(vars.$faint--label-color);
118 118
119 &::before, 119 &::before,
120 &::after { 120 &::after {
121 block-size: props.get(vars.$faint--border-width); 121 block-size: props.get(vars.$faint--border-width);
122 background-color: props.get(vars.$faint--bg-color); 122 background-color: props.get(vars.$faint--bg-color);
123 } 123 }
124 124
125 @include bem.modifier('vertical') { 125 @include bem.modifier('vertical') {
126 background-color: props.get(vars.$vertical--quiet--bg-color); 126 background-color: props.get(vars.$vertical--quiet--bg-color);
127 } 127 }
128 128
129 @include bem.modifier('dot') { 129 @include bem.modifier('dot') {
130 background-color: props.get(vars.$dot--quiet--bg-color); 130 background-color: props.get(vars.$dot--quiet--bg-color);
131 } 131 }
132 } 132 }
133 133
134 @include bem.modifier('labelled') { 134 @include bem.modifier('labelled') {
135 &::before { 135 &::before {
136 margin-inline-end: 1em; 136 margin-inline-end: 1em;
137 } 137 }
138 138
139 &::after { 139 &::after {
140 display: block; 140 display: block;
141 margin-inline-start: 1em; 141 margin-inline-start: 1em;
142 } 142 }
143 } 143 }
144 144
145 @each $theme in map.keys(props.get(vars.$themes)) { 145 @each $theme in map.keys(props.get(vars.$themes)) {
146 @include bem.modifier(string.slice($theme, 3)) { 146 @include bem.modifier(string.slice($theme, 3)) {
147 &::before, 147 &::before,
148 &::after { 148 &::after {
149 background-color: props.get(vars.$themes, $theme, --bg); 149 background-color: props.get(vars.$themes, $theme, --bg);
150 } 150 }
151 151
152 @include bem.elem('label') { 152 @include bem.elem('label') {
153 color: props.get(vars.$themes, $theme, --label); 153 color: props.get(vars.$themes, $theme, --label);
154 } 154 }
155 } 155 }
156 } 156 }
157 157
158 @each $theme in map.keys(props.get(vars.$static-themes)) { 158 @each $theme in map.keys(props.get(vars.$static-themes)) {
159 @include bem.modifier(string.slice($theme, 3)) { 159 @include bem.modifier(string.slice($theme, 3)) {
160 &::before, 160 &::before,
161 &::after { 161 &::after {
162 background-color: props.get(vars.$static-themes, $theme, --strong, --bg); 162 background-color: props.get(vars.$static-themes, $theme, --strong, --bg);
163 } 163 }
164 164
165 @include bem.elem('label') { 165 @include bem.elem('label') {
166 color: props.get(vars.$static-themes, $theme, --strong, --label); 166 color: props.get(vars.$static-themes, $theme, --strong, --label);
167 } 167 }
168 168
169 @include bem.modifier('medium') { 169 @include bem.modifier('medium') {
170 &::before, 170 &::before,
171 &::after { 171 &::after {
172 background-color: props.get(vars.$static-themes, $theme, --medium, --bg); 172 background-color: props.get(vars.$static-themes, $theme, --medium, --bg);
173 } 173 }
174 174
175 @include bem.elem('label') { 175 @include bem.elem('label') {
176 color: props.get(vars.$static-themes, $theme, --medium, --label); 176 color: props.get(vars.$static-themes, $theme, --medium, --label);
177 } 177 }
178 } 178 }
179 179
180 @include bem.modifier('quiet') { 180 @include bem.modifier('quiet') {
181 &::before, 181 &::before,
182 &::after { 182 &::after {
183 background-color: props.get(vars.$static-themes, $theme, --quiet, --bg); 183 background-color: props.get(vars.$static-themes, $theme, --quiet, --bg);
184 } 184 }
185 185
186 @include bem.elem('label') { 186 @include bem.elem('label') {
187 color: props.get(vars.$static-themes, $theme, --quiet, --label); 187 color: props.get(vars.$static-themes, $theme, --quiet, --label);
188 } 188 }
189 } 189 }
190 190
191 @include bem.modifier('faint') { 191 @include bem.modifier('faint') {
192 &::before, 192 &::before,
193 &::after { 193 &::after {
194 background-color: props.get(vars.$static-themes, $theme, --faint, --bg); 194 background-color: props.get(vars.$static-themes, $theme, --faint, --bg);
195 } 195 }
196 196
197 @include bem.elem('label') { 197 @include bem.elem('label') {
198 color: props.get(vars.$static-themes, $theme, --faint, --label); 198 color: props.get(vars.$static-themes, $theme, --faint, --label);
199 } 199 }
200 } 200 }
201 } 201 }
202 } 202 }
203 } 203 }
204} 204}
diff --git a/src/objects/_divider.vars.scss b/src/objects/_divider.vars.scss
index 5a5639b..688fbb3 100644
--- a/src/objects/_divider.vars.scss
+++ b/src/objects/_divider.vars.scss
@@ -38,42 +38,42 @@ $dot--quiet--bg-color: props.def(--o-divider--dot--quiet--bg-color, props.get
38$static-themes: props.def(--o-divider, (), 'color'); 38$static-themes: props.def(--o-divider, (), 'color');
39 39
40@each $theme in map.keys(props.get(core.$transparent-colors)) { 40@each $theme in map.keys(props.get(core.$transparent-colors)) {
41 $button-theme: --static-#{string.slice($theme, 3)}; 41 $button-theme: --static-#{string.slice($theme, 3)};
42 42
43 $static-themes: props.merge($static-themes, ( 43 $static-themes: props.merge($static-themes, (
44 $button-theme: ( 44 $button-theme: (
45 --strong: ( 45 --strong: (
46 --bg: props.get(core.$transparent-colors, $theme, --800), 46 --bg: props.get(core.$transparent-colors, $theme, --800),
47 --label: props.get(core.$transparent-colors, $theme, --900), 47 --label: props.get(core.$transparent-colors, $theme, --900),
48 ), 48 ),
49 --medium: ( 49 --medium: (
50 --bg: props.get(core.$transparent-colors, $theme, --300), 50 --bg: props.get(core.$transparent-colors, $theme, --300),
51 --label: props.get(core.$transparent-colors, $theme, --500), 51 --label: props.get(core.$transparent-colors, $theme, --500),
52 ), 52 ),
53 --quiet: ( 53 --quiet: (
54 --bg: props.get(core.$transparent-colors, $theme, --300), 54 --bg: props.get(core.$transparent-colors, $theme, --300),
55 --label: props.get(core.$transparent-colors, $theme, --500), 55 --label: props.get(core.$transparent-colors, $theme, --500),
56 ), 56 ),
57 --faint: ( 57 --faint: (
58 --bg: props.get(core.$transparent-colors, $theme, --200), 58 --bg: props.get(core.$transparent-colors, $theme, --200),
59 --label: props.get(core.$transparent-colors, $theme, --400), 59 --label: props.get(core.$transparent-colors, $theme, --400),
60 ), 60 ),
61 ) 61 )
62 )); 62 ));
63} 63}
64 64
65$themes-config: ( 65$themes-config: (
66 accent: --accent, 66 accent: --accent,
67 negative: --negative, 67 negative: --negative,
68) !default; 68) !default;
69 69
70$themes: props.def(--o-divider, (), 'color'); 70$themes: props.def(--o-divider, (), 'color');
71 71
72@each $theme, $key in $themes-config { 72@each $theme, $key in $themes-config {
73 $themes: props.merge($themes, ( 73 $themes: props.merge($themes, (
74 --#{$theme}: ( 74 --#{$theme}: (
75 --bg: props.get(core.$theme, $key, --800), 75 --bg: props.get(core.$theme, $key, --800),
76 --label: props.get(core.$theme, $key, --1000), 76 --label: props.get(core.$theme, $key, --1000),
77 ) 77 )
78 )); 78 ));
79} 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 073f88b..b7a8a43 100644
--- a/src/objects/_emoji.vars.scss
+++ b/src/objects/_emoji.vars.scss
@@ -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
index 38837be..27e0f6a 100644
--- a/src/objects/_figure.scss
+++ b/src/objects/_figure.scss
@@ -7,20 +7,20 @@
7@use 'figure.vars' as vars; 7@use 'figure.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('figure') { 12 @include bem.object('figure') {
13 @include bem.elem('caption') { 13 @include bem.elem('caption') {
14 padding-block: props.get(vars.$pad-b); 14 padding-block: props.get(vars.$pad-b);
15 font-size: props.get(vars.$font-size); 15 font-size: props.get(vars.$font-size);
16 color: props.get(vars.$text-color); 16 color: props.get(vars.$text-color);
17 border-block-end: props.get(vars.$border-width) solid props.get(vars.$border-color); 17 border-block-end: props.get(vars.$border-width) solid props.get(vars.$border-color);
18 18
19 &::before { 19 &::before {
20 display: block; 20 display: block;
21 margin-block: -100em 100em; 21 margin-block: -100em 100em;
22 content: ''; 22 content: '';
23 } 23 }
24 } 24 }
25 } 25 }
26} 26}
diff --git a/src/objects/_heading.scss b/src/objects/_heading.scss
index bdc7027..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 22
23 & + & { 23 & + & {
24 margin-block-start: props.get(vars.$margin-bs-sibling); 24 margin-block-start: props.get(vars.$margin-bs-sibling);
25 } 25 }
26 26
27 @include bem.elem('highlight') { 27 @include bem.elem('highlight') {
28 background-image: linear-gradient(to top, 28 background-image: linear-gradient(to top,
29 transparent .05em, 29 transparent .05em,
30 props.get(vars.$bg-color) .05em, 30 props.get(vars.$bg-color) .05em,
31 props.get(vars.$bg-color) .5em, 31 props.get(vars.$bg-color) .5em,
32 transparent .5em); 32 transparent .5em);
33 } 33 }
34 34
35 @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 {
36 @include bem.modifier($mod) { 36 @include bem.modifier($mod) {
37 font-family: props.get($font-family); 37 font-family: props.get($font-family);
38 font-size: props.get($font-size); 38 font-size: props.get($font-size);
39 font-weight: props.get($font-weight); 39 font-weight: props.get($font-weight);
40 font-feature-settings: props.get($feature-settings); 40 font-feature-settings: props.get($feature-settings);
41 line-height: props.get($line-height); 41 line-height: props.get($line-height);
42 letter-spacing: props.get($letter-spacing); 42 letter-spacing: props.get($letter-spacing);
43 } 43 }
44 } 44 }
45 45
46 @include bem.modifier('display') { 46 @include bem.modifier('display') {
47 @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 {
48 @include bem.modifier($mod) { 48 @include bem.modifier($mod) {
49 font-family: props.get($font-family); 49 font-family: props.get($font-family);
50 font-size: props.get($font-size); 50 font-size: props.get($font-size);
51 font-weight: props.get($font-weight); 51 font-weight: props.get($font-weight);
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 transform: translateX(props.get(vars.$offset));
56 } 56 }
57 } 57 }
58 } 58 }
59 } 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 fcdac80..8e18def 100644
--- a/src/objects/_navbar.vars.scss
+++ b/src/objects/_navbar.vars.scss
@@ -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
index e148f21..80fc913 100644
--- a/src/objects/_placeholders.scss
+++ b/src/objects/_placeholders.scss
@@ -7,16 +7,16 @@
7@use 'placeholders.vars' as vars; 7@use 'placeholders.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('placeholders') { 12 @include bem.object('placeholders') {
13 @include bem.elem('placeholder') { 13 @include bem.elem('placeholder') {
14 display: inline-block; 14 display: inline-block;
15 min-block-size: props.get(vars.$min-block-size); 15 min-block-size: props.get(vars.$min-block-size);
16 vertical-align: middle; 16 vertical-align: middle;
17 background-color: currentColor; 17 background-color: currentColor;
18 border-radius: props.get(vars.$rounding); 18 border-radius: props.get(vars.$rounding);
19 opacity: props.get(vars.$opacity); 19 opacity: props.get(vars.$opacity);
20 } 20 }
21 } 21 }
22} 22}
diff --git a/src/objects/_popover.scss b/src/objects/_popover.scss
index 4356dff..2746477 100644
--- a/src/objects/_popover.scss
+++ b/src/objects/_popover.scss
@@ -7,39 +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 border: props.get(vars.$border-width) solid transparent; 22 border: props.get(vars.$border-width) solid transparent;
23 border-color: 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 box-shadow: 26 props.get(vars.$shadow-x)
27 props.get(vars.$shadow-x) 27 props.get(vars.$shadow-y)
28 props.get(vars.$shadow-y) 28 props.get(vars.$shadow-blur)
29 props.get(vars.$shadow-blur) 29 props.get(vars.$shadow-grow)
30 props.get(vars.$shadow-grow) 30 props.get(vars.$shadow-color);
31 props.get(vars.$shadow-color); 31 transform: translate(var(--x), var(--y));
32 32
33 @include bem.modifier('up-left') { 33 @include bem.modifier('up-left') {
34 transform: translate(var(--x), calc(var(--y) - 100%)); 34 transform: translate(var(--x), calc(var(--y) - 100%));
35 } 35 }
36 36
37 @include bem.modifier('up-right') { 37 @include bem.modifier('up-right') {
38 transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%)); 38 transform: translate(calc(var(--x) - 100%), calc(var(--y) - 100%));
39 } 39 }
40 40
41 @include bem.modifier('down-right') { 41 @include bem.modifier('down-right') {
42 transform: translate(calc(var(--x) - 100%), var(--y)); 42 transform: translate(calc(var(--x) - 100%), var(--y));
43 } 43 }
44 } 44 }
45} 45}
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/_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/_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/_tabbar.scss b/src/objects/_tabbar.scss
index 131c832..a9daaae 100644
--- a/src/objects/_tabbar.scss
+++ b/src/objects/_tabbar.scss
@@ -9,105 +9,105 @@
9@use 'tabbar.vars' as vars; 9@use 'tabbar.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('tabbar') { 14 @include bem.object('tabbar') {
15 min-inline-size: 0; 15 min-inline-size: 0;
16 block-size: props.get(vars.$block-size); 16 block-size: props.get(vars.$block-size);
17 overflow: hidden; 17 overflow: hidden;
18 18
19 &::after { 19 &::after {
20 display: block; 20 display: block;
21 block-size: props.get(vars.$indicator--width); 21 block-size: props.get(vars.$indicator--width);
22 margin-block-start: calc(-1 * props.get(vars.$indicator--width)); 22 margin-block-start: calc(-1 * props.get(vars.$indicator--width));
23 content: ''; 23 content: '';
24 background-color: props.get(vars.$railing--bg-color); 24 background-color: props.get(vars.$railing--bg-color);
25 } 25 }
26 26
27 @include bem.elem('tabs') { 27 @include bem.elem('tabs') {
28 display: flex; 28 display: flex;
29 block-size: 100%; 29 block-size: 100%;
30 margin-inline: calc(-.5 * props.get(vars.$spacing)); 30 margin-inline: calc(-.5 * props.get(vars.$spacing));
31 overflow-inline: auto; 31 overflow-inline: auto;
32 } 32 }
33 33
34 @include bem.modifier('quiet') { 34 @include bem.modifier('quiet') {
35 box-shadow: none; 35 box-shadow: none;
36 } 36 }
37 37
38 @include bem.modifier('adapt') { 38 @include bem.modifier('adapt') {
39 block-size: 100%; 39 block-size: 100%;
40 } 40 }
41 41
42 @include bem.elem('tab') { 42 @include bem.elem('tab') {
43 position: relative; 43 position: relative;
44 display: flex; 44 display: flex;
45 align-items: center; 45 align-items: center;
46 padding-inline: calc(.5 * props.get(vars.$spacing)); 46 padding-inline: calc(.5 * props.get(vars.$spacing));
47 color: props.get(vars.$tab--text-color); 47 color: props.get(vars.$tab--text-color);
48 white-space: nowrap; 48 white-space: nowrap;
49 49
50 &::before { 50 &::before {
51 position: absolute; 51 position: absolute;
52 inset-block-start: 50%; 52 inset-block-start: 50%;
53 inset-inline: calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing)); 53 inset-inline: calc(-1 * props.get(vars.$tab--pad-i) + .5 * props.get(vars.$spacing));
54 z-index: -10; 54 z-index: -10;
55 block-size: 1.5em; 55 block-size: 1.5em;
56 content: ''; 56 content: '';
57 border-radius: props.get(vars.$rounding); 57 border-radius: props.get(vars.$rounding);
58 transform: translateY(-50%); 58 transform: translateY(-50%);
59 } 59 }
60 60
61 &::after { 61 &::after {
62 position: absolute; 62 position: absolute;
63 inset-block-end: 0; 63 inset-block-end: 0;
64 inset-inline: calc(.5 * props.get(vars.$spacing)); 64 inset-inline: calc(.5 * props.get(vars.$spacing));
65 z-index: 10; 65 z-index: 10;
66 display: none; 66 display: none;
67 block-size: props.get(vars.$indicator--width); 67 block-size: props.get(vars.$indicator--width);
68 content: ''; 68 content: '';
69 background-color: props.get(vars.$tab--selected--text-color); 69 background-color: props.get(vars.$tab--selected--text-color);
70 } 70 }
71 71
72 &:link, 72 &:link,
73 &:visited { 73 &:visited {
74 &:hover, 74 &:hover,
75 &:active, 75 &:active,
76 &:focus-visible { 76 &:focus-visible {
77 color: props.get(vars.$tab--selected--text-color); 77 color: props.get(vars.$tab--selected--text-color);
78 } 78 }
79 79
80 &:focus-visible { 80 &:focus-visible {
81 &::before { 81 &::before {
82 color: props.get(vars.$key-focus--text-color); 82 color: props.get(vars.$key-focus--text-color);
83 text-decoration: none; 83 text-decoration: none;
84 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 84 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
85 box-shadow: 0 0 0 85 box-shadow: 0 0 0
86 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 86 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
87 props.get(vars.$key-focus--outline-color); 87 props.get(vars.$key-focus--outline-color);
88 } 88 }
89 } 89 }
90 } 90 }
91 91
92 @include bem.is('selected') { 92 @include bem.is('selected') {
93 color: props.get(vars.$tab--selected--text-color); 93 color: props.get(vars.$tab--selected--text-color);
94 94
95 &::after { 95 &::after {
96 display: block; 96 display: block;
97 } 97 }
98 } 98 }
99 } 99 }
100 100
101 @include bem.modifier('accent') { 101 @include bem.modifier('accent') {
102 @include bem.elem('tab') { 102 @include bem.elem('tab') {
103 &::after { 103 &::after {
104 background-color: props.get(vars.$tab--accent--text-color); 104 background-color: props.get(vars.$tab--accent--text-color);
105 } 105 }
106 106
107 @include bem.is('selected') { 107 @include bem.is('selected') {
108 color: props.get(vars.$tab--accent--text-color); 108 color: props.get(vars.$tab--accent--text-color);
109 } 109 }
110 } 110 }
111 } 111 }
112 } 112 }
113} 113}
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/_text-field.scss b/src/objects/_text-field.scss
index a52050c..b89e148 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -7,181 +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.modifier('pill') { 123 @include bem.modifier('pill') {
124 @include bem.multi('&', 'elem' 'bg') { 124 @include bem.multi('&', 'elem' 'bg') {
125 border-radius: 100em; 125 border-radius: 100em;
126 } 126 }
127 127
128 @include bem.elem('native') { 128 @include bem.elem('native') {
129 padding-inline: props.get(vars.$pad-i-pill); 129 padding-inline: props.get(vars.$pad-i-pill);
130 130
131 &:focus { 131 &:focus {
132 @include bem.sibling-elem('bg') { 132 @include bem.sibling-elem('bg') {
133 border-radius: 100em; 133 border-radius: 100em;
134 } 134 }
135 } 135 }
136 } 136 }
137 137
138 @include bem.modifier('extended') { 138 @include bem.modifier('extended') {
139 @include bem.elem('native') { 139 @include bem.elem('native') {
140 padding-inline: props.get(vars.$pad-i); 140 padding-inline: props.get(vars.$pad-i);
141 } 141 }
142 } 142 }
143 } 143 }
144 144
145 @include bem.is('invalid') { 145 @include bem.is('invalid') {
146 @include bem.elem('native') { 146 @include bem.elem('native') {
147 @include -invalid; 147 @include -invalid;
148 148
149 &:focus-visible { 149 &:focus-visible {
150 @include -keyboard-focus; 150 @include -keyboard-focus;
151 } 151 }
152 } 152 }
153 } 153 }
154 154
155 @include bem.is('disabled') { 155 @include bem.is('disabled') {
156 background-color: props.get(vars.$disabled--bg-color); 156 background-color: props.get(vars.$disabled--bg-color);
157 157
158 @include bem.elem('native') { 158 @include bem.elem('native') {
159 color: props.get(vars.$disabled--text-color); 159 color: props.get(vars.$disabled--text-color);
160 160
161 &::placeholder { 161 &::placeholder {
162 color: props.get(vars.$disabled--placeholder-color); 162 color: props.get(vars.$disabled--placeholder-color);
163 } 163 }
164 } 164 }
165 165
166 @include bem.elem('bg') { 166 @include bem.elem('bg') {
167 border-color: props.get(vars.$disabled--border-color); 167 border-color: props.get(vars.$disabled--border-color);
168 } 168 }
169 169
170 @include bem.is('invalid') { 170 @include bem.is('invalid') {
171 @include bem.elem('native') { 171 @include bem.elem('native') {
172 @include bem.sibling-elem('bg') { 172 @include bem.sibling-elem('bg') {
173 border-color: props.get(vars.$disabled--border-color); 173 border-color: props.get(vars.$disabled--border-color);
174 } 174 }
175 } 175 }
176 } 176 }
177 177
178 @include bem.elem('native') { 178 @include bem.elem('native') {
179 &:invalid { 179 &:invalid {
180 @include bem.sibling-elem('bg') { 180 @include bem.sibling-elem('bg') {
181 border-color: props.get(vars.$disabled--border-color); 181 border-color: props.get(vars.$disabled--border-color);
182 } 182 }
183 } 183 }
184 } 184 }
185 } 185 }
186 } 186 }
187} 187}
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 60bf2e9..e49e52e 100644
--- a/src/objects/_thumbnail.vars.scss
+++ b/src/objects/_thumbnail.vars.scss
@@ -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}
diff --git a/src/scopes/_blockquotes.scss b/src/scopes/_blockquotes.scss
index 91a7785..a99add8 100644
--- a/src/scopes/_blockquotes.scss
+++ b/src/scopes/_blockquotes.scss
@@ -7,20 +7,20 @@
7@use 'blockquotes.vars' as vars; 7@use 'blockquotes.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.scope('blockquotes') { 12 @include bem.scope('blockquotes') {
13 blockquote { 13 blockquote {
14 padding-inline-start: calc(props.get(vars.$indent) - props.get(vars.$border-width)); 14 padding-inline-start: calc(props.get(vars.$indent) - props.get(vars.$border-width));
15 margin-block: props.get(vars.$margin-bs) 0; 15 margin-block: props.get(vars.$margin-bs) 0;
16 margin-inline: 1px 0; 16 margin-inline: 1px 0;
17 border-inline-start: props.get(vars.$border-width) solid props.get(vars.$border-color); 17 border-inline-start: props.get(vars.$border-width) solid props.get(vars.$border-color);
18 } 18 }
19 19
20 @include bem.modifier('compact') { 20 @include bem.modifier('compact') {
21 blockquote { 21 blockquote {
22 padding-inline-start: calc(props.get(vars.$compact--indent) - props.get(vars.$border-width)); 22 padding-inline-start: calc(props.get(vars.$compact--indent) - props.get(vars.$border-width));
23 } 23 }
24 } 24 }
25 } 25 }
26} 26}
diff --git a/src/scopes/_body.scss b/src/scopes/_body.scss
index 6d32212..f307f58 100644
--- a/src/scopes/_body.scss
+++ b/src/scopes/_body.scss
@@ -7,53 +7,53 @@
7@use 'body.vars' as vars; 7@use 'body.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.scope('body') { 12 @include bem.scope('body') {
13 font-size: props.get(vars.$font-size); 13 font-size: props.get(vars.$font-size);
14 line-height: props.get(vars.$line-height); 14 line-height: props.get(vars.$line-height);
15 15
16 strong { 16 strong {
17 color: props.get(vars.$strong--text-color); 17 color: props.get(vars.$strong--text-color);
18 } 18 }
19 19
20 p, 20 p,
21 ul, 21 ul,
22 ol { 22 ol {
23 max-inline-size: props.get(vars.$paragraph--max-inline-size); 23 max-inline-size: props.get(vars.$paragraph--max-inline-size);
24 margin-block-start: props.get(vars.$paragraph--margin-bs); 24 margin-block-start: props.get(vars.$paragraph--margin-bs);
25 } 25 }
26 26
27 ul, 27 ul,
28 ol { 28 ol {
29 box-sizing: border-box; 29 box-sizing: border-box;
30 } 30 }
31 31
32 img { 32 img {
33 display: block; 33 display: block;
34 inline-size: auto; 34 inline-size: auto;
35 max-inline-size: 100%; 35 max-inline-size: 100%;
36 block-size: auto; 36 block-size: auto;
37 max-block-size: props.get(vars.$img--max-block-size); 37 max-block-size: props.get(vars.$img--max-block-size);
38 margin-block-start: props.get(vars.$paragraph--margin-bs); 38 margin-block-start: props.get(vars.$paragraph--margin-bs);
39 } 39 }
40 40
41 figure { 41 figure {
42 margin-block-start: props.get(vars.$paragraph--margin-bs); 42 margin-block-start: props.get(vars.$paragraph--margin-bs);
43 43
44 img { 44 img {
45 margin-block: 0; 45 margin-block: 0;
46 } 46 }
47 } 47 }
48 48
49 hr { 49 hr {
50 margin-block: calc(2 * props.get(vars.$paragraph--margin-bs)); 50 margin-block: calc(2 * props.get(vars.$paragraph--margin-bs));
51 } 51 }
52 52
53 table, 53 table,
54 pre, 54 pre,
55 blockquote { 55 blockquote {
56 margin-block-start: props.get(vars.$paragraph--margin-bs); 56 margin-block-start: props.get(vars.$paragraph--margin-bs);
57 } 57 }
58 } 58 }
59} 59}
diff --git a/src/scopes/_code.scss b/src/scopes/_code.scss
index 9b2a63d..8147a14 100644
--- a/src/scopes/_code.scss
+++ b/src/scopes/_code.scss
@@ -7,34 +7,34 @@
7@use 'code.vars' as vars; 7@use 'code.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.scope('code') { 12 @include bem.scope('code') {
13 code { 13 code {
14 padding-block: props.get(vars.$inline--pad-b); 14 padding-block: props.get(vars.$inline--pad-b);
15 padding-inline: props.get(vars.$inline--pad-i); 15 padding-inline: props.get(vars.$inline--pad-i);
16 color: props.get(vars.$inline--fg); 16 color: props.get(vars.$inline--fg);
17 background-color: props.get(vars.$inline--bg); 17 background-color: props.get(vars.$inline--bg);
18 border-radius: props.get(vars.$inline--rounding); 18 border-radius: props.get(vars.$inline--rounding);
19 } 19 }
20 20
21 pre { 21 pre {
22 padding-block: props.get(vars.$block--pad-b); 22 padding-block: props.get(vars.$block--pad-b);
23 padding-inline: props.get(vars.$block--pad-i); 23 padding-inline: props.get(vars.$block--pad-i);
24 margin-block: props.get(vars.$block--margin-bs) 0; 24 margin-block: props.get(vars.$block--margin-bs) 0;
25 margin-inline: 0; 25 margin-inline: 0;
26 color: props.get(vars.$block--fg); 26 color: props.get(vars.$block--fg);
27 background-color: props.get(vars.$block--bg); 27 background-color: props.get(vars.$block--bg);
28 border-radius: props.get(vars.$block--rounding); 28 border-radius: props.get(vars.$block--rounding);
29 29
30 code { 30 code {
31 display: inline-block; 31 display: inline-block;
32 padding: 0; 32 padding: 0;
33 margin-inline-end: props.get(vars.$block--pad-i); 33 margin-inline-end: props.get(vars.$block--pad-i);
34 color: currentColor; 34 color: currentColor;
35 background-color: transparent; 35 background-color: transparent;
36 border-radius: 0; 36 border-radius: 0;
37 } 37 }
38 } 38 }
39 } 39 }
40} 40}
diff --git a/src/scopes/_figures.scss b/src/scopes/_figures.scss
index 981a8b6..d931820 100644
--- a/src/scopes/_figures.scss
+++ b/src/scopes/_figures.scss
@@ -4,18 +4,18 @@
4@use '../objects/figure.vars' as figure; 4@use '../objects/figure.vars' as figure;
5 5
6@mixin styles { 6@mixin styles {
7 @include bem.scope('figures') { 7 @include bem.scope('figures') {
8 figcaption { 8 figcaption {
9 padding-block: props.get(figure.$pad-b); 9 padding-block: props.get(figure.$pad-b);
10 font-size: props.get(figure.$font-size); 10 font-size: props.get(figure.$font-size);
11 color: props.get(figure.$text-color); 11 color: props.get(figure.$text-color);
12 border-block-end: props.get(figure.$border-width) solid props.get(figure.$border-color); 12 border-block-end: props.get(figure.$border-width) solid props.get(figure.$border-color);
13 13
14 &::before { 14 &::before {
15 display: block; 15 display: block;
16 margin-block: -100em 100em; 16 margin-block: -100em 100em;
17 content: ''; 17 content: '';
18 } 18 }
19 } 19 }
20 } 20 }
21} 21}
diff --git a/src/scopes/_headings.scss b/src/scopes/_headings.scss
index 32559cd..f8a7854 100644
--- a/src/scopes/_headings.scss
+++ b/src/scopes/_headings.scss
@@ -4,64 +4,64 @@
4@use '../objects/heading.vars' as heading; 4@use '../objects/heading.vars' as heading;
5 5
6@mixin styles { 6@mixin styles {
7 /* stylelint-disable-next-line scss/dollar-variable-pattern */ 7 /* stylelint-disable-next-line scss/dollar-variable-pattern */
8 $-size-map: ( 8 $-size-map: (
9 xs: h6, 9 xs: h6,
10 sm: h5, 10 sm: h5,
11 md: h4, 11 md: h4,
12 lg: h3, 12 lg: h3,
13 xl: h2, 13 xl: h2,
14 xxl: h1, 14 xxl: h1,
15 ); 15 );
16 16
17 @include bem.scope('headings') { 17 @include bem.scope('headings') {
18 h1, 18 h1,
19 h2, 19 h2,
20 h3, 20 h3,
21 h4, 21 h4,
22 h5, 22 h5,
23 h6 { 23 h6 {
24 display: block; 24 display: block;
25 margin-block-start: props.get(heading.$margin-bs); 25 margin-block-start: props.get(heading.$margin-bs);
26 font-family: props.get(heading.$font-family); 26 font-family: props.get(heading.$font-family);
27 font-weight: props.get(heading.$font-weight); 27 font-weight: props.get(heading.$font-weight);
28 font-feature-settings: props.get(heading.$feature-settings); 28 font-feature-settings: props.get(heading.$feature-settings);
29 line-height: props.get(heading.$line-height); 29 line-height: props.get(heading.$line-height);
30 text-transform: none; 30 text-transform: none;
31 letter-spacing: normal; 31 letter-spacing: normal;
32 transform: translateX(props.get(heading.$offset)); 32 transform: translateX(props.get(heading.$offset));
33 } 33 }
34 34
35 @include bem.elem('highlight') { 35 @include bem.elem('highlight') {
36 background-image: linear-gradient(to top, 36 background-image: linear-gradient(to top,
37 transparent .15em, 37 transparent .15em,
38 props.get(heading.$bg-color) .15em, 38 props.get(heading.$bg-color) .15em,
39 props.get(heading.$bg-color) .6em, 39 props.get(heading.$bg-color) .6em,
40 transparent .6em); 40 transparent .6em);
41 } 41 }
42 42
43 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$sizes { 43 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$sizes {
44 #{map.get($-size-map, $mod)} { 44 #{map.get($-size-map, $mod)} {
45 font-family: props.get($font-family); 45 font-family: props.get($font-family);
46 font-size: props.get($font-size); 46 font-size: props.get($font-size);
47 font-weight: props.get($font-weight); 47 font-weight: props.get($font-weight);
48 font-feature-settings: props.get($feature-settings); 48 font-feature-settings: props.get($feature-settings);
49 line-height: props.get($line-height); 49 line-height: props.get($line-height);
50 letter-spacing: props.get($letter-spacing); 50 letter-spacing: props.get($letter-spacing);
51 } 51 }
52 } 52 }
53 53
54 @include bem.modifier('display') { 54 @include bem.modifier('display') {
55 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$display--sizes { 55 @each $mod, $font-family, $line-height, $font-size, $font-weight, $letter-spacing, $feature-settings in heading.$display--sizes {
56 #{map.get($-size-map, $mod)} { 56 #{map.get($-size-map, $mod)} {
57 font-family: props.get($font-family); 57 font-family: props.get($font-family);
58 font-size: props.get($font-size); 58 font-size: props.get($font-size);
59 font-weight: props.get($font-weight); 59 font-weight: props.get($font-weight);
60 font-feature-settings: props.get($feature-settings); 60 font-feature-settings: props.get($feature-settings);
61 line-height: props.get($line-height); 61 line-height: props.get($line-height);
62 letter-spacing: props.get($letter-spacing); 62 letter-spacing: props.get($letter-spacing);
63 } 63 }
64 } 64 }
65 } 65 }
66 } 66 }
67} 67}
diff --git a/src/scopes/_implicit.scss b/src/scopes/_implicit.scss
index 78f06be..cee1639 100644
--- a/src/scopes/_implicit.scss
+++ b/src/scopes/_implicit.scss
@@ -11,170 +11,170 @@
11@use 'implicit.vars' as vars; 11@use 'implicit.vars' as vars;
12 12
13@mixin styles { 13@mixin styles {
14 @include materialize-at-root(meta.module-variables('vars')); 14 @include materialize-at-root(meta.module-variables('vars'));
15 15
16 @layer scope { 16 @layer scope {
17 html { 17 html {
18 accent-color: props.get(core.$theme, --accent, --600); 18 accent-color: props.get(core.$theme, --accent, --600);
19 scrollbar-color: props.get(core.$theme, --text-disabled) transparent; 19 scrollbar-color: props.get(core.$theme, --text-disabled) transparent;
20 } 20 }
21 21
22 body { 22 body {
23 padding: 0; 23 padding: 0;
24 margin: 0; 24 margin: 0;
25 font-family: props.get(vars.$body--font-family); 25 font-family: props.get(vars.$body--font-family);
26 font-size: props.get(vars.$body--font-size); 26 font-size: props.get(vars.$body--font-size);
27 font-feature-settings: props.get(vars.$body--feature-settings); 27 font-feature-settings: props.get(vars.$body--feature-settings);
28 line-height: props.get(vars.$body--line-height); 28 line-height: props.get(vars.$body--line-height);
29 color: props.get(core.$theme, --text); 29 color: props.get(core.$theme, --text);
30 background-color: props.get(core.$theme, --bg-base); 30 background-color: props.get(core.$theme, --bg-base);
31 } 31 }
32 32
33 pre, 33 pre,
34 code { 34 code {
35 font-family: props.get(vars.$code--font-family); 35 font-family: props.get(vars.$code--font-family);
36 font-size: props.get(vars.$code--font-size); 36 font-size: props.get(vars.$code--font-size);
37 font-feature-settings: props.get(vars.$code--feature-settings); 37 font-feature-settings: props.get(vars.$code--feature-settings);
38 line-height: props.get(vars.$code--line-height); 38 line-height: props.get(vars.$code--line-height);
39 } 39 }
40 40
41 pre { 41 pre {
42 margin: 0; 42 margin: 0;
43 overflow-x: auto; 43 overflow-x: auto;
44 44
45 code { 45 code {
46 font-size: 1em; 46 font-size: 1em;
47 color: currentColor; 47 color: currentColor;
48 } 48 }
49 } 49 }
50 50
51 h1, 51 h1,
52 h2, 52 h2,
53 h3, 53 h3,
54 h4, 54 h4,
55 h5, 55 h5,
56 h6 { 56 h6 {
57 margin-block: props.get(vars.$heading--margin-bs) 0; 57 margin-block: props.get(vars.$heading--margin-bs) 0;
58 font-family: props.get(vars.$heading--font-family); 58 font-family: props.get(vars.$heading--font-family);
59 font-size: props.get(vars.$heading--font-size); 59 font-size: props.get(vars.$heading--font-size);
60 font-weight: props.get(vars.$heading--font-weight); 60 font-weight: props.get(vars.$heading--font-weight);
61 font-feature-settings: props.get(vars.$heading--feature-settings); 61 font-feature-settings: props.get(vars.$heading--feature-settings);
62 line-height: props.get(vars.$heading--line-height); 62 line-height: props.get(vars.$heading--line-height);
63 color: props.get(vars.$heading--color); 63 color: props.get(vars.$heading--color);
64 64
65 & + & { 65 & + & {
66 margin-block-start: props.get(vars.$heading--margin-bs-sibling); 66 margin-block-start: props.get(vars.$heading--margin-bs-sibling);
67 } 67 }
68 } 68 }
69 69
70 p { 70 p {
71 margin-block: props.get(vars.$paragraph--margin-bs) 0; 71 margin-block: props.get(vars.$paragraph--margin-bs) 0;
72 72
73 &:empty { 73 &:empty {
74 display: none; 74 display: none;
75 } 75 }
76 } 76 }
77 77
78 strong { 78 strong {
79 font-weight: bold; 79 font-weight: bold;
80 } 80 }
81 81
82 small { 82 small {
83 font-size: props.get(vars.$small--font-size); 83 font-size: props.get(vars.$small--font-size);
84 } 84 }
85 85
86 ul, 86 ul,
87 ol { 87 ol {
88 padding: 0; 88 padding: 0;
89 margin: 0; 89 margin: 0;
90 list-style: none; 90 list-style: none;
91 } 91 }
92 92
93 li { 93 li {
94 padding: 0; 94 padding: 0;
95 margin: 0; 95 margin: 0;
96 } 96 }
97 97
98 :focus, 98 :focus,
99 :focus-visible { 99 :focus-visible {
100 outline: 0; 100 outline: 0;
101 } 101 }
102 102
103 :link, 103 :link,
104 :visited { 104 :visited {
105 color: currentColor; 105 color: currentColor;
106 text-decoration: none; 106 text-decoration: none;
107 } 107 }
108 108
109 109
110 button, 110 button,
111 input, 111 input,
112 textarea { 112 textarea {
113 box-sizing: content-box; 113 box-sizing: content-box;
114 padding: 0; 114 padding: 0;
115 margin: 0; 115 margin: 0;
116 font-family: inherit; 116 font-family: inherit;
117 font-size: 1em; 117 font-size: 1em;
118 font-style: inherit; 118 font-style: inherit;
119 font-weight: inherit; 119 font-weight: inherit;
120 line-height: inherit; 120 line-height: inherit;
121 color: currentColor; 121 color: currentColor;
122 text-align: inherit; 122 text-align: inherit;
123 text-transform: inherit; 123 text-transform: inherit;
124 appearance: none; 124 appearance: none;
125 background: none; 125 background: none;
126 border: 0; 126 border: 0;
127 127
128 &::-moz-focus-inner { 128 &::-moz-focus-inner {
129 border: 0; 129 border: 0;
130 } 130 }
131 } 131 }
132 132
133 input, 133 input,
134 textarea { 134 textarea {
135 &::placeholder { 135 &::placeholder {
136 color: props.get(core.$theme, --text-mute); 136 color: props.get(core.$theme, --text-mute);
137 opacity: 1; 137 opacity: 1;
138 } 138 }
139 139
140 &:disabled { 140 &:disabled {
141 color: props.get(core.$theme, --text-disabled); 141 color: props.get(core.$theme, --text-disabled);
142 } 142 }
143 } 143 }
144 144
145 textarea { 145 textarea {
146 block-size: calc(1em * props.get(core.$font--standard--line-height)); 146 block-size: calc(1em * props.get(core.$font--standard--line-height));
147 } 147 }
148 148
149 hr { 149 hr {
150 block-size: props.get(core.$border-width--thin); 150 block-size: props.get(core.$border-width--thin);
151 margin: 0; 151 margin: 0;
152 background-color: props.get(core.$theme, --border); 152 background-color: props.get(core.$theme, --border);
153 border: 0; 153 border: 0;
154 } 154 }
155 155
156 figure { 156 figure {
157 padding: 0; 157 padding: 0;
158 margin: 0; 158 margin: 0;
159 } 159 }
160 160
161 @each $theme in map.keys(props.get(core.$transparent-colors)) { 161 @each $theme in map.keys(props.get(core.$transparent-colors)) {
162 .t-static-#{string.slice($theme, 3)} { 162 .t-static-#{string.slice($theme, 3)} {
163 color: props.get(core.$transparent-colors, $theme, --800); 163 color: props.get(core.$transparent-colors, $theme, --800);
164 164
165 h1, 165 h1,
166 h2, 166 h2,
167 h3, 167 h3,
168 h4, 168 h4,
169 h5, 169 h5,
170 h6 { 170 h6 {
171 color: props.get(core.$transparent-colors, $theme, --900); 171 color: props.get(core.$transparent-colors, $theme, --900);
172 } 172 }
173 173
174 hr { 174 hr {
175 color: props.get(core.$transparent-colors, $theme, --400); 175 color: props.get(core.$transparent-colors, $theme, --400);
176 } 176 }
177 } 177 }
178 } 178 }
179 } 179 }
180} 180}
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 4ff242c..9ade0c2 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -9,111 +9,111 @@
9@use 'links.vars' as vars; 9@use 'links.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.scope('links') { 14 @include bem.scope('links') {
15 :link, 15 :link,
16 :visited { 16 :visited {
17 color: currentColor; 17 color: currentColor;
18 text-decoration: underline; 18 text-decoration: underline;
19 text-decoration-thickness: props.get(vars.$underline-width); 19 text-decoration-thickness: props.get(vars.$underline-width);
20 text-decoration-color: props.get(vars.$underline-color); 20 text-decoration-color: props.get(vars.$underline-color);
21 border-radius: props.get(vars.$rounding-sm); 21 border-radius: props.get(vars.$rounding-sm);
22 box-decoration-break: clone; 22 box-decoration-break: clone;
23 23
24 &:hover { 24 &:hover {
25 text-decoration: underline; 25 text-decoration: underline;
26 text-decoration-skip-ink: none; 26 text-decoration-thickness: props.get(vars.$hover--underline-width);
27 text-decoration-thickness: props.get(vars.$hover--underline-width); 27 text-decoration-skip-ink: none;
28 } 28 }
29 29
30 &:focus-visible { 30 &:focus-visible {
31 color: props.get(vars.$key-focus--text-color); 31 color: props.get(vars.$key-focus--text-color);
32 text-decoration: none; 32 text-decoration: none;
33 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width); 33 outline: props.get(vars.$key-focus--border-color) solid props.get(vars.$key-focus--border-width);
34 box-shadow: 34 box-shadow:
35 0 35 0
36 0 36 0
37 0 37 0
38 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 38 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
39 props.get(vars.$key-focus--outline-color); 39 props.get(vars.$key-focus--outline-color);
40 } 40 }
41 } 41 }
42 42
43 @include bem.modifier('invisible') { 43 @include bem.modifier('invisible') {
44 :link, 44 :link,
45 :visited { 45 :visited {
46 text-decoration: none; 46 text-decoration: none;
47 } 47 }
48 } 48 }
49 49
50 @include bem.modifier('colored') { 50 @include bem.modifier('colored') {
51 :link { 51 :link {
52 color: props.get(vars.$colored--text-color); 52 color: props.get(vars.$colored--text-color);
53 text-decoration-color: props.get(vars.$colored--underline-color); 53 text-decoration-color: props.get(vars.$colored--underline-color);
54 54
55 &:hover { 55 &:hover {
56 color: props.get(vars.$colored--hover--text-color); 56 color: props.get(vars.$colored--hover--text-color);
57 } 57 }
58 } 58 }
59 59
60 :visited { 60 :visited {
61 color: props.get(vars.$colored--visited--text-color); 61 color: props.get(vars.$colored--visited--text-color);
62 text-decoration-color: props.get(vars.$colored--visited--underline-color); 62 text-decoration-color: props.get(vars.$colored--visited--underline-color);
63 63
64 &:hover { 64 &:hover {
65 color: props.get(vars.$colored--visited--hover--text-color); 65 color: props.get(vars.$colored--visited--hover--text-color);
66 } 66 }
67 } 67 }
68 } 68 }
69 69
70 @each $theme in map.keys(props.get(vars.$static-themes)) { 70 @each $theme in map.keys(props.get(vars.$static-themes)) {
71 @include bem.modifier(string.slice($theme, 3)) { 71 @include bem.modifier(string.slice($theme, 3)) {
72 :link, 72 :link,
73 :visited { 73 :visited {
74 color: props.get(vars.$static-themes, $theme, --text-color); 74 color: props.get(vars.$static-themes, $theme, --text-color);
75 text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color); 75 text-decoration-color: props.get(vars.$static-themes, $theme, --underline-color);
76 76
77 &:hover { 77 &:hover {
78 color: props.get(vars.$static-themes, $theme, --hover, --text-color); 78 color: props.get(vars.$static-themes, $theme, --hover, --text-color);
79 } 79 }
80 80
81 &:focus-visible { 81 &:focus-visible {
82 color: props.get(vars.$static-themes, $theme, --key-focus, --text-color); 82 color: props.get(vars.$static-themes, $theme, --key-focus, --text-color);
83 outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color); 83 outline-color: props.get(vars.$static-themes, $theme, --key-focus, --border-color);
84 box-shadow: 84 box-shadow:
85 0 85 0
86 0 86 0
87 0 87 0
88 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 88 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
89 props.get(vars.$static-themes, $theme, --key-focus, --outline-color); 89 props.get(vars.$static-themes, $theme, --key-focus, --outline-color);
90 } 90 }
91 } 91 }
92 } 92 }
93 } 93 }
94 94
95 @include bem.elem('image') { 95 @include bem.elem('image') {
96 img { 96 img {
97 margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset)); 97 margin-inline: calc(-1 * props.get(vars.$key-focus--border-offset));
98 border: props.get(vars.$key-focus--border-offset) solid transparent; 98 border: props.get(vars.$key-focus--border-offset) solid transparent;
99 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset)); 99 border-radius: calc(props.get(vars.$rounding) + props.get(vars.$key-focus--border-offset));
100 } 100 }
101 101
102 &:link, 102 &:link,
103 &:visited { 103 &:visited {
104 &:focus-visible { 104 &:focus-visible {
105 outline: none; 105 outline: none;
106 box-shadow: none; 106 box-shadow: none;
107 107
108 img { 108 img {
109 outline: props.get(vars.$key-focus--border-color) solid 109 outline: props.get(vars.$key-focus--border-color) solid
110 props.get(vars.$key-focus--border-width); 110 props.get(vars.$key-focus--border-width);
111 box-shadow: 0 0 0 111 box-shadow: 0 0 0
112 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width)) 112 calc(props.get(vars.$key-focus--border-width) + props.get(vars.$key-focus--outline-width))
113 props.get(vars.$key-focus--outline-color); 113 props.get(vars.$key-focus--outline-color);
114 } 114 }
115 } 115 }
116 } 116 }
117 } 117 }
118 } 118 }
119} 119}
diff --git a/src/scopes/_links.vars.scss b/src/scopes/_links.vars.scss
index ac7815a..c69cc32 100644
--- a/src/scopes/_links.vars.scss
+++ b/src/scopes/_links.vars.scss
@@ -28,22 +28,22 @@ $key-focus--outline-color: props.def(--s-links--key-focus--outline-color, props.
28 28
29$static-themes: props.def(--s-links, (), 'color'); 29$static-themes: props.def(--s-links, (), 'color');
30@each $theme in map.keys(props.get(core.$transparent-colors)) { 30@each $theme in map.keys(props.get(core.$transparent-colors)) {
31 $link-theme: --static-#{string.slice($theme, 3)}; 31 $link-theme: --static-#{string.slice($theme, 3)};
32 32
33 $static-themes: props.merge($static-themes, ( 33 $static-themes: props.merge($static-themes, (
34 $link-theme: ( 34 $link-theme: (
35 --text-color: currentColor, 35 --text-color: currentColor,
36 --underline-color: props.get(core.$transparent-colors, $theme, --500), 36 --underline-color: props.get(core.$transparent-colors, $theme, --500),
37 37
38 --hover: ( 38 --hover: (
39 --text-color: props.get(core.$transparent-colors, $theme, --900), 39 --text-color: props.get(core.$transparent-colors, $theme, --900),
40 ), 40 ),
41 41
42 --key-focus: ( 42 --key-focus: (
43 --text-color: props.get(core.$transparent-colors, $theme, --900), 43 --text-color: props.get(core.$transparent-colors, $theme, --900),
44 --border-color: props.get(core.$transparent-colors, $theme, --900), 44 --border-color: props.get(core.$transparent-colors, $theme, --900),
45 --outline-color: props.get(core.$transparent-colors, $theme, --300), 45 --outline-color: props.get(core.$transparent-colors, $theme, --300),
46 ), 46 ),
47 ) 47 )
48 )); 48 ));
49} 49}
diff --git a/src/scopes/_lists.scss b/src/scopes/_lists.scss
index 98b1df1..fc8a577 100644
--- a/src/scopes/_lists.scss
+++ b/src/scopes/_lists.scss
@@ -8,53 +8,53 @@
8@use 'lists.vars' as vars; 8@use 'lists.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.scope('lists') { 13 @include bem.scope('lists') {
14 ul, 14 ul,
15 ol { 15 ol {
16 padding-inline-start: props.get(vars.$indent); 16 padding-inline-start: props.get(vars.$indent);
17 margin-block-start: props.get(vars.$margin-bs); 17 margin-block-start: props.get(vars.$margin-bs);
18 18
19 ul, 19 ul,
20 ol { 20 ol {
21 margin-block-start: 0; 21 margin-block-start: 0;
22 } 22 }
23 } 23 }
24 24
25 ul { 25 ul {
26 list-style: disc; 26 list-style: disc;
27 } 27 }
28 28
29 ol { 29 ol {
30 list-style: decimal; 30 list-style: decimal;
31 } 31 }
32 32
33 dl { 33 dl {
34 padding: 0; 34 padding: 0;
35 margin-block: props.get(vars.$margin-bs) 0; 35 margin-block: props.get(vars.$margin-bs) 0;
36 margin-inline: 0; 36 margin-inline: 0;
37 } 37 }
38 38
39 dt { 39 dt {
40 font-weight: bold; 40 font-weight: bold;
41 color: props.get(core.$theme, --heading); 41 color: props.get(core.$theme, --heading);
42 } 42 }
43 43
44 dd { 44 dd {
45 margin-block: 0; 45 margin-block: 0;
46 margin-inline: props.get(vars.$indent) 0; 46 margin-inline: props.get(vars.$indent) 0;
47 } 47 }
48 48
49 @include bem.modifier('compact') { 49 @include bem.modifier('compact') {
50 ul, 50 ul,
51 ol { 51 ol {
52 padding-inline-start: calc(props.get(vars.$compact--indent) - 3px); 52 padding-inline-start: calc(props.get(vars.$compact--indent) - 3px);
53 } 53 }
54 54
55 dd { 55 dd {
56 margin-inline-start: calc(props.get(vars.$compact--indent) - 3px); 56 margin-inline-start: calc(props.get(vars.$compact--indent) - 3px);
57 } 57 }
58 } 58 }
59 } 59 }
60} 60}
diff --git a/src/scopes/_tables.scss b/src/scopes/_tables.scss
index 0a87eaa..5b64301 100644
--- a/src/scopes/_tables.scss
+++ b/src/scopes/_tables.scss
@@ -8,95 +8,95 @@
8@use 'tables.vars' as vars; 8@use 'tables.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.scope('tables') { 13 @include bem.scope('tables') {
14 table { 14 table {
15 margin-block-start: props.get(vars.$margin-bs); 15 margin-block-start: props.get(vars.$margin-bs);
16 border-spacing: 0; 16 border-spacing: 0;
17 border-collapse: separate; 17 border-collapse: separate;
18 } 18 }
19 19
20 th { 20 th {
21 padding-block: props.get(table.$pad-b); 21 padding-block: props.get(table.$pad-b);
22 padding-inline: props.get(table.$pad-i); 22 padding-inline: props.get(table.$pad-i);
23 font-family: props.get(table.$heading--font-family); 23 font-family: props.get(table.$heading--font-family);
24 font-size: props.get(table.$heading--font-size); 24 font-size: props.get(table.$heading--font-size);
25 font-weight: props.get(table.$heading--font-weight); 25 font-weight: props.get(table.$heading--font-weight);
26 color: props.get(table.$heading-color); 26 color: props.get(table.$heading-color);
27 text-align: start; 27 text-align: start;
28 text-transform: props.get(table.$heading--text-transform); 28 text-transform: props.get(table.$heading--text-transform);
29 letter-spacing: props.get(table.$heading--letter-spacing); 29 letter-spacing: props.get(table.$heading--letter-spacing);
30 } 30 }
31 31
32 td { 32 td {
33 padding-block: props.get(table.$pad-b); 33 padding-block: props.get(table.$pad-b);
34 padding-inline: props.get(table.$pad-i); 34 padding-inline: props.get(table.$pad-i);
35 border-color: props.get(table.$border-color); 35 border-color: props.get(table.$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(table.$border-width); 38 border-block-start-width: props.get(table.$border-width);
39 } 39 }
40 40
41 tr { 41 tr {
42 &:last-child { 42 &:last-child {
43 td { 43 td {
44 border-block-end-width: props.get(table.$border-width); 44 border-block-end-width: props.get(table.$border-width);
45 } 45 }
46 } 46 }
47 } 47 }
48 48
49 @include bem.modifier('flush') { 49 @include bem.modifier('flush') {
50 th, 50 th,
51 td { 51 td {
52 &:first-child { 52 &:first-child {
53 padding-inline-start: 0; 53 padding-inline-start: 0;
54 } 54 }
55 55
56 &:last-child { 56 &:last-child {
57 padding-inline-end: 0; 57 padding-inline-end: 0;
58 } 58 }
59 } 59 }
60 } 60 }
61 61
62 @include bem.modifier('box') { 62 @include bem.modifier('box') {
63 td { 63 td {
64 background-color: props.get(table.$box--bg-color); 64 background-color: props.get(table.$box--bg-color);
65 65
66 &:first-child { 66 &:first-child {
67 border-inline-start-width: props.get(table.$border-width); 67 border-inline-start-width: props.get(table.$border-width);
68 } 68 }
69 69
70 &:last-child { 70 &:last-child {
71 border-inline-end-width: props.get(table.$border-width); 71 border-inline-end-width: props.get(table.$border-width);
72 } 72 }
73 } 73 }
74 74
75 tr { 75 tr {
76 &:first-child { 76 &:first-child {
77 td { 77 td {
78 &:first-child { 78 &:first-child {
79 border-start-start-radius: props.get(table.$rounding); 79 border-start-start-radius: props.get(table.$rounding);
80 } 80 }
81 81
82 &:last-child { 82 &:last-child {
83 border-start-end-radius: props.get(table.$rounding); 83 border-start-end-radius: props.get(table.$rounding);
84 } 84 }
85 } 85 }
86 } 86 }
87 87
88 &:last-child { 88 &:last-child {
89 td { 89 td {
90 &:first-child { 90 &:first-child {
91 border-end-start-radius: props.get(table.$rounding); 91 border-end-start-radius: props.get(table.$rounding);
92 } 92 }
93 93
94 &:last-child { 94 &:last-child {
95 border-end-end-radius: props.get(table.$rounding); 95 border-end-end-radius: props.get(table.$rounding);
96 } 96 }
97 } 97 }
98 } 98 }
99 } 99 }
100 } 100 }
101 } 101 }
102} 102}
generated by cgit v1.2.3-70-g09d2 (git 2.50.0) at 2025-08-12 08:53:38 +0000