Stat

/* smbk-stat — Stat. Figma "Stat" 7118:401 (Size × Type × State; Dot and Description booleans).
 * One figure with its name above it and a line under it, on the default surface with square corners:
 * the name in Label SM, the figure in a heading style with tabular digits, the line in Body SM, the
 * extra small stack step apart; an optional change badge after the figure and a small chart under the line.
 * As wide as its content in running text; a grid or a row it sits in stretches it. In a card's slot the
 * card drops its padding and fill (card.css), so it lines up with the card's other parts. A linked figure takes the link colors and underline, and its link covers the whole
 * tile, so the tile is the one place to press and the focus ring goes round it. */

.smbk-stat {
  box-sizing: border-box;
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: var(--smbk-space-stack-xs);
  margin: 0;
  padding: var(--smbk-space-inset-xl);
  vertical-align: top;
  background: var(--smbk-color-surface-default);
}

.smbk-stat__name {
  display: flex;
  align-items: center;
  gap: var(--smbk-space-inline-xs);
  margin: 0;
  color: var(--smbk-color-text-subtle);
  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);
  text-transform: var(--smbk-typography-label-sm-text-transform);
}

.smbk-stat__figure {
  margin: 0;
  color: var(--smbk-color-text-default);
  font-family: var(--smbk-typography-heading-md-font-family);
  font-size: var(--smbk-typography-heading-md-font-size);
  font-weight: var(--smbk-typography-heading-md-font-weight);
  line-height: var(--smbk-typography-heading-md-line-height);
  letter-spacing: var(--smbk-typography-heading-md-letter-spacing);
  text-transform: var(--smbk-typography-heading-md-text-transform);
  font-variant-numeric: tabular-nums;
}

.smbk-stat__description {
  margin: 0;
  color: var(--smbk-color-text-subtle);
  font-family: var(--smbk-typography-body-sm-font-family);
  font-size: var(--smbk-typography-body-sm-font-size);
  font-weight: var(--smbk-typography-body-sm-font-weight);
  line-height: var(--smbk-typography-body-sm-line-height);
  letter-spacing: var(--smbk-typography-body-sm-letter-spacing);
}

.smbk-stat__figure:has(> .smbk-stat__trend) {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--smbk-space-inline-sm);
}

/* The change after the figure, such as a small badge. A flex box, so the figure's line height leaves no
   room around it. */
.smbk-stat__trend {
  display: flex;
  align-items: center;
}

/* A small chart under the line, such as a sparkline or a meter, as wide as the stat. */
.smbk-stat__chart {
  min-width: 0;
  margin: 0;
}

/* ---- link: the figure is the link, in the link colors and underlined; its box is stretched over the
   whole tile, so pressing anywhere on the tile follows it and the ring is drawn round the tile. ---- */

.smbk-stat__link {
  color: var(--smbk-color-text-link);
  text-decoration: underline;
  outline: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.smbk-stat__link::after {
  content: "";
  position: absolute;
  inset: 0;
}

@media (hover: hover) {
  .smbk-stat__link:hover {
    color: var(--smbk-color-text-link-hover);
  }
}

.smbk-stat__link:active {
  color: var(--smbk-color-text-link-pressed);
}

.smbk-stat__link:focus-visible::after {
  outline: var(--smbk-focus-ring-width) solid var(--smbk-color-border-focus);
  outline-offset: var(--smbk-focus-ring-offset);
}

/* ---- small: closer to its edges, the figure a step smaller ---- */

.smbk-stat--size-sm {
  padding: var(--smbk-space-inset-lg);
}

.smbk-stat--size-sm .smbk-stat__figure {
  font-family: var(--smbk-typography-heading-sm-font-family);
  font-size: var(--smbk-typography-heading-sm-font-size);
  font-weight: var(--smbk-typography-heading-sm-font-weight);
  line-height: var(--smbk-typography-heading-sm-line-height);
  letter-spacing: var(--smbk-typography-heading-sm-letter-spacing);
  text-transform: var(--smbk-typography-heading-sm-text-transform);
}

/* ---- 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 ring round the tile is drawn in the palette's highlight. */
  .smbk-stat__link:focus-visible::after {
    outline-color: Highlight;
  }
}

{
  "name": "stat",
  "block": "smbk-stat",
  "summary": "One figure with its name and a line of what it means, plain or as a link to where the figure comes from.",
  "adapt": "css",
  "axes": {
    "size": {
      "values": [
        "lg",
        "sm"
      ],
      "default": "lg",
      "description": "Small sits closer to its edges and sets the figure a heading step smaller, for a row of many stats."
    },
    "type": {
      "values": [
        "static",
        "link"
      ],
      "default": "static",
      "description": "A link takes the link colors and underline on its figure, and the whole tile follows it. The wrapper sets it when it is given an address."
    }
  },
  "flags": {},
  "parts": [
    "name",
    "dot",
    "figure",
    "link",
    "trend",
    "description",
    "chart"
  ],
  "figmaNodeId": "7118:401"
}