@clayui/css 3.163.0 → 3.165.0

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

@@ -13,7 +13,7 @@ $label-padding-x: var(--label-padding-x, 0.25rem) !default;
 $label-padding-y: var(--label-padding-y, 0.125rem) !default;
 $label-spacer-x: var(--label-spacer-x, 0.25rem) !default;
 $label-spacer-y: var(--label-spacer-y, 0.125rem) !default;
-$label-text-transform: var(--label-text-transform, uppercase) !default;
+$label-text-transform: var(--label-text-transform, none) !default;
 
 // .label .sticker
 
@@ -254,8 +254,8 @@ $label-item-after: map-merge(
 $label-lg: () !default;
 $label-lg: map-deep-merge(
 	(
-		border-radius: var(--label-lg-border-radius, $border-radius-lg),
-		font-size: var(--label-lg-font-size, 0.75rem),
+		border-radius: var(--label-lg-border-radius, $label-border-radius),
+		font-size: var(--label-lg-font-size, 0.875rem),
 		height: var(--label-lg-height, auto),
 		min-height: var(--label-lg-min-height, 1.5rem),
 		padding-bottom: var(--label-lg-padding-bottom, 0.3125rem),
@@ -393,7 +393,7 @@ $label-primary: map-deep-merge(
 
 // @deprecated as of v2.4.1 use the Sass map `$label-secondary` instead
 
-$label-secondary-color: $secondary !default;
+$label-secondary-color: $dark-l2 !default;
 
 // @deprecated as of v2.4.1 use the Sass map `$label-secondary` instead
 
@@ -498,7 +498,7 @@ $label-secondary: map-deep-merge(
 
 // @deprecated as of v2.4.1 use the Sass map `$label-success` instead
 
-$label-success-color: $success !default;
+$label-success-color: $success-d1 !default;
 
 // @deprecated as of v2.4.1 use the Sass map `$label-success` instead
 
@@ -597,7 +597,7 @@ $label-success: map-deep-merge(
 
 // @deprecated as of v2.4.1 use the Sass map `$label-info` instead
 
-$label-info-color: $info !default;
+$label-info-color: $info-d1 !default;
 
 // @deprecated as of v2.4.1 use the Sass map `$label-info` instead
 
@@ -692,7 +692,7 @@ $label-info: map-deep-merge(
 
 // @deprecated as of v2.4.1 use the Sass map `$label-warning` instead
 
-$label-warning-color: $warning !default;
+$label-warning-color: $warning-d1 !default;
 
 // @deprecated as of v2.4.1 use the Sass map `$label-warning` instead
 
@@ -791,7 +791,7 @@ $label-warning: map-deep-merge(
 
 // @deprecated as of v2.4.1 use the Sass map `$label-danger` instead
 
-$label-danger-color: $danger !default;
+$label-danger-color: $danger-d1 !default;
 
 // @deprecated as of v2.4.1 use the Sass map `$label-danger` instead
 
@@ -1117,36 +1117,36 @@ $label-inverse-secondary: () !default;
 $label-inverse-secondary: map-deep-merge(
 	(
 		background-color:
-			var(--label-inverse-secondary-background-color, $secondary),
+			var(--label-inverse-secondary-background-color, $secondary-l3),
 		border-color: var(--label-inverse-secondary-border-color, transparent),
-		color: var(--label-inverse-secondary-color, $white),
+		color: var(--label-inverse-secondary-color, $dark-d2),
 		href: (
 			hover: (
 				background-color:
 					var(
 						--label-inverse-secondary-hover-background-color,
-						$secondary-d1
+						$secondary-l3
 					),
 				border-color:
 					var(
 						--label-inverse-secondary-hover-border-color,
 						transparent
 					),
-				color: var(--label-inverse-secondary-hover-color, $white),
+				color: var(--label-inverse-secondary-hover-color, $dark-d2),
 			),
 
 			focus: (
 				background-color:
 					var(
 						--label-inverse-secondary-focus-background-color,
-						$secondary-d1
+						$secondary-l3
 					),
 				border-color:
 					var(
 						--label-inverse-secondary-focus-border-color,
 						transparent
 					),
-				color: var(--label-inverse-secondary-focus-color, $white),
+				color: var(--label-inverse-secondary-focus-color, $dark-d2),
 			),
 		),
 	),
@@ -1157,30 +1157,30 @@ $label-inverse-success: () !default;
 $label-inverse-success: map-deep-merge(
 	(
 		background-color:
-			var(--label-inverse-success-background-color, $success),
+			var(--label-inverse-success-background-color, $success-l2),
 		border-color: var(--label-inverse-success-border-color, transparent),
-		color: var(--label-inverse-success-color, $white),
+		color: var(--label-inverse-success-color, $success-d2),
 		href: (
 			hover: (
 				background-color:
 					var(
 						--label-inverse-success-hover-background-color,
-						$success-d2
+						$success-l2
 					),
 				border-color:
 					var(--label-inverse-success-hover-border-color, transparent),
-				color: var(--label-inverse-success-hover-color, $white),
+				color: var(--label-inverse-success-hover-color, $success-d2),
 			),
 
 			focus: (
 				background-color:
 					var(
 						--label-inverse-success-focus-background-color,
-						$success
+						$success-l2
 					),
 				border-color:
 					var(--label-inverse-success-focus-border-color, transparent),
-				color: var(--label-inverse-success-focus-color, $white),
+				color: var(--label-inverse-success-focus-color, $success-d2),
 			),
 		),
 	),
@@ -1190,24 +1190,24 @@ $label-inverse-success: map-deep-merge(
 $label-inverse-info: () !default;
 $label-inverse-info: map-deep-merge(
 	(
-		background-color: var(--label-inverse-info-background-color, $info),
+		background-color: var(--label-inverse-info-background-color, $info-l2),
 		border-color: var(--label-inverse-info-border-color, transparent),
-		color: var(--label-inverse-info-color, $white),
+		color: var(--label-inverse-info-color, $info-d2),
 		href: (
 			hover: (
 				background-color:
-					var(--label-inverse-info-hover-background-color, $info-d2),
+					var(--label-inverse-info-hover-background-color, $info-l2),
 				border-color:
 					var(--label-inverse-info-hover-border-color, transparent),
-				color: var(--label-inverse-info-hover-color, $white),
+				color: var(--label-inverse-info-hover-color, $info-d2),
 			),
 
 			focus: (
 				background-color:
-					var(--label-inverse-info-focus-background-color, $info-d2),
+					var(--label-inverse-info-focus-background-color, $info-l2),
 				border-color:
 					var(--label-inverse-info-focus-border-color, transparent),
-				color: var(--label-inverse-info-focus-color, $white),
+				color: var(--label-inverse-info-focus-color, $info-d2),
 			),
 		),
 	),
@@ -1218,30 +1218,30 @@ $label-inverse-warning: () !default;
 $label-inverse-warning: map-deep-merge(
 	(
 		background-color:
-			var(--label-inverse-warning-background-color, $warning),
+			var(--label-inverse-warning-background-color, $warning-l2),
 		border-color: var(--label-inverse-warning-border-color, transparent),
-		color: var(--label-inverse-warning-color, $white),
+		color: var(--label-inverse-warning-color, $warning-d2),
 		href: (
 			hover: (
 				background-color:
 					var(
 						--label-inverse-warning-hover-background-color,
-						$warning-d2
+						$warning-l2
 					),
 				border-color:
 					var(--label-inverse-warning-hover-border-color, transparent),
-				color: var(--label-inverse-warning-hover-color, $white),
+				color: var(--label-inverse-warning-hover-color, $warning-d2),
 			),
 
 			focus: (
 				background-color:
 					var(
 						--label-inverse-warning-focus-background-color,
-						$warning-d2
+						$warning-l2
 					),
 				border-color:
 					var(--label-inverse-warning-focus-border-color, transparent),
-				color: var(--label-inverse-warning-focus-color, $white),
+				color: var(--label-inverse-warning-focus-color, $warning-d2),
 			),
 		),
 	),
@@ -1251,30 +1251,31 @@ $label-inverse-warning: map-deep-merge(
 $label-inverse-danger: () !default;
 $label-inverse-danger: map-deep-merge(
 	(
-		background-color: var(--label-inverse-danger-background-color, $danger),
+		background-color:
+			var(--label-inverse-danger-background-color, $danger-l2),
 		border-color: var(--label-inverse-danger-border-color, transparent),
-		color: var(--label-inverse-danger-color, $white),
+		color: var(--label-inverse-danger-color, $danger-d2),
 		href: (
 			hover: (
 				background-color:
 					var(
 						--label-inverse-danger-hover-background-color,
-						$danger-d2
+						$danger-l2
 					),
 				border-color:
 					var(--label-inverse-danger-hover-border-color, transparent),
-				color: var(--label-inverse-danger-hover-color, $white),
+				color: var(--label-inverse-danger-hover-color, $danger-d2),
 			),
 
 			focus: (
 				background-color:
 					var(
 						--label-inverse-danger-focus-background-color,
-						$danger-d2
+						$danger-l2
 					),
 				border-color:
 					var(--label-inverse-danger-focus-border-color, transparent),
-				color: var(--label-inverse-danger-focus-color, $white),
+				color: var(--label-inverse-danger-focus-color, $danger-d2),
 			),
 		),
 	),
@@ -1335,6 +1336,366 @@ $label-inverse-dark: map-deep-merge(
 	$label-inverse-dark
 );
 
+$label-inverse-content-0: () !default;
+$label-inverse-content-0: map-deep-merge(
+	(
+		background-color:
+			var(--label-inverse-content-0-background-color, $secondary-l3),
+		border-color: var(--label-inverse-content-0-border-color, transparent),
+		color: var(--label-inverse-content-0-color, $dark-d2),
+		href: (
+			hover: (
+				background-color:
+					var(
+						--label-inverse-content-0-hover-background-color,
+						$secondary-l3
+					),
+				border-color:
+					var(
+						--label-inverse-content-0-hover-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-0-hover-color, $dark-d2),
+			),
+
+			focus: (
+				background-color:
+					var(
+						--label-inverse-content-0-focus-background-color,
+						$secondary-l3
+					),
+				border-color:
+					var(
+						--label-inverse-content-0-focus-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-0-focus-color, $dark-d2),
+			),
+		),
+	),
+	$label-inverse-content-0
+);
+
+$label-inverse-content-1: () !default;
+$label-inverse-content-1: map-deep-merge(
+	(
+		background-color:
+			var(--label-inverse-content-1-background-color, $purple-l5),
+		border-color: var(--label-inverse-content-1-border-color, transparent),
+		color: var(--label-inverse-content-1-color, $purple-d2),
+		href: (
+			hover: (
+				background-color:
+					var(
+						--label-inverse-content-1-hover-background-color,
+						$purple-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-1-hover-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-1-hover-color, $purple-d2),
+			),
+
+			focus: (
+				background-color:
+					var(
+						--label-inverse-content-1-focus-background-color,
+						$purple-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-1-focus-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-1-focus-color, $purple-d2),
+			),
+		),
+	),
+	$label-inverse-content-1
+);
+
+$label-inverse-content-2: () !default;
+$label-inverse-content-2: map-deep-merge(
+	(
+		background-color:
+			var(--label-inverse-content-2-background-color, $yellow-l5),
+		border-color: var(--label-inverse-content-2-border-color, transparent),
+		color: var(--label-inverse-content-2-color, $yellow-d4),
+		href: (
+			hover: (
+				background-color:
+					var(
+						--label-inverse-content-2-hover-background-color,
+						$yellow-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-2-hover-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-2-hover-color, $yellow-d4),
+			),
+
+			focus: (
+				background-color:
+					var(
+						--label-inverse-content-2-focus-background-color,
+						$yellow-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-2-focus-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-2-focus-color, $yellow-d4),
+			),
+		),
+	),
+	$label-inverse-content-2
+);
+
+$label-inverse-content-3: () !default;
+$label-inverse-content-3: map-deep-merge(
+	(
+		background-color:
+			var(--label-inverse-content-3-background-color, $green-l5),
+		border-color: var(--label-inverse-content-3-border-color, transparent),
+		color: var(--label-inverse-content-3-color, $green-d2),
+		href: (
+			hover: (
+				background-color:
+					var(
+						--label-inverse-content-3-hover-background-color,
+						$green-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-3-hover-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-3-hover-color, $green-d2),
+			),
+
+			focus: (
+				background-color:
+					var(
+						--label-inverse-content-3-focus-background-color,
+						$green-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-3-focus-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-3-focus-color, $green-d2),
+			),
+		),
+	),
+	$label-inverse-content-3
+);
+
+$label-inverse-content-4: () !default;
+$label-inverse-content-4: map-deep-merge(
+	(
+		background-color:
+			var(--label-inverse-content-4-background-color, $red-l5),
+		border-color: var(--label-inverse-content-4-border-color, transparent),
+		color: var(--label-inverse-content-4-color, $red-d2),
+		href: (
+			hover: (
+				background-color:
+					var(
+						--label-inverse-content-4-hover-background-color,
+						$red-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-4-hover-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-4-hover-color, $red-d2),
+			),
+
+			focus: (
+				background-color:
+					var(
+						--label-inverse-content-4-focus-background-color,
+						$red-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-4-focus-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-4-focus-color, $red-d2),
+			),
+		),
+	),
+	$label-inverse-content-4
+);
+
+$label-inverse-content-5: () !default;
+$label-inverse-content-5: map-deep-merge(
+	(
+		background-color:
+			var(--label-inverse-content-5-background-color, $teal-l5),
+		border-color: var(--label-inverse-content-5-border-color, transparent),
+		color: var(--label-inverse-content-5-color, $teal-d2),
+		href: (
+			hover: (
+				background-color:
+					var(
+						--label-inverse-content-5-hover-background-color,
+						$teal-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-5-hover-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-5-hover-color, $teal-d2),
+			),
+
+			focus: (
+				background-color:
+					var(
+						--label-inverse-content-5-focus-background-color,
+						$teal-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-5-focus-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-5-focus-color, $teal-d2),
+			),
+		),
+	),
+	$label-inverse-content-5
+);
+
+$label-inverse-content-6: () !default;
+$label-inverse-content-6: map-deep-merge(
+	(
+		background-color:
+			var(--label-inverse-content-6-background-color, $cyan-l5),
+		border-color: var(--label-inverse-content-6-border-color, transparent),
+		color: var(--label-inverse-content-6-color, $cyan-d2),
+		href: (
+			hover: (
+				background-color:
+					var(
+						--label-inverse-content-6-hover-background-color,
+						$cyan-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-6-hover-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-6-hover-color, $cyan-d2),
+			),
+
+			focus: (
+				background-color:
+					var(
+						--label-inverse-content-6-focus-background-color,
+						$cyan-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-6-focus-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-6-focus-color, $cyan-d2),
+			),
+		),
+	),
+	$label-inverse-content-6
+);
+
+$label-inverse-content-7: () !default;
+$label-inverse-content-7: map-deep-merge(
+	(
+		background-color:
+			var(--label-inverse-content-7-background-color, $orange-l5),
+		border-color: var(--label-inverse-content-7-border-color, transparent),
+		color: var(--label-inverse-content-7-color, $orange-d2),
+		href: (
+			hover: (
+				background-color:
+					var(
+						--label-inverse-content-7-hover-background-color,
+						$orange-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-7-hover-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-7-hover-color, $orange-d2),
+			),
+
+			focus: (
+				background-color:
+					var(
+						--label-inverse-content-7-focus-background-color,
+						$orange-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-7-focus-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-7-focus-color, $orange-d2),
+			),
+		),
+	),
+	$label-inverse-content-7
+);
+
+$label-inverse-content-8: () !default;
+$label-inverse-content-8: map-deep-merge(
+	(
+		background-color:
+			var(--label-inverse-content-8-background-color, $pink-l5),
+		border-color: var(--label-inverse-content-8-border-color, transparent),
+		color: var(--label-inverse-content-8-color, $pink-d2),
+		href: (
+			hover: (
+				background-color:
+					var(
+						--label-inverse-content-8-hover-background-color,
+						$pink-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-8-hover-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-8-hover-color, $pink-d2),
+			),
+
+			focus: (
+				background-color:
+					var(
+						--label-inverse-content-8-focus-background-color,
+						$pink-l5
+					),
+				border-color:
+					var(
+						--label-inverse-content-8-focus-border-color,
+						transparent
+					),
+				color: var(--label-inverse-content-8-focus-color, $pink-d2),
+			),
+		),
+	),
+	$label-inverse-content-8
+);
+
 $label-palette: () !default;
 $label-palette: map-deep-merge(
 	(
@@ -1369,6 +1730,24 @@ $label-palette: map-deep-merge(
 		inverse-light: $label-inverse-light,
 
 		inverse-dark: $label-inverse-dark,
+
+		inverse-content-0: $label-inverse-content-0,
+
+		inverse-content-1: $label-inverse-content-1,
+
+		inverse-content-2: $label-inverse-content-2,
+
+		inverse-content-3: $label-inverse-content-3,
+
+		inverse-content-4: $label-inverse-content-4,
+
+		inverse-content-5: $label-inverse-content-5,
+
+		inverse-content-6: $label-inverse-content-6,
+
+		inverse-content-7: $label-inverse-content-7,
+
+		inverse-content-8: $label-inverse-content-8,
 	),
 	$label-palette
 );

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

@@ -1,5 +1,5 @@
-$modal-backdrop-bg: var(--modal-backdrop-bg, $gray-800) !default;
-$modal-backdrop-opacity: var(--modal-backdrop-opacity, 0.8) !default;
+$modal-backdrop-bg: var(--modal-backdrop-background-color) !default;
+$modal-backdrop-opacity: var(--modal-backdrop-opacity) !default;
 
 $modal-backdrop: () !default;
 $modal-backdrop: map-deep-merge(
@@ -54,7 +54,8 @@ $modal-content-inner-border-radius: calc(
 	#{$modal-content-border-radius} - #{$modal-content-border-width}
 ) !default;
 
-$modal-content-box-shadow-xs: 0 0 3px 1px rgba(0, 0, 0, 0.2) !default;
+$modal-content-box-shadow-xs: 0 0 3px 1px
+	unquote('hsl(from #{$black} h s l / 0.3)') !default;
 
 $modal-content-box-shadow-sm-up: var(
 	--modal-content-box-shadow-sm-up,

package/src/scss/atlas-custom-properties/variables/_multi-step-nav.scss

@@ -230,10 +230,7 @@ $multi-step-item-error: map-deep-merge(
 					$danger
 				),
 			background-image:
-				var(
-					--multi-step-item-error-multi-step-icon-background-image,
-					clay-icon(times, #fff)
-				),
+				var(--multi-step-item-error-icon, clay-icon(times, #fff)),
 			color: var(--multi-step-item-error-multi-step-icon-color, $white),
 			text-indent: -100px,
 
@@ -261,7 +258,7 @@ $multi-step-icon-complete-bg: var(
 	$gray-600
 ) !default;
 $multi-step-icon-complete-bg-image: var(
-	--multi-step-icon-complete-bg-image,
+	--multi-step-icon-complete-icon,
 	clay-icon(check, #fff)
 ) !default;
 $multi-step-icon-complete-bg-position: var(

package/src/scss/atlas-custom-properties/variables/_navigation-bar.scss

@@ -405,9 +405,9 @@ $navigation-bar-secondary: map-deep-merge(
 		),
 
 		navbar-brand: (
-			color: rgba(255, 255, 255, 0.9),
+			color: unquote('hsl(from #{$white} h s l / 0.9)'),
 			hover: (
-				color: rgba(255, 255, 255, 0.9),
+				color: unquote('hsl(from #{$white} h s l / 0.9)'),
 			),
 		),
 

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

@@ -348,8 +348,8 @@ $panel-unstyled-header-link: map-deep-merge(
 		border-radius: 1px,
 
 		focus: (
-			box-shadow: #{0 0 0 4px $body-bg,
-			0 0 0 6px $primary-l0},
+			box-shadow:
+				unquote('0 0 0 4px #{$body-bg}, 0 0 0 6px #{$primary-l0}'),
 		),
 	),
 	$panel-unstyled-header-link