@clayui/css 3.54.0 → 3.57.0

package/src/scss/variables/_alerts.scss

@@ -410,8 +410,16 @@ $alert-autofit-row: map-deep-merge(
 
 // Alert Color Levels
 
+/// @deprecated as of v3.x with no replacement, this color modifier is too specific to support a variety of colors
+
 $alert-bg-level: -10 !default;
+
+/// @deprecated as of v3.x with no replacement, this color modifier is too specific to support a variety of colors
+
 $alert-border-level: -9 !default;
+
+/// @deprecated as of v3.x with no replacement, this color modifier is too specific to support a variety of colors
+
 $alert-color-level: 6 !default;
 
 // Alert Feedback

package/src/scss/variables/_breadcrumbs.scss

@@ -1,3 +1,5 @@
+// .breadcrumb
+
 $breadcrumb-bg: $gray-200 !default;
 $breadcrumb-border-radius: $border-radius !default;
 $breadcrumb-font-size: null !default;
@@ -7,6 +9,36 @@ $breadcrumb-padding-x: 1rem !default;
 $breadcrumb-padding-y: 0.75rem !default;
 $breadcrumb-text-transform: null !default;
 
+$breadcrumb: () !default;
+$breadcrumb: map-merge(
+	(
+		background-color: $breadcrumb-bg,
+		border-radius: clay-enable-rounded($breadcrumb-border-radius),
+		display: flex,
+		flex-wrap: wrap,
+		font-size: $breadcrumb-font-size,
+		list-style: none,
+		margin-bottom: $breadcrumb-margin-bottom,
+		padding: $breadcrumb-padding-y $breadcrumb-padding-x,
+	),
+	$breadcrumb
+);
+
+// .breadcrumb-item + .breadcrumb-item::before
+
+$breadcrumb-divider: quote('/') !default;
+
+$breadcrumb-divider-color: $gray-600 !default;
+$breadcrumb-divider-font-family: null !default;
+$breadcrumb-divider-font-weight: null !default;
+
+$breadcrumb-divider-svg-icon: clay-icon(
+	angle-right,
+	$breadcrumb-divider-color
+) !default;
+$breadcrumb-divider-svg-icon-height: 0.75em !default;
+$breadcrumb-divider-svg-icon-width: $breadcrumb-divider-svg-icon-height !default;
+
 // Breadcrumb Item
 
 $breadcrumb-item-padding: 0.5rem !default;
@@ -14,6 +46,50 @@ $breadcrumb-item-padding: 0.5rem !default;
 $breadcrumb-active-color: $gray-600 !default;
 $breadcrumb-active-font-weight: null !default;
 
+$breadcrumb-item: () !default;
+$breadcrumb-item: map-merge(
+	(
+		font-size: $breadcrumb-font-size,
+		font-weight: $breadcrumb-font-weight,
+		margin-right: 0.5em,
+		position: relative,
+		active: (
+			color: $breadcrumb-active-color,
+			font-weight: $breadcrumb-active-font-weight,
+		),
+		breadcrumb-item: (
+			padding-left: 1em,
+			before: (
+				color: $breadcrumb-divider-color,
+				display: block,
+				float: left,
+				background-image: $breadcrumb-divider-svg-icon,
+				background-repeat: no-repeat,
+				background-size: 100%,
+				content: '',
+				height: $breadcrumb-divider-svg-icon-height,
+				left: 0,
+				margin-top:
+					calc(#{math-sign($breadcrumb-divider-svg-icon-height)} / 2),
+				padding: 0,
+				position: absolute,
+				top: 50%,
+				width: $breadcrumb-divider-svg-icon-width,
+			),
+		),
+		dropdown-toggle: (
+			text-decoration: none,
+			hover: (
+				text-decoration: none,
+			),
+			focus: (
+				text-decoration: none,
+			),
+		),
+	),
+	$breadcrumb-item
+);
+
 // Breadcrumb Text Truncate
 
 $breadcrumb-text-truncate-icon-spacer-x: 0.875rem !default;
@@ -22,6 +98,20 @@ $breadcrumb-text-truncate-max-width: 18.75rem -
 $breadcrumb-text-truncate-max-width-mobile: 9.375rem -
 	$breadcrumb-text-truncate-icon-spacer-x !default;
 
+$breadcrumb-text-truncate: () !default;
+$breadcrumb-text-truncate: map-merge(
+	(
+		display: inline-block,
+		max-width: $breadcrumb-text-truncate-max-width,
+		overflow: hidden,
+		text-decoration: inherit,
+		text-overflow: ellipsis,
+		vertical-align: bottom,
+		white-space: nowrap,
+	),
+	$breadcrumb-text-truncate
+);
+
 // Breadcrumb Link
 
 $breadcrumb-link-color: $link-color !default;
@@ -48,18 +138,3 @@ $breadcrumb-link: map-deep-merge(
 	),
 	$breadcrumb-link
 );
-
-// Breadcrumb Divider
-
-$breadcrumb-divider: quote('/') !default;
-
-$breadcrumb-divider-color: $gray-600 !default;
-$breadcrumb-divider-font-family: null !default;
-$breadcrumb-divider-font-weight: null !default;
-
-$breadcrumb-divider-svg-icon: clay-icon(
-	angle-right,
-	$breadcrumb-divider-color
-) !default;
-$breadcrumb-divider-svg-icon-height: 0.75em !default;
-$breadcrumb-divider-svg-icon-width: $breadcrumb-divider-svg-icon-height !default;

package/src/scss/variables/_buttons.scss

@@ -1,6 +1,7 @@
 $btn-border-width: $input-btn-border-width !default;
 $btn-border-radius: $border-radius !default;
-$btn-box-shadow: inset 0 1px 0 rgba($white, 0.15), 0 1px 1px rgba($black, 0.075) !default;
+$btn-box-shadow: #{inset 0 1px 0 rgba($white, 0.15),
+	0 1px 1px rgba($black, 0.075)} !default;
 $btn-cursor: $link-cursor !default;
 $btn-font-family: $input-btn-font-family !default;
 $btn-font-size: $input-btn-font-size !default;
