diff --git a/apps/web/src/pages/login-page.tsx b/apps/web/src/pages/login-page.tsx
index a2ee3d7..7f89513 100644
--- a/apps/web/src/pages/login-page.tsx
+++ b/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"
diff --git a/docs/src/index.css b/docs/src/index.css
index 8fb2332..2378135 100644
--- a/docs/src/index.css
+++ b/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);
-    --primary-foreground: var(--color-white);
+    --accent: var(--color-indigo-600);
+    --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));
-    --accent-foreground: var(--docs-foreground-light, var(--color-slate-950));
+    --highlight: var(--docs-surface-light, var(--color-slate-100));
+    --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);
-    --primary-foreground: var(--color-slate-950);
+    --accent: var(--color-indigo-400);
+    --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);
-    --accent-foreground: var(--docs-foreground-dark, var(--color-slate-100));
+    --highlight: var(--color-slate-800);
+    --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);
diff --git a/packages/blocks/src/blocks/appearance/theme-color-picker.tsx b/packages/blocks/src/blocks/appearance/theme-color-picker.tsx
index cdcd2b5..65d45b6 100644
--- a/packages/blocks/src/blocks/appearance/theme-color-picker.tsx
+++ b/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"],
       },
     }
   })
diff --git a/packages/blocks/src/blocks/appearance/theme-preview.tsx b/packages/blocks/src/blocks/appearance/theme-preview.tsx
index 021ed04..52d1273 100644
--- a/packages/blocks/src/blocks/appearance/theme-preview.tsx
+++ b/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" />
diff --git a/packages/blocks/src/blocks/appearance/theme.test.ts b/packages/blocks/src/blocks/appearance/theme.test.ts
index 33c6c26..f96ed08 100644
--- a/packages/blocks/src/blocks/appearance/theme.test.ts
+++ b/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:")
   })
 })
