feat(theme): ✨ Improve color picker

apps/builder/components/theme/GeneralSettings/ColorPicker.tsx

@@ -10,8 +10,11 @@ import {
   SimpleGrid,
   Input,
   Button,
+  Stack,
+  ButtonProps,
 } from '@chakra-ui/react'
 import React, { ChangeEvent, useEffect, useState } from 'react'
+import tinyColor from 'tinycolor2'
 
 const colorsSelection: `#${string}`[] = [
   '#264653',
@@ -48,7 +51,9 @@ export const ColorPicker = ({ initialColor, onColorChange }: Props) => {
       <PopoverTrigger>
         <Button
           aria-label={'Pick a color'}
-          background={color}
+          bgColor={color}
+          _hover={{ bgColor: `#${tinyColor(color).darken(10).toHex()}` }}
+          _active={{ bgColor: `#${tinyColor(color).darken(30).toHex()}` }}
           height="22px"
           width="22px"
           padding={0}
@@ -64,11 +69,11 @@ export const ColorPicker = ({ initialColor, onColorChange }: Props) => {
           backgroundColor={color}
           borderTopLeftRadius={5}
           borderTopRightRadius={5}
-          color={color === '#ffffff' ? 'gray.800' : 'white'}
+          color={tinyColor(color).isLight() ? 'gray.800' : 'white'}
         >
           <Center height="100%">{color}</Center>
         </PopoverHeader>
-        <PopoverBody height="120px">
+        <PopoverBody as={Stack}>
           <SimpleGrid columns={5} spacing={2}>
             {colorsSelection.map((c) => (
               <Button
@@ -94,8 +99,39 @@ export const ColorPicker = ({ initialColor, onColorChange }: Props) => {
             value={color}
             onChange={handleColorChange}
           />
+          <NativeColorPicker
+            size="sm"
+            color={color}
+            onColorChange={handleColorChange}
+          >
+            Advanced picker
+          </NativeColorPicker>
         </PopoverBody>
       </PopoverContent>
     </Popover>
   )
 }
+
+const NativeColorPicker = ({
+  color,
+  onColorChange,
+  ...props
+}: {
+  color: string
+  onColorChange: (e: ChangeEvent<HTMLInputElement>) => void
+} & ButtonProps) => {
+  return (
+    <>
+      <Button as="label" htmlFor="native-picker" {...props}>
+        {props.children}
+      </Button>
+      <Input
+        type="color"
+        display="none"
+        id="native-picker"
+        value={color}
+        onChange={onColorChange}
+      />
+    </>
+  )
+}

apps/builder/package.json

@@ -77,6 +77,7 @@
     "styled-components": "^5.3.5",
     "svg-round-corners": "^0.3.0",
     "swr": "^1.2.2",
+    "tinycolor2": "^1.4.2",
     "typebot-js": "*",
     "use-debounce": "^7.0.1",
     "utils": "*"
@@ -96,11 +97,12 @@
     "@types/prettier": "^2.4.4",
     "@types/react": "^17.0.43",
     "@types/react-table": "^7.7.10",
+    "@types/tinycolor2": "^1.4.3",
     "@typescript-eslint/eslint-plugin": "^5.17.0",
     "dotenv": "^16.0.0",
     "eslint": "<8.0.0",
     "eslint-config-next": "12.1.4",
-    "typescript": "^4.6.3",
-    "msw": "^0.39.2"
+    "msw": "^0.39.2",
+    "typescript": "^4.6.3"
   }
 }

yarn.lock

@@ -4780,6 +4780,11 @@
   resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c"
   integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==
 
+"@types/tinycolor2@^1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@types/tinycolor2/-/tinycolor2-1.4.3.tgz#ed4a0901f954b126e6a914b4839c77462d56e706"
+  integrity sha512-Kf1w9NE5HEgGxCRyIcRXR/ZYtDv0V8FVPtYHwLxl0O+maGX0erE77pQlD0gpP+/KByMZ87mOA79SjifhSB3PjQ==
+
 "@types/unist@*", "@types/unist@^2.0.0", "@types/unist@^2.0.2", "@types/unist@^2.0.3":
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/@types/unist/-/unist-2.0.6.tgz#250a7b16c3b91f672a24552ec64678eeb1d3a08d"
@@ -14879,6 +14884,11 @@ tiny-warning@^1.0.0, tiny-warning@^1.0.3:
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
 
+tinycolor2@^1.4.2:
+  version "1.4.2"
+  resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.2.tgz#3f6a4d1071ad07676d7fa472e1fac40a719d8803"
+  integrity sha512-vJhccZPs965sV/L2sU4oRQVAos0pQXwsvTLkWYdqJ+a8Q5kPFzJTuOFwy7UniPli44NKQGAglksjvOcpo95aZA==
+
 tippy.js@^6.3.1:
   version "6.3.7"
   resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-6.3.7.tgz#8ccfb651d642010ed9a32ff29b0e9e19c5b8c61c"