import type { Theme } from "@yaakapp/api";

export const tokyoNight: Theme = {
  id: "tokyo-night",
  label: "Tokyo Night",
  dark: true,
  base: {
    surface: "hsl(235, 21%, 13%)",
    surfaceHighlight: "hsl(235, 18%, 18%)",
    text: "hsl(229, 28%, 76%)",
    textSubtle: "hsl(232, 18%, 52%)",
    textSubtlest: "hsl(234, 16%, 40%)",
    primary: "hsl(266, 100%, 78%)",
    secondary: "hsl(232, 18%, 52%)",
    info: "hsl(217, 100%, 73%)",
    success: "hsl(158, 57%, 63%)",
    notice: "hsl(40, 67%, 65%)",
    warning: "hsl(25, 75%, 58%)",
    danger: "hsl(358, 100%, 70%)",
  },
  components: {
    dialog: {
      surface: "hsl(235, 21%, 11%)",
    },
    sidebar: {
      surface: "hsl(235, 21%, 11%)",
      border: "hsl(235, 18%, 16%)",
    },
    appHeader: {
      surface: "hsl(235, 21%, 9%)",
      border: "hsl(235, 18%, 14%)",
    },
    responsePane: {
      surface: "hsl(235, 21%, 11%)",
      border: "hsl(235, 18%, 16%)",
    },
    button: {
      primary: "hsl(266, 100%, 71%)",
      info: "hsl(217, 100%, 66%)",
      success: "hsl(158, 57%, 56%)",
      notice: "hsl(40, 67%, 58%)",
      warning: "hsl(25, 75%, 52%)",
      danger: "hsl(358, 100%, 63%)",
    },
  },
};

export const tokyoNightStorm: Theme = {
  id: "tokyo-night-storm",
  label: "Tokyo Night Storm",
  dark: true,
  base: {
    surface: "hsl(232, 25%, 17%)",
    surfaceHighlight: "hsl(232, 22%, 22%)",
    text: "hsl(229, 28%, 76%)",
    textSubtle: "hsl(232, 18%, 52%)",
    textSubtlest: "hsl(234, 16%, 40%)",
    primary: "hsl(266, 100%, 78%)",
    secondary: "hsl(232, 18%, 52%)",
    info: "hsl(217, 100%, 73%)",
    success: "hsl(158, 57%, 63%)",
    notice: "hsl(40, 67%, 65%)",
    warning: "hsl(25, 75%, 58%)",
    danger: "hsl(358, 100%, 70%)",
  },
  components: {
    dialog: {
      surface: "hsl(232, 25%, 14%)",
    },
    sidebar: {
      surface: "hsl(232, 25%, 14%)",
      border: "hsl(232, 22%, 20%)",
    },
    appHeader: {
      surface: "hsl(232, 25%, 12%)",
      border: "hsl(232, 22%, 18%)",
    },
    responsePane: {
      surface: "hsl(232, 25%, 14%)",
      border: "hsl(232, 22%, 20%)",
    },
    button: {
      primary: "hsl(266, 100%, 71%)",
      info: "hsl(217, 100%, 66%)",
      success: "hsl(158, 57%, 56%)",
      notice: "hsl(40, 67%, 58%)",
      warning: "hsl(25, 75%, 52%)",
      danger: "hsl(358, 100%, 63%)",
    },
  },
};

export const tokyoNightDay: Theme = {
  id: "tokyo-night-day",
  label: "Tokyo Night Day",
  dark: false,
  base: {
    surface: "hsl(212, 100%, 98%)",
    surfaceHighlight: "hsl(212, 60%, 93%)",
    text: "hsl(233, 26%, 27%)",
    textSubtle: "hsl(232, 18%, 45%)",
    textSubtlest: "hsl(232, 12%, 55%)",
    primary: "hsl(290, 80%, 45%)",
    secondary: "hsl(232, 18%, 50%)",
    info: "hsl(217, 88%, 52%)",
    success: "hsl(160, 75%, 35%)",
    notice: "hsl(41, 80%, 40%)",
    warning: "hsl(20, 80%, 48%)",
    danger: "hsl(359, 65%, 48%)",
  },
  components: {
    sidebar: {
      surface: "hsl(212, 60%, 95%)",
      border: "hsl(212, 40%, 88%)",
    },
    appHeader: {
      surface: "hsl(212, 60%, 93%)",
      border: "hsl(212, 40%, 86%)",
    },
  },
};