@clayui/css 3.124.0 → 3.127.0

package/src/scss/cadmin/variables/_globals.scss

@@ -22,6 +22,8 @@ $focus-visible-selector: if(
 	'&:focus'
 ) !default;
 
+$c-prefers-focus-selector: null !default;
+
 $cadmin-scaling-breakpoint-down: sm !default;
 
 // This enables Clay color functions to get the fallback color of a CSS Custom Property, convert it to the correct Sass type color, then process it using the corresponding Sass color function. The Clay color function will return a CSS color value. Set this variable to `false` if you want the Clay color function to return the CSS Custom Property without any modifications.
@@ -79,11 +81,12 @@ $cadmin-blue-d4: #004799 !default;
 $cadmin-blue-d3: #0053b3 !default;
 $cadmin-blue-d2: #005fcc !default;
 $cadmin-blue-d1: #006be6 !default;
-$cadmin-blue: if($cadmin-enable-lexicon-flat-colors, #4b9fff, #0b5fff) !default;
+$cadmin-blue: if($cadmin-enable-lexicon-flat-colors, #006eff, #0b5fff) !default;
 $cadmin-blue-l1: #338fff !default;
 $cadmin-blue-l2: #66abff !default;
 $cadmin-blue-l3: #97c5ff !default;
 $cadmin-blue-l4: #cce3ff !default;
+$cadmin-blue-l5: #e5f1ff !default;
 
 $cadmin-indigo-d4: #0017e5 !default;
 $cadmin-indigo-d3: #001aff !default;
@@ -91,13 +94,14 @@ $cadmin-indigo-d2: #1a30ff !default;
 $cadmin-indigo-d1: #3347ff !default;
 $cadmin-indigo: if(
 	$cadmin-enable-lexicon-flat-colors,
-	#7785ff,
+	#4d5fff,
 	#6610f2
 ) !default;
 $cadmin-indigo-l1: #808cff !default;
 $cadmin-indigo-l2: #99a3ff !default;
 $cadmin-indigo-l3: #b2baff !default;
 $cadmin-indigo-l4: #ccd1ff !default;
+$cadmin-indigo-l5: #e5e8ff !default;
 
 $cadmin-purple-d4: #7700cc !default;
 $cadmin-purple-d3: #8600e6 !default;
@@ -105,33 +109,36 @@ $cadmin-purple-d2: #9500ff !default;
 $cadmin-purple-d1: #9f1aff !default;
 $cadmin-purple: if(
 	$cadmin-enable-lexicon-flat-colors,
-	#af78ff,
+	#aa33ff,
 	#6f42c1
 ) !default;
 $cadmin-purple-l1: #bf66ff !default;
 $cadmin-purple-l2: #ca80ff !default;
 $cadmin-purple-l3: #d499ff !default;
 $cadmin-purple-l4: #dfb3ff !default;
+$cadmin-purple-l5: #f2e5ff !default;
 
 $cadmin-pink-d4: #800048 !default;
 $cadmin-pink-d3: #990057 !default;
 $cadmin-pink-d2: #b30065 !default;
 $cadmin-pink-d1: #cc0074 !default;
-$cadmin-pink: if($cadmin-enable-lexicon-flat-colors, #ff73c3, #e83e8c) !default;
+$cadmin-pink: if($cadmin-enable-lexicon-flat-colors, #e50082, #e83e8c) !default;
 $cadmin-pink-l1: #ff4db2 !default;
 $cadmin-pink-l2: #ff80c8 !default;
 $cadmin-pink-l3: #ff99d3 !default;
 $cadmin-pink-l4: #ffb3de !default;
+$cadmin-pink-l5: #ffe5f4 !default;
 
 $cadmin-red-d4: #800000 !default;
 $cadmin-red-d3: #990000 !default;
 $cadmin-red-d2: #b30000 !default;
 $cadmin-red-d1: #cc0000 !default;
-$cadmin-red: if($cadmin-enable-lexicon-flat-colors, #ff5f5f, #da1414) !default;
+$cadmin-red: if($cadmin-enable-lexicon-flat-colors, #e60000, #da1414) !default;
 $cadmin-red-l1: #ff4d4d !default;
 $cadmin-red-l2: #ff6666 !default;
 $cadmin-red-l3: #ff8080 !default;
 $cadmin-red-l4: #ff9999 !default;
+$cadmin-red-l5: #ffe5e5 !default;
 
 $cadmin-orange-d4: #662700 !default;
 $cadmin-orange-d3: #803100 !default;
@@ -139,13 +146,14 @@ $cadmin-orange-d2: #993b00 !default;
 $cadmin-orange-d1: #b34400 !default;
 $cadmin-orange: if(
 	$cadmin-enable-lexicon-flat-colors,
-	#ffb46e,
+	#cc4e00,
 	#b95000
 ) !default;
 $cadmin-orange-l1: #ff6200 !default;
 $cadmin-orange-l2: #ff8133 !default;
 $cadmin-orange-l3: #ffa166 !default;
 $cadmin-orange-l4: #ffc099 !default;
+$cadmin-orange-l5: #fff0e5 !default;
 
 $cadmin-yellow-d4: #997000 !default;
 $cadmin-yellow-d3: #b38900 !default;
@@ -153,13 +161,14 @@ $cadmin-yellow-d2: #cc9600 !default;
 $cadmin-yellow-d1: #e6a800 !default;
 $cadmin-yellow: if(
 	$cadmin-enable-lexicon-flat-colors,
-	#ffd76e,
+	#ffbb00,
 	#ffc107
 ) !default;
 $cadmin-yellow-l1: #ffc933 !default;
 $cadmin-yellow-l2: #ffd666 !default;
 $cadmin-yellow-l3: #ffe499 !default;
 $cadmin-yellow-l4: #fff1cc !default;
+$cadmin-yellow-l5: #fff8e5 !default;
 
 $cadmin-green-d4: #162d06 !default;
 $cadmin-green-d3: #22430a !default;
@@ -167,33 +176,36 @@ $cadmin-green-d2: #2e590d !default;
 $cadmin-green-d1: #397010 !default;
 $cadmin-green: if(
 	$cadmin-enable-lexicon-flat-colors,
-	#9be169,
+	#458613,
 	#287d3d
 ) !default;
 $cadmin-green-l1: #53a117 !default;
 $cadmin-green-l2: #67c91d !default;
 $cadmin-green-l3: #81e236 !default;
 $cadmin-green-l4: #9de963 !default;
+$cadmin-green-l5: #f1fce9 !default;
 
 $cadmin-teal-d4: #092a25 !default;
 $cadmin-teal-d3: #0d3f37 !default;
 $cadmin-teal-d2: #125449 !default;
 $cadmin-teal-d1: #16695b !default;
-$cadmin-teal: if($cadmin-enable-lexicon-flat-colors, #50d2a0, #20c997) !default;
+$cadmin-teal: if($cadmin-enable-lexicon-flat-colors, #1b7e6e, #20c997) !default;
 $cadmin-teal-l1: #24a892 !default;
 $cadmin-teal-l2: #42d7be !default;
 $cadmin-teal-l3: #6ce0cc !default;
 $cadmin-teal-l4: #96e9db !default;
+$cadmin-teal-l5: #eafbf8 !default;
 
 $cadmin-cyan-d4: #00334d !default;
 $cadmin-cyan-d3: #004466 !default;
 $cadmin-cyan-d2: #005580 !default;
 $cadmin-cyan-d1: #006699 !default;
-$cadmin-cyan: if($cadmin-enable-lexicon-flat-colors, #5fc8ff, #17a2b8) !default;
+$cadmin-cyan: if($cadmin-enable-lexicon-flat-colors, #0077b3, #17a2b8) !default;
 $cadmin-cyan-l1: #0099e6 !default;
 $cadmin-cyan-l2: #33bbff !default;
 $cadmin-cyan-l3: #66ccff !default;
 $cadmin-cyan-l4: #99ddff !default;
+$cadmin-cyan-l5: #e5f6ff !default;
 
 $cadmin-colors: () !default;
 $cadmin-colors: map-merge(
@@ -927,7 +939,7 @@ $cadmin-clay-dark-mark: map-deep-merge(
 
 $cadmin-dt-font-weight: $cadmin-font-weight-bold !default;
 
-$cadmin-code-color: #e83e8c !default;
+$cadmin-code-color: $cadmin-red !default;
 $cadmin-code-font-size: 87.5% !default;
 
 $cadmin-kbd-bg: $cadmin-gray-900 !default;

package/src/scss/cadmin/variables/_menubar.scss

@@ -65,7 +65,6 @@ $cadmin-menubar-primary: map-deep-merge(
 				background-color: transparent,
 				box-shadow: none,
 				font-weight: $cadmin-font-weight-normal,
-				letter-spacing: 0.016rem,
 				before: (
 					content: none,
 				),

package/src/scss/cadmin/variables/_multi-step-nav.scss

@@ -22,9 +22,9 @@ $cadmin-multi-step-icon-hover-bg: $cadmin-multi-step-icon-bg !default;
 $cadmin-multi-step-icon-hover-color: $cadmin-multi-step-icon-color !default;
 $cadmin-multi-step-icon-hover-text-decoration: none !default;
 
-$cadmin-multi-step-icon-focus-bg: $cadmin-multi-step-icon-hover-bg !default;
+$cadmin-multi-step-icon-focus-bg: null !default;
 $cadmin-multi-step-icon-focus-box-shadow: $cadmin-component-focus-box-shadow !default;
-$cadmin-multi-step-icon-focus-color: $cadmin-multi-step-icon-hover-color !default;
+$cadmin-multi-step-icon-focus-color: null !default;
 $cadmin-multi-step-icon-focus-outline: 0 !default;
 $cadmin-multi-step-icon-focus-text-decoration: $cadmin-multi-step-icon-hover-text-decoration !default;
 
@@ -83,6 +83,32 @@ $cadmin-multi-step-item-margin-bottom: 10px !default;
 $cadmin-multi-step-item-width: 75px !default;
 $cadmin-multi-step-item-fixed-width: 150px !default;
 
+$cadmin-multi-step-nav-center: () !default;
+$cadmin-multi-step-nav-center: map-deep-merge(
+	(
+		padding: 0,
+		text-align: center,
+		multi-step-item: (
+			flex-grow: 1,
+			width: $cadmin-multi-step-item-width,
+		),
+		multi-step-divider: (
+			left: 50%,
+			margin-left: 1rem,
+			width: calc(100% - #{$cadmin-multi-step-icon-size}),
+		),
+		multi-step-indicator: (
+			left: 50%,
+			transform: translateX(-50%),
+		),
+		multi-step-title: (
+			margin-left: 12.5%,
+			max-width: 75%,
+		),
+	),
+	$cadmin-multi-step-nav-center
+);
+
 // data-multi-step-icon::before See https://issues.liferay.com/browse/LPS-147457.
 
 $cadmin-multi-step-item-error: () !default;

package/src/scss/cadmin/variables/_stickers.scss

@@ -338,6 +338,106 @@ $cadmin-sticker-dark: map-deep-merge(
 	$cadmin-sticker-dark
 );
 
+$cadmin-sticker-outline-0: () !default;
+$cadmin-sticker-outline-0: map-deep-merge(
+	(
+		background-color: $cadmin-light,
+		border: 1px solid $cadmin-dark,
+		color: $cadmin-dark,
+	),
+	$cadmin-sticker-outline-0
+);
+
+$cadmin-sticker-outline-1: () !default;
+$cadmin-sticker-outline-1: map-deep-merge(
+	(
+		background-color: $cadmin-purple-l5,
+		border: 1px solid $cadmin-purple,
+		color: $cadmin-purple,
+	),
+	$cadmin-sticker-outline-1
+);
+
+$cadmin-sticker-outline-2: () !default;
+$cadmin-sticker-outline-2: map-deep-merge(
+	(
+		background-color: $cadmin-yellow-l5,
+		border: 1px solid $cadmin-yellow-d3,
+		color: $cadmin-yellow-d3,
+	),
+	$cadmin-sticker-outline-2
+);
+
+$cadmin-sticker-outline-3: () !default;
+$cadmin-sticker-outline-3: map-deep-merge(
+	(
+		background-color: $cadmin-green-l5,
+		border: 1px solid $cadmin-green,
+		color: $cadmin-green,
+	),
+	$cadmin-sticker-outline-3
+);
+
+$cadmin-sticker-outline-4: () !default;
+$cadmin-sticker-outline-4: map-deep-merge(
+	(
+		background-color: $cadmin-red-l5,
+		border: 1px solid $cadmin-red,
+		color: $cadmin-red,
+	),
+	$cadmin-sticker-outline-4
+);
+
+$cadmin-sticker-outline-5: () !default;
+$cadmin-sticker-outline-5: map-deep-merge(
+	(
+		background-color: $cadmin-orange-l5,
+		border: 1px solid $cadmin-orange,
+		color: $cadmin-orange,
+	),
+	$cadmin-sticker-outline-5
+);
+
+$cadmin-sticker-outline-6: () !default;
+$cadmin-sticker-outline-6: map-deep-merge(
+	(
+		background-color: $cadmin-teal-l5,
+		border: 1px solid $cadmin-teal,
+		color: $cadmin-teal,
+	),
+	$cadmin-sticker-outline-6
+);
+
+$cadmin-sticker-outline-7: () !default;
+$cadmin-sticker-outline-7: map-deep-merge(
+	(
+		background-color: $cadmin-cyan-l5,
+		border: 1px solid $cadmin-cyan,
+		color: $cadmin-cyan,
+	),
+	$cadmin-sticker-outline-7
+);
+
+$cadmin-sticker-outline-8: () !default;
+$cadmin-sticker-outline-8: map-deep-merge(
+	(
+		background-color: $cadmin-pink-l5,
+		border: 1px solid $cadmin-pink,
+		color: $cadmin-pink-d4,
+	),
+	$cadmin-sticker-outline-8
+);
+
+$cadmin-sticker-outline-9: () !default;
+$cadmin-sticker-outline-9: map-deep-merge(
+	(
+		background-color: $cadmin-white,
+		border: 1px solid $cadmin-dark-l2,
+		color: $cadmin-dark-l2,
+	),
+	$cadmin-sticker-outline-9
+);
+
 $cadmin-sticker-palette: () !default;
 $cadmin-sticker-palette: map-deep-merge(
 	(
@@ -349,6 +449,16 @@ $cadmin-sticker-palette: map-deep-merge(
 		danger: $cadmin-sticker-danger,
 		light: $cadmin-sticker-light,
 		dark: $cadmin-sticker-dark,
+		'.sticker-outline-0': $cadmin-sticker-outline-0,
+		'.sticker-outline-1': $cadmin-sticker-outline-1,
+		'.sticker-outline-2': $cadmin-sticker-outline-2,
+		'.sticker-outline-3': $cadmin-sticker-outline-3,
+		'.sticker-outline-4': $cadmin-sticker-outline-4,
+		'.sticker-outline-5': $cadmin-sticker-outline-5,
+		'.sticker-outline-6': $cadmin-sticker-outline-6,
+		'.sticker-outline-7': $cadmin-sticker-outline-7,
+		'.sticker-outline-8': $cadmin-sticker-outline-8,
+		'.sticker-outline-9': $cadmin-sticker-outline-9,
 	),
 	$cadmin-sticker-palette
 );

package/src/scss/cadmin/variables/_toggle-switch.scss

@@ -479,7 +479,7 @@ $cadmin-toggle-switch-sizes: map-deep-merge(
 		toggle-switch-sm: (
 			simple-toggle-switch: (
 				toggle-switch-label: (
-					max-width: calc(100% - 38px),
+					max-width: calc(100% - 34px),
 				),
 			),
 			toggle-switch-check: (
@@ -500,9 +500,8 @@ $cadmin-toggle-switch-sizes: map-deep-merge(
 					),
 					toggle-switch-handle: (
 						min-width: 30px,
-						max-width: 30px,
 						after: (
-							margin-left: 38px,
+							margin-left: 34px,
 						),
 					),
 					toggle-switch-icon: (

package/src/scss/components/_multi-step-nav.scss

@@ -46,6 +46,12 @@
 	margin-bottom: $multi-step-item-margin-bottom;
 	position: relative;
 
+	&:last-child {
+		.multi-step-divider {
+			display: none;
+		}
+	}
+
 	&.active {
 		.multi-step-icon {
 			background-color: $multi-step-icon-active-bg;
@@ -181,8 +187,12 @@
 				}
 			}
 
-			&:focus {
-				box-shadow: $multi-step-icon-disabled-focus-box-shadow;
+			@at-root {
+				&.focus,
+				#{$focus-visible-selector},
+				.c-prefers-focus &:focus {
+					box-shadow: $multi-step-icon-disabled-focus-box-shadow;
+				}
 			}
 		}
 
@@ -259,6 +269,7 @@
 	padding-left: $multi-step-icon-padding-left;
 	padding-right: $multi-step-icon-padding-right;
 	padding-top: $multi-step-icon-padding-top;
+	position: relative;
 
 	@include transition($multi-step-icon-transition);
 
@@ -270,12 +281,16 @@
 		text-decoration: $multi-step-icon-hover-text-decoration;
 	}
 
-	&:focus {
-		background-color: $multi-step-icon-focus-bg;
-		box-shadow: $multi-step-icon-focus-box-shadow;
-		color: $multi-step-icon-focus-color;
-		outline: $multi-step-icon-focus-outline;
-		text-decoration: $multi-step-icon-focus-text-decoration;
+	@at-root {
+		&.focus,
+		#{$focus-visible-selector},
+		.c-prefers-focus &:focus {
+			background-color: $multi-step-icon-focus-bg;
+			box-shadow: $multi-step-icon-focus-box-shadow;
+			color: $multi-step-icon-focus-color;
+			outline: $multi-step-icon-focus-outline;
+			text-decoration: $multi-step-icon-focus-text-decoration;
+		}
 	}
 
 	&[data-multi-step-icon]::before {
@@ -315,6 +330,30 @@
 	}
 }
 
+.multi-step-nav-center {
+	@include clay-css($multi-step-nav-center);
+
+	.multi-step-item {
+		$_item: setter(map-get($multi-step-nav-center, multi-step-item), ());
+
+		@include clay-css($_item);
+	}
+
+	.multi-step-divider {
+		@include clay-css(map-get($multi-step-nav-center, multi-step-divider));
+	}
+
+	.multi-step-indicator {
+		@include clay-css(
+			map-get($multi-step-nav-center, multi-step-indicator)
+		);
+	}
+
+	.multi-step-title {
+		@include clay-css(map-get($multi-step-nav-center, multi-step-title));
+	}
+}
+
 .multi-step-nav-collapse-sm {
 	@include media-breakpoint-down(sm) {
 		flex-wrap: nowrap;
@@ -341,6 +380,29 @@
 			}
 		}
 
+		&.multi-step-nav-center {
+			.multi-step-item {
+				flex-grow: 0;
+				width: auto;
+			}
+
+			.multi-step-item-expand {
+				flex-grow: 1;
+				width: 75px;
+			}
+
+			.multi-step-divider {
+				left: auto;
+				margin-left: $multi-step-icon-size;
+				width: auto;
+			}
+
+			.multi-step-indicator {
+				left: auto;
+				transform: none;
+			}
+		}
+
 		.active {
 			&.multi-step-item {
 				position: static;

package/src/scss/functions/_global-functions.scss

@@ -170,11 +170,17 @@
 /// @param {String} $selector - The full selector
 
 @function clay-insert-before($location, $insert, $selector: &) {
-	@return clay-str-replace(
-		'#{$selector}',
+	$newSelector: clay-str-replace(
+		'#{&}',
 		'#{$location}',
 		'#{$insert}#{$location}'
 	);
+
+	@if ($selector == '&:focus') {
+		@return '#{$newSelector}:focus';
+	}
+
+	@return $newSelector;
 }
 
 /// A helper function for displaying warning messages for required variables.

package/src/scss/functions/_lx-icons-generated.scss

@@ -494,6 +494,8 @@
 
 	'full-size': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline full-size-bottom-right" d="M384 382.804H224V448h160c35.2 0 64-28.8 64-64V224h-64v158.804z" fill="#{$color}"/><path class="lexicon-icon-outline full-size-top-left" d="M128 126.804h160v-64H128c-35.2 0-64 28.8-64 64V288h64V126.804z" fill="#{$color}"/><path class="lexicon-icon-outline full-size-top-right" d="M502.524 9.475A32.315 32.315 0 0 0 479.614 0H378.357c-17.96 0-32.457 14.496-32.386 32.385 0 8.91 3.606 17.042 9.475 22.91a32.338 32.338 0 0 0 22.91 9.476h23.618l-80.469 80.469 45.255 45.254 80.469-80.468v23.617c0 17.96 14.495 32.456 32.385 32.386 17.96 0 32.456-14.496 32.386-32.386V32.386c0-8.627-3.394-16.83-9.476-22.91z" fill="#{$color}"/><path class="lexicon-icon-outline fullsize-bottom-left" d="m145.24 321.505-80.469 80.47v-23.618c0-17.96-14.495-32.456-32.385-32.386-17.96 0-32.456 14.496-32.386 32.386v101.257c0 8.627 3.394 16.83 9.476 22.91A32.315 32.315 0 0 0 32.386 512h101.257c17.96 0 32.457-14.496 32.386-32.386 0-8.909-3.606-17.04-9.475-22.91a32.338 32.338 0 0 0-22.91-9.475h-23.618l80.469-80.469-45.255-45.255z" fill="#{$color}"/></svg>',
 
+	'gallery': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path class="lexicon-icon-outline" d="M0 14.7a.7.7 0 0 1 .7-.7h2.6a.7.7 0 0 1 .7.7v.6a.7.7 0 0 1-.7.7H.7a.7.7 0 0 1-.7-.7v-.6Zm6 0a.7.7 0 0 1 .7-.7h2.6a.7.7 0 0 1 .7.7v.6a.7.7 0 0 1-.7.7H6.7a.7.7 0 0 1-.7-.7v-.6Zm6 0a.7.7 0 0 1 .7-.7h2.6a.7.7 0 0 1 .7.7v.6a.7.7 0 0 1-.7.7h-2.6a.7.7 0 0 1-.7-.7v-.6Zm2-2.7H2c-1 0-2-1.197-2-2.4V2.4C0 1.206 1 0 2 0h12c1 0 2 1.197 2 2.4v7.2c0 1.201-1 2.4-2 2.4ZM2 2v8h12V2H2Z" fill="#{$color}"/></svg>',
+
 	'geolocation': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M64 191.3c0 106.3 96 224.5 192 320.7 96-96.2 192-214.4 192-320.7 0-257.1-384-253.1-384 0zm96 0c0-125.9 192-124.7 192 0 0 124-192 127.2-192 0z" fill="#{$color}"/></svg>',
 
 	'globe-lines': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M0 256.9c0-343.6 512-341.4 512 0 0 337.7-512 342.6-512 0zm420.2 99.7H379c5.2-25.9 8.5-53.8 9.4-83.1h58.9c-2.6 30.2-12.1 58.4-27.1 83.1zm27.1-116.3h-58.9c-.9-29.2-4.2-57.2-9.4-83.1h41.2c15 24.6 24.5 52.8 27.1 83.1zM272.6 65.2c14.6 1.3 28.7 4.1 42.2 8.5 7.9 13.9 15.4 31.2 21.4 50.3h-63.7V65.2zm-75.4 8.5c13.5-4.3 27.6-7.2 42.2-8.5V124h-63.7c6.1-19.1 13.6-36.3 21.5-50.3zm-80 50.3c9.9-10.4 21-19.7 33.1-27.7-3.3 8.8-6.4 18.1-9.2 27.7h-23.9zM64.7 240.3c2.6-30.2 12.1-58.5 27.1-83.1H133c-5.2 25.9-8.5 53.8-9.4 83.1H64.7zm27.1 116.3c-14.9-24.6-24.5-52.8-27.1-83.1h58.9c.9 29.2 4.2 57.2 9.4 83.1H91.8zm58.5 60.9c-12-8-23.1-17.3-33.1-27.7h23.9c2.8 9.6 5.8 18.8 9.2 27.7zm89.1 31c-14.6-1.3-28.7-4.1-42.2-8.5-7.9-13.9-15.4-31.2-21.4-50.3h63.7v58.8zm75.4-8.5c-13.5 4.3-27.6 7.2-42.2 8.5v-58.7h63.7c-6.1 19-13.6 36.3-21.5 50.2zm46.9-22.5c3.3-8.8 6.4-18.1 9.2-27.7h23.9c-9.9 10.4-21 19.7-33.1 27.7zm0-321.2c12 8 23.1 17.3 33.1 27.7h-23.9c-2.8-9.6-5.8-18.9-9.2-27.7zm-6.5 177.2c-1 29.7-4.5 57.7-10.1 83.1h-72.5v-83.1h82.6zm-10.1-116.3c5.6 25.4 9.1 53.4 10.1 83.1h-82.6v-83.1h72.5zm-188.3 83.1c1-29.7 4.5-57.7 10.1-83.1h72.5v83.1h-82.6zm10.1 116.3c-5.6-25.4-9.1-53.4-10.1-83.1h82.6v83.1h-72.5z" clip-rule="evenodd" fill-rule="evenodd" fill="#{$color}"/></svg>',

package/src/scss/mixins/_buttons.scss

@@ -250,31 +250,6 @@
 
 		$breakpoint-down: map-get($map, breakpoint-down);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-
-		$_c-prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
-		@if (variable-exists(cadmin-enable-focus-visible)) and
-			($_enable-focus-visible)
-		{
-			$_c-prefers-focus-selector: clay-insert-before(
-				'.cadmin',
-				'.c-prefers-focus '
-			);
-		}
-
 		$base: map-merge(
 			$map,
 			(
@@ -732,7 +707,7 @@
 			@at-root {
 				&.focus,
 				#{$focus-visible-selector},
-				#{$_c-prefers-focus-selector} {
+				#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 					@include clay-css($focus);
 
 					&::before {
@@ -790,7 +765,7 @@
 
 				@at-root {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						@include clay-css($active-focus);
 
 						&::before {
@@ -837,7 +812,7 @@
 
 				@at-root {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						@include clay-css(
 							map-deep-get($map, active-class, focus)
 						);
@@ -881,7 +856,7 @@
 
 				@at-root {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						@include clay-css(map-get($disabled, focus));
 
 						&::before {

package/src/scss/mixins/_cards.scss

@@ -297,31 +297,6 @@
 	@if (type-of($map) == 'map') {
 		$enabled: setter(map-get($map, enabled), true);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-
-		$_c-prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
-		@if (variable-exists(cadmin-enable-focus-visible)) and
-			($_enable-focus-visible)
-		{
-			$_c-prefers-focus-selector: clay-insert-before(
-				'.cadmin',
-				'.c-prefers-focus '
-			);
-		}
-
 		$base: map-merge(
 			$map,
 			(
@@ -736,7 +711,7 @@
 			@at-root {
 				&.focus,
 				#{$focus-visible-selector},
-				#{$_c-prefers-focus-selector} {
+				#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 					@include clay-css($focus);
 
 					&::after {

package/src/scss/mixins/_close.scss

@@ -67,31 +67,6 @@
 	@if (type-of($map) == 'map') {
 		$enabled: setter(map-get($map, enabled), true);
 
-		$_enable-focus-visible: if(
-			variable-exists(enable-focus-visible),
-			$enable-focus-visible,
-			if(
-				variable-exists(cadmin-enable-focus-visible),
-				$cadmin-enable-focus-visible,
-				true
-			)
-		);
-
-		$_c-prefers-focus-selector: if(
-			$_enable-focus-visible,
-			'.c-prefers-focus &:focus',
-			''
-		);
-
-		@if (variable-exists(cadmin-enable-focus-visible)) and
-			($_enable-focus-visible)
-		{
-			$_c-prefers-focus-selector: clay-insert-before(
-				'.cadmin',
-				'.c-prefers-focus '
-			);
-		}
-
 		$base: map-merge(
 			$map,
 			(
@@ -382,7 +357,7 @@
 			@at-root {
 				button#{&} {
 					#{$focus-visible-selector},
-					#{$_c-prefers-focus-selector} {
+					#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 						@include clay-css($btn-focus);
 					}
 				}
@@ -391,7 +366,7 @@
 			@at-root {
 				&.focus,
 				#{$focus-visible-selector},
-				#{$_c-prefers-focus-selector} {
+				#{if($c-prefers-focus-selector,$c-prefers-focus-selector,clay-insert-before('.cadmin', '.c-prefers-focus ', '&:focus'))} {
 					@include clay-css($focus);
 				}
 			}