@use "sass:color";
@use "sass:map";

$colour-palette-brand: (
  "black": #010101,
  "dark-grey": #26262a,
  "grey": #8c9694,
  "light-grey": #d9d9d6,
  "white": #fff,

  "yellow": #fc0,
  "pink": #fe1d57,
  "orange": #fd3f03,
  "green": #86bc25,
  "blue": #00b0ff,

  "brown": #654e37,
  "maroon": #9c193a,
  "chestnut": #8f3415,
  "forest": #00623b,
  "navy": #004c7e,

  "cream": #f9f7e2,
  "pastel-pink": #fad3d4,
  "pastel-orange": #f9e1bc,
  "pastel-green": #dde5d5,
  "pastel-blue": #d4e5ef,
);

@function hex-to-rgb($hex, $opacity: 1) {
  $red: color.channel($hex, "red", $space: rgb);
  $green: color.channel($hex, "green", $space: rgb);
  $blue: color.channel($hex, "blue", $space: rgb);
  @if $opacity == 1 {
    @return rgb($red $green $blue);
  } @else {
    @return rgb($red $green $blue / #{$opacity});
  }
}

@function brand-colour($colour, $opacity: 1) {
  @return hex-to-rgb(map.get($colour-palette-brand, $colour), $opacity);
}

/*
=========================================
LIGHT THEME (DEFAULT)
=========================================
*/
$colour-palette-default: (
  "background": #f4f4f4,
  "background-tint": brand-colour("light-grey"),
  "font-base": #343338,
  "font-dark": brand-colour("black"),
  "font-light": brand-colour("black", 0.58),
  "icon-light": brand-colour("black", 0.58),
  "link": #005fa3,
  "link-visited": #634abb,
  "focus-outline": brand-colour("blue"),
  "keyline": brand-colour("dark-grey", 0.25),
  "keyline-dark": brand-colour("dark-grey"),
  "input-foreground": brand-colour("black"),
  "input-background": brand-colour("white"),
  "input-border": brand-colour("black"),
  "form-error-border": #c20000,
  "form-error-text": #c20000,
  "button-text": brand-colour("white"),
  "button-background": brand-colour("black"),
  "button-hover-text": brand-colour("black"),
  "button-hover-background": brand-colour("white"),
  "contrast-background": #1e1e1e,
  "contrast-font-base": brand-colour("white"),
  "contrast-font-dark": brand-colour("white"),
  "contrast-font-light": brand-colour("white", 0.7),
  "contrast-icon-light": brand-colour("white", 0.7),
  "contrast-link": brand-colour("white"),
  "contrast-link-visited": brand-colour("white"),
  "contrast-keyline": brand-colour("white", 0.3),
  "contrast-keyline-dark": brand-colour("white", 0.6),
  "contrast-button-text": brand-colour("black"),
  "contrast-button-background": brand-colour("white"),
  "contrast-button-hover-text": brand-colour("white"),
  "contrast-button-hover-background": brand-colour("black"),
  "accent-background": #afb6b5,
  "accent-background-light": brand-colour("light-grey"),
  "accent-border": brand-colour("grey"),
  "accent-border-bright": brand-colour("light-grey"),
  "accent-font-base": brand-colour("black"),
  "accent-font-dark": brand-colour("black"),
  "accent-font-light": brand-colour("black", 0.7),
  "accent-icon-light": brand-colour("black", 0.7),
  "accent-link": brand-colour("black"),
  "accent-link-visited": brand-colour("black"),
  "accent-keyline": brand-colour("black", 0.3),
  "accent-keyline-dark": brand-colour("black", 0.8),
  "accent-button-text": brand-colour("white"),
  "accent-button-background": brand-colour("black"),
  "accent-button-hover-text": brand-colour("black"),
  "accent-button-hover-background": brand-colour("white"),
  "button-accented-text": brand-colour("black"),
  "button-accented-background": brand-colour("grey"),
) !default;

/*
=========================================
DARK THEME
=========================================
*/
$colour-palette-dark: map.merge(
  $colour-palette-default,
  (
    "background": #212223,
    "background-tint": #323334,
    "font-base": brand-colour("white", 0.95),
    "font-dark": brand-colour("white"),
    "font-light": brand-colour("white", 0.65),
    "icon-light": brand-colour("white", 0.65),
    "link": brand-colour("blue"),
    "link-visited": #a8f,
    "focus-outline": brand-colour("orange"),
    "keyline": brand-colour("white", 0.25),
    "keyline-dark": brand-colour("white", 0.75),
    "input-foreground": brand-colour("white"),
    "input-background": brand-colour("dark-grey"),
    "input-border": brand-colour("white"),
    "form-error-border": #f00,
    "form-error-text": #ff6b6b,
    "button-text": brand-colour("black"),
    "button-background": brand-colour("white"),
    "button-hover-text": brand-colour("white"),
    "button-hover-background": brand-colour("black"),
    "contrast-background": #101112,
    "accent-border": brand-colour("light-grey"),
    "accent-border-bright": brand-colour("white"),
  )
) !default;

/*
=========================================
LIGHT, HIGH_CONTRAST THEME
=========================================
*/
$colour-palette-high-contrast: map.merge(
  $colour-palette-default,
  (
    "background": brand-colour("white"),
    "background-tint": #ddd,
    "font-base": brand-colour("black"),
    "font-light": brand-colour("black"),
    "icon-light": brand-colour("black", 0.8),
    "link": #202fbc,
    "link-visited": #6a286b,
    "focus-outline": brand-colour("orange"),
    "keyline": brand-colour("black", 0.8),
    "keyline-dark": brand-colour("black"),
    "contrast-background": brand-colour("black"),
    "contrast-link": brand-colour("blue"),
    "contrast-font-light": brand-colour("white", 0.8),
    "contrast-link-visited": #a8f,
    "accent-border": brand-colour("dark-grey"),
    "accent-border-bright": brand-colour("white"),
    "accent-font-light": brand-colour("black", 0.8),
    "button-accented-background": #8f9997,
  )
) !default;

/*
=========================================
DARK, HIGH_CONTRAST THEME
=========================================
*/
$colour-palette-high-contrast-dark: map.merge(
  $colour-palette-dark,
  (
    "background": #111,
    "font-base": brand-colour("white"),
    "font-light": brand-colour("white"),
    "icon-light": brand-colour("white", 0.8),
    "link": #8fc7ff,
    "link-visited": #ccb8ff,
    "keyline": brand-colour("white", 0.8),
    "keyline-dark": brand-colour("white"),
    "input-background": brand-colour("black"),
    "form-error-border": #ff6b6b,
    "form-error-text": #ff6b6b,
    "contrast-background": brand-colour("black"),
    "contrast-link": brand-colour("blue"),
    "contrast-font-light": brand-colour("white", 0.8),
    "contrast-link-visited": #a8f,
    "accent-font-light": brand-colour("black", 0.8),
    "button-accented-background": #8f9997,
  )
) !default;