@sage/design-tokens 14.0.1 → 14.2.0

package/js/common/frozenproduct/large/dark/components/status.js

@@ -27,213 +27,6 @@ module.exports = {
         path: ["status", "color", "none"],
       },
       message: {
-        global: {
-          "label-default": {
-            $type: "color",
-            $value: "#fffffff2",
-            filePath: "data/tokens/components/status.json",
-            isSource: true,
-            original: {
-              $type: "color",
-              $value: "{modes.color.status.content.withDefaultAlt}",
-            },
-            name: "statusColorMessageGlobalLabelDefault",
-            attributes: {},
-            path: ["status", "color", "message", "global", "label-default"],
-          },
-          "label-hover": {
-            $type: "color",
-            $value: "#FFFFFF",
-            filePath: "data/tokens/components/status.json",
-            isSource: true,
-            original: {
-              $type: "color",
-              $value: "{modes.color.interactive.monochrome.withHover}",
-            },
-            name: "statusColorMessageGlobalLabelHover",
-            attributes: {},
-            path: ["status", "color", "message", "global", "label-hover"],
-          },
-          callout: {
-            "bg-default": {
-              $type: "color",
-              $value: "#122211",
-              $description: "Global message bg",
-              filePath: "data/tokens/components/status.json",
-              isSource: true,
-              original: {
-                $type: "color",
-                $value: "{modes.color.status.callout.defaultAlt}",
-                $description: "Global message bg",
-              },
-              name: "statusColorMessageGlobalCalloutBgDefault",
-              attributes: {},
-              path: [
-                "status",
-                "color",
-                "message",
-                "global",
-                "callout",
-                "bg-default",
-              ],
-            },
-            "bg-hover": {
-              $type: "color",
-              $value: "#263525",
-              $description: "global message bg hover",
-              filePath: "data/tokens/components/status.json",
-              isSource: true,
-              original: {
-                $type: "color",
-                $value: "{modes.color.status.callout.hoverAlt}",
-                $description: "global message bg hover",
-              },
-              name: "statusColorMessageGlobalCalloutBgHover",
-              attributes: {},
-              path: [
-                "status",
-                "color",
-                "message",
-                "global",
-                "callout",
-                "bg-hover",
-              ],
-            },
-            icon: {
-              $type: "color",
-              $value: "#fffffff2",
-              $description: "Icon on tinted bgs",
-              filePath: "data/tokens/components/status.json",
-              isSource: true,
-              original: {
-                $type: "color",
-                $value: "{modes.color.status.content.withDefaultAlt}",
-                $description: "Icon on tinted bgs",
-              },
-              name: "statusColorMessageGlobalCalloutIcon",
-              attributes: {},
-              path: ["status", "color", "message", "global", "callout", "icon"],
-            },
-          },
-          info: {
-            "bg-default": {
-              $type: "color",
-              $value: "#111722",
-              $description: "Global message bg",
-              filePath: "data/tokens/components/status.json",
-              isSource: true,
-              original: {
-                $type: "color",
-                $value: "{modes.color.status.info.defaultAlt}",
-                $description: "Global message bg",
-              },
-              name: "statusColorMessageGlobalInfoBgDefault",
-              attributes: {},
-              path: [
-                "status",
-                "color",
-                "message",
-                "global",
-                "info",
-                "bg-default",
-              ],
-            },
-            "bg-hover": {
-              $type: "color",
-              $value: "#17253a",
-              filePath: "data/tokens/components/status.json",
-              isSource: true,
-              original: {
-                $type: "color",
-                $value: "{modes.color.status.info.hoverAlt}",
-              },
-              name: "statusColorMessageGlobalInfoBgHover",
-              attributes: {},
-              path: [
-                "status",
-                "color",
-                "message",
-                "global",
-                "info",
-                "bg-hover",
-              ],
-            },
-            icon: {
-              $type: "color",
-              $value: "#007ED9",
-              $description: "Icon on tinted bgs",
-              filePath: "data/tokens/components/status.json",
-              isSource: true,
-              original: {
-                $type: "color",
-                $value: "{modes.color.status.info.default}",
-                $description: "Icon on tinted bgs",
-              },
-              name: "statusColorMessageGlobalInfoIcon",
-              attributes: {},
-              path: ["status", "color", "message", "global", "info", "icon"],
-            },
-          },
-          warning: {
-            "bg-default": {
-              $type: "color",
-              $value: "#251206",
-              $description: "Global message bg",
-              filePath: "data/tokens/components/status.json",
-              isSource: true,
-              original: {
-                $type: "color",
-                $value: "{modes.color.status.caution.defaultAlt}",
-                $description: "Global message bg",
-              },
-              name: "statusColorMessageGlobalWarningBgDefault",
-              attributes: {},
-              path: [
-                "status",
-                "color",
-                "message",
-                "global",
-                "warning",
-                "bg-default",
-              ],
-            },
-            "bg-hover": {
-              $type: "color",
-              $value: "#3e1a0b",
-              filePath: "data/tokens/components/status.json",
-              isSource: true,
-              original: {
-                $type: "color",
-                $value: "{modes.color.status.caution.hoverAlt}",
-              },
-              name: "statusColorMessageGlobalWarningBgHover",
-              attributes: {},
-              path: [
-                "status",
-                "color",
-                "message",
-                "global",
-                "warning",
-                "bg-hover",
-              ],
-            },
-            icon: {
-              $type: "color",
-              $value: "#E04500",
-              $description: "Icon on tinted bgs",
-              filePath: "data/tokens/components/status.json",
-              isSource: true,
-              original: {
-                $type: "color",
-                $value: "{modes.color.status.caution.default}",
-                $description: "Icon on tinted bgs",
-              },
-              name: "statusColorMessageGlobalWarningIcon",
-              attributes: {},
-              path: ["status", "color", "message", "global", "warning", "icon"],
-            },
-          },
-        },
         contextual: {
           bg: {
             $type: "color",
@@ -627,118 +420,1414 @@ module.exports = {
                 "border-default",
               ],
             },
-            icon: {
+            icon: {
+              $type: "color",
+              $value: "#009023",
+              $description: "Icon on tinted bgs",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.positive.default}",
+                $description: "Icon on tinted bgs",
+              },
+              name: "statusColorMessageContextualSuccessIcon",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "success",
+                "icon",
+              ],
+            },
+          },
+          warning: {
+            "bg-default": {
+              $type: "color",
+              $value: "#E04500",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.caution.default}",
+              },
+              name: "statusColorMessageContextualWarningBgDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "warning",
+                "bg-default",
+              ],
+            },
+            bgAlt: {
+              $type: "color",
+              $value: "#251206",
+              $description: "Subtle message bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.caution.defaultAlt}",
+                $description: "Subtle message bg",
+              },
+              name: "statusColorMessageContextualWarningBgAlt",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "warning",
+                "bgAlt",
+              ],
+            },
+            "border-default": {
+              $type: "color",
+              $value: "#E04500",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.caution.default}",
+              },
+              name: "statusColorMessageContextualWarningBorderDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "warning",
+                "border-default",
+              ],
+            },
+            icon: {
+              $type: "color",
+              $value: "#E04500",
+              $description: "Icon on tinted bgs",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.caution.default}",
+                $description: "Icon on tinted bgs",
+              },
+              name: "statusColorMessageContextualWarningIcon",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "warning",
+                "icon",
+              ],
+            },
+          },
+        },
+        global: {
+          "label-default": {
+            $type: "color",
+            $value: "#fffffff2",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.status.content.withDefaultAlt}",
+            },
+            name: "statusColorMessageGlobalLabelDefault",
+            attributes: {},
+            path: ["status", "color", "message", "global", "label-default"],
+          },
+          "label-hover": {
+            $type: "color",
+            $value: "#FFFFFF",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.interactive.monochrome.withHover}",
+            },
+            name: "statusColorMessageGlobalLabelHover",
+            attributes: {},
+            path: ["status", "color", "message", "global", "label-hover"],
+          },
+          callout: {
+            "bg-default": {
+              $type: "color",
+              $value: "#122211",
+              $description: "Global message bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.callout.defaultAlt}",
+                $description: "Global message bg",
+              },
+              name: "statusColorMessageGlobalCalloutBgDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "global",
+                "callout",
+                "bg-default",
+              ],
+            },
+            "bg-hover": {
+              $type: "color",
+              $value: "#263525",
+              $description: "global message bg hover",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.callout.hoverAlt}",
+                $description: "global message bg hover",
+              },
+              name: "statusColorMessageGlobalCalloutBgHover",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "global",
+                "callout",
+                "bg-hover",
+              ],
+            },
+            icon: {
+              $type: "color",
+              $value: "#fffffff2",
+              $description: "Icon on tinted bgs",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.content.withDefaultAlt}",
+                $description: "Icon on tinted bgs",
+              },
+              name: "statusColorMessageGlobalCalloutIcon",
+              attributes: {},
+              path: ["status", "color", "message", "global", "callout", "icon"],
+            },
+          },
+          info: {
+            "bg-default": {
+              $type: "color",
+              $value: "#111722",
+              $description: "Global message bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.info.defaultAlt}",
+                $description: "Global message bg",
+              },
+              name: "statusColorMessageGlobalInfoBgDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "global",
+                "info",
+                "bg-default",
+              ],
+            },
+            "bg-hover": {
+              $type: "color",
+              $value: "#17253a",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.info.hoverAlt}",
+              },
+              name: "statusColorMessageGlobalInfoBgHover",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "global",
+                "info",
+                "bg-hover",
+              ],
+            },
+            icon: {
+              $type: "color",
+              $value: "#007ED9",
+              $description: "Icon on tinted bgs",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.info.default}",
+                $description: "Icon on tinted bgs",
+              },
+              name: "statusColorMessageGlobalInfoIcon",
+              attributes: {},
+              path: ["status", "color", "message", "global", "info", "icon"],
+            },
+          },
+          warning: {
+            "bg-default": {
+              $type: "color",
+              $value: "#251206",
+              $description: "Global message bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.caution.defaultAlt}",
+                $description: "Global message bg",
+              },
+              name: "statusColorMessageGlobalWarningBgDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "global",
+                "warning",
+                "bg-default",
+              ],
+            },
+            "bg-hover": {
+              $type: "color",
+              $value: "#3e1a0b",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.caution.hoverAlt}",
+              },
+              name: "statusColorMessageGlobalWarningBgHover",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "global",
+                "warning",
+                "bg-hover",
+              ],
+            },
+            icon: {
+              $type: "color",
+              $value: "#E04500",
+              $description: "Icon on tinted bgs",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.caution.default}",
+                $description: "Icon on tinted bgs",
+              },
+              name: "statusColorMessageGlobalWarningIcon",
+              attributes: {},
+              path: ["status", "color", "message", "global", "warning", "icon"],
+            },
+          },
+        },
+      },
+      pill: {
+        custom: {
+          blue: {
+            "bg-default": {
+              $type: "color",
+              $value: "#007FD9",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.blue.default}",
+              },
+              name: "statusColorPillCustomBlueBgDefault",
+              attributes: {},
+              path: ["status", "color", "pill", "custom", "blue", "bg-default"],
+            },
+            "bgAlt-default": {
+              $type: "color",
+              $value: "#0d1219",
+              $description: "outline pill bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.blue.defaultAlt}",
+                $description: "outline pill bg",
+              },
+              name: "statusColorPillCustomBlueBgAltDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "blue",
+                "bgAlt-default",
+              ],
+            },
+            "bgAlt-hover": {
+              $type: "color",
+              $value: "#142131",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.blue.hoverAlt}",
+              },
+              name: "statusColorPillCustomBlueBgAltHover",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "blue",
+                "bgAlt-hover",
+              ],
+            },
+            "bg-hover": {
+              $type: "color",
+              $value: "#4f91df",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.blue.hover}",
+              },
+              name: "statusColorPillCustomBlueBgHover",
+              attributes: {},
+              path: ["status", "color", "pill", "custom", "blue", "bg-hover"],
+            },
+            "border-default": {
+              $type: "color",
+              $value: "#007FD9",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.blue.default}",
+              },
+              name: "statusColorPillCustomBlueBorderDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "blue",
+                "border-default",
+              ],
+            },
+          },
+          teal: {
+            "bg-default": {
+              $type: "color",
+              $value: "#008A89",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.teal.default}",
+              },
+              name: "statusColorPillCustomTealBgDefault",
+              attributes: {},
+              path: ["status", "color", "pill", "custom", "teal", "bg-default"],
+            },
+            "bgAlt-default": {
+              $type: "color",
+              $value: "#0a1313",
+              $description: "outline pill bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.teal.defaultAlt}",
+                $description: "outline pill bg",
+              },
+              name: "statusColorPillCustomTealBgAltDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "teal",
+                "bgAlt-default",
+              ],
+            },
+            "bgAlt-hover": {
+              $type: "color",
+              $value: "#082427",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.teal.hoverAlt}",
+              },
+              name: "statusColorPillCustomTealBgAltHover",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "teal",
+                "bgAlt-hover",
+              ],
+            },
+            "bg-hover": {
+              $type: "color",
+              $value: "#449b9a",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.teal.hover}",
+              },
+              name: "statusColorPillCustomTealBgHover",
+              attributes: {},
+              path: ["status", "color", "pill", "custom", "teal", "bg-hover"],
+            },
+            "border-default": {
+              $type: "color",
+              $value: "#008A89",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.teal.default}",
+              },
+              name: "statusColorPillCustomTealBorderDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "teal",
+                "border-default",
+              ],
+            },
+          },
+          green: {
+            "bg-default": {
+              $type: "color",
+              $value: "#009023",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.green.default}",
+              },
+              name: "statusColorPillCustomGreenBgDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "green",
+                "bg-default",
+              ],
+            },
+            "bgAlt-default": {
+              $type: "color",
+              $value: "#0a1408",
+              $description: "outline pill bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.green.defaultAlt}",
+                $description: "outline pill bg",
+              },
+              name: "statusColorPillCustomGreenBgAltDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "green",
+                "bgAlt-default",
+              ],
+            },
+            "bgAlt-hover": {
+              $type: "color",
+              $value: "#0b2418",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.green.hoverAlt}",
+              },
+              name: "statusColorPillCustomGreenBgAltHover",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "green",
+                "bgAlt-hover",
+              ],
+            },
+            "bg-hover": {
+              $type: "color",
+              $value: "#44a146",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.green.hover}",
+              },
+              name: "statusColorPillCustomGreenBgHover",
+              attributes: {},
+              path: ["status", "color", "pill", "custom", "green", "bg-hover"],
+            },
+            "border-default": {
+              $type: "color",
+              $value: "#009023",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.green.default}",
+              },
+              name: "statusColorPillCustomGreenBorderDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "green",
+                "border-default",
+              ],
+            },
+          },
+          lime: {
+            "bg-default": {
+              $type: "color",
+              $value: "#6E8500",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.lime.default}",
+              },
+              name: "statusColorPillCustomLimeBgDefault",
+              attributes: {},
+              path: ["status", "color", "pill", "custom", "lime", "bg-default"],
+            },
+            "bgAlt-default": {
+              $type: "color",
+              $value: "#111205",
+              $description: "outline pill bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.lime.defaultAlt}",
+                $description: "outline pill bg",
+              },
+              name: "statusColorPillCustomLimeBgAltDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "lime",
+                "bgAlt-default",
+              ],
+            },
+            "bgAlt-hover": {
+              $type: "color",
+              $value: "#162311",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.lime.hoverAlt}",
+              },
+              name: "statusColorPillCustomLimeBgAltHover",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "lime",
+                "bgAlt-hover",
+              ],
+            },
+            "bg-hover": {
+              $type: "color",
+              $value: "#859635",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.lime.hover}",
+              },
+              name: "statusColorPillCustomLimeBgHover",
+              attributes: {},
+              path: ["status", "color", "pill", "custom", "lime", "bg-hover"],
+            },
+            "border-default": {
+              $type: "color",
+              $value: "#6E8500",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.lime.default}",
+              },
+              name: "statusColorPillCustomLimeBorderDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "lime",
+                "border-default",
+              ],
+            },
+          },
+          orange: {
+            "bg-default": {
+              $type: "color",
+              $value: "#DB4B00",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.orange.default}",
+              },
+              name: "statusColorPillCustomOrangeBgDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "orange",
+                "bg-default",
+              ],
+            },
+            "bgAlt-default": {
+              $type: "color",
+              $value: "#1c0e04",
+              $description: "outline pill bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.orange.defaultAlt}",
+                $description: "outline pill bg",
+              },
+              name: "statusColorPillCustomOrangeBgAltDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "orange",
+                "bgAlt-default",
+              ],
+            },
+            "bgAlt-hover": {
+              $type: "color",
+              $value: "#331816",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.orange.hoverAlt}",
+              },
+              name: "statusColorPillCustomOrangeBgAltHover",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "orange",
+                "bgAlt-hover",
+              ],
+            },
+            "bg-hover": {
+              $type: "color",
+              $value: "#e66930",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.orange.hover}",
+              },
+              name: "statusColorPillCustomOrangeBgHover",
+              attributes: {},
+              path: ["status", "color", "pill", "custom", "orange", "bg-hover"],
+            },
+            "border-default": {
+              $type: "color",
+              $value: "#DB4B00",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.orange.default}",
+              },
+              name: "statusColorPillCustomOrangeBorderDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "orange",
+                "border-default",
+              ],
+            },
+          },
+          red: {
+            "bg-default": {
+              $type: "color",
+              $value: "#F50058",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.red.default}",
+              },
+              name: "statusColorPillCustomRedBgDefault",
+              attributes: {},
+              path: ["status", "color", "pill", "custom", "red", "bg-default"],
+            },
+            "bgAlt-default": {
+              $type: "color",
+              $value: "#1e0d0d",
+              $description: "outline pill bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.red.defaultAlt}",
+                $description: "outline pill bg",
+              },
+              name: "statusColorPillCustomRedBgAltDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "red",
+                "bgAlt-default",
+              ],
+            },
+            "bgAlt-hover": {
+              $type: "color",
+              $value: "#331720",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.red.hoverAlt}",
+              },
+              name: "statusColorPillCustomRedBgAltHover",
+              attributes: {},
+              path: ["status", "color", "pill", "custom", "red", "bgAlt-hover"],
+            },
+            "bg-hover": {
+              $type: "color",
+              $value: "#fc4e6e",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.red.hover}",
+              },
+              name: "statusColorPillCustomRedBgHover",
+              attributes: {},
+              path: ["status", "color", "pill", "custom", "red", "bg-hover"],
+            },
+            "border-default": {
+              $type: "color",
+              $value: "#F50058",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.red.default}",
+              },
+              name: "statusColorPillCustomRedBorderDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "red",
+                "border-default",
+              ],
+            },
+          },
+          pink: {
+            "bg-default": {
+              $type: "color",
+              $value: "#DD2BAB",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.pink.default}",
+              },
+              name: "statusColorPillCustomPinkBgDefault",
+              attributes: {},
+              path: ["status", "color", "pill", "custom", "pink", "bg-default"],
+            },
+            "bgAlt-default": {
+              $type: "color",
+              $value: "#1b0d16",
+              $description: "outline pill bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.pink.defaultAlt}",
+                $description: "outline pill bg",
+              },
+              name: "statusColorPillCustomPinkBgAltDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "pink",
+                "bgAlt-default",
+              ],
+            },
+            "bgAlt-hover": {
+              $type: "color",
+              $value: "#2d192b",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.pink.hoverAlt}",
+              },
+              name: "statusColorPillCustomPinkBgAltHover",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "pink",
+                "bgAlt-hover",
+              ],
+            },
+            "bg-hover": {
+              $type: "color",
+              $value: "#e558b7",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.pink.hover}",
+              },
+              name: "statusColorPillCustomPinkBgHover",
+              attributes: {},
+              path: ["status", "color", "pill", "custom", "pink", "bg-hover"],
+            },
+            "border-default": {
+              $type: "color",
+              $value: "#DD2BAB",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.pink.default}",
+              },
+              name: "statusColorPillCustomPinkBorderDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "pink",
+                "border-default",
+              ],
+            },
+          },
+          purple: {
+            "bg-default": {
+              $type: "color",
+              $value: "#985FDC",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.purple.default}",
+              },
+              name: "statusColorPillCustomPurpleBgDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "purple",
+                "bg-default",
+              ],
+            },
+            "bgAlt-default": {
+              $type: "color",
+              $value: "#150f19",
+              $description: "outline pill bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.purple.defaultAlt}",
+                $description: "outline pill bg",
+              },
+              name: "statusColorPillCustomPurpleBgAltDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "purple",
+                "bgAlt-default",
+              ],
+            },
+            "bgAlt-hover": {
+              $type: "color",
+              $value: "#231c30",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.purple.hoverAlt}",
+              },
+              name: "statusColorPillCustomPurpleBgAltHover",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "purple",
+                "bgAlt-hover",
+              ],
+            },
+            "bg-hover": {
+              $type: "color",
+              $value: "#a977e2",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.purple.hover}",
+              },
+              name: "statusColorPillCustomPurpleBgHover",
+              attributes: {},
+              path: ["status", "color", "pill", "custom", "purple", "bg-hover"],
+            },
+            "border-default": {
+              $type: "color",
+              $value: "#985FDC",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.purple.default}",
+              },
+              name: "statusColorPillCustomPurpleBorderDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "purple",
+                "border-default",
+              ],
+            },
+          },
+          gray: {
+            "bg-default": {
+              $type: "color",
+              $value: "#7C7C7C",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.gray.default}",
+              },
+              name: "statusColorPillCustomGrayBgDefault",
+              attributes: {},
+              path: ["status", "color", "pill", "custom", "gray", "bg-default"],
+            },
+            "bgAlt-default": {
+              $type: "color",
+              $value: "#111",
+              $description: "outline pill bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.gray.defaultAlt}",
+                $description: "outline pill bg",
+              },
+              name: "statusColorPillCustomGrayBgAltDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "gray",
+                "bgAlt-default",
+              ],
+            },
+            "bgAlt-hover": {
+              $type: "color",
+              $value: "#1a202b",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.gray.hoverAlt}",
+              },
+              name: "statusColorPillCustomGrayBgAltHover",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "gray",
+                "bgAlt-hover",
+              ],
+            },
+            "bg-hover": {
+              $type: "color",
+              $value: "#8e8e8e",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.gray.hover}",
+              },
+              name: "statusColorPillCustomGrayBgHover",
+              attributes: {},
+              path: ["status", "color", "pill", "custom", "gray", "bg-hover"],
+            },
+            "border-default": {
+              $type: "color",
+              $value: "#7C7C7C",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.gray.default}",
+              },
+              name: "statusColorPillCustomGrayBorderDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "gray",
+                "border-default",
+              ],
+            },
+          },
+          slate: {
+            "bg-default": {
+              $type: "color",
+              $value: "#5C8196",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.slate.default}",
+              },
+              name: "statusColorPillCustomSlateBgDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "slate",
+                "bg-default",
+              ],
+            },
+            "bgAlt-default": {
+              $type: "color",
+              $value: "#0f1214",
+              $description: "outline pill bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.slate.defaultAlt}",
+                $description: "outline pill bg",
+              },
+              name: "statusColorPillCustomSlateBgAltDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "slate",
+                "bgAlt-default",
+              ],
+            },
+            "bgAlt-hover": {
+              $type: "color",
+              $value: "#13222c",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.slate.hoverAlt}",
+              },
+              name: "statusColorPillCustomSlateBgAltHover",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "slate",
+                "bgAlt-hover",
+              ],
+            },
+            "bg-hover": {
+              $type: "color",
+              $value: "#7493a5",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.slate.hover}",
+              },
+              name: "statusColorPillCustomSlateBgHover",
+              attributes: {},
+              path: ["status", "color", "pill", "custom", "slate", "bg-hover"],
+            },
+            "border-default": {
+              $type: "color",
+              $value: "#5C8196",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.custom.slate.default}",
+              },
+              name: "statusColorPillCustomSlateBorderDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "custom",
+                "slate",
+                "border-default",
+              ],
+            },
+          },
+        },
+        error: {
+          "bg-default": {
+            $type: "color",
+            $value: "#E13E53",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.status.negative.default}",
+            },
+            name: "statusColorPillErrorBgDefault",
+            attributes: {},
+            path: ["status", "color", "pill", "error", "bg-default"],
+          },
+          "bgAlt-default": {
+            $type: "color",
+            $value: "#241212",
+            $description: "outline pill bg",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.status.negative.defaultAlt}",
+              $description: "outline pill bg",
+            },
+            name: "statusColorPillErrorBgAltDefault",
+            attributes: {},
+            path: ["status", "color", "pill", "error", "bgAlt-default"],
+          },
+          "bgAlt-hover": {
+            $type: "color",
+            $value: "#3d1a1c",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.status.negative.hoverAlt}",
+            },
+            name: "statusColorPillErrorBgAltHover",
+            attributes: {},
+            path: ["status", "color", "pill", "error", "bgAlt-hover"],
+          },
+          "bg-hover": {
+            $type: "color",
+            $value: "#ea626a",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.status.negative.hover}",
+            },
+            name: "statusColorPillErrorBgHover",
+            attributes: {},
+            path: ["status", "color", "pill", "error", "bg-hover"],
+          },
+          "border-default": {
+            $type: "color",
+            $value: "#E13E53",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.status.negative.default}",
+            },
+            name: "statusColorPillErrorBorderDefault",
+            attributes: {},
+            path: ["status", "color", "pill", "error", "border-default"],
+          },
+          inverse: {
+            "bg-default": {
               $type: "color",
-              $value: "#009023",
-              $description: "Icon on tinted bgs",
+              $value: "#CD384B",
               filePath: "data/tokens/components/status.json",
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.status.positive.default}",
-                $description: "Icon on tinted bgs",
+                $value: "{modes.color.status.negative.inverse.default}",
               },
