summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
authorVolpeon <git@volpeon.ink>2024-06-25 11:11:05 +0200
committerVolpeon <git@volpeon.ink>2024-06-25 11:11:05 +0200
commitb566769679473b91d2f63406fba7cc3b44c4fcc1 (patch)
tree24fe359c8922bc250ad8cce8cba688d5c8c72235
parentFix button style (diff)
downloadiro-design-b566769679473b91d2f63406fba7cc3b44c4fcc1.tar.gz
iro-design-b566769679473b91d2f63406fba7cc3b44c4fcc1.tar.bz2
iro-design-b566769679473b91d2f63406fba7cc3b44c4fcc1.zip
Update
Diffstat
-rw-r--r--src/_config.scss26
-rw-r--r--src/_objects.scss2
-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.scss (renamed from src/.old/objects/_switch.scss)158
-rw-r--r--src/objects/_text-field.scss11
-rw-r--r--src/scopes/_links.scss8
-rw-r--r--tpl/objects/checkbox.pug1
-rw-r--r--tpl/objects/radio.pug1
-rw-r--r--tpl/views/badge.pug67
-rw-r--r--tpl/views/button.pug19
14 files changed, 297 insertions, 257 deletions
diff --git a/src/_config.scss b/src/_config.scss
index ce72c8e..fd338a9 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -88,19 +88,19 @@ $theme-light: (
88 ), 88 ),
89 89
90 --colors: ( 90 --colors: (
91 --100: math.div( 0, 12) * 95 + 5, 91 --100: math.div( 0, 12) * 96 + 5,
92 --200: math.div( 1, 12) * 95 + 5, 92 --200: math.div( 1, 12) * 96 + 5,
93 --300: math.div( 2, 12) * 95 + 5, 93 --300: math.div( 2, 12) * 96 + 5,
94 --400: math.div( 3, 12) * 95 + 5, 94 --400: math.div( 3, 12) * 96 + 5,
95 --500: math.div( 4, 12) * 95 + 5, 95 --500: math.div( 4, 12) * 96 + 5,
96 --600: math.div( 5, 12) * 95 + 5, 96 --600: math.div( 5, 12) * 96 + 5,
97 --700: math.div( 6, 12) * 95 + 5, 97 --700: math.div( 6, 12) * 96 + 5,
98 --800: math.div( 7, 12) * 95 + 5, 98 --800: math.div( 7, 12) * 96 + 5,
99 --900: math.div( 8, 12) * 95 + 5, 99 --900: math.div( 8, 12) * 96 + 5,
100 --1000: math.div( 9, 12) * 95 + 5, 100 --1000: math.div( 9, 12) * 96 + 5,
101 --1100: math.div(10, 12) * 95 + 5, 101 --1100: math.div(10, 12) * 96 + 5,
102 --1200: math.div(11, 12) * 95 + 5, 102 --1200: math.div(11, 12) * 96 + 5,
103 --1300: math.div(12, 12) * 95 + 5, 103 --1300: math.div(12, 12) * 96 + 5,
104 ), 104 ),
105 ), 105 ),
106 106
diff --git a/src/_objects.scss b/src/_objects.scss
index 0f510ff..3d5024c 100644
--- a/src/_objects.scss
+++ b/src/_objects.scss
@@ -8,7 +8,7 @@
8@use 'objects/field-label'; 8@use 'objects/field-label';
9@use 'objects/radio'; 9@use 'objects/radio';
10@use 'objects/checkbox'; 10@use 'objects/checkbox';
11// @use 'objects/switch'; 11@use 'objects/switch';
12// @use 'objects/action-button'; 12// @use 'objects/action-button';
13// @use 'objects/overflow-button'; 13// @use 'objects/overflow-button';
14// @use 'objects/status-indicator'; 14// @use 'objects/status-indicator';
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/.old/objects/_switch.scss b/src/objects/_switch.scss
index cbbb9b7..9ebb290 100644
--- a/src/.old/objects/_switch.scss
+++ b/src/objects/_switch.scss
@@ -4,71 +4,71 @@
4@include iro.props-namespace('switch') { 4@include iro.props-namespace('switch') {
5 @include iro.props-store(( 5 @include iro.props-store((
6 --dims: ( 6 --dims: (
7 --width: fn.global-dim(--size --325), 7 --width: fn.global-dim(--size --350),
8 --height: calc(fn.global-dim(--size --175) + 1px), 8 --height: fn.global-dim(--size --200),
9 --label-gap: fn.global-dim(--size --125), 9 --label-gap: fn.global-dim(--size --125),
10 --border: fn.global-dim(--border --medium), 10 --border: fn.global-dim(--border --medium),
11 --pad-x: fn.global-dim(--size --65), 11 --pad-i: fn.global-dim(--size --65),
12 --pad-y: 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),
13 ), 15 ),
14 ), 'dims');
15
16 @include iro.props-store((
17 --colors: ( 16 --colors: (
18 --track-bg: fn.global-color(--obj), 17 --track-bg: fn.global-color(--border),
19 --handle-border: fn.global-color(--fg-hi), 18 --handle-border: fn.global-color(--text-mute),
20 --handle-bg: fn.global-color(--bg-hi), 19 --handle-bg: fn.global-color(--base --50),
21 20
22 --hover: ( 21 --hover: (
23 --label: fn.global-color(--fg-lo), 22 --label: fn.global-color(--heading),
24 --handle-border: fn.global-color(--fg), 23 --handle-border: fn.global-color(--text),
25 ), 24 ),
26 --accent: ( 25 --accent: (
27 --handle-border: fn.global-color(--accent --primary --solid --bg), 26 --handle-border: fn.global-color(--accent --900),
28 27
29 --hover: ( 28 --hover: (
30 --handle-border: fn.global-color(--accent --primary --solid --obj), 29 --handle-border: fn.global-color(--accent --1000),
31 ), 30 ),
32 ), 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 ),
33 --key-focus: ( 38 --key-focus: (
34 --label: fn.global-color(--focus --text), 39 --bg: fn.global-color(--focus-static --400),
35 --track-bg: fn.global-color(--focus --fill), 40 --label: fn.global-color(--focus-static --400-text),
36 --handle-border: fn.global-color(--focus --fill), 41 --track-bg: fn.global-color(--focus-static --700),
37 --shadow: fn.global-color(--focus --shadow), 42 --handle-border: fn.global-color(--focus-static --1000),
43 --handle-bg: fn.global-color(--focus-static --1000-text),
38 ), 44 ),
39 --disabled: (
40 --label: fn.global-color(--fg-hi3),
41 --track-bg: fn.global-color(--obj),
42 --handle-border: fn.global-color(--obj-lo),
43 --handle-bg: fn.global-color(--bg-hi),
44 )
45 ), 45 ),
46 ), 'colors'); 46 ));
47 47
48 @include iro.bem-object(iro.props-namespace()) { 48 @include iro.bem-object(iro.props-namespace()) {
49 display: inline-flex; 49 display: inline-flex;
50 position: relative; 50 position: relative;
51 align-items: flex-start; 51 align-items: flex-start;
52 margin-right: calc(-1 * fn.dim(--pad-x)); 52 margin-inline: calc(-1 * fn.dim(--pad-i)) calc(fn.dim(--spacing-sibling) - fn.dim(--pad-i));
53 margin-left: calc(-1 * fn.dim(--pad-x)); 53 padding-inline: fn.dim(--pad-i);
54 padding: fn.dim(--pad-y) fn.dim(--pad-x); 54 padding-block: fn.dim(--pad-b);
55 55
56 @include iro.bem-elem('indicator') { 56 @include iro.bem-elem('indicator') {
57 display: block; 57 display: block;
58 box-sizing: border-box; 58 box-sizing: border-box;
59 flex: 0 0 auto; 59 flex: 0 0 auto;
60 width: fn.dim(--width); 60 inline-size: fn.dim(--width);
61 height: fn.dim(--height); 61 block-size: fn.dim(--height);
62 margin-top: calc(.5 * (fn.global-dim(--font --standard --line-height) * 1em - 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; 63 transition: background-color .2s ease;
64 border-radius: 2em; 64 border-radius: 2em;
65 background-color: fn.color(--track-bg); 65 background-color: fn.color(--track-bg);
66 66
67 &::after { 67 &::after {
68 content: ''; 68 content: '';
69 display: block; 69 display: block;
70 width: calc(fn.dim(--height) - 2 * fn.dim(--border)); 70 inline-size: calc(fn.dim(--height) - 2 * fn.dim(--border));
71 height: calc(fn.dim(--height) - 2 * fn.dim(--border)); 71 block-size: calc(fn.dim(--height) - 2 * fn.dim(--border));
72 transition: transform .2s ease; 72 transition: transform .2s ease;
73 border: fn.dim(--border) solid fn.color(--handle-border); 73 border: fn.dim(--border) solid fn.color(--handle-border);
74 border-radius: fn.dim(--width); 74 border-radius: fn.dim(--width);
@@ -77,20 +77,22 @@
77 } 77 }
78 78
79 @include iro.bem-elem('label') { 79 @include iro.bem-elem('label') {
80 align-self: baseline; 80 align-self: baseline;
81 margin-left: fn.dim(--label-gap); 81 margin-inline-start: fn.dim(--label-gap);
82 } 82 }
83 83
84 @include iro.bem-elem('native') { 84 @include iro.bem-elem('native') {
85 position: absolute; 85 appearance: none;
86 top: 0; 86 position: absolute;
87 left: 0; 87 z-index: -1;
88 width: 100%; 88 inset-block-start: 0;
89 height: 100%; 89 inset-inline-start: 0;
90 margin: 0; 90 inline-size: 100%;
91 padding: 0; 91 block-size: 100%;
92 overflow: hidden; 92 margin: 0;
93 opacity: .0001; 93 padding: 0;
94 overflow: hidden;
95 border-radius: fn.dim(--rounding);
94 96
95 &:hover { 97 &:hover {
96 @include iro.bem-sibling-elem('label') { 98 @include iro.bem-sibling-elem('label') {
@@ -150,23 +152,25 @@
150 } 152 }
151 } 153 }
152 154
153 @include iro.bem-at-theme('keyboard') { 155 &:focus-visible {
154 &:focus { 156 background-color: fn.color(--key-focus --bg);
155 @include iro.bem-sibling-elem('label') { 157
156 color: fn.color(--key-focus --label); 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);
157 } 168 }
158 169 }
170
171 &:checked {
159 @include iro.bem-sibling-elem('indicator') { 172 @include iro.bem-sibling-elem('indicator') {
160 &::after { 173 background-color: fn.color(--key-focus --handle-border);
161 border-color: fn.color(--key-focus --handle-border);
162 box-shadow: fn.color(--key-focus --shadow);
163 }
164 }
165
166 &:checked {
167 @include iro.bem-sibling-elem('indicator') {
168 background-color: fn.color(--key-focus --track-bg);
169 }
170 } 174 }
171 } 175 }
172 } 176 }
@@ -174,7 +178,7 @@
174 178
175 @include iro.bem-modifier('standalone') { 179 @include iro.bem-modifier('standalone') {
176 @include iro.bem-elem('indicator') { 180 @include iro.bem-elem('indicator') {
177 margin-top: 0; 181 margin-block-start: 0;
178 } 182 }
179 } 183 }
180 184
@@ -215,6 +219,18 @@
215 } 219 }
216 } 220 }
217 } 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 }
218 } 234 }
219 } 235 }
220 } 236 }
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),
diff --git a/src/scopes/_links.scss b/src/scopes/_links.scss
index 4f36972..9e0b18a 100644
--- a/src/scopes/_links.scss
+++ b/src/scopes/_links.scss
@@ -15,20 +15,20 @@
15 --underline: fn.global-color(--text-mute-more), 15 --underline: fn.global-color(--text-mute-more),
16 16
17 --idle: ( 17 --idle: (
18 --text: fn.global-color(--accent --1000), 18 --text: fn.global-color(--accent --1100),
19 --underline: fn.global-color(--accent --600), 19 --underline: fn.global-color(--accent --600),
20 20
21 --hover: ( 21 --hover: (
22 --text: fn.global-color(--accent --1200), 22 --text: fn.global-color(--accent --1300),
23 ), 23 ),
24 ), 24 ),
25 25
26 --visited: ( 26 --visited: (
27 --text: fn.global-color(--purple --1000), 27 --text: fn.global-color(--purple --1100),
28 --underline: fn.global-color(--purple --600), 28 --underline: fn.global-color(--purple --600),
29 29
30 --hover: ( 30 --hover: (
31 --text: fn.global-color(--purple --1200), 31 --text: fn.global-color(--purple --1300),
32 ), 32 ),
33 ), 33 ),
34 34
diff --git a/tpl/objects/checkbox.pug b/tpl/objects/checkbox.pug
index cb975d5..874505b 100644
--- a/tpl/objects/checkbox.pug
+++ b/tpl/objects/checkbox.pug
@@ -16,4 +16,3 @@ mixin checkbox
16 +icon('check')(class='o-checkbox__check-icon') 16 +icon('check')(class='o-checkbox__check-icon')
17 .o-checkbox__label 17 .o-checkbox__label
18 block 18 block
19 .o-checkbox__bg
diff --git a/tpl/objects/radio.pug b/tpl/objects/radio.pug
index ba941be..8cb1b1f 100644
--- a/tpl/objects/radio.pug
+++ b/tpl/objects/radio.pug
@@ -10,4 +10,3 @@ mixin radio
10 .o-radio__circle 10 .o-radio__circle
11 .o-radio__label 11 .o-radio__label
12 block 12 block
13 .o-radio__bg
diff --git a/tpl/views/badge.pug b/tpl/views/badge.pug
index a55baca..e1aa9e2 100644
--- a/tpl/views/badge.pug
+++ b/tpl/views/badge.pug
@@ -3,73 +3,40 @@ mixin view-badge
3 .c-box 3 .c-box
4 +badge(size='sm' href='#')= '50' 4 +badge(size='sm' href='#')= '50'
5 = ' ' 5 = ' '
6 +badge= '100' 6 +badge(href='#')= '100'
7 = ' ' 7 = ' '
8 +badge(size='lg' href='#')= '200' 8 +badge(size='lg' href='#')= '200'
9 = ' ' 9 = ' '
10 +badge(size='xl' href='#')= '300' 10 +badge(size='xl' href='#')= '300'
11 11
12 .c-box 12 .c-box
13 +badge(size='sm' href='#' quiet=true)= '50' 13 +badge(href='#')= '100'
14 = ' ' 14 = ' '
15 +badge(quiet=true)= '100' 15 +badge(quiet=true href='#')= '100'
16 = ' ' 16 = ' '
17 +badge(size='lg' href='#' quiet=true)= '200' 17 +badge(pill=true href='#')= '100'
18 = ' ' 18 = ' '
19 +badge(size='xl' href='#' quiet=true)= '300' 19 +badge(quiet=true pill=true href='#')= '100'
20 20
21 each theme in ['accent', 'positive', 'negative', 'warning'] 21 each theme in ['accent', 'positive', 'negative', 'warning']
22 .c-box 22 .c-box
23 +badge(theme)(size='sm' href='#')= 'new' 23 +badge(theme)(href='#')= 'new'
24 = ' ' 24 = ' '
25 +badge(theme)= 'new' 25 +badge(theme)(quiet=true href='#')= 'new'
26 = ' ' 26 = ' '
27 +badge(theme)(size='lg' href='#')= 'new' 27 +badge(theme)(pill=true href='#')= 'new'
28 = ' ' 28 = ' '
29 +badge(theme)(size='xl' href='#')= 'new' 29 +badge(theme)(quiet=true pill=true href='#')= 'new'
30 30
31 .c-box 31 each theme in ['static-black', 'static-white']
32 +badge(theme)(size='sm' href='#' quiet=true)= 'new' 32 -
33 = ' ' 33 const bg = theme.startsWith('static-black') ? 500 : 1000;
34 +badge(theme)(quiet=true)= 'new'
35 = ' '
36 +badge(theme)(size='lg' href='#' quiet=true)= 'new'
37 = ' '
38 +badge(theme)(size='xl' href='#' quiet=true)= 'new'
39 34
40 .c-box 35 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
41 +badge(size='sm', pill=true)= '50' 36 +badge(theme)(href='#')= 'new'
42 = ' '
43 +badge(pill=true)= '100'
44 = ' '
45 +badge(size='lg' pill=true)= '200'
46 = ' '
47 +badge(size='xl' pill=true)= '300'
48
49 .c-box
50 +badge(size='sm' pill=true quiet=true)= 'new'
51 = ' '
52 +badge(pill=true quiet=true)= 'new'
53 = ' '
54 +badge(size='lg' pill=true quiet=true)= 'new'
55 = ' '
56 +badge(size='xl' pill=true quiet=true)= 'new'
57
58 each theme in ['accent', 'positive', 'negative', 'warning']
59 .c-box
60 +badge(theme)(size='sm' pill=true href='#')= 'new'
61 = ' '
62 +badge(theme)(pill=true)= 'new'
63 = ' '
64 +badge(theme)(size='lg' pill=true href='#')= 'new'
65 = ' '
66 +badge(theme)(size='xl' pill=true href='#')= 'new'
67
68 .c-box
69 +badge(theme)(size='sm' pill=true href='#' quiet=true)= 'new'
70 = ' ' 37 = ' '
71 +badge(theme)(pill=true quiet=true)= 'new' 38 +badge(theme)(quiet=true href='#')= 'new'
72 = ' ' 39 = ' '
73 +badge(theme)(size='lg' pill=true href='#' quiet=true)= 'new' 40 +badge(theme)(pill=true href='#')= 'new'
74 = ' ' 41 = ' '
75 +badge(theme)(size='xl' pill=true href='#' quiet=true)= 'new' 42 +badge(theme)(quiet=true pill=true href='#')= 'new'
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index 221219c..c476d9b 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -8,15 +8,8 @@ mixin view-button
8 +a-button(size='lg')= 'Button' 8 +a-button(size='lg')= 'Button'
9 = ' ' 9 = ' '
10 +a-button(size='xl')= 'Button' 10 +a-button(size='xl')= 'Button'
11 br 11
12 +a-button(size='sm' disabled=true)= 'Button' 12 .c-box
13 = ' '
14 +a-button(disabled=true)= 'Button'
15 = ' '
16 +a-button(size='lg' disabled=true)= 'Button'
17 = ' '
18 +a-button(size='xl' disabled=true)= 'Button'
19 br
20 +a-button(size='sm' outline=true)= 'Button' 13 +a-button(size='sm' outline=true)= 'Button'
21 = ' ' 14 = ' '
22 +a-button(outline=true)= 'Button' 15 +a-button(outline=true)= 'Button'
@@ -24,14 +17,6 @@ mixin view-button
24 +a-button(size='lg' outline=true)= 'Button' 17 +a-button(size='lg' outline=true)= 'Button'
25 = ' ' 18 = ' '
26 +a-button(size='xl' outline=true)= 'Button' 19 +a-button(size='xl' outline=true)= 'Button'
27 br
28 +a-button(size='sm' outline=true disabled=true)= 'Button'
29 = ' '
30 +a-button(outline=true disabled=true)= 'Button'
31 = ' '
32 +a-button(size='lg' outline=true disabled=true)= 'Button'
33 = ' '
34 +a-button(size='xl' outline=true disabled=true)= 'Button'
35 20
36 .c-box 21 .c-box
37 .l-button-group 22 .l-button-group
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-25 02:15:31 +0000