@clayui/css 3.162.0 → 3.164.0

package/src/scss/atlas-custom-properties/variables/_range.scss

@@ -76,7 +76,7 @@ $clay-range-input: map-deep-merge(
 			box-shadow:
 				var(
 					--clay-range-thumb-box-shadow,
-					0 1px 5px -1px rgba(0, 0, 0, 0.3)
+					unquote('0 1px 5px -1px hsl(from #{$black} h s l / 0.3)')
 				),
 			height: var(--clay-range-thumb-height, 24px),
 			margin-top: var(--clay-range-thumb-margin-top, -0.75rem),

package/src/scss/atlas-custom-properties/variables/_resizer.scss

@@ -23,13 +23,24 @@ $c-horizontal-resizer: map-merge(
 
 		hover: (
 			before: (
-				background-color: $primary-l0,
+				background-color: $primary,
+			),
+		),
+
+		active: (
+			before: (
+				background-color: $primary-d2,
 			),
 		),
 
 		focus: (
+			box-shadow: $component-focus-inset-box-shadow,
+			outline: 0,
+
 			before: (
-				background-color: $primary-l0,
+				background-color: $primary,
+				bottom: 0.25rem,
+				top: 0.25rem,
 			),
 		),
 	),

package/src/scss/atlas-custom-properties/variables/_sheets.scss

@@ -179,8 +179,7 @@ $sheet-subtitle-link: map-deep-merge(
 		),
 
 		focus: (
-			box-shadow: #{0 0 0 4px $white,
-			0 0 0 6px $primary-l0},
+			box-shadow: unquote('0 0 0 4px #{$white}, 0 0 0 6px #{$primary-l0}'),
 			outline: 0,
 		),
 	),

package/src/scss/atlas-custom-properties/variables/_sidebar.scss

