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

Author: Melissa Thompson

.storybook/blocks/ColorPalette.jsx

@@ -47,8 +47,7 @@ export const Swatch = styled.div`
 		${props => props.background && `background: ${props.background};`}
 	}
 
-	.spectrum--dark &::before,
-	.spectrum--darkest &::before {
+	.spectrum--dark &::before {
 		border-color: rgba(255, 255, 255, 51%);
 	}
 `;

.storybook/decorators/context.js

@@ -91,13 +91,6 @@ export const withContextWrapper = makeDecorator({
 				// Express only gets the express class
 				container.classList.toggle("spectrum--express", isExpress && !isRaw);
 
-				// Darkest is deprecated in Spectrum 2
-				if (isModern && color === "darkest") {
-					/* eslint-disable no-console -- notify that darkest was deprecated in S2 */
-					console.warn("The 'darkest' color is deprecated in Spectrum 2. Please use 'dark' instead.");
-					color = "dark";
-				}
-
 				// Let the static color override the color if it's set
 				if (hasStaticElement && staticColorSettings[staticKey]?.color) {
 					color = staticColorSettings[staticKey].color;
@@ -109,7 +102,7 @@ export const withContextWrapper = makeDecorator({
 					color = "light";
 				}
 
-				for (let c of ["light", "dark", "darkest"]) {
+				for (let c of ["light", "dark"]) {
 					container.classList.toggle(`spectrum--${c}`, c === color && !isRaw);
 				}
 

.storybook/types/global.js

@@ -30,7 +30,6 @@ export default {
 			items: [
 				{ value: "light", title: "Light", right: "default" },
 				{ value: "dark", title: "Dark" },
-				{ value: "darkest", title: "Darkest", right: "deprecated" },
 			],
 			dynamicTitle: true,
 		},

tokens/project.json

@@ -62,15 +62,8 @@
 				"{projectRoot}/dist/css/global-vars.css",
 				"{projectRoot}/dist/css/light-vars.css",
 				"{projectRoot}/dist/css/dark-vars.css",
-				"{projectRoot}/dist/css/darkest-vars.css",
 				"{projectRoot}/dist/css/medium-vars.css",
-				"{projectRoot}/dist/css/large-vars.css",
-				"{projectRoot}/dist/css/spectrum/global-vars.css",
-				"{projectRoot}/dist/css/spectrum/medium-vars.css",
-				"{projectRoot}/dist/css/spectrum/large-vars.css",
-				"{projectRoot}/dist/css/express/global-vars.css",
-				"{projectRoot}/dist/css/express/medium-vars.css",
-				"{projectRoot}/dist/css/express/large-vars.css"
+				"{projectRoot}/dist/css/large-vars.css"
 			]
 		}
 	}