@sage/design-tokens 5.2.0 → 6.0.0

package/js/common/marketing/small/dark/components/status.js

@@ -43,1099 +43,1741 @@ module.exports = {
         path: ["status", "color", "none"],
         comment: "transparent override used for hiding colors when needed.",
       },
-      "bg-default": {
-        value: "#000000",
-        type: "color",
-        filePath: "data/tokens/components/status.json",
-        isSource: true,
-        original: {
-          value: "{modes.color.generic.bg.nought}",
-          type: "color",
-        },
-        name: "statusColorBgDefault",
-        attributes: {},
-        path: ["status", "color", "bg-default"],
-      },
-      "bg-readonly": {
-        value: "#4b4b4b",
-        type: "color",
-        description:
-          "Pill (all types, readonly, when nested in disabled parent components)",
-        filePath: "data/tokens/components/status.json",
-        isSource: true,
-        original: {
-          value: "{modes.color.status.inactive.default}",
-          type: "color",
-          description:
-            "Pill (all types, readonly, when nested in disabled parent components)",
-        },
-        name: "statusColorBgReadonly",
-        attributes: {
-          value: "#4b4b4b",
-          type: "color",
-          description:
-            "Pill (all types, readonly, when nested in disabled parent components)",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.inactive.default}",
-            type: "color",
-            description:
-              "Pill (all types, readonly, when nested in disabled parent components)",
-          },
-          name: "bg-readonly",
-          attributes: {},
-          path: ["status", "color", "bg-readonly"],
-          comment:
-            "Pill (all types, readonly, when nested in disabled parent components)",
-        },
-        path: ["status", "color", "bg-readonly"],
-        comment:
-          "Pill (all types, readonly, when nested in disabled parent components)",
-      },
-      "border-readonly": {
-        value: "#4b4b4b",
-        type: "color",
-        description:
-          "Pill (all types, readonly, when nested in disabled parent components)",
-        filePath: "data/tokens/components/status.json",
-        isSource: true,
-        original: {
-          value: "{modes.color.status.inactive.default}",
-          type: "color",
-          description:
-            "Pill (all types, readonly, when nested in disabled parent components)",
-        },
-        name: "statusColorBorderReadonly",
-        attributes: {
-          value: "#4b4b4b",
-          type: "color",
-          description:
-            "Pill (all types, readonly, when nested in disabled parent components)",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.inactive.default}",
-            type: "color",
-            description:
-              "Pill (all types, readonly, when nested in disabled parent components)",
-          },
-          name: "border-readonly",
-          attributes: {},
-          path: ["status", "color", "border-readonly"],
-          comment:
-            "Pill (all types, readonly, when nested in disabled parent components)",
-        },
-        path: ["status", "color", "border-readonly"],
-        comment:
-          "Pill (all types, readonly, when nested in disabled parent components)",
-      },
-      "icon-default": {
-        value: "#000000",
-        type: "color",
-        description: "Decorative message icons",
-        filePath: "data/tokens/components/status.json",
-        isSource: true,
-        original: {
-          value: "{modes.color.status.content.withDefault}",
-          type: "color",
-          description: "Decorative message icons",
-        },
-        name: "statusColorIconDefault",
-        attributes: {
-          value: "#000000",
-          type: "color",
-          description: "Decorative message icons",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.content.withDefault}",
-            type: "color",
-            description: "Decorative message icons",
-          },
-          name: "icon-default",
-          attributes: {},
-          path: ["status", "color", "icon-default"],
-          comment: "Decorative message icons",
-        },
-        path: ["status", "color", "icon-default"],
-        comment: "Decorative message icons",
-      },
-      "label-default": {
-        value: "#000000",
-        type: "color",
-        filePath: "data/tokens/components/status.json",
-        isSource: true,
-        original: {
-          value: "{modes.color.status.content.withDefault}",
-          type: "color",
-        },
-        name: "statusColorLabelDefault",
-        attributes: {},
-        path: ["status", "color", "label-default"],
-      },
-      "label-readonly": {
-        value: "#000000",
-        type: "color",
-        description:
-          "Pill (all types, readonly, when nested in disabled parent components)",
-        filePath: "data/tokens/components/status.json",
-        isSource: true,
-        original: {
-          value: "{modes.color.interactive.monochrome.generic.withDefault}",
-          type: "color",
-          description:
-            "Pill (all types, readonly, when nested in disabled parent components)",
-        },
-        name: "statusColorLabelReadonly",
-        attributes: {
-          value: "#000000",
-          type: "color",
-          description:
-            "Pill (all types, readonly, when nested in disabled parent components)",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.interactive.monochrome.generic.withDefault}",
-            type: "color",
-            description:
-              "Pill (all types, readonly, when nested in disabled parent components)",
-          },
-          name: "label-readonly",
-          attributes: {},
-          path: ["status", "color", "label-readonly"],
-          comment:
-            "Pill (all types, readonly, when nested in disabled parent components)",
-        },
-        path: ["status", "color", "label-readonly"],
-        comment:
-          "Pill (all types, readonly, when nested in disabled parent components)",
-      },
-      "label-hover": {
-        value: "#000000",
-        type: "color",
-        filePath: "data/tokens/components/status.json",
-        isSource: true,
-        original: {
-          value: "{modes.color.status.content.withHover}",
-          type: "color",
-        },
-        name: "statusColorLabelHover",
-        attributes: {},
-        path: ["status", "color", "label-hover"],
-      },
-      "labelAlt-default": {
-        value: "#fffffff2",
-        type: "color",
-        filePath: "data/tokens/components/status.json",
-        isSource: true,
-        original: {
-          value: "{modes.color.status.content.withDefaultAlt}",
-          type: "color",
-        },
-        name: "statusColorLabelAltDefault",
-        attributes: {},
-        path: ["status", "color", "labelAlt-default"],
-      },
-      "labelAlt-readonly": {
-        value: "#ffffffab",
-        type: "color",
-        description:
-          "Pill (all types, readonly, when nested in disabled parent components)",
-        filePath: "data/tokens/components/status.json",
-        isSource: true,
-        original: {
-          value: "{modes.color.generic.content.firm}",
-          type: "color",
-          description:
-            "Pill (all types, readonly, when nested in disabled parent components)",
-        },
-        name: "statusColorLabelAltReadonly",
-        attributes: {
-          value: "#ffffffab",
-          type: "color",
-          description:
-            "Pill (all types, readonly, when nested in disabled parent components)",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.generic.content.firm}",
-            type: "color",
-            description:
-              "Pill (all types, readonly, when nested in disabled parent components)",
-          },
-          name: "labelAlt-readonly",
-          attributes: {},
-          path: ["status", "color", "labelAlt-readonly"],
-          comment:
-            "Pill (all types, readonly, when nested in disabled parent components)",
-        },
-        path: ["status", "color", "labelAlt-readonly"],
-        comment:
-          "Pill (all types, readonly, when nested in disabled parent components)",
-      },
-      "labelAlt-hover": {
-        value: "#FFFFFF",
-        type: "color",
-        filePath: "data/tokens/components/status.json",
-        isSource: true,
-        original: {
-          value: "{modes.color.status.content.withHoverAlt}",
-          type: "color",
-        },
-        name: "statusColorLabelAltHover",
-        attributes: {},
-        path: ["status", "color", "labelAlt-hover"],
-      },
-      text: {
-        value: "#FFFFFF",
-        type: "color",
-        description: "Message text.",
-        filePath: "data/tokens/components/status.json",
-        isSource: true,
-        original: {
-          value: "{modes.color.status.content.withHoverAlt}",
-          type: "color",
-          description: "Message text.",
-        },
-        name: "statusColorText",
-        attributes: {
-          value: "#FFFFFF",
-          type: "color",
-          description: "Message text.",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.content.withHoverAlt}",
-            type: "color",
-            description: "Message text.",
-          },
-          name: "text",
-          attributes: {},
-          path: ["status", "color", "text"],
-          comment: "Message text.",
-        },
-        path: ["status", "color", "text"],
-        comment: "Message text.",
-      },
-      AI: {
-        "bg-default": {
-          value: "#FFFFFF",
-          type: "color",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.ai.defaultAlt}",
-            type: "color",
-          },
-          name: "statusColorAiBgDefault",
-          attributes: {},
-          path: ["status", "color", "AI", "bg-default"],
-        },
-        "border-default": {
-          value: "#FFFFFF",
-          type: "color",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.ai.defaultAlt}",
-            type: "color",
-          },
-          name: "statusColorAiBorderDefault",
-          attributes: {},
-          path: ["status", "color", "AI", "border-default"],
-        },
-      },
-      callout: {
-        bgAlt: {
-          value: "#122211",
-          type: "color",
-          description: "Subtle message bg",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.callout.defaultAlt}",
-            type: "color",
-            description: "Subtle message bg",
-          },
-          name: "statusColorCalloutBgAlt",
-          attributes: {
-            value: "#122211",
-            type: "color",
-            description: "Subtle message bg",
-            filePath: "data/tokens/components/status.json",
-            isSource: true,
-            original: {
-              value: "{modes.color.status.callout.defaultAlt}",
-              type: "color",
-              description: "Subtle message bg",
-            },
-            name: "bgAlt",
-            attributes: {},
-            path: ["status", "color", "callout", "bgAlt"],
-            comment: "Subtle message bg",
-          },
-          path: ["status", "color", "callout", "bgAlt"],
-          comment: "Subtle message bg",
-        },
-        "bgAlt-default": {
-          value: "#122211",
-          type: "color",
-          description: "Global message bg",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.callout.defaultAlt}",
-            type: "color",
-            description: "Global message bg",
-          },
-          name: "statusColorCalloutBgAltDefault",
-          attributes: {
-            value: "#122211",
+      message: {
+        global: {
+          "label-default": {
+            value: "#fffffff2",
             type: "color",
-            description: "Global message bg",
             filePath: "data/tokens/components/status.json",
             isSource: true,
             original: {
-              value: "{modes.color.status.callout.defaultAlt}",
+              value: "{modes.color.status.content.withDefaultAlt}",
               type: "color",
-              description: "Global message bg",
             },
-            name: "bgAlt-default",
+            name: "statusColorMessageGlobalLabelDefault",
             attributes: {},
-            path: ["status", "color", "callout", "bgAlt-default"],
-            comment: "Global message bg",
-          },
-          path: ["status", "color", "callout", "bgAlt-default"],
-          comment: "Global message bg",
-        },
-        "bgAlt-hover": {
-          value: "#223121",
-          type: "color",
-          description: "Subtle message bg",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.callout.hoverAlt}",
-            type: "color",
-            description: "Subtle message bg",
+            path: ["status", "color", "message", "global", "label-default"],
           },
-          name: "statusColorCalloutBgAltHover",
-          attributes: {
-            value: "#223121",
+          "label-hover": {
+            value: "#fffffff2",
             type: "color",
-            description: "Subtle message bg",
             filePath: "data/tokens/components/status.json",
             isSource: true,
             original: {
-              value: "{modes.color.status.callout.hoverAlt}",
+              value: "{modes.color.status.content.withDefaultAlt}",
               type: "color",
-              description: "Subtle message bg",
             },
-            name: "bgAlt-hover",
+            name: "statusColorMessageGlobalLabelHover",
             attributes: {},
-            path: ["status", "color", "callout", "bgAlt-hover"],
-            comment: "Subtle message bg",
-          },
-          path: ["status", "color", "callout", "bgAlt-hover"],
-          comment: "Subtle message bg",
-        },
-      },
-      error: {
-        "bg-default": {
-          value: "#E13E53",
-          type: "color",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.negative.default}",
-            type: "color",
-          },
-          name: "statusColorErrorBgDefault",
-          attributes: {},
-          path: ["status", "color", "error", "bg-default"],
-        },
-        bgAlt: {
-          value: "#241212",
-          type: "color",
-          description: "Subtle message bg",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.negative.defaultAlt}",
-            type: "color",
-            description: "Subtle message bg",
+            path: ["status", "color", "message", "global", "label-hover"],
           },
