MARL-Mastodon-Archive-Reader-Lite/css/_colors.scss

// tint and saturation factor for the app color scheme
$hue: 30; // === 59.17 in oklch

/*********************************/
/* global background/text colors */
/*********************************/

$bg0: #fff; // -> post content
$bg1: hsl($hue, 10%, 95%); // -> post
$bg2: hsl($hue, 15%, 90%); // -> post attachment/meta/raw
$bg3: hsl($hue, 17.5%, 87%); // -> posts header
$bg4: hsl($hue, 20%, 84%); // -> filters/tags panels

$fg0: hsl($hue, 0%, 0%); // -> post content
$fg1: hsl($hue, 10%, 20%); // -> body text; some SVG icons (panel close)
$fg2: hsl($hue, 10%, 30%); // -> headings (h1, h2...)

$fg-inv: #fff; // -> misc highlighted text

/***************/
/* actor panel */
/***************/

$actor-bg0: hsl($hue, 37.5%, 11%); // -> bookmarks
$actor-bg1: hsl($hue, 32.5%, 15%); // -> favorites
$actor-bg2: hsl($hue, 25%, 20%); // -> actor raw data
$actor-bg3: hsl($hue, 25%, 25%); // -> actor panel
$actor-bg4: hsl($hue, 22.5%, 40%); // -> actor summary

$actor-fg0: #fff;
$actor-fg1: hsl($hue, 40%, 80%); // -> actor texts

// OKLCH variants
$actor-bg0-ok: oklch(11% 37.5% var(--actor-hue));
$actor-bg1-ok: oklch(15% 32.5% var(--actor-hue));
$actor-bg2-ok: oklch(20% 25% var(--actor-hue));
$actor-bg3-ok: oklch(25% 25% var(--actor-hue));
$actor-bg4-ok: oklch(40% 22.5% var(--actor-hue));
$actor-fg1-ok: oklch(92% 10% var(--actor-hue));

/***************/
/* mobile menu */
/***************/

$menu-bg: hsl($hue, 25%, 20%); // actor-bg2
$menu-fg: hsl($hue, 40%, 80%); // actor-fg1
$menu-fg-active: #fff;
$menu-icon: #fff;
$menu-filter-active: hsl($hue, 75%, 50%); // accent-light2

$menu-backdrop: rgba(0, 0, 0, 0.5);

$panel-close: hsl($hue, 40%, 80%); // fg1
$panel-close-hover: hsl($hue, 75%, 38%); // accent-light

/**********/
/* accent */
/**********/

$accent: hsl($hue, 100%, 30%);
// -> links, active elements, counters, misc background stripes (color 1)
$accent-dark: hsl($hue, 100%, 26%);
// -> misc background stripes (color 2)
$accent-light: hsl($hue, 75%, 38%);
// -> focusable elements outline; main header counter
$accent-light2: hsl($hue, 75%, 50%);
// -> overlay hover/focus icons (SVG); private posts border; active filter indicator (mobile menu)
// === oklch(56.48% 0.124 59.17)
$accent-light3: hsl($hue, 75%, 75%);
// -> hover effect on images
$accent-light-bg: hsl($hue, 50%, 96%);
// -> private posts background

/***********/
/* overlay */
/***********/

$overlay-icon: #fff;
$overlay-icon-hover: #fff;
$overlay-backdrop: rgba(0, 0, 0, 0.75);

/*****************/
/* form elements */
/*****************/

$bg-input: rgba(255, 255, 255, 0.35);
$bg-input-hover: rgba(255, 255, 255, 0.65);
$bg-input-focus: rgba(255, 255, 255, 1);

$bg-button: rgba(255, 255, 255, 1);
$bg-button-hover: hsl($hue, 50%, 95%);
$button-svg: $fg1;
$button-svg-hover: hsl($hue, 75%, 50%);
$button-svg-focus: hsl($hue, 75%, 50%);
$button-svg-active: hsl($hue, 75%, 50%);

$fg-button-focus: $accent;
$fg-button-active: $accent;

// Note: some rgba values hardcoded, used mostly for box-shadow or backdrops

html {
  --bg0: #{$bg0};
  --bg1: #{$bg1};
  --bg2: #{$bg2};
  --bg3: #{$bg3};
  --bg4: #{$bg4};

  --fg0: #{$fg0};
  --fg1: #{$fg1};
  --fg2: #{$fg2};
  --fg-inv: #{$fg-inv};

  --menu-bg: #{$menu-bg};
  --menu-fg: #{$menu-fg};
  --menu-fg-active: $menu#{-fg-active};
  --menu-icon: #{$menu-icon};
  --menu-filter-active: $menu#{-filter-active};
  --panel-close: #{$panel-close};
  --panel-close-hover: $panel#{-close-hover};

  --accent: #{$accent};
  --accent-dark: #{$accent-dark};
  --accent-light: #{$accent-light};
  --accent-light2: #{$accent-light2};
  --accent-light3: #{$accent-light3};
  --accent-light-bg: #{$accent-light-bg};

  --overlay-icon: #{$overlay-icon};
  --overlay-icon-hover: #{$overlay-icon-hover};
  --overlay-backdrop: #{$overlay-backdrop};
  --menu-backdrop: #{$menu-backdrop};

  --bg-input: #{$bg-input};
  --bg-input-hover: #{$bg-input-hover};
  --bg-input-focus: #{$bg-input-focus};

  --bg-button: #{$bg-button};
  --bg-button-hover: #{$bg-button-hover};
  --button-svg: #{$button-svg};
  --button-svg-hover: #{$button-svg-hover};
  --button-svg-focus: #{$button-svg-focus};
  --button-svg-active: #{$button-svg-active};

  --fg-button-focus: #{$fg-button-focus};
  --fg-button-active: #{$fg-button-active};
}

.actors-wrapper {
  --actor-hue: 0;
  --actor-bg0: #{$actor-bg0};
  --actor-bg0-ok: #{$actor-bg0-ok};
  --actor-bg1: #{$actor-bg1};
  --actor-bg1-ok: #{$actor-bg1-ok};
  --actor-bg2: #{$actor-bg2};
  --actor-bg2-ok: #{$actor-bg2-ok};
  --actor-bg3: #{$actor-bg3};
  --actor-bg3-ok: #{$actor-bg3-ok};
  --actor-bg4: #{$actor-bg4};
  --actor-bg4-ok: #{$actor-bg4-ok};

  --actor-fg0: #{$actor-fg0};
  --actor-fg1: #{$actor-fg1};
  --actor-fg1-ok: #{$actor-fg1-ok};
}

$actor-accent-light-ok: oklch(80% 15% var(--actor-hue));