svg theming is now working, needs a bunch of fixes

packages/application/style/images.css

@@ -3,6 +3,24 @@
 | Distributed under the terms of the Modified BSD License.
 |----------------------------------------------------------------------------*/
 
+/* CSS for generic svg icons */
+.jp-icon {
+  fill: var(--jp-ui-font-color0);
+  stroke: var(--jp-ui-font-color0);
+}
+
+.jp-icon-accent0 {
+  fill: var(--jp-layout-color0);
+  stroke: var(--jp-layout-color0);
+}
+
+.jp-icon-accent1 {
+  fill: var(--jp-layout-color1);
+  stroke: var(--jp-layout-color1);
+}
+
+/* CSS for specific icons */
+
 .jp-ImageJupyterLab {
   background-image: var(--jp-image-jupyterlab);
 }

packages/notebook/src/svg.d.ts

@@ -0,0 +1,5 @@
+declare module '*.svg' {
+  import { HTMLAttributes } from 'react';
+  const value: React.ComponentType<HTMLAttributes<SVGElement>>;
+  export default value;
+}

packages/notebook/src/truststatus.tsx

@@ -6,10 +6,13 @@ import { INotebookModel, Notebook } from '.';
 
 import { Cell } from '@jupyterlab/cells';
 
-import { IconItem } from '@jupyterlab/statusbar';
+import { SVGIconItem } from '@jupyterlab/statusbar';
 
 import { toArray } from '@phosphor/algorithm';
 
+import NotTrustedIcon from '../style/not-trusted-icon.svg';
+import TrustedIcon from '../style/trusted-icon.svg';
+
 /**
  * Determine the notebook trust status message.
  */
@@ -50,8 +53,11 @@ function cellTrust(
 function NotebookTrustComponent(
   props: NotebookTrustComponent.IProps
 ): React.ReactElement<NotebookTrustComponent.IProps> {
-  const source = cellTrust(props)[1];
-  return <IconItem source={source} offset={{ x: 0, y: 2 }} />;
+  if (props.allCellsTrusted) {
+    return <SVGIconItem SVG={TrustedIcon} offset={{ x: 0, y: 2 }} />;
+  } else {
+    return <SVGIconItem SVG={NotTrustedIcon} offset={{ x: 0, y: 2 }} />;
+  }
 }
 
 /**

packages/notebook/style/index.css

@@ -19,7 +19,6 @@
 |----------------------------------------------------------------------------*/
 
 @import './toolbar.css';
-@import './status.css';
 
 /*-----------------------------------------------------------------------------
 | Notebook

packages/statusbar/src/components/icon.tsx

@@ -41,26 +41,40 @@ export function IconItem(
 }
 
 /**
- * A namespace for IconItem statics.
+ * A namespace for SVGIconItem statics.
  */
 export namespace SVGIconItem {
   /**
-   * Props for an IconItem
+   * Props for an SVGIconItem
    */
   export interface IProps {
     /**
      * The inline svg
      */
-    Src: ComponentType<HTMLAttributes<SVGElement>>;
+    SVG: ComponentType<HTMLAttributes<SVGElement>>;
   }
 }
 
 export function SVGIconItem(
   props: SVGIconItem.IProps &
-    React.HTMLAttributes<HTMLImageElement> & {
+    React.HTMLAttributes<SVGElement> & {
       offset: { x: number; y: number };
     }
 ): React.ReactElement<SVGIconItem.IProps> {
-  const { Src, className, offset } = props;
-  return <Src className={classes(className, style(icon(offset)))} />;
+  const { SVG, className, offset, ...rest } = props;
+  return <SVG className={classes(className, style(icon(offset)))} {...rest} />;
+}
+
+export function SVGInputItem(
+  props: SVGIconItem.IProps &
+    React.HTMLAttributes<SVGElement> &
+    React.HTMLAttributes<HTMLInputElement>
+): React.ReactElement<SVGIconItem.IProps> {
+  const { SVG, className, ...rest } = props;
+  return (
+    <SVG
+      className={classes(className, style(icon({ x: 0, y: 0 })))}
+      {...rest}
+    />
+  );
 }

packages/statusbar/src/defaults/index.ts

@@ -1,8 +1,6 @@
 // Copyright (c) Jupyter Development Team.
 // Distributed under the terms of the Modified BSD License.
 
-import '../../style/index.css';
-
 export * from './lineCol';
 export * from './kernelStatus';
 export * from './runningSessions';

packages/statusbar/src/defaults/lineCol.tsx

@@ -20,6 +20,8 @@ import {
 
 import { classes } from 'typestyle/lib';
 
+import LineFormIcon from '../../style/line-form.svg';
+
 /**
  * A namespace for LineFormComponent statics.
  */
@@ -112,11 +114,14 @@ class LineFormComponent extends React.Component<
               }}
             />
 
-            <input
-              type="submit"
-              className={classes(lineFormButton, 'jp-StatusItem-line-form')}
-              value=""
-            />
+            <div>
+              <LineFormIcon />
+              <input
+                type="submit"
+                className={classes(lineFormButton)}
+                value=""
+              />
+            </div>
           </div>
           <label className={lineFormCaption}>
             Go to line number between 1 and {this.props.maxLine}

packages/statusbar/src/defaults/runningSessions.tsx

@@ -13,15 +13,10 @@ import {
   SessionManager
 } from '@jupyterlab/services';
 
-import {
-  GroupItem,
-  IconItem,
-  SVGIconItem,
-  interactiveItem,
-  TextItem
-} from '..';
+import { GroupItem, SVGIconItem, interactiveItem, TextItem } from '..';
 
 import KernelIcon from '../../style/kernel-icon.svg';
+import TerminalIcon from '../../style/terminal-icon.svg';
 
 /**
  * Half spacing between subitems in a status item.
@@ -42,11 +37,11 @@ function RunningSessionsComponent(
     <GroupItem spacing={HALF_SPACING} onClick={props.handleClick}>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.terminals} />
-        <IconItem source={'jp-StatusItem-terminal'} offset={{ x: 1, y: 3 }} />
+        <SVGIconItem SVG={TerminalIcon} offset={{ x: 1, y: 3 }} />
       </GroupItem>
       <GroupItem spacing={HALF_SPACING}>
         <TextItem source={props.kernels} />
-        <SVGIconItem Src={KernelIcon} offset={{ x: 0, y: 2 }} />
+        <SVGIconItem SVG={KernelIcon} offset={{ x: 0, y: 2 }} />
       </GroupItem>
     </GroupItem>
   );