@oxyhq/bloom 0.62.0 → 0.64.0

package/src/dialog/Dialog.web.tsx

@@ -47,7 +47,6 @@ import {
   DIALOG_SHEET_BACKDROP_TESTID,
   EASE_OUT,
   PANEL_RADIUS,
-  SHEET_BACKDROP_OPACITY,
   SIDE_SHEET_MIN_GUTTER,
   useResolvedPlacement,
 } from './placement';
@@ -60,11 +59,6 @@ import type {
 
 const FADE_OUT_DURATION = CENTER_FADE_OUT_DURATION;
 
-/**
- * The centered card's scrim reads darker than a sheet's because the card floats
- * in the middle of it; the shared blur underneath is identical.
- */
-const DIALOG_BACKDROP_DIM_OPACITY = 0.6;
 
 /**
  * The four CSS `animation` shorthands driving the centered card and its backdrop.
@@ -331,7 +325,6 @@ function CenterOrSideDialog({
               onPress={() => close()}
               disabled={!dismissOnBackdrop}
               accessibilityLabel={label ? `Dismiss ${label}` : 'Dismiss dialog'}
-              dimOpacity={DIALOG_BACKDROP_DIM_OPACITY}
               // The fade rides on the LAYERS, never on the press target: an
               // opacity animation on the blur's ancestor composites the group in
               // isolation and leaves `backdrop-filter` nothing to sample.
@@ -705,7 +698,7 @@ function SheetSurface({
         disabled={!dismissOnBackdrop}
         // Same reason as the centred dialog: the transition and the opacity it
         // animates belong to the layers, not to the press target above them.
-        dimOpacity={SHEET_BACKDROP_OPACITY}
+        // No `dimOpacity` override — one darkness for every Bloom surface.
         layerStyle={backdropTransition}
         style={[sheetStyles.backdrop, { opacity: visible ? 1 : 0 }]}
       />
@@ -858,12 +851,12 @@ const sheetStyles: Record<'root' | 'backdrop' | 'panel', ViewStyle> = {
     bottom: 0,
   },
   backdrop: {
+    // Geometry only: the colour and the dim level belong to `Backdrop`.
     position: 'absolute',
     top: 0,
     left: 0,
     right: 0,
     bottom: 0,
-    backgroundColor: '#000',
   },
   panel: {
     position: 'absolute',

package/src/dialog/DialogBottomSheet.tsx

@@ -30,7 +30,6 @@ import {
   DEFAULT_DIALOG_CONTENT_PADDING,
   DEFAULT_MAX_HEIGHT_RATIO,
   PANEL_RADIUS,
-  SHEET_BACKDROP_OPACITY,
 } from './placement';
 import type { DialogControlProps, DialogProps } from './types';
 
@@ -286,7 +285,6 @@ export function DialogBottomSheet({
       }
       // Stronger dim than a lone sheet so an underlying sheet's handle/content
       // doesn't bleed through when a Dialog is stacked over one.
-      backdropOpacity={SHEET_BACKDROP_OPACITY + 0.3}
       // Measures the sheet card — the size a morph starts from.
       onLayout={morphState.onPanelLayout}
       style={sheetStyle}

package/src/dialog/placement.ts

@@ -83,8 +83,6 @@ export const CENTER_FADE_OUT_DURATION = 150;
 /** CSS approximation of reanimated's `Easing.out(Easing.cubic)`. */
 export const EASE_OUT = 'cubic-bezier(0.33, 1, 0.68, 1)';
 
-/** Backdrop dim opacity once fully shown (matches `bg-black/40`). */
-export const SHEET_BACKDROP_OPACITY = 0.4;
 
 /** Stable testID for the dimmed backdrop of a side/bottom placement dialog. */
 export const DIALOG_SHEET_BACKDROP_TESTID = 'bloom-dialog-sheet-backdrop';

package/src/overlay/index.tsx

@@ -60,8 +60,15 @@ const AnimatedBlurView = Animated.createAnimatedComponent(BlurView);
  * not in how the app behind them recedes.
  */
 export const BACKDROP_BLUR_INTENSITY = 80;
-/** Dim laid over the blur — the blur alone does not give enough contrast. */
-export const BACKDROP_DIM_OPACITY = 0.55;
+/**
+ * Extra dim laid OVER the blur. The blur already paints its own tint wash
+ * (`rgba(25,25,25,~0.62)` at the intensity above), so this is what takes the
+ * total to roughly 0.72 — dark enough to read a panel against, still clearly
+ * see-through. Every surface uses this one value: with each of them picking its
+ * own, menus landed at ~0.83 and read as solid black next to the image viewer's
+ * ~0.72.
+ */
+export const BACKDROP_DIM_OPACITY = 0.28;
 
 export interface OverlayRootProps {
   children?: ReactNode;
@@ -144,11 +151,18 @@ export const Backdrop = memo(function Backdrop({
 }: BackdropProps) {
   const inert = disabled || !onPress;
 
-  // An `opacity` handed in through `style` would sit on the ancestor of the
-  // blur and kill it; hoist it onto the layers instead of honouring it there.
+  // The press target must stay a pure hit box. Two things a caller's `style`
+  // can carry would break the visuals if honoured there:
+  //   - `opacity`, because `backdrop-filter` samples nothing under an ancestor
+  //     that composites in isolation, so the fade would erase the blur;
+  //   - `backgroundColor`, which would paint an opaque sheet UNDER the blur —
+  //     a second backdrop, and the reason menus and sheets rendered solid black
+  //     while the image viewer (which passed no background) looked right.
+  // Both are hoisted onto the layers, where they mean what the caller intended.
   const flat: ViewStyle = StyleSheet.flatten(style) ?? {};
-  const { opacity: styleOpacity, ...rootStyle } = flat;
+  const { opacity: styleOpacity, backgroundColor: styleBackground, ...rootStyle } = flat;
   const staticOpacity = typeof styleOpacity === 'number' ? styleOpacity : 1;
+  const resolvedDimColor = typeof styleBackground === 'string' ? styleBackground : dimColor;
 
   // The fade lives on each LAYER, never on their shared ancestor.
   const blurFade = useAnimatedStyle(
@@ -187,7 +201,7 @@ export const Backdrop = memo(function Backdrop({
       ) : null}
       <Animated.View
         pointerEvents="none"
-        style={[StyleSheet.absoluteFill, { backgroundColor: dimColor }, layerStyle, dimFade]}
+        style={[StyleSheet.absoluteFill, { backgroundColor: resolvedDimColor }, layerStyle, dimFade]}
       />
       {children}
     </Pressable>

package/src/zoomable-image-gallery/ZoomableImageGallery.tsx

@@ -796,7 +796,6 @@ const ZoomableImageGalleryInner = React.forwardRef<ZoomableImageGalleryHandle, Z
         <Backdrop
           onPress={handleDismiss}
           accessibilityLabel="Close image viewer"
-          dimColor={theme.colors.overlay}
           progress={opacity}
         />