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

frontend/src/components/VideoCard.tsx

@@ -28,6 +28,7 @@ import { isPlainLeftClick } from "../lib/nav";
 import ChannelNameLink from "./ChannelNameLink";
 import { IconButton } from "./ui/IconButton";
 import { Button } from "./ui/Button";
+import { SURFACE } from "./ui/surfaces";
 
 function Actions({
   video,
@@ -517,7 +518,7 @@ function VideoCard({
   // re-revealing the ambient backdrop behind them, which reads as the background flickering. The
   // cards never did this because glass-card always paints. No hover lift here: a 900px-wide row
   // jumping as the pointer crosses it is a lot more restless than a card doing it.
-  const rowShell = "cv-row group glass-card glass-hover relative rounded-xl transition";
+  const rowShell = `cv-row group ${SURFACE.card} glass-hover relative transition`;
 
   if (spec.family === "row") {
     // A table without being one. Every column is a FIXED width, which is what makes the same datum
@@ -647,7 +648,7 @@ function VideoCard({
       {...menuProps?.(video)}
       {...(navIndex !== undefined && navItemAttrs(navIndex))}
       className={clsx(
-        "cv-card group glass-card glass-hover rounded-2xl transition-all duration-150",
+        `cv-card group ${SURFACE.card} glass-hover transition-all duration-150`,
         "flex flex-col",
         spec.dense ? "p-2" : "p-2.5",
         watched && "opacity-55",