-          name: "statusColorErrorBgAlt",
-          attributes: {
-            value: "#241212",
-            type: "color",
-            description: "Subtle message bg",
-            filePath: "data/tokens/components/status.json",
-            isSource: true,
-            original: {
-              value: "{modes.color.status.negative.defaultAlt}",
+          callout: {
+            "bg-default": {
+              value: "#122211",
               type: "color",
-              description: "Subtle message bg",
+              description: "Global message bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.callout.defaultAlt}",
+                type: "color",
+                description: "Global message bg",
+              },
+              name: "statusColorMessageGlobalCalloutBgDefault",
+              attributes: {
+                value: "#122211",
+                type: "color",
+                description: "Global message bg",
+                filePath: "data/tokens/components/status.json",
+                isSource: true,
+                original: {
+                  value: "{modes.color.status.callout.defaultAlt}",
+                  type: "color",
+                  description: "Global message bg",
+                },
+                name: "bg-default",
+                attributes: {},
+                path: [
+                  "status",
+                  "color",
+                  "message",
+                  "global",
+                  "callout",
+                  "bg-default",
+                ],
+                comment: "Global message bg",
+              },
+              path: [
+                "status",
+                "color",
+                "message",
+                "global",
+                "callout",
+                "bg-default",
+              ],
+              comment: "Global message bg",
+            },
+            "bg-hover": {
+              value: "#223121",
+              type: "color",
+              description: "global message bg hover",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.callout.hoverAlt}",
+                type: "color",
+                description: "global message bg hover",
+              },
+              name: "statusColorMessageGlobalCalloutBgHover",
+              attributes: {
+                value: "#223121",
+                type: "color",
+                description: "global message bg hover",
+                filePath: "data/tokens/components/status.json",
+                isSource: true,
+                original: {
+                  value: "{modes.color.status.callout.hoverAlt}",
+                  type: "color",
+                  description: "global message bg hover",
+                },
+                name: "bg-hover",
+                attributes: {},
+                path: [
+                  "status",
+                  "color",
+                  "message",
+                  "global",
+                  "callout",
+                  "bg-hover",
+                ],
+                comment: "global message bg hover",
+              },
+              path: [
+                "status",
+                "color",
+                "message",
+                "global",
+                "callout",
+                "bg-hover",
+              ],
+              comment: "global message bg hover",
+            },
+            icon: {
+              value: "#fffffff2",
+              type: "color",
+              description: "Icon on tinted bgs",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.content.withDefaultAlt}",
+                type: "color",
+                description: "Icon on tinted bgs",
+              },
+              name: "statusColorMessageGlobalCalloutIcon",
+              attributes: {
+                value: "#fffffff2",
+                type: "color",
+                description: "Icon on tinted bgs",
+                filePath: "data/tokens/components/status.json",
+                isSource: true,
+                original: {
+                  value: "{modes.color.status.content.withDefaultAlt}",
+                  type: "color",
+                  description: "Icon on tinted bgs",
+                },
+                name: "icon",
+                attributes: {},
+                path: [
+                  "status",
+                  "color",
+                  "message",
+                  "global",
+                  "callout",
+                  "icon",
+                ],
+                comment: "Icon on tinted bgs",
+              },
+              path: ["status", "color", "message", "global", "callout", "icon"],
+              comment: "Icon on tinted bgs",
+            },
+          },
+          info: {
+            "bg-default": {
+              value: "#111722",
+              type: "color",
+              description: "Global message bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.info.defaultAlt}",
+                type: "color",
+                description: "Global message bg",
+              },
+              name: "statusColorMessageGlobalInfoBgDefault",
+              attributes: {
+                value: "#111722",
+                type: "color",
+                description: "Global message bg",
+                filePath: "data/tokens/components/status.json",
+                isSource: true,
+                original: {
+                  value: "{modes.color.status.info.defaultAlt}",
+                  type: "color",
+                  description: "Global message bg",
+                },
+                name: "bg-default",
+                attributes: {},
+                path: [
+                  "status",
+                  "color",
+                  "message",
+                  "global",
+                  "info",
+                  "bg-default",
+                ],
+                comment: "Global message bg",
+              },
+              path: [
+                "status",
+                "color",
+                "message",
+                "global",
+                "info",
+                "bg-default",
+              ],
+              comment: "Global message bg",
+            },
+            "bg-hover": {
+              value: "#212631",
+              type: "color",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.info.hoverAlt}",
+                type: "color",
+              },
+              name: "statusColorMessageGlobalInfoBgHover",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "global",
+                "info",
+                "bg-hover",
+              ],
+            },
+            icon: {
+              value: "#007ED9",
+              type: "color",
+              description: "Icon on tinted bgs",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.info.default}",
+                type: "color",
+                description: "Icon on tinted bgs",
+              },
+              name: "statusColorMessageGlobalInfoIcon",
+              attributes: {
+                value: "#007ED9",
+                type: "color",
+                description: "Icon on tinted bgs",
+                filePath: "data/tokens/components/status.json",
+                isSource: true,
+                original: {
+                  value: "{modes.color.status.info.default}",
+                  type: "color",
+                  description: "Icon on tinted bgs",
+                },
+                name: "icon",
+                attributes: {},
+                path: ["status", "color", "message", "global", "info", "icon"],
+                comment: "Icon on tinted bgs",
+              },
+              path: ["status", "color", "message", "global", "info", "icon"],
+              comment: "Icon on tinted bgs",
+            },
+          },
+          warning: {
+            "bg-default": {
+              value: "#251206",
+              type: "color",
+              description: "Global message bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.caution.defaultAlt}",
+                type: "color",
+                description: "Global message bg",
+              },
+              name: "statusColorMessageGlobalWarningBgDefault",
+              attributes: {
+                value: "#251206",
+                type: "color",
+                description: "Global message bg",
+                filePath: "data/tokens/components/status.json",
+                isSource: true,
+                original: {
+                  value: "{modes.color.status.caution.defaultAlt}",
+                  type: "color",
+                  description: "Global message bg",
+                },
+                name: "bg-default",
+                attributes: {},
+                path: [
+                  "status",
+                  "color",
+                  "message",
+                  "global",
+                  "warning",
+                  "bg-default",
+                ],
+                comment: "Global message bg",
+              },
+              path: [
+                "status",
+                "color",
+                "message",
+                "global",
+                "warning",
+                "bg-default",
+              ],
+              comment: "Global message bg",
+            },
+            "bg-hover": {
+              value: "#34211a",
+              type: "color",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.caution.hoverAlt}",
+                type: "color",
+              },
+              name: "statusColorMessageGlobalWarningBgHover",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "global",
+                "warning",
+                "bg-hover",
+              ],
+            },
+            icon: {
+              value: "#E04500",
+              type: "color",
+              description: "Icon on tinted bgs",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.caution.default}",
+                type: "color",
+                description: "Icon on tinted bgs",
+              },
+              name: "statusColorMessageGlobalWarningIcon",
+              attributes: {
+                value: "#E04500",
+                type: "color",
+                description: "Icon on tinted bgs",
+                filePath: "data/tokens/components/status.json",
+                isSource: true,
+                original: {
+                  value: "{modes.color.status.caution.default}",
+                  type: "color",
+                  description: "Icon on tinted bgs",
+                },
+                name: "icon",
+                attributes: {},
+                path: [
+                  "status",
+                  "color",
+                  "message",
+                  "global",
+                  "warning",
+                  "icon",
+                ],
+                comment: "Icon on tinted bgs",
+              },
+              path: ["status", "color", "message", "global", "warning", "icon"],
+              comment: "Icon on tinted bgs",
+            },
+          },
+        },
+        contextual: {
+          bg: {
+            value: "#000000",
+            type: "color",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              value: "{modes.color.generic.bg.nought}",
+              type: "color",
+            },
+            name: "statusColorMessageContextualBg",
+            attributes: {},
+            path: ["status", "color", "message", "contextual", "bg"],
+          },
+          icon: {
+            value: "#000000",
+            type: "color",
+            description: "decorative icon on standard contextual messages",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              value: "{modes.color.generic.bg.nought}",
+              type: "color",
+              description: "decorative icon on standard contextual messages",
+            },
+            name: "statusColorMessageContextualIcon",
+            attributes: {
+              value: "#000000",
+              type: "color",
+              description: "decorative icon on standard contextual messages",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.generic.bg.nought}",
+                type: "color",
+                description: "decorative icon on standard contextual messages",
+              },
+              name: "icon",
+              attributes: {},
+              path: ["status", "color", "message", "contextual", "icon"],
+              comment: "decorative icon on standard contextual messages",
+            },
+            path: ["status", "color", "message", "contextual", "icon"],
+            comment: "decorative icon on standard contextual messages",
+          },
+          text: {
+            value: "#FFFFFF",
+            type: "color",
+            description: "Message text.",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              value: "{modes.color.status.content.withHoverAlt}",
+              type: "color",
+              description: "Message text.",
+            },
+            name: "statusColorMessageContextualText",
+            attributes: {
+              value: "#FFFFFF",
+              type: "color",
+              description: "Message text.",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.content.withHoverAlt}",
+                type: "color",
+                description: "Message text.",
+              },
+              name: "text",
+              attributes: {},
+              path: ["status", "color", "message", "contextual", "text"],
+              comment: "Message text.",
+            },
+            path: ["status", "color", "message", "contextual", "text"],
+            comment: "Message text.",
+          },
+          AI: {
+            "bg-default": {
+              value: "#FFFFFF",
+              type: "color",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.ai.defaultAlt}",
+                type: "color",
+              },
+              name: "statusColorMessageContextualAiBgDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "AI",
+                "bg-default",
+              ],
+            },
+            bgAlt: {
+              value: "#171717",
+              type: "color",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.neutral.defaultAlt}",
+                type: "color",
+              },
+              name: "statusColorMessageContextualAiBgAlt",
+              attributes: {},
+              path: ["status", "color", "message", "contextual", "AI", "bgAlt"],
+            },
+            "border-default": {
+              value: "#FFFFFF",
+              type: "color",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.ai.defaultAlt}",
+                type: "color",
+              },
+              name: "statusColorMessageContextualAiBorderDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "AI",
+                "border-default",
+              ],
+            },
+          },
+          callout: {
+            bgAlt: {
+              value: "#122211",
+              type: "color",
+              description: "Subtle message bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.callout.defaultAlt}",
+                type: "color",
+                description: "Subtle message bg",
+              },
+              name: "statusColorMessageContextualCalloutBgAlt",
+              attributes: {
+                value: "#122211",
+                type: "color",
+                description: "Subtle message bg",
+                filePath: "data/tokens/components/status.json",
+                isSource: true,
+                original: {
+                  value: "{modes.color.status.callout.defaultAlt}",
+                  type: "color",
+                  description: "Subtle message bg",
+                },
+                name: "bgAlt",
+                attributes: {},
+                path: [
+                  "status",
+                  "color",
+                  "message",
+                  "contextual",
+                  "callout",
+                  "bgAlt",
+                ],
+                comment: "Subtle message bg",
+              },
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "callout",
+                "bgAlt",
+              ],
+              comment: "Subtle message bg",
+            },
+            icon: {
+              value: "#fffffff2",
+              type: "color",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.content.withDefaultAlt}",
+                type: "color",
+              },
+              name: "statusColorMessageContextualCalloutIcon",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "callout",
+                "icon",
+              ],
+            },
+          },
+          error: {
+            "bg-default": {
+              value: "#E13E53",
+              type: "color",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.negative.default}",
+                type: "color",
+              },
+              name: "statusColorMessageContextualErrorBgDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "error",
+                "bg-default",
+              ],
+            },
+            bgAlt: {
+              value: "#241212",
+              type: "color",
+              description: "Subtle message bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.negative.defaultAlt}",
+                type: "color",
+                description: "Subtle message bg",
+              },
+              name: "statusColorMessageContextualErrorBgAlt",
+              attributes: {
+                value: "#241212",
+                type: "color",
+                description: "Subtle message bg",
+                filePath: "data/tokens/components/status.json",
+                isSource: true,
+                original: {
+                  value: "{modes.color.status.negative.defaultAlt}",
+                  type: "color",
+                  description: "Subtle message bg",
+                },
+                name: "bgAlt",
+                attributes: {},
+                path: [
+                  "status",
+                  "color",
+                  "message",
+                  "contextual",
+                  "error",
+                  "bgAlt",
+                ],
+                comment: "Subtle message bg",
+              },
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "error",
+                "bgAlt",
+              ],
+              comment: "Subtle message bg",
+            },
+            "border-default": {
+              value: "#E13E53",
+              type: "color",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.negative.default}",
+                type: "color",
+              },
+              name: "statusColorMessageContextualErrorBorderDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "error",
+                "border-default",
+              ],
+            },
+            icon: {
+              value: "#E13E53",
+              type: "color",
+              description: "Icon on tinted bgs",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.negative.default}",
+                type: "color",
+                description: "Icon on tinted bgs",
+              },
+              name: "statusColorMessageContextualErrorIcon",
+              attributes: {
+                value: "#E13E53",
+                type: "color",
+                description: "Icon on tinted bgs",
+                filePath: "data/tokens/components/status.json",
+                isSource: true,
+                original: {
+                  value: "{modes.color.status.negative.default}",
+                  type: "color",
+                  description: "Icon on tinted bgs",
+                },
+                name: "icon",
+                attributes: {},
+                path: [
+                  "status",
+                  "color",
+                  "message",
+                  "contextual",
+                  "error",
+                  "icon",
+                ],
+                comment: "Icon on tinted bgs",
+              },
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "error",
+                "icon",
+              ],
+              comment: "Icon on tinted bgs",
+            },
+          },
+          info: {
+            "bg-default": {
+              value: "#007ED9",
+              type: "color",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.info.default}",
+                type: "color",
+              },
+              name: "statusColorMessageContextualInfoBgDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "info",
+                "bg-default",
+              ],
+            },
+            bgAlt: {
+              value: "#111722",
+              type: "color",
+              description: "Subtle message bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.info.defaultAlt}",
+                type: "color",
+                description: "Subtle message bg",
+              },
+              name: "statusColorMessageContextualInfoBgAlt",
+              attributes: {
+                value: "#111722",
+                type: "color",
+                description: "Subtle message bg",
+                filePath: "data/tokens/components/status.json",
+                isSource: true,
+                original: {
+                  value: "{modes.color.status.info.defaultAlt}",
+                  type: "color",
+                  description: "Subtle message bg",
+                },
+                name: "bgAlt",
+                attributes: {},
+                path: [
+                  "status",
+                  "color",
+                  "message",
+                  "contextual",
+                  "info",
+                  "bgAlt",
+                ],
+                comment: "Subtle message bg",
+              },
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "info",
+                "bgAlt",
+              ],
+              comment: "Subtle message bg",
+            },
+            "border-default": {
+              value: "#007ED9",
+              type: "color",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.info.default}",
+                type: "color",
+              },
+              name: "statusColorMessageContextualInfoBorderDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "info",
+                "border-default",
+              ],
+            },
+            icon: {
+              value: "#007ED9",
+              type: "color",
+              description: "Icon on tinted bgs",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.info.default}",
+                type: "color",
+                description: "Icon on tinted bgs",
+              },
+              name: "statusColorMessageContextualInfoIcon",
+              attributes: {
+                value: "#007ED9",
+                type: "color",
+                description: "Icon on tinted bgs",
+                filePath: "data/tokens/components/status.json",
+                isSource: true,
+                original: {
+                  value: "{modes.color.status.info.default}",
+                  type: "color",
+                  description: "Icon on tinted bgs",
+                },
+                name: "icon",
+                attributes: {},
+                path: [
+                  "status",
+                  "color",
+                  "message",
+                  "contextual",
+                  "info",
+                  "icon",
+                ],
+                comment: "Icon on tinted bgs",
+              },
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "info",
+                "icon",
+              ],
+              comment: "Icon on tinted bgs",
+            },
+          },
+          success: {
+            "bg-default": {
+              value: "#009023",
+              type: "color",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.positive.default}",
+                type: "color",
+              },
+              name: "statusColorMessageContextualSuccessBgDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "success",
+                "bg-default",
+              ],
+            },
+            bgAlt: {
+              value: "#0e1a0b",
+              type: "color",
+              description: "Subtle message bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.positive.defaultAlt}",
+                type: "color",
+                description: "Subtle message bg",
+              },
+              name: "statusColorMessageContextualSuccessBgAlt",
+              attributes: {
+                value: "#0e1a0b",
+                type: "color",
+                description: "Subtle message bg",
+                filePath: "data/tokens/components/status.json",
+                isSource: true,
+                original: {
+                  value: "{modes.color.status.positive.defaultAlt}",
+                  type: "color",
+                  description: "Subtle message bg",
+                },
+                name: "bgAlt",
+                attributes: {},
+                path: [
+                  "status",
+                  "color",
+                  "message",
+                  "contextual",
+                  "success",
+                  "bgAlt",
+                ],
+                comment: "Subtle message bg",
+              },
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "success",
+                "bgAlt",
+              ],
+              comment: "Subtle message bg",
+            },
+            "border-default": {
+              value: "#009023",
+              type: "color",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.positive.default}",
+                type: "color",
+              },
+              name: "statusColorMessageContextualSuccessBorderDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "success",
+                "border-default",
+              ],
+            },
+            icon: {
+              value: "#009023",
+              type: "color",
+              description: "Icon on tinted bgs",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.positive.default}",
+                type: "color",
+                description: "Icon on tinted bgs",
+              },
+              name: "statusColorMessageContextualSuccessIcon",
+              attributes: {
+                value: "#009023",
+                type: "color",
+                description: "Icon on tinted bgs",
+                filePath: "data/tokens/components/status.json",
+                isSource: true,
+                original: {
+                  value: "{modes.color.status.positive.default}",
+                  type: "color",
+                  description: "Icon on tinted bgs",
+                },
+                name: "icon",
+                attributes: {},
+                path: [
+                  "status",
+                  "color",
+                  "message",
+                  "contextual",
+                  "success",
+                  "icon",
+                ],
+                comment: "Icon on tinted bgs",
+              },
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "success",
+                "icon",
+              ],
+              comment: "Icon on tinted bgs",
+            },
+          },
+          warning: {
+            "bg-default": {
+              value: "#E04500",
+              type: "color",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.caution.default}",
+                type: "color",
+              },
+              name: "statusColorMessageContextualWarningBgDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "warning",
+                "bg-default",
+              ],
+            },
+            bgAlt: {
+              value: "#251206",
+              type: "color",
+              description: "Subtle message bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.caution.defaultAlt}",
+                type: "color",
+                description: "Subtle message bg",
+              },
+              name: "statusColorMessageContextualWarningBgAlt",
+              attributes: {
+                value: "#251206",
+                type: "color",
+                description: "Subtle message bg",
+                filePath: "data/tokens/components/status.json",
+                isSource: true,
+                original: {
+                  value: "{modes.color.status.caution.defaultAlt}",
+                  type: "color",
+                  description: "Subtle message bg",
+                },
+                name: "bgAlt",
+                attributes: {},
+                path: [
+                  "status",
+                  "color",
+                  "message",
+                  "contextual",
+                  "warning",
+                  "bgAlt",
+                ],
+                comment: "Subtle message bg",
+              },
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "warning",
+                "bgAlt",
+              ],
+              comment: "Subtle message bg",
+            },
+            "border-default": {
+              value: "#E04500",
+              type: "color",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.caution.default}",
+                type: "color",
+              },
+              name: "statusColorMessageContextualWarningBorderDefault",
+              attributes: {},
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "warning",
+                "border-default",
+              ],
+            },
+            icon: {
+              value: "#E04500",
+              type: "color",
+              description: "Icon on tinted bgs",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.caution.default}",
+                type: "color",
+                description: "Icon on tinted bgs",
+              },
+              name: "statusColorMessageContextualWarningIcon",
+              attributes: {
+                value: "#E04500",
+                type: "color",
+                description: "Icon on tinted bgs",
+                filePath: "data/tokens/components/status.json",
+                isSource: true,
+                original: {
+                  value: "{modes.color.status.caution.default}",
+                  type: "color",
+                  description: "Icon on tinted bgs",
+                },
+                name: "icon",
+                attributes: {},
+                path: [
+                  "status",
+                  "color",
+                  "message",
+                  "contextual",
+                  "warning",
+                  "icon",
+                ],
+                comment: "Icon on tinted bgs",
+              },
+              path: [
+                "status",
+                "color",
+                "message",
+                "contextual",
+                "warning",
+                "icon",
+              ],
+              comment: "Icon on tinted bgs",
             },
