const colorNames = [
  "primaryBackground",
  "secondaryBackground",
  "tertiaryBackground",
  "primaryAccent",
  "primaryAccentLight",
  "primaryAccentLighter",
  "secondaryAccent",
  "secondaryAccentLight",
  "primaryHeading",
  "secondaryHeading",
  "link",
  "linkHover",
  "primaryText",
  "cardBackground",
  "label",
] as const;

// This type is needed for smart autocomplete
type ColorName = typeof colorNames[number];

export const Color: { [key in ColorName]: string } = {
  primaryBackground: "var(--primary-background)",
  secondaryBackground: "var(--secondary-background)",
  tertiaryBackground: "var(--tertiary-background)",
  primaryAccent: "var(--primary-accent)",
  primaryAccentLight: "var(--primary-accent-light)",
  primaryAccentLighter: "var(--primary-accent-lighter)",
  secondaryAccent: "var(--secondary-accent)",
  secondaryAccentLight: "var(--secondary-accent-light)",
  primaryHeading: "var(--primary-heading)",
  secondaryHeading: "var(--secondary-heading)",
  link: "var(--link)",
  linkHover: "var(--link-hover)",
  primaryText: "var(--primary-text)",
  cardBackground: "var(--card-background)",
  label: "var(--label)",
};