remove last fill level

src/components/table/Table.tsx

@@ -33,7 +33,7 @@ import { useVirtualizer } from '@tanstack/react-virtual'
 import styled, { useTheme } from 'styled-components'
 import { isEmpty, isNil } from 'lodash-es'
 
-import { type FillLevel, InfoOutlineIcon, Tooltip } from '../../index'
+import { InfoOutlineIcon, Tooltip } from '../../index'
 
 import Button from '../Button'
 import CaretUpIcon from '../icons/CaretUpIcon'
@@ -43,6 +43,7 @@ import EmptyState, { type EmptyStateProps } from '../EmptyState'
 import { Spinner } from '../Spinner'
 
 import {
+  type TableFillLevel,
   tableFillLevelToBg,
   tableFillLevelToBorder,
   tableFillLevelToBorderColor,
@@ -61,7 +62,7 @@ export type TableProps = DivProps & {
   columns: any[]
   hideHeader?: boolean
   padCells?: boolean
-  fillLevel?: FillLevel
+  fillLevel?: TableFillLevel
   rowBg?: 'base' | 'raised' | 'stripes'
   highlightedRowId?: string
   getRowCanExpand?: any
@@ -151,7 +152,7 @@ const Tbody = styled(TbodyUnstyled)(() => ({
 }))
 
 export const Tr = styled.tr<{
-  $fillLevel: FillLevel
+  $fillLevel: TableFillLevel
   $highlighted?: boolean
   $selected?: boolean
   $selectable?: boolean
@@ -192,7 +193,7 @@ export const Tr = styled.tr<{
 )
 
 const Th = styled.th<{
-  $fillLevel: FillLevel
+  $fillLevel: TableFillLevel
   $stickyColumn: boolean
   $highlight?: boolean
   $cursor?: CSSProperties['cursor']
@@ -266,7 +267,7 @@ const Th = styled.th<{
 
 // TODO: Set vertical align to top for tall cells (~3 lines of text or more). See ENG-683.
 export const Td = styled.td<{
-  $fillLevel: FillLevel
+  $fillLevel: TableFillLevel
   $firstRow?: boolean
   $loose?: boolean
   $padCells?: boolean

src/components/table/colors.ts

@@ -1,67 +1,59 @@
 import type { FillLevel } from '../contexts/FillLevelContext'
 
+export type TableFillLevel = Exclude<FillLevel, 3>
+
 export const tableFillLevelToBorder = {
   0: 'default',
   1: 'fill-one',
   2: 'fill-two',
-  3: 'fill-three',
-} as const satisfies Record<FillLevel, string>
+} as const satisfies Record<TableFillLevel, string>
 
 export const tableFillLevelToBorderColor = {
   0: 'border-fill-two',
   1: 'border-fill-three',
   2: 'border-fill-three',
-  3: 'border-fill-three',
-} as const satisfies Record<FillLevel, string>
+} as const satisfies Record<TableFillLevel, string>
 
 export const tableFillLevelToBg = {
   0: 'fill-zero',
   1: 'fill-one',
   2: 'fill-two',
-  3: 'fill-three',
-} as const satisfies Record<FillLevel, string>
+} as const satisfies Record<TableFillLevel, string>
 
 export const tableFillLevelToHeaderBg = {
   0: 'fill-one',
   1: 'fill-two',
   2: 'fill-three',
-  3: 'fill-three',
-} as const satisfies Record<FillLevel, string>
+} as const satisfies Record<TableFillLevel, string>
 
 export const tableFillLevelToCellBg = {
   0: 'fill-zero',
   1: 'fill-one',
   2: 'fill-two',
-  3: 'fill-three',
-} as const satisfies Record<FillLevel, string>
+} as const satisfies Record<TableFillLevel, string>
 
 export const tableFillLevelToRaisedCellBg = {
   0: 'fill-zero-selected',
   1: 'fill-one-selected',
   2: 'fill-two-selected',
-  3: 'fill-three-selected',
-} as const satisfies Record<FillLevel, string>
+} as const satisfies Record<TableFillLevel, string>
 
 export const tableFillLevelToSelectedCellBg = {
   0: 'fill-zero-hover',
   1: 'fill-one-hover',
   2: 'fill-two-hover',
-  3: 'fill-three-hover',
-} as const satisfies Record<FillLevel, string>
+} as const satisfies Record<TableFillLevel, string>
 
 export const tableFillLevelToHoverCellBg = {
   0: 'fill-zero-hover',
   1: 'fill-one-hover',
   2: 'fill-two-hover',
-  3: 'fill-three-hover',
-} as const satisfies Record<FillLevel, string>
+} as const satisfies Record<TableFillLevel, string>
 
 export const tableFillLevelToHighlightedCellBg = {
   0: 'fill-two',
   1: 'fill-three',
   2: 'fill-three',
-  3: 'fill-three',
-} as const satisfies Record<FillLevel, string>
+} as const satisfies Record<TableFillLevel, string>
 
 // TODO: Color getters.
-// TODO: Ask Nick for verification.