variables-typography.pcss.css

/* cspell:ignore blinkmacsystemfont */

/**
 * @file
 * Typography custom properties — the canonical `--admin-font-*` token API.
 *
 * The canonical values preserve the rendered type scale from the theme's source
 * styles. Body sizes and weights were equivalent and merged directly. Heading
 * sizes use whole pixels, while the responsive page-title size remains distinct
 * from the generic h1 size. The install and maintenance page h3 size remains an
 * inline literal because it is outside the administration scale.
 *
 * Sizes are authored in px; the build's px-to-rem step converts them.
 */

@import "../base/media-queries.pcss.css";

:root {
  /* Font families. */
  --admin-font-family: inter, "Helvetica Neue", blinkmacsystemfont, -apple-system, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, sans-serif;
  --admin-font-family-serif: "Times New Roman", times, serif;

  /* Line heights. (Unitless ratios are not lengths; -label is a fixed 18px.) */
  --admin-line-height: 1.5;
  --admin-line-height-heading: 1.3;
  --admin-line-height-label: 18px;

  /*
   * Font sizes — body scale (2xs…2xl), element-mapped heading scale (h1…h6), plus
   * the page-title and quote sizes.
   */
  --admin-font-size-2xs: 12px;
  --admin-font-size-xs: 13px;
  --admin-font-size-s: 14px;
  --admin-font-size-m: 16px; /* base */
  --admin-font-size-l: 18px;
  --admin-font-size-xl: 20px;
  --admin-font-size-2xl: 36px; /* display (install/maintenance site name) */
  --admin-font-size-label: var(--admin-font-size-s);
  --admin-font-size-h1: 32px;
  --admin-font-size-h2: 28px;
  --admin-font-size-h3: 24px;
  --admin-font-size-h4: 23px;
  --admin-font-size-h5: 20px;
  --admin-font-size-h6: var(--admin-font-size-l);

  /* Page title - distinct from the generic h1 above. */
  --admin-font-size-page-title: 26px;
  --admin-font-size-quote: 1.1em;

  /* Font weights (values tuned for Inter). */
  --admin-font-weight-normal: 400;
  --admin-font-weight-semibold: 525;
  --admin-font-weight-bold: 575;
  --admin-font-weight-heavy: 625;

  @media (--admin-medium) {
    --admin-font-size-page-title: 29px;
    --admin-font-size-quote: 1.2em;
  }

  @media (--admin-widest) {
    --admin-font-size-page-title: 34px;
  }
}