|
1 |
| -importstyled,{injectGlobal}from'styled-components' |
2 |
| - |
| 1 | +importstyledfrom'styled-components' |
3 | 2 | import{Button}from'antd'
|
4 | 3 |
|
| 4 | +import{theme}from'../../../utils/themes' |
| 5 | + |
5 | 6 | constMButton=styled(Button)`
|
6 |
| - color: tomato; |
| 7 | + color:${theme('button.fg')}; |
| 8 | + background:${theme('button.bg')}; |
| 9 | + border-color:${theme('button.border')}; |
7 | 10 | &:hover {
|
8 |
| - color: tomato; |
9 |
| - border-color: tomato; |
| 11 | + color:${theme('button.fg')}; |
| 12 | + border-color:${theme('button.border')}; |
| 13 | + background:${theme('button.hover')}; |
10 | 14 | }
|
11 | 15 | &:focus {
|
12 |
| - color: tomato; |
13 |
| - border-color: tomato; |
| 16 | + color:${theme('button.fg')}; |
| 17 | + border-color:${theme('button.border')}; |
| 18 | + background:${theme('button.focus')}; |
14 | 19 | }
|
15 | 20 | &:active {
|
16 |
| - color: tomato; |
17 |
| - border-color: tomato; |
| 21 | + color:${theme('button.fg')}; |
| 22 | + border-color:${theme('button.border')}; |
| 23 | + background:${theme('button.active')}; |
18 | 24 | }
|
19 | 25 | `
|
20 | 26 |
|
21 | 27 | /* eslint-disable no-unused-expressions */
|
22 |
| -// TODO: move to global |
23 |
| -injectGlobal` |
24 |
| - .ant-btn-clicked:after { |
25 |
| - border: 0 solid tomato; |
26 |
| - } |
27 |
| -` |
| 28 | +// injectGlobal` |
| 29 | +// .ant-btn-clicked:after { |
| 30 | +// border: 0 solid ${color})}; |
| 31 | +// } |
| 32 | +// ` |
28 | 33 | /* eslint-enable no-unused-expressions */
|
29 | 34 |
|
30 | 35 | exportdefaultMButton
|