Dimming Overlay - background change (#2554)

Author: M-i-k-e-l

demo/src/screens/componentScreens/HintsScreen.tsx

@@ -170,7 +170,7 @@ export default class HintsScreen extends Component<HintScreenProps> {
             // borderRadius={BorderRadiuses.br40}
             // edgeMargins={30}
             onBackgroundPress={useBackdrop && !useTargetFrame ? this.toggleHint : undefined}
-            backdropColor={Colors.rgba(Colors.black, 0.5)}
+            backdropColor={Colors.rgba(Colors.$backgroundInverted, 0.3)}
             customContent={
               showCustomContent
                 ? this.renderCustomContent()

demo/src/screens/incubatorScreens/PanViewScreen.tsx

@@ -21,7 +21,7 @@ interface Item {
   label: string;
 }
 
-const OVERLAY_BACKGROUND_COLOR = Colors.rgba(Colors.black, 0.5);
+const OVERLAY_BACKGROUND_COLOR = Colors.rgba(Colors.$backgroundInverted, 0.3);
 const colors: Item[] = [
   {value: Colors.red10, label: 'Red10'},
   {value: Colors.red30, label: 'Red30'},

src/components/dialog/index.tsx

@@ -93,7 +93,7 @@ interface DialogState {
   fadeOut?: boolean;
 }
 
-const DEFAULT_OVERLAY_BACKGROUND_COLOR = Colors.rgba(Colors.black, 0.5);
+const DEFAULT_OVERLAY_BACKGROUND_COLOR = Colors.rgba(Colors.$backgroundInverted, 0.3);
 
 /**
  * @description: Dialog component for displaying custom content inside a popup dialog

src/incubator/Dialog/index.tsx

@@ -27,7 +27,7 @@ import DialogHeader from './DialogHeader';
 import {DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps} from './types';
 export {DialogProps, DialogDirections, DialogDirectionsEnum, DialogHeaderProps};
 
-const DEFAULT_OVERLAY_BACKGROUND_COLOR = Colors.rgba(Colors.black, 0.5);
+const DEFAULT_OVERLAY_BACKGROUND_COLOR = Colors.rgba(Colors.$backgroundInverted, 0.3);
 const THRESHOLD_VELOCITY = 750;
 
 export interface DialogStatics {