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

8
components/Code.tsx
View file

@ -77,7 +77,7 @@ function CopyButton({ code }: { code: string }) {
<button
type="button"
className={clsx(
"group/button absolute right-4 top-3.5 overflow-hidden rounded-md py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur transition focus:opacity-100 group-hover:opacity-100",
"group/button absolute right-4 top-3.5 overflow-hidden rounded-md py-1 pl-2 pr-3 text-2xs font-medium opacity-0 backdrop-blur-sm transition focus:opacity-100 group-hover:opacity-100",
copied
? "bg-brand-400/10 ring-1 ring-inset ring-brand-400/20"
: "bg-white/5 hover:bg-white/7.5 dark:bg-white/2.5 dark:hover:bg-white/5",
@ -163,7 +163,7 @@ function CodePanel({
<div className="group dark:bg-white/2.5">
<CodePanelHeader tag={tag} label={label} />
<div className="relative">
<pre className="overflow-x-auto p-4 text-sm text-white [&>code>pre]:!bg-transparent">
<pre className="overflow-x-auto p-4 text-sm text-white [&>code>pre]:bg-transparent!">
{children}
</pre>
<CopyButton code={code} />
@ -188,7 +188,7 @@ function CodeGroupHeader({
}
return (
<div className="flex min-h-[calc(theme(spacing.12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent">
<div className="flex min-h-[calc(--spacing(12)+1px)] flex-wrap items-start gap-x-4 border-b border-zinc-700 bg-zinc-800 px-4 dark:border-zinc-800 dark:bg-transparent">
{title && (
<h3 className="mr-auto pt-3 text-xs font-semibold text-white">
{title}
@ -199,7 +199,7 @@ function CodeGroupHeader({
{Children.map(children, (child, childIndex) => (
<Tab
className={clsx(
"border-b py-3 transition ui-not-focus-visible:outline-none",
"border-b py-3 transition ui-not-focus-visible:outline-hidden",
childIndex === selectedIndex
? "border-brand-500 text-brand-400"
: "border-transparent text-zinc-400 hover:text-zinc-300",

8
components/Feedback.tsx
View file

@ -3,7 +3,7 @@
import { Transition } from "@headlessui/react";
import {
type ComponentPropsWithoutRef,
type ElementRef,
type ComponentRef,
type FormEvent,
forwardRef,
useState,
@ -37,7 +37,7 @@ function FeedbackButton(
}
const FeedbackForm = forwardRef<
ElementRef<"form">,
ComponentRef<"form">,
Pick<ComponentPropsWithoutRef<"form">, "onSubmit">
>(function FeedbackForm({ onSubmit }, ref) {
return (
@ -49,7 +49,7 @@ const FeedbackForm = forwardRef<
<p className="text-sm text-zinc-600 dark:text-zinc-400">
Was this page helpful?
</p>
<div className="group grid h-8 grid-cols-[1fr,1px,1fr] overflow-hidden rounded-md border border-zinc-900/10 dark:border-white/10">
<div className="group grid h-8 grid-cols-[1fr_1px_1fr] overflow-hidden rounded-md border border-zinc-900/10 dark:border-white/10">
<FeedbackButton data-response="yes">Yes</FeedbackButton>
<div className="bg-zinc-900/10 dark:bg-white/10" />
<FeedbackButton data-response="no">No</FeedbackButton>
@ -58,7 +58,7 @@ const FeedbackForm = forwardRef<
);
});
const FeedbackThanks = forwardRef<ElementRef<"div">>(
const FeedbackThanks = forwardRef<ComponentRef<"div">>(
// biome-ignore lint/style/useNamingConvention: <explanation>
function FeedbackThanks(_props, ref) {
return (

10
components/Header.tsx
View file

@ -3,7 +3,7 @@ import { motion, useScroll, useTransform } from "framer-motion";
import Link from "next/link";
import {
type CSSProperties,
type ElementRef,
type ComponentRef,
type ReactNode,
forwardRef,
} from "react";
@ -37,7 +37,7 @@ function TopLevelNavItem({
);
}
export const Header = forwardRef<ElementRef<"div">, { className?: string }>(
export const Header = forwardRef<ComponentRef<"div">, { className?: string }>(
function Header({ className }, ref) {
const { isOpen: mobileNavIsOpen } = useMobileNavigationStore();
const isInsideMobileNavigation = useIsInsideMobileNavigation();
@ -51,13 +51,13 @@ export const Header = forwardRef<ElementRef<"div">, { className?: string }>(
ref={ref}
className={clsx(
className,
// Add bg-construction bg-opacity-10 [background-size:57px_57px] classes to make it striped
// Add "construction" class to make it striped
"fixed inset-x-0 top-0 z-50 flex h-14 items-center justify-between gap-2 px-4 transition sm:px-6 lg:left-72 lg:z-30 lg:px-8 xl:left-80",
!isInsideMobileNavigation &&
"backdrop-blur-sm lg:left-72 xl:left-80 dark:backdrop-blur",
"backdrop-blur-xs lg:left-72 xl:left-80 dark:backdrop-blur-sm",
isInsideMobileNavigation
? "bg-white dark:bg-zinc-900"
: "bg-white/[var(--bg-opacity-light)] dark:bg-zinc-900/[var(--bg-opacity-dark)]",
: "bg-white/(--bg-opacity-light) dark:bg-zinc-900/(--bg-opacity-dark)",
)}
style={
{

4
components/Heading.tsx
View file

@ -61,8 +61,8 @@ function Anchor({
className="group text-inherit no-underline hover:text-inherit"
>
{inView && (
<div className="absolute ml-[calc(-1*var(--width))] mt-1 hidden w-[var(--width)] opacity-0 transition [--width:calc(2.625rem+0.5px+50%-min(50%,calc(theme(maxWidth.lg)+theme(spacing.8))))] group-hover:opacity-100 group-focus:opacity-100 md:block lg:z-50 2xl:[--width:theme(spacing.10)]">
<div className="group/anchor block h-5 w-5 rounded bg-zinc-50 ring-1 ring-inset ring-zinc-300 transition hover:ring-zinc-500 dark:bg-zinc-800 dark:ring-zinc-700 dark:hover:bg-zinc-700 dark:hover:ring-zinc-600">
<div className="absolute ml-[calc(-1*var(--width))] mt-1 hidden w-(--width) opacity-0 transition [--width:calc(2.625rem+0.5px+50%-min(50%,calc(var(--container-lg)+(--spacing(8)))))] group-hover:opacity-100 group-focus:opacity-100 md:block lg:z-50 2xl:[--width:--spacing(10)]">
<div className="group/anchor block h-5 w-5 rounded-sm bg-zinc-50 ring-1 ring-inset ring-zinc-300 transition hover:ring-zinc-500 dark:bg-zinc-800 dark:ring-zinc-700 dark:hover:bg-zinc-700 dark:hover:ring-zinc-600">
<AnchorIcon className="h-5 w-5 stroke-zinc-500 transition dark:stroke-zinc-400 dark:group-hover/anchor:stroke-white" />
</div>
</div>

6
components/HeroPattern.tsx
View file

@ -3,8 +3,8 @@ import { GridPattern } from "./GridPattern";
export function HeroPattern() {
return (
<div className="absolute inset-0 -z-10 mx-0 max-w-none overflow-hidden">
<div className="absolute left-1/2 top-0 ml-[-38rem] h-[25rem] w-[81.25rem] dark:[mask-image:linear-gradient(white,transparent)]">
<div className="absolute inset-0 bg-gradient-to-r from-brand-400 to-secondary-600 opacity-40 [mask-image:radial-gradient(farthest-side_at_top,white,transparent)] dark:from-brand-400/30 dark:to-secondary-600/30 dark:opacity-100">
<div className="absolute left-1/2 top-0 ml-[-38rem] h-100 w-325 dark:mask-[linear-gradient(white,transparent)]">
<div className="absolute inset-0 bg-linear-to-r from-brand-400 to-secondary-600 opacity-40 mask-[radial-gradient(farthest-side_at_top,white,transparent)] dark:from-brand-400/30 dark:to-secondary-600/30 dark:opacity-100">
<GridPattern
width={72}
height={56}
@ -22,7 +22,7 @@ export function HeroPattern() {
<svg
viewBox="0 0 1113 440"
aria-hidden="true"
className="absolute left-1/2 top-0 ml-[-19rem] w-[69.5625rem] fill-white blur-[26px] dark:hidden"
className="absolute left-1/2 top-0 ml-[-19rem] w-278.25 fill-white blur-[26px] dark:hidden"
>
<path d="M.016 439.5s-9.5-300 434-300S882.516 20 882.516 20V0h230.004v439.5H.016Z" />
</svg>

2
components/Libraries.tsx
View file

@ -48,7 +48,7 @@ export function Libraries() {
<Image
src={library.logo}
alt=""
className="h-12 w-12 rounded m-0"
className="h-12 w-12 rounded-sm m-0"
unoptimized={true}
/>
</div>

4
components/Logo.tsx
View file

@ -15,10 +15,10 @@ export function Logo(props: ComponentPropsWithoutRef<"div">) {
<img
src="https://cdn.versia.pub/branding/icon.svg"
alt="Logo"
className="h-full rounded-sm"
className="h-full rounded-xs"
/>
<span className="fill-zinc-900 dark:fill-white font-semibold text-lg">
Versia Protocol {/* <Badge className="!h-6">Dev</Badge> */}
Versia Protocol {/* <Badge className="h-6!">Dev</Badge> */}
</span>
</div>
);

2
components/Metadata.tsx
View file

@ -24,7 +24,7 @@ export function Changelog({ children }: { children: ReactNode }) {
const [isOpen, setIsOpen] = useState(false);
return (
<dl className="rounded border border-zinc-200 dark:border-zinc-800 py-2 px-4 dark:bg-white/2.5">
<dl className="rounded-sm border border-zinc-200 dark:border-zinc-800 py-2 px-4 dark:bg-white/2.5">
<dt>
<motion.button
className="grid grid-cols-[1fr_auto] items-center space-x-4 w-full"

4
components/MobileNavigation.tsx
View file

@ -106,7 +106,7 @@ function MobileNavigationDialog({
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 top-14 bg-zinc-400/20 backdrop-blur-sm dark:bg-black/40" />
<div className="fixed inset-0 top-14 bg-zinc-400/20 backdrop-blur-xs dark:bg-black/40" />
</TransitionChild>
<DialogPanel>
@ -134,7 +134,7 @@ function MobileNavigationDialog({
>
<motion.div
layoutScroll={true}
className="fixed bottom-0 left-0 max-w-[100vw] top-14 w-full overflow-y-auto bg-white px-4 pb-4 pt-6 shadow-lg shadow-zinc-900/10 ring-1 ring-zinc-900/7.5 min-[416px]:max-w-sm sm:px-6 sm:pb-10 dark:bg-zinc-900 dark:ring-zinc-800"
className="fixed bottom-0 left-0 max-w-screen top-14 w-full overflow-y-auto bg-white px-4 pb-4 pt-6 shadow-lg shadow-zinc-900/10 ring-1 ring-zinc-900/7.5 min-[416px]:max-w-sm sm:px-6 sm:pb-10 dark:bg-zinc-900 dark:ring-zinc-800"
>
<Navigation />
</motion.div>

10
components/Property.tsx
View file

@ -16,7 +16,7 @@ export function Properties({
}: { children: ReactNode; name: string }) {
return (
<div className="my-6">
<ul className="m-0 max-w-[calc(theme(maxWidth.lg)-theme(spacing.8))] list-none divide-y divide-zinc-900/5 p-0 dark:divide-white/5">
<ul className="m-0! max-w-[calc(var(--container-lg)-(--spacing(8)))] list-none divide-y divide-zinc-900/5 p-0 dark:divide-white/5">
<PropertyContext.Provider value={{ name }}>
{children}
</PropertyContext.Provider>
@ -58,18 +58,18 @@ export function Property({
const id = `${idFormat(contextName)}-${idFormat(name)}`;
return (
<li className="m-0 px-0 py-4 first:pt-0 last:pb-0 group">
<li className="m-0! px-0 py-4 first:pt-0 last:pb-0 group">
<Link
href={`#${id}`}
className="absolute ml-[calc(-1*var(--width))] mt-1 hidden w-[var(--width)] opacity-0 transition [--width:calc(2.625rem+0.5px+50%-min(50%,calc(theme(maxWidth.lg)+theme(spacing.8))))] group-hover:opacity-100 group-focus:opacity-100 md:block lg:z-50 2xl:[--width:theme(spacing.10)]"
className="absolute ml-[calc(-1*var(--width))] mt-1 hidden w-(--width) opacity-0 transition [--width:calc(2.625rem+0.5px+50%-min(50%,calc(var(--container-lg)+(--spacing(8)))))] group-hover:opacity-100 group-focus:opacity-100 md:block lg:z-50 2xl:[--width:--spacing(10)]"
>
<div className="group/anchor block h-5 w-5 rounded bg-zinc-50 ring-1 ring-inset ring-zinc-300 transition hover:ring-zinc-500 dark:bg-zinc-800 dark:ring-zinc-700 dark:hover:bg-zinc-700 dark:hover:ring-zinc-600">
<div className="group/anchor block h-5 w-5 rounded-sm bg-zinc-50 ring-1 ring-inset ring-zinc-300 transition hover:ring-zinc-500 dark:bg-zinc-800 dark:ring-zinc-700 dark:hover:bg-zinc-700 dark:hover:ring-zinc-600">
<AnchorIcon className="h-5 w-5 stroke-zinc-500 transition dark:stroke-zinc-400 dark:group-hover/anchor:stroke-white" />
</div>
</Link>
<dl
id={id}
className="m-0 flex flex-wrap items-center gap-x-3 gap-y-2 scroll-mt-24 target:ring-2 ring-brand-500 ring-offset-8 dark:ring-offset-zinc-900"
className="m-0! flex flex-wrap items-center gap-x-3 gap-y-2 scroll-mt-24 target:ring-2 ring-brand-500 ring-offset-8 dark:ring-offset-zinc-900"
>
<dt className="sr-only">Name</dt>
<dd>

2
components/Prose.tsx
View file

@ -17,7 +17,7 @@ export function Prose<T extends ElementType = "div">({
className,
"prose dark:prose-invert",
// `html :where(& > *)` is used to select all direct children without an increase in specificity like you'd get from just `& > *`
"[html_:where(&>*)]:mx-auto [html_:where(&>*)]:max-w-2xl [html_:where(&>*)]:lg:mx-[calc(50%-min(50%,theme(maxWidth.lg)))] [html_:where(&>*)]:lg:max-w-3xl",
"[html_:where(&>*)]:mx-auto [html_:where(&>*)]:max-w-2xl lg:[html_:where(&>*)]:mx-[calc(50%-min(50%,var(--container-lg)))] lg:[html_:where(&>*)]:max-w-3xl",
)}
{...props}
/>

4
components/Resources.tsx
View file

@ -80,7 +80,7 @@ function ResourcePattern({
return (
<div className="pointer-events-none">
<div className="absolute inset-0 rounded-md transition duration-300 [mask-image:linear-gradient(white,transparent)] group-hover:opacity-50">
<div className="absolute inset-0 rounded-md transition duration-300 mask-[linear-gradient(white,transparent)] group-hover:opacity-50">
<GridPattern
width={72}
height={56}
@ -90,7 +90,7 @@ function ResourcePattern({
/>
</div>
<motion.div
className="absolute inset-0 rounded-md bg-gradient-to-r from-brand-100 to-brand-50 opacity-0 transition duration-300 group-hover:opacity-100 dark:from-brand-900/30 dark:to-brand-950/30"
className="absolute inset-0 rounded-md bg-linear-to-r from-brand-100 to-brand-50 opacity-0 transition duration-300 group-hover:opacity-100 dark:from-brand-900/30 dark:to-brand-950/30"
style={style}
/>
<motion.div

20
components/Search.tsx
View file

@ -17,7 +17,7 @@ import clsx from "clsx";
import { useRouter } from "next/navigation";
import {
type ComponentPropsWithoutRef,
type ElementRef,
type ComponentRef,
Fragment,
type MouseEvent,
type KeyboardEvent as ReactKeyboardEvent,
@ -283,7 +283,7 @@ function SearchResults({
}
const SearchInput = forwardRef<
ElementRef<"input">,
ComponentRef<"input">,
{
autocomplete: Autocomplete;
autocompleteState: AutocompleteState<Result> | EmptyObject;
@ -299,7 +299,7 @@ const SearchInput = forwardRef<
ref={inputRef}
data-autofocus={true}
className={clsx(
"flex-auto appearance-none bg-transparent pl-10 text-zinc-900 outline-none placeholder:text-zinc-500 focus:w-full focus:flex-none sm:text-sm dark:text-white [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden",
"flex-auto appearance-none bg-transparent pl-10 text-zinc-900 outline-hidden placeholder:text-zinc-500 focus:w-full focus:flex-none sm:text-sm dark:text-white [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden",
autocompleteState.status === "stalled" ? "pr-11" : "pr-4",
)}
{...inputProps}
@ -354,9 +354,9 @@ function SearchDialog({
setOpen: (open: boolean) => void;
className?: string;
}) {
const formRef = useRef<ElementRef<"form">>(null);
const panelRef = useRef<ElementRef<"div">>(null);
const inputRef = useRef<ElementRef<typeof SearchInput>>(null);
const formRef = useRef<ComponentRef<"form">>(null);
const panelRef = useRef<ComponentRef<"div">>(null);
const inputRef = useRef<ComponentRef<typeof SearchInput>>(null);
const { autocomplete, autocompleteState } = useAutocomplete({
close() {
setOpen(false);
@ -400,7 +400,7 @@ function SearchDialog({
leaveFrom="opacity-100"
leaveTo="opacity-0"
>
<div className="fixed inset-0 bg-zinc-400/25 backdrop-blur-sm dark:bg-black/40" />
<div className="fixed inset-0 bg-zinc-400/25 backdrop-blur-xs dark:bg-black/40" />
</TransitionChild>
<div className="fixed inset-0 overflow-y-auto px-4 py-4 sm:px-6 sm:py-20 md:py-32 lg:px-8 lg:py-[15vh]">
@ -456,7 +456,7 @@ function SearchDialog({
}
function useSearchProps() {
const buttonRef = useRef<ElementRef<"button">>(null);
const buttonRef = useRef<ComponentRef<"button">>(null);
const [open, setOpen] = useState(false);
return {
@ -493,7 +493,7 @@ export function Search() {
<div className="hidden lg:block lg:max-w-md lg:flex-auto">
<button
type="button"
className="hidden h-8 w-full items-center gap-2 rounded-md bg-white pl-2 pr-3 text-sm text-zinc-500 ring-1 ring-zinc-900/10 transition hover:ring-zinc-900/20 ui-not-focus-visible:outline-none lg:flex dark:bg-white/5 dark:text-zinc-400 dark:ring-inset dark:ring-white/10 dark:hover:ring-white/20"
className="hidden h-8 w-full items-center gap-2 rounded-md bg-white pl-2 pr-3 text-sm text-zinc-500 ring-1 ring-zinc-900/10 transition hover:ring-zinc-900/20 ui-not-focus-visible:outline-hidden lg:flex dark:bg-white/5 dark:text-zinc-400 dark:ring-inset dark:ring-white/10 dark:hover:ring-white/20"
{...buttonProps}
>
<SearchIcon className="h-5 w-5 stroke-current" />
@ -517,7 +517,7 @@ export function MobileSearch() {
<div className="contents lg:hidden">
<button
type="button"
className="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 ui-not-focus-visible:outline-none lg:hidden dark:hover:bg-white/5"
className="flex h-6 w-6 items-center justify-center rounded-md transition hover:bg-zinc-900/5 ui-not-focus-visible:outline-hidden lg:hidden dark:hover:bg-white/5"
aria-label="Find something..."
{...buttonProps}
>

2
components/Team.tsx
View file

@ -36,7 +36,7 @@ export const TeamMember: FC<{
<ul className="pt-6 mt-auto flex gap-5 list-none px-6 flex-wrap">
{socials?.map((social) => (
<li className="!m-0" key={social.name}>
<li className="m-0!" key={social.name}>
<a
href={social.url}
target="_blank"

2
components/mdx.tsx
View file

@ -46,7 +46,7 @@ function InfoIcon(props: ComponentPropsWithoutRef<"svg">) {
export function Note({ children }: { children: ReactNode }) {
return (
<div className="my-6 flex gap-2.5 rounded-md border border-brand-500/20 bg-brand-50/50 p-4 leading-6 text-brand-900 dark:border-brand-500/30 dark:bg-brand-500/5 dark:text-brand-200 dark:[--tw-prose-links-hover:theme(colors.brand.300)] dark:[--tw-prose-links:theme(colors.white)]">
<div className="my-6 flex gap-2.5 rounded-md border border-brand-500/20 bg-brand-50/50 p-4 leading-6 text-brand-900 dark:border-brand-500/30 dark:bg-brand-500/5 dark:text-brand-200 dark:[--tw-prose-links-hover:var(--color-brand-300)] dark:[--tw-prose-links:var(--color-white)]">
<InfoIcon className="mt-1 h-4 w-4 flex-none fill-brand-500 stroke-white dark:fill-brand-200/20 dark:stroke-brand-200" />
<div className="[&>:first-child]:mt-0 [&>:last-child]:mb-0">
{children}