feat(dropzone): migrating new S2 tokens, more spaced out dashed lines, more illustrations (#3429)

* 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

* chore(dropzone): update test data

* chore(dropzone): storybook build fix and s2 updates

* chore(dropzone): adding metadata files

* feat(dropzone): adjusting template and css files

* chore(dropzone): adding icons

* feat(dropzone): fixing svg box, border fallback, whcm fix

* chore(dropzone): removing icon dist files

* feat(dropzone): updating changeset and modifiers

* feat(dropzone): removing illustration mod token using im color

* chore(dropzone): restoring s2 files

* feat(dropzone): updating whcm mode

* feat(dropzone): adding metadata

* feat(dropzone): adding filled story desc

* feat(dropzone): update changeset, cleaning up template and css files

* chore(dropzone): restoring base s2 files

* chore(dropzone): restoring global vars and changelog

* chore(dropzone): update with new revisions

* chore(dropzone): fixing lint error

* chore(dropzone): reverting files

* chore(dropzone): fixing weird changes

* chore(dropzone): fixing weird changes again

Author: aramos-adobe

.changeset/big-beds-care.md

@@ -0,0 +1,39 @@
+---
+"@spectrum-css/dropzone": major
+---
+
+## Dropzone S2 Migration
+
+Since dropzone shares a lot of illustrated message's new content tokens (typography and spacing), tons of unused`--mods` were removed.
+
+The component reflects the [new design](https://www.figma.com/design/eoZHKJH9a3LJkHYCGt60Vb/S2-token-specs?node-id=10141-2822&m=dev) of the borders that includes dash length and dash gap.
+
+### SVG Border
+
+To support the intention of the design, an SVG element is used. There are custom `--mod` tokens to adjust the length of dashed lines and the gap between them. It's understood it may be too much to consume an additional element so there's a fallback where the SVG element is not necessary - dropzone will use the standard `border` CSS property.
+
+### New mods
+
+`--mod-drop-zone-content-height`
+`--mod-drop-zone-edge-to-text`
+`--mod-drop-zone-title-line-height`
+`--mod-drop-zone-border-dash-length`
+`--mod-drop-zone-border-dash-gap`
+
+### 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,116 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-DropZone",
+    ".spectrum-DropZone .spectrum-IllustratedMessage",
+    ".spectrum-DropZone-actions",
     ".spectrum-DropZone-button",
+    ".spectrum-DropZone-button .spectrum-Button-label",
     ".spectrum-DropZone-button:focus",
     ".spectrum-DropZone-button:hover",
     ".spectrum-DropZone-content",
+    ".spectrum-DropZone-stroke",
+    ".spectrum-DropZone-strokePath",
     ".spectrum-DropZone.is-dragged",
+    ".spectrum-DropZone.is-dragged .spectrum-DropZone-strokePath",
     ".spectrum-DropZone.is-filled",
     ".spectrum-DropZone.is-filled.is-dragged",
+    ".spectrum-DropZone.is-filled.is-dragged .spectrum-DropZone-actions",
+    ".spectrum-DropZone.is-filled.is-dragged .spectrum-DropZone-content",
     ".spectrum-DropZone:focus-visible",
-    ".spectrum-DropZone:lang(ja)",
-    ".spectrum-DropZone:lang(ko)",
-    ".spectrum-DropZone:lang(zh)"
+    ".spectrum-DropZone:has(.spectrum-DropZone-stroke)"
   ],
   "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-dash-gap",
+    "--mod-drop-zone-border-dash-length",
     "--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-inline-size",
     "--mod-drop-zone-padding",
-    "--mod-drop-zone-width"
+    "--mod-drop-zone-title-line-height"
   ],
   "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-component-height",
     "--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-dragged-background-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-inline-size",
     "--spectrum-drop-zone-padding",
-    "--spectrum-drop-zone-title-size",
+    "--spectrum-drop-zone-stroke-dash-gap",
+    "--spectrum-drop-zone-stroke-dash-length",
+    "--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-500",
+    "--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-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-spacing-400"
   ],
   "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-button-border-radius",
     "--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",
     "--highcontrast-drop-zone-border-color-hover",
-    "--highcontrast-drop-zone-illustration-color",
-    "--highcontrast-illustrated-message-illustration-color"
+    "--highcontrast-drop-zone-button-color"
   ]
 }