diff --git a/packages/clay-css/src/scss/cadmin/components/_alerts.scss b/packages/clay-css/src/scss/cadmin/components/_alerts.scss
index 273eef418c..c93042bbb9 100644
--- a/packages/clay-css/src/scss/cadmin/components/_alerts.scss
+++ b/packages/clay-css/src/scss/cadmin/components/_alerts.scss
@@ -240,38 +240,6 @@
 
 @each $cadmin-color, $cadmin-value in $cadmin-alert-palette {
 	.alert-#{$cadmin-color} {
-		background-color: map-get($cadmin-value, bg);
-		border-color: map-get($cadmin-value, border-color);
-		color: map-get($cadmin-value, color);
-
-		hr {
-			border-top-color: darken(map-get($cadmin-value, border-color), 5%);
-		}
-
-		.alert-btn {
-			@include clay-button-variant(map-get($cadmin-value, alert-btn));
-		}
-
-		.close {
-			color: map-get($cadmin-value, close-color);
-
-			&:hover,
-			&:focus {
-				color: map-get($cadmin-value, close-hover-color);
-			}
-		}
-
-		.alert-link {
-			color: map-get($cadmin-value, link-color);
-
-			&:hover,
-			&:focus {
-				color: map-get($cadmin-value, link-hover-color);
-			}
-		}
-
-		.lead {
-			color: map-get($cadmin-value, lead-color);
-		}
+		@include clay-alert-variant($cadmin-value);
 	}
 }
diff --git a/packages/clay-css/src/scss/cadmin/variables/_alerts.scss b/packages/clay-css/src/scss/cadmin/variables/_alerts.scss
index 63afffdee3..faeb21b5bb 100644
--- a/packages/clay-css/src/scss/cadmin/variables/_alerts.scss
+++ b/packages/clay-css/src/scss/cadmin/variables/_alerts.scss
@@ -311,7 +311,7 @@ $cadmin-alert-feedback: map-deep-merge(
 	$cadmin-alert-feedback
 );
 
-// Alert Variants
+// .alert-primary
 
 $cadmin-alert-primary-bg: $cadmin-primary-l3 !default;
 $cadmin-alert-primary-border-color: $cadmin-primary-l1 !default;
@@ -336,6 +336,34 @@ $cadmin-alert-primary-btn: map-deep-merge(
 	$cadmin-alert-primary-btn
 );
 
+$cadmin-alert-primary: () !default;
+$cadmin-alert-primary: map-deep-merge(
+	(
+		background-color: $cadmin-alert-primary-bg,
+		border-color: $cadmin-alert-primary-border-color,
+		color: $cadmin-alert-primary-color,
+		close: (
+			color: $cadmin-alert-primary-close-color,
+			hover: (
+				color: $cadmin-alert-primary-close-hover-color,
+			),
+		),
+		lead: (
+			color: $cadmin-alert-primary-lead-color,
+		),
+		link: (
+			color: $cadmin-alert-primary-link-color,
+			hover: (
+				color: $cadmin-alert-primary-link-hover-color,
+			),
+		),
+		alert-btn: $cadmin-alert-primary-btn,
+	),
+	$cadmin-alert-primary
+);
+
+// .alert-secondary
+
 $cadmin-alert-secondary-bg: $cadmin-secondary-l3 !default;
 $cadmin-alert-secondary-border-color: $cadmin-secondary-l1 !default;
 $cadmin-alert-secondary-color: $cadmin-secondary !default;
@@ -360,6 +388,34 @@ $cadmin-alert-secondary-btn: map-deep-merge(
 	$cadmin-alert-secondary-btn
 );
 
