Polaris Colors

Overview

A large set of standard colors are provided in Polaris. Some are available in the core and others can be used as plugins.

Core Colors

These colors are included in Polaris Core:

Neutral Colors: {white, gray, black}
Theme Colors: {app, notice, warning, danger, success}
Color Palettes: {gray, app}
Color Alphas: {white, black, app}
Color Schemes: {light, dark}

Neutral Colors

Polaris Neutral Colors are usually used for CSS color, border-color, and background-color properties.

<p><span class="bg-white color-black">A black text.</span></p>
<p><span class="bg-white color-gray">A gray text.</span></p>
<p><span class="bg-black color-white">A white text.</span></p>

A black text.

A gray text.

A white text.

Theme Colors

Polaris Theme Colors are usually used for styling the components.

They can alose be used for CSS color, border-color, and background-color properties.

<button class="btn btn-app">App Button</button>
<button class="btn btn-notice">Notice Button</button>
<button class="btn btn-warning">Warning Button</button>
<button class="btn btn-danger">Danger Button</button>
<button class="btn btn-success">Success Button</button>

<p class="color-app">An app color text.</p>
<p class="color-notice">A notice color text.</p>
<p class="color-warning">A warning color text.</p>
<p class="color-danger">A danger color text.</p>
<p class="color-success">A success color text.</p>

An app color text.

A notice color text.

A warning color text.

A danger color text.

A success color text.

Color Palettes

Color Palettes include a variant of gray and app colors intensity with multiples of 50.

<div class="p-md bg-alpha">
    <span class="display-inline-block w-50px h-50px bg-gray-100"></span>
    <span class="display-inline-block w-50px h-50px bg-gray-200"></span>
    <span class="display-inline-block w-50px h-50px bg-gray-300"></span>
    <span class="display-inline-block w-50px h-50px bg-gray-400"></span>
    <span class="display-inline-block w-50px h-50px bg-gray-500"></span>
    <span class="display-inline-block w-50px h-50px bg-gray-600"></span>
    <span class="display-inline-block w-50px h-50px bg-gray-700"></span>
    <span class="display-inline-block w-50px h-50px bg-gray-800"></span>
    <span class="display-inline-block w-50px h-50px bg-gray-900"></span>
    <br>
    <span class="display-inline-block w-50px h-50px bg-app-100"></span>
    <span class="display-inline-block w-50px h-50px bg-app-200"></span>
    <span class="display-inline-block w-50px h-50px bg-app-300"></span>
    <span class="display-inline-block w-50px h-50px bg-app-400"></span>
    <span class="display-inline-block w-50px h-50px bg-app-500"></span>
    <span class="display-inline-block w-50px h-50px bg-app-600"></span>
    <span class="display-inline-block w-50px h-50px bg-app-700"></span>
    <span class="display-inline-block w-50px h-50px bg-app-800"></span>
    <span class="display-inline-block w-50px h-50px bg-app-900"></span>
</div>

Color Alphas

Color Alphas include channels of white, black, and app colors alpha with multiples of 50.

<div class="p-md bg-alpha">
    <span class="display-inline-block w-50px h-50px bg-white-a100"></span>
    <span class="display-inline-block w-50px h-50px bg-white-a200"></span>
    <span class="display-inline-block w-50px h-50px bg-white-a300"></span>
    <span class="display-inline-block w-50px h-50px bg-white-a400"></span>
    <span class="display-inline-block w-50px h-50px bg-white-a500"></span>
    <span class="display-inline-block w-50px h-50px bg-white-a600"></span>
    <span class="display-inline-block w-50px h-50px bg-white-a700"></span>
    <span class="display-inline-block w-50px h-50px bg-white-a800"></span>
    <span class="display-inline-block w-50px h-50px bg-white-a900"></span>
    <br>
    <span class="display-inline-block w-50px h-50px bg-black-a100"></span>
    <span class="display-inline-block w-50px h-50px bg-black-a200"></span>
    <span class="display-inline-block w-50px h-50px bg-black-a300"></span>
    <span class="display-inline-block w-50px h-50px bg-black-a400"></span>
    <span class="display-inline-block w-50px h-50px bg-black-a500"></span>
    <span class="display-inline-block w-50px h-50px bg-black-a600"></span>
    <span class="display-inline-block w-50px h-50px bg-black-a700"></span>
    <span class="display-inline-block w-50px h-50px bg-black-a800"></span>
    <span class="display-inline-block w-50px h-50px bg-black-a900"></span>
    <br>
    <span class="display-inline-block w-50px h-50px bg-app-a100"></span>
    <span class="display-inline-block w-50px h-50px bg-app-a200"></span>
    <span class="display-inline-block w-50px h-50px bg-app-a300"></span>
    <span class="display-inline-block w-50px h-50px bg-app-a400"></span>
    <span class="display-inline-block w-50px h-50px bg-app-a500"></span>
    <span class="display-inline-block w-50px h-50px bg-app-a600"></span>
    <span class="display-inline-block w-50px h-50px bg-app-a700"></span>
    <span class="display-inline-block w-50px h-50px bg-app-a800"></span>
    <span class="display-inline-block w-50px h-50px bg-app-a900"></span>
</div>

Color Schemes

Polaris framework supports light & dark schemes for almost all the components.

For the document component, it will be handled by the JavaScript library, by default. However, you can set it explicitly.

For other components, if you ignore the components color schemes or themes, they will inherit the document scheme. Therefore, they act as light components in a light document and as dark components in a dark document. In that case they may be referred as dynamic schemes (themes).

However, you can set the componetns schemes or themes explicitly, independent from the document scheme. In that case they may be referred as static schemes (themes).

Example 1: (Dynamic Scheme)

<button class="btn">Button</button>

Example 2: (Static Scheme)

<button class="btn btn-light">Button</button>
<button class="btn btn-dark">Button</button>
<button class="btn btn-app">Button</button>

Color Plugins

In addition to Core Colors, there are many other color sets presented as Color Plugins:

Color Packs: {HTML Colors, Social Colors, Flat Colors, Metro Colors}
Color Palettes: {Polaris Colors, Material Colors}
Color Alphas: {Polaris Colors, Material Colors}