diff --git a/.gitignore b/.gitignore index cfa182b1a..658dbadfe 100644 --- a/.gitignore +++ b/.gitignore @@ -32,6 +32,12 @@ package-lock.json share/jupyter/voila/templates/base/static/*voila.js share/jupyter/voila/templates/base/static/*[woff|woff2|eot|svg] +share/jupyter/voila/templates/classic/static/labvariables.css +share/jupyter/voila/templates/classic/static/materialcolors.css + +share/jupyter/voila/templates/reveal/static/labvariables.css +share/jupyter/voila/templates/reveal/static/materialcolors.css + lib voila/labextension @@ -40,4 +46,4 @@ tsconfig.tsbuildinfo ui-tests/playwright-report ui-tests/test-results ui-tests/benchmark-results -ui-tests/jlab_root \ No newline at end of file +ui-tests/jlab_root diff --git a/MANIFEST.in b/MANIFEST.in index 7dce21745..536a1c0f7 100644 --- a/MANIFEST.in +++ b/MANIFEST.in @@ -8,6 +8,12 @@ include ts*.json graft voila/labextension +exclude share/jupyter/voila/templates/classic/static/labvariables.css +exclude share/jupyter/voila/templates/classic/static/materialcolors.css + +exclude share/jupyter/voila/templates/reveal/static/labvariables.css +exclude share/jupyter/voila/templates/reveal/static/materialcolors.css + # Javascript files graft src graft style diff --git a/setup.py b/setup.py index ceff1ced5..61fac8636 100644 --- a/setup.py +++ b/setup.py @@ -7,8 +7,10 @@ # The full license is in the file LICENSE, distributed with this software. # ############################################################################# from pathlib import Path - +from urllib.request import urlopen import setuptools +import sys +import os HERE = Path(__file__).parent.resolve() @@ -47,6 +49,75 @@ ("share/jupyter/voila/templates", "share/jupyter/voila/templates", "**/*[!.map]"), ] + +jupyterlab_apputils_version = "3.2.8" +jupyterlab_theme_light_version = "3.2.8" + +css_files = [ + ( + "https://unpkg.com/@jupyterlab/apputils@%s/style/materialcolors.css" + % jupyterlab_apputils_version, + "materialcolors.css", + ), + ( + "https://unpkg.com/@jupyterlab/theme-light-extension@%s/style/variables.css" + % jupyterlab_theme_light_version, + "labvariables.css", + ), +] + + +class FetchCSS(setuptools.Command): + """Fetch CSS files from the CDNs.""" + + description = "Fetch CSS from CDN" + user_options = [] + + def initialize_options(self): + pass + + def finalize_options(self): + pass + + def run(self): + for template_name in ["classic", "reveal"]: + for url, filename in css_files: + directory = os.path.join( + "share", "jupyter", "voila", "templates", template_name, "static" + ) + dest = os.path.join(directory, filename) + if not os.path.exists(directory): + os.makedirs(directory) + if not os.path.exists(".git") and os.path.exists(dest): + # not running from git, nothing to do + return + print("Downloading CSS: %s" % url) + try: + css = urlopen(url).read() + except Exception as e: + msg = "Failed to download css from %s: %s" % (url, e) + print(msg, file=sys.stderr) + + if os.path.exists(dest): + print("Already have CSS: %s, moving on." % dest) + else: + raise OSError("Need CSS to proceed.") + return + + with open(dest, "wb") as f: + f.write(css) + print("Downloaded Notebook CSS to %s" % dest) + + +def download_css_first(command): + class CSSFirst(command): + def run(self): + self.distribution.run_command("download_css") + return command.run(self) + + return CSSFirst + + try: from jupyter_packaging import wrap_installers, npm_builder, get_data_files @@ -54,6 +125,11 @@ builder = npm_builder(build_cmd="build", npm="jlpm", force=True) cmdclass = wrap_installers(post_develop=builder, ensured_targets=ensured_targets) + cmdclass["download_css"] = FetchCSS + cmdclass["develop"] = download_css_first(cmdclass["develop"]) + cmdclass["sdist"] = download_css_first(cmdclass["sdist"]) + cmdclass["bdist_wheel"] = download_css_first(cmdclass["bdist_wheel"]) + setup_args = dict(cmdclass=cmdclass, data_files=get_data_files(data_files_spec)) except ImportError: setup_args = dict() diff --git a/share/jupyter/voila/templates/classic/static/labvariables.css b/share/jupyter/voila/templates/classic/static/labvariables.css deleted file mode 100644 index d98715743..000000000 --- a/share/jupyter/voila/templates/classic/static/labvariables.css +++ /dev/null @@ -1,209 +0,0 @@ -/*----------------------------------------------------------------------------- -| Copyright (c) Jupyter Development Team. -| Distributed under the terms of the Modified BSD License. -|----------------------------------------------------------------------------*/ - -/* -This file is copied from the JupyterLab project to define default styling for -when the widget styling is compiled down to eliminate CSS variables. We make one -change - we comment out the font import below. -*/ - -@import "./materialcolors.css"; - -/* -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. -*/ - - -/* - * Optional monospace font for input/output prompt. - */ - /* Commented out in ipywidgets since we don't need it. */ -/* @import url('https://fonts.googleapis.com/css?family=Roboto+Mono'); */ - -/* - * Added for compatibility with output area - */ -:root { - --jp-icon-search: none; - --jp-ui-select-caret: none; -} - - -:root { - - /* Borders - - The following variables, specify the visual styling of borders in JupyterLab. - */ - - --jp-border-width: 1px; - --jp-border-color0: var(--md-grey-700); - --jp-border-color1: var(--md-grey-500); - --jp-border-color2: var(--md-grey-300); - --jp-border-color3: var(--md-grey-100); - - /* UI Fonts - - The UI font CSS variables are used for the typography all of the JupyterLab - user interface elements that are not directly user generated content. - */ - - --jp-ui-font-scale-factor: 1.2; - --jp-ui-font-size0: calc(var(--jp-ui-font-size1)/var(--jp-ui-font-scale-factor)); - --jp-ui-font-size1: 13px; /* Base font size */ - --jp-ui-font-size2: calc(var(--jp-ui-font-size1)*var(--jp-ui-font-scale-factor)); - --jp-ui-font-size3: calc(var(--jp-ui-font-size2)*var(--jp-ui-font-scale-factor)); - --jp-ui-icon-font-size: 14px; /* Ensures px perfect FontAwesome icons */ - --jp-ui-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - - /* Use these font colors against the corresponding main layout colors. - In a light theme, these go from dark to light. - */ - - --jp-ui-font-color0: rgba(0,0,0,1.0); - --jp-ui-font-color1: rgba(0,0,0,0.8); - --jp-ui-font-color2: rgba(0,0,0,0.5); - --jp-ui-font-color3: rgba(0,0,0,0.3); - - /* 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); - - /* For backwards compatibility, we still define these below until ipywidgets 8.0. - See https://github.com/jupyter-widgets/ipywidgets/pull/2801 */ - --jp-inverse-ui-font-color0: rgba(255,255,255,1); - --jp-inverse-ui-font-color1: rgba(255,255,255,1.0); - --jp-inverse-ui-font-color2: rgba(255,255,255,0.7); - --jp-inverse-ui-font-color3: rgba(255,255,255,0.5); - - /* Content Fonts - - Content font variables are used for typography of user generated content. - */ - - --jp-content-font-size: 13px; - --jp-content-line-height: 1.5; - --jp-content-font-color0: black; - --jp-content-font-color1: black; - --jp-content-font-color2: var(--md-grey-700); - --jp-content-font-color3: var(--md-grey-500); - - --jp-ui-font-scale-factor: 1.2; - --jp-ui-font-size0: calc(var(--jp-ui-font-size1)/var(--jp-ui-font-scale-factor)); - --jp-ui-font-size1: 13px; /* Base font size */ - --jp-ui-font-size2: calc(var(--jp-ui-font-size1)*var(--jp-ui-font-scale-factor)); - --jp-ui-font-size3: calc(var(--jp-ui-font-size2)*var(--jp-ui-font-scale-factor)); - - --jp-code-font-size: 13px; - --jp-code-line-height: 1.307; - --jp-code-padding: 5px; - --jp-code-font-family: monospace; - - - /* Layout - - The following are the main layout colors use in JupyterLab. In a light - 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); - - /* Brand/accent */ - - --jp-brand-color0: var(--md-blue-700); - --jp-brand-color1: var(--md-blue-500); - --jp-brand-color2: var(--md-blue-300); - --jp-brand-color3: var(--md-blue-100); - - --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); - - /* 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); - - /* Cell specific styles */ - - --jp-cell-padding: 5px; - --jp-cell-editor-background: #f7f7f7; - --jp-cell-editor-border-color: #cfcfcf; - --jp-cell-editor-background-edit: var(--jp-ui-layout-color1); - --jp-cell-editor-border-color-edit: var(--jp-brand-color1); - --jp-cell-prompt-width: 100px; - --jp-cell-prompt-font-family: 'Roboto Mono', monospace; - --jp-cell-prompt-letter-spacing: 0px; - --jp-cell-prompt-opacity: 1.0; - --jp-cell-prompt-opacity-not-active: 0.4; - --jp-cell-prompt-font-color-not-active: var(--md-grey-700); - /* A custom blend of MD grey and blue 600 - * See https://meyerweb.com/eric/tools/color-blend/#546E7A:1E88E5:5:hex */ - --jp-cell-inprompt-font-color: #307FC1; - /* A custom blend of MD grey and orange 600 - * https://meyerweb.com/eric/tools/color-blend/#546E7A:F4511E:5:hex */ - --jp-cell-outprompt-font-color: #BF5B3D; - - /* Notebook specific styles */ - - --jp-notebook-padding: 10px; - --jp-notebook-scroll-padding: 100px; - - /* Console specific styles */ - - --jp-console-background: var(--md-grey-100); - - /* Toolbar specific styles */ - - --jp-toolbar-border-color: var(--md-grey-400); - --jp-toolbar-micro-height: 8px; - --jp-toolbar-background: var(--jp-layout-color0); - --jp-toolbar-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.24); - --jp-toolbar-header-margin: 4px 4px 0px 4px; - --jp-toolbar-active-background: var(--md-grey-300); -} diff --git a/share/jupyter/voila/templates/classic/static/materialcolors.css b/share/jupyter/voila/templates/classic/static/materialcolors.css deleted file mode 100644 index 9b8872a85..000000000 --- a/share/jupyter/voila/templates/classic/static/materialcolors.css +++ /dev/null @@ -1,304 +0,0 @@ -/** - * The material design colors are adapted from google-material-color v1.2.6 - * https://github.com/danlevan/google-material-color - * https://github.com/danlevan/google-material-color/blob/f67ca5f4028b2f1b34862f64b0ca67323f91b088/dist/palette.var.css - * - * The license for the material design color CSS variables is as follows (see - * https://github.com/danlevan/google-material-color/blob/f67ca5f4028b2f1b34862f64b0ca67323f91b088/LICENSE) - * - * The MIT License (MIT) - * - * Copyright (c) 2014 Dan Le Van - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in - * all copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ -:root { - --md-red-50: #FFEBEE; - --md-red-100: #FFCDD2; - --md-red-200: #EF9A9A; - --md-red-300: #E57373; - --md-red-400: #EF5350; - --md-red-500: #F44336; - --md-red-600: #E53935; - --md-red-700: #D32F2F; - --md-red-800: #C62828; - --md-red-900: #B71C1C; - --md-red-A100: #FF8A80; - --md-red-A200: #FF5252; - --md-red-A400: #FF1744; - --md-red-A700: #D50000; - - --md-pink-50: #FCE4EC; - --md-pink-100: #F8BBD0; - --md-pink-200: #F48FB1; - --md-pink-300: #F06292; - --md-pink-400: #EC407A; - --md-pink-500: #E91E63; - --md-pink-600: #D81B60; - --md-pink-700: #C2185B; - --md-pink-800: #AD1457; - --md-pink-900: #880E4F; - --md-pink-A100: #FF80AB; - --md-pink-A200: #FF4081; - --md-pink-A400: #F50057; - --md-pink-A700: #C51162; - - --md-purple-50: #F3E5F5; - --md-purple-100: #E1BEE7; - --md-purple-200: #CE93D8; - --md-purple-300: #BA68C8; - --md-purple-400: #AB47BC; - --md-purple-500: #9C27B0; - --md-purple-600: #8E24AA; - --md-purple-700: #7B1FA2; - --md-purple-800: #6A1B9A; - --md-purple-900: #4A148C; - --md-purple-A100: #EA80FC; - --md-purple-A200: #E040FB; - --md-purple-A400: #D500F9; - --md-purple-A700: #AA00FF; - - --md-deep-purple-50: #EDE7F6; - --md-deep-purple-100: #D1C4E9; - --md-deep-purple-200: #B39DDB; - --md-deep-purple-300: #9575CD; - --md-deep-purple-400: #7E57C2; - --md-deep-purple-500: #673AB7; - --md-deep-purple-600: #5E35B1; - --md-deep-purple-700: #512DA8; - --md-deep-purple-800: #4527A0; - --md-deep-purple-900: #311B92; - --md-deep-purple-A100: #B388FF; - --md-deep-purple-A200: #7C4DFF; - --md-deep-purple-A400: #651FFF; - --md-deep-purple-A700: #6200EA; - - --md-indigo-50: #E8EAF6; - --md-indigo-100: #C5CAE9; - --md-indigo-200: #9FA8DA; - --md-indigo-300: #7986CB; - --md-indigo-400: #5C6BC0; - --md-indigo-500: #3F51B5; - --md-indigo-600: #3949AB; - --md-indigo-700: #303F9F; - --md-indigo-800: #283593; - --md-indigo-900: #1A237E; - --md-indigo-A100: #8C9EFF; - --md-indigo-A200: #536DFE; - --md-indigo-A400: #3D5AFE; - --md-indigo-A700: #304FFE; - - --md-blue-50: #E3F2FD; - --md-blue-100: #BBDEFB; - --md-blue-200: #90CAF9; - --md-blue-300: #64B5F6; - --md-blue-400: #42A5F5; - --md-blue-500: #2196F3; - --md-blue-600: #1E88E5; - --md-blue-700: #1976D2; - --md-blue-800: #1565C0; - --md-blue-900: #0D47A1; - --md-blue-A100: #82B1FF; - --md-blue-A200: #448AFF; - --md-blue-A400: #2979FF; - --md-blue-A700: #2962FF; - - --md-light-blue-50: #E1F5FE; - --md-light-blue-100: #B3E5FC; - --md-light-blue-200: #81D4FA; - --md-light-blue-300: #4FC3F7; - --md-light-blue-400: #29B6F6; - --md-light-blue-500: #03A9F4; - --md-light-blue-600: #039BE5; - --md-light-blue-700: #0288D1; - --md-light-blue-800: #0277BD; - --md-light-blue-900: #01579B; - --md-light-blue-A100: #80D8FF; - --md-light-blue-A200: #40C4FF; - --md-light-blue-A400: #00B0FF; - --md-light-blue-A700: #0091EA; - - --md-cyan-50: #E0F7FA; - --md-cyan-100: #B2EBF2; - --md-cyan-200: #80DEEA; - --md-cyan-300: #4DD0E1; - --md-cyan-400: #26C6DA; - --md-cyan-500: #00BCD4; - --md-cyan-600: #00ACC1; - --md-cyan-700: #0097A7; - --md-cyan-800: #00838F; - --md-cyan-900: #006064; - --md-cyan-A100: #84FFFF; - --md-cyan-A200: #18FFFF; - --md-cyan-A400: #00E5FF; - --md-cyan-A700: #00B8D4; - - --md-teal-50: #E0F2F1; - --md-teal-100: #B2DFDB; - --md-teal-200: #80CBC4; - --md-teal-300: #4DB6AC; - --md-teal-400: #26A69A; - --md-teal-500: #009688; - --md-teal-600: #00897B; - --md-teal-700: #00796B; - --md-teal-800: #00695C; - --md-teal-900: #004D40; - --md-teal-A100: #A7FFEB; - --md-teal-A200: #64FFDA; - --md-teal-A400: #1DE9B6; - --md-teal-A700: #00BFA5; - - --md-green-50: #E8F5E9; - --md-green-100: #C8E6C9; - --md-green-200: #A5D6A7; - --md-green-300: #81C784; - --md-green-400: #66BB6A; - --md-green-500: #4CAF50; - --md-green-600: #43A047; - --md-green-700: #388E3C; - --md-green-800: #2E7D32; - --md-green-900: #1B5E20; - --md-green-A100: #B9F6CA; - --md-green-A200: #69F0AE; - --md-green-A400: #00E676; - --md-green-A700: #00C853; - - --md-light-green-50: #F1F8E9; - --md-light-green-100: #DCEDC8; - --md-light-green-200: #C5E1A5; - --md-light-green-300: #AED581; - --md-light-green-400: #9CCC65; - --md-light-green-500: #8BC34A; - --md-light-green-600: #7CB342; - --md-light-green-700: #689F38; - --md-light-green-800: #558B2F; - --md-light-green-900: #33691E; - --md-light-green-A100: #CCFF90; - --md-light-green-A200: #B2FF59; - --md-light-green-A400: #76FF03; - --md-light-green-A700: #64DD17; - - --md-lime-50: #F9FBE7; - --md-lime-100: #F0F4C3; - --md-lime-200: #E6EE9C; - --md-lime-300: #DCE775; - --md-lime-400: #D4E157; - --md-lime-500: #CDDC39; - --md-lime-600: #C0CA33; - --md-lime-700: #AFB42B; - --md-lime-800: #9E9D24; - --md-lime-900: #827717; - --md-lime-A100: #F4FF81; - --md-lime-A200: #EEFF41; - --md-lime-A400: #C6FF00; - --md-lime-A700: #AEEA00; - - --md-yellow-50: #FFFDE7; - --md-yellow-100: #FFF9C4; - --md-yellow-200: #FFF59D; - --md-yellow-300: #FFF176; - --md-yellow-400: #FFEE58; - --md-yellow-500: #FFEB3B; - --md-yellow-600: #FDD835; - --md-yellow-700: #FBC02D; - --md-yellow-800: #F9A825; - --md-yellow-900: #F57F17; - --md-yellow-A100: #FFFF8D; - --md-yellow-A200: #FFFF00; - --md-yellow-A400: #FFEA00; - --md-yellow-A700: #FFD600; - - --md-amber-50: #FFF8E1; - --md-amber-100: #FFECB3; - --md-amber-200: #FFE082; - --md-amber-300: #FFD54F; - --md-amber-400: #FFCA28; - --md-amber-500: #FFC107; - --md-amber-600: #FFB300; - --md-amber-700: #FFA000; - --md-amber-800: #FF8F00; - --md-amber-900: #FF6F00; - --md-amber-A100: #FFE57F; - --md-amber-A200: #FFD740; - --md-amber-A400: #FFC400; - --md-amber-A700: #FFAB00; - - --md-orange-50: #FFF3E0; - --md-orange-100: #FFE0B2; - --md-orange-200: #FFCC80; - --md-orange-300: #FFB74D; - --md-orange-400: #FFA726; - --md-orange-500: #FF9800; - --md-orange-600: #FB8C00; - --md-orange-700: #F57C00; - --md-orange-800: #EF6C00; - --md-orange-900: #E65100; - --md-orange-A100: #FFD180; - --md-orange-A200: #FFAB40; - --md-orange-A400: #FF9100; - --md-orange-A700: #FF6D00; - - --md-deep-orange-50: #FBE9E7; - --md-deep-orange-100: #FFCCBC; - --md-deep-orange-200: #FFAB91; - --md-deep-orange-300: #FF8A65; - --md-deep-orange-400: #FF7043; - --md-deep-orange-500: #FF5722; - --md-deep-orange-600: #F4511E; - --md-deep-orange-700: #E64A19; - --md-deep-orange-800: #D84315; - --md-deep-orange-900: #BF360C; - --md-deep-orange-A100: #FF9E80; - --md-deep-orange-A200: #FF6E40; - --md-deep-orange-A400: #FF3D00; - --md-deep-orange-A700: #DD2C00; - - --md-brown-50: #EFEBE9; - --md-brown-100: #D7CCC8; - --md-brown-200: #BCAAA4; - --md-brown-300: #A1887F; - --md-brown-400: #8D6E63; - --md-brown-500: #795548; - --md-brown-600: #6D4C41; - --md-brown-700: #5D4037; - --md-brown-800: #4E342E; - --md-brown-900: #3E2723; - - --md-grey-50: #FAFAFA; - --md-grey-100: #F5F5F5; - --md-grey-200: #EEEEEE; - --md-grey-300: #E0E0E0; - --md-grey-400: #BDBDBD; - --md-grey-500: #9E9E9E; - --md-grey-600: #757575; - --md-grey-700: #616161; - --md-grey-800: #424242; - --md-grey-900: #212121; - - --md-blue-grey-50: #ECEFF1; - --md-blue-grey-100: #CFD8DC; - --md-blue-grey-200: #B0BEC5; - --md-blue-grey-300: #90A4AE; - --md-blue-grey-400: #78909C; - --md-blue-grey-500: #607D8B; - --md-blue-grey-600: #546E7A; - --md-blue-grey-700: #455A64; - --md-blue-grey-800: #37474F; - --md-blue-grey-900: #263238; -} \ No newline at end of file diff --git a/share/jupyter/voila/templates/reveal/static/labvariables.css b/share/jupyter/voila/templates/reveal/static/labvariables.css deleted file mode 100644 index 1b1ad577b..000000000 --- a/share/jupyter/voila/templates/reveal/static/labvariables.css +++ /dev/null @@ -1,209 +0,0 @@ -/*----------------------------------------------------------------------------- -| Copyright (c) Jupyter Development Team. -| Distributed under the terms of the Modified BSD License. -|----------------------------------------------------------------------------*/ - -/* -This file is copied from the JupyterLab project to define default styling for -when the widget styling is compiled down to eliminate CSS variables. We make one -change - we comment out the font import below. -*/ - -@import "./materialcolors.css"; - -/* -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. -*/ - - -/* - * Optional monospace font for input/output prompt. - */ - /* Commented out in ipywidgets since we don't need it. */ -/* @import url('https://fonts.googleapis.com/css?family=Roboto+Mono'); */ - -/* - * Added for compabitility with output area - */ -:root { - --jp-icon-search: none; - --jp-ui-select-caret: none; -} - - -:root { - - /* Borders - - The following variables, specify the visual styling of borders in JupyterLab. - */ - - --jp-border-width: 1px; - --jp-border-color0: var(--md-grey-700); - --jp-border-color1: var(--md-grey-500); - --jp-border-color2: var(--md-grey-300); - --jp-border-color3: var(--md-grey-100); - - /* UI Fonts - - The UI font CSS variables are used for the typography all of the JupyterLab - user interface elements that are not directly user generated content. - */ - - --jp-ui-font-scale-factor: 1.2; - --jp-ui-font-size0: calc(var(--jp-ui-font-size1)/var(--jp-ui-font-scale-factor)); - --jp-ui-font-size1: 13px; /* Base font size */ - --jp-ui-font-size2: calc(var(--jp-ui-font-size1)*var(--jp-ui-font-scale-factor)); - --jp-ui-font-size3: calc(var(--jp-ui-font-size2)*var(--jp-ui-font-scale-factor)); - --jp-ui-icon-font-size: 14px; /* Ensures px perfect FontAwesome icons */ - --jp-ui-font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; - - /* Use these font colors against the corresponding main layout colors. - In a light theme, these go from dark to light. - */ - - --jp-ui-font-color0: rgba(0,0,0,1.0); - --jp-ui-font-color1: rgba(0,0,0,0.8); - --jp-ui-font-color2: rgba(0,0,0,0.5); - --jp-ui-font-color3: rgba(0,0,0,0.3); - - /* 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); - - /* For backwards compatibility, we still define these below until ipywidgets 8.0. - See https://github.com/jupyter-widgets/ipywidgets/pull/2801 */ - --jp-inverse-ui-font-color0: rgba(255,255,255,1); - --jp-inverse-ui-font-color1: rgba(255,255,255,1.0); - --jp-inverse-ui-font-color2: rgba(255,255,255,0.7); - --jp-inverse-ui-font-color3: rgba(255,255,255,0.5); - - /* Content Fonts - - Content font variables are used for typography of user generated content. - */ - - --jp-content-font-size: 13px; - --jp-content-line-height: 1.5; - --jp-content-font-color0: black; - --jp-content-font-color1: black; - --jp-content-font-color2: var(--md-grey-700); - --jp-content-font-color3: var(--md-grey-500); - - --jp-ui-font-scale-factor: 1.2; - --jp-ui-font-size0: calc(var(--jp-ui-font-size1)/var(--jp-ui-font-scale-factor)); - --jp-ui-font-size1: 13px; /* Base font size */ - --jp-ui-font-size2: calc(var(--jp-ui-font-size1)*var(--jp-ui-font-scale-factor)); - --jp-ui-font-size3: calc(var(--jp-ui-font-size2)*var(--jp-ui-font-scale-factor)); - - --jp-code-font-size: 13px; - --jp-code-line-height: 1.307; - --jp-code-padding: 5px; - --jp-code-font-family: monospace; - - - /* Layout - - The following are the main layout colors use in JupyterLab. In a light - 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); - - /* Brand/accent */ - - --jp-brand-color0: var(--md-blue-700); - --jp-brand-color1: var(--md-blue-500); - --jp-brand-color2: var(--md-blue-300); - --jp-brand-color3: var(--md-blue-100); - - --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); - - /* 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); - - /* Cell specific styles */ - - --jp-cell-padding: 5px; - --jp-cell-editor-background: #f7f7f7; - --jp-cell-editor-border-color: #cfcfcf; - --jp-cell-editor-background-edit: var(--jp-ui-layout-color1); - --jp-cell-editor-border-color-edit: var(--jp-brand-color1); - --jp-cell-prompt-width: 100px; - --jp-cell-prompt-font-family: 'Roboto Mono', monospace; - --jp-cell-prompt-letter-spacing: 0px; - --jp-cell-prompt-opacity: 1.0; - --jp-cell-prompt-opacity-not-active: 0.4; - --jp-cell-prompt-font-color-not-active: var(--md-grey-700); - /* A custom blend of MD grey and blue 600 - * See https://meyerweb.com/eric/tools/color-blend/#546E7A:1E88E5:5:hex */ - --jp-cell-inprompt-font-color: #307FC1; - /* A custom blend of MD grey and orange 600 - * https://meyerweb.com/eric/tools/color-blend/#546E7A:F4511E:5:hex */ - --jp-cell-outprompt-font-color: #BF5B3D; - - /* Notebook specific styles */ - - --jp-notebook-padding: 10px; - --jp-notebook-scroll-padding: 100px; - - /* Console specific styles */ - - --jp-console-background: var(--md-grey-100); - - /* Toolbar specific styles */ - - --jp-toolbar-border-color: var(--md-grey-400); - --jp-toolbar-micro-height: 8px; - --jp-toolbar-background: var(--jp-layout-color0); - --jp-toolbar-box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.24); - --jp-toolbar-header-margin: 4px 4px 0px 4px; - --jp-toolbar-active-background: var(--md-grey-300); -} diff --git a/share/jupyter/voila/templates/reveal/static/materialcolors.css b/share/jupyter/voila/templates/reveal/static/materialcolors.css deleted file mode 100644 index 9b8872a85..000000000 --- a/share/jupyter/voila/templates/reveal/static/materialcolors.css +++ /dev/null @@ -1,304 +0,0 @@ -/** - * The material design colors are adapted from google-material-color v1.2.6 - * https://github.com/danlevan/google-material-color - * https://github.com/danlevan/google-material-color/blob/f67ca5f4028b2f1b34862f64b0ca67323f91b088/dist/palette.var.css - * - * The license for the material design color CSS variables is as follows (see - * https://github.com/danlevan/google-material-color/blob/f67ca5f4028b2f1b34862f64b0ca67323f91b088/LICENSE) - * - * The MIT License (MIT) - * - * Copyright (c) 2014 Dan Le Van - * - * Permission is hereby granted, free of charge, to any person obtaining a copy - * of this software and associated documentation files (the "Software"), to deal - * in the Software without restriction, including without limitation the rights - * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell - * copies of the Software, and to permit persons to whom the Software is - * furnished to do so, subject to the following conditions: - * - * The above copyright notice and this permission notice shall be included in - * all copies or substantial portions of the Software. - * - * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR - * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, - * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE - * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER - * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, - * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE - * SOFTWARE. - */ -:root { - --md-red-50: #FFEBEE; - --md-red-100: #FFCDD2; - --md-red-200: #EF9A9A; - --md-red-300: #E57373; - --md-red-400: #EF5350; - --md-red-500: #F44336; - --md-red-600: #E53935; - --md-red-700: #D32F2F; - --md-red-800: #C62828; - --md-red-900: #B71C1C; - --md-red-A100: #FF8A80; - --md-red-A200: #FF5252; - --md-red-A400: #FF1744; - --md-red-A700: #D50000; - - --md-pink-50: #FCE4EC; - --md-pink-100: #F8BBD0; - --md-pink-200: #F48FB1; - --md-pink-300: #F06292; - --md-pink-400: #EC407A; - --md-pink-500: #E91E63; - --md-pink-600: #D81B60; - --md-pink-700: #C2185B; - --md-pink-800: #AD1457; - --md-pink-900: #880E4F; - --md-pink-A100: #FF80AB; - --md-pink-A200: #FF4081; - --md-pink-A400: #F50057; - --md-pink-A700: #C51162; - - --md-purple-50: #F3E5F5; - --md-purple-100: #E1BEE7; - --md-purple-200: #CE93D8; - --md-purple-300: #BA68C8; - --md-purple-400: #AB47BC; - --md-purple-500: #9C27B0; - --md-purple-600: #8E24AA; - --md-purple-700: #7B1FA2; - --md-purple-800: #6A1B9A; - --md-purple-900: #4A148C; - --md-purple-A100: #EA80FC; - --md-purple-A200: #E040FB; - --md-purple-A400: #D500F9; - --md-purple-A700: #AA00FF; - - --md-deep-purple-50: #EDE7F6; - --md-deep-purple-100: #D1C4E9; - --md-deep-purple-200: #B39DDB; - --md-deep-purple-300: #9575CD; - --md-deep-purple-400: #7E57C2; - --md-deep-purple-500: #673AB7; - --md-deep-purple-600: #5E35B1; - --md-deep-purple-700: #512DA8; - --md-deep-purple-800: #4527A0; - --md-deep-purple-900: #311B92; - --md-deep-purple-A100: #B388FF; - --md-deep-purple-A200: #7C4DFF; - --md-deep-purple-A400: #651FFF; - --md-deep-purple-A700: #6200EA; - - --md-indigo-50: #E8EAF6; - --md-indigo-100: #C5CAE9; - --md-indigo-200: #9FA8DA; - --md-indigo-300: #7986CB; - --md-indigo-400: #5C6BC0; - --md-indigo-500: #3F51B5; - --md-indigo-600: #3949AB; - --md-indigo-700: #303F9F; - --md-indigo-800: #283593; - --md-indigo-900: #1A237E; - --md-indigo-A100: #8C9EFF; - --md-indigo-A200: #536DFE; - --md-indigo-A400: #3D5AFE; - --md-indigo-A700: #304FFE; - - --md-blue-50: #E3F2FD; - --md-blue-100: #BBDEFB; - --md-blue-200: #90CAF9; - --md-blue-300: #64B5F6; - --md-blue-400: #42A5F5; - --md-blue-500: #2196F3; - --md-blue-600: #1E88E5; - --md-blue-700: #1976D2; - --md-blue-800: #1565C0; - --md-blue-900: #0D47A1; - --md-blue-A100: #82B1FF; - --md-blue-A200: #448AFF; - --md-blue-A400: #2979FF; - --md-blue-A700: #2962FF; - - --md-light-blue-50: #E1F5FE; - --md-light-blue-100: #B3E5FC; - --md-light-blue-200: #81D4FA; - --md-light-blue-300: #4FC3F7; - --md-light-blue-400: #29B6F6; - --md-light-blue-500: #03A9F4; - --md-light-blue-600: #039BE5; - --md-light-blue-700: #0288D1; - --md-light-blue-800: #0277BD; - --md-light-blue-900: #01579B; - --md-light-blue-A100: #80D8FF; - --md-light-blue-A200: #40C4FF; - --md-light-blue-A400: #00B0FF; - --md-light-blue-A700: #0091EA; - - --md-cyan-50: #E0F7FA; - --md-cyan-100: #B2EBF2; - --md-cyan-200: #80DEEA; - --md-cyan-300: #4DD0E1; - --md-cyan-400: #26C6DA; - --md-cyan-500: #00BCD4; - --md-cyan-600: #00ACC1; - --md-cyan-700: #0097A7; - --md-cyan-800: #00838F; - --md-cyan-900: #006064; - --md-cyan-A100: #84FFFF; - --md-cyan-A200: #18FFFF; - --md-cyan-A400: #00E5FF; - --md-cyan-A700: #00B8D4; - - --md-teal-50: #E0F2F1; - --md-teal-100: #B2DFDB; - --md-teal-200: #80CBC4; - --md-teal-300: #4DB6AC; - --md-teal-400: #26A69A; - --md-teal-500: #009688; - --md-teal-600: #00897B; - --md-teal-700: #00796B; - --md-teal-800: #00695C; - --md-teal-900: #004D40; - --md-teal-A100: #A7FFEB; - --md-teal-A200: #64FFDA; - --md-teal-A400: #1DE9B6; - --md-teal-A700: #00BFA5; - - --md-green-50: #E8F5E9; - --md-green-100: #C8E6C9; - --md-green-200: #A5D6A7; - --md-green-300: #81C784; - --md-green-400: #66BB6A; - --md-green-500: #4CAF50; - --md-green-600: #43A047; - --md-green-700: #388E3C; - --md-green-800: #2E7D32; - --md-green-900: #1B5E20; - --md-green-A100: #B9F6CA; - --md-green-A200: #69F0AE; - --md-green-A400: #00E676; - --md-green-A700: #00C853; - - --md-light-green-50: #F1F8E9; - --md-light-green-100: #DCEDC8; - --md-light-green-200: #C5E1A5; - --md-light-green-300: #AED581; - --md-light-green-400: #9CCC65; - --md-light-green-500: #8BC34A; - --md-light-green-600: #7CB342; - --md-light-green-700: #689F38; - --md-light-green-800: #558B2F; - --md-light-green-900: #33691E; - --md-light-green-A100: #CCFF90; - --md-light-green-A200: #B2FF59; - --md-light-green-A400: #76FF03; - --md-light-green-A700: #64DD17; - - --md-lime-50: #F9FBE7; - --md-lime-100: #F0F4C3; - --md-lime-200: #E6EE9C; - --md-lime-300: #DCE775; - --md-lime-400: #D4E157; - --md-lime-500: #CDDC39; - --md-lime-600: #C0CA33; - --md-lime-700: #AFB42B; - --md-lime-800: #9E9D24; - --md-lime-900: #827717; - --md-lime-A100: #F4FF81; - --md-lime-A200: #EEFF41; - --md-lime-A400: #C6FF00; - --md-lime-A700: #AEEA00; - - --md-yellow-50: #FFFDE7; - --md-yellow-100: #FFF9C4; - --md-yellow-200: #FFF59D; - --md-yellow-300: #FFF176; - --md-yellow-400: #FFEE58; - --md-yellow-500: #FFEB3B; - --md-yellow-600: #FDD835; - --md-yellow-700: #FBC02D; - --md-yellow-800: #F9A825; - --md-yellow-900: #F57F17; - --md-yellow-A100: #FFFF8D; - --md-yellow-A200: #FFFF00; - --md-yellow-A400: #FFEA00; - --md-yellow-A700: #FFD600; - - --md-amber-50: #FFF8E1; - --md-amber-100: #FFECB3; - --md-amber-200: #FFE082; - --md-amber-300: #FFD54F; - --md-amber-400: #FFCA28; - --md-amber-500: #FFC107; - --md-amber-600: #FFB300; - --md-amber-700: #FFA000; - --md-amber-800: #FF8F00; - --md-amber-900: #FF6F00; - --md-amber-A100: #FFE57F; - --md-amber-A200: #FFD740; - --md-amber-A400: #FFC400; - --md-amber-A700: #FFAB00; - - --md-orange-50: #FFF3E0; - --md-orange-100: #FFE0B2; - --md-orange-200: #FFCC80; - --md-orange-300: #FFB74D; - --md-orange-400: #FFA726; - --md-orange-500: #FF9800; - --md-orange-600: #FB8C00; - --md-orange-700: #F57C00; - --md-orange-800: #EF6C00; - --md-orange-900: #E65100; - --md-orange-A100: #FFD180; - --md-orange-A200: #FFAB40; - --md-orange-A400: #FF9100; - --md-orange-A700: #FF6D00; - - --md-deep-orange-50: #FBE9E7; - --md-deep-orange-100: #FFCCBC; - --md-deep-orange-200: #FFAB91; - --md-deep-orange-300: #FF8A65; - --md-deep-orange-400: #FF7043; - --md-deep-orange-500: #FF5722; - --md-deep-orange-600: #F4511E; - --md-deep-orange-700: #E64A19; - --md-deep-orange-800: #D84315; - --md-deep-orange-900: #BF360C; - --md-deep-orange-A100: #FF9E80; - --md-deep-orange-A200: #FF6E40; - --md-deep-orange-A400: #FF3D00; - --md-deep-orange-A700: #DD2C00; - - --md-brown-50: #EFEBE9; - --md-brown-100: #D7CCC8; - --md-brown-200: #BCAAA4; - --md-brown-300: #A1887F; - --md-brown-400: #8D6E63; - --md-brown-500: #795548; - --md-brown-600: #6D4C41; - --md-brown-700: #5D4037; - --md-brown-800: #4E342E; - --md-brown-900: #3E2723; - - --md-grey-50: #FAFAFA; - --md-grey-100: #F5F5F5; - --md-grey-200: #EEEEEE; - --md-grey-300: #E0E0E0; - --md-grey-400: #BDBDBD; - --md-grey-500: #9E9E9E; - --md-grey-600: #757575; - --md-grey-700: #616161; - --md-grey-800: #424242; - --md-grey-900: #212121; - - --md-blue-grey-50: #ECEFF1; - --md-blue-grey-100: #CFD8DC; - --md-blue-grey-200: #B0BEC5; - --md-blue-grey-300: #90A4AE; - --md-blue-grey-400: #78909C; - --md-blue-grey-500: #607D8B; - --md-blue-grey-600: #546E7A; - --md-blue-grey-700: #455A64; - --md-blue-grey-800: #37474F; - --md-blue-grey-900: #263238; -} \ No newline at end of file diff --git a/ui-tests/tests/voila.test.ts-snapshots/reveal-linux.png b/ui-tests/tests/voila.test.ts-snapshots/reveal-linux.png index 60c1c1288..ea9596e94 100644 Binary files a/ui-tests/tests/voila.test.ts-snapshots/reveal-linux.png and b/ui-tests/tests/voila.test.ts-snapshots/reveal-linux.png differ