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

frontend/src/components/plexCards.tsx

@@ -8,6 +8,7 @@ import { navItemAttrs } from "../lib/listNav";
 import { PLAYABLE_TINT, playableClass } from "./plexPlayable";
 import { IconButton } from "./ui/IconButton";
 import { Pressable } from "./ui/Pressable";
+import { SURFACE } from "./ui/surfaces";
 
 // Presentational Plex cards + strips, split out of PlexBrowse (all purely prop-driven, no shared
 // state). Rendered by the browse grid, the person page, and the series show/season views.
@@ -79,7 +80,7 @@ export function PlexPosterCard({
             onOpen();
           }
         }}
-        className="glass-card glass-hover relative aspect-2/3 rounded-xl overflow-hidden transition-all duration-200 cursor-pointer"
+        className={`${SURFACE.card} glass-hover relative aspect-2/3 overflow-hidden transition-all duration-200 cursor-pointer`}
       >
         <img
           src={card.thumb}
@@ -260,7 +261,7 @@ export function SeasonCard({
             onOpen();
           }
         }}
-        className="glass-card glass-hover relative aspect-2/3 rounded-xl overflow-hidden transition-all duration-200 cursor-pointer"
+        className={`${SURFACE.card} glass-hover relative aspect-2/3 overflow-hidden transition-all duration-200 cursor-pointer`}
       >
         <img
           src={se.thumb}
@@ -348,7 +349,7 @@ export function CastStrip({
   const clickable = !!(onOpenPerson || onFilter);
   return (
     <section
-      className="glass-card rounded-2xl p-4 sm:p-5 mb-6"
+      className={`${SURFACE.panel} p-4 sm:p-5 mb-6`}
       style={{ background: "color-mix(in srgb, var(--card) 55%, transparent)" }}
     >
       <h2 className="text-sm font-semibold mb-3">{t("plex.info.cast")}</h2>
@@ -423,7 +424,7 @@ export function RelatedStrip({
   const { t } = useTranslation();
   return (
     <section
-      className="glass-card rounded-2xl p-4 sm:p-5 mb-6"
+      className={`${SURFACE.panel} p-4 sm:p-5 mb-6`}
       style={{ background: "color-mix(in srgb, var(--card) 55%, transparent)" }}
     >
       <h2 className="text-sm font-semibold mb-3">{t("plex.series.related")}</h2>
@@ -436,7 +437,9 @@ export function RelatedStrip({
             onClick={() => onOpen(r.id)}
             className="group w-32.5 shrink-0"
           >
-            <div className="glass-card glass-hover relative aspect-2/3 rounded-xl overflow-hidden transition-all duration-200">
+            <div
+              className={`${SURFACE.card} glass-hover relative aspect-2/3 overflow-hidden transition-all duration-200`}
+            >
               <img
                 src={r.thumb}
                 alt=""