Migrate to Tailwind default font weight classes

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
 

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:

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

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}

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}

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}

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}

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">

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}

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}

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,
       )}
     />

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}

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}

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}

packages/graph-explorer/src/index.css

@@ -156,7 +156,7 @@
   }
 
   b {
-    @apply font-bold;
+    @apply font-semibold;
   }
 
   body {

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>

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} />

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} />

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}

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

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}

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" />

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)

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__}

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"',