Color contrast (#908)

mdn · Oct 3, 2022 · b9f5252 · b9f5252
1 parent 9dbe31b
commit b9f5252
Show file tree

Hide file tree

Showing 3 changed files with 39 additions and 19 deletions.
diff --git 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
@@ -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
@@ -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"