feat(toast): S2 migration (#3643)

* feat(toast): S2 migration

* fix(toast): vertical and horizontal spacing

* chore(toast): remove unused properties

* chore(toast): additional spacing refinements and explanatory comments

* marissa wip

* styles wip

* chore(toast): add .spectrum-Toast--noButton for SWC use

* fix(toast): update toast test case message w/out button

* fix(toast): update toast has button story

* fix(toast): scope close button styles to toast

* fix(toast): clean up a few typos

---------

Co-authored-by: Marissa Huysentruyt <[email protected]>

Author: cdransf

.changeset/red-kiwis-flash.md

@@ -0,0 +1,32 @@
+---
+"@spectrum-css/toast": major
+---
+
+#### S2 toast migration
+
+This migrates the `toast` component to S2. Custom properties have been remapped per the design spec. Mods have been added and placeholder icons have been updated from the new workflow icons. The toast no longer supports a divider.
+
+##### Tokens
+
+| Before                       | After                        |
+| ---------------------------- | ---------------------------- |
+| --spectrum-corner-radius-100 | --spectrum-corner-radius-800 |
+
+##### Mods
+
+The following mods have been added.
+
+`--mod-toast-font-family`
+`--mod-toast-font-style`
+`--mod-toast-icon-block-size`
+`--mod-toast-spacing-action-button-to-close`
+`--mod-toast-spacing-bottom-edge-to-close-button`
+`--mod-toast-spacing-close-button-to-edge`
+`--mod-toast-spacing-text-to-close-button`
+`--mod-toast-spacing-top-edge-to-close-button`
+
+##### Passthroughs
+
+The following passthrough has been added.
+
+`--mod-closebutton-icon-color-default`

components/toast/dist/metadata.json

@@ -2,103 +2,100 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-Toast",
+    ".spectrum-Toast .spectrum-Button",
+    ".spectrum-Toast .spectrum-CloseButton",
     ".spectrum-Toast--info",
-    ".spectrum-Toast--info .spectrum-Toast-closeButton:focus-visible:not(:active)",
     ".spectrum-Toast--negative",
-    ".spectrum-Toast--negative .spectrum-Toast-closeButton:focus-visible:not(:active)",
     ".spectrum-Toast--positive",
-    ".spectrum-Toast--positive .spectrum-Toast-closeButton:focus-visible:not(:active)",
     ".spectrum-Toast-body",
-    ".spectrum-Toast-body + .spectrum-Toast-buttons",
-    ".spectrum-Toast-body .spectrum-Button",
-    ".spectrum-Toast-body .spectrum-Button:dir(rtl)",
-    ".spectrum-Toast-buttons",
-    ".spectrum-Toast-buttons .spectrum-CloseButton",
     ".spectrum-Toast-content",
     ".spectrum-Toast-content:lang(ja)",
     ".spectrum-Toast-content:lang(ko)",
     ".spectrum-Toast-content:lang(zh)",
+    ".spectrum-Toast-text",
     ".spectrum-Toast-typeIcon",
-    "[dir=\"rtl\"] .spectrum-Toast-body .spectrum-Button"
+    ".spectrum-Toast.spectrum-Toast--noButton",
+    ".spectrum-Toast:not(:has(.spectrum-Button))"
   ],
   "modifiers": [
     "--mod-toast-background-color-default",
-    "--mod-toast-block-size",
-    "--mod-toast-border-width",
     "--mod-toast-corner-radius",
-    "--mod-toast-divider-color",
+    "--mod-toast-font-family",
     "--mod-toast-font-size",
+    "--mod-toast-font-style",
     "--mod-toast-font-weight",
+    "--mod-toast-icon-block-size",
     "--mod-toast-informative-background-color-default",
     "--mod-toast-line-height",
     "--mod-toast-line-height-cjk",
     "--mod-toast-max-inline-size",
+    "--mod-toast-min-block-size",
     "--mod-toast-negative-background-color-default",
     "--mod-toast-positive-background-color-default",
-    "--mod-toast-spacing-block-end",
-    "--mod-toast-spacing-block-start",
-    "--mod-toast-spacing-bottom-edge-to-divider",
-    "--mod-toast-spacing-bottom-edge-to-text",
-    "--mod-toast-spacing-close-button",
+    "--mod-toast-spacing-block-close-button",
+    "--mod-toast-spacing-button-to-close-button-horizontal",
+    "--mod-toast-spacing-close-button-to-end-edge",
     "--mod-toast-spacing-icon-to-text",
     "--mod-toast-spacing-start-edge-to-text-and-icon",
-    "--mod-toast-spacing-text-and-action-button-to-divider",
-    "--mod-toast-spacing-text-to-action-button-horizontal",
-    "--mod-toast-spacing-top-edge-to-divider",
-    "--mod-toast-spacing-top-edge-to-icon",
-    "--mod-toast-spacing-top-edge-to-text",
+    "--mod-toast-spacing-text-to-button-vertical",
+    "--mod-toast-spacing-text-to-close-button",
+    "--mod-toast-spacing-toast-to-edge",
     "--mod-toast-text-and-icon-color"
   ],
   "component": [
     "--spectrum-toast-background-color-default",
-    "--spectrum-toast-block-size",
-    "--spectrum-toast-border-width",
     "--spectrum-toast-bottom-to-text",
     "--spectrum-toast-corner-radius",
-    "--spectrum-toast-divider-color",
+    "--spectrum-toast-font-family",
     "--spectrum-toast-font-size",
+    "--spectrum-toast-font-style",
     "--spectrum-toast-font-weight",
     "--spectrum-toast-height",
+    "--spectrum-toast-icon-block-size",
     "--spectrum-toast-informative-background-color-default",
     "--spectrum-toast-line-height",
     "--spectrum-toast-line-height-cjk",
     "--spectrum-toast-max-inline-size",
     "--spectrum-toast-maximum-width",
+    "--spectrum-toast-min-block-size",
     "--spectrum-toast-negative-background-color-default",
     "--spectrum-toast-positive-background-color-default",
-    "--spectrum-toast-spacing-block-end",
-    "--spectrum-toast-spacing-block-start",
-    "--spectrum-toast-spacing-bottom-edge-to-divider",
+    "--spectrum-toast-spacing-block-close-button",
     "--spectrum-toast-spacing-bottom-edge-to-text",
-    "--spectrum-toast-spacing-close-button",
+    "--spectrum-toast-spacing-button-to-close-button-horizontal",
+    "--spectrum-toast-spacing-close-button-to-end-edge",
+    "--spectrum-toast-spacing-edge-to-button-vertical",
     "--spectrum-toast-spacing-icon-to-text",
     "--spectrum-toast-spacing-start-edge-to-text-and-icon",
-    "--spectrum-toast-spacing-text-and-action-button-to-divider",
-    "--spectrum-toast-spacing-text-to-action-button-horizontal",
-    "--spectrum-toast-spacing-top-edge-to-divider",
+    "--spectrum-toast-spacing-text-to-button-horizontal",
+    "--spectrum-toast-spacing-text-to-close-button",
+    "--spectrum-toast-spacing-toast-to-edge",
     "--spectrum-toast-spacing-top-edge-to-icon",
     "--spectrum-toast-spacing-top-edge-to-text",
     "--spectrum-toast-text-and-icon-color",
     "--spectrum-toast-top-to-text",
     "--spectrum-toast-top-to-workflow-icon"
   ],
   "global": [
-    "--spectrum-border-width-100",
     "--spectrum-cjk-line-height-100",
-    "--spectrum-corner-radius-100",
+    "--spectrum-corner-radius-800",
+    "--spectrum-default-font-style",
     "--spectrum-font-size-100",
     "--spectrum-informative-background-color-default",
     "--spectrum-line-height-100",
     "--spectrum-negative-background-color-default",
     "--spectrum-neutral-subdued-background-color-default",
     "--spectrum-positive-background-color-default",
     "--spectrum-regular-font-weight",
+    "--spectrum-sans-font-family-stack",
     "--spectrum-spacing-100",
+    "--spectrum-spacing-200",
     "--spectrum-spacing-300",
-    "--spectrum-text-to-visual-100",
-    "--spectrum-transparent-white-400",
-    "--spectrum-white"
+    "--spectrum-spacing-400",
+    "--spectrum-text-to-visual-300",
+    "--spectrum-white",
+    "--spectrum-workflow-icon-size-100"
   ],
-  "passthroughs": [],
-  "high-contrast": ["--highcontrast-toast-border-color"]
+  "passthroughs": ["--mod-closebutton-icon-color-default"],
+  "high-contrast": []
 }