@startsimpli/ui 0.4.66 → 0.4.68

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@startsimpli/ui",
-  "version": "0.4.66",
+  "version": "0.4.68",
   "description": "Shared UI components package for StartSimpli applications",
   "main": "./src/index.ts",
   "types": "./src/index.ts",
@@ -43,7 +43,7 @@
     "react": "^18.0.0 || ^19.0.0",
     "react-dom": "^18.0.0 || ^19.0.0",
     "@startsimpli/api": "0.5.44",
-    "@startsimpli/auth": "0.4.30"
+    "@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/navigation/__tests__/navigation.test.tsx

@@ -128,7 +128,10 @@ describe('Sidebar', () => {
     ]
     render(<Sidebar appName="App" sections={customSections} />)
     const activeLink = screen.getByText('Active Link').closest('a')
-    expect(activeLink).toHaveClass('bg-primary-600')
+    // Semantic token, not a numeric ramp — `bg-primary-600` is undefined in apps
+    // that only declare --color-primary, so the active pill vanished (startsim-1f3n).
+    expect(activeLink).toHaveClass('bg-primary')
+    expect(activeLink).toHaveClass('text-primary-foreground')
   })
 
   it('inactive link uses gray text', () => {
@@ -154,7 +157,7 @@ describe('Sidebar', () => {
     ]
     render(<Sidebar appName="App" sections={customSections} />)
     const homeLink = screen.getByText('Home').closest('a')
-    expect(homeLink).not.toHaveClass('bg-primary-600')
+    expect(homeLink).not.toHaveClass('bg-primary')
   })
 })
 

package/src/components/navigation/app-shell.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import { useEffect, type ReactNode } from 'react';
+import { useEffect, useState, type ReactNode } from 'react';
 import { useAuth, buildCentralAuthUrl } from '@startsimpli/auth';
 import { LogOut, User } from 'lucide-react';
 import { Sidebar, SidebarLayout, type SidebarSection } from './sidebar';
@@ -52,6 +52,9 @@ export function AppShell({
   children,
 }: AppShellProps) {
   const { user, isLoading, logout } = useAuth();
+  // Owned here so the content spacer shrinks with the rail — the Sidebar used to
+  // keep this private, so "Collapse" narrowed the rail and left a dead 16rem gap.
+  const [collapsed, setCollapsed] = useState(false);
 
   const signin = (returnTo: string) => buildCentralAuthUrl('signin', { app, returnTo });
 
@@ -112,8 +115,15 @@ export function AppShell({
 
   return (
     <>
-      <Sidebar appName={appName} sections={sections} userDropdown={userDropdown} collapsible />
-      <SidebarLayout>{children}</SidebarLayout>
+      <Sidebar
+        appName={appName}
+        sections={sections}
+        userDropdown={userDropdown}
+        collapsible
+        collapsed={collapsed}
+        onCollapsedChange={setCollapsed}
+      />
+      <SidebarLayout collapsed={collapsed}>{children}</SidebarLayout>
     </>
   );
 }

package/src/components/navigation/grouped-nav.tsx

@@ -69,7 +69,7 @@ function linkClasses(active: boolean, indented: boolean) {
     'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors',
     indented && 'pl-9',
     active
-      ? 'bg-primary-600 text-white'
+      ? 'bg-primary text-primary-foreground'
       : 'text-gray-700 hover:bg-gray-100 hover:text-gray-900',
   )
 }
@@ -175,7 +175,7 @@ function NavGroup({
           type="button"
           onClick={() => setOpen((o) => !o)}
           aria-expanded={expanded}
-          className="w-full flex items-center justify-between gap-2 px-3 py-1.5 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-primary-500"
+          className="w-full flex items-center justify-between gap-2 px-3 py-1.5 rounded-md hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-ring"
         >
           {heading}
           <ChevronDown

package/src/components/navigation/sidebar.tsx

@@ -40,9 +40,17 @@ export interface SidebarProps {
    */
   collapsible?: boolean;
   /**
-   * Default collapsed state
+   * Default collapsed state (uncontrolled)
    */
   defaultCollapsed?: boolean;
+  /**
+   * Controlled collapsed state. Pass with onCollapsedChange when the surrounding
+   * layout also needs to know (see AppShell — the content spacer must shrink with
+   * the rail, otherwise "Collapse" only narrows the rail and leaves a dead gap).
+   */
+  collapsed?: boolean;
+  /** Fires whenever the collapse toggle is used. */
+  onCollapsedChange?: (collapsed: boolean) => void;
 }
 
 export function Sidebar({
@@ -52,9 +60,16 @@ export function Sidebar({
   className,
   collapsible = true,
   defaultCollapsed = false,
+  collapsed: controlledCollapsed,
+  onCollapsedChange,
 }: SidebarProps) {
   const pathname = usePathname();
-  const [collapsed, setCollapsed] = useState(defaultCollapsed);
+  const [internalCollapsed, setInternalCollapsed] = useState(defaultCollapsed);
+  const collapsed = controlledCollapsed ?? internalCollapsed;
+  const setCollapsed = (next: boolean) => {
+    if (controlledCollapsed === undefined) setInternalCollapsed(next);
+    onCollapsedChange?.(next);
+  };
 
   const isActivePath = (href: string) => {
     if (href === '/') {
@@ -76,7 +91,7 @@ export function Sidebar({
         <Link
           href="/"
           className={cn(
-            'font-bold hover:text-primary-400 transition-colors',
+            'font-bold transition-colors hover:text-primary',
             collapsed ? 'text-lg' : 'text-xl'
           )}
         >
@@ -103,7 +118,7 @@ export function Sidebar({
                     className={cn(
                       'flex items-center gap-3 px-3 py-2 rounded-md text-sm font-medium transition-colors',
                       isActive
-                        ? 'bg-primary-600 text-white'
+                        ? 'bg-primary text-primary-foreground shadow-sm'
                         : 'text-gray-300 hover:bg-gray-800 hover:text-white',
                       collapsed && 'justify-center'
                     )}
@@ -163,7 +178,7 @@ export interface SidebarLayoutProps {
 
 export function SidebarLayout({ children, collapsed = false }: SidebarLayoutProps) {
   return (
-    <div className="flex h-screen bg-gray-50">
+    <div className="flex h-screen bg-background">
       {/* Spacer for fixed sidebar */}
       <div className={cn('flex-shrink-0 transition-all duration-200', collapsed ? 'w-20' : 'w-64')} />
 

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/settings/SettingsCard.tsx

@@ -8,24 +8,32 @@ export interface SettingsCardProps {
   children?: React.ReactNode
 }
 
+/**
+ * A titled settings panel with an optional trailing action.
+ *
+ * Theme-driven surfaces (startsim-1f3n): it used to hard-code
+ * `bg-white text-gray-900`, which ignored every app's palette and was
+ * unreadable in dark mode. Now it renders on the `card` token like the rest of
+ * the system.
+ */
 export function SettingsCard({ title, description, icon: Icon, action, children }: SettingsCardProps) {
   return (
-    <div className="rounded-xl border bg-white text-gray-900 shadow-sm">
-      <div className="flex items-start justify-between p-6">
-        <div className="flex items-start gap-4">
+    <div className="rounded-xl border border-border bg-card text-card-foreground shadow-sm">
+      <div className="flex flex-wrap items-start justify-between gap-4 p-6">
+        <div className="flex min-w-0 items-start gap-4">
           {Icon && (
-            <div className="flex h-10 w-10 items-center justify-center rounded-lg bg-gray-100">
-              <Icon className="h-5 w-5 text-gray-600" />
+            <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-primary/10">
+              <Icon className="h-5 w-5 text-primary" />
             </div>
           )}
-          <div>
+          <div className="min-w-0">
             <h3 className="font-semibold leading-none tracking-tight">{title}</h3>
             {description && (
-              <p className="text-sm text-gray-500 mt-1.5">{description}</p>
+              <p className="mt-1.5 text-sm text-muted-foreground">{description}</p>
             )}
           </div>
         </div>
-        {action && <div className="flex-shrink-0 ml-4">{action}</div>}
+        {action && <div className="shrink-0">{action}</div>}
       </div>
       {children && <div className="px-6 pb-6 pt-0">{children}</div>}
     </div>

package/src/components/team/InviteMemberDialog.tsx

@@ -32,6 +32,12 @@ export interface InviteMemberDialogProps {
   triggerLabel?: string
   /** Title in the modal header. */
   title?: string
+  /** Submit button label. Override when the backend adds directly rather than
+   *  emailing an invite (e.g. Foundry: "Add member"). */
+  submitLabel?: string
+  /** Confirmation line after a successful submit. Receives the email so the
+   *  caller can match its own semantics ("Added ada@x to this foundry"). */
+  successMessage?: (email: string) => string
   /** Default role pre-selected. */
   defaultRole?: TeamRole
   /** Available roles in the dropdown. Defaults to admin/member/viewer (no owner). */
@@ -48,6 +54,8 @@ export function InviteMemberDialog({
   onInvited,
   triggerLabel = 'Invite member',
   title = 'Invite a teammate',
+  submitLabel = 'Send invitation',
+  successMessage = (email) => `Invitation sent to ${email}`,
   defaultRole = 'member',
   availableRoles = ['admin', 'member', 'viewer'],
   classNames,
@@ -95,7 +103,7 @@ export function InviteMemberDialog({
       if (onSubmit) {
         invited = await onSubmit({ email: email.trim(), teamId, role })
       }
-      setSuccess(`Invitation sent to ${email.trim()}`)
+      setSuccess(successMessage(email.trim()))
       setEmail('')
       onInvited?.(invited)
     } catch (err) {
@@ -170,7 +178,7 @@ export function InviteMemberDialog({
                   className={cls.submitButton}
                   disabled={submitting}
                 >
-                  {submitting ? 'Sending…' : 'Send invitation'}
+                  {submitting ? 'Saving…' : submitLabel}
                 </button>
               </div>
             </form>

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>
@@ -77,7 +88,13 @@ export function MembersTable({
               </td>
             </tr>
           )}
-          {members.map((m) => (
+          {members.map((m) => {
+            const displayName = userDisplayName(m.user) || m.userId
+            // 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}>
                 <div className="flex items-center gap-3">
@@ -93,17 +110,16 @@ export function MembersTable({
                       {userInitials(m.user)}
                     </span>
                   )}
-                  <div className="flex flex-col">
-                    <span className={cls.name}>
-                      {userDisplayName(m.user) || m.userId}
+                  <div className="flex min-w-0 flex-col">
+                    <span className="flex items-center gap-2">
+                      <span className={cls.name}>{displayName}</span>
+                      {isSelf && <span className={cls.selfBadge}>You</span>}
                     </span>
-                    {m.user?.email && (
-                      <span className={cls.email}>{m.user.email}</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}
@@ -115,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
@@ -130,7 +146,8 @@ export function MembersTable({
                 </td>
               )}
             </tr>
-          ))}
+            )
+          })}
         </tbody>
       </table>
     </div>

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

@@ -73,6 +73,50 @@ describe('MembersTable', () => {
     expect(container.firstChild).toHaveClass('my-root-class')
   })
 
+  it('does not print the email twice when it is also the display name', () => {
+    // Foundry maps control-plane members with an email and no name, so
+    // userDisplayName() falls back to the email — the row used to stack the
+    // same string on itself. startsim-1f3n.4.
+    render(
+      <MembersTable
+        members={[
+          {
+            id: 'u1',
+            userId: 'u1',
+            teamId: 't1',
+            role: 'owner',
+            joinedAt: '2025-01-01',
+            user: { id: 'u1', email: 'qosha@debugg.ai' },
+          },
+        ]}
+      />
+    )
+    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/__tests__/theme-tokens.test.ts

@@ -0,0 +1,76 @@
+/**
+ * Theme-token guard for the team/settings surfaces (startsim-1f3n.1).
+ *
+ * These components ship default Tailwind classes. The only colors an app is
+ * guaranteed to have are the semantic tokens from packages/ui/theme/contract.css
+ * (--primary, --card, --border, --muted-foreground, …). Apps do NOT all define a
+ * numeric palette ramp: apps/foundry defines `--color-primary` with no
+ * `--color-primary-600`, so in Tailwind v4 `bg-primary-600` generates no rule at
+ * all — the Invite member button rendered as white text on a white card, i.e.
+ * invisible.
+ *
+ * Hard-coded `gray-*` / `bg-white` are the same class of bug one step quieter:
+ * the classes exist, but they ignore the app's theme and are unreadable in dark
+ * mode. Shared components must be theme-driven, not palette-driven.
+ */
+
+import { INVITE_DIALOG_DEFAULTS } from '../invite-member-dialog-default-class-names'
+import { MEMBERS_TABLE_DEFAULTS } from '../members-table-default-class-names'
+import { ROLE_SELECTOR_DEFAULTS } from '../role-selector-default-class-names'
+import { PENDING_INVITE_DEFAULTS } from '../pending-invitation-callout-default-class-names'
+import { LEAVE_DIALOG_DEFAULTS } from '../leave-team-dialog-default-class-names'
+import { ORG_SWITCHER_DEFAULTS } from '../org-switcher-default-class-names'
+import { DOMAIN_CLAIM_DEFAULTS } from '../domain-claim-card-default-class-names'
+import { TEAM_SETTINGS_PAGE_DEFAULTS } from '../pages/team-settings-page-default-class-names'
+import { DOMAINS_SETTINGS_PAGE_DEFAULTS } from '../pages/domains-settings-page-default-class-names'
+
+const MAPS: Record<string, Record<string, string>> = {
+  INVITE_DIALOG_DEFAULTS,
+  MEMBERS_TABLE_DEFAULTS,
+  ROLE_SELECTOR_DEFAULTS,
+  PENDING_INVITE_DEFAULTS,
+  LEAVE_DIALOG_DEFAULTS,
+  ORG_SWITCHER_DEFAULTS,
+  DOMAIN_CLAIM_DEFAULTS,
+  TEAM_SETTINGS_PAGE_DEFAULTS,
+  DOMAINS_SETTINGS_PAGE_DEFAULTS,
+}
+
+/** `bg-primary-600`, `text-primary-700`, `focus:border-primary-500`, … */
+const PRIMARY_RAMP = /(^|:)[a-z-]*-primary-\d{2,3}\b/
+/** `text-gray-500`, `bg-white`, `divide-gray-100`, … — theme-blind surfaces. */
+const RAW_SURFACE = /(^|:)(bg|text|border|divide|ring)-(gray|slate|zinc|neutral|stone)-\d{2,3}\b|(^|:)bg-white\b/
+
+function offenders(map: Record<string, string>, pattern: RegExp): string[] {
+  return Object.entries(map)
+    .flatMap(([slot, value]) =>
+      String(value)
+        .split(/\s+/)
+        .filter((cls) => pattern.test(cls))
+        .map((cls) => `${slot}: ${cls}`),
+    )
+}
+
+describe('team surfaces are theme-driven', () => {
+  it.each(Object.keys(MAPS))(
+    '%s uses no numeric primary ramp (undefined in token-only apps like foundry)',
+    (name) => {
+      expect(offenders(MAPS[name], PRIMARY_RAMP)).toEqual([])
+    },
+  )
+
+  it.each(Object.keys(MAPS))('%s uses no theme-blind gray/white surfaces', (name) => {
+    expect(offenders(MAPS[name], RAW_SURFACE)).toEqual([])
+  })
+
+  it('the invite trigger is a filled primary button that is visible on a card', () => {
+    expect(INVITE_DIALOG_DEFAULTS.trigger).toContain('bg-primary')
+    expect(INVITE_DIALOG_DEFAULTS.trigger).toContain('text-primary-foreground')
+  })
+
+  it('dialog panels sit on the card surface, not hard-coded white', () => {
+    expect(INVITE_DIALOG_DEFAULTS.panel).toContain('bg-card')
+    expect(LEAVE_DIALOG_DEFAULTS.panel).toContain('bg-card')
+  })
+})
+

package/src/components/team/domain-claim-card-default-class-names.ts

@@ -1,4 +1,5 @@
-/** Default Tailwind classes for {@link DomainClaimCard}. startsim-o7s. */
+/** Default Tailwind classes for {@link DomainClaimCard}. startsim-o7s.
+ *  Semantic tokens only (startsim-1f3n) — theme-driven, dark-mode safe. */
 export interface DomainClaimCardClassNames {
   root?: string
   header?: string
@@ -20,26 +21,28 @@ export interface DomainClaimCardClassNames {
 }
 
 export const DOMAIN_CLAIM_DEFAULTS: Required<DomainClaimCardClassNames> = {
-  root: 'rounded-xl border border-gray-200 bg-white p-5',
+  root: 'rounded-xl border border-border bg-card p-5 text-card-foreground',
   header: 'flex items-center justify-between gap-3',
-  domain: 'text-base font-semibold text-gray-900',
+  domain: 'text-base font-semibold text-foreground',
   statusBadge: 'inline-flex items-center rounded-full px-2 py-0.5 text-xs font-medium',
-  statusVerified: 'bg-green-100 text-green-800',
-  statusUnverified: 'bg-yellow-100 text-yellow-800',
-  body: 'mt-4 space-y-3 text-sm text-gray-700',
-  sectionLabel: 'text-xs font-medium uppercase tracking-wide text-gray-500',
+  statusVerified:
+    'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400',
+  statusUnverified:
+    'bg-amber-500/10 text-amber-700 dark:text-amber-400',
+  body: 'mt-4 space-y-3 text-sm text-foreground',
+  sectionLabel: 'text-xs font-medium uppercase tracking-wide text-muted-foreground',
   tokenRow: 'flex items-center gap-2',
   tokenCode:
-    'flex-1 rounded-md bg-gray-50 px-3 py-2 font-mono text-xs text-gray-900',
-  helpText: 'text-xs text-gray-500',
+    'flex-1 rounded-md bg-muted px-3 py-2 font-mono text-xs text-foreground',
+  helpText: 'text-xs text-muted-foreground',
   actions: 'mt-4 flex flex-wrap items-center gap-2',
   primaryButton:
-    'rounded-md bg-primary-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-primary-700 disabled:opacity-50',
+    'rounded-md bg-primary px-3 py-1.5 text-sm font-semibold text-primary-foreground shadow-sm transition-colors hover:bg-primary/90 disabled:opacity-50',
   secondaryButton:
-    'rounded-md border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50 disabled:opacity-50',
+    'rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-muted disabled:opacity-50',
   revokeButton:
-    'rounded-md border border-red-300 px-3 py-1.5 text-sm font-medium text-red-700 hover:bg-red-50 disabled:opacity-50',
-  errorText: 'mt-2 text-sm text-red-600',
+    'rounded-md border border-destructive/40 px-3 py-1.5 text-sm font-medium text-destructive transition-colors hover:bg-destructive/10 disabled:opacity-50',
+  errorText: 'mt-2 text-sm text-destructive',
   codeInput:
-    'w-24 rounded-md border border-gray-300 px-2 py-1.5 text-sm tracking-widest outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500',
+    'w-24 rounded-md border border-input bg-background px-2 py-1.5 text-sm tracking-widest text-foreground outline-none focus:border-ring focus:ring-1 focus:ring-ring',
 }

package/src/components/team/invite-member-dialog-default-class-names.ts

@@ -1,4 +1,12 @@
-/** Default Tailwind classes for {@link InviteMemberDialog}. startsim-o7s. */
+/**
+ * Default Tailwind classes for {@link InviteMemberDialog}. startsim-o7s.
+ *
+ * Semantic tokens only (startsim-1f3n) — see packages/ui/theme/contract.css.
+ * A numeric ramp like `bg-primary-600` is NOT part of the contract: apps that
+ * define `--color-primary` alone (foundry, gen-ai-consulting, workflow-studio)
+ * generate no rule for it, which is how this trigger became an invisible
+ * white-on-white button in the Foundry control plane.
+ */
 export interface InviteMemberDialogClassNames {
   trigger?: string
   overlay?: string
@@ -18,24 +26,24 @@ export interface InviteMemberDialogClassNames {
 
 export const INVITE_DIALOG_DEFAULTS: Required<InviteMemberDialogClassNames> = {
   trigger:
-    'inline-flex items-center rounded-md bg-primary-600 px-3 py-2 text-sm font-semibold text-white hover:bg-primary-700',
+    'inline-flex items-center gap-1.5 rounded-md bg-primary px-3 py-2 text-sm font-semibold text-primary-foreground shadow-sm transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2',
   overlay:
     'fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4',
   panel:
-    'w-full max-w-md rounded-xl bg-white shadow-xl ring-1 ring-black/5',
-  header: 'border-b border-gray-100 px-6 py-4',
-  title: 'text-base font-semibold text-gray-900',
+    'w-full max-w-md rounded-xl border border-border bg-card text-card-foreground shadow-xl',
+  header: 'border-b border-border px-6 py-4',
+  title: 'text-base font-semibold text-foreground',
   body: 'space-y-4 px-6 py-4',
   fieldRow: '',
-  label: 'block text-sm font-medium text-gray-700 mb-1',
+  label: 'mb-1 block text-sm font-medium text-foreground',
   input:
-    'w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500',
-  errorText: 'text-sm text-red-600',
-  successText: 'text-sm text-green-600',
+    'w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-ring focus:ring-1 focus:ring-ring',
+  errorText: 'text-sm text-destructive',
+  successText: 'text-sm text-emerald-600 dark:text-emerald-400',
   footer:
-    'flex items-center justify-end gap-2 border-t border-gray-100 px-6 py-3',
+    'flex items-center justify-end gap-2 border-t border-border px-6 py-3',
   cancelButton:
-    'rounded-md border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50',
+    'rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-muted',
   submitButton:
-    'rounded-md bg-primary-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-primary-700 disabled:opacity-50',
+    'rounded-md bg-primary px-3 py-1.5 text-sm font-semibold text-primary-foreground shadow-sm transition-colors hover:bg-primary/90 disabled:opacity-50',
 }

package/src/components/team/leave-team-dialog-default-class-names.ts

@@ -1,4 +1,5 @@
-/** Default Tailwind classes for {@link LeaveTeamDialog}. startsim-o7s. */
+/** Default Tailwind classes for {@link LeaveTeamDialog}. startsim-o7s.
+ *  Semantic tokens only (startsim-1f3n) — theme-driven, dark-mode safe. */
 export interface LeaveTeamDialogClassNames {
   trigger?: string
   overlay?: string
@@ -15,19 +16,20 @@ export interface LeaveTeamDialogClassNames {
 
 export const LEAVE_DIALOG_DEFAULTS: Required<LeaveTeamDialogClassNames> = {
   trigger:
-    'inline-flex items-center rounded-md border border-red-300 px-3 py-1.5 text-sm font-medium text-red-700 hover:bg-red-50',
+    'inline-flex items-center rounded-md border border-destructive/40 px-3 py-1.5 text-sm font-medium text-destructive transition-colors hover:bg-destructive/10',
   overlay:
     'fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4',
-  panel: 'w-full max-w-md rounded-xl bg-white shadow-xl ring-1 ring-black/5',
-  header: 'border-b border-gray-100 px-6 py-4',
-  title: 'text-base font-semibold text-gray-900',
-  body: 'space-y-3 px-6 py-4 text-sm text-gray-700',
-  warningText: 'text-sm text-gray-600',
-  errorText: 'text-sm text-red-600',
+  panel:
+    'w-full max-w-md rounded-xl border border-border bg-card text-card-foreground shadow-xl',
+  header: 'border-b border-border px-6 py-4',
+  title: 'text-base font-semibold text-foreground',
+  body: 'space-y-3 px-6 py-4 text-sm text-foreground',
+  warningText: 'text-sm text-muted-foreground',
+  errorText: 'text-sm text-destructive',
   footer:
-    'flex items-center justify-end gap-2 border-t border-gray-100 px-6 py-3',
+    'flex items-center justify-end gap-2 border-t border-border px-6 py-3',
   cancelButton:
-    'rounded-md border border-gray-300 px-3 py-1.5 text-sm font-medium text-gray-700 hover:bg-gray-50',
+    'rounded-md border border-border px-3 py-1.5 text-sm font-medium text-foreground transition-colors hover:bg-muted',
   confirmButton:
-    'rounded-md bg-red-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-red-700 disabled:opacity-50',
+    'rounded-md bg-destructive px-3 py-1.5 text-sm font-semibold text-destructive-foreground shadow-sm transition-colors hover:bg-destructive/90 disabled:opacity-50',
 }

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

@@ -1,4 +1,5 @@
-/** Default Tailwind classes for {@link MembersTable}. startsim-o7s. */
+/** Default Tailwind classes for {@link MembersTable}. startsim-o7s.
+ *  Semantic tokens only (startsim-1f3n) — theme-driven, dark-mode safe. */
 export interface MembersTableClassNames {
   root?: string
   table?: string
@@ -15,25 +16,32 @@ 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> = {
-  root: 'w-full overflow-x-auto rounded-lg border border-gray-200',
-  table: 'w-full text-sm text-left',
-  thead: 'bg-gray-50 text-xs uppercase tracking-wide text-gray-500',
+  root: 'w-full overflow-x-auto rounded-lg border border-border bg-card',
+  table: 'w-full text-left text-sm',
+  thead: 'bg-muted/50 text-xs uppercase tracking-wide text-muted-foreground',
   headerRow: '',
-  th: 'px-4 py-2 font-medium',
-  tbody: 'divide-y divide-gray-100 bg-white',
-  row: 'hover:bg-gray-50',
+  th: 'px-4 py-2.5 font-medium',
+  tbody: 'divide-y divide-border',
+  row: 'transition-colors hover:bg-muted/40',
   cell: 'px-4 py-3 align-middle',
   avatar:
-    'flex h-8 w-8 items-center justify-center rounded-full bg-gray-100 text-xs font-medium text-gray-600',
-  name: 'font-medium text-gray-900',
-  email: 'text-gray-500',
+    'flex h-8 w-8 shrink-0 items-center justify-center rounded-full bg-primary/10 text-xs font-semibold text-primary',
+  name: 'font-medium text-foreground',
+  email: 'text-muted-foreground',
   roleBadge:
-    'inline-flex items-center rounded-full bg-gray-100 px-2 py-0.5 text-xs font-medium text-gray-700',
+    'inline-flex items-center rounded-full border border-border bg-muted px-2 py-0.5 text-xs font-medium text-muted-foreground',
   actions: 'flex items-center justify-end gap-2',
   removeButton:
-    'rounded-md border border-gray-300 px-2 py-1 text-xs text-gray-700 hover:bg-gray-100 disabled:opacity-50',
-  emptyRow: 'px-4 py-6 text-center text-sm text-gray-500',
+    '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/team/org-switcher-default-class-names.ts

@@ -1,4 +1,5 @@
-/** Default Tailwind classes for {@link OrgSwitcher}. startsim-o7s. */
+/** Default Tailwind classes for {@link OrgSwitcher}. startsim-o7s.
+ *  Semantic tokens only (startsim-1f3n) — theme-driven, dark-mode safe. */
 export interface OrgSwitcherClassNames {
   root?: string
   label?: string
@@ -7,7 +8,7 @@ export interface OrgSwitcherClassNames {
 
 export const ORG_SWITCHER_DEFAULTS: Required<OrgSwitcherClassNames> = {
   root: 'inline-flex items-center gap-2',
-  label: 'text-xs font-medium uppercase tracking-wide text-gray-500',
+  label: 'text-xs font-medium uppercase tracking-wide text-muted-foreground',
   select:
-    'rounded-md border border-gray-300 bg-white px-3 py-1.5 text-sm font-medium text-gray-900 outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500',
+    'rounded-md border border-input bg-background px-3 py-1.5 text-sm font-medium text-foreground outline-none transition-colors focus:border-ring focus:ring-1 focus:ring-ring',
 }

package/src/components/team/pages/domains-settings-page-default-class-names.ts

@@ -60,30 +60,30 @@ export const DOMAINS_SETTINGS_PAGE_DEFAULTS: Required<
 > = {
   root: 'space-y-6',
   header: '',
-  backLink: 'text-sm text-primary-600 hover:underline',
+  backLink: 'text-sm text-primary hover:underline',
   titleRow: 'mt-2 flex items-center justify-between gap-4',
-  title: 'text-xl font-semibold text-gray-900',
-  subtitle: 'mt-1 text-sm text-gray-500',
+  title: 'text-xl font-semibold text-foreground',
+  subtitle: 'mt-1 text-sm text-muted-foreground',
 
   primaryButton:
-    'rounded-lg bg-primary-600 px-4 py-2 text-sm font-medium text-white hover:bg-primary-700 disabled:opacity-50',
+    'rounded-lg bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow-sm transition-colors hover:bg-primary/90 disabled:opacity-50',
   input:
-    'w-full rounded-lg border border-gray-300 px-3 py-2 text-sm outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500',
-  label: 'block text-sm font-medium text-gray-700',
-  formCard: 'rounded-xl border border-gray-200 bg-white p-4 space-y-3',
+    'w-full rounded-lg border border-input bg-background px-3 py-2 text-sm text-foreground placeholder:text-muted-foreground outline-none focus:border-ring focus:ring-1 focus:ring-ring',
+  label: 'block text-sm font-medium text-foreground',
+  formCard: 'space-y-3 rounded-xl border border-border bg-card p-4',
   formActions: 'flex gap-2',
   cancelButton:
-    'rounded-lg border border-gray-300 px-4 py-2 text-sm text-gray-700 hover:bg-gray-50',
+    'rounded-lg border border-border px-4 py-2 text-sm text-foreground transition-colors hover:bg-muted',
 
-  errorText: 'text-sm text-red-600',
-  loadingText: 'text-sm text-gray-500',
+  errorText: 'text-sm text-destructive',
+  loadingText: 'text-sm text-muted-foreground',
 
   emptyState:
-    'rounded-xl border border-dashed border-gray-300 bg-white p-10 text-center',
-  emptyText: 'text-sm text-gray-600',
+    'rounded-xl border border-dashed border-border bg-card p-10 text-center',
+  emptyText: 'text-sm text-muted-foreground',
 
   retryButton:
-    'rounded-lg border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50',
+    'rounded-lg border border-border px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-muted',
 
   list: 'space-y-4',
 }

package/src/components/team/pages/team-settings-page-default-class-names.ts

@@ -82,35 +82,35 @@ export const TEAM_SETTINGS_PAGE_DEFAULTS: Required<
 > = {
   root: 'space-y-8',
   header: '',
-  backLink: 'text-sm text-primary-600 hover:underline',
-  title: 'mt-2 text-xl font-semibold text-gray-900',
-  subtitle: 'mt-1 text-sm text-gray-500',
+  backLink: 'text-sm text-primary hover:underline',
+  title: 'mt-2 text-xl font-semibold text-foreground',
+  subtitle: 'mt-1 text-sm text-muted-foreground',
 
   section: 'space-y-3',
   sectionHeader: 'flex items-center justify-between',
-  sectionHeading: 'text-sm font-semibold uppercase tracking-wide text-gray-500',
-  sectionBody: 'text-sm text-gray-500',
+  sectionHeading: 'text-sm font-semibold uppercase tracking-wide text-muted-foreground',
+  sectionBody: 'text-sm text-muted-foreground',
 
-  dangerDivider: 'space-y-3 border-t border-gray-200 pt-6',
+  dangerDivider: 'space-y-3 border-t border-border pt-6',
 
-  errorText: 'text-sm text-red-600',
-  loadingText: 'text-sm text-gray-500',
-  emptyText: 'text-sm text-gray-500',
+  errorText: 'text-sm text-destructive',
+  loadingText: 'text-sm text-muted-foreground',
+  emptyText: 'text-sm text-muted-foreground',
 
   retryButton:
-    'rounded-lg border border-gray-300 px-3 py-1.5 text-sm text-gray-700 hover:bg-gray-50',
+    'rounded-lg border border-border px-3 py-1.5 text-sm text-foreground transition-colors hover:bg-muted',
 
   invitationsTableWrapper:
-    'overflow-hidden rounded-xl border border-gray-200 bg-white',
+    'overflow-hidden rounded-xl border border-border bg-card',
   invitationsTable: 'w-full text-sm',
-  invitationsThead: 'bg-gray-50 text-left text-xs uppercase text-gray-500',
+  invitationsThead: 'bg-muted/50 text-left text-xs uppercase text-muted-foreground',
   invitationsTh: 'px-4 py-3 font-medium',
-  invitationsTbody: 'divide-y divide-gray-100',
-  invitationsEmailCell: 'px-4 py-3 text-gray-700',
+  invitationsTbody: 'divide-y divide-border',
+  invitationsEmailCell: 'px-4 py-3 text-foreground',
   invitationsRoleCell: 'px-4 py-3',
   invitationsRoleBadge:
-    'inline-flex items-center rounded-full bg-primary-50 px-2 py-0.5 text-xs font-medium text-primary-700',
-  invitationsExpiryCell: 'px-4 py-3 text-gray-500',
+    'inline-flex items-center rounded-full bg-primary/10 px-2 py-0.5 text-xs font-medium text-primary',
+  invitationsExpiryCell: 'px-4 py-3 text-muted-foreground',
   invitationsActionsCell: 'px-4 py-3 text-right',
-  invitationsRevokeButton: 'text-red-600 hover:underline text-sm',
+  invitationsRevokeButton: 'text-sm text-destructive hover:underline',
 }

package/src/components/team/pending-invitation-callout-default-class-names.ts

@@ -1,4 +1,6 @@
-/** Default Tailwind classes for {@link PendingInvitationCallout}. startsim-o7s. */
+/** Default Tailwind classes for {@link PendingInvitationCallout}. startsim-o7s.
+ *  Semantic tokens only (startsim-1f3n) — the callout picks up the app's brand
+ *  color instead of a hard-coded blue that clashes with every non-blue theme. */
 export interface PendingInvitationCalloutClassNames {
   root?: string
   message?: string
@@ -10,13 +12,13 @@ export interface PendingInvitationCalloutClassNames {
 }
 
 export const PENDING_INVITE_DEFAULTS: Required<PendingInvitationCalloutClassNames> = {
-  root: 'flex items-center gap-3 rounded-lg border border-blue-200 bg-blue-50 px-4 py-3',
-  message: 'flex-1 text-sm text-blue-900',
+  root: 'flex items-center gap-3 rounded-lg border border-primary/25 bg-primary/5 px-4 py-3',
+  message: 'flex-1 text-sm text-foreground',
   emphasized: 'font-semibold',
   actions: 'flex items-center gap-2',
   acceptButton:
-    'rounded-md bg-blue-600 px-3 py-1.5 text-sm font-semibold text-white hover:bg-blue-700 disabled:opacity-50',
+    'rounded-md bg-primary px-3 py-1.5 text-sm font-semibold text-primary-foreground shadow-sm transition-colors hover:bg-primary/90 disabled:opacity-50',
   declineButton:
-    'rounded-md border border-blue-300 px-3 py-1.5 text-sm font-medium text-blue-700 hover:bg-blue-100',
-  errorText: 'mt-2 text-sm text-red-600',
+    'rounded-md border border-border px-3 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground',
+  errorText: 'mt-2 text-sm text-destructive',
 }

package/src/components/team/role-selector-default-class-names.ts

@@ -1,4 +1,5 @@
-/** Default Tailwind classes for {@link RoleSelector}. startsim-o7s. */
+/** Default Tailwind classes for {@link RoleSelector}. startsim-o7s.
+ *  Semantic tokens only (startsim-1f3n) — theme-driven, dark-mode safe. */
 export interface RoleSelectorClassNames {
   root?: string
   select?: string
@@ -7,5 +8,5 @@ export interface RoleSelectorClassNames {
 export const ROLE_SELECTOR_DEFAULTS: Required<RoleSelectorClassNames> = {
   root: 'inline-block',
   select:
-    'rounded-md border border-gray-300 bg-white px-2 py-1 text-sm text-gray-900 outline-none focus:border-primary-500 focus:ring-1 focus:ring-primary-500 disabled:cursor-not-allowed disabled:opacity-50',
+    'rounded-md border border-input bg-background px-2 py-1 text-sm text-foreground outline-none transition-colors focus:border-ring focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
 }

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')
   })
 })