Color Utilities: Foundation

[IamManchanda]

Similar to Buttons => http://foundation.zurb.com/sites/docs/button.html
I think there should be text and background based color utilities ( helper classes ) in foundation

For text something like

.text.white
.text.dark
.text.primary
.text.secondary
.text.success
.text.alert
.text.warning

and for backgrounds something like

.background.primary
.background.secondary
.background.success
.background.alert
.background.warning

As, i dont think there is any humongous need for .background.white & .background.dark so haven't included in my above code

[IamManchanda]

But there are callouts too http://foundation.zurb.com/sites/docs/callout.html
so a bit confused about background ones

[Deckluhm]

Even if I perfectly understand why these helper classes could be convenient, I feel like it encourages bad CSS practices.

This is the kind of things you should define at component level, as it is done for buttons for example: http://foundation.zurb.com/sites/docs/button.html#coloring

Because font and background colors are linked (you don't want black text on black background for example), it doesn't feel right to have to do this:

<div class="background-black text-white">White text in a black div</div>

That said, I know there are use-cases where text colors helpers are the right way to go so I don't know...

I'd love to hear what others think about that.

[IamManchanda]

I like your thought for backgrounds to be defining at component level .... i have to say that
Same like buttons and callouts

but for text colors , i am a little bit confused!

[ncoden]

We cannot add "color helpers" just to let the user changing the color where ze wants to because color itself is not semantical. It complexify the HTML markup and, like @Deckluhm said, it lead to bad practices.

The only proper way to define styles is with CSS directly. HTML markup should only contain abstract component and behavior helpers.

[IamManchanda]

Ohk no issue @ncoden ..... Closing this

[DaSchTour]

That's why I added the get-color() function ;) so you can use colors from the palette programmatically in SCSS.

[IamManchanda]

@DaSchTour if thats the case,
can you do this assignment ( #9646 ) for me ?

{{ Because i think you are the right person for it }}

[DaSchTour]

@IamManchanda I would suggest to create some kind of plugin that fits to foundation for this. Any ideas for a cool name?

[ncoden]

@DaSchTour Rainbow.

[IamManchanda]

@IamManchanda I would suggest to create some kind of plugin that fits to foundation for this. Any ideas for a cool name?

@DaSchTour Are you talking about which component/utility here ?
Color utilities or social buttons ( #9646 ) ?

[DaSchTour]

@IamManchanda oh yes. Total confusion about which thread I was on.

[IamManchanda]

Hmmnnn so which comp/utility you were talking about ?

[colin-marshall]

@IamManchanda what's the status of this? Thanks.

[DanielRuf]

Closing as we did not receive further feedback. Feel free to reopen if you want to pick that up (and open a draft PR then).