Skip to content

Themes

Liturgia Colors has 6 variants that feed the following tokens:

:root {
    /* Default Theme (Albus) */
    --color-light: var(--albus-light);
    --color-gray: var(--albus-gray);
    --color-dark: var(--albus-dark);
    --color-main: var(--albus-main);
    --color-text: var(--albus-dark);
    --color-text-invert: var(--albus-light);
}

The common tokens are:

:root {
    /* Design Tokens */
    --radius-default: 4px;
    --size-sm: 24px;
    --size-md: 48px;
    --size-lg: 72px;
    --opacity-low: 0.3;
    --opacity-medium: 0.6;
    --opacity-high: 0.9;
    --rotate-default: 45deg;
    --font-size-xs: 0.75rem;
    --font-size-sm: 1rem;
    --font-size-md: 1.5rem;
    --font-size-lg: 2rem;
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --line-width-default: 2px;
}

Albus (White)

Light
Gray
Dark
Main
Text
Text Invert
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Roseus (Rose)

Light
Gray
Dark
Main
Text
Text Invert
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Ruber (Red)

Light
Gray
Dark
Main
Text
Text Invert
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Tenebrae (Black)

Light
Gray
Dark
Main
Text
Text Invert
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Violaceus (Violet)

Light
Gray
Dark
Main
Text
Text Invert
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890

Viridis (Green)

Light
Gray
Dark
Main
Text
Text Invert
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890
ABCDEFGHIJKLMNOPQRSTUVWXYZ abcdefghijklmnopqrstuvwxyz 1234567890