eslint/docs/src/assets/scss/tokens/typography.scss

   1 /* @link https://utopia.fyi/type/calculator?c=320,16,1.125,1280,16,1.25,6,2,&s=0.75|0.5|0.25,1.5|2|3|4|6,s-l */
   2
   3 :root {
   4     --fluid-min-width: 320;
   5     --fluid-max-width: 1280;
   6
   7     --fluid-screen: 100vw;
   8     --fluid-bp: calc((var(--fluid-screen) - var(--fluid-min-width) / 16 * 1rem) / (var(--fluid-max-width) - var(--fluid-min-width)));
   9 }
  10
  11 @media screen and (min-width: 1280px) {
  12     :root {
  13         --fluid-screen: calc(var(--fluid-max-width) * 1px);
  14     }
  15 }
  16
  17 :root {
  18     --f--2-min: 12.64;
  19     --f--2-max: 10.24;
  20     --step--2: calc(((var(--f--2-min) / 16) * 1rem) + (var(--f--2-max) - var(--f--2-min)) * var(--fluid-bp));
  21
  22     --f--1-min: 14.22;
  23     --f--1-max: 12.80;
  24     --step--1: calc(((var(--f--1-min) / 16) * 1rem) + (var(--f--1-max) - var(--f--1-min)) * var(--fluid-bp));
  25
  26     --f-0-min: 16.00;
  27     --f-0-max: 16.00;
  28     --step-0: calc(((var(--f-0-min) / 16) * 1rem) + (var(--f-0-max) - var(--f-0-min)) * var(--fluid-bp));
  29
  30     --f-1-min: 18.00;
  31     --f-1-max: 20.00;
  32     --step-1: calc(((var(--f-1-min) / 16) * 1rem) + (var(--f-1-max) - var(--f-1-min)) * var(--fluid-bp));
  33
  34     --f-2-min: 20.25;
  35     --f-2-max: 25.00;
  36     --step-2: calc(((var(--f-2-min) / 16) * 1rem) + (var(--f-2-max) - var(--f-2-min)) * var(--fluid-bp));
  37
  38     --f-3-min: 22.78;
  39     --f-3-max: 31.25;
  40     --step-3: calc(((var(--f-3-min) / 16) * 1rem) + (var(--f-3-max) - var(--f-3-min)) * var(--fluid-bp));
  41
  42     --f-4-min: 25.63;
  43     --f-4-max: 39.06;
  44     --step-4: calc(((var(--f-4-min) / 16) * 1rem) + (var(--f-4-max) - var(--f-4-min)) * var(--fluid-bp));
  45
  46     --f-5-min: 28.83;
  47     --f-5-max: 48.83;
  48     --step-5: calc(((var(--f-5-min) / 16) * 1rem) + (var(--f-5-max) - var(--f-5-min)) * var(--fluid-bp));
  49
  50     --f-6-min: 32.44;
  51     --f-6-max: 61.04;
  52     --step-6: calc(((var(--f-6-min) / 16) * 1rem) + (var(--f-6-max) - var(--f-6-min)) * var(--fluid-bp));
  53 }
  54
  55 :root {
  56     --mono-font: "Mono Punctuators", "Space Mono", monospace;
  57     --text-font: "Inter",
  58             -apple-system,
  59             BlinkMacSystemFont,
  60             "Segoe UI",
  61             Roboto,
  62             Helvetica,
  63             Arial,
  64             sans-serif,
  65             "Apple Color Emoji",
  66             "Segoe UI Emoji",
  67             "Segoe UI Symbol";
  68     --display-font: "Space Grotesk",
  69             -apple-system,
  70             BlinkMacSystemFont,
  71             "Segoe UI",
  72             Roboto,
  73             Helvetica,
  74             Arial,
  75             sans-serif,
  76             "Apple Color Emoji",
  77             "Segoe UI Emoji",
  78             "Segoe UI Symbol";
  79 }