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>

src/app/features/room/message/ForwardMessageDialog.tsx

@@ -4,6 +4,10 @@ import {
   Avatar,
   Box,
   config,
+  Header,
+  Icon,
+  IconButton,
+  Icons,
   Input,
   Line,
   MenuItem,
@@ -134,14 +138,22 @@ export function ForwardMessageDialog({ mEvent, onClose }: Props) {
               ...modalStyle,
             }}
           >
-            <Box
-              direction="Column"
-              gap="200"
-              shrink="No"
-              style={{ padding: config.space.S400, paddingBottom: config.space.S200 }}
+            <Header
+              variant="Surface"
+              size="500"
+              style={{ padding: `0 ${config.space.S200} 0 ${config.space.S400}` }}
             >
-              <Text size="H5">Forward message</Text>
-              {!sentTo && (
+              <Box grow="Yes">
+                <Text as="h2" size="H4" truncate>
+                  Forward message
+                </Text>
+              </Box>
+              <IconButton size="300" onClick={onClose} radii="300" aria-label="Close">
+                <Icon src={Icons.Cross} />
+              </IconButton>
+            </Header>
+            {!sentTo && (
+              <Box shrink="No" style={{ padding: `${config.space.S200} ${config.space.S400}` }}>
                 <Input
                   variant="Background"
                   size="400"
@@ -151,8 +163,8 @@ export function ForwardMessageDialog({ mEvent, onClose }: Props) {
                   value={query}
                   onChange={(e: ChangeEvent<HTMLInputElement>) => setQuery(e.target.value)}
                 />
-              )}
-            </Box>
+              </Box>
+            )}
             <Line size="300" />
             {sentTo ? (
               <Box

src/app/features/settings/notifications/Notifications.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { useAtomValue, useSetAtom } from 'jotai';
-import { Box, Text, IconButton, Icon, Icons, Scroll, config, toRem } from 'folds';
+import { Box, Button, Text, IconButton, Icon, Icons, Scroll, config, toRem } from 'folds';
 import { Page, PageContent, PageHeader } from '../../../components/page';
 import { SystemNotification } from './SystemNotification';
 import { AllMessagesNotifications } from './AllMessages';
@@ -68,37 +68,34 @@ function NotificationPresets() {
       <SequenceCard className={SequenceCardStyle} variant="SurfaceVariant" direction="Column">
         <Box gap="300" style={{ padding: config.space.S300, flexWrap: 'wrap' }}>
           {PRESETS.map((preset) => (
-            <button
+            <Button
               key={preset.label}
               type="button"
               onClick={() => applyPreset(preset.patch)}
               title={preset.description}
+              variant="Secondary"
+              fill="Soft"
+              radii="300"
               style={{
-                display: 'flex',
-                flexDirection: 'column',
-                alignItems: 'center',
-                gap: toRem(4),
-                padding: `${toRem(8)} ${toRem(16)}`,
-                borderRadius: config.radii.R300,
-                border: '1px solid var(--border-interactive-normal)',
-                background: 'var(--bg-surface-low)',
-                color: 'inherit',
-                cursor: 'pointer',
+                height: 'unset',
                 minWidth: toRem(80),
+                padding: `${config.space.S200} ${config.space.S400}`,
               }}
             >
-              <span style={{ fontSize: toRem(24) }}>{preset.emoji}</span>
-              <Text size="T300" style={{ fontWeight: 600 }}>
-                {preset.label}
-              </Text>
-              <Text
-                size="T200"
-                priority="300"
-                style={{ textAlign: 'center', maxWidth: toRem(120) }}
-              >
-                {preset.description}
-              </Text>
-            </button>
+              <Box direction="Column" alignItems="Center" gap="100">
+                <span style={{ fontSize: toRem(24) }}>{preset.emoji}</span>
+                <Text size="T300" style={{ fontWeight: config.fontWeight.W600 }}>
+                  {preset.label}
+                </Text>
+                <Text
+                  size="T200"
+                  priority="300"
+                  style={{ textAlign: 'center', maxWidth: toRem(120) }}
+                >
+                  {preset.description}
+                </Text>
+              </Box>
+            </Button>
           ))}
         </Box>
       </SequenceCard>

src/app/utils/syntaxHighlight.ts

@@ -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 {};
   }