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.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>