@fsegurai/codemirror-theme-basic-dark 6.2.5 → 6.3.0

package/dist/index.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
-var view = require('@codemirror/view');
 var language = require('@codemirror/language');
+var view = require('@codemirror/view');
 var highlight = require('@lezer/highlight');
 
 // Helper module for styling options
@@ -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,11 +19,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',
 };
@@ -106,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),
+    };
+}
+
 /**
  * Enhanced Basic Dark theme color palette
  * ------------------------------------------
@@ -118,391 +605,191 @@ base02 = '#5c88da', // Selection elements (more vibrant blue)
 base03 = '#b8b8b8', // Comments, line numbers (slightly lighter)
 base04 = '#ffffff', // Cursor (pure white for better visibility)
 base05 = '#e4e4e4', // Panels foreground
-base06 = '#909090', // Comments (slightly more visible gray)
+base06 = '#a2a2a2', // Comments (slightly more visible gray)
 base07 = '#000000', // Pure black for contrast elements
-base08 = '#e06c75', // Error, deleted (more vibrant red)
+base08 = '#f47e86', // Error, deleted (more vibrant red)
 base09 = '#f39c12', // Number, boolean (warmer orange)
 base0A = '#ffcb6b', // Keywords (warmer yellow)
 base0B = '#98c379', // Strings (more vibrant green)
 base0C = '#56b6c2', // Classes, types (cyan blue)
 base0D = '#61afef', // Functions, methods (bright blue)
-base0E = '#c678dd', // Operators, brackets (brighter purple)
-base0F = '#be5046', // Special elements (darker red)
+base0E = '#d284e9', // Operators, brackets (brighter purple)
+base0F = '#f48073', // Special elements (darker red)
 // UI-specific colors
-invalid = '#e06c75', // Error highlighting (consistent red)
 darkBackground = '#252529', // Panel background (slightly darker)
 selectionBackground = '#3a5991aa', // Selection background (semi-transparent blue)
 highlightBackground = '#3a3d4166', // Active line background (subtle blue-gray)
 tooltipBackground = '#2a2c31', // Tooltip background (darker than the editor)
-cursor = base04, activeBracketBg = '#3a599140', activeBracketBorder = base0E, 
+activeBracketBg = '#3a599140', 
 // Diff/merge specific colors
 addedBackground = '#1e462c50', // Dark green with transparency for insertions
 removedBackground = '#5c1e2340', // Dark red with transparency for deletions
 addedText = '#73c991', // Green for added text
 removedText = '#f07178'; // Red for removed text
-/**
- * Enhanced editor theme styles for Basic Dark
- */
-const basicDarkTheme = view.EditorView.theme({
-    // Base editor styles
-    '&': {
-        color: base01,
-        backgroundColor: base00,
-        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: base00,
-    },
-    // Selection
-    '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
-        backgroundColor: selectionBackground,
-        color: base01,
-    },
-    // Make sure selection appears above active line
-    '.cm-selectionLayer': {
-        zIndex: 100,
-    },
-    // Search functionality
-    '.cm-searchMatch': {
-        backgroundColor: '#4a74c480',
-        outline: `1px solid ${base02}`,
-        color: base01,
-        borderRadius: generalSearchField.borderRadius,
-        '& span': {
-            color: base01,
+const theme = defineTheme({
+    dark: true,
+    ui: {
+        background: base00,
+        foreground: base01,
+        border: 'none',
+        cursor: base04,
+        cursorWidth: '2px',
+        cursorShadow: 'none',
+        fatCursor: { background: `${base04}99`, border: 'none' },
+        selection: '#3a59916f',
+        selectionInactive: '#3a59916f',
+        selectionForeground: base01,
+        selectionOutline: 'none',
+        activeLine: '#3a3d415f',
+        activeLineBorder: { left: 'none', right: 'none' },
+        ghostText: base03,
+        ghostTextOpacity: '0.5',
+        specialChar: base08,
+        focusRing: `0 0 0 2px ${base00}, 0 0 0 4px ${base02}`,
+        outlineWidth: '1px',
+        searchMatch: {
+            background: '#4a74c480',
+            outline: base02,
+            foreground: base01,
+            shadow: 'none',
+            selectedBackground: `${base02}90`,
+            selectedForeground: base01,
+            selectedOutline: `1px solid ${base02}`,
+            selectedShadow: 'none',
         },
-    },
-    '.cm-searchMatch.cm-searchMatch-selected': {
-        backgroundColor: '#5c88da90',
-        color: base01,
-        padding: generalSearchField.padding,
-        '& span': {
-            color: base01,
+        selectionMatch: { background: '#4a74c440', outline: `${base02}50` },
+        matchingBracket: { background: activeBracketBg, outline: `${base0E}a0`, shadow: 'none' },
+        nonMatchingBracket: { background: `${base08}40`, outline: base08 },
+        panel: {
+            background: darkBackground,
+            foreground: base05,
+            border: '#3a3a3a',
+            borderWidth: '1px',
+            outline: 'none',
+            shadow: 'none',
+            buttonBackground: darkBackground,
+            buttonForeground: base05,
+            buttonBorder: 'none',
+            buttonHoverBackground: '#35373d',
+            buttonHoverForeground: base05,
+            buttonHoverBorder: 'none',
+            buttonHoverShadow: 'none',
+            inputBackground: base00,
+            inputBorder: '1px solid #3a3a3a',
         },
-    },
-    '.cm-search.cm-panel.cm-textfield': {
-        color: base05,
-        borderRadius: generalSearchField.borderRadius,
-        padding: generalSearchField.padding,
-    },
-    // Panels
-    '.cm-panels': {
-        backgroundColor: darkBackground,
-        color: base05,
-        borderRadius: '0 0 4px 4px',
-    },
-    '.cm-panels.cm-panels-top': {
-        borderBottom: '1px solid #3a3a3a',
-    },
-    '.cm-panels.cm-panels-bottom': {
-        borderTop: '1px solid #3a3a3a',
-    },
-    '.cm-panel button': {
-        backgroundColor: darkBackground,
-        color: base05,
-        border: generalPanel.border,
-        borderRadius: generalPanel.borderRadius,
-        padding: generalPanel.padding,
-    },
-    '.cm-panel button:hover': {
-        backgroundColor: '#35373d',
-    },
-    // Line highlighting
-    '.cm-activeLine': {
-        backgroundColor: highlightBackground,
-        borderRadius: generalLine.borderRadius,
-        zIndex: 1,
-    },
-    // Gutters
-    '.cm-gutters': {
-        backgroundColor: darkBackground,
-        color: base06,
-        border: generalGutter.border,
-        borderRight: '1px solid #35383d',
-        paddingRight: generalGutter.paddingRight,
-    },
-    '.cm-activeLineGutter': {
-        backgroundColor: highlightBackground,
-        color: base03,
-        fontWeight: generalGutter.fontWeight,
-    },
-    '.cm-lineNumbers': {
-        fontSize: generalGutter.fontSize,
-        lineHeight: generalGutter.lineHeight,
-    },
-    '.cm-foldGutter': {
-        fontSize: generalGutter.fontSize,
-        lineHeight: generalGutter.lineHeight,
-    },
-    '.cm-foldGutter .cm-gutterElement': {
-        color: base06,
-        cursor: 'pointer',
-    },
-    '.cm-foldGutter .cm-gutterElement:hover': {
-        color: base01,
-    },
-    // 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}40`,
-    },
-    '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}40`,
-    },
-    'del .cm-deletedText, del .cm-changedText': {
-        background: 'transparent !important',
-    },
-    // Tooltips and autocomplete
-    '.cm-tooltip': {
-        backgroundColor: tooltipBackground,
-        border: '1px solid #3a3a3a',
-        borderRadius: generalTooltip.borderRadius,
-        padding: generalTooltip.padding,
-        boxShadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
-    },
-    '.cm-tooltip-autocomplete': {
-        '& > ul': {
-            backgroundColor: tooltipBackground,
-            border: 'none',
-        },
-        '& > ul > li': {
-            padding: generalTooltip.padding,
-            lineHeight: generalTooltip.lineHeight,
+        gutter: {
+            background: darkBackground,
+            foreground: base06,
+            border: '#35383d',
+            activeBackground: highlightBackground,
+            activeForeground: base03,
+            activeFontWeight: '500',
+            activeBorder: 'none',
+            foldHover: base01,
         },
-        '& > ul > li[aria-selected]': {
-            backgroundColor: selectionBackground,
-            color: base01,
-            borderRadius: generalTooltip.borderRadiusSelected,
+        foldPlaceholder: { background: 'transparent', foreground: base02, border: `${base02}70`, borderStyle: 'dotted' },
+        tooltip: {
+            background: tooltipBackground,
+            foreground: base01,
+            border: '#3a3a3a',
+            shadow: '0 2px 8px rgba(0, 0, 0, 0.3)',
+            listBackground: tooltipBackground,
+            listBorder: 'none',
+            hoverBackground: 'transparent',
+            selectedBackground: selectionBackground,
+            selectedForeground: base01,
+            selectedBorder: 'none',
+            icon: base06,
+            detail: base06,
         },
-        '& > ul > li > span.cm-completionIcon': {
-            color: base06,
-            paddingRight: generalTooltip.paddingRight,
+        diff: {
+            insertedBackground: addedBackground,
+            insertedForeground: addedText,
+            insertedBorder: `1px solid ${addedText}40`,
+            deletedBackground: removedBackground,
+            deletedForeground: removedText,
+            deletedBorder: `1px solid ${removedText}40`,
         },
-        '& > ul > li > span.cm-completionDetail': {
-            color: base06,
-            fontStyle: 'italic',
+        diagnostic: {
+            error: base08,
+            warning: base0A,
+            info: base0D,
+            hint: base0D,
+            errorBackground: 'transparent',
+            warningBackground: 'transparent',
+            infoBackground: 'transparent',
+            borderWidth: '3px',
+            underlineWidth: '2px',
         },
-    },
-    '.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 ${invalid}`,
+        scrollbar: {
+            track: darkBackground,
+            trackBorder: 'none',
+            thumb: '#444448',
+            thumbBorder: `3px solid ${darkBackground}`,
+            thumbHover: '#55555a',
+            thumbHoverShadow: 'none',
         },
-        '&-warning': {
-            borderLeft: `3px solid ${base0A}`,
+        merge: {
+            backgroundColor: darkBackground,
+            borderColor: '#3a3a3a',
+            buttonColor: base05,
+            buttonHoverColor: '#35373d',
         },
-        '&-info': {
-            borderLeft: `3px solid ${base0D}`,
-        },
-    },
-    '.cm-lintPoint-error': {
-        borderBottom: `2px wavy ${invalid}`,
-    },
-    '.cm-lintPoint-warning': {
-        borderBottom: `2px wavy ${base0A}`,
-    },
-    // Matching brackets
-    '.cm-matchingBracket': {
-        backgroundColor: activeBracketBg,
-        outline: `1px solid ${activeBracketBorder}60`,
-        borderRadius: generalMatching.borderRadius,
-    },
-    '.cm-nonmatchingBracket': {
-        backgroundColor: '#e06c7540',
-        outline: `1px solid ${invalid}`,
-        borderRadius: generalMatching.borderRadius,
-    },
-    // Selection matches
-    '.cm-selectionMatch': {
-        backgroundColor: '#4a74c440',
-        outline: `1px solid ${base02}50`,
-        borderRadius: generalMatching.borderRadius,
-    },
-    // Fold placeholder
-    '.cm-foldPlaceholder': {
-        backgroundColor: 'transparent',
-        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 ${base00}, 0 0 0 3px ${base02}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: '#444448',
-        borderRadius: generalScroller.borderRadius,
-        border: `3px solid ${darkBackground}`,
-    },
-    '& .cm-scroller::-webkit-scrollbar-thumb:hover': {
-        backgroundColor: '#55555a',
-    },
-    // Ghost text
-    '.cm-ghostText': {
-        opacity: '0.5',
-        color: '#b8b8b8',
-    },
-}, { dark: true });
-/**
- * Enhanced syntax highlighting for Basic Dark theme
- */
-const basicDarkHighlightStyle = language.HighlightStyle.define([
-    // Keywords and control flow
-    { tag: highlight.tags.keyword, color: base0A, fontWeight: 'bold' },
-    { tag: highlight.tags.controlKeyword, color: base0A, fontWeight: 'bold' },
-    { tag: highlight.tags.moduleKeyword, color: base0A, fontWeight: 'bold' },
-    // Names and variables
-    { tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.macroName], color: base0D },
-    { tag: [highlight.tags.variableName], color: base0D },
-    { tag: [highlight.tags.propertyName], color: base0C, fontStyle: 'normal' },
-    // Classes and types
-    { tag: [highlight.tags.typeName], color: base0C },
-    { tag: [highlight.tags.className], color: base0C, fontStyle: 'italic' },
-    { tag: [highlight.tags.namespace], color: base0D, fontStyle: 'italic' },
-    // Operators and punctuation
-    { tag: [highlight.tags.operator, highlight.tags.operatorKeyword], color: base0E },
-    { tag: [highlight.tags.bracket], color: base0E },
-    { tag: [highlight.tags.brace], color: base0E },
-    { tag: [highlight.tags.punctuation], color: base0E },
-    // Functions and parameters
-    { tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.labelName], color: base0D },
-    { tag: [highlight.tags.definition(highlight.tags.variableName)], color: base0D },
-    // Constants and literals
-    { tag: highlight.tags.number, color: base09 },
-    { tag: highlight.tags.changed, color: base09 },
-    { tag: highlight.tags.annotation, color: invalid, fontStyle: 'italic' },
-    { tag: highlight.tags.modifier, color: base09, fontStyle: 'italic' },
-    { tag: highlight.tags.self, color: base09 },
-    { tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)], color: base09 },
-    { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: base09 },
-    // Strings and regex
-    { tag: [highlight.tags.processingInstruction, highlight.tags.inserted], color: base0B },
-    { tag: [highlight.tags.special(highlight.tags.string), highlight.tags.regexp], color: base0B },
-    { tag: highlight.tags.string, color: base0B },
-    // Punctuation and structure
-    { tag: highlight.tags.definition(highlight.tags.typeName), color: base0C, fontWeight: 'bold' },
-    // Comments and documentation
-    { tag: highlight.tags.meta, color: base08 },
-    { tag: highlight.tags.comment, fontStyle: 'italic', color: base06 },
-    { tag: highlight.tags.docComment, fontStyle: 'italic', color: base06 },
-    // HTML/XML elements
-    { tag: [highlight.tags.tagName], color: base0A },
-    { tag: [highlight.tags.attributeName], color: base0D },
-    // Markdown and text formatting
-    { tag: [highlight.tags.heading], fontWeight: 'bold', color: base0A },
-    {
-        tag: [highlight.tags.strong],
-        fontWeight: 'bold',
-        color: base09,
-        textShadow: `0 0 2px ${base07}`,
-    },
-    { tag: [highlight.tags.emphasis], fontStyle: 'italic', color: base0D },
-    // Links and URLs
-    {
-        tag: [highlight.tags.link],
-        color: base0F,
-        fontWeight: '500',
-        textDecoration: 'underline',
-        textUnderlinePosition: 'under',
-    },
-    {
-        tag: [highlight.tags.url],
-        color: base0B,
-        textDecoration: 'underline',
-        textUnderlineOffset: '2px',
-    },
-    // Special states
-    {
-        tag: [highlight.tags.invalid],
-        color: base01,
-        textDecoration: 'underline wavy',
-        borderBottom: `1px wavy ${invalid}`,
-    },
-    { tag: [highlight.tags.strikethrough], color: invalid, textDecoration: 'line-through' },
-    // Enhanced syntax highlighting
-    { tag: highlight.tags.constant(highlight.tags.name), color: base09 },
-    { tag: highlight.tags.deleted, color: invalid },
-    { tag: highlight.tags.squareBracket, color: base0E },
-    { tag: highlight.tags.angleBracket, color: base0E },
-    // Additional specific styles
-    { tag: highlight.tags.monospace, color: base01 },
-    { tag: [highlight.tags.contentSeparator], color: base0D },
-    { tag: highlight.tags.quote, color: base06 },
-]);
+    syntax: {
+        keyword: { color: base0A, fontWeight: 'bold' },
+        definitionKeyword: { color: base0A },
+        modifier: { color: base09, fontStyle: 'italic' },
+        operator: { color: base0E },
+        punctuation: { color: base0E },
+        name: { color: base0D },
+        function: { color: base0D },
+        self: { color: base09 },
+        property: { color: base0C, fontStyle: 'normal' },
+        type: { color: base0C },
+        typeDefinition: { color: base0C, fontWeight: 'bold' },
+        className: { color: base0C, fontStyle: 'italic' },
+        namespace: { color: base0D, fontStyle: 'italic' },
+        tag: { color: base0A },
+        attribute: { color: base0D },
+        content: { color: base01 },
+        string: { color: base0B },
+        number: { color: base09 },
+        constant: { color: base09 },
+        comment: { fontStyle: 'italic', color: base06 },
+        meta: { color: base08 },
+        processingInstruction: { color: base0B },
+        annotation: { color: base08, fontStyle: 'italic' },
+        heading: { fontWeight: 'bold', color: base0A },
+        headingLevel: { color: base0A },
+        list: { color: base0A },
+        quote: { color: base06 },
+        monospace: { color: base01 },
+        contentSeparator: { color: base0D },
+        link: {
+            color: base0F,
+            fontWeight: '500',
+            textDecoration: 'underline',
+            textUnderlinePosition: 'under',
+        },
+        url: { color: base0B, textDecoration: 'underline', textUnderlineOffset: '2px' },
+        emphasis: { fontStyle: 'italic', color: base0D },
+        strong: { fontWeight: 'bold', color: base09, textShadow: `0 0 2px ${base07}` },
+        strikethrough: { color: base08, textDecoration: 'line-through' },
+        invalid: { color: base01, textDecoration: 'underline wavy', borderBottom: `1px wavy ${base08}` },
+        inserted: { color: base0B },
+        deleted: { color: base08 },
+        changed: { color: base09 },
+    },
+});
 /**
  * Combined Basic Dark theme extension
  */
-const basicDark = [
-    basicDarkTheme,
-    language.syntaxHighlighting(basicDarkHighlightStyle),
-];
+const basicDark = theme.extension;
 /**
  * Basic Dark merge revert styles configuration
  */
-const basicDarkMergeStyles = {
-    backgroundColor: darkBackground,
-    borderColor: '#3a3a3a',
-    buttonColor: base05,
-    buttonHoverColor: '#35373d',
-};
+const basicDarkMergeStyles = theme.mergeStyles;
 
 exports.applyMergeRevertStyles = applyMergeRevertStyles;
 exports.basicDark = basicDark;