Added SynthWave '84 theme + Text Shadows (#810)

* - Added ability to set optional `text-shadows` on themes.
- Extended `THEMES` to include optional `shadows` setting.
- Added SynthWave '84 theme. See https://github.com/robb0wen/synthwave-vscode

* - Changed ID of `SynthWave-84` theme to `synthwave-84`
- Added synthwave-84 to LOCAL_STYLESHEETS
- Migrated SynthWave-84 theme to `static/themes/synthwave-84.css`
- reverted a few things from 3f9daaf9ecee4561f9fad1bbdb8f38fd58a631c6
  - Reverted global text-shadows
  - Reverted constants.js/themes model changes.

* Update Meta.js

components/Meta.js

@@ -6,7 +6,7 @@ import Font from './style/Font'
 import Typography from './style/Typography'
 
 const HIGHLIGHTS_ONLY = ['shades-of-purple', 'vscode']
-const LOCAL_STYLESHEETS = ['one-light', 'one-dark', 'verminal', 'night-owl', 'nord']
+const LOCAL_STYLESHEETS = ['one-light', 'one-dark', 'verminal', 'night-owl', 'nord', 'synthwave-84']
 const CDN_STYLESHEETS = THEMES.filter(
   t => LOCAL_STYLESHEETS.indexOf(t.id) < 0 && HIGHLIGHTS_ONLY.indexOf(t.id) < 0
 )

lib/constants.js

@@ -452,6 +452,25 @@ export const THEMES = [
       tag: '#93a1a1'
     }
   },
+  {
+    id: 'synthwave-84',
+    name: "SynthWave '84",
+    highlights: {
+      background: '#2b213a',
+      text: '#b6b1b1',
+      variable: '#f92aad',
+      attribute: '#fff5f6',
+      definition: '#fdfdfd',
+      keyword: '#f4eee4',
+      operator: '#f4eee4',
+      property: '#fdfdfd',
+      number: '#f97e72',
+      string: '#ff8b39',
+      comment: '#6d77b3',
+      meta: '#ff8b39',
+      tag: '#f92aad'
+    }
+  },
   {
     id: 'tomorrow-night-bright',
     name: 'Tomorrow Night',

static/themes/synthwave-84.css

@@ -0,0 +1,80 @@
+/*
+    Name:       synthwave-84 1.0.0
+    Author:     Robb Owen (https://github.com/robb0wen)
+    Original SynthWave 84' theme (https://github.com/robb0wen/synthwave-vscode)
+*/
+/* basic */
+.CodeMirror.cm-s-synthwave-84 {
+  font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+  font-weight: 350;
+  font-size: 18px;
+  color: #b6b1b1;
+  background-color: #2b213a;
+}
+.cm-s-synthwave-84 .CodeMirror-selected {
+  background-color: #1f172e !important;
+}
+.cm-s-synthwave-84 .CodeMirror-gutter,
+.cm-s-synthwave-84 .CodeMirror-gutters {
+  border: none;
+  background-color: #011627;
+}
+.cm-s-synthwave-84 .CodeMirror-linenumber,
+.cm-s-synthwave-84 .CodeMirror-linenumbers {
+  color: #6d77b3 !important;
+  background-color: transparent;
+}
+.cm-s-synthwave-84 .CodeMirror-lines {
+  color: #b6b1b1 !important;
+  background-color: transparent;
+}
+.cm-s-synthwave-84 .CodeMirror-cursor {
+  border-left: 2px solid #fa7b73 !important;
+}
+/* addon: edit/machingbrackets.js & addon: edit/matchtags.js */
+.cm-s-synthwave-84 .CodeMirror-matchingbracket,
+.cm-s-synthwave-84 .CodeMirror-matchingtag {
+  border-bottom: 2px solid #c792ea;
+  color: #b6b1b1 !important;
+  background-color: transparent;
+}
+.cm-s-synthwave-84 .CodeMirror-nonmatchingbracket {
+  border-bottom: 2px solid #fa7b73;
+  color: #b6b1b1 !important;
+  background-color: transparent;
+}
+/* addon: fold/foldgutter.js */
+.cm-s-synthwave-84 .CodeMirror-foldmarker,
+.cm-s-synthwave-84 .CodeMirror-foldgutter,
+.cm-s-synthwave-84 .CodeMirror-foldgutter-open,
+.cm-s-synthwave-84 .CodeMirror-foldgutter-folded {
+  border: none;
+  text-shadow: none;
+  color: #5c6370 !important;
+  background-color: transparent;
+}
+
+/* addon: selection/active-line.js */
+.cm-s-synthwave-84 .CodeMirror-activeline-background {background-color: #2b213a;}
+/* basic syntax */
+.cm-s-synthwave-84 .cm-quote {color: #6d77b3;font-style: italic;}
+.cm-s-synthwave-84 .cm-negative {color: #fff5f6;text-shadow:0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75;}
+.cm-s-synthwave-84 .cm-positive {color: #fff5f6;text-shadow:0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75;}
+.cm-s-synthwave-84 .cm-strong {color: #f97e72;font-weight: bold;}
+.cm-s-synthwave-84 .cm-em {color: #f4eee4;font-style: italic;text-shadow:0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575;}
+.cm-s-synthwave-84 .cm-attribute {color: #fff5f6;text-shadow:0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75;}
+.cm-s-synthwave-84 .cm-link {color: #f97e72;border-bottom: solid 1px #f97e72;}
+.cm-s-synthwave-84 .cm-keyword {color: #f4eee4;font-style: italic;text-shadow:0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575;}
+.cm-s-synthwave-84 .cm-def {color: #fdfdfd; text-shadow:0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975;}
+.cm-s-synthwave-84 .cm-atom {color: #f97e72;}
+.cm-s-synthwave-84 .cm-number {color: #f97e72;}
+.cm-s-synthwave-84 .cm-property {color: #fdfdfd;text-shadow:0 0 2px #001716, 0 0 3px #03edf975, 0 0 5px #03edf975, 0 0 8px #03edf975;}
+.cm-s-synthwave-84 .cm-qualifier {color: #f97e72;}
+.cm-s-synthwave-84 .cm-variable {color: #f92aad;text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3;}
+.cm-s-synthwave-84 .cm-variable-2 {color: #f92aad;text-shadow: 0 0 2px #100c0f, 0 0 5px #dc078e33, 0 0 10px #fff3;}
+.cm-s-synthwave-84 .cm-string {color: #ff8b39;}
+.cm-s-synthwave-84 .cm-string-2 {color: #ff8b39;}
+.cm-s-synthwave-84 .cm-operator {color: #f4eee4;text-shadow:0 0 2px #393a33, 0 0 8px #f39f0575, 0 0 2px #f39f0575;}
+.cm-s-synthwave-84 .cm-meta {color: #ff8b39;}
+.cm-s-synthwave-84 .cm-comment {color: #6d77b3;font-style: italic;}
+.cm-s-synthwave-84 .cm-error {color: #fff5f6;text-shadow:0 0 2px #000, 0 0 10px #fc1f2c75, 0 0 5px #fc1f2c75, 0 0 25px #fc1f2c75;}