@plannotator/ui 0.22.0

package/themes/poimandres.css

@@ -0,0 +1,66 @@
+/* Poimandres — by drcmda */
+.theme-poimandres {
+  --background: #1b1e28;
+  --foreground: #a6accd;
+  --card: #303340;
+  --card-foreground: #a6accd;
+  --popover: #303340;
+  --popover-foreground: #a6accd;
+  --primary: #add7ff;
+  --primary-foreground: #1b1e28;
+  --secondary: #252934;
+  --secondary-foreground: #767c9d;
+  --muted: #252934;
+  --muted-foreground: #767c9d;
+  --accent: #5de4c7;
+  --accent-foreground: #1b1e28;
+  --destructive: #d0679d;
+  --destructive-foreground: #1b1e28;
+  --border: #3b3f4f;
+  --input: #252934;
+  --ring: #add7ff;
+  --success: #5de4c7;
+  --success-foreground: #1b1e28;
+  --warning: #fffac2;
+  --warning-foreground: #1b1e28;
+
+  --font-sans: system-ui, sans-serif;
+  --font-mono: 'Fira Code', ui-monospace, monospace;
+  --radius: 0.625rem;
+
+  --code-bg: #252934;
+  --focus-highlight: #add7ff;
+}
+
+.theme-poimandres.light {
+  --background: #1b1e28;
+  --foreground: #a6accd;
+  --card: #303340;
+  --card-foreground: #a6accd;
+  --popover: #303340;
+  --popover-foreground: #a6accd;
+  --primary: #add7ff;
+  --primary-foreground: #1b1e28;
+  --secondary: #252934;
+  --secondary-foreground: #767c9d;
+  --muted: #252934;
+  --muted-foreground: #767c9d;
+  --accent: #5de4c7;
+  --accent-foreground: #1b1e28;
+  --destructive: #d0679d;
+  --destructive-foreground: #1b1e28;
+  --border: #3b3f4f;
+  --input: #252934;
+  --ring: #add7ff;
+  --success: #5de4c7;
+  --success-foreground: #1b1e28;
+  --warning: #fffac2;
+  --warning-foreground: #1b1e28;
+
+  --font-sans: system-ui, sans-serif;
+  --font-mono: 'Fira Code', ui-monospace, monospace;
+  --radius: 0.625rem;
+
+  --code-bg: #252934;
+  --focus-highlight: #add7ff;
+}

package/themes/quantum-rose.css

