fix(landing): normalize typography weights (#7144)

This commit is contained in:
Waleed
2026-08-26 17:54:07 -07:00
committed by GitHub
parent 6bbabbbac6
commit 4e1e291516
33 changed files with 69 additions and 88 deletions
@@ -107,7 +107,7 @@ export function FeatureCard({
<ChipTag variant='mono' className='hidden max-lg:mb-3 max-lg:inline-flex max-lg:self-start'>
{eyebrow}
</ChipTag>
<h3 className='text-balance font-medium text-[22px] text-[var(--text-primary)] leading-[1.3] max-sm:text-[20px]'>
<h3 className='text-balance text-[22px] text-[var(--text-primary)] leading-[1.3] max-sm:text-[20px]'>
{title}
</h3>
<p className='mt-3 text-pretty text-[15px] text-[var(--text-muted)] leading-[1.6]'>
@@ -46,9 +46,7 @@ export function KnowledgeBasePanel({
)}
>
<div className='flex items-center justify-between px-4 pt-3 pb-2.5'>
<span className='font-medium text-[15px] text-[var(--text-primary)]'>
Create Knowledge Base
</span>
<span className='text-[15px] text-[var(--text-primary)]'>Create Knowledge Base</span>
<X className='size-4 text-[var(--text-muted)]' />
</div>
@@ -33,9 +33,7 @@ export function WorkflowBlockContent({ block }: WorkflowBlockContentProps) {
<block.icon className='size-[16px] text-white' />
)}
</div>
<span className='truncate font-medium text-[16px] text-[var(--text-body)]'>
{block.name}
</span>
<span className='truncate text-[16px] text-[var(--text-body)]'>{block.name}</span>
</div>
{block.rows.length > 0 && (
@@ -40,7 +40,7 @@ export function ProductDemo() {
</div>
<h2
id='product-demo-heading'
className='text-balance font-medium text-[22px] text-[var(--text-primary)] leading-[1.3] max-sm:text-[20px]'
className='text-balance text-[22px] text-[var(--text-primary)] leading-[1.3] max-sm:text-[20px]'
>
Describe it. Sim builds it.
</h2>
@@ -77,7 +77,7 @@ export function CodeWindowGraphic({ icon, filename, lines }: CodeWindowGraphicPr
>
{icon}
</span>
<span className='font-medium text-[var(--text-inverse)] text-base'>{filename}</span>
<span className='text-[var(--text-inverse)] text-base'>{filename}</span>
</div>
<div className='space-y-2 p-4 font-mono text-[var(--text-muted-inverse)] text-caption leading-[1.7]'>
@@ -86,10 +86,7 @@ export function SolutionsCard({ card, headingId, tabletSpan = false }: Solutions
wide && 'sm:max-lg:w-[38%] sm:max-lg:shrink-0 sm:max-lg:self-center'
)}
>
<h3
id={headingId}
className={cn('font-medium text-[16px] leading-[1.3]', featureTileTone.title)}
>
<h3 id={headingId} className={cn('text-[16px] leading-[1.3]', featureTileTone.title)}>
{card.title}
</h3>
<p
@@ -153,9 +153,7 @@ export function AccessControlGraphic() {
<span
className={cn(
'text-caption',
index === 0
? 'font-medium text-[var(--text-primary)]'
: 'text-[var(--text-secondary)]'
index === 0 ? 'text-[var(--text-primary)]' : 'text-[var(--text-secondary)]'
)}
>
{team.name}
@@ -69,7 +69,7 @@ const ROW_TONES = [
* window: a frameless, centered vignette (the access tile's composition,
* which sits beside it in the row) where each record is a plain row
* gradient actor avatar, the action label in the row's regular sans face
* (`font-medium text-small`, the same treatment the standards tile gives
* (`text-small`, the same treatment the standards tile gives
* its row titles), an "actor · resource" attribution line, and a
* right-aligned timestamp. The newest record is the selected event: it
* sits on a solid white card wearing the build tile's window chrome
@@ -120,7 +120,7 @@ export function AuditTrailGraphic({ entries = ENTRIES }: AuditTrailGraphicProps
>
<div className='w-full max-w-[312px] sm:max-lg:[@container(min-width:500px)]:max-w-[400px]'>
<div className='mb-4 flex items-center justify-between'>
<span className='font-medium text-[var(--text-primary)] text-base'>Audit log</span>
<span className='text-[var(--text-primary)] text-base'>Audit log</span>
<ChipTag variant='mono' className='bg-[var(--surface-6)]'>
Append-only
</ChipTag>
@@ -159,7 +159,7 @@ export function AuditTrailGraphic({ entries = ENTRIES }: AuditTrailGraphicProps
/>
</span>
<span className='min-w-0 flex-1'>
<span className={cn('block truncate font-medium text-small', tone.action)}>
<span className={cn('block truncate text-small', tone.action)}>
{entry.action}
</span>
<span className='block truncate text-[var(--text-muted)] text-caption'>
@@ -97,7 +97,7 @@ export function DeployGraphic({
className='absolute inset-0 flex flex-col items-center pr-8 max-lg:pr-6'
>
<div className='mt-1 flex items-center gap-1.5 rounded-[12px] bg-[var(--surface-2)] py-1.5 pr-1.5 pl-2.5 shadow-sm'>
<span className='font-medium text-[var(--text-secondary)] text-caption'>{agentName}</span>
<span className='text-[var(--text-secondary)] text-caption'>{agentName}</span>
<ChipTag variant='mono'>{versionTag}</ChipTag>
</div>
@@ -174,7 +174,7 @@ export function DeployGraphic({
</div>
<div className='flex items-center gap-2 px-3 pt-2.5 pb-4'>
<CircleCheck className='size-[14px] shrink-0 text-[var(--text-muted-inverse)]' />
<span className='min-w-0 flex-1 font-medium text-[var(--text-inverse)] text-small'>
<span className='min-w-0 flex-1 text-[var(--text-inverse)] text-small'>
{statusLabel}
</span>
<span className='shrink-0 text-[var(--text-muted-inverse)] text-caption'>
@@ -33,7 +33,7 @@ export function FeaturePlatformPanel({
<span className='flex size-6 items-center justify-center rounded-md bg-[var(--surface-5)]'>
<Icon className='size-[14px] text-[var(--text-icon)]' />
</span>
<span className='font-medium text-[var(--text-primary)] text-base'>{title}</span>
<span className='text-[var(--text-primary)] text-base'>{title}</span>
</div>
{children}
</div>
@@ -90,9 +90,7 @@ export function ItPlatformTeamsGraphic({
>
<div className='w-full max-w-[312px]'>
<div className='mb-3 flex items-center justify-between gap-2'>
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-base'>
{title}
</span>
<span className='min-w-0 truncate text-[var(--text-primary)] text-base'>{title}</span>
<span className='flex shrink-0 items-center gap-1.5'>
<span className='relative size-4 overflow-hidden rounded-full shadow-sm'>
<Image
@@ -111,7 +109,7 @@ export function ItPlatformTeamsGraphic({
<div className='flex items-center gap-3 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-sm'>
<span className='min-w-0 flex-1'>
<span className='block truncate font-medium text-[var(--text-primary)] text-small'>
<span className='block truncate text-[var(--text-primary)] text-small'>
{cardTitle}
</span>
<span className='block truncate text-[var(--text-muted)] text-caption'>
@@ -48,7 +48,7 @@ export function LifecycleGraphic() {
<span className='flex size-6 items-center justify-center rounded-md border border-[var(--border-1)]'>
<Clock className='size-[14px] text-[var(--text-icon)]' />
</span>
<span className='font-medium text-[var(--text-primary)] text-base'>Versions</span>
<span className='text-[var(--text-primary)] text-base'>Versions</span>
</div>
<div className='flex flex-col p-4 [mask-image:linear-gradient(to_bottom,black_45%,transparent_98%)]'>
<div className='flex items-center gap-3'>
@@ -59,7 +59,7 @@ export function LifecycleGraphic() {
</span>
<span className='flex min-w-0 flex-1 items-center gap-2'>
<span className='flex items-center gap-1.5 rounded-[12px] bg-[var(--white)] py-1.5 pr-1.5 pl-2.5 shadow-sm'>
<span className='font-medium text-[var(--text-primary)] text-small'>v3</span>
<span className='text-[var(--text-primary)] text-small'>v3</span>
<ChipTag variant='solid'>Live</ChipTag>
</span>
<span className='truncate text-[var(--text-muted)] text-caption'>
@@ -79,7 +79,7 @@ export function LifecycleGraphic() {
<span className='size-2 rounded-full border border-[var(--text-muted)] bg-[var(--surface-3)]' />
</span>
<span className='flex min-w-0 flex-1 items-center gap-2'>
<span className='font-medium text-[var(--text-secondary)] text-small'>v2</span>
<span className='text-[var(--text-secondary)] text-small'>v2</span>
<ChipTag variant='mono' className='bg-[var(--surface-6)]'>
Saved
</ChipTag>
@@ -141,7 +141,7 @@ function PortTag({ port }: { port: Port }) {
>
<span
className={cn(
'relative flex h-5 items-center overflow-hidden rounded-md border bg-transparent px-1.5 font-medium text-[var(--text-muted-inverse)] text-caption',
'relative flex h-5 items-center overflow-hidden rounded-md border bg-transparent px-1.5 text-[var(--text-muted-inverse)] text-caption',
OUTLINE_INK
)}
>
@@ -48,7 +48,7 @@ export function RollbackGraphic() {
className='absolute top-5 right-0 bottom-0 left-0 rounded-tl-xl border-[var(--border-1)] border-t border-l'
>
<div className='flex h-12 items-center justify-between gap-2 border-[var(--border-1)] border-b px-4 pr-12 max-lg:pr-10'>
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-base'>
<span className='min-w-0 truncate text-[var(--text-primary)] text-base'>
Version history
</span>
<ChipTag variant='mono' className='bg-[var(--surface-6)]'>
@@ -62,7 +62,7 @@ export function RollbackGraphic() {
<span className='size-2 rounded-full border border-[var(--text-muted)] bg-[var(--surface-3)]' />
</span>
<span className='flex min-w-0 flex-1 items-center gap-2'>
<span className='font-medium text-[var(--text-secondary)] text-small'>v4</span>
<span className='text-[var(--text-secondary)] text-small'>v4</span>
<ChipTag variant='mono' className='bg-[var(--surface-6)]'>
Current
</ChipTag>
@@ -88,7 +88,7 @@ export function RollbackGraphic() {
<div className='flex min-w-0 flex-1 items-center gap-3 rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-sm'>
<span className='min-w-0 flex-1'>
<span className='flex items-center gap-2'>
<span className='font-medium text-[var(--text-primary)] text-small'>v3</span>
<span className='text-[var(--text-primary)] text-small'>v3</span>
<ChipTag variant='mono'>Stable</ChipTag>
</span>
<span className='mt-0.5 block truncate text-[var(--text-muted)] text-caption'>
@@ -55,11 +55,7 @@ function fieldValue(field: LogField) {
<span className='font-mono text-[var(--text-secondary)] text-caption'>{field.value}</span>
)
}
return (
<span className='truncate font-medium text-[var(--text-primary)] text-caption'>
{field.value}
</span>
)
return <span className='truncate text-[var(--text-primary)] text-caption'>{field.value}</span>
}
/**
@@ -125,9 +121,7 @@ export function RunMonitoringGraphic({
>
<div className='w-full max-w-[312px] sm:max-lg:[@container(min-width:500px)]:max-w-[400px]'>
<div className='mb-1.5 flex items-center justify-between gap-2'>
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-base'>
{title}
</span>
<span className='min-w-0 truncate text-[var(--text-primary)] text-base'>{title}</span>
<span className='flex shrink-0 items-center gap-1.5'>
<span
className={cn('size-2 rounded-full bg-[var(--text-primary)]', styles.livePulse)}
@@ -98,7 +98,7 @@ export function StagingGraphic({
>
<div className='w-full max-w-[312px] rounded-xl border border-[var(--border-1)]'>
<div className='flex h-10 items-center gap-2 border-[var(--border-1)] border-b px-4'>
<span className='min-w-0 flex-1 truncate font-medium text-[var(--text-primary)] text-base'>
<span className='min-w-0 flex-1 truncate text-[var(--text-primary)] text-base'>
{title}
</span>
<ChipTag variant='mono' className='bg-[var(--surface-6)]'>
@@ -110,7 +110,7 @@ export function StagingGraphic({
<div className='rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-sm'>
<span className='flex items-center gap-2'>
<ChipTag variant='mono'>{changeTag}</ChipTag>
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-small'>
<span className='min-w-0 truncate text-[var(--text-primary)] text-small'>
{changeTitle}
</span>
</span>
@@ -196,7 +196,7 @@ export function StandardsGraphic({
<ChipTag variant='mono'>{rightLabel}</ChipTag>
</span>
<span className='-translate-x-1/2 absolute top-[172px] left-1/2 flex h-5 items-center rounded-md bg-[var(--text-muted)] px-1.5 font-medium text-[var(--text-inverse)] text-caption'>
<span className='-translate-x-1/2 absolute top-[172px] left-1/2 flex h-5 items-center rounded-md bg-[var(--text-muted)] px-1.5 text-[var(--text-inverse)] text-caption'>
{sealLabel}
</span>
</div>
@@ -125,7 +125,7 @@ export function TechnicalTeamsGraphic({
/>
</span>
<span className='min-w-0 flex-1'>
<span className='block truncate font-medium text-[var(--text-primary)] text-small'>
<span className='block truncate text-[var(--text-primary)] text-small'>
{reviewerName}
</span>
<span className='block truncate text-[var(--text-muted)] text-caption'>
@@ -104,7 +104,7 @@ export function FileLibraryGraphic() {
>
<div className='w-full max-w-[312px] sm:max-lg:[@container(min-width:500px)]:max-w-[400px]'>
<div className='mb-4 flex items-center justify-between'>
<span className='font-medium text-[var(--text-primary)] text-base'>Files</span>
<span className='text-[var(--text-primary)] text-base'>Files</span>
<ChipTag variant='mono' className='bg-[var(--surface-6)]'>
Shared
</ChipTag>
@@ -126,7 +126,7 @@ export function FileLibraryGraphic() {
>
<OwnerBadge row={row} />
<span className='min-w-0 flex-1'>
<span className={cn('block truncate font-medium text-small', ROW_TONES[index])}>
<span className={cn('block truncate text-small', ROW_TONES[index])}>
{row.name}
</span>
<span className='block truncate text-[var(--text-muted)] text-caption'>
@@ -143,8 +143,8 @@ const COL_HEADERS = ['Name', 'Size', 'Type', 'Created', 'Owner'] as const
/** Renders the owner cell - an initial badge for teammates, the agent glyph for agents. */
function OwnerCell({ owner }: { owner: FileOwner }) {
return (
<span className='flex min-w-0 items-center gap-3 font-medium text-sm'>
<span className='flex size-[14px] flex-shrink-0 items-center justify-center rounded-full border border-[var(--border)] bg-[var(--surface-3)] font-medium text-[8px] text-[var(--text-secondary)]'>
<span className='flex min-w-0 items-center gap-3 text-sm'>
<span className='flex size-[14px] flex-shrink-0 items-center justify-center rounded-full border border-[var(--border)] bg-[var(--surface-3)] text-[8px] text-[var(--text-secondary)]'>
{owner.agent ? <AgentIcon className='size-[8px]' /> : owner.initial}
</span>
<span className='truncate text-[var(--text-secondary)]'>{owner.name}</span>
@@ -157,16 +157,16 @@ function FileRow({ row }: { row: FileRowData }) {
const Icon = row.icon
return (
<div className={cn(ROW_GRID, 'h-[40px] items-center')}>
<span className='flex min-w-0 items-center gap-3 px-6 font-medium text-[var(--text-body)] text-sm'>
<span className='flex min-w-0 items-center gap-3 px-6 text-[var(--text-body)] text-sm'>
<Icon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
<span className='truncate'>{row.name}</span>
</span>
<span className='px-6 font-medium text-[var(--text-secondary)] text-sm'>{row.size}</span>
<span className='flex items-center gap-3 px-6 font-medium text-[var(--text-secondary)] text-sm'>
<span className='px-6 text-[var(--text-secondary)] text-sm'>{row.size}</span>
<span className='flex items-center gap-3 px-6 text-[var(--text-secondary)] text-sm'>
<Icon className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
{row.type}
</span>
<span className='px-6 font-medium text-[var(--text-secondary)] text-sm'>{row.created}</span>
<span className='px-6 text-[var(--text-secondary)] text-sm'>{row.created}</span>
<span className='px-6'>
<OwnerCell owner={row.owner} />
</span>
@@ -246,7 +246,7 @@ export function FilesHeroLoop() {
<div className='flex h-[44px] flex-shrink-0 items-center justify-between border-[var(--border)] border-b px-6'>
<div className='flex items-center gap-3'>
<File className='size-[14px] text-[var(--text-icon)]' />
<span className='font-medium text-[var(--text-body)] text-sm'>Files</span>
<span className='text-[var(--text-body)] text-sm'>Files</span>
</div>
<span className='flex items-center rounded-md px-2 py-1 text-[var(--text-secondary)] text-caption'>
<Plus className='mr-1.5 size-[14px] text-[var(--text-icon)]' />
@@ -79,7 +79,7 @@ export function ConnectorSyncGraphic() {
>
<div className='w-full max-w-[312px] sm:max-lg:[@container(min-width:500px)]:max-w-[400px]'>
<div className='mb-4 flex items-center justify-between'>
<span className='font-medium text-[var(--text-primary)] text-base'>Connectors</span>
<span className='text-[var(--text-primary)] text-base'>Connectors</span>
<ChipTag variant='mono' className='bg-[var(--surface-6)]'>
Auto-sync
</ChipTag>
@@ -103,7 +103,7 @@ export function ConnectorSyncGraphic() {
<row.icon className='size-[14px]' />
</span>
<span className='min-w-0 flex-1'>
<span className='block truncate font-medium text-[var(--text-primary)] text-small'>
<span className='block truncate text-[var(--text-primary)] text-small'>
{row.name}
</span>
<span className='block truncate text-[var(--text-muted)] text-caption'>
@@ -173,7 +173,7 @@ export function KnowledgeHeroLoop() {
<div className='flex h-[44px] flex-shrink-0 items-center justify-between border-[var(--border)] border-b px-6'>
<div className='flex items-center gap-3'>
<Database className='size-[14px] text-[var(--text-icon)]' />
<span className='font-medium text-[var(--text-body)] text-sm'>Knowledge Base</span>
<span className='text-[var(--text-body)] text-sm'>Knowledge Base</span>
</div>
<div className='flex items-center rounded-md px-2 py-1 text-[var(--text-secondary)] text-caption'>
<Plus className='mr-1.5 size-[14px] text-[var(--text-icon)]' />
@@ -236,15 +236,15 @@ export function KnowledgeHeroLoop() {
)}
>
<td className='px-6 py-2.5 align-middle'>
<span className='flex min-w-0 items-center gap-3 font-medium text-[var(--text-body)] text-sm'>
<span className='flex min-w-0 items-center gap-3 text-[var(--text-body)] text-sm'>
<Database className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
<span className='truncate'>{row.name}</span>
</span>
</td>
<td className='px-6 py-2.5 align-middle font-medium text-[var(--text-secondary)] text-sm'>
<td className='px-6 py-2.5 align-middle text-[var(--text-secondary)] text-sm'>
{synced && row.documentsSynced ? row.documentsSynced : row.documents}
</td>
<td className='px-6 py-2.5 align-middle font-medium text-[var(--text-secondary)] text-sm'>
<td className='px-6 py-2.5 align-middle text-[var(--text-secondary)] text-sm'>
{synced && row.tokensSynced ? row.tokensSynced : row.tokens}
</td>
<td className='px-6 py-2.5 align-middle'>
@@ -265,7 +265,7 @@ export function KnowledgeHeroLoop() {
)}
</span>
</td>
<td className='px-6 py-2.5 align-middle font-medium text-[var(--text-secondary)] text-sm'>
<td className='px-6 py-2.5 align-middle text-[var(--text-secondary)] text-sm'>
{row.created}
</td>
</tr>
@@ -38,12 +38,10 @@ export function FailureAlertGraphic() {
styles.runRow
)}
>
<span className='font-medium text-[var(--text-inverse)] text-caption'>
Nightly data sync
</span>
<span className='text-[var(--text-inverse)] text-caption'>Nightly data sync</span>
<span
className={cn(
'flex h-5 items-center rounded-md border px-1.5 font-medium text-[var(--text-muted-inverse)] text-caption',
'flex h-5 items-center rounded-md border px-1.5 text-[var(--text-muted-inverse)] text-caption',
OUTLINE_INK
)}
>
@@ -77,13 +75,13 @@ export function FailureAlertGraphic() {
>
<SlackIcon className='size-[12px]' />
</span>
<span className='min-w-0 flex-1 truncate font-medium text-[var(--text-inverse)] text-small'>
<span className='min-w-0 flex-1 truncate text-[var(--text-inverse)] text-small'>
#oncall
</span>
<span className='shrink-0 text-[var(--text-muted-inverse)] text-caption'>Now</span>
</div>
<div className='px-3 pt-2.5 pb-4'>
<span className='block font-medium text-[var(--text-inverse)] text-small'>
<span className='block text-[var(--text-inverse)] text-small'>
Run failed: Nightly data sync
</span>
<span className='mt-1 block text-[var(--text-muted-inverse)] text-caption'>
@@ -55,7 +55,7 @@ export function FilterRunsGraphic() {
>
<div className='w-full max-w-[312px] sm:max-lg:[@container(min-width:500px)]:max-w-[400px]'>
<div className='mb-2.5 flex items-center justify-between'>
<span className='font-medium text-[var(--text-primary)] text-base'>Search runs</span>
<span className='text-[var(--text-primary)] text-base'>Search runs</span>
<ChipTag variant='mono' className='bg-[var(--surface-6)]'>
3 matches
</ChipTag>
@@ -87,7 +87,7 @@ export function FilterRunsGraphic() {
ROW_STEP_CLASSES[index]
)}
>
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-caption'>
<span className='min-w-0 truncate text-[var(--text-primary)] text-caption'>
{run.workflow}
</span>
<span className='flex shrink-0 items-center gap-2.5'>
@@ -108,7 +108,7 @@ export function RunTraceGraphic() {
>
<Library className='size-[14px] text-[var(--text-muted-inverse)]' />
</span>
<span className='min-w-0 flex-1 truncate font-medium text-[var(--text-inverse)] text-base'>
<span className='min-w-0 flex-1 truncate text-[var(--text-inverse)] text-base'>
Support ticket routing
</span>
<span className='shrink-0 font-mono text-[var(--text-muted-inverse)] text-caption'>
@@ -124,7 +124,7 @@ export function RunTraceGraphic() {
>
<span
className={cn(
'w-[38%] shrink-0 truncate font-medium text-caption',
'w-[38%] shrink-0 truncate text-caption',
NAME_TONE_CLASS[span.barTone],
span.indentClass
)}
@@ -197,7 +197,7 @@ function LogsTableRow({ row, visible }: LogsTableRowProps) {
<td className='px-6 align-middle'>
<div className='flex items-center gap-2'>
<Workflow className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-caption'>
<span className='min-w-0 truncate text-[var(--text-primary)] text-caption'>
{row.workflowName}
</span>
</div>
@@ -287,7 +287,7 @@ export function LogsHeroLoop() {
<div className='flex w-full items-center justify-between'>
<div className='flex items-center gap-3'>
<Library className='size-[14px] text-[var(--text-icon)]' />
<span className='font-medium text-[var(--text-body)] text-sm'>Logs</span>
<span className='text-[var(--text-body)] text-sm'>Logs</span>
</div>
<div className='flex items-center gap-1'>
<span className='flex items-center rounded-md px-2 py-1 text-[var(--text-secondary)] text-caption'>
@@ -352,7 +352,7 @@ export function LogsHeroLoop() {
<td className='px-6 align-middle'>
<div className='flex items-center gap-2'>
<Workflow className='size-[14px] flex-shrink-0 text-[var(--text-icon)]' />
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-caption'>
<span className='min-w-0 truncate text-[var(--text-primary)] text-caption'>
{LIVE_ROW.workflowName}
</span>
</div>
@@ -69,7 +69,7 @@ export function DocumentDraftGraphic({
<span className='flex size-6 shrink-0 items-center justify-center rounded-md border border-[var(--border-1)]'>
<File className='size-[14px] text-[var(--text-icon)]' />
</span>
<span className='min-w-0 flex-1 truncate font-medium text-[var(--text-primary)] text-base'>
<span className='min-w-0 flex-1 truncate text-[var(--text-primary)] text-base'>
{title}
</span>
<ChipTag
@@ -94,7 +94,7 @@ export function DocumentDraftGraphic({
<div className='mt-2 flex items-center gap-2 rounded-xl border border-[var(--border-1)] bg-[var(--white)] px-3 py-2.5 shadow-sm'>
<CircleCheck className='size-[13px] shrink-0 text-[var(--text-icon)]' />
<span className='min-w-0 flex-1 truncate font-medium text-[var(--text-primary)] text-small'>
<span className='min-w-0 flex-1 truncate text-[var(--text-primary)] text-small'>
{footerLabel}
</span>
<span className='shrink-0 text-[var(--text-muted)] text-caption'>{footerDetail}</span>
@@ -90,7 +90,7 @@ export function KnowledgeAnswerGraphic({
<BookOpen className='size-[14px] text-[var(--text-icon)]' />
</span>
<span className='min-w-0 flex-1'>
<span className='block truncate font-medium text-[var(--text-primary)] text-small'>
<span className='block truncate text-[var(--text-primary)] text-small'>
{sourceLabel}
</span>
<span className='block truncate text-[var(--text-muted)] text-caption'>
@@ -56,7 +56,7 @@ export function ReconcileGraphic() {
>
<div className='w-full max-w-[312px]'>
<div className='mb-1.5 flex items-center justify-between gap-2'>
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-base'>
<span className='min-w-0 truncate text-[var(--text-primary)] text-base'>
Reconciliation
</span>
<ChipTag variant='mono' className='shrink-0 bg-[var(--surface-6)]'>
@@ -91,7 +91,7 @@ export function ReconcileGraphic() {
>
<span className='min-w-0 flex-1'>
<span className='flex items-center gap-2'>
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-small'>
<span className='min-w-0 truncate text-[var(--text-primary)] text-small'>
Wire transfer
</span>
<span className='shrink-0 font-mono text-[var(--text-secondary)] text-caption'>
@@ -57,7 +57,7 @@ export function EnrichmentFillGraphic() {
>
<div className='w-full max-w-[312px] sm:max-lg:[@container(min-width:500px)]:max-w-[400px]'>
<div className='mb-1 flex items-center justify-between gap-2'>
<span className='min-w-0 truncate font-medium text-[var(--text-primary)] text-base'>
<span className='min-w-0 truncate text-[var(--text-primary)] text-base'>
Enrichments
</span>
<ChipTag variant='mono' className='bg-[var(--surface-6)]'>
@@ -81,7 +81,7 @@ export function EnrichmentFillGraphic() {
'truncate',
row.variant === 'mono'
? 'font-mono text-[var(--text-secondary)] text-caption'
: 'font-medium text-[var(--text-primary)] text-caption',
: 'text-[var(--text-primary)] text-caption',
VALUE_STEP_CLASSES[index]
)}
>
@@ -68,7 +68,7 @@ export function TableGridGraphic() {
<span className='flex size-6 items-center justify-center rounded-md border border-[var(--border-1)]'>
<Table className='size-[14px] text-[var(--text-icon)]' />
</span>
<span className='font-medium text-[var(--text-primary)] text-base'>Leads</span>
<span className='text-[var(--text-primary)] text-base'>Leads</span>
</div>
<div className='flex border-[var(--border-1)] border-b'>
@@ -83,7 +83,7 @@ export function TableGridGraphic() {
)}
>
<Icon className='size-3 shrink-0 text-[var(--text-icon)]' />
<span className='truncate font-medium text-[var(--text-primary)] text-caption'>
<span className='truncate text-[var(--text-primary)] text-caption'>
{column.label}
</span>
</div>
@@ -287,12 +287,12 @@ function TablesGridPane({ rowCount, filledCount }: TablesGridPaneProps) {
<div className='flex h-full flex-col overflow-hidden bg-[var(--bg)]'>
<div className='border-[var(--border)] border-b px-4 py-[8.5px]'>
<div className='flex items-center gap-3'>
<span className='inline-flex items-center px-2 py-1 font-medium text-[var(--text-secondary)] text-sm'>
<span className='inline-flex items-center px-2 py-1 text-[var(--text-secondary)] text-sm'>
<Table className='mr-3 size-[14px] text-[var(--text-icon)]' />
Tables
</span>
<span className='select-none text-[var(--text-icon)] text-sm'>/</span>
<span className='inline-flex items-center px-2 py-1 font-medium text-[var(--text-body)] text-sm'>
<span className='inline-flex items-center px-2 py-1 text-[var(--text-body)] text-sm'>
Leads
<ChevronDown className='ml-2 size-[14px] shrink-0 text-[var(--text-muted)]' />
</span>
@@ -87,7 +87,7 @@ export function WorkflowCanvasGraphic() {
<div className='-translate-x-1/2 absolute top-[14px] left-[160px] flex items-center gap-2 rounded-lg border border-[var(--border-1)] bg-[var(--white)] px-2.5 py-1.5 shadow-sm'>
<span className='size-2 shrink-0 rounded-full border border-[var(--text-muted)] bg-[var(--surface-3)]' />
<span className='whitespace-nowrap font-medium text-[var(--text-secondary)] text-caption'>
<span className='whitespace-nowrap text-[var(--text-secondary)] text-caption'>
New ticket
</span>
</div>
@@ -99,7 +99,7 @@ export function WorkflowCanvasGraphic() {
styles.agentPulse
)}
/>
<span className='whitespace-nowrap font-medium text-[var(--text-primary)] text-small'>
<span className='whitespace-nowrap text-[var(--text-primary)] text-small'>
Support agent
</span>
<ChipTag variant='solid'>Agent</ChipTag>
@@ -114,7 +114,7 @@ export function WorkflowCanvasGraphic() {
)}
>
<span className='size-2 shrink-0 rounded-full border border-[var(--text-muted)] bg-[var(--surface-3)]' />
<span className='whitespace-nowrap font-medium text-[var(--text-secondary)] text-caption'>
<span className='whitespace-nowrap text-[var(--text-secondary)] text-caption'>
{block.label}
</span>
</div>