@sage/design-tokens 14.0.1 → 14.1.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",
@@ -737,36 +530,8 @@ module.exports = {
             },
           },
         },
-      },
-      pill: {
-        generic: {
+        global: {
           "label-default": {
-            $type: "color",
-            $value: "#000000",
-            filePath: "data/tokens/components/status.json",
-            isSource: true,
-            original: {
-              $type: "color",
-              $value: "{modes.color.status.content.withDefault}",
-            },
-            name: "statusColorPillGenericLabelDefault",
-            attributes: {},
-            path: ["status", "color", "pill", "generic", "label-default"],
-          },
-          "label-hover": {
-            $type: "color",
-            $value: "#000000",
-            filePath: "data/tokens/components/status.json",
-            isSource: true,
-            original: {
-              $type: "color",
-              $value: "{modes.color.status.content.withHover}",
-            },
-            name: "statusColorPillGenericLabelHover",
-            attributes: {},
-            path: ["status", "color", "pill", "generic", "label-hover"],
-          },
-          "labelAlt-default": {
             $type: "color",
             $value: "#fffffff2",
             filePath: "data/tokens/components/status.json",
@@ -775,102 +540,1124 @@ module.exports = {
               $type: "color",
               $value: "{modes.color.status.content.withDefaultAlt}",
             },
-            name: "statusColorPillGenericLabelAltDefault",
+            name: "statusColorMessageGlobalLabelDefault",
             attributes: {},
-            path: ["status", "color", "pill", "generic", "labelAlt-default"],
+            path: ["status", "color", "message", "global", "label-default"],
           },
-          "labelAlt-hover": {
+          "label-hover": {
             $type: "color",
-            $value: "#fffffff2",
+            $value: "#FFFFFF",
             filePath: "data/tokens/components/status.json",
             isSource: true,
             original: {
               $type: "color",
-              $value: "{modes.color.status.content.withDefaultAlt}",
+              $value: "{modes.color.interactive.monochrome.withHover}",
             },
-            name: "statusColorPillGenericLabelAltHover",
+            name: "statusColorMessageGlobalLabelHover",
             attributes: {},
-            path: ["status", "color", "pill", "generic", "labelAlt-hover"],
+            path: ["status", "color", "message", "global", "label-hover"],
           },
-          inverse: {
-            "label-default": {
+          callout: {
+            "bg-default": {
               $type: "color",
-              $value: "#FFFFFF",
+              $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.content.inverse.withDefault}",
+                $value: "{modes.color.status.custom.red.default}",
               },
-              name: "statusColorPillGenericInverseLabelDefault",
+              name: "statusColorPillCustomRedBorderDefault",
               attributes: {},
               path: [
                 "status",
                 "color",
                 "pill",
-                "generic",
-                "inverse",
-                "label-default",
+                "custom",
+                "red",
+                "border-default",
               ],
             },
-            "label-hover": {
+          },
+          pink: {
+            "bg-default": {
               $type: "color",
-              $value: "#FFFFFF",
+              $value: "#DD2BAB",
               filePath: "data/tokens/components/status.json",
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.status.content.inverse.withHover}",
+                $value: "{modes.color.status.custom.pink.default}",
               },
-              name: "statusColorPillGenericInverseLabelHover",
+              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",
-                "generic",
-                "inverse",
-                "label-hover",
+                "custom",
+                "pink",
+                "bgAlt-default",
               ],
             },
-            "labelAlt-default": {
+            "bgAlt-hover": {
               $type: "color",
-              $value: "#000000f2",
+              $value: "#2d192b",
               filePath: "data/tokens/components/status.json",
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.status.content.inverse.withDefaultAlt}",
+                $value: "{modes.color.status.custom.pink.hoverAlt}",
               },
-              name: "statusColorPillGenericInverseLabelAltDefault",
+              name: "statusColorPillCustomPinkBgAltHover",
               attributes: {},
               path: [
                 "status",
                 "color",
                 "pill",
-                "generic",
-                "inverse",
-                "labelAlt-default",
+                "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",
               ],
             },
-            "labelAlt-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: "#000000f2",
+              $value: "#5C8196",
               filePath: "data/tokens/components/status.json",
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.status.content.inverse.withDefaultAlt}",
+                $value: "{modes.color.status.custom.slate.default}",
               },
-              name: "statusColorPillGenericInverseLabelAltHover",
+              name: "statusColorPillCustomSlateBorderDefault",
               attributes: {},
               path: [
                 "status",
                 "color",
                 "pill",
-                "generic",
-                "inverse",
-                "labelAlt-hover",
+                "custom",
+                "slate",
+                "border-default",
               ],
             },
           },
@@ -1041,6 +1828,142 @@ module.exports = {
             },
           },
         },
+        generic: {
+          "label-default": {
+            $type: "color",
+            $value: "#000000",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.status.content.withDefault}",
+            },
+            name: "statusColorPillGenericLabelDefault",
+            attributes: {},
+            path: ["status", "color", "pill", "generic", "label-default"],
+          },
+          "label-hover": {
+            $type: "color",
+            $value: "#000000",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.status.content.withHover}",
+            },
+            name: "statusColorPillGenericLabelHover",
+            attributes: {},
+            path: ["status", "color", "pill", "generic", "label-hover"],
+          },
+          "labelAlt-default": {
+            $type: "color",
+            $value: "#fffffff2",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.status.content.withDefaultAlt}",
+            },
+            name: "statusColorPillGenericLabelAltDefault",
+            attributes: {},
+            path: ["status", "color", "pill", "generic", "labelAlt-default"],
+          },
+          "labelAlt-hover": {
+            $type: "color",
+            $value: "#fffffff2",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              $type: "color",
+              $value: "{modes.color.status.content.withDefaultAlt}",
+            },
+            name: "statusColorPillGenericLabelAltHover",
+            attributes: {},
+            path: ["status", "color", "pill", "generic", "labelAlt-hover"],
+          },
+          inverse: {
+            "label-default": {
+              $type: "color",
+              $value: "#FFFFFF",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.content.inverse.withDefault}",
+              },
+              name: "statusColorPillGenericInverseLabelDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "generic",
+                "inverse",
+                "label-default",
+              ],
+            },
+            "label-hover": {
+              $type: "color",
+              $value: "#FFFFFF",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.content.inverse.withHover}",
+              },
+              name: "statusColorPillGenericInverseLabelHover",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "generic",
+                "inverse",
+                "label-hover",
+              ],
+            },
+            "labelAlt-default": {
+              $type: "color",
+              $value: "#000000f2",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.content.inverse.withDefaultAlt}",
+              },
+              name: "statusColorPillGenericInverseLabelAltDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "generic",
+                "inverse",
+                "labelAlt-default",
+              ],
+            },
+            "labelAlt-hover": {
+              $type: "color",
+              $value: "#000000f2",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                $type: "color",
+                $value: "{modes.color.status.content.inverse.withDefaultAlt}",
+              },
+              name: "statusColorPillGenericInverseLabelAltHover",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "pill",
+                "generic",
+                "inverse",
+                "labelAlt-hover",
+              ],
+            },
+          },
+        },
         info: {
           "bg-default": {
             $type: "color",
@@ -1380,6 +2303,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 +2702,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": {