chore(deps): update dependency @adobe/spectrum-tokens to ^13.12.0 (spectrum-two)

.changeset/few-tigers-say.md

@@ -0,0 +1,105 @@
+---
+"@spectrum-css/tokens": minor
+---
+
+Updated from [@adobe/spectrum-tokens](https://github.com/adobe/spectrum-tokens) [13.10.1](https://github.com/adobe/spectrum-tokens/releases/tag/%40adobe/spectrum-tokens%4013.10.1) -> [13.12.0](https://github.com/adobe/spectrum-tokens/releases/tag/%40adobe/spectrum-tokens%4013.12.0).
+
+### Newly deprecated
+
+- `--spectrum-card-minimum-width`: This token has been deprecated, use `--spectrum-card-minimum-width-default` instead.
+- `--spectrum-tree-view-item-to-item`: This token has been deprecated, use `--spectrum-tree-view-item-to-item-default` instead.
+
+### Newly added
+
+| Token name                                       | Token value                            |
+| ------------------------------------------------ | -------------------------------------- |
+| `--spectrum-component-xs-regular-font-family`    | `--spectrum-sans-serif-font-family`    |
+| `--spectrum-component-xs-regular-font-size`      | `--spectrum-font-size-50`              |
+| `--spectrum-component-xs-regular-font-weight`    | `--spectrum-regular-font-weight`       |
+| `--spectrum-component-xs-regular-letter-spacing` | `--spectrum-letter-spacing`            |
+| `--spectrum-component-xs-regular-line-height`    | `--spectrum-line-height-font-size-50`  |
+| `--spectrum-component-xs-medium-font-family`     | `--spectrum-sans-serif-font-family`    |
+| `--spectrum-component-xs-medium-font-size`       | `--spectrum-font-size-50`              |
+| `--spectrum-component-xs-medium-font-weight`     | `--spectrum-medium-font-weight`        |
+| `--spectrum-component-xs-medium-letter-spacing`  | `--spectrum-letter-spacing`            |
+| `--spectrum-component-xs-medium-line-height`     | `--spectrum-line-height-font-size-50`  |
+| `--spectrum-component-xs-bold-font-family`       | `--spectrum-sans-serif-font-family`    |
+| `--spectrum-component-xs-bold-font-size`         | `--spectrum-font-size-50`              |
+| `--spectrum-component-xs-bold-font-weight`       | `--spectrum-bold-font-weight`          |
+| `--spectrum-component-xs-bold-letter-spacing`    | `--spectrum-letter-spacing`            |
+| `--spectrum-component-xs-bold-line-height`       | `--spectrum-line-height-font-size-50`  |
+| `--spectrum-component-s-regular-font-family`     | `--spectrum-sans-serif-font-family`    |
+| `--spectrum-component-s-regular-font-size`       | `--spectrum-font-size-75`              |
+| `--spectrum-component-s-regular-font-weight`     | `--spectrum-regular-font-weight`       |
+| `--spectrum-component-s-regular-letter-spacing`  | `--spectrum-letter-spacing`            |
+| `--spectrum-component-s-regular-line-height`     | `--spectrum-line-height-font-size-75`  |
+| `--spectrum-component-s-medium-font-family`      | `--spectrum-sans-serif-font-family`    |
+| `--spectrum-component-s-medium-font-size`        | `--spectrum-font-size-75`              |
+| `--spectrum-component-s-medium-font-weight`      | `--spectrum-medium-font-weight`        |
+| `--spectrum-component-s-medium-letter-spacing`   | `--spectrum-letter-spacing`            |
+| `--spectrum-component-s-medium-line-height`      | `--spectrum-line-height-font-size-75`  |
+| `--spectrum-component-s-bold-font-family`        | `--spectrum-sans-serif-font-family`    |
+| `--spectrum-component-s-bold-font-size`          | `--spectrum-font-size-75`              |
+| `--spectrum-component-s-bold-font-weight`        | `--spectrum-bold-font-weight`          |
+| `--spectrum-component-s-bold-letter-spacing`     | `--spectrum-letter-spacing`            |
+| `--spectrum-component-s-bold-line-height`        | `--spectrum-line-height-font-size-75`  |
+| `--spectrum-component-m-regular-font-family`     | `--spectrum-sans-serif-font-family`    |
+| `--spectrum-component-m-regular-font-size`       | `--spectrum-font-size-100`             |
+| `--spectrum-component-m-regular-font-weight`     | `--spectrum-regular-font-weight`       |
+| `--spectrum-component-m-regular-letter-spacing`  | `--spectrum-letter-spacing`            |
+| `--spectrum-component-m-regular-line-height`     | `--spectrum-line-height-font-size-100` |
+| `--spectrum-component-m-medium-font-family`      | `--spectrum-sans-serif-font-family`    |
+| `--spectrum-component-m-medium-font-size`        | `--spectrum-font-size-100`             |
+| `--spectrum-component-m-medium-font-weight`      | `--spectrum-medium-font-weight`        |
+| `--spectrum-component-m-medium-letter-spacing`   | `--spectrum-letter-spacing`            |
+| `--spectrum-component-m-medium-line-height`      | `--spectrum-line-height-font-size-100` |
+| `--spectrum-component-m-bold-font-family`        | `--spectrum-sans-serif-font-family`    |
+| `--spectrum-component-m-bold-font-size`          | `--spectrum-font-size-100`             |
+| `--spectrum-component-m-bold-font-weight`        | `--spectrum-bold-font-weight`          |
+| `--spectrum-component-m-bold-letter-spacing`     | `--spectrum-letter-spacing`            |
+| `--spectrum-component-m-bold-line-height`        | `--spectrum-line-height-font-size-100` |
+| `--spectrum-component-l-regular-font-family`     | `--spectrum-sans-serif-font-family`    |
+| `--spectrum-component-l-regular-font-size`       | `--spectrum-font-size-200`             |
+| `--spectrum-component-l-regular-font-weight`     | `--spectrum-regular-font-weight`       |
+| `--spectrum-component-l-regular-letter-spacing`  | `--spectrum-letter-spacing`            |
+| `--spectrum-component-l-regular-line-height`     | `--spectrum-line-height-font-size-200` |
+| `--spectrum-component-l-medium-font-family`      | `--spectrum-sans-serif-font-family`    |
+| `--spectrum-component-l-medium-font-size`        | `--spectrum-font-size-200`             |
+| `--spectrum-component-l-medium-font-weight`      | `--spectrum-medium-font-weight`        |
+| `--spectrum-component-l-medium-letter-spacing`   | `--spectrum-letter-spacing`            |
+| `--spectrum-component-l-medium-line-height`      | `--spectrum-line-height-font-size-200` |
+| `--spectrum-component-l-bold-font-family`        | `--spectrum-sans-serif-font-family`    |
+| `--spectrum-component-l-bold-font-size`          | `--spectrum-font-size-200`             |
+| `--spectrum-component-l-bold-font-weight`        | `--spectrum-bold-font-weight`          |
+| `--spectrum-component-l-bold-letter-spacing`     | `--spectrum-letter-spacing`            |
+| `--spectrum-component-l-bold-line-height`        | `--spectrum-line-height-font-size-200` |
+| `--spectrum-component-xl-regular-font-family`    | `--spectrum-sans-serif-font-family`    |
+| `--spectrum-component-xl-regular-font-size`      | `--spectrum-font-size-300`             |
+| `--spectrum-component-xl-regular-font-weight`    | `--spectrum-regular-font-weight`       |
+| `--spectrum-component-xl-regular-letter-spacing` | `--spectrum-letter-spacing`            |
+| `--spectrum-component-xl-regular-line-height`    | `--spectrum-line-height-font-size-300` |
+| `--spectrum-component-xl-medium-font-family`     | `--spectrum-sans-serif-font-family`    |
+| `--spectrum-component-xl-medium-font-size`       | `--spectrum-font-size-300`             |
+| `--spectrum-component-xl-medium-font-weight`     | `--spectrum-medium-font-weight`        |
+| `--spectrum-component-xl-medium-letter-spacing`  | `--spectrum-letter-spacing`            |
+| `--spectrum-component-xl-medium-line-height`     | `--spectrum-line-height-font-size-300` |
+| `--spectrum-component-xl-bold-font-family`       | `--spectrum-sans-serif-font-family`    |
+| `--spectrum-component-xl-bold-font-size`         | `--spectrum-font-size-300`             |
+| `--spectrum-component-xl-bold-font-weight`       | `--spectrum-bold-font-weight`          |
+| `--spectrum-component-xl-bold-letter-spacing`    | `--spectrum-letter-spacing`            |
+| `--spectrum-component-xl-bold-line-height`       | `--spectrum-line-height-font-size-300` |
+| `--spectrum-component-padding-vertical-50`       | `3px` (desktop) and `5px` (mobile)     |
+| `--spectrum-component-padding-vertical-75`       | `4px` (desktop) and `5px` (mobile)     |
+| `--spectrum-component-padding-vertical-100`      | `7px` (desktop) and `9px` (mobile)     |
+| `--spectrum-component-padding-vertical-200`      | `10px` (desktop) and `13px` (mobile)   |
+| `--spectrum-component-padding-vertical-300`      | `13px` (desktop) and `17px` (mobile)   |
+| `--spectrum-card-minimum-width-default`          | `100px`                                |
+| `--spectrum-tree-view-item-to-item-default`      | `-1px`                                 |
+
+### Updated
+
+- `--spectrum-sans-serif-font-family`: `Adobe Clean` -> `Adobe Clean Spectrum VF`
+- `--spectrum-accordion-top-to-text-compact-medium`: `5px` -> `8px`
+- `--spectrum-accordion-top-to-text-spacious-medium`: `16px` -> `13px` (desktop) and `19px` -> `15px` (mobile)
+- `--spectrum-accordion-focus-indicator-gap`: `0px` -> `2px`
+- `--spectrum-accordion-top-to-text-medium`: `12px` -> `9px` (desktop) and `16px` -> `10px` (mobile)

.github/workflows/development.yml

@@ -199,7 +199,7 @@ jobs:
         if: ${{ contains(github.event.pull_request.labels.*.name, 'run_vrt') || ((github.event.pull_request.draft != true || contains(github.event.pull_request.labels.*.name, 'run_ci')) && github.event.pull_request.mergeable == true) }}
         uses: ./.github/workflows/vrt.yml
         with:
-            skip: ${{ github.base_ref == 'spectrum-two' || contains(github.event.pull_request.labels.*.name, 'skip_vrt') }}
+            skip: ${{ contains(github.event.pull_request.labels.*.name, 'skip_vrt') }}
         secrets: inherit
 
     # -------------------------------------------------------------

package.json

@@ -29,7 +29,7 @@
 		"cleaner": "nx run-many --target clean --projects",
 		"compare": "cross-env NODE_ENV=production yarn bundle && yarn component:compare",
 		"component:build": "node --no-warnings ./tasks/component-builder.js",
-		"component:compare": "node --no-warnings ./tasks/component-compare.js",
+		"component:compare": "node --no-warnings ./tasks/component-compare.js --tag next",
 		"component:report": "node --no-warnings ./tasks/component-reporter.js",
 		"dev": "cross-env NODE_ENV=development nx run storybook:build:docs",
 		"docs:report": "yarn report",

tasks/component-compare.js

@@ -145,6 +145,7 @@ async function generateDiff({
 async function fetchPublishedComponent(packageName, {
 	cacheLocation,
 	outputLocation,
+	baseTag = "latest",
 }) {
 	const warnings = [];
 	let tag;
@@ -157,10 +158,9 @@ async function fetchPublishedComponent(packageName, {
 			warnings.push(err ?? `Failed to fetch ${packageName.yellow} from npm.\n`);
 		})) ?? {};
 
-	// If the component exists on npm, fetch the latest release data
-	// @todo what is the fallback if there isn't a latest tag?
-	if (npmData["dist-tags"]?.latest) {
-		tag = npmData["dist-tags"]?.latest;
+	// If the component exists on npm, fetch the base release data
+	if (npmData["dist-tags"]?.[baseTag]) {
+		tag = npmData["dist-tags"]?.[baseTag];
 	}
 
 	if (!tag) return;
@@ -206,12 +206,13 @@ async function processComponent(
 		cwd,
 		output = pathing.output,
 		cacheLocation = pathing.cache,
-	}
+		tag,
+	} = {}
 ) {
 	if (!component) return Promise.reject("No component specified.");
 
 	cleanAndMkdir(join(output, "diffs", component));
-	cleanAndMkdir(join(pathing.latest, component));
+	cleanAndMkdir(join(pathing.base, component));
 
 	const pkgPath = require.resolve(`@spectrum-css/${component}/package.json`) ?? join(cwd, component, "package.json");
 	const pkg = pkgPath && existsSync(pkgPath)
@@ -248,25 +249,26 @@ async function processComponent(
 		);
 	}
 
-	let tag = "latest";
+	let foundTag;
 	if (pkg?.name) {
 		const npmResults = await fetchPublishedComponent(pkg.name, {
 			cacheLocation,
-			outputLocation: join(pathing.latest, component),
+			outputLocation: join(pathing.base, component),
+			baseTag: tag,
 		});
 
 		if (npmResults?.tag) {
-			tag = npmResults.tag;
+			foundTag = npmResults.tag;
 		}
 
 		if (npmResults?.warnings?.length > 0) {
 			warnings.push(...npmResults.warnings);
 		}
 
-		if (existsSync(join(pathing.latest, component))) {
+		if (existsSync(join(pathing.base, component))) {
 			const files =
 				(await fg("**/*.css", {
-					cwd: join(pathing.latest, component),
+					cwd: join(pathing.base, component),
 				})) ?? [];
 
 			if (files.length > 0) found++;
@@ -292,7 +294,7 @@ async function processComponent(
 			processFile(
 				filename,
 				join(cwd, component, "dist"),
-				join(pathing.latest, component)
+				join(pathing.base, component)
 			)
 		)
 	).then((results) => {
@@ -304,7 +306,7 @@ async function processComponent(
 		return {
 			component,
 			warnings,
-			tag,
+			tag: foundTag,
 			pkg,
 			fileMap,
 		};
@@ -353,7 +355,7 @@ async function processFile(filename, localPath, comparePath) {
 async function main(
 	components,
 	output,
-	{ skipCache = false } = {}
+	{ skipCache = false, tag = "latest" } = {}
 ) {
 	if (!components || components.length === 0) {
 		components = getAllComponentNames(false);
@@ -364,7 +366,7 @@ async function main(
 
 	pathing.output = output;
 	pathing.cache = join(output, "packages");
-	pathing.latest = join(output, "latest");
+	pathing.base = join(output, "base");
 
 	/** Setup the folder structure */
 	cleanAndMkdir(pathing.output);
@@ -373,7 +375,7 @@ async function main(
 	// unless we want to re-fetch the tarballs
 	cleanAndMkdir(pathing.cache, skipCache);
 
-	cleanAndMkdir(pathing.latest);
+	cleanAndMkdir(pathing.base);
 
 	const promises = [];
 	// Copy the bundled CSS to the output directory
@@ -391,14 +393,15 @@ async function main(
 
 	/**
 	 * Each component will report on it's file structure locally when compared
-	 * against it's latest tag on npm; then a console report will be logged and
+	 * against the base tag on npm; then a console report will be logged and
 	 * a visual diff generated for each file that has changed.
 	 */
 	const results = await Promise.all([
 		...(components.map(async (component) => {
 			return processComponent(component, {
 				output: pathing.output,
 				cacheLocation: pathing.cache,
+				tag,
 			}).catch((err) =>
 				Promise.resolve({
 					component,
@@ -435,7 +438,7 @@ async function main(
 	for (const {
 		component,
 		warnings = [],
-		tag,
+		tag: foundTag,
 		pkg = {},
 		fileMap = new Map(),
 	} of results) {
@@ -453,7 +456,7 @@ async function main(
 
 		componentData.set(component, {
 			pkg,
-			tag,
+			tag: foundTag,
 			files: fileMap,
 		});
 
@@ -471,7 +474,7 @@ async function main(
 
 		// Write a table of the file sizes to the console for easy comparison
 		cliOutput.push(
-			writeConsoleTable(["Filename", "Local", `Tag v${tag}`], { min: 15, max: maxColumnWidth + 5})
+			writeConsoleTable(["Filename", "Local", `Tag v${foundTag}`], { min: 15, max: maxColumnWidth + 5})
 		);
 
 		files.forEach(async (file) => {
@@ -552,9 +555,10 @@ let {
 	_: components,
 	output = join(dirs.root, ".diff-output"),
 	cache = true,
+	tag = "latest",
 	// @todo allow to run against local main or published versions
 } = yargs(hideBin(process.argv)).argv;
 
-main(components, output, { skipCache: !cache }).then((code) => {
+main(components, output, { skipCache: !cache, tag }).then((code) => {
 	process.exit(code);
 });

tokens/CHANGELOG.md

@@ -4,17 +4,19 @@
 
 ### Patch Changes
 
-- [#3969](https://github.com/adobe/spectrum-css/pull/3969) [`d952e0c`](https://github.com/adobe/spectrum-css/commit/d952e0c4d234f5e742432fe906965a52a50b228e) Thanks [@renovate](https://github.com/apps/renovate)! - Updated from [@adobe/spectrum-tokens](https://github.com/adobe/spectrum-tokens) v13.10.0 -> [13.10.1](https://github.com/adobe/spectrum-tokens/releases/tag/%40adobe/spectrum-tokens%4013.10.1).
+- [#3969](https://github.com/adobe/spectrum-css/pull/3969) [`d952e0c`](https://github.com/adobe/spectrum-css/commit/d952e0c4d234f5e742432fe906965a52a50b228e) Thanks [@renovate](https://github.com/apps/renovate)!
 
-  - [#517](https://github.com/adobe/spectrum-tokens/pull/517) [`8f8f8a6`](https://github.com/adobe/spectrum-tokens/commit/8f8f8a60b7adf5105ced4f914cf30928117ddc5e) Thanks [@larz0](https://github.com/larz0)!
+Updated from [@adobe/spectrum-tokens](https://github.com/adobe/spectrum-tokens) v13.10.0 -> [13.10.1](https://github.com/adobe/spectrum-tokens/releases/tag/%40adobe/spectrum-tokens%4013.10.1).
 
-  #### Updated tokens
+- [#517](https://github.com/adobe/spectrum-tokens/pull/517) [`8f8f8a6`](https://github.com/adobe/spectrum-tokens/commit/8f8f8a60b7adf5105ced4f914cf30928117ddc5e) Thanks [@larz0](https://github.com/larz0)!
 
-  - `accordion-focus-indicator-gap`
-    - value: `0px` -> `2px`
-  - `accordion-top-to-text-medium`
-    - desktop.value: `12px` -> `9px`
-    - mobile.value: `16px` -> `10px`
+#### Updated tokens
+
+- `accordion-focus-indicator-gap`
+  - value: `0px` -> `2px`
+- `accordion-top-to-text-medium`
+  - desktop.value: `12px` -> `9px`
+  - mobile.value: `16px` -> `10px`
 
 ## 16.1.0-next.4
 
@@ -3060,7 +3062,6 @@ New JSON format! The new `tokens/dist/json/tokens.json` asset provides a queryab
 📝 [#3359](https://github.com/adobe/spectrum-css/pull/3359) [`c8194b0`](https://github.com/adobe/spectrum-css/commit/c8194b0a5b6e115d7db680f287eb8a2a9709906b) Thanks [@cdransf](https://github.com/cdransf)!
 
 - This resolves our remaining stylelint issues around undefined tokens, rule order, unused values and color syntax.
-
   - Updates invalid color syntax from `rgba(N, N, N, N)` to `rgba(N N N / N)`.
   - In cases of duplicate properties, preserves the property that would be applied given current code structure.
   - Updates misnamed tokens to use valid tokens (`table/index.css`).

tokens/custom/dark-vars.css

@@ -12,18 +12,13 @@
  */
 
 /* This file contains overrides and additions to core tokens */
-
 .spectrum--dark {
-	/* stylelint-disable-next-line custom-property-pattern -- context identification */
-	--color-scheme: dark;
-
 	/** COMPONENT-SPECIFIC OVERRIDES **/
 	--spectrum-assetcard-border-color-selected: var(--spectrum-blue-800);
 	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-800);
 	--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-900);
 	--spectrum-assetcard-selectionindicator-background-color-ordered: var(--spectrum-blue-800);
 	--spectrum-assestcard-focus-indicator-color: var(--spectrum-blue-700);
-
 	--spectrum-assetlist-item-background-color-selected-hover: rgb(var(--spectrum-blue-800-rgb), 0.25);
 	--spectrum-assetlist-item-background-color-selected: rgb(var(--spectrum-blue-800-rgb), 0.15);
 	--spectrum-assetlist-border-color-key-focus: var(--spectrum-blue-700);
@@ -61,4 +56,6 @@
 
 	--spectrum-treeview-item-background-color-quiet-selected: rgb(var(--spectrum-gray-900-rgb), 0.07);
 	--spectrum-treeview-item-background-color-selected: rgb(var(--spectrum-blue-800-rgb), 0.15);
+
+	color-scheme: dark;
 }

tokens/custom/global-vars.css

@@ -13,8 +13,6 @@
 
 /* This file contains overrides and additions to core tokens */
 .spectrum {
-	--system: spectrum;
-
 	--spectrum-animation-duration-0: 0ms;
 	--spectrum-animation-duration-100: 130ms;
 	--spectrum-animation-duration-200: 160ms;

tokens/custom/large-vars.css

@@ -12,9 +12,7 @@
  */
 
 /* This file contains overrides and additions to core tokens */
-
 .spectrum--large {
-	/* stylelint-disable-next-line custom-property-pattern -- context identification */
 	--scale: large;
 
 	--spectrum-alert-banner-close-button-spacing: var(--spectrum-spacing-200);

tokens/custom/light-vars.css

@@ -13,9 +13,6 @@
 
 /* This file contains overrides and additions to core tokens */
 .spectrum--light {
-	/* stylelint-disable-next-line custom-property-pattern -- context identification */
-	--color-scheme: light;
-
 	--spectrum-assetcard-border-color-selected: var(--spectrum-blue-900);
 	--spectrum-assetcard-border-color-selected-hover: var(--spectrum-blue-900);
 	--spectrum-assetcard-border-color-selected-down: var(--spectrum-blue-1000);
@@ -59,4 +56,6 @@
 
 	--spectrum-treeview-item-background-color-quiet-selected: rgb(var(--spectrum-gray-900-rgb), 0.06);
 	--spectrum-treeview-item-background-color-selected: rgb(var(--spectrum-blue-900-rgb), 0.1);
+
+	color-scheme: light;
 }