u

src/utils/textThumbnail.js

@@ -1,3 +1,9 @@
+import {
+  BORDER,
+  BORDER_STRONG,
+  TEXT_BODY,
+  WHITE,
+} from '../colors';
 let encodeAvif = null;
 
 async function getAvifEncoder() {
@@ -42,20 +48,20 @@ export function renderTextToCanvas(text = '', width = 200, height = 280) {
   if (!ctx) return canvas;
 
   // Background
-  ctx.fillStyle = '#ffffff';
+  ctx.fillStyle = WHITE;
   ctx.fillRect(0, 0, width, height);
 
   // Subtle border
-  ctx.strokeStyle = '#e2e8f0';
+  ctx.strokeStyle = BORDER;
   ctx.lineWidth = 1;
   ctx.strokeRect(0.5, 0.5, width - 1, height - 1);
 
   // Top header accent line
-  ctx.fillStyle = '#cbd5e1';
+  ctx.fillStyle = BORDER_STRONG;
   ctx.fillRect(10, 8, 30, 2);
 
   // Render text lines
-  ctx.fillStyle = '#334155';
+  ctx.fillStyle = TEXT_BODY;
   ctx.font = '8px ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace';
 
   const paddingX = 10;