Merge branch 'Weaverse:main' into main

Weaverse · Nov 26, 2024 · ac5afa4 · ac5afa4
2 parents 617d924 + 365cc0b
commit ac5afa4
Show file tree

Hide file tree

Showing 47 changed files with 707 additions and 553 deletions.
diff --git a/app/components/skeleton.tsx b/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)}
     />
   );
 }
diff --git a/app/lib/utils.ts b/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"
   }`;
 };
 

diff --git a/app/modules/account-address-book.tsx b/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>

diff --git a/app/modules/account-details.tsx b/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

diff --git a/app/modules/button.tsx b/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 = {

diff --git a/app/modules/cart.tsx b/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">
@@ -281,7 +281,7 @@ function CartLineItem({ line, layout }: { line: CartLine; layout: Layouts }) {
             <div>
               {merchandise?.product?.handle ? (
                 <Link to={`/products/${merchandise.product.handle}`}>
-                  <span className="underline-animation">
+                  <span className="reveal-underline">
                     {merchandise?.product?.title || ""}
                   </span>
                 </Link>
@@ -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"

diff --git a/app/modules/country-selector.tsx b/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

diff --git a/app/modules/drawer-filter.tsx b/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}>

diff --git a/app/modules/drawer.tsx b/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"
                         >

diff --git a/app/modules/footer.tsx b/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",
@@ -198,7 +198,7 @@ function FooterMenu({
           <div className="flex flex-col gap-2">
             {items.map((item, ind) => (
               <Link to={item.to} key={ind} className="relative">
-                <span className="underline-animation">{item.title}</span>
+                <span className="reveal-underline">{item.title}</span>
               </Link>
             ))}
           </div>

diff --git a/app/modules/header/announcement-bar.tsx b/app/modules/header/announcement-bar.tsx
diff --git a/app/modules/header/cart-count.tsx b/app/modules/header/cart-count.tsx
@@ -67,10 +67,10 @@ function Badge({
               "flex items-center justify-center min-w-4 rounded-full p-0.5",
               "absolute top-0 -right-1",
               "transition-colors duration-300",
-              "group-hover/header:bg-[var(--color-header-text)] group-hover/header:text-[var(--color-header-bg)]",
+              "group-hover/header:bg-[var(--color-header-text)] group-hover/header:text-[--color-header-bg]",
               isTransparent
-                ? "text-[var(--color-header-text)] bg-[var(--color-transparent-header-text)]"
-                : "bg-[var(--color-header-text)] text-[var(--color-header-bg)]",
+                ? "text-[--color-header-text] bg-[--color-transparent-header-text]"
+                : "bg-[--color-header-text] text-[--color-header-bg]",
             )}
           >
             <span>{count}</span>

diff --git a/app/modules/header/desktop-header.tsx b/app/modules/header/desktop-header.tsx
@@ -74,19 +74,19 @@ export function DesktopHeader({
     >
       <div
         className={cn(
-          "h-nav flex items-center justify-between leading-none gap-8",
+          "h-nav flex items-center justify-between gap-8",
           variants({ width: headerWidth }),
         )}
       >
         <Logo isTransparent={isTransparent} shopName={shopName} />
-        {menu && <DesktopMenu menu={menu} />}
+        <DesktopMenu menu={menu} />
         <div className="flex items-center gap-1 z-1">
           <SearchToggle
             isOpen={isOpen}
             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}

diff --git a/app/modules/header/index.tsx b/app/modules/header/index.tsx
@@ -3,14 +3,14 @@ import { CartForm, type CartReturn } from "@shopify/hydrogen";
 import { Suspense, useEffect } from "react";
 import { useCartFetchers } from "~/hooks/use-cart-fetchers";
 import type { EnhancedMenu } from "~/lib/utils";
-import type { RootLoader } from "~/root";
 import { Cart } from "~/modules/cart";
+import type { RootLoader } from "~/root";
 import { CartLoading } from "../cart-loading";
 import { Drawer, useDrawer } from "../drawer";
-import { AnnouncementBar } from "./announcement-bar";
 import { DesktopHeader } from "./desktop-header";
-import { MobileHeader } from "./mobile-header";
 import { MobileMenu } from "./menu/mobile-menu";
+import { MobileHeader } from "./mobile-header";
+import { ScrollingAnnouncement } from "./scrolling-announcement";
 
 export function Header({
   shopName,
@@ -43,7 +43,7 @@ export function Header({
       {menu && (
         <MenuDrawer isOpen={isMenuOpen} onClose={closeMenu} menu={menu} />
       )}
-      <AnnouncementBar />
+      <ScrollingAnnouncement />
       <DesktopHeader shopName={shopName} menu={menu} openCart={openCart} />
       <MobileHeader
         shopName={shopName}