add color palette generation frontend (beta)

components/BackgroundSelect.js

@@ -23,7 +23,16 @@ class BackgroundSelect extends React.PureComponent {
   handlePickColor = ({ rgb }) => this.props.onChange({ backgroundColor: stringifyRGBA(rgb) })
 
   render() {
-    const { color, mode, image, onChange, isVisible, toggleVisibility, carbonRef } = this.props
+    const {
+      color,
+      mode,
+      image,
+      onChange,
+      isVisible,
+      toggleVisibility,
+      carbonRef,
+      updateHighlights
+    } = this.props
 
     const background = validateColor(color) ? color : DEFAULT_BG_COLOR
 
@@ -70,7 +79,12 @@ class BackgroundSelect extends React.PureComponent {
               <ColorPicker color={color} onChange={this.handlePickColor} />
             </div>
             <div hidden={mode !== 'image'}>
-              <ImagePicker onChange={onChange} imageDataURL={image} aspectRatio={aspectRatio} />
+              <ImagePicker
+                onChange={onChange}
+                imageDataURL={image}
+                aspectRatio={aspectRatio}
+                updateHighlights={updateHighlights}
+              />
             </div>
           </div>
         </Popout>

components/Editor.js

@@ -377,6 +377,7 @@ class Editor extends React.Component {
           />
           <BackgroundSelect
             onChange={this.updateBackground}
+            updateHighlights={this.updateHighlights}
             mode={backgroundMode}
             color={backgroundColor}
             image={backgroundImage}

components/ImagePicker.js

@@ -1,9 +1,11 @@
 import React from 'react'
 import ReactCrop, { makeAspectCrop } from 'react-image-crop'
+import { useLocalStorage } from '@dawnlabs/tacklebox'
 
 import RandomImage from './RandomImage'
 import PhotoCredit from './PhotoCredit'
 import Input from './Input'
+import Toggle from './Toggle'
 import { Link } from './Meta'
 import { fileToDataURL } from '../lib/util'
 import ApiContext from './ApiContext'
@@ -140,10 +142,37 @@ export default class ImagePicker extends React.Component {
     return this.handleImageChange(dataURL, dataURL)
   }
 
-  async selectImage(url, { photographer } = {}) {
+  async selectImage(image) {
     // TODO use React suspense for loading this asset
-    const { dataURL } = await this.context.downloadThumbnailImage({ url })
-    return this.handleImageChange(url, dataURL, photographer)
+    const { dataURL } = await this.context.downloadThumbnailImage(image)
+
+    this.handleImageChange(image.url, dataURL, image.photographer)
+    if (image.palette && image.palette.length && this.generateColorPalette) {
+      /*
+       * Background is first, which is either the lightest or darkest color
+       * and the rest are sorted by highest contrast w/ the background
+       */
+      const palette = image.palette.map(c => c.hex)
+      /*
+       * Contributors, please feel free to adjust this algorithm to create the most
+       * readible or aesthetically pleasing syntax highlighting.
+       */
+      this.props.updateHighlights({
+        background: palette[0],
+        text: palette[1],
+        variable: palette[2],
+        attribute: palette[3],
+        definition: palette[4],
+        keyword: palette[5],
+        property: palette[6],
+        string: palette[7],
+        number: palette[8],
+        operator: palette[9],
+        meta: palette[10],
+        tag: palette[11],
+        comment: palette[12]
+      })
+    }
   }
 
   removeImage() {
@@ -192,6 +221,7 @@ export default class ImagePicker extends React.Component {
             Or use a random <a href="https://unsplash.com/">Unsplash</a> image:
           </span>
           <RandomImage onChange={this.selectImage} />
+          <GeneratePaletteSetting onChange={value => (this.generateColorPalette = value)} />
         </div>
         <style jsx>
           {`
@@ -333,3 +363,17 @@ export default class ImagePicker extends React.Component {
     )
   }
 }
+
+function GeneratePaletteSetting({ onChange }) {
+  const [enabled, setEnabled] = useLocalStorage('CARBON_GENERATE_COLOR_PALETTE')
+  React.useEffect(() => void onChange(enabled), [enabled, onChange])
+
+  return (
+    <Toggle
+      label="Generate color palette (beta)"
+      enabled={enabled}
+      onChange={setEnabled}
+      padding="8px 0 0"
+    />
+  )
+}

components/RandomImage.js

@@ -13,7 +13,7 @@ function RandomImage(props) {
   const [selectImage, { loading: selecting }] = useAsyncCallback(() => {
     const image = cacheRef.current[cacheIndex]
 
-    return api.unsplash.download(image.id).then(url => props.onChange(url, image))
+    return api.unsplash.download(image.id).then(data => props.onChange({ ...image, ...data }))
   })
 
   const [updateCache, { loading: updating, error, data: imgs }] = useAsyncCallback(

components/Settings.js

@@ -111,7 +111,7 @@ const WindowSettings = React.memo(
             }
 
             .settings-content :global(.settings-row:focus-within) {
-              outline: -webkit-focus-ring-color auto 5px;
+              outline: -webkit-focus-ring-color auto 4px;
             }
 
             .first-line-number-row {

components/Toggle.js

@@ -10,7 +10,16 @@ class Toggle extends React.PureComponent {
 
   toggle = () => this.props.onChange(!this.props.enabled)
 
+  handleKeydown = e => {
+    if (e.key === 'Enter') this.toggle()
+    if (e.key === ' ') {
+      e.preventDefault()
+      this.toggle()
+    }
+  }
+
   render() {
+    // TODO use input[type=["checkbox"] /> instead of div
     return (
       <div
         role="checkbox"
@@ -18,8 +27,9 @@ class Toggle extends React.PureComponent {
         className={`toggle ${this.props.className}`}
         onClick={this.toggle}
         aria-checked={this.props.enabled}
+        onKeyDown={this.handleKeydown}
       >
-        <span className="label">{this.props.label}</span>
+        <label className="label">{this.props.label}</label>
         {this.props.enabled ? <Checkmark /> : <div className="checkmark-disabled" />}
         <style jsx>
           {`
@@ -29,7 +39,16 @@ class Toggle extends React.PureComponent {
               justify-content: ${this.props.center ? 'center' : 'space-between'};
               cursor: pointer;
               user-select: none;
-              padding: 8px 12px 8px 8px;
+              padding: ${this.props.padding || '8px 12px 8px 8px'};
+            }
+
+            .toggle {
+              outline: none;
+            }
+
+            .toggle:focus-within :global(svg),
+            .toggle:focus-within .checkmark-disabled {
+              outline: 4px auto -webkit-focus-ring-color;
             }
 
             .checkmark-disabled {

lib/api.js

@@ -65,7 +65,7 @@ const downloadThumbnailImage = img => {
 
 const unsplash = {
   download(id) {
-    return client.get(`/unsplash/download/${id}`).then(res => res.data.url)
+    return client.get(`/unsplash/download/${id}`).then(res => res.data)
   },
   async random() {
     const imageUrls = await client.get('/unsplash/random')