Fix popover on Safari

marcbouchenoire · Dec 22, 2021 · c3b23a0 · c3b23a0 · vercel · Dec 22, 2021
1 parent 807107a
commit c3b23a0
Show file tree

Hide file tree

Showing 3 changed files with 33 additions and 29 deletions.
diff --git a/packages/site/src/components/ColorPickerPopover.tsx b/packages/site/src/components/ColorPickerPopover.tsx
@@ -15,23 +15,34 @@ export const ColorPickerPopover = memo(
         <Trigger asChild>{children}</Trigger>
         <AnimatePresence>
           {open && (
-            <Content asChild forceMount side="top" sideOffset={4}>
-              <motion.div
-                animate="visible"
-                className="color-picker-popover will-change-transform"
-                exit="hidden"
-                initial="hidden"
-                transition={springier}
-                variants={{
-                  hidden: { scale: 0, opacity: 0 },
-                  visible: { scale: 1, opacity: 1 }
-                }}
-              >
-                <HexColorPicker color={color} {...props} />
+            <Content asChild forceMount side="top" sideOffset={8}>
+              <div className="relative text-white dark:text-zinc-800">
+                <motion.div
+                  animate="visible"
+                  className="p-2.5 bg-current rounded-lg color-picker shadow-popover will-change-transform"
+                  exit="hidden"
+                  initial="hidden"
+                  transition={springier}
+                  variants={{
+                    hidden: { scale: 0, opacity: 0 },
+                    visible: { scale: 1, opacity: 1 }
+                  }}
+                >
+                  <HexColorPicker color={color} {...props} />
+                </motion.div>
                 <Arrow asChild>
-                  <svg
+                  <motion.svg
+                    animate="visible"
+                    className="color-picker-arrow will-change-transform"
+                    exit="hidden"
                     height="8"
+                    initial="hidden"
                     role="presentation"
+                    transition={springier}
+                    variants={{
+                      hidden: { scale: 0, opacity: 0 },
+                      visible: { scale: 1, opacity: 1 }
+                    }}
                     viewBox="0 0 46 8"
                     width="46"
                     xmlns="http://www.w3.org/2000/svg"
@@ -40,9 +51,9 @@ export const ColorPickerPopover = memo(
                       d="M21.833 7.411c.148.186.328.335.529.436.2.102.418.154.638.153a1.49 1.49 0 0 0 1.167-.589l2.845-3.614C28.911 1.384 31.654 0 34.538 0H37 9h2.462c2.884 0 5.627 1.384 7.526 3.797l2.845 3.614Z"
                       fill="currentColor"
                     />
-                  </svg>
+                  </motion.svg>
                 </Arrow>
-              </motion.div>
+              </div>
             </Content>
           )}
         </AnimatePresence>

diff --git a/packages/site/src/components/Symbols.tsx b/packages/site/src/components/Symbols.tsx
@@ -365,7 +365,7 @@ export function Symbols(props: ComponentProps<"section">) {
             className="relative w-14 h-9 rounded-md transition cursor-pointer color-picker focusable bg-zinc-100 dark:bg-zinc-750 hover:bg-zinc-150 dark:hover:bg-zinc-700"
           >
             <span
-              className="absolute inset-1.5 rounded-sm bg-zinc-700 dark:bg-zinc-100 color-picker-well"
+              className="absolute inset-1.5 rounded-sm bg-zinc-700 dark:bg-zinc-100 highlight dark:highlight-invert"
               style={{ background: color }}
             />
           </button>

diff --git a/packages/site/src/styles/main.css b/packages/site/src/styles/main.css
@@ -274,24 +274,17 @@ pre[class*="language-"] {
   }
 }
 
-.color-picker-well {
-  @apply highlight dark:highlight-invert;
-}
-
-.color-picker-popover {
-  @apply p-2.5 bg-white rounded-lg shadow-popover dark:bg-zinc-800;
-
-  transform-origin: var(--radix-popover-content-transform-origin);
-
-  svg {
-    @apply text-white dark:text-zinc-800;
+.color-picker {
+  &,
+  .color-picker-arrow {
+    transform-origin: var(--radix-popover-content-transform-origin);
   }
 
+  /* stylelint-disable selector-class-pattern */
   .react-colorful {
     @apply h-40 w-56;
   }
 
-  /* stylelint-disable selector-class-pattern */
   .react-colorful__pointer {
     @apply w-2 h-2 z-20 border-none highlight;