diff --git a/packages/theme/src/common/color-tokens/custom/button.ts b/packages/theme/src/common/color-tokens/custom/button.ts index 5373d049ae..c81a8419a5 100644 --- a/packages/theme/src/common/color-tokens/custom/button.ts +++ b/packages/theme/src/common/color-tokens/custom/button.ts @@ -144,26 +144,31 @@ export const ktSecondaryButtonHoverBackground = registerColor( ); export const ktSecondaryButtonHoverForeground = registerColor( 'kt.secondaryButton.hoverForeground', - { dark: buttonSecondaryHoverBackground, light: buttonSecondaryHoverBackground, hcDark: null, hcLight: null }, + { + dark: lighten(ktSecondaryButtonForeground, 0.2), + light: darken(ktSecondaryButtonForeground, 0.2), + hcDark: lighten(ktSecondaryButtonForeground, 0.2), + hcLight: darken(ktSecondaryButtonForeground, 0.2), + }, localize('ktSecondaryButtonHoverForeground', 'Secondary Button Hover Foreground color'), ); export const ktSecondaryButtonHoverBorder = registerColor( 'kt.secondaryButton.hoverBorder', { - dark: buttonSecondaryHoverBackground, - light: buttonSecondaryHoverBackground, - hcDark: buttonSecondaryHoverBackground, - hcLight: buttonSecondaryHoverBackground, + dark: lighten(ktSecondaryButtonBorder, 0.2), + light: darken(ktSecondaryButtonBorder, 0.2), + hcDark: lighten(ktSecondaryButtonBorder, 0.2), + hcLight: darken(ktSecondaryButtonBorder, 0.2), }, localize('ktSecondaryButtonHoverBorder', 'Secondary Button Hover Border color'), ); export const ktSecondaryButtonClickForeground = registerColor( 'kt.secondaryButton.clickForeground', { - dark: ktSecondaryButtonHoverForeground, - light: ktSecondaryButtonHoverForeground, - hcDark: ktSecondaryButtonHoverForeground, - hcLight: ktSecondaryButtonHoverForeground, + dark: lighten(ktSecondaryButtonForeground, 0.2), + light: darken(ktSecondaryButtonForeground, 0.2), + hcDark: lighten(ktSecondaryButtonForeground, 0.2), + hcLight: darken(ktSecondaryButtonForeground, 0.2), }, localize('ktSecondaryButtonClickForeground', 'Secondary Button Click Foreground color'), );