@@ -38,7 +39,7 @@ $btn: map-deep-merge(
 		border-style: solid,
 		border-width: $btn-border-width,
 		border-radius: clay-enable-rounded($btn-border-radius),
-		box-shadow: clay-enable-shadows([$btn-box-shadow]),
+		box-shadow: clay-enable-shadows($btn-box-shadow),
 		color: $body-color,
 		cursor: $btn-cursor,
 		display: inline-block,
@@ -72,13 +73,13 @@ $btn: map-deep-merge(
 			outline: 0,
 		),
 		active: (
-			box-shadow: clay-enable-shadows([$btn-active-box-shadow]),
+			box-shadow: clay-enable-shadows($btn-active-box-shadow),
 			focus: (
-				box-shadow: clay-enable-shadows([$btn-focus-box-shadow]),
+				box-shadow: clay-enable-shadows($btn-focus-box-shadow),
 			),
 		),
 		active-class: (
-			box-shadow: clay-enable-shadows([$btn-active-box-shadow]),
+			box-shadow: clay-enable-shadows($btn-active-box-shadow),
 		),
 		disabled: (
 			cursor: $btn-disabled-cursor,
@@ -352,7 +353,7 @@ $btn-primary: map-deep-merge(
 		background-color: $primary,
 		background-image: clay-enable-gradients($primary),
 		border-color: $primary,
-		box-shadow: clay-enable-shadows([$btn-box-shadow]),
+		box-shadow: clay-enable-shadows($btn-box-shadow),
 		color: color-yiq($primary),
 		hover: (
 			background-color: clay-darken($primary, 7.5%),
@@ -366,10 +367,11 @@ $btn-primary: map-deep-merge(
 			border-color: clay-darken($primary, 10%),
 			box-shadow:
 				clay-enable-shadows(
-					[ $btn-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($primary), $primary, 15%), 0.5),
+					#{$btn-box-shadow,
+					0 0 0 $btn-focus-width
+						rgba(clay-mix(color-yiq($primary), $primary, 15%), 0.5)},
 					0 0 0 $btn-focus-width
 						rgba(clay-mix(color-yiq($primary), $primary, 15%), 0.5)
-						]
 				),
 			color: color-yiq(clay-darken($primary, 7.5%)),
 		),
@@ -381,13 +383,17 @@ $btn-primary: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($primary), $primary, 15%), 0.5),
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width
+							rgba(
+								clay-mix(color-yiq($primary), $primary, 15%),
+								0.5
+							)},
 						0 0 0 $btn-focus-width
 							rgba(
 								clay-mix(color-yiq($primary), $primary, 15%),
 								0.5
 							)
