setup theme

Signed-off-by: shmck <[email protected]>

web-app/package.json

@@ -26,7 +26,6 @@
   },
   "dependencies": {
     "@alifd/next": "^1.20.20",
-    "@alifd/theme-4": "^0.3.1",
     "@emotion/babel-preset-css-prop": "^10.0.27",
     "@emotion/core": "^10.0.28",
     "babel-jest": "^26.1.0",

web-app/src/components/BetaBadge/index.tsx

@@ -1,20 +1,22 @@
 import * as React from 'react'
+import { useTheme } from 'emotion-theming'
 import { Badge } from '@alifd/next'
 
 const styles = {
-  betaBadge: {
-    backgroundColor: '#6a67ce',
-    color: '#FFFFFF',
-  },
+  betaBadge: (theme: any) => ({
+    backgroundColor: theme['$color-brand1-9'], // '#6a67ce',
+    color: theme['$color-white'],
+  }),
 }
 
 type Props = {
   children: React.ReactElement | string
 }
 
 const BetaBadge = ({ children }: Props) => {
+  const theme = useTheme()
   return (
-    <Badge content="beta" style={styles.betaBadge}>
+    <Badge content="beta" style={styles.betaBadge(theme)}>
       {children}&nbsp;&nbsp;
     </Badge>
   )

web-app/src/styles/index.css

@@ -1,5 +1,4 @@
 @import '~@alifd/next/dist/next.min.css';
-/* @import '~@alifd/theme-4/dist/next.css'; */
 @import './font.css';
 
 html {