@helpwave/hightide/dist/style/uncompiled/theme/typography.css

helpwave's component and theming library

@theme {
  /*
   * text
   */
  --text-xs: calc(12 / 16 * 1rem);
  --text-xs--line-height: calc(15 / 12);

  --text-sm: calc(14 / 16 * 1rem);
  --text-sm--line-height: calc(17 / 14);

  --text-base: 1rem;
  --text-base--line-height: calc(19 / 16);

  --text-lg: calc(18 / 16 * 1rem);
  --text-lg--line-height: calc(23 / 18);

  --text-xl: calc(20 / 16 * 1rem);
  --text-xl--line-height: calc(26 / 20);

  --text-2xl: calc(22 / 16 * 1rem);
  --text-2xl--line-height: calc(28 / 22);

  --text-3xl: calc(24 / 16 * 1rem);
  --text-3xl--line-height: calc(30 / 24);

  --text-4xl: calc(32 / 16 * 1rem);
  --text-4xl--line-height: calc(40 / 32);

  --text-5xl: 3rem;
  --text-5xl--line-height: 1;

  --text-6xl: 3.75rem;
  --text-6xl--line-height: 1;

  --text-7xl: 4.5rem;
  --text-7xl--line-height: 1;

  --text-8xl: 6rem;
  --text-8xl--line-height: 1;

  --text-9xl: 8rem;
  --text-9xl--line-height: 1;

  /*
   * fonts
   */
  --font-inter: 'Inter', sans-serif;
  --font-space: 'Space Grotesk', sans-serif;
}

/* Headline */
@utility typography-headline-lg {
  @apply text-4xl font-space font-bold;
}

@utility typography-headline-md {
  @apply text-3xl font-space font-semibold;
}

@utility typography-headline {
  @apply text-2xl font-space font-bold;
}


/* Title */
@utility typography-title-lg {
  @apply text-2xl font-space font-semibold;
}

@utility typography-title-md {
  @apply text-lg font-space font-semibold;
}

@utility typography-title-sm {
  @apply text-base font-space font-medium;
}


/* Body */
@utility typography-body-lg {
  @apply text-lg font-normal;
}

@utility typography-body-md {
  @apply text-base font-normal;
}

/* Label */
@utility typography-label-lg {
  @apply text-base font-semibold;
}

@utility typography-label-md {
  @apply text-sm font-medium;
}

/* Caption */
@utility typography-caption-lg {
  @apply text-lg font-normal;
}

@utility typography-caption-md {
  @apply text-base font-medium;
}

@utility typography-caption-sm {
  @apply text-sm font-normal;
}

/* Button */
@utility typography-button-lg {
  @apply text-lg font-semibold;
}

@utility typography-button-md {
  @apply text-base font-semibold;
}

@utility typography-button-sm {
  @apply text-sm font-normal;
}