diff options
Diffstat (limited to 'src/objects/_button.scss')
-rw-r--r-- | src/objects/_button.scss | 58 |
1 files changed, 38 insertions, 20 deletions
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; |