refactor(workspace): consume revised color tokens

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);
-    background: var(--color-primary);
+    border-color: var(--color-accent);
+    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",