@startsimpli/ui 0.4.67 → 0.4.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.67",
+  "version": "0.4.68",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -42,8 +42,8 @@
     "next": "^14.0.0 || ^15.0.0 || ^16.0.0",
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
-    "@startsimpli/auth": "0.4.30",
-    "@startsimpli/api": "0.5.44"
+    "@startsimpli/api": "0.5.44",
+    "@startsimpli/auth": "0.4.31"
   },
   "peerDependenciesMeta": {
     "@startsimpli/api": {

package/src/__tests__/theme-contract.test.ts

@@ -0,0 +1,57 @@
+/**
+ * Package-wide theme-contract guard (startsim-1f3n.3).
+ *
+ * A shared component may only use colors that packages/ui/theme/contract.css
+ * guarantees — the SEMANTIC tokens (`primary`, `card`, `border`, `ring`, …).
+ * The numeric Tailwind ramp (`bg-primary-600`, `text-primary-700`, …) is NOT
+ * part of the contract, and Tailwind v4 emits no rule at all for a color it
+ * has no `--color-*` entry for. That is how the Foundry control plane ended up
+ * with an invisible "Invite member" button and a blank active-nav pill: the app
+ * declares `--color-primary` and never declared the ramp.
+ *
+ * Requiring every app to also declare a ramp is the wrong fix — it makes N apps
+ * responsible for a promise this package should not have made. So the ramp is
+ * banned here instead, and this test keeps it out.
+ *
+ * Need a lighter/darker brand shade? Use an opacity modifier on the token:
+ *   bg-primary-50  -> bg-primary/10        text-primary-700 -> text-primary
+ *   hover:bg-primary-700 -> hover:bg-primary/90
+ */
+
+import * as fs from 'fs'
+import * as path from 'path'
+
+const SRC = path.resolve(__dirname, '..')
+
+/** `bg-primary-600`, `hover:text-primary-700`, `focus:ring-primary-500`, … */
+const PRIMARY_RAMP = /\b[a-z-]*-primary-\d{2,3}\b/
+
+function sourceFiles(dir: string, acc: string[] = []): string[] {
+  for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+    const full = path.join(dir, entry.name)
+    if (entry.isDirectory()) {
+      if (entry.name === '__tests__' || entry.name === 'node_modules') continue
+      sourceFiles(full, acc)
+    } else if (/\.tsx?$/.test(entry.name)) {
+      acc.push(full)
+    }
+  }
+  return acc
+}
+
+describe('packages/ui only uses colors the theme contract guarantees', () => {
+  it('no component styles against the numeric primary ramp', () => {
+    const offenders: string[] = []
+    for (const file of sourceFiles(SRC)) {
+      fs.readFileSync(file, 'utf8')
+        .split('\n')
+        .forEach((line, i) => {
+          // Prose in a doc comment may legitimately name the banned class.
+          const code = line.replace(/^\s*(\*|\/\/).*$/, '')
+          const hit = code.match(PRIMARY_RAMP)
+          if (hit) offenders.push(`${path.relative(SRC, file)}:${i + 1} ${hit[0]}`)
+        })
+    }
+    expect(offenders).toEqual([])
+  })
+})

package/src/components/ActivityTimeline.tsx

@@ -162,7 +162,7 @@ export function ActivityTimeline({
         <div className="text-center pt-4">
           <button
             onClick={onLoadMore}
-            className="px-4 py-2 text-sm text-primary-600 hover:text-primary-700 hover:bg-primary-50 rounded-md transition-colors"
+            className="px-4 py-2 text-sm text-primary hover:text-primary/80 hover:bg-primary/10 rounded-md transition-colors"
           >
             Load more activities
           </button>

package/src/components/LogActivityDialog.tsx

@@ -148,7 +148,7 @@ export function LogActivityDialog({
                   onClick={() => setActivityType(value)}
                   className={`flex items-center justify-center gap-2 px-4 py-3 text-sm font-medium rounded-lg border-2 transition-colors ${
                     activityType === value
-                      ? 'border-primary-600 bg-primary-50 text-primary-700'
+                      ? 'border-primary bg-primary/10 text-primary'
                       : 'border-gray-200 bg-white text-gray-700 hover:bg-gray-50'
                   }`}
                 >
@@ -258,13 +258,13 @@ export function LogActivityDialog({
 
           {/* Follow-up Task */}
           {showFollowUp && (
-            <div className="bg-primary-50 border border-primary-200 rounded-lg p-4">
+            <div className="bg-primary/10 border border-primary/30 rounded-lg p-4">
               <label className="flex items-center gap-2 cursor-pointer">
                 <input
                   type="checkbox"
                   checked={createFollowUp}
                   onChange={(e) => setCreateFollowUp(e.target.checked)}
-                  className="w-4 h-4 text-primary-600 border-gray-300 rounded focus:ring-primary-500"
+                  className="w-4 h-4 text-primary border-gray-300 rounded focus:ring-ring"
                 />
                 <span className="text-sm font-medium text-blue-900">
                   Create follow-up task
@@ -291,7 +291,7 @@ export function LogActivityDialog({
             <button
               type="submit"
               disabled={isSubmitting}
-              className="px-4 py-2 text-sm font-medium text-white bg-primary-600 rounded-md hover:bg-primary-700 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
+              className="px-4 py-2 text-sm font-medium text-primary-foreground bg-primary rounded-md hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors"
             >
               {isSubmitting ? submittingLabel : submitLabel}
             </button>

package/src/components/collection/ReviewDrawer.tsx

@@ -285,7 +285,7 @@ function ReviewDrawerInner({
 
               <div className="mt-2 flex flex-wrap items-center gap-1.5 text-xs">
                 {rank ? (
-                  <span className="rounded-full bg-primary-50 px-2 py-0.5 font-semibold text-primary-700">
+                  <span className="rounded-full bg-primary/10 px-2 py-0.5 font-semibold text-primary">
                     rank {rank}
                   </span>
                 ) : null}
@@ -327,7 +327,7 @@ function ReviewDrawerInner({
                   onClick={() => setNoteOpen((o) => !o)}
                   className={cn(
                     'inline-flex items-center gap-1 rounded-md border border-border px-2.5 py-1 text-xs hover:bg-muted',
-                    note && 'text-primary-700',
+                    note && 'text-primary',
                   )}
                 >
                   <MessageSquarePlus className="h-3.5 w-3.5" />

package/src/components/collection/TopicReviewWorkspace.tsx

@@ -213,7 +213,7 @@ function TopicRow({
     <li className={`rounded-lg border border-border bg-card p-4 ${muted ? 'opacity-70' : ''}`}>
       <div className="flex items-start gap-3">
         {rank != null && (
-          <span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary-50 text-xs font-semibold text-primary-700">
+          <span className="mt-0.5 flex h-7 w-7 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary">
             {rank}
           </span>
         )}

package/src/components/dashboard/MetricCard.tsx

@@ -85,7 +85,7 @@ export function MetricCard({
     return (
       <a
         href={href}
-        className="block focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded-lg"
+        className="block focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded-lg"
         aria-label={`View ${label} details`}
       >
         {content}

package/src/components/dashboard/PeriodSelector.tsx

@@ -42,7 +42,7 @@ export function PeriodSelector({
           className={cn(
             'px-3 py-1.5 rounded-md text-sm font-medium transition-colors',
             selected === value
-              ? 'bg-primary-100 text-primary-700'
+              ? 'bg-primary/15 text-primary'
               : 'text-gray-600 hover:bg-gray-100',
           )}
           aria-pressed={selected === value}

package/src/components/dashboard/PipelineFunnel.tsx

@@ -44,10 +44,10 @@ export function PipelineFunnel({
             : 0;
 
           const defaultColors = [
-            'from-accent-400 to-accent-500',
-            'from-primary-400 to-primary-500',
-            'from-primary-500 to-primary-600',
-            'from-primary-600 to-primary-700',
+            'from-accent/70 to-accent',
+            'from-primary/50 to-primary/70',
+            'from-primary/70 to-primary/90',
+            'from-primary/90 to-primary',
           ];
 
           const gradientColor = stage.color || defaultColors[index % defaultColors.length];
@@ -84,7 +84,7 @@ export function PipelineFunnel({
                     absolute inset-y-0 left-0 bg-gradient-to-r ${gradientColor}
                     transition-all duration-300 group-hover:opacity-90
                     ${onStageClick ? 'cursor-pointer' : 'cursor-default'}
-                    focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2
+                    focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2
                   `}
                   style={{ width: `${percentage}%` }}
                   aria-label={`${stage.stage}: ${stage.count} prospects, ${stagePercentage}% of total`}

package/src/components/dashboard/TopCampaigns.tsx

@@ -43,7 +43,7 @@ export function TopCampaigns({
         {onViewAll && campaigns.length > maxItems && (
           <button
             onClick={onViewAll}
-            className="text-sm text-primary-600 hover:text-primary-700 font-medium flex items-center gap-1 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 rounded"
+            className="text-sm text-primary hover:text-primary/80 font-medium flex items-center gap-1 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 rounded"
           >
             View all
             <ArrowRight className="w-4 h-4" />
@@ -55,7 +55,7 @@ export function TopCampaigns({
         {displayCampaigns.map((campaign, index) => {
           const getProgressColor = (rate: number) => {
             if (rate >= 75) return 'bg-success-500';
-            if (rate >= 50) return 'bg-primary-500';
+            if (rate >= 50) return 'bg-primary';
             if (rate >= 25) return 'bg-warning-500';
             return 'bg-gray-400';
           };
@@ -72,21 +72,21 @@ export function TopCampaigns({
                 <div className="flex items-start gap-2 min-w-0 flex-1">
                   <span className={`
                     flex-shrink-0 flex items-center justify-center w-6 h-6 rounded-full text-xs font-bold
-                    ${index === 0 ? 'bg-accent-100 text-accent-700 border border-accent-200' : 'bg-gray-100 text-gray-600'}
+                    ${index === 0 ? 'bg-accent/15 text-accent border border-accent/30' : 'bg-gray-100 text-gray-600'}
                   `}>
                     {index + 1}
                   </span>
 
                   <div className="min-w-0 flex-1">
-                    <h3 className="text-sm font-medium text-gray-900 truncate group-hover:text-primary-600 transition-colors">
+                    <h3 className="text-sm font-medium text-gray-900 truncate group-hover:text-primary transition-colors">
                       {campaign.name}
                     </h3>
                     {campaign.status && (
                       <span className={`
                         inline-block text-xs px-2 py-0.5 rounded-full mt-1 border
-                        ${campaign.status === 'active' ? 'bg-primary-50 text-primary-700 border-primary-200' : ''}
+                        ${campaign.status === 'active' ? 'bg-primary/10 text-primary border-primary/30' : ''}
                         ${campaign.status === 'paused' ? 'bg-warning-50 text-warning-700 border-warning-200' : ''}
-                        ${campaign.status === 'completed' ? 'bg-accent-50 text-accent-700 border-accent-200' : ''}
+                        ${campaign.status === 'completed' ? 'bg-accent/10 text-accent border-accent/30' : ''}
                       `}>
                         {campaign.status}
                       </span>

package/src/components/dashboard/__tests__/dashboard.test.tsx

@@ -320,8 +320,8 @@ describe('PeriodSelector', () => {
     render(<PeriodSelector selected="week" onChange={onChange} />)
     const weekBtn = screen.getByText('Week')
     const monthBtn = screen.getByText('Month')
-    expect(weekBtn).toHaveClass('bg-primary-100')
-    expect(monthBtn).not.toHaveClass('bg-primary-100')
+    expect(weekBtn).toHaveClass('bg-primary/15')
+    expect(monthBtn).not.toHaveClass('bg-primary/15')
   })
 })
 
@@ -613,7 +613,7 @@ describe('TopCampaigns', () => {
         <TopCampaigns campaigns={[{ id: '1', name: 'Mid', engagementRate: 60 }]} />
       )
       const bar = container.querySelector('[role="progressbar"]')
-      expect(bar).toHaveClass('bg-primary-500')
+      expect(bar).toHaveClass('bg-primary')
     })
 
     it('applies warning color for engagement >= 25 and < 50', () => {

package/src/components/enrichment/ApolloEnrichButton.tsx

@@ -110,7 +110,7 @@ export function ApolloEnrichButton({
         onClick={handleClick}
         disabled={buttonDisabled}
         aria-label={label}
-        className={`flex items-center gap-1.5 font-medium text-primary-700 bg-primary-50 hover:bg-primary-100 rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors ${sizeClasses} ${className}`}
+        className={`flex items-center gap-1.5 font-medium text-primary bg-primary/10 hover:bg-primary/20 rounded-md disabled:opacity-50 disabled:cursor-not-allowed transition-colors ${sizeClasses} ${className}`}
       >
         <Sparkles className={iconClasses} />
         {isRunning ? 'Enriching…' : label}

package/src/components/enrichment/EnrichButton.tsx

@@ -24,7 +24,7 @@ export function EnrichButton({
     <button
       onClick={onClick}
       disabled={isLoading}
-      className={`flex items-center gap-1.5 font-medium text-primary-700 bg-primary-50 hover:bg-primary-100 rounded-md disabled:opacity-50 transition-colors ${sizeClasses} ${className}`}
+      className={`flex items-center gap-1.5 font-medium text-primary bg-primary/10 hover:bg-primary/20 rounded-md disabled:opacity-50 transition-colors ${sizeClasses} ${className}`}
     >
       <Zap className={size === 'sm' ? 'w-3 h-3' : 'w-4 h-4'} />
       {isLoading ? 'Enriching...' : label}

package/src/components/health/AttentionFeed.tsx

@@ -78,7 +78,7 @@ export function AttentionFeed({
                 <a
                   href={item.href}
                   className={cn(
-                    'block rounded px-1 -mx-1 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500',
+                    'block rounded px-1 -mx-1 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-ring',
                   )}
                 >
                   {body}

package/src/components/health/PipelineHealth.tsx

@@ -77,7 +77,7 @@ export function PipelineHealth({
               onClick={() => onStageClick?.(stage.label)}
               className={cn(
                 'w-full text-left group focus:outline-none',
-                clickable && 'cursor-pointer focus:ring-2 focus:ring-primary-500 rounded',
+                clickable && 'cursor-pointer focus:ring-2 focus:ring-ring rounded',
               )}
             >
               <div className="flex items-center justify-between mb-1">

package/src/components/presentations/DeckBuilderWorkspace.tsx

@@ -141,13 +141,13 @@ export function DeckBuilderWorkspace({ backHref, builder }: DeckBuilderWorkspace
       title={styleTitle || 'Deck style'}
     >
       {deckStyle.source === 'reference' ? (
-        <Sparkles className="h-3.5 w-3.5 shrink-0 text-primary-600" aria-hidden="true" />
+        <Sparkles className="h-3.5 w-3.5 shrink-0 text-primary" aria-hidden="true" />
       ) : (
         <Palette className="h-3.5 w-3.5 shrink-0 text-gray-400" aria-hidden="true" />
       )}
       <span className="truncate font-medium capitalize">{styleLabel || 'Custom style'}</span>
       {deckStyle.source === 'reference' && (
-        <span className="shrink-0 text-primary-600">· cloned</span>
+        <span className="shrink-0 text-primary">· cloned</span>
       )}
     </div>
   )
@@ -164,7 +164,7 @@ export function DeckBuilderWorkspace({ backHref, builder }: DeckBuilderWorkspace
             <ArrowLeft className="h-4 w-4" />
           </Link>
         )}
-        <Presentation className="h-5 w-5 text-primary-600" aria-hidden="true" />
+        <Presentation className="h-5 w-5 text-primary" aria-hidden="true" />
         <div className="leading-tight">
           <div className="text-sm font-semibold text-gray-900">{deckTitle || 'New presentation'}</div>
           <div className="text-xs text-gray-400">

package/src/components/team/MembersTable.tsx

@@ -37,6 +37,12 @@ export interface MembersTableProps {
   classNames?: MembersTableClassNames
   /** Restrict role-selector options (e.g. hide 'owner' when caller isn't owner). */
   availableRoles?: TeamRole[]
+  /**
+   * The signed-in user's id. When it matches a row, that row is badged "You" —
+   * otherwise the owner is an anonymous line sitting next to a live Remove
+   * button with nothing marking it as themselves.
+   */
+  currentUserId?: string
 }
 
 const ROLE_LABEL: Record<TeamRole, string> = {
@@ -54,8 +60,13 @@ export function MembersTable({
   emptyState,
   classNames,
   availableRoles,
+  currentUserId,
 }: MembersTableProps) {
   const cls = { ...MEMBERS_TABLE_DEFAULTS, ...(classNames ?? {}) }
+  // Role + actions hug their content so the Member column takes the slack —
+  // one shared cell class used to split the table down the middle and leave
+  // the controls floating in a gap.
+  const tight = (base: string, extra: string) => `${base} ${extra}`.trim()
 
   return (
     <div className={cls.root}>
@@ -63,9 +74,9 @@ export function MembersTable({
         <thead className={cls.thead}>
           <tr className={cls.headerRow}>
             <th className={cls.th} scope="col">Member</th>
-            <th className={cls.th} scope="col">Role</th>
+            <th className={tight(cls.th, cls.tightColumn)} scope="col">Role</th>
             {canManage && (
-              <th className={cls.th} scope="col" aria-label="Actions" />
+              <th className={tight(cls.th, cls.tightColumn)} scope="col" aria-label="Actions" />
             )}
           </tr>
         </thead>
@@ -82,6 +93,7 @@ export function MembersTable({
             // Members with no name fall back to their email, so printing the
             // email underneath stacked the same string on itself.
             const secondary = m.user?.email && m.user.email !== displayName ? m.user.email : null
+            const isSelf = !!currentUserId && m.userId === currentUserId
             return (
             <tr key={m.id} className={cls.row}>
               <td className={cls.cell}>
@@ -99,12 +111,15 @@ export function MembersTable({
                     </span>
                   )}
                   <div className="flex min-w-0 flex-col">
-                    <span className={cls.name}>{displayName}</span>
+                    <span className="flex items-center gap-2">
+                      <span className={cls.name}>{displayName}</span>
+                      {isSelf && <span className={cls.selfBadge}>You</span>}
+                    </span>
                     {secondary && <span className={cls.email}>{secondary}</span>}
                   </div>
                 </div>
               </td>
-              <td className={cls.cell}>
+              <td className={tight(cls.cell, cls.tightColumn)}>
                 {canManage && onChangeRole ? (
                   <RoleSelector
                     value={m.role}
@@ -116,7 +131,7 @@ export function MembersTable({
                 )}
               </td>
               {canManage && (
-                <td className={cls.cell}>
+                <td className={tight(cls.cell, cls.tightColumn)}>
                   <div className={cls.actions}>
                     {onRemove && (
                       <button

package/src/components/team/__tests__/team-components.test.tsx

@@ -94,6 +94,29 @@ describe('MembersTable', () => {
     expect(screen.getAllByText('qosha@debugg.ai')).toHaveLength(1)
   })
 
+  it('marks the signed-in user so they can tell which row is them', () => {
+    // startsim-1f3n.7 — the owner appeared as an anonymous row next to a live
+    // Remove button with nothing saying "this one is you".
+    render(<MembersTable members={baseMembers} currentUserId="u2" />)
+    expect(screen.getByText('You')).toBeInTheDocument()
+    const selfRow = screen.getByText('Mike Member').closest('tr')!
+    expect(selfRow).toContainElement(screen.getByText('You'))
+  })
+
+  it('renders no You badge when currentUserId matches nobody', () => {
+    render(<MembersTable members={baseMembers} currentUserId="nobody" />)
+    expect(screen.queryByText('You')).not.toBeInTheDocument()
+  })
+
+  it('keeps the Role and actions columns to their content width', () => {
+    // startsim-1f3n.6 — one shared cell class meant Member ate ~55% of the
+    // table and Role/Remove floated in a gap.
+    render(<MembersTable members={baseMembers} canManage onChangeRole={jest.fn()} />)
+    const roleHeader = screen.getByRole('columnheader', { name: 'Role' })
+    expect(roleHeader.className).toContain('w-px')
+    expect(roleHeader.className).toContain('whitespace-nowrap')
+  })
+
   it('shows the empty state when no members', () => {
     render(<MembersTable members={[]} />)
     expect(screen.getByText('No members yet.')).toBeInTheDocument()

package/src/components/team/members-table-default-class-names.ts

@@ -16,6 +16,10 @@ export interface MembersTableClassNames {
   actions?: string
   removeButton?: string
   emptyRow?: string
+  /** Applied to the Role + actions header/body cells so they hug their content. */
+  tightColumn?: string
+  /** "You" pill next to the signed-in user's own row. */
+  selfBadge?: string
 }
 
 export const MEMBERS_TABLE_DEFAULTS: Required<MembersTableClassNames> = {
@@ -37,4 +41,7 @@ export const MEMBERS_TABLE_DEFAULTS: Required<MembersTableClassNames> = {
   removeButton:
     'rounded-md border border-border px-2 py-1 text-xs text-muted-foreground transition-colors hover:border-destructive/40 hover:bg-destructive/10 hover:text-destructive disabled:opacity-50',
   emptyRow: 'px-4 py-6 text-center text-sm text-muted-foreground',
+  tightColumn: 'w-px whitespace-nowrap',
+  selfBadge:
+    'rounded-full border border-border bg-muted px-1.5 py-0.5 text-[10px] font-medium uppercase tracking-wide text-muted-foreground',
 }

package/src/components/wizard/StepIndicator.tsx

@@ -27,9 +27,9 @@ export function StepIndicator({ steps, currentIndex, className = '' }: StepIndic
                 className={[
                   'flex h-8 w-8 items-center justify-center rounded-full border-2 text-sm font-medium transition-colors',
                   isCompleted
-                    ? 'border-primary-600 bg-primary-600 text-white'
+                    ? 'border-primary bg-primary text-primary-foreground'
                     : isActive
-                    ? 'border-primary-600 bg-white text-primary-600'
+                    ? 'border-primary bg-white text-primary'
                     : 'border-gray-300 bg-white text-gray-400',
                 ].join(' ')}
               >
@@ -38,7 +38,7 @@ export function StepIndicator({ steps, currentIndex, className = '' }: StepIndic
               <span
                 className={[
                   'mt-1 text-xs font-medium',
-                  isActive ? 'text-primary-600' : isCompleted ? 'text-gray-600' : 'text-gray-400',
+                  isActive ? 'text-primary' : isCompleted ? 'text-gray-600' : 'text-gray-400',
                 ].join(' ')}
               >
                 {step.label}
@@ -48,7 +48,7 @@ export function StepIndicator({ steps, currentIndex, className = '' }: StepIndic
               <div
                 className={[
                   'h-0.5 flex-1 mx-2 mb-4 transition-colors',
-                  isCompleted ? 'bg-primary-600' : 'bg-gray-200',
+                  isCompleted ? 'bg-primary' : 'bg-gray-200',
                 ].join(' ')}
               />
             )}

package/src/components/wizard/__tests__/wizard.test.tsx

@@ -31,7 +31,7 @@ describe('StepIndicator', () => {
   it('applies active styles to the current step label', () => {
     render(<StepIndicator steps={steps} currentIndex={1} />)
     const profileLabel = screen.getByText('Profile')
-    expect(profileLabel).toHaveClass('text-primary-600')
+    expect(profileLabel).toHaveClass('text-primary')
   })
 
   it('applies completed styles to past step labels', () => {
@@ -60,7 +60,7 @@ describe('StepIndicator', () => {
     const connectors = container.querySelectorAll('.h-0\\.5')
     // Both connectors (between steps 1-2 and 2-3) should be completed
     connectors.forEach((connector) => {
-      expect(connector).toHaveClass('bg-primary-600')
+      expect(connector).toHaveClass('bg-primary')
     })
   })
 
@@ -92,6 +92,6 @@ describe('StepIndicator', () => {
   it('renders with currentIndex at last step', () => {
     render(<StepIndicator steps={steps} currentIndex={2} />)
     // "Review" should be active
-    expect(screen.getByText('Review')).toHaveClass('text-primary-600')
+    expect(screen.getByText('Review')).toHaveClass('text-primary')
   })
 })