feat: revamp color picker (#23)

* chore: import new color json

* chore: generate css vars

* chore: render text and bg colors using tokens

* feat: implement new color picker

* fix: transfer popover focus

* fix: replicate logic onto background popover

* chore: adjust i18n

* chore: fix selection loss on interaction with popover

* chore: pass getSubscriptions in EditorContext

* chore: default color tooltip

* fix: forward ref in color tile

* fix: editor focus after opening popover

* chore: fix lint

* chore: maintain selection after changing color

* fix: font color for href and inline code

* fix: focus and popover conflicts

* chore: revert unnecessary forceShow

* chore: dummy commit

* fix: don't break cover

Author: richardshiue

package.json

@@ -103,6 +103,7 @@
     "react-beautiful-dnd": "^13.1.1",
     "react-big-calendar": "^1.8.5",
     "react-color": "^2.19.3",
+    "react-colorful": "^5.6.1",
     "react-custom-scrollbars": "^4.2.1",
     "react-custom-scrollbars-2": "^4.5.0",
     "react-datepicker": "^4.23.0",

pnpm-lock.yaml

@@ -48,6 +48,10 @@
       "$type": "color",
       "$value": "#32343f"
     },
+    "870": {
+      "$type": "color",
+      "$value": "#2b2d37"
+    },
     "900": {
       "$type": "color",
       "$value": "#272930"
@@ -428,7 +432,11 @@
       },
       "600": {
         "$type": "color",
-        "$value": "#702828"
+        "$value": "#9e3b3b"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#100505"
       }
     },
     "Papaya": {
@@ -454,7 +462,11 @@
       },
       "600": {
         "$type": "color",
-        "$value": "#6b3215"
+        "$value": "#a54b24"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#33221b"
       }
     },
     "Tangerine": {
@@ -480,7 +492,11 @@
       },
       "600": {
         "$type": "color",
-        "$value": "#613b0a"
+        "$value": "#9a570c"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#44341e"
       }
     },
     "Mango": {
@@ -506,7 +522,11 @@
       },
       "600": {
         "$type": "color",
-        "$value": "#5c4102"
+        "$value": "#906000"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#4f4020"
       }
     },
     "Lemon": {
@@ -532,7 +552,11 @@
       },
       "600": {
         "$type": "color",
-        "$value": "#574800"
+        "$value": "#866800"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#574d1c"
       }
     },
     "Olive": {
@@ -558,7 +582,11 @@
       },
       "600": {
         "$type": "color",
-        "$value": "#4a4c03"
+        "$value": "#627300"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#404207"
       }
     },
     "Lime": {
@@ -584,7 +612,11 @@
       },
       "600": {
         "$type": "color",
-        "$value": "#414d05"
+        "$value": "#637000"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#313908"
       }
     },
     "Grass": {
@@ -610,7 +642,11 @@
       },
       "600": {
         "$type": "color",
-        "$value": "#334d0c"
+        "$value": "#456514"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#273611"
       }
     },
     "Forest": {
@@ -636,7 +672,11 @@
       },
       "600": {
         "$type": "color",
-        "$value": "#1e4f16"
+        "$value": "#2b6c20"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#1a2e17"
       }
     },
     "Jade": {
@@ -662,7 +702,11 @@
       },
       "600": {
         "$type": "color",
-        "$value": "#075231"
+        "$value": "#127b47"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#0f231a"
       }
     },
     "Aqua": {
@@ -688,7 +732,11 @@
       },
       "600": {
         "$type": "color",
-        "$value": "#004e57"
+        "$value": "#00727e"
+      },
+      "700": {
+        "$type": "color",
+        "$value": "#0d1a1c"
       }
     },
     "Azure": {
@@ -714,7 +762,7 @@
       },
       "600": {
         "$type": "color",
-        "$value": "#154469"
+        "$value": "#0c5b9e"
       }
     },
     "Denim": {
@@ -740,7 +788,7 @@
       },
       "600": {
         "$type": "color",
-        "$value": "#223c70"
+        "$value": "#2a51a0"
       }
     },
     "Mauve": {
@@ -766,7 +814,7 @@
       },
       "600": {
         "$type": "color",
-        "$value": "#36366b"
+        "$value": "#4545a6"
       }
     },
     "Lavender": {
@@ -792,7 +840,7 @@
       },
       "600": {
         "$type": "color",
-        "$value": "#462f75"
+        "$value": "#6435a8"
       }
     },
     "Lilac": {
@@ -818,7 +866,7 @@
       },
       "600": {
         "$type": "color",
-        "$value": "#562d6b"
+        "$value": "#772f96"
       }
     },
     "Mallow": {
@@ -844,7 +892,7 @@
       },
       "600": {
         "$type": "color",
-        "$value": "#632861"
+        "$value": "#8a3485"
       }
     },
     "Camellia": {
@@ -896,7 +944,7 @@
       },
       "600": {
         "$type": "color",
-        "$value": "#404040"
+        "$value": "#585858"
       }
     },
     "Iron": {
@@ -922,7 +970,7 @@
       },
       "600": {
         "$type": "color",
-        "$value": "#394152"
+        "$value": "#4c5966"
       }
     }
   },