u

src/components/tiles/ArticleTile.jsx

@@ -14,6 +14,16 @@ import {
 } from '../article/ThumbHashImage';
 import { BrandLabel } from '../brand';
 import { thumb } from '../../api';
+import {
+  GREEN,
+  ICE,
+  INK_STRONG,
+  SCRIM_LABEL,
+  SCRIM_TILE,
+  TEXT_GLOW_DARK,
+  TEXT_GLOW_LIGHT,
+  WHITE,
+} from '../../colors';
 
 const MIN_EDGE_STRETCH = 10;
 
@@ -85,7 +95,7 @@ function drawContainedWithStretchedEdges(
     const grow = maxBlur * 0.5;
     lctx.globalCompositeOperation = 'destination-in';
     lctx.filter = `blur(${maxBlur}px)`;
-    lctx.fillStyle = '#000';
+    lctx.fillStyle = INK_STRONG;
     lctx.fillRect(
       offsetX - grow,
       offsetY - grow,
@@ -325,7 +335,7 @@ export class ArticleTile extends Tile {
           px: 0.75,
           py: 0.25,
           borderRadius: 999,
-          bgcolor: 'rgba(0, 0, 0, 0.65)',
+          bgcolor: SCRIM_LABEL,
           color: 'common.white',
           fontSize: 11,
           fontWeight: 600,
@@ -389,10 +399,10 @@ export class ArticleTile extends Tile {
             bottom: 0,
             px: 1,
             py: 0.75,
-            background: 'linear-gradient(transparent, rgba(0,0,0,0.65))',
+            background: SCRIM_TILE,
             textAlign: 'left',
-            color: '#fff',
-            textShadow: '0 1px 3px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.85)',
+            color: WHITE,
+            textShadow: TEXT_GLOW_DARK,
           }}
         >
           {article?.brand?.name ? (
@@ -405,11 +415,11 @@ export class ArticleTile extends Tile {
                 variant: 'caption',
                 noWrap: true,
                 sx: {
-                  color: '#b3e5fc',
+                  color: ICE,
                   opacity: 1,
                   fontWeight: 500,
                   lineHeight: 1.1,
-                  textShadow: '0 1px 3px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.85)',
+                  textShadow: TEXT_GLOW_DARK,
                 },
               }}
               sx={{ mb: 0.25 }}
@@ -421,9 +431,9 @@ export class ArticleTile extends Tile {
               fontWeight={600}
               noWrap
               sx={{
-                color: '#111',
+                color: INK_STRONG,
                 lineHeight: 1.2,
-                textShadow: '0 0 3px rgba(255, 255, 255, 1), 0 0 6px rgba(255, 255, 255, 0.9), 0 1px 2px rgba(255, 255, 255, 0.9)',
+                textShadow: TEXT_GLOW_LIGHT,
               }}
             >
               {label}
@@ -434,8 +444,8 @@ export class ArticleTile extends Tile {
               variant="caption"
               noWrap
               sx={{
-                color: '#ffffff',
-                textShadow: '0 1px 3px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.85)',
+                color: WHITE,
+                textShadow: TEXT_GLOW_DARK,
               }}
             >
               {sku}
@@ -447,8 +457,8 @@ export class ArticleTile extends Tile {
               fontWeight={600}
               component="div"
               sx={{
-                color: '#b9f6ca',
-                textShadow: '0 1px 3px rgba(0, 0, 0, 0.95), 0 0 2px rgba(0, 0, 0, 0.85)',
+                color: GREEN,
+                textShadow: TEXT_GLOW_DARK,
               }}
             >
               {formatPrice(article.net)}

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,
         }}
       >