@xh/hoist 79.0.0-SNAPSHOT.1765818732757 → 79.0.0-SNAPSHOT.1765824728801

package/build/types/desktop/cmp/input/impl/one-dark.d.ts

@@ -0,0 +1,23 @@
+import { Extension } from '@codemirror/state';
+import { HighlightStyle } from '@codemirror/language';
+export declare const color: {
+    chalky: string;
+    coral: string;
+    cyan: string;
+    invalid: string;
+    ivory: string;
+    stone: string;
+    malibu: string;
+    sage: string;
+    whiskey: string;
+    violet: string;
+    darkBackground: string;
+    highlightBackground: string;
+    background: string;
+    tooltipBackground: string;
+    selection: string;
+    cursor: string;
+};
+export declare const oneDarkTheme: Extension;
+export declare const oneDarkHighlightStyle: HighlightStyle;
+export declare const oneDark: Extension;

package/desktop/cmp/input/CodeInput.ts

@@ -36,7 +36,7 @@ import {
     ViewPlugin,
     ViewUpdate
 } from '@codemirror/view';
-import {githubLight, githubDark} from '@uiw/codemirror-theme-github';
+import {oneDark} from './impl/one-dark';
 import {HoistInputModel, HoistInputProps, useHoistInputModel} from '@xh/hoist/cmp/input';
 import {box, div, filler, fragment, frame, hbox, label, span, vbox} from '@xh/hoist/cmp/layout';
 import {hoistCmp, HoistProps, LayoutProps, managed, PlainObject, XH} from '@xh/hoist/core';
@@ -478,8 +478,10 @@ class CodeInputModel extends HoistInputModel {
 
         return extensions.filter(it => !isEmpty(it));
     }
