update bg theme & alt body layout to 6:4

softmarshmallow · softmarshmallow · commit 3d1e9eb07bb4 · 2021-12-15T01:01:53.000+09:00
diff --git a/editor/components/canvas/controller-zoom-control.tsx b/editor/components/canvas/controller-zoom-control.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "@emotion/styled";
 import RefreshSharpIcon from "@material-ui/icons/RefreshSharp";
+import { colors } from "theme";
 
 export function ZoomControl({
   scale,
@@ -87,8 +88,8 @@ const Controls = styled.div`
   box-sizing: border-box;
   border-radius: 4px;
   padding: 4px;
-  background-color: #252526;
-  box-shadow: #25252650 0px 0px 0px 16px inset;
+  background-color: ${colors.color_editor_bg_on_dark};
+  box-shadow: ${colors.color_editor_bg_on_dark} 0px 0px 0px 16px inset;
 `;
 
 const ControlsContainer = styled.div`
diff --git a/editor/components/editor/editor-appbar/editor-appbar-fragment-for-canvas.tsx b/editor/components/editor/editor-appbar/editor-appbar-fragment-for-canvas.tsx
@@ -1,6 +1,7 @@
 import React from "react";
 import styled from "@emotion/styled";
 import { useEditorState } from "core/states";
+import { colors } from "theme";
 
 export function AppbarFragmentForCanvas() {
   const [state] = useEditorState();
@@ -19,7 +20,7 @@ const RootWrapperAppbarFragmentForCanvas = styled.div`
   align-items: center;
   gap: 10px;
   align-self: stretch;
-  background-color: rgba(37, 37, 38, 1);
+  background-color: ${colors.color_editor_bg_on_dark};
   box-sizing: border-box;
   padding: 10px 24px;
 `;
diff --git a/editor/components/editor/editor-appbar/editor-appbar-fragment-for-code-editor.tsx b/editor/components/editor/editor-appbar/editor-appbar-fragment-for-code-editor.tsx
@@ -34,7 +34,6 @@ const RootWrapperAppbarFragmentForCodeEditor = styled.div`
   flex: 1;
   gap: 10px;
   align-self: stretch;
-  background-color: rgba(30, 30, 30, 1);
   box-sizing: border-box;
   padding-bottom: 14px;
   padding-top: 14px;
diff --git a/editor/components/editor/editor-appbar/editor-appbar-fragment-for-sidebar.tsx b/editor/components/editor/editor-appbar/editor-appbar-fragment-for-sidebar.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import styled from "@emotion/styled";
 import { ArrowBack } from "@material-ui/icons";
 import { useRouter } from "next/router";
+import { colors } from "theme";
 
 export function AppbarFragmentForSidebar() {
   const router = useRouter();
@@ -35,7 +36,7 @@ const RootWrapperAppbarFragmentForSidebar = styled.div`
   gap: 10px;
   width: 200px;
   align-self: stretch;
-  background-color: rgba(37, 37, 38, 1);
+  background-color: ${colors.color_editor_bg_on_dark};
   box-sizing: border-box;
   padding: 14px 16px;
 `;
diff --git a/editor/components/home/cards/base-home-scene-card.tsx b/editor/components/home/cards/base-home-scene-card.tsx
@@ -1,5 +1,6 @@
 import React from "react";
 import styled from "@emotion/styled";
+import { colors } from "theme";
 
 export function BaseHomeSceneCard({
   label,
@@ -45,7 +46,7 @@ const RootWrapperBaseHomeSceneCard = styled.div`
   gap: 10px;
   border: solid 1px rgba(72, 72, 72, 1);
   border-radius: 2px;
-  background-color: rgba(37, 37, 38, 1);
+  background-color: ${colors.color_editor_bg_on_dark};
   box-sizing: border-box;
 
   :hover {
diff --git a/editor/layouts/panel/workspace-content-panel.tsx b/editor/layouts/panel/workspace-content-panel.tsx
@@ -9,14 +9,17 @@ import React from "react";
 export function WorkspaceContentPanel({
   children,
   disableBorder = true,
+  flex = 1,
   backgroundColor = "none",
 }: {
   backgroundColor?: string;
   children: JSX.Element;
   disableBorder?: boolean;
+  flex?: number;
 }) {
   return (
     <WorkspaceCPanel
+      flex={flex}
       backgroundColor={backgroundColor}
       disableBorder={disableBorder}
     >
@@ -26,13 +29,14 @@ export function WorkspaceContentPanel({
 }
 
 const WorkspaceCPanel = styled.div<{
+  flex?: number;
   backgroundColor: string;
   disableBorder: boolean;
 }>`
   border: ${(p) => (p.disableBorder ? "none" : "solid #d2d2d2")};
   background-color: ${(p) => p.backgroundColor};
   border-width: 1px;
   align-self: stretch;
-  flex: 1;
+  flex: ${(p) => p.flex};
   overflow: auto;
 `;
diff --git a/editor/pages/_app.tsx b/editor/pages/_app.tsx
@@ -2,13 +2,14 @@ import React from "react";
 import { Global, css } from "@emotion/react";
 import Head from "next/head";
 import { EditorThemeProvider } from "@editor-ui/theme";
+import { colors } from "theme";
 
 function GlobalCss() {
   return (
     <Global
       styles={css`
         html {
-          background-color: #252526;
+          background-color: ${colors.color_editor_bg_on_dark};
           touch-action: none;
         }
 
@@ -58,7 +59,7 @@ function HeadInjection() {
       />
       <meta
         name="theme-color"
-        content="#1e1e1e"
+        content={colors.color_editor_bg_on_dark}
         media="(prefers-color-scheme: dark)"
       />
 
diff --git a/editor/pages/components/index.tsx b/editor/pages/components/index.tsx
@@ -8,6 +8,7 @@ import {
   HomeSidebar,
 } from "components/home";
 import { WorkspaceRepository } from "repository";
+import { colors } from "theme";
 
 export default function ComponentsPage() {
   const repository = new WorkspaceRepository();
@@ -21,7 +22,7 @@ export default function ComponentsPage() {
   return (
     <>
       <DefaultEditorWorkspaceLayout
-        backgroundColor={"rgba(37, 37, 38, 1)"}
+        backgroundColor={colors.color_editor_bg_on_dark}
         leftbar={<HomeSidebar />}
       >
         <div style={{ padding: 80 }}>
diff --git a/editor/pages/embed/vscode/grida-explorer-preview/index.tsx b/editor/pages/embed/vscode/grida-explorer-preview/index.tsx
@@ -3,6 +3,7 @@ import styled from "@emotion/styled";
 import { useRouter } from "next/router";
 import VanillaPreview from "@code-editor/vanilla-preview";
 import { ProgressBar } from "@modulz/design-system";
+import { colors } from "theme";
 
 export default function VSCodeEmbedGridaExplorerPreview() {
   const router = useRouter(); // use router only for loading initial params.
@@ -86,7 +87,7 @@ const EmptyStateContainer = styled.div`
   align-items: center;
   flex: none;
   gap: 10px;
-  background-color: rgba(37, 37, 38, 1);
+  background-color: ${colors.color_editor_bg_on_dark};
   box-sizing: border-box;
 `;
 
diff --git a/editor/pages/files/index.tsx b/editor/pages/files/index.tsx
@@ -8,6 +8,7 @@ import {
 } from "components/home";
 import { WorkspaceRepository } from "repository";
 import { FileResponseRecord } from "store/fimga-file-store/figma-file-store";
+import { colors } from "theme";
 
 export default function FilesPage() {
   const repository = new WorkspaceRepository();
@@ -19,7 +20,7 @@ export default function FilesPage() {
   return (
     <>
       <DefaultEditorWorkspaceLayout
-        backgroundColor={"rgba(37, 37, 38, 1)"}
+        backgroundColor={colors.color_editor_bg_on_dark}
         leftbar={<HomeSidebar />}
       >
         <div style={{ padding: 80 }}>
diff --git a/editor/pages/integrations/index.tsx b/editor/pages/integrations/index.tsx
@@ -3,12 +3,13 @@ import styled from "@emotion/styled";
 import { DefaultEditorWorkspaceLayout } from "layouts/default-editor-workspace-layout";
 import { HomeHeading, HomeSidebar } from "components/home";
 import Link from "next/link";
+import { colors } from "theme";
 
 export default function IntegrationsPage() {
   return (
     <>
       <DefaultEditorWorkspaceLayout
-        backgroundColor={"rgba(37, 37, 38, 1)"}
+        backgroundColor={colors.color_editor_bg_on_dark}
         leftbar={<HomeSidebar />}
       >
         <div style={{ padding: 80 }}>
diff --git a/editor/repository/workspace-repository/index.ts b/editor/repository/workspace-repository/index.ts
@@ -45,7 +45,7 @@ export class WorkspaceRepository {
         lastUsed: new Date("2021-01-01"),
       },
     ];
-    return Array.from(Array(20).keys()).map((i) => dummy(i));
+    return Array.from(Array(0).keys()).map((i) => dummy(i));
   }
   async getRecentComponents() {
     const dummy = (id) => ({
diff --git a/editor/scaffolds/canvas/canvas.tsx b/editor/scaffolds/canvas/canvas.tsx
@@ -72,6 +72,6 @@ const EditorCanvasSkeleton = () => {
 const CanvasContainer = styled.div`
   display: flex;
   flex-direction: column;
-  max-width: calc((100vw - 200px) / 2); // TODO: make this dynamic
+  max-width: calc((100vw - 200px) * 0.6); // TODO: make this dynamic
   height: 100%;
 `;
diff --git a/editor/scaffolds/editor/editor.tsx b/editor/scaffolds/editor/editor.tsx
@@ -32,6 +32,7 @@ import {
 import { vanilla_presets } from "@grida/builder-config-preset";
 import { EditorSkeleton } from "./skeleton";
 import { MonacoEmptyMock } from "components/code-editor/monaco-mock-empty";
+import { colors } from "theme";
 
 export function Editor() {
   const router = useRouter();
@@ -186,11 +187,11 @@ export function Editor() {
         <EditorSkeleton percent={_initial_load_progress + 0.2} />
       )}
       <DefaultEditorWorkspaceLayout
-        backgroundColor={"rgba(37, 37, 38, 1)"}
+        backgroundColor={colors.color_editor_bg_on_dark}
         leftbar={<EditorSidebar />}
       >
         <WorkspaceContentPanelGridLayout>
-          <WorkspaceContentPanel>
+          <WorkspaceContentPanel flex={6}>
             <Canvas
               preview={preview}
               fileid={state?.design?.key}
@@ -201,7 +202,7 @@ export function Editor() {
               }}
             />
           </WorkspaceContentPanel>
-          <WorkspaceContentPanel backgroundColor={"rgba(30, 30, 30, 1)"}>
+          <WorkspaceContentPanel flex={4}>
             <CodeEditorContainer>
               {/* <EditorAppbarFragments.CodeEditor /> */}
               <CodeOptionsControl
diff --git a/editor/scaffolds/editor/skeleton.tsx b/editor/scaffolds/editor/skeleton.tsx
diff --git a/editor/scaffolds/home-dashboard/home-dashboard.tsx b/editor/scaffolds/home-dashboard/home-dashboard.tsx
diff --git a/editor/scaffolds/home-input/index.tsx b/editor/scaffolds/home-input/index.tsx
diff --git a/editor/store/fimga-file-store/figma-file-store.ts b/editor/store/fimga-file-store/figma-file-store.ts
diff --git a/editor/theme/colors.ts b/editor/theme/colors.ts
diff --git a/editor/theme/index.ts b/editor/theme/index.ts
