Backport PR #11658 on branch 3.3.x (Increase color contrast in input boxes) (#11922)

* Backport PR #11658: Increase color contrast in input boxes

* Update snapshots

Co-authored-by: Isabela Presedo-Floyd <50221806+isabela-pf@users.noreply.github.com>

packages/filebrowser/style/base.css

@@ -99,7 +99,7 @@
   .jp-Toolbar-item:first-child
   .jp-ToolbarButtonComponent
   .jp-icon3 {
-  fill: white;
+  fill: var(--jp-layout-color1);
 }
 
 /*-----------------------------------------------------------------------------

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

@@ -93,6 +93,7 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-border-color1: var(--md-grey-700);
   --jp-border-color2: var(--md-grey-800);
   --jp-border-color3: var(--md-grey-900);
+  --jp-inverse-border-color: var(--md-grey-600);
   --jp-border-radius: 2px;
 
   /* UI Fonts
@@ -330,7 +331,7 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-input-active-background: var(--jp-layout-color0);
   --jp-input-hover-background: var(--jp-layout-color2);
   --jp-input-background: var(--md-grey-800);
-  --jp-input-border-color: var(--jp-border-color1);
+  --jp-input-border-color: var(--jp-inverse-border-color);
   --jp-input-active-border-color: var(--jp-brand-color1);
   --jp-input-active-box-shadow-color: rgba(19, 124, 189, 0.3);
 

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

@@ -91,6 +91,7 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-border-color1: var(--md-grey-400);
   --jp-border-color2: var(--md-grey-300);
   --jp-border-color3: var(--md-grey-200);
+  --jp-inverse-border-color: var(--md-grey-600);
   --jp-border-radius: 2px;
 
   /* UI Fonts
@@ -327,7 +328,7 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-input-active-background: var(--jp-layout-color1);
   --jp-input-hover-background: var(--jp-layout-color1);
   --jp-input-background: var(--md-grey-100);
-  --jp-input-border-color: var(--jp-border-color1);
+  --jp-input-border-color: var(--jp-inverse-border-color);
   --jp-input-active-border-color: var(--jp-brand-color1);
   --jp-input-active-box-shadow-color: rgba(19, 124, 189, 0.3);