Add a new smart code editor as a variant of the Property Grid with all visual properties. Do not replace the property grid with this editor. They can live next to each other in different tabs. The smart code editor should support all features of the property grid but with advanced functionalities.
1. Show all kendo styles attached to the selected layer in a text format
2. Marks which style is overridden by user styles
3. Users can add any CSS property, not just the one listed by the Proprty grid editors.
4. Intellisense for CSS properties, something like:
5. Intellisense for using sass/css variables – the editor can recognize the property name and list only corresponding tokens for example – background – shows color tokens, box-shadow – shows effect tokens. Something like: