docs: generate random colors in the color-picker every time

lib/components/customization/codes.tsx

@@ -76,7 +76,7 @@ const CustomizationCodes = () => {
           display: flex;
           flex-direction: column;
           flex: 1;
-          margin: 2.5rem auto;
+          margin: 4.5rem auto 2.5rem;
           text-align: center;
         }
         

lib/components/customization/demo.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import Colors from './colors'
-import { useTheme, Button, Text, Code, Spacer, Link, Select, Checkbox } from 'components'
+import { useTheme, Button, Text, Code, Spacer, Link, Select } from 'components'
 
 const Demo: React.FC<React.PropsWithChildren<{}>> = () => {
   const theme = useTheme()
@@ -45,17 +45,12 @@ const Demo: React.FC<React.PropsWithChildren<{}>> = () => {
         <Button auto type="secondary" size="small">Action</Button>
         <Spacer y={.5} />
         <Button>Action</Button>
-        <Spacer y={1} />
-        <Checkbox.Group value={['sydney']}>
-          <Checkbox value="sydney">Sydney</Checkbox>
-          <Checkbox value="beijing">Bei Jing</Checkbox>
-        </Checkbox.Group>
       </div>
       <style jsx>{`
         .demo {
           width: 34%;
           margin-top: calc(${theme.layout.gap} * 2);
-          margin-right: 20px;
+          margin-right: ${theme.layout.gap};
           padding-right: ${theme.layout.gapQuarter};
           position: relative;
           border-right: 1px solid ${theme.palette.border};

lib/components/customization/editor-color-item.tsx

@@ -2,12 +2,32 @@ import React, { useMemo } from 'react'
 import { useTheme, ZeitUIThemesPalette, Popover } from 'components'
 import { ColorResult, TwitterPicker } from 'react-color'
 import { useConfigs } from 'lib/config-context'
+import DefaultTheme from 'components/styles/themes/default'
 
 interface Props {
   value?: string
   keyName: keyof ZeitUIThemesPalette
 }
 
+const getRandomColor = () => {
+  const hex = `00000${(Math.random() * 0x1000000 << 0).toString(16)}`
+  return `#${hex.substr(-6)}`
+}
+
+const getRandomColors = () => {
+  const kyes = Object.keys(DefaultTheme.palette) as Array<keyof ZeitUIThemesPalette>
+  const basicColors = new Array(5).fill('')
+    .map(() => {
+      const index = Math.round(Math.random() * (kyes.length)) + kyes.length
+      return DefaultTheme.palette[kyes[index]]
+    })
+  const deduplicatedColors = [...new Set(...basicColors)]
+  const randomColors = new Array(10 - deduplicatedColors.length)
+    .fill('')
+    .map(() => getRandomColor())
+  return deduplicatedColors.concat(randomColors)
+}
+
 const EditorColorItem: React.FC<React.PropsWithChildren<Props>> = ({
   keyName,
 }) => {
@@ -15,6 +35,7 @@ const EditorColorItem: React.FC<React.PropsWithChildren<Props>> = ({
   const { updateCustomTheme } = useConfigs()
   const label = `${keyName}`
   const mainColor = useMemo(() => theme.palette[keyName], [theme.palette, keyName])
+  const randomColors = useMemo(() => getRandomColors(), [])
   const colorChangeHandler = ({ hex }: ColorResult) => {
     updateCustomTheme({
       palette: { [keyName]: hex }
@@ -22,7 +43,9 @@ const EditorColorItem: React.FC<React.PropsWithChildren<Props>> = ({
   }
   
   const popoverContent = (color: string) => (
-    <TwitterPicker triangle="hide" color={color} onChangeComplete={colorChangeHandler} />
+    <TwitterPicker triangle="hide" color={color}
+      onChangeComplete={colorChangeHandler}
+      colors={randomColors} />
   )
   return (
     <Popover content={() => popoverContent(mainColor)} portalClassName="editor-popover" offset={3}>

lib/components/customization/editor-input-item.tsx

@@ -35,7 +35,7 @@ const EditorInputItem: React.FC<React.PropsWithChildren<Props>> = ({
         .editor-item {
           background-color: transparent;
           width: auto;
-          padding: 0 ${theme.layout.gapHalf};
+          padding: 0;
           line-height: 2rem;
           display: inline-flex;
           align-items: center;

lib/components/customization/editor.tsx

@@ -68,6 +68,7 @@ const Editor = () => {
       </div>
   
       <Text h3>Layout <Button type="abort" auto size="mini" onClick={resetLayout}>Reset</Button></Text>
+      <p>Most layout spacing depends on these variables, unreasonable changes may cause layout imbalance.</p>
       <p className="subtitle">basic</p>
       <div className="content">
         {pageLayout.map((item, index) => (
@@ -88,6 +89,7 @@ const Editor = () => {
           flex-wrap: wrap;
           width: auto;
           margin: 0 auto;
+          padding-left: ${theme.layout.gapQuarter};
         }
         
         .editor :global(h3) {

lib/components/customization/layout.tsx

@@ -12,9 +12,7 @@ const CustomizationLayout: React.FC<React.PropsWithChildren<{}>> = ({
     <div className="layout">
       <Row>
         <Demo />
-        <div className="content">
-          {children}
-        </div>
+        <div className="content">{children}</div>
       </Row>
       <Row>
         <CustomizationCodes />
@@ -35,10 +33,6 @@ const CustomizationLayout: React.FC<React.PropsWithChildren<{}>> = ({
           flex: 1;
           overflow: hidden;
         }
-        
-        .demo {
-        
-        }
       `}</style>
     </div>
   )