Add touch-hitbox utility (#523)

thomasKn · thomasKn · commit c544c45bd926 · 2025-08-05T21:03:39.000-04:00
Also replace touch and notouch by pointer-coarse and pointer-fine
diff --git a/app/components/blocks/shopify-description-block.tsx b/app/components/blocks/shopify-description-block.tsx
@@ -14,7 +14,7 @@ export function ShopifyDescriptionBlock(props: ShopifyDescriptionBlockProps) {
 
   return (
     <div
-      className="[&_a]:text-primary touch:[&_a]:active:underline notouch:[&_a]:hover:underline [&_a]:underline-offset-4"
+      className="[&_a]:text-primary [&_a]:underline-offset-4 pointer-coarse:[&_a]:active:underline pointer-fine:[&_a]:hover:underline"
       dangerouslySetInnerHTML={{
         __html: product.descriptionHtml,
       }}
diff --git a/app/components/collection/sort-filter-layout.tsx b/app/components/collection/sort-filter-layout.tsx
@@ -70,7 +70,7 @@ export function SortFilter({
   return (
     <>
       {/* Desktop layout */}
-      <div className="touch:hidden hidden w-full lg:flex lg:items-center lg:justify-between">
+      <div className="hidden w-full lg:flex lg:items-center lg:justify-between pointer-coarse:hidden">
         <div className="flex items-center gap-2">
           <IconButton onClick={() => setIsOpen(!isOpen)}>
             <span className="sr-only">
@@ -108,7 +108,7 @@ export function SortFilter({
         <div className="mt-6">
           <div
             className={cn([
-              'touch:hidden hidden lg:block',
+              'hidden lg:block pointer-coarse:hidden',
               'transition-all duration-200',
               isOpen
                 ? 'sticky top-[calc(var(--desktopHeaderHeight)_+_1rem)] opacity-100 md:w-[240px] md:min-w-[240px] md:pr-8'
diff --git a/app/components/collection/sort-mobile-drawer.client.tsx b/app/components/collection/sort-mobile-drawer.client.tsx
@@ -39,7 +39,7 @@ export function MobileDrawer({
   const {pending} = useOptimisticNavigationData<boolean>('clear-all-filters');
 
   return (
-    <div className="touch:block lg:hidden">
+    <div className="lg:hidden pointer-coarse:block">
       <Drawer onOpenChange={setOpen} open={open}>
         <DrawerTrigger asChild>
           <SortMobileTrigger />
diff --git a/app/components/collection/sort-mobile-trigger.tsx b/app/components/collection/sort-mobile-trigger.tsx
@@ -14,7 +14,7 @@ export const SortMobileTrigger = React.forwardRef<
   return (
     <IconButton
       ref={ref}
-      className="touch:block w-auto flex-nowrap gap-2 px-2 lg:hidden"
+      className="w-auto flex-nowrap gap-2 px-2 lg:hidden pointer-coarse:flex"
       {...props}
     >
       <IconFilters />
diff --git a/app/components/layout/cart-drawer-wrapper.tsx b/app/components/layout/cart-drawer-wrapper.tsx
@@ -2,7 +2,6 @@ import type {CartReturn} from '@shopify/hydrogen';
 
 import {Await, Link} from 'react-router';
 import {CartForm} from '@shopify/hydrogen';
-import {cx} from 'class-variance-authority';
 import {Suspense, useCallback, useEffect, useMemo, useState} from 'react';
 
 import {useCartFetchers} from '~/hooks/use-cart-fetchers';
@@ -73,16 +72,16 @@ function Badge(props: {cart?: CartReturn | null; count: number}) {
 
   const BadgeCounter = useMemo(
     () => (
-      <span className="relative">
+      <span className={cn('relative', count > 0 && 'mr-4')}>
         <span className="sr-only">{themeContent?.cart?.heading}</span>
         <IconBag className="size-6" />
         {count > 0 && (
           <div
-            className={cx([
+            className={cn([
               'absolute top-[-4px] right-[-12px] flex items-center justify-center',
               'bg-foreground text-background transition-colors',
               'group-active:bg-accent-foreground group-active:text-accent',
-              'notouch:group-hover:bg-accent-foreground notouch:group-hover:text-accent',
+              'pointer-fine:group-hover:bg-accent-foreground pointer-fine:group-hover:text-accent',
               'aspect-square h-auto min-w-[1.35rem] rounded-full p-1',
               'text-center text-[.7rem] leading-[0] subpixel-antialiased',
             ])}
diff --git a/app/components/layout/header-logo.tsx b/app/components/layout/header-logo.tsx
@@ -17,7 +17,7 @@ export function Logo(props: {
 
   if (!logo?._ref) {
     return (
-      <div className="font-heading notouch:group-hover:text-accent-foreground flex h-11 items-center justify-center text-2xl">
+      <div className="font-heading pointer-fine:group-hover:text-accent-foreground flex h-11 items-center justify-center text-2xl">
         {siteName}
       </div>
     );
diff --git a/app/components/navigation/desktop-navigation.tsx b/app/components/navigation/desktop-navigation.tsx
@@ -25,7 +25,10 @@ export function DesktopNavigation(props: {data?: NavigationProps}) {
   );
 
   return (
-    <NavigationMenu className="touch:hidden hidden lg:block" id="header-nav">
+    <NavigationMenu
+      className="hidden lg:block pointer-coarse:hidden"
+      id="header-nav"
+    >
       <CssVars
         dropdownWidth={dropdownWidth}
         viewportPosition={viewportPosition}
diff --git a/app/components/navigation/mobile-navigation-trigger.tsx b/app/components/navigation/mobile-navigation-trigger.tsx
@@ -10,7 +10,7 @@ export const MobileNavigationTrigger = React.forwardRef<
   return (
     <IconButton
       ref={ref}
-      className="touch:block -mr-2 lg:mr-0 lg:hidden"
+      className="-mr-2 lg:mr-0 lg:hidden pointer-coarse:block"
       {...props}
     >
       <span className="sr-only">Menu</span>
diff --git a/app/components/navigation/mobile-navigation.client.tsx b/app/components/navigation/mobile-navigation.client.tsx
@@ -19,7 +19,7 @@ import {ScrollArea} from '../ui/scroll-area';
 import {MobileNavigationTrigger} from './mobile-navigation-trigger';
 
 const mobileMenuLinkClass = cn(
-  'flex rounded-xs px-4 py-2 items-center gap-2 w-full transition-colors notouch:hover:bg-accent notouch:hover:text-accent-foreground touch:active:bg-accent touch:active:text-accent-foreground',
+  'flex rounded-xs px-4 py-2 items-center gap-2 w-full transition-colors pointer-fine:hover:bg-accent pointer-fine:hover:text-accent-foreground pointer-coarse:active:bg-accent pointer-coarse:active:text-accent-foreground',
 );
 
 export function MobileNavigation(props: {data?: NavigationProps}) {
@@ -31,7 +31,7 @@ export function MobileNavigation(props: {data?: NavigationProps}) {
 
   // Todo => Add <Navlink /> support
   return (
-    <div className="touch:block lg:hidden">
+    <div className="lg:hidden pointer-coarse:block">
       <Drawer
         direction={device === 'desktop' ? 'right' : 'bottom'}
         onOpenChange={setOpen}
diff --git a/app/components/product/media-gallery.tsx b/app/components/product/media-gallery.tsx
@@ -191,7 +191,7 @@ function ThumbnailCarousel({
                   {media.__typename === 'MediaImage' && media.image && (
                     <button
                       className={cn(
-                        'border-primary/0 notouch:hover:border-primary/100 overflow-hidden rounded-(--media-border-corner-radius) border-2 transition-opacity',
+                        'border-primary/0 pointer-fine:hover:border-primary/100 overflow-hidden rounded-(--media-border-corner-radius) border-2 transition-opacity',
                         'ring-offset-background focus-visible:ring-ring transition focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden',
                         media.id === selectedImage.id && 'border-primary/100',
                       )}
diff --git a/app/components/product/variant-selector.tsx b/app/components/product/variant-selector.tsx
@@ -74,7 +74,7 @@ function Pill({
   ]);
   const bubbleClass = cx(['absolute inset-0 z-0 bg-accent']);
   const foregroundClass = cx([
-    'inline-flex items-center relative z-2 justify-center whitespace-nowrap px-3 py-1.5 transition-colors notouch:hover:text-accent-foreground',
+    'inline-flex items-center relative z-2 justify-center whitespace-nowrap px-3 py-1.5 transition-colors pointer-fine:hover:text-accent-foreground',
     selected && 'text-accent-foreground',
     !available && 'opacity-50',
   ]);
diff --git a/app/components/ui/button.tsx b/app/components/ui/button.tsx
@@ -1,7 +1,7 @@
 import type {VariantProps} from 'class-variance-authority';
 
 import {Slot as SlotPrimitive} from 'radix-ui';
-import {cva, cx} from 'class-variance-authority';
+import {cva} from 'class-variance-authority';
 import * as React from 'react';
 
 import {cn} from '~/lib/utils';
@@ -20,26 +20,26 @@ const buttonVariants = cva(
     variants: {
       size: {
         default: 'h-11 px-4 py-2',
-        icon: 'size-11',
+        icon: 'size-9 touch-hitbox',
         lg: 'h-12 rounded-md px-8',
         primitive: 'h-auto p-0',
         sm: 'h-9 rounded-md px-3',
       },
       variant: {
         default:
-          'bg-primary text-primary-foreground notouch:hover:bg-primary/90 hover:active:bg-primary/80',
+          'bg-primary text-primary-foreground pointer-fine:hover:bg-primary/90 hover:active:bg-primary/80',
         destructive:
-          'bg-destructive text-destructive-foreground notouch:hover:bg-destructive/90 hover:active:bg-destructive/80',
+          'bg-destructive text-destructive-foreground pointer-fine:hover:bg-destructive/90 hover:active:bg-destructive/80',
         ghost:
-          'notouch:hover:bg-accent/55 shadow-none notouch:hover:text-accent-foreground hover:active:bg-accent active:text-accent-foreground [box-shadow:0_0_#0000]',
-        link: 'text-primary underline-offset-4 notouch:hover:underline touch:active:underline [box-shadow:0_0_#0000]',
+          'pointer-fine:hover:bg-accent/55 shadow-none pointer-fine:hover:text-accent-foreground hover:active:bg-accent active:text-accent-foreground [box-shadow:0_0_#0000]',
+        link: 'text-primary underline-offset-4 pointer-fine:hover:underline pointer-coarse:active:underline [box-shadow:0_0_#0000]',
         outline: [
-          'bg-background notouch:hover:bg-accent/55 hover:active:bg-accent notouch:hover:text-accent-foreground active:text-accent-foreground',
+          'bg-background pointer-fine:hover:bg-accent/55 hover:active:bg-accent pointer-fine:hover:text-accent-foreground active:text-accent-foreground',
           '[border-width:var(--button-border-thickness)] border-[rgb(var(--input)_/_var(--button-border-opacity))]',
         ],
         primitive: '[box-shadow:0_0_#0000]',
         secondary:
-          'bg-secondary text-secondary-foreground notouch:hover:bg-secondary/55 hover:active:bg-secondary/30',
+          'bg-secondary text-secondary-foreground pointer-fine:hover:bg-secondary/55 hover:active:bg-secondary/30',
       },
     },
   },
diff --git a/app/styles/tailwind.css b/app/styles/tailwind.css
@@ -82,6 +82,23 @@
   }
 }
 
+@utility touch-hitbox {
+  position: relative;
+  &::before {
+    content: '';
+    position: absolute;
+    display: block;
+    width: 100%;
+    height: 100%;
+    min-height: 44px;
+    min-width: 44px;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 9999;
+  }
+}
+
 @layer base {
   * {
     border-color: var(--color-border);
@@ -143,6 +160,3 @@
     font-size: calc(var(--heading-base-size) * 0.375 * 1px);
   }
 }
-
-@custom-variant touch (@media (pointer: coarse));
-@custom-variant notouch (@media (hover: hover));

Original file line number	Diff line number	Diff line change
`@@ -14,7 +14,7 @@ export const SortMobileTrigger = React.forwardRef<`
`14`	`14`	`return (`
`15`	`15`	`<IconButton`
`16`	`16`	`ref={ref}`
`17`		`- className="touch:block w-auto flex-nowrap gap-2 px-2 lg:hidden"`
	`17`	`+ className="w-auto flex-nowrap gap-2 px-2 lg:hidden pointer-coarse:flex"`
`18`	`18`	`{...props}`
`19`	`19`	`>`
`20`	`20`	`<IconFilters />`
Original file line number	Diff line number	Diff line change
`@@ -10,7 +10,7 @@ export const MobileNavigationTrigger = React.forwardRef<`
`10`	`10`	`return (`
`11`	`11`	`<IconButton`
`12`	`12`	`ref={ref}`
`13`		`- className="touch:block -mr-2 lg:mr-0 lg:hidden"`
	`13`	`+ className="-mr-2 lg:mr-0 lg:hidden pointer-coarse:block"`
`14`	`14`	`{...props}`
`15`	`15`	`>`
`16`	`16`	`<span className="sr-only">Menu</span>`