@nextclaw/ui 0.26.3 → 0.26.4

package/src/features/settings/components/config/provider-model-list.tsx

@@ -143,7 +143,7 @@ export function ProviderModelList(props: ProviderModelListProps) {
             return (
               <label
                 key={modelName}
-                className="inline-flex max-w-full cursor-pointer items-center gap-2 rounded-full border border-border/55 bg-muted/45 px-3 py-1.5 hover:bg-muted/70"
+                className="inline-flex max-w-full cursor-pointer items-center gap-2 rounded-full border border-border/55 bg-muted/45 px-3 py-1.5 hover:bg-[var(--interaction-hover)]"
               >
                 <input
                   type="checkbox"
@@ -180,7 +180,7 @@ export function ProviderModelList(props: ProviderModelListProps) {
                 <PopoverTrigger asChild>
                   <button
                     type="button"
-                    className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-muted hover:text-foreground 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-[var(--interaction-hover)] hover:text-foreground md:opacity-0 md:group-hover:opacity-100 md:group-focus-within:opacity-100"
                     aria-label={t("providerModelThinkingTitle")}
                     title={t("providerModelThinkingTitle")}
                   >
@@ -224,8 +224,8 @@ export function ProviderModelList(props: ProviderModelListProps) {
                           }
                           className={`rounded-full border px-2.5 py-1 text-xs font-medium transition-colors ${
                             selected
-                              ? "border-foreground/15 bg-foreground text-background"
-                              : "border-border/55 bg-muted/50 text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground"
+                              ? "border-[var(--interaction-selection-border)] bg-[var(--interaction-selection)] text-foreground"
+                              : "border-border/55 bg-muted/50 text-muted-foreground hover:border-border hover:bg-[var(--interaction-hover)] hover:text-foreground"
                           }`}
                         >
                           {formatThinkingLevelLabel(level)}
@@ -274,7 +274,7 @@ export function ProviderModelList(props: ProviderModelListProps) {
               <button
                 type="button"
                 onClick={() => onRemoveModel(modelName)}
-                className="inline-flex h-5 w-5 items-center justify-center rounded-full text-muted-foreground/70 opacity-100 transition-opacity hover:bg-muted hover:text-foreground 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-[var(--interaction-hover)] hover:text-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-model-suggestions-panel.tsx

@@ -69,7 +69,7 @@ export function ProviderModelSuggestionsPanel(props: ProviderModelSuggestionsPan
         <button
           type='button'
           aria-expanded={expanded}
-          className='flex min-w-0 flex-1 items-center gap-1.5 rounded-lg px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-muted/70 hover:text-foreground'
+          className='flex min-w-0 flex-1 items-center gap-1.5 rounded-lg px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground'
           onClick={() => onExpandedChange(!expanded)}
         >
           <Sparkles className='h-3.5 w-3.5 shrink-0 text-primary' />
@@ -81,7 +81,7 @@ export function ProviderModelSuggestionsPanel(props: ProviderModelSuggestionsPan
         {models.length <= BULK_ADD_LIMIT ? (
           <button
             type='button'
-            className='shrink-0 rounded-lg px-2 py-1.5 text-xs font-medium text-primary transition-colors hover:bg-primary/10'
+            className='shrink-0 rounded-lg px-2 py-1.5 text-xs font-medium text-primary transition-colors hover:bg-[var(--interaction-hover)]'
             onClick={() => addModels(models)}
           >
             {t('providerModelsSuggestionsAddAll')}
@@ -105,7 +105,7 @@ export function ProviderModelSuggestionsPanel(props: ProviderModelSuggestionsPan
             {visibleModels.map((modelName) => (
               <label
                 key={modelName}
-                className='grid min-w-0 cursor-pointer grid-cols-[auto_minmax(0,1fr)] items-center gap-2 rounded-lg px-2 py-1.5 hover:bg-muted/70'
+                className='grid min-w-0 cursor-pointer grid-cols-[auto_minmax(0,1fr)] items-center gap-2 rounded-lg px-2 py-1.5 hover:bg-[var(--interaction-hover)]'
               >
                 <input
                   type='checkbox'
@@ -137,7 +137,7 @@ export function ProviderModelSuggestionsPanel(props: ProviderModelSuggestionsPan
             <button
               type='button'
               disabled={selectedModels.length === 0}
-              className='shrink-0 rounded-md bg-primary/10 px-2 py-1 text-[11px] font-medium text-primary transition-colors hover:bg-primary/15 disabled:cursor-not-allowed disabled:opacity-45'
+              className='shrink-0 rounded-md bg-primary/10 px-2 py-1 text-[11px] font-medium text-primary transition-colors hover:bg-[var(--interaction-hover)] disabled:cursor-not-allowed disabled:opacity-45'
               onClick={() => addModels(selectedModels)}
             >
               {t('providerModelsSuggestionsAddSelected')}

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-foreground/15 bg-foreground text-background' : 'border-border/55 bg-muted/50 text-muted-foreground hover:border-border hover:bg-muted hover:text-foreground'}`}
+            className={`rounded-full border px-3 py-1.5 text-xs font-medium transition-colors ${selected ? 'border-[var(--interaction-selection-border)] bg-[var(--interaction-selection)] text-foreground' : 'border-border/55 bg-muted/50 text-muted-foreground hover:border-border hover:bg-[var(--interaction-hover)] hover:text-foreground'}`}
           >
             {option.label}
           </button>

package/src/features/settings/pages/appearance-settings-page.tsx

@@ -100,8 +100,8 @@ export function AppearanceSettingsPage() {
                     className={cn(
                       'flex min-w-0 items-start gap-3 rounded-lg px-3 py-2.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',
                       selected
-                        ? 'bg-card text-foreground shadow-sm'
-                        : 'text-muted-foreground hover:bg-card/60 hover:text-foreground'
+                        ? 'bg-[var(--interaction-selection)] text-foreground'
+                        : 'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-foreground'
                     )}
                   >
                     <span

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

@@ -156,7 +156,7 @@ export function ProvidersConfigPage() {
                 <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-border/70 bg-muted/20 px-3 py-2 text-left transition-colors hover:border-border hover:bg-muted/45'
+                    className='flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-dashed border-border/70 bg-muted/20 px-3 py-2 text-left transition-colors hover:border-border hover:bg-[var(--interaction-hover)]'
                     onClick={async () => {
                       try {
                         const result = await createProvider.mutateAsync({
@@ -183,7 +183,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-border/55 bg-muted/15 px-3 py-2 text-left transition-colors hover:border-border/80 hover:bg-muted/40'
+                      className='flex min-h-20 w-full flex-col items-start gap-2 rounded-lg border border-border/55 bg-muted/15 px-3 py-2 text-left transition-colors hover:border-border/80 hover:bg-[var(--interaction-hover)]'
                       onClick={async () => {
                         try {
                           const result = await createProvider.mutateAsync({
@@ -254,8 +254,8 @@ export function ProvidersConfigPage() {
                   className={cn(
                     'group w-full rounded-xl p-2.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',
                     resolvedSelectedProvider === provider.providerId
-                      ? 'bg-background/95 text-foreground shadow-sm'
-                      : 'bg-transparent text-muted-foreground hover:bg-background/65 hover:text-foreground'
+                      ? 'bg-[var(--interaction-selection)] text-foreground'
+                      : 'bg-transparent text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-foreground'
                   )}
                 >
                   <div className='relative min-h-10'>
@@ -300,7 +300,7 @@ export function ProvidersConfigPage() {
                         <PopoverTrigger asChild>
                           <button
                             type='button'
-                            className='inline-flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground/70 hover:bg-muted hover:text-foreground'
+                            className='inline-flex h-7 w-7 items-center justify-center rounded-lg text-muted-foreground/70 hover:bg-[var(--interaction-hover)] hover:text-foreground'
                             onClick={(event) => event.stopPropagation()}
                             title={t('more')}
                           >
@@ -310,7 +310,7 @@ export function ProvidersConfigPage() {
                         <PopoverContent className='w-40 p-1' align='end' onClick={(event) => event.stopPropagation()}>
                           <button
                             type='button'
-                            className='flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm text-red-600 hover:bg-red-50'
+                            className='flex w-full items-center gap-2 rounded-md px-2 py-2 text-sm text-red-600 hover:bg-destructive/10'
                             onClick={() => setProviderToDelete(provider.providerId)}
                           >
                             <Trash2 className='h-4 w-4' />

package/src/features/side-dock/components/side-dock.tsx

@@ -60,9 +60,9 @@ function SideDockButton({
             onClick={() => onOpen(item)}
             className={cn(
               'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors',
-              'hover:bg-primary/10 hover:text-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
+              'hover:bg-[var(--interaction-hover)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
               active
-                ? 'bg-primary/10 text-primary'
+                ? 'bg-[var(--interaction-selection)] text-foreground hover:bg-[var(--interaction-selection)]'
                 : 'bg-transparent',
             )}
           >
@@ -78,7 +78,7 @@ function SideDockButton({
               event.stopPropagation();
               onUnpin(item);
             }}
-            className="absolute -right-1 -top-1 hidden h-4 w-4 items-center justify-center rounded-full bg-background text-muted-foreground shadow-sm ring-1 ring-border/70 transition-colors hover:bg-muted hover:text-foreground group-hover:flex focus-visible:flex focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+            className="absolute -right-1 -top-1 hidden h-4 w-4 items-center justify-center rounded-full bg-background text-muted-foreground shadow-sm ring-1 ring-border/70 transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground group-hover:flex focus-visible:flex focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           >
             <X className="h-3 w-3" aria-hidden="true" />
           </button>
@@ -109,7 +109,7 @@ function SideDockActionButton({
           onClick={onClick}
           className={cn(
             'flex h-10 w-10 shrink-0 items-center justify-center rounded-lg text-muted-foreground transition-colors',
-            'hover:bg-primary/10 hover:text-primary focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
+            'hover:bg-[var(--interaction-hover)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
           )}
         >
           <Icon className="h-5 w-5" aria-hidden="true" />

package/src/index.css

@@ -140,6 +140,10 @@
     box-shadow: var(--shadow-card);
   }
 
+  .shadow-floating {
+    box-shadow: var(--shadow-popover);
+  }
+
   .shadow-card-hover {
     box-shadow: var(--shadow-card-hover);
   }

package/src/platforms/desktop/components/desktop-window-chrome.tsx

@@ -90,7 +90,7 @@ function DesktopWindowControlButton({
       className={
         control.variant === "danger"
           ? "desktop-window-no-drag flex h-10 w-[46px] items-center justify-center text-gray-700 transition-colors hover:bg-red-500 hover:text-white"
-          : "desktop-window-no-drag flex h-10 w-[46px] items-center justify-center text-gray-700 transition-colors hover:bg-black/10"
+          : "desktop-window-no-drag flex h-10 w-[46px] items-center justify-center text-gray-700 transition-colors hover:bg-[var(--interaction-hover)]"
       }
       onClick={() => {
         void window.nextclawDesktop?.controlWindow?.(control.action);

package/src/platforms/mobile/components/mobile-bottom-nav.tsx

@@ -40,8 +40,8 @@ export function MobileBottomNav() {
                 className={cn(
                   "group flex min-h-12 flex-col items-center justify-center gap-1 rounded-xl px-0.5 py-1 text-[11px] font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border",
                   active
-                    ? "bg-muted text-foreground"
-                    : "text-muted-foreground hover:bg-muted hover:text-foreground",
+                    ? "bg-[var(--interaction-selection)] text-foreground"
+                    : "text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-foreground",
                 )}
               >
                 <span className="relative">
@@ -64,7 +64,7 @@ export function MobileBottomNav() {
           <button
             type="button"
             onClick={() => openApps(docBrowser)}
-            className="group flex min-h-12 w-full flex-col items-center justify-center gap-1 rounded-xl px-0.5 py-1 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
+            className="group flex min-h-12 w-full flex-col items-center justify-center gap-1 rounded-xl px-0.5 py-1 text-[11px] font-medium text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border"
           >
             <Boxes className="h-5 w-5 text-muted-foreground" />
             <span className="max-w-full truncate">{t("appsTitle")}</span>

package/src/shared/components/common/brand-header.tsx

@@ -181,7 +181,7 @@ function RuntimeUpdateReleaseNotesHover({
           external
           icon={null}
           aria-label={label}
-          className="whitespace-nowrap rounded-md border bg-popover px-3 py-1.5 text-left text-xs font-medium text-popover-foreground shadow-md outline-none transition-colors hover:bg-gray-100 focus-visible:ring-2 focus-visible:ring-gray-300"
+          className="whitespace-nowrap rounded-md border bg-popover px-3 py-1.5 text-left text-xs font-medium text-popover-foreground shadow-md outline-none transition-colors hover:bg-[var(--interaction-hover)] focus-visible:ring-2 focus-visible:ring-gray-300"
         >
           {label}
         </NavigationLink>

package/src/shared/components/common/searchable-model-input.tsx

@@ -152,7 +152,7 @@ export function SearchableModelInput({
                 onChange(value.trim());
                 closeMenu();
               }}
-              className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-gray-50"
+              className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-[var(--interaction-hover)]"
             >
               <Check className="h-4 w-4 text-transparent" />
               <span className="truncate text-gray-700">
@@ -170,7 +170,7 @@ export function SearchableModelInput({
                 onChange(option);
                 closeMenu();
               }}
-              className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-gray-50"
+              className="flex w-full items-center gap-2 px-3 py-2 text-left text-sm hover:bg-[var(--interaction-hover)]"
             >
               <Check className={cn('h-4 w-4', option === value.trim() ? 'text-primary' : 'text-transparent')} />
               <span className="truncate text-gray-700">{option}</span>

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

@@ -47,7 +47,7 @@ export function ConfigSplitPage({
               <button
                 type='button'
                 onClick={onMobileBack}
-                className='inline-flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-muted hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40'
+                className='inline-flex items-center gap-2 rounded-lg px-2 py-1.5 text-sm font-medium text-muted-foreground transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40'
               >
                 <ArrowLeft className='h-4 w-4' />
                 <span>{mobileListLabel ?? t('backToMain')}</span>
@@ -122,8 +122,8 @@ export function ConfigSelectionCard({
       className={cn(
         'w-full rounded-xl p-2.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40',
         active
-          ? 'bg-background/95 text-foreground shadow-sm'
-          : 'bg-transparent text-muted-foreground hover:bg-background/65 hover:text-foreground',
+          ? 'bg-[var(--interaction-selection)] text-foreground'
+          : 'bg-transparent text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-foreground',
         className
       )}
       {...props}

package/src/shared/components/doc-browser/doc-browser-tab-strip.tsx

@@ -130,8 +130,8 @@ export function DocBrowserTabStrip({
       tabsClassName="items-center gap-0.5"
       actionsClassName="h-full max-md:h-11 max-md:w-full items-center gap-0.5"
       tabBaseClassName="inline-flex cursor-pointer items-center gap-0.5 h-7 max-md:min-h-11 px-2 rounded-md text-xs max-w-[220px] shrink-0 transition-colors"
-      activeTabClassName="bg-muted/80 text-foreground"
-      inactiveTabClassName="text-muted-foreground hover:bg-muted/45 hover:text-foreground"
+      activeTabClassName="bg-[var(--interaction-selection)] text-foreground"
+      inactiveTabClassName="text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-foreground"
       labelClassName="px-0.5 text-xs font-normal"
 
     />

package/src/shared/components/path-picker/server-path-picker-locations.tsx

@@ -112,7 +112,7 @@ export function ServerPathPickerLocations({
         type="button"
         className={cn(
           'flex w-full items-center gap-2 rounded-md px-2 py-2 text-left text-sm transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border',
-          active ? 'bg-primary/12 text-primary' : 'text-foreground hover:bg-[var(--interaction-hover)]',
+          active ? 'bg-[var(--interaction-selection)] text-foreground' : 'text-foreground hover:bg-[var(--interaction-hover)]',
         )}
         aria-current={active ? 'location' : undefined}
         onClick={() => onNavigate(item.path)}

package/src/shared/components/ui/button.tsx

@@ -7,13 +7,13 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-primary text-primary-foreground hover:bg-primary-600 active:bg-primary-700 shadow-sm',
+        default: 'bg-primary text-primary-foreground hover:bg-[hsl(var(--primary-hover))] active:bg-[hsl(var(--primary-active))] shadow-sm',
         destructive: 'bg-destructive text-destructive-foreground hover:bg-destructive/90',
         outline: 'border border-border bg-card text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground',
         secondary: 'bg-muted text-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground',
         ghost: 'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground',
         link: 'text-primary underline-offset-4 hover:underline',
-        primary: 'bg-primary text-primary-foreground hover:bg-primary-600 active:bg-primary-700 shadow-sm',
+        primary: 'bg-primary text-primary-foreground hover:bg-[hsl(var(--primary-hover))] active:bg-[hsl(var(--primary-active))] shadow-sm',
         subtle: 'bg-muted text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground',
         'primary-outline': 'border border-primary/30 text-primary hover:bg-primary hover:text-primary-foreground'
       },

package/src/shared/components/ui/card.tsx

@@ -17,7 +17,7 @@ const Card = React.forwardRef<
         ? 'border-border shadow-card'
         : 'border-border/75 shadow-none',
       hover && surface === 'raised' && 'hover:border-primary/25 hover:shadow-card-hover',
-      hover && surface === 'flat' && 'hover:bg-muted/40',
+      hover && surface === 'flat' && 'hover:bg-[var(--interaction-hover)]',
       className
     )}
     {...props}

package/src/shared/components/ui/context-menu/context-menu-items.tsx

@@ -2,11 +2,11 @@ import { useCallback, useEffect, useRef, useState, type ReactNode } from "react"
 import * as Popover from "@radix-ui/react-popover";
 import { ChevronRight } from "lucide-react";
 import { cn } from "@/shared/lib/utils";
-import { ACTION_FEEDBACK, ACTION_MENU_ITEM_CLASS } from '../actions/action-feedback';
+import { ACTION_FEEDBACK, ACTION_MENU_ITEM_CLASS } from '@/shared/components/ui/actions/action-feedback';
 import type { ContextMenuGroup, ContextMenuItem } from "./context-menu";
 
 export const CONTEXT_MENU_SURFACE_CLASS =
-  "w-max min-w-52 max-w-[min(18rem,calc(100vw-16px))] overflow-y-auto rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-[0_18px_48px_-20px_rgba(15,23,42,0.42)] outline-none";
+  "w-max min-w-52 max-w-[min(18rem,calc(100vw-16px))] overflow-y-auto rounded-xl border border-border/40 bg-popover p-1 text-popover-foreground shadow-floating outline-none";
 
 function MenuItemContent({ item }: { item: ContextMenuItem }) {
   return <>
@@ -152,7 +152,7 @@ export function ContextMenuItems({ groups, onClose }: {
     }}
   >
     {groups.filter((group) => group.items.length).map((group, index) => <div key={group.key} role="group">
-      {index > 0 ? <div className="my-1 h-px bg-border" /> : null}
+      {index > 0 ? <div className="mx-2 my-1 h-px bg-border/50" /> : null}
       {group.items.map((item) => {
         const className = cn(
           ACTION_MENU_ITEM_CLASS,

package/src/shared/components/ui/input.tsx

@@ -1,16 +1,20 @@
 import * as React from 'react';
 import { cn } from '@/shared/lib/utils';
 
-export type InputProps = React.InputHTMLAttributes<HTMLInputElement>;
+export type InputProps = React.InputHTMLAttributes<HTMLInputElement> & {
+  density?: 'default' | 'compact';
+};
 
 const Input = React.forwardRef<HTMLInputElement, InputProps>(
-  ({ className, type, ...props }, ref) => {
+  ({ className, density = 'default', type, ...props }, ref) => {
     return (
       <input
         type={type}
         className={cn(
           'flex h-9 w-full rounded-xl border border-border/75 bg-card px-3.5 py-2 text-sm text-foreground file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground/55 placeholder:font-normal transition-colors focus:outline-none focus:ring-0 disabled:cursor-not-allowed disabled:opacity-50',
-          'max-md:min-h-[var(--control-touch-size)] max-md:text-base',
+          density === 'default'
+            ? 'max-md:min-h-[var(--control-touch-size)] max-md:text-base'
+            : 'text-[13px] max-md:min-h-0 max-md:text-[13px]',
           className
         )}
         ref={ref}

package/src/shared/components/ui/overlays/sheet.tsx

@@ -69,7 +69,7 @@ const SheetContent = React.forwardRef<
       }}
     >
       {children}
-      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-lg p-1.5 text-muted-foreground opacity-75 transition-colors hover:bg-muted hover:text-foreground hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:pointer-events-none">
+      <SheetPrimitive.Close className="absolute right-4 top-4 rounded-lg p-1.5 text-muted-foreground opacity-75 transition-colors hover:bg-[var(--interaction-hover)] hover:text-foreground hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:pointer-events-none">
         <X className="h-4 w-4" />
         <span className="sr-only">{closeLabel}</span>
       </SheetPrimitive.Close>

package/src/shared/components/ui/popover.tsx

@@ -31,7 +31,7 @@ const PopoverContent = React.forwardRef<
       align={align}
       collisionPadding={collisionPadding}
       className={cn(
-        'z-[var(--z-popover,10100)] w-72 overflow-x-hidden overflow-y-auto rounded-2xl border border-border bg-popover p-4 text-popover-foreground shadow-lg animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-[var(--z-popover,10100)] w-72 overflow-x-hidden overflow-y-auto rounded-xl border border-border/40 bg-popover p-4 text-popover-foreground shadow-floating animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         className,
         variant === 'menu' && CONTEXT_MENU_SURFACE_CLASS
       )}

package/src/shared/components/ui/select.tsx

@@ -80,7 +80,7 @@ const SelectContent = React.forwardRef<
             ref={ref}
             data-theme-overlay="select"
             className={cn(
-                "relative z-[var(--z-popover,10100)] flex max-h-96 min-w-[8rem] flex-col overflow-hidden rounded-md border border-border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+                "relative z-[var(--z-popover,10100)] flex max-h-96 min-w-[8rem] flex-col overflow-hidden rounded-xl border border-border/40 bg-popover text-popover-foreground shadow-floating data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
                 position === "popper" &&
                 "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
                 className
@@ -121,7 +121,7 @@ const SelectItem = React.forwardRef<
     <SelectPrimitive.Item
         ref={ref}
         className={cn(
-            "relative flex max-md:min-h-[var(--control-touch-size)] w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-[var(--interaction-hover)]",
+            "relative flex max-md:min-h-[var(--control-touch-size)] w-full cursor-default select-none items-center rounded-lg py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-[var(--interaction-hover)] focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 hover:bg-[var(--interaction-hover)]",
             className
         )}
         {...props}

package/src/shared/components/ui/tab-strip/compact-tab-strip.tsx

@@ -236,9 +236,9 @@ function CompactTabItem({
           "flex max-w-[180px] cursor-pointer items-center gap-1.5 border-r border-gray-200/70 border-b-2 px-2.5 py-2 transition-colors",
         "group relative",
         tab.active
-          ? (activeTabClassName ?? "border-b-primary bg-white text-gray-900")
+          ? (activeTabClassName ?? "border-b-primary bg-[var(--interaction-selection)] text-foreground")
           : (inactiveTabClassName ??
-            "border-b-transparent bg-gray-50/85 text-gray-500 hover:bg-gray-100"),
+            "border-b-transparent bg-transparent text-muted-foreground hover:bg-[var(--interaction-hover)]"),
       )}
     >
       <CompactTabLabelButton tab={tab} labelClassName={labelClassName} />
@@ -287,7 +287,7 @@ export function CompactTabStrip({
     >
       <div
         className={cn(
-          "min-w-0 flex-1 overflow-x-auto overflow-y-hidden",
+          "flex min-w-0 flex-1 items-stretch overflow-x-auto overflow-y-hidden",
           scrollClassName,
         )}
         onPointerDown={onScrollPointerDown}

package/src/shared/components/ui/tabs.tsx

@@ -89,7 +89,7 @@ export function TabsTrigger({ value, children, className }: TabsTriggerProps) {
       className={cn(
         'inline-flex max-md:min-h-[var(--control-touch-size)] items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-[13px] font-medium transition-all duration-fast focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-border disabled:pointer-events-none disabled:opacity-50',
         isActive
-          ? 'bg-card text-foreground shadow-sm'
+          ? 'bg-[var(--interaction-selection)] text-foreground'
           : 'text-muted-foreground hover:bg-[var(--interaction-hover)] hover:text-accent-foreground',
         className
       )}