feat: add example gradients for static black and white (#2637)

* feat: add example gradients for static black and white

Add new gradient backgrounds, displayed for static black and static
white variants. These are used for examples only. This adds CSS custom
properties available globally within Storybook and sets them on the
existing decorator.

* docs(fieldlabel): support static colors decorator in storybook

Change Field label stories that show static black and static white,
so they work with the recently added decorator that changes the main
Storybook background.

* docs(button): adjust static colors template

Adjust static colors template to better handle the static color
decorator and gradients.

* chore(fieldlabel): apply eslint indentation changes to stories

Author: jawinn

.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

@@ -42,7 +42,7 @@ export const Template = ({
 		iconName = "Asterisk100";
 	}
 
-	const labelMarkup = html`
+	return html`
 		<label
 			class=${classMap({
 				[rootClass]: true,
@@ -67,18 +67,4 @@ export const Template = ({
 				: ""}
 		</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>
-		`;
 };