+
     private getThemeExtension() {
-        return XH.darkTheme ? githubDark : githubLight;
+        const lightTheme = EditorView.theme({}, {dark: false});
+        return XH.darkTheme ? oneDark : lightTheme;
     }
 
     private async getLanguageExtensionAsync(lang: string): Promise<LanguageSupport> {

package/desktop/cmp/input/impl/one-dark.ts

@@ -0,0 +1,163 @@
+import {EditorView} from '@codemirror/view';
+import {Extension} from '@codemirror/state';
+import {HighlightStyle, syntaxHighlighting} from '@codemirror/language';
+import {tags as t} from '@lezer/highlight';
+
+// Using https://github.com/one-dark/vscode-one-dark-theme/ as reference for the colors
+
+const chalky = '#e5c07b',
+    coral = '#e06c75',
+    cyan = '#56b6c2',
+    invalid = '#ffffff',
+    ivory = '#abb2bf',
+    stone = '#7d8799', // Brightened compared to original to increase contrast
+    malibu = '#61afef',
+    sage = '#98c379',
+    whiskey = '#d19a66',
+    violet = '#c678dd',
+    darkBackground = '#21252b',
+    highlightBackground = '#2c313a',
+    background = '#282c34',
+    tooltipBackground = '#353a42',
+    selection = '#3E4451',
+    cursor = '#528bff';
+
+/// The colors used in the theme, as CSS color strings.
+export const color = {
+    chalky,
+    coral,
+    cyan,
+    invalid,
+    ivory,
+    stone,
+    malibu,
+    sage,
+    whiskey,
+    violet,
+    darkBackground,
+    highlightBackground,
+    background,
+    tooltipBackground,
+    selection,
+    cursor
+};
+
+/// The editor theme styles for One Dark.
+export const oneDarkTheme = EditorView.theme(
+    {
+        '&': {
+            color: ivory,
+            backgroundColor: background
+        },
+
+        '.cm-content': {
+            caretColor: cursor
+        },
+
+        '.cm-cursor, .cm-dropCursor': {borderLeftColor: cursor},
+        '&.cm-focused > .cm-scroller > .cm-selectionLayer .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection':
+            {backgroundColor: selection},
+
+        '.cm-panels': {backgroundColor: darkBackground, color: ivory},
+        '.cm-panels.cm-panels-top': {borderBottom: '2px solid black'},
+        '.cm-panels.cm-panels-bottom': {borderTop: '2px solid black'},
+
+        '.cm-searchMatch': {
+            backgroundColor: '#72a1ff59',
+            outline: '1px solid #457dff'
+        },
+        '.cm-searchMatch.cm-searchMatch-selected': {
+            backgroundColor: '#6199ff2f'
+        },
+
+        '.cm-activeLine': {backgroundColor: '#6699ff0b'},
+        '.cm-selectionMatch': {backgroundColor: '#aafe661a'},
+
+        '&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket': {
+            backgroundColor: '#bad0f847'
+        },
+
+        '.cm-gutters': {
+            backgroundColor: background,
+            color: stone,
+            border: 'none'
+        },
+
+        '.cm-activeLineGutter': {
+            backgroundColor: highlightBackground
+        },
+
+        '.cm-foldPlaceholder': {
+            backgroundColor: 'transparent',
+            border: 'none',
+            color: '#ddd'
+        },
+
+        '.cm-tooltip': {
+            border: 'none',
+            backgroundColor: tooltipBackground
+        },
+        '.cm-tooltip .cm-tooltip-arrow:before': {
+            borderTopColor: 'transparent',
+            borderBottomColor: 'transparent'
+        },
+        '.cm-tooltip .cm-tooltip-arrow:after': {
+            borderTopColor: tooltipBackground,
+            borderBottomColor: tooltipBackground
+        },
+        '.cm-tooltip-autocomplete': {
+            '& > ul > li[aria-selected]': {
+                backgroundColor: highlightBackground,
+                color: ivory
+            }
+        }
+    },
+    {dark: true}
+);
+
+/// The highlighting style for code in the One Dark theme.
+export const oneDarkHighlightStyle = HighlightStyle.define([
+    {tag: t.keyword, color: violet},
+    {tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName], color: coral},
+    {tag: [t.function(t.variableName), t.labelName], color: malibu},
+    {tag: [t.color, t.constant(t.name), t.standard(t.name)], color: whiskey},
+    {tag: [t.definition(t.name), t.separator], color: ivory},
+    {
+        tag: [
+            t.typeName,
+            t.className,
+            t.number,
+            t.changed,
+            t.annotation,
+            t.modifier,
+            t.self,
+            t.namespace
+        ],
+        color: chalky
+    },
+    {
+        tag: [
+            t.operator,
+            t.operatorKeyword,
+            t.url,
+            t.escape,
+            t.regexp,
+            t.link,
+            t.special(t.string)
+        ],
+        color: cyan
+    },
+    {tag: [t.meta, t.comment], color: stone},
+    {tag: t.strong, fontWeight: 'bold'},
+    {tag: t.emphasis, fontStyle: 'italic'},
+    {tag: t.strikethrough, textDecoration: 'line-through'},
+    {tag: t.link, color: stone, textDecoration: 'underline'},
+    {tag: t.heading, fontWeight: 'bold', color: coral},
+    {tag: [t.atom, t.bool, t.special(t.variableName)], color: whiskey},
+    {tag: [t.processingInstruction, t.string, t.inserted], color: sage},
+    {tag: t.invalid, color: invalid}
+]);
+
+/// Extension to enable the One Dark theme (both the editor theme and
+/// the highlight style).
+export const oneDark: Extension = [oneDarkTheme, syntaxHighlighting(oneDarkHighlightStyle)];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xh/hoist",
-  "version": "79.0.0-SNAPSHOT.1765818732757",
+  "version": "79.0.0-SNAPSHOT.1765824728801",
   "description": "Hoist add-on for building and deploying React Applications.",
   "repository": "github:xh/hoist-react",
   "homepage": "https://xh.io",
@@ -49,7 +49,6 @@
     "@onsenui/fastclick": "~1.1.1",
     "@popperjs/core": "~2.11.0",
     "@seznam/compose-react-refs": "~1.0.5",
-    "@uiw/codemirror-theme-github": "^4.25.4",
     "ajv": "~8.17.1",
     "classnames": "~2.5.1",
     "clipboard-copy": "~4.0.1",