pxt-core 7.4.16 → 7.4.20

package/react-common/components/profile/UserPane.tsx

@@ -21,7 +21,7 @@ export const UserPane = (props: UserPaneProps) => {
     const emailLabel = <>
         {emailChecked === CheckboxStatus.Waiting ? <div className="common-spinner" /> : undefined}
         {lf("I would like to receive the MakeCode newsletter. ")}
-        <a href="https://makecode.com/privacy" target="_blank" rel="noopener noreferrer">{lf("View Privacy Statement")}</a>
+        <a href="https://makecode.com/privacy" target="_blank" rel="noopener noreferrer" tabIndex={0}>{lf("View Privacy Statement")}</a>
     </>
 
     return <div className="profile-user-pane">

package/react-common/components/types.d.ts

@@ -26,4 +26,5 @@ interface DialogOptions {
     confirmationText?: string;      // Display a text input the user must type to confirm.
     confirmationCheckbox?: string;  // Display a checkbox the user must check to confirm.
     confirmationGranted?: boolean;
+    onClose?: () => void;
 }

package/react-common/components/util.tsx

@@ -5,6 +5,7 @@ export interface ControlProps {
     className?: string;
     ariaLabel?: string;
     ariaHidden?: boolean;
+    ariaDescribedBy?: string;
     role?: string;
 }
 

package/react-common/styles/controls/Button.less

@@ -176,3 +176,19 @@
     color: @buttonMenuTextColorInverted;
 }
 
+/****************************************************
+ *                 High Contrast                    *
+ ****************************************************/
+
+.high-contrast, .hc {
+    .common-button {
+        color: @highContrastTextColor !important;
+        background: @highContrastBackgroundColor !important;
+        border-color: @highContrastTextColor !important;
+
+        &:hover, &:focus {
+            outline: @highContrastFocusOutline !important;
+            z-index: @highContrastFocusZIndex;
+        }
+    }
+}

package/react-common/styles/controls/Checkbox.less

@@ -10,4 +10,15 @@
 .common-checkbox:focus-within {
     outline: @checkboxFocusOutline;
     border-radius: 0.2em;
+}
+
+/****************************************************
+ *                 High Contrast                    *
+ ****************************************************/
+
+.high-contrast {
+    .common-checkbox:hover,
+    .common-checkbox:focus-within {
+        outline: @highContrastFocusOutline;
+    }
 }

package/react-common/styles/controls/Input.less

@@ -92,4 +92,22 @@
     i {
         color: @inputTextColorDisabled;
     }
-}
+}
+
+/****************************************************
+ *                 High Contrast                    *
+ ****************************************************/
+
+.high-contrast {
+    .common-input {
+        color: @highContrastTextColor;
+        border-color: @highContrastTextColor;
+        background-color: @highContrastBackgroundColor;
+    }
+
+    .common-input-group:focus::after,
+    .common-input-group:focus-within::after {
+        border-color: @highContrastHighlightColor;
+    }
+
+}

package/react-common/styles/controls/MenuDropdown.less

@@ -10,7 +10,7 @@
 .common-menu-dropdown-pane {
     position: absolute;
     right: 0;
-    width: 10rem;
+    width: 12rem;
 
     ul {
         list-style: none;
@@ -29,8 +29,27 @@
     text-align: left;
     width: 100%;
     margin: 0;
+    padding: 1rem;
 }
 
 .common-menu-dropdown-item.common-button:focus::after {
     outline: @buttonFocusOutlineInverted;
+}
+
+/****************************************************
+ *                 High Contrast                    *
+ ****************************************************/
+
+.high-contrast {
+    .common-menu-dropdown-pane {
+        color: @highContrastTextColor;
+        background-color: @highContrastBackgroundColor;
+        border: 1px solid @highContrastTextColor;
+    }
+
+    .common-menu-dropdown-item:hover,
+    .common-menu-dropdown > .menu-button.expanded {
+        outline: @highContrastFocusOutline;
+        z-index: @highContrastFocusZIndex;
+    }
 }

package/react-common/styles/controls/Modal.less

@@ -8,7 +8,7 @@
     right: 0;
     bottom: 0;
     background-color: var(--modal-overlay-color);
-    z-index: var(--modal-dimmer-zindex);
+    z-index: @modalDimmerZIndex;
 }
 
 .common-modal-container.fullscreen {
@@ -102,4 +102,33 @@
     background-color: var(--body-background-color);
     padding: 1rem;
     max-height: unset;
+}
+
+/****************************************************
+ *                 High Contrast                    *
+ ****************************************************/
+
+.high-contrast, .hc {
+    .common-modal-header,
+    .common-modal-body,
+    .common-modal-footer {
+        background-color: @highContrastBackgroundColor;
+        color: @highContrastTextColor;
+        border-color: @highContrastTextColor;
+
+        .common-modal-close .common-button .fas {
+            opacity: 1;
+            color: @highContrastTextColor;
+        }
+    }
+
+    .fullscreen > .common-modal > .common-modal-header,
+    .fullscreen > .common-modal > .common-modal-body {
+        background-color: @highContrastBackgroundColor;
+        color: @highContrastTextColor;
+    }
+
+    .common-modal {
+        border: 1px solid @highContrastTextColor;
+    }
 }

