summaryrefslogtreecommitdiffstats
path: root/src/objects
diff options
context:
space:
mode:
Diffstat (limited to 'src/objects')
-rw-r--r--src/objects/_button.scss80
1 files changed, 71 insertions, 9 deletions
diff --git a/src/objects/_button.scss b/src/objects/_button.scss
index 1a0e52c..771efbf 100644
--- a/src/objects/_button.scss
+++ b/src/objects/_button.scss
@@ -2,15 +2,16 @@
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';
6$static-themes: 'black' 'white';
6 7
7@mixin button-variant($theme: null) { 8@mixin theme($theme: null) {
8 $key: if($theme == null, (), --#{$theme}); 9 $key: if($theme == null, (), --#{$theme});
9 10
10 &:link, 11 &:link,
11 &:visited, 12 &:visited,
12 &:enabled { 13 &:enabled {
13 border-color: fn.color(list.join($key, --bg)); 14 border-color: transparent;
14 background-color: fn.color(list.join($key, --bg)); 15 background-color: fn.color(list.join($key, --bg));
15 color: fn.color(list.join($key, --label)); 16 color: fn.color(list.join($key, --label));
16 } 17 }
@@ -29,19 +30,29 @@ $themes: accent negative;
29 &:visited, 30 &:visited,
30 &:enabled { 31 &:enabled {
31 &:hover { 32 &:hover {
32 border-color: fn.color(list.join($key, --hover --bg)); 33 border-color: transparent;
33 background-color: fn.color(list.join($key, --hover --bg)); 34 background-color: fn.color(list.join($key, --hover --bg));
34 color: fn.color(list.join($key, --hover --label)); 35 color: fn.color(list.join($key, --hover --label));
35 } 36 }
36 37
37 &:active { 38 &:active {
38 border-color: fn.color(list.join($key, --active --bg)); 39 border-color: transparent;
39 background-color: fn.color(list.join($key, --active --bg)); 40 background-color: fn.color(list.join($key, --active --bg));
40 color: fn.color(list.join($key, --active --label)); 41 color: fn.color(list.join($key, --active --label));
41 } 42 }
42 } 43 }
43} 44}
44 45
46@mixin static-theme($theme, $disabled-theme: $theme) {
47 $key: --static-#{$disabled-theme};
48
49 border-color: transparent;
50 background-color: fn.color(list.join($key, --disabled --bg));
51 color: fn.color(list.join($key, --disabled --label));
52
53 @include theme(static-#{$theme});
54}
55
45@include iro.props-namespace('button') { 56@include iro.props-namespace('button') {
46 @include iro.props-store(( 57 @include iro.props-store((
47 --dims: ( 58 --dims: (
@@ -137,6 +148,48 @@ $themes: accent negative;
137 )); 148 ));
138 } 149 }
139 150
151 @each $theme in $static-themes {
152 @include iro.props-store((
153 --colors: (
154 --static-#{$theme}: (
155 --bg: fn.global-color(--#{$theme}-transparent --200),
156 --label: fn.global-color(--#{$theme}-transparent --900),
157 --outline-border: fn.global-color(--#{$theme}-transparent --300),
158 --outline-label: fn.global-color(--#{$theme}-transparent --900),
159
160 --disabled: (
161 --bg: fn.global-color(--#{$theme}-transparent --200),
162 --outline-border: fn.global-color(--#{$theme}-transparent --100),
163 --label: fn.global-color(--#{$theme}-transparent --500),
164 ),
165 --hover: (
166 --bg: fn.global-color(--#{$theme}-transparent --300),
167 --label: fn.global-color(--#{$theme}-transparent --900),
168 ),
169 --active: (
170 --bg: fn.global-color(--#{$theme}-transparent --400),
171 --label: fn.global-color(--#{$theme}-transparent --900),
172 ),
173 ),
174 --static-#{$theme}-primary: (
175 --bg: fn.global-color(--#{$theme}-transparent --800),
176 --label: fn.global-color(--#{$theme}-transparent --text),
177 --outline-border: fn.global-color(--#{$theme}-transparent --800),
178 --outline-label: fn.global-color(--#{$theme}-transparent --900),
179
180 --hover: (
181 --bg: fn.global-color(--#{$theme}-transparent --900),
182 --label: fn.global-color(--#{$theme}-transparent --text),
183 ),
184 --active: (
185 --bg: fn.global-color(--#{$theme}-transparent --900),
186 --label: fn.global-color(--#{$theme}-transparent --text),
187 ),
188 ),
189 ),
190 ));
191 }
192
140 @include iro.bem-object(iro.props-namespace()) { 193 @include iro.bem-object(iro.props-namespace()) {
141 display: inline-block; 194 display: inline-block;
142 padding-block: fn.dim(--pad-b); 195 padding-block: fn.dim(--pad-b);
@@ -151,7 +204,6 @@ $themes: accent negative;
151 line-height: fn.dim(--line-height); 204 line-height: fn.dim(--line-height);
152 text-align: center; 205 text-align: center;
153 text-decoration: none; 206 text-decoration: none;
154 vertical-align: top;
155 207
156 @include iro.bem-modifier('block') { 208 @include iro.bem-modifier('block') {
157 display: block; 209 display: block;
@@ -171,15 +223,25 @@ $themes: accent negative;
171 } 223 }
172 } 224 }
173 225
174 @include button-variant(); 226 @include theme();
175 227
176 @include iro.bem-modifier('primary') { 228 @include iro.bem-modifier('primary') {
177 @include button-variant('primary'); 229 @include theme('primary');
178 } 230 }
179 231
180 @each $theme in $themes { 232 @each $theme in $themes {
181 @include iro.bem-modifier($theme) { 233 @include iro.bem-modifier($theme) {
182 @include button-variant($theme); 234 @include theme($theme);
235 }
236 }
237
238 @each $theme in $static-themes {
239 @include iro.bem-modifier(static-#{$theme}) {
240 @include static-theme($theme);
241 }
242
243 @include iro.bem-modifier(static-#{$theme}-primary) {
244 @include static-theme(#{$theme}-primary, $theme);
183 } 245 }
184 } 246 }
185 247