darken tooltip styles; clean-up media popover

src/index.css

@@ -11,6 +11,13 @@
     --muted: 210 40% 96.1%;
     --muted-foreground: 215.4 16.3% 46.9%;
 
+    /* NOTE: Separated tooltip from popover, where dropdown, popover, and tooltip all shared before
+     * This was to avoid bikeshedding once I changed the tooltip color to black, but proibably this is 
+     * worth tying back together once I can dedicate more time to just these styles
+     */
+    --tooltip: 222.2 84% 4.9%;
+    --tooltip-foreground: 0 0% 100%;
+
     --popover: 0 0% 100%;
     --popover-foreground: 222.2 84% 4.9%;
 
@@ -44,6 +51,9 @@
     --muted: 217.2 32.6% 17.5%;
     --muted-foreground: 215 20.2% 65.1%;
 
+    --tooltip: 222.2 84% 4.9%;
+    --tooltip-foreground: 210 40% 98%;
+
     --popover: 222.2 84% 4.9%;
     --popover-foreground: 210 40% 98%;
 

src/views/edit/editor/components/Input.tsx

@@ -11,7 +11,7 @@ export const inputVariants = cva(
         ghost: "border-none focus-visible:ring-transparent",
       },
       h: {
-        sm: "h-9 px-2 py-1",
+        sm: "h-9 px-1",
         md: "h-10 px-3 py-2",
       },
     },

src/views/edit/editor/components/Tooltip.tsx

@@ -11,7 +11,7 @@ export const TooltipContent = withCn(
   withProps(TooltipPrimitive.Content, {
     sideOffset: 4,
   }),
-  "z-50 overflow-hidden rounded-md border bg-popover px-3 py-1.5 text-sm text-popover-foreground shadow-md",
+  "z-50 overflow-hidden py-0.5 px-1.5 rounded-sm border bg-popover text-sm text-tooltip-foreground bg-tooltip shadow-md",
 );
 
 // Added along with @radix-ui/react-tooltip to support the Plate Toolbar

src/views/edit/editor/elements/MediaPopover.tsx

@@ -58,13 +58,13 @@ export function MediaPopover({ pluginKey, children }: MediaPopoverProps) {
       <PopoverAnchor>{children}</PopoverAnchor>
 
       <PopoverContent
-        className="w-auto p-1"
+        className="w-auto"
         onOpenAutoFocus={(e) => e.preventDefault()}
       >
         {isEditing ? (
           <div className="flex w-[330px] flex-col">
-            <div className="flex items-center">
-              <div className="flex items-center pl-3 text-muted-foreground">
+            <div className="flex items-center px-2">
+              <div className="flex items-center text-muted-foreground px-1">
                 <Icons.link className="h-4 w-4" />
               </div>
 
@@ -78,14 +78,15 @@ export function MediaPopover({ pluginKey, children }: MediaPopoverProps) {
             </div>
           </div>
         ) : (
-          <div className="box-content flex h-9 items-center gap-1">
+          <div className="box-content flex items-center">
             <FloatingMediaPrimitive.EditButton
               className={buttonVariants({ variant: "ghost", size: "sm" })}
             >
               Edit link
             </FloatingMediaPrimitive.EditButton>
 
-            <Separator orientation="vertical" className="my-1" />
+            {/* Ah, I broke this (invisible). Fix it at some point */}
+            <Separator orientation="vertical" />
 
             <Button variant="ghost" size="sms" {...buttonProps}>
               <Icons.delete className="h-4 w-4" />

tailwind.config.js

@@ -44,6 +44,10 @@ export const theme = {
         DEFAULT: "hsl(var(--popover))",
         foreground: "hsl(var(--popover-foreground))",
       },
+      tooltip: {
+        DEFAULT: "hsl(var(--tooltip))",
+        foreground: "hsl(var(--tooltip-foreground))",
+      },
       card: {
         DEFAULT: "hsl(var(--card))",
         foreground: "hsl(var(--card-foreground))",