Johan LEROY
063f5e928b
Adopte le langage visuel du design system Emerald dans l'IDE web : neutres zinc + accent emerald, polices auto-hébergées Inter + JetBrains Mono, radii/pills mono, points de statut, motif terminal, halo/grain. Refonte purement visuelle et additive (layout, routing, stores, protocole inchangés). - style.css : défauts sombres dans @theme + override clair sous html[data-theme=light] ; accent scindé (bright #34d399 / solid #059669 / hover) ; tokens border-soft/info/warn/danger/coffee ; idiomes globaux (focus/selection accent, scrollbars fines, jl-pulse/jl-blink, classes .chip/.status/.eyebrow/.label-mono/.caret/.halo/.grain, .btn*/.badge pill). - lib/theme.ts : singleton themeMode/resolvedTheme (dark/light/system, persistedRef arb.theme) + application dataset.theme/metas ; script anti-FOUC inline dans index.html ; toggle ActivityBar + Réglages. - Thèmes Monaco + xterm dark/light réactifs (palette ANSI + coloration syntaxique) ; fonts.ready + remeasureFonts pour l'alignement des glyphes. - status-tokens : tons sémantiques tokenisés ; balayage des ~340 couleurs Tailwind brutes vers les tokens sur tout components/* et views/* (exceptions assumées commentées). - GroupSummary.color exploité : icône de groupe teintée + ColorSwatchPicker (lib/group-colors.ts) dans les modals de groupe. - Polices via @fontsource-variable/{inter,jetbrains-mono} (offline).
90 lines
3.7 KiB
TypeScript
90 lines
3.7 KiB
TypeScript
// Configuration Monaco isolée dans son propre module, chargé UNIQUEMENT en import dynamique
|
|
// (cf. composables/useMonaco) → chunk séparé, zéro impact sur le bundle initial.
|
|
// Workers via Vite (?worker) : on ne fournit que le worker de base. La colorisation syntaxique
|
|
// (Monarch) tourne sur le thread principal et ne dépend d'aucun worker ; les services de langage
|
|
// avancés (TS/JSON) dégradent proprement : suffisant pour éditer + sauver dans le navigateur.
|
|
import * as monaco from 'monaco-editor';
|
|
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
|
|
import type { ResolvedTheme } from './theme';
|
|
|
|
(self as unknown as { MonacoEnvironment: monaco.Environment }).MonacoEnvironment = {
|
|
getWorker: () => new EditorWorker(),
|
|
};
|
|
|
|
// Deux thèmes « Emerald » (hex concrets : Monaco n'accepte pas de var CSS). Les couleurs de token
|
|
// (rules) sont SANS '#', les couleurs de chrome (colors) AVEC '#'. À garder synchronisé avec style.css.
|
|
monaco.editor.defineTheme('arboretum-dark', {
|
|
base: 'vs-dark',
|
|
inherit: true,
|
|
rules: [
|
|
{ token: 'comment', foreground: '52525b', fontStyle: 'italic' },
|
|
{ token: 'keyword', foreground: '34d399' },
|
|
{ token: 'storage', foreground: '34d399' },
|
|
{ token: 'string', foreground: 'fcd34d' },
|
|
{ token: 'number', foreground: '7dd3fc' },
|
|
{ token: 'constant', foreground: '7dd3fc' },
|
|
{ token: 'type', foreground: '5eead4' },
|
|
{ token: 'function', foreground: '7dd3fc' },
|
|
{ token: 'variable', foreground: 'f4f4f5' },
|
|
{ token: 'operator', foreground: 'a1a1aa' },
|
|
{ token: 'delimiter', foreground: 'a1a1aa' },
|
|
{ token: 'tag', foreground: 'f87171' },
|
|
{ token: 'attribute.name', foreground: 'fcd34d' },
|
|
{ token: 'attribute.value', foreground: '34d399' },
|
|
],
|
|
colors: {
|
|
'editor.background': '#09090b',
|
|
'editor.foreground': '#f4f4f5',
|
|
'editorCursor.foreground': '#34d399',
|
|
'editor.selectionBackground': '#3f3f46',
|
|
'editor.lineHighlightBackground': '#18181b',
|
|
'editorLineNumber.foreground': '#52525b',
|
|
'editorLineNumber.activeForeground': '#a1a1aa',
|
|
'editorIndentGuide.background1': '#27272a',
|
|
'editorGutter.background': '#09090b',
|
|
'editorWidget.background': '#18181b',
|
|
'editorWidget.border': '#27272a',
|
|
},
|
|
});
|
|
|
|
monaco.editor.defineTheme('arboretum-light', {
|
|
base: 'vs',
|
|
inherit: true,
|
|
rules: [
|
|
{ token: 'comment', foreground: 'a1a1aa', fontStyle: 'italic' },
|
|
{ token: 'keyword', foreground: '059669' },
|
|
{ token: 'storage', foreground: '059669' },
|
|
{ token: 'string', foreground: 'b45309' },
|
|
{ token: 'number', foreground: '0284c7' },
|
|
{ token: 'constant', foreground: '0284c7' },
|
|
{ token: 'type', foreground: '0d9488' },
|
|
{ token: 'function', foreground: '0284c7' },
|
|
{ token: 'variable', foreground: '18181b' },
|
|
{ token: 'operator', foreground: '52525b' },
|
|
{ token: 'delimiter', foreground: '52525b' },
|
|
{ token: 'tag', foreground: 'dc2626' },
|
|
{ token: 'attribute.name', foreground: 'b45309' },
|
|
{ token: 'attribute.value', foreground: '059669' },
|
|
],
|
|
colors: {
|
|
'editor.background': '#fafafa',
|
|
'editor.foreground': '#18181b',
|
|
'editorCursor.foreground': '#059669',
|
|
'editor.selectionBackground': '#d4d4d8',
|
|
'editor.lineHighlightBackground': '#f4f4f5',
|
|
'editorLineNumber.foreground': '#a1a1aa',
|
|
'editorLineNumber.activeForeground': '#52525b',
|
|
'editorIndentGuide.background1': '#e4e4e7',
|
|
'editorGutter.background': '#fafafa',
|
|
'editorWidget.background': '#ffffff',
|
|
'editorWidget.border': '#e4e4e7',
|
|
},
|
|
});
|
|
|
|
/** Nom du thème Monaco pour le thème résolu courant. */
|
|
export function monacoThemeName(resolved: ResolvedTheme): 'arboretum-dark' | 'arboretum-light' {
|
|
return resolved === 'light' ? 'arboretum-light' : 'arboretum-dark';
|
|
}
|
|
|
|
export { monaco };
|