From 15e86bbfc8398610f4fad4667cc13de8933ab92b Mon Sep 17 00:00:00 2001
From: Ephraim Duncan <55143799+ephraimduncan@users.noreply.github.com>
Date: Thu, 1 Oct 2026 03:22:11 +0000
Subject: [PATCH] docs: add data-readonly and correct field color example
 (#3413)

---
 apps/docs/content/docs/developers/embedding/css-variables.mdx | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/apps/docs/content/docs/developers/embedding/css-variables.mdx b/apps/docs/content/docs/developers/embedding/css-variables.mdx
index c798a32ba..fd3df8bcd 100644
--- a/apps/docs/content/docs/developers/embedding/css-variables.mdx
+++ b/apps/docs/content/docs/developers/embedding/css-variables.mdx
@@ -149,6 +149,7 @@ Fields expose data attributes for state-based styling:
 | `[data-field-type]` | `SIGNATURE`, `TEXT`, `CHECKBOX`, `RADIO`, etc. | The type of field                    |
 | `[data-inserted]`   | `true`, `false`                                | Whether the field has been filled    |
 | `[data-validate]`   | `true`, `false`                                | Whether the field is being validated |
+| `[data-readonly]`   | `true`, `false`                                | Whether the field is read-only       |
 
 ### Example
 
@@ -160,7 +161,7 @@ Fields expose data attributes for state-based styling:
 
 /* Style filled fields */
 .field--FieldRootContainer[data-inserted='true'] {
-  background-color: var(--primary);
+  background-color: hsl(var(--primary));
   opacity: 0.2;
 }