From 91e010cff72289e225f1b9f0ff7171940b1f1324 Mon Sep 17 00:00:00 2001
From: Maofeng <hornjs@qq.com>
Date: Tue, 29 Sep 2026 17:08:08 +0800
Subject: [PATCH] refactor(appearance): adopt accent and highlight tokens

---
 .../src/components/theme-color-picker.tsx     |   8 +-
 .../src/components/theme-preview.tsx          |  10 +-
 packages/appearance/src/theme.test.ts         |   6 +-
 packages/appearance/src/themes.ts             | 482 +++++++++---------
 4 files changed, 254 insertions(+), 252 deletions(-)

diff --git a/packages/appearance/src/components/theme-color-picker.tsx b/packages/appearance/src/components/theme-color-picker.tsx
index 3dfd2f2..148ebf5 100644
--- a/packages/appearance/src/components/theme-color-picker.tsx
+++ b/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,
-        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/appearance/src/components/theme-preview.tsx b/packages/appearance/src/components/theme-preview.tsx
index 38ed0f4..82c33d4 100644
--- a/packages/appearance/src/components/theme-preview.tsx
+++ b/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-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/appearance/src/theme.test.ts b/packages/appearance/src/theme.test.ts
index 1705b86..143c860 100644
--- a/packages/appearance/src/theme.test.ts
+++ b/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:")
   })
 })
diff --git a/packages/appearance/src/themes.ts b/packages/appearance/src/themes.ts
index d8e8751..0cc8441 100644
--- a/packages/appearance/src/themes.ts
+++ b/packages/appearance/src/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)",
       },
     },
   },