liturgia-colors/src/liturgia-colors.css

A css theme inspired by liturgical colors in the Roman Church.

:root {
  /* Albus (White) Palette */
  --albus-light: #fef8e9;
  --albus-dark: #1e1805;
  --albus-main: #d2b152;
  --albus-gray: #8e8877;

  /* Roseus (Rose) Palette */
  --roseus-light: #e5d8db; /* TODO */
  --roseus-dark: #2f1f25; /* TODO */
  --roseus-main: #d491a1; /* TODO */
  --roseus-gray: #888; /* TODO */

  /* Ruber (Red) Palette */
  --ruber-light: #fdf7f6;
  --ruber-dark: #211513;
  --ruber-main: #a20901;
  --ruber-gray: #8f8685;

  /* Tenebrae (Black) Palette */
  --tenebrae-light: #e8e8e8; /* TODO */
  --tenebrae-dark: #1a1a1a; /* TODO */
  --tenebrae-main: #5e5e5e; /* TODO */
  --tenebrae-gray: #888; /* TODO */

  /* Violaceus (Violet) Palette */
  --violaceus-light: #ede4f0; /* TODO */
  --violaceus-dark: #2d1f34; /* TODO */
  --violaceus-main: #7d4a8f; /* TODO */
  --violaceus-gray: #888; /* TODO */

  /* Viridis (Green) Palette */
  --viridis-light: #d1d8cc; /* TODO */
  --viridis-dark: #1f2f1f; /* TODO */
  --viridis-main: #487351; /* TODO */
  --viridis-gray: #888; /* TODO */

  /* 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;

  /* 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);
}

.roseus-mode {
  --color-light: var(--roseus-light);
  --color-gray: var(--roseus-gray);
  --color-dark: var(--roseus-dark);
  --color-main: var(--roseus-main);
  --color-text: var(--roseus-dark);
  --color-text-invert: var(--roseus-light);
}

.ruber-mode {
  --color-light: var(--ruber-light);
  --color-gray: var(--ruber-gray);
  --color-dark: var(--ruber-dark);
  --color-main: var(--ruber-main);
  --color-text: var(--ruber-dark);
  --color-text-invert: var(--ruber-light);
}

.tenebrae-mode {
  --color-light: var(--tenebrae-light);
  --color-gray: var(--tenebrae-gray);
  --color-dark: var(--tenebrae-dark);
  --color-main: var(--tenebrae-main);
  --color-text: var(--tenebrae-dark);
  --color-text-invert: var(--tenebrae-light);
}

.violaceus-mode {
  --color-light: var(--violaceus-light);
  --color-gray: var(--violaceus-gray);
  --color-dark: var(--violaceus-dark);
  --color-main: var(--violaceus-main);
  --color-text: var(--violaceus-dark);
  --color-text-invert: var(--violaceus-light);
}

.viridis-mode {
  --color-light: var(--viridis-light);
  --color-gray: var(--viridis-gray);
  --color-dark: var(--viridis-dark);
  --color-main: var(--viridis-main);
  --color-text: var(--viridis-dark);
  --color-text-invert: var(--viridis-light);
}