Merge pull request #3246 from adobe/aramos-adobe/css781-illustrated-message-s2-tokens

feat(illustratedmessage): adding new s2 tokens, horizontal layout, vrts

Author: aramos-adobe

.changeset/beige-dragons-tickle.md

@@ -0,0 +1,49 @@
+---
+"@spectrum-css/illustratedmessage": major
+"@spectrum-css/dropzone": major
+---
+
+# S2 Illustrated Message Migration
+
+This migration contains new tokens for t-shirt sizes (S, M, L), vertical and horizontal orientation along with their maximum width, illustration sizes, and content spacing. Dropzone `--mod` names are renamed to match the semantic tokens in illustrated message.
+
+## Illustrated Message
+
+New properties
+`--spectrum-illustrated-message-heading-to-description`
+`--spectrum-illustrated-message-illustration-to-heading`
+`--spectrum-illustrated-message-illustration-to-content`
+`--spectrum-illustrated-message-description-to-action`
+`--spectrum-illustrated-message-illustration-color`
+`--spectrum-illustrated-message-illustration-size`
+`--spectrum-illustrated-message-small-cjk-title-font-size`
+`--spectrum-illustrated-message-large-cjk-title-font-size`
+`--spectrum-illustrated-message-large-body-font-size`
+`--spectrum-illustrated-message-horizontal-maximum-width`
+
+New mods
+`--mod-illustrated-message-description-to-action`
+`--mod-illustrated-message-heading-to-description`
+`--mod-illustrated-message-illustration-to-content`
+`--mod-illustrated-message-horizontal-maximum-width`
+
+Removed properties
+`--spectrum-illustrated-message-title-to-heading`
+`--spectrum-illustrated-message-description-max-inline-size`
+`--spectrum-illustrated-message-heading-max-inline-size`
+`--spectrum-illustrated-message-illustration-accent-color`
+`--mod-illustrated-message-illustration-accent-color`
+`--highcontrast-illustrated-message-illustration-accent-color`
+
+## Dropzone
+
+New mods
+`--mod-drop-zone-body-to-action`
+`--mod-drop-zone-illustration-to-title`
+
+## Dropzone nested mods
+
+Renamed mods
+`--mod-illustrated-message-title-to-heading` > `--mod-illustrated-message-illustration-to-heading`
+`--mod-illustrated-message-heading-to-body` > `--mod-illustrated-message-heading-to-description`
+`--mod-illustrated-message-content-maximum-width` > `--mod-illustrated-message-vertical-maximum-width`

components/dropzone/dist/metadata.json

@@ -24,6 +24,7 @@
     "--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",
@@ -70,6 +71,7 @@
     "--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-width",
@@ -98,6 +100,7 @@
     "--spectrum-drop-zone-illustration-color",
     "--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-width"
@@ -125,6 +128,8 @@
     "--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"
@@ -133,26 +138,26 @@
     "--mod-actionbutton-edge-to-text",
     "--mod-actionbutton-font-size",
     "--mod-actionbutton-label-color",
-    "--mod-illustrated-message-content-maximum-width",
     "--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-body",
     "--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-title-to-heading"
+    "--mod-illustrated-message-vertical-maximum-width"
   ],
   "high-contrast": [
     "--highcontrast-drop-zone-border-color-hover",