@@ -331,7 +331,10 @@ $sidebar-light: map-deep-merge(
 		border-color: var(--sidebar-light-border-color, $gray-300),
 		border-left-width: var(--sidebar-light-border-left-width, 0),
 		box-shadow:
-			var(--sidebar-light-box-shadow, -4px 0 8px -4px rgba(0, 0, 0, 0.1)),
+			var(
+				--sidebar-light-box-shadow,
+				unquote('-4px 0 8px -4px hsl(from #{$black} h s l / 0.1)')
+			),
 		color: var(--sidebar-light-color, $gray-900),
 		sidebar-header: (
 			background-color:
@@ -349,7 +352,7 @@ $sidebar-light: map-deep-merge(
 			box-shadow:
 				var(
 					--sidebar-light-sidenav-start-box-shadow,
-					4px 0 8px -4px rgba(0, 0, 0, 0.1)
+					unquote('4px 0 8px -4px hsl(from #{$black} h s l / 0.1)')
 				),
 		),
 
@@ -372,8 +375,10 @@ $sidebar-light: map-deep-merge(
 			header: (
 				link: (
 					focus: (
-						box-shadow: #{0 0 0 4px $white,
-						0 0 0 6px $primary-l0},
+						box-shadow:
+							unquote(
+								'0 0 0 4px #{$white},0 0 0 6px #{$primary-l0}'
+							),
 					),
 				),
 			),
@@ -465,7 +470,10 @@ $sidebar-c-slideout-start: () !default;
 $sidebar-c-slideout-start: map-deep-merge(
 	(
 		'.sidebar-light': (
-			box-shadow: 0.25rem 0 0.5rem -0.25rem rgba(0, 0, 0, 0.1),
+			box-shadow:
+				unquote(
+					'0.25rem 0 0.5rem -0.25rem hsl(from #{$black} h s l / 0.1)'
+				),
 		),
 	),
 	$sidebar-c-slideout-start

package/src/scss/atlas-custom-properties/variables/_stickers.scss

@@ -249,7 +249,7 @@ $sticker-top-right: map-merge(
 
 // .sticker-outside
 
-$sticker-outside-offset: calc(#{$sticker-size} * 0.5) !default;
+$sticker-outside-offset: calc(#{$sticker-size} * -0.5) !default;
 
 $sticker-outside: () !default;
 $sticker-outside: map-deep-merge(
@@ -293,7 +293,7 @@ $sticker-user-icon: map-deep-merge(
 	(
 		background-color: $white,
 		border-radius: $rounded-circle-border-radius,
-		box-shadow: 0 0 0 1px unquote('rgb(from #{$black} r g b / 0.125)'),
+		box-shadow: unquote('0 0 0 1px hsl(from #{$black} h s l / 0.125)'),
 	),
 	$sticker-user-icon
 );

package/src/scss/atlas-custom-properties/variables/_tables.scss

@@ -29,7 +29,7 @@ $table-responsive-margin-bottom: var(
 // Table
 
 $table-bg: var(--table-background-color, $white) !default;
-$table-border-color: var(--table-border-color, $gray-300) !default;
+$table-border-color: var(--table-border-color, $gray-400) !default;
 $table-border-width: var(--table-border-width, $border-width) !default;
 $table-color: var(--table-color, $body-color) !default;
 $table-font-size: var(--table-font-size, 14px) !default;
@@ -538,12 +538,10 @@ $c-tr-table-focus: map-deep-merge(
 			outline: 0,
 
 			before: (
-				box-shadow: (
-					inset 0 2px 0 0 $primary-l0,
-					inset 0 4px 0 0 $white,
-					inset 0 -2px 0 0 $primary-l0,
-					inset 0 -4px 0 0 $white,
-				),
+				box-shadow:
+					unquote(
+						'inset 0 2px 0 0 #{$primary-l0},inset 0 4px 0 0 #{$white},inset 0 -2px 0 0 #{$primary-l0},inset 0 -4px 0 0 #{$white}'
+					),
 				content: '',
 				display: block,
 				position: absolute,
@@ -557,10 +555,10 @@ $c-tr-table-focus: map-deep-merge(
 
 			first-child: (
 				after: (
-					box-shadow: (
-						inset 2px 0 0 0 $primary-l0,
-						inset 4px 0 0 0 $white,
-					),
+					box-shadow:
+						unquote(
+							'inset 2px 0 0 0 #{$primary-l0},inset 4px 0 0 0 #{$white}'
+						),
 					content: '',
 					display: block,
 					position: absolute,
@@ -575,10 +573,10 @@ $c-tr-table-focus: map-deep-merge(
 
 			last-child: (
 				after: (
-					box-shadow: (
-						inset -2px 0 0 0 $primary-l0,
-						inset -4px 0 0 0 $white,
-					),
+					box-shadow:
+						unquote(
+							'inset -2px 0 0 0 #{$primary-l0},inset -4px 0 0 0 #{$white}'
+						),
 					content: '',
 					display: block,
 					position: absolute,
@@ -773,7 +771,7 @@ $table-border-level: -6 !default;
 // Table List
 
 $table-list-bg: var(--table-list-background-color, $white) !default;
-$table-list-border-color: var(--table-list-border-color, $gray-300) !default;
+$table-list-border-color: var(--table-list-border-color, $gray-400) !default;
 $table-list-border-radius: var(
 	--table-list-border-radius,
 	$border-radius
@@ -1029,7 +1027,7 @@ $table-list-action-link: map-deep-merge(
 			background-color:
 				var(
 					--table-list-action-link-background-color,
-					rgba(0, 0, 0, 0.02)
+					unquote('hsl(from #{$black} h s l / 0.02)')
 				),
 			color: var(--table-list-action-link-hover-color, $gray-900),
 			text-decoration: none,
@@ -1039,7 +1037,7 @@ $table-list-action-link: map-deep-merge(
 			background-color:
 				var(
 					--table-list-action-link-focus-background-color,
-					rgba(0, 0, 0, 0.02)
+					unquote('hsl(from #{$black} h s l / 0.02)')
 				),
 			box-shadow: $component-focus-box-shadow,
 			color: var(--table-list-action-link-focus-color, $gray-900),
@@ -1050,7 +1048,7 @@ $table-list-action-link: map-deep-merge(
 			background-color:
 				var(
 					--table-list-action-link-active-background-color,
-					rgba(0, 0, 0, 0.04)
+					unquote('hsl(from #{$black} h s l / 0.04)')
 				),
 		),
 

package/src/scss/atlas-custom-properties/variables/_tbar.scss

@@ -167,7 +167,10 @@ $tbar-light: () !default;
 $tbar-light: map-deep-merge(
 	(
 		background-color: $white,
-		box-shadow: inset 1px 0 0 0 $gray-200#{','} inset -1px 0 0 0 $gray-200,
+		box-shadow:
+			unquote(
+				'inset 1px 0 0 0 #{$gray-200}, inset -1px 0 0 0 #{$gray-200}'
+			),
 		color: $secondary,
 
 		tbar-divider-before: (
@@ -208,8 +211,10 @@ $tbar-dark-d1: () !default;
 $tbar-dark-d1: map-deep-merge(
 	(
 		background-color: $dark-d1,
-		box-shadow: inset 1px 0 0 0 unquote('hsl(from #{$white} h s l / 0.06)')
-			#{','} inset -1px 0 0 0 unquote('hsl(from #{$white} h s l / 0.06)'),
+		box-shadow:
+			unquote(
+				'inset 1px 0 0 0 hsl(from #{$white} h s l / 0.06), inset -1px 0 0 0 hsl(from #{$white} h s l / 0.06)'
+			),
 		color: $gray-500,
 
 		tbar-divider-before: (
@@ -263,8 +268,10 @@ $tbar-dark-l2: () !default;
 $tbar-dark-l2: map-deep-merge(
 	(
 		background-color: $dark-l2,
-		box-shadow: inset 1px 0 0 0 unquote('hsl(from #{$white} h s l / 0.06)')
-			#{','} inset -1px 0 0 0 unquote('hsl(from #{$white} h s l / 0.06)'),
+		box-shadow:
+			unquote(
+				'inset 1px 0 0 0 hsl(from #{$white} h s l / 0.06), inset -1px 0 0 0 hsl(from #{$white} h s l / 0.06)'
+			),
 		border-color: unquote('hsl(from #{$white} h s l / 0.06)'),
 		color: $gray-500,
 

package/src/scss/atlas-custom-properties/variables/_tooltip.scss

@@ -2,7 +2,7 @@ $tooltip-bg: var(--tooltip-background-color, $dark-d2) !default;
 $tooltip-border-radius: var(--tooltip-border-radius, $border-radius) !default;
 $tooltip-box-shadow: var(
 	--tooltip-box-shadow,
-	0 1px 4px 0px rgba(0, 0, 0, 0.4)
+	unquote('0 1px 4px 0px hsl(from #{$black} h s l / 0.4)')
 ) !default;
 $tooltip-color: var(--tooltip-color, $white) !default;
 $tooltip-font-size: var(--tooltip-font-size, 14px) !default;

package/src/scss/cadmin/_variables.scss

@@ -60,3 +60,5 @@
 @import 'variables/_type';
 
 @import 'variables/_utilities';
+
+@import 'variables/_c-root';

package/src/scss/cadmin/components/_cards.scss

@@ -308,70 +308,18 @@
 // Checkbox and Radio Cards
 
 .form-check-card {
-	margin-bottom: $cadmin-card-margin-bottom;
-	margin-top: 0;
-	padding-left: 0;
+	@include clay-form-check-card-variant($cadmin-form-check-card);
 
-	.card {
-		margin-bottom: 0;
-	}
-
-	.custom-control {
-		display: inline;
-		margin-right: 0;
-		position: static;
-
-		> label {
-			font-weight: $cadmin-font-weight-normal;
-			padding-left: 0;
-		}
-	}
-
-	.custom-control-input {
-		z-index: 2;
-	}
-
-	.custom-control-label {
-		position: absolute;
-		z-index: 1;
-	}
-
-	.form-check-input {
-		margin-left: 0;
-		margin-top: 0;
-		position: absolute;
-		z-index: 1;
-	}
-
-	.form-check-label {
-		color: $cadmin-body-color;
-		display: inline;
-		font-weight: $cadmin-font-weight-normal;
-		padding-left: 0;
-		position: static;
-	}
-
-	&.active .card,
-	.custom-control-input:checked ~ .card,
 	.form-check-input:checked ~ .card {
-		box-shadow: $cadmin-form-check-card-checked-box-shadow;
-	}
-}
-
-.form-check-card {
-	&:hover {
-		.card {
-			box-shadow: $cadmin-form-check-card-checked-box-shadow;
-		}
-	}
-}
-
-.custom-control-input,
-.form-check-input {
-	&:hover {
-		~ .card {
-			box-shadow: $cadmin-form-check-card-checked-box-shadow;
-		}
+		@include clay-card-variant(
+			map-deep-get(
+				$cadmin-form-check-card,
+				custom-control,
+				custom-control-input,
+				checked,
+				card
+			)
+		);
 	}
 }
 

package/src/scss/cadmin/components/_focus-ring.scss

@@ -53,7 +53,9 @@ $cadmin-focus-ring-animation-to-box-shadow:
 			box-shadow: $cadmin-focus-ring-animation-to-box-shadow;
 		}
 
-		:focus-visible:not(.toggle-switch-check):not(.custom-control-input),
+		:focus-visible:not(.c-horizontal-resizer):not(.toggle-switch-check):not(
+				.custom-control-input
+			),
 		.focus {
 			position: relative;
 			z-index: 1;

package/src/scss/cadmin/components/_icons.scss

@@ -2,6 +2,103 @@
 	@include clay-css(setter($cadmin-lexicon-icon, ()));
 }
 
+.lexicon-icon-arrows-all {
+	background-color: unquote('hsl(from #{$cadmin-white} h s l / 0.6)');
+	border: 1px solid $cadmin-border-color;
+	border-radius: 0.1413em; // 6.5/46
+	height: 0.73913em; // 34/46 aspect ratio
+	margin-top: 0;
+	width: 1em;
+
+	.lx-arrows-all-chevron {
+		fill: $cadmin-white;
+	}
+}
+
+.clay-keyboard-arrows-horizontal {
+	.lx-arrows-all-keycap-down,
+	.lx-arrows-all-keycap-up {
+		fill: $cadmin-gray-300;
+	}
+}
+
+.clay-keyboard-arrows-vertical {
+	.lx-arrows-all-keycap-left,
+	.lx-arrows-all-keycap-right {
+		fill: $cadmin-gray-300;
+	}
+}
+
+.clay-keyboard-arrows-indicator {
+	display: inline-flex;
+	font-size: 2.875rem; // 46px — natural design size
+
+	.lexicon-icon {
+		margin-top: 0;
+	}
+}
+
+.clay-keyboard-arrows-indicator-floating {
+	background-color: $cadmin-white;
+	border-radius: 0.1413em;
+	position: absolute;
+	transition:
+		bottom 0.3s ease-in-out,
+		left 0.3s ease-in-out,
+		right 0.3s ease-in-out,
+		top 0.3s ease-in-out;
+	z-index: $cadmin-zindex-tooltip;
+
+	&.clay-keyboard-arrows-indicator-floating-hidden {
+		opacity: 0;
+		pointer-events: none;
+		visibility: hidden;
+	}
+
+	&.clay-keyboard-arrows-indicator-floating-tooltip {
+		&::before,
+		&::after {
+			border-style: solid;
+			content: '';
+			height: 0;
+			position: absolute;
+			top: 50%;
+			transform: translateY(-50%);
+			width: 0;
+		}
+
+		&::before {
+			border-color: transparent $cadmin-border-color transparent
+				transparent;
+			border-width: 7px 7px 7px 0;
+			left: -7px;
+		}
+
+		&::after {
+			border-color: transparent $cadmin-white transparent transparent;
+			border-width: 6px 6px 6px 0;
+			left: -6px;
+		}
+
+		&.clay-keyboard-arrows-indicator-floating-flipped {
+			&::before {
+				border-color: transparent transparent transparent
+					$cadmin-border-color;
+				border-width: 7px 0 7px 7px;
+				left: auto;
+				right: -7px;
+			}
+
+			&::after {
+				border-color: transparent transparent transparent $cadmin-white;
+				border-width: 6px 0 6px 6px;
+				left: auto;
+				right: -6px;
+			}
+		}
+	}
+}
+
 .order-arrow-down-active {
 	.order-arrow-arrow-down {
 		fill: $cadmin-order-arrow-down-active-color;

package/src/scss/cadmin/components/_reboot.scss

@@ -77,7 +77,9 @@ html#{$cadmin-selector} {
 		tr,
 		ul,
 		var {
-			@extend %cadmin-reset !optional;
+			&:where(:not(.ck, .ck *)) {
+				@extend %cadmin-reset !optional;
+			}
 		}
 
 		// Shim for "new" HTML5 structural elements to display correctly (IE11)
@@ -239,7 +241,9 @@ html#{$cadmin-selector} {
 
 			// Remove the margin in Safari
 
-			margin: 0;
+			@supports (-webkit-hyphens: none) {
+				margin: 0;
+			}
 		}
 
 		button,

package/src/scss/cadmin/components/_resizer.scss

@@ -11,6 +11,16 @@
 		);
 	}
 
+	&:active::before {
+		@include clay-css(
+			map-deep-get($cadmin-c-horizontal-resizer, active, before)
+		);
+	}
+
+	&:focus-visible {
+		@include clay-css(map-get($cadmin-c-horizontal-resizer, focus));
+	}
+
 	&:focus-visible::before {
 		@include clay-css(
 			map-deep-get($cadmin-c-horizontal-resizer, focus, before)

package/src/scss/cadmin/components/_root.scss

@@ -0,0 +1,41 @@
+@if (variable-exists(cadmin-c-root)) {
+	html#{$cadmin-selector} {
+		&:root .cadmin {
+			@include clay-css($cadmin-c-root);
+		}
+	}
+
+	html#{$cadmin-selector} {
+		&[data-color-scheme='light']:root .cadmin {
+			color-scheme: light;
+		}
+	}
+}
+
+@if (variable-exists(cadmin-c-dark)) {
+	@media (prefers-color-scheme: dark) {
+		html#{$cadmin-selector}:root .cadmin {
+			@include clay-css($cadmin-c-dark);
+		}
+	}
+
+	html#{$cadmin-selector} {
+		&[data-color-scheme='dark']:root .cadmin {
+			@include clay-css($cadmin-c-dark);
+		}
+	}
+}
+
+@if (variable-exists(cadmin-c-dark-high-contrast)) {
+	@media (prefers-color-scheme: dark) and (prefers-contrast: more) {
+		html#{$cadmin-selector}:root .cadmin {
+			@include clay-css($cadmin-c-dark-high-contrast);
+		}
+	}
+
+	html#{$cadmin-selector} {
+		&[data-color-scheme='dark-high-contrast']:root .cadmin {
+			@include clay-css($cadmin-c-dark-high-contrast);
+		}
+	}
+}

package/src/scss/cadmin/variables/_alerts.scss

@@ -409,7 +409,9 @@ $cadmin-alert-notifications-fixed: map-deep-merge(
 
 // .alert-notification
 
-$cadmin-alert-notifications-box-shadow: 0 8px 32px -4px rgba(0, 0, 0, 0.3) !default;
+$cadmin-alert-notifications-box-shadow: unquote(
+	'0 8px 32px -4px hsl(from #{$cadmin-black} h s l / 0.3)'
+) !default;
 $cadmin-alert-notifications-max-width: 360px !default;
 
 $cadmin-alert-notification: () !default;
@@ -659,12 +661,12 @@ $cadmin-alert-primary-btn: map-deep-merge(
 		hover: (
 			background-color: $cadmin-primary,
 			border-color: $cadmin-primary,
-			color: color-yiq($cadmin-primary),
+			color: $cadmin-white,
 		),
 
 		active: (
-			background-color: clay-darken($cadmin-primary, 5%),
-			border-color: clay-darken($cadmin-primary, 5%),
+			background-color: $cadmin-primary-d1,
+			border-color: $cadmin-primary-d1,
 		),
 	),
 	$cadmin-alert-primary-btn
@@ -728,12 +730,12 @@ $cadmin-alert-secondary-btn: map-deep-merge(
 		hover: (
 			background-color: $cadmin-secondary,
 			border-color: $cadmin-secondary,
-			color: color-yiq($cadmin-secondary),
+			color: $cadmin-white,
 		),
 
 		active: (
-			background-color: clay-darken($cadmin-secondary, 5%),
-			border-color: clay-darken($cadmin-secondary, 5%),
+			background-color: $cadmin-secondary-d1,
+			border-color: $cadmin-secondary-d1,
 		),
 	),
 	$cadmin-alert-secondary-btn
@@ -797,12 +799,12 @@ $cadmin-alert-success-btn: map-deep-merge(
 		hover: (
 			background-color: $cadmin-success,
 			border-color: $cadmin-success,
-			color: color-yiq($cadmin-success),
+			color: $cadmin-white,
 		),
 
 		active: (
-			background-color: clay-darken($cadmin-success, 5%),
-			border-color: clay-darken($cadmin-success, 5%),
+			background-color: $cadmin-success-d1,
+			border-color: $cadmin-success-d1,
 		),
 	),
 	$cadmin-alert-success-btn
@@ -866,12 +868,12 @@ $cadmin-alert-info-btn: map-deep-merge(
 		hover: (
 			background-color: $cadmin-info,
 			border-color: $cadmin-info,
-			color: color-yiq($cadmin-info),
+			color: $cadmin-white,
 		),
 
 		active: (
-			background-color: clay-darken($cadmin-info, 5%),
-			border-color: clay-darken($cadmin-info, 5%),
+			background-color: $cadmin-info-d1,
+			border-color: $cadmin-info-d1,
 		),
 	),
 	$cadmin-alert-info-btn
@@ -935,12 +937,12 @@ $cadmin-alert-warning-btn: map-deep-merge(
 		hover: (
 			background-color: $cadmin-warning,
 			border-color: $cadmin-warning,
-			color: color-yiq($cadmin-warning),
+			color: $cadmin-white,
 		),
 
 		active: (
-			background-color: clay-darken($cadmin-warning, 5%),
-			border-color: clay-darken($cadmin-warning, 5%),
+			background-color: $cadmin-warning-d1,
+			border-color: $cadmin-warning-d1,
 		),
 	),
 	$cadmin-alert-warning-btn
@@ -1004,12 +1006,12 @@ $cadmin-alert-danger-btn: map-deep-merge(
 		hover: (
 			background-color: $cadmin-danger,
 			border-color: $cadmin-danger,
-			color: color-yiq($cadmin-danger),
+			color: $cadmin-white,
 		),
 
 		active: (
-			background-color: clay-darken($cadmin-danger, 5%),
-			border-color: clay-darken($cadmin-danger, 5%),
+			background-color: $cadmin-danger-d1,
+			border-color: $cadmin-danger-d1,
 		),
 	),
 	$cadmin-alert-danger-btn
@@ -1077,8 +1079,8 @@ $cadmin-alert-light-btn: map-deep-merge(
 		),
 
 		active: (
-			background-color: clay-darken($cadmin-dark, 5%),
-			border-color: clay-darken($cadmin-dark, 5%),
+			background-color: $cadmin-dark-d1,
+			border-color: $cadmin-dark-d1,
 		),
 	),
 	$cadmin-alert-light-btn
@@ -1142,12 +1144,12 @@ $cadmin-alert-dark-btn: map-deep-merge(
 		hover: (
 			background-color: $cadmin-dark,
 			border-color: $cadmin-dark,
-			color: color-yiq($cadmin-dark),
+			color: $cadmin-white,
 		),
 
 		active: (
-			background-color: clay-darken($cadmin-dark, 5%),
-			border-color: clay-darken($cadmin-dark, 5%),
+			background-color: $cadmin-dark-d1,
+			border-color: $cadmin-dark-d1,
 		),
 	),
 	$cadmin-alert-dark-btn