@pradip1995/segment-product-card 0.3.7 → 0.3.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pradip1995/segment-product-card",
-  "version": "0.3.7",
+  "version": "0.3.9",
   "license": "MIT",
   "publishConfig": {
     "access": "public"
@@ -26,7 +26,7 @@
   },
   "dependencies": {
     "@pradip1995/segment-primitives": "^0.3.2",
-    "@pradip1995/segment-tokens": "^0.3.2"
+    "@pradip1995/segment-tokens": "^0.3.6"
   },
   "devDependencies": {
     "@pradip1995/plugin-sdk": "^0.2.0",

package/src/beauty-product-card.tsx

@@ -35,8 +35,8 @@ export default function BeautyProductCard({
   const originalPrice = variant?.calculated_price?.original_amount
   const currency = region?.currency_code || variant?.calculated_price?.currency_code || "inr"
   const countryCode =
-    countryCodeProp?.toLowerCase() ??
-    region?.countries?.[0]?.iso_2?.toLowerCase() ??
+    countryCodeProp?.toLowerCase() ||
+    region?.countries?.[0]?.iso_2?.toLowerCase() ||
     "in"
 
   const discountPct =
@@ -55,7 +55,7 @@ export default function BeautyProductCard({
         href={`/products/${product.handle}`}
         className="beauty-product-card__link flex flex-col h-full"
       >
-        <div className="beauty-product-card__media relative aspect-square bg-[#faf7f5] overflow-hidden">
+        <div className="beauty-product-card__media relative aspect-square bg-[var(--color-surface-muted)] overflow-hidden">
           {product.thumbnail?.trim() ? (
             <img
               src={product.thumbnail.trim()}

package/src/default-product-card.tsx

@@ -27,8 +27,8 @@ export default function DefaultProductCard({
   const originalPrice = variant?.calculated_price?.original_amount
   const currency = region?.currency_code || variant?.calculated_price?.currency_code || "inr"
   const countryCode =
-    countryCodeProp?.toLowerCase() ??
-    region?.countries?.[0]?.iso_2?.toLowerCase() ??
+    countryCodeProp?.toLowerCase() ||
+    region?.countries?.[0]?.iso_2?.toLowerCase() ||
     "in"
 
   const discountPct =

package/src/segment.css

@@ -1,7 +1,7 @@
 /* Beauty product card — Lumière cosmetics */
 
 .beauty-product-card {
-  background: #ffffff;
+  background: var(--color-surface);
   border: 1px solid rgba(139, 58, 98, 0.1);
   box-shadow: 0 10px 28px rgba(42, 16, 32, 0.05);
   transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
@@ -32,7 +32,7 @@
 }
 
 .beauty-product-card__placeholder {
-  background: linear-gradient(135deg, #faf7f5 0%, #f5ebe3 100%);
+  background: linear-gradient(135deg, var(--color-surface-muted) 0%, var(--color-brand-cream) 100%);
 }
 
 .beauty-product-card__badge {
@@ -48,8 +48,8 @@
 }
 
 .beauty-product-card__badge--sale {
-  background: #000000;
-  color: #ffffff;
+  background: var(--color-brand-primary);
+  color: var(--color-text-inverse);
 }
 
 .beauty-product-card .product-card__actions {
@@ -85,7 +85,7 @@
   width: 100%;
   border-radius: 0;
   background: rgba(0, 0, 0, 0.82);
-  color: #ffffff;
+  color: var(--color-text-inverse);
   letter-spacing: 0.14em;
   text-transform: uppercase;
   font-size: 0.6875rem;
@@ -95,7 +95,7 @@
 }
 
 .beauty-product-card .product-card__quick-add:hover:not(:disabled) {
-  background: #000000;
+  background: var(--color-brand-primary);
 }
 
 .beauty-product-card:not(:hover) .product-card__quick-add-wrap {
@@ -172,7 +172,7 @@
 }
 
 .beauty-product-card__rating-stars {
-  color: #c9a86c;
+  color: var(--color-brand-gold);
   font-size: 0.8125rem;
 }