@nextclaw/ui 0.14.2 → 0.14.3

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>

package/src/features/settings/pages/providers-config-page.tsx

@@ -133,11 +133,11 @@ export function ProvidersConfigPage() {
                 </Button>
               </PopoverTrigger>
               <PopoverContent className="w-[42rem] max-w-[calc(100vw-2rem)] p-3" align="start">
-                <div className="mb-2 px-1 text-xs font-semibold text-gray-500">{t('providerTemplatePickerTitle')}</div>
+                <div className="mb-2 px-1 text-xs font-semibold text-muted-foreground">{t('providerTemplatePickerTitle')}</div>
                 <div className="grid max-h-[24rem] grid-cols-2 gap-2 overflow-y-auto sm:grid-cols-3">
                   <button
                     type="button"
-                    className="flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-dashed border-gray-300 bg-white px-3 py-2 text-left hover:border-primary/40 hover:bg-gray-50"
+                    className="flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-dashed border-border bg-card px-3 py-2 text-left transition-colors hover:border-primary/40 hover:bg-accent/70"
                     onClick={async () => {
                       try {
                         const result = await createProvider.mutateAsync({ data: { providerType: null } });
@@ -150,8 +150,8 @@ export function ProvidersConfigPage() {
                       }
                     }}
                   >
-                    <LogoBadge name="custom" className="h-8 w-8 rounded-lg border border-gray-200 bg-white" />
-                    <span className="line-clamp-2 min-w-0 text-xs font-semibold leading-4 text-gray-800">
+                    <LogoBadge name="custom" className="h-8 w-8 rounded-lg border border-border bg-background" />
+                    <span className="line-clamp-2 min-w-0 text-xs font-semibold leading-4 text-foreground">
                       {t('providerAddCustom')}
                     </span>
                   </button>
@@ -159,7 +159,7 @@ export function ProvidersConfigPage() {
                     <button
                       key={template.providerType}
                       type="button"
-                      className="flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-gray-200 bg-white px-3 py-2 text-left hover:border-primary/40 hover:bg-gray-50"
+                      className="flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-border bg-card px-3 py-2 text-left transition-colors hover:border-primary/40 hover:bg-accent/70"
                       onClick={async () => {
                         try {
                           const result = await createProvider.mutateAsync({ data: { providerType: template.providerType } });
@@ -175,10 +175,10 @@ export function ProvidersConfigPage() {
                       <LogoBadge
                         name={template.providerType}
                         src={template.logo ? `/logos/${template.logo}` : null}
-                        className="h-8 w-8 rounded-lg border border-gray-200 bg-white"
+                        className="h-8 w-8 rounded-lg border border-border bg-background"
                         imgClassName="h-4 w-4 object-contain"
                       />
-                      <span className="line-clamp-2 min-w-0 text-xs font-semibold leading-4 text-gray-800">
+                      <span className="line-clamp-2 min-w-0 text-xs font-semibold leading-4 text-foreground">
                         {template.displayName || template.providerType}
                       </span>
                     </button>
@@ -188,9 +188,9 @@ export function ProvidersConfigPage() {
             </Popover>
           </ConfigSplitPaneHeader>
 
-          <div className="border-b border-gray-100 px-4 py-3">
+          <div className="border-b border-border/70 px-4 py-3">
             <div className="relative">
-              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-gray-400" />
+              <Search className="pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-muted-foreground/70" />
               <Input
                 value={query}
                 onChange={(event) => setQuery(event.target.value)}
@@ -223,8 +223,8 @@ export function ProvidersConfigPage() {
                   className={cn(
                     'w-full rounded-xl border p-2.5 text-left transition-all',
                     resolvedSelectedProvider === provider.providerId
-                      ? 'border-primary/30 bg-primary-50/40 shadow-sm'
-                      : 'border-gray-200/70 bg-white hover:border-gray-300 hover:bg-gray-50/70',
+                      ? 'border-primary/35 bg-primary-50/45 text-foreground shadow-sm'
+                      : 'border-border bg-card text-muted-foreground hover:border-primary/35 hover:bg-accent/70 hover:text-accent-foreground',
                   )}
                 >
                   <div className="relative min-h-10">
@@ -234,15 +234,15 @@ export function ProvidersConfigPage() {
                         src={template?.logo ? `/logos/${template.logo}` : null}
                         className={cn(
                           'h-10 w-10 rounded-lg border',
-                          isReady ? 'border-primary/30 bg-white' : 'border-gray-200/70 bg-white',
+                          isReady ? 'border-primary/35 bg-background' : 'border-border bg-background',
                         )}
                         imgClassName="h-5 w-5 object-contain"
-                        fallback={<span className="text-sm font-semibold uppercase text-gray-500">{provider.providerId[0]}</span>}
+                        fallback={<span className="text-sm font-semibold uppercase text-muted-foreground">{provider.providerId[0]}</span>}
                       />
                       <div className="min-w-0">
-                        <p className="truncate text-sm font-semibold text-gray-900">{providerLabel}</p>
-                        <p className="truncate font-mono text-[10px] text-gray-400">{provider.providerId}</p>
-                        <p className="line-clamp-1 text-[11px] text-gray-500">
+                        <p className="truncate text-sm font-semibold text-foreground">{providerLabel}</p>
+                        <p className="truncate font-mono text-[10px] text-muted-foreground/65">{provider.providerId}</p>
+                        <p className="line-clamp-1 text-[11px] text-muted-foreground">
                           {description} · {provider.models?.length ?? 0}
                         </p>
                       </div>
@@ -268,7 +268,7 @@ export function ProvidersConfigPage() {
                         <PopoverTrigger asChild>
                           <button
                             type="button"
-                            className="inline-flex h-7 w-7 items-center justify-center rounded-lg text-gray-400 hover:bg-gray-100 hover:text-gray-700"
+                            className="inline-flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground/70 hover:bg-accent hover:text-accent-foreground"
                             onClick={(event) => event.stopPropagation()}
                             title={t('more')}
                           >

package/src/shared/components/config-split-page.tsx

@@ -3,7 +3,7 @@ import { ArrowLeft, type LucideIcon } from "lucide-react";
 import { t } from "@/shared/lib/i18n";
 import { cn } from "@/shared/lib/utils";
 
-const CARD_CLASS = "min-w-0 overflow-hidden rounded-2xl border border-gray-200/70 bg-white shadow-card xl:h-[calc(100vh-180px)] xl:max-h-[860px]";
+const CARD_CLASS = "min-w-0 overflow-hidden rounded-2xl border border-border bg-card text-card-foreground shadow-card xl:h-[calc(100vh-180px)] xl:max-h-[860px]";
 type DivProps = HTMLAttributes<HTMLDivElement>; type SectionProps = HTMLAttributes<HTMLElement>;
 
 function ConfigSplitPane({ className, ...props }: SectionProps) {
@@ -37,7 +37,7 @@ export function ConfigSplitPage({
               <button
                 type="button"
                 onClick={onMobileBack}
-                className="inline-flex items-center gap-2 rounded-full border border-gray-200 bg-white px-3 py-2 text-sm font-medium text-gray-700 transition-colors hover:bg-gray-50 hover:text-gray-900"
+                className="inline-flex items-center gap-2 rounded-full border border-border bg-card px-3 py-2 text-sm font-medium text-muted-foreground transition-colors hover:bg-accent hover:text-accent-foreground"
               >
                 <ArrowLeft className="h-4 w-4" />
                 <span>{mobileListLabel ?? t("backToMain")}</span>
@@ -81,7 +81,7 @@ export function ConfigSplitEmptyPane({ className, ...props }: SectionProps) {
 }
 
 export function ConfigSplitPaneHeader({ className, ...props }: DivProps) {
-  return <div className={cn("shrink-0 border-b border-gray-100", className)} {...props} />;
+  return <div className={cn("shrink-0 border-b border-border/70", className)} {...props} />;
 }
 
 export function ConfigSplitPaneBody({
@@ -102,7 +102,7 @@ export function ConfigSplitPaneBody({
 }
 
 export function ConfigSplitPaneFooter({ className, ...props }: DivProps) {
-  return <div className={cn("shrink-0 border-t border-gray-100", className)} {...props} />;
+  return <div className={cn("shrink-0 border-t border-border/70", className)} {...props} />;
 }
 
 export function ConfigSelectionCard({
@@ -117,8 +117,8 @@ export function ConfigSelectionCard({
       className={cn(
         "w-full rounded-xl border p-2.5 text-left transition-all",
         active
-          ? "border-primary/30 bg-primary-50/40 shadow-sm"
-          : "border-gray-200/70 bg-white hover:border-gray-300 hover:bg-gray-50/70",
+          ? "border-primary/35 bg-primary-50/45 text-foreground shadow-sm"
+          : "border-border bg-card text-muted-foreground hover:border-primary/35 hover:bg-accent/70 hover:text-accent-foreground",
         className,
       )}
       {...props}
@@ -140,16 +140,16 @@ export function ConfigSplitEmptyState({
   return (
     <div
       className={cn(
-        "flex min-h-[220px] flex-col items-center justify-center rounded-xl border border-dashed border-gray-200 bg-gray-50/70 px-4 py-10 text-center",
+        "flex min-h-[220px] flex-col items-center justify-center rounded-xl border border-dashed border-border bg-muted/60 px-4 py-10 text-center",
         className,
       )}
       {...props}
     >
-      <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-white">
-        <Icon className="h-5 w-5 text-gray-300" />
+      <div className="mb-3 flex h-10 w-10 items-center justify-center rounded-lg bg-card">
+        <Icon className="h-5 w-5 text-muted-foreground/45" />
       </div>
-      <p className="text-sm font-medium text-gray-700">{title}</p>
-      {description ? <p className="mt-2 text-xs text-gray-500">{description}</p> : null}
+      <p className="text-sm font-medium text-foreground">{title}</p>
+      {description ? <p className="mt-2 text-xs text-muted-foreground">{description}</p> : null}
     </div>
   );
 }

package/src/shared/components/doc-browser/doc-browser-home-page.tsx

@@ -5,10 +5,10 @@ export function DocBrowserHomePage() {
   return (
     <div className="flex h-full items-center justify-center bg-background px-5 py-6">
       <div className="flex max-w-[260px] flex-col items-center gap-3 text-center">
-        <span className="flex h-12 w-12 items-center justify-center rounded-lg border border-gray-100 bg-gray-50 text-gray-600 shadow-[0_1px_2px_rgba(30,20,10,0.04)]">
+        <span className="flex h-12 w-12 items-center justify-center rounded-lg border border-border bg-muted text-muted-foreground shadow-[0_1px_2px_rgba(30,20,10,0.04)]">
           <Boxes className="h-5 w-5" />
         </span>
-        <span className="text-sm font-medium text-gray-800">{t('docBrowserHomeTitle')}</span>
+        <span className="text-sm font-medium text-foreground">{t('docBrowserHomeTitle')}</span>
       </div>
     </div>
   );