summaryrefslogtreecommitdiffstats
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
parentUpdate (diff)
downloadiro-design-4de75e0f305b2cb4a026073440f2bac7c34df817.tar.gz
iro-design-4de75e0f305b2cb4a026073440f2bac7c34df817.tar.bz2
iro-design-4de75e0f305b2cb4a026073440f2bac7c34df817.zip
Focus indicator style
Diffstat
-rw-r--r--src/_base.scss1
-rw-r--r--src/_config.scss89
-rw-r--r--src/_declare-vars.scss19
-rw-r--r--src/_objects.scss2
-rw-r--r--src/_scopes.scss2
-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.scss (renamed from src/.old/objects/_table.scss)70
-rw-r--r--src/objects/_text-field.scss8
-rw-r--r--src/scopes/_links.scss33
-rw-r--r--src/scopes/_tables.scss (renamed from src/.old/scopes/_tables.scss)63
-rw-r--r--tpl/objects/checkbox.pug4
-rw-r--r--tpl/objects/radio.pug4
-rw-r--r--tpl/objects/switch.pug4
17 files changed, 293 insertions, 304 deletions
diff --git a/src/_base.scss b/src/_base.scss
index f55e94b..ce1198d 100644
--- a/src/_base.scss
+++ b/src/_base.scss
@@ -6,6 +6,7 @@
6 6
7html { 7html {
8 scrollbar-color: fn.color(--text-disabled) transparent; 8 scrollbar-color: fn.color(--text-disabled) transparent;
9 accent-color: fn.color(--accent --600);
9} 10}
10 11
11html, 12html,
diff --git a/src/_config.scss b/src/_config.scss
index fd338a9..da97476 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -117,34 +117,6 @@ $theme-light: (
117 --green: oklch(56% 0.16 150.48) --colors --muted, 117 --green: oklch(56% 0.16 150.48) --colors --muted,
118 --yellow: oklch(56% 0.16 84.08) --colors --muted, 118 --yellow: oklch(56% 0.16 84.08) --colors --muted,
119 ), 119 ),
120
121 --semantic: (
122 --accent: --blue,
123 --accent-static: --blue-static,
124 --positive: --green,
125 --positive-static: --green-static,
126 --negative: --red,
127 --negative-static: --red-static,
128 --warning: --yellow,
129 --warning-static: --yellow-static,
130
131 --focus: --yellow,
132 --focus-static: --yellow-static,
133
134 --bg-l2: --base --50,
135 --bg-l1: --base --100,
136 --bg-base: --base --200,
137
138 --border-mute: --base --200,
139 --border: --base --300,
140 --border-strong: --base --400,
141
142 --text-disabled: --base --500,
143 --text-mute-more: --base --600,
144 --text-mute: --base --700,
145 --text: --base --800,
146 --heading: --base --900,
147 ),
148) !default; 120) !default;
149 121
150$theme-dark: ( 122$theme-dark: (
@@ -195,33 +167,42 @@ $theme-dark: (
195 --green: oklch(56% 0.16 150.48) --colors --muted, 167 --green: oklch(56% 0.16 150.48) --colors --muted,
196 --yellow: oklch(56% 0.16 84.08) --colors --muted, 168 --yellow: oklch(56% 0.16 84.08) --colors --muted,
197 ), 169 ),
170) !default;
198 171
199 --semantic: ( 172$semantic-colors: (
200 --accent: --blue, 173 --accent: --blue,
201 --accent-static: --blue-static, 174 --accent-static: --blue-static,
202 --positive: --green, 175 --positive: --green,
203 --positive-static: --green-static, 176 --positive-static: --green-static,
204 --negative: --red, 177 --negative: --red,
205 --negative-static: --red-static, 178 --negative-static: --red-static,
206 --warning: --yellow, 179 --warning: --yellow,
207 --warning-static: --yellow-static, 180 --warning-static: --yellow-static,
208 181
209 --focus: --yellow, 182 --focus-raw: --accent,
210 --focus-static: --yellow-static, 183 --focus-static: --accent-static,
211 184
212 --bg-base: --base --50, 185 --bg-l2: --base --50,
213 --bg-l1: --base --75, 186 --bg-l1: --base --100,
214 --bg-l2: --base --100, 187 --bg-base: --base --200,
215 188
216 --border-mute: --base --200, 189 --border-mute: --base --200,
217 --border: --base --300, 190 --border: --base --300,
218 --border-strong: --base --400, 191 --border-strong: --base --400,
219 192
220 --text-disabled: --base --500, 193 --text-disabled: --base --500,
221 --text-mute-more: --base --600, 194 --text-mute-more: --base --600,
222 --text-mute: --base --700, 195 --text-mute: --base --700,
223 --text: --base --800, 196 --text: --base --800,
224 --heading: --base --900, 197 --heading: --base --900,
198
199 --focus: (
200 --outline: --focus-raw --400,
201 --border-mute: --focus-raw --900,
202 --border: --focus-raw --1000,
203 --border-text: --focus-raw --1000-text,
204 --border-strong: --focus-raw --1100,
205 --text: --focus-raw --1100,
225 ), 206 ),
226) !default; 207) !default;
227 208
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 91c4bea..f657057 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -1,4 +1,5 @@
1@use 'sass:map'; 1@use 'sass:map';
2@use 'sass:meta';
2@use 'sass:list'; 3@use 'sass:list';
3@use 'iro-sass/src/index' as iro; 4@use 'iro-sass/src/index' as iro;
4@use 'include-media/dist/include-media' as media; 5@use 'include-media/dist/include-media' as media;
@@ -103,7 +104,9 @@
103 --rounding: 4px, 104 --rounding: 4px,
104 105
105 --key-focus: ( 106 --key-focus: (
106 --border: 4px, 107 --outline: fn.dim(--border --thick, null),
108 --border: fn.dim(--border --medium, null),
109 --border-offset: fn.dim(--border --medium, null),
107 ), 110 ),
108 111
109 --paragraph: ( 112 --paragraph: (
@@ -224,10 +227,20 @@
224 ), $tree); 227 ), $tree);
225 } 228 }
226 229
227 @each $color, $ref in map.get($theme, --semantic) { 230 @each $color, $ref in config.$semantic-colors {
231 $res: ();
232
233 @if meta.type-of($ref) == 'map' {
234 @each $key, $r in $ref {
235 $res: map.set($res, $key, fn.color($r));
236 }
237 } @else {
238 $res: fn.color($ref);
239 }
240
228 @include iro.props-store(( 241 @include iro.props-store((
229 --colors: ( 242 --colors: (
230 $color: fn.color($ref), 243 $color: $res,
231 ), 244 ),
232 ), $tree); 245 ), $tree);
233 } 246 }
diff --git a/src/_objects.scss b/src/_objects.scss
index 3d5024c..525e31a 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -21,6 +21,6 @@
21// @use 'objects/dialog'; 21// @use 'objects/dialog';
22// @use 'objects/lightbox'; 22// @use 'objects/lightbox';
23// @use 'objects/list-group'; 23// @use 'objects/list-group';
24// @use 'objects/table'; 24@use 'objects/table';
25// @use 'objects/alert'; 25// @use 'objects/alert';
26@use 'objects/palette'; 26@use 'objects/palette';
diff --git a/src/_scopes.scss b/src/_scopes.scss
index 6df12e1..a3aeb6c 100644
--- a/src/_scopes.scss
+++ b/src/_scopes.scss
@@ -3,4 +3,4 @@
3@use 'scopes/blockquotes'; 3@use 'scopes/blockquotes';
4@use 'scopes/lists'; 4@use 'scopes/lists';
5@use 'scopes/headings'; 5@use 'scopes/headings';
6// @use 'scopes/tables'; 6@use 'scopes/tables';
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/.old/objects/_table.scss b/src/objects/_table.scss
index 34512cb..cccf956 100644
--- a/src/.old/objects/_table.scss
+++ b/src/objects/_table.scss
@@ -5,28 +5,26 @@
5@include iro.props-namespace('table') { 5@include iro.props-namespace('table') {
6 @include iro.props-store(( 6 @include iro.props-store((
7 --dims: ( 7 --dims: (
8 --pad-x: fn.global-dim(--size --175), 8 --pad-i: fn.global-dim(--size --175),
9 --pad-y: fn.global-dim(--size --125), 9 --pad-b: fn.global-dim(--size --125),
10 --rounding: 3px, 10 --rounding: fn.global-dim(--rounding),
11 --border: fn.global-dim(--border --thin),
11 --50: ( 12 --50: (
12 --pad-y: fn.global-dim(--size --75), 13 --pad-b: fn.global-dim(--size --75),
13 ) 14 )
14 ), 15 ),
15 ), 'dims');
16
17 @include iro.props-store((
18 --colors: ( 16 --colors: (
19 --border: fn.global-color(--obj), 17 --border: fn.global-color(--border),
20 --heading: fn.global-color(--fg-hi), 18 --heading: fn.global-color(--heading),
21 --hover: fn.global-color(--obj-hi), 19 --hover: fn.global-color(--border-mute),
22 --press: fn.global-color(--obj), 20 --press: fn.global-color(--border),
23 --box: ( 21 --box: (
24 --bg: fn.global-color(--bg-hi2), 22 --bg: fn.global-color(--base --50),
25 --hover: fn.global-color(--bg), 23 --hover: fn.global-color(--bg-base),
26 --press: fn.global-color(--obj-hi), 24 --press: fn.global-color(--border-mute),
27 ) 25 )
28 ) 26 )
29 ), 'colors'); 27 ));
30 28
31 @include iro.bem-object(iro.props-namespace()) { 29 @include iro.bem-object(iro.props-namespace()) {
32 border-spacing: 0; 30 border-spacing: 0;
@@ -40,31 +38,34 @@
40 @include mx.set-font(--standard, ( 38 @include mx.set-font(--standard, (
41 --line-height: null, 39 --line-height: null,
42 --size: fn.global-dim(--font-size --50), 40 --size: fn.global-dim(--font-size --50),
43 --weight: 500, 41 --weight: bold,
44 --transform: uppercase, 42 --transform: uppercase,
45 --spacing: .5px 43 --spacing: .5px
46 )); 44 ));
47 45
48 padding: fn.dim(--pad-y) fn.dim(--pad-x); 46 padding-inline: fn.dim(--pad-i);
49 color: fn.color(--heading); 47 padding-block: fn.dim(--pad-b);
50 text-align: left; 48 color: fn.color(--heading);
49 text-align: left;
51 } 50 }
52 51
53 @include iro.bem-elem('cell') { 52 @include iro.bem-elem('cell') {
54 padding: fn.dim(--pad-y) fn.dim(--pad-x); 53 padding-inline: fn.dim(--pad-i);
55 border-width: 1px 0 0; 54 padding-block: fn.dim(--pad-b);
56 border-style: solid; 55 border-width: 0;
57 border-color: fn.color(--border); 56 border-block-start-width: fn.dim(--border);
57 border-style: solid;
58 border-color: fn.color(--border);
58 59
59 @include iro.bem-modifier('divider') { 60 @include iro.bem-modifier('divider') {
60 border-right-width: 1px; 61 border-inline-end-width: fn.dim(--border);
61 } 62 }
62 } 63 }
63 64
64 @include iro.bem-elem('row') { 65 @include iro.bem-elem('row') {
65 &:last-child { 66 &:last-child {
66 @include iro.bem-elem('cell') { 67 @include iro.bem-elem('cell') {
67 border-bottom-width: 1px; 68 border-block-end-width: fn.dim(--border);
68 } 69 }
69 } 70 }
70 } 71 }
@@ -72,11 +73,11 @@
72 @include iro.bem-modifier('flush') { 73 @include iro.bem-modifier('flush') {
73 @include iro.bem-elem('head-cell', 'cell') { 74 @include iro.bem-elem('head-cell', 'cell') {
74 &:first-child { 75 &:first-child {
75 padding-left: 0; 76 padding-inline-start: 0;
76 } 77 }
77 78
78 &:last-child { 79 &:last-child {
79 padding-right: 0; 80 padding-inline-end: 0;
80 } 81 }
81 } 82 }
82 } 83 }
@@ -86,11 +87,11 @@
86 background-color: fn.color(--box --bg); 87 background-color: fn.color(--box --bg);
87 88
88 &:first-child { 89 &:first-child {
89 border-left-width: 1px; 90 border-inline-start-width: fn.dim(--border);
90 } 91 }
91 92
92 &:last-child { 93 &:last-child {
93 border-right-width: 1px; 94 border-inline-end-width: fn.dim(--border);
94 } 95 }
95 } 96 }
96 97
@@ -98,11 +99,11 @@
98 &:first-child { 99 &:first-child {
99 @include iro.bem-elem('cell') { 100 @include iro.bem-elem('cell') {
100 &:first-child { 101 &:first-child {
101 border-top-left-radius: fn.dim(--rounding); 102 border-start-start-radius: fn.dim(--rounding);
102 } 103 }
103 104
104 &:last-child { 105 &:last-child {
105 border-top-right-radius: fn.dim(--rounding); 106 border-start-end-radius: fn.dim(--rounding);
106 } 107 }
107 } 108 }
108 } 109 }
@@ -110,11 +111,11 @@
110 &:last-child { 111 &:last-child {
111 @include iro.bem-elem('cell') { 112 @include iro.bem-elem('cell') {
112 &:first-child { 113 &:first-child {
113 border-bottom-left-radius: fn.dim(--rounding); 114 border-end-start-radius: fn.dim(--rounding);
114 } 115 }
115 116
116 &:last-child { 117 &:last-child {
117 border-bottom-right-radius: fn.dim(--rounding); 118 border-end-end-radius: fn.dim(--rounding);
118 } 119 }
119 } 120 }
120 } 121 }
@@ -159,8 +160,7 @@
159 160
160 @include iro.bem-modifier('50') { 161 @include iro.bem-modifier('50') {
161 @include iro.bem-elem('head-cell', 'cell') { 162 @include iro.bem-elem('head-cell', 'cell') {
162 padding-top: fn.dim(--50 --pad-y); 163 padding-block: fn.dim(--50 --pad-b);
163 padding-bottom: fn.dim(--50 --pad-y);
164 } 164 }
165 } 165 }
166 } 166 }
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),
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 9e0b18a..552b02a 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -9,7 +9,13 @@
9 9
10 --hover: ( 10 --hover: (
11 --underline: fn.global-dim(--border --medium), 11 --underline: fn.global-dim(--border --medium),
12 ) 12 ),
13
14 --key-focus: (
15 --border: fn.global-dim(--key-focus --border),
16 --border-offset: fn.global-dim(--key-focus --border-offset),
17 --outline: fn.global-dim(--key-focus --border),
18 ),
13 ), 19 ),
14 --colors: ( 20 --colors: (
15 --underline: fn.global-color(--text-mute-more), 21 --underline: fn.global-color(--text-mute-more),
@@ -33,22 +39,24 @@
33 ), 39 ),
34 40
35 --key-focus: ( 41 --key-focus: (
36 --bg: fn.global-color(--focus-static --400), 42 --text: fn.global-color(--focus --text),
37 --text: fn.global-color(--focus-static --400-text), 43 --border: fn.global-color(--focus --border),
38 ) 44 --outline: fn.global-color(--focus --outline),
39 ) 45 ),
46 ),
40 )); 47 ));
41 48
42 @include iro.bem-scope(iro.props-namespace()) { 49 @include iro.bem-scope(iro.props-namespace()) {
43 :link, 50 :link,
44 :visited { 51 :visited {
45 margin: calc(-1 * fn.global-dim(--border --thick)); 52 margin: calc(-1 * fn.dim(--key-focus --border-offset));
46 padding: fn.global-dim(--border --thick); 53 padding: fn.dim(--key-focus --border-offset);
47 border-radius: calc(fn.dim(--rounding) + fn.global-dim(--border --thick)); 54 border-radius: fn.dim(--rounding);
48 color: currentColor; 55 color: currentColor;
49 text-decoration: underline; 56 text-decoration: underline;
50 text-decoration-color: fn.color(--underline); 57 text-decoration-color: fn.color(--underline);
51 text-decoration-thickness: fn.dim(--underline); 58 text-decoration-thickness: fn.dim(--underline);
59 box-decoration-break: clone;
52 60
53 &:hover { 61 &:hover {
54 text-decoration: underline; 62 text-decoration: underline;
@@ -57,11 +65,10 @@
57 } 65 }
58 66
59 &:focus-visible { 67 &:focus-visible {
60 background-color: fn.color(--key-focus --bg); 68 outline: fn.color(--key-focus --border) solid fn.dim(--key-focus --border);
61 color: fn.color(--key-focus --text); 69 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(--key-focus --outline);
62 text-decoration: underline; 70 color: fn.color(--key-focus --text);
63 text-decoration-thickness: fn.dim(--hover --underline); 71 text-decoration: none;
64 text-decoration-skip-ink: none;
65 } 72 }
66 } 73 }
67 74
diff --git a/src/.old/scopes/_tables.scss b/src/scopes/_tables.scss
index f78e81b..016ed31 100644
--- a/src/.old/scopes/_tables.scss
+++ b/src/scopes/_tables.scss
@@ -5,55 +5,56 @@
5@include iro.props-namespace('tables') { 5@include iro.props-namespace('tables') {
6 @include iro.props-store(( 6 @include iro.props-store((
7 --dims: ( 7 --dims: (
8 --pad-x: fn.global-dim(--size --175), 8 --pad-i: fn.foreign-dim(--table, --pad-i),
9 --pad-y: fn.global-dim(--size --125), 9 --pad-b: fn.foreign-dim(--table, --pad-b),
10 --rounding: 3px, 10 --rounding: fn.foreign-dim(--table, --rounding),
11 --margin-top: fn.global-dim(--paragraph --margin-top), 11 --border: fn.foreign-dim(--table, --border),
12 --margin-bs: fn.global-dim(--paragraph --margin-bs),
12 ), 13 ),
13 ), 'dims');
14
15 @include iro.props-store((
16 --colors: ( 14 --colors: (
17 --border: fn.global-color(--obj), 15 --border: fn.foreign-color(--table, --border),
18 --heading: fn.global-color(--fg-hi), 16 --heading: fn.foreign-color(--table, --heading),
19 --box: ( 17 --box: (
20 --bg: fn.global-color(--bg-hi2), 18 --bg: fn.foreign-color(--table, --box --bg),
21 ) 19 )
22 ) 20 )
23 ), 'colors'); 21 ));
24 22
25 @include iro.bem-scope(iro.props-namespace()) { 23 @include iro.bem-scope(iro.props-namespace()) {
26 table { 24 table {
27 margin-top: fn.dim(--margin-top); 25 margin-block-start: fn.dim(--margin-bs);
28 border-spacing: 0; 26 border-spacing: 0;
29 border-collapse: separate; 27 border-collapse: separate;
30 } 28 }
31 29
32 th { 30 th {
33 @include mx.set-font(--standard, ( 31 @include mx.set-font(--standard, (
34 --line-height: null, 32 --line-height: null,
35 --size: fn.global-dim(--font-size --50), 33 --size: fn.global-dim(--font-size --50),
36 --weight: 500, 34 --weight: bold,
37 --transform: uppercase, 35 --transform: uppercase,
38 --spacing: .5px 36 --spacing: .5px
39 )); 37 ));
40 38
41 padding: fn.dim(--pad-y) fn.dim(--pad-x); 39 padding-block: fn.dim(--pad-b);
42 color: fn.color(--heading); 40 padding-inline: fn.dim(--pad-i);
43 text-align: left; 41 color: fn.color(--heading);
42 text-align: left;
44 } 43 }
45 44
46 td { 45 td {
47 padding: fn.dim(--pad-y) fn.dim(--pad-x); 46 padding-block: fn.dim(--pad-b);
48 border-width: 1px 0 0; 47 padding-inline: fn.dim(--pad-i);
49 border-style: solid; 48 border-width: 0;
50 border-color: fn.color(--border); 49 border-block-start-width: fn.dim(--border);
50 border-style: solid;
51 border-color: fn.color(--border);
51 } 52 }
52 53
53 tr { 54 tr {
54 &:last-child { 55 &:last-child {
55 td { 56 td {
56 border-bottom-width: 1px; 57 border-block-end-width: fn.dim(--border);
57 } 58 }
58 } 59 }
59 } 60 }
@@ -62,11 +63,11 @@
62 th, 63 th,
63 td { 64 td {
64 &:first-child { 65 &:first-child {
65 padding-left: 0; 66 padding-inline-start: 0;
66 } 67 }
67 68
68 &:last-child { 69 &:last-child {
69 padding-right: 0; 70 padding-inline-end: 0;
70 } 71 }
71 } 72 }
72 } 73 }
@@ -76,11 +77,11 @@
76 background-color: fn.color(--box --bg); 77 background-color: fn.color(--box --bg);
77 78
78 &:first-child { 79 &:first-child {
79 border-left-width: 1px; 80 border-inline-start-width: fn.dim(--border);
80 } 81 }
81 82
82 &:last-child { 83 &:last-child {
83 border-right-width: 1px; 84 border-inline-end-width: fn.dim(--border);
84 } 85 }
85 } 86 }
86 87
@@ -88,11 +89,11 @@
88 &:first-child { 89 &:first-child {
89 td { 90 td {
90 &:first-child { 91 &:first-child {
91 border-top-left-radius: fn.dim(--rounding); 92 border-start-start-radius: fn.dim(--rounding);
92 } 93 }
93 94
94 &:last-child { 95 &:last-child {
95 border-top-right-radius: fn.dim(--rounding); 96 border-start-end-radius: fn.dim(--rounding);
96 } 97 }
97 } 98 }
98 } 99 }
@@ -100,11 +101,11 @@
100 &:last-child { 101 &:last-child {
101 td { 102 td {
102 &:first-child { 103 &:first-child {
103 border-bottom-left-radius: fn.dim(--rounding); 104 border-end-start-radius: fn.dim(--rounding);
104 } 105 }
105 106
106 &:last-child { 107 &:last-child {
107 border-bottom-right-radius: fn.dim(--rounding); 108 border-end-end-radius: fn.dim(--rounding);
108 } 109 }
109 } 110 }
110 } 111 }
diff --git a/tpl/objects/checkbox.pug b/tpl/objects/checkbox.pug
index 874505b..db794f6 100644
--- a/tpl/objects/checkbox.pug
+++ b/tpl/objects/checkbox.pug
@@ -12,7 +12,7 @@ mixin checkbox
12 type='checkbox' 12 type='checkbox'
13 class={ 'is-indeterminate': attributes.indeterminate } 13 class={ 'is-indeterminate': attributes.indeterminate }
14 )&attributes(attributes) 14 )&attributes(attributes)
15 .o-checkbox__box 15 span.o-checkbox__box
16 +icon('check')(class='o-checkbox__check-icon') 16 +icon('check')(class='o-checkbox__check-icon')
17 .o-checkbox__label 17 span.o-checkbox__label
18 block 18 block
diff --git a/tpl/objects/radio.pug b/tpl/objects/radio.pug
index 8cb1b1f..3243b05 100644
--- a/tpl/objects/radio.pug
+++ b/tpl/objects/radio.pug
@@ -7,6 +7,6 @@ mixin radio
7 7
8 label(class=classes) 8 label(class=classes)
9 input.o-radio__native(type='radio')&attributes(attributes) 9 input.o-radio__native(type='radio')&attributes(attributes)
10 .o-radio__circle 10 span.o-radio__circle
11 .o-radio__label 11 span.o-radio__label
12 block 12 block
diff --git a/tpl/objects/switch.pug b/tpl/objects/switch.pug
index 0c9c1ab..6f83fdc 100644
--- a/tpl/objects/switch.pug
+++ b/tpl/objects/switch.pug
@@ -7,6 +7,6 @@ mixin switch
7 7
8 label(class=classes) 8 label(class=classes)
9 input.o-switch__native(type='checkbox')&attributes(attributes) 9 input.o-switch__native(type='checkbox')&attributes(attributes)
10 .o-switch__indicator 10 span.o-switch__indicator
11 .o-switch__label 11 span.o-switch__label
12 block 12 block
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-22 00:38:51 +0000