Accessibility compliance: editor colors update (#6425)

* colors updated * color for cloud projects, new project, asset grid, debugger, extension labels updated
microsoft · May 24, 2024 · c37d19a · c37d19a
1 parent 98facd1
commit c37d19a
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 23 deletions.
diff --git a/docs/beginner-maps.md b/docs/beginner-maps.md
@@ -14,7 +14,7 @@
   "imageUrl":  "/static/skillmap/backgrounds/story-map.png",
   "url": "https://arcade.makecode.com/--skillmap#story",
   "label": "New? Try This!",
-  "labelClass": "orange ribbon large",
+  "labelClass": "purple ribbon large",
   "directOpen": true
 },
 {

diff --git a/docs/skillmaps.md b/docs/skillmaps.md
@@ -12,7 +12,7 @@
   "imageUrl":  "/static/skillmap/backgrounds/beginner.png",
   "url": "https://arcade.makecode.com/--skillmap#beginner",
   "label": "New? Try This!",
-  "labelClass": "orange ribbon large",
+  "labelClass": "purple ribbon large",
   "directOpen": true
 },
 {

diff --git a/docs/tutorials.md b/docs/tutorials.md
@@ -14,7 +14,7 @@
   "imageUrl": "/static/tutorials/interface/info.png",
   "largeImageUrl": "/static/tutorials/interface/info.png",
   "label": "New? Try This!",
-  "labelClass": "orange ribbon large"
+  "labelClass": "purple ribbon large"
 },{
   "name": "Chase the Pizza",
   "description": "Get started creating a simple game to chase a pizza around the screen and collect as many points as possible before time runs out!",

diff --git a/pxtarget.json b/pxtarget.json
@@ -605,10 +605,10 @@
         },
         "blocklyOptions": {
             "grid": {
-                "spacing": 20,
-                "length": 100,
-                "colour": "rgba(107, 79, 118, 0.10)",
-                "snap": true
+                "spacing": 30,
+                "length": 1,
+                "colour": "rgb(189, 195, 199)",
+                "snap": false
             }
         },
         "blockColors": {
@@ -624,7 +624,7 @@
         "simAnimationExit": "fly right out",
         "crowdinProject": "makecode",
         "monacoColors": {
-            "editor.background": "#FEF3E0"
+            "editor.background": "#F8FAFC"
         },
         "monacoFieldEditors": [
             "image-editor",

diff --git a/theme/site/globals/site.variables b/theme/site/globals/site.variables
@@ -31,21 +31,23 @@
 @grey             : #7f8c8d;
 @orange           : #F76820;
 @pink             : #E91E63;
-@teal             : #028B9B;
+@teal             : #116E79;
 @yellow           : #f1c40f;
 
 /* 32 colors */
-@purple           : #6B4F76;
+@purple           : #5D4FBA;
 @blue             : #B1E3DA;
 @beige            : #FEF3E0;
 @salmon           : #E95153;
 
+@lightGrey        : #F8FAFC;
+
 /*-------------------
     Brand Colors
 --------------------*/
 
-@primaryColor        : @orange;
-@secondaryColor      : @orange;
+@primaryColor        : @teal;
+@secondaryColor      : @purple;
 
 @lightPrimaryColor   : @lightBlue;
 @lightSecondaryColor : @lightGrey;
@@ -61,9 +63,9 @@
    Menu
 --------------------*/
 
-@mainMenuInvertedBackground: @orange;
+@mainMenuInvertedBackground: @teal;
 @mainMenuTutorialBackground: @teal;
-@mainMenuTutorialButtons: @orange;
+@mainMenuTutorialButtons: @teal;
 
 @mainMenuBlocksJsToggleColor: @primaryColor;
 
@@ -81,11 +83,11 @@
    Background
 --------------------*/
 
-@simulatorBackground: @blue;
-@editorToolsBackground: @beige;
-@blocklySvgColor: @beige;
-@homeScreenBackground: @beige;
-@cloudCardBackground: lighten(desaturate(@teal, 56), 23);
+@simulatorBackground: @lightSecondaryColor;
+@editorToolsBackground: @lightSecondaryColor;
+@blocklySvgColor: @lightSecondaryColor;
+@homeScreenBackground: @lightSecondaryColor;
+@cloudCardBackground: darken(@secondaryColor, 20%);
 
 /*-------------------
    Full screen
@@ -98,7 +100,7 @@
    Editor
 --------------------*/
 
-@blocklyToolboxColor: @beige;
+@blocklyToolboxColor: @white;
 @trashIconColor: @primaryColor;
 
 /*-------------------
@@ -138,3 +140,6 @@
 @teachingBubbleBackgroundColor: @teal;
 @teachingBubbleTextColor: @white;
 @teachingBubbleStepsColor: @beige;
+
+@assetUnselected: #ebedef;
+@DebuggerBackgroundPrimaryColor: #117955;
diff --git a/theme/site/views/card.overrides b/theme/site/views/card.overrides
@@ -1,3 +1,7 @@
 /*******************************
     User Variable Overrides
 *******************************/
+
+.ui.card.link.newprojectcard {
+    background: @secondaryColor !important;
+}
diff --git a/theme/style.less b/theme/style.less
@@ -53,15 +53,15 @@
 }
 
 .ui.primary.button.download-button {
-    background-color: @orange;
+    background-color: @secondaryColor;
 }
 
 .simtoolbar .ui.button.icon, #editortools .ui.button.editortools-btn {
-    background-color: @teal;
+    background-color: @secondaryColor;
 }
 
 #editortools .ui.button.hw-button {
-    background-color: darken(desaturate(@orange, 20%), 10%);
+    background-color: darken(@secondaryColor, 15%);
 }
 
 #simulator .ui.button.play-button .icon.play {
@@ -81,6 +81,22 @@
     stroke: @soundEffectHeaderColor;
 }
 
+.carouselarrow {
+    color: @secondaryColor;
+}
+
+.projectsdialog .detailview .ui.grid.stackable .actions .card-action .button.approve {
+    background-color: @primaryColor;
+}
+
+.extensions-browser {
+    .extension-tag.selected {
+        background-color: @primaryColor;
+        border-color: @primaryColor;
+        color: @white
+    }
+}
+
 /* Mobile */
 @media only screen and (max-width: @largestMobileScreen) {
 }