docs: add data-readonly and correct field color example

The embedding CSS docs did not list the data-readonly field attribute. The
example for filled fields used var(--primary), which holds only HSL numbers and
is not a valid color. The example uses hsl(var(--primary)).

apps/docs/content/docs/developers/embedding/css-variables.mdx

@@ -49,7 +49,7 @@ Use the `cssVars` prop on any embed component to override default colors, spacin
 | `widgetForeground`      | Widget text color                 |
 | `border`                | Default border color              |
 | `input`                 | Input field border color          |
-| `primary`               | Primary action/button color. The loading spinner on fields also uses this color. |
+| `primary`               | Primary action/button color       |
 | `primaryForeground`     | Primary action/button text color  |
 | `secondary`             | Secondary action/button color     |
 | `secondaryForeground`   | Secondary button text color       |
@@ -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;
 }
 

packages/lib/universal/field-renderer/field-canvas-style.ts

@@ -166,19 +166,3 @@ export const resolveFieldCanvasStyle = (
 
   return style;
 };
-
-/**
- * Resolve the `--primary` color from the same cascade as the fields, so canvas
- * elements such as the loading spinner follow team and embed branding.
- */
-export const resolvePrimaryColor = () => {
-  const $anchor = document.querySelector(FIELD_PROBE_ANCHOR_SELECTOR);
-
-  if (!$anchor) {
-    return undefined;
-  }
-
-  const color = colord(`hsl(${window.getComputedStyle($anchor).getPropertyValue('--primary')})`);
-
-  return color.isValid() ? color.toRgbString() : undefined;
-};

packages/lib/universal/field-renderer/field-generic-items.ts

@@ -1,7 +1,6 @@
 import { DEFAULT_RECT_BACKGROUND, getRecipientColorStyles } from '@documenso/ui/lib/recipient-colors';
 import Konva from 'konva';
 
-import { resolvePrimaryColor } from './field-canvas-style';
 import type { FieldToRender, RenderFieldElementOptions } from './field-renderer';
 import { calculateFieldPosition } from './field-renderer';
 
@@ -95,7 +94,7 @@ export const createSpinner = ({ fieldWidth, fieldHeight }: { fieldWidth: number;
     outerRadius: spinnerSize / 2,
     angle: 270,
     rotation: 0,
-    fill: resolvePrimaryColor() ?? 'rgba(122, 195, 85, 1)',
+    fill: 'rgba(122, 195, 85, 1)',
     lineCap: 'round',
   });