summaryrefslogtreecommitdiffstats
path: root/src/objects/_button.scss
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects/_button.scss')
-rw-r--r--src/objects/_button.scss83
1 files changed, 38 insertions, 45 deletions
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