docs: add color cards

lib/components/displays/colors-data.ts

@@ -0,0 +1,70 @@
+import { ZeitUIThemesPalette } from 'components/styles/themes'
+
+export type ColorEnum = {
+  [key in keyof ZeitUIThemesPalette]?: string
+}
+
+const normal: ColorEnum = {
+  background: 'Background',
+  accents_1: 'Accent 1',
+  accents_2: 'Accent 2',
+  accents_3: 'Accent 3',
+  accents_4: 'Accent 4',
+  accents_5: 'Accent 5',
+  accents_6: 'Accent 6',
+  accents_7: 'Accent 7',
+  accents_8: 'Accent 8',
+  foreground: 'Foreground',
+}
+
+const error: ColorEnum = {
+  errorLight: 'Light',
+  error: 'Default',
+  errorDark: 'Dark',
+}
+
+const success: ColorEnum = {
+  successLight: 'Light',
+  success: 'Default',
+  successDark: 'Dark',
+}
+
+const warning: ColorEnum = {
+  warningLight: 'Light',
+  warning: 'Default',
+  warningDark: 'Dark',
+}
+
+const highlight: ColorEnum = {
+  alert: 'Alert',
+  purple: 'Purple',
+  violet: 'Violet',
+  cyan: 'Cyan',
+}
+
+const colorsData: { [key: string]: ColorEnum } = {
+  normal,
+  success,
+  warning,
+  error,
+  highlight,
+}
+
+export const getColorData = (type: string): ColorEnum => {
+  const data = colorsData[type]
+  return data || colorsData.normal as ColorEnum
+}
+
+export const getCurrentColor = (palette: ZeitUIThemesPalette, type: string, index: number): string => {
+  if (type === 'normal') {
+    if (index >= 5) return palette.background
+    return palette.foreground
+  }
+  
+  if (type === 'highlight') {
+    if (index < 3) return palette.background
+    return palette.foreground
+  }
+  
+  return palette.background
+}

lib/components/displays/colors.tsx

@@ -0,0 +1,98 @@
+import React, { useMemo } from 'react'
+import { useTheme, useToasts, Code, ZeitUIThemesPalette } from 'components'
+import { useClipboard } from 'use-clipboard-copy'
+import { getColorData, getCurrentColor } from './colors-data'
+
+interface Props {
+  type: string
+}
+
+const getColorItem = (type: string, palette: ZeitUIThemesPalette, copy: Function) => {
+  const data = getColorData(type)
+  const getColor = (index: number) => getCurrentColor(palette, type, index)
+  const keys = Object.keys(data)
+  
+  return (keys as Array<keyof ZeitUIThemesPalette>).map((key, index) => (
+    <div className="color" key={`color-item-${index}`}>
+      <h4>{data[key]}</h4>
+      <span className="usage"
+        onClick={() => copy(`theme.palette.${key}`)}>theme.palette.{key}</span>
+      <span className="value"
+        onClick={() => copy(palette[key])}>{palette[key]}</span>
+      <style jsx>{`
+        .color {
+          background-color: ${palette[key]};
+          color: ${getColor(index)};
+        }
+      `}</style>
+    </div>
+  ))
+}
+
+const Colors: React.FC<Props> = ({
+  type,
+}) => {
+  const theme = useTheme()
+  const { copy } = useClipboard()
+  const [, setToast] = useToasts()
+  const copyText = (text: string) => {
+    copy(text)
+    setToast(({ text: <span>Copied <Code>{text}</Code></span> }))
+  }
+  const colorItems = useMemo(() => getColorItem(type, theme.palette, copyText), [])
+  
+  return (
+    <div className="colors">
+      {colorItems}
+      <style jsx>{`
+        .colors {
+          display: flex;
+          flex-direction: column;
+          width: 100%;
+        }
+        
+        .colors :global(.color) {
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: ${theme.layout.gap};
+          height: 6rem;
+          position: relative;
+          cursor: pointer;
+          user-select: none;
+        }
+        
+        .colors :global(.color:first-child) {
+          border-top-left-radius: ${theme.layout.radius};
+          border-top-right-radius: ${theme.layout.radius};
+        }
+        
+        .colors :global(.color:last-child) {
+          border-bottom-left-radius: ${theme.layout.radius};
+          border-bottom-right-radius: ${theme.layout.radius};
+        }
+        
+        .colors :global(.color h4) {
+          margin: 0;
+        }
+        
+        .colors :global(.usage) {
+          font-size: .875rem;
+          position: absolute;
+          left: 50%;
+          top: 50%;
+          transform: translate(-50%, -50%);
+          padding: 1rem;
+        }
+        
+        .colors :global(.value) {
+          font-size: .875rem;
+          text-transform: uppercase;
+          padding: 1rem 0;
+        }
+      `}</style>
+    </div>
+  )
+}
+
+export default Colors

pages/docs/customization/colors.mdx

@@ -0,0 +1,65 @@
+import Layout from 'lib/components/layout'
+import { Note, Code, Spacer, Link, Display } from 'components'
+import NextLink from 'next/link'
+import Colors from 'lib/components/displays/colors'
+
+export const meta = {
+  title: 'Colors',
+  description: 'description',
+}
+
+## Colors
+
+Default colors for themes.
+
+<Spacer y={2} />
+
+### PRIMARY
+
+You can use any color in any where. All colors change with the theme,
+want to customize some colors? please read <NextLink href="/docs/customization/themes"><a>here</a></NextLink>.
+
+<Display width="90%" caption={<span>Get palette from <Code>useTheme</Code>.</span>}>
+
+```jsx
+import { useTheme } from '@zeit-ui/react'
+
+const myComponent = () => {
+  const { palette } = useTheme()
+
+  return (
+    <p style={{ color: palette.accents_1 }}>myComponent</p>
+  )
+}
+```
+
+</Display>
+<Spacer y={1} />
+<Colors type="normal" />
+<Spacer y={3} />
+
+### Status
+
+Use different colors to express more emotional changes.
+
+#### Success
+
+<Colors type="success" />
+<Spacer y={3} />
+
+#### Error
+
+<Colors type="error" />
+<Spacer y={3} />
+
+#### Warning
+
+<Colors type="warning" />
+<Spacer y={3} />
+
+#### Highlight
+
+<Colors type="highlight" />
+<Spacer y={3} />
+
+export default ({ children }) => <Layout meta={meta}>{children}</Layout>

pages/docs/customization/themes.mdx

@@ -6,13 +6,13 @@ export const meta = {
   description: 'description',
 }
 
-# Themes
+## Themes
 
 `@zeit-ui/react` support **Dark Mode** now. You can switch theme at any time through a very simple API, no third-party styles or configs.
 
 <Spacer y={2} />
 
-## Switch themes
+### Switch themes
 
 <Note>Before using any Components, you must add <Code>ZEITUIProvider</Code> to the root node.</Note>
 <Spacer y={0.5} />
@@ -47,7 +47,7 @@ const App = () => (
 
 <Spacer y={3} />
 
-## Customizing theme
+### Customizing theme
 
 Customize theme is very simple in `@zeit-ui/react`, you just need to provide a new theme `Object`, and all the components will change automatically.
 
@@ -75,7 +75,7 @@ const App = () => (
 
 <Spacer y={3} />
 
-## Customizing components
+### Customizing components
 
 #### Overriding styles with `className`