Color mapping for Flexport Q3 2019 brand refresh

colorMap.js

const colors = Object.freeze({
  blackDoNotUse: {
    old: "#000000",
    new: "",
    map: null,
  },
  black: {
    old: "",
    new: "#39414D",
    map: null,
  },
  white: {
    old: "#FFFFFF",
    new: "#FFFFFF",
    map: "white",
  },
  grey10: {
    old: "#F7FAFC",
    new: "#F7F9FD",
    map: "grey10",
  },
  grey20: {
    old: "#EDF3F7",
    new: "#DAE3F3",
    map: "grey20",
  },
  grey30: {
    old: "#CED7DE",
    new: "#C5D2E7",
    map: "grey30",
  },
  grey40: {
    old: "#B0BAC2",
    new: "#6D7A8E",
    map: "grey40",
  },
  grey50: {
    old: "#6E7881",
    new: "#4B5564",
    map: "grey50",
  },
  grey60: {
    old: "#18191A",
    new: "#39414D",
    map: "black",
  },
  red10: {
    old: "#FFEBEB",
    new: "#FFF5F5",
    map: "red10",
  },
  red20: {
    old: "#FCBDBD",
    new: "#FDA6A6",
    map: "red20",
  },
  red30: {
    old: "#F2555F",
    new: "#FA5959",
    map: "red30",
  },
  red40: {
    old: "#EF3340",
    new: "#D92736",
    map: "red40",
  },
  red45: {
    old: "#D92736",
    new: "",
    map: null,
  },
  red50: {
    old: "#A6212A",
    new: "#BA0202",
    map: "red50",
  },
  red60: {
    old: "#591317",
    new: "#800000",
    map: "red60",
  },
  yellow10: {
    old: "#FCF6DE",
    new: "",
    map: "orange10",
  },
  yellow20: {
    old: "#FFE880",
    new: "",
    map: "orange20",
  },
  yellow30: {
    old: "#FFDE4C",
    new: "",
    map: "orange30",
  },
  yellow40: {
    old: "#FFD100",
    new: "",
    map: "orange40",
  },
  yellow50: {
    old: "#FF9419",
    new: "",
    map: "orange50",
  },
  yellow60: {
    old: "#662E00",
    new: "",
    map: "orange60",
  },
  orange10: {
    old: "",
    new: "#FFF7F0",
    map: null,
  },
  orange20: {
    old: "",
    new: "#FAC69D",
    map: null,
  },
  orange30: {
    old: "",
    new: "#F5954D",
    map: null,
  },
  orange40: {
    old: "",
    new: "#DA5A00",
    map: null,
  },
  orange50: {
    old: "",
    new: "#A64300",
    map: null,
  },
  orange60: {
    old: "",
    new: "#5C2500",
    map: null,
  },
  blue10: {
    old: "#E7F1FF",
    new: "#F5FCFF",
    map: "blue10",
  },
  blue20: {
    old: "#BAD2FF",
    new: "#C2E0EF",
    map: "blue20",
  },
  blue30: {
    old: "#3E6BE6",
    new: "#94C1DF",
    map: "indigo30",
  },
  blue40: {
    old: "#265DF1",
    new: "#6294BE",
    map: "indigo40",
  },
  blue50: {
    old: "#1942B3",
    new: "#326089",
    map: "indigo50",
  },
  blue60: {
    old: "#0E2259",
    new: "#0F2943",
    map: "indigo60",
  },
  green10: {
    old: "#EBFFF1",
    new: "#F5FFFC",
    map: "green10",
  },
  green20: {
    old: "#B0EBC3",
    new: "#BAF8EA",
    map: "green20",
  },
  green30: {
    old: "#66CC86",
    new: "#82F2DA",
    map: "green30",
  },
  green40: {
    old: "#12B873",
    new: "#45DABE",
    map: "green40",
  },
  green50: {
    old: "#2DA854",
    new: "#1DB595",
    map: "green50",
  },
  green60: {
    old: "#124D25",
    new: "#008062",
    map: "green60",
  },
  cyan10: {
    old: "#E8F6FF",
    new: "",
    map: "blue10",
  },
  cyan20: {
    old: "#BEE6FF",
    new: "",
    map: "blue20",
  },
  cyan30: {
    old: "#8CDBFF",
    new: "",
    map: "blue30",
  },
  cyan40: {
    old: "#66CFFF",
    new: "",
    map: "blue40",
  },
  cyan50: {
    old: "#0A8FCC",
    new: "",
    map: "blue50",
  },
  cyan60: {
    old: "#00384C",
    new: "",
    map: "blue60",
  },
  purple10: {
    old: "#F4EDFF",
    new: "#F9F5FF",
    map: "purple10",
  },
  purple20: {
    old: "#C4AEE8",
    new: "#CEA1FA",
    map: "purple20",
  },
  purple30: {
    old: "#8F62D9",
    new: "#AF50F5",
    map: "purple30",
  },
  purple40: {
    old: "#7B41D9",
    new: "#9200DA",
    map: "purple40",
  },
  purple50: {
    old: "#572E99",
    new: "#7700A6",
    map: "purple50",
  },
  purple60: {
    old: "#331B59",
    new: "#43005C",
    map: "purple60",
  },
  indigo10: {
    old: "",
    new: "#F5F6FF",
    map: null,
  },
  indigo20: {
    old: "",
    new: "#A2ACF2",
    map: null,
  },
  indigo30: {
    old: "",
    new: "#566AE5",
    map: null,
  },
  indigo40: {
    old: "",
    new: "#0723D8",
    map: null,
  },
  indigo50: {
    old: "",
    new: "#031ABA",
    map: null,
  },
  indigo60: {
    old: "",
    new: "#00108C",
    map: null,
  },
});

const transmissionColors = Object.freeze({
  green10: "#EBFFF1",
  green20: "#B0EBC3",
  green30: "#66CC86",
  green40: "#12B873",
  green50: "#2DA854",
  green60: "#124D25",
});

const colorMap = Object.freeze({
  blackDoNotUse: black,
  white: white,
  grey10: grey10,
  grey20: grey20,
  grey30: grey30
  grey40: grey40
  grey50: grey50
  grey60: black,
  red10: red10,
  red20: red20,
  red30: red30,
  red40: red40,
  red45: null
  red50: red50,
  red60: red60,
  yellow10: orange10,
  yellow20: orange20,
  yellow30: orange30,
  yellow40: orange40,
  yellow50: orange50,
  yellow60: orange60,
  blue10: blue10,
  blue20: blue20,
  blue30: indigo30,
  blue40: indigo40,
  blue50: indigo50,
  blue60: indigo60,
  green10: green10,
  green20: green20,
  green30: green30,
  green40: green40,
  green50: green50,
  green60: green60,
  cyan10: blue10,
  cyan20: blue20,
  cyan30: blue30,
  cyan40: blue40,
  cyan50: blue50,
  cyan60: blue60,
  purple10: purple10,
  purple20: purple20,
  purple30: purple30,
  purple40: purple40,
  purple50: purple50,
  purple60: purple60,
});