Merge remote-tracking branch 'origin/dev' into dev

app/components/skeleton.tsx

@@ -21,7 +21,7 @@ export function Skeleton({
       {...props}
       width={width}
       height={height}
-      className={clsx("rounded animate-pulse bg-body/10", className)}
+      className={clsx("rounded animate-pulse bg-gray-200", className)}
     />
   );
 }

app/lib/utils.ts

@@ -223,11 +223,11 @@ export function parseMenu(
 }
 
 export const INPUT_STYLE_CLASSES =
-  "appearance-none rounded dark:bg-transparent border focus:border-line/50 focus:ring-0 w-full py-2 px-3 text-body/90 placeholder:text-body/50 leading-tight focus:shadow-outline";
+  "appearance-none rounded dark:bg-transparent border focus:border-line focus:ring-0 w-full py-2 px-3 text-body placeholder:text-body leading-tight focus:shadow-outline";
 
 export const getInputStyleClasses = (isError?: string | null) => {
   return `${INPUT_STYLE_CLASSES} ${
-    isError ? "border-red-500" : "border-line/20"
+    isError ? "border-red-500" : "border-gray-200"
   }`;
 };
 

app/modules/account-address-book.tsx

@@ -53,7 +53,7 @@ function Address({
     <div className="p-5 border border-[#B7B7B7] rounded-sm flex flex-col">
       {defaultAddress && (
         <div className="mb-3 flex flex-row">
-          <span className="px-3 py-1 text-xs font-medium border text-body/50">
+          <span className="px-3 py-1 text-xs font-medium border text-body-subtle">
             Default
           </span>
         </div>
@@ -74,14 +74,14 @@ function Address({
       <div className="flex flex-row font-medium mt-6 items-baseline">
         <Link
           to={`/account/address/${encodeURIComponent(address.id)}`}
-          className="text-left underline text-body/50"
+          className="text-left underline text-body-subtle"
           prefetch="intent"
         >
           Edit
         </Link>
         <Form action="address/delete" method="delete">
           <input type="hidden" name="addressId" value={address.id} />
-          <button className="text-left text-body/50 ml-6 text-sm">
+          <button className="text-left text-body-subtle ml-6 text-sm">
             Remove
           </button>
         </Form>

app/modules/account-details.tsx

@@ -12,18 +12,18 @@ export function AccountDetails({
     <div className="space-y-4">
       <div className="font-bold">Account</div>
       <div className="p-5 border border-[#B7B7B7] rounded-sm">
-        <div className="text-body/50">Name</div>
+        <div className="text-body-subtle">Name</div>
         <p className="mt-1">{fullName || "N/A"}</p>
 
-        <div className="mt-4 text-body/50">Phone number</div>
+        <div className="mt-4 text-body-subtle">Phone number</div>
         <p className="mt-1">{phoneNumber?.phoneNumber ?? "N/A"}</p>
 
-        <div className="mt-4 text-body/50">Email address</div>
+        <div className="mt-4 text-body-subtle">Email address</div>
         <p className="mt-1">{emailAddress?.emailAddress ?? "N/A"}</p>
         <p className="mt-3">
           <Link
             prefetch="intent"
-            className="underline font-normal text-body/50"
+            className="underline font-normal text-body-subtle"
             to="/account/edit"
           >
             Edit

app/modules/button.tsx

@@ -36,7 +36,7 @@ export const Button = forwardRef(
       primary: `${baseButtonClasses} border-2 border-btn hover:bg-inv-btn hover:text-inv-btn-content bg-btn text-btn-content`,
       secondary: `${baseButtonClasses} border-2 border-btn text-btnTextInverse hover:bg-btn hover:text-btn-content`,
       "secondary-white": `${baseButtonClasses} border-2 border-inv-btn text-btn hover:bg-inv-btn hover:text-inv-btn-content`,
-      inline: "border-b border-line/10 leading-none pb-1",
+      inline: "border-b border-gray-100 leading-none pb-1",
     };
 
     const widths = {

app/modules/cart.tsx

@@ -161,7 +161,7 @@ function CartLines({
       ref={scrollRef}
       aria-labelledby="cart-contents"
       className={clsx([
-        y > 0 ? "border-t border-line/50" : "",
+        y > 0 ? "border-t border-line-subtle" : "",
         layout === "page" && "flex-grow md:translate-y-4 lg:col-span-2",
         layout === "drawer" && "px-5 pb-5 overflow-auto transition",
       ])}
@@ -215,9 +215,9 @@ function CartSummary({
     <section
       aria-labelledby="summary-heading"
       className={clsx(
-        layout === "drawer" && "grid gap-4 p-5 border-t border-line/50",
+        layout === "drawer" && "grid gap-4 p-5 border-t border-line-subtle",
         layout === "page" &&
-          "sticky top-nav grid gap-6 p-4 md:px-6 md:translate-y-4 bg-background/5 rounded w-full",
+          "sticky top-nav grid gap-6 p-4 md:px-6 md:translate-y-4 rounded w-full",
       )}
     >
       <h2 id="summary-heading" className="sr-only">
@@ -363,13 +363,13 @@ function CartLineQuantityAdjust({ line }: { line: CartLine }) {
       <label htmlFor={`quantity-${lineId}`} className="sr-only">
         Quantity, {optimisticQuantity}
       </label>
-      <div className="flex items-center border border-line/50">
+      <div className="flex items-center border border-line-subtle">
         <UpdateCartButton lines={[{ id: lineId, quantity: prevQuantity }]}>
           <button
             type="submit"
             name="decrease-quantity"
             aria-label="Decrease quantity"
-            className="w-9 h-9 transition disabled:text-body/50 disabled:cursor-not-allowed"
+            className="w-9 h-9 transition disabled:text-body-subtle disabled:cursor-not-allowed"
             value={prevQuantity}
             disabled={optimisticQuantity <= 1 || isOptimistic}
           >
@@ -388,7 +388,7 @@ function CartLineQuantityAdjust({ line }: { line: CartLine }) {
         <UpdateCartButton lines={[{ id: lineId, quantity: nextQuantity }]}>
           <button
             type="submit"
-            className="w-9 h-9 transition disabled:text-body/50 disabled:cursor-not-allowed"
+            className="w-9 h-9 transition disabled:text-body-subtle disabled:cursor-not-allowed"
             name="increase-quantity"
             value={nextQuantity}
             aria-label="Increase quantity"

app/modules/country-selector.tsx

@@ -82,7 +82,7 @@ export function CountrySelector() {
   return (
     <div ref={observerRef} className="grid gap-4 w-80">
       <Popover>
-        <PopoverButton className="w-full border border-line/75 overflow-clip px-4 py-3 cursor-pointer text-left outline-none flex items-center gap-2">
+        <PopoverButton className="w-full border border-line-subtle overflow-clip px-4 py-3 cursor-pointer text-left outline-none flex items-center gap-2">
           <ReactCountryFlag
             svg
             countryCode={selectedLocale.country}
@@ -119,7 +119,7 @@ export function CountrySelector() {
                     key={countryPath}
                     type="button"
                     onClick={onChangeLocale}
-                    className="text-white bg-neutral-800 hover:bg-background/30 w-full p-2 transition flex gap-2 items-center text-left cursor-pointer py-2 px-4 text-sm"
+                    className="text-white bg-neutral-800 hover:bg-gray-100 w-full p-2 transition flex gap-2 items-center text-left cursor-pointer py-2 px-4 text-sm"
                   >
                     <ReactCountryFlag
                       svg

app/modules/drawer-filter.tsx

@@ -51,7 +51,7 @@ export function DrawerFilter({
 }: DrawerFilterProps) {
   const { openDrawer, isOpen, closeDrawer } = useDrawer();
   return (
-    <div className="border-y border-line/30 py-4">
+    <div className="border-y border-line-subtle py-4">
       <div className="gap-4 md:gap-8 flex w-full items-center justify-between">
         <div className="flex gap-1 flex-1">
           <button
@@ -352,7 +352,7 @@ export default function SortMenu({
       </MenuButton>
       <MenuItems
         as="nav"
-        className="absolute right-0 top-12 flex h-fit w-40 flex-col gap-2 border border-line/75 bg-background p-5"
+        className="absolute right-0 top-12 flex h-fit w-40 flex-col gap-2 border border-line-subtle bg-background p-5"
       >
         {items.map((item) => (
           <MenuItem key={item.label}>

app/modules/drawer.tsx

@@ -106,7 +106,7 @@ export function Drawer({
                       {isBackMenu && (
                         <button
                           type="button"
-                          className="p-2 -m-4 transition text-body hover:text-body/50"
+                          className="p-2 -m-4 transition text-body hover:text-body-subtle"
                           onClick={onClose}
                           data-test="close-cart"
                         >
@@ -122,7 +122,7 @@ export function Drawer({
                       {!isBackMenu && (
                         <button
                           type="button"
-                          className="transition text-body hover:text-body/50"
+                          className="transition text-body hover:text-body-subtle"
                           onClick={onClose}
                           data-test="close-cart"
                         >

app/modules/footer.tsx

@@ -19,7 +19,7 @@ import type { ChildEnhancedMenuItem, EnhancedMenu } from "~/lib/utils";
 import { Input } from "~/modules/input";
 import { CountrySelector } from "./country-selector";
 
-let variants = cva("divide-y divide-line/50 space-y-9", {
+let variants = cva("divide-y divide-line-subtle space-y-9", {
   variants: {
     width: {
       full: "w-full h-full",

app/modules/header/desktop-header.tsx

@@ -86,7 +86,7 @@ export function DesktopHeader({
             openDrawer={openDrawer}
             closeDrawer={closeDrawer}
           />
-          <AccountLink className="relative flex items-center justify-center w-8 h-8 focus:ring-body/5" />
+          <AccountLink className="relative flex items-center justify-center w-8 h-8" />
           <CartCount
             isHome={isHome}
             openCart={openCart}

app/modules/header/menu/desktop-menu.tsx

@@ -146,7 +146,7 @@ function ImagesMenu({ title, items, to }: SingleMenuItem) {
                     className="w-full h-full object-cover group-hover/item:scale-105 transition-transform duration-400"
                     sizes="auto"
                   />
-                  <h6 className="absolute w-full inset-0 text-center text-background p-2 bg-body/15 group-hover/item:bg-body/40 flex items-center justify-center transition-all duration-300">
+                  <h6 className="absolute w-full inset-0 text-center text-background p-2 bg-gray-100/15 group-hover/item:bg-gray-100/40 flex items-center justify-center transition-all duration-300">
                     {item.title}
                   </h6>
                 </div>

app/modules/input.tsx

@@ -20,9 +20,9 @@ let variants = cva(
       variant: {
         default: "leading-tight",
         search:
-          "px-0 py-2 text-2xl w-full focus:ring-0 border-x-0 border-t-0 transition border-b-2 border-line/10 focus:border-line/50",
+          "px-0 py-2 text-2xl w-full focus:ring-0 border-x-0 border-t-0 transition border-b-2 border-line focus:border-line-subtle",
         minisearch:
-          "hidden md:inline-block text-left lg:text-right border-b transition border-transparent -mb-px border-x-0 border-t-0 appearance-none px-0 py-1 focus:ring-transparent placeholder:opacity-20 placeholder:text-inherit focus:border-line/50",
+          "hidden md:inline-block text-left lg:text-right border-b transition border-transparent -mb-px border-x-0 border-t-0 appearance-none px-0 py-1 focus:ring-transparent placeholder:opacity-20 placeholder:text-inherit focus:border-line-subtle",
         error: "border-red-500",
       },
     },
@@ -53,7 +53,7 @@ export let Input = forwardRef<HTMLInputElement, InputProps>(
     let [focused, setFocused] = useState(false);
     let commonClasses = clsx(
       "w-full border px-3 py-3",
-      focused ? "border-line/50" : "border-line/30",
+      // focused ? "border-line" : "border-line",
       className,
     );
 

app/modules/modal.tsx

@@ -32,7 +32,7 @@ export function Modal({
       aria-modal="true"
       id="modal-bg"
     >
-      <div className="fixed inset-0 transition-opacity bg-opacity-75 bg-background/40" />
+      <div className="fixed inset-0 transition-opacity bg-opacity-75 bg-gray-500/40" />
       <div className="fixed inset-0 z-50 overflow-y-auto">
         <div className="flex items-center justify-center min-h-full p-4 text-center sm:p-0">
           <div
@@ -50,7 +50,7 @@ export function Modal({
               {cancelLink ? (
                 <Link
                   to={cancelLink}
-                  className="-m-4 transition text-body hover:text-body/50"
+                  className="-m-4 transition text-body hover:text-body-subtle"
                 >
                   <IconX aria-label="Close panel" className="w-4 h-4" />
                 </Link>

app/modules/order-card.tsx

@@ -15,7 +15,7 @@ export function OrderCard({ order }: { order: OrderCardFragment }) {
     <li className="flex text-center border border-[#B7B7B7] rounded-sm items-center gap-5 p-5">
       {lineItems[0].image && (
         <Link className="shrink-0" to={orderLink} prefetch="intent">
-          <div className="card-image aspect-square bg-background/5">
+          <div className="card-image aspect-square">
             <Image
               width={140}
               height={140}
@@ -44,28 +44,26 @@ export function OrderCard({ order }: { order: OrderCardFragment }) {
         <dl className="flex flex-col mt-2">
           <dt className="sr-only">Order ID</dt>
           <dd>
-            <p className="text-body/50">Order No. {order.number}</p>
+            <p className="text-body-subtle">Order No. {order.number}</p>
           </dd>
           <dt className="sr-only">Order Date</dt>
           <dd>
-            <p className="text-body/50">
+            <p className="text-body-subtle">
               {new Date(order.processedAt).toDateString()}
             </p>
           </dd>
           {fulfillmentStatus && (
             <>
               <dt className="sr-only">Fulfillment Status</dt>
               <dd className="mt-3">
-                <span
-                  className={`px-2.5 py-1 text-xs font-medium border bg-background/5`}
-                >
+                <span className="px-2.5 py-1 text-xs font-medium border bg-gray-100">
                   {statusMessage(fulfillmentStatus)}
                 </span>
               </dd>
             </>
           )}
           <Link
-            className="mt-3 text-body/50 underline"
+            className="mt-3 text-body-subtle underline"
             to={orderLink}
             prefetch="intent"
           >

app/modules/predictive-search/predictive-search-result.tsx

@@ -21,7 +21,7 @@ export function PredictiveSearchResult({
   return (
     <div
       key={type}
-      className="predictive-search-result flex flex-col gap-4 divide-y divide-line/50"
+      className="predictive-search-result flex flex-col gap-4 divide-y divide-line-subtle"
     >
       <Link
         prefetch="intent"

app/modules/predictive-search/result-item.tsx

@@ -43,7 +43,9 @@ export function SearchResultItem({
           </div>
         )}
         <div className="space-y-1">
-          {vendor && <div className="text-body/50 text-sm">By {vendor}</div>}
+          {vendor && (
+            <div className="text-body-subtle text-sm">By {vendor}</div>
+          )}
           {styledTitle ? (
             <div
               className="underline-animation"

app/modules/product-card/index.tsx

@@ -39,7 +39,7 @@ export function ProductCard({
   return (
     <div className="flex flex-col gap-2">
       <div className={clsx("grid gap-4", className)}>
-        <div className="relative aspect-[4/5] bg-background/5 group">
+        <div className="relative aspect-[4/5] group">
           {image && (
             <Link to={`/products/${product.handle}`} prefetch="intent">
               <Image

app/modules/product-form/options.tsx

@@ -6,7 +6,7 @@ import type { ProductVariantFragmentFragment } from "storefrontapi.generated";
 import { Tooltip, TooltipContent, TooltipTrigger } from "~/components/tooltip";
 import { cn } from "~/lib/cn";
 
-let variants = cva("border border-line/75 hover:border-body cursor-pointer", {
+let variants = cva("border border-line hover:border-body cursor-pointer", {
   variants: {
     colorSize: {
       sm: "w-8 h-8",
@@ -247,12 +247,11 @@ export function VariantOption(props: VariantOptionProps) {
             <span
               key={value.value}
               className={cn(
-                "py-0.5 cursor-pointer border-b border-line/75 hover:border-body",
+                "py-0.5 cursor-pointer border-b border-line hover:border-body",
                 selectedOptionValue === value.value && "border-body",
                 !value.isAvailable && "opacity-50",
               )}
               onClick={() => onSelectOptionValue(value.value)}
-              role="listitem"
             >
               {value.value}
             </span>

app/modules/product-form/placeholder.tsx

@@ -32,7 +32,7 @@ export function ProductPlaceholder(props: any) {
                 </legend>
                 <div className="flex flex-wrap items-baseline gap-4">
                   <a
-                    className="leading-none py-1 cursor-pointer transition-all duration-200 border-line/50 border-b-[1.5px] opacity-100"
+                    className="leading-none py-1 cursor-pointer transition-all duration-200 border-line-subtle border-b-[1.5px] opacity-100"
                     href="/"
                   >
                     OS
@@ -57,7 +57,7 @@ export function ProductPlaceholder(props: any) {
                 </legend>
                 <div className="flex flex-wrap items-baseline gap-4">
                   <a
-                    className="leading-none py-1 cursor-pointer transition-all duration-200 border-line/50 border-b-[1.5px] opacity-100"
+                    className="leading-none py-1 cursor-pointer transition-all duration-200 border-line-subtle border-b-[1.5px] opacity-100"
                     href="/"
                   >
                     black

app/modules/sort-filter.tsx

@@ -54,9 +54,7 @@ export function SortFilter({
       <div className="flex items-center justify-between w-full">
         <button
           onClick={() => setIsOpen(!isOpen)}
-          className={
-            "relative flex items-center justify-center w-8 h-8 focus:ring-body/5"
-          }
+          className="relative flex items-center justify-center w-8 h-8 focus:ring-body"
         >
           <IconFilters />
         </button>

app/modules/text.tsx

@@ -22,10 +22,10 @@ export function Text({
 }) {
   const colors: Record<string, string> = {
     default: "inherit",
-    primary: "text-body/90",
-    subtle: "text-body/50",
+    primary: "text-body",
+    subtle: "text-body",
     notice: "text-sale",
-    contrast: "text-body/90",
+    contrast: "text-body",
   };
 
   const sizes: Record<string, string> = {
@@ -125,9 +125,9 @@ export function Section({
 
   const dividers = {
     none: "border-none",
-    top: "border-t border-line/05",
-    bottom: "border-b border-line/05",
-    both: "border-y border-line/05",
+    top: "border-t border-line-subtle",
+    bottom: "border-b border-line-subtle",
+    both: "border-y border-line-subtle",
   };
 
   const displays = {