@clayui/css 3.163.0 → 3.165.0

package/src/scss/atlas/variables/_labels.scss

@@ -1,11 +1,11 @@
 // .label
 
-$label-border-radius: 0.125rem !default; // 2px
-$label-font-size: 0.625rem !default; // 10px
+$label-border-radius: $border-radius !default; // 4px
+$label-font-size: 0.75rem !default; // 12px
 $label-font-weight: $font-weight-semi-bold !default;
 $label-padding-x: 0.25rem !default; // 4px
 $label-padding-y: 0.125rem !default; // 2px
-$label-text-transform: uppercase !default;
+$label-text-transform: none !default;
 
 // .label[href], .label[type], .label[tabindex='0']
 
@@ -86,7 +86,7 @@ $label-item-spacer-x: 0.85714em !default;
 $label-lg: () !default;
 $label-lg: map-deep-merge(
 	(
-		font-size: 0.75rem,
+		font-size: 0.875rem,
 		min-height: 1.5rem,
 		padding-bottom: 0.3125rem,
 		padding-left: 0.5rem,
@@ -158,7 +158,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
 
@@ -190,7 +190,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
 
@@ -222,7 +222,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
 
@@ -254,7 +254,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
 
@@ -286,7 +286,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
 
@@ -395,7 +395,7 @@ $label-inverse-primary: map-deep-merge(
 		href: (
 			hover: (
 				background-color: null,
-				border-color: null,
+				border-color: transparent,
 				color: $white,
 			),
 		),
@@ -418,25 +418,27 @@ $label-inverse-primary: map-deep-merge(
 $label-inverse-secondary: () !default;
 $label-inverse-secondary: map-deep-merge(
 	(
-		color: $white,
+		background-color: $secondary-l3,
+		border-color: transparent,
+		color: $dark-d2,
 
 		href: (
 			hover: (
-				background-color: null,
-				border-color: null,
-				color: $white,
+				background-color: $secondary-l3,
+				border-color: transparent,
+				color: $dark-d2,
 			),
 		),
 
 		link: (
 			hover: (
-				color: null,
+				color: $dark-d2,
 			),
 		),
 
 		close: (
 			hover: (
-				color: null,
+				color: $dark-d2,
 			),
 		),
 	),
@@ -446,24 +448,27 @@ $label-inverse-secondary: map-deep-merge(
 $label-inverse-success: () !default;
 $label-inverse-success: map-deep-merge(
 	(
-		color: $white,
+		background-color: $success-l2,
+		border-color: transparent,
+		color: $success-d2,
+
 		href: (
 			hover: (
-				background-color: null,
-				border-color: null,
-				color: $white,
+				background-color: $success-l2,
+				border-color: transparent,
+				color: $success-d2,
 			),
 		),
 
 		link: (
 			hover: (
-				color: null,
+				color: $success-d2,
 			),
 		),
 
 		close: (
 			hover: (
-				color: null,
+				color: $success-d2,
 			),
 		),
 	),
@@ -473,25 +478,27 @@ $label-inverse-success: map-deep-merge(
 $label-inverse-info: () !default;
 $label-inverse-info: map-deep-merge(
 	(
-		color: $white,
+		background-color: $info-l2,
+		border-color: transparent,
+		color: $info-d2,
 
 		href: (
 			hover: (
-				background-color: null,
-				border-color: null,
-				color: $white,
+				background-color: $info-l2,
+				border-color: transparent,
+				color: $info-d2,
 			),
 		),
 
 		link: (
 			hover: (
-				color: null,
+				color: $info-d2,
 			),
 		),
 
 		close: (
 			hover: (
-				color: null,
+				color: $info-d2,
 			),
 		),
 	),
@@ -501,25 +508,27 @@ $label-inverse-info: map-deep-merge(
 $label-inverse-warning: () !default;
 $label-inverse-warning: map-deep-merge(
 	(
-		color: $white,
+		background-color: $warning-l2,
+		border-color: transparent,
+		color: $warning-d2,
 
 		href: (
 			hover: (
-				background-color: null,
-				border-color: null,
-				color: $white,
+				background-color: $warning-l2,
+				border-color: transparent,
+				color: $warning-d2,
 			),
 		),
 
 		link: (
 			hover: (
-				color: null,
+				color: $warning-d2,
 			),
 		),
 
 		close: (
 			hover: (
-				color: null,
+				color: $warning-d2,
 			),
 		),
 	),
@@ -529,25 +538,27 @@ $label-inverse-warning: map-deep-merge(
 $label-inverse-danger: () !default;
 $label-inverse-danger: map-deep-merge(
 	(
-		color: $white,
+		background-color: $danger-l2,
+		border-color: transparent,
+		color: $danger-d2,
 
 		href: (
 			hover: (
-				background-color: null,
-				border-color: null,
-				color: $white,
+				background-color: $danger-l2,
+				border-color: transparent,
+				color: $danger-d2,
 			),
 		),
 
 		link: (
 			hover: (
-				color: null,
+				color: $danger-d2,
 			),
 		),
 
 		close: (
 			hover: (
-				color: null,
+				color: $danger-d2,
 			),
 		),
 	),
@@ -562,7 +573,7 @@ $label-inverse-light: map-deep-merge(
 		href: (
 			hover: (
 				background-color: null,
-				border-color: null,
+				border-color: transparent,
 				color: $dark,
 			),
 		),
@@ -590,7 +601,7 @@ $label-inverse-dark: map-deep-merge(
 		href: (
 			hover: (
 				background-color: null,
-				border-color: null,
+				border-color: transparent,
 				color: $white,
 			),
 		),
@@ -610,6 +621,276 @@ $label-inverse-dark: map-deep-merge(
 	$label-inverse-dark
 );
 
+$label-inverse-content-0: () !default;
+$label-inverse-content-0: map-deep-merge(
+	(
+		background-color: $secondary-l3,
+		border-color: transparent,
+		color: $dark-d2,
+
+		href: (
+			hover: (
+				background-color: $secondary-l3,
+				border-color: transparent,
+				color: $dark-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $dark-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $dark-d2,
+			),
+		),
+	),
+	$label-inverse-content-0
+);
+
+$label-inverse-content-1: () !default;
+$label-inverse-content-1: map-deep-merge(
+	(
+		background-color: $purple-l5,
+		border-color: transparent,
+		color: $purple-d2,
+
+		href: (
+			hover: (
+				background-color: $purple-l5,
+				border-color: transparent,
+				color: $purple-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $purple-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $purple-d2,
+			),
+		),
+	),
+	$label-inverse-content-1
+);
+
+$label-inverse-content-2: () !default;
+$label-inverse-content-2: map-deep-merge(
+	(
+		background-color: $yellow-l5,
+		border-color: transparent,
+		color: $yellow-d4,
+
+		href: (
+			hover: (
+				background-color: $yellow-l5,
+				border-color: transparent,
+				color: $yellow-d4,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $yellow-d4,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $yellow-d4,
+			),
+		),
+	),
+	$label-inverse-content-2
+);
+
+$label-inverse-content-3: () !default;
+$label-inverse-content-3: map-deep-merge(
+	(
+		background-color: $green-l5,
+		border-color: transparent,
+		color: $green-d2,
+
+		href: (
+			hover: (
+				background-color: $green-l5,
+				border-color: transparent,
+				color: $green-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $green-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $green-d2,
+			),
+		),
+	),
+	$label-inverse-content-3
+);
+
+$label-inverse-content-4: () !default;
+$label-inverse-content-4: map-deep-merge(
+	(
+		background-color: $red-l5,
+		border-color: transparent,
+		color: $red-d2,
+
+		href: (
+			hover: (
+				background-color: $red-l5,
+				border-color: transparent,
+				color: $red-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $red-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $red-d2,
+			),
+		),
+	),
+	$label-inverse-content-4
+);
+
+$label-inverse-content-5: () !default;
+$label-inverse-content-5: map-deep-merge(
+	(
+		background-color: $teal-l5,
+		border-color: transparent,
+		color: $teal-d2,
+
+		href: (
+			hover: (
+				background-color: $teal-l5,
+				border-color: transparent,
+				color: $teal-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $teal-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $teal-d2,
+			),
+		),
+	),
+	$label-inverse-content-5
+);
+
+$label-inverse-content-6: () !default;
+$label-inverse-content-6: map-deep-merge(
+	(
+		background-color: $cyan-l5,
+		border-color: transparent,
+		color: $cyan-d2,
+
+		href: (
+			hover: (
+				background-color: $cyan-l5,
+				border-color: transparent,
+				color: $cyan-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $cyan-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $cyan-d2,
+			),
+		),
+	),
+	$label-inverse-content-6
+);
+
+$label-inverse-content-7: () !default;
+$label-inverse-content-7: map-deep-merge(
+	(
+		background-color: $orange-l5,
+		border-color: transparent,
+		color: $orange-d2,
+
+		href: (
+			hover: (
+				background-color: $orange-l5,
+				border-color: transparent,
+				color: $orange-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $orange-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $orange-d2,
+			),
+		),
+	),
+	$label-inverse-content-7
+);
+
+$label-inverse-content-8: () !default;
+$label-inverse-content-8: map-deep-merge(
+	(
+		background-color: $pink-l5,
+		border-color: transparent,
+		color: $pink-d2,
+
+		href: (
+			hover: (
+				background-color: $pink-l5,
+				border-color: transparent,
+				color: $pink-d2,
+			),
+		),
+
+		link: (
+			hover: (
+				color: $pink-d2,
+			),
+		),
+
+		close: (
+			hover: (
+				color: $pink-d2,
+			),
+		),
+	),
+	$label-inverse-content-8
+);
+
 $label-palette: () !default;
 $label-palette: map-deep-merge(
 	(
@@ -644,6 +925,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/variables/_tables.scss

@@ -1,5 +1,5 @@
 $table-bg: $white !default;
-$table-border-color: $gray-300 !default;
+$table-border-color: $gray-400 !default;
 $table-font-size: 0.875rem !default;
 
 $table-accent-bg: $light-l1 !default;
@@ -173,7 +173,7 @@ $c-tr-table-focus: map-deep-merge(
 
 // Table List
 
-$table-list-border-color: $gray-300 !default;
+$table-list-border-color: $gray-400 !default;
 $table-list-color: $body-color !default;
 
 $table-list-accent-bg: $gray-100 !default;

package/src/scss/atlas-custom-properties/_variables.scss

@@ -1,3 +1,5 @@
+@import '../functions/_global-functions';
+
 @import 'variables/_globals';
 @import 'variables/_globals-z-index';
 

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

@@ -406,7 +406,9 @@ $alert-notifications-fixed: map-deep-merge(
 
 // .alert-notifications
 
-$alert-notifications-box-shadow: null !default;
+$alert-notifications-box-shadow: unquote(
+	'0 0.5rem 2rem -0.25rem hsl(from #{$black} h s l / 0.3)'
+) !default;
 $alert-notifications-max-width: 22.5rem !default;
 
 $alert-notification: () !default;

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

@@ -38,15 +38,18 @@ $application-bar-dark: map-deep-merge(
 				font-weight: $font-weight-semi-bold,
 
 				hover: (
-					background-color: rgba(255, 255, 255, 0.03),
+					background-color:
+						unquote('hsl(from #{$white} h s l / 0.03)'),
 				),
 
 				focus: (
-					background-color: rgba(255, 255, 255, 0.03),
+					background-color:
+						unquote('hsl(from #{$white} h s l / 0.03)'),
 				),
 
 				active: (
-					background-color: rgba(255, 255, 255, 0.06),
+					background-color:
+						unquote('hsl(from #{$white} h s l / 0.06)'),
 				),
 
 				disabled: (

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

@@ -313,29 +313,6 @@ $badge-palette: map-deep-merge(
 		warning: $badge-warning,
 
 		danger: $badge-danger,
-
-		light: (),
-		dark: (),
-		'.badge-translucent.badge-primary': (),
-		'.badge-translucent.badge-info, .badge-beta': (),
-		'.badge-translucent.badge-success': (),
-		'.badge-translucent.badge-warning': (),
-		'.badge-translucent.badge-danger': (),
-		'%clay-dark-badge-translucent-primary': (),
-		'.clay-dark .badge-translucent.badge-primary': (),
-		'.clay-dark.badge-translucent.badge-primary': (),
-		'%clay-dark-badge-translucent-info': (),
-		'.clay-dark .badge-translucent.badge-info, .badge-beta-dark': (),
-		'.clay-dark.badge-translucent.badge-info': (),
-		'%clay-dark-badge-translucent-success': (),
-		'.clay-dark .badge-translucent.badge-success': (),
-		'.clay-dark.badge-translucent.badge-success': (),
-		'%clay-dark-badge-translucent-warning': (),
-		'.clay-dark .badge-translucent.badge-warning': (),
-		'.clay-dark.badge-translucent.badge-warning': (),
-		'%clay-dark-badge-translucent-danger': (),
-		'.clay-dark .badge-translucent.badge-danger': (),
-		'.clay-dark.badge-translucent.badge-danger': (),
 	),
 	$badge-palette
 );

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

@@ -42,7 +42,10 @@ $breadcrumb-divider-color: $breadcrumb-link-color !default;
 $breadcrumb-divider-font-family: null !default;
 $breadcrumb-divider-font-weight: null !default;
 
-$breadcrumb-divider-svg-icon: clay-icon(angle-right, #6b6c7e) !default;
+$breadcrumb-divider-svg-icon: var(
+	--breadcrumb-divider-svg-icon,
+	clay-icon(angle-right, #6b6c7e)
+) !default;
 $breadcrumb-divider-svg-icon-height: 0.6em !default;
 $breadcrumb-divider-svg-icon-width: $breadcrumb-divider-svg-icon-height !default;
 

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

@@ -1185,6 +1185,7 @@ $btn-outline-success: map-deep-merge(
 			background-color:
 				map-deep-get($btn-success, active, background-color),
 			box-shadow: map-deep-get($btn-success, active, box-shadow),
+			color: map-deep-get($btn-success, active, color),
 		),
 
 		disabled: (