WIP - style: flatten light-theme surfaces and unify elevation

src/components/dashboard/ComponentsEcosystemCard.tsx

@@ -47,7 +47,7 @@ export function ComponentsEcosystemCard({
       : UNAVAILABLE;
 
   return (
-    <div className="flex h-full flex-col gap-4 rounded-lg bg-card px-5 py-4 shadow-xs ring-1 ring-foreground/10">
+    <div className="flex h-full flex-col gap-4 rounded-lg bg-card px-5 py-4 elevation-xs ring-1 ring-foreground/10">
       <h2 className="font-heading text-sm font-semibold leading-5 text-secondary-foreground">
         {intl.formatMessage({ id: "dashboard.home.system.components" })}
       </h2>

src/components/dashboard/MiniCard.tsx

@@ -30,7 +30,7 @@ export function MiniCard({ id, status, className }: MiniCardProps) {
       type="button"
       onClick={() => navigate(viewHref(meta.view))}
       className={cn(
-        "flex w-full flex-col gap-2 rounded-lg bg-card px-4 py-3 text-left text-sm ring-1 ring-foreground/10 shadow-xs",
+        "flex w-full flex-col gap-2 rounded-lg bg-card px-4 py-3 text-left text-sm ring-1 ring-foreground/10 elevation-xs",
         "transition-colors hover:bg-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
         className,
       )}

src/components/dashboard/SystemStatsCard.tsx

@@ -20,7 +20,7 @@ export function SystemStatsCard({ stats, loading }: SystemStatsCardProps) {
   const intl = useIntl();
 
   return (
-    <div className="rounded-lg bg-card px-5 py-4 shadow-xs ring-1 ring-foreground/10">
+    <div className="rounded-lg bg-card px-5 py-4 elevation-xs ring-1 ring-foreground/10">
       <div className="grid grid-cols-2 gap-4 sm:grid-cols-4">
         <StatBlock
           label={intl.formatMessage({ id: "dashboard.home.system.executions" })}

src/components/dashboard/VirtualServersCard.tsx

@@ -41,7 +41,7 @@ export function VirtualServersCard({
     : UNAVAILABLE;
 
   return (
-    <div className="flex h-full flex-col gap-4 rounded-lg bg-card px-5 py-4 shadow-xs ring-1 ring-foreground/10">
+    <div className="flex h-full flex-col gap-4 rounded-lg bg-card px-5 py-4 elevation-xs ring-1 ring-foreground/10">
       <h2 className="font-heading text-sm font-semibold leading-5 text-secondary-foreground">
         {intl.formatMessage({ id: "dashboard.home.system.virtualServers" })}
       </h2>

src/components/gateways/CreateServerForm.tsx

@@ -88,19 +88,21 @@ export function CreateServerForm({
 
   return (
     <form
-      className="rounded-xl border border-border bg-card px-7 py-7 shadow-xs dark:border-[#2b2b2f] dark:bg-[#141414]"
+      className="rounded-xl border border-neutral-200 bg-white p-6 elevation-panel sm:p-8 dark:border-neutral-800 dark:bg-inherit"
       onSubmit={onSubmit}
       noValidate
     >
       <div className="flex items-center gap-3">
-        <span className="flex size-8 shrink-0 items-center justify-center rounded-md bg-[#f554ff] text-black">
-          <Server className="size-5" aria-hidden="true" />
+        <span className="flex h-6 w-6 shrink-0 items-center justify-center rounded-sm bg-[#f554ff] text-neutral-950 elevation-sm">
+          <Server className="size-4" aria-hidden="true" />
         </span>
-        <h1 className="text-xl font-semibold tracking-tight text-foreground">{resolvedTitle}</h1>
+        <h1 className="text-lg font-semibold tracking-tight text-neutral-950 dark:text-neutral-50">
+          {resolvedTitle}
+        </h1>
       </div>
 
       <div className="mt-5">
-        <p className="max-w-[48rem] text-sm leading-5 text-muted-foreground">
+        <p className="text-sm leading-6 text-neutral-600 dark:text-neutral-400">
           {resolvedDescription}
         </p>
       </div>
@@ -146,7 +148,7 @@ export function CreateServerForm({
                   />
                   <label
                     htmlFor={`server-visibility-${option.value}`}
-                    className="flex h-full cursor-pointer items-center justify-center rounded-sm px-3 text-sm font-medium text-muted-foreground transition hover:text-foreground peer-checked:bg-background peer-checked:text-foreground peer-checked:shadow-xs peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background"
+                    className="flex h-full cursor-pointer items-center justify-center rounded-sm px-3 text-sm font-medium text-muted-foreground transition hover:text-foreground peer-checked:bg-background peer-checked:text-foreground peer-checked:elevation-control peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-background"
                   >
                     {intl.formatMessage({ id: option.labelId })}
                   </label>
@@ -159,10 +161,10 @@ export function CreateServerForm({
         <div className="space-y-3">
           <label
             htmlFor="server-name"
-            className="inline-flex items-center gap-0.5 text-sm font-medium text-foreground"
+            className="inline-flex items-center gap-0.5 text-sm font-medium text-neutral-900 dark:text-neutral-100"
           >
             {intl.formatMessage({ id: "gateways.createServer.name" })}
-            <span className="text-destructive">*</span>
+            <span className="text-red-500">*</span>
             <span className="sr-only">
               {intl.formatMessage({ id: "gateways.createServer.required" })}
             </span>
@@ -179,7 +181,7 @@ export function CreateServerForm({
             aria-invalid={Boolean(errors.name)}
             aria-describedby={errors.name ? "server-name-error" : undefined}
             maxLength={100}
-            className="h-10 rounded-md border-input bg-background px-3 text-sm shadow-none"
+            className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 dark:border-neutral-700 dark:text-neutral-100"
           />
           {errors.name && (
             <p id="server-name-error" className="text-sm text-destructive">
@@ -189,7 +191,10 @@ export function CreateServerForm({
         </div>
 
         <div className="space-y-3">
-          <label htmlFor="oauth-enabled" className="text-sm font-medium text-foreground">
+          <label
+            htmlFor="oauth-enabled"
+            className="text-sm font-medium text-neutral-900 dark:text-neutral-100"
+          >
             {intl.formatMessage({ id: "gateways.createServer.oauthLabel" })}
           </label>
           <div className="flex items-center gap-4">
@@ -201,7 +206,6 @@ export function CreateServerForm({
                 validateField("oauthEnabled", checked);
               }}
               aria-describedby="oauth-enabled-description"
-              className="data-[state=checked]:bg-primary data-[state=unchecked]:bg-[#343438]"
             />
             <p id="oauth-enabled-description" className="text-sm leading-5 text-muted-foreground">
               {intl.formatMessage({ id: "gateways.createServer.oauthDescription" })}
@@ -213,7 +217,7 @@ export function CreateServerForm({
           type="button"
           variant="ghost"
           onClick={() => setOptionalOpen((current) => !current)}
-          className="flex h-12 w-full items-center gap-3 rounded-md border border-border px-4 text-left text-sm font-medium text-muted-foreground transition hover:bg-muted/40 hover:text-foreground dark:border-[#252529]"
+          className="inline-flex w-full items-center justify-center gap-2 rounded-md border border-neutral-200 bg-transparent px-3 py-2 text-sm font-medium text-neutral-600 transition hover:text-neutral-950 aria-expanded:bg-transparent dark:border-neutral-800 dark:text-neutral-400 dark:hover:text-neutral-300"
           aria-expanded={optionalOpen}
           aria-controls="optional-server-configuration"
         >
@@ -227,7 +231,10 @@ export function CreateServerForm({
         {optionalOpen && (
           <div id="optional-server-configuration" className="grid gap-7">
             <div className="space-y-3">
-              <label htmlFor="server-tags" className="text-sm font-medium text-foreground">
+              <label
+                htmlFor="server-tags"
+                className="text-sm font-medium text-neutral-900 dark:text-neutral-100"
+              >
                 {intl.formatMessage({ id: "gateways.createServer.tags" })}
               </label>
               <TagInput
@@ -253,7 +260,10 @@ export function CreateServerForm({
             </div>
 
             <div className="space-y-3">
-              <label htmlFor="server-description" className="text-sm font-medium text-foreground">
+              <label
+                htmlFor="server-description"
+                className="text-sm font-medium text-neutral-900 dark:text-neutral-100"
+              >
                 {intl.formatMessage({ id: "gateways.createServer.descriptionLabel" })}
               </label>
               <Textarea
@@ -270,7 +280,7 @@ export function CreateServerForm({
                 aria-invalid={Boolean(errors.description)}
                 aria-describedby={errors.description ? "server-description-error" : undefined}
                 maxLength={500}
-                className="min-h-[4.5rem] resize-y rounded-md border-border bg-background px-3 py-3 text-sm shadow-none placeholder:text-muted-foreground/70 focus-visible:ring-1 focus-visible:ring-offset-0 dark:border-[#55555c] dark:bg-[#141414]"
+                className="min-h-28 resize-y placeholder:text-muted-foreground focus-visible:ring-1 focus-visible:ring-offset-0"
               />
               {errors.description && (
                 <p id="server-description-error" className="text-sm text-destructive">
@@ -285,13 +295,18 @@ export function CreateServerForm({
       {children && <div className="mt-7">{children}</div>}
 
       <div className="mt-8 flex items-center justify-end gap-5">
-        <Button type="button" variant="ghost" onClick={onCancel} className="h-8 px-2 text-sm">
+        <Button
+          type="button"
+          variant="ghost"
+          onClick={onCancel}
+          className="h-10 rounded-md px-3 text-sm font-medium text-neutral-700 hover:bg-neutral-100 hover:text-neutral-950 dark:text-neutral-300 dark:hover:bg-neutral-800 dark:hover:text-neutral-100"
+        >
           {intl.formatMessage({ id: "common.button.cancel" })}
         </Button>
         <Button
           type="submit"
           disabled={isSubmitting}
-          className="h-8 rounded-md bg-white px-3 text-sm font-medium text-black hover:bg-white/90"
+          className="h-10 rounded-md bg-neutral-950 px-4 text-sm font-medium text-white hover:enabled:bg-neutral-800 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-neutral-100 dark:text-neutral-950 dark:hover:enabled:bg-neutral-200"
         >
           {resolvedSubmitLabel}
         </Button>

src/components/gateways/ExposeComponentsForm.tsx

@@ -277,7 +277,7 @@ export function ExposeComponentsForm({
 
   if (isLoading) {
     return (
-      <div className="mx-auto mt-6 w-full max-w-5xl rounded-xl border border-neutral-200 bg-inherit p-0 shadow-[0_12px_40px_rgba(15,23,42,0.12)] dark:border-neutral-800">
+      <div className="mx-auto mt-6 w-full max-w-5xl rounded-xl border border-neutral-200 bg-inherit p-0 elevation-panel dark:border-neutral-800">
         <div className="flex items-center justify-center p-12">
           <Loading />
         </div>
@@ -296,7 +296,7 @@ export function ExposeComponentsForm({
   const somePromptsSelected = selectedPrompts.size > 0 && selectedPrompts.size < prompts.length;
 
   return (
-    <div className="mx-auto mt-6 w-full max-w-5xl rounded-xl border border-neutral-200 bg-inherit p-0 shadow-[0_12px_40px_rgba(15,23,42,0.12)] dark:border-neutral-800">
+    <div className="mx-auto mt-6 w-full max-w-5xl rounded-xl border border-neutral-200 bg-inherit p-0 elevation-panel dark:border-neutral-800">
       <div className="flex flex-col gap-8 p-6 sm:p-8">
         {oauthNotification && (
           <InlineNotification
@@ -319,7 +319,7 @@ export function ExposeComponentsForm({
         {/* Main content */}
         <div className="flex flex-col gap-4">
           <div className="flex items-center gap-2">
-            <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-sm bg-purple-500 text-neutral-950 shadow-sm">
+            <div className="flex h-6 w-6 shrink-0 items-center justify-center rounded-sm bg-purple-500 text-neutral-950 elevation-sm">
               <Server className="h-4 w-4" aria-hidden="true" />
             </div>
             <h2 className="text-lg font-semibold tracking-tight text-neutral-950 dark:text-neutral-50">

src/components/gateways/VirtualServerDetailsPanel.tsx

@@ -469,7 +469,7 @@ export function VirtualServerDetailsPanel({
                         className={cn(
                           "h-8 shrink-0 rounded-sm px-4 text-sm font-medium transition-colors",
                           isSelected
-                            ? "bg-background text-foreground shadow-sm"
+                            ? "bg-background text-foreground elevation-control"
                             : "text-muted-foreground hover:text-foreground",
                         )}
                         onClick={() => setSourceFilter(source.id)}

src/components/layout/HeaderProfileMenu.tsx

@@ -50,7 +50,7 @@ export function HeaderProfileMenu() {
               variant="ghost"
               size="icon-sm"
               onClick={() => setTheme("light")}
-              className={`rounded-full transition-colors ${theme === "light" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`}
+              className={`rounded-full transition-colors ${theme === "light" ? "bg-background text-foreground elevation-control" : "text-muted-foreground hover:text-foreground"}`}
               aria-label={intl.formatMessage({ id: "common.theme.light" })}
             >
               <Sun className="size-4" />
@@ -60,7 +60,7 @@ export function HeaderProfileMenu() {
               variant="ghost"
               size="icon-sm"
               onClick={() => setTheme("dark")}
-              className={`rounded-full transition-colors ${theme === "dark" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`}
+              className={`rounded-full transition-colors ${theme === "dark" ? "bg-background text-foreground elevation-control" : "text-muted-foreground hover:text-foreground"}`}
               aria-label={intl.formatMessage({ id: "common.theme.dark" })}
             >
               <Moon className="size-4" />
@@ -70,7 +70,7 @@ export function HeaderProfileMenu() {
               variant="ghost"
               size="icon-sm"
               onClick={() => setTheme("system")}
-              className={`rounded-full transition-colors ${theme === "system" ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"}`}
+              className={`rounded-full transition-colors ${theme === "system" ? "bg-background text-foreground elevation-control" : "text-muted-foreground hover:text-foreground"}`}
               aria-label={intl.formatMessage({ id: "common.theme.system" })}
             >
               <Monitor className="size-4" />

src/components/mcp-servers/AdvancedSettings.tsx

@@ -251,7 +251,7 @@ export function AdvancedSettings({
         <div
           role="radiogroup"
           aria-label="Authentication type"
-          className="flex w-full flex-nowrap gap-1 rounded-md bg-neutral-100 p-1 dark:bg-neutral-800"
+          className="flex w-full flex-nowrap gap-1 rounded-md bg-muted p-1"
         >
           {(["none", "basic", "bearer", "custom", "oauth", "query"] as AuthType[]).map((type) => {
             const label =
@@ -280,7 +280,7 @@ export function AdvancedSettings({
                 />
                 <label
                   htmlFor={`auth-${type}`}
-                  className="flex cursor-pointer items-center justify-center whitespace-nowrap rounded-md px-3 py-2 text-center text-sm font-medium text-neutral-500 transition hover:bg-neutral-200 hover:text-neutral-700 peer-checked:bg-neutral-800 peer-checked:text-white peer-checked:px-4 peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2 dark:text-neutral-400 dark:hover:bg-neutral-900 dark:hover:text-neutral-300 dark:peer-checked:bg-neutral-950 dark:peer-checked:text-white"
+                  className="flex cursor-pointer items-center justify-center whitespace-nowrap rounded-md px-3 py-2 text-center text-sm font-medium text-muted-foreground transition hover:text-foreground peer-checked:bg-background peer-checked:px-4 peer-checked:text-foreground peer-checked:elevation-control peer-focus-visible:ring-2 peer-focus-visible:ring-ring peer-focus-visible:ring-offset-2"
                 >
                   {label}
                 </label>

src/components/mcp-servers/BasicAuth.tsx

@@ -29,7 +29,7 @@ export function BasicAuth({
           value={username}
           onChange={(e) => onUsernameChange(e.target.value)}
           placeholder="Add username for basic authentication..."
-          className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+          className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-muted-foreground dark:border-neutral-700 dark:text-neutral-100"
         />
       </div>
 
@@ -47,7 +47,7 @@ export function BasicAuth({
           value={password}
           onChange={(e) => onPasswordChange(e.target.value)}
           placeholder="Add password..."
-          className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+          className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-muted-foreground dark:border-neutral-700 dark:text-neutral-100"
         />
       </div>
     </div>

src/components/mcp-servers/BearerTokenAuth.tsx

@@ -26,7 +26,7 @@ export function BearerTokenAuth({ token, onTokenChange }: BearerTokenAuthProps)
         value={token}
         onChange={(e) => onTokenChange(e.target.value)}
         placeholder="Paste bearer token..."
-        className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-neutral-400 dark:border-neutral-700 dark:text-neutral-100 dark:placeholder:text-neutral-500"
+        className="rounded-md border-neutral-300 px-4 text-sm text-neutral-900 shadow-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-0 placeholder:text-muted-foreground dark:border-neutral-700 dark:text-neutral-100"
       />
     </div>
   );

src/components/mcp-servers/CACertificateUpload.tsx

@@ -125,13 +125,7 @@ export function CACertificateUpload({ onFilesSelected }: CACertificateUploadProp
             : "border-neutral-300 bg-transparent hover:border-neutral-400 hover:bg-neutral-50 dark:border-neutral-700 dark:hover:border-neutral-600 dark:hover:bg-neutral-800/40"
         }`}
       >
-        <Button
-          type="button"
-          onClick={handleClick}
-          variant="default"
-          size="sm"
-          className="h-7 gap-2 border border-neutral-700 bg-neutral-800 text-white hover:bg-neutral-700 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800"
-        >
+        <Button type="button" onClick={handleClick} variant="ghost" size="sm" className="h-7 gap-2">
           <Upload className="h-3 w-3" />
           Upload
         </Button>