refactor(workspace): consume revised color tokens

packages/media/src/media-grid.tsx

@@ -46,7 +46,7 @@ export function MediaGrid({
             onDoubleClick={() => onDetails(asset)}
             className={cn(
               "group relative mb-3 block w-full break-inside-avoid overflow-hidden rounded-lg bg-muted text-left ring-offset-2 ring-offset-background transition-shadow outline-none focus-visible:ring-3 focus-visible:ring-ring",
-              (active || selected) && "ring-2 ring-primary"
+              (active || selected) && "ring-2 ring-accent"
             )}
           >
             {asset.kind === "image" ? (
@@ -90,7 +90,7 @@ export function MediaGrid({
             </span>
 
             {selected && (
-              <span className="absolute top-2 right-2 grid size-6 place-items-center rounded-full bg-primary text-primary-foreground shadow">
+              <span className="absolute top-2 right-2 grid size-6 place-items-center rounded-full bg-accent text-accent-foreground shadow">
                 <CheckIcon className="size-4" strokeWidth={3} />
               </span>
             )}

packages/media/src/sidebar.tsx

@@ -199,7 +199,7 @@ export function MediaFilterTabs({
           className={cn(
             "flex h-8 shrink-0 items-center gap-1.5 rounded-lg px-3 text-xs",
             folder === undefined && filter === value
-              ? "bg-primary text-primary-foreground"
+              ? "bg-accent text-accent-foreground"
               : "bg-muted"
           )}
         >
@@ -259,7 +259,7 @@ function SidebarButton({
       onClick={onClick}
       className={cn(
         "flex h-9 w-full items-center gap-2 rounded-lg px-3 text-start text-sm transition-colors outline-none hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/30",
-        active && "bg-primary text-primary-foreground hover:bg-primary"
+        active && "bg-accent text-accent-foreground hover:bg-accent"
       )}
     >
       <Icon className="size-4" />