[Colors] Update color palette values with Colors V2

Implement IBM Design Language Palette v02 in carbon-elements

Almost all values of the palette have changed. The changes are super small but important for solving several accessibility issues in our components. Attached is the sketchfile containing the new palette.

Sketchfile https://ibm.box.com/s/ehviuw5uumkk1i7tonymke3tuwd7x3y4

Unfortunately there’s no text file output for all the hex codes 😭, so this work means opening the sketchfile, copy+paste hex codes into our elements code base. This issue is a blocker to a couple of component accessibility fixes so if anyone can take it, that will be great! 🙏

[joshblack]

For future reference, here’s the diff:

  Object {
    "black": Object {
      "100": "#000000",
    },
    "blue": Object {
-     "10": "#edf4ff",
-     "100": "#051243",
-     "20": "#c9deff",
-     "30": "#97c1ff",
-     "40": "#6ea6ff",
-     "50": "#408bfc",
-     "60": "#0062ff",
-     "70": "#054ada",
-     "80": "#0530ad",
-     "90": "#061f80",
+     "10": "#edf5ff",
+     "100": "#001141",
+     "20": "#d0e2ff",
+     "30": "#a6c8ff",
+     "40": "#78a9ff",
+     "50": "#4589ff",
+     "60": "#0f62fe",
+     "70": "#0043ce",
+     "80": "#002d9c",
+     "90": "#001d6c",
    },
    "coolGray": Object {
      "10": "#f2f4f8",
-     "100": "#13171a",
-     "20": "#d5d9e0",
-     "30": "#b9bfc7",
-     "40": "#9fa5ad",
-     "50": "#868d95",
+     "100": "#121619",
+     "20": "#dde1e6",
+     "30": "#c1c7cd",
+     "40": "#a2a9b0",
+     "50": "#878d96",
      "60": "#697077",
-     "70": "#50565b",
-     "80": "#373d42",
-     "90": "#242a2e",
+     "70": "#4d5358",
+     "80": "#343a3f",
+     "90": "#21272a",
    },
    "cyan": Object {
-     "10": "#e3f6ff",
-     "100": "#07192b",
-     "20": "#b3e6ff",
-     "30": "#6ccaff",
-     "40": "#30b0ff",
-     "50": "#1191e6",
+     "10": "#e5f6ff",
+     "100": "#061727",
+     "20": "#bae6ff",
+     "30": "#82cfff",
+     "40": "#33b1ff",
+     "50": "#1192e8",
      "60": "#0072c3",
-     "70": "#0058a1",
-     "80": "#003d73",
-     "90": "#002b50",
+     "70": "#00539a",
+     "80": "#003a6d",
+     "90": "#012749",
    },
    "gray": Object {
-     "10": "#f3f3f3",
-     "100": "#171717",
-     "20": "#dcdcdc",
-     "30": "#bebebe",
-     "40": "#a4a4a4",
-     "50": "#8c8c8c",
+     "10": "#f4f4f4",
+     "100": "#161616",
+     "20": "#e0e0e0",
+     "30": "#c6c6c6",
+     "40": "#a8a8a8",
+     "50": "#8d8d8d",
      "60": "#6f6f6f",
-     "70": "#565656",
-     "80": "#3d3d3d",
-     "90": "#282828",
+     "70": "#525252",
+     "80": "#393939",
+     "90": "#262626",
    },
    "green": Object {
-     "10": "#dafbe4",
-     "100": "#081b09",
-     "20": "#9deeb2",
-     "30": "#56d679",
-     "40": "#3dbb61",
+     "10": "#defbe6",
+     "100": "#071908",
+     "20": "#a7f0ba",
+     "30": "#6fdc8c",
+     "40": "#42be65",
      "50": "#24a148",
      "60": "#198038",
-     "70": "#10642a",
-     "80": "#054719",
-     "90": "#01330f",
+     "70": "#0e6027",
+     "80": "#044317",
+     "90": "#022d0d",
    },
    "magenta": Object {
-     "10": "#fff0f6",
-     "100": "#2a0a16",
-     "20": "#ffcfe1",
-     "30": "#ffa0c2",
-     "40": "#fa75a6",
-     "50": "#ee538b",
-     "60": "#d12765",
-     "70": "#a11950",
-     "80": "#760a3a",
-     "90": "#57002b",
+     "10": "#fff0f7",
+     "100": "#2a0a18",
+     "20": "#ffd6e8",
+     "30": "#ffafd2",
+     "40": "#ff7eb6",
+     "50": "#ee5396",
+     "60": "#d12771",
+     "70": "#9f1853",
+     "80": "#740937",
+     "90": "#510224",
    },
    "orange": Object {
-     "40": "#fc7b1e",
+     "40": "#ff832b",
    },
    "purple": Object {
-     "10": "#f7f1ff",
-     "100": "#1e1033",
-     "20": "#e6d6ff",
-     "30": "#d0b0ff",
-     "40": "#bb8eff",
-     "50": "#a66efa",
+     "10": "#f6f2ff",
+     "100": "#1c0f30",
+     "20": "#e8daff",
+     "30": "#d4bbff",
+     "40": "#be95ff",
+     "50": "#a56eff",
      "60": "#8a3ffc",
-     "70": "#6e32c9",
-     "80": "#4f2196",
-     "90": "#38146b",
+     "70": "#6929c4",
+     "80": "#491d8b",
+     "90": "#31135e",
    },
    "red": Object {
-     "10": "#fff0f1",
-     "100": "#2c080a",
-     "20": "#fcd0d3",
-     "30": "#ffa4a9",
-     "40": "#ff767c",
-     "50": "#fb4b53",
+     "10": "#fff1f1",
+     "100": "#2d0709",
+     "20": "#ffd7d9",
+     "30": "#ffb3b8",
+     "40": "#ff8389",
+     "50": "#fa4d56",
      "60": "#da1e28",
-     "70": "#a51920",
+     "70": "#a2191f",
      "80": "#750e13",
-     "90": "#570408",
+     "90": "#520408",
    },
    "teal": Object {
-     "10": "#dbfbfb",
+     "10": "#d9fbfb",
      "100": "#081a1c",
-     "20": "#92eeee",
-     "30": "#20d5d2",
-     "40": "#00bab6",
-     "50": "#009c98",
+     "20": "#9ef0f0",
+     "30": "#3ddbd9",
+     "40": "#08bdba",
+     "50": "#009d9a",
      "60": "#007d79",
-     "70": "#006161",
-     "80": "#004548",
-     "90": "#003137",
+     "70": "#005d5d",
+     "80": "#004144",
+     "90": "#022b30",
    },
    "warmGray": Object {
-     "10": "#f7f3f1",
-     "100": "#1a1717",
-     "20": "#e0dbda",
-     "30": "#c1bcbb",
-     "40": "#a7a2a2",
+     "10": "#f7f3f2",
+     "100": "#171414",
+     "20": "#e5e0df",
+     "30": "#cac5c4",
+     "40": "#ada8a8",
      "50": "#8f8b8b",
-     "60": "#726e6e",
-     "70": "#595555",
-     "80": "#403c3c",
-     "90": "#2b2828",
+     "60": "#736f6f",
+     "70": "#565151",
+     "80": "#3c3838",
+     "90": "#272525",
    },
    "white": Object {
      "0": "#ffffff",
    },
    "yellow": Object {
      "20": "#fdd13a",
+     "30": "#f1c21b",
    },
  }

[shixiedesign]

@joshblack I know…unfortunately I don’t think so! Sadek worked in this file so it represents the only place with hex codes. Sorry about the busy work. Also I’d trust the sketch style panel’s value over the text inside each square. Typos are pretty easy.