u

src/components/tiles/CategoryTile.jsx

@@ -12,6 +12,12 @@ import DeleteOutlinedIcon from '@mui/icons-material/DeleteOutlined';
 import { getThumbHashDataUrl, isImageLoaded, markImageLoaded } from '../article/ThumbHashImage';
 import { thumb } from '../../api';
 import { tileBaseSx } from 'dashgui/tiles';
+import {
+  RED_TINT,
+  SCRIM_BADGE,
+  SCRIM_MEDIUM,
+  VEIL_HOVER,
+} from '../../colors';
 
 /**
  * Top row (1/3): sort handle | settings toggle | move handle.
@@ -28,7 +34,7 @@ function TopBand({ onSettingsClick, settingsTab, terminalCount, onPlacementClick
     top: '50%',
     transform: 'translateY(-50%)',
     color: 'common.white',
-    '&:hover': { bgcolor: 'rgba(255, 255, 255, 0.15)' },
+    '&:hover': { bgcolor: VEIL_HOVER },
   };
 
   return (
@@ -39,7 +45,7 @@ function TopBand({ onSettingsClick, settingsTab, terminalCount, onPlacementClick
         left: 0,
         right: 0,
         height: '33.33%',
-        bgcolor: 'rgba(0, 0, 0, 0.45)',
+        bgcolor: SCRIM_MEDIUM,
       }}
     >
       <IconButton
@@ -115,7 +121,7 @@ function MiddleBand({ settingsTab, nameInput, terminals, categoryPosterminalIds,
     ...(isActionTab
       ? {
         '&:hover': {
-          bgcolor: settingsTab === -3 ? 'rgba(211, 47, 47, 0.12)' : 'grey.400',
+          bgcolor: settingsTab === -3 ? RED_TINT : 'grey.400',
         },
       }
       : {}),
@@ -332,7 +338,7 @@ export class CategoryTile extends Component {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          bgcolor: 'rgba(0, 0, 0, 0.5)',
+          bgcolor: SCRIM_BADGE,
           px: 1,
         }}
       >