Elevation based shadows and CSS variables (#3468)

* Add default MD elevation shadows

* More detailed shadow model.

* Using eleveation CSS in launcher

* Update dark theme shadows.

* Update UI elements to use elevation based shadows.

packages/application/style/menus.css

@@ -50,7 +50,7 @@
   background: var(--jp-layout-color0);
   border-left: var(--jp-border-width) solid var(--jp-border-color1);
   border-right: var(--jp-border-width) solid var(--jp-border-color1);
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--jp-elevation-z6);
 }
 
 
@@ -84,7 +84,7 @@
   color: var(--jp-ui-font-color1);
   border: var(--jp-border-width) solid var(--jp-border-color1);
   font-size: var(--jp-ui-font-size1);
-  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--jp-elevation-z6);
 }
 
 

packages/application/style/tabs.css

@@ -185,7 +185,7 @@
   background: var(--jp-layout-color1);
   border: var(--jp-border-width) solid var(--jp-border-color1);
   border-top: var(--jp-border-width) solid var(--jp-brand-color1);
-  box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
+  box-shadow: var(--jp-elevation-z4);
   color: var(--jp-ui-font-color1);
   font-size: var(--jp-ui-font-size1);
   line-height: var(--jp-private-horizontal-tab-height);

packages/apputils/style/dialog.css

@@ -37,7 +37,7 @@
   max-width: 500px;
   max-height: 500px;
   box-sizing: border-box;
-  box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.5);
+  box-shadow: var(--jp-elevation-z20);
   word-wrap: break-word;
   border-radius: var(--jp-border-radius);
 }

packages/completer/style/index.css

@@ -15,7 +15,7 @@
   background: var(--jp-layout-color1);
   color: var(--jp-content-font-color1);
   border: var(--jp-border-width) solid var(--jp-border-color1);
-  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--jp-elevation-z6);
   list-style-type: none;
   overflow: auto;
   padding: 0;

packages/console/style/index.css

@@ -81,7 +81,7 @@
 
 /* collapser is hovered */
 .jp-CodeConsole-content .jp-Cell .jp-Collapser:hover {
-  box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.25);
+  box-shadow: var(--jp-elevation-z2);
   background: var(--jp-brand-color1);
   opacity: var(--jp-cell-collapser-not-active-hover-opacity);
 }

packages/csvviewer/style/index.css

@@ -18,12 +18,10 @@
     display: flex;
     flex: 0 0 auto;
     flex-direction: row;
-    border-bottom: var(--jp-border-width) solid var(--jp-toolbar-border-color);
-    /* Add the border width because this is border-box sized */
-    height: calc(var(--jp-private-csvviewer-toolbar-height) + var(--jp-border-width));
+    border: none;
+    height: var(--jp-private-csvviewer-toolbar-height);
     background: var(--jp-toolbar-background);
     z-index: 1;
-    box-shadow: var(--jp-toolbar-box-shadow);
 }
 
 .jp-CSVToolbar .jp-CSVToolbar-label {

packages/filebrowser/style/index.css

@@ -302,7 +302,7 @@
   margin-left: 4px;
   width: 160px;
   background-color: rgba(255,255,255,.7);
-  box-shadow: 0 3px 6px rgba(0,0,0,0.16), 0 3px 6px rgba(0,0,0,0.23);
+  box-shadow: var(--jp-elevation-z2);
   border-radius: 0px;
   color: var(--jp-ui-font-color1);
   transform: translateX(-2%) translateY(4%);

packages/launcher/style/index.css

@@ -132,14 +132,14 @@
   padding: 0px;
   border: 1px solid var(--jp-border-color1);
   background: var(--jp-layout-color1);
-  box-shadow: 0px 1px 1px 1px rgba(0,0,0,.08);
+  box-shadow: var(--jp-elevation-z2);
   transition: .2s box-shadow;
   border-radius: var(--jp-border-radius);
 }
 
 
 .jp-LauncherCard:hover {
-  box-shadow: 0px 2px 4px 1px rgba(0,0,0,.20);
+  box-shadow: var(--jp-elevation-z6);
 }
 
 

