From d355ac0d6a88eebdab126f7bc250b89d01259d37 Mon Sep 17 00:00:00 2001 From: Zhi Yin Date: Sat, 15 Dec 2018 02:06:42 -0500 Subject: [PATCH] one js and one css for each theme --- palettes/sepia/palette.html | 24 ------- palettes/sepia/palette.js | 77 -------------------- palettes/sepia/sepia.css | 139 +++++++++++++++++++++++++++++++++++ palettes/sepia/sepia.js | 64 +++++++++++++++++ palettes/sepia/style.css | 140 ------------------------------------ 5 files changed, 203 insertions(+), 241 deletions(-) delete mode 100644 palettes/sepia/palette.html delete mode 100644 palettes/sepia/palette.js create mode 100644 palettes/sepia/sepia.css create mode 100644 palettes/sepia/sepia.js delete mode 100644 palettes/sepia/style.css diff --git a/palettes/sepia/palette.html b/palettes/sepia/palette.html deleted file mode 100644 index d7ca617..0000000 --- a/palettes/sepia/palette.html +++ /dev/null @@ -1,24 +0,0 @@ - - - - - - Sepia Playground - - - - - - -
-

Lines of colors:

-
-
-

Blocks of colors:

-
-
-

Combination of colors:

-
- - - diff --git a/palettes/sepia/palette.js b/palettes/sepia/palette.js deleted file mode 100644 index 8159955..0000000 --- a/palettes/sepia/palette.js +++ /dev/null @@ -1,77 +0,0 @@ -/* -目前问题: -unsure现在alias到了magenta, 考虑改成一个深绿色 -如果找到合适的深绿色, 把extended class也改成深绿色, 因为现在和xxx extend xxx的extend是teal, 颜色相邻。另外extended class和class一个绿一个深绿也很不错 -make lilac color for , refer to google image pho - - - */ -// this file will be used both by node and by browser - -const cssString = require('fs').readFileSync( - require('path').join(__dirname, 'style.css'), - 'utf-8' - ); -const css = require('cssjson').toJSON(cssString); - -console.log(css.children['.grey']); - - - - -const palette = { - silver: '#999c', - neutral: '#8b6d3ccc', - grey: '#8d796b', - black: '#2d2d2d', - pink: '#f08c', - purple: '#909a', - magenta: '#b36d', - maroon: '#c10c', - red: '#f00', - russet: '#c51d', - rosy: '#e53d', - orange: '#f77b00e7', - yellow: '#b79533', - tan: '#96733ccc', - olive: '#890', - green: '#094e', - cyan: '#30a195', - blue: '#08bd', - indigo: '#78b', - teal: '#088', -}; - -const aliases = { - default: palette.grey, - variable: palette.olive, - property: palette.olive, - function: palette.green, - call: palette.cyan, - parameter: palette.indigo, - argument: palette.olive, - module: palette.maroon, - declaration: palette.blue, - tag: palette.blue, - string: palette.yellow, - reserved: palette.teal, - builtIn: palette.teal, - inherited: palette.teal, - storage: palette.teal, - number: palette.orange, - operator: palette.orange, - control: palette.maroon, - flow: palette.black, - constant: palette.purple, - regex: palette.rosy, - keyword: palette.blue, - curveball: palette.indigo, - invalid: palette.red, - deprecated: palette.pink, -} - -try { - module.exports = Object.assign(palette, aliases); -} catch (err) { - // the exports can be used in node, browser doesn't understand it, but browser can use the palette. -} diff --git a/palettes/sepia/sepia.css b/palettes/sepia/sepia.css new file mode 100644 index 0000000..d2639f7 --- /dev/null +++ b/palettes/sepia/sepia.css @@ -0,0 +1,139 @@ +.sepia .grey { + color: #222b; + color: #333b; + color: #334b; + color: #323a; + color: #102a; + color: #3239; + color: #2118; + color: #8d796b; +} + +.sepia .neutral { + color: #8b6d3ccc; +} + +.sepia .silver { + color: #888d; + color: #aaac; + color: #999d; + color: #999c; +} + +.sepia .black { + color: #000; + color: #2d2d2d; +} + +.sepia .pink { + color: #fd45ad; + color: #f7c; + color: #f08c; +} + +.sepia .purple { + color: #9932cc; + color: #93bc; + color: #909a; +} + +.sepia .magenta { + color: #b36e; + color: #bb3366d6; + color: #b36d; +} + +.sepia .maroon { + color: #c10c; +} + +.sepia .red { + color: #f00; +} + +.sepia .russet { + color: #d1681d; + color: #c50e; + color: #c51d; +} + +.sepia .rosy { + color: #da2d2dbb; + color: #eb582cdd; + color: #e52d; + color: #e53d; +} + +.sepia .orange { + color: #f67a00; + color: #f77b00; + color: #f77b00e7; +} + +.sepia .yellow { + color: #b82; + color: #971c; + color: #b93; + color: #a82d; + color: #a83e; + color: #bb9a38; + color: #b69235; + color: #b39330; + color: #b69235f5; + color: #c2a03a; + color: #b79533; +} + +.sepia .tan { + color: #96733ccc; + color: #974c; + color: #963c; +} + +.sepia .olive { + color: #890; +} + +.sepia .green { + color: #094e; +} + +.sepia .cyan { + color: #2a9; + color: #099e; + color: #20a195; + color: #30a195; +} + +.sepia .blue { + color: #07ac; + color: #08ad; + color: #08bd; +} + +.sepia .indigo { + color: #78b; + color: #67a; +} + +.sepia .teal { + color: #088; +} + +body { + padding-top: 30px; + background-color: #fceecc; + background-color: #fec; + font-family: Consolas, monospace; + font-size: 21px; + max-width: 1000px; + margin: auto; +} + +section { + margin-top: 50px; +} + +span { + padding: 3px +} diff --git a/palettes/sepia/sepia.js b/palettes/sepia/sepia.js new file mode 100644 index 0000000..37a273b --- /dev/null +++ b/palettes/sepia/sepia.js @@ -0,0 +1,64 @@ +/* +目前问题: +unsure现在alias到了magenta, 考虑改成一个深绿色 +如果找到合适的深绿色, 把extended class也改成深绿色, 因为现在和xxx extend xxx的extend是teal, 颜色相邻。另外extended class和class一个绿一个深绿也很不错 + + */ +// this file will be used both by node and by browser +const sepia = {}; + +sepia.availableColors = [ + 'silver', + 'neutral', + 'grey', + 'black', + 'pink', + 'purple', + 'magenta', + 'maroon', + 'red', + 'russet', + 'rosy', + 'orange', + 'yellow', + 'tan', + 'olive', + 'green', + 'cyan', + 'blue', + 'indigo', + 'teal' +]; + +sepia.aliases = { + default: 'grey', + variable: 'olive', + property: 'olive', + function: 'green', + call: 'cyan', + parameter: 'indigo', + argument: 'olive', + module: 'maroon', + declaration: 'blue', + tag: 'blue', + string: 'yellow', + reserved: 'teal', + builtIn: 'teal', + inherited: 'teal', + storage: 'teal', + number: 'orange', + operator: 'orange', + control: 'maroon', + flow: 'black', + constant: 'purple', + regex: 'rosy', + keyword: 'blue', + curveball: 'indigo', + invalid: 'red', + deprecated: 'pink', +}; + +// for node only ↓ +if (typeof window === 'undefined') { + module.exports = sepia; +} diff --git a/palettes/sepia/style.css b/palettes/sepia/style.css deleted file mode 100644 index 5995728..0000000 --- a/palettes/sepia/style.css +++ /dev/null @@ -1,140 +0,0 @@ -.grey { - color: #0008; - color: #222b; - color: #333b; - color: #334b; - color: #323a; - color: #102a; - color: #3239; - color: #2118; - color: #8d796b; -} - -.neutral { - color: #8b6d3ccc; -} - -.silver { - color: #888d; - color: #aaac; - color: #999d; - color: #999c; -} - -.black { - color: #000; - color: #2d2d2d; -} - -.pink { - color: #fd45ad; - color: #f7c; - color: #f08c; -} - -.purple { - color: #9932cc; - color: #93bc; - color: #909a; -} - -.magenta { - color: #b36e; - color: #bb3366d6; - color: #b36d; -} - -.maroon { - color: #c10c; -} - -.red { - color: #f00; -} - -.russet { - color: #d1681d; - color: #c50e; - color: #c51d; -} - -.rosy { - color: #da2d2dbb; - color: #eb582cdd; - color: #e52d; - color: #e53d; -} - -.orange { - color: #f67a00; - color: #f77b00; - color: #f77b00e7; -} - -.yellow { - color: #b82; - color: #971c; - color: #b93; - color: #a82d; - color: #a83e; - color: #bb9a38; - color: #b69235; - color: #b39330; - color: #b69235f5; - color: #c2a03a; - color: #b79533; -} - -.tan { - color: #96733ccc; - color: #974c; - color: #963c; -} - -.olive { - color: #890; - color: #8b6d3ccc; -} - -.green { - color: #094e; -} - -.cyan { - color: #2a9; - color: #099e; - color: #20a195; - color: #30a195; -} - -.blue { - color: #07ac; - color: #08ad; - color: #08bd; -} - -.indigo { - color: #78b; - color: #67a; -} -.teal { - color: #088; -} - -body { - padding-top: 30px; - background-color: #fceecc; - background-color: #fec; - font-family: Consolas, monospace; - font-size: 21px; - max-width: 1000px; - margin: auto; -} - -section { - margin-top: 50px; -} - -span { - padding: 3px -}