/**
 * The theme values here should be kept up to date in theme.css and should only be used in cases where
 * we cannot use CSS e.g. OG previews
 */
export const LIGHT_THEME = {
  white: "rgb(255, 255, 255)",
  black: "rgb(0, 0, 0)",
  textPrimary: "rgb(23, 23, 23)",
  textSecondary: "rgb(102, 102, 102)",
  textTertiary: "rgb(201, 201, 201)",
  bgPrimary: "rgb(255, 255, 255)",
  bgSecondary: "rgb(250, 250, 250)",
  bgApp: "rgb(250, 250, 250)",
  bgAdditional1: "rgb(242, 242, 242)",
  bgAdditional2: "rgb(235, 235, 235)",
  bgAdditional3: "rgb(230, 230, 230)",
  bgContrast1: "rgb(143, 143, 143)",
  bgContrast2: "rgb(128, 128, 128)",
  border1: "rgb(235, 235, 235)",
  border2: "rgb(220, 220, 220)",
  border3: "rgb(201, 201, 201)",
  bgPrimaryTransparent: "rgb(255, 255, 255)",
  bgSecondaryTransparent: "rgb(250, 250, 250)",
  bgAdditional1Transparent: "rgb(242, 242, 242)",
  bgAdditional2Transparent: "rgb(235, 235, 235)",
  bgAdditional3Transparent: "rgb(230, 230, 230)",
  bgContrast1Transparent: "rgb(143, 143, 143)",
  bgContrast2Transparent: "rgb(128, 128, 128)",
  border1Transparent: "rgb(235, 235, 235)",
  border2Transparent: "rgb(220, 220, 220)",
  border3Transparent: "rgb(201, 201, 201)",
  frosted1: "rgba(255, 255, 255, 0.04)",
  frosted2: "rgba(255, 255, 255, 0.08)",
  frosted3: "rgba(255, 255, 255, 0.12)",
  frosted4: "rgba(255, 255, 255, 0.16)",
  frosted5: "rgba(255, 255, 255, 0.24)",
  overlay: "rgba(0, 0, 0, 0.40)",
  legendary: "rgb(255, 138, 0)",
  legendaryTransparent: "rgba(255, 138, 0, 0.30)",
  legendaryTransparent1: "rgba(255, 138, 0, 0.30)",
  epic: "rgb(163, 53, 238)",
  epicTransparent: "rgba(163, 53, 238, 0.30)",
  epicTransparent1: "rgba(163, 53, 238, 0.30)",
  rare: "rgb(0, 102, 255)",
  rareTransparent: "rgba(0, 102, 255, 0.30)",
  rareTransparent1: "rgba(0, 102, 255, 0.30)",
  common: "rgb(143, 143, 143)",
  commonTransparent: "rgba(143, 143, 143, 0.30)",
  commonTransparent1: "rgba(143, 143, 143, 0.30)",
  blue1: "rgb(143, 199, 255)",
  blue2: "rgb(46, 141, 238)",
  blue3: "rgb(32, 129, 226)",
  blue4: "rgb(24, 104, 183)",
  blue5: "rgb(35, 90, 163)",
  link: "rgb(32, 129, 226)",
  linkHover: "rgb(35, 90, 163)",
  success: "rgb(40, 169, 72)",
  successTransparent1: "rgba(40, 169, 72, 0.08)",
  successTransparent2: "rgba(40, 169, 72, 0.16)",
  warning: "rgb(230, 184, 0)",
  warningTransparent1: "rgba(230, 184, 0, 0.08)",
  warningTransparent2: "rgba(230, 184, 0, 0.16)",
  caution: "rgb(244, 113, 0)",
  cautionTransparent1: "rgba(244, 113, 0, 0.08)",
  cautionTransparent2: "rgba(244, 113, 0, 0.16)",
  error: "rgb(234, 57, 67)",
  errorTransparent1: "rgba(234, 57, 67, 0.08)",
  errorTransparent2: "rgba(234, 57, 67, 0.16)",
} as const

