@fsegurai/codemirror-theme-high-contrast-light 6.0.0

package/dist/index.js

@@ -0,0 +1,495 @@
+import { EditorView } from '@codemirror/view';
+import { HighlightStyle, syntaxHighlighting } from '@codemirror/language';
+import { tags } from '@lezer/highlight';
+
+// Helper module for styling options
+const generalContent = {
+    fontSize: '14px',
+    fontFamily: 'JetBrains Mono, Consolas, monospace',
+    lineHeight: '1.6',
+};
+const generalDiff = {
+    insertedTextDecoration: 'none',
+    deletedTextDecoration: 'line-through',
+    insertedLinePadding: '1px 3px',
+    borderRadious: '3px'};
+const generalGutter = {
+    border: 'none',
+    paddingRight: '8px',
+    fontSize: '0.9em',
+    lineHeight: '1.78', // Adjusted to compensate for 0.9em fontSize (1.6 / 0.9 ≈ 1.78)
+};
+const generalPanel = {
+    borderRadius: '4px',
+    padding: '2px 10px',
+};
+const generalLine = {
+    borderRadius: '2px',
+};
+const generalMatching = {
+    borderRadius: '2px',
+};
+const generalPlaceholder = {
+    borderRadius: '4px',
+    padding: '0 5px',
+    margin: '0 2px',
+};
+const generalScroller = {
+    width: '12px',
+    height: '12px',
+    borderRadius: '6px',
+};
+const generalSearchField = {
+    borderRadius: '4px',
+    padding: '2px 6px',
+};
+const generalTooltip = {
+    borderRadius: '4px',
+    borderRadiusSelected: '3px',
+    lineHeight: '1.3',
+    padding: '4px 8px',
+    paddingRight: '8px',
+};
+/**
+ * Function to apply merge revert styles for a theme
+ * @param styles Styles for the merge revert buttons
+ * @param styles.backgroundColor Background color of the revert area
+ * @param styles.borderColor Border color of the revert area
+ * @param styles.buttonColor Color of the revert buttons
+ * @param styles.buttonHoverColor Hover color of the revert buttons
+ */
+function applyMergeRevertStyles(styles) {
+    // Create a stylesheet
+    const styleEl = document.createElement('style');
+    styleEl.id = 'cm-merge-revert-styles';
+    // Define CSS with the theme-specific values
+    styleEl.textContent = `
+    .cm-merge-revert {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: flex-start;
+      padding: 4px;
+      background-color: ${styles.backgroundColor};
+      border-left: 1px solid ${styles.borderColor};
+      border-right: 1px solid ${styles.borderColor};
+      width: 32px;
+    }
+    
+    .cm-merge-revert button {
+      width: 100%;
+      height: auto;
+      background-color: transparent;
+      border: none;
+      color: ${styles.buttonColor};
+      cursor: pointer;
+      margin: 0 auto;
+      font-size: 20px;
+    }
+    
+    .cm-merge-revert button:hover {
+      background-color: ${styles.buttonHoverColor};
+    }
+  `;
+    // Remove any existing merge styles
+    const existingStyle = document.getElementById('cm-merge-revert-styles');
+    if (existingStyle)
+        existingStyle.remove();
+    // Add the new styles
+    document.head.appendChild(styleEl);
+}
+
+/**
+ * High Contrast Light theme color definitions
+ * -------------------------------------------
+ * Maximum contrast theme for accessibility (light variant)
+ */
+// Base colors - Pure white and black for maximum contrast
+const base00 = '#ffffff', // Background - pure white
+base01 = '#e0e0e0', // Selection background
+base02 = '#707070', // 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';
+// 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;
+// Diff/merge specific colors
+const addedBackground = '#00800040', removedBackground = '#c8000040', addedText = darkGreen, removedText = darkRed;
+/**
+ * Enhanced editor theme styles for High Contrast Light
+ */
+const highContrastLightTheme = /*@__PURE__*/EditorView.theme({
+    // Base editor styles
+    '&': {
+        color: base04,
+        backgroundColor: background,
+        fontSize: generalContent.fontSize,
+        fontFamily: generalContent.fontFamily,
+        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,
+        },
+    },
+    '.cm-searchMatch.cm-searchMatch-selected': {
+        backgroundColor: darkOrange,
+        color: base00,
+        padding: generalSearchField.padding,
+        outline: `2px solid ${base04}`,
+        '& span': {
+            color: base00,
+        },
+    },
+    '.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.borderRadious,
+        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.borderRadious,
+        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.borderRadious,
+        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.borderRadious,
+        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}`,
+        },
+        '& > ul > li': {
+            padding: generalTooltip.padding,
+            lineHeight: generalTooltip.lineHeight,
+        },
+        '& > ul > li[aria-selected]': {
+            backgroundColor: selection,
+            color: base00,
+            borderRadius: generalTooltip.borderRadiusSelected,
+            border: `2px solid ${darkBlue}`,
+        },
+        '& > ul > li > span.cm-completionIcon': {
+            color: darkCyan,
+            paddingRight: generalTooltip.paddingRight,
+        },
+        '& > ul > li > span.cm-completionDetail': {
+            color: darkOrange,
+            fontStyle: 'italic',
+        },
+    },
+    '.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',
+        },
+        '&-warning': {
+            borderLeft: `4px solid ${diagnosticWarning}`,
+            backgroundColor: '#ff990020',
+        },
+        '&-info': {
+            borderLeft: `4px solid ${linkColor}`,
+            backgroundColor: '#0000ff20',
+        },
+    },
+    '.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 = /*@__PURE__*/HighlightStyle.define([
+    // Keywords and control flow
+    { tag: tags.keyword, color: darkMagenta, fontWeight: 'bold' },
+    { tag: tags.controlKeyword, color: darkMagenta, fontWeight: 'bold' },
+    { tag: tags.moduleKeyword, color: darkMagenta, fontWeight: 'bold' },
+    // Names and variables
+    { tag: [tags.name, tags.deleted, tags.character, tags.macroName], color: base04 },
+    { tag: [tags.variableName], color: base04 },
+    { tag: [tags.propertyName], color: darkBlue, fontStyle: 'normal' },
+    // Classes and types
+    { tag: [tags.typeName], color: darkCyan },
+    { tag: [tags.className], color: darkCyan, fontStyle: 'italic' },
+    { tag: [tags.namespace], color: darkOrange, fontStyle: 'italic' },
+    // Operators and punctuation
+    { tag: [tags.operator, tags.operatorKeyword], color: darkCyan },
+    { tag: [tags.bracket], color: darkBrown },
+    { tag: [tags.brace], color: darkCyan },
+    { tag: [tags.punctuation], color: base04 },
+    // Functions and parameters
+    { tag: [/*@__PURE__*/tags.function(tags.variableName), tags.labelName], color: darkBlue },
+    { tag: [/*@__PURE__*/tags.definition(/*@__PURE__*/tags.function(tags.variableName))], color: darkBlue },
+    { tag: [/*@__PURE__*/tags.definition(tags.variableName)], color: darkOrange },
+    // Constants and literals
+    { tag: tags.number, color: darkOrange },
+    { tag: tags.changed, color: darkOrange },
+    { tag: tags.annotation, color: darkRed, fontStyle: 'italic' },
+    { tag: tags.modifier, color: darkPurple, fontStyle: 'italic' },
+    { tag: tags.self, color: darkRed },
+    { tag: [tags.color, /*@__PURE__*/tags.constant(tags.name), /*@__PURE__*/tags.standard(tags.name)], color: darkOrange },
+    { tag: [tags.atom, tags.bool, /*@__PURE__*/tags.special(tags.variableName)], color: darkOrange },
+    // Strings and regex
+    { tag: [tags.processingInstruction, tags.inserted], color: darkGreen },
+    { tag: [/*@__PURE__*/tags.special(tags.string), tags.regexp], color: darkMagenta },
+    { tag: tags.string, color: darkGreen },
+    // Punctuation and structure
+    { tag: /*@__PURE__*/tags.definition(tags.typeName), color: darkCyan, fontWeight: 'bold' },
+    { tag: [/*@__PURE__*/tags.definition(tags.name), tags.separator], color: darkBlue },
+    // Comments and documentation
+    { tag: tags.meta, color: base02 },
+    { tag: tags.comment, fontStyle: 'italic', color: base02 },
+    { tag: tags.docComment, fontStyle: 'italic', color: base02 },
+    // HTML/XML elements
+    { tag: [tags.tagName], color: darkMagenta },
+    { tag: [tags.attributeName], color: darkCyan },
+    // Markdown and text formatting
+    { tag: [tags.heading], fontWeight: 'bold', color: darkMagenta },
+    { tag: [tags.strong], fontWeight: 'bold', color: darkOrange },
+    { tag: [tags.emphasis], fontStyle: 'italic', color: darkMagenta },
+    // Links and URLs
+    {
+        tag: [tags.link],
+        color: visitedLinkColor,
+        fontWeight: '500',
+        textDecoration: 'underline',
+        textUnderlinePosition: 'under',
+    },
+    {
+        tag: [tags.url],
+        color: linkColor,
+        textDecoration: 'underline',
+        textUnderlineOffset: '2px',
+    },
+    // Special states
+    {
+        tag: [tags.invalid],
+        color: darkRed,
+        textDecoration: 'underline wavy',
+        borderBottom: `2px wavy ${darkRed}`,
+    },
+    { tag: [tags.strikethrough], color: darkRed, textDecoration: 'line-through' },
+    // Enhanced syntax highlighting
+    { tag: /*@__PURE__*/tags.constant(tags.name), color: darkOrange },
+    { tag: tags.deleted, color: darkRed },
+    { tag: tags.squareBracket, color: darkBrown },
+    { tag: tags.angleBracket, color: darkCyan },
+    // Additional specific styles
+    { tag: tags.monospace, color: darkBlue, fontStyle: 'italic' },
+    { tag: [tags.contentSeparator], color: darkPurple },
+    { tag: tags.quote, color: darkPurple },
+]);
+/**
+ * Combined High Contrast Light theme extension
+ */
+const highContrastLight = [
+    highContrastLightTheme,
+    /*@__PURE__*/syntaxHighlighting(highContrastLightHighlightStyle),
+];
+/**
+ * High Contrast Light merge revert styles configuration
+ */
+const highContrastLightMergeStyles = {
+    backgroundColor: lightBackground,
+    borderColor: darkBlue,
+    buttonColor: darkBlue,
+    buttonHoverColor: darkOrange,
+};
+
+export { applyMergeRevertStyles, highContrastLight, highContrastLightMergeStyles };

package/package.json

@@ -0,0 +1,54 @@
+{
+  "name": "@fsegurai/codemirror-theme-high-contrast-light",
+  "description": "High Contrast Light theme for the CodeMirror editor",
+  "version": "6.0.0",
+  "type": "module",
+  "main": "dist/index.cjs",
+  "exports": {
+    "import": "./dist/index.js",
+    "require": "./dist/index.cjs"
+  },
+  "types": "dist/index.d.ts",
+  "module": "dist/index.js",
+  "sideEffects": false,
+  "scripts": {
+    "test": "cm-runtests",
+    "prepare": "cm-buildhelper src/index.ts"
+  },
+  "keywords": [
+    "editor",
+    "diff",
+    "diff-editor",
+    "code",
+    "codemirror",
+    "theme",
+    "themes",
+    "syntax",
+    "highlight",
+    "high-contrast",
+    "accessibility",
+    "a11y"
+  ],
+  "author": {
+    "name": "Fabián Segura",
+    "url": "https://www.fsegurai.com/"
+  },
+  "license": "MIT",
+  "peerDependencies": {
+    "@lezer/highlight": "^1.0.0",
+    "@codemirror/language": "^6.0.0",
+    "@codemirror/state": "^6.0.0",
+    "@codemirror/view": "^6.0.0"
+  },
+  "devDependencies": {
+    "@codemirror/buildhelper": "^1.0.2"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/fsegurai/codemirror-themes.git"
+  },
+  "bugs": {
+    "url": "https://github.com/fsegurai/codemirror-themes/issues"
+  },
+  "homepage": "https://github.com/fsegurai/codemirror-themes#readme"
+}