Skip to main content

Colors

Color manipulation and theming utilities for the WorkPayCore frontend application.

Current Status​

⚠️ Note: This utility module is currently under development. The implementation contains commented-out code for future color functionality.

Planned Features​

The colors utility is designed to provide:

Color Generation​

  • Random color generation from strings
  • Consistent color mapping for user names, categories, etc.
  • Color blending and manipulation

Theme Integration​

  • Dynamic color generation based on themes
  • Dark/light mode color adjustments
  • Accessibility-compliant color contrasts

Commented Implementation​

The current file contains a commented-out blendColors function that suggests the following planned functionality:

// Planned function signature (currently commented out):
// export function blendColors(name) {
//   const bgColor = name ? randomColorFromString(name, '0.15') : 'gray.400';
//   let color = randomColorFromString(name);
//   const isBgDark = isDark(bgColor)(customTheme);
//   if (!isBgDark) color = 'gray.800';
//   return { bgColor, color };
// }

This suggests future capabilities for:

  • String-based color generation: Generate consistent colors from text inputs
  • Background/foreground pairing: Automatically determine contrasting text colors
  • Theme awareness: Integrate with dark/light theme detection
  • Accessibility: Ensure proper contrast ratios

Until this utility is fully implemented, consider using:

Manual Color Definitions​

const colors = {
  primary: '#0070f3',
  secondary: '#666',
  success: '#0f9d58',
  warning: '#ff9500',
  error: '#f44336',
};

Theme-based Colors​

const getThemeColor = (colorName, theme = 'light') => {
  const themeColors = {
    light: {
      primary: '#0070f3',
      background: '#ffffff',
      text: '#000000',
    },
    dark: {
      primary: '#4fb3f6',
      background: '#000000',
      text: '#ffffff',
    },
  };

  return themeColors[theme][colorName];
};

String-to-Color Utility​

const stringToColor = str => {
  let hash = 0;
  for (let i = 0; i < str.length; i++) {
    hash = str.charCodeAt(i) + ((hash << 5) - hash);
  }

  const hue = hash % 360;
  return `hsl(${hue}, 50%, 50%)`;
};

Future Development​

When this utility is fully implemented, it will likely provide:

  1. Consistent color generation for dynamic content
  2. Theme integration with the application's design system
  3. Accessibility helpers for contrast checking
  4. Color manipulation functions for shading and tinting

Status: 🚧 Under Development Priority: Medium Dependencies: Theme system, design tokens