versia-pub/docs
2
0
Fork 0
mirror of https://github.com/versia-pub/docs.git synced 2025-12-06 14:28:20 +01:00
Code Issues Actions Packages Projects Releases Wiki Activity
docs/styles/typography.css
Jesse Wierzbinski 737969835d
chore: ⬆️ Upgrade to Tailwind v4
2025-05-14 18:25:40 +02:00

394 lines
11 KiB
CSS
Raw Blame History

@import "tailwindcss";
@utility prose {
--tw-prose-body: var(--color-zinc-700);
--tw-prose-headings: var(--color-zinc-900);
--tw-prose-links: var(--color-brand-500);
--tw-prose-links-hover: var(--color-brand-600);
--tw-prose-links-underline: color-mix(
in oklab,
var(--color-brand-500) 30%,
transparent
);
--tw-prose-bold: var(--color-zinc-900);
--tw-prose-counters: var(--color-zinc-500);
--tw-prose-bullets: var(--color-zinc-300);
--tw-prose-hr: var(--color-zinc-900) / 0.05;
--tw-prose-quotes: var(--color-zinc-900);
--tw-prose-quote-borders: var(--color-zinc-200);
--tw-prose-captions: var(--color-zinc-500);
--tw-prose-code: var(--color-zinc-900);
--tw-prose-code-bg: var(--color-zinc-100);
--tw-prose-code-ring: var(--color-zinc-300);
--tw-prose-th-borders: var(--color-zinc-300);
--tw-prose-td-borders: var(--color-zinc-200);
--tw-prose-invert-body: var(--color-zinc-400);
--tw-prose-invert-headings: var(--color-white);
--tw-prose-invert-links: var(--color-brand-400);
--tw-prose-invert-links-hover: var(--color-brand-500);
--tw-prose-invert-links-underline: color-mix(
in oklab,
var(--color-brand-500) 30%,
transparent
);
--tw-prose-invert-bold: var(--color-white);
--tw-prose-invert-counters: var(--color-zinc-400);
--tw-prose-invert-bullets: var(--color-zinc-600);
--tw-prose-invert-hr: var(--color-white) / 0.05;
--tw-prose-invert-quotes: var(--color-zinc-100);
--tw-prose-invert-quote-borders: var(--color-zinc-700);
--tw-prose-invert-captions: var(--color-zinc-400);
--tw-prose-invert-code: var(--color-white);
--tw-prose-invert-code-bg: color-mix(
in oklab,
var(--color-zinc-700) 15%,
transparent
);
--tw-prose-invert-code-ring: color-mix(
in oklab,
var(--color-white) 10%,
transparent
);
--tw-prose-invert-th-borders: var(--color-zinc-600);
--tw-prose-invert-td-borders: var(--color-zinc-700);
font-size: var(--text-base);
line-height: --spacing(8);
color: var(--tw-prose-body);
:not(:where([class~="not-prose"], [class~="not-prose"] *)) {
&:where(p) {
margin-top: --spacing(8);
margin-bottom: --spacing(8);
}
&:where([class~="lead"]) {
font-size: var(--text-base);
line-height: var(--text-base--line-height);
}
&:where(ol) {
list-style-type: decimal;
margin-top: --spacing(5);
margin-bottom: --spacing(5);
padding-left: 1.625rem;
}
&:where(ol[type="A"]) {
list-style-type: upper-alpha;
}
&:where(ol[type="a"]) {
list-style-type: lower-alpha;
}
&:where(ol[type="A" s]) {
list-style-type: upper-alpha;
}
&:where(ol[type="a" s]) {
list-style-type: lower-alpha;
}
&:where(ol[type="I"]) {
list-style-type: upper-roman;
}
&:where(ol[type="i"]) {
list-style-type: lower-roman;
}
&:where(ol[type="I" s]) {
list-style-type: upper-roman;
}
&:where(ol[type="i" s]) {
list-style-type: lower-roman;
}
&:where(ol[type="1"]) {
list-style-type: decimal;
}
&:where(ul) {
list-style-type: disc;
margin-top: --spacing(5);
margin-bottom: --spacing(5);
padding-left: 1.625rem;
}
&:where(li) {
margin-top: --spacing(2);
margin-bottom: --spacing(2);
}
&:where(:is(ol, ul) > li) {
padding-left: --spacing(1.5);
}
&:where(ol > li)::marker {
font-weight: 400;
color: var(--tw-prose-counters);
}
&:where(ul > li)::marker {
color: var(--tw-prose-bullets);
}
&:where(ul > li p) {
margin-top: --spacing(3);
margin-bottom: --spacing(3);
}
&:where(ul > li > *:first-child) {
margin-top: --spacing(5);
}
&:where(ul > li > *:last-child) {
margin-bottom: --spacing(5);
}
&:where(ol > li > *:first-child) {
margin-top: --spacing(5);
}
&:where(ol > li > *:last-child) {
margin-bottom: --spacing(5);
}
&:where(ul ul, ul ol, ol ul, ol ol) {
margin-top: --spacing(3);
margin-bottom: --spacing(3);
}
&:where(hr) {
border-color: var(--tw-prose-hr);
border-top-width: 1px;
margin-top: --spacing(16);
margin-bottom: --spacing(16);
max-width: none;
margin-left: --spacing(-4);
margin-right: --spacing(-4);
@media (width < var(--breakpoint-sm)) {
margin-left: --spacing(-6);
margin-right: --spacing(-6);
}
@media (width < var(--breakpoint-lg)) {
margin-left: --spacing(-8);
margin-right: --spacing(-8);
}
}
&:where(blockquote) {
font-weight: 500;
font-style: italic;
color: var(--tw-prose-quotes);
border-left-width: 0.25rem;
border-left-color: var(--tw-prose-quote-borders);
quotes: '"\\201C""\\201D""\\2018""\\2019"';
margin-top: --spacing(8);
margin-bottom: --spacing(8);
padding-left: --spacing(5);
&:where(p:first-of-type::before) {
content: open-quote;
}
&:where(p:last-of-type::after) {
content: close-quote;
}
}
&:where(h1) {
color: var(--tw-prose-headings);
font-weight: 700;
font-size: var(--text-4xl);
line-height: var(--text-4xl--line-height);
margin-bottom: --spacing(6);
}
&:where(h2) {
color: var(--tw-prose-headings);
font-weight: 600;
font-size: var(--text-2xl);
line-height: var(--text-2xl--line-height);
margin-top: --spacing(16);
margin-bottom: --spacing(8);
}
&:where(h3) {
color: var(--tw-prose-headings);
font-size: var(--text-lg);
line-height: var(--text-lg--line-height);
font-weight: 600;
margin-top: --spacing(10);
margin-bottom: --spacing(2);
}
&:where(img, video, figure) {
margin-top: --spacing(8);
margin-bottom: --spacing(8);
}
&:where(figure > *) {
margin-top: 0;
margin-bottom: 0;
}
&:where(figcaption) {
color: var(--tw-prose-captions);
font-size: var(--text-sm);
line-height: var(--text-sm--line-height);
margin-top: --spacing(2);
}
&:where(table) {
width: 100%;
table-layout: auto;
text-align: left;
margin-top: --spacing(8);
margin-bottom: --spacing(8);
line-height: var(--text-base--line-height);
}
&:where(thead) {
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-th-borders);
}
&:where(thead th) {
color: var(--tw-prose-headings);
font-weight: 600;
vertical-align: bottom;
padding-right: --spacing(2);
padding-bottom: --spacing(2);
padding-left: --spacing(2);
}
&:where(thead th:first-child) {
padding-left: 0;
}
&:where(thead th:last-child) {
padding-right: 0;
}
&:where(tbody tr) {
border-bottom-width: 1px;
border-bottom-color: var(--tw-prose-td-borders);
}
&:where(tbody tr:last-child) {
border-bottom-width: 0;
}
&:where(tbody td) {
vertical-align: baseline;
}
&:where(tfoot) {
border-top-width: 1px;
border-top-color: var(--tw-prose-th-borders);
}
&:where(tfoot td) {
vertical-align: top;
}
&:where(:is(tbody, tfoot) td) {
padding-top: --spacing(2);
padding-right: --spacing(2);
padding-bottom: --spacing(2);
padding-left: --spacing(2);
}
&:where(:is(tbody, tfoot) td:first-child) {
padding-left: 0;
}
&:where(:is(tbody, tfoot) td:last-child) {
padding-right: 0;
}
&:where(a) {
color: var(--tw-prose-links);
text-decoration: underline transparent;
font-weight: 500;
transition-property: color, text-decoration-color;
transition-duration: 0.15s;
transition-timing-function: var(--ease-in-out);
&:hover {
color: var(--tw-prose-links-hover);
text-decoration-color: var(--tw-prose-links-underline);
}
}
&:where(:is(h1, h2, h3) a) {
font-weight: inherit;
}
&:where(strong) {
color: var(--tw-prose-bold);
font-weight: 600;
}
&:where(:is(a, blockquote, thead th) strong) {
color: inherit;
}
&:where(code) {
color: var(--tw-prose-code);
border-radius: var(--radius-lg);
padding-top: --spacing(1.5);
padding-right: --spacing(1.5);
padding-bottom: --spacing(1);
padding-left: --spacing(1.5);
box-shadow: inset 0 0 0 1px var(--tw-prose-code-ring);
background-color: var(--tw-prose-code-bg);
white-space: pre-wrap;
word-break: break-all;
font-size: var(--text-xs);
}
&:where(:is(a, h1, h2, h3, blockquote, thead th) code) {
color: inherit;
}
&:where(h2 code) {
font-size: var(--text-base);
font-weight: inherit;
}
&:where(h3 code) {
font-size: var(--text-sm);
font-weight: inherit;
}
&:where(:is(h1, h2, h3) + *) {
margin-top: 0;
}
&:where(:first-child) {
margin-top: 0 !important;
}
&:where(:last-child) {
margin-bottom: 0 !important;
}
}
}
@utility prose-invert {
--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);
}
Reference in a new issue View git blame Copy permalink