package/react-common/styles/profile/profile.less

@@ -315,6 +315,26 @@
     }
 }
 
+/****************************************************
+ *                 High Contrast                    *
+ ****************************************************/
+
+.high-contrast {
+    .profile-badges .profile-badge,
+    .profile-badges-background .profile-badge,
+    .profile-badge-and-title,
+    .profile-initials-portrait,
+    .profile-badge-subtitle,
+    .profile-username {
+        color: @highContrastTextColor;
+        background-color: @highContrastBackgroundColor;
+    }
+
+    .profile-badge.clickable:hover {
+        outline: @highContrastFocusOutline;
+    }
+}
+
 @media only screen and (max-width: 1200px) and (min-width: 992px) {
     .profile-badges, .profile-badges-background {
         background-size: 25%;

package/react-common/styles/react-common-variables.less

@@ -28,6 +28,7 @@
 @modalHeaderBackgroundColor: @modalBodyBackgroundColor;
 @modalFooterBackgroundColor: #f9fafb;
 @modalSeparatorBorder: 1px solid rgba(34, 36, 38, .15);
+@modalDimmerZIndex: 1000;
 
 
 /****************************************************
@@ -55,3 +56,13 @@
 @inputBackgroundColorDisabled: @commonBackgroundDisabledColor;
 @inputButtonColor: rgb(0, 120, 212);
 @inputButtonColorHover: rgb(16, 110, 190);
+
+/****************************************************
+ *                 High Contrast                    *
+ ****************************************************/
+
+ @highContrastTextColor: #ffffff;
+ @highContrastBackgroundColor: #000000;
+ @highContrastHighlightColor: #ffff00;
+ @highContrastFocusOutline: 2px solid @highContrastHighlightColor;
+ @highContrastFocusZIndex: 1;

package/theme/highcontrast.less

@@ -11,6 +11,7 @@
 
 @selected: yellow;
 @disabled: #3ff23f;
+@hyperlink: #807FFF;
 
 /* Messages */
 #msg .hc {
@@ -77,6 +78,10 @@
         text-decoration: underline;
     }
 
+    ul > li {
+        color: @HCtextColor;
+    }
+
     #tutorialcard .prevbutton,
     #tutorialcard .nextbutton {
         &:hover, &:focus {
@@ -498,7 +503,7 @@
                 border-color: @HCtextColor;
                 border-style: solid;
             }
-            .actions {
+            .ui.grid.stackable .actions {
                 .card-action {
                     border: 2px solid @HCtextColor;
                     .button.attached i {
@@ -509,6 +514,10 @@
                 .card-action-title {
                     color: @HCtextColor;
                 }
+                .card-action:hover,
+                .card-action:focus-within {
+                    border-color: @selected;
+                }
             }
         }
     }
@@ -666,7 +675,8 @@
     #assetEditor {
         .asset-editor-sidebar,
         .asset-editor-sidebar-preview,
-        .asset-editor-preview {
+        .asset-editor-preview,
+        .asset-editor-sidebar-temp {
             color: @HCtextColor;
             background-color: @HCbackground;
             border-color: @HCtextColor;
@@ -682,7 +692,10 @@
             border-bottom: 1px solid @HCtextColor;
         }
 
-        .asset-editor-button,
+        .common-button {
+            border: 1px solid;
+        }
+
         .asset-editor-card,
         .create-new {
             color: @HCtextColor;
@@ -695,10 +708,7 @@
             color: @HCbackground;
         }
 
-        .delete-asset {
-            border: 1px solid @red;
-        }
-
+        .asset-editor-card.selected,
         .asset-editor-gallery-tab.selected,
         .asset-editor-button:hover,
         .create-new:hover {
@@ -716,7 +726,8 @@
 
     /* Hyperlinks */
     a {
-        color: @HCtextColor !important;
+        color: @hyperlink !important;
+        text-decoration: underline !important;
     }
 
     #sidedocsbar {
@@ -809,7 +820,7 @@
         }
     }
 
-    .tutorialhint {
+    .tutorialhint, .tutorial-hint .tutorial-callout {
         border-color: @HCtextColor;
         background-color: @HCbackground;
         color: @HCtextColor;
@@ -856,6 +867,17 @@
         border-color: @selected !important;
     }
 
+    .formatted-bullet {
+        background: linear-gradient(@HCtextColor, @HCtextColor) ~"no-repeat 45%/2px 100%";
+        i.icon, i.xicon {
+            color: @HCbackground;
+            background-color: @HCtextColor;
+        }
+        &:after {
+            border-color: @HCtextColor !important;
+        }
+    }
+
 
     /* Modals */
     .ui.modal {

package/theme/tutorial-sidebar.less

@@ -4,6 +4,8 @@
 
 @tutorialPrimaryColor: @teal;
 @tutorialSecondaryColor: @blue;
+@tutorialLinkColor: #0064BF;
+@tutorialLinkHoverColor: #003C94;
 
 @tutorialTabletButtonColor: #f3f3f3;
 @tutorialTabletSimulatorButtonColor: rgba(0, 0, 0, 0.05);
@@ -66,6 +68,10 @@
     background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), @white);
 }
 
+.tutorial-replace-code + .tutorial-scroll-gradient {
+    bottom: 9rem;
+}
+
 .tutorial-container,
 .tutorial-controls {
     .ui.button, .ui.button:hover {
@@ -188,7 +194,7 @@
         Tutorial Hint
 *******************************/
 
-.tutorial-hint.ui.button {
+.tutorial-hint .ui.button {
     height: 3.2rem;
     width: 3.2rem;
     margin: 0;
@@ -196,8 +202,8 @@
     font-size: @tutorialTitleFontSize;
 }
 
-.tutorial-hint.ui.button,
-.tutorial-hint.ui.button > i {
+.tutorial-hint .ui.button,
+.tutorial-hint .ui.button > i {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -205,7 +211,7 @@
 
 // Overrides, largely using old tutorial hint CSS
 .tab-tutorial {
-    .tutorialhint {
+    .tutorial-callout {
         position: fixed;
         top: unset;
         right: unset;
@@ -214,15 +220,32 @@
         max-width: 50%;
     }
 
-    .tutorialhint:before {
+    .tutorial-callout:before {
         top: auto;
         left: 6.5rem;
         bottom: -2.5rem;
         transform: rotate(-90deg);
     }
+
+    .tutorial-callout-close.ui.button {
+        position: absolute;
+        right: 1rem;
+        padding: 0;
+        width: 1.5rem;
+        height: 1.5rem;
+        color: @white;
+        background-color: #000;
+        border-radius: 50%;
+
+        i.icon {
+            opacity: 1;
+            font-size: 1rem;
+            margin: 0 !important;
+        }
+    }
 }
 
-.tutorial-hint-mask {
+.tutorial-callout-mask {
     position: fixed;
     top: 0;
     left: 0;
@@ -274,6 +297,41 @@
     border-bottom: 2px solid @tutorialPrimaryColor;
 }
 
+/*******************************
+    Tutorial Replace Code
+*******************************/
+.tutorial-replace-code {
+    display: flex;
+    justify-content: center;
+    font-family: @segoeUIFont;
+
+    .tutorial-callout-button.ui.button {
+        padding: 0;
+        margin: 0 0 2rem;
+        color: @tutorialLinkColor;
+        background: none transparent;
+        font-family: @segoeUIFont;
+        font-weight: 500;
+    }
+
+    .tutorial-callout-button.ui.button:hover,
+    .tutorial-callout-button.ui.button:focus {
+        color: @tutorialLinkHoverColor;
+    }
+
+    .tutorial-callout {
+        bottom: 13.5rem;
+        padding: 1rem;
+        max-width: 32rem;
+    }
+
+    .tutorial-replace-code-actions {
+        display: flex;
+        justify-content: flex-end;
+    }
+}
+
+
 /*******************************
         Simulator Tab
 *******************************/
@@ -419,6 +477,7 @@
         padding: 1rem;
     }
 
+    .tutorial-replace-code + .tutorial-scroll-gradient,
     .tutorial-scroll-gradient {
         width: calc(~'100% - 15rem');
         bottom: 0;
@@ -482,8 +541,6 @@
             flex-direction: column;
             align-items: center;
             justify-content: center;
-            width: 4rem;
-            height: unset;
             margin: 0;
             font-size: 1rem;
 
@@ -491,7 +548,6 @@
                 display: flex;
                 align-items: center;
                 justify-content: center;
-                margin-bottom: 0.5rem!important;
                 font-size: 2rem;
             }
 
@@ -516,6 +572,10 @@
         }
     }
 
+    .tutorial-container > .ui.button i.icon {
+        margin-bottom: 0.5rem!important;
+    }
+
     /*******************************
             Tutorial Hint
     *******************************/
@@ -526,8 +586,7 @@
         margin: 0;
     }
 
-    .tutorial-hint.ui.button {
-        border-radius: 0.2rem;
+    .tutorial-hint .tutorial-callout-button.ui.button {
         color: @tutorialPrimaryColor;
         background: @tutorialSecondaryColor;
         margin: 1rem;
@@ -539,7 +598,7 @@
 
     // Overrides
     .tab-tutorial {
-        .tutorialhint {
+        .tutorial-callout {
             top: 18.5rem;
             right: 1.6rem;
             bottom: unset;
@@ -547,7 +606,7 @@
             max-width: 80%;
         }
 
-        .tutorialhint:before {
+        .tutorial-callout:before {
             top: -2.5rem;
             left: unset;
             bottom: auto;
@@ -556,6 +615,30 @@
         }
     }
 
+    /*******************************
+         Tutorial Replace Code
+    *******************************/
+
+    .tutorial-replace-code {
+        position: absolute;
+        right: 4.5rem;
+        bottom: -0.5rem;
+        width: 4rem;
+
+        .tutorial-callout {
+            top: 22.5rem;
+            max-width: 32rem;
+        }
+
+        .tutorial-replace-code-actions .ui.button {
+            width: unset;
+        }
+    }
+
+    .tutorial-replace-code + .tutorial-controls > .tutorial-hint {
+        width: 5rem;
+    }
+
 
     /*******************************
             Simulator Tab
@@ -639,7 +722,7 @@
             background-color: @tutorialPrimaryColor;
         }
 
-        .tutorial-hint.ui.button {
+        .tutorial-hint .tutorial-callout-button.ui.button {
             flex-direction: row;
             width: 12rem;
             margin: 3.5rem 1rem 0;

package/theme/tutorial.less

@@ -169,7 +169,8 @@ body#docs.tutorial {
 }
 
 #tutorialcard .tutorialmessage .content p,
-.tutorialhint p {
+.tutorialhint p,
+.tutorial-callout p {
     line-height: 1.4em !important;
     color: @tutorialSegmentColor;
 }
@@ -222,13 +223,15 @@ body#docs.tutorial {
 
 @media only screen and (min-height: 400px) {
     .hintdialog .ui.segment .blocklyPreview,
-    .tutorialhint .ui.segment .blocklyPreview {
+    .tutorialhint .ui.segment .blocklyPreview,
+    .tutorial-callout .ui.segment .blocklyPreview {
         max-height: 45vh;
     }
 }
 
 @media only screen and (max-height: 800px) {
-    .tutorialhint img {
+    .tutorialhint img,
+    .tutorial-callout img {
         max-height: 30vh;
     }
 }
@@ -358,7 +361,8 @@ code.lang-filterblocks {
     }
 }
 
-.tutorialhint {
+.tutorialhint,
+.tutorial-callout {
     position: absolute;
     max-width: 100%;
     min-width: 300px;
@@ -372,7 +376,8 @@ code.lang-filterblocks {
     box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, .3);
 }
 
-.tutorialhint:before {
+.tutorialhint:before,
+.tutorial-callout:before {
     content: ' ';
     position: absolute;
     width: 0;
@@ -385,16 +390,19 @@ code.lang-filterblocks {
     transform: rotateZ(-135deg);
 }
 
-.tutorialhint > div {
+.tutorialhint > div,
+.tutorial-callout > div {
     max-height: 60vh;
     overflow: auto;
 }
 
-.tutorialhint.hidden {
+.tutorialhint.hidden,
+.tutorial-callout.hidden {
     display: none;
 }
 
-.tutorialhint .lang-blocks .segment.raised {
+.tutorialhint .lang-blocks .segment.raised,
+.tutorial-callout .lang-blocks .segment.raised {
     border: none;
     background: none;
     box-shadow: none;