summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-25 17:39:03 +0200
committerVolpeon <git@volpeon.ink>2024-06-25 17:39:03 +0200
commit4de75e0f305b2cb4a026073440f2bac7c34df817 (patch)
tree628f71b6f917bb9357ae14d018149509db655e4e /src/objects
parentUpdate (diff)
downloadiro-design-4de75e0f305b2cb4a026073440f2bac7c34df817.tar.gz
iro-design-4de75e0f305b2cb4a026073440f2bac7c34df817.tar.bz2
iro-design-4de75e0f305b2cb4a026073440f2bac7c34df817.zip
Focus indicator style
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_badge.scss48
-rw-r--r--src/objects/_button.scss47
-rw-r--r--src/objects/_checkbox.scss74
-rw-r--r--src/objects/_radio.scss62
-rw-r--r--src/objects/_switch.scss67
-rw-r--r--src/objects/_table.scss167
-rw-r--r--src/objects/_text-field.scss8
7 files changed, 313 insertions, 160 deletions
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index b9020b6..cc7e500 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -12,7 +12,8 @@ $static-themes: 'black' 'white' !default;
12 &:link, 12 &:link,
13 &:visited, 13 &:visited,
14 &:enabled { 14 &:enabled {
15 &:hover { 15 &:hover,
16 &:focus-visible {
16 background-color: fn.color(--#{$theme} --hover --bg); 17 background-color: fn.color(--#{$theme} --hover --bg);
17 color: fn.color(--#{$theme} --hover --label); 18 color: fn.color(--#{$theme} --hover --label);
18 } 19 }
@@ -30,7 +31,8 @@ $static-themes: 'black' 'white' !default;
30 &:link, 31 &:link,
31 &:visited, 32 &:visited,
32 &:enabled { 33 &:enabled {
33 &:hover { 34 &:hover,
35 &:focus-visible {
34 background-color: fn.color(--#{$theme}-quiet --hover --bg); 36 background-color: fn.color(--#{$theme}-quiet --hover --bg);
35 color: fn.color(--#{$theme}-quiet --hover --label); 37 color: fn.color(--#{$theme}-quiet --hover --label);
36 } 38 }
@@ -47,10 +49,8 @@ $static-themes: 'black' 'white' !default;
47 &:visited, 49 &:visited,
48 &:enabled { 50 &:enabled {
49 &:focus-visible { 51 &:focus-visible {
50 border-color: fn.color(--#{$theme} --key-focus --border); 52 outline: fn.color(--#{$theme} --key-focus --border) solid fn.dim(--key-focus --border);
51 outline: fn.color(--#{$theme} --key-focus --outline) solid fn.dim(--key-focus --outline); 53 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--#{$theme} --key-focus --outline);
52 background-color: fn.color(--#{$theme} --key-focus --bg);
53 color: fn.color(--#{$theme} --key-focus --label);
54 } 54 }
55 } 55 }
56 } 56 }
@@ -85,8 +85,9 @@ $static-themes: 'black' 'white' !default;
85 ), 85 ),
86 86
87 --key-focus: ( 87 --key-focus: (
88 --border: fn.global-dim(--border --medium), 88 --border: fn.global-dim(--key-focus --border),
89 --outline: fn.global-dim(--key-focus --border), 89 --border-offset: fn.global-dim(--key-focus --border-offset),
90 --outline: fn.global-dim(--key-focus --outline),
90 ), 91 ),
91 ), 92 ),
92 --colors: ( 93 --colors: (
@@ -99,10 +100,9 @@ $static-themes: 'black' 'white' !default;
99 --bg: fn.global-color(--heading), 100 --bg: fn.global-color(--heading),
100 ), 101 ),
101 --key-focus: ( 102 --key-focus: (
102 --bg: fn.global-color(--base --50), 103 --label: fn.global-color(--focus --text),
103 --label: fn.global-color(--heading), 104 --border: fn.global-color(--focus --border),
104 --border: fn.global-color(--focus --1100), 105 --outline: fn.global-color(--focus --outline),
105 --outline: fn.global-color(--focus --400),
106 ), 106 ),
107 107
108 --quiet: ( 108 --quiet: (
@@ -190,11 +190,13 @@ $static-themes: 'black' 'white' !default;
190 190
191 @include iro.bem-object(iro.props-namespace()) { 191 @include iro.bem-object(iro.props-namespace()) {
192 display: inline-block; 192 display: inline-block;
193 padding-block: calc(fn.dim(--pad-b) - fn.dim(--key-focus --border)); 193 margin: calc(-1 * fn.dim(--key-focus --border));
194 padding-inline: calc(fn.dim(--pad-i) - fn.dim(--key-focus --border)); 194 padding-block: fn.dim(--pad-b);
195 padding-inline: fn.dim(--pad-i);
195 border: fn.dim(--key-focus --border) solid transparent; 196 border: fn.dim(--key-focus --border) solid transparent;
196 border-radius: fn.dim(--rounding); 197 border-radius: calc(fn.dim(--rounding) + fn.dim(--key-focus --border));
197 background-color: fn.color(--bg); 198 background-color: fn.color(--bg);
199 background-clip: padding-box;
198 color: fn.color(--label); 200 color: fn.color(--label);
199 font-size: fn.dim(--font-size); 201 font-size: fn.dim(--font-size);
200 line-height: fn.global-dim(--font --standard --line-height); 202 line-height: fn.global-dim(--font --standard --line-height);
@@ -204,7 +206,8 @@ $static-themes: 'black' 'white' !default;
204 &:link, 206 &:link,
205 &:visited, 207 &:visited,
206 &:enabled { 208 &:enabled {
207 &:hover { 209 &:hover,
210 &:focus-visible {
208 background-color: fn.color(--hover --bg); 211 background-color: fn.color(--hover --bg);
209 } 212 }
210 213
@@ -220,7 +223,8 @@ $static-themes: 'black' 'white' !default;
220 &:link, 223 &:link,
221 &:visited, 224 &:visited,
222 &:enabled { 225 &:enabled {
223 &:hover { 226 &:hover,
227 &:focus-visible {
224 background-color: fn.color(--quiet --hover --bg); 228 background-color: fn.color(--quiet --hover --bg);
225 } 229 }
226 230
@@ -240,10 +244,8 @@ $static-themes: 'black' 'white' !default;
240 &:visited, 244 &:visited,
241 &:enabled { 245 &:enabled {
242 &:focus-visible { 246 &:focus-visible {
243 border-color: fn.color(--key-focus --border); 247 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
244 outline: fn.color(--key-focus --outline) solid fn.dim(--key-focus --outline); 248 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
245 background-color: fn.color(--key-focus --bg);
246 color: fn.color(--key-focus --label);
247 } 249 }
248 } 250 }
249 251
@@ -260,8 +262,8 @@ $static-themes: 'black' 'white' !default;
260 262
261 @each $size in sm lg xl { 263 @each $size in sm lg xl {
262 @include iro.bem-modifier($size) { 264 @include iro.bem-modifier($size) {
263 padding-block: calc(fn.dim(--#{$size} --pad-b) - fn.dim(--key-focus --border)); 265 padding-block: fn.dim(--#{$size} --pad-b);
264 padding-inline: calc(fn.dim(--#{$size} --pad-i) - fn.dim(--key-focus --border)); 266 padding-inline: fn.dim(--#{$size} --pad-i);
265 font-size: fn.dim(--#{$size} --font-size); 267 font-size: fn.dim(--#{$size} --font-size);
266 268
267 @include iro.bem-modifier('pill') { 269 @include iro.bem-modifier('pill') {
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 08dc0ea..49f3f67 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -29,7 +29,8 @@ $static-themes: 'black' 'white' !default;
29 &:link, 29 &:link,
30 &:visited, 30 &:visited,
31 &:enabled { 31 &:enabled {
32 &:hover { 32 &:hover,
33 &:focus-visible {
33 border-color: transparent; 34 border-color: transparent;
34 background-color: fn.color(list.join($key, --hover --bg)); 35 background-color: fn.color(list.join($key, --hover --bg));
35 color: fn.color(list.join($key, --hover --label)); 36 color: fn.color(list.join($key, --hover --label));
@@ -58,15 +59,9 @@ $static-themes: 'black' 'white' !default;
58 59
59 @include theme(static-#{$theme}); 60 @include theme(static-#{$theme});
60 61
61 &:link, 62 &::after {
62 &:visited, 63 outline: fn.color(list.join($key, --key-focus --border)) solid fn.dim(--key-focus --border);
63 &:enabled { 64 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($key, --key-focus --outline));
64 &:focus-visible {
65 border-color: fn.color(list.join($key, --key-focus --border));
66 outline: fn.color(list.join($key, --key-focus --outline)) solid fn.dim(--key-focus --outline);
67 background-color: fn.color(list.join($key, --key-focus --bg));
68 color: fn.color(list.join($key, --key-focus --label));
69 }
70 } 65 }
71} 66}
72 67
@@ -97,7 +92,9 @@ $static-themes: 'black' 'white' !default;
97 ), 92 ),
98 93
99 --key-focus: ( 94 --key-focus: (
100 --outline: fn.global-dim(--key-focus --border), 95 --border: fn.global-dim(--key-focus --border),
96 --border-offset: fn.global-dim(--key-focus --border-offset),
97 --outline: fn.global-dim(--key-focus --outline),
101 ), 98 ),
102 ), 99 ),
103 --colors: ( 100 --colors: (
@@ -120,10 +117,9 @@ $static-themes: 'black' 'white' !default;
120 --label: fn.global-color(--text-disabled), 117 --label: fn.global-color(--text-disabled),
121 ), 118 ),
122 --key-focus: ( 119 --key-focus: (
123 --bg: fn.global-color(--base --50), 120 --label: fn.global-color(--focus --text),
124 --label: fn.global-color(--heading), 121 --border: fn.global-color(--focus --border),
125 --border: fn.global-color(--focus --1100), 122 --outline: fn.global-color(--focus --outline),
126 --outline: fn.global-color(--focus --400),
127 ), 123 ),
128 124
129 --primary: ( 125 --primary: (
@@ -216,6 +212,7 @@ $static-themes: 'black' 'white' !default;
216 212
217 @include iro.bem-object(iro.props-namespace()) { 213 @include iro.bem-object(iro.props-namespace()) {
218 display: inline-block; 214 display: inline-block;
215 position: relative;
219 padding-block: fn.dim(--pad-b); 216 padding-block: fn.dim(--pad-b);
220 padding-inline: fn.dim(--pad-i); 217 padding-inline: fn.dim(--pad-i);
221 border: fn.dim(--border) solid transparent; 218 border: fn.dim(--border) solid transparent;
@@ -228,6 +225,19 @@ $static-themes: 'black' 'white' !default;
228 line-height: fn.dim(--line-height); 225 line-height: fn.dim(--line-height);
229 text-align: center; 226 text-align: center;
230 text-decoration: none; 227 text-decoration: none;
228
229 &::after {
230 content: '';
231 display: none;
232 position: absolute;
233 z-index: 1;
234 inset-block: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset));
235 inset-inline: calc(-1 * fn.dim(--border) - fn.dim(--key-focus --border-offset));
236 border-radius: fn.dim(--rounding);
237 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
238 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
239 pointer-events: none;
240 }
231 241
232 @include iro.bem-modifier('block') { 242 @include iro.bem-modifier('block') {
233 display: block; 243 display: block;
@@ -263,10 +273,9 @@ $static-themes: 'black' 'white' !default;
263 &:visited, 273 &:visited,
264 &:enabled { 274 &:enabled {
265 &:focus-visible { 275 &:focus-visible {
266 border-color: fn.color(--key-focus --border); 276 &::after {
267 outline: fn.color(--key-focus --outline) solid fn.dim(--key-focus --outline); 277 display: block;
268 background-color: fn.color(--key-focus --bg); 278 }
269 color: fn.color(--key-focus --label);
270 } 279 }
271 } 280 }
272 281
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index a254ec4..509822b 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -11,14 +11,20 @@
11 --pad-b: fn.global-dim(--size --65), 11 --pad-b: fn.global-dim(--size --65),
12 --rounding: fn.global-dim(--rounding), 12 --rounding: fn.global-dim(--rounding),
13 --spacing-sibling: fn.global-dim(--size --300), 13 --spacing-sibling: fn.global-dim(--size --300),
14
15 --key-focus: (
16 --border: fn.global-dim(--key-focus --border),
17 --border-offset: fn.global-dim(--key-focus --border-offset),
18 --outline: fn.global-dim(--key-focus --border),
19 ),
14 ), 20 ),
15 --colors: ( 21 --colors: (
16 --box-border: fn.global-color(--text-mute), 22 --box-border: fn.global-color(--text-mute-more),
17 --box-bg: fn.global-color(--base --75), 23 --box-bg: fn.global-color(--base --75),
18 24
19 --hover: ( 25 --hover: (
20 --label: fn.global-color(--heading), 26 --label: fn.global-color(--heading),
21 --box-border: fn.global-color(--text), 27 --box-border: fn.global-color(--text-mute),
22 ), 28 ),
23 --accent: ( 29 --accent: (
24 --box-border: fn.global-color(--accent --900), 30 --box-border: fn.global-color(--accent --900),
@@ -27,37 +33,40 @@
27 --box-border: fn.global-color(--accent --1000), 33 --box-border: fn.global-color(--accent --1000),
28 ), 34 ),
29 ), 35 ),
30 --key-focus: (
31 --bg: fn.global-color(--focus-static --400),
32 --label: fn.global-color(--focus-static --400-text),
33 --box-border: fn.global-color(--focus-static --1000),
34 --box-bg: fn.global-color(--focus-static --1000-text),
35 ),
36 --disabled: ( 36 --disabled: (
37 --label: fn.global-color(--text-disabled), 37 --label: fn.global-color(--text-disabled),
38 --box-border: fn.global-color(--border-strong), 38 --box-border: fn.global-color(--border-strong),
39 --box-bg: fn.global-color(--base --75), 39 --box-bg: fn.global-color(--base --75),
40 ) 40 ),
41 --key-focus: (
42 --label: fn.global-color(--focus --text),
43 --border: fn.global-color(--focus --border),
44 --outline: fn.global-color(--focus --outline),
45 ),
41 ), 46 ),
42 )); 47 ));
43 48
44 @include iro.bem-object(iro.props-namespace()) { 49 @include iro.bem-object(iro.props-namespace()) {
45 display: inline-flex; 50 display: inline-block;
46 position: relative; 51 position: relative;
47 align-items: flex-start; 52 margin-inline:
48 margin-inline: calc(-1 * fn.dim(--pad-i)) calc(fn.dim(--spacing-sibling) - fn.dim(--pad-b)); 53 calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset))
54 calc(fn.dim(--spacing-sibling) - fn.dim(--pad-b) - fn.dim(--key-focus --border-offset));
49 padding-block: fn.dim(--pad-b); 55 padding-block: fn.dim(--pad-b);
50 padding-inline: fn.dim(--pad-i); 56 padding-inline: fn.dim(--pad-i);
51 57
52 @include iro.bem-elem('box') { 58 @include iro.bem-elem('box') {
53 display: block; 59 display: inline-block;
54 position: relative; 60 position: relative;
55 flex: 0 0 auto; 61 flex: 0 0 auto;
56 inline-size: fn.dim(--size); 62 inline-size: fn.dim(--size);
57 block-size: fn.dim(--size); 63 block-size: fn.dim(--size);
58 margin-block-start: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--size))); 64 margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--size) - fn.dim(--key-focus --border-offset));
59 border-radius: fn.dim(--border); 65 border: fn.dim(--key-focus --border-offset) solid transparent;
66 border-radius: calc(fn.dim(--border) + fn.dim(--key-focus --border-offset));
60 background-color: fn.color(--box-border); 67 background-color: fn.color(--box-border);
68 background-clip: padding-box;
69 vertical-align: top;
61 70
62 &::before, 71 &::before,
63 &::after { 72 &::after {
@@ -110,8 +119,7 @@
110 } 119 }
111 120
112 @include iro.bem-elem('label') { 121 @include iro.bem-elem('label') {
113 align-self: baseline; 122 margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset));
114 margin-left: fn.dim(--label-gap);
115 } 123 }
116 124
117 @include iro.bem-elem('native') { 125 @include iro.bem-elem('native') {
@@ -127,7 +135,8 @@
127 overflow: hidden; 135 overflow: hidden;
128 border-radius: fn.dim(--rounding); 136 border-radius: fn.dim(--rounding);
129 137
130 &:hover { 138 &:hover,
139 &:focus-visible {
131 @include iro.bem-sibling-elem('label') { 140 @include iro.bem-sibling-elem('label') {
132 color: fn.color(--hover --label); 141 color: fn.color(--hover --label);
133 } 142 }
@@ -180,26 +189,13 @@
180 } 189 }
181 190
182 &:focus-visible { 191 &:focus-visible {
183 background-color: fn.color(--key-focus --bg);
184
185 @include iro.bem-sibling-elem('label') { 192 @include iro.bem-sibling-elem('label') {
186 color: fn.color(--key-focus --label); 193 color: fn.color(--key-focus --label);
187 } 194 }
188 195
189 @include iro.bem-sibling-elem('box') { 196 @include iro.bem-sibling-elem('box') {
190 background-color: fn.color(--key-focus --box-border); 197 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
191 198 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
192 &::before {
193 background-color: fn.color(--key-focus --box-bg);
194 }
195
196 &::after {
197 border-color: fn.color(--key-focus --box-bg);
198 }
199
200 @include iro.bem-elem('check-icon') {
201 color: fn.color(--key-focus --box-bg);
202 }
203 } 199 }
204 } 200 }
205 } 201 }
@@ -217,7 +213,8 @@
217 background-color: fn.color(--accent --box-border); 213 background-color: fn.color(--accent --box-border);
218 } 214 }
219 215
220 &:hover { 216 &:hover,
217 &:focus-visible {
221 @include iro.bem-sibling-elem('box') { 218 @include iro.bem-sibling-elem('box') {
222 background-color: fn.color(--accent --hover --box-border); 219 background-color: fn.color(--accent --hover --box-border);
223 } 220 }
@@ -229,7 +226,8 @@
229 background-color: fn.color(--accent --box-border); 226 background-color: fn.color(--accent --box-border);
230 } 227 }
231 228
232 &:hover { 229 &:hover,
230 &:focus-visible {
233 @include iro.bem-sibling-elem('box') { 231 @include iro.bem-sibling-elem('box') {
234 background-color: fn.color(--accent --hover --box-border); 232 background-color: fn.color(--accent --hover --box-border);
235 } 233 }
@@ -257,12 +255,6 @@
257 } 255 }
258 } 256 }
259 } 257 }
260
261 &:focus-visible {
262 @include iro.bem-sibling-elem('box') {
263 background-color: fn.color(--key-focus --box-border);
264 }
265 }
266 } 258 }
267 } 259 }
268 } 260 }
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 12dc6ca..7ade7e1 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -11,14 +11,20 @@
11 --pad-b: fn.global-dim(--size --65), 11 --pad-b: fn.global-dim(--size --65),
12 --rounding: fn.global-dim(--rounding), 12 --rounding: fn.global-dim(--rounding),
13 --spacing-sibling: fn.global-dim(--size --300), 13 --spacing-sibling: fn.global-dim(--size --300),
14
15 --key-focus: (
16 --border: fn.global-dim(--key-focus --border),
17 --border-offset: fn.global-dim(--key-focus --border-offset),
18 --outline: fn.global-dim(--key-focus --border),
19 ),
14 ), 20 ),
15 --colors: ( 21 --colors: (
16 --circle-border: fn.global-color(--text-mute), 22 --circle-border: fn.global-color(--text-mute-more),
17 --circle-bg: fn.global-color(--base --75), 23 --circle-bg: fn.global-color(--base --75),
18 24
19 --hover: ( 25 --hover: (
20 --label: fn.global-color(--heading), 26 --label: fn.global-color(--heading),
21 --circle-border: fn.global-color(--text), 27 --circle-border: fn.global-color(--text-mute),
22 ), 28 ),
23 --accent: ( 29 --accent: (
24 --circle-border: fn.global-color(--accent --900), 30 --circle-border: fn.global-color(--accent --900),
@@ -27,37 +33,39 @@
27 --circle-border: fn.global-color(--accent --1000), 33 --circle-border: fn.global-color(--accent --1000),
28 ), 34 ),
29 ), 35 ),
30 --key-focus: (
31 --bg: fn.global-color(--focus-static --400),
32 --label: fn.global-color(--focus-static --400-text),
33 --circle-border: fn.global-color(--focus-static --1000),
34 --circle-bg: fn.global-color(--focus-static --1000-text),
35 ),
36 --disabled: ( 36 --disabled: (
37 --label: fn.global-color(--text-disabled), 37 --label: fn.global-color(--text-disabled),
38 --circle-border: fn.global-color(--border-strong), 38 --circle-border: fn.global-color(--border-strong),
39 --circle-bg: fn.global-color(--base --75), 39 --circle-bg: fn.global-color(--base --75),
40 ) 40 ),
41 --key-focus: (
42 --label: fn.global-color(--focus --text),
43 --border: fn.global-color(--focus --border),
44 --outline: fn.global-color(--focus --outline),
45 ),
41 ), 46 ),
42 )); 47 ));
43 48
44 @include iro.bem-object(iro.props-namespace()) { 49 @include iro.bem-object(iro.props-namespace()) {
45 display: inline-flex; 50 display: inline-block;
46 position: relative; 51 position: relative;
47 align-items: flex-start; 52 margin-inline:
48 margin-inline: calc(-1 * fn.dim(--pad-i)) calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i)); 53 calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset))
54 calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset));
49 padding-block: fn.dim(--pad-b); 55 padding-block: fn.dim(--pad-b);
50 padding-inline: fn.dim(--pad-i); 56 padding-inline: fn.dim(--pad-i);
51 57
52 @include iro.bem-elem('circle') { 58 @include iro.bem-elem('circle') {
53 display: block; 59 display: inline-block;
54 box-sizing: border-box;
55 flex: 0 0 auto; 60 flex: 0 0 auto;
56 inline-size: fn.dim(--diameter); 61 inline-size: fn.dim(--diameter);
57 block-size: fn.dim(--diameter); 62 block-size: fn.dim(--diameter);
58 margin-block-start: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--diameter))); 63 margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--diameter) - fn.dim(--key-focus --border-offset));
64 border: fn.dim(--key-focus --border-offset) solid transparent;
59 border-radius: 2em; 65 border-radius: 2em;
60 background-color: fn.color(--circle-border); 66 background-color: fn.color(--circle-border);
67 background-clip: padding-box;
68 vertical-align: top;
61 69
62 &::after { 70 &::after {
63 content: ''; 71 content: '';
@@ -74,8 +82,7 @@
74 } 82 }
75 83
76 @include iro.bem-elem('label') { 84 @include iro.bem-elem('label') {
77 align-self: baseline; 85 margin-inline-start: calc(fn.dim(--label-gap) - fn.dim(--key-focus --border-offset));
78 margin-inline-start: fn.dim(--label-gap);
79 } 86 }
80 87
81 @include iro.bem-elem('native') { 88 @include iro.bem-elem('native') {
@@ -91,7 +98,8 @@
91 overflow: hidden; 98 overflow: hidden;
92 border-radius: fn.dim(--rounding); 99 border-radius: fn.dim(--rounding);
93 100
94 &:hover { 101 &:hover,
102 &:focus-visible {
95 @include iro.bem-sibling-elem('label') { 103 @include iro.bem-sibling-elem('label') {
96 color: fn.color(--hover --label); 104 color: fn.color(--hover --label);
97 } 105 }
@@ -124,18 +132,13 @@
124 } 132 }
125 133
126 &:focus-visible { 134 &:focus-visible {
127 background-color: fn.color(--key-focus --bg);
128
129 @include iro.bem-sibling-elem('label') { 135 @include iro.bem-sibling-elem('label') {
130 color: fn.color(--key-focus --label); 136 color: fn.color(--key-focus --label);
131 } 137 }
132 138
133 @include iro.bem-sibling-elem('circle') { 139 @include iro.bem-sibling-elem('circle') {
134 background-color: fn.color(--key-focus --circle-border); 140 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
135 141 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
136 &::after {
137 background-color: fn.color(--key-focus --circle-bg);
138 }
139 } 142 }
140 } 143 }
141 } 144 }
@@ -153,7 +156,8 @@
153 background-color: fn.color(--accent --circle-border); 156 background-color: fn.color(--accent --circle-border);
154 } 157 }
155 158
156 &:hover { 159 &:hover,
160 &:focus-visible {
157 @include iro.bem-sibling-elem('circle') { 161 @include iro.bem-sibling-elem('circle') {
158 background-color: fn.color(--accent --hover --circle-border); 162 background-color: fn.color(--accent --hover --circle-border);
159 } 163 }
@@ -175,12 +179,6 @@
175 } 179 }
176 } 180 }
177 } 181 }
178
179 &:focus-visible {
180 @include iro.bem-sibling-elem('circle') {
181 background-color: fn.color(--key-focus --circle-border);
182 }
183 }
184 } 182 }
185 } 183 }
186 } 184 }
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
index 9ebb290..a67aa8d 100644
--- a/src/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -12,6 +12,12 @@
12 --pad-b: fn.global-dim(--size --65), 12 --pad-b: fn.global-dim(--size --65),
13 --rounding: fn.global-dim(--rounding), 13 --rounding: fn.global-dim(--rounding),
14 --spacing-sibling: fn.global-dim(--size --300), 14 --spacing-sibling: fn.global-dim(--size --300),
15
16 --key-focus: (
17 --border: fn.global-dim(--key-focus --border),
18 --border-offset: fn.global-dim(--key-focus --border-offset),
19 --outline: fn.global-dim(--key-focus --border),
20 ),
15 ), 21 ),
16 --colors: ( 22 --colors: (
17 --track-bg: fn.global-color(--border), 23 --track-bg: fn.global-color(--border),
@@ -36,33 +42,34 @@
36 --handle-bg: fn.global-color(--base --50), 42 --handle-bg: fn.global-color(--base --50),
37 ), 43 ),
38 --key-focus: ( 44 --key-focus: (
39 --bg: fn.global-color(--focus-static --400), 45 --label: fn.global-color(--focus --text),
40 --label: fn.global-color(--focus-static --400-text), 46 --border: fn.global-color(--focus --border),
41 --track-bg: fn.global-color(--focus-static --700), 47 --outline: fn.global-color(--focus --outline),
42 --handle-border: fn.global-color(--focus-static --1000),
43 --handle-bg: fn.global-color(--focus-static --1000-text),
44 ), 48 ),
45 ), 49 ),
46 )); 50 ));
47 51
48 @include iro.bem-object(iro.props-namespace()) { 52 @include iro.bem-object(iro.props-namespace()) {
49 display: inline-flex; 53 display: inline-block;
50 position: relative; 54 position: relative;
51 align-items: flex-start; 55 margin-inline:
52 margin-inline: calc(-1 * fn.dim(--pad-i)) calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i)); 56 calc(-1 * fn.dim(--pad-i) - fn.dim(--key-focus --border-offset))
57 calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i) - fn.dim(--key-focus --border-offset));
53 padding-inline: fn.dim(--pad-i); 58 padding-inline: fn.dim(--pad-i);
54 padding-block: fn.dim(--pad-b); 59 padding-block: fn.dim(--pad-b);
55 60
56 @include iro.bem-elem('indicator') { 61 @include iro.bem-elem('indicator') {
57 display: block; 62 display: inline-block;
58 box-sizing: border-box;
59 flex: 0 0 auto; 63 flex: 0 0 auto;
60 inline-size: fn.dim(--width); 64 inline-size: fn.dim(--width);
61 block-size: fn.dim(--height); 65 block-size: fn.dim(--height);
62 margin-block-start: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--height))); 66 margin-block-start: calc(.5em * fn.global-dim(--font --standard --line-height) - .5 * fn.dim(--height) - fn.dim(--key-focus --border-offset));
63 transition: background-color .2s ease; 67 transition: background-color .2s ease;
68 border: fn.dim(--key-focus --border-offset) solid transparent;
64 border-radius: 2em; 69 border-radius: 2em;
65 background-color: fn.color(--track-bg); 70 background-color: fn.color(--track-bg);
71 background-clip: padding-box;
72 vertical-align: top;
66 73
67 &::after { 74 &::after {
68 content: ''; 75 content: '';
@@ -77,7 +84,6 @@
77 } 84 }
78 85
79 @include iro.bem-elem('label') { 86 @include iro.bem-elem('label') {
80 align-self: baseline;
81 margin-inline-start: fn.dim(--label-gap); 87 margin-inline-start: fn.dim(--label-gap);
82 } 88 }
83 89
@@ -94,7 +100,8 @@
94 overflow: hidden; 100 overflow: hidden;
95 border-radius: fn.dim(--rounding); 101 border-radius: fn.dim(--rounding);
96 102
97 &:hover { 103 &:hover,
104 &:focus-visible {
98 @include iro.bem-sibling-elem('label') { 105 @include iro.bem-sibling-elem('label') {
99 color: fn.color(--hover --label); 106 color: fn.color(--hover --label);
100 } 107 }
@@ -116,7 +123,8 @@
116 } 123 }
117 } 124 }
118 125
119 &:hover { 126 &:hover,
127 &:focus-visible {
120 @include iro.bem-sibling-elem('indicator') { 128 @include iro.bem-sibling-elem('indicator') {
121 background-color: fn.color(--hover --handle-border); 129 background-color: fn.color(--hover --handle-border);
122 130
@@ -153,25 +161,13 @@
153 } 161 }
154 162
155 &:focus-visible { 163 &:focus-visible {
156 background-color: fn.color(--key-focus --bg);
157
158 @include iro.bem-sibling-elem('label') { 164 @include iro.bem-sibling-elem('label') {
159 color: fn.color(--key-focus --label); 165 color: fn.color(--key-focus --label);
160 } 166 }
161 167
162 @include iro.bem-sibling-elem('indicator') { 168 @include iro.bem-sibling-elem('indicator') {
163 background-color: fn.color(--key-focus --track-bg); 169 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
164 170 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
165 &::after {
166 border-color: fn.color(--key-focus --handle-border);
167 background-color: fn.color(--key-focus --handle-bg);
168 }
169 }
170
171 &:checked {
172 @include iro.bem-sibling-elem('indicator') {
173 background-color: fn.color(--key-focus --handle-border);
174 }
175 } 171 }
176 } 172 }
177 } 173 }
@@ -193,7 +189,8 @@
193 } 189 }
194 } 190 }
195 191
196 &:hover { 192 &:hover,
193 &:focus-visible {
197 @include iro.bem-sibling-elem('indicator') { 194 @include iro.bem-sibling-elem('indicator') {
198 background-color: fn.color(--accent --hover --handle-border); 195 background-color: fn.color(--accent --hover --handle-border);
199 196
@@ -219,18 +216,6 @@
219 } 216 }
220 } 217 }
221 } 218 }
222
223 &:focus-visible {
224 &:checked {
225 @include iro.bem-sibling-elem('indicator') {
226 background-color: fn.color(--key-focus --handle-border);
227
228 &::after {
229 border-color: fn.color(--key-focus --handle-border);
230 }
231 }
232 }
233 }
234 } 219 }
235 } 220 }
236 } 221 }
diff --git a/src/objects/_table.scss b/src/objects/_table.scss
new file mode 100644
index 0000000..cccf956
--- /dev/null
+++ b/src/objects/_table.scss
@@ -0,0 +1,167 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3@use '../mixins' as mx;
4
5@include iro.props-namespace('table') {
6 @include iro.props-store((
7 --dims: (
8 --pad-i: fn.global-dim(--size --175),
9 --pad-b: fn.global-dim(--size --125),
10 --rounding: fn.global-dim(--rounding),
11 --border: fn.global-dim(--border --thin),
12 --50: (
13 --pad-b: fn.global-dim(--size --75),
14 )
15 ),
16 --colors: (
17 --border: fn.global-color(--border),
18 --heading: fn.global-color(--heading),
19 --hover: fn.global-color(--border-mute),
20 --press: fn.global-color(--border),
21 --box: (
22 --bg: fn.global-color(--base --50),
23 --hover: fn.global-color(--bg-base),
24 --press: fn.global-color(--border-mute),
25 )
26 )
27 ));
28
29 @include iro.bem-object(iro.props-namespace()) {
30 border-spacing: 0;
31 border-collapse: separate;
32
33 @include iro.bem-modifier('fixed') {
34 table-layout: fixed;
35 }
36
37 @include iro.bem-elem('head-cell') {
38 @include mx.set-font(--standard, (
39 --line-height: null,
40 --size: fn.global-dim(--font-size --50),
41 --weight: bold,
42 --transform: uppercase,
43 --spacing: .5px
44 ));
45
46 padding-inline: fn.dim(--pad-i);
47 padding-block: fn.dim(--pad-b);
48 color: fn.color(--heading);
49 text-align: left;
50 }
51
52 @include iro.bem-elem('cell') {
53 padding-inline: fn.dim(--pad-i);
54 padding-block: fn.dim(--pad-b);
55 border-width: 0;
56 border-block-start-width: fn.dim(--border);
57 border-style: solid;
58 border-color: fn.color(--border);
59
60 @include iro.bem-modifier('divider') {
61 border-inline-end-width: fn.dim(--border);
62 }
63 }
64
65 @include iro.bem-elem('row') {
66 &:last-child {
67 @include iro.bem-elem('cell') {
68 border-block-end-width: fn.dim(--border);
69 }
70 }
71 }
72
73 @include iro.bem-modifier('flush') {
74 @include iro.bem-elem('head-cell', 'cell') {
75 &:first-child {
76 padding-inline-start: 0;
77 }
78
79 &:last-child {
80 padding-inline-end: 0;
81 }
82 }
83 }
84
85 @include iro.bem-modifier('box') {
86 @include iro.bem-elem('cell') {
87 background-color: fn.color(--box --bg);
88
89 &:first-child {
90 border-inline-start-width: fn.dim(--border);
91 }
92
93 &:last-child {
94 border-inline-end-width: fn.dim(--border);
95 }
96 }
97
98 @include iro.bem-elem('row') {
99 &:first-child {
100 @include iro.bem-elem('cell') {
101 &:first-child {
102 border-start-start-radius: fn.dim(--rounding);
103 }
104
105 &:last-child {
106 border-start-end-radius: fn.dim(--rounding);
107 }
108 }
109 }
110
111 &:last-child {
112 @include iro.bem-elem('cell') {
113 &:first-child {
114 border-end-start-radius: fn.dim(--rounding);
115 }
116
117 &:last-child {
118 border-end-end-radius: fn.dim(--rounding);
119 }
120 }
121 }
122 }
123 }
124
125 @include iro.bem-modifier('interactive') {
126 @include iro.bem-elem('row') {
127 @include iro.bem-elem('cell') {
128 cursor: pointer;
129 }
130
131 &:hover {
132 @include iro.bem-elem('cell') {
133 background-color: fn.color(--hover);
134 }
135 }
136
137 &:active {
138 @include iro.bem-elem('cell') {
139 background-color: fn.color(--press);
140 }
141 }
142 }
143
144 @include iro.bem-modifier('box') {
145 @include iro.bem-elem('row') {
146 &:hover {
147 @include iro.bem-elem('cell') {
148 background-color: fn.color(--box --hover);
149 }
150 }
151
152 &:active {
153 @include iro.bem-elem('cell') {
154 background-color: fn.color(--box --press);
155 }
156 }
157 }
158 }
159 }
160
161 @include iro.bem-modifier('50') {
162 @include iro.bem-elem('head-cell', 'cell') {
163 padding-block: fn.dim(--50 --pad-b);
164 }
165 }
166 }
167}
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index babec79..6611ea6 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -50,7 +50,7 @@
50 ), 50 ),
51 51
52 --key-focus: ( 52 --key-focus: (
53 --border: fn.global-dim(--key-focus --border), 53 --border: fn.global-dim(--key-focus --outline),
54 ), 54 ),
55 ), 55 ),
56 --colors: ( 56 --colors: (
@@ -63,11 +63,11 @@
63 --border: fn.global-color(--text-mute-more), 63 --border: fn.global-color(--text-mute-more),
64 ), 64 ),
65 --focus: ( 65 --focus: (
66 --border: fn.global-color(--focus --1100), 66 --border: fn.global-color(--focus --border),
67 ), 67 ),
68 --key-focus: ( 68 --key-focus: (
69 --border: fn.global-color(--focus --1100), 69 --border: fn.global-color(--focus --border),
70 --outline: fn.global-color(--focus --400), 70 --outline: fn.global-color(--focus --outline),
71 ), 71 ),
72 --error: ( 72 --error: (
73 --border: fn.global-color(--negative --700), 73 --border: fn.global-color(--negative --700),
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 10:29:45 +0000