Implement core value modals

app/components/modals/Create/Create.container.tsx

@@ -25,6 +25,7 @@ const CreateContainer = memo<CreateProps>(
     className = "",
     ariaLabel,
     ariaLabelledBy,
+    backdropVariant = "default",
   }) => {
     const createRef = useRef<HTMLDivElement>(null);
     const overlayRef = useRef<HTMLDivElement>(null);
@@ -132,6 +133,7 @@ const CreateContainer = memo<CreateProps>(
         ariaLabelledBy={ariaLabelledBy}
         createRef={createRef}
         overlayRef={overlayRef}
+        backdropVariant={backdropVariant}
       />
     );
   },

app/components/modals/Create/Create.types.ts

@@ -27,6 +27,11 @@ export interface CreateProps {
   multiSelect?: boolean;
   upload?: boolean;
   proportion?: boolean;
+  /**
+   * Backdrop behind the dialog. `loginYellow` matches the Login modal’s blurred brand overlay.
+   * @default "default"
+   */
+  backdropVariant?: "default" | "loginYellow";
 }
 
 export interface CreateViewProps {
@@ -51,4 +56,5 @@ export interface CreateViewProps {
   ariaLabelledBy?: string;
   createRef: React.RefObject<HTMLDivElement>;
   overlayRef: React.RefObject<HTMLDivElement>;
+  backdropVariant: "default" | "loginYellow";
 }

app/components/modals/Create/Create.view.tsx

@@ -6,6 +6,15 @@ import ModalFooter from "../../utility/ModalFooter";
 import ModalHeader from "../../utility/ModalHeader";
 import type { CreateViewProps } from "./Create.types";
 
+const backdropOverlayClasses: Record<
+  CreateViewProps["backdropVariant"],
+  string
+> = {
+  default: "fixed inset-0 bg-black/50 z-[9998]",
+  loginYellow:
+    "fixed inset-0 z-[9998] bg-[var(--color-surface-inverse-brand-primary)]/85 backdrop-blur-md supports-[backdrop-filter]:bg-[var(--color-surface-inverse-brand-primary)]/75",
+};
+
 export function CreateView({
   isOpen,
   onClose,
@@ -28,6 +37,7 @@ export function CreateView({
   ariaLabelledBy,
   createRef,
   overlayRef,
+  backdropVariant,
 }: CreateViewProps) {
   if (!isOpen) return null;
 
@@ -36,7 +46,7 @@ export function CreateView({
       {/* Overlay */}
       <div
         ref={overlayRef}
-        className="fixed inset-0 bg-black/50 z-[9998]"
+        className={backdropOverlayClasses[backdropVariant]}
         onClick={onClose}
         aria-hidden="true"
       />