supabase/packages/config/typography.css

/* Heading */
@utility heading-title {
  @apply scroll-m-20 text-2xl tracking-tight;
}

@utility heading-section {
  @apply scroll-m-20 text-xl;
}

@utility heading-subSection {
  @apply scroll-m-20 text-base;
}

@utility heading-default {
  @apply scroll-m-20 text-sm font-medium;
}

@utility heading-compact {
  @apply scroll-m-20 text-xs font-medium;
}

@utility heading-meta {
  @apply text-xs font-mono uppercase tracking-wider font-medium;
}

/* Text */
@utility text-default {
  @apply text-base;
}

@utility text-subTitle {
  @apply text-lg;
}

@utility text-compact {
  @apply text-xs;
}

/* Link */
@utility text-link {
  @apply text-foreground-light underline underline-offset-4 decoration-inherit hover:decoration-foreground transition-colors hover:text-foreground;
}

@utility text-link-table-cell {
  @apply truncate cursor-pointer underline underline-offset-4 decoration-foreground-muted/50 hover:decoration-foreground-lighter/80 transition-colors duration-100;
}

/* Pair with `code` elements for semantic consistency, e.g. <code className="text-code-inline"> */
@utility text-code-inline {
  @apply break-all text-xs tracking-tight bg-surface-200 border border-muted rounded-sm px-1 py-0.25 text-foreground font-medium;
}

@layer base {
  body {
    @apply text-default;
  }
  h1 {
    @apply heading-title;
  }
  h2 {
    @apply heading-section;
  }
  h3 {
    @apply heading-subSection;
  }
  h4 {
    @apply heading-default;
  }
  h5 {
    @apply heading-default;
  }
  h6 {
    @apply heading-compact;
  }
  small {
    @apply text-compact;
  }
  strong {
    @apply font-medium;
  }
}