diff --git a/app/components/skeleton.tsx b/app/components/skeleton.tsx index fb18ced6..fec5bd57 100644 --- 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 index 36f48ebc..86fa053d 100644 --- 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 index 4547417a..d786df6f 100644 --- a/app/modules/account-address-book.tsx +++ b/app/modules/account-address-book.tsx @@ -53,7 +53,7 @@ function Address({
{defaultAddress && (
- + Default
@@ -74,14 +74,14 @@ function Address({
Edit
-
diff --git a/app/modules/account-details.tsx b/app/modules/account-details.tsx index 4610c2e6..73226a74 100644 --- a/app/modules/account-details.tsx +++ b/app/modules/account-details.tsx @@ -12,18 +12,18 @@ export function AccountDetails({
Account
-
Name
+
Name

{fullName || "N/A"}

-
Phone number
+
Phone number

{phoneNumber?.phoneNumber ?? "N/A"}

-
Email address
+
Email address

{emailAddress?.emailAddress ?? "N/A"}

Edit diff --git a/app/modules/button.tsx b/app/modules/button.tsx index daa044da..a3fe07d9 100644 --- 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 index ae23944c..fc9c1b16 100644 --- 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({

@@ -281,7 +281,7 @@ function CartLineItem({ line, layout }: { line: CartLine; layout: Layouts }) {
{merchandise?.product?.handle ? ( - + {merchandise?.product?.title || ""} @@ -363,13 +363,13 @@ function CartLineQuantityAdjust({ line }: { line: CartLine }) { -
+
diff --git a/app/modules/text.tsx b/app/modules/text.tsx index f04ee127..f7ebda0c 100644 --- a/app/modules/text.tsx +++ b/app/modules/text.tsx @@ -22,10 +22,10 @@ export function Text({ }) { const colors: Record = { 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 = { @@ -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 = { diff --git a/app/root.tsx b/app/root.tsx index 1f44637f..d71ae34e 100644 --- a/app/root.tsx +++ b/app/root.tsx @@ -181,7 +181,7 @@ function Layout({ children }: { children?: React.ReactNode }) { "--initial-topbar-height": `${topbarText ? topbarHeight : 0}px`, } as CSSProperties } - className="transition-opacity !opacity-100 duration-300" + className="transition-opacity !opacity-100 duration-300 antialiased bg-background text-body" > {data ? ( { return (acc += Number.parseFloat(curr.allocatedAmount.amount)); }, - 0 + 0, ); totalDiscount += itemDiscount; }); @@ -104,7 +104,7 @@ export default function OrderRoute() {

Order No. {order.name}

- Placed on {new Date(order.processedAt!).toDateString()} + Placed on {new Date(order.processedAt).toDateString()}

@@ -127,7 +127,7 @@ export default function OrderRoute() {
Product
{lineItem.title}
-
+
{lineItem.variantTitle}
@@ -144,14 +144,14 @@ export default function OrderRoute() { discountApp?.title || discountApp?.code; return (
{discountTitle}
(- - ) + )
); @@ -160,11 +160,11 @@ export default function OrderRoute() {
Current Price
{hasDiscount && ( - - + + )} - +
@@ -175,26 +175,26 @@ export default function OrderRoute() {
Subtotal - +
Tax - +
Shipping - +
Total - +
@@ -220,7 +220,7 @@ export default function OrderRoute() { {order?.shippingAddress?.formatted ? ( order.shippingAddress.formatted.map((line: string) => (
  • - {line} + {line}
    • )) ) : ( @@ -234,8 +234,8 @@ export default function OrderRoute() { {fulfillmentStatus && (
    {statusMessage(fulfillmentStatus!)} diff --git a/app/routes/($locale).account.tsx b/app/routes/($locale).account.tsx index 041fad08..9ba6cb58 100644 --- a/app/routes/($locale).account.tsx +++ b/app/routes/($locale).account.tsx @@ -106,7 +106,7 @@ function Account({ customer, heading, featuredDataPromise }: AccountType) {
    -
    +
    -
    +
    {collection?.image && ( ( + (props, ref) => { + let { collections } = useLoaderData(); + let { prevButtonText, nextButtonText, imageAspectRatio, ...rest } = props; + return ( +
    + + {({ nodes, isLoading, PreviousLink, NextLink }) => ( + <> +
    + +
    +
    + {nodes.map((collection, i) => ( + + ))} +
    +
    + +
    + + )} +     +
    + ); + }, +); + +export default CollectionsItems; + +export let schema: HydrogenComponentSchema = { + type: "collections-items", + title: "Collection items", + inspector: [ + { + group: "Collection items", + inputs: [ + { + type: "text", + name: "prevButtonText", + label: "Previous collections text", + defaultValue: "Previous collections", + placeholder: "Previous collections", + }, + { + type: "text", + name: "nextButtonText", + label: "Next collections text", + defaultValue: "Next collections", + placeholder: "Next collections", + }, + ], + }, + { + group: "Collection card", + inputs: [ + { + type: "select", + label: "Image aspect ratio", + name: "imageAspectRatio", + configs: { + options: [ + { value: "auto", label: "Adapt to image" }, + { value: "1/1", label: "1/1" }, + { value: "3/4", label: "3/4" }, + { value: "4/3", label: "4/3" }, + ], + }, + defaultValue: "auto", + }, + ], + }, + ], +}; diff --git a/app/sections/collection-list/index.tsx b/app/sections/collection-list/index.tsx index 7a7b82ab..15187ac7 100644 --- a/app/sections/collection-list/index.tsx +++ b/app/sections/collection-list/index.tsx @@ -52,7 +52,7 @@ let CollectionList = forwardRef(

    ); - } + }, ); export default CollectionList; @@ -61,6 +61,7 @@ export let schema: HydrogenComponentSchema = { type: "collection-list", title: "Collection list", limit: 1, + childTypes: ["subheading", "heading", "paragraph", "collections-items"], enabledOn: { pages: ["COLLECTION_LIST"], }, @@ -105,7 +106,6 @@ export let schema: HydrogenComponentSchema = { { value: "1/1", label: "1/1" }, { value: "3/4", label: "3/4" }, { value: "4/3", label: "4/3" }, - { value: "6/4", label: "6/4" }, ], }, defaultValue: "auto", diff --git a/app/sections/judgeme-reviews/review-form.tsx b/app/sections/judgeme-reviews/review-form.tsx index 2c889e62..7348fd5c 100644 --- a/app/sections/judgeme-reviews/review-form.tsx +++ b/app/sections/judgeme-reviews/review-form.tsx @@ -54,7 +54,7 @@ export function ReviewForm({ {judgemeReviews.reviews.length !== 0 || !isFormVisible ? (
    @@ -232,7 +232,7 @@ export function ReviewForm({ {isPopupVisible && (
    ( data-motion="fade-up" >
    - + ( {helpText && (
    diff --git a/app/sections/product-information/index.tsx b/app/sections/product-information/index.tsx index 77e79d3c..589b1533 100644 --- a/app/sections/product-information/index.tsx +++ b/app/sections/product-information/index.tsx @@ -115,7 +115,7 @@ let ProductInformation = forwardRef(
    Home @@ -139,19 +139,19 @@ let ProductInformation = forwardRef(
    {discountedAmount > 0 && discountedAmount < 1 && ( - + -{Math.round(discountedAmount * 100)}% )} {isNew && ( - + NEW ARRIVAL )}
    {showVendor && vendor && ( - {vendor} + {vendor} )}

    {title}

    diff --git a/app/sections/product-information/product-detail.tsx b/app/sections/product-information/product-detail.tsx index 367b0283..c2240db5 100644 --- a/app/sections/product-information/product-detail.tsx +++ b/app/sections/product-information/product-detail.tsx @@ -44,7 +44,7 @@ export function ProductDetail({ {learnMore && (
    Learn more diff --git a/app/styles/app.css b/app/styles/app.css index 78e3369f..68e4b82a 100644 --- a/app/styles/app.css +++ b/app/styles/app.css @@ -26,10 +26,6 @@ border-color: rgb(var(--color-border) / 0.15); } - body { - @apply bg-background text-body/90 antialiased; - } - html { @apply font-serif; scroll-padding-top: 10rem; @@ -174,7 +170,7 @@ view-transition-name: product-image; } -.underline-animation { +.reveal-underline { background-image: linear-gradient( to right, var(--underline-color, rgb(15, 15, 15)), @@ -187,7 +183,7 @@ transition: background 200ms ease-in-out; background-position: left calc(1em + 4px); } -.underline-animation:hover { +.reveal-underline:hover { background-size: 100% 1px; } .dropdown-transition { diff --git a/app/weaverse/schema.server.ts b/app/weaverse/schema.server.ts index 2c0acaeb..349648d4 100644 --- a/app/weaverse/schema.server.ts +++ b/app/weaverse/schema.server.ts @@ -139,7 +139,7 @@ export let themeSchema: HydrogenThemeSchema = { ], }, { - group: "Announcement bar", + group: "Scrolling announcements", inputs: [ { type: "richtext", @@ -150,7 +150,7 @@ export let themeSchema: HydrogenThemeSchema = { { type: "range", label: "Content gap", - name: "scrollingGap", + name: "topbarScrollingGap", configs: { min: 0, max: 100, @@ -171,25 +171,17 @@ export let themeSchema: HydrogenThemeSchema = { }, defaultValue: 36, }, - { - type: "switch", - label: "Enable scrolling", - name: "enableScrolling", - defaultValue: false, - helpText: - "Scrolling is automatically detected based on the content length.", - }, { type: "range", label: "Scrolling speed", - name: "scrollingSpeed", + name: "topbarScrollingSpeed", configs: { - min: 0, - max: 100, + min: 1, + max: 20, step: 1, - unit: "s", + unit: "x", }, - defaultValue: 10, + defaultValue: 5, }, ], }, @@ -253,6 +245,22 @@ export let themeSchema: HydrogenThemeSchema = { }, defaultValue: 150, }, + { + type: "heading", + label: "Menu", + }, + { + type: "select", + name: "openMenuBy", + label: "Open menu by", + configs: { + options: [ + { value: "hover", label: "Mouse hover" }, + { value: "click", label: "Mouse click" }, + ], + }, + defaultValue: "click", + }, ], }, { @@ -262,6 +270,12 @@ export let themeSchema: HydrogenThemeSchema = { type: "heading", label: "General", }, + { + type: "color", + label: "Background", + name: "colorBackground", + defaultValue: "#ffffff", + }, { type: "color", label: "Text", @@ -270,15 +284,15 @@ export let themeSchema: HydrogenThemeSchema = { }, { type: "color", - label: "Background", - name: "colorBackground", - defaultValue: "#ffffff", + label: "Text (subtle)", + name: "colorTextSubtle", + defaultValue: "#88847F", }, { type: "color", - label: "Foreground", - name: "colorForeground", - defaultValue: "#e5e7eb", + label: "Text (inverse)", + name: "colorTextInverse", + defaultValue: "#fff", }, { type: "color", @@ -384,41 +398,31 @@ export let themeSchema: HydrogenThemeSchema = { }, { type: "heading", - label: "Drawers and popovers", + label: "Labels / badges / tags", }, { type: "color", - label: "Background color", - name: "drawersBg", - defaultValue: "#ffffff", - }, - { - type: "heading", - label: "Product", + label: "Discounts", + name: "discountBadge", + defaultValue: "#c6512c", }, { type: "color", - label: "Compare price text", - name: "comparePriceTextColor", - defaultValue: "#737373", + label: "New", + name: "newBadge", + defaultValue: "#67785d", }, { type: "color", - label: "Sale tags", - name: "saleTagColor", - defaultValue: "#dc2626", - }, - { - type: "color", - label: "New tags", - name: "newTagColor", - defaultValue: "#4d4d4d", + label: "Hot / Best seller", + name: "bestSellerBadge", + defaultValue: "#000000", }, { type: "color", label: "Other tags", - name: "otherTagColor", - defaultValue: "#1e293b", + name: "otherBadges", + defaultValue: "#000000", }, { type: "color", @@ -426,6 +430,16 @@ export let themeSchema: HydrogenThemeSchema = { name: "soldOutAndUnavailable", defaultValue: "#d4d4d4", }, + { + type: "heading", + label: "Others", + }, + { + type: "color", + label: "Compare price text", + name: "comparePriceTextColor", + defaultValue: "#84807B", + }, { type: "color", label: "Star rating", diff --git a/app/weaverse/style.tsx b/app/weaverse/style.tsx index 5bd8acdc..0a157cab 100644 --- a/app/weaverse/style.tsx +++ b/app/weaverse/style.tsx @@ -1,31 +1,14 @@ import { useThemeSettings } from "@weaverse/hydrogen"; - -function hexToPercent(hex: string) { - let num = Number.parseInt(hex, 16); - return Math.floor((num / 255) * 100); -} - -function hexToRgbString(hexColor = ""): string { - if (!hexColor) return ""; - let hex = hexColor.replace("#", ""); - if (hex.length === 3) { - hex = hex.replace(/(.)/g, "$1$1"); - } - let r = Number.parseInt(hex.substring(0, 2), 16) || 0; - let g = Number.parseInt(hex.substring(2, 4), 16) || 0; - let b = Number.parseInt(hex.substring(4, 6), 16) || 0; - let a = hexToPercent(hex.substring(6, 8)) || 0; - let val = `${r} ${g} ${b}`; - return `${val}${a ? ` / ${a}%` : ""}`.trim(); -} +import { colord } from "colord"; export function GlobalStyle() { let settings = useThemeSettings(); if (settings) { let { - colorText, colorBackground, - colorForeground, + colorText, + colorTextSubtle, + colorTextInverse, colorLine, topbarTextColor, topbarBgColor, @@ -39,11 +22,11 @@ export function GlobalStyle() { buttonSecondaryBg, buttonSecondaryColor, buttonOutlineTextAndBorder, - drawersBg, comparePriceTextColor, - saleTagColor, - newTagColor, - otherTagColor, + discountBadge, + newBadge, + bestSellerBadge, + otherBadges, soldOutAndUnavailable, starRating, bodyBaseSize, @@ -70,10 +53,14 @@ export function GlobalStyle() { --page-width: ${pageWidth}px; /* Colors (general) */ - --color-text: ${hexToRgbString(colorText)}; - --color-background: ${hexToRgbString(colorBackground)}; - --color-foreground: ${hexToRgbString(colorForeground)}; - --color-line: ${hexToRgbString(colorLine)}; + --color-background: ${colorBackground}; + --color-text: ${colorText}; + --color-text-subtle: ${colorTextSubtle}; + --color-text-inverse: ${colorTextInverse}; + --color-line: ${colorLine}; + --color-line-subtle: ${colord(colorLine).lighten(0.3).toHex()}; + + /* Colors (header & footer) */ --color-topbar-text: ${topbarTextColor}; --color-topbar-bg: ${topbarBgColor}; --color-header-bg: ${headerBgColor}; @@ -90,11 +77,11 @@ export function GlobalStyle() { --btn-outline-text: ${buttonOutlineTextAndBorder}; /* Colors (product) */ - --color-drawers-bg: ${drawersBg}; --color-compare-price-text: ${comparePriceTextColor}; - --color-sale-tag: ${saleTagColor}; - --color-new-tag: ${newTagColor}; - --color-other-tag: ${otherTagColor}; + --color-discount: ${discountBadge}; + --color-new-badge: ${newBadge}; + --color-best-seller: ${bestSellerBadge}; + --color-other-badges: ${otherBadges}; --color-sold-out-and-unavailable: ${soldOutAndUnavailable}; --color-star-rating: ${starRating}; diff --git a/package-lock.json b/package-lock.json index 7580b91b..dd32a2ac 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@weaverse/pilot", - "version": "3.0.4", + "version": "3.1.0", "lockfileVersion": 3, "requires": true, "packages": { "": { "name": "@weaverse/pilot", - "version": "3.0.4", + "version": "3.1.0", "dependencies": { "@fontsource/poppins": "5.1.0", "@graphql-codegen/cli": "5.0.3", @@ -14,6 +14,7 @@ "@phosphor-icons/react": "2.1.7", "@radix-ui/react-checkbox": "1.1.2", "@radix-ui/react-dialog": "1.1.2", + "@radix-ui/react-menubar": "^1.1.2", "@radix-ui/react-tooltip": "1.1.4", "@remix-run/react": "2.14.0", "@remix-run/server-runtime": "2.14.0", @@ -23,6 +24,7 @@ "@weaverse/hydrogen": "4.0.0", "class-variance-authority": "0.7.0", "clsx": "2.1.1", + "colord": "^2.9.3", "cross-env": "7.0.3", "framer-motion": "^11.11.0", "graphql": "16.9.0", @@ -4421,6 +4423,32 @@ } } }, + "node_modules/@radix-ui/react-collection": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.1.0.tgz", + "integrity": "sha512-GZsZslMJEyo1VKm5L1ZJY8tGDxZNPAoUeQUIbKeJfoi7Q4kmig5AsgLMYYuyYbfjd8fBmFORAIwYAkXMnXZgZw==", + "license": "MIT", + "dependencies": { + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-slot": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-compose-refs": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz", @@ -4498,6 +4526,21 @@ } } }, + "node_modules/@radix-ui/react-direction": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.1.0.tgz", + "integrity": "sha512-BUuBvgThEiAXh2DWu93XsT+a3aWrGqolGlqqw5VU1kG7p/ZH2cuDlM1sRLNnY3QcBS69UIz2mcKhMxDsdewhjg==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-dismissable-layer": { "version": "1.1.1", "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.1.1.tgz", @@ -4579,6 +4622,108 @@ } } }, + "node_modules/@radix-ui/react-menu": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-menu/-/react-menu-2.1.2.tgz", + "integrity": "sha512-lZ0R4qR2Al6fZ4yCCZzu/ReTFrylHFxIqy7OezIpWF4bL0o9biKo0pFIvkaew3TyZ9Fy5gYVrR5zCGZBVbO1zg==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-collection": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-dismissable-layer": "1.1.1", + "@radix-ui/react-focus-guards": "1.1.1", + "@radix-ui/react-focus-scope": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-popper": "1.2.0", + "@radix-ui/react-portal": "1.1.2", + "@radix-ui/react-presence": "1.1.1", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-roving-focus": "1.1.0", + "@radix-ui/react-slot": "1.1.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.6.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-menu/node_modules/@radix-ui/react-context": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz", + "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-menubar": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-menubar/-/react-menubar-1.1.2.tgz", + "integrity": "sha512-cKmj5Gte7LVyuz+8gXinxZAZECQU+N7aq5pw7kUPpx3xjnDXDbsdzHtCCD2W72bwzy74AvrqdYnKYS42ueskUQ==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-collection": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.1", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-menu": "2.1.2", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-roving-focus": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-menubar/node_modules/@radix-ui/react-context": { + "version": "1.1.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.1.1.tgz", + "integrity": "sha512-UASk9zi+crv9WteK/NU4PLvOoL3OuE6BWVKNF6hPRBtYBDXQ2u5iu3O59zUlJiTVvkyuycnqrztsHVJwcK9K+Q==", + "license": "MIT", + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-popper": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.2.0.tgz", @@ -4679,6 +4824,37 @@ } } }, + "node_modules/@radix-ui/react-roving-focus": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.1.0.tgz", + "integrity": "sha512-EA6AMGeq9AEeQDeSH0aZgG198qkfHSbvWTf1HvoDmOB5bBG/qTxjYMWUKMnYiV6J/iP/J8MEFSuB2zRU2n7ODA==", + "license": "MIT", + "dependencies": { + "@radix-ui/primitive": "1.1.0", + "@radix-ui/react-collection": "1.1.0", + "@radix-ui/react-compose-refs": "1.1.0", + "@radix-ui/react-context": "1.1.0", + "@radix-ui/react-direction": "1.1.0", + "@radix-ui/react-id": "1.1.0", + "@radix-ui/react-primitive": "2.0.0", + "@radix-ui/react-use-callback-ref": "1.1.0", + "@radix-ui/react-use-controllable-state": "1.1.0" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", + "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, "node_modules/@radix-ui/react-slot": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.1.0.tgz", @@ -7391,6 +7567,12 @@ "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz", "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==" }, + "node_modules/colord": { + "version": "2.9.3", + "resolved": "https://registry.npmjs.org/colord/-/colord-2.9.3.tgz", + "integrity": "sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==", + "license": "MIT" + }, "node_modules/colorette": { "version": "2.0.20", "resolved": "https://registry.npmjs.org/colorette/-/colorette-2.0.20.tgz", diff --git a/package.json b/package.json index e0c3d5e9..dea82ba4 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "name": "@weaverse/pilot", "private": true, "sideEffects": false, - "version": "3.0.4", + "version": "3.1.0", "type": "module", "author": "Weaverse", "scripts": { @@ -27,6 +27,7 @@ "@phosphor-icons/react": "2.1.7", "@radix-ui/react-checkbox": "1.1.2", "@radix-ui/react-dialog": "1.1.2", + "@radix-ui/react-menubar": "^1.1.2", "@radix-ui/react-tooltip": "1.1.4", "@remix-run/react": "2.14.0", "@remix-run/server-runtime": "2.14.0", @@ -36,6 +37,7 @@ "@weaverse/hydrogen": "4.0.0", "class-variance-authority": "0.7.0", "clsx": "2.1.1", + "colord": "^2.9.3", "cross-env": "7.0.3", "framer-motion": "^11.11.0", "graphql": "16.9.0", diff --git a/tailwind.config.js b/tailwind.config.js index bd944f45..f962d2eb 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -13,28 +13,19 @@ export default { extend: { keyframes: { "fade-in": { - from: { opacity: "0" }, + from: { opacity: "0.5" }, to: { opacity: "1" }, }, - "slide-down-and-fade": { - from: { opacity: "0", transform: "translateY(-6px)" }, - to: { opacity: "1", transform: "translateY(0)" }, - }, "slide-left-and-fade": { - from: { opacity: "0", transform: "translateX(6px)" }, - to: { opacity: "1", transform: "translateX(0)" }, - }, - "slide-up-and-fade": { - from: { opacity: "0", transform: "translateY(6px)" }, - to: { opacity: "1", transform: "translateY(0)" }, - }, - "slide-right-and-fade": { - from: { opacity: "0", transform: "translateX(-6px)" }, - to: { opacity: "1", transform: "translateX(0)" }, + from: { + opacity: 0, + transform: "translateX(var(--left-distance, 6px))", + }, + to: { opacity: 1, transform: "translateX(0)" }, }, marquee: { - from: { transform: "translateX(0)" }, - to: { transform: "translateX(-100%)" }, + from: { transform: "translateZ(0)" }, + to: { transform: "translate3d(-100%,0,0)" }, }, underline: { "0%": { @@ -55,26 +46,22 @@ export default { }, animation: { spin: "spin .5s linear infinite", - marquee: "marquee var(--animation-speed, 150ms) linear infinite", + marquee: "marquee var(--marquee-duration, 15s) linear infinite", underline: "underline 400ms linear", - "fade-in": "fade-in 500ms ease-in forwards", - "slide-down-and-fade": - "slide-down-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards", + "fade-in": "fade-in var(--fade-in-duration, .5s) ease-in forwards", "slide-left-and-fade": - "slide-left-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards", - "slide-up-and-fade": - "slide-up-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards", - "slide-right-and-fade": - "slide-right-and-fade 400ms cubic-bezier(0.16, 1, 0.3, 1) forwards", + "slide-left-and-fade var(--slide-left-and-fade-duration, .5s) cubic-bezier(0.14, 0.8, 0.6, 1) forwards", }, borderWidth: { 6: "6px", }, colors: { - body: "rgb(var(--color-text) / )", - background: "rgb(var(--color-background) / )", - foreground: "rgb(var(--color-foreground) / )", - line: "rgb(var(--color-line) / )", + body: "var(--color-text)", + "body-subtle": "var(--color-text-subtle)", + "body-inverse": "var(--color-text-inverse)", + background: "var(--color-background)", + line: "var(--color-line)", + "line-subtle": "var(--color-line-subtle)", }, outlineOffset: { 3: "3px",