summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_badge.scss165
-rw-r--r--src/objects/_button.scss58
-rw-r--r--src/objects/_checkbox.scss18
-rw-r--r--src/objects/_divider.scss2
-rw-r--r--src/objects/_radio.scss18
-rw-r--r--src/objects/_switch.scss237
-rw-r--r--src/objects/_text-field.scss11
7 files changed, 410 insertions, 99 deletions
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 6a984bf..b9020b6 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -1,7 +1,60 @@
1@use 'sass:string';
1@use 'iro-sass/src/index' as iro; 2@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn; 3@use '../functions' as fn;
3 4
4$themes: accent positive negative warning; 5$themes: 'accent' 'positive' 'negative' 'warning' !default;
6$static-themes: 'black' 'white' !default;
7
8@mixin theme($theme) {
9 background-color: fn.color(--#{$theme} --bg);
10 color: fn.color(--#{$theme} --label);
11
12 &:link,
13 &:visited,
14 &:enabled {
15 &:hover {
16 background-color: fn.color(--#{$theme} --hover --bg);
17 color: fn.color(--#{$theme} --hover --label);
18 }
19
20 &:active {
21 background-color: fn.color(--#{$theme} --active --bg);
22 color: fn.color(--#{$theme} --active --label);
23 }
24 }
25
26 @include iro.bem-modifier('quiet') {
27 background-color: fn.color(--#{$theme}-quiet --bg);
28 color: fn.color(--#{$theme}-quiet --label);
29
30 &:link,
31 &:visited,
32 &:enabled {
33 &:hover {
34 background-color: fn.color(--#{$theme}-quiet --hover --bg);
35 color: fn.color(--#{$theme}-quiet --hover --label);
36 }
37
38 &:active {
39 background-color: fn.color(--#{$theme}-quiet --active --bg);
40 color: fn.color(--#{$theme}-quiet --active --label);
41 }
42 }
43 }
44
45 @if string.slice($theme, 1, 7) == 'static-' {
46 &:link,
47 &:visited,
48 &:enabled {
49 &:focus-visible {
50 border-color: fn.color(--#{$theme} --key-focus --border);
51 outline: fn.color(--#{$theme} --key-focus --outline) solid fn.dim(--key-focus --outline);
52 background-color: fn.color(--#{$theme} --key-focus --bg);
53 color: fn.color(--#{$theme} --key-focus --label);
54 }
55 }
56 }
57}
5 58
6@include iro.props-namespace('badge') { 59@include iro.props-namespace('badge') {
7 @include iro.props-store(( 60 @include iro.props-store((
@@ -32,7 +85,8 @@ $themes: accent positive negative warning;
32 ), 85 ),
33 86
34 --key-focus: ( 87 --key-focus: (
35 --border: fn.global-dim(--key-focus --border), 88 --border: fn.global-dim(--border --medium),
89 --outline: fn.global-dim(--key-focus --border),
36 ), 90 ),
37 ), 91 ),
38 --colors: ( 92 --colors: (
@@ -45,9 +99,10 @@ $themes: accent positive negative warning;
45 --bg: fn.global-color(--heading), 99 --bg: fn.global-color(--heading),
46 ), 100 ),
47 --key-focus: ( 101 --key-focus: (
48 --bg: fn.global-color(--base --50), 102 --bg: fn.global-color(--base --50),
49 --label: fn.global-color(--heading), 103 --label: fn.global-color(--heading),
50 --border: fn.global-color(--focus-static --400), 104 --border: fn.global-color(--focus --1100),
105 --outline: fn.global-color(--focus --400),
51 ), 106 ),
52 107
53 --quiet: ( 108 --quiet: (
@@ -70,10 +125,12 @@ $themes: accent positive negative warning;
70 --bg: fn.global-color(--#{$theme}-static --900), 125 --bg: fn.global-color(--#{$theme}-static --900),
71 --label: fn.global-color(--#{$theme}-static --900-text), 126 --label: fn.global-color(--#{$theme}-static --900-text),
72 --hover: ( 127 --hover: (
73 --bg: fn.global-color(--#{$theme}-static --1000), 128 --bg: fn.global-color(--#{$theme}-static --1000),
129 --label: fn.global-color(--#{$theme}-static --1000-text),
74 ), 130 ),
75 --active: ( 131 --active: (
76 --bg: fn.global-color(--#{$theme}-static --1100), 132 --bg: fn.global-color(--#{$theme}-static --1100),
133 --label: fn.global-color(--#{$theme}-static --1000-text),
77 ), 134 ),
78 ), 135 ),
79 136
@@ -81,20 +138,61 @@ $themes: accent positive negative warning;
81 --bg: fn.global-color(--#{$theme} --200), 138 --bg: fn.global-color(--#{$theme} --200),
82 --label: fn.global-color(--#{$theme} --1100), 139 --label: fn.global-color(--#{$theme} --1100),
83 --hover: ( 140 --hover: (
84 --bg: fn.global-color(--#{$theme} --300), 141 --bg: fn.global-color(--#{$theme} --300),
142 --label: fn.global-color(--#{$theme} --1200),
85 ), 143 ),
86 --active: ( 144 --active: (
87 --bg: fn.global-color(--#{$theme} --400), 145 --bg: fn.global-color(--#{$theme} --400),
146 --label: fn.global-color(--#{$theme} --1300),
88 ), 147 ),
89 ) 148 )
90 ), 149 ),
91 )); 150 ));
92 } 151 }
93 152
153 @each $theme in $static-themes {
154 @include iro.props-store((
155 --colors: (
156 --static-#{$theme}: (
157 --bg: fn.global-color(--#{$theme}-transparent --800),
158 --label: fn.global-color(--#{$theme}-transparent --text),
159 --hover: (
160 --bg: fn.global-color(--#{$theme}-transparent --900),
161 --label: fn.global-color(--#{$theme}-transparent --text),
162 ),
163 --active: (
164 --bg: fn.global-color(--#{$theme}-transparent --900),
165 --label: fn.global-color(--#{$theme}-transparent --text),
166 ),
167 --key-focus: (
168 --bg: fn.global-color(--#{$theme}-transparent --100),
169 --label: fn.global-color(--#{$theme}-transparent --900),
170 --border: fn.global-color(--#{$theme}-transparent --900),
171 --outline: fn.global-color(--#{$theme}-transparent --300),
172 ),
173 ),
174
175 --static-#{$theme}-quiet: (
176 --bg: fn.global-color(--#{$theme}-transparent --200),
177 --label: fn.global-color(--#{$theme}-transparent --900),
178 --hover: (
179 --bg: fn.global-color(--#{$theme}-transparent --300),
180 --label: fn.global-color(--#{$theme}-transparent --900),
181 ),
182 --active: (
183 --bg: fn.global-color(--#{$theme}-transparent --400),
184 --label: fn.global-color(--#{$theme}-transparent --900),
185 ),
186 )
187 )
188 ));
189 }
190
94 @include iro.bem-object(iro.props-namespace()) { 191 @include iro.bem-object(iro.props-namespace()) {
95 display: inline-block; 192 display: inline-block;
96 padding-block: fn.dim(--pad-b); 193 padding-block: calc(fn.dim(--pad-b) - fn.dim(--key-focus --border));
97 padding-inline: fn.dim(--pad-i); 194 padding-inline: calc(fn.dim(--pad-i) - fn.dim(--key-focus --border));
195 border: fn.dim(--key-focus --border) solid transparent;
98 border-radius: fn.dim(--rounding); 196 border-radius: fn.dim(--rounding);
99 background-color: fn.color(--bg); 197 background-color: fn.color(--bg);
100 color: fn.color(--label); 198 color: fn.color(--label);
@@ -134,37 +232,7 @@ $themes: accent positive negative warning;
134 232
135 @each $theme in $themes { 233 @each $theme in $themes {
136 @include iro.bem-modifier($theme) { 234 @include iro.bem-modifier($theme) {
137 background-color: fn.color(--#{$theme} --bg); 235 @include theme($theme);
138 color: fn.color(--#{$theme} --label);
139
140 &:link,
141 &:visited,
142 &:enabled {
143 &:hover {
144 background-color: fn.color(--#{$theme} --hover --bg);
145 }
146
147 &:active {
148 background-color: fn.color(--#{$theme} --active --bg);
149 }
150 }
151
152 @include iro.bem-modifier('quiet') {
153 background-color: fn.color(--#{$theme}-quiet --bg);
154 color: fn.color(--#{$theme}-quiet --label);
155
156 &:link,
157 &:visited,
158 &:enabled {
159 &:hover {
160 background-color: fn.color(--#{$theme}-quiet --hover --bg);
161 }
162
163 &:active {
164 background-color: fn.color(--#{$theme}-quiet --active --bg);
165 }
166 }
167 }
168 } 236 }
169 } 237 }
170 238
@@ -172,12 +240,19 @@ $themes: accent positive negative warning;
172 &:visited, 240 &:visited,
173 &:enabled { 241 &:enabled {
174 &:focus-visible { 242 &:focus-visible {
243 border-color: fn.color(--key-focus --border);
244 outline: fn.color(--key-focus --outline) solid fn.dim(--key-focus --outline);
175 background-color: fn.color(--key-focus --bg); 245 background-color: fn.color(--key-focus --bg);
176 box-shadow: 0 0 0 fn.dim(--key-focus --border) fn.color(--key-focus --border);
177 color: fn.color(--key-focus --label); 246 color: fn.color(--key-focus --label);
178 } 247 }
179 } 248 }
180 249
250 @each $theme in $static-themes {
251 @include iro.bem-modifier(static-#{$theme}) {
252 @include theme(static-#{$theme});
253 }
254 }
255
181 @include iro.bem-modifier('pill') { 256 @include iro.bem-modifier('pill') {
182 padding-inline: fn.dim(--pad-i-pill); 257 padding-inline: fn.dim(--pad-i-pill);
183 border-radius: 10em; 258 border-radius: 10em;
@@ -185,8 +260,8 @@ $themes: accent positive negative warning;
185 260
186 @each $size in sm lg xl { 261 @each $size in sm lg xl {
187 @include iro.bem-modifier($size) { 262 @include iro.bem-modifier($size) {
188 padding-block: fn.dim(--#{$size} --pad-b); 263 padding-block: calc(fn.dim(--#{$size} --pad-b) - fn.dim(--key-focus --border));
189 padding-inline: fn.dim(--#{$size} --pad-i); 264 padding-inline: calc(fn.dim(--#{$size} --pad-i) - fn.dim(--key-focus --border));
190 font-size: fn.dim(--#{$size} --font-size); 265 font-size: fn.dim(--#{$size} --font-size);
191 266
192 @include iro.bem-modifier('pill') { 267 @include iro.bem-modifier('pill') {
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 0da3a65..08dc0ea 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -2,8 +2,8 @@
2@use 'iro-sass/src/index' as iro; 2@use 'iro-sass/src/index' as iro;
3@use '../functions' as fn; 3@use '../functions' as fn;
4 4
5$themes: 'accent' 'negative'; 5$themes: 'accent' 'negative' !default;
6$static-themes: 'black' 'white'; 6$static-themes: 'black' 'white' !default;
7 7
8@mixin theme($theme: null) { 8@mixin theme($theme: null) {
9 $key: if($theme == null, (), --#{$theme}); 9 $key: if($theme == null, (), --#{$theme});
@@ -57,6 +57,17 @@ $static-themes: 'black' 'white';
57 } 57 }
58 58
59 @include theme(static-#{$theme}); 59 @include theme(static-#{$theme});
60
61 &:link,
62 &:visited,
63 &:enabled {
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 }
60} 71}
61 72
62@include iro.props-namespace('button') { 73@include iro.props-namespace('button') {
@@ -86,7 +97,7 @@ $static-themes: 'black' 'white';
86 ), 97 ),
87 98
88 --key-focus: ( 99 --key-focus: (
89 --border: fn.global-dim(--key-focus --border), 100 --outline: fn.global-dim(--key-focus --border),
90 ), 101 ),
91 ), 102 ),
92 --colors: ( 103 --colors: (
@@ -111,7 +122,8 @@ $static-themes: 'black' 'white';
111 --key-focus: ( 122 --key-focus: (
112 --bg: fn.global-color(--base --50), 123 --bg: fn.global-color(--base --50),
113 --label: fn.global-color(--heading), 124 --label: fn.global-color(--heading),
114 --border: fn.global-color(--focus-static --400), 125 --border: fn.global-color(--focus --1100),
126 --outline: fn.global-color(--focus --400),
115 ), 127 ),
116 128
117 --primary: ( 129 --primary: (
@@ -163,11 +175,6 @@ $static-themes: 'black' 'white';
163 --outline-border: fn.global-color(--#{$theme}-transparent --300), 175 --outline-border: fn.global-color(--#{$theme}-transparent --300),
164 --outline-label: fn.global-color(--#{$theme}-transparent --900), 176 --outline-label: fn.global-color(--#{$theme}-transparent --900),
165 177
166 --disabled: (
167 --bg: fn.global-color(--#{$theme}-transparent --200),
168 --outline-border: fn.global-color(--#{$theme}-transparent --300),
169 --label: fn.global-color(--#{$theme}-transparent --500),
170 ),
171 --hover: ( 178 --hover: (
172 --bg: fn.global-color(--#{$theme}-transparent --300), 179 --bg: fn.global-color(--#{$theme}-transparent --300),
173 --label: fn.global-color(--#{$theme}-transparent --900), 180 --label: fn.global-color(--#{$theme}-transparent --900),
@@ -176,6 +183,17 @@ $static-themes: 'black' 'white';
176 --bg: fn.global-color(--#{$theme}-transparent --400), 183 --bg: fn.global-color(--#{$theme}-transparent --400),
177 --label: fn.global-color(--#{$theme}-transparent --900), 184 --label: fn.global-color(--#{$theme}-transparent --900),
178 ), 185 ),
186 --disabled: (
187 --bg: fn.global-color(--#{$theme}-transparent --200),
188 --outline-border: fn.global-color(--#{$theme}-transparent --300),
189 --label: fn.global-color(--#{$theme}-transparent --500),
190 ),
191 --key-focus: (
192 --bg: fn.global-color(--#{$theme}-transparent --100),
193 --label: fn.global-color(--#{$theme}-transparent --900),
194 --border: fn.global-color(--#{$theme}-transparent --900),
195 --outline: fn.global-color(--#{$theme}-transparent --300),
196 ),
179 ), 197 ),
180 --static-#{$theme}-primary: ( 198 --static-#{$theme}-primary: (
181 --bg: fn.global-color(--#{$theme}-transparent --800), 199 --bg: fn.global-color(--#{$theme}-transparent --800),
@@ -240,28 +258,28 @@ $static-themes: 'black' 'white';
240 @include theme($theme); 258 @include theme($theme);
241 } 259 }
242 } 260 }
243
244 @each $theme in $static-themes {
245 @include iro.bem-modifier(static-#{$theme}) {
246 @include static-theme($theme);
247 }
248
249 @include iro.bem-modifier(static-#{$theme}-primary) {
250 @include static-theme(#{$theme}-primary, $theme);
251 }
252 }
253 261
254 &:link, 262 &:link,
255 &:visited, 263 &:visited,
256 &:enabled { 264 &:enabled {
257 &:focus-visible { 265 &:focus-visible {
258 border-color: fn.color(--key-focus --border); 266 border-color: fn.color(--key-focus --border);
267 outline: fn.color(--key-focus --outline) solid fn.dim(--key-focus --outline);
259 background-color: fn.color(--key-focus --bg); 268 background-color: fn.color(--key-focus --bg);
260 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) - fn.dim(--border)) fn.color(--key-focus --border);
261 color: fn.color(--key-focus --label); 269 color: fn.color(--key-focus --label);
262 } 270 }
263 } 271 }
264 272
273 @each $theme in $static-themes {
274 @include iro.bem-modifier(static-#{$theme}) {
275 @include static-theme($theme);
276 }
277
278 @include iro.bem-modifier(static-#{$theme}-primary) {
279 @include static-theme(#{$theme}-primary, $theme);
280 }
281 }
282
265 @include iro.bem-modifier('round') { 283 @include iro.bem-modifier('round') {
266 inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b)); 284 inline-size: calc(1em * fn.dim(--line-height) + 2 * fn.dim(--pad-b));
267 padding-inline: 0; 285 padding-inline: 0;
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
index e56b10e..a254ec4 100644
--- a/src/objects/_checkbox.scss
+++ b/src/objects/_checkbox.scss
@@ -49,16 +49,6 @@
49 padding-block: fn.dim(--pad-b); 49 padding-block: fn.dim(--pad-b);
50 padding-inline: fn.dim(--pad-i); 50 padding-inline: fn.dim(--pad-i);
51 51
52 @include iro.bem-elem('bg') {
53 display: block;
54 position: absolute;
55 z-index: -1;
56 inset-block: 0;
57 inset-inline: 0;
58 border-radius: fn.dim(--rounding);
59 pointer-events: none;
60 }
61
62 @include iro.bem-elem('box') { 52 @include iro.bem-elem('box') {
63 display: block; 53 display: block;
64 position: relative; 54 position: relative;
@@ -125,7 +115,9 @@
125 } 115 }
126 116
127 @include iro.bem-elem('native') { 117 @include iro.bem-elem('native') {
118 appearance: none;
128 position: absolute; 119 position: absolute;
120 z-index: -1;
129 inset-block-start: 0; 121 inset-block-start: 0;
130 inset-inline-start: 0; 122 inset-inline-start: 0;
131 inline-size: 100%; 123 inline-size: 100%;
@@ -133,7 +125,7 @@
133 margin: 0; 125 margin: 0;
134 padding: 0; 126 padding: 0;
135 overflow: hidden; 127 overflow: hidden;
136 opacity: .0001; 128 border-radius: fn.dim(--rounding);
137 129
138 &:hover { 130 &:hover {
139 @include iro.bem-sibling-elem('label') { 131 @include iro.bem-sibling-elem('label') {
@@ -188,9 +180,7 @@
188 } 180 }
189 181
190 &:focus-visible { 182 &:focus-visible {
191 @include iro.bem-sibling-elem('bg') { 183 background-color: fn.color(--key-focus --bg);
192 background-color: fn.color(--key-focus --bg);
193 }
194 184
195 @include iro.bem-sibling-elem('label') { 185 @include iro.bem-sibling-elem('label') {
196 color: fn.color(--key-focus --label); 186 color: fn.color(--key-focus --label);
diff --git a/src/objects/_divider.scss b/src/objects/_divider.scss
index 29ab537..84ddf12 100644
--- a/src/objects/_divider.scss
+++ b/src/objects/_divider.scss
@@ -3,7 +3,7 @@
3@use '../functions' as fn; 3@use '../functions' as fn;
4@use '../config'; 4@use '../config';
5 5
6$static-themes: 'black' 'white'; 6$static-themes: 'black' 'white' !default;
7 7
8@include iro.props-namespace('divider') { 8@include iro.props-namespace('divider') {
9 @include iro.props-store(( 9 @include iro.props-store((
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
index 5f461ce..12dc6ca 100644
--- a/src/objects/_radio.scss
+++ b/src/objects/_radio.scss
@@ -48,16 +48,6 @@
48 margin-inline: calc(-1 * fn.dim(--pad-i)) calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i)); 48 margin-inline: calc(-1 * fn.dim(--pad-i)) calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i));
49 padding-block: fn.dim(--pad-b); 49 padding-block: fn.dim(--pad-b);
50 padding-inline: fn.dim(--pad-i); 50 padding-inline: fn.dim(--pad-i);
51
52 @include iro.bem-elem('bg') {
53 display: block;
54 position: absolute;
55 z-index: -1;
56 inset-block: 0;
57 inset-inline: 0;
58 border-radius: fn.dim(--rounding);
59 pointer-events: none;
60 }
61 51
62 @include iro.bem-elem('circle') { 52 @include iro.bem-elem('circle') {
63 display: block; 53 display: block;
@@ -89,7 +79,9 @@
89 } 79 }
90 80
91 @include iro.bem-elem('native') { 81 @include iro.bem-elem('native') {
82 appearance: none;
92 position: absolute; 83 position: absolute;
84 z-index: -1;
93 inset-block-start: 0; 85 inset-block-start: 0;
94 inset-inline-start: 0; 86 inset-inline-start: 0;
95 inline-size: 100%; 87 inline-size: 100%;
@@ -97,7 +89,7 @@
97 margin: 0; 89 margin: 0;
98 padding: 0; 90 padding: 0;
99 overflow: hidden; 91 overflow: hidden;
100 opacity: .0001; 92 border-radius: fn.dim(--rounding);
101 93
102 &:hover { 94 &:hover {
103 @include iro.bem-sibling-elem('label') { 95 @include iro.bem-sibling-elem('label') {
@@ -132,9 +124,7 @@
132 } 124 }
133 125
134 &:focus-visible { 126 &:focus-visible {
135 @include iro.bem-sibling-elem('bg') { 127 background-color: fn.color(--key-focus --bg);
136 background-color: fn.color(--key-focus --bg);
137 }
138 128
139 @include iro.bem-sibling-elem('label') { 129 @include iro.bem-sibling-elem('label') {
140 color: fn.color(--key-focus --label); 130 color: fn.color(--key-focus --label);
diff --git a/src/objects/_switch.scss b/src/objects/_switch.scss
new file mode 100644
index 0000000..9ebb290
--- /dev/null
+++ b/src/objects/_switch.scss
@@ -0,0 +1,237 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('switch') {
5 @include iro.props-store((
6 --dims: (
7 --width: fn.global-dim(--size --350),
8 --height: fn.global-dim(--size --200),
9 --label-gap: fn.global-dim(--size --125),
10 --border: fn.global-dim(--border --medium),
11 --pad-i: fn.global-dim(--size --65),
12 --pad-b: fn.global-dim(--size --65),
13 --rounding: fn.global-dim(--rounding),
14 --spacing-sibling: fn.global-dim(--size --300),
15 ),
16 --colors: (
17 --track-bg: fn.global-color(--border),
18 --handle-border: fn.global-color(--text-mute),
19 --handle-bg: fn.global-color(--base --50),
20
21 --hover: (
22 --label: fn.global-color(--heading),
23 --handle-border: fn.global-color(--text),
24 ),
25 --accent: (
26 --handle-border: fn.global-color(--accent --900),
27
28 --hover: (
29 --handle-border: fn.global-color(--accent --1000),
30 ),
31 ),
32 --disabled: (
33 --label: fn.global-color(--text-disabled),
34 --track-bg: fn.global-color(--border),
35 --handle-border: fn.global-color(--border-strong),
36 --handle-bg: fn.global-color(--base --50),
37 ),
38 --key-focus: (
39 --bg: fn.global-color(--focus-static --400),
40 --label: fn.global-color(--focus-static --400-text),
41 --track-bg: fn.global-color(--focus-static --700),
42 --handle-border: fn.global-color(--focus-static --1000),
43 --handle-bg: fn.global-color(--focus-static --1000-text),
44 ),
45 ),
46 ));
47
48 @include iro.bem-object(iro.props-namespace()) {
49 display: inline-flex;
50 position: relative;
51 align-items: flex-start;
52 margin-inline: calc(-1 * fn.dim(--pad-i)) calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i));
53 padding-inline: fn.dim(--pad-i);
54 padding-block: fn.dim(--pad-b);
55
56 @include iro.bem-elem('indicator') {
57 display: block;
58 box-sizing: border-box;
59 flex: 0 0 auto;
60 inline-size: fn.dim(--width);
61 block-size: fn.dim(--height);
62 margin-block-start: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--height)));
63 transition: background-color .2s ease;
64 border-radius: 2em;
65 background-color: fn.color(--track-bg);
66
67 &::after {
68 content: '';
69 display: block;
70 inline-size: calc(fn.dim(--height) - 2 * fn.dim(--border));
71 block-size: calc(fn.dim(--height) - 2 * fn.dim(--border));
72 transition: transform .2s ease;
73 border: fn.dim(--border) solid fn.color(--handle-border);
74 border-radius: fn.dim(--width);
75 background-color: fn.color(--handle-bg);
76 }
77 }
78
79 @include iro.bem-elem('label') {
80 align-self: baseline;
81 margin-inline-start: fn.dim(--label-gap);
82 }
83
84 @include iro.bem-elem('native') {
85 appearance: none;
86 position: absolute;
87 z-index: -1;
88 inset-block-start: 0;
89 inset-inline-start: 0;
90 inline-size: 100%;
91 block-size: 100%;
92 margin: 0;
93 padding: 0;
94 overflow: hidden;
95 border-radius: fn.dim(--rounding);
96
97 &:hover {
98 @include iro.bem-sibling-elem('label') {
99 color: fn.color(--hover --label);
100 }
101
102 @include iro.bem-sibling-elem('indicator') {
103 &::after {
104 border-color: fn.color(--hover --handle-border);
105 }
106 }
107 }
108
109 &:checked {
110 @include iro.bem-sibling-elem('indicator') {
111 background-color: fn.color(--handle-border);
112
113 &::after {
114 transform: translate(calc(fn.dim(--width) - fn.dim(--height) + .5px), 0);
115 border-color: fn.color(--handle-border);
116 }
117 }
118
119 &:hover {
120 @include iro.bem-sibling-elem('indicator') {
121 background-color: fn.color(--hover --handle-border);
122
123 &::after {
124 border-color: fn.color(--hover --handle-border);
125 }
126 }
127 }
128 }
129
130 &:disabled {
131 @include iro.bem-sibling-elem('label') {
132 color: fn.color(--disabled --label);
133 }
134
135 @include iro.bem-sibling-elem('indicator') {
136 background-color: fn.color(--disabled --track-bg);
137
138 &::after {
139 border-color: fn.color(--disabled --handle-border);
140 background-color: fn.color(--disabled --handle-bg);
141 }
142 }
143
144 &:checked {
145 @include iro.bem-sibling-elem('indicator') {
146 background-color: fn.color(--disabled --handle-border);
147
148 &::after {
149 border-color: fn.color(--disabled --handle-border);
150 }
151 }
152 }
153 }
154
155 &:focus-visible {
156 background-color: fn.color(--key-focus --bg);
157
158 @include iro.bem-sibling-elem('label') {
159 color: fn.color(--key-focus --label);
160 }
161
162 @include iro.bem-sibling-elem('indicator') {
163 background-color: fn.color(--key-focus --track-bg);
164
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 }
176 }
177 }
178
179 @include iro.bem-modifier('standalone') {
180 @include iro.bem-elem('indicator') {
181 margin-block-start: 0;
182 }
183 }
184
185 @include iro.bem-modifier('accent') {
186 @include iro.bem-elem('native') {
187 &:checked {
188 @include iro.bem-sibling-elem('indicator') {
189 background-color: fn.color(--accent --handle-border);
190
191 &::after {
192 border-color: fn.color(--accent --handle-border);
193 }
194 }
195
196 &:hover {
197 @include iro.bem-sibling-elem('indicator') {
198 background-color: fn.color(--accent --hover --handle-border);
199
200 &::after {
201 border-color: fn.color(--accent --hover --handle-border);
202 }
203 }
204 }
205 }
206
207 &:disabled {
208 @include iro.bem-sibling-elem('label') {
209 color: fn.color(--disabled --label);
210 }
211
212 &:checked {
213 @include iro.bem-sibling-elem('indicator') {
214 background-color: fn.color(--disabled --handle-border);
215
216 &::after {
217 border-color: fn.color(--disabled --handle-border);
218 }
219 }
220 }
221 }
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 }
235 }
236 }
237}
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index 37108ab..babec79 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -26,8 +26,9 @@
26 26
27@mixin keyboard-focus { 27@mixin keyboard-focus {
28 @include iro.bem-sibling-elem('bg') { 28 @include iro.bem-sibling-elem('bg') {
29 border-color: fn.color(--key-focus --border); 29 border-color: fn.color(--key-focus --border);
30 box-shadow: 0 0 0 fn.dim(--key-focus --border) fn.color(--key-focus --outline); 30 outline: fn.color(--key-focus --outline) solid fn.dim(--key-focus --border);
31 //outline-offset: fn.dim(--focus --border);
31 } 32 }
32} 33}
33 34
@@ -62,11 +63,11 @@
62 --border: fn.global-color(--text-mute-more), 63 --border: fn.global-color(--text-mute-more),
63 ), 64 ),
64 --focus: ( 65 --focus: (
65 --border: fn.global-color(--accent --900), 66 --border: fn.global-color(--focus --1100),
66 ), 67 ),
67 --key-focus: ( 68 --key-focus: (
68 --border: fn.global-color(--focus --1300), 69 --border: fn.global-color(--focus --1100),
69 --outline: fn.global-color(--focus-static --400), 70 --outline: fn.global-color(--focus --400),
70 ), 71 ),
71 --error: ( 72 --error: (
72 --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 18:10:31 +0000