ComboboxControl: Replace undefined variable usage with color-mix for disabled selection (#69621)

yogeshbhutkar · yogeshbhutkar · ciampo · web-flow · commit 303a1e1f7fdf · 2025-03-19T10:41:17.000Z
* fix: remove transparent variant for accent color in theme variables

* fix: use `color-mix` to derive color accent variant

* fix: use `background` and reduce alpha to `4%`

* chore: add changelog

---

Co-authored-by: yogeshbhutkar &lt;yogeshbhutkar@git.wordpress.org&gt;
Co-authored-by: ciampo &lt;mciampini@git.wordpress.org&gt;
Co-authored-by: mirka &lt;0mirka00@git.wordpress.org&gt;
diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -5,6 +5,7 @@
 ### Bug Fixes
 
 -   `useAutocomplete`: Fix autocomple UI flicker when deleting trigger prefix ([#69562](https://github.com/WordPress/gutenberg/pull/69562)).
+-   `FormTokenField`: Use `color-mix` for disabled option selection background ([#69621](https://github.com/WordPress/gutenberg/pull/69621)).
 
 ## 29.6.0 (2025-03-13)
 
diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss
@@ -186,7 +186,7 @@
 		color: $gray-600;
 
 		&.is-selected {
-			background-color: $components-color-accent-transparent-40;
+			background: color-mix(in srgb, $components-color-accent 4%, transparent);
 		}
 	}
 
diff --git a/packages/components/src/utils/theme-variables.scss b/packages/components/src/utils/theme-variables.scss
@@ -4,10 +4,6 @@
 // `--wp-admin-theme-color`. If the `--wp-admin-theme-color` variable is not
 // defined, fallback to the default theme color (WP blueberry).
 $components-color-accent: var(--wp-components-color-accent, var(--wp-admin-theme-color, #3858e9));
-
-// Define accent color transparent variants.
-$components-color-accent-transparent-40: rgba(var(--wp-components-color-accent--rgb, var(--wp-admin-theme-color--rgb)), 0.04);
-
 $components-color-accent-darker-10: var(--wp-components-color-accent-darker-10, var(--wp-admin-theme-color-darker-10, #2145e6));
 $components-color-accent-darker-20: var(--wp-components-color-accent-darker-20, var(--wp-admin-theme-color-darker-20, #183ad6));
 

Original file line number	Diff line number	Diff line change
`@@ -186,7 +186,7 @@`
`186`	`186`	`color: $gray-600;`
`187`	`187`
`188`	`188`	`&.is-selected {`
`189`		`- background-color: $components-color-accent-transparent-40;`
	`189`	`+ background: color-mix(in srgb, $components-color-accent 4%, transparent);`
`190`	`190`	`}`
`191`	`191`	`}`
`192`	`192`