From 51f0c6cca728915d58594cad8f0f86f544fba01e Mon Sep 17 00:00:00 2001 From: Kris McGinnes Date: Thu, 16 Jul 2026 19:13:30 -0500 Subject: [PATCH] Inline shadcn compatibility tokens MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace shadcn compat aliases with canonical tokens in components: - bg-popover / text-popover-foreground → bg-background / text-foreground - text-destructive / bg-destructive → text-danger / bg-danger - bg-accent / text-accent-foreground → bg-primary-subtle / text-primary-foreground Delete the compat alias declarations (destructive, popover, popover-foreground) and the accent alias group from index.css. Update design.md to remove stale dark-mode and compat-token references from the migration banner. --- docs/agents/design.md | 6 ++---- .../graph-explorer/src/components/AlertDialog.tsx | 2 +- .../graph-explorer/src/components/DropdownMenu.tsx | 14 +++++++------- packages/graph-explorer/src/components/Field.tsx | 4 ++-- packages/graph-explorer/src/components/Toaster.tsx | 4 ++-- packages/graph-explorer/src/index.css | 11 ----------- 6 files changed, 14 insertions(+), 27 deletions(-) diff --git a/docs/agents/design.md b/docs/agents/design.md index d7f7cc23a..0bb50b775 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: 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. When touching styled code during the transition, migrate toward this document, not away from it. ## Color Architecture @@ -46,8 +46,6 @@ The Tailwind neutral scales (`slate`, `zinc`, `neutral`, `stone`) are removed. ` Roles: `primary`, `danger`, `warning`, `success`, `neutral`. -**Accent** is an alias group used for highlight/selection states — `accent` → `primary-subtle`, `accent-hover` → `primary-subtle-hover`, `accent-foreground` → `primary-foreground`. Whether it survives as a distinct abstraction or gets inlined to the primary tokens is an open question for the migration ([#1956](https://github.com/aws/graph-explorer/issues/1956)). - ### Using color in components **Strong preference: use semantic tokens.** Write `bg-primary-subtle text-primary-foreground`, not `bg-brand-50 text-brand-700`. @@ -66,7 +64,7 @@ Roles: `primary`, `danger`, `warning`, `success`, `neutral`. Dark mode is a planned future feature. The semantic token structure is designed to support it via CSS `light-dark()` on the token definitions — when dark mode arrives, components should not need `dark:` classes because the semantic tokens themselves will resolve to appropriate values per mode. -**Policy:** Do not add new `dark:` variant classes. A few legacy usages remain pending removal ([#1955](https://github.com/aws/graph-explorer/issues/1955)). +**Policy:** Do not add `dark:` variant classes. ## Tailwind Conventions diff --git a/packages/graph-explorer/src/components/AlertDialog.tsx b/packages/graph-explorer/src/components/AlertDialog.tsx index 03a589579..a59c62f04 100644 --- a/packages/graph-explorer/src/components/AlertDialog.tsx +++ b/packages/graph-explorer/src/components/AlertDialog.tsx @@ -60,7 +60,7 @@ function AlertDialogContent({ data-slot="alert-dialog-content" data-size={size} className={cn( - "group/alert-dialog-content bg-popover text-popover-foreground ring-foreground/10 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 flex max-h-full w-full flex-col gap-6 overflow-hidden rounded-xl p-6 shadow-lg ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg", + "group/alert-dialog-content bg-background text-foreground ring-foreground/10 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 flex max-h-full w-full flex-col gap-6 overflow-hidden rounded-xl p-6 shadow-lg ring-1 duration-100 outline-none data-[size=default]:max-w-xs data-[size=sm]:max-w-xs data-[size=default]:sm:max-w-lg", className, )} {...props} diff --git a/packages/graph-explorer/src/components/DropdownMenu.tsx b/packages/graph-explorer/src/components/DropdownMenu.tsx index e732d899f..6478a3a99 100644 --- a/packages/graph-explorer/src/components/DropdownMenu.tsx +++ b/packages/graph-explorer/src/components/DropdownMenu.tsx @@ -42,7 +42,7 @@ function DropdownMenuContent({ sideOffset={sideOffset} align={align} className={cn( - "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-popover text-popover-foreground z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-lg ring-1 duration-100 data-[state=closed]:overflow-hidden", + "data-open:animate-in data-closed:animate-out data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 ring-foreground/10 bg-background text-foreground z-50 max-h-(--radix-dropdown-menu-content-available-height) w-(--radix-dropdown-menu-trigger-width) min-w-32 origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-lg p-1 shadow-lg ring-1 duration-100 data-[state=closed]:overflow-hidden", className, )} {...props} @@ -74,7 +74,7 @@ function DropdownMenuItem({ data-inset={inset} data-variant={variant} className={cn( - "focus:bg-accent focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:text-destructive not-data-[variant=destructive]:focus:**:text-accent-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-3 py-2 text-base outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "focus:bg-primary-subtle focus:text-primary-foreground data-[variant=destructive]:text-danger data-[variant=destructive]:focus:bg-danger/10 data-[variant=destructive]:focus:text-danger data-[variant=destructive]:*:[svg]:text-danger not-data-[variant=destructive]:focus:**:text-primary-foreground group/dropdown-menu-item relative flex cursor-default items-center gap-1.5 rounded-md px-3 py-2 text-base outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className, )} {...props} @@ -96,7 +96,7 @@ function DropdownMenuCheckboxItem({ data-slot="dropdown-menu-checkbox-item" data-inset={inset} className={cn( - "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-2 pr-8 pl-3 text-base outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "focus:bg-primary-subtle focus:text-primary-foreground focus:**:text-primary-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-2 pr-8 pl-3 text-base outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className, )} checked={checked} @@ -139,7 +139,7 @@ function DropdownMenuRadioItem({ data-slot="dropdown-menu-radio-item" data-inset={inset} className={cn( - "focus:bg-accent focus:text-accent-foreground focus:**:text-accent-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-2 pr-8 pl-3 text-base outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", + "focus:bg-primary-subtle focus:text-primary-foreground focus:**:text-primary-foreground relative flex cursor-default items-center gap-1.5 rounded-md py-2 pr-8 pl-3 text-base outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-7 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className, )} {...props} @@ -198,7 +198,7 @@ function DropdownMenuShortcut({ ) { } const fieldVariants = cva({ - base: "group/field data-[invalid=true]:text-destructive flex w-full gap-3", + base: "group/field data-[invalid=true]:text-danger flex w-full gap-3", variants: { orientation: { vertical: ["flex-col *:w-full [&>.sr-only]:w-auto"], @@ -223,7 +223,7 @@ function FieldError({
{content} diff --git a/packages/graph-explorer/src/components/Toaster.tsx b/packages/graph-explorer/src/components/Toaster.tsx index 5306e2d14..ff967e323 100644 --- a/packages/graph-explorer/src/components/Toaster.tsx +++ b/packages/graph-explorer/src/components/Toaster.tsx @@ -26,8 +26,8 @@ export function Toaster() { }} style={ { - "--normal-bg": "var(--color-popover)", - "--normal-text": "var(--color-popover-foreground)", + "--normal-bg": "var(--color-background)", + "--normal-text": "var(--color-foreground)", "--normal-border": "var(--color-border)", "--border-radius": "var(--radius-lg)", } as React.CSSProperties diff --git a/packages/graph-explorer/src/index.css b/packages/graph-explorer/src/index.css index 71dc81a99..c2489d23d 100644 --- a/packages/graph-explorer/src/index.css +++ b/packages/graph-explorer/src/index.css @@ -90,11 +90,6 @@ --color-muted-foreground: var(--color-gray-500); --color-muted: var(--color-gray-100); - /* Used for highlights and selections */ - --color-accent-foreground: var(--color-primary-foreground); - --color-accent: var(--color-primary-subtle); - --color-accent-hover: var(--color-primary-subtle-hover); - --color-neutral-foreground: var(--color-gray-900); --color-neutral: var(--color-gray-900); --color-neutral-hover: var(--color-gray-700); @@ -130,12 +125,6 @@ --color-input-background: var(--color-white); --color-input-border: var(--color-gray-300); - /* Semantic colors for shadcn/ui components */ - - --color-destructive: var(--color-danger); - --color-popover: var(--color-background); - --color-popover-foreground: var(--color-foreground); - /* Legacy colors */ --color-text-primary: var(--color-foreground);