-            name: "bgAlt",
-            attributes: {},
-            path: ["status", "color", "error", "bgAlt"],
-            comment: "Subtle message bg",
           },
-          path: ["status", "color", "error", "bgAlt"],
-          comment: "Subtle message bg",
         },
-        "bgAlt-hover": {
-          value: "#332122",
+      },
+      pill: {
+        "label-default": {
+          value: "#000000",
           type: "color",
           filePath: "data/tokens/components/status.json",
           isSource: true,
           original: {
-            value: "{modes.color.status.negative.hoverAlt}",
+            value: "{modes.color.status.content.withDefault}",
             type: "color",
           },
-          name: "statusColorErrorBgAltHover",
+          name: "statusColorPillLabelDefault",
           attributes: {},
-          path: ["status", "color", "error", "bgAlt-hover"],
+          path: ["status", "color", "pill", "label-default"],
         },
-        "bg-hover": {
-          value: "#eb646c",
+        "label-hover": {
+          value: "#000000",
           type: "color",
           filePath: "data/tokens/components/status.json",
           isSource: true,
           original: {
-            value: "{modes.color.status.negative.hover}",
+            value: "{modes.color.status.content.withHover}",
             type: "color",
           },
-          name: "statusColorErrorBgHover",
+          name: "statusColorPillLabelHover",
           attributes: {},
-          path: ["status", "color", "error", "bg-hover"],
+          path: ["status", "color", "pill", "label-hover"],
         },
-        "border-default": {
-          value: "#E13E53",
+        "labelAlt-default": {
+          value: "#fffffff2",
           type: "color",
           filePath: "data/tokens/components/status.json",
           isSource: true,
           original: {
-            value: "{modes.color.status.negative.default}",
+            value: "{modes.color.status.content.withDefaultAlt}",
             type: "color",
           },
-          name: "statusColorErrorBorderDefault",
+          name: "statusColorPillLabelAltDefault",
           attributes: {},
-          path: ["status", "color", "error", "border-default"],
+          path: ["status", "color", "pill", "labelAlt-default"],
         },
-        icon: {
-          value: "#E13E53",
+        "labelAlt-hover": {
+          value: "#fffffff2",
           type: "color",
-          description: "Icon on tinted bgs",
           filePath: "data/tokens/components/status.json",
           isSource: true,
           original: {
-            value: "{modes.color.status.negative.default}",
+            value: "{modes.color.status.content.withDefaultAlt}",
             type: "color",
-            description: "Icon on tinted bgs",
           },
-          name: "statusColorErrorIcon",
-          attributes: {
+          name: "statusColorPillLabelAltHover",
+          attributes: {},
+          path: ["status", "color", "pill", "labelAlt-hover"],
+        },
+        error: {
+          "bg-default": {
             value: "#E13E53",
             type: "color",
-            description: "Icon on tinted bgs",
             filePath: "data/tokens/components/status.json",
             isSource: true,
             original: {
               value: "{modes.color.status.negative.default}",
               type: "color",
-              description: "Icon on tinted bgs",
             },
-            name: "icon",
+            name: "statusColorPillErrorBgDefault",
             attributes: {},
-            path: ["status", "color", "error", "icon"],
-            comment: "Icon on tinted bgs",
-          },
-          path: ["status", "color", "error", "icon"],
-          comment: "Icon on tinted bgs",
-        },
-      },
-      info: {
-        "bg-default": {
-          value: "#007ED9",
-          type: "color",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.info.default}",
-            type: "color",
+            path: ["status", "color", "pill", "error", "bg-default"],
           },
-          name: "statusColorInfoBgDefault",
-          attributes: {},
-          path: ["status", "color", "info", "bg-default"],
-        },
-        bgAlt: {
-          value: "#111722",
-          type: "color",
-          description: "Subtle message bg",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.info.defaultAlt}",
+          "bgAlt-default": {
+            value: "#241212",
             type: "color",
-            description: "Subtle message bg",
+            description: "outline pill bg",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              value: "{modes.color.status.negative.defaultAlt}",
+              type: "color",
+              description: "outline pill bg",
+            },
+            name: "statusColorPillErrorBgAltDefault",
+            attributes: {
+              value: "#241212",
+              type: "color",
+              description: "outline pill bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.negative.defaultAlt}",
+                type: "color",
+                description: "outline pill bg",
+              },
+              name: "bgAlt-default",
+              attributes: {},
+              path: ["status", "color", "pill", "error", "bgAlt-default"],
+              comment: "outline pill bg",
+            },
+            path: ["status", "color", "pill", "error", "bgAlt-default"],
+            comment: "outline pill bg",
           },
-          name: "statusColorInfoBgAlt",
-          attributes: {
-            value: "#111722",
+          "bgAlt-hover": {
+            value: "#332122",
             type: "color",
-            description: "Subtle message bg",
             filePath: "data/tokens/components/status.json",
             isSource: true,
             original: {
-              value: "{modes.color.status.info.defaultAlt}",
+              value: "{modes.color.status.negative.hoverAlt}",
               type: "color",
-              description: "Subtle message bg",
             },
-            name: "bgAlt",
+            name: "statusColorPillErrorBgAltHover",
             attributes: {},
-            path: ["status", "color", "info", "bgAlt"],
-            comment: "Subtle message bg",
+            path: ["status", "color", "pill", "error", "bgAlt-hover"],
           },
-          path: ["status", "color", "info", "bgAlt"],
-          comment: "Subtle message bg",
-        },
-        "bgAlt-default": {
-          value: "#111722",
-          type: "color",
-          description: "Global message bg",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.info.defaultAlt}",
-            type: "color",
-            description: "Global message bg",
-          },
-          name: "statusColorInfoBgAltDefault",
-          attributes: {
-            value: "#111722",
+          "bg-hover": {
+            value: "#eb646c",
             type: "color",
-            description: "Global message bg",
             filePath: "data/tokens/components/status.json",
             isSource: true,
             original: {
-              value: "{modes.color.status.info.defaultAlt}",
+              value: "{modes.color.status.negative.hover}",
               type: "color",
-              description: "Global message bg",
             },
-            name: "bgAlt-default",
+            name: "statusColorPillErrorBgHover",
             attributes: {},
-            path: ["status", "color", "info", "bgAlt-default"],
-            comment: "Global message bg",
-          },
-          path: ["status", "color", "info", "bgAlt-default"],
-          comment: "Global message bg",
-        },
-        "bgAlt-hover": {
-          value: "#212631",
-          type: "color",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.info.hoverAlt}",
-            type: "color",
-          },
-          name: "statusColorInfoBgAltHover",
-          attributes: {},
-          path: ["status", "color", "info", "bgAlt-hover"],
-        },
-        "bg-hover": {
-          value: "#5291e0",
-          type: "color",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.info.hover}",
-            type: "color",
+            path: ["status", "color", "pill", "error", "bg-hover"],
           },
