Point color, radius, stroke, focus, and type tokens at the Figma scale so later sections use the same values.

Co-authored-by: Cursor <cursoragent@cursor.com>

app/components/controls/Upload/Upload.container.tsx

@@ -3,6 +3,7 @@
 import { memo } from "react";
 import { useTranslation } from "../../../contexts/MessagesContext";
 import UploadView from "./Upload.view";
+import type { UploadStateValue } from "../../../../lib/propNormalization";
 import type { UploadProps } from "./Upload.types";
 
 /**
@@ -12,6 +13,8 @@ import type { UploadProps } from "./Upload.types";
 const UploadContainer = memo<UploadProps>(
   ({
     active = true,
+    state,
+    hasLabel,
     label,
     showHelpIcon = true,
     hintText,
@@ -19,10 +22,13 @@ const UploadContainer = memo<UploadProps>(
     className = "",
   }) => {
     const t = useTranslation("controlsChrome");
+    const resolvedState: UploadStateValue =
+      state ?? (active ? "default" : "disabled");
 
     return (
       <UploadView
-        active={active}
+        state={resolvedState}
+        hasLabel={hasLabel ?? Boolean(label)}
         label={label}
         showHelpIcon={showHelpIcon}
         hintText={hintText ?? t("uploadHintDefault")}

app/components/controls/Upload/Upload.types.ts

@@ -1,11 +1,23 @@
+import type { UploadStateValue } from "../../../../lib/propNormalization";
+
 export interface UploadProps {
   /**
    * Whether the upload component is in active state.
    * When active, button has white background with black text.
    * When inactive, button has dark background with gray text.
+   * Prefer `state`. `active={false}` maps to `disabled`.
    * @default true
    */
   active?: boolean;
+  /**
+   * Figma state axis. Disabled dims the control and turns the button off.
+   */
+  state?: UploadStateValue;
+  /**
+   * Show the label. The upload step uses the control with this off.
+   * Defaults to true when `label` is set.
+   */
+  hasLabel?: boolean;
   /**
    * Label text displayed above the upload component
    */
@@ -31,7 +43,8 @@ export interface UploadProps {
 }
 
 export interface UploadViewProps {
-  active: boolean;
+  state: UploadStateValue;
+  hasLabel: boolean;
   label?: string;
   showHelpIcon: boolean;
   hintText: string;

app/components/controls/Upload/Upload.view.tsx

@@ -5,7 +5,8 @@ import InputLabel from "../../type/InputLabel";
 import type { UploadViewProps } from "./Upload.types";
 
 function UploadView({
-  active = true,
+  state,
+  hasLabel,
   label,
   showHelpIcon = true,
   hintText,
@@ -14,7 +15,8 @@ function UploadView({
   onClick,
   className = "",
 }: UploadViewProps) {
-  const isActive = active;
+  const isActive = state !== "disabled";
+  const isDisabled = state === "disabled";
 
   // Button styles based on active state
   const buttonBgClass = isActive
@@ -37,10 +39,10 @@ function UploadView({
 
   return (
     <div
-      className={`flex flex-col gap-[var(--measures-spacing-300,12px)] items-start relative w-full ${className}`}
+      className={`flex flex-col gap-[var(--space-300)] items-start relative w-full ${className}`}
     >
       {/* Label using InputLabel component */}
-      {label && (
+      {hasLabel && label ? (
         <InputLabel
           label={label}
           helpIcon={showHelpIcon}
@@ -49,15 +51,24 @@ function UploadView({
           size="s"
           palette="default"
         />
-      )}
+      ) : null}
 
       {/* Upload container — max width per create-flow spec */}
-      <div className="bg-[var(--color-surface-default-secondary,#141414)] mx-auto flex w-full max-w-[474px] shrink-0 items-center justify-center gap-[24px] rounded-[var(--measures-radius-200,8px)] px-[var(--measures-spacing-600,24px)] py-[var(--measures-spacing-1200,48px)]">
+      <div
+        className={`bg-[var(--color-surface-default-secondary,#141414)] mx-auto flex w-full max-w-[474px] shrink-0 items-center justify-center gap-[24px] rounded-[var(--radius-200)] px-[var(--space-600)] py-[var(--space-1200)] ${
+          state === "error"
+            ? "border border-[var(--color-border-default-utility-negative)]"
+            : ""
+        } ${state === "focus" ? "shadow-[var(--shadow-focus-default)]" : ""}`}
+      >
         {/* Upload button */}
         <button
           type="button"
           onClick={onClick}
-          className={`${buttonBgClass} flex gap-[var(--measures-spacing-150,6px)] items-center justify-center overflow-clip px-[var(--space-400,16px)] py-[var(--measures-spacing-300,12px)] rounded-[var(--measures-radius-full,9999px)] shrink-0 hover:opacity-80 transition-opacity`}
+          disabled={isDisabled}
+          className={`${buttonBgClass} flex gap-[var(--space-150)] items-center justify-center overflow-clip px-[var(--space-400)] py-[var(--space-300)] rounded-[var(--radius-full)] shrink-0 hover:opacity-80 transition-opacity ${
+            state === "hover" ? "opacity-80" : ""
+          } ${state === "active" ? "scale-[0.98]" : ""}`}
           aria-label={uploadAriaLabel}
         >
           {/* Upload icon */}
@@ -98,7 +109,7 @@ function UploadView({
           </div>
           {/* Button text */}
           <div
-            className={`flex flex-col font-medium justify-center leading-[0] relative shrink-0 text-[length:var(--sizing-400,16px)] whitespace-nowrap ${buttonTextColor}`}
+            className={`flex flex-col font-medium justify-center leading-[0] relative shrink-0 text-[length:var(--sizing-400)] whitespace-nowrap ${buttonTextColor}`}
           >
             <p className="leading-[20px]">{uploadButtonLabel}</p>
           </div>
@@ -106,7 +117,7 @@ function UploadView({
 
         {/* Description text */}
         <div
-          className={`flex flex-[1_0_0] flex-col font-normal h-[32px] justify-center leading-[0] min-h-px min-w-px relative text-[length:var(--sizing-350,14px)] ${descriptionTextColor}`}
+          className={`flex flex-[1_0_0] flex-col font-normal h-[32px] justify-center leading-[0] min-h-px min-w-px relative text-[length:var(--sizing-350)] ${descriptionTextColor}`}
         >
           <p className="leading-[20px] whitespace-pre-wrap">{hintText}</p>
         </div>