feat(dropzone): adding dropzone migration

feat(dropzone): s2 migrations

feat(dropzone): rebuilding css and cleaning up index

chore(dropzone): updating package files

feat(dropzone): modify layout and color tokens

chore(dropzone): add metadata file

chore(dropzone): update files

chore(dropzone): restoring image, story and template files

Author: aramos-adobe

.changeset/big-beds-care.md

@@ -0,0 +1,15 @@
+---
+"@spectrum-css/dropzone": major
+---
+
+## Dropzone S2 Migration
+
+This migration shares the new changes made from the illustrated message component.
+
+### New mods
+
+`--mod-drop-zone-content-height`
+
+### Removed mods
+
+`--mod-drop-zone-body-color` `--mod-drop-zone-body-font-family` `--mod-drop-zone-body-font-style` `--mod-drop-zone-body-font-weight` `--mod-drop-zone-body-line-height` `--mod-drop-zone-content-color` `--mod-drop-zone-content-edge-to-text` `--mod-drop-zone-content-font-size` `--mod-drop-zone-heading-color` `--mod-drop-zone-heading-font-family` `--mod-drop-zone-heading-font-size` `--mod-drop-zone-heading-font-style` `--mod-drop-zone-heading-font-weight` `--mod-drop-zone-heading-line-height` `--mod-drop-zone-heading-to-body` `--mod-drop-zone-illustration-to-heading` `--mod-drop-zone-illustration-to-title`

.storybook/assets/images/dropzone-illustration.png

@@ -2,166 +2,106 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-DropZone",
+    ".spectrum-DropZone .spectrum-IllustratedMessage",
+    ".spectrum-DropZone-actions",
     ".spectrum-DropZone-button",
+    ".spectrum-DropZone-button .spectrum-ActionButton-label",
     ".spectrum-DropZone-button:focus",
     ".spectrum-DropZone-button:hover",
     ".spectrum-DropZone-content",
+    ".spectrum-DropZone-stroke",
+    ".spectrum-DropZone-stroke-path",
     ".spectrum-DropZone.is-dragged",
+    ".spectrum-DropZone.is-dragged .spectrum-DropZone-stroke-path",
     ".spectrum-DropZone.is-filled",
     ".spectrum-DropZone.is-filled.is-dragged",