@@ -0,0 +1,109 @@
+.theme-quantum-rose {
+  --background: #1a0922;
+  --foreground: #ffb3ff;
+  --card: #2a1435;
+  --card-foreground: #ffb3ff;
+  --popover: #2a1435;
+  --popover-foreground: #ffb3ff;
+  --primary: #ff6bef;
+  --primary-foreground: #180518;
+  --secondary: #46204f;
+  --secondary-foreground: #ffb3ff;
+  --muted: #331941;
+  --muted-foreground: #d67ad6;
+  --accent: #c06ec4;
+  --accent-foreground: #1a0922;
+  --destructive: #ff2876;
+  --destructive-foreground: #f9f9f9;
+  --border: #4a1b5f;
+  --input: #46204f;
+  --ring: #ff6bef;
+  --chart-1: #ff6bef;
+  --chart-2: #c359e3;
+  --chart-3: #9161ff;
+  --chart-4: #6f73e2;
+  --chart-5: #547aff;
+  --sidebar: #1c0d25;
+  --sidebar-foreground: #ffb3ff;
+  --sidebar-primary: #ff6bef;
+  --sidebar-primary-foreground: #180518;
+  --sidebar-accent: #5a1f5d;
+  --sidebar-accent-foreground: #ffb3ff;
+  --sidebar-border: #4a1b5f;
+  --sidebar-ring: #ff6bef;
+  --font-sans: Quicksand, sans-serif;
+  --font-serif: Playfair Display, serif;
+  --font-mono: Space Mono, monospace;
+  --radius: 0.625rem;
+  --shadow-2xs: 0px 3px 0px 0px hsl(300 80% 50% / 0.09);
+  --shadow-xs: 0px 3px 0px 0px hsl(300 80% 50% / 0.09);
+  --shadow-sm: 0px 3px 0px 0px hsl(300 80% 50% / 0.18), 0px 1px 2px -1px hsl(300 80% 50% / 0.18);
+  --shadow: 0px 3px 0px 0px hsl(300 80% 50% / 0.18), 0px 1px 2px -1px hsl(300 80% 50% / 0.18);
+  --shadow-md: 0px 3px 0px 0px hsl(300 80% 50% / 0.18), 0px 2px 4px -1px hsl(300 80% 50% / 0.18);
+  --shadow-lg: 0px 3px 0px 0px hsl(300 80% 50% / 0.18), 0px 4px 6px -1px hsl(300 80% 50% / 0.18);
+  --shadow-xl: 0px 3px 0px 0px hsl(300 80% 50% / 0.18), 0px 8px 10px -1px hsl(300 80% 50% / 0.18);
+  --shadow-2xl: 0px 3px 0px 0px hsl(300 80% 50% / 0.45);
+
+  /* Plannotator extended tokens */
+  --success: oklch(0.72 0.17 150);
+  --success-foreground: oklch(0.15 0.02 260);
+  --warning: oklch(0.75 0.15 85);
+  --warning-foreground: oklch(0.20 0.02 260);
+  --code-bg: oklch(0.13 0.015 260);
+  --focus-highlight: oklch(0.70 0.20 200);
+}
+
+.theme-quantum-rose.light {
+  --background: #fff0f8;
+  --foreground: #91185c;
+  --card: #fff7fc;
+  --card-foreground: #91185c;
+  --popover: #fff7fc;
+  --popover-foreground: #91185c;
+  --primary: #e6067a;
+  --primary-foreground: #ffffff;
+  --secondary: #ffd6ff;
+  --secondary-foreground: #91185c;
+  --muted: #ffe3f2;
+  --muted-foreground: #c04283;
+  --accent: #ffc1e3;
+  --accent-foreground: #91185c;
+  --destructive: #d13869;
+  --destructive-foreground: #ffffff;
+  --border: #ffc7e6;
+  --input: #ffd6ff;
+  --ring: #e6067a;
+  --chart-1: #e6067a;
+  --chart-2: #c44b97;
+  --chart-3: #9969b6;
+  --chart-4: #7371bf;
+  --chart-5: #5e84ff;
+  --sidebar: #ffedf6;
+  --sidebar-foreground: #91185c;
+  --sidebar-primary: #e6067a;
+  --sidebar-primary-foreground: #ffffff;
+  --sidebar-accent: #ffc1e3;
+  --sidebar-accent-foreground: #91185c;
+  --sidebar-border: #ffddf0;
+  --sidebar-ring: #e6067a;
+  --font-sans: Poppins, sans-serif;
+  --font-serif: Playfair Display, serif;
+  --font-mono: Space Mono, monospace;
+  --radius: 0.625rem;
+  --shadow-2xs: 0px 3px 0px 0px hsl(330 70% 30% / 0.09);
+  --shadow-xs: 0px 3px 0px 0px hsl(330 70% 30% / 0.09);
+  --shadow-sm: 0px 3px 0px 0px hsl(330 70% 30% / 0.18), 0px 1px 2px -1px hsl(330 70% 30% / 0.18);
+  --shadow: 0px 3px 0px 0px hsl(330 70% 30% / 0.18), 0px 1px 2px -1px hsl(330 70% 30% / 0.18);
+  --shadow-md: 0px 3px 0px 0px hsl(330 70% 30% / 0.18), 0px 2px 4px -1px hsl(330 70% 30% / 0.18);
+  --shadow-lg: 0px 3px 0px 0px hsl(330 70% 30% / 0.18), 0px 4px 6px -1px hsl(330 70% 30% / 0.18);
+  --shadow-xl: 0px 3px 0px 0px hsl(330 70% 30% / 0.18), 0px 8px 10px -1px hsl(330 70% 30% / 0.18);
+  --shadow-2xl: 0px 3px 0px 0px hsl(330 70% 30% / 0.45);
+
+  /* Plannotator extended tokens */
+  --success: oklch(0.45 0.20 150);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.55 0.18 85);
+  --warning-foreground: oklch(0.18 0.02 260);
+  --code-bg: oklch(0.96 0.005 260);
+  --focus-highlight: oklch(0.70 0.20 200);
+}

package/themes/red.css

