diff --git a/packages/apputils/style/commandpalette.css b/packages/apputils/style/commandpalette.css
index 553cf6f80ac7..5fb6fd2d0670 100644
--- a/packages/apputils/style/commandpalette.css
+++ b/packages/apputils/style/commandpalette.css
@@ -43,8 +43,8 @@
 }
 
 .p-CommandPalette.p-mod-focused .p-CommandPalette-wrapper {
-  box-shadow: inset 0 0 0 1px rgba(19, 124, 189, 0.3),
-    inset 0 0 0 3px rgba(19, 124, 189, 0.3);
+  box-shadow: inset 0 0 0 1px var(--jp-input-active-box-shadow-color),
+    inset 0 0 0 3px var(--jp-input-active-box-shadow-color);
 }
 
 .p-CommandPalette-wrapper::after {
diff --git a/packages/extensionmanager/style/index.css b/packages/extensionmanager/style/index.css
index 3986407eec9e..436a84d09d2a 100644
--- a/packages/extensionmanager/style/index.css
+++ b/packages/extensionmanager/style/index.css
@@ -100,8 +100,8 @@
 }
 
 .jp-extensionmanager-search-wrapper input:focus {
-  box-shadow: inset 0 0 0 1px rgba(19, 124, 189, 0.3),
-    inset 0 0 0 3px rgba(19, 124, 189, 0.3);
+  box-shadow: inset 0 0 0 1px var(--jp-input-active-box-shadow-color),
+    inset 0 0 0 3px var(--jp-input-active-box-shadow-color);
 }
 
 /*
diff --git a/packages/theme-dark-extension/style/variables.css b/packages/theme-dark-extension/style/variables.css
index 33100add9653..7185655e0a06 100644
--- a/packages/theme-dark-extension/style/variables.css
+++ b/packages/theme-dark-extension/style/variables.css
@@ -327,6 +327,7 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-input-background: var(--md-grey-800);
   --jp-input-border-color: var(--jp-border-color1);
   --jp-input-active-border-color: var(--jp-brand-color1);
+  --jp-input-active-box-shadow-color: rgba(19, 124, 189, 0.3);
 
   /* General editor styles */
 
diff --git a/packages/theme-light-extension/style/variables.css b/packages/theme-light-extension/style/variables.css
index ad6f9ad6fd5d..43336c8657c4 100644
--- a/packages/theme-light-extension/style/variables.css
+++ b/packages/theme-light-extension/style/variables.css
@@ -324,6 +324,7 @@ all of MD as it is not optimized for dense, information rich UIs.
   --jp-input-background: var(--md-grey-100);
   --jp-input-border-color: var(--jp-border-color1);
   --jp-input-active-border-color: var(--jp-brand-color1);
+  --jp-input-active-box-shadow-color: rgba(19, 124, 189, 0.3);
 
   /* General editor styles */
 
diff --git a/packages/ui-components/style/index.css b/packages/ui-components/style/index.css
index be9d933c085f..06f97a8d8a3b 100644
--- a/packages/ui-components/style/index.css
+++ b/packages/ui-components/style/index.css
@@ -15,7 +15,7 @@ html {
 }
 
 body {
-  color: #182026;
+  color: unset;
   font-family: var(--jp-ui-font-family);
 }
 
@@ -32,6 +32,7 @@ strong {
   font-weight: unset;
 }
 
+/* Override Blueprint's _typography.scss styles */
 a {
   text-decoration: unset;
   color: unset;
@@ -42,12 +43,14 @@ a:hover {
   color: unset;
 }
 
+/* Override Blueprint's _accessibility.scss styles */
 :focus {
   outline: unset;
   outline-offset: unset;
   -moz-outline-radius: unset;
 }
 
+/* Styles for ui-components */
 .jp-Button {
   border-radius: var(--jp-border-radius);
   padding: 0px 12px;
@@ -63,10 +66,6 @@ a:hover {
   text-transform: none;
 }
 
-/* .jp-InputGroup {
-
-} */
-
 .jp-InputGroup input {
   box-sizing: border-box;
   border-radius: 0;
@@ -76,10 +75,9 @@ a:hover {
 }
 
 .jp-InputGroup input:focus {
-  /* box-shadow: inset 0 0 0 var(--jp-border-width) var(--jp-input-active-border-color),
-    inset 0 0 0 3px rgba(19, 124, 189, 0.3); */
-  box-shadow: inset 0 0 0 var(--jp-border-width) rgba(19, 124, 189, 0.3),
-    inset 0 0 0 3px rgba(19, 124, 189, 0.3);
+  box-shadow: inset 0 0 0 var(--jp-border-width)
+      var(--jp-input-active-box-shadow-color),
+    inset 0 0 0 3px var(--jp-input-active-box-shadow-color);
 }
 
 .jp-InputGroup input::placeholder,
@@ -108,10 +106,6 @@ input::placeholder {
   color: var(--jp-ui-font-color0);
 }
 
-/* .jp-Select {
-
-} */
-
 select {
   box-sizing: border-box;
 }