Arcade Theming (#6697)

* Theme updates

* Comment out some vars, update primary/secondary to make theming gaps clearer

* Comment unused vars

* Comment out some more unused vars

* Comment out unused vars

* Remove remaning unnecessary color vars

* Update hero banner button

* Change color "background1" to just "background"

* Revert "Change color "background1" to just "background""

This reverts commit 9cc31be.

* Add foregrounds to fields with background set

* Add missing foreground color

* Remove commented out less vars

* Play button & header styling

* Theme storage adjustments, but none of these are used yet.

* Add high contrast theme

* Add arcade-specific themes

* Remove unused theme vars

* Reducing variable set

* Combine neutral-button and neutral*2, alpha05 -> alpha10, update dark primaries for light and legacy

* Rename light/dark variants to "accent"

* Replace primary-alpha0 with neutral-alpha0

* Add theme values for new vars

* Reorder vars

* Change background/foreground-hover# to background/foreground#-hover (more consistent with fluentUI)

* Reduce difference between background and background-hover for neutral1

* Slightly better toolbox contrast for dark theme

* More dark theme toolbox updates

* Less intense brightness adjustment

* Dak theme updates

* Sim toolbar color fixes

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",

theme/color-themes/arcade-dark.json

@@ -0,0 +1,119 @@
+{
+    "id": "arcade-dark",
+    "name": "Arcade Dark",
+    "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": "#02494c",
+        "pxt-colors-teal-foreground": "#ffffff",
+        "pxt-colors-teal-hover": "#036165",
+        "pxt-colors-teal-alpha10": "#02494c19",
+
+        "pxt-colors-yellow-background": "#fde300",
+        "pxt-colors-yellow-foreground": "#000000",
+        "pxt-colors-yellow-hover": "#e4cc00",
+        "pxt-colors-yellow-alpha10": "#fde30019"
+    }
+}

theme/color-themes/arcade-legacy.json

@@ -0,0 +1,109 @@
+{
+    "id": "arcade-legacy",
+    "name": "Arcade Legacy",
+    "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": "#fce0af",
+        "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": "#e6e6e6",
+        "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": "#DFDFDF",
+        "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": "#363c3d",
+        "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"
+    }
+}

theme/color-themes/arcade-light.json

@@ -0,0 +1,109 @@
+{
+    "id": "arcade-light",
+    "name": "Arcade Light",
+    "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": "#e6e6e6",
+        "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": "#DFDFDF",
+        "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": "#363c3d",
+        "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"
+    }
+}

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

@@ -0,0 +1,31 @@
+.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);
+}
+
+.pxtToolbox span.blocklyTreeLabel,
+.pxtToolbox .blocklyTreeSelected span.blocklyTreeLabel,
+.pxtToolbox .blocklyTreeSelected .blocklyTreeIcon {
+    /* Better contrast in toolbox */
+    color: var(--pxt-target-foreground3);
+}
+
+.pxtToolbox .blocklyTreeIcon {
+    /* Better contrast in toolbox, but try to preserve some of the icon color */
+    filter: brightness(1.2) saturate(2);
+}
+
+#mainmenu {
+    /* Some parts of the app use the same color as a background. This keeps the menu from blending in */
+    border-bottom: 1px solid var(--pxt-header-stencil);
+}
+
+.projectsdialog .ui.card:hover {
+    /* Neutral and target colors are the same in dark theme, so it helps to have a clearer border when hovering over cards. */
+    border-color: var(--pxt-focus-border) !important;
+}