@fsegurai/codemirror-theme-cobalt2 6.0.6 → 6.1.0

package/dist/index.cjs

@@ -10,9 +10,6 @@ const generalContent = {
     fontFamily: 'JetBrains Mono, Consolas, monospace',
     lineHeight: '1.6',
 };
-const generalCursor = {
-    borderLeftWidth: '2px',
-};
 const generalDiff = {
     insertedTextDecoration: 'none',
     deletedTextDecoration: 'line-through',
@@ -22,7 +19,6 @@ 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 = {
@@ -105,6 +101,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', [highlight.tags.keyword]],
+    ['controlKeyword', [highlight.tags.controlKeyword]],
+    ['moduleKeyword', [highlight.tags.moduleKeyword]],
+    ['definitionKeyword', [highlight.tags.definitionKeyword]],
+    ['operatorKeyword', [highlight.tags.operatorKeyword]],
+    ['modifier', [highlight.tags.modifier]],
+    ['operator', [highlight.tags.operator]],
+    ['arithmeticOperator', [highlight.tags.arithmeticOperator]],
+    ['logicOperator', [highlight.tags.logicOperator]],
+    ['compareOperator', [highlight.tags.compareOperator]],
+    ['bitwiseOperator', [highlight.tags.bitwiseOperator]],
+    ['updateOperator', [highlight.tags.updateOperator]],
+    ['derefOperator', [highlight.tags.derefOperator]],
+    ['definitionOperator', [highlight.tags.definitionOperator]],
+    ['typeOperator', [highlight.tags.typeOperator]],
+    ['controlOperator', [highlight.tags.controlOperator]],
+    ['punctuation', [highlight.tags.punctuation, highlight.tags.function(highlight.tags.punctuation)]],
+    ['separator', [highlight.tags.separator]],
+    ['bracket', [highlight.tags.bracket]],
+    ['paren', [highlight.tags.paren]],
+    ['brace', [highlight.tags.brace, highlight.tags.special(highlight.tags.brace)]],
+    ['squareBracket', [highlight.tags.squareBracket]],
+    ['angleBracket', [highlight.tags.angleBracket]],
+    ['name', [highlight.tags.name, highlight.tags.special(highlight.tags.name)]],
+    ['character', [highlight.tags.character]],
+    ['macroName', [highlight.tags.macroName]],
+    ['variable', [highlight.tags.variableName, highlight.tags.standard(highlight.tags.variableName)]],
+    ['localVariable', [highlight.tags.local(highlight.tags.variableName)]],
+    ['variableDefinition', [highlight.tags.definition(highlight.tags.variableName)]],
+    ['nameDefinition', [highlight.tags.definition(highlight.tags.name)]],
+    ['function', [highlight.tags.function(highlight.tags.variableName)]],
+    ['functionDefinition', [highlight.tags.definition(highlight.tags.function(highlight.tags.variableName))]],
+    ['self', [highlight.tags.self]],
+    ['label', [highlight.tags.labelName]],
+    ['property', [highlight.tags.propertyName]],
+    ['propertyDefinition', [highlight.tags.definition(highlight.tags.propertyName)]],
+    ['method', [highlight.tags.function(highlight.tags.propertyName)]],
+    ['methodDefinition', [highlight.tags.definition(highlight.tags.function(highlight.tags.propertyName))]],
+    ['specialProperty', [highlight.tags.special(highlight.tags.propertyName), highlight.tags.definition(highlight.tags.special(highlight.tags.propertyName))]],
+    ['type', [highlight.tags.typeName, highlight.tags.standard(highlight.tags.typeName)]],
+    ['typeDefinition', [highlight.tags.definition(highlight.tags.typeName)]],
+    ['className', [highlight.tags.className, highlight.tags.definition(highlight.tags.className), highlight.tags.constant(highlight.tags.className)]],
+    ['namespace', [highlight.tags.namespace]],
+    ['tag', [highlight.tags.tagName]],
+    ['standardTag', [highlight.tags.standard(highlight.tags.tagName)]],
+    ['attribute', [highlight.tags.attributeName, highlight.tags.special(highlight.tags.attributeName)]],
+    ['attributeValue', [highlight.tags.attributeValue]],
+    ['literal', [highlight.tags.literal]],
+    ['string', [highlight.tags.string]],
+    ['docString', [highlight.tags.docString]],
+    ['regexp', [highlight.tags.regexp]],
+    ['specialString', [highlight.tags.special(highlight.tags.string), highlight.tags.special(highlight.tags.docString)]],
+    ['escape', [highlight.tags.escape]],
+    ['number', [highlight.tags.number, highlight.tags.integer, highlight.tags.float]],
+    ['unit', [highlight.tags.unit]],
+    ['atom', [highlight.tags.atom]],
+    ['bool', [highlight.tags.bool]],
+    ['null', [highlight.tags.null]],
+    ['constantName', [highlight.tags.constant(highlight.tags.name)]],
+    ['standardName', [highlight.tags.standard(highlight.tags.name)]],
+    ['color', [highlight.tags.color]],
+    ['specialVariable', [highlight.tags.special(highlight.tags.variableName)]],
+    ['comment', [highlight.tags.comment, highlight.tags.lineComment, highlight.tags.blockComment]],
+    ['docComment', [highlight.tags.docComment]],
+    ['meta', [highlight.tags.meta]],
+    ['documentMeta', [highlight.tags.documentMeta]],
+    ['processingInstruction', [highlight.tags.processingInstruction]],
+    ['annotation', [highlight.tags.annotation]],
+    ['content', [highlight.tags.content, highlight.tags.special(highlight.tags.content)]],
+    ['heading', [highlight.tags.heading]],
+    ['heading1', [highlight.tags.heading1]],
+    ['heading2', [highlight.tags.heading2]],
+    ['heading3', [highlight.tags.heading3]],
+    ['heading4', [highlight.tags.heading4]],
+    ['heading5', [highlight.tags.heading5]],
+    ['heading6', [highlight.tags.heading6]],
+    ['list', [highlight.tags.list]],
+    ['quote', [highlight.tags.quote]],
+    ['monospace', [highlight.tags.monospace]],
+    ['contentSeparator', [highlight.tags.contentSeparator]],
+    ['link', [highlight.tags.link]],
+    ['url', [highlight.tags.url]],
+    ['emphasis', [highlight.tags.emphasis]],
+    ['strong', [highlight.tags.strong]],
+    ['strikethrough', [highlight.tags.strikethrough]],
+    ['invalid', [highlight.tags.invalid]],
+    ['inserted', [highlight.tags.inserted]],
+    ['deleted', [highlight.tags.deleted]],
+    ['changed', [highlight.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 = view.EditorView.theme(emittedRules(uiTemplate(definition.ui)), { dark: definition.dark });
+    const highlightStyle = language.HighlightStyle.define(highlightRules(definition));
+    return {
+        extension: [theme, language.syntaxHighlighting(highlightStyle)],
+        theme,
+        highlightStyle,
+        mergeStyles: Object.assign({}, definition.ui.merge),
+    };
+}
+
 /**
  * Cobalt2 theme color palette
  * ---------------------------------------------------------------------
@@ -114,10 +602,10 @@ function applyMergeRevertStyles(styles) {
 const background = '#193549', // Main editor background
 foreground = '#fff', // Main text color (exact from original)
 cursor = '#ffc600', // Cursor color (bright yellow)
-selection = '#0050A4', // Selection background
+selection = '#09478e', // Selection background
 selectionInactive = '#003b8b', // Inactive selection
 selectionHighlight = '#0050A480', // Selection highlights (with transparency)
-lineHighlight = '#99eeff33', // The current line highlights
+lineHighlight = '#99eeff0d', // The current line highlights
 // UI backgrounds (exact from original)
 darkBackground = '#122738', // Sidebar, panels, gutter
 panelBackground = '#15232d', // Panel background
@@ -125,24 +613,20 @@ gutterBackground = '#12273866', // Gutter background with transparency
 // Searches and finds colors (exact from original)
 findMatchCurrent = '#FF720066', // Currently found item
 findMatchOther = '#CAD40F66', // Other found items
-hoverHighlight = '#ffc60033', // Hover highlight
-// Word highlights (exact from original)
-wordHighlight = '#ffffff21', // Word highlight background
 // Accent colors from tokenColors (exact from original)
-blue = '#0088ff', // Comments, links
+blue = '#83bafe', // Comments, links
 cyan = '#80fcff', // Special keywords, module exports
 lightBlue = '#9effff', // Meta, variables, properties
-yellow = '#ffc600', // Entities, storage, functions
-orange = '#ff9d00', // Keywords, support functions
-pink = '#ff628c', // Constants, deleted text
+orange = '#fea22f', // Keywords, support functions
+pink = '#fb9caf', // Constants, deleted text
 hotPink = '#fb94ff', // Language variables, storage.type.function
-lightPink = '#FF68B8', // Types, interfaces (semantic)
+lightPink = '#fb99c8', // Types, interfaces (semantic)
 green = '#3ad900', // Template strings
 lightGreen = '#a5ff90', // Regular strings, markup inserted
-red = '#f44542', // Invalid, errors
+red = '#ff9d93', // Invalid, errors
 errorRed = '#A22929', // Error foreground
 // Additional colors from the original palette
-gray = '#aaa', // Comments, secondary text
+gray = '#b7b7b7', // Comments, secondary text
 lightGray = '#e1efff', // Punctuation, variables
 darkGray = '#0d3a58', // Borders, inactive elements
 parameterYellow = '#ffee80', // Parameters, template expressions
@@ -150,412 +634,180 @@ stringQuotes = '#92fc79', // String quotes (special)
 supportTeal = '#80ffbb'; // Support classes, TypeScript types
 // Diff/merge specific colors (exact from original)
 const addedBackground = '#3ad90033', // Light green with transparency for insertions
-removedBackground = '#ee3a4333', // Light red with transparency for deletions
-addedText = lightGreen, // Green for added text
-removedText = pink; // Pink for removed text
-/**
- * Enhanced editor theme styles for Cobalt2
- */
-const cobalt2Theme = view.EditorView.theme({
-    // Base editor styles
-    '&': {
-        color: foreground,
-        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: selection,
-        color: foreground,
-    },
-    // Make sure selection appears above active line
-    '.cm-selectionLayer': {
-        zIndex: 100,
-    },
-    '.cm-activeLine .cm-selectionBackground': {
-        backgroundColor: `${selection}DD`,
-        border: `1px solid ${cyan}40`,
-        borderRadius: '2px',
-    },
-    '&.cm-focused .cm-activeLine .cm-selectionBackground': {
-        backgroundColor: `${selection}FF`,
-        border: `1px solid ${cyan}60`,
-        boxShadow: `0 0 3px ${cyan}30`,
-    },
-    '&:not(.cm-focused) .cm-selectionBackground': {
-        backgroundColor: selectionInactive,
-    },
-    '&:not(.cm-focused) .cm-activeLine .cm-selectionBackground': {
-        backgroundColor: `${selectionInactive}CC`,
-        border: `1px solid ${darkGray}80`,
-    },
-    // Search functionality
-    '.cm-searchMatch': {
-        backgroundColor: findMatchCurrent,
-        outline: `1px solid ${orange}`,
-        color: foreground,
-        borderRadius: generalSearchField.borderRadius,
-    },
-    '.cm-searchMatch.cm-searchMatch-selected': {
-        backgroundColor: findMatchOther,
-        color: foreground,
-    },
-    '.cm-search.cm-panel.cm-textfield': {
-        color: yellow,
-        backgroundColor: background,
-        border: `1px solid ${darkGray}`,
-        borderRadius: generalSearchField.borderRadius,
-        padding: generalSearchField.padding,
-    },
-    // Panels
-    '.cm-panels': {
-        backgroundColor: darkBackground,
-        color: gray,
-        borderRadius: '4px',
-    },
-    '.cm-panels.cm-panels-top': {
-        borderBottom: `1px solid ${yellow}`,
-    },
-    '.cm-panels.cm-panels-bottom': {
-        borderTop: `1px solid ${yellow}`,
-    },
-    '.cm-panel button': {
-        backgroundColor: blue,
-        color: foreground,
-        border: `1px solid ${darkGray}`,
-        borderRadius: generalPanel.borderRadius,
-        padding: generalPanel.padding,
-    },
-    '.cm-panel button:hover': {
-        backgroundColor: orange,
-        color: foreground,
-    },
-    // Line highlighting
-    '.cm-activeLine': {
-        backgroundColor: lineHighlight,
-        borderRadius: generalLine.borderRadius,
-    },
-    // Gutters
-    '.cm-gutters': {
-        backgroundColor: gutterBackground,
-        color: gray,
-        border: generalGutter.border,
-        borderRight: `1px solid ${darkGray}`,
-        paddingRight: generalGutter.paddingRight,
-    },
-    '.cm-activeLineGutter': {
-        backgroundColor: 'transparent',
-        color: foreground,
-        fontWeight: generalGutter.fontWeight,
-    },
-    '.cm-lineNumbers': {
-        fontSize: generalGutter.fontSize,
-        lineHeight: generalGutter.lineHeight,
-        color: gray,
-    },
-    '.cm-foldGutter': {
-        fontSize: generalGutter.fontSize,
-        lineHeight: generalGutter.lineHeight,
-    },
-    '.cm-foldGutter .cm-gutterElement': {
-        color: gray,
-        cursor: 'pointer',
-    },
-    '.cm-foldGutter .cm-gutterElement:hover': {
-        color: yellow,
-    },
-    // Diff/Merge View Styles
-    // Inserted/Added Content
-    '.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}30`,
-    },
-    'ins.cm-insertedLine .cm-changedText': {
-        background: 'transparent !important',
-    },
-    // Deleted/Removed Content
-    '.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}30`,
-    },
-    'del .cm-deletedText, del .cm-changedText': {
-        background: 'transparent !important',
-    },
-    // Tooltips and autocomplete
-    '.cm-tooltip': {
-        backgroundColor: panelBackground,
-        border: `1px solid ${darkGray}`,
-        borderRadius: generalTooltip.borderRadius,
-        padding: generalTooltip.padding,
-        boxShadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
-        color: gray, // Tooltip text color from the original
-    },
-    '.cm-tooltip-autocomplete': {
-        '& > ul': {
-            backgroundColor: panelBackground,
-            border: 'none',
+removedBackground = '#ee3a4333'; // Light red with transparency for deletions
+const theme = defineTheme({
+    dark: true,
+    ui: {
+        background: background,
+        foreground: foreground,
+        border: 'none',
+        cursor: cursor,
+        cursorWidth: '2px',
+        cursorShadow: 'none',
+        fatCursor: { background: `${cursor}99`, border: 'none' },
+        selection: selection,
+        selectionInactive: selectionInactive,
+        selectionForeground: foreground,
+        selectionOutline: 'none',
+        activeLine: lineHighlight,
+        activeLineBorder: { left: 'none', right: 'none' },
+        ghostText: gray,
+        ghostTextOpacity: '0.5',
+        specialChar: '#ffffff52',
+        searchMatch: {
+            background: findMatchCurrent,
+            outline: orange,
+            foreground: foreground,
+            shadow: 'none',
+            selectedBackground: findMatchOther,
+            selectedForeground: foreground,
+            selectedOutline: `1px solid ${orange}`,
+            selectedShadow: 'none',
         },
-        '& > ul > li': {
-            padding: generalTooltip.padding,
-            lineHeight: generalTooltip.lineHeight,
-            color: gray,
+        selectionMatch: { background: selectionHighlight, outline: `${cyan}40` },
+        matchingBracket: { background: darkGray, outline: `${cursor}88`, shadow: 'none' },
+        nonMatchingBracket: { background: `${errorRed}20`, outline: errorRed },
+        panel: {
+            background: darkBackground,
+            foreground: gray,
+            border: cursor,
+            borderWidth: '1px',
+            outline: 'none',
+            shadow: 'none',
+            buttonBackground: blue,
+            buttonForeground: foreground,
+            buttonBorder: `1px solid ${darkGray}`,
+            buttonHoverBackground: orange,
+            buttonHoverForeground: foreground,
+            buttonHoverBorder: `1px solid ${darkGray}`,
+            buttonHoverShadow: 'none',
+            inputBackground: background,
+            inputBorder: `1px solid ${darkGray}`,
         },
-        '& > ul > li[aria-selected]': {
-            backgroundColor: background,
-            color: yellow,
-            borderRadius: generalTooltip.borderRadiusSelected,
+        gutter: {
+            background: gutterBackground,
+            foreground: gray,
+            border: darkGray,
+            activeBackground: 'transparent',
+            activeForeground: foreground,
+            activeFontWeight: '500',
+            activeBorder: 'none',
+            foldHover: cursor,
         },
-        '& > ul > li > span.cm-completionIcon': {
-            color: blue,
-            paddingRight: generalTooltip.paddingRight,
+        foldPlaceholder: { background: 'transparent', foreground: gray, border: `${blue}50`, borderStyle: 'dotted' },
+        tooltip: {
+            background: panelBackground,
+            foreground: gray,
+            border: darkGray,
+            shadow: '0 4px 12px rgba(0, 0, 0, 0.3)',
+            listBackground: panelBackground,
+            listBorder: 'none',
+            hoverBackground: 'transparent',
+            selectedBackground: background,
+            selectedForeground: cursor,
+            selectedBorder: 'none',
+            icon: blue,
+            detail: gray,
         },
-        '& > ul > li > span.cm-completionDetail': {
-            color: gray,
-            fontStyle: 'italic',
+        diff: {
+            insertedBackground: addedBackground,
+            insertedForeground: lightGreen,
+            insertedBorder: `1px solid ${lightGreen}30`,
+            deletedBackground: removedBackground,
+            deletedForeground: pink,
+            deletedBorder: `1px solid ${pink}30`,
         },
-    },
-    // Diagnostics styling
-    '.cm-diagnostic': {
-        '&-error': {
-            borderLeft: `3px solid ${errorRed}`,
+        diagnostic: {
+            error: errorRed,
+            warning: cursor,
+            info: blue,
+            hint: blue,
+            errorBackground: 'transparent',
+            warningBackground: 'transparent',
+            infoBackground: 'transparent',
+            borderWidth: '3px',
+            underlineWidth: '2px',
         },
-        '&-warning': {
-            borderLeft: `3px solid ${yellow}`,
+        scrollbar: {
+            track: darkBackground,
+            trackBorder: 'none',
+            thumb: '#406179cc',
+            thumbBorder: `3px solid ${darkBackground}`,
+            thumbHover: '#437da3cc',
+            thumbHoverShadow: 'none',
         },
-        '&-info': {
-            borderLeft: `3px solid ${blue}`,
+        focusRing: `0 0 0 2px ${background}, 0 0 0 4px ${cyan}`,
+        outlineWidth: '1px',
+        merge: {
+            backgroundColor: panelBackground,
+            borderColor: darkGray,
+            buttonColor: gray,
+            buttonHoverColor: darkGray,
         },
     },
-    '.cm-lintPoint-error': {
-        borderBottom: `2px wavy ${errorRed}`,
-    },
-    '.cm-lintPoint-warning': {
-        borderBottom: `2px wavy ${yellow}`,
-    },
-    // Matching brackets
-    '.cm-matchingBracket': {
-        backgroundColor: darkGray,
-        outline: `1px solid ${cursor}80`,
-        borderRadius: generalMatching.borderRadius,
-    },
-    '.cm-nonmatchingBracket': {
-        backgroundColor: `${errorRed}20`,
-        outline: `1px solid ${errorRed}`,
-        borderRadius: generalMatching.borderRadius,
-    },
-    // Selection matches
-    '.cm-selectionMatch': {
-        backgroundColor: selectionHighlight,
-        borderRadius: generalMatching.borderRadius,
-    },
-    '.cm-hoverHighlight': {
-        backgroundColor: hoverHighlight,
-    },
-    '.cm-wordHighlight': {
-        backgroundColor: wordHighlight,
-        borderRadius: generalMatching.borderRadius,
-    },
-    // Fold placeholder
-    '.cm-foldPlaceholder': {
-        backgroundColor: 'transparent',
-        color: gray,
-        border: `1px dotted ${blue}50`,
-        borderRadius: generalPlaceholder.borderRadius,
-        padding: generalPlaceholder.padding,
-        margin: generalPlaceholder.margin,
-    },
-    // Focus outline
-    '&.cm-focused': {
-        outline: 'none',
-    },
-    // Scrollbars - exact from original
-    '& .cm-scroller::-webkit-scrollbar': {
-        width: generalScroller.width,
-        height: generalScroller.height,
-    },
-    '& .cm-scroller::-webkit-scrollbar-track': {
-        background: darkBackground,
-    },
-    '& .cm-scroller::-webkit-scrollbar-thumb': {
-        backgroundColor: '#406179cc',
-        borderRadius: generalScroller.borderRadius,
-        border: `3px solid ${darkBackground}`,
-    },
-    '& .cm-scroller::-webkit-scrollbar-thumb:hover': {
-        backgroundColor: '#437da3cc',
-    },
-    // Ghost text
-    '.cm-ghostText': {
-        opacity: '0.5',
-        color: gray,
-    },
-    // Whitespace characters
-    '.cm-specialChar': {
-        color: '#ffffff52',
-    },
-    // Indent guides
-    '.cm-indentGuide': {
-        borderLeft: '1px solid #3B5364',
-    },
-}, { dark: true });
-/**
- * Enhanced syntax highlighting for the Cobalt2 theme
- */
-const cobalt2HighlightStyle = language.HighlightStyle.define([
-    // Comments
-    { tag: highlight.tags.comment, color: blue, fontStyle: 'italic' },
-    { tag: highlight.tags.docComment, color: blue, fontStyle: 'italic' },
-    { tag: highlight.tags.lineComment, color: blue, fontStyle: 'italic' },
-    { tag: highlight.tags.blockComment, color: blue, fontStyle: 'italic' },
-    // Keywords and control flow
-    { tag: highlight.tags.keyword, color: orange },
-    { tag: highlight.tags.controlKeyword, color: orange },
-    { tag: highlight.tags.operatorKeyword, color: orange },
-    { tag: highlight.tags.moduleKeyword, color: cyan },
-    { tag: highlight.tags.definitionKeyword, color: hotPink },
-    // Special language constructs
-    { tag: highlight.tags.self, color: hotPink },
-    { tag: highlight.tags.special(highlight.tags.variableName), color: cyan },
-    { tag: highlight.tags.special(highlight.tags.keyword), color: cyan },
-    { tag: highlight.tags.special(highlight.tags.propertyName), color: cyan },
-    // Variables - Enhanced for better distinction
-    { tag: highlight.tags.variableName, color: foreground },
-    { tag: highlight.tags.definition(highlight.tags.variableName), color: foreground },
-    { tag: highlight.tags.local(highlight.tags.variableName), color: foreground },
-    // Classes and types
-    { tag: highlight.tags.typeName, color: lightPink, fontStyle: 'italic' },
-    { tag: highlight.tags.className, color: lightPink, fontStyle: 'italic' },
-    { tag: highlight.tags.namespace, color: lightPink, fontStyle: 'italic' },
-    { tag: highlight.tags.macroName, color: lightPink, fontStyle: 'italic' },
-    // Functions - specific function types first
-    { tag: highlight.tags.function(highlight.tags.variableName), color: yellow },
-    { tag: highlight.tags.function(highlight.tags.definition(highlight.tags.variableName)), color: yellow },
-    { tag: highlight.tags.function(highlight.tags.propertyName), color: yellow },
-    // Properties
-    { tag: highlight.tags.propertyName, color: lightBlue },
-    { tag: highlight.tags.definition(highlight.tags.propertyName), color: lightBlue },
-    { tag: highlight.tags.standard(highlight.tags.propertyName), color: supportTeal },
-    // Constants
-    { tag: highlight.tags.constant(highlight.tags.name), color: pink },
-    { tag: highlight.tags.standard(highlight.tags.name), color: pink },
-    { tag: highlight.tags.number, color: pink },
-    { tag: highlight.tags.integer, color: pink },
-    { tag: highlight.tags.float, color: pink },
-    { tag: highlight.tags.bool, color: pink },
-    { tag: highlight.tags.atom, color: pink },
-    { tag: highlight.tags.null, color: pink },
-    // Strings - specific string types first
-    { tag: highlight.tags.special(highlight.tags.string), color: green },
-    { tag: highlight.tags.string, color: lightGreen },
-    { tag: highlight.tags.regexp, color: lightGreen },
-    // String quotes
-    { tag: highlight.tags.quote, color: stringQuotes },
-    // Parameters
-    { tag: highlight.tags.definition(highlight.tags.function(highlight.tags.variableName)), color: parameterYellow },
-    // HTML/XML elements
-    { tag: highlight.tags.tagName, color: lightBlue },
-    { tag: highlight.tags.standard(highlight.tags.tagName), color: supportTeal },
-    { tag: highlight.tags.attributeName, color: yellow, fontStyle: 'italic' },
-    { tag: highlight.tags.attributeValue, color: lightGreen },
-    // Operators and punctuation
-    { tag: highlight.tags.operator, color: lightGray },
-    { tag: highlight.tags.derefOperator, color: lightGray },
-    { tag: highlight.tags.arithmeticOperator, color: lightGray },
-    { tag: highlight.tags.logicOperator, color: lightGray },
-    { tag: highlight.tags.bitwiseOperator, color: lightGray },
-    { tag: highlight.tags.compareOperator, color: lightGray },
-    { tag: highlight.tags.updateOperator, color: lightGray },
-    { tag: highlight.tags.punctuation, color: lightGray },
-    { tag: highlight.tags.bracket, color: lightGray },
-    { tag: highlight.tags.brace, color: lightGray },
-    { tag: highlight.tags.squareBracket, color: lightGray },
-    { tag: highlight.tags.paren, color: yellow },
-    { tag: highlight.tags.angleBracket, color: lightGray },
-    // Storage and function keywords
-    { tag: highlight.tags.modifier, color: yellow, fontStyle: 'italic' },
-    // Meta and annotations
-    { tag: highlight.tags.meta, color: lightBlue },
-    { tag: highlight.tags.annotation, color: yellow, fontStyle: 'italic' },
-    { tag: highlight.tags.processingInstruction, color: yellow },
-    // Markdown elements
-    { tag: highlight.tags.heading, color: yellow, fontWeight: 'bold' },
-    { tag: highlight.tags.heading1, color: yellow, fontWeight: 'bold' },
-    { tag: highlight.tags.heading2, color: yellow, fontWeight: 'bold' },
-    { tag: highlight.tags.heading3, color: yellow, fontWeight: 'bold' },
-    { tag: highlight.tags.heading4, color: yellow, fontWeight: 'bold' },
-    { tag: highlight.tags.heading5, color: yellow, fontWeight: 'bold' },
-    { tag: highlight.tags.heading6, color: yellow, fontWeight: 'bold' },
-    { tag: highlight.tags.contentSeparator, color: yellow },
-    { tag: highlight.tags.strong, color: lightBlue, fontWeight: 'bold' },
-    { tag: highlight.tags.emphasis, color: lightBlue, fontStyle: 'italic' },
-    { tag: highlight.tags.list, color: yellow },
-    // Code blocks and inline code - Enhanced styling
-    { tag: highlight.tags.monospace, color: lightBlue },
-    { tag: highlight.tags.special(highlight.tags.monospace), color: green },
-    { tag: highlight.tags.strikethrough, color: gray, textDecoration: 'line-through' },
-    // Links and URLs
-    { tag: highlight.tags.link, color: blue },
-    { tag: highlight.tags.url, color: lightBlue },
-    // Special states
-    { tag: highlight.tags.invalid, color: red },
-    { tag: highlight.tags.deleted, color: pink },
-    { tag: highlight.tags.inserted, color: lightGreen },
-    { tag: highlight.tags.changed, color: yellow },
-    // Language-specific: CSS
-    { tag: highlight.tags.unit, color: parameterYellow }, // CSS units
-    // Entity names
-    { tag: highlight.tags.labelName, color: yellow },
-    { tag: highlight.tags.escape, color: yellow },
-]);
+    syntax: {
+        keyword: { color: orange },
+        moduleKeyword: { color: cyan },
+        definitionKeyword: { color: hotPink },
+        operatorKeyword: { color: orange },
+        modifier: { color: cursor, fontStyle: 'italic' },
+        character: { color: lightGreen },
+        macroName: { color: lightPink, fontStyle: 'italic' },
+        paren: { color: cursor },
+        operator: { color: lightGray },
+        punctuation: { color: lightGray },
+        name: {},
+        variable: { color: foreground },
+        nameDefinition: {},
+        functionDefinition: { color: parameterYellow },
+        function: { color: cursor },
+        self: { color: hotPink },
+        label: { color: cursor },
+        specialProperty: { color: cyan },
+        method: { color: cursor },
+        standardTag: { color: supportTeal },
+        methodDefinition: { color: lightBlue },
+        property: { color: lightBlue },
+        type: { color: lightPink, fontStyle: 'italic' },
+        tag: { color: lightBlue },
+        attribute: { color: cursor, fontStyle: 'italic' },
+        content: { color: foreground },
+        string: { color: lightGreen },
+        escape: { color: cursor },
+        number: { color: pink },
+        unit: { color: parameterYellow },
+        color: {},
+        specialVariable: { color: cyan },
+        constant: { color: pink },
+        comment: { color: blue, fontStyle: 'italic' },
+        meta: { color: lightBlue },
+        processingInstruction: { color: cursor },
+        specialString: { color: green },
+        annotation: { color: cursor, fontStyle: 'italic' },
+        heading: { color: cursor, fontWeight: 'bold' },
+        list: { color: cursor },
+        quote: { color: stringQuotes },
+        monospace: { color: lightBlue },
+        contentSeparator: { color: cursor },
+        link: { color: blue },
+        url: { color: lightBlue },
+        emphasis: { color: lightBlue, fontStyle: 'italic' },
+        strong: { color: lightBlue, fontWeight: 'bold' },
+        strikethrough: { color: gray, textDecoration: 'line-through' },
+        invalid: { color: red },
+        inserted: { color: lightGreen },
+        deleted: { color: pink },
+        changed: { color: cursor },
+    },
+});
 /**
  * Combined Cobalt2 theme extension
  */
-const cobalt2 = [cobalt2Theme, language.syntaxHighlighting(cobalt2HighlightStyle)];
+const cobalt2 = theme.extension;
 /**
  * Cobalt2 merge revert styles configuration
  */
-const cobalt2MergeStyles = {
-    backgroundColor: panelBackground,
-    borderColor: darkGray,
-    buttonColor: gray,
-    buttonHoverColor: darkGray,
-};
+const cobalt2MergeStyles = theme.mergeStyles;
 
 exports.applyMergeRevertStyles = applyMergeRevertStyles;
 exports.cobalt2 = cobalt2;