docs(colors): optimize colors page

lib/components/displays/colors-data.ts

@@ -20,28 +20,44 @@ const normal: ColorEnum = {
 /* eslint-enable camelcase */
 
 const error: ColorEnum = {
+  errorLighter: 'Lighter',
   errorLight: 'Light',
   error: 'Default',
   errorDark: 'Dark',
 }
 
 const success: ColorEnum = {
+  successLighter: 'Lighter',
   successLight: 'Light',
   success: 'Default',
   successDark: 'Dark',
 }
 
 const warning: ColorEnum = {
+  warningLighter: 'Lighter',
   warningLight: 'Light',
   warning: 'Default',
   warningDark: 'Dark',
 }
 
+const violet: ColorEnum = {
+  violetLighter: 'Lighter',
+  violetLight: 'Light',
+  violet: 'Default',
+  violetDark: 'Dark',
+}
+
+const cyan: ColorEnum = {
+  cyanLighter: 'Lighter',
+  cyanLight: 'Light',
+  cyan: 'Default',
+  cyanDark: 'Dark',
+}
+
 const highlight: ColorEnum = {
   alert: 'Alert',
   purple: 'Purple',
-  violet: 'Violet',
-  cyan: 'Cyan',
+  magenta: 'Violet',
 }
 
 const colorsData: { [key: string]: ColorEnum } = {
@@ -49,6 +65,8 @@ const colorsData: { [key: string]: ColorEnum } = {
   success,
   warning,
   error,
+  violet,
+  cyan,
   highlight,
 }
 
@@ -72,5 +90,15 @@ export const getCurrentColor = (
     return 'black'
   }
 
+  if (type === 'warning' || type === 'cyan') {
+    if (index < 3) return 'black'
+    return 'white'
+  }
+
+  if (Object.keys(colorsData[type]).find(key => key.endsWith('Lighter'))) {
+    if (index === 0) return 'black'
+    return 'white'
+  }
+
   return palette.background
 }

lib/components/displays/colors.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo } from 'react'
-import { useTheme, useToasts, Code, ZeitUIThemesPalette } from 'components'
+import { useTheme, useToasts, Code, Grid, ZeitUIThemesPalette } from 'components'
 import useClipboard from 'components/utils/use-clipboard'
 import { getColorData, getCurrentColor } from './colors-data'
 
@@ -14,13 +14,21 @@ const getColorItem = (type: string, palette: ZeitUIThemesPalette, copy: Function
 
   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>
+      <Grid.Container justify="space-between" style={{ height: '4.5rem' }}>
+        <Grid.Container alignItems="center" sm={8} xs={16}>
+          <h4>{data[key]}</h4>
+        </Grid.Container>
+        <Grid.Container alignItems="center" justify="center" sm={8} xs={0}>
+          <span className="usage" onClick={() => copy(`theme.palette.${key}`)}>
+            theme.palette.{key}
+          </span>
+        </Grid.Container>
+        <Grid.Container alignItems="center" justify="flex-end" sm={8} xs>
+          <span className="value" onClick={() => copy(palette[key])}>
+            {palette[key]}
+          </span>
+        </Grid.Container>
+      </Grid.Container>
       <style jsx>{`
         .color {
           background-color: ${palette[key]};
@@ -61,13 +69,8 @@ const Colors: React.FC<Props> = ({ type }) => {
         }
 
         .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;
         }
 
@@ -86,18 +89,16 @@ const Colors: React.FC<Props> = ({ type }) => {
         }
 
         .colors :global(.usage) {
-          font-size: 0.875rem;
-          position: absolute;
-          left: 50%;
-          top: 50%;
-          transform: translate(-50%, -50%);
+          font-size: 1rem;
           padding: 1rem;
+          cursor: pointer;
         }
 
         .colors :global(.value) {
           font-size: 0.875rem;
           text-transform: uppercase;
-          padding: 1rem 0;
+          padding: 1rem;
+          cursor: pointer;
         }
       `}</style>
     </div>

pages/en-us/guide/colors.mdx

@@ -38,27 +38,43 @@ const myComponent = () => {
 <Colors type="normal" />
 <Spacer y={3} />
 
-### Status
+### STATUS
 
 Use different colors to express more emotional changes.
 
-#### Success
+### Success
 
+<Spacer y={.75} />
 <Colors type="success" />
 <Spacer y={3} />
 
-#### Error
+### Error
 
+<Spacer y={.75} />
 <Colors type="error" />
 <Spacer y={3} />
 
-#### Warning
+### Warning
 
+<Spacer y={.75} />
 <Colors type="warning" />
 <Spacer y={3} />
 
-#### Highlight
+### Cyan
 
+<Spacer y={.75} />
+<Colors type="cyan" />
+<Spacer y={3} />
+
+### Violet
+
+<Spacer y={.75} />
+<Colors type="violet" />
+<Spacer y={3} />
+
+### Highlight
+
+<Spacer y={.75} />
 <Colors type="highlight" />
 <Spacer y={3} />