Merge pull request #2801 from jeffyjefflabs/button-font-color

Change css variable names to match Lab

Author: SylvainCorlay

packages/controls/css/labvariables.css

@@ -91,10 +91,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);
-  --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
 

packages/controls/css/widgets-base.css

@@ -187,85 +187,85 @@
 /* Button "Primary" Styling */
 
 .jupyter-button.mod-primary {
-  color: var(--jp-inverse-ui-font-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);
+  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);
+  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);
+  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);
+  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);
+  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);
+  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);
+  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);
+  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);
+  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);
+  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);
+  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);
+  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);
+  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);
+  color: var(--jp-ui-inverse-font-color0);
   background-color: var(--jp-error-color0);
 }