chore: update s2 branch with latest (#3679)

* chore: adds support to parse "transparent" token references (#3452)

* feat(tokens): add transparent token handling

* adds transparent mapping into rgb-mapping plugin
- custom properties that reference transparent tokens will now be mapped
to their corresponding transparent rgb/opacity tokens
- extends the work that the rgb-mapping plugin already does

* test: add plugin test cases

* chore(plugins/postcss-rgb-mapping): update README.md

* chore: add changeset

* chore: release (#3673)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

* fix(tokens): support style-dictionary build in windows env (#2500)

---------

Co-authored-by: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Author: 3 people

.gitattributes

@@ -1,3 +1,4 @@
+* text=auto eol=lf
 README.md merge=ours
 
 # Treat yarn assets as binaries for diffing

.github/workflows/build.yml

@@ -150,10 +150,15 @@ jobs:
                     echo "Changes detected"
                     git status
                     git add .
-                    git diff > changes.diff
                     exit 1
                 fi
 
+            # If there are changes, capture the changes and upload them as an artifact
+            - name: Capture changes
+              if: ${{ failure() }}
+              id: capture-changes
+              run: git diff --staged > changes.diff
+
             - name: Upload changes
               if: ${{ failure() }}
               uses: actions/upload-artifact@v4

.github/workflows/development.yml

@@ -52,9 +52,15 @@ jobs:
                 system:
                     - macos-latest
                     - ubuntu-latest
-                    # - windows-latest # todo: debug token style-dictionary failures on windows
                 node-version:
                     - 20
+                # experimental:
+                #     - false
+                # include:
+                #     - system: windows-latest
+                #       experimental: true
+                #     - system: windows-latest
+                #       experimental: true
         uses: ./.github/workflows/build.yml
         with:
             system: ${{ matrix.system }}
@@ -188,7 +194,7 @@ jobs:
     # -------------------------------------------------------------
     vrt:
         name: Testing
-        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)
+        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') }}

.storybook/blocks/utilities.js

@@ -86,7 +86,7 @@ export function fetchToken(key, fallback = undefined, presets = {}) {
 	// Check if the spectrum data is available
 	if (!tokens || typeof tokens !== "object") return fallback;
 
-	return parseData(tokens[key], { color, platform }) ?? fallback;
+	return parseData(tokens?.[key], { color, platform }) ?? fallback;
 }
 
 /**

.storybook/package.json

@@ -48,21 +48,21 @@
 		"@babel/core": "^7.26.0",
 		"@chromatic-com/storybook": "^3.2.3",
 		"@etchteam/storybook-addon-status": "^5.0.0",
-		"@storybook/addon-a11y": "~8.4.7",
-		"@storybook/addon-actions": "~8.4.7",
-		"@storybook/addon-designs": "^8.0.4",
-		"@storybook/addon-docs": "~8.4.7",
-		"@storybook/addon-essentials": "~8.4.7",
-		"@storybook/addon-interactions": "~8.4.7",
-		"@storybook/blocks": "~8.4.7",
-		"@storybook/builder-vite": "~8.4.7",
-		"@storybook/components": "~8.4.7",
-		"@storybook/core-events": "~8.4.7",
-		"@storybook/manager-api": "~8.4.7",
-		"@storybook/preview-api": "~8.4.7",
-		"@storybook/test-runner": "^0.21.0",
-		"@storybook/theming": "~8.4.7",
-		"@storybook/web-components-vite": "~8.4.7",
+		"@storybook/addon-a11y": "8.4.7",
+		"@storybook/addon-actions": "8.4.7",
+		"@storybook/addon-designs": "^8.2.1",
+		"@storybook/addon-docs": "8.4.7",
+		"@storybook/addon-essentials": "8.4.7",
+		"@storybook/addon-interactions": "8.4.7",
+		"@storybook/blocks": "8.4.7",
+		"@storybook/builder-vite": "8.4.7",
+		"@storybook/components": "8.4.7",
+		"@storybook/core-events": "8.4.7",
+		"@storybook/manager-api": "8.4.7",
+		"@storybook/preview-api": "8.4.7",
+		"@storybook/test-runner": "^0.22.0",
+		"@storybook/theming": "8.4.7",
+		"@storybook/web-components-vite": "8.4.7",
 		"@whitespace/storybook-addon-html": "^6.1.1",
 		"chromatic": "^11.22.2",
 		"lit": "^3.2.1",
@@ -75,7 +75,7 @@
 		"react-syntax-highlighter": "^15.6.1",
 		"remark-gfm": "^4.0.0",
 		"rollup-plugin-postcss-lit": "^2.1.0",
-		"storybook": "~8.4.7",
+		"storybook": "8.4.7",
 		"vite": "^5.4.11"
 	},
 	"keywords": [

nx.json

@@ -89,20 +89,20 @@
 					"cross-env NODE_OPTIONS=\"--no-warnings\" node -e 'require(\"./tasks/component-builder.js\").default()'"
 				]
 			},
-			"outputs": ["{projectRoot}/dist/*.css", "{projectRoot}/dist/*.map"]
+			"outputs": ["{projectRoot}/dist/*.css*", "{projectRoot}/dist/**/*.css*"]
 		},
 		"clean": {
 			"cache": true,
 			"executor": "nx:run-commands",
-			"inputs": ["{projectRoot}/dist/*.css", "{projectRoot}/dist/*.map", { "externalDependencies": ["rimraf"] }],
+			"inputs": ["{projectRoot}/dist/*.css*", "{projectRoot}/dist/**/*.css*", { "externalDependencies": ["rimraf"] }],
 			"options": {
-				"commands": ["rimraf {projectRoot}/dist/*.css {projectRoot}/dist/*.map"]
+				"commands": ["rimraf {projectRoot}/dist/*.css* {projectRoot}/dist/**/"]
 			},
 			"outputs": ["{projectRoot}/dist"]
 		},
 		"compare": {
 			"cache": true,
-			"dependsOn": [{ "projects": "bundle", "target": "build" }],
+			"dependsOn": ["build", { "projects": ["bundle"], "target": "build" }],
 			"executor": "nx:run-commands",
 			"inputs": [
 				"{workspaceRoot}/tasks/compare-compiled-output.js",
@@ -217,6 +217,7 @@
 			}
 		},
 		"validate": {
+			"cache": true,
 			"executor": "nx:run-commands",
 			"inputs": [
 				"{workspaceRoot}/schemas/metadata.schema.json",

package.json

@@ -27,7 +27,7 @@
 		"clean:env": "rm -rf .env .storybook/chromatic.config.json",
 		"clean:preview": "nx clean storybook --skip-nx-cache",
 		"cleaner": "nx run-many --target clean --projects",
-		"compare": "cross-env NODE_ENV=production node --no-warnings ./tasks/compare-compiled-output.js",
+		"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:report": "node --no-warnings ./tasks/component-reporter.js",
@@ -70,9 +70,8 @@
 		"@changesets/cli": "^2.27.11",
 		"@commitlint/cli": "^19.6.1",
 		"@commitlint/config-conventional": "^19.6.0",
-		"@csstools/postcss-bundler": "^2.0.6",
 		"@nx/devkit": "^19.8.2",
-		"@spectrum-tools/postcss-rgb-mapping": "1.0.0",
+		"@spectrum-tools/postcss-rgb-mapping": "1.1.0",
 		"@yarnpkg/types": "^4.0.0",
 		"at-rule-packer": "^0.4.2",
 		"autoprefixer": "^10.4.21",
@@ -115,9 +114,9 @@
 		"prettier": "^3.5.3",
 		"rimraf": "^6.0.1",
 		"semver": "^7.7.1",
-		"stylelint": "^16.15.0",
-		"stylelint-config-standard": "^36.0.1",
-		"stylelint-header": "^2.1.0",
+		"stylelint": "^16.18.0",
+		"stylelint-config-standard": "^38.0.0",
+		"stylelint-header": "^3.0.0",
 		"stylelint-high-performance-animation": "^1.11.0",
 		"stylelint-order": "^6.0.4",
 		"stylelint-selector-bem-pattern": "^4.0.1",

plugins/postcss-rgb-mapping/CHANGELOG.md

@@ -1,5 +1,34 @@
 # Change Log
 
+## 1.1.0
+
+### Minor Changes
+
+- [#3452](https://github.com/adobe/spectrum-css/pull/3452) [`287cff8`](https://github.com/adobe/spectrum-css/commit/287cff82b7706f0f56d6d37f48e1d9c60a6df4b9) Thanks [@marissahuysentruyt](https://github.com/marissahuysentruyt)! - Adds new functionality to better handle tokens that reference other transparent tokens.
+
+  When a custom properties below is defined as another, specifically "transparent," variable, such as:
+
+  ```css
+  --disabled-static-white-background-color: var(
+  	--spectrum-transparent-white-100
+  );
+  ```
+
+  ...the plugin can now convert this single custom property into its `-rgb` and `-opacity` postfixed variables, that each correspond to the `-rgb` and `-opacity` variables of the definition's transparent token. It then reassembles the original, using and referencing these newly created variables.
+
+  ```css
+  --disabled-static-white-background-color-rgb: var(
+  	--spectrum-transparent-white-100-rgb
+  );
+  --disabled-static-white-background-color-opacity: var(
+  	--spectrum-transparent-white-100-opacity
+  );
+  --disabled-static-white-background-color: rgba(
+  	var(--disabled-static-white-background-color-rgb),
+  	var(--disabled-static-white-background-color-opacity)
+  );
+  ```
+
 ## 1.0.0
 
 ### Major Changes

plugins/postcss-rgb-mapping/README.md

@@ -1,6 +1,7 @@
 # postcss-rgb-mapping
 
 > Remaps rgb(a) values to an `rgb` postfixed variable. If an opacity is found, creates a separate `opacity` postfixed variable.
+> Also remaps values that reference a transparent token (for example, `transparent-black-300`) to `rgb` and `opacity` postfixed variables.
 
 ## Installation
 
@@ -11,6 +12,8 @@ postcss -u postcss-rgb-mapping -o dist/index.css src/index.css
 
 ## Usage
 
+### Example 1: RGB and opacity postfixed variables
+
 This plugin turns this:
 
 ```css
@@ -24,13 +27,63 @@ Into this:
 
 ```css
 .spectrum--lightest {
+	/* Both --spectrum-seafoam-100 and --spectrum-seafoam-200 get split into separate
+	"-rgb" and "-opacity" values when applicable. */
 	--spectrum-seafoam-100-rgb: 206, 247, 243;
 	--spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb));
 	--spectrum-seafoam-200-rgb: 170, 241, 234;
 	--spectrum-seafoam-200-opacity: 0.5;
+	/* The plugin then redefines the original custom variable to use the newly created
+	"-rgb" and/or "-opacity" custom variables. */
 	--spectrum-seafoam-200: rgba(
 		var(--spectrum-seafoam-200-rgb),
 		var(--spectrum-seafoam-200-opacity)
 	);
 }
 ```
+
+### Example 2: Remapping of transparent tokens
+
+This plugin turns this:
+
+```css
+.spectrum--lightest {
+	--spectrum-transparent-white-100-rgb: 100, 100, 100;
+	--spectrum-transparent-white-100-opacity: 0.5;
+	--spectrum-transparent-white-100: rgba(
+		var(--spectrum-transparent-white-100-rgb),
+		var(--spectrum-transparent-white-100-opacity)
+	);
+	/* The custom properties below is defined as another, specifically "transparent," variable. */
+	--disabled-static-white-background-color: var(
+		--spectrum-transparent-white-100
+	);
+}
+```
+
+Into this:
+
+```css
+.spectrum--lightest {
+	--spectrum-transparent-white-100-rgb: 100, 100, 100;
+	--spectrum-transparent-white-100-opacity: 0.5;
+	--spectrum-transparent-white-100: rgba(
+		var(--spectrum-transparent-white-100-rgb),
+		var(--spectrum-transparent-white-100-opacity)
+	);
+	/* In a similar fashion, the plugin creates new "-rgb" and "-opacity" postfixed custom
+	variables, that correspond to the definition's transparent "-rgb" and "-opacity"
+	postfixed custom variables. */
+	--disabled-static-white-background-color-rgb: var(
+		--spectrum-transparent-white-100-rgb
+	);
+	--disabled-static-white-background-color-opacity: var(
+		--spectrum-transparent-white-100-opacity
+	);
+	/* Then reassembles the original to use and reference these newly created variables. */
+	--disabled-static-white-background-color: rgba(
+		var(--disabled-static-white-background-color-rgb),
+		var(--disabled-static-white-background-color-opacity)
+	);
+}
+```

plugins/postcss-rgb-mapping/expected/basic.css

@@ -6,4 +6,10 @@
   --seafoam-200: rgba(var(--seafoam-200-rgb), var(--seafoam-200-opacity));
   --seafoam-300-rgb: 206, 247, 243;
   --seafoam-300: rgba(var(--seafoam-300-rgb));
+  --spectrum-transparent-white-100-rgb: 100, 100, 100;
+  --spectrum-transparent-white-100-opacity: 0.5;
+  --spectrum-transparent-white-100: rgba(var(--spectrum-transparent-white-100-rgb), var(--spectrum-transparent-white-100-opacity));
+  --disabled-static-white-background-color-rgb: var(--spectrum-transparent-white-100-rgb);
+  --disabled-static-white-background-color-opacity: var(--spectrum-transparent-white-100-opacity);
+  --disabled-static-white-background-color: rgba(var(--disabled-static-white-background-color-rgb), var(--disabled-static-white-background-color-opacity));
 }