"Fossies" - the Fresh Open Source Software Archive  

Source code changes of the file "packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts" between
hoppscotch-2.2.1.tar.gz and hoppscotch-3.0.0.tar.gz

About: Hoppscotch 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

Home  |  About  |  Features  |  All  |  Newest  |  Dox  |  Diffs  |  RSS Feeds  |  Screenshots  |  Comments  |  Imprint  |  Privacy  |  HTTP(S)