Embeds: Add light theme (codesandbox#3015)

* get split pane to work in embed

* add a cute little toggle

* snap to edges

* get default size from props

* handle toggle position for different vertical views

* get full height back

* add transition for resize toggle

* breaking things to test on mobile

* bring back the toggle

* header buttons work again

* hide resizer on mobile

* only offset height if header is visible

* handle 50% and pane container

* add transition to snap

* add sidebar toggle to header

* handle screen resize

* vertical panes only

* remove header for mobile

* refactor and simplify code

* Move the heart button to preview

* refactor actions + add refresh

* add button to open in new window

* get the right icons

* fade transition

* get animation right for navigation actions

* add border on all sides for preview

* Add types for new props

* i dont know what to tell you fam

* increase tap width for resizer

* increase snap radius for the right side

* add threshold for showing navigation icons on smaller screens

* (has bugs) add click functionality for resizer

* rename width to newSize

* add opacity for border

* update icons for navigation

* move global actions inside splitpane

* position open sandbox lower for editor

* fold when like overlaps + isDragging transition

* first stab at intro animation

* animation intensifies

* i think thats good

* introduce on load for mobile

* fix the animation timeline

* fix opacity for animation

* variables good good

* use window.outerWidth because that doesnt lie

* dont wait for mouseover on mobile

* oh noes, outerWidth is also a lie

* solve preview size problems

* rename embed theme to dark

* start new theme

* move theme provider to App

* introduce getTheme

* add harcoded variant

* read theme from url

* refactor sidebar elements to system

* sidebar info on theme

* systemetise file tree

* panel + content container

* cheeseburget

* fix the height of tabs and navigator

* remove icons from tabs in embed

* theming wip

* style preview components

* fix embed background

* decide top offset for preview based on navigation flag

* add theme drop down to share sheet

* more night own less custom

* punctuations

Author: siddharthkp

packages/app/src/app/pages/common/Modals/ShareModal/getCode.js

@@ -8,16 +8,16 @@ import {
 } from '@codesandbox/common/lib/utils/url-generator';
 import { escapeHtml } from 'app/utils/escape';
 
-export const BUTTON_URL = `${
-  process.env.CODESANDBOX_HOST
-}/static/img/play-codesandbox.svg`;
+export const BUTTON_URL = `${process.env.CODESANDBOX_HOST}/static/img/play-codesandbox.svg`;
 
 export const VIEW_OPTIONS = ['Editor + Preview', 'Preview', 'Editor'];
+export const THEME_OPTIONS = ['Dark', 'Light'];
 
 const getOptionsUrl = (sandbox, mainModule, state) => {
   const {
     defaultModule,
     view,
+    theme,
     testsView,
     autoResize,
     hideNavigation,
@@ -31,6 +31,7 @@ const getOptionsUrl = (sandbox, mainModule, state) => {
 
   const options = {
     view: view !== VIEW_OPTIONS[0] ? view.toLowerCase() : null,
+    theme: theme !== THEME_OPTIONS[0] ? theme.toLowerCase() : null,
     previewwindow: testsView ? 'tests' : null,
     autoresize: autoResize ? 1 : null,
     hidenavigation: hideNavigation ? 1 : null,

packages/app/src/app/pages/common/Modals/ShareModal/index.js

@@ -22,6 +22,7 @@ import {
 import {
   BUTTON_URL,
   VIEW_OPTIONS,
+  THEME_OPTIONS,
   getIframeScript,
   getEditorUrl,
   getEmbedUrl,
@@ -32,6 +33,7 @@ import {
 class ShareView extends React.Component {
   state = {
     view: VIEW_OPTIONS[0],
+    theme: 'dark',
     testsView: false,
     defaultModule: null,
     autoResize: false,
@@ -108,6 +110,10 @@ class ShareView extends React.Component {
     this.setState({ view });
   };
 
+  setTheme = (theme: string) => {
+    this.setState({ theme });
+  };
+
   select = function select(event) {
     event.target.select();
   };
@@ -122,6 +128,7 @@ class ShareView extends React.Component {
 
     const {
       view,
+      theme,
       testsView,
       autoResize,
       hideNavigation,
@@ -156,6 +163,13 @@ class ShareView extends React.Component {
                   value={view}
                   setValue={this.setView}
                 />
+                <PaddedPreference
+                  title="Theme"
+                  type="dropdown"
+                  options={THEME_OPTIONS}
+                  value={theme}
+                  setValue={this.setTheme}
+                />
                 <PaddedPreference
                   title="Auto resize"
                   type="boolean"

packages/app/src/embed/components/App/elements.js

@@ -1,19 +1,29 @@
 // @flow
 import styled from 'styled-components';
+import css from '@styled-system/css';
 
-export const Container = styled.div`
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100vw;
-  color: white;
-`;
+export const Container = styled.div(
+  css({
+    display: 'flex',
+    flexDirection: 'column',
+    height: '100%',
+    width: '100vw',
+  })
+);
 
-export const Fullscreen = styled.div`
-  width: 100vw;
-  height: 100%;
-  overflow: hidden;
-`;
+export const Fullscreen = styled.div(
+  css({
+    width: '100vw',
+    height: '100vh',
+    overflow: 'hidden',
+    backgroundColor: 'editor.background',
+    color: 'editor.foreground',
+    h1: {
+      // override common element which has hard coded color
+      color: 'editor.foreground',
+    },
+  })
+);
 
 export const Moving = styled.div`
   transition: 0.3s ease all;

packages/app/src/embed/components/App/index.js

@@ -17,6 +17,7 @@ import Content from '../Content';
 import Sidebar from '../Sidebar';
 import { Container, Fullscreen, Moving } from './elements';
 import { SIDEBAR_SHOW_SCREEN_SIZE } from '../../util/constants';
+import { getTheme } from '../../theme';
 
 // Okay, this looks veeeery strange, we need this because Webpack has a bug currently
 // that makes it think we havecore-js/es6/map available in embed, but we don't.
@@ -46,6 +47,7 @@ type State = {
   verticalMode: boolean,
   highlightedLines: Array<number>,
   tabs?: Array<number>,
+  theme: string,
 };
 
 const isSafari = () => {
@@ -88,6 +90,7 @@ export default class App extends React.PureComponent<
       runOnClick,
       verticalMode = window.innerWidth < window.innerHeight,
       tabs,
+      theme = 'dark',
     } = props.embedOptions || getSandboxOptions(document.location.href);
 
     this.state = {
@@ -109,6 +112,7 @@ export default class App extends React.PureComponent<
       forceRefresh,
       expandDevTools,
       tabs,
+      theme,
       runOnClick:
         runOnClick === false
           ? false
@@ -395,20 +399,23 @@ export default class App extends React.PureComponent<
 
   render() {
     const { sandbox } = this.state;
+    const theme = getTheme(this.state.theme);
 
     return (
-      <Fullscreen sidebarOpen={this.state.sidebarOpen}>
-        {sandbox && (
-          <>
-            <Sidebar
-              setCurrentModule={this.setCurrentModule}
-              currentModule={this.getCurrentModuleFromPath(sandbox).id}
-              sandbox={sandbox}
-            />
-          </>
-        )}
-        <Moving sidebarOpen={this.state.sidebarOpen}>{this.content()}</Moving>
-      </Fullscreen>
+      <ThemeProvider theme={theme}>
+        <Fullscreen sidebarOpen={this.state.sidebarOpen}>
+          {sandbox && (
+            <>
+              <Sidebar
+                setCurrentModule={this.setCurrentModule}
+                currentModule={this.getCurrentModuleFromPath(sandbox).id}
+                sandbox={sandbox}
+              />
+            </>
+          )}
+          <Moving sidebarOpen={this.state.sidebarOpen}>{this.content()}</Moving>
+        </Fullscreen>
+      </ThemeProvider>
     );
   }
 }

packages/app/src/embed/components/Content/elements.ts

@@ -1,40 +1,53 @@
 import styled from 'styled-components';
+import css from '@styled-system/css';
+import { Container as NavigatorContainer } from '@codesandbox/common/lib/components/Preview/Navigator/elements';
 
-export const Container = styled.div`
-  display: flex;
-  position: relative;
-  background-color: ${props => props.theme['editor.background']};
-  height: 100%;
-`;
+export const Container = styled.div(
+  css({
+    display: 'flex',
+    position: 'relative',
+    backgroundColor: 'editor.background',
+    height: '100%',
 
-export const Tabs = styled.div`
-  display: flex;
-  height: 33px;
-  min-height: 33px;
-  background-color: ${props => props.theme['tab.inactiveBackground']};
-  /* shadow instead of border to align with the border of the child tab */
-  box-shadow: inset 0px -1px 0 ${props => props.theme['sideBar.border']};
-  overflow-x: auto;
-  font-size: 0.875rem;
+    // overwrite the height of navigation
+    [NavigatorContainer]: {
+      height: 31,
+      minHeight: 31,
+    },
+  })
+);
 
-  -ms-overflow-style: none; // IE 10+
-  overflow: -moz-scrollbars-none; // Firefox
+export const Tabs = styled.div(
+  css({
+    display: 'flex',
+    height: 32,
+    minHeight: 32,
+    backgroundColor: 'tab.inactiveBackground',
+    /* shadow instead of border to align with the border of the child tab */
+    boxShadow: theme => 'inset 0px -1px 0 ' + theme['sideBar.border'],
+    overflowX: 'auto',
+    fontSize: 3,
 
-  &::-webkit-scrollbar {
-    height: 2px; // Safari and Chrome
-  }
+    '-ms-overflow-style': 'none', // IE 10+
+    overflow: '-moz-scrollbars-none', // Firefox
+    '&::-webkit-scrollbar': {
+      height: '2px', // Safari and Chrome
+    },
 
-  /* override children, bad but vscode doesnt support
-     tab.hoverForeground :shrug:
-  */
-  > div:hover > div {
-    color: white !important;
-  }
-`;
+    /* override children, bad but vscode doesnt support
+       tab.hoverForeground so we explicitly set it :shrug:
+    */
+    '> div:hover > div': {
+      color: 'tab.hoverForeground',
+    },
+  })
+);
 
-export const MenuInTabs = styled.span`
-  display: inline-flex;
-  height: 100%;
-  align-items: center;
-  padding-left: 8px;
-`;
+export const MenuInTabs = styled.span(
+  css({
+    display: 'inline-flex',
+    alignItems: 'center',
+    height: '100%',
+    paddingLeft: 2,
+  })
+);

packages/app/src/embed/components/Content/index.tsx

@@ -13,9 +13,6 @@ import { CorrectionClearAction } from 'codesandbox-api/dist/types/actions/correc
 import { CodeEditor } from 'app/components/CodeEditor';
 import { Editor } from 'app/components/CodeEditor/types'; // eslint-disable-line
 import Tab from 'app/pages/Sandbox/Editor/Content/Tabs/Tab';
-import EntryIcons from 'app/pages/Sandbox/Editor/Workspace/Files/DirectoryEntry/Entry/EntryIcons';
-// eslint-disable-next-line import/extensions
-import getType from 'app/utils/get-type.ts';
 
 import getTemplate from '@codesandbox/common/lib/templates';
 import { parseSandboxConfigurations } from '@codesandbox/common/lib/templates/configuration/parse-sandbox-configurations';
@@ -534,7 +531,6 @@ export default class Content extends React.PureComponent<Props, State> {
                     {({ hovering, closeTab }) => (
                       // TODO deduplicate this
                       <>
-                        <EntryIcons type={getType(module.title)} />
                         <TabTitle>{module.title}</TabTitle>
                         {dirName && (
                           <TabDir>

packages/app/src/embed/components/Sidebar/FileTree/elements.js

@@ -8,10 +8,10 @@ export const FileContainer = styled.div(props =>
     fontSize: 3,
     lineHeight: '24px',
     paddingLeft: theme.space[3] * (props.depth + 1),
-    backgroundColor: props.isSelected ? 'grays.500' : 'transparent',
+    backgroundColor: props.isSelected ? 'sideBar.border' : 'transparent',
     ':hover': {
       cursor: 'pointer',
-      backgroundColor: 'grays.500',
+      backgroundColor: 'sideBar.border',
     },
   }))
 );

packages/app/src/embed/components/Sidebar/SandboxInfo/elements.ts

@@ -21,7 +21,7 @@ export const Title = styled.h2(
 export const Description = styled.div(
   css({
     fontSize: 2,
-    color: 'grays.300',
+    color: 'sideBar.foreground',
     marginBottom: 4,
   })
 );

packages/app/src/embed/components/Sidebar/elements.js

@@ -1,19 +1,21 @@
-// @flow
 import styled from 'styled-components';
+import css from '@styled-system/css';
 import { isIOS } from '@codesandbox/common/lib/utils/platform';
 
-export const Container = styled.div`
-  flex: 250px;
-  width: 250px;
+export const Container = styled.div(
+  css({
+    flex: 250,
+    width: 250,
 
-  color: white;
-  z-index: 10;
-  background-color: ${props => props.theme['sideBar.background']};
-  overflow: auto;
-  font-family: Inter, sans-serif;
+    color: 'sideBar.foreground',
+    zIndex: 10,
+    backgroundColor: 'sideBar.background',
+    overflow: 'auto',
+    fontFamily: 'Inter, sans-serif',
 
-  /* There is a bug with ios that causes the sidebar to be longer than the preview, when you then
-   * scroll the preview it scrolls the editor down (page is longer). If I set this to 100% scrolling
-   * is broken in Chrome though. That's why we have this check */
-  height: ${isIOS ? '100%' : '100vh'};
-`;
+    /* There is a bug with ios that causes the sidebar to be longer than the preview, when you then
+     * scroll the preview it scrolls the editor down (page is longer). If I set this to 100% scrolling
+     * is broken in Chrome though. That's why we have this check */
+    height: isIOS ? '100%' : '100vh',
+  })
+);

packages/app/src/embed/components/legacy/Header/elements.js

@@ -111,7 +111,7 @@ export const Button = styled.button(
 
 export const MenuIcon = styled(MenuIconSVG)(
   css({
-    color: 'grays.400',
+    color: 'tab.activeForeground',
     marginRight: 2,
     cursor: 'pointer',
     zIndex: 10,