@godaddy/gd-commerce-storefront 0.1.0 → 0.1.1

package/README.md

@@ -82,7 +82,7 @@ A connection failure leaves the surrounding application and its state mounted. C
 </CommerceStorefront>
 ```
 
-The stylesheet includes all required utilities and scopes them to the package's surfaces. The build removes CSS layer wrappers in their declared order, so the exported CSS can pass through a host Tailwind v3 PostCSS pipeline without `@tailwind` directives. Import it directly; consumers do not need to copy or rewrite the CSS. It does not add a global reset or require dependency scanning by a host Tailwind build. The `theme` prop reaches the drawer even though it is portalled into `document.body`. Keep text, controls and focus indicators accessible when changing colors. Utility class names and internal markup are not a customization API.
+The stylesheet includes all required utilities and scopes them to the package's surfaces. The build removes CSS layer wrappers in their declared order, so the exported CSS can pass through a host Tailwind v3 PostCSS pipeline without `@tailwind` directives. Import it directly; consumers do not need to copy or rewrite the CSS. It does not add a global reset or require dependency scanning by a host Tailwind build. The `theme` prop reaches the drawer even though it is portalled into `document.body`. Surfaces pair `--commerce-surface` with `--commerce-text`; muted text and borders adapt to that pair. Descendants inherit the surface text and body font instead of global heading styles. Keep text, controls and focus indicators accessible when changing colors. Utility class names and internal markup are not a customization API.
 
 The first release uses English UI text and `en-US` currency formatting. Catalog title and description are configurable. Full localization and arbitrary component slots are outside this initial API.
 

package/dist/index.d.ts

@@ -199,7 +199,6 @@ interface SKUGroupAttribute {
 type SKUGroupSKU = SKU;
 interface SKUGroup {
   id?: string | null;
-  status?: string | null;
   name?: string | null;
   label?: string | null;
   description?: string | null;

package/dist/index.js

@@ -939,8 +939,8 @@ function ProductDetailsContent({ productId }) {
 			headers: { "X-Commerce-Scope": config.cartScope }
 		})
 	});
+	const productNotFound = product.isError && product.error instanceof ApiError && product.error.status === 404;
 	const group = product.data?.skuGroup;
-	const productUnavailable = group?.status != null && group.status !== "ACTIVE";
 	const attributes = getProductAttributes(group);
 	const skuOptions = getLabeledSkuOptions(group);
 	const explicitSku = skuOptions.find((sku) => sku.id === params.get("sku"));
@@ -985,7 +985,7 @@ function ProductDetailsContent({ productId }) {
 		role: "status",
 		children: "Loading product…"
 	});
-	if (product.isError) return /* @__PURE__ */ jsxs("div", {
+	if (product.isError && !productNotFound) return /* @__PURE__ */ jsxs("div", {
 		role: "alert",
 		children: [
 			/* @__PURE__ */ jsx("h1", {
@@ -1004,7 +1004,7 @@ function ProductDetailsContent({ productId }) {
 			})
 		]
 	});
-	if (!group) return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", {
+	if (productNotFound || !group) return /* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsx("h1", {
 		className: "text-2xl font-semibold",
 		children: "Product not found"
 	}), /* @__PURE__ */ jsx(Link, {
@@ -1154,25 +1154,19 @@ function ProductDetailsContent({ productId }) {
 								value: Number.isNaN(quantity) ? "" : quantity,
 								onChange: (event) => setQuantity(event.target.valueAsNumber)
 							})] }),
-							productUnavailable ? /* @__PURE__ */ jsx("p", {
-								className: "text-sm",
-								children: "This product is no longer available."
-							}) : /* @__PURE__ */ jsx(AddToCartButton, {
+							/* @__PURE__ */ jsx(AddToCartButton, {
 								sku: selectedSku,
 								name,
 								quantity
 							})
 						] }),
-						!selectedSku && (productUnavailable ? /* @__PURE__ */ jsx("p", {
-							className: "text-sm",
-							children: "This product is no longer available."
-						}) : /* @__PURE__ */ jsx("button", {
+						!selectedSku && /* @__PURE__ */ jsx("button", {
 							type: "button",
 							className: `${buttonClass} w-full`,
 							disabled: true,
 							"aria-describedby": !complete ? `${fieldId}-variant-guidance` : void 0,
 							children: "Add to cart"
-						}))
+						})
 					]
 				})
 			]

package/dist/styles.css

@@ -32,12 +32,6 @@
     --color-red-700: oklch(50.5% 0.213 27.518);
     --color-red-800: oklch(44.4% 0.177 26.899);
     --color-amber-800: oklch(47.3% 0.137 46.201);
-    --color-neutral-100: oklch(97% 0 0);
-    --color-neutral-200: oklch(92.2% 0 0);
-    --color-neutral-300: oklch(87% 0 0);
-    --color-neutral-400: oklch(70.8% 0 0);
-    --color-neutral-600: oklch(43.9% 0 0);
-    --color-neutral-700: oklch(37.1% 0 0);
     --color-neutral-950: oklch(14.5% 0 0);
     --spacing: 0.25rem;
     --container-lg: 32rem;
@@ -71,9 +65,14 @@
   }
 .commerce-storefront {
     color: var(--commerce-text, #171717);
+    background-color: var(--commerce-surface, #fff);
     font-family: inherit;
     line-height: 1.5;
   }
+.commerce-storefront :where(*) {
+    color: inherit;
+    font-family: inherit;
+  }
 .commerce-storefront *, .commerce-storefront *::before, .commerce-storefront *::after {
     box-sizing: border-box;
     border-width: 0;
@@ -109,6 +108,7 @@
   }
 .commerce-inline {
     display: inline-block;
+    background-color: transparent;
   }
 .commerce-sr-only {
     position: absolute;
@@ -347,7 +347,12 @@
   }
 .commerce-storefront .divide-neutral-200 {
     :where(& > :not(:last-child)) {
-      border-color: var(--color-neutral-200);
+      border-color: var(--commerce-text, #171717);
+      @supports (color: color-mix(in lab, red, red)) {
+        & {
+          border-color: color-mix(in srgb, var(--commerce-text, #171717) 15%, var(--commerce-surface, #fff));
+        }
+      }
     }
   }
 .commerce-storefront .overflow-hidden {
@@ -385,13 +390,28 @@
     border-bottom-width: 1px;
   }
 .commerce-storefront .border-neutral-200 {
-    border-color: var(--color-neutral-200);
+    border-color: var(--commerce-text, #171717);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        border-color: color-mix(in srgb, var(--commerce-text, #171717) 15%, var(--commerce-surface, #fff));
+      }
+    }
   }
 .commerce-storefront .border-neutral-300 {
-    border-color: var(--color-neutral-300);
+    border-color: var(--commerce-text, #171717);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        border-color: color-mix(in srgb, var(--commerce-text, #171717) 25%, var(--commerce-surface, #fff));
+      }
+    }
   }
 .commerce-storefront .border-neutral-400 {
-    border-color: var(--color-neutral-400);
+    border-color: var(--commerce-text, #171717);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        border-color: color-mix(in srgb, var(--commerce-text, #171717) 55%, var(--commerce-surface, #fff));
+      }
+    }
   }
 .commerce-storefront .border-neutral-900 {
     border-color: var(--commerce-text, #171717);
@@ -403,7 +423,12 @@
     background-color: var(--commerce-accent, #171717);
   }
 .commerce-storefront .bg-neutral-100 {
-    background-color: var(--color-neutral-100);
+    background-color: var(--commerce-text, #171717);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        background-color: color-mix(in srgb, var(--commerce-text, #171717) 5%, var(--commerce-surface, #fff));
+      }
+    }
   }
 .commerce-storefront .bg-neutral-950\/40 {
     background-color: color-mix(in srgb, oklch(14.5% 0 0) 40%, transparent);
@@ -544,7 +569,12 @@
     color: inherit;
   }
 .commerce-storefront .text-neutral-600 {
-    color: var(--color-neutral-600);
+    color: var(--commerce-text, #171717);
+    @supports (color: color-mix(in lab, red, red)) {
+      & {
+        color: color-mix(in srgb, var(--commerce-text, #171717) 75%, var(--commerce-surface, #fff));
+      }
+    }
   }
 .commerce-storefront .text-neutral-900 {
     color: var(--commerce-text, #171717);
@@ -613,29 +643,54 @@
   }
 .commerce-storefront .disabled\:bg-neutral-100 {
     &:disabled {
-      background-color: var(--color-neutral-100);
+      background-color: var(--commerce-text, #171717);
+      @supports (color: color-mix(in lab, red, red)) {
+        & {
+          background-color: color-mix(in srgb, var(--commerce-text, #171717) 5%, var(--commerce-surface, #fff));
+        }
+      }
     }
   }
 .commerce-storefront .disabled\:bg-neutral-200 {
     &:disabled {
-      background-color: var(--color-neutral-200);
+      background-color: var(--commerce-text, #171717);
+      @supports (color: color-mix(in lab, red, red)) {
+        & {
+          background-color: color-mix(in srgb, var(--commerce-text, #171717) 15%, var(--commerce-surface, #fff));
+        }
+      }
     }
   }
 .commerce-storefront .disabled\:text-neutral-600 {
     &:disabled {
-      color: var(--color-neutral-600);
+      color: var(--commerce-text, #171717);
+      @supports (color: color-mix(in lab, red, red)) {
+        & {
+          color: color-mix(in srgb, var(--commerce-text, #171717) 75%, var(--commerce-surface, #fff));
+        }
+      }
     }
   }
 .commerce-storefront .disabled\:text-neutral-700 {
     &:disabled {
-      color: var(--color-neutral-700);
+      color: var(--commerce-text, #171717);
+      @supports (color: color-mix(in lab, red, red)) {
+        & {
+          color: color-mix(in srgb, var(--commerce-text, #171717) 85%, var(--commerce-surface, #fff));
+        }
+      }
     }
   }
 .commerce-storefront .disabled\:hover\:bg-neutral-200 {
     &:disabled {
       &:hover {
         @media (hover: hover) {
-          background-color: var(--color-neutral-200);
+          background-color: var(--commerce-text, #171717);
+          @supports (color: color-mix(in lab, red, red)) {
+            & {
+              background-color: color-mix(in srgb, var(--commerce-text, #171717) 15%, var(--commerce-surface, #fff));
+            }
+          }
         }
       }
     }

package/docs/server-api.md

@@ -31,6 +31,8 @@ Server implementations can use GoDaddy Commerce APIs or their existing integrati
 
 `/checkout` is required only when checkout is enabled. `/discounts` is needed if the host uses `applyDiscount`. The standard catalog/detail/cart flow uses the other routes. All product/cart IDs in request paths are encoded.
 
+The companion `@godaddy/gd-commerce-server` returns 404 from product details when the group is missing or excluded by the catalog's ACTIVE filter, including direct links to inactive products.
+
 ## Configuration
 
 `cartScope` is a nonempty opaque identifier for the effective store/channel/currency binding. It is not a secret. Rotate it when that binding changes so a saved cart cannot cross stores or currencies. `currencyCode` is a three-letter uppercase ISO 4217 code, for example `USD`. Money integers use that currency's smallest unit: USD 1234 is $12.34; JPY 1234 is ¥1,234. The cart shows the draft-order subtotal and the message “Shipping, taxes, and discounts are calculated at checkout.” The message has the stable `commerce-cart-checkout-adjustments-note` class so a host can hide it without changing the component.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@godaddy/gd-commerce-storefront",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Opinionated React storefront templates for GoDaddy Commerce",
   "type": "module",
   "license": "MIT",
@@ -23,14 +23,6 @@
     "./styles.css": "./dist/styles.css",
     "./package.json": "./package.json"
   },
-  "scripts": {
-    "build": "tsdown && node scripts/build-css.mjs",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "lint": "biome check src",
-    "lint:fix": "biome check --write src",
-    "prepublishOnly": "pnpm build"
-  },
   "peerDependencies": {
     "@tanstack/react-query": "^5.0.0",
     "react": "^18.2.0 || ^19.0.0",
@@ -69,5 +61,12 @@
     "type": "git",
     "url": "git+https://github.com/godaddy/javascript.git",
     "directory": "packages/commerce-storefront"
+  },
+  "scripts": {
+    "build": "tsdown && node scripts/build-css.mjs",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "lint": "biome check src",
+    "lint:fix": "biome check --write src"
   }
-}
+}