-          name: "statusColorInfoBgHover",
-          attributes: {},
-          path: ["status", "color", "info", "bg-hover"],
-        },
-        "border-default": {
-          value: "#007ED9",
-          type: "color",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.info.default}",
+          "border-default": {
+            value: "#E13E53",
             type: "color",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              value: "{modes.color.status.negative.default}",
+              type: "color",
+            },
+            name: "statusColorPillErrorBorderDefault",
+            attributes: {},
+            path: ["status", "color", "pill", "error", "border-default"],
           },
-          name: "statusColorInfoBorderDefault",
-          attributes: {},
-          path: ["status", "color", "info", "border-default"],
         },
-        icon: {
-          value: "#007ED9",
-          type: "color",
-          description: "Icon on tinted bgs",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.info.default}",
-            type: "color",
-            description: "Icon on tinted bgs",
-          },
-          name: "statusColorInfoIcon",
-          attributes: {
+        info: {
+          "bg-default": {
             value: "#007ED9",
             type: "color",
-            description: "Icon on tinted bgs",
             filePath: "data/tokens/components/status.json",
             isSource: true,
             original: {
               value: "{modes.color.status.info.default}",
               type: "color",
-              description: "Icon on tinted bgs",
             },
-            name: "icon",
+            name: "statusColorPillInfoBgDefault",
             attributes: {},
-            path: ["status", "color", "info", "icon"],
-            comment: "Icon on tinted bgs",
-          },
-          path: ["status", "color", "info", "icon"],
-          comment: "Icon on tinted bgs",
-        },
-      },
-      neutral: {
-        "bg-default": {
-          value: "#7C7C7C",
-          type: "color",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.neutral.default}",
-            type: "color",
+            path: ["status", "color", "pill", "info", "bg-default"],
           },