@@ -0,0 +1,66 @@
+/* Red — by Thibaut Tiberghien */
+.theme-red {
+  --background: #390000;
+  --foreground: #f8f8f8;
+  --card: #490000;
+  --card-foreground: #f8f8f8;
+  --popover: #490000;
+  --popover-foreground: #f8f8f8;
+  --primary: #cc3333;
+  --primary-foreground: #ffffff;
+  --secondary: #580000;
+  --secondary-foreground: #f8f8f8;
+  --muted: #580000;
+  --muted-foreground: #e7c0c0;
+  --accent: #ffd0aa;
+  --accent-foreground: #390000;
+  --destructive: #f12727;
+  --destructive-foreground: #ffffff;
+  --border: #660000;
+  --input: #580000;
+  --ring: #cc3333;
+  --success: #41a83e;
+  --success-foreground: #390000;
+  --warning: #fec758;
+  --warning-foreground: #390000;
+
+  --font-sans: system-ui, sans-serif;
+  --font-mono: 'Fira Code', ui-monospace, monospace;
+  --radius: 0.625rem;
+
+  --code-bg: #580000;
+  --focus-highlight: #cc3333;
+}
+
+.theme-red.light {
+  --background: #390000;
+  --foreground: #f8f8f8;
+  --card: #490000;
+  --card-foreground: #f8f8f8;
+  --popover: #490000;
+  --popover-foreground: #f8f8f8;
+  --primary: #cc3333;
+  --primary-foreground: #ffffff;
+  --secondary: #580000;
+  --secondary-foreground: #f8f8f8;
+  --muted: #580000;
+  --muted-foreground: #e7c0c0;
+  --accent: #ffd0aa;
+  --accent-foreground: #390000;
+  --destructive: #f12727;
+  --destructive-foreground: #ffffff;
+  --border: #660000;
+  --input: #580000;
+  --ring: #cc3333;
+  --success: #41a83e;
+  --success-foreground: #390000;
+  --warning: #fec758;
+  --warning-foreground: #390000;
+
+  --font-sans: system-ui, sans-serif;
+  --font-mono: 'Fira Code', ui-monospace, monospace;
+  --radius: 0.625rem;
+
+  --code-bg: #580000;
+  --focus-highlight: #cc3333;
+}

package/themes/rose-pine.css

@@ -0,0 +1,62 @@
+/* Rosé Pine — Moon (dark) + Dawn (light) */
+.theme-rose-pine {
+  --background: #191724;
+  --foreground: #e0def4;
+  --card: #26233a;
+  --card-foreground: #e0def4;
+  --popover: #26233a;
+  --popover-foreground: #e0def4;
+  --primary: #c4a7e7;
+  --primary-foreground: #191724;
+  --secondary: #403d52;
+  --secondary-foreground: #e0def4;
+  --muted: #26233a;
+  --muted-foreground: #6e6a86;
+  --accent: #f6c177;
+  --accent-foreground: #191724;
+  --destructive: #eb6f92;
+  --destructive-foreground: #191724;
+  --border: #403d52;
+  --input: #26233a;
+  --ring: #c4a7e7;
+  --success: #31748f;
+  --success-foreground: #e0def4;
+  --warning: #f6c177;
+  --warning-foreground: #191724;
+
+  --font-sans: system-ui, sans-serif;
+  --font-mono: ui-monospace, monospace;
+  --radius: 0.625rem;
+
+  --code-bg: #1f1d2e;
+  --focus-highlight: #9ccfd8;
+}
+
+.theme-rose-pine.light {
+  --background: #faf4ed;
+  --foreground: #575279;
+  --card: #fffaf3;
+  --card-foreground: #575279;
+  --popover: #fffaf3;
+  --popover-foreground: #575279;
+  --primary: #907aa9;
+  --primary-foreground: #faf4ed;
+  --secondary: #dfdad9;
+  --secondary-foreground: #575279;
+  --muted: #f2e9e1;
+  --muted-foreground: #9893a5;
+  --accent: #ea9d34;
+  --accent-foreground: #faf4ed;
+  --destructive: #b4637a;
+  --destructive-foreground: #faf4ed;
+  --border: #dfdad9;
+  --input: #f2e9e1;
+  --ring: #907aa9;
+  --success: #286983;
+  --success-foreground: #faf4ed;
+  --warning: #ea9d34;
+  --warning-foreground: #faf4ed;
+
+  --code-bg: #f2e9e1;
+  --focus-highlight: #56949f;
+}

