Pipeline wizard placeholder use design tokens

What does this MR do and why?

Pipeline wizard placeholder use design tokens

Changelog: changed

Using design tokens to maintain contrast between the placeholder text and the sudo pipeline is especially challenging because the color of the content behind is variable and based on the code theme user preference.

Discussion about the path forward can be found in #509400 (comment 2320778756)

I think the best approach here to get this moving is to use your suggested contained message box solution, this will resolve our contrast issues cleanly.

Though worth noting that this is treating the symptom rather than the cause, the core UX problem here is really about the frustrating forced wizard flow that users can't skip. While we can improve the visual design, we should probably track the larger UX issue separately since multiple users have raised concerns about not being able to bypass the wizard when they already have a configuration in place, I have started this issue to track this #515953

References

Please include cross links to any resources that are relevant to this MR. This will give reviewers and future readers helpful context to give an efficient review of the changes introduced.

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Screenshots are required for UI changes, and strongly recommended for all other merge requests.

Before After
Screenshot 2025-01-30 at 10.20.40.png Screenshot 2025-01-30 at 10.42.28.png
Screenshot 2025-01-30 at 10.20.54.png Screenshot 2025-01-30 at 10.42.39.png
Screenshot 2025-01-30 at 10.21.09.png Screenshot 2025-01-30 at 10.42.55.png
Screenshot 2025-01-30 at 10.21.22.png Screenshot 2025-01-30 at 10.43.08.png

How to set up and validate locally

Numbered steps to set up and validate the change are strongly suggested.

  1. Go to a project without pages set up
  2. Go to the set up wizard Deploy > Pages
  3. See the placeholder

Closes #509400 (closed)

Edited by Dan MH — OOO

Merge request reports

Loading