Updated dark theme styles.

altair-graphql · Jan 12, 2018 · 4752024 · 4752024
1 parent 7fcf19f
commit 4752024
Show file tree

Hide file tree

Showing 17 changed files with 96 additions and 48 deletions.
diff --git a/src/app/components/doc-viewer/doc-viewer/doc-viewer.component.scss b/src/app/components/doc-viewer/doc-viewer/doc-viewer.component.scss
@@ -4,7 +4,7 @@ app-doc-viewer{
   bottom: 0;
   right: 0;
   width: 40%;
-  background: $white;
+  background: $theme-bg-color;
   z-index: 2;
   transform: translateX(100%);
   transition: all .5s var(--app-easing);
@@ -36,7 +36,7 @@ app-doc-viewer{
   left: 0;
   right: 0;
   bottom: 0;
-  background: rgba($white, .8);
+  background: rgba($theme-bg-color, .8);
   z-index: 5;
   img{
       vertical-align: middle;
@@ -51,7 +51,7 @@ app-doc-viewer{
 .doc-viewer-close{
     float: right;
     font-size: 25px;
-    color: $black;
+    color: $theme-font-color;
     cursor: pointer;
 }
 .doc-viewer-back-link{
@@ -92,7 +92,7 @@ app-doc-viewer{
     font-size: 14px;
     padding: 5px 0;
     border: none;
-    border-bottom: 1px solid $grey;
+    border-bottom: 1px solid $theme-border-color;
     transition: all .3s ease;
     &:focus{
         border-bottom-color: $green;
@@ -108,7 +108,7 @@ app-doc-viewer{
     position: relative;
     padding: 10px 60px 10px 5px;
     border-radius: 3px;
-    color: $black;
+    color: $theme-font-color;
     font-size: 13px;
     transition: all .3s ease;
     cursor: pointer;
@@ -120,7 +120,7 @@ app-doc-viewer{
     font-weight: bold;
 }
 .doc-viewer-search-result-parent-type{
-    color: $dark-grey;
+    color: $theme-off-font-color;
 }
 .doc-viewer-search-result-cat{
     position: absolute;
@@ -153,7 +153,7 @@ app-doc-viewer{
   background: rgba($orange, .1);
 }
 .doc-viewer-search-result-description{
-    color: $dark-grey;
+    color: $theme-off-font-color;
     font-size: 12px;
     font-weight: normal;
 }
@@ -163,7 +163,7 @@ app-doc-viewer{
 }
 .doc-viewer-section-title{
     font-size: 10px;
-    color: $dark-grey;
+    color: $theme-off-font-color;
     text-transform: uppercase;
     font-weight: bold;
     margin-bottom: 10px;
@@ -221,7 +221,7 @@ app-doc-viewer{
 .doc-viewer-item-query-description{
     font-size: 13px;
     // font-style: italic;
-    color: $dark-grey;
+    color: $theme-off-font-color;
 }
 .doc-viewer-item-query-add-btn{
     position: absolute;

diff --git a/src/app/reducers/docs/selectors.ts b/src/app/reducers/docs/selectors.ts
@@ -3,4 +3,4 @@ import { PerWindowState } from '..';
 
 export const getDocsState = (state: PerWindowState) => state.docs;
 export const getShowDocs = createSelector(getDocsState, state => state.showDocs);
-export const getDocsLoading = createSelector(getDocsState, state => state.showDocs);
+export const getDocsLoading = createSelector(getDocsState, state => state.isLoading);
diff --git a/src/scss/_buttons.scss b/src/scss/_buttons.scss
@@ -14,13 +14,13 @@
         vertical-align: middle;
     }
     &:hover{
-        background: $light-grey;
+        background: $theme-off-bg-color;
     }
     &:focus{
         outline: 0;
     }
     &.active-grey{
-        background: $light-grey;
+        background: $theme-off-bg-color;
     }
     &.active-primary{
         background: $green;

diff --git a/src/scss/_clarity.components.scss b/src/scss/_clarity.components.scss
@@ -138,8 +138,15 @@
 
 
 // === *** OVERRIDES *** ===
-.header .branding {
-  min-width: 75px;
+.header {
+  .branding {
+    min-width: 75px;
+  }
+  .header-nav {
+    .nav-link {
+      color: $theme-font-color;
+    }
+  }
 }
 .modal-backdrop {
   background: $theme-bg-color;

diff --git a/src/scss/_codemirror.scss b/src/scss/_codemirror.scss
@@ -1,9 +1,15 @@
+$result-default: $theme-font-color;
+$result-string: $red;
+
 .CodeMirror{
     height: 100%;
     width: 100%;
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
     line-height: 1.4;
     background: transparent;
+    pre {
+      color: $theme-font-color;
+    }
 }
 .CodeMirror-cursor{
     border-left-color: $blue;
@@ -13,18 +19,28 @@
     border: 0;
 }
 .CodeMirror-foldmarker{
-    color: $black;
+    color: $theme-font-color;
     text-shadow: none;
 }
+.CodeMirror-scroll {
+  &::-webkit-scrollbar {
+    width: 15px;
+    height: 15px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: $theme-off-bg-color;
+  }
+}
 .CodeMirror-lint-mark-error{
     // border-bottom: 1px dotted #f00;
 }
 .CodeMirror-lint-tooltip{
-    background: $white;
-    border: 1px solid $light-grey;
+    background: $theme-bg-color;
+    border: 1px solid $theme-off-border-color;
     box-shadow: 0 2px 12px -2px rgba($black, .05);
     border-radius: 5px;
-    color: $black;
+    color: $theme-font-color;
     padding: 10px;
     font-family: sans-serif;
 }
@@ -39,13 +55,13 @@
 }
 .cm-s-default{
     .cm-atom{
-        color: $black;
+        color: $theme-font-color;
     }
     .cm-attribute{
         color: $green;
     }
     .cm-string{
-        color: $black;
+        color: $theme-font-color;
     }
     .cm-property{
         color: $blue;
@@ -79,7 +95,7 @@
     }
 }
 .cm-s-variable-editor{
-    background: $light-grey;
+    background: $theme-off-bg-color;
     .CodeMirror-scroll{
         min-height: 200px;
     }
@@ -95,4 +111,4 @@
     .cm-punctuation{
         color: $result-default;
     }
-}
+}
diff --git a/src/scss/_framework.dark.scss b/src/scss/_framework.dark.scss
@@ -1,4 +1,7 @@
 @import "node_modules/clarity-ui/src/utils/dependencies.clarity";
 
 @import "node_modules/clarity-ui/src/utils/theme.dark.clarity";
+
+@import "themes/dark";
+
 @import "clarity.components";
diff --git a/src/scss/_globals.scss b/src/scss/_globals.scss
@@ -43,10 +43,15 @@ body {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
 }
+input {
+  color: $theme-font-color;
+  background: transparent;
+}
 input[type="text"], input[type="search"], input[type="url"]{
   display: block;
   width: 100%;
   font-family: 'Helvetica Neue', 'Helvetica', Arial, sans-serif;
+
   &:focus{
     outline: 0;
   }

diff --git a/src/scss/_layout.scss b/src/scss/_layout.scss
@@ -27,6 +27,10 @@ app-window {
   background: transparent;
   .nav-link {
     cursor: pointer;
+    &:hover,
+    &.active {
+      background-color: $theme-bg-color;
+    }
   }
   .nav-trigger {
     margin-top: 0;
@@ -39,7 +43,7 @@ app-window {
     margin-right: 0.2rem;
   }
   .nav-divider {
-    border-color: $light-grey;
+    border-color: $theme-off-border-color;
   }
 }
 // Due to the extremely high specificity of clarity UI, this is the only way to style this element :(

diff --git a/src/scss/_variables.scss b/src/scss/_variables.scss
@@ -1,5 +1,10 @@
 $theme: 'light';
-$theme-bg-color: #ffffff !default;
+$theme-bg-color: $white !default;
+$theme-off-bg-color: $light-grey !default;
+$theme-font-color: $black !default;
+$theme-off-font-color: $dark-grey !default;
+$theme-border-color: $grey !default;
+$theme-off-border-color: $light-grey !default;
 
 $clr-header-bgColor: $theme-bg-color;
 $clr_baseline: 24;
@@ -16,9 +21,6 @@ $vertical-nav-bg-color: $theme-bg-color;
 $vertical-nav-item-height: 2rem;
 $vertical-nav-icon-size: 0.8rem;
 
-$result-default: $black;
-$result-string: $red;
-
 $dialog-z-index: 10;
 
 $baseline-size: $clr-baseline-px;

diff --git a/src/scss/components/_dialog.scss b/src/scss/components/_dialog.scss
@@ -1,12 +1,12 @@
 .app-dialog{
-  background: $white;
+  background: $theme-bg-color;
   border-radius: 5px;
   padding: 20px;
   box-shadow: 0 5px 12px 2px rgba($black, .1);
 }
 .app-dialog-header{
   margin-bottom: 30px;
-  color: $dark-grey;
+  color: $theme-font-color;
   font-size: 14px;
 }
 .app-dialog-title{
@@ -40,7 +40,7 @@
   padding: 5px 0;
   line-height: 1;
   border: none;
-  border-bottom: 2px solid $grey;
+  border-bottom: 2px solid $theme-border-color;
   transition: all .3s ease;
   &:focus{
     border-color: $green;

diff --git a/src/scss/components/_editor.scss b/src/scss/components/_editor.scss
@@ -1,7 +1,7 @@
 .query-editor-container {
   height: 100%;
   overflow: auto;
-  background: $white;
+  background: $theme-bg-color;
   border-radius: 4px;
   pre {
     font-family: inherit;
@@ -19,7 +19,7 @@
 .query-result-container {
   height: 100%;
   overflow: auto;
-  background: $light-grey;
+  background: $theme-off-bg-color;
   border-radius: 4px;
   pre {
     font-family: inherit;
@@ -37,7 +37,7 @@
   width: 100%;
   font-size: 24px;
   font-weight: bold;
-  color: $dark-grey;
+  color: $theme-off-font-color;
 }
 .query-result__none-subtext{
   font-size: 16px;
@@ -101,7 +101,7 @@
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  background: $white;
+  background: $theme-bg-color;
   padding: 5px 10px;
   border-radius: 3px;
 }
@@ -110,6 +110,6 @@
   top: 0;
   right: 0;
   padding: 5px 10px;
-  background: $white;
-  color: $dark-grey;
+  background: $theme-bg-color;
+  color: $theme-off-font-color;
 }
diff --git a/src/scss/components/_history.scss b/src/scss/components/_history.scss
@@ -9,11 +9,11 @@
 
   cursor: pointer;
   transition: all .3s ease;
-  background: $white;
+  background: $theme-bg-color;
   border-radius: 4px;
   padding: 10px;
   margin-bottom: 5px;
-  border: 1px solid $light-grey;
+  border: 1px solid $theme-off-border-color;
   &:hover {
     border-color: $primary-color;
   }

diff --git a/src/scss/components/_loader.scss b/src/scss/components/_loader.scss
@@ -9,7 +9,7 @@
     left: 0;
     right: 0;
     bottom: 0;
-    background: rgba($white, .8);
+    background: rgba($theme-bg-color, .8);
     z-index: 50;
     img{
         vertical-align: middle;