chore(toast): update tokens values for s2

Author: pfulton

components/toast/index.css

@@ -17,7 +17,7 @@ governing permissions and limitations under the License.
   /* Size */
 
   --spectrum-toast-font-size: var(--spectrum-font-size-100);
-  --spectrum-toast-corner-radius: var(--spectrum-corner-radius-100);
+  --spectrum-toast-corner-radius: var(--spectrum-corner-radius-800);
   --spectrum-toast-block-size: var(--spectrum-toast-height);
   --spectrum-toast-max-inline-size: var(--spectrum-toast-maximum-width);
   --spectrum-toast-border-width: var(--spectrum-border-width-100);
@@ -27,34 +27,33 @@ governing permissions and limitations under the License.
 
   /* Space */
 
-  --spectrum-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-100);
+  --spectrum-toast-spacing-icon-to-text: var(--spectrum-text-to-visual-300);
 
   --spectrum-toast-spacing-start-edge-to-text-and-icon: var(--spectrum-spacing-300);
   --spectrum-toast-spacing-text-and-action-button-to-divider: var(--spectrum-spacing-300);
+  --spectrum-toast-spacing-text-to-close-button: var(--spectrum-spacing-300);
 
-  --spectrum-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-100);
-  --spectrum-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-100);
+  --spectrum-toast-spacing-top-edge-to-divider: var(--spectrum-spacing-200);
+  --spectrum-toast-spacing-bottom-edge-to-divider: var(--spectrum-spacing-200);
 
   --spectrum-toast-spacing-top-edge-to-icon: var(--spectrum-toast-top-to-workflow-icon);
 
-  --spectrum-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-300);
+  --spectrum-toast-spacing-text-to-action-button-horizontal: var(--spectrum-spacing-400);
   --spectrum-toast-spacing-close-button: var(--spectrum-spacing-100);
 
-  --spectrum-toast-spacing-block-start: var(--spectrum-spacing-100);
-  --spectrum-toast-spacing-block-end: var(--spectrum-spacing-100);
+  --spectrum-toast-spacing-block-start: var(--spectrum-spacing-200);
+  --spectrum-toast-spacing-block-end: var(--spectrum-spacing-200);
 
   --spectrum-toast-spacing-top-edge-to-text: var(--spectrum-toast-top-to-text);
   --spectrum-toast-spacing-bottom-edge-to-text: var(--spectrum-toast-bottom-to-text);
 
   /* Color */
-
+  --spectrum-toast-background-color-default: var(--spectrum-neutral-subdued-background-color-default);
   --spectrum-toast-negative-background-color-default: var(--spectrum-negative-background-color-default);
   --spectrum-toast-positive-background-color-default: var(--spectrum-positive-background-color-default);
   --spectrum-toast-informative-background-color-default: var(--spectrum-informative-background-color-default);
 
   --spectrum-toast-text-and-icon-color: var(--spectrum-white);
-
-  --spectrum-toast-divider-color: var(--spectrum-transparent-white-300);
 }
 
 @media (forced-colors: active) {
@@ -132,9 +131,8 @@ governing permissions and limitations under the License.
 
   padding-block-start: calc(var(--mod-toast-spacing-top-edge-to-text, var(--spectrum-toast-spacing-top-edge-to-text)) - var(--mod-toast-spacing-block-start, var(--spectrum-toast-spacing-block-start)));
   padding-block-end: calc(var(--mod-toast-spacing-bottom-edge-to-text, var(--spectrum-toast-spacing-bottom-edge-to-text)) - var(--mod-toast-spacing-block-end, var(--spectrum-toast-spacing-block-end)));
-
-  padding-inline-end: var(--mod-toast-spacing-text-to-action-button-horizontal, var(--spectrum-toast-spacing-text-to-action-button-horizontal));
   padding-inline-start: 0;
+  padding-inline-end: var(--mod-toast-spacing-text-to-close-button, var(--spectrum-toast-spacing-text-to-close-button));
 
   line-height: var(--mod-toast-line-height, var(--spectrum-toast-line-height));
 
@@ -149,6 +147,12 @@ governing permissions and limitations under the License.
   }
 }
 
+.spectrum-Toast:has(.spectrum-Button) {
+  .spectrum-Toast-content {
+    padding-inline-end: var(--mod-toast-spacing-text-to-action-button-horizontal, var(--spectrum-toast-spacing-text-to-action-button-horizontal));
+  }
+}
+
 .spectrum-Toast-buttons {
   display: flex;
   flex: 0 0 auto;
@@ -158,7 +162,7 @@ governing permissions and limitations under the License.
   margin-block-end: var(--mod-toast-spacing-bottom-edge-to-divider, var(--spectrum-toast-spacing-bottom-edge-to-divider));
 
   /* Divider color for Text | Action Button */
-  border-inline-start-color: var(--mod-toast-divider-color, var(--spectrum-toast-divider-color));
+  /* border-inline-start-color: var(--mod-toast-divider-color, var(--spectrum-toast-divider-color)); */
   padding-inline-end: var(--mod-toast-spacing-close-button, var(--spectrum-toast-spacing-close-button));
 
   .spectrum-CloseButton {
@@ -191,8 +195,5 @@ governing permissions and limitations under the License.
 
   & + .spectrum-Toast-buttons {
     padding-inline-start: var(--mod-toast-spacing-close-button, var(--spectrum-toast-spacing-close-button));
-
-    border-inline-start-width: 1px;
-    border-inline-start-style: solid;
   }
 }

components/toast/metadata/mods.md

@@ -4,7 +4,6 @@
 | `--mod-toast-block-size`                                |
 | `--mod-toast-border-width`                              |
 | `--mod-toast-corner-radius`                             |
-| `--mod-toast-divider-color`                             |
 | `--mod-toast-font-size`                                 |
 | `--mod-toast-font-weight`                               |
 | `--mod-toast-informative-background-color-default`      |
@@ -22,6 +21,7 @@
 | `--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-text-to-close-button`              |
 | `--mod-toast-spacing-top-edge-to-divider`               |
 | `--mod-toast-spacing-top-edge-to-icon`                  |
 | `--mod-toast-spacing-top-edge-to-text`                  |

components/toast/stories/template.js

@@ -2,9 +2,9 @@ import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 
-import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
-import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js";
 import { Template as Button } from "@spectrum-css/button/stories/template.js";
+import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js";
+import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 
 import "../index.css";
 
@@ -19,16 +19,8 @@ export const Template = ({
 	id,
 	...globals
 }) => {
-	const { express } = globals;
-
-	try {
-		if (!express) import(/* webpackPrefetch: true */ "../themes/spectrum.css");
-		else import(/* webpackPrefetch: true */ "../themes/express.css");
-	} catch (e) {
-		console.warn(e);
-	}
 
-	const iconName =
+  const iconName =
 		variant === "negative"
 			? "Alert"
 			: variant === "positive"

components/toast/stories/toast.stories.js

@@ -75,4 +75,4 @@ Positive.args = {
 	variant: "positive",
 	message: "Copied to clipboard",
 	inlineButtonLabel: "Eject",
-};
+};