diff --git a/packages/blocks/src/blocks/appearance/themes.ts b/packages/blocks/src/blocks/appearance/themes.ts
index d8e8751..0cc8441 100644
--- a/packages/blocks/src/blocks/appearance/themes.ts
+++ b/packages/blocks/src/blocks/appearance/themes.ts
@@ -84,14 +84,14 @@ export const themes: Theme[] = [
         "card-foreground": "oklch(0.145 0 0)",
         popover: "oklch(1 0 0)",
         "popover-foreground": "oklch(0.145 0 0)",
-        primary: "oklch(0.205 0 0)",
-        "primary-foreground": "oklch(0.985 0 0)",
+        accent: "oklch(0.205 0 0)",
+        "accent-foreground": "oklch(0.985 0 0)",
         secondary: "oklch(0.97 0 0)",
         "secondary-foreground": "oklch(0.205 0 0)",
         muted: "oklch(0.97 0 0)",
         "muted-foreground": "oklch(0.556 0 0)",
-        accent: "oklch(0.97 0 0)",
-        "accent-foreground": "oklch(0.205 0 0)",
+        highlight: "oklch(0.97 0 0)",
+        "highlight-foreground": "oklch(0.205 0 0)",
         destructive: "oklch(0.577 0.245 27.325)",
         border: "oklch(0.922 0 0)",
         input: "oklch(0.922 0 0)",
@@ -104,10 +104,10 @@ export const themes: Theme[] = [
         radius: "0.625rem",
         sidebar: "oklch(0.985 0 0)",
         "sidebar-foreground": "oklch(0.145 0 0)",
-        "sidebar-primary": "oklch(0.205 0 0)",
-        "sidebar-primary-foreground": "oklch(0.985 0 0)",
-        "sidebar-accent": "oklch(0.97 0 0)",
-        "sidebar-accent-foreground": "oklch(0.205 0 0)",
+        "sidebar-accent": "oklch(0.205 0 0)",
+        "sidebar-accent-foreground": "oklch(0.985 0 0)",
+        "sidebar-highlight": "oklch(0.97 0 0)",
+        "sidebar-highlight-foreground": "oklch(0.205 0 0)",
         "sidebar-border": "oklch(0.922 0 0)",
         "sidebar-ring": "oklch(0.708 0 0)",
       },
@@ -118,14 +118,14 @@ export const themes: Theme[] = [
         "card-foreground": "oklch(0.985 0 0)",
         popover: "oklch(0.205 0 0)",
         "popover-foreground": "oklch(0.985 0 0)",
-        primary: "oklch(0.922 0 0)",
-        "primary-foreground": "oklch(0.205 0 0)",
+        accent: "oklch(0.922 0 0)",
+        "accent-foreground": "oklch(0.205 0 0)",
         secondary: "oklch(0.269 0 0)",
         "secondary-foreground": "oklch(0.985 0 0)",
         muted: "oklch(0.269 0 0)",
         "muted-foreground": "oklch(0.708 0 0)",
-        accent: "oklch(0.269 0 0)",
-        "accent-foreground": "oklch(0.985 0 0)",
+        highlight: "oklch(0.269 0 0)",
+        "highlight-foreground": "oklch(0.985 0 0)",
         destructive: "oklch(0.704 0.191 22.216)",
         border: "oklch(1 0 0 / 10%)",
         input: "oklch(1 0 0 / 15%)",
@@ -137,10 +137,10 @@ export const themes: Theme[] = [
         "chart-5": "oklch(0.269 0 0)",
         sidebar: "oklch(0.205 0 0)",
         "sidebar-foreground": "oklch(0.985 0 0)",
-        "sidebar-primary": "oklch(0.488 0.243 264.376)",
-        "sidebar-primary-foreground": "oklch(0.985 0 0)",
-        "sidebar-accent": "oklch(0.269 0 0)",
+        "sidebar-accent": "oklch(0.488 0.243 264.376)",
         "sidebar-accent-foreground": "oklch(0.985 0 0)",
+        "sidebar-highlight": "oklch(0.269 0 0)",
+        "sidebar-highlight-foreground": "oklch(0.985 0 0)",
         "sidebar-border": "oklch(1 0 0 / 10%)",
         "sidebar-ring": "oklch(0.556 0 0)",
       },
@@ -157,14 +157,14 @@ export const themes: Theme[] = [
         "card-foreground": "oklch(0.147 0.004 49.25)",
         popover: "oklch(1 0 0)",
         "popover-foreground": "oklch(0.147 0.004 49.25)",
-        primary: "oklch(0.216 0.006 56.043)",
-        "primary-foreground": "oklch(0.985 0.001 106.423)",
+        accent: "oklch(0.216 0.006 56.043)",
+        "accent-foreground": "oklch(0.985 0.001 106.423)",
         secondary: "oklch(0.97 0.001 106.424)",
         "secondary-foreground": "oklch(0.216 0.006 56.043)",
         muted: "oklch(0.97 0.001 106.424)",
         "muted-foreground": "oklch(0.553 0.013 58.071)",
-        accent: "oklch(0.97 0.001 106.424)",
-        "accent-foreground": "oklch(0.216 0.006 56.043)",
+        highlight: "oklch(0.97 0.001 106.424)",
+        "highlight-foreground": "oklch(0.216 0.006 56.043)",
         destructive: "oklch(0.577 0.245 27.325)",
         border: "oklch(0.923 0.003 48.717)",
         input: "oklch(0.923 0.003 48.717)",
@@ -177,10 +177,10 @@ export const themes: Theme[] = [
         radius: "0.625rem",
         sidebar: "oklch(0.985 0.001 106.423)",
         "sidebar-foreground": "oklch(0.147 0.004 49.25)",
-        "sidebar-primary": "oklch(0.216 0.006 56.043)",
-        "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)",
-        "sidebar-accent": "oklch(0.97 0.001 106.424)",
-        "sidebar-accent-foreground": "oklch(0.216 0.006 56.043)",
+        "sidebar-accent": "oklch(0.216 0.006 56.043)",
+        "sidebar-accent-foreground": "oklch(0.985 0.001 106.423)",
+        "sidebar-highlight": "oklch(0.97 0.001 106.424)",
+        "sidebar-highlight-foreground": "oklch(0.216 0.006 56.043)",
         "sidebar-border": "oklch(0.923 0.003 48.717)",
         "sidebar-ring": "oklch(0.709 0.01 56.259)",
       },
@@ -191,14 +191,14 @@ export const themes: Theme[] = [
         "card-foreground": "oklch(0.985 0.001 106.423)",
         popover: "oklch(0.216 0.006 56.043)",
         "popover-foreground": "oklch(0.985 0.001 106.423)",
-        primary: "oklch(0.923 0.003 48.717)",
-        "primary-foreground": "oklch(0.216 0.006 56.043)",
+        accent: "oklch(0.923 0.003 48.717)",
+        "accent-foreground": "oklch(0.216 0.006 56.043)",
         secondary: "oklch(0.268 0.007 34.298)",
         "secondary-foreground": "oklch(0.985 0.001 106.423)",
         muted: "oklch(0.268 0.007 34.298)",
         "muted-foreground": "oklch(0.709 0.01 56.259)",
-        accent: "oklch(0.268 0.007 34.298)",
-        "accent-foreground": "oklch(0.985 0.001 106.423)",
+        highlight: "oklch(0.268 0.007 34.298)",
+        "highlight-foreground": "oklch(0.985 0.001 106.423)",
         destructive: "oklch(0.704 0.191 22.216)",
         border: "oklch(1 0 0 / 10%)",
         input: "oklch(1 0 0 / 15%)",
@@ -210,10 +210,10 @@ export const themes: Theme[] = [
         "chart-5": "oklch(0.268 0.007 34.298)",
         sidebar: "oklch(0.216 0.006 56.043)",
         "sidebar-foreground": "oklch(0.985 0.001 106.423)",
-        "sidebar-primary": "oklch(0.488 0.243 264.376)",
-        "sidebar-primary-foreground": "oklch(0.985 0.001 106.423)",
-        "sidebar-accent": "oklch(0.268 0.007 34.298)",
+        "sidebar-accent": "oklch(0.488 0.243 264.376)",
         "sidebar-accent-foreground": "oklch(0.985 0.001 106.423)",
+        "sidebar-highlight": "oklch(0.268 0.007 34.298)",
+        "sidebar-highlight-foreground": "oklch(0.985 0.001 106.423)",
         "sidebar-border": "oklch(1 0 0 / 10%)",
         "sidebar-ring": "oklch(0.553 0.013 58.071)",
       },
@@ -230,14 +230,14 @@ export const themes: Theme[] = [
         "card-foreground": "oklch(0.141 0.005 285.823)",
         popover: "oklch(1 0 0)",
         "popover-foreground": "oklch(0.141 0.005 285.823)",
-        primary: "oklch(0.21 0.006 285.885)",
-        "primary-foreground": "oklch(0.985 0 0)",
+        accent: "oklch(0.21 0.006 285.885)",
+        "accent-foreground": "oklch(0.985 0 0)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
         muted: "oklch(0.967 0.001 286.375)",
         "muted-foreground": "oklch(0.552 0.016 285.938)",
-        accent: "oklch(0.967 0.001 286.375)",
-        "accent-foreground": "oklch(0.21 0.006 285.885)",
+        highlight: "oklch(0.967 0.001 286.375)",
+        "highlight-foreground": "oklch(0.21 0.006 285.885)",
         destructive: "oklch(0.577 0.245 27.325)",
         border: "oklch(0.92 0.004 286.32)",
         input: "oklch(0.92 0.004 286.32)",
@@ -250,10 +250,10 @@ export const themes: Theme[] = [
         radius: "0.625rem",
         sidebar: "oklch(0.985 0 0)",
         "sidebar-foreground": "oklch(0.141 0.005 285.823)",
-        "sidebar-primary": "oklch(0.21 0.006 285.885)",
-        "sidebar-primary-foreground": "oklch(0.985 0 0)",
-        "sidebar-accent": "oklch(0.967 0.001 286.375)",
-        "sidebar-accent-foreground": "oklch(0.21 0.006 285.885)",
+        "sidebar-accent": "oklch(0.21 0.006 285.885)",
+        "sidebar-accent-foreground": "oklch(0.985 0 0)",
+        "sidebar-highlight": "oklch(0.967 0.001 286.375)",
+        "sidebar-highlight-foreground": "oklch(0.21 0.006 285.885)",
         "sidebar-border": "oklch(0.92 0.004 286.32)",
         "sidebar-ring": "oklch(0.705 0.015 286.067)",
       },
@@ -264,14 +264,14 @@ export const themes: Theme[] = [
         "card-foreground": "oklch(0.985 0 0)",
         popover: "oklch(0.21 0.006 285.885)",
         "popover-foreground": "oklch(0.985 0 0)",
-        primary: "oklch(0.92 0.004 286.32)",
-        "primary-foreground": "oklch(0.21 0.006 285.885)",
+        accent: "oklch(0.92 0.004 286.32)",
+        "accent-foreground": "oklch(0.21 0.006 285.885)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
         muted: "oklch(0.274 0.006 286.033)",
         "muted-foreground": "oklch(0.705 0.015 286.067)",
-        accent: "oklch(0.274 0.006 286.033)",
-        "accent-foreground": "oklch(0.985 0 0)",
+        highlight: "oklch(0.274 0.006 286.033)",
+        "highlight-foreground": "oklch(0.985 0 0)",
         destructive: "oklch(0.704 0.191 22.216)",
         border: "oklch(1 0 0 / 10%)",
         input: "oklch(1 0 0 / 15%)",
@@ -283,10 +283,10 @@ export const themes: Theme[] = [
         "chart-5": "oklch(0.274 0.006 286.033)",
         sidebar: "oklch(0.21 0.006 285.885)",
         "sidebar-foreground": "oklch(0.985 0 0)",
-        "sidebar-primary": "oklch(0.488 0.243 264.376)",
-        "sidebar-primary-foreground": "oklch(0.985 0 0)",
-        "sidebar-accent": "oklch(0.274 0.006 286.033)",
+        "sidebar-accent": "oklch(0.488 0.243 264.376)",
         "sidebar-accent-foreground": "oklch(0.985 0 0)",
+        "sidebar-highlight": "oklch(0.274 0.006 286.033)",
+        "sidebar-highlight-foreground": "oklch(0.985 0 0)",
         "sidebar-border": "oklch(1 0 0 / 10%)",
         "sidebar-ring": "oklch(0.552 0.016 285.938)",
       },
@@ -303,14 +303,14 @@ export const themes: Theme[] = [
         "card-foreground": "oklch(0.145 0.008 326)",
         popover: "oklch(1 0 0)",
         "popover-foreground": "oklch(0.145 0.008 326)",
-        primary: "oklch(0.212 0.019 322.12)",
-        "primary-foreground": "oklch(0.985 0 0)",
+        accent: "oklch(0.212 0.019 322.12)",
+        "accent-foreground": "oklch(0.985 0 0)",
         secondary: "oklch(0.96 0.003 325.6)",
         "secondary-foreground": "oklch(0.212 0.019 322.12)",
         muted: "oklch(0.96 0.003 325.6)",
         "muted-foreground": "oklch(0.542 0.034 322.5)",
-        accent: "oklch(0.96 0.003 325.6)",
-        "accent-foreground": "oklch(0.212 0.019 322.12)",
+        highlight: "oklch(0.96 0.003 325.6)",
+        "highlight-foreground": "oklch(0.212 0.019 322.12)",
         destructive: "oklch(0.577 0.245 27.325)",
         border: "oklch(0.922 0.005 325.62)",
         input: "oklch(0.922 0.005 325.62)",
@@ -323,10 +323,10 @@ export const themes: Theme[] = [
         radius: "0.625rem",
         sidebar: "oklch(0.985 0 0)",
         "sidebar-foreground": "oklch(0.145 0.008 326)",
-        "sidebar-primary": "oklch(0.212 0.019 322.12)",
-        "sidebar-primary-foreground": "oklch(0.985 0 0)",
-        "sidebar-accent": "oklch(0.96 0.003 325.6)",
-        "sidebar-accent-foreground": "oklch(0.212 0.019 322.12)",
+        "sidebar-accent": "oklch(0.212 0.019 322.12)",
+        "sidebar-accent-foreground": "oklch(0.985 0 0)",
+        "sidebar-highlight": "oklch(0.96 0.003 325.6)",
+        "sidebar-highlight-foreground": "oklch(0.212 0.019 322.12)",
         "sidebar-border": "oklch(0.922 0.005 325.62)",
         "sidebar-ring": "oklch(0.711 0.019 323.02)",
       },
@@ -337,14 +337,14 @@ export const themes: Theme[] = [
         "card-foreground": "oklch(0.985 0 0)",
         popover: "oklch(0.212 0.019 322.12)",
         "popover-foreground": "oklch(0.985 0 0)",
-        primary: "oklch(0.922 0.005 325.62)",
-        "primary-foreground": "oklch(0.212 0.019 322.12)",
+        accent: "oklch(0.922 0.005 325.62)",
+        "accent-foreground": "oklch(0.212 0.019 322.12)",
         secondary: "oklch(0.263 0.024 320.12)",
         "secondary-foreground": "oklch(0.985 0 0)",
         muted: "oklch(0.263 0.024 320.12)",
         "muted-foreground": "oklch(0.711 0.019 323.02)",
-        accent: "oklch(0.263 0.024 320.12)",
-        "accent-foreground": "oklch(0.985 0 0)",
+        highlight: "oklch(0.263 0.024 320.12)",
+        "highlight-foreground": "oklch(0.985 0 0)",
         destructive: "oklch(0.704 0.191 22.216)",
         border: "oklch(1 0 0 / 10%)",
         input: "oklch(1 0 0 / 15%)",
@@ -356,10 +356,10 @@ export const themes: Theme[] = [
         "chart-5": "oklch(0.263 0.024 320.12)",
         sidebar: "oklch(0.212 0.019 322.12)",
         "sidebar-foreground": "oklch(0.985 0 0)",
-        "sidebar-primary": "oklch(0.488 0.243 264.376)",
-        "sidebar-primary-foreground": "oklch(0.985 0 0)",
-        "sidebar-accent": "oklch(0.263 0.024 320.12)",
+        "sidebar-accent": "oklch(0.488 0.243 264.376)",
         "sidebar-accent-foreground": "oklch(0.985 0 0)",
+        "sidebar-highlight": "oklch(0.263 0.024 320.12)",
+        "sidebar-highlight-foreground": "oklch(0.985 0 0)",
         "sidebar-border": "oklch(1 0 0 / 10%)",
         "sidebar-ring": "oklch(0.542 0.034 322.5)",
       },
@@ -376,14 +376,14 @@ export const themes: Theme[] = [
         "card-foreground": "oklch(0.153 0.006 107.1)",
         popover: "oklch(1 0 0)",
         "popover-foreground": "oklch(0.153 0.006 107.1)",
-        primary: "oklch(0.228 0.013 107.4)",
-        "primary-foreground": "oklch(0.988 0.003 106.5)",
+        accent: "oklch(0.228 0.013 107.4)",
+        "accent-foreground": "oklch(0.988 0.003 106.5)",
         secondary: "oklch(0.966 0.005 106.5)",
         "secondary-foreground": "oklch(0.228 0.013 107.4)",
         muted: "oklch(0.966 0.005 106.5)",
         "muted-foreground": "oklch(0.58 0.031 107.3)",
-        accent: "oklch(0.966 0.005 106.5)",
-        "accent-foreground": "oklch(0.228 0.013 107.4)",
+        highlight: "oklch(0.966 0.005 106.5)",
+        "highlight-foreground": "oklch(0.228 0.013 107.4)",
         destructive: "oklch(0.577 0.245 27.325)",
         border: "oklch(0.93 0.007 106.5)",
         input: "oklch(0.93 0.007 106.5)",
@@ -396,10 +396,10 @@ export const themes: Theme[] = [
         radius: "0.625rem",
         sidebar: "oklch(0.988 0.003 106.5)",
         "sidebar-foreground": "oklch(0.153 0.006 107.1)",
-        "sidebar-primary": "oklch(0.228 0.013 107.4)",
-        "sidebar-primary-foreground": "oklch(0.988 0.003 106.5)",
-        "sidebar-accent": "oklch(0.966 0.005 106.5)",
-        "sidebar-accent-foreground": "oklch(0.228 0.013 107.4)",
+        "sidebar-accent": "oklch(0.228 0.013 107.4)",
+        "sidebar-accent-foreground": "oklch(0.988 0.003 106.5)",
+        "sidebar-highlight": "oklch(0.966 0.005 106.5)",
+        "sidebar-highlight-foreground": "oklch(0.228 0.013 107.4)",
         "sidebar-border": "oklch(0.93 0.007 106.5)",
         "sidebar-ring": "oklch(0.737 0.021 106.9)",
       },
@@ -410,14 +410,14 @@ export const themes: Theme[] = [
         "card-foreground": "oklch(0.988 0.003 106.5)",
         popover: "oklch(0.228 0.013 107.4)",
         "popover-foreground": "oklch(0.988 0.003 106.5)",
-        primary: "oklch(0.93 0.007 106.5)",
-        "primary-foreground": "oklch(0.228 0.013 107.4)",
+        accent: "oklch(0.93 0.007 106.5)",
+        "accent-foreground": "oklch(0.228 0.013 107.4)",
         secondary: "oklch(0.286 0.016 107.4)",
         "secondary-foreground": "oklch(0.988 0.003 106.5)",
         muted: "oklch(0.286 0.016 107.4)",
         "muted-foreground": "oklch(0.737 0.021 106.9)",
-        accent: "oklch(0.286 0.016 107.4)",
-        "accent-foreground": "oklch(0.988 0.003 106.5)",
+        highlight: "oklch(0.286 0.016 107.4)",
+        "highlight-foreground": "oklch(0.988 0.003 106.5)",
         destructive: "oklch(0.704 0.191 22.216)",
         border: "oklch(1 0 0 / 10%)",
         input: "oklch(1 0 0 / 15%)",
@@ -429,10 +429,10 @@ export const themes: Theme[] = [
         "chart-5": "oklch(0.286 0.016 107.4)",
         sidebar: "oklch(0.228 0.013 107.4)",
         "sidebar-foreground": "oklch(0.988 0.003 106.5)",
-        "sidebar-primary": "oklch(0.488 0.243 264.376)",
-        "sidebar-primary-foreground": "oklch(0.988 0.003 106.5)",
-        "sidebar-accent": "oklch(0.286 0.016 107.4)",
+        "sidebar-accent": "oklch(0.488 0.243 264.376)",
         "sidebar-accent-foreground": "oklch(0.988 0.003 106.5)",
+        "sidebar-highlight": "oklch(0.286 0.016 107.4)",
+        "sidebar-highlight-foreground": "oklch(0.988 0.003 106.5)",
         "sidebar-border": "oklch(1 0 0 / 10%)",
         "sidebar-ring": "oklch(0.58 0.031 107.3)",
       },
@@ -449,14 +449,14 @@ export const themes: Theme[] = [
         "card-foreground": "oklch(0.148 0.004 228.8)",
         popover: "oklch(1 0 0)",
         "popover-foreground": "oklch(0.148 0.004 228.8)",
-        primary: "oklch(0.218 0.008 223.9)",
-        "primary-foreground": "oklch(0.987 0.002 197.1)",
+        accent: "oklch(0.218 0.008 223.9)",
+        "accent-foreground": "oklch(0.987 0.002 197.1)",
         secondary: "oklch(0.963 0.002 197.1)",
         "secondary-foreground": "oklch(0.218 0.008 223.9)",
         muted: "oklch(0.963 0.002 197.1)",
         "muted-foreground": "oklch(0.56 0.021 213.5)",
-        accent: "oklch(0.963 0.002 197.1)",
-        "accent-foreground": "oklch(0.218 0.008 223.9)",
+        highlight: "oklch(0.963 0.002 197.1)",
+        "highlight-foreground": "oklch(0.218 0.008 223.9)",
         destructive: "oklch(0.577 0.245 27.325)",
         border: "oklch(0.925 0.005 214.3)",
         input: "oklch(0.925 0.005 214.3)",
@@ -469,10 +469,10 @@ export const themes: Theme[] = [
         radius: "0.625rem",
         sidebar: "oklch(0.987 0.002 197.1)",
         "sidebar-foreground": "oklch(0.148 0.004 228.8)",
-        "sidebar-primary": "oklch(0.218 0.008 223.9)",
-        "sidebar-primary-foreground": "oklch(0.987 0.002 197.1)",
-        "sidebar-accent": "oklch(0.963 0.002 197.1)",
-        "sidebar-accent-foreground": "oklch(0.218 0.008 223.9)",
+        "sidebar-accent": "oklch(0.218 0.008 223.9)",
+        "sidebar-accent-foreground": "oklch(0.987 0.002 197.1)",
+        "sidebar-highlight": "oklch(0.963 0.002 197.1)",
+        "sidebar-highlight-foreground": "oklch(0.218 0.008 223.9)",
         "sidebar-border": "oklch(0.925 0.005 214.3)",
         "sidebar-ring": "oklch(0.723 0.014 214.4)",
       },
@@ -483,14 +483,14 @@ export const themes: Theme[] = [
         "card-foreground": "oklch(0.987 0.002 197.1)",
         popover: "oklch(0.218 0.008 223.9)",
         "popover-foreground": "oklch(0.987 0.002 197.1)",
-        primary: "oklch(0.925 0.005 214.3)",
-        "primary-foreground": "oklch(0.218 0.008 223.9)",
+        accent: "oklch(0.925 0.005 214.3)",
+        "accent-foreground": "oklch(0.218 0.008 223.9)",
         secondary: "oklch(0.275 0.011 216.9)",
         "secondary-foreground": "oklch(0.987 0.002 197.1)",
         muted: "oklch(0.275 0.011 216.9)",
         "muted-foreground": "oklch(0.723 0.014 214.4)",
-        accent: "oklch(0.275 0.011 216.9)",
-        "accent-foreground": "oklch(0.987 0.002 197.1)",
+        highlight: "oklch(0.275 0.011 216.9)",
+        "highlight-foreground": "oklch(0.987 0.002 197.1)",
         destructive: "oklch(0.704 0.191 22.216)",
         border: "oklch(1 0 0 / 10%)",
         input: "oklch(1 0 0 / 15%)",
@@ -502,10 +502,10 @@ export const themes: Theme[] = [
         "chart-5": "oklch(0.275 0.011 216.9)",
         sidebar: "oklch(0.218 0.008 223.9)",
         "sidebar-foreground": "oklch(0.987 0.002 197.1)",
-        "sidebar-primary": "oklch(0.488 0.243 264.376)",
-        "sidebar-primary-foreground": "oklch(0.987 0.002 197.1)",
-        "sidebar-accent": "oklch(0.275 0.011 216.9)",
+        "sidebar-accent": "oklch(0.488 0.243 264.376)",
         "sidebar-accent-foreground": "oklch(0.987 0.002 197.1)",
+        "sidebar-highlight": "oklch(0.275 0.011 216.9)",
+        "sidebar-highlight-foreground": "oklch(0.987 0.002 197.1)",
         "sidebar-border": "oklch(1 0 0 / 10%)",
         "sidebar-ring": "oklch(0.56 0.021 213.5)",
       },
@@ -522,14 +522,14 @@ export const themes: Theme[] = [
         "card-foreground": "oklch(0.147 0.004 49.3)",
         popover: "oklch(1 0 0)",
         "popover-foreground": "oklch(0.147 0.004 49.3)",
-        primary: "oklch(0.214 0.009 43.1)",
-        "primary-foreground": "oklch(0.986 0.002 67.8)",
+        accent: "oklch(0.214 0.009 43.1)",
+        "accent-foreground": "oklch(0.986 0.002 67.8)",
         secondary: "oklch(0.96 0.002 17.2)",
         "secondary-foreground": "oklch(0.214 0.009 43.1)",
         muted: "oklch(0.96 0.002 17.2)",
         "muted-foreground": "oklch(0.547 0.021 43.1)",
-        accent: "oklch(0.96 0.002 17.2)",
-        "accent-foreground": "oklch(0.214 0.009 43.1)",
+        highlight: "oklch(0.96 0.002 17.2)",
+        "highlight-foreground": "oklch(0.214 0.009 43.1)",
         destructive: "oklch(0.577 0.245 27.325)",
         border: "oklch(0.922 0.005 34.3)",
         input: "oklch(0.922 0.005 34.3)",
@@ -542,10 +542,10 @@ export const themes: Theme[] = [
         radius: "0.625rem",
         sidebar: "oklch(0.986 0.002 67.8)",
         "sidebar-foreground": "oklch(0.147 0.004 49.3)",
-        "sidebar-primary": "oklch(0.214 0.009 43.1)",
-        "sidebar-primary-foreground": "oklch(0.986 0.002 67.8)",
-        "sidebar-accent": "oklch(0.96 0.002 17.2)",
-        "sidebar-accent-foreground": "oklch(0.214 0.009 43.1)",
+        "sidebar-accent": "oklch(0.214 0.009 43.1)",
+        "sidebar-accent-foreground": "oklch(0.986 0.002 67.8)",
+        "sidebar-highlight": "oklch(0.96 0.002 17.2)",
+        "sidebar-highlight-foreground": "oklch(0.214 0.009 43.1)",
         "sidebar-border": "oklch(0.922 0.005 34.3)",
         "sidebar-ring": "oklch(0.714 0.014 41.2)",
       },
@@ -556,14 +556,14 @@ export const themes: Theme[] = [
         "card-foreground": "oklch(0.986 0.002 67.8)",
         popover: "oklch(0.214 0.009 43.1)",
         "popover-foreground": "oklch(0.986 0.002 67.8)",
-        primary: "oklch(0.922 0.005 34.3)",
-        "primary-foreground": "oklch(0.214 0.009 43.1)",
+        accent: "oklch(0.922 0.005 34.3)",
+        "accent-foreground": "oklch(0.214 0.009 43.1)",
         secondary: "oklch(0.268 0.011 36.5)",
         "secondary-foreground": "oklch(0.986 0.002 67.8)",
         muted: "oklch(0.268 0.011 36.5)",
         "muted-foreground": "oklch(0.714 0.014 41.2)",
-        accent: "oklch(0.268 0.011 36.5)",
-        "accent-foreground": "oklch(0.986 0.002 67.8)",
+        highlight: "oklch(0.268 0.011 36.5)",
+        "highlight-foreground": "oklch(0.986 0.002 67.8)",
         destructive: "oklch(0.704 0.191 22.216)",
         border: "oklch(1 0 0 / 10%)",
         input: "oklch(1 0 0 / 15%)",
@@ -575,10 +575,10 @@ export const themes: Theme[] = [
         "chart-5": "oklch(0.268 0.011 36.5)",
         sidebar: "oklch(0.214 0.009 43.1)",
         "sidebar-foreground": "oklch(0.986 0.002 67.8)",
-        "sidebar-primary": "oklch(0.488 0.243 264.376)",
-        "sidebar-primary-foreground": "oklch(0.986 0.002 67.8)",
-        "sidebar-accent": "oklch(0.268 0.011 36.5)",
+        "sidebar-accent": "oklch(0.488 0.243 264.376)",
         "sidebar-accent-foreground": "oklch(0.986 0.002 67.8)",
+        "sidebar-highlight": "oklch(0.268 0.011 36.5)",
+        "sidebar-highlight-foreground": "oklch(0.986 0.002 67.8)",
         "sidebar-border": "oklch(1 0 0 / 10%)",
         "sidebar-ring": "oklch(0.547 0.021 43.1)",
       },
@@ -589,8 +589,8 @@ export const themes: Theme[] = [
     title: "Amber",
     cssVars: {
       light: {
-        primary: "oklch(0.555 0.163 48.998)",
-        "primary-foreground": "oklch(0.987 0.022 95.277)",
+        accent: "oklch(0.555 0.163 48.998)",
+        "accent-foreground": "oklch(0.987 0.022 95.277)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
         "chart-1": "oklch(0.879 0.169 91.605)",
@@ -598,12 +598,12 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.666 0.179 58.318)",
         "chart-4": "oklch(0.555 0.163 48.998)",
         "chart-5": "oklch(0.473 0.137 46.201)",
-        "sidebar-primary": "oklch(0.666 0.179 58.318)",
-        "sidebar-primary-foreground": "oklch(0.987 0.022 95.277)",
+        "sidebar-accent": "oklch(0.666 0.179 58.318)",
+        "sidebar-accent-foreground": "oklch(0.987 0.022 95.277)",
       },
       dark: {
-        primary: "oklch(0.473 0.137 46.201)",
-        "primary-foreground": "oklch(0.987 0.022 95.277)",
+        accent: "oklch(0.473 0.137 46.201)",
+        "accent-foreground": "oklch(0.987 0.022 95.277)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
         "chart-1": "oklch(0.879 0.169 91.605)",
@@ -611,8 +611,8 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.666 0.179 58.318)",
         "chart-4": "oklch(0.555 0.163 48.998)",
         "chart-5": "oklch(0.473 0.137 46.201)",
-        "sidebar-primary": "oklch(0.769 0.188 70.08)",
-        "sidebar-primary-foreground": "oklch(0.279 0.077 45.635)",
+        "sidebar-accent": "oklch(0.769 0.188 70.08)",
+        "sidebar-accent-foreground": "oklch(0.279 0.077 45.635)",
       },
     },
   },
@@ -621,8 +621,8 @@ export const themes: Theme[] = [
     title: "Blue",
     cssVars: {
       light: {
-        primary: "oklch(0.488 0.243 264.376)",
-        "primary-foreground": "oklch(0.97 0.014 254.604)",
+        accent: "oklch(0.488 0.243 264.376)",
+        "accent-foreground": "oklch(0.97 0.014 254.604)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
         "chart-1": "oklch(0.809 0.105 251.813)",
@@ -630,12 +630,12 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.546 0.245 262.881)",
         "chart-4": "oklch(0.488 0.243 264.376)",
         "chart-5": "oklch(0.424 0.199 265.638)",
-        "sidebar-primary": "oklch(0.546 0.245 262.881)",
-        "sidebar-primary-foreground": "oklch(0.97 0.014 254.604)",
+        "sidebar-accent": "oklch(0.546 0.245 262.881)",
+        "sidebar-accent-foreground": "oklch(0.97 0.014 254.604)",
       },
       dark: {
-        primary: "oklch(0.424 0.199 265.638)",
-        "primary-foreground": "oklch(0.97 0.014 254.604)",
+        accent: "oklch(0.424 0.199 265.638)",
+        "accent-foreground": "oklch(0.97 0.014 254.604)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
         "chart-1": "oklch(0.809 0.105 251.813)",
@@ -643,8 +643,8 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.546 0.245 262.881)",
         "chart-4": "oklch(0.488 0.243 264.376)",
         "chart-5": "oklch(0.424 0.199 265.638)",
-        "sidebar-primary": "oklch(0.623 0.214 259.815)",
-        "sidebar-primary-foreground": "oklch(0.97 0.014 254.604)",
+        "sidebar-accent": "oklch(0.623 0.214 259.815)",
+        "sidebar-accent-foreground": "oklch(0.97 0.014 254.604)",
       },
     },
   },
@@ -653,8 +653,8 @@ export const themes: Theme[] = [
     title: "Cyan",
     cssVars: {
       light: {
-        primary: "oklch(0.52 0.105 223.128)",
-        "primary-foreground": "oklch(0.984 0.019 200.873)",
+        accent: "oklch(0.52 0.105 223.128)",
+        "accent-foreground": "oklch(0.984 0.019 200.873)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
         "chart-1": "oklch(0.865 0.127 207.078)",
@@ -662,12 +662,12 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.609 0.126 221.723)",
         "chart-4": "oklch(0.52 0.105 223.128)",
         "chart-5": "oklch(0.45 0.085 224.283)",
-        "sidebar-primary": "oklch(0.609 0.126 221.723)",
-        "sidebar-primary-foreground": "oklch(0.984 0.019 200.873)",
+        "sidebar-accent": "oklch(0.609 0.126 221.723)",
+        "sidebar-accent-foreground": "oklch(0.984 0.019 200.873)",
       },
       dark: {
-        primary: "oklch(0.45 0.085 224.283)",
-        "primary-foreground": "oklch(0.984 0.019 200.873)",
+        accent: "oklch(0.45 0.085 224.283)",
+        "accent-foreground": "oklch(0.984 0.019 200.873)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
         "chart-1": "oklch(0.865 0.127 207.078)",
@@ -675,8 +675,8 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.609 0.126 221.723)",
         "chart-4": "oklch(0.52 0.105 223.128)",
         "chart-5": "oklch(0.45 0.085 224.283)",
-        "sidebar-primary": "oklch(0.715 0.143 215.221)",
-        "sidebar-primary-foreground": "oklch(0.302 0.056 229.695)",
+        "sidebar-accent": "oklch(0.715 0.143 215.221)",
+        "sidebar-accent-foreground": "oklch(0.302 0.056 229.695)",
       },
     },
   },
@@ -685,8 +685,8 @@ export const themes: Theme[] = [
     title: "Emerald",
     cssVars: {
       light: {
-        primary: "oklch(0.508 0.118 165.612)",
-        "primary-foreground": "oklch(0.979 0.021 166.113)",
+        accent: "oklch(0.508 0.118 165.612)",
+        "accent-foreground": "oklch(0.979 0.021 166.113)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
         "chart-1": "oklch(0.845 0.143 164.978)",
@@ -694,12 +694,12 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.596 0.145 163.225)",
         "chart-4": "oklch(0.508 0.118 165.612)",
         "chart-5": "oklch(0.432 0.095 166.913)",
-        "sidebar-primary": "oklch(0.596 0.145 163.225)",
-        "sidebar-primary-foreground": "oklch(0.979 0.021 166.113)",
+        "sidebar-accent": "oklch(0.596 0.145 163.225)",
+        "sidebar-accent-foreground": "oklch(0.979 0.021 166.113)",
       },
       dark: {
-        primary: "oklch(0.432 0.095 166.913)",
-        "primary-foreground": "oklch(0.979 0.021 166.113)",
+        accent: "oklch(0.432 0.095 166.913)",
+        "accent-foreground": "oklch(0.979 0.021 166.113)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
         "chart-1": "oklch(0.845 0.143 164.978)",
@@ -707,8 +707,8 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.596 0.145 163.225)",
         "chart-4": "oklch(0.508 0.118 165.612)",
         "chart-5": "oklch(0.432 0.095 166.913)",
-        "sidebar-primary": "oklch(0.696 0.17 162.48)",
-        "sidebar-primary-foreground": "oklch(0.262 0.051 172.552)",
+        "sidebar-accent": "oklch(0.696 0.17 162.48)",
+        "sidebar-accent-foreground": "oklch(0.262 0.051 172.552)",
       },
     },
   },
@@ -717,8 +717,8 @@ export const themes: Theme[] = [
     title: "Fuchsia",
     cssVars: {
       light: {
-        primary: "oklch(0.518 0.253 323.949)",
-        "primary-foreground": "oklch(0.977 0.017 320.058)",
+        accent: "oklch(0.518 0.253 323.949)",
+        "accent-foreground": "oklch(0.977 0.017 320.058)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
         "chart-1": "oklch(0.833 0.145 321.434)",
@@ -726,12 +726,12 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.591 0.293 322.896)",
         "chart-4": "oklch(0.518 0.253 323.949)",
         "chart-5": "oklch(0.452 0.211 324.591)",
-        "sidebar-primary": "oklch(0.591 0.293 322.896)",
-        "sidebar-primary-foreground": "oklch(0.977 0.017 320.058)",
+        "sidebar-accent": "oklch(0.591 0.293 322.896)",
+        "sidebar-accent-foreground": "oklch(0.977 0.017 320.058)",
       },
       dark: {
-        primary: "oklch(0.452 0.211 324.591)",
-        "primary-foreground": "oklch(0.977 0.017 320.058)",
+        accent: "oklch(0.452 0.211 324.591)",
+        "accent-foreground": "oklch(0.977 0.017 320.058)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
         "chart-1": "oklch(0.833 0.145 321.434)",
@@ -739,8 +739,8 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.591 0.293 322.896)",
         "chart-4": "oklch(0.518 0.253 323.949)",
         "chart-5": "oklch(0.452 0.211 324.591)",
-        "sidebar-primary": "oklch(0.667 0.295 322.15)",
-        "sidebar-primary-foreground": "oklch(0.977 0.017 320.058)",
+        "sidebar-accent": "oklch(0.667 0.295 322.15)",
+        "sidebar-accent-foreground": "oklch(0.977 0.017 320.058)",
       },
     },
   },
@@ -749,8 +749,8 @@ export const themes: Theme[] = [
     title: "Green",
     cssVars: {
       light: {
-        primary: "oklch(0.527 0.154 150.069)",
-        "primary-foreground": "oklch(0.982 0.018 155.826)",
+        accent: "oklch(0.527 0.154 150.069)",
+        "accent-foreground": "oklch(0.982 0.018 155.826)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
         "chart-1": "oklch(0.871 0.15 154.449)",
@@ -758,12 +758,12 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.627 0.194 149.214)",
         "chart-4": "oklch(0.527 0.154 150.069)",
         "chart-5": "oklch(0.448 0.119 151.328)",
-        "sidebar-primary": "oklch(0.627 0.194 149.214)",
-        "sidebar-primary-foreground": "oklch(0.982 0.018 155.826)",
+        "sidebar-accent": "oklch(0.627 0.194 149.214)",
+        "sidebar-accent-foreground": "oklch(0.982 0.018 155.826)",
       },
       dark: {
-        primary: "oklch(0.448 0.119 151.328)",
-        "primary-foreground": "oklch(0.982 0.018 155.826)",
+        accent: "oklch(0.448 0.119 151.328)",
+        "accent-foreground": "oklch(0.982 0.018 155.826)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
         "chart-1": "oklch(0.871 0.15 154.449)",
@@ -771,8 +771,8 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.627 0.194 149.214)",
         "chart-4": "oklch(0.527 0.154 150.069)",
         "chart-5": "oklch(0.448 0.119 151.328)",
-        "sidebar-primary": "oklch(0.723 0.219 149.579)",
-        "sidebar-primary-foreground": "oklch(0.982 0.018 155.826)",
+        "sidebar-accent": "oklch(0.723 0.219 149.579)",
+        "sidebar-accent-foreground": "oklch(0.982 0.018 155.826)",
       },
     },
   },
@@ -781,8 +781,8 @@ export const themes: Theme[] = [
     title: "Indigo",
     cssVars: {
       light: {
-        primary: "oklch(0.457 0.24 277.023)",
-        "primary-foreground": "oklch(0.962 0.018 272.314)",
+        accent: "oklch(0.457 0.24 277.023)",
+        "accent-foreground": "oklch(0.962 0.018 272.314)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
         "chart-1": "oklch(0.785 0.115 274.713)",
@@ -790,12 +790,12 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.511 0.262 276.966)",
         "chart-4": "oklch(0.457 0.24 277.023)",
         "chart-5": "oklch(0.398 0.195 277.366)",
-        "sidebar-primary": "oklch(0.511 0.262 276.966)",
-        "sidebar-primary-foreground": "oklch(0.962 0.018 272.314)",
+        "sidebar-accent": "oklch(0.511 0.262 276.966)",
+        "sidebar-accent-foreground": "oklch(0.962 0.018 272.314)",
       },
       dark: {
-        primary: "oklch(0.398 0.195 277.366)",
-        "primary-foreground": "oklch(0.962 0.018 272.314)",
+        accent: "oklch(0.398 0.195 277.366)",
+        "accent-foreground": "oklch(0.962 0.018 272.314)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
         "chart-1": "oklch(0.785 0.115 274.713)",
@@ -803,8 +803,8 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.511 0.262 276.966)",
         "chart-4": "oklch(0.457 0.24 277.023)",
         "chart-5": "oklch(0.398 0.195 277.366)",
-        "sidebar-primary": "oklch(0.585 0.233 277.117)",
-        "sidebar-primary-foreground": "oklch(0.962 0.018 272.314)",
+        "sidebar-accent": "oklch(0.585 0.233 277.117)",
+        "sidebar-accent-foreground": "oklch(0.962 0.018 272.314)",
       },
     },
   },
