#7517 dark theme fixes and improvements (#7529)

* #7517 plot improvements and fixes * #7517 add missing base styles * #7517 wip - remove unnecessary Data grid border - dark style for table tooltip - dark fieldset styles * #7517 change current and selected cell color in table * #7517 fix dark combobox styles * #7517 fix dark combobox styles * #7517 change table selection and border colors * #7517 date picker dark theme * #7517 refactor spark spinner - move styles from View to .scss file * #7517 make spark spinner lighter when in dark theme * #7517 make unique highlighter work when using dark theme
twosigma · Jun 14, 2018 · 4530d88 · 4530d88
1 parent 6a7de99
commit 4530d88
Show file tree

Hide file tree

Showing 7 changed files with 331 additions and 130 deletions.
diff --git a/js/lab/src/theme/static/base.css b/js/lab/src/theme/static/base.css
@@ -0,0 +1,94 @@
+/*
+ *  Copyright 2017 TWO SIGMA OPEN SOURCE, LLC
+ *
+ *  Licensed under the Apache License, Version 2.0 (the "License");
+ *  you may not use this file except in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *         http://www.apache.org/licenses/LICENSE-2.0
+ *
+ *  Unless required by applicable law or agreed to in writing, software
+ *  distributed under the License is distributed on an "AS IS" BASIS,
+ *  WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ *  See the License for the specific language governing permissions and
+ *  limitations under the License.
+ */
+
+.widget-text input[type="password"] {
+  box-sizing: border-box;
+  border: var(--jp-widgets-input-border-width) solid var(--jp-widgets-input-border-color);
+  background-color: var(--jp-widgets-input-background-color);
+  color: var(--jp-widgets-input-color);
+  font-size: var(--jp-widgets-font-size);
+  padding: var(--jp-widgets-input-padding) calc( var(--jp-widgets-input-padding) * 2 );
+  flex-grow: 1;
+  min-width: 0;
+  flex-shrink: 1;
+  outline: none !important;
+  height: var(--jp-widgets-inline-height);
+  line-height: var(--jp-widgets-inline-height);
+}
+
+.widget-text input[type="password"]:focus {
+  border-color: var(--jp-widgets-input-focus-border-color);
+}
+
+
+.widget-select-multiple select {
+  border: var(--jp-widgets-input-border-width) solid var(--jp-widgets-input-border-color);
+  background-color: var(--jp-widgets-input-background-color);
+  color: var(--jp-widgets-input-color);
+  font-size: var(--jp-widgets-font-size);
+}
+
+.widget-select select:focus,
+.widget-select-multiple select:focus {
+  border-color: var(--jp-widgets-input-focus-border-color);
+}
+
+.easyform-combobox-input {
+  box-sizing: border-box;
+  border: var(--jp-widgets-input-border-width) solid var(--jp-widgets-input-border-color) !important;
+  background-color: var(--jp-widgets-input-background-color);
+  color: var(--jp-widgets-input-color);
+  font-size: var(--jp-widgets-font-size);
+  padding: var(--jp-widgets-input-padding) calc( var(--jp-widgets-input-padding) * 2 );
+  outline: none !important;
+  height: calc(var(--jp-widgets-inline-height) + 2px);
+  line-height: var(--jp-widgets-inline-height);
+}
+
+.easyform-combobox-toggle {
+  border-color: var(--jp-widgets-input-border-color);
+  background-color: var(--jp-widgets-input-background-color);
+}
+.easyform-combobox-toggle:focus,
+.easyform-combobox-toggle:active,
+.easyform-combobox-toggle:hover {
+  border-color: var(--jp-widgets-input-focus-border-color);
+  background-color: var(--jp-widgets-input-background-color);
+}
+
+.beaker-easyform-container .datepicker-container.flatpickr input[type="text"] {
+  box-sizing: border-box;
+  border: var(--jp-widgets-input-border-width) solid var(--jp-widgets-input-border-color);
+  background-color: var(--jp-widgets-input-background-color);
+  color: var(--jp-widgets-input-color);
+  font-size: var(--jp-widgets-font-size);
+  padding: var(--jp-widgets-input-padding) calc( var(--jp-widgets-input-padding) * 2 );
+  outline: none !important;
+  height: var(--jp-widgets-inline-height);
+  line-height: var(--jp-widgets-inline-height);
+  border-right-width: 0;
+}
+
+.beaker-easyform-container .datepicker-container.flatpickr .date-picker-button {
+  border-color: var(--jp-widgets-input-border-color);
+  background-color: var(--jp-widgets-input-background-color);
+}
+.beaker-easyform-container .datepicker-container.flatpickr .date-picker-button:focus,
+.beaker-easyform-container .datepicker-container.flatpickr .date-picker-button:active,
+.beaker-easyform-container .datepicker-container.flatpickr .date-picker-button:hover {
+  border-color: var(--jp-widgets-input-focus-border-color);
+  outline: none !important;
+}
diff --git a/js/lab/src/theme/static/dark.css b/js/lab/src/theme/static/dark.css
@@ -15,6 +15,7 @@
  */
 
 @import './fonts.css';
