Semantic-ui: Colored text

[piernik]

How to get colored text ex class="ui blue text"

[faller]

+1

[jlukic]

I understand the desire but I dont plan on adding colored text. I recommend just using css.

[JasonRodman]

I think this is one place semantic is lacking behind other frameworks. There needs to be some utility classes that we can use to apply common styles to any element without having to write custom css. Styles that have the same meaning no matter what component you apply time to. Some examples are common text color classes, text alignment, font weight classes, etc. I am sure we could think of a few more if need be. I find myself having to extend semantic to support these since I find them extremely useful since I write less css on a daily basis with them. I would urge you to reconsider your position on this. How do you plan to complete with bootstrap and foundation without at least having feature parity with them? These seem like no brainer bare minimum necessities to me.

[ivansglazunov]

+1
http://materializecss.com/color.html
Nice way to work with color
However, there may be too many CSS.
Why do I need it?
Standard CSS colors are very primitive and are not variable.
In design there is always at least 6, and sometimes 10-15 color states that you need to be able to apply to the background and font. The approach did not materialize so flexible.
I think it would be optimal to make a hybrid of:
Bootstrap
(text|bg)-danger (text-red) (text|bg)-warning (text-yellow) ...
Materialize
(text|bg)-(darken|lighten)-1 (12%) 2 (24%) 3 (36%)

[destan]

:+1: colored text is surely a need. Why wouldn't you consider adding it @jlukic ?

Would you merge if somebody make a pr?

[hardy2defy]

please add some color

[yaboi]

+1

[kevspadillo]

+1

[chen-ye]

+1

[levithomason]

+1 Colored text of all sorts is extremely common in web apps:

I'd be hard pressed to find a web app that didn't have simple colored text. Not sure if all the variations are necessary, but at least the basic color palette. Perhaps even a dark/light variation. The variables are all there, they just need classes.

It is quite annoying to have to create an override on every theme you use for this. Worse yet as the lack of these utils encourages developers to use means outside the framework to color text. In turn, you end up with some colors that are now outside the theme's color palette.

Willing to PR this if it would be accepted.

[liftM]

:+1:

[m0nzderr]

+1

[Panman82]

@jlukic I think it's useful so that colors match the theme's / Less colors. Sure, someone could make their own classes, but not having to worry about future color changes is +:100: Please re-consider.

[athyuttamre]

+1

[stephanecodes]

+1. It's very annoying. Why is it possible to create a blue button and not a blue text ??

[eeng]

+1

[Konard]

+1

[rpsirois]

+1

[serusko]

+1

[FSerg]

+1

[yuhr123]

+1

[joshbodine21]

+1...I find the need for this all the time and it is annoying to have to manage my own custom CSS just to match colors available in other Semantic-UI components.

[Atokulus]

+1

[rolandkofler]

+1

[brendon]

+1

[groeney]

+1 :)

[krtschmr]

poor. just ridiculous!

[JasonRodman]

So how many +1's do we need before this gets reconsidered?

[krtschmr]

of course, just because every other css frameworks is having those classes.

[ivantcholakov]

+1

[rodoneill]

-1

[destan]

@rodoneill it's kind of obvious and already mentioned why would anyone wants to have this feature. However it's not obvious why would anyone doesn't want it. Would you be kind enough to elaborate on your -1?

[dgbrunoh]

+1

[JohnnyDevNull]

+1

I switched from bootstrap an also there are some small colored text classe. Its now over a year and so many people want this feature. Why this will not be added?

[Ryadnov]

+1

[CodeAnimal]

+1

[paper777]

+1

[tarundhillon]

+1 please reconsider

[seibelj]

+1

[frangeris]

+1

[IonutBajescu]

Hey chaps, the best method to support a feature request is to use the reactions (there's a thumbs up in the first post - click on it and show your affection).

Posting _+1_ only lowers the chances of it being implemented as it annoys everyone that's watching the project. (~1k guys so far receive an email everytime someone posts a +1)

Thanks a lot.

[benlesh]

Does anyone know if there's already a fork with this feature?

[kamalkhan]

One could add the following in site/globals/site.overrides

@text-colors: blue, green, orange, pink, purple, red, teal, yellow, black, grey, white;
.text {
    .-(@i: length(@text-colors)) when (@i > 0) {
        @c: extract(@text-colors, @i);
        &.@{c} { color: @@c }
        .-((@i - 1));
    }.-;
}

Which would generate:

.text.white {
  color: #FFFFFF;
}
.text.grey {
  color: #CCCCCC;
}
.text.black {
  color: #1B1C1D;
}
.text.yellow {
  color: #F2C61F;
}
.text.teal {
  color: #00B5AD;
}
.text.red {
  color: #D95C5C;
}
.text.purple {
  color: #564F8A;
}
.text.pink {
  color: #D9499A;
}
.text.orange {
  color: #E07B53;
}
.text.green {
  color: #5BBD72;
}
.text.blue {
  color: #3B83C0;
}

And could be used as:

<span class="red text">I am red!</span>

[bitterloa]

here is a SASS version of the great LESS function that @kamalkhan provided above. after using this I'm kind of leaning towards SemanticUI not providing text colors like this in their build--however since it's such a common use case, it would be great to have a section of the SemanticUI site that had SASS/LESS "recipes" like this where users could add-on as needed:

$text-colors: blue, green, orange, pink, purple, red, teal, yellow, black, grey, white;
@each $tc in $text-colors{
  .text.#{$tc}{
    color: #{$tc};
  }
}

