From 4d1469b4c1b6f01972c29d9c584b21afe55ebf0e Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Mon, 7 Apr 2025 16:49:33 -0700
Subject: [PATCH 01/23] feat(in-line-alert): S2 migration

---
 .changeset/big-jars-pump.md                   |  56 ++++++
 components/inlinealert/dist/metadata.json     |  71 ++++++-
 components/inlinealert/index.css              | 186 ++++++++++++++++--
 .../stories/inlinealert.stories.js            |  34 ++--
 components/inlinealert/stories/template.js    |  10 +-
 5 files changed, 316 insertions(+), 41 deletions(-)
 create mode 100644 .changeset/big-jars-pump.md

diff --git a/.changeset/big-jars-pump.md b/.changeset/big-jars-pump.md
new file mode 100644
index 00000000000..e52f9d18bc5
--- /dev/null
+++ b/.changeset/big-jars-pump.md
@@ -0,0 +1,56 @@
+---
+`@spectrum-css/inlinealert`: major
+---
+
+#### S2 migration in-line alert
+
+This migrates the `in-line alert` component to S2. Custom properties have been remapped and added per the design specification.
+
+Subtle and bold styles have been added for each badge variant.
+
+##### New mods
+
+`--mod-inlinealert-border-and-icon-color-neutral`
+`--mod-inlinealert-min-spacing-header-to-icon`
+`--mod-inlinealert-spacing-content-link-button`
+`--mod-inlinealert-spacing-header-content`
+
+##### Removed mods
+
+`--mod-inlinealert-spacing-header-content-button`
+`--mod-inlinealert-spacing-header-to-icon`
+
+##### New custom properties
+
+`.spectrum-InLineAlert--info--bold`
+`.spectrum-InLineAlert--info--bold .spectrum-InLineAlert-icon`
+`.spectrum-InLineAlert--info--subtle`
+`.spectrum-InLineAlert--info--subtle .spectrum-InLineAlert-icon`
+`.spectrum-InLineAlert--negative--bold`
+`.spectrum-InLineAlert--negative--bold .spectrum-InLineAlert-icon`
+`.spectrum-InLineAlert--negative--subtle`
+`.spectrum-InLineAlert--negative--subtle .spectrum-InLineAlert-icon`
+`.spectrum-InLineAlert--neutral`
+`.spectrum-InLineAlert--neutral .spectrum-InLineAlert-icon`
+`.spectrum-InLineAlert--neutral--bold`
+`.spectrum-InLineAlert--neutral--bold .spectrum-InLineAlert-icon`
+`.spectrum-InLineAlert--neutral--subtle`
+`.spectrum-InLineAlert--neutral--subtle .spectrum-InLineAlert-icon`
+`.spectrum-InLineAlert--notice--bold`
+`.spectrum-InLineAlert--notice--bold .spectrum-InLineAlert-icon`
+`.spectrum-InLineAlert--notice--subtle`
+`.spectrum-InLineAlert--notice--subtle .spectrum-InLineAlert-icon`
+`.spectrum-InLineAlert--positive--bold`
+`.spectrum-InLineAlert--positive--bold .spectrum-InLineAlert-icon`
+`.spectrum-InLineAlert--positive--subtle`
+`.spectrum-InLineAlert--positive--subtle .spectrum-InLineAlert-icon`
+`--spectrum-inlinealert-bold-background-color-informative`
+`--spectrum-inlinealert-bold-background-color-negative`
+`--spectrum-inlinealert-bold-background-color-neutral`
+`--spectrum-inlinealert-bold-background-color-notice`
+`--spectrum-inlinealert-bold-background-color-positive`
+
+##### Removed custom properties
+
+`--spectrum-inlinealert-spacing-header-content-button`
+`--spectrum-inlinealert-spacing-header-to-icon`
diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json
index bd5894d28c9..e61e7961f26 100644
--- a/components/inlinealert/dist/metadata.json
+++ b/components/inlinealert/dist/metadata.json
@@ -4,12 +4,34 @@
     ".spectrum-InLineAlert",
     ".spectrum-InLineAlert--info",
     ".spectrum-InLineAlert--info .spectrum-InLineAlert-icon",
+    ".spectrum-InLineAlert--info--bold",
+    ".spectrum-InLineAlert--info--bold .spectrum-InLineAlert-icon",
+    ".spectrum-InLineAlert--info--subtle",
+    ".spectrum-InLineAlert--info--subtle .spectrum-InLineAlert-icon",
     ".spectrum-InLineAlert--negative",
     ".spectrum-InLineAlert--negative .spectrum-InLineAlert-icon",
+    ".spectrum-InLineAlert--negative--bold",
+    ".spectrum-InLineAlert--negative--bold .spectrum-InLineAlert-icon",
+    ".spectrum-InLineAlert--negative--subtle",
+    ".spectrum-InLineAlert--negative--subtle .spectrum-InLineAlert-icon",
+    ".spectrum-InLineAlert--neutral",
+    ".spectrum-InLineAlert--neutral .spectrum-InLineAlert-icon",
+    ".spectrum-InLineAlert--neutral--bold",
+    ".spectrum-InLineAlert--neutral--bold .spectrum-InLineAlert-icon",
+    ".spectrum-InLineAlert--neutral--subtle",
+    ".spectrum-InLineAlert--neutral--subtle .spectrum-InLineAlert-icon",
     ".spectrum-InLineAlert--notice",
     ".spectrum-InLineAlert--notice .spectrum-InLineAlert-icon",
+    ".spectrum-InLineAlert--notice--bold",
+    ".spectrum-InLineAlert--notice--bold .spectrum-InLineAlert-icon",
+    ".spectrum-InLineAlert--notice--subtle",
+    ".spectrum-InLineAlert--notice--subtle .spectrum-InLineAlert-icon",
     ".spectrum-InLineAlert--positive",
     ".spectrum-InLineAlert--positive .spectrum-InLineAlert-icon",
+    ".spectrum-InLineAlert--positive--bold",
+    ".spectrum-InLineAlert--positive--bold .spectrum-InLineAlert-icon",
+    ".spectrum-InLineAlert--positive--subtle",
+    ".spectrum-InLineAlert--positive--subtle .spectrum-InLineAlert-icon",
     ".spectrum-InLineAlert-content",
     ".spectrum-InLineAlert-footer",
     ".spectrum-InLineAlert-footer:empty",
@@ -21,6 +43,7 @@
     "--mod-inlinealert-border-and-icon-color",
     "--mod-inlinealert-border-and-icon-color-info",
     "--mod-inlinealert-border-and-icon-color-negative",
+    "--mod-inlinealert-border-and-icon-color-neutral",
     "--mod-inlinealert-border-and-icon-color-notice",
     "--mod-inlinealert-border-and-icon-color-positive",
     "--mod-inlinealert-border-radius",
@@ -40,20 +63,29 @@
     "--mod-inlinealert-heading-line-height",
     "--mod-inlinealert-icon-size",
     "--mod-inlinealert-min-inline-size",
+    "--mod-inlinealert-min-spacing-header-to-icon",
+    "--mod-inlinealert-spacing-content-link-button",
     "--mod-inlinealert-spacing-edge-to-text",
-    "--mod-inlinealert-spacing-header-content-button",
-    "--mod-inlinealert-spacing-header-to-icon"
+    "--mod-inlinealert-spacing-header-content"
   ],
   "component": [
     "--spectrum-in-line-alert-minimum-width",
     "--spectrum-inlinealert-background-color",
+    "--spectrum-inlinealert-bold-background-color-informative",
+    "--spectrum-inlinealert-bold-background-color-negative",
+    "--spectrum-inlinealert-bold-background-color-neutral",
+    "--spectrum-inlinealert-bold-background-color-notice",
+    "--spectrum-inlinealert-bold-background-color-positive",
     "--spectrum-inlinealert-border-and-icon-color",
     "--spectrum-inlinealert-border-and-icon-color-info",
     "--spectrum-inlinealert-border-and-icon-color-negative",
+    "--spectrum-inlinealert-border-and-icon-color-neutral",
     "--spectrum-inlinealert-border-and-icon-color-notice",
     "--spectrum-inlinealert-border-and-icon-color-positive",
     "--spectrum-inlinealert-border-radius",
     "--spectrum-inlinealert-border-width",
+    "--spectrum-inlinealert-color-black",
+    "--spectrum-inlinealert-color-white",
     "--spectrum-inlinealert-content-color",
     "--spectrum-inlinealert-content-font-family",
     "--spectrum-inlinealert-content-font-size",
@@ -69,33 +101,58 @@
     "--spectrum-inlinealert-heading-line-height",
     "--spectrum-inlinealert-icon-size",
     "--spectrum-inlinealert-min-inline-size",
+    "--spectrum-inlinealert-min-spacing-header-to-icon",
+    "--spectrum-inlinealert-spacing-content-link-button",
     "--spectrum-inlinealert-spacing-edge-to-text",
-    "--spectrum-inlinealert-spacing-header-content-button",
-    "--spectrum-inlinealert-spacing-header-to-icon"
+    "--spectrum-inlinealert-spacing-header-content",
+    "--spectrum-inlinealert-subtle-background-color-informative",
+    "--spectrum-inlinealert-subtle-background-color-negative",
+    "--spectrum-inlinealert-subtle-background-color-neutral",
+    "--spectrum-inlinealert-subtle-background-color-notice",
+    "--spectrum-inlinealert-subtle-background-color-positive",
+    "--spectrum-inlinealert-subtle-color-informative",
+    "--spectrum-inlinealert-subtle-color-negative",
+    "--spectrum-inlinealert-subtle-color-neutral",
+    "--spectrum-inlinealert-subtle-color-notice",
+    "--spectrum-inlinealert-subtle-color-positive"
   ],
   "global": [
     "--spectrum-background-layer-2-color",
+    "--spectrum-black",
     "--spectrum-body-color",
     "--spectrum-body-line-height",
+    "--spectrum-body-sans-serif-font-family",
     "--spectrum-body-sans-serif-font-style",
     "--spectrum-body-sans-serif-font-weight",
     "--spectrum-body-size-s",
     "--spectrum-border-width-200",
     "--spectrum-component-height-50",
-    "--spectrum-corner-radius-100",
+    "--spectrum-corner-radius-700",
     "--spectrum-heading-color",
     "--spectrum-heading-line-height",
+    "--spectrum-heading-sans-serif-font-family",
     "--spectrum-heading-sans-serif-font-style",
     "--spectrum-heading-sans-serif-font-weight",
     "--spectrum-heading-size-xxs",
+    "--spectrum-informative-background-color-default",
+    "--spectrum-informative-subtle-background-color-default",
     "--spectrum-informative-visual-color",
+    "--spectrum-negative-background-color-default",
+    "--spectrum-negative-subtle-background-color-default",
     "--spectrum-negative-visual-color",
+    "--spectrum-neutral-background-color-default",
+    "--spectrum-neutral-subtle-background-color-default",
     "--spectrum-neutral-visual-color",
+    "--spectrum-notice-background-color-default",
+    "--spectrum-notice-subtle-background-color-default",
     "--spectrum-notice-visual-color",
+    "--spectrum-positive-background-color-default",
+    "--spectrum-positive-subtle-background-color-default",
     "--spectrum-positive-visual-color",
-    "--spectrum-sans-font-family-stack",
+    "--spectrum-spacing-100",
+    "--spectrum-spacing-200",
     "--spectrum-spacing-300",
-    "--spectrum-spacing-400",
+    "--spectrum-white",
     "--spectrum-workflow-icon-size-100"
   ],
   "passthroughs": [],
diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css
index ad548bab5eb..08d4666aa00 100644
--- a/components/inlinealert/index.css
+++ b/components/inlinealert/index.css
@@ -1,5 +1,5 @@
 /*!
- * Copyright 2024 Adobe. All rights reserved.
+ * Copyright 2025 Adobe. All rights reserved.
  *
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
  * you may not use this file except in compliance with the License. You may obtain a copy
@@ -13,13 +13,13 @@
 
 .spectrum-InLineAlert {
 	/* Font */
-	--spectrum-inlinealert-heading-font-family: var(--spectrum-sans-font-family-stack);
+	--spectrum-inlinealert-heading-font-family: var(--spectrum-heading-sans-serif-font-family);
 	--spectrum-inlinealert-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight);
 	--spectrum-inlinealert-heading-font-style: var(--spectrum-heading-sans-serif-font-style);
 	--spectrum-inlinealert-heading-font-size: var(--spectrum-heading-size-xxs);
 	--spectrum-inlinealert-heading-line-height: var(--spectrum-heading-line-height);
 
-	--spectrum-inlinealert-content-font-family: var(--spectrum-sans-font-family-stack);
+	--spectrum-inlinealert-content-font-family: var(--spectrum-body-sans-serif-font-family);
 	--spectrum-inlinealert-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
 	--spectrum-inlinealert-content-font-style: var(--spectrum-body-sans-serif-font-style);
 	--spectrum-inlinealert-content-font-size: var(--spectrum-body-size-s);
@@ -27,15 +27,16 @@
 
 	/* Size */
 	--spectrum-inlinealert-border-width: var(--spectrum-border-width-200);
-	--spectrum-inlinealert-border-radius: var(--spectrum-corner-radius-100);
+	--spectrum-inlinealert-border-radius: var(--spectrum-corner-radius-700);
 	--spectrum-inlinealert-icon-size: var(--spectrum-workflow-icon-size-100);
 	--spectrum-inlinealert-min-inline-size: var(--spectrum-in-line-alert-minimum-width);
 	--spectrum-inlinealert-header-min-block-size: var(--spectrum-component-height-50);
 
 	/* Spacing */
-	--spectrum-inlinealert-spacing-edge-to-text: var(--spectrum-spacing-400);
-	--spectrum-inlinealert-spacing-header-to-icon: var(--spectrum-spacing-400);
-	--spectrum-inlinealert-spacing-header-content-button: var(--spectrum-spacing-300);
+	--spectrum-inlinealert-spacing-edge-to-text: var(--spectrum-spacing-300);
+	--spectrum-inlinealert-min-spacing-header-to-icon: var(--spectrum-spacing-100);
+	--spectrum-inlinealert-spacing-header-content: var(--spectrum-spacing-100);
+	--spectrum-inlinealert-spacing-content-link-button: var(--spectrum-spacing-200);
 
 	/* Color */
 	--spectrum-inlinealert-background-color: var(--spectrum-background-layer-2-color);
@@ -46,7 +47,31 @@
 	--spectrum-inlinealert-border-and-icon-color-positive: var(--spectrum-positive-visual-color);
 	--spectrum-inlinealert-border-and-icon-color-notice: var(--spectrum-notice-visual-color);
 	--spectrum-inlinealert-border-and-icon-color-negative: var(--spectrum-negative-visual-color);
+	--spectrum-inlinealert-border-and-icon-color-neutral: var(--spectrum-neutral-visual-color);
+	--spectrum-inlinealert-color-white: var(--spectrum-white);
+	--spectrum-inlinealert-color-black: var(--spectrum-black);
 
+	/* Subtle fill */
+	--spectrum-inlinealert-subtle-background-color-informative: var(--spectrum-informative-subtle-background-color-default);
+	--spectrum-inlinealert-subtle-color-informative: var(--spectrum-informative-visual-color);
+	--spectrum-inlinealert-subtle-background-color-positive: var(--spectrum-positive-subtle-background-color-default);
+	--spectrum-inlinealert-subtle-color-positive: var(--spectrum-positive-visual-color);
+	--spectrum-inlinealert-subtle-background-color-notice: var(--spectrum-notice-subtle-background-color-default);
+	--spectrum-inlinealert-subtle-color-notice: var(--spectrum-notice-visual-color);
+	--spectrum-inlinealert-subtle-background-color-negative: var(--spectrum-negative-subtle-background-color-default);
+	--spectrum-inlinealert-subtle-color-negative: var(--spectrum-negative-visual-color);
+	--spectrum-inlinealert-subtle-background-color-neutral: var(--spectrum-neutral-subtle-background-color-default);
+	--spectrum-inlinealert-subtle-color-neutral: var(--spectrum-neutral-visual-color);
+
+	/* Bold fill */
+	--spectrum-inlinealert-bold-background-color-informative: var(--spectrum-informative-background-color-default);
+	--spectrum-inlinealert-bold-background-color-positive: var(--spectrum-positive-background-color-default);
+	--spectrum-inlinealert-bold-background-color-notice: var(--spectrum-notice-background-color-default);
+	--spectrum-inlinealert-bold-background-color-negative: var(--spectrum-negative-background-color-default);
+	--spectrum-inlinealert-bold-background-color-neutral: var(--spectrum-neutral-background-color-default);
+}
+
+.spectrum-InLineAlert {
 	position: relative;
 
 	display: inline-block;
@@ -65,15 +90,6 @@
 	border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color)));
 }
 