-          name: "statusColorNeutralBgDefault",
-          attributes: {},
-          path: ["status", "color", "neutral", "bg-default"],
-        },
-        bgAlt: {
-          value: "#171717",
-          type: "color",
-          description: "Subtle message bg",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.neutral.defaultAlt}",
+          "bgAlt-default": {
+            value: "#111722",
             type: "color",
-            description: "Subtle message bg",
+            description: "outline pill bg",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              value: "{modes.color.status.info.defaultAlt}",
+              type: "color",
+              description: "outline pill bg",
+            },
+            name: "statusColorPillInfoBgAltDefault",
+            attributes: {
+              value: "#111722",
+              type: "color",
+              description: "outline pill bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.info.defaultAlt}",
+                type: "color",
+                description: "outline pill bg",
+              },
+              name: "bgAlt-default",
+              attributes: {},
+              path: ["status", "color", "pill", "info", "bgAlt-default"],
+              comment: "outline pill bg",
+            },
+            path: ["status", "color", "pill", "info", "bgAlt-default"],
+            comment: "outline pill bg",
           },
-          name: "statusColorNeutralBgAlt",
-          attributes: {
-            value: "#171717",
+          "bgAlt-hover": {
+            value: "#212631",
             type: "color",
-            description: "Subtle message bg",
             filePath: "data/tokens/components/status.json",
             isSource: true,
             original: {
-              value: "{modes.color.status.neutral.defaultAlt}",
+              value: "{modes.color.status.info.hoverAlt}",
               type: "color",
-              description: "Subtle message bg",
             },
-            name: "bgAlt",
+            name: "statusColorPillInfoBgAltHover",
             attributes: {},
-            path: ["status", "color", "neutral", "bgAlt"],
-            comment: "Subtle message bg",
+            path: ["status", "color", "pill", "info", "bgAlt-hover"],
           },
-          path: ["status", "color", "neutral", "bgAlt"],
-          comment: "Subtle message bg",
-        },
-        "bgAlt-hover": {
-          value: "#262626",
-          type: "color",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.neutral.hoverAlt}",
-            type: "color",
-          },
-          name: "statusColorNeutralBgAltHover",
-          attributes: {},
-          path: ["status", "color", "neutral", "bgAlt-hover"],
-        },
-        "bg-hover": {
-          value: "#909090",
-          type: "color",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.neutral.hover}",
+          "bg-hover": {
+            value: "#5291e0",
             type: "color",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              value: "{modes.color.status.info.hover}",
+              type: "color",
+            },
+            name: "statusColorPillInfoBgHover",
+            attributes: {},
+            path: ["status", "color", "pill", "info", "bg-hover"],
           },
