liturgia-colors/src/liturgia-colors.css

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

:root {
  /* Albus (White) Palette */
  --albus-bg: #d4af37;
  --albus-bg-secondary: #b8962e;
  --albus-tertiary: #f0f0f0;
  --albus-text: #1a1a1a;
  --albus-text-secondary: #4a4a4a;
  --albus-text-invert: #f7f7f7;
  --albus-text-secondary-invert: #b0b0b0;
  --albus-accent: #d4af37;
  --albus-accent-hover: #b8962e;
  --albus-border: #e5e5e5;
  --albus-gradient: linear-gradient(
    to top,
    var(--albus-bg-secondary),
    var(--albus-bg)
  ); /* Darker white to secondary */

  /* Ruber (Red) Palette */
  --ruber-bg: #a31212;
  --ruber-bg-secondary: #8b0000;
  --ruber-tertiary: #4f2f2f;
  --ruber-text: #2a1a1a;
  --ruber-text-secondary: #5a3a3a;
  --ruber-text-invert: #f5eded;
  --ruber-text-secondary-invert: #c9afaf;
  --ruber-accent: #8b0000;
  --ruber-accent-hover: #a31212;
  --ruber-border: #5a3a3a;
  --ruber-gradient: linear-gradient(
    to top,
    var(--ruber-bg-secondary),
    var(--ruber-bg)
  ); /* Darker white to secondary */

  /* Viridis (Green) Palette */
  --viridis-bg: #487351;
  --viridis-bg-secondary: #355e3b;
  --viridis-tertiary: #dde5d9;
  --viridis-text: #1f2f1f;
  --viridis-text-secondary: #5a6f5a;
  --viridis-text-invert: #e8ece3;
  --viridis-text-secondary-invert: #a0b0a0;
  --viridis-accent: #355e3b;
  --viridis-accent-hover: #487351;
  --viridis-border: #d1d8cc;
  --viridis-gradient: linear-gradient(
    to top,
    var(--viridis-bg-secondary),
    var(--viridis-bg)
  ); /* Darker green to secondary */

  /* Violaceus (Violet) Palette */
  --violaceus-bg: #7d4a8f;
  --violaceus-bg-secondary: #6a387d;
  --violaceus-tertiary: #4f3a5a;
  --violaceus-text: #2d1f34;
  --violaceus-text-secondary: #5a465f;
  --violaceus-text-invert: #ede4f0;
  --violaceus-text-secondary-invert: #b8a6c1;
  --violaceus-accent: #6a387d;
  --violaceus-accent-hover: #7d4a8f;
  --violaceus-border: #5a465f;
  --violaceus-gradient: linear-gradient(
    to top,
    var(--violaceus-bg-secondary),
    var(--violaceus-bg)
  ); /* Darker violet to secondary */

  /* Tenebrae (Black) Palette */
  --tenebrae-bg: #5e5e5e;
  --tenebrae-bg-secondary: #4a4a4a;
  --tenebrae-tertiary: #3a3a3a;
  --tenebrae-text: #1a1a1a;
  --tenebrae-text-secondary: #4a4a4a;
  --tenebrae-text-invert: #e8e8e8;
  --tenebrae-text-secondary-invert: #a6a6a6;
  --tenebrae-accent: #4a4a4a;
  --tenebrae-accent-hover: #5e5e5e;
  --tenebrae-border: #3d3d3d;
  --tenebrae-gradient: linear-gradient(
    to top,
    var(--tenebrae-bg-secondary),
    var(--tenebrae-bg)
  ); /* Darker black to secondary */

  /* Roseus (Rose) Palette */
  --roseus-bg: #d491a1;
  --roseus-bg-secondary: #c87d8f;
  --roseus-tertiary: #f2e0e5;
  --roseus-text: #2f1f25;
  --roseus-text-secondary: #6f5a60;
  --roseus-text-invert: #f9ecef;
  --roseus-text-secondary-invert: #c9afaf;
  --roseus-accent: #c87d8f;
  --roseus-accent-hover: #d491a1;
  --roseus-border: #e5d8db;
  --roseus-gradient: linear-gradient(
    to top,
    var(--roseus-bg-secondary),
    var(--roseus-bg)
  ); /* Darker rose to secondary */

  /* 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-primary: var(--albus-bg);
  --color-secondary: var(--albus-bg-secondary);
  --color-tertiary: var(--albus-tertiary);
  --color-text-primary: var(--albus-text);
  --color-text-secondary: var(--albus-text-secondary);
  --color-text-primary-invert: var(--albus-text-invert);
  --color-text-secondary-invert: var(--albus-text-secondary-invert);
  --color-accent: var(--albus-accent);
  --color-accent-hover: var(--albus-accent-hover);
  --color-border: var(--albus-border);
  --color-gradient: var(--albus-gradient); /* Default gradient */
  --font-family-heading: 'Cinzel', serif;
  --font-family-paragraph: 'EB Garamond', serif;
}