-							]
 					),
 			),
 		),
@@ -408,7 +414,7 @@ $btn-secondary: map-deep-merge(
 		background-color: $secondary,
 		background-image: clay-enable-gradients($secondary),
 		border-color: $secondary,
-		box-shadow: clay-enable-shadows([$btn-box-shadow]),
+		box-shadow: clay-enable-shadows($btn-box-shadow),
 		color: color-yiq($secondary),
 		hover: (
 			background-color: clay-darken($secondary, 7.5%),
@@ -424,13 +430,17 @@ $btn-secondary: map-deep-merge(
 			border-color: clay-darken($secondary, 10%),
 			box-shadow:
 				clay-enable-shadows(
-					[ $btn-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($secondary), $secondary, 15%), 0.5),
+					#{$btn-box-shadow,
 					0 0 0 $btn-focus-width
 						rgba(
 							clay-mix(color-yiq($secondary), $secondary, 15%),
 							0.5
-						),
-					]
+						)},
+					0 0 0 $btn-focus-width
+						rgba(
+							clay-mix(color-yiq($secondary), $secondary, 15%),
+							0.5
+						)
 				),
 			color: color-yiq(clay-darken($secondary, 7.5%)),
 		),
@@ -442,7 +452,16 @@ $btn-secondary: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($secondary), $secondary, 15%), 0.5),
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width
+							rgba(
+								clay-mix(
+									color-yiq($secondary),
+									$secondary,
+									15%
+								),
+								0.5
+							)},
 						0 0 0 $btn-focus-width
 							rgba(
 								clay-mix(
@@ -452,7 +471,6 @@ $btn-secondary: map-deep-merge(
 								),
 								0.5
 							)
-							]
 					),
 			),
 		),
@@ -473,7 +491,7 @@ $btn-success: map-deep-merge(
 		background-color: $success,
 		background-image: clay-enable-gradients($success),
 		border-color: $success,
-		box-shadow: clay-enable-shadows([$btn-box-shadow]),
+		box-shadow: clay-enable-shadows($btn-box-shadow),
 		color: color-yiq($success),
 		hover: (
 			background-color: clay-darken($success, 7.5%),
@@ -487,10 +505,11 @@ $btn-success: map-deep-merge(
 			border-color: clay-darken($success, 10%),
 			box-shadow:
 				clay-enable-shadows(
-					[ $btn-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($success), $success, 15%), 0.5),
+					#{$btn-box-shadow,
+					0 0 0 $btn-focus-width
+						rgba(clay-mix(color-yiq($success), $success, 15%), 0.5)},
 					0 0 0 $btn-focus-width
 						rgba(clay-mix(color-yiq($success), $success, 15%), 0.5)
-						]
 				),
 			color: color-yiq(clay-darken($success, 7.5%)),
 		),
@@ -502,13 +521,17 @@ $btn-success: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($success), $success, 15%), 0.5),
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width
+							rgba(
+								clay-mix(color-yiq($success), $success, 15%),
+								0.5
+							)},
 						0 0 0 $btn-focus-width
 							rgba(
 								clay-mix(color-yiq($success), $success, 15%),
 								0.5
 							)
-							]
 					),
 			),
 		),
@@ -529,7 +552,7 @@ $btn-info: map-deep-merge(
 		background-color: $info,
 		background-image: clay-enable-gradients($info),
 		border-color: $info,
-		box-shadow: clay-enable-shadows([$btn-box-shadow]),
+		box-shadow: clay-enable-shadows($btn-box-shadow),
 		color: color-yiq($info),
 		hover: (
 			background-color: clay-darken($info, 7.5%),
@@ -543,9 +566,11 @@ $btn-info: map-deep-merge(
 			border-color: clay-darken($info, 10%),
 			box-shadow:
 				clay-enable-shadows(
-					[ $btn-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($info), $info, 15%), 0.5),
+					#{$btn-box-shadow,
+					0 0 0 $btn-focus-width
+						rgba(clay-mix(color-yiq($info), $info, 15%), 0.5)},
 					0 0 0 $btn-focus-width
-						rgba(clay-mix(color-yiq($info), $info, 15%), 0.5) ]
+						rgba(clay-mix(color-yiq($info), $info, 15%), 0.5)
 				),
 			color: color-yiq(clay-darken($info, 7.5%)),
 		),
