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