add color utils

pluralsh · Nov 19, 2024 · cb50e1d · cb50e1d
1 parent 4883570
commit cb50e1d
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 32 deletions.
diff --git a/src/components/table/Table.tsx b/src/components/table/Table.tsx
@@ -42,15 +42,13 @@ import EmptyState, { type EmptyStateProps } from '../EmptyState'
 import { Spinner } from '../Spinner'
 
 import {
+  tableCellColor,
+  tableCellHoverColor,
   tableFillLevelToBg,
   tableFillLevelToBorder,
   tableFillLevelToBorderColor,
-  tableFillLevelToCellBg,
-  tableFillLevelToHeaderBg,
   tableFillLevelToHighlightedCellBg,
-  tableFillLevelToHoverCellBg,
-  tableFillLevelToRaisedCellBg,
-  tableFillLevelToSelectedCellBg,
+  tableHeaderColor,
 } from './colors'
 import { FillerRows } from './FillerRows'
 import { useIsScrolling, useOnVirtualSliceChange } from './hooks'
@@ -171,24 +169,18 @@ export const Tr = styled.tr<{
     $fillLevel: fillLevel,
   }) => ({
     display: 'contents',
-    backgroundColor: highlighted
-      ? theme.colors[tableFillLevelToHighlightedCellBg[fillLevel]]
-      : selected
-      ? theme.colors[tableFillLevelToSelectedCellBg[fillLevel]]
-      : raised || (selectable && !selected)
-      ? theme.colors[tableFillLevelToRaisedCellBg[fillLevel]]
-      : theme.colors[tableFillLevelToCellBg[fillLevel]],
+    backgroundColor:
+      theme.colors[
+        tableCellColor(fillLevel, highlighted, raised, selectable, selected)
+      ],
 
     ...(clickable && {
       cursor: 'pointer',
 
       // highlight when hovered, but don't highlight if a child button is hovered
       '&:not(:has(button:hover)):hover': {
-        backgroundColor: selectable
-          ? selected
-            ? theme.colors[tableFillLevelToSelectedCellBg[fillLevel]]
-            : theme.colors[tableFillLevelToRaisedCellBg[fillLevel]]
-          : theme.colors[tableFillLevelToHoverCellBg[fillLevel]],
+        backgroundColor:
+          theme.colors[tableCellHoverColor(fillLevel, selectable, selected)],
       },
     }),
   })
@@ -217,9 +209,7 @@ const Th = styled.th<{
       alignItems: 'center',
       display: hideHeader ? 'none' : 'flex',
       position: 'relative',
-      backgroundColor: highlight
-        ? theme.colors[tableFillLevelToHighlightedCellBg[fillLevel]]
-        : theme.colors[tableFillLevelToHeaderBg[fillLevel]],
+      backgroundColor: theme.colors[tableHeaderColor(fillLevel, highlight)],
       zIndex: 4,
       borderBottom: theme.borders[tableFillLevelToBorder[fillLevel]],
       color: theme.colors.text,
@@ -244,7 +234,7 @@ const Th = styled.th<{
         right: 0,
         bottom: 0,
         width: 10000,
-        backgroundColor: theme.colors[tableFillLevelToHeaderBg[fillLevel]],
+        backgroundColor: theme.colors[tableHeaderColor(fillLevel, false)],
         borderBottom: hideHeader
           ? 'none'
           : theme.borders[tableFillLevelToBorder[fillLevel]],

diff --git a/src/components/table/colors.ts b/src/components/table/colors.ts
@@ -18,31 +18,25 @@ export const tableFillLevelToBg = {
   2: 'fill-two',
 } as const satisfies Record<TableFillLevel, string>
 
-export const tableFillLevelToHeaderBg = {
+const tableFillLevelToHeaderBg = {
   0: 'fill-one',
   1: 'fill-two',
   2: 'fill-three',
 } as const satisfies Record<TableFillLevel, string>
 
-export const tableFillLevelToCellBg = {
+const tableFillLevelToCellBg = {
   0: 'fill-zero',
   1: 'fill-one',
   2: 'fill-two',
 } as const satisfies Record<TableFillLevel, string>
 
-export const tableFillLevelToRaisedCellBg = {
+const tableFillLevelToRaisedCellBg = {
   0: 'fill-zero-selected',
   1: 'fill-one-selected',
   2: 'fill-two-selected',
 } as const satisfies Record<TableFillLevel, string>
 
-export const tableFillLevelToSelectedCellBg = {
-  0: 'fill-zero-hover',
-  1: 'fill-one-hover',
-  2: 'fill-two-hover',
-} as const satisfies Record<TableFillLevel, string>
-
-export const tableFillLevelToHoverCellBg = {
+const tableFillLevelToSelectedCellBg = {
   0: 'fill-zero-hover',
   1: 'fill-one-hover',
   2: 'fill-two-hover',
@@ -54,4 +48,42 @@ export const tableFillLevelToHighlightedCellBg = {
   2: 'fill-three',
 } as const satisfies Record<TableFillLevel, string>
 
-// TODO: Color getters.
+const tableFillLevelToHoverCellBg = {
+  0: 'fill-zero-hover',
+  1: 'fill-one-hover',
+  2: 'fill-two-hover',
+} as const satisfies Record<TableFillLevel, string>
+
+export const tableHeaderColor = (
+  fillLevel: TableFillLevel,
+  highlighted: boolean
+) =>
+  highlighted
+    ? tableFillLevelToHighlightedCellBg[fillLevel]
+    : tableFillLevelToHeaderBg[fillLevel]
+
+export const tableCellColor = (
+  fillLevel: TableFillLevel,
+  highlighted: boolean,
+  raised: boolean,
+  selectable: boolean,
+  selected: boolean
+) =>
+  highlighted
+    ? tableFillLevelToHighlightedCellBg[fillLevel]
+    : selected
+    ? tableFillLevelToSelectedCellBg[fillLevel]
+    : raised || (selectable && !selected)
+    ? tableFillLevelToRaisedCellBg[fillLevel]
+    : tableFillLevelToCellBg[fillLevel]
+
+export const tableCellHoverColor = (
+  fillLevel: TableFillLevel,
+  selectable: boolean,
+  selected: boolean
+) =>
+  selectable
+    ? selected
+      ? tableFillLevelToSelectedCellBg[fillLevel]
+      : tableFillLevelToRaisedCellBg[fillLevel]
+    : tableFillLevelToHoverCellBg[fillLevel]