diff options
author | Volpeon <git@volpeon.ink> | 2024-06-26 14:46:36 +0200 |
---|---|---|
committer | Volpeon <git@volpeon.ink> | 2024-06-26 14:46:36 +0200 |
commit | 71af9d144c4dfc27c8824aec4d945897289ed440 (patch) | |
tree | d5864d85af0738a472bbb068f6b39fc4ca7eef6d /src/objects/_button.scss | |
parent | Pill version for action button (diff) | |
download | iro-design-71af9d144c4dfc27c8824aec4d945897289ed440.tar.gz iro-design-71af9d144c4dfc27c8824aec4d945897289ed440.tar.bz2 iro-design-71af9d144c4dfc27c8824aec4d945897289ed440.zip |
Add static themes to action button
Diffstat (limited to 'src/objects/_button.scss')
-rw-r--r-- | src/objects/_button.scss | 83 |
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 | ||