typography.css81 lines · main

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