@clayui/css 3.106.0 → 3.107.0

package/src/scss/cadmin/variables/_buttons.scss

@@ -725,6 +725,210 @@ $cadmin-btn-palette: map-deep-merge(
 				color: $cadmin-info-d1,
 			),
 		),
+		'.btn-translucent': (
+			extend: '%clay-btn-xs',
+			border-radius: clay-enable-rounded($cadmin-rounded-pill),
+		),
+		'.btn-translucent.btn-primary': (
+			background-color: rgba($cadmin-primary-d1, 0.04),
+			border-color: transparent,
+			color: $cadmin-primary-d1,
+			hover: (
+				background-color: rgba($cadmin-primary-d1, 0.06),
+				color: $cadmin-primary-d1,
+			),
+			focus: (
+				background-color: rgba($cadmin-primary-d1, 0.06),
+				color: $cadmin-primary-d1,
+			),
+			active: (
+				background-color: rgba($cadmin-primary-d1, 0.08),
+				color: $cadmin-primary-d1,
+			),
+		),
+		'.btn-translucent.btn-info, .btn-beta': (
+			background-color: rgba($cadmin-info-d1, 0.04),
+			border-color: transparent,
+			color: $cadmin-info-d1,
+			hover: (
+				background-color: rgba($cadmin-info-d1, 0.06),
+				color: $cadmin-info-d1,
+			),
+			focus: (
+				background-color: rgba($cadmin-info-d1, 0.06),
+				color: $cadmin-info-d1,
+			),
+			active: (
+				background-color: rgba($cadmin-info-d1, 0.08),
+				color: $cadmin-info-d1,
+			),
+		),
+		'.btn-translucent.btn-success': (
+			background-color: rgba($cadmin-success-d1, 0.04),
+			border-color: transparent,
+			color: $cadmin-success-d1,
+			hover: (
+				background-color: rgba($cadmin-success-d1, 0.06),
+				color: $cadmin-success-d1,
+			),
+			focus: (
+				background-color: rgba($cadmin-success-d1, 0.06),
+				color: $cadmin-success-d1,
+			),
+			active: (
+				background-color: rgba($cadmin-success-d1, 0.08),
+				color: $cadmin-success-d1,
+			),
+		),
+		'.btn-translucent.btn-warning': (
+			background-color: rgba($cadmin-warning-d1, 0.04),
+			border-color: transparent,
+			color: $cadmin-warning-d1,
+			hover: (
+				background-color: rgba($cadmin-warning-d1, 0.06),
+				color: $cadmin-warning-d1,
+			),
+			focus: (
+				background-color: rgba($cadmin-warning-d1, 0.06),
+				color: $cadmin-warning-d1,
+			),
+			active: (
+				background-color: rgba($cadmin-warning-d1, 0.08),
+				color: $cadmin-warning-d1,
+			),
+		),
+		'.btn-translucent.btn-danger': (
+			background-color: rgba($cadmin-danger-d1, 0.04),
+			border-color: transparent,
+			color: $cadmin-danger-d1,
+			hover: (
+				background-color: rgba($cadmin-danger-d1, 0.06),
+				color: $cadmin-danger-d1,
+			),
+			focus: (
+				background-color: rgba($cadmin-danger-d1, 0.06),
+				color: $cadmin-danger-d1,
+			),
+			active: (
+				background-color: rgba($cadmin-danger-d1, 0.08),
+				color: $cadmin-danger-d1,
+			),
+		),
+		'%clay-dark-btn-translucent-primary': (
+			background-color: rgba($cadmin-primary-l2, 0.04),
+			border-color: transparent,
+			color: $cadmin-primary-l1,
+			hover: (
+				background-color: rgba($cadmin-primary-l2, 0.06),
+				color: $cadmin-primary-l1,
+			),
+			focus: (
+				background-color: rgba($cadmin-primary-l2, 0.06),
+				color: $cadmin-primary-l1,
+			),
+			active: (
+				background-color: rgba($cadmin-primary-l2, 0.08),
+				color: $cadmin-primary-l1,
+			),
+		),
+		'.clay-dark .btn-translucent.btn-primary': (
+			extend: '%clay-dark-btn-translucent-primary',
+		),
+		'.clay-dark.btn-translucent.btn-primary': (
+			extend: '%clay-dark-btn-translucent-primary',
+		),
+		'%clay-dark-btn-translucent-info': (
+			background-color: rgba($cadmin-info-l2, 0.04),
+			border-color: transparent,
+			color: $cadmin-info-l1,
+			hover: (
+				background-color: rgba($cadmin-info-l2, 0.06),
+				color: $cadmin-info-l1,
+			),
+			focus: (
+				background-color: rgba($cadmin-info-l2, 0.06),
+				color: $cadmin-info-l1,
+			),
+			active: (
+				background-color: rgba($cadmin-info-l2, 0.08),
+				color: $cadmin-info-l1,
+			),
+		),
+		'.clay-dark .btn-translucent.btn-info, .btn-beta-dark': (
+			extend: '%clay-dark-btn-translucent-info',
+		),
+		'.clay-dark.btn-translucent.btn-info': (
+			extend: '%clay-dark-btn-translucent-info',
+		),
+		'%clay-dark-btn-translucent-success': (
+			background-color: rgba($cadmin-success-l2, 0.04),
+			border-color: transparent,
+			color: $cadmin-success-l1,
+			hover: (
+				background-color: rgba($cadmin-success-l2, 0.06),
+				color: $cadmin-success-l1,
+			),
+			focus: (
+				background-color: rgba($cadmin-success-l2, 0.06),
+				color: $cadmin-success-l1,
+			),
+			active: (
+				background-color: rgba($cadmin-success-l2, 0.08),
+				color: $cadmin-success-l1,
+			),
+		),
+		'.clay-dark .btn-translucent.btn-success': (
+			extend: '%clay-dark-btn-translucent-success',
+		),
+		'.clay-dark.btn-translucent.btn-success': (
+			extend: '%clay-dark-btn-translucent-success',
+		),
+		'%clay-dark-btn-translucent-warning': (
+			background-color: rgba($cadmin-warning-l2, 0.04),
+			border-color: transparent,
+			color: $cadmin-warning-l1,
+			hover: (
+				background-color: rgba($cadmin-warning-l2, 0.06),
+				color: $cadmin-warning-l1,
+			),
+			focus: (
+				background-color: rgba($cadmin-warning-l2, 0.06),
+				color: $cadmin-warning-l1,
+			),
+			active: (
+				background-color: rgba($cadmin-warning-l2, 0.08),
+				color: $cadmin-warning-l1,
+			),
+		),
+		'.clay-dark .btn-translucent.btn-warning': (
+			extend: '%clay-dark-btn-translucent-warning',
+		),
+		'.clay-dark.btn-translucent.btn-warning': (
+			extend: '%clay-dark-btn-translucent-warning',
+		),
+		'%clay-dark-btn-translucent-danger': (
+			background-color: rgba($cadmin-danger-l2, 0.04),
+			border-color: transparent,
+			color: $cadmin-danger-l1,
+			hover: (
+				background-color: rgba($cadmin-danger-l2, 0.06),
+				color: $cadmin-danger-l1,
+			),
+			focus: (
+				background-color: rgba($cadmin-danger-l2, 0.06),
+				color: $cadmin-danger-l1,
+			),
+			active: (
+				background-color: rgba($cadmin-danger-l2, 0.08),
+				color: $cadmin-danger-l1,
+			),
+		),
+		'.clay-dark .btn-translucent.btn-danger': (
+			extend: '%clay-dark-btn-translucent-danger',
+		),
+		'.clay-dark.btn-translucent.btn-danger': (
+			extend: '%clay-dark-btn-translucent-danger',
+		),
 	),
 	$cadmin-btn-palette
 );

