From eeb9c3b75b3fb18abdee9dfce8414ab4a90c92c5 Mon Sep 17 00:00:00 2001 From: Toppanto Bence Date: Tue, 7 Jan 2025 18:33:40 +0100 Subject: [PATCH] feat(shared-types,ui-buttons): add theme variables for default and hover states for buttons Closes: INSTUI-4421 --- .../src/ComponentThemeVariables.ts | 20 +++++++ packages/ui-buttons/src/BaseButton/styles.ts | 60 ++++++++++++------- packages/ui-buttons/src/BaseButton/theme.ts | 22 ++++++- packages/ui-buttons/src/Button/README.md | 10 +++- 4 files changed, 90 insertions(+), 22 deletions(-) diff --git a/packages/shared-types/src/ComponentThemeVariables.ts b/packages/shared-types/src/ComponentThemeVariables.ts index 16449381f8..0e3084fbf9 100644 --- a/packages/shared-types/src/ComponentThemeVariables.ts +++ b/packages/shared-types/src/ComponentThemeVariables.ts @@ -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'] @@ -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'] @@ -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'] @@ -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'] @@ -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 = { diff --git a/packages/ui-buttons/src/BaseButton/styles.ts b/packages/ui-buttons/src/BaseButton/styles.ts index d5dbba59ca..a34c338a9e 100644 --- a/packages/ui-buttons/src/BaseButton/styles.ts +++ b/packages/ui-buttons/src/BaseButton/styles.ts @@ -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 } }, @@ -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 } }, @@ -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 } }, @@ -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 } }, @@ -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 } } } diff --git a/packages/ui-buttons/src/BaseButton/theme.ts b/packages/ui-buttons/src/BaseButton/theme.ts index a17a0f0228..847e22afbc 100644 --- a/packages/ui-buttons/src/BaseButton/theme.ts +++ b/packages/ui-buttons/src/BaseButton/theme.ts @@ -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, @@ -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, @@ -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, @@ -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, @@ -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 { diff --git a/packages/ui-buttons/src/Button/README.md b/packages/ui-buttons/src/Button/README.md index b79f2656ab..d5c39326e5 100644 --- a/packages/ui-buttons/src/Button/README.md +++ b/packages/ui-buttons/src/Button/README.md @@ -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 ( <>