#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.

#Classes

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.

Examples

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>

#v1 Colors (Semantic)

The standard (semantic) color palette from older versions of the framework.

#v2 Colors (Expanded)

Cirrus has an extensive color palette that has been updated with 0.6.0 to make them more accessible to all page elements.

#Changing Opacity

With the new color opacity modifiers, you can now modify color opacity for background colors and text colors.

Changing Background Opacity

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>

Changing Color Opacity

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>

#Extending Colors

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; }

#Disabling Colors

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': ...,
                    ...
                )
            )
        )
    ),
);