summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
Diffstat
-rw-r--r--src/objects/_action-button.scss245
-rw-r--r--src/objects/_button.scss83
-rw-r--r--tpl/objects/action-button.pug3
-rw-r--r--tpl/objects/button.pug1
-rw-r--r--tpl/views/action-button.pug22
-rw-r--r--tpl/views/button.pug15
6 files changed, 249 insertions, 120 deletions
diff --git a/src/objects/_action-button.scss b/src/objects/_action-button.scss
index 6dbdc2f..7a7ff46 100644
--- a/src/objects/_action-button.scss
+++ b/src/objects/_action-button.scss
@@ -1,7 +1,95 @@
1@use 'sass:list';
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$sizes: 'sm' 'lg' 'xl' !default; 5$sizes: 'sm' 'lg' 'xl' !default;
6$static-themes: 'black' 'white' !default;
7
8@mixin static-theme($theme: ()) {
9 border-color: fn.color(list.join($theme, --disabled --border));
10 background-color: fn.color(list.join($theme, --disabled --bg));
11 color: fn.color(list.join($theme, --disabled --label));
12
13 &::after {
14 outline: fn.color(list.join($theme, --key-focus --border)) solid fn.dim(--key-focus --border);
15 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline));
16 }
17
18 &:link,
19 &:visited,
20 &:enabled {
21 border-color: fn.color(list.join($theme, --border));
22 background-color: fn.color(list.join($theme, --bg));
23 color: fn.color(list.join($theme, --label));
24
25 &:hover,
26 &:focus-visible {
27 border-color: fn.color(list.join($theme, --hover --border));
28 background-color: fn.color(list.join($theme, --hover --bg));
29 color: fn.color(list.join($theme, --hover --label));
30 }
31
32 &:active {
33 border-color: fn.color(list.join($theme, --active --border));
34 background-color: fn.color(list.join($theme, --active --bg));
35 color: fn.color(list.join($theme, --active --label));
36 }
37 }
38
39 @include iro.bem-modifier('quiet') {
40 border-color: transparent;
41 background-color: transparent;
42 color: fn.color(list.join($theme, --quiet --disabled --label));
43
44 &:link,
45 &:visited,
46 &:enabled {
47 border-color: transparent;
48 background-color: transparent;
49 color: fn.color(list.join($theme, --quiet --label));
50
51 &:hover,
52 &:focus-visible {
53 border-color: transparent;
54 background-color: fn.color(list.join($theme, --quiet --hover --bg));
55 color: fn.color(list.join($theme, --quiet --hover --label));
56 }
57
58 &:active {
59 border-color: transparent;
60 background-color: fn.color(list.join($theme, --quiet --active --bg));
61 color: fn.color(list.join($theme, --quiet --active --label));
62 }
63 }
64 }
65
66 @include iro.bem-is('selected') {
67 border-color: fn.color(list.join($theme, --selected --disabled --border));
68 background-color: fn.color(list.join($theme, --selected --disabled --bg));
69 color: fn.color(list.join($theme, --selected --disabled --label));
70
71 &:link,
72 &:visited,
73 &:enabled {
74 border-color: fn.color(list.join($theme, --selected --border));
75 background-color: fn.color(list.join($theme, --selected --bg));
76 color: fn.color(list.join($theme, --selected --label));
77
78 &:hover,
79 &:focus-visible {
80 border-color: fn.color(list.join($theme, --selected --hover --border));
81 background-color: fn.color(list.join($theme, --selected --hover --bg));
82 color: fn.color(list.join($theme, --selected --hover --label));
83 }
84
85 &:active {
86 border-color: fn.color(list.join($theme, --selected --active --border));
87 background-color: fn.color(list.join($theme, --selected --active --bg));
88 color: fn.color(list.join($theme, --selected --active --label));
89 }
90 }
91 }
92}
5 93
6@include iro.props-namespace('action-button') { 94@include iro.props-namespace('action-button') {
7 @include iro.props-store(( 95 @include iro.props-store((
@@ -59,6 +147,11 @@ $sizes: 'sm' 'lg' 'xl' !default;
59 --label: fn.global-color(--border-strong), 147 --label: fn.global-color(--border-strong),
60 --border: fn.global-color(--border), 148 --border: fn.global-color(--border),
61 ), 149 ),
150 --key-focus: (
151 --border: fn.global-color(--focus --border),
152 --outline: fn.global-color(--focus --outline),
153 ),
154
62 --selected: ( 155 --selected: (
63 --bg: fn.global-color(--text-mute), 156 --bg: fn.global-color(--text-mute),
64 --label: fn.global-color(--base --50), 157 --label: fn.global-color(--base --50),
@@ -80,10 +173,7 @@ $sizes: 'sm' 'lg' 'xl' !default;
80 --border: fn.global-color(--border-mute), 173 --border: fn.global-color(--border-mute),
81 ), 174 ),
82 ), 175 ),
83 --key-focus: ( 176
84 --border: fn.global-color(--focus --border),
85 --outline: fn.global-color(--focus --outline),
86 ),
87 --quiet: ( 177 --quiet: (
88 --label: fn.global-color(--text), 178 --label: fn.global-color(--text),
89 179
@@ -102,6 +192,76 @@ $sizes: 'sm' 'lg' 'xl' !default;
102 ), 192 ),
103 )); 193 ));
104 194
195 @each $theme in $static-themes {
196 @include iro.props-store((
197 --colors: (
198 --static-#{$theme}: (
199 --bg: fn.global-color(--#{$theme}-transparent --100),
200 --label: fn.global-color(--#{$theme}-transparent --900),
201 --border: fn.global-color(--#{$theme}-transparent --400),
202
203 --hover: (
204 --bg: fn.global-color(--#{$theme}-transparent --300),
205 --label: fn.global-color(--#{$theme}-transparent --900),
206 --border: fn.global-color(--#{$theme}-transparent --500),
207 ),
208 --active: (
209 --bg: fn.global-color(--#{$theme}-transparent --400),
210 --label: fn.global-color(--#{$theme}-transparent --900),
211 --border: fn.global-color(--#{$theme}-transparent --600),
212 ),
213 --disabled: (
214 --bg: fn.global-color(--#{$theme}-transparent --100),
215 --label: fn.global-color(--#{$theme}-transparent --500),
216 --border: fn.global-color(--#{$theme}-transparent --300),
217 ),
218 --key-focus: (
219 --border: fn.global-color(--#{$theme}-transparent --900),
220 --outline: fn.global-color(--#{$theme}-transparent --300),
221 ),
222
223 --selected: (
224 --bg: fn.global-color(--#{$theme}-transparent --800),
225 --label: fn.global-color(--#{$theme}-transparent --text),
226 --border: fn.global-color(--#{$theme}-transparent --100),
227
228 --hover: (
229 --bg: fn.global-color(--#{$theme}-transparent --900),
230 --label: fn.global-color(--#{$theme}-transparent --text),
231 --border: fn.global-color(--#{$theme}-transparent --100),
232 ),
233 --active: (
234 --bg: fn.global-color(--#{$theme}-transparent --900),
235 --label: fn.global-color(--#{$theme}-transparent --text),
236 --border: fn.global-color(--#{$theme}-transparent --100),
237 ),
238 --disabled: (
239 --bg: fn.global-color(--#{$theme}-transparent --200),
240 --label: fn.global-color(--#{$theme}-transparent --500),
241 --border: fn.global-color(--#{$theme}-transparent --100),
242 ),
243 ),
244
245 --quiet: (
246 --label: fn.global-color(--#{$theme}-transparent --900),
247
248 --hover: (
249 --bg: fn.global-color(--#{$theme}-transparent --300),
250 --label: fn.global-color(--#{$theme}-transparent --900),
251 ),
252 --active: (
253 --bg: fn.global-color(--#{$theme}-transparent --400),
254 --label: fn.global-color(--#{$theme}-transparent --900),
255 ),
256 --disabled: (
257 --label: fn.global-color(--#{$theme}-transparent --500),
258 ),
259 ),
260 ),
261 )
262 ));
263 }
264
105 @include iro.bem-object(iro.props-namespace()) { 265 @include iro.bem-object(iro.props-namespace()) {
106 display: inline-block; 266 display: inline-block;
107 position: relative; 267 position: relative;
@@ -132,81 +292,18 @@ $sizes: 'sm' 'lg' 'xl' !default;
132 &:link, 292 &:link,
133 &:visited, 293 &:visited,
134 &:enabled { 294 &:enabled {
135 border-color: fn.color(--border);
136 background-color: fn.color(--bg);
137 color: fn.color(--label);
138
139 &:hover,
140 &:focus-visible {
141 border-color: fn.color(--hover --border);
142 background-color: fn.color(--hover --bg);
143 color: fn.color(--hover --label);
144 }
145
146 &:active {
147 border-color: fn.color(--active --border);
148 background-color: fn.color(--active --bg);
149 color: fn.color(--active --label);
150 }
151
152 &:focus-visible { 295 &:focus-visible {
153 &::after { 296 &::after {
154 display: block; 297 display: block;
155 } 298 }
156 } 299 }
157 } 300 }
158 301
159 @include iro.bem-modifier('quiet') { 302 @include static-theme;
160 border-color: transparent; 303
161 background-color: transparent; 304 @each $theme in $static-themes {
162 color: fn.color(--quiet --disabled --label); 305 @include iro.bem-modifier(static-#{$theme}) {
163 306 @include static-theme(--static-#{$theme});
164 &:link,
165 &:visited,
166 &:enabled {
167 border-color: transparent;
168 background-color: transparent;
169 color: fn.color(--quiet --label);
170
171 &:hover,
172 &:focus-visible {
173 border-color: transparent;
174 background-color: fn.color(--quiet --hover --bg);
175 color: fn.color(--quiet --hover --label);
176 }
177
178 &:active {
179 border-color: transparent;
180 background-color: fn.color(--quiet --active --bg);
181 color: fn.color(--quiet --active --label);
182 }
183 }
184 }
185
186 @include iro.bem-is('selected') {
187 border-color: fn.color(--selected --disabled --border);
188 background-color: fn.color(--selected --disabled --bg);
189 color: fn.color(--selected --disabled --label);
190
191 &:link,
192 &:visited,
193 &:enabled {
194 border-color: fn.color(--selected --border);
195 background-color: fn.color(--selected --bg);
196 color: fn.color(--selected --label);
197
198 &:hover,
199 &:focus-visible {
200 border-color: fn.color(--selected --hover --border);
201 background-color: fn.color(--selected --hover --bg);
202 color: fn.color(--selected --hover --label);
203 }
204
205 &:active {
206 border-color: fn.color(--selected --active --border);
207 background-color: fn.color(--selected --active --bg);
208 color: fn.color(--selected --active --label);
209 }
210 } 307 }
211 } 308 }
212 309
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 27d3726..98ac8ef 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -6,24 +6,22 @@ $sizes: 'sm' 'lg' 'xl' !default;
6$themes: 'accent' 'negative' !default; 6$themes: 'accent' 'negative' !default;
7$static-themes: 'black' 'white' !default; 7$static-themes: 'black' 'white' !default;
8 8
9@mixin theme($theme: null) { 9@mixin theme($theme: ()) {
10 $key: if($theme == null, (), --#{$theme});
11
12 &:link, 10 &:link,
13 &:visited, 11 &:visited,
14 &:enabled { 12 &:enabled {
15 border-color: transparent; 13 border-color: transparent;
16 background-color: fn.color(list.join($key, --bg)); 14 background-color: fn.color(list.join($theme, --bg));
17 color: fn.color(list.join($key, --label)); 15 color: fn.color(list.join($theme, --label));
18 } 16 }
19 17
20 @include iro.bem-modifier('outline') { 18 @include iro.bem-modifier('outline') {
21 &:link, 19 &:link,
22 &:visited, 20 &:visited,
23 &:enabled { 21 &:enabled {
24 border-color: fn.color(list.join($key, --outline-border)); 22 border-color: fn.color(list.join($theme, --outline-border));
25 background-color: transparent; 23 background-color: transparent;
26 color: fn.color(list.join($key, --outline-label)); 24 color: fn.color(list.join($theme, --outline-label));
27 } 25 }
28 } 26 }
29 27
@@ -33,35 +31,37 @@ $static-themes: 'black' 'white' !default;
33 &:hover, 31 &:hover,
34 &:focus-visible { 32 &:focus-visible {
35 border-color: transparent; 33 border-color: transparent;
36 background-color: fn.color(list.join($key, --hover --bg)); 34 background-color: fn.color(list.join($theme, --hover --bg));
37 color: fn.color(list.join($key, --hover --label)); 35 color: fn.color(list.join($theme, --hover --label));
38 } 36 }
39 37
40 &:active { 38 &:active {
41 border-color: transparent; 39 border-color: transparent;
42 background-color: fn.color(list.join($key, --active --bg)); 40 background-color: fn.color(list.join($theme, --active --bg));
43 color: fn.color(list.join($key, --active --label)); 41 color: fn.color(list.join($theme, --active --label));
44 } 42 }
45 } 43 }
46} 44}
47 45
48@mixin static-theme($theme, $disabled-theme: $theme) { 46@mixin static-theme($theme: ()) {
49 $key: --static-#{$disabled-theme};
50
51 border-color: transparent; 47 border-color: transparent;
52 background-color: fn.color(list.join($key, --disabled --bg)); 48 background-color: fn.color(list.join($theme, --disabled --bg));
53 color: fn.color(list.join($key, --disabled --label)); 49 color: fn.color(list.join($theme, --disabled --label));
50
51 &::after {
52 outline: fn.color(list.join($theme, --key-focus --border)) solid fn.dim(--key-focus --border);
53 box-shadow: 0 0 0 calc(fn.dim(--key-focus --border) + fn.dim(--key-focus --outline)) fn.color(list.join($theme, --key-focus --outline));
54 }
54 55
55 @include iro.bem-modifier('outline') { 56 @include iro.bem-modifier('outline') {
56 border-color: fn.color(list.join($key, --disabled --outline-border)); 57 border-color: fn.color(list.join($theme, --disabled --outline-border));
57 background-color: transparent; 58 background-color: transparent;
58 } 59 }
59 60
60 @include theme(static-#{$theme}); 61 @include theme($theme);
61 62
62 &::after { 63 @include iro.bem-modifier('primary') {
63 outline: fn.color(list.join($key, --key-focus --border)) solid fn.dim(--key-focus --border); 64 @include theme(list.join($theme, --primary));
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));
65 } 65 }
66} 66}
67 67
@@ -190,20 +190,21 @@ $static-themes: 'black' 'white' !default;
190 --border: fn.global-color(--#{$theme}-transparent --900), 190 --border: fn.global-color(--#{$theme}-transparent --900),
191 --outline: fn.global-color(--#{$theme}-transparent --300), 191 --outline: fn.global-color(--#{$theme}-transparent --300),
192 ), 192 ),
193 ),
194 --static-#{$theme}-primary: (
195 --bg: fn.global-color(--#{$theme}-transparent --800),
196 --label: fn.global-color(--#{$theme}-transparent --text),
197 --outline-border: fn.global-color(--#{$theme}-transparent --800),
198 --outline-label: fn.global-color(--#{$theme}-transparent --900),
199 193
200 --hover: ( 194 --primary: (
201 --bg: fn.global-color(--#{$theme}-transparent --900), 195 --bg: fn.global-color(--#{$theme}-transparent --800),
202 --label: fn.global-color(--#{$theme}-transparent --text), 196 --label: fn.global-color(--#{$theme}-transparent --text),
203 ), 197 --outline-border: fn.global-color(--#{$theme}-transparent --800),
204 --active: ( 198 --outline-label: fn.global-color(--#{$theme}-transparent --900),
205 --bg: fn.global-color(--#{$theme}-transparent --900), 199
206 --label: fn.global-color(--#{$theme}-transparent --text), 200 --hover: (
201 --bg: fn.global-color(--#{$theme}-transparent --900),
202 --label: fn.global-color(--#{$theme}-transparent --text),
203 ),
204 --active: (
205 --bg: fn.global-color(--#{$theme}-transparent --900),
206 --label: fn.global-color(--#{$theme}-transparent --text),
207 ),
207 ), 208 ),
208 ), 209 ),
209 ), 210 ),
@@ -265,25 +266,17 @@ $static-themes: 'black' 'white' !default;
265 } 266 }
266 } 267 }
267 268
268 @include theme(); 269 @include static-theme;
269
270 @include iro.bem-modifier('primary') {
271 @include theme('primary');
272 }
273 270
274 @each $theme in $themes { 271 @each $theme in $themes {
275 @include iro.bem-modifier($theme) { 272 @include iro.bem-modifier($theme) {
276 @include theme($theme); 273 @include theme(--#{$theme});
277 } 274 }
278 } 275 }
279 276
280 @each $theme in $static-themes { 277 @each $theme in $static-themes {
281 @include iro.bem-modifier(static-#{$theme}) { 278 @include iro.bem-modifier(static-#{$theme}) {
282 @include static-theme($theme); 279 @include static-theme(--static-#{$theme});
283 }
284
285 @include iro.bem-modifier(static-#{$theme}-primary) {
286 @include static-theme(#{$theme}-primary, $theme);
287 } 280 }
288 } 281 }
289 282
diff --git a/tpl/objects/action-button.pug b/tpl/objects/action-button.pug
index 976a646..c3a9b53 100644
--- a/tpl/objects/action-button.pug
+++ b/tpl/objects/action-button.pug
@@ -10,6 +10,9 @@ mixin action-button
10 'o-action-button--icon': !!attributes.icon && !block, 10 'o-action-button--icon': !!attributes.icon && !block,
11 'is-selected': attributes.selected 11 'is-selected': attributes.selected
12 } 12 }
13 if (attributes.theme) {
14 classes['o-action-button--' + attributes.theme] = true
15 }
13 if (attributes.size) { 16 if (attributes.size) {
14 classes['o-action-button--' + attributes.size] = true 17 classes['o-action-button--' + attributes.size] = true
15 } 18 }
diff --git a/tpl/objects/button.pug b/tpl/objects/button.pug
index 61ba0b6..b5fb8da 100644
--- a/tpl/objects/button.pug
+++ b/tpl/objects/button.pug
@@ -3,6 +3,7 @@ mixin a-button
3 let classes = { 3 let classes = {
4 'o-button': true, 4 'o-button': true,
5 'o-button--block': attributes.block, 5 'o-button--block': attributes.block,
6 'o-button--primary': attributes.primary,
6 'o-button--outline': attributes.outline, 7 'o-button--outline': attributes.outline,
7 'o-button--round': !!attributes.icon 8 'o-button--round': !!attributes.icon
8 } 9 }
diff --git a/tpl/views/action-button.pug b/tpl/views/action-button.pug
index 2c94c68..8fbf9ea 100644
--- a/tpl/views/action-button.pug
+++ b/tpl/views/action-button.pug
@@ -85,3 +85,25 @@ mixin view-action-button
85 +action-button(pill=true quiet=true disabled=true)= 'Disabled' 85 +action-button(pill=true quiet=true disabled=true)= 'Disabled'
86 = ' ' 86 = ' '
87 +action-button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled' 87 +action-button(pill=true quiet=true selected=true disabled=true)= 'Selected + disabled'
88
89 each theme in ['static-black', 'static-white']
90 -
91 const bg = theme.startsWith('static-black') ? 500 : 1000;
92
93 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
94 +action-button(theme=theme)= 'Idle'
95 = ' '
96 +action-button(theme=theme selected=true)= 'Selected'
97 = ' '
98 +action-button(theme=theme disabled=true)= 'Disabled'
99 = ' '
100 +action-button(theme=theme selected=true disabled=true)= 'Selected + disabled'
101
102 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
103 +action-button(theme=theme quiet=true)= 'Idle'
104 = ' '
105 +action-button(theme=theme quiet=true selected=true)= 'Selected'
106 = ' '
107 +action-button(theme=theme quiet=true disabled=true)= 'Disabled'
108 = ' '
109 +action-button(theme=theme quiet=true selected=true disabled=true)= 'Selected + disabled'
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index c476d9b..eacf302 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -45,7 +45,7 @@ mixin view-button
45 +a-button(variant=theme outline=true icon='trash') 45 +a-button(variant=theme outline=true icon='trash')
46 +a-button(variant=theme outline=true disabled=true icon='trash') 46 +a-button(variant=theme outline=true disabled=true icon='trash')
47 47
48 each theme in ['static-black', 'static-black-primary', 'static-white', 'static-white-primary'] 48 each theme in ['static-black', 'static-white']
49 - 49 -
50 const bg = theme.startsWith('static-black') ? 500 : 1000; 50 const bg = theme.startsWith('static-black') ? 500 : 1000;
51 51
@@ -61,3 +61,16 @@ mixin view-button
61 +a-button(variant=theme disabled=true icon='trash') 61 +a-button(variant=theme disabled=true icon='trash')
62 +a-button(variant=theme outline=true icon='trash') 62 +a-button(variant=theme outline=true icon='trash')
63 +a-button(variant=theme outline=true disabled=true icon='trash') 63 +a-button(variant=theme outline=true disabled=true icon='trash')
64
65 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
66 .l-button-group
67 +a-button(variant=theme primary=true)= 'Button'
68 +a-button(variant=theme primary=true disabled=true)= 'Button'
69 +a-button(variant=theme primary=true outline=true)= 'Button'
70 +a-button(variant=theme primary=true outline=true disabled=true)= 'Button'
71 br
72 .l-button-group
73 +a-button(variant=theme primary=true icon='trash')
74 +a-button(variant=theme primary=true disabled=true icon='trash')
75 +a-button(variant=theme primary=true outline=true icon='trash')
76 +a-button(variant=theme primary=true outline=true disabled=true icon='trash')
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2024-11-21 20:42:31 +0000