themes have light / dark / accessibility badges

demo/index.html

@@ -28,9 +28,13 @@ <h2>Language Categories</h2>
     </ul>
     <h2>Themes</h2>
     <ul class="styles">
-      <li><a class="current" href="#default">Default</a></li>
-      <% styles.forEach(({name}) => {%>
-      <li><a href="#<%= name %>"><%= name %></a></li>
+      <% styles.forEach(({name, badges}) => {%>
+      <li>
+        <a <%= name == "Default" ? "class='current'" : "" %> href="#<%= name %>"><%= name %></a>
+        <% badges.forEach((badge) => { %>
+            <span class="badge <%= badge.name.toLowerCase() %>"><%= badge.name %></span>
+        <% }); %>
+      </li>
       <% }); %>
     </ul>
   </aside>

demo/style.css

@@ -103,11 +103,27 @@ aside ul::-webkit-scrollbar-thumb:active {
 }
 
 aside ul a {
-  display: block;
+  /* display: block; */
   padding: 1px 0.5em 1px 1em;
   text-decoration: none;
 }
 
+ul li .badge {
+  display: inline;
+  font-weight:bold;
+  color: white;
+  background:brown;
+  font-size:11px;
+  padding: 2px 5px;
+  border-radius: 5px;
+}
+
+/* badge colors */
+ul li .badge.aa { background: green; }
+ul li .badge.light { background: #ddd; color: #222 }
+ul li .badge.dark { background: #333; color: #eee }
+
+
 aside ul a:focus,
 aside ul a:hover {
   background: #500;
@@ -121,6 +137,7 @@ aside ul a.current:before {
   left: 0;
 }
 
+
 main {
   margin-left: 18em;
   min-width: 36em;

package.json

@@ -84,6 +84,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"
   }
 }

tools/build_browser.js

@@ -14,6 +14,7 @@ const log = (...args) => console.log(...args);
 const { rollupCode } = require("./lib/bundling.js");
 const bundling = require('./lib/bundling.js');
 const Table = require('cli-table');
+const ThemeAnalysis = require('./lib/theme_analysis.js');
 
 const getDefaultHeader = () => ({
   ...require('../package.json'),
@@ -143,8 +144,10 @@ async function renderIndex(languages, minify) {
   const css = await glob("styles/**/*.css", { cwd: "./src" });
   let styles = css
     .map((el) => ({ name: nameForStyle(el), path: el }))
-    .filter((style) => style.name !== "Default");
-  styles = sortByKey(styles, "name");
+    // .filter((style) => style.name !== "Default");
+  styles = sortByKey(styles, "name")
+    .map(x => new ThemeAnalysis(x));
+  styles.unshift(new ThemeAnalysis(styles.find(x => x.name=="Default")));
 
   renderTemplate("./demo/index.html", "./demo/index.html", {
     categories,

tools/checkTheme.js

@@ -2,6 +2,12 @@
 
 const fs = require("fs");
 const css = require("css");
+const wcagContrast = require("wcag-contrast");
+const Table = require('cli-table');
+// const colors = require('colors/safe.js');
+
+
+
 require("colors");
 
 const CODE = {
@@ -184,6 +190,72 @@ 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;
+
+      // 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 +267,8 @@ function validate(data) {
   check_group(CODE, rules);
   check_group(OTHER, rules);
   check_group(HIGH_FIDELITY, rules);
+
+  contrast_report(rules);
 }
 
 process.argv.shift();

tools/lib/theme_analysis.js

@@ -0,0 +1,30 @@
+class Badge {
+  constructor(name) {
+    this.name = name;
+  }
+}
+
+class ThemeAnalysis {
+  constructor(theme) {
+    this.name = theme.name;
+    this.path = theme.path;
+  }
+
+  // TODO: analysis should be better, duh
+  get badges() {
+    const badges = [];
+    if (this.name.match(/Dark/)) {
+      badges.push(new Badge("Dark"));
+    }
+    if (this.name.match(/Light/)) {
+      badges.push(new Badge("Light"));
+    }
+    if (this.name == "Default") {
+      badges.push(new Badge("AA"));
+      badges.push(new Badge("Light"));
+    }
+    return badges;
+  }
+}
+
+module.exports = ThemeAnalysis;