Add CSS hover styles with inline styles using

inline-hover-styles.css

*[style*="--bg-default"] {
  background: var(--bg-default);
}
*[style*="--bg-hover"]:hover {
  background: var(--bg-hover);
}
*[style*="--bg-selected"].selected {
  background: var(--bg-selected);
}

note.md

This is a little trick to get CSS hover style behavior with inline styles.

The example snippet uses background color and 3 states (default, hover, selected class) but you likely also want to add similar functionality for at least color, border-color.

Demo: https://codepen.io/makakoa/pen/ZEVbQXO

Caveats:

• If you want to use themes it should look something like "--bg-default": Colors.get("bg") where Colors knows what to return for current theme.
• The default should follow the same pattern to ensure the specificity is lower than other states. (an inline 'background-color' would have higher specificity)
• If adding a rule for border color use border-color in the rule and border-width / style inline. If you add a border entry inline it will preclude these styles.