fix: add support about hoverable(with media query)

dev2820 · Nov 16, 2024 · 2169e26 · 2169e26
1 parent b59f702
commit 2169e26
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 12 deletions.
diff --git a/apps/react/src/Button/Button.tsx b/apps/react/src/Button/Button.tsx
@@ -39,73 +39,73 @@ const buttonVariants = tv({
       theme: 'primary',
       variant: 'filled',
       class:
-        'trds-bg-primary trds-text-fg-primary disabled:trds-bg-primary enabled:hover:trds-bg-primary-hover enabled:active:trds-bg-primary-pressed',
+        'trds-bg-primary trds-text-fg-primary disabled:trds-bg-primary hoverable:enabled:hover:trds-bg-primary-hover enabled:active:trds-bg-primary-pressed',
     },
     {
       theme: 'neutral',
       variant: 'filled',
       class:
-        'trds-bg-neutral trds-text-fg-neutral disabled:trds-bg-neutral enabled:hover:trds-bg-neutral-hover enabled:active:trds-bg-neutral-pressed',
+        'trds-bg-neutral trds-text-fg-neutral disabled:trds-bg-neutral hoverable:enabled:hover:trds-bg-neutral-hover enabled:active:trds-bg-neutral-pressed',
     },
     {
       theme: 'whiteAlpha',
       variant: 'filled',
       class:
-        'trds-bg-whiteAlpha-500 trds-text-white disabled:trds-bg-whiteAlpha enabled:hover:trds-bg-whiteAlpha-600 enabled:active:trds-bg-whiteAlpha-700',
+        'trds-bg-whiteAlpha-500 trds-text-white disabled:trds-bg-whiteAlpha hoverable:enabled:hover:trds-bg-whiteAlpha-600 enabled:active:trds-bg-whiteAlpha-700',
     },
     {
       theme: 'blackAlpha',
       variant: 'filled',
       class:
-        'trds-bg-blackAlpha-500 trds-text-black disabled:trds-bg-blackAlpha enabled:hover:trds-bg-blackAlpha-600 enabled:active:trds-bg-blackAlpha-700',
+        'trds-bg-blackAlpha-500 trds-text-black disabled:trds-bg-blackAlpha hoverable:enabled:hover:trds-bg-blackAlpha-600 enabled:active:trds-bg-blackAlpha-700',
     },
     {
       theme: 'primary',
       variant: 'outline',
       class:
-        'trds-bg-transparent trds-text-primary-500 trds-border-primary-500 enabled:hover:trds-bg-primary-100 enabled:active:trds-bg-primary-200',
+        'trds-bg-transparent trds-text-primary-500 trds-border-primary-500 hoverable:enabled:hover:trds-bg-primary-100 enabled:active:trds-bg-primary-200',
     },
     {
       theme: 'neutral',
       variant: 'outline',
       class:
-        'trds-bg-transparent trds-text-neutral-500 trds-border-neutral-300 disabled:trds-bg-transparent enabled:hover:trds-bg-neutral-100 enabled:active:trds-bg-neutral-200',
+        'trds-bg-transparent trds-text-neutral-500 trds-border-neutral-300 disabled:trds-bg-transparent hoverable:enabled:hover:trds-bg-neutral-100 enabled:active:trds-bg-neutral-200',
     },
     {
       theme: 'whiteAlpha',
       variant: 'outline',
       class:
-        'trds-bg-transparent trds-text-white trds-border-whiteAlpha-300 disabled:trds-bg-transparent enabled:hover:trds-bg-whiteAlpha-100 enabled:active:trds-bg-whiteAlpha-200',
+        'trds-bg-transparent trds-text-white trds-border-whiteAlpha-300 disabled:trds-bg-transparent hoverable:enabled:hover:trds-bg-whiteAlpha-100 enabled:active:trds-bg-whiteAlpha-200',
     },
     {
       theme: 'blackAlpha',
       variant: 'outline',
       class:
-        'trds-bg-transparent trds-text-black trds-border-blackAlpha-300 disabled:trds-bg-transparent enabled:hover:trds-bg-blackAlpha-100 enabled:active:trds-bg-blackAlpha-200',
+        'trds-bg-transparent trds-text-black trds-border-blackAlpha-300 disabled:trds-bg-transparent hoverable:enabled:hover:trds-bg-blackAlpha-100 enabled:active:trds-bg-blackAlpha-200',
     },
     {
       theme: 'primary',
       variant: 'ghost',
       class:
-        'trds-bg-transparent trds-text-primary-500 disabled:trds-bg-transparent enabled:hover:trds-bg-primary-100 enabled:active:trds-bg-primary-200',
+        'trds-bg-transparent trds-text-primary-500 disabled:trds-bg-transparent hoverable:enabled:hover:trds-bg-primary-100 enabled:active:trds-bg-primary-200',
     },
     {
       theme: 'neutral',
       variant: 'ghost',
       class:
-        'trds-bg-transparent trds-text-neutral-500 disabled:trds-bg-transparent enabled:hover:trds-bg-neutral-100 enabled:active:trds-bg-neutral-200',
+        'trds-bg-transparent trds-text-neutral-500 disabled:trds-bg-transparent hoverable:enabled:hover:trds-bg-neutral-100 enabled:active:trds-bg-neutral-200',
     },
     {
       theme: 'whiteAlpha',
       variant: 'ghost',
       class:
-        'trds-bg-transparent trds-text-white disabled:trds-bg-transparent enabled:hover:trds-bg-whiteAlpha-100 enabled:active:trds-bg-whiteAlpha-200',
+        'trds-bg-transparent trds-text-white disabled:trds-bg-transparent hoverable:enabled:hover:trds-bg-whiteAlpha-100 enabled:active:trds-bg-whiteAlpha-200',
     },
     {
       theme: 'blackAlpha',
       variant: 'ghost',
       class:
-        'trds-bg-transparent trds-text-black disabled:trds-bg-transparent enabled:hover:trds-bg-blackAlpha-100 enabled:active:trds-bg-blackAlpha-200',
+        'trds-bg-transparent trds-text-black disabled:trds-bg-transparent hoverable:enabled:hover:trds-bg-blackAlpha-100 enabled:active:trds-bg-blackAlpha-200',
     },
   ],
   defaultVariants: {

diff --git a/apps/react/tailwind.config.js b/apps/react/tailwind.config.js
@@ -33,6 +33,17 @@ export default {
         horizontal: 'orientation="horizontal"',
         'in-range': 'in-range',
       },
+      screen: {
+        'no-hover': { raw: '(hover: none)' },
+        hoverable: {
+          raw: '(hover: hover) and (pointer: fine)',
+        },
+      },
+    },
+  },
+  variants: {
+    extend: {
+      backgroundColor: ['hover', 'active', 'no-hover'],
     },
   },
   plugins: [