@@ -557,9 +582,11 @@ $btn-info: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($info), $info, 15%), 0.5),
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width
+							rgba(clay-mix(color-yiq($info), $info, 15%), 0.5)},
 						0 0 0 $btn-focus-width
-							rgba(clay-mix(color-yiq($info), $info, 15%), 0.5) ]
+							rgba(clay-mix(color-yiq($info), $info, 15%), 0.5)
 					),
 			),
 		),
@@ -580,7 +607,7 @@ $btn-warning: map-deep-merge(
 		background-color: $warning,
 		background-image: clay-enable-gradients($warning),
 		border-color: $warning,
-		box-shadow: clay-enable-shadows([$btn-box-shadow]),
+		box-shadow: clay-enable-shadows($btn-box-shadow),
 		color: color-yiq($warning),
 		hover: (
 			background-color: clay-darken($warning, 7.5%),
@@ -594,10 +621,11 @@ $btn-warning: map-deep-merge(
 			border-color: clay-darken($warning, 10%),
 			box-shadow:
 				clay-enable-shadows(
-					[ $btn-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($warning), $warning, 15%), 0.5),
+					#{$btn-box-shadow,
+					0 0 0 $btn-focus-width
+						rgba(clay-mix(color-yiq($warning), $warning, 15%), 0.5)},
 					0 0 0 $btn-focus-width
 						rgba(clay-mix(color-yiq($warning), $warning, 15%), 0.5)
-						]
 				),
 			color: color-yiq(clay-darken($warning, 7.5%)),
 		),
@@ -609,13 +637,17 @@ $btn-warning: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($warning), $warning, 15%), 0.5),
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width
+							rgba(
+								clay-mix(color-yiq($warning), $warning, 15%),
+								0.5
+							)},
 						0 0 0 $btn-focus-width
 							rgba(
 								clay-mix(color-yiq($warning), $warning, 15%),
 								0.5
 							)
-							]
 					),
 			),
 		),
@@ -635,7 +667,7 @@ $btn-danger: map-deep-merge(
 		background-color: $danger,
 		background-image: clay-enable-gradients($danger),
 		border-color: $danger,
-		box-shadow: clay-enable-shadows([$btn-box-shadow]),
+		box-shadow: clay-enable-shadows($btn-box-shadow),
 		color: color-yiq($danger),
 		hover: (
 			background-color: clay-darken($danger, 7.5%),
@@ -649,9 +681,11 @@ $btn-danger: map-deep-merge(
 			border-color: clay-darken($danger, 10%),
 			box-shadow:
 				clay-enable-shadows(
-					[ $btn-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($danger), $danger, 15%), 0.5),
+					#{$btn-box-shadow,
 					0 0 0 $btn-focus-width
-						rgba(clay-mix(color-yiq($danger), $danger, 15%), 0.5) ]
+						rgba(clay-mix(color-yiq($danger), $danger, 15%), 0.5)},
+					0 0 0 $btn-focus-width
+						rgba(clay-mix(color-yiq($danger), $danger, 15%), 0.5)
 				),
 			color: color-yiq(clay-darken($danger, 7.5%)),
 		),
@@ -663,13 +697,17 @@ $btn-danger: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($danger), $danger, 15%), 0.5),
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width
+							rgba(
+								clay-mix(color-yiq($danger), $danger, 15%),
+								0.5
+							)},
 						0 0 0 $btn-focus-width
 							rgba(
 								clay-mix(color-yiq($danger), $danger, 15%),
 								0.5
 							)
-							]
 					),
 			),
 		),
