From acab737dab9bbe52f7ed17e92288db9de61cce3a Mon Sep 17 00:00:00 2001 From: Mikkel Georgsen Date: Wed, 1 Apr 2026 13:00:25 +0200 Subject: [PATCH] feat(21-02): install rehype-highlight and add theme-aware hljs CSS - Add rehype-highlight ^7.0.2 to ui dependencies - Add .dark, .theme-tokyo-night, :root:not(.dark) hljs token overrides to index.css - Covers catppuccin-mocha (default dark), tokyo-night, catppuccin-latte themes - Uses var(--card) for background consistency with theme system --- ui/package.json | 3 +- ui/src/index.css | 76 ++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 78 insertions(+), 1 deletion(-) diff --git a/ui/package.json b/ui/package.json index 4e0041c2..ee8e37e1 100644 --- a/ui/package.json +++ b/ui/package.json @@ -41,7 +41,6 @@ "@paperclipai/adapter-utils": "workspace:*", "@paperclipai/branding": "workspace:*", "@paperclipai/shared": "workspace:*", - "hermes-paperclip-adapter": "^0.2.0", "@radix-ui/react-slot": "^1.2.4", "@tailwindcss/typography": "^0.5.19", "@tanstack/react-query": "^5.90.21", @@ -49,6 +48,7 @@ "clsx": "^2.1.1", "cmdk": "^1.1.1", "diff": "^8.0.4", + "hermes-paperclip-adapter": "^0.2.0", "lexical": "0.35.0", "lucide-react": "^0.574.0", "mermaid": "^11.12.0", @@ -57,6 +57,7 @@ "react-dom": "^19.0.0", "react-markdown": "^10.1.0", "react-router-dom": "^7.1.5", + "rehype-highlight": "^7.0.2", "remark-gfm": "^4.0.1", "tailwind-merge": "^3.4.1" }, diff --git a/ui/src/index.css b/ui/src/index.css index aa1a2430..7315769f 100644 --- a/ui/src/index.css +++ b/ui/src/index.css @@ -794,6 +794,82 @@ a.paperclip-project-mention-chip { white-space: nowrap; } +/* ── highlight.js theme-aware overrides ───────────────────────── */ +/* + * Catppuccin Mocha (default dark) — base hljs styles. + * Applied when .dark class is present (catppuccin-mocha is the default dark theme). + */ +.dark .hljs { + background: var(--card); + color: #cdd6f4; +} +.dark .hljs-keyword { color: #cba6f7; } +.dark .hljs-string { color: #a6e3a1; } +.dark .hljs-number { color: #fab387; } +.dark .hljs-comment { color: #6c7086; font-style: italic; } +.dark .hljs-function, +.dark .hljs-title { color: #89b4fa; } +.dark .hljs-built_in { color: #f9e2af; } +.dark .hljs-type { color: #94e2d5; } +.dark .hljs-attr { color: #89dceb; } +.dark .hljs-literal { color: #fab387; } +.dark .hljs-selector-class { color: #89b4fa; } +.dark .hljs-tag { color: #f38ba8; } +.dark .hljs-name { color: #cba6f7; } +.dark .hljs-variable { color: #cdd6f4; } +.dark .hljs-params { color: #cdd6f4; } +.dark .hljs-operator { color: #89dceb; } + +/* + * Tokyo Night — overrides for .theme-tokyo-night.dark class. + * ThemeContext sets both .dark and .theme-tokyo-night on . + */ +.theme-tokyo-night .hljs { + background: var(--card); + color: #a9b1d6; +} +.theme-tokyo-night .hljs-keyword { color: #bb9af7; } +.theme-tokyo-night .hljs-string { color: #9ece6a; } +.theme-tokyo-night .hljs-number { color: #ff9e64; } +.theme-tokyo-night .hljs-comment { color: #565f89; font-style: italic; } +.theme-tokyo-night .hljs-function, +.theme-tokyo-night .hljs-title { color: #7aa2f7; } +.theme-tokyo-night .hljs-built_in { color: #e0af68; } +.theme-tokyo-night .hljs-type { color: #2ac3de; } +.theme-tokyo-night .hljs-attr { color: #73daca; } +.theme-tokyo-night .hljs-literal { color: #ff9e64; } +.theme-tokyo-night .hljs-selector-class { color: #7aa2f7; } +.theme-tokyo-night .hljs-tag { color: #f7768e; } +.theme-tokyo-night .hljs-name { color: #bb9af7; } +.theme-tokyo-night .hljs-variable { color: #c0caf5; } +.theme-tokyo-night .hljs-params { color: #c0caf5; } +.theme-tokyo-night .hljs-operator { color: #89ddff; } + +/* + * Catppuccin Latte (light theme) — applied via :root:not(.dark). + * ThemeContext removes .dark class for catppuccin-latte. + */ +:root:not(.dark) .hljs { + background: var(--card); + color: #4c4f69; +} +:root:not(.dark) .hljs-keyword { color: #8839ef; } +:root:not(.dark) .hljs-string { color: #40a02b; } +:root:not(.dark) .hljs-number { color: #fe640b; } +:root:not(.dark) .hljs-comment { color: #9ca0b0; font-style: italic; } +:root:not(.dark) .hljs-function, +:root:not(.dark) .hljs-title { color: #1e66f5; } +:root:not(.dark) .hljs-built_in { color: #df8e1d; } +:root:not(.dark) .hljs-type { color: #179299; } +:root:not(.dark) .hljs-attr { color: #179299; } +:root:not(.dark) .hljs-literal { color: #fe640b; } +:root:not(.dark) .hljs-selector-class { color: #1e66f5; } +:root:not(.dark) .hljs-tag { color: #d20f39; } +:root:not(.dark) .hljs-name { color: #8839ef; } +:root:not(.dark) .hljs-variable { color: #4c4f69; } +:root:not(.dark) .hljs-params { color: #4c4f69; } +:root:not(.dark) .hljs-operator { color: #04a5e5; } + /* Keep MDXEditor popups above app dialogs, even when they portal to . */ [class*="_popupContainer_"] { z-index: 81 !important;