Arcade Theme Fixes (#6756)

The most notable change here is setting the default arcade theme to legacy instead of light. It also adds the neutral base color to all themes and includes some fixes to dark theme.

Somewhat counter-intuitively, I've updated the Semantic UI blue color as well. This affects our notification popups. Normally I'd switch these to use the theme's colors, but one of the notifications is "Sign-in successful", and signing in also triggers the theme to change based on the user's preferences. The result is that the notification switches colors halfway through, which looks odd. So for now, I decided to just let this fallback on the non-themed color instead, but it required a color update to be easily readable.

pxtarget.json

@@ -621,7 +621,7 @@
             "arrays": "#FF8F08",
             "functions": "#1446A0"
         },
-        "defaultColorTheme": "arcade-light",
+        "defaultColorTheme": "arcade-legacy",
         "highContrastColorTheme": "pxt-high-contrast",
         "simAnimationEnter": "fly right in",
         "simAnimationExit": "fly right out",

theme/color-themes/arcade-dark.json

@@ -68,6 +68,7 @@
         "pxt-neutral-stencil3": "#3b3a39",
         "pxt-neutral-background3-alpha90": "#3b3a39",
 
+        "pxt-neutral-base": "rgba(180, 180, 180, 1)",
         "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)",

theme/color-themes/arcade-legacy.json

@@ -65,6 +65,7 @@
         "pxt-neutral-stencil3": "#FFFFFF",
         "pxt-neutral-background3-alpha90": "#4E5758E5",
 
+        "pxt-neutral-base": "rgba(0, 0, 0, 1)",
         "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)",

theme/color-themes/arcade-light.json

@@ -65,6 +65,7 @@
         "pxt-neutral-stencil3": "#FFFFFF",
         "pxt-neutral-background3-alpha90": "#4E5758E5",
 
+        "pxt-neutral-base": "rgba(0, 0, 0, 1)",
         "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)",

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

@@ -30,3 +30,16 @@
     /* 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;
 }
+
+/* 
+ * Inverted image colors
+ */
+.barcharticon {
+    filter: invert(1);
+}
+
+.modals .ui.button.immersive-reader-button,
+#mainmenu .immersive-reader-button.ui.item,
+#simulator .editor-sidebar .immersive-reader-button.ui.item {
+    background-image: url("/static/icons/immersive-reader-light.svg") !important;
+}

theme/site/globals/site.variables

@@ -30,7 +30,7 @@
 
 /* 32 colors */
 @purple           : #5D4FBA;
-@blue             : #B1E3DA;
+@blue             : #116e79;
 
 @lightGrey        : #F8FAFC;