@wistia/vhs-design-tokens 2.1.4-beta.923c2797.e41932d → 2.1.4-beta.c4112496.f722ff7

package/dist/js/colorMetadata.cjs

@@ -6,6 +6,7 @@ module.exports = {
   color: {
     brandBlue: {
       100: {
+        key: "{color.brandBlue.100}",
         value: "#E5E9FF",
         conformance: {
           black: "AAA",
@@ -19,6 +20,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.brandBlue.100}",
         },
         name: "ColorBrandBlue100",
         attributes: {
@@ -29,6 +31,7 @@ module.exports = {
         path: ["color", "brandBlue", "100"],
       },
       200: {
+        key: "{color.brandBlue.200}",
         value: "#CCD5FF",
         conformance: {
           black: "AAA",
@@ -42,6 +45,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.brandBlue.200}",
         },
         name: "ColorBrandBlue200",
         attributes: {
@@ -52,6 +56,7 @@ module.exports = {
         path: ["color", "brandBlue", "200"],
       },
       300: {
+        key: "{color.brandBlue.300}",
         value: "#99ABFF",
         conformance: {
           black: "AAA",
@@ -65,6 +70,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.brandBlue.300}",
         },
         name: "ColorBrandBlue300",
         attributes: {
@@ -75,6 +81,7 @@ module.exports = {
         path: ["color", "brandBlue", "300"],
       },
       400: {
+        key: "{color.brandBlue.400}",
         value: "#6B84FF",
         conformance: {
           black: "AAA",
@@ -88,6 +95,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.brandBlue.400}",
         },
         name: "ColorBrandBlue400",
         attributes: {
@@ -98,6 +106,7 @@ module.exports = {
         path: ["color", "brandBlue", "400"],
       },
       500: {
+        key: "{color.brandBlue.500}",
         value: "#2949E5",
         conformance: {
           black: "AA",
@@ -111,6 +120,7 @@ module.exports = {
             black: "AA",
             white: "AAA",
           },
+          key: "{color.brandBlue.500}",
         },
         name: "ColorBrandBlue500",
         attributes: {
@@ -121,6 +131,7 @@ module.exports = {
         path: ["color", "brandBlue", "500"],
       },
       600: {
+        key: "{color.brandBlue.600}",
         value: "#1F3399",
         conformance: {
           black: null,
@@ -134,6 +145,7 @@ module.exports = {
             black: null,
             white: "AAA",
           },
+          key: "{color.brandBlue.600}",
         },
         name: "ColorBrandBlue600",
         attributes: {
@@ -144,6 +156,7 @@ module.exports = {
         path: ["color", "brandBlue", "600"],
       },
       700: {
+        key: "{color.brandBlue.700}",
         value: "#222D66",
         conformance: {
           black: null,
@@ -157,6 +170,7 @@ module.exports = {
             black: null,
             white: "AAA",
           },
+          key: "{color.brandBlue.700}",
         },
         name: "ColorBrandBlue700",
         attributes: {
@@ -167,6 +181,7 @@ module.exports = {
         path: ["color", "brandBlue", "700"],
       },
       800: {
+        key: "{color.brandBlue.800}",
         value: "#000934",
         conformance: {
           black: null,
@@ -180,6 +195,7 @@ module.exports = {
             black: null,
             white: "AAA",
           },
+          key: "{color.brandBlue.800}",
         },
         name: "ColorBrandBlue800",
         attributes: {
@@ -192,6 +208,7 @@ module.exports = {
     },
     purple: {
       100: {
+        key: "{color.purple.100}",
         value: "#FDF7FF",
         conformance: {
           black: "AAA",
@@ -205,6 +222,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.purple.100}",
         },
         name: "ColorPurple100",
         attributes: {
@@ -215,6 +233,7 @@ module.exports = {
         path: ["color", "purple", "100"],
       },
       200: {
+        key: "{color.purple.200}",
         value: "#F9E5FF",
         conformance: {
           black: "AAA",
@@ -228,6 +247,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.purple.200}",
         },
         name: "ColorPurple200",
         attributes: {
@@ -238,6 +258,7 @@ module.exports = {
         path: ["color", "purple", "200"],
       },
       300: {
+        key: "{color.purple.300}",
         value: "#F2CAFF",
         conformance: {
           black: "AAA",
@@ -251,6 +272,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.purple.300}",
         },
         name: "ColorPurple300",
         attributes: {
@@ -261,6 +283,7 @@ module.exports = {
         path: ["color", "purple", "300"],
       },
       400: {
+        key: "{color.purple.400}",
         value: "#E093FA",
         conformance: {
           black: "AAA",
@@ -274,6 +297,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.purple.400}",
         },
         name: "ColorPurple400",
         attributes: {
@@ -284,6 +308,7 @@ module.exports = {
         path: ["color", "purple", "400"],
       },
       500: {
+        key: "{color.purple.500}",
         value: "#D65CFF",
         conformance: {
           black: "AAA",
@@ -297,6 +322,7 @@ module.exports = {
             black: "AAA",
             white: "AA",
           },
+          key: "{color.purple.500}",
         },
         name: "ColorPurple500",
         attributes: {
@@ -307,6 +333,7 @@ module.exports = {
         path: ["color", "purple", "500"],
       },
       600: {
+        key: "{color.purple.600}",
         value: "#AC12E0",
         conformance: {
           black: "AA",
@@ -320,6 +347,7 @@ module.exports = {
             black: "AA",
             white: "AA",
           },
+          key: "{color.purple.600}",
         },
         name: "ColorPurple600",
         attributes: {
@@ -330,6 +358,7 @@ module.exports = {
         path: ["color", "purple", "600"],
       },
       700: {
+        key: "{color.purple.700}",
         value: "#752E8C",
         conformance: {
           black: null,
@@ -343,6 +372,7 @@ module.exports = {
             black: null,
             white: "AAA",
           },
+          key: "{color.purple.700}",
         },
         name: "ColorPurple700",
         attributes: {
@@ -353,6 +383,7 @@ module.exports = {
         path: ["color", "purple", "700"],
       },
       800: {
+        key: "{color.purple.800}",
         value: "#39004D",
         conformance: {
           black: null,
@@ -366,6 +397,7 @@ module.exports = {
             black: null,
             white: "AAA",
           },
+          key: "{color.purple.800}",
         },
         name: "ColorPurple800",
         attributes: {
@@ -378,6 +410,7 @@ module.exports = {
     },
     green: {
       100: {
+        key: "{color.green.100}",
         value: "#F4FFF2",
         conformance: {
           black: "AAA",
@@ -391,6 +424,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.green.100}",
         },
         name: "ColorGreen100",
         attributes: {
@@ -401,6 +435,7 @@ module.exports = {
         path: ["color", "green", "100"],
       },
       200: {
+        key: "{color.green.200}",
         value: "#DFFFD9",
         conformance: {
           black: "AAA",
@@ -414,6 +449,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.green.200}",
         },
         name: "ColorGreen200",
         attributes: {
@@ -424,6 +460,7 @@ module.exports = {
         path: ["color", "green", "200"],
       },
       300: {
+        key: "{color.green.300}",
         value: "#B0E5A5",
         conformance: {
           black: "AAA",
@@ -437,6 +474,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.green.300}",
         },
         name: "ColorGreen300",
         attributes: {
@@ -447,6 +485,7 @@ module.exports = {
         path: ["color", "green", "300"],
       },
       400: {
+        key: "{color.green.400}",
         value: "#76D962",
         conformance: {
           black: "AAA",
@@ -460,6 +499,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.green.400}",
         },
         name: "ColorGreen400",
         attributes: {
@@ -470,6 +510,7 @@ module.exports = {
         path: ["color", "green", "400"],
       },
       500: {
+        key: "{color.green.500}",
         value: "#44B62D",
         conformance: {
           black: "AAA",
@@ -483,6 +524,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.green.500}",
         },
         name: "ColorGreen500",
         attributes: {
@@ -493,6 +535,7 @@ module.exports = {
         path: ["color", "green", "500"],
       },
       600: {
+        key: "{color.green.600}",
         value: "#268713",
         conformance: {
           black: "AAA",
@@ -506,6 +549,7 @@ module.exports = {
             black: "AAA",
             white: "AA",
           },
+          key: "{color.green.600}",
         },
         name: "ColorGreen600",
         attributes: {
@@ -516,6 +560,7 @@ module.exports = {
         path: ["color", "green", "600"],
       },
       700: {
+        key: "{color.green.700}",
         value: "#38662E",
         conformance: {
           black: "AA",
@@ -529,6 +574,7 @@ module.exports = {
             black: "AA",
             white: "AAA",
           },
+          key: "{color.green.700}",
         },
         name: "ColorGreen700",
         attributes: {
@@ -539,6 +585,7 @@ module.exports = {
         path: ["color", "green", "700"],
       },
       800: {
+        key: "{color.green.800}",
         value: "#093300",
         conformance: {
           black: null,
@@ -552,6 +599,7 @@ module.exports = {
             black: null,
             white: "AAA",
           },
+          key: "{color.green.800}",
         },
         name: "ColorGreen800",
         attributes: {
@@ -564,6 +612,7 @@ module.exports = {
     },
     blue: {
       100: {
+        key: "{color.blue.100}",
         value: "#E9F5FF",
         conformance: {
           black: "AAA",
@@ -577,6 +626,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.blue.100}",
         },
         name: "ColorBlue100",
         attributes: {
@@ -587,6 +637,7 @@ module.exports = {
         path: ["color", "blue", "100"],
       },
       200: {
+        key: "{color.blue.200}",
         value: "#C7E7FF",
         conformance: {
           black: "AAA",
@@ -600,6 +651,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.blue.200}",
         },
         name: "ColorBlue200",
         attributes: {
@@ -610,6 +662,7 @@ module.exports = {
         path: ["color", "blue", "200"],
       },
       300: {
+        key: "{color.blue.300}",
         value: "#91CEFF",
         conformance: {
           black: "AAA",
@@ -623,6 +676,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.blue.300}",
         },
         name: "ColorBlue300",
         attributes: {
@@ -633,6 +687,7 @@ module.exports = {
         path: ["color", "blue", "300"],
       },
       400: {
+        key: "{color.blue.400}",
         value: "#58B7FE",
         conformance: {
           black: "AAA",
@@ -646,6 +701,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.blue.400}",
         },
         name: "ColorBlue400",
         attributes: {
@@ -656,6 +712,7 @@ module.exports = {
         path: ["color", "blue", "400"],
       },
       500: {
+        key: "{color.blue.500}",
         value: "#229FFF",
         conformance: {
           black: "AAA",
@@ -669,6 +726,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.blue.500}",
         },
         name: "ColorBlue500",
         attributes: {
@@ -679,6 +737,7 @@ module.exports = {
         path: ["color", "blue", "500"],
       },
       600: {
+        key: "{color.blue.600}",
         value: "#1B7FDE",
         conformance: {
           black: "AAA",
@@ -692,6 +751,7 @@ module.exports = {
             black: "AAA",
             white: "AA",
           },
+          key: "{color.blue.600}",
         },
         name: "ColorBlue600",
         attributes: {
@@ -702,6 +762,7 @@ module.exports = {
         path: ["color", "blue", "600"],
       },
       700: {
+        key: "{color.blue.700}",
         value: "#165FAC",
         conformance: {
           black: "AA",
@@ -715,6 +776,7 @@ module.exports = {
             black: "AA",
             white: "AAA",
           },
+          key: "{color.blue.700}",
         },
         name: "ColorBlue700",
         attributes: {
@@ -725,6 +787,7 @@ module.exports = {
         path: ["color", "blue", "700"],
       },
       800: {
+        key: "{color.blue.800}",
         value: "#0D407A",
         conformance: {
           black: null,
@@ -738,6 +801,7 @@ module.exports = {
             black: null,
             white: "AAA",
           },
+          key: "{color.blue.800}",
         },
         name: "ColorBlue800",
         attributes: {
@@ -750,6 +814,7 @@ module.exports = {
     },
     pink: {
       100: {
+        key: "{color.pink.100}",
         value: "#FFF8FC",
         conformance: {
           black: "AAA",
@@ -763,6 +828,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.pink.100}",
         },
         name: "ColorPink100",
         attributes: {
@@ -773,6 +839,7 @@ module.exports = {
         path: ["color", "pink", "100"],
       },
       200: {
+        key: "{color.pink.200}",
         value: "#FFE5F4",
         conformance: {
           black: "AAA",
@@ -786,6 +853,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.pink.200}",
         },
         name: "ColorPink200",
         attributes: {
@@ -796,6 +864,7 @@ module.exports = {
         path: ["color", "pink", "200"],
       },
       300: {
+        key: "{color.pink.300}",
         value: "#FFC7E8",
         conformance: {
           black: "AAA",
@@ -809,6 +878,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.pink.300}",
         },
         name: "ColorPink300",
         attributes: {
@@ -819,6 +889,7 @@ module.exports = {
         path: ["color", "pink", "300"],
       },
       400: {
+        key: "{color.pink.400}",
         value: "#FF8CD0",
         conformance: {
           black: "AAA",
@@ -832,6 +903,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.pink.400}",
         },
         name: "ColorPink400",
         attributes: {
@@ -842,6 +914,7 @@ module.exports = {
         path: ["color", "pink", "400"],
       },
       500: {
+        key: "{color.pink.500}",
         value: "#FF40B3",
         conformance: {
           black: "AAA",
@@ -855,6 +928,7 @@ module.exports = {
             black: "AAA",
             white: "AA",
           },
+          key: "{color.pink.500}",
         },
         name: "ColorPink500",
         attributes: {
@@ -865,6 +939,7 @@ module.exports = {
         path: ["color", "pink", "500"],
       },
       600: {
+        key: "{color.pink.600}",
         value: "#E0128E",
         conformance: {
           black: "AA",
@@ -878,6 +953,7 @@ module.exports = {
             black: "AA",
             white: "AAA",
           },
+          key: "{color.pink.600}",
         },
         name: "ColorPink600",
         attributes: {
@@ -888,6 +964,7 @@ module.exports = {
         path: ["color", "pink", "600"],
       },
       700: {
+        key: "{color.pink.700}",
         value: "#661F4A",
         conformance: {
           black: null,
@@ -901,6 +978,7 @@ module.exports = {
             black: null,
             white: "AAA",
           },
+          key: "{color.pink.700}",
         },
         name: "ColorPink700",
         attributes: {
@@ -911,6 +989,7 @@ module.exports = {
         path: ["color", "pink", "700"],
       },
       800: {
+        key: "{color.pink.800}",
         value: "#4D002E",
         conformance: {
           black: null,
@@ -924,6 +1003,7 @@ module.exports = {
             black: null,
             white: "AAA",
           },
+          key: "{color.pink.800}",
         },
         name: "ColorPink800",
         attributes: {
@@ -936,6 +1016,7 @@ module.exports = {
     },
     red: {
       100: {
+        key: "{color.red.100}",
         value: "#FFF7F9",
         conformance: {
           black: "AAA",
@@ -949,6 +1030,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.red.100}",
         },
         name: "ColorRed100",
         attributes: {
@@ -959,6 +1041,7 @@ module.exports = {
         path: ["color", "red", "100"],
       },
       200: {
+        key: "{color.red.200}",
         value: "#FFCCD5",
         conformance: {
           black: "AAA",
@@ -972,6 +1055,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.red.200}",
         },
         name: "ColorRed200",
         attributes: {
@@ -982,6 +1066,7 @@ module.exports = {
         path: ["color", "red", "200"],
       },
       300: {
+        key: "{color.red.300}",
         value: "#FF99AB",
         conformance: {
           black: "AAA",
@@ -995,6 +1080,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.red.300}",
         },
         name: "ColorRed300",
         attributes: {
@@ -1005,6 +1091,7 @@ module.exports = {
         path: ["color", "red", "300"],
       },
       400: {
+        key: "{color.red.400}",
         value: "#FF6682",
         conformance: {
           black: "AAA",
@@ -1018,6 +1105,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.red.400}",
         },
         name: "ColorRed400",
         attributes: {
@@ -1028,6 +1116,7 @@ module.exports = {
         path: ["color", "red", "400"],
       },
       500: {
+        key: "{color.red.500}",
         value: "#FF2B51",
         conformance: {
           black: "AAA",
@@ -1041,6 +1130,7 @@ module.exports = {
             black: "AAA",
             white: "AA",
           },
+          key: "{color.red.500}",
         },
         name: "ColorRed500",
         attributes: {
@@ -1051,6 +1141,7 @@ module.exports = {
         path: ["color", "red", "500"],
       },
       600: {
+        key: "{color.red.600}",
         value: "#D60027",
         conformance: {
           black: "AAA",
@@ -1064,6 +1155,7 @@ module.exports = {
             black: "AAA",
             white: "AAA",
           },
+          key: "{color.red.600}",
         },
         name: "ColorRed600",
         attributes: {
@@ -1074,6 +1166,7 @@ module.exports = {
         path: ["color", "red", "600"],
       },
       700: {
+        key: "{color.red.700}",
         value: "#99001C",
         conformance: {
           black: null,
@@ -1087,6 +1180,7 @@ module.exports = {
             black: null,
             white: "AAA",
           },
+          key: "{color.red.700}",
         },
         name: "ColorRed700",
         attributes: {
@@ -1097,6 +1191,7 @@ module.exports = {
         path: ["color", "red", "700"],
       },
       800: {
+        key: "{color.red.800}",
         value: "#660013",
         conformance: {
           black: null,
@@ -1110,6 +1205,7 @@ module.exports = {
             black: null,
             white: "AAA",
           },
+          key: "{color.red.800}",
         },
         name: "ColorRed800",
         attributes: {
@@ -1122,6 +1218,7 @@ module.exports = {
     },
     yellow: {
       100: {
+        key: "{color.yellow.100}",
         value: "#FFFFF0",
         conformance: {
           black: "AAA",
@@ -1135,6 +1232,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.yellow.100}",
         },
         name: "ColorYellow100",
         attributes: {
@@ -1145,6 +1243,7 @@ module.exports = {
         path: ["color", "yellow", "100"],
       },
       200: {
+        key: "{color.yellow.200}",
         value: "#EFF18D",
         conformance: {
           black: "AAA",
@@ -1158,6 +1257,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.yellow.200}",
         },
         name: "ColorYellow200",
         attributes: {
@@ -1168,6 +1268,7 @@ module.exports = {
         path: ["color", "yellow", "200"],
       },
       300: {
+        key: "{color.yellow.300}",
         value: "#E8EC1E",
         conformance: {
           black: "AAA",
@@ -1181,6 +1282,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.yellow.300}",
         },
         name: "ColorYellow300",
         attributes: {
@@ -1191,6 +1293,7 @@ module.exports = {
         path: ["color", "yellow", "300"],
       },
       400: {
+        key: "{color.yellow.400}",
         value: "#D9DC25",
         conformance: {
           black: "AAA",
@@ -1204,6 +1307,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.yellow.400}",
         },
         name: "ColorYellow400",
         attributes: {
@@ -1214,6 +1318,7 @@ module.exports = {
         path: ["color", "yellow", "400"],
       },
       500: {
+        key: "{color.yellow.500}",
         value: "#BCBF19",
         conformance: {
           black: "AAA",
@@ -1227,6 +1332,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.yellow.500}",
         },
         name: "ColorYellow500",
         attributes: {
@@ -1237,6 +1343,7 @@ module.exports = {
         path: ["color", "yellow", "500"],
       },
       600: {
+        key: "{color.yellow.600}",
         value: "#9EA00F",
         conformance: {
           black: "AAA",
@@ -1250,6 +1357,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.yellow.600}",
         },
         name: "ColorYellow600",
         attributes: {
@@ -1260,6 +1368,7 @@ module.exports = {
         path: ["color", "yellow", "600"],
       },
       700: {
+        key: "{color.yellow.700}",
         value: "#7C7E07",
         conformance: {
           black: "AAA",
@@ -1273,6 +1382,7 @@ module.exports = {
             black: "AAA",
             white: "AA",
           },
+          key: "{color.yellow.700}",
         },
         name: "ColorYellow700",
         attributes: {
@@ -1283,6 +1393,7 @@ module.exports = {
         path: ["color", "yellow", "700"],
       },
       800: {
+        key: "{color.yellow.800}",
         value: "#4A4D00",
         conformance: {
           black: "AA",
@@ -1296,6 +1407,7 @@ module.exports = {
             black: "AA",
             white: "AAA",
           },
+          key: "{color.yellow.800}",
         },
         name: "ColorYellow800",
         attributes: {
@@ -1308,6 +1420,7 @@ module.exports = {
     },
     orange: {
       100: {
+        key: "{color.orange.100}",
         value: "#FFF9F8",
         conformance: {
           black: "AAA",
@@ -1321,6 +1434,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.orange.100}",
         },
         name: "ColorOrange100",
         attributes: {
@@ -1331,6 +1445,7 @@ module.exports = {
         path: ["color", "orange", "100"],
       },
       200: {
+        key: "{color.orange.200}",
         value: "#FFCABA",
         conformance: {
           black: "AAA",
@@ -1344,6 +1459,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.orange.200}",
         },
         name: "ColorOrange200",
         attributes: {
@@ -1354,6 +1470,7 @@ module.exports = {
         path: ["color", "orange", "200"],
       },
       300: {
+        key: "{color.orange.300}",
         value: "#FF9D80",
         conformance: {
           black: "AAA",
@@ -1367,6 +1484,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.orange.300}",
         },
         name: "ColorOrange300",
         attributes: {
@@ -1377,6 +1495,7 @@ module.exports = {
         path: ["color", "orange", "300"],
       },
       400: {
+        key: "{color.orange.400}",
         value: "#FF6C40",
         conformance: {
           black: "AAA",
@@ -1390,6 +1509,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.orange.400}",
         },
         name: "ColorOrange400",
         attributes: {
@@ -1400,6 +1520,7 @@ module.exports = {
         path: ["color", "orange", "400"],
       },
       500: {
+        key: "{color.orange.500}",
         value: "#D1451A",
         conformance: {
           black: "AA",
@@ -1413,6 +1534,7 @@ module.exports = {
             black: "AA",
             white: "AA",
           },
+          key: "{color.orange.500}",
         },
         name: "ColorOrange500",
         attributes: {
@@ -1423,6 +1545,7 @@ module.exports = {
         path: ["color", "orange", "500"],
       },
       600: {
+        key: "{color.orange.600}",
         value: "#B23009",
         conformance: {
           black: null,
@@ -1436,6 +1559,7 @@ module.exports = {
             black: null,
             white: "AA",
           },
+          key: "{color.orange.600}",
         },
         name: "ColorOrange600",
         attributes: {
@@ -1446,6 +1570,7 @@ module.exports = {
         path: ["color", "orange", "600"],
       },
       700: {
+        key: "{color.orange.700}",
         value: "#80280D",
         conformance: {
           black: null,
@@ -1459,6 +1584,7 @@ module.exports = {
             black: null,
             white: "AAA",
           },
+          key: "{color.orange.700}",
         },
         name: "ColorOrange700",
         attributes: {
@@ -1469,6 +1595,7 @@ module.exports = {
         path: ["color", "orange", "700"],
       },
       800: {
+        key: "{color.orange.800}",
         value: "#4D1200",
         conformance: {
           black: null,
@@ -1482,6 +1609,7 @@ module.exports = {
             black: null,
             white: "AAA",
           },
+          key: "{color.orange.800}",
         },
         name: "ColorOrange800",
         attributes: {
@@ -1494,6 +1622,7 @@ module.exports = {
     },
     grey: {
       100: {
+        key: "{color.grey.100}",
         value: "#F8F8F9",
         conformance: {
           black: "AAA",
@@ -1507,6 +1636,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.grey.100}",
         },
         name: "ColorGrey100",
         attributes: {
@@ -1517,6 +1647,7 @@ module.exports = {
         path: ["color", "grey", "100"],
       },
       200: {
+        key: "{color.grey.200}",
         value: "#EBEBED",
         conformance: {
           black: "AAA",
@@ -1530,6 +1661,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.grey.200}",
         },
         name: "ColorGrey200",
         attributes: {
@@ -1540,6 +1672,7 @@ module.exports = {
         path: ["color", "grey", "200"],
       },
       300: {
+        key: "{color.grey.300}",
         value: "#DEDEE1",
         conformance: {
           black: "AAA",
@@ -1553,6 +1686,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.grey.300}",
         },
         name: "ColorGrey300",
         attributes: {
@@ -1563,6 +1697,7 @@ module.exports = {
         path: ["color", "grey", "300"],
       },
       400: {
+        key: "{color.grey.400}",
         value: "#C4C4C8",
         conformance: {
           black: "AAA",
@@ -1576,6 +1711,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.grey.400}",
         },
         name: "ColorGrey400",
         attributes: {
@@ -1586,6 +1722,7 @@ module.exports = {
         path: ["color", "grey", "400"],
       },
       500: {
+        key: "{color.grey.500}",
         value: "#A3A3AA",
         conformance: {
           black: "AAA",
@@ -1599,6 +1736,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.grey.500}",
         },
         name: "ColorGrey500",
         attributes: {
@@ -1609,6 +1747,7 @@ module.exports = {
         path: ["color", "grey", "500"],
       },
       600: {
+        key: "{color.grey.600}",
         value: "#7B7B87",
         conformance: {
           black: "AA",
@@ -1622,6 +1761,7 @@ module.exports = {
             black: "AA",
             white: "AA",
           },
+          key: "{color.grey.600}",
         },
         name: "ColorGrey600",
         attributes: {
@@ -1632,6 +1772,7 @@ module.exports = {
         path: ["color", "grey", "600"],
       },
       700: {
+        key: "{color.grey.700}",
         value: "#62626C",
         conformance: {
           black: "AA",
@@ -1645,6 +1786,7 @@ module.exports = {
             black: "AA",
             white: "AAA",
           },
+          key: "{color.grey.700}",
         },
         name: "ColorGrey700",
         attributes: {
@@ -1655,6 +1797,7 @@ module.exports = {
         path: ["color", "grey", "700"],
       },
       800: {
+        key: "{color.grey.800}",
         value: "#4A4A51",
         conformance: {
           black: null,
@@ -1668,6 +1811,7 @@ module.exports = {
             black: null,
             white: "AAA",
           },
+          key: "{color.grey.800}",
         },
         name: "ColorGrey800",
         attributes: {
@@ -1678,6 +1822,7 @@ module.exports = {
         path: ["color", "grey", "800"],
       },
       900: {
+        key: "{color.grey.900}",
         value: "#37373C",
         conformance: {
           black: null,
@@ -1691,6 +1836,7 @@ module.exports = {
             black: null,
             white: "AAA",
           },
+          key: "{color.grey.900}",
         },
         name: "ColorGrey900",
         attributes: {
@@ -1701,6 +1847,7 @@ module.exports = {
         path: ["color", "grey", "900"],
       },
       1000: {
+        key: "{color.grey.1000}",
         value: "#1F1F22",
         conformance: {
           black: null,
@@ -1714,6 +1861,7 @@ module.exports = {
             black: null,
             white: "AAA",
           },
+          key: "{color.grey.1000}",
         },
         name: "ColorGrey1000",
         attributes: {
@@ -1724,6 +1872,7 @@ module.exports = {
         path: ["color", "grey", "1000"],
       },
       1100: {
+        key: "{color.grey.1100}",
         value: "#0B0D0E",
         conformance: {
           black: null,
@@ -1737,6 +1886,7 @@ module.exports = {
             black: null,
             white: "AAA",
           },
+          key: "{color.grey.1100}",
         },
         name: "ColorGrey1100",
         attributes: {
@@ -1749,6 +1899,7 @@ module.exports = {
     },
     error: {
       100: {
+        key: "{color.error.100}",
         value: "#FFECEC",
         conformance: {
           black: "AAA",
@@ -1762,6 +1913,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.error.100}",
         },
         name: "ColorError100",
         attributes: {
@@ -1772,6 +1924,7 @@ module.exports = {
         path: ["color", "error", "100"],
       },
       200: {
+        key: "{color.error.200}",
         value: "#FFCACA",
         conformance: {
           black: "AAA",
@@ -1785,6 +1938,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.error.200}",
         },
         name: "ColorError200",
         attributes: {
@@ -1795,6 +1949,7 @@ module.exports = {
         path: ["color", "error", "200"],
       },
       300: {
+        key: "{color.error.300}",
         value: "#FF9A9A",
         conformance: {
           black: "AAA",
@@ -1808,6 +1963,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.error.300}",
         },
         name: "ColorError300",
         attributes: {
@@ -1818,6 +1974,7 @@ module.exports = {
         path: ["color", "error", "300"],
       },
       400: {
+        key: "{color.error.400}",
         value: "#FF6962",
         conformance: {
           black: "AAA",
@@ -1831,6 +1988,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.error.400}",
         },
         name: "ColorError400",
         attributes: {
@@ -1841,6 +1999,7 @@ module.exports = {
         path: ["color", "error", "400"],
       },
       500: {
+        key: "{color.error.500}",
         value: "#FA4040",
         conformance: {
           black: "AAA",
@@ -1854,6 +2013,7 @@ module.exports = {
             black: "AAA",
             white: "AA",
           },
+          key: "{color.error.500}",
         },
         name: "ColorError500",
         attributes: {
@@ -1864,6 +2024,7 @@ module.exports = {
         path: ["color", "error", "500"],
       },
       600: {
+        key: "{color.error.600}",
         value: "#D63727",
         conformance: {
           black: "AAA",
@@ -1877,6 +2038,7 @@ module.exports = {
             black: "AAA",
             white: "AAA",
           },
+          key: "{color.error.600}",
         },
         name: "ColorError600",
         attributes: {
@@ -1887,6 +2049,7 @@ module.exports = {
         path: ["color", "error", "600"],
       },
       700: {
+        key: "{color.error.700}",
         value: "#AA0D15",
         conformance: {
           black: null,
@@ -1900,6 +2063,7 @@ module.exports = {
             black: null,
             white: "AAA",
           },
+          key: "{color.error.700}",
         },
         name: "ColorError700",
         attributes: {
@@ -1910,6 +2074,7 @@ module.exports = {
         path: ["color", "error", "700"],
       },
       800: {
+        key: "{color.error.800}",
         value: "#860011",
         conformance: {
           black: null,
@@ -1923,6 +2088,7 @@ module.exports = {
             black: null,
             white: "AAA",
           },
+          key: "{color.error.800}",
         },
         name: "ColorError800",
         attributes: {
@@ -1935,6 +2101,7 @@ module.exports = {
     },
     success: {
       100: {
+        key: "{color.success.100}",
         value: "#E6F9F3",
         conformance: {
           black: "AAA",
@@ -1948,6 +2115,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.success.100}",
         },
         name: "ColorSuccess100",
         attributes: {
@@ -1958,6 +2126,7 @@ module.exports = {
         path: ["color", "success", "100"],
       },
       200: {
+        key: "{color.success.200}",
         value: "#BFEFE0",
         conformance: {
           black: "AAA",
@@ -1971,6 +2140,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.success.200}",
         },
         name: "ColorSuccess200",
         attributes: {
@@ -1981,6 +2151,7 @@ module.exports = {
         path: ["color", "success", "200"],
       },
       300: {
+        key: "{color.success.300}",
         value: "#81E0C1",
         conformance: {
           black: "AAA",
@@ -1994,6 +2165,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.success.300}",
         },
         name: "ColorSuccess300",
         attributes: {
@@ -2004,6 +2176,7 @@ module.exports = {
         path: ["color", "success", "300"],
       },
       400: {
+        key: "{color.success.400}",
         value: "#41D0A3",
         conformance: {
           black: "AAA",
@@ -2017,6 +2190,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.success.400}",
         },
         name: "ColorSuccess400",
         attributes: {
@@ -2027,6 +2201,7 @@ module.exports = {
         path: ["color", "success", "400"],
       },
       500: {
+        key: "{color.success.500}",
         value: "#00C185",
         conformance: {
           black: "AAA",
@@ -2040,6 +2215,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.success.500}",
         },
         name: "ColorSuccess500",
         attributes: {
@@ -2050,6 +2226,7 @@ module.exports = {
         path: ["color", "success", "500"],
       },
       600: {
+        key: "{color.success.600}",
         value: "#00966E",
         conformance: {
           black: "AAA",
@@ -2063,6 +2240,7 @@ module.exports = {
             black: "AAA",
             white: "AA",
           },
+          key: "{color.success.600}",
         },
         name: "ColorSuccess600",
         attributes: {
@@ -2073,6 +2251,7 @@ module.exports = {
         path: ["color", "success", "600"],
       },
       700: {
+        key: "{color.success.700}",
         value: "#047063",
         conformance: {
           black: "AA",
@@ -2086,6 +2265,7 @@ module.exports = {
             black: "AA",
             white: "AAA",
           },
+          key: "{color.success.700}",
         },
         name: "ColorSuccess700",
         attributes: {
@@ -2096,6 +2276,7 @@ module.exports = {
         path: ["color", "success", "700"],
       },
       800: {
+        key: "{color.success.800}",
         value: "#025050",
         conformance: {
           black: null,
@@ -2109,6 +2290,7 @@ module.exports = {
             black: null,
             white: "AAA",
           },
+          key: "{color.success.800}",
         },
         name: "ColorSuccess800",
         attributes: {
@@ -2121,6 +2303,7 @@ module.exports = {
     },
     warning: {
       100: {
+        key: "{color.warning.100}",
         value: "#FFF8E6",
         conformance: {
           black: "AAA",
@@ -2134,6 +2317,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.warning.100}",
         },
         name: "ColorWarning100",
         attributes: {
@@ -2144,6 +2328,7 @@ module.exports = {
         path: ["color", "warning", "100"],
       },
       200: {
+        key: "{color.warning.200}",
         value: "#FFEFC8",
         conformance: {
           black: "AAA",
@@ -2157,6 +2342,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.warning.200}",
         },
         name: "ColorWarning200",
         attributes: {
@@ -2167,6 +2353,7 @@ module.exports = {
         path: ["color", "warning", "200"],
       },
       300: {
+        key: "{color.warning.300}",
         value: "#FFDF96",
         conformance: {
           black: "AAA",
@@ -2180,6 +2367,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.warning.300}",
         },
         name: "ColorWarning300",
         attributes: {
@@ -2190,6 +2378,7 @@ module.exports = {
         path: ["color", "warning", "300"],
       },
       400: {
+        key: "{color.warning.400}",
         value: "#FFCE5A",
         conformance: {
           black: "AAA",
@@ -2203,6 +2392,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.warning.400}",
         },
         name: "ColorWarning400",
         attributes: {
@@ -2213,6 +2403,7 @@ module.exports = {
         path: ["color", "warning", "400"],
       },
       500: {
+        key: "{color.warning.500}",
         value: "#FABE1F",
         conformance: {
           black: "AAA",
@@ -2226,6 +2417,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.warning.500}",
         },
         name: "ColorWarning500",
         attributes: {
@@ -2236,6 +2428,7 @@ module.exports = {
         path: ["color", "warning", "500"],
       },
       600: {
+        key: "{color.warning.600}",
         value: "#DC9601",
         conformance: {
           black: "AAA",
@@ -2249,6 +2442,7 @@ module.exports = {
             black: "AAA",
             white: null,
           },
+          key: "{color.warning.600}",
         },
         name: "ColorWarning600",
         attributes: {
@@ -2259,6 +2453,7 @@ module.exports = {
         path: ["color", "warning", "600"],
       },
       700: {
+        key: "{color.warning.700}",
         value: "#BE7200",
         conformance: {
           black: "AAA",
@@ -2272,6 +2467,7 @@ module.exports = {
             black: "AAA",
             white: "AA",
           },
+          key: "{color.warning.700}",
         },
         name: "ColorWarning700",
         attributes: {
@@ -2282,6 +2478,7 @@ module.exports = {
         path: ["color", "warning", "700"],
       },
       800: {
+        key: "{color.warning.800}",
         value: "#B45101",
         conformance: {
           black: "AA",
@@ -2295,6 +2492,7 @@ module.exports = {
             black: "AA",
             white: "AAA",
           },
+          key: "{color.warning.800}",
         },
         name: "ColorWarning800",
         attributes: {