refactor(workspace): consume revised color tokens

packages/blocks/src/blocks/appearance/theme-color-picker.tsx

@@ -33,12 +33,12 @@ function createSwatches<T extends ThemeColor>(
     return {
       name,
       light: {
-        background: theme.cssVars.light.primary,
-        foreground: theme.cssVars.light["primary-foreground"],
+        background: theme.cssVars.light.accent,
+        foreground: theme.cssVars.light["accent-foreground"],
       },
       dark: {
-        background: theme.cssVars.dark.primary,
-        foreground: theme.cssVars.dark["primary-foreground"],
+        background: theme.cssVars.dark.accent,
+        foreground: theme.cssVars.dark["accent-foreground"],
       },
     }
   })

packages/blocks/src/blocks/appearance/theme-preview.tsx

@@ -24,7 +24,7 @@ export function ThemePreview({
     ...Object.fromEntries(
       Object.entries(themeVariables).map(([key, value]) => [`--${key}`, value])
     ),
-    "--preview-base": baseTheme.cssVars[scheme].primary,
+    "--preview-base": baseTheme.cssVars[scheme].accent,
   } as CSSProperties
 
   return (
@@ -39,7 +39,7 @@ export function ThemePreview({
         <div className="flex gap-3">
           <div className="flex w-16 flex-col gap-1 py-5 [&>div]:bg-foreground/10">
             <div className="h-2.5 w-full rounded-r-full" />
-            <div className="h-2.5 w-full rounded-r-full bg-primary!" />
+            <div className="h-2.5 w-full rounded-r-full bg-accent!" />
             <div className="h-2.5 w-full rounded-r-full" />
             <div className="h-2.5 w-full rounded-r-full" />
             <div className="mt-auto h-2.5 w-full rounded-r-full" />
@@ -50,7 +50,7 @@ export function ThemePreview({
                 <div className="h-2.5 w-3 rounded-sm" />
                 <div className="ml-auto size-2.5 rounded-sm" />
                 <div className="h-2.5 w-3.75 rounded-sm" />
-                <div className="h-2.5 w-5 rounded-sm bg-primary!" />
+                <div className="h-2.5 w-5 rounded-sm bg-accent!" />
               </div>
               <div className="grid grid-cols-3 gap-2 [&>div]:rounded-sm [&>div]:bg-foreground/10">
                 <div className="flex h-18 items-end gap-2 p-2 compacted:gap-1">
@@ -85,8 +85,8 @@ export function ThemePreview({
                     <div className="h-1 w-6 rounded-xs bg-(--preview-base)/55 compacted:hidden" />
                   </div>
                   <div className="flex items-center gap-1">
-                    <div className="h-2 w-6 rounded-sm bg-primary" />
-                    <div className="h-2 w-6 rounded-sm bg-primary/75" />
+                    <div className="h-2 w-6 rounded-sm bg-accent" />
+                    <div className="h-2 w-6 rounded-sm bg-accent/75" />
                   </div>
                 </div>
                 <div className="h-18" />

packages/blocks/src/blocks/appearance/theme.test.ts

@@ -27,7 +27,8 @@ describe("appearance themes", () => {
     expect(variables.background).toBe(
       getTheme("stone")?.cssVars.light.background
     )
-    expect(variables.primary).toBe(getTheme("rose")?.cssVars.light.primary)
+    expect(variables.highlight).toBe(getTheme("stone")?.cssVars.light.highlight)
+    expect(variables.accent).toBe(getTheme("rose")?.cssVars.light.accent)
   })
 
   it("builds explicit and system color-scheme rules", () => {
@@ -40,6 +41,7 @@ describe("appearance themes", () => {
     expect(styleSheet).toContain(".ui\\:dark{")
     expect(styleSheet).toContain("@media (prefers-color-scheme:dark)")
     expect(styleSheet).toContain("--background:")
-    expect(styleSheet).toContain("--primary:")
+    expect(styleSheet).toContain("--accent:")
+    expect(styleSheet).toContain("--highlight:")
   })
 })

packages/blocks/src/blocks/chats/chat-conversation-list.tsx

@@ -70,7 +70,7 @@ export function ChatConversationList({
                 className={cn(
                   "group grid w-full grid-cols-[auto_minmax(0,1fr)] items-center gap-x-3.5 rounded-xl px-3 py-3 text-start transition-colors outline-none hover:bg-muted focus-visible:ring-3 focus-visible:ring-ring/50",
                   active &&
-                    "bg-primary text-primary-foreground hover:bg-primary/90"
+                    "bg-accent text-accent-foreground hover:bg-accent/90"
                 )}
               >
                 <ConversationAvatar conversation={conversation} />
@@ -82,7 +82,7 @@ export function ChatConversationList({
                     <span
                       className={cn(
                         "shrink-0 text-xs text-muted-foreground",
-                        active && "text-primary-foreground/70"
+                        active && "text-accent-foreground/70"
                       )}
                     >
                       {conversation.lastActivityLabel}
@@ -91,7 +91,7 @@ export function ChatConversationList({
                   <span
                     className={cn(
                       "min-w-0 truncate text-sm text-muted-foreground",
-                      active && "text-primary-foreground/75"
+                      active && "text-accent-foreground/75"
                     )}
                   >
                     {conversation.lastMessage ?? conversation.description}
@@ -99,8 +99,8 @@ export function ChatConversationList({
                   {conversation.unreadCount && conversation.unreadCount > 0 ? (
                     <span
                       className={cn(
-                        "grid size-5 shrink-0 place-items-center self-end justify-self-end rounded-full bg-primary text-xs font-medium text-primary-foreground",
-                        active && "bg-primary-foreground text-primary"
+                        "grid size-5 shrink-0 place-items-center self-end justify-self-end rounded-full bg-accent text-xs font-medium text-accent-foreground",
+                        active && "bg-accent-foreground text-accent"
                       )}
                     >
                       {conversation.unreadCount > 99

packages/blocks/src/blocks/layout/app-breadcrumb.tsx

@@ -210,7 +210,7 @@ function BreadcrumbNavigationMenuItem({
       <DropdownMenuSub>
         <DropdownMenuSubTrigger
           aria-current={isCurrent ? "page" : undefined}
-          className="aria-[current=page]:bg-primary/10 aria-[current=page]:text-primary"
+          className="aria-[current=page]:bg-accent/10 aria-[current=page]:text-accent"
         >
           <BreadcrumbEntryContent entry={entry} />
         </DropdownMenuSubTrigger>
@@ -241,7 +241,7 @@ function BreadcrumbNavigationMenuItem({
   return (
     <DropdownMenuItem
       aria-current={isCurrent ? "page" : undefined}
-      className="aria-[current=page]:bg-primary/10 aria-[current=page]:text-primary"
+      className="aria-[current=page]:bg-accent/10 aria-[current=page]:text-accent"
       render={
         entry.to === "/" ? (
           <Link to="/" />
@@ -406,7 +406,7 @@ export function AppBreadcrumb() {
                 {item.kind === "menu" ? (
                   <BreadcrumbMenu entries={item.entries} />
                 ) : isCurrent ? (
-                  <BreadcrumbPage className="inline-flex min-w-0 items-center gap-1.5 text-primary">
+                  <BreadcrumbPage className="inline-flex min-w-0 items-center gap-1.5 text-accent">
                     {item.entry.icon && (
                       <Icon
                         name={item.entry.icon}

packages/blocks/src/blocks/layout/app-query-indicator.tsx

@@ -22,7 +22,7 @@ export function AppQueryIndicator({ className }: { className?: string }) {
           className
         )}
       >
-        <span className="size-4.5 animate-spin rounded-full border-2 border-foreground/10 border-t-primary" />
+        <span className="size-4.5 animate-spin rounded-full border-2 border-foreground/10 border-t-accent" />
       </span>
     )
   }

packages/blocks/src/blocks/layout/header-action-button.tsx

@@ -27,7 +27,7 @@ export function HeaderActionButton({
       {showIndicator && (
         <span
           aria-hidden="true"
-          className="absolute top-1 right-1 inline-flex size-2 animate-pulse rounded-md bg-primary"
+          className="absolute top-1 right-1 inline-flex size-2 animate-pulse rounded-md bg-accent"
         />
       )}
     </Button>

packages/blocks/src/blocks/navigation/flyout-navigation.tsx

@@ -33,7 +33,7 @@ export function SidebarFlyoutMenuItems({
           <DropdownMenuSubTrigger
             aria-current={routeState.isCurrent ? "page" : undefined}
             data-route-active={routeState.isActive ? "" : undefined}
-            className="h-9 gap-3 px-3 py-1 data-route-active:bg-primary/10 data-route-active:text-primary! data-route-active:**:text-primary!"
+            className="h-9 gap-3 px-3 py-1 data-route-active:bg-accent/10 data-route-active:text-accent! data-route-active:**:text-accent!"
           >
             {iconElement}
             <span className="min-w-0 flex-1 truncate">
@@ -56,7 +56,7 @@ export function SidebarFlyoutMenuItems({
         key={item.id}
         aria-current={routeState.isCurrent ? "page" : undefined}
         data-route-active={routeState.isActive ? "" : undefined}
-        className="h-9 gap-3 px-3 py-1 data-route-active:bg-primary/10 data-route-active:text-primary! data-route-active:**:text-primary!"
+        className="h-9 gap-3 px-3 py-1 data-route-active:bg-accent/10 data-route-active:text-accent! data-route-active:**:text-accent!"
         render={item.to ? <NavigationLink to={item.to} /> : undefined}
       >
         {iconElement}

packages/blocks/src/blocks/navigation/navigation-button.tsx

@@ -61,7 +61,7 @@ export function NavigationButton({
   const baseButtonProps: useRender.ElementProps<"button"> = {
     className: cn(
       "group/button relative items-center rounded-md [&>span]:inline-flex [&>span]:items-center",
-      "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground data-route-active:bg-primary/10 data-route-active:text-primary dark:hover:bg-muted/50 dark:aria-expanded:bg-muted/50 dark:data-route-active:bg-muted/50",
+      "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground data-route-active:bg-accent/10 data-route-active:text-accent dark:hover:bg-muted/50 dark:aria-expanded:bg-muted/50 dark:data-route-active:bg-muted/50",
       layout === "stacked"
         ? [
             "grid grid-cols-[minmax(0,1fr)_auto_auto_minmax(0,1fr)]",

packages/blocks/src/blocks/notifications/notification-item.tsx

@@ -156,7 +156,7 @@ export function NotificationItem({
       role="listitem"
       data-read={notification.isRead}
       className={cn(
-        "relative rounded-none px-4 py-3.5 hover:bg-muted data-[read=false]:bg-primary/[0.035]",
+        "relative rounded-none px-4 py-3.5 hover:bg-muted data-[read=false]:bg-accent/[0.035]",
         className
       )}
       {...props}
@@ -167,7 +167,7 @@ export function NotificationItem({
         </ItemMedia>
       )}
       <ItemContent>
-        <ItemTitle className="line-clamp-2 [&_a:hover]:text-primary">
+        <ItemTitle className="line-clamp-2 [&_a:hover]:text-accent">
           {notification.to ? (
             <NotificationRouteLink to={notification.to}>
               {notification.title}
@@ -204,7 +204,7 @@ export function NotificationItem({
       {!notification.isRead && (
         <span
           aria-hidden="true"
-          className="mt-2 size-2 shrink-0 self-start rounded-full bg-primary"
+          className="mt-2 size-2 shrink-0 self-start rounded-full bg-accent"
         />
       )}
       {notification.actions && notification.actions.length > 0 && (