how to add WHITE to SUI.COLORS

[Maxhodges]

I'm having trouble understanding where SUI.COLORS is defined. I need to add WHITE to it. Can someone point me in the right direction?

[layershifter]

COLORS are defined in SUI.js, they are list of colors from SUI. There are no white color in SUI pallete as you can see.

If you need white class to component, use className:

<Button className='white' />

[Maxhodges]

OK thanks. I guess we'll just extend SUI.COLORS with a wrapper

[Maxhodges]

or redefine a color we don't use in the variables
@brown: #FFFFFF ;)

[levithomason]

@Maxhodges if you have a valid use case for adding white as a color, it would be great to have it added to the CSS over at Semantic-UI. This way, we then generate the proper markup for it.

[Maxhodges]

We created a dark theme in Semantic-UI for our web app, so of course, we need white and light greys for text on dark backgrounds. It hasn't been a problem because we just override some variables in the theme, but in the case of dropdown the default theme relies on !important like crazy. So I was having trouble overriding them, but I guess I'll just have to use !important too and be more specific with my CSS overrides.

These are the classes on dropdown from http://react.semantic-ui.com/modules/dropdown

I didn't expect SUI to have done it that way, so I thought it was something you guys had done!

Brown is the new white works well enough for me!

BTW I love the search field in the docu TOC. Hope @jlukic implements that in the official docs!

[Maxhodges]

I thought more about this, shouldn't you guys be including @primarycolor and @secondaryColor? Then one could easily add white and black to the color scheme

https://github.com/Semantic-Org/Semantic-UI/search?utf8=%E2%9C%93&q=primaryColor&type=Code

[levithomason]

@primaryColor and @secondaryColor are LESS variables that must be compiled to CSS. Semantic-UI-React only concerns itself with React components that generate valid Semantic-UI markup. There is no HTML nor CSS code in this project.

Due to my own interest in supporting styling, and the overwhelming community interest, it is definitely on my radar to add some kind of support that makes sense in the React paradigm. This will be a long way off though.

[levithomason]

Another way to look at this is, if we included any LESS variables, we'd also have to include the entire gulp powered Semantic-UI theming build system. Otherwise, there is no way to translate those variables into CSS.

[Maxhodges]

UI-React only concerns itself with React components that generate valid Semantic-UI markup. There is no HTML nor CSS code in this project.

hum, but you have an enum of colors for teal, pink, blue and green, etc. So I'm just suggesting to add primaryColor and secondaryColor to that enum. SUI already has these variables defined for brand colors but you've not exposing them for us, right?

see my link. the @primarycolor already exists in SUI

[levithomason]

Those colors are html classNames. All props are nothing more than a translation to classNames and markup:

<Button color='green' />

Renders:

<button class="ui green button"></button>

The links you provided are links to LESS stylesheets. There is no styling involved in this repo.

I realize you might be asking, "How do I create a primary/secondary button?". If so:

<Button primary />
<Button secondary />

See the docs here: http://react.semantic-ui.com/elements/button#emphasis

[Maxhodges]

Ok I see. I was thinking if primaryColor was exposed in the SUI.COLORS enum then we could use it to create custom ui header colors too, for example. But yeah I guess a bit more thought should go into it. until then I can only redefine existing colors if I want to introduce a white and black.

I created a new dark theme and redefined the header default color to be white so it will appear on black. But now I also need black so I can display black headers on our white background homepage...

but at least I have this workaround

/*******************************
     User Global Variables
*******************************/

@brown: #FFFFFF; //brown is the new white
@olive: #000000; //olive is the new black

just thought it would be nice if SUI.COLOR included a few extras like @brandColor1, @brandColor2, etc. I guess that's up to @jlukic ?

[levithomason]

The SUI enums are 1:1 mappings to Semantic-UI classNames. So, any proposed additions there should be proposed as additions to Semantic-UI markup and CSS.

If you'd like to add your own styles on top of SUI, I'd suggest just using className directly. So, if you added a white header:

your-custom-override-theme.css

.ui.header.white {
  /* rules */
}

Then, in your app:

<Header className='white' />

This will render this HTML:

<div class="ui header white"></div>

That way, you are extending the base theme with your own classes and associated styles. It also prevents you from having the confusing color='brown' render a white header, etc.