Campus Design System

Appearance

Invert ​

Utilities for controlling the invert of an element.

Class NameCSS Equivalent
invert-0--cds-sys-filter-invert: 0;
invert-10--cds-sys-filter-invert: 10%;
invert-20--cds-sys-filter-invert: 20%;
invert-30--cds-sys-filter-invert: 30%;
invert-40--cds-sys-filter-invert: 40%;
invert-50--cds-sys-filter-invert: 50%;
invert-60--cds-sys-filter-invert: 60%;
invert-70--cds-sys-filter-invert: 70%;
invert-80--cds-sys-filter-invert: 80%;
invert-90--cds-sys-filter-invert: 90%;
invert-100--cds-sys-filter-invert: 100%;

Setting the invert filter ​

Control the invert of an element using the invert-{level} utilities.

invert-10
invert-20
invert-30
invert-40
invert-50
invert-60
invert-70
invert-80
invert-90
invert-100

❗ Keep in mind

To establish filters like invert, it's essential to commence class declarations with filter.

This action defines a default filter for the element.

css
filter: blur(var(--cds-sys-filter-blur, var(--cds-sys-filter-blur-none))) invert(var(--cds-sys-filter-invert, 100%)) invert(var(--cds-sys-filter-invert, 100%)) drop-shadow(var(--cds-sys-filter-drop-shadow, 0 0 0 #000)) invert(var(--cds-sys-filter-invert, 0%)) hue-rotate(var(--cds-sys-filter-hue-rotate, 0deg)) invert(var(--cds-sys-filter-invert, 0%)) saturate(var(--cds-sys-filter-saturate, 100%)) sepia(var(--cds-sys-filter-sepia, 0%));

Subsequently, varying invert effects can be implemented by assigning classes as outlined on this page.