@agent-native/core 0.138.0 → 0.140.0

package/corpus/templates/design/app/components/design/edit-panel/effects-properties.tsx

@@ -42,6 +42,7 @@ import {
   type GlslShaderPanelContext,
 } from "../inspector/GlslShaderPanel";
 import type { ElementInfo } from "../types";
+import type { DesignSystemColorSwatch } from "./design-system-swatches";
 import { isTextElement } from "./element-classification";
 import { elementStableKey } from "./element-identity";
 import { FieldTrailer } from "./field-primitives";
@@ -51,6 +52,7 @@ import {
   SectionIconButton,
   useRowDragReorder,
 } from "./inspector-controls";
+import { authoredColorValue } from "./interaction-state-helpers";
 import { ColorInput, PanelSection } from "./panel-primitives";
 import {
   colorHasVisibleAlpha,
@@ -295,10 +297,15 @@ function ShadowEffectRow({
   rowProps,
   handleProps,
   element,
+  designSystemColors,
+  resolvedColor,
   motionKeyframeContext,
 }: {
   layer: ShadowLayer;
   index: number;
+  designSystemColors?: DesignSystemColorSwatch[];
+  /** The layer's painted colour, for the swatch when `layer.color` is a token. */
+  resolvedColor?: string;
   onChange: (patch: Partial<ShadowLayer>, meta?: StyleChangeMeta) => void;
   onRemove: () => void;
   onToggleVisibility: () => void;
@@ -452,6 +459,8 @@ function ShadowEffectRow({
           <ColorInput
             label={t("editPanel.labels.color")}
             value={cssColorOrFallback(layer.color, "rgba(0, 0, 0, 0.25)")}
+            designSystemColors={designSystemColors}
+            resolvedColor={resolvedColor}
             onChange={(value, meta) => onChange({ color: value }, meta)}
           />
         </div>
@@ -464,12 +473,15 @@ export function EffectsProperties({
   element,
   onStyleChange,
   onStylesChange,
+  designSystemColors,
   glslShaderContext,
   motionKeyframeContext,
 }: {
   element: ElementInfo;
   onStyleChange: StyleChangeHandler;
   onStylesChange?: StylesChangeHandler;
+  /** Kit tokens offered by name in the drop-shadow colour picker. */
+  designSystemColors?: DesignSystemColorSwatch[];
   /**
    * Persistence context for the code-backed Shader effect type (GLSL
    * overlay rendered above the element's content, saved into the screen
@@ -508,11 +520,13 @@ export function EffectsProperties({
   const shadowTargetsText = isTextElement(element);
   // Read from the same property the writer targets, or the rows would show a
   // box-shadow that is no longer what this element uses.
+  const shadowProperty = shadowTargetsText ? "textShadow" : "boxShadow";
+  const paintedShadowLayers = effectsAreMixed
+    ? []
+    : parseShadowLayers(styles[shadowProperty]);
   const shadowLayers = effectsAreMixed
     ? []
-    : parseShadowLayers(
-        shadowTargetsText ? styles.textShadow : styles.boxShadow,
-      );
+    : parseShadowLayers(authoredColorValue(element, shadowProperty));
   const setShadowLayers = (layers: ShadowLayer[], meta?: StyleChangeMeta) => {
     setHiddenEffectStash((stash) =>
       remapIndexedShadowStash(stash, effectStashKey, layers),
@@ -676,6 +690,8 @@ export function EffectsProperties({
                       }
                       rowProps={shadowDrag.getRowProps(index)}
                       handleProps={shadowDrag.getHandleProps(index)}
+                      designSystemColors={designSystemColors}
+                      resolvedColor={paintedShadowLayers[index]?.color}
                       onChange={(patch, meta) => {
                         const next = shadowLayers.map((candidate) =>
                           candidate.id === layer.id

package/corpus/templates/design/app/components/design/edit-panel/fill-properties.tsx

@@ -23,6 +23,12 @@ import {
 import { DesignColorPicker, imageFillToBackgroundStyles } from "../inspector";
 import type { GlslShaderPanelContext } from "../inspector/GlslShaderPanel";
 import type { ElementInfo } from "../types";
+import {
+  hiddenColorWrite,
+  hiddenTokenReference,
+  parseTokenReference,
+  type DesignSystemColorSwatch,
+} from "./design-system-swatches";
 import { selectionColorValues } from "./document-colors";
 import { isTextElement } from "./element-classification";
 import { elementStableKey } from "./element-identity";
@@ -46,11 +52,13 @@ import {
   SectionIconButton,
   useRowDragReorder,
 } from "./inspector-controls";
+import { authoredColorValue } from "./interaction-state-helpers";
 import { ColorInput, PanelSection } from "./panel-primitives";
 import {
   colorHasVisibleAlpha,
   cssColorOrFallback,
   swatchStyle,
+  zeroAlphaLiteral,
 } from "./position-helpers";
 import { isMixedValue } from "./selection-helpers";
 import type {
@@ -109,6 +117,7 @@ export function FillProperties({
   onStyleChange,
   onStylesChange,
   documentColorPalette = [],
+  designSystemColors,
   glslShaderContext,
   motionKeyframeContext,
   breakpointOverrideContext,
@@ -121,6 +130,9 @@ export function FillProperties({
    * colors below so a real, always-populated "Document colors" row is
    * available even before any file content has been scanned. */
   documentColorPalette?: string[];
+  /** Colour tokens from the design's linked Brand Kit, shown by name in the
+   * fill picker above the document palette. */
+  designSystemColors?: DesignSystemColorSwatch[];
   /**
    * Persistence context for the code-backed Shader paint type (GLSL source
    * saved into the screen HTML). Threaded into the fill picker so its
@@ -144,9 +156,20 @@ export function FillProperties({
     Record<string, string>
   >({});
   const fillStashKey = elementStableKey(element);
-  const fillValue = isTextFillElement
+  // getComputedStyle resolves `var()` before we can read it, so a token-backed
+  // fill would come back as a bare colour and lose the name it was set from.
+  // The authored inline value still holds the reference.
+  const authoredFill = authoredColorValue(element, fillProperty);
+  const computedFill = isTextFillElement
     ? styles.color || ""
     : styles.backgroundColor || "";
+  // A hidden token's `color-mix` also has to survive here, or the reference it
+  // carries is replaced by the transparent colour it computes to.
+  const fillValue =
+    authoredFill &&
+    (parseTokenReference(authoredFill) || hiddenTokenReference(authoredFill))
+      ? authoredFill
+      : computedFill;
   const backgroundLayers = isTextFillElement
     ? []
     : splitCssLayers(styles.backgroundImage || "");
@@ -183,24 +206,25 @@ export function FillProperties({
   // separately: computed style strips comments but keeps rgba() channels).
   // Showing again just restores alpha to 1 using those same channels, so no
   // stash is required and the hide survives reselect/reload.
-  const isHidden = !colorHasVisibleAlpha(fillValue);
+  const hiddenFillToken = hiddenTokenReference(fillValue);
+  const isHidden = Boolean(hiddenFillToken) || !colorHasVisibleAlpha(fillValue);
+
   const handleFillVisibilityToggle = () => {
-    const parsed = parseCssColor(fillValue);
     if (isHidden) {
+      if (hiddenFillToken) {
+        onStyleChange(fillProperty, hiddenFillToken);
+        return;
+      }
+      const parsed = parseCssColor(fillValue);
       const restored = parsed
         ? rgbaToCss(withColorOpacity(parsed, 100))
         : isTextFillElement
           ? "#000000"
           : "#ffffff";
       onStyleChange(fillProperty, restored);
-    } else if (parsed) {
-      onStyleChange(fillProperty, rgbaToCss(withColorOpacity(parsed, 0)));
-    } else {
-      // Value wasn't a parseable color (e.g. already the literal
-      // "transparent") — nothing to preserve, transparent is the best we
-      // can do.
-      onStyleChange(fillProperty, "transparent");
+      return;
     }
+    onStyleChange(fillProperty, hiddenColorWrite(fillValue, zeroAlphaLiteral));
   };
 
   // Reorder fill layers by dragging: permute all four index-aligned parallel
@@ -385,6 +409,8 @@ export function FillProperties({
                           commitStylePatch(patch, onStyleChange, onStylesChange)
                   }
                   documentColors={documentColors}
+                  designSystemColors={designSystemColors}
+                  resolvedColor={computedFill}
                   pickerKey={[
                     element.sourceId ??
                       element.id ??

package/corpus/templates/design/app/components/design/edit-panel/interaction-state-helpers.ts

@@ -1,5 +1,20 @@
 import type { ElementInfo } from "../types";
 
+/**
+ * The colour a property was authored with, else the computed value. A generated
+ * design styles through classes, so `el.style` alone is not enough.
+ */
+export function authoredColorValue(
+  element: ElementInfo,
+  property: string,
+): string | undefined {
+  const inline = element.inlineStyles?.[property];
+  if (inline) return inline;
+  const authored = element.authoredColorStyles?.[property];
+  if (authored) return authored;
+  return element.computedStyles[property];
+}
+
 export function authoredStyleValue(
   element: ElementInfo,
   property: string,

package/corpus/templates/design/app/components/design/edit-panel/panel-primitives.tsx

@@ -26,6 +26,10 @@ import {
 } from "../inspector";
 import type { DesignPaintType } from "../inspector/DesignColorPicker";
 import type { GlslShaderPanelContext } from "../inspector/GlslShaderPanel";
+import {
+  parseTokenReference,
+  type DesignSystemColorSwatch,
+} from "./design-system-swatches";
 import {
   buildGradientLayer,
   defaultGradientLayer,
@@ -225,6 +229,8 @@ export function ColorInput({
   onBlendModeChange,
   supportsLayeredFills = false,
   documentColors,
+  designSystemColors,
+  resolvedColor,
   supportedPaintTypes,
   pickerKey,
   glslShaderContext,
@@ -270,6 +276,8 @@ export function ColorInput({
   supportsLayeredFills?: boolean;
   /** Hex strings already in use on the page — forwarded to the color picker swatch grid. */
   documentColors?: string[];
+  designSystemColors?: DesignSystemColorSwatch[];
+  resolvedColor?: string;
   /**
    * Restricts which paint-type tabs the popover renders. Omit for the full
    * set (solid + gradients + image + …). Pass `["solid"]` for properties
@@ -369,7 +377,15 @@ export function ColorInput({
     // before clobbering the last-known-good value in this component's own
     // state. Reject anything that doesn't parse as a plain solid color in
     // that case instead of forwarding it.
-    if (!supportsLayeredFills && !parseCssColor(next)) return;
+    // A design system token reference is valid on a plain color property even
+    // though it is not itself a color, so it must survive this guard.
+    if (
+      !supportsLayeredFills &&
+      !parseCssColor(next) &&
+      !parseTokenReference(next)
+    ) {
+      return;
+    }
     pendingGestureRef.current = phase === "preview";
     setDraft(next);
     onChange(next, { phase });
@@ -574,6 +590,8 @@ export function ColorInput({
       gradientType={activeGradient?.type}
       onGradientTypeChange={handleGradientTypeChange}
       documentColors={documentColors}
+      designSystemColors={designSystemColors}
+      resolvedColor={resolvedColor}
       supportedPaintTypes={supportedPaintTypes}
       glslShaderContext={glslShaderContext}
     />

package/corpus/templates/design/app/components/design/edit-panel/position-helpers.ts

@@ -213,6 +213,12 @@ export function resolveRestoredStrokeStyle(
  * (a single undo/history step, matching every other multi-property commit
  * in this file, e.g. TextStrokeProperties' equivalent show handler).
  */
+/** A literal colour at zero alpha, or null when it does not parse as one. */
+export function zeroAlphaLiteral(literal: string): string | null {
+  const parsed = parseCssColor(literal);
+  return parsed ? rgbaToCss(withColorOpacity(parsed, 0)) : null;
+}
+
 export function strokeShowPatch(
   prefix: "border" | "outline",
   color: string,

package/corpus/templates/design/app/components/design/edit-panel/stroke-properties.tsx

@@ -23,6 +23,12 @@ import {
 import { ScrubInput } from "../inspector";
 import type { DesignPaintType } from "../inspector/DesignColorPicker";
 import type { ElementInfo } from "../types";
+import {
+  hiddenColorWrite,
+  hiddenTokenReference,
+  parseTokenReference,
+  type DesignSystemColorSwatch,
+} from "./design-system-swatches";
 import { isTextElement } from "./element-classification";
 import { commitStylePatch, FieldTrailer } from "./field-primitives";
 import { SectionIconButton } from "./inspector-controls";
@@ -41,6 +47,7 @@ import {
   strokeShowPatch,
   textStrokeAddPatch,
   textStrokeIsVisible,
+  zeroAlphaLiteral,
 } from "./position-helpers";
 import { isMixedValue } from "./selection-helpers";
 import type {
@@ -60,6 +67,26 @@ import { STROKE_POSITION_OPTIONS } from "./style-options";
  */
 const SOLID_ONLY_PAINT_TYPES: DesignPaintType[] = ["solid"];
 
+/**
+ * The stroke colour as authored: its token name when it has one, else the
+ * resolved colour. Empty when no rule set it at all — the border then paints
+ * CSS's `currentColor` default, and echoing the inherited text colour here
+ * would claim a stroke colour the design never chose.
+ */
+export function authoredStrokeColor(
+  element: ElementInfo,
+  property: string,
+  computed: string | undefined,
+): string {
+  const authored =
+    element.inlineStyles?.[property] ?? element.authoredColorStyles?.[property];
+  if (!authored) return "";
+  if (parseTokenReference(authored) || hiddenTokenReference(authored)) {
+    return authored;
+  }
+  return computed || authored;
+}
+
 type StrokeLayerKind = "border" | "outline";
 type StrokePosition = "inside" | "outside" | "center";
 
@@ -67,6 +94,7 @@ function StrokeLayerControl({
   kind,
   visible,
   color,
+  designSystemColors,
   width,
   styleValue,
   outlineOffset,
@@ -80,6 +108,7 @@ function StrokeLayerControl({
   kind: StrokeLayerKind;
   visible: boolean;
   color: string;
+  designSystemColors?: DesignSystemColorSwatch[];
   width: string;
   styleValue: string;
   /** Only meaningful when `kind === "outline"` — distinguishes outside vs
@@ -104,6 +133,7 @@ function StrokeLayerControl({
     label: t(`editPanel.labels.${option.key}`),
   }));
   const prefix = kind === "border" ? "border" : "outline";
+  const hiddenToken = hiddenTokenReference(color);
   const position: StrokePosition =
     kind === "border"
       ? "inside"
@@ -162,7 +192,10 @@ function StrokeLayerControl({
         <div className="min-w-0 flex-1">
           <ColorInput
             label=""
-            value={cssColorOrFallback(color, "#000000")}
+            // Not cssColorOrFallback: an unset stroke must stay unset here
+            // rather than render as a black the design never chose.
+            value={hiddenToken ?? color}
+            designSystemColors={designSystemColors}
             onChange={(value, meta) =>
               onStyleChange(`${prefix}Color`, value, meta)
             }
@@ -183,21 +216,18 @@ function StrokeLayerControl({
             // style permanently, since there is no round-trippable "unset"
             // for that keyword once it's overwritten.
             if (visible) {
-              const parsed = parseCssColor(color);
               onStyleChange(
                 `${prefix}Color`,
-                parsed ? rgbaToCss(withColorOpacity(parsed, 0)) : "transparent",
+                hiddenColorWrite(color, zeroAlphaLiteral),
               );
               return;
             }
             // Restore color/width/style as ONE commit (single undo step)
             // rather than three sequential onStyleChange calls — see
             // strokeShowPatch's doc comment.
-            commitStylePatch(
-              strokeShowPatch(prefix, color, width, styleValue),
-              onStyleChange,
-              onStylesChange,
-            );
+            const showPatch = strokeShowPatch(prefix, color, width, styleValue);
+            if (hiddenToken) showPatch[`${prefix}Color`] = hiddenToken;
+            commitStylePatch(showPatch, onStyleChange, onStylesChange);
           }}
         >
           {visible ? (
@@ -293,12 +323,15 @@ export function StrokeProperties({
   element,
   onStyleChange,
   onStylesChange,
+  designSystemColors,
   motionKeyframeContext,
   breakpointOverrideContext,
 }: {
   element: ElementInfo;
   onStyleChange: StyleChangeHandler;
   onStylesChange?: StylesChangeHandler;
+  /** Linked Brand Kit colour tokens, offered by name in the stroke picker. */
+  designSystemColors?: DesignSystemColorSwatch[];
   motionKeyframeContext?: MotionKeyframeFieldContext;
   breakpointOverrideContext?: BreakpointOverrideFieldContext;
 }) {
@@ -449,7 +482,12 @@ export function StrokeProperties({
             <StrokeLayerControl
               kind="border"
               visible={borderVisible}
-              color={styles.borderColor || "#000000"}
+              color={authoredStrokeColor(
+                element,
+                "borderColor",
+                styles.borderColor,
+              )}
+              designSystemColors={designSystemColors}
               width={styles.borderWidth || "0px"}
               styleValue={styles.borderStyle || "none"}
               onStyleChange={onStyleChange}
@@ -470,7 +508,12 @@ export function StrokeProperties({
             <StrokeLayerControl
               kind="outline"
               visible={outlineVisible}
-              color={styles.outlineColor || styles.borderColor || "#000000"}
+              color={authoredStrokeColor(
+                element,
+                "outlineColor",
+                styles.outlineColor || styles.borderColor,
+              )}
+              designSystemColors={designSystemColors}
               width={styles.outlineWidth || "0px"}
               styleValue={styles.outlineStyle || "solid"}
               outlineOffset={styles.outlineOffset || "0px"}

package/corpus/templates/design/app/components/design/inspector/DesignColorPicker.tsx

@@ -43,6 +43,14 @@ import {
 } from "@/components/ui/tooltip";
 import { cn } from "@/lib/utils";
 
+import {
+  groupColorSwatches,
+  parseTokenReference,
+  resolveTokenNameForColor,
+  swatchLabel,
+  tokenReferenceValue,
+  type DesignSystemColorSwatch,
+} from "../edit-panel/design-system-swatches";
 import {
   GlslShaderPanel,
   type GlslShaderPanelContext,
@@ -190,6 +198,16 @@ export interface DesignColorPickerProps {
    * limited in the caller; the component renders whatever is passed.
    */
   documentColors?: string[];
+  /**
+   * Colour tokens from the design's linked Brand Kit, listed by name above
+   * "Document colors". Picking one writes `var(--token, #hex)`.
+   */
+  designSystemColors?: DesignSystemColorSwatch[];
+  /**
+   * The colour the canvas resolved `value` to. Only consulted when `value` is a
+   * token reference this document cannot resolve on its own.
+   */
+  resolvedColor?: string;
   /**
    * Restricts which paint-type tabs are rendered (Solid, Linear, Radial, …).
    * Omit to show every type (default, backward compatible). Callers that
@@ -703,6 +721,8 @@ export function DesignColorPicker({
   gradientType,
   onGradientTypeChange,
   documentColors,
+  designSystemColors,
+  resolvedColor,
   supportedPaintTypes,
   shaderContext,
   glslShaderContext,
@@ -712,7 +732,15 @@ export function DesignColorPicker({
   className,
 }: DesignColorPickerProps) {
   const copy = { ...DEFAULT_LABELS, ...labels };
-  const color = parseCssColorExtended(value) ?? FALLBACK_COLOR;
+  // A `var(--token, #hex)` fill has no colour of its own outside the preview
+  // document; read the literal so the SV field and chip are not blank.
+  const tokenReference = parseTokenReference(value);
+  // Generated CSS writes bare `var(--token)`, unresolvable here, so the colour
+  // has to come from what the canvas painted.
+  const color =
+    parseCssColorExtended(tokenReference?.fallback ?? value) ??
+    (tokenReference ? parseCssColorExtended(resolvedColor ?? "") : null) ??
+    FALLBACK_COLOR;
   const hsv = rgbaToHsv(color);
   const hsl = rgbaToHsl(color);
   const effectiveOpacity = opacity ?? alphaToOpacity(color.a);
@@ -814,6 +842,16 @@ export function DesignColorPicker({
     ? rawEffectivePaintType
     : "solid";
 
+  const tokenName = useMemo(() => {
+    if (effectivePaintType !== "solid" || !designSystemColors?.length) {
+      return null;
+    }
+    return resolveTokenNameForColor(
+      tokenReference ? value : rgbaToCss(color),
+      designSystemColors,
+    );
+  }, [color, designSystemColors, effectivePaintType, tokenReference, value]);
+
   // Resolve the active gradient: prefer EditPanel-driven props; otherwise parse
   // the live CSS value, falling back to local edit state.
   const parsedGradient = useMemo(
@@ -896,6 +934,15 @@ export function DesignColorPicker({
     onChange(next);
   };
 
+  /**
+   * Same route as `emitColor`: a solid fill must not detour through the
+   * layered-paint merge just because its value is an expression.
+   */
+  const emitTokenReference = (nextValue: string) => {
+    lastEmittedValueRef.current = nextValue;
+    onChange(nextValue);
+  };
+
   const emitPaintValue = (nextValue: string) => {
     lastEmittedValueRef.current = nextValue;
     if (onPaintValueChange) onPaintValueChange(nextValue);
@@ -1336,8 +1383,14 @@ export function DesignColorPicker({
               className="size-4 shrink-0 rounded-[3px] border border-border/60"
               style={triggerSwatchStyle(value, color)}
             />
-            <span className="min-w-0 flex-1 truncate text-left tabular-nums uppercase !text-[11px]">
-              {triggerLabel(effectivePaintType, color)}
+            <span
+              className={cn(
+                "min-w-0 flex-1 truncate text-left tabular-nums !text-[11px]",
+                // Hex is conventionally upper-case; a token name is not.
+                !tokenName && "uppercase",
+              )}
+            >
+              {tokenName ?? triggerLabel(effectivePaintType, color)}
             </span>
             <span className="tabular-nums text-muted-foreground !text-[11px]">
               {effectiveOpacity}%
@@ -1350,7 +1403,7 @@ export function DesignColorPicker({
           side="left"
           align="start"
           sideOffset={8}
-          className="z-[10000] w-[252px] p-0 shadow-xl"
+          className="z-[10000] max-h-[calc(100vh-5rem)] w-[252px] overflow-y-auto p-0 shadow-xl"
           // Keep the picker open when the style change triggered by a paint-type
           // switch causes the canvas to re-project the element. Without this,
           // Radix treats the resulting focus shift as an "interact outside" event
@@ -1779,6 +1832,91 @@ export function DesignColorPicker({
                   </div>
                 )}
 
+                {/* ── Design system ────────────────────────────────────────── */}
+                {/* The linked Brand Kit's colour tokens, under the names the
+                    source system uses. Clicking one applies its value; it does
+                    not bind to the CSS variable, so the fill will not follow a
+                    later kit edit. */}
+                {designSystemColors && designSystemColors.length > 0 && (
+                  <div className="border-t border-border/70 px-3 py-2.5">
+                    <div className="mb-2 flex h-6 w-full items-center justify-between gap-2 px-0.5 !text-[11px] text-muted-foreground">
+                      <span className="truncate">
+                        {"Design system" /* i18n-ignore design picker source */}
+                      </span>
+                      {designSystemColors[0]?.source ? (
+                        <span className="shrink-0 truncate opacity-80">
+                          {designSystemColors[0].source}
+                        </span>
+                      ) : null}
+                    </div>
+
+                    {/* A list, not a swatch grid: the token's name is the whole
+                        point of this section, and a grid hides it behind hover. */}
+                    <div className="max-h-40 space-y-2 overflow-y-auto pe-0.5">
+                      {groupColorSwatches(designSystemColors).map((group) => (
+                        <div key={group.label ?? "ungrouped"}>
+                          {group.label ? (
+                            <div className="mb-1 truncate px-0.5 !text-[10px] text-muted-foreground/80">
+                              {group.label}
+                            </div>
+                          ) : null}
+                          <div className="space-y-0.5">
+                            {group.swatches.map((swatch) => {
+                              const isActive =
+                                !activeGradient && tokenName === swatch.name;
+                              return (
+                                <button
+                                  key={swatch.cssVar}
+                                  type="button"
+                                  disabled={disabled}
+                                  aria-label={swatchLabel(swatch)}
+                                  aria-pressed={isActive}
+                                  title={`${swatch.name} · ${swatch.cssVar}`}
+                                  className={cn(
+                                    "flex w-full items-center gap-2 rounded-sm border px-1 py-0.5 text-left transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+                                    isActive
+                                      ? "border-primary bg-accent/40"
+                                      : "border-transparent hover:bg-accent/40",
+                                  )}
+                                  onClick={() => {
+                                    if (activeGradient) {
+                                      // The stop parser round-trips colours,
+                                      // not var() expressions.
+                                      emitStopColor(
+                                        parseCssColorExtended(swatch.value) ??
+                                          color,
+                                      );
+                                    } else {
+                                      emitTokenReference(
+                                        tokenReferenceValue(swatch),
+                                      );
+                                    }
+                                    notifyChangeComplete();
+                                  }}
+                                >
+                                  <span
+                                    className="size-4 shrink-0 rounded-[3px] border border-border/60"
+                                    style={swatchStyle(swatch.value)}
+                                  />
+                                  <span className="min-w-0 flex-1 truncate !text-[11px] text-foreground">
+                                    {swatchLabel(swatch)}
+                                  </span>
+                                  <span className="shrink-0 font-mono uppercase !text-[10px] text-muted-foreground">
+                                    {rgbaToHex(
+                                      parseCssColorExtended(swatch.value) ??
+                                        color,
+                                    )}
+                                  </span>
+                                </button>
+                              );
+                            })}
+                          </div>
+                        </div>
+                      ))}
+                    </div>
+                  </div>
+                )}
+
                 {/* ── Document colors ──────────────────────────────────────── */}
                 {/* Renders the palette of colors already used in the design.
                     When `documentColors` is provided, those swatches are shown;

package/corpus/templates/design/app/components/design/types.ts

@@ -95,6 +95,12 @@ export interface ElementInfo {
    * must fall back to computedStyles-based inference when absent.
    */
   inlineStyles?: Record<string, string>;
+  /**
+   * Colour declarations resolved through the cascade (inline, else the last
+   * matching rule). Generated designs style via classes, so `inlineStyles` is
+   * empty and only this preserves a `var(--token, …)` reference.
+   */
+  authoredColorStyles?: Record<string, string>;
   /**
    * Value of the element's `data-an-primitive` attribute (e.g. "text",
    * "rectangle", "frame", "ellipse") when present. Canvas-drawn primitives —