chore: release (s2-foundations) (#3142)

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
adobe · Sep 24, 2024 · fb29521 · fb29521
1 parent a137269
commit fb29521
Show file tree

Hide file tree

Showing 20 changed files with 64 additions and 62 deletions.
diff --git a/.changeset/pre.json b/.changeset/pre.json
@@ -145,6 +145,7 @@
     "sharp-pianos-reply",
     "sharp-rice-sing",
     "sharp-vans-flow",
+    "shiny-balloons-remember",
     "shiny-peaches-change",
     "short-carrots-film",
     "silent-carpets-beam",

diff --git a/.storybook/blocks/ComponentDetails.jsx b/.storybook/blocks/ComponentDetails.jsx
@@ -148,7 +148,7 @@ function processReleaseData(storyMeta, npmData) {
 	].filter(tag => !ignoredTags.includes(tag));
 
 	// Create a robust fallback stack to capture the version number
-	const fallbackVersion = packageJson?.version ?? storyMeta?.csfFile?.meta?.parameters?.componentVersion;
+	const fallbackVersion = packageJson?.version;
 
 	const mapVersions = new Map();
 	for (const tag of tags) {

diff --git a/.storybook/decorators/context.js b/.storybook/decorators/context.js
@@ -17,17 +17,15 @@ export const withContextWrapper = makeDecorator({
 				rootClass,
 				staticColor,
 			} = {},
-			globals = {},
+			globals: {
+				color = "light",
+				context = "spectrum",
+				scale = "medium",
+			},
 			id,
 			viewMode,
 		} = data;
 
-		let {
-			color = "light",
-			context = "spectrum",
-			scale = "medium",
-		} = globals;
-
 		const staticColorSettings = {
 			"black": {
 				background: "var(--spectrum-docs-static-black-background-color)",

diff --git a/.storybook/modes/index.js b/.storybook/modes/index.js
@@ -20,12 +20,18 @@ const modes = {
     },
     "Context: Spectrum 1": {
         scale: "medium",
+        color: "light",
+        textDirection: "ltr",
         context: "legacy",
     },
     "Context: Express": {
+        scale: "medium",
+        color: "light",
+        textDirection: "ltr",
         context: "express",
     },
     "Dark | RTL": {
+        scale: "medium",
         color: "dark",
         textDirection: "rtl",
         context: "legacy",

diff --git a/components/well/index.css b/components/well/index.css
@@ -16,7 +16,7 @@
 .spectrum-Well {
 	text-align: start;
 	display: block;
-	min-inline-size: var(--mod-well-min-width, var(--spectrum-well-min-width));
+	min-inline-size: var(--mod-well-min-width, var(--spectrum-well-minimum-width));
 	padding: var(--mod-well-padding, var(--spectrum-well-padding));
 	margin-block-start: var(--mod-well-margin-top, var(--spectrum-well-margin-top));
 	border-width: var(--mod-well-border-width, var(--spectrum-well-border-width));

diff --git a/components/well/themes/spectrum-two.css b/components/well/themes/spectrum-two.css
@@ -14,7 +14,12 @@
 @container style(--system: spectrum) {
 	.spectrum-Well {
 		--spectrum-well-border-width: var(--spectrum-border-width-100);
+		--spectrum-well-border-color: rgba(var(----spectrum-gray-1000-rgb), .05);
 		--spectrum-well-content-color: var(--spectrum-body-color);
 		--spectrum-well-background-color: rgba(var(--spectrum-gray-800-rgb), .02);
+		--spectrum-well-padding: var(--spectrum-spacing-300);
+		--spectrum-well-margin-top: var(--spectrum-spacing-75);
+		--spectrum-well-minimum-width: var(--spectrum-well-min-width);
+		--spectrum-well-border-radius: var(--spectrum-spacing-75);
 	}
 }
diff --git a/generator/CHANGELOG.md b/generator/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Change Log
 
+## 5.0.0-s2-foundations.7
+
+### Minor Changes
+
+- [#2786](https://github.com/adobe/spectrum-css/pull/2786) [`a4e0278`](https://github.com/adobe/spectrum-css/commit/a4e0278af07d97b668a73fabcbb18b37411ecb86) Thanks [@pfulton](https://github.com/pfulton)! - Update mdx template to include TaggedReleases and ComponentDetails
+
 ## 5.0.0-s2-foundations.6
 
 ### Major Changes

diff --git a/generator/package.json b/generator/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@spectrum-css/generator",
-	"version": "5.0.0-s2-foundations.6",
+	"version": "5.0.0-s2-foundations.7",
 	"description": "A tool to quickly create standardized components",
 	"license": "Apache-2.0",
 	"author": "Adobe",

diff --git a/generator/templates/stories/{{ folderName }}.stories.js.hbs b/generator/templates/stories/{{ folderName }}.stories.js.hbs
@@ -38,12 +38,11 @@ export default {
     actions: {
       handles: ["click .spectrum-{{ pascalCase name }}"],
     },
-    componentVersion: version,
+    packageJson: pkgJson,
     design: {
       type: "figma",
       url: "",
     },
-    componentVersion: pkgJson.version,
   }
 };
 

diff --git a/plugins/stylelint-theme-alignment/index.js b/plugins/stylelint-theme-alignment/index.js
@@ -52,10 +52,10 @@ const ruleFunction = (enabled) => {
 		const isTheme = parts[parts.length - 2] === "themes";
 		const filename = parts[parts.length - 1];
 
-		if (!isTheme || filename === "spectrum.css") return;
+		if (!isTheme || filename === "spectrum-two.css") return;
 
 		// All the parts of the source file but replace the filename with spectrum-two.css
-		const baseFile = [...parts.slice(0, -1), "spectrum.css"].join(sep);
+		const baseFile = [...parts.slice(0, -1), "spectrum-two.css"].join(sep);
 		const rootPath = parts.slice(0, -2).join(sep);
 
 		// If the base file doesn't exist, throw an error

diff --git a/tokens/custom-spectrum/custom-light-vars.css b/tokens/custom-spectrum/custom-light-vars.css
@@ -41,8 +41,6 @@
   --spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
   --spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-50);
 
-  --spectrum-well-border-color: var(--spectrum-black);
-
   --spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800);
 
   --spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.06);

diff --git a/tokens/custom/dark-vars.css b/tokens/custom/dark-vars.css
@@ -40,8 +40,6 @@
 	--spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
 	--spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-25);
 
-	--spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
-
 	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);
 
 	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.07);

diff --git a/tokens/custom/large-vars.css b/tokens/custom/large-vars.css
@@ -66,11 +66,6 @@
 	--spectrum-coachmark-menu-display: none;
 	--spectrum-coachmark-menu-mobile-display: inline-flex;
 
-	--spectrum-well-padding: 20px;
-	--spectrum-well-margin-top: 5px;
-	--spectrum-well-min-width: 300px;
-	--spectrum-well-border-radius: 5px;
-
 	/* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */
 	--spectrum-workflow-icon-size-xxl: 40px;
 	--spectrum-workflow-icon-size-xxs: 15px;

diff --git a/tokens/custom/light-vars.css b/tokens/custom/light-vars.css
@@ -39,8 +39,6 @@
 	--spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
 	--spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-25);
 
