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
-
-
-
-
-
-
-
-
-
- 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
-}