mirror of
https://github.com/backnotprop/plannotator.git
synced 2026-09-14 14:17:26 +08:00
Michael Ramos
e1bd27aae4
* feat: custom theme system with 15 built-in themes Consolidate CSS theming into a single source of truth (packages/ui/theme.css) and introduce a multi-theme architecture where each theme defines both dark and light mode variants. Users can pick a color palette (theme) and separately toggle dark/light mode within it. - Extract shared color tokens, Tailwind bridge, and base styles into packages/ui/theme.css - Replace hardcoded oklch values with token references (oklch from var syntax) - Fix 3 light-mode bugs in review-editor diff colors - Create 15 built-in themes: Plannotator (default), Claude+, Soft Pop, Adwaita, Caffeine, Cyberdyne, Cyberfunk, Doom 64, Dracula, Gruvbox, PaulMillr, Quantum Rose, Solar Dusk, Terminal, Tinacious - Expand ThemeProvider to manage colorTheme + mode independently - Add Theme tab to Settings with mode toggle, search, and swatch grid - Dark-only themes (Dracula, Terminal, etc.) suppress light class to prevent broken styling; light-only themes (Tinacious) force it - Cookie persistence: plannotator-color-theme for palette, existing key for mode - Include theme conversion script for FinSitter theme adaptation Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: refine themes, add Catppuccin/Rosé Pine/Monokai Pro/Synthwave 84/Tokyo Night Theme curation: - Replace Cyberdyne with Synthwave '84 (from robb0wen/synthwave-vscode) - Replace Cyberfunk with Catppuccin (Mocha dark + Latte light), Rosé Pine (dark + Dawn light), Monokai Pro (dark only), Tokyo Night (Storm + Day) - Rewrite Gruvbox from canonical source (morhetz/gruvbox) - Rewrite Adwaita from canonical VS Code theme (piousdeer/vscode-adwaita) - Rewrite PaulMillr from Ghostty canonical palette Theme fixes: - Fix faded Send Feedback button on Solar Dusk, Quantum Rose, Caffeine (accent colors were too dark/invisible at 15% opacity) - Fix Dracula/Terminal/PaulMillr/Tinacious light mode breakage — dark-only themes now suppress .light class via modeSupport in ThemeProvider - Fix code block backgrounds — use --code-bg token instead of --muted - Add faint green grid overlay for Terminal theme - Alphabetize theme registry (Plannotator first) Code review diff theming: - Pass theme colors into @pierre/diffs shadow DOM via unsafeCSS prop - Dynamic themeType based on resolved mode 18 built-in themes: Plannotator, Absolutely, Adwaita, Caffeine, Catppuccin, Doom 64, Dracula, Gruvbox, Monokai Pro, PaulMillr, Quantum Rose, Rosé Pine, Soft Pop, Solar Dusk, Synthwave '84, Terminal, Tinacious, Tokyo Night Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: increase settings modal height for theme grid visibility Remove 340px cap on theme grid, bump content area from 70vh to 85vh so all themes are visible without scrolling. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * refactor: memoize ThemeProvider context, deduplicate Mode type, clean up DiffViewer From /simplify review: - Export Mode type from ThemeProvider, import in ThemeTab (was duplicated) - Add resolvedMode to context — consumers no longer re-query matchMedia - Memoize context value with useMemo, setters with useCallback (prevents unnecessary re-renders of all useTheme consumers) - Consolidate DiffViewer's two pierre state vars into single object - Use resolvedMode from context in DiffViewer instead of classList check - Format crammed single-line extended tokens in 4 theme CSS files Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * fix: prevent FOUC, fix system mode stale read, restore marketing theme class P1: Marketing site inline script now sets theme-{name} class on <html> before first paint (reads plannotator-color-theme cookie). Without this, CSS tokens under .theme-* selectors were never active. P2: System mode effect now re-reads matchMedia.matches immediately when entering system mode, not just on future changes. Fixes stale resolvedMode when OS preference changed while pinned to explicit dark/light. P3: ThemeProvider applies theme class synchronously during render (not in a passive useEffect) to prevent flash of unstyled content on hard refresh. Also extracted resolveThemeClasses to module scope to avoid useCallback. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> * feat: add Quick Copy button, fix import icon, comment out agent badge - Add Quick Copy button to annotation panel footer (splits horizontally with existing Quick Share). Copies annotations wrapped with the deny preamble so output is paste-ready for agent sessions. - Export Modal annotations copy also wraps with deny preamble - Extract wrapFeedbackForAgent() utility in parser.ts as single source of truth for the preamble text - Fix desktop import icon to match mobile (arrow-into-document, not download) - Comment out code review agent badge — unreliable across multiple harnesses Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com> --------- Co-authored-by: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
63 lines
2.0 KiB
CSS
63 lines
2.0 KiB
CSS
.theme-terminal,
|
|
.theme-terminal.light {
|
|
--background: #000001;
|
|
--foreground: #eeeeee;
|
|
--card: #010203;
|
|
--card-foreground: #eeeeee;
|
|
--popover: #010203;
|
|
--popover-foreground: #eeeeee;
|
|
--primary: #f99100;
|
|
--primary-foreground: #ffffff;
|
|
--secondary: #2e2e2e;
|
|
--secondary-foreground: #eeeeee;
|
|
--muted: #202127;
|
|
--muted-foreground: #9e9e9e;
|
|
--accent: #00a1ff;
|
|
--accent-foreground: #ffffff;
|
|
--destructive: #f20024;
|
|
--destructive-foreground: #ffffff;
|
|
--border: #2e2e2e;
|
|
--input: #010203;
|
|
--ring: #00a1ff;
|
|
--chart-1: #2dd047;
|
|
--chart-2: #f20024;
|
|
--chart-3: #821698;
|
|
--chart-4: #f6d653;
|
|
--chart-5: #00a1ff;
|
|
--sidebar: #010203;
|
|
--sidebar-foreground: #eeeeee;
|
|
--sidebar-primary: #f99100;
|
|
--sidebar-primary-foreground: #ffffff;
|
|
--sidebar-accent: #00a1ff;
|
|
--sidebar-accent-foreground: #ffffff;
|
|
--sidebar-border: #2e2e2e;
|
|
--sidebar-ring: #00a1ff;
|
|
--font-sans: system-ui;
|
|
--font-serif: system-ui;
|
|
--font-mono: system-ui;
|
|
--radius: 4px;
|
|
--shadow-2xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.1);
|
|
--shadow-xs: 0px 2px 4px 0px hsl(0 0% 0% / 0.1);
|
|
--shadow-sm: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2);
|
|
--shadow: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 1px 2px -1px hsl(0 0% 0% / 0.2);
|
|
--shadow-md: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 2px 4px -1px hsl(0 0% 0% / 0.2);
|
|
--shadow-lg: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 4px 6px -1px hsl(0 0% 0% / 0.2);
|
|
--shadow-xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.2), 0px 8px 10px -1px hsl(0 0% 0% / 0.2);
|
|
--shadow-2xl: 0px 2px 4px 0px hsl(0 0% 0% / 0.5);
|
|
|
|
/* 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: #000000;
|
|
--focus-highlight: oklch(0.70 0.20 200);
|
|
}
|
|
|
|
.theme-terminal .bg-grid,
|
|
.theme-terminal.light .bg-grid {
|
|
background-image:
|
|
linear-gradient(to right, rgba(0, 255, 0, 0.04) 1px, transparent 1px),
|
|
linear-gradient(to bottom, rgba(0, 255, 0, 0.04) 1px, transparent 1px);
|
|
}
|