From 4e87d8c97bf9e61517ad472306cb95578149d950 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
 <583546+oandregal@users.noreply.github.com>
Date: Wed, 8 Apr 2026 11:42:19 +0200
Subject: [PATCH 1/4] FormTokenField: fix disabled styles

---
 .../components/src/form-token-field/style.scss     | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss
index a7b31dd5c9f6dc..60ee0fe6b7ff93 100644
--- a/packages/components/src/form-token-field/style.scss
+++ b/packages/components/src/form-token-field/style.scss
@@ -11,8 +11,10 @@
 	cursor: text;
 
 	&.is-disabled {
-		background: $gray-300;
-		border-color: $gray-300;
+		background: $gray-100;
+		border-color: $gray-400;
+		cursor: default;
+		opacity: 1;
 	}
 
 	&.is-active {
@@ -82,6 +84,14 @@
 		}
 	}
 
+	&.is-disabled {
+		.components-form-token-field__token-text,
+		.components-form-token-field__remove-token.components-button {
+			background: $gray-100;
+			color: $gray-600;
+		}
+	}
+
 	&.is-borderless {
 		position: relative;
 		padding: 0 24px 0 0;

From 4afd897c1b7e5080d78b34f9368e331b81a5fdec Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9=20Maneiro?=
 <583546+oandregal@users.noreply.github.com>
Date: Wed, 8 Apr 2026 11:46:56 +0200
Subject: [PATCH 2/4] Add changelog entry

---
 packages/components/CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
index 95d841a4e185f1..7a04ef8c6d6515 100644
--- a/packages/components/CHANGELOG.md
+++ b/packages/components/CHANGELOG.md
@@ -4,6 +4,7 @@
 
 ### Bug Fixes
 
+-   `FormTokenField`: Fix disabled styles. [#77137](https://github.com/WordPress/gutenberg/pull/77137)
 -   `Autocomplete`: Fix value comparison to avoid resetting block inserter in RTC ([#76980](https://github.com/WordPress/gutenberg/pull/76980)).
 -   `ValidatedRangeControl`: Fix `aria-label` rendered as `[object Object]` when `required` or `markWhenOptional` is set ([#77042](https://github.com/WordPress/gutenberg/pull/77042)).
 -   `Autocomplete`: Fix matching logic to prefer longest overlapping trigger ([#77018](https://github.com/WordPress/gutenberg/pull/77018)).

From 17c2e2a557db1b56ff959509aaefe16a908bf651 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Thu, 9 Apr 2026 14:10:49 +0200
Subject: [PATCH 3/4] Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 packages/components/src/form-token-field/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss
index 60ee0fe6b7ff93..faebc586add029 100644
--- a/packages/components/src/form-token-field/style.scss
+++ b/packages/components/src/form-token-field/style.scss
@@ -11,8 +11,8 @@
 	cursor: text;
 
 	&.is-disabled {
-		background: $gray-100;
-		border-color: $gray-400;
+		background: $components-color-gray-100;
+		border-color: $components-color-gray-400;
 		cursor: default;
 		opacity: 1;
 	}

From e2e72570f448558aebdbfd17727a263878382843 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Andr=C3=A9?= <583546+oandregal@users.noreply.github.com>
Date: Thu, 9 Apr 2026 14:11:08 +0200
Subject: [PATCH 4/4] Apply suggestion from @Copilot

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
---
 packages/components/src/form-token-field/style.scss | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/packages/components/src/form-token-field/style.scss b/packages/components/src/form-token-field/style.scss
index faebc586add029..5ef4b280096fce 100644
--- a/packages/components/src/form-token-field/style.scss
+++ b/packages/components/src/form-token-field/style.scss
@@ -87,8 +87,8 @@
 	&.is-disabled {
 		.components-form-token-field__token-text,
 		.components-form-token-field__remove-token.components-button {
-			background: $gray-100;
-			color: $gray-600;
+			background: $components-color-gray-100;
+			color: $components-color-gray-600;
 		}
 	}