@fsegurai/codemirror-theme-high-contrast-light 6.0.4 → 6.1.0

package/dist/index.cjs

@@ -101,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),
+    };
+}
+
 /**
  * High Contrast Light theme color definitions
  * -------------------------------------------
@@ -109,411 +601,192 @@ function applyMergeRevertStyles(styles) {
 // Base colors - Pure white and black for maximum contrast
 const base00 = '#ffffff', // Background - pure white
 base01 = '#e0e0e0', // Selection background
-base02 = '#707070', // Comments - medium grey
+base02 = '#4f4f4f', // Comments - medium grey
 base03 = '#505050', // Dark grey
 base04 = '#000000', // Foreground - pure black
 // High contrast accent colors for a light background
-darkBlue = '#0000ff', darkCyan = '#008080', darkGreen = '#008000', darkRed = '#c80000', darkMagenta = '#800080', darkOrange = '#d04800', darkPurple = '#6600cc', darkBrown = '#7c3400';
+darkBlue = '#0000ff', darkCyan = '#095959', darkGreen = '#0e5d0c', darkRed = '#a40000', darkMagenta = '#800080', darkOrange = '#8e3003', darkPurple = '#6600cc', darkBrown = '#7c3400';
 // UI specific colors
-const invalid = darkRed, lightBackground = base00, background = base00, tooltipBackground = '#f0f0f0', selection = '#0078d4', selectionMatch = '#0078d480', cursor = darkBlue, activeBracketBg = '#e0e0e0', activeBracketBorder = darkCyan, diagnosticWarning = darkOrange, linkColor = darkBlue, visitedLinkColor = darkPurple;
+const tooltipBackground = '#f0f0f0', selection = '#0078d4', selectionMatch = '#0078d480';
 // Diff/merge specific colors
-const addedBackground = '#00800040', removedBackground = '#c8000040', addedText = darkGreen, removedText = darkRed;
-/**
- * Enhanced editor theme styles for High Contrast Light
- */
-const highContrastLightTheme = view.EditorView.theme({
-    // Base editor styles
-    '&': {
-        color: base04,
-        backgroundColor: background,
-        fontSize: generalContent.fontSize,
-        fontFamily: generalContent.fontFamily,
+const addedBackground = '#00800040', removedBackground = '#c8000040';
+const theme = defineTheme({
+    dark: false,
+    ui: {
+        background: base00,
+        foreground: base04,
         border: `2px solid ${base04}`,
-    },
-    // Content and cursor
-    '.cm-content': {
-        caretColor: cursor,
-        lineHeight: generalContent.lineHeight,
-    },
-    '.cm-cursor, .cm-dropCursor': {
-        borderLeftColor: cursor,
-        borderLeftWidth: '3px',
-    },
-    '.cm-fat-cursor': {
-        backgroundColor: cursor,
-        color: background,
-        border: `2px solid ${base04}`,
-    },
-    // Selection
-    '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection': {
-        backgroundColor: '#4d90fe',
-        outline: `2px solid ${darkBlue}`,
-    },
-    // Make sure selection appears above active line
-    '.cm-selectionLayer': {
-        zIndex: 100,
-    },
-    // Search functionality
-    '.cm-searchMatch': {
-        backgroundColor: '#ffff00',
-        outline: `2px solid ${darkOrange}`,
-        color: base04,
-        borderRadius: generalSearchField.borderRadius,
-        '& span': {
-            color: base04,
+        cursor: darkBlue,
+        cursorWidth: '3px',
+        cursorShadow: 'none',
+        fatCursor: { background: darkBlue, border: `2px solid ${base04}` },
+        selection: '#9fc3fe',
+        selectionInactive: '#9fc3fe',
+        selectionForeground: null,
+        selectionOutline: `2px solid ${darkBlue}`,
+        activeLine: '#ffffccba',
+        activeLineBorder: { left: `3px solid ${darkBlue}`, right: `1px solid ${base02}` },
+        ghostText: base02,
+        ghostTextOpacity: '0.7',
+        specialChar: darkRed,
+        searchMatch: {
+            background: '#ffff00',
+            outline: darkOrange,
+            foreground: base04,
+            shadow: 'none',
+            selectedBackground: darkOrange,
+            selectedForeground: base00,
+            selectedOutline: `2px solid ${base04}`,
+            selectedShadow: 'none',
         },
-    },
-    '.cm-searchMatch.cm-searchMatch-selected': {
-        backgroundColor: darkOrange,
-        color: base00,
-        padding: generalSearchField.padding,
-        outline: `2px solid ${base04}`,
-        '& span': {
-            color: base00,
+        selectionMatch: { background: selectionMatch, outline: `${darkBlue}50` },
+        matchingBracket: { background: base01, outline: darkCyan, shadow: 'none' },
+        nonMatchingBracket: { background: '#ff000030', outline: darkRed },
+        panel: {
+            background: base00,
+            foreground: base04,
+            border: base04,
+            borderWidth: '2px',
+            outline: `2px solid ${base04}`,
+            shadow: 'none',
+            buttonBackground: tooltipBackground,
+            buttonForeground: darkBlue,
+            buttonBorder: `2px solid ${base04}`,
+            buttonHoverBackground: base01,
+            buttonHoverForeground: darkBlue,
+            buttonHoverBorder: `2px solid ${darkBlue}`,
+            buttonHoverShadow: 'none',
+            inputBackground: base00,
+            inputBorder: `2px solid ${base04}`,
         },
-    },
-    '.cm-search.cm-panel.cm-textfield': {
-        color: base04,
-        backgroundColor: base00,
-        border: `2px solid ${base04}`,
-        borderRadius: generalSearchField.borderRadius,
-        padding: generalSearchField.padding,
-    },
-    // Panels
-    '.cm-panels': {
-        backgroundColor: lightBackground,
-        color: base04,
-        borderRadius: '4px',
-        border: `2px solid ${base04}`,
-    },
-    '.cm-panels.cm-panels-top': {
-        borderBottom: `2px solid ${base04}`,
-    },
-    '.cm-panels.cm-panels-bottom': {
-        borderTop: `2px solid ${base04}`,
-    },
-    '.cm-panel button': {
-        backgroundColor: tooltipBackground,
-        color: darkBlue,
-        border: `2px solid ${base04}`,
-        borderRadius: generalPanel.borderRadius,
-        padding: generalPanel.padding,
-    },
-    '.cm-panel button:hover': {
-        backgroundColor: base01,
-        border: `2px solid ${darkBlue}`,
-    },
-    // Line highlighting
-    '.cm-activeLine': {
-        backgroundColor: '#ffffccba',
-        borderRadius: generalLine.borderRadius,
-        borderLeft: `3px solid ${darkBlue}`,
-        borderRight: `1px solid ${base02}`,
-        zIndex: 1,
-    },
-    // Gutters
-    '.cm-gutters': {
-        backgroundColor: lightBackground,
-        color: base03,
-        border: generalGutter.border,
-        borderRight: `2px solid ${base04}`,
-        paddingRight: generalGutter.paddingRight,
-    },
-    '.cm-activeLineGutter': {
-        backgroundColor: base01,
-        color: darkBlue,
-        fontWeight: 'bold',
-        border: `1px solid ${base02}`,
-    },
-    '.cm-lineNumbers': {
-        fontSize: generalGutter.fontSize,
-        lineHeight: generalGutter.lineHeight,
-    },
-    '.cm-foldGutter': {
-        fontSize: generalGutter.fontSize,
-        lineHeight: generalGutter.lineHeight,
-    },
-    '.cm-foldGutter .cm-gutterElement': {
-        color: base03,
-        cursor: 'pointer',
-    },
-    '.cm-foldGutter .cm-gutterElement:hover': {
-        color: darkCyan,
-    },
-    // Diff/Merge View Styles
-    '.cm-insertedLine': {
-        textDecoration: generalDiff.insertedTextDecoration,
-        backgroundColor: addedBackground,
-        color: addedText,
-        padding: generalDiff.insertedLinePadding,
-        borderRadius: generalDiff.borderRadius,
-        border: `2px solid ${addedText}`,
-    },
-    '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: `2px solid ${addedText}`,
-    },
-    'ins.cm-insertedLine .cm-changedText': {
-        background: 'transparent !important',
-    },
-    '.cm-deletedLine': {
-        textDecoration: generalDiff.deletedTextDecoration,
-        backgroundColor: removedBackground,
-        color: removedText,
-        padding: generalDiff.insertedLinePadding,
-        borderRadius: generalDiff.borderRadius,
-        border: `2px solid ${removedText}`,
-    },
-    'del.cm-deletedLine, del, del:not(:has(.cm-deletedText))': {
-        textDecoration: generalDiff.deletedTextDecoration,
-        backgroundColor: `${removedBackground} !important`,
-        color: removedText,
-        padding: generalDiff.insertedLinePadding,
-        borderRadius: generalDiff.borderRadius,
-        border: `2px solid ${removedText}`,
-    },
-    'del .cm-deletedText, del .cm-changedText': {
-        background: 'transparent !important',
-    },
-    // Tooltips and autocomplete
-    '.cm-tooltip': {
-        backgroundColor: tooltipBackground,
-        border: `2px solid ${darkBlue}`,
-        borderRadius: generalTooltip.borderRadius,
-        padding: generalTooltip.padding,
-        color: base04,
-    },
-    '.cm-tooltip-autocomplete': {
-        '& > ul': {
-            backgroundColor: tooltipBackground,
-            border: `2px solid ${base04}`,
+        gutter: {
+            background: base00,
+            foreground: base03,
+            border: base04,
+            activeBackground: base01,
+            activeForeground: darkBlue,
+            activeFontWeight: 'bold',
+            activeBorder: `1px solid ${base02}`,
+            foldHover: darkCyan,
         },
-        '& > ul > li': {
-            padding: generalTooltip.padding,
-            lineHeight: generalTooltip.lineHeight,
+        foldPlaceholder: { background: tooltipBackground, foreground: darkBlue, border: darkBlue, borderStyle: 'solid' },
+        tooltip: {
+            background: tooltipBackground,
+            foreground: base04,
+            border: darkBlue,
+            listBackground: tooltipBackground,
+            listBorder: `2px solid ${base04}`,
+            hoverBackground: 'transparent',
+            selectedBackground: selection,
+            selectedForeground: base00,
+            selectedBorder: `2px solid ${darkBlue}`,
+            icon: darkCyan,
+            detail: darkOrange,
+            shadow: 'none',
         },
-        '& > ul > li[aria-selected]': {
-            backgroundColor: selection,
-            color: base00,
-            borderRadius: generalTooltip.borderRadiusSelected,
-            border: `2px solid ${darkBlue}`,
+        diff: {
+            insertedBackground: addedBackground,
+            insertedForeground: darkGreen,
+            insertedBorder: `2px solid ${darkGreen}`,
+            deletedBackground: removedBackground,
+            deletedForeground: darkRed,
+            deletedBorder: `2px solid ${darkRed}`,
         },
-        '& > ul > li > span.cm-completionIcon': {
-            color: darkCyan,
-            paddingRight: generalTooltip.paddingRight,
+        diagnostic: {
+            error: darkRed,
+            warning: darkOrange,
+            info: darkBlue,
+            hint: darkBlue,
+            errorBackground: '#ff000020',
+            warningBackground: '#ff990020',
+            infoBackground: `${darkBlue}20`,
+            borderWidth: '4px',
+            underlineWidth: '3px',
         },
-        '& > ul > li > span.cm-completionDetail': {
-            color: darkOrange,
-            fontStyle: 'italic',
+        scrollbar: {
+            track: base00,
+            trackBorder: `2px solid ${base04}`,
+            thumb: base03,
+            thumbBorder: `2px solid ${base04}`,
+            thumbHover: darkBlue,
+            thumbHoverShadow: 'none',
         },
-    },
-    '.cm-tooltip .cm-tooltip-arrow:before': {
-        borderTopColor: 'transparent',
-        borderBottomColor: 'transparent',
-    },
-    '.cm-tooltip .cm-tooltip-arrow:after': {
-        borderTopColor: darkBlue,
-        borderBottomColor: darkBlue,
-    },
-    // Diagnostics styling
-    '.cm-diagnostic': {
-        '&-error': {
-            borderLeft: `4px solid ${darkRed}`,
-            backgroundColor: '#ff000020',
+        focusRing: `0 0 0 2px ${base00}, 0 0 0 5px ${darkBlue}`,
+        outlineWidth: '2px',
+        merge: {
+            backgroundColor: base00,
+            borderColor: darkBlue,
+            buttonColor: darkBlue,
+            buttonHoverColor: darkOrange,
         },
-        '&-warning': {
-            borderLeft: `4px solid ${diagnosticWarning}`,
-            backgroundColor: '#ff990020',
+    },
+    syntax: {
+        keyword: { color: darkMagenta, fontWeight: 'bold' },
+        definitionKeyword: { color: darkMagenta },
+        modifier: { color: darkPurple, fontStyle: 'italic' },
+        separator: { color: darkBlue },
+        operator: { color: darkCyan },
+        punctuation: { color: base04 },
+        bracket: { color: darkBrown },
+        angleBracket: { color: darkCyan },
+        brace: { color: darkCyan },
+        name: { color: base04 },
+        localVariable: { color: darkOrange },
+        variableDefinition: { color: darkOrange },
+        nameDefinition: { color: darkBlue },
+        function: { color: darkBlue },
+        self: { color: darkRed },
+        label: { color: darkBlue },
+        property: { color: darkBlue, fontStyle: 'normal' },
+        type: { color: darkCyan },
+        typeDefinition: { color: darkCyan, fontWeight: 'bold' },
+        className: { color: darkCyan, fontStyle: 'italic' },
+        namespace: { color: darkOrange, fontStyle: 'italic' },
+        tag: { color: darkMagenta },
+        attribute: { color: darkCyan },
+        content: { color: base04 },
+        string: { color: darkGreen },
+        regexp: { color: darkMagenta },
+        number: { color: darkOrange },
+        constant: { color: darkOrange },
+        comment: { fontStyle: 'italic', color: base02 },
+        meta: { color: base02 },
+        processingInstruction: { color: darkGreen },
+        annotation: { color: darkRed, fontStyle: 'italic' },
+        heading: { fontWeight: 'bold', color: darkMagenta },
+        headingLevel: { color: darkMagenta },
+        list: { color: darkMagenta },
+        quote: { color: darkPurple },
+        monospace: { color: darkBlue, fontStyle: 'italic' },
+        contentSeparator: { color: darkPurple },
+        link: {
+            color: darkPurple,
+            fontWeight: '500',
+            textDecoration: 'underline',
+            textUnderlinePosition: 'under',
         },
-        '&-info': {
-            borderLeft: `4px solid ${linkColor}`,
-            backgroundColor: '#0000ff20',
+        url: { color: darkBlue, textDecoration: 'underline', textUnderlineOffset: '2px' },
+        emphasis: { fontStyle: 'italic', color: darkMagenta },
+        strong: { fontWeight: 'bold', color: darkOrange },
+        strikethrough: { color: darkRed, textDecoration: 'line-through' },
+        invalid: {
+            color: darkRed,
+            textDecoration: 'underline wavy',
+            borderBottom: `2px wavy ${darkRed}`,
         },
+        inserted: { color: darkGreen },
+        deleted: { color: darkRed },
+        changed: { color: darkOrange },
     },
-    '.cm-lintPoint-error': {
-        borderBottom: `3px wavy ${darkRed}`,
-    },
-    '.cm-lintPoint-warning': {
-        borderBottom: `3px wavy ${diagnosticWarning}`,
-    },
-    // Matching brackets
-    '.cm-matchingBracket': {
-        backgroundColor: activeBracketBg,
-        outline: `2px solid ${activeBracketBorder}`,
-        borderRadius: generalMatching.borderRadius,
-    },
-    '.cm-nonmatchingBracket': {
-        backgroundColor: '#ff000030',
-        outline: `2px solid ${invalid}`,
-        borderRadius: generalMatching.borderRadius,
-    },
-    // Selection matches
-    '.cm-selectionMatch': {
-        backgroundColor: selectionMatch,
-        outline: `2px solid ${darkBlue}50`,
-        borderRadius: generalMatching.borderRadius,
-    },
-    // Fold placeholder
-    '.cm-foldPlaceholder': {
-        backgroundColor: tooltipBackground,
-        color: darkBlue,
-        border: `2px solid ${darkBlue}`,
-        borderRadius: generalPlaceholder.borderRadius,
-        padding: generalPlaceholder.padding,
-        margin: generalPlaceholder.margin,
-    },
-    // Focus outline
-    '&.cm-focused': {
-        outline: `3px solid ${darkBlue}`,
-        outlineOffset: '2px',
-    },
-    // Scrollbars
-    '& .cm-scroller::-webkit-scrollbar': {
-        width: generalScroller.width,
-        height: generalScroller.height,
-    },
-    '& .cm-scroller::-webkit-scrollbar-track': {
-        background: lightBackground,
-        border: `2px solid ${base04}`,
-    },
-    '& .cm-scroller::-webkit-scrollbar-thumb': {
-        backgroundColor: base03,
-        border: `2px solid ${base04}`,
-        borderRadius: generalScroller.borderRadius,
-    },
-    '& .cm-scroller::-webkit-scrollbar-thumb:hover': {
-        backgroundColor: darkBlue,
-    },
-    // Ghost text
-    '.cm-ghostText': {
-        opacity: '0.7',
-        color: base02,
-    },
-}, { dark: false });
-/**
- * Enhanced syntax highlighting for High Contrast Light theme
- */
-const highContrastLightHighlightStyle = language.HighlightStyle.define([
-    // Keywords and control flow
-    { tag: highlight.tags.keyword, color: darkMagenta, fontWeight: 'bold' },
-    { tag: highlight.tags.controlKeyword, color: darkMagenta, fontWeight: 'bold' },
-    { tag: highlight.tags.moduleKeyword, color: darkMagenta, fontWeight: 'bold' },
-    // Names and variables
-    { tag: [highlight.tags.name, highlight.tags.deleted, highlight.tags.character, highlight.tags.macroName], color: base04 },
-    { tag: [highlight.tags.variableName], color: base04 },
-    { tag: [highlight.tags.propertyName], color: darkBlue, fontStyle: 'normal' },
-    // Classes and types
-    { tag: [highlight.tags.typeName], color: darkCyan },
-    { tag: [highlight.tags.className], color: darkCyan, fontStyle: 'italic' },
-    { tag: [highlight.tags.namespace], color: darkOrange, fontStyle: 'italic' },
-    // Operators and punctuation
-    { tag: [highlight.tags.operator, highlight.tags.operatorKeyword], color: darkCyan },
-    { tag: [highlight.tags.bracket], color: darkBrown },
-    { tag: [highlight.tags.brace], color: darkCyan },
-    { tag: [highlight.tags.punctuation], color: base04 },
-    // Functions and parameters
-    { tag: [highlight.tags.function(highlight.tags.variableName), highlight.tags.labelName], color: darkBlue },
-    { tag: [highlight.tags.definition(highlight.tags.function(highlight.tags.variableName))], color: darkBlue },
-    { tag: [highlight.tags.definition(highlight.tags.variableName)], color: darkOrange },
-    // Constants and literals
-    { tag: highlight.tags.number, color: darkOrange },
-    { tag: highlight.tags.changed, color: darkOrange },
-    { tag: highlight.tags.annotation, color: darkRed, fontStyle: 'italic' },
-    { tag: highlight.tags.modifier, color: darkPurple, fontStyle: 'italic' },
-    { tag: highlight.tags.self, color: darkRed },
-    { tag: [highlight.tags.color, highlight.tags.constant(highlight.tags.name), highlight.tags.standard(highlight.tags.name)], color: darkOrange },
-    { tag: [highlight.tags.atom, highlight.tags.bool, highlight.tags.special(highlight.tags.variableName)], color: darkOrange },
-    // Strings and regex
-    { tag: [highlight.tags.processingInstruction, highlight.tags.inserted], color: darkGreen },
-    { tag: [highlight.tags.special(highlight.tags.string), highlight.tags.regexp], color: darkMagenta },
-    { tag: highlight.tags.string, color: darkGreen },
-    // Punctuation and structure
-    { tag: highlight.tags.definition(highlight.tags.typeName), color: darkCyan, fontWeight: 'bold' },
-    { tag: [highlight.tags.definition(highlight.tags.name), highlight.tags.separator], color: darkBlue },
-    // Comments and documentation
-    { tag: highlight.tags.meta, color: base02 },
-    { tag: highlight.tags.comment, fontStyle: 'italic', color: base02 },
-    { tag: highlight.tags.docComment, fontStyle: 'italic', color: base02 },
-    // HTML/XML elements
-    { tag: [highlight.tags.tagName], color: darkMagenta },
-    { tag: [highlight.tags.attributeName], color: darkCyan },
-    // Markdown and text formatting
-    { tag: [highlight.tags.heading], fontWeight: 'bold', color: darkMagenta },
-    { tag: [highlight.tags.strong], fontWeight: 'bold', color: darkOrange },
-    { tag: [highlight.tags.emphasis], fontStyle: 'italic', color: darkMagenta },
-    // Links and URLs
-    {
-        tag: [highlight.tags.link],
-        color: visitedLinkColor,
-        fontWeight: '500',
-        textDecoration: 'underline',
-        textUnderlinePosition: 'under',
-    },
-    {
-        tag: [highlight.tags.url],
-        color: linkColor,
-        textDecoration: 'underline',
-        textUnderlineOffset: '2px',
-    },
-    // Special states
-    {
-        tag: [highlight.tags.invalid],
-        color: darkRed,
-        textDecoration: 'underline wavy',
-        borderBottom: `2px wavy ${darkRed}`,
-    },
-    { tag: [highlight.tags.strikethrough], color: darkRed, textDecoration: 'line-through' },
-    // Enhanced syntax highlighting
-    { tag: highlight.tags.constant(highlight.tags.name), color: darkOrange },
-    { tag: highlight.tags.deleted, color: darkRed },
-    { tag: highlight.tags.squareBracket, color: darkBrown },
-    { tag: highlight.tags.angleBracket, color: darkCyan },
-    // Additional specific styles
-    { tag: highlight.tags.monospace, color: darkBlue, fontStyle: 'italic' },
-    { tag: [highlight.tags.contentSeparator], color: darkPurple },
-    { tag: highlight.tags.quote, color: darkPurple },
-    { tag: highlight.tags.integer, color: darkOrange },
-    { tag: highlight.tags.float, color: darkOrange },
-    { tag: highlight.tags.null, color: darkOrange },
-    { tag: highlight.tags.attributeValue, color: darkGreen },
-    { tag: highlight.tags.escape, color: darkGreen },
-    { tag: highlight.tags.paren, color: darkBrown },
-    { tag: highlight.tags.lineComment, color: base02, fontStyle: 'italic' },
-    { tag: highlight.tags.blockComment, color: base02, fontStyle: 'italic' },
-    { tag: highlight.tags.definitionKeyword, color: darkMagenta },
-    { tag: highlight.tags.arithmeticOperator, color: darkCyan },
-    { tag: highlight.tags.logicOperator, color: darkCyan },
-    { tag: highlight.tags.compareOperator, color: darkCyan },
-    { tag: highlight.tags.bitwiseOperator, color: darkCyan },
-    { tag: highlight.tags.updateOperator, color: darkCyan },
-    { tag: highlight.tags.derefOperator, color: darkCyan },
-    { tag: highlight.tags.local(highlight.tags.variableName), color: darkOrange },
-    { tag: highlight.tags.list, color: darkMagenta },
-    { tag: highlight.tags.unit, color: darkOrange },
-    { tag: highlight.tags.heading1, color: darkMagenta },
-    { tag: highlight.tags.heading2, color: darkMagenta },
-    { tag: highlight.tags.heading3, color: darkMagenta },
-    { tag: highlight.tags.heading4, color: darkMagenta },
-    { tag: highlight.tags.heading5, color: darkMagenta },
-    { tag: highlight.tags.heading6, color: darkMagenta },
-]);
+});
 /**
  * Combined High Contrast Light theme extension
  */
-const highContrastLight = [highContrastLightTheme, language.syntaxHighlighting(highContrastLightHighlightStyle)];
+const highContrastLight = theme.extension;
 /**
  * High Contrast Light merge revert styles configuration
  */
-const highContrastLightMergeStyles = {
-    backgroundColor: lightBackground,
-    borderColor: darkBlue,
-    buttonColor: darkBlue,
-    buttonHoverColor: darkOrange,
-};
+const highContrastLightMergeStyles = theme.mergeStyles;
 
 exports.applyMergeRevertStyles = applyMergeRevertStyles;
 exports.highContrastLight = highContrastLight;