A few image editor fixes but I'm leaving most of the image editor as …

…a todo for v1, since it's kind of dark themed even in current arcade. I think we should make it match the theme, but doing so will mean a significant change in existing appearance.
microsoft · Feb 14, 2025 · db59066 · db59066
1 parent 63b2f10
commit db59066
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 9 deletions.
diff --git a/docfiles/themes/arcade-dark.json b/docfiles/themes/arcade-dark.json
@@ -2,7 +2,9 @@
     "id": "arcade-dark",
     "name": "Arcade Dark",
     "monacoBaseTheme": "vs-dark",
-    "overrideFiles": [],
+    "overrideFiles": [
+        "/docfiles/themes/overrides/arcade-dark-overrides.css"
+    ],
     "colors": {
         "pxt-target-background1": "#1b1a19",
         "pxt-target-foreground1": "#f3f2f1",

diff --git a/docfiles/themes/overrides/arcade-dark-overrides.css b/docfiles/themes/overrides/arcade-dark-overrides.css
@@ -0,0 +1,4 @@
+.image-editor-change-name .image-editor-input {
+    /* The textbox background matches the footer of the image editor, so add a border */
+    border: 1px solid var(--pxt-neutral-stencil2);
+}
diff --git a/theme/image-editor/bottomBar.less b/theme/image-editor/bottomBar.less
@@ -64,8 +64,8 @@
 }
 
 .image-editor-change-name .image-editor-input {
-    background: #ffffff;
-    color: var(--input-text-color);
+    background: var(--pxt-neutral-background2);
+    color: var(--pxt-neutral-foreground2);
     border-bottom: none;
 
     margin: 0;
@@ -120,4 +120,4 @@
     .image-editor:not(.hide-done-button) .image-editor-change-name {
         display: none;
     }
-}
+}
diff --git a/theme/image-editor/imageEditor.less b/theme/image-editor/imageEditor.less
@@ -13,6 +13,7 @@
 @import 'alert';
 
 :root {
+    // TODO : Integrate with theme
     --editor-bg-color: #1e1e1e;
 
     --sidebar-bg-color: #252526;
@@ -303,20 +304,20 @@
     display: flex;
     align-items: center;
     padding: 0 2rem;
-    background-color: @green;
-    color: @white;
+    background-color: var(--pxt-colors-green-background);
+    color: var(--pxt-colors-green-foreground);
     cursor: pointer;
     user-select: none;
     margin: 0;
     border-radius: 0;
 }
 
 .common-button.image-editor-confirm:hover {
-    background-color: darken(@green, 5%);
+    background-color: var(--pxt-colors-green-background-hover);
 }
 
 .common-button.image-editor-confirm:active {
-    background-color: darken(@green, 10%);
+    background-color: var(--pxt-colors-green-background-hover);
 }
 
 .image-editor.editing-tile {
@@ -418,4 +419,4 @@
     .filter-title {
         font-size: 1.5rem;
     }
-}
+}