improvement(emcn): let every primitive inherit the document font weight (#6291)

* improvement(emcn): let every primitive inherit the document font weight

#6241 flattened the type scale by deleting the tailwind `fontWeight` override
that remapped `font-medium` to 440/480. Nothing was restyled, but the utility's
meaning changed: every one of ~505 call sites written when `font-medium` sat
~10 units above body snapped to a stock 500 against a body that also dropped
430 -> 400. The tab strip and table header Emir reported are two symptoms.

The same PR added the "Font Weight" section to sim-styling.md declaring the end
state (400 default, weight class only to step up) without migrating the codebase
to it, so the rule and its violations shipped together and no gate could flag it.

Removes the hardcoded weight from the ~20 pre-chip emcn primitives so they
inherit 400, matching the chip family that was already correct. Deletes the
three `font-normal` overrides that existed only to undo those defaults
(`TabStrip`, `ChipCombobox`, `ChipModalField`) — their TSDoc said as much.

`<th>` needed care in the other direction: Preflight resets h1-h6 but not `th`,
so a header keeps the UA bold 700 and `font-medium` was holding it *down*.
Deleting it made headers heavier. Rather than neutralize per call site — the
codebase had already accumulated 12 such workarounds — globals.css completes
Preflight with `th { font-weight: inherit }`, and the 8 now-dead `font-normal`
workarounds come out. The rule keeps no element-level exceptions.

Two width-measurement mirrors had to move with the text they measure:
table-grid's auto-fit canvas and tag-input's hidden sizing span. Left stale,
both would mis-measure.

Also: drops an inline `font-weight:500` from the header drag ghost, normalizes
`text-[13px]`/`text-[11px]` to `text-small`/`text-xs`, aligns the landing table
previews that clone the product header, documents AvatarFallback's deliberate
step-up, and corrects the stale AGENTS.md line claiming Button owns a weight.

Verified: typecheck 0, lint clean, full vitest run identical to origin/staging
across three runs (158 failed suites / 1 failed test / 16350 passing — all
pre-existing: a PostCSS env error and a missing `rg` binary).

* fix(tables): align the workflow-group drag ghost with the label it previews

Cursor Bugbot caught the sibling of the ghost fixed in column-header-menu:
this one kept an inline `font-weight:500` after the band label dropped to
the inherited 400, so the drag preview no longer matched the text it
represents — the same mirror drift this PR fixes for the width-measurement
spans.

It was drifted on size too: hardcoded `font-size:13px` against a label that
is `text-xs` (11px), so it never matched. Both now come from the token the
label uses, which also clears the inline fontWeight the styling rule bans.

* fix(toolbar): stop the block drag preview hardcoding a weight its label does not use

Third instance of the same mirror drift, found by sweeping rather than
waiting for it to be reported. The toolbar item label renders at the
inherited 400 (its container is `chipVariants`, which is weight-free), but
the drag preview hardcoded `font-weight: 500` — so the preview never matched
the item it previews, before or after this PR.

Drops the weight only. The 16px is left alone: a drag preview reading larger
than its source is a deliberate affordance, not a mismatch.

Not fixed here, deliberately: the `font-weight: 500` in code-editor.tsx's
highlight layer. That HTML is rendered in registration with a transparent
textarea, so weight affects glyph advance widths and the caret alignment —
it needs live in-editor verification, unlike a detached drag ghost. Its two
placeholder branches already disagree on weight, so it wants its own change.

* revert(canvas): drop the workflow-editor panel changes from this PR

The canvas panel is under active modification elsewhere, so this PR stays
out of it. Reverts the toolbar search input, the sub-block table cell and
its overlay mirror, the messages-input textarea and its mirror, and the
block drag preview — all back to staging verbatim.

Cursor Bugbot was right about that last one and I was wrong: the preview
mirrors the drag DESTINATION (its TSDoc says "looks like a workflow block",
and 250px/16px are block-card dimensions), not the toolbar chip I had
compared it against. workflow-block-view renders the title `font-medium
text-md`, so its 500 was correct. Moot now that the file is reverted, but
worth recording so the next sweep does not repeat the mistake.

The globals `th` rule still covers the sub-block table header without a
call-site class; the explicit font-medium there simply wins over it, exactly
as staging renders today.

Author: waleedlatif1

apps/sim/app/(landing)/components/landing-preview/components/landing-preview-logs/landing-preview-logs.tsx

@@ -236,10 +236,7 @@ export function LandingPreviewLogs() {
           <thead className='border-[var(--border)] border-b'>
             <tr>
               {COL_HEADERS.map(({ key, label }) => (
-                <th
-                  key={key}
-                  className='h-10 px-6 py-1.5 text-left align-middle font-normal text-caption'
-                >
+                <th key={key} className='h-10 px-6 py-1.5 text-left align-middle text-caption'>
                   <button
                     type='button'
                     onClick={() => handleSort(key)}

apps/sim/app/(landing)/components/landing-preview/components/landing-preview-resource/landing-preview-resource.tsx

@@ -131,10 +131,7 @@ export function LandingPreviewResource({
           <thead className='border-[var(--border)] border-b'>
             <tr>
               {columns.map((col) => (
-                <th
-                  key={col.id}
-                  className='h-10 px-6 py-1.5 text-left align-middle font-normal text-caption'
-                >
+                <th key={col.id} className='h-10 px-6 py-1.5 text-left align-middle text-caption'>
                   <button
                     type='button'
                     onClick={() => handleSortClick(col.id)}

apps/sim/app/(landing)/components/landing-preview/components/landing-preview-tables/landing-preview-tables.tsx

@@ -467,7 +467,7 @@ function SpreadsheetView({ tableId, tableName, onBack }: SpreadsheetViewProps) {
                   <th key={col.id} className={CELL_HEADER}>
                     <div className='flex h-full w-full min-w-0 items-center px-2 py-[7px]'>
                       <Icon className='size-3 shrink-0 text-[var(--text-icon)]' />
-                      <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[var(--text-primary)] text-small'>
+                      <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap text-[var(--text-primary)] text-small'>
                         {col.label}
                       </span>
                       <ChevronDown className='ml-auto size-[14px] shrink-0 text-[var(--text-muted)]' />

apps/sim/app/(landing)/knowledge/components/knowledge-hero-loop.tsx

@@ -214,7 +214,7 @@ export function KnowledgeHeroLoop() {
                   {COL_HEADERS.map((header) => (
                     <th
                       key={header}
-                      className='h-10 px-6 py-1.5 text-left align-middle font-normal text-[var(--text-muted)] text-caption'
+                      className='h-10 px-6 py-1.5 text-left align-middle text-[var(--text-muted)] text-caption'
                     >
                       {header}
                     </th>

apps/sim/app/(landing)/logs/components/logs-hero-loop.tsx

@@ -335,7 +335,7 @@ export function LogsHeroLoop() {
                   {COL_HEADERS.map((label) => (
                     <th
                       key={label}
-                      className='h-10 px-6 py-1.5 text-left align-middle font-normal text-[var(--text-muted)] text-caption'
+                      className='h-10 px-6 py-1.5 text-left align-middle text-[var(--text-muted)] text-caption'
                     >
                       {label}
                     </th>

apps/sim/app/(landing)/tables/components/tables-hero-loop.tsx

@@ -316,7 +316,7 @@ function TablesGridPane({ rowCount, filledCount }: TablesGridPaneProps) {
                   <th key={column.id} className={CELL_HEADER}>
                     <div className='flex h-full w-full min-w-0 items-center px-2 py-[7px]'>
                       <Icon className='size-3 shrink-0 text-[var(--text-icon)]' />
-                      <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[var(--text-primary)] text-small'>
+                      <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap text-[var(--text-primary)] text-small'>
                         {column.label}
                       </span>
                       <ChevronDown className='ml-auto size-[14px] shrink-0 text-[var(--text-muted)]' />

apps/sim/app/_styles/globals.css

@@ -658,6 +658,15 @@ html.sidebar-booting .sidebar-shell-inner {
     letter-spacing: 0.28px;
   }
 
+  /* Completes Preflight, which resets h1-h6 to `inherit` but leaves `th` at the
+     UA `bold`. Without this a table header, and every label, input, and button
+     inside it, silently renders at 700 — so `font-medium` on a header reads as
+     a step DOWN, and removing it makes the header heavier. Normalized here once
+     rather than neutralized at each `<th>`. */
+  th {
+    font-weight: inherit;
+  }
+
   /* Ensure visible text caret across inputs and editors */
   input,
   textarea,

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/new-column-dropdown/new-column-dropdown.tsx

@@ -71,7 +71,7 @@ export function NewColumnDropdown({
         onClick={blocked ? onBlocked : undefined}
       >
         <Plus className='size-[14px] shrink-0 text-[var(--text-icon)]' />
-        <span className='font-medium text-[var(--text-body)] text-small'>New column</span>
+        <span className='text-[var(--text-body)] text-small'>New column</span>
       </button>
     )
 

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx

@@ -162,8 +162,9 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
 
       const ghost = document.createElement('div')
       ghost.textContent = ghostLabel
+      ghost.className = 'text-small'
       ghost.style.cssText =
-        'position:absolute;top:-9999px;padding:4px 8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;font-size:13px;font-weight:500;white-space:nowrap;color:var(--text-primary)'
+        'position:absolute;top:-9999px;padding:4px 8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;white-space:nowrap;color:var(--text-primary)'
       document.body.appendChild(ghost)
       e.dataTransfer.setDragImage(ghost, ghost.offsetWidth / 2, ghost.offsetHeight / 2)
       requestAnimationFrame(() => ghost.parentNode?.removeChild(ghost))
@@ -284,7 +285,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
               if (e.key === 'Escape') onRenameCancel()
             }}
             onBlur={onRenameSubmit}
-            className='ml-1.5 min-w-0 flex-1 border-0 bg-transparent p-0 font-medium text-[var(--text-primary)] text-small outline-none focus:outline-none focus:ring-0'
+            className='ml-1.5 min-w-0 flex-1 border-0 bg-transparent p-0 text-[var(--text-primary)] text-small outline-none focus:outline-none focus:ring-0'
           />
         </div>
       ) : readOnly ? (
@@ -295,7 +296,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
             blockIconInfo={sourceInfo?.blockIconInfo}
             blockMissing={blockMissing}
           />
-          <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[13px] text-[var(--text-primary)]'>
+          <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap text-[var(--text-primary)] text-small'>
             {column.workflowGroupId ? column.headerLabel : column.name}
           </span>
         </div>
@@ -313,7 +314,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({
               blockIconInfo={sourceInfo?.blockIconInfo}
               blockMissing={blockMissing}
             />
-            <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap font-medium text-[var(--text-primary)] text-small'>
+            <span className='ml-1.5 min-w-0 overflow-clip text-ellipsis whitespace-nowrap text-[var(--text-primary)] text-small'>
               {column.workflowGroupId ? column.headerLabel : column.name}
             </span>
           </button>

apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.tsx

@@ -368,8 +368,9 @@ export function WorkflowGroupMetaCell({
 
     const ghost = document.createElement('div')
     ghost.textContent = name
+    ghost.className = 'text-xs'
     ghost.style.cssText =
-      'position:absolute;top:-9999px;padding:4px 8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;font-size:13px;font-weight:500;white-space:nowrap;color:var(--text-primary)'
+      'position:absolute;top:-9999px;padding:4px 8px;background:var(--bg);border:1px solid var(--border);border-radius:4px;white-space:nowrap;color:var(--text-primary)'
     document.body.appendChild(ghost)
     e.dataTransfer.setDragImage(ghost, ghost.offsetWidth / 2, ghost.offsetHeight / 2)
     requestAnimationFrame(() => ghost.parentNode?.removeChild(ghost))
@@ -438,9 +439,7 @@ export function WorkflowGroupMetaCell({
         ) : (
           <Workflow className='size-[12px] shrink-0 text-[var(--text-icon)]' />
         )}
-        <span className='min-w-0 truncate font-medium text-[11px] text-[var(--text-secondary)]'>
-          {name}
-        </span>
+        <span className='min-w-0 truncate text-[var(--text-secondary)] text-xs'>{name}</span>
         {onRunColumn && (
           <DropdownMenu open={runMenuOpen} onOpenChange={setRunMenuOpen}>
             <DropdownMenuTrigger asChild>