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