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/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 {
@@ -165,6 +166,15 @@ export const Scrollable: Story = {
   },
 };
 
+export const BackgroundColors: Story = {
+  args: {},
+  render: (args) => (
+    <Background bg="paleBlue" p={8}>
+      <DataTable {...args} />
+    </Background>
+  ),
+};
+
 const DataTableDisableContainerQueryExample = () => {
   const defaultComponent = (
     <DataTable