Skip to content

Commit

Permalink
feat(button): fix button hover-focus states
Browse files Browse the repository at this point in the history
  • Loading branch information
andresin87 committed Mar 20, 2023

Verified

This commit was signed with the committer’s verified signature.
Lipen Konstantin Chukharev
1 parent 802f924 commit 696ddab
Showing 2 changed files with 64 additions and 29 deletions.
49 changes: 42 additions & 7 deletions packages/components/button/src/variants/ghost.ts
Original file line number Diff line number Diff line change
@@ -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',
]),
},
]
44 changes: 22 additions & 22 deletions packages/components/button/src/variants/outlined.ts
Original file line number Diff line number Diff line change
@@ -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',
]),
},
]

0 comments on commit 696ddab

Please sign in to comment.