@clayui/css 3.162.0 → 3.164.0

package/src/scss/cadmin/variables/_labels.scss

@@ -1,11 +1,11 @@
 // .label
 
 $cadmin-label-border-color: $cadmin-gray-900 !default;
-$cadmin-label-border-radius: 2px !default; // 2px
+$cadmin-label-border-radius: $cadmin-border-radius !default; // 4px
 $cadmin-label-border-style: solid !default;
 $cadmin-label-border-width: 1px !default;
 $cadmin-label-color: null !default;
-$cadmin-label-font-size: 10px !default; // 10px
+$cadmin-label-font-size: 12px !default; // 12px
 $cadmin-label-font-weight: $cadmin-font-weight-semi-bold !default;
 $cadmin-label-height: null !default;
 $cadmin-label-line-height: 1 !default;
@@ -13,7 +13,7 @@ $cadmin-label-padding-x: 4px !default; // 4px
 $cadmin-label-padding-y: 2px !default; // 2px
 $cadmin-label-spacer-x: 4px !default; // 4px
 $cadmin-label-spacer-y: 2px !default; // 2px
-$cadmin-label-text-transform: uppercase !default;
+$cadmin-label-text-transform: none !default;
 
 // .label .sticker
 
@@ -250,7 +250,7 @@ $cadmin-label-item-after: map-merge(
 $cadmin-label-lg: () !default;
 $cadmin-label-lg: map-deep-merge(
 	(
-		font-size: 12px,
+		font-size: 14px,
 		height: auto,
 		min-height: 24px,
 		padding-bottom: 5px,
@@ -368,7 +368,7 @@ $cadmin-label-primary: map-deep-merge(
 
 // @deprecated as of v2.4.1 use the Sass map `$cadmin-label-secondary` instead
 
-$cadmin-label-secondary-color: $cadmin-secondary !default;
+$cadmin-label-secondary-color: $cadmin-dark-l2 !default;
 
 // @deprecated as of v2.4.1 use the Sass map `$cadmin-label-secondary` instead
 
@@ -446,7 +446,7 @@ $cadmin-label-secondary: map-deep-merge(
 
 // @deprecated as of v2.4.1 use the Sass map `$cadmin-label-success` instead
 
-$cadmin-label-success-color: $cadmin-success !default;
+$cadmin-label-success-color: $cadmin-success-d1 !default;
 
 // @deprecated as of v2.4.1 use the Sass map `$cadmin-label-success` instead
 
@@ -524,7 +524,7 @@ $cadmin-label-success: map-deep-merge(
 
 // @deprecated as of v2.4.1 use the Sass map `$cadmin-label-info` instead
 
-$cadmin-label-info-color: $cadmin-info !default;
+$cadmin-label-info-color: $cadmin-info-d1 !default;
 
 // @deprecated as of v2.4.1 use the Sass map `$cadmin-label-info` instead
 
@@ -602,7 +602,7 @@ $cadmin-label-info: map-deep-merge(
 
 // @deprecated as of v2.4.1 use the Sass map `$cadmin-label-warning` instead
 
-$cadmin-label-warning-color: $cadmin-warning !default;
+$cadmin-label-warning-color: $cadmin-warning-d1 !default;
 
 // @deprecated as of v2.4.1 use the Sass map `$cadmin-label-warning` instead
 
@@ -680,7 +680,7 @@ $cadmin-label-warning: map-deep-merge(
 
 // @deprecated as of v2.4.1 use the Sass map `$cadmin-label-danger` instead
 
-$cadmin-label-danger-color: $cadmin-danger !default;
+$cadmin-label-danger-color: $cadmin-danger-d1 !default;
 
 // @deprecated as of v2.4.1 use the Sass map `$cadmin-label-danger` instead
 
@@ -918,7 +918,7 @@ $cadmin-label-inverse-primary: () !default;
 $cadmin-label-inverse-primary: map-deep-merge(
 	(
 		background-color: $cadmin-primary,
-		border-color: $cadmin-primary,
+		border-color: transparent,
 		color: $cadmin-white,
 
 		href: (
@@ -933,13 +933,13 @@ $cadmin-label-inverse-primary: map-deep-merge(
 $cadmin-label-inverse-secondary: () !default;
 $cadmin-label-inverse-secondary: map-deep-merge(
 	(
-		background-color: $cadmin-secondary,
-		border-color: $cadmin-secondary,
-		color: $cadmin-white,
+		background-color: $cadmin-secondary-l3,
+		border-color: transparent,
+		color: $cadmin-dark-d2,
 
 		href: (
 			hover: (
-				color: $cadmin-white,
+				color: $cadmin-dark-d2,
 			),
 		),
 	),
@@ -949,13 +949,13 @@ $cadmin-label-inverse-secondary: map-deep-merge(
 $cadmin-label-inverse-success: () !default;
 $cadmin-label-inverse-success: map-deep-merge(
 	(
-		background-color: $cadmin-success,
-		border-color: $cadmin-success,
-		color: $cadmin-white,
+		background-color: $cadmin-success-l2,
+		border-color: transparent,
+		color: $cadmin-success-d2,
 
 		href: (
 			hover: (
-				color: $cadmin-white,
+				color: $cadmin-success-d2,
 			),
 		),
 	),
@@ -965,13 +965,13 @@ $cadmin-label-inverse-success: map-deep-merge(
 $cadmin-label-inverse-info: () !default;
 $cadmin-label-inverse-info: map-deep-merge(
 	(
-		background-color: $cadmin-info,
-		border-color: $cadmin-info,
-		color: $cadmin-white,
+		background-color: $cadmin-info-l2,
+		border-color: transparent,
+		color: $cadmin-info-d2,
 
 		href: (
 			hover: (
-				color: $cadmin-white,
+				color: $cadmin-info-d2,
 			),
 		),
 	),
@@ -981,13 +981,13 @@ $cadmin-label-inverse-info: map-deep-merge(
 $cadmin-label-inverse-warning: () !default;
 $cadmin-label-inverse-warning: map-deep-merge(
 	(
-		background-color: $cadmin-warning,
-		border-color: $cadmin-warning,
-		color: $cadmin-white,
+		background-color: $cadmin-warning-l2,
+		border-color: transparent,
+		color: $cadmin-warning-d2,
 
 		href: (
 			hover: (
-				color: $cadmin-white,
+				color: $cadmin-warning-d2,
 			),
 		),
 	),
@@ -997,13 +997,13 @@ $cadmin-label-inverse-warning: map-deep-merge(
 $cadmin-label-inverse-danger: () !default;
 $cadmin-label-inverse-danger: map-deep-merge(
 	(
-		background-color: $cadmin-danger,
-		border-color: $cadmin-danger,
-		color: $cadmin-white,
+		background-color: $cadmin-danger-l2,
+		border-color: transparent,
+		color: $cadmin-danger-d2,
 
 		href: (
 			hover: (
-				color: $cadmin-white,
+				color: $cadmin-danger-d2,
 			),
 		),
 	),
@@ -1014,7 +1014,7 @@ $cadmin-label-inverse-light: () !default;
 $cadmin-label-inverse-light: map-deep-merge(
 	(
 		background-color: $cadmin-light,
-		border-color: $cadmin-light,
+		border-color: transparent,
 		color: $cadmin-dark,
 
 		href: (
@@ -1030,7 +1030,7 @@ $cadmin-label-inverse-dark: () !default;
 $cadmin-label-inverse-dark: map-deep-merge(
 	(
 		background-color: $cadmin-dark,
-		border-color: $cadmin-dark,
+		border-color: transparent,
 		color: $cadmin-white,
 
 		href: (
@@ -1042,6 +1042,150 @@ $cadmin-label-inverse-dark: map-deep-merge(
 	$cadmin-label-inverse-dark
 );
 
+$cadmin-label-inverse-content-0: () !default;
+$cadmin-label-inverse-content-0: map-deep-merge(
+	(
+		background-color: $cadmin-secondary-l3,
+		border-color: transparent,
+		color: $cadmin-dark-d2,
+
+		href: (
+			hover: (
+				color: $cadmin-dark-d2,
+			),
+		),
+	),
+	$cadmin-label-inverse-content-0
+);
+
+$cadmin-label-inverse-content-1: () !default;
+$cadmin-label-inverse-content-1: map-deep-merge(
+	(
+		background-color: $cadmin-purple-l5,
+		border-color: transparent,
+		color: $cadmin-purple-d2,
+
+		href: (
+			hover: (
+				color: $cadmin-purple-d2,
+			),
+		),
+	),
+	$cadmin-label-inverse-content-1
+);
+
+$cadmin-label-inverse-content-2: () !default;
+$cadmin-label-inverse-content-2: map-deep-merge(
+	(
+		background-color: $cadmin-yellow-l5,
+		border-color: transparent,
+		color: $cadmin-yellow-d4,
+
+		href: (
+			hover: (
+				color: $cadmin-yellow-d4,
+			),
+		),
+	),
+	$cadmin-label-inverse-content-2
+);
+
+$cadmin-label-inverse-content-3: () !default;
+$cadmin-label-inverse-content-3: map-deep-merge(
+	(
+		background-color: $cadmin-green-l5,
+		border-color: transparent,
+		color: $cadmin-green-d2,
+
+		href: (
+			hover: (
+				color: $cadmin-green-d2,
+			),
+		),
+	),
+	$cadmin-label-inverse-content-3
+);
+
+$cadmin-label-inverse-content-4: () !default;
+$cadmin-label-inverse-content-4: map-deep-merge(
+	(
+		background-color: $cadmin-red-l5,
+		border-color: transparent,
+		color: $cadmin-red-d2,
+
+		href: (
+			hover: (
+				color: $cadmin-red-d2,
+			),
+		),
+	),
+	$cadmin-label-inverse-content-4
+);
+
+$cadmin-label-inverse-content-5: () !default;
+$cadmin-label-inverse-content-5: map-deep-merge(
+	(
+		background-color: $cadmin-teal-l5,
+		border-color: transparent,
+		color: $cadmin-teal-d2,
+
+		href: (
+			hover: (
+				color: $cadmin-teal-d2,
+			),
+		),
+	),
+	$cadmin-label-inverse-content-5
+);
+
+$cadmin-label-inverse-content-6: () !default;
+$cadmin-label-inverse-content-6: map-deep-merge(
+	(
+		background-color: $cadmin-cyan-l5,
+		border-color: transparent,
+		color: $cadmin-cyan-d2,
+
+		href: (
+			hover: (
+				color: $cadmin-cyan-d2,
+			),
+		),
+	),
+	$cadmin-label-inverse-content-6
+);
+
+$cadmin-label-inverse-content-7: () !default;
+$cadmin-label-inverse-content-7: map-deep-merge(
+	(
+		background-color: $cadmin-orange-l5,
+		border-color: transparent,
+		color: $cadmin-orange-d2,
+
+		href: (
+			hover: (
+				color: $cadmin-orange-d2,
+			),
+		),
+	),
+	$cadmin-label-inverse-content-7
+);
+
+$cadmin-label-inverse-content-8: () !default;
+$cadmin-label-inverse-content-8: map-deep-merge(
+	(
+		background-color: $cadmin-pink-l5,
+		border-color: transparent,
+		color: $cadmin-pink-d2,
+
+		href: (
+			hover: (
+				color: $cadmin-pink-d2,
+			),
+		),
+	),
+	$cadmin-label-inverse-content-8
+);
+
 $cadmin-label-palette: () !default;
 $cadmin-label-palette: map-deep-merge(
 	(
@@ -1076,6 +1220,24 @@ $cadmin-label-palette: map-deep-merge(
 		inverse-light: $cadmin-label-inverse-light,
 
 		inverse-dark: $cadmin-label-inverse-dark,
+
+		inverse-content-0: $cadmin-label-inverse-content-0,
+
+		inverse-content-1: $cadmin-label-inverse-content-1,
+
+		inverse-content-2: $cadmin-label-inverse-content-2,
+
+		inverse-content-3: $cadmin-label-inverse-content-3,
+
+		inverse-content-4: $cadmin-label-inverse-content-4,
+
+		inverse-content-5: $cadmin-label-inverse-content-5,
+
+		inverse-content-6: $cadmin-label-inverse-content-6,
+
+		inverse-content-7: $cadmin-label-inverse-content-7,
+
+		inverse-content-8: $cadmin-label-inverse-content-8,
 	),
 	$cadmin-label-palette
 );

package/src/scss/cadmin/variables/_links.scss

@@ -46,11 +46,11 @@ $cadmin-component-link: map-deep-merge(
 		transition: box-shadow 0.15s ease-in-out,
 
 		hover: (
-			color: clay-darken($cadmin-gray-600, 15%),
+			color: $cadmin-gray-900,
 		),
 
 		focus: (
-			color: clay-darken($cadmin-gray-600, 15%),
+			color: $cadmin-gray-900,
 			box-shadow: $cadmin-component-focus-box-shadow,
 			outline: 0,
 		),
@@ -66,11 +66,11 @@ $cadmin-link-primary: map-deep-merge(
 		transition: box-shadow 0.15s ease-in-out,
 
 		hover: (
-			color: clay-darken($cadmin-primary, 15%),
+			color: $cadmin-primary-d1,
 		),
 
 		focus: (
-			color: clay-darken($cadmin-primary, 15%),
+			color: $cadmin-primary-d1,
 			box-shadow: $cadmin-component-focus-box-shadow,
 			outline: 0,
 		),
@@ -197,7 +197,9 @@ $cadmin-link-outline-primary: map-deep-merge(
 
 		active: (
 			background-color:
-				clay-lighten(clay-desaturate($cadmin-primary, 42.05), 41.76),
+				unquote(
+					'hsl(from #{$cadmin-primary} h calc(s - 42.05%) calc(l + 41.76%))'
+				),
 			color: $cadmin-primary,
 		),
 
@@ -218,17 +220,20 @@ $cadmin-link-outline-secondary: map-deep-merge(
 		color: $cadmin-secondary,
 
 		hover: (
-			background-color: rgba($cadmin-gray-900, 0.03),
+			background-color:
+				unquote('hsl(from #{$cadmin-gray-900} h s l / 0.03)'),
 			color: $cadmin-gray-900,
 		),
 
 		focus: (
-			background-color: rgba($cadmin-gray-900, 0.03),
+			background-color:
+				unquote('hsl(from #{$cadmin-gray-900} h s l / 0.03)'),
 			color: $cadmin-gray-900,
 		),
 
 		active: (
-			background-color: rgba($cadmin-gray-900, 0.06),
+			background-color:
+				unquote('hsl(from #{$cadmin-gray-900} h s l / 0.06)'),
 			color: $cadmin-gray-900,
 		),
 
@@ -295,11 +300,11 @@ $cadmin-component-title-link: map-deep-merge(
 		transition: box-shadow 0.15s ease-in-out,
 
 		hover: (
-			color: clay-darken($cadmin-gray-900, 15%),
+			color: unquote('hsl(from #{$cadmin-gray-900} h s calc(l - 15))'),
 		),
 
 		focus: (
-			color: clay-darken($cadmin-gray-900, 15%),
+			color: unquote('hsl(from #{$cadmin-gray-900} h s calc(l - 15))'),
 			box-shadow: $cadmin-component-focus-box-shadow,
 			outline: 0,
 		),
@@ -375,19 +380,22 @@ $cadmin-component-action: map-deep-merge(
 		vertical-align: middle,
 		width: map-get($cadmin-link-monospaced, width),
 		hover: (
-			background-color: rgba($cadmin-gray-900, 0.03),
+			background-color:
+				unquote('hsl(from #{$cadmin-gray-900} h s l / 0.03)'),
 			color: $cadmin-gray-900,
 		),
 
 		focus: (
-			background-color: rgba($cadmin-gray-900, 0.03),
+			background-color:
+				unquote('hsl(from #{$cadmin-gray-900} h s l / 0.03)'),
 			box-shadow: $cadmin-component-focus-box-shadow,
 			color: $cadmin-gray-900,
 			outline: 0,
 		),
 
 		active: (
-			background-color: rgba($cadmin-gray-900, 0.06),
+			background-color:
+				unquote('hsl(from #{$cadmin-gray-900} h s l / 0.06)'),
 			color: $cadmin-gray-900,
 		),
 

package/src/scss/cadmin/variables/_list-group.scss

@@ -14,10 +14,7 @@ $cadmin-list-group-margin-top: null !default;
 
 $cadmin-list-group-action-color: $cadmin-gray-700 !default;
 
-$cadmin-list-group-hover-bg: clay-lighten(
-	$cadmin-component-active-bg,
-	44.9
-) !default;
+$cadmin-list-group-hover-bg: $cadmin-primary-l3 !default;
 
 $cadmin-list-group-action-hover-color: $cadmin-list-group-action-color !default;
 
@@ -280,13 +277,18 @@ $cadmin-list-group-notification-item: () !default;
 $cadmin-list-group-notification-item-primary: () !default;
 $cadmin-list-group-notification-item-primary: map-deep-merge(
 	(
-		border-left-color: clay-lighten($cadmin-component-active-bg, 22.94),
+		border-left-color:
+			unquote(
+				'hsl(from #{$cadmin-component-active-bg} h s calc(l + 22.9))'
+			),
 		border-left-width: 8px,
 		border-bottom-left-radius: 0px,
 		border-top-left-radius: 0px,
 
 		active-border-left-color:
-			clay-lighten($cadmin-component-active-bg, 22.94),
+			unquote(
+				'hsl(from #{$cadmin-component-active-bg} h s calc(l + 22.9))'
+			),
 	),
 	$cadmin-list-group-notification-item-primary
 );

package/src/scss/cadmin/variables/_loaders.scss

@@ -45,8 +45,7 @@ $cadmin-loading-animation: map-deep-merge(
 			display: block,
 			height: 1em,
 
-			-webkit-mask: #{conic-gradient(transparent 10%, #000),
-			linear-gradient(#000 0 0) content-box},
+			-webkit-mask: unquote('conic-gradient(transparent 10%, #000), linear-gradient(#000 0 0) content-box'),
 			-webkit-mask-composite: source-out,
 
 			mask-composite: subtract,
@@ -145,8 +144,7 @@ $cadmin-loading-animation-squares: map-deep-merge(
 				height: 1em,
 				left: auto,
 
-				-webkit-mask: #{conic-gradient(transparent 10%, #000),
-				linear-gradient(#000 0 0) content-box},
+				-webkit-mask: unquote('conic-gradient(transparent 10%, #000), linear-gradient(#000 0 0) content-box'),
 				-webkit-mask-composite: source-out,
 
 				mask-composite: subtract,

package/src/scss/cadmin/variables/_management-bar.scss

@@ -617,16 +617,19 @@ $cadmin-management-bar-light: map-deep-merge(
 
 				hover: (
 					color: $cadmin-gray-900,
-					background-color: rgba($cadmin-gray-900, 0.03),
+					background-color:
+						unquote('hsl(from #{$cadmin-gray-900} h s l / 0.03)'),
 				),
 
 				focus: (
 					color: $cadmin-gray-900,
-					background-color: rgba($cadmin-gray-900, 0.03),
+					background-color:
+						unquote('hsl(from #{$cadmin-gray-900} h s l / 0.03)'),
 				),
 
 				active: (
-					background-color: rgba($cadmin-gray-900, 0.06),
+					background-color:
+						unquote('hsl(from #{$cadmin-gray-900} h s l / 0.06)'),
 					color: $cadmin-navbar-light-active-color,
 				),
 
@@ -659,16 +662,19 @@ $cadmin-management-bar-primary: map-deep-merge(
 
 				hover: (
 					color: $cadmin-gray-900,
-					background-color: rgba($cadmin-gray-900, 0.03),
+					background-color:
+						unquote('hsl(from #{$cadmin-gray-900} h s l / 0.03)'),
 				),
 
 				focus: (
 					color: $cadmin-gray-900,
-					background-color: rgba($cadmin-gray-900, 0.03),
+					background-color:
+						unquote('hsl(from #{$cadmin-gray-900} h s l / 0.03)'),
 				),
 
 				active: (
-					background-color: rgba($cadmin-gray-900, 0.06),
+					background-color:
+						unquote('hsl(from #{$cadmin-gray-900} h s l / 0.06)'),
 					color: $cadmin-navbar-light-active-color,
 				),