-          name: "statusColorNeutralBgHover",
-          attributes: {},
-          path: ["status", "color", "neutral", "bg-hover"],
-        },
-        "border-default": {
-          value: "#7C7C7C",
-          type: "color",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.neutral.default}",
+          "border-default": {
+            value: "#007ED9",
             type: "color",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              value: "{modes.color.status.info.default}",
+              type: "color",
+            },
+            name: "statusColorPillInfoBorderDefault",
+            attributes: {},
+            path: ["status", "color", "pill", "info", "border-default"],
           },
-          name: "statusColorNeutralBorderDefault",
-          attributes: {},
-          path: ["status", "color", "neutral", "border-default"],
         },
-        icon: {
-          value: "#7C7C7C",
-          type: "color",
-          description: "Icon on tinted bgs",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.neutral.alt}",
-            type: "color",
-            description: "Icon on tinted bgs",
-          },
-          name: "statusColorNeutralIcon",
-          attributes: {
+        neutral: {
+          "bg-default": {
             value: "#7C7C7C",
             type: "color",
-            description: "Icon on tinted bgs",
             filePath: "data/tokens/components/status.json",
             isSource: true,
             original: {
-              value: "{modes.color.status.neutral.alt}",
+              value: "{modes.color.status.neutral.default}",
               type: "color",
-              description: "Icon on tinted bgs",
             },
-            name: "icon",
+            name: "statusColorPillNeutralBgDefault",
             attributes: {},
-            path: ["status", "color", "neutral", "icon"],
-            comment: "Icon on tinted bgs",
-          },
-          path: ["status", "color", "neutral", "icon"],
-          comment: "Icon on tinted bgs",
-        },
-      },
-      rating: {
-        "bg-default": {
-          value: "#00D639",
-          type: "color",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.reviews.default}",
-            type: "color",
+            path: ["status", "color", "pill", "neutral", "bg-default"],
           },
-          name: "statusColorRatingBgDefault",
-          attributes: {},
-          path: ["status", "color", "rating", "bg-default"],
-        },
-        "bg-defaultAlt": {
-          value:
-            "linear-gradient(90deg, #00D639 0%, #00D639 50%, #282828 50%, #282828  100%)",
-          type: "color",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.reviews.defaultAlt}",
-            type: "color",
-          },
-          name: "statusColorRatingBgDefaultAlt",
-          attributes: {},
-          path: ["status", "color", "rating", "bg-defaultAlt"],
-        },
-        "bg-hover": {
-          value: "#18b032",
-          type: "color",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.reviews.hover}",
-            type: "color",
-          },
-          name: "statusColorRatingBgHover",
-          attributes: {},
-          path: ["status", "color", "rating", "bg-hover"],
-        },
-        "border-default": {
-          value: "#00D639",
-          type: "color",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.reviews.default}",
+          "bgAlt-default": {
+            value: "#171717",
             type: "color",
-          },
-          name: "statusColorRatingBorderDefault",
-          attributes: {},
-          path: ["status", "color", "rating", "border-default"],
-        },
-      },
-      success: {
-        "bg-default": {
-          value: "#009023",
-          type: "color",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.positive.default}",
+            description: "outline pill bg",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              value: "{modes.color.status.neutral.defaultAlt}",
+              type: "color",
+              description: "outline pill bg",
+            },
+            name: "statusColorPillNeutralBgAltDefault",
+            attributes: {
+              value: "#171717",
+              type: "color",
+              description: "outline pill bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.neutral.defaultAlt}",
+                type: "color",
+                description: "outline pill bg",
+              },
+              name: "bgAlt-default",
+              attributes: {},
+              path: ["status", "color", "pill", "neutral", "bgAlt-default"],
+              comment: "outline pill bg",
+            },
+            path: ["status", "color", "pill", "neutral", "bgAlt-default"],
+            comment: "outline pill bg",
+          },
+          "bgAlt-hover": {
+            value: "#262626",
             type: "color",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              value: "{modes.color.status.neutral.hoverAlt}",
+              type: "color",
+            },
+            name: "statusColorPillNeutralBgAltHover",
+            attributes: {},
+            path: ["status", "color", "pill", "neutral", "bgAlt-hover"],
           },
