/*
  Base Styles

  Not exposed to CSS variables or JS, but used to create the variables below
  for DRYness. These are common to all typography variants, but could be
  customized not to be (e.g. if a client wants to use a different font family for
  an h2).
*/

/* https://systemfontstack.com/ */
$base-font-family: 'Inter', -apple-system, BlinkMacSystemFont, avenir next,
  avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto,
  arial, sans-serif;

/* 
  Create variables for each font size, so that a client could override if a different family is
  chosen for certain hierarchy level(s), but the default font is the same across the board. 
*/

/* Headings */
$font-display-2xl: $base-font-family;
$font-display-xl: $base-font-family;
$font-display-lg: $base-font-family;
$font-display-md: $base-font-family;
$font-display-sm: $base-font-family;
$font-display-xs: $base-font-family;

$font-style-display-2xl: normal;
$font-style-display-xl: normal;
$font-style-display-lg: normal;
$font-style-display-md: normal;
$font-style-display-sm: normal;
$font-style-display-xs: normal;

$font-size-display-2xl: 72px;
$font-size-display-xl: 60px;
$font-size-display-lg: 48px;
$font-size-display-md: 36px;
$font-size-display-sm: 30px;
$font-size-display-xs: 24px;

$line-height-display-2xl: 90px;
$line-height-display-xl: 72px;
$line-height-display-lg: 60px;
$line-height-display-md: 44px;
$line-height-display-sm: 38px;
$line-height-display-xs: 32px;

$letter-spacing-display-2xl: -0.02em;
$letter-spacing-display-xl: -0.02em;
$letter-spacing-display-lg: -0.02em;
$letter-spacing-display-md: -0.02em;
$letter-spacing-display-sm: -0.02em;
$letter-spacing-display-xs: -0.02em;

/* Body text */
$font-text-xl: $base-font-family;
$font-text-lg: $base-font-family;
$font-text-md: $base-font-family;
$font-text-sm: $base-font-family;
$font-text-xs: $base-font-family;

$font-style-text-xl: normal;
$font-style-text-lg: normal;
$font-style-text-md: normal;
$font-style-text-sm: normal;
$font-style-text-xs: normal;

$font-size-text-xl: 20px;
$font-size-text-lg: 18px;
$font-size-text-md: 16px;
$font-size-text-sm: 14px;
$font-size-text-xs: 12px;

$line-height-text-xl: 30px;
$line-height-text-lg: 28px;
$line-height-text-md: 24px;
$line-height-text-sm: 20px;
$line-height-text-xs: 18px;

$letter-spacing-text-xl: normal;
$letter-spacing-text-lg: normal;
$letter-spacing-text-md: normal;
$letter-spacing-text-sm: normal;
$letter-spacing-text-xs: normal;

$vert-rhythm-display-2xl: 24px;
$vert-rhythm-display-xl: 24px;
$vert-rhythm-display-lg: 24px;
$vert-rhythm-display-md: 16px;
$vert-rhythm-display-sm: 16px;
$vert-rhythm-display-xs: 16px;

$vert-rhythm-text-xl: 16px;
$vert-rhythm-text-lg: 16px;
$vert-rhythm-text-md: 16px;
$vert-rhythm-text-sm: 16px;
$vert-rhythm-text-xs: 8px;

/*
  A note on color: Untitled UI's Typography page removes color variations in its presentation
  of font styles. However, all other pages feature color variations. These subtle color
  distinctions look really nice in the design system, so they're encapsulated as defaults here.
  CSS variables are used, so that the color value can differ between themes at runtime.
*/

