summaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--src/_config.scss12
-rw-r--r--src/_declare-vars.scss15
-rw-r--r--src/_functions.scss12
-rw-r--r--src/objects/_button.scss80
-rw-r--r--tpl/views/button.pug16
5 files changed, 126 insertions, 9 deletions
diff --git a/src/_config.scss b/src/_config.scss
index eb52b5a..ce72c8e 100644
--- a/src/_config.scss
+++ b/src/_config.scss
@@ -55,6 +55,18 @@ $static-colors: (
55 --green: oklch(56% 0.14 150.48), 55 --green: oklch(56% 0.14 150.48),
56 --yellow: oklch(56% 0.14 84.08), 56 --yellow: oklch(56% 0.14 84.08),
57 ), 57 ),
58
59 --transparents: (
60 --100: 0,
61 --200: .1,
62 --300: .25,
63 --400: .4,
64 --500: .55,
65 --600: .7,
66 --700: .8,
67 --800: .9,
68 --900: 1,
69 ),
58) !default; 70) !default;
59 71
60$theme-light: ( 72$theme-light: (
diff --git a/src/_declare-vars.scss b/src/_declare-vars.scss
index 2c845fa..91c4bea 100644
--- a/src/_declare-vars.scss
+++ b/src/_declare-vars.scss
@@ -189,6 +189,21 @@
189 )); 189 ));
190} 190}
191 191
192@each $palette-name, $palette in (--black: #000 #fff, --white: #fff #000) {
193 $color: list.nth($palette, 1);
194 $text: list.nth($palette, 2);
195
196 @include iro.props-store((
197 --colors: (
198 #{$palette-name}-transparent: fn.transparent-palette(
199 $color,
200 $text,
201 map.get(config.$static-colors, --transparents),
202 ),
203 ),
204 ));
205}
206
192@each $theme-name, $theme in config.$themes { 207@each $theme-name, $theme in config.$themes {
193 $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name); 208 $tree: if($theme-name == config.$theme-default, iro.$props-default-tree, $theme-name);
194 209
diff --git a/src/_functions.scss b/src/_functions.scss
index 0c04f1d..d615614 100644
--- a/src/_functions.scss
+++ b/src/_functions.scss
@@ -135,6 +135,18 @@
135 @return $palette; 135 @return $palette;
136} 136}
137 137
138@function transparent-palette($color, $text, $alphas) {
139 $palette: (
140 --text: $text,
141 );
142
143 @each $key, $alpha in $alphas {
144 $palette: map.set($palette, $key, rgba($color, $alpha));
145 }
146
147 @return $palette;
148}
149
138@function px-to-em($size, $base: iro.$vars-root-size) { 150@function px-to-em($size, $base: iro.$vars-root-size) {
139 @return math.div($size, $base) * 1em; 151 @return math.div($size, $base) * 1em;
140} 152}
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
diff --git a/tpl/views/button.pug b/tpl/views/button.pug
index 7e8f572..221219c 100644
--- a/tpl/views/button.pug
+++ b/tpl/views/button.pug
@@ -60,3 +60,19 @@ mixin view-button
60 +a-button(variant=theme outline=true icon='trash') 60 +a-button(variant=theme outline=true icon='trash')
61 +a-button(variant=theme outline=true disabled=true icon='trash') 61 +a-button(variant=theme outline=true disabled=true icon='trash')
62 62
63 each theme in ['static-black', 'static-black-primary', 'static-white', 'static-white-primary']
64 -
65 const bg = theme.startsWith('static-black') ? 500 : 1000;
66
67 .c-box(style=`background-color: var(--colors--blue-static--${bg});`)
68 .l-button-group
69 +a-button(variant=theme)= 'Button'
70 +a-button(variant=theme disabled=true)= 'Button'
71 +a-button(variant=theme outline=true)= 'Button'
72 +a-button(variant=theme outline=true disabled=true)= 'Button'
73 br
74 .l-button-group
75 +a-button(variant=theme icon='trash')
76 +a-button(variant=theme disabled=true icon='trash')
77 +a-button(variant=theme outline=true icon='trash')
78 +a-button(variant=theme outline=true disabled=true icon='trash')