Fixes for High contrast mode as per lego design. Most changes are in PXT. Adding high contrast theme in the simulator (#564)

pxtarget.json

@@ -81,7 +81,6 @@
         "accentColor": "#0089BF",
         "logoUrl": "https://education.lego.com/",
         "logo": "./static/lego_education_logo.png",
-        "highContrastLogo": "./static/lego_education_logo_white.png",
         "docsLogo": "./static/lego-logo.svg",
         "portraitLogo": "./static/lego-logo.svg",
         "footerLogo": "./static/lego-logo.svg",

sim/visuals/board.ts

@@ -101,10 +101,13 @@ namespace pxsim.visuals {
     export const SCREEN_HEIGHT = 128;
     export interface IBoardTheme {
         accent?: string;
+        highContrast?: boolean;
         display?: string;
         buttonOuter?: string;
         buttonUps: string[];
         buttonDown?: string;
+        wireColor?: string;
+        backgroundViewColor?: string;
     }
 
     export var themes: IBoardTheme[] = ["#3ADCFE"].map(accent => {
@@ -112,12 +115,21 @@ namespace pxsim.visuals {
             accent: accent,
             buttonOuter: "#979797",
             buttonUps: ["#a8aaa8", "#393939", "#a8aaa8", "#a8aaa8", "#a8aaa8", '#a8aaa8'],
-            buttonDown: "#000"
+            buttonDown: "#000",
+            wireColor: '#5A5A5A',
+            backgroundViewColor: '#d6edff'
         }
     });
 
     export function randomTheme(highContrast?: boolean, light?: boolean): IBoardTheme {
-        return themes[Math.floor(Math.random() * themes.length)];
+        let theme = themes[Math.floor(Math.random() * themes.length)];
+        if (highContrast) {
+            theme = JSON.parse(JSON.stringify(theme)) as IBoardTheme;
+            theme.highContrast = true;
+            theme.wireColor = '#ffffff';
+            theme.backgroundViewColor = '#ffffff';
+        }
+        return theme;
     }
 
     export interface IBoardProps {
@@ -334,7 +346,7 @@ namespace pxsim.visuals {
             this.style.textContent = EV3_STYLE;
 
             this.layoutView = new LayoutView();
-            this.layoutView.inject(this.element);
+            this.layoutView.inject(this.element, this.props.theme);
 
             const brick = new BrickViewPortrait(-1);
             this.layoutView.setBrick(brick);

sim/visuals/controls/backgroundView.ts

@@ -13,7 +13,7 @@ namespace pxsim.visuals {
                     'x': 0, 'y': 0,
                     'width': '100%',
                     'height': '100%',
-                    'style': `fill: #d6edff; stroke: #A8A9A8; stroke-width: 3px; stroke-opacity: 0.2`
+                    'style': `fill: ${this.theme.backgroundViewColor};stroke: #A8A9A8; stroke-width: 3px; stroke-opacity: 0.2`
                 }) as SVGRectElement;
             return this.backgroundGroup;
         }

sim/visuals/layoutView.ts

@@ -79,8 +79,8 @@ namespace pxsim.visuals {
 
         public setBrick(brick: BrickView) {
             this.brick = brick;
-            this.brick.inject(this.scrollGroup);
+            this.brick.inject(this.scrollGroup, this.theme);
-            this.brickLandscape.inject(this.scrollGroup);
+            this.brickLandscape.inject(this.scrollGroup, this.theme);
             this.brick.setSelected(false);
             this.brickLandscape.setSelected(true);
             this.brickLandscape.setVisible(false);
@@ -212,16 +212,16 @@ namespace pxsim.visuals {
 
             // Inject all wires
             for (let port = 0; port < DAL.NUM_OUTPUTS; port++) {
-                this.outputWires[port].inject(this.scrollGroup);
+                this.outputWires[port].inject(this.scrollGroup, this.theme);
             }
             for (let port = 0; port < DAL.NUM_INPUTS; port++) {
-                this.inputWires[port].inject(this.scrollGroup);
+                this.inputWires[port].inject(this.scrollGroup, this.theme);
             }
 
             // Inject all view containers
             for (let i = 0; i < 4; i++) {
-                this.inputContainers[i].inject(this.scrollGroup);
+                this.inputContainers[i].inject(this.scrollGroup, this.theme);
-                this.outputContainers[i].inject(this.scrollGroup);
+                this.outputContainers[i].inject(this.scrollGroup, this.theme);
             }
 
             // Inject all ports
@@ -253,6 +253,12 @@ namespace pxsim.visuals {
         }
 
         public updateTheme(theme: IBoardTheme) {
+            this.inputWires.forEach(n => {
+                n.updateTheme(theme);
+            })
+            this.outputWires.forEach(n => {
+                n.updateTheme(theme);
+            })
             this.inputs.forEach(n => {
                 n.updateTheme(theme);
             })

sim/visuals/view.ts

@@ -19,8 +19,9 @@ namespace pxsim.visuals {
         public abstract getInnerWidth(): number;
         public abstract getInnerHeight(): number;
 
-        public inject(parent: SVGElement, width?: number, visible = true) {
+        public inject(parent: SVGElement, theme: IBoardTheme, width?: number, visible = true) {
             this.width = width;
+            this.theme = theme;
             parent.appendChild(this.getView());
 
             if (visible) {
@@ -276,7 +277,7 @@ namespace pxsim.visuals {
         }
 
         public addView(view: View) {
-            view.inject(this.element);
+            view.inject(this.element, this.theme);
         }
 
         public clear() {

sim/visuals/wireView.ts

@@ -41,6 +41,11 @@ namespace pxsim.visuals {
             return this.wire;
         }
 
+        public updateThemeCore() {
+            let theme = this.theme;
+            this.path.setAttribute('stroke', theme.wireColor);
+        }
+
         updatePath() {
             if (!this.hasDimensions) return;
             const height = this.endY - this.startY;

theme/style.less

@@ -155,22 +155,6 @@
     }
 }
 
-/** high contrast **/
-.hc {
-    .ui.menu, #downloadArea,
-    .menubar .ui.menu.fixed .ui.item.editor-menuitem .item.active {
-        background-color: black !important;
-        color: white !important;
-    }
-    .ui.red.corner.label {
-        border-color: #d4000d!important;
-    }
-    .menubar .ui.menu.fixed .item.editor-menuitem .ui.grid {
-        border-color: white !important;
-    }
-}
-
-
 /*******************************
      Custom icons
 *******************************/