Skip to content
This repository was archived by the owner on Mar 4, 2020. It is now read-only.

Commit f928f8d

Browse files
bcalveryalinais
bcalvery
authored and
alinais
committed
fix(Button): Implementing Contrast Theme and Updating Dark Theme (#381)
* implementing contrast theme with necessary changes to Button component (buttonStyles) * Refactoring buttonStyles to be a little more organized. * Refactoring buttonVariables to use Partial utility.
1 parent 5d75ed9 commit f928f8d

File tree

6 files changed

+131
-75
lines changed

6 files changed

+131
-75
lines changed

‎CHANGELOG.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
3636
- Fix icon colors for Teams theme @codepretty ([#384](https://github.com/stardust-ui/react/pull/384))
3737
- Do not render the Attachment's `progress` value to the DOM @levithomason ([#402](https://github.com/stardust-ui/react/pull/402))
3838
- Add dark theme and contrast theme for Avatar and Status Indicator @bcalvery ([#373](https://github.com/stardust-ui/react/pull/373))
39+
- Add contrast theme and update dark theme for Button @bcalvery ([#381](https://github.com/stardust-ui/react/pull/381))
3940
- Add Segment background color @levithomason ([#408](https://github.com/stardust-ui/react/pull/408))
4041
- Make `eventStack` subscription logic to be always async @kuzhelov ([#391](https://github.com/stardust-ui/react/pull/391))
4142
- Fix for dotted focus outline in Firefox for `Button` component in docs @Bugaa92 ([#390](https://github.com/stardust-ui/react/pull/390))

‎src/themes/teams-dark/components/Button/buttonVariables.ts

Lines changed: 0 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -7,51 +7,20 @@ export default (siteVars: any): Partial<ButtonVariables> => {
77
colorActive: siteVars.white,
88
colorHover: siteVars.white,
99
colorFocus: siteVars.white,
10-
colorDisabled: siteVars.gray06,
1110
backgroundColor: 'transparent',
12-
backgroundColorActive: siteVars.gray08,
13-
backgroundColorHover: siteVars.gray14,
14-
backgroundColorFocus: siteVars.gray08,
15-
backgroundColorDisabled: siteVars.gray09,
16-
borderColor: siteVars.gray08,
17-
borderColorActive: siteVars.gray06,
18-
borderColorHover: siteVars.gray06,
1911
borderColorFocus: siteVars.black,
2012
borderColorFocusIndicator: siteVars.white,
21-
borderColorDisabled: 'transparent',
2213

23-
primaryColor: siteVars.white,
24-
primaryBackgroundColor: siteVars.brand,
2514
primaryBackgroundColorActive: siteVars.brand08,
2615
primaryBackgroundColorHover: siteVars.brand08,
2716
primaryBackgroundColorFocus: siteVars.brand14,
28-
primaryBorderColor: 'transparent',
29-
primaryBorderColorActive: 'transparent',
30-
primaryBorderColorHover: 'transparent',
3117
primaryBorderColorFocus: siteVars.black,
3218
primaryBorderColorFocusIndicator: siteVars.white,
3319

34-
primaryCircularBorderColorFocusIndicator: siteVars.white,
35-
36-
circularColor: siteVars.gray02,
3720
circularColorActive: siteVars.black,
38-
circularBackgroundColor: 'transparent',
3921
circularBackgroundColorActive: siteVars.gray02,
4022
circularBackgroundColorHover: siteVars.gray03,
4123
circularBackgroundColorFocus: siteVars.gray02,
42-
circularBorderColor: siteVars.gray02,
43-
circularBorderColorActive: 'transparent',
44-
circularBorderColorHover: 'transparent',
45-
circularBorderColorFocus: 'transparent',
4624
circularBorderColorFocusIndicator: siteVars.black,
47-
48-
textColor: siteVars.brand,
49-
textColorHover: siteVars.brand04,
50-
textPrimaryColor: siteVars.brand,
51-
textPrimaryColorHover: siteVars.brand04,
52-
textSecondaryColor: siteVars.gray03,
53-
textSecondaryColorHover: siteVars.brand04,
54-
55-
boxShadow: siteVars.shadowLevel1,
5625
}
5726
}

‎src/themes/teams-high-contrast/componentVariables.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
11
export { default as Avatar } from './components/Avatar/avatarVariables'
2+
3+
export { default as Button } from './components/Button/buttonVariables'
4+
25
export { default as Divider } from './components/Divider/dividerVariables'
6+
37
export { default as Text } from './components/Text/textVariables'

‎src/themes/teams-high-contrast/components/Button/buttonVariables.ts

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { ButtonVariables } from '../../../teams/components/Button/buttonVariables'
2+
import { Partial } from 'types/utils'
3+
4+
export default (siteVars: any): Partial<ButtonVariables> => {
5+
return {
6+
color: siteVars.white,
7+
colorDisabled: siteVars.black,
8+
backgroundColor: 'transparent',
9+
backgroundColorActive: siteVars.accessibleYellow,
10+
backgroundColorHover: siteVars.accessibleYellow,
11+
backgroundColorFocus: siteVars.accessibleYellow,
12+
backgroundColorDisabled: siteVars.accessibleGreen,
13+
borderColor: siteVars.white,
14+
borderColorActive: 'transparent',
15+
borderColorHover: 'transparent',
16+
borderColorFocus: siteVars.black,
17+
borderColorFocusIndicator: siteVars.white,
18+
19+
primaryColor: siteVars.white,
20+
primaryColorActive: siteVars.black,
21+
primaryColorHover: siteVars.black,
22+
primaryColorFocus: siteVars.black,
23+
primaryBackgroundColor: siteVars.black,
24+
primaryBackgroundColorActive: siteVars.accessibleYellow,
25+
primaryBackgroundColorHover: siteVars.accessibleYellow,
26+
primaryBackgroundColorFocus: siteVars.accessibleYellow,
27+
primaryBorderColor: siteVars.white,
28+
primaryBorderColorFocus: siteVars.black,
29+
primaryBorderColorFocusIndicator: siteVars.white,
30+
primaryBorderWidth: 2,
31+
32+
primaryCircularBorderColorFocusIndicator: siteVars.black,
33+
34+
circularColor: siteVars.white,
35+
circularColorActive: siteVars.black,
36+
circularBackgroundColor: siteVars.black,
37+
circularBackgroundColorActive: siteVars.accessibleYellow,
38+
circularBackgroundColorHover: siteVars.accessibleYellow,
39+
circularBackgroundColorFocus: siteVars.accessibleYellow,
40+
circularBorderColor: siteVars.white,
41+
circularBorderColorActive: siteVars.white,
42+
circularBorderColorHover: siteVars.white,
43+
circularBorderColorFocus: siteVars.white,
44+
circularBorderColorFocusIndicator: siteVars.black,
45+
46+
textColor: siteVars.accessibleYellow,
47+
textColorHover: siteVars.accessibleYellow,
48+
textPrimaryColor: siteVars.accessibleYellow,
49+
textPrimaryColorHover: siteVars.accessibleYellow,
50+
textSecondaryColor: siteVars.accessibleYellow,
51+
textSecondaryColorHover: siteVars.accessibleYellow,
52+
53+
boxShadow: 'none',
54+
}
55+
}

‎src/themes/teams/components/Button/buttonStyles.ts

Lines changed: 61 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -31,8 +31,12 @@ const buttonStyles: ComponentSlotStylesInput<ButtonProps & ButtonState, any> = {
3131
borderColorFocus,
3232
borderColorFocusIndicator,
3333
borderColorDisabled,
34+
borderWidth,
3435

3536
primaryColor,
37+
primaryColorActive,
38+
primaryColorHover,
39+
primaryColorFocus,
3640
primaryBackgroundColor,
3741
primaryBackgroundColorActive,
3842
primaryBackgroundColorHover,
@@ -42,6 +46,7 @@ const buttonStyles: ComponentSlotStylesInput<ButtonProps & ButtonState, any> = {
4246
primaryBorderColorHover,
4347
primaryBorderColorFocus,
4448
primaryBorderColorFocusIndicator,
49+
primaryBorderWidth,
4550

4651
primaryCircularBorderColorFocusIndicator,
4752

@@ -80,10 +85,11 @@ const buttonStyles: ComponentSlotStylesInput<ButtonProps & ButtonState, any> = {
8085
verticalAlign: 'middle',
8186
cursor: 'pointer',
8287

88+
// rectangular button defaults
8389
...(!text && {
8490
outline: 0,
8591
borderRadius: '2px',
86-
borderWidth: '1px',
92+
borderWidth: `${pxToRem(borderWidth)}`,
8793
borderStyle: 'solid',
8894
borderColor,
8995
boxShadow,
@@ -100,11 +106,13 @@ const buttonStyles: ComponentSlotStylesInput<ButtonProps & ButtonState, any> = {
100106
':after': {
101107
content: '""',
102108
position: 'absolute',
103-
top: '-2px',
104-
right: '-2px',
105-
bottom: '-2px',
106-
left: '-2px',
107-
border: `${pxToRem(1)} solid ${borderColorFocusIndicator}`,
109+
top: `-${pxToRem(borderWidth * 2)}`,
110+
right: `-${pxToRem(borderWidth * 2)}`,
111+
bottom: `-${pxToRem(borderWidth * 2)}`,
112+
left: `-${pxToRem(borderWidth * 2)}`,
113+
borderWidth: `${pxToRem(borderWidth)}`,
114+
borderStyle: 'solid',
115+
borderColor: `${borderColorFocusIndicator}`,
108116
borderRadius: '3px',
109117
},
110118
},
@@ -121,11 +129,15 @@ const buttonStyles: ComponentSlotStylesInput<ButtonProps & ButtonState, any> = {
121129
}),
122130
}),
123131

132+
// circular button defaults
124133
...(circular &&
125134
!text && {
135+
minWidth: height,
136+
padding: 0,
126137
color: circularColor,
127138
backgroundColor: circularBackgroundColor,
128139
borderColor: circularBorderColor,
140+
borderRadius: circularRadius,
129141
':hover': {
130142
color: circularColorActive,
131143
backgroundColor: circularBackgroundColorHover,
@@ -143,7 +155,9 @@ const buttonStyles: ComponentSlotStylesInput<ButtonProps & ButtonState, any> = {
143155
right: '0',
144156
bottom: '0',
145157
left: '0',
146-
border: `${pxToRem(1)} solid ${circularBorderColorFocusIndicator}`,
158+
borderWidth: `${pxToRem(borderWidth)}`,
159+
borderStyle: 'solid',
160+
borderColor: `${circularBorderColorFocusIndicator}`,
147161
borderRadius: circularRadius,
148162
},
149163
},
@@ -160,36 +174,59 @@ const buttonStyles: ComponentSlotStylesInput<ButtonProps & ButtonState, any> = {
160174
}),
161175
}),
162176

177+
// text button defaults
178+
...(text && {
179+
color: textColor,
180+
backgroundColor: 'transparent',
181+
borderColor: 'transparent',
182+
':hover': {
183+
color: textColorHover,
184+
},
185+
...(primary && {
186+
color: textPrimaryColor,
187+
':hover': {
188+
color: textPrimaryColorHover,
189+
},
190+
}),
191+
}),
192+
193+
// Overrides for "primary" buttons
163194
...(primary &&
164195
!text && {
165196
color: primaryColor,
166197
backgroundColor: primaryBackgroundColor,
167-
borderColor: primaryBorderColor,
198+
borderWidth: `${pxToRem(primaryBorderWidth)}`,
199+
borderStyle: 'solid',
200+
borderColor: `${primaryBorderColor}`,
168201
':hover': {
202+
color: primaryColorHover,
169203
backgroundColor: primaryBackgroundColorHover,
170204
borderColor: primaryBorderColorHover,
171205
},
172-
173206
...(isFromKeyboard &&
174207
!circular && {
175208
':focus': {
209+
color: primaryColorFocus,
176210
backgroundColor: primaryBackgroundColorFocus,
177211
borderColor: primaryBorderColorFocus,
178212
':after': {
179213
content: '""',
180214
position: 'absolute',
181-
top: '-2px',
182-
right: '-2px',
183-
bottom: '-2px',
184-
left: '-2px',
185-
border: `${pxToRem(1)} solid ${primaryBorderColorFocusIndicator}`,
215+
top: `-${pxToRem(primaryBorderWidth * 2)}`,
216+
right: `-${pxToRem(primaryBorderWidth * 2)}`,
217+
bottom: `-${pxToRem(primaryBorderWidth * 2)}`,
218+
left: `-${pxToRem(primaryBorderWidth * 2)}`,
219+
borderWidth: `${pxToRem(primaryBorderWidth)}`,
220+
borderStyle: 'solid',
221+
borderColor: `${primaryBorderColorFocusIndicator}`,
186222
borderRadius: '3px',
187223
},
188224
},
189225
}),
190226
...(isFromKeyboard &&
191227
circular && {
192228
':focus': {
229+
color: primaryColorFocus,
193230
backgroundColor: primaryBackgroundColorFocus,
194231
borderColor: primaryBackgroundColorFocus,
195232
':after': {
@@ -199,14 +236,17 @@ const buttonStyles: ComponentSlotStylesInput<ButtonProps & ButtonState, any> = {
199236
right: '0',
200237
bottom: '0',
201238
left: '0',
202-
border: `${pxToRem(1)} solid ${primaryCircularBorderColorFocusIndicator}`,
239+
borderWidth: `${pxToRem(primaryBorderWidth)}`,
240+
borderStyle: 'solid',
241+
borderColor: `${primaryCircularBorderColorFocusIndicator}`,
203242
borderRadius: circularRadius,
204243
},
205244
},
206245
}),
207246
...(!isFromKeyboard && {
208247
':focus': {
209248
':active': {
249+
color: primaryColorActive,
210250
backgroundColor: primaryBackgroundColorActive,
211251
borderColor: primaryBorderColorActive,
212252
boxShadow: 'none',
@@ -215,34 +255,7 @@ const buttonStyles: ComponentSlotStylesInput<ButtonProps & ButtonState, any> = {
215255
}),
216256
}),
217257

218-
...(text && {
219-
color: textColor,
220-
backgroundColor: 'transparent',
221-
borderColor: 'transparent',
222-
':hover': {
223-
color: textColorHover,
224-
},
225-
}),
226-
227-
...(primary &&
228-
text && {
229-
color: textPrimaryColor,
230-
':hover': {
231-
color: textPrimaryColorHover,
232-
},
233-
}),
234-
235-
...(circular && {
236-
minWidth: height,
237-
padding: 0,
238-
borderRadius: circularRadius,
239-
}),
240-
241-
...(fluid && {
242-
width: '100%',
243-
maxWidth: '100%',
244-
}),
245-
258+
// Overrides for "disabled" buttons
246259
...(disabled && {
247260
cursor: 'default',
248261
color: colorDisabled,
@@ -255,6 +268,11 @@ const buttonStyles: ComponentSlotStylesInput<ButtonProps & ButtonState, any> = {
255268
},
256269
}),
257270

271+
...(fluid && {
272+
width: '100%',
273+
maxWidth: '100%',
274+
}),
275+
258276
...(iconOnly && {
259277
minWidth: height,
260278
padding: 0,

‎src/themes/teams/components/Button/buttonVariables.ts

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,12 @@ export interface ButtonVariables {
2626
borderColorFocus: string
2727
borderColorFocusIndicator: string
2828
borderColorDisabled: string
29+
borderWidth: number
2930

3031
primaryColor: string
32+
primaryColorActive: string
33+
primaryColorHover: string
34+
primaryColorFocus: string
3135
primaryBackgroundColor: string
3236
primaryBackgroundColorActive: string
3337
primaryBackgroundColorHover: string
@@ -37,6 +41,7 @@ export interface ButtonVariables {
3741
primaryBorderColorHover: string
3842
primaryBorderColorFocus: string
3943
primaryBorderColorFocusIndicator: string
44+
primaryBorderWidth: number
4045

4146
primaryCircularBorderColorFocusIndicator: string
4247

@@ -88,18 +93,22 @@ export default (siteVars: any): ButtonVariables => {
8893
borderColorFocus: siteVars.white,
8994
borderColorFocusIndicator: siteVars.black,
9095
borderColorDisabled: 'transparent',
96+
borderWidth: 1,
9197

9298
primaryColor: siteVars.white,
99+
primaryColorActive: siteVars.white,
100+
primaryColorHover: siteVars.white,
101+
primaryColorFocus: siteVars.white,
93102
primaryBackgroundColor: siteVars.brand,
94103
primaryBackgroundColorActive: siteVars.brand02,
95104
primaryBackgroundColorHover: siteVars.brand04,
96105
primaryBackgroundColorFocus: siteVars.brand04,
97-
primaryBackgroundColorDisabled: siteVars.brand04,
98106
primaryBorderColor: 'transparent',
99107
primaryBorderColorActive: 'transparent',
100108
primaryBorderColorHover: 'transparent',
101109
primaryBorderColorFocus: siteVars.white,
102110
primaryBorderColorFocusIndicator: siteVars.black,
111+
primaryBorderWidth: 1,
103112

104113
primaryCircularBorderColorFocusIndicator: siteVars.white,
105114

0 commit comments

Comments
 (0)