fix(ui): forward-dialog header, notification presets, syntax-highlight tokens
CI / Build & Quality Checks (push) Successful in 10m39s
CI / Trigger Desktop Build (push) Successful in 8s

- N14 ForwardMessageDialog: add folds <Header> with title + close IconButton
  (was closeable only by clicking outside)
- N20 Notification presets: bare <button> with undefined --border-interactive-
  normal / --bg-surface-low vars -> folds <Button variant="Secondary" fill="Soft">
- N68 syntaxHighlight tokenStyle: use the theme-aware --prism-* variable family
  (keyword/selector/boolean/atrule/comment) instead of TDS-only --lt-accent-*
  vars with dark-only Monokai fallbacks; comment uses --prism-comment not opacity

Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
This commit is contained in:
2026-06-19 18:22:25 -04:00
parent b361d43088
commit e713d47319
4 changed files with 59 additions and 43 deletions
+13 -6
View File
@@ -306,19 +306,26 @@ export function tokenize(code: string, lang: string): SyntaxToken[] {
// ── Inline style helpers ────────────────────────────────────────────────────
/** Returns the React inline-style object for a given SyntaxToken type. */
/**
* Returns the React inline-style object for a given SyntaxToken type.
*
* Uses the `--prism-*` variable family (defined in `ReactPrism.css`), which has
* proper light / dark / TDS palettes — unlike the raw `--lt-accent-*` vars,
* which only exist in TDS mode and otherwise fall back to dark-only Monokai
* colors with poor contrast on light themes.
*/
export function tokenStyle(type: SyntaxToken['type']): CSSProperties {
switch (type) {
case 'kw':
return { color: 'var(--lt-accent-cyan, #66d9ef)' };
return { color: 'var(--prism-keyword)' };
case 'str':
return { color: 'var(--lt-accent-green, #a6e22e)' };
return { color: 'var(--prism-selector)' };
case 'num':
return { color: 'var(--lt-accent-orange, #fd971f)' };
return { color: 'var(--prism-boolean)' };
case 'cmt':
return { opacity: 0.5, fontStyle: 'italic' as const };
return { color: 'var(--prism-comment)', fontStyle: 'italic' as const };
case 'fn':
return { color: 'var(--lt-accent-purple, #ae81ff)' };
return { color: 'var(--prism-atrule)' };
default:
return {};
}