cleanup of splash icon handling

packages/application/style/icons.css

@@ -190,8 +190,15 @@
   fill: var(--jp-brand-color1);
 }
 
+/* special handling for splash icon CSS. While the theme CSS reloads during
+   splash, the splash icon can loose theming. To prevent that, we set a
+   default for its color variable */
+:root {
+  --jp-warn-color0: var(--md-orange-700);
+}
+
 /**
- * Deprecated support for icons as CSS `background-images`
+ * (DEPRECATED) Support for icons as CSS `background-images`
  */
 
 .jp-MaterialIcon {

packages/apputils-extension/src/index.ts

@@ -297,7 +297,7 @@ const splash: JupyterFrontEndPlugin<ISplashScreen> = {
       name: 'jupyter-favicon',
       container: logo,
       center: true,
-      width: '100px'
+      kind: 'splash'
     });
 
     galaxy.appendChild(logo);

packages/apputils-extension/style/splash.css

@@ -33,13 +33,6 @@
   height: 100%;
 }
 
-#main-logo {
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-  animation: 0.3s fade-in linear forwards;
-}
-
 .planet {
   background-repeat: no-repeat;
   background-size: cover;

packages/ui-components/src/style/icon.ts

@@ -12,6 +12,7 @@ import { NestedCSSProperties } from 'typestyle/lib/types';
  * - listing: The icons to the left of the filebrowser listing items
  * - settingsEditor: The icons to the left of each section of the settings editor
  * - sideBar: The icons for the sidebar (default to the left of the main window)
+ * - splash: The icon used for the splash screen
  * - tabManager: The icons for the tabManager in the sidebar
  */
 export type IconKindType =
@@ -22,6 +23,7 @@ export type IconKindType =
   | 'listing'
   | 'settingsEditor'
   | 'sideBar'
+  | 'splash'
   | 'statusBar'
   | 'tabManager'
   | 'unset';
@@ -107,6 +109,10 @@ const iconCSSSideBar: NestedCSSProperties = {
   width: '20px'
 };
 
+const iconCSSSplash: NestedCSSProperties = {
+  width: '100px'
+};
+
 const iconCSSStatusBar: NestedCSSProperties = {
   left: '0px',
   top: '0px',
@@ -128,6 +134,7 @@ const iconCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   listing: iconCSSListing,
   settingsEditor: iconCSSSettingsEditor,
   sideBar: iconCSSSideBar,
+  splash: iconCSSSplash,
   statusBar: iconCSSStatusBar,
   tabManager: iconCSSTabManager,
   unset: {}
@@ -164,6 +171,13 @@ const containerCSSSideBar: NestedCSSProperties = {
   transform: 'rotate(90deg)'
 };
 
+const containerCSSSplash: NestedCSSProperties = {
+  animation: '0.3s fade-in linear forwards',
+  height: '100%',
+  width: '100%',
+  zIndex: 1
+};
+
 const containerCSSTabManager: NestedCSSProperties = {
   marginRight: '2px',
   position: 'relative'
@@ -177,6 +191,7 @@ const containerCSSKind: { [k in IconKindType]: NestedCSSProperties } = {
   listing: containerCSSListing,
   settingsEditor: containerCSSSettingsEditor,
   sideBar: containerCSSSideBar,
+  splash: containerCSSSplash,
   statusBar: {},
   tabManager: containerCSSTabManager,
   unset: {}