Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(shared-types,ui-buttons): add theme variables for default and hover states for buttons #1840

Merged
merged 1 commit into from
Jan 10, 2025
Merged

feat(shared-types,ui-buttons): add theme variables for default and hover states for buttons #1840

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions packages/shared-types/src/ComponentThemeVariables.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -182,6 +182,10 @@ export type BaseButtonTheme = {
primaryGhostHoverBackground: Colors['contrasts']['blue1212']
primaryGhostActiveBackground: string
primaryGhostActiveBoxShadow: string
primaryBoxShadow: string
primaryGhostBoxShadow: string
primaryHoverBoxShadow: string
primaryGhostHoverBoxShadow: string

secondaryColor: Colors['contrasts']['grey125125']
secondaryBorderColor: Colors['contrasts']['grey1214']
Expand All @@ -195,6 +199,10 @@ export type BaseButtonTheme = {
secondaryGhostHoverBackground: Colors['contrasts']['grey1111']
secondaryGhostActiveBackground: string
secondaryGhostActiveBoxShadow: string
secondaryBoxShadow: string
secondaryGhostBoxShadow: string
secondaryHoverBoxShadow: string
secondaryGhostHoverBoxShadow: string

successColor: Colors['contrasts']['white1010']
successBorderColor: Colors['contrasts']['green5782']
Expand All @@ -208,6 +216,10 @@ export type BaseButtonTheme = {
successGhostHoverBackground: Colors['contrasts']['green1212']
successGhostActiveBackground: string
successGhostActiveBoxShadow: string
successBoxShadow: string
successGhostBoxShadow: string
successHoverBoxShadow: string
successGhostHoverBoxShadow: string

dangerColor: Colors['contrasts']['white1010']
dangerBorderColor: Colors['contrasts']['red5782']
Expand All @@ -221,6 +233,10 @@ export type BaseButtonTheme = {
dangerGhostHoverBackground: Colors['contrasts']['red1212']
dangerGhostActiveBackground: string
dangerGhostActiveBoxShadow: string
dangerBoxShadow: string
dangerGhostBoxShadow: string
dangerHoverBoxShadow: string
dangerGhostHoverBoxShadow: string

primaryInverseColor: Colors['contrasts']['grey125125']
primaryInverseBorderColor: Colors['contrasts']['grey1214']
Expand All @@ -234,6 +250,10 @@ export type BaseButtonTheme = {
primaryInverseGhostHoverBackground: Colors['contrasts']['grey1111']
primaryInverseGhostActiveBackground: string
primaryInverseGhostActiveBoxShadow: string
primaryInverseBoxShadow: string
primaryInverseGhostBoxShadow: string
primaryInverseHoverBoxShadow: string
primaryInverseGhostHoverBoxShadow: string
}

export type CloseButtonTheme = {
Expand Down
60 changes: 40 additions & 20 deletions packages/ui-buttons/src/BaseButton/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -136,28 +136,32 @@ const generateStyle = (
default: {
color: componentTheme.primaryColor,
background: componentTheme.primaryBackground,
borderColor: componentTheme.primaryBorderColor
borderColor: componentTheme.primaryBorderColor,
boxShadow: componentTheme.primaryBoxShadow
},
active: {
background: componentTheme.primaryActiveBackground,
boxShadow: componentTheme.primaryActiveBoxShadow
},
hover: {
background: componentTheme.primaryHoverBackground
background: componentTheme.primaryHoverBackground,
boxShadow: componentTheme.primaryHoverBoxShadow
}
}
: {
default: {
color: componentTheme.primaryGhostColor,
borderColor: componentTheme.primaryGhostBorderColor,
background: componentTheme.primaryGhostBackground
background: componentTheme.primaryGhostBackground,
boxShadow: componentTheme.primaryBoxShadow
},
active: {
background: componentTheme.primaryGhostActiveBackground,
boxShadow: componentTheme.primaryGhostActiveBoxShadow
},
hover: {
background: componentTheme.primaryGhostHoverBackground
background: componentTheme.primaryGhostHoverBackground,
boxShadow: componentTheme.primaryHoverBoxShadow
}
},

Expand All @@ -166,28 +170,32 @@ const generateStyle = (
default: {
color: componentTheme.secondaryColor,
background: componentTheme.secondaryBackground,
borderColor: componentTheme.secondaryBorderColor
borderColor: componentTheme.secondaryBorderColor,
boxShadow: componentTheme.secondaryBoxShadow
},
active: {
background: componentTheme.secondaryActiveBackground,
boxShadow: componentTheme.secondaryActiveBoxShadow
},
hover: {
background: componentTheme.secondaryHoverBackground
background: componentTheme.secondaryHoverBackground,
boxShadow: componentTheme.secondaryHoverBoxShadow
}
}
: {
default: {
color: componentTheme.secondaryGhostColor,
borderColor: componentTheme.secondaryGhostBorderColor,
background: componentTheme.secondaryGhostBackground
background: componentTheme.secondaryGhostBackground,
boxShadow: componentTheme.secondaryGhostBoxShadow
},
active: {
background: componentTheme.secondaryGhostActiveBackground,
boxShadow: componentTheme.secondaryGhostActiveBoxShadow
},
hover: {
background: componentTheme.secondaryGhostHoverBackground
background: componentTheme.secondaryGhostHoverBackground,
boxShadow: componentTheme.secondaryGhostHoverBoxShadow
}
},

Expand All @@ -196,28 +204,32 @@ const generateStyle = (
default: {
color: componentTheme.primaryInverseColor,
background: componentTheme.primaryInverseBackground,
borderColor: componentTheme.primaryInverseBorderColor
borderColor: componentTheme.primaryInverseBorderColor,
boxShadow: componentTheme.primaryInverseBoxShadow
},
active: {
background: componentTheme.primaryInverseActiveBackground,
boxShadow: componentTheme.primaryInverseActiveBoxShadow
},
hover: {
background: componentTheme.primaryInverseHoverBackground
background: componentTheme.primaryInverseHoverBackground,
boxShadow: componentTheme.primaryInverseHoverBoxShadow
}
}
: {
default: {
color: componentTheme.primaryInverseGhostColor,
borderColor: componentTheme.primaryInverseGhostBorderColor,
background: componentTheme.primaryInverseGhostBackground
background: componentTheme.primaryInverseGhostBackground,
boxShadow: componentTheme.primaryInverseGhostBoxShadow
},
active: {
background: componentTheme.primaryInverseGhostActiveBackground,
boxShadow: componentTheme.primaryInverseGhostActiveBoxShadow
},
hover: {
background: componentTheme.primaryInverseGhostHoverBackground
background: componentTheme.primaryInverseGhostHoverBackground,
boxShadow: componentTheme.primaryInverseGhostHoverBoxShadow
}
},

Expand All @@ -226,28 +238,32 @@ const generateStyle = (
default: {
color: componentTheme.successColor,
background: componentTheme.successBackground,
borderColor: componentTheme.successBorderColor
borderColor: componentTheme.successBorderColor,
boxShadow: componentTheme.successBoxShadow
},
active: {
background: componentTheme.successActiveBackground,
boxShadow: componentTheme.successActiveBoxShadow
},
hover: {
background: componentTheme.successHoverBackground
background: componentTheme.successHoverBackground,
boxShadow: componentTheme.successHoverBoxShadow
}
}
: {
default: {
color: componentTheme.successGhostColor,
borderColor: componentTheme.successGhostBorderColor,
background: componentTheme.successGhostBackground
background: componentTheme.successGhostBackground,
boxShadow: componentTheme.successGhostBoxShadow
},
active: {
background: componentTheme.successGhostActiveBackground,
boxShadow: componentTheme.successGhostActiveBoxShadow
},
hover: {
background: componentTheme.successGhostHoverBackground
background: componentTheme.successGhostHoverBackground,
boxShadow: componentTheme.successGhostHoverBoxShadow
}
},

Expand All @@ -256,28 +272,32 @@ const generateStyle = (
default: {
color: componentTheme.dangerColor,
background: componentTheme.dangerBackground,
borderColor: componentTheme.dangerBorderColor
borderColor: componentTheme.dangerBorderColor,
boxShadow: componentTheme.dangerBoxShadow
},
active: {
background: componentTheme.dangerActiveBackground,
boxShadow: componentTheme.dangerActiveBoxShadow
},
hover: {
background: componentTheme.dangerHoverBackground
background: componentTheme.dangerHoverBackground,
boxShadow: componentTheme.dangerHoverBoxShadow
}
}
: {
default: {
color: componentTheme.dangerGhostColor,
borderColor: componentTheme.dangerGhostBorderColor,
background: componentTheme.dangerGhostBackground
background: componentTheme.dangerGhostBackground,
boxShadow: componentTheme.dangerGhostBoxShadow
},
active: {
background: componentTheme.dangerGhostActiveBackground,
boxShadow: componentTheme.dangerGhostActiveBoxShadow
},
hover: {
background: componentTheme.dangerGhostHoverBackground
background: componentTheme.dangerGhostHoverBackground,
boxShadow: componentTheme.dangerGhostHoverBoxShadow
}
}
}
Expand Down
22 changes: 21 additions & 1 deletion packages/ui-buttons/src/BaseButton/theme.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,10 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
colors?.contrasts?.blue1212,
28
)}`,
primaryBoxShadow: 'none',
primaryGhostBoxShadow: 'none',
primaryHoverBoxShadow: 'none',
primaryGhostHoverBoxShadow: 'none',

secondaryColor: colors?.contrasts?.grey125125,
secondaryBorderColor: colors?.contrasts?.grey1214,
Expand All @@ -129,6 +133,10 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
colors?.contrasts?.grey125125,
28
)}`,
secondaryBoxShadow: 'none',
secondaryGhostBoxShadow: 'none',
secondaryHoverBoxShadow: 'none',
secondaryGhostHoverBoxShadow: 'none',

successColor: colors?.contrasts?.white1010,
successBorderColor: colors?.contrasts?.green5782,
Expand All @@ -145,6 +153,10 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
colors?.contrasts?.green4570,
28
)}`,
successBoxShadow: 'none',
successGhostBoxShadow: 'none',
successHoverBoxShadow: 'none',
successGhostHoverBoxShadow: 'none',

dangerColor: colors?.contrasts?.white1010,
dangerBorderColor: colors?.contrasts?.red5782,
Expand All @@ -161,6 +173,10 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
colors?.contrasts?.red4570,
28
)}`,
dangerBoxShadow: 'none',
dangerGhostBoxShadow: 'none',
dangerHoverBoxShadow: 'none',
dangerGhostHoverBoxShadow: 'none',

