#Colors
Cirrus comes with a semantic palette and an expanded palette to help you style your page. The expanded palette is a large, hand-tuned collection of colors for the framework.
Cirrus comes with a semantic palette and an expanded palette to help you style your page. The expanded palette is a large, hand-tuned collection of colors for the framework.
Using a color within Cirrus is as simple as just prefixing the colors with bg-
to color the background and with text-
to color the text.
Button using indigo-500 for text and indigo-100 for the background.
<button class="text-indigo-500 bg-indigo-100">
Custom Button
</button>
Square using a info background.
<div class="bg-info u-round-xs mx-auto" style="height: 50px; width: 50px;"></div>
The standard (semantic) color palette from older versions of the framework.
Background | Text |
---|---|
bg-primary | text-primary |
bg-white | text-white |
bg-black | text-black |
bg-light | text-light |
bg-dark | text-dark |
bg-link | text-link |
bg-link-dark | text-link-dark |
bg-info | text-info |
bg-success | text-success |
bg-warning | text-warning |
bg-danger | text-danger |
bg-transparent | text-transparent |
Cirrus has an extensive color palette that has been updated with 0.6.0 to make them more accessible to all page elements.
Background | Text |
---|---|
bg-pink-100 | text-pink-100 |
bg-pink-200 | text-pink-200 |
bg-pink-300 | text-pink-300 |
bg-pink-400 | text-pink-400 |
bg-pink-500 | text-pink-500 |
bg-pink-600 | text-pink-600 |
bg-pink-700 | text-pink-700 |
bg-pink-800 | text-pink-800 |
bg-pink-900 | text-pink-900 |
bg-red-100 | text-red-100 |
bg-red-200 | text-red-200 |
bg-red-300 | text-red-300 |
bg-red-400 | text-red-400 |
bg-red-500 | text-red-500 |
bg-red-600 | text-red-600 |
bg-red-700 | text-red-700 |
bg-red-800 | text-red-800 |
bg-red-900 | text-red-900 |
bg-orange-100 | text-orange-100 |
bg-orange-200 | text-orange-200 |
bg-orange-300 | text-orange-300 |
bg-orange-400 | text-orange-400 |
bg-orange-500 | text-orange-500 |
bg-orange-600 | text-orange-600 |
bg-orange-700 | text-orange-700 |
bg-orange-800 | text-orange-800 |
bg-orange-900 | text-orange-900 |
bg-yellow-100 | text-yellow-100 |
bg-yellow-200 | text-yellow-200 |
bg-yellow-300 | text-yellow-300 |
bg-yellow-400 | text-yellow-400 |
bg-yellow-500 | text-yellow-500 |
bg-yellow-600 | text-yellow-600 |
bg-yellow-700 | text-yellow-700 |
bg-yellow-800 | text-yellow-800 |
bg-yellow-900 | text-yellow-900 |
bg-green-100 | text-green-100 |
bg-green-200 | text-green-200 |
bg-green-300 | text-green-300 |
bg-green-400 | text-green-400 |
bg-green-500 | text-green-500 |
bg-green-600 | text-green-600 |
bg-green-700 | text-green-700 |
bg-green-800 | text-green-800 |
bg-green-900 | text-green-900 |
bg-teal-100 | text-teal-100 |
bg-teal-200 | text-teal-200 |
bg-teal-300 | text-teal-300 |
bg-teal-400 | text-teal-400 |
bg-teal-500 | text-teal-500 |
bg-teal-600 | text-teal-600 |
bg-teal-700 | text-teal-700 |
bg-teal-800 | text-teal-800 |
bg-teal-900 | text-teal-900 |
bg-blue-100 | text-blue-100 |
bg-blue-200 | text-blue-200 |
bg-blue-300 | text-blue-300 |
bg-blue-400 | text-blue-400 |
bg-blue-500 | text-blue-500 |
bg-blue-600 | text-blue-600 |
bg-blue-700 | text-blue-700 |
bg-blue-800 | text-blue-800 |
bg-blue-900 | text-blue-900 |
bg-indigo-100 | text-indigo-100 |
bg-indigo-200 | text-indigo-200 |
bg-indigo-300 | text-indigo-300 |
bg-indigo-400 | text-indigo-400 |
bg-indigo-500 | text-indigo-500 |
bg-indigo-600 | text-indigo-600 |
bg-indigo-700 | text-indigo-700 |
bg-indigo-800 | text-indigo-800 |
bg-indigo-900 | text-indigo-900 |
bg-purple-100 | text-purple-100 |
bg-purple-200 | text-purple-200 |
bg-purple-300 | text-purple-300 |
bg-purple-400 | text-purple-400 |
bg-purple-500 | text-purple-500 |
bg-purple-600 | text-purple-600 |
bg-purple-700 | text-purple-700 |
bg-purple-800 | text-purple-800 |
bg-purple-900 | text-purple-900 |
bg-gray-000 | text-gray-000 |
bg-gray-100 | text-gray-100 |
bg-gray-200 | text-gray-200 |
bg-gray-300 | text-gray-300 |
bg-gray-400 | text-gray-400 |
bg-gray-500 | text-gray-500 |
bg-gray-600 | text-gray-600 |
bg-gray-700 | text-gray-700 |
bg-gray-800 | text-gray-800 |
bg-gray-900 | text-gray-900 |
With the new color opacity modifiers, you can now modify color opacity for background colors and text colors.
Use the background opacity utility classes to control an element's background color opacity. You can use any opacity value that is defined in the opacity scale.
<button class="u-bg-opacity-100 ...">100%</button>
<button class="u-bg-opacity-90 ...">90%</button>
<button class="u-bg-opacity-80 ...">80%</button>
<button class="u-bg-opacity-70 ...">70%</button>
<button class="u-bg-opacity-60 ...">60%</button>
<button class="u-bg-opacity-50 ...">50%</button>
<button class="u-bg-opacity-40 ...">40%</button>
<button class="u-bg-opacity-30 ...">30%</button>
<button class="u-bg-opacity-20 ...">20%</button>
<button class="u-bg-opacity-10 ...">10%</button>
<button class="u-bg-opacity-0 ...">0%</button>
Use the color opacity utility classes to control an element's color opacity (text, border, etc.). You can use any opacity value that is defined in the opacity scale.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
The quick brown fox jumps over the lazy dog.
<p class="u-color-opacity-100 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-90 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-80 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-70 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-60 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-50 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-40 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-30 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-20 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-10 ...">The quick brown fox jumps over the lazy dog.</p>
<p class="u-color-opacity-0 ...">The quick brown fox jumps over the lazy dog.</p>
If you want additional colors on top of the ones shipped with Cirrus, you can extend the color palette via its Sass configuration within the extend
map of the config.
Below is an example of adding a new magenta color:
@use "cirrus-ui/src/cirrus-ext" as * with (
$config: (
extend: (
colors: (
'magenta': (
'100': #FEF7F4,
'200': #FBE0DD,
'300': #F2AFB3,
'400': #EC798B,
'500': #DC5472,
'600': #BC3263,
'700': #98184D,
'800': #73123F,
'900': #560E39,
)
)
)
),
);
The new config will generate the following additional classes:
.bg-magenta-100 { ... }
// ...
.bg-magenta-900 { ... }
.text-magenta-100 { ... }
// ...
.text-magenta-900 { ... }
The extend
map can also be used for overriding existing values. For example, the following config will override bg-blue-500
and text-blue-500
to use #fff.
@use "cirrus-ui/src/cirrus-ext" as * with (
$config: (
extend: (
colors: (
'blue': (
'500': #fff,
)
)
)
),
);
.bg-blue-500 { background-color: #fff !important; }
.text-blue-500 { color: #fff !important; }
If you would like to remove a default color, you can simply set any of the color maps of the extended palette to null
. Cirrus will not generate any of these colors in the final build.
@use "cirrus-ui/src/cirrus-ext" as * with (
$config: (
colors: (
// Note: The quotes matter!
'pink': null,
'red': null,
'orange': null,
'yellow': null,
'green': null,
'teal': null,
'blue': null,
'indigo': null,
'purple': null,
'gray': null,
)
),
);
⚠ Warning
Note that disabling certain colors can lead to build errors! These colors are relied on by other parts of the framework.
@use "cirrus-ui/src/cirrus-ext" as * with ( $config: ( colors: ( 'gray': null, ) ), );
Error in plugin "sass" Message: src\base\layout.scss Error: $color: "ERROR [fill()]: [fill] Unknown color key `gray 500`." is not a color. ╷ 39 │ border-top: 0.05rem solid transparentize(fill('gray', '500'), 0.5); │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ ╵ srcaselayout.scss 39:31 @use srccore.scss 11:1 @use srcext.scss 4:1 @use srcmain.scss 30:1 root stylesheet
Be sure to supply your own replacement color under the
extend
section.@use "cirrus-ui/src/cirrus-ext" as * with ( $config: ( colors: ( 'gray': null, ), extend: ( colors: ( 'gray': ( '100': ..., ... ) ) ) ), );