Primary & Secondary button overrides

microsoft · Feb 10, 2025 · 8d00d0f · 8d00d0f
1 parent 9889754
commit 8d00d0f
Show file tree

Hide file tree

Showing 7 changed files with 25 additions and 1 deletion.
diff --git a/docfiles/themes/README.md b/docfiles/themes/README.md
@@ -36,6 +36,7 @@ Colors:
 | pxt-primary-light             |                            |
 | pxt-primary-foreground        | Download Button Fg         |
 | pxt-secondary-background      | Zoom & Under-Sim Buttons   |
+| pxt-secondary-background-hover | Zoom & Under-Sim Buttons   |
 | pxt-secondary-alpha0          | Zoom & Under-Sim Buttons 0% Opacity |
 | pxt-secondary-dark            |                            |
 | pxt-secondary-light           | Cloud Projects Card        |

diff --git a/docfiles/themes/arcade-legacy.json b/docfiles/themes/arcade-legacy.json
@@ -29,6 +29,7 @@
         "pxt-primary-light": "#FBAB82",
         "pxt-primary-foreground": "#FFFFFF",
         "pxt-secondary-background": "#028B9B",
+        "pxt-secondary-background-hover": "#015e69",
         "pxt-secondary-alpha0": "#028B9B00",
         "pxt-secondary-alpha50": "#028B9B32",
         "pxt-secondary-dark": "#005D6A",

diff --git a/docfiles/themes/arcade-light.json b/docfiles/themes/arcade-light.json
@@ -28,6 +28,7 @@
         "pxt-primary-light": "#a098d7",
         "pxt-primary-foreground": "#FFFFFF",
         "pxt-secondary-background": "#5D4FBA",
+        "pxt-secondary-background-hover": "#483c9a",
         "pxt-secondary-alpha0": "#5D4FBA00",
         "pxt-secondary-alpha50": "#5D4FBA32",
         "pxt-secondary-dark": "#372E75",

diff --git a/docfiles/themes/base-theme.css b/docfiles/themes/base-theme.css
@@ -25,6 +25,7 @@
     --pxt-primary-light: #cccccc;
     --pxt-primary-foreground: #ffffff;
     --pxt-secondary-background: #aaaaaa;
+    --pxt-secondary-background-hover: #bbbbbb;
     --pxt-secondary-alpha0: #aaaaaa00;
     --pxt-secondary-dark: #767676;
     --pxt-secondary-light: #9a9a9a;

diff --git a/docfiles/themes/high-contrast.json b/docfiles/themes/high-contrast.json
@@ -28,6 +28,7 @@
         "pxt-primary-light": "#FFFFFF",
         "pxt-primary-foreground": "#FFFFFF",
         "pxt-secondary-background": "#000000",
+        "pxt-secondary-background-hover": "#000000",
         "pxt-secondary-alpha0": "#00000000",
         "pxt-secondary-dark": "#000000",
         "pxt-secondary-light": "#000000",

diff --git a/docfiles/themes/microbit-light.json b/docfiles/themes/microbit-light.json
@@ -30,6 +30,7 @@
         "pxt-primary-light": "#A38FCC",
         "pxt-primary-foreground": "#FFFFFF",
         "pxt-secondary-background": "#3454D1",
+        "pxt-secondary-background-hover": "#2742ab",
         "pxt-secondary-alpha0": "#3454D100",
         "pxt-secondary-alpha50": "#3454D132",
         "pxt-secondary-dark": "#2a47b8",

diff --git a/theme/common.less b/theme/common.less
@@ -41,12 +41,30 @@ pre {
     tab-size: 4;
 }
 
-/* Override Semantic UI */
 /*
+--- Override Semantic UI ---
+
 These include body.main to add specificity so they will
 take precedence over default semantic ui styling without using !important.
+
 */
 
+body.main .ui.button.primary {
+    background-color: var(--pxt-primary-background);
+    color: var(--pxt-primary-foreground);
+    &:hover {
+        background-color: var(--pxt-primary-background-hover);
+    }
+}
+
+body.main .ui.button.secondary {
+    background-color: var(--pxt-secondary-background);
+    color: var(--pxt-secondary-foreground);
+    &:hover {
+        background-color: var(--pxt-secondary-background-hover);
+    }
+}
+
 body.main a {
     color: var(--pxt-link);
     &:hover {