From 94addba09220e03b09cfcd471344fc1f8b4b1a40 Mon Sep 17 00:00:00 2001 From: Waleed Latif Date: Wed, 5 Aug 2026 10:50:37 -0700 Subject: [PATCH 1/4] improvement(emcn): let every primitive inherit the document font weight MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit #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. `` 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). --- .../landing-preview-logs.tsx | 5 +- .../landing-preview-resource.tsx | 5 +- .../landing-preview-tables.tsx | 2 +- .../components/knowledge-hero-loop.tsx | 2 +- .../logs/components/logs-hero-loop.tsx | 2 +- .../tables/components/tables-hero-loop.tsx | 2 +- apps/sim/app/_styles/globals.css | 9 +++ .../new-column-dropdown.tsx | 2 +- .../table-grid/headers/column-header-menu.tsx | 9 +-- .../headers/workflow-group-meta-cell.tsx | 4 +- .../components/table-grid/table-grid.tsx | 3 +- .../sub-block/components/table/table.tsx | 2 +- packages/emcn/src/AGENTS.md | 2 +- .../emcn/src/components/avatar/avatar.tsx | 5 ++ packages/emcn/src/components/badge/badge.tsx | 63 +++++++++---------- .../components/button-group/button-group.tsx | 2 +- .../emcn/src/components/button/button.tsx | 2 +- .../chip-combobox/chip-combobox.tsx | 7 ++- .../src/components/chip-modal/chip-modal.tsx | 5 +- packages/emcn/src/components/code/code.tsx | 6 +- .../collapsible-card/collapsible-card.tsx | 4 +- .../emcn/src/components/combobox/combobox.tsx | 12 ++-- .../dropdown-menu/dropdown-menu.tsx | 6 +- .../src/components/input-otp/input-otp.tsx | 2 +- packages/emcn/src/components/input/input.tsx | 2 +- packages/emcn/src/components/label/label.tsx | 2 +- packages/emcn/src/components/modal/modal.tsx | 4 +- .../emcn/src/components/popover/popover.tsx | 12 +--- .../progress-item/progress-item.tsx | 4 +- .../src/components/tab-strip/tab-strip.tsx | 2 +- packages/emcn/src/components/table/table.tsx | 4 +- .../src/components/tag-input/tag-input.tsx | 8 +-- .../emcn/src/components/textarea/textarea.tsx | 2 +- .../components/time-picker/time-picker.tsx | 10 +-- 34 files changed, 100 insertions(+), 113 deletions(-) diff --git a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-logs/landing-preview-logs.tsx b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-logs/landing-preview-logs.tsx index 06d0d287411..9b35012f1c4 100644 --- a/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-logs/landing-preview-logs.tsx +++ b/apps/sim/app/(landing)/components/landing-preview/components/landing-preview-logs/landing-preview-logs.tsx @@ -236,10 +236,7 @@ export function LandingPreviewLogs() { {COL_HEADERS.map(({ key, label }) => ( - + ) diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx index 8d775e8b8ac..e2834ab3c7d 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/column-header-menu.tsx +++ b/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' /> ) : readOnly ? ( @@ -295,7 +296,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({ blockIconInfo={sourceInfo?.blockIconInfo} blockMissing={blockMissing} /> - + {column.workflowGroupId ? column.headerLabel : column.name} @@ -313,7 +314,7 @@ export const ColumnHeaderMenu = React.memo(function ColumnHeaderMenu({ blockIconInfo={sourceInfo?.blockIconInfo} blockMissing={blockMissing} /> - + {column.workflowGroupId ? column.headerLabel : column.name} diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.tsx index 031a9c8a6f2..23947270b45 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.tsx +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/headers/workflow-group-meta-cell.tsx @@ -438,9 +438,7 @@ export function WorkflowGroupMetaCell({ ) : ( )} - - {name} - + {name} {onRunColumn && ( diff --git a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx index bcca45899c4..c37bf812c6e 100644 --- a/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx +++ b/apps/sim/app/workspace/[workspaceId]/tables/[tableId]/components/table-grid/table-grid.tsx @@ -1687,11 +1687,10 @@ export function TableGrid({ host.appendChild(measure) try { - measure.className = 'font-medium text-small' + measure.className = 'text-small' measure.textContent = column.headerLabel maxWidth = Math.max(maxWidth, measure.getBoundingClientRect().width + 57) - measure.className = 'text-small' for (const row of currentRows) { const val = row.data[column.key] if (val == null) continue diff --git a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx index 339c718591a..23bdc8e11c4 100644 --- a/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx +++ b/apps/sim/app/workspace/[workspaceId]/w/[workflowId]/components/panel/components/editor/components/sub-block/components/table/table.tsx @@ -378,7 +378,7 @@ export function Table({ diff --git a/packages/emcn/src/AGENTS.md b/packages/emcn/src/AGENTS.md index 8f8497c5913..c7bfda44b81 100644 --- a/packages/emcn/src/AGENTS.md +++ b/packages/emcn/src/AGENTS.md @@ -6,6 +6,6 @@ These rules apply to `packages/emcn/**`. - Use Radix UI primitives for accessibility where applicable. - Use CVA when a component has 2+ variants; use direct `className` composition for single-style components. - Export both the component and its variants helper when using CVA. -- Keep tokens consistent with the chip-pill canonical look: normal font-weight, `--text-body` value text, `--text-icon` icons at `size-[14px]`, `rounded-lg`. Components own their exact tokens (e.g. `Button` uses `rounded-[5px]`+`font-medium`). See `.claude/rules/emcn-components.md` for the full chip-chrome reference. +- Keep tokens consistent with the chip-pill canonical look: normal font-weight, `--text-body` value text, `--text-icon` icons at `size-[14px]`, `rounded-lg`. Components own their exact geometry tokens (e.g. `Button` uses `rounded-[5px]`), but never their own font-weight — every primitive inherits the document 400, and a weight class is reached for only to step deliberately up. See `.claude/rules/emcn-components.md` for the full chip-chrome reference. - Prefer `transition-colors` for interactive hover and active states. - Use TSDoc when documenting public components or APIs. diff --git a/packages/emcn/src/components/avatar/avatar.tsx b/packages/emcn/src/components/avatar/avatar.tsx index a511b7cb089..85ebaa522c8 100644 --- a/packages/emcn/src/components/avatar/avatar.tsx +++ b/packages/emcn/src/components/avatar/avatar.tsx @@ -133,6 +133,11 @@ AvatarImage.displayName = 'AvatarImage' /** * Fallback component for Avatar. Displays initials or icon when image is unavailable. + * + * Carries the package's only hardcoded `font-medium`, and deliberately: one or + * two capitals at `text-xs` on a filled disc are a glyph, not running text, and + * need the extra mass to read at avatar sizes. This is the sanctioned "step up + * from body" — every other primitive inherits the document 400. */ const AvatarFallback = React.forwardRef< React.ElementRef, diff --git a/packages/emcn/src/components/badge/badge.tsx b/packages/emcn/src/components/badge/badge.tsx index 7f7cea2c7d4..a7dffc6821b 100644 --- a/packages/emcn/src/components/badge/badge.tsx +++ b/packages/emcn/src/components/badge/badge.tsx @@ -5,41 +5,38 @@ import { cn } from '../../lib/cn' /** Shared base styles for status color badge variants */ const STATUS_BASE = 'gap-1.5 rounded-md' -const badgeVariants = cva( - 'inline-flex items-center font-medium focus:outline-none transition-colors', - { - variants: { - variant: { - default: - 'gap-1 rounded-[40px] border border-[var(--border)] text-[var(--text-secondary)] bg-[var(--surface-4)] hover-hover:text-[var(--text-primary)] hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--surface-5)]', - outline: - 'gap-1 rounded-[40px] border border-[var(--border-1)] bg-transparent text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)] hover-hover:bg-[var(--surface-5)] dark:hover-hover:bg-transparent dark:hover-hover:border-[var(--surface-6)]', - type: 'gap-1 rounded-[40px] border border-[var(--border)] text-[var(--text-secondary)] bg-[var(--surface-4)] dark:bg-[var(--surface-6)]', - green: `${STATUS_BASE} bg-[var(--badge-success-bg)] text-[var(--badge-success-text)]`, - red: `${STATUS_BASE} bg-[var(--badge-error-bg)] text-[var(--badge-error-text)]`, - gray: `${STATUS_BASE} bg-[var(--badge-gray-bg)] text-[var(--badge-gray-text)]`, - blue: `${STATUS_BASE} bg-[var(--badge-blue-bg)] text-[var(--badge-blue-text)]`, - 'blue-secondary': `${STATUS_BASE} bg-[var(--badge-blue-secondary-bg)] text-[var(--badge-blue-secondary-text)]`, - purple: `${STATUS_BASE} bg-[var(--badge-purple-bg)] text-[var(--badge-purple-text)]`, - orange: `${STATUS_BASE} bg-[var(--badge-orange-bg)] text-[var(--badge-orange-text)]`, - amber: `${STATUS_BASE} bg-[var(--badge-amber-bg)] text-[var(--badge-amber-text)]`, - teal: `${STATUS_BASE} bg-[var(--badge-teal-bg)] text-[var(--badge-teal-text)]`, - cyan: `${STATUS_BASE} bg-[var(--badge-cyan-bg)] text-[var(--badge-cyan-text)]`, - pink: `${STATUS_BASE} bg-[var(--badge-pink-bg)] text-[var(--badge-pink-text)]`, - 'gray-secondary': `${STATUS_BASE} bg-[var(--surface-4)] text-[var(--text-secondary)]`, - }, - size: { - sm: 'px-[7px] py-[1px] text-xs', - md: 'px-[9px] py-0.5 text-caption', - lg: 'px-[9px] py-[2.25px] text-caption', - }, +const badgeVariants = cva('inline-flex items-center focus:outline-none transition-colors', { + variants: { + variant: { + default: + 'gap-1 rounded-[40px] border border-[var(--border)] text-[var(--text-secondary)] bg-[var(--surface-4)] hover-hover:text-[var(--text-primary)] hover-hover:border-[var(--border-1)] hover-hover:bg-[var(--surface-6)] dark:hover-hover:bg-[var(--surface-5)]', + outline: + 'gap-1 rounded-[40px] border border-[var(--border-1)] bg-transparent text-[var(--text-secondary)] hover-hover:text-[var(--text-primary)] hover-hover:bg-[var(--surface-5)] dark:hover-hover:bg-transparent dark:hover-hover:border-[var(--surface-6)]', + type: 'gap-1 rounded-[40px] border border-[var(--border)] text-[var(--text-secondary)] bg-[var(--surface-4)] dark:bg-[var(--surface-6)]', + green: `${STATUS_BASE} bg-[var(--badge-success-bg)] text-[var(--badge-success-text)]`, + red: `${STATUS_BASE} bg-[var(--badge-error-bg)] text-[var(--badge-error-text)]`, + gray: `${STATUS_BASE} bg-[var(--badge-gray-bg)] text-[var(--badge-gray-text)]`, + blue: `${STATUS_BASE} bg-[var(--badge-blue-bg)] text-[var(--badge-blue-text)]`, + 'blue-secondary': `${STATUS_BASE} bg-[var(--badge-blue-secondary-bg)] text-[var(--badge-blue-secondary-text)]`, + purple: `${STATUS_BASE} bg-[var(--badge-purple-bg)] text-[var(--badge-purple-text)]`, + orange: `${STATUS_BASE} bg-[var(--badge-orange-bg)] text-[var(--badge-orange-text)]`, + amber: `${STATUS_BASE} bg-[var(--badge-amber-bg)] text-[var(--badge-amber-text)]`, + teal: `${STATUS_BASE} bg-[var(--badge-teal-bg)] text-[var(--badge-teal-text)]`, + cyan: `${STATUS_BASE} bg-[var(--badge-cyan-bg)] text-[var(--badge-cyan-text)]`, + pink: `${STATUS_BASE} bg-[var(--badge-pink-bg)] text-[var(--badge-pink-text)]`, + 'gray-secondary': `${STATUS_BASE} bg-[var(--surface-4)] text-[var(--text-secondary)]`, }, - defaultVariants: { - variant: 'default', - size: 'md', + size: { + sm: 'px-[7px] py-[1px] text-xs', + md: 'px-[9px] py-0.5 text-caption', + lg: 'px-[9px] py-[2.25px] text-caption', }, - } -) + }, + defaultVariants: { + variant: 'default', + size: 'md', + }, +}) /** Color variants that support dot indicators */ const STATUS_VARIANTS = [ diff --git a/packages/emcn/src/components/button-group/button-group.tsx b/packages/emcn/src/components/button-group/button-group.tsx index ca7056669d6..d1ead7aaef9 100644 --- a/packages/emcn/src/components/button-group/button-group.tsx +++ b/packages/emcn/src/components/button-group/button-group.tsx @@ -100,7 +100,7 @@ function ButtonGroup({ } const buttonGroupItemVariants = cva( - 'inline-flex items-center justify-center font-medium transition-colors outline-none focus:outline-none focus-visible:outline-none disabled:pointer-events-none disabled:opacity-70 px-2 py-1 text-caption border', + 'inline-flex items-center justify-center transition-colors outline-none focus:outline-none focus-visible:outline-none disabled:pointer-events-none disabled:opacity-70 px-2 py-1 text-caption border', { variants: { active: { diff --git a/packages/emcn/src/components/button/button.tsx b/packages/emcn/src/components/button/button.tsx index e1916bda1e4..1893a682403 100644 --- a/packages/emcn/src/components/button/button.tsx +++ b/packages/emcn/src/components/button/button.tsx @@ -21,7 +21,7 @@ import { cn } from '../../lib/cn' * @example */ const buttonVariants = cva( - 'inline-flex items-center justify-center font-medium transition-colors disabled:pointer-events-none disabled:opacity-70 outline-none focus:outline-none focus-visible:outline-none rounded-[5px]', + 'inline-flex items-center justify-center transition-colors disabled:pointer-events-none disabled:opacity-70 outline-none focus:outline-none focus-visible:outline-none rounded-[5px]', { variants: { variant: { diff --git a/packages/emcn/src/components/chip-combobox/chip-combobox.tsx b/packages/emcn/src/components/chip-combobox/chip-combobox.tsx index b766225e8ed..9650a9892f7 100644 --- a/packages/emcn/src/components/chip-combobox/chip-combobox.tsx +++ b/packages/emcn/src/components/chip-combobox/chip-combobox.tsx @@ -11,8 +11,9 @@ import { Combobox, type ComboboxProps } from '../combobox/combobox' * Reuses 100% of `Combobox` — search, editable entry, multi-select, groups, * async loading, per-option icons, and `overlayContent` all work unchanged. * Only the trigger chrome is overridden (the `className` merges last in - * `Combobox`, so `rounded-lg` / height / dark surface and the chip typography - * — normal weight, `--text-body` — win over the heavier combobox defaults). + * `Combobox`, so `rounded-lg` / height / dark surface and the chip `--text-body` + * color win over the combobox defaults). Weight is no longer overridden here — + * `Combobox` inherits the document's 400, which is already the chip weight. * The muted placeholder still applies because the combobox tints the inner * label span with `--text-muted` independently of the trigger className. * @@ -27,7 +28,7 @@ export function ChipCombobox({ className, ...props }: ComboboxProps) { diff --git a/packages/emcn/src/components/chip-modal/chip-modal.tsx b/packages/emcn/src/components/chip-modal/chip-modal.tsx index 85418066f65..4dbb0ab3e10 100644 --- a/packages/emcn/src/components/chip-modal/chip-modal.tsx +++ b/packages/emcn/src/components/chip-modal/chip-modal.tsx @@ -623,10 +623,7 @@ function ChipModalField(props: ChipModalFieldProps) { return (
-
diff --git a/packages/emcn/src/components/combobox/combobox.tsx b/packages/emcn/src/components/combobox/combobox.tsx index 16c361c5bf3..7cf58e0187c 100644 --- a/packages/emcn/src/components/combobox/combobox.tsx +++ b/packages/emcn/src/components/combobox/combobox.tsx @@ -21,7 +21,7 @@ import { Input } from '../input/input' import { Popover, PopoverAnchor, PopoverContent, PopoverScrollArea } from '../popover/popover' const comboboxVariants = cva( - 'flex w-full rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 font-sans font-medium text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-none disabled:cursor-not-allowed disabled:opacity-50', + 'flex w-full rounded-sm border border-[var(--border-1)] bg-[var(--surface-5)] px-2 font-sans text-[var(--text-primary)] placeholder:text-[var(--text-muted)] outline-none disabled:cursor-not-allowed disabled:opacity-50', { variants: { variant: { @@ -572,7 +572,7 @@ const Combobox = memo( @@ -797,7 +797,7 @@ const Combobox = memo( !option.disabled && setHighlightedIndex(globalIndex) } className={cn( - 'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-1.5 font-medium font-sans', + 'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-1.5 font-sans', size === 'sm' ? 'py-[5px] text-caption' : 'py-1.5 text-sm', 'hover-hover:bg-[var(--surface-active)]', (isHighlighted || isSelected) && 'bg-[var(--surface-active)]', @@ -837,7 +837,7 @@ const Combobox = memo( }} onMouseEnter={() => setHighlightedIndex(-1)} className={cn( - 'relative flex cursor-pointer select-none items-center rounded-sm px-1.5 font-medium font-sans', + 'relative flex cursor-pointer select-none items-center rounded-sm px-1.5 font-sans', size === 'sm' ? 'py-[5px] text-caption' : 'py-1.5 text-sm', 'hover-hover:bg-[var(--surface-active)]', !multiSelectValues?.length && 'bg-[var(--surface-active)]' @@ -871,7 +871,7 @@ const Combobox = memo( }} onMouseEnter={() => !option.disabled && setHighlightedIndex(index)} className={cn( - 'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-1.5 font-medium font-sans', + 'relative flex cursor-pointer select-none items-center gap-2 rounded-sm px-1.5 font-sans', size === 'sm' ? 'py-[5px] text-caption' : 'py-1.5 text-sm', 'hover-hover:bg-[var(--surface-active)]', (isHighlighted || isSelected) && 'bg-[var(--surface-active)]', diff --git a/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx b/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx index 220c61fb684..c7af01b215b 100644 --- a/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx +++ b/packages/emcn/src/components/dropdown-menu/dropdown-menu.tsx @@ -298,11 +298,7 @@ const DropdownMenuLabel = React.forwardRef< >(({ className, inset, ...props }, ref) => ( )) diff --git a/packages/emcn/src/components/input-otp/input-otp.tsx b/packages/emcn/src/components/input-otp/input-otp.tsx index af5642e0747..a6c5ea82fff 100644 --- a/packages/emcn/src/components/input-otp/input-otp.tsx +++ b/packages/emcn/src/components/input-otp/input-otp.tsx @@ -77,7 +77,7 @@ const InputOTPSlot = React.forwardRef<
diff --git a/packages/emcn/src/components/label/label.tsx b/packages/emcn/src/components/label/label.tsx index a4623bca65a..412f12e8dc7 100644 --- a/packages/emcn/src/components/label/label.tsx +++ b/packages/emcn/src/components/label/label.tsx @@ -25,7 +25,7 @@ function Label({ className, ...props }: LabelProps) { return ( - + {children} @@ -825,7 +825,7 @@ const ModalTabsTrigger = React.forwardRef< ( return (
)} {folderTitle && !onFolderSelect && ( -
+
{folderTitle}
)} @@ -1173,7 +1167,7 @@ const PopoverSearch = React.forwardRef( (function Prog
- - {title} - + {title} {meta != null && ( {meta} )} diff --git a/packages/emcn/src/components/tab-strip/tab-strip.tsx b/packages/emcn/src/components/tab-strip/tab-strip.tsx index d1fb18c7d6e..f6f6e4e90e5 100644 --- a/packages/emcn/src/components/tab-strip/tab-strip.tsx +++ b/packages/emcn/src/components/tab-strip/tab-strip.tsx @@ -180,7 +180,7 @@ function Tab({ aria-current={tab.active ? 'page' : undefined} aria-label={tab.pinned ? tab.title : undefined} className={cn( - 'h-[30px] w-full select-none rounded-b-none border border-transparent border-b-0 bg-transparent py-0 font-normal text-caption', + 'h-[30px] w-full select-none rounded-b-none border border-transparent border-b-0 bg-transparent py-0 text-caption', tab.pinned ? 'justify-center px-0' : 'justify-start gap-1.5 px-2', closeable && !tab.pinned && 'pr-7', tab.active && diff --git a/packages/emcn/src/components/table/table.tsx b/packages/emcn/src/components/table/table.tsx index 498c0067c4f..0ba67ba490f 100644 --- a/packages/emcn/src/components/table/table.tsx +++ b/packages/emcn/src/components/table/table.tsx @@ -54,7 +54,7 @@ const TableFooter = React.forwardRef< tr]:last:border-b-0', + 'border-t bg-[color-mix(in_srgb,var(--surface-3)_50%,transparent)] [&>tr]:last:border-b-0', className )} {...props} @@ -80,7 +80,7 @@ const TableHead = React.forwardRef< [role=checkbox]]:translate-y-[2px]', + 'h-10 px-3 py-2 text-left align-middle text-[var(--text-secondary)] [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]', className )} {...props} diff --git a/packages/emcn/src/components/tag-input/tag-input.tsx b/packages/emcn/src/components/tag-input/tag-input.tsx index 6cee52f3be3..3e5a99eddc9 100644 --- a/packages/emcn/src/components/tag-input/tag-input.tsx +++ b/packages/emcn/src/components/tag-input/tag-input.tsx @@ -180,7 +180,7 @@ const TagInputTag = React.memo(function TagInputTag({ onRightIconClick={disabled ? undefined : handleRemove} rightIconLabel={`Remove ${item.value}`} > - + {item.value} {showError && {item.error}} @@ -423,7 +423,7 @@ const TagInput = React.forwardRef(
{inputValue.trim() && (