refactor(appearance): adopt accent and highlight tokens

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

@@ -33,12 +33,12 @@ export function createThemeColorSwatches<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/appearance/src/components/theme-preview.tsx

@@ -26,7 +26,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 (
@@ -41,7 +41,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" />
@@ -52,7 +52,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">
@@ -87,8 +87,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/appearance/src/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:")
   })
 })