diff --git a/docs/agents/design.md b/docs/agents/design.md index d2bcff8b2..e35bfa285 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, weights, 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; a few `dark:` classes and shadcn compat tokens (`destructive`, `popover`) remain pending removal; and the custom font weight classes (`font-base`, `font-extraBold`) are still active — `font-semibold` does not exist until the weight migration lands. 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: `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. ## Color Architecture diff --git a/packages/graph-explorer/src/components/Button/Button.tsx b/packages/graph-explorer/src/components/Button/Button.tsx index 49201b00c..6c15ec0b2 100644 --- a/packages/graph-explorer/src/components/Button/Button.tsx +++ b/packages/graph-explorer/src/components/Button/Button.tsx @@ -16,9 +16,9 @@ const buttonStyles = cva({ ghost: "text-primary-foreground hover:bg-primary-subtle data-open:bg-primary-subtle", outline: - "text-text-primary border-input hover:bg-muted data-open:border-primary-main font-base border bg-transparent shadow-xs", + "text-text-primary border-input hover:bg-muted data-open:border-primary-main border bg-transparent font-normal shadow-xs", "outline-danger": - "text-danger border-input font-base hover:bg-danger-subtle data-open:bg-danger-subtle border bg-transparent shadow-xs", + "text-danger border-input hover:bg-danger-subtle data-open:bg-danger-subtle border bg-transparent font-normal shadow-xs", "primary-danger": "bg-danger hover:bg-danger-hover data-open:bg-danger-hover text-white", danger: diff --git a/packages/graph-explorer/src/components/CheckboxList.tsx b/packages/graph-explorer/src/components/CheckboxList.tsx index b0991db54..98de92947 100644 --- a/packages/graph-explorer/src/components/CheckboxList.tsx +++ b/packages/graph-explorer/src/components/CheckboxList.tsx @@ -63,7 +63,7 @@ export default function CheckboxList({ isBottom={false} aria-label="checkbox for all" > -