-	--spectrum-well-border-color: var(--spectrum-black-rgb);
-
 	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800);
 
 	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.06);

diff --git a/tokens/custom/medium-vars.css b/tokens/custom/medium-vars.css
@@ -65,10 +65,6 @@
 	--spectrum-coachmark-buttongroup-mobile-display: none;
 	--spectrum-coachmark-menu-display: inline-flex;
 	--spectrum-coachmark-menu-mobile-display: none;
-	--spectrum-well-padding: var(--spectrum-spacing-300);
-	--spectrum-well-margin-top: var(--spectrum-spacing-75);
-	--spectrum-well-min-width: 240px;
-	--spectrum-well-border-radius: var(--spectrum-spacing-75);
 
 	/* XXL and XXS icon sizes are not within the design spec and are planned to be deprecated in Spectrum 2. */
 	--spectrum-workflow-icon-size-xxl: 32px;

diff --git a/tokens/dist/css/components/bridge/index.css b/tokens/dist/css/components/bridge/index.css
@@ -1935,6 +1935,11 @@
 	--spectrum-underlay-background-exit-animation-delay: var(--system-underlay-background-exit-animation-delay);
 	--spectrum-underlay-background-color: var(--system-underlay-background-color);
 	--spectrum-well-border-width: var(--system-well-border-width);
+	--spectrum-well-border-color: var(--system-well-border-color);
 	--spectrum-well-content-color: var(--system-well-content-color);
 	--spectrum-well-background-color: var(--system-well-background-color);
+	--spectrum-well-padding: var(--system-well-padding);
+	--spectrum-well-margin-top: var(--system-well-margin-top);
+	--spectrum-well-minimum-width: var(--system-well-minimum-width);
+	--spectrum-well-border-radius: var(--system-well-border-radius);
 }
