refactor(workspace): consume revised color tokens

apps/web/src/pages/login-page.tsx

@@ -183,7 +183,7 @@ function Field({
   Component: FieldInputComponent
 }) {
   return (
-    <fieldset className="relative flex h-12 items-center rounded-lg border-2 border-border p-0 focus-within:border-primary focus-within:[&_label]:opacity-100">
+    <fieldset className="relative flex h-12 items-center rounded-lg border-2 border-border p-0 focus-within:border-accent focus-within:[&_label]:opacity-100">
       <legend className="ml-2 flex h-0 px-0">
         <label
           className="h-fit -translate-y-1/2 px-1 text-sm opacity-50"

docs/src/index.css

@@ -33,8 +33,8 @@
     --card-foreground: var(--docs-foreground-light, var(--color-slate-950));
     --popover: var(--docs-background-light, var(--color-white));
     --popover-foreground: var(--docs-foreground-light, var(--color-slate-950));
-    --primary: var(--color-indigo-600);
+    --accent: var(--color-indigo-600);
-    --primary-foreground: var(--color-white);
+    --accent-foreground: var(--color-white);
     --secondary: var(--docs-surface-light, var(--color-slate-100));
     --secondary-foreground: var(
       --docs-foreground-light,
@@ -42,8 +42,11 @@
     );
     --muted: var(--docs-surface-light, var(--color-slate-100));
     --muted-foreground: var(--docs-muted-light, var(--color-slate-600));
-    --accent: var(--docs-surface-light, var(--color-slate-100));
+    --highlight: var(--docs-surface-light, var(--color-slate-100));
-    --accent-foreground: var(--docs-foreground-light, var(--color-slate-950));
+    --highlight-foreground: var(
+      --docs-foreground-light,
+      var(--color-slate-950)
+    );
     --border: var(--color-slate-200);
     --input: var(--color-slate-200);
     --ring: var(--color-indigo-500);
@@ -59,14 +62,14 @@
     --card-foreground: var(--docs-foreground-dark, var(--color-slate-100));
     --popover: var(--docs-surface-dark, var(--color-slate-900));
     --popover-foreground: var(--docs-foreground-dark, var(--color-slate-100));
-    --primary: var(--color-indigo-400);
+    --accent: var(--color-indigo-400);
-    --primary-foreground: var(--color-slate-950);
+    --accent-foreground: var(--color-slate-950);
     --secondary: var(--color-slate-800);
     --secondary-foreground: var(--docs-foreground-dark, var(--color-slate-100));
     --muted: var(--color-slate-800);
     --muted-foreground: var(--docs-muted-dark, var(--color-slate-400));
-    --accent: var(--color-slate-800);
+    --highlight: var(--color-slate-800);
-    --accent-foreground: var(--docs-foreground-dark, var(--color-slate-100));
+    --highlight-foreground: var(--docs-foreground-dark, var(--color-slate-100));
     --border: var(--color-slate-800);
     --input: var(--color-slate-700);
     --ring: var(--color-indigo-400);

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,
+        background: theme.cssVars.light.accent,
-        foreground: theme.cssVars.light["primary-foreground"],
+        foreground: theme.cssVars.light["accent-foreground"],
       },
       dark: {
-        background: theme.cssVars.dark.primary,
+        background: theme.cssVars.dark.accent,
-        foreground: theme.cssVars.dark["primary-foreground"],
+        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-accent" />
-                    <div className="h-2 w-6 rounded-sm bg-primary/75" />
+                    <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",
+                        "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-primary-foreground text-primary"
+                        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 && (

packages/lexical/src/actions/color-picker.tsx

@@ -187,7 +187,7 @@ function ColorPickerControl({
           })}
         </div>
         <div className="flex h-9 items-center gap-2 rounded-lg border px-2 focus-within:border-ring focus-within:ring-2 focus-within:ring-ring/50 hover:bg-muted">
-          <label className="relative grid size-6 shrink-0 cursor-pointer place-items-center rounded-md hover:bg-accent">
+          <label className="relative grid size-6 shrink-0 cursor-pointer place-items-center rounded-md hover:bg-highlight">
             <Pipette className="size-4 text-muted-foreground" />
             <input
               type="color"

packages/lexical/src/actions/date.tsx

@@ -66,7 +66,7 @@ function DateControl({
   return (
     <DropdownMenuItem
       disabled={disabled}
-      className={cn(active && "bg-accent text-accent-foreground")}
+      className={cn(active && "bg-highlight text-highlight-foreground")}
       onMouseDown={(event) => event.preventDefault()}
       onClick={() => {
         runWithEditorFocus(context.editor, () => {

packages/lexical/src/components/image-resizer.tsx

@@ -224,14 +224,14 @@ export function ImageResizer({
     <>
       <span
         aria-hidden="true"
-        className="pointer-events-none absolute inset-0 rounded-[inherit] border-2 border-primary"
+        className="pointer-events-none absolute inset-0 rounded-[inherit] border-2 border-accent"
       />
       {RESIZE_HANDLES.map((handle) => (
         <button
           key={handle.direction}
           type="button"
           aria-label={resizeLabels[handle.direction]}
-          className={`absolute z-10 size-2.5 rounded-[2px] border border-primary bg-background shadow-xs ${handle.className}`}
+          className={`absolute z-10 size-2.5 rounded-[2px] border border-accent bg-background shadow-xs ${handle.className}`}
           data-lexical-image-resize-handle={handle.direction}
           style={{ cursor: handle.cursor }}
           onPointerDown={(event) => startResize(event, handle.direction)}

packages/lexical/src/embed.tsx

@@ -271,7 +271,7 @@ function LexicalEmbed({
       data-lexical-embed-type={embedType}
       className={cn(
         "my-3 rounded-xl",
-        isSelected && "ring-2 ring-primary ring-offset-2 ring-offset-background"
+        isSelected && "ring-2 ring-accent ring-offset-2 ring-offset-background"
       )}
       onClick={(event) => {
         if (!event.shiftKey) clearSelection()

packages/lexical/src/nodes/media-node.tsx

@@ -359,7 +359,7 @@ function LexicalMedia({
         payload.alignment === "end" && "items-end",
         payload.kind === "video" &&
           isSelected &&
-          "ring-2 ring-primary ring-offset-2 ring-offset-background"
+          "ring-2 ring-accent ring-offset-2 ring-offset-background"
       )}
     >
       {payload.kind === "image" ? (

packages/lexical/src/plugins/draggable-block-plugin.tsx

@@ -101,7 +101,7 @@ export function LexicalDraggableBlockPlugin() {
           ref={targetLineRef}
           aria-hidden="true"
           data-slot="lexical-drop-indicator"
-          className="pointer-events-none absolute top-0 left-0 z-20 h-1 rounded-full bg-primary opacity-0"
+          className="pointer-events-none absolute top-0 left-0 z-20 h-1 rounded-full bg-accent opacity-0"
         />
       }
     />

packages/lexical/src/plugins/link-popover-plugin.tsx

@@ -331,7 +331,7 @@ export function LexicalLinkPopoverPlugin() {
               href={activeLink.url}
               target="_blank"
               rel="noreferrer"
-              className="block max-h-24 overflow-y-auto px-1 break-all text-primary underline underline-offset-3"
+              className="block max-h-24 overflow-y-auto px-1 break-all text-accent underline underline-offset-3"
             >
               {activeLink.url}
             </a>

packages/lexical/src/styles/globals.css

@@ -40,8 +40,8 @@
   }
 
   .lexical-checklist-item-checked::before {
-    border-color: var(--color-primary);
+    border-color: var(--color-accent);
-    background: var(--color-primary);
+    background: var(--color-accent);
   }
 
   .lexical-checklist-item-checked::after {
@@ -51,7 +51,7 @@
     width: 0.3rem;
     height: 0.55rem;
     content: "";
-    border: solid var(--color-primary-foreground);
+    border: solid var(--color-accent-foreground);
     border-width: 0 0.125rem 0.125rem 0;
     transform: rotate(45deg);
   }

packages/lexical/src/theme.ts

@@ -5,7 +5,7 @@ export const lexicalTheme = {
     h3: "mt-3 mb-2 text-lg font-semibold",
   },
   hr: "my-4 border-t",
-  link: "text-primary underline underline-offset-2",
+  link: "text-accent underline underline-offset-2",
   list: {
     checklist: "lexical-checklist",
     listitem: "my-1",

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" />

packages/page/src/tabs.tsx

@@ -143,7 +143,7 @@ export function PageTabsTrigger({ className, ...props }: PageTabsTriggerProps) {
         variant === "card" &&
           getCardPageTabsClassName(
             side,
-            "bg-muted/20 not-data-active:hover:bg-muted data-active:border-transparent data-active:bg-transparent data-active:text-primary"
+            "bg-muted/20 not-data-active:hover:bg-muted data-active:border-transparent data-active:bg-transparent data-active:text-accent"
           ),
         variant === "default" && "rounded-lg px-3 data-active:text-foreground",
         className

packages/search/src/dialog.tsx

@@ -119,7 +119,7 @@ export function SearchDialog({
             <label className="flex h-full min-w-0 flex-1 items-center gap-2">
               <span className="inline-flex size-8 shrink-0 items-center justify-center">
                 {search.isLoading || search.isLoadingMore ? (
-                  <LoaderCircleIcon className="animate-spin text-primary" />
+                  <LoaderCircleIcon className="animate-spin text-accent" />
                 ) : (
                   <SearchIcon className="opacity-50" />
                 )}

packages/search/src/results.tsx

@@ -133,7 +133,7 @@ function SearchResultRow({
           </span>
         ))}
       </span>
-      <CornerDownLeftIcon className="shrink-0 text-primary opacity-0 transition-opacity group-hover/search-result:opacity-100 group-data-selected/search-result:opacity-100" />
+      <CornerDownLeftIcon className="shrink-0 text-accent opacity-0 transition-opacity group-hover/search-result:opacity-100 group-data-selected/search-result:opacity-100" />
     </Command.Item>
   )
 }
@@ -165,7 +165,7 @@ function HighlightedText({ text, query }: { text: string; query: string }) {
     offset += segment.text.length
 
     return segment.highlighted ? (
-      <mark key={key} className="rounded-sm bg-primary/15 px-0.5 text-primary">
+      <mark key={key} className="rounded-sm bg-accent/15 px-0.5 text-accent">
         {segment.text}
       </mark>
     ) : (