fix: editor theme and touch targets match design spec (#56) (#57)

- Replace arbitrary oklch color values in code highlighting with named
  CSS variable tokens (--code-keyword, --code-string, --code-constant,
  --code-type, --code-builtin)
- Remove leading-relaxed override from paragraph theme
- Change blockquote border opacity from 0.12 to 0.06
- Increase floating toolbar button touch targets to 44px on mobile
- Increase link editor button touch targets to 44px on mobile
- Add regression tests for theme color tokens and line height
- Document syntax highlighting tokens in design spec

Co-authored-by: Ona <no-reply@ona.com>

Author: zacharias-ona

.agents/design.md

@@ -34,6 +34,21 @@ Dark mode only. Use oklch values via CSS variables — same hue family as softwa
 | `--accent` | `oklch(0.60 0.06 248)` | Links, selected items, focus rings |
 | `--destructive` | `oklch(0.55 0.2 25)` | Delete actions, error states |
 
+### Syntax Highlighting Tokens
+
+Used in the Lexical editor code block theme (`src/components/editor/theme.ts`).
+
+| Token | Value | Usage |
+|---|---|---|
+| `--code-keyword` | `oklch(0.65 0.12 300)` | Keywords, operators (purple) |
+| `--code-string` | `oklch(0.70 0.12 150)` | Strings, chars, selectors (green) |
+| `--code-constant` | `oklch(0.65 0.15 25)` | Booleans, numbers, constants, tags (red-orange) |
+| `--code-type` | `oklch(0.75 0.08 80)` | Class names, type annotations (yellow) |
+| `--code-builtin` | `oklch(0.70 0.08 200)` | Built-in functions and types (cyan) |
+
+Tokens that already map to existing colors: `text-primary` for functions/properties/attrs,
+`text-muted-foreground` for comments/punctuation, `text-destructive` for deleted text.
+
 Rules:
 - No color outside this token set without updating this file first.
 - Accent color is used sparingly — selected sidebar item, focused input, links. Not decorative.

src/app/globals.css

@@ -39,6 +39,11 @@
   --color-card: var(--card);
   --color-foreground: var(--foreground);
   --color-background: var(--background);
+  --color-code-keyword: var(--code-keyword);
+  --color-code-string: var(--code-string);
+  --color-code-constant: var(--code-constant);
+  --color-code-type: var(--code-type);
+  --color-code-builtin: var(--code-builtin);
   --radius-sm: calc(var(--radius) * 0.6);
   --radius-md: calc(var(--radius) * 0.8);
   --radius-lg: var(--radius);
@@ -82,6 +87,11 @@
   --sidebar-accent-foreground: oklch(0.87 0.01 255);
   --sidebar-border: oklch(0.22 0.012 255);
   --sidebar-ring: oklch(0.60 0.06 248);
+  --code-keyword: oklch(0.65 0.12 300);
+  --code-string: oklch(0.70 0.12 150);
+  --code-constant: oklch(0.65 0.15 25);
+  --code-type: oklch(0.75 0.08 80);
+  --code-builtin: oklch(0.70 0.08 200);
 }
 
 /* Duplicate for .dark class to satisfy shadcn components that check for it */
@@ -117,6 +127,11 @@
   --sidebar-accent-foreground: oklch(0.87 0.01 255);
   --sidebar-border: oklch(0.22 0.012 255);
   --sidebar-ring: oklch(0.60 0.06 248);
