Merge branch 'Weaverse:main' into main

Weaverse · Dec 11, 2024 · 34b15d8 · 34b15d8
2 parents 98f4d84 + 7864136
commit 34b15d8
Show file tree

Hide file tree

Showing 79 changed files with 1,627 additions and 1,619 deletions.
diff --git a/@/components/input.tsx b/@/components/input.tsx
diff --git a/app/components/AddToCartButton.tsx b/app/components/AddToCartButton.tsx
@@ -9,7 +9,7 @@ import {
 import type { FetcherWithComponents } from '@remix-run/react';
 import { useEffect } from 'react';
 
-import { Button } from '@/components/button';
+import { Button } from '~/components/button';
 import { usePageAnalytics } from '~/hooks/usePageAnalytics';
 
 export function AddToCartButton({

diff --git a/app/components/Button.tsx b/app/components/Button.tsx
diff --git a/app/components/Cart.tsx b/app/components/Cart.tsx
@@ -1,5 +1,5 @@
-import { Button } from "@/components/button";
-import { Input } from "@/components/input";
+import { Button } from "~/components/button";
+import { Input } from "~/components/input";
 import { cn } from "@/lib/utils";
 import { Link } from "@remix-run/react";
 import { CartForm, Image, Money } from "@shopify/hydrogen";
@@ -67,20 +67,20 @@ function CartLines({
         {layout === "page" && (
           <thead>
             <tr className="p-2">
-              <th className="font-medium p-4 text-left border-bar/15 border-b border-bar">
+              <th className="font-medium p-4 text-left border-border/15 border-b border-border">
                 Product
               </th>
-              <th className="font-medium p-4 border-b border-bar/15 hidden md:table-cell"></th>
-              <th className="font-medium p-4 border-b border-bar/15 hidden md:table-cell">
+              <th className="font-medium p-4 border-b border-border/15 hidden md:table-cell"></th>
+              <th className="font-medium p-4 border-b border-border/15 hidden md:table-cell">
                 Price
               </th>
-              <th className="font-medium p-4 border-b border-bar/15 hidden md:table-cell">
+              <th className="font-medium p-4 border-b border-border/15 hidden md:table-cell">
                 Quantity
               </th>
-              <th className="font-medium p-4 border-b border-bar/15 hidden md:table-cell">
+              <th className="font-medium p-4 border-b border-border/15 hidden md:table-cell">
                 Total
               </th>
-              <th className="font-medium p-4 border-b border-bar/15 hidden md:table-cell"></th>
+              <th className="font-medium p-4 border-b border-border/15 hidden md:table-cell"></th>
             </tr>
           </thead>
         )}
@@ -130,7 +130,7 @@ function CartLineItem({
             height={100}
             loading="lazy"
             width={100}
-            className="object-cover"
+            className="object-cover rounded-[2px]"
           />
         )}
       </td>
@@ -208,7 +208,7 @@ function CartCheckout({
   layout: CartMainProps["layout"];
 }) {
   let styles = {
-    page: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-1 border-bar-subtle md:border-t md:pt-6 lg:p-0 lg:border-none",
+    page: "grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-1 border-border-subtle md:border-t md:pt-6 lg:p-0 lg:border-none",
     aside: "pb-6 pt-4 shrink-0",
   };
   let isDrawer = layout === "aside";
@@ -295,7 +295,7 @@ export function CartSummary({
 }) {
   const styles = {
     page: "bg-white p-6 space-y-6",
-    aside: "space-y-6 border-t border-bar-subtle pt-4",
+    aside: "space-y-6 border-t border-border-subtle pt-4",
   };
   const totalStyles = {
     page: "text-2xl font-heading",
@@ -355,7 +355,7 @@ function CartLineQuantity({
     aside: "w-10 h-[35px] transition",
   };
   return (
-    <div className="flex items-center border border-bar-subtle rounded w-fit">
+    <div className="flex items-center border border-border-subtle rounded w-fit">
       <CartLineUpdateButton lines={[{ id: lineId, quantity: prevQuantity }]}>
         <button
           className={buttonStyles[layout]}
@@ -467,7 +467,7 @@ function CartDiscounts({
       {/* Show an input to apply a discount */}
       <UpdateDiscountForm discountCodes={codes}>
         <div className="flex gap-2">
-          <Input type="text" name="discountCode" placeholder="Promotion code" />
+          <Input type="text" name="discountCode" variant={"default"} placeholder="Promotion code" />
           <Button type="submit" variant="link">
             Apply
           </Button>

diff --git a/app/components/CountrySelector.tsx b/app/components/CountrySelector.tsx
@@ -1,14 +1,14 @@
 import {useFetcher, useLocation, useRouteLoaderData} from '@remix-run/react';
 import {CartForm} from '@shopify/hydrogen';
 import type {CartBuyerIdentityInput} from '@shopify/hydrogen/storefront-api-types';
-import {Button} from '~/components/Button';
 import {IconCaret, IconCheck} from '~/components/Icon';
 import type {Locale, Localizations} from '~/lib/type';
 import {DEFAULT_LOCALE} from '~/lib/utils';
 import {useRootLoaderData} from '~/root';
 import clsx from 'clsx';
 import {useCallback, useEffect, useRef, useState} from 'react';
 import {useInView} from 'react-intersection-observer';
+import { Button } from '~/components/button';
 
 export function CountrySelector() {
   const fetcher = useFetcher();
@@ -57,7 +57,7 @@ export function CountrySelector() {
     <div ref={observerRef} className="md:max-w-72 w-full" onMouseLeave={closeDropdown}>
       <div className="relative">
         <details
-          className="w-full overflow-hidden rounded border border-bar-subtle dark:border-white"
+          className="w-full overflow-hidden rounded border border-border-subtle dark:border-white"
           ref={closeRef}
           onToggle={toggleDropdown}
         >
@@ -67,7 +67,7 @@ export function CountrySelector() {
               <IconCaret direction="down" className="h-4 w-4" />
             </span>
           </summary>
-          <div className={`hiddenScroll absolute bottom-full left-0 right-0 w-full overflow-auto border-t border-bar-subtle bg-white dark:border-white transition-all duration-500
+          <div className={`hiddenScroll absolute bottom-full left-0 right-0 w-full overflow-auto border-t border-border-subtle bg-background dark:border-white transition-all duration-500
             ${isOpen ? 'max-h-36' : 'max-h-0'}`}>
             {countries &&
               Object.keys(countries).map((countryPath) => {
@@ -117,12 +117,13 @@ function Country({
       }}
     >
       <Button
-        className={clsx([
-          'flex w-full justify-start rounded bg-background p-2 transition',
+        classNameContainer={clsx([
+          'flex w-full justify-start',
           'cursor-pointer items-center px-4 py-2 text-left',
         ])}
+        className='rounded bg-background p-2 transition w-full'
+        variant={"custom"}
         type="submit"
-        variant="primary"
         onClick={closeDropdown}
       >
         {countryLocale.label}

diff --git a/app/components/Drawer.tsx b/app/components/Drawer.tsx
@@ -70,15 +70,12 @@ export function Drawer({
               >
                 <Dialog.Panel
                   className={cn(
-                    "transform text-left align-middle shadow-xl transition-all",
+                    "transform text-left align-middle shadow-xl transition-all bg-[var(--color-drawer-bg)]",
                     openFrom === "left"
                       ? `h-screen-dynamic w-screen ${maxWidth}`
                       : openFrom === "top"
                         ? "h-fit w-screen"
-                        : `h-screen-dynamic w-screen ${maxWidth}`,
-                    isForm === "cart" || isForm === "filter"
-                      ? "bg-background-basic"
-                      : "bg-background-subtle-1"
+                        : `h-screen-dynamic w-screen ${maxWidth}`
                   )}
                 >
                   <header
@@ -92,23 +89,23 @@ export function Drawer({
                   >
                     <button
                       type="button"
-                      className="text-body hover:text-body/50 -m-4 p-4 transition"
+                      className="text-text-primary hover:text-text-primary/50 -m-4 p-4 transition"
                       onClick={onClose}
                       data-test="close-cart"
                     >
                       <IconClose aria-label="Close panel" />
                     </button>
                     {heading !== null && (
                       <Dialog.Title as="span">
-                        <span className={cn("font-semibold font-heading text-xl", isForm !== 'search' && 'uppercase')} id="cart-contents">
+                        <span className={cn("font-semibold font-heading text-xl text-text-primary", isForm !== 'search' && 'uppercase')} id="cart-contents">
                           {heading}
                         </span>
                       </Dialog.Title>
                     )}
                     {isBackMenu && (
                       <button
                         type="button"
-                        className="text-body hover:text-body/50 -m-4 p-2 transition"
+                        className="text-text-primary hover:text-text-primary/50 -m-4 p-2 transition"
                         onClick={onClose}
                         data-test="close-cart"
                       >

diff --git a/app/components/DrawerFilter.tsx b/app/components/DrawerFilter.tsx
@@ -1,6 +1,6 @@
-import {Button} from '@/components/button';
-import {Checkbox} from '@/components/checkbox';
-import {Input} from '@/components/input';
+import {Button} from '~/components/button';
+import {Checkbox} from '~/components/checkbox';
+import {Input} from '~/components/input';
 import {Disclosure, Menu} from '@headlessui/react';
 import {
   Link,
@@ -45,7 +45,7 @@ export function DrawerFilter({
   const {openDrawer, isOpen, closeDrawer} = useDrawer();
   return (
     <>
-      <div className="border-y border-bar-subtle py-4 px-3 md:px-4 lg:px-0">
+      <div className="border-y border-border-subtle py-4 px-3 md:px-4 lg:px-0">
         <div className="container flex w-full items-center justify-between">
           <span className="font-heading text-xl font-medium tracking-tight">
             {productNumber} Products
@@ -137,7 +137,7 @@ export function FiltersDrawer({
 
   return (
     <nav className="">
-      <div className="divide-y divide-bar-subtle">
+      <div className="divide-y divide-border-subtle">
         {filters.map((filter: Filter) => (
           <Disclosure as="div" key={filter.id} className="w-full pb-6 pt-5">
             {({open}) => (
@@ -315,7 +315,7 @@ export default function SortMenu({
 
   return (
     <Menu as="div" className="relative z-30">
-      <Menu.Button className="flex h-[50px] items-center gap-[10px] rounded border border-foreground px-4 py-3">
+      <Menu.Button className="flex h-[50px] items-center gap-[10px] rounded border border-border px-4 py-3">
         <span className="font-heading text-xl font-medium">Sort by</span>
         <IconCaret />
       </Menu.Button>

diff --git a/app/components/Footer.tsx b/app/components/Footer.tsx
@@ -1,5 +1,5 @@
-import {Button} from '@/components/button';
-import {Input} from '@/components/input';
+import {Button} from '~/components/button';
+import {Input} from '~/components/input';
 import {Disclosure} from '@headlessui/react';
 import {NavLink, useFetcher} from '@remix-run/react';
 import {useThemeSettings} from '@weaverse/hydrogen';
@@ -12,7 +12,6 @@ import {IconPlusLinkFooter} from './Icon';
 import {LayoutProps} from './Layout';
 
 type FooterProps = Pick<LayoutProps, 'footerMenu'>;
-type TagName = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 export function Footer({footerMenu}: FooterProps) {
   let fetcher = useFetcher<any>();
   let isError = fetcher.state === 'idle' && fetcher.data?.errors;
@@ -26,7 +25,7 @@ export function Footer({footerMenu}: FooterProps) {
     tagNameTitle: Tag = 'h6',
   } = settings;
   return (
-    <footer className="footer w-full bg-[var(--footer-menu-background-color)]">
+    <footer className="footer w-full bg-[var(--color-footer-bg)] text-[var(--color-footer-text)] border-t border-[var(--color-footer-text)]">
       <div className="container flex h-fit flex-col gap-6 px-4 pb-10 pt-6 md:gap-10 md:px-6 md:py-10 lg:gap-8 lg:px-0 lg:py-16">
         <div className="flex flex-col justify-center gap-4 md:flex-row md:gap-4 lg:gap-10">
           <div className="flex w-full flex-col items-start gap-6 border-b border-foreground pb-6 md:h-fit md:border-none md:pb-0">

diff --git a/app/components/Header/AnnouncementBar.tsx b/app/components/Header/AnnouncementBar.tsx
@@ -11,19 +11,13 @@ export function AnnouncementBar() {
   let {
     content,
     textSize,
-    textColor,
-    borderColor,
-    backgroundColor,
     announcementBarHeight,
     speed,
     gap,
     stickyAnnouncementBar,
     enableScrollingText,
   } = settings;
   let style: CSSProperties = {
-    '--text-color': textColor,
-    '--border-color': borderColor,
-    '--background-color': backgroundColor,
     '--height-bar': `${announcementBarHeight}px`,
     '--speed': `${speed}s`,
     '--gap': `${gap}px`,
@@ -59,15 +53,15 @@ export function AnnouncementBar() {
       ref={containerRef}
       style={style}
       className={clsx(
-        'h-[var(--height-bar)] bg-[var(--background-color)] py-[var(--vertical-padding)]',
-        'border-y border-y-[var(--border-color)]',
+        'h-[var(--height-bar)] bg-[var(--color-topbar-bg)] py-[var(--vertical-padding)]',
+        'border-y border-y-[var(--color-topbar-border)]',
         'flex w-full items-center justify-center overflow-hidden',
         stickyAnnouncementBar ? 'sticky top-0 z-40' : 'relative',
       )}
     >
       <button
         onClick={handleClose}
-        className="absolute right-4 top-1/2 z-20 -translate-y-1/2 transform cursor-pointer border-none bg-transparent text-[var(--text-color)]"
+        className="absolute right-4 top-1/2 z-20 -translate-y-1/2 transform cursor-pointer border-none bg-transparent text-[var(--color-topbar-text)]"
       >
         ×
       </button>
@@ -79,7 +73,7 @@ export function AnnouncementBar() {
             {Array.from({length: 15}).map((_, i) => (
               <li
                 key={i}
-                className="animate-scrollContent whitespace-nowrap pr-[var(--gap)] font-body font-normal text-[var(--text-color)]"
+                className="animate-scrollContent whitespace-nowrap pr-[var(--gap)] font-body font-normal text-[var(--color-topbar-text)]"
                 style={{
                   animationDuration: `var(--speed)`,
                   fontSize: `${textSize}px`,
@@ -100,7 +94,7 @@ export function AnnouncementBar() {
       >
         <div
           ref={contentRef}
-          className="w-fit whitespace-nowrap px-11 font-body font-normal text-[var(--text-color)]"
+          className="w-fit whitespace-nowrap px-11 font-body font-normal text-[var(--color-topbar-text)]"
         >
           {content}
         </div>