typography.css 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081
  1. /* Heading */
  2. @utility heading-title {
  3. @apply scroll-m-20 text-2xl tracking-tight;
  4. }
  5. @utility heading-section {
  6. @apply scroll-m-20 text-xl;
  7. }
  8. @utility heading-subSection {
  9. @apply scroll-m-20 text-base;
  10. }
  11. @utility heading-default {
  12. @apply scroll-m-20 text-sm font-medium;
  13. }
  14. @utility heading-compact {
  15. @apply scroll-m-20 text-xs font-medium;
  16. }
  17. @utility heading-meta {
  18. @apply text-xs font-mono uppercase tracking-wider font-medium;
  19. }
  20. /* Text */
  21. @utility text-default {
  22. @apply text-base;
  23. }
  24. @utility text-subTitle {
  25. @apply text-lg;
  26. }
  27. @utility text-compact {
  28. @apply text-xs;
  29. }
  30. /* Link */
  31. @utility text-link {
  32. @apply text-foreground-light underline underline-offset-4 decoration-inherit hover:decoration-foreground transition-colors hover:text-foreground;
  33. }
  34. @utility text-link-table-cell {
  35. @apply truncate cursor-pointer underline underline-offset-4 decoration-foreground-muted/50 hover:decoration-foreground-lighter/80 transition-colors duration-100;
  36. }
  37. /* Pair with `code` elements for semantic consistency, e.g. <code className="text-code-inline"> */
  38. @utility text-code-inline {
  39. @apply break-all text-xs tracking-tight bg-surface-200 border border-muted rounded-md px-1 py-0.5 text-foreground font-medium;
  40. }
  41. @layer base {
  42. body {
  43. @apply text-default;
  44. }
  45. h1 {
  46. @apply heading-title;
  47. }
  48. h2 {
  49. @apply heading-section;
  50. }
  51. h3 {
  52. @apply heading-subSection;
  53. }
  54. h4 {
  55. @apply heading-default;
  56. }
  57. h5 {
  58. @apply heading-default;
  59. }
  60. h6 {
  61. @apply heading-compact;
  62. }
  63. small {
  64. @apply text-compact;
  65. }
  66. strong {
  67. @apply font-medium;
  68. }
  69. }