Update d2l-alert and d2l-alert-toast to use semantic variables.

.vdiff.json

@@ -7,7 +7,7 @@
 	],
 	"system": {
 		"platform": "linux",
-		"release": "6.14.0-1017-azure",
+		"release": "6.17.0-1008-azure",
 		"arch": "x64"
 	}
 }

components/alert/alert.js

@@ -52,8 +52,8 @@ class Alert extends LocalizeCoreElement(LitElement) {
 
 			:host {
 				animation: 600ms ease drop-in;
-				background: white;
-				border: 1px solid var(--d2l-color-mica);
+				background: var(--d2l-theme-background-color-base);
+				border: 1px solid var(--d2l-theme-border-color-standard);
 				border-inline-start-width: 0.3rem;
 				border-radius: 0.3rem;
 				box-sizing: border-box;
@@ -70,17 +70,17 @@ class Alert extends LocalizeCoreElement(LitElement) {
 
 			:host([type="critical"]),
 			:host([type="error"]) {
-				border-inline-start-color: var(--d2l-color-feedback-error);
+				border-inline-start-color: var(--d2l-theme-status-color-error);
 			}
 			:host([type="warning"]) {
-				border-inline-start-color: var(--d2l-color-feedback-warning);
+				border-inline-start-color: var(--d2l-theme-status-color-warning);
 			}
 			:host([type="default"]),
 			:host([type="call-to-action"]) {
-				border-inline-start-color: var(--d2l-color-feedback-action);
+				border-inline-start-color: var(--d2l-theme-status-color-default);
 			}
 			:host([type="success"]) {
-				border-inline-start-color: var(--d2l-color-feedback-success);
+				border-inline-start-color: var(--d2l-theme-status-color-success);
 			}
 
 			.d2l-alert-text {

components/alert/test/alert-toast.vdiff.js

@@ -45,10 +45,11 @@ describe('alert-toast', () => {
 		{ name: 'subtext-button-close', template: alertWithSubtextAndCloseButton },
 		{ name: 'subtext-no-close', template: html`<d2l-alert-toast no-auto-close type="critical" hide-close-button subtext="More detail explaining the critical issue." open>Critical message.</d2l-alert-toast>` },
 		{ name: 'long-button-text', template: html`<d2l-alert-toast no-auto-close type="warning" button-text="Perform Lengthy Operation Now" open>A message.</d2l-alert-toast>` },
-		{ name: 'long-button-text-subtext', template: html`<d2l-alert-toast no-auto-close type="warning" button-text="Perform Lengthy Operation Now" open subtext="More detail explaining the critical issue.">A message.</d2l-alert-toast>` }
-	].forEach(({ name, template }) => {
+		{ name: 'long-button-text-subtext', template: html`<d2l-alert-toast no-auto-close type="warning" button-text="Perform Lengthy Operation Now" open subtext="More detail explaining the critical issue.">A message.</d2l-alert-toast>` },
+		{ name: 'long-button-text-subtext-dark', colorMode: 'dark', template: html`<d2l-alert-toast no-auto-close type="warning" button-text="Perform Lengthy Operation Now" open subtext="More detail explaining the critical issue.">A message.</d2l-alert-toast>` }
+	].forEach(({ name, colorMode, template }) => {
 		it(name, async() => {
-			await fixture(template, { viewport: { width: 700, height: 200 } });
+			await fixture(template, { colorMode, viewport: { width: 700, height: 200 } });
 			await expect(document).to.be.golden();
 		});
 	});

components/alert/test/alert.vdiff.js

@@ -14,12 +14,19 @@ function createAlertWithCloseButton(opts) {
 describe('alert', () => {
 
 	[ 'default', 'success', 'critical', 'warning', 'error', 'call-to-action'].forEach(type => {
+
+		const template = html`<d2l-alert type="${type}">${`A${type === 'error' ? 'n' : ''} ${type === 'call-to-action' ? 'call to action.' : `${type} message.`}`}</d2l-alert>`;
+
 		it(`type-${type}`, async() => {
-			const elem = await fixture(html`
-				<d2l-alert type="${type}">${`A${type === 'error' ? 'n' : ''} ${type === 'call-to-action' ? 'call to action.' : `${type} message.`}`}</d2l-alert>
-			`);
+			const elem = await fixture(template);
+			await expect(elem).to.be.golden();
+		});
+
+		it(`type-${type}-dark`, async() => {
+			const elem = await fixture(template, { colorMode: 'dark' });
 			await expect(elem).to.be.golden();
 		});
+
 	});
 
 	[
@@ -30,7 +37,7 @@ describe('alert', () => {
 		{ name: 'hidden', rtl: true, template: html`<div style="height: 10px; width: 10px;"><d2l-alert type="default" hidden>A hidden message.</d2l-alert></div>` },
 		{ name: 'no-padding', template: createAlertWithCloseButton({ noPadding: true }) },
 		{ name: 'no-padding-rtl', rtl: true, template: createAlertWithCloseButton({ noPadding: true }) }
-	].forEach(({ name, template, rtl }) => {
+	].forEach(({ name, rtl, template }) => {
 		it(name, async() => {
 			const elem = await fixture(template, { rtl });
 			await expect(elem).to.be.golden();