frontend

frontend/src/skeuomorphic_ws.jsx

@@ -7,6 +7,7 @@ import React, {
   useState,
 } from 'react';
 import { resolveDocumentAssetUrl } from './asset_manager';
+import { generateRandomTagColor, getReadableTextColor } from './utils/colors';
 import './skeuomorphic_ws.css';
 
 const ITEM_WIDTH = 220;
@@ -299,15 +300,7 @@ const normalizeColor = (input) => {
   return null;
 };
 
-const getContrastingTextColor = (hex) => {
-  if (!hex) return '#1b1f24';
-  const value = parseInt(hex.slice(1), 16);
-  const r = (value >> 16) & 0xff;
-  const g = (value >> 8) & 0xff;
-  const b = value & 0xff;
-  const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255;
-  return luminance > 0.6 ? '#1b1f24' : '#ffffff';
-};
+const getContrastingTextColor = (hex) => getReadableTextColor(hex, { light: '#1f2125' });
 
 const SkeuomorphicWorkspace = ({
   documents = [],
@@ -1555,11 +1548,8 @@ const SkeuomorphicWorkspace = ({
                   if (!label) {
                     return;
                   }
-                  const randomColor = `#${Math.floor(Math.random() * 0xffffff)
-                    .toString(16)
-                    .padStart(6, '0')}`;
                   try {
-                    await onCreateTag({ label, color: randomColor });
+                    await onCreateTag({ label, color: generateRandomTagColor() });
                     setActiveShelfTagId(null);
                   } catch (error) {
                     console.error('Failed to create tag', error);