@heycar-uikit/core/vars/typography.css

The React UI library from HeyCar

:root {
  /* Font families */
  --font-family-system: Objektiv, sans-serif, 'Helvetica Neue', Helvetica, Arial;

  /* Font weights */
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-bold: 600;
  --font-weight-xbold: 800;
}

/*
  Heading
*/
@define-mixin typography-display {
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -2px;
  font-family: var(--font-family-system);
  font-weight: var(--font-weight-xbold);

  @media (--tablet) {
    font-size: 60px;
    line-height: 68px;
    letter-spacing: -2.5px;
  }
}

@define-mixin typography-display-2 {
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -2px;
  font-family: var(--font-family-system);
  font-weight: var(--font-weight-bold);

  @media (--tablet) {
    font-size: 60px;
    line-height: 68px;
    letter-spacing: -2.5px;
  }
}

@define-mixin typography-heading-1 {
  font-size: 48px;
  line-height: 56px;
  letter-spacing: -2px;
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-system);
}

@define-mixin typography-heading-1_mobile {
  @mixin typography-heading-1;
  letter-spacing: -0.5px;
  font-size: 32px;
  line-height: 40px;
}

@define-mixin typography-heading-2 {
  font-size: 32px;
  letter-spacing: -0.5px;
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-system);
}

@define-mixin typography-heading-2_mobile {
  @mixin typography-heading-2;
  font-size: 24px;
}

@define-mixin typography-heading-3 {
  font-size: 28px;
  letter-spacing: -0.5px;
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-system);
}

@define-mixin typography-heading-3_mobile {
  @mixin typography-heading-3;
  font-size: 24px;
}

@define-mixin typography-heading-4 {
  font-size: 24px;
  letter-spacing: -0.5px;
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-system);
}

@define-mixin typography-heading-4_mobile {
  @mixin typography-heading-4;
  letter-spacing: 0;
  font-size: 20px;
}

@define-mixin typography-heading-5 {
  font-size: 20px;
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-system);
}

@define-mixin typography-heading-5_mobile {
  @mixin typography-heading-5;
  font-size: 16px;
}
@define-mixin typography-heading-6 {
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-system);
}

/*
  Sub-Heading
*/
@define-mixin typography-subheading-1 {
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-system);
}

@define-mixin typography-subheading-2 {
  font-size: 16px;
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-system);
}

@define-mixin typography-subheading-3 {
  font-size: 14px;
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-system);
}

@define-mixin typography-subheading-4 {
  font-size: 16px;
  font-weight: var(--font-weight-regular);
  font-family: var(--font-family-system);
}

/*
  Body
*/
@define-mixin typography-body-1 {
  font-size: 16px;
  line-height: 26px;
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-system);
}

@define-mixin typography-body-2 {
  font-size: 14px;
  line-height: 22px;
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-system);
}

@define-mixin typography-body-3 {
  font-size: 16px;
  line-height: 26px;
  font-weight: var(--font-weight-regular);
  font-family: var(--font-family-system);
}

@define-mixin typography-body-4 {
  font-size: 14px;
  line-height: 22px;
  font-weight: var(--font-weight-regular);
  font-family: var(--font-family-system);
}

/*
  Caption
*/
@define-mixin typography-caption-1 {
  font-size: 12px;
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-system);
}

@define-mixin typography-caption-2 {
  font-size: 12px;
  line-height: 18px;
  font-weight: var(--font-weight-regular);
  font-family: var(--font-family-system);
}

@define-mixin typography-caption-3 {
  font-size: 10px;
  font-weight: var(--font-weight-bold);
  font-family: var(--font-family-system);
}

@define-mixin typography-caption-4 {
  font-size: 10px;
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-system);
}

@define-mixin typography-caption-5 {
  font-size: 10px;
  font-weight: var(--font-weight-regular);
  font-family: var(--font-family-system);
}

/*
  Overline
*/
@define-mixin typography-overline-1 {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-system);
}

@define-mixin typography-overline-2 {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  font-weight: var(--font-weight-medium);
  font-family: var(--font-family-system);
}

/*
  Button
*/
@define-mixin typography-button-1 {
  font-size: 16px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.2px;
  font-family: var(--font-family-system);
}

@define-mixin typography-button-2 {
  font-size: 14px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.2px;
  font-family: var(--font-family-system);
}

@define-mixin typography-button-3 {
  font-size: 12px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.2px;
  font-family: var(--font-family-system);
}

/*
  Button Old - DO NOT USE
*/
@define-mixin button_large__bold {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2px;
  font-family: var(--font-family-system);
}

@define-mixin button_medium__bold {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.2px;
  font-family: var(--font-family-system);
}

@define-mixin button_small__medium {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2px;
  font-family: var(--font-family-system);
}