@@ -813,8 +813,8 @@ export const themes: Theme[] = [
     title: "Lime",
     cssVars: {
       light: {
-        primary: "oklch(0.841 0.238 128.85)",
-        "primary-foreground": "oklch(0.405 0.101 131.063)",
+        accent: "oklch(0.841 0.238 128.85)",
+        "accent-foreground": "oklch(0.405 0.101 131.063)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
         "chart-1": "oklch(0.897 0.196 126.665)",
@@ -822,12 +822,12 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.648 0.2 131.684)",
         "chart-4": "oklch(0.532 0.157 131.589)",
         "chart-5": "oklch(0.453 0.124 130.933)",
-        "sidebar-primary": "oklch(0.648 0.2 131.684)",
-        "sidebar-primary-foreground": "oklch(0.986 0.031 120.757)",
+        "sidebar-accent": "oklch(0.648 0.2 131.684)",
+        "sidebar-accent-foreground": "oklch(0.986 0.031 120.757)",
       },
       dark: {
-        primary: "oklch(0.768 0.233 130.85)",
-        "primary-foreground": "oklch(0.405 0.101 131.063)",
+        accent: "oklch(0.768 0.233 130.85)",
+        "accent-foreground": "oklch(0.405 0.101 131.063)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
         "chart-1": "oklch(0.897 0.196 126.665)",
@@ -835,8 +835,8 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.648 0.2 131.684)",
         "chart-4": "oklch(0.532 0.157 131.589)",
         "chart-5": "oklch(0.453 0.124 130.933)",
-        "sidebar-primary": "oklch(0.768 0.233 130.85)",
-        "sidebar-primary-foreground": "oklch(0.274 0.072 132.109)",
+        "sidebar-accent": "oklch(0.768 0.233 130.85)",
+        "sidebar-accent-foreground": "oklch(0.274 0.072 132.109)",
       },
     },
   },
