Add Themes for Arcade (and bump pxt-core) (#6732)

This adds light, legacy, and dark themes for arcade, based on changes in microsoft/pxt#10391 It also bumps pxt-core to get those changes.
microsoft · Feb 27, 2025 · 30e6f64 · 30e6f64
1 parent dd18bad
commit 30e6f64
Show file tree

Hide file tree

Showing 10 changed files with 406 additions and 102 deletions.
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
     },
     "dependencies": {
         "pxt-common-packages": "12.2.5",
-        "pxt-core": "11.3.22"
+        "pxt-core": "11.3.26"
     },
     "optionalDependencies": {
         "pxt-arcade-sim": "microsoft/pxt-arcade-sim.git#v0.11.13"

diff --git a/pxtarget.json b/pxtarget.json
@@ -621,6 +621,8 @@
             "arrays": "#FF8F08",
             "functions": "#1446A0"
         },
+        "defaultColorTheme": "arcade-light",
+        "highContrastColorTheme": "pxt-high-contrast",
         "simAnimationEnter": "fly right in",
         "simAnimationExit": "fly right out",
         "crowdinProject": "makecode",

diff --git a/theme/blockly-toolbox.less b/theme/blockly-toolbox.less
@@ -7,7 +7,7 @@
 div.blocklyTreeRow {
     margin-bottom: 0px !important;
     transition-property: background-color;
-    transition-duration: 1s;
+    transition-duration: 0.2s;
 }
 
 .blocklyToolboxDiv, .monacoToolboxDiv {
@@ -26,4 +26,4 @@ div.blocklyTreeRow {
     .blocklyToolboxDiv, .monacoToolboxDiv {
         border-left: 0 !important;
     }
-}
+}
diff --git a/theme/color-themes/arcade-dark.json b/theme/color-themes/arcade-dark.json
@@ -0,0 +1,120 @@
+{
+    "id": "arcade-dark",
+    "name": "Arcade Dark",
+    "weight": 60,
+    "monacoBaseTheme": "vs-dark",
+    "overrideFiles": [
+        "/overrides/arcade-dark-overrides.css"
+    ],
+    "colors": {
+        "pxt-header-background": "#181818",
+        "pxt-header-foreground": "#ffffff",
+        "pxt-header-background-hover": "#252525",
+        "pxt-header-foreground-hover": "#ffffff",
+        "pxt-header-stencil": "#323232",
+
+        "pxt-primary-background": "#0078D4",
+        "pxt-primary-foreground": "#ffffff",
+        "pxt-primary-background-hover": "#026EC1",
+        "pxt-primary-foreground-hover": "#ffffff",
+        "pxt-primary-accent": "#005ba1",
+
+        "pxt-secondary-background": "#63276d",
+        "pxt-secondary-foreground": "#f3f2f1",
+        "pxt-secondary-background-hover": "#742e80",
+        "pxt-secondary-foreground-hover": "#f3f2f1",
+        "pxt-secondary-accent": "#63276d",
+
+        "pxt-tertiary-background": "#0078d4",
+        "pxt-tertiary-foreground": "#ffffff",
+        "pxt-tertiary-background-hover": "#026EC1",
+        "pxt-tertiary-foreground-hover": "#ffffff",
+        "pxt-tertiary-accent": "#0894ff",
+
+        "pxt-target-background1": "#1F1F1F",
+        "pxt-target-foreground1": "#f3f2f1", 
+        "pxt-target-background1-hover": "#2c2c2c",
+        "pxt-target-foreground1-hover": "#ffffff",
+        "pxt-target-stencil1": "#3b3a39",
+
+        "pxt-target-background2": "#181818",
+        "pxt-target-foreground2": "#ffffff",
+        "pxt-target-background2-hover": "#252525",
+        "pxt-target-foreground2-hover": "#ffffff",
+        "pxt-target-stencil2": "#323232",
+
+        "pxt-target-background3": "#181818",
+        "pxt-target-foreground3": "#ffffff",
+        "pxt-target-background3-hover": "#252525",
+        "pxt-target-foreground3-hover": "#ffffff",
+        "pxt-target-stencil3": "#323232",
+
+        "pxt-neutral-background1": "#1F1F1F",
+        "pxt-neutral-foreground1": "#f3f2f1",
+        "pxt-neutral-background1-hover": "#2c2c2c",
+        "pxt-neutral-foreground1-hover": "#ffffff",
+        "pxt-neutral-stencil1": "#3b3a39",
+
+        "pxt-neutral-background2": "#181818",
+        "pxt-neutral-foreground2": "#ffffff",
+        "pxt-neutral-background2-hover": "#252525",
+        "pxt-neutral-foreground2-hover": "#ffffff",
+        "pxt-neutral-stencil2": "#3b3a39",
+
+        "pxt-neutral-background3": "#1F1F1F",
+        "pxt-neutral-foreground3": "#f3f2f1",
+        "pxt-neutral-background3-hover": "#2c2c2c",
+        "pxt-neutral-foreground3-hover": "#ffffff",
+        "pxt-neutral-stencil3": "#3b3a39",
+        "pxt-neutral-background3-alpha90": "#3b3a39",
+
+        "pxt-neutral-alpha0": "rgba(180, 180, 180, 0)",
+        "pxt-neutral-alpha10": "rgba(180, 180, 180, 0.1)",
+        "pxt-neutral-alpha20": "rgba(180, 180, 180, 0.2)",
+        "pxt-neutral-alpha50": "rgba(180, 180, 180, 0.5)",
+
+        "pxt-link": "#479ef5",
+        "pxt-link-hover": "#62abf5",
+        "pxt-focus-border": "#5caae5",
+
+        "pxt-colors-purple-background": "#63276d",
+        "pxt-colors-purple-foreground": "#f3f2f1",
+        "pxt-colors-purple-hover": "#742e80",
+        "pxt-colors-purple-alpha10": "#63276d19",
+
+        "pxt-colors-orange-background": "#7a2101",
+        "pxt-colors-orange-foreground": "#ffffff",
+        "pxt-colors-orange-hover": "#932801",
+        "pxt-colors-orange-alpha10": "#7a210119",
+
+        "pxt-colors-brown-background": "#50301a",
+        "pxt-colors-brown-foreground": "#ffffff",
+        "pxt-colors-brown-hover": "#633c20",
+        "pxt-colors-brown-alpha10": "#50301a19",
+
+        "pxt-colors-blue-background": "#0078D4",
+        "pxt-colors-blue-foreground": "#ffffff",
+        "pxt-colors-blue-hover": "#026EC1",
+        "pxt-colors-blue-alpha10": "#0078D419",
+
+        "pxt-colors-green-background": "#27ae60",
+        "pxt-colors-green-foreground": "#ffffff",
+        "pxt-colors-green-hover": "#1e8449",
+        "pxt-colors-green-alpha10": "#27ae6019",
+
+        "pxt-colors-red-background": "#e74c3c",
+        "pxt-colors-red-foreground": "#ffffff",
+        "pxt-colors-red-hover": "#c0392b",
+        "pxt-colors-red-alpha10": "#e74c3c19",
+
+        "pxt-colors-teal-background": "#1abc9c",
+        "pxt-colors-teal-foreground": "#ffffff",
+        "pxt-colors-teal-hover": "#16a085",
+        "pxt-colors-teal-alpha10": "#1abc9c19",
+
+        "pxt-colors-yellow-background": "#fde300",
+        "pxt-colors-yellow-foreground": "#000000",
+        "pxt-colors-yellow-hover": "#e4cc00",
+        "pxt-colors-yellow-alpha10": "#fde30019"
+    }
+}
diff --git a/theme/color-themes/arcade-legacy.json b/theme/color-themes/arcade-legacy.json
@@ -0,0 +1,110 @@
+{
+    "id": "arcade-legacy",
+    "name": "Arcade Legacy",
+    "weight": 20,
+    "overrideFiles": [],
+    "colors": {
+        "pxt-header-background": "#F76820",
+        "pxt-header-foreground": "#FFFFFF",
+        "pxt-header-background-hover": "#ab3d06",
+        "pxt-header-foreground-hover": "#FFFFFF",
+        "pxt-header-stencil": "#dc4f08",
+
+        "pxt-primary-background": "#F76820",
+        "pxt-primary-foreground": "#FFFFFF",
+        "pxt-primary-background-hover": "#dc4f08",
+        "pxt-primary-foreground-hover": "#FFFFFF",
+        "pxt-primary-accent": "#C5561F",
+
+        "pxt-secondary-background": "#028B9B",
+        "pxt-secondary-background-hover": "#015e69",
+        "pxt-secondary-foreground": "#FFFFFF",
+        "pxt-secondary-foreground-hover": "#FFFFFF",
+        "pxt-secondary-accent": "#58afba",
+
+        "pxt-tertiary-background": "#028B9B",
+        "pxt-tertiary-foreground": "#FFFFFF",
+        "pxt-tertiary-background-hover": "#015e69",
+        "pxt-tertiary-foreground-hover": "#FFFFFF",
+        "pxt-tertiary-accent": "#013136",
+
+        "pxt-target-background1": "#FEF3E0",
+        "pxt-target-foreground1": "#000000",
+        "pxt-target-background1-hover": "#fce0af",
+        "pxt-target-foreground1-hover": "#000000",
+        "pxt-target-stencil1": "#e4d9c7",
+
+        "pxt-target-background2": "#B1E1DA",
+        "pxt-target-foreground2": "#000000",
+        "pxt-target-background2-hover": "#8cd3c9",
+        "pxt-target-foreground2-hover": "#000000",
+        "pxt-target-stencil2": "#b0b0b0",
+
+        "pxt-target-background3": "#FEF3E0",
+        "pxt-target-foreground3": "#000000",
+        "pxt-target-background3-hover": "#E4E4E4",
+        "pxt-target-foreground3-hover": "#000000",
+        "pxt-target-stencil3": "#e4d9c7",
+
+        "pxt-neutral-background1": "#FFFFFF",
+        "pxt-neutral-foreground1": "rgba(0,0,0,.85)",
+        "pxt-neutral-background1-hover": "#f2f2f2",
+        "pxt-neutral-foreground1-hover": "rgba(0,0,0,.85)",
+        "pxt-neutral-stencil1": "rgba(34, 36, 38, .15)",
+
+        "pxt-neutral-background2": "#F8F8F8",
+        "pxt-neutral-foreground2": "rgba(0,0,0,.85)",
+        "pxt-neutral-background2-hover": "#ebebeb",
+        "pxt-neutral-foreground2-hover": "rgba(0,0,0,.85)",
+        "pxt-neutral-stencil2": "#e9eef2",
+
+        "pxt-neutral-background3": "#4e5758",
+        "pxt-neutral-foreground3": "#FFFFFF",
+        "pxt-neutral-background3-hover": "#424a4a",
+        "pxt-neutral-foreground3-hover": "#FFFFFF",
+        "pxt-neutral-stencil3": "#FFFFFF",
+        "pxt-neutral-background3-alpha90": "#4E5758E5",
+
+        "pxt-neutral-alpha0": "rgba(0, 0, 0, 0)",
+        "pxt-neutral-alpha10": "rgba(0, 0, 0, 0.1)",
+        "pxt-neutral-alpha20": "rgba(0, 0, 0, 0.2)",
+        "pxt-neutral-alpha50": "rgba(0, 0, 0, 0.5)",
+
+        "pxt-link": "#3977B4",
+        "pxt-link-hover": "#204467",
+        "pxt-focus-border": "#0078D4",
+
+        "pxt-colors-purple-background": "#6B4F76",
+        "pxt-colors-purple-foreground": "#FFFFFF",
+        "pxt-colors-purple-hover": "#4f3b57",
+        "pxt-colors-purple-alpha10": "#6b4f7619",
+        "pxt-colors-orange-background": "#ff7f50",
+        "pxt-colors-orange-foreground": "#FFFFFF",
+        "pxt-colors-orange-hover": "#ff5a1d",
+        "pxt-colors-orange-alpha10": "#ff7f5019",
+        "pxt-colors-brown-background": "#663905",
+        "pxt-colors-brown-foreground": "#FFFFFF",
+        "pxt-colors-brown-hover": "#351e03",
+        "pxt-colors-brown-alpha10": "#66390519",
+        "pxt-colors-blue-background": "#028b9b",
+        "pxt-colors-blue-foreground": "#FFFFFF",
+        "pxt-colors-blue-hover": "#015e69",
+        "pxt-colors-blue-alpha10": "#028b9b19",
+        "pxt-colors-green-background": "#2ecc71",
+        "pxt-colors-green-foreground": "#FFFFFF",
+        "pxt-colors-green-hover": "#22be64",
+        "pxt-colors-green-alpha10": "#2ecc7119",
+        "pxt-colors-red-background": "#a80000",
+        "pxt-colors-red-foreground": "#FFFFFF",
+        "pxt-colors-red-hover": "#8f0000",
+        "pxt-colors-red-alpha10": "#a8000019",
+        "pxt-colors-teal-background": "#028B9B",
+        "pxt-colors-teal-foreground": "#FFFFFF",
+        "pxt-colors-teal-hover": "#015e69",
+        "pxt-colors-teal-alpha10": "#028b9b19",
+        "pxt-colors-yellow-background": "#c0a000",
+        "pxt-colors-yellow-foreground": "#FFFFFF",
+        "pxt-colors-yellow-hover": "rgb(153, 132, 0)",
+        "pxt-colors-yellow-alpha10": "#c0a00019"
+    }
+}
diff --git a/theme/color-themes/arcade-light.json b/theme/color-themes/arcade-light.json
@@ -0,0 +1,110 @@
+{
+    "id": "arcade-light",
+    "name": "Arcade Light",
+    "weight": 40,
+    "overrideFiles": [],
+    "colors": {
+        "pxt-header-background": "#116E79",
+        "pxt-header-foreground": "#FFFFFF",
+        "pxt-header-background-hover": "#041d20",
+        "pxt-header-foreground-hover": "#FFFFFF",
+        "pxt-header-stencil": "#0b454c",
+
+        "pxt-primary-background": "#5D4FBA",
+        "pxt-primary-foreground": "#FFFFFF",
+        "pxt-primary-background-hover": "#4d3eb1",
+        "pxt-primary-foreground-hover": "#FFFFFF",
+        "pxt-primary-accent": "#403587",
+
+        "pxt-secondary-background": "#5D4FBA",
+        "pxt-secondary-foreground": "#F8FAFC",
+        "pxt-secondary-background-hover": "#483c9a",
+        "pxt-secondary-foreground-hover": "#F8FAFC",
+        "pxt-secondary-accent": "#7569c4",
+
+        "pxt-tertiary-background": "#116E79",
+        "pxt-tertiary-foreground": "#FFFFFF",
+        "pxt-tertiary-background-hover": "#0b454c",
+        "pxt-tertiary-foreground-hover": "#FFFFFF",
+        "pxt-tertiary-accent": "#041d20",
+
+        "pxt-target-background1": "#F8FAFC",
+        "pxt-target-foreground1": "#000000",
+        "pxt-target-background1-hover": "#d4e0ed",
+        "pxt-target-foreground1-hover": "#000000",
+        "pxt-target-stencil1": "#e1e1e1",
+
+        "pxt-target-background2": "#F8FAFC",
+        "pxt-target-foreground2": "#000000",
+        "pxt-target-background2-hover": "#d4e0ed",
+        "pxt-target-foreground2-hover": "#000000",
+        "pxt-target-stencil2": "#e1e1e1",
+
+        "pxt-target-background3": "#F8FAFC",
+        "pxt-target-foreground3": "#000000",
+        "pxt-target-background3-hover": "#d4e0ed",
+        "pxt-target-foreground3-hover": "#000000",
+        "pxt-target-stencil3": "#e1e1e1",
+
+        "pxt-neutral-background1": "#FFFFFF",
+        "pxt-neutral-foreground1": "rgba(0,0,0,.85)",
+        "pxt-neutral-background1-hover": "#f2f2f2",
+        "pxt-neutral-foreground1-hover": "rgba(0,0,0,.85)",
+        "pxt-neutral-stencil1": "rgba(34, 74, 114, 0.15)",
+
+        "pxt-neutral-background2": "#F8F8F8",
+        "pxt-neutral-foreground2": "rgba(0,0,0,.85)",
+        "pxt-neutral-background2-hover": "#ebebeb",
+        "pxt-neutral-foreground2-hover": "rgba(0,0,0,.85)",
+        "pxt-neutral-stencil2": "#e9eef2",
+
+        "pxt-neutral-background3": "#4e5758",
+        "pxt-neutral-foreground3": "#FFFFFF",
+        "pxt-neutral-background3-hover": "#424a4a",
+        "pxt-neutral-foreground3-hover": "#FFFFFF",
+        "pxt-neutral-stencil3": "#FFFFFF",
+        "pxt-neutral-background3-alpha90": "#4E5758E5",
+
+        "pxt-neutral-alpha0": "rgba(0, 0, 0, 0)",
+        "pxt-neutral-alpha10": "rgba(0, 0, 0, 0.1)",
+        "pxt-neutral-alpha20": "rgba(0, 0, 0, 0.2)",
+        "pxt-neutral-alpha50": "rgba(0, 0, 0, 0.5)",
+
+        "pxt-link": "#3977B4",
+        "pxt-link-hover": "#204467",
+        "pxt-focus-border": "#0078D4",
+
+        "pxt-colors-purple-background": "#6B4F76",
+        "pxt-colors-purple-foreground": "#FFFFFF",
+        "pxt-colors-purple-hover": "#483c9a",
+        "pxt-colors-purple-alpha10": "#6b4f7619",
+        "pxt-colors-orange-background": "#F76820",
+        "pxt-colors-orange-foreground": "#FFFFFF",
+        "pxt-colors-orange-hover": "#dc4f08",
+        "pxt-colors-orange-alpha10": "#F7682019",
+        "pxt-colors-brown-background": "#663905",
+        "pxt-colors-brown-foreground": "#FFFFFF",
+        "pxt-colors-brown-hover": "#351e03",
+        "pxt-colors-brown-alpha10": "#66390519",
+        "pxt-colors-blue-background": "#116e79",
+        "pxt-colors-blue-foreground": "#FFFFFF",
+        "pxt-colors-blue-hover": "#0b454c",
+        "pxt-colors-blue-alpha10": "#116e7919",
+        "pxt-colors-green-background": "#2ecc71",
+        "pxt-colors-green-foreground": "#FFFFFF",
+        "pxt-colors-green-hover": "#22be64",
+        "pxt-colors-green-alpha10": "#2ecc7119",
+        "pxt-colors-red-background": "#a80000",
+        "pxt-colors-red-foreground": "#FFFFFF",
+        "pxt-colors-red-hover": "#8f0000",
+        "pxt-colors-red-alpha10": "#a8000019",
+        "pxt-colors-teal-background": "#116e79",
+        "pxt-colors-teal-foreground": "#FFFFFF",
+        "pxt-colors-teal-hover": "#0b454c",
+        "pxt-colors-teal-alpha10": "#116e7919",
+        "pxt-colors-yellow-background": "#f1c40f",
+        "pxt-colors-yellow-foreground": "#000000",
+        "pxt-colors-yellow-hover": "#c29d0b",
+        "pxt-colors-yellow-alpha10": "#f1c40f19"
+    }
+}