ayu-theme · skybldev · Aug 14, 2022 · Aug 14, 2022
diff --git a/README.md b/README.md
@@ -27,4 +27,6 @@ _This package includes TypeScript definitions._
 
 ### Colors
 
+[View in HTML](https://htmlpreview.github.io/?https://github.com/skybldev/ayu-colors/blob/master/colors.html)
+
 <img width="100%" src="./colors.svg">
diff --git a/colors.html b/colors.html
@@ -0,0 +1,26 @@
+
+<!DOCTYPE html>
+<html>
+  <meta charset="UTF-8">
+  <head>
+    <title>Ayu Colors</title>
+    <style>
+      body { margin: 0px; }
+      * { font: 10px "monospace"; }
+
+      table {
+        border-spacing: 0;
+        width: 100%;
+      }
+
+      td { padding: 0 20px 10px 20px; }
+      th { padding: 20px; }
+
+      div {
+        border-radius: 2px;
+        padding: 3px 40px 3px 5px;
+      }
+    </style>
+  </head>
+  <body><table><th style="background: #FFFFFF; color: #000000">Path</th><th style="background: #f8f9fa; color: #000000">Light</th><th style="background: #1f2430; color: #ffffff">Mirage</th><th style="background: #0b0e14; color: #ffffff">Dark</th><tr><td style="color: #333333">syntax.tag</td><td style="background: #f8f9fa"><div style="color: #000000; background: #55B4D4"> #55B4D4</div></td><td style="background: #1f2430"><div style="color: #000000; background: #5CCFE6"> #5CCFE6</div></td><td style="background: #0b0e14"><div style="color: #000000; background: #39BAE6"> #39BAE6</div></td></tr><tr><td style="color: #333333">syntax.func</td><td style="background: #f8f9fa"><div style="color: #000000; background: #F2AE49"> #F2AE49</div></td><td style="background: #1f2430"><div style="color: #000000; background: #FFD173"> #FFD173</div></td><td style="background: #0b0e14"><div style="color: #000000; background: #FFB454"> #FFB454</div></td></tr><tr><td style="color: #333333">syntax.entity</td><td style="background: #f8f9fa"><div style="color: #000000; background: #399EE6"> #399EE6</div></td><td style="background: #1f2430"><div style="color: #000000; background: #73D0FF"> #73D0FF</div></td><td style="background: #0b0e14"><div style="color: #000000; background: #59C2FF"> #59C2FF</div></td></tr><tr><td style="color: #333333">syntax.string</td><td style="background: #f8f9fa"><div style="color: #000000; background: #86B300"> #86B300</div></td><td style="background: #1f2430"><div style="color: #000000; background: #D5FF80"> #D5FF80</div></td><td style="background: #0b0e14"><div style="color: #000000; background: #AAD94C"> #AAD94C</div></td></tr><tr><td style="color: #333333">syntax.regexp</td><td style="background: #f8f9fa"><div style="color: #000000; background: #4CBF99"> #4CBF99</div></td><td style="background: #1f2430"><div style="color: #000000; background: #95E6CB"> #95E6CB</div></td><td style="background: #0b0e14"><div style="color: #000000; background: #95E6CB"> #95E6CB</div></td></tr><tr><td style="color: #333333">syntax.markup</td><td style="background: #f8f9fa"><div style="color: #000000; background: #F07171"> #F07171</div></td><td style="background: #1f2430"><div style="color: #000000; background: #F28779"> #F28779</div></td><td style="background: #0b0e14"><div style="color: #000000; background: #F07178"> #F07178</div></td></tr><tr><td style="color: #333333">syntax.keyword</td><td style="background: #f8f9fa"><div style="color: #000000; background: #FA8D3E"> #FA8D3E</div></td><td style="background: #1f2430"><div style="color: #000000; background: #FFAD66"> #FFAD66</div></td><td style="background: #0b0e14"><div style="color: #000000; background: #FF8F40"> #FF8F40</div></td></tr><tr><td style="color: #333333">syntax.special</td><td style="background: #f8f9fa"><div style="color: #000000; background: #E6BA7E"> #E6BA7E</div></td><td style="background: #1f2430"><div style="color: #000000; background: #FFDFB3"> #FFDFB3</div></td><td style="background: #0b0e14"><div style="color: #000000; background: #E6B673"> #E6B673</div></td></tr><tr><td style="color: #333333">syntax.comment</td><td style="background: #f8f9fa"><div style="color: #ffffff; background: #787B8099"> #787B8099</div></td><td style="background: #1f2430"><div style="color: #000000; background: #B8CFE680"> #B8CFE680</div></td><td style="background: #0b0e14"><div style="color: #000000; background: #ACB6BF8C"> #ACB6BF8C</div></td></tr><tr><td style="color: #333333">syntax.constant</td><td style="background: #f8f9fa"><div style="color: #000000; background: #A37ACC"> #A37ACC</div></td><td style="background: #1f2430"><div style="color: #000000; background: #DFBFFF"> #DFBFFF</div></td><td style="background: #0b0e14"><div style="color: #000000; background: #D2A6FF"> #D2A6FF</div></td></tr><tr><td style="color: #333333">syntax.operator</td><td style="background: #f8f9fa"><div style="color: #000000; background: #ED9366"> #ED9366</div></td><td style="background: #1f2430"><div style="color: #000000; background: #F29E74"> #F29E74</div></td><td style="background: #0b0e14"><div style="color: #000000; background: #F29668"> #F29668</div></td></tr><tr><td style="color: #333333">vcs.added</td><td style="background: #f8f9fa"><div style="color: #000000; background: #6CBF43"> #6CBF43</div></td><td style="background: #1f2430"><div style="color: #000000; background: #87D96C"> #87D96C</div></td><td style="background: #0b0e14"><div style="color: #000000; background: #7FD962"> #7FD962</div></td></tr><tr><td style="color: #333333">vcs.modified</td><td style="background: #f8f9fa"><div style="color: #000000; background: #478ACC"> #478ACC</div></td><td style="background: #1f2430"><div style="color: #000000; background: #80BFFF"> #80BFFF</div></td><td style="background: #0b0e14"><div style="color: #000000; background: #73B8FF"> #73B8FF</div></td></tr><tr><td style="color: #333333">vcs.removed</td><td style="background: #f8f9fa"><div style="color: #000000; background: #FF7383"> #FF7383</div></td><td style="background: #1f2430"><div style="color: #000000; background: #F27983"> #F27983</div></td><td style="background: #0b0e14"><div style="color: #000000; background: #F26D78"> #F26D78</div></td></tr><tr><td style="color: #333333">editor.fg</td><td style="background: #f8f9fa"><div style="color: #ffffff; background: #5C6166"> #5C6166</div></td><td style="background: #1f2430"><div style="color: #000000; background: #CCCAC2"> #CCCAC2</div></td><td style="background: #0b0e14"><div style="color: #000000; background: #BFBDB6"> #BFBDB6</div></td></tr><tr><td style="color: #333333">editor.bg</td><td style="background: #f8f9fa"><div style="color: #000000; background: #FCFCFC"> #FCFCFC</div></td><td style="background: #1f2430"><div style="color: #ffffff; background: #242936"> #242936</div></td><td style="background: #0b0e14"><div style="color: #ffffff; background: #0D1017"> #0D1017</div></td></tr><tr><td style="color: #333333">editor.line</td><td style="background: #f8f9fa"><div style="color: #000000; background: #8A91991A"> #8A91991A</div></td><td style="background: #1f2430"><div style="color: #ffffff; background: #1A1F29"> #1A1F29</div></td><td style="background: #0b0e14"><div style="color: #ffffff; background: #131721"> #131721</div></td></tr><tr><td style="color: #333333">editor.selection.active</td><td style="background: #f8f9fa"><div style="color: #ffffff; background: #035BD626"> #035BD626</div></td><td style="background: #1f2430"><div style="color: #000000; background: #409FFF40"> #409FFF40</div></td><td style="background: #0b0e14"><div style="color: #000000; background: #409FFF4D"> #409FFF4D</div></td></tr><tr><td style="color: #333333">editor.selection.inactive</td><td style="background: #f8f9fa"><div style="color: #ffffff; background: #035BD612"> #035BD612</div></td><td style="background: #1f2430"><div style="color: #000000; background: #409FFF21"> #409FFF21</div></td><td style="background: #0b0e14"><div style="color: #000000; background: #409FFF21"> #409FFF21</div></td></tr><tr><td style="color: #333333">editor.findMatch.active</td><td style="background: #f8f9fa"><div style="color: #ffffff; background: #9F40FF2B"> #9F40FF2B</div></td><td style="background: #1f2430"><div style="color: #ffffff; background: #695380"> #695380</div></td><td style="background: #0b0e14"><div style="color: #ffffff; background: #6C5980"> #6C5980</div></td></tr><tr><td style="color: #333333">editor.findMatch.inactive</td><td style="background: #f8f9fa"><div style="color: #ffffff; background: #9F40FFCC"> #9F40FFCC</div></td><td style="background: #1f2430"><div style="color: #ffffff; background: #69538066"> #69538066</div></td><td style="background: #0b0e14"><div style="color: #ffffff; background: #6C598066"> #6C598066</div></td></tr><tr><td style="color: #333333">editor.gutter.active</td><td style="background: #f8f9fa"><div style="color: #000000; background: #8A9199CC"> #8A9199CC</div></td><td style="background: #1f2430"><div style="color: #000000; background: #8A9199CC"> #8A9199CC</div></td><td style="background: #0b0e14"><div style="color: #ffffff; background: #6C7380E6"> #6C7380E6</div></td></tr><tr><td style="color: #333333">editor.gutter.normal</td><td style="background: #f8f9fa"><div style="color: #000000; background: #8A919966"> #8A919966</div></td><td style="background: #1f2430"><div style="color: #000000; background: #8A919966"> #8A919966</div></td><td style="background: #0b0e14"><div style="color: #ffffff; background: #6C738099"> #6C738099</div></td></tr><tr><td style="color: #333333">editor.indentGuide.active</td><td style="background: #f8f9fa"><div style="color: #000000; background: #8A919959"> #8A919959</div></td><td style="background: #1f2430"><div style="color: #000000; background: #8A919959"> #8A919959</div></td><td style="background: #0b0e14"><div style="color: #ffffff; background: #6C738080"> #6C738080</div></td></tr><tr><td style="color: #333333">editor.indentGuide.normal</td><td style="background: #f8f9fa"><div style="color: #000000; background: #8A91992E"> #8A91992E</div></td><td style="background: #1f2430"><div style="color: #000000; background: #8A91992E"> #8A91992E</div></td><td style="background: #0b0e14"><div style="color: #ffffff; background: #6C738033"> #6C738033</div></td></tr><tr><td style="color: #333333">ui.fg</td><td style="background: #f8f9fa"><div style="color: #000000; background: #8A9199"> #8A9199</div></td><td style="background: #1f2430"><div style="color: #ffffff; background: #707A8C"> #707A8C</div></td><td style="background: #0b0e14"><div style="color: #ffffff; background: #565B66"> #565B66</div></td></tr><tr><td style="color: #333333">ui.bg</td><td style="background: #f8f9fa"><div style="color: #000000; background: #F8F9FA"> #F8F9FA</div></td><td style="background: #1f2430"><div style="color: #ffffff; background: #1F2430"> #1F2430</div></td><td style="background: #0b0e14"><div style="color: #ffffff; background: #0B0E14"> #0B0E14</div></td></tr><tr><td style="color: #333333">ui.line</td><td style="background: #f8f9fa"><div style="color: #ffffff; background: #6B7D8F1F"> #6B7D8F1F</div></td><td style="background: #1f2430"><div style="color: #ffffff; background: #171B24"> #171B24</div></td><td style="background: #0b0e14"><div style="color: #ffffff; background: #11151C"> #11151C</div></td></tr><tr><td style="color: #333333">ui.selection.active</td><td style="background: #f8f9fa"><div style="color: #ffffff; background: #56728F1F"> #56728F1F</div></td><td style="background: #1f2430"><div style="color: #ffffff; background: #63759926"> #63759926</div></td><td style="background: #0b0e14"><div style="color: #ffffff; background: #47526640"> #47526640</div></td></tr><tr><td style="color: #333333">ui.selection.normal</td><td style="background: #f8f9fa"><div style="color: #ffffff; background: #6B7D8F1F"> #6B7D8F1F</div></td><td style="background: #1f2430"><div style="color: #ffffff; background: #69758C1F"> #69758C1F</div></td><td style="background: #0b0e14"><div style="color: #ffffff; background: #47526633"> #47526633</div></td></tr><tr><td style="color: #333333">ui.panel.bg</td><td style="background: #f8f9fa"><div style="color: #000000; background: #F3F4F5"> #F3F4F5</div></td><td style="background: #1f2430"><div style="color: #ffffff; background: #1C212B"> #1C212B</div></td><td style="background: #0b0e14"><div style="color: #ffffff; background: #0F131A"> #0F131A</div></td></tr><tr><td style="color: #333333">ui.panel.shadow</td><td style="background: #f8f9fa"><div style="color: #ffffff; background: #00000026"> #00000026</div></td><td style="background: #1f2430"><div style="color: #ffffff; background: #12151CB3"> #12151CB3</div></td><td style="background: #0b0e14"><div style="color: #ffffff; background: #00000080"> #00000080</div></td></tr><tr><td style="color: #333333">common.accent</td><td style="background: #f8f9fa"><div style="color: #000000; background: #FFAA33"> #FFAA33</div></td><td style="background: #1f2430"><div style="color: #000000; background: #FFCC66"> #FFCC66</div></td><td style="background: #0b0e14"><div style="color: #000000; background: #E6B450"> #E6B450</div></td></tr><tr><td style="color: #333333">common.error</td><td style="background: #f8f9fa"><div style="color: #000000; background: #E65050"> #E65050</div></td><td style="background: #1f2430"><div style="color: #000000; background: #FF6666"> #FF6666</div></td><td style="background: #0b0e14"><div style="color: #000000; background: #D95757"> #D95757</div></td></tr></table></body>
+</html>
diff --git a/package.json b/package.json
@@ -8,7 +8,8 @@
     "build": "run-s clear-build compile",
     "compile": "tsc --pretty",
     "svg": "node scripts/build-svg.js",
-    "prepublish": "run-s build svg",
+    "html": "node scripts/build-html.js",
+    "prepublish": "run-s build svg html",
     "clear-build": "rimraf dist",
     "start": "run-s build svg test",
     "test": "node dist/__test__"

diff --git a/scripts/build-html.js b/scripts/build-html.js
@@ -0,0 +1,90 @@
+const fs = require("fs");
+const fcolor = require("font-color-contrast");
+
+const colors = require("../dist/colors");
+const { Color } = require("../dist/color");
+
+/**
+ * https://gist.github.com/penguinboy/762197
+ */
+function flattenObject(object) {
+  const toReturn = {};
+  Object.keys(object).forEach((key) => {
+    const element = object[key];
+    if (element instanceof Color) {
+      toReturn[key] = element;
+    } else {
+      const flattened = flattenObject(element);
+      Object.keys(flattened).forEach((nestKey) => {
+        toReturn[`${key}.${nestKey}`] = flattened[nestKey];
+      });
+    }
+  });
+
+  return toReturn;
+}
+
+const dark = flattenObject(colors.dark);
+const light = flattenObject(colors.light);
+const mirage = flattenObject(colors.mirage);
+
+const bgs = ["light", "mirage", "dark"].map((v) => colors[v].ui.bg.hex());
+
+console.dir(bgs);
+
+// Starts it off with the header
+let tableRows = ["Path", "Light", "Mirage", "Dark"]
+  .map((e, i) => {
+    const bg = bgs[i - 1] || "#FFFFFF";
+    const color = fcolor(bg);
+    return `<th style="background: ${bg}; color: ${color}">${e}</th>`;
+  })
+  .join("");
+
+Object.keys(light).forEach((key) => {
+  if (light.hasOwnProperty(key) && light[key] instanceof Color) {
+    let rowContents = `<td style="color: #333333">${key}</td>`;
+
+    [light[key], mirage[key], dark[key]]
+      .map((e, i) => [e, bgs[i]])
+      .forEach(([variant, bg]) => {
+        const color = fcolor(variant.hex());
+        const hex = variant.hex().toUpperCase();
+        rowContents += 
+          `<td style="background: ${bg}">` +
+            `<div style="color: ${color}; background: ${hex}"> ${hex}</div>` +
+          "</td>";
+      });
+
+    tableRows += `<tr>${rowContents}</tr>`;
+  }
+});
+
+const html = `
+<!DOCTYPE html>
+<html>
+  <meta charset="UTF-8">
+  <head>
+    <title>Ayu Colors</title>
+    <style>
+      body { margin: 0px; }
+      * { font: 10px "monospace"; }
+
+      table {
+        border-spacing: 0;
+        width: 100%;
+      }
+
+      td { padding: 0 20px 10px 20px; }
+      th { padding: 20px; }
+
+      div {
+        border-radius: 2px;
+        padding: 3px 40px 3px 5px;
+      }
+    </style>
+  </head>
+  <body><table>${tableRows}</table></body>
+</html>`;
+
+fs.writeFileSync("colors.html".trim(), html, "utf-8");
diff --git a/scripts/build-svg.js b/scripts/build-svg.js
@@ -1,5 +1,4 @@
 const fs = require('fs')
-const isObject = require('is-object')
 const fontColorContrast = require('font-color-contrast')
 
 const colors = require('../dist/colors')