-              name: "statusColorMessageContextualSuccessIcon",
+              name: "statusColorPillErrorInverseBgDefault",
               attributes: {},
               path: [
                 "status",
                 "color",
-                "message",
-                "contextual",
-                "success",
-                "icon",
+                "pill",
+                "error",
+                "inverse",
+                "bg-default",
               ],
             },
-          },
-          warning: {
-            "bg-default": {
+            "bgAlt-default": {
               $type: "color",
-              $value: "#E04500",
+              $value: "#fdeceb",
+              $description: "outline pill bg",
               filePath: "data/tokens/components/status.json",
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.status.caution.default}",
+                $value: "{modes.color.status.negative.inverse.defaultAlt}",
+                $description: "outline pill bg",
               },
-              name: "statusColorMessageContextualWarningBgDefault",
+              name: "statusColorPillErrorInverseBgAltDefault",
               attributes: {},
               path: [
                 "status",
                 "color",
-                "message",
-                "contextual",
-                "warning",
-                "bg-default",
+                "pill",
+                "error",
+                "inverse",
+                "bgAlt-default",
               ],
             },
-            bgAlt: {
+            "bgAlt-hover": {
               $type: "color",
-              $value: "#251206",
-              $description: "Subtle message bg",
+              $value: "#f9d3d1",
               filePath: "data/tokens/components/status.json",
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.status.caution.defaultAlt}",
-                $description: "Subtle message bg",
+                $value: "{modes.color.status.negative.inverse.hoverAlt}",
               },
