Refine recipe overlay tooltips

src/components/og/OGTooltip.tsx

@@ -2,7 +2,7 @@ import { ComponentProps, ReactNode, useRef, useEffect } from 'react';
 import OGLoaderImage from './OGLoaderImage';
 import { IMAGE_OG_DIMENSION } from '@/image-response';
 import clsx from 'clsx/lite';
-import { useOGTooltipState } from './state';
+import { Tooltip, useOGTooltipState } from './state';
 import useSupportsHover from '@/utility/useSupportsHover';
 
 const { aspectRatio } = IMAGE_OG_DIMENSION;
@@ -15,10 +15,12 @@ const offsetBelow = -6;
 export default function OGTooltip({
   children,
   caption,
+  color,
   ...props
 }: {
   children :ReactNode
   caption?: ReactNode
+  color?: Tooltip['color']
 } & ComponentProps<typeof OGLoaderImage>) {
   const ref = useRef<HTMLDivElement>(null);
 
@@ -40,7 +42,9 @@ export default function OGTooltip({
         {...props}
         className={clsx(
           'overflow-hidden rounded-[0.25rem]',
-          'outline-medium bg-extra-dim',
+          color === 'frosted'
+            ? 'outline outline-gray-400/25'
+            : 'outline-medium bg-extra-dim',
         )}
       />
       {caption && <div className={clsx(
@@ -61,7 +65,7 @@ export default function OGTooltip({
       onMouseEnter={() => supportsHover &&
         showTooltip?.(
           ref.current,
-          { content, width, height, offsetAbove, offsetBelow },
+          { content, width, height, offsetAbove, offsetBelow, color },
         )}
       onMouseLeave={() => supportsHover &&
         dismissTooltip?.(ref.current)}

src/components/og/OGTooltipProvider.tsx

@@ -107,7 +107,7 @@ export default function OGTooltipProvider({
 
   return (
     <OGTooltipContext.Provider value={{ showTooltip, dismissTooltip }}>
-      <div className="relative inset-0 z-50 pointer-events-none">
+      <div className="relative inset-0 z-100 pointer-events-none">
         <AnimatePresence>
           {currentTooltip &&
             <motion.div
@@ -119,7 +119,10 @@ export default function OGTooltipProvider({
               className="fixed"
               style={tooltipStyle}
             >
-              <MenuSurface className="max-w-none p-1!">
+              <MenuSurface
+                className="max-w-none p-1!"
+                color={currentTooltip.color}
+              >
                 {currentTooltip.content}
               </MenuSurface>
             </motion.div>}

src/components/og/state.ts

@@ -1,4 +1,5 @@
-import { createContext, ReactNode, use } from 'react';
+import { ComponentProps, createContext, ReactNode, use } from 'react';
+import MenuSurface from '../primitives/MenuSurface';
 
 export type Tooltip = {
   content: ReactNode
@@ -6,6 +7,7 @@ export type Tooltip = {
   height: number
   offsetAbove: number
   offsetBelow: number
+  color?: ComponentProps<typeof MenuSurface>['color']
 }
 
 export type OGTooltipState = {

src/components/primitives/EntityLink.tsx

@@ -99,7 +99,8 @@ export default function EntityLink({
         'peer',
         'inline-flex items-center gap-2 max-w-full truncate',
         classForContrast(),
-        path && !badged && 'hover:text-gray-900 dark:hover:text-gray-100',
+        path && !badged && contrast !== 'frosted' &&
+          'hover:text-gray-900 dark:hover:text-gray-100',
         path && !badged && 'active:text-medium!',
       )}
       isLoading={isLoading}
@@ -156,6 +157,7 @@ export default function EntityLink({
           title={label}
           path={tooltipImagePath}
           caption={tooltipCaption}
+          color={contrast === 'frosted' ? 'frosted' : undefined}
         >
           {renderLink}
         </OGTooltip>

src/recipe/PhotoRecipeOverlay.tsx

@@ -122,6 +122,7 @@ export default function PhotoRecipeOverlay({
           {title
             ? <PhotoRecipe
               recipe={title}
+              contrast="frosted"
               className={clsx(
                 'text-[15px]',
                 '[&>*>*>*>*]:text-black',
@@ -161,8 +162,8 @@ export default function PhotoRecipeOverlay({
           {renderDataSquare(
             <div className="flex items-center gap-1.5">
               <PhotoFilm
-                contrast="frosted"
                 film={film}
+                contrast="frosted"
                 className={clsx(
                   'translate-y-[-0.5px]',
                   '*:text-black! *:active:text-black!',