[design system] Color picker redesign

[kulmann]

Initial Checklist

• I understand this is a user story and questions should be posted in the Community Discussions
• I searched issues and couldn’t find anything (or linked relevant results below)

User Story

• As a console user, I want to use a super pretty color picker so that I'm stunned by a beautiful UI.
• As a console developer I want to offer a reduced color picker where only hue can be modified, so that I can offer a meaningful color picker for material color generation input (where only changes in hue affect color generator output).

User Value

good color input UI/UX

Acceptance Criteria

• pill-like design like in the mock below
  • label inside the pill
  • resulting hex-value below with a subtitle-like text styling
  • a colored circle which visualizes the selected color
  • put the the pill leftside the hex code
  • put a x for cancel on the rightside of the mock
• a slot in the upper area of the color input where the consuming code is able to render a ui-skeleton visualizing context for the chosen color
• a click anywhere on the component opens the html-native color picker in default mode

current

mock