+$cadmin-alert-secondary: () !default;
+$cadmin-alert-secondary: map-deep-merge(
+	(
+		background-color: $cadmin-alert-secondary-bg,
+		border-color: $cadmin-alert-secondary-border-color,
+		color: $cadmin-alert-secondary-color,
+		close: (
+			color: $cadmin-alert-secondary-close-color,
+			hover: (
+				color: $cadmin-alert-secondary-close-hover-color,
+			),
+		),
+		lead: (
+			color: $cadmin-alert-secondary-lead-color,
+		),
+		link: (
+			color: $cadmin-alert-secondary-link-color,
+			hover: (
+				color: $cadmin-alert-secondary-link-hover-color,
+			),
+		),
+		alert-btn: $cadmin-alert-secondary-btn,
+	),
+	$cadmin-alert-secondary
+);
+
+// .alert-success
+
 $cadmin-alert-success-bg: $cadmin-success-l2 !default;
 $cadmin-alert-success-border-color: $cadmin-success-l1 !default;
 $cadmin-alert-success-color: $cadmin-success !default;
@@ -383,6 +439,34 @@ $cadmin-alert-success-btn: map-deep-merge(
 	$cadmin-alert-success-btn
 );
 
+$cadmin-alert-success: () !default;
+$cadmin-alert-success: map-deep-merge(
+	(
+		background-color: $cadmin-alert-success-bg,
+		border-color: $cadmin-alert-success-border-color,
+		color: $cadmin-alert-success-color,
+		close: (
+			color: $cadmin-alert-success-close-color,
+			hover: (
+				color: $cadmin-alert-success-close-hover-color,
+			),
+		),
+		lead: (
+			color: $cadmin-alert-success-lead-color,
+		),
+		link: (
+			color: $cadmin-alert-success-link-color,
+			hover: (
+				color: $cadmin-alert-success-link-hover-color,
+			),
+		),
+		alert-btn: $cadmin-alert-success-btn,
+	),
+	$cadmin-alert-success
+);
+
+// .alert-info
+
 $cadmin-alert-info-bg: $cadmin-info-l2 !default;
 $cadmin-alert-info-border-color: $cadmin-info-l1 !default;
 $cadmin-alert-info-color: $cadmin-info !default;
@@ -407,6 +491,34 @@ $cadmin-alert-info-btn: map-deep-merge(
 	$cadmin-alert-info-btn
 );
 
+$cadmin-alert-info: () !default;
+$cadmin-alert-info: map-deep-merge(
+	(
+		background-color: $cadmin-alert-info-bg,
+		border-color: $cadmin-alert-info-border-color,
+		color: $cadmin-alert-info-color,
+		close: (
+			color: $cadmin-alert-info-close-color,
+			hover: (
+				color: $cadmin-alert-info-close-hover-color,
+			),
+		),
+		lead: (
+			color: $cadmin-alert-info-lead-color,
+		),
+		link: (
+			color: $cadmin-alert-info-link-color,
+			hover: (
+				color: $cadmin-alert-info-link-hover-color,
+			),
+		),
+		alert-btn: $cadmin-alert-info-btn,
+	),
+	$cadmin-alert-info
+);
+
+// .alert-warning
+
 $cadmin-alert-warning-bg: $cadmin-warning-l2 !default;
 $cadmin-alert-warning-border-color: $cadmin-warning-l1 !default;
 $cadmin-alert-warning-color: $cadmin-warning !default;
@@ -430,6 +542,34 @@ $cadmin-alert-warning-btn: map-deep-merge(
 	$cadmin-alert-warning-btn
 );
 
+$cadmin-alert-warning: () !default;
+$cadmin-alert-warning: map-deep-merge(
+	(
+		background-color: $cadmin-alert-warning-bg,
+		border-color: $cadmin-alert-warning-border-color,
+		color: $cadmin-alert-warning-color,
+		close: (
+			color: $cadmin-alert-warning-close-color,
+			hover: (
+				color: $cadmin-alert-warning-close-hover-color,
+			),
+		),
+		lead: (
+			color: $cadmin-alert-warning-lead-color,
+		),
+		link: (
+			color: $cadmin-alert-warning-link-color,
+			hover: (
+				color: $cadmin-alert-warning-link-hover-color,
+			),
+		),
+		alert-btn: $cadmin-alert-warning-btn,
+	),
+	$cadmin-alert-warning
+);
+
+// .alert-danger
+
 $cadmin-alert-danger-bg: $cadmin-danger-l2 !default;
 $cadmin-alert-danger-border-color: $cadmin-danger-l1 !default;
 $cadmin-alert-danger-color: $cadmin-danger !default;
