♻️ Change Tailwind Typography to use variables
This commit is contained in:
James Panther
parent
7c6bc92ff1
commit
25e68ccb23
@ -13,7 +13,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
|
||||
|
||||
### Changed
|
||||
|
||||
- Upgrade to Tailwind v3.1.3
|
||||
- Upgrade to Tailwind v3.1.3 and Typography v0.5.2
|
||||
- Adjusted contrast of certain text to improve accessibility
|
||||
|
||||
## [1.1.0] - 2021-11-06
|
||||
|
||||
@ -559,7 +559,7 @@ video {
|
||||
}
|
||||
|
||||
.prose {
|
||||
color: #374151;
|
||||
color: var(--tw-prose-body);
|
||||
max-width: 65ch;
|
||||
}
|
||||
|
||||
@ -572,7 +572,7 @@ video {
|
||||
}
|
||||
|
||||
.prose :where(a):not(:where([class~="not-prose"] *)) {
|
||||
color: #7e22ce;
|
||||
color: var(--tw-prose-links);
|
||||
text-decoration: underline;
|
||||
font-weight: 500;
|
||||
-webkit-text-decoration-color: #d8b4fe;
|
||||
@ -580,14 +580,13 @@ video {
|
||||
}
|
||||
|
||||
.prose :where(a):not(:where([class~="not-prose"] *)):hover {
|
||||
text-decoration: none;
|
||||
background-color: #9333ea;
|
||||
border-radius: 0.09rem;
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.prose :where(strong):not(:where([class~="not-prose"] *)) {
|
||||
color: #111827;
|
||||
color: var(--tw-prose-bold);
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
@ -647,7 +646,7 @@ video {
|
||||
}
|
||||
|
||||
.prose :where(hr):not(:where([class~="not-prose"] *)) {
|
||||
border-color: #e5e7eb;
|
||||
border-color: var(--tw-prose-hr);
|
||||
border-top-width: 1px;
|
||||
margin-top: 3em;
|
||||
margin-bottom: 3em;
|
||||
@ -656,9 +655,9 @@ video {
|
||||
.prose :where(blockquote):not(:where([class~="not-prose"] *)) {
|
||||
font-weight: 500;
|
||||
font-style: italic;
|
||||
color: #1f2937;
|
||||
color: var(--tw-prose-quotes);
|
||||
border-left-width: 0.25rem;
|
||||
border-left-color: #e9d5ff;
|
||||
border-left-color: var(--tw-prose-quote-borders);
|
||||
quotes: "\201C""\201D""\2018""\2019";
|
||||
margin-top: 1.6em;
|
||||
margin-bottom: 1.6em;
|
||||
@ -674,13 +673,12 @@ video {
|
||||
}
|
||||
|
||||
.prose :where(h1):not(:where([class~="not-prose"] *)) {
|
||||
color: #1f2937;
|
||||
color: var(--tw-prose-headings);
|
||||
font-weight: 800;
|
||||
font-size: 2.25em;
|
||||
margin-top: 0;
|
||||
margin-bottom: 0.8888889em;
|
||||
line-height: 1.1111111;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.prose :where(h1 strong):not(:where([class~="not-prose"] *)) {
|
||||
@ -688,13 +686,12 @@ video {
|
||||
}
|
||||
|
||||
.prose :where(h2):not(:where([class~="not-prose"] *)) {
|
||||
color: #1f2937;
|
||||
color: var(--tw-prose-headings);
|
||||
font-weight: 700;
|
||||
font-size: 1.5em;
|
||||
margin-top: 2em;
|
||||
margin-bottom: 1em;
|
||||
line-height: 1.3333333;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.prose :where(h2 strong):not(:where([class~="not-prose"] *)) {
|
||||
@ -702,13 +699,12 @@ video {
|
||||
}
|
||||
|
||||
.prose :where(h3):not(:where([class~="not-prose"] *)) {
|
||||
color: #1f2937;
|
||||
color: var(--tw-prose-headings);
|
||||
font-weight: 600;
|
||||
font-size: 1.25em;
|
||||
margin-top: 1.6em;
|
||||
margin-bottom: 0.6em;
|
||||
line-height: 1.6;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.prose :where(h3 strong):not(:where([class~="not-prose"] *)) {
|
||||
@ -716,12 +712,11 @@ video {
|
||||
}
|
||||
|
||||
.prose :where(h4):not(:where([class~="not-prose"] *)) {
|
||||
color: #1f2937;
|
||||
color: var(--tw-prose-headings);
|
||||
font-weight: 600;
|
||||
margin-top: 1.5em;
|
||||
margin-bottom: 0.5em;
|
||||
line-height: 1.5;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.prose :where(h4 strong):not(:where([class~="not-prose"] *)) {
|
||||
@ -741,7 +736,7 @@ video {
|
||||
}
|
||||
|
||||
.prose :where(code):not(:where([class~="not-prose"] *)) {
|
||||
color: #6b21a8;
|
||||
color: var(--tw-prose-code);
|
||||
font-weight: 600;
|
||||
font-size: 0.875em;
|
||||
}
|
||||
@ -755,12 +750,12 @@ video {
|
||||
}
|
||||
|
||||
.prose :where(a code):not(:where([class~="not-prose"] *)) {
|
||||
color: var(--tw-prose-links);
|
||||
color: var(--tw-prose-code);
|
||||
}
|
||||
|
||||
.prose :where(pre):not(:where([class~="not-prose"] *)) {
|
||||
color: #374151;
|
||||
background-color: #f9fafb;
|
||||
color: var(--tw-prose-pre-code);
|
||||
background-color: var(--tw-prose-pre-bg);
|
||||
overflow-x: auto;
|
||||
font-weight: 400;
|
||||
font-size: 0.875em;
|
||||
@ -780,7 +775,7 @@ video {
|
||||
border-radius: 0;
|
||||
padding: 0;
|
||||
font-weight: inherit;
|
||||
color: #374151;
|
||||
color: inherit;
|
||||
font-size: inherit;
|
||||
font-family: inherit;
|
||||
line-height: inherit;
|
||||
@ -806,8 +801,7 @@ video {
|
||||
|
||||
.prose :where(thead):not(:where([class~="not-prose"] *)) {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: #6b7280;
|
||||
color: #1f2937;
|
||||
border-bottom-color: var(--tw-prose-th-borders);
|
||||
}
|
||||
|
||||
.prose :where(thead th):not(:where([class~="not-prose"] *)) {
|
||||
@ -821,7 +815,7 @@ video {
|
||||
|
||||
.prose :where(tbody tr):not(:where([class~="not-prose"] *)) {
|
||||
border-bottom-width: 1px;
|
||||
border-bottom-color: #d1d5db;
|
||||
border-bottom-color: var(--tw-prose-td-borders);
|
||||
}
|
||||
|
||||
.prose :where(tbody tr:last-child):not(:where([class~="not-prose"] *)) {
|
||||
@ -838,36 +832,36 @@ video {
|
||||
|
||||
.prose {
|
||||
--tw-prose-body: #374151;
|
||||
--tw-prose-headings: #111827;
|
||||
--tw-prose-lead: #4b5563;
|
||||
--tw-prose-links: #111827;
|
||||
--tw-prose-headings: #1f2937;
|
||||
--tw-prose-lead: #6b7280;
|
||||
--tw-prose-links: #7e22ce;
|
||||
--tw-prose-bold: #111827;
|
||||
--tw-prose-counters: #6b7280;
|
||||
--tw-prose-bullets: #d1d5db;
|
||||
--tw-prose-counters: #1f2937;
|
||||
--tw-prose-bullets: #6b7280;
|
||||
--tw-prose-hr: #e5e7eb;
|
||||
--tw-prose-quotes: #111827;
|
||||
--tw-prose-quote-borders: #e5e7eb;
|
||||
--tw-prose-quotes: #374151;
|
||||
--tw-prose-quote-borders: #e9d5ff;
|
||||
--tw-prose-captions: #6b7280;
|
||||
--tw-prose-code: #111827;
|
||||
--tw-prose-pre-code: #e5e7eb;
|
||||
--tw-prose-pre-bg: #1f2937;
|
||||
--tw-prose-th-borders: #d1d5db;
|
||||
--tw-prose-td-borders: #e5e7eb;
|
||||
--tw-prose-code: #7e22ce;
|
||||
--tw-prose-pre-code: #374151;
|
||||
--tw-prose-pre-bg: #f9fafb;
|
||||
--tw-prose-th-borders: #6b7280;
|
||||
--tw-prose-td-borders: #d1d5db;
|
||||
--tw-prose-invert-body: #d1d5db;
|
||||
--tw-prose-invert-headings: #fff;
|
||||
--tw-prose-invert-lead: #9ca3af;
|
||||
--tw-prose-invert-links: #fff;
|
||||
--tw-prose-invert-headings: #f9fafb;
|
||||
--tw-prose-invert-lead: #6b7280;
|
||||
--tw-prose-invert-links: #c084fc;
|
||||
--tw-prose-invert-bold: #fff;
|
||||
--tw-prose-invert-counters: #9ca3af;
|
||||
--tw-prose-invert-bullets: #4b5563;
|
||||
--tw-prose-invert-hr: #374151;
|
||||
--tw-prose-invert-quotes: #f3f4f6;
|
||||
--tw-prose-invert-quote-borders: #374151;
|
||||
--tw-prose-invert-hr: #6b7280;
|
||||
--tw-prose-invert-quotes: #e5e7eb;
|
||||
--tw-prose-invert-quote-borders: #581c87;
|
||||
--tw-prose-invert-captions: #9ca3af;
|
||||
--tw-prose-invert-code: #fff;
|
||||
--tw-prose-invert-pre-code: #d1d5db;
|
||||
--tw-prose-invert-pre-bg: rgb(0 0 0 / 50%);
|
||||
--tw-prose-invert-th-borders: #4b5563;
|
||||
--tw-prose-invert-code: #c084fc;
|
||||
--tw-prose-invert-pre-code: #e5e7eb;
|
||||
--tw-prose-invert-pre-bg: #374151;
|
||||
--tw-prose-invert-th-borders: #6b7280;
|
||||
--tw-prose-invert-td-borders: #374151;
|
||||
font-size: 1rem;
|
||||
line-height: 1.75;
|
||||
@ -980,14 +974,6 @@ video {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.prose :where(ol > li):not(:where([class~="not-prose"] *))::before {
|
||||
color: #1f2937;
|
||||
}
|
||||
|
||||
.prose :where(ul > li):not(:where([class~="not-prose"] *))::before {
|
||||
background-color: #6b7280;
|
||||
}
|
||||
|
||||
.prose :where(kbd):not(:where([class~="not-prose"] *)) {
|
||||
background-color: #e5e7eb;
|
||||
padding: 0.1rem 0.4rem;
|
||||
@ -997,6 +983,7 @@ video {
|
||||
}
|
||||
|
||||
.prose :where(mark):not(:where([class~="not-prose"] *)) {
|
||||
color: #1f2937;
|
||||
background-color: #e9d5ff;
|
||||
padding: 0.1rem 0.2rem;
|
||||
border-radius: 0.12rem;
|
||||
@ -1385,14 +1372,9 @@ video {
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.text-neutral-300 {
|
||||
.hover\:text-primary-500:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(209 213 219 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:text-primary-400:hover {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(192 132 252 / var(--tw-text-opacity));
|
||||
color: rgb(168 85 247 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.hover\:underline:hover {
|
||||
@ -1400,90 +1382,42 @@ video {
|
||||
text-decoration-line: underline;
|
||||
}
|
||||
|
||||
.hover\:decoration-primary-400:hover {
|
||||
-webkit-text-decoration-color: #c084fc;
|
||||
text-decoration-color: #c084fc;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.dark\:prose-light {
|
||||
color: #9ca3af;
|
||||
.dark\:prose-invert {
|
||||
--tw-prose-body: var(--tw-prose-invert-body);
|
||||
--tw-prose-headings: var(--tw-prose-invert-headings);
|
||||
--tw-prose-lead: var(--tw-prose-invert-lead);
|
||||
--tw-prose-links: var(--tw-prose-invert-links);
|
||||
--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-pre-code: var(--tw-prose-invert-pre-code);
|
||||
--tw-prose-pre-bg: var(--tw-prose-invert-pre-bg);
|
||||
--tw-prose-th-borders: var(--tw-prose-invert-th-borders);
|
||||
--tw-prose-td-borders: var(--tw-prose-invert-td-borders);
|
||||
}
|
||||
|
||||
.dark\:prose-light :where(a):not(:where([class~="not-prose"] *)) {
|
||||
color: #c084fc;
|
||||
-webkit-text-decoration-color: #6b7280;
|
||||
text-decoration-color: #6b7280;
|
||||
.dark\:prose-invert :where(a):not(:where([class~="not-prose"] *)) {
|
||||
-webkit-text-decoration-color: #4b5563;
|
||||
text-decoration-color: #4b5563;
|
||||
}
|
||||
|
||||
.dark\:prose-light :where(strong):not(:where([class~="not-prose"] *)) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dark\:prose-light :where(ol > li):not(:where([class~="not-prose"] *))::before {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.dark\:prose-light :where(ul > li):not(:where([class~="not-prose"] *))::before {
|
||||
background-color: #4b5563;
|
||||
}
|
||||
|
||||
.dark\:prose-light :where(hr):not(:where([class~="not-prose"] *)) {
|
||||
border-color: #6b7280;
|
||||
}
|
||||
|
||||
.dark\:prose-light :where(blockquote):not(:where([class~="not-prose"] *)) {
|
||||
color: #e5e7eb;
|
||||
border-left-color: #581c87;
|
||||
}
|
||||
|
||||
.dark\:prose-light :where(h1):not(:where([class~="not-prose"] *)) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dark\:prose-light :where(h2):not(:where([class~="not-prose"] *)) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dark\:prose-light :where(h3):not(:where([class~="not-prose"] *)) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dark\:prose-light :where(h4):not(:where([class~="not-prose"] *)) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dark\:prose-light :where(figure figcaption):not(:where([class~="not-prose"] *)) {
|
||||
color: #9ca3af;
|
||||
}
|
||||
|
||||
.dark\:prose-light :where(code):not(:where([class~="not-prose"] *)) {
|
||||
color: #a855f7;
|
||||
}
|
||||
|
||||
.dark\:prose-light :where(a code):not(:where([class~="not-prose"] *)) {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.dark\:prose-light :where(pre):not(:where([class~="not-prose"] *)) {
|
||||
.dark\:prose-invert :where(kbd):not(:where([class~="not-prose"] *)) {
|
||||
color: #e5e7eb;
|
||||
background-color: #374151;
|
||||
}
|
||||
|
||||
.dark\:prose-light :where(pre code):not(:where([class~="not-prose"] *)) {
|
||||
color: #e5e7eb;
|
||||
}
|
||||
|
||||
.dark\:prose-light :where(thead):not(:where([class~="not-prose"] *)) {
|
||||
color: #fff;
|
||||
border-bottom-color: #6b7280;
|
||||
}
|
||||
|
||||
.dark\:prose-light :where(tbody tr):not(:where([class~="not-prose"] *)) {
|
||||
border-bottom-color: #374151;
|
||||
}
|
||||
|
||||
.dark\:prose-light :where(kbd):not(:where([class~="not-prose"] *)) {
|
||||
background-color: #374151;
|
||||
color: #d1d5db;
|
||||
}
|
||||
|
||||
.dark\:prose-light :where(mark):not(:where([class~="not-prose"] *)) {
|
||||
.dark\:prose-invert :where(mark):not(:where([class~="not-prose"] *)) {
|
||||
background-color: #c084fc;
|
||||
}
|
||||
|
||||
@ -1497,15 +1431,15 @@ video {
|
||||
color: rgb(255 255 255 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-neutral-400 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(156 163 175 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-neutral-500 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(107 114 128 / var(--tw-text-opacity));
|
||||
}
|
||||
|
||||
.dark\:text-neutral-600 {
|
||||
--tw-text-opacity: 1;
|
||||
color: rgb(75 85 99 / var(--tw-text-opacity));
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: 640px) {
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
{{ .Title | emojify }}
|
||||
</h1>
|
||||
</header>
|
||||
<section class="prose dark:prose-light">
|
||||
<section class="prose dark:prose-invert">
|
||||
{{ .Content | emojify }}
|
||||
</section>
|
||||
</article>
|
||||
|
||||
@ -2,13 +2,17 @@
|
||||
<article class="flex flex-col items-center justify-center h-full mt-10 text-center">
|
||||
<header class="flex flex-col items-center mb-3">
|
||||
{{ with .Site.Author.image }}
|
||||
<img class="mb-2 rounded-full w-36 h-36" src="{{ . | relURL }}" alt="{{ $.Site.Author.name }}" />
|
||||
<img
|
||||
class="mb-2 rounded-full w-36 h-36"
|
||||
src="{{ . | relURL }}"
|
||||
alt="{{ $.Site.Author.name }}"
|
||||
/>
|
||||
{{ end }}
|
||||
<h1 class="text-4xl font-extrabold dark:text-white">
|
||||
{{ .Params.title | default .Site.Author.name | default .Site.Title | emojify }}
|
||||
</h1>
|
||||
{{ with .Content }}
|
||||
<section class="pt-5 prose dark:prose-light">{{ . | emojify }}</section>
|
||||
<section class="pt-5 prose dark:prose-invert">{{ . | emojify }}</section>
|
||||
{{ end }}
|
||||
</header>
|
||||
{{ with .Site.Author.links }}
|
||||
|
||||
@ -17,72 +17,52 @@ module.exports = {
|
||||
extend: {
|
||||
typography: (theme) => ({
|
||||
DEFAULT: {
|
||||
css: [
|
||||
{
|
||||
color: theme("colors.neutral.700"),
|
||||
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.primary.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.primary.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: {
|
||||
color: theme("colors.primary.700"),
|
||||
textDecoration: "underline",
|
||||
textDecorationColor: theme("colors.primary.300"),
|
||||
fontWeight: "500",
|
||||
"&:hover": {
|
||||
color: theme("colors.neutral.DEFAULT"),
|
||||
textDecoration: "none",
|
||||
backgroundColor: theme("colors.primary.600"),
|
||||
borderRadius: "0.09rem",
|
||||
color: theme("colors.white"),
|
||||
textDecoration: "none",
|
||||
},
|
||||
},
|
||||
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"),
|
||||
},
|
||||
h1: {
|
||||
color: theme("colors.neutral.800"),
|
||||
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.primary.800"),
|
||||
},
|
||||
"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: {
|
||||
color: theme("colors.neutral.800"),
|
||||
borderBottomColor: theme("colors.neutral.500"),
|
||||
},
|
||||
"tbody tr": {
|
||||
borderBottomColor: theme("colors.neutral.300"),
|
||||
"a code": {
|
||||
color: "var(--tw-prose-code)",
|
||||
},
|
||||
kbd: {
|
||||
backgroundColor: theme("colors.neutral.200"),
|
||||
@ -92,89 +72,29 @@ module.exports = {
|
||||
fontWeight: "600",
|
||||
},
|
||||
mark: {
|
||||
color: theme("colors.neutral.800"),
|
||||
backgroundColor: theme("colors.primary.200"),
|
||||
padding: "0.1rem 0.2rem",
|
||||
borderRadius: "0.12rem",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
light: {
|
||||
css: [
|
||||
{
|
||||
color: theme("colors.neutral.400"),
|
||||
invert: {
|
||||
css: {
|
||||
a: {
|
||||
color: theme("colors.primary.400"),
|
||||
textDecorationColor: theme("colors.neutral.500"),
|
||||
},
|
||||
strong: {
|
||||
color: theme("colors.white"),
|
||||
},
|
||||
"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"),
|
||||
},
|
||||
h1: {
|
||||
color: theme("colors.white"),
|
||||
},
|
||||
h2: {
|
||||
color: theme("colors.white"),
|
||||
},
|
||||
h3: {
|
||||
color: theme("colors.white"),
|
||||
},
|
||||
h4: {
|
||||
color: theme("colors.white"),
|
||||
},
|
||||
"figure figcaption": {
|
||||
color: theme("colors.neutral.400"),
|
||||
},
|
||||
code: {
|
||||
color: theme("colors.primary.500"),
|
||||
},
|
||||
"a code": {
|
||||
color: theme("colors.white"),
|
||||
},
|
||||
pre: {
|
||||
color: theme("colors.neutral.200"),
|
||||
backgroundColor: theme("colors.neutral.700"),
|
||||
},
|
||||
"pre code": {
|
||||
color: theme("colors.neutral.200"),
|
||||
},
|
||||
thead: {
|
||||
color: theme("colors.white"),
|
||||
borderBottomColor: theme("colors.neutral.500"),
|
||||
},
|
||||
"tbody tr": {
|
||||
borderBottomColor: theme("colors.neutral.700"),
|
||||
textDecorationColor: theme("colors.neutral.600"),
|
||||
},
|
||||
kbd: {
|
||||
color: theme("colors.neutral.200"),
|
||||
backgroundColor: theme("colors.neutral.700"),
|
||||
color: theme("colors.neutral.300"),
|
||||
},
|
||||
mark: {
|
||||
backgroundColor: theme("colors.primary.400"),
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
}),
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
extend: {
|
||||
typography: ["dark"],
|
||||
},
|
||||
},
|
||||
plugins: [require("@tailwindcss/typography")],
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user