#6688 dark theme (#7478)

* #6687 make improve fonts ui option work in lab * #6688 menus in plot and data grid * #7493 fix TableDisplay missing in Lab * #6688 fix colors in DataGrid after sorting, move selected background color to theme helper * #6688 fix test * #6688 fix spark styles * #6688 fix * #6688 fix plot text item color * #6688 fix ui icons * #6688 CS * #6688 fix
twosigma · Jun 12, 2018 · fe75cc7 · fe75cc7
1 parent ab2a24d
commit fe75cc7
Show file tree

Hide file tree

Showing 9 changed files with 72 additions and 12 deletions.
diff --git a/js/lab/src/theme/static/dark.css b/js/lab/src/theme/static/dark.css
@@ -121,6 +121,14 @@ pre {
 .p-DataGrid-viewport {
   border-color: var(--jp-border-color2);
 }
+.p-DataGrid-viewport input[type="text"] {
+  background-color: var(--jp-layout-color1);
+  color: var(--jp-content-font-color1);
+  border-color: var(--jp-border-color2);
+}
+.input-clear span {
+  color: var(--jp-content-font-color1);
+}
 
 .p-DataGrid-scrollBar {
   border-color: var(--jp-border-color2) !important;
@@ -162,4 +170,30 @@ pre {
 
 .bx-button[class*="icon"]  {
   border-color: var(--jp-border-color2);
-}
+}
+
+.bko-table-menu {
+  background-color: var(--jp-layout-color0);
+}
+
+.bko-table-menu .p-Menu-content .p-Menu-item {
+  color: var(--jp-ui-font-color0);
+}
+
+.bko-table-menu .p-Menu-content .p-Menu-item:hover {
+  background-color: var(--jp-layout-color2);
+  color: var(--jp-ui-font-color0);
+}
+
+.p-Menu-item.p-mod-active {
+  background-color: var(--jp-layout-color2);
+}
+
+.bko-table-menu .p-Menu-content [data-type="submenu"] > .p-Menu-itemSubmenuIcon:after {
+  color: var(--jp-ui-font-color0);
+}
+
+.text-line-style {
+  fill: var(--jp-content-font-color2);
+  stroke: var(--jp-content-font-color2);
+}
diff --git a/js/lab/src/theme/static/fonts.css b/js/lab/src/theme/static/fonts.css
@@ -68,7 +68,7 @@ div.output_text {
   font-family: "Lato", Helvetica, sans-serif;
 }
 
-.improveFonts .jp-RenderedText pre {
+improveFonts .jp-RenderedText pre {
   font-family: "Roboto Mono", monospace, sans-serif;
 }
 

diff --git a/js/notebook/src/BeakerXThemeHelper.ts b/js/notebook/src/BeakerXThemeHelper.ts
@@ -49,6 +49,18 @@ export default class BeakerXThemeHelper {
     return this.isDark ? 'rgb(99, 99, 99)' : 'rgb(200, 200, 200)';
   }
 
+  public static get SELECTED_CELL_BACKGROUND(): string {
+    return this.isDark ? '#4f4126' : '#B0BED9';
+  }
+
+  public static get HIGHLIGHTED_CELL_BACKGROUND_EVEN(): string {
+    return this.isDark ? 'rgb(34, 34, 34)' : 'rgb(241, 241, 241)';
+  }
+
+  public  static get HIGHLIGHTED_CELL_BACKGROUND_ODD(): string {
+    return this.isDark ? 'rgb(26, 26, 26)' : 'rgb(249, 249, 249)';
+  }
+
   private static getDarkStyle(): DataGrid.IStyle {
     return {
     ...DataGrid.defaultStyle,

diff --git a/js/notebook/src/plot/plotConverter.js b/js/notebook/src/plot/plotConverter.js
@@ -707,14 +707,19 @@ define([
           newmodel.data.push(item);
         }
       }
+
+      var isDark = document.body.classList.contains('bx-dark-theme');
+      var mtext_color =  isDark ? "white" : "black";
+      var mtext_opacity = isDark ? 0.7 : 1;
+
       if (model.texts != null) {
         for (var i = 0; i < model.texts.length; i++) {
           var mtext = model.texts[i];
           var item = {
             "type" : "text",
 
-            "color" : mtext.color != null ? "#" + mtext.color.substr(3) : "black",
-            "color_opacity" : mtext.color != null ? parseInt(mtext.color.substr(1,2), 16) / 255 : 1,
+            "color" : mtext.color != null ? "#" + mtext.color.substr(3) : mtext_color,
+            "color_opacity" : mtext.color != null ? parseInt(mtext.color.substr(1,2), 16) / 255 : mtext_opacity,
             "show_pointer" : mtext.show_pointer,
             "pointer_angle" : mtext.pointer_angle,
             "size" : mtext.size,

diff --git a/js/notebook/src/shared/style/beakerx.scss b/js/notebook/src/shared/style/beakerx.scss
@@ -185,6 +185,13 @@
   }
 }
 
+.bx-dark-theme {
+  .ui-icon,
+  .ui-widget-content .ui-icon {
+    background-image: url("~jquery-ui/themes/base/images/ui-icons_ffffff_256x240.png");
+  }
+}
+
 @media (min-width: 1200px) {
   .container.toolbar {
     width: 100%;

diff --git a/js/notebook/src/shared/style/spark.scss b/js/notebook/src/shared/style/spark.scss
@@ -17,8 +17,8 @@
 @import "bxvariables";
 
 .label {
-  display: inline;
-  padding: .2em .6em .3em;
+  display: inline-block;
+  padding: .3em .6em;
   font-size: 75%;
   font-weight: bold;
   line-height: 1;

diff --git a/js/notebook/src/tableDisplay/dataGrid/cell/CellSelectionManager.ts b/js/notebook/src/tableDisplay/dataGrid/cell/CellSelectionManager.ts
@@ -18,14 +18,14 @@ import {CellRenderer} from "@phosphor/datagrid";
 import ICellConfig = CellRenderer.ICellConfig;
 import {ICellData} from "../interface/ICell";
 import {BeakerXDataGrid} from "../BeakerXDataGrid";
+import BeakerXThemeHelper from "../../../BeakerXThemeHelper";
 
 export interface IRangeCells {
   startCell: ICellData,
   endCell: ICellData
 }
 
 export default class CellSelectionManager {
-  selectedCellColor = '#B0BED9';
   startCellData: ICellData|null;
   endCellData: ICellData|null;
   enabled: boolean;
@@ -154,7 +154,7 @@ export default class CellSelectionManager {
       return '';
     }
 
-    return this.isSelected(config) ? this.selectedCellColor : '';
+    return this.isSelected(config) ? BeakerXThemeHelper.SELECTED_CELL_BACKGROUND : '';
   }
 
   handleMouseDown(event: MouseEvent) {

diff --git a/js/notebook/src/tableDisplay/dataGrid/highlighter/SortHighlighter.ts b/js/notebook/src/tableDisplay/dataGrid/highlighter/SortHighlighter.ts
@@ -18,10 +18,9 @@ import IHihglighterState, { HIGHLIGHTER_STYLE } from "../interface/IHighlighterS
 import DataGridColumn from "../column/DataGridColumn";
 import Highlighter from "./Highlighter";
 import {CellRenderer} from "@phosphor/datagrid";
+import BeakerXThemeHelper from "../../../BeakerXThemeHelper";
 
 export default class SortHighlighter extends Highlighter {
-  oddRowColor = 'rgb(249, 249, 249)';
-  evenRowColor = 'rgb(241, 241, 241)';
 
   constructor(column: DataGridColumn, state: IHihglighterState) {
     super(column, state);
@@ -30,6 +29,8 @@ export default class SortHighlighter extends Highlighter {
   }
 
   getBackgroundColor(config: CellRenderer.ICellConfig) {
-    return config.row % 2 === 0 ? this.evenRowColor : this.oddRowColor;
+    return config.row % 2 === 0 ?
+      BeakerXThemeHelper.HIGHLIGHTED_CELL_BACKGROUND_EVEN :
+      BeakerXThemeHelper.HIGHLIGHTED_CELL_BACKGROUND_ODD;
   }
 }
diff --git a/js/notebook/test/src/tableDisplay/dataGrid/cell/CellSelectionManager.spec.ts b/js/notebook/test/src/tableDisplay/dataGrid/cell/CellSelectionManager.spec.ts
@@ -23,6 +23,7 @@ import cellConfigMock from "../mock/cellConfigMock";
 import cellDataMock from "../mock/cellDataMock";
 import createStore from "@beakerx/tableDisplay/dataGrid/store/BeakerXDataStore";
 import {COLUMN_TYPES} from "@beakerx/tableDisplay/dataGrid/column/enums";
+import BeakerXThemeHelper from "@beakerx/BeakerXThemeHelper";
 
 describe('CellSelectionManager', () => {
   let dataGrid;
@@ -115,7 +116,7 @@ describe('CellSelectionManager', () => {
     expect(cellSelectionManager).to.have.property('getBackgroundColor');
     expect(cellSelectionManager.getBackgroundColor).to.be.a('Function');
 
-    expect(cellSelectionManager.getBackgroundColor(cellConfigMock)).to.equal(cellSelectionManager.selectedCellColor);
+    expect(cellSelectionManager.getBackgroundColor(cellConfigMock)).to.equal(BeakerXThemeHelper.SELECTED_CELL_BACKGROUND);
     expect(cellSelectionManager.getBackgroundColor({ ...cellConfigMock, column: 4 })).to.equal('');
   });