From 049f5abbe00c8cabc71a74c9a6395624a38dbc3a Mon Sep 17 00:00:00 2001
From: Colum Kelly <columk1@users.noreply.github.com>
Date: Mon, 17 Nov 2025 22:12:29 -0800
Subject: [PATCH] chore(templates): replace arbitrary values with v4 utilities

---
 .../ecommerce/src/app/(app)/(account)/layout.tsx |  4 +---
 .../src/blocks/ArchiveBlock/Component.tsx        |  2 +-
 .../src/blocks/CallToAction/Component.tsx        |  2 +-
 .../ecommerce/src/blocks/Form/Component.tsx      |  2 +-
 .../src/components/AccountNav/index.tsx          | 16 ++++++++--------
 .../src/components/Cart/DeleteItemButton.tsx     |  2 +-
 .../src/components/CategoryTabs/Item.tsx         |  4 ++--
 .../ecommerce/src/components/Footer/index.tsx    |  2 +-
 templates/ecommerce/src/components/Logo/Logo.tsx |  2 +-
 .../ecommerce/src/components/OrderItem/index.tsx |  2 +-
 .../src/components/OrderStatus/index.tsx         |  2 +-
 .../src/components/ProductGridItem/index.tsx     |  2 +-
 .../src/components/ProductItem/index.tsx         |  2 +-
 .../ecommerce/src/components/RichText/index.tsx  |  2 +-
 .../src/components/checkout/CheckoutPage.tsx     |  2 +-
 templates/ecommerce/src/components/ui/button.tsx |  4 ++--
 templates/ecommerce/src/components/ui/select.tsx |  6 +++---
 .../ecommerce/src/heros/HighImpact/index.tsx     |  2 +-
 .../ecommerce/src/heros/LowImpact/index.tsx      |  2 +-
 19 files changed, 30 insertions(+), 32 deletions(-)

diff --git a/templates/ecommerce/src/app/(app)/(account)/layout.tsx b/templates/ecommerce/src/app/(app)/(account)/layout.tsx
index d8f3626d73d..da147365370 100644
--- a/templates/ecommerce/src/app/(app)/(account)/layout.tsx
+++ b/templates/ecommerce/src/app/(app)/(account)/layout.tsx
@@ -18,9 +18,7 @@ export default async function RootLayout({ children }: { children: ReactNode })
       </div>
 
       <div className="container mt-16 pb-8 flex gap-8">
-        {user && (
-          <AccountNav className="max-w-[15.5rem] grow flex-col items-start gap-4 hidden md:flex" />
-        )}
+        {user && <AccountNav className="max-w-62 grow flex-col items-start gap-4 hidden md:flex" />}
 
         <div className="flex flex-col gap-12 grow">{children}</div>
       </div>
diff --git a/templates/ecommerce/src/blocks/ArchiveBlock/Component.tsx b/templates/ecommerce/src/blocks/ArchiveBlock/Component.tsx
index 8bc254ed9fa..4eafdf6c37d 100644
--- a/templates/ecommerce/src/blocks/ArchiveBlock/Component.tsx
+++ b/templates/ecommerce/src/blocks/ArchiveBlock/Component.tsx
@@ -57,7 +57,7 @@ export const ArchiveBlock: React.FC<
     <div className="my-16" id={`block-${id}`}>
       {introContent && (
         <div className="container mb-16">
-          <RichText className="ml-0 max-w-[48rem]" data={introContent} enableGutter={false} />
+          <RichText className="ml-0 max-w-3xl" data={introContent} enableGutter={false} />
         </div>
       )}
       <CollectionArchive posts={posts} />