package/themes/simple.css

@@ -0,0 +1,124 @@
+/* Simple — faithful port of the DiffKit goal-prototype palette (shadcn "neutral" base).
+ *
+ * The UI 2.0 reference scheme. Unlike most themes, this one pins EXPLICIT surface
+ * layers (--surface-0/1/2) instead of letting them derive from --muted, because the
+ * prototype's elevation steps UP from the card (card 0.205 → surface 0.21/0.245/0.28)
+ * while the global color-mix derivation would step DOWN. The explicit values preserve
+ * the prototype's layered card/row/hover look.
+ *
+ * Polarity note: the prototype is light-default (:root) + .dark override. Plannotator
+ * is dark-default (.theme-x) + .theme-x.light override. So the prototype's `.dark`
+ * block maps to `.theme-simple` and its `:root` block maps to `.theme-simple.light`.
+ */
+.theme-simple {
+  --background: oklch(0.141 0.005 285.823);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0.006 285.885);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.225 0.006 285.885);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: oklch(0.985 0 0);
+  --primary-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.16 0.005 285.823);
+  --muted-foreground: oklch(0.705 0.015 286.067);
+  --accent: oklch(0.274 0.006 286.033);
+  --accent-foreground: oklch(0.985 0 0);
+  /* --accent is a low-contrast neutral gray here, so the comment-annotation
+   * label/buttons use a legible blue instead (other themes inherit --accent). */
+  --annotation-comment: oklch(0.62 0.19 256);
+  --destructive: oklch(0.396 0.141 25.723);
+  --destructive-foreground: oklch(0.637 0.237 25.331);
+  --border: oklch(0.274 0.006 286.033);
+  --input: oklch(0.274 0.006 286.033);
+  --ring: oklch(0.442 0.017 285.786);
+
+  /* Plannotator tokens the prototype doesn't define (tuned to this palette) */
+  --success: oklch(0.62 0.194 149.214);
+  --success-foreground: oklch(0.985 0 0);
+  --warning: oklch(0.75 0.15 85);
+  --warning-foreground: oklch(0.21 0.006 285.885);
+
+  /* Explicit elevation — the prototype's layered look (steps up from card) */
+  --surface-0: oklch(0.21 0.006 286.033);
+  --surface-1: oklch(0.245 0.006 286.033);
+  --surface-2: oklch(0.28 0.006 286.033);
+
+  /* Sidebar (mirrors the prototype's dark sidebar tokens) */
+  --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-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(0.274 0.006 286.033);
+  --sidebar-ring: oklch(0.442 0.017 285.786);
+
+  --font-sans: "Inter Variable", "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-mono: "Geist Mono Variable", "SF Mono", ui-monospace, monospace;
+  --radius: 0.625rem;
+
+  --code-bg: oklch(0.245 0.006 286.033);
+
+  /* Prototype extras (brand + chart) — available as raw vars for future use */
+  --brand: oklch(0.75 0.2 150);
+  --brand-dev: oklch(0.8 0.17 85);
+  --chart-1: oklch(0.488 0.243 264.376);
+  --chart-2: oklch(0.696 0.17 162.48);
+  --chart-3: oklch(0.769 0.188 70.08);
+  --chart-4: oklch(0.627 0.265 303.9);
+  --chart-5: oklch(0.645 0.246 16.439);
+}
+
+.theme-simple.light {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.141 0.005 285.823);
+  --card: oklch(1 0 0);
+  --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);
+  --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);
+  /* Darker blue for the near-white light card (other themes inherit --accent). */
+  --annotation-comment: oklch(0.52 0.20 256);
+  --destructive: oklch(0.577 0.245 27.325);
+  --destructive-foreground: oklch(0.577 0.245 27.325);
+  --border: oklch(0.92 0.004 286.32);
+  --input: oklch(0.92 0.004 286.32);
+  --ring: oklch(0.871 0.006 286.286);
+
+  --success: oklch(0.62 0.194 149.214);
+  --success-foreground: oklch(0.985 0 0);
+  --warning: oklch(0.55 0.18 85);
+  --warning-foreground: oklch(0.141 0.005 285.823);
+
+  --surface-0: oklch(0.967 0.001 286.375);
+  --surface-1: oklch(0.945 0.002 286.375);
+  --surface-2: oklch(0.925 0.003 286.375);
+
+  --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-border: oklch(0.92 0.004 286.32);
+  --sidebar-ring: oklch(0.871 0.006 286.286);
+
+  --code-bg: oklch(0.967 0.001 286.375);
+
+  --brand: oklch(0.68 0.2 150);
+  --brand-dev: oklch(0.75 0.17 85);
+  --chart-1: oklch(0.646 0.222 41.116);
+  --chart-2: oklch(0.6 0.118 184.704);
+  --chart-3: oklch(0.398 0.07 227.392);
+  --chart-4: oklch(0.828 0.189 84.429);
+  --chart-5: oklch(0.769 0.188 70.08);
+}

