Add hover for target backgrounds

microsoft · Feb 13, 2025 · 620c8fd · 620c8fd
1 parent 90a4bd1
commit 620c8fd
Show file tree

Hide file tree

Showing 7 changed files with 34 additions and 16 deletions.
diff --git a/docfiles/themes/README.md b/docfiles/themes/README.md
@@ -13,14 +13,17 @@ Colors:
 |-------------------------------|----------------------------|
 | pxt-target-background1        | Blockly Workspace Bkg      |
 | pxt-target-foreground1        | Blockly Workspace Fg       |
+| pxt-target-background-hover1  |                            |
 | pxt-target-foreground1-hover  |                            |
 | pxt-target-stencil1           | Outlines for Blockly Workspace   |
 | pxt-target-background2        | Sim Sidebar Bkg            |
 | pxt-target-foreground2        | Sim Sidebar Fg             |
+| pxt-target-background-hover2  |                            |
 | pxt-target-foreground2-hover  |                            |
 | pxt-target-stencil2           | Outlines for Sim Sidebar  |
 | pxt-target-background3        | Toolbox & Bottom Bar Bkg   |
 | pxt-target-foreground3        | Toolbox & Bottom Bar Fg    |
+| pxt-target-background-hover3  |                            |
 | pxt-target-foreground3-hover  |                            |
 | pxt-target-stencil3           | Outlines for Toolbox & Bottom Bar     |
 | pxt-header-background         | Header Bar Bkg             |

