What is the appropriate use of ui-site-color?


I’m wondering how ui-site-color is supposed to be used? I’d like to tag/label some items in my UI (similar to how OS X Finder can tag/label files) and am planning to use the different ui-site-colors to style the coloring… is that right?



Here’s the description from the styleguide:

Site colors are used for collaboration. A site is another collaborator

.ui-site-* classes

These classes only set the background color, no other styles. 

You can also use LESS variables @ui-site-# in your plugins where # is a number between 1 and 5.
Site colors will always be in the color progression you see here.

I’m not sure how to interpret this description but I haven’t seen much use of these classes so you should be fine using them for now.

If it’s for a package it makes sense to rely on theses classes/colors, but if it’s just for your use only (i.e. through the init script) maybe you can use some other classes/colors to make sure you’ll not get polluted by other uses of these classes.


Thanks! I looked in the styleguide, but it looks like “Site Colors” has two entries. The first has no description and I stopped looking there. Anyway, thanks.


I’m also unsure of the exact purpose. I understood it more like: “Here are a bunch of random colors”. But they don’t really have any meaning. Using them just makes sure it fits a theme’s color scheme: light/dark, neon/pastel…

The tag/label (like in OS X finder) is actually a great use case for it. :+1: