From 0a9912234b416f75346f954bc5f6f043243ee0ef Mon Sep 17 00:00:00 2001
From: Kris McGinnes <kmcginnes@me.com>
Date: Thu, 16 Jul 2026 15:26:41 -0500
Subject: [PATCH] Migrate to Tailwind default font weight classes
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace custom fontWeight overrides with Tailwind's standard scale:
- font-base (400) → font-normal
- font-bold (600) → font-semibold
- font-extraBold (700) → font-bold

Delete the fontWeight block from tailwind.config.ts, restoring the
full default weight scale. Zero visual change — the rendered CSS
weight values are identical.
---
 docs/agents/design.md                                      | 2 +-
 packages/graph-explorer/src/components/Button/Button.tsx   | 4 ++--
 packages/graph-explorer/src/components/CheckboxList.tsx    | 2 +-
 packages/graph-explorer/src/components/Dialog.tsx          | 2 +-
 packages/graph-explorer/src/components/EmptyState.tsx      | 4 ++--
 packages/graph-explorer/src/components/LabelledSetting.tsx | 2 +-
 packages/graph-explorer/src/components/ListRow.tsx         | 2 +-
 packages/graph-explorer/src/components/NavBar.tsx          | 4 +++-
 packages/graph-explorer/src/components/Panel.tsx           | 2 +-
 packages/graph-explorer/src/components/RouteButton.tsx     | 4 ++--
 packages/graph-explorer/src/components/SearchResult.tsx    | 2 +-
 packages/graph-explorer/src/components/Select.tsx          | 2 +-
 packages/graph-explorer/src/components/SettingsPage.tsx    | 4 ++--
 packages/graph-explorer/src/components/Typography.tsx      | 2 +-
 packages/graph-explorer/src/index.css                      | 2 +-
 .../modules/ConnectionDetail/ConnectionDeleteButton.tsx    | 4 ++--
 .../src/modules/EntityDetails/EdgeDetail.tsx               | 2 +-
 .../src/modules/EntityDetails/NodeDetail.tsx               | 2 +-
 .../modules/GraphViewer/internalComponents/ContextMenu.tsx | 2 +-
 .../src/modules/NodeExpand/NodeExpandFilters.tsx           | 2 +-
 .../src/modules/SchemaGraph/Sidebar/Details.tsx            | 6 +++---
 .../src/modules/SearchSidebar/SearchResultsList.tsx        | 2 +-
 .../src/modules/common/NeighborsList/NeighborsList.tsx     | 2 +-
 .../graph-explorer/src/routes/Settings/SettingsAbout.tsx   | 4 ++--
 packages/graph-explorer/tailwind.config.ts                 | 7 -------
 25 files changed, 34 insertions(+), 39 deletions(-)

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"
           >
