Semantic-ui: [Button] add white color

[rokoroku]

I cannot find white variation of button's color.
(The basic class only makes the button transparent, not white.)

It seems like the only workaround is using 'basic' button composed with style background-color:white.

I can find some related issues: #111, #4343 but nothing remained now.

Is it rejected feature or PR-welcomed?

[awgv]

Hi @rokoroku. Not sure why the white variation was lost during the transition from SUI version 1 to 2 a couple of years ago, but if you have some time, I’d go for it. It will take some time to be reviewed, though.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed in 30 days if no further activity occurs. Thank you for your contributions.

[lubber-de]

Since Fomantic-UI 2.7.0 you can add additional colors (or reduce/change the existing ones) in a single file
https://github.com/fomantic/Fomantic-UI/blob/master/src/themes/default/globals/colors.less

For example, to add white you would add something like:

  @white: {
    color          : @black;
    light          : @grey;
    border         : @black;
    background     : @white;
    header         : @white;
    boxShadow      : @white;
    boxFloatShadow : @white;
    text           : @white;
    lightText      : @white;
    hoverText      : @white;
    focus          : @white;
    lightFocus     : @white;
    down           : @white;
    lightDown      : @white;
    active         : @white;
    lightActive    : @white;
    shadow         : @white;
    lightShadow    : @white;
    hover          : @white;
    lightHover     : @white;
    ribbon         : @white;
    invertedRibbon : @white;
    isDark         : false;
    isVeryDark     : false;
  };

to the @colors mixin and you not only gain white button, but also all other elements which support colors 😉

If especially white makes sense for every component and without any much adjustments is of course questionable though 🤔

[rokoroku]

Thanks for the information, @lubber-de