diff --git a/docfiles/themes/arcade-legacy.json b/docfiles/themes/arcade-legacy.json
@@ -5,17 +5,20 @@
     "colors": {
         "pxt-target-background1": "#FEF3E0",
         "pxt-target-foreground1": "#000000",
-        "pxt-target-foreground1-hover": "#333333",
+        "pxt-target-background-hover1": "#fce0af",
+        "pxt-target-foreground-hover1": "#000000",
         "pxt-target-stencil1": "#e4d9c7",
 
         "pxt-target-background2": "#B1E1DA",
         "pxt-target-foreground2": "#000000",
-        "pxt-target-foreground2-hover": "#333333",
+        "pxt-target-background-hover2": "#8cd3c9",
+        "pxt-target-foreground-hover2": "#000000",
         "pxt-target-stencil2": "#b0b0b0",
 
         "pxt-target-background3": "#FEF3E0",
         "pxt-target-foreground3": "#000000",
-        "pxt-target-foreground3-hover": "#333333",
+        "pxt-target-background-hover3": "#fce0af",
+        "pxt-target-foreground-hover3": "#000000",
         "pxt-target-stencil3": "#e4d9c7",
 
         "pxt-header-background": "#F76820",

diff --git a/docfiles/themes/arcade-light.json b/docfiles/themes/arcade-light.json
@@ -5,17 +5,20 @@
     "colors": {
         "pxt-target-background1": "#F8FAFC",
         "pxt-target-foreground1": "#000000",
-        "pxt-target-foreground1-hover": "#333333",
+        "pxt-target-background-hover1": "#d4e0ed",
+        "pxt-target-foreground-hover1": "#000000",
         "pxt-target-stencil1": "#e1e1e1",
 
         "pxt-target-background2": "#F8FAFC",
         "pxt-target-foreground2": "#000000",
-        "pxt-target-foreground2-hover": "#333333",
+        "pxt-target-background-hover2": "#d4e0ed",
+        "pxt-target-foreground-hover2": "#000000",
         "pxt-target-stencil2": "#e1e1e1",
 
         "pxt-target-background3": "#F8FAFC",
         "pxt-target-foreground3": "#000000",
-        "pxt-target-foreground3-hover": "#333333",
+        "pxt-target-background-hover3": "#d4e0ed",
+        "pxt-target-foreground-hover3": "#000000",
         "pxt-target-stencil3": "#e1e1e1",
 
         "pxt-header-background": "#116E79",

diff --git a/docfiles/themes/base-theme.css b/docfiles/themes/base-theme.css
@@ -1,17 +1,20 @@
 .pxt-theme-root {
     --pxt-target-background1: #f0f0f0;
     --pxt-target-foreground1: #333333;
-    --pxt-target-foreground1-hover: #555555;
+    --pxt-target-background-hover1: #d7d7d7;
+    --pxt-target-foreground-hover1: #1a1a1a;
     --pxt-target-stencil1: #e1e1e1;
 
     --pxt-target-background2: #f0f0f0;
     --pxt-target-foreground2: #333333;
-    --pxt-target-foreground2-hover: #555555;
+    --pxt-target-background-hover2: #d7d7d7;
+    --pxt-target-foreground-hover2: #1a1a1a;
     --pxt-target-stencil2: #e1e1e1;
 
     --pxt-target-background3: #f0f0f0;
     --pxt-target-foreground3: #333333;
-    --pxt-target-foreground3-hover: #555555;
+    --pxt-target-background-hover3: #d7d7d7;
+    --pxt-target-foreground-hover3: #1a1a1a;
     --pxt-target-stencil3: #e1e1e1;
 
     --pxt-header-background: #888888;

diff --git a/docfiles/themes/high-contrast.json b/docfiles/themes/high-contrast.json
@@ -7,17 +7,20 @@
     "colors": {
         "pxt-target-background1": "#000000",
         "pxt-target-foreground1": "#FFFFFF",
-        "pxt-target-foreground1-hover": "#cccccc",
+        "pxt-target-background-hover1": "#000000",
+        "pxt-target-foreground-hover1": "#cccccc",
         "pxt-target-stencil1": "#FFFFFF",
 
         "pxt-target-background2": "#000000",
         "pxt-target-foreground2": "#FFFFFF",
-        "pxt-target-foreground2-hover": "#cccccc",
+        "pxt-target-background-hover2": "#000000",
+        "pxt-target-foreground-hover2": "#cccccc",
         "pxt-target-stencil2": "#FFFFFF",
 
         "pxt-target-background3": "#000000",
         "pxt-target-foreground3": "#FFFFFF",
-        "pxt-target-foreground3-hover": "#cccccc",
+        "pxt-target-background-hover3": "#000000",
+        "pxt-target-foreground-hover3": "#cccccc",
         "pxt-target-stencil3": "#FFFFFF",
 
         "pxt-header-background": "#000000",

diff --git a/docfiles/themes/microbit-light.json b/docfiles/themes/microbit-light.json
@@ -7,17 +7,20 @@
     "colors": {
         "pxt-target-background1": "#ECF0F1",
         "pxt-target-foreground1": "#000000",
-        "pxt-target-foreground1-hover": "#333333",
+        "pxt-target-background-hover1": "#cfd9db",
+        "pxt-target-foreground-hover1": "#000000",
         "pxt-target-stencil1": "#e1e1e1",
 
         "pxt-target-background2": "#FDFDFF",
         "pxt-target-foreground2": "#000000",
-        "pxt-target-foreground2-hover": "#333333",
+        "pxt-target-background-hover2": "#cacaff",
+        "pxt-target-foreground-hover2": "#000000",
         "pxt-target-stencil2": "#e1e1e1",
 
         "pxt-target-background3": "#FFFFFF",
         "pxt-target-foreground3": "#000000",
-        "pxt-target-foreground3-hover": "#333333",
+        "pxt-target-background-hover3": "#e6e6e6",
+        "pxt-target-foreground-hover3": "#000000",
         "pxt-target-stencil3": "#e1e1e1",
 
         "pxt-header-background": "#3454D1",

diff --git a/theme/serial.less b/theme/serial.less
@@ -262,7 +262,7 @@
 
 .ui.button.editorBack:hover,
     .ui.button.editorBack:focus {
-    color: var(--pxt-target-foreground2-hover);
+    color: var(--pxt-target-foreground-hover2);
 }
 
 div.smoothie-chart-tooltip {