Adjustments to gray buttons

microsoft · Feb 13, 2025 · cdb1758 · cdb1758
1 parent 7f179e2
commit cdb1758
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 25 deletions.
diff --git a/docfiles/themes/arcade-legacy.json b/docfiles/themes/arcade-legacy.json
@@ -65,6 +65,7 @@
 
         "pxt-neutral-button-background": "#e0e1e2",
         "pxt-neutral-button-foreground": "#323130",
+        "pxt-neutral-button-background-hover": "#c6c8c9",
 
         "pxt-link": "#3977B4",
         "pxt-link-hover": "#204467",

diff --git a/docfiles/themes/arcade-light.json b/docfiles/themes/arcade-light.json
@@ -65,6 +65,7 @@
 
         "pxt-neutral-button-background": "#e0e1e2",
         "pxt-neutral-button-foreground": "#323130",
+        "pxt-neutral-button-background-hover": "#c6c8c9",
 
         "pxt-link": "#3977B4",
         "pxt-link-hover": "#204467",

diff --git a/docfiles/themes/base-theme.css b/docfiles/themes/base-theme.css
@@ -60,6 +60,7 @@
 
     --pxt-neutral-button-background: #e0e1e2;
     --pxt-neutral-button-foreground: #333333;
+    --pxt-neutral-button-background-hover: #c6c8c9;
 
     --pxt-link: #3977B4;
     --pxt-link-hover: #204467;

diff --git a/docfiles/themes/high-contrast.json b/docfiles/themes/high-contrast.json
@@ -67,6 +67,7 @@
 
         "pxt-neutral-button-background": "#000000",
         "pxt-neutral-button-foreground": "#FFFFFF",
+        "pxt-neutral-button-background-hover": "#c6c8c9",
 
         "pxt-link": "#807FFF",
         "pxt-link-hover": "#1b19ff",

diff --git a/docfiles/themes/microbit-light.json b/docfiles/themes/microbit-light.json
@@ -67,6 +67,7 @@
 
         "pxt-neutral-button-background": "#e0e1e2",
         "pxt-neutral-button-foreground": "#323130",
+        "pxt-neutral-button-background-hover": "#c6c8c9",
 
         "pxt-link": "#3977B4",
         "pxt-link-hover": "#204467",

diff --git a/theme/common.less b/theme/common.less
@@ -51,6 +51,27 @@ take precedence over default semantic ui styling without using !important.
 
 */
 
+// Set background, foreground, hover, and inverted colors for a button
+.buttonVariant(@bg; @fg; @hoverBg) {
+    background-color: @bg;
+    color: @fg;
+    border-color: @bg;
+
+    &.inverted {
+        background-color: @fg;
+        color: @bg;
+    }
+
+    &:hover {
+        background-color: @hoverBg;
+
+        &.inverted {
+            background-color: @fg;
+            color: @hoverBg;
+        }
+    }
+}
+
 body.main.pxt-theme-root {
     a {
         color: var(--pxt-link);
@@ -105,7 +126,7 @@ body.main.pxt-theme-root {
     }
 
     .gray, .grey {
-        color: var(--pxt-neutral-background3);
+        color: var(--pxt-neutral-button-background);
     }
 
     .green, .positive {
@@ -132,27 +153,7 @@ body.main.pxt-theme-root {
         color: var(--pxt-colors-yellow-background);
     }
 
-    button, .ui.button, .common-button {
-        .buttonVariant(@bg; @fg; @hoverBg) {
-            background-color: @bg;
-            color: @fg;
-            border-color: @bg;
-
-            &.inverted {
-                background-color: @fg;
-                color: @bg;
-            }
-
-            &:hover {
-                background-color: @hoverBg;
-
-                &.inverted {
-                    background-color: @fg;
-                    color: @hoverBg;
-                }
-            }
-        }
-
+    .ui.button, .common-button {
         &.primary {
             .buttonVariant(
                 var(--pxt-primary-background),
@@ -187,9 +188,9 @@ body.main.pxt-theme-root {
 
         &.gray, &.grey {
             .buttonVariant(
-                var(--pxt-neutral-background3),
-                var(--pxt-neutral-foreground3),
-                var(--pxt-neutral-hover3)
+                var(--pxt-neutral-button-background),
+                var(--pxt-neutral-button-foreground),
+                var(--pxt-neutral-button-background-hover)
             );
         }