shah-harshit · Oct 28, 2026 · Oct 28, 2026 · Oct 28, 2026 · Oct 28, 2026 · Oct 28, 2026
diff --git a/docs/decisions/2026-10-27-settings-modal-surfaces-use-the-muted-step.md b/docs/decisions/2026-10-27-settings-modal-surfaces-use-the-muted-step.md
@@ -1,7 +1,7 @@
 # Settings-modal panels sit on the muted step, and a muted container never nests another
 
-- **Status:** Accepted
-- **Revisions:** v1 2026-10-27 (initial)
+- **Status:** Accepted; incident-table scope superseded by ADR:2026-10-28-incident-tables-and-filters-use-the-muted-step
+- **Revisions:** v1 2026-10-27 (initial) · v2 2026-10-28 (incident-table exception)
 - **Deciders:** Rohit Jain
 - **Guard:** reviewer; `table.test.tsx` and `field-doc-popover.test.tsx` pin the muted variants
 - **Related:** open-metadata/openmetadata-collate#7851, ADR:2026-10-12-dark-mode-targets-ai-mode-core-surfaces-only
@@ -57,3 +57,9 @@ A new settings-modal panel picks a variant instead of inventing a background. In
 surfaces stay white; only the frame shifts from the 8%-black `subtle` to the gray-200 `secondary`
 border. Revisit if the modal panel stops being the surface colour in dark mode, at which point
 the default step would no longer blend in.