packages/notebook/style/index.css

@@ -103,7 +103,7 @@
 
 /* collapser is hovered */
 .jp-Notebook .jp-Cell .jp-Collapser:hover {
-  box-shadow: 0px 0px 2px 0px rgba(0,0,0,0.25);
+  box-shadow: var(--jp-elevation-z2);
   background: var(--jp-brand-color1);
   opacity: var(--jp-cell-collapser-not-active-hover-opacity);
 }

packages/theme-dark-extension/style/variables.css

@@ -27,6 +27,49 @@ all of MD as it is not optimized for dense, information rich UIs.
 
 :root {
 
+  /* Elevation
+   *
+   * We style box-shadows using Material Design's idea of elevation. These particular numbers are taken from here:
+   * 
+   * https://github.com/material-components/material-components-web
+   * https://material-components-web.appspot.com/elevation.html
+   */
+
+  /* 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), var(--jp-shadow-base-lightness), 0.2);
+  --jp-shadow-penumbra-color: rgba(var(--jp-shadow-base-lightness), var(--jp-shadow-base-lightness), var(--jp-shadow-base-lightness), 0.14);
+  --jp-shadow-ambient-color: rgba(var(--jp-shadow-base-lightness), var(--jp-shadow-base-lightness), var(--jp-shadow-base-lightness), 0.12);
+  --jp-elevation-z0: none;
+  --jp-elevation-z1: 0px 2px 1px -1px var(--jp-shadow-umbra-color),
+                     0px 1px 1px 0px var(--jp-shadow-penumbra-color),
+                     0px 1px 3px 0px var(--jp-shadow-ambient-color);
+  --jp-elevation-z2: 0px 3px 1px -2px var(--jp-shadow-umbra-color),
+                     0px 2px 2px 0px var(--jp-shadow-penumbra-color),
+                     0px 1px 5px 0px var(--jp-shadow-ambient-color);
+  --jp-elevation-z4: 0px 2px 4px -1px var(--jp-shadow-umbra-color),
+                     0px 4px 5px 0px var(--jp-shadow-penumbra-color),
+                     0px 1px 10px 0px var(--jp-shadow-ambient-color);
+  --jp-elevation-z6: 0px 3px 5px -1px var(--jp-shadow-umbra-color),
+                     0px 6px 10px 0px var(--jp-shadow-penumbra-color),
+                     0px 1px 18px 0px var(--jp-shadow-ambient-color);
+  --jp-elevation-z8: 0px 5px 5px -3px var(--jp-shadow-umbra-color),
+                     0px 8px 10px 1px var(--jp-shadow-penumbra-color),
+                     0px 3px 14px 2px var(--jp-shadow-ambient-color);
+  --jp-elevation-z12: 0px 7px 8px -4px var(--jp-shadow-umbra-color),
+                      0px 12px 17px 2px var(--jp-shadow-penumbra-color),
+                      0px 5px 22px 4px var(--jp-shadow-ambient-color);
+  --jp-elevation-z16: 0px 8px 10px -5px var(--jp-shadow-umbra-color),
+                      0px 16px 24px 2px var(--jp-shadow-penumbra-color),
+                      0px 6px 30px 5px var(--jp-shadow-ambient-color);
+  --jp-elevation-z20: 0px 10px 13px -6px var(--jp-shadow-umbra-color),
+                      0px 20px 31px 3px var(--jp-shadow-penumbra-color),
+                      0px 8px 38px 7px var(--jp-shadow-ambient-color);
+  --jp-elevation-z24: 0px 11px 15px -7px var(--jp-shadow-umbra-color),
+                      0px 24px 38px 3px var(--jp-shadow-penumbra-color),
+                      0px 9px 46px 8px var(--jp-shadow-ambient-color);
+
   /* Borders
    *
    * The following variables, specify the visual styling of borders in JupyterLab.

packages/theme-light-extension/style/variables.css

@@ -27,6 +27,47 @@ all of MD as it is not optimized for dense, information rich UIs.
 
 :root {
 
+  /* Elevation
+   *
+   * We style box-shadows using Material Design's idea of elevation. These particular numbers are taken from here:
+   * 
+   * https://github.com/material-components/material-components-web
+   * https://material-components-web.appspot.com/elevation.html
+   */
+
+  --jp-shadow-base-lightness: 0;
+  --jp-shadow-umbra-color: rgba(var(--jp-shadow-base-lightness), var(--jp-shadow-base-lightness), var(--jp-shadow-base-lightness), 0.2);
+  --jp-shadow-penumbra-color: rgba(var(--jp-shadow-base-lightness), var(--jp-shadow-base-lightness), var(--jp-shadow-base-lightness), 0.14);
+  --jp-shadow-ambient-color: rgba(var(--jp-shadow-base-lightness), var(--jp-shadow-base-lightness), var(--jp-shadow-base-lightness), 0.12);
+  --jp-elevation-z0: none;
+  --jp-elevation-z1: 0px 2px 1px -1px var(--jp-shadow-umbra-color),
+                     0px 1px 1px 0px var(--jp-shadow-penumbra-color),
+                     0px 1px 3px 0px var(--jp-shadow-ambient-color);
+  --jp-elevation-z2: 0px 3px 1px -2px var(--jp-shadow-umbra-color),
+                     0px 2px 2px 0px var(--jp-shadow-penumbra-color),
+                     0px 1px 5px 0px var(--jp-shadow-ambient-color);
+  --jp-elevation-z4: 0px 2px 4px -1px var(--jp-shadow-umbra-color),
+                     0px 4px 5px 0px var(--jp-shadow-penumbra-color),
+                     0px 1px 10px 0px var(--jp-shadow-ambient-color);
+  --jp-elevation-z6: 0px 3px 5px -1px var(--jp-shadow-umbra-color),
+                     0px 6px 10px 0px var(--jp-shadow-penumbra-color),
+                     0px 1px 18px 0px var(--jp-shadow-ambient-color);
+  --jp-elevation-z8: 0px 5px 5px -3px var(--jp-shadow-umbra-color),
+                     0px 8px 10px 1px var(--jp-shadow-penumbra-color),
+                     0px 3px 14px 2px var(--jp-shadow-ambient-color);
+  --jp-elevation-z12: 0px 7px 8px -4px var(--jp-shadow-umbra-color),
+                      0px 12px 17px 2px var(--jp-shadow-penumbra-color),
+                      0px 5px 22px 4px var(--jp-shadow-ambient-color);
+  --jp-elevation-z16: 0px 8px 10px -5px var(--jp-shadow-umbra-color),
+                      0px 16px 24px 2px var(--jp-shadow-penumbra-color),
+                      0px 6px 30px 5px var(--jp-shadow-ambient-color);
+  --jp-elevation-z20: 0px 10px 13px -6px var(--jp-shadow-umbra-color),
+                      0px 20px 31px 3px var(--jp-shadow-penumbra-color),
+                      0px 8px 38px 7px var(--jp-shadow-ambient-color);
+  --jp-elevation-z24: 0px 11px 15px -7px var(--jp-shadow-umbra-color),
+                      0px 24px 38px 3px var(--jp-shadow-penumbra-color),
+                      0px 9px 46px 8px var(--jp-shadow-ambient-color);
+
   /* Borders
    *
    * The following variables, specify the visual styling of borders in JupyterLab.

packages/tooltip/style/index.css

@@ -7,7 +7,7 @@
   background: var(--jp-layout-color1);
   border: var(--jp-border-width) solid var(--jp-border-color1);
   font-size: var(--jp-ui-font-size0);
-  box-shadow: 0px 1px 6px rgba(0, 0, 0, 0.2);
+  box-shadow: var(--jp-elevation-z6);
   max-width: 650px;
   z-index: 10001;
   padding: 4px;