Merge pull request #6050 from gnestor/issue-6043

Clean up ui-components styles
jupyterlab · Apr 2, 2019 · c930c97 · c930c97
2 parents 00d6c0c + 05a6f96
commit c930c97
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 17 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;
 }