Create centralized color palette definition

Registered by David Lyle on 2013-02-12

Create one .less file that contains all of the color definitions used in the assorted horizon .less files and replace the hard-coded color values sprinkled across files with @background-color-one type reference from imported color palette file.

Facilitates branding and widget creation.

Blueprint information

Gabriel Hurley
David Lyle
Maxime Vidori
Series goal:
Accepted for juno
Milestone target:
milestone icon 2014.2
Started by
David Lyle on 2014-04-18
Completed by
David Lyle on 2014-07-01

Related branches



This should include support for a javascript color palette too.

[2013-07-16 | Gabriel] I'd rather see this land as a robust, well-tested feature early in I than try to rush it into H. I'm willing to reconsider if great code shows up early in H3, but for now I'm going to defer this.

[2013-08-05 jcoufal] I would make this feature after css/less breakdown. (see:

[2014-04-03 maxime-vidori] I made a few tests for the palette, the shinny colors and gradient do not allow us to do a lot of stuff, as long as we do not have integrated bootstrap v3 it could be interesting to use their palette with a change for red in the primary in reference of the openstack logo.

here with red as primary

here with blue

Gerrit topic:,topic:bp/centralized-color-palette,n,z

Addressed by:
    Add a centralized palette to Horizon

[2014-04-09 jcoufal] Can we wait for some visuals to see the colors used in the UI? Or is this BP supposed to get just initial steps in and then tweak the colors based on branding?

Gerrit topic:,topic:bp/css-breakdown,n,z

[jpichon 2014.06.10] It looks like the associated review was merged, can we mark this as implemented in juno-1 or is further work required? Thanks.

[jcoufal 2014-06-11] I think we can close this one and create new one for ongoing work which will be required, but not at this very moment. Thanks


Work Items

Dependency tree

* Blueprints in grey have been implemented.

This blueprint contains Public information 
Everyone can see this information.