Merge branch 'main' into fix-tokens-windows-build

.github/actions/file-diff/index.js

@@ -117,52 +117,48 @@ async function run() {
 				""
 			);
 
-			sections.map(({ name, filePath, headMainSize, baseMainSize, hasChange, mainFile, fileMap }) => {
+			sections.map(({ name, headMainSize, baseMainSize, hasChange, mainFile, fileMap }) => {
 				if (!hasChange) return;
 
-				const data = [];
-
 				/** We only evaluate changes if there is a diff branch being used and this is the main file for the package */
 				if (hasBase) {
 					/**
 					 * If: the component folder exists in the original branch but not the PR
 					 * Or: the pull request file size is 0 or empty but the original branch has a size
-					 * Then: report that it was removed, moved, or renamed
+					 * Then: report that it was removed or moved / renamed
 					 *
-					 * Else if: the component folder exists in the PR but not the original branch
+					 * Else: report the change
+					 */
+					let currentSize;
+					if (isRemoved(headMainSize, baseMainSize)) {
+						currentSize = "🚨 deleted/moved";
+					} else {
+						currentSize = bytesToSize(headMainSize);
+					}
+
+					/**
+					 * If: the component folder exists in the PR but not the original branch
 					 * Or: the pull request file has size but the original branch does not
 					 * Then: report that it's new
 					 *
-					 * Else if: the difference between the two sizes is not 0 (i.e. there is a change)
-					 * Then: report the change
-					 *
-					 * Else: report that there is no change
+					 * Else: report the change
 					 */
-					if (
-						(existsSync(join(basePath, filePath, name)) && !existsSync(join(headPath, filePath, name)))
-					) {
-						data.push("🚨 deleted, moved, or renamed");
-					} else if (
-						(existsSync(join(headPath, filePath, name)) && !existsSync(join(basePath, filePath, name)))
-					) {
-						data.push("🎉 new");
-					} else if (
-						((Math.abs(difference(headMainSize, baseMainSize))) / 1000) >= 0.001
-					) {
-						data.push(printChange(headMainSize, baseMainSize));
+					let comparison;
+					if (isNew(headMainSize, baseMainSize)) {
+						comparison = "🎉 new";
+					} else {
+						comparison = printChange(headMainSize, baseMainSize);
 					}
 
-					if (data.length > 0) {
-						summaryTable.push([name, bytesToSize(headMainSize), data]);
-					}
+					summaryTable.push([name, currentSize, comparison]);
 				}
 
 
 				const md = ["", `#### ${name}`, ""];
 				md.push(
 					...[
-						["File", "Head", ...(hasBase ? ["Base", "Δ"] : [])],
-						[" - ", " - ", ...(hasBase ? [" - ", " - "] : [])],
+						["Filename", "Head", ...(hasBase ? ["Compared to base"] : [])],
+						[" - ", " - ", ...(hasBase ? [" - "] : [])],
 					].map((row) => `| ${row.join(" | ")} |`),
 					...[...fileMap.entries()]
 						.reduce(
@@ -172,16 +168,24 @@ async function run() {
 							) => {
 								// @todo readable filename can be linked to html diff of the file?
 								// https://github.com/adobe/spectrum-css/pull/2093/files#diff-6badd53e481452b5af234953767029ef2e364427dd84cdeed25f5778b6fca2e6
+
+								// table is an array containing the printable data for the markdown table
+								if (readableFilename.endsWith(".map")) return table;
+
+								const removedOnBranch = isRemoved(headByteSize, baseByteSize);
+								// @todo should there be any normalization before comparing the file names?
+								const isMainFile = readableFilename === mainFile;
+								const size = removedOnBranch ? " - " : bytesToSize(headByteSize);
+								const delta = `${printChange(headByteSize, baseByteSize)}${difference(baseByteSize, headByteSize) !== 0 ? ` (${printPercentChange(headByteSize , baseByteSize)})` : ""}`;
+
 								return [
 									...table,
 									[
-										readableFilename === mainFile ? `**${readableFilename}**` : readableFilename,
+										// Bold the main file to help it stand out
+										isMainFile ? `**${readableFilename}**` : readableFilename,
 										// If the file was removed, note it's absense with a dash; otherwise, note it's size
-										isRemoved(headByteSize, baseByteSize) ? " - " : bytesToSize(headByteSize),
-										...(hasBase ? [
-											bytesToSize(baseByteSize),
-											isRemoved(headByteSize, baseByteSize) ? "🚨 deleted, moved, or renamed" : isNew(headByteSize, baseByteSize) ? "🎉 **new**" : `${printChange(headByteSize, baseByteSize)}${difference(headByteSize, baseByteSize) !== 0 ? ` (${printPercentChange(headByteSize , baseByteSize)})` : ""}`,
-										] : []),
+										size,
+										...(hasBase ? [delta] : []),
 									]
 								];
 							},
@@ -282,7 +286,7 @@ const printChange = function (v1, v0) {
 	const d = difference(v1, v0);
 	return d === 0
 		? `-`
-		: `${d > 0 ? "⬆" : "⬇"} ${bytesToSize(Math.abs(d))}`;
+		: `${d > 0 ? "🔴 ⬆" : "🟢 ⬇"} ${bytesToSize(Math.abs(d))}`;
 };
 
 /**

.github/actions/file-diff/package.json

@@ -11,7 +11,7 @@
     "@actions/core": "^1.10.1",
     "@actions/github": "^6.0.0",
     "@actions/glob": "^0.5.0",
-    "diff": "^5.2.0",
+    "diff": "^7.0.0",
     "diff2html": "^3.4.48"
   },
   "keywords": [

.github/workflows/vrt.yml

@@ -4,6 +4,8 @@ on:
     push:
       branches:
         - main
+        - "!changeset-release/**"
+        - "!dependabot/**"
     workflow_dispatch:
     workflow_call:
         inputs:
@@ -23,12 +25,12 @@ permissions:
 
 jobs:
     vrt:
+        if: ${{!startsWith(github.ref, 'refs/heads/dependabot/') && !startsWith(github.ref, 'refs/heads/changeset-release/') }}
         name: Chromatic
         runs-on: ubuntu-latest
         timeout-minutes: 20
         outputs:
-            storybook-url: ${{ steps.chromatic.outputs.storybookUrl != 'undefined' && steps.chromatic.outputs.storybookUrl || '' }}
-
+          storybook-url: ${{ steps.chromatic.outputs.storybookUrl != 'undefined' && steps.chromatic.outputs.storybookUrl || '' }}
         steps:
             - name: Check out code
               uses: actions/checkout@v4

.prettierignore

@@ -5,7 +5,6 @@
 **/node_modules
 
 # Static utility assets
-tokens/custom-*/*.css
 site/includes/*.js
 
 # Compiled and generated files

.storybook/CHANGELOG.md

@@ -1,5 +1,40 @@
 # Change Log
 
+## 10.11.6
+
+### Patch Changes
+
+- Updated dependencies [[`092aac5`](https://github.com/adobe/spectrum-css/commit/092aac56953f4c02cd5227e3f61c6cb0b2b4e46a)]:
+  - @spectrum-css/table@6.1.4
+
+## 10.11.5
+
+### Patch Changes
+
+- Updated dependencies [[`4b818e1`](https://github.com/adobe/spectrum-css/commit/4b818e1062202e404de1350938ce2a19146aa0b0)]:
+  - @spectrum-css/tokens@14.6.0
+
+## 10.11.4
+
+### Patch Changes
+
+- Updated dependencies [[`47f23a7`](https://github.com/adobe/spectrum-css/commit/47f23a762a5c84ffe3c82e7e1b0c4c9d5dc60f86)]:
+  - @spectrum-css/tokens@14.5.0
+
+## 10.11.3
+
+### Patch Changes
+
+- Updated dependencies [[`7d41874`](https://github.com/adobe/spectrum-css/commit/7d418746362e7fe35f47e67e30682d7bf87ecfc7)]:
+  - @spectrum-css/tokens@14.4.0
+
+## 10.11.2
+
+### Patch Changes
+
+- Updated dependencies [[`b16a159`](https://github.com/adobe/spectrum-css/commit/b16a159bd8b1456b384f13f51ab0cdb318a692e8)]:
+  - @spectrum-css/tokens@14.3.2
+
 ## 10.11.1
 
 ### Patch Changes

.storybook/assets/base.css

@@ -1,3 +1,5 @@
+/* stylelint-disable selector-class-pattern -- Targeting pre-defined Storybook classes */
+
 /*!
  * Copyright 2024 Adobe. All rights reserved.
  *
@@ -11,7 +13,6 @@
  * governing permissions and limitations under the License.
  */
 
-/* stylelint-disable selector-class-pattern */
 body {
 	--spectrum-font-family: var(--spectrum-sans-font-family-stack);
 	--spectrum-font-style: var(--spectrum-default-font-style);
@@ -23,8 +24,8 @@ body {
 	font-size: var(--spectrum-font-size);
 	font-style: var(--spectrum-font-style);
 
-	color: var(--spectrum-neutral-content-color-default);
-	background-color: var(--spectrum-background-layer-2-color);
+	color: var(--spectrum-neutral-content-color-default, rgb(34, 34, 34));
+	background-color: var(--spectrum-background-base-color, rgb(230, 230, 230));
 }
 
 .spectrum {
@@ -39,8 +40,8 @@ svg:has(symbol):not(:has(use)) {
 }
 
 /* --- DOCS STYLES --- */
-.innerZoomElementWrapper .sb-story {
-	padding: 10px !important;
+.docs-story > *:first-child {
+	overflow: hidden;
 }
 
 /* Make sure heading provided by <Stories/> doc block uses styles consistent with the default H2. */
@@ -55,12 +56,6 @@ svg:has(symbol):not(:has(use)) {
 	border-block-end: 1px solid hsla(203deg, 50%, 30%, 15%);
 }
 
-/* This is the container Chromatic uses to determine the height and width of the story */
-#storybook-root {
-	inline-size: max-content;
-	max-inline-size: 100%;
-}
-
 /* Force the modal wrapper to be contained by the frame not the viewport */
 #root-inner {
 	.spectrum-Modal-wrapper {
@@ -73,4 +68,5 @@ svg:has(symbol):not(:has(use)) {
 	story view), due to Storybook's inline style that sets overflow: auto */
 	overflow: visible !important;
 }
+
 /* stylelint-enable selector-class-pattern */

.storybook/assets/index.css

@@ -1,3 +1,5 @@
+/* stylelint-disable selector-class-pattern -- Targeting pre-defined Storybook classes */
+
 /*!
  * Copyright 2024 Adobe. All rights reserved.
  *
@@ -11,7 +13,6 @@
  * governing permissions and limitations under the License.
  */
 
-/* stylelint-disable selector-class-pattern */
 body {
 	--spectrum-font-family-ar: myriad-arabic, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
 	--spectrum-font-family-he: myriad-hebrew, adobe-clean, "Source Sans Pro", -apple-system, blinkmacsystemfont, "Segoe UI", roboto, ubuntu, "Trebuchet MS", "Lucida Grande", sans-serif;
@@ -66,6 +67,15 @@ nav .spectrum-Site-logo {
 	padding: 20px !important;
 }
 
+/* Hide that first divider line in the top navigation */
+div.sb-bar > div > div > span:first-child {
+	display: none;
+}
+
+div.sb-bar > div > div > div > button {
+	background-color: white !important;
+}
+
 .docblock-argstable-body tr td {
 	letter-spacing: unset;
 	font-size: 11px;
@@ -118,4 +128,5 @@ select:focus,
 	border-color: rgb(2, 101, 220) !important;
 	box-shadow: rgb(2, 101, 220) 0 0 0 1px inset !important;
 }
+
 /* stylelint-enable selector-class-pattern */