+
+## Amendment — 2026-10-28
+
+ADR:2026-10-28-incident-tables-and-filters-use-the-muted-step adds a scoped exception to the
+modal-only restriction: incident tables and their shared filter band use the muted step on
+pages as well as in the incident drawer. The settings-modal and nesting rules above still apply.
diff --git a/docs/decisions/2026-10-28-incident-tables-and-filters-use-the-muted-step.md b/docs/decisions/2026-10-28-incident-tables-and-filters-use-the-muted-step.md
@@ -0,0 +1,31 @@
+# Incident tables and their filter band sit on the muted step
+
+- **Status:** Accepted
+- **Revisions:** v1 2026-10-28 (initial)
+- **Deciders:** Harshit Shah
+- **Guard:** reviewer; light and dark before/after screenshots in open-metadata/OpenMetadata#36426
+- **Related:** open-metadata/OpenMetadata#36423, ADR:2026-10-27-settings-modal-surfaces-use-the-muted-step
+
+## Context
+
+Incident rows and the entity incident filter band need a darker surface than the surrounding
+page cards in AI mode. Keeping the default card surface makes the table blend into its parent
+panel. The existing muted table variant already provides the required surface, frame, hover,
+and markdown fade behavior without call-site overrides.
+
+## Decision
+
+- `IncidentManager` uses `TableCard.Root variant="muted"` around both its filters and table.
+- `IncidentGroupsView`, `IncidentGroupDetail`, and `IncidentGroupDrawer` use the same muted
+  variant around their incident tables.
+- This is a scoped exception to the modal-only restriction in
+  ADR:2026-10-27-settings-modal-surfaces-use-the-muted-step. It does not change other page cards
+  or the global default variant.
+- Reuse the existing semantic tokens: muted surfaces are gray-900 in dark and white in light.
+  Filter controls retain the core input styling so their boundaries remain visible.
+
+## Consequences
+
+Incident tables and their filter band remain visibly darker than adjacent cards in dark mode.
+Light surfaces stay white. New incident-table containers follow this rule instead of reverting
+to the page-card surface or adding local color overrides.
@@ -147,7 +147,7 @@ describe('buildPieOption', () => {
         .borderColor;
 
     expect(border(LIGHT_CHART_THEME)).toBe('#ffffff');
-    expect(border(DARK_CHART_THEME)).toBe('#0c0e12');
+    expect(border(DARK_CHART_THEME)).toBe('#22262f');
   });
 
   it('describes the chart with its slice names', () => {

@@ -53,7 +53,7 @@ describe('chart themes', () => {
     expect(DARK_CHART_THEME.emptyFill).toBe(DARK_CHART_THEME.grid);
   });
 
-  it('keeps the dark chrome colours', () => {
+  it('matches dark segment borders to the card surface', () => {
     expect(DARK_CHART_THEME).toEqual({
       isDark: true,
       axisText: '#a8aeb9',
@@ -62,7 +62,7 @@ describe('chart themes', () => {
       xAxisTitle: '#cecfd2',
       grid: '#373a41',
       emptyFill: '#373a41',
-      segmentBorder: '#0c0e12',
+      segmentBorder: '#22262f',
       tooltipBg: '#22262f',
       tooltipText: '#eef0f4',
       tooltipBorder: '#373a41',

@@ -14,8 +14,7 @@
 import { DARK_CHART_PALETTE, LIGHT_CHART_PALETTE } from './palette';
 import type { ChartTheme } from './types';
 
-// Values moved unchanged from chart-core's LIGHT/DARK_THEME_COLORS so the
-// headless email renderer keeps producing the same images.
+// Explicit colours also support the headless email renderer, which has no CSS tokens.
 export const LIGHT_CHART_THEME: ChartTheme = {
   isDark: false,
   axisText: '#6b7280',
@@ -40,7 +39,8 @@ export const DARK_CHART_THEME: ChartTheme = {
   grid: '#373a41',
   // Not the dark surface colour, or empty pie tracks and map regions vanish.
   emptyFill: '#373a41',
-  segmentBorder: '#0c0e12',
+  // Blend segment outlines into the card surface rather than the page behind it.
+  segmentBorder: '#22262f',
   tooltipBg: '#22262f',
   tooltipText: '#eef0f4',
   tooltipBorder: '#373a41',

@@ -26,7 +26,7 @@ import { expect, test } from '../../../support/fixtures/base';
  * The left nav is pinned explicitly in every case. It is persisted per user in
  * localStorage (`user-preferences-store`), so it rides along in the saved
  * storageState and differs between machines — and it moves the table's container
- * from 1178px (expanded) to 1334px (collapsed). At 1334px the pre-fix layout
+ * from 1180px (expanded) to 1336px (collapsed). At 1336px the pre-fix layout
  * happens to fit, so without pinning the headline test below passes against the
  * unfixed code.
  */
@@ -45,8 +45,9 @@ const SEVERITY_CHIP_LABEL_TEST_ID = 'severity-chip-label';
  * bound under test — a precondition, so that a layout change which moves the
  * container fails loudly here instead of quietly changing what the geometry
  * assertions mean.
+ * TableCard draws its frame with an outline, so neither side consumes width.
  */
-const EXPANDED_NAV_CONTAINER_WIDTH = 1178;
+const EXPANDED_NAV_CONTAINER_WIDTH = 1180;
 
 /** The two widths LeftSidebar declares (`width` / `collapsedWidth`). */
 const EXPANDED_NAV_WIDTH = 228;

@@ -13,8 +13,8 @@
 import {
   Box,
   Button,
-  Card,
   FilterSelect,
+  TableCard,
   TriggerButton,
   Typography,
 } from '@openmetadata/ui-core-components';
@@ -162,8 +162,10 @@ const IncidentManager = ({
     );
   }
 
+  // Keep the incident rows and filter band below the surrounding page-card surface.
+  // ADR:2026-10-28-incident-tables-and-filters-use-the-muted-step
   return (
-    <Card className="tw:rounded-(--om-radius-10) tw:border-border-secondary">
+    <TableCard.Root variant="muted">
       <Box
         align="start"
         className="tw:p-4"
@@ -359,7 +361,7 @@ const IncidentManager = ({
         testCaseListData={testCaseListData}
         testCasePermissions={testCasePermissions}
       />
-    </Card>
+    </TableCard.Root>
   );
 };
 

@@ -151,7 +151,7 @@
 type PaginationContract<T> =
  | {
      customPaginationProps?: never;
      pagination?: TableComponentProps<T>['pagination'];
    }
  | { customPaginationProps?: CustomPaginationProps; pagination: false };

@@ -1759,7 +1759,7 @@
   return (
     <div
       className={twMerge(
-        'table-container',
+        'table-container tw:rounded-xl',
         rest.variant === 'muted'
           ? MUTED_CONTAINER_CLASSES
           : 'tw:border tw:border-utility-gray-200 tw:[&_tbody_tr:hover_td]:bg-secondary',

@@ -171,7 +171,7 @@ const IncidentGroupDetail = ({
           </Box>
         )}
       </Box>
-      <TableCard.Root className={INCIDENT_TABLE_CARD_CLASS}>
+      <TableCard.Root className={INCIDENT_TABLE_CARD_CLASS} variant="muted">
         {isError ? (
           <IncidentGroupsLoadError
             data-testid="incident-group-incidents-error"

@@ -224,7 +224,8 @@ const IncidentGroupDrawer = ({
                     </Button>
                   </Box>
                   <TableCard.Root
-                    className={`tw:flex tw:min-h-0 tw:flex-col ${INCIDENT_TABLE_CARD_CLASS}`}>
+                    className={`tw:flex tw:min-h-0 tw:flex-col ${INCIDENT_TABLE_CARD_CLASS}`}
+                    variant="muted">
                     {isError ? (
                       <IncidentGroupsLoadError
                         data-testid="incident-group-incidents-error"

@@ -328,7 +328,7 @@ const IncidentGroupsView = ({ canEditIncidents }: IncidentGroupsViewProps) => {
             }
           />
         )}
-        <TableCard.Root className={INCIDENT_TABLE_CARD_CLASS}>
+        <TableCard.Root className={INCIDENT_TABLE_CARD_CLASS} variant="muted">
           <IncidentGroupsTable
             groupBy={groupBy}
             groups={incidentGroups}