import { Theme } from "react-select";
import { colors, borderRadius, height, margin } from "../../tokens";
import { toNumber } from "../../utilities/toNumber";

export const adsTheme: Theme = {
  borderRadius: toNumber(borderRadius.DEFAULT),
  colors: {
    danger: colors.red["400"],
    dangerLight: colors.red["300"],
    neutral0: colors.white,
    neutral5: colors.gray["100"],
    neutral10: colors.gray["100"],
    neutral20: colors.gray["200"],
    neutral30: colors.gray["400"],
    neutral40: colors.gray["500"],
    neutral50: colors.gray["600"],
    neutral60: colors.gray["700"],
    neutral70: colors.gray["800"],
    neutral80: colors.gray["900"],
    neutral90: colors.gray["900"],
    primary: colors.blue["500"],
    primary25: colors.gray["300"],
    primary50: colors.gray["300"],
    primary75: colors.blue["400"],
  },
  spacing: {
    baseUnit: toNumber(margin["1"]),
    controlHeight: toNumber(height["10"]),
    menuGutter: toNumber(margin["1"]),
  },
};