[Colors] Central dynamic color map for every component

[lubber-de]

Description

This PR provides the base to create a central dynamic color palette in a single mixin-map instead of hardcoding every possible color in each component.
To stay backward compatible, this map currently holds the already existing global color variables.

Now it's possible to define only the colors and naming you want and each component will generate the appropriate component with the colors and those namings which are defined in the central map.

This way it's now easy to define completely new color-names without touching any component manually.

Example

If somebody does not like the basic FUI color palette but want to use only brand color namings instead, the colors.less needs to be created in the appropriate {site} folder of the theme folder having this example content:

// those variables should be defined in your site.variables  
@pinkie       : #ED458B;
@lightPinkie  : #f9b8d2;
@pinkieText   : #EB81B4;
@twilight     : #8689c8;
@lightTwilight: #d19fe3;
@twilightText : #662d8a;

@colors: {
  @pinkiepie: {
    color          : @pinkie;
    light          : @lightPinkie;
    border         : #BE1D77; 
    background     : @lightPinkie;
    header         : @pinkie;
    boxShadow      : none;
    boxFloatShadow : none;
    text           : @pinkieText;   
    lightText      : @pinkieText;   
    hoverText      : @pinkieText;                              
    focus          : @pinkieText; 
    lightFocus     : @pinkieText; 
    down           : @pinkieText; 
    lightDown      : @pinkieText; 
    active         : @pinkieText; 
    lightActive     : @pinkieText; 
    shadow         : @pinkieText; 
    lightShadow     : @pinkieText; 
    hover          : saturate(darken(@pinkie, 5), 10, relative);
    lightHover     : saturate(darken(@lightPinkie, 5), 10, relative);
    ribbon         : darken(@pinkie,10);
    invertedRibbon : darken(@lightPinkie,10);
    isDark         : false;
    isVeryDark     : false;
  };
  @twilight: {
    color          : @twilight;
    light          : @lightTwilight;
    border         : #263773; 
    background     : @lightTwilight;
    header         : @twilight;
    boxShadow      : none;
    boxFloatShadow : none;
    text           : @twilightText;
    lightText      : @twilightText;
    hoverText      : @twilightText;
    focus          : @twilightText; 
    lightFocus     : @twilightText; 
    down           : @twilightText; 
    lightDown      : @twilightText; 
    active         : @twilightText; 
    lightActive     : @twilightText; 
    shadow         : @twilightText; 
    lightShadow     : @twilightText; 
    hover          : saturate(darken(@twilight, 5), 10, relative);
    lightHover     : saturate(darken(@lightTwilight, 5), 10, relative);
    ribbon         : darken(@twilight,10);
    invertedRibbon : darken(@lightTwilight,10);
    isDark         : true;
    isVeryDark     : false;
  };
}

Now only those color names pinkiepie and twilight are available and compiled into the whole framework instead of the FUI default ones. You would be able to use everything like ui pinkiepie button ui twilight segment and so on...

Using this feature requires LESS >= v3.7

Element	Status	Special
segment	✔️	!important replaced by proper specificity 🙂
label	✔️
slider	✔️
progress	✔️
header	✔️	!important replaced by proper specificity 🙂
toast	✔️
button	✔️	!important replaced by proper specificity 🙂
message	✔️
card	✔️
statistic	✔️
icon	✔️	!important removed (was not needed)
table	✔️	!important removed (was not needed), added cell color support
grid	✔️	!important removed (was not needed)
menu	✔️	!important removed (was not needed)
loader	✔️
text	✔️	New component #289, see below
rating	✔️

Github Tasklist Overview

To be able to see open tasks counter in the Issues Overview

• segment
• label
• slider
• progress
• header
• toast
• button
• message
• card
• statistic
• icon
• table
• grid
• menu
• loader
• text
• rating

Screenshots

New Text component limited to span tags as discussed in #289

Tomatoes are <span class="ui red">red</span>

Table Cell color support

<td class="orange">September 14, 2013 (disabled)</td>
<td class="purple disabled">September 14, 2013 (disabled)</td>

Relates to

Semantic-Org/Semantic-UI#6673
Semantic-Org/Semantic-UI#6661
Semantic-Org/Semantic-UI#6193
Semantic-Org/Semantic-UI#2279
Semantic-Org/Semantic-UI#4650

[y0hami]

I think this is an excellent start and I think you should start moving the other components into this format.

Great work @lubber-de 👍

[lubber-de]

@hammy2899 Thanks 🙂
Would be great, if we could merge the label PR first, so I don't need to touch the current huge label code unnecessarily 😉

[prudho]

I agree with @hammy2899, this is a great addition !

[lubber-de]

This PR is ready for review now 😊

[y0hami]

LGTM

[ColinFrick]

LGTM

[lubber-de]

Docs added by fomantic/Fomantic-UI-Docs#377