@nextclaw/ui 0.14.1 → 0.14.3

package/src/features/pwa/managers/__tests__/pwa-shell-theme.manager.test.ts

@@ -1,21 +1,45 @@
 import { beforeEach, describe, expect, it } from 'vitest';
-import { pwaShellThemeManager } from '@/features/pwa';
+import { pwaShellThemeManager } from '@/features/pwa/managers/pwa-shell-theme.manager';
 
 describe('PwaShellThemeManager', () => {
   beforeEach(() => {
-    document.head.innerHTML = '<meta name="theme-color" content="#F9F8F5" />';
+    document.head.innerHTML = '<meta name="theme-color" content="#FFFFFF" />';
     document.body.innerHTML = '<div id="root"></div>';
     document.documentElement.removeAttribute('data-theme');
     document.documentElement.style.backgroundColor = '';
     document.body.style.backgroundColor = '';
   });
 
+  it('applies natural shell colors by default', () => {
+    pwaShellThemeManager.syncCurrentTheme();
+
+    const meta = document.querySelector('meta[name="theme-color"]');
+    expect(meta?.getAttribute('content')).toBe('#FAF9F7');
+    expect(document.body.style.backgroundColor).toBe('rgb(250, 249, 247)');
+  });
+
+  it('applies natural shell colors explicitly', () => {
+    pwaShellThemeManager.syncTheme('natural');
+
+    const meta = document.querySelector('meta[name="theme-color"]');
+    expect(meta?.getAttribute('content')).toBe('#FAF9F7');
+    expect(document.body.style.backgroundColor).toBe('rgb(250, 249, 247)');
+  });
+
+  it('applies minimal shell colors explicitly', () => {
+    pwaShellThemeManager.syncTheme('minimal');
+
+    const meta = document.querySelector('meta[name="theme-color"]');
+    expect(meta?.getAttribute('content')).toBe('#FFFFFF');
+    expect(document.body.style.backgroundColor).toBe('rgb(255, 255, 255)');
+  });
+
   it('applies warm shell colors', () => {
     pwaShellThemeManager.syncTheme('warm');
 
     const meta = document.querySelector('meta[name="theme-color"]');
-    expect(meta?.getAttribute('content')).toBe('#F9F8F5');
-    expect(document.body.style.backgroundColor).toBe('rgb(249, 248, 245)');
+    expect(meta?.getAttribute('content')).toBe('#FAF8F4');
+    expect(document.body.style.backgroundColor).toBe('rgb(250, 248, 244)');
   });
 
   it('applies cool shell colors from current theme attribute', () => {
@@ -24,7 +48,47 @@ describe('PwaShellThemeManager', () => {
     pwaShellThemeManager.syncCurrentTheme();
 
     const meta = document.querySelector('meta[name="theme-color"]');
-    expect(meta?.getAttribute('content')).toBe('#F8FAFB');
-    expect(document.body.style.backgroundColor).toBe('rgb(248, 250, 251)');
+    expect(meta?.getAttribute('content')).toBe('#F8FAFC');
+    expect(document.body.style.backgroundColor).toBe('rgb(248, 250, 252)');
+  });
+
+  it('applies dawn shell colors from current theme attribute', () => {
+    document.documentElement.setAttribute('data-theme', 'dawn');
+
+    pwaShellThemeManager.syncCurrentTheme();
+
+    const meta = document.querySelector('meta[name="theme-color"]');
+    expect(meta?.getAttribute('content')).toBe('#FAF7F4');
+    expect(document.body.style.backgroundColor).toBe('rgb(250, 247, 244)');
+  });
+
+  it('applies graphite shell colors from current theme attribute', () => {
+    document.documentElement.setAttribute('data-theme', 'graphite');
+
+    pwaShellThemeManager.syncCurrentTheme();
+
+    const meta = document.querySelector('meta[name="theme-color"]');
+    expect(meta?.getAttribute('content')).toBe('#F8F8F7');
+    expect(document.body.style.backgroundColor).toBe('rgb(248, 248, 247)');
+  });
+
+  it('maps the legacy leaf theme to warm shell colors', () => {
+    document.documentElement.setAttribute('data-theme', 'leaf');
+
+    pwaShellThemeManager.syncCurrentTheme();
+
+    const meta = document.querySelector('meta[name="theme-color"]');
+    expect(meta?.getAttribute('content')).toBe('#FAF8F4');
+    expect(document.body.style.backgroundColor).toBe('rgb(250, 248, 244)');
+  });
+
+  it('applies probe shell colors from current theme attribute', () => {
+    document.documentElement.setAttribute('data-theme', 'probe');
+
+    pwaShellThemeManager.syncCurrentTheme();
+
+    const meta = document.querySelector('meta[name="theme-color"]');
+    expect(meta?.getAttribute('content')).toBe('#FEFCF6');
+    expect(document.body.style.backgroundColor).toBe('rgb(254, 252, 246)');
   });
 });

package/src/features/pwa/managers/pwa-shell-theme.manager.ts

@@ -1,8 +1,13 @@
-import type { UiTheme } from '@/shared/lib/theme';
+import { normalizeTheme, type UiTheme } from '@/shared/lib/theme';
 
 const PWA_SHELL_THEME_COLORS: Record<UiTheme, string> = {
-  warm: '#F9F8F5',
-  cool: '#F8FAFB'
+  natural: '#FAF9F7',
+  minimal: '#FFFFFF',
+  warm: '#FAF8F4',
+  cool: '#F8FAFC',
+  dawn: '#FAF7F4',
+  graphite: '#F8F8F7',
+  probe: '#FEFCF6'
 };
 
 export class PwaShellThemeManager {
@@ -22,8 +27,8 @@ export class PwaShellThemeManager {
       return;
     }
 
-    const currentTheme = document.documentElement.getAttribute('data-theme') === 'cool' ? 'cool' : 'warm';
-    this.syncTheme(currentTheme);
+    const currentTheme = document.documentElement.getAttribute('data-theme');
+    this.syncTheme(normalizeTheme(currentTheme) ?? 'natural');
   };
 
   private updateThemeMeta = (themeColor: string) => {

package/src/features/service-apps/components/service-action-authorization-dialog.tsx

@@ -37,10 +37,10 @@ export function ServiceActionAuthorizationDialog() {
           </DialogDescription>
         </DialogHeader>
         {pending ? (
-          <div className="space-y-3 rounded-md border border-gray-100 bg-gray-50 p-3 text-sm">
+          <div className="space-y-3 rounded-md border border-border bg-muted/60 p-3 text-sm">
             <AuthorizationField label={t('serviceActionAuthorizationSource')} value={pending.panelAppId} />
             <div className="space-y-2">
-              <div className="text-xs font-medium text-gray-500">
+              <div className="text-xs font-medium text-muted-foreground">
                 {t('serviceActionAuthorizationActions')}
               </div>
               <div className="max-h-64 space-y-2 overflow-auto">
@@ -78,18 +78,18 @@ function AuthorizationActionItem({
   };
 }) {
   return (
-    <div className="space-y-1 rounded border border-gray-200 bg-white px-3 py-2">
+    <div className="space-y-1 rounded border border-border bg-card px-3 py-2">
       <div className="flex items-start justify-between gap-3">
-        <div className="min-w-0 break-words text-xs font-medium text-gray-900">
+        <div className="min-w-0 break-words text-xs font-medium text-foreground">
           {action.actionTitle ?? action.actionId}
         </div>
         <div className="shrink-0 rounded bg-amber-50 px-1.5 py-0.5 text-[11px] font-medium text-amber-700">
           {action.risk ?? 'dangerous'}
         </div>
       </div>
-      <div className="break-words text-[11px] text-gray-500">{action.actionId}</div>
+      <div className="break-words text-[11px] text-muted-foreground">{action.actionId}</div>
       {action.actionDescription ? (
-        <div className="break-words text-xs text-gray-600">{action.actionDescription}</div>
+        <div className="break-words text-xs text-muted-foreground">{action.actionDescription}</div>
       ) : null}
     </div>
   );
@@ -104,8 +104,8 @@ function AuthorizationField({
 }) {
   return (
     <div className="grid grid-cols-[5rem_minmax(0,1fr)] gap-3">
-      <div className="text-xs font-medium text-gray-500">{label}</div>
-      <div className="min-w-0 break-words text-xs text-gray-900">{value}</div>
+      <div className="text-xs font-medium text-muted-foreground">{label}</div>
+      <div className="min-w-0 break-words text-xs text-foreground">{value}</div>
     </div>
   );
 }

package/src/features/service-apps/components/service-apps-panel.tsx

@@ -62,7 +62,7 @@ export function ServiceAppsPanel({
 
   if (serviceApps.isLoading || serviceActions.isLoading || serviceActionGrants.isLoading) {
     return (
-      <div className="flex h-full items-center justify-center text-sm text-gray-500">
+      <div className="flex h-full items-center justify-center text-sm text-muted-foreground">
         {t('serviceAppsLoading')}
       </div>
     );
@@ -90,13 +90,13 @@ export function ServiceAppsPanel({
   };
 
   return (
-    <div className="flex h-full min-h-0 flex-col bg-white">
-      <div className="flex items-center justify-between gap-2 border-b border-gray-100 px-4 py-3">
+    <div className="flex h-full min-h-0 flex-col bg-card text-card-foreground">
+      <div className="flex items-center justify-between gap-2 border-b border-border/70 px-4 py-3">
         <div className="flex min-w-0 items-center gap-2">
           {headerContent ?? (
             <>
               <Server className="h-4 w-4 text-primary" />
-              <div className="truncate text-sm font-semibold text-gray-900">{t('serviceAppsTitle')}</div>
+              <div className="truncate text-sm font-semibold text-foreground">{t('serviceAppsTitle')}</div>
             </>
           )}
         </div>
@@ -110,7 +110,7 @@ export function ServiceAppsPanel({
       </div>
 
       {apps.length === 0 ? (
-        <div className="flex flex-1 items-center justify-center px-6 text-center text-sm text-gray-500">
+        <div className="flex flex-1 items-center justify-center px-6 text-center text-sm text-muted-foreground">
           {t('serviceAppsEmpty')}
         </div>
       ) : (
@@ -172,15 +172,15 @@ function ServiceAppCard({
 
   return (
     <TooltipProvider delayDuration={250}>
-      <section className="rounded-lg border border-gray-200 bg-white p-3">
+      <section className="rounded-lg border border-border bg-card p-3">
         <div className="flex items-start justify-between gap-3">
           <div className="min-w-0">
             <div className="flex items-center gap-2">
-              <div className="truncate text-sm font-semibold text-gray-900">{app.title}</div>
+              <div className="truncate text-sm font-semibold text-foreground">{app.title}</div>
               <ServiceAppStatusBadge status={app.status} />
             </div>
             {app.description ? (
-              <div className="mt-1 line-clamp-2 text-xs text-gray-500">{app.description}</div>
+              <div className="mt-1 line-clamp-2 text-xs text-muted-foreground">{app.description}</div>
             ) : null}
             {app.lastError ? (
               <div className="mt-2 rounded bg-rose-50 px-2 py-1 text-xs text-rose-700">{app.lastError}</div>
@@ -207,7 +207,7 @@ function ServiceAppCard({
                   <PopoverTrigger asChild>
                     <button
                       type="button"
-                      className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800 disabled:opacity-50"
+                      className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:opacity-50"
                       aria-label={t('serviceAppsMoreActions')}
                       disabled={deletePending}
                     >
@@ -309,7 +309,7 @@ function getServiceAppStatusView(status: ServiceAppStatus): {
       };
     case 'stopped':
       return {
-        className: 'bg-gray-100 text-gray-600',
+        className: 'bg-muted text-muted-foreground',
         icon: PauseCircle,
         label: t('serviceAppsStatus_stopped'),
         tooltip: t('serviceAppsStatusHint_stopped'),
@@ -317,7 +317,7 @@ function getServiceAppStatusView(status: ServiceAppStatus): {
     case 'idle':
     default:
       return {
-        className: 'bg-slate-100 text-slate-600',
+        className: 'bg-muted text-muted-foreground',
         icon: CircleDashed,
         label: t('serviceAppsStatus_idle'),
         tooltip: t('serviceAppsStatusHint_idle'),
@@ -345,7 +345,7 @@ function ServiceAppIconButton({
           type="button"
           onClick={onClick}
           disabled={disabled}
-          className="rounded-md p-1.5 text-gray-500 transition-colors hover:bg-gray-100 hover:text-gray-800 disabled:cursor-not-allowed disabled:text-gray-300 disabled:opacity-60 disabled:hover:bg-transparent"
+          className="rounded-md p-1.5 text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground disabled:cursor-not-allowed disabled:text-muted-foreground/40 disabled:opacity-60 disabled:hover:bg-transparent"
           aria-label={label}
         >
           <Icon className="h-3.5 w-3.5" />
@@ -374,7 +374,7 @@ function ServiceAppMenuItem({
       type="button"
       className={cn(
         'flex w-full items-center gap-2 rounded-lg px-2.5 py-2 text-left text-sm transition-colors disabled:cursor-not-allowed disabled:opacity-50',
-        destructive ? 'text-destructive hover:bg-destructive/10' : 'text-gray-700 hover:bg-gray-100',
+        destructive ? 'text-destructive hover:bg-destructive/10' : 'text-muted-foreground hover:bg-accent hover:text-accent-foreground',
       )}
       disabled={disabled}
       onClick={onClick}
@@ -403,7 +403,7 @@ function ServiceAppDiagnostics({ app }: { app: ServiceAppRecordView }) {
   }
 
   return (
-    <dl className="mt-3 grid grid-cols-[4.5rem_minmax(0,1fr)] gap-x-2 gap-y-1 border-t border-gray-100 pt-2 text-[11px]">
+    <dl className="mt-3 grid grid-cols-[4.5rem_minmax(0,1fr)] gap-x-2 gap-y-1 border-t border-border/70 pt-2 text-[11px]">
       {rows.map((row) => (
         <ServiceAppDiagnosticRow key={row.label} label={row.label} value={row.value} />
       ))}
@@ -420,8 +420,8 @@ function ServiceAppDiagnosticRow({
 }) {
   return (
     <>
-      <dt className="text-gray-400">{label}</dt>
-      <dd className="min-w-0 truncate font-mono text-gray-500" title={value}>
+      <dt className="text-muted-foreground/70">{label}</dt>
+      <dd className="min-w-0 truncate font-mono text-muted-foreground" title={value}>
         {value}
       </dd>
     </>
@@ -438,36 +438,36 @@ function ServiceActionRow({
   onRevoke: (grant: ServiceActionGrantView) => void;
 }) {
   return (
-    <div className="rounded bg-gray-50 px-2 py-1.5">
+    <div className="rounded bg-muted/60 px-2 py-1.5">
       <div className="flex items-center justify-between gap-2">
         <div className="flex min-w-0 items-center gap-2">
-          <Wrench className="h-3.5 w-3.5 shrink-0 text-gray-400" />
+          <Wrench className="h-3.5 w-3.5 shrink-0 text-muted-foreground/70" />
           <div className="min-w-0">
-            <div className="truncate text-xs font-medium text-gray-800">{action.title ?? action.name}</div>
+            <div className="truncate text-xs font-medium text-foreground">{action.title ?? action.name}</div>
             {action.description ? (
-              <div className="truncate text-[11px] text-gray-500">{action.description}</div>
+              <div className="truncate text-[11px] text-muted-foreground">{action.description}</div>
             ) : null}
           </div>
         </div>
         <div className="flex shrink-0 items-center gap-1">
           {action.runtimeState ? (
-            <span className="rounded bg-white px-1.5 py-0.5 text-[11px] text-gray-600">
+            <span className="rounded bg-card px-1.5 py-0.5 text-[11px] text-muted-foreground">
               {t(`serviceAppsRuntimeState_${action.runtimeState}`)}
             </span>
           ) : null}
-          <span className="rounded bg-white px-1.5 py-0.5 text-[11px] text-gray-600">{action.risk}</span>
+          <span className="rounded bg-card px-1.5 py-0.5 text-[11px] text-muted-foreground">{action.risk}</span>
         </div>
       </div>
       {grants.map((grant) => (
         <div key={`${grant.caller.surface}:${grant.caller.appId}:${grant.actionId}`} className="mt-1 flex items-center justify-between gap-2 pl-5">
-          <div className="flex min-w-0 items-center gap-1.5 text-[11px] text-gray-500">
+          <div className="flex min-w-0 items-center gap-1.5 text-[11px] text-muted-foreground">
             <ShieldCheck className="h-3 w-3 shrink-0 text-emerald-500" />
             <span className="truncate">{t('serviceAppsGrantedTo')} {grant.caller.appId}</span>
           </div>
           <button
             type="button"
             onClick={() => onRevoke(grant)}
-            className="rounded-md p-1 text-gray-400 transition-colors hover:bg-white hover:text-rose-600"
+            className="rounded-md p-1 text-muted-foreground/70 transition-colors hover:bg-background hover:text-rose-600"
             title={t('serviceAppsRevokeGrant')}
             aria-label={t('serviceAppsRevokeGrant')}
           >

package/src/features/settings/components/config/provider-advanced-settings-section.tsx

@@ -24,11 +24,11 @@ export function ProviderAdvancedSettingsSection(props: ProviderAdvancedSettingsS
   } = props;
 
   return (
-    <div className="border-t border-gray-100 pt-4">
+    <div className="border-t border-border/70 pt-4">
       <button
         type="button"
         onClick={() => onShowAdvancedChange(!showAdvanced)}
-        className="flex w-full items-center justify-between text-sm text-gray-600 transition-colors hover:text-gray-900"
+        className="flex w-full items-center justify-between text-sm text-muted-foreground transition-colors hover:text-foreground"
       >
         <span className="flex items-center gap-1.5">
           <Settings2 className="h-3.5 w-3.5" />
@@ -41,7 +41,7 @@ export function ProviderAdvancedSettingsSection(props: ProviderAdvancedSettingsS
         <div className="mt-4 space-y-5">
           {supportsWireApi ? (
             <div className="space-y-2">
-              <Label htmlFor="wireApi" className="text-sm font-medium text-gray-900">
+              <Label htmlFor="wireApi" className="text-sm font-medium text-foreground">
                 {wireApiLabel}
               </Label>
               {shouldUseWireApiPills ? (
@@ -68,9 +68,9 @@ export function ProviderAdvancedSettingsSection(props: ProviderAdvancedSettingsS
           ) : null}
 
           <div className="space-y-2">
-            <Label className="text-sm font-medium text-gray-900">{extraHeadersLabel}</Label>
+            <Label className="text-sm font-medium text-foreground">{extraHeadersLabel}</Label>
             <KeyValueEditor value={extraHeaders} onChange={onExtraHeadersChange} />
-            <p className="text-xs text-gray-500">{t('providerExtraHeadersHelpShort')}</p>
+            <p className="text-xs text-muted-foreground">{t('providerExtraHeadersHelpShort')}</p>
           </div>
         </div>
       ) : null}

package/src/features/settings/components/config/provider-auth-section.tsx

@@ -29,13 +29,13 @@ export function ProviderAuthSection(props: ProviderAuthSectionProps) {
 
   return (
     <div className="space-y-2 rounded-xl border border-primary/20 bg-primary-50/50 p-3">
-      <Label className="text-sm font-medium text-gray-900">
+      <Label className="text-sm font-medium text-foreground">
         {providerAuth.displayName || t('providerAuthSectionTitle')}
       </Label>
-      {providerAuthNote ? <p className="text-xs text-gray-600">{providerAuthNote}</p> : null}
+      {providerAuthNote ? <p className="text-xs text-muted-foreground">{providerAuthNote}</p> : null}
       {providerAuthMethodsCount > 1 ? (
         <div className="space-y-2">
-          <Label className="text-xs font-medium text-gray-700">{t('providerAuthMethodLabel')}</Label>
+          <Label className="text-xs font-medium text-foreground">{t('providerAuthMethodLabel')}</Label>
           {shouldUseAuthMethodPills ? (
             <ProviderPillSelector
               value={resolvedAuthMethodId}
@@ -44,7 +44,7 @@ export function ProviderAuthSection(props: ProviderAuthSectionProps) {
             />
           ) : (
             <Select value={resolvedAuthMethodId} onValueChange={onAuthMethodChange}>
-              <SelectTrigger className="h-8 rounded-lg bg-white">
+              <SelectTrigger className="h-8 rounded-lg">
                 <SelectValue placeholder={t('providerAuthMethodPlaceholder')} />
               </SelectTrigger>
               <SelectContent>
@@ -56,7 +56,7 @@ export function ProviderAuthSection(props: ProviderAuthSectionProps) {
               </SelectContent>
             </Select>
           )}
-          {selectedAuthMethodHint ? <p className="text-xs text-gray-500">{selectedAuthMethodHint}</p> : null}
+          {selectedAuthMethodHint ? <p className="text-xs text-muted-foreground">{selectedAuthMethodHint}</p> : null}
         </div>
       ) : null}
       <div className="flex flex-wrap items-center gap-2">
@@ -85,12 +85,12 @@ export function ProviderAuthSection(props: ProviderAuthSectionProps) {
           </Button>
         ) : null}
         {authSessionId ? (
-          <span className="text-xs text-gray-500">
+          <span className="text-xs text-muted-foreground">
             {t('providerAuthSessionLabel')}: {authSessionId.slice(0, 8)}…
           </span>
         ) : null}
       </div>
-      {authStatusMessage ? <p className="text-xs text-gray-600">{authStatusMessage}</p> : null}
+      {authStatusMessage ? <p className="text-xs text-muted-foreground">{authStatusMessage}</p> : null}
     </div>
   );
 }

package/src/features/settings/components/config/provider-form.tsx

@@ -329,8 +329,8 @@ export function ProviderForm({ providerName, onProviderDeleted }: ProviderFormPr
     return (
       <ConfigSplitEmptyPane>
         <div>
-          <h3 className='text-base font-semibold text-gray-900'>{t('providersSelectTitle')}</h3>
-          <p className='mt-2 text-sm text-gray-500'>{t('providersSelectDescription')}</p>
+          <h3 className='text-base font-semibold text-foreground'>{t('providersSelectTitle')}</h3>
+          <p className='mt-2 text-sm text-muted-foreground'>{t('providersSelectDescription')}</p>
         </div>
       </ConfigSplitEmptyPane>
     );
@@ -437,13 +437,13 @@ function ProviderFormDetailPane(props: ProviderFormDetailPaneProps) {
     <ConfigSplitDetailPane>
       <ConfigSplitPaneHeader className='px-6 py-4'>
         <div className='flex items-center justify-between'>
-          <h3 className='truncate text-lg font-semibold text-gray-900'>{providerTitle}</h3>
+          <h3 className='truncate text-lg font-semibold text-foreground'>{providerTitle}</h3>
           <div className='flex items-center gap-3'>
             <button
               type='button'
               onClick={onDeleteProvider}
               disabled={isDeletePending}
-              className='text-gray-400 transition-colors hover:text-red-500'
+              className='text-muted-foreground/70 transition-colors hover:text-red-500'
               title={t('providerDelete')}
             >
               <Trash2 className='h-4 w-4' />
@@ -456,7 +456,7 @@ function ProviderFormDetailPane(props: ProviderFormDetailPaneProps) {
       <form onSubmit={onSubmit} className='flex min-h-0 flex-1 flex-col'>
         <ConfigSplitPaneBody className='space-y-5 px-6 py-5'>
           <div className='space-y-2'>
-            <Label htmlFor='providerDisplayName' className='text-sm font-medium text-gray-900'>
+            <Label htmlFor='providerDisplayName' className='text-sm font-medium text-foreground'>
               {t('providerDisplayName')}
             </Label>
             <Input
@@ -467,11 +467,11 @@ function ProviderFormDetailPane(props: ProviderFormDetailPaneProps) {
               placeholder={context.defaultDisplayName || t('providerDisplayNamePlaceholder')}
               className='rounded-xl'
             />
-            <p className='text-xs text-gray-500'>{t('providerDisplayNameHelpShort')}</p>
+            <p className='text-xs text-muted-foreground'>{t('providerDisplayNameHelpShort')}</p>
           </div>
 
           <div className='space-y-2'>
-            <Label htmlFor='apiKey' className='text-sm font-medium text-gray-900'>
+            <Label htmlFor='apiKey' className='text-sm font-medium text-foreground'>
               {context.apiKeyHint?.label ?? t('apiKey')}
             </Label>
             <MaskedInput
@@ -482,7 +482,7 @@ function ProviderFormDetailPane(props: ProviderFormDetailPaneProps) {
               placeholder={context.apiKeyHint?.placeholder ?? t('enterApiKey')}
               className='rounded-xl'
             />
-            <p className='text-xs text-gray-500'>{t('leaveBlankToKeepUnchanged')}</p>
+            <p className='text-xs text-muted-foreground'>{t('leaveBlankToKeepUnchanged')}</p>
           </div>
 
           <ProviderAuthSection
@@ -503,7 +503,7 @@ function ProviderFormDetailPane(props: ProviderFormDetailPaneProps) {
           />
 
           <div className='space-y-2'>
-            <Label htmlFor='apiBase' className='text-sm font-medium text-gray-900'>
+            <Label htmlFor='apiBase' className='text-sm font-medium text-foreground'>
               {context.apiBaseHint?.label ?? t('apiBase')}
             </Label>
             <Input
@@ -514,7 +514,7 @@ function ProviderFormDetailPane(props: ProviderFormDetailPaneProps) {
               placeholder={context.defaultApiBase || context.apiBaseHint?.placeholder || 'https://api.example.com'}
               className='rounded-xl'
             />
-            <p className='text-xs text-gray-500'>{context.apiBaseHelpText}</p>
+            <p className='text-xs text-muted-foreground'>{context.apiBaseHelpText}</p>
           </div>
 
           <ProviderModelsSection

package/src/features/settings/components/config/provider-models-section.tsx

@@ -49,7 +49,7 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
   return (
     <div className="space-y-2">
       <div className="flex items-center justify-between">
-        <Label className="text-sm font-medium text-gray-900">{t('providerModelsTitle')}</Label>
+        <Label className="text-sm font-medium text-foreground">{t('providerModelsTitle')}</Label>
         {!showModelInput ? (
           <button
             type="button"
@@ -99,8 +99,8 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
       ) : null}
 
       {models.length === 0 ? (
-        <div className="rounded-xl border border-dashed border-gray-200 bg-gray-50 px-4 py-6 text-center">
-          <p className="text-sm text-gray-500">{t('providerModelsEmptyShort')}</p>
+        <div className="rounded-xl border border-dashed border-border bg-muted/60 px-4 py-6 text-center">
+          <p className="text-sm text-muted-foreground">{t('providerModelsEmptyShort')}</p>
           {!showModelInput ? (
             <button
               type="button"
@@ -123,14 +123,14 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
             return (
               <div
                 key={modelName}
-                className="group inline-flex max-w-full items-center gap-1 rounded-full border border-gray-200 bg-white px-3 py-1.5"
+                className="group inline-flex max-w-full items-center gap-1 rounded-full border border-border bg-card px-3 py-1.5"
               >
-                <span className="max-w-[140px] truncate text-sm text-gray-800 sm:max-w-[220px]">{modelName}</span>
+                <span className="max-w-[140px] truncate text-sm text-foreground sm:max-w-[220px]">{modelName}</span>
                 <Popover>
                   <PopoverTrigger asChild>
                     <button
                       type="button"
-                      className="inline-flex h-5 w-5 items-center justify-center rounded-full text-gray-400 opacity-100 transition-opacity hover:bg-gray-100 hover:text-gray-600 md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
+                      className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-accent hover:text-accent-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
                       aria-label={t('providerModelThinkingTitle')}
                       title={t('providerModelThinkingTitle')}
                     >
@@ -138,16 +138,16 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
                     </button>
                   </PopoverTrigger>
                   <PopoverContent className="w-80 space-y-3">
-                    <div className="flex items-center justify-between gap-3 rounded-lg border border-gray-100 bg-gray-50 px-3 py-2">
+                    <div className="flex items-center justify-between gap-3 rounded-lg border border-border bg-muted/60 px-3 py-2">
                       <div className="min-w-0">
-                        <p className="text-xs font-semibold text-gray-800">{t('providerModelVisionTitle')}</p>
-                        <p className="text-xs text-gray-500">{t('providerModelVisionHint')}</p>
+                        <p className="text-xs font-semibold text-foreground">{t('providerModelVisionTitle')}</p>
+                        <p className="text-xs text-muted-foreground">{t('providerModelVisionHint')}</p>
                       </div>
                       <Switch checked={visionEnabled} onCheckedChange={(checked) => onSetModelVision(modelName, checked)} />
                     </div>
                     <div className="space-y-1">
-                      <p className="text-xs font-semibold text-gray-800">{t('providerModelThinkingTitle')}</p>
-                      <p className="text-xs text-gray-500">{t('providerModelThinkingHint')}</p>
+                      <p className="text-xs font-semibold text-foreground">{t('providerModelThinkingTitle')}</p>
+                      <p className="text-xs text-muted-foreground">{t('providerModelThinkingHint')}</p>
                     </div>
                     <div className="flex flex-wrap gap-1.5">
                       {thinkingLevels.map((level) => {
@@ -160,7 +160,7 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
                             className={`rounded-full border px-2.5 py-1 text-xs font-medium transition-colors ${
                               selected
                                 ? 'border-primary bg-primary text-white'
-                                : 'border-gray-200 bg-white text-gray-600 hover:border-primary/40 hover:text-primary'
+                                : 'border-border bg-card text-muted-foreground hover:border-primary/40 hover:bg-accent/70 hover:text-accent-foreground'
                             }`}
                           >
                             {formatThinkingLevelLabel(level)}
@@ -169,7 +169,7 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
                       })}
                     </div>
                     <div className="space-y-1.5">
-                      <Label className="text-xs font-medium text-gray-700">{t('providerModelThinkingDefault')}</Label>
+                      <Label className="text-xs font-medium text-foreground">{t('providerModelThinkingDefault')}</Label>
                       <Select
                         value={defaultThinkingLevel ?? '__none__'}
                         onValueChange={(value) =>
@@ -177,7 +177,7 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
                         }
                         disabled={supportedLevels.length === 0}
                       >
-                        <SelectTrigger className="h-8 rounded-lg bg-white text-xs">
+                        <SelectTrigger className="h-8 rounded-lg text-xs">
                           <SelectValue />
                         </SelectTrigger>
                         <SelectContent>
@@ -190,7 +190,7 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
                         </SelectContent>
                       </Select>
                       {supportedLevels.length === 0 ? (
-                        <p className="text-xs text-gray-500">{t('providerModelThinkingNoSupported')}</p>
+                        <p className="text-xs text-muted-foreground">{t('providerModelThinkingNoSupported')}</p>
                       ) : null}
                     </div>
                   </PopoverContent>
@@ -198,7 +198,7 @@ export function ProviderModelsSection(props: ProviderModelsSectionProps) {
                 <button
                   type="button"
                   onClick={() => onRemoveModel(modelName)}
-                  className="inline-flex h-5 w-5 items-center justify-center rounded-full text-gray-400 opacity-100 transition-opacity hover:bg-gray-100 hover:text-gray-600 md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
+                  className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-accent hover:text-accent-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
                   aria-label={t('remove')}
                 >
                   <X className="h-3 w-3" />

package/src/features/settings/components/config/provider-pill-selector.tsx

@@ -16,7 +16,7 @@ export function ProviderPillSelector(props: ProviderPillSelectorProps) {
             type="button"
             onClick={() => onChange(option.value)}
             aria-pressed={selected}
-            className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${selected ? 'border-primary bg-primary text-white shadow-sm' : 'border-gray-200 bg-white text-gray-700 hover:border-primary/40 hover:text-primary'}`}
+            className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${selected ? 'border-primary bg-primary text-primary-foreground shadow-sm' : 'border-border bg-card text-muted-foreground hover:border-primary/40 hover:bg-accent/70 hover:text-accent-foreground'}`}
           >
             {option.label}
           </button>