fix(web): style adjustments

Author: gwigz

apps/web/src/components/landing/code-gallery.tsx

@@ -3,6 +3,7 @@
 import { useRef, useState, useCallback } from "react"
 import { useInView } from "~/lib/use-in-view"
 import { useTwoslashPortal } from "~/lib/use-twoslash-portal"
+import { Tabs, TabsList, TabsTrigger } from "~/components/ui/tabs"
 import type { CodeGalleryTab } from "./code-preview"
 
 function CodePanel({
@@ -76,21 +77,15 @@ export function CodeGallery({ tabs }: { tabs: CodeGalleryTab[] }) {
 
         {/* Tabs */}
         <div className="flex justify-center mb-6">
-          <div className="inline-flex gap-1 rounded-lg border border-fd-border bg-fd-card/50 p-1">
-            {tabs.map((tab) => (
-              <button
-                key={tab.id}
-                onClick={() => setActiveTab(tab.id)}
-                className={`rounded-md px-4 py-1.5 text-xs font-medium transition-all cursor-pointer ${
-                  activeTab === tab.id
-                    ? "bg-fd-muted text-fd-foreground border border-fd-border"
-                    : "text-fd-muted-foreground hover:text-fd-foreground border border-transparent"
-                }`}
-              >
-                {tab.label}
-              </button>
-            ))}
-          </div>
+          <Tabs value={activeTab} onValueChange={setActiveTab}>
+            <TabsList>
+              {tabs.map((tab) => (
+                <TabsTrigger key={tab.id} value={tab.id} className="px-3.5 py-2.5 text-sm">
+                  {tab.label}
+                </TabsTrigger>
+              ))}
+            </TabsList>
+          </Tabs>
         </div>
 
         {/* Code panels */}

apps/web/src/components/playground-tabs.tsx

@@ -22,11 +22,7 @@ export function PlaygroundTabs({ activeTab }: { activeTab: "typescript" | "json"
     >
       <TabsList>
         {tabs.map((tab) => (
-          <TabsTrigger
-            key={tab.value}
-            value={tab.value}
-            className="data-active:!bg-background data-active:!text-foreground data-active:!shadow-sm dark:data-active:!bg-background dark:data-active:!text-foreground"
-          >
+          <TabsTrigger key={tab.value} value={tab.value} className="">
             <tab.icon className="size-4" />
             {tab.label}
           </TabsTrigger>

apps/web/src/components/ui/tabs.tsx

@@ -16,11 +16,11 @@ function Tabs({ className, ...props }: TabsPrimitive.Root.Props) {
 }
 
 const tabsListVariants = cva(
-  "group/tabs-list inline-flex w-fit items-center justify-center rounded-none p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-8 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none",
+  "group/tabs-list inline-flex w-fit items-center justify-center gap-0.5 rounded-lg border border-fd-border p-0.5 text-muted-foreground group-data-[orientation=horizontal]/tabs:h-auto group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none data-[variant=line]:border-0",
   {
     variants: {
       variant: {
-        default: "bg-muted",
+        default: "bg-fd-card/50",
         line: "gap-1 bg-transparent",
       },
     },
@@ -50,9 +50,9 @@ function TabsTrigger({ className, ...props }: TabsPrimitive.Tab.Props) {
     <TabsPrimitive.Tab
       data-slot="tabs-trigger"
       className={cn(
-        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-none border border-transparent px-1.5 py-0.5 text-xs font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[orientation=vertical]/tabs:py-[calc(--spacing(1.25))] hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-xs font-medium whitespace-nowrap text-fd-muted-foreground transition-all cursor-pointer group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start group-data-[orientation=vertical]/tabs:py-[calc(--spacing(1.25))] hover:text-fd-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent",
-        "data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground",
+        "data-active:bg-fd-accent data-active:text-fd-accent-foreground data-active:border-transparent",
         "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100",
         className,
       )}