Palettes

These palette background colors and varients are supported by the Cosmic theme.

About palette-bg- Classes

If you wish to set a background color on a container, it is preferred that you use one of these palette classes instead of a flat-color background class. The reason for this is that several "context" color variables are set up by the classes; the variables are used in the Cosmic theme to dynamically style Cosmic components.

palette-bg- classes do the following

• Apply a background color or varient specified in the class name.
• Optimize the visibility of background patterns over the background color, if they are used in the context.
• Optimize the contrast of foreground colors over the background color; this includes text and link colors.
• Set the accent color (to the background color), as well as some other uses of color; one example is border color of CTA buttons.

About palette-base- Classes

Each palette color class has an companion "base" class defined. The base class does all of the context setup that the bg class does, except it does not set the background color. This is usefull, for example, when setting up the visual style of a container with a background image. One should choose a background from the palette list that best matches the overall color signature of the background image, then set the companion base class on the container with a background image.

Using a base class eliminates the need to figure out the optimal foreground colors. In addition, any Cosmic components included within the context should visually fit-in better without having to make adjustments.

To find the base class name from a desired background class, replace palette-bg- with palette-base-.
As an example, given the background class .palette-bg-medium-gray-t2 the base class is .palette-base-medium-gray-t2.

Palettes