-              name: "statusColorMessageContextualWarningBgAlt",
+              name: "statusColorPillErrorInverseBgAltHover",
               attributes: {},
               path: [
                 "status",
                 "color",
-                "message",
-                "contextual",
-                "warning",
-                "bgAlt",
+                "pill",
+                "error",
+                "inverse",
+                "bgAlt-hover",
               ],
             },
-            "border-default": {
+            "bg-hover": {
               $type: "color",
-              $value: "#E04500",
+              $value: "#ac3240",
               filePath: "data/tokens/components/status.json",
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.status.caution.default}",
+                $value: "{modes.color.status.negative.inverse.hover}",
               },
-              name: "statusColorMessageContextualWarningBorderDefault",
+              name: "statusColorPillErrorInverseBgHover",
               attributes: {},
-              path: [
-                "status",
-                "color",
-                "message",
-                "contextual",
-                "warning",
-                "border-default",
-              ],
+              path: ["status", "color", "pill", "error", "inverse", "bg-hover"],
             },
-            icon: {
+            "border-default": {
               $type: "color",
-              $value: "#E04500",
-              $description: "Icon on tinted bgs",
+              $value: "#CD384B",
               filePath: "data/tokens/components/status.json",
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.status.caution.default}",
-                $description: "Icon on tinted bgs",
+                $value: "{modes.color.status.negative.inverse.default}",
               },