$typography: (
  /* Hyphens omitted so that dot notation can be used in JS (rather than like in `theme.typography['font-01']`) */
    fontDisplay2xl: $font-display-2xl,
  fontStyleDisplay2xl: $font-style-display-2xl,
  fontSizeDisplay2xl: $font-size-display-2xl,
  lineHeightDisplay2xl: $line-height-display-2xl,
  letterSpacingDisplay2xl: $letter-spacing-display-2xl,
  fontColorDisplay2xl: var(--fontColorDisplay2xl),
  fontDisplayXl: $font-display-xl,
  fontStyleDisplayXl: $font-style-display-xl,
  fontSizeDisplayXl: $font-size-display-xl,
  lineHeightDisplayXl: $line-height-display-xl,
  letterSpacingDisplayXl: $letter-spacing-display-xl,
  fontColorDisplayXl: var(--fontColorDisplayXl),
  fontDisplayLg: $font-display-lg,
  fontStyleDisplayLg: $font-style-display-lg,
  fontSizeDisplayLg: $font-size-display-lg,
  lineHeightDisplayLg: $line-height-display-lg,
  letterSpacingDisplayLg: $letter-spacing-display-lg,
  fontColorDisplayLg: var(--fontColorDisplayLg),
  fontDisplayMd: $font-display-md,
  fontStyleDisplayMd: $font-style-display-md,
  fontSizeDisplayMd: $font-size-display-md,
  lineHeightDisplayMd: $line-height-display-md,
  letterSpacingDisplayMd: $letter-spacing-display-md,
  fontColorDisplayMd: var(--fontColorDisplayMd),
  fontDisplaySm: $font-display-sm,
  fontStyleDisplaySm: $font-style-display-sm,
  fontSizeDisplaySm: $font-size-display-sm,
  lineHeightDisplaySm: $line-height-display-sm,
  letterSpacingDisplaySm: $letter-spacing-display-sm,
  fontColorDisplaySm: var(--fontColorDisplaySm),
  fontDisplayXs: $font-display-xs,
  fontStyleDisplayXs: $font-style-display-xs,
  fontSizeDisplayXs: $font-size-display-xs,
  lineHeightDisplayXs: $line-height-display-xs,
  letterSpacingDisplayXs: $letter-spacing-display-xs,
  fontColorDisplayXs: var(--fontColorDisplayXs),
  fontTextXl: $font-text-xl,
  fontStyleTextXl: $font-style-text-xl,
  fontSizeTextXl: $font-size-text-xl,
  lineHeightTextXl: $line-height-text-xl,
  letterSpacingTextXl: $letter-spacing-text-xl,
  fontColorTextXl: var(--fontColorTextXl),
  fontTextLg: $font-text-lg,
  fontStyleTextLg: $font-style-text-lg,
  fontSizeTextLg: $font-size-text-lg,
  lineHeightTextLg: $line-height-text-lg,
  letterSpacingTextLg: $letter-spacing-text-lg,
  fontColorTextLg: var(--fontColorTextLg),
  fontTextMd: $font-text-md,
  fontStyleTextMd: $font-style-text-md,
  fontSizeTextMd: $font-size-text-md,
  lineHeightTextMd: $line-height-text-md,
  letterSpacingTextMd: $letter-spacing-text-md,
  fontColorTextMd: var(--fontColorTextMd),
  fontTextSm: $font-text-sm,
  fontStyleTextSm: $font-style-text-sm,
  fontSizeTextSm: $font-size-text-sm,
  lineHeightTextSm: $line-height-text-sm,
  letterSpacingTextSm: $letter-spacing-text-sm,
  fontColorTextSm: var(--fontColorTextSm),
  fontTextXs: $font-text-xs,
  fontStyleTextXs: $font-style-text-xs,
  fontSizeTextXs: $font-size-text-xs,
  lineHeightTextXs: $line-height-text-xs,
  letterSpacingTextXs: $letter-spacing-text-xs,
  fontColorTextXs: var(--fontColorTextXs),
  vertRhythmDisplay2xl: $vert-rhythm-display-2xl,
  vertRhythmDisplayXl: $vert-rhythm-display-xl,
  vertRhythmDisplayLg: $vert-rhythm-display-lg,
  vertRhythmDisplayMd: $vert-rhythm-display-md,
  vertRhythmDisplaySm: $vert-rhythm-display-sm,
  vertRhythmDisplayXs: $vert-rhythm-display-xs,
  vertRhythmTextXl: $vert-rhythm-text-xl,
  vertRhythmTextLg: $vert-rhythm-text-lg,
  vertRhythmTextMd: $vert-rhythm-text-md,
  vertRhythmTextSm: $vert-rhythm-text-sm,
  vertRhythmTextXs: $vert-rhythm-text-xs
);

/* Export the SCSS map to a JS object */
:export {
  @each $name, $value in $typography {
    #{$name}: #{$value};
  }
}