fix(Toggle): colors and variants

src/app/explorer/components/StickyNavbar.tsx

@@ -9,7 +9,7 @@ import { activeSectionAtom, isNavStuckAtom, isSearchStuckAtom } from "../atoms";
 import { ACTIVE_SECTION } from "../constants";
 
 const Nav = () => {
-  const isNavStuck = useAtomValue(isNavStuckAtom);
+  const _isNavStuck = useAtomValue(isNavStuckAtom);
   const isSearchStuck = useAtomValue(isSearchStuckAtom);
   const [activeSection, setActiveSection] = useAtom(activeSectionAtom);
   const spyActiveSection = useScrollspy(Object.values(ACTIVE_SECTION), 0);
@@ -25,7 +25,7 @@ const Nav = () => {
       type="single"
       className="gap-2"
       size={isSearchStuck ? "sm" : "lg"}
-      variant={isNavStuck ? "secondary" : "mono"}
+      variant="secondary"
       onValueChange={(value) =>
         value &&
         setActiveSection(

src/components/ui/Toggle.tsx

@@ -10,15 +10,14 @@ import {
 } from "react";
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-lg text-sm font-medium transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-4 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground font-medium",
+  "inline-flex items-center justify-center rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-4 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 font-medium",
   {
     variants: {
       variant: {
         secondary:
-          "text-secondary-foreground hover:bg-secondary data-[state=on]:bg-secondary active:bg-secondary-hover",
+          "text-button-secondary-foreground hover:bg-button-secondary-background data-[state=on]:bg-button-secondary-background active:bg-button-secondary-background-hover",
         primary:
-          "hover:bg-secondary-hover active:bg-secondary-active data-[state=on]:bg-primary data-[state=on]:text-primary-foreground bg-secondary text-secondary-foreground",
-        mono: "text-white hover:bg-white/10 data-[state=on]:bg-white/15 hover:text-white data-[state=on]:text-white",
+          "hover:bg-button-secondary-background-hover active:bg-button-secondary-background-active data-[state=on]:bg-button-primary-background data-[state=on]:text-button-primary-foreground bg-button-secondary-background text-button-secondary-foreground",
       },
       size: {
         sm: "h-8 px-2.5",

src/stories/Toggle.stories.tsx

@@ -0,0 +1,43 @@
+import { Toggle } from "@/components/ui/Toggle";
+import type { Meta, StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof Toggle> = {
+  title: "Design system/Toggle",
+  component: Toggle,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Toggle>;
+
+const Default: Story = {
+  argTypes: {
+    variant: {
+      control: {
+        disable: true,
+      },
+    },
+    asChild: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+};
+
+export const Secondary: Story = {
+  ...Default,
+  args: {
+    ...Default.args,
+    children: "Secondary",
+    variant: "secondary",
+  },
+};
+
+export const Primary: Story = {
+  ...Default,
+  args: {
+    variant: "primary",
+    children: "Primary",
+  },
+};

tailwind.config.ts

@@ -35,6 +35,21 @@ const config = {
             invalid: "var(--input-border-invalid)"
           },
         },
+        // Using these in our Toggle component
+        button: {
+          primary: {
+            background: "var(--button-primary)",
+            foreground: "var(--button-primary-foreground)"
+          },
+          secondary: {
+            background: {
+              DEFAULT: "var(--button-secondary)",
+              hover: "var(--button-secondary-hover)",
+              active: "var(--button-secondary-active)",
+            },
+            foreground: "var(--button-secondary-foreground)"
+          }
+        },
         badge: {
           background: "var(--badge-background)",
           foreground: "var(--badge-foreground)"