{
  "schemaVersion": 1,
  "theme": "j3w1-theme",
  "version": "1.1.0",
  "profile": "default",
  "profileStatus": "approved",
  "release": {
    "version": "1.1.0",
    "stability": "release",
    "policy": "Use the pinned approved default profile. Pending roles in that profile use-and-report their decision IDs; this does not approve them. Proposed profiles are preview-only and blocked for delivery. Heritage profiles are historical-only. Deprecated or heritage roles are blocked for new approved-profile mappings. Consume roles within their documented scope, never primitives. Release numbering does not approve profiles or tokens."
  },
  "sourceDigest": "sha256-C+iD5Q7l0XPU/boMj003wPbPLBOq3C3ZM7s4OfzJ6mc=",
  "id": "badge",
  "family": "display",
  "maturity": "stable",
  "priority": "R1",
  "coverage": {
    "family": "display",
    "priority": "R1",
    "maturity": "stable",
    "specified": true,
    "demonstrated": true,
    "tested": false,
    "testImplemented": false,
    "states": 2
  },
  "title": "Badge",
  "summary": "A small square label for a status or a count; every status carries its glyph and its fill, the outline form uses the status border, and an empty badge is a dot with a name.",
  "anchors": {
    "site": "https://j3w1.github.io/theme/reference/#c-badge",
    "spec": "spec/components/badge.md",
    "brief": "exports/components/badge.brief.txt"
  },
  "native": true,
  "aria": {
    "pattern": "native span; an empty badge is role=\"img\" with aria-label"
  },
  "variants": [
    {
      "id": "status",
      "name": "Status",
      "description": "The five statuses danger, warning, success, info and neutral, each filled and carrying its glyph."
    },
    {
      "id": "count",
      "name": "Count",
      "description": "A number on the primary action fill with a visually hidden unit."
    },
    {
      "id": "outline",
      "name": "Outline",
      "description": "No fill; the status text colour and a 1px status border."
    }
  ],
  "sizes": [
    "compact",
    "comfortable"
  ],
  "states": [
    "default",
    "empty"
  ],
  "tokens": {
    "danger.bg": {
      "alias": "color.status.danger.fill",
      "value": "#dc282e",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "danger.text": {
      "alias": "color.status.danger.on-fill",
      "value": "#f9faf9",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "danger.border": {
      "alias": "color.status.danger.border",
      "value": "#e53935",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "danger.outline-text": {
      "alias": "color.status.danger.text",
      "value": "#f73f35",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "warning.bg": {
      "alias": "color.status.warning.fill",
      "value": "#c9973f",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-001",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "warning.text": {
      "alias": "color.status.warning.on-fill",
      "value": "#0c0909",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-001",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "warning.border": {
      "alias": "color.status.warning.border",
      "value": "#c9973f",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-001",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "warning.outline-text": {
      "alias": "color.status.warning.text",
      "value": "#c9973f",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-001",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "success.bg": {
      "alias": "color.status.success.fill",
      "value": "#86a46f",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-001",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "success.text": {
      "alias": "color.status.success.on-fill",
      "value": "#0c0909",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-001",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "success.border": {
      "alias": "color.status.success.border",
      "value": "#86a46f",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-001",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "success.outline-text": {
      "alias": "color.status.success.text",
      "value": "#86a46f",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-001",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "info.bg": {
      "alias": "color.status.info.fill",
      "value": "#7e9ebb",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-001",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "info.text": {
      "alias": "color.status.info.on-fill",
      "value": "#0c0909",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-001",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "info.border": {
      "alias": "color.status.info.border",
      "value": "#7e9ebb",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-001",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "info.outline-text": {
      "alias": "color.status.info.text",
      "value": "#7e9ebb",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-001",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "neutral.bg": {
      "alias": "color.status.neutral.fill",
      "value": "#a3676b",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "neutral.text": {
      "alias": "color.status.neutral.on-fill",
      "value": "#000000",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "neutral.border": {
      "alias": "color.status.neutral.border",
      "value": "#a3676b",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "neutral.outline-text": {
      "alias": "color.status.neutral.text",
      "value": "#bd787d",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "count.bg": {
      "alias": "color.action.primary.bg",
      "value": "#7d1310",
      "status": "approved",
      "deprecated": false,
      "decisionId": "D-026",
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    },
    "count.text": {
      "alias": "color.action.primary.text",
      "value": "#f4eeee",
      "status": "observed",
      "deprecated": false,
      "decisionId": null,
      "eligibility": {
        "action": "use",
        "reason": "Use within the role's documented scope and restrictions.",
        "decisionIds": []
      }
    }
  },
  "stateRules": [
    {
      "state": "default",
      "visual": "fill, glyph and text for the status; or the outline form",
      "channel": "the glyph; the text",
      "tokens": {
        "fg": {
          "alias": "color.status.danger.on-fill",
          "value": "#f9faf9",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "bg": {
          "alias": "color.status.danger.fill",
          "value": "#dc282e",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        }
      }
    },
    {
      "state": "empty",
      "visual": "an 8px square dot in the status fill; the glyph and text visually hidden",
      "channel": "`role=\"img\"` with `aria-label`, or the hidden text; the dot's position beside its subject",
      "tokens": {
        "fg": {
          "alias": "color.status.danger.on-fill",
          "value": "#f9faf9",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        },
        "bg": {
          "alias": "color.status.danger.fill",
          "value": "#dc282e",
          "status": "observed",
          "deprecated": false,
          "decisionId": null,
          "eligibility": {
            "action": "use",
            "reason": "Use within the role's documented scope and restrictions.",
            "decisionIds": []
          }
        }
      }
    }
  ],
  "keyboard": [],
  "responsive": "A badge never wraps; the surrounding line wraps around it. Long labels are a design error, not a truncation case. RTL keeps the glyph at the inline start.",
  "portability": {
    "web": "A span with a modifier class; a count badge adds a visually hidden unit; an empty badge is a span with role=\"img\" and aria-label; a badge never receives focus and never carries a click handler.",
    "nativeFallbacks": [
      "GTK4 Label with a status style class and the fill through the css-name.",
      "Qt QLabel with a dynamic status property selected in the stylesheet.",
      "Terminal UI: the glyph and the label in the status colour; fills only where the emulator supports background colours."
    ]
  },
  "fixtures": [
    "FX-I18N",
    "FX-RTL",
    "FX-ZOOM-200",
    "FX-320",
    "FX-RM",
    "FX-HC",
    "FX-STATE-MATRIX"
  ],
  "related": [
    "chip",
    "alert",
    "table",
    "list"
  ],
  "specimens": [
    "filterable-table",
    "settings-panel"
  ],
  "nonExamples": "Rounded or pill badges. A badge that is clickable. A status shown by colour\nwithout its glyph. A count badge that hides its unit from assistive\ntechnology. Purple, cyan or magenta statuses. A badge in body type. A badge\nwhose text wraps. A dot without a name.",
  "contrast": [
    {
      "label": "badge default text",
      "state": "default",
      "kind": "text",
      "min": 4.5,
      "fg": "color.status.danger.on-fill",
      "bg": "color.status.danger.fill",
      "fgHex": "#f9faf9",
      "bgHex": "#dc282e",
      "ratio": 4.58,
      "pass": true,
      "waiver": null
    },
    {
      "label": "badge empty text",
      "state": "empty",
      "kind": "text",
      "min": 4.5,
      "fg": "color.status.danger.on-fill",
      "bg": "color.status.danger.fill",
      "fgHex": "#f9faf9",
      "bgHex": "#dc282e",
      "ratio": 4.58,
      "pass": true,
      "waiver": null
    },
    {
      "label": "warning badge",
      "state": null,
      "kind": "text",
      "min": 4.5,
      "fg": "color.status.warning.on-fill",
      "bg": "color.status.warning.fill",
      "fgHex": "#0c0909",
      "bgHex": "#c9973f",
      "ratio": 7.54,
      "pass": true,
      "waiver": null
    },
    {
      "label": "success badge",
      "state": null,
      "kind": "text",
      "min": 4.5,
      "fg": "color.status.success.on-fill",
      "bg": "color.status.success.fill",
      "fgHex": "#0c0909",
      "bgHex": "#86a46f",
      "ratio": 7.13,
      "pass": true,
      "waiver": null
    },
    {
      "label": "info badge",
      "state": null,
      "kind": "text",
      "min": 4.5,
      "fg": "color.status.info.on-fill",
      "bg": "color.status.info.fill",
      "fgHex": "#0c0909",
      "bgHex": "#7e9ebb",
      "ratio": 7.08,
      "pass": true,
      "waiver": null
    },
    {
      "label": "neutral badge",
      "state": null,
      "kind": "text",
      "min": 4.5,
      "fg": "color.status.neutral.on-fill",
      "bg": "color.status.neutral.fill",
      "fgHex": "#000000",
      "bgHex": "#a3676b",
      "ratio": 4.71,
      "pass": true,
      "waiver": null
    },
    {
      "label": "count badge",
      "state": null,
      "kind": "text",
      "min": 4.5,
      "fg": "color.action.primary.text",
      "bg": "color.action.primary.bg",
      "fgHex": "#f4eeee",
      "bgHex": "#7d1310",
      "ratio": 9.28,
      "pass": true,
      "waiver": null
    },
    {
      "label": "danger outline text",
      "state": null,
      "kind": "text",
      "min": 4.5,
      "fg": "color.status.danger.text",
      "bg": "color.surface.default",
      "fgHex": "#f73f35",
      "bgHex": "#100c0c",
      "ratio": 5.29,
      "pass": true,
      "waiver": null
    },
    {
      "label": "warning outline text",
      "state": null,
      "kind": "text",
      "min": 4.5,
      "fg": "color.status.warning.text",
      "bg": "color.surface.default",
      "fgHex": "#c9973f",
      "bgHex": "#100c0c",
      "ratio": 7.39,
      "pass": true,
      "waiver": null
    },
    {
      "label": "success outline text",
      "state": null,
      "kind": "text",
      "min": 4.5,
      "fg": "color.status.success.text",
      "bg": "color.surface.default",
      "fgHex": "#86a46f",
      "bgHex": "#100c0c",
      "ratio": 6.99,
      "pass": true,
      "waiver": null
    },
    {
      "label": "info outline text",
      "state": null,
      "kind": "text",
      "min": 4.5,
      "fg": "color.status.info.text",
      "bg": "color.surface.default",
      "fgHex": "#7e9ebb",
      "bgHex": "#100c0c",
      "ratio": 6.94,
      "pass": true,
      "waiver": null
    },
    {
      "label": "neutral outline text",
      "state": null,
      "kind": "text",
      "min": 4.5,
      "fg": "color.status.neutral.text",
      "bg": "color.surface.default",
      "fgHex": "#bd787d",
      "bgHex": "#100c0c",
      "ratio": 5.69,
      "pass": true,
      "waiver": null
    },
    {
      "label": "danger outline border",
      "state": null,
      "kind": "ui",
      "min": 3,
      "fg": "color.status.danger.border",
      "bg": "color.surface.default",
      "fgHex": "#e53935",
      "bgHex": "#100c0c",
      "ratio": 4.6,
      "pass": true,
      "waiver": null
    },
    {
      "label": "warning outline border",
      "state": null,
      "kind": "ui",
      "min": 3,
      "fg": "color.status.warning.border",
      "bg": "color.surface.default",
      "fgHex": "#c9973f",
      "bgHex": "#100c0c",
      "ratio": 7.39,
      "pass": true,
      "waiver": null
    },
    {
      "label": "success outline border",
      "state": null,
      "kind": "ui",
      "min": 3,
      "fg": "color.status.success.border",
      "bg": "color.surface.default",
      "fgHex": "#86a46f",
      "bgHex": "#100c0c",
      "ratio": 6.99,
      "pass": true,
      "waiver": null
    },
    {
      "label": "info outline border",
      "state": null,
      "kind": "ui",
      "min": 3,
      "fg": "color.status.info.border",
      "bg": "color.surface.default",
      "fgHex": "#7e9ebb",
      "bgHex": "#100c0c",
      "ratio": 6.94,
      "pass": true,
      "waiver": null
    },
    {
      "label": "neutral outline border",
      "state": null,
      "kind": "ui",
      "min": 3,
      "fg": "color.status.neutral.border",
      "bg": "color.surface.default",
      "fgHex": "#a3676b",
      "bgHex": "#100c0c",
      "ratio": 4.36,
      "pass": true,
      "waiver": null
    },
    {
      "label": "danger dot on the panel surface",
      "state": "empty",
      "kind": "ui",
      "min": 3,
      "fg": "color.status.danger.fill",
      "bg": "color.surface.default",
      "fgHex": "#dc282e",
      "bgHex": "#100c0c",
      "ratio": 4.06,
      "pass": true,
      "waiver": null
    },
    {
      "label": "warning dot on the panel surface",
      "state": "empty",
      "kind": "ui",
      "min": 3,
      "fg": "color.status.warning.fill",
      "bg": "color.surface.default",
      "fgHex": "#c9973f",
      "bgHex": "#100c0c",
      "ratio": 7.39,
      "pass": true,
      "waiver": null
    },
    {
      "label": "success dot on the panel surface",
      "state": "empty",
      "kind": "ui",
      "min": 3,
      "fg": "color.status.success.fill",
      "bg": "color.surface.default",
      "fgHex": "#86a46f",
      "bgHex": "#100c0c",
      "ratio": 6.99,
      "pass": true,
      "waiver": null
    },
    {
      "label": "info dot on the panel surface",
      "state": "empty",
      "kind": "ui",
      "min": 3,
      "fg": "color.status.info.fill",
      "bg": "color.surface.default",
      "fgHex": "#7e9ebb",
      "bgHex": "#100c0c",
      "ratio": 6.94,
      "pass": true,
      "waiver": null
    },
    {
      "label": "neutral dot on the panel surface",
      "state": "empty",
      "kind": "ui",
      "min": 3,
      "fg": "color.status.neutral.fill",
      "bg": "color.surface.default",
      "fgHex": "#a3676b",
      "bgHex": "#100c0c",
      "ratio": 4.36,
      "pass": true,
      "waiver": null
    }
  ]
}