Edit history: Add extra attributes for buttons to denote the button variant for custom theming based on this

Current problem

Currently, to theme the different variants of buttons independently, you have to write CSS like this:

.Button\.module__button___cTVTTH {
  /* CSS for any button */
}
.Button\.module__primary___cTVTTH  {
  /* CSS for primary button */
}
.Button\.module__danger___cTVTTH {
  /* CSS for dangerous button */
}
.Button\.module__secondary___cTVTTH {
  /* CSS for secondary button */
}
.Button\.module__inverted___cTVTTH {
  /* CSS for inverted button */
}

This CSS may break at any time and will need to be updated any time the internal CSS module class names are changed. In addition, I'm not even sure if this works for all buttons of a particular type, e.g. if there's multiple implementations using their own CSS modules internally.

Proposed change

Add extra attributes to buttons for these visual variants, so one can write code like this:

*[data-flx-button-variant="primary"]  {
  /* CSS for primary button */
}
*[data-flx-button-variant="danger"] {
  /* CSS for dangerous button */
}
*[data-flx-button-variant="secondary"] {
  /* CSS for secondary button */
}
*[data-flx-button-variant="inverted"] {
  /* CSS for inverted button */
}

This would allow for CSS that doesn't break when the Fluxer app is updated and the internal CSS module class names are changed. This would also guarantee that the CSS can apply to any implementation of a button even if the CSS module is different.

Platform

macOS, Windows, Linux, Web

Additional information

This could be useful to e.g. add a text and/or box shadow when the text and/or icon colour on a particular button type would otherwise be hard to read, among other things. I probably will not be able to create a PR due to having slow internet that is likely not even considered broadband.