From 8e64edfb442f54291ac2e43525d74ddf84cb9add Mon Sep 17 00:00:00 2001 From: skybldev Date: Sun, 14 Aug 2022 13:20:17 -0400 Subject: [PATCH 1/2] add HTML render of colors - add HTML render of colors sincce SVG render breaks across devices [scripts/build.html, colors.html] - removed unnecessary import [scripts/build-svg.js] - modified README.md to include link to HTML render - added HTML render to npm scripts [package.json] --- README.md | 2 + colors.html | 26 +++++++++++++ package.json | 3 +- scripts/build-html.js | 90 +++++++++++++++++++++++++++++++++++++++++++ scripts/build-svg.js | 1 - 5 files changed, 120 insertions(+), 2 deletions(-) create mode 100644 colors.html create mode 100644 scripts/build-html.js diff --git a/README.md b/README.md index e4ead5d..f260a8e 100644 --- a/README.md +++ b/README.md @@ -27,4 +27,6 @@ _This package includes TypeScript definitions._ ### Colors +[*View in HTML*]("./colors.html"); + diff --git a/colors.html b/colors.html new file mode 100644 index 0000000..7d38b64 --- /dev/null +++ b/colors.html @@ -0,0 +1,26 @@ + + + + + + Ayu Colors + + +
PathLightMirageDark
syntax.tag
#55B4D4
#5CCFE6
#39BAE6
syntax.func
#F2AE49
#FFD173
#FFB454
syntax.entity
#399EE6
#73D0FF
#59C2FF
syntax.string
#86B300
#D5FF80
#AAD94C
syntax.regexp
#4CBF99
#95E6CB
#95E6CB
syntax.markup
#F07171
#F28779
#F07178
syntax.keyword
#FA8D3E
#FFAD66
#FF8F40
syntax.special
#E6BA7E
#FFDFB3
#E6B673
syntax.comment
#787B8099
#B8CFE680
#ACB6BF8C
syntax.constant
#A37ACC
#DFBFFF
#D2A6FF
syntax.operator
#ED9366
#F29E74
#F29668
vcs.added
#6CBF43
#87D96C
#7FD962
vcs.modified
#478ACC
#80BFFF
#73B8FF
vcs.removed
#FF7383
#F27983
#F26D78
editor.fg
#5C6166
#CCCAC2
#BFBDB6
editor.bg
#FCFCFC
#242936
#0D1017
editor.line
#8A91991A
#1A1F29
#131721
editor.selection.active
#035BD626
#409FFF40
#409FFF4D
editor.selection.inactive
#035BD612
#409FFF21
#409FFF21
editor.findMatch.active
#9F40FF2B
#695380
#6C5980
editor.findMatch.inactive
#9F40FFCC
#69538066
#6C598066
editor.gutter.active
#8A9199CC
#8A9199CC
#6C7380E6
editor.gutter.normal
#8A919966
#8A919966
#6C738099
editor.indentGuide.active
#8A919959
#8A919959
#6C738080
editor.indentGuide.normal
#8A91992E
#8A91992E
#6C738033
ui.fg
#8A9199
#707A8C
#565B66
ui.bg
#F8F9FA
#1F2430
#0B0E14
ui.line
#6B7D8F1F
#171B24
#11151C
ui.selection.active
#56728F1F
#63759926
#47526640
ui.selection.normal
#6B7D8F1F
#69758C1F
#47526633
ui.panel.bg
#F3F4F5
#1C212B
#0F131A
ui.panel.shadow
#00000026
#12151CB3
#00000080
common.accent
#FFAA33
#FFCC66
#E6B450
common.error
#E65050
#FF6666
#D95757
+ \ No newline at end of file diff --git a/package.json b/package.json index a704d44..2f4e077 100644 --- 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 new file mode 100644 index 0000000..0b0db17 --- /dev/null +++ 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 `${e}`; + }) + .join(""); + +Object.keys(light).forEach((key) => { + if (light.hasOwnProperty(key) && light[key] instanceof Color) { + let rowContents = `${key}`; + + [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 += + `` + + `
${hex}
` + + ""; + }); + + tableRows += `${rowContents}`; + } +}); + +const html = ` + + + + + Ayu Colors + + + ${tableRows}
+`; + +fs.writeFileSync("colors.html".trim(), html, "utf-8"); diff --git a/scripts/build-svg.js b/scripts/build-svg.js index 8896cc5..0f13e70 100644 --- 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') From 240e1c1d9e2acdc7f504e231b18e43c9fbccea4c Mon Sep 17 00:00:00 2001 From: Skybbles Date: Sun, 14 Aug 2022 13:32:16 -0400 Subject: [PATCH 2/2] fix README - forgot that HTML doesn't preview directly in GitHub - the link to my repo is temporary and will be changed in the PR --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index f260a8e..c99c5db 100644 --- a/README.md +++ b/README.md @@ -27,6 +27,6 @@ _This package includes TypeScript definitions._ ### Colors -[*View in HTML*]("./colors.html"); +[View in HTML](https://htmlpreview.github.io/?https://github.com/skybldev/ayu-colors/blob/master/colors.html)