feat: add example gradients for static black and white

.storybook/assets/base.css

@@ -22,6 +22,13 @@ body {
 }
 
 .spectrum {
+	/* ---- Storybook only custom properties ---- */
+	/* Gradient that changes with the color theme. */
+	--spectrum-examples-gradient: linear-gradient(45deg, var(--spectrum-magenta-1500), var(--spectrum-blue-1500));
+	/* Gradients that do not change with the color theme, for use in static color backgrounds. */
+	--spectrum-examples-gradient-static-black: linear-gradient(45deg, rgb(255, 241, 246), rgb(238, 245, 255));
+	--spectrum-examples-gradient-static-white: linear-gradient(45deg, rgb(64, 0, 22), rgb(14, 24, 67));
+
 	background-color: var(--spectrum-background-layer-1-color);
 
 	/* @todo: add back the text color and update VRTs */

.storybook/decorators/contextsWrapper.js

@@ -50,12 +50,13 @@ export const withContextWrapper = makeDecorator({
 				container.classList.toggle(`spectrum--${s}`, s === scale);
 			}
 
+			// Change background color when demonstrating static color options.
 			if (args.staticColor === "black") {
-				container.style.backgroundColor = "rgb(181, 209, 211)";
+				container.style.background = "var(--spectrum-examples-gradient-static-black)";
 			} else if (args.staticColor === "white") {
-				 container.style.backgroundColor = "rgb(15, 121, 125)";
+				 container.style.background = "var(--spectrum-examples-gradient-static-white)";
 			} else {
-				container.style.removeProperty("background-color");
+				container.style.removeProperty("background");
 			}
 		}, [color, scale, isExpress, args.staticColor]);
 

components/closebutton/stories/closebutton.stories.js

@@ -55,29 +55,25 @@ export default {
 	},
 };
 
-const CloseButton = ({
-	staticColor,
-	...args
-}) => {
+const CloseButton = (args) => {
 	return html`
 		<div
 			style=${ifDefined(styleMap({
 				padding: "1rem",
-				backgroundColor: staticColor === "white" ? "rgb(15, 121, 125)" : staticColor === "black" ? "rgb(181, 209, 211)" : undefined,
 			}))}
 		>
-			${Template({...args, staticColor})}
+			${Template(args)}
 			${when(window.isChromatic(), () =>
 				html`
 					${Template({
-							...args,
-							isDisabled: true,
-						})}
+						...args,
+						isDisabled: true,
+					})}
 					${html`
 						<div
 							style=${ifDefined(styleMap({
 								padding: "1rem",
-								backgroundColor: "rgb(15, 121, 125)"
+								background: "var(--spectrum-examples-gradient-static-white)"
 							}))}
 						>
 							${Template({
@@ -95,7 +91,7 @@ const CloseButton = ({
 						<div
 							style=${ifDefined(styleMap({
 								padding: "1rem",
-								backgroundColor: "rgb(181, 209, 211)"
+								background: "var(--spectrum-examples-gradient-static-black)"
 							}))}
 						>
 							${Template({
@@ -113,7 +109,7 @@ const CloseButton = ({
 			)}
 		</div>
 	`;
-}
+};
 
 export const Default = CloseButton.bind({});
 Default.args = {};

components/fieldlabel/stories/fieldlabel.stories.js

@@ -1,4 +1,3 @@
-import { html } from "lit";
 import { Template } from "./template";
 
 export default {
@@ -111,21 +110,14 @@ WrappingAndRequired.args = {
 	style: { width: "200px" },
 };
 
-export const StaticColors = (args) => html`
-	${Template({
-		...args,
-		label: "The black static color class used on a label marked as required",
-		staticColor: "black",
-	})}
-	${Template({
-		...args,
-		label: "The white static color class used on a label marked as required",
-		staticColor: "white",
-	})}
-`;
-
-StaticColors.storyName = "Static colors";
-StaticColors.args = {
-	alignment: "left",
-	isRequired: true,
+export const StaticWhite = Template.bind({});
+StaticWhite.args = {
+	label: "The static white class used on a label marked as required",
+	staticColor: "white",
 };
+
+export const StaticBlack = Template.bind({});
+StaticBlack.args = {
+	label: "The static black class used on a label marked as required",
+	staticColor: "black",
+};

components/fieldlabel/stories/template.js

@@ -29,20 +29,20 @@ export const Template = ({
 
 	let iconName = "Asterisk100";
 	switch (size) {
-		case "s":
-			iconName = "Asterisk100";
-			break;
-		case "l":
-			iconName = "Asterisk200";
-			break;
-		case "xl":
-			iconName = "Asterisk300";
-			break;
-		default:
-			iconName = "Asterisk100";
+	case "s":
+		iconName = "Asterisk100";
+		break;
+	case "l":
+		iconName = "Asterisk200";
+		break;
+	case "xl":
+		iconName = "Asterisk300";
+		break;
+	default:
+		iconName = "Asterisk100";
 	}
 
-	const labelMarkup = html`
+	return html`
 		<label
 			class=${classMap({
 				[rootClass]: true,
@@ -63,22 +63,8 @@ export const Template = ({
 						size,
 						iconName,
 						customClasses: [`${rootClass}-UIIcon`, `${rootClass}-requiredIcon`],
-				  })
+					})
 				: ""}
 		</label>
 	`;
-
-	// When using the static color variants, wrap the label in an example element with a background color.
-	return !staticColor
-		? labelMarkup
-		: html`
-			<div
-				style=${styleMap({
-					padding: "1rem",
-					backgroundColor: staticColor === "white" ? "rgb(15, 121, 125)" : staticColor === "black" ? "rgb(181, 209, 211)" : undefined,
-				})}
-			</div>
-				${labelMarkup}
-			</div>
-		`;
 };