Fix bug in polyfill + change terminal color (codesandbox#3579)

Author: siddharthkp

packages/common/src/themes/codesandbox-black.js

@@ -250,7 +250,7 @@ const colors = {
     unfocusedInactiveForeground: tokens.grays[400],
   },
   terminal: {
-    background: tokens.grays[900],
+    background: tokens.grays[700],
     foreground: tokens.white,
     ansiBrightBlack: tokens.blues[700],
     ansiBrightRed: tokens.reds[500],

packages/components/src/utils/polyfill-theme.ts

@@ -40,8 +40,11 @@ const polyfillTheme = vsCodeTheme => {
 
   const type = vsCodeTheme.type || guessType(vsCodeTheme);
 
+  // Step 0: Clone theme to make sure we don't modify the source
+  const clonedVsCodeTheme = deepmerge({ colors: {} }, vsCodeTheme.colors || {});
+
   //  Step 1: Initialise with vscode theme
-  const vsCodeColors = dot.object(vsCodeTheme.colors || {});
+  const vsCodeColors = dot.object(clonedVsCodeTheme.colors);
   uiColors = deepmerge(uiColors, vsCodeColors);
 
   // Step 2: Fill missing values from existing values or codesandbox dark/light
@@ -162,6 +165,7 @@ const polyfillTheme = vsCodeTheme => {
       selectedForeground: uiColors.sideBar.foreground,
       inactiveForeground: mutedForeground,
       hoverBackground: uiColors.sideBar.border,
+      border: uiColors.sideBar.border,
     },
     avatar: { border: uiColors.sideBar.border },
     sideBar: { hoverBackground: uiColors.sideBar.border },