#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, text- to color the text, and border- to color the borders.

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>

Circle with a purple-500 border.

<div class="u-round-full w-8 h-8 border-purple-500 u-border-2"></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

Docs have been moved to theOpacity page.

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