-              name: "statusColorMessageContextualWarningIcon",
+              name: "statusColorPillErrorInverseBorderDefault",
               attributes: {},
               path: [
                 "status",
                 "color",
-                "message",
-                "contextual",
-                "warning",
-                "icon",
+                "pill",
+                "error",
+                "inverse",
+                "border-default",
               ],
             },
           },
         },
-      },
-      pill: {
         generic: {
           "label-default": {
             $type: "color",
@@ -875,166 +1964,173 @@ module.exports = {
             },
           },
         },
-        error: {
+        important: {
           "bg-default": {
             $type: "color",
-            $value: "#E13E53",
+            $value: "#8F4CD7",
             filePath: "data/tokens/components/status.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.status.negative.default}",
+              $value: "{modes.color.status.important.default}",
             },
-            name: "statusColorPillErrorBgDefault",
+            name: "statusColorPillImportantBgDefault",
             attributes: {},
-            path: ["status", "color", "pill", "error", "bg-default"],
+            path: ["status", "color", "pill", "important", "bg-default"],
           },
           "bgAlt-default": {
             $type: "color",
-            $value: "#241212",
+            $value: "#150d19",
             $description: "outline pill bg",
             filePath: "data/tokens/components/status.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.status.negative.defaultAlt}",
+              $value: "{modes.color.status.important.defaultAlt}",
               $description: "outline pill bg",
             },
-            name: "statusColorPillErrorBgAltDefault",
+            name: "statusColorPillImportantBgAltDefault",
             attributes: {},
-            path: ["status", "color", "pill", "error", "bgAlt-default"],
+            path: ["status", "color", "pill", "important", "bgAlt-default"],
           },
           "bgAlt-hover": {
             $type: "color",
-            $value: "#3d1a1c",
+            $value: "#231b30",
             filePath: "data/tokens/components/status.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.status.negative.hoverAlt}",
+              $value: "{modes.color.status.important.hoverAlt}",
             },
-            name: "statusColorPillErrorBgAltHover",
+            name: "statusColorPillImportantBgAltHover",
             attributes: {},
-            path: ["status", "color", "pill", "error", "bgAlt-hover"],
+            path: ["status", "color", "pill", "important", "bgAlt-hover"],
           },
           "bg-hover": {
             $type: "color",
-            $value: "#ea626a",
+            $value: "#a267de",
             filePath: "data/tokens/components/status.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.status.negative.hover}",
+              $value: "{modes.color.status.important.hover}",
             },
