Some More Assorted Themes Fixes (microsoft#10448)

* Fix function argument type display

* Fix toolbox separator line

* Change color of "Open in VS Code" button (and similarly, "Host multiplayer game") to match under-sim buttons.

* Fix pxt.json edit page

* Change textbox color to look less disabled

* Theme workspace search

* Fix foreground / background mismatch (target-background1 was using target-foreground2).

No bug filed on this since target1 and target2 tend to have similar foregrounds, but it was obvious when I was working on the theme builder and I forgot to fix it until now.

Author: thsparks

pxtblocks/plugins/functions/fields/fieldArgumentEditor.ts

@@ -78,7 +78,7 @@ Blockly.Css.register(`
 }
 
 .functioneditor i.argumentEditorTypeIcon {
-    color: var(--pxt-primary-foreground);
+    color: var(--pxt-target-foreground1);
     position: absolute;
     width: 24px;
     height: 24px;
@@ -97,4 +97,4 @@ Blockly.Css.register(`
     cursor: pointer;
 }
 
-`)
+`)

pxtblocks/workspaceSearch.ts

@@ -36,7 +36,47 @@ export class PxtWorkspaceSearch extends WorkspaceSearch {
 }
 
 Blockly.Css.register(`
+.blockly-ws-search {
+    background: var(--pxt-neutral-background1);
+    color: var(--pxt-neutral-foreground1);
+    border: solid var(--pxt-neutral-alpha50) 1px;
+    border-top: none;
+    border-right: none;
+    box-shadow: 0px 2px 15px var(--pxt-neutral-alpha50);
+}
+
+.blockly-ws-search input {
+    -webkit-tap-highlight-color: transparent;
+    background: var(--pxt-neutral-background1);
+    color: var(--pxt-neutral-foreground1);
+    border: none;
+}
+
+.blockly-ws-search input::-webkit-input-placeholder {
+    color: var(--pxt-neutral-alpha50);
+}
+
+.blockly-ws-search input::-moz-placeholder {
+    color: var(--pxt-neutral-alpha50);
+}
+
+.blockly-ws-search input::-ms-input-placeholder {
+    color: var(--pxt-neutral-alpha50);
+}
+
+.blockly-ws-search input:active,
+.blockly-ws-search input:focus {
+    border-color: var(--pxt-neutral-alpha50);
+    background: var(--pxt-neutral-background1);
+    color: var(--pxt-neutral-foreground1);
+}
+
+.blockly-ws-search input::selection {
+    color: var(--pxt-neutral-foreground1);
+}
+
 .blockly-ws-search button {
     padding-left: 6px;
     padding-right: 6px;
-}`);
+    color: var(--pxt-neutral-foreground1);
+}`);

theme/blockly-core.less

@@ -180,7 +180,7 @@ i.icon.blocklyTreeButton {
 }
 
 line.blocklyFlyoutLine {
-    stroke: var(--pxt-neutral-stencil3);
+    stroke: var(--pxt-neutral-foreground3);
 }
 
 

theme/color-themes/overrides/high-contrast-overrides.css

@@ -9,7 +9,13 @@
     z-index: 1;
 }
 
-.barcharticon {
+/* 
+ * Inverted image colors
+ */
+.barcharticon,
+.blockly-ws-search-next-btn,
+.blockly-ws-search-previous-btn,
+.blockly-ws-search-close-btn {
     filter: invert(1);
 }
 

theme/home.less

@@ -137,7 +137,7 @@
             margin: 0;
             padding-left: @carouselArrowSize;
             font-size: 20px;
-            color: var(--pxt-target-foreground2);
+            color: var(--pxt-target-foreground1);
             &.myproject-header {
                 cursor: pointer;
                 outline: none;

theme/semantic-ui-overrides.less

@@ -212,9 +212,9 @@ body.pxt-theme-root {
 
         input {
             -webkit-tap-highlight-color: transparent;
-            background: var(--pxt-neutral-background2);
-            border: 1px solid var(--pxt-neutral-stencil2);
-            color: var(--pxt-neutral-foreground2);
+            background: var(--pxt-neutral-background1);
+            border: 1px solid var(--pxt-neutral-stencil1);
+            color: var(--pxt-neutral-foreground1);
 
             &::-webkit-input-placeholder,
             &::-moz-placeholder,
@@ -240,6 +240,13 @@ body.pxt-theme-root {
         }
     }
 
+    .ui.segment {
+        background: var(--pxt-neutral-background1);
+        color: var(--pxt-neutral-foreground1);
+        border: 1px solid var(--pxt-neutral-stencil1);
+        box-shadow: 0 1px 2px 0 var(--pxt-neutral-alpha10);
+    }
+
     .ui.raised.segment, .ui.raised.segments {
         box-shadow: 0 2px 4px 0 var(--pxt-neutral-alpha10),0 2px 10px 0 var(--pxt-neutral-alpha10);
     }

webapp/src/sidepanel.tsx

@@ -257,10 +257,10 @@ export class Sidepanel extends data.Component<SidepanelProps, SidepanelState> {
                             {pxt.options.debug && <Button key="hwdebugbtn" className="tertiary" icon="xicon chip" text={"Dev Debug"} onClick={handleHardwareDebugClick} />}
                         </div>
                         <div className="ui item grid centered portrait hide hidefullscreen">
-                            {showOpenInVscodeButton && <Button className={"tertiary hostmultiplayergame-button"} icon={"icon share"} text={lf("Open in VS Code")} ariaLabel={lf("Open in Visual Studio Code for Web")} onClick={this.onOpenInVSCodeClick} />}
+                            {showOpenInVscodeButton && <Button className={"secondary hostmultiplayergame-button"} icon={"icon share"} text={lf("Open in VS Code")} ariaLabel={lf("Open in Visual Studio Code for Web")} onClick={this.onOpenInVSCodeClick} />}
                         </div>
                         <div className="ui item grid centered portrait hide hidefullscreen">
-                            {showHostMultiplayerGameButton && <Button className={"tertiary hostmultiplayergame-button"} icon={"xicon multiplayer"} text={lf("Host multiplayer game")} ariaLabel={lf("Host multiplayer game")} onClick={this.onHostMultiplayerGameClick} />}
+                            {showHostMultiplayerGameButton && <Button className={"secondary hostmultiplayergame-button"} icon={"xicon multiplayer"} text={lf("Host multiplayer game")} ariaLabel={lf("Host multiplayer game")} onClick={this.onHostMultiplayerGameClick} />}
                         </div>
                         {showSerialButtons && <div id="serialPreview" className="ui editorFloat portrait hide hidefullscreen">
                             <serialindicator.SerialIndicator ref="simIndicator" isSim={true} onClick={this.handleSimSerialClick} parent={parent} />