diff --git a/tokens/dist/css/components/express/index.css b/tokens/dist/css/components/express/index.css
@@ -3513,6 +3513,11 @@
 	--system-underlay-background-exit-animation-delay: var(--spectrum-animation-duration-200);
 	--system-underlay-background-color: rgba(var(--spectrum-black-rgb), var(--spectrum-overlay-opacity));
 	--system-well-border-width: var(--spectrum-border-width-100);
+	--system-well-border-color: rgba(var(----spectrum-gray-1000-rgb), 0.05);
 	--system-well-content-color: var(--spectrum-body-color);
 	--system-well-background-color: rgba(var(--spectrum-gray-800-rgb), 0.02);
+	--system-well-padding: var(--spectrum-spacing-300);
+	--system-well-margin-top: var(--spectrum-spacing-75);
+	--system-well-minimum-width: var(--spectrum-well-min-width);
+	--system-well-border-radius: var(--spectrum-spacing-75);
 }
diff --git a/tokens/dist/css/components/express/well.css b/tokens/dist/css/components/express/well.css
@@ -13,6 +13,11 @@
 
 .spectrum.spectrum--express {
 	--system-well-border-width: var(--spectrum-border-width-100);
+	--system-well-border-color: rgba(var(----spectrum-gray-1000-rgb), 0.05);
 	--system-well-content-color: var(--spectrum-body-color);
 	--system-well-background-color: rgba(var(--spectrum-gray-800-rgb), 0.02);
+	--system-well-padding: var(--spectrum-spacing-300);
+	--system-well-margin-top: var(--spectrum-spacing-75);
+	--system-well-minimum-width: var(--spectrum-well-min-width);
+	--system-well-border-radius: var(--spectrum-spacing-75);
 }
diff --git a/tokens/dist/index.css b/tokens/dist/index.css
@@ -718,8 +718,6 @@
 	--spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
 	--spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-25);
 
-	--spectrum-well-border-color: rgba(var(--spectrum-white-rgb), 0.05);
-
 	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-700);
 
 	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.07);
@@ -1175,9 +1173,9 @@
 	--spectrum-negative-subdued-background-color-down: var(--spectrum-negative-color-300);
 	--spectrum-negative-subdued-background-color-key-focus: var(--spectrum-negative-color-300);
 	--spectrum-default-font-family: var(--spectrum-sans-serif-font-family);
-	--spectrum-sans-serif-font-family: Adobe Clean;
-	--spectrum-serif-font-family: Adobe Clean Serif;
-	--spectrum-cjk-font-family: Adobe Clean Han;
+	--spectrum-sans-serif-font-family: adobe clean;
+	--spectrum-serif-font-family: adobe clean serif;
+	--spectrum-cjk-font-family: adobe clean han;
 	--spectrum-light-font-weight: 300;
 	--spectrum-regular-font-weight: 400;
 	--spectrum-medium-font-weight: 500;
@@ -1388,7 +1386,7 @@
 	--spectrum-detail-sans-serif-text-transform: uppercase;
 	--spectrum-detail-serif-text-transform: uppercase;
 	--spectrum-detail-color: var(--spectrum-gray-900);
-	--spectrum-code-font-family: Source Code Pro;
+	--spectrum-code-font-family: source code pro;
 	--spectrum-code-cjk-font-family: var(--spectrum-code-font-family);
 	--spectrum-code-font-weight: var(--spectrum-regular-font-weight);
 	--spectrum-code-font-style: var(--spectrum-default-font-style);
@@ -1436,13 +1434,13 @@
 	--spectrum-animation-ease-out: cubic-bezier(0, 0, 0.4, 1);
 	--spectrum-animation-ease-linear: cubic-bezier(0, 0, 1, 1);
 
-	--spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
+	--spectrum-sans-font-family-stack: adobe-clean, var(--spectrum-sans-serif-font-family), "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
 	--spectrum-sans-serif-font: var(--spectrum-sans-font-family-stack);
 
-	--spectrum-serif-font-family-stack: adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", Georgia, serif;
+	--spectrum-serif-font-family-stack: adobe-clean-serif, var(--spectrum-serif-font-family), "Source Serif Pro", georgia, serif;
 	--spectrum-serif-font: var(--spectrum-serif-font-family-stack);
 
-	--spectrum-code-font-family-stack: "Source Code Pro", Monaco, monospace;
+	--spectrum-code-font-family-stack: "Source Code Pro", monaco, monospace;
 
 	--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);
@@ -2040,11 +2038,6 @@
 	--spectrum-coachmark-buttongroup-mobile-display: flex;
 	--spectrum-coachmark-menu-display: none;
 	--spectrum-coachmark-menu-mobile-display: inline-flex;