@@ -845,8 +845,8 @@ export const themes: Theme[] = [
     title: "Orange",
     cssVars: {
       light: {
-        primary: "oklch(0.553 0.195 38.402)",
-        "primary-foreground": "oklch(0.98 0.016 73.684)",
+        accent: "oklch(0.553 0.195 38.402)",
+        "accent-foreground": "oklch(0.98 0.016 73.684)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
         "chart-1": "oklch(0.837 0.128 66.29)",
@@ -854,12 +854,12 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.646 0.222 41.116)",
         "chart-4": "oklch(0.553 0.195 38.402)",
         "chart-5": "oklch(0.47 0.157 37.304)",
-        "sidebar-primary": "oklch(0.646 0.222 41.116)",
-        "sidebar-primary-foreground": "oklch(0.98 0.016 73.684)",
+        "sidebar-accent": "oklch(0.646 0.222 41.116)",
+        "sidebar-accent-foreground": "oklch(0.98 0.016 73.684)",
       },
       dark: {
-        primary: "oklch(0.47 0.157 37.304)",
-        "primary-foreground": "oklch(0.98 0.016 73.684)",
+        accent: "oklch(0.47 0.157 37.304)",
+        "accent-foreground": "oklch(0.98 0.016 73.684)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
         "chart-1": "oklch(0.837 0.128 66.29)",
@@ -867,8 +867,8 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.646 0.222 41.116)",
         "chart-4": "oklch(0.553 0.195 38.402)",
         "chart-5": "oklch(0.47 0.157 37.304)",
-        "sidebar-primary": "oklch(0.705 0.213 47.604)",
-        "sidebar-primary-foreground": "oklch(0.98 0.016 73.684)",
+        "sidebar-accent": "oklch(0.705 0.213 47.604)",
+        "sidebar-accent-foreground": "oklch(0.98 0.016 73.684)",
       },
     },
   },