-          name: "statusColorSuccessBgDefault",
-          attributes: {},
-          path: ["status", "color", "success", "bg-default"],
-        },
-        bgAlt: {
-          value: "#0e1a0b",
-          type: "color",
-          description: "Subtle message bg",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.positive.defaultAlt}",
+          "bg-hover": {
+            value: "#909090",
             type: "color",
-            description: "Subtle message bg",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              value: "{modes.color.status.neutral.hover}",
+              type: "color",
+            },
+            name: "statusColorPillNeutralBgHover",
+            attributes: {},
+            path: ["status", "color", "pill", "neutral", "bg-hover"],
           },
-          name: "statusColorSuccessBgAlt",
-          attributes: {
-            value: "#0e1a0b",
+          "border-default": {
+            value: "#7C7C7C",
             type: "color",
-            description: "Subtle message bg",
             filePath: "data/tokens/components/status.json",
             isSource: true,
             original: {
-              value: "{modes.color.status.positive.defaultAlt}",
+              value: "{modes.color.status.neutral.default}",
               type: "color",
-              description: "Subtle message bg",
             },
-            name: "bgAlt",
+            name: "statusColorPillNeutralBorderDefault",
             attributes: {},
-            path: ["status", "color", "success", "bgAlt"],
-            comment: "Subtle message bg",
+            path: ["status", "color", "pill", "neutral", "border-default"],
           },
-          path: ["status", "color", "success", "bgAlt"],
-          comment: "Subtle message bg",
         },
-        "bgAlt-hover": {
-          value: "#1e291d",
-          type: "color",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.positive.hoverAlt}",
+        success: {
+          "bg-default": {
+            value: "#009023",
             type: "color",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              value: "{modes.color.status.positive.default}",
+              type: "color",
+            },
+            name: "statusColorPillSuccessBgDefault",
+            attributes: {},
+            path: ["status", "color", "pill", "success", "bg-default"],
           },
-          name: "statusColorSuccessBgAltHover",
-          attributes: {},
-          path: ["status", "color", "success", "bgAlt-hover"],
-        },
-        "bg-hover": {
-          value: "#2e9936",
-          type: "color",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.positive.hover}",
+          "bgAlt-default": {
+            value: "#0e1a0b",
             type: "color",
+            description: "outline pill bg",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              value: "{modes.color.status.positive.defaultAlt}",
+              type: "color",
+              description: "outline pill bg",
+            },
+            name: "statusColorPillSuccessBgAltDefault",
+            attributes: {
+              value: "#0e1a0b",
+              type: "color",
+              description: "outline pill bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.positive.defaultAlt}",
+                type: "color",
+                description: "outline pill bg",
+              },
+              name: "bgAlt-default",
+              attributes: {},
+              path: ["status", "color", "pill", "success", "bgAlt-default"],
+              comment: "outline pill bg",
+            },
+            path: ["status", "color", "pill", "success", "bgAlt-default"],
+            comment: "outline pill bg",
           },
-          name: "statusColorSuccessBgHover",
-          attributes: {},
-          path: ["status", "color", "success", "bg-hover"],
-        },
-        "border-default": {
-          value: "#009023",
-          type: "color",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.positive.default}",
+          "bgAlt-hover": {
+            value: "#1e291d",
             type: "color",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              value: "{modes.color.status.positive.hoverAlt}",
+              type: "color",
+            },
+            name: "statusColorPillSuccessBgAltHover",
+            attributes: {},
+            path: ["status", "color", "pill", "success", "bgAlt-hover"],
           },
-          name: "statusColorSuccessBorderDefault",
-          attributes: {},
-          path: ["status", "color", "success", "border-default"],
-        },
-        icon: {
-          value: "#009023",
-          type: "color",
-          description: "Icon on tinted bgs",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.positive.default}",
+          "bg-hover": {
+            value: "#2e9936",
             type: "color",
-            description: "Icon on tinted bgs",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              value: "{modes.color.status.positive.hover}",
+              type: "color",
+            },
+            name: "statusColorPillSuccessBgHover",
+            attributes: {},
+            path: ["status", "color", "pill", "success", "bg-hover"],
           },
-          name: "statusColorSuccessIcon",
-          attributes: {
+          "border-default": {
             value: "#009023",
             type: "color",
-            description: "Icon on tinted bgs",
             filePath: "data/tokens/components/status.json",
             isSource: true,
             original: {
               value: "{modes.color.status.positive.default}",
               type: "color",
-              description: "Icon on tinted bgs",
             },
-            name: "icon",
+            name: "statusColorPillSuccessBorderDefault",
             attributes: {},
-            path: ["status", "color", "success", "icon"],
-            comment: "Icon on tinted bgs",
-          },
-          path: ["status", "color", "success", "icon"],
-          comment: "Icon on tinted bgs",
-        },
-      },
-      warning: {
-        "bg-default": {
-          value: "#E04500",
-          type: "color",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.caution.default}",
-            type: "color",
+            path: ["status", "color", "pill", "success", "border-default"],
           },
-          name: "statusColorWarningBgDefault",
-          attributes: {},
-          path: ["status", "color", "warning", "bg-default"],
         },
-        bgAlt: {
-          value: "#251206",
-          type: "color",
-          description: "Subtle message bg",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.caution.defaultAlt}",
+        warning: {
+          "bg-default": {
+            value: "#E04500",
             type: "color",
-            description: "Subtle message bg",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              value: "{modes.color.status.caution.default}",
+              type: "color",
+            },
+            name: "statusColorPillWarningBgDefault",
+            attributes: {},
+            path: ["status", "color", "pill", "warning", "bg-default"],
           },
-          name: "statusColorWarningBgAlt",
-          attributes: {
+          "bgAlt-default": {
             value: "#251206",
             type: "color",
-            description: "Subtle message bg",
+            description: "Global message bg",
             filePath: "data/tokens/components/status.json",
             isSource: true,
             original: {
               value: "{modes.color.status.caution.defaultAlt}",
               type: "color",
-              description: "Subtle message bg",
+              description: "Global message bg",
+            },
+            name: "statusColorPillWarningBgAltDefault",
+            attributes: {
+              value: "#251206",
+              type: "color",
+              description: "Global message bg",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.caution.defaultAlt}",
+                type: "color",
+                description: "Global message bg",
+              },
+              name: "bgAlt-default",
+              attributes: {},
+              path: ["status", "color", "pill", "warning", "bgAlt-default"],
+              comment: "Global message bg",
+            },
+            path: ["status", "color", "pill", "warning", "bgAlt-default"],
+            comment: "Global message bg",
+          },
+          "bgAlt-hover": {
+            value: "#34211a",
+            type: "color",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              value: "{modes.color.status.caution.hoverAlt}",
+              type: "color",
             },
-            name: "bgAlt",
+            name: "statusColorPillWarningBgAltHover",
             attributes: {},
-            path: ["status", "color", "warning", "bgAlt"],
-            comment: "Subtle message bg",
+            path: ["status", "color", "pill", "warning", "bgAlt-hover"],
           },