@@ -690,7 +728,7 @@ $btn-light: map-deep-merge(
 		background-color: $light,
 		background-image: clay-enable-gradients($light),
 		border-color: $light,
-		box-shadow: clay-enable-shadows([$btn-box-shadow]),
+		box-shadow: clay-enable-shadows($btn-box-shadow),
 		color: color-yiq($light),
 		hover: (
 			background-color: clay-darken($light, 7.5%),
@@ -704,9 +742,11 @@ $btn-light: map-deep-merge(
 			border-color: clay-darken($light, 10%),
 			box-shadow:
 				clay-enable-shadows(
-					[ $btn-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($light), $light, 15%), 0.5),
+					#{$btn-box-shadow,
 					0 0 0 $btn-focus-width
-						rgba(clay-mix(color-yiq($light), $light, 15%), 0.5) ]
+						rgba(clay-mix(color-yiq($light), $light, 15%), 0.5)},
+					0 0 0 $btn-focus-width
+						rgba(clay-mix(color-yiq($light), $light, 15%), 0.5)
 				),
 			color: color-yiq(clay-darken($light, 7.5%)),
 		),
@@ -718,10 +758,11 @@ $btn-light: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($light), $light, 15%), 0.5),
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width
+							rgba(clay-mix(color-yiq($light), $light, 15%), 0.5)},
 						0 0 0 $btn-focus-width
 							rgba(clay-mix(color-yiq($light), $light, 15%), 0.5)
-							]
 					),
 			),
 		),
@@ -741,7 +782,7 @@ $btn-dark: map-deep-merge(
 		background-color: $dark,
 		background-image: clay-enable-gradients($dark),
 		border-color: $dark,
-		box-shadow: clay-enable-shadows([$btn-box-shadow]),
+		box-shadow: clay-enable-shadows($btn-box-shadow),
 		color: color-yiq($dark),
 		hover: (
 			background-color: clay-darken($dark, 7.5%),
@@ -755,9 +796,11 @@ $btn-dark: map-deep-merge(
 			border-color: clay-darken($dark, 10%),
 			box-shadow:
 				clay-enable-shadows(
-					[ $btn-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($dark), $dark, 15%), 0.5),
+					#{$btn-box-shadow,
 					0 0 0 $btn-focus-width
-						rgba(clay-mix(color-yiq($dark), $dark, 15%), 0.5) ]
+						rgba(clay-mix(color-yiq($dark), $dark, 15%), 0.5)},
+					0 0 0 $btn-focus-width
+						rgba(clay-mix(color-yiq($dark), $dark, 15%), 0.5)
 				),
 			color: color-yiq(clay-darken($dark, 7.5%)),
 		),
@@ -769,9 +812,11 @@ $btn-dark: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba(clay-mix(color-yiq($dark), $dark, 15%), 0.5),
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width
+							rgba(clay-mix(color-yiq($dark), $dark, 15%), 0.5)},
 						0 0 0 $btn-focus-width
-							rgba(clay-mix(color-yiq($dark), $dark, 15%), 0.5) ]
+							rgba(clay-mix(color-yiq($dark), $dark, 15%), 0.5)
 					),
 			),
 		),
@@ -792,7 +837,7 @@ $btn-link: () !default;
 $btn-link: map-deep-merge(
 	(
 		border-radius: 1px,
-		box-shadow: clay-enable-shadows([none]),
+		box-shadow: clay-enable-shadows(none),
 		color: $link-color,
 		font-weight: $font-weight-normal,
 		text-decoration: $link-decoration,
@@ -804,9 +849,6 @@ $btn-link: map-deep-merge(
 			box-shadow: $btn-focus-box-shadow,
 			text-decoration: $link-decoration,
 		),
-		active: (
-			box-shadow: clay-enable-shadows([none]),
-		),
 		disabled: (
 			box-shadow: none,
 			color: $btn-link-disabled-color,
@@ -854,8 +896,9 @@ $btn-outline-primary: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba($primary, 0.5),
-						$c-unset ]
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width rgba($primary, 0.5)},
+						$c-unset
 					),
 			),
 		),
@@ -887,8 +930,9 @@ $btn-outline-secondary: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba($secondary, 0.5),
-						0 0 0 $btn-focus-width rgba($secondary, 0.5) ]
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width rgba($secondary, 0.5)},
+						0 0 0 $btn-focus-width rgba($secondary, 0.5)
 					),
 			),
 		),
@@ -920,8 +964,9 @@ $btn-outline-success: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba($success, 0.5),
-						0 0 0 $btn-focus-width rgba($success, 0.5) ]
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width rgba($success, 0.5)},
+						0 0 0 $btn-focus-width rgba($success, 0.5)
 					),
 			),
 		),