-            name: "statusColorPillErrorBgHover",
+            name: "statusColorPillImportantBgHover",
             attributes: {},
-            path: ["status", "color", "pill", "error", "bg-hover"],
+            path: ["status", "color", "pill", "important", "bg-hover"],
           },
           "border-default": {
             $type: "color",
-            $value: "#E13E53",
+            $value: "#8F4CD7",
             filePath: "data/tokens/components/status.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.status.negative.default}",
+              $value: "{modes.color.status.important.default}",
             },
-            name: "statusColorPillErrorBorderDefault",
+            name: "statusColorPillImportantBorderDefault",
             attributes: {},
-            path: ["status", "color", "pill", "error", "border-default"],
+            path: ["status", "color", "pill", "important", "border-default"],
           },
           inverse: {
             "bg-default": {
               $type: "color",
-              $value: "#CD384B",
+              $value: "#985FDC",
               filePath: "data/tokens/components/status.json",
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.status.negative.inverse.default}",
+                $value: "{modes.color.status.important.inverse.default}",
               },
-              name: "statusColorPillErrorInverseBgDefault",
+              name: "statusColorPillImportantInverseBgDefault",
               attributes: {},
               path: [
                 "status",
                 "color",
                 "pill",
-                "error",
+                "important",
                 "inverse",
                 "bg-default",
               ],
             },
             "bgAlt-default": {
               $type: "color",
-              $value: "#fdeceb",
+              $value: "#f1e6fa",
               $description: "outline pill bg",
               filePath: "data/tokens/components/status.json",
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.status.negative.inverse.defaultAlt}",
+                $value: "{modes.color.status.important.inverse.defaultAlt}",
                 $description: "outline pill bg",
               },