-          path: ["status", "color", "warning", "bgAlt"],
-          comment: "Subtle message bg",
-        },
-        "bgAlt-default": {
-          value: "#251206",
-          type: "color",
-          description: "Global message bg",
-          filePath: "data/tokens/components/status.json",
-          isSource: true,
-          original: {
-            value: "{modes.color.status.caution.defaultAlt}",
+          "bg-hover": {
+            value: "#eb6732",
             type: "color",
-            description: "Global message bg",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              value: "{modes.color.status.caution.hover}",
+              type: "color",
+            },
+            name: "statusColorPillWarningBgHover",
+            attributes: {},
+            path: ["status", "color", "pill", "warning", "bg-hover"],
           },
-          name: "statusColorWarningBgAltDefault",
-          attributes: {
-            value: "#251206",
+          "border-default": {
+            value: "#E04500",
             type: "color",
-            description: "Global message bg",
             filePath: "data/tokens/components/status.json",
             isSource: true,
             original: {
-              value: "{modes.color.status.caution.defaultAlt}",
+              value: "{modes.color.status.caution.default}",
               type: "color",
-              description: "Global message bg",
             },
-            name: "bgAlt-default",
+            name: "statusColorPillWarningBorderDefault",
             attributes: {},
-            path: ["status", "color", "warning", "bgAlt-default"],
-            comment: "Global message bg",
+            path: ["status", "color", "pill", "warning", "border-default"],
+          },
+        },
+        readonly: {
+          "bg-default": {
+            value: "#4b4b4b",
+            type: "color",
+            description:
+              "Pill (all types, readonly, when nested in disabled parent components)",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              value: "{modes.color.status.inactive.default}",
+              type: "color",
+              description:
+                "Pill (all types, readonly, when nested in disabled parent components)",
+            },
+            name: "statusColorPillReadonlyBgDefault",
+            attributes: {
+              value: "#4b4b4b",
+              type: "color",
+              description:
+                "Pill (all types, readonly, when nested in disabled parent components)",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.inactive.default}",
+                type: "color",
+                description:
+                  "Pill (all types, readonly, when nested in disabled parent components)",
+              },
+              name: "bg-default",
+              attributes: {},
+              path: ["status", "color", "pill", "readonly", "bg-default"],
+              comment:
+                "Pill (all types, readonly, when nested in disabled parent components)",
+            },
+            path: ["status", "color", "pill", "readonly", "bg-default"],
+            comment:
+              "Pill (all types, readonly, when nested in disabled parent components)",
+          },
+          "border-default": {
+            value: "#4b4b4b",
+            type: "color",
+            description:
+              "Pill (all types, readonly, when nested in disabled parent components)",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              value: "{modes.color.status.inactive.default}",
+              type: "color",
+              description:
+                "Pill (all types, readonly, when nested in disabled parent components)",
+            },
+            name: "statusColorPillReadonlyBorderDefault",
+            attributes: {
+              value: "#4b4b4b",
+              type: "color",
+              description:
+                "Pill (all types, readonly, when nested in disabled parent components)",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.status.inactive.default}",
+                type: "color",
+                description:
+                  "Pill (all types, readonly, when nested in disabled parent components)",
+              },
+              name: "border-default",
+              attributes: {},
+              path: ["status", "color", "pill", "readonly", "border-default"],
+              comment:
+                "Pill (all types, readonly, when nested in disabled parent components)",
+            },
+            path: ["status", "color", "pill", "readonly", "border-default"],
+            comment:
+              "Pill (all types, readonly, when nested in disabled parent components)",
+          },
+          label: {
+            value: "#ffffffab",
+            type: "color",
+            description:
+              "Pill (all types, readonly, when nested in disabled parent components)",
+            filePath: "data/tokens/components/status.json",
+            isSource: true,
+            original: {
+              value: "{modes.color.generic.content.firm}",
+              type: "color",
+              description:
+                "Pill (all types, readonly, when nested in disabled parent components)",
+            },
+            name: "statusColorPillReadonlyLabel",
+            attributes: {
+              value: "#ffffffab",
+              type: "color",
+              description:
+                "Pill (all types, readonly, when nested in disabled parent components)",
+              filePath: "data/tokens/components/status.json",
+              isSource: true,
+              original: {
+                value: "{modes.color.generic.content.firm}",
+                type: "color",
+                description:
+                  "Pill (all types, readonly, when nested in disabled parent components)",
+              },
+              name: "label",
+              attributes: {},
+              path: ["status", "color", "pill", "readonly", "label"],
+              comment:
+                "Pill (all types, readonly, when nested in disabled parent components)",
+            },
+            path: ["status", "color", "pill", "readonly", "label"],
+            comment:
+              "Pill (all types, readonly, when nested in disabled parent components)",
           },
-          path: ["status", "color", "warning", "bgAlt-default"],
-          comment: "Global message bg",
         },
-        "bgAlt-hover": {
-          value: "#34211a",
+      },
+      rating: {
+        "bg-default": {
+          value: "#00D639",
           type: "color",
           filePath: "data/tokens/components/status.json",
           isSource: true,
           original: {
-            value: "{modes.color.status.caution.hoverAlt}",
+            value: "{modes.color.status.reviews.default}",
             type: "color",
           },
-          name: "statusColorWarningBgAltHover",
+          name: "statusColorRatingBgDefault",
           attributes: {},
-          path: ["status", "color", "warning", "bgAlt-hover"],
+          path: ["status", "color", "rating", "bg-default"],
         },
-        "bg-hover": {
-          value: "#eb6732",
+        "bg-defaultAlt": {
+          value:
+            "linear-gradient(90deg, #00D639 0%, #00D639 50%, #282828 50%, #282828  100%)",
           type: "color",
           filePath: "data/tokens/components/status.json",
           isSource: true,
           original: {
-            value: "{modes.color.status.caution.hover}",
+            value: "{modes.color.status.reviews.defaultAlt}",
             type: "color",
           },
-          name: "statusColorWarningBgHover",
+          name: "statusColorRatingBgDefaultAlt",
           attributes: {},
-          path: ["status", "color", "warning", "bg-hover"],
+          path: ["status", "color", "rating", "bg-defaultAlt"],
         },
-        "border-default": {
-          value: "#E04500",
+        "bg-hover": {
+          value: "#18b032",
           type: "color",
           filePath: "data/tokens/components/status.json",
           isSource: true,
           original: {
-            value: "{modes.color.status.caution.default}",
+            value: "{modes.color.status.reviews.hover}",
             type: "color",
           },
-          name: "statusColorWarningBorderDefault",
+          name: "statusColorRatingBgHover",
           attributes: {},
-          path: ["status", "color", "warning", "border-default"],
+          path: ["status", "color", "rating", "bg-hover"],
         },
-        icon: {
-          value: "#E04500",
+        "border-default": {
+          value: "#00D639",
           type: "color",
-          description: "Icon on tinted bgs",
           filePath: "data/tokens/components/status.json",
           isSource: true,
           original: {
-            value: "{modes.color.status.caution.default}",
-            type: "color",
-            description: "Icon on tinted bgs",
-          },
-          name: "statusColorWarningIcon",
-          attributes: {
-            value: "#E04500",
+            value: "{modes.color.status.reviews.default}",
             type: "color",
-            description: "Icon on tinted bgs",
-            filePath: "data/tokens/components/status.json",
-            isSource: true,
-            original: {
-              value: "{modes.color.status.caution.default}",
-              type: "color",
-              description: "Icon on tinted bgs",
-            },
-            name: "icon",
-            attributes: {},
-            path: ["status", "color", "warning", "icon"],
-            comment: "Icon on tinted bgs",
           },
-          path: ["status", "color", "warning", "icon"],
-          comment: "Icon on tinted bgs",
+          name: "statusColorRatingBorderDefault",
+          attributes: {},
+          path: ["status", "color", "rating", "border-default"],
         },
       },
     },