Skip to content

Commit 1664f57

Browse files
nlopinnlopin
committed
feat(buttons): use css variables for colors
1 parent 6f1e40f commit 1664f57

File tree

2 files changed

+108
-204
lines changed

2 files changed

+108
-204
lines changed

‎src/components/Button/Button.tsx‎

Lines changed: 78 additions & 175 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
1-
import * as React from 'react';
21
import styled from 'styled-components';
32
import { ButtonStyleProps, ResponsiveValue, variant } from 'styled-system';
43
import { theme } from '../../essentials/theme';
54

65
import { BaseButton, BaseButtonProps } from './BaseButton';
7-
import { Colors } from '../../essentials';
8-
import { ComponentSemanticTokens, ReadCssVariable } from '../../essentials/Colors/types';
6+
import { ComponentSemanticTokens } from '../../essentials/Colors/types';
7+
8+
type Variant = 'primary' | 'secondary' | 'danger';
99

1010
interface ButtonProps extends BaseButtonProps, ButtonStyleProps {
1111
/**
@@ -15,228 +15,131 @@ interface ButtonProps extends BaseButtonProps, ButtonStyleProps {
1515
/**
1616
* Define style of the button component, defaults to primary
1717
*/
18-
variant?: ResponsiveValue<'primary' | 'secondary' | 'danger'>;
18+
variant?: ResponsiveValue<Variant>;
1919
}
2020

