From 51214435f680b09d288823e91715a1ba09142e97 Mon Sep 17 00:00:00 2001
From: Patrick Yeo <patrick.yeo@liferay.com>
Date: Thu, 2 Nov 2023 16:23:44 -0700
Subject: [PATCH] fix(@clayui/css): Adds .table-focus for focus outline around
 table row

    - Removes work around for Webkit (Safari 11) rendering issue with responsive-tables. See https://github.com/liferay/clay/issues/950
    - Removes work around for Chrome 87 rendering issue. See https://github.com/liferay/clay/issues/3847
---
 .../src/scss/atlas/variables/_tables.scss     |  47 ++++--
 .../src/scss/cadmin/components/_tables.scss   |  52 ++++++
 .../src/scss/cadmin/variables/_tables.scss    | 152 +++++++++---------
 .../clay-css/src/scss/components/_tables.scss |  52 ++++++
 .../clay-css/src/scss/variables/_tables.scss  | 135 ++++++++--------
 5 files changed, 285 insertions(+), 153 deletions(-)

diff --git a/packages/clay-css/src/scss/atlas/variables/_tables.scss b/packages/clay-css/src/scss/atlas/variables/_tables.scss
index 91da0e44c4..b590137e04 100644
--- a/packages/clay-css/src/scss/atlas/variables/_tables.scss
+++ b/packages/clay-css/src/scss/atlas/variables/_tables.scss
@@ -31,22 +31,10 @@ $table-head-link: map-deep-merge(
 // Table Body
 
 $c-table-tbody: () !default;
-$c-table-tbody: map-merge(
-	(
-		background-color: $white,
-	),
-	$c-table-tbody
-);
 
 // Table Footer
 
 $c-table-tfoot: () !default;
-$c-table-tfoot: map-merge(
-	(
-		background-color: $table-bg,
-	),
-	$c-table-tfoot
-);
 
 $table-caption-color: $gray-900 !default;
 
@@ -134,6 +122,41 @@ $table-link: map-deep-merge(
 	$table-link
 );
 
+// .table-focus
+
+$c-tr-table-focus: () !default;
+$c-tr-table-focus: map-deep-merge(
+	(
+		td: (
+			before: (
+				box-shadow: (
+					inset 0 0.125rem 0 0 $primary-l0,
+					inset 0 0.25rem 0 0 $white,
+					inset 0 -0.125rem 0 0 $primary-l0,
+					inset 0 -0.25rem 0 0 $white,
+				),
+			),
+			first-child: (
+				after: (
+					box-shadow: (
+						inset 0.125rem 0 0 0 $primary-l0,
+						inset 0.25rem 0 0 0 $white,
+					),
+				),
+			),
+			last-child: (
+				after: (
+					box-shadow: (
+						inset -0.125rem 0 0 0 $primary-l0,
+						inset -0.25rem 0 0 0 $white,
+					),
+				),
+			),
+		),
+	),
+	$c-tr-table-focus
+);
+
 // Table List
 
 $table-list-border-color: $gray-300 !default;
diff --git a/packages/clay-css/src/scss/cadmin/components/_tables.scss b/packages/clay-css/src/scss/cadmin/components/_tables.scss
index 8331dacdc5..5c49266d14 100644
--- a/packages/clay-css/src/scss/cadmin/components/_tables.scss
+++ b/packages/clay-css/src/scss/cadmin/components/_tables.scss
@@ -75,6 +75,58 @@ caption {
 	@include clay-table-variant($cadmin-c-table-hover);
 }
 
+// Table Focus
+
+tr.table-focus {
+	@include clay-css($cadmin-c-tr-table-focus);
+
+	td {
+		$_td: setter(map-get($cadmin-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($cadmin-c-td-table-focus);
+}
+
 // Table Row Backgrounds
 
 .table-striped {
diff --git a/packages/clay-css/src/scss/cadmin/variables/_tables.scss b/packages/clay-css/src/scss/cadmin/variables/_tables.scss
index a4d4b53055..1659480293 100644
--- a/packages/clay-css/src/scss/cadmin/variables/_tables.scss
+++ b/packages/clay-css/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,
-				),
 			),
 		),
 	),
diff --git a/packages/clay-css/src/scss/components/_tables.scss b/packages/clay-css/src/scss/components/_tables.scss
index cafb0a9ff1..cd7305cddf 100644
--- a/packages/clay-css/src/scss/components/_tables.scss
+++ b/packages/clay-css/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 {
diff --git a/packages/clay-css/src/scss/variables/_tables.scss b/packages/clay-css/src/scss/variables/_tables.scss
index 6b9a35bbfa..161c91eca9 100644
--- a/packages/clay-css/src/scss/variables/_tables.scss
+++ b/packages/clay-css/src/scss/variables/_tables.scss
@@ -77,15 +77,7 @@ $table-head-font-size: null !default;
 $table-head-font-weight: null !default;
 $table-head-height: 36px !default;
 
-// table-cell: Webkit (Safari 11) rendering issue with responsive-tables. See https://github.com/liferay/clay/issues/950
-
 $c-table-thead: () !default;
-$c-table-thead: map-merge(
-	(
-		background-color: $table-head-bg,
-	),
-	$c-table-thead
-);
 
 $table-head-link: () !default;
 
@@ -230,12 +222,10 @@ $table-action-link: map-deep-merge(
 
 // .table
 
-// 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
-
 $c-table: () !default;
 $c-table: map-deep-merge(
 	(
+		background-color: $table-bg,
 		border-spacing: 0,
 		color: $table-color,
 		font-size: $table-font-size,
@@ -245,8 +235,8 @@ $c-table: map-deep-merge(
 			map-deep-merge(
 				$c-table-thead,
 				(
+					background-color: $table-head-bg,
 					table-cell: (
-						background-color: $table-head-bg,
 						border-bottom: $table-head-border-bottom-width solid
 							$table-border-color,
 						border-top-width: $table-head-border-top-width,
@@ -290,30 +280,17 @@ $c-table: map-deep-merge(
 			map-deep-merge(
 				$c-table-tbody,
 				(
-					table-cell: (
-						background-color:
-							map-get($c-table-tbody, background-color),
-					),
 					tbody: (
 						border-top: calc(2 * #{$table-border-width}) solid
 							$table-border-color,
 					),
 				)
 			),
-		tfoot:
-			map-deep-merge(
-				$c-table-tfoot,
-				(
-					table-cell: (
-						background-color:
-							map-get($c-table-tfoot, background-color),
-					),
-				)
-			),
+		tfoot: $c-table-tfoot,
 		caption: $c-table-caption,
 		table-divider: (
+			background-color: $table-divider-bg,
 			table-cell: (
-				background-color: $table-divider-bg,
 				color: $table-divider-color,
 				font-size: $table-divider-font-size,
 				font-weight: $table-divider-font-weight,
@@ -323,17 +300,14 @@ $c-table: map-deep-merge(
 		),
 		table-active: (
 			background-color: $table-active-bg,
-			table-cell: (
-				background-color: $table-active-bg,
-			),
 			quick-action-menu: (
 				background-color: $table-quick-action-menu-active-bg,
 			),
 		),
 		table-disabled: (
+			background-color: $table-disabled-bg,
 			color: $table-disabled-color,
 			table-cell: (
-				background-color: $table-disabled-bg,
 				cursor: $table-disabled-cursor,
 				href: (
 					color: $table-disabled-color,
@@ -389,10 +363,6 @@ $c-table-hover: map-deep-merge(
 				hover: (
 					background-color: $table-hover-bg,
 					color: $table-hover-color,
-					table-cell: (
-						background-color: $table-hover-bg,
-						color: $table-hover-color,
-					),
 					quick-action-menu: (
 						background-color: $table-quick-action-menu-hover-bg,
 					),
@@ -409,15 +379,74 @@ $c-table-hover: map-deep-merge(
 		table-disabled: (
 			hover: (
 				background-color: $table-disabled-bg,
-				table-cell: (
-					background-color: $table-disabled-bg,
-				),
 			),
 		),
 	),
 	$c-table-hover
 );
 
+// .table-focus
+
+$c-tr-table-focus: () !default;
+$c-tr-table-focus: map-deep-merge(
+	(
+		td: (
+			before: (
+				box-shadow: (
+					inset 0 0.2rem 0 0 rgba($primary, 0.25),
+					inset 0 -0.2rem 0 0 rgba($primary, 0.25),
+				),
+				content: '',
+				display: block,
+				position: absolute,
+				left: math-sign($table-border-width),
+				right: math-sign($table-border-width),
+				top: math-sign($table-border-width),
+				bottom: math-sign($table-border-width),
+				pointer-events: none,
+				z-index: 1,
+			),
+			first-child: (
+				after: (
+					box-shadow: inset 0.2rem 0 0 0 rgba($primary, 0.25),
+					content: '',
+					display: block,
+					position: absolute,
+					pointer-events: none,
+					top: $table-border-width,
+					bottom: $table-border-width,
+					left: math-sign($table-border-width),
+					z-index: 1,
+					width: 0.25rem,
+				),
+			),
+			last-child: (
+				after: (
+					box-shadow: inset -0.2rem 0 0 0 rgba($primary, 0.25),
+					content: '',
+					display: block,
+					position: absolute,
+					pointer-events: none,
+					top: $table-border-width,
+					bottom: $table-border-width,
+					right: math-sign($table-border-width),
+					z-index: 1,
+					width: 0.25rem,
+				),
+			),
+		),
+	),
+	$c-tr-table-focus
+);
+
+$c-td-table-focus: () !default;
+$c-td-table-focus: map-deep-merge(
+	(
+		box-shadow: clay-enable-shadows($component-focus-inset-box-shadow),
+	),
+	$c-td-table-focus
+);
+
 // .table-bordered
 
 $table-bordered-border-width: $table-border-width !default;
@@ -569,7 +598,6 @@ $table-list-head-link: () !default;
 $c-table-list-thead: () !default;
 $c-table-list-thead: map-merge(
 	(
-		background-color: $white,
 		border-top-left-radius:
 			clay-border-radius-inner(
 				$table-list-border-radius,
@@ -589,7 +617,6 @@ $c-table-list-thead: map-merge(
 $c-table-list-tbody: () !default;
 $c-table-list-tbody: map-merge(
 	(
-		background-color: $white,
 		border-bottom-left-radius:
 			clay-border-radius-inner(
 				$table-list-border-radius,
@@ -607,12 +634,6 @@ $c-table-list-tbody: map-merge(
 // Table List Tfoot
 
 $c-table-list-tfoot: () !default;
-$c-table-list-tfoot: map-merge(
-	(
-		background-color: $white,
-	),
-	$c-table-list-tfoot
-);
 
 // .table.table-list.table-bordered th, .table.table-list.table-bordered td
 
@@ -709,9 +730,6 @@ $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
-
 $c-table-list: () !default;
 $c-table-list: map-merge(
 	(
@@ -729,7 +747,6 @@ $c-table-list: map-merge(
 				$c-table-list-thead,
 				(
 					table-cell: (
-						background-color: $table-list-head-bg,
 						border-bottom-width: 0,
 						font-size: $table-list-head-font-size,
 						font-weight: $table-list-head-font-weight,
@@ -745,8 +762,6 @@ $c-table-list: map-merge(
 				$c-table-list-tbody,
 				(
 					table-cell: (
-						background-color:
-							map-get($c-table-list-tbody, background-color),
 						vertical-align: middle,
 					),
 				)
@@ -756,8 +771,6 @@ $c-table-list: map-merge(
 				$c-table-list-tfoot,
 				(
 					table-cell: (
-						background-color:
-							map-get($c-table-list-tfoot, background-color),
 						vertical-align: middle,
 					),
 				)
@@ -773,9 +786,6 @@ $c-table-list: map-merge(
 		),
 		table-active: (
 			background-color: $table-list-active-bg,
-			table-cell: (
-				background-color: $table-list-active-bg,
-			),
 			quick-action-menu: (
 				background-color: $table-list-quick-action-menu-active-bg,
 			),
@@ -784,8 +794,6 @@ $c-table-list: map-merge(
 			background-color: $table-list-disabled-bg,
 			color: $table-list-disabled-color,
 			table-cell: (
-				background-color: $table-list-disabled-bg,
-				color: $table-list-disabled-color,
 				href: (
 					color: $table-list-disabled-color,
 					pointer-events: $table-list-disabled-pointer-events,
@@ -860,9 +868,6 @@ $c-table-list-table-hover: map-deep-merge(
 			tr: (
 				hover: (
 					background-color: $table-list-hover-bg,
-					table-cell: (
-						background-color: $table-list-hover-bg,
-					),
 					quick-action-menu: (
 						background-color: $table-list-quick-action-menu-hover-bg,
 					),
@@ -872,9 +877,6 @@ $c-table-list-table-hover: map-deep-merge(
 		table-active: (
 			hover: (
 				background-color: $table-list-active-bg,
-				table-cell: (
-					background-color: $table-list-active-bg,
-				),
 				quick-action-menu: (
 					background-color: $table-list-quick-action-menu-hover-bg,
 				),
@@ -884,9 +886,6 @@ $c-table-list-table-hover: map-deep-merge(
 			background-color: $table-list-disabled-bg,
 			hover: (
 				background-color: $table-list-disabled-bg,
-				table-cell: (
-					background-color: $table-list-disabled-bg,
-				),
 			),
 		),
 	),