Add arcade-specific themes

theme/color-themes/arcade-dark.json

@@ -0,0 +1,123 @@
+{
+    "id": "arcade-dark",
+    "name": "Arcade Dark",
+    "monacoBaseTheme": "vs-dark",
+    "overrideFiles": [
+        "/overrides/arcade-dark-overrides.css"
+    ],
+    "colors": {
+        "pxt-target-background1": "#1b1a19",
+        "pxt-target-foreground1": "#f3f2f1",
+        "pxt-target-background-hover1": "#292828",
+        "pxt-target-foreground-hover1": "#ffffff",
+        "pxt-target-stencil1": "#3b3a39",
+
+        "pxt-target-background2": "#1b1a19",
+        "pxt-target-foreground2": "#f3f2f1",
+        "pxt-target-background-hover2": "#292828",
+        "pxt-target-foreground-hover2": "#ffffff",
+        "pxt-target-stencil2": "#3b3a39",
+
+        "pxt-target-background3": "#1b1a19",
+        "pxt-target-foreground3": "#f3f2f1",
+        "pxt-target-background-hover3": "#292828",
+        "pxt-target-foreground-hover3": "#ffffff",
+        "pxt-target-stencil3": "#3b3a39",
+
+        "pxt-header-background": "#181818",
+        "pxt-header-background-alpha30": "#1818184C",
+        "pxt-header-foreground": "#ffffff",
+
+        "pxt-primary-background": "#0078d4",
+        "pxt-primary-background-hover": "#005a9e",
+        "pxt-primary-alpha0": "#0078d400",
+        "pxt-primary-alpha90": "#0078d45A",
+        "pxt-primary-dark": "#004578",
+        "pxt-primary-light": "#c7e0f4",
+        "pxt-primary-foreground": "#ffffff",
+
+        "pxt-secondary-background": "#5c2d91",
+        "pxt-secondary-background-hover": "#4b2578",
+        "pxt-secondary-alpha0": "#5c2d9100",
+        "pxt-secondary-alpha50": "#5c2d917F",
+        "pxt-secondary-dark": "#4b2578",
+        "pxt-secondary-light": "#7a4c2a",
+        "pxt-secondary-foreground": "#f3f2f1",
+
+        "pxt-tertiary-background": "#0078d4",
+        "pxt-tertiary-background-hover": "#005a9e",
+        "pxt-tertiary-alpha20": "#0078d433",
+        "pxt-tertiary-alpha50": "#0078d47F",
+        "pxt-tertiary-foreground": "#ffffff",
+
+        "pxt-neutral-background1": "#1b1a19",
+        "pxt-neutral-foreground1": "#f3f2f1",
+        "pxt-neutral-background-hover1": "#292828",
+        "pxt-neutral-stencil1": "#3b3a39",
+
+        "pxt-neutral-background2": "#242424",
+        "pxt-neutral-foreground2": "#f3f2f1",
+        "pxt-neutral-background-hover2": "#0a0a0a",
+        "pxt-neutral-stencil2": "#3b3a39",
+
+        "pxt-neutral-background3": "#1b1a19",
+        "pxt-neutral-foreground3": "#f3f2f1",
+        "pxt-neutral-background-hover3": "#292828",
+        "pxt-neutral-stencil3": "#3b3a39",
+        "pxt-neutral-background3-alpha90": "#1b1a19E5",
+
+        "pxt-neutral-alpha0": "rgba(255, 255, 255, 0)",
+        "pxt-neutral-alpha05": "rgba(255, 255, 255, 0.05)",
+        "pxt-neutral-alpha20": "rgba(255, 255, 255, 0.2)",
+        "pxt-neutral-alpha50": "rgba(255, 255, 255, 0.5)",
+
+        "pxt-neutral-button-background": "#323130",
+        "pxt-neutral-button-foreground": "#f3f2f1",
+        "pxt-neutral-button-background-hover": "#292828",
+        "pxt-neutral-button-stencil": "#666462",
+
+        "pxt-link": "#3a96dd",
+        "pxt-link-hover": "#1a73e8",
+        "pxt-focus-border": "#ffffff",
+
+        "pxt-colors-purple-background": "#8e44ad",
+        "pxt-colors-purple-foreground": "#ffffff",
+        "pxt-colors-purple-hover": "#732d91",
+        "pxt-colors-purple-alpha10": "#8e44ad19",
+
+        "pxt-colors-orange-background": "#e67e22",
+        "pxt-colors-orange-foreground": "#ffffff",
+        "pxt-colors-orange-hover": "#d35400",
+        "pxt-colors-orange-alpha10": "#e67e2219",
+
+        "pxt-colors-brown-background": "#8e562e",
+        "pxt-colors-brown-foreground": "#ffffff",
+        "pxt-colors-brown-hover": "#7a4c2a",
+        "pxt-colors-brown-alpha10": "#8e562e19",
+
+        "pxt-colors-blue-background": "#3498db",
+        "pxt-colors-blue-foreground": "#ffffff",
+        "pxt-colors-blue-hover": "#2980b9",
+        "pxt-colors-blue-alpha10": "#3498db19",
+
+        "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": "#f1c40f",
+        "pxt-colors-yellow-foreground": "#000000",
+        "pxt-colors-yellow-hover": "#f39c12",
+        "pxt-colors-yellow-alpha10": "#f1c40f19"
+    }
+}

