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

export const horizon: Theme = {
  id: "horizon",
  label: "Horizon",
  dark: true,
  base: {
    surface: "hsl(220, 16%, 13%)",
    surfaceHighlight: "hsl(220, 14%, 18%)",
    text: "hsl(220, 15%, 85%)",
    textSubtle: "hsl(220, 10%, 55%)",
    textSubtlest: "hsl(220, 8%, 45%)",
    primary: "hsl(5, 85%, 68%)",
    secondary: "hsl(220, 10%, 55%)",
    info: "hsl(217, 70%, 68%)",
    success: "hsl(92, 50%, 60%)",
    notice: "hsl(34, 92%, 70%)",
    warning: "hsl(20, 90%, 65%)",
    danger: "hsl(355, 80%, 65%)",
  },
  components: {
    dialog: {
      surface: "hsl(220, 16%, 10%)",
    },
    sidebar: {
      surface: "hsl(220, 14%, 15%)",
      border: "hsl(220, 14%, 19%)",
    },
    appHeader: {
      surface: "hsl(220, 16%, 11%)",
      border: "hsl(220, 14%, 17%)",
    },
    responsePane: {
      surface: "hsl(220, 14%, 15%)",
      border: "hsl(220, 14%, 19%)",
    },
    button: {
      primary: "hsl(5, 85%, 61%)",
      secondary: "hsl(224,8%,53%)",
      info: "hsl(217, 70%, 61%)",
      success: "hsl(92, 50%, 53%)",
      notice: "hsl(34, 92%, 63%)",
      warning: "hsl(20, 90%, 58%)",
      danger: "hsl(355, 80%, 58%)",
    },
  },
};