Terminal: convert object to dot notation (codesandbox#3582)

Author: siddharthkp

packages/app/src/app/components/Preview/DevTools/Terminal/Shell/Term.tsx

@@ -5,7 +5,10 @@ import * as fit from 'xterm/lib/addons/fit/fit';
 
 import ResizeObserver from 'resize-observer-polyfill';
 
-import getTerminalTheme, { VSTheme } from '../terminal-theme';
+import getTerminalTheme, {
+  VSTheme,
+  flattenTerminalTheme,
+} from '../terminal-theme';
 import { TerminalWithFit } from '../types';
 
 type Props = {
@@ -23,9 +26,14 @@ export class TerminalComponentNoTheme extends React.PureComponent<Props> {
   observer: ResizeObserver;
 
   startTerminal = () => {
+    let theme = this.props.theme;
+    // @ts-ignore ignore because it shouldnt exist :)
+    if (this.props.theme.vscodeTheme.colors.terminal) {
+      theme = flattenTerminalTheme(theme);
+    }
     // @ts-ignore
     this.term = new Terminal({
-      theme: getTerminalTheme(this.props.theme),
+      theme: getTerminalTheme(theme),
       fontFamily: 'Source Code Pro',
       fontWeight: 'normal',
       fontWeightBold: 'bold',

packages/app/src/app/components/Preview/DevTools/Terminal/terminal-theme.ts

@@ -1,4 +1,5 @@
 import { ITheme } from 'xterm';
+import dot from 'dot-object';
 
 export type VSTheme = {
   background2: () => void;
@@ -56,3 +57,11 @@ export default function getTerminalTheme(theme: VSTheme): ITheme {
     cursorAccent: theme.vscodeTheme.colors['terminalCursor.background'],
   };
 }
+
+export const flattenTerminalTheme = theme => ({
+  ...theme,
+  vscodeTheme: {
+    ...theme.vscodeTheme,
+    colors: dot.dot(theme.vscodeTheme.colors),
+  },
+});

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],