tio-design-make-experiments 0.0.1

package/src/app/components/design-system/Buttons.tsx

@@ -0,0 +1,623 @@
+import React from "react";
+import svgPaths from "../../../imports/svg-umftvfphsk";
+import figmaSvg from "../../../imports/svg-1ifosis1tx";
+import { SectionHeader } from "./SectionHeader";
+import { CopyButton } from "./CopyButton";
+
+/* ─── Icon helpers ─── */
+function CheckCircleIcon({ className = "fill-primary-foreground" }: { className?: string }) {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="shrink-0">
+      <path d={figmaSvg.p2819d400} className={className} />
+    </svg>
+  );
+}
+
+function PlusIcon({ className = "fill-primary-foreground" }: { className?: string }) {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="shrink-0">
+      <path d={svgPaths.p185c8f80} className={className} />
+    </svg>
+  );
+}
+
+function MoreIcon({ className = "fill-muted-foreground" }: { className?: string }) {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="shrink-0">
+      <path d={svgPaths.p5e64f80} className={className} />
+    </svg>
+  );
+}
+
+function TriangleLeftIcon({ className = "fill-muted-foreground" }: { className?: string }) {
+  return (
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" className="shrink-0">
+      <path d="M15 16L5 10L15 4V16Z" className={className} />
+    </svg>
+  );
+}
+
+/* ─── State card wrapper ─── */
+function StateCard({
+  state,
+  classes,
+  children,
+}: {
+  state: string;
+  classes: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="group/state bg-card rounded-xl p-5 flex flex-col gap-4 relative min-w-0">
+      <div className="absolute top-2 right-2 opacity-0 group-hover/state:opacity-100 transition-opacity z-10">
+        <CopyButton token={classes} />
+      </div>
+      <span className="font-['Source_Sans_3',sans-serif] text-[11px] text-muted-foreground uppercase tracking-wider">
+        {state}
+      </span>
+      <div className="flex items-center justify-center min-h-12 pointer-events-none">
+        {children}
+      </div>
+      <div className="pt-3 border-t border-border">
+        <p className="font-['Source_Sans_3',sans-serif] text-[11px] text-muted-foreground/60 font-mono leading-tight break-all">
+          {classes}
+        </p>
+      </div>
+    </div>
+  );
+}
+
+/* ─── Sub-section heading ─── */
+function SubSection({
+  title,
+  description,
+  children,
+}: {
+  title: string;
+  description?: string;
+  children: React.ReactNode;
+}) {
+  return (
+    <div className="mb-12">
+      <div className="mb-4">
+        <p className="font-['Source_Sans_3',sans-serif] text-[14px] text-muted-foreground uppercase tracking-wider">
+          {title}
+        </p>
+        {description && (
+          <p className="font-['Source_Sans_3',sans-serif] text-[12px] text-muted-foreground/60 mt-1">
+            {description}
+          </p>
+        )}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+/* ════════════════════════════════════════════════════
+   Main export
+   ════════════════════════════════════════════════════ */
+export function Buttons() {
+  return (
+    <section>
+      <SectionHeader
+        title="Buttons"
+        description="All button variants, interactive states, and their corresponding class tokens"
+      />
+
+      {/* ──────── 1. PRIMARY FILLED ──────── */}
+      <SubSection
+        title="Primary Filled  ·  .btn-primary"
+        description="Main CTA — bg-primary + text-primary-foreground, pill shape. Hover transforms to bg-link-hover + text-link-hover-foreground."
+      >
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
+          <StateCard state="Default" classes="btn-primary">
+            <button className="btn-primary">
+              <CheckCircleIcon className="fill-primary-foreground" />
+              <span>Primary</span>
+            </button>
+          </StateCard>
+
+          <StateCard state="Hover" classes="hover:bg-link-hover hover:text-link-hover-foreground">
+            <button className="btn bg-link-hover text-link-hover-foreground h-10 px-5 rounded-full">
+              <CheckCircleIcon className="fill-link-hover-foreground" />
+              <span>Hover</span>
+            </button>
+          </StateCard>
+
+          <StateCard state="Active / Pressed" classes="active:bg-link-hover/90 active:scale-[0.98]">
+            <button className="btn bg-link-hover/90 text-link-hover-foreground h-10 px-5 rounded-full scale-[0.98]">
+              <CheckCircleIcon className="fill-link-hover-foreground" />
+              <span>Pressed</span>
+            </button>
+          </StateCard>
+
+          <StateCard state="Focus" classes="focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background outline-none">
+            <button className="btn bg-primary text-primary-foreground h-10 px-5 rounded-full ring-2 ring-ring ring-offset-2 ring-offset-background">
+              <CheckCircleIcon className="fill-primary-foreground" />
+              <span>Focus</span>
+            </button>
+          </StateCard>
+
+          <StateCard state="Disabled" classes="disabled:opacity-50 disabled:cursor-not-allowed">
+            <button disabled className="btn-primary opacity-50 cursor-not-allowed">
+              <CheckCircleIcon className="fill-primary-foreground" />
+              <span>Disabled</span>
+            </button>
+          </StateCard>
+        </div>
+      </SubSection>
+
+      {/* ──────── 2. PRIMARY FILLED — no icon ──────── */}
+      <SubSection
+        title="Primary Filled — Text Only  ·  .btn-primary"
+        description="Same pill CTA without an icon prefix."
+      >
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
+          <StateCard state="Default" classes="btn-primary">
+            <button className="btn-primary">
+              <span>Re-run check</span>
+            </button>
+          </StateCard>
+
+          <StateCard state="Hover" classes="hover:bg-link-hover hover:text-link-hover-foreground">
+            <button className="btn bg-link-hover text-link-hover-foreground h-10 px-5 rounded-full">
+              <span>Re-run check</span>
+            </button>
+          </StateCard>
+
+          <StateCard state="Active / Pressed" classes="active:bg-link-hover/90 active:scale-[0.98]">
+            <button className="btn bg-link-hover/90 text-link-hover-foreground h-10 px-5 rounded-full scale-[0.98]">
+              <span>Re-run check</span>
+            </button>
+          </StateCard>
+
+          <StateCard state="Focus" classes="focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background outline-none">
+            <button className="btn bg-primary text-primary-foreground h-10 px-5 rounded-full ring-2 ring-ring ring-offset-2 ring-offset-background">
+              <span>Re-run check</span>
+            </button>
+          </StateCard>
+
+          <StateCard state="Disabled" classes="disabled:opacity-50 disabled:cursor-not-allowed">
+            <button disabled className="btn-primary opacity-50 cursor-not-allowed">
+              <span>Re-run check</span>
+            </button>
+          </StateCard>
+        </div>
+      </SubSection>
+
+      {/* ──────── 3. OUTLINE PRIMARY ──────── */}
+      <SubSection
+        title="Outline — Primary  ·  .btn-outline-primary"
+        description="border-primary + text-primary on transparent. Hover transforms to solid bg-link-hover."
+      >
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
+          <StateCard state="Default" classes="btn-outline-primary">
+            <button className="btn-outline-primary">
+              <CheckCircleIcon className="fill-primary" />
+              <span>Primary</span>
+            </button>
+          </StateCard>
+
+          <StateCard state="Hover" classes="hover:bg-link-hover hover:text-link-hover-foreground hover:border-transparent">
+            <button className="btn bg-link-hover text-link-hover-foreground h-10 px-5 rounded-full">
+              <CheckCircleIcon className="fill-link-hover-foreground" />
+              <span>Hover</span>
+            </button>
+          </StateCard>
+
+          <StateCard state="Active / Pressed" classes="active:bg-link-hover/90 active:border-transparent active:scale-[0.98]">
+            <button className="btn bg-link-hover/90 text-link-hover-foreground h-10 px-5 rounded-full scale-[0.98]">
+              <CheckCircleIcon className="fill-link-hover-foreground" />
+              <span>Pressed</span>
+            </button>
+          </StateCard>
+
+          <StateCard state="Focus" classes="focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background outline-none">
+            <button className="btn border border-primary text-primary h-10 px-5 rounded-full ring-2 ring-ring ring-offset-2 ring-offset-background">
+              <CheckCircleIcon className="fill-primary" />
+              <span>Focus</span>
+            </button>
+          </StateCard>
+
+          <StateCard state="Disabled" classes="disabled:opacity-50 disabled:cursor-not-allowed">
+            <button disabled className="btn-outline-primary opacity-50 cursor-not-allowed">
+              <CheckCircleIcon className="fill-primary" />
+              <span>Disabled</span>
+            </button>
+          </StateCard>
+        </div>
+      </SubSection>
+
+      {/* ──────── 4. OUTLINE MUTED ──────── */}
+      <SubSection
+        title="Outline — Muted  ·  .btn-outline-muted"
+        description="border-border + text-primary, rounded-lg shape. Hover transforms to solid bg-link-hover."
+      >
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
+          <StateCard state="Default" classes="btn-outline-muted">
+            <button className="btn-outline-muted">
+              <span>Re-run test</span>
+            </button>
+          </StateCard>
+
+          <StateCard state="Hover" classes="hover:bg-link-hover hover:text-link-hover-foreground hover:border-transparent">
+            <button className="btn bg-link-hover text-link-hover-foreground h-10 px-5 rounded-lg">
+              <span>Re-run test</span>
+            </button>
+          </StateCard>
+
+          <StateCard state="Active / Pressed" classes="active:bg-link-hover/90 active:border-transparent active:scale-[0.98]">
+            <button className="btn bg-link-hover/90 text-link-hover-foreground h-10 px-5 rounded-lg scale-[0.98]">
+              <span>Re-run test</span>
+            </button>
+          </StateCard>
+
+          <StateCard state="Focus" classes="focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background outline-none">
+            <button className="btn border border-border text-primary h-10 px-5 rounded-lg ring-2 ring-ring ring-offset-2 ring-offset-background">
+              <span>Re-run test</span>
+            </button>
+          </StateCard>
+
+          <StateCard state="Disabled" classes="disabled:opacity-50 disabled:cursor-not-allowed">
+            <button disabled className="btn-outline-muted opacity-50 cursor-not-allowed">
+              <span>Re-run test</span>
+            </button>
+          </StateCard>
+        </div>
+      </SubSection>
+
+      {/* ──────── 5. ICON BUTTON — Circular ──────── */}
+      <SubSection
+        title="Icon Button — Circular  ·  .btn-icon"
+        description="border-muted-foreground, rounded-full. Hover transforms to solid bg-link-hover."
+      >
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
+          <StateCard state="Default" classes="btn-icon">
+            <button className="btn-icon">
+              <MoreIcon />
+            </button>
+          </StateCard>
+
+          <StateCard state="Hover" classes="hover:bg-link-hover hover:border-transparent">
+            <button className="btn bg-link-hover size-10 rounded-full">
+              <MoreIcon className="fill-link-hover-foreground" />
+            </button>
+          </StateCard>
+
+          <StateCard state="Active / Pressed" classes="active:bg-link-hover/90 active:border-transparent active:scale-95">
+            <button className="btn bg-link-hover/90 size-10 rounded-full scale-95">
+              <MoreIcon className="fill-link-hover-foreground" />
+            </button>
+          </StateCard>
+
+          <StateCard state="Focus" classes="focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background outline-none">
+            <button className="btn border border-muted-foreground size-10 rounded-full ring-2 ring-ring ring-offset-2 ring-offset-background">
+              <MoreIcon />
+            </button>
+          </StateCard>
+
+          <StateCard state="Disabled" classes="disabled:opacity-40 disabled:cursor-not-allowed">
+            <button disabled className="btn-icon opacity-40 cursor-not-allowed">
+              <MoreIcon />
+            </button>
+          </StateCard>
+        </div>
+      </SubSection>
+
+      {/* ──────── 6. GHOST BUTTON ──────── */}
+      <SubSection
+        title="Ghost Button  ·  .btn-ghost"
+        description="No border or background, text-muted-foreground. Hover shows bg-link-hover."
+      >
+        <div className="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-5 gap-4">
+          <StateCard state="Default" classes="btn-ghost">
+            <button className="btn-ghost">
+              <TriangleLeftIcon />
+            </button>
+          </StateCard>
+
+          <StateCard state="Hover" classes="hover:bg-link-hover hover:text-link-hover-foreground">
+            <button className="btn bg-link-hover size-10 rounded-md">
+              <TriangleLeftIcon className="fill-link-hover-foreground" />
+            </button>
+          </StateCard>
+
+          <StateCard state="Active / Pressed" classes="active:bg-link-hover/90 active:scale-95">
+            <button className="btn bg-link-hover/90 size-10 rounded-md scale-95">
+              <TriangleLeftIcon className="fill-link-hover-foreground" />
+            </button>
+          </StateCard>
+
+          <StateCard state="Focus" classes="focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background outline-none rounded-md">
+            <button className="btn size-10 rounded-md ring-2 ring-ring ring-offset-2 ring-offset-background">
+              <TriangleLeftIcon />
+            </button>
+          </StateCard>
+
+          <StateCard state="Disabled" classes="disabled:opacity-30 disabled:cursor-not-allowed">
+            <button disabled className="btn-ghost opacity-30 cursor-not-allowed">
+              <TriangleLeftIcon />
+            </button>
+          </StateCard>
+        </div>
+      </SubSection>
+
+      {/* ──────── 7. NAV CTA ──────── */}
+      <SubSection
+        title="Navigation CTA  ·  .btn-nav-cta"
+        description="Header bar primary action — bg-primary, compact pill. Hover transforms to bg-link-hover."
+      >
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-5 gap-4">
+          <StateCard state="Default" classes="btn-nav-cta">
+            <button className="btn-nav-cta">
+              <PlusIcon className="fill-primary-foreground" />
+              <span>New Test Session</span>
+            </button>
+          </StateCard>
+
+          <StateCard state="Hover" classes="hover:bg-link-hover hover:text-link-hover-foreground">
+            <button className="btn bg-link-hover text-link-hover-foreground px-4 rounded-full" style={{ height: "2.125rem" }}>
+              <PlusIcon className="fill-link-hover-foreground" />
+              <span>New Test Session</span>
+            </button>
+          </StateCard>
+
+          <StateCard state="Active / Pressed" classes="active:bg-link-hover/90 active:scale-[0.98]">
+            <button className="btn bg-link-hover/90 text-link-hover-foreground px-4 rounded-full scale-[0.98]" style={{ height: "2.125rem" }}>
+              <PlusIcon className="fill-link-hover-foreground" />
+              <span>New Test Session</span>
+            </button>
+          </StateCard>
+
+          <StateCard state="Focus" classes="focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background outline-none">
+            <button className="btn-nav-cta ring-2 ring-ring ring-offset-2 ring-offset-background">
+              <PlusIcon className="fill-primary-foreground" />
+              <span>New Test Session</span>
+            </button>
+          </StateCard>
+
+          <StateCard state="Disabled" classes="disabled:opacity-50 disabled:cursor-not-allowed">
+            <button disabled className="btn-nav-cta opacity-50 cursor-not-allowed">
+              <PlusIcon className="fill-primary-foreground" />
+              <span>New Test Session</span>
+            </button>
+          </StateCard>
+        </div>
+      </SubSection>
+
+      {/* ──────── 8. XL ACTION CARDS ──────── */}
+      <SubSection
+        title="XL Action Cards"
+        description="Large card-sized buttons for empty-state and workflow CTAs."
+      >
+        <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-6">
+          <StateCard state="XL Outline — Default" classes="w-56">
+            <button className="btn-xl-outline w-full">
+              <div className="pb-4">
+                <svg width="60" height="60" viewBox="0 0 60 60" fill="none">
+                  <g clipPath="url(#clip_xl_plus_d)">
+                    <path d={svgPaths.p2455100} fill="currentColor" />
+                  </g>
+                  <defs>
+                    <clipPath id="clip_xl_plus_d"><rect fill="white" height="60" width="60" /></clipPath>
+                  </defs>
+                </svg>
+              </div>
+              <span>Create New Test Session</span>
+            </button>
+          </StateCard>
+
+          <StateCard state="XL Filled — Default" classes="w-56">
+            <button className="btn-xl-filled w-full">
+              <div className="pb-4">
+                <svg width="60" height="60" viewBox="0 0 60 60" fill="none">
+                  <g clipPath="url(#clip_xl_run_d)">
+                    <path d={svgPaths.p2af2dd00} fill="currentColor" />
+                  </g>
+                  <defs>
+                    <clipPath id="clip_xl_run_d"><rect fill="white" height="60" width="60" /></clipPath>
+                  </defs>
+                </svg>
+              </div>
+              <span>Start test</span>
+            </button>
+          </StateCard>
+
+          <StateCard state="XL — Disabled" classes="w-56">
+            <button className="btn-xl-outline w-full" disabled>
+              <div className="pb-4">
+                <svg width="48" height="60" viewBox="0 0 48 60" fill="none">
+                  <g clipPath="url(#clip_xl_rev_dis)">
+                    <path d={svgPaths.p1981c800} fill="currentColor" />
+                  </g>
+                  <defs>
+                    <clipPath id="clip_xl_rev_dis"><rect fill="white" height="60" width="48" /></clipPath>
+                  </defs>
+                </svg>
+              </div>
+              <span>Show report</span>
+            </button>
+          </StateCard>
+        </div>
+      </SubSection>
+
+      {/* ──────── 9. INTERACTIVE DEMO ──────── */}
+      <SubSection
+        title="Interactive Demo"
+        description="Live buttons using the CSS component classes. Hover to see the --link-hover transformation."
+      >
+        <div className="bg-card rounded-2xl p-8">
+          <p className="font-['Source_Sans_3',sans-serif] text-[12px] text-muted-foreground/60 uppercase tracking-wider mb-6">
+            Try interacting with these buttons
+          </p>
+          <div className="flex flex-wrap gap-4 items-center">
+            <button className="btn-primary hover:[&_svg_path]:fill-link-hover-foreground">
+              <CheckCircleIcon className="fill-primary-foreground transition-colors duration-200" />
+              <span>Primary Filled</span>
+            </button>
+
+            <button className="btn-primary">
+              <span>Text Only</span>
+            </button>
+
+            <button className="btn-outline-primary hover:[&_svg_path]:fill-link-hover-foreground">
+              <CheckCircleIcon className="fill-primary transition-colors duration-200" />
+              <span>Outline Primary</span>
+            </button>
+
+            <button className="btn-outline-muted">
+              <span>Outline Muted</span>
+            </button>
+
+            <button className="btn-icon hover:[&_svg_path]:fill-link-hover-foreground">
+              <MoreIcon className="transition-colors duration-200" />
+            </button>
+
+            <button className="btn-ghost hover:[&_svg_path]:fill-link-hover-foreground">
+              <TriangleLeftIcon className="transition-colors duration-200" />
+            </button>
+
+            <button disabled className="btn-primary">
+              <span>Disabled</span>
+            </button>
+          </div>
+        </div>
+      </SubSection>
+
+      {/* ──────── 10. CLASS REFERENCE TABLE ──────── */}
+      <SubSection
+        title="Quick Reference"
+        description="CSS component classes and their state tokens — all hover states use --link-hover."
+      >
+        <div className="overflow-x-auto">
+          <table className="w-full border-collapse">
+            <thead>
+              <tr className="border-b border-border">
+                {["Variant", "CSS Class", "Hover", "Active", "Focus", "Disabled"].map(
+                  (h) => (
+                    <th
+                      key={h}
+                      className="font-['Source_Sans_3',sans-serif] text-[11px] text-muted-foreground uppercase tracking-wider py-3 px-3 text-left"
+                      style={{ fontWeight: 600 }}
+                    >
+                      {h}
+                    </th>
+                  ),
+                )}
+              </tr>
+            </thead>
+            <tbody>
+              {[
+                {
+                  variant: "Primary Filled",
+                  cssClass: ".btn-primary",
+                  hover: "hover:bg-link-hover hover:text-link-hover-foreground",
+                  active: "active:bg-link-hover/90 active:scale-[0.98]",
+                  focus: "focus-visible:ring-2 ring-ring",
+                  disabled: "disabled:opacity-50",
+                },
+                {
+                  variant: "Outline Primary",
+                  cssClass: ".btn-outline-primary",
+                  hover: "hover:bg-link-hover hover:text-link-hover-foreground hover:border-transparent",
+                  active: "active:bg-link-hover/90 active:scale-[0.98]",
+                  focus: "focus-visible:ring-2 ring-ring",
+                  disabled: "disabled:opacity-50",
+                },
+                {
+                  variant: "Outline Muted",
+                  cssClass: ".btn-outline-muted",
+                  hover: "hover:bg-link-hover hover:text-link-hover-foreground hover:border-transparent",
+                  active: "active:bg-link-hover/90 active:scale-[0.98]",
+                  focus: "focus-visible:ring-2 ring-ring",
+                  disabled: "disabled:opacity-50",
+                },
+                {
+                  variant: "Icon Circle",
+                  cssClass: ".btn-icon",
+                  hover: "hover:bg-link-hover hover:border-transparent",
+                  active: "active:bg-link-hover/90 active:scale-95",
+                  focus: "focus-visible:ring-2 ring-ring",
+                  disabled: "disabled:opacity-40",
+                },
+                {
+                  variant: "Ghost",
+                  cssClass: ".btn-ghost",
+                  hover: "hover:bg-link-hover hover:text-link-hover-foreground",
+                  active: "active:bg-link-hover/90 active:scale-95",
+                  focus: "focus-visible:ring-2 ring-ring",
+                  disabled: "disabled:opacity-30",
+                },
+                {
+                  variant: "Nav CTA",
+                  cssClass: ".btn-nav-cta",
+                  hover: "hover:bg-link-hover hover:text-link-hover-foreground",
+                  active: "active:bg-link-hover/90 active:scale-[0.98]",
+                  focus: "focus-visible:ring-2 ring-ring",
+                  disabled: "disabled:opacity-50",
+                },
+              ].map((row) => (
+                <tr
+                  key={row.variant}
+                  className="border-b border-secondary group/row"
+                >
+                  <td className="font-['Source_Sans_3',sans-serif] text-[13px] text-foreground py-3 px-3 whitespace-nowrap">
+                    {row.variant}
+                  </td>
+                  {[row.cssClass, row.hover, row.active, row.focus, row.disabled].map(
+                    (val, i) => (
+                      <td key={i} className="py-3 px-3">
+                        <div className="flex items-center gap-1.5">
+                          <code className="font-mono text-[11px] text-primary/80 bg-secondary px-2 py-0.5 rounded-sm">
+                            {val}
+                          </code>
+                          <div className="opacity-0 group-hover/row:opacity-100 transition-opacity">
+                            <CopyButton token={val} />
+                          </div>
+                        </div>
+                      </td>
+                    ),
+                  )}
+                </tr>
+              ))}
+            </tbody>
+          </table>
+        </div>
+
+        {/* Variable reference */}
+        <div className="mt-6 bg-card rounded-xl p-5">
+          <p className="font-['Source_Sans_3',sans-serif] text-[11px] text-muted-foreground uppercase tracking-wider mb-3">
+            CSS Variables Used
+          </p>
+          <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-3">
+            {[
+              { name: "--link-hover", value: "#7954ff", desc: "Hover background for all buttons" },
+              { name: "--link-hover-foreground", value: "#ffffff", desc: "Hover text/icon color" },
+              { name: "--primary", value: "#78eac1", desc: "Default button background" },
+              { name: "--primary-foreground", value: "#1d1d1d", desc: "Default button text on primary" },
+              { name: "--border", value: "#2e2e2e", desc: "Muted outline border" },
+              { name: "--ring", value: "#7954ff", desc: "Focus ring color" },
+            ].map(({ name, value, desc }) => (
+              <div key={name} className="group/var flex items-start gap-3 bg-secondary/50 rounded-lg px-3 py-2">
+                <div
+                  className="size-5 rounded-sm shrink-0 mt-0.5 border border-border"
+                  style={{ backgroundColor: value }}
+                />
+                <div className="min-w-0 flex-1">
+                  <div className="flex items-center gap-1.5">
+                    <code className="font-mono text-[12px] text-primary">{name}</code>
+                    <div className="opacity-0 group-hover/var:opacity-100 transition-opacity">
+                      <CopyButton token={name} />
+                    </div>
+                  </div>
+                  <p className="font-['Source_Sans_3',sans-serif] text-[11px] text-muted-foreground/60">{desc}</p>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+      </SubSection>
+    </section>
+  );
+}