+  --code-keyword: oklch(0.65 0.12 300);
+  --code-string: oklch(0.70 0.12 150);
+  --code-constant: oklch(0.65 0.15 25);
+  --code-type: oklch(0.75 0.08 80);
+  --code-builtin: oklch(0.70 0.08 200);
 }
 
 @layer base {

src/components/editor/floating-link-editor-plugin.tsx

@@ -203,15 +203,15 @@ export function FloatingLinkEditorPlugin({
           />
           <button
             type="button"
-            className="flex h-6 w-6 items-center justify-center text-muted-foreground hover:text-foreground"
+            className="flex h-11 w-11 sm:h-6 sm:w-6 items-center justify-center text-muted-foreground hover:text-foreground"
             onClick={handleSave}
             aria-label="Save link"
           >
             <Check className="h-3.5 w-3.5" />
           </button>
           <button
             type="button"
-            className="flex h-6 w-6 items-center justify-center text-muted-foreground hover:text-foreground"
+            className="flex h-11 w-11 sm:h-6 sm:w-6 items-center justify-center text-muted-foreground hover:text-foreground"
             onClick={() => {
               setIsEditing(false);
               setEditedUrl(linkUrl);
@@ -233,23 +233,23 @@ export function FloatingLinkEditorPlugin({
           </a>
           <button
             type="button"
-            className="flex h-6 w-6 items-center justify-center text-muted-foreground hover:text-foreground"
+            className="flex h-11 w-11 sm:h-6 sm:w-6 items-center justify-center text-muted-foreground hover:text-foreground"
             onClick={() => window.open(linkUrl, "_blank", "noopener")}
             aria-label="Open link"
           >
             <ExternalLink className="h-3.5 w-3.5" />
           </button>
           <button
             type="button"
-            className="flex h-6 w-6 items-center justify-center text-muted-foreground hover:text-foreground"
+            className="flex h-11 w-11 sm:h-6 sm:w-6 items-center justify-center text-muted-foreground hover:text-foreground"
             onClick={() => setIsEditing(true)}
             aria-label="Edit link"
           >
             <Pencil className="h-3.5 w-3.5" />
           </button>
           <button
             type="button"
-            className="flex h-6 w-6 items-center justify-center text-destructive hover:text-destructive/80"
+            className="flex h-11 w-11 sm:h-6 sm:w-6 items-center justify-center text-destructive hover:text-destructive/80"
             onClick={handleRemove}
             aria-label="Remove link"
           >

src/components/editor/floating-toolbar-plugin.tsx

@@ -224,7 +224,7 @@ function ToolbarButton({
   return (
     <button
       type="button"
-      className={`flex h-7 w-7 items-center justify-center text-sm ${
+      className={`flex h-11 w-11 sm:h-7 sm:w-7 items-center justify-center text-sm ${
         active
           ? "bg-white/[0.08] text-foreground"
           : "text-muted-foreground hover:bg-white/[0.04] hover:text-foreground"

src/components/editor/theme.test.ts

@@ -0,0 +1,63 @@
+import { describe, it, expect } from "vitest";
+import { editorTheme } from "./theme";
+
+/**
+ * Regression test for issue #56: arbitrary color values in the editor theme
+ * violate the design spec. All colors must use named design tokens
+ * (e.g. text-primary, text-muted-foreground) not arbitrary oklch/hex/rgb values.
+ */
+describe("editorTheme", () => {
+  const arbitraryColorPattern =
+    /text-\[(?:oklch|rgb|hsl|#)[^\]]*\]|bg-\[(?:oklch|rgb|hsl|#)[^\]]*\]/;
+
+  function collectClassStrings(
+    obj: Record<string, unknown>,
+    path = ""
+  ): Array<{ path: string; value: string }> {
+    const results: Array<{ path: string; value: string }> = [];
+    for (const [key, value] of Object.entries(obj)) {
+      const currentPath = path ? `${path}.${key}` : key;
+      if (typeof value === "string") {
+        results.push({ path: currentPath, value });
+      } else if (typeof value === "object" && value !== null) {
+        if (Array.isArray(value)) {
+          value.forEach((item, i) => {
+            if (typeof item === "string") {
+              results.push({ path: `${currentPath}[${i}]`, value: item });
+            }
+          });
+        } else {
+          results.push(
+            ...collectClassStrings(
+              value as Record<string, unknown>,
+              currentPath
+            )
+          );
+        }
+      }
+    }
+    return results;
+  }
+
+  it("does not contain arbitrary color values", () => {
+    const allClasses = collectClassStrings(
+      editorTheme as unknown as Record<string, unknown>
+    );
+    const violations = allClasses.filter(({ value }) =>
+      arbitraryColorPattern.test(value)
+    );
+
+    expect(violations).toEqual([]);
+  });
+
+  it("paragraph does not override line height", () => {
+    expect(editorTheme.paragraph).toBeDefined();
+    expect(editorTheme.paragraph).not.toMatch(/leading-/);
+  });
+
+  it("blockquote border uses design-spec opacity", () => {
+    const quote = editorTheme.quote as string;
+    expect(quote).toContain("border-white/[0.06]");
+    expect(quote).not.toContain("border-white/[0.12]");
+  });
+});

src/components/editor/theme.ts

@@ -1,14 +1,14 @@
 import type { EditorThemeClasses } from "lexical";
 
 export const editorTheme: EditorThemeClasses = {
-  paragraph: "mt-0.5 text-sm text-foreground leading-relaxed",
+  paragraph: "mt-0.5 text-sm text-foreground",
   heading: {
     h1: "mt-6 text-2xl font-semibold text-foreground",
     h2: "mt-5 text-xl font-semibold text-foreground",
     h3: "mt-4 text-lg font-medium text-foreground",
   },
   quote:
-    "mt-3 border-l-2 border-white/[0.12] pl-4 text-sm text-muted-foreground italic",
+    "mt-3 border-l-2 border-white/[0.06] pl-4 text-sm text-muted-foreground italic",
   list: {
     ul: "mt-0.5 list-disc pl-6 text-sm",
     ol: "mt-0.5 list-decimal pl-6 text-sm",
@@ -23,36 +23,36 @@ export const editorTheme: EditorThemeClasses = {
   },
   code: "mt-3 block bg-muted rounded-sm p-4 font-mono text-sm overflow-x-auto",
   codeHighlight: {
-    atrule: "text-[oklch(0.74_0.032_248)]",
-    attr: "text-[oklch(0.74_0.032_248)]",
-    boolean: "text-[oklch(0.65_0.15_25)]",
-    builtin: "text-[oklch(0.70_0.08_200)]",
+    atrule: "text-primary",
+    attr: "text-primary",
+    boolean: "text-code-constant",
+    builtin: "text-code-builtin",
     cdata: "text-muted-foreground",
-    char: "text-[oklch(0.70_0.12_150)]",
-    class: "text-[oklch(0.75_0.08_80)]",
-    "class-name": "text-[oklch(0.75_0.08_80)]",
+    char: "text-code-string",
+    class: "text-code-type",
+    "class-name": "text-code-type",
     comment: "text-muted-foreground",
-    constant: "text-[oklch(0.65_0.15_25)]",
+    constant: "text-code-constant",
     deleted: "text-destructive",
     doctype: "text-muted-foreground",
-    entity: "text-[oklch(0.65_0.15_25)]",
-    function: "text-[oklch(0.74_0.032_248)]",
-    important: "text-[oklch(0.65_0.15_25)]",
-    inserted: "text-[oklch(0.70_0.12_150)]",
-    keyword: "text-[oklch(0.65_0.12_300)]",
+    entity: "text-code-constant",
+    function: "text-primary",
+    important: "text-code-constant",
+    inserted: "text-code-string",
+    keyword: "text-code-keyword",
     namespace: "text-muted-foreground",
-    number: "text-[oklch(0.65_0.15_25)]",
-    operator: "text-[oklch(0.65_0.12_300)]",
+    number: "text-code-constant",
+    operator: "text-code-keyword",
     prolog: "text-muted-foreground",
-    property: "text-[oklch(0.74_0.032_248)]",
+    property: "text-primary",
     punctuation: "text-muted-foreground",
-    regex: "text-[oklch(0.65_0.15_25)]",
-    selector: "text-[oklch(0.70_0.12_150)]",
-    string: "text-[oklch(0.70_0.12_150)]",
-    symbol: "text-[oklch(0.65_0.15_25)]",
-    tag: "text-[oklch(0.65_0.15_25)]",
-    url: "text-[oklch(0.74_0.032_248)]",
-    variable: "text-[oklch(0.65_0.15_25)]",
+    regex: "text-code-constant",
+    selector: "text-code-string",
+    string: "text-code-string",
+    symbol: "text-code-constant",
+    tag: "text-code-constant",
+    url: "text-primary",
+    variable: "text-code-constant",
   },
   text: {
     bold: "font-bold",