Draft: #3591838 [PHASE 2] introduce color props

Ben Mullinsrequested to merge
issue/canvas-3591838:3591838-phase-2-color-props into 1.x

This adds support for a 'color' prop type that supports two modes

  • Freeform, which has a color picker and all available brand kit colors
  • Brand Kit Which is limited to Brand Kit colors only, and can be filtered to only show colors from specific folders

This MR also adds the widget for editing props of the 'color' type.

Note that the color prop is stored as a string, which is either the CSS color value (rgb, hsl, etc) or a reference to a color entity. The prop value provided to templates is not this string value, but an object with the CSS color value, the W3C Color Token value, and (when Brand Kit) the color entity name and CSS variable name.

AI Disclosure: Used OpenCode + Kimi/Sonnet throughout. Always used in a targeted manner. For most of the JS it was more just to accelerate what I already intended to create. For the PHP there was a little more magic.

Testing instructions

  • enable 'canvas_dev_mode' module

  • Run DB updates to add Color entity type

  • enable 'canvas_test_code_components_color' to install 3 Brand Kit colors

  • The "Three colors" code compeonent has several color fields you can test manually

    color-prop-code-component-edit.png

  • You can also add a console log to the code component to see what a color prop value looks like to templates

    console-log-color-prop.png

Closes #3591838

Edited by Ben Mullins

Merge request reports