fix(List, DataList, DataTable): fix background colors + non-interactive table header spacing

packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx

@@ -78,7 +78,7 @@ export const TableHeaderRow: HeaderComponent = ({
               columnHeader
               dataTablePadding={dataTablePadding}
             >
-              <FlexBox alignItems="flex-end" gap={8} width="100%">
+              <FlexBox alignItems="flex-end" gap={8} height="100%" width="100%">
                 {filters && (
                   <FilterControl
                     columnKey={rowProperty}

packages/gamut/src/List/ListRow.tsx

@@ -126,7 +126,6 @@ export const ListRow = forwardRef<HTMLLIElement, ListRowProps>(
           c_sm: undefined,
         }}
         isOl={renderNumbering}
-        parentEl
         role={role}
         scrollable={scrollable}
         tabIndex={tabIndex}

packages/gamut/src/List/elements.tsx

@@ -75,10 +75,10 @@ const rowStates = states({
     flexDirection: { _: 'column', c_base: 'row', c_sm: 'column' },
   },
   /**
-   * Only the outermost element needs to inherit the background - otherwise it can stack with semitransparent bg colors and look off.
+   * Overrides the background of the element to transparent.
    */
-  parentEl: {
-    bg: 'inherit',
+  transparentBg: {
+    bg: 'transparent',
   },
 });
 
@@ -120,11 +120,10 @@ const spacingVariants = variant({
 
 const rowVariants = variant({
   prop: 'variant',
-  base: {
-    bg: 'background',
-  },
+  base: {},
   variants: {
     default: {
+      bg: 'background',
       border: 1,
       borderTop: 'none',
       '&:first-of-type': {
@@ -138,10 +137,12 @@ const rowVariants = variant({
       },
     },
     card: {
+      bg: 'background',
       border: 1,
       borderRadius: 'sm',
     },
     block: {
+      bg: 'background',
       border: 'none',
       borderRadius: 'sm',
     },

packages/styleguide/src/lib/Organisms/Lists & Tables/DataList/DataList.stories.tsx

@@ -1,7 +1,7 @@
 // Added because SB and TS don't play nice with each other at the moment
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
-import { DataList, DataTable, FlexBox } from '@codecademy/gamut';
+import { Box, DataList, DataTable, FlexBox } from '@codecademy/gamut';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {
@@ -129,22 +129,41 @@ type Story = StoryObj<typeof DataList>;
 
 export const Default: Story = {
   args: {},
+  render: (args) => (
+    <Box bg="red" p={8}>
+      <DataList {...args} />
+    </Box>
+  ),
 };
 
 export const FullDataList: Story = {
-  render: () => <DataListTemplate />,
+  render: () => (
+    <Box bg="red" p={8}>
+      <DataListTemplate />
+    </Box>
+  ),
 };
 
 export const Expanded: Story = {
   args: {
     expanded: ['Data'],
   },
+  render: (args) => (
+    <Box bg="red" p={8}>
+      <DataList {...args} />
+    </Box>
+  ),
 };
 
 export const Selected: Story = {
   args: {
     selected: ['Data'],
   },
+  render: (args) => (
+    <Box bg="red" p={8}>
+      <DataList {...args} />
+    </Box>
+  ),
 };
 
 export const EmptyState: Story = {
@@ -155,6 +174,11 @@ export const EmptyState: Story = {
     height: '45vh',
     minHeight: '300px',
   },
+  render: (args) => (
+    <Box bg="red" p={8}>
+      <DataList {...args} />
+    </Box>
+  ),
 };
 
 export const EmptyStateCustom: Story = {
@@ -166,6 +190,11 @@ export const EmptyStateCustom: Story = {
     minHeight: '300px',
     emptyMessage: <CustomEmptyState />,
   },
+  render: (args) => (
+    <Box bg="red" p={8}>
+      <DataList {...args} />
+    </Box>
+  ),
 };
 
 export const NonSelectable: Story = {
@@ -175,29 +204,38 @@ export const NonSelectable: Story = {
     expandedContent: undefined,
     header: true,
   },
+  render: (args) => (
+    <Box bg="red" p={8}>
+      <DataList {...args} />
+    </Box>
+  ),
 };
 
 const DataListDisableContainerQueryExample = () => {
   const defaultComponent = (
-    <DataList
-      columns={simpleColumns}
-      header
-      id="default-container-query"
-      idKey="name"
-      rows={simpleRows}
-      spacing="condensed"
-    />
+    <Box bg="red" p={8}>
+      <DataList
+        columns={simpleColumns}
+        header
+        id="default-container-query"
+        idKey="name"
+        rows={simpleRows}
+        spacing="condensed"
+      />
+    </Box>
   );
 
   const disabledComponent = (
-    <DataList
-      columns={simpleColumns}
-      disableContainerQuery
-      id="disabled-container-query"
-      idKey="name"
-      rows={simpleRows}
-      spacing="condensed"
-    />
+    <Box bg="red" p={8}>
+      <DataList
+        columns={simpleColumns}
+        disableContainerQuery
+        id="disabled-container-query"
+        idKey="name"
+        rows={simpleRows}
+        spacing="condensed"
+      />
+    </Box>
   );
 
   return (

packages/styleguide/src/lib/Organisms/Lists & Tables/DataTable/DataTable.mdx

@@ -140,6 +140,29 @@ You can set the `shadow` prop to `true` to add a shadow to the DataTable when it
 
 <Canvas of={DataTableStories.Scrollable} />
 
+## Background colors
+
+DataTable's background is linked to the `current-background` token. You can change the color scheme of a DataTable by wrapping it in a `<Background />` component from `@codecademy/gamut-styles`.
+
+When you wrap a DataTable in `Background`, the component will also automatically adjust its colors to ensure proper contrast and accessibility. For example, using a dark background like `bg="black"` will switch the DataTable to dark mode, making text and UI elements light-colored for better contrast. You can find more information about the `Background` component in the <LinkTo id="Foundations/ColorMode">ColorMode documentation</LinkTo>.
+
+### Usage
+
+```tsx
+import { Background } from '@codecademy/gamut-styles';
+import { DataTable } from '@codecademy/gamut';
+
+const MyDarkDataTable = () => {
+  return (
+    <Background bg="black" p={8}>
+      <DataTable id="dark-table" idKey="id" rows={data} columns={columns} />
+    </Background>
+  );
+};
+```
+
+<Canvas of={DataTableStories.BackgroundColors} />
+
 ## Container Query Control
 
 DataTable inherits container query functionality from the underlying List component. By default, DataTable uses CSS container queries to determine responsive behavior based on the container width rather than viewport width. This ensures optimal display when DataTable is placed in constrained layouts.

packages/styleguide/src/lib/Organisms/Lists & Tables/DataTable/DataTable.stories.tsx

@@ -2,6 +2,7 @@
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-nocheck
 import { DataTable } from '@codecademy/gamut';
+import { Background } from '@codecademy/gamut-styles';
 import type { Meta, StoryObj } from '@storybook/react';
 
 import {
@@ -123,6 +124,11 @@ type Story = StoryObj<typeof DataTable>;
 
 export const Default: Story = {
   args: {},
+  render: (args) => (
+    <Background bg="paleBlue" p={8}>
+      <DataTable {...args} />
+    </Background>
+  ),
 };
 
 export const FullDataTable: Story = {
@@ -137,7 +143,11 @@ export const EmptyState: Story = {
     height: '45vh',
     minHeight: '300px',
   },
-  render: (args) => <DataTable {...args} />,
+  render: (args) => (
+    <Background bg="black" p={8}>
+      <DataTable {...args} />
+    </Background>
+  ),
 };
 
 export const EmptyStateCustom: Story = {
@@ -149,11 +159,20 @@ export const EmptyStateCustom: Story = {
     minHeight: '300px',
     emptyMessage: <CustomEmptyState />,
   },
-  render: (args) => <DataTable {...args} />,
+  render: (args) => (
+    <Background bg="black" p={8}>
+      <DataTable {...args} />
+    </Background>
+  ),
 };
 
 export const LoadingRows: Story = {
   args: { loading: true, shadow: true },
+  render: (args) => (
+    <Background bg="black" p={8}>
+      <DataTable {...args} />
+    </Background>
+  ),
 };
 
 export const Scrollable: Story = {
@@ -163,28 +182,46 @@ export const Scrollable: Story = {
     height: '400px',
     wrapperWidth: '800px',
   },
+  render: (args) => (
+    <Background bg="black" p={8}>
+      <DataTable {...args} />
+    </Background>
+  ),
+};
+
+export const BackgroundColors: Story = {
+  args: {},
+  render: (args) => (
+    <Background bg="paleBlue" p={8}>
+      <DataTable {...args} />
+    </Background>
+  ),
 };
 
 const DataTableDisableContainerQueryExample = () => {
   const defaultComponent = (
-    <DataTable
-      columns={simpleColumns}
-      id="default-table-query"
-      idKey="name"
-      rows={simpleRows}
-      spacing="condensed"
-    />
+    <Background bg="black" p={8}>
+      <DataTable
+        columns={simpleColumns}
+        id="default-table-query"
+        idKey="name"
+        rows={simpleRows}
+        spacing="condensed"
+      />
+    </Background>
   );
 
   const disabledComponent = (
-    <DataTable
-      columns={simpleColumns}
-      disableContainerQuery
-      id="disabled-table-query"
-      idKey="name"
-      rows={simpleRows}
-      spacing="condensed"
-    />
+    <Background bg="black" p={8}>
+      <DataTable
+        columns={simpleColumns}
+        disableContainerQuery
+        id="disabled-table-query"
+        idKey="name"
+        rows={simpleRows}
+        spacing="condensed"
+      />
+    </Background>
   );
 
   return (