phase 6b: strengthen contrast and interaction states

apps/web/src/components/settings/SettingsNav.jsx

@@ -26,7 +26,7 @@ export function SettingsNav({ value, onChange }) {
             key={id}
             type="button"
             onClick={() => onChange(id)}
-            className={`flex w-full items-center rounded-lg px-3 py-2.5 text-left text-sm font-medium transition-colors ${value === id ? 'bg-accent text-accent-foreground' : 'text-muted-foreground hover:bg-muted hover:text-foreground'}`}
+            className={`flex w-full items-center rounded-lg px-3 py-2.5 text-left text-sm font-medium transition-colors ${value === id ? 'bg-accent text-accent-foreground shadow-[inset_3px_0_0_var(--ui-primary)]' : 'text-muted-foreground hover:bg-muted/80 hover:text-foreground'}`}
           >
             {label}
           </button>

apps/web/src/components/ui/alert.jsx

@@ -4,9 +4,9 @@ import { cn } from '@/lib/utils';
 const alertVariants = cva('relative w-full rounded-md border p-3.5 text-sm', {
   variants: {
     variant: {
-      default: 'bg-card text-card-foreground',
-      destructive: 'border-destructive/25 bg-destructive/5 text-destructive',
-      success: 'border-[#badfce] bg-[#eff8f4] text-[#125a42]'
+      default: 'border-border bg-card text-card-foreground shadow-[0_1px_1px_rgba(23,33,30,0.03)]',
+      destructive: 'border-[var(--ui-danger-border)] bg-[var(--ui-danger-soft)] text-destructive',
+      success: 'border-[var(--ui-success-border)] bg-[var(--ui-success-soft)] text-[var(--ui-success)]'
     }
   },
   defaultVariants: { variant: 'default' }
@@ -19,6 +19,6 @@ function AlertTitle({ className, ...props }) {
   return <h5 className={cn('mb-1 font-semibold leading-none', className)} {...props} />;
 }
 function AlertDescription({ className, ...props }) {
-  return <div className={cn('text-sm leading-5 opacity-90', className)} {...props} />;
+  return <div className={cn('text-sm leading-5', className)} {...props} />;
 }
 export { Alert, AlertTitle, AlertDescription };

apps/web/src/components/ui/badge.jsx

@@ -3,15 +3,15 @@ import { cva } from 'class-variance-authority';
 import { cn } from '@/lib/utils';
 
 const badgeVariants = cva(
-  'inline-flex w-fit items-center gap-1 rounded-md border px-2 py-0.5 text-[11px] font-semibold leading-5',
+  'inline-flex w-fit items-center gap-1 rounded-md border px-2 py-0.5 text-[11px] font-semibold leading-5 shadow-[0_1px_0_rgba(23,33,30,0.03)]',
   {
     variants: {
       variant: {
-        default: 'border-transparent bg-primary text-primary-foreground',
-        secondary: 'border-transparent bg-secondary text-secondary-foreground',
-        outline: 'bg-card text-foreground',
-        destructive: 'border-transparent bg-destructive/10 text-destructive',
-        success: 'border-transparent bg-[#e6f4ee] text-[#126044]'
+        default: 'border-primary bg-primary text-primary-foreground',
+        secondary: 'border-border bg-secondary text-secondary-foreground',
+        outline: 'border-border bg-card text-foreground',
+        destructive: 'border-[var(--ui-danger-border)] bg-[var(--ui-danger-soft)] text-destructive',
+        success: 'border-[var(--ui-success-border)] bg-[var(--ui-success-soft)] text-[var(--ui-success)]'
       }
     },
     defaultVariants: { variant: 'secondary' }

apps/web/src/components/ui/button.jsx

@@ -8,10 +8,10 @@ const buttonVariants = cva(
   {
     variants: {
       variant: {
-        default: 'bg-primary px-4 text-primary-foreground hover:bg-primary/92',
-        secondary: 'bg-secondary px-4 text-secondary-foreground hover:bg-secondary/75',
-        outline: 'border bg-card px-4 text-foreground hover:bg-muted',
-        ghost: 'px-3 text-foreground hover:bg-muted',
+        default: 'bg-primary px-4 text-primary-foreground shadow-[0_1px_1px_rgba(23,33,30,0.12)] hover:bg-primary/92',
+        secondary: 'border border-transparent bg-secondary px-4 text-secondary-foreground hover:border-border hover:bg-secondary/80',
+        outline: 'border border-input bg-card px-4 text-foreground shadow-[0_1px_1px_rgba(23,33,30,0.03)] hover:border-ring/70 hover:bg-muted',
+        ghost: 'px-3 text-foreground hover:bg-accent hover:text-accent-foreground',
         destructive: 'bg-destructive px-4 text-white hover:bg-destructive/90',
         link: 'px-1 text-primary underline-offset-4 hover:underline'
       },

apps/web/src/components/ui/card.jsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { cn } from '@/lib/utils';
 
 function Card({ className, ...props }) {
-  return <section className={cn('rounded-lg border bg-card text-card-foreground', className)} {...props} />;
+  return <section className={cn('rounded-xl border bg-card text-card-foreground shadow-[0_1px_2px_rgba(23,33,30,0.04)]', className)} {...props} />;
 }
 function CardHeader({ className, ...props }) {
   return <div className={cn('flex flex-col gap-1.5 p-5 pb-3', className)} {...props} />;

apps/web/src/components/ui/input-group.jsx

@@ -15,7 +15,7 @@ function InputGroup({
       data-slot="input-group"
       role="group"
       className={cn(
-        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input transition-colors outline-none in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/50 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
+        "group/input-group relative flex h-8 w-full min-w-0 items-center rounded-lg border border-input bg-card shadow-[0_1px_1px_rgba(23,33,30,0.03)] transition-[border-color,box-shadow,background-color] outline-none hover:border-ring/70 in-data-[slot=combobox-content]:focus-within:border-inherit in-data-[slot=combobox-content]:focus-within:ring-0 has-disabled:bg-input/50 has-disabled:opacity-50 has-[[data-slot=input-group-control]:focus-visible]:border-ring has-[[data-slot=input-group-control]:focus-visible]:ring-3 has-[[data-slot=input-group-control]:focus-visible]:ring-ring/25 has-[[data-slot][aria-invalid=true]]:border-destructive has-[[data-slot][aria-invalid=true]]:ring-3 has-[[data-slot][aria-invalid=true]]:ring-destructive/20 has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>textarea]:h-auto dark:bg-input/30 dark:has-disabled:bg-input/80 dark:has-[[data-slot][aria-invalid=true]]:ring-destructive/40 has-[>[data-align=block-end]]:[&>input]:pt-3 has-[>[data-align=block-start]]:[&>input]:pb-3 has-[>[data-align=inline-end]]:[&>input]:pr-1.5 has-[>[data-align=inline-start]]:[&>input]:pl-1.5",
         className
       )}
       {...props}

apps/web/src/components/ui/input.jsx

@@ -7,7 +7,7 @@ const Input = React.forwardRef(function Input({ className, type = 'text', ...pro
       ref={ref}
       type={type}
       className={cn(
-        'flex h-10 w-full rounded-md border border-input bg-card px-3 py-2 text-sm text-foreground outline-none transition-shadow placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/15 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-70',
+        'flex h-10 w-full rounded-md border border-input bg-card px-3 py-2 text-sm text-foreground shadow-[0_1px_1px_rgba(23,33,30,0.03)] outline-none transition-[border-color,box-shadow,background-color] placeholder:text-muted-foreground hover:border-ring/70 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground disabled:opacity-80',
         className
       )}
       {...props}

apps/web/src/components/ui/select.jsx

@@ -39,7 +39,7 @@ function SelectTrigger({
       data-slot="select-trigger"
       data-size={size}
       className={cn(
-        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap transition-colors outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "flex w-fit items-center justify-between gap-1.5 rounded-lg border border-input bg-card py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-[0_1px_1px_rgba(23,33,30,0.03)] transition-[border-color,box-shadow,background-color] outline-none select-none hover:border-ring/70 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-80 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-8 data-[size=sm]:h-7 data-[size=sm]:rounded-[min(var(--radius-md),10px)] *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className
       )}
       {...props}
@@ -107,7 +107,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1 pr-8 pl-1.5 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "relative flex w-full cursor-default items-center gap-1.5 rounded-md py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[state=checked]:font-semibold data-[state=checked]:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className
       )}
       {...props}

apps/web/src/components/ui/switch.jsx

@@ -7,12 +7,12 @@ const Switch = React.forwardRef(function Switch({ className, ...props }, ref) {
     <SwitchPrimitive.Root
       ref={ref}
       className={cn(
-        'peer inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full border border-transparent bg-muted transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary',
+        'peer inline-flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full border border-input bg-card shadow-inner transition-[background-color,border-color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 data-[state=checked]:border-primary data-[state=checked]:bg-primary',
         className
       )}
       {...props}
     >
-      <SwitchPrimitive.Thumb className="pointer-events-none block size-5 translate-x-0 rounded-full bg-card shadow-sm transition-transform data-[state=checked]:translate-x-4" />
+      <SwitchPrimitive.Thumb className="pointer-events-none block size-5 translate-x-0 rounded-full bg-foreground/75 shadow-sm transition-[transform,background-color] data-[state=checked]:translate-x-4 data-[state=checked]:bg-primary-foreground" />
     </SwitchPrimitive.Root>
   );
 });

apps/web/src/components/ui/table.jsx

@@ -9,16 +9,16 @@ const Table = React.forwardRef(function Table({ className, ...props }, ref) {
   );
 });
 const TableHeader = React.forwardRef(function TableHeader({ className, ...props }, ref) {
-  return <thead ref={ref} className={cn('[&_tr]:border-b', className)} {...props} />;
+  return <thead ref={ref} className={cn('bg-muted/55 [&_tr]:border-b', className)} {...props} />;
 });
 const TableBody = React.forwardRef(function TableBody({ className, ...props }, ref) {
   return <tbody ref={ref} className={cn('[&_tr:last-child]:border-0', className)} {...props} />;
 });
 const TableRow = React.forwardRef(function TableRow({ className, ...props }, ref) {
-  return <tr ref={ref} className={cn('border-b transition-colors hover:bg-muted/45', className)} {...props} />;
+  return <tr ref={ref} className={cn('border-b transition-colors hover:bg-accent/45', className)} {...props} />;
 });
 const TableHead = React.forwardRef(function TableHead({ className, ...props }, ref) {
-  return <th ref={ref} className={cn('h-10 px-3 text-left align-middle text-xs font-medium text-muted-foreground', className)} {...props} />;
+  return <th ref={ref} className={cn('h-10 px-3 text-left align-middle text-xs font-semibold text-foreground/70', className)} {...props} />;
 });
 const TableCell = React.forwardRef(function TableCell({ className, ...props }, ref) {
   return <td ref={ref} className={cn('px-3 py-3 align-middle', className)} {...props} />;

apps/web/src/components/ui/textarea.jsx

@@ -9,7 +9,7 @@ function Textarea({
     <textarea
       data-slot="textarea"
       className={cn(
-        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-transparent px-2.5 py-2 text-base transition-colors outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:bg-input/50 disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
+        "flex field-sizing-content min-h-16 w-full rounded-lg border border-input bg-card px-2.5 py-2 text-base shadow-[0_1px_1px_rgba(23,33,30,0.03)] transition-[border-color,box-shadow,background-color] outline-none placeholder:text-muted-foreground hover:border-ring/70 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/25 disabled:cursor-not-allowed disabled:bg-muted disabled:text-muted-foreground disabled:opacity-80 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40",
         className
       )}
       {...props}

apps/web/src/components/ui/toggle.jsx

@@ -4,12 +4,12 @@ import { cva } from "class-variance-authority"
 import { cn } from "@/lib/utils"
 
 const toggleVariants = cva(
-  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-muted data-[state=on]:bg-muted [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg border border-transparent text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/35 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 data-[state=on]:border-primary/55 data-[state=on]:bg-accent data-[state=on]:font-semibold data-[state=on]:text-accent-foreground data-[state=on]:shadow-[0_1px_1px_rgba(23,33,30,0.06)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
   {
     variants: {
       variant: {
         default: "bg-transparent",
-        outline: "border border-input bg-transparent hover:bg-muted",
+        outline: "border border-input bg-card hover:border-ring/70 hover:bg-muted",
       },
       size: {
         default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",

apps/web/src/styles/ui.css

@@ -37,33 +37,38 @@
 }
 
 :root {
-  --ui-background: #f7f6f2;
+  --ui-background: #f4f4f0;
   --ui-foreground: #17211e;
   --ui-card: #ffffff;
   --ui-card-foreground: #17211e;
   --ui-popover: #ffffff;
   --ui-popover-foreground: #17211e;
   --ui-primary: #146b5a;
   --ui-primary-foreground: #ffffff;
-  --ui-secondary: #edf3f0;
+  --ui-secondary: #e8f0ec;
   --ui-secondary-foreground: #25483f;
-  --ui-muted: #f1f3f1;
-  --ui-muted-foreground: #67736f;
-  --ui-accent: #e6f0ec;
+  --ui-muted: #ecefeb;
+  --ui-muted-foreground: #56625d;
+  --ui-accent: #dcebe5;
   --ui-accent-foreground: #0d4b3f;
   --ui-destructive: #b42318;
-  --ui-border: #dce3df;
-  --ui-input: #d5ded9;
-  --ui-ring: #2b7a69;
+  --ui-border: #b9c4be;
+  --ui-input: #87978f;
+  --ui-ring: #1f6d5d;
   --ui-sidebar: #0b3f35;
   --ui-sidebar-foreground: #edf6f3;
   --ui-sidebar-primary: #d2b878;
   --ui-sidebar-accent: #15594a;
   --ui-sidebar-accent-foreground: #ffffff;
-  --ui-sidebar-border: rgba(255,255,255,.12);
+  --ui-sidebar-border: rgba(255,255,255,.18);
   --ui-chart-1: #146b5a;
   --ui-chart-2: #c05b4e;
   --ui-chart-3: #b58a42;
+  --ui-success: #0f5a41;
+  --ui-success-soft: #e3f2eb;
+  --ui-success-border: #9bcbb7;
+  --ui-danger-soft: #fbe9e7;
+  --ui-danger-border: #efb5ae;
   --ui-radius: .625rem;
 }
 
@@ -75,7 +80,7 @@
   font-feature-settings: "tnum" 1, "ss01" 1;
 }
 
-.dashboard-shell * {
+:where(.dashboard-shell *) {
   border-color: var(--ui-border);
 }