-@media (forced-colors: active) {
-	.spectrum-InLineAlert {
-		--highcontrast-inlinealert-background-color: Background;
-		--highcontrast-inlinealert-header-color: CanvasText;
-		--highcontrast-inlinealert-content-color: CanvasText;
-		--highcontrast-inlinealert-border-and-icon-color: ButtonBorder;
-	}
-}
-
 .spectrum-InLineAlert-icon {
 	inline-size: var(--mod-inlinealert-icon-size, var(--spectrum-inlinealert-icon-size));
 	block-size: var(--mod-inlinealert-icon-size, var(--spectrum-inlinealert-icon-size));
@@ -84,8 +100,8 @@
 	align-items: center;
 	justify-content: space-between;
 
-	/* Minimum space between header and icon */
-	gap: var(--mod-inlinealert-spacing-header-to-icon, var(--spectrum-inlinealert-spacing-header-to-icon));
+	gap: var(--mod-inlinealert-min-spacing-header-to-icon, var(--spectrum-inlinealert-min-spacing-header-to-icon));
+	margin-block-end: var(--mod-inlinealert-spacing-header-content, var(--spectrum-inlinealert-spacing-header-content));
 
 	font-weight: var(--mod-inlinealert-heading-font-weight, var(--spectrum-inlinealert-heading-font-weight));
 	font-family: var(--mod-inlinealert-heading-font-family, var(--spectrum-inlinealert-heading-font-family));
@@ -101,7 +117,6 @@
 
 .spectrum-InLineAlert-content {
 	display: block;
-	margin-block-start: var(--mod-inlinealert-spacing-header-content-button, var(--spectrum-inlinealert-spacing-header-content-button));
 	margin-block-end: 0;
 	margin-inline-start: 0;
 	margin-inline-end: 0;
@@ -120,8 +135,8 @@
 
 .spectrum-InLineAlert-footer {
 	display: flex;
-	justify-content: flex-end;
-	margin-block-start: var(--mod-inlinealert-spacing-header-content-button, var(--spectrum-inlinealert-spacing-header-content-button));
+	justify-content: flex-start;
+	margin-block-start: var(--mod-inlinealert-spacing-content-link-button, var(--spectrum-inlinealert-spacing-content-link-button));
 
 	&:empty {
 		display: none;
@@ -136,6 +151,28 @@
 	}
 }
 
+.spectrum-InLineAlert--info--subtle {
+	--mod-inlinealert-border-width: 0;
+	--mod-inlinealert-background-color: var(--spectrum-inlinealert-subtle-background-color-informative);
+	--mod-inlinealert-border-and-icon-color-info: var(--spectrum-inlinealert-subtle-color-informative);
+
+	.spectrum-InLineAlert-icon {
+		--mod-inlinealert-border-and-icon-color-info: var(--spectrum-inlinealert-subtle-color-informative);
+	}
+}
+
+.spectrum-InLineAlert--info--bold {
+	--mod-inlinealert-border-width: 0;
+	--mod-inlinealert-background-color: var(--spectrum-inlinealert-bold-background-color-informative);
+	--mod-inlinealert-header-color: var(--spectrum-inlinealert-color-white);
+	--mod-inlinealert-content-color: var(--spectrum-inlinealert-color-white);
+	--mod-inlinealert-border-and-icon-color-info: var(--spectrum-inlinealert-color-white);
+
+	.spectrum-InLineAlert-icon {
+		--mod-inlinealert-border-and-icon-color-info: var(--spectrum-inlinealert-color-white);
+	}
+}
+
 .spectrum-InLineAlert--notice {
 	border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-notice, var(--spectrum-inlinealert-border-and-icon-color-notice)));
 
@@ -144,6 +181,24 @@
 	}
 }
 
+.spectrum-InLineAlert--notice--subtle {
+	--mod-inlinealert-border-width: 0;
+	--mod-inlinealert-background-color: var(--spectrum-inlinealert-subtle-background-color-notice);
+
+	.spectrum-InLineAlert-icon {
+		--mod-inlinealert-border-and-icon-color-notice: var(--spectrum-inlinealert-subtle-color-notice);
+	}
+}
+
+.spectrum-InLineAlert--notice--bold {
+	--mod-inlinealert-border-width: 0;
+	--mod-inlinealert-background-color: var(--spectrum-inlinealert-bold-background-color-notice);
+
+	.spectrum-InLineAlert-icon {
+		--mod-inlinealert-border-and-icon-color-notice: var(--spectrum-inlinealert-color-black);
+	}
+}
+
 .spectrum-InLineAlert--positive {
 	border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-positive, var(--spectrum-inlinealert-border-and-icon-color-positive)));
 
@@ -152,6 +207,37 @@
 	}
 }
 
+.spectrum-InLineAlert--positive--subtle {
+	--mod-inlinealert-border-width: 0;
+	--mod-inlinealert-background-color: var(--spectrum-inlinealert-subtle-background-color-positive);
+
+	.spectrum-InLineAlert-icon {
+		--mod-inlinealert-border-and-icon-color-positive: var(--spectrum-inlinealert-subtle-color-positive);
+	}
+}
+
+.spectrum-InLineAlert--positive--bold {
+	--mod-inlinealert-border-width: 0;
+	--mod-inlinealert-background-color: var(--spectrum-inlinealert-bold-background-color-positive);
+	--mod-inlinealert-header-color: var(--spectrum-inlinealert-color-white);
+	--mod-inlinealert-content-color: var(--spectrum-inlinealert-color-white);
+
+	.spectrum-InLineAlert-icon {
+		--mod-inlinealert-border-and-icon-color-positive: var(--spectrum-inlinealert-color-white);
+	}
+}
+
+.spectrum-InLineAlert--info--bold {
+	--mod-inlinealert-border-width: 0;
+	--mod-inlinealert-background-color: var(--spectrum-inlinealert-bold-background-color-informative);
+	--mod-inlinealert-header-color: var(--spectrum-inlinealert-color-white);
+	--mod-inlinealert-content-color: var(--spectrum-inlinealert-color-white);
+
+	.spectrum-InLineAlert-icon {
+		--mod-inlinealert-border-and-icon-color-positive: var(--spectrum-inlinealert-color-white);
+	}
+}
+
 .spectrum-InLineAlert--negative {
 	border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-negative, var(--spectrum-inlinealert-border-and-icon-color-negative)));
 
@@ -159,3 +245,61 @@
 		color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-negative, var(--spectrum-inlinealert-border-and-icon-color-negative)));
 	}
 }
+
+.spectrum-InLineAlert--negative--subtle {
+	--mod-inlinealert-border-width: 0;
+	--mod-inlinealert-background-color: var(--spectrum-inlinealert-subtle-background-color-negative);
+	--mod-inlinealert-border-and-icon-color-negative: var(--spectrum-inlinealert-subtle-color-negative);
+
+	.spectrum-InLineAlert-icon {
+		--mod-inlinealert-border-and-icon-color-negative: var(--spectrum-inlinealert-subtle-color-negative);
+	}
+}
+
+.spectrum-InLineAlert--negative--bold {
+	--mod-inlinealert-border-width: 0;
+	--mod-inlinealert-background-color: var(--spectrum-inlinealert-bold-background-color-negative);
+	--mod-inlinealert-header-color: var(--spectrum-inlinealert-color-white);
+	--mod-inlinealert-content-color: var(--spectrum-inlinealert-color-white);
+
+	.spectrum-InLineAlert-icon {
+		--mod-inlinealert-border-and-icon-color-negative: var(--spectrum-inlinealert-color-white);
+	}
+}
+
+.spectrum-InLineAlert--neutral {
+	border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-neutral, var(--spectrum-inlinealert-border-and-icon-color-neutral)));
+
+	.spectrum-InLineAlert-icon {
+		color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-neutral, var(--spectrum-inlinealert-border-and-icon-color-neutral)));
+	}
+}
+
+.spectrum-InLineAlert--neutral--subtle {
+	--mod-inlinealert-border-width: 0;
+	--mod-inlinealert-background-color: var(--spectrum-inlinealert-subtle-background-color-neutral);
+
+	.spectrum-InLineAlert-icon {
+		--mod-inlinealert-border-and-icon-color-neutral: var(--spectrum-inlinealert-subtle-color-neutral);
+	}
+}
+
+.spectrum-InLineAlert--neutral--bold {
+	--mod-inlinealert-border-width: 0;
+	--mod-inlinealert-background-color: var(--spectrum-inlinealert-bold-background-color-neutral);
+	--mod-inlinealert-header-color: var(--spectrum-inlinealert-color-white);
+	--mod-inlinealert-content-color: var(--spectrum-inlinealert-color-white);
+
+	.spectrum-InLineAlert-icon {
+		--mod-inlinealert-border-and-icon-color-neutral: var(--spectrum-inlinealert-color-white);
+	}
+}
+
+@media (forced-colors: active) {
+	.spectrum-InLineAlert {
+		--highcontrast-inlinealert-background-color: Background;
+		--highcontrast-inlinealert-header-color: CanvasText;
+		--highcontrast-inlinealert-content-color: CanvasText;
+		--highcontrast-inlinealert-border-and-icon-color: ButtonBorder;
+	}
+}
diff --git a/components/inlinealert/stories/inlinealert.stories.js b/components/inlinealert/stories/inlinealert.stories.js
index 6ed4d7c5f18..9ba37590725 100644
--- a/components/inlinealert/stories/inlinealert.stories.js
+++ b/components/inlinealert/stories/inlinealert.stories.js
@@ -41,6 +41,26 @@ export default {
 			options: ["neutral", "info", "positive", "notice", "negative"],
 			control: "select",
 		},
