From 1f9682bf2894cb794f6d995d52ee584fb4188a46 Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Tue, 17 Mar 2026 12:08:12 +0100
Subject: [PATCH] fix(ui): make Table row a bg consumer for correct
 hover/selection states

Table rows now participate in the bg provider/consumer system, using
the appropriate neutral token level based on their container background.
On a neutral-1 surface (e.g. inside a Card), rows step up to neutral-2
tokens for hover, selected, pressed, and disabled states.

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 .changeset/fix-table-row-bg-consumer.md       |  7 +++
 .../ui/src/components/Table/Table.module.css  | 54 +++++++++++++++++++
 .../src/components/Table/components/Row.tsx   |  3 +-
 .../ui/src/components/Table/definition.ts     |  1 +
 4 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/fix-table-row-bg-consumer.md

diff --git a/.changeset/fix-table-row-bg-consumer.md b/.changeset/fix-table-row-bg-consumer.md
new file mode 100644
index 0000000000..3c8d64198c
--- /dev/null
+++ b/.changeset/fix-table-row-bg-consumer.md
@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Fixed Table row hover, selected, pressed, and disabled background states to use the correct neutral token level based on the container background.
+
+**Affected components:** Table
diff --git a/packages/ui/src/components/Table/Table.module.css b/packages/ui/src/components/Table/Table.module.css
index 62723db6c8..953ccbed65 100644
--- a/packages/ui/src/components/Table/Table.module.css
+++ b/packages/ui/src/components/Table/Table.module.css
@@ -121,6 +121,60 @@
       background-color: var(--bui-bg-neutral-1-pressed);
     }
 
+    &[data-on-bg='neutral-1'] {
+      &:hover {
+        background-color: var(--bui-bg-neutral-2-hover);
+      }
+
+      &[data-selected] {
+        background-color: var(--bui-bg-neutral-2-pressed);
+      }
+
+      &[data-pressed] {
+        background-color: var(--bui-bg-neutral-2-pressed);
+      }
+
+      &[data-disabled] {
+        background-color: var(--bui-bg-neutral-2-disabled);
+      }
+    }
+
+    &[data-on-bg='neutral-2'] {
+      &:hover {
+        background-color: var(--bui-bg-neutral-3-hover);
+      }
+
+      &[data-selected] {
+        background-color: var(--bui-bg-neutral-3-pressed);
+      }
+
+      &[data-pressed] {
+        background-color: var(--bui-bg-neutral-3-pressed);
+      }
+
+      &[data-disabled] {
+        background-color: var(--bui-bg-neutral-3-disabled);
+      }
+    }
+
+    &[data-on-bg='neutral-3'] {
+      &:hover {
+        background-color: var(--bui-bg-neutral-4-hover);
+      }
+
+      &[data-selected] {
+        background-color: var(--bui-bg-neutral-4-pressed);
+      }
+
+      &[data-pressed] {
+        background-color: var(--bui-bg-neutral-4-pressed);
+      }
+
+      &[data-disabled] {
+        background-color: var(--bui-bg-neutral-4-disabled);
+      }
+    }
+
     &[data-href],
     &[data-selection-mode],
     &[data-react-aria-pressable='true'] {
diff --git a/packages/ui/src/components/Table/components/Row.tsx b/packages/ui/src/components/Table/components/Row.tsx
index 6677f51308..e82bc23e6f 100644
--- a/packages/ui/src/components/Table/components/Row.tsx
+++ b/packages/ui/src/components/Table/components/Row.tsx
@@ -30,7 +30,7 @@ import { Flex } from '../../Flex';
 
 /** @public */
 export function Row<T extends object>(props: RowProps<T>) {
-  const { ownProps, restProps, analytics } = useDefinition(
+  const { ownProps, restProps, dataAttributes, analytics } = useDefinition(
     RowDefinition,
     props,
   );
@@ -85,6 +85,7 @@ export function Row<T extends object>(props: RowProps<T>) {
     <ReactAriaRow
       href={href}
       {...restProps}
+      {...dataAttributes}
       target={effectiveTarget}
       rel={effectiveRel}
       className={clsx(classes.root, restProps.className)}
diff --git a/packages/ui/src/components/Table/definition.ts b/packages/ui/src/components/Table/definition.ts
index 70234f26d0..e2236e21b7 100644
--- a/packages/ui/src/components/Table/definition.ts
+++ b/packages/ui/src/components/Table/definition.ts
@@ -91,6 +91,7 @@ export const TableBodyDefinition = defineComponent<TableBodyOwnProps>()({
 export const RowDefinition = defineComponent<RowOwnProps>()({
   styles,
   analytics: true,
+  bg: 'consumer',
   classNames: {
     root: 'bui-TableRow',
     cell: 'bui-TableCell',