diff --git a/plugins/postcss-rgb-mapping/README.md b/plugins/postcss-rgb-mapping/README.md
index 20036288b55..30e1f30c5d4 100644
--- a/plugins/postcss-rgb-mapping/README.md
+++ b/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
 
@@ -17,6 +18,15 @@ This plugin turns this:
 .spectrum--lightest {
 	--spectrum-seafoam-100: rgba(206, 247, 243);
 	--spectrum-seafoam-200: rgba(170, 241, 234, 0.5);
+	--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: var(
+		--spectrum-transparent-white-100
+	);
 }
 ```
 
@@ -32,5 +42,21 @@ Into this:
 		var(--spectrum-seafoam-200-rgb),
 		var(--spectrum-seafoam-200-opacity)
 	);
+	--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)
+	);
 }
 ```
diff --git a/plugins/postcss-rgb-mapping/expected/basic.css b/plugins/postcss-rgb-mapping/expected/basic.css
index 52ba4935e09..8a5d3f3f350 100644
--- a/plugins/postcss-rgb-mapping/expected/basic.css
+++ b/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));
 }
diff --git a/plugins/postcss-rgb-mapping/expected/modern.css b/plugins/postcss-rgb-mapping/expected/modern.css
index b9d0c06f3df..ed5f940769d 100644
--- a/plugins/postcss-rgb-mapping/expected/modern.css
+++ b/plugins/postcss-rgb-mapping/expected/modern.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));
 }
diff --git a/plugins/postcss-rgb-mapping/fixtures/basic.css b/plugins/postcss-rgb-mapping/fixtures/basic.css
index 7fe19e1fed6..43a108d6c66 100644
--- a/plugins/postcss-rgb-mapping/fixtures/basic.css
+++ b/plugins/postcss-rgb-mapping/fixtures/basic.css
@@ -2,4 +2,8 @@
   --seafoam-100: rgba(206, 247, 243);
   --seafoam-200: rgba(206, 247, 243, 0.5);
   --seafoam-300: rgb(206, 247, 243);
+  --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: var(--spectrum-transparent-white-100);
 }
diff --git a/plugins/postcss-rgb-mapping/index.js b/plugins/postcss-rgb-mapping/index.js
index 155a1c68cfe..ce1df4515d1 100644
--- a/plugins/postcss-rgb-mapping/index.js
+++ b/plugins/postcss-rgb-mapping/index.js
@@ -23,18 +23,63 @@ const valuesParser = require("postcss-values-parser");
 function rgbMappingFunction ({
 	colorFunctionalNotation = false,
 }) {
+
 	return {
 		postcssPlugin: "postcss-rgb-mapping",
+		/** @type {import('postcss').RootProcessor} */
+		Root(root) {
+			/* Gather all the custom properties that reference "unprocessed" transparent tokens (i.e. transparent-white-200) */
+			const transparentTokens = new Set();
+			root.walkDecls(decl => {
+				if (decl.prop.startsWith('--spectrum-transparent-') && !decl.prop.endsWith('rgb') && !decl.prop.endsWith('opacity')) {
+					transparentTokens.add(decl.prop);
+				}
+			});
+
+			root.walkDecls(decl => {
+				const { prop, value } = decl;
+
+				/* Determine if this property is a custom property */
+				const isCustomProp = prop.startsWith("--");
+
+				/* Determine if this property has already been processed */
+				const isProcessed = prop.endsWith("rgb") || prop.endsWith("opacity");
+
+				/* Check for transparent token reference */
+				const transparentMatch = value.match(/var\((--spectrum-transparent-[^\s)]+)\)/);
+				if (isCustomProp && !isProcessed && transparentMatch) {
+					const referencedToken = transparentMatch[1];
+
+					if (transparentTokens.has(referencedToken)) {
+						/* Create the new RGB and opacity properties */
+						decl.cloneBefore({
+							prop: `${prop}-rgb`,
+							value: `var(${referencedToken}-rgb)`
+						});
+						decl.cloneBefore({
+							prop: `${prop}-opacity`,
+							value: `var(${referencedToken}-opacity)`
+						});
+
+						/* Update the original declaration */
+						decl.value = `rgba(var(${prop}-rgb)${colorFunctionalNotation ? " / " : ", "}var(${prop}-opacity))`;
+					}
+				}
+				return;
+			});
+		},
+
 		/** @type {import('postcss').DeclarationProcessor} */
 		Declaration(decl, { Warning }) {
 			const { prop, value } = decl;
 
 			/* Determine if this property is a custom property */
 			const isCustomProp = prop.startsWith("--");
+
 			/* Determine if this property has already been processed */
 			const isProcessed = prop.endsWith("rgb") || prop.endsWith("opacity");
 
-			/* Parse the value for it's parts */
+			/* Parse the value for its parts */
 			const parsedValue = valuesParser.parse(value) || [];
 
 			/* Determine if the value has an rgb or rgba value */
@@ -114,7 +159,6 @@ function rgbMappingFunction ({
 			decl.assign({
 				value: `rgba(var(${prop}-rgb)${a ? `${colorFunctionalNotation ? " /" : ","} var(${prop}-opacity)` : ""})`,
 			});
-
 			return;
 		},
 	};