fix(ui): forward-dialog header, notification presets, syntax-highlight tokens
- 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:
@@ -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 {};
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user