mirror of
https://github.com/TrezOne/congo-hindi-gujarati.git
synced 2026-06-15 04:52:55 -04:00
♻️ Adopt new Tailwind typography theming
This commit is contained in:
James Panther
+88
-161
@@ -20,7 +20,6 @@ module.exports = {
|
||||
theme: {
|
||||
extend: {
|
||||
colors: {
|
||||
transparent: "transparent",
|
||||
neutral: {
|
||||
DEFAULT: varWithOpacity("--color-neutral"),
|
||||
50: varWithOpacity("--color-neutral-50"),
|
||||
@@ -61,172 +60,100 @@ module.exports = {
|
||||
},
|
||||
typography: (theme) => ({
|
||||
DEFAULT: {
|
||||
css: [
|
||||
{
|
||||
color: theme("colors.neutral.700"),
|
||||
a: {
|
||||
color: theme("colors.primary.700"),
|
||||
textDecoration: "underline",
|
||||
textDecorationColor: theme("colors.primary.300"),
|
||||
fontWeight: "500",
|
||||
"&:hover": {
|
||||
color: `${theme("colors.neutral.DEFAULT")} !important`,
|
||||
textDecoration: "none !important",
|
||||
backgroundColor: `${theme("colors.primary.600")} !important`,
|
||||
borderRadius: "0.09rem",
|
||||
},
|
||||
},
|
||||
strong: {
|
||||
color: theme("colors.neutral.900"),
|
||||
},
|
||||
"ol > li::before": {
|
||||
color: theme("colors.neutral.800"),
|
||||
},
|
||||
"ul > li::before": {
|
||||
backgroundColor: theme("colors.neutral.500"),
|
||||
},
|
||||
hr: {
|
||||
borderColor: theme("colors.neutral.200"),
|
||||
},
|
||||
blockquote: {
|
||||
color: theme("colors.neutral.800"),
|
||||
borderLeftColor: theme("colors.primary.200"),
|
||||
borderRightColor: theme("colors.primary.200"),
|
||||
},
|
||||
h1: {
|
||||
color: theme("colors.neutral.900"),
|
||||
position: "relative",
|
||||
},
|
||||
h2: {
|
||||
color: theme("colors.neutral.800"),
|
||||
position: "relative",
|
||||
},
|
||||
h3: {
|
||||
color: theme("colors.neutral.800"),
|
||||
position: "relative",
|
||||
},
|
||||
h4: {
|
||||
color: theme("colors.neutral.800"),
|
||||
position: "relative",
|
||||
},
|
||||
code: {
|
||||
color: theme("colors.secondary.700"),
|
||||
},
|
||||
"a code": {
|
||||
color: theme("colors.secondary.700"),
|
||||
},
|
||||
"pre code": {
|
||||
color: theme("colors.neutral.700"),
|
||||
},
|
||||
pre: {
|
||||
color: theme("colors.neutral.700"),
|
||||
backgroundColor: theme("colors.neutral.50"),
|
||||
},
|
||||
"pre code": {
|
||||
color: theme("colors.neutral.700"),
|
||||
},
|
||||
"thead th": {
|
||||
color: theme("colors.neutral.800"),
|
||||
},
|
||||
"thead tr": {
|
||||
borderBottomColor: theme("colors.neutral.500"),
|
||||
},
|
||||
"tbody tr": {
|
||||
borderBottomColor: theme("colors.neutral.300"),
|
||||
},
|
||||
kbd: {
|
||||
backgroundColor: theme("colors.neutral.200"),
|
||||
padding: "0.1rem 0.4rem",
|
||||
borderRadius: "0.25rem",
|
||||
fontSize: "0.9rem",
|
||||
fontWeight: "600",
|
||||
},
|
||||
mark: {
|
||||
backgroundColor: theme("colors.secondary.200"),
|
||||
padding: "0.1rem 0.2rem",
|
||||
borderRadius: "0.12rem",
|
||||
css: {
|
||||
"--tw-prose-body": theme("colors.neutral.700"),
|
||||
"--tw-prose-headings": theme("colors.neutral.800"),
|
||||
"--tw-prose-lead": theme("colors.neutral.500"),
|
||||
"--tw-prose-links": theme("colors.primary.700"),
|
||||
"--tw-prose-bold": theme("colors.neutral.900"),
|
||||
"--tw-prose-counters": theme("colors.neutral.800"),
|
||||
"--tw-prose-bullets": theme("colors.neutral.500"),
|
||||
"--tw-prose-hr": theme("colors.neutral.200"),
|
||||
"--tw-prose-quotes": theme("colors.neutral.700"),
|
||||
"--tw-prose-quote-borders": theme("colors.primary.200"),
|
||||
"--tw-prose-captions": theme("colors.neutral.500"),
|
||||
"--tw-prose-code": theme("colors.secondary.700"),
|
||||
"--tw-prose-pre-code": theme("colors.neutral.700"),
|
||||
"--tw-prose-pre-bg": theme("colors.neutral.50"),
|
||||
"--tw-prose-th-borders": theme("colors.neutral.500"),
|
||||
"--tw-prose-td-borders": theme("colors.neutral.300"),
|
||||
"--tw-prose-invert-body": theme("colors.neutral.300"),
|
||||
"--tw-prose-invert-headings": theme("colors.neutral.50"),
|
||||
"--tw-prose-invert-lead": theme("colors.neutral.500"),
|
||||
"--tw-prose-invert-links": theme("colors.primary.400"),
|
||||
"--tw-prose-invert-bold": theme("colors.neutral.DEFAULT"),
|
||||
"--tw-prose-invert-counters": theme("colors.neutral.400"),
|
||||
"--tw-prose-invert-bullets": theme("colors.neutral.600"),
|
||||
"--tw-prose-invert-hr": theme("colors.neutral.500"),
|
||||
"--tw-prose-invert-quotes": theme("colors.neutral.200"),
|
||||
"--tw-prose-invert-quote-borders": theme("colors.primary.900"),
|
||||
"--tw-prose-invert-captions": theme("colors.neutral.400"),
|
||||
"--tw-prose-invert-code": theme("colors.secondary.400"),
|
||||
"--tw-prose-invert-pre-code": theme("colors.neutral.200"),
|
||||
"--tw-prose-invert-pre-bg": theme("colors.neutral.700"),
|
||||
"--tw-prose-invert-th-borders": theme("colors.neutral.500"),
|
||||
"--tw-prose-invert-td-borders": theme("colors.neutral.700"),
|
||||
a: {
|
||||
textDecoration: "underline",
|
||||
textDecorationColor: theme("colors.primary.300"),
|
||||
fontWeight: "500",
|
||||
"&:hover": {
|
||||
color: `${theme("colors.neutral.DEFAULT")} !important`,
|
||||
textDecoration: "none !important",
|
||||
backgroundColor: `${theme("colors.primary.600")} !important`,
|
||||
borderRadius: "0.09rem",
|
||||
},
|
||||
},
|
||||
],
|
||||
"a code": {
|
||||
color: "var(--tw-prose-code)",
|
||||
},
|
||||
h1: {
|
||||
position: "relative",
|
||||
},
|
||||
h2: {
|
||||
position: "relative",
|
||||
},
|
||||
h3: {
|
||||
position: "relative",
|
||||
},
|
||||
h4: {
|
||||
position: "relative",
|
||||
},
|
||||
kbd: {
|
||||
backgroundColor: theme("colors.neutral.200"),
|
||||
padding: "0.1rem 0.4rem",
|
||||
borderRadius: "0.25rem",
|
||||
fontSize: "0.9rem",
|
||||
fontWeight: "600",
|
||||
},
|
||||
mark: {
|
||||
color: theme("colors.neutral.800"),
|
||||
backgroundColor: theme("colors.secondary.200"),
|
||||
padding: "0.1rem 0.2rem",
|
||||
borderRadius: "0.12rem",
|
||||
},
|
||||
},
|
||||
},
|
||||
light: {
|
||||
css: [
|
||||
{
|
||||
color: theme("colors.neutral.300"),
|
||||
a: {
|
||||
color: theme("colors.primary.400"),
|
||||
textDecorationColor: theme("colors.neutral.500"),
|
||||
"&:hover": {
|
||||
color: `${theme("colors.neutral.DEFAULT")} !important`,
|
||||
textDecoration: "none !important",
|
||||
},
|
||||
},
|
||||
strong: {
|
||||
color: theme("colors.neutral.DEFAULT"),
|
||||
},
|
||||
"ol > li::before": {
|
||||
color: theme("colors.neutral.400"),
|
||||
},
|
||||
"ul > li::before": {
|
||||
backgroundColor: theme("colors.neutral.600"),
|
||||
},
|
||||
hr: {
|
||||
borderColor: theme("colors.neutral.500"),
|
||||
},
|
||||
blockquote: {
|
||||
color: theme("colors.neutral.200"),
|
||||
borderLeftColor: theme("colors.primary.900"),
|
||||
borderRightColor: theme("colors.primary.900"),
|
||||
},
|
||||
h1: {
|
||||
color: theme("colors.neutral.DEFAULT"),
|
||||
},
|
||||
h2: {
|
||||
color: theme("colors.neutral.50"),
|
||||
},
|
||||
h3: {
|
||||
color: theme("colors.neutral.50"),
|
||||
},
|
||||
h4: {
|
||||
color: theme("colors.neutral.50"),
|
||||
},
|
||||
"figure figcaption": {
|
||||
color: theme("colors.neutral.400"),
|
||||
},
|
||||
code: {
|
||||
color: theme("colors.secondary.400"),
|
||||
},
|
||||
"a code": {
|
||||
color: theme("colors.secondary.400"),
|
||||
},
|
||||
pre: {
|
||||
color: theme("colors.neutral.200"),
|
||||
backgroundColor: theme("colors.neutral.700"),
|
||||
},
|
||||
"pre code": {
|
||||
color: theme("colors.neutral.200"),
|
||||
},
|
||||
"thead th": {
|
||||
color: theme("colors.neutral.DEFAULT"),
|
||||
},
|
||||
"thead tr": {
|
||||
borderBottomColor: theme("colors.neutral.500"),
|
||||
},
|
||||
"tbody tr": {
|
||||
borderBottomColor: theme("colors.neutral.700"),
|
||||
},
|
||||
kbd: {
|
||||
backgroundColor: theme("colors.neutral.700"),
|
||||
color: theme("colors.neutral.300"),
|
||||
},
|
||||
mark: {
|
||||
backgroundColor: theme("colors.secondary.400"),
|
||||
},
|
||||
invert: {
|
||||
css: {
|
||||
a: {
|
||||
textDecorationColor: theme("colors.neutral.600"),
|
||||
},
|
||||
],
|
||||
kbd: {
|
||||
color: theme("colors.neutral.200"),
|
||||
backgroundColor: theme("colors.neutral.700"),
|
||||
},
|
||||
mark: {
|
||||
backgroundColor: theme("colors.secondary.400"),
|
||||
},
|
||||
},
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
plugins: [require("@tailwindcss/typography")],
|
||||
plugins: [
|
||||
require("@tailwindcss/typography")({
|
||||
className: "markdown",
|
||||
}),
|
||||
],
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user