-
-	--spectrum-well-padding: 20px;
-	--spectrum-well-margin-top: 5px;
-	--spectrum-well-min-width: 300px;
-	--spectrum-well-border-radius: 5px;
 	--spectrum-workflow-icon-size-xxl: 40px;
 	--spectrum-workflow-icon-size-xxs: 15px;
 
@@ -2801,8 +2794,6 @@
 	--spectrum-coach-indicator-ring-dark-color: var(--spectrum-gray-900);
 	--spectrum-coach-indicator-ring-light-color: var(--spectrum-gray-25);
 
-	--spectrum-well-border-color: var(--spectrum-black-rgb);
-
 	--spectrum-steplist-current-marker-color-key-focus: var(--spectrum-blue-800);
 
 	--spectrum-treeview-item-background-color-quiet-selected: rgba(var(--spectrum-gray-900-rgb), 0.06);
@@ -3426,10 +3417,6 @@
 	--spectrum-coachmark-buttongroup-mobile-display: none;
 	--spectrum-coachmark-menu-display: inline-flex;
 	--spectrum-coachmark-menu-mobile-display: none;
-	--spectrum-well-padding: var(--spectrum-spacing-300);
-	--spectrum-well-margin-top: var(--spectrum-spacing-75);
-	--spectrum-well-min-width: 240px;
-	--spectrum-well-border-radius: var(--spectrum-spacing-75);
 	--spectrum-workflow-icon-size-xxl: 32px;
 	--spectrum-workflow-icon-size-xxs: 12px;
 

diff --git a/tokens/tasks/token-rollup.js b/tokens/tasks/token-rollup.js
@@ -36,9 +36,9 @@ async function index(inputGlob, outputPath, { cwd = process.cwd(), clean = false
 	}
 
 	const inputs = await fg(inputGlob, { cwd });
-	const contents = inputs.map(input => `@import "${path.basename(input)}";`).join("\n");
+	const contents = inputs.map(input => `@import "${input}";`).join("\n");
 	if (!contents) return;
-	return processCSS(contents, inputs[0], outputPath, { cwd, clean, configPath: cwd, map: false, resolveImports: true });
+	return processCSS(contents, undefined, outputPath, { cwd, clean, configPath: cwd, map: false, resolveImports: true });
 }
 
 /**
@@ -125,7 +125,7 @@ async function appendCustomOverrides({ cwd = process.cwd() } = {}) {
 		], { cwd, shouldCombine: true });
 
 		promises.push(
-			combinedContent[0].content ? fsp.writeFile(path.join(cwd, "dist", "css", file), combinedContent[0].content) : Promise.resolve()
+			combinedContent[0].content ? writeAndReport(combinedContent[0].content, path.join(cwd, "dist", "css", file)) : Promise.resolve()
 		);
 	}
 
@@ -151,33 +151,33 @@ async function main({
 	const key = `[build] ${"@spectrum-css/tokens".cyan} index`;
 	console.time(key);
 
-	const compiledOutputPath = path.join(cwd, "dist", "css");
+	const compiledOutputPath = path.join(cwd, "dist");
 
 	return Promise.all([
 		componentTheming(),
 		// Wait for all the custom files to be processed
 		appendCustomOverrides({ cwd }),
 	]).then(async (r) => {
 		return Promise.all([
-			...["spectrum", "legacy", "express"].map(theme => index(
-				[`dist/css/components/${theme}/*.css`],
-				path.join(compiledOutputPath, "components", theme, "index.css"),
-				{ cwd, clean }
-			)),
 			index(
 				["dist/css/components/bridge/*.css"],
-				path.join(compiledOutputPath, "components", "bridge", "index.css"),
+				path.join(compiledOutputPath, "css", "components", "bridge", "index.css"),
 				{ cwd, clean }
 			),
+			...["spectrum", "legacy", "express"].map(theme => index(
+				[`dist/css/components/${theme}/*.css`],
+				path.join(compiledOutputPath, "css", "components", theme, "index.css"),
+				{ cwd, clean }
+			)),
 			index(
 				["dist/css/*-vars.css"],
-				path.join(compiledOutputPath, "index.css"),
+				path.join(compiledOutputPath, "css", "index.css"),
 				{ cwd, clean }
 			).then((reports) =>
-				copy(path.join(compiledOutputPath, "index.css"), path.join(cwd, "dist", "index.css"), { cwd, isDeprecated: false })
+				copy(path.join(compiledOutputPath, "css", "index.css"), path.join(cwd, "dist", "index.css"), { cwd, isDeprecated: false })
 					.then((reps) => [reports, reps]))
 		]).then((reports) => {
-			return [r, reports];
+			return [reports, r];
 		});
 	}).then((report) => {
 		const logs = report.flat(Infinity).filter(Boolean);