@import "~nord/src/sass/nord.scss";

$dark-icon-themes: "theme_dark", "theme_solarizedDark", "theme_nord";

$font-family-sans-serif: "DM Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-family-source-code-pro: "Source Code Pro", monospace;
$font-size-base: 14px;

$text-color-light: #212529;
$muted-text-color-light: #6c747c;
$background-color-light: #ffffff;
$background-offset-color-light: #f0f0f0;
$brand-primary-light: #175ddc;
$password-special-color-light: #b80017;
$password-number-color-light: #1452c1;
$success-color-light: #017e45;
$error-color-light: #c83522;

$text-color-dark: #ffffff;
$muted-text-color-dark: #bac0ce;
$background-color-dark: #2f343d;
$background-offset-color-dark: darken(#2f343d, 2.75%);
$border-color-dark: #ddd;
$brand-primary-dark: #6f9df1;
$password-special-color-dark: #ff8d85;
$password-number-color-dark: #6f9df1;
$success-color-dark: #8db89b;
$error-color-dark: #ee9792;

$muted-blue: #5a6d91;
$muted-grey: #bac0ce;
$border-color: #ced4dc;

$border-radius: 3px;
$focus-outline-color: #1252a3;

$solarizedDarkBase0: #839496;
$solarizedDarkBase03: #002b36;
$solarizedDarkBase02: #073642;
$solarizedDarkBase01: #586e75;
$solarizedDarkBase2: #eee8d5;
$solarizedDarkCyan: #2aa198;
$solarizedDarkGreen: #859900;

$themes: (
  light: (
    textColor: $text-color-light,
    mutedTextColor: $muted-text-color-light,
    backgroundColor: $background-color-light,
    backgroundOffsetColor: $background-offset-color-light,
    primaryColor: $brand-primary-light,
    buttonPrimaryColor: $brand-primary-light,
    textContrast: $background-color-light,
    inputBorderColor: darken($border-color-dark, 2.75%),
    inputBackgroundColor: $background-color-light,
    borderColor: $border-color,
    focusOutlineColor: $focus-outline-color,
    successColor: $success-color-light,
    errorColor: $error-color-light,
    passkeysAuthenticating: $muted-blue,
    passwordSpecialColor: $password-special-color-light,
    passwordNumberColor: $password-number-color-light,
  ),
  dark: (
    textColor: $text-color-dark,
    mutedTextColor: $muted-text-color-dark,
    backgroundColor: $background-color-dark,
    backgroundOffsetColor: $background-offset-color-dark,
    buttonPrimaryColor: $brand-primary-dark,
    primaryColor: $brand-primary-dark,
    textContrast: $background-color-dark,
    inputBorderColor: #4c525f,
    inputBackgroundColor: $background-color-dark,
    borderColor: #4c525f,
    focusOutlineColor: lighten($focus-outline-color, 25%),
    successColor: $success-color-dark,
    errorColor: $error-color-dark,
    passkeysAuthenticating: $muted-grey,
    passwordSpecialColor: $password-special-color-dark,
    passwordNumberColor: $password-number-color-dark,
  ),
  nord: (
    textColor: $nord5,
    mutedTextColor: $nord4,
    backgroundColor: $nord1,
    backgroundOffsetColor: darken($nord1, 2.75%),
    buttonPrimaryColor: $nord8,
    primaryColor: $nord9,
    textContrast: $nord2,
    inputBorderColor: $nord0,
    inputBackgroundColor: $nord2,
    borderColor: $nord0,
    focusOutlineColor: lighten($focus-outline-color, 25%),
    successColor: $success-color-dark,
    passkeysAuthenticating: $nord4,
    passwordSpecialColor: $nord12,
    passwordNumberColor: $nord8,
  ),
  solarizedDark: (
    textColor: $solarizedDarkBase2,
    // Muted uses main text color to avoid contrast issues
    mutedTextColor: $solarizedDarkBase2,
    backgroundColor: $solarizedDarkBase03,
    backgroundOffsetColor: darken($solarizedDarkBase03, 2.75%),
    buttonPrimaryColor: $solarizedDarkCyan,
    primaryColor: $solarizedDarkGreen,
    textContrast: $solarizedDarkBase02,
    inputBorderColor: rgba($solarizedDarkBase2, 0.2),
    inputBackgroundColor: $solarizedDarkBase01,
    borderColor: $solarizedDarkBase2,
    focusOutlineColor: lighten($focus-outline-color, 15%),
    successColor: $success-color-dark,
    passkeysAuthenticating: $solarizedDarkBase2,
    passwordSpecialColor: #b58900,
    passwordNumberColor: $solarizedDarkCyan,
  ),
);

@mixin themify($themes: $themes) {
  @each $theme, $map in $themes {
    .theme_#{$theme} & {
      $theme-map: () !global;
      @each $key, $submap in $map {
        $value: map-get(map-get($themes, $theme), "#{$key}");
        $theme-map: map-merge(
          $theme-map,
          (
            $key: $value,
          )
        ) !global;
      }
      @content;
      $theme-map: null !global;
    }
  }
}

@function themed($key) {
  @return map-get($theme-map, $key);
}
