diff --git a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
index 366338e493..b7884bb8c0 100644
--- a/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
+++ b/src/__tests__/snapshot-tests/__snapshots__/design-tokens.test.ts.snap
@@ -41,6 +41,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
           "$value": "0px",
         },
+        "border-radius-dropzone": {
+          "$description": "The border radius of file upload dropzone.",
+          "$value": "0px",
+        },
         "border-radius-flashbar": {
           "$description": "The border radius of flash messages in flashbars.",
           "$value": "0px",
@@ -1784,6 +1788,48 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#99cbe4",
           },
         },
+        "color-dropzone-background-default": {
+          "$description": "The default color of file upload dropzone background.",
+          "$value": {
+            "dark": "#1a2029",
+            "light": "#ffffff",
+          },
+        },
+        "color-dropzone-background-hover": {
+          "$description": "The color of file upload dropzone background in hovered state.",
+          "$value": {
+            "dark": "#12293b",
+            "light": "#f1faff",
+          },
+        },
+        "color-dropzone-border-default": {
+          "$description": "The default color of file upload dropzone border.",
+          "$value": {
+            "dark": "#687078",
+            "light": "#879596",
+          },
+        },
+        "color-dropzone-border-hover": {
+          "$description": "The color of file upload dropzone border in hovered state.",
+          "$value": {
+            "dark": "#44b9d6",
+            "light": "#002b66",
+          },
+        },
+        "color-dropzone-text-default": {
+          "$description": "The default color of file upload dropzone text.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#545b64",
+          },
+        },
+        "color-dropzone-text-hover": {
+          "$description": "The color of file upload dropzone text in hovered state.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#545b64",
+          },
+        },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
@@ -2620,6 +2666,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
           "$value": "0px",
         },
+        "border-radius-dropzone": {
+          "$description": "The border radius of file upload dropzone.",
+          "$value": "0px",
+        },
         "border-radius-flashbar": {
           "$description": "The border radius of flash messages in flashbars.",
           "$value": "0px",
@@ -4363,6 +4413,48 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#99cbe4",
           },
         },
+        "color-dropzone-background-default": {
+          "$description": "The default color of file upload dropzone background.",
+          "$value": {
+            "dark": "#1a2029",
+            "light": "#ffffff",
+          },
+        },
+        "color-dropzone-background-hover": {
+          "$description": "The color of file upload dropzone background in hovered state.",
+          "$value": {
+            "dark": "#12293b",
+            "light": "#f1faff",
+          },
+        },
+        "color-dropzone-border-default": {
+          "$description": "The default color of file upload dropzone border.",
+          "$value": {
+            "dark": "#687078",
+            "light": "#879596",
+          },
+        },
+        "color-dropzone-border-hover": {
+          "$description": "The color of file upload dropzone border in hovered state.",
+          "$value": {
+            "dark": "#44b9d6",
+            "light": "#002b66",
+          },
+        },
+        "color-dropzone-text-default": {
+          "$description": "The default color of file upload dropzone text.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#545b64",
+          },
+        },
+        "color-dropzone-text-hover": {
+          "$description": "The color of file upload dropzone text in hovered state.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#545b64",
+          },
+        },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
@@ -5199,6 +5291,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
           "$value": "0px",
         },
+        "border-radius-dropzone": {
+          "$description": "The border radius of file upload dropzone.",
+          "$value": "0px",
+        },
         "border-radius-flashbar": {
           "$description": "The border radius of flash messages in flashbars.",
           "$value": "0px",
@@ -6942,6 +7038,48 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#99cbe4",
           },
         },
