Typography.module.css96 lines · main

1	/* marker fix */
2	.sbui-typography li::marker {
3	display: none;
4	content: '';
5	}
6
7	.sbui-typography-container {
8	@apply prose prose-sm lg:prose-lg;
9	}
10
11	.sbui-typography {
12	@apply text-base;
13	@apply text-gray-400;
14	}
15
16	/* .sbui-typography--prose-sm {
17	@apply prose prose-sm;
18	}
19
20	.sbui-typography--prose-lg {
21	@apply prose prose-lg;
22	}
23
24	.sbui-typography--prose-xl {
25	@apply prose prose-xl;
26	}
27
28	.sbui-typography--prose-2xl {
29	@apply prose prose-2xl;
30	} */
31
32	.sbui-typography code {
33	padding: 0.05em 0.4em 0.05em;
34	background: hsla(0, 0%, 58.8%, 0.1);
35	border: 1px solid hsla(0, 0%, 39.2%, 0.2);
36	border-radius: 3px;
37	}
38
39	/*
40	dark mode styles
41
42	default styles are handled by tailwind config
43	*/
44
45	.dark .sbui-typography {
46	@apply text-gray-200;
47	}
48
49	.dark .sbui-typography h1 {
50	@apply text-white;
51	}
52
53	.dark .sbui-typography h2 {
54	@apply text-white;
55	}
56
57	.dark .sbui-typography h3 {
58	@apply text-white;
59	}
60
61	.dark .sbui-typography h4 {
62	@apply text-white;
63	}
64
65	.dark .sbui-typography h5 {
66	@apply text-white;
67	}
68
69	.dark .sbui-typography strong {
70	@apply text-white;
71	}
72
73	.dark .sbui-typography li::before {
74	@apply text-gray-300;
75	}
76
77	.dark .sbui-typography a {
78	@apply text-white;
79	}
80
81	.dark .sbui-typography blockquote {
82	@apply text-white;
83	}
84
85	.dark .sbui-typography code {
86	color: white;
87	}
88
89	.dark .sbui-typography figcaption {
90	@apply text-gray-600;
91	}
92
93	.dark .sbui-typography::selection {
94	/* @apply bg-brand-300; */
95	backgroundcolor: '#6f7bb635';
96	}