feat(design): glass surfaces by role, the static Badge, LinkButton, user pickers on the Combobox (E28 S3d1)

frontend/src/components/ui/tableHeader.tsx

@@ -12,6 +12,7 @@ import { Button } from "./Button";
 import { IconButton } from "./IconButton";
 import { Pressable } from "./Pressable";
 import { Input } from "./Input";
+import { SURFACE } from "./surfaces";
 
 // The column-header machinery — the sortable header row with its filter funnel + popover — lifted
 // OUT of DataTable so a non-DataTable body can render under the same headers. The column contract
@@ -93,7 +94,7 @@ function FilterFunnel<T>({
         popover={pop}
         ariaLabel={col.header}
         initialFocus={isText ? inputRef : undefined}
-        className="glass-menu w-52 rounded-xl p-2 animate-[popIn_0.16s_ease]"
+        className={`${SURFACE.popover} w-52 p-2 animate-[popIn_0.16s_ease]`}
       >
         {f.kind === "text" && (
           <Input
@@ -113,7 +114,7 @@ function FilterFunnel<T>({
               keepSelectedPaint
               onSelect={() => onApply(col.key, "")}
               label={t("datatable.all")}
-              className={`text-left text-xs px-2 py-1.5 rounded-md outline-hidden transition ${
+              className={`text-left text-xs px-2 py-1.5 rounded-lg outline-hidden transition ${
                 !filterOn ? "bg-accent text-accent-fg" : "text-muted hover:bg-card"
               }`}
             >
@@ -127,7 +128,7 @@ function FilterFunnel<T>({
                 keepSelectedPaint
                 onSelect={() => onApply(col.key, o.value)}
                 label={o.label}
-                className={`text-left text-xs px-2 py-1.5 rounded-md outline-hidden transition ${
+                className={`text-left text-xs px-2 py-1.5 rounded-lg outline-hidden transition ${
                   value === o.value ? "bg-accent text-accent-fg" : "text-muted hover:bg-card"
                 }`}
               >
@@ -153,7 +154,7 @@ function FilterFunnel<T>({
                     onApply(col.key, on ? arr.filter((x) => x !== o.value) : [...arr, o.value])
                   }
                   label={o.label}
-                  className={`flex w-full items-center gap-2 text-left text-xs px-2 py-1.5 rounded-md outline-hidden transition ${
+                  className={`flex w-full items-center gap-2 text-left text-xs px-2 py-1.5 rounded-lg outline-hidden transition ${
                     on ? "text-fg" : "text-muted"
                   }`}
                 >