@@ -953,8 +998,9 @@ $btn-outline-info: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba($info, 0.5),
-						0 0 0 $btn-focus-width rgba($info, 0.5) ]
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width rgba($info, 0.5)},
+						0 0 0 $btn-focus-width rgba($info, 0.5)
 					),
 			),
 		),
@@ -986,8 +1032,9 @@ $btn-outline-warning: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba($warning, 0.5),
-						0 0 0 $btn-focus-width rgba($warning, 0.5) ]
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width rgba($warning, 0.5)},
+						0 0 0 $btn-focus-width rgba($warning, 0.5)
 					),
 			),
 		),
@@ -1019,8 +1066,9 @@ $btn-outline-danger: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba($danger, 0.5),
-						0 0 0 $btn-focus-width rgba($danger, 0.5) ]
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width rgba($danger, 0.5)},
+						0 0 0 $btn-focus-width rgba($danger, 0.5)
 					),
 			),
 		),
@@ -1052,8 +1100,9 @@ $btn-outline-light: map-deep-merge(
 			focus: (
 				box-shadow:
 					clay-enable-shadows(
-						[ $btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba($light, 0.5),
-						0 0 0 $btn-focus-width rgba($light, 0.5) ]
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width rgba($light, 0.5)},
+						0 0 0 $btn-focus-width rgba($light, 0.5)
 					),
 			),
 		),
@@ -1084,9 +1133,9 @@ $btn-outline-dark: map-deep-merge(
 			color: color-yiq($dark),
 			focus: (
 				box-shadow:
-					if(
-						$enable-shadows and $btn-active-box-shadow != none,
-						$btn-active-box-shadow#{','} 0 0 0 $btn-focus-width rgba($dark, 0.5),
+					clay-enable-shadows(
+						#{$btn-active-box-shadow,
+						0 0 0 $btn-focus-width rgba($dark, 0.5)},
 						0 0 0 $btn-focus-width rgba($dark, 0.5)
 					),
 			),

package/src/scss/variables/_cards.scss

@@ -951,7 +951,7 @@ $card-type-template-after-highlight: () !default;
 $card-type-template-aspect-ratio: () !default;
 $card-type-template-aspect-ratio: map-deep-merge(
 	(
-		border-width: 0,
+		border-width: 0px,
 		color: $gray-600,
 		horizontal: 16,
 		text-align: center,

package/src/scss/variables/_date-picker.scss

@@ -170,7 +170,7 @@ $date-picker-calendar-item: map-deep-merge(
 	(
 		align-items: center,
 		bg: transparent,
-		border-width: 0,
+		border-width: 0px,
 		disabled-cursor: $disabled-cursor,
 		display: inline-flex,
 		flex-shrink: 0,

package/src/scss/variables/_dropdowns.scss

@@ -165,8 +165,8 @@ $dropdown-item-base: () !default;
 $dropdown-item-base: map-deep-merge(
 	(
 		background-color: transparent,
-		border-radius: 0,
-		border-width: 0,
+		border-radius: 0px,
+		border-width: 0px,
 		clear: both,
 		color: $dropdown-link-color,
 		cursor: $link-cursor,
@@ -405,7 +405,7 @@ $dropdown-divider-bg: $gray-200 !default;
 
 /// @deprecated as of v3.x use map $dropdown-divider instead
 
-$dropdown-divider-margin-y: $spacer * 0.5 !default;
+$dropdown-divider-margin-y: 0.5rem !default;
 
 $dropdown-divider: () !default;
 $dropdown-divider: map-merge(
@@ -884,7 +884,7 @@ $dropdown-action: map-deep-merge(
 
 $dropdown-alert-font-size: null !default;
 $dropdown-alert-line-height: normal !default;
-$dropdown-alert-margin: $spacer * 0.5 !default;
+$dropdown-alert-margin: 0.5rem !default;
 $dropdown-alert-padding-x: $dropdown-header-padding-x !default;
 $dropdown-alert-padding-y: $dropdown-header-padding-y !default;
 

package/src/scss/variables/_forms.scss

@@ -409,7 +409,7 @@ $form-control-inset: () !default;
 $form-control-inset: map-deep-merge(
 	(
 		background-color: transparent,
-		border-width: 0,
+		border-width: 0px,
 		color: $input-color,
 		flex-grow: 1,
 		margin-bottom: $form-control-inset-margin-y,