Backport jupyter-widgets#2801

Change css variable names to match Lab
jasongrout · Mar 2, 2020 · 30515db · 30515db
1 parent e6016b4
commit 30515db
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 36 deletions.
diff --git a/packages/controls/css/labvariables.css b/packages/controls/css/labvariables.css
@@ -88,10 +88,10 @@ all of MD as it is not optimized for dense, information rich UIs.
      These will typically go from light to darker, in both a dark and light theme
    */
 
-  --jp-inverse-ui-font-color0: rgba(255,255,255,1);
-  --jp-inverse-ui-font-color1: rgba(255,255,255,1.0);
-  --jp-inverse-ui-font-color2: rgba(255,255,255,0.7);
-  --jp-inverse-ui-font-color3: rgba(255,255,255,0.5);
+  --jp-ui-inverse-font-color0: rgba(255, 255, 255, 1);
+  --jp-ui-inverse-font-color1: rgba(255, 255, 255, 1);
+  --jp-ui-inverse-font-color2: rgba(255, 255, 255, 0.7);
+  --jp-ui-inverse-font-color3: rgba(255, 255, 255, 0.5);
 
   /* Content Fonts
 

diff --git a/packages/controls/css/widgets-base.css b/packages/controls/css/widgets-base.css
@@ -177,86 +177,86 @@
 /* Button "Primary" Styling */
 
 .jupyter-button.mod-primary {
-    color: var(--jp-inverse-ui-font-color1);
-    background-color: var(--jp-brand-color1);
+  color: var(--jp-ui-inverse-font-color1);
+  background-color: var(--jp-brand-color1);
 }
 
 .jupyter-button.mod-primary.mod-active {
-    color: var(--jp-inverse-ui-font-color0);
-    background-color: var(--jp-brand-color0);
+  color: var(--jp-ui-inverse-font-color0);
+  background-color: var(--jp-brand-color0);
 }
 
 .jupyter-button.mod-primary:active {
-    color: var(--jp-inverse-ui-font-color0);
-    background-color: var(--jp-brand-color0);
+  color: var(--jp-ui-inverse-font-color0);
+  background-color: var(--jp-brand-color0);
 }
 
 /* Button "Success" Styling */
 
 .jupyter-button.mod-success {
-    color: var(--jp-inverse-ui-font-color1);
-    background-color: var(--jp-success-color1);
+  color: var(--jp-ui-inverse-font-color1);
+  background-color: var(--jp-success-color1);
 }
 
 .jupyter-button.mod-success.mod-active {
-    color: var(--jp-inverse-ui-font-color0);
-    background-color: var(--jp-success-color0);
- }
+  color: var(--jp-ui-inverse-font-color0);
+  background-color: var(--jp-success-color0);
+}
 
 .jupyter-button.mod-success:active {
-    color: var(--jp-inverse-ui-font-color0);
-    background-color: var(--jp-success-color0);
- }
+  color: var(--jp-ui-inverse-font-color0);
+  background-color: var(--jp-success-color0);
+}
 
  /* Button "Info" Styling */
 
 .jupyter-button.mod-info {
-    color: var(--jp-inverse-ui-font-color1);
-    background-color: var(--jp-info-color1);
+  color: var(--jp-ui-inverse-font-color1);
+  background-color: var(--jp-info-color1);
 }
 
 .jupyter-button.mod-info.mod-active {
-    color: var(--jp-inverse-ui-font-color0);
-    background-color: var(--jp-info-color0);
+  color: var(--jp-ui-inverse-font-color0);
+  background-color: var(--jp-info-color0);
 }
 
 .jupyter-button.mod-info:active {
-    color: var(--jp-inverse-ui-font-color0);
-    background-color: var(--jp-info-color0);
+  color: var(--jp-ui-inverse-font-color0);
+  background-color: var(--jp-info-color0);
 }
 
 /* Button "Warning" Styling */
 
 .jupyter-button.mod-warning {
-    color: var(--jp-inverse-ui-font-color1);
-    background-color: var(--jp-warn-color1);
+  color: var(--jp-ui-inverse-font-color1);
+  background-color: var(--jp-warn-color1);
 }
 
 .jupyter-button.mod-warning.mod-active {
-    color: var(--jp-inverse-ui-font-color0);
-    background-color: var(--jp-warn-color0);
+  color: var(--jp-ui-inverse-font-color0);
+  background-color: var(--jp-warn-color0);
 }
 
 .jupyter-button.mod-warning:active {
-    color: var(--jp-inverse-ui-font-color0);
-    background-color: var(--jp-warn-color0);
+  color: var(--jp-ui-inverse-font-color0);
+  background-color: var(--jp-warn-color0);
 }
 
 /* Button "Danger" Styling */
 
 .jupyter-button.mod-danger {
-    color: var(--jp-inverse-ui-font-color1);
-    background-color: var(--jp-error-color1);
+  color: var(--jp-ui-inverse-font-color1);
+  background-color: var(--jp-error-color1);
 }
 
 .jupyter-button.mod-danger.mod-active {
-    color: var(--jp-inverse-ui-font-color0);
-    background-color: var(--jp-error-color0);
+  color: var(--jp-ui-inverse-font-color0);
+  background-color: var(--jp-error-color0);
 }
 
 .jupyter-button.mod-danger:active {
-    color: var(--jp-inverse-ui-font-color0);
-    background-color: var(--jp-error-color0);
+  color: var(--jp-ui-inverse-font-color0);
+  background-color: var(--jp-error-color0);
 }
 
 /* Widget Button, Widget Toggle Button, Widget Upload */