@fsegurai/codemirror-theme-catppuccin-mocha 6.0.2 → 6.1.0

package/dist/index.js

@@ -1,5 +1,5 @@
-import { EditorView } from '@codemirror/view';
 import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { EditorView } from '@codemirror/view';
 import { tags } from '@lezer/highlight';
 
 // Helper module for styling options
@@ -8,9 +8,6 @@ const generalContent = {
     fontFamily: 'JetBrains Mono, Consolas, monospace',
     lineHeight: '1.6',
 };
-const generalCursor = {
-    borderLeftWidth: '2px',
-};
 const generalDiff = {
     insertedTextDecoration: 'none',
     deletedTextDecoration: 'line-through',
@@ -20,11 +17,9 @@ const generalGutter = {
     border: 'none',
     paddingRight: '8px',
     fontSize: '0.9em',
-    fontWeight: '500',
     lineHeight: '1.78', // Adjusted to compensate for 0.9em fontSize (1.6 / 0.9 ≈ 1.78)
 };
 const generalPanel = {
-    border: 'none',
     borderRadius: '4px',
     padding: '2px 10px',
 };
@@ -104,6 +99,498 @@ function applyMergeRevertStyles(styles) {
     document.head.appendChild(styleEl);
 }
 
+// Shared theme core: every theme package describes a palette (`ThemeDefinition`) and this module turns it into the
+// CodeMirror extension. Generated into each package by `bun run generate:helpers`; edit only the copy in
+// `packages/.helper/utils/`.
+/** Parent of every fine role: an omitted fine role resolves to its parent. */
+const ROLE_PARENTS = {
+    controlKeyword: 'keyword',
+    moduleKeyword: 'keyword',
+    definitionKeyword: 'keyword',
+    operatorKeyword: 'operator',
+    modifier: 'keyword',
+    arithmeticOperator: 'operator',
+    logicOperator: 'operator',
+    compareOperator: 'operator',
+    bitwiseOperator: 'operator',
+    updateOperator: 'operator',
+    derefOperator: 'operator',
+    definitionOperator: 'operator',
+    typeOperator: 'operator',
+    controlOperator: 'operator',
+    separator: 'punctuation',
+    bracket: 'punctuation',
+    paren: 'bracket',
+    brace: 'bracket',
+    squareBracket: 'bracket',
+    angleBracket: 'bracket',
+    character: 'name',
+    macroName: 'name',
+    variable: 'name',
+    localVariable: 'variable',
+    variableDefinition: 'variable',
+    nameDefinition: 'variableDefinition',
+    functionDefinition: 'function',
+    self: 'variable',
+    label: 'name',
+    propertyDefinition: 'property',
+    method: 'property',
+    methodDefinition: 'method',
+    specialProperty: 'property',
+    typeDefinition: 'type',
+    className: 'type',
+    namespace: 'type',
+    standardTag: 'tag',
+    annotation: 'meta',
+    documentMeta: 'meta',
+    processingInstruction: 'meta',
+    attributeValue: 'string',
+    literal: 'string',
+    docString: 'string',
+    regexp: 'string',
+    specialString: 'regexp',
+    escape: 'string',
+    unit: 'number',
+    atom: 'constant',
+    bool: 'atom',
+    null: 'constant',
+    constantName: 'constant',
+    standardName: 'constant',
+    color: 'standardName',
+    specialVariable: 'constant',
+    docComment: 'comment',
+    headingLevel: 'heading',
+    heading1: 'headingLevel',
+    heading2: 'headingLevel',
+    heading3: 'headingLevel',
+    heading4: 'headingLevel',
+    heading5: 'headingLevel',
+    heading6: 'headingLevel',
+    list: 'name',
+    quote: 'string',
+    monospace: 'string',
+    contentSeparator: 'punctuation',
+};
+/**
+ * Canonical tag → role table shared by every theme: every Lezer base tag and the modifier combinations that the
+ * official grammars emit. Each tag appears once, so no rule is shadowed by a later one.
+ */
+const SYNTAX_TAGS = [
+    ['keyword', [tags.keyword]],
+    ['controlKeyword', [tags.controlKeyword]],
+    ['moduleKeyword', [tags.moduleKeyword]],
+    ['definitionKeyword', [tags.definitionKeyword]],
+    ['operatorKeyword', [tags.operatorKeyword]],
+    ['modifier', [tags.modifier]],
+    ['operator', [tags.operator]],
+    ['arithmeticOperator', [tags.arithmeticOperator]],
+    ['logicOperator', [tags.logicOperator]],
+    ['compareOperator', [tags.compareOperator]],
+    ['bitwiseOperator', [tags.bitwiseOperator]],
+    ['updateOperator', [tags.updateOperator]],
+    ['derefOperator', [tags.derefOperator]],
+    ['definitionOperator', [tags.definitionOperator]],
+    ['typeOperator', [tags.typeOperator]],
+    ['controlOperator', [tags.controlOperator]],
+    ['punctuation', [tags.punctuation, /*@__PURE__*/tags.function(tags.punctuation)]],
+    ['separator', [tags.separator]],
+    ['bracket', [tags.bracket]],
+    ['paren', [tags.paren]],
+    ['brace', [tags.brace, /*@__PURE__*/tags.special(tags.brace)]],
+    ['squareBracket', [tags.squareBracket]],
+    ['angleBracket', [tags.angleBracket]],
+    ['name', [tags.name, /*@__PURE__*/tags.special(tags.name)]],
+    ['character', [tags.character]],
+    ['macroName', [tags.macroName]],
+    ['variable', [tags.variableName, /*@__PURE__*/tags.standard(tags.variableName)]],
+    ['localVariable', [/*@__PURE__*/tags.local(tags.variableName)]],
+    ['variableDefinition', [/*@__PURE__*/tags.definition(tags.variableName)]],
+    ['nameDefinition', [/*@__PURE__*/tags.definition(tags.name)]],
+    ['function', [/*@__PURE__*/tags.function(tags.variableName)]],
+    ['functionDefinition', [/*@__PURE__*/tags.definition(/*@__PURE__*/tags.function(tags.variableName))]],
+    ['self', [tags.self]],
+    ['label', [tags.labelName]],
+    ['property', [tags.propertyName]],
+    ['propertyDefinition', [/*@__PURE__*/tags.definition(tags.propertyName)]],
+    ['method', [/*@__PURE__*/tags.function(tags.propertyName)]],
+    ['methodDefinition', [/*@__PURE__*/tags.definition(/*@__PURE__*/tags.function(tags.propertyName))]],
+    ['specialProperty', [/*@__PURE__*/tags.special(tags.propertyName), /*@__PURE__*/tags.definition(/*@__PURE__*/tags.special(tags.propertyName))]],
+    ['type', [tags.typeName, /*@__PURE__*/tags.standard(tags.typeName)]],
+    ['typeDefinition', [/*@__PURE__*/tags.definition(tags.typeName)]],
+    ['className', [tags.className, /*@__PURE__*/tags.definition(tags.className), /*@__PURE__*/tags.constant(tags.className)]],
+    ['namespace', [tags.namespace]],
+    ['tag', [tags.tagName]],
+    ['standardTag', [/*@__PURE__*/tags.standard(tags.tagName)]],
+    ['attribute', [tags.attributeName, /*@__PURE__*/tags.special(tags.attributeName)]],
+    ['attributeValue', [tags.attributeValue]],
+    ['literal', [tags.literal]],
+    ['string', [tags.string]],
+    ['docString', [tags.docString]],
+    ['regexp', [tags.regexp]],
+    ['specialString', [/*@__PURE__*/tags.special(tags.string), /*@__PURE__*/tags.special(tags.docString)]],
+    ['escape', [tags.escape]],
+    ['number', [tags.number, tags.integer, tags.float]],
+    ['unit', [tags.unit]],
+    ['atom', [tags.atom]],
+    ['bool', [tags.bool]],
+    ['null', [tags.null]],
+    ['constantName', [/*@__PURE__*/tags.constant(tags.name)]],
+    ['standardName', [/*@__PURE__*/tags.standard(tags.name)]],
+    ['color', [tags.color]],
+    ['specialVariable', [/*@__PURE__*/tags.special(tags.variableName)]],
+    ['comment', [tags.comment, tags.lineComment, tags.blockComment]],
+    ['docComment', [tags.docComment]],
+    ['meta', [tags.meta]],
+    ['documentMeta', [tags.documentMeta]],
+    ['processingInstruction', [tags.processingInstruction]],
+    ['annotation', [tags.annotation]],
+    ['content', [tags.content, /*@__PURE__*/tags.special(tags.content)]],
+    ['heading', [tags.heading]],
+    ['heading1', [tags.heading1]],
+    ['heading2', [tags.heading2]],
+    ['heading3', [tags.heading3]],
+    ['heading4', [tags.heading4]],
+    ['heading5', [tags.heading5]],
+    ['heading6', [tags.heading6]],
+    ['list', [tags.list]],
+    ['quote', [tags.quote]],
+    ['monospace', [tags.monospace]],
+    ['contentSeparator', [tags.contentSeparator]],
+    ['link', [tags.link]],
+    ['url', [tags.url]],
+    ['emphasis', [tags.emphasis]],
+    ['strong', [tags.strong]],
+    ['strikethrough', [tags.strikethrough]],
+    ['invalid', [tags.invalid]],
+    ['inserted', [tags.inserted]],
+    ['deleted', [tags.deleted]],
+    ['changed', [tags.changed]],
+];
+/** Inline SVG image (same encoding as `@codemirror/lint`), used to draw lint markers in the theme colors. */
+function svg(content, attrs = 'viewBox="0 0 40 40"') {
+    return `url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" ${attrs}>${encodeURIComponent(content)}</svg>')`;
+}
+/** Wavy underline of a lint range. */
+function lintUnderline(color) {
+    return svg(`<path d="m0 2.5 l2 -1.5 l1 0 l2 1.5 l1 0" stroke="${color}" fill="none" stroke-width=".7"/>`, 'width="6" height="3"');
+}
+/**
+ * Canonical UI template: the same selectors for every theme, only palette values differ. Rules of equal specificity
+ * keep the order of the original theme files (later rules win).
+ */
+function uiTemplate(ui) {
+    return {
+        '&': {
+            color: ui.foreground,
+            backgroundColor: ui.background,
+            border: ui.border,
+            fontSize: generalContent.fontSize,
+            fontFamily: generalContent.fontFamily,
+        },
+        '.cm-content': { caretColor: ui.cursor, lineHeight: generalContent.lineHeight },
+        '.cm-cursor, .cm-dropCursor': {
+            borderLeftColor: ui.cursor,
+            borderLeftWidth: ui.cursorWidth,
+            boxShadow: ui.cursorShadow,
+        },
+        '.cm-cursor-secondary': { borderLeftColor: ui.cursor, opacity: '0.6' },
+        '.cm-fat-cursor': {
+            backgroundColor: ui.fatCursor.background,
+            color: ui.background,
+            border: ui.fatCursor.border,
+            boxShadow: ui.cursorShadow,
+        },
+        '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': { backgroundColor: ui.selection, color: ui.selectionForeground, outline: ui.selectionOutline },
+        '&:not(.cm-focused) .cm-selectionBackground': { backgroundColor: ui.selectionInactive },
+        '.cm-selectionLayer': { zIndex: 100 },
+        '.cm-searchMatch': {
+            backgroundColor: ui.searchMatch.background,
+            outline: `${ui.outlineWidth} solid ${ui.searchMatch.outline}`,
+            color: ui.searchMatch.foreground,
+            borderRadius: generalSearchField.borderRadius,
+            boxShadow: ui.searchMatch.shadow,
+        },
+        '.cm-searchMatch span': { color: ui.searchMatch.foreground },
+        '.cm-searchMatch.cm-searchMatch-selected': {
+            backgroundColor: ui.searchMatch.selectedBackground,
+            color: ui.searchMatch.selectedForeground,
+            padding: generalSearchField.padding,
+            outline: ui.searchMatch.selectedOutline,
+            boxShadow: ui.searchMatch.selectedShadow,
+        },
+        '.cm-searchMatch.cm-searchMatch-selected span': { color: ui.searchMatch.selectedForeground },
+        '.cm-search.cm-panel.cm-textfield': {
+            color: ui.panel.foreground,
+            borderRadius: generalSearchField.borderRadius,
+            padding: generalSearchField.padding,
+        },
+        '.cm-textfield': {
+            backgroundColor: ui.panel.inputBackground,
+            color: ui.panel.foreground,
+            border: ui.panel.inputBorder,
+            borderRadius: generalSearchField.borderRadius,
+            padding: generalSearchField.padding,
+        },
+        '.cm-panels': {
+            backgroundColor: ui.panel.background,
+            color: ui.panel.foreground,
+            border: ui.panel.outline,
+            borderRadius: generalPanel.borderRadius,
+            boxShadow: ui.panel.shadow,
+        },
+        '.cm-panels.cm-panels-top': { borderBottom: `${ui.panel.borderWidth} solid ${ui.panel.border}` },
+        '.cm-panels.cm-panels-bottom': { borderTop: `${ui.panel.borderWidth} solid ${ui.panel.border}` },
+        '.cm-panel.cm-gotoLine': { color: ui.panel.foreground, padding: generalPanel.padding },
+        '.cm-panel button, .cm-button': {
+            backgroundColor: ui.panel.buttonBackground,
+            backgroundImage: 'none',
+            color: ui.panel.buttonForeground,
+            border: ui.panel.buttonBorder,
+            borderRadius: generalPanel.borderRadius,
+            padding: generalPanel.padding,
+        },
+        '.cm-panel button:hover, .cm-button:hover': {
+            backgroundColor: ui.panel.buttonHoverBackground,
+            color: ui.panel.buttonHoverForeground,
+            border: ui.panel.buttonHoverBorder,
+            boxShadow: ui.panel.buttonHoverShadow,
+        },
+        '.cm-activeLine': {
+            backgroundColor: ui.activeLine,
+            borderLeft: ui.activeLineBorder.left,
+            borderRight: ui.activeLineBorder.right,
+            borderRadius: generalLine.borderRadius,
+            zIndex: 1,
+        },
+        '.cm-gutters': {
+            backgroundColor: ui.gutter.background,
+            color: ui.gutter.foreground,
+            border: generalGutter.border,
+            borderRight: `${ui.outlineWidth} solid ${ui.gutter.border}`,
+            paddingRight: generalGutter.paddingRight,
+        },
+        '.cm-activeLineGutter': {
+            backgroundColor: ui.gutter.activeBackground,
+            color: ui.gutter.activeForeground,
+            fontWeight: ui.gutter.activeFontWeight,
+            border: ui.gutter.activeBorder,
+        },
+        '.cm-lineNumbers': { fontSize: generalGutter.fontSize, lineHeight: generalGutter.lineHeight },
+        '.cm-foldGutter': { fontSize: generalGutter.fontSize, lineHeight: generalGutter.lineHeight },
+        '.cm-foldGutter .cm-gutterElement': { color: ui.gutter.foreground, cursor: 'pointer' },
+        '.cm-foldGutter .cm-gutterElement:hover': { color: ui.gutter.foldHover },
+        '.cm-gutter-lint': { color: ui.gutter.foreground },
+        '.cm-lint-marker': { width: '1em', height: '1em' },
+        '.cm-lint-marker-error': {
+            content: svg(`<circle cx="20" cy="20" r="15" fill="${ui.diagnostic.error}" stroke="${ui.background}" stroke-width="4"/>`),
+        },
+        '.cm-lint-marker-warning': {
+            content: svg(`<path fill="${ui.diagnostic.warning}" stroke="${ui.background}" stroke-width="4" stroke-linejoin="round" d="M20 6L37 35L3 35Z"/>`),
+        },
+        '.cm-lint-marker-info': {
+            content: svg(`<path fill="${ui.diagnostic.info}" stroke="${ui.background}" stroke-width="4" stroke-linejoin="round" d="M5 5L35 5L35 35L5 35Z"/>`),
+        },
+        '.cm-changeGutter': { backgroundColor: ui.gutter.background },
+        '.cm-merge-b .cm-changedLineGutter, .cm-inlineChangedLineGutter': { background: ui.diff.insertedForeground },
+        '.cm-merge-a .cm-changedLineGutter, .cm-deletedLineGutter': { background: ui.diff.deletedForeground },
+        '.cm-insertedLine': {
+            textDecoration: generalDiff.insertedTextDecoration,
+            backgroundColor: ui.diff.insertedBackground,
+            color: ui.diff.insertedForeground,
+            padding: generalDiff.insertedLinePadding,
+            borderRadius: generalDiff.borderRadius,
+        },
+        'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
+            textDecoration: generalDiff.insertedTextDecoration,
+            backgroundColor: `${ui.diff.insertedBackground} !important`,
+            color: ui.diff.insertedForeground,
+            padding: generalDiff.insertedLinePadding,
+            borderRadius: generalDiff.borderRadius,
+            border: ui.diff.insertedBorder,
+        },
+        'ins.cm-insertedLine .cm-changedText': { background: 'transparent !important' },
+        '.cm-deletedLine': {
+            textDecoration: generalDiff.deletedTextDecoration,
+            backgroundColor: ui.diff.deletedBackground,
+            color: ui.diff.deletedForeground,
+            padding: generalDiff.insertedLinePadding,
+            borderRadius: generalDiff.borderRadius,
+        },
+        // Merge view deletions only: `del` decorations, inline deletion widgets and the lines of deleted chunks. `:where()`
+        // keeps the specificity of the former bare `del` selector without styling other `del` elements.
+        'del.cm-deletedLine, del.cm-deletedText, :where(.cm-deletedChunk) del, :where(.cm-deletedChunk) del:not(:has(.cm-deletedText))': {
+            textDecoration: generalDiff.deletedTextDecoration,
+            backgroundColor: `${ui.diff.deletedBackground} !important`,
+            color: ui.diff.deletedForeground,
+            padding: generalDiff.insertedLinePadding,
+            borderRadius: generalDiff.borderRadius,
+            border: ui.diff.deletedBorder,
+        },
+        ':where(.cm-deletedChunk) del .cm-deletedText, :where(.cm-deletedChunk) del .cm-changedText, del:where(.cm-deletedLine) .cm-deletedText, del:where(.cm-deletedLine) .cm-changedText': { background: 'transparent !important' },
+        '.cm-merge-b .cm-changedLine, .cm-inlineChangedLine': { backgroundColor: ui.diff.insertedBackground },
+        '.cm-merge-a .cm-changedLine, .cm-deletedChunk': { backgroundColor: ui.diff.deletedBackground },
+        '.cm-collapsedLines': {
+            background: ui.foldPlaceholder.background,
+            color: ui.foldPlaceholder.foreground,
+        },
+        '.cm-mergeSpacer': { background: ui.merge.backgroundColor },
+        '.cm-tooltip': {
+            backgroundColor: ui.tooltip.background,
+            color: ui.tooltip.foreground,
+            border: `${ui.outlineWidth} solid ${ui.tooltip.border}`,
+            borderRadius: generalTooltip.borderRadius,
+            padding: generalTooltip.padding,
+            boxShadow: ui.tooltip.shadow,
+        },
+        '.cm-tooltip-autocomplete > ul': { backgroundColor: ui.tooltip.listBackground, border: ui.tooltip.listBorder },
+        '.cm-tooltip-autocomplete > ul > li': { padding: generalTooltip.padding, lineHeight: generalTooltip.lineHeight },
+        '.cm-tooltip-autocomplete > ul > li:hover': { backgroundColor: ui.tooltip.hoverBackground },
+        '.cm-tooltip-autocomplete > ul > li[aria-selected]': {
+            backgroundColor: ui.tooltip.selectedBackground,
+            color: ui.tooltip.selectedForeground,
+            border: ui.tooltip.selectedBorder,
+            borderRadius: generalTooltip.borderRadiusSelected,
+        },
+        '.cm-tooltip-autocomplete > ul > li > span.cm-completionIcon': {
+            color: ui.tooltip.icon,
+            paddingRight: generalTooltip.paddingRight,
+        },
+        '.cm-tooltip-autocomplete > ul > li > span.cm-completionDetail': { color: ui.tooltip.detail, fontStyle: 'italic' },
+        '.cm-completionMatchedText': {
+            color: 'inherit',
+            fontWeight: 'bold',
+            textDecoration: 'underline',
+            textDecorationColor: ui.matchingBracket.outline,
+        },
+        '.cm-completionInfo': {
+            backgroundColor: ui.tooltip.background,
+            color: ui.tooltip.foreground,
+            border: `${ui.outlineWidth} solid ${ui.tooltip.border}`,
+            padding: generalTooltip.padding,
+        },
+        '.cm-tooltip .cm-tooltip-arrow:before': { borderTopColor: 'transparent', borderBottomColor: 'transparent' },
+        '.cm-tooltip .cm-tooltip-arrow:after': {
+            borderTopColor: ui.tooltip.background,
+            borderBottomColor: ui.tooltip.background,
+        },
+        '.cm-tooltip-lint': { color: ui.tooltip.foreground, padding: '0' },
+        '.cm-tooltip-section:not(:first-child)': { borderTop: `1px solid ${ui.tooltip.border}` },
+        '.cm-diagnostic-error': {
+            borderLeft: `${ui.diagnostic.borderWidth} solid ${ui.diagnostic.error}`,
+            backgroundColor: ui.diagnostic.errorBackground,
+        },
+        '.cm-diagnostic-warning': {
+            borderLeft: `${ui.diagnostic.borderWidth} solid ${ui.diagnostic.warning}`,
+            backgroundColor: ui.diagnostic.warningBackground,
+        },
+        '.cm-diagnostic-info': {
+            borderLeft: `${ui.diagnostic.borderWidth} solid ${ui.diagnostic.info}`,
+            backgroundColor: ui.diagnostic.infoBackground,
+        },
+        '.cm-diagnostic-hint': { borderLeft: `${ui.diagnostic.borderWidth} solid ${ui.diagnostic.hint}` },
+        '.cm-diagnosticAction': {
+            backgroundColor: ui.panel.buttonBackground,
+            color: ui.panel.buttonForeground,
+            border: ui.panel.buttonBorder,
+            borderRadius: generalPanel.borderRadius,
+        },
+        '.cm-lintRange-error': { backgroundImage: lintUnderline(ui.diagnostic.error) },
+        '.cm-lintRange-warning': { backgroundImage: lintUnderline(ui.diagnostic.warning) },
+        '.cm-lintRange-info': { backgroundImage: lintUnderline(ui.diagnostic.info) },
+        '.cm-lintRange-hint': { backgroundImage: lintUnderline(ui.diagnostic.hint) },
+        '.cm-lintPoint-error': { borderBottom: `${ui.diagnostic.underlineWidth} wavy ${ui.diagnostic.error}` },
+        '.cm-lintPoint-warning': { borderBottom: `${ui.diagnostic.underlineWidth} wavy ${ui.diagnostic.warning}` },
+        '.cm-lintPoint-info': { borderBottom: `${ui.diagnostic.underlineWidth} wavy ${ui.diagnostic.info}` },
+        '.cm-matchingBracket': {
+            backgroundColor: ui.matchingBracket.background,
+            outline: `${ui.outlineWidth} solid ${ui.matchingBracket.outline}`,
+            borderRadius: generalMatching.borderRadius,
+            boxShadow: ui.matchingBracket.shadow,
+        },
+        '.cm-nonmatchingBracket': {
+            backgroundColor: ui.nonMatchingBracket.background,
+            outline: `${ui.outlineWidth} solid ${ui.nonMatchingBracket.outline}`,
+            borderRadius: generalMatching.borderRadius,
+        },
+        '.cm-selectionMatch': {
+            backgroundColor: ui.selectionMatch.background,
+            outline: `${ui.outlineWidth} solid ${ui.selectionMatch.outline}`,
+            borderRadius: generalMatching.borderRadius,
+        },
+        '.cm-snippetField': {
+            backgroundColor: ui.selectionMatch.background,
+            outline: `1px dashed ${ui.selectionMatch.outline}`,
+            borderRadius: generalMatching.borderRadius,
+        },
+        '.cm-snippetFieldPosition': { borderLeft: `1px dotted ${ui.cursor}` },
+        '.cm-foldPlaceholder': {
+            backgroundColor: ui.foldPlaceholder.background,
+            color: ui.foldPlaceholder.foreground,
+            border: `${ui.outlineWidth} ${ui.foldPlaceholder.borderStyle} ${ui.foldPlaceholder.border}`,
+            borderRadius: generalPlaceholder.borderRadius,
+            padding: generalPlaceholder.padding,
+            margin: generalPlaceholder.margin,
+        },
+        // Transparent outline: invisible normally, repainted with the system color in forced-colors mode (drops box-shadow).
+        '&.cm-focused': { outline: '2px solid transparent', boxShadow: ui.focusRing },
+        '& .cm-scroller::-webkit-scrollbar': { width: generalScroller.width, height: generalScroller.height },
+        '& .cm-scroller::-webkit-scrollbar-track': { background: ui.scrollbar.track, border: ui.scrollbar.trackBorder },
+        '& .cm-scroller::-webkit-scrollbar-thumb': {
+            backgroundColor: ui.scrollbar.thumb,
+            borderRadius: generalScroller.borderRadius,
+            border: ui.scrollbar.thumbBorder,
+        },
+        '& .cm-scroller::-webkit-scrollbar-thumb:hover': {
+            backgroundColor: ui.scrollbar.thumbHover,
+            boxShadow: ui.scrollbar.thumbHoverShadow,
+        },
+        '.cm-ghostText': { opacity: ui.ghostTextOpacity, color: ui.ghostText },
+        '.cm-placeholder': { color: ui.ghostText },
+        '.cm-specialChar': { color: ui.specialChar },
+        '.cm-trailingSpace': { backgroundColor: ui.diff.deletedBackground },
+        '.cm-highlightSpace': {
+            backgroundImage: `radial-gradient(circle at 50% 55%, ${ui.gutter.foreground} 20%, transparent 0)`,
+        },
+        '.cm-crosshair': { cursor: 'crosshair' },
+    };
+}
+/** Drops `null` declarations and selectors left without declarations. */
+function emittedRules(spec) {
+    const result = {};
+    for (const [selector, declarations] of Object.entries(spec)) {
+        const emitted = Object.entries(declarations).filter((entry) => entry[1] !== null);
+        if (emitted.length > 0)
+            result[selector] = Object.fromEntries(emitted);
+    }
+    return result;
+}
+/** Style of a role, falling back through `ROLE_PARENTS` for omitted fine roles. */
+function resolveRole(syntax, role) {
+    let current = role;
+    while (current) {
+        const style = syntax[current];
+        if (style)
+            return style;
+        current = ROLE_PARENTS[current];
+    }
+    return {};
+}
+/** Highlight rules of a theme: one rule per entry of the canonical table. */
+function highlightRules(definition) {
+    return SYNTAX_TAGS.map(([role, tagList]) => (Object.assign({ tag: [...tagList] }, resolveRole(definition.syntax, role))));
+}
+/** Builds the editor theme, the syntax highlighting and the merge view styles of a theme definition. */
+function defineTheme(definition) {
+    const theme = EditorView.theme(emittedRules(uiTemplate(definition.ui)), { dark: definition.dark });
+    const highlightStyle = HighlightStyle.define(highlightRules(definition));
+    return {
+        extension: [theme, syntaxHighlighting(highlightStyle)],
+        theme,
+        highlightStyle,
+        mergeStyles: Object.assign({}, definition.ui.merge),
+    };
+}
+
 /**
  * Catppuccin Mocha theme color definitions
  * ----------------------------------------
@@ -112,374 +599,188 @@ function applyMergeRevertStyles(styles) {
 // Base colors (Mocha variant)
 const base00 = '#1e1e2e', // Background - dark navy
 base01 = '#313244', // Selection background
-base02 = '#45475a', // Comments
-base03 = '#585b70', // Dark grey
+base02 = '#9c9fb5', // Comments
+base03 = '#9b9fb6', // Dark grey
 base04 = '#cdd6f4', // Foreground - light blue
 base05 = '#f5e0dc', // Light foreground
 // Catppuccin Mocha colors
-rosewater = '#f5e0dc', flamingo = '#f2cdcd', pink = '#f5c2e7', mauve = '#cba6f7', red = '#f38ba8', maroon = '#eba0ac', peach = '#fab387', yellow = '#f9e2af', green = '#a6e3a1', teal = '#94e2d5', sky = '#89dceb', sapphire = '#74c7ec', blue = '#89b4fa', lavender = '#b4befe';
+flamingo = '#f2cdcd', pink = '#f5c2e7', mauve = '#cba6f7', red = '#f38ba8', maroon = '#eba0ac', peach = '#fab387', yellow = '#f9e2af', green = '#a6e3a1', teal = '#94e2d5', sky = '#89dceb', sapphire = '#74c7ec', blue = '#89b4fa', lavender = '#b4befe';
 // UI specific colors
-const invalid = '#f38ba8', darkBackground = '#181825', background = base00, tooltipBackground = base01, selectionMatch = '#45475a80', cursor = rosewater, activeBracketBg = '#45475a55', activeBracketBorder = lavender, diagnosticWarning = yellow, linkColor = blue, visitedLinkColor = mauve;
+const darkBackground = '#181825', selectionMatch = '#45475a80', activeBracketBg = '#45475a55';
 // Diff/merge specific colors
-const addedBackground = '#a6e3a140', removedBackground = '#f38ba840', addedText = green, removedText = red;
-/**
- * Enhanced editor theme styles for Catppuccin Mocha
- */
-const catppuccinMochaTheme = /*@__PURE__*/EditorView.theme({
-    // Base editor styles
-    '&': {
-        color: base04,
-        backgroundColor: background,
-        fontSize: generalContent.fontSize,
-        fontFamily: generalContent.fontFamily,
-    },
-    // Content and cursor
-    '.cm-content': {
-        caretColor: cursor,
-        lineHeight: generalContent.lineHeight,
-    },
-    '.cm-cursor, .cm-dropCursor': {
-        borderLeftColor: cursor,
-        borderLeftWidth: generalCursor.borderLeftWidth,
-    },
-    '.cm-fat-cursor': {
-        backgroundColor: `${cursor}99`,
-        color: background,
-    },
-    // Selection
-    '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
-        backgroundColor: '#585b7080',
-        outline: `1px solid ${mauve}`,
-    },
-    // Make sure selection appears above active line
-    '.cm-selectionLayer': {
-        zIndex: 100,
-    },
-    // Search functionality
-    '.cm-searchMatch': {
-        backgroundColor: '#89b4fa40',
-        outline: `1px solid ${sapphire}`,
-        color: base04,
-        borderRadius: generalSearchField.borderRadius,
-        '& span': {
-            color: base04,
-        },
-    },
-    '.cm-searchMatch.cm-searchMatch-selected': {
-        backgroundColor: blue,
-        color: base00,
-        padding: generalSearchField.padding,
-        '& span': {
-            color: base00,
-        },
-    },
-    '.cm-search.cm-panel.cm-textfield': {
-        color: base04,
-        borderRadius: generalSearchField.borderRadius,
-        padding: generalSearchField.padding,
-    },
-    // Panels
-    '.cm-panels': {
-        backgroundColor: darkBackground,
-        color: base04,
-        borderRadius: '4px',
-    },
-    '.cm-panels.cm-panels-top': {
-        borderBottom: `1px solid ${base02}`,
-    },
-    '.cm-panels.cm-panels-bottom': {
-        borderTop: `1px solid ${base02}`,
-    },
-    '.cm-panel button': {
-        backgroundColor: tooltipBackground,
-        color: base04,
-        border: generalPanel.border,
-        borderRadius: generalPanel.borderRadius,
-        padding: generalPanel.padding,
-    },
-    '.cm-panel button:hover': {
-        backgroundColor: base01,
-    },
-    // Line highlighting
-    '.cm-activeLine': {
-        backgroundColor: '#3a3a5266',
-        borderRadius: generalLine.borderRadius,
-        borderLeft: `2px solid ${lavender}`,
-        zIndex: 1,
-    },
-    // Gutters
-    '.cm-gutters': {
-        backgroundColor: darkBackground,
-        color: base02,
-        border: generalGutter.border,
-        borderRight: `1px solid ${base01}`,
-        paddingRight: generalGutter.paddingRight,
-    },
-    '.cm-activeLineGutter': {
-        backgroundColor: base01,
-        color: base04,
-        fontWeight: generalGutter.fontWeight,
-    },
-    '.cm-lineNumbers': {
-        fontSize: generalGutter.fontSize,
-        lineHeight: generalGutter.lineHeight,
-    },
-    '.cm-foldGutter': {
-        fontSize: generalGutter.fontSize,
-        lineHeight: generalGutter.lineHeight,
-    },
-    '.cm-foldGutter .cm-gutterElement': {
-        color: base02,
-        cursor: 'pointer',
-    },
-    '.cm-foldGutter .cm-gutterElement:hover': {
-        color: base04,
-    },
-    // Diff/Merge View Styles
-    '.cm-insertedLine': {
-        textDecoration: generalDiff.insertedTextDecoration,
-        backgroundColor: addedBackground,
-        color: addedText,
-        padding: generalDiff.insertedLinePadding,
-        borderRadius: generalDiff.borderRadius,
-    },
-    'ins.cm-insertedLine, ins.cm-insertedLine:not(:has(.cm-changedText))': {
-        textDecoration: generalDiff.insertedTextDecoration,
-        backgroundColor: `${addedBackground} !important`,
-        color: addedText,
-        padding: generalDiff.insertedLinePadding,
-        borderRadius: generalDiff.borderRadius,
-        border: `1px solid ${addedText}40`,
-    },
-    'ins.cm-insertedLine .cm-changedText': {
-        background: 'transparent !important',
-    },
-    '.cm-deletedLine': {
-        textDecoration: generalDiff.deletedTextDecoration,
-        backgroundColor: removedBackground,
-        color: removedText,
-        padding: generalDiff.insertedLinePadding,
-        borderRadius: generalDiff.borderRadius,
-    },
-    'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
-        textDecoration: generalDiff.deletedTextDecoration,
-        backgroundColor: `${removedBackground} !important`,
-        color: removedText,
-        padding: generalDiff.insertedLinePadding,
-        borderRadius: generalDiff.borderRadius,
-        border: `1px solid ${removedText}40`,
-    },
-    'del .cm-deletedText, del .cm-changedText': {
-        background: 'transparent !important',
-    },
-    // Tooltips and autocomplete
-    '.cm-tooltip': {
-        backgroundColor: tooltipBackground,
-        border: `1px solid ${base02}`,
-        borderRadius: generalTooltip.borderRadius,
-        padding: generalTooltip.padding,
-        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
-    },
-    '.cm-tooltip-autocomplete': {
-        '& > ul': {
-            backgroundColor: tooltipBackground,
-            border: 'none',
+const addedBackground = '#a6e3a140', removedBackground = '#f38ba840';
+const theme = /*@__PURE__*/defineTheme({
+    dark: true,
+    ui: {
+        background: base00,
+        foreground: base04,
+        border: 'none',
+        cursor: base05,
+        cursorWidth: '2px',
+        cursorShadow: 'none',
+        fatCursor: { background: `${base05}99`, border: 'none' },
+        selection: '#585b7066',
+        selectionInactive: '#585b7066',
+        selectionForeground: null,
+        selectionOutline: `1px solid ${mauve}`,
+        activeLine: '#3a3a525f',
+        activeLineBorder: { left: `2px solid ${lavender}`, right: 'none' },
+        ghostText: base02,
+        ghostTextOpacity: '0.5',
+        specialChar: red,
+        focusRing: `0 0 0 2px ${base00}, 0 0 0 4px ${lavender}`,
+        outlineWidth: '1px',
+        searchMatch: {
+            background: `${blue}40`,
+            outline: sapphire,
+            foreground: base04,
+            shadow: 'none',
+            selectedBackground: blue,
+            selectedForeground: base00,
+            selectedOutline: `1px solid ${sapphire}`,
+            selectedShadow: 'none',
         },
-        '& > ul > li': {
-            padding: generalTooltip.padding,
-            lineHeight: generalTooltip.lineHeight,
+        selectionMatch: { background: selectionMatch, outline: `${base01}50` },
+        matchingBracket: { background: activeBracketBg, outline: lavender, shadow: 'none' },
+        nonMatchingBracket: { background: removedBackground, outline: red },
+        panel: {
+            background: darkBackground,
+            foreground: base04,
+            border: base02,
+            borderWidth: '1px',
+            outline: 'none',
+            shadow: 'none',
+            buttonBackground: base01,
+            buttonForeground: base04,
+            buttonBorder: 'none',
+            buttonHoverBackground: base01,
+            buttonHoverForeground: base04,
+            buttonHoverBorder: 'none',
+            buttonHoverShadow: 'none',
+            inputBackground: base00,
+            inputBorder: `1px solid ${base02}`,
         },
-        '& > ul > li[aria-selected]': {
-            backgroundColor: base01,
-            color: base05,
-            borderRadius: generalTooltip.borderRadiusSelected,
+        gutter: {
+            background: darkBackground,
+            foreground: base02,
+            border: base01,
+            activeBackground: base01,
+            activeForeground: base04,
+            activeFontWeight: '500',
+            activeBorder: 'none',
+            foldHover: base04,
         },
-        '& > ul > li > span.cm-completionIcon': {
-            color: base02,
-            paddingRight: generalTooltip.paddingRight,
+        foldPlaceholder: { background: base01, foreground: base02, border: `${base02}70`, borderStyle: 'dotted' },
+        tooltip: {
+            background: base01,
+            foreground: base04,
+            border: base02,
+            shadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
+            listBackground: base01,
+            listBorder: 'none',
+            hoverBackground: 'transparent',
+            selectedBackground: base01,
+            selectedForeground: base05,
+            selectedBorder: 'none',
+            icon: base02,
+            detail: base02,
         },
-        '& > ul > li > span.cm-completionDetail': {
-            color: base02,
-            fontStyle: 'italic',
+        diff: {
+            insertedBackground: addedBackground,
+            insertedForeground: green,
+            insertedBorder: `1px solid ${green}40`,
+            deletedBackground: removedBackground,
+            deletedForeground: red,
+            deletedBorder: `1px solid ${red}40`,
         },
-    },
-    '.cm-tooltip .cm-tooltip-arrow:before': {
-        borderTopColor: 'transparent',
-        borderBottomColor: 'transparent',
-    },
-    '.cm-tooltip .cm-tooltip-arrow:after': {
-        borderTopColor: tooltipBackground,
-        borderBottomColor: tooltipBackground,
-    },
-    // Diagnostics styling
-    '.cm-diagnostic': {
-        '&-error': {
-            borderLeft: `3px solid ${red}`,
+        diagnostic: {
+            error: red,
+            warning: yellow,
+            info: blue,
+            hint: blue,
+            errorBackground: 'transparent',
+            warningBackground: 'transparent',
+            infoBackground: 'transparent',
+            borderWidth: '3px',
+            underlineWidth: '2px',
         },
-        '&-warning': {
-            borderLeft: `3px solid ${diagnosticWarning}`,
+        scrollbar: {
+            track: darkBackground,
+            trackBorder: 'none',
+            thumb: base01,
+            thumbBorder: `3px solid ${darkBackground}`,
+            thumbHover: base02,
+            thumbHoverShadow: 'none',
         },
-        '&-info': {
-            borderLeft: `3px solid ${linkColor}`,
+        merge: {
+            backgroundColor: darkBackground,
+            borderColor: base02,
+            buttonColor: base04,
+            buttonHoverColor: base01,
         },
     },
-    '.cm-lintPoint-error': {
-        borderBottom: `2px wavy ${red}`,
-    },
-    '.cm-lintPoint-warning': {
-        borderBottom: `2px wavy ${diagnosticWarning}`,
-    },
-    // Matching brackets
-    '.cm-matchingBracket': {
-        backgroundColor: activeBracketBg,
-        outline: `1px solid ${activeBracketBorder}`,
-        borderRadius: generalMatching.borderRadius,
-    },
-    '.cm-nonmatchingBracket': {
-        backgroundColor: `${red}40`,
-        outline: `1px solid ${invalid}`,
-        borderRadius: generalMatching.borderRadius,
-    },
-    // Selection matches
-    '.cm-selectionMatch': {
-        backgroundColor: selectionMatch,
-        outline: `1px solid ${base01}50`,
-        borderRadius: generalMatching.borderRadius,
-    },
-    // Fold placeholder
-    '.cm-foldPlaceholder': {
-        backgroundColor: tooltipBackground,
-        color: base02,
-        border: `1px dotted ${base02}70`,
-        borderRadius: generalPlaceholder.borderRadius,
-        padding: generalPlaceholder.padding,
-        margin: generalPlaceholder.margin,
-    },
-    // Focus outline
-    '&.cm-focused': {
-        outline: 'none',
-        boxShadow: `0 0 0 2px ${background}, 0 0 0 3px ${lavender}40`,
-    },
-    // Scrollbars
-    '& .cm-scroller::-webkit-scrollbar': {
-        width: generalScroller.width,
-        height: generalScroller.height,
-    },
-    '& .cm-scroller::-webkit-scrollbar-track': {
-        background: darkBackground,
-    },
-    '& .cm-scroller::-webkit-scrollbar-thumb': {
-        backgroundColor: base01,
-        borderRadius: generalScroller.borderRadius,
-        border: `3px solid ${darkBackground}`,
-    },
-    '& .cm-scroller::-webkit-scrollbar-thumb:hover': {
-        backgroundColor: base02,
-    },
-    // Ghost text
-    '.cm-ghostText': {
-        opacity: '0.5',
-        color: base02,
-    },
-}, { dark: true });
-/**
- * Enhanced syntax highlighting for Catppuccin Mocha theme
- */
-const catppuccinMochaHighlightStyle = /*@__PURE__*/HighlightStyle.define([
-    // Keywords and control flow
-    { tag: tags.keyword, color: mauve, fontWeight: 'bold' },
-    { tag: tags.controlKeyword, color: mauve, fontWeight: 'bold' },
-    { tag: tags.moduleKeyword, color: mauve, fontWeight: 'bold' },
-    // Names and variables
-    { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: base04 },
-    { tag: [tags.variableName], color: base04 },
-    { tag: [tags.propertyName], color: blue, fontStyle: 'normal' },
-    // Classes and types
-    { tag: [tags.typeName], color: yellow },
-    { tag: [tags.className], color: yellow, fontStyle: 'italic' },
-    { tag: [tags.namespace], color: peach, fontStyle: 'italic' },
-    // Operators and punctuation
-    { tag: [tags.operator, tags.operatorKeyword], color: sky },
-    { tag: [tags.bracket], color: base03 },
-    { tag: [tags.brace], color: teal },
-    { tag: [tags.punctuation], color: base03 },
-    // Functions and parameters
-    { tag: [/*@__PURE__*/tags.function(tags.variableName), tags.labelName], color: blue },
-    { tag: [/*@__PURE__*/tags.definition(/*@__PURE__*/tags.function(tags.variableName))], color: blue },
-    { tag: [/*@__PURE__*/tags.definition(tags.variableName)], color: peach },
-    // Constants and literals
-    { tag: tags.number, color: peach },
-    { tag: tags.changed, color: yellow },
-    { tag: tags.annotation, color: red, fontStyle: 'italic' },
-    { tag: tags.modifier, color: mauve, fontStyle: 'italic' },
-    { tag: tags.self, color: red },
-    { tag: [tags.color, /*@__PURE__*/tags.constant(tags.name), /*@__PURE__*/tags.standard(tags.name)], color: peach },
-    { tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], color: peach },
-    // Strings and regex
-    { tag: [tags.processingInstruction, tags.inserted], color: green },
-    { tag: [/*@__PURE__*/tags.special(tags.string), tags.regexp], color: pink },
-    { tag: tags.string, color: green },
-    // Punctuation and structure
-    { tag: /*@__PURE__*/tags.definition(tags.typeName), color: yellow, fontWeight: 'bold' },
-    { tag: [/*@__PURE__*/tags.definition(tags.name), tags.separator], color: flamingo },
-    // Comments and documentation
-    { tag: tags.meta, color: base02 },
-    { tag: tags.comment, fontStyle: 'italic', color: base02 },
-    { tag: tags.docComment, fontStyle: 'italic', color: base02 },
-    // HTML/XML elements
-    { tag: [tags.tagName], color: pink },
-    { tag: [tags.attributeName], color: yellow },
-    // Markdown and text formatting
-    { tag: [tags.heading], fontWeight: 'bold', color: mauve },
-    { tag: [tags.strong], fontWeight: 'bold', color: maroon },
-    { tag: [tags.emphasis], fontStyle: 'italic', color: pink },
-    // Links and URLs
-    {
-        tag: [tags.link],
-        color: visitedLinkColor,
-        fontWeight: '500',
-        textDecoration: 'underline',
-        textUnderlinePosition: 'under',
-    },
-    {
-        tag: [tags.url],
-        color: linkColor,
-        textDecoration: 'underline',
-        textUnderlineOffset: '2px',
-    },
-    // Special states
-    {
-        tag: [tags.invalid],
-        color: red,
-        textDecoration: 'underline wavy',
-        borderBottom: `1px wavy ${red}`,
-    },
-    { tag: [tags.strikethrough], color: red, textDecoration: 'line-through' },
-    // Enhanced syntax highlighting
-    { tag: /*@__PURE__*/tags.constant(tags.name), color: peach },
-    { tag: tags.deleted, color: red },
-    { tag: tags.squareBracket, color: maroon },
-    { tag: tags.angleBracket, color: sky },
-    // Additional specific styles
-    { tag: tags.monospace, color: teal, fontStyle: 'italic' },
-    { tag: [tags.contentSeparator], color: sapphire },
-    { tag: tags.quote, color: lavender },
-]);
+    syntax: {
+        keyword: { color: mauve, fontWeight: 'bold' },
+        definitionKeyword: { color: mauve },
+        modifier: { color: mauve, fontStyle: 'italic' },
+        separator: { color: flamingo },
+        angleBracket: { color: sky },
+        squareBracket: { color: maroon },
+        brace: { color: teal },
+        operator: { color: sky },
+        punctuation: { color: base03 },
+        name: { color: base04 },
+        localVariable: { color: peach },
+        variableDefinition: { color: peach },
+        nameDefinition: { color: flamingo },
+        function: { color: blue },
+        self: { color: red },
+        label: { color: blue },
+        property: { color: blue, fontStyle: 'normal' },
+        type: { color: yellow },
+        typeDefinition: { color: yellow, fontWeight: 'bold' },
+        className: { color: yellow, fontStyle: 'italic' },
+        namespace: { color: peach, fontStyle: 'italic' },
+        tag: { color: pink },
+        attribute: { color: yellow },
+        content: { color: base04 },
+        string: { color: green },
+        regexp: { color: pink },
+        number: { color: peach },
+        constant: { color: peach },
+        comment: { fontStyle: 'italic', color: base02 },
+        meta: { color: base02 },
+        processingInstruction: { color: green },
+        annotation: { color: red, fontStyle: 'italic' },
+        heading: { fontWeight: 'bold', color: mauve },
+        headingLevel: { color: mauve },
+        list: { color: mauve },
+        quote: { color: lavender },
+        monospace: { color: teal, fontStyle: 'italic' },
+        contentSeparator: { color: sapphire },
+        link: {
+            color: mauve,
+            fontWeight: '500',
+            textDecoration: 'underline',
+            textUnderlinePosition: 'under',
+        },
+        url: { color: blue, textDecoration: 'underline', textUnderlineOffset: '2px' },
+        emphasis: { fontStyle: 'italic', color: pink },
+        strong: { fontWeight: 'bold', color: maroon },
+        strikethrough: { color: red, textDecoration: 'line-through' },
+        invalid: { color: red, textDecoration: 'underline wavy', borderBottom: `1px wavy ${red}` },
+        inserted: { color: green },
+        deleted: { color: red },
+        changed: { color: yellow },
+    },
+});
 /**
  * Combined Catppuccin Mocha theme extension
  */
-const catppuccinMocha = [
-    catppuccinMochaTheme,
-    /*@__PURE__*/syntaxHighlighting(catppuccinMochaHighlightStyle),
-];
+const catppuccinMocha = theme.extension;
 /**
  * Catppuccin Mocha merge revert styles configuration
  */
-const catppuccinMochaMergeStyles = {
-    backgroundColor: darkBackground,
-    borderColor: base02,
-    buttonColor: base04,
-    buttonHoverColor: base01,
-};
+const catppuccinMochaMergeStyles = theme.mergeStyles;
 
 export { applyMergeRevertStyles, catppuccinMocha, catppuccinMochaMergeStyles };