Add color ingredient type

[sascha-karnatz]

What is this pull request for?

Add a new ingredient type to select a color. By default only a color input will be shown. It is possible to provide predefined colors as settings and then the color ingredient will show a select of all colors. Furthermore it has a second option 'custom_color' which adds the possibility to select a color which is not predefined, if necessary.

Screenshots

With predefined colors and custom_color option:

Without any settings:

Checklist

• I have followed Pull Request guidelines
• I have added a detailed description into each commit message
• I have added tests to cover this change

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 97.13%. Comparing base (c28b955) to head (b3b3623).
⚠️ Report is 3 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #3385   +/-   ##
=======================================
  Coverage   97.13%   97.13%           
=======================================
  Files         279      281    +2     
  Lines        7363     7376   +13     
=======================================
+ Hits         7152     7165   +13     
  Misses        211      211           

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[tvdeyen]

Very nice addition and perfectly crafted

[tvdeyen]

Maybe explain the settings here?

[tvdeyen]

And add this to the guides as well

[tvdeyen]

This could have been a ViewComponent ;)

[tvdeyen]

There is a null style value on the color-indicator

[tvdeyen]

We should not use --color as global property, because it will inherit from root.

We should either use a more specific name or add a default value in the class

.color-indicator {
  --color: linear-gradient(90deg, red 5%, yellow, blue 95%);
  background: var(--color);
}

[tvdeyen]

@sascha-karnatz I added two commits that adjust styling. Please pull before push :)