Webapp stylings (#1916)

frontend/libs/components/button/src/lib/ToggleButton.tsx

@@ -27,13 +27,15 @@ export const ToggleButton = ({
     <Button
       className={twMerge(
         // 34px matches the sibling toolbar controls (GenerateButton, the
-        // PopoverMenu triggers); the 2px border is inside the box.
-        "flex h-[34px] items-center justify-center rounded-none border-2 border-transparent text-sm text-white backdrop-blur-lg transition-all",
+        // PopoverMenu triggers). Flat control surface + hairline border,
+        // same idiom as the PopoverMenu triggers beside it — the old glassy
+        // backdrop-blur look predates the brutalist system.
+        "flex h-[34px] items-center justify-center rounded-[3px] border border-ui-controls-border bg-ui-controls text-sm text-white transition-colors",
         hasLabel ? "px-3" : "w-[34px]",
         isActive
-          ? "border-white/20 bg-brand-primary/40 hover:border-white/30 hover:bg-brand-primary/40"
-          : "bg-[#5F5F68]/60 hover:bg-[#5F5F68]/90",
-        className
+          ? "border-white/30 bg-brand-primary/40 hover:bg-brand-primary/40"
+          : "hover:border-white/30 hover:bg-ui-controls/80",
+        className,
       )}
       variant="secondary"
       onClick={onClick}

frontend/libs/components/button/src/lib/button.tsx

@@ -39,7 +39,9 @@ export const Button = ({
   function getVariantClassNames(variant: string) {
     switch (variant) {
       case "secondary": {
-        return "bg-transparent text-base-fg border border-ui-controls-border hover:bg-white/10 hover:border-white/30";
+        // Resting bg-white/5 tint (matching the home grid cards) so the
+        // button reads as a surface, not a bare outline on the page bg.
+        return "bg-white/5 text-base-fg border border-ui-controls-border hover:bg-white/10 hover:border-white/30";
       }
       case "action": {
         return "bg-ui-controls text-base-fg border border-ui-controls-border hover:bg-ui-controls/80";
@@ -62,7 +64,7 @@ export const Button = ({
   );
 
   const className = twMerge(
-    "w-fit rounded-none font-mono text-xs font-semibold uppercase tracking-[0.15em] px-3.5 py-2 border border-transparent focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-white/60 transition-colors duration-150 flex gap-2 items-center justify-center",
+    "w-fit rounded-[3px] font-mono text-xs font-semibold uppercase tracking-[0.12em] px-3.5 py-2 border border-transparent focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-white/60 transition-colors duration-150 flex gap-2 items-center justify-center",
     getVariantClassNames(propsVariant),
     propsClassName,
     disabledClass,