Merge pull request #57 from unix/themes

docs(themes): show all types of theme definitions

lib/components/displays/colors-data.ts

@@ -64,8 +64,8 @@ export const getCurrentColor = (palette: ZeitUIThemesPalette, type: string, inde
   }
   
   if (type === 'highlight') {
-    if (index < 3) return palette.background
-    return palette.foreground
+    if (index < 3) return 'white'
+    return 'black'
   }
   
   return palette.background

lib/components/displays/colors.tsx

@@ -39,7 +39,10 @@ const Colors: React.FC<Props> = ({
     copy(text)
     setToast(({ text: <span>Copied <Code>{text}</Code></span> }))
   }
-  const colorItems = useMemo(() => getColorItem(type, theme.palette, copyText), [])
+  const colorItems = useMemo(
+    () => getColorItem(type, theme.palette, copyText),
+    [type, theme.palette],
+  )
   
   return (
     <div className="colors">

pages/en-us/customization/themes.mdx

@@ -1,5 +1,5 @@
 import Layout from 'lib/components/layout'
-import { Note, Code, Spacer } from 'components'
+import { Note, Code, Spacer, Link } from 'components'
 
 export const meta = {
   title: 'Themes',
@@ -72,6 +72,29 @@ const App = () => (
 )
 ```
 
+<Spacer y={3} />
+
+### View all types of Theme definitions
+
+If you are using TypeScript, you can import various preset types:
+
+```ts
+import {
+  ZeitUIThemes,
+  ZeitUIThemesFont,
+  ZeitUIThemesPalette,
+  ZeitUIThemesExpressiveness,
+  ZeitUIThemesLayout,
+} from '@zeit-ui/react'
+
+// usage:
+const myStyles: ZeitUIThemes = { /* ... */ }
+const myPalette: Partial<ZeitUIThemesPalette> = { /* ... */ }
+```
+
+If you don't use TypeScript, to learn more about preset types, see <Link color target="_blank" pure href="https://github.com/zeit-ui/react/blob/master/components/styles/themes/index.ts">here</Link>.
+
+
 <Spacer y={3} />
 
 ### Customizing components

pages/zh-cn/customization/themes.mdx

@@ -1,5 +1,5 @@
 import Layout from 'lib/components/layout'
-import { Note, Code, Spacer } from 'components'
+import { Note, Code, Spacer, Link } from 'components'
 
 export const meta = {
   title: '主题',
@@ -74,6 +74,28 @@ const App = () => (
 
 <Spacer y={3} />
 
+### 查看主题定义的所有类型
+
+如果你正在使用 TypeScript，可以选择引入各类预置的类型：
+
+```ts
+import {
+  ZeitUIThemes,
+  ZeitUIThemesFont,
+  ZeitUIThemesPalette,
+  ZeitUIThemesExpressiveness,
+  ZeitUIThemesLayout,
+} from '@zeit-ui/react'
+
+// 使用示例
+const myStyles: ZeitUIThemes = { /* ... */ }
+const myPalette: Partial<ZeitUIThemesPalette> = { /* ... */ }
+```
+
+如果你没有使用 TypeScript，想要了解更多的预置类型，请看<Link color target="_blank" pure href="https://github.com/zeit-ui/react/blob/master/components/styles/themes/index.ts">这里的类型声明文件</Link>。
+
+<Spacer y={3} />
+
 ### 定制化组件
 
 #### 通过 `className` 重写样式