docs(dialog): adds modal background color documentation

Author: marissahuysentruyt

components/dialog/stories/dialog.stories.js

@@ -6,6 +6,9 @@ import { Template } from "./template.js";
 /**
  * A dialog displays important information that users need to acknowledge. They appear over the interface and block further interactions. Standard dialogs are the most frequent type of dialogs. They appear in the center of the screen over the interface and should be used for moderately complex tasks. Takeover dialogs are large types of dialogs. They use the totality of the screen and should be used for modal experiences with complex workflows.
  * 
+ * ## Usage with modal component
+ * When a dialog component is used in tandem with a [modal](/docs/components-modal--docs), implementations will have to utilize the `customStyles` prop on the modal to set `--mod-modal-background-color` to `transparent`. This will prevent any background color used in the modal from peaking through "behind" the dialog, allowing the dialog's background color to take precedence.
+ * 
  * The alert variants that were previously a part of Dialog were moved to their own component, [alert dialog](/docs/components-alert-dialog--docs).
  */
 export default {