Campus Design System

Appearance

Sepia ​

Utilities for controlling the sepia of an element.

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

Setting the sepia filter ​

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

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

❗ Keep in mind

To establish filters like sepia, 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))) sepia(var(--cds-sys-filter-sepia, 100%)) sepia(var(--cds-sys-filter-sepia, 100%)) drop-shadow(var(--cds-sys-filter-drop-shadow, 0 0 0 #000)) sepia(var(--cds-sys-filter-sepia, 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 sepia effects can be implemented by assigning classes as outlined on this page.