package/themes/slack.css

@@ -0,0 +1,66 @@
+/* Slack — dark + light */
+.theme-slack {
+  --background: #222222;
+  --foreground: #e6e6e6;
+  --card: #292929;
+  --card-foreground: #e6e6e6;
+  --popover: #292929;
+  --popover-foreground: #e6e6e6;
+  --primary: #0077b5;
+  --primary-foreground: #ffffff;
+  --secondary: #141414;
+  --secondary-foreground: #e6e6e6;
+  --muted: #141414;
+  --muted-foreground: #6e7681;
+  --accent: #1d978d;
+  --accent-foreground: #ffffff;
+  --destructive: #f44747;
+  --destructive-foreground: #ffffff;
+  --border: #3a3d41;
+  --input: #292929;
+  --ring: #0077b5;
+  --success: #6a9955;
+  --success-foreground: #ffffff;
+  --warning: #cd9731;
+  --warning-foreground: #222222;
+
+  --font-sans: system-ui, sans-serif;
+  --font-mono: 'Fira Code', ui-monospace, monospace;
+  --radius: 0.625rem;
+
+  --code-bg: #141414;
+  --focus-highlight: #0077b5;
+}
+
+.theme-slack.light {
+  --background: #ffffff;
+  --foreground: #000000;
+  --card: #f3f3f3;
+  --card-foreground: #000000;
+  --popover: #f3f3f3;
+  --popover-foreground: #000000;
+  --primary: #5899c5;
+  --primary-foreground: #ffffff;
+  --secondary: #eeeeee;
+  --secondary-foreground: #000000;
+  --muted: #f3f3f3;
+  --muted-foreground: #6e7681;
+  --accent: #5899c5;
+  --accent-foreground: #ffffff;
+  --destructive: #f44c5e;
+  --destructive-foreground: #ffffff;
+  --border: #dcdedf;
+  --input: #dcdedf;
+  --ring: #5899c5;
+  --success: #91b859;
+  --success-foreground: #161f26;
+  --warning: #ffb62c;
+  --warning-foreground: #161f26;
+
+  --font-sans: system-ui, sans-serif;
+  --font-mono: 'Fira Code', ui-monospace, monospace;
+  --radius: 0.625rem;
+
+  --code-bg: #eeeeee;
+  --focus-highlight: #5899c5;
+}

package/themes/snazzy-light.css

