Improve basic button and label styles (#14119)

* Improve disabled styles for repo buttons

- Simplify disabled styling of label by matching for the disabled
  attribute.
- Raise fomantic disabled opacity from .45 to .55 to for more contrast.
- Use CSS vars for basic button styles.

* restore clickability on label

* color tweaks and remove arc-green style

* slightly reduce button size

* consolidate vars

* also cover active class

* slightly more distinct active class

* remove useless rule

1 files changed, 41 insertions, 15 deletions

diff --git a/web_src/less/_base.less b/web_src/less/_base.less
index 7042af574b..23a289a8f3 100644
--- a/web_src/less/_base.less
+++ b/web_src/less/_base.less
@@ -6,6 +6,7 @@
   /* other variables */
   --fonts-regular: var(--fonts-proportional), var(--fonts-emoji);
   --border-radius: .28571429rem;
+  --opacity-disabled: .55;
   --color-primary: #4183c4;
   --color-primary-dark-1: #3876b3;
   --color-primary-dark-2: #31699f;
@@ -96,13 +97,10 @@
   --color-input-border: #dedede;
   --color-input-border-hover: #cecece;
   --color-navbar: #f8f8f8;
-  --color-label: #00000010;
-  --color-label-hover: #00000015;
-  --color-label-basic: #00000008;
-  --color-label-basic-hover: #00000015;
-  --color-label-border: #00000018;
-  --color-hover: #0000000a;
-  --color-active: #00000010;
+  --color-light: #00000004;
+  --color-light-border: #0000001d;
+  --color-hover: #0000000d;
+  --color-active: #00000012;
   --color-menu: #ffffff;
   --color-card: #ffffff;
   --color-markdown-table-row: #00000008;
@@ -1382,13 +1380,13 @@ i.icon.centerlock {
 
 .ui.label {
   padding: .3em .5em;
-  background: var(--color-label);
+  background: var(--color-light);
   color: var(--color-text-light);
 }
 
 .ui.labels a.label:hover,
 a.ui.label:hover {
-  background: var(--color-label-hover);
+  background: var(--color-hover);
   color: var(--color-text);
 }
 
@@ -1556,7 +1554,7 @@ a.ui.label:hover {
 
 .ui.button {
   background: var(--color-button);
-  border: 1px solid var(--color-secondary);
+  border: 1px solid var(--color-light-border);
   box-shadow: none !important;
   color: var(--color-text);
 }
@@ -1578,6 +1576,34 @@ a.ui.label:hover {
   border-left: none;
 }
 
+.ui.basic.buttons .button,
+.ui.basic.button {
+  color: var(--color-text-light);
+  background: var(--color-light);
+}
+
+.ui.basic.buttons .button:hover,
+.ui.basic.button:hover {
+  color: var(--color-text);
+  background: var(--color-hover);
+}
+
+.ui.basic.buttons .button:focus,
+.ui.basic.button:focus,
+.ui.basic.buttons .button:active,
+.ui.basic.button:active,
+.ui.basic.buttons .active.button,
+.ui.basic.active.button,
+.ui.basic.buttons .active.button:hover,
+.ui.basic.active.button:hover {
+  color: var(--color-text);
+  background: var(--color-active);
+}
+
+.ui.labeled.button > .label {
+  border-color: var(--color-light-border);
+}
+
 .ui.blue.button,
 .ui.blue.buttons .button,
 .ui.primary.button,
@@ -1640,16 +1666,16 @@ a.ui.label:hover {
 
 .ui.basic.labels .label,
 .ui.basic.label {
-  background: var(--color-label-basic);
-  border-color: var(--color-label-border);
-  color: var(--color-text);
+  background: var(--color-light);
+  border-color: var(--color-light-border);
+  color: var(--color-text-light);
 }
 
 .ui.basic.labels a.label:hover,
 a.ui.basic.label:hover {
   color: var(--color-text);
-  border-color: var(--color-label-border);
-  background: var(--color-label-basic-hover);
+  border-color: var(--color-light-border);
+  background: var(--color-hover);
 }
 
 .ui.label > img {