fix dark mode completer contrast (#8)

gt-coar · Feb 19, 2021 · 09937b7 · 09937b7
1 parent 57713ef
commit 09937b7
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 22 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,11 +1,18 @@
 # CHANGELOG
 
+## [0.2.2]
+
+- improves dark mode contrast on some interactive features ([#7])
+
+[0.2.2]: https://pypi.org/project/jupyterlab-gt-coar-theme/0.2.2
+[#7]: https://github.com/gt-coar/jupyterlab-gt-coar-theme/issues/7
+
 ## [0.2.1]
 
 - fixes toggle switch spacing when browser is zoomed ([#5])
 - adds custom favicons ([#6])
 
-[0.2.1]: https://pypi.org/project/jupyterlab-gt-coar-theme/0.2.0
+[0.2.1]: https://pypi.org/project/jupyterlab-gt-coar-theme/0.2.1
 [#5]: https://github.com/gt-coar/jupyterlab-gt-coar-theme/issues/3
 [#6]: https://github.com/gt-coar/jupyterlab-gt-coar-theme/pull/6
 

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@gt-coar/jupyterlab-theme",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "description": "an unofficial Georgia Tech theme for JupyterLab",
   "dependencies": {
     "@fontsource/roboto": "~4.1.0",

diff --git a/style/brand.css b/style/brand.css
@@ -71,6 +71,9 @@
   --gt-font-secondary: 'Roboto Slab', var(--gt-font-fallback);
   --gt-font-mono: 'Roboto Mono', var(--jp-code-font-family-default);
 
+  /* unicode for content */
+  --gt-chevron: '\276f';
+
   /* thwg */
   --thwg: #ba0c2f;
 }
diff --git a/style/dark.css b/style/dark.css
@@ -11,14 +11,6 @@
   --jp-inverse-layout-color3: var(--jp-brand-color1);
   --jp-warn-color0: var(--gt-tertiary-horizon);
   --jp-icon-contrast-color0: var(--jp-brand-color1);
-  --jp-content-line-height: 2;
-  --jp-content-font-family: var(--gt-font-primary);
-  --jp-ui-font-family: var(--gt-font-primary);
-  --jp-code-font-family: var(--gt-font-mono);
-  --jp-ui-font-size1: 15px;
-  --jp-ui-font-size0: 14px;
-  --jp-content-font-size1: 15px;
-  --jp-content-font-size5: 32px;
 
   /* ui */
   --jp-input-box-shadow: inset 0 0 2px var(--jp-brand-color0);
@@ -44,11 +36,11 @@
   /* content */
   --gtc-header-color: var(--gt-gold);
   --gtc-widgets-label-color: var(--jp-brand-color1);
-  --gtc-running-color: var(--gt-blue-link-hover);
+  --gtc-running-color: var(--jp-brand-color1);
 }
 
 body[data-jp-theme-name*='GT COAR'][data-jp-theme-light='false'] {
-  background-color: var(--gt-black);
+  background-color: var(--jp-layout-color0);
 }
 
 /* tabs */
@@ -76,7 +68,7 @@ body[data-jp-theme-name*='GT COAR'][data-jp-theme-light='false'] {
 [data-jp-theme-name*='GT COAR'][data-jp-theme-light='false']
   button.jp-mod-styled.jp-mod-accept:active {
   background-color: var(--jp-brand-color1);
-  color: var(--gt-black);
+  color: var(--jp-layout-color0);
 }
 
 /* menu */
@@ -87,14 +79,14 @@ body[data-jp-theme-name*='GT COAR'][data-jp-theme-light='false'] {
 [data-jp-theme-name*='GT COAR'][data-jp-theme-light='false']
   .lm-MenuBar-item.lm-mod-active {
   background-color: var(--jp-brand-color1);
-  color: var(--gt-black);
+  color: var(--jp-layout-color0);
 }
 
 [data-jp-theme-name*='GT COAR'][data-jp-theme-light='false']
   .lm-MenuBar.lm-mod-active
   .lm-MenuBar-item.lm-mod-active {
   background-color: var(--jp-brand-color1);
-  color: var(--gt-black);
+  color: var(--jp-layout-color0);
   border-color: transparent;
 }
 
@@ -111,3 +103,10 @@ body[data-jp-theme-name*='GT COAR'][data-jp-theme-light='false'] {
 [data-jp-theme-name*='GT COAR'][data-jp-theme-light='false'] .jp-InputArea-editor {
   border: 0;
 }
+
+/* completer */
+[data-jp-theme-name*='GT COAR'][data-jp-theme-light='false']
+  .jp-Completer-item.jp-mod-active {
+  color: var(--jp-layout-color0);
+  font-weight: 700;
+}
diff --git a/style/index.css b/style/index.css
@@ -14,10 +14,18 @@
   --jp-content-font-family: var(--gt-font-primary);
   --jp-ui-font-family: var(--gt-font-primary);
   --jp-code-font-family: var(--gt-font-mono);
-  --jp-ui-font-size1: 15px;
   --jp-ui-font-size0: 14px;
+  --jp-ui-font-size1: 15px;
+  --jp-ui-font-size2: 1.2em;
+  --jp-ui-font-size3: 1.5em;
+  --jp-ui-font-size4: 1.9em;
+  --jp-ui-font-size5: 2.2em;
+  --jp-content-font-size0: 14px;
   --jp-content-font-size1: 15px;
-  --jp-content-font-size5: 32px;
+  --jp-content-font-size2: 1.2em;
+  --jp-content-font-size3: 1.5em;
+  --jp-content-font-size4: 1.9em;
+  --jp-content-font-size5: 2.2em;
 
   /* code */
   --jp-mirror-editor-keyword-color: var(--gt-tertiary-bobby-jones);
@@ -89,7 +97,11 @@
   .jp-FileBrowser-toolbar.jp-Toolbar
   .jp-Toolbar-item:first-child
   .jp-ToolbarButtonComponent
-  .jp-icon3 {
+  .jp-icon3,
+[data-jp-theme-name*='GT COAR']
+  .jp-Completer-item.jp-mod-active
+  .jp-icon-selectable[fill],
+[data-jp-theme-name*='GT COAR'] .jp-Completer-item.jp-mod-active svg path[fill] {
   fill: var(--jp-layout-color0);
 }
 
@@ -121,9 +133,15 @@
   .jp-DirListing-item.jp-mod-running
   .jp-DirListing-itemIcon:before {
   color: var(--gtc-running-color);
-  font-size: var(--jp-ui-font-size2);
-  left: -10px;
-  top: -2px;
+  font-size: var(--jp-ui-font-size0);
+  left: -0.75em !important;
+  content: var(--gt-chevron);
+}
+
+[data-jp-theme-name*='GT COAR']
+  .jp-DirListing-item.jp-mod-running.jp-mod-selected
+  .jp-DirListing-itemIcon:before {
+  color: var(--jp-layout-color0);
 }
 
 /* launcher */
@@ -268,6 +286,50 @@
   background-color: var(--jp-layout-color0);
 }
 
+[data-jp-theme-name*='GT COAR']
+  [data-jp-debugger='true']
+  .CodeMirror-gutter-wrapper::after,
+[data-jp-theme-name*='GT COAR'] .jp-DebuggerEditor-marker::after,
+[data-jp-theme-name*='GT COAR'] .jp-DebuggerBreakpoint-marker::after {
+  color: var(--jp-brand-color1);
+  font-size: var(--jp-ui-font-size0);
+  content: var(--gt-chevron);
+}
+
+[data-jp-theme-name*='GT COAR'] .jp-DebuggerEditor-marker::after {
+  left: -0.6em;
+  position: relative;
+}
+
+[data-jp-theme-name*='GT COAR'] .jp-DebuggerEditor-marker:hover::after {
+  opacity: 0.5;
+}
+
+[data-jp-theme-name*='GT COAR'] .jp-DebuggerEditor-marker,
+[data-jp-theme-name*='GT COAR'] .jp-DebuggerBreakpoint-marker {
+  color: transparent;
+  font-size: var(--jp-ui-font-size0);
+}
+
+[data-jp-theme-name*='GT COAR'] .jp-DebuggerBreakpoints-body {
+  padding: 0;
+}
+
+[data-jp-theme-name*='GT COAR'] .jp-DebuggerBreakpoint {
+  padding: 0.25em 0.25em 0.25em 0;
+  font-family: var(--jp-code-font-family);
+}
+
+[data-jp-theme-name*='GT COAR']
+  .jp-DebuggerSidebar
+  .p-SplitPanel-child:nth-last-child(2) {
+  padding-bottom: 3.25em;
+}
+
+[data-jp-theme-name*='GT COAR'] .jp-DebuggerSources-body {
+  max-height: 100%;
+}
+
 /* html */
 [data-jp-theme-name*='GT COAR'] .jp-RenderedHTMLCommon table {
   font-size: var(--jp-ui-font-size1);
@@ -277,6 +339,37 @@
   border-left: 5px solid var(--gt-tertiary-burger-bowl);
 }
 
+/* json */
+[data-jp-theme-name*='GT COAR'] .jp-RenderedJSON {
+  overflow-y: auto;
+  max-height: 100%;
+}
+
+[data-jp-theme-name*='GT COAR'] .jp-Notebook .jp-RenderedJSON,
+[data-jp-theme-name*='GT COAR'] .jp-CodeConsole .jp-RenderedJSON {
+  max-height: 75vh;
+}
+
+[data-jp-theme-name*='GT COAR'] .jp-RenderedJSON .filter {
+  float: right;
+  margin-right: 0.25em;
+  opacity: 0.75;
+  position: sticky;
+  right: unset;
+}
+
+[data-jp-theme-name*='GT COAR'] .jp-RenderedJSON .filter .bp3-input {
+  background-color: var(--jp-layout-color0) !important;
+  min-width: 10vw;
+  max-width: 33%;
+}
+
+/* moonimation */
+[data-jp-theme-name*='GT COAR'] #jupyterlab-splash .planet {
+  background-color: var(--gt-gold) !important;
+  border: solid 2px var(--gt-navy);
+}
+
 /* widgets */
 [data-jp-theme-name*='GT COAR'] .jupyter-widgets {
   --jp-widgets-font-size: var(--jp-ui-font-size2);

diff --git a/style/light.css b/style/light.css
@@ -29,7 +29,7 @@
   /* content */
   --gtc-header-color: var(--gt-blue);
   --gtc-widgets-label-color: var(--gt-tertiary-tower-patina);
-  --gtc-running-color: var(--gt-buzz-gold);
+  --gtc-running-color: var(--gt-blue);
 }
 
 /* tabs */