Updated button styles with accessible colors (jupyterlab#11321)

Co-authored-by: Piyush Jain <[email protected]>

Author: 3coins

packages/application/style/buttons.css

@@ -17,55 +17,67 @@ button {
 }
 
 button:focus-visible {
-  border: 1px solid var(--jp-brand-color1);
+  border: 1px solid var(--md-blue-900);
 }
 
 button.jp-mod-styled.jp-mod-accept {
-  background: var(--md-blue-500);
+  background: var(--md-blue-700);
   border: 0;
   color: white;
 }
 
 button.jp-mod-styled.jp-mod-accept:hover {
-  background: var(--md-blue-600);
+  background: var(--md-blue-800);
 }
 
 button.jp-mod-styled.jp-mod-accept:active {
-  background: var(--md-blue-700);
+  background: var(--md-blue-900);
+}
+
+button.jp-mod-styled.jp-mod-accept:focus-visible {
+  border: 1px solid var(--md-blue-900);
 }
 
 button.jp-mod-styled.jp-mod-reject {
-  background: var(--md-grey-500);
+  background: var(--md-grey-600);
   border: 0;
   color: white;
 }
 
 button.jp-mod-styled.jp-mod-reject:hover {
-  background: var(--md-grey-600);
+  background: var(--md-grey-700);
 }
 
 button.jp-mod-styled.jp-mod-reject:active {
-  background: var(--md-grey-700);
+  background: var(--md-grey-800);
+}
+
+button.jp-mod-styled.jp-mod-reject:focus-visible {
+  border: 1px solid var(--md-grey-800);
 }
 
 button.jp-mod-styled.jp-mod-warn {
-  background: var(--jp-error-color1);
+  background: var(--md-red-700);
   border: 0;
   color: white;
 }
 
 button.jp-mod-styled.jp-mod-warn:hover {
-  background: var(--md-red-600);
+  background: var(--md-red-800);
 }
 
 button.jp-mod-styled.jp-mod-warn:active {
-  background: var(--md-red-700);
+  background: var(--md-red-900);
+}
+
+button.jp-mod-styled.jp-mod-warn:focus-visible {
+  border: 1px solid var(--md-red-900);
 }
 
 .jp-Button-flat {
   text-decoration: none;
   padding: var(--jp-flat-button-padding);
-  color: var(--jp-warn-color1);
+  color: var(--md-grey-600);
   font-weight: 500;
   background-color: transparent;
   height: var(--jp-private-running-shutdown-button-height);
@@ -75,11 +87,11 @@ button.jp-mod-styled.jp-mod-warn:active {
 }
 
 .jp-Button-flat:hover {
-  background-color: rgba(153, 153, 153, 0.1);
+  background-color: var(--md-grey-700);
 }
 
 .jp-Button-flat:focus {
   border: none;
   box-shadow: none;
-  background-color: rgba(153, 153, 153, 0.2);
+  background-color: var(--md-grey-800);
 }

packages/apputils/style/dialog.css

@@ -57,6 +57,25 @@ button.jp-Dialog-button:focus::-moz-focus-inner {
   border: 0;
 }
 
+button.jp-Dialog-button.jp-mod-styled.jp-mod-accept:focus,
+button.jp-Dialog-button.jp-mod-styled.jp-mod-warn:focus,
+button.jp-Dialog-button.jp-mod-styled.jp-mod-reject:focus {
+  outline-offset: 4px;
+  -moz-outline-radius: 0px;
+}
+
+button.jp-Dialog-button.jp-mod-styled.jp-mod-accept:focus {
+  outline: 1px solid var(--md-blue-700);
+}
+
+button.jp-Dialog-button.jp-mod-styled.jp-mod-warn:focus {
+  outline: 1px solid var(--md-red-600);
+}
+
+button.jp-Dialog-button.jp-mod-styled.jp-mod-reject:focus {
+  outline: 1px solid var(--md-grey-700);
+}
+
 button.jp-Dialog-close-button {
   padding: 0;
   height: 100%;