[Text] Implement color text element

[lubber-de]

Feature Request

Description

Implement an element ui {color} textto style simple text with colors similar to header but without all the extra variations (exception perhaps: disabled). This is a high demanded feature since ages and should be simple to implement.

Example

<div class="ui red text">
    <span class="ui violet text">I am ultra violet</span>
    <p>i stay red</p>
</div>
<div class="ui red inverted segment">
    <p class="ui green text">
        Hulk gets angry
    </p>
    <p>
        Phew, being Bruce Banner again
    </p>
</div>

If the FUI Admins agree,, i am going to implement this while doing the central color definition PR. #261

Relates to

Semantic-Org/Semantic-UI#1885
Semantic-Org/Semantic-UI#2654
Semantic-Org/Semantic-UI#5564

[YamiOdymel]

It's hard to tell what's important if everything could has a color, it's one of the reason why it didn't be introduced in Semantic UI.

Also, once you compromised with the ui text component, it might lead the whole project to the way where Bootstrap is going (bunch of the helper classes), though you've mentioned "without all the extra variations".

I'm NOT trying to stop this feature to be added, but instead of something like:

<span class="ui violet text">I am violet</span>
<span class="ui green text">I am green</span>
<span class="ui yellow text">I am yellow</span>

Perhaps we should have a color system which is based on negative, positive, primary so we could name the text like:

<span class="ui negative text">Stopped</span>
<span class="ui positive text">Running</span>
<span class="ui warning text">Disk Full</span>

Which makes the text meaningful and semantic, also prevents the user is trying to random colorize the texts, but this might be another topic though.

[lubber-de]

@YamiOdymel As mentioned in my description , if you take a sneak peak at #261 your suggestion will be entirely implemented soon by defining your own color naming logic. 🙂

[y0hami]

We might want to talk about this because I agree with @YamiOdymel about using span tags to define where to apply the color. Having the ability to add the color classes to all elements will add a whole other level of complexity to managing overriding styles.

As @lubber-de has already said the new color system implemented in #261 will allow you to define your own colors so it shouldn't be a problem because it will make the defined colors universal.

[lubber-de]

I only had a very simple implementation in mind. I would also agree to the "span only" policy:

span.ui.red.text {
  color: #ff0000;
}

span.ui.disabled.text {
   opacity: .45;
}