feat(staged): theme Pikchr diagram colors to match the active theme - #846
Conversation
Signed-off-by: Matt Toohey <contact@matttoohey.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
Signed-off-by: Matt Toohey <contact@matttoohey.com>
![chatgpt-codex-connector[bot]](https://avatars.githubusercontent.com/in/1144995?s=60&v=4){kind=small}
There was a problem hiding this comment.
💡 Codex Review
Here are some automated review suggestions for this pull request.
Reviewed commit: 08dfd0b5d1
ℹ️ About Codex in GitHub
Codex has been enabled to automatically review pull requests in this repo. Reviews are triggered when you
- Open a pull request for review
- Mark a draft as ready
- Comment "@codex review".
If Codex has suggestions, it will comment; otherwise it will react with 👍.
When you sign up for Codex through ChatGPT, Codex can also answer questions or update the PR, like "@codex address that feedback".
| ]); | ||
| const RGB_COLOR = /^rgb\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*\)$/i; | ||
| const HEX_COLOR = /^#([0-9a-f]{3}|[0-9a-f]{6})$/i; | ||
| const PIKCHR_NUMERIC_COLOR_LITERAL = /\b0x([0-9a-fA-F]{6})\b/g; |
There was a problem hiding this comment.
When a diagram uses Pikchr's decimal or shorter C-style numeric color literals (for example color 0, color 255, or fill 16777215), this regex does not add the rendered #000000/#0000ff/#ffffff key to preservedColors, so themePikchrColor later rewrites those explicit author colors to theme variables. Pikchr color expressions are 24-bit numeric values, not only six-digit 0xRRGGBB constants, so this breaks the intended preservation for supported numeric color syntax whenever the chosen value is one of the mapped colors.
Useful? React with 👍 / 👎.
1 participant
Summary
Pikchr renders diagrams with hard-coded black-on-white styling that clashes with the app's dark and light themes. This teaches the SVG sanitizer to remap Pikchr's default colors onto a themed palette so diagrams blend into the surrounding UI.
Changes
theme.ts,app.css): extend thediagramtheme withpikchrInk,pikchrSurface,pikchrMuted, and accent colors (red/green/blue/yellow/orange/purple/cyan) derived from the active theme's syntax and accent colors, exposed as--pikchr-*CSS custom properties. The diagram canvas background is now derived from the theme rather than a hard-coded#ffffff.pikchrRendering.ts):sanitizePikchrSvgmaps common Pikchr colors — named (red,green, …),rgb(...), and hex — onto the themed CSS variables, and defaults stroke/text ink tovar(--pikchr-ink). The sanitizer's allowed CSS color set is widened to acceptvar(--pikchr-*). Explicit numeric color literals (0xRRGGBB) from the diagram source are preserved so intentional author colors aren't overridden.diagramRendering.ts): the raw diagram source is passed into the sanitizer so numeric color literals can be detected and preserved.fill:nonehandling, and the exposed CSS variables acrosspikchrRendering.test.ts,renderMarkdown.test.ts, andtheme.test.ts.The follow-up commits tune the specific palette shades for better legibility.