Skip to content

Commit 43fde61

Browse files
HerrTopiHerrTopi
committed
feat(shared-types,ui-buttons): add theme variables for default and hover states for buttons
Closes: INSTUI-4421
1 parent e8db0f2 commit 43fde61

File tree

4 files changed

+90
-22
lines changed

4 files changed

+90
-22
lines changed

‎packages/shared-types/src/ComponentThemeVariables.ts‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -182,6 +182,10 @@ export type BaseButtonTheme = {
182182
primaryGhostHoverBackground: Colors['contrasts']['blue1212']
183183
primaryGhostActiveBackground: string
184184
primaryGhostActiveBoxShadow: string
185+
primaryBoxShadow: string
186+
primaryGhostBoxShadow: string
187+
primaryHoverBoxShadow: string
188+
primaryGhostHoverBoxShadow: string
185189

186190
secondaryColor: Colors['contrasts']['grey125125']
187191
secondaryBorderColor: Colors['contrasts']['grey1214']
@@ -195,6 +199,10 @@ export type BaseButtonTheme = {
195199
secondaryGhostHoverBackground: Colors['contrasts']['grey1111']
196200
secondaryGhostActiveBackground: string
197201
secondaryGhostActiveBoxShadow: string
202+
secondaryBoxShadow: string
203+
secondaryGhostBoxShadow: string
204+
secondaryHoverBoxShadow: string
205+
secondaryGhostHoverBoxShadow: string
198206

199207
successColor: Colors['contrasts']['white1010']
200208
successBorderColor: Colors['contrasts']['green5782']
@@ -208,6 +216,10 @@ export type BaseButtonTheme = {
208216
successGhostHoverBackground: Colors['contrasts']['green1212']
209217
successGhostActiveBackground: string
210218
successGhostActiveBoxShadow: string
219+
successBoxShadow: string
220+
successGhostBoxShadow: string
221+
successHoverBoxShadow: string
222+
successGhostHoverBoxShadow: string
211223

212224
dangerColor: Colors['contrasts']['white1010']
213225
dangerBorderColor: Colors['contrasts']['red5782']
@@ -221,6 +233,10 @@ export type BaseButtonTheme = {
221233
dangerGhostHoverBackground: Colors['contrasts']['red1212']
222234
dangerGhostActiveBackground: string
223235
dangerGhostActiveBoxShadow: string
236+
dangerBoxShadow: string
237+
dangerGhostBoxShadow: string
238+
dangerHoverBoxShadow: string
239+
dangerGhostHoverBoxShadow: string
224240

225241
primaryInverseColor: Colors['contrasts']['grey125125']
226242
primaryInverseBorderColor: Colors['contrasts']['grey1214']
@@ -234,6 +250,10 @@ export type BaseButtonTheme = {
234250
primaryInverseGhostHoverBackground: Colors['contrasts']['grey1111']
235251
primaryInverseGhostActiveBackground: string
236252
primaryInverseGhostActiveBoxShadow: string
253+
primaryInverseBoxShadow: string
254+
primaryInverseGhostBoxShadow: string
255+
primaryInverseHoverBoxShadow: string
256+
primaryInverseGhostHoverBoxShadow: string
237257
}
238258

239259
export type CloseButtonTheme = {

‎packages/ui-buttons/src/BaseButton/styles.ts‎

Lines changed: 40 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -136,28 +136,32 @@ const generateStyle = (
136136
default: {
137137
color: componentTheme.primaryColor,
138138
background: componentTheme.primaryBackground,
139-
borderColor: componentTheme.primaryBorderColor
139+
borderColor: componentTheme.primaryBorderColor,
140+
boxShadow: componentTheme.primaryBoxShadow
140141
},
141142
active: {
142143
background: componentTheme.primaryActiveBackground,
143144
boxShadow: componentTheme.primaryActiveBoxShadow
144145
},
145146
hover: {
146-
background: componentTheme.primaryHoverBackground
147+
background: componentTheme.primaryHoverBackground,
148+
boxShadow: componentTheme.primaryHoverBoxShadow
147149
}
148150
}
149151
: {
150152
default: {
151153
color: componentTheme.primaryGhostColor,
152154
borderColor: componentTheme.primaryGhostBorderColor,
153-
background: componentTheme.primaryGhostBackground
155+
background: componentTheme.primaryGhostBackground,
156+
boxShadow: componentTheme.primaryBoxShadow
154157
},
155158
active: {
156159
background: componentTheme.primaryGhostActiveBackground,
157160
boxShadow: componentTheme.primaryGhostActiveBoxShadow
158161
},
159162
hover: {
160-
background: componentTheme.primaryGhostHoverBackground
163+
background: componentTheme.primaryGhostHoverBackground,
164+
boxShadow: componentTheme.primaryHoverBoxShadow
161165
}
162166
},
163167

@@ -166,28 +170,32 @@ const generateStyle = (
166170
default: {
167171
color: componentTheme.secondaryColor,
168172
background: componentTheme.secondaryBackground,
169-
borderColor: componentTheme.secondaryBorderColor
173+
borderColor: componentTheme.secondaryBorderColor,
174+
boxShadow: componentTheme.secondaryBoxShadow
170175
},
171176
active: {
172177
background: componentTheme.secondaryActiveBackground,
173178
boxShadow: componentTheme.secondaryActiveBoxShadow
174179
},
175180
hover: {
176-
background: componentTheme.secondaryHoverBackground
181+
background: componentTheme.secondaryHoverBackground,
182+
boxShadow: componentTheme.secondaryHoverBoxShadow
177183
}
178184
}
179185
: {
180186
default: {
181187
color: componentTheme.secondaryGhostColor,
182188
borderColor: componentTheme.secondaryGhostBorderColor,
183-
background: componentTheme.secondaryGhostBackground
189+
background: componentTheme.secondaryGhostBackground,
190+
boxShadow: componentTheme.secondaryGhostBoxShadow
184191
},
185192
active: {
186193
background: componentTheme.secondaryGhostActiveBackground,
187194
boxShadow: componentTheme.secondaryGhostActiveBoxShadow
188195
},
189196
hover: {
190-
background: componentTheme.secondaryGhostHoverBackground
197+
background: componentTheme.secondaryGhostHoverBackground,
198+
boxShadow: componentTheme.secondaryGhostHoverBoxShadow
191199
}
192200
},
193201

@@ -196,28 +204,32 @@ const generateStyle = (
196204
default: {
197205
color: componentTheme.primaryInverseColor,
198206
background: componentTheme.primaryInverseBackground,
199-
borderColor: componentTheme.primaryInverseBorderColor
207+
borderColor: componentTheme.primaryInverseBorderColor,
208+
boxShadow: componentTheme.primaryInverseBoxShadow
200209
},
201210
active: {
202211
background: componentTheme.primaryInverseActiveBackground,
203212
boxShadow: componentTheme.primaryInverseActiveBoxShadow
204213
},
205214
hover: {
206-
background: componentTheme.primaryInverseHoverBackground
215+
background: componentTheme.primaryInverseHoverBackground,
216+
boxShadow: componentTheme.primaryInverseHoverBoxShadow
207217
}
208218
}
209219
: {
210220
default: {
211221
color: componentTheme.primaryInverseGhostColor,
212222
borderColor: componentTheme.primaryInverseGhostBorderColor,
213-
background: componentTheme.primaryInverseGhostBackground
223+
background: componentTheme.primaryInverseGhostBackground,
224+
boxShadow: componentTheme.primaryInverseGhostBoxShadow
214225
},
215226
active: {
216227
background: componentTheme.primaryInverseGhostActiveBackground,
217228
boxShadow: componentTheme.primaryInverseGhostActiveBoxShadow
218229
},
219230
hover: {
220-
background: componentTheme.primaryInverseGhostHoverBackground
231+
background: componentTheme.primaryInverseGhostHoverBackground,
232+
boxShadow: componentTheme.primaryInverseGhostHoverBoxShadow
221233
}
222234
},
223235

@@ -226,28 +238,32 @@ const generateStyle = (
226238
default: {
227239
color: componentTheme.successColor,
228240
background: componentTheme.successBackground,
229-
borderColor: componentTheme.successBorderColor
241+
borderColor: componentTheme.successBorderColor,
242+
boxShadow: componentTheme.successBoxShadow
230243
},
231244
active: {
232245
background: componentTheme.successActiveBackground,
233246
boxShadow: componentTheme.successActiveBoxShadow
234247
},
235248
hover: {
236-
background: componentTheme.successHoverBackground
249+
background: componentTheme.successHoverBackground,
250+
boxShadow: componentTheme.successHoverBoxShadow
237251
}
238252
}
239253
: {
240254
default: {
241255
color: componentTheme.successGhostColor,
242256
borderColor: componentTheme.successGhostBorderColor,
243-
background: componentTheme.successGhostBackground
257+
background: componentTheme.successGhostBackground,
258+
boxShadow: componentTheme.successGhostBoxShadow
244259
},
245260
active: {
246261
background: componentTheme.successGhostActiveBackground,
247262
boxShadow: componentTheme.successGhostActiveBoxShadow
248263
},
249264
hover: {
250-
background: componentTheme.successGhostHoverBackground
265+
background: componentTheme.successGhostHoverBackground,
266+
boxShadow: componentTheme.successGhostHoverBoxShadow
251267
}
252268
},
253269

@@ -256,28 +272,32 @@ const generateStyle = (
256272
default: {
257273
color: componentTheme.dangerColor,
258274
background: componentTheme.dangerBackground,
259-
borderColor: componentTheme.dangerBorderColor
275+
borderColor: componentTheme.dangerBorderColor,
276+
boxShadow: componentTheme.dangerBoxShadow
260277
},
261278
active: {
262279
background: componentTheme.dangerActiveBackground,
263280
boxShadow: componentTheme.dangerActiveBoxShadow
264281
},
265282
hover: {
266-
background: componentTheme.dangerHoverBackground
283+
background: componentTheme.dangerHoverBackground,
284+
boxShadow: componentTheme.dangerHoverBoxShadow
267285
}
268286
}
269287
: {
270288
default: {
271289
color: componentTheme.dangerGhostColor,
272290
borderColor: componentTheme.dangerGhostBorderColor,
273-
background: componentTheme.dangerGhostBackground
291+
background: componentTheme.dangerGhostBackground,
292+
boxShadow: componentTheme.dangerGhostBoxShadow
274293
},
275294
active: {
276295
background: componentTheme.dangerGhostActiveBackground,
277296
boxShadow: componentTheme.dangerGhostActiveBoxShadow
278297
},
279298
hover: {
280-
background: componentTheme.dangerGhostHoverBackground
299+
background: componentTheme.dangerGhostHoverBackground,
300+
boxShadow: componentTheme.dangerGhostHoverBoxShadow
281301
}
282302
}
283303
}

‎packages/ui-buttons/src/BaseButton/theme.ts‎

Lines changed: 21 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -113,6 +113,10 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
113113
colors?.contrasts?.blue1212,
114114
28
115115
)}`,
116+
primaryBoxShadow: 'none',
117+
primaryGhostBoxShadow: 'none',
118+
primaryHoverBoxShadow: 'none',
119+
primaryGhostHoverBoxShadow: 'none',
116120

117121
secondaryColor: colors?.contrasts?.grey125125,
118122
secondaryBorderColor: colors?.contrasts?.grey1214,
@@ -129,6 +133,10 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
129133
colors?.contrasts?.grey125125,
130134
28
131135
)}`,
136+
secondaryBoxShadow: 'none',
137+
secondaryGhostBoxShadow: 'none',
138+
secondaryHoverBoxShadow: 'none',
139+
secondaryGhostHoverBoxShadow: 'none',
132140

133141
successColor: colors?.contrasts?.white1010,
134142
successBorderColor: colors?.contrasts?.green5782,
@@ -145,6 +153,10 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
145153
colors?.contrasts?.green4570,
146154
28
147155
)}`,
156+
successBoxShadow: 'none',
157+
successGhostBoxShadow: 'none',
158+
successHoverBoxShadow: 'none',
159+
successGhostHoverBoxShadow: 'none',
148160

149161
dangerColor: colors?.contrasts?.white1010,
150162
dangerBorderColor: colors?.contrasts?.red5782,
@@ -161,6 +173,10 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
161173
colors?.contrasts?.red4570,
162174
28
163175
)}`,
176+
dangerBoxShadow: 'none',
177+
dangerGhostBoxShadow: 'none',
178+
dangerHoverBoxShadow: 'none',
179+
dangerGhostHoverBoxShadow: 'none',
164180