theme/color-themes/arcade-legacy.json

@@ -0,0 +1,113 @@
+{
+    "id": "arcade-legacy",
+    "name": "Arcade Legacy",
+    "overrideFiles": [],
+    "colors": {
+        "pxt-target-background1": "#FEF3E0",
+        "pxt-target-foreground1": "#000000",
+        "pxt-target-background-hover1": "#fce0af",
+        "pxt-target-foreground-hover1": "#000000",
+        "pxt-target-stencil1": "#e4d9c7",
+
+        "pxt-target-background2": "#B1E1DA",
+        "pxt-target-foreground2": "#000000",
+        "pxt-target-background-hover2": "#8cd3c9",
+        "pxt-target-foreground-hover2": "#000000",
+        "pxt-target-stencil2": "#b0b0b0",
+
+        "pxt-target-background3": "#FEF3E0",
+        "pxt-target-foreground3": "#000000",
+        "pxt-target-background-hover3": "#fce0af",
+        "pxt-target-foreground-hover3": "#000000",
+        "pxt-target-stencil3": "#e4d9c7",
+
+        "pxt-header-background": "#F76820",
+        "pxt-header-background-alpha30": "#F768201E",
+        "pxt-header-foreground": "#FFFFFF",
+
+        "pxt-primary-background": "#F76820",
+        "pxt-primary-background-hover": "#fe5500",
+        "pxt-primary-alpha0": "#F7682000",
+        "pxt-primary-alpha90": "#F768205A",
+        "pxt-primary-dark": "#AB3D06",
+        "pxt-primary-light": "#FBAB82",
+        "pxt-primary-foreground": "#FFFFFF",
+
+        "pxt-secondary-background": "#028B9B",
+        "pxt-secondary-background-hover": "#015e69",
+        "pxt-secondary-alpha0": "#028B9B00",
+        "pxt-secondary-alpha50": "#028B9B7F",
+        "pxt-secondary-dark": "#005D6A",
+        "pxt-secondary-light": "#58afba",
+        "pxt-secondary-foreground": "#FFFFFF",
+
+        "pxt-tertiary-background": "#028B9B",
+        "pxt-tertiary-background-hover": "#015e69",
+        "pxt-tertiary-alpha20": "#028B9B33",
+        "pxt-tertiary-alpha50": "#028B9B7F",
+        "pxt-tertiary-foreground": "#FFFFFF",
+
+        "pxt-neutral-background1": "#FFFFFF",
+        "pxt-neutral-foreground1": " rgba(0,0,0,.85) ",
+        "pxt-neutral-background-hover1": "#cccccc",
+        "pxt-neutral-stencil1": "rgba(34, 36, 38, .15)",
+
+        "pxt-neutral-background2": "#F9FAFB",
+        "pxt-neutral-foreground2": "rgba(0,0,0,.87)",
+        "pxt-neutral-background-hover2": "#e0e0e0",
+        "pxt-neutral-stencil2": "#e9eef2",
+
+        "pxt-neutral-background3": "#4e5758",
+        "pxt-neutral-foreground3": "#FFFFFF",
+        "pxt-neutral-background-hover3": "#363c3d",
+        "pxt-neutral-stencil3": "#FFFFFF",
+        "pxt-neutral-background3-alpha90": "#4E5758E5",
+
+        "pxt-neutral-alpha0": "rgba(0, 0, 0, 0)",
+        "pxt-neutral-alpha05": "rgba(0, 0, 0, 0.05)",
+        "pxt-neutral-alpha20": "rgba(0, 0, 0, 0.2)",
+        "pxt-neutral-alpha50": "rgba(0, 0, 0, 0.5)",
+
+        "pxt-neutral-button-background": "#F8F8F8",
+        "pxt-neutral-button-foreground": "rgba(0,0,0,.85)",
+        "pxt-neutral-button-background-hover": "#DFDFDF",
+        "pxt-neutral-button-stencil": "#919191",
+
+        "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"
+    }
+}

