feat(console): theme (#311)

* feat(console): theme

* feat(console): use css var for font

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;
-  }
 }

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>
   );
 };
 

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};
+}

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;

packages/console/src/components/Sidebar/components/Item/index.module.scss

@@ -34,6 +34,6 @@
   }
 
   .title {
-    @include _.title-medium;
+    font: var(--font-title-medium);
   }
 }

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);
   }
 }

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;
-}

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;