+        "color-dropzone-background-default": {
+          "$description": "The default color of file upload dropzone background.",
+          "$value": {
+            "dark": "#1a2029",
+            "light": "#ffffff",
+          },
+        },
+        "color-dropzone-background-hover": {
+          "$description": "The color of file upload dropzone background in hovered state.",
+          "$value": {
+            "dark": "#12293b",
+            "light": "#f1faff",
+          },
+        },
+        "color-dropzone-border-default": {
+          "$description": "The default color of file upload dropzone border.",
+          "$value": {
+            "dark": "#687078",
+            "light": "#879596",
+          },
+        },
+        "color-dropzone-border-hover": {
+          "$description": "The color of file upload dropzone border in hovered state.",
+          "$value": {
+            "dark": "#44b9d6",
+            "light": "#002b66",
+          },
+        },
+        "color-dropzone-text-default": {
+          "$description": "The default color of file upload dropzone text.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#545b64",
+          },
+        },
+        "color-dropzone-text-hover": {
+          "$description": "The color of file upload dropzone text in hovered state.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#545b64",
+          },
+        },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
@@ -7778,6 +7916,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
           "$value": "0px",
         },
+        "border-radius-dropzone": {
+          "$description": "The border radius of file upload dropzone.",
+          "$value": "0px",
+        },
         "border-radius-flashbar": {
           "$description": "The border radius of flash messages in flashbars.",
           "$value": "0px",
@@ -9521,6 +9663,48 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#99cbe4",
           },
         },
+        "color-dropzone-background-default": {
+          "$description": "The default color of file upload dropzone background.",
+          "$value": {
+            "dark": "#1a2029",
+            "light": "#ffffff",
+          },
+        },
+        "color-dropzone-background-hover": {
+          "$description": "The color of file upload dropzone background in hovered state.",
+          "$value": {
+            "dark": "#12293b",
+            "light": "#f1faff",
+          },
+        },
+        "color-dropzone-border-default": {
+          "$description": "The default color of file upload dropzone border.",
+          "$value": {
+            "dark": "#687078",
+            "light": "#879596",
+          },
+        },
+        "color-dropzone-border-hover": {
+          "$description": "The color of file upload dropzone border in hovered state.",
+          "$value": {
+            "dark": "#44b9d6",
+            "light": "#002b66",
+          },
+        },
+        "color-dropzone-text-default": {
+          "$description": "The default color of file upload dropzone text.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#545b64",
+          },
+        },
+        "color-dropzone-text-hover": {
+          "$description": "The color of file upload dropzone text in hovered state.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#545b64",
+          },
+        },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
@@ -10357,6 +10541,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
           "$value": "0px",
         },
+        "border-radius-dropzone": {
+          "$description": "The border radius of file upload dropzone.",
+          "$value": "0px",
+        },
         "border-radius-flashbar": {
           "$description": "The border radius of flash messages in flashbars.",
           "$value": "0px",
@@ -12100,6 +12288,48 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#99cbe4",
           },
         },
+        "color-dropzone-background-default": {
+          "$description": "The default color of file upload dropzone background.",
+          "$value": {
+            "dark": "#1a2029",
+            "light": "#ffffff",
+          },
+        },
+        "color-dropzone-background-hover": {
+          "$description": "The color of file upload dropzone background in hovered state.",
+          "$value": {
+            "dark": "#12293b",
+            "light": "#f1faff",
+          },
+        },
+        "color-dropzone-border-default": {
+          "$description": "The default color of file upload dropzone border.",
+          "$value": {
+            "dark": "#687078",
+            "light": "#879596",
+          },
+        },
+        "color-dropzone-border-hover": {
+          "$description": "The color of file upload dropzone border in hovered state.",
+          "$value": {
+            "dark": "#44b9d6",
+            "light": "#002b66",
+          },
+        },
+        "color-dropzone-text-default": {
+          "$description": "The default color of file upload dropzone text.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#545b64",
+          },
+        },
+        "color-dropzone-text-hover": {
+          "$description": "The color of file upload dropzone text in hovered state.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#545b64",
+          },
+        },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
@@ -12936,6 +13166,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
           "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
           "$value": "0px",
         },
+        "border-radius-dropzone": {
+          "$description": "The border radius of file upload dropzone.",
+          "$value": "0px",
+        },
         "border-radius-flashbar": {
           "$description": "The border radius of flash messages in flashbars.",
           "$value": "0px",
@@ -14679,6 +14913,48 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
             "light": "#0073bb",
           },
         },