-    ".spectrum-DropZone:focus-visible",
-    ".spectrum-DropZone:lang(ja)",
-    ".spectrum-DropZone:lang(ko)",
-    ".spectrum-DropZone:lang(zh)"
+    ".spectrum-DropZone.is-filled.is-dragged .spectrum-DropZone-actions",
+    ".spectrum-DropZone.is-filled.is-dragged .spectrum-DropZone-content",
+    ".spectrum-DropZone:focus-visible"
   ],
   "modifiers": [
     "--mod-drop-zone-background-color",
     "--mod-drop-zone-background-color-opacity",
     "--mod-drop-zone-background-color-opacity-filled",
-    "--mod-drop-zone-body-color",
-    "--mod-drop-zone-body-font-family",
     "--mod-drop-zone-body-font-size",
-    "--mod-drop-zone-body-font-style",
-    "--mod-drop-zone-body-font-weight",
-    "--mod-drop-zone-body-line-height",
     "--mod-drop-zone-body-to-action",
     "--mod-drop-zone-border-color",
     "--mod-drop-zone-border-color-hover",
     "--mod-drop-zone-border-style",
-    "--mod-drop-zone-border-style--dragged",
     "--mod-drop-zone-border-style-dragged",
     "--mod-drop-zone-border-width",
     "--mod-drop-zone-content-background-color",
     "--mod-drop-zone-content-bottom-to-text",
-    "--mod-drop-zone-content-color",
-    "--mod-drop-zone-content-display",
-    "--mod-drop-zone-content-edge-to-text",
     "--mod-drop-zone-content-font-family",
     "--mod-drop-zone-content-font-size",
-    "--mod-drop-zone-content-font-style",
     "--mod-drop-zone-content-font-weight",
     "--mod-drop-zone-content-height",
-    "--mod-drop-zone-content-line-height",
     "--mod-drop-zone-content-max-width",
     "--mod-drop-zone-content-maximum-width",
     "--mod-drop-zone-content-top-to-text",
     "--mod-drop-zone-corner-radius",
-    "--mod-drop-zone-heading-color",
-    "--mod-drop-zone-heading-font-family",
-    "--mod-drop-zone-heading-font-size",
-    "--mod-drop-zone-heading-font-style",
-    "--mod-drop-zone-heading-font-weight",
-    "--mod-drop-zone-heading-line-height",
-    "--mod-drop-zone-heading-to-body",
-    "--mod-drop-zone-illustration-color",
+    "--mod-drop-zone-edge-to-text",
     "--mod-drop-zone-illustration-color-hover",
-    "--mod-drop-zone-illustration-to-heading",
     "--mod-drop-zone-padding",
+    "--mod-drop-zone-title-line-height",
     "--mod-drop-zone-width"
   ],
   "component": [
     "--spectrum-drop-zone-background-color",
     "--spectrum-drop-zone-background-color-opacity",
     "--spectrum-drop-zone-background-color-opacity-filled",
     "--spectrum-drop-zone-background-color-rgb",
-    "--spectrum-drop-zone-body-color",
-    "--spectrum-drop-zone-body-font-family",
     "--spectrum-drop-zone-body-font-size",
-    "--spectrum-drop-zone-body-font-style",
-    "--spectrum-drop-zone-body-font-weight",
-    "--spectrum-drop-zone-body-line-height",
-    "--spectrum-drop-zone-body-size",
     "--spectrum-drop-zone-body-to-action",
     "--spectrum-drop-zone-border-color",
     "--spectrum-drop-zone-border-color-hover",
+    "--spectrum-drop-zone-border-dash-gap",
+    "--spectrum-drop-zone-border-dash-length",
     "--spectrum-drop-zone-border-width",
-    "--spectrum-drop-zone-cjk-title-size",
     "--spectrum-drop-zone-content-background-color",
     "--spectrum-drop-zone-content-bottom-to-text",
-    "--spectrum-drop-zone-content-color",
-    "--spectrum-drop-zone-content-edge-to-text",
     "--spectrum-drop-zone-content-font-family",
     "--spectrum-drop-zone-content-font-size",
-    "--spectrum-drop-zone-content-font-style",
     "--spectrum-drop-zone-content-font-weight",
     "--spectrum-drop-zone-content-height",
-    "--spectrum-drop-zone-content-line-height",
     "--spectrum-drop-zone-content-max-width",
     "--spectrum-drop-zone-content-maximum-width",
     "--spectrum-drop-zone-content-top-to-text",
     "--spectrum-drop-zone-corner-radius",
-    "--spectrum-drop-zone-heading-color",
-    "--spectrum-drop-zone-heading-font-family",
-    "--spectrum-drop-zone-heading-font-size",
-    "--spectrum-drop-zone-heading-font-style",
-    "--spectrum-drop-zone-heading-font-weight",
-    "--spectrum-drop-zone-heading-line-height",
-    "--spectrum-drop-zone-heading-to-body",
-    "--spectrum-drop-zone-illustration-color",
+    "--spectrum-drop-zone-edge-to-text",
     "--spectrum-drop-zone-illustration-color-hover",
-    "--spectrum-drop-zone-illustration-to-heading",
-    "--spectrum-drop-zone-illustration-to-title",
     "--spectrum-drop-zone-padding",
-    "--spectrum-drop-zone-title-size",
+    "--spectrum-drop-zone-title-line-height",
     "--spectrum-drop-zone-width"
   ],
   "global": [
+    "--spectrum-accent-content-color-default",
     "--spectrum-accent-visual-color",
-    "--spectrum-body-color",
-    "--spectrum-body-line-height",
-    "--spectrum-body-sans-serif-font-style",
-    "--spectrum-body-sans-serif-font-weight",
     "--spectrum-bold-font-weight",
     "--spectrum-border-width-200",
     "--spectrum-component-bottom-to-text-300",
     "--spectrum-component-edge-to-text-300",
     "--spectrum-component-height-300",
     "--spectrum-component-top-to-text-300",
-    "--spectrum-corner-radius-100",
-    "--spectrum-default-font-style",
+    "--spectrum-corner-radius-700",
     "--spectrum-font-size-300",
-    "--spectrum-gray-200",
-    "--spectrum-heading-color",
-    "--spectrum-heading-line-height",
-    "--spectrum-heading-sans-serif-font-style",
-    "--spectrum-heading-sans-serif-font-weight",
+    "--spectrum-gray-300",
+    "--spectrum-gray-500",
     "--spectrum-line-height-100",
-    "--spectrum-neutral-visual-color",
     "--spectrum-sans-font-family-stack",
-    "--spectrum-spacing-200",
     "--spectrum-spacing-300",
     "--spectrum-spacing-400",
-    "--spectrum-spacing-75",
-    "--spectrum-white"
+    "--spectrum-title-serif-font-weight"
   ],
   "passthroughs": [
-    "--mod-actionbutton-edge-to-text",
-    "--mod-actionbutton-font-size",
-    "--mod-actionbutton-label-color",
-    "--mod-illustrated-message-description-color",
-    "--mod-illustrated-message-description-font-family",
     "--mod-illustrated-message-description-font-size",
-    "--mod-illustrated-message-description-font-style",
-    "--mod-illustrated-message-description-font-weight",
-    "--mod-illustrated-message-description-line-height",
     "--mod-illustrated-message-description-position",
     "--mod-illustrated-message-description-to-action",
     "--mod-illustrated-message-description-z-index",
     "--mod-illustrated-message-display",
-    "--mod-illustrated-message-heading-to-description",
     "--mod-illustrated-message-illustration-color",
-    "--mod-illustrated-message-illustration-to-heading",
-    "--mod-illustrated-message-title-color",
-    "--mod-illustrated-message-title-font-family",
-    "--mod-illustrated-message-title-font-size",
-    "--mod-illustrated-message-title-font-style",
     "--mod-illustrated-message-title-font-weight",
-    "--mod-illustrated-message-title-line-height",
     "--mod-illustrated-message-vertical-maximum-width"
   ],
-  "high-contrast": [
-    "--highcontrast-drop-zone-border-color-hover",
-    "--highcontrast-drop-zone-illustration-color",
-    "--highcontrast-illustrated-message-illustration-color"
-  ]
+  "high-contrast": ["--highcontrast-drop-zone-border-color-hover"]
 }