@@ -0,0 +1,66 @@
+/* Snazzy Light — by Aleksandr Hovhannisyan */
+.theme-snazzy-light {
+  --background: #fafbfc;
+  --foreground: #565869;
+  --card: #f3f4f5;
+  --card-foreground: #565869;
+  --popover: #f3f4f5;
+  --popover-foreground: #565869;
+  --primary: #09a1ed;
+  --primary-foreground: #ffffff;
+  --secondary: #e9eaeb;
+  --secondary-foreground: #565869;
+  --muted: #e9eaeb;
+  --muted-foreground: #9194a2;
+  --accent: #2dae58;
+  --accent-foreground: #ffffff;
+  --destructive: #ff5c56;
+  --destructive-foreground: #ffffff;
+  --border: #dedfe0;
+  --input: #e9eaeb;
+  --ring: #09a1ed;
+  --success: #2dae58;
+  --success-foreground: #ffffff;
+  --warning: #cf9c00;
+  --warning-foreground: #ffffff;
+
+  --font-sans: system-ui, sans-serif;
+  --font-mono: 'Fira Code', ui-monospace, monospace;
+  --radius: 0.625rem;
+
+  --code-bg: #e9eaeb;
+  --focus-highlight: #09a1ed;
+}
+
+.theme-snazzy-light.light {
+  --background: #fafbfc;
+  --foreground: #565869;
+  --card: #f3f4f5;
+  --card-foreground: #565869;
+  --popover: #f3f4f5;
+  --popover-foreground: #565869;
+  --primary: #09a1ed;
+  --primary-foreground: #ffffff;
+  --secondary: #e9eaeb;
+  --secondary-foreground: #565869;
+  --muted: #e9eaeb;
+  --muted-foreground: #9194a2;
+  --accent: #2dae58;
+  --accent-foreground: #ffffff;
+  --destructive: #ff5c56;
+  --destructive-foreground: #ffffff;
+  --border: #dedfe0;
+  --input: #e9eaeb;
+  --ring: #09a1ed;
+  --success: #2dae58;
+  --success-foreground: #ffffff;
+  --warning: #cf9c00;
+  --warning-foreground: #ffffff;
+
+  --font-sans: system-ui, sans-serif;
+  --font-mono: 'Fira Code', ui-monospace, monospace;
+  --radius: 0.625rem;
+
+  --code-bg: #e9eaeb;
+  --focus-highlight: #09a1ed;
+}

package/themes/soft-pop.css

@@ -0,0 +1,60 @@
+.theme-soft-pop {
+  --background: oklch(0 0 0);
+  --foreground: oklch(1.0000 0 0);
+  --card: oklch(0.1500 0 0);
+  --card-foreground: oklch(1.0000 0 0);
+  --popover: oklch(0.1500 0 0);
+  --popover-foreground: oklch(1.0000 0 0);
+  --primary: oklch(0.6801 0.1583 276.9349);
+  --primary-foreground: oklch(1.0000 0 0);
+  --secondary: oklch(0.7845 0.1325 181.9120);
+  --secondary-foreground: oklch(0 0 0);
+  --muted: oklch(0.3211 0 0);
+  --muted-foreground: oklch(0.7000 0 0);
+  --accent: oklch(0.8790 0.1534 91.6054);
+  --accent-foreground: oklch(0 0 0);
+  --destructive: oklch(0.7106 0.1661 22.2162);
+  --destructive-foreground: oklch(1.0000 0 0);
+  --border: oklch(0.4459 0 0);
+  --input: oklch(0.3211 0 0);
+  --ring: oklch(0.6801 0.1583 276.9349);
+  --success: oklch(0.72 0.17 150);
+  --success-foreground: oklch(0.15 0.02 260);
+  --warning: oklch(0.75 0.15 85);
+  --warning-foreground: oklch(0.20 0.02 260);
+
+  --font-sans: 'DM Sans', sans-serif;
+  --font-mono: 'Space Mono', monospace;
+  --radius: 0.625rem;
+
+  --code-bg: oklch(0.08 0 0);
+  --focus-highlight: oklch(0.70 0.20 200);
+}
+
+.theme-soft-pop.light {
+  --background: oklch(0.9789 0.0082 121.6272);
+  --foreground: oklch(0 0 0);
+  --card: oklch(1.0000 0 0);
+  --card-foreground: oklch(0 0 0);
+  --popover: oklch(1.0000 0 0);
+  --popover-foreground: oklch(0 0 0);
+  --primary: oklch(0.5106 0.2301 276.9656);
+  --primary-foreground: oklch(1.0000 0 0);
+  --secondary: oklch(0.7038 0.1230 182.5025);
+  --secondary-foreground: oklch(0 0 0);
+  --muted: oklch(0.9551 0 0);
+  --muted-foreground: oklch(0.4000 0 0);
+  --accent: oklch(0.7686 0.1647 70.0804);
+  --accent-foreground: oklch(0 0 0);
+  --destructive: oklch(0.6368 0.2078 25.3313);
+  --destructive-foreground: oklch(1.0000 0 0);
+  --border: oklch(0 0 0);
+  --input: oklch(0.9551 0 0);
+  --ring: oklch(0.7853 0.1041 274.7134);
+  --success: oklch(0.45 0.20 150);
+  --success-foreground: oklch(1 0 0);
+  --warning: oklch(0.55 0.18 85);
+  --warning-foreground: oklch(0.18 0.02 260);
+
+  --code-bg: oklch(0.96 0.005 120);
+}