diff --git a/docs/agents/design.md b/docs/agents/design.md index e35bfa285..d7f7cc23a 100644 --- a/docs/agents/design.md +++ b/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. diff --git a/packages/graph-explorer/src/components/CollapsibleSidebar/CollapsibleSidebar.tsx b/packages/graph-explorer/src/components/CollapsibleSidebar/CollapsibleSidebar.tsx index 3aa63a9dc..d447cf87e 100644 --- a/packages/graph-explorer/src/components/CollapsibleSidebar/CollapsibleSidebar.tsx +++ b/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} diff --git a/packages/graph-explorer/src/index.css b/packages/graph-explorer/src/index.css index 7c75e6ce9..5fbce88d6 100644 --- a/packages/graph-explorer/src/index.css +++ b/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; +} diff --git a/packages/graph-explorer/tailwind.config.ts b/packages/graph-explorer/tailwind.config.ts deleted file mode 100644 index a29f38642..000000000 --- a/packages/graph-explorer/tailwind.config.ts +++ /dev/null @@ -1,97 +0,0 @@ -import { type Config } from "tailwindcss"; -import defaultTheme from "tailwindcss/defaultTheme"; -import plugin from "tailwindcss/plugin"; - -export default { - theme: { - fontFamily: { - sans: [ - "Nunito Sans", - "-apple-system", - "BlinkMacSystemFont", - "Segoe UI", - "Roboto", - "Oxygen", - "Ubuntu", - "Cantarell", - "Fira Sans", - "Droid Sans", - "Helvetica Neue", - "sans-serif", - ], - mono: defaultTheme.fontFamily.mono, - }, - extend: { - aria: { - invalid: 'invalid="true"', - }, - data: { - open: 'state="open"', - closed: 'state="closed"', - }, - transitionProperty: { - width: "width", - }, - backgroundImage: { - "logo-gradient": - "linear-gradient(225deg, #4d72f2 12.15%, #3334b9 87.02%)", - }, - maxWidth: { - paragraph: "36rem", - }, - zIndex: { - appBar: "1000", - panes: "1100", - modal: "1200", - popover: "1300", - menu: "1400", - tooltip: "1500", - }, - keyframes: { - expand: { - from: { - height: "0", - }, - to: { - height: "auto", - }, - }, - collapse: { - from: { - height: "auto", - }, - to: { - height: "0", - }, - }, - }, - animation: { - expand: "expand 0.2s cubic-bezier(0.87, 0, 0.13, 1)", - collapse: "collapse 0.2s cubic-bezier(0.87, 0, 0.13, 1)", - }, - }, - }, - plugins: [ - plugin(({ addUtilities, matchUtilities, theme }) => { - addUtilities({ - ".content-auto": { - "content-visibility": "auto", - }, - ".content-hidden": { - "content-visibility": "hidden", - }, - ".content-visible": { - "content-visibility": "visible", - }, - }); - matchUtilities( - { - "intrinsic-size": value => ({ - "contain-intrinsic-size": value, - }), - }, - { values: theme("spacing") }, - ); - }), - ], -} satisfies Config; diff --git a/packages/graph-explorer/vite.config.ts b/packages/graph-explorer/vite.config.ts index 0fb7f1fca..b54f44421 100644 --- a/packages/graph-explorer/vite.config.ts +++ b/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, ], },