fix(modal): change modal background color to transparent (#3604)

* refactor(modal): update modal background color to transparent
- adds documentation to modal docs page
- updates metadata.json

* docs(dialog): remove custom modal style
- removes the customStyles object that was setting --mod-modal-
background-color in the dialog template
- removes the custom wrapper styles in the dialog tests that were
intending to set the dialog apart from the modal
- remove a duplicate isOpen control in dialog.stories.js

* chore(modal): create changeset

Author: marissahuysentruyt

.changeset/polite-moments-stay.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/modal": patch
+---
+
+In Spectrum 2, elements that would typically be children of a modal (like dialogs, alert dialogs, and tray) have background-color token specs defined. Because modal _also_ had a defined background color, there was some antialiasing bleed-through happening on the corners, since both the modal and its child now had background colors on top of each other. `--spectrum-modal-background-color` is now redefined as `transparent` to avoid these conflicts in S2. `--mod-modal-background-color` is still available to consumers.

components/dialog/stories/dialog.stories.js

@@ -90,7 +90,6 @@ export default {
 			options: ["default", "fullscreen", "fullscreenTakeover"],
 			control: "select",
 		},
-		isOpen,
 		isDismissible: {
 			name: "Dismissible",
 			type: { name: "boolean" },

components/dialog/stories/dialog.test.js

@@ -16,10 +16,6 @@ export const DialogGroup = Variants({
 			// TODO: The dialog's heading arg is getting passed as the "Sizing" heading arg (instead of the
 			// TODO: word "Sizing"). We should be able to remove this arg once that no longers happens.
 			heading: showTestingGrid ? "Lorem ipsum dolor sit amet, consectetur adipiscing elit" : args.heading,
-			customStyles: {
-				...(args.customStyles ?? {}),
-				"background-color": showTestingGrid ? "var(--spectrum-gray-100)" : undefined,
-			},
 		}, context);
 	},
 	sizeDirection: "column",
@@ -66,7 +62,6 @@ export const DialogFullscreen = Variants({
 			 */
 			customStyles: {
 				margin: showTestingGrid ? "16px" : undefined,
-				"background-color": showTestingGrid ? "var(--spectrum-gray-100)" : undefined,
 			},
 		}, context);
 	},
@@ -85,9 +80,6 @@ export const DialogFullscreen = Variants({
 export const DialogFullscreenTakeover = Variants({
 	Template,
 	withSizes: false,
-	wrapperStyles: {
-		"background-color": "var(--spectrum-gray-50)"
-	},
 	testData: [
 		{
 			showModal: false,

components/dialog/stories/template.js

@@ -171,9 +171,6 @@ export const Template = ({
 			isOpen,
 			content: Dialog,
 			variant: layout,
-			customStyles: {
-				"--mod-modal-background-color": "transparent"
-			},
 		}, context);
 	}
 	else {

components/modal/dist/metadata.json

@@ -45,7 +45,6 @@
     "--spectrum-animation-ease-out",
     "--spectrum-corner-radius-extra-large-default",
     "--spectrum-dialog-confirm-entry-animation-distance",
-    "--spectrum-gray-75",
     "--spectrum-window-to-edge"
   ],
   "passthroughs": [],

components/modal/index.css

@@ -24,7 +24,7 @@
 	--spectrum-modal-max-height: 90vh;
 	--spectrum-modal-max-width: 90%;
 
-	--spectrum-modal-background-color: var(--mod-modal-background-color, var(--spectrum-gray-75));
+	--spectrum-modal-background-color: var(--mod-modal-background-color, transparent);
 	--spectrum-modal-confirm-border-radius: var(--mod-modal-confirm-border-radius, var(--spectrum-corner-radius-extra-large-default));
 
 	--spectrum-modal-transition-animation-duration: var(--mod-modal-transition-animation-duration, var(--spectrum-animation-duration-100));

components/modal/stories/modal.stories.js

@@ -57,6 +57,9 @@ export default {
 	],
 };
 
+/**
+ * The default modal does not include a background color itself, other than `transparent`. If implementations are in need of a background color, and one is not supported within the modal's child component (for example, the dialog defines its own background color), `--mod-modal-background-color` may be set on the `.spectrum-Modal` class.
+ */
 export const Default = ModalGroup.bind({});
 Default.args = {
 	content: [

components/picker/dist/metadata.json

@@ -152,6 +152,7 @@
     "--spectrum-picker-border-color-active",
     "--spectrum-picker-border-color-default",
     "--spectrum-picker-border-color-default-open",
+    "--spectrum-picker-border-color-disabled",
     "--spectrum-picker-border-color-error-active",
     "--spectrum-picker-border-color-error-default",
     "--spectrum-picker-border-color-error-default-open",
@@ -277,6 +278,7 @@
     "--spectrum-font-size-75",
     "--spectrum-gray-100",
     "--spectrum-gray-200",
+    "--spectrum-gray-300",
     "--spectrum-gray-500",
     "--spectrum-gray-600",
     "--spectrum-gray-700",