+		isSubtle: {
+			name: "Subtle",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Component",
+			},
+			control: "boolean",
+			if: { arg: "isBold", truthy: false },
+		},
+		isBold: {
+			name: "Bold",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Component",
+			},
+			control: "boolean",
+			if: { arg: "isSubtle", truthy: false },
+		},
 		isClosable: {
 			name: "Closable",
 			type: { name: "boolean" },
@@ -53,9 +73,11 @@ export default {
 	},
 	args: {
 		rootClass: "spectrum-InLineAlert",
-		headerText: "Neutral in-line alert header",
+		headerText: "In-line alert header",
 		text: "This is an alert.",
 		variant: "neutral",
+		isSubtle: false,
+		isBold: false,
 		isClosable: false,
 	},
 	parameters: {
@@ -77,8 +99,6 @@ Default.args = {};
 // ********* DOCS ONLY ********* //
 /**
  * The informative variant uses the informative semantic color (blue) and has an "information" icon to help those with color vision deficiency discern the message tone. This should be used when the message needs to call extra attention, as compared to the neutral variant.
- *
- * _Spectrum for Adobe Express uses a different icon. Use the SX_Info_18_S.svg icon in the Express workflow icon set._
  */
 export const Informative = Template.bind({});
 Informative.args = {
@@ -92,8 +112,6 @@ Informative.tags = ["!dev"];
 
 /**
  * A negative variant uses the negative semantic color (red) and has an "alert" icon to help those with color vision deficiency to discern the message tone. Negative variants are used to show an error or failure, or to convey something that needs to be immediately acknowledged or addressed.
- *
- * _Spectrum for Adobe Express uses a different icon. Use the SX_Alert_18_S.svg icon in the Express workflow icon set._
  */
 export const Negative = Template.bind({});
 Negative.args = {
@@ -107,8 +125,6 @@ Negative.tags = ["!dev"];
 
 /**
  * The positive variant uses the positive semantic color (green) and has a "checkmark" icon to help those with color vision deficiency discern the message tone. This variant should be used to inform someone of a successful function or result of an action they took.
- *
- * _Spectrum for Adobe Express uses a different icon. Use the SX_CheckmarkCircle_18_S.svg icon in the Express workflow icon set._
  */
 export const Positive = Template.bind({});
 Positive.args = {
@@ -122,8 +138,6 @@ Positive.tags = ["!dev"];
 
 /**
  * To warn about a situation that may need to be addressed soon, use the notice variant. It utilizes the notice semantic color (orange) and has an "alert" icon to help those with color vision deficiency to discern the message tone.
- *
- * _Spectrum for Adobe Express uses a different icon. Use the SX_Alert_18_S.svg icon in the Express workflow icon set._
  */
 export const Notice = Template.bind({});
 Notice.args = {
@@ -137,8 +151,6 @@ Notice.tags = ["!dev"];
 
 /**
  * An in-line alert with a close button in the footer. Combine this strategy with any variant.
- *
- * _Spectrum for Adobe Express uses a different icon. Use the SX_Alert_18_S.svg icon in the Express workflow icon set._
  */
 export const Closable = Template.bind({});
 Closable.args = {
diff --git a/components/inlinealert/stories/template.js b/components/inlinealert/stories/template.js
index f5439cf8c4d..ff23b208ca3 100644
--- a/components/inlinealert/stories/template.js
+++ b/components/inlinealert/stories/template.js
@@ -13,20 +13,24 @@ export const Template = ({
 	headerText,
 	text,
 	variant = "neutral",
+	isSubtle = false,
+	isBold = false,
 	isClosable = false,
 } = {}, context = {}) => {
 	let iconName;
 	switch (variant) {
 		case "info":
-			iconName = "Info";
+			iconName = "InfoCircle";
 			break;
 		case "positive":
 			iconName = "CheckmarkCircle";
 			break;
 		case "notice":
+			iconName = "AlertDiamond";
+			break;
 		case "negative":
 		case "closable":
-			iconName = "Alert";
+			iconName = "AlertTriangle";
 			break;
 		default:
 			iconName = undefined;
@@ -57,6 +61,8 @@ export const Template = ({
 			class=${classMap({
 				[rootClass]: true,
 				[`${rootClass}--${variant}`]: typeof variant !== "undefined",
+				[`${rootClass}--${variant}--${"subtle"}`]: typeof variant !== "undefined" && isSubtle,
+				[`${rootClass}--${variant}--${"bold"}`]: typeof variant !== "undefined" && isBold,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			style=${styleMap(customStyles)}

From f5d75975f083c26a4e81d50157cd95813348744f Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Wed, 9 Apr 2025 15:13:10 -0700
Subject: [PATCH 02/23] chore(in-line-alert): allow only subtle or bold

---
 components/inlinealert/dist/metadata.json | 6 ++++--
 components/inlinealert/index.css          | 4 ++--
 2 files changed, 6 insertions(+), 4 deletions(-)

diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json
index e61e7961f26..7b02909cf0a 100644
--- a/components/inlinealert/dist/metadata.json
+++ b/components/inlinealert/dist/metadata.json
@@ -6,8 +6,10 @@
     ".spectrum-InLineAlert--info .spectrum-InLineAlert-icon",
     ".spectrum-InLineAlert--info--bold",
     ".spectrum-InLineAlert--info--bold .spectrum-InLineAlert-icon",
-    ".spectrum-InLineAlert--info--subtle",
-    ".spectrum-InLineAlert--info--subtle .spectrum-InLineAlert-icon",
+    ".spectrum-InLineAlert--info--bold:not(.spectrum-InLineAlert--info--subtle)",
+    ".spectrum-InLineAlert--info--bold:not(.spectrum-InLineAlert--info--subtle) .spectrum-InLineAlert-icon",
+    ".spectrum-InLineAlert--info--subtle:not(.spectrum-InLineAlert--info--bold)",
+    ".spectrum-InLineAlert--info--subtle:not(.spectrum-InLineAlert--info--bold) .spectrum-InLineAlert-icon",
     ".spectrum-InLineAlert--negative",
     ".spectrum-InLineAlert--negative .spectrum-InLineAlert-icon",
     ".spectrum-InLineAlert--negative--bold",
diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css
index 08d4666aa00..6507d06a68f 100644
--- a/components/inlinealert/index.css
+++ b/components/inlinealert/index.css
@@ -151,7 +151,7 @@
 	}
 }
 
-.spectrum-InLineAlert--info--subtle {
+.spectrum-InLineAlert--info--subtle:not(.spectrum-InLineAlert--info--bold) {
 	--mod-inlinealert-border-width: 0;
 	--mod-inlinealert-background-color: var(--spectrum-inlinealert-subtle-background-color-informative);
 	--mod-inlinealert-border-and-icon-color-info: var(--spectrum-inlinealert-subtle-color-informative);
@@ -161,7 +161,7 @@
 	}
 }
 
-.spectrum-InLineAlert--info--bold {
+.spectrum-InLineAlert--info--bold:not(.spectrum-InLineAlert--info--subtle) {
 	--mod-inlinealert-border-width: 0;
 	--mod-inlinealert-background-color: var(--spectrum-inlinealert-bold-background-color-informative);
 	--mod-inlinealert-header-color: var(--spectrum-inlinealert-color-white);

From 6e4906fb9ba37b6b73ba5632f2ca5e02b442d57d Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Wed, 16 Apr 2025 16:55:56 -0700
Subject: [PATCH 03/23] fix(in-line-alert): correct changelog to showcase
 custom properties rather than selectors

---
 .changeset/big-jars-pump.md                | 38 +++++++++-------------
 components/inlinealert/stories/template.js |  4 +--
 2 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/.changeset/big-jars-pump.md b/.changeset/big-jars-pump.md
index e52f9d18bc5..e3e85f5856c 100644
--- a/.changeset/big-jars-pump.md
+++ b/.changeset/big-jars-pump.md
@@ -22,33 +22,27 @@ Subtle and bold styles have been added for each badge variant.
 
 ##### New custom properties
 
-`.spectrum-InLineAlert--info--bold`
-`.spectrum-InLineAlert--info--bold .spectrum-InLineAlert-icon`
-`.spectrum-InLineAlert--info--subtle`
-`.spectrum-InLineAlert--info--subtle .spectrum-InLineAlert-icon`
-`.spectrum-InLineAlert--negative--bold`
-`.spectrum-InLineAlert--negative--bold .spectrum-InLineAlert-icon`
-`.spectrum-InLineAlert--negative--subtle`
-`.spectrum-InLineAlert--negative--subtle .spectrum-InLineAlert-icon`
-`.spectrum-InLineAlert--neutral`
-`.spectrum-InLineAlert--neutral .spectrum-InLineAlert-icon`
-`.spectrum-InLineAlert--neutral--bold`
-`.spectrum-InLineAlert--neutral--bold .spectrum-InLineAlert-icon`
-`.spectrum-InLineAlert--neutral--subtle`
-`.spectrum-InLineAlert--neutral--subtle .spectrum-InLineAlert-icon`
-`.spectrum-InLineAlert--notice--bold`
-`.spectrum-InLineAlert--notice--bold .spectrum-InLineAlert-icon`
-`.spectrum-InLineAlert--notice--subtle`
-`.spectrum-InLineAlert--notice--subtle .spectrum-InLineAlert-icon`
-`.spectrum-InLineAlert--positive--bold`
-`.spectrum-InLineAlert--positive--bold .spectrum-InLineAlert-icon`
-`.spectrum-InLineAlert--positive--subtle`
-`.spectrum-InLineAlert--positive--subtle .spectrum-InLineAlert-icon`
 `--spectrum-inlinealert-bold-background-color-informative`
 `--spectrum-inlinealert-bold-background-color-negative`
 `--spectrum-inlinealert-bold-background-color-neutral`
 `--spectrum-inlinealert-bold-background-color-notice`
 `--spectrum-inlinealert-bold-background-color-positive`
+`--spectrum-inlinealert-border-and-icon-color-neutral`
+`--spectrum-inlinealert-color-black`
+`--spectrum-inlinealert-color-white`
+`--spectrum-inlinealert-min-spacing-header-to-icon`
+`--spectrum-inlinealert-spacing-content-link-button`
+`--spectrum-inlinealert-spacing-header-content`
+`--spectrum-inlinealert-subtle-background-color-informative`
+`--spectrum-inlinealert-subtle-background-color-negative`
+`--spectrum-inlinealert-subtle-background-color-neutral`
+`--spectrum-inlinealert-subtle-background-color-notice`
+`--spectrum-inlinealert-subtle-background-color-positive`
+`--spectrum-inlinealert-subtle-color-informative`
+`--spectrum-inlinealert-subtle-color-negative`
+`--spectrum-inlinealert-subtle-color-neutral`
+`--spectrum-inlinealert-subtle-color-notice`
+`--spectrum-inlinealert-subtle-color-positive`
 
 ##### Removed custom properties
 
diff --git a/components/inlinealert/stories/template.js b/components/inlinealert/stories/template.js
index ff23b208ca3..fb570ed3fcb 100644
--- a/components/inlinealert/stories/template.js
+++ b/components/inlinealert/stories/template.js
@@ -61,8 +61,8 @@ export const Template = ({
 			class=${classMap({
 				[rootClass]: true,
 				[`${rootClass}--${variant}`]: typeof variant !== "undefined",
-				[`${rootClass}--${variant}--${"subtle"}`]: typeof variant !== "undefined" && isSubtle,
-				[`${rootClass}--${variant}--${"bold"}`]: typeof variant !== "undefined" && isBold,
+				[`${rootClass}--${variant}--subtle`]: typeof variant !== "undefined" && isSubtle,
+				[`${rootClass}--${variant}--bold`]: typeof variant !== "undefined" && isBold,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			style=${styleMap(customStyles)}

From 5de8ce98a1c993f555c4541b9ded8676cd63d2dd Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Wed, 16 Apr 2025 17:11:56 -0700
Subject: [PATCH 04/23] chore(in-line-alert): additional granular mods for
 background colors

---
 .changeset/big-jars-pump.md               | 10 ++++++++++
 components/inlinealert/dist/metadata.json | 12 +++++++++++-
 components/inlinealert/index.css          | 22 +++++++++++-----------
 3 files changed, 32 insertions(+), 12 deletions(-)

diff --git a/.changeset/big-jars-pump.md b/.changeset/big-jars-pump.md
index e3e85f5856c..d74f3336cfa 100644
--- a/.changeset/big-jars-pump.md
+++ b/.changeset/big-jars-pump.md
@@ -14,6 +14,16 @@ Subtle and bold styles have been added for each badge variant.
 `--mod-inlinealert-min-spacing-header-to-icon`
 `--mod-inlinealert-spacing-content-link-button`
 `--mod-inlinealert-spacing-header-content`
+`--mod-inlinealert-background-color-info-subtle`
+`--mod-inlinealert-bold-background-color-informative`
+`--mod-inlinealert-bold-background-color-negative`
+`--mod-inlinealert-bold-background-color-neutral`
+`--mod-inlinealert-bold-background-color-notice`
+`--mod-inlinealert-bold-background-color-positive`
+`--mod-inlinealert-subtle-background-color-negative`
+`--mod-inlinealert-subtle-background-color-neutral`
+`--mod-inlinealert-subtle-background-color-notice`
+`--mod-inlinealert-subtle-background-color-positive`
 
 ##### Removed mods
 
diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json
index 7b02909cf0a..c89188a47f2 100644
--- a/components/inlinealert/dist/metadata.json
+++ b/components/inlinealert/dist/metadata.json
@@ -42,6 +42,12 @@
   ],
   "modifiers": [
     "--mod-inlinealert-background-color",
+    "--mod-inlinealert-background-color-info-subtle",
+    "--mod-inlinealert-bold-background-color-informative",
+    "--mod-inlinealert-bold-background-color-negative",
+    "--mod-inlinealert-bold-background-color-neutral",
+    "--mod-inlinealert-bold-background-color-notice",
+    "--mod-inlinealert-bold-background-color-positive",
     "--mod-inlinealert-border-and-icon-color",
     "--mod-inlinealert-border-and-icon-color-info",
     "--mod-inlinealert-border-and-icon-color-negative",
@@ -68,7 +74,11 @@
     "--mod-inlinealert-min-spacing-header-to-icon",
     "--mod-inlinealert-spacing-content-link-button",
     "--mod-inlinealert-spacing-edge-to-text",
-    "--mod-inlinealert-spacing-header-content"
+    "--mod-inlinealert-spacing-header-content",
+    "--mod-inlinealert-subtle-background-color-negative",
+    "--mod-inlinealert-subtle-background-color-neutral",
+    "--mod-inlinealert-subtle-background-color-notice",
+    "--mod-inlinealert-subtle-background-color-positive"
   ],
   "component": [
     "--spectrum-in-line-alert-minimum-width",
diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css
index 6507d06a68f..f8697ecbcdb 100644
--- a/components/inlinealert/index.css
+++ b/components/inlinealert/index.css
@@ -153,7 +153,7 @@
 
 .spectrum-InLineAlert--info--subtle:not(.spectrum-InLineAlert--info--bold) {
 	--mod-inlinealert-border-width: 0;
-	--mod-inlinealert-background-color: var(--spectrum-inlinealert-subtle-background-color-informative);
+	--mod-inlinealert-background-color: var(--mod-inlinealert-background-color-info-subtle, var(--spectrum-inlinealert-subtle-background-color-informative));
 	--mod-inlinealert-border-and-icon-color-info: var(--spectrum-inlinealert-subtle-color-informative);
 
 	.spectrum-InLineAlert-icon {
@@ -163,7 +163,7 @@
 
 .spectrum-InLineAlert--info--bold:not(.spectrum-InLineAlert--info--subtle) {
 	--mod-inlinealert-border-width: 0;
-	--mod-inlinealert-background-color: var(--spectrum-inlinealert-bold-background-color-informative);
+	--mod-inlinealert-background-color: var(--mod-inlinealert-bold-background-color-informative, var(--spectrum-inlinealert-bold-background-color-informative));
 	--mod-inlinealert-header-color: var(--spectrum-inlinealert-color-white);
 	--mod-inlinealert-content-color: var(--spectrum-inlinealert-color-white);
 	--mod-inlinealert-border-and-icon-color-info: var(--spectrum-inlinealert-color-white);
@@ -183,7 +183,7 @@
 
 .spectrum-InLineAlert--notice--subtle {
 	--mod-inlinealert-border-width: 0;
-	--mod-inlinealert-background-color: var(--spectrum-inlinealert-subtle-background-color-notice);
+	--mod-inlinealert-background-color: var(--mod-inlinealert-subtle-background-color-notice, var(--spectrum-inlinealert-subtle-background-color-notice));
 
 	.spectrum-InLineAlert-icon {
 		--mod-inlinealert-border-and-icon-color-notice: var(--spectrum-inlinealert-subtle-color-notice);
@@ -192,7 +192,7 @@
 
 .spectrum-InLineAlert--notice--bold {
 	--mod-inlinealert-border-width: 0;
-	--mod-inlinealert-background-color: var(--spectrum-inlinealert-bold-background-color-notice);
+	--mod-inlinealert-background-color: var(--mod-inlinealert-bold-background-color-notice, var(--spectrum-inlinealert-bold-background-color-notice));
 
 	.spectrum-InLineAlert-icon {
 		--mod-inlinealert-border-and-icon-color-notice: var(--spectrum-inlinealert-color-black);
@@ -209,7 +209,7 @@
 
 .spectrum-InLineAlert--positive--subtle {
 	--mod-inlinealert-border-width: 0;
-	--mod-inlinealert-background-color: var(--spectrum-inlinealert-subtle-background-color-positive);
+	--mod-inlinealert-background-color: var(--mod-inlinealert-subtle-background-color-positive, var(--spectrum-inlinealert-subtle-background-color-positive));
 
 	.spectrum-InLineAlert-icon {
 		--mod-inlinealert-border-and-icon-color-positive: var(--spectrum-inlinealert-subtle-color-positive);
@@ -218,7 +218,7 @@
 
 .spectrum-InLineAlert--positive--bold {
 	--mod-inlinealert-border-width: 0;
-	--mod-inlinealert-background-color: var(--spectrum-inlinealert-bold-background-color-positive);
+	--mod-inlinealert-background-color: var(--mod-inlinealert-bold-background-color-positive, var(--spectrum-inlinealert-bold-background-color-positive));
 	--mod-inlinealert-header-color: var(--spectrum-inlinealert-color-white);
 	--mod-inlinealert-content-color: var(--spectrum-inlinealert-color-white);
 
@@ -229,7 +229,7 @@
 
 .spectrum-InLineAlert--info--bold {
 	--mod-inlinealert-border-width: 0;
-	--mod-inlinealert-background-color: var(--spectrum-inlinealert-bold-background-color-informative);
+	--mod-inlinealert-background-color: var(--mod-inlinealert-bold-background-color-informative, var(--spectrum-inlinealert-bold-background-color-informative));
 	--mod-inlinealert-header-color: var(--spectrum-inlinealert-color-white);
 	--mod-inlinealert-content-color: var(--spectrum-inlinealert-color-white);
 
@@ -248,7 +248,7 @@
 
 .spectrum-InLineAlert--negative--subtle {
 	--mod-inlinealert-border-width: 0;
-	--mod-inlinealert-background-color: var(--spectrum-inlinealert-subtle-background-color-negative);
+	--mod-inlinealert-background-color: var(--mod-inlinealert-subtle-background-color-negative, var(--spectrum-inlinealert-subtle-background-color-negative));
 	--mod-inlinealert-border-and-icon-color-negative: var(--spectrum-inlinealert-subtle-color-negative);
 
 	.spectrum-InLineAlert-icon {
@@ -258,7 +258,7 @@
 
 .spectrum-InLineAlert--negative--bold {
 	--mod-inlinealert-border-width: 0;
-	--mod-inlinealert-background-color: var(--spectrum-inlinealert-bold-background-color-negative);
+	--mod-inlinealert-background-color: var(--mod-inlinealert-bold-background-color-negative, var(--spectrum-inlinealert-bold-background-color-negative));
 	--mod-inlinealert-header-color: var(--spectrum-inlinealert-color-white);
 	--mod-inlinealert-content-color: var(--spectrum-inlinealert-color-white);
 
@@ -277,7 +277,7 @@
 
 .spectrum-InLineAlert--neutral--subtle {
 	--mod-inlinealert-border-width: 0;
-	--mod-inlinealert-background-color: var(--spectrum-inlinealert-subtle-background-color-neutral);
+	--mod-inlinealert-background-color: var(--mod-inlinealert-subtle-background-color-neutral, var(--spectrum-inlinealert-subtle-background-color-neutral));
 
 	.spectrum-InLineAlert-icon {
 		--mod-inlinealert-border-and-icon-color-neutral: var(--spectrum-inlinealert-subtle-color-neutral);
@@ -286,7 +286,7 @@
 
 .spectrum-InLineAlert--neutral--bold {
 	--mod-inlinealert-border-width: 0;
-	--mod-inlinealert-background-color: var(--spectrum-inlinealert-bold-background-color-neutral);
+	--mod-inlinealert-background-color: var(--mod-inlinealert-bold-background-color-neutral, var(--spectrum-inlinealert-bold-background-color-neutral));
 	--mod-inlinealert-header-color: var(--spectrum-inlinealert-color-white);
 	--mod-inlinealert-content-color: var(--spectrum-inlinealert-color-white);
 

From ae89bde4c983cf3e16699411540734e6e29546b5 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Thu, 17 Apr 2025 08:49:35 -0700
Subject: [PATCH 05/23] fix(in-line-alert): resolve issues with button colors
 in bold + subtle variants

---
 components/inlinealert/dist/metadata.json |  5 ++++-
 components/inlinealert/index.css          | 15 +++++++++++++++
 2 files changed, 19 insertions(+), 1 deletion(-)

diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json
index c89188a47f2..536e34f53d2 100644
--- a/components/inlinealert/dist/metadata.json
+++ b/components/inlinealert/dist/metadata.json
@@ -167,7 +167,10 @@
     "--spectrum-white",
     "--spectrum-workflow-icon-size-100"
   ],
-  "passthroughs": [],
+  "passthroughs": [
+    "--mod-button-border-color-default",
+    "--mod-button-content-color-default"
+  ],
   "high-contrast": [
     "--highcontrast-inlinealert-background-color",
     "--highcontrast-inlinealert-border-and-icon-color",
diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css
index f8697ecbcdb..8b6ee494f7e 100644
--- a/components/inlinealert/index.css
+++ b/components/inlinealert/index.css
@@ -168,6 +168,9 @@
 	--mod-inlinealert-content-color: var(--spectrum-inlinealert-color-white);
 	--mod-inlinealert-border-and-icon-color-info: var(--spectrum-inlinealert-color-white);
 
+	--mod-button-content-color-default: var(--spectrum-inlinealert-color-white);
+	--mod-button-border-color-default: var(--spectrum-inlinealert-color-white);
+
 	.spectrum-InLineAlert-icon {
 		--mod-inlinealert-border-and-icon-color-info: var(--spectrum-inlinealert-color-white);
 	}
@@ -222,6 +225,9 @@
 	--mod-inlinealert-header-color: var(--spectrum-inlinealert-color-white);
 	--mod-inlinealert-content-color: var(--spectrum-inlinealert-color-white);
 
+	--mod-button-content-color-default: var(--spectrum-inlinealert-color-white);
+	--mod-button-border-color-default: var(--spectrum-inlinealert-color-white);
+
 	.spectrum-InLineAlert-icon {
 		--mod-inlinealert-border-and-icon-color-positive: var(--spectrum-inlinealert-color-white);
 	}
@@ -233,6 +239,9 @@
 	--mod-inlinealert-header-color: var(--spectrum-inlinealert-color-white);
 	--mod-inlinealert-content-color: var(--spectrum-inlinealert-color-white);
 
+	--mod-button-content-color-default: var(--spectrum-inlinealert-color-white);
+	--mod-button-border-color-default: var(--spectrum-inlinealert-color-white);
+
 	.spectrum-InLineAlert-icon {
 		--mod-inlinealert-border-and-icon-color-positive: var(--spectrum-inlinealert-color-white);
 	}
@@ -262,6 +271,9 @@
 	--mod-inlinealert-header-color: var(--spectrum-inlinealert-color-white);
 	--mod-inlinealert-content-color: var(--spectrum-inlinealert-color-white);
 
+	--mod-button-content-color-default: var(--spectrum-inlinealert-color-white);
+	--mod-button-border-color-default: var(--spectrum-inlinealert-color-white);
+
 	.spectrum-InLineAlert-icon {
 		--mod-inlinealert-border-and-icon-color-negative: var(--spectrum-inlinealert-color-white);
 	}
@@ -290,6 +302,9 @@
 	--mod-inlinealert-header-color: var(--spectrum-inlinealert-color-white);
 	--mod-inlinealert-content-color: var(--spectrum-inlinealert-color-white);
 
+	--mod-button-content-color-default: var(--spectrum-inlinealert-color-white);
+	--mod-button-border-color-default: var(--spectrum-inlinealert-color-white);
+
 	.spectrum-InLineAlert-icon {
 		--mod-inlinealert-border-and-icon-color-neutral: var(--spectrum-inlinealert-color-white);
 	}

From 5f6f10ad4710e1ec45850c5a21b0446dfa15af83 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Thu, 17 Apr 2025 08:58:02 -0700
Subject: [PATCH 06/23] chore(in-line-alert): add subtle and bold variants to
 testing grid

---
 components/inlinealert/stories/inlinealert.test.js | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/components/inlinealert/stories/inlinealert.test.js b/components/inlinealert/stories/inlinealert.test.js
index 4f74e3bad08..d051a728932 100644
--- a/components/inlinealert/stories/inlinealert.test.js
+++ b/components/inlinealert/stories/inlinealert.test.js
@@ -22,5 +22,13 @@ export const InlineAlertGroup = Variants({
 			testHeading: "Closable",
 			isClosable: true,
 		},
+		{
+			testHeading: "Subtle",
+			isSubtle: true,
+		},
+		{
+			testHeading: "Bold",
+			isBold: true,
+		},
 	],
 });

From 14317e839ab5680c09561dbb6ec3f7436d9253bb Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Mon, 21 Apr 2025 08:34:12 -0700
Subject: [PATCH 07/23] chore(in-line-alert): add subtle + bold closable tests

---
 components/inlinealert/stories/inlinealert.test.js | 10 ++++++++++
 1 file changed, 10 insertions(+)

diff --git a/components/inlinealert/stories/inlinealert.test.js b/components/inlinealert/stories/inlinealert.test.js
index d051a728932..8f3845c6c47 100644
--- a/components/inlinealert/stories/inlinealert.test.js
+++ b/components/inlinealert/stories/inlinealert.test.js
@@ -30,5 +30,15 @@ export const InlineAlertGroup = Variants({
 			testHeading: "Bold",
 			isBold: true,
 		},
+		{
+			testHeading: "Subtle",
+			isSubtle: true,
+			isClosable: true,
+		},
+		{
+			testHeading: "Bold",
+			isBold: true,
+			isClosable: true,
+		},
 	],
 });

From c07dd0998472f0021a0e3590710da1bc32c18c67 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Mon, 21 Apr 2025 09:16:20 -0700
Subject: [PATCH 08/23] chore(in-line-alert): add link variant, control and
 test grid variants

---
 components/inlinealert/dist/metadata.json      |  3 ++-
 components/inlinealert/index.css               |  3 +++
 .../inlinealert/stories/inlinealert.stories.js | 12 ++++++++++++
 .../inlinealert/stories/inlinealert.test.js    | 18 ++++++++++++++++--
 components/inlinealert/stories/template.js     | 14 +++++++++++++-
 5 files changed, 46 insertions(+), 4 deletions(-)

diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json
index 536e34f53d2..aa899056904 100644
--- a/components/inlinealert/dist/metadata.json
+++ b/components/inlinealert/dist/metadata.json
@@ -169,7 +169,8 @@
   ],
   "passthroughs": [
     "--mod-button-border-color-default",
-    "--mod-button-content-color-default"
+    "--mod-button-content-color-default",
+    "--mod-link-text-color"
   ],
   "high-contrast": [
     "--highcontrast-inlinealert-background-color",
diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css
index 8b6ee494f7e..c9f70c9899a 100644
--- a/components/inlinealert/index.css
+++ b/components/inlinealert/index.css
@@ -69,6 +69,9 @@
 	--spectrum-inlinealert-bold-background-color-notice: var(--spectrum-notice-background-color-default);
 	--spectrum-inlinealert-bold-background-color-negative: var(--spectrum-negative-background-color-default);
 	--spectrum-inlinealert-bold-background-color-neutral: var(--spectrum-neutral-background-color-default);
+
+	/* Link */
+	--mod-link-text-color: var(--highcontrast-inlinealert-content-color, var(--mod-inlinealert-content-color, var(--spectrum-inlinealert-content-color)));
 }
 
 .spectrum-InLineAlert {
diff --git a/components/inlinealert/stories/inlinealert.stories.js b/components/inlinealert/stories/inlinealert.stories.js
index 9ba37590725..a0cdb51b672 100644
--- a/components/inlinealert/stories/inlinealert.stories.js
+++ b/components/inlinealert/stories/inlinealert.stories.js
@@ -69,6 +69,17 @@ export default {
 				category: "Advanced",
 			},
 			control: "boolean",
+			if: { arg: "hasLink", truthy: false },
+		},
+		hasLink: {
+			name: "Link",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Advanced",
+			},
+			control: "boolean",
+			if: { arg: "isClosable", truthy: false },
 		},
 	},
 	args: {
@@ -79,6 +90,7 @@ export default {
 		isSubtle: false,
 		isBold: false,
 		isClosable: false,
+		hasLink: false,
 	},
 	parameters: {
 		design: {
diff --git a/components/inlinealert/stories/inlinealert.test.js b/components/inlinealert/stories/inlinealert.test.js
index 8f3845c6c47..57518b15361 100644
--- a/components/inlinealert/stories/inlinealert.test.js
+++ b/components/inlinealert/stories/inlinealert.test.js
@@ -22,6 +22,10 @@ export const InlineAlertGroup = Variants({
 			testHeading: "Closable",
 			isClosable: true,
 		},
+		{
+			testHeading: "Link",
+			isClosable: true,
+		},
 		{
 			testHeading: "Subtle",
 			isSubtle: true,
@@ -31,14 +35,24 @@ export const InlineAlertGroup = Variants({
 			isBold: true,
 		},
 		{
-			testHeading: "Subtle",
+			testHeading: "Subtle + closable",
 			isSubtle: true,
 			isClosable: true,
 		},
 		{
-			testHeading: "Bold",
+			testHeading: "Bold + closable",
 			isBold: true,
 			isClosable: true,
 		},
+		{
+			testHeading: "Subtle + link",
+			isSubtle: true,
+			hasLink: true,
+		},
+		{
+			testHeading: "Bold + link",
+			isBold: true,
+			hasLink: true,
+		},
 	],
 });
diff --git a/components/inlinealert/stories/template.js b/components/inlinealert/stories/template.js
index fb570ed3fcb..791b835fb57 100644
--- a/components/inlinealert/stories/template.js
+++ b/components/inlinealert/stories/template.js
@@ -1,5 +1,6 @@
 import { Template as Button } from "@spectrum-css/button/stories/template.js";
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
+import { Template as Link } from "@spectrum-css/link/stories/template.js";
 import { html, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
@@ -16,6 +17,7 @@ export const Template = ({
 	isSubtle = false,
 	isBold = false,
 	isClosable = false,
+	hasLink = false,
 } = {}, context = {}) => {
 	let iconName;
 	switch (variant) {
@@ -44,7 +46,7 @@ export const Template = ({
 				customClasses: [`${rootClass}-icon`],
 			}, context) : nothing;
 
-	const closableMarkup = isClosable ? html`
+	const closableMarkup = (isClosable && !hasLink) ? html`
 		<div class="spectrum-InLineAlert-footer">
 			${Button({
 				treatment: "outline",
@@ -56,6 +58,15 @@ export const Template = ({
 		</div>
 	` : nothing;
 
+	const linkMarkup = (hasLink && !isClosable) ? html`
+		<div class="spectrum-InLineAlert-footer">
+			${Link({
+				url: "#",
+				text: "Link",
+			})}
+		</div>
+	` : nothing;
+
 	return html`
 		<div
 			class=${classMap({
@@ -74,6 +85,7 @@ export const Template = ({
 			</div>
 			<div class="${rootClass}-content">${text}</div>
 			${closableMarkup}
+			${linkMarkup}
 		</div>
 	`;
 };

From 90e6089e25813897a1e114f4e48bb52bf51bf201 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Mon, 21 Apr 2025 09:46:09 -0700
Subject: [PATCH 09/23] chore(in-line-alert): add style variants to docs view

---
 .../stories/inlinealert.stories.js            | 25 ++++++++++++++-----
 components/inlinealert/stories/template.js    | 24 ++++++++++++++++++
 2 files changed, 43 insertions(+), 6 deletions(-)

diff --git a/components/inlinealert/stories/inlinealert.stories.js b/components/inlinealert/stories/inlinealert.stories.js
index a0cdb51b672..cc85a03d34d 100644
--- a/components/inlinealert/stories/inlinealert.stories.js
+++ b/components/inlinealert/stories/inlinealert.stories.js
@@ -2,7 +2,7 @@ import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import metadata from "../dist/metadata.json";
 import packageJson from "../package.json";
 import { InlineAlertGroup } from "./inlinealert.test.js";
-import { Template } from "./template.js";
+import { AlertsWithStyleOptions } from "./template.js";
 
 /**
  * In-line alerts display a non-modal message associated with objects in a view. These are often used in form validation, providing a place to aggregate feedback related to multiple fields.
@@ -112,7 +112,7 @@ Default.args = {};
 /**
  * The informative variant uses the informative semantic color (blue) and has an "information" icon to help those with color vision deficiency discern the message tone. This should be used when the message needs to call extra attention, as compared to the neutral variant.
  */
-export const Informative = Template.bind({});
+export const Informative = AlertsWithStyleOptions.bind({});
 Informative.args = {
 	variant: "info",
 	headerText: "Info in-line alert header",
@@ -125,7 +125,7 @@ Informative.tags = ["!dev"];
 /**
  * A negative variant uses the negative semantic color (red) and has an "alert" icon to help those with color vision deficiency to discern the message tone. Negative variants are used to show an error or failure, or to convey something that needs to be immediately acknowledged or addressed.
  */
-export const Negative = Template.bind({});
+export const Negative = AlertsWithStyleOptions.bind({});
 Negative.args = {
 	variant: "negative",
 	headerText: "Negative in-line alert header",
@@ -138,7 +138,7 @@ Negative.tags = ["!dev"];
 /**
  * The positive variant uses the positive semantic color (green) and has a "checkmark" icon to help those with color vision deficiency discern the message tone. This variant should be used to inform someone of a successful function or result of an action they took.
  */
-export const Positive = Template.bind({});
+export const Positive = AlertsWithStyleOptions.bind({});
 Positive.args = {
 	variant: "positive",
 	headerText: "Positive in-line alert header",
@@ -151,7 +151,7 @@ Positive.tags = ["!dev"];
 /**
  * To warn about a situation that may need to be addressed soon, use the notice variant. It utilizes the notice semantic color (orange) and has an "alert" icon to help those with color vision deficiency to discern the message tone.
  */
-export const Notice = Template.bind({});
+export const Notice = AlertsWithStyleOptions.bind({});
 Notice.args = {
 	variant: "notice",
 	headerText: "Notice in-line alert header",
@@ -164,7 +164,7 @@ Notice.tags = ["!dev"];
 /**
  * An in-line alert with a close button in the footer. Combine this strategy with any variant.
  */
-export const Closable = Template.bind({});
+export const Closable = AlertsWithStyleOptions.bind({});
 Closable.args = {
 	variant: "negative",
 	isClosable: true,
@@ -175,6 +175,19 @@ Closable.parameters = {
 };
 Closable.tags = ["!dev"];
 
+/**
+ * An in-line alert with a link in the footer. Combine this strategy with any variant.
+ */
+export const Link = AlertsWithStyleOptions.bind({});
+Link.args = {
+	hasLink: true,
+	headerText: "Click the link",
+};
+Link.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+Link.tags = ["!dev"];
+
 // ********* VRT ONLY ********* //
 export const WithForcedColors = InlineAlertGroup.bind({});
 WithForcedColors.tags = ["!autodocs", "!dev"];
diff --git a/components/inlinealert/stories/template.js b/components/inlinealert/stories/template.js
index 791b835fb57..74d28e1627a 100644
--- a/components/inlinealert/stories/template.js
+++ b/components/inlinealert/stories/template.js
@@ -4,6 +4,7 @@ import { Template as Link } from "@spectrum-css/link/stories/template.js";
 import { html, nothing } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { styleMap } from "lit/directives/style-map.js";
+import { Container } from "@spectrum-css/preview/decorators";
 
 import "../index.css";
 
@@ -89,3 +90,26 @@ export const Template = ({
 		</div>
 	`;
 };
+
+export const AlertsWithStyleOptions = ({
+	...args
+}, context = {}) => Container({
+	withBorder: false,
+	direction: "row",
+	wrapperStyles: {
+		columnGap: "12px",
+	},
+	content: html`
+		${Template({
+			...args,
+		}, context)}
+		${Template({
+			...args,
+			isSubtle: true,
+		}, context)}
+		${Template({
+			...args,
+			isBold: true,
+		}, context)}
+	`,
+}, context);

From 839b9b7bc2b33e17c73cfbf52cc38fc51e071959 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Mon, 28 Apr 2025 17:11:03 -0700
Subject: [PATCH 10/23] chore(in-line-alert): refactor and significantly reduce
 styles

---
 .changeset/big-jars-pump.md                   |  30 +--
 components/inlinealert/dist/metadata.json     |  83 ++-----
 components/inlinealert/index.css              | 208 +++++-------------
 .../stories/inlinealert.stories.js            |  29 +--
 .../inlinealert/stories/inlinealert.test.js   |  30 ++-
 components/inlinealert/stories/template.js    |  29 ++-
 6 files changed, 114 insertions(+), 295 deletions(-)

diff --git a/.changeset/big-jars-pump.md b/.changeset/big-jars-pump.md
index d74f3336cfa..ec9bc6a0d5e 100644
--- a/.changeset/big-jars-pump.md
+++ b/.changeset/big-jars-pump.md
@@ -6,7 +6,7 @@
 
 This migrates the `in-line alert` component to S2. Custom properties have been remapped and added per the design specification.
 
-Subtle and bold styles have been added for each badge variant.
+Subtle and bold treatments have been added for each badge variant.
 
 ##### New mods
 
@@ -14,16 +14,6 @@ Subtle and bold styles have been added for each badge variant.
 `--mod-inlinealert-min-spacing-header-to-icon`
 `--mod-inlinealert-spacing-content-link-button`
 `--mod-inlinealert-spacing-header-content`
-`--mod-inlinealert-background-color-info-subtle`
-`--mod-inlinealert-bold-background-color-informative`
-`--mod-inlinealert-bold-background-color-negative`
-`--mod-inlinealert-bold-background-color-neutral`
-`--mod-inlinealert-bold-background-color-notice`
-`--mod-inlinealert-bold-background-color-positive`
-`--mod-inlinealert-subtle-background-color-negative`
-`--mod-inlinealert-subtle-background-color-neutral`
-`--mod-inlinealert-subtle-background-color-notice`
-`--mod-inlinealert-subtle-background-color-positive`
 
 ##### Removed mods
 
@@ -32,27 +22,9 @@ Subtle and bold styles have been added for each badge variant.
 
 ##### New custom properties
 
-`--spectrum-inlinealert-bold-background-color-informative`
-`--spectrum-inlinealert-bold-background-color-negative`
-`--spectrum-inlinealert-bold-background-color-neutral`
-`--spectrum-inlinealert-bold-background-color-notice`
-`--spectrum-inlinealert-bold-background-color-positive`
-`--spectrum-inlinealert-border-and-icon-color-neutral`
-`--spectrum-inlinealert-color-black`
-`--spectrum-inlinealert-color-white`
 `--spectrum-inlinealert-min-spacing-header-to-icon`
 `--spectrum-inlinealert-spacing-content-link-button`
 `--spectrum-inlinealert-spacing-header-content`
-`--spectrum-inlinealert-subtle-background-color-informative`
-`--spectrum-inlinealert-subtle-background-color-negative`
-`--spectrum-inlinealert-subtle-background-color-neutral`
-`--spectrum-inlinealert-subtle-background-color-notice`
-`--spectrum-inlinealert-subtle-background-color-positive`
-`--spectrum-inlinealert-subtle-color-informative`
-`--spectrum-inlinealert-subtle-color-negative`
-`--spectrum-inlinealert-subtle-color-neutral`
-`--spectrum-inlinealert-subtle-color-notice`
-`--spectrum-inlinealert-subtle-color-positive`
 
 ##### Removed custom properties
 
diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json
index aa899056904..30a843493d9 100644
--- a/components/inlinealert/dist/metadata.json
+++ b/components/inlinealert/dist/metadata.json
@@ -3,57 +3,32 @@
   "selectors": [
     ".spectrum-InLineAlert",
     ".spectrum-InLineAlert--info",
-    ".spectrum-InLineAlert--info .spectrum-InLineAlert-icon",
-    ".spectrum-InLineAlert--info--bold",
-    ".spectrum-InLineAlert--info--bold .spectrum-InLineAlert-icon",
-    ".spectrum-InLineAlert--info--bold:not(.spectrum-InLineAlert--info--subtle)",
-    ".spectrum-InLineAlert--info--bold:not(.spectrum-InLineAlert--info--subtle) .spectrum-InLineAlert-icon",
-    ".spectrum-InLineAlert--info--subtle:not(.spectrum-InLineAlert--info--bold)",
-    ".spectrum-InLineAlert--info--subtle:not(.spectrum-InLineAlert--info--bold) .spectrum-InLineAlert-icon",
+    ".spectrum-InLineAlert--info.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle)",
+    ".spectrum-InLineAlert--info.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold)",
     ".spectrum-InLineAlert--negative",
-    ".spectrum-InLineAlert--negative .spectrum-InLineAlert-icon",
-    ".spectrum-InLineAlert--negative--bold",
-    ".spectrum-InLineAlert--negative--bold .spectrum-InLineAlert-icon",
-    ".spectrum-InLineAlert--negative--subtle",
-    ".spectrum-InLineAlert--negative--subtle .spectrum-InLineAlert-icon",
+    ".spectrum-InLineAlert--negative.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle)",
+    ".spectrum-InLineAlert--negative.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold)",
     ".spectrum-InLineAlert--neutral",
-    ".spectrum-InLineAlert--neutral .spectrum-InLineAlert-icon",
-    ".spectrum-InLineAlert--neutral--bold",
-    ".spectrum-InLineAlert--neutral--bold .spectrum-InLineAlert-icon",
-    ".spectrum-InLineAlert--neutral--subtle",
-    ".spectrum-InLineAlert--neutral--subtle .spectrum-InLineAlert-icon",
+    ".spectrum-InLineAlert--neutral.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle)",
+    ".spectrum-InLineAlert--neutral.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold)",
     ".spectrum-InLineAlert--notice",
-    ".spectrum-InLineAlert--notice .spectrum-InLineAlert-icon",
-    ".spectrum-InLineAlert--notice--bold",
-    ".spectrum-InLineAlert--notice--bold .spectrum-InLineAlert-icon",
-    ".spectrum-InLineAlert--notice--subtle",
-    ".spectrum-InLineAlert--notice--subtle .spectrum-InLineAlert-icon",
+    ".spectrum-InLineAlert--notice.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle)",
+    ".spectrum-InLineAlert--notice.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold)",
     ".spectrum-InLineAlert--positive",
-    ".spectrum-InLineAlert--positive .spectrum-InLineAlert-icon",
-    ".spectrum-InLineAlert--positive--bold",
-    ".spectrum-InLineAlert--positive--bold .spectrum-InLineAlert-icon",
-    ".spectrum-InLineAlert--positive--subtle",
-    ".spectrum-InLineAlert--positive--subtle .spectrum-InLineAlert-icon",
+    ".spectrum-InLineAlert--positive.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle)",
+    ".spectrum-InLineAlert--positive.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold)",
     ".spectrum-InLineAlert-content",
     ".spectrum-InLineAlert-footer",
     ".spectrum-InLineAlert-footer:empty",
     ".spectrum-InLineAlert-header",
-    ".spectrum-InLineAlert-icon"
+    ".spectrum-InLineAlert-icon",
+    ".spectrum-InLineAlert.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle)",
+    ".spectrum-InLineAlert.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle, .spectrum-InLineAlert--notice)",
+    ".spectrum-InLineAlert.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold)"
   ],
   "modifiers": [
     "--mod-inlinealert-background-color",
-    "--mod-inlinealert-background-color-info-subtle",
-    "--mod-inlinealert-bold-background-color-informative",
-    "--mod-inlinealert-bold-background-color-negative",
-    "--mod-inlinealert-bold-background-color-neutral",
-    "--mod-inlinealert-bold-background-color-notice",
-    "--mod-inlinealert-bold-background-color-positive",
     "--mod-inlinealert-border-and-icon-color",
-    "--mod-inlinealert-border-and-icon-color-info",
-    "--mod-inlinealert-border-and-icon-color-negative",
-    "--mod-inlinealert-border-and-icon-color-neutral",
-    "--mod-inlinealert-border-and-icon-color-notice",
-    "--mod-inlinealert-border-and-icon-color-positive",
     "--mod-inlinealert-border-radius",
     "--mod-inlinealert-border-width",
     "--mod-inlinealert-content-color",
@@ -74,30 +49,14 @@
     "--mod-inlinealert-min-spacing-header-to-icon",
     "--mod-inlinealert-spacing-content-link-button",
     "--mod-inlinealert-spacing-edge-to-text",
-    "--mod-inlinealert-spacing-header-content",
-    "--mod-inlinealert-subtle-background-color-negative",
-    "--mod-inlinealert-subtle-background-color-neutral",
-    "--mod-inlinealert-subtle-background-color-notice",
-    "--mod-inlinealert-subtle-background-color-positive"
+    "--mod-inlinealert-spacing-header-content"
   ],
   "component": [
     "--spectrum-in-line-alert-minimum-width",
     "--spectrum-inlinealert-background-color",
-    "--spectrum-inlinealert-bold-background-color-informative",
-    "--spectrum-inlinealert-bold-background-color-negative",
-    "--spectrum-inlinealert-bold-background-color-neutral",
-    "--spectrum-inlinealert-bold-background-color-notice",
-    "--spectrum-inlinealert-bold-background-color-positive",
     "--spectrum-inlinealert-border-and-icon-color",
-    "--spectrum-inlinealert-border-and-icon-color-info",
-    "--spectrum-inlinealert-border-and-icon-color-negative",
-    "--spectrum-inlinealert-border-and-icon-color-neutral",
-    "--spectrum-inlinealert-border-and-icon-color-notice",
-    "--spectrum-inlinealert-border-and-icon-color-positive",
     "--spectrum-inlinealert-border-radius",
     "--spectrum-inlinealert-border-width",
-    "--spectrum-inlinealert-color-black",
-    "--spectrum-inlinealert-color-white",
     "--spectrum-inlinealert-content-color",
     "--spectrum-inlinealert-content-font-family",
     "--spectrum-inlinealert-content-font-size",
@@ -116,17 +75,7 @@
     "--spectrum-inlinealert-min-spacing-header-to-icon",
     "--spectrum-inlinealert-spacing-content-link-button",
     "--spectrum-inlinealert-spacing-edge-to-text",
-    "--spectrum-inlinealert-spacing-header-content",
-    "--spectrum-inlinealert-subtle-background-color-informative",
-    "--spectrum-inlinealert-subtle-background-color-negative",
-    "--spectrum-inlinealert-subtle-background-color-neutral",
-    "--spectrum-inlinealert-subtle-background-color-notice",
-    "--spectrum-inlinealert-subtle-background-color-positive",
-    "--spectrum-inlinealert-subtle-color-informative",
-    "--spectrum-inlinealert-subtle-color-negative",
-    "--spectrum-inlinealert-subtle-color-neutral",
-    "--spectrum-inlinealert-subtle-color-notice",
-    "--spectrum-inlinealert-subtle-color-positive"
+    "--spectrum-inlinealert-spacing-header-content"
   ],
   "global": [
     "--spectrum-background-layer-2-color",
diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css
index c9f70c9899a..7a02195f870 100644
--- a/components/inlinealert/index.css
+++ b/components/inlinealert/index.css
@@ -43,32 +43,6 @@
 	--spectrum-inlinealert-border-and-icon-color: var(--spectrum-neutral-visual-color);
 	--spectrum-inlinealert-header-color: var(--spectrum-heading-color);
 	--spectrum-inlinealert-content-color: var(--spectrum-body-color);
-	--spectrum-inlinealert-border-and-icon-color-info: var(--spectrum-informative-visual-color);
-	--spectrum-inlinealert-border-and-icon-color-positive: var(--spectrum-positive-visual-color);
-	--spectrum-inlinealert-border-and-icon-color-notice: var(--spectrum-notice-visual-color);
-	--spectrum-inlinealert-border-and-icon-color-negative: var(--spectrum-negative-visual-color);
-	--spectrum-inlinealert-border-and-icon-color-neutral: var(--spectrum-neutral-visual-color);
-	--spectrum-inlinealert-color-white: var(--spectrum-white);
-	--spectrum-inlinealert-color-black: var(--spectrum-black);
-
-	/* Subtle fill */
-	--spectrum-inlinealert-subtle-background-color-informative: var(--spectrum-informative-subtle-background-color-default);
-	--spectrum-inlinealert-subtle-color-informative: var(--spectrum-informative-visual-color);
-	--spectrum-inlinealert-subtle-background-color-positive: var(--spectrum-positive-subtle-background-color-default);
-	--spectrum-inlinealert-subtle-color-positive: var(--spectrum-positive-visual-color);
-	--spectrum-inlinealert-subtle-background-color-notice: var(--spectrum-notice-subtle-background-color-default);
-	--spectrum-inlinealert-subtle-color-notice: var(--spectrum-notice-visual-color);
-	--spectrum-inlinealert-subtle-background-color-negative: var(--spectrum-negative-subtle-background-color-default);
-	--spectrum-inlinealert-subtle-color-negative: var(--spectrum-negative-visual-color);
-	--spectrum-inlinealert-subtle-background-color-neutral: var(--spectrum-neutral-subtle-background-color-default);
-	--spectrum-inlinealert-subtle-color-neutral: var(--spectrum-neutral-visual-color);
-
-	/* Bold fill */
-	--spectrum-inlinealert-bold-background-color-informative: var(--spectrum-informative-background-color-default);
-	--spectrum-inlinealert-bold-background-color-positive: var(--spectrum-positive-background-color-default);
-	--spectrum-inlinealert-bold-background-color-notice: var(--spectrum-notice-background-color-default);
-	--spectrum-inlinealert-bold-background-color-negative: var(--spectrum-negative-background-color-default);
-	--spectrum-inlinealert-bold-background-color-neutral: var(--spectrum-neutral-background-color-default);
 
 	/* Link */
 	--mod-link-text-color: var(--highcontrast-inlinealert-content-color, var(--mod-inlinealert-content-color, var(--spectrum-inlinealert-content-color)));
@@ -91,11 +65,30 @@
 
 	background-color: var(--highcontrast-inlinealert-background-color, var(--mod-inlinealert-background-color, var(--spectrum-inlinealert-background-color)));
 	border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color)));
+
+	&.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold) {
+		--spectrum-inlinealert-border-width: 0px;
+	}
+
+	&.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle) {
+		--spectrum-inlinealert-border-width: 0px;
+	}
+
+	&.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle, .spectrum-InLineAlert--notice) {
+		--spectrum-inlinealert-header-color: var(--spectrum-white);
+		--spectrum-inlinealert-content-color: var(--spectrum-white);
+		--spectrum-inlinealert-border-and-icon-color: var(--spectrum-white);
+
+		--mod-button-content-color-default: var(--spectrum-white);
+		--mod-button-border-color-default: var(--spectrum-white);
+	}
 }
 
 .spectrum-InLineAlert-icon {
 	inline-size: var(--mod-inlinealert-icon-size, var(--spectrum-inlinealert-icon-size));
 	block-size: var(--mod-inlinealert-icon-size, var(--spectrum-inlinealert-icon-size));
+	flex-shrink: 0;
+	color: var(--highcontrast-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color));
 }
 
 .spectrum-InLineAlert-header {
@@ -147,169 +140,68 @@
 }
 
 .spectrum-InLineAlert--info {
-	border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-info, var(--spectrum-inlinealert-border-and-icon-color-info)));
-
-	.spectrum-InLineAlert-icon {
-		color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-info, var(--spectrum-inlinealert-border-and-icon-color-info)));
-	}
-}
-
-.spectrum-InLineAlert--info--subtle:not(.spectrum-InLineAlert--info--bold) {
-	--mod-inlinealert-border-width: 0;
-	--mod-inlinealert-background-color: var(--mod-inlinealert-background-color-info-subtle, var(--spectrum-inlinealert-subtle-background-color-informative));
-	--mod-inlinealert-border-and-icon-color-info: var(--spectrum-inlinealert-subtle-color-informative);
+	--spectrum-inlinealert-border-and-icon-color: var(--spectrum-informative-visual-color);
 
-	.spectrum-InLineAlert-icon {
-		--mod-inlinealert-border-and-icon-color-info: var(--spectrum-inlinealert-subtle-color-informative);
+	&.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold) {
+		--spectrum-inlinealert-background-color: var(--spectrum-informative-subtle-background-color-default);
+		--spectrum-inlinealert-border-and-icon-color: var(--spectrum-informative-visual-color);
 	}
-}
 
-.spectrum-InLineAlert--info--bold:not(.spectrum-InLineAlert--info--subtle) {
-	--mod-inlinealert-border-width: 0;
-	--mod-inlinealert-background-color: var(--mod-inlinealert-bold-background-color-informative, var(--spectrum-inlinealert-bold-background-color-informative));
-	--mod-inlinealert-header-color: var(--spectrum-inlinealert-color-white);
-	--mod-inlinealert-content-color: var(--spectrum-inlinealert-color-white);
-	--mod-inlinealert-border-and-icon-color-info: var(--spectrum-inlinealert-color-white);
-
-	--mod-button-content-color-default: var(--spectrum-inlinealert-color-white);
-	--mod-button-border-color-default: var(--spectrum-inlinealert-color-white);
-
-	.spectrum-InLineAlert-icon {
-		--mod-inlinealert-border-and-icon-color-info: var(--spectrum-inlinealert-color-white);
+	&.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle) {
+		--spectrum-inlinealert-background-color: var(--spectrum-informative-background-color-default);
 	}
 }
 
 .spectrum-InLineAlert--notice {
-	border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-notice, var(--spectrum-inlinealert-border-and-icon-color-notice)));
-
-	.spectrum-InLineAlert-icon {
-		color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-notice, var(--spectrum-inlinealert-border-and-icon-color-notice)));
-	}
-}
-
-.spectrum-InLineAlert--notice--subtle {
-	--mod-inlinealert-border-width: 0;
-	--mod-inlinealert-background-color: var(--mod-inlinealert-subtle-background-color-notice, var(--spectrum-inlinealert-subtle-background-color-notice));
+	--spectrum-inlinealert-border-and-icon-color: var(--spectrum-notice-visual-color);
 
-	.spectrum-InLineAlert-icon {
-		--mod-inlinealert-border-and-icon-color-notice: var(--spectrum-inlinealert-subtle-color-notice);
+	&.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold) {
+		--spectrum-inlinealert-background-color: var(--spectrum-notice-subtle-background-color-default);
+		--spectrum-inlinealert-border-and-icon-color: var(--spectrum-notice-visual-color);
 	}
-}
-
-.spectrum-InLineAlert--notice--bold {
-	--mod-inlinealert-border-width: 0;
-	--mod-inlinealert-background-color: var(--mod-inlinealert-bold-background-color-notice, var(--spectrum-inlinealert-bold-background-color-notice));
 
-	.spectrum-InLineAlert-icon {
-		--mod-inlinealert-border-and-icon-color-notice: var(--spectrum-inlinealert-color-black);
+	&.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle) {
+		--spectrum-inlinealert-background-color: var(--spectrum-notice-background-color-default);
+		--spectrum-inlinealert-border-and-icon-color: var(--spectrum-black);
 	}
 }
 
 .spectrum-InLineAlert--positive {
-	border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-positive, var(--spectrum-inlinealert-border-and-icon-color-positive)));
+	--spectrum-inlinealert-border-and-icon-color: var(--spectrum-positive-visual-color);
 
-	.spectrum-InLineAlert-icon {
-		color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-positive, var(--spectrum-inlinealert-border-and-icon-color-positive)));
+	&.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold) {
+		--spectrum-inlinealert-background-color: var(--spectrum-positive-subtle-background-color-default);
+		--spectrum-inlinealert-border-and-icon-color: var(--spectrum-positive-visual-color);
 	}
-}
 
-.spectrum-InLineAlert--positive--subtle {
-	--mod-inlinealert-border-width: 0;
-	--mod-inlinealert-background-color: var(--mod-inlinealert-subtle-background-color-positive, var(--spectrum-inlinealert-subtle-background-color-positive));
-
-	.spectrum-InLineAlert-icon {
-		--mod-inlinealert-border-and-icon-color-positive: var(--spectrum-inlinealert-subtle-color-positive);
-	}
-}
-
-.spectrum-InLineAlert--positive--bold {
-	--mod-inlinealert-border-width: 0;
-	--mod-inlinealert-background-color: var(--mod-inlinealert-bold-background-color-positive, var(--spectrum-inlinealert-bold-background-color-positive));
-	--mod-inlinealert-header-color: var(--spectrum-inlinealert-color-white);
-	--mod-inlinealert-content-color: var(--spectrum-inlinealert-color-white);
-
-	--mod-button-content-color-default: var(--spectrum-inlinealert-color-white);
-	--mod-button-border-color-default: var(--spectrum-inlinealert-color-white);
-
-	.spectrum-InLineAlert-icon {
-		--mod-inlinealert-border-and-icon-color-positive: var(--spectrum-inlinealert-color-white);
-	}
-}
-
-.spectrum-InLineAlert--info--bold {
-	--mod-inlinealert-border-width: 0;
-	--mod-inlinealert-background-color: var(--mod-inlinealert-bold-background-color-informative, var(--spectrum-inlinealert-bold-background-color-informative));
-	--mod-inlinealert-header-color: var(--spectrum-inlinealert-color-white);
-	--mod-inlinealert-content-color: var(--spectrum-inlinealert-color-white);
-
-	--mod-button-content-color-default: var(--spectrum-inlinealert-color-white);
-	--mod-button-border-color-default: var(--spectrum-inlinealert-color-white);
-
-	.spectrum-InLineAlert-icon {
-		--mod-inlinealert-border-and-icon-color-positive: var(--spectrum-inlinealert-color-white);
+	&.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle) {
+		--spectrum-inlinealert-background-color: var(--spectrum-positive-background-color-default);
 	}
 }
 
 .spectrum-InLineAlert--negative {
-	border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-negative, var(--spectrum-inlinealert-border-and-icon-color-negative)));
+	--spectrum-inlinealert-border-and-icon-color: var(--spectrum-negative-visual-color);
 
-	.spectrum-InLineAlert-icon {
-		color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-negative, var(--spectrum-inlinealert-border-and-icon-color-negative)));
+	&.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold) {
+		--spectrum-inlinealert-background-color: var(--spectrum-negative-subtle-background-color-default);
+		--spectrum-inlinealert-border-and-icon-color: var(--spectrum-negative-visual-color);
 	}
-}
 
-.spectrum-InLineAlert--negative--subtle {
-	--mod-inlinealert-border-width: 0;
-	--mod-inlinealert-background-color: var(--mod-inlinealert-subtle-background-color-negative, var(--spectrum-inlinealert-subtle-background-color-negative));
-	--mod-inlinealert-border-and-icon-color-negative: var(--spectrum-inlinealert-subtle-color-negative);
-
-	.spectrum-InLineAlert-icon {
-		--mod-inlinealert-border-and-icon-color-negative: var(--spectrum-inlinealert-subtle-color-negative);
-	}
-}
-
-.spectrum-InLineAlert--negative--bold {
-	--mod-inlinealert-border-width: 0;
-	--mod-inlinealert-background-color: var(--mod-inlinealert-bold-background-color-negative, var(--spectrum-inlinealert-bold-background-color-negative));
-	--mod-inlinealert-header-color: var(--spectrum-inlinealert-color-white);
-	--mod-inlinealert-content-color: var(--spectrum-inlinealert-color-white);
-
-	--mod-button-content-color-default: var(--spectrum-inlinealert-color-white);
-	--mod-button-border-color-default: var(--spectrum-inlinealert-color-white);
-
-	.spectrum-InLineAlert-icon {
-		--mod-inlinealert-border-and-icon-color-negative: var(--spectrum-inlinealert-color-white);
+	&.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle) {
+		--spectrum-inlinealert-background-color: var(--spectrum-negative-background-color-default);
 	}
 }
 
 .spectrum-InLineAlert--neutral {
-	border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-neutral, var(--spectrum-inlinealert-border-and-icon-color-neutral)));
-
-	.spectrum-InLineAlert-icon {
-		color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color-neutral, var(--spectrum-inlinealert-border-and-icon-color-neutral)));
-	}
-}
-
-.spectrum-InLineAlert--neutral--subtle {
-	--mod-inlinealert-border-width: 0;
-	--mod-inlinealert-background-color: var(--mod-inlinealert-subtle-background-color-neutral, var(--spectrum-inlinealert-subtle-background-color-neutral));
+	--spectrum-inlinealert-border-and-icon-color: var(--spectrum-neutral-visual-color);
 
-	.spectrum-InLineAlert-icon {
-		--mod-inlinealert-border-and-icon-color-neutral: var(--spectrum-inlinealert-subtle-color-neutral);
+	&.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold) {
+		--spectrum-inlinealert-background-color: var(--spectrum-neutral-subtle-background-color-default);
+		--spectrum-inlinealert-border-and-icon-color: var(--spectrum-neutral-visual-color);
 	}
-}
-
-.spectrum-InLineAlert--neutral--bold {
-	--mod-inlinealert-border-width: 0;
-	--mod-inlinealert-background-color: var(--mod-inlinealert-bold-background-color-neutral, var(--spectrum-inlinealert-bold-background-color-neutral));
-	--mod-inlinealert-header-color: var(--spectrum-inlinealert-color-white);
-	--mod-inlinealert-content-color: var(--spectrum-inlinealert-color-white);
-
-	--mod-button-content-color-default: var(--spectrum-inlinealert-color-white);
-	--mod-button-border-color-default: var(--spectrum-inlinealert-color-white);
 
-	.spectrum-InLineAlert-icon {
-		--mod-inlinealert-border-and-icon-color-neutral: var(--spectrum-inlinealert-color-white);
+	&.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle) {
+		--spectrum-inlinealert-background-color: var(--spectrum-neutral-background-color-default);
 	}
 }
 
diff --git a/components/inlinealert/stories/inlinealert.stories.js b/components/inlinealert/stories/inlinealert.stories.js
index cc85a03d34d..468aaea4737 100644
--- a/components/inlinealert/stories/inlinealert.stories.js
+++ b/components/inlinealert/stories/inlinealert.stories.js
@@ -41,45 +41,35 @@ export default {
 			options: ["neutral", "info", "positive", "notice", "negative"],
 			control: "select",
 		},
-		isSubtle: {
-			name: "Subtle",
-			type: { name: "boolean" },
-			table: {
-				type: { summary: "boolean" },
-				category: "Component",
-			},
-			control: "boolean",
-			if: { arg: "isBold", truthy: false },
-		},
-		isBold: {
-			name: "Bold",
-			type: { name: "boolean" },
+		treatment: {
+			name: "Treatment",
+			type: { name: "string" },
 			table: {
-				type: { summary: "boolean" },
+				type: { summary: "string" },
 				category: "Component",
 			},
-			control: "boolean",
-			if: { arg: "isSubtle", truthy: false },
+			options: ["default", "subtle", "bold"],
+			control: "select",
 		},
 		isClosable: {
 			name: "Closable",
+			description: "An optional close button rendered below the alert text and link (if enabled).",
 			type: { name: "boolean" },
 			table: {
 				type: { summary: "boolean" },
 				category: "Advanced",
 			},
 			control: "boolean",
-			if: { arg: "hasLink", truthy: false },
 		},
 		hasLink: {
 			name: "Link",
+			description: "An optional link rendered below the alert text.",
 			type: { name: "boolean" },
 			table: {
 				type: { summary: "boolean" },
 				category: "Advanced",
 			},
 			control: "boolean",
-			if: { arg: "isClosable", truthy: false },
 		},
 	},
 	args: {
@@ -87,8 +77,7 @@ export default {
 		headerText: "In-line alert header",
 		text: "This is an alert.",
 		variant: "neutral",
-		isSubtle: false,
-		isBold: false,
+		treatment: "default",
 		isClosable: false,
 		hasLink: false,
 	},
diff --git a/components/inlinealert/stories/inlinealert.test.js b/components/inlinealert/stories/inlinealert.test.js
index 57518b15361..5b0df38a6f9 100644
--- a/components/inlinealert/stories/inlinealert.test.js
+++ b/components/inlinealert/stories/inlinealert.test.js
@@ -12,6 +12,7 @@ export const InlineAlertGroup = Variants({
 		})),
 		{
 			testHeading: "Truncation",
+			variant: "info",
 			headerText: "In-line alert header announcing something very long and in-line",
 			text: "This is a very urgent alert with a lot of context, so the text has to wrap.",
 			customStyles: {"max-width": "400px"}
@@ -24,34 +25,51 @@ export const InlineAlertGroup = Variants({
 		},
 		{
 			testHeading: "Link",
+			hasLink: true,
+		},
+		{
+			testHeading: "Link + closable",
 			isClosable: true,
+			hasLink: true,
 		},
 		{
 			testHeading: "Subtle",
-			isSubtle: true,
+			treatment: "subtle",
 		},
 		{
 			testHeading: "Bold",
-			isBold: true,
+			treatment: "bold",
 		},
 		{
 			testHeading: "Subtle + closable",
-			isSubtle: true,
+			treatment: "subtle",
+			isClosable: true,
+		},
+		{
+			testHeading: "Subtle + link + closable",
+			treatment: "subtle",
 			isClosable: true,
+			hasLink: true,
 		},
 		{
 			testHeading: "Bold + closable",
-			isBold: true,
+			treatment: "bold",
 			isClosable: true,
 		},
 		{
 			testHeading: "Subtle + link",
-			isSubtle: true,
+			treatment: "subtle",
 			hasLink: true,
 		},
 		{
 			testHeading: "Bold + link",
-			isBold: true,
+			treatment: "bold",
+			hasLink: true,
+		},
+		{
+			testHeading: "Bold + link + closable",
+			treatment: "bold",
+			isClosable: true,
 			hasLink: true,
 		},
 	],
diff --git a/components/inlinealert/stories/template.js b/components/inlinealert/stories/template.js
index 74d28e1627a..54c3891111b 100644
--- a/components/inlinealert/stories/template.js
+++ b/components/inlinealert/stories/template.js
@@ -15,8 +15,7 @@ export const Template = ({
 	headerText,
 	text,
 	variant = "neutral",
-	isSubtle = false,
-	isBold = false,
+	treatment = "default",
 	isClosable = false,
 	hasLink = false,
 } = {}, context = {}) => {
@@ -47,7 +46,17 @@ export const Template = ({
 				customClasses: [`${rootClass}-icon`],
 			}, context) : nothing;
 
-	const closableMarkup = (isClosable && !hasLink) ? html`
+
+	const linkMarkup = hasLink ? html`
+		<div class="spectrum-InLineAlert-footer">
+			${Link({
+				url: "#",
+				text: "Link",
+			})}
+		</div>
+	` : nothing;
+
+	const closableMarkup = isClosable ? html`
 		<div class="spectrum-InLineAlert-footer">
 			${Button({
 				treatment: "outline",
@@ -59,22 +68,12 @@ export const Template = ({
 		</div>
 	` : nothing;
 
-	const linkMarkup = (hasLink && !isClosable) ? html`
-		<div class="spectrum-InLineAlert-footer">
-			${Link({
-				url: "#",
-				text: "Link",
-			})}
-		</div>
-	` : nothing;
-
 	return html`
 		<div
 			class=${classMap({
 				[rootClass]: true,
 				[`${rootClass}--${variant}`]: typeof variant !== "undefined",
-				[`${rootClass}--${variant}--subtle`]: typeof variant !== "undefined" && isSubtle,
-				[`${rootClass}--${variant}--bold`]: typeof variant !== "undefined" && isBold,
+				[`${rootClass}--${treatment}`]: treatment !== "default",
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			style=${styleMap(customStyles)}
@@ -85,8 +84,8 @@ export const Template = ({
 				${iconMarkup}
 			</div>
 			<div class="${rootClass}-content">${text}</div>
-			${closableMarkup}
 			${linkMarkup}
+			${closableMarkup}
 		</div>
 	`;
 };

From e71db2a09c6063a4bc80de88e2e40f8464bc2b8a Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Tue, 29 Apr 2025 09:42:50 -0700
Subject: [PATCH 11/23] chore(in-line-alert): update docs + customize treatment
 titles

---
 components/inlinealert/dist/metadata.json     |  3 ++
 components/inlinealert/index.css              | 16 +++++-
 .../stories/inlinealert.stories.js            | 51 +++++++++++++++----
 components/inlinealert/stories/template.js    | 17 ++++++-
 4 files changed, 72 insertions(+), 15 deletions(-)

diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json
index 30a843493d9..847e1d5e5b7 100644
--- a/components/inlinealert/dist/metadata.json
+++ b/components/inlinealert/dist/metadata.json
@@ -2,6 +2,9 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-InLineAlert",
+    ".spectrum-InLineAlert .spectrum-InLineAlert-content",
+    ".spectrum-InLineAlert .spectrum-InLineAlert-footer",
+    ".spectrum-InLineAlert .spectrum-InLineAlert-header",
     ".spectrum-InLineAlert--info",
     ".spectrum-InLineAlert--info.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle)",
     ".spectrum-InLineAlert--info.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold)",
diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css
index 7a02195f870..b290f1094ec 100644
--- a/components/inlinealert/index.css
+++ b/components/inlinealert/index.css
@@ -45,7 +45,7 @@
 	--spectrum-inlinealert-content-color: var(--spectrum-body-color);
 
 	/* Link */
-	--mod-link-text-color: var(--highcontrast-inlinealert-content-color, var(--mod-inlinealert-content-color, var(--spectrum-inlinealert-content-color)));
+	--mod-link-text-color: var(--mod-inlinealert-content-color, var(--spectrum-inlinealert-content-color));
 }
 
 .spectrum-InLineAlert {
@@ -207,9 +207,21 @@
 
 @media (forced-colors: active) {
 	.spectrum-InLineAlert {
-		--highcontrast-inlinealert-background-color: Background;
 		--highcontrast-inlinealert-header-color: CanvasText;
 		--highcontrast-inlinealert-content-color: CanvasText;
 		--highcontrast-inlinealert-border-and-icon-color: ButtonBorder;
+
+		--mod-button-content-color-default: CanvasText;
+
+		.spectrum-InLineAlert-header,
+		.spectrum-InLineAlert-content,
+		.spectrum-InLineAlert-footer {
+			forced-color-adjust: none;
+		}
+
+		&.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold),
+		&.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle) {
+			--highcontrast-inlinealert-background-color: ButtonFace;
+		}
 	}
 }
diff --git a/components/inlinealert/stories/inlinealert.stories.js b/components/inlinealert/stories/inlinealert.stories.js
index 468aaea4737..0eb966591c1 100644
--- a/components/inlinealert/stories/inlinealert.stories.js
+++ b/components/inlinealert/stories/inlinealert.stories.js
@@ -6,6 +6,8 @@ import { AlertsWithStyleOptions } from "./template.js";
 
 /**
  * In-line alerts display a non-modal message associated with objects in a view. These are often used in form validation, providing a place to aggregate feedback related to multiple fields.
+ * 
+ * In-line alerts have five different variants: neutral (default), informative, positive, notice, and negative. Each variant is available with three fill styles (treatment): outline (default), subtle, and bold.
  */
 export default {
 	title: "In-line alert",
@@ -48,7 +50,7 @@ export default {
 				type: { summary: "string" },
 				category: "Component",
 			},
-			options: ["default", "subtle", "bold"],
+			options: ["border", "subtle", "bold"],
 			control: "select",
 		},
 		isClosable: {
@@ -124,6 +126,19 @@ Negative.parameters = {
 };
 Negative.tags = ["!dev"];
 
+/**
+ * Neutral (default) variant alerts may also use the subtle and bold treatments available to other variants.
+ */
+export const Neutral = AlertsWithStyleOptions.bind({});
+Neutral.args = {
+	variant: "neutral",
+	headerText: "Neutral in-line alert header",
+};
+Neutral.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+Neutral.tags = ["!dev"];
+
 /**
  * The positive variant uses the positive semantic color (green) and has a "checkmark" icon to help those with color vision deficiency discern the message tone. This variant should be used to inform someone of a successful function or result of an action they took.
  */
@@ -153,29 +168,43 @@ Notice.tags = ["!dev"];
 /**
  * An in-line alert with a close button in the footer. Combine this strategy with any variant.
  */
-export const Closable = AlertsWithStyleOptions.bind({});
-Closable.args = {
+export const WithFooterClosable = AlertsWithStyleOptions.bind({});
+WithFooterClosable.args = {
 	variant: "negative",
 	isClosable: true,
-	headerText: "Incorrect payment information - error",
+	text: "Incorrect payment information - error",
 };
-Closable.parameters = {
+WithFooterClosable.parameters = {
 	chromatic: { disableSnapshot: true },
 };
-Closable.tags = ["!dev"];
+WithFooterClosable.tags = ["!dev"];
 
 /**
  * An in-line alert with a link in the footer. Combine this strategy with any variant.
  */
-export const Link = AlertsWithStyleOptions.bind({});
-Link.args = {
+export const WithFooterLink = AlertsWithStyleOptions.bind({});
+WithFooterLink.args = {
+	hasLink: true,
+	text: "Click the link",
+};
+WithFooterLink.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+WithFooterLink.tags = ["!dev"];
+
+/**
+ * An in-line alert with a link and close button in the footer. Combine this strategy with any variant.
+ */
+export const WithFooterLinkAndClosable = AlertsWithStyleOptions.bind({});
+WithFooterLinkAndClosable.args = {
 	hasLink: true,
-	headerText: "Click the link",
+	isClosable: true,
+	text: "Click the link or close the alert",
 };
-Link.parameters = {
+WithFooterLinkAndClosable.parameters = {
 	chromatic: { disableSnapshot: true },
 };
-Link.tags = ["!dev"];
+WithFooterLinkAndClosable.tags = ["!dev"];
 
 // ********* VRT ONLY ********* //
 export const WithForcedColors = InlineAlertGroup.bind({});
diff --git a/components/inlinealert/stories/template.js b/components/inlinealert/stories/template.js
index 54c3891111b..10bf057b3fe 100644
--- a/components/inlinealert/stories/template.js
+++ b/components/inlinealert/stories/template.js
@@ -90,6 +90,16 @@ export const Template = ({
 	`;
 };
 
+/**
+ * Convert provided string to title case
+ */
+const toTitleCase = (string) => string.replace(/\w\S*/g, text => text.charAt(0).toUpperCase() + text.substring(1).toLowerCase());
+
+/**
+ * Set the appropriate treatment header text
+ */
+const setTreatmentHeaderText = (variant, treatment) => `${toTitleCase(variant)} variant with ${treatment !== "default" ? treatment : "outline"} fill`;
+
 export const AlertsWithStyleOptions = ({
 	...args
 }, context = {}) => Container({
@@ -101,14 +111,17 @@ export const AlertsWithStyleOptions = ({
 	content: html`
 		${Template({
 			...args,
+			headerText: setTreatmentHeaderText(args.variant, "default"),
 		}, context)}
 		${Template({
 			...args,
-			isSubtle: true,
+			treatment: "subtle",
+			headerText: setTreatmentHeaderText(args.variant, "subtle"),
 		}, context)}
 		${Template({
 			...args,
-			isBold: true,
+			treatment: "bold",
+			headerText: setTreatmentHeaderText(args.variant, "bold"),
 		}, context)}
 	`,
 }, context);

From 4bce0732028f36c8803ebfd01a6bd92d58f1bd0f Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Wed, 30 Apr 2025 14:12:01 -0700
Subject: [PATCH 12/23] chore(in-line-alert): update WHC styles; drop button
 mods; add w/out header story control

---
 components/inlinealert/dist/metadata.json     |  6 +---
 components/inlinealert/index.css              |  9 ++---
 .../stories/inlinealert.stories.js            | 33 ++++++++++++++++---
 .../inlinealert/stories/inlinealert.test.js   |  4 +++
 components/inlinealert/stories/template.js    | 21 +++++++-----
 5 files changed, 48 insertions(+), 25 deletions(-)

diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json
index 847e1d5e5b7..5602bad2970 100644
--- a/components/inlinealert/dist/metadata.json
+++ b/components/inlinealert/dist/metadata.json
@@ -119,11 +119,7 @@
     "--spectrum-white",
     "--spectrum-workflow-icon-size-100"
   ],
-  "passthroughs": [
-    "--mod-button-border-color-default",
-    "--mod-button-content-color-default",
-    "--mod-link-text-color"
-  ],
+  "passthroughs": ["--mod-link-text-color"],
   "high-contrast": [
     "--highcontrast-inlinealert-background-color",
     "--highcontrast-inlinealert-border-and-icon-color",
diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css
index b290f1094ec..3bb12967a08 100644
--- a/components/inlinealert/index.css
+++ b/components/inlinealert/index.css
@@ -78,9 +78,6 @@
 		--spectrum-inlinealert-header-color: var(--spectrum-white);
 		--spectrum-inlinealert-content-color: var(--spectrum-white);
 		--spectrum-inlinealert-border-and-icon-color: var(--spectrum-white);
-
-		--mod-button-content-color-default: var(--spectrum-white);
-		--mod-button-border-color-default: var(--spectrum-white);
 	}
 }
 
@@ -209,9 +206,7 @@
 	.spectrum-InLineAlert {
 		--highcontrast-inlinealert-header-color: CanvasText;
 		--highcontrast-inlinealert-content-color: CanvasText;
-		--highcontrast-inlinealert-border-and-icon-color: ButtonBorder;
-
-		--mod-button-content-color-default: CanvasText;
+		--highcontrast-inlinealert-border-and-icon-color: CanvasText;
 
 		.spectrum-InLineAlert-header,
 		.spectrum-InLineAlert-content,
@@ -221,7 +216,7 @@
 
 		&.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold),
 		&.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle) {
-			--highcontrast-inlinealert-background-color: ButtonFace;
+			--highcontrast-inlinealert-background-color: Canvas;
 		}
 	}
 }
diff --git a/components/inlinealert/stories/inlinealert.stories.js b/components/inlinealert/stories/inlinealert.stories.js
index 0eb966591c1..4fed7dc1fc7 100644
--- a/components/inlinealert/stories/inlinealert.stories.js
+++ b/components/inlinealert/stories/inlinealert.stories.js
@@ -7,7 +7,7 @@ import { AlertsWithStyleOptions } from "./template.js";
 /**
  * In-line alerts display a non-modal message associated with objects in a view. These are often used in form validation, providing a place to aggregate feedback related to multiple fields.
  * 
- * In-line alerts have five different variants: neutral (default), informative, positive, notice, and negative. Each variant is available with three fill styles (treatment): outline (default), subtle, and bold.
+ * In-line alerts have five different variants: neutral (default), informative, positive, notice, and negative. Each variant is available with three fill styles (treatment): border (default), subtle, and bold.
  */
 export default {
 	title: "In-line alert",
@@ -22,19 +22,29 @@ export default {
 				category: "Content",
 			},
 			control: { type: "text" },
+			if: { arg: "withoutHeader", truthy: false },
 		},
 		text: {
-			name: "Text",
+			name: "Body text",
 			type: { name: "string", required: true },
 			table: {
 				type: { summary: "string" },
 				disable: false,
-				category: "Component",
+				category: "Content",
 			},
 			control: { type: "text" },
 		},
+		withoutHeader: {
+			name: "Without header",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Component",
+			},
+			control: "boolean",
+		},
 		variant: {
-			name: "Variants",
+			name: "Variant",
 			type: { name: "string" },
 			table: {
 				type: { summary: "string" },
@@ -78,8 +88,9 @@ export default {
 		rootClass: "spectrum-InLineAlert",
 		headerText: "In-line alert header",
 		text: "This is an alert.",
+		withoutHeader: false,
 		variant: "neutral",
-		treatment: "default",
+		treatment: "border",
 		isClosable: false,
 		hasLink: false,
 	},
@@ -99,6 +110,18 @@ export default {
 export const Default = InlineAlertGroup.bind({});
 Default.args = {};
 
+/**
+ * In-line alerts may be rendered without a header. Combine this strategy with any variant.
+ */
+export const WithoutHeader = InlineAlertGroup.bind({});
+WithoutHeader.args = {
+	withoutHeader: true,
+};
+WithoutHeader.parameters = {
+	chromatic: { disableSnapshot: true },
+};
+WithoutHeader.tags = ["!dev"];
+
 // ********* DOCS ONLY ********* //
 /**
  * The informative variant uses the informative semantic color (blue) and has an "information" icon to help those with color vision deficiency discern the message tone. This should be used when the message needs to call extra attention, as compared to the neutral variant.
diff --git a/components/inlinealert/stories/inlinealert.test.js b/components/inlinealert/stories/inlinealert.test.js
index 5b0df38a6f9..4aa070b4a6f 100644
--- a/components/inlinealert/stories/inlinealert.test.js
+++ b/components/inlinealert/stories/inlinealert.test.js
@@ -23,6 +23,10 @@ export const InlineAlertGroup = Variants({
 			testHeading: "Closable",
 			isClosable: true,
 		},
+		{
+			testHeading: "Without header",
+			withoutHeader: true,
+		},
 		{
 			testHeading: "Link",
 			hasLink: true,
diff --git a/components/inlinealert/stories/template.js b/components/inlinealert/stories/template.js
index 10bf057b3fe..e98afdc213a 100644
--- a/components/inlinealert/stories/template.js
+++ b/components/inlinealert/stories/template.js
@@ -14,8 +14,9 @@ export const Template = ({
 	customStyles = {},
 	headerText,
 	text,
+	withoutHeader = false,
 	variant = "neutral",
-	treatment = "default",
+	treatment = "border",
 	isClosable = false,
 	hasLink = false,
 } = {}, context = {}) => {
@@ -47,6 +48,13 @@ export const Template = ({
 			}, context) : nothing;
 
 
+	const titleMarkup = !withoutHeader ? html`
+		<div class="${rootClass}-header">
+			${headerText}
+			${iconMarkup}
+		</div>
+	` : nothing;
+
 	const linkMarkup = hasLink ? html`
 		<div class="spectrum-InLineAlert-footer">
 			${Link({
@@ -73,16 +81,13 @@ export const Template = ({
 			class=${classMap({
 				[rootClass]: true,
 				[`${rootClass}--${variant}`]: typeof variant !== "undefined",
-				[`${rootClass}--${treatment}`]: treatment !== "default",
+				[`${rootClass}--${treatment}`]: treatment !== "border",
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
 			style=${styleMap(customStyles)}
 
 		>
-			<div class="${rootClass}-header">
-				${headerText}
-				${iconMarkup}
-			</div>
+			${titleMarkup}
 			<div class="${rootClass}-content">${text}</div>
 			${linkMarkup}
 			${closableMarkup}
@@ -98,7 +103,7 @@ const toTitleCase = (string) => string.replace(/\w\S*/g, text => text.charAt(0).
 /**
  * Set the appropriate treatment header text
  */
-const setTreatmentHeaderText = (variant, treatment) => `${toTitleCase(variant)} variant with ${treatment !== "default" ? treatment : "outline"} fill`;
+const setTreatmentHeaderText = (variant, treatment) => `${toTitleCase(variant)} variant with ${treatment !== "border" ? treatment : "outline"} fill`;
 
 export const AlertsWithStyleOptions = ({
 	...args
@@ -111,7 +116,7 @@ export const AlertsWithStyleOptions = ({
 	content: html`
 		${Template({
 			...args,
-			headerText: setTreatmentHeaderText(args.variant, "default"),
+			headerText: setTreatmentHeaderText(args.variant, "border"),
 		}, context)}
 		${Template({
 			...args,

From 13b830035256f4d0dcef1b55cb830b9b86650136 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Wed, 30 Apr 2025 14:32:16 -0700
Subject: [PATCH 13/23] fix(in-line-alert): revise WHC colors and restore
 borders for subtle/bold treatments

---
 components/inlinealert/index.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css
index 3bb12967a08..5bcff5919f3 100644
--- a/components/inlinealert/index.css
+++ b/components/inlinealert/index.css
@@ -67,11 +67,11 @@
 	border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color)));
 
 	&.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold) {
-		--spectrum-inlinealert-border-width: 0px;
+		--mod-inlinealert-border-width: 0px;
 	}
 
 	&.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle) {
-		--spectrum-inlinealert-border-width: 0px;
+		--mod-inlinealert-border-width: 0px;
 	}
 
 	&.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle, .spectrum-InLineAlert--notice) {
@@ -217,6 +217,7 @@
 		&.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold),
 		&.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle) {
 			--highcontrast-inlinealert-background-color: Canvas;
+			--mod-inlinealert-border-width: var(--spectrum-inlinealert-border-width);
 		}
 	}
 }

From 00769b44435faa22df9b49a3f0593792b07e926b Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Wed, 30 Apr 2025 14:44:43 -0700
Subject: [PATCH 14/23] fix(in-line-alert): reorder custom properties; drop
 unnecessary selectors

---
 components/inlinealert/dist/metadata.json |  34 ++---
 components/inlinealert/index.css          | 164 +++++++++++-----------
 2 files changed, 99 insertions(+), 99 deletions(-)

diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json
index 5602bad2970..80ba6bcf88d 100644
--- a/components/inlinealert/dist/metadata.json
+++ b/components/inlinealert/dist/metadata.json
@@ -5,29 +5,29 @@
     ".spectrum-InLineAlert .spectrum-InLineAlert-content",
     ".spectrum-InLineAlert .spectrum-InLineAlert-footer",
     ".spectrum-InLineAlert .spectrum-InLineAlert-header",
-    ".spectrum-InLineAlert--info",
-    ".spectrum-InLineAlert--info.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle)",
-    ".spectrum-InLineAlert--info.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold)",
-    ".spectrum-InLineAlert--negative",
-    ".spectrum-InLineAlert--negative.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle)",
-    ".spectrum-InLineAlert--negative.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold)",
-    ".spectrum-InLineAlert--neutral",
-    ".spectrum-InLineAlert--neutral.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle)",
-    ".spectrum-InLineAlert--neutral.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold)",
-    ".spectrum-InLineAlert--notice",
-    ".spectrum-InLineAlert--notice.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle)",
-    ".spectrum-InLineAlert--notice.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold)",
-    ".spectrum-InLineAlert--positive",
-    ".spectrum-InLineAlert--positive.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle)",
-    ".spectrum-InLineAlert--positive.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold)",
     ".spectrum-InLineAlert-content",
     ".spectrum-InLineAlert-footer",
     ".spectrum-InLineAlert-footer:empty",
     ".spectrum-InLineAlert-header",
     ".spectrum-InLineAlert-icon",
-    ".spectrum-InLineAlert.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle)",
+    ".spectrum-InLineAlert.spectrum-InLineAlert--bold",
     ".spectrum-InLineAlert.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle, .spectrum-InLineAlert--notice)",
-    ".spectrum-InLineAlert.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold)"
+    ".spectrum-InLineAlert.spectrum-InLineAlert--info",
+    ".spectrum-InLineAlert.spectrum-InLineAlert--info.spectrum-InLineAlert--bold",
+    ".spectrum-InLineAlert.spectrum-InLineAlert--info.spectrum-InLineAlert--subtle",
+    ".spectrum-InLineAlert.spectrum-InLineAlert--negative",
+    ".spectrum-InLineAlert.spectrum-InLineAlert--negative.spectrum-InLineAlert--bold",
+    ".spectrum-InLineAlert.spectrum-InLineAlert--negative.spectrum-InLineAlert--subtle",
+    ".spectrum-InLineAlert.spectrum-InLineAlert--neutral",
+    ".spectrum-InLineAlert.spectrum-InLineAlert--neutral.spectrum-InLineAlert--bold",
+    ".spectrum-InLineAlert.spectrum-InLineAlert--neutral.spectrum-InLineAlert--subtle",
+    ".spectrum-InLineAlert.spectrum-InLineAlert--notice",
+    ".spectrum-InLineAlert.spectrum-InLineAlert--notice.spectrum-InLineAlert--bold",
+    ".spectrum-InLineAlert.spectrum-InLineAlert--notice.spectrum-InLineAlert--subtle",
+    ".spectrum-InLineAlert.spectrum-InLineAlert--positive",
+    ".spectrum-InLineAlert.spectrum-InLineAlert--positive.spectrum-InLineAlert--bold",
+    ".spectrum-InLineAlert.spectrum-InLineAlert--positive.spectrum-InLineAlert--subtle",
+    ".spectrum-InLineAlert.spectrum-InLineAlert--subtle"
   ],
   "modifiers": [
     "--mod-inlinealert-background-color",
diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css
index 5bcff5919f3..98ed88ec7f2 100644
--- a/components/inlinealert/index.css
+++ b/components/inlinealert/index.css
@@ -46,6 +46,86 @@
 
 	/* Link */
 	--mod-link-text-color: var(--mod-inlinealert-content-color, var(--spectrum-inlinealert-content-color));
+
+	&.spectrum-InLineAlert--subtle {
+		--mod-inlinealert-border-width: 0px;
+	}
+
+	&.spectrum-InLineAlert--bold {
+		--mod-inlinealert-border-width: 0px;
+	}
+
+	&.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle, .spectrum-InLineAlert--notice) {
+		--spectrum-inlinealert-header-color: var(--spectrum-white);
+		--spectrum-inlinealert-content-color: var(--spectrum-white);
+		--spectrum-inlinealert-border-and-icon-color: var(--spectrum-white);
+	}
+
+	&.spectrum-InLineAlert--info {
+		--spectrum-inlinealert-border-and-icon-color: var(--spectrum-informative-visual-color);
+
+		&.spectrum-InLineAlert--subtle {
+			--spectrum-inlinealert-background-color: var(--spectrum-informative-subtle-background-color-default);
+			--spectrum-inlinealert-border-and-icon-color: var(--spectrum-informative-visual-color);
+		}
+
+		&.spectrum-InLineAlert--bold {
+			--spectrum-inlinealert-background-color: var(--spectrum-informative-background-color-default);
+		}
+	}
+
+	&.spectrum-InLineAlert--notice {
+		--spectrum-inlinealert-border-and-icon-color: var(--spectrum-notice-visual-color);
+
+		&.spectrum-InLineAlert--subtle {
+			--spectrum-inlinealert-background-color: var(--spectrum-notice-subtle-background-color-default);
+			--spectrum-inlinealert-border-and-icon-color: var(--spectrum-notice-visual-color);
+		}
+
+		&.spectrum-InLineAlert--bold {
+			--spectrum-inlinealert-background-color: var(--spectrum-notice-background-color-default);
+			--spectrum-inlinealert-border-and-icon-color: var(--spectrum-black);
+		}
+	}
+
+	&.spectrum-InLineAlert--positive {
+		--spectrum-inlinealert-border-and-icon-color: var(--spectrum-positive-visual-color);
+
+		&.spectrum-InLineAlert--subtle {
+			--spectrum-inlinealert-background-color: var(--spectrum-positive-subtle-background-color-default);
+			--spectrum-inlinealert-border-and-icon-color: var(--spectrum-positive-visual-color);
+		}
+
+		&.spectrum-InLineAlert--bold {
+			--spectrum-inlinealert-background-color: var(--spectrum-positive-background-color-default);
+		}
+	}
+
+	&.spectrum-InLineAlert--negative {
+		--spectrum-inlinealert-border-and-icon-color: var(--spectrum-negative-visual-color);
+
+		&.spectrum-InLineAlert--subtle {
+			--spectrum-inlinealert-background-color: var(--spectrum-negative-subtle-background-color-default);
+			--spectrum-inlinealert-border-and-icon-color: var(--spectrum-negative-visual-color);
+		}
+
+		&.spectrum-InLineAlert--bold {
+			--spectrum-inlinealert-background-color: var(--spectrum-negative-background-color-default);
+		}
+	}
+
+	&.spectrum-InLineAlert--neutral {
+		--spectrum-inlinealert-border-and-icon-color: var(--spectrum-neutral-visual-color);
+
+		&.spectrum-InLineAlert--subtle {
+			--spectrum-inlinealert-background-color: var(--spectrum-neutral-subtle-background-color-default);
+			--spectrum-inlinealert-border-and-icon-color: var(--spectrum-neutral-visual-color);
+		}
+
+		&.spectrum-InLineAlert--bold {
+			--spectrum-inlinealert-background-color: var(--spectrum-neutral-background-color-default);
+		}
+	}
 }
 
 .spectrum-InLineAlert {
@@ -65,20 +145,6 @@
 
 	background-color: var(--highcontrast-inlinealert-background-color, var(--mod-inlinealert-background-color, var(--spectrum-inlinealert-background-color)));
 	border-color: var(--highcontrast-inlinealert-border-and-icon-color, var(--mod-inlinealert-border-and-icon-color, var(--spectrum-inlinealert-border-and-icon-color)));
-
-	&.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold) {
-		--mod-inlinealert-border-width: 0px;
-	}
-
-	&.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle) {
-		--mod-inlinealert-border-width: 0px;
-	}
-
-	&.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle, .spectrum-InLineAlert--notice) {
-		--spectrum-inlinealert-header-color: var(--spectrum-white);
-		--spectrum-inlinealert-content-color: var(--spectrum-white);
-		--spectrum-inlinealert-border-and-icon-color: var(--spectrum-white);
-	}
 }
 
 .spectrum-InLineAlert-icon {
@@ -136,72 +202,6 @@
 	}
 }
 
-.spectrum-InLineAlert--info {
-	--spectrum-inlinealert-border-and-icon-color: var(--spectrum-informative-visual-color);
-
-	&.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold) {
-		--spectrum-inlinealert-background-color: var(--spectrum-informative-subtle-background-color-default);
-		--spectrum-inlinealert-border-and-icon-color: var(--spectrum-informative-visual-color);
-	}
-
-	&.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle) {
-		--spectrum-inlinealert-background-color: var(--spectrum-informative-background-color-default);
-	}
-}
-
-.spectrum-InLineAlert--notice {
-	--spectrum-inlinealert-border-and-icon-color: var(--spectrum-notice-visual-color);
-
-	&.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold) {
-		--spectrum-inlinealert-background-color: var(--spectrum-notice-subtle-background-color-default);
-		--spectrum-inlinealert-border-and-icon-color: var(--spectrum-notice-visual-color);
-	}
-
-	&.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle) {
-		--spectrum-inlinealert-background-color: var(--spectrum-notice-background-color-default);
-		--spectrum-inlinealert-border-and-icon-color: var(--spectrum-black);
-	}
-}
-
-.spectrum-InLineAlert--positive {
-	--spectrum-inlinealert-border-and-icon-color: var(--spectrum-positive-visual-color);
-
-	&.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold) {
-		--spectrum-inlinealert-background-color: var(--spectrum-positive-subtle-background-color-default);
-		--spectrum-inlinealert-border-and-icon-color: var(--spectrum-positive-visual-color);
-	}
-
-	&.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle) {
-		--spectrum-inlinealert-background-color: var(--spectrum-positive-background-color-default);
-	}
-}
-
-.spectrum-InLineAlert--negative {
-	--spectrum-inlinealert-border-and-icon-color: var(--spectrum-negative-visual-color);
-
-	&.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold) {
-		--spectrum-inlinealert-background-color: var(--spectrum-negative-subtle-background-color-default);
-		--spectrum-inlinealert-border-and-icon-color: var(--spectrum-negative-visual-color);
-	}
-
-	&.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle) {
-		--spectrum-inlinealert-background-color: var(--spectrum-negative-background-color-default);
-	}
-}
-
-.spectrum-InLineAlert--neutral {
-	--spectrum-inlinealert-border-and-icon-color: var(--spectrum-neutral-visual-color);
-
-	&.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold) {
-		--spectrum-inlinealert-background-color: var(--spectrum-neutral-subtle-background-color-default);
-		--spectrum-inlinealert-border-and-icon-color: var(--spectrum-neutral-visual-color);
-	}
-
-	&.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle) {
-		--spectrum-inlinealert-background-color: var(--spectrum-neutral-background-color-default);
-	}
-}
-
 @media (forced-colors: active) {
 	.spectrum-InLineAlert {
 		--highcontrast-inlinealert-header-color: CanvasText;
@@ -214,8 +214,8 @@
 			forced-color-adjust: none;
 		}
 
-		&.spectrum-InLineAlert--subtle:not(.spectrum-InLineAlert--bold),
-		&.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle) {
+		&.spectrum-InLineAlert--subtle,
+		&.spectrum-InLineAlert--bold {
 			--highcontrast-inlinealert-background-color: Canvas;
 			--mod-inlinealert-border-width: var(--spectrum-inlinealert-border-width);
 		}

From cc20e0271dc4f5ae440df5b227ca10cae6c15593 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Wed, 30 Apr 2025 15:19:19 -0700
Subject: [PATCH 15/23] fix(in-line-alert): set static variations on links and
 buttons ensure visibility

---
 components/inlinealert/dist/metadata.json  | 2 +-
 components/inlinealert/index.css           | 3 ---
 components/inlinealert/stories/template.js | 2 ++
 3 files changed, 3 insertions(+), 4 deletions(-)

diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json
index 80ba6bcf88d..c2de3238d8d 100644
--- a/components/inlinealert/dist/metadata.json
+++ b/components/inlinealert/dist/metadata.json
@@ -119,7 +119,7 @@
     "--spectrum-white",
     "--spectrum-workflow-icon-size-100"
   ],
-  "passthroughs": ["--mod-link-text-color"],
+  "passthroughs": [],
   "high-contrast": [
     "--highcontrast-inlinealert-background-color",
     "--highcontrast-inlinealert-border-and-icon-color",
diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css
index 98ed88ec7f2..d8af6e815f0 100644
--- a/components/inlinealert/index.css
+++ b/components/inlinealert/index.css
@@ -44,9 +44,6 @@
 	--spectrum-inlinealert-header-color: var(--spectrum-heading-color);
 	--spectrum-inlinealert-content-color: var(--spectrum-body-color);
 
-	/* Link */
-	--mod-link-text-color: var(--mod-inlinealert-content-color, var(--spectrum-inlinealert-content-color));
-
 	&.spectrum-InLineAlert--subtle {
 		--mod-inlinealert-border-width: 0px;
 	}
diff --git a/components/inlinealert/stories/template.js b/components/inlinealert/stories/template.js
index e98afdc213a..40cfaac73e3 100644
--- a/components/inlinealert/stories/template.js
+++ b/components/inlinealert/stories/template.js
@@ -60,6 +60,7 @@ export const Template = ({
 			${Link({
 				url: "#",
 				text: "Link",
+				staticColor: treatment === "subtle" || variant === "notice" ? "black" : "white",
 			})}
 		</div>
 	` : nothing;
@@ -72,6 +73,7 @@ export const Template = ({
 				iconName: false,
 				hideLabel: false,
 				label: "Ok",
+				staticColor: treatment === "subtle" || variant === "notice" ? "black" : "white",
 			})}
 		</div>
 	` : nothing;

From b9ee4f2da580c3c02dbb51cac6af8cfef1851cfd Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Thu, 1 May 2025 09:14:24 -0700
Subject: [PATCH 16/23] fix(in-line-alert): icon alignment

---
 components/inlinealert/dist/metadata.json | 3 ---
 components/inlinealert/index.css          | 7 -------
 2 files changed, 10 deletions(-)

diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json
index c2de3238d8d..39cd74d5390 100644
--- a/components/inlinealert/dist/metadata.json
+++ b/components/inlinealert/dist/metadata.json
@@ -2,9 +2,6 @@
   "sourceFile": "index.css",
   "selectors": [
     ".spectrum-InLineAlert",
-    ".spectrum-InLineAlert .spectrum-InLineAlert-content",
-    ".spectrum-InLineAlert .spectrum-InLineAlert-footer",
-    ".spectrum-InLineAlert .spectrum-InLineAlert-header",
     ".spectrum-InLineAlert-content",
     ".spectrum-InLineAlert-footer",
     ".spectrum-InLineAlert-footer:empty",
diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css
index d8af6e815f0..379b55742fd 100644
--- a/components/inlinealert/index.css
+++ b/components/inlinealert/index.css
@@ -153,7 +153,6 @@
 
 .spectrum-InLineAlert-header {
 	display: flex;
-	align-items: center;
 	justify-content: space-between;
 
 	gap: var(--mod-inlinealert-min-spacing-header-to-icon, var(--spectrum-inlinealert-min-spacing-header-to-icon));
@@ -205,12 +204,6 @@
 		--highcontrast-inlinealert-content-color: CanvasText;
 		--highcontrast-inlinealert-border-and-icon-color: CanvasText;
 
-		.spectrum-InLineAlert-header,
-		.spectrum-InLineAlert-content,
-		.spectrum-InLineAlert-footer {
-			forced-color-adjust: none;
-		}
-
 		&.spectrum-InLineAlert--subtle,
 		&.spectrum-InLineAlert--bold {
 			--highcontrast-inlinealert-background-color: Canvas;

From 59d53ad7c68841320453e18aad2accdaf7cf3408 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Thu, 1 May 2025 09:26:03 -0700
Subject: [PATCH 17/23] fix(in-line-alert): add high contrast border width
 property

---
 components/inlinealert/dist/metadata.json  |  1 +
 components/inlinealert/index.css           |  8 ++++----
 components/inlinealert/stories/template.js | 20 +++++++++-----------
 3 files changed, 14 insertions(+), 15 deletions(-)

diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json
index 39cd74d5390..fad23a0b4fd 100644
--- a/components/inlinealert/dist/metadata.json
+++ b/components/inlinealert/dist/metadata.json
@@ -120,6 +120,7 @@
   "high-contrast": [
     "--highcontrast-inlinealert-background-color",
     "--highcontrast-inlinealert-border-and-icon-color",
+    "--highcontrast-inlinealert-border-width",
     "--highcontrast-inlinealert-content-color",
     "--highcontrast-inlinealert-header-color"
   ]
diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css
index 379b55742fd..e5361f0a693 100644
--- a/components/inlinealert/index.css
+++ b/components/inlinealert/index.css
@@ -45,11 +45,11 @@
 	--spectrum-inlinealert-content-color: var(--spectrum-body-color);
 
 	&.spectrum-InLineAlert--subtle {
-		--mod-inlinealert-border-width: 0px;
+		--spectrum-inlinealert-border-width: 0px;
 	}
 
 	&.spectrum-InLineAlert--bold {
-		--mod-inlinealert-border-width: 0px;
+		--spectrum-inlinealert-border-width: 0px;
 	}
 
 	&.spectrum-InLineAlert--bold:not(.spectrum-InLineAlert--subtle, .spectrum-InLineAlert--notice) {
@@ -135,7 +135,7 @@
 	padding-block: var(--mod-inlinealert-spacing-edge-to-text, var(--spectrum-inlinealert-spacing-edge-to-text));
 	padding-inline: var(--mod-inlinealert-spacing-edge-to-text, var(--spectrum-inlinealert-spacing-edge-to-text));
 
-	border-block-width: var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width));
+	border-block-width: var(--highcontrast-inlinealert-border-width, var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width)));
 	border-inline-width: var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width));
 	border-style: solid;
 	border-radius: var(--mod-inlinealert-border-radius, var(--spectrum-inlinealert-border-radius));
@@ -207,7 +207,7 @@
 		&.spectrum-InLineAlert--subtle,
 		&.spectrum-InLineAlert--bold {
 			--highcontrast-inlinealert-background-color: Canvas;
-			--mod-inlinealert-border-width: var(--spectrum-inlinealert-border-width);
+			--highcontrast-inlinealert-border-width: var(--spectrum-inlinealert-border-width);
 		}
 	}
 }
diff --git a/components/inlinealert/stories/template.js b/components/inlinealert/stories/template.js
index 40cfaac73e3..23f22e9d954 100644
--- a/components/inlinealert/stories/template.js
+++ b/components/inlinealert/stories/template.js
@@ -107,28 +107,26 @@ const toTitleCase = (string) => string.replace(/\w\S*/g, text => text.charAt(0).
  */
 const setTreatmentHeaderText = (variant, treatment) => `${toTitleCase(variant)} variant with ${treatment !== "border" ? treatment : "outline"} fill`;
 
-export const AlertsWithStyleOptions = ({
-	...args
-}, context = {}) => Container({
+export const AlertsWithStyleOptions = (args, context = {}) => Container({
 	withBorder: false,
 	direction: "row",
 	wrapperStyles: {
 		columnGap: "12px",
 	},
-	content: html`
-		${Template({
+	content: [
+		Template({
 			...args,
 			headerText: setTreatmentHeaderText(args.variant, "border"),
-		}, context)}
-		${Template({
+		}, context),
+		Template({
 			...args,
 			treatment: "subtle",
 			headerText: setTreatmentHeaderText(args.variant, "subtle"),
-		}, context)}
-		${Template({
+		}, context),
+		Template({
 			...args,
 			treatment: "bold",
 			headerText: setTreatmentHeaderText(args.variant, "bold"),
-		}, context)}
-	`,
+		}, context),
+	],
 }, context);

From 0cbf276dacd07178a8e155e5620060721c688f01 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Thu, 1 May 2025 09:50:35 -0700
Subject: [PATCH 18/23] fix(in-line-alert): use req'd font stacks

Co-authored-by: [ Cassondra ] <castastrophe@users.noreply.github.com>
---
 .changeset/big-jars-pump.md               | 2 +-
 components/inlinealert/dist/metadata.json | 3 +--
 components/inlinealert/index.css          | 4 ++--
 3 files changed, 4 insertions(+), 5 deletions(-)

diff --git a/.changeset/big-jars-pump.md b/.changeset/big-jars-pump.md
index ec9bc6a0d5e..18c88b255f5 100644
--- a/.changeset/big-jars-pump.md
+++ b/.changeset/big-jars-pump.md
@@ -4,7 +4,7 @@
 
 #### S2 migration in-line alert
 
-This migrates the `in-line alert` component to S2. Custom properties have been remapped and added per the design specification.
+This migrates the `in-line alert` component to Spectrum 2. Custom properties have been updated and added per the design specification.
 
 Subtle and bold treatments have been added for each badge variant.
 
diff --git a/components/inlinealert/dist/metadata.json b/components/inlinealert/dist/metadata.json
index fad23a0b4fd..81ebe4df638 100644
--- a/components/inlinealert/dist/metadata.json
+++ b/components/inlinealert/dist/metadata.json
@@ -82,7 +82,6 @@
     "--spectrum-black",
     "--spectrum-body-color",
     "--spectrum-body-line-height",
-    "--spectrum-body-sans-serif-font-family",
     "--spectrum-body-sans-serif-font-style",
     "--spectrum-body-sans-serif-font-weight",
     "--spectrum-body-size-s",
@@ -91,7 +90,6 @@
     "--spectrum-corner-radius-700",
     "--spectrum-heading-color",
     "--spectrum-heading-line-height",
-    "--spectrum-heading-sans-serif-font-family",
     "--spectrum-heading-sans-serif-font-style",
     "--spectrum-heading-sans-serif-font-weight",
     "--spectrum-heading-size-xxs",
@@ -110,6 +108,7 @@
     "--spectrum-positive-background-color-default",
     "--spectrum-positive-subtle-background-color-default",
     "--spectrum-positive-visual-color",
+    "--spectrum-sans-font-family-stack",
     "--spectrum-spacing-100",
     "--spectrum-spacing-200",
     "--spectrum-spacing-300",
diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css
index e5361f0a693..5918f486278 100644
--- a/components/inlinealert/index.css
+++ b/components/inlinealert/index.css
@@ -13,13 +13,13 @@
 
 .spectrum-InLineAlert {
 	/* Font */
-	--spectrum-inlinealert-heading-font-family: var(--spectrum-heading-sans-serif-font-family);
+	--spectrum-inlinealert-heading-font-family: var(--spectrum-sans-font-family-stack);
 	--spectrum-inlinealert-heading-font-weight: var(--spectrum-heading-sans-serif-font-weight);
 	--spectrum-inlinealert-heading-font-style: var(--spectrum-heading-sans-serif-font-style);
 	--spectrum-inlinealert-heading-font-size: var(--spectrum-heading-size-xxs);
 	--spectrum-inlinealert-heading-line-height: var(--spectrum-heading-line-height);
 
-	--spectrum-inlinealert-content-font-family: var(--spectrum-body-sans-serif-font-family);
+	--spectrum-inlinealert-content-font-family: var(--spectrum-sans-font-family-stack);
 	--spectrum-inlinealert-content-font-weight: var(--spectrum-body-sans-serif-font-weight);
 	--spectrum-inlinealert-content-font-style: var(--spectrum-body-sans-serif-font-style);
 	--spectrum-inlinealert-content-font-size: var(--spectrum-body-size-s);

From a8477e18b0d35429277f6ecc8fcd6ba2abbff17a Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Thu, 1 May 2025 10:09:09 -0700
Subject: [PATCH 19/23] fix(in-line-alert): border treatment links + buttons

---
 components/inlinealert/stories/template.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/inlinealert/stories/template.js b/components/inlinealert/stories/template.js
index 23f22e9d954..21197b1d643 100644
--- a/components/inlinealert/stories/template.js
+++ b/components/inlinealert/stories/template.js
@@ -60,7 +60,7 @@ export const Template = ({
 			${Link({
 				url: "#",
 				text: "Link",
-				staticColor: treatment === "subtle" || variant === "notice" ? "black" : "white",
+				staticColor: treatment === "subtle" || treatment === "border" || variant === "notice" ? "black" : "white",
 			})}
 		</div>
 	` : nothing;
@@ -73,7 +73,7 @@ export const Template = ({
 				iconName: false,
 				hideLabel: false,
 				label: "Ok",
-				staticColor: treatment === "subtle" || variant === "notice" ? "black" : "white",
+				staticColor: treatment === "subtle" || treatment === "border" || variant === "notice" ? "black" : "white",
 			})}
 		</div>
 	` : nothing;

From 25f72ab45ed28ef9efa028abf401c1ae8855364b Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Thu, 1 May 2025 10:17:20 -0700
Subject: [PATCH 20/23] fix(in-line-alert): show icon with text when no header
 is displayed

---
 components/inlinealert/index.css           | 5 ++++-
 components/inlinealert/stories/template.js | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css
index 5918f486278..0fac42e77da 100644
--- a/components/inlinealert/index.css
+++ b/components/inlinealert/index.css
@@ -171,7 +171,10 @@
 }
 
 .spectrum-InLineAlert-content {
-	display: block;
+	display: flex;
+	justify-content: space-between;
+	gap: var(--mod-inlinealert-min-spacing-header-to-icon, var(--spectrum-inlinealert-min-spacing-header-to-icon));
+
 	margin-block-end: 0;
 	margin-inline-start: 0;
 	margin-inline-end: 0;
diff --git a/components/inlinealert/stories/template.js b/components/inlinealert/stories/template.js
index 21197b1d643..c2233414253 100644
--- a/components/inlinealert/stories/template.js
+++ b/components/inlinealert/stories/template.js
@@ -90,7 +90,10 @@ export const Template = ({
 
 		>
 			${titleMarkup}
-			<div class="${rootClass}-content">${text}</div>
+			<div class="${rootClass}-content">
+				${text}
+				${withoutHeader ? iconMarkup : nothing}
+			</div>
 			${linkMarkup}
 			${closableMarkup}
 		</div>

From 24725ff415076816a8c9267be81b7e264dcd0c35 Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Thu, 1 May 2025 10:26:11 -0700
Subject: [PATCH 21/23] chore(in-line-alert): update changelog with usage notes
 for subtle/bold + markup examples

---
 .changeset/big-jars-pump.md | 50 +++++++++++++++++++++++++++++++++++++
 1 file changed, 50 insertions(+)

diff --git a/.changeset/big-jars-pump.md b/.changeset/big-jars-pump.md
index 18c88b255f5..779df0cba77 100644
--- a/.changeset/big-jars-pump.md
+++ b/.changeset/big-jars-pump.md
@@ -8,6 +8,56 @@ This migrates the `in-line alert` component to Spectrum 2. Custom properties hav
 
 Subtle and bold treatments have been added for each badge variant.
 
+To use the subtle treatment, you will need to apply the `spectrum-InLineAlert--subtle` class:
+
+```html
+<div
+	class="spectrum-InLineAlert spectrum-InLineAlert--info spectrum-InLineAlert--subtle"
+>
+	<div class="spectrum-InLineAlert-header">
+		Info variant with subtle fill
+		<svg
+			focusable="false"
+			aria-hidden="true"
+			role="img"
+			class=" spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon "
+			id="icon-52w58"
+			aria-label="InfoCircle"
+		>
+			<title id="InfoCircle">Info Circle</title>
+			<use xlink:href="#icon-info-circle" href="#icon-info-circle"></use>
+		</svg>
+	</div>
+	<div class="spectrum-InLineAlert-content">This is an alert.</div>
+</div>
+```
+
+To use the bold treatment (which is reserved for high-attention alerts only), you will need to apply the `spectrum-InLineAlert--bold` class:
+
+```html
+<div
+	class="spectrum-InLineAlert spectrum-InLineAlert--info spectrum-InLineAlert--bold"
+>
+	<div class="spectrum-InLineAlert-header">
+		Info variant with bold fill
+		<svg
+			focusable="false"
+			aria-hidden="true"
+			role="img"
+			class=" spectrum-Icon spectrum-Icon--sizeM spectrum-InLineAlert-icon "
+			id="icon-mty2x"
+			aria-label="InfoCircle"
+		>
+			<title id="InfoCircle">Info Circle</title>
+			<use xlink:href="#icon-info-circle" href="#icon-info-circle"></use>
+		</svg>
+	</div>
+	<div class="spectrum-InLineAlert-content">This is an alert.</div>
+</div>
+```
+
+Because subtle and bold treatments draw a similar level of attention you should choose only one to use consistently within a single product.
+
 ##### New mods
 
 `--mod-inlinealert-border-and-icon-color-neutral`

From c904aa7ee91de92aa35034c7625d05573db52b3b Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Thu, 1 May 2025 11:35:40 -0700
Subject: [PATCH 22/23] Update components/inlinealert/index.css

Co-authored-by: Josh Winn <965114+jawinn@users.noreply.github.com>
---
 components/inlinealert/index.css | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css
index 0fac42e77da..cf352e39dba 100644
--- a/components/inlinealert/index.css
+++ b/components/inlinealert/index.css
@@ -207,10 +207,11 @@
 		--highcontrast-inlinealert-content-color: CanvasText;
 		--highcontrast-inlinealert-border-and-icon-color: CanvasText;
 
+		--highcontrast-inlinealert-background-color: Canvas;
+
 		&.spectrum-InLineAlert--subtle,
 		&.spectrum-InLineAlert--bold {
-			--highcontrast-inlinealert-background-color: Canvas;
-			--highcontrast-inlinealert-border-width: var(--spectrum-inlinealert-border-width);
+			--highcontrast-inlinealert-border-width: var(--spectrum-border-width-200);
 		}
 	}
 }

From 613854ee375c01aede9dd4942dde92820538df1c Mon Sep 17 00:00:00 2001
From: Cory Dransfeldt <cdransfeldt@adobe.com>
Date: Thu, 1 May 2025 11:52:16 -0700
Subject: [PATCH 23/23] fix(in-line-alert): combine border width declarations

---
 components/inlinealert/index.css | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/inlinealert/index.css b/components/inlinealert/index.css
index cf352e39dba..662a89ebb4e 100644
--- a/components/inlinealert/index.css
+++ b/components/inlinealert/index.css
@@ -135,8 +135,7 @@
 	padding-block: var(--mod-inlinealert-spacing-edge-to-text, var(--spectrum-inlinealert-spacing-edge-to-text));
 	padding-inline: var(--mod-inlinealert-spacing-edge-to-text, var(--spectrum-inlinealert-spacing-edge-to-text));
 
-	border-block-width: var(--highcontrast-inlinealert-border-width, var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width)));
-	border-inline-width: var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width));
+	border-width: var(--highcontrast-inlinealert-border-width, var(--mod-inlinealert-border-width, var(--spectrum-inlinealert-border-width)));
 	border-style: solid;
 	border-radius: var(--mod-inlinealert-border-radius, var(--spectrum-inlinealert-border-radius));