354 lines
12 KiB
TypeScript
354 lines
12 KiB
TypeScript
import { type PluginUtils } from "tailwindcss/types/config";
|
|
|
|
export default function typographyStyles({ theme }: PluginUtils) {
|
|
return {
|
|
DEFAULT: {
|
|
css: {
|
|
"--tw-prose-body": theme("colors.zinc.700"),
|
|
"--tw-prose-headings": theme("colors.zinc.900"),
|
|
"--tw-prose-links": theme("colors.emerald.500"),
|
|
"--tw-prose-links-hover": theme("colors.emerald.600"),
|
|
"--tw-prose-links-underline": theme("colors.emerald.500 / 0.3"),
|
|
"--tw-prose-bold": theme("colors.zinc.900"),
|
|
"--tw-prose-counters": theme("colors.zinc.500"),
|
|
"--tw-prose-bullets": theme("colors.zinc.300"),
|
|
"--tw-prose-hr": theme("colors.zinc.900 / 0.05"),
|
|
"--tw-prose-quotes": theme("colors.zinc.900"),
|
|
"--tw-prose-quote-borders": theme("colors.zinc.200"),
|
|
"--tw-prose-captions": theme("colors.zinc.500"),
|
|
"--tw-prose-code": theme("colors.zinc.900"),
|
|
"--tw-prose-code-bg": theme("colors.zinc.100"),
|
|
"--tw-prose-code-ring": theme("colors.zinc.300"),
|
|
"--tw-prose-th-borders": theme("colors.zinc.300"),
|
|
"--tw-prose-td-borders": theme("colors.zinc.200"),
|
|
|
|
"--tw-prose-invert-body": theme("colors.zinc.400"),
|
|
"--tw-prose-invert-headings": theme("colors.white"),
|
|
"--tw-prose-invert-links": theme("colors.emerald.400"),
|
|
"--tw-prose-invert-links-hover": theme("colors.emerald.500"),
|
|
"--tw-prose-invert-links-underline": theme("colors.emerald.500 / 0.3"),
|
|
"--tw-prose-invert-bold": theme("colors.white"),
|
|
"--tw-prose-invert-counters": theme("colors.zinc.400"),
|
|
"--tw-prose-invert-bullets": theme("colors.zinc.600"),
|
|
"--tw-prose-invert-hr": theme("colors.white / 0.05"),
|
|
"--tw-prose-invert-quotes": theme("colors.zinc.100"),
|
|
"--tw-prose-invert-quote-borders": theme("colors.zinc.700"),
|
|
"--tw-prose-invert-captions": theme("colors.zinc.400"),
|
|
"--tw-prose-invert-code": theme("colors.white"),
|
|
"--tw-prose-invert-code-bg": theme("colors.zinc.700 / 0.15"),
|
|
"--tw-prose-invert-code-ring": theme("colors.white / 0.1"),
|
|
"--tw-prose-invert-th-borders": theme("colors.zinc.600"),
|
|
"--tw-prose-invert-td-borders": theme("colors.zinc.700"),
|
|
|
|
// Base
|
|
color: "var(--tw-prose-body)",
|
|
fontSize: theme("fontSize.sm")[0],
|
|
lineHeight: theme("lineHeight.7"),
|
|
|
|
// Text
|
|
p: {
|
|
marginTop: theme("spacing.6"),
|
|
marginBottom: theme("spacing.6"),
|
|
},
|
|
'[class~="lead"]': {
|
|
fontSize: theme("fontSize.base")[0],
|
|
...theme("fontSize.base")[1],
|
|
},
|
|
|
|
// Lists
|
|
ol: {
|
|
listStyleType: "decimal",
|
|
marginTop: theme("spacing.5"),
|
|
marginBottom: theme("spacing.5"),
|
|
paddingLeft: "1.625rem",
|
|
},
|
|
'ol[type="A"]': {
|
|
listStyleType: "upper-alpha",
|
|
},
|
|
'ol[type="a"]': {
|
|
listStyleType: "lower-alpha",
|
|
},
|
|
'ol[type="A" s]': {
|
|
listStyleType: "upper-alpha",
|
|
},
|
|
'ol[type="a" s]': {
|
|
listStyleType: "lower-alpha",
|
|
},
|
|
'ol[type="I"]': {
|
|
listStyleType: "upper-roman",
|
|
},
|
|
'ol[type="i"]': {
|
|
listStyleType: "lower-roman",
|
|
},
|
|
'ol[type="I" s]': {
|
|
listStyleType: "upper-roman",
|
|
},
|
|
'ol[type="i" s]': {
|
|
listStyleType: "lower-roman",
|
|
},
|
|
'ol[type="1"]': {
|
|
listStyleType: "decimal",
|
|
},
|
|
ul: {
|
|
listStyleType: "disc",
|
|
marginTop: theme("spacing.5"),
|
|
marginBottom: theme("spacing.5"),
|
|
paddingLeft: "1.625rem",
|
|
},
|
|
li: {
|
|
marginTop: theme("spacing.2"),
|
|
marginBottom: theme("spacing.2"),
|
|
},
|
|
":is(ol, ul) > li": {
|
|
paddingLeft: theme("spacing[1.5]"),
|
|
},
|
|
"ol > li::marker": {
|
|
fontWeight: "400",
|
|
color: "var(--tw-prose-counters)",
|
|
},
|
|
"ul > li::marker": {
|
|
color: "var(--tw-prose-bullets)",
|
|
},
|
|
"> ul > li p": {
|
|
marginTop: theme("spacing.3"),
|
|
marginBottom: theme("spacing.3"),
|
|
},
|
|
"> ul > li > *:first-child": {
|
|
marginTop: theme("spacing.5"),
|
|
},
|
|
"> ul > li > *:last-child": {
|
|
marginBottom: theme("spacing.5"),
|
|
},
|
|
"> ol > li > *:first-child": {
|
|
marginTop: theme("spacing.5"),
|
|
},
|
|
"> ol > li > *:last-child": {
|
|
marginBottom: theme("spacing.5"),
|
|
},
|
|
"ul ul, ul ol, ol ul, ol ol": {
|
|
marginTop: theme("spacing.3"),
|
|
marginBottom: theme("spacing.3"),
|
|
},
|
|
|
|
// Horizontal rules
|
|
hr: {
|
|
borderColor: "var(--tw-prose-hr)",
|
|
borderTopWidth: 1,
|
|
marginTop: theme("spacing.16"),
|
|
marginBottom: theme("spacing.16"),
|
|
maxWidth: "none",
|
|
marginLeft: `calc(-1 * ${theme("spacing.4")})`,
|
|
marginRight: `calc(-1 * ${theme("spacing.4")})`,
|
|
"@screen sm": {
|
|
marginLeft: `calc(-1 * ${theme("spacing.6")})`,
|
|
marginRight: `calc(-1 * ${theme("spacing.6")})`,
|
|
},
|
|
"@screen lg": {
|
|
marginLeft: `calc(-1 * ${theme("spacing.8")})`,
|
|
marginRight: `calc(-1 * ${theme("spacing.8")})`,
|
|
},
|
|
},
|
|
|
|
// Quotes
|
|
blockquote: {
|
|
fontWeight: "500",
|
|
fontStyle: "italic",
|
|
color: "var(--tw-prose-quotes)",
|
|
borderLeftWidth: "0.25rem",
|
|
borderLeftColor: "var(--tw-prose-quote-borders)",
|
|
quotes: '"\\201C""\\201D""\\2018""\\2019"',
|
|
marginTop: theme("spacing.8"),
|
|
marginBottom: theme("spacing.8"),
|
|
paddingLeft: theme("spacing.5"),
|
|
},
|
|
"blockquote p:first-of-type::before": {
|
|
content: "open-quote",
|
|
},
|
|
"blockquote p:last-of-type::after": {
|
|
content: "close-quote",
|
|
},
|
|
|
|
// Headings
|
|
h1: {
|
|
color: "var(--tw-prose-headings)",
|
|
fontWeight: "700",
|
|
fontSize: theme("fontSize.2xl")[0],
|
|
...theme("fontSize.2xl")[1],
|
|
marginBottom: theme("spacing.2"),
|
|
},
|
|
h2: {
|
|
color: "var(--tw-prose-headings)",
|
|
fontWeight: "600",
|
|
fontSize: theme("fontSize.lg")[0],
|
|
...theme("fontSize.lg")[1],
|
|
marginTop: theme("spacing.16"),
|
|
marginBottom: theme("spacing.2"),
|
|
},
|
|
h3: {
|
|
color: "var(--tw-prose-headings)",
|
|
fontSize: theme("fontSize.base")[0],
|
|
...theme("fontSize.base")[1],
|
|
fontWeight: "600",
|
|
marginTop: theme("spacing.10"),
|
|
marginBottom: theme("spacing.2"),
|
|
},
|
|
|
|
// Media
|
|
// img: {
|
|
// marginTop: theme("spacing.2"),
|
|
// marginBottom: theme("spacing.2"),
|
|
// },
|
|
"video, figure": {
|
|
marginTop: theme("spacing.8"),
|
|
marginBottom: theme("spacing.8"),
|
|
},
|
|
"figure > *": {
|
|
marginTop: "0",
|
|
marginBottom: "0",
|
|
},
|
|
figcaption: {
|
|
color: "var(--tw-prose-captions)",
|
|
fontSize: theme("fontSize.xs")[0],
|
|
...theme("fontSize.xs")[1],
|
|
marginTop: theme("spacing.2"),
|
|
},
|
|
|
|
// Tables
|
|
table: {
|
|
width: "100%",
|
|
tableLayout: "auto",
|
|
textAlign: "left",
|
|
marginTop: theme("spacing.8"),
|
|
marginBottom: theme("spacing.8"),
|
|
lineHeight: theme("lineHeight.6"),
|
|
},
|
|
thead: {
|
|
borderBottomWidth: "1px",
|
|
borderBottomColor: "var(--tw-prose-th-borders)",
|
|
},
|
|
"thead th": {
|
|
color: "var(--tw-prose-headings)",
|
|
fontWeight: "600",
|
|
verticalAlign: "bottom",
|
|
paddingRight: theme("spacing.2"),
|
|
paddingBottom: theme("spacing.2"),
|
|
paddingLeft: theme("spacing.2"),
|
|
},
|
|
"thead th:first-child": {
|
|
paddingLeft: "0",
|
|
},
|
|
"thead th:last-child": {
|
|
paddingRight: "0",
|
|
},
|
|
"tbody tr": {
|
|
borderBottomWidth: "1px",
|
|
borderBottomColor: "var(--tw-prose-td-borders)",
|
|
},
|
|
"tbody tr:last-child": {
|
|
borderBottomWidth: "0",
|
|
},
|
|
"tbody td": {
|
|
verticalAlign: "baseline",
|
|
},
|
|
tfoot: {
|
|
borderTopWidth: "1px",
|
|
borderTopColor: "var(--tw-prose-th-borders)",
|
|
},
|
|
"tfoot td": {
|
|
verticalAlign: "top",
|
|
},
|
|
":is(tbody, tfoot) td": {
|
|
paddingTop: theme("spacing.2"),
|
|
paddingRight: theme("spacing.2"),
|
|
paddingBottom: theme("spacing.2"),
|
|
paddingLeft: theme("spacing.2"),
|
|
},
|
|
":is(tbody, tfoot) td:first-child": {
|
|
paddingLeft: "0",
|
|
},
|
|
":is(tbody, tfoot) td:last-child": {
|
|
paddingRight: "0",
|
|
},
|
|
|
|
// Inline elements
|
|
a: {
|
|
color: "var(--tw-prose-links)",
|
|
textDecoration: "underline transparent",
|
|
fontWeight: "500",
|
|
transitionProperty: "color, text-decoration-color",
|
|
transitionDuration: theme("transitionDuration.DEFAULT"),
|
|
transitionTimingFunction: theme("transitionTimingFunction.DEFAULT"),
|
|
"&:hover": {
|
|
color: "var(--tw-prose-links-hover)",
|
|
textDecorationColor: "var(--tw-prose-links-underline)",
|
|
},
|
|
},
|
|
":is(h1, h2, h3) a": {
|
|
fontWeight: "inherit",
|
|
},
|
|
strong: {
|
|
color: "var(--tw-prose-bold)",
|
|
fontWeight: "600",
|
|
},
|
|
":is(a, blockquote, thead th) strong": {
|
|
color: "inherit",
|
|
},
|
|
code: {
|
|
color: "var(--tw-prose-code)",
|
|
borderRadius: theme("borderRadius.lg"),
|
|
paddingTop: theme("padding.1"),
|
|
paddingRight: theme("padding[1.5]"),
|
|
paddingBottom: theme("padding.1"),
|
|
paddingLeft: theme("padding[1.5]"),
|
|
boxShadow: "inset 0 0 0 1px var(--tw-prose-code-ring)",
|
|
backgroundColor: "var(--tw-prose-code-bg)",
|
|
fontSize: theme("fontSize.2xs"),
|
|
},
|
|
":is(a, h1, h2, h3, blockquote, thead th) code": {
|
|
color: "inherit",
|
|
},
|
|
"h2 code": {
|
|
fontSize: theme("fontSize.base")[0],
|
|
fontWeight: "inherit",
|
|
},
|
|
"h3 code": {
|
|
fontSize: theme("fontSize.sm")[0],
|
|
fontWeight: "inherit",
|
|
},
|
|
|
|
// Overrides
|
|
":is(h1, h2, h3) + *": {
|
|
marginTop: "0",
|
|
},
|
|
"> :first-child": {
|
|
marginTop: "0 !important",
|
|
},
|
|
"> :last-child": {
|
|
marginBottom: "0 !important",
|
|
},
|
|
},
|
|
},
|
|
invert: {
|
|
css: {
|
|
"--tw-prose-body": "var(--tw-prose-invert-body)",
|
|
"--tw-prose-headings": "var(--tw-prose-invert-headings)",
|
|
"--tw-prose-links": "var(--tw-prose-invert-links)",
|
|
"--tw-prose-links-hover": "var(--tw-prose-invert-links-hover)",
|
|
"--tw-prose-links-underline": "var(--tw-prose-invert-links-underline)",
|
|
"--tw-prose-bold": "var(--tw-prose-invert-bold)",
|
|
"--tw-prose-counters": "var(--tw-prose-invert-counters)",
|
|
"--tw-prose-bullets": "var(--tw-prose-invert-bullets)",
|
|
"--tw-prose-hr": "var(--tw-prose-invert-hr)",
|
|
"--tw-prose-quotes": "var(--tw-prose-invert-quotes)",
|
|
"--tw-prose-quote-borders": "var(--tw-prose-invert-quote-borders)",
|
|
"--tw-prose-captions": "var(--tw-prose-invert-captions)",
|
|
"--tw-prose-code": "var(--tw-prose-invert-code)",
|
|
"--tw-prose-code-bg": "var(--tw-prose-invert-code-bg)",
|
|
"--tw-prose-code-ring": "var(--tw-prose-invert-code-ring)",
|
|
"--tw-prose-th-borders": "var(--tw-prose-invert-th-borders)",
|
|
"--tw-prose-td-borders": "var(--tw-prose-invert-td-borders)",
|
|
},
|
|
},
|
|
};
|
|
}
|