variables-typography.css

Same filename and directory in other branches
  1. main core/themes/default_admin/css/_variables/variables-typography.css

Typography custom properties — the canonical `--admin-font-*` token API.

Consolidated from the former Claro `--font-*` and Gin `--gin-font-*` systems The two scales agreed on the body sizes (2xs/xs/s/m) and the weights, so those merged 1:1. Where they rendered different sizes under the same name on different elements, the canonical value is what those elements render:

  • heading scale h1–h6 = the generic <h1>–<h6> sizes (a Claro/Gin mix), rounded to whole px. The old values were a rounded 1.125-ratio modular scale, so this drops sub-pixel fractions (e.g. h1 was 2.027rem ≈ 32.43px → 32px);
  • --admin-font-size-2xl (36px) = the old Claro --font-size-xl display size;
  • --admin-font-size-page-title = Gin's responsive H1 (distinct from the generic h1), used by the page title only.

(The Claro modular-scale h3 at 1.602rem is install/maintenance-only and off the admin scale, so it stays an inline literal in those two files.)

Sizes are authored in px; the build's px-to-rem step converts them.

File

core/themes/default_admin/css/_variables/variables-typography.css

View source
  1. /*
  2. * DO NOT EDIT THIS FILE.
  3. * See the following change record for more information,
  4. * https://www.drupal.org/node/3084859
  5. * @preserve
  6. */
  7. /* cspell:ignore blinkmacsystemfont, ginter */
  8. /**
  9. * @file
  10. * Typography custom properties — the canonical `--admin-font-*` token API.
  11. *
  12. * Consolidated from the former Claro `--font-*` and Gin `--gin-font-*` systems
  13. * The two scales agreed on the body sizes (2xs/xs/s/m) and the
  14. * weights, so those merged 1:1. Where they rendered different sizes under the same
  15. * name on different elements, the canonical value is what those elements render:
  16. * - heading scale h1–h6 = the generic

    sizes (a Claro/Gin mix), rounded
  17. * to whole px. The old values were a rounded 1.125-ratio modular scale, so this
  18. * drops sub-pixel fractions (e.g. h1 was 2.027rem ≈ 32.43px → 32px);
  19. * - --admin-font-size-2xl (36px) = the old Claro --font-size-xl display size;
  20. * - --admin-font-size-page-title = Gin's responsive H1 (distinct from the generic
  21. * h1), used by the page title only.
  22. * (The Claro modular-scale h3 at 1.602rem is install/maintenance-only and off the
  23. * admin scale, so it stays an inline literal in those two files.)
  24. *
  25. * Sizes are authored in px; the build's px-to-rem step converts them.
  26. */
  27. :root {
  28. /* Font families. */
  29. --admin-font-family: ginter, inter, "Helvetica Neue", blinkmacsystemfont, -apple-system, "Segoe UI", roboto, oxygen-sans, ubuntu, cantarell, sans-serif;
  30. --admin-font-family-serif: "Times New Roman", times, serif;
  31. /* Line heights. (Unitless ratios are not lengths; -label is a fixed 18px.) */
  32. --admin-line-height: 1.5;
  33. --admin-line-height-heading: 1.3;
  34. --admin-line-height-label: 1.125rem;
  35. /*
  36. * Font sizes — body scale (2xs…2xl), element-mapped heading scale (h1…h6), plus
  37. * the page-title and quote sizes.
  38. */
  39. --admin-font-size-2xs: 0.75rem;
  40. --admin-font-size-xs: 0.8125rem;
  41. --admin-font-size-s: 0.875rem;
  42. --admin-font-size-m: 1rem; /* base */
  43. --admin-font-size-l: 1.125rem;
  44. --admin-font-size-xl: 1.25rem;
  45. --admin-font-size-2xl: 2.25rem; /* display (install/maintenance site name) */
  46. --admin-font-size-label: var(--admin-font-size-s);
  47. --admin-font-size-h1: 2rem;
  48. --admin-font-size-h2: 1.75rem;
  49. --admin-font-size-h3: 1.5rem;
  50. --admin-font-size-h4: 1.4375rem;
  51. --admin-font-size-h5: 1.25rem;
  52. --admin-font-size-h6: var(--admin-font-size-l);
  53. /* Page title - distinct from the generic h1 above. */
  54. --admin-font-size-page-title: 1.625rem;
  55. --admin-font-size-quote: 1.1em;
  56. /* Font weights (values tuned for Inter). */
  57. --admin-font-weight-normal: 400;
  58. --admin-font-weight-semibold: 525;
  59. --admin-font-weight-bold: 575;
  60. --admin-font-weight-heavy: 625;
  61. @media (min-width: 61em) {
  62. --admin-font-size-page-title: 1.8125rem;
  63. --admin-font-size-quote: 1.2em;
  64. }
  65. @media (min-width: 90em) {
  66. --admin-font-size-page-title: 2.125rem;
  67. }
  68. }

Buggy or inaccurate documentation? Please file an issue. Need support? Need help programming? Connect with the Drupal community.