diff --git a/packages/clay-css/src/scss/cadmin/components/_modals.scss b/packages/clay-css/src/scss/cadmin/components/_modals.scss
index ff573cf02c..95f26837e6 100644
--- a/packages/clay-css/src/scss/cadmin/components/_modals.scss
+++ b/packages/clay-css/src/scss/cadmin/components/_modals.scss
@@ -10,15 +10,7 @@
 
 .modal,
 &.modal {
-	display: none;
-	height: 100%;
-	left: 0;
-	outline: 0;
-	overflow: hidden;
-	position: fixed;
-	top: 0;
-	width: 100%;
-	z-index: $cadmin-zindex-modal;
+	@include clay-css($cadmin-modal);
 }
 
 .modal-dialog {
@@ -122,67 +114,44 @@
 
 .modal-backdrop,
 &.modal-backdrop {
-	background-color: $cadmin-modal-backdrop-bg;
-	height: 100vh;
-	left: 0;
-	position: fixed;
-	top: 0;
-	width: 100vw;
-	z-index: $cadmin-zindex-modal-backdrop;
-
-	&.fade {
-		opacity: 0;
-	}
-
-	&.show {
-		opacity: $cadmin-modal-backdrop-opacity;
-	}
+	@include clay-map-to-css($cadmin-modal-backdrop);
 }
 
 .modal-content {
-	background-clip: padding-box;
-	background-color: $cadmin-modal-content-bg;
-	border: $cadmin-modal-content-border-width solid
-		$cadmin-modal-content-border-color;
-
-	@include border-radius($cadmin-modal-content-border-radius);
-	@include box-shadow($cadmin-modal-content-box-shadow-xs);
-
-	color: $cadmin-modal-content-color;
-	display: flex;
-	flex-direction: column;
-	outline: 0;
-	overflow: hidden;
-	pointer-events: auto;
-	position: relative;
-	width: 100%;
+	@include clay-map-to-css($cadmin-modal-content);
 }
 
 .modal-header,
 &.modal-header {
-	$breakpoint-down: map-get($cadmin-modal-header, breakpoint-down);
+	$_modal-header: setter(map-get($cadmin-modal, modal-header), ());
+
+	$_breakpoint-down: map-get($_modal-header, breakpoint-down);
+	$_mobile: map-get($_modal-header, mobile);
 
-	@include clay-css($cadmin-modal-header);
+	$_modal-header: map-remove($_modal-header, breakpoint-down, mobile);
 
-	@include clay-scale-component(null, $breakpoint-down) {
-		$mobile: setter(map-get($cadmin-modal-header, mobile), ());
+	@include clay-map-to-css($_modal-header);
 
-		@include clay-css($mobile);
+	@include clay-scale-component(null, $_breakpoint-down) {
+		@include clay-css(map-get($_modal-header, mobile));
 	}
 }
 
 .modal-body,
 &.modal-body {
-	@include clay-css($cadmin-modal-body);
-
-	&.inline-scroller {
-		$inline-scroller: setter(
-			map-get($cadmin-modal-body, inline-scroller),
-			()
-		);
+	$_modal-body: setter(map-get($cadmin-modal, modal-body), ());
+	$_modal-body: map-deep-merge(
+		$_modal-body,
+		(
+			'&.inline-scroller':
+				map-merge(
+					setter(map-get($_modal-body, '&.inline-scroller'), ()),
+					setter(map-get($_modal-body, inline-scroller), ())
+				),
+		)
+	);
 
-		@include clay-css($inline-scroller);
-	}
+	@include clay-map-to-css($_modal-body);
 }
 
 .modal-body-flush,
@@ -192,32 +161,11 @@
 
 .modal-footer,
 &.modal-footer {
-	align-items: center;
-	background-color: $cadmin-modal-footer-bg;
-	border-top: $cadmin-modal-footer-border-width solid
-		$cadmin-modal-footer-border-color;
-
-	@include border-bottom-radius($cadmin-modal-content-inner-border-radius);
-	@include box-shadow($cadmin-modal-footer-box-shadow);
-
-	color: $cadmin-modal-footer-color;
-	display: flex;
-	flex-shrink: 0;
-	flex-wrap: wrap;
-	height: $cadmin-modal-footer-height;
-	justify-content: flex-start;
-	padding-bottom: $cadmin-modal-footer-padding-y;
-	padding-left: $cadmin-modal-footer-padding-x;
-	padding-right: $cadmin-modal-footer-padding-x;
-	padding-top: $cadmin-modal-footer-padding-y;
+	@include clay-map-to-css(map-get($cadmin-modal, modal-footer));
 
 	@include clay-scale-component {
 		height: $cadmin-modal-footer-height-mobile;
 	}
-
-	> * {
-		margin: $cadmin-modal-footer-margin-between * 0.5;
-	}
 }
 
 // Modal Item
@@ -272,15 +220,7 @@
 // Modal Title
 
 .modal-title {
-	flex-grow: 1;
-	font-size: $cadmin-modal-title-font-size;
-	font-weight: $cadmin-modal-title-font-weight;
-	line-height: $cadmin-modal-title-line-height;
-	margin-bottom: 0;
-	overflow: hidden;
-	text-align: $cadmin-modal-title-text-align;
-	text-overflow: ellipsis;
-	white-space: nowrap;
+	@include clay-map-to-css(map-get($cadmin-modal, modal-title));
 
 	@include clay-scale-component {
 		font-size: $cadmin-modal-title-font-size-mobile;
@@ -288,11 +228,7 @@
 }
 
 .modal-title-indicator {
-	display: inline-block;
-	font-size: $cadmin-modal-title-indicator-font-size;
-	margin-right: $cadmin-modal-title-indicator-spacer-x;
-	margin-top: -0.2em;
-	vertical-align: middle;
+	@include clay-map-to-css(map-get($cadmin-modal, modal-title-indicator));
 }
 
 // Modal Subtitle
@@ -314,13 +250,7 @@
 &.modal,
 .modal {
 	.close {
-		&:first-child {
-			margin-left: math-sign($cadmin-modal-close-spacer-x);
-		}
-
-		&:last-child {
-			margin-right: math-sign($cadmin-modal-close-spacer-x);
-		}
+		@include clay-close(map-get($cadmin-modal, close));
 	}
 }
 
diff --git a/packages/clay-css/src/scss/cadmin/variables/_modals.scss b/packages/clay-css/src/scss/cadmin/variables/_modals.scss
index b6ac920626..8054420a4e 100644
--- a/packages/clay-css/src/scss/cadmin/variables/_modals.scss
+++ b/packages/clay-css/src/scss/cadmin/variables/_modals.scss
@@ -1,6 +1,26 @@
 $cadmin-modal-backdrop-bg: $cadmin-gray-800 !default;
 $cadmin-modal-backdrop-opacity: 0.8 !default;
 
+$cadmin-modal-backdrop: () !default;
+$cadmin-modal-backdrop: map-deep-merge(
+	(
+		background-color: $cadmin-modal-backdrop-bg,
+		height: 100vh,
+		left: 0,
+		position: fixed,
+		top: 0,
+		width: 100vw,
+		z-index: $cadmin-zindex-modal-backdrop,
+		'&.fade': (
+			opacity: 0,
+		),
+		'&.show': (
+			opacity: $cadmin-modal-backdrop-opacity,
+		),
+	),
+	$cadmin-modal-backdrop
+);
+
 // Modal Dialog
 
 $cadmin-modal-dialog-margin: 8px !default;
@@ -26,6 +46,27 @@ $cadmin-modal-content-inner-border-radius: calc(
 $cadmin-modal-content-box-shadow-xs: 0 0 3px 1px rgba(0, 0, 0, 0.2) !default;
 $cadmin-modal-content-box-shadow-sm-up: 0 8px 16px rgba($cadmin-black, 0.5) !default;
 
+$cadmin-modal-content: () !default;
+$cadmin-modal-content: map-deep-merge(
+	(
+		background-clip: padding-box,
+		background-color: $cadmin-modal-content-bg,
+		border-radius: clay-enable-rounded($cadmin-modal-content-border-radius),
+		border: $cadmin-modal-content-border-width solid
+			$cadmin-modal-content-border-color,
+		box-shadow: clay-enable-shadows($cadmin-modal-content-box-shadow-xs),
+		color: $cadmin-modal-content-color,
+		display: flex,
+		flex-direction: column,
+		outline: 0,
+		overflow: hidden,
+		pointer-events: auto,
+		position: relative,
+		width: 100%,
+	),
+	$cadmin-modal-content
+);
+
 // .modal-header
 
 $cadmin-modal-header-bg: null !default;
@@ -85,7 +126,7 @@ $cadmin-modal-body: map-deep-merge(
 		margin-top: math-sign($cadmin-modal-content-border-width),
 		padding: $cadmin-modal-inner-padding,
 		position: relative,
-		inline-scroller: (
+		'&.inline-scroller': (
 			max-height: 320px,
 			-webkit-overflow-scrolling: touch,
 			overflow: auto,
@@ -257,6 +298,76 @@ $cadmin-modal-height-full-modal-content-sm-up: map-merge(
 	$cadmin-modal-height-full-modal-content-sm-up
 );
 
+// Modal
+
+$cadmin-modal: () !default;
+$cadmin-modal: map-deep-merge(
+	(
+		display: none,
+		height: 100%,
+		left: 0,
+		outline: 0,
+		overflow: hidden,
+		position: fixed,
+		top: 0,
+		width: 100%,
+		z-index: $cadmin-zindex-modal,
+		close: (
+			'&:first-child': (
+				margin-left: math-sign($cadmin-modal-close-spacer-x),
+			),
+			'&:last-child': (
+				margin-right: math-sign($cadmin-modal-close-spacer-x),
+			),
+		),
+		modal-header: $cadmin-modal-header,
+		modal-body: $cadmin-modal-body,
+		modal-footer: (
+			align-items: center,
+			background-color: $cadmin-modal-footer-bg,
+			border-bottom-left-radius:
+				clay-enable-rounded($cadmin-modal-content-inner-border-radius),
+			border-bottom-right-radius:
+				clay-enable-rounded($cadmin-modal-content-inner-border-radius),
+			border-top: $cadmin-modal-footer-border-width solid
+				$cadmin-modal-footer-border-color,
+			box-shadow: clay-enable-shadows($cadmin-modal-footer-box-shadow),
+			color: $cadmin-modal-footer-color,
+			display: flex,
+			flex-shrink: 0,
+			flex-wrap: wrap,
+			height: $cadmin-modal-footer-height,
+			justify-content: flex-start,
+			padding-bottom: $cadmin-modal-footer-padding-y,
+			padding-left: $cadmin-modal-footer-padding-x,
+			padding-right: $cadmin-modal-footer-padding-x,
+			padding-top: $cadmin-modal-footer-padding-y,
+			'> *': (
+				margin: calc(#{$cadmin-modal-footer-margin-between} * 0.5),
+			),
+		),
+		modal-title: (
+			flex-grow: 1,
+			font-size: $cadmin-modal-title-font-size,
+			font-weight: $cadmin-modal-title-font-weight,
+			line-height: $cadmin-modal-title-line-height,
+			margin-bottom: 0,
+			overflow: hidden,
+			text-align: $cadmin-modal-title-text-align,
+			text-overflow: ellipsis,
+			white-space: nowrap,
+		),
+		modal-title-indicator: (
+			display: inline-block,
+			font-size: $cadmin-modal-title-indicator-font-size,
+			margin-right: $cadmin-modal-title-indicator-spacer-x,
+			margin-top: -0.2em,
+			vertical-align: middle,
+		),
+	),
+	$cadmin-modal
+);
+
 // Modal Success
 
 $cadmin-modal-success: () !default;