From 456a100cf1c9f9f6e0efee87da05ae56f8b3a154 Mon Sep 17 00:00:00 2001
From: Cagatay Civici <cagatay.civici@gmail.com>
Date: Thu, 2 Jan 2025 12:24:53 +0300
Subject: [PATCH] Override tab styles

---
 .../layout/designer/editor/DesignEditor.vue   | 94 ++++++++++++++++++-
 1 file changed, 93 insertions(+), 1 deletion(-)

diff --git a/apps/showcase/components/layout/designer/editor/DesignEditor.vue b/apps/showcase/components/layout/designer/editor/DesignEditor.vue
index f58f16590..5b302aded 100644
--- a/apps/showcase/components/layout/designer/editor/DesignEditor.vue
+++ b/apps/showcase/components/layout/designer/editor/DesignEditor.vue
@@ -1,5 +1,5 @@
 <template>
-    <Tabs v-model:value="$appState.designer.activeTab" :lazy="deferred">
+    <Tabs v-model:value="$appState.designer.activeTab" :lazy="deferred" :dt="tabsTokens">
         <TabList>
             <Tab value="0">Primitive</Tab>
             <Tab value="1">Semantic</Tab>
@@ -105,6 +105,98 @@ export default {
             const directives = this.$appState.designer.theme.preset.directives;
 
             return components[this.$route.name] != null || directives[this.$route.name];
+        },
+        tabsTokens() {
+            return {
+                root: {
+                    transitionDuration: '0.2s'
+                },
+                tablist: {
+                    borderWidth: '0 0 1px 0',
+                    background: '{content.background}',
+                    borderColor: '{content.border.color}'
+                },
+                tab: {
+                    background: 'transparent',
+                    hoverBackground: 'transparent',
+                    activeBackground: 'transparent',
+                    borderWidth: '0 0 1px 0',
+                    padding: '1rem 1.125rem',
+                    fontWeight: '600',
+                    margin: '0 0 -1px 0',
+                    gap: '0.5rem',
+                    focusRing: {
+                        width: '{focus.ring.width}',
+                        style: '{focus.ring.style}',
+                        color: '{focus.ring.color}',
+                        offset: '-1px',
+                        shadow: '{focus.ring.shadow}'
+                    }
+                },
+                tabpanel: {
+                    background: 'transparent',
+                    color: 'inherit',
+                    padding: '0.875rem 1.125rem 1.125rem 1.125rem',
+                    focusRing: {
+                        width: '{focus.ring.width}',
+                        style: '{focus.ring.style}',
+                        color: '{focus.ring.color}',
+                        offset: '{focus.ring.offset}',
+                        shadow: 'inset {focus.ring.shadow}'
+                    }
+                },
+                navButton: {
+                    background: '{content.background}',
+                    color: '{text.muted.color}',
+                    hoverColor: '{text.color}',
+                    width: '2.5rem',
+                    focusRing: {
+                        width: '{focus.ring.width}',
+                        style: '{focus.ring.style}',
+                        color: '{focus.ring.color}',
+                        offset: '-1px',
+                        shadow: '{focus.ring.shadow}'
+                    }
+                },
+                activeBar: {
+                    height: '1px',
+                    bottom: '-1px'
+                },
+                colorScheme: {
+                    light: {
+                        tablist: {
+                            borderColor: '{surface.200}'
+                        },
+                        tab: {
+                            borderColor: '{surface.200}',
+                            hoverBorderColor: '{surface.200}',
+                            activeBorderColor: '#09090b',
+                            color: '#71717a',
+                            hoverColor: '#09090b',
+                            activeColor: '#09090b'
+                        },
+                        activeBar: {
+                            background: '#09090b'
+                        }
+                    },
+                    dark: {
+                        tablist: {
+                            borderColor: '{surface.700}'
+                        },
+                        tab: {
+                            borderColor: '{surface.700}',
+                            hoverBorderColor: '{surface.700}',
+                            activeBorderColor: '#ffffff',
+                            color: '#a1a1aa',
+                            hoverColor: '#ffffff',
+                            activeColor: '#ffffff'
+                        },
+                        activeBar: {
+                            background: '#ffffff'
+                        }
+                    }
+                }
+            };
         }
     }
 };