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/decorators/context.js

@@ -31,11 +31,11 @@ export const withContextWrapper = makeDecorator({
 
 		const staticColorSettings = {
 			"black": {
-				background: "var(--spectrum-docs-static-black-background-color)",
+				background: "var(--spectrum-examples-gradient-static-black)",
 				color: "light"
 			},
 			"white": {
-				background: "var(--spectrum-docs-static-white-background-color)",
+				background: "var(--spectrum-examples-gradient-static-white)",
 				color: "dark"
 			},
 		};

tokens/custom/global-vars.css

@@ -57,9 +57,12 @@
 	--spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif;
 	--spectrum-cjk-font: var(--spectrum-code-font-family-stack);
 
-	/* static white / black background color for docs containers */
-	--spectrum-docs-static-white-background-color: rgb(15 121 125);
-	--spectrum-docs-static-black-background-color: rgb(181 209 211);
+	/* 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));
 
 	--spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white);
 

tokens/dist/css/global-vars.css

@@ -811,10 +811,9 @@
 	--spectrum-font-size: var(--spectrum-font-size-100);
 	--spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif;
 	--spectrum-cjk-font: var(--spectrum-code-font-family-stack);
-	--spectrum-docs-static-white-background-color-rgb: 15, 121, 125;
-	--spectrum-docs-static-white-background-color: rgba(var(--spectrum-docs-static-white-background-color-rgb));
-	--spectrum-docs-static-black-background-color-rgb: 181, 209, 211;
-	--spectrum-docs-static-black-background-color: rgba(var(--spectrum-docs-static-black-background-color-rgb));
+	--spectrum-examples-gradient: linear-gradient(45deg, var(--spectrum-magenta-1500), var(--spectrum-blue-1500));
+	--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));
 	--spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white);
 	--spectrum-corner-radius-1000: 9999px;
 }

tokens/dist/css/index.css

@@ -1535,10 +1535,9 @@
 	--spectrum-font-size: var(--spectrum-font-size-100);
 	--spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif;
 	--spectrum-cjk-font: var(--spectrum-code-font-family-stack);
-	--spectrum-docs-static-white-background-color-rgb: 15, 121, 125;
-	--spectrum-docs-static-white-background-color: rgba(var(--spectrum-docs-static-white-background-color-rgb));
-	--spectrum-docs-static-black-background-color-rgb: 181, 209, 211;
-	--spectrum-docs-static-black-background-color: rgba(var(--spectrum-docs-static-black-background-color-rgb));
+	--spectrum-examples-gradient: linear-gradient(45deg, var(--spectrum-magenta-1500), var(--spectrum-blue-1500));
+	--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));
 	--spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white);
 	--spectrum-corner-radius-1000: 9999px;
 }

tokens/dist/index.css

@@ -1535,10 +1535,9 @@
 	--spectrum-font-size: var(--spectrum-font-size-100);
 	--spectrum-cjk-font-family-stack: adobe-clean-han-japanese, var(--spectrum-cjk-font-family), sans-serif;
 	--spectrum-cjk-font: var(--spectrum-code-font-family-stack);
-	--spectrum-docs-static-white-background-color-rgb: 15, 121, 125;
-	--spectrum-docs-static-white-background-color: rgba(var(--spectrum-docs-static-white-background-color-rgb));
-	--spectrum-docs-static-black-background-color-rgb: 181, 209, 211;
-	--spectrum-docs-static-black-background-color: rgba(var(--spectrum-docs-static-black-background-color-rgb));
+	--spectrum-examples-gradient: linear-gradient(45deg, var(--spectrum-magenta-1500), var(--spectrum-blue-1500));
+	--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));
 	--spectrum-coach-indicator-ring-static-white-color: var(--spectrum-white);
 	--spectrum-corner-radius-1000: 9999px;
 }