-              name: "statusColorPillErrorInverseBgAltDefault",
+              name: "statusColorPillImportantInverseBgAltDefault",
               attributes: {},
               path: [
                 "status",
                 "color",
                 "pill",
-                "error",
+                "important",
                 "inverse",
                 "bgAlt-default",
               ],
             },
             "bgAlt-hover": {
               $type: "color",
-              $value: "#f9d3d1",
+              $value: "#daceed",
               filePath: "data/tokens/components/status.json",
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.status.negative.inverse.hoverAlt}",
+                $value: "{modes.color.status.important.inverse.hoverAlt}",
               },
-              name: "statusColorPillErrorInverseBgAltHover",
+              name: "statusColorPillImportantInverseBgAltHover",
               attributes: {},
               path: [
                 "status",
                 "color",
                 "pill",
-                "error",
+                "important",
                 "inverse",
                 "bgAlt-hover",
               ],
             },
             "bg-hover": {
               $type: "color",
-              $value: "#ac3240",
+              $value: "#8051b8",
               filePath: "data/tokens/components/status.json",
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.status.negative.inverse.hover}",
+                $value: "{modes.color.status.important.inverse.hover}",
               },
-              name: "statusColorPillErrorInverseBgHover",
+              name: "statusColorPillImportantInverseBgHover",
               attributes: {},
