From 7de8e6be5ea366b1d4ee93f590df84547255511b Mon Sep 17 00:00:00 2001 From: liyasthomas Date: Tue, 9 Nov 2021 22:26:53 +0530 Subject: [PATCH] refactor: updated editot theme colors --- .../hoppscotch-app/assets/scss/themes.scss | 10 +- .../helpers/editor/themes/baseTheme.ts | 116 +++++++++--------- 2 files changed, 62 insertions(+), 64 deletions(-) diff --git a/packages/hoppscotch-app/assets/scss/themes.scss b/packages/hoppscotch-app/assets/scss/themes.scss index b5262593f..9b12f5927 100644 --- a/packages/hoppscotch-app/assets/scss/themes.scss +++ b/packages/hoppscotch-app/assets/scss/themes.scss @@ -54,35 +54,35 @@ @mixin dark-editor-theme { --editor-type-color: theme("colors.gray.800"); - --editor-name-color: theme("colors.gray.600"); + --editor-name-color: theme("colors.blue.500"); --editor-operator-color: theme("colors.gray.600"); --editor-invalid-color: theme("colors.red.500"); --editor-separator-color: theme("colors.gray.500"); --editor-meta-color: theme("colors.gray.500"); --editor-variable-color: theme("colors.gray.500"); --editor-link-color: theme("colors.blue.500"); - --editor-process-color: theme("colors.blue.500"); + --editor-process-color: theme("colors.gray.400"); --editor-constant-color: theme("colors.blue.500"); --editor-keyword-color: theme("colors.blue.500"); } @mixin light-editor-theme { --editor-type-color: theme("colors.gray.800"); - --editor-name-color: theme("colors.gray.600"); + --editor-name-color: theme("colors.red.600"); --editor-operator-color: theme("colors.gray.600"); --editor-invalid-color: theme("colors.red.500"); --editor-separator-color: theme("colors.gray.500"); --editor-meta-color: theme("colors.gray.500"); --editor-variable-color: theme("colors.gray.500"); --editor-link-color: theme("colors.blue.500"); - --editor-process-color: theme("colors.blue.500"); + --editor-process-color: theme("colors.blue.600"); --editor-constant-color: theme("colors.blue.500"); --editor-keyword-color: theme("colors.blue.500"); } @mixin black-editor-theme { --editor-type-color: theme("colors.gray.800"); - --editor-name-color: theme("colors.gray.600"); + --editor-name-color: theme("colors.gray.400"); --editor-operator-color: theme("colors.gray.600"); --editor-invalid-color: theme("colors.red.500"); --editor-separator-color: theme("colors.gray.500"); diff --git a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts index e92bf0168..c1f5b15e2 100644 --- a/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts +++ b/packages/hoppscotch-app/helpers/editor/themes/baseTheme.ts @@ -2,66 +2,64 @@ import { EditorView } from "@codemirror/view" import { HighlightStyle, tags as t } from "@codemirror/highlight" import { foldGutter } from "@codemirror/fold" -export const baseTheme = EditorView.theme( - { - "&": { - fontSize: "var(--body-font-size)", - }, - ".cm-content": { - caretColor: "var(--secondary-light-color)", - fontFamily: "var(--font-mono)", - backgroundColor: "var(--primary-color)", - }, - "&.cm-focused .cm-cursor": { - borderLeftColor: "var(--secondary-light-color)", - }, - "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": - { backgroundColor: "var(--primary-light-color)" }, - ".cm-panels": { - backgroundColor: "var(--primary-dark-color)", - color: "var(--secondary-light-color)", - }, - ".cm-panels.cm-panels-top": { borderBottom: "2px solid black" }, - ".cm-panels.cm-panels-bottom": { borderTop: "2px solid black" }, - - ".cm-activeLine": { backgroundColor: "var(--primary-light-color)" }, - ".cm-searchMatch": { - backgroundColor: "var(--accent-light-color)", - outline: "1px solid var(--accent-dark-color)", - }, - ".cm-selectionMatch": { backgroundColor: "#aafe661a" }, - "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": { - backgroundColor: "#bad0f847", - outline: "1px solid #515a6b", - }, - ".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: "0.5em", - paddingRight: "0.5em", - }, - ".cm-activeLineGutter": { - backgroundColor: "var(--primary-dark-color)", - }, +export const baseTheme = EditorView.theme({ + "&": { + fontSize: "var(--body-font-size)", }, - { - dark: !!"var(--editor-dark-mode)", - } -) + ".cm-content": { + caretColor: "var(--secondary-light-color)", + fontFamily: "var(--font-mono)", + backgroundColor: "var(--primary-color)", + }, + "&.cm-focused .cm-cursor": { + borderLeftColor: "var(--secondary-light-color)", + }, + "&.cm-focused .cm-selectionBackground, .cm-selectionBackground, .cm-content ::selection": + { backgroundColor: "var(--primary-light-color)" }, + ".cm-panels": { + backgroundColor: "var(--primary-dark-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-activeLine": { backgroundColor: "var(--primary-light-color)" }, + ".cm-searchMatch": { + backgroundColor: "var(--accent-light-color)", + outline: "1px solid var(--accent-dark-color)", + }, + ".cm-selectionMatch": { backgroundColor: "var(--accent-color)" }, + "&.cm-focused .cm-matchingBracket, &.cm-focused .cm-nonmatchingBracket": { + backgroundColor: "var(--accent-dark-color)", + outline: "1px solid var(--accent-dark-color)", + }, + ".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: "0.5em", + paddingRight: "0.5em", + }, + ".cm-activeLineGutter": { + backgroundColor: "var(--primary-dark-color)", + }, +}) const editorTypeColor = "var(--editor-type-color)" const editorNameColor = "var(--editor-name-color)"