@@ -877,8 +877,8 @@ export const themes: Theme[] = [
     title: "Pink",
     cssVars: {
       light: {
-        primary: "oklch(0.525 0.223 3.958)",
-        "primary-foreground": "oklch(0.971 0.014 343.198)",
+        accent: "oklch(0.525 0.223 3.958)",
+        "accent-foreground": "oklch(0.971 0.014 343.198)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
         "chart-1": "oklch(0.823 0.12 346.018)",
@@ -886,12 +886,12 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.592 0.249 0.584)",
         "chart-4": "oklch(0.525 0.223 3.958)",
         "chart-5": "oklch(0.459 0.187 3.815)",
-        "sidebar-primary": "oklch(0.592 0.249 0.584)",
-        "sidebar-primary-foreground": "oklch(0.971 0.014 343.198)",
+        "sidebar-accent": "oklch(0.592 0.249 0.584)",
+        "sidebar-accent-foreground": "oklch(0.971 0.014 343.198)",
       },
       dark: {
-        primary: "oklch(0.459 0.187 3.815)",
-        "primary-foreground": "oklch(0.971 0.014 343.198)",
+        accent: "oklch(0.459 0.187 3.815)",
+        "accent-foreground": "oklch(0.971 0.014 343.198)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
         "chart-1": "oklch(0.823 0.12 346.018)",
@@ -899,8 +899,8 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.592 0.249 0.584)",
         "chart-4": "oklch(0.525 0.223 3.958)",
         "chart-5": "oklch(0.459 0.187 3.815)",
-        "sidebar-primary": "oklch(0.656 0.241 354.308)",
-        "sidebar-primary-foreground": "oklch(0.971 0.014 343.198)",
+        "sidebar-accent": "oklch(0.656 0.241 354.308)",
+        "sidebar-accent-foreground": "oklch(0.971 0.014 343.198)",
       },
     },
   },
