Move Backdrop to TW theme

src/layers/Backdrop/Backdrop.tsx

@@ -1,7 +1,8 @@
 import React, { FC, MouseEvent } from 'react';
-import classNames from 'classnames';
 import { motion } from 'framer-motion';
-import css from './Backdrop.module.css';
+import { cn, useComponentTheme } from '@/utils';
+
+import { BackdropTheme } from './BackdropTheme';
 
 export interface BackdropProps {
   /**
@@ -19,6 +20,11 @@ export interface BackdropProps {
    */
   className?: string;
 
+  /**
+   * Theme for the Backdrop.
+   */
+  theme?: BackdropTheme;
+
   /**
    * Callback for when the backdrop is clicked.
    */
@@ -29,14 +35,19 @@ export const Backdrop: FC<BackdropProps> = ({
   zIndex = 998,
   portalIndex = 0,
   className,
+  theme: customTheme,
   onClick
-}) => (
-  <motion.div
-    className={classNames(css.backdrop, className)}
-    initial={{ opacity: 0 }}
-    animate={{ opacity: 0.8 - (portalIndex as number) / 10 }}
-    exit={{ opacity: 0 }}
-    style={{ zIndex }}
-    onClick={onClick}
-  />
-);
+}) => {
+  const theme = useComponentTheme<BackdropTheme>('backdrop', customTheme);
+
+  return (
+    <motion.div
+      className={cn(theme.base, className)}
+      initial={{ opacity: 0 }}
+      animate={{ opacity: theme.opacity - (portalIndex as number) / 10 }}
+      exit={{ opacity: 0 }}
+      style={{ zIndex }}
+      onClick={onClick}
+    />
+  );
+};

src/layers/Backdrop/BackdropTheme.tsx

@@ -0,0 +1,14 @@
+export interface BackdropTheme {
+  base: string;
+  opacity: number;
+}
+
+export const backdropTheme: BackdropTheme = {
+  base: 'fixed top-0 left-0 w-full h-full opacity-0 select-none bg-black',
+  opacity: 0.8
+};
+
+export const legacyBackdropTheme: BackdropTheme = {
+  base: 'fixed top-0 left-0 w-full h-full opacity-0 select-none bg-[var(--color-layer-transparent)]',
+  opacity: 0.8
+};

src/layers/Backdrop/index.ts

@@ -1 +1,2 @@
 export * from './Backdrop';
+export * from './BackdropTheme';

src/utils/Theme/themes/theme.ts

@@ -82,7 +82,10 @@ import {
   TooltipTheme,
   CalloutTheme,
   calloutTheme,
-  legacyCalloutTheme
+  legacyCalloutTheme,
+  BackdropTheme,
+  backdropTheme,
+  legacyBackdropTheme
 } from '@/layers';
 
 import {
@@ -194,6 +197,7 @@ export interface ReablocksTheme {
     breadcrumbs: BreadcrumbsTheme;
     stepper: StepperTheme;
     callout: CalloutTheme;
+    backdrop: BackdropTheme;
   };
 }
 
@@ -242,7 +246,8 @@ export const theme: ReablocksTheme = {
     jsonTree: jsonTreeTheme,
     breadcrumbs: breadcrumbsTheme,
     stepper: stepperTheme,
-    callout: calloutTheme
+    callout: calloutTheme,
+    backdrop: backdropTheme
   }
 };
 
@@ -291,6 +296,7 @@ export const legacyThemeVars: ReablocksTheme = {
     jsonTree: legacyJsonTreeTheme,
     breadcrumbs: legacyBreadcrumbTheme,
     stepper: legacyStepperTheme,
-    callout: legacyCalloutTheme
+    callout: legacyCalloutTheme,
+    backdrop: legacyBackdropTheme
   }
 };