I haven't used the html field before but I doubt I would have injected css. That's really a great idea and it I tested if it could solve our problem. I want to style my path to and don't want to have multiple places where I have to change something.
Having classes would be fine, but the current options are sufficient. :)
The button style value must be a valid style value. This is unfortunate in our case, but we can live with it. Instead of a meaningful word will just to note down that xxx matches "greenPathButtonStyle"
The following numbers refer to the numbers in the attachment
1. Define a background colour which identifies the "greenPathButtons"
2. Create a global constant in which you define the styles. You can select the correct html element by using attribute selectors. Just make sure, that you use the exact phrasing for the style value
input[class*="pathPanelButton"][style="background-color: rgb(12, 12, 12);"] { xxx}
3. Reuse the global constant in the html field
4. Shows the html of the generated path and the arrows the values matching the attribute selectors.
5. Shows that the style defined by 2 is applied to the path.
Thanks again for the idea for using html fields. I prefer this approach before defining a fixed number of options in the themes.