(enh) improve default theme accessibility (#3402)

* first pass at accessibility report in checkTheme
* resolve CSS color names when necessary
* (enh) default Dark theme is WCAG AAA wrt contrast
* (enh) improve accessibility of default theme

CHANGES.md

@@ -1,4 +1,11 @@
-## Version 11.3.2 (most likely)
+## Version 11.4 (most likely)
+
+Themes:
+
+- `Default` is now much closer WCAG AA (contrast) (#3402) [Josh Goebel]
+- `Dark` now meets WCAG AA (contrast) (#3402) [Josh Goebel]
+
+These changes should be for the better and should not be super noticeable but if you're super picky about your colors you may want to intervene here or copy over the older themes from 11.3 or prior.
 
 Grammars:
 

package.json

@@ -65,6 +65,7 @@
     "colors": "^1.1.2",
     "commander": "8.2",
     "css": "^3.0.0",
+    "css-color-names": "^1.0.1",
     "deep-freeze-es6": "^1.4.1",
     "del": "^6.0.0",
     "dependency-resolver": "^2.0.1",
@@ -84,6 +85,7 @@
     "should": "^13.2.3",
     "terser": "^5.7.0",
     "tiny-worker": "^2.3.0",
-    "typescript": "^4.4.4"
+    "typescript": "^4.4.4",
+    "wcag-contrast": "^3.0.0"
   }
 }

src/styles/dark.css

@@ -6,7 +6,7 @@ Dark style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Or
 
 .hljs {
   color: #ddd;
-  background: #444;
+  background: #303030;
 }
 
 .hljs-keyword,
@@ -41,7 +41,7 @@ Dark style from softwaremaniacs.org (c) Ivan Sagalaev <Maniac@SoftwareManiacs.Or
 .hljs-quote,
 .hljs-deletion,
 .hljs-meta {
-  color: #777;
+  color: #979797;
 }
 
 .hljs-keyword,

src/styles/default.css

@@ -26,7 +26,7 @@ code.hljs {
 /* end baseline CSS */
 
 .hljs {
-  background: #F0F0F0;
+  background: #F3F3F3;
   color: #444;
 }
 
@@ -43,7 +43,7 @@ code.hljs {
 .hljs-params {}
 
 .hljs-comment {
-  color: #888888;
+  color: #697070;
 }
 .hljs-tag,
 .hljs-punctuation {
@@ -94,13 +94,13 @@ code.hljs {
 .hljs-selector-attr,
 .hljs-operator,
 .hljs-selector-pseudo {
-  color: #BC6060;
+  color: #ab5656;
 }
 
 /* Language color: hue: 90; */
 
 .hljs-literal {
-  color: #78A960;
+  color: #695;
 }
 
 .hljs-built_in,
@@ -118,7 +118,7 @@ code.hljs {
 }
 
 .hljs-meta .hljs-string {
-  color: #4d99bf;
+  color: #38a;
 }
 
 

tools/checkTheme.js

@@ -2,6 +2,9 @@
 
 const fs = require("fs");
 const css = require("css");
+const wcagContrast = require("wcag-contrast");
+const Table = require('cli-table');
+const csscolors = require('css-color-names');
 require("colors");
 
 const CODE = {
@@ -184,6 +187,79 @@ function check_group(group, rules) {
   }
 }
 
+const round2 = (x) => Math.round(x*100)/100;
+
+class CSSRule {
+  constructor(rule, body) {
+    this.rule = rule;
+    if (rule.declarations) {
+      this.bg = rule.declarations.find(x => x.property =="background")?.value;
+      this.fg = rule.declarations.find(x => x.property =="color")?.value;
+
+      if (this.bg) {
+        this.bg = csscolors[this.bg] || this.bg;
+      }
+      if (this.fg) {
+        this.fg = csscolors[this.fg] || this.fg;
+      }
+
+      // inherit from body if we're missing fg or bg
+      if (this.hasColor) {
+        if (!this.bg) this.bg = body.background;
+        if (!this.fg) this.fg = body.foreground;
+      }
+    }
+  }
+  get background() {
+    return this.bg
+  }
+
+  get foreground() {
+    return this.fg
+  }
+  get hasColor() {
+    if (!this.rule.declarations) return false;
+    return this.fg || this.bg;
+  }
+  toString() {
+    return ` ${this.foreground} on ${this.background}`
+  }
+
+  contrastRatio() {
+    if (!this.foreground) return "unknown (no fg)"
+    if (!this.background) return "unknown (no bg)"
+    return round2(wcagContrast.hex(this.foreground, this.background));
+  }
+}
+
+function contrast_report(rules) {
+  console.log("Accessibility Report".yellow);
+
+  var hljs = rules.find (x => x.selectors && x.selectors.includes(".hljs"));
+  var body = new CSSRule(hljs);
+  const table = new Table({
+    chars: {'mid': '', 'left-mid': '', 'mid-mid': '', 'right-mid': ''},
+    head: ['ratio', 'selector', 'fg', 'bg'],
+    colWidths: [7, 40, 10, 10],
+    style: {
+      head: ['grey']
+    }
+  });
+
+  rules.forEach(rule => {
+    var color = new CSSRule(rule, body);
+    if (!color.hasColor) return;
+    table.push([
+      color.contrastRatio(),
+      rule.selectors,
+      color.foreground,
+      color.background
+    ])
+    // console.log(r.selectors[0], color.contrastRatio(), color.toString());
+  })
+  console.log(table.toString())
+}
+
 function validate(data) {
   const rules = data.stylesheet.rules;
 
@@ -195,6 +271,8 @@ function validate(data) {
   check_group(CODE, rules);
   check_group(OTHER, rules);
   check_group(HIGH_FIDELITY, rules);
+
+  contrast_report(rules);
 }
 
 process.argv.shift();