Improves task node color palette derivation and picker UX

[Mbeaulne]

Description

Introduces a deriveColorPalette utility that computes a cohesive set of colors (background, border, section background, and WCAG-appropriate text) from a single base hex color. This replaces the previous approach of using the raw selected color directly as the card background, and instead applies the derived palette across the task node card, collapsed node, and task details panel for a more polished and accessible appearance.

The color picker in the task details header is replaced with a custom circular trigger button that previews the derived palette (background, border, and pencil icon color), and the color picker input field now strips and re-adds the # prefix so users type only the hex digits. The renderTrigger prop was added to ColorPicker to support this custom trigger pattern.

The task color picker has also been moved out of the collapsible configuration section and into the task name header row, making it more immediately accessible.

Related Issue and Pull requests

Resolves #2119
Resolves #2120

Type of Change

• Bug fix
• New feature
• Improvement
• Cleanup/Refactor
• Breaking change
• Documentation update

Checklist

• I have tested this does not break current pipelines / runs functionality
• I have tested the changes on staging

Screenshots (if applicable)

Test Instructions

1. Open a pipeline in the editor and select a task node.
2. Use the color picker button in the task name header to assign a color.
3. Verify the task node card reflects the derived palette: background, border, section backgrounds, and text colors all update cohesively.
4. Verify the collapsed task node also shows the correct border color.
5. Confirm the color picker hex input accepts input without a leading # and applies correctly.
6. Test with light and dark preset colors to confirm WCAG text contrast is applied correctly.

Additional Comments

The deriveColorPalette function performs HSL-space transformations: the border is darkened and slightly more saturated, while the section background is desaturated and lightened toward white. These values were chosen to produce visually consistent results across the full range of preset colors.

[Mbeaulne]

• feat: v2 - pipeline details facelift #2187
• feat: v2 - task details context panel facelift #2186
• Adds inline rename for pipelines and tasks #2150
• Moves node actions to menu bar Node menu #2149
• Improves task node color palette derivation and picker UX #2148 👈 (View in Graphite)
• Replaces task details tabs with collapsible sections #2147
• Removes task details tab #2146
• master

This stack of pull requests is managed by Graphite. Learn more about stacking.

[github-actions]

🎩 Preview

A preview build has been created at: 04-23-move_colour_selector/9dc4045

[camielvs]

I'd like to see some comparisons between the current opacity-based system and this new palette-based system

[camielvs]

There's also no visual on-node feedback to indicate that a task is selected. Previously we added a darker border. In this PR the border is always dark and does not change when selected.

[Mbeaulne]

There's also no visual on-node feedback to indicate that a task is selected. Previously we added a darker border. In this PR the border is always dark and does not change when selected.

​I've adjusted the highlight on selection. We can adjust in another PR if needed.

[camielvs]

Given transparent is now maps through to empty string let's keep the # always visible

[camielvs]

lgtm. but suggest having the color input # always visible given transparent now renders as blank.

[Mbeaulne]

Merge activity

• Apr 30, 7:56 PM UTC: A user started a stack merge that includes this pull request via Graphite.
• Apr 30, 7:56 PM UTC: Graphite rebased this pull request as part of a merge.
• Apr 30, 7:59 PM UTC: @Mbeaulne merged this pull request with Graphite.