fix: use branding primary color for field loading spinner

The loading spinner on V2 signing fields used a hardcoded green. The spinner
reads the --primary CSS variable from the field container, so it follows team
and embed branding.

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       |
+| `primary`               | Primary action/button color. The loading spinner on fields also uses this color. |
 | `primaryForeground`     | Primary action/button text color  |
 | `secondary`             | Secondary action/button color     |
 | `secondaryForeground`   | Secondary button text color       |

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

@@ -166,3 +166,19 @@ 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,6 +1,7 @@
 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';
 
@@ -94,7 +95,7 @@ export const createSpinner = ({ fieldWidth, fieldHeight }: { fieldWidth: number;
     outerRadius: spinnerSize / 2,
     angle: 270,
     rotation: 0,
-    fill: 'rgba(122, 195, 85, 1)',
+    fill: resolvePrimaryColor() ?? 'rgba(122, 195, 85, 1)',
     lineCap: 'round',
   });