so, the SASS version is much shorter and easier to understand than the LESS version in my opinion...but I don't want to ruffle feathers :-) 💯

[sullyme]

I tried UI today and i'ts incredible it doesn't have text colors for span etc...

+1

[brendon]

Mildly related to this. Is there already a variable with the standard Semantic UI colours in it that we can use when iterating? I couldn't find one myself and wondered why there is so much repetition in the SASS already due to this.

[kamalkhan]

@brendon The color names in @text-colors: blue, green, orange, pink, purple, red, teal, yellow, black, grey, white; are actual variables in the semantic less variable files. The site/globals/site.overrides file is a good place to extend upon those.

[brendon]

Thanks @kamalkhan, I should be correct and say LESS rather than SASS :)

I see that the actual colours are defined in Semantic UI (e.g. @blue etc...) but there isn't a list of the colours in a variable (like you provide above) to make it easier to write an extension that iterates over the standard colours in Semantic UI. I guess they're not going to change any time soon, but if they did, this would make things a bit quicker to adjust.

[xDaizu]

Hey, @kamalkhan, nice initiative, but I think it would be best to implement it as

[class*="red text"]

instead of

.red.text

That way you could do something like: <div class="red text black label"> to have a black label with a red text with no chance for ambiguity (would ".text.red" or ".text.black" apply?). Sure, you could make a span, or an i or a div inside the label to put the class="text red"; but I think that to be less powerful.

I could be terribly mistaken, though. It _has happened_ before.

[joshuagruenstein]

+1

[hmontes]

+1

[asiniy]

+1 "D

[brendon]

Rather than the +1's, use the reactions feature as per: https://github.com/Semantic-Org/Semantic-UI/issues/1885#issuecomment-218009745

Saves on having to read unnecessary issue emails with +1 in them ;)

[akomm]

I understand the desire but I dont plan on adding colored text. I recommend just using css.

\
I propose to remove modal and table, instead use css.
I understand the desire for those components, but whatever.
\

[kevinresol]

I can't understand why headers / colored headers are component while colored content / text / paragraph / whatever-you-call-it is not.

[ivantcholakov]

+1

[rothattack]

in SASS you can map the colors if you want to change them:

$text-colors: blue, green, orange, pink, purple, red, teal, yellow, black, grey, white;
$colors: (
    blue: blue,
    green: #03C9A9,
    orange: orange,
    pink: pink,
    purple: purple,
    red: red,
    teal: teal,
    yellow: yellow,
    black: black,
    grey: grey,
    white: white
);
@each $tc in $text-colors{
  [class*="#{$tc} text"] {
    color: map-get($colors, $tc);
  }
}

@each $tc in $text-colors{
  [class*="#{$tc} link"] {
    $color: map-get($colors, $tc);
    color: $color;
    &:hover, &:focus {
        color: lighten($color, 10%);
    }
  }
}

[akomm]

@rothattack I think most people here know how to generate classes with sass. As most people know how to implement a modal. But they still use this library. Also: Color schema is part of this library. Why would you want to generate a theme outside and keep it sync manually? You see the point? :)

[denmasyarikin]

+1

[pbarney]

Arbitrarily ignoring rational requests like a petty dictator is a great way to encourage people to start a community-based fork.

Great work on the project @jlukic but the casual dismissal of legitimate requests without so much as a nod is going to alienate you, bud.

[akomm]

You cant argue on a level of total ignorance: https://github.com/Semantic-Org/Semantic-UI/issues/1885#issuecomment-77619519

Great work on the project @jlukic but the casual dismissal of legitimate requests __without so much as a nod__ is going to alienate you, bud.

Specifically the highlighted part in quote is the core problem. It makes it look like that: https://github.com/Semantic-Org/Semantic-UI/issues/1885#issuecomment-264227460

@jlukic: Please, if you have real concerns implementing it or let others implement it, which bother you, share them with the community. The reaction on this issue is great enough, so its worth giving it a proper reply after over 2 years of its existence.