From 696ddabda874501983d17abbd703794df14064c9 Mon Sep 17 00:00:00 2001 From: andresin87 Date: Fri, 17 Mar 2023 09:56:41 +0100 Subject: [PATCH] feat(button): fix button hover-focus states --- .../components/button/src/variants/ghost.ts | 49 ++++++++++++++++--- .../button/src/variants/outlined.ts | 44 ++++++++--------- 2 files changed, 64 insertions(+), 29 deletions(-) diff --git a/packages/components/button/src/variants/ghost.ts b/packages/components/button/src/variants/ghost.ts index b3f67d937..bea828273 100644 --- a/packages/components/button/src/variants/ghost.ts +++ b/packages/components/button/src/variants/ghost.ts @@ -5,42 +5,77 @@ export const ghostVariants = [ { intent: 'primary' as const, design: 'ghost' as const, - class: tw(['text-primary']), + class: tw([ + 'text-primary', + 'enabled:hover:bg-primary-container-hovered', + 'enabled:active:bg-primary-container-hovered', + 'focus-visible:bg-primary-container-focused', + ]), }, // Secondary { intent: 'secondary' as const, design: 'ghost' as const, - class: tw(['text-secondary']), + class: tw([ + 'text-secondary', + 'enabled:hover:bg-secondary-container-hovered', + 'enabled:active:bg-secondary-container-hovered', + 'focus-visible:bg-secondary-container-focused', + ]), }, // Success { intent: 'success' as const, design: 'ghost' as const, - class: tw(['text-success']), + class: tw([ + 'text-success', + 'enabled:hover:bg-success-container-hovered', + 'enabled:active:bg-success-container-hovered', + 'focus-visible:bg-success-container-focused', + ]), }, // Alert { intent: 'alert' as const, design: 'ghost' as const, - class: tw(['text-alert']), + class: tw([ + 'text-alert', + 'enabled:hover:bg-alert-container-hovered', + 'enabled:active:bg-alert-container-hovered', + 'focus-visible:bg-alert-container-focused', + ]), }, // Danger { intent: 'danger' as const, design: 'ghost' as const, - class: tw(['text-error']), + class: tw([ + 'text-error', + 'enabled:hover:bg-error-container-hovered', + 'enabled:active:bg-error-container-hovered', + 'focus-visible:bg-error-container-focused', + ]), }, // Neutral { intent: 'neutral' as const, design: 'ghost' as const, - class: tw(['text-neutral']), + class: tw([ + 'text-neutral', + 'enabled:hover:bg-neutral-container-hovered', + 'enabled:active:bg-neutral-container-hovered', + 'focus-visible:bg-neutral-container-focused', + ]), }, // Surface { intent: 'surface' as const, design: 'ghost' as const, - class: tw(['text-on-surface']), + class: tw([ + 'text-on-surface', + 'enabled:hover:bg-surface-container-hovered', + 'enabled:active:bg-surface-container-hovered', + 'focus-visible:bg-surface-container-focused', + ]), }, ] diff --git a/packages/components/button/src/variants/outlined.ts b/packages/components/button/src/variants/outlined.ts index e6233a23a..93ccc025b 100644 --- a/packages/components/button/src/variants/outlined.ts +++ b/packages/components/button/src/variants/outlined.ts @@ -6,9 +6,9 @@ export const outlinedVariants = [ intent: 'primary' as const, design: 'outlined' as const, class: tw([ - 'enabled:hover:bg-primary-container', - 'enabled:active:bg-primary-container', - 'focus-visible:bg-primary-container', + 'enabled:hover:bg-primary-container-hovered', + 'enabled:active:bg-primary-container-hovered', + 'focus-visible:bg-primary-container-focused', 'text-primary', ]), }, @@ -17,9 +17,9 @@ export const outlinedVariants = [ intent: 'secondary' as const, design: 'outlined' as const, class: tw([ - 'enabled:hover:bg-secondary-container', - 'enabled:active:bg-secondary-container', - 'focus-visible:bg-secondary-container', + 'enabled:hover:bg-secondary-container-hovered', + 'enabled:active:bg-secondary-container-hovered', + 'focus-visible:bg-secondary-container-focused', 'text-secondary', ]), }, @@ -28,9 +28,9 @@ export const outlinedVariants = [ intent: 'success' as const, design: 'outlined' as const, class: tw([ - 'enabled:hover:bg-success-container', - 'enabled:active:bg-success-container', - 'focus-visible:bg-success-container', + 'enabled:hover:bg-success-container-hovered', + 'enabled:active:bg-success-container-hovered', + 'focus-visible:bg-success-container-focused', 'text-success', ]), }, @@ -39,9 +39,9 @@ export const outlinedVariants = [ intent: 'alert' as const, design: 'outlined' as const, class: tw([ - 'enabled:hover:bg-alert-container', - 'enabled:active:bg-alert-container', - 'focus-visible:bg-alert-container', + 'enabled:hover:bg-alert-container-hovered', + 'enabled:active:bg-alert-container-hovered', + 'focus-visible:bg-alert-container-focused', 'text-alert', ]), }, @@ -50,9 +50,9 @@ export const outlinedVariants = [ intent: 'danger' as const, design: 'outlined' as const, class: tw([ - 'enabled:hover:bg-error-container', - 'enabled:active:bg-error-container', - 'focus-visible:bg-error-container', + 'enabled:hover:bg-error-container-hovered', + 'enabled:active:bg-error-container-hovered', + 'focus-visible:bg-error-container-focused', 'text-error', ]), }, @@ -61,9 +61,9 @@ export const outlinedVariants = [ intent: 'neutral' as const, design: 'outlined' as const, class: tw([ - 'enabled:hover:bg-neutral-container', - 'enabled:active:bg-neutral-container', - 'focus-visible:bg-neutral-container', + 'enabled:hover:bg-neutral-container-hovered', + 'enabled:active:bg-neutral-container-hovered', + 'focus-visible:bg-neutral-container-focused', 'text-neutral', ]), }, @@ -72,10 +72,10 @@ export const outlinedVariants = [ intent: 'surface' as const, design: 'outlined' as const, class: tw([ - 'enabled:hover:bg-surface-container', - 'enabled:active:bg-surface-container', - 'focus-visible:bg-surface-container', - 'text-on-surface', + 'enabled:hover:bg-surface-container-hovered', + 'enabled:active:bg-surface-container-hovered', + 'focus-visible:bg-surface-container-focused', + 'text-surface', ]), }, ]