primaryInverseColor: colors?.contrasts?.grey125125,
primaryInverseBorderColor: colors?.contrasts?.grey1214,
Expand All @@ -176,7 +192,11 @@ const generateComponentTheme = (theme: Theme): BaseButtonTheme => {
primaryInverseGhostActiveBoxShadow: `${activeShadow} ${alpha(
colors?.contrasts?.white1010,
28
)}`
)}`,
primaryInverseBoxShadow: 'none',
primaryInverseGhostBoxShadow: 'none',
primaryInverseHoverBoxShadow: 'none',
primaryInverseGhostHoverBoxShadow: 'none'
}

return {
Expand Down
10 changes: 9 additions & 1 deletion packages/ui-buttons/src/Button/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,7 +249,15 @@ type: example
secondaryGhostActiveBackground: '#FF0000',
secondaryGhostActiveBoxShadow: '10px 5px 5px green',

secondaryGhostHoverBackground: '#00FFFF'
secondaryGhostHoverBackground: '#00FFFF',

secondaryBoxShadow: '0 0 0.4875rem 0.625rem yellow',
secondaryHoverBoxShadow: '0 0 0.1875rem 0.625rem lime',
secondaryActiveBoxShadow: '0 0px 0px 25px red',
secondaryGhostHoverBoxShadow: '0 0 0.7875rem 0.625rem pink',
secondaryGhostBoxShadow: '0 0 0.2875rem 0.625rem green',
secondaryGhostActiveBoxShadow: '10px 5px 5px blue'

}
return (
<>
Expand Down
Loading