diff options
-rw-r--r-- | src/_config.scss | 12 | ||||
-rw-r--r-- | src/_declare-vars.scss | 15 | ||||
-rw-r--r-- | src/_functions.scss | 12 | ||||
-rw-r--r-- | src/objects/_button.scss | 80 | ||||
-rw-r--r-- | tpl/views/button.pug | 16 |
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') | ||