| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081 |
- /* 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-md px-1 py-0.5 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;
- }
- }
|