package/src/scss/cadmin/variables/_dropdowns.scss

@@ -79,7 +79,7 @@ $cadmin-dropdown-item-padding-y: 8px !default;
 $cadmin-dropdown-item-disabled-cursor: $cadmin-disabled-cursor !default;
 
 $cadmin-dropdown-item-indicator-size: 16px !default;
-$cadmin-dropdown-item-indicator-spacer-x: 16px !default;
+$cadmin-dropdown-item-indicator-spacer-x: 12px !default;
 
 $cadmin-dropdown-link-color: $cadmin-gray-600 !default;
 $cadmin-dropdown-link-font-weight: $cadmin-font-weight-normal !default;

package/src/scss/cadmin/variables/_tables.scss

@@ -79,12 +79,6 @@ $cadmin-table-head-font-weight: $cadmin-font-weight-semi-bold !default;
 $cadmin-table-head-height: 36px !default;
 
 $cadmin-c-table-thead: () !default;
-$cadmin-c-table-thead: map-merge(
-	(
-		background-color: $cadmin-table-head-bg,
-	),
-	$cadmin-c-table-thead
-);
 
 $cadmin-table-head-link: () !default;
 $cadmin-table-head-link: map-deep-merge(
@@ -111,12 +105,6 @@ $cadmin-table-head-title-text-truncate-max-width: calc(
 // Table Body
 
 $cadmin-c-table-tbody: () !default;
-$cadmin-c-table-tbody: map-merge(
-	(
-		background-color: $cadmin-white,
-	),
-	$cadmin-c-table-tbody
-);
 
 // TD
 
@@ -158,12 +146,6 @@ $cadmin-table-cell-expand-smallest-width: 10% !default;
 // Table Footer
 
 $cadmin-c-table-tfoot: () !default;
-$cadmin-c-table-tfoot: map-merge(
-	(
-		background-color: $cadmin-table-bg,
-	),
-	$cadmin-c-table-tfoot
-);
 
 // Table Caption
 
@@ -278,6 +260,7 @@ $cadmin-table-action-link: map-deep-merge(
 $cadmin-c-table: () !default;
 $cadmin-c-table: map-deep-merge(
 	(
+		background-color: $cadmin-table-bg,
 		border-spacing: 0,
 		color: $cadmin-table-color,
 		font-size: $cadmin-table-font-size,
@@ -287,8 +270,8 @@ $cadmin-c-table: map-deep-merge(
 			map-deep-merge(
 				$cadmin-c-table-thead,
 				(
+					background-color: $cadmin-table-head-bg,
 					table-cell: (
-						background-color: $cadmin-table-head-bg,
 						border-bottom: $cadmin-table-head-border-bottom-width
 							solid $cadmin-table-border-color,
 						border-top-width: $cadmin-table-head-border-top-width,
@@ -333,10 +316,6 @@ $cadmin-c-table: map-deep-merge(
 			map-deep-merge(
 				$cadmin-c-table-tbody,
 				(
-					table-cell: (
-						background-color:
-							map-get($cadmin-c-table-tbody, background-color),
-					),
 					tbody: (
 						border-top: (
 							2 * $cadmin-table-border-width,
@@ -345,20 +324,11 @@ $cadmin-c-table: map-deep-merge(
 					),
 				)
 			),
-		tfoot:
-			map-deep-merge(
-				$cadmin-c-table-tfoot,
-				(
-					table-cell: (
-						background-color:
-							map-get($cadmin-c-table-tfoot, background-color),
-					),
-				)
-			),
+		tfoot: $cadmin-c-table-tfoot,
 		caption: $cadmin-c-table-caption,
 		table-divider: (
+			background-color: $cadmin-table-divider-bg,
 			table-cell: (
-				background-color: $cadmin-table-divider-bg,
 				color: $cadmin-table-divider-color,
 				font-size: $cadmin-table-divider-font-size,
 				font-weight: $cadmin-table-divider-font-weight,
@@ -368,17 +338,14 @@ $cadmin-c-table: map-deep-merge(
 		),
 		table-active: (
 			background-color: $cadmin-table-active-bg,
-			table-cell: (
-				background-color: $cadmin-table-active-bg,
-			),
 			quick-action-menu: (
 				background-color: $cadmin-table-quick-action-menu-active-bg,
 			),
 		),
 		table-disabled: (
+			background-color: $cadmin-table-disabled-bg,
 			color: $cadmin-table-disabled-color,
 			table-cell: (
-				background-color: $cadmin-table-disabled-bg,
 				cursor: $cadmin-table-disabled-cursor,
 				href: (
 					color: $cadmin-table-disabled-color,
@@ -434,10 +401,6 @@ $cadmin-c-table-hover: map-deep-merge(
 				hover: (
 					background-color: $cadmin-table-hover-bg,
 					color: $cadmin-table-hover-color,
-					table-cell: (
-						background-color: $cadmin-table-hover-bg,
-						color: $cadmin-table-hover-color,
-					),
 					quick-action-menu: (
 						background-color:
 							$cadmin-table-quick-action-menu-hover-bg,
@@ -455,15 +418,85 @@ $cadmin-c-table-hover: map-deep-merge(
 		table-disabled: (
 			hover: (
 				background-color: $cadmin-table-disabled-bg,
-				table-cell: (
-					background-color: $cadmin-table-disabled-bg,
-				),
 			),
 		),
 	),
 	$cadmin-c-table-hover
 );
 
+// .table-focus
+
+// .table-focus
+
+$cadmin-c-tr-table-focus: () !default;
+$cadmin-c-tr-table-focus: map-deep-merge(
+	(
+		td: (
+			before: (
+				box-shadow: (
+					inset 0 2px 0 0 $cadmin-primary-l0,
+					inset 0 4px 0 0 $cadmin-white,
+					inset 0 -2px 0 0 $cadmin-primary-l0,
+					inset 0 -4px 0 0 $cadmin-white,
+				),
+				content: '',
+				display: block,
+				position: absolute,
+				left: math-sign($cadmin-table-border-width),
+				right: math-sign($cadmin-table-border-width),
+				top: math-sign($cadmin-table-border-width),
+				bottom: math-sign($cadmin-table-border-width),
+				pointer-events: none,
+				z-index: 1,
+			),
+			first-child: (
+				after: (
+					box-shadow: (
+						inset 2px 0 0 0 $cadmin-primary-l0,
+						inset 4px 0 0 0 $cadmin-white,
+					),
+					content: '',
+					display: block,
+					position: absolute,
+					pointer-events: none,
+					top: $cadmin-table-border-width,
+					bottom: $cadmin-table-border-width,
+					left: math-sign($cadmin-table-border-width),
+					z-index: 1,
+					width: 4px,
+				),
+			),
+			last-child: (
+				after: (
+					box-shadow: (
+						inset -2px 0 0 0 $cadmin-primary-l0,
+						inset -4px 0 0 0 $cadmin-white,
+					),
+					content: '',
+					display: block,
+					position: absolute,
+					pointer-events: none,
+					top: $cadmin-table-border-width,
+					bottom: $cadmin-table-border-width,
+					right: math-sign($cadmin-table-border-width),
+					z-index: 1,
+					width: 4px,
+				),
+			),
+		),
+	),
+	$cadmin-c-tr-table-focus
+);
+
+$cadmin-c-td-table-focus: () !default;
+$cadmin-c-td-table-focus: map-deep-merge(
+	(
+		box-shadow:
+			clay-enable-shadows($cadmin-component-focus-inset-box-shadow),
+	),
+	$cadmin-c-td-table-focus
+);
+
 // .table-sm
 
 $cadmin-c-table-sm: () !default;
@@ -758,9 +791,6 @@ $cadmin-table-list-action-link: map-deep-merge(
 
 // .table-list
 
-// thead, tbody, tfoot: Chrome 87 rendering issue. See https://github.com/liferay/clay/issues/3847.
-// thead table-cell, tbody table-cell, tfoot table-cell: Webkit (Safari 11) rendering issue with responsive-tables. See https://github.com/liferay/clay/issues/950
-
 $cadmin-c-table-list: () !default;
 $cadmin-c-table-list: map-merge(
 	(
@@ -778,8 +808,8 @@ $cadmin-c-table-list: map-merge(
 			map-deep-merge(
 				$cadmin-c-table-list-thead,
 				(
+					background-color: $cadmin-table-list-head-bg,
 					table-cell: (
-						background-color: $cadmin-table-list-head-bg,
 						border-bottom-width: 0,
 						font-size: $cadmin-table-list-head-font-size,
 						font-weight: $cadmin-table-list-head-font-weight,
@@ -796,11 +826,6 @@ $cadmin-c-table-list: map-merge(
 				$cadmin-c-table-list-tbody,
 				(
 					table-cell: (
-						background-color:
-							map-get(
-								$cadmin-c-table-list-tbody,
-								background-color
-							),
 						vertical-align: middle,
 					),
 				)
@@ -810,11 +835,6 @@ $cadmin-c-table-list: map-merge(
 				$cadmin-c-table-list-tfoot,
 				(
 					table-cell: (
-						background-color:
-							map-get(
-								$cadmin-c-table-list-tfoot,
-								background-color
-							),
 						vertical-align: middle,
 					),
 				)
@@ -830,9 +850,6 @@ $cadmin-c-table-list: map-merge(
 		),
 		table-active: (
 			background-color: $cadmin-table-list-active-bg,
-			table-cell: (
-				background-color: $cadmin-table-list-active-bg,
-			),
 			quick-action-menu: (
 				background-color: $cadmin-table-list-quick-action-menu-active-bg,
 			),
@@ -841,8 +858,6 @@ $cadmin-c-table-list: map-merge(
 			background-color: $cadmin-table-list-disabled-bg,
 			color: $cadmin-table-list-disabled-color,
 			table-cell: (
-				background-color: $cadmin-table-list-disabled-bg,
-				color: $cadmin-table-list-disabled-color,
 				href: (
 					color: $cadmin-table-list-disabled-color,
 					pointer-events: $cadmin-table-list-disabled-pointer-events,
@@ -917,9 +932,6 @@ $cadmin-c-table-list-table-hover: map-deep-merge(
 			tr: (
 				hover: (
 					background-color: $cadmin-table-list-hover-bg,
-					table-cell: (
-						background-color: $cadmin-table-list-hover-bg,
-					),
 					quick-action-menu: (
 						background-color:
 							$cadmin-table-list-quick-action-menu-hover-bg,
@@ -930,9 +942,6 @@ $cadmin-c-table-list-table-hover: map-deep-merge(
 		table-active: (
 			hover: (
 				background-color: $cadmin-table-list-active-bg,
-				table-cell: (
-					background-color: $cadmin-table-list-active-bg,
-				),
 				quick-action-menu: (
 					background-color:
 						$cadmin-table-list-quick-action-menu-hover-bg,
@@ -943,9 +952,6 @@ $cadmin-c-table-list-table-hover: map-deep-merge(
 			background-color: $cadmin-table-list-disabled-bg,
 			hover: (
 				background-color: $cadmin-table-list-disabled-bg,
-				table-cell: (
-					background-color: $cadmin-table-list-disabled-bg,
-				),
 			),
 		),
 	),

package/src/scss/cadmin/variables/_utilities.scss

@@ -782,7 +782,8 @@ $cadmin-c-prefers-link-underline: map-deep-merge(
 $cadmin-c-prefers-letter-spacing: () !default;
 $cadmin-c-prefers-letter-spacing: map-deep-merge(
 	(
-		'.c-prefers-letter-spacing-1 .cadmin': (
+		'.c-prefers-letter-spacing-1 .cadmin, .c-prefers-letter-spacing-1 .cadmin *':
+		(
 			letter-spacing: 1px !important,
 		),
 	),

package/src/scss/components/_tables.scss

@@ -75,6 +75,58 @@ caption {
 	@include clay-table-variant($c-table-hover);
 }
 
+// Table Focus
+
+tr.table-focus {
+	@include clay-css($c-tr-table-focus);
+
+	td {
+		$_td: setter(map-get($c-tr-table-focus, td), ());
+
+		@include clay-css($_td);
+
+		&::before {
+			@include clay-css(map-get($_td, before));
+		}
+
+		&::after {
+			@include clay-css(map-get($_td, after));
+		}
+
+		&:first-child {
+			$_first-child: setter(map-get($_td, first-child), ());
+
+			@include clay-css($_first-child);
+
+			&::before {
+				@include clay-css(map-get($_first-child, before));
+			}
+
+			&::after {
+				@include clay-css(map-get($_first-child, after));
+			}
+		}
+
+		&:last-child {
+			$_last-child: setter(map-get($_td, last-child), ());
+
+			@include clay-css($_last-child);
+
+			&::before {
+				@include clay-css(map-get($_last-child, before));
+			}
+
+			&::after {
+				@include clay-css(map-get($_last-child, after));
+			}
+		}
+	}
+}
+
+td.table-focus {
+	@include clay-css($c-td-table-focus);
+}
+
 // Table Row Backgrounds
 
 @each $color, $value in $table-row-theme-colors {

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

@@ -360,6 +360,8 @@
 
 	'en-au': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#B0BEC9" d="M0 64h512v384H0z"/><path fill="#0035A0" d="M16 80h480v352H16z"/><path fill="#FFF" d="M88 80h48v192H88z"/><path fill="#FFF" d="M16 152h192v48H16z"/><path fill="#FFF" d="M16 152h192v48H16z"/><path fill="#E03232" d="M96 80h32v192H96z"/><path fill="#E03232" d="M16 160h192v32H16z"/><path fill="#E03232" d="M27.3 80H16v11.3L196.7 272H208v-11.3z"/><path fill="#E03232" d="M208 91.3V80h-11.3L16 260.7V272h11.3z"/><path fill="#FFF" d="M384 272h16v16h-16zM96 336h32v32H96zM288 112h32v32h-32zM272 240h32v32h-32zM400 176h32v32h-32z"/></svg>',
 
+	'en-ca': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#B0BEC9" d="M0 64h512v384H0z"/><path fill="#E03232" d="M16 80h112v352H16zM384 80h112v352H384z"/><path fill="#FFF" d="M128 80h256v352H128z"/><path fill="#E03232" d="M301.9 300.3c0 3.6 4.1 13.4 4.1 13.4s-34.2-5.7-37.1-6.2-5.5-.5-5.4 5.5l2.4 18.2h-8.4l1.9-18.2c0-6-2.6-6-5.5-5.5l-37.1 6.4s4-9.7 4-13.4c0-4.7-10.1-11.4-21.1-21-11-9.7-18.6-14.6-18.6-15.7 0-1 7.8-.8 7.8-6.6 0-5.7-7.4-27.3-7.4-27.3s15.4 6 19.6 5.9c4.2 0 10.7-8.4 10.7-14.4 0 0 20.1 25.4 24.3 23.5 4.2-1.8-7.7-51.8-7.7-51.8s12 10.9 16.1 9.6c4.2-1.3 15.9-31.3 15.9-31.3s.1-.4.4-.4c.2 0 .4.4.4.4s11.8 29.9 16 31.1c4.2 1.3 16.1-9.7 16.1-9.7s-11.6 50-7.4 51.9c4.2 1.8 24.2-23.8 24.2-23.8 0 6 6.6 14.4 10.7 14.4 4.2-.1 19.5-6.1 19.5-6.1s-7.3 21.6-7.2 27.4c0 5.8 7.8 5.5 7.8 6.5s-7.6 6-18.5 15.8c-10.5 10-20.5 16.6-20.5 21.4z"/></svg>',
+
 	'en-gb': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#B0BEC9" d="M0 64h512v384H0z"/><path fill="#0035A0" d="M16 80h480v352H16z"/><path fill="#FFF" d="M208 80h96v352h-96z"/><path fill="#FFF" d="M16 208h480v96H16z"/><path fill="#FFF" d="M256 315.5 414.8 432H496v-59.5L337.2 256 496 139.5V80h-81.2L256 196.5 97.2 80H16v59.5L174.8 256 16 372.5V432h81.2z"/><path fill="#E03232" d="M256 295.7 441.9 432H496v-39.7L310.1 256 496 119.7V80h-54.1L256 216.3 70.1 80H16v39.7L201.9 256 16 392.3V432h54.1z"/><path fill="#E03232" d="M496 224H288V80h-64v144H16v64h208v144h64V288h208z"/></svg>',
 
 	'en-us': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="#C0CFD8" d="M0 64h512v384H0z"/><path fill="#E03232" d="M16 80h480v32H16z"/><path fill="#FFF" d="M16 112h480v32H16z"/><path fill="#E03232" d="M16 144h480v32H16z"/><path fill="#FFF" d="M16 176h480v32H16z"/><path fill="#E03232" d="M16 208h480v32H16z"/><path fill="#FFF" d="M16 240h480v32H16z"/><path fill="#E03232" d="M16 272h480v32H16z"/><path fill="#FFF" d="M16 304h480v32H16z"/><path fill="#E03232" d="M16 336h480v32H16z"/><path fill="#FFF" d="M16 368h480v32H16z"/><path fill="#E03232" d="M16 400h480v32H16z"/><path fill="#66A1CC" d="M16 80h256v192H16z"/><path fill="#0035A0" d="M16 80h256v192H16z"/></svg>',
@@ -884,6 +886,8 @@
 
 	'truck': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M510.4 270.5c3.1-14.3 1.3-24-3.2-36.1L452.6 98.9c-7-17.4-30.2-35.6-52.5-36.1h-48c-.7-15.7-12.2-31-33.3-31H30.3C9.4 31.8-.4 48.5.2 64.8H0V349c0 22.8 16.1 34.9 32.1 35.3v.4c0 114.3 158.6 127.7 187.5 31.7h104.3c29.6 93.2 187.2 86 187.2-31.7 0-20.2-5.1-36.9-13.1-50.8l12.4-63.4zM351.9 126.9h43l26 64.7H352v-64.7zM96.2 384.4c0-43.1 64.1-43.4 64.1 0 0 43.6-64.1 42.2-64.1 0zm344.5-92.8c-46.2-11.6-100.6 8.7-116.8 60.6H219.3c-21.1-68-107.3-81.7-155.1-41.3v-215h224.4v94.8c0 35.6 28.9 64.5 64.5 64.5h95.2l-.7 2.9m-64.9 126.3c0-43.1 64.1-43.4 64.1 0 .1 43.6-64.1 42.2-64.1 0z" fill="#{$color}"/></svg>',
 
+	'twitter-x': '<svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg"><path class="lexicon-icon-outline" d="M304.158 216.797 490.663 0h-44.196L284.525 188.242 155.182 0H6l195.592 284.655L6 512h44.198l171.016-198.79L357.809 512h149.182L304.147 216.797h.011Zm-60.536 70.366-19.818-28.345L66.124 33.272h67.885L261.26 215.295l19.817 28.345 165.411 236.601h-67.886l-134.98-193.067v-.011Z" fill="#{$color}"/></svg>',
+
 	'twitter': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M512.015 97.213c-18.842 8.368-39.089 14.015-60.332 16.531 21.68-12.991 38.358-33.589 46.2-58.108-20.306 12.026-42.776 20.774-66.71 25.485-19.164-20.423-46.462-33.179-76.688-33.179-58.02 0-105.039 47.048-105.039 105.039 0 8.222.936 16.238 2.721 23.934-87.308-4.389-164.698-46.2-216.516-109.749-9.041 15.508-14.22 33.559-14.22 52.812 0 36.457 18.55 68.612 46.727 87.425a104.651 104.651 0 0 1-47.575-13.137v1.317c0 50.91 36.222 93.336 84.266 102.99a105.153 105.153 0 0 1-27.679 3.687c-6.759 0-13.343-.673-19.779-1.901 13.371 41.723 52.169 72.123 98.135 72.942-35.959 28.176-81.252 44.971-130.465 44.971-8.486 0-16.853-.498-25.046-1.464 46.493 29.815 101.704 47.195 161.041 47.195 193.226 0 298.879-160.075 298.879-298.879 0-4.565-.117-9.07-.293-13.576 20.481-14.776 38.3-33.267 52.374-54.334z" fill="#{$color}"/></svg>',
 
 	'underline': '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path class="lexicon-icon-outline" d="M128 448h256v32H128v-32zm256-192V64h-64v192c0 85.6-128 85.6-128 0V64h-64v192c0 170.7 256 170.7 256 0z" fill="#{$color}"/></svg>',

package/src/scss/variables/_badges.scss

@@ -494,15 +494,85 @@ $badge-palette: map-deep-merge(
 		danger: $badge-danger,
 		light: $badge-light,
 		dark: $badge-dark,
-		badge-beta: (
+		'.badge-translucent.badge-primary': (
+			background-color: rgba($primary-d1, 0.04),
+			border-color: transparent,
+			color: $primary-d1,
+		),
+		'.badge-translucent.badge-info, .badge-beta': (
 			background-color: rgba($info-d1, 0.04),
+			border-color: transparent,
 			color: $info-d1,
-			text-transform: uppercase,
 		),
-		badge-beta-dark: (
+		'.badge-translucent.badge-success': (
+			background-color: rgba($success-d1, 0.04),
+			border-color: transparent,
+			color: $success-d1,
+		),
+		'.badge-translucent.badge-warning': (
+			background-color: rgba($warning-d1, 0.04),
+			border-color: transparent,
+			color: $warning-d1,
+		),
+		'.badge-translucent.badge-danger': (
+			background-color: rgba($danger-d1, 0.04),
+			border-color: transparent,
+			color: $danger-d1,
+		),
+		'%clay-dark-badge-translucent-primary': (
+			background-color: rgba($primary-l2, 0.04),
+			border-color: transparent,
+			color: $primary-l1,
+		),
+		'.clay-dark .badge-translucent.badge-primary': (
+			extend: '%clay-dark-badge-translucent-primary',
+		),
+		'.clay-dark.badge-translucent.badge-primary': (
+			extend: '%clay-dark-badge-translucent-primary',
+		),
+		'%clay-dark-badge-translucent-info': (
 			background-color: rgba($info-l2, 0.04),
+			border-color: transparent,
 			color: $info-l1,
-			text-transform: uppercase,
+		),
+		'.clay-dark .badge-translucent.badge-info, .badge-beta-dark': (
+			extend: '%clay-dark-badge-translucent-info',
+		),
+		'.clay-dark.badge-translucent.badge-info': (
+			extend: '%clay-dark-badge-translucent-info',
+		),
+		'%clay-dark-badge-translucent-success': (
+			background-color: rgba($success-l2, 0.04),
+			border-color: transparent,
+			color: $success-l1,
+		),
+		'.clay-dark .badge-translucent.badge-success': (
+			extend: '%clay-dark-badge-translucent-success',
+		),
+		'.clay-dark.badge-translucent.badge-success': (
+			extend: '%clay-dark-badge-translucent-success',
+		),
+		'%clay-dark-badge-translucent-warning': (
+			background-color: rgba($warning-l2, 0.04),
+			border-color: transparent,
+			color: $warning-l1,
+		),
+		'.clay-dark .badge-translucent.badge-warning': (
+			extend: '%clay-dark-badge-translucent-warning',
+		),
+		'.clay-dark.badge-translucent.badge-warning': (
+			extend: '%clay-dark-badge-translucent-warning',
+		),
+		'%clay-dark-badge-translucent-danger': (
+			background-color: rgba($danger-l2, 0.04),
+			border-color: transparent,
+			color: $danger-l1,
+		),
+		'.clay-dark .badge-translucent.badge-danger': (
+			extend: '%clay-dark-badge-translucent-danger',
+		),
+		'.clay-dark.badge-translucent.badge-danger': (
+			extend: '%clay-dark-badge-translucent-danger',
 		),
 	),
 	$badge-palette