import { Theme } from "react-select";
import { tokens } from "../../style-dictionary/dist/tokens";
import { toNumber } from "../../utilities/toNumber";

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