@@ -909,8 +909,8 @@ export const themes: Theme[] = [
     title: "Purple",
     cssVars: {
       light: {
-        primary: "oklch(0.496 0.265 301.924)",
-        "primary-foreground": "oklch(0.977 0.014 308.299)",
+        accent: "oklch(0.496 0.265 301.924)",
+        "accent-foreground": "oklch(0.977 0.014 308.299)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
         "chart-1": "oklch(0.827 0.119 306.383)",
@@ -918,12 +918,12 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.558 0.288 302.321)",
         "chart-4": "oklch(0.496 0.265 301.924)",
         "chart-5": "oklch(0.438 0.218 303.724)",
-        "sidebar-primary": "oklch(0.558 0.288 302.321)",
-        "sidebar-primary-foreground": "oklch(0.977 0.014 308.299)",
+        "sidebar-accent": "oklch(0.558 0.288 302.321)",
+        "sidebar-accent-foreground": "oklch(0.977 0.014 308.299)",
       },
       dark: {
-        primary: "oklch(0.438 0.218 303.724)",
-        "primary-foreground": "oklch(0.977 0.014 308.299)",
+        accent: "oklch(0.438 0.218 303.724)",
+        "accent-foreground": "oklch(0.977 0.014 308.299)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
         "chart-1": "oklch(0.827 0.119 306.383)",
@@ -931,8 +931,8 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.558 0.288 302.321)",
         "chart-4": "oklch(0.496 0.265 301.924)",
         "chart-5": "oklch(0.438 0.218 303.724)",
-        "sidebar-primary": "oklch(0.627 0.265 303.9)",
-        "sidebar-primary-foreground": "oklch(0.977 0.014 308.299)",
+        "sidebar-accent": "oklch(0.627 0.265 303.9)",
+        "sidebar-accent-foreground": "oklch(0.977 0.014 308.299)",
       },
     },
   },
