fixing up colors

packages/application/style/images.css

@@ -6,29 +6,35 @@
 /* CSS for generic svg icons */
 /* recolor the primary elements of an icon */
 .jp-icon0[fill] {
-  fill: var(--jp-ui-font-color0);
+  fill: var(--jp-inverse-layout-color0);
 }
 .jp-icon1[fill] {
-  fill: var(--jp-ui-font-color1);
+  fill: var(--jp-inverse-layout-color1);
 }
 .jp-icon2[fill] {
-  fill: var(--jp-ui-font-color2);
+  fill: var(--jp-inverse-layout-color2);
 }
 .jp-icon3[fill] {
-  fill: var(--jp-ui-font-color3);
+  fill: var(--jp-inverse-layout-color3);
+}
+.jp-icon4[fill] {
+  fill: var(--jp-inverse-layout-color4);
 }
 
 .jp-icon0[stroke] {
-  stroke: var(--jp-ui-font-color0);
+  stroke: var(--jp-inverse-layout-color0);
 }
 .jp-icon1[stroke] {
-  stroke: var(--jp-ui-font-color1);
+  stroke: var(--jp-inverse-layout-color1);
 }
 .jp-icon2[stroke] {
-  stroke: var(--jp-ui-font-color2);
+  stroke: var(--jp-inverse-layout-color2);
 }
 .jp-icon3[stroke] {
-  stroke: var(--jp-ui-font-color3);
+  stroke: var(--jp-inverse-layout-color3);
+}
+.jp-icon4[stroke] {
+  stroke: var(--jp-inverse-layout-color4);
 }
 
 /* recolor the accent elements of an icon */
@@ -64,7 +70,7 @@
   stroke: var(--jp-layout-color4);
 }
 
-/* misc icons colors taken from the theme stylesheets */
+/* brand icon colors. Same for light and dark */
 .jp-icon-brand0[fill] {
   fill: var(--jp-brand-color0);
 }
@@ -77,6 +83,9 @@
 .jp-icon-brand3[fill] {
   fill: var(--jp-brand-color3);
 }
+.jp-icon-brand4[fill] {
+  fill: var(--jp-brand-color4);
+}
 
 .jp-icon-brand0[stroke] {
   stroke: var(--jp-brand-color0);
@@ -90,14 +99,36 @@
 .jp-icon-brand3[stroke] {
   stroke: var(--jp-brand-color3);
 }
+.jp-icon-brand4[stroke] {
+  stroke: var(--jp-brand-color4);
+}
 
+/* warn icon colors. Same for light and dark */
 .jp-icon-warn0[fill] {
   fill: var(--jp-warn-color0);
 }
+.jp-icon-warn1[fill] {
+  fill: var(--jp-warn-color1);
+}
+.jp-icon-warn2[fill] {
+  fill: var(--jp-warn-color2);
+}
+.jp-icon-warn3[fill] {
+  fill: var(--jp-warn-color3);
+}
 
 .jp-icon-warn0[stroke] {
   stroke: var(--jp-warn-color0);
 }
+.jp-icon-warn1[stroke] {
+  stroke: var(--jp-warn-color1);
+}
+.jp-icon-warn2[stroke] {
+  stroke: var(--jp-warn-color2);
+}
+.jp-icon-warn3[stroke] {
+  stroke: var(--jp-warn-color3);
+}
 
 /* CSS for specific icons */
 

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

@@ -223,6 +223,7 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-brand-color1: var(--md-blue-500);
   --jp-brand-color2: var(--md-blue-300);
   --jp-brand-color3: var(--md-blue-100);
+  --jp-brand-color4: var(--md-blue-50);
 
   --jp-accent-color0: var(--md-green-700);
   --jp-accent-color1: var(--md-green-500);

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

@@ -221,6 +221,7 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-brand-color1: var(--md-blue-500);
   --jp-brand-color2: var(--md-blue-300);
   --jp-brand-color3: var(--md-blue-100);
+  --jp-brand-color4: var(--md-blue-50);
 
   --jp-accent-color0: var(--md-green-700);
   --jp-accent-color1: var(--md-green-500);

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

@@ -82,8 +82,8 @@ export namespace Icon {
   // create the array of default icon models
   let icons: IModel[];
   try {
+    // require.context is supplied by Webpack, and doesn't play nice with jest
     icons = importSvgs(
-      // require.context is supplied by Webpack, and doesn't play nice with jest
       require.context('raw-loader!../../style/icons', true, /\.svg$/),
       ['bad', 'blank']
     );

packages/ui-components/style/icons/sidebar/build.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
     <path
-        class="jp-icon2"
+        class="jp-icon3"
         fill="#616161"
         d="M22.7 19l-9.1-9.1c.9-2.3.4-5-1.5-6.9-2-2-5-2.4-7.4-1.3L9 6 6 9 1.6 4.7C.4 7.1.9 10.1 2.9 12.1c1.9 1.9 4.6 2.4 6.9 1.5l9.1 9.1c.4.4 1 .4 1.4 0l2.3-2.3c.5-.4.5-1.1.1-1.4z"
     />

packages/ui-components/style/icons/sidebar/extension.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
     <path
-        class="jp-icon2"
+        class="jp-icon3"
         fill="#616161"
         d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"
     />

packages/ui-components/style/icons/sidebar/folder.svg

@@ -1,7 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
-    <path
-        class="jp-icon2"
-        fill="#616161"
-        d="M10 4H4c-1.1 0-1.99.9-1.99 2L2 18c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V8c0-1.1-.9-2-2-2h-8l-2-2z"
-    />
-</svg>

packages/ui-components/style/icons/sidebar/notes.md

@@ -0,0 +1 @@
+- The filebrowser sidebar icon can be found at `packages/ui-components/style/icons/filetype/folder.svg`

packages/ui-components/style/icons/sidebar/palette.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
     <path
-        class="jp-icon2"
+        class="jp-icon3"
         fill="#616161"
         d="M12 3c-4.97 0-9 4.03-9 9s4.03 9 9 9c.83 0 1.5-.67 1.5-1.5 0-.39-.15-.74-.39-1.01-.23-.26-.38-.61-.38-.99 0-.83.67-1.5 1.5-1.5H16c2.76 0 5-2.24 5-5 0-4.42-4.03-8-9-8zm-5.5 9c-.83 0-1.5-.67-1.5-1.5S5.67 9 6.5 9 8 9.67 8 10.5 7.33 12 6.5 12zm3-4C8.67 8 8 7.33 8 6.5S8.67 5 9.5 5s1.5.67 1.5 1.5S10.33 8 9.5 8zm5 0c-.83 0-1.5-.67-1.5-1.5S13.67 5 14.5 5s1.5.67 1.5 1.5S15.33 8 14.5 8zm3 4c-.83 0-1.5-.67-1.5-1.5S16.67 9 17.5 9s1.5.67 1.5 1.5-.67 1.5-1.5 1.5z"
     />

packages/ui-components/style/icons/sidebar/running.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" class="bar">
     <path
-        class="jp-icon2"
+        class="jp-icon3"
         fill="#616161"
         d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm96 328c0 8.8-7.2 16-16 16H176c-8.8 0-16-7.2-16-16V176c0-8.8 7.2-16 16-16h160c8.8 0 16 7.2 16 16v160z"
     ></path>>

packages/ui-components/style/icons/sidebar/tab.svg

@@ -1,6 +1,6 @@
 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
     <path
-        class="jp-icon2"
+        class="jp-icon3"
         fill="#616161"
         d="M21 3H3c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h18c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm0 16H3V5h10v4h8v10z"
     />