@@ -453,6 +593,34 @@ $cadmin-alert-danger-btn: map-deep-merge(
 	$cadmin-alert-danger-btn
 );
 
+$cadmin-alert-danger: () !default;
+$cadmin-alert-danger: map-deep-merge(
+	(
+		background-color: $cadmin-alert-danger-bg,
+		border-color: $cadmin-alert-danger-border-color,
+		color: $cadmin-alert-danger-color,
+		close: (
+			color: $cadmin-alert-danger-close-color,
+			hover: (
+				color: $cadmin-alert-danger-close-hover-color,
+			),
+		),
+		lead: (
+			color: $cadmin-alert-danger-lead-color,
+		),
+		link: (
+			color: $cadmin-alert-danger-link-color,
+			hover: (
+				color: $cadmin-alert-danger-link-hover-color,
+			),
+		),
+		alert-btn: $cadmin-alert-danger-btn,
+	),
+	$cadmin-alert-danger
+);
+
+// .alert-light
+
 $cadmin-alert-light-bg: $cadmin-light-l2 !default;
 $cadmin-alert-light-border-color: $cadmin-light-l1 !default;
 $cadmin-alert-light-color: $cadmin-dark !default;
@@ -477,6 +645,34 @@ $cadmin-alert-light-btn: map-deep-merge(
 	$cadmin-alert-light-btn
 );
 
+$cadmin-alert-light: () !default;
+$cadmin-alert-light: map-deep-merge(
+	(
+		background-color: $cadmin-alert-light-bg,
+		border-color: $cadmin-alert-light-border-color,
+		color: $cadmin-alert-light-color,
+		close: (
+			color: $cadmin-alert-light-close-color,
+			hover: (
+				color: $cadmin-alert-light-close-hover-color,
+			),
+		),
+		lead: (
+			color: $cadmin-alert-light-lead-color,
+		),
+		link: (
+			color: $cadmin-alert-light-link-color,
+			hover: (
+				color: $cadmin-alert-light-link-hover-color,
+			),
+		),
+		alert-btn: $cadmin-alert-light-btn,
+	),
+	$cadmin-alert-light
+);
+
+// .alert-dark
+
 $cadmin-alert-dark-bg: $cadmin-dark-l2 !default;
 $cadmin-alert-dark-border-color: $cadmin-dark-l1 !default;
 $cadmin-alert-dark-color: $cadmin-light !default;
@@ -501,6 +697,32 @@ $cadmin-alert-dark-btn: map-deep-merge(
 	$cadmin-alert-dark-btn
 );
 
+$cadmin-alert-dark: () !default;
+$cadmin-alert-dark: map-deep-merge(
+	(
+		background-color: $cadmin-alert-dark-bg,
+		border-color: $cadmin-alert-dark-border-color,
+		color: $cadmin-alert-dark-color,
+		close: (
+			color: $cadmin-alert-dark-close-color,
+			hover: (
+				color: $cadmin-alert-dark-close-hover-color,
+			),
+		),
+		lead: (
+			color: $cadmin-alert-dark-lead-color,
+		),
+		link: (
+			color: $cadmin-alert-dark-link-color,
+			hover: (
+				color: $cadmin-alert-dark-link-hover-color,
+			),
+		),
+		alert-btn: $cadmin-alert-dark-btn,
+	),
+	$cadmin-alert-dark
+);
+
 $cadmin-alert-palette: () !default;
 $cadmin-alert-palette: map-deep-merge(
 	(