link text with svg shapes to more easily style with css

[deltadada]

I am having trouble styling colors because it seems the shapes (background fill) are not correlated with the note text (foreground text). E.G. maybe I'm missing something, but I cannot make the .tonic-button-selected fill = black and the .tonic-button-selected .tonic-text = white because there is no ID for the selected tonic text. Nor is the text contained in a container with the shape where I can cascade styles.

I would like to restyle a lot of the interface color-wise, but it seems I am limited to most text being one color.

OT:
This is an awesome tool -- I had extended a similar fretboard here tool in the past https://github.com/deltadada/Fretboard-Studies

I like your approach to the circle of fifths to set a lot of things. I feel the color hierarchy could use some improvements, a lot of which requires differentiating dark text on light bg vs. white text on dark bg. I have a hard time understanding color choices, e.g. the vii being an extremely eye-grabbing red.

[mikehadlow]

Hi Jeremy,
Thanks for raising this. It's true, I have no idea about interface design or colours, so I'd be very interested to see what you come up with. I'll try to find time to fix the selected text class issue. Very busy right now, but hopefully not too long in the future.

[deltadada]

I love what the app is doing and would like to have a go at restyling the colors. I will try and take a look again to see if there is a straightforward way to approach -- I would love to put the shapes and text in one element container with a class that groups them together for css styling of both. I guess where the shape gets a rect class, e.g., maybe put some kind of span around it and then when text is built, append it to the span or something. Assuming that is the order that happens.

Impressive work Mike!