# Node Color Customization

## Overview

The process builder now supports custom colors for nodes, allowing users to personalize the appearance of their process flows. Each node (except start and end nodes) can have customized background color, border color, and text color.

## Features

### Color Settings Panel

When a node is selected, the properties panel includes a "Color Settings" section with:

- **Background Color**: Color picker and text input for the node's background
- **Border Color**: Color picker and text input for the node's border 
- **Text Color**: Color picker and text input for ALL text content in the node (title, descriptions, details, icons)
- **Reset Button**: Restores default colors with one click

### Supported Node Types

Color customization is available for:
- Form nodes
- API nodes 
- Script nodes
- Business rule nodes
- Notification nodes
- Gateway/Decision nodes

### Shape Compatibility

Colors work with all supported node shapes:
- Rectangle
- Rounded Rectangle  
- Circle
- Diamond
- Hexagon
- Parallelogram
- Trapezoid

## Usage

1. Select any node (except start/end nodes)
2. In the Properties panel, locate the "Color Settings" section
3. Use color pickers or enter hex values directly
4. Changes apply immediately to the canvas
5. Use "Reset to Default Colors" to restore original appearance

## Technical Implementation

### Color Storage
Colors are stored in the node's data object:
```javascript
{
  backgroundColor: '#ffffff',
  borderColor: '#ddd', 
  textColor: '#333333'
}
```

### CSS Variables
The implementation uses CSS custom properties for dynamic styling:
```css
--node-bg-color: backgroundColor
--node-border-color: borderColor  
--node-text-color: textColor
```

### Backward Compatibility
Existing nodes without color properties automatically receive default values when selected or loaded.

## Default Colors

Each node type has its own distinctive color scheme:

### Form Nodes
- **Background**: `#faf5ff` (purple tint)
- **Border**: `#9333ea` (purple)
- **Text**: `#6b21a8` (dark purple)

### API Nodes
- **Background**: `#eff6ff` (blue tint)
- **Border**: `#3b82f6` (blue)
- **Text**: `#1e40af` (dark blue)

### Gateway/Decision Nodes
- **Background**: `#fff7ed` (orange tint)
- **Border**: `#f97316` (orange)
- **Text**: `#c2410c` (dark orange)

### Script Nodes
- **Background**: `#f9fafb` (gray tint)
- **Border**: `#6b7280` (gray)
- **Text**: `#374151` (dark gray)

### Business Rule Nodes
- **Background**: `#fdf4ff` (violet tint)
- **Border**: `#a855f7` (violet)
- **Text**: `#7c3aed` (dark violet)

### Notification Nodes
- **Background**: `#f0f9ff` (sky tint)
- **Border**: `#0ea5e9` (sky blue)
- **Text**: `#0284c7` (dark sky blue)

## Best Practices

### Accessibility
- Ensure sufficient contrast between text and background colors
- Test readability with different color combinations
- Consider colorblind users when choosing color schemes
- Text color affects ALL text elements in the node (titles, descriptions, details, and icons)
- Choose text colors that work well with your chosen background color

### Consistency  
- Use consistent color schemes across related processes
- Consider using colors to indicate node types or priorities
- Document color meanings for team collaboration

### Performance
- Color changes are applied in real-time
- Colors persist when saving/loading processes
- No impact on process execution or functionality 