From b9b363730018210f9145970a7754127781b4aa67 Mon Sep 17 00:00:00 2001
From: Gao Sun <gao@silverhand.io>
Date: Thu, 3 Mar 2022 15:15:33 +0800
Subject: [PATCH] feat(console): theme (#311)

* feat(console): theme

* feat(console): use css var for font
---
 packages/console/src/App.module.scss          | 20 ++----------------
 packages/console/src/App.tsx                  |  5 +++--
 .../components/AppContent/index.module.scss   | 21 +++++++++++++++++++
 .../src/components/AppContent/index.tsx       | 17 +++++++++++++++
 .../Sidebar/components/Item/index.module.scss |  2 +-
 .../src/components/Topbar/index.module.scss   |  2 +-
 packages/console/src/scss/_underscore.scss    |  7 -------
 packages/console/src/scss/normalized.scss     |  2 +-
 8 files changed, 46 insertions(+), 30 deletions(-)
 create mode 100644 packages/console/src/components/AppContent/index.module.scss
 create mode 100644 packages/console/src/components/AppContent/index.tsx

diff --git a/packages/console/src/App.module.scss b/packages/console/src/App.module.scss
index 7460084c1..178b925f6 100644
--- a/packages/console/src/App.module.scss
+++ b/packages/console/src/App.module.scss
@@ -1,20 +1,4 @@
-.app {
-
-  // TO-DO: move to theme component
-  --color-on-surface-variant: #47464e;
-  --color-primary: #4f37f9;
-  --color-primary-90: #e5dfff;
-  --color-component-text: #191c1d;
-  position: absolute;
-  left: 0;
-  top: 0;
-  bottom: 0;
-  right: 0;
+.content {
+  flex-grow: 1;
   display: flex;
-  flex-direction: column;
-
-  .content {
-    flex-grow: 1;
-    display: flex;
-  }
 }
diff --git a/packages/console/src/App.tsx b/packages/console/src/App.tsx
index 7d5bb189d..1e3534f8a 100644
--- a/packages/console/src/App.tsx
+++ b/packages/console/src/App.tsx
@@ -3,6 +3,7 @@ import { BrowserRouter, useLocation, useNavigate } from 'react-router-dom';
 
 import './scss/normalized.scss';
 import * as styles from './App.module.scss';
+import AppContent from './components/AppContent';
 import Content from './components/Content';
 import Sidebar, { getPath, sections } from './components/Sidebar';
 import Topbar from './components/Topbar';
@@ -21,13 +22,13 @@ const Main = () => {
   }, [location.pathname, navigate]);
 
   return (
-    <div className={styles.app}>
+    <AppContent theme="light">
       <Topbar />
       <div className={styles.content}>
         <Sidebar />
         <Content />
       </div>
-    </div>
+    </AppContent>
   );
 };
 
diff --git a/packages/console/src/components/AppContent/index.module.scss b/packages/console/src/components/AppContent/index.module.scss
new file mode 100644
index 000000000..4d543f70e
--- /dev/null
+++ b/packages/console/src/components/AppContent/index.module.scss
@@ -0,0 +1,21 @@
+.app {
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.light {
+  --color-on-surface-variant: #47464e;
+  --color-primary: #4f37f9;
+  --color-primary-90: #e5dfff;
+}
+
+$font-family: 'SF UI Text', 'SF Pro Display', sans-serif;
+
+.web {
+  --font-title-medium: 500 16px/24px #{$font-family};
+}
diff --git a/packages/console/src/components/AppContent/index.tsx b/packages/console/src/components/AppContent/index.tsx
new file mode 100644
index 000000000..ba24055e8
--- /dev/null
+++ b/packages/console/src/components/AppContent/index.tsx
@@ -0,0 +1,17 @@
+import classNames from 'classnames';
+import React, { ReactNode } from 'react';
+
+import * as styles from './index.module.scss';
+
+type Theme = 'light';
+
+type Props = {
+  children: ReactNode;
+  theme: Theme;
+};
+
+const AppContent = ({ children, theme }: Props) => {
+  return <div className={classNames(styles.app, styles.web, styles[theme])}>{children}</div>;
+};
+
+export default AppContent;
diff --git a/packages/console/src/components/Sidebar/components/Item/index.module.scss b/packages/console/src/components/Sidebar/components/Item/index.module.scss
index 50c25b8b4..950f0a115 100644
--- a/packages/console/src/components/Sidebar/components/Item/index.module.scss
+++ b/packages/console/src/components/Sidebar/components/Item/index.module.scss
@@ -34,6 +34,6 @@
   }
 
   .title {
-    @include _.title-medium;
+    font: var(--font-title-medium);
   }
 }
diff --git a/packages/console/src/components/Topbar/index.module.scss b/packages/console/src/components/Topbar/index.module.scss
index 3909180df..2fa394790 100644
--- a/packages/console/src/components/Topbar/index.module.scss
+++ b/packages/console/src/components/Topbar/index.module.scss
@@ -20,7 +20,7 @@
   }
 
   .text {
-    @include _.title-medium;
+    font: var(--font-title-medium);
     color: var(--color-component-text);
   }
 }
diff --git a/packages/console/src/scss/_underscore.scss b/packages/console/src/scss/_underscore.scss
index ebe027b99..8f5c5b957 100644
--- a/packages/console/src/scss/_underscore.scss
+++ b/packages/console/src/scss/_underscore.scss
@@ -8,10 +8,3 @@
   align-items: center;
   justify-content: center;
 }
-
-
-@mixin title-medium {
-  font-weight: 500;
-  font-size: 16px;
-  line-height: 24px;
-}
diff --git a/packages/console/src/scss/normalized.scss b/packages/console/src/scss/normalized.scss
index 2a3fe0785..d79cd5f84 100644
--- a/packages/console/src/scss/normalized.scss
+++ b/packages/console/src/scss/normalized.scss
@@ -1,7 +1,7 @@
 body {
   margin: 0;
   padding: 0;
-  font-family: 'SF UI Text', 'SF Pro Display', sans-serif;
+  font-family: sans-serif;
   background: rgb(#e5e1ec, 50%);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: auto;