Badge

/* smbk-badge — Badge. Figma "Badge" 4126:20020.
 * One pill scale with the chip and the tag: heights on the mark sizes, Label MD
 * at lg and Label SM below it, padding and gap one step per size.
 * Soft is the default look, so a badge with no look class draws soft; flat
 * and the dot draw the tone's full surface. The default tone has one look, a
 * see-through gray with no edge, so it shows on every surface.
 * Every badge has an edge, clear unless its look draws one (the soft badges of
 * the four feedback tones). Figma draws the edge inside the badge, so each
 * padding gives the edge's width back and a badge with an edge is the same
 * size as one without.
 * Counts take equal-width digits, so a number that changes does not move its
 * neighbors. */

.smbk-badge {
  /* The default tone; each feedback tone's soft look sets these again below (the tone recipe). */
  --smbk-tone-surface: var(--smbk-color-surface-neutral-subtle);
  --smbk-tone-border: transparent;
  --smbk-tone-text: var(--smbk-color-text-default);
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: var(--smbk-space-inline-sm);
  height: var(--smbk-size-mark-xl);
  padding: 0 calc(var(--smbk-space-inset-lg) - var(--smbk-border-width-hairline));
  border: var(--smbk-border-width-hairline) solid var(--smbk-tone-border);
  border-radius: var(--smbk-radius-full);
  background: var(--smbk-tone-surface);
  color: var(--smbk-tone-text);
  font-family: var(--smbk-typography-label-md-font-family);
  font-size: var(--smbk-typography-label-md-font-size);
  font-weight: var(--smbk-typography-label-md-font-weight);
  line-height: var(--smbk-typography-label-md-line-height);
  letter-spacing: var(--smbk-typography-label-md-letter-spacing);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.smbk-badge__icon {
  font-size: var(--smbk-size-icon-sm);
}

/* ---- size ---- */

.smbk-badge--size-md,
.smbk-badge--size-sm {
  gap: var(--smbk-space-inline-xs);
  font-family: var(--smbk-typography-label-sm-font-family);
  font-size: var(--smbk-typography-label-sm-font-size);
  font-weight: var(--smbk-typography-label-sm-font-weight);
  line-height: var(--smbk-typography-label-sm-line-height);
  letter-spacing: var(--smbk-typography-label-sm-letter-spacing);
}

.smbk-badge--size-md {
  height: var(--smbk-size-mark-lg);
  padding: 0 calc(var(--smbk-space-inset-md) - var(--smbk-border-width-hairline));
}

.smbk-badge--size-sm {
  height: var(--smbk-size-mark-md);
  padding: 0 calc(var(--smbk-space-inset-sm) - var(--smbk-border-width-hairline));
}

:is(.smbk-badge--size-md, .smbk-badge--size-sm) .smbk-badge__icon {
  font-size: var(--smbk-size-icon-xs);
}

/* The default tone is the block's own look above. */

/* ---- soft, the default: the tone recipe, the tone's subtle surface inside its pale edge ---- */

.smbk-badge--tone-success { --smbk-tone-surface: var(--smbk-color-feedback-success-surface-subtle); --smbk-tone-border: var(--smbk-color-feedback-success-border-subtle); --smbk-tone-text: var(--smbk-color-feedback-success-text-on-subtle); }
.smbk-badge--tone-info { --smbk-tone-surface: var(--smbk-color-feedback-info-surface-subtle); --smbk-tone-border: var(--smbk-color-feedback-info-border-subtle); --smbk-tone-text: var(--smbk-color-feedback-info-text-on-subtle); }
.smbk-badge--tone-warning { --smbk-tone-surface: var(--smbk-color-feedback-warning-surface-subtle); --smbk-tone-border: var(--smbk-color-feedback-warning-border-subtle); --smbk-tone-text: var(--smbk-color-feedback-warning-text-on-subtle); }
.smbk-badge--tone-danger { --smbk-tone-surface: var(--smbk-color-feedback-danger-surface-subtle); --smbk-tone-border: var(--smbk-color-feedback-danger-border-subtle); --smbk-tone-text: var(--smbk-color-feedback-danger-text-on-subtle); }

/* ---- flat and dot: the tone's full surface, with no edge ---- */

.smbk-badge--look-flat.smbk-badge--tone-success {
  border-color: transparent;
  background: var(--smbk-color-feedback-success-surface);
  color: var(--smbk-color-feedback-success-text-on-surface);
}

.smbk-badge--look-flat.smbk-badge--tone-info {
  border-color: transparent;
  background: var(--smbk-color-feedback-info-surface);
  color: var(--smbk-color-feedback-info-text-on-surface);
}

.smbk-badge--look-flat.smbk-badge--tone-warning {
  border-color: transparent;
  background: var(--smbk-color-feedback-warning-surface);
  color: var(--smbk-color-feedback-warning-text-on-surface);
}

.smbk-badge--look-flat.smbk-badge--tone-danger {
  border-color: transparent;
  background: var(--smbk-color-feedback-danger-surface);
  color: var(--smbk-color-feedback-danger-text-on-surface);
}

/* ---- dot: a bare mark, no label. Its words, if markup gives it any, stay hidden over the
   tone's text color above. ---- */

/* ---- high contrast (forced colors) ---- */
/* In Windows high-contrast mode the browser drops fills and shadows; this puts the meaning back with the
   user's own colors. Nothing here applies outside that mode. */

@media (forced-colors: active) {
  /* The dot is a fill and nothing else, so it would vanish. It takes the palette's text color. */
}

{
  "name": "badge",
  "block": "smbk-badge",
  "summary": "A small status marker: a soft or flat pill with a label and optional icons.",
  "adapt": "css",
  "axes": {
    "look": {
      "values": [
        "soft",
        "flat"
      ],
      "default": "soft",
      "description": "Soft, the default, is the subtle surface inside an edge of the tone's color; flat is the tone's full surface. The default tone looks the same in soft and flat."
    },
    "tone": {
      "values": [
        "default",
        "success",
        "info",
        "warning",
        "danger"
      ],
      "default": "default",
      "description": "A see-through gray that shows on every surface, or one of the four feedback families."
    },
    "size": {
      "values": [
        "lg",
        "md",
        "sm"
      ],
      "default": "lg",
      "description": "The pill scale shared with the chip and the tag: 32, 24 and 20 tall."
    }
  },
  "flags": {},
  "parts": [
    "icon",
    "label"
  ],
  "figmaNodeId": "4126:20020"
}