versia-pub/docs
2
0
Fork 0
mirror of https://github.com/versia-pub/docs.git synced 2026-03-13 02:49:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: ⬆️ Upgrade to Tailwind v4

Browse source
This commit is contained in:
Jesse Wierzbinski 2025-05-14 18:25:40 +02:00
parent e363639803
commit 737969835d
No known key found for this signature in database
24 changed files with 741 additions and 402 deletions
Download patch file Download diff file Expand all files Collapse all files

117
styles/tailwind.css
View file

@ -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;