Icon Picker: Improvements, OOTB Property Editor, etc...

[markadrake]

Recommend some changes to the existing icon picker:

• Allow categorization/differentiation between the Umbraco defaults and icons added from other packages.
• How can we define synonyms for icons to make them easier to find in search?
• Expose the icon picker as a property editor that can be used as a data type.
  • Preconfig values:
    • Toggle color visibility (default to black if not visible).
    • Set default color. (Works with/without colors being visible)
    • Set default icon.
• Consider adding an optional icon override to the "block appearance" section once exposed as an OOTB property editor.

[mistyn8]

https://github.com/glombek/umbicosaurus from v8 days...

[bjarnef]

For reference also suggested by @callumbwhyte to relate meta data to icons: #9122

Furthermore in v14/v15 it has a limited set on icon colors.

It may be okay not to have a full set of color spectrum, but with default/light theme and from accessibility point of view I don't think the yellow and pink is useful for tree icons.

Currently I think this just align with the colors used in backoffice for toasts/notifications etc.

[nielslyngsoe]

All very good thoughts, and making the Icon Picker available as a Property Editor in Core is a good idea.

The Icon Picker is already thought to be made as a Property Editors, so it should be fairly simple to make the actual Property Editor UI, and then a corresponding Property Editor Schema(C# Property Value Editor)

The v.14+ Icon system is ready to be expanded with data like the umbiconsaurus, and I have already spoken to Joe and gotten the permission to migrate the data of the package into the Core.

Regarding the option to disable the color-selection, then it should not default to 'black', but to 'no-color' aka. inherit text color. Which is most likely what you meant but I just wanted to underline this.

Regarding colors we need to be a bit more concrete on what we like to happen, as well on what the actual needs are, the use-cases that this would be solving, so please hold your horses on that one. — Otherwise feel free to contribute with one or more of these ideas.

[skttl]

For colors, I would love if you could extend them, and add the colors you need. Eg. brand colors for specific content types.

[markadrake]

Whatever HQ is considering regarding "theming the back office, " the controls for colors should iterate over the available themes. Currently, I see v15 has at least a light and dark mode, so please allow two colors to be chosen in that case.

[bjarnef]

For me it would be okay to override to a fixed color in a specific theme besides the default/standard light theme, e.g. for dark theme white icon color. Otherwise it should in theory be able to set icon color per theme to ensure sufficient contrast.

[nielslyngsoe]

@markadrake currently the icon color system is based on CSS Custom Properties. In other words the specific color is not defined, instead a CSS Custom Property name is generated based on the color alias. Given the themes, the ability to define the actual color.
— Currently the feature is locked to all known colors from the past, meaning it does support the legacy colors, but the legacy colors are set to colors that is available in the system/theme, meaning you actually don't get more color options, but just a color that is close to what it was previously.
( see: src/Umbraco.Web.UI.Client/src/packages/core/resources/extractUmbColorVariable.function.ts )
Point begin, you can bring your own Theme or via the Entry Point Extension Type import your own CSS that overwrites specific CSS Custom Properties.
I hope that gives you some good options — I'm not against being able to extend the available options, but it's not our current priority, meaning that idea would have to wait, or come from a community PR. :-)