feat(snaps): Add background color prop to Snaps UI Container component

ui/components/app/snaps/insight-warnings/insight-warnings.js

@@ -85,6 +85,7 @@ export default function InsightWarnings({
               isCollapsable
               isCollapsed={warningState[snapId]}
               boxProps={{ marginBottom: idx === lastWarningIdx ? 0 : 4 }}
+              contentBackgroundColor={BackgroundColor.backgroundDefault}
             />
           );
         })}

ui/components/app/snaps/snap-home-page/snap-home-renderer.js

@@ -46,7 +46,7 @@
 
   useEffect(() => {
     return () => interfaceId && dispatch(deleteInterface(interfaceId));
   }, [interfaceId]);
 
   useEffect(() => {
     // Snaps are allowed to redirect to their own pending confirmations (templated or not)
@@ -62,7 +62,7 @@
     } else if (snapApproval) {
       history.push(`${CONFIRM_TRANSACTION_ROUTE}/${snapApproval.id}`);
     }
   }, [unapprovedTemplatedConfirmations, unapprovedConfirmations, history]);
 
   return (
     <Box
@@ -90,7 +90,6 @@
           isLoading={loading}
           useDelineator={false}
           useFooter
-          contentBackgroundColor={BackgroundColor.backgroundAlternative}
         />
       )}
     </Box>

ui/components/app/snaps/snap-insight/snap-insight.js

