summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-23 19:05:33 +0200
committerVolpeon <git@volpeon.ink>2024-06-23 19:05:33 +0200
commit64a841c69ead262666dd0754218585d0f05cf735 (patch)
tree2e6d3462d544c18d51e1e9930a2d95f98111e219 /src/objects
parentUpdate (diff)
downloadiro-design-64a841c69ead262666dd0754218585d0f05cf735.tar.gz
iro-design-64a841c69ead262666dd0754218585d0f05cf735.tar.bz2
iro-design-64a841c69ead262666dd0754218585d0f05cf735.zip
WIP: New color calculations
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_badge.scss32
-rw-r--r--src/objects/_button.scss74
-rw-r--r--src/objects/_checkbox.scss271
-rw-r--r--src/objects/_radio.scss197
-rw-r--r--src/objects/_text-field.scss11
5 files changed, 536 insertions, 49 deletions
diff --git a/src/objects/_badge.scss b/src/objects/_badge.scss
index 23ae305..6001564 100644
--- a/src/objects/_badge.scss
+++ b/src/objects/_badge.scss
@@ -6,29 +6,33 @@ $themes: accent positive negative warning;
6@include iro.props-namespace('badge') { 6@include iro.props-namespace('badge') {
7 @include iro.props-store(( 7 @include iro.props-store((
8 --dims: ( 8 --dims: (
9 --pad-b: fn.global-dim(--size --100), 9 --pad-b: fn.global-dim(--size --50),
10 --pad-i: fn.global-dim(--size --150), 10 --pad-i: fn.global-dim(--size --150),
11 --pad-i-pill: fn.global-dim(--size --200), 11 --pad-i-pill: fn.global-dim(--size --200),
12 --rounding: fn.global-dim(--rounding), 12 --rounding: fn.global-dim(--rounding),
13 --font-size: fn.global-dim(--font-size --100), 13 --font-size: fn.global-dim(--font-size --75),
14 14
15 --sm: ( 15 --sm: (
16 --pad-b: fn.global-dim(--size --50), 16 --pad-b: fn.global-dim(--size --25),
17 --pad-i: fn.global-dim(--size --115), 17 --pad-i: fn.global-dim(--size --115),
18 --pad-i-pill: fn.global-dim(--size --150), 18 --pad-i-pill: fn.global-dim(--size --150),
19 --font-size: fn.global-dim(--font-size --75), 19 --font-size: fn.global-dim(--font-size --50),
20 ), 20 ),
21 --lg: ( 21 --lg: (
22 --pad-b: fn.global-dim(--size --125), 22 --pad-b: fn.global-dim(--size --75),
23 --pad-i: fn.global-dim(--size --175), 23 --pad-i: fn.global-dim(--size --175),
24 --pad-i-pill: fn.global-dim(--size --225), 24 --pad-i-pill: fn.global-dim(--size --225),
25 --font-size: fn.global-dim(--font-size --150), 25 --font-size: fn.global-dim(--font-size --100),
26 ), 26 ),
27 --xl: ( 27 --xl: (
28 --pad-b: fn.global-dim(--size --160), 28 --pad-b: fn.global-dim(--size --100),
29 --pad-i: fn.global-dim(--size --225), 29 --pad-i: fn.global-dim(--size --225),
30 --pad-i-pill: fn.global-dim(--size --300), 30 --pad-i-pill: fn.global-dim(--size --300),
31 --font-size: fn.global-dim(--font-size --200), 31 --font-size: fn.global-dim(--font-size --150),
32 ),
33
34 --key-focus: (
35 --border: fn.global-dim(--key-focus --border),
32 ), 36 ),
33 ), 37 ),
34 --colors: ( 38 --colors: (
@@ -43,7 +47,7 @@ $themes: accent positive negative warning;
43 --key-focus: ( 47 --key-focus: (
44 --bg: fn.global-color(--base --50), 48 --bg: fn.global-color(--base --50),
45 --label: fn.global-color(--heading), 49 --label: fn.global-color(--heading),
46 --border: fn.global-color(--yellow-static --400), 50 --border: fn.global-color(--focus-static --400),
47 ), 51 ),
48 52
49 --quiet: ( 53 --quiet: (
@@ -63,13 +67,13 @@ $themes: accent positive negative warning;
63 @include iro.props-store(( 67 @include iro.props-store((
64 --colors: ( 68 --colors: (
65 --#{$theme}: ( 69 --#{$theme}: (
66 --bg: fn.global-color(--#{$theme} --800), 70 --bg: fn.global-color(--#{$theme}-static --800),
67 --label: fn.global-color(--#{$theme} --800-text), 71 --label: fn.global-color(--#{$theme}-static --800-text),
68 --hover: ( 72 --hover: (
69 --bg: fn.global-color(--#{$theme} --900), 73 --bg: fn.global-color(--#{$theme}-static --900),
70 ), 74 ),
71 --active: ( 75 --active: (
72 --bg: fn.global-color(--#{$theme} --900), 76 --bg: fn.global-color(--#{$theme}-static --900),
73 ), 77 ),
74 ), 78 ),
75 79
@@ -169,7 +173,7 @@ $themes: accent positive negative warning;
169 &:enabled { 173 &:enabled {
170 &:focus-visible { 174 &:focus-visible {
171 background-color: fn.color(--key-focus --bg); 175 background-color: fn.color(--key-focus --bg);
172 box-shadow: 0 0 0 fn.global-dim(--border --thick) fn.color(--key-focus --border); 176 box-shadow: 0 0 0 fn.dim(--key-focus --border) fn.color(--key-focus --border);
173 color: fn.color(--key-focus --label); 177 color: fn.color(--key-focus --label);
174 } 178 }
175 } 179 }
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index a823f17..1a0e52c 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -2,7 +2,7 @@
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: primary accent positive negative warning; 5$themes: accent negative;
6 6
7@mixin button-variant($theme: null) { 7@mixin button-variant($theme: null) {
8 $key: if($theme == null, (), --#{$theme}); 8 $key: if($theme == null, (), --#{$theme});
@@ -19,6 +19,7 @@ $themes: primary accent positive negative warning;
19 &:link, 19 &:link,
20 &:visited, 20 &:visited,
21 &:enabled { 21 &:enabled {
22 border-color: fn.color(list.join($key, --outline-border));
22 background-color: transparent; 23 background-color: transparent;
23 color: fn.color(list.join($key, --outline-label)); 24 color: fn.color(list.join($key, --outline-label));
24 } 25 }
@@ -66,11 +67,16 @@ $themes: primary accent positive negative warning;
66 --pad-b: fn.global-dim(--size --150), 67 --pad-b: fn.global-dim(--size --150),
67 --font-size: fn.global-dim(--font-size --200), 68 --font-size: fn.global-dim(--font-size --200),
68 ), 69 ),
70
71 --key-focus: (
72 --border: fn.global-dim(--key-focus --border),
73 ),
69 ), 74 ),
70 --colors: ( 75 --colors: (
71 --bg: fn.global-color(--border-mute), 76 --bg: fn.global-color(--border-mute),
72 --label: fn.global-color(--text), 77 --label: fn.global-color(--text),
73 --outline-label: fn.global-color(--text), 78 --outline-border: fn.global-color(--border),
79 --outline-label: fn.global-color(--text),
74 80
75 --hover: ( 81 --hover: (
76 --bg: fn.global-color(--border), 82 --bg: fn.global-color(--border),
@@ -81,19 +87,21 @@ $themes: primary accent positive negative warning;
81 --label: fn.global-color(--heading), 87 --label: fn.global-color(--heading),
82 ), 88 ),
83 --disabled: ( 89 --disabled: (
84 --bg: fn.global-color(--border-mute), 90 --bg: fn.global-color(--border-mute),
85 --label: fn.global-color(--text-disabled), 91 --outline-border: fn.global-color(--border),
92 --label: fn.global-color(--text-disabled),
86 ), 93 ),
87 --key-focus: ( 94 --key-focus: (
88 --bg: fn.global-color(--base --50), 95 --bg: fn.global-color(--base --50),
89 --label: fn.global-color(--heading), 96 --label: fn.global-color(--heading),
90 --border: fn.global-color(--yellow-static --400), 97 --border: fn.global-color(--focus-static --400),
91 ), 98 ),
92 99
93 --primary: ( 100 --primary: (
94 --bg: fn.global-color(--base --800), 101 --bg: fn.global-color(--base --800),
95 --label: fn.global-color(--base --800-text), 102 --label: fn.global-color(--base --800-text),
96 --outline-label: fn.global-color(--text), 103 --outline-border: fn.global-color(--base --800),
104 --outline-label: fn.global-color(--text),
97 105
98 --hover: ( 106 --hover: (
99 --bg: fn.global-color(--base --900), 107 --bg: fn.global-color(--base --900),
@@ -108,26 +116,25 @@ $themes: primary accent positive negative warning;
108 )); 116 ));
109 117
110 @each $theme in $themes { 118 @each $theme in $themes {
111 @if $theme != primary { 119 @include iro.props-store((
112 @include iro.props-store(( 120 --colors: (
113 --colors: ( 121 --#{$theme}: (
114 --#{$theme}: ( 122 --bg: fn.global-color(--#{$theme}-static --900),
115 --bg: fn.global-color(--#{$theme} --900), 123 --label: fn.global-color(--#{$theme}-static --900-text),
116 --label: fn.global-color(--#{$theme} --900-text), 124 --outline-border: fn.global-color(--#{$theme} --900),
117 --outline-label: fn.global-color(--#{$theme} --1000), 125 --outline-label: fn.global-color(--#{$theme} --1000),
118 126
119 --hover: ( 127 --hover: (
120 --bg: fn.global-color(--#{$theme} --1000), 128 --bg: fn.global-color(--#{$theme}-static --1000),
121 --label: fn.global-color(--#{$theme} --1000-text), 129 --label: fn.global-color(--#{$theme}-static --1000-text),
122 ), 130 ),
123 --active: ( 131 --active: (
124 --bg: fn.global-color(--#{$theme} --1100), 132 --bg: fn.global-color(--#{$theme}-static --1100),
125 --label: fn.global-color(--#{$theme} --1100-text), 133 --label: fn.global-color(--#{$theme}-static --1100-text),
126 ),
127 ), 134 ),
128 ), 135 ),
129 )); 136 ),
130 } 137 ));
131 } 138 }
132 139
133 @include iro.bem-object(iro.props-namespace()) { 140 @include iro.bem-object(iro.props-namespace()) {
@@ -151,6 +158,7 @@ $themes: primary accent positive negative warning;
151 } 158 }
152 159
153 @include iro.bem-modifier('outline') { 160 @include iro.bem-modifier('outline') {
161 border-color: fn.color(--disabled --outline-border);
154 background-color: transparent; 162 background-color: transparent;
155 box-shadow: none; 163 box-shadow: none;
156 } 164 }
@@ -164,6 +172,10 @@ $themes: primary accent positive negative warning;
164 } 172 }
165 173
166 @include button-variant(); 174 @include button-variant();
175
176 @include iro.bem-modifier('primary') {
177 @include button-variant('primary');
178 }
167 179
168 @each $theme in $themes { 180 @each $theme in $themes {
169 @include iro.bem-modifier($theme) { 181 @include iro.bem-modifier($theme) {
@@ -177,7 +189,7 @@ $themes: primary accent positive negative warning;
177 &:focus-visible { 189 &:focus-visible {
178 border-color: fn.color(--key-focus --border); 190 border-color: fn.color(--key-focus --border);
179 background-color: fn.color(--key-focus --bg); 191 background-color: fn.color(--key-focus --bg);
180 box-shadow: 0 0 0 calc(fn.global-dim(--border --thick) - fn.dim(--border)) fn.color(--key-focus --border); 192 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) - fn.dim(--border)) fn.color(--key-focus --border);
181 color: fn.color(--key-focus --label); 193 color: fn.color(--key-focus --label);
182 } 194 }
183 } 195 }
diff --git a/src/objects/_checkbox.scss b/src/objects/_checkbox.scss
new file mode 100644
index 0000000..8e9e64c
--- /dev/null
+++ b/src/objects/_checkbox.scss
@@ -0,0 +1,271 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('checkbox') {
5 @include iro.props-store((
6 --dims: (
7 --size: fn.global-dim(--size --175),
8 --label-gap: fn.global-dim(--size --125),
9 --border: fn.global-dim(--border --medium),
10 --pad-i: fn.global-dim(--size --65),
11 --pad-b: fn.global-dim(--size --65),
12 --rounding: fn.global-dim(--rounding),
13 --spacing-sibling: fn.global-dim(--size --300),
14 ),
15 --colors: (
16 --box-border: fn.global-color(--text-mute),
17 --box-bg: fn.global-color(--base --75),
18
19 --hover: (
20 --label: fn.global-color(--heading),
21 --box-border: fn.global-color(--text),
22 ),
23 --accent: (
24 --box-border: fn.global-color(--accent --900),
25
26 --hover: (
27 --box-border: fn.global-color(--accent --1000),
28 ),
29 ),
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: (
37 --label: fn.global-color(--text-disabled),
38 --box-border: fn.global-color(--border-strong),
39 --box-bg: fn.global-color(--base --75),
40 )
41 ),
42 ));
43
44 @include iro.bem-object(iro.props-namespace()) {
45 display: inline-flex;
46 position: relative;
47 align-items: flex-start;
48 margin-inline: calc(-1 * fn.dim(--pad-i)) calc(fn.dim(--spacing-sibling) - fn.dim(--pad-b));
49 padding-block: fn.dim(--pad-b);
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
62 @include iro.bem-elem('box') {
63 display: block;
64 position: relative;
65 flex: 0 0 auto;
66 inline-size: fn.dim(--size);
67 block-size: fn.dim(--size);
68 margin-block-start: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--size)));
69 border-radius: fn.dim(--border);
70 background-color: fn.color(--box-border);
71
72 &::before,
73 &::after {
74 content: '';
75 display: block;
76 position: absolute;
77 }
78
79 &::before {
80 z-index: 2;
81 inset-block-start: fn.dim(--border);
82 inset-inline-start: fn.dim(--border);
83 inline-size: calc(fn.dim(--size) - 2 * fn.dim(--border));
84 block-size: calc(fn.dim(--size) - 2 * fn.dim(--border));
85 transition: transform .2s ease;
86 background-color: fn.color(--box-bg);
87 }
88
89 &::after {
90 z-index: 3;
91 inset-block-start: calc(.5 * fn.dim(--size) - 1px);
92 inset-inline-start: calc(1.5 * fn.dim(--border));
93 box-sizing: border-box;
94 inline-size: calc(fn.dim(--size) - 3 * fn.dim(--border));
95 block-size: 0;
96 transform: scale(0);
97 transition: transform .2s ease;
98 border-block-width: 0 2px;
99 border-inline-width: 0 2px;
100 border-style: solid;
101 border-radius: 2px;
102 border-color: fn.color(--box-bg);
103 }
104 }
105
106 @include iro.bem-elem('check-icon') {
107 display: block;
108 position: absolute;
109 z-index: 2;
110 inset-block-start: calc(1 * fn.dim(--border));
111 inset-inline-start: calc(1 * fn.dim(--border));
112 inline-size: calc(100% - 2 * fn.dim(--border));
113 block-size: calc(100% - 2 * fn.dim(--border));
114 margin: 0;
115 transform: scale(0);
116 transform-origin: 40% 90%;
117 transition: transform .2s ease;
118 stroke-width: iro.fn-px-to-rem(3px);
119 color: fn.color(--box-bg);
120 }
121
122 @include iro.bem-elem('label') {
123 align-self: baseline;
124 margin-left: fn.dim(--label-gap);
125 }
126
127 @include iro.bem-elem('native') {
128 position: absolute;
129 inset-block-start: 0;
130 inset-inline-start: 0;
131 inline-size: 100%;
132 block-size: 100%;
133 margin: 0;
134 padding: 0;
135 overflow: hidden;
136 opacity: .0001;
137
138 &:hover {
139 @include iro.bem-sibling-elem('label') {
140 color: fn.color(--hover --label);
141 }
142
143 @include iro.bem-sibling-elem('box') {
144 background-color: fn.color(--hover --box-border);
145 }
146 }
147
148 &:checked {
149 @include iro.bem-sibling-elem('box') {
150 &::before {
151 transform: scale(0);
152 }
153
154 @include iro.bem-elem('check-icon') {
155 transform: scale(1);
156 }
157 }
158 }
159
160 &:indeterminate {
161 @include iro.bem-sibling-elem('box') {
162 &::before {
163 transform: scale(0);
164 }
165
166 &::after {
167 transform: scale(1);
168 }
169
170 @include iro.bem-elem('check-icon') {
171 transform: scale(0);
172 }
173 }
174 }
175
176 &:disabled {
177 @include iro.bem-sibling-elem('label') {
178 color: fn.color(--disabled --label);
179 }
180
181 @include iro.bem-sibling-elem('box') {
182 background-color: fn.color(--disabled --box-border);
183
184 &::before {
185 background-color: fn.color(--disabled --box-bg);
186 }
187 }
188 }
189
190 &:focus-visible {
191 @include iro.bem-sibling-elem('bg') {
192 background-color: fn.color(--key-focus --bg);
193 }
194
195 @include iro.bem-sibling-elem('label') {
196 color: fn.color(--key-focus --label);
197 }
198
199 @include iro.bem-sibling-elem('box') {
200 background-color: fn.color(--key-focus --box-border);
201
202 &::before {
203 background-color: fn.color(--key-focus --box-bg);
204 }
205 }
206 }
207 }
208
209 @include iro.bem-modifier('standalone') {
210 @include iro.bem-elem('box') {
211 margin-block-start: 0;
212 }
213 }
214
215 @include iro.bem-modifier('accent') {
216 @include iro.bem-elem('native') {
217 &:checked {
218 @include iro.bem-sibling-elem('box') {
219 background-color: fn.color(--accent --box-border);
220 }
221
222 &:hover {
223 @include iro.bem-sibling-elem('box') {
224 background-color: fn.color(--accent --hover --box-border);
225 }
226 }
227 }
228
229 &:indeterminate {
230 @include iro.bem-sibling-elem('box') {
231 background-color: fn.color(--accent --box-border);
232 }
233
234 &:hover {
235 @include iro.bem-sibling-elem('box') {
236 background-color: fn.color(--accent --hover --box-border);
237 }
238 }
239 }
240
241 &:disabled {
242 @include iro.bem-sibling-elem('box') {
243 background-color: fn.color(--disabled --box-border);
244
245 &::before {
246 background-color: fn.color(--disabled --box-bg);
247 }
248 }
249
250 &:checked {
251 @include iro.bem-sibling-elem('box') {
252 background-color: fn.color(--disabled --box-border);
253 }
254 }
255
256 &:indeterminate {
257 @include iro.bem-sibling-elem('box') {
258 background-color: fn.color(--disabled --box-border);
259 }
260 }
261 }
262
263 &:focus-visible {
264 @include iro.bem-sibling-elem('box') {
265 background-color: fn.color(--key-focus --box-border);
266 }
267 }
268 }
269 }
270 }
271}
diff --git a/src/objects/_radio.scss b/src/objects/_radio.scss
new file mode 100644
index 0000000..5f461ce
--- /dev/null
+++ b/src/objects/_radio.scss
@@ -0,0 +1,197 @@
1@use 'iro-sass/src/index' as iro;
2@use '../functions' as fn;
3
4@include iro.props-namespace('radio') {
5 @include iro.props-store((
6 --dims: (
7 --diameter: fn.global-dim(--size --200),
8 --label-gap: fn.global-dim(--size --125),
9 --border: fn.global-dim(--border --medium),
10 --pad-i: fn.global-dim(--size --65),
11 --pad-b: fn.global-dim(--size --65),
12 --rounding: fn.global-dim(--rounding),
13 --spacing-sibling: fn.global-dim(--size --300),
14 ),
15 --colors: (
16 --circle-border: fn.global-color(--text-mute),
17 --circle-bg: fn.global-color(--base --75),
18
19 --hover: (
20 --label: fn.global-color(--heading),
21 --circle-border: fn.global-color(--text),
22 ),
23 --accent: (
24 --circle-border: fn.global-color(--accent --900),
25
26 --hover: (
27 --circle-border: fn.global-color(--accent --1000),
28 ),
29 ),
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: (
37 --label: fn.global-color(--text-disabled),
38 --circle-border: fn.global-color(--border-strong),
39 --circle-bg: fn.global-color(--base --75),
40 )
41 ),
42 ));
43
44 @include iro.bem-object(iro.props-namespace()) {
45 display: inline-flex;
46 position: relative;
47 align-items: flex-start;
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);
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
62 @include iro.bem-elem('circle') {
63 display: block;
64 box-sizing: border-box;
65 flex: 0 0 auto;
66 inline-size: fn.dim(--diameter);
67 block-size: fn.dim(--diameter);
68 margin-block-start: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - fn.dim(--diameter)));
69 border-radius: 2em;
70 background-color: fn.color(--circle-border);
71
72 &::after {
73 content: '';
74 display: block;
75 position: relative;
76 inset-block-start: fn.dim(--border);
77 inset-inline-start: fn.dim(--border);
78 inline-size: calc(fn.dim(--diameter) - 2 * fn.dim(--border));
79 block-size: calc(fn.dim(--diameter) - 2 * fn.dim(--border));
80 transition: transform .2s ease;
81 border-radius: fn.dim(--diameter);
82 background-color: fn.color(--circle-bg);
83 }
84 }
85
86 @include iro.bem-elem('label') {
87 align-self: baseline;
88 margin-inline-start: fn.dim(--label-gap);
89 }
90
91 @include iro.bem-elem('native') {
92 position: absolute;
93 inset-block-start: 0;
94 inset-inline-start: 0;
95 inline-size: 100%;
96 block-size: 100%;
97 margin: 0;
98 padding: 0;
99 overflow: hidden;
100 opacity: .0001;
101
102 &:hover {
103 @include iro.bem-sibling-elem('label') {
104 color: fn.color(--hover --label);
105 }
106
107 @include iro.bem-sibling-elem('circle') {
108 background-color: fn.color(--hover --circle-border);
109 }
110 }
111
112 &:checked {
113 @include iro.bem-sibling-elem('circle') {
114 &::after {
115 transform: scale(.44);
116 }
117 }
118 }
119
120 &:disabled {
121 @include iro.bem-sibling-elem('label') {
122 color: fn.color(--disabled --label);
123 }
124
125 @include iro.bem-sibling-elem('circle') {
126 background-color: fn.color(--disabled --circle-border);
127
128 &::after {
129 background-color: fn.color(--disabled --circle-bg);
130 }
131 }
132 }
133
134 &:focus-visible {
135 @include iro.bem-sibling-elem('bg') {
136 background-color: fn.color(--key-focus --bg);
137 }
138
139 @include iro.bem-sibling-elem('label') {
140 color: fn.color(--key-focus --label);
141 }
142
143 @include iro.bem-sibling-elem('circle') {
144 background-color: fn.color(--key-focus --circle-border);
145
146 &::after {
147 background-color: fn.color(--key-focus --circle-bg);
148 }
149 }
150 }
151 }
152
153 @include iro.bem-modifier('standalone') {
154 @include iro.bem-elem('circle') {
155 margin-block-start: 0;
156 }
157 }
158
159 @include iro.bem-modifier('accent') {
160 @include iro.bem-elem('native') {
161 &:checked {
162 @include iro.bem-sibling-elem('circle') {
163 background-color: fn.color(--accent --circle-border);
164 }
165
166 &:hover {
167 @include iro.bem-sibling-elem('circle') {
168 background-color: fn.color(--accent --hover --circle-border);
169 }
170 }
171 }
172
173 &:disabled {
174 @include iro.bem-sibling-elem('circle') {
175 background-color: fn.color(--disabled --circle-border);
176
177 &::after {
178 background-color: fn.color(--disabled --circle-bg);
179 }
180 }
181
182 &:checked {
183 @include iro.bem-sibling-elem('circle') {
184 background-color: fn.color(--disabled --circle-border);
185 }
186 }
187 }
188
189 &:focus-visible {
190 @include iro.bem-sibling-elem('circle') {
191 background-color: fn.color(--key-focus --circle-border);
192 }
193 }
194 }
195 }
196 }
197}
diff --git a/src/objects/_text-field.scss b/src/objects/_text-field.scss
index de5bcd1..04c809e 100644
--- a/src/objects/_text-field.scss
+++ b/src/objects/_text-field.scss
@@ -26,7 +26,8 @@
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: fn.dim(--key-focus --border) solid 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 } 31 }
31} 32}
32 33
@@ -46,9 +47,10 @@
46 --focus: ( 47 --focus: (
47 --border: fn.global-dim(--border --medium), 48 --border: fn.global-dim(--border --medium),
48 ), 49 ),
50
49 --key-focus: ( 51 --key-focus: (
50 --border: fn.global-dim(--border --thick), 52 --border: fn.global-dim(--key-focus --border),
51 ) 53 ),
52 ), 54 ),
53 --colors: ( 55 --colors: (
54 --bg: fn.global-color(--base --50), 56 --bg: fn.global-color(--base --50),
@@ -63,7 +65,8 @@
63 --border: fn.global-color(--accent --900), 65 --border: fn.global-color(--accent --900),
64 ), 66 ),
65 --key-focus: ( 67 --key-focus: (
66 --border: fn.global-color(--yellow-static --400), 68 --border: fn.global-color(--focus --1300),
69 --outline: fn.global-color(--focus-static --400),
67 ), 70 ),
68 --error: ( 71 --error: (
69 --border: fn.global-color(--negative --900), 72 --border: fn.global-color(--negative --900),
generated by cgit v1.2.3-54-g00ecf (git 2.45.2) at 2024-09-21 10:30:23 +0000