@agent-native/core 0.140.0 → 0.141.0

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

@@ -42,7 +42,6 @@ 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";
@@ -52,7 +51,6 @@ import {
   SectionIconButton,
   useRowDragReorder,
 } from "./inspector-controls";
-import { authoredColorValue } from "./interaction-state-helpers";
 import { ColorInput, PanelSection } from "./panel-primitives";
 import {
   colorHasVisibleAlpha,
@@ -297,15 +295,10 @@ 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;
@@ -459,8 +452,6 @@ 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>
@@ -473,15 +464,12 @@ 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
@@ -520,13 +508,11 @@ 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(authoredColorValue(element, shadowProperty));
+    : parseShadowLayers(
+        shadowTargetsText ? styles.textShadow : styles.boxShadow,
+      );
   const setShadowLayers = (layers: ShadowLayer[], meta?: StyleChangeMeta) => {
     setHiddenEffectStash((stash) =>
       remapIndexedShadowStash(stash, effectStashKey, layers),
@@ -690,8 +676,6 @@ 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,12 +23,6 @@ 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";
@@ -52,13 +46,11 @@ 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 {
@@ -117,7 +109,6 @@ export function FillProperties({
   onStyleChange,
   onStylesChange,
   documentColorPalette = [],
-  designSystemColors,
   glslShaderContext,
   motionKeyframeContext,
   breakpointOverrideContext,
@@ -130,9 +121,6 @@ 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
@@ -156,20 +144,9 @@ export function FillProperties({
     Record<string, string>
   >({});
   const fillStashKey = elementStableKey(element);
-  // 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
+  const fillValue = 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 || "");
@@ -206,25 +183,24 @@ 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 hiddenFillToken = hiddenTokenReference(fillValue);
-  const isHidden = Boolean(hiddenFillToken) || !colorHasVisibleAlpha(fillValue);
-
+  const isHidden = !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);
-      return;
+    } 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");
     }
-    onStyleChange(fillProperty, hiddenColorWrite(fillValue, zeroAlphaLiteral));
   };
 
   // Reorder fill layers by dragging: permute all four index-aligned parallel
@@ -409,8 +385,6 @@ 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,20 +1,5 @@
 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,10 +26,6 @@ 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,
@@ -229,8 +225,6 @@ export function ColorInput({
   onBlendModeChange,
   supportsLayeredFills = false,
   documentColors,
-  designSystemColors,
-  resolvedColor,
   supportedPaintTypes,
   pickerKey,
   glslShaderContext,
@@ -276,8 +270,6 @@ 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
@@ -377,15 +369,7 @@ 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.
-    // 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;
-    }
+    if (!supportsLayeredFills && !parseCssColor(next)) return;
     pendingGestureRef.current = phase === "preview";
     setDraft(next);
     onChange(next, { phase });
@@ -590,8 +574,6 @@ 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,12 +213,6 @@ 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,12 +23,6 @@ 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";
@@ -47,7 +41,6 @@ import {
   strokeShowPatch,
   textStrokeAddPatch,
   textStrokeIsVisible,
-  zeroAlphaLiteral,
 } from "./position-helpers";
 import { isMixedValue } from "./selection-helpers";
 import type {
@@ -67,26 +60,6 @@ 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";
 
@@ -94,7 +67,6 @@ function StrokeLayerControl({
   kind,
   visible,
   color,
-  designSystemColors,
   width,
   styleValue,
   outlineOffset,
@@ -108,7 +80,6 @@ function StrokeLayerControl({
   kind: StrokeLayerKind;
   visible: boolean;
   color: string;
-  designSystemColors?: DesignSystemColorSwatch[];
   width: string;
   styleValue: string;
   /** Only meaningful when `kind === "outline"` — distinguishes outside vs
@@ -133,7 +104,6 @@ function StrokeLayerControl({
     label: t(`editPanel.labels.${option.key}`),
   }));
   const prefix = kind === "border" ? "border" : "outline";
-  const hiddenToken = hiddenTokenReference(color);
   const position: StrokePosition =
     kind === "border"
       ? "inside"
@@ -192,10 +162,11 @@ function StrokeLayerControl({
         <div className="min-w-0 flex-1">
           <ColorInput
             label=""
-            // Not cssColorOrFallback: an unset stroke must stay unset here
-            // rather than render as a black the design never chose.
-            value={hiddenToken ?? color}
-            designSystemColors={designSystemColors}
+            value={cssColorOrFallback(
+              color,
+              /* guard:allow-raw-color - ColorInput needs a concrete swatch fallback. */
+              "#000000",
+            )}
             onChange={(value, meta) =>
               onStyleChange(`${prefix}Color`, value, meta)
             }
@@ -216,18 +187,21 @@ 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`,
-                hiddenColorWrite(color, zeroAlphaLiteral),
+                parsed ? rgbaToCss(withColorOpacity(parsed, 0)) : "transparent",
               );
               return;
             }
             // Restore color/width/style as ONE commit (single undo step)
             // rather than three sequential onStyleChange calls — see
             // strokeShowPatch's doc comment.
-            const showPatch = strokeShowPatch(prefix, color, width, styleValue);
-            if (hiddenToken) showPatch[`${prefix}Color`] = hiddenToken;
-            commitStylePatch(showPatch, onStyleChange, onStylesChange);
+            commitStylePatch(
+              strokeShowPatch(prefix, color, width, styleValue),
+              onStyleChange,
+              onStylesChange,
+            );
           }}
         >
           {visible ? (
@@ -323,15 +297,12 @@ 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;
 }) {
@@ -482,12 +453,11 @@ export function StrokeProperties({
             <StrokeLayerControl
               kind="border"
               visible={borderVisible}
-              color={authoredStrokeColor(
-                element,
-                "borderColor",
-                styles.borderColor,
-              )}
-              designSystemColors={designSystemColors}
+              color={
+                styles.borderColor ||
+                /* guard:allow-raw-color - a new stroke needs a concrete color. */
+                "#000000"
+              }
               width={styles.borderWidth || "0px"}
               styleValue={styles.borderStyle || "none"}
               onStyleChange={onStyleChange}
@@ -508,12 +478,12 @@ export function StrokeProperties({
             <StrokeLayerControl
               kind="outline"
               visible={outlineVisible}
-              color={authoredStrokeColor(
-                element,
-                "outlineColor",
-                styles.outlineColor || styles.borderColor,
-              )}
-              designSystemColors={designSystemColors}
+              color={
+                styles.outlineColor ||
+                styles.borderColor ||
+                /* guard:allow-raw-color - a new stroke needs a concrete color. */
+                "#000000"
+              }
               width={styles.outlineWidth || "0px"}
               styleValue={styles.outlineStyle || "solid"}
               outlineOffset={styles.outlineOffset || "0px"}

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

@@ -43,14 +43,6 @@ 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,
@@ -198,16 +190,6 @@ 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
@@ -721,8 +703,6 @@ export function DesignColorPicker({
   gradientType,
   onGradientTypeChange,
   documentColors,
-  designSystemColors,
-  resolvedColor,
   supportedPaintTypes,
   shaderContext,
   glslShaderContext,
@@ -732,15 +712,7 @@ export function DesignColorPicker({
   className,
 }: DesignColorPickerProps) {
   const copy = { ...DEFAULT_LABELS, ...labels };
-  // 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 color = parseCssColorExtended(value) ?? FALLBACK_COLOR;
   const hsv = rgbaToHsv(color);
   const hsl = rgbaToHsl(color);
   const effectiveOpacity = opacity ?? alphaToOpacity(color.a);
@@ -842,16 +814,6 @@ 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(
@@ -934,15 +896,6 @@ 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);
@@ -1383,14 +1336,8 @@ export function DesignColorPicker({
               className="size-4 shrink-0 rounded-[3px] border border-border/60"
               style={triggerSwatchStyle(value, 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 className="min-w-0 flex-1 truncate text-left tabular-nums uppercase !text-[11px]">
+              {triggerLabel(effectivePaintType, color)}
             </span>
             <span className="tabular-nums text-muted-foreground !text-[11px]">
               {effectiveOpacity}%
@@ -1403,7 +1350,7 @@ export function DesignColorPicker({
           side="left"
           align="start"
           sideOffset={8}
-          className="z-[10000] max-h-[calc(100vh-5rem)] w-[252px] overflow-y-auto p-0 shadow-xl"
+          className="z-[10000] w-[252px] 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
@@ -1832,91 +1779,6 @@ 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,12 +95,6 @@ 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 —