From e3b7a1f77be9adb72b0e13b500ad61ec280423eb Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Wed, 14 Aug 2024 12:09:21 +0200
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84(frontend)=20style=20hovered=20or?=
 =?UTF-8?q?=20selected=20Tab?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Introduce a new variant, by default disabled, that visually
style a hovered or selected Tab.
---
 src/frontend/src/primitives/Tabs.tsx | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/primitives/Tabs.tsx b/src/frontend/src/primitives/Tabs.tsx
index c2b76fb3..04638b94 100644
--- a/src/frontend/src/primitives/Tabs.tsx
+++ b/src/frontend/src/primitives/Tabs.tsx
@@ -40,7 +40,6 @@ const StyledTab = styled(RACTab, {
     outline: 'none',
     position: 'relative',
     color: 'box.text',
-    transition: 'color 200ms ease, backgroundColor 200ms ease',
     borderColor: 'transparent',
     forcedColorAdjust: 'none',
   },
@@ -57,6 +56,25 @@ const StyledTab = styled(RACTab, {
         border: 'none',
       },
     },
+    highlight: {
+      true: {
+        borderRadius: 4,
+        backgroundColor: 'colorPalette.active',
+        transition: 'background 200ms, color 200ms',
+        '&[data-hovered]': {
+          backgroundColor: 'gray.100',
+          color: 'box.text',
+        },
+        '&[data-selected]': {
+          backgroundColor: 'primary',
+          color: 'white',
+          '&[data-hovered]': {
+            backgroundColor: 'primary',
+            color: 'white',
+          },
+        },
+      },
+    },
   },
   defaultVariants: {
     border: true,