Planned Feature: Allow Styling via Props

[epiccoleman]

Currently, this component is styled via CSS, and customization can be done by setting CSS variables in the rendering component's stylesheet. I'd like to add a way for users to customize the look and feel of the Circle of Fifths without needing to write any CSS if that's their preference.

As of the writing of this issue, the component supports the following customization properties:

    --cf-major-keys-fill: #84CC16;
    --cf-major-keys-fill-hover: #65A30D;
    --cf-major-keys-fill-selected:  #65A30D;
    --cf-minor-keys-fill: #84CC16;
    --cf-minor-keys-fill-hover: #65A30D;
    --cf-minor-keys-fill-selected:  #65A30D;
    --cf-diminished-keys-fill: #84CC16;

    --cf-stroke-color: black;
    --cf-stroke-width: 2px;
    --cf-text-color: black;

A few outstanding questions about how this should work:

• I'm not sure how feasible it is to use both the CSS variable method and styling via props at the same time. Might have to be an either/or kind of thing.
• React does not provide a good way to set styles for psuedo-selectors like :hover out of the box. Most of the solutions I've seen involve implementing onMouseEnter and onMouseLeave callbacks on the component, which is a bit gross, but workable.

Please feel free to comment on or vote on this issue if this is an important feature to you, and I'll try to prioritize accordingly! Also, PRs would be welcomed!

[epiccoleman]

See the demo-css-var-poc branch for a rough draft of how we might be able to do prop-based styling while still utilizing CSS for the base config of the component.

Copy/paste of the commit message from that demo:

This is an interesting experiment. It shows that the style of the circle can be set via CSS variables being changed on a ref of the component.

The way that the CSS is currently written means that this approach is not compatible with the .cf-theme configuration setup, which might be a hint that this isn't the best approach.

This supports the idea that CSS file based config and prop-based config aren't compatible. One potential solution may be to allow the user to pass two props: "configureViaCSS" and "customClassName". if configureViaCSS is true, then we add customClassName? customClassName : 'cf-wedge' and that would enable css-level config. Otherwise, we would only do the component's default style, and a user could do a document.documentElement.style.setProperty to set theme variables (or we could do that in the component when consuming a theme object).

definitely worth further investigation.

[epiccoleman]

Another thought on styling: Users can do CSS based styling by adding a class to whatever container the Circle of Fifths is rendered in (e.g. my-container) and then setting their styles for .my-container.cf-wedge.

I think the current approach with cf-theme may make that unworkable, so we need to think a bit more about how that works. One easy way to address this might be to add an optional prop that controls whether the cf-theme class is added to the component.

For my own usage the cf-theme approach works well, but it may not be the most flexible approach.