is a light-weight, web based API development suite.
| baseTheme.ts (hoppscotch-2.2.1) | : | baseTheme.ts (hoppscotch-3.0.0) |
|---|
| import { | | import { |
| EditorView, | | EditorView, |
| keymap, | | keymap, |
| highlightSpecialChars, | | highlightSpecialChars, |
| highlightActiveLine, | | highlightActiveLine, |
|
| | drawSelection, |
| | dropCursor, |
| | lineNumbers, |
| | highlightActiveLineGutter, |
| | rectangularSelection, |
| | crosshairCursor, |
| } from "@codemirror/view" | | } from "@codemirror/view" |
| import { | | import { |
| HighlightStyle, | | HighlightStyle, |
|
| tags as t, | | |
| defaultHighlightStyle, | | defaultHighlightStyle, |
|
| } from "@codemirror/highlight" | | foldKeymap, |
| import { foldKeymap, foldGutter } from "@codemirror/fold" | | foldGutter, |
| | | indentOnInput, |
| | bracketMatching, |
| | syntaxHighlighting, |
| | } from "@codemirror/language" |
| | import { tags as t } from "@lezer/highlight" |
| import { Extension, EditorState } from "@codemirror/state" | | import { Extension, EditorState } from "@codemirror/state" |
|
| import { history, historyKeymap } from "@codemirror/history" | | import { history, historyKeymap, defaultKeymap } from "@codemirror/commands" |
| import { indentOnInput } from "@codemirror/language" | | import { |
| import { lineNumbers, highlightActiveLineGutter } from "@codemirror/gutter" | | closeBrackets, |
| import { defaultKeymap } from "@codemirror/commands" | | closeBracketsKeymap, |
| import { bracketMatching } from "@codemirror/matchbrackets" | | autocompletion, |
| import { closeBrackets, closeBracketsKeymap } from "@codemirror/closebrackets" | | completionKeymap, |
| | } from "@codemirror/autocomplete" |
| import { | | import { |
| searchKeymap, | | searchKeymap, |
| highlightSelectionMatches, | | highlightSelectionMatches, |
|
| searchConfig, | | search, |
| } from "@codemirror/search" | | } from "@codemirror/search" |
|
| import { autocompletion, completionKeymap } from "@codemirror/autocomplete" | | |
| import { commentKeymap } from "@codemirror/comment" | | |
| import { rectangularSelection } from "@codemirror/rectangular-selection" | | |
| import { lintKeymap } from "@codemirror/lint" | | import { lintKeymap } from "@codemirror/lint" |
| | |
| export const baseTheme = EditorView.theme({ | | export const baseTheme = EditorView.theme({ |
| "&": { | | "&": { |
| fontSize: "var(--font-size-body)", | | fontSize: "var(--font-size-body)", |
| height: "100%", | | height: "100%", |
|
| | width: "100%", |
| | flex: "1", |
| }, | | }, |
| ".cm-content": { | | ".cm-content": { |
|
| caretColor: "var(--secondary-light-color)", | | caretColor: "var(--secondary-dark-color)", |
| fontFamily: "var(--font-mono)", | | fontFamily: "var(--font-mono)", |
|
| backgroundColor: "var(--primary-color)", | | color: "var(--secondary-dark-color)", |
| | backgroundColor: "transparent", |
| }, | | }, |
| ".cm-cursor": { | | ".cm-cursor": { |
| borderColor: "var(--secondary-color)", | | borderColor: "var(--secondary-color)", |
| }, | | }, |
|
| ".cm-selectionBackground, .cm-content ::selection, .cm-line ::selection": { | | ".cm-widgetBuffer": { |
| backgroundColor: "var(--accent-color)", | | position: "absolute", |
| | }, |
| | ".cm-selectionBackground": { |
| | backgroundColor: "var(--accent-dark-color)", |
| color: "var(--accent-contrast-color)", | | color: "var(--accent-contrast-color)", |
|
| | borderRadius: "2px", |
| }, | | }, |
| ".cm-panels": { | | ".cm-panels": { |
| backgroundColor: "var(--primary-light-color)", | | backgroundColor: "var(--primary-light-color)", |
| color: "var(--secondary-light-color)", | | color: "var(--secondary-light-color)", |
| }, | | }, |
| ".cm-panels.cm-panels-top": { | | ".cm-panels.cm-panels-top": { |
| borderBottom: "1px solid var(--divider-light-color)", | | borderBottom: "1px solid var(--divider-light-color)", |
| }, | | }, |
| ".cm-panels.cm-panels-bottom": { | | ".cm-panels.cm-panels-bottom": { |
| borderTop: "1px solid var(--divider-light-color)", | | borderTop: "1px solid var(--divider-light-color)", |
| | |
| skipping to change at line 73 | | skipping to change at line 87 |
|---|
| overflow: "auto", | | overflow: "auto", |
| }, | | }, |
| ".cm-search label": { | | ".cm-search label": { |
| display: "inline-flex", | | display: "inline-flex", |
| alignItems: "center", | | alignItems: "center", |
| }, | | }, |
| ".cm-textfield": { | | ".cm-textfield": { |
| backgroundColor: "var(--primary-dark-color)", | | backgroundColor: "var(--primary-dark-color)", |
| color: "var(--secondary-dark-color)", | | color: "var(--secondary-dark-color)", |
| borderColor: "var(--divider-light-color)", | | borderColor: "var(--divider-light-color)", |
|
| borderRadius: "3px", | | borderRadius: "4px", |
| }, | | }, |
| ".cm-button": { | | ".cm-button": { |
| backgroundColor: "var(--primary-dark-color)", | | backgroundColor: "var(--primary-dark-color)", |
| color: "var(--secondary-dark-color)", | | color: "var(--secondary-dark-color)", |
| backgroundImage: "none", | | backgroundImage: "none", |
| border: "none", | | border: "none", |
|
| | borderRadius: "4px", |
| | }, |
| | ".cm-completionLabel": { |
| | color: "var(--secondary-color)", |
| }, | | }, |
| ".cm-tooltip": { | | ".cm-tooltip": { |
| backgroundColor: "var(--primary-dark-color)", | | backgroundColor: "var(--primary-dark-color)", |
| color: "var(--secondary-light-color)", | | color: "var(--secondary-light-color)", |
| border: "none", | | border: "none", |
|
| borderRadius: "3px", | | borderRadius: "4px", |
| }, | | }, |
|
| ".cm-completionLabel": { | | ".cm-tooltip-arrow:after": { |
| color: "var(--secondary-color)", | | borderColor: "transparent !important", |
| | }, |
| | ".cm-tooltip-arrow:before": { |
| | borderColor: "transparent !important", |
| }, | | }, |
| ".cm-tooltip.cm-tooltip-autocomplete > ul": { | | ".cm-tooltip.cm-tooltip-autocomplete > ul": { |
| fontFamily: "var(--font-mono)", | | fontFamily: "var(--font-mono)", |
| }, | | }, |
| ".cm-tooltip-autocomplete ul li[aria-selected]": { | | ".cm-tooltip-autocomplete ul li[aria-selected]": { |
| backgroundColor: "var(--accent-dark-color)", | | backgroundColor: "var(--accent-dark-color)", |
| color: "var(--accent-contrast-color)", | | color: "var(--accent-contrast-color)", |
| }, | | }, |
| ".cm-tooltip-autocomplete ul li[aria-selected] .cm-completionLabel": { | | ".cm-tooltip-autocomplete ul li[aria-selected] .cm-completionLabel": { |
| color: "var(--accent-contrast-color)", | | color: "var(--accent-contrast-color)", |
| }, | | }, |
| ".cm-activeLine": { backgroundColor: "transparent" }, | | ".cm-activeLine": { backgroundColor: "transparent" }, |
| ".cm-searchMatch": { | | ".cm-searchMatch": { |
| outline: "1px solid var(--accent-dark-color)", | | outline: "1px solid var(--accent-dark-color)", |
| backgroundColor: "var(--divider-dark-color)", | | backgroundColor: "var(--divider-dark-color)", |
|
| | borderRadius: "2px", |
| }, | | }, |
| ".cm-selectionMatch": { | | ".cm-selectionMatch": { |
| outline: "1px solid var(--accent-dark-color)", | | outline: "1px solid var(--accent-dark-color)", |
| backgroundColor: "var(--divider-light-color)", | | backgroundColor: "var(--divider-light-color)", |
|
| | borderRadius: "2px", |
| }, | | }, |
| ".cm-matchingBracket, .cm-nonmatchingBracket": { | | ".cm-matchingBracket, .cm-nonmatchingBracket": { |
| backgroundColor: "var(--divider-color)", | | backgroundColor: "var(--divider-color)", |
| outline: "1px solid var(--accent-dark-color)", | | outline: "1px solid var(--accent-dark-color)", |
|
| | borderRadius: "2px", |
| }, | | }, |
| ".cm-gutters": { | | ".cm-gutters": { |
| fontFamily: "var(--font-mono)", | | fontFamily: "var(--font-mono)", |
| backgroundColor: "var(--primary-color)", | | backgroundColor: "var(--primary-color)", |
| borderColor: "var(--divider-light-color)", | | borderColor: "var(--divider-light-color)", |
| }, | | }, |
| ".cm-lineNumbers": { | | ".cm-lineNumbers": { |
| minWidth: "3em", | | minWidth: "3em", |
| color: "var(--secondary-light-color)", | | color: "var(--secondary-light-color)", |
| }, | | }, |
| | |
| skipping to change at line 146 | | skipping to change at line 170 |
|---|
| ".cm-scroller::-webkit-scrollbar": { | | ".cm-scroller::-webkit-scrollbar": { |
| display: "none", | | display: "none", |
| }, | | }, |
| ".cm-foldPlaceholder": { | | ".cm-foldPlaceholder": { |
| backgroundColor: "var(--divider-light-color)", | | backgroundColor: "var(--divider-light-color)", |
| color: "var(--secondary-dark-color)", | | color: "var(--secondary-dark-color)", |
| borderColor: "var(--divider-dark-color)", | | borderColor: "var(--divider-dark-color)", |
| }, | | }, |
| }) | | }) |
| | |
|
| | export const inputTheme = EditorView.theme({ |
| | "&": { |
| | fontSize: "var(--font-size-body)", |
| | height: "100%", |
| | width: "100%", |
| | flex: "1", |
| | }, |
| | ".cm-content": { |
| | caretColor: "var(--secondary-dark-color)", |
| | fontFamily: "var(--font-sans)", |
| | color: "var(--secondary-dark-color)", |
| | backgroundColor: "transparent", |
| | }, |
| | ".cm-cursor": { |
| | borderColor: "var(--secondary-color)", |
| | }, |
| | ".cm-widgetBuffer": { |
| | position: "absolute", |
| | }, |
| | ".cm-selectionBackground": { |
| | backgroundColor: "var(--accent-dark-color)", |
| | color: "var(--accent-contrast-color)", |
| | borderRadius: "2px", |
| | }, |
| | ".cm-panels": { |
| | backgroundColor: "var(--primary-light-color)", |
| | color: "var(--secondary-light-color)", |
| | }, |
| | ".cm-panels.cm-panels-top": { |
| | borderBottom: "1px solid var(--divider-light-color)", |
| | }, |
| | ".cm-panels.cm-panels-bottom": { |
| | borderTop: "1px solid var(--divider-light-color)", |
| | }, |
| | ".cm-search": { |
| | display: "flex", |
| | alignItems: "center", |
| | flexWrap: "nowrap", |
| | flexShrink: 0, |
| | overflow: "auto", |
| | }, |
| | ".cm-search label": { |
| | display: "inline-flex", |
| | alignItems: "center", |
| | }, |
| | ".cm-textfield": { |
| | backgroundColor: "var(--primary-dark-color)", |
| | color: "var(--secondary-dark-color)", |
| | borderColor: "var(--divider-light-color)", |
| | borderRadius: "4px", |
| | }, |
| | ".cm-button": { |
| | backgroundColor: "var(--primary-dark-color)", |
| | color: "var(--secondary-dark-color)", |
| | backgroundImage: "none", |
| | border: "none", |
| | borderRadius: "4px", |
| | }, |
| | ".cm-completionLabel": { |
| | color: "var(--secondary-color)", |
| | }, |
| | ".cm-tooltip": { |
| | backgroundColor: "var(--primary-dark-color)", |
| | color: "var(--secondary-light-color)", |
| | border: "none", |
| | borderRadius: "4px", |
| | }, |
| | ".cm-tooltip-arrow:after": { |
| | borderColor: "transparent !important", |
| | }, |
| | ".cm-tooltip-arrow:before": { |
| | borderColor: "transparent !important", |
| | }, |
| | ".cm-tooltip.cm-tooltip-autocomplete > ul": { |
| | fontFamily: "var(--font-mono)", |
| | }, |
| | ".cm-tooltip-autocomplete ul li[aria-selected]": { |
| | backgroundColor: "var(--accent-dark-color)", |
| | color: "var(--accent-contrast-color)", |
| | }, |
| | ".cm-tooltip-autocomplete ul li[aria-selected] .cm-completionLabel": { |
| | color: "var(--accent-contrast-color)", |
| | }, |
| | ".cm-activeLine": { backgroundColor: "transparent" }, |
| | ".cm-searchMatch": { |
| | outline: "1px solid var(--accent-dark-color)", |
| | backgroundColor: "var(--divider-dark-color)", |
| | borderRadius: "2px", |
| | }, |
| | ".cm-selectionMatch": { |
| | outline: "1px solid var(--accent-dark-color)", |
| | backgroundColor: "var(--divider-light-color)", |
| | borderRadius: "2px", |
| | }, |
| | ".cm-matchingBracket, .cm-nonmatchingBracket": { |
| | backgroundColor: "var(--divider-color)", |
| | outline: "1px solid var(--accent-dark-color)", |
| | borderRadius: "2px", |
| | }, |
| | ".cm-gutters": { |
| | fontFamily: "var(--font-mono)", |
| | backgroundColor: "var(--primary-color)", |
| | borderColor: "var(--divider-light-color)", |
| | }, |
| | ".cm-lineNumbers": { |
| | minWidth: "3em", |
| | color: "var(--secondary-light-color)", |
| | }, |
| | ".cm-foldGutter": { |
| | minWidth: "2em", |
| | color: "var(--secondary-light-color)", |
| | }, |
| | ".cm-foldGutter .cm-gutterElement": { |
| | textAlign: "center", |
| | }, |
| | ".cm-line": { |
| | paddingLeft: "1rem", |
| | paddingRight: "1rem", |
| | paddingTop: "0.2rem", |
| | paddingBottom: "0.2rem", |
| | }, |
| | ".cm-activeLineGutter": { |
| | backgroundColor: "transparent", |
| | }, |
| | ".cm-scroller::-webkit-scrollbar": { |
| | display: "none", |
| | }, |
| | ".cm-foldPlaceholder": { |
| | backgroundColor: "var(--divider-light-color)", |
| | color: "var(--secondary-dark-color)", |
| | borderColor: "var(--divider-dark-color)", |
| | }, |
| | }) |
| | |
| const editorTypeColor = "var(--editor-type-color)" | | const editorTypeColor = "var(--editor-type-color)" |
| const editorNameColor = "var(--editor-name-color)" | | const editorNameColor = "var(--editor-name-color)" |
| const editorOperatorColor = "var(--editor-operator-color)" | | const editorOperatorColor = "var(--editor-operator-color)" |
| const editorInvalidColor = "var(--editor-invalid-color)" | | const editorInvalidColor = "var(--editor-invalid-color)" |
| const editorSeparatorColor = "var(--editor-separator-color)" | | const editorSeparatorColor = "var(--editor-separator-color)" |
| const editorMetaColor = "var(--editor-meta-color)" | | const editorMetaColor = "var(--editor-meta-color)" |
| const editorVariableColor = "var(--editor-variable-color)" | | const editorVariableColor = "var(--editor-variable-color)" |
| const editorLinkColor = "var(--editor-link-color)" | | const editorLinkColor = "var(--editor-link-color)" |
| const editorProcessColor = "var(--editor-process-color)" | | const editorProcessColor = "var(--editor-process-color)" |
| const editorConstantColor = "var(--editor-constant-color)" | | const editorConstantColor = "var(--editor-constant-color)" |
| | |
| skipping to change at line 224 | | skipping to change at line 382 |
|---|
| | |
| export const basicSetup: Extension = [ | | export const basicSetup: Extension = [ |
| lineNumbers(), | | lineNumbers(), |
| highlightActiveLineGutter(), | | highlightActiveLineGutter(), |
| highlightSpecialChars(), | | highlightSpecialChars(), |
| history(), | | history(), |
| foldGutter({ | | foldGutter({ |
| openText: "▾", | | openText: "▾", |
| closedText: "▸", | | closedText: "▸", |
| }), | | }), |
|
| | drawSelection(), |
| | dropCursor(), |
| EditorState.allowMultipleSelections.of(true), | | EditorState.allowMultipleSelections.of(true), |
| indentOnInput(), | | indentOnInput(), |
|
| defaultHighlightStyle.fallback, | | syntaxHighlighting(baseHighlightStyle), |
| | syntaxHighlighting(defaultHighlightStyle, { fallback: true }), |
| bracketMatching(), | | bracketMatching(), |
| closeBrackets(), | | closeBrackets(), |
| autocompletion(), | | autocompletion(), |
| rectangularSelection(), | | rectangularSelection(), |
|
| | crosshairCursor(), |
| highlightActiveLine(), | | highlightActiveLine(), |
| highlightSelectionMatches(), | | highlightSelectionMatches(), |
|
| searchConfig({ | | |
| top: true, | | |
| }), | | |
| keymap.of([ | | keymap.of([ |
| ...closeBracketsKeymap, | | ...closeBracketsKeymap, |
| ...defaultKeymap, | | ...defaultKeymap, |
| ...searchKeymap, | | ...searchKeymap, |
| ...historyKeymap, | | ...historyKeymap, |
| ...foldKeymap, | | ...foldKeymap, |
|
| ...commentKeymap, | | |
| ...completionKeymap, | | ...completionKeymap, |
| ...lintKeymap, | | ...lintKeymap, |
| ]), | | ]), |
|
| | search({ |
| | top: true, |
| | }), |
| ] | | ] |
| | | |
| End of changes. 25 change blocks. |
|---|
| 27 lines changed or deleted | | 188 lines changed or added |
|---|
"Fossies" - the Fresh Open Source Software Archive 