React 18 and Vite (#4510)

2022-11-25 13:25:03 -07:00 · 2022-11-25 13:25:03 -07:00 · 21613fa602
commit 21613fa602
parent 1bb1b13f6d
244 changed files with 4547 additions and 8933 deletions
--- a/resources/scripts/components/elements/editor/theme.ts
+++ b/resources/scripts/components/elements/editor/theme.ts
@ -0,0 +1,148 @@
+import { HighlightStyle } from '@codemirror/language';
+import type { Extension } from '@codemirror/state';
+import { EditorView } from '@codemirror/view';
+import { tags as t } from '@lezer/highlight';
+
+const highlightBackground = 'transparent';
+const background = '#1F2430';
+const selection = '#34455A';
+const cursor = '#FFCC66';
+
+export const ayuMirageTheme: Extension = EditorView.theme(
+    {
+        '&': {
+            color: '#CBCCC6',
+            backgroundColor: background,
+        },
+
+        '.cm-content': {
+            caretColor: cursor,
+        },
+
+        '&.cm-focused .cm-cursor': { borderLeftColor: cursor },
+        '&.cm-focused .cm-selectionBackground, .cm-selectionBackground, ::selection': {
+            backgroundColor: selection,
+        },
+
+        '.cm-panels': { backgroundColor: '#232834', color: '#CBCCC6' },
+        '.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: highlightBackground },
+        '.cm-selectionMatch': { backgroundColor: '#aafe661a' },
+
+        '.cm-matchingBracket, .cm-nonmatchingBracket': {
+            backgroundColor: '#bad0f847',
+            outline: '1px solid #515a6b',
+        },
+
+        '.cm-gutters': {
+            backgroundColor: 'transparent',
+            color: '#FF3333',
+            border: 'none',
+        },
+
+        '.cm-gutterElement': {
+            color: 'rgba(61, 66, 77, 99)',
+        },
+
+        '.cm-activeLineGutter': {
+            backgroundColor: highlightBackground,
+        },
+
+        '.cm-foldPlaceholder': {
+            backgroundColor: 'transparent',
+            border: 'none',
+            color: '#ddd',
+        },
+
+        '.cm-tooltip': {
+            border: '1px solid #181a1f',
+            backgroundColor: '#232834',
+        },
+        '.cm-tooltip-autocomplete': {
+            '& > ul > li[aria-selected]': {
+                backgroundColor: highlightBackground,
+                color: '#CBCCC6',
+            },
+        },
+    },
+    { dark: true },
+);
+
+export const ayuMirageHighlightStyle = HighlightStyle.define([
+    {
+        tag: t.keyword,
+        color: '#FFA759',
+    },
+    {
+        tag: [t.name, t.deleted, t.character, t.propertyName, t.macroName],
+        color: '#5CCFE6',
+    },
+    {
+        tag: [t.function(t.variableName), t.labelName],
+        color: '#CBCCC6',
+    },
+    {
+        tag: [t.color, t.constant(t.name), t.standard(t.name)],
+        color: '#F29E74',
+    },
+    {
+        tag: [t.definition(t.name), t.separator],
+        color: '#CBCCC6B3',
+    },
+    {
+        tag: [t.typeName, t.className, t.number, t.changed, t.annotation, t.modifier, t.self, t.namespace],
+        color: '#FFCC66',
+    },
+    {
+        tag: [t.operator, t.operatorKeyword, t.url, t.escape, t.regexp, t.link, t.special(t.string)],
+        color: '#5CCFE6',
+    },
+    {
+        tag: [t.meta, t.comment],
+        color: '#5C6773',
+    },
+    {
+        tag: t.strong,
+        fontWeight: 'bold',
+    },
+    {
+        tag: t.emphasis,
+        fontStyle: 'italic',
+    },
+    {
+        tag: t.strikethrough,
+        textDecoration: 'line-through',
+    },
+    {
+        tag: t.link,
+        color: '#FF3333',
+        textDecoration: 'underline',
+    },
+    {
+        tag: t.heading,
+        fontWeight: 'bold',
+        color: '#BAE67E',
+    },
+    {
+        tag: [t.atom, t.bool, t.special(t.variableName)],
+        color: '#5CCFE6',
+    },
+    {
+        tag: [t.processingInstruction, t.string, t.inserted],
+        color: '#BAE67E',
+    },
+    {
+        tag: t.invalid,
+        color: '#FF3333',
+    },
+]);