165181
primaryInverseColor: colors?.contrasts?.grey125125,
166182
primaryInverseBorderColor: colors?.contrasts?.grey1214,
@@ -176,7 +192,11 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
176192
primaryInverseGhostActiveBoxShadow: `${activeShadow} ${alpha(
177193
colors?.contrasts?.white1010,
178194
28
179-
)}`
195+
)}`,
196+
primaryInverseBoxShadow: 'none',
197+
primaryInverseGhostBoxShadow: 'none',
198+
primaryInverseHoverBoxShadow: 'none',
199+
primaryInverseGhostHoverBoxShadow: 'none'
180200
}
181201

182202
return {

‎packages/ui-buttons/src/Button/README.md‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -249,7 +249,15 @@ type: example
249249
secondaryGhostActiveBackground: '#FF0000',
250250
secondaryGhostActiveBoxShadow: '10px 5px 5px green',
251251

252-
secondaryGhostHoverBackground: '#00FFFF'
252+
secondaryGhostHoverBackground: '#00FFFF',
253+
254+
secondaryBoxShadow: '0 0 0.4875rem 0.625rem yellow',
255+
secondaryHoverBoxShadow: '0 0 0.1875rem 0.625rem lime',
256+
secondaryActiveBoxShadow: '0 0px 0px 25px red',
257+
secondaryGhostHoverBoxShadow: '0 0 0.7875rem 0.625rem pink',
258+
secondaryGhostBoxShadow: '0 0 0.2875rem 0.625rem green',
259+
secondaryGhostActiveBoxShadow: '10px 5px 5px blue'
260+
253261
}
254262
return (
255263
<>

0 commit comments

Comments
 (0)