From 1a0822c48c48f3c2951cd045b974742586b63ae0 Mon Sep 17 00:00:00 2001 From: Niedziolka Michal Date: Sun, 2 Oct 2022 15:06:14 +0200 Subject: [PATCH] Color contrast --- .../css/editor-libs/codemirror-override.css | 18 +++++++------- editor/css/editor-libs/common.css | 24 +++++++++++++++++-- editor/js/editor-libs/codemirror-editor.js | 16 ++++++------- 3 files changed, 39 insertions(+), 19 deletions(-) diff --git a/editor/css/editor-libs/codemirror-override.css b/editor/css/editor-libs/codemirror-override.css index 53f2b59bb..8b2c9788d 100644 --- a/editor/css/editor-libs/codemirror-override.css +++ b/editor/css/editor-libs/codemirror-override.css @@ -32,11 +32,11 @@ } .cm-variable-2 { - color: #05a; + color: var(--code-token-variable-2); } -.cm-variable-3 { - color: #085; +.cm-pseudo-class { + color: var(--code-token-pseudo-class); } .cm-bracket { @@ -69,14 +69,14 @@ color: var(--code-token-attribute-name); } -.cm-qualifier { - color: #555 +.cm-class-selector { + color: var(--code-token-class-selector) } -.cm-builtin { - color: #30a; +.cm-meta { + color: var(--code-token-meta); } -.cm-meta { - color: #555; +.cm-at-rule { + color: var(--code-token-variable-2); } diff --git a/editor/css/editor-libs/common.css b/editor/css/editor-libs/common.css index 48afe07ee..d2e601d2b 100644 --- a/editor/css/editor-libs/common.css +++ b/editor/css/editor-libs/common.css @@ -63,9 +63,14 @@ --code-token-punctuation: #9e9e9e; --code-token-attribute-name: #d30038; --code-token-attribute-value: #007936; - --code-token-comment: #9e9e9e; + --code-token-comment: #757575; --code-token-default: #1b1b1b; --code-token-selector: #872bff; + --code-token-class-selector: #1c4482; + --code-token-pseudo-class: #085; + --code-token-variable-2: #8c6300; + --code-token-at-rule: #8c6300; + --code-token-meta: #555; --code-background-inline: #f2f1f1; --code-background-block: #f2f1f1; --notecard-link-color: #343434; @@ -170,6 +175,11 @@ --code-token-comment: #9e9e9e; --code-token-default: #fff; --code-token-selector: #bea5ff; + --code-token-class-selector: #5f9eff; + --code-token-pseudo-class: #45bd90; + --code-token-variable-2: #d2a740; + --code-token-at-rule: #d2a740; + --code-token-meta: #555; --code-background-inline: #343434; --code-background-block: #343434; --notecard-link-color: #e2e2e2; @@ -262,9 +272,14 @@ --code-token-punctuation: #9e9e9e; --code-token-attribute-name: #d30038; --code-token-attribute-value: #007936; - --code-token-comment: #9e9e9e; + --code-token-comment: #757575; --code-token-default: #1b1b1b; --code-token-selector: #872bff; + --code-token-class-selector: #1c4482; + --code-token-pseudo-class: #085; + --code-token-variable-2: #8c6300; + --code-token-at-rule: #8c6300; + --code-token-meta: #555; --code-background-inline: #f2f1f1; --code-background-block: #f2f1f1; --notecard-link-color: #343434; @@ -372,6 +387,11 @@ --code-token-comment: #9e9e9e; --code-token-default: #fff; --code-token-selector: #bea5ff; + --code-token-class-selector: #5f9eff; + --code-token-pseudo-class: #45bd90; + --code-token-variable-2: #d2a740; + --code-token-at-rule: #d2a740; + --code-token-meta: #555; --code-background-inline: #343434; --code-background-block: #343434; --notecard-link-color: #e2e2e2; diff --git a/editor/js/editor-libs/codemirror-editor.js b/editor/js/editor-libs/codemirror-editor.js index e33e240b9..e9386457e 100644 --- a/editor/js/editor-libs/codemirror-editor.js +++ b/editor/js/editor-libs/codemirror-editor.js @@ -29,13 +29,13 @@ const TAB_KEY_MAP = {key: "Tab", run: commands.insertTab, shift: commands.indent * Translates CSS tags from [highlight.js](https://github.com/lezer-parser/css/blob/main/src/highlight.js) to code mirror CSS classes. */ const CSS_HIGHLIGHT_STYLE_SPECS = [ - {tag: [tags.definitionKeyword], class: ""},// "import charset namespace keyframes" - {tag: [tags.controlKeyword], class: ""},// "media supports" + {tag: [tags.definitionKeyword], class: "cm-at-rule"},// "import charset namespace keyframes" + {tag: [tags.controlKeyword], class: "cm-at-rule"},// "media supports" {tag: [tags.namespace], class: "cm-tag"},// Identifier of @namespace {tag: [tags.tagName], class: "cm-tag"},// Tag Selector - {tag: [tags.className], class: "cm-qualifier"},// Class Selector - {tag: [tags.constant(tags.className)], class: "cm-variable-3"},// ":valid", "::cue" - {tag: [tags.labelName], class: "cm-builtin"},// Id Selector + {tag: [tags.className], class: "cm-class-selector"},// Class Selector + {tag: [tags.constant(tags.className)], class: "cm-pseudo-class"},// ":valid", "::cue" + {tag: [tags.labelName], class: "cm-string-2"},// Id Selector {tag: [tags.propertyName], class: "cm-property"},// property-name: value; {tag: [tags.attributeName], class: "cm-tag"},// name inside [name="value"] {tag: [tags.number], class: "cm-number"},// NumberLiteral @@ -48,10 +48,10 @@ const CSS_HIGHLIGHT_STYLE_SPECS = [ {tag: [tags.compareOperator], class: ""},// "~=", "^=", "|=", "$=", "*=" {tag: [tags.logicOperator], class: "cm-keyword"},// ">", "~", "+", "and", "or" {tag: [tags.arithmeticOperator], class: ""},// "+", "-" - {tag: [tags.modifier], class: "cm-keyword"},// !important + {tag: [tags.modifier], class: "cm-property"},// !important {tag: [tags.blockComment], class: "cm-comment"},// /* comment */ {tag: [tags.string], class: "cm-string"},// "text" - {tag: [tags.derefOperator], class: "cm-builtin"},// "#" in ID Selector + {tag: [tags.derefOperator], class: "cm-string-2"},// "#" in ID Selector {tag: [tags.separator], class: ""},// ";" , "," {tag: [tags.paren], class: ""},// "(", ")" {tag: [tags.squareBracket], class: ""},// "[", "]" @@ -93,7 +93,7 @@ const JS_HIGHLIGHT_STYLE_SPECS = [ {tag: tags.angleBracket, class: "cm-bracket"}, {tag: tags.unit, class: "cm-number"}, {tag: tags.atom, class: "cm-keyword"}, - {tag: tags.className, class: "cm-qualifier"}, + {tag: tags.className, class: ""}, {tag: tags.null, class: "cm-atom"},// "null" {tag: tags.variableName, class: ""},// variables, "undefined", "NaN", "Infinity" {tag: tags.modifier, class: "cm-property"},// "get", "set", "async", "static"