.ruber-mode {
  --color-primary: var(--ruber-bg);
  --color-secondary: var(--ruber-bg-secondary);
  --color-tertiary: var(--ruber-tertiary);
  --color-text-primary: var(--ruber-text);
  --color-text-secondary: var(--ruber-text-secondary);
  --color-text-primary-invert: var(--ruber-text-invert);
  --color-text-secondary-invert: var(--ruber-text-secondary-invert);
  --color-accent: var(--ruber-accent);
  --color-accent-hover: var(--ruber-accent-hover);
  --color-border: var(--ruber-border);
  --color-gradient: var(--ruber-gradient);
}

.viridis-mode {
  --color-primary: var(--viridis-bg);
  --color-secondary: var(--viridis-bg-secondary);
  --color-tertiary: var(--viridis-tertiary);
  --color-text-primary: var(--viridis-text);
  --color-text-secondary: var(--viridis-text-secondary);
  --color-text-primary-invert: var(--viridis-text-invert);
  --color-text-secondary-invert: var(--viridis-text-secondary-invert);
  --color-accent: var(--viridis-accent);
  --color-accent-hover: var(--viridis-accent-hover);
  --color-border: var(--viridis-border);
  --color-gradient: var(--viridis-gradient);
}

.violaceus-mode {
  --color-primary: var(--violaceus-bg);
  --color-secondary: var(--violaceus-bg-secondary);
  --color-tertiary: var(--violaceus-tertiary);
  --color-text-primary: var(--violaceus-text);
  --color-text-secondary: var(--violaceus-text-secondary);
  --color-text-primary-invert: var(--violaceus-text-invert);
  --color-text-secondary-invert: var(--violaceus-text-secondary-invert);
  --color-accent: var(--violaceus-accent);
  --color-accent-hover: var(--violaceus-accent-hover);
  --color-border: var(--violaceus-border);
  --color-gradient: var(--violaceus-gradient);
}

.tenebrae-mode {
  --color-primary: var(--tenebrae-bg);
  --color-secondary: var(--tenebrae-bg-secondary);
  --color-tertiary: var(--tenebrae-tertiary);
  --color-text-primary: var(--tenebrae-text);
  --color-text-secondary: var(--tenebrae-text-secondary);
  --color-text-primary-invert: var(--tenebrae-text-invert);
  --color-text-secondary-invert: var(--tenebrae-text-secondary-invert);
  --color-accent: var(--tenebrae-accent);
  --color-accent-hover: var(--tenebrae-accent-hover);
  --color-border: var(--tenebrae-border);
  --color-gradient: var(--tenebrae-gradient);
}

.roseus-mode {
  --color-primary: var(--roseus-bg);
  --color-secondary: var(--roseus-bg-secondary);
  --color-tertiary: var(--roseus-tertiary);
  --color-text-primary: var(--roseus-text);
  --color-text-secondary: var(--roseus-text-secondary);
  --color-text-primary-invert: var(--roseus-text-invert);
  --color-text-secondary-invert: var(--roseus-text-secondary-invert);
  --color-accent: var(--roseus-accent);
  --color-accent-hover: var(--roseus-accent-hover);
  --color-border: var(--roseus-border);
  --color-gradient: var(--roseus-gradient);
}