feat: add atom one-light theme (#499)

components/Meta.js

@@ -4,7 +4,7 @@ import Reset from './style/Reset'
 import Font from './style/Font'
 import Typography from './style/Typography'
 
-const LOCAL_STYLESHEETS = ['one-dark', 'verminal', 'night-owl', 'nord']
+const LOCAL_STYLESHEETS = ['one-light', 'one-dark', 'verminal', 'night-owl', 'nord']
 
 const CDN_STYLESHEETS = THEMES.filter(t => LOCAL_STYLESHEETS.indexOf(t.id) < 0)
 

lib/constants.js

@@ -72,6 +72,10 @@ export const THEMES = [
     id: 'oceanic-next',
     name: 'Oceanic Next'
   },
+  {
+    id: 'one-light',
+    name: 'One Light'
+  },
   {
     id: 'one-dark',
     name: 'One Dark'

static/themes/one-light.css

@@ -0,0 +1,176 @@
+/*
+    Name:       one-light 1.1.1
+    Author:     zhao zhang (http://github.com/loatheb)
+    Original Atom One Light Theme (https://github.com/atom/one-light-ui & https://github.com/atom/one-light-syntax)
+*/
+/* basic */
+.CodeMirror.cm-s-one-light {
+    font-family: Menlo, Consolas, 'DejaVu Sans Mono', monospace;
+    font-weight: 350;
+    font-size: 18px;
+    color: #383a42;
+    background-color: #fafafa;
+}
+
+.cm-s-one-light .CodeMirror-selected {
+    background-color: #c3c3c3;
+}
+
+.cm-s-one-light .CodeMirror-gutter,
+.cm-s-one-light .CodeMirror-gutters {
+    border: none;
+    background-color: #fafafa;
+}
+
+.cm-s-one-light .CodeMirror-linenumber,
+.cm-s-one-light .CodeMirror-linenumbers {
+    color: #929292 !important;
+    background-color: transparent;
+}
+
+.cm-s-one-light .CodeMirror-lines {
+    color: #27292f !important;
+    background-color: transparent;
+}
+
+.cm-s-one-light .CodeMirror-cursor {
+    border-left: 2px solid #526fff !important;
+}
+
+/* basic syntax */
+.cm-s-one-light .cm-header {
+    color: #e45649;
+}
+
+.cm-s-one-light .cm-quote {
+    color: #a0a1a7;
+    font-style: italic;
+}
+
+.cm-s-one-light .cm-negative {
+    color: #e45649;
+}
+
+.cm-s-one-light .cm-positive {
+    color: #e45649;
+}
+
+.cm-s-one-light .cm-strong {
+    color: #986801;
+    font-weight: bold;
+}
+
+.cm-s-one-light .cm-header .cm-strong {
+    color: #986801;
+    font-weight: bold;
+}
+
+.cm-s-one-light .cm-em {
+    color: #a626a4;
+    font-style: italic;
+}
+
+.cm-s-one-light .cm-header .cm-em {
+    color: #a626a4;
+    font-style: italic;
+}
+
+.cm-s-one-light .cm-tag {
+    color: #e45649;
+}
+
+.cm-s-one-light .cm-attribute {
+    color: #d19a66;
+}
+
+.cm-s-one-light .cm-link {
+    color: #4078f2;
+    border-bottom: solid 1px #4078f2;
+}
+
+.cm-s-one-light .cm-string.cm-url {
+    color: #0184bc;
+    border-bottom: solid 1px #0184bc;
+}
+
+.cm-s-one-light .cm-builtin {
+    color: #e45649;
+}
+
+.cm-s-one-light .cm-keyword {
+    color: #a626a4;
+}
+
+.cm-s-one-light .cm-def {
+    color: #4078f2;
+}
+
+.cm-s-one-light .cm-atom {
+    color: #d19a66;
+}
+
+.cm-s-one-light .cm-number {
+    color: #986801;
+}
+
+.cm-s-one-light .cm-property {
+    color: #4078f2;
+}
+
+.cm-s-one-light .cm-qualifier {
+    color: #986801;
+}
+
+.cm-s-one-light .cm-variable {
+    color: #e06c75;
+}
+
+.cm-s-one-light .cm-variable-2 {
+    color: #e45649;
+}
+
+.cm-s-one-light .cm-string {
+    color: #50a14f;
+}
+
+.cm-s-one-light .cm-punctuation {
+    color: #383a42;
+}
+
+.cm-s-one-light .cm-operator {
+    color: #0184bc;
+}
+
+.cm-s-one-light .cm-meta {
+    color: #383a42;
+}
+
+.cm-s-one-light .cm-bracket {
+    color: #383a42;
+}
+
+.cm-s-one-light .cm-comment {
+    color: #a0a1a7;
+    font-style: italic;
+}
+
+.cm-s-one-light .cm-error {
+    color: #e06c75;
+}
+
+/* css syntax corrections */
+.cm-s-one-light .cm-m-css.cm-variable {
+    color: #828997;
+}
+
+.cm-s-one-light .cm-m-css.cm-property {
+    color: #383a42;
+}
+
+.cm-s-one-light .cm-m-css.cm-atom {
+    color: #0184bc;
+}
+
+.cm-s-one-light .cm-m-css.cm-builtin {
+    color: #56b6c2;
+}