Delete tailwind.config.ts and migrate to CSS-native declarations

docs/agents/design.md

@@ -3,7 +3,7 @@
 The visual design system for Graph Explorer. Read this before modifying UI styling, adding color tokens, or writing Tailwind classes in components.
 
 > [!NOTE]
-> **Migration in progress.** This document describes the _target_ state; the cleanup is tracked in [#1952](https://github.com/aws/graph-explorer/issues/1952). Until it completes, the codebase deviates in known ways: `tailwind.config.ts` still exists and owns fonts, z-index, keyframes, and some utilities; legacy color aliases (`text-text-primary`, `bg-background-default`, `primary-main`, etc.) are still in use pending migration to the canonical tokens below; and a few `dark:` classes and shadcn compat tokens (`destructive`, `popover`) remain pending removal. When touching styled code during the transition, migrate toward this document, not away from it.
+> **Migration in progress.** This document describes the _target_ state; the cleanup is tracked in [#1952](https://github.com/aws/graph-explorer/issues/1952). Until it completes, the codebase deviates in known ways: legacy color aliases (`text-text-primary`, `bg-background-default`, `primary-main`, etc.) are still in use pending migration to the canonical tokens below; and a few `dark:` classes and shadcn compat tokens (`destructive`, `popover`) remain pending removal. When touching styled code during the transition, migrate toward this document, not away from it.
 
 ## Color Architecture
 
@@ -113,4 +113,4 @@ The `tw-animate-css` library is imported and provides enter/exit animation utili
 
 ## Source of Truth
 
-The target is a single source of truth: `packages/graph-explorer/src/index.css` — all tokens, utilities, and theme values in one CSS file with no separate JS config. Until the migration completes, `tailwind.config.ts` still exists (loaded via `@config`) and owns fonts, weights, z-index, keyframes, and the content-visibility plugin utilities.
+All styling tokens, utilities, and theme values live in one file: `packages/graph-explorer/src/index.css`. There is no separate JS config file.

packages/graph-explorer/src/components/CollapsibleSidebar/CollapsibleSidebar.tsx

@@ -37,7 +37,7 @@ export function CollapsibleSidebar({
       }}
       className={cn(
         enableAnimation &&
-          "transition-width min-h-0 transform duration-200 ease-in-out",
+          "min-h-0 transform transition-[width] duration-200 ease-in-out",
       )}
     >
       {children}

packages/graph-explorer/src/index.css

@@ -1,8 +1,6 @@
 @import "tailwindcss";
 @import "tw-animate-css";
 
-@config "../tailwind.config.ts";
-
 /*
  * Use `dark` class name to indicate dark mode.
  *
@@ -14,7 +12,43 @@
  */
 @custom-variant dark (&:where(.dark, .dark *));
 
+/* Radix UI uses data-state="open"/"closed" on interactive elements */
+@custom-variant data-open (&[data-state="open"]);
+@custom-variant data-closed (&[data-state="closed"]);
+
 @theme {
+  /* Background images */
+  --background-image-logo-gradient: linear-gradient(
+    225deg,
+    #4d72f2 12.15%,
+    #3334b9 87.02%
+  );
+
+  /* Max widths */
+  --max-width-paragraph: 36rem;
+
+  /* Keyframes */
+  --animate-expand: expand 0.2s cubic-bezier(0.87, 0, 0.13, 1);
+  --animate-collapse: collapse 0.2s cubic-bezier(0.87, 0, 0.13, 1);
+
+  @keyframes expand {
+    from {
+      height: 0;
+    }
+    to {
+      height: auto;
+    }
+  }
+
+  @keyframes collapse {
+    from {
+      height: auto;
+    }
+    to {
+      height: 0;
+    }
+  }
+
   /* Custom color palette */
 
   /* Remove unused neutral colors from Tailwind theme */
@@ -196,3 +230,46 @@
   hyphens: auto;
   text-wrap: pretty;
 }
+
+@utility content-auto {
+  content-visibility: auto;
+}
+
+@utility content-hidden {
+  content-visibility: hidden;
+}
+
+@utility content-visible {
+  content-visibility: visible;
+}
+
+@utility intrinsic-size-* {
+  contain-intrinsic-size: --spacing(--value(integer));
+  contain-intrinsic-size: --value([length]);
+}
+
+/* Semantic z-index scale */
+
+@utility z-appBar {
+  z-index: 1000;
+}
+
+@utility z-panes {
+  z-index: 1100;
+}
+
+@utility z-modal {
+  z-index: 1200;
+}
+
+@utility z-popover {
+  z-index: 1300;
+}
+
+@utility z-menu {
+  z-index: 1400;
+}
+
+@utility z-tooltip {
+  z-index: 1500;
+}

packages/graph-explorer/vite.config.ts

@@ -88,7 +88,6 @@ export default defineConfig(({ mode }) => {
           "src/**/*.style.ts",
           "src/**/*.styles.ts",
           "src/**/*.styles.css.ts",
-          "tailwind.config.ts",
           ...coverageConfigDefaults.exclude,
         ],
       },