From b7009e387b1f387cf7b65ecb3de7e4b60a8e3df5 Mon Sep 17 00:00:00 2001 From: Aarnav Tale Date: Thu, 29 May 2025 09:45:47 -0400 Subject: [PATCH] feat: upgrade to tailwindcss v4 --- app/components/Attribute.tsx | 6 +- app/components/Button.tsx | 2 +- app/components/Card.tsx | 2 +- app/components/Code.tsx | 6 +- app/components/Dialog.tsx | 2 +- app/components/Footer.tsx | 2 +- app/components/Header.tsx | 4 +- app/components/IconButton.tsx | 2 +- app/components/Input.tsx | 2 +- app/components/Link.tsx | 2 +- app/components/Menu.tsx | 4 +- app/components/NumberInput.tsx | 4 +- app/components/Options.tsx | 2 +- app/components/Popover.tsx | 2 +- app/components/Select.tsx | 8 +- app/components/Switch.tsx | 4 +- app/components/Tabs.tsx | 2 +- app/components/Tooltip.tsx | 4 +- app/routes/dns/components/manage-domains.tsx | 4 +- app/routes/dns/overview.tsx | 2 +- .../machines/components/machine-row.tsx | 6 +- app/routes/machines/dialogs/tags.tsx | 4 +- app/routes/settings/local-agent.tsx | 2 +- app/routes/settings/overview.tsx | 2 +- app/routes/settings/restrictions/overview.tsx | 2 +- app/tailwind.css | 91 +- package.json | 13 +- patches/@shopify__lang-jsonc@1.0.0.patch | 44 - pnpm-lock.yaml | 1283 +++-------------- tailwind.config.ts | 74 - vite.config.ts | 15 +- 31 files changed, 374 insertions(+), 1228 deletions(-) delete mode 100644 patches/@shopify__lang-jsonc@1.0.0.patch delete mode 100644 tailwind.config.ts diff --git a/app/components/Attribute.tsx b/app/components/Attribute.tsx index 9e2c7dd..10d8c1e 100644 --- a/app/components/Attribute.tsx +++ b/app/components/Attribute.tsx @@ -38,7 +38,7 @@ export default function Attribute({ 'min-w-0 px-1.5 py-1 rounded-lg border border-transparent', ...(isCopyable ? [ - 'cursor-pointer hover:shadow-sm', + 'cursor-pointer hover:shadow-xs', 'hover:bg-headplane-50 dark:hover:bg-headplane-800', 'hover:border-headplane-100 dark:hover:border-headplane-700', ] @@ -70,8 +70,8 @@ export default function Attribute({ {isCopyable ? (
- - + +
) : undefined} diff --git a/app/components/Button.tsx b/app/components/Button.tsx index 62b1a70..0e8b150 100644 --- a/app/components/Button.tsx +++ b/app/components/Button.tsx @@ -20,7 +20,7 @@ export default function Button({ variant = 'light', ...props }: ButtonProps) { {...buttonProps} className={cn( 'w-fit text-sm rounded-xl px-3 py-2', - 'focus:outline-none focus:ring', + 'focus:outline-hidden focus:ring-3', props.isDisabled && 'opacity-60 cursor-not-allowed', ...(variant === 'heavy' ? [ diff --git a/app/components/Card.tsx b/app/components/Card.tsx index 05673ac..b219d48 100644 --- a/app/components/Card.tsx +++ b/app/components/Card.tsx @@ -15,7 +15,7 @@ function Card({ variant = 'raised', ...props }: Props) { 'w-full max-w-md rounded-3xl p-5', variant === 'flat' ? 'bg-transparent shadow-none' - : 'bg-headplane-50/50 dark:bg-headplane-950/50 shadow-sm', + : 'bg-headplane-50/50 dark:bg-headplane-950/50 shadow-xs', 'border border-headplane-100 dark:border-headplane-800', props.className, )} diff --git a/app/components/Code.tsx b/app/components/Code.tsx index 6b64ce4..f973554 100644 --- a/app/components/Code.tsx +++ b/app/components/Code.tsx @@ -13,7 +13,7 @@ export default function Code({ isCopyable, children, className }: CodeProps) { - - + + )} diff --git a/app/components/Dialog.tsx b/app/components/Dialog.tsx index d0de911..d30d25c 100644 --- a/app/components/Dialog.tsx +++ b/app/components/Dialog.tsx @@ -117,7 +117,7 @@ function Panel(props: DialogPanelProps) { method={method ?? 'POST'} ref={ref} className={cn( - 'outline-none rounded-3xl w-full max-w-lg', + 'outline-hidden rounded-3xl w-full max-w-lg', 'bg-white dark:bg-headplane-900', )} > diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx index 7273bec..30b2e59 100644 --- a/app/components/Footer.tsx +++ b/app/components/Footer.tsx @@ -46,7 +46,7 @@ export default function Footer({ url, debug, healthy }: FooterProps) { tabIndex={0} // Allows keyboard focus className={cn( 'blur-sm hover:blur-none focus:blur-none transition', - 'focus:outline-none focus:ring-2 rounded-sm', + 'focus:outline-hidden focus:ring-2 rounded-xs', )} > {url} diff --git a/app/components/Header.tsx b/app/components/Header.tsx index 4387240..3d57642 100644 --- a/app/components/Header.tsx +++ b/app/components/Header.tsx @@ -50,7 +50,7 @@ function TabLink({ name, to, icon }: TabLinkProps) { 'after:absolute after:bottom-0 after:left-3 after:right-3', 'after:h-0.5 after:bg-headplane-900 dark:after:bg-headplane-200', 'hover:bg-headplane-200 dark:hover:bg-headplane-900', - 'focus:outline-none focus:ring', + 'focus:outline-hidden focus:ring-3', isActive ? 'after:visible' : 'after:invisible', ) } @@ -69,7 +69,7 @@ function Link({ href, text }: LinkProps) { rel="noreferrer" className={cn( 'hidden sm:block hover:underline text-sm', - 'focus:outline-none focus:ring rounded-md', + 'focus:outline-hidden focus:ring-3 rounded-md', )} > {text} diff --git a/app/components/IconButton.tsx b/app/components/IconButton.tsx index a3d6b32..0dcaf08 100644 --- a/app/components/IconButton.tsx +++ b/app/components/IconButton.tsx @@ -25,7 +25,7 @@ export default function IconButton({ aria-label={props.label} className={cn( 'rounded-full flex items-center justify-center p-1', - 'focus:outline-none focus:ring', + 'focus:outline-hidden focus:ring-3', props.isDisabled && 'opacity-60 cursor-not-allowed', ...(variant === 'heavy' ? [ diff --git a/app/components/Input.tsx b/app/components/Input.tsx index 3e94ee5..a402263 100644 --- a/app/components/Input.tsx +++ b/app/components/Input.tsx @@ -54,7 +54,7 @@ export default function Input(props: InputProps) { ref={ref} className={cn( 'rounded-xl px-3 py-2', - 'focus:outline-none focus:ring', + 'focus:outline-hidden focus:ring-3', 'bg-white dark:bg-headplane-900', 'border border-headplane-100 dark:border-headplane-800', className, diff --git a/app/components/Link.tsx b/app/components/Link.tsx index 4eecced..4f06b80 100644 --- a/app/components/Link.tsx +++ b/app/components/Link.tsx @@ -24,7 +24,7 @@ export default function Link({ 'inline-flex items-center gap-x-0.5', 'text-blue-500 hover:text-blue-700', 'dark:text-blue-400 dark:hover:text-blue-300', - 'focus:outline-none focus:ring rounded-md', + 'focus:outline-hidden focus:ring-3 rounded-md', className, )} > diff --git a/app/components/Menu.tsx b/app/components/Menu.tsx index fbef87a..c0092ae 100644 --- a/app/components/Menu.tsx +++ b/app/components/Menu.tsx @@ -74,7 +74,7 @@ function Panel(props: MenuPanelProps) {