From db569840dab551850ef8177fccd64b49ce9a4d7b Mon Sep 17 00:00:00 2001
From: Makenna Smutz <32865577+KenzoBenzo@users.noreply.github.com>
Date: Tue, 7 May 2024 18:30:27 -0400
Subject: [PATCH] feat: Add new `background` property to docs `Frame` component
 (#819)

---
 packages/ui/app/src/mdx/base-components.tsx  |  2 +-
 packages/ui/app/src/mdx/components/Frame.tsx | 10 ++++++++--
 packages/ui/app/src/next-app/globals.scss    |  6 +++++-
 3 files changed, 14 insertions(+), 4 deletions(-)

diff --git a/packages/ui/app/src/mdx/base-components.tsx b/packages/ui/app/src/mdx/base-components.tsx
index a8a4ab97a0..9a33455e04 100644
--- a/packages/ui/app/src/mdx/base-components.tsx
+++ b/packages/ui/app/src/mdx/base-components.tsx
@@ -153,7 +153,7 @@ export const Image: FC<ImgProps> = ({ className, src, height, width, disableZoom
     }, [files, src]);
 
     return (
-        <Zoom zoomImg={{ src: fernImageSrc?.url }}>
+        <Zoom zoomImg={{ src: fernImageSrc?.url }} classDialog="custom-backdrop">
             <FernImage src={fernImageSrc} {...rest} />
         </Zoom>
     );
diff --git a/packages/ui/app/src/mdx/components/Frame.tsx b/packages/ui/app/src/mdx/components/Frame.tsx
index 849300fe46..dfc502eebd 100644
--- a/packages/ui/app/src/mdx/components/Frame.tsx
+++ b/packages/ui/app/src/mdx/components/Frame.tsx
@@ -1,14 +1,20 @@
+import clsx from "clsx";
 import { FC, PropsWithChildren } from "react";
 
 export declare namespace Frame {
     export interface Props {
         caption?: string;
+        background?: "default" | "subtle";
     }
 }
 
-export const Frame: FC<PropsWithChildren<Frame.Props>> = ({ caption, children }) => {
+export const Frame: FC<PropsWithChildren<Frame.Props>> = ({ caption, background = "default", children }) => {
     return (
-        <figure className="not-prose fern-card relative mb-6 mt-4 overflow-hidden rounded-xl p-2 first:mt-0">
+        <figure
+            className={clsx("not-prose fern-card relative mb-6 mt-4 overflow-hidden rounded-xl p-2 first:mt-0", {
+                "bg-tag-default-soft": background === "subtle",
+            })}
+        >
             <div className="relative flex justify-center overflow-hidden rounded-lg shadow-sm">{children}</div>
             {caption && (
                 <figcaption className="t-muted relative mt-3 flex justify-center px-8 pb-2 pt-0 text-sm">
diff --git a/packages/ui/app/src/next-app/globals.scss b/packages/ui/app/src/next-app/globals.scss
index 9583e31f5f..d06fb42d1b 100644
--- a/packages/ui/app/src/next-app/globals.scss
+++ b/packages/ui/app/src/next-app/globals.scss
@@ -36,7 +36,7 @@
         -webkit-tap-highlight-color: transparent;
     }
 
-    /* 
+    /*
     html.dark {
         background-color: var(--accent);
     } */
@@ -821,4 +821,8 @@
     .fern-api-property-key {
         @apply font-mono t-default font-semibold text-sm;
     }
+
+    .custom-backdrop [data-rmiz-modal-overlay="visible"] {
+        @apply bg-text-default/20;
+    }
 }