theme/color-themes/arcade-light.json

@@ -0,0 +1,113 @@
+{
+    "id": "arcade-light",
+    "name": "Arcade Light",
+    "overrideFiles": [],
+    "colors": {
+        "pxt-target-background1": "#F8FAFC",
+        "pxt-target-foreground1": "#000000",
+        "pxt-target-background-hover1": "#d4e0ed",
+        "pxt-target-foreground-hover1": "#000000",
+        "pxt-target-stencil1": "#e1e1e1",
+
+        "pxt-target-background2": "#F8FAFC",
+        "pxt-target-foreground2": "#000000",
+        "pxt-target-background-hover2": "#d4e0ed",
+        "pxt-target-foreground-hover2": "#000000",
+        "pxt-target-stencil2": "#e1e1e1",
+
+        "pxt-target-background3": "#F8FAFC",
+        "pxt-target-foreground3": "#000000",
+        "pxt-target-background-hover3": "#d4e0ed",
+        "pxt-target-foreground-hover3": "#000000",
+        "pxt-target-stencil3": "#e1e1e1",
+
+        "pxt-header-background": "#116E79",
+        "pxt-header-background-alpha30": "#116E791E",
+        "pxt-header-foreground": "#FFFFFF",
+
+        "pxt-primary-background": "#5D4FBA",
+        "pxt-primary-background-hover": "#4d3eb1",
+        "pxt-primary-alpha0": "#5D4FBA00",
+        "pxt-primary-alpha90": "#5D4FBA5A",
+        "pxt-primary-dark": "#372E75",
+        "pxt-primary-light": "#a098d7",
+        "pxt-primary-foreground": "#FFFFFF",
+
+        "pxt-secondary-background": "#5D4FBA",
+        "pxt-secondary-background-hover": "#483c9a",
+        "pxt-secondary-alpha0": "#5D4FBA00",
+        "pxt-secondary-alpha50": "#5D4FBA7F",
+        "pxt-secondary-dark": "#372E75",
+        "pxt-secondary-light": "#7569c4",
+        "pxt-secondary-foreground": "#F8FAFC",
+
+        "pxt-tertiary-background": "#116E79",
+        "pxt-tertiary-background-hover": "#0b454c",
+        "pxt-tertiary-alpha20": "#116E7933",
+        "pxt-tertiary-alpha50": "#116E797F",
+        "pxt-tertiary-foreground": "#FFFFFF",
+
+        "pxt-neutral-background1": "#FFFFFF",
+        "pxt-neutral-foreground1": "rgba(0,0,0,.85)",
+        "pxt-neutral-background-hover1": "#cccccc",
+        "pxt-neutral-stencil1": "rgba(34, 74, 114, 0.15)",
+
+        "pxt-neutral-background2": "#F9FAFB",
+        "pxt-neutral-foreground2": "rgba(0,0,0,.87)",
+        "pxt-neutral-background-hover2": "#e0e0e0",
+        "pxt-neutral-stencil2": "#e9eef2",
+
+        "pxt-neutral-background3": "#4e5758",
+        "pxt-neutral-foreground3": "#FFFFFF",
+        "pxt-neutral-background-hover3": "#363c3d",
+        "pxt-neutral-stencil3": "#FFFFFF",
+        "pxt-neutral-background3-alpha90": "#4E5758E5",
+
+        "pxt-neutral-alpha0": "rgba(0, 0, 0, 0)",
+        "pxt-neutral-alpha05": "rgba(0, 0, 0, 0.05)",
+        "pxt-neutral-alpha20": "rgba(0, 0, 0, 0.2)",
+        "pxt-neutral-alpha50": "rgba(0, 0, 0, 0.5)",
+
+        "pxt-neutral-button-background": "#F8F8F8",
+        "pxt-neutral-button-foreground": "rgba(0,0,0,.85)",
+        "pxt-neutral-button-background-hover": "#DFDFDF",
+        "pxt-neutral-button-stencil": "#919191",
+
+        "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"
+    }
+}

theme/color-themes/overrides/arcade-dark-overrides.css

@@ -0,0 +1,9 @@
+.image-editor-change-name .image-editor-input {
+    /* The textbox background matches the footer of the image editor, so add a border */
+    border: 1px solid var(--pxt-neutral-stencil2);
+}
+
+#langmodal #availablelocales .langoption .header {
+    /* Better contrast */
+    color: var(--pxt-primary-background);
+}