+@import './base.css';
 
 body {
   background-color: var(--jp-layout-color3);
@@ -27,23 +28,23 @@ pre {
 
 .plot-plotcontainer,
 .combplot-plotcontainer {
-  background-color: var(--jp-layout-color2);
-  fill: var(--jp-content-font-color2);
+  background-color: var(--jp-layout-color0);
+  fill: var(--jp-content-font-color0);
 }
 
 .plot-coverbox,
 .combplot-plotcoverbox {
-  fill: var(--jp-layout-color2);
+  fill: var(--jp-layout-color0);
 }
 
 .plot-title {
-  color: var(--jp-content-font-color2);
+  color: var(--jp-content-font-color0);
 }
 
 .plot-legend {
-  background-color: var(--jp-layout-color2);
-  color: var(--jp-content-font-color2);
-  border-color: var(--jp-border-color2);
+  background-color: var(--jp-layout-color0);
+  color: var(--jp-content-font-color0);
+  border-color: var(--jp-border-color0);
 }
 
 .plot-gridline-base,
@@ -52,6 +53,11 @@ pre {
   stroke: var(--jp-border-color0);
 }
 
+.plot-tooltip {
+  background-color: var(--jp-layout-color1);
+  color: var(--jp-content-font-color1);
+}
+
 #beakerx-tree-widget {
   color: var(--jp-content-font-color1);
 }
@@ -116,8 +122,9 @@ pre {
 }
 
 .p-DataGrid {
-  border-color: var(--jp-border-color2);
+  border-color: transparent;
 }
+
 .p-DataGrid-viewport {
   border-color: var(--jp-border-color2);
 }
@@ -144,6 +151,12 @@ pre {
   border-color: var(--jp-border-color2) !important;
 }
 
+.p-DataGrid-tooltip {
+  background-color: var(--jp-layout-color1);
+  color: var(--jp-content-font-color1);
+  border-color: var(--jp-border-color1);
+}
+
 .p-DataGrid-scrollCorner {
   background-color: var(--jp-layout-color0);
   border-color: var(--jp-border-color2);
@@ -197,3 +210,86 @@ pre {
   fill: var(--jp-content-font-color2);
   stroke: var(--jp-content-font-color2);
 }
+
+.beaker-fieldset {
+  border-color: var(--jp-border-color2);
+}
+
+.beaker-fieldset legend {
+  color: var(--jp-content-font-color0);
+}
+
+.flatpickr-calendar {
+  background-color: var(--jp-layout-color2);
+  color: var(--jp-content-font-color2);
+  border-color: var(--jp-border-color2);
+  -webkit-box-shadow: 1px 0 0 var(--jp-border-color2), -1px 0 0 var(--jp-border-color2), 0 1px 0 var(--jp-border-color2), 0 -1px 0 var(--jp-border-color2), 0 3px 13px rgba(0,0,0,0.08);
+  box-shadow: 1px 0 0 var(--jp-border-color2), -1px 0 0 var(--jp-border-color2), 0 1px 0 var(--jp-border-color2), 0 -1px 0 var(--jp-border-color2), 0 3px 13px rgba(0,0,0,0.08);
+}
+
+.flatpickr-calendar.multiMonth .flatpickr-days .dayContainer:nth-child(n+2) .flatpickr-day.inRange:nth-child(7n+1) {
+  -webkit-box-shadow: -2px 0 0 var(--jp-border-color2), 5px 0 0 var(--jp-border-color2);
+  box-shadow: -2px 0 0 var(--jp-border-color2), 5px 0 0 var(--jp-border-color2);
+}
+.flatpickr-calendar.showTimeInput.hasTime .flatpickr-time {
+  border-top: 1px solid var(--jp-border-color2);
+}
+.flatpickr-calendar.arrowTop:before {
+  border-bottom-color: var(--jp-border-color2);
+}
+.flatpickr-calendar.arrowTop:after {
+  border-bottom-color: var(--jp-border-color2);
+}
+.flatpickr-calendar.arrowBottom:before {
+  border-top-color: var(--jp-border-color2);
+}
+.flatpickr-calendar.arrowBottom:after {
+  border-top-color: var(--jp-border-color2);
+}
+.flatpickr-months .flatpickr-month {
+  color: rgba(255,255,255,0.9);
+  fill: rgba(255,255,255,0.9);
+}
+.flatpickr-months .flatpickr-prev-month,
+.flatpickr-months .flatpickr-next-month {
+  color: rgba(255,255,255,0.9);
+  fill: rgba(255,255,255,0.9);
+}
+
+.flatpickr-day {
+  color: rgba(255,255,255,0.9);
+}
+
+.flatpickr-day.inRange,
+.flatpickr-day.prevMonthDay.inRange,
+.flatpickr-day.nextMonthDay.inRange,
+.flatpickr-day.today.inRange,
+.flatpickr-day.prevMonthDay.today.inRange,
+.flatpickr-day.nextMonthDay.today.inRange,
+.flatpickr-day:hover,
+.flatpickr-day.prevMonthDay:hover,
+.flatpickr-day.nextMonthDay:hover,
+.flatpickr-day:focus,
+.flatpickr-day.prevMonthDay:focus,
+.flatpickr-day.nextMonthDay:focus {
+  background-color: var(--jp-layout-color3);
+  border-color: var(--jp-layout-color3);
+}
+
+.flatpickr-day.disabled,
+.flatpickr-day.disabled:hover,
+.flatpickr-day.prevMonthDay,
+.flatpickr-day.nextMonthDay,
+.flatpickr-day.notAllowed,
+.flatpickr-day.notAllowed.prevMonthDay,
+.flatpickr-day.notAllowed.nextMonthDay {
+  color: rgba(255,255,255,0.3);
+}
+
+span.flatpickr-weekday {
+  color: rgba(255,255,255,0.54);
+}
+
+.lds-spinner div {
+  background-color: #2196F3;
+}
diff --git a/js/lab/src/theme/static/light.css b/js/lab/src/theme/static/light.css
@@ -14,4 +14,5 @@
  *  limitations under the License.
  */
 
-@import './fonts.css';
+@import './fonts.css';
+@import './base.css';
diff --git a/js/notebook/src/BeakerXThemeHelper.ts b/js/notebook/src/BeakerXThemeHelper.ts
@@ -46,11 +46,11 @@ export default class BeakerXThemeHelper {
   }
 
   public static get FOCUSED_CELL_BACKGROUND(): string {
-    return this.isDark ? 'rgb(99, 99, 99)' : 'rgb(200, 200, 200)';
+    return this.isDark ? '#66bb6a' : '#c8c8c8';
   }
 
   public static get SELECTED_CELL_BACKGROUND(): string {
-    return this.isDark ? '#4f4126' : '#B0BED9';
+    return this.isDark ? '#2196F3' : '#B0BED9';
   }
 
   public static get HIGHLIGHTED_CELL_BACKGROUND_EVEN(): string {
@@ -61,14 +61,23 @@ export default class BeakerXThemeHelper {
     return this.isDark ? 'rgb(26, 26, 26)' : 'rgb(249, 249, 249)';
   }
 
+  public  static get MIN_LIGHTNESS_VALUE(): number {
+    return this.isDark ? 15 : 35;
+  }
+
+  public  static get MIN_SATURATION_VALUE(): number {
+    return this.isDark ? 15 : 35;
+  }
+
   private static getDarkStyle(): DataGrid.IStyle {
     return {
     ...DataGrid.defaultStyle,
       voidColor: '#636363',
       backgroundColor: '#212121',
-      headerBackgroundColor: '#212121',
+      headerBackgroundColor: '#252525',
       rowBackgroundColor: i => i % 2 === 0 ? '#424242' : '',
-      gridLineColor: '#111111'
+      gridLineColor: '#626262',
+      headerGridLineColor: '#626262',
     };
   }