diff --git a/templates/ecommerce/src/blocks/CallToAction/Component.tsx b/templates/ecommerce/src/blocks/CallToAction/Component.tsx
index 5b0a5620d85..e27fc1016f2 100644
--- a/templates/ecommerce/src/blocks/CallToAction/Component.tsx
+++ b/templates/ecommerce/src/blocks/CallToAction/Component.tsx
@@ -13,7 +13,7 @@ export const CallToActionBlock: React.FC<
   return (
     <div className="container">
       <div className="bg-card rounded border-border border p-4 flex flex-col gap-8 md:flex-row md:justify-between md:items-center">
-        <div className="max-w-[48rem] flex items-center">
+        <div className="max-w-3xl flex items-center">
           {richText && <RichText className="mb-0" data={richText} enableGutter={false} />}
         </div>
         <div className="flex flex-col gap-8">
diff --git a/templates/ecommerce/src/blocks/Form/Component.tsx b/templates/ecommerce/src/blocks/Form/Component.tsx
index e1aa95dc1e3..df4e8df54a6 100644
--- a/templates/ecommerce/src/blocks/Form/Component.tsx
+++ b/templates/ecommerce/src/blocks/Form/Component.tsx
@@ -126,7 +126,7 @@ export const FormBlock: React.FC<
   )
 
   return (
-    <div className="container lg:max-w-[48rem]">
+    <div className="container lg:max-w-3xl">
       {enableIntro && introContent && !hasSubmitted && (
         <RichText className="mb-8 lg:mb-12" data={introContent} enableGutter={false} />
       )}
diff --git a/templates/ecommerce/src/components/AccountNav/index.tsx b/templates/ecommerce/src/components/AccountNav/index.tsx
index 1aa6cd31466..a6f19f7da75 100644
--- a/templates/ecommerce/src/components/AccountNav/index.tsx
+++ b/templates/ecommerce/src/components/AccountNav/index.tsx
@@ -19,8 +19,8 @@ export const AccountNav: React.FC<Props> = ({ className }) => {
           <Button asChild variant="link">
             <Link
               href="/account"
-              className={clsx('text-primary/50 hover:text-primary/100 hover:no-underline', {
-                'text-primary/100': pathname === '/account',
+              className={clsx('text-primary/50 hover:text-primary hover:no-underline', {
+                'text-primary': pathname === '/account',
               })}
             >
               Account settings
@@ -32,8 +32,8 @@ export const AccountNav: React.FC<Props> = ({ className }) => {
           <Button asChild variant="link">
             <Link
               href="/account/addresses"
-              className={clsx('text-primary/50 hover:text-primary/100 hover:no-underline', {
-                'text-primary/100': pathname === '/account/addresses',
+              className={clsx('text-primary/50 hover:text-primary hover:no-underline', {
+                'text-primary': pathname === '/account/addresses',
               })}
             >
               Addresses
@@ -45,8 +45,8 @@ export const AccountNav: React.FC<Props> = ({ className }) => {
           <Button
             asChild
             variant="link"
-            className={clsx('text-primary/50 hover:text-primary/100 hover:no-underline', {
-              'text-primary/100': pathname === '/orders' || pathname.includes('/orders'),
+            className={clsx('text-primary/50 hover:text-primary hover:no-underline', {
+              'text-primary': pathname === '/orders' || pathname.includes('/orders'),
             })}
           >
             <Link href="/orders">Orders</Link>
@@ -59,8 +59,8 @@ export const AccountNav: React.FC<Props> = ({ className }) => {
       <Button
         asChild
         variant="link"
-        className={clsx('text-primary/50 hover:text-primary/100 hover:no-underline', {
-          'text-primary/100': pathname === '/logout',
+        className={clsx('text-primary/50 hover:text-primary hover:no-underline', {
+          'text-primary': pathname === '/logout',
         })}
       >
         <Link href="/logout">Log out</Link>
diff --git a/templates/ecommerce/src/components/Cart/DeleteItemButton.tsx b/templates/ecommerce/src/components/Cart/DeleteItemButton.tsx
index 9720cf41243..9f319917c92 100644
--- a/templates/ecommerce/src/components/Cart/DeleteItemButton.tsx
+++ b/templates/ecommerce/src/components/Cart/DeleteItemButton.tsx
@@ -28,7 +28,7 @@ export function DeleteItemButton({ item }: { item: CartItem }) {
         }}
         type="button"
       >
-        <XIcon className="hover:text-accent-3 mx-[1px] h-4 w-4 text-white dark:text-black" />
+        <XIcon className="hover:text-accent-3 mx-px h-4 w-4 text-white dark:text-black" />
       </button>
     </form>
   )
diff --git a/templates/ecommerce/src/components/CategoryTabs/Item.tsx b/templates/ecommerce/src/components/CategoryTabs/Item.tsx
index ddc519d44aa..eefe49845a2 100644
--- a/templates/ecommerce/src/components/CategoryTabs/Item.tsx
+++ b/templates/ecommerce/src/components/CategoryTabs/Item.tsx
@@ -19,9 +19,9 @@ export function Item({ href, title }: Props) {
     <li className="mt-2 flex text-sm text-black dark:text-white">
       <DynamicTag
         className={clsx(
-          'w-full font-mono uppercase text-primary/50 px-2 text-sm py-1 rounded-md hover:bg-white/5 hover:text-primary/100',
+          'w-full font-mono uppercase text-primary/50 px-2 text-sm py-1 rounded-md hover:bg-white/5 hover:text-primary',
           {
-            'bg-white/5 text-primary/100': active,
+            'bg-white/5 text-primary': active,
           },
         )}
         href={href}
diff --git a/templates/ecommerce/src/components/Footer/index.tsx b/templates/ecommerce/src/components/Footer/index.tsx
index 919a3a11ab7..426d671dc9e 100644
--- a/templates/ecommerce/src/components/Footer/index.tsx
+++ b/templates/ecommerce/src/components/Footer/index.tsx
@@ -53,7 +53,7 @@ export async function Footer() {
             &copy; {copyrightDate} {copyrightName}
             {copyrightName.length && !copyrightName.endsWith('.') ? '.' : ''} All rights reserved.
           </p>
-          <hr className="mx-4 hidden h-4 w-[1px] border-l border-neutral-400 md:inline-block" />
+          <hr className="mx-4 hidden h-4 w-px border-l border-neutral-400 md:inline-block" />
           <p>Designed in Michigan</p>
           <p className="md:ml-auto">
             <a className="text-black dark:text-white" href="https://payloadcms.com">
diff --git a/templates/ecommerce/src/components/Logo/Logo.tsx b/templates/ecommerce/src/components/Logo/Logo.tsx
index b62b95aaf4e..a4a6ebbba1a 100644
--- a/templates/ecommerce/src/components/Logo/Logo.tsx
+++ b/templates/ecommerce/src/components/Logo/Logo.tsx
@@ -5,7 +5,7 @@ export const Logo = () => {
     /* eslint-disable @next/next/no-img-element */
     <img
       alt="Payload Logo"
-      className="max-w-[9.375rem] invert dark:invert-0"
+      className="max-w-37.5 invert dark:invert-0"
       src="https://raw.githubusercontent.com/payloadcms/payload/main/packages/payload/src/admin/assets/images/payload-logo-light.svg"
     />
   )
diff --git a/templates/ecommerce/src/components/OrderItem/index.tsx b/templates/ecommerce/src/components/OrderItem/index.tsx
index cadc37eb45a..3c0f43be4ec 100644
--- a/templates/ecommerce/src/components/OrderItem/index.tsx
+++ b/templates/ecommerce/src/components/OrderItem/index.tsx
@@ -15,7 +15,7 @@ export const OrderItem: React.FC<Props> = ({ order }) => {
   return (
     <div className="bg-card border rounded-lg px-4 py-2 md:px-6 md:py-4 flex flex-col sm:flex-row gap-12 sm:items-center sm:justify-between">
       <div className="flex flex-col gap-4">
-        <h3 className="text-sm uppercase font-mono tracking-[0.1em] text-primary/50 truncate max-w-[8rem] sm:max-w-none">{`#${order.id}`}</h3>
+        <h3 className="text-sm uppercase font-mono tracking-widest text-primary/50 truncate max-w-32 sm:max-w-none">{`#${order.id}`}</h3>
 
         <div className="flex flex-col-reverse sm:flex-row sm:items-center gap-6">
           <p className="text-xl">
diff --git a/templates/ecommerce/src/components/OrderStatus/index.tsx b/templates/ecommerce/src/components/OrderStatus/index.tsx
index cca56223186..ed8a0df5385 100644
--- a/templates/ecommerce/src/components/OrderStatus/index.tsx
+++ b/templates/ecommerce/src/components/OrderStatus/index.tsx
@@ -10,7 +10,7 @@ export const OrderStatus: React.FC<Props> = ({ status, className }) => {
   return (
     <div
       className={cn(
-        'text-xs tracking-[0.1em] font-mono uppercase py-0 px-2 rounded w-fit',
+        'text-xs tracking-widest font-mono uppercase py-0 px-2 rounded w-fit',
         className,
         {
           'bg-primary/10': status === 'processing',
diff --git a/templates/ecommerce/src/components/ProductGridItem/index.tsx b/templates/ecommerce/src/components/ProductGridItem/index.tsx
index 23313024be1..64926c314b9 100644
--- a/templates/ecommerce/src/components/ProductGridItem/index.tsx
+++ b/templates/ecommerce/src/components/ProductGridItem/index.tsx
@@ -48,7 +48,7 @@ export const ProductGridItem: React.FC<Props> = ({ product }) => {
         />
       ) : null}
 
-      <div className="font-mono text-primary/50 group-hover:text-primary/100 flex justify-between items-center mt-4">
+      <div className="font-mono text-primary/50 group-hover:text-primary flex justify-between items-center mt-4">
         <div>{title}</div>
 
         {typeof price === 'number' && (
diff --git a/templates/ecommerce/src/components/ProductItem/index.tsx b/templates/ecommerce/src/components/ProductItem/index.tsx
index efe3a085f3e..cdd2e847d50 100644
--- a/templates/ecommerce/src/components/ProductItem/index.tsx
+++ b/templates/ecommerce/src/components/ProductItem/index.tsx
@@ -73,7 +73,7 @@ export const ProductItem: React.FC<Props> = ({
             <Link href={itemURL}>{title}</Link>
           </p>
           {variant && (
-            <p className="text-sm font-mono text-primary/50 tracking-[0.1em]">
+            <p className="text-sm font-mono text-primary/50 tracking-widest">
               {variant.options
                 ?.map((option) => {
                   if (typeof option === 'object') return option.label
diff --git a/templates/ecommerce/src/components/RichText/index.tsx b/templates/ecommerce/src/components/RichText/index.tsx
index 6839ad6ff9f..2ec29a58535 100644
--- a/templates/ecommerce/src/components/RichText/index.tsx
+++ b/templates/ecommerce/src/components/RichText/index.tsx
@@ -30,7 +30,7 @@ const jsxConverters: JSXConvertersFunction<NodeTypes> = ({ defaultConverters })
         className="col-start-1 col-span-3"
         imgClassName="m-0"
         {...node.fields}
-        captionClassName="mx-auto max-w-[48rem]"
+        captionClassName="mx-auto max-w-3xl"
         enableGutter={false}
         disableInnerContainer={true}
       />
diff --git a/templates/ecommerce/src/components/checkout/CheckoutPage.tsx b/templates/ecommerce/src/components/checkout/CheckoutPage.tsx
index 04d539a5bdf..c618938d910 100644
--- a/templates/ecommerce/src/components/checkout/CheckoutPage.tsx
+++ b/templates/ecommerce/src/components/checkout/CheckoutPage.tsx
@@ -406,7 +406,7 @@ export const CheckoutPage: React.FC = () => {
                     <div className="flex flex-col gap-1">
                       <p className="font-medium text-lg">{title}</p>
                       {variant && typeof variant === 'object' && (
-                        <p className="text-sm font-mono text-primary/50 tracking-[0.1em]">
+                        <p className="text-sm font-mono text-primary/50 tracking-widest">
                           {variant.options
                             ?.map((option) => {
                               if (typeof option === 'object') return option.label
diff --git a/templates/ecommerce/src/components/ui/button.tsx b/templates/ecommerce/src/components/ui/button.tsx
index 02356f746ed..2af71248e84 100644
--- a/templates/ecommerce/src/components/ui/button.tsx
+++ b/templates/ecommerce/src/components/ui/button.tsx
@@ -16,9 +16,9 @@ const buttonVariants = cva(
           'border border-input bg-card shadow-xs hover:bg-accent hover:bg-primary-foreground',
         secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',
         ghost:
-          'text-primary/50 hover:text-primary/100 [&.active]:text-primary/100 py-2 px-4 uppercase font-mono tracking-[0.1em] text-xs',
+          'text-primary/50 hover:text-primary [&.active]:text-primary py-2 px-4 uppercase font-mono tracking-widest text-xs',
         link: 'text-primary underline-offset-4 hover:underline',
-        nav: 'text-primary/50 hover:text-primary/100 [&.active]:text-primary/100 p-0 pt-2 pb-6 uppercase font-mono tracking-[0.1em] text-xs',
+        nav: 'text-primary/50 hover:text-primary [&.active]:text-primary p-0 pt-2 pb-6 uppercase font-mono tracking-widest text-xs',
       },
       size: {
         clear: '',
diff --git a/templates/ecommerce/src/components/ui/select.tsx b/templates/ecommerce/src/components/ui/select.tsx
index db05583b367..079bee97968 100644
--- a/templates/ecommerce/src/components/ui/select.tsx
+++ b/templates/ecommerce/src/components/ui/select.tsx
@@ -27,7 +27,7 @@ function SelectTrigger({
     <SelectPrimitive.Trigger
       data-slot="select-trigger"
       className={cn(
-        "border-input mb-2 data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-9 w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        "border-input mb-2 data-placeholder:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive flex h-9 w-fit items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
         className,
       )}
       {...props}
@@ -63,7 +63,7 @@ function SelectContent({
         <SelectPrimitive.Viewport
           className={cn(
             'p-1',
-            position === 'popper' && 'h-[var(--radix-select-trigger-height)] w-full  scroll-my-1',
+            position === 'popper' && 'h-(--radix-select-trigger-height) w-full  scroll-my-1',
           )}
         >
           {children}
@@ -93,7 +93,7 @@ function SelectItem({
     <SelectPrimitive.Item
       data-slot="select-item"
       className={cn(
-        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        "focus:bg-accent focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
         className,
       )}
       {...props}
diff --git a/templates/ecommerce/src/heros/HighImpact/index.tsx b/templates/ecommerce/src/heros/HighImpact/index.tsx
index 0396d2e3727..5b96734165e 100644
--- a/templates/ecommerce/src/heros/HighImpact/index.tsx
+++ b/templates/ecommerce/src/heros/HighImpact/index.tsx
@@ -21,7 +21,7 @@ export const HighImpactHero: React.FC<Page['hero']> = ({ links, media, richText
       data-theme="dark"
     >
       <div className="container mb-8 z-10 relative flex items-center justify-center">
-        <div className="max-w-[36.5rem] md:text-center">
+        <div className="max-w-146 md:text-center">
           {richText && <RichText className="mb-6" data={richText} enableGutter={false} />}
           {Array.isArray(links) && links.length > 0 && (
             <ul className="flex md:justify-center gap-4">
diff --git a/templates/ecommerce/src/heros/LowImpact/index.tsx b/templates/ecommerce/src/heros/LowImpact/index.tsx
index 3685c9e665d..2ea4e713e31 100644
--- a/templates/ecommerce/src/heros/LowImpact/index.tsx
+++ b/templates/ecommerce/src/heros/LowImpact/index.tsx
@@ -17,7 +17,7 @@ type LowImpactHeroType =
 export const LowImpactHero: React.FC<LowImpactHeroType> = ({ children, richText }) => {
   return (
     <div className="container mt-16">
-      <div className="max-w-[48rem]">
+      <div className="max-w-3xl">
         {children || (richText && <RichText data={richText} enableGutter={false} />)}
       </div>
     </div>