-              path: ["status", "color", "pill", "error", "inverse", "bg-hover"],
+              path: [
+                "status",
+                "color",
+                "pill",
+                "important",
+                "inverse",
+                "bg-hover",
+              ],
             },
             "border-default": {
               $type: "color",
-              $value: "#CD384B",
+              $value: "#985FDC",
               filePath: "data/tokens/components/status.json",
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.status.negative.inverse.default}",
+                $value: "{modes.color.status.important.inverse.default}",
               },
-              name: "statusColorPillErrorInverseBorderDefault",
+              name: "statusColorPillImportantInverseBorderDefault",
               attributes: {},
               path: [
                 "status",
                 "color",
                 "pill",
-                "error",
+                "important",
                 "inverse",
                 "border-default",
               ],
@@ -1380,6 +2476,59 @@ module.exports = {
             },
           },
         },
+        readonly: {
+          "bg-default": {
+            $type: "color",
+            $value: "#4b4b4b",
+            $description:
+              "Pill (all types, readonly, when nested in disabled parent components)",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.status.inactive.default}",
+              $description:
+                "Pill (all types, readonly, when nested in disabled parent components)",
+            },
+            name: "statusColorPillReadonlyBgDefault",
+            attributes: {},
+            path: ["status", "color", "pill", "readonly", "bg-default"],
+          },
+          "border-default": {
+            $type: "color",
+            $value: "#4b4b4b",
+            $description:
+              "Pill (all types, readonly, when nested in disabled parent components)",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.status.inactive.default}",
+              $description:
+                "Pill (all types, readonly, when nested in disabled parent components)",
+            },
+            name: "statusColorPillReadonlyBorderDefault",
+            attributes: {},
+            path: ["status", "color", "pill", "readonly", "border-default"],
+          },
+          label: {
+            $type: "color",
+            $value: "#ffffffab",
+            $description:
+              "Pill (all types, readonly, when nested in disabled parent components)",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.generic.content.firm}",
+              $description:
+                "Pill (all types, readonly, when nested in disabled parent components)",
+            },
+            name: "statusColorPillReadonlyLabel",
+            attributes: {},
+            path: ["status", "color", "pill", "readonly", "label"],
+          },
+        },
         success: {
           "bg-default": {
             $type: "color",
@@ -1726,59 +2875,6 @@ module.exports = {
             },
           },
         },
