All svg formatting is fixed and at parity with master

Still need to expose the remaining non-theme svgs

packages/application/style/images.css

@@ -4,9 +4,12 @@
 |----------------------------------------------------------------------------*/
 
 /* CSS for generic svg icons */
-.jp-icon {
-  fill: var(--jp-ui-font-color0);
-  stroke: var(--jp-ui-font-color0);
+.jp-icon-fill {
+  fill: var(--jp-ui-font-color1);
+}
+
+.jp-icon-stroke {
+  stroke: var(--jp-ui-font-color1);
 }
 
 .jp-icon-accent0 {

packages/statusbar/src/components/icon.tsx

@@ -64,17 +64,3 @@ export function SVGIconItem(
   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/components/lineForm.tsx

@@ -0,0 +1,49 @@
+// Copyright (c) Jupyter Development Team.
+// Distributed under the terms of the Modified BSD License.
+
+import React, { ComponentType, HTMLAttributes } from 'react';
+
+import {
+  lineFormButtonDiv,
+  lineFormButtonIcon,
+  lineFormButton
+} from '../style/lineForm';
+
+/**
+ * A namespace for LineFormButtonItem statics.
+ */
+export namespace LineFormButtonItem {
+  /**
+   * Props for an LineFormButtonItem
+   */
+  export interface IProps {
+    /**
+     * The inline svg
+     */
+    SVG: ComponentType<HTMLAttributes<SVGElement>>;
+
+    /**
+     * The input type
+     */
+    type: string;
+
+    /**
+     * The input value
+     */
+    value: string;
+  }
+}
+
+export function LineFormButtonItem(
+  props: LineFormButtonItem.IProps &
+    React.HTMLAttributes<SVGElement> &
+    React.HTMLAttributes<HTMLInputElement>
+): React.ReactElement<LineFormButtonItem.IProps> {
+  const { SVG, type, value, ...rest } = props;
+  return (
+    <div className={lineFormButtonDiv}>
+      <SVG className={lineFormButtonIcon} {...rest} />
+      <input type={type} className={lineFormButton} value={value} />
+    </div>
+  );
+}

packages/statusbar/src/defaults/lineCol.tsx

@@ -7,18 +7,19 @@ import { VDomRenderer, VDomModel, ReactWidget } from '@jupyterlab/apputils';
 
 import { CodeEditor } from '@jupyterlab/codeeditor';
 
-import { interactiveItem, showPopup, Popup, TextItem } from '..';
+import { classes } from 'typestyle/lib';
+
+import { interactiveItem, Popup, showPopup, TextItem } from '..';
 
 import {
   lineFormWrapper,
   lineFormInput,
   lineFormSearch,
   lineFormWrapperFocusWithin,
-  lineFormCaption,
-  lineFormButton
+  lineFormCaption
 } from '../style/lineForm';
 
-import { classes } from 'typestyle/lib';
+import { LineFormButtonItem } from '../components/lineForm';
 
 import LineFormIcon from '../../style/line-form.svg';
 
@@ -113,15 +114,7 @@ class LineFormComponent extends React.Component<
                 this._textInput = input;
               }}
             />
-
-            <div>
-              <LineFormIcon />
-              <input
-                type="submit"
-                className={classes(lineFormButton)}
-                value=""
-              />
-            </div>
+            <LineFormButtonItem SVG={LineFormIcon} type="submit" value="" />
           </div>
           <label className={lineFormCaption}>
             Go to line number between 1 and {this.props.maxLine}

packages/statusbar/src/style/lineForm.ts

@@ -2,6 +2,7 @@
 // Distributed under the terms of the Modified BSD License.
 
 import { style } from 'typestyle/lib';
+import { NestedCSSProperties } from 'typestyle/lib/types';
 
 export const hoverItem = style({
   boxShadow: '0px 4px 4px rgba(0, 0, 0, 0.25)'
@@ -22,21 +23,39 @@ export const lineFormCaption = style({
   color: 'var(--jp-ui-font-color0)'
 });
 
-export const lineFormButton = style({
-  color: 'white',
+export const baseLineForm: NestedCSSProperties = {
   border: 'none',
   borderRadius: '0px',
-  backgroundColor: 'var(--jp-brand-color1)',
   position: 'absolute',
+  backgroundSize: '16px',
+  backgroundRepeat: 'no-repeat',
+  backgroundPosition: 'center',
+  outline: 'none',
+  top: '0px',
+  right: '0px'
+};
+
+export const lineFormButtonDiv = style(baseLineForm, {
   top: '4px',
   right: '8px',
   height: '24px',
-  width: '12px',
   padding: '0px 12px',
-  backgroundSize: '16px',
-  backgroundRepeat: 'no-repeat',
-  backgroundPosition: 'center',
-  outline: 'none'
+  width: '12px'
+});
+
+export const lineFormButtonIcon = style(baseLineForm, {
+  backgroundColor: 'var(--jp-brand-color1)',
+  height: '100%',
+  width: '100%',
+  boxSizing: 'border-box',
+  padding: '4px 6px'
+});
+
+export const lineFormButton = style(baseLineForm, {
+  backgroundColor: 'transparent',
+  height: '100%',
+  width: '100%',
+  boxSizing: 'border-box'
 });
 
 export const lineFormWrapper = style({