[Summary view] [Print] [Text view]

   1  // Gutenberg Font-size utility classes
   2  :root {
   3  
   4      .is-extra-small-text,
   5      .has-extra-small-font-size {
   6          font-size: var(--global--font-size-xs);
   7      }
   8  
   9      .is-small-text,
  10      .has-small-font-size {
  11          font-size: var(--global--font-size-sm);
  12      }
  13  
  14      .is-regular-text,
  15      .has-regular-font-size,
  16      .is-normal-font-size,
  17      .has-normal-font-size,
  18      .has-medium-font-size {
  19          font-size: var(--global--font-size-base);
  20      }
  21  
  22      .is-large-text,
  23      .has-large-font-size {
  24          font-size: var(--global--font-size-lg);
  25          line-height: var(--global--line-height-heading);
  26      }
  27  
  28      .is-larger-text,
  29      .has-larger-font-size,
  30      .is-extra-large-text,
  31      .has-extra-large-font-size {
  32          font-size: var(--global--font-size-xl);
  33          line-height: var(--global--line-height-heading);
  34      }
  35  
  36      .is-huge-text,
  37      .has-huge-font-size {
  38          font-size: var(--global--font-size-xxl);
  39          line-height: var(--global--line-height-heading);
  40  
  41          // This size is meant to mimic the page titles, so the font weight is reduced to match.
  42          font-weight: var(--heading--font-weight-page-title);
  43      }
  44  
  45      .is-gigantic-text,
  46      .has-gigantic-font-size {
  47          font-size: var(--global--font-size-xxxl);
  48          line-height: var(--global--line-height-heading);
  49  
  50          // This size is meant to mimic the page titles, so the font weight is reduced to match.
  51          font-weight: var(--heading--font-weight-page-title);
  52      }
  53  }