Semantic-ui: Adding a new color to the UI

[cereallarceny]

I want to add the color lime into my theme's color palette. According to my brand guide, there is already a color green defined and I didn't see a color variable for lime. Is there a way to create lime as an option throughout my theme?

I will say that the only color not defined in my brand guide that's also in my Semantic UI stylesheets is purple... so I could use that one without modifying the code Semantic UI already uses.

In fact, if you used SASS then you could just iterate through an array of colors and create all these classes dynamically rather than force people to change each of the core LESS files. That would save you a ton of room in your LESS source code and could be modified for as many colors as a user would like. As far as I'm aware there's not a way to iterate through an array of arbitrary types (like colors, for instance) in LESS. Then again, I know your themeing system is depending upon the dependency reliance that LESS offers (that SASS apparently doesn't).

Anyhow, I digress: is there a way to add a .lime class to my UI without having something "non-semantic" like having the lime hex color go in the @purple variable?

[jlukic]

If you define a color variable in your site theme (site/globals/site.variables), or packaged theme /themes/your-name/globals/site.variables it will be available inside your override file. If you're comfortable you can use any other preprocessor features there as well.

I think if you have only one lime green color though, it's easier to just call your lime hexcode as green and avoid having to define lime class names. Although it should be an easy copy and paste job.

I've commented on this in other threads but generally i avoid using control structures and language specific features in definitions to improve interop with future preprocessors.

SASS doesnt support variables in import paths which is preventing a SASS port currently (see issue in readme).

[cereallarceny]

Gotcha. I just wanted to have a way native to Semantic UI to extend certain ui elements based on my brand's desires. I can't do the green thing you mentioned because in addition to having a lime color, I also have a green color in my brand. Copying and pasting code from the button.less file (for instance) isn't a good option either as it means whenever there's an update to Semantic, my lime buttons won't pick up the changes.

[jlukic]

Your lime button will pick up the changes, variations like color only describe changes from the standard version.

The only issue would be if there was an update in the idea of 'colored button' which probably wont occur.

[cereallarceny]

Yes, your second sentence is what I was referring to. Then again, buttons may not change but other colored UI elements may. Perhaps not. If there's no obvious solution here then I'll concede my point and suck it up.

[jlukic]

I understand the need, but I dont think this fits in stylistically with the rest of the library.

Specificity issues are already rather complex with our naming requirements and im fairly certain importing styles directly into other styles will complicate the matter.

[jbeaudoin11]

So there is no way to create new color ?
I tried to do like this:

@black : #000000;
@darkgrey : #1E1E1E;
@grey : #2D2D2D;
@lightgrey : #404040;
@green : #9CC101;

But only base color (black grey green) is updating... darkgrey and lightgrey doesn't exist.
I'm a newbie..

[saul-gush]

I agree with adding @lightgrey : #404040; for example.

[lubber-de]

Since Fomantic-UI 2.7 color definitions are located at a central place, thus you can easily add/remove colors in a single file colors.less
Each defined color name will be adopted for each and every possible component on compile time.
https://github.com/fomantic/Fomantic-UI/blob/master/src/themes/default/globals/colors.less