-            <Label className="font-bold">
+            <Label className="font-semibold">
               <Checkbox
                 checked={
                   numOfSelections > 0 && numOfSelections !== totalCheckboxes
diff --git a/packages/graph-explorer/src/components/Dialog.tsx b/packages/graph-explorer/src/components/Dialog.tsx
index 2e6fa53d9..784de12af 100644
--- a/packages/graph-explorer/src/components/Dialog.tsx
+++ b/packages/graph-explorer/src/components/Dialog.tsx
@@ -110,7 +110,7 @@ function DialogTitle({
   return (
     <DialogPrimitive.Title
       className={cn(
-        "gx-wrap-break-word text-lg leading-none font-bold tracking-tight",
+        "gx-wrap-break-word text-lg leading-none font-semibold tracking-tight",
         className,
       )}
       {...props}
diff --git a/packages/graph-explorer/src/components/EmptyState.tsx b/packages/graph-explorer/src/components/EmptyState.tsx
index c4c1bef4d..9841eb0bd 100644
--- a/packages/graph-explorer/src/components/EmptyState.tsx
+++ b/packages/graph-explorer/src/components/EmptyState.tsx
@@ -75,7 +75,7 @@ function EmptyStateTitle({
   return (
     <h3
       className={cn(
-        "text-text-primary gx-wrap-break-word text-lg font-bold text-balance group-data-[size=small]/empty:text-sm",
+        "text-text-primary gx-wrap-break-word text-lg font-semibold text-balance group-data-[size=small]/empty:text-sm",
         className,
       )}
       {...props}
@@ -93,7 +93,7 @@ function EmptyStateDescription({
   return (
     <div
       className={cn(
-        "font-base text-text-primary/75 gx-wrap-break-word text-base group-data-[size=small]/empty:text-sm",
+        "text-text-primary/75 gx-wrap-break-word text-base font-normal group-data-[size=small]/empty:text-sm",
         className,
       )}
       {...props}
diff --git a/packages/graph-explorer/src/components/LabelledSetting.tsx b/packages/graph-explorer/src/components/LabelledSetting.tsx
index a7aaf0c86..3daffe784 100644
--- a/packages/graph-explorer/src/components/LabelledSetting.tsx
+++ b/packages/graph-explorer/src/components/LabelledSetting.tsx
@@ -20,7 +20,7 @@ export function LabelledSetting({
           {label}
         </p>
         {description ? (
-          <p className="font-base text-text-secondary text-sm leading-normal text-pretty">
+          <p className="text-text-secondary text-sm leading-normal font-normal text-pretty">
             {description}
           </p>
         ) : null}
diff --git a/packages/graph-explorer/src/components/ListRow.tsx b/packages/graph-explorer/src/components/ListRow.tsx
index c45c6f19f..4079c7032 100644
--- a/packages/graph-explorer/src/components/ListRow.tsx
+++ b/packages/graph-explorer/src/components/ListRow.tsx
@@ -30,7 +30,7 @@ export function ListRowTitle({
   return (
     <div
       className={cn(
-        "gx-wrap-break-word line-clamp-1 text-base leading-6 font-bold text-current",
+        "gx-wrap-break-word line-clamp-1 text-base leading-6 font-semibold text-current",
         className,
       )}
       {...props}
diff --git a/packages/graph-explorer/src/components/NavBar.tsx b/packages/graph-explorer/src/components/NavBar.tsx
index af9ffb627..ab29828af 100644
--- a/packages/graph-explorer/src/components/NavBar.tsx
+++ b/packages/graph-explorer/src/components/NavBar.tsx
@@ -108,7 +108,9 @@ export function NavBarTitle({
     <div className={cn("flex h-full items-center", className)} {...props}>
       <div className="flex flex-col">
         {title && (
-          <div className="line-clamp-1 overflow-hidden font-bold">{title}</div>
+          <div className="line-clamp-1 overflow-hidden font-semibold">
+            {title}
+          </div>
         )}
         {subtitle && (
           <div className="text-text-secondary line-clamp-1 overflow-hidden text-sm leading-tight font-medium">
diff --git a/packages/graph-explorer/src/components/Panel.tsx b/packages/graph-explorer/src/components/Panel.tsx
index 4192ad875..214b11092 100644
--- a/packages/graph-explorer/src/components/Panel.tsx
+++ b/packages/graph-explorer/src/components/Panel.tsx
@@ -101,7 +101,7 @@ function PanelTitle({
   return (
     <div
       className={cn(
-        "text-text-primary inline-flex shrink-0 items-center gap-2 text-base leading-none font-bold whitespace-nowrap",
+        "text-text-primary inline-flex shrink-0 items-center gap-2 text-base leading-none font-semibold whitespace-nowrap",
         className,
       )}
       {...props}
diff --git a/packages/graph-explorer/src/components/RouteButton.tsx b/packages/graph-explorer/src/components/RouteButton.tsx
index e4770bd3b..7e58a88b6 100644
--- a/packages/graph-explorer/src/components/RouteButton.tsx
+++ b/packages/graph-explorer/src/components/RouteButton.tsx
@@ -97,7 +97,7 @@ function RouteButton({
       size="default"
       data-active={active || undefined}
       className={cn(
-        "hover:text-primary-foreground text-muted-foreground font-base data-active:border-b-primary-foreground data-active:text-primary-foreground h-full cursor-pointer rounded-none border-y-2 border-y-transparent px-5 hover:bg-transparent data-active:bg-transparent data-active:font-bold",
+        "hover:text-primary-foreground text-muted-foreground data-active:border-b-primary-foreground data-active:text-primary-foreground h-full cursor-pointer rounded-none border-y-2 border-y-transparent px-5 font-normal hover:bg-transparent data-active:bg-transparent data-active:font-semibold",
         className,
       )}
       {...props}
@@ -106,7 +106,7 @@ function RouteButton({
       <span className="grid place-items-center">
         <span className="col-start-1 row-start-1">{children}</span>
         <span
-          className="invisible col-start-1 row-start-1 font-bold"
+          className="invisible col-start-1 row-start-1 font-semibold"
           aria-hidden="true"
         >
           {children}
diff --git a/packages/graph-explorer/src/components/SearchResult.tsx b/packages/graph-explorer/src/components/SearchResult.tsx
index 8bb8c1bed..d5892a3bb 100644
--- a/packages/graph-explorer/src/components/SearchResult.tsx
+++ b/packages/graph-explorer/src/components/SearchResult.tsx
@@ -77,7 +77,7 @@ export function SearchResultTitle({
     <div
       {...props}
       className={cn(
-        "text-text-primary gx-wrap-break-word line-clamp-2 text-base leading-snug font-bold",
+        "text-text-primary gx-wrap-break-word line-clamp-2 text-base leading-snug font-semibold",
         className,
       )}
     />
diff --git a/packages/graph-explorer/src/components/Select.tsx b/packages/graph-explorer/src/components/Select.tsx
index 32e8c0e33..4aa1e460e 100644
--- a/packages/graph-explorer/src/components/Select.tsx
+++ b/packages/graph-explorer/src/components/Select.tsx
@@ -111,7 +111,7 @@ function SelectLabel({
   return (
     <SelectPrimitive.Label
       className={cn(
-        "font-base text-text-secondary px-3 py-1.5 text-sm",
+        "text-text-secondary px-3 py-1.5 text-sm font-normal",
         className,
       )}
       {...props}
diff --git a/packages/graph-explorer/src/components/SettingsPage.tsx b/packages/graph-explorer/src/components/SettingsPage.tsx
index 76c5e6160..835a33df9 100644
--- a/packages/graph-explorer/src/components/SettingsPage.tsx
+++ b/packages/graph-explorer/src/components/SettingsPage.tsx
@@ -48,7 +48,7 @@ export function SettingsPageTitle({
     <h1
       data-slot="settings-page-title"
       className={cn(
-        "text-foreground col-start-2 text-2xl font-bold",
+        "text-foreground col-start-2 text-2xl font-semibold",
         className,
       )}
       {...props}
@@ -66,7 +66,7 @@ export function SettingsPageDescription({
     <p
       data-slot="settings-page-description"
       className={cn(
-        "text-muted-foreground font-base col-start-2 text-base",
+        "text-muted-foreground col-start-2 text-base font-normal",
         className,
       )}
       {...props}
diff --git a/packages/graph-explorer/src/components/Typography.tsx b/packages/graph-explorer/src/components/Typography.tsx
index 64d0620f8..7c2c4bfae 100644
--- a/packages/graph-explorer/src/components/Typography.tsx
+++ b/packages/graph-explorer/src/components/Typography.tsx
@@ -14,7 +14,7 @@ export function PageHeading({
   return (
     <h1
       className={cn(
-        "font-extraBold text-text-primary text-4xl leading-snug",
+        "text-text-primary text-4xl leading-snug font-bold",
         className,
       )}
       {...props}
diff --git a/packages/graph-explorer/src/index.css b/packages/graph-explorer/src/index.css
index ec6ddbd63..7c75e6ce9 100644
--- a/packages/graph-explorer/src/index.css
+++ b/packages/graph-explorer/src/index.css
@@ -156,7 +156,7 @@
   }
 
   b {
-    @apply font-bold;
+    @apply font-semibold;
   }
 
   body {
diff --git a/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionDeleteButton.tsx b/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionDeleteButton.tsx
index a8c996044..ca3252548 100644
--- a/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionDeleteButton.tsx
+++ b/packages/graph-explorer/src/modules/ConnectionDetail/ConnectionDeleteButton.tsx
@@ -58,8 +58,8 @@ export default function ConnectionDeleteButton({
               </div>
               <Paragraph>
                 Are you sure you want to delete the connection,{" "}
-                <strong className="font-bold">{connectionName}</strong>? This
-                cannot be undone.
+                <strong className="font-semibold">{connectionName}</strong>?
+                This cannot be undone.
               </Paragraph>
             </div>
           </DialogBody>
diff --git a/packages/graph-explorer/src/modules/EntityDetails/EdgeDetail.tsx b/packages/graph-explorer/src/modules/EntityDetails/EdgeDetail.tsx
index a80ca7671..1d85c6425 100644
--- a/packages/graph-explorer/src/modules/EntityDetails/EdgeDetail.tsx
+++ b/packages/graph-explorer/src/modules/EntityDetails/EdgeDetail.tsx
@@ -113,7 +113,7 @@ const EdgeDetail = ({ edge }: EdgeDetailProps) => {
         <VertexRow vertex={targetVertex} />
       </div>
       <div className="space-y-4.5 p-3">
-        <div className="text-lg font-bold">{t("properties")}</div>
+        <div className="text-lg font-semibold">{t("properties")}</div>
         <ul className="space-y-4.5">
           {allAttributes.map(attribute => (
             <EntityAttribute key={attribute.name} attribute={attribute} />
diff --git a/packages/graph-explorer/src/modules/EntityDetails/NodeDetail.tsx b/packages/graph-explorer/src/modules/EntityDetails/NodeDetail.tsx
index 92516565c..0971c94c8 100644
--- a/packages/graph-explorer/src/modules/EntityDetails/NodeDetail.tsx
+++ b/packages/graph-explorer/src/modules/EntityDetails/NodeDetail.tsx
@@ -45,7 +45,7 @@ export default function NodeDetail({ node }: VertexDetailProps) {
       <VertexRow vertex={node} className="border-b p-3" />
       <NeighborsList vertexId={node.id} />
       <div className="space-y-4.5 p-3">
-        <div className="text-lg font-bold">{t("properties")}</div>
+        <div className="text-lg font-semibold">{t("properties")}</div>
         <ul className="space-y-4.5">
           {allAttributes.map(attribute => (
             <EntityAttribute key={attribute.name} attribute={attribute} />
diff --git a/packages/graph-explorer/src/modules/GraphViewer/internalComponents/ContextMenu.tsx b/packages/graph-explorer/src/modules/GraphViewer/internalComponents/ContextMenu.tsx
index 751f1f13a..7a7255173 100644
--- a/packages/graph-explorer/src/modules/GraphViewer/internalComponents/ContextMenu.tsx
+++ b/packages/graph-explorer/src/modules/GraphViewer/internalComponents/ContextMenu.tsx
@@ -385,7 +385,7 @@ function ContextMenuTitle({
   return (
     <div
       className={cn(
-        "text-text-primary [&_svg]:text-primary-dark line-clamp-1 flex flex-row items-center gap-3 rounded-sm px-3 py-2 font-bold [&_svg]:size-5",
+        "text-text-primary [&_svg]:text-primary-dark line-clamp-1 flex flex-row items-center gap-3 rounded-sm px-3 py-2 font-semibold [&_svg]:size-5",
         className,
       )}
       {...props}
diff --git a/packages/graph-explorer/src/modules/NodeExpand/NodeExpandFilters.tsx b/packages/graph-explorer/src/modules/NodeExpand/NodeExpandFilters.tsx
index 2f186d690..2f493d228 100644
--- a/packages/graph-explorer/src/modules/NodeExpand/NodeExpandFilters.tsx
+++ b/packages/graph-explorer/src/modules/NodeExpand/NodeExpandFilters.tsx
@@ -93,7 +93,7 @@ const NodeExpandFilters = ({
 
   return (
     <div className="grow space-y-6 p-3">
-      <h1 className="text-lg font-bold">Neighbor Expansion Options</h1>
+      <h1 className="text-lg font-semibold">Neighbor Expansion Options</h1>
       <Section>
         <SectionTitle>{t("node-expand.neighbors-of-type")}</SectionTitle>
         <SelectField
diff --git a/packages/graph-explorer/src/modules/SchemaGraph/Sidebar/Details.tsx b/packages/graph-explorer/src/modules/SchemaGraph/Sidebar/Details.tsx
index d32045b45..738e293b3 100644
--- a/packages/graph-explorer/src/modules/SchemaGraph/Sidebar/Details.tsx
+++ b/packages/graph-explorer/src/modules/SchemaGraph/Sidebar/Details.tsx
@@ -50,7 +50,7 @@ export function DetailsTitle({
 }: ComponentPropsWithRef<"h2">) {
   return (
     <h2
-      className={cn("text-foreground text-base/7 font-bold", className)}
+      className={cn("text-foreground text-base/7 font-semibold", className)}
       {...props}
     >
       {children}
@@ -266,7 +266,7 @@ function EdgeTypeText({
       label={displayLabel}
       selected={selected}
       onClick={onClick}
-      className="data-selected:text-text-primary italic data-selected:font-bold"
+      className="data-selected:text-text-primary italic data-selected:font-semibold"
     >
       {displayLabel}
     </ClickableTypeText>
@@ -290,7 +290,7 @@ function VertexTypeText({
       label={displayLabel}
       selected={selected}
       onClick={onClick}
-      className="data-selected:text-text-primary underline decoration-2 underline-offset-4 data-selected:font-bold"
+      className="data-selected:text-text-primary underline decoration-2 underline-offset-4 data-selected:font-semibold"
       style={{ textDecorationColor: style.color }}
     >
       {displayLabel}
diff --git a/packages/graph-explorer/src/modules/SearchSidebar/SearchResultsList.tsx b/packages/graph-explorer/src/modules/SearchSidebar/SearchResultsList.tsx
index 5c6cdbc66..301191d38 100644
--- a/packages/graph-explorer/src/modules/SearchSidebar/SearchResultsList.tsx
+++ b/packages/graph-explorer/src/modules/SearchSidebar/SearchResultsList.tsx
@@ -52,7 +52,7 @@ export function SearchResultsList({
       <div className="grow space-y-6 p-3">
         <div className="flex flex-row items-center gap-3">
           <div>
-            <h1 className="text-xl font-bold">Results</h1>
+            <h1 className="text-xl font-semibold">Results</h1>
             <ResultCounts results={results} />
           </div>
           <div className="grow" />
diff --git a/packages/graph-explorer/src/modules/common/NeighborsList/NeighborsList.tsx b/packages/graph-explorer/src/modules/common/NeighborsList/NeighborsList.tsx
index 0b7de1738..e44162dd2 100644
--- a/packages/graph-explorer/src/modules/common/NeighborsList/NeighborsList.tsx
+++ b/packages/graph-explorer/src/modules/common/NeighborsList/NeighborsList.tsx
@@ -42,7 +42,7 @@ export default function NeighborsList({
       className={cn("space-y-[1.125rem] border-b p-3", className)}
       {...props}
     >
-      <div className="text-lg font-bold">Neighbors ({neighbors.all})</div>
+      <div className="text-lg font-semibold">Neighbors ({neighbors.all})</div>
       <ul className="grid grid-cols-[1fr_auto_auto] gap-x-2 gap-y-3">
         {neighborsOptions
           .slice(0, showMore ? undefined : MAX_NEIGHBOR_TYPE_ROWS)
diff --git a/packages/graph-explorer/src/routes/Settings/SettingsAbout.tsx b/packages/graph-explorer/src/routes/Settings/SettingsAbout.tsx
index 2716f1d46..f360b9b5a 100644
--- a/packages/graph-explorer/src/routes/Settings/SettingsAbout.tsx
+++ b/packages/graph-explorer/src/routes/Settings/SettingsAbout.tsx
@@ -37,10 +37,10 @@ export default function SettingsAbout() {
             <NavBarLogo />
           </div>
           <div>
-            <p className="text-foreground text-xl font-bold">
+            <p className="text-foreground text-xl font-semibold">
               {LABELS.APP_NAME}
             </p>
-            <p className="text-muted-foreground font-base text-base">
+            <p className="text-muted-foreground text-base font-normal">
               App version:{" "}
               <span className="text-foreground font-medium">
                 {__GRAPH_EXP_VERSION__}
diff --git a/packages/graph-explorer/tailwind.config.ts b/packages/graph-explorer/tailwind.config.ts
index 4decbcc09..a29f38642 100644
--- a/packages/graph-explorer/tailwind.config.ts
+++ b/packages/graph-explorer/tailwind.config.ts
@@ -21,13 +21,6 @@ export default {
       ],
       mono: defaultTheme.fontFamily.mono,
     },
-    fontWeight: {
-      light: "300",
-      base: "400",
-      medium: "500",
-      bold: "600",
-      extraBold: "700",
-    },
     extend: {
       aria: {
         invalid: 'invalid="true"',