-        readonly: {
-          "bg-default": {
-            $type: "color",
-            $value: "#4b4b4b",
-            $description:
-              "Pill (all types, readonly, when nested in disabled parent components)",
-            filePath: "data/tokens/components/status.json",
-            isSource: true,
-            original: {
-              $type: "color",
-              $value: "{modes.color.status.inactive.default}",
-              $description:
-                "Pill (all types, readonly, when nested in disabled parent components)",
-            },
-            name: "statusColorPillReadonlyBgDefault",
-            attributes: {},
-            path: ["status", "color", "pill", "readonly", "bg-default"],
-          },
-          "border-default": {
-            $type: "color",
-            $value: "#4b4b4b",
-            $description:
-              "Pill (all types, readonly, when nested in disabled parent components)",
-            filePath: "data/tokens/components/status.json",
-            isSource: true,
-            original: {
-              $type: "color",
-              $value: "{modes.color.status.inactive.default}",
-              $description:
-                "Pill (all types, readonly, when nested in disabled parent components)",
-            },
-            name: "statusColorPillReadonlyBorderDefault",
-            attributes: {},
-            path: ["status", "color", "pill", "readonly", "border-default"],
-          },
-          label: {
-            $type: "color",
-            $value: "#ffffffab",
-            $description:
-              "Pill (all types, readonly, when nested in disabled parent components)",
-            filePath: "data/tokens/components/status.json",
-            isSource: true,
-            original: {
-              $type: "color",
-              $value: "{modes.color.generic.content.firm}",
-              $description:
-                "Pill (all types, readonly, when nested in disabled parent components)",
-            },
-            name: "statusColorPillReadonlyLabel",
-            attributes: {},
-            path: ["status", "color", "pill", "readonly", "label"],
-          },
-        },
       },
       rating: {
         "bg-default": {