feat(theme): shift palette from indigo to deep violet + muted gold

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-04-08 11:09:23 -04:00
parent 670de547ad
commit 4bc7f9eaac
2 changed files with 38 additions and 24 deletions
+31 -23
View File
@@ -10,17 +10,17 @@
--color-text-muted: #999999; --color-text-muted: #999999;
--color-border: #dddde8; --color-border: #dddde8;
--color-input-border: #c8c8d8; --color-input-border: #c8c8d8;
--color-primary: #6366f1; --color-primary: #7c3aed;
--color-danger: #d93025; --color-danger: #d93025;
--color-tag-bg: #ede9fe; --color-tag-bg: #ede5ff;
--color-tag-text: #4f46e5; --color-tag-text: #6d28d9;
--color-shadow: rgba(0, 0, 0, 0.08); --color-shadow: rgba(0, 0, 0, 0.08);
--color-toast-success: #34a853; --color-toast-success: #34a853;
--color-toast-error: #d93025; --color-toast-error: #d93025;
--color-status-todo: #5f6368; --color-status-todo: #5f6368;
--color-status-todo-bg: #e8eaed; --color-status-todo-bg: #e8eaed;
--color-status-in-progress: #6366f1; --color-status-in-progress: #7c3aed;
--color-status-in-progress-bg: #ede9fe; --color-status-in-progress-bg: #ede5ff;
--color-status-done: #34a853; --color-status-done: #34a853;
--color-status-done-bg: #e6f4ea; --color-status-done-bg: #e6f4ea;
--color-priority-low: #5f9ea0; --color-priority-low: #5f9ea0;
@@ -44,38 +44,42 @@
--color-bubble-user-bg: rgba(0, 0, 0, 0.04); --color-bubble-user-bg: rgba(0, 0, 0, 0.04);
--color-bubble-user-border: rgba(0, 0, 0, 0.10); --color-bubble-user-border: rgba(0, 0, 0, 0.10);
--color-bubble-user-text: #3a3a4a; --color-bubble-user-text: #3a3a4a;
--color-bubble-asst-shadow: 0 2px 16px rgba(99, 102, 241, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06); --color-bubble-asst-shadow: 0 2px 16px rgba(124, 58, 237, 0.10), 0 1px 4px rgba(0, 0, 0, 0.06);
--radius-sm: 6px; --radius-sm: 6px;
--radius-md: 12px; --radius-md: 12px;
--radius-lg: 18px; --radius-lg: 18px;
--radius-pill: 9999px; --radius-pill: 9999px;
--focus-ring: 0 0 0 2px color-mix(in srgb, var(--color-primary) 40%, transparent); --focus-ring: 0 0 0 2px rgba(124, 58, 237, 0.4);
/* Layout */ /* Layout */
--page-max-width: 1200px; --page-max-width: 1200px;
--page-padding-x: 1rem; --page-padding-x: 1rem;
--sidebar-width: 260px; --sidebar-width: 260px;
--color-accent-warm: #b8860b;
--color-accent-warm-light: #d4a017;
--color-primary-solid: #7c3aed;
--color-primary-deep: #5b21b6;
} }
[data-theme="dark"] { [data-theme="dark"] {
--color-bg: #111113; --color-bg: #0f0f14;
--color-bg-secondary: #18181f; --color-bg-secondary: #16161f;
--color-bg-card: #1e1e27; --color-bg-card: #1a1a24;
--color-surface: #1a1b22; --color-surface: #16161f;
--color-text: #e4e4f0; --color-text: #e4e4f0;
--color-text-secondary: #8888a8; --color-text-secondary: #8888a8;
--color-text-muted: #52526a; --color-text-muted: #52526a;
--color-border: rgba(99, 102, 241, 0.10); --color-border: rgba(124, 58, 237, 0.12);
--color-input-border: rgba(99, 102, 241, 0.22); --color-input-border: rgba(124, 58, 237, 0.22);
--color-primary: #818cf8; --color-primary: #a78bfa;
--color-danger: #f44336; --color-danger: #f44336;
--color-tag-bg: #2a2a45; --color-tag-bg: #2a2a45;
--color-tag-text: #a5b4fc; --color-tag-text: #c4b5fd;
--color-shadow: rgba(0, 0, 0, 0.4); --color-shadow: rgba(0, 0, 0, 0.4);
--color-toast-success: #4caf50; --color-toast-success: #4caf50;
--color-toast-error: #f44336; --color-toast-error: #f44336;
--color-status-todo: #9aa0a6; --color-status-todo: #9aa0a6;
--color-status-todo-bg: #2a2a35; --color-status-todo-bg: #2a2a35;
--color-status-in-progress: #818cf8; --color-status-in-progress: #a78bfa;
--color-status-in-progress-bg: #2a2a45; --color-status-in-progress-bg: #2a2a45;
--color-status-done: #4caf50; --color-status-done: #4caf50;
--color-status-done-bg: #1b3a20; --color-status-done-bg: #1b3a20;
@@ -88,19 +92,23 @@
--color-wikilink: #c4b5fd; --color-wikilink: #c4b5fd;
--color-wikilink-bg: #2a1a45; --color-wikilink-bg: #2a1a45;
--color-overdue: #f44336; --color-overdue: #f44336;
--color-code-bg: #16161d; --color-code-bg: #12121a;
--color-code-inline-bg: #1e1e2d; --color-code-inline-bg: #1a1a2a;
--color-table-stripe: #16161e; --color-table-stripe: #14141e;
--color-success: #4ade80; --color-success: #4ade80;
--color-warning: #facc15; --color-warning: #facc15;
--color-input-bar-bg: #1e1e27; --color-input-bar-bg: #1a1a24;
--color-input-bar-text: #e4e4f0; --color-input-bar-text: #e4e4f0;
--color-input-bar-placeholder: rgba(228, 228, 240, 0.35); --color-input-bar-placeholder: rgba(228, 228, 240, 0.35);
--color-overlay: rgba(0, 0, 0, 0.65); --color-overlay: rgba(0, 0, 0, 0.65);
--color-bubble-user-bg: rgba(255, 255, 255, 0.04); --color-bubble-user-bg: rgba(255, 255, 255, 0.04);
--color-bubble-user-border: rgba(255, 255, 255, 0.10); --color-bubble-user-border: rgba(255, 255, 255, 0.10);
--color-bubble-user-text: #b0b0c8; --color-bubble-user-text: #b0b0c8;
--color-bubble-asst-shadow: 0 4px 28px rgba(99, 102, 241, 0.14), 0 2px 8px rgba(0, 0, 0, 0.4); --color-bubble-asst-shadow: 0 4px 28px rgba(124, 58, 237, 0.14), 0 2px 8px rgba(0, 0, 0, 0.4);
--color-accent-warm: #d4a017;
--color-accent-warm-light: #e8c45a;
--color-primary-solid: #7c3aed;
--color-primary-deep: #5b21b6;
} }
*, *,
@@ -168,11 +176,11 @@ button:not(:disabled):active,
background: transparent; background: transparent;
} }
::-webkit-scrollbar-thumb { ::-webkit-scrollbar-thumb {
background: rgba(99, 102, 241, 0.25); background: rgba(124, 58, 237, 0.25);
border-radius: 9999px; border-radius: 9999px;
} }
::-webkit-scrollbar-thumb:hover { ::-webkit-scrollbar-thumb:hover {
background: rgba(99, 102, 241, 0.45); background: rgba(124, 58, 237, 0.45);
} }
/* Floating inline assist button (teleported to body, cannot be scoped) */ /* Floating inline assist button (teleported to body, cannot be scoped) */
+7 -1
View File
@@ -11,6 +11,12 @@ defineProps<{ size?: number }>();
:height="size ?? 24" :height="size ?? 24"
aria-hidden="true" aria-hidden="true"
> >
<defs>
<linearGradient id="logo-gradient" x1="0" y1="0" x2="1" y2="1">
<stop offset="0%" stop-color="var(--color-primary-solid)" />
<stop offset="100%" stop-color="var(--color-primary-deep)" />
</linearGradient>
</defs>
<!-- Book body --> <!-- Book body -->
<path class="logo-book" d="M4 7 C4 7 8 5 16 6 C24 5 28 7 28 7 L28 26 C28 26 24 24 16 25 C8 24 4 26 4 26 Z" stroke-width="0.5"/> <path class="logo-book" d="M4 7 C4 7 8 5 16 6 C24 5 28 7 28 7 L28 26 C28 26 24 24 16 25 C8 24 4 26 4 26 Z" stroke-width="0.5"/>
<!-- Book spine --> <!-- Book spine -->
@@ -37,7 +43,7 @@ defineProps<{ size?: number }>();
<style scoped> <style scoped>
.logo-book { .logo-book {
fill: var(--color-primary); fill: url(#logo-gradient);
stroke: color-mix(in srgb, var(--color-primary) 70%, transparent); stroke: color-mix(in srgb, var(--color-primary) 70%, transparent);
} }
.logo-spine { .logo-spine {