export const DARK_THEME = {
  white: "rgb(255, 255, 255)",
  black: "rgb(0, 0, 0)",
  textPrimary: "rgb(255, 255, 255)",
  textSecondary: "rgb(172, 173, 174)",
  textTertiary: "rgb(67, 68, 71)",
  bgPrimary: "rgb(20, 20, 21)",
  bgSecondary: "rgb(23, 24, 26)",
  bgApp: "rgb(16, 16, 17)",
  bgAdditional1: "rgb(27, 29, 31)",
  bgAdditional2: "rgb(38, 39, 45)",
  bgAdditional3: "rgb(60, 61, 64)",
  bgContrast1: "rgb(137, 138, 140)",
  bgContrast2: "rgb(149, 149, 151)",
  border1: "rgb(38, 39, 45)",
  border2: "rgb(52, 53, 60)",
  border3: "rgb(67, 68, 71)",
  bgPrimaryTransparent: "rgba(255, 255, 255, 0.02)",
  bgSecondaryTransparent: "rgba(255, 255, 255, 0.04)",
  bgAdditional1Transparent: "rgba(255, 255, 255, 0.08)",
  bgAdditional2Transparent: "rgba(255, 255, 255, 0.12)",
  bgAdditional3Transparent: "rgba(255, 255, 255, 0.16)",
  bgContrast1Transparent: "rgba(255, 255, 255, 0.24)",
  bgContrast2Transparent: "rgba(255, 255, 255, 0.32)",
  border1Transparent: "rgba(255, 255, 255, 0.08)",
  border2Transparent: "rgba(255, 255, 255, 0.12)",
  border3Transparent: "rgba(255, 255, 255, 0.16)",
  frosted1: "rgba(255, 255, 255, 0.04)",
  frosted2: "rgba(255, 255, 255, 0.08)",
  frosted3: "rgba(255, 255, 255, 0.12)",
  frosted4: "rgba(255, 255, 255, 0.16)",
  frosted5: "rgba(255, 255, 255, 0.24)",
  overlay: "rgba(0, 0, 0, 0.60)",
  legendary: "rgb(255, 138, 0)",
  legendaryTransparent: "rgba(255, 138, 0, 0.30)",
  legendaryTransparent1: "rgba(255, 138, 0, 0.08)",
  epic: "rgb(211, 88, 255)",
  epicTransparent: "rgba(211, 88, 255, 0.30)",
  epicTransparent1: "rgba(211, 88, 255, 0.08)",
  rare: "rgb(0, 163, 255)",
  rareTransparent: "rgba(0, 163, 255, 0.30)",
  rareTransparent1: "rgba(0, 163, 255, 0.08)",
  common: "rgb(137, 138, 140)",
  commonTransparent: "rgba(137, 138, 140, 0.30)",
  commonTransparent1: "rgba(137, 138, 140, 0.08)",
  blue1: "rgb(143, 199, 255)",
  blue2: "rgb(46, 141, 238)",
  blue3: "rgb(32, 129, 226)",
  blue4: "rgb(24, 104, 183)",
  blue5: "rgb(35, 90, 163)",
  link: "rgb(143, 199, 255)",
  linkHover: "rgb(32, 129, 226)",
  success: "rgb(71, 187, 100)",
  successTransparent1: "rgba(71, 187, 100, 0.08)",
  successTransparent2: "rgba(71, 187, 100, 0.16)",
  warning: "rgb(255, 204, 0)",
  warningTransparent1: "rgba(255, 204, 0, 0.08)",
  warningTransparent2: "rgba(255, 204, 0, 0.16)",
  caution: "rgb(244, 113, 0)",
  cautionTransparent1: "rgba(244, 113, 0, 0.08)",
  cautionTransparent2: "rgba(244, 113, 0, 0.16)",
  error: "rgb(226, 71, 86)",
  errorTransparent1: "rgba(226, 71, 86, 0.08)",
  errorTransparent2: "rgba(226, 71, 86, 0.16)",
} as const satisfies Record<keyof typeof LIGHT_THEME, string>

export const THEME = {
  light: LIGHT_THEME,
  dark: DARK_THEME,
} as const