21-
const ButtonSemanticTokens: ComponentSemanticTokens = {
22-
primary: {
23-
text: 'var(--text-primaryInverted)',
24-
icon: 'var(--icon-primaryInverted)',
25-
background: 'var(--background-primaryEmphasized)',
26-
border: 'var(--background-primaryEmphasized)', // no matching border token!
27-
28-
textHover: 'var(--text-primaryInverted)',
29-
iconHover: 'var(--icon-primaryInverted)',
30-
backgroundHover: Colors.AUTHENTIC_BLUE_1100, // ??
31-
borderHover: Colors.AUTHENTIC_BLUE_1100,
32-
33-
textDisabled: 'var(--text-primaryInverted)',
34-
iconDisabled: 'var(--icon-primaryInverted)',
35-
backgroundDisabled: Colors.AUTHENTIC_BLUE_200,
36-
borderDisabled: Colors.AUTHENTIC_BLUE_200,
37-
38-
textInverted: Colors.ACTION_BLUE_900,
39-
iconInverted: Colors.ACTION_BLUE_900,
40-
backgroundInverted: Colors.WHITE,
41-
borderInverted: Colors.WHITE,
42-
43-
textHoverInverted: 'var(--text-primaryInverted)',
44-
iconHoverInverted: 'var(--icon-primaryInverted)',
45-
backgroundHoverInverted: Colors.ACTION_BLUE_900,
46-
borderHoverInverted: Colors.ACTION_BLUE_900,
47-
48-
textDisabledInverted: Colors.AUTHENTIC_BLUE_350,
49-
iconDisabledInverted: Colors.AUTHENTIC_BLUE_350,
50-
backgroundDisabledInverted: Colors.AUTHENTIC_BLUE_550,
51-
borderDisabledInverted: Colors.AUTHENTIC_BLUE_550
52-
},
53-
secondary: {
54-
text: Colors.AUTHENTIC_BLUE_900,
55-
icon: Colors.AUTHENTIC_BLUE_900,
56-
background: Colors.WHITE,
57-
border: Colors.AUTHENTIC_BLUE_200,
58-
59-
textHover: Colors.AUTHENTIC_BLUE_900,
60-
iconHover: Colors.AUTHENTIC_BLUE_900,
61-
backgroundHover: Colors.AUTHENTIC_BLUE_50,
62-
borderHover: Colors.AUTHENTIC_BLUE_200,
63-
64-
textDisabled: Colors.AUTHENTIC_BLUE_200,
65-
iconDisabled: Colors.AUTHENTIC_BLUE_200,
66-
backgroundDisabled: Colors.WHITE,
67-
borderDisabled: Colors.AUTHENTIC_BLUE_200,
68-
69-
textInverted: Colors.WHITE,
70-
iconInverted: Colors.WHITE,
71-
backgroundInverted: 'transparent',
72-
borderInverted: Colors.WHITE,
73-
74-
textHoverInverted: Colors.AUTHENTIC_BLUE_900,
75-
iconHoverInverted: Colors.AUTHENTIC_BLUE_900,
76-
backgroundHoverInverted: Colors.WHITE,
77-
borderHoverInverted: Colors.WHITE,
78-
79-
textDisabledInverted: Colors.AUTHENTIC_BLUE_550,
80-
iconDisabledInverted: Colors.AUTHENTIC_BLUE_550,
81-
backgroundDisabledInverted: 'transparent',
82-
borderDisabledInverted: Colors.AUTHENTIC_BLUE_550
83-
},
84-
danger: {
85-
text: Colors.WHITE,
86-
icon: Colors.WHITE,
87-
background: Colors.NEGATIVE_ORANGE_900,
88-
border: Colors.NEGATIVE_ORANGE_900,
89-
90-
textHover: Colors.WHITE,
91-
iconHover: Colors.WHITE,
92-
backgroundHover: Colors.NEGATIVE_ORANGE_1000,
93-
borderHover: Colors.NEGATIVE_ORANGE_1000,
94-
95-
textDisabled: Colors.WHITE,
96-
iconDisabled: Colors.WHITE,
97-
backgroundDisabled: Colors.AUTHENTIC_BLUE_200,
98-
borderDisabled: Colors.AUTHENTIC_BLUE_200,
99-
100-
textInverted: Colors.WHITE,
101-
iconInverted: Colors.WHITE,
102-
backgroundInverted: Colors.NEGATIVE_ORANGE_900,
103-
borderInverted: Colors.NEGATIVE_ORANGE_900,
104-
105-
textHoverInverted: Colors.WHITE,
106-
iconHoverInverted: Colors.WHITE,
107-
backgroundHoverInverted: Colors.NEGATIVE_ORANGE_1000,
108-
borderHoverInverted: Colors.NEGATIVE_ORANGE_1000,
109-
110-
textDisabledInverted: Colors.WHITE,
111-
iconDisabledInverted: Colors.WHITE,
112-
backgroundDisabledInverted: Colors.AUTHENTIC_BLUE_200,
113-
borderDisabledInverted: Colors.AUTHENTIC_BLUE_200
114-
}
115-
};
116-
117-
const variantStyles = variant({
21+
const variantStyles = variant<ComponentSemanticTokens, Variant>({
11822
variants: {
11923
primary: {
120-
color: 'var(--button-primary-text)',
121-
fill: 'var(--button-primary-icon)',
122-
background: 'var(--button-primary-background)',
123-
borderColor: 'var(--button-primary-border)',
24+
color: 'var(--wave-s-color-text-primaryInverted)',
25+
fill: 'var(--wave-s-color-icon-primary-inverted)',
26+
background: 'var(--wave-s-color-background-primary-emphasized)',
27+
borderColor: 'var(--wave-s-color-border-primary-default)',
12428

12529
'&:hover': {
126-
color: 'var(--button-primary-textHover)',
127-
fill: 'var(--button-primary-iconHover)',
128-
background: 'var(--button-primary-backgroundHover)',
129-
borderColor: 'var(--button-primary-borderHover)'
30+
color: 'var(--wave-s-color-text-primaryInverted)',
31+
fill: 'var(--wave-s-color-icon-primary-inverted)',
32+
background: 'var(--wave-s-color-background-primary-hover)',
33+
borderColor: 'var(--wave-s-color-border-primary-emphasized)'
13034
},
13135

13236
'&:disabled': {
133-
color: 'var(--button-primary-textDisabled)',
134-
fill: 'var(--button-primary-iconDisabled)',
135-
background: 'var(--button-primary-backgroundDisabled)',
136-
borderColor: 'var(--button-primary-borderDisabled)'
37+
color: 'var(--wave-s-color-text-primaryInverted)',
38+
fill: 'var(--wave-s-color-icon-primary-inverted)',
39+
background: 'var(--wave-s-color-background-primary-disabled)',
40+
borderColor: 'var(--wave-s-color-border-disabled-default)'
13741
}
13842
},
13943
secondary: {
140-
color: 'var(--button-secondary-text)',
141-
fill: 'var(--button-secondary-icon)',
142-
143-
background: 'var(--button-secondary-background)',
144-
borderColor: 'var(--button-secondary-border)',
44+
color: 'var(--wave-s-color-text-primary)',
45+
fill: 'var(--wave-s-color-icon-primary-default)',
46+
background: 'var(--wave-s-color-background-primary-default)',
47+
borderColor: 'var(--wave-s-color-border-secondary-default)',
14548

14649
'&:hover': {
147-
color: 'var(--button-secondary-textHover)',
148-
fill: 'var(--button-secondary-iconHover)',
149-
background: 'var(--button-secondary-backgroundHover)',
150-
borderColor: 'var(--button-secondary-borderHover)'
50+
color: 'var(--wave-s-color-text-primary)',
51+
fill: 'var(--wave-s-color-icon-primary-default)',
52+
background: 'var(--wave-s-color-background-secondary-default)',
53+
borderColor: 'var(--wave-s-color-border-secondary-default)'
15154
},
15255

15356
'&:disabled': {
154-
color: 'var(--button-secondary-textDisabled)',
155-
fill: 'var(--button-secondary-iconDisabled)',
156-
background: 'var(--button-secondary-backgroundDisabled)',
157-
borderColor: 'var(--button-secondary-borderDisabled)'
57+
color: 'var(--wave-s-color-text-disabled)',
58+
fill: 'var(--wave-s-color-icon-disabled-default)',
59+
background: 'var(--wave-s-color-background-primary-default)',
60+
borderColor: 'var(--wave-s-color-border-disabled-default)'
15861
}
15962
},
16063
danger: {
161-
color: 'var(--button-danger-text)',
162-
fill: 'var(--button-danger-icon)',
163-
background: 'var(--button-danger-background)',
164-
borderColor: 'var(--button-danger-border)',
64+
color: 'var(--wave-s-color-text-primaryInverted)',
65+
fill: 'var(--wave-s-color-icon-primary-inverted)',
66+
background: 'var(--wave-s-color-background-danger-emphasized)',
67+
borderColor: 'var(--wave-s-color-border-danger-default)',
16568

16669
'&:hover': {
167-
color: 'var(--button-danger-textHover)',
168-
fill: 'var(--button-danger-iconHover)',
169-
background: 'var(--button-danger-backgroundHover)',
170-
borderColor: 'var(--button-danger-borderHover)'
70+
color: 'var(--wave-s-color-text-primaryInverted)',
71+
fill: 'var(--wave-s-color-icon-primary-inverted)',
72+
background: 'var(--wave-s-color-background-danger-hover)',
73+
borderColor: 'var(--wave-s-color-border-danger-emphasized)'
17174
},
17275

17376
'&:disabled': {
174-
color: 'var(--button-danger-textDisabled)',
175-
fill: 'var(--button-danger-iconDisabled)',
176-
background: 'var(--button-danger-backgroundDisabled)',
177-
borderColor: 'var(--button-danger-borderDisabled)'
77+
color: 'var(--wave-s-color-text-primaryInverted)',
78+
fill: 'var(--wave-s-color-icon-primary-inverted)',
79+
background: 'var(--wave-s-color-background-primary-disabled)',
80+
borderColor: 'var(--wave-s-color-border-disabled-default)'
17881
}
17982
}
18083
}
18184
});
18285

183-
const invertedVariantStyles = variant({
86+
const invertedVariantStyles = variant<ComponentSemanticTokens, Variant>({
18487
variants: {
18588
primary: {
186-
color: 'var(--button-primary-textInverted)',
187-
fill: 'var(--button-primary-iconInverted)',
188-
background: 'var(--button-primary-backgroundInverted)',
189-
borderColor: 'var(--button-primary-borderInverted)',
89+
color: 'var(--wave-s-color-text-primary)',
90+
fill: 'var(--wave-s-color-icon-primary-default)',
91+
background: 'var(--wave-s-color-background-primary-default)',
92+
borderColor: 'var(--wave-s-color-border-primary-inverted)',
19093

19194
'&:hover': {
192-
color: 'var(--button-primary-textHoverInverted)',
193-
fill: 'var(--button-primary-iconHoverInverted)',
194-
background: 'var(--button-primary-backgroundHoverInverted)',
195-
borderColor: 'var(--button-primary-borderHoverInverted)'
95+
color: 'var(--wave-s-color-text-tertiaryInverted)',
96+
fill: 'var(--wave-s-color-icon-primary-inverted)',
97+
background: 'var(--wave-s-color-background-primary-emphasized)',
98+
borderColor: 'var(--wave-s-color-border-primary-default)'
19699
},
197100
'&:disabled': {
198-
color: 'var(--button-primary-textDisabledInverted)',
199-
fill: 'var(--button-primary-iconDisabledInverted)',
200-
background: 'var(--button-primary-backgroundDisabledInverted)',
201-
borderColor: 'var(--button-primary-borderDisabledInverted)'
101+
color: 'var(--wave-s-color-text-tertiaryInverted)',
102+
fill: 'var(--wave-s-color-icon-tertiary-default)',
103+
background: 'var(--wave-s-color-background-secondary-emphasized)',
104+
borderColor: 'var(--wave-s-color-border-disabled-inverted)'
202105
}
203106
},
204107
secondary: {
205-
color: 'var(--button-secondary-textInverted)',
206-
fill: 'var(--button-secondary-iconInverted)',
207-
background: 'var(--button-secondary-backgroundInverted)',
208-
borderColor: 'var(--button-secondary-borderInverted)',
108+
color: 'var(--wave-s-color-text-primaryInverted)',
109+
fill: 'var(--wave-s-color-icon-primary-inverted)',
110+
background: 'var(--wave-s-color-background-transparent)',
111+
borderColor: 'var(--wave-s-color-border-secondary-inverted)',
209112

210113
'&:hover': {
211-
color: 'var(--button-secondary-textHoverInverted)',
212-
fill: 'var(--button-secondary-iconHoverInverted)',
213-
background: 'var(--button-secondary-backgroundHoverInverted)',
214-
borderColor: 'var(--button-secondary-borderHoverInverted)'
114+
color: 'var(--wave-s-color-text-primary)',
115+
fill: 'var(--wave-s-color-icon-primary-default)',
116+
background: 'var(--wave-s-color-background-primary-default)',
117+
borderColor: 'var(--wave-s-color-border-secondary-inverted)'
215118
},
216119
'&:disabled': {
217-
color: 'var(--button-secondary-textDisabledInverted)',
218-
fill: 'var(--button-secondary-iconDisabledInverted)',
219-
background: 'var(--button-secondary-backgroundDisabledInverted)',
220-
borderColor: 'var(--button-secondary-borderDisabledInverted)'
120+
color: 'var(--wave-s-color-text-disabledInverted)',
121+
fill: 'var(--wave-s-color-icon-disabled-inverted)',
122+
background: 'var(--wave-s-color-background-transparent)',
123+
borderColor: 'var(--wave-s-color-border-disabled-inverted)'
221124
}
222125
},
223126
danger: {
224-
color: 'var(--button-danger-textInverted)',
225-
fill: 'var(--button-danger-iconInverted)',
226-
background: 'var(--button-danger-backgroundInverted)',
227-
borderColor: 'var(--button-danger-borderInverted)',
127+
color: 'var(--wave-s-color-text-primaryInverted)',
128+
fill: 'var(--wave-s-color-icon-primary-inverted)',
129+
background: 'var(--wave-s-color-background-danger-emphasized)',
130+
borderColor: 'var(--wave-s-color-border-danger-default)',
228131

229132
'&:hover': {
230-
color: 'var(--button-danger-textHoverInverted)',
231-
fill: 'var(--button-danger-iconHoverInverted)',
232-
background: 'var(--button-danger-backgroundHoverInverted)',
233-
borderColor: 'var(--button-danger-borderHoverInverted)'
133+
color: 'var(--wave-s-color-text-primaryInverted)',
134+
fill: 'var(--wave-s-color-icon-primary-inverted)',
135+
background: 'var(--wave-s-color-background-danger-hover)',
136+
borderColor: 'var(--wave-s-color-border-danger-emphasized)'
234137
},
235138
'&:disabled': {
236-
color: 'var(--button-danger-textDisabledInverted)',
237-
fill: 'var(--button-danger-iconDisabledInverted)',
238-
background: 'var(--button-danger-backgroundDisabledInverted)',
239-
borderColor: 'var(--button-danger-borderDisabledInverted)'
139+
color: 'var(--wave-s-color-text-primaryInverted)',
140+
fill: 'var(--wave-s-color-icon-primary-inverted)',
141+
background: 'var(--wave-s-color-background-primary-disabled)',
142+
borderColor: 'var(--wave-s-color-border-disabled-default)'
240143
}
241144
}
242145
}

0 commit comments

Comments
 (0)