@@ -941,8 +941,8 @@ export const themes: Theme[] = [
     title: "Red",
     cssVars: {
       light: {
-        primary: "oklch(0.505 0.213 27.518)",
-        "primary-foreground": "oklch(0.971 0.013 17.38)",
+        accent: "oklch(0.505 0.213 27.518)",
+        "accent-foreground": "oklch(0.971 0.013 17.38)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
         "chart-1": "oklch(0.808 0.114 19.571)",
@@ -950,12 +950,12 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.577 0.245 27.325)",
         "chart-4": "oklch(0.505 0.213 27.518)",
         "chart-5": "oklch(0.444 0.177 26.899)",
-        "sidebar-primary": "oklch(0.577 0.245 27.325)",
-        "sidebar-primary-foreground": "oklch(0.971 0.013 17.38)",
+        "sidebar-accent": "oklch(0.577 0.245 27.325)",
+        "sidebar-accent-foreground": "oklch(0.971 0.013 17.38)",
       },
       dark: {
-        primary: "oklch(0.444 0.177 26.899)",
-        "primary-foreground": "oklch(0.971 0.013 17.38)",
+        accent: "oklch(0.444 0.177 26.899)",
+        "accent-foreground": "oklch(0.971 0.013 17.38)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
         "chart-1": "oklch(0.808 0.114 19.571)",
@@ -963,8 +963,8 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.577 0.245 27.325)",
         "chart-4": "oklch(0.505 0.213 27.518)",
         "chart-5": "oklch(0.444 0.177 26.899)",
-        "sidebar-primary": "oklch(0.637 0.237 25.331)",
-        "sidebar-primary-foreground": "oklch(0.971 0.013 17.38)",
+        "sidebar-accent": "oklch(0.637 0.237 25.331)",
+        "sidebar-accent-foreground": "oklch(0.971 0.013 17.38)",
       },
     },
   },
@@ -973,8 +973,8 @@ export const themes: Theme[] = [
     title: "Rose",
     cssVars: {
       light: {
-        primary: "oklch(0.514 0.222 16.935)",
-        "primary-foreground": "oklch(0.969 0.015 12.422)",
+        accent: "oklch(0.514 0.222 16.935)",
+        "accent-foreground": "oklch(0.969 0.015 12.422)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
         "chart-1": "oklch(0.81 0.117 11.638)",
@@ -982,12 +982,12 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.586 0.253 17.585)",
         "chart-4": "oklch(0.514 0.222 16.935)",
         "chart-5": "oklch(0.455 0.188 13.697)",
-        "sidebar-primary": "oklch(0.586 0.253 17.585)",
-        "sidebar-primary-foreground": "oklch(0.969 0.015 12.422)",
+        "sidebar-accent": "oklch(0.586 0.253 17.585)",
+        "sidebar-accent-foreground": "oklch(0.969 0.015 12.422)",
       },
       dark: {
-        primary: "oklch(0.455 0.188 13.697)",
-        "primary-foreground": "oklch(0.969 0.015 12.422)",
+        accent: "oklch(0.455 0.188 13.697)",
+        "accent-foreground": "oklch(0.969 0.015 12.422)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
         "chart-1": "oklch(0.81 0.117 11.638)",
@@ -996,8 +996,8 @@ export const themes: Theme[] = [
         "chart-4": "oklch(0.514 0.222 16.935)",
         "chart-5": "oklch(0.455 0.188 13.697)",
         sidebar: "oklch(0.21 0.006 285.885)",
-        "sidebar-primary": "oklch(0.645 0.246 16.439)",
-        "sidebar-primary-foreground": "oklch(0.969 0.015 12.422)",
+        "sidebar-accent": "oklch(0.645 0.246 16.439)",
+        "sidebar-accent-foreground": "oklch(0.969 0.015 12.422)",
       },
     },
   },
@@ -1006,8 +1006,8 @@ export const themes: Theme[] = [
     title: "Sky",
     cssVars: {
       light: {
-        primary: "oklch(0.5 0.134 242.749)",
-        "primary-foreground": "oklch(0.977 0.013 236.62)",
+        accent: "oklch(0.5 0.134 242.749)",
+        "accent-foreground": "oklch(0.977 0.013 236.62)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
         "chart-1": "oklch(0.828 0.111 230.318)",
@@ -1015,12 +1015,12 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.588 0.158 241.966)",
         "chart-4": "oklch(0.5 0.134 242.749)",
         "chart-5": "oklch(0.443 0.11 240.79)",
-        "sidebar-primary": "oklch(0.588 0.158 241.966)",
-        "sidebar-primary-foreground": "oklch(0.977 0.013 236.62)",
+        "sidebar-accent": "oklch(0.588 0.158 241.966)",
+        "sidebar-accent-foreground": "oklch(0.977 0.013 236.62)",
       },
       dark: {
-        primary: "oklch(0.443 0.11 240.79)",
-        "primary-foreground": "oklch(0.977 0.013 236.62)",
+        accent: "oklch(0.443 0.11 240.79)",
+        "accent-foreground": "oklch(0.977 0.013 236.62)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
         "chart-1": "oklch(0.828 0.111 230.318)",
@@ -1028,8 +1028,8 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.588 0.158 241.966)",
         "chart-4": "oklch(0.5 0.134 242.749)",
         "chart-5": "oklch(0.443 0.11 240.79)",
-        "sidebar-primary": "oklch(0.685 0.169 237.323)",
-        "sidebar-primary-foreground": "oklch(0.293 0.066 243.157)",
+        "sidebar-accent": "oklch(0.685 0.169 237.323)",
+        "sidebar-accent-foreground": "oklch(0.293 0.066 243.157)",
       },
     },
   },
@@ -1038,8 +1038,8 @@ export const themes: Theme[] = [
     title: "Teal",
     cssVars: {
       light: {
-        primary: "oklch(0.511 0.096 186.391)",
-        "primary-foreground": "oklch(0.984 0.014 180.72)",
+        accent: "oklch(0.511 0.096 186.391)",
+        "accent-foreground": "oklch(0.984 0.014 180.72)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
         "chart-1": "oklch(0.855 0.138 181.071)",
@@ -1047,12 +1047,12 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.6 0.118 184.704)",
         "chart-4": "oklch(0.511 0.096 186.391)",
         "chart-5": "oklch(0.437 0.078 188.216)",
-        "sidebar-primary": "oklch(0.6 0.118 184.704)",
-        "sidebar-primary-foreground": "oklch(0.984 0.014 180.72)",
+        "sidebar-accent": "oklch(0.6 0.118 184.704)",
+        "sidebar-accent-foreground": "oklch(0.984 0.014 180.72)",
       },
       dark: {
-        primary: "oklch(0.437 0.078 188.216)",
-        "primary-foreground": "oklch(0.984 0.014 180.72)",
+        accent: "oklch(0.437 0.078 188.216)",
+        "accent-foreground": "oklch(0.984 0.014 180.72)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
         "chart-1": "oklch(0.855 0.138 181.071)",
@@ -1060,8 +1060,8 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.6 0.118 184.704)",
         "chart-4": "oklch(0.511 0.096 186.391)",
         "chart-5": "oklch(0.437 0.078 188.216)",
-        "sidebar-primary": "oklch(0.704 0.14 182.503)",
-        "sidebar-primary-foreground": "oklch(0.277 0.046 192.524)",
+        "sidebar-accent": "oklch(0.704 0.14 182.503)",
+        "sidebar-accent-foreground": "oklch(0.277 0.046 192.524)",
       },
     },
   },
