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
|
|
@ -1,14 +1,109 @@
|
|||
@import "tailwindcss";
|
||||
@plugin "@headlessui/tailwindcss";
|
||||
@plugin "@tailwindcss/typography";
|
||||
@config "../tailwind.config.ts";
|
||||
|
||||
@custom-variant dark (&:where(.dark, .dark *));
|
||||
|
||||
@theme {
|
||||
--text-2xs: 0.75rem;
|
||||
--text-2xs--line-height: 1.25rem;
|
||||
--text-xs: 0.8125rem;
|
||||
--text-xs--line-height: 1.5rem;
|
||||
--text-sm: 0.875rem;
|
||||
--text-sm--line-height: 1.5rem;
|
||||
--text-base: 1rem;
|
||||
--text-base--line-height: 1.75rem;
|
||||
--text-lg: 1.125rem;
|
||||
--text-lg--line-height: 1.75rem;
|
||||
--text-xl: 1.25rem;
|
||||
--text-xl--line-height: 1.75rem;
|
||||
--text-2xl: 1.5rem;
|
||||
--text-2xl--line-height: 2rem;
|
||||
--text-3xl: 1.875rem;
|
||||
--text-3xl--line-height: 2.25rem;
|
||||
--text-4xl: 2.25rem;
|
||||
--text-4xl--line-height: 2.5rem;
|
||||
--text-5xl: 3rem;
|
||||
--text-5xl--line-height: 1;
|
||||
--text-6xl: 3.75rem;
|
||||
--text-6xl--line-height: 1;
|
||||
--text-7xl: 4.5rem;
|
||||
--text-7xl--line-height: 1;
|
||||
--text-8xl: 6rem;
|
||||
--text-8xl--line-height: 1;
|
||||
--text-9xl: 8rem;
|
||||
--text-9xl--line-height: 1;
|
||||
|
||||
--color-brand-50: var(--color-pink-50);
|
||||
--color-brand-100: var(--color-pink-100);
|
||||
--color-brand-200: var(--color-pink-200);
|
||||
--color-brand-300: var(--color-pink-300);
|
||||
--color-brand-400: var(--color-pink-400);
|
||||
--color-brand-500: var(--color-pink-500);
|
||||
--color-brand-600: var(--color-pink-600);
|
||||
--color-brand-700: var(--color-pink-700);
|
||||
--color-brand-800: var(--color-pink-800);
|
||||
--color-brand-900: var(--color-pink-900);
|
||||
--color-brand-950: var(--color-pink-950);
|
||||
|
||||
--color-secondary-50: var(--color-purple-50);
|
||||
--color-secondary-100: var(--color-purple-100);
|
||||
--color-secondary-200: var(--color-purple-200);
|
||||
--color-secondary-300: var(--color-purple-300);
|
||||
--color-secondary-400: var(--color-purple-400);
|
||||
--color-secondary-500: var(--color-purple-500);
|
||||
--color-secondary-600: var(--color-purple-600);
|
||||
--color-secondary-700: var(--color-purple-700);
|
||||
--color-secondary-800: var(--color-purple-800);
|
||||
--color-secondary-900: var(--color-purple-900);
|
||||
--color-secondary-950: var(--color-purple-950);
|
||||
|
||||
--container-lg: 33rem;
|
||||
--container-2xl: 40rem;
|
||||
--container-3xl: 50rem;
|
||||
--container-5xl: 66rem;
|
||||
|
||||
--animate-roll: roll 2s 1 ease-in-out;
|
||||
|
||||
@keyframes roll {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@utility construction {
|
||||
--opacity: 0.1;
|
||||
--black: rgb(46 39 37 / var(--opacity));
|
||||
--yellow: rgb(255 195 0 / var(--opacity));
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
var(--yellow) 25%,
|
||||
var(--black) 25%,
|
||||
var(--black) 50%,
|
||||
var(--yellow) 50%,
|
||||
var(--yellow) 75%,
|
||||
var(--black) 75%,
|
||||
var(--black) 100%
|
||||
);
|
||||
background-size: 57px 57px;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
:root {
|
||||
--shiki-color-text: theme("colors.white");
|
||||
--shiki-token-constant: theme("colors.brand.300");
|
||||
--shiki-token-string: theme("colors.brand.300");
|
||||
--shiki-token-comment: theme("colors.zinc.500");
|
||||
--shiki-token-keyword: theme("colors.sky.300");
|
||||
--shiki-token-parameter: theme("colors.pink.300");
|
||||
--shiki-token-function: theme("colors.violet.300");
|
||||
--shiki-token-string-expression: theme("colors.brand.300");
|
||||
--shiki-token-punctuation: theme("colors.zinc.200");
|
||||
--shiki-color-text: var(--color-white);
|
||||
--shiki-token-constant: var(--color-brand-300);
|
||||
--shiki-token-string: var(--color-brand-300);
|
||||
--shiki-token-comment: var(--color-zinc-500);
|
||||
--shiki-token-keyword: var(--color-sky-300);
|
||||
--shiki-token-parameter: var(--color-pink-300);
|
||||
--shiki-token-function: var(--color-violet-300);
|
||||
--shiki-token-string-expression: var(--color-brand-300);
|
||||
--shiki-token-punctuation: var(--color-zinc-200);
|
||||
}
|
||||
|
||||
[inert] ::-webkit-scrollbar {
|
||||
|
|
@ -80,7 +175,3 @@
|
|||
color: var(--vp-code-line-diff-add-symbol-color);
|
||||
}
|
||||
}
|
||||
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
|
|
|||
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