@@ -6,6 +6,7 @@ import { useSelector, useDispatch } from 'react-redux';
 import { Text } from '../../../component-library';
 import {
   AlignItems,
+  BackgroundColor,
   FLEX_DIRECTION,
   JustifyContent,
   TextAlign,
@@ -69,6 +70,7 @@ export const SnapInsight = ({ snapId, data }) => {
               interfaceId={interfaceId}
               delineatorType={DelineatorType.Insights}
               isLoading={isLoading}
+              contentBackgroundColor={BackgroundColor.backgroundDefault}
             />
           ) : (
             <Text

ui/components/app/snaps/snap-ui-renderer/components/container.ts

@@ -1,4 +1,4 @@
-import { BoxElement, JSXElement } from '@metamask/snaps-sdk/jsx';
+import { ContainerElement, JSXElement } from '@metamask/snaps-sdk/jsx';
 import { getJsxChildren } from '@metamask/snaps-utils';
 import { mapToTemplate } from '../utils';
 import {
@@ -8,7 +8,7 @@ import {
 import { UIComponentFactory } from './types';
 import { DEFAULT_FOOTER } from './footer';
 
-export const container: UIComponentFactory<BoxElement> = ({
+export const container: UIComponentFactory<ContainerElement> = ({
   element,
   useFooter,
   onCancel,

ui/components/app/snaps/snap-ui-renderer/components/section.ts

@@ -8,12 +8,20 @@ import { box } from './box';
 
 export const section: UIComponentFactory<SectionElement> = ({
   element,
+  contentBackgroundColor,
   ...params
 }) => {
   const { children, props } = box({
     element,
     ...params,
   } as unknown as UIComponentParams<BoxElement>);
+
+  // Reverse colors to improve visibility on certain backgrounds
+  const backgroundColor =
+    contentBackgroundColor === BackgroundColor.backgroundDefault
+      ? BackgroundColor.backgroundAlternative
+      : BackgroundColor.backgroundDefault;
+
   return {
     element: 'Box',
     children,
@@ -22,7 +30,7 @@ export const section: UIComponentFactory<SectionElement> = ({
       className: 'snap-ui-renderer__section',
       padding: 4,
       gap: 2,
-      backgroundColor: BackgroundColor.backgroundDefault,
+      backgroundColor,
       borderRadius: BorderRadius.LG,
     },
   };

ui/components/app/snaps/snap-ui-renderer/components/types.ts

@@ -13,6 +13,7 @@ export type UIComponentParams<T extends JSXElement> = {
     placeholder?: string;
   };
   t: (key: string) => string;
+  contentBackgroundColor: string | undefined;
 };
 
 export type UIComponent = {

ui/components/app/snaps/snap-ui-renderer/snap-ui-renderer.js

@@ -14,12 +14,13 @@ import { SnapInterfaceContextProvider } from '../../../../contexts/snaps';
 import PulseLoader from '../../../ui/pulse-loader';
 import {
   AlignItems,
+  BackgroundColor,
   BlockSize,
   Display,
   JustifyContent,
 } from '../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
-import { mapToTemplate } from './utils';
+import { mapToExtensionCompatibleColor, mapToTemplate } from './utils';
 
 // Component that maps Snaps UI JSON format to MetaMask Template Renderer format
 const SnapUIRendererComponent = ({
@@ -69,6 +70,11 @@ const SnapUIRendererComponent = ({
     [inputValue, onInputChange, placeholder, isPrompt],
   );
 
+  const backgroundColor =
+    contentBackgroundColor ??
+    mapToExtensionCompatibleColor(content?.props?.backgroundColor) ??
+    BackgroundColor.backgroundAlternative;
+
   const sections = useMemo(
     () =>
       content &&
@@ -79,8 +85,9 @@ const SnapUIRendererComponent = ({
         useFooter,
         promptLegacyProps,
         t,
+        contentBackgroundColor: backgroundColor,
       }),
-    [content, onCancel, useFooter, promptLegacyProps, t],
+    [content, onCancel, useFooter, promptLegacyProps, t, backgroundColor],
   );
 
   if (isLoading || !content) {
@@ -130,7 +137,7 @@ const SnapUIRendererComponent = ({
       <Box
         className="snap-ui-renderer__content"
         height={BlockSize.Full}
-        backgroundColor={contentBackgroundColor}
+        backgroundColor={backgroundColor}
         style={{
           overflowY: 'auto',
           marginBottom: useFooter ? '80px' : '0',

ui/components/app/snaps/snap-ui-renderer/utils.ts

@@ -5,6 +5,7 @@ import { sha256 } from '@noble/hashes/sha256';
 import { NonEmptyArray, bytesToHex, remove0x } from '@metamask/utils';
 import { unescape as unescapeEntities } from 'he';
 import { ChangeEvent as ReactChangeEvent } from 'react';
+import { BackgroundColor } from '../../../../helpers/constants/design-system';
 import { COMPONENT_MAPPING } from './components';
 import { UIComponent } from './components/types';
 
@@ -20,6 +21,7 @@ export type MapToTemplateParams = {
     placeholder?: string;
   };
   t?: (key: string) => string;
+  contentBackgroundColor?: string | undefined;
 };
 
 /**
@@ -140,3 +142,17 @@ export const FIELD_ELEMENT_TYPES = [
 export const getPrimaryChildElementIndex = (children: JSXElement[]) => {
   return children.findIndex((c) => FIELD_ELEMENT_TYPES.includes(c.type));
 };
+
+/**
+ * Map Snap custom color to extension compatible color.
+ *
+ * @param color - Snap custom color.
+ * @returns String, representing color from design system.
+ */
+export const mapToExtensionCompatibleColor = (color: string) => {
+  const backgroundColorMapping: { [key: string]: string | undefined } = {
+    default: BackgroundColor.backgroundAlternative, // For Snaps, the default background color is the Alternative
+    alternative: BackgroundColor.backgroundDefault,
+  };
+  return color ? backgroundColorMapping[color] : undefined;
+};

ui/components/app/snaps/snap-ui-selector/index.scss

@@ -1,6 +1,7 @@
 .snap-ui-renderer {
   &__selector {
     width: 100%;
+    border: 1px solid var(--color-border-muted);
 
     & > span:first-child {
       width: 100%;
@@ -12,6 +13,7 @@
 
     &:hover {
       background-color: var(--color-background-alternative-hover);
+      border-color: var(--color-border-default);
     }
   }
 

ui/pages/confirmations/components/confirm/snaps/snaps-section/snap-insight.tsx

@@ -7,6 +7,7 @@ import {
   TextColor,
   TextVariant,
   FontWeight,
+  BackgroundColor,
 } from '../../../../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../../../../hooks/useI18nContext';
 import { getSnapMetadata } from '../../../../../../selectors';
@@ -75,6 +76,7 @@ export const SnapInsight: React.FunctionComponent<SnapInsightProps> = ({
         interfaceId={interfaceId}
         isLoading={loading}
         useDelineator={false}
+        contentBackgroundColor={BackgroundColor.backgroundDefault}
       />
     </Delineator>
   );

ui/pages/confirmations/confirmation/confirmation.js

@@ -45,7 +45,6 @@ import { SnapUIRenderer } from '../../../components/app/snaps/snap-ui-renderer';
 import { SNAP_MANAGE_ACCOUNTS_CONFIRMATION_TYPES } from '../../../../shared/constants/app';
 ///: END:ONLY_INCLUDE_IF
 import { DAY } from '../../../../shared/constants/time';
-import { BackgroundColor } from '../../../helpers/constants/design-system';
 import { Nav } from '../components/confirm/nav';
 import { ConfirmContextProvider } from '../context/confirm';
 import { useConfirmationNavigation } from '../hooks/useConfirmationNavigation';
@@ -523,7 +522,6 @@ export default function ConfirmationPage({
               useDelineator={false}
               onCancel={handleSnapDialogCancel}
               useFooter={isSnapDefaultDialog}
-              contentBackgroundColor={BackgroundColor.backgroundAlternative}
             />
           ) : (
             <MetaMaskTemplateRenderer sections={templatedValues.content} />