Fixing tab styles, especially in darkmode.

ClickHouse · Oct 4, 2023 · 8abea22 · 8abea22
1 parent c98b494
commit 8abea22
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 18 deletions.
diff --git a/src/components/Tabs/Tabs.stories.tsx b/src/components/Tabs/Tabs.stories.tsx
@@ -1,4 +1,4 @@
-import { Tabs } from "@/components";
+import { Spacer, Tabs, Text } from "@/components";
 import type { StoryObj } from "@storybook/react";
 
 export default {
@@ -21,24 +21,33 @@ export const Playground: Story = {
             value="tab1"
             key="tab1"
           >
-            tab1
+            Tab 1
           </Tabs.Trigger>
           <Tabs.Trigger
             value="tab2"
             key="tab2"
           >
-            tab2
+            Tab 2
           </Tabs.Trigger>
           <Tabs.Trigger
             value="tab3"
             key="tab3"
           >
-            tab3
+            Tab 3
           </Tabs.Trigger>
         </Tabs.TriggersList>
-        <Tabs.Content value="tab1">Tab 1 content</Tabs.Content>
-        <Tabs.Content value="tab2">Tab 2 content</Tabs.Content>
-        <Tabs.Content value="tab3">Tab 3 content</Tabs.Content>
+        <Tabs.Content value="tab1">
+          <Spacer />
+          <Text>Tab 1 content</Text>
+        </Tabs.Content>
+        <Tabs.Content value="tab2">
+          <Spacer />
+          <Text>Tab 2 content</Text>
+        </Tabs.Content>
+        <Tabs.Content value="tab3">
+          <Spacer />
+          <Text>Tab 3 content</Text>
+        </Tabs.Content>
       </>
     ),
   },

diff --git a/src/components/Tabs/Tabs.tsx b/src/components/Tabs/Tabs.tsx
@@ -22,38 +22,38 @@ const Trigger = styled(RadixTabs.Trigger)`
   border-top-left-radius: ${props => props.theme.click.tabs.radii.all};
   border-top-right-radius: ${props => props.theme.click.tabs.radii.all};
 
-  border-bottom: ${props => props.theme.click.tabs.basic.stroke.default};
-  background-color: ${props =>
-    props.theme.click.tabs.basic.color.background.default};
+  border-bottom: 2px solid ${props => props.theme.click.tabs.basic.stroke.default};
+  background-color: ${props => props.theme.click.tabs.basic.color.background.default};
   color: ${props => props.theme.click.tabs.basic.color.text.default};
   font: ${props => props.theme.click.tabs.typography.label.default};
   cursor: pointer;
 
   &[data-state="active"] {
-    border-bottom: ${props => props.theme.click.tabs.basic.stroke.active};
-    background-color: ${props =>
-      props.theme.click.tabs.basic.color.background.active};
+    border-bottom: 2px solid ${props => props.theme.click.tabs.basic.color.stroke.active};
+    background-color: ${props => props.theme.click.tabs.basic.color.background.active};
     color: ${props => props.theme.click.tabs.basic.color.text.active};
     font: ${props => props.theme.click.tabs.typography.label.active};
+    &:hover {
+      font: ${props => props.theme.click.tabs.typography.label.active};
+    }
   }
 
   &:hover {
-    border-bottom: ${props => props.theme.click.tabs.basic.stroke.hover};
-    background-color: ${props =>
-      props.theme.click.tabs.basic.color.background.hover};
+    border-bottom: 2px solid ${props => props.theme.click.tabs.basic.stroke.hover};
+    background-color: ${props => props.theme.click.tabs.basic.color.background.hover};
     color: ${props => props.theme.click.tabs.basic.color.text.hover};
     font: ${props => props.theme.click.tabs.typography.label.hover};
   }
 
   &:hover[data-state="active"] {
-    border-bottom: ${props => props.theme.click.tabs.basic.stroke.active};
+    border-bottom: 1px solid ${props => props.theme.click.tabs.basic.stroke.active};
   }
 `;
 
 const Content = styled(RadixTabs.Content)``;
 
 const TriggersList = styled(RadixTabs.List)`
-  border-bottom: ${props => props.theme.click.tabs.basic.stroke.global};
+  border-bottom: 1px solid ${props => props.theme.click.global.color.stroke.default};
 `;
 
 const Tabs = ({