@sage/design-tokens 14.0.1 → 14.1.0

package/js/umd/frozenproduct/large/light/components/status.js

@@ -38,227 +38,6 @@
           path: ["status", "color", "none"],
         },
         message: {
-          global: {
-            "label-default": {
-              $type: "color",
-              $value: "#000000f2",
-              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: "#000000",
-              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: "#e5fae2",
-                $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: "#d8ecd5",
-                $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: "#000000f2",
-                $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: "#eaeef6",
-                $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: "#cdd7ea",
-                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: "#0060A7",
-                $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: "#ffede5",
-                $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: "#fed5c3",
-                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: "#D64309",
-                $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",
@@ -769,140 +548,1225 @@
               },
             },
           },
-        },
-        pill: {
-          generic: {
+          global: {
             "label-default": {
               $type: "color",
-              $value: "#FFFFFF",
+              $value: "#000000f2",
               filePath: "data/tokens/components/status.json",
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.status.content.withDefault}",
+                $value: "{modes.color.status.content.withDefaultAlt}",
               },
-              name: "statusColorPillGenericLabelDefault",
+              name: "statusColorMessageGlobalLabelDefault",
               attributes: {},
-              path: ["status", "color", "pill", "generic", "label-default"],
+              path: ["status", "color", "message", "global", "label-default"],
             },
             "label-hover": {
               $type: "color",
-              $value: "#FFFFFF",
+              $value: "#000000",
               filePath: "data/tokens/components/status.json",
               isSource: true,
               original: {
                 $type: "color",
-                $value: "{modes.color.status.content.withHover}",
+                $value: "{modes.color.interactive.monochrome.withHover}",
               },
-              name: "statusColorPillGenericLabelHover",
+              name: "statusColorMessageGlobalLabelHover",
               attributes: {},
-              path: ["status", "color", "pill", "generic", "label-hover"],
+              path: ["status", "color", "message", "global", "label-hover"],
             },
-            "labelAlt-default": {
-              $type: "color",
-              $value: "#000000f2",
-              filePath: "data/tokens/components/status.json",
-              isSource: true,
-              original: {
+            callout: {
+              "bg-default": {
                 $type: "color",
-                $value: "{modes.color.status.content.withDefaultAlt}",
-              },
-              name: "statusColorPillGenericLabelAltDefault",
-              attributes: {},
-              path: ["status", "color", "pill", "generic", "labelAlt-default"],
-            },
-            "labelAlt-hover": {
-              $type: "color",
-              $value: "#000000f2",
-              filePath: "data/tokens/components/status.json",
-              isSource: true,
-              original: {
+                $value: "#e5fae2",
+                $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: "#d8ecd5",
+                $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: "#000000f2",
+                $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: "#eaeef6",
+                $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: "#cdd7ea",
+                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: "#0060A7",
+                $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: "#ffede5",
+                $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: "#fed5c3",
+                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: "#D64309",
+                $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: "#0071C3",
+                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: "#ebf0f9",
+                $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: "#ced9ed",
+                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: "#135fa3",
+                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: "#0071C3",
+                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: "#007C7B",
+                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: "#e9f1f1",
+                $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: "#c4dde0",
+                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: "#0e6968",
+                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: "#007C7B",
+                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: "#00811F",
+                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: "#e9f2e8",
+                $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: "#c4decf",
+                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: "#0e6d1d",
+                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: "#00811F",
+                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: "#637700",
+                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: "#eff1e6",
+                $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: "#cdddc9",
+                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: "#546408",
+                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: "#637700",
+                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: "#C54300",
+                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: "#feece5",
+                $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: "#f2d0ce",
+                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: "#a53a06",
+                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: "#C54300",
+                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: "#DC004E",
+                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: "#ffebec",
+                $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: "#f1cfd9",
+                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: "#b81242",
+                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: "#DC004E",
+                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: "#C8269A",
+                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: "{modes.color.status.content.withDefaultAlt}",
+                $value: "#fcecf5",
+                $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: "#ead2e5",
+                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: "#a82581",
+                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: "#C8269A",
+                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",
+                ],
               },
-              name: "statusColorPillGenericLabelAltHover",
-              attributes: {},
-              path: ["status", "color", "pill", "generic", "labelAlt-hover"],
             },
-            inverse: {
-              "label-default": {
+            purple: {
+              "bg-default": {
                 $type: "color",
-                $value: "#000000",
+                $value: "#8F4CD7",
                 filePath: "data/tokens/components/status.json",
                 isSource: true,
                 original: {
                   $type: "color",
-                  $value: "{modes.color.status.content.inverse.withDefault}",
+                  $value: "{modes.color.status.custom.purple.default}",
                 },
-                name: "statusColorPillGenericInverseLabelDefault",
+                name: "statusColorPillCustomPurpleBgDefault",
                 attributes: {},
                 path: [
                   "status",
                   "color",
                   "pill",
-                  "generic",
-                  "inverse",
-                  "label-default",
+                  "custom",
+                  "purple",
+                  "bg-default",
                 ],
               },
-              "label-hover": {
+              "bgAlt-default": {
                 $type: "color",
-                $value: "#000000",
+                $value: "#f5edfc",
+                $description: "outline pill bg",
                 filePath: "data/tokens/components/status.json",
                 isSource: true,
                 original: {
                   $type: "color",
-                  $value: "{modes.color.status.content.inverse.withHover}",
+                  $value: "{modes.color.status.custom.purple.defaultAlt}",
+                  $description: "outline pill bg",
                 },
-                name: "statusColorPillGenericInverseLabelHover",
+                name: "statusColorPillCustomPurpleBgAltDefault",
                 attributes: {},
                 path: [
                   "status",
                   "color",
                   "pill",
-                  "generic",
-                  "inverse",
-                  "label-hover",
+                  "custom",
+                  "purple",
+                  "bgAlt-default",
                 ],
               },
-              "labelAlt-default": {
+              "bgAlt-hover": {
                 $type: "color",
-                $value: "#fffffff2",
+                $value: "#ded4ee",
                 filePath: "data/tokens/components/status.json",
                 isSource: true,
                 original: {
                   $type: "color",
-                  $value: "{modes.color.status.content.inverse.withDefaultAlt}",
+                  $value: "{modes.color.status.custom.purple.hoverAlt}",
+                },
+                name: "statusColorPillCustomPurpleBgAltHover",
+                attributes: {},
+                path: [
+                  "status",
+                  "color",
+                  "pill",
+                  "custom",
+                  "purple",
+                  "bgAlt-hover",
+                ],
+              },
+              "bg-hover": {
+                $type: "color",
+                $value: "#7941b4",
+                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: "#8F4CD7",
+                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: "#6F6F6F",
+                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: "#f0f0f0",
+                $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: "#d3d9e5",
+                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: "#5e5e5e",
+                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: "#6F6F6F",
+                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: "#527386",
+                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: "#edf0f2",
+                $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: "#cbdae6",
+                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: "#466171",
+                filePath: "data/tokens/components/status.json",
+                isSource: true,
+                original: {
+                  $type: "color",
+                  $value: "{modes.color.status.custom.slate.hover}",
                 },
-                name: "statusColorPillGenericInverseLabelAltDefault",
+                name: "statusColorPillCustomSlateBgHover",
                 attributes: {},
                 path: [
                   "status",
                   "color",
                   "pill",
-                  "generic",
-                  "inverse",
-                  "labelAlt-default",
+                  "custom",
+                  "slate",
+                  "bg-hover",
                 ],
               },
-              "labelAlt-hover": {
+              "border-default": {
                 $type: "color",
-                $value: "#fffffff2",
+                $value: "#527386",
                 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",
                 ],
               },
             },
@@ -1080,6 +1944,142 @@
               },
             },
           },
+          generic: {
+            "label-default": {
+              $type: "color",
+              $value: "#FFFFFF",
+              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: "#FFFFFF",
+              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: "#000000f2",
+              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: "#000000f2",
+              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: "#000000",
+                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: "#000000",
+                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: "#fffffff2",
+                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: "#fffffff2",
+                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",
@@ -1426,6 +2426,59 @@
               },
             },
           },
+          readonly: {
+            "bg-default": {
+              $type: "color",
+              $value: "#a6a6a6",
+              $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: "#a6a6a6",
+              $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: "#000000ab",
+              $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",
@@ -1772,59 +2825,6 @@
               },
             },
           },
-          readonly: {
-            "bg-default": {
-              $type: "color",
-              $value: "#a6a6a6",
-              $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: "#a6a6a6",
-              $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: "#000000ab",
-              $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": {