OSP Projects

Deco Order Manager – Daily Changelog – September 29, 2025

Written by

Mark

in

,

Daily Change Log – September 29, 2025

Color Visibility & Accessibility Improvements

Overview

Comprehensive overhaul of the application’s color scheme to address visibility issues in both light and dark modes. All changes focused on improving contrast ratios, readability, and overall user experience.

Files Modified

  • src/app/globals.css – Core color system updates
  • src/components/ui/button.tsx – Button component color improvements
  • src/components/ui/badge.tsx – Badge component color fixes
  • src/components/navbar.tsx – Status indicator color updates
  • src/app/dashboard/campaigns/[id]/page.tsx – Campaign details color fixes
  • src/app/dashboard/campaigns/[id]/verify/page.tsx – Verification page color improvements

Key Changes

1. Enhanced Color Contrast System

  • Light Mode Improvements:
  • Updated muted text from --osp-gray-600 to --osp-gray-700 for better readability
  • Enhanced border visibility with --osp-gray-400 instead of --osp-gray-300
  • Improved primary colors using --osp-primary-600 for stronger contrast
  • Enhanced secondary and status colors for better visibility
  • Dark Mode Overhaul:
  • Switched to midnight blue palette for background (--midnight-blue-950)
  • Used card background --midnight-blue-900 for better layering
  • Enhanced muted text with --midnight-blue-300 for improved contrast
  • Brightened accent colors (--osp-primary-400, --osp-blue-400) for dark backgrounds

2. Global Table Styling Enhancements

  • Added comprehensive table styles with proper border collapse
  • Enhanced table headers with better background colors and font weights
  • Improved row hover states for better user interaction
  • Added consistent border styling using semantic color tokens

3. Component Color Improvements

  • Button Components:
  • Fixed destructive button text to use --destructive-foreground instead of generic foreground
  • Enhanced outline button borders and focus states
  • Improved ghost button hover states
  • Badge Components:
  • Corrected destructive badge text colors for better contrast
  • Enhanced focus and hover states

4. Semantic Color Token Migration

Replaced all hardcoded color classes with semantic tokens:

  • bg-red-500 → bg-danger
  • text-red-600 → text-danger
  • bg-green-500 → bg-success
  • text-green-600 → text-success
  • bg-blue-500 → bg-info
  • text-blue-600 → text-info
  • bg-yellow-500 → bg-alert
  • text-yellow-600 → text-alert

5. Enhanced Status Indicators

  • Updated scheduler status indicators in navbar to use semantic colors
  • Improved order status badges with proper contrast ratios
  • Enhanced error/success message styling throughout the application

6. CSS Override System

Added comprehensive CSS overrides for common color classes to ensure consistency:

  • Global text color overrides for better semantic color usage
  • Enhanced background color classes with proper transparency support
  • Improved hover and focus states across all interactive elements

Technical Details

Color Variables Updated

/* Light Mode Enhancements */
--muted: var(--osp-gray-200);           /* Was: --osp-gray-100 */
--muted-foreground: var(--osp-gray-700); /* Was: --osp-gray-600 */
--primary: var(--osp-primary-600);      /* Was: --osp-primary-500 */
--border: var(--osp-gray-400);          /* Was: --osp-gray-300 */

/* Dark Mode Improvements */
--background: var(--midnight-blue-950); /* Was: --osp-gray-900 */
--card: var(--midnight-blue-900);       /* Was: --osp-gray-800 */
--muted: var(--midnight-blue-800);      /* Was: --osp-gray-700 */
--primary: var(--osp-primary-400);      /* Was: --osp-primary-500 */

New CSS Rules Added

  • Enhanced table styling for better visibility
  • Improved button hover states
  • Semantic color class overrides
  • Better support for semi-transparent backgrounds using color-mix()

Impact & Benefits

  • Accessibility: Improved contrast ratios meet WCAG guidelines
  • Consistency: Unified color system across all components
  • Maintainability: Centralized color management through semantic tokens
  • User Experience: Better visual hierarchy and readability
  • Theme Support: Enhanced dark mode with proper contrast ratios

Testing Notes

  • No linting errors introduced
  • All semantic color tokens properly mapped
  • Button and badge components maintain proper contrast in both themes
  • Table styling enhanced without breaking existing layouts

Future Considerations

  • Color system now easily extensible through CSS custom properties
  • Semantic tokens allow for easy theme variations
  • Global overrides ensure consistency even with legacy hardcoded classes

More posts