+        "color-dropzone-background-default": {
+          "$description": "The default color of file upload dropzone background.",
+          "$value": {
+            "dark": "#1a2029",
+            "light": "#1a2029",
+          },
+        },
+        "color-dropzone-background-hover": {
+          "$description": "The color of file upload dropzone background in hovered state.",
+          "$value": {
+            "dark": "#12293b",
+            "light": "#12293b",
+          },
+        },
+        "color-dropzone-border-default": {
+          "$description": "The default color of file upload dropzone border.",
+          "$value": {
+            "dark": "#687078",
+            "light": "#687078",
+          },
+        },
+        "color-dropzone-border-hover": {
+          "$description": "The color of file upload dropzone border in hovered state.",
+          "$value": {
+            "dark": "#44b9d6",
+            "light": "#44b9d6",
+          },
+        },
+        "color-dropzone-text-default": {
+          "$description": "The default color of file upload dropzone text.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-dropzone-text-hover": {
+          "$description": "The color of file upload dropzone text in hovered state.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
@@ -15515,6 +15791,10 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
       "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
       "$value": "0px",
     },
+    "border-radius-dropzone": {
+      "$description": "The border radius of file upload dropzone.",
+      "$value": "0px",
+    },
     "border-radius-flashbar": {
       "$description": "The border radius of flash messages in flashbars.",
       "$value": "0px",
@@ -17258,6 +17538,48 @@ exports[`Design tokens artifacts Design tokens JSON for classic matches the snap
         "light": "#99cbe4",
       },
     },
+    "color-dropzone-background-default": {
+      "$description": "The default color of file upload dropzone background.",
+      "$value": {
+        "dark": "#1a2029",
+        "light": "#ffffff",
+      },
+    },
+    "color-dropzone-background-hover": {
+      "$description": "The color of file upload dropzone background in hovered state.",
+      "$value": {
+        "dark": "#12293b",
+        "light": "#f1faff",
+      },
+    },
+    "color-dropzone-border-default": {
+      "$description": "The default color of file upload dropzone border.",
+      "$value": {
+        "dark": "#687078",
+        "light": "#879596",
+      },
+    },
+    "color-dropzone-border-hover": {
+      "$description": "The color of file upload dropzone border in hovered state.",
+      "$value": {
+        "dark": "#44b9d6",
+        "light": "#002b66",
+      },
+    },
+    "color-dropzone-text-default": {
+      "$description": "The default color of file upload dropzone text.",
+      "$value": {
+        "dark": "#c6c6cd",
+        "light": "#545b64",
+      },
+    },
+    "color-dropzone-text-hover": {
+      "$description": "The color of file upload dropzone text in hovered state.",
+      "$value": {
+        "dark": "#c6c6cd",
+        "light": "#545b64",
+      },
+    },
     "color-foreground-control-default": {
       "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
       "$value": {
@@ -18099,6 +18421,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
           "$value": "8px",
         },
+        "border-radius-dropzone": {
+          "$description": "The border radius of file upload dropzone.",
+          "$value": "12px",
+        },
         "border-radius-flashbar": {
           "$description": "The border radius of flash messages in flashbars.",
           "$value": "12px",
@@ -19842,6 +20168,48 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#d1f1ff",
           },
         },
+        "color-dropzone-background-default": {
+          "$description": "The default color of file upload dropzone background.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
+        "color-dropzone-background-hover": {
+          "$description": "The color of file upload dropzone background in hovered state.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#f0fbff",
+          },
+        },
+        "color-dropzone-border-default": {
+          "$description": "The default color of file upload dropzone border.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#8c8c94",
+          },
+        },
+        "color-dropzone-border-hover": {
+          "$description": "The color of file upload dropzone border in hovered state.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#002b66",
+          },
+        },
+        "color-dropzone-text-default": {
+          "$description": "The default color of file upload dropzone text.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#424650",
+          },
+        },
+        "color-dropzone-text-hover": {
+          "$description": "The color of file upload dropzone text in hovered state.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#424650",
+          },
+        },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
@@ -20678,6 +21046,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
           "$value": "8px",
         },
+        "border-radius-dropzone": {
+          "$description": "The border radius of file upload dropzone.",
+          "$value": "12px",
+        },
         "border-radius-flashbar": {
           "$description": "The border radius of flash messages in flashbars.",
           "$value": "12px",
@@ -22421,6 +22793,48 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#006ce0",
           },
         },
+        "color-dropzone-background-default": {
+          "$description": "The default color of file upload dropzone background.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-dropzone-background-hover": {
+          "$description": "The color of file upload dropzone background in hovered state.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#001129",
+          },
+        },
+        "color-dropzone-border-default": {
+          "$description": "The default color of file upload dropzone border.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-dropzone-border-hover": {
+          "$description": "The color of file upload dropzone border in hovered state.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-dropzone-text-default": {
+          "$description": "The default color of file upload dropzone text.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-dropzone-text-hover": {
+          "$description": "The color of file upload dropzone text in hovered state.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
@@ -23257,6 +23671,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
           "$value": "8px",
         },
+        "border-radius-dropzone": {
+          "$description": "The border radius of file upload dropzone.",
+          "$value": "12px",
+        },
         "border-radius-flashbar": {
           "$description": "The border radius of flash messages in flashbars.",
           "$value": "12px",
@@ -25000,6 +25418,48 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#d1f1ff",
           },
         },
+        "color-dropzone-background-default": {
+          "$description": "The default color of file upload dropzone background.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
+        "color-dropzone-background-hover": {
+          "$description": "The color of file upload dropzone background in hovered state.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#f0fbff",
+          },
+        },
+        "color-dropzone-border-default": {
+          "$description": "The default color of file upload dropzone border.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#8c8c94",
+          },
+        },
+        "color-dropzone-border-hover": {
+          "$description": "The color of file upload dropzone border in hovered state.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#002b66",
+          },
+        },
+        "color-dropzone-text-default": {
+          "$description": "The default color of file upload dropzone text.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#424650",
+          },
+        },
+        "color-dropzone-text-hover": {
+          "$description": "The color of file upload dropzone text in hovered state.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#424650",
+          },
+        },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
@@ -25836,6 +26296,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
           "$value": "8px",
         },
+        "border-radius-dropzone": {
+          "$description": "The border radius of file upload dropzone.",
+          "$value": "12px",
+        },
         "border-radius-flashbar": {
           "$description": "The border radius of flash messages in flashbars.",
           "$value": "12px",
@@ -27579,6 +28043,48 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#d1f1ff",
           },
         },
+        "color-dropzone-background-default": {
+          "$description": "The default color of file upload dropzone background.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
+        "color-dropzone-background-hover": {
+          "$description": "The color of file upload dropzone background in hovered state.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#f0fbff",
+          },
+        },
+        "color-dropzone-border-default": {
+          "$description": "The default color of file upload dropzone border.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#8c8c94",
+          },
+        },
+        "color-dropzone-border-hover": {
+          "$description": "The color of file upload dropzone border in hovered state.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#002b66",
+          },
+        },
+        "color-dropzone-text-default": {
+          "$description": "The default color of file upload dropzone text.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#424650",
+          },
+        },
+        "color-dropzone-text-hover": {
+          "$description": "The color of file upload dropzone text in hovered state.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#424650",
+          },
+        },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
@@ -28415,6 +28921,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
           "$value": "8px",
         },
+        "border-radius-dropzone": {
+          "$description": "The border radius of file upload dropzone.",
+          "$value": "12px",
+        },
         "border-radius-flashbar": {
           "$description": "The border radius of flash messages in flashbars.",
           "$value": "12px",
@@ -30158,6 +30668,48 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#d1f1ff",
           },
         },
+        "color-dropzone-background-default": {
+          "$description": "The default color of file upload dropzone background.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
+        "color-dropzone-background-hover": {
+          "$description": "The color of file upload dropzone background in hovered state.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#f0fbff",
+          },
+        },
+        "color-dropzone-border-default": {
+          "$description": "The default color of file upload dropzone border.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#8c8c94",
+          },
+        },
+        "color-dropzone-border-hover": {
+          "$description": "The color of file upload dropzone border in hovered state.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#002b66",
+          },
+        },
+        "color-dropzone-text-default": {
+          "$description": "The default color of file upload dropzone text.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#424650",
+          },
+        },
+        "color-dropzone-text-hover": {
+          "$description": "The color of file upload dropzone text in hovered state.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#424650",
+          },
+        },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
@@ -30994,6 +31546,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
           "$value": "8px",
         },
+        "border-radius-dropzone": {
+          "$description": "The border radius of file upload dropzone.",
+          "$value": "12px",
+        },
         "border-radius-flashbar": {
           "$description": "The border radius of flash messages in flashbars.",
           "$value": "12px",
@@ -32737,6 +33293,48 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#d1f1ff",
           },
         },
+        "color-dropzone-background-default": {
+          "$description": "The default color of file upload dropzone background.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#ffffff",
+          },
+        },
+        "color-dropzone-background-hover": {
+          "$description": "The color of file upload dropzone background in hovered state.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#f0fbff",
+          },
+        },
+        "color-dropzone-border-default": {
+          "$description": "The default color of file upload dropzone border.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#8c8c94",
+          },
+        },
+        "color-dropzone-border-hover": {
+          "$description": "The color of file upload dropzone border in hovered state.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#002b66",
+          },
+        },
+        "color-dropzone-text-default": {
+          "$description": "The default color of file upload dropzone text.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#424650",
+          },
+        },
+        "color-dropzone-text-hover": {
+          "$description": "The color of file upload dropzone text in hovered state.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#424650",
+          },
+        },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
@@ -33573,6 +34171,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
           "$value": "8px",
         },
+        "border-radius-dropzone": {
+          "$description": "The border radius of file upload dropzone.",
+          "$value": "12px",
+        },
         "border-radius-flashbar": {
           "$description": "The border radius of flash messages in flashbars.",
           "$value": "12px",
@@ -35316,6 +35918,48 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#006ce0",
           },
         },
+        "color-dropzone-background-default": {
+          "$description": "The default color of file upload dropzone background.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-dropzone-background-hover": {
+          "$description": "The color of file upload dropzone background in hovered state.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#001129",
+          },
+        },
+        "color-dropzone-border-default": {
+          "$description": "The default color of file upload dropzone border.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-dropzone-border-hover": {
+          "$description": "The color of file upload dropzone border in hovered state.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-dropzone-text-default": {
+          "$description": "The default color of file upload dropzone text.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-dropzone-text-hover": {
+          "$description": "The color of file upload dropzone text in hovered state.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
@@ -36152,6 +36796,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
           "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
           "$value": "8px",
         },
+        "border-radius-dropzone": {
+          "$description": "The border radius of file upload dropzone.",
+          "$value": "12px",
+        },
         "border-radius-flashbar": {
           "$description": "The border radius of flash messages in flashbars.",
           "$value": "12px",
@@ -37895,6 +38543,48 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
             "light": "#006ce0",
           },
         },
+        "color-dropzone-background-default": {
+          "$description": "The default color of file upload dropzone background.",
+          "$value": {
+            "dark": "#161d26",
+            "light": "#161d26",
+          },
+        },
+        "color-dropzone-background-hover": {
+          "$description": "The color of file upload dropzone background in hovered state.",
+          "$value": {
+            "dark": "#001129",
+            "light": "#001129",
+          },
+        },
+        "color-dropzone-border-default": {
+          "$description": "The default color of file upload dropzone border.",
+          "$value": {
+            "dark": "#656871",
+            "light": "#656871",
+          },
+        },
+        "color-dropzone-border-hover": {
+          "$description": "The color of file upload dropzone border in hovered state.",
+          "$value": {
+            "dark": "#75cfff",
+            "light": "#75cfff",
+          },
+        },
+        "color-dropzone-text-default": {
+          "$description": "The default color of file upload dropzone text.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
+        "color-dropzone-text-hover": {
+          "$description": "The color of file upload dropzone text in hovered state.",
+          "$value": {
+            "dark": "#c6c6cd",
+            "light": "#c6c6cd",
+          },
+        },
         "color-foreground-control-default": {
           "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
           "$value": {
@@ -38731,6 +39421,10 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
       "$description": "The border radius of dropdown containers. For example: button dropdown, select, multiselect, autosuggest, date picker, date range picker.",
       "$value": "8px",
     },
+    "border-radius-dropzone": {
+      "$description": "The border radius of file upload dropzone.",
+      "$value": "12px",
+    },
     "border-radius-flashbar": {
       "$description": "The border radius of flash messages in flashbars.",
       "$value": "12px",
@@ -40474,6 +41168,48 @@ exports[`Design tokens artifacts Design tokens JSON for visual-refresh matches t
         "light": "#d1f1ff",
       },
     },
+    "color-dropzone-background-default": {
+      "$description": "The default color of file upload dropzone background.",
+      "$value": {
+        "dark": "#161d26",
+        "light": "#ffffff",
+      },
+    },
+    "color-dropzone-background-hover": {
+      "$description": "The color of file upload dropzone background in hovered state.",
+      "$value": {
+        "dark": "#001129",
+        "light": "#f0fbff",
+      },
+    },
+    "color-dropzone-border-default": {
+      "$description": "The default color of file upload dropzone border.",
+      "$value": {
+        "dark": "#656871",
+        "light": "#8c8c94",
+      },
+    },
+    "color-dropzone-border-hover": {
+      "$description": "The color of file upload dropzone border in hovered state.",
+      "$value": {
+        "dark": "#75cfff",
+        "light": "#002b66",
+      },
+    },
+    "color-dropzone-text-default": {
+      "$description": "The default color of file upload dropzone text.",
+      "$value": {
+        "dark": "#c6c6cd",
+        "light": "#424650",
+      },
+    },
+    "color-dropzone-text-hover": {
+      "$description": "The color of file upload dropzone text in hovered state.",
+      "$value": {
+        "dark": "#c6c6cd",
+        "light": "#424650",
+      },
+    },
     "color-foreground-control-default": {
       "$description": "The color used to mark enabled form controls. For example: the checkmark on checkboxes, inner circle on radio buttons, and handle on toggles.",
       "$value": {
diff --git a/style-dictionary/visual-refresh/metadata/borders.ts b/style-dictionary/visual-refresh/metadata/borders.ts
index 3f39b5d54c..c971cad076 100644
--- a/style-dictionary/visual-refresh/metadata/borders.ts
+++ b/style-dictionary/visual-refresh/metadata/borders.ts
@@ -60,8 +60,8 @@ const metadata: StyleDictionary.MetadataIndex = {
   },
   borderRadiusDropzone: {
     description: 'The border radius of file upload dropzone.',
-    public: false,
-    themeable: false,
+    public: true,
+    themeable: true,
   },
   borderRadiusFlashbar: {
     description: 'The border radius of flash messages in flashbars.',
diff --git a/style-dictionary/visual-refresh/metadata/colors.ts b/style-dictionary/visual-refresh/metadata/colors.ts
index 64aa121164..1cd8cc3b35 100644
--- a/style-dictionary/visual-refresh/metadata/colors.ts
+++ b/style-dictionary/visual-refresh/metadata/colors.ts
@@ -802,33 +802,33 @@ const metadata: StyleDictionary.MetadataIndex = {
   },
   colorDropzoneBackgroundDefault: {
     description: 'The default color of file upload dropzone background.',
-    themeable: false,
-    public: false,
+    themeable: true,
+    public: true,
   },
   colorDropzoneBackgroundHover: {
     description: 'The color of file upload dropzone background in hovered state.',
-    themeable: false,
-    public: false,
+    themeable: true,
+    public: true,
   },
   colorDropzoneTextDefault: {
     description: 'The default color of file upload dropzone text.',
-    themeable: false,
-    public: false,
+    themeable: true,
+    public: true,
   },
   colorDropzoneTextHover: {
     description: 'The color of file upload dropzone text in hovered state.',
-    themeable: false,
-    public: false,
+    themeable: true,
+    public: true,
   },
   colorDropzoneBorderDefault: {
     description: 'The default color of file upload dropzone border.',
-    themeable: false,
-    public: false,
+    themeable: true,
+    public: true,
   },
   colorDropzoneBorderHover: {
     description: 'The color of file upload dropzone border in hovered state.',
-    themeable: false,
-    public: false,
+    themeable: true,
+    public: true,
   },
 };