fix(storybook): body classes for story and docs pages (#2617)

Author: Melissa Thompson

.storybook/decorators/contextsWrapper.js

@@ -8,7 +8,7 @@ export const withContextWrapper = makeDecorator({
 	name: "withContextWrapper",
 	parameterName: "context",
 	wrapper: (StoryFn, context) => {
-		const { args, argTypes, viewMode, id } = context;
+		const { args, argTypes, id, viewMode } = context;
 
 		const getDefaultValue = (type) => {
 			if (!type) return null;
@@ -32,6 +32,14 @@ export const withContextWrapper = makeDecorator({
 
 		useEffect(() => {
 			let containers = [document.body];
+			const container =
+				viewMode === "docs" &&
+				!window.isChromatic() &&
+				!id.includes("foundation")
+					? document.querySelector("#root-inner") ?? document.body
+					: document.body;
+
+			container.classList.toggle("spectrum", true);
 
 			const roots = [
 				...document.querySelectorAll(`#story--${id}`),
@@ -60,7 +68,8 @@ export const withContextWrapper = makeDecorator({
 				if (hasStaticElement) {
 					if (container.querySelector(`.${args.rootClass}--staticBlack`)) {
 						container.style.background = "rgb(181, 209, 211)";
-					} else if (container.querySelector(`.${args.rootClass}--staticWhite, .${args.rootClass}--overBackground`)) {
+					}
+					else if (container.querySelector(`.${args.rootClass}--staticWhite, .${args.rootClass}--overBackground`)) {
 						container.style.background = "rgb(15, 121, 125)";
 					}
 				}