mirror of
https://github.com/versia-pub/docs.git
synced 2026-03-13 02:49:16 +01:00
chore: ⬆️ Upgrade to Tailwind v4
This commit is contained in:
Jesse Wierzbinski
parent
e363639803
commit
737969835d
24 changed files with 741 additions and 402 deletions
393
styles/typography.css
Normal file
393
styles/typography.css
Normal file
|
|
@ -0,0 +1,393 @@
|
|||
@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);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue