From 32818abf9d230800f4126747bff3202a25dbb9b3 Mon Sep 17 00:00:00 2001 From: Travis Cline Date: Sat, 30 Mar 2024 15:09:52 -0700 Subject: [PATCH] theme: hack on dev tools and get the basic dark theme copied in --- hack/.gitignore | 1 + hack/Makefile | 40 ++++++ hack/README.md | 15 ++ hack/requirements.in | 2 + hack/requirements.txt | 275 +++++++++++++++++++++++++++++++++++++ src/index.ts | 7 +- style/index.css | 9 ++ style/variables.css | 310 +++++++++++++++++++++++------------------- 8 files changed, 512 insertions(+), 147 deletions(-) create mode 100644 hack/.gitignore create mode 100644 hack/Makefile create mode 100644 hack/README.md create mode 100644 hack/requirements.in create mode 100644 hack/requirements.txt diff --git a/hack/.gitignore b/hack/.gitignore new file mode 100644 index 0000000..5ceb386 --- /dev/null +++ b/hack/.gitignore @@ -0,0 +1 @@ +venv diff --git a/hack/Makefile b/hack/Makefile new file mode 100644 index 0000000..122ee7f --- /dev/null +++ b/hack/Makefile @@ -0,0 +1,40 @@ +# Makefile for development + +venv: requirements.in ## Create the virtual environment + python3 -m venv venv + venv/bin/pip install pip-tools + venv/bin/pip-compile requirements.in + venv/bin/pip install -r requirements.txt + +.PHONY: run +run: venv ## Run the JupyterLab server + venv/bin/jupyter lab + +.PHONY: dev +dev: venv ## Run the JupyterLab server in watch mode + venv/bin/jlpm watch + +.PHONY: build +build: venv ## Build the JupyterLab extension + venv/bin/jupyter labextension develop .. --overwrite + venv/bin/jlpm build .. --output=../dist + +.PHONY: clean +clean: ## Clean the project + rm -rf venv + + +.PHONY: set-light-theme +set-light-theme: ## Set the light theme + mkdir -p $(HOME)/.jupyter/lab/user-settings/@jupyterlab/apputils-extension + echo '{"theme":"JupyterLab Light"}' > $(HOME)/.jupyter/lab/user-settings/@jupyterlab/apputils-extension/themes.jupyterlab-settings + +.PHONY: set-dark-theme +set-dark-theme: ## Set the dark theme + mkdir -p $(HOME)/.jupyter/lab/user-settings/@jupyterlab/apputils-extension + echo '{"theme":"JupyterLab Dark"}' > $(HOME)/.jupyter/lab/user-settings/@jupyterlab/apputils-extension/themes.jupyterlab-settings + +.PHONY: set-brev-theme +set-brev-theme: ## Set the brev theme + mkdir -p $(HOME)/.jupyter/lab/user-settings/@jupyterlab/apputils-extension + echo '{"theme":"brevmakesjupyterlookbetter"}' > $(HOME)/.jupyter/lab/user-settings/@jupyterlab/apputils-extension/themes.jupyterlab-settings diff --git a/hack/README.md b/hack/README.md new file mode 100644 index 0000000..bb3fcdd --- /dev/null +++ b/hack/README.md @@ -0,0 +1,15 @@ +# hacking on brevmakesjupyterlookbetter + +This directory contains some tools to make working on this codebase easier. + +## Quickstart + +```shell +make dev +``` + +In another terminal: + +```shell +make run +``` diff --git a/hack/requirements.in b/hack/requirements.in new file mode 100644 index 0000000..7f12a4a --- /dev/null +++ b/hack/requirements.in @@ -0,0 +1,2 @@ +jupyterlab +-e .. diff --git a/hack/requirements.txt b/hack/requirements.txt new file mode 100644 index 0000000..9974b18 --- /dev/null +++ b/hack/requirements.txt @@ -0,0 +1,275 @@ +# +# This file is autogenerated by pip-compile with Python 3.12 +# by the following command: +# +# pip-compile requirements.in +# +-e file:///Users/tmc/go/src/github.com/brevdev/brevmakesjupyterlookbetter + # via -r requirements.in +anyio==4.3.0 + # via + # httpx + # jupyter-server +appnope==0.1.4 + # via ipykernel +argon2-cffi==23.1.0 + # via jupyter-server +argon2-cffi-bindings==21.2.0 + # via argon2-cffi +arrow==1.3.0 + # via isoduration +asttokens==2.4.1 + # via stack-data +async-lru==2.0.4 + # via jupyterlab +attrs==23.2.0 + # via + # jsonschema + # referencing +babel==2.14.0 + # via jupyterlab-server +beautifulsoup4==4.12.3 + # via nbconvert +bleach==6.1.0 + # via nbconvert +certifi==2024.2.2 + # via + # httpcore + # httpx + # requests +cffi==1.16.0 + # via argon2-cffi-bindings +charset-normalizer==3.3.2 + # via requests +comm==0.2.2 + # via ipykernel +debugpy==1.8.1 + # via ipykernel +decorator==5.1.1 + # via ipython +defusedxml==0.7.1 + # via nbconvert +executing==2.0.1 + # via stack-data +fastjsonschema==2.19.1 + # via nbformat +fqdn==1.5.1 + # via jsonschema +h11==0.14.0 + # via httpcore +httpcore==1.0.5 + # via httpx +httpx==0.27.0 + # via jupyterlab +idna==3.6 + # via + # anyio + # httpx + # jsonschema + # requests +ipykernel==6.29.4 + # via jupyterlab +ipython==8.22.2 + # via ipykernel +isoduration==20.11.0 + # via jsonschema +jedi==0.19.1 + # via ipython +jinja2==3.1.3 + # via + # jupyter-server + # jupyterlab + # jupyterlab-server + # nbconvert +json5==0.9.24 + # via jupyterlab-server +jsonpointer==2.4 + # via jsonschema +jsonschema[format-nongpl]==4.21.1 + # via + # jupyter-events + # jupyterlab-server + # nbformat +jsonschema-specifications==2023.12.1 + # via jsonschema +jupyter-client==8.6.1 + # via + # ipykernel + # jupyter-server + # nbclient +jupyter-core==5.7.2 + # via + # ipykernel + # jupyter-client + # jupyter-server + # jupyterlab + # nbclient + # nbconvert + # nbformat +jupyter-events==0.10.0 + # via jupyter-server +jupyter-lsp==2.2.4 + # via jupyterlab +jupyter-server==2.13.0 + # via + # jupyter-lsp + # jupyterlab + # jupyterlab-server + # notebook-shim +jupyter-server-terminals==0.5.3 + # via jupyter-server +jupyterlab==4.1.5 + # via -r requirements.in +jupyterlab-pygments==0.3.0 + # via nbconvert +jupyterlab-server==2.25.4 + # via jupyterlab +markupsafe==2.1.5 + # via + # jinja2 + # nbconvert +matplotlib-inline==0.1.6 + # via + # ipykernel + # ipython +mistune==3.0.2 + # via nbconvert +nbclient==0.10.0 + # via nbconvert +nbconvert==7.16.3 + # via jupyter-server +nbformat==5.10.3 + # via + # jupyter-server + # nbclient + # nbconvert +nest-asyncio==1.6.0 + # via ipykernel +notebook-shim==0.2.4 + # via jupyterlab +overrides==7.7.0 + # via jupyter-server +packaging==24.0 + # via + # ipykernel + # jupyter-server + # jupyterlab + # jupyterlab-server + # nbconvert +pandocfilters==1.5.1 + # via nbconvert +parso==0.8.3 + # via jedi +pexpect==4.9.0 + # via ipython +platformdirs==4.2.0 + # via jupyter-core +prometheus-client==0.20.0 + # via jupyter-server +prompt-toolkit==3.0.43 + # via ipython +psutil==5.9.8 + # via ipykernel +ptyprocess==0.7.0 + # via + # pexpect + # terminado +pure-eval==0.2.2 + # via stack-data +pycparser==2.22 + # via cffi +pygments==2.17.2 + # via + # ipython + # nbconvert +python-dateutil==2.9.0.post0 + # via + # arrow + # jupyter-client +python-json-logger==2.0.7 + # via jupyter-events +pyyaml==6.0.1 + # via jupyter-events +pyzmq==25.1.2 + # via + # ipykernel + # jupyter-client + # jupyter-server +referencing==0.34.0 + # via + # jsonschema + # jsonschema-specifications + # jupyter-events +requests==2.31.0 + # via jupyterlab-server +rfc3339-validator==0.1.4 + # via + # jsonschema + # jupyter-events +rfc3986-validator==0.1.1 + # via + # jsonschema + # jupyter-events +rpds-py==0.18.0 + # via + # jsonschema + # referencing +send2trash==1.8.2 + # via jupyter-server +six==1.16.0 + # via + # asttokens + # bleach + # python-dateutil + # rfc3339-validator +sniffio==1.3.1 + # via + # anyio + # httpx +soupsieve==2.5 + # via beautifulsoup4 +stack-data==0.6.3 + # via ipython +terminado==0.18.1 + # via + # jupyter-server + # jupyter-server-terminals +tinycss2==1.2.1 + # via nbconvert +tornado==6.4 + # via + # ipykernel + # jupyter-client + # jupyter-server + # jupyterlab + # terminado +traitlets==5.14.2 + # via + # comm + # ipykernel + # ipython + # jupyter-client + # jupyter-core + # jupyter-events + # jupyter-server + # jupyterlab + # matplotlib-inline + # nbclient + # nbconvert + # nbformat +types-python-dateutil==2.9.0.20240316 + # via arrow +uri-template==1.3.0 + # via jsonschema +urllib3==2.2.1 + # via requests +wcwidth==0.2.13 + # via prompt-toolkit +webcolors==1.13 + # via jsonschema +webencodings==0.5.1 + # via + # bleach + # tinycss2 +websocket-client==1.7.0 + # via jupyter-server diff --git a/src/index.ts b/src/index.ts index 92e40d8..6307c89 100644 --- a/src/index.ts +++ b/src/index.ts @@ -4,7 +4,6 @@ import { } from '@jupyterlab/application'; import { IThemeManager } from '@jupyterlab/apputils'; -import '../style/Jupyter-Dark.css'; /** * Initialization data for the brevmakesjupyterlookbetter extension. @@ -15,14 +14,12 @@ const plugin: JupyterFrontEndPlugin = { autoStart: true, requires: [IThemeManager], activate: (app: JupyterFrontEnd, manager: IThemeManager) => { - console.log( - 'JupyterLab extension brevmakesjupyterlookbetter is activated!' - ); + console.log('🤙🤙🤙'); const style = 'brevmakesjupyterlookbetter/index.css'; manager.register({ name: 'brevmakesjupyterlookbetter', - isLight: true, + isLight: false, load: () => manager.loadCSS(style), unload: () => Promise.resolve(undefined) }); diff --git a/style/index.css b/style/index.css index 1a23ca9..c7dcb83 100644 --- a/style/index.css +++ b/style/index.css @@ -10,3 +10,12 @@ pre { font-size: var(--jp-code-font-size); line-height: var(--jp-code-line-height); } + +/* fix illegible yellow backround in exception stacktrace */ +:where( + .jp-RenderedText[data-mime-type='application/vnd.jupyter.stderr'] + pre + .ansi-yellow-bg + ) { + color: black; +} diff --git a/style/variables.css b/style/variables.css index 68ce29e..bd954fd 100644 --- a/style/variables.css +++ b/style/variables.css @@ -1,29 +1,3 @@ -/* ---------------------------------------------------------------------------- -| Copyright (c) Jupyter Development Team. -| Distributed under the terms of the Modified BSD License. -|--------------------------------------------------------------------------- */ - -/* -The following CSS variables define the main, public API for styling JupyterLab. -These variables should be used by all plugins wherever possible. In other -words, plugins should not define custom colors, sizes, etc unless absolutely -necessary. This enables users to change the visual theme of JupyterLab -by changing these variables. - -Many variables appear in an ordered sequence (0,1,2,3). These sequences -are designed to work well together, so for example, `--jp-border-color1` should -be used with `--jp-layout-color1`. The numbers have the following meanings: - -* 0: super-primary, reserved for special emphasis -* 1: primary, most important under normal situations -* 2: secondary, next most important under normal situations -* 3: tertiary, next most important under normal situations - -Throughout JupyterLab, we are mostly following principles from Google's -Material Design when selecting colors. We are not, however, following -all of MD as it is not optimized for dense, information rich UIs. -*/ - :root { /* Elevation * @@ -33,7 +7,9 @@ all of MD as it is not optimized for dense, information rich UIs. * https://material-components-web.appspot.com/elevation.html */ - --jp-shadow-base-lightness: 0; + /* The dark theme shadows need a bit of work, but this will probably also require work on the core layout + * colors used in the theme as well. */ + --jp-shadow-base-lightness: 32; --jp-shadow-umbra-color: rgba( var(--jp-shadow-base-lightness), var(--jp-shadow-base-lightness), @@ -87,10 +63,11 @@ all of MD as it is not optimized for dense, information rich UIs. */ --jp-border-width: 1px; - --jp-border-color0: var(--md-grey-400); - --jp-border-color1: var(--md-grey-400); - --jp-border-color2: var(--md-grey-300); - --jp-border-color3: var(--md-grey-200); + --jp-border-color0: var(--md-grey-700, #616161); + --jp-border-color1: var(--md-grey-700, #616161); + --jp-border-color2: var(--md-grey-800, #424242); + --jp-border-color3: var(--md-grey-900, #212121); + --jp-inverse-border-color: var(--md-grey-600, #757575); --jp-border-radius: 2px; /* UI Fonts @@ -104,12 +81,13 @@ all of MD as it is not optimized for dense, information rich UIs. */ --jp-ui-font-scale-factor: 1.2; - --jp-ui-font-size0: 0.8333em; + --jp-ui-font-size0: 0.83333em; --jp-ui-font-size1: 13px; /* Base font size */ --jp-ui-font-size2: 1.2em; --jp-ui-font-size3: 1.44em; - --jp-ui-font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', helvetica, - arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol'; + --jp-ui-font-family: system-ui, -apple-system, blinkmacsystemfont, 'Segoe UI', + helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', + 'Segoe UI Symbol'; /* * Use these font colors against the corresponding main layout colors. @@ -117,20 +95,20 @@ all of MD as it is not optimized for dense, information rich UIs. */ /* Defaults use Material Design specification */ - --jp-ui-font-color0: rgba(0, 0, 0, 1); - --jp-ui-font-color1: rgba(0, 0, 0, 0.87); - --jp-ui-font-color2: rgba(0, 0, 0, 0.54); - --jp-ui-font-color3: rgba(0, 0, 0, 0.38); + --jp-ui-font-color0: rgba(255, 255, 255, 1); + --jp-ui-font-color1: rgba(255, 255, 255, 0.87); + --jp-ui-font-color2: rgba(255, 255, 255, 0.54); + --jp-ui-font-color3: rgba(255, 255, 255, 0.38); /* * Use these against the brand/accent/warn/error colors. * These will typically go from light to darker, in both a dark and light theme. */ - --jp-ui-inverse-font-color0: rgba(255, 255, 255, 1); - --jp-ui-inverse-font-color1: rgba(255, 255, 255, 1); - --jp-ui-inverse-font-color2: rgba(255, 255, 255, 0.7); - --jp-ui-inverse-font-color3: rgba(255, 255, 255, 0.5); + --jp-ui-inverse-font-color0: rgba(0, 0, 0, 1); + --jp-ui-inverse-font-color1: rgba(0, 0, 0, 0.8); + --jp-ui-inverse-font-color2: rgba(0, 0, 0, 0.5); + --jp-ui-inverse-font-color3: rgba(0, 0, 0, 0.3); /* Content Fonts * @@ -143,7 +121,7 @@ all of MD as it is not optimized for dense, information rich UIs. --jp-content-line-height: 1.6; --jp-content-font-scale-factor: 1.2; - --jp-content-font-size0: 0.8333em; + --jp-content-font-size0: 0.83333em; --jp-content-font-size1: 14px; /* Base font size */ --jp-content-font-size2: 1.2em; --jp-content-font-size3: 1.44em; @@ -158,14 +136,16 @@ all of MD as it is not optimized for dense, information rich UIs. --jp-content-heading-font-weight: 500; /* Defaults use Material Design specification */ - --jp-content-font-color0: rgba(0, 0, 0, 1); - --jp-content-font-color1: rgba(0, 0, 0, 0.87); - --jp-content-font-color2: rgba(0, 0, 0, 0.54); - --jp-content-font-color3: rgba(0, 0, 0, 0.38); - --jp-content-link-color: var(--md-blue-700); - --jp-content-font-family: -apple-system, blinkmacsystemfont, 'Segoe UI', - helvetica, arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', - 'Segoe UI Symbol'; + --jp-content-font-color0: rgba(255, 255, 255, 1); + --jp-content-font-color1: rgba(255, 255, 255, 1); + --jp-content-font-color2: rgba(255, 255, 255, 0.7); + --jp-content-font-color3: rgba(255, 255, 255, 0.5); + --jp-content-link-color: var(--md-blue-300, #64b5f6); + --jp-content-link-visited-color: var(--md-purple-300, #ba68c8); + --jp-content-link-hover-color: var(--md-blue-400, #42a5f5); + --jp-content-font-family: system-ui, -apple-system, blinkmacsystemfont, + 'Segoe UI', helvetica, arial, sans-serif, 'Apple Color Emoji', + 'Segoe UI Emoji', 'Segoe UI Symbol'; /* * Code Fonts @@ -175,7 +155,7 @@ all of MD as it is not optimized for dense, information rich UIs. --jp-code-font-size: 13px; --jp-code-line-height: 1.3077; /* 17px for 13px base */ - --jp-code-padding: 0.385em; /* 5px for 13px base */ + --jp-code-padding: 5px; /* 5px for 13px base, codemirror highlighting needs integer px value */ --jp-code-font-family-default: menlo, consolas, 'DejaVu Sans Mono', monospace; --jp-code-font-family: var(--jp-code-font-family-default); @@ -193,11 +173,11 @@ all of MD as it is not optimized for dense, information rich UIs. * theme these would go from light to dark. */ - --jp-layout-color0: white; - --jp-layout-color1: white; - --jp-layout-color2: var(--md-grey-200); - --jp-layout-color3: var(--md-grey-400); - --jp-layout-color4: var(--md-grey-600); + --jp-layout-color0: #111; + --jp-layout-color1: var(--md-grey-900, #212121); + --jp-layout-color2: var(--md-grey-800, #424242); + --jp-layout-color3: var(--md-grey-700, #616161); + --jp-layout-color4: var(--md-grey-600, #757575); /* Inverse Layout * @@ -205,41 +185,42 @@ all of MD as it is not optimized for dense, information rich UIs. * theme these would go from dark to light. */ - --jp-inverse-layout-color0: #111; - --jp-inverse-layout-color1: var(--md-grey-900); - --jp-inverse-layout-color2: var(--md-grey-800); - --jp-inverse-layout-color3: var(--md-grey-700); - --jp-inverse-layout-color4: var(--md-grey-600); + --jp-inverse-layout-color0: white; + --jp-inverse-layout-color1: white; + --jp-inverse-layout-color2: var(--md-grey-200, #eee); + --jp-inverse-layout-color3: var(--md-grey-400, #bdbdbd); + --jp-inverse-layout-color4: var(--md-grey-600, #757575); /* Brand/accent */ - --jp-brand-color0: #ec0c4b; - --jp-brand-color1: #ed225d; - --jp-brand-color2: #ee376b; - --jp-brand-color3: #ee3b6e; - --jp-accent-color0: var(--md-green-700); - --jp-accent-color1: var(--md-green-500); - --jp-accent-color2: var(--md-green-300); - --jp-accent-color3: var(--md-green-100); + --jp-brand-color0: var(--md-blue-700, #1976d2); + --jp-brand-color1: var(--md-blue-500, #2196f3); + --jp-brand-color2: var(--md-blue-300, #64b5f6); + --jp-brand-color3: var(--md-blue-100, #bbdefb); + --jp-brand-color4: var(--md-blue-50, #e3f2fd); + --jp-accent-color0: var(--md-green-700, #388e3c); + --jp-accent-color1: var(--md-green-500, #4caf50); + --jp-accent-color2: var(--md-green-300, #81c784); + --jp-accent-color3: var(--md-green-100, #c8e6c9); /* State colors (warn, error, success, info) */ - --jp-warn-color0: var(--md-orange-700); - --jp-warn-color1: var(--md-orange-500); - --jp-warn-color2: var(--md-orange-300); - --jp-warn-color3: var(--md-orange-100); - --jp-error-color0: var(--md-red-700); - --jp-error-color1: var(--md-red-500); - --jp-error-color2: var(--md-red-300); - --jp-error-color3: var(--md-red-100); - --jp-success-color0: var(--md-green-700); - --jp-success-color1: var(--md-green-500); - --jp-success-color2: var(--md-green-300); - --jp-success-color3: var(--md-green-100); - --jp-info-color0: var(--md-cyan-700); - --jp-info-color1: var(--md-cyan-500); - --jp-info-color2: var(--md-cyan-300); - --jp-info-color3: var(--md-cyan-100); + --jp-warn-color0: var(--md-orange-700, #f57c00); + --jp-warn-color1: var(--md-orange-500, #ff9800); + --jp-warn-color2: var(--md-orange-300, #ffb74d); + --jp-warn-color3: var(--md-orange-100, #ffe0b2); + --jp-error-color0: var(--md-red-700, #d32f2f); + --jp-error-color1: var(--md-red-500, #f44336); + --jp-error-color2: var(--md-red-300, #e57373); + --jp-error-color3: var(--md-red-100, #ffcdd2); + --jp-success-color0: var(--md-green-700, #388e3c); + --jp-success-color1: var(--md-green-500, #4caf50); + --jp-success-color2: var(--md-green-300, #81c784); + --jp-success-color3: var(--md-green-100, #c8e6c9); + --jp-info-color0: var(--md-cyan-700, #0097a7); + --jp-info-color1: var(--md-cyan-500, #00bcd4); + --jp-info-color2: var(--md-cyan-300, #4dd0e1); + --jp-info-color3: var(--md-cyan-100, #b2ebf2); /* Cell specific styles */ @@ -247,17 +228,17 @@ all of MD as it is not optimized for dense, information rich UIs. --jp-cell-collapser-width: 8px; --jp-cell-collapser-min-height: 20px; --jp-cell-collapser-not-active-hover-opacity: 0.6; - --jp-cell-editor-background: var(--md-grey-100); - --jp-cell-editor-border-color: var(--md-grey-300); - --jp-cell-editor-box-shadow: inset 0 0 2px var(--md-blue-300); + --jp-cell-editor-background: var(--jp-layout-color1); + --jp-cell-editor-border-color: var(--md-grey-700, #616161); + --jp-cell-editor-box-shadow: inset 0 0 2px var(--md-blue-300, #64b5f6); --jp-cell-editor-active-background: var(--jp-layout-color0); --jp-cell-editor-active-border-color: var(--jp-brand-color1); --jp-cell-prompt-width: 64px; - --jp-cell-prompt-font-family: 'Source Code Pro', monospace; + --jp-cell-prompt-font-family: var(--jp-code-font-family-default); --jp-cell-prompt-letter-spacing: 0; --jp-cell-prompt-opacity: 1; - --jp-cell-prompt-not-active-opacity: 0.5; - --jp-cell-prompt-not-active-font-color: var(--md-grey-700); + --jp-cell-prompt-not-active-opacity: 1; + --jp-cell-prompt-not-active-font-color: var(--md-grey-300, #e0e0e0); /* A custom blend of MD grey and blue 600 * See https://meyerweb.com/eric/tools/color-blend/#546E7A:1E88E5:5:hex */ @@ -271,7 +252,7 @@ all of MD as it is not optimized for dense, information rich UIs. --jp-notebook-padding: 10px; --jp-notebook-select-background: var(--jp-layout-color1); - --jp-notebook-multiselected-color: var(--md-blue-50); + --jp-notebook-multiselected-color: rgba(33, 150, 243, 0.24); /* The scroll padding is calculated to fill enough space at the bottom of the notebook to show one single-line cell (with appropriate padding) at the top @@ -286,13 +267,13 @@ all of MD as it is not optimized for dense, information rich UIs. /* Rendermime styles */ - --jp-rendermime-error-background: #fdd; - --jp-rendermime-table-row-background: var(--md-grey-100); - --jp-rendermime-table-row-hover-background: var(--md-light-blue-50); + --jp-rendermime-error-background: rgba(244, 67, 54, 0.28); + --jp-rendermime-table-row-background: var(--md-grey-900, #212121); + --jp-rendermime-table-row-hover-background: rgba(3, 169, 244, 0.2); /* Dialog specific styles */ - --jp-dialog-background: rgba(0, 0, 0, 0.25); + --jp-dialog-background: rgba(0, 0, 0, 0.6); /* Console specific styles */ @@ -300,12 +281,12 @@ all of MD as it is not optimized for dense, information rich UIs. /* Toolbar specific styles */ - --jp-toolbar-border-color: var(--jp-border-color1); + --jp-toolbar-border-color: var(--jp-border-color2); --jp-toolbar-micro-height: 8px; --jp-toolbar-background: var(--jp-layout-color1); - --jp-toolbar-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.24); + --jp-toolbar-box-shadow: 0 0 2px 0 rgba(0, 0, 0, 0.8); --jp-toolbar-header-margin: 4px 4px 0 4px; - --jp-toolbar-active-background: var(--md-grey-300); + --jp-toolbar-active-background: var(--jp-layout-color0); /* Statusbar specific styles */ @@ -313,47 +294,52 @@ all of MD as it is not optimized for dense, information rich UIs. /* Input field styles */ - --jp-input-box-shadow: inset 0 0 2px var(--md-blue-300); - --jp-input-active-background: var(--jp-layout-color1); - --jp-input-hover-background: var(--jp-layout-color1); - --jp-input-background: var(--md-grey-100); - --jp-input-border-color: var(--jp-border-color1); + --jp-input-box-shadow: inset 0 0 2px var(--md-blue-300, #64b5f6); + --jp-input-active-background: var(--jp-layout-color0); + --jp-input-hover-background: var(--jp-layout-color2); + --jp-input-background: var(--md-grey-800, #424242); + --jp-input-border-color: var(--jp-inverse-border-color); --jp-input-active-border-color: var(--jp-brand-color1); + --jp-input-active-box-shadow-color: rgba(19, 124, 189, 0.3); /* General editor styles */ - --jp-editor-selected-background: #d9d9d9; - --jp-editor-selected-focused-background: #d7d4f0; + --jp-editor-selected-background: var(--jp-layout-color2); + --jp-editor-selected-focused-background: rgba(33, 150, 243, 0.24); --jp-editor-cursor-color: var(--jp-ui-font-color0); /* Code mirror specific styles */ - --jp-mirror-editor-keyword-color: #008000; - --jp-mirror-editor-atom-color: #88f; - --jp-mirror-editor-number-color: #080; - --jp-mirror-editor-def-color: #00f; - --jp-mirror-editor-variable-color: var(--md-grey-900); - --jp-mirror-editor-variable-2-color: #05a; - --jp-mirror-editor-variable-3-color: #085; - --jp-mirror-editor-punctuation-color: #05a; - --jp-mirror-editor-property-color: #05a; + --jp-mirror-editor-keyword-color: var(--md-green-500, #4caf50); + --jp-mirror-editor-atom-color: var(--md-blue-300, #64b5f6); + --jp-mirror-editor-number-color: var(--md-green-400, #66bb6a); + --jp-mirror-editor-def-color: var(--md-blue-600, #1e88e5); + --jp-mirror-editor-variable-color: var(--md-grey-300, #e0e0e0); + --jp-mirror-editor-variable-2-color: var(--md-blue-500, #2196f3); + --jp-mirror-editor-variable-3-color: var(--md-green-600, #43a047); + --jp-mirror-editor-punctuation-color: var(--md-blue-400, #42a5f5); + --jp-mirror-editor-property-color: var(--md-blue-400, #42a5f5); --jp-mirror-editor-operator-color: #a2f; --jp-mirror-editor-comment-color: #408080; - --jp-mirror-editor-string-color: #ba2121; - --jp-mirror-editor-string-2-color: #708; + --jp-mirror-editor-string-color: #ff7070; + --jp-mirror-editor-string-2-color: var(--md-purple-300, #ba68c8); --jp-mirror-editor-meta-color: #a2f; --jp-mirror-editor-qualifier-color: #555; - --jp-mirror-editor-builtin-color: #008000; + --jp-mirror-editor-builtin-color: var(--md-green-600, #43a047); --jp-mirror-editor-bracket-color: #997; - --jp-mirror-editor-tag-color: #170; - --jp-mirror-editor-attribute-color: #00c; - --jp-mirror-editor-header-color: blue; - --jp-mirror-editor-quote-color: #090; - --jp-mirror-editor-link-color: #00c; + --jp-mirror-editor-tag-color: var(--md-green-700, #388e3c); + --jp-mirror-editor-attribute-color: var(--md-blue-700, #1976d2); + --jp-mirror-editor-header-color: var(--md-blue-500, #2196f3); + --jp-mirror-editor-quote-color: var(--md-green-300, #81c784); + --jp-mirror-editor-link-color: var(--md-blue-700, #1976d2); --jp-mirror-editor-error-color: #f00; --jp-mirror-editor-hr-color: #999; - /* User colors */ + /* + RTC user specific colors. + These colors are used for the cursor, username in the editor, + and the icon of the user. + */ --jp-collaborator-color1: #ad4a00; --jp-collaborator-color2: #7b6a00; @@ -363,26 +349,66 @@ all of MD as it is not optimized for dense, information rich UIs. --jp-collaborator-color6: #8b45c6; --jp-collaborator-color7: #be208b; - /* File or activity icons and switch semantic variables */ - - --jp-jupyter-icon-color: var(--md-orange-900); - --jp-notebook-icon-color: var(--md-orange-700); - --jp-json-icon-color: var(--md-orange-700); - --jp-console-icon-background-color: var(--md-blue-700); - --jp-console-icon-color: white; - --jp-terminal-icon-background-color: var(--md-grey-200); - --jp-terminal-icon-color: var(--md-grey-800); - --jp-text-editor-icon-color: var(--md-grey-200); - --jp-inspector-icon-color: var(--md-grey-200); - --jp-switch-color: var(--md-grey-400); - --jp-switch-true-position-color: var(--md-orange-700); - --jp-switch-cursor-color: rgba(0, 0, 0, 0.8); - /* Vega extension styles */ - --jp-vega-background: white; + --jp-vega-background: var(--md-grey-400, #bdbdbd); /* Sidebar-related styles */ - --jp-sidebar-min-width: 180px; + --jp-sidebar-min-width: 250px; + + /* Search-related styles */ + + --jp-search-toggle-off-opacity: 0.6; + --jp-search-toggle-hover-opacity: 0.8; + --jp-search-toggle-on-opacity: 1; + --jp-search-selected-match-background-color: rgb(255, 225, 0); + --jp-search-selected-match-color: black; + --jp-search-unselected-match-background-color: var( + --jp-inverse-layout-color0 + ); + --jp-search-unselected-match-color: var(--jp-ui-inverse-font-color0); + + /* scrollbar related styles. Supports every browser except Edge. */ + + /* colors based on JetBrain's Darcula theme */ + + --jp-scrollbar-background-color: #3f4244; + --jp-scrollbar-thumb-color: 88, 96, 97; /* need to specify thumb color as an RGB triplet */ + --jp-scrollbar-endpad: 3px; /* the minimum gap between the thumb and the ends of a scrollbar */ + + /* hacks for setting the thumb shape. These do nothing in Firefox */ + + --jp-scrollbar-thumb-margin: 3.5px; /* the space in between the sides of the thumb and the track */ + --jp-scrollbar-thumb-radius: 9px; /* set to a large-ish value for rounded endcaps on the thumb */ + + /* Icon colors that work well with light or dark backgrounds */ + --jp-icon-contrast-color0: var(--md-purple-600, #8e24aa); + --jp-icon-contrast-color1: var(--md-green-600, #43a047); + --jp-icon-contrast-color2: var(--md-pink-600, #d81b60); + --jp-icon-contrast-color3: var(--md-blue-600, #1e88e5); + + /* Button colors */ + --jp-accept-color-normal: var(--md-blue-700, #1976d2); + --jp-accept-color-hover: var(--md-blue-800, #1565c0); + --jp-accept-color-active: var(--md-blue-900, #0d47a1); + --jp-warn-color-normal: var(--md-red-700, #d32f2f); + --jp-warn-color-hover: var(--md-red-800, #c62828); + --jp-warn-color-active: var(--md-red-900, #b71c1c); + --jp-reject-color-normal: var(--md-grey-600, #757575); + --jp-reject-color-hover: var(--md-grey-700, #616161); + --jp-reject-color-active: var(--md-grey-800, #424242); + + /* File or activity icons and switch semantic variables */ + --jp-jupyter-icon-color: #f37626; + --jp-notebook-icon-color: #f37626; + --jp-json-icon-color: var(--md-orange-500, #ff9800); + --jp-console-icon-background-color: var(--md-blue-500, #2196f3); + --jp-console-icon-color: white; + --jp-terminal-icon-background-color: var(--md-grey-200, #eee); + --jp-terminal-icon-color: var(--md-grey-800, #424242); + --jp-text-editor-icon-color: var(--md-grey-200, #eee); + --jp-inspector-icon-color: var(--md-grey-200, #eee); + --jp-switch-color: var(--md-grey-400, #bdbdbd); + --jp-switch-true-position-color: var(--md-orange-700, #f57c00); }