@@ -1070,8 +1070,8 @@ export const themes: Theme[] = [
     title: "Violet",
     cssVars: {
       light: {
-        primary: "oklch(0.491 0.27 292.581)",
-        "primary-foreground": "oklch(0.969 0.016 293.756)",
+        accent: "oklch(0.491 0.27 292.581)",
+        "accent-foreground": "oklch(0.969 0.016 293.756)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
         "chart-1": "oklch(0.811 0.111 293.571)",
@@ -1079,12 +1079,12 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.541 0.281 293.009)",
         "chart-4": "oklch(0.491 0.27 292.581)",
         "chart-5": "oklch(0.432 0.232 292.759)",
-        "sidebar-primary": "oklch(0.541 0.281 293.009)",
-        "sidebar-primary-foreground": "oklch(0.969 0.016 293.756)",
+        "sidebar-accent": "oklch(0.541 0.281 293.009)",
+        "sidebar-accent-foreground": "oklch(0.969 0.016 293.756)",
       },
       dark: {
-        primary: "oklch(0.432 0.232 292.759)",
-        "primary-foreground": "oklch(0.969 0.016 293.756)",
+        accent: "oklch(0.432 0.232 292.759)",
+        "accent-foreground": "oklch(0.969 0.016 293.756)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
         "chart-1": "oklch(0.811 0.111 293.571)",
@@ -1092,8 +1092,8 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.541 0.281 293.009)",
         "chart-4": "oklch(0.491 0.27 292.581)",
         "chart-5": "oklch(0.432 0.232 292.759)",
-        "sidebar-primary": "oklch(0.606 0.25 292.717)",
-        "sidebar-primary-foreground": "oklch(0.969 0.016 293.756)",
+        "sidebar-accent": "oklch(0.606 0.25 292.717)",
+        "sidebar-accent-foreground": "oklch(0.969 0.016 293.756)",
       },
     },
   },
@@ -1102,8 +1102,8 @@ export const themes: Theme[] = [
     title: "Yellow",
     cssVars: {
       light: {
-        primary: "oklch(0.852 0.199 91.936)",
-        "primary-foreground": "oklch(0.421 0.095 57.708)",
+        accent: "oklch(0.852 0.199 91.936)",
+        "accent-foreground": "oklch(0.421 0.095 57.708)",
         secondary: "oklch(0.967 0.001 286.375)",
         "secondary-foreground": "oklch(0.21 0.006 285.885)",
         "chart-1": "oklch(0.905 0.182 98.111)",
@@ -1111,12 +1111,12 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.681 0.162 75.834)",
         "chart-4": "oklch(0.554 0.135 66.442)",
         "chart-5": "oklch(0.476 0.114 61.907)",
-        "sidebar-primary": "oklch(0.681 0.162 75.834)",
-        "sidebar-primary-foreground": "oklch(0.987 0.026 102.212)",
+        "sidebar-accent": "oklch(0.681 0.162 75.834)",
+        "sidebar-accent-foreground": "oklch(0.987 0.026 102.212)",
       },
       dark: {
-        primary: "oklch(0.795 0.184 86.047)",
-        "primary-foreground": "oklch(0.421 0.095 57.708)",
+        accent: "oklch(0.795 0.184 86.047)",
+        "accent-foreground": "oklch(0.421 0.095 57.708)",
         secondary: "oklch(0.274 0.006 286.033)",
         "secondary-foreground": "oklch(0.985 0 0)",
         "chart-1": "oklch(0.905 0.182 98.111)",
@@ -1124,8 +1124,8 @@ export const themes: Theme[] = [
         "chart-3": "oklch(0.681 0.162 75.834)",
         "chart-4": "oklch(0.554 0.135 66.442)",
         "chart-5": "oklch(0.476 0.114 61.907)",
-        "sidebar-primary": "oklch(0.795 0.184 86.047)",
-        "sidebar-primary-foreground": "oklch(0.987 0.026 102.212)",
+        "sidebar-accent": "oklch(0.795 0.184 86.047)",
+        "sidebar-accent-foreground": "oklch(0.987 0.026 102.212)",
       },
     },
   },
diff --git a/packages/blocks/src/blocks/chats/chat-conversation-list.tsx b/packages/blocks/src/blocks/chats/chat-conversation-list.tsx
index 837ae6c..3295a88 100644
--- a/packages/blocks/src/blocks/chats/chat-conversation-list.tsx
+++ b/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
diff --git a/packages/blocks/src/blocks/layout/app-breadcrumb.tsx b/packages/blocks/src/blocks/layout/app-breadcrumb.tsx
index 38ce23f..a57154f 100644
--- a/packages/blocks/src/blocks/layout/app-breadcrumb.tsx
+++ b/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}
diff --git a/packages/blocks/src/blocks/layout/app-query-indicator.tsx b/packages/blocks/src/blocks/layout/app-query-indicator.tsx
index fa03f1d..11cf5a8 100644
--- a/packages/blocks/src/blocks/layout/app-query-indicator.tsx
+++ b/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>
     )
   }
diff --git a/packages/blocks/src/blocks/layout/header-action-button.tsx b/packages/blocks/src/blocks/layout/header-action-button.tsx
index 2205401..84ce65a 100644
--- a/packages/blocks/src/blocks/layout/header-action-button.tsx
+++ b/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>
diff --git a/packages/blocks/src/blocks/navigation/flyout-navigation.tsx b/packages/blocks/src/blocks/navigation/flyout-navigation.tsx
index 7f34b88..babfd66 100644
--- a/packages/blocks/src/blocks/navigation/flyout-navigation.tsx
+++ b/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}
diff --git a/packages/blocks/src/blocks/navigation/navigation-button.tsx b/packages/blocks/src/blocks/navigation/navigation-button.tsx
index 8cdeb2e..75cbf48 100644
--- a/packages/blocks/src/blocks/navigation/navigation-button.tsx
+++ b/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)]",
diff --git a/packages/blocks/src/blocks/notifications/notification-item.tsx b/packages/blocks/src/blocks/notifications/notification-item.tsx
index f7b6082..645ac1e 100644
--- a/packages/blocks/src/blocks/notifications/notification-item.tsx
+++ b/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 && (
diff --git a/packages/lexical/src/actions/color-picker.tsx b/packages/lexical/src/actions/color-picker.tsx
index 4d2712b..6031101 100644
--- a/packages/lexical/src/actions/color-picker.tsx
+++ b/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"
diff --git a/packages/lexical/src/actions/date.tsx b/packages/lexical/src/actions/date.tsx
index 0885c40..f9120f9 100644
--- a/packages/lexical/src/actions/date.tsx
+++ b/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, () => {
diff --git a/packages/lexical/src/components/image-resizer.tsx b/packages/lexical/src/components/image-resizer.tsx
index 482e27a..5bf9d93 100644
--- a/packages/lexical/src/components/image-resizer.tsx
+++ b/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)}
diff --git a/packages/lexical/src/embed.tsx b/packages/lexical/src/embed.tsx
index a1bffb8..7fcaea2 100644
--- a/packages/lexical/src/embed.tsx
+++ b/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()
diff --git a/packages/lexical/src/nodes/media-node.tsx b/packages/lexical/src/nodes/media-node.tsx
index bd7251e..086bdd7 100644
--- a/packages/lexical/src/nodes/media-node.tsx
+++ b/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" ? (
diff --git a/packages/lexical/src/plugins/draggable-block-plugin.tsx b/packages/lexical/src/plugins/draggable-block-plugin.tsx
index d42646c..95b7635 100644
--- a/packages/lexical/src/plugins/draggable-block-plugin.tsx
+++ b/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"
         />
       }
     />
diff --git a/packages/lexical/src/plugins/link-popover-plugin.tsx b/packages/lexical/src/plugins/link-popover-plugin.tsx
index 410bacd..62bcfc0 100644
--- a/packages/lexical/src/plugins/link-popover-plugin.tsx
+++ b/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>
diff --git a/packages/lexical/src/styles/globals.css b/packages/lexical/src/styles/globals.css
index 6fd32bc..03da4f3 100644
--- a/packages/lexical/src/styles/globals.css
+++ b/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);
   }
diff --git a/packages/lexical/src/theme.ts b/packages/lexical/src/theme.ts
index b9bfc2d..1c9f09a 100644
--- a/packages/lexical/src/theme.ts
+++ b/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",
diff --git a/packages/media/src/media-grid.tsx b/packages/media/src/media-grid.tsx
index 5cab4a6..c935745 100644
--- a/packages/media/src/media-grid.tsx
+++ b/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>
             )}
diff --git a/packages/media/src/sidebar.tsx b/packages/media/src/sidebar.tsx
index 18f823f..f46b16e 100644
--- a/packages/media/src/sidebar.tsx
+++ b/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" />
diff --git a/packages/page/src/tabs.tsx b/packages/page/src/tabs.tsx
index 83f063a..96cc23f 100644
--- a/packages/page/src/tabs.tsx
+++ b/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
diff --git a/packages/search/src/dialog.tsx b/packages/search/src/dialog.tsx
index 8fc9c7e..791428b 100644
--- a/packages/search/src/dialog.tsx
+++ b/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" />
                 )}
diff --git a/packages/search/src/results.tsx b/packages/search/src/results.tsx
index b492276..78959e3 100644
--- a/packages/search/src/results.tsx
+++ b/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>
     ) : (