Merge pull request #404 from coderoad/feature/theme

Feature/theme

Author: ShMcK

src/commands.ts

@@ -28,7 +28,6 @@ export const createCommands = ({ extensionPath, workspaceState }: CreateCommandP
   return {
     // initialize
     [COMMANDS.START]: async () => {
-      console.log('start')
       if (webview && webview.state.loaded) {
         webview.createOrShow()
       } else {

web-app/.storybook/config.ts

@@ -1,5 +1,5 @@
 import { configure } from '@storybook/react'
-import '../src/styles/index.css'
+import '../src/styles/reset.css'
 
 // setup acquireVsCodeApi mock
 // @ts-ignore

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/App.tsx

@@ -3,16 +3,20 @@ import { ConfigProvider } from '@alifd/next'
 import enUS from '@alifd/next/lib/locale/en-us'
 import ErrorBoundary from './components/ErrorBoundary'
 import Workspace from './components/Workspace'
+import { ThemeProvider } from 'emotion-theming'
+import theme from './styles/theme'
 import Routes from './Routes'
 
 const App = () => (
   /* @ts-ignore invalid in enUS locale typings for @alifd/[email protected] https://github.com/alibaba-fusion/next/commit/e3b934b */
   <ConfigProvider locale={enUS}>
-    <ErrorBoundary>
-      <Workspace>
-        <Routes />
-      </Workspace>
-    </ErrorBoundary>
+    <Workspace>
+      <ErrorBoundary>
+        <ThemeProvider theme={theme}>
+          <Routes />
+        </ThemeProvider>
+      </ErrorBoundary>
+    </Workspace>
   </ConfigProvider>
 )
 

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

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

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

@@ -4,22 +4,24 @@ import * as T from 'typings'
 import { css, jsx } from '@emotion/core'
 import Markdown from '../Markdown'
 import Button from '../../components/Button'
+import { Theme } from '../../styles/theme'
 
 const styles = {
-  container: {
+  container: (theme: Theme) => ({
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
     justifyContent: 'center' as 'center',
     alignItems: 'center' as 'center',
-    border: '0.5rem solid #FFBABA',
+    border: `0.5rem solid ${theme['$color-error-2']}`,
     padding: '1rem',
     width: '100%',
+    maxWidth: '100%',
     height: '100%',
-  },
-  content: {
+  }),
+  content: (theme: Theme) => ({
     textAlign: 'center' as 'center',
-    color: 'rgb(40, 40, 40);',
-  },
+    color: theme['$color-text1-3'],
+  }),
   options: {
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',

web-app/src/components/Divider.tsx

@@ -1,5 +1,6 @@
 import MarkdownIt from 'markdown-it'
 import Prism from 'prismjs'
+import { css, jsx, InterpolationWithTheme } from '@emotion/core'
 // @ts-ignore no types for package
 import markdownEmoji from 'markdown-it-emoji'
 import * as React from 'react'

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

@@ -1,23 +1,25 @@
 import * as React from 'react'
 import Icon from '../Icon'
 import { css, jsx } from '@emotion/core'
+import { useTheme } from 'emotion-theming'
+import { Theme } from '../../styles/theme'
 
 const styles = {
-  container: {
-    backgroundColor: '#fff3e0',
+  container: (theme: Theme) => ({
+    backgroundColor: theme['$color-warning-1'],
     padding: '0.5rem',
     animationDuration: '0.3s',
     animationTimingFunction: 'ease-in-out',
-    borderTopLeftRadius: '4px',
-    borderTopRightRadius: '4px',
-    color: 'rgb(51, 51, 51)',
-    fontSize: '0.8rem',
-  },
-  icon: {
-    color: '#ff9300',
-  },
+    borderTopLeftRadius: theme['$corner-1'],
+    borderTopRightRadius: theme['$corner-1'],
+    color: theme['$color-text1-3'],
+    fontSize: theme['$font-size-caption'],
+  }),
+  icon: (theme: Theme) => ({
+    color: theme['$color-warning-3'],
+  }),
   content: {
-    marginLeft: '0.5rem',
+    padding: '0 0.5rem',
   },
 }
 
@@ -38,9 +40,10 @@ const TestMessage = (props: Props) => {
     }
   }, [props.message])
 
+  const theme: Theme = useTheme()
   return visible && props.message ? (
     <div css={styles.container}>
-      <Icon type="warning" style={styles.icon} size="xs" />
+      <Icon type="warning" style={styles.icon(theme)} size="xs" />
       <span css={styles.content}>{props.message}</span>
     </div>
   ) : null