fragment-headless-sdk 2.1.6 → 2.1.8

package/dist/components/Announcement/CountdownTimer.js

@@ -33,20 +33,24 @@ export default function CountdownTimer({ content, }) {
     const blockClass = mergeSlotClasses("flex flex-col items-center", styling, "countdownBlock");
     const blockStyle = mergeSlotStyles(undefined, styling, "countdownBlock");
     const blockAttributes = mergeSlotAttributes(styling, "countdownBlock");
-    const digitClass = mergeSlotClasses("text-white text-xl font-bold flex items-center justify-center leading-none", styling, "countdownDigit");
+    const digitClass = mergeSlotClasses("text-white text-xl font-bold flex items-center justify-center leading-none rounded px-1", styling, "countdownDigit");
     const digitTextColor = resolveToken(styling, "counterDigitColor", "#FFFFFF") || "#FFFFFF";
+    const digitBackgroundColor = resolveToken(styling, "counterDigitBackgroundColor", "#000000") ||
+        "#000000";
+    const counterTextColor = resolveToken(styling, "counterTextColor", digitTextColor);
     const digitStyle = mergeSlotStyles({
         color: digitTextColor,
+        backgroundColor: digitBackgroundColor,
     }, styling, "countdownDigit");
     const digitAttributes = mergeSlotAttributes(styling, "countdownDigit");
     const labelClass = mergeSlotClasses("mt-0.5 text-[10px] leading-tight", styling, "countdownLabel");
     const labelStyle = mergeSlotStyles({
-        color: digitTextColor,
+        color: counterTextColor,
     }, styling, "countdownLabel");
     const labelAttributes = mergeSlotAttributes(styling, "countdownLabel");
     const separatorClass = mergeSlotClasses("text-xl font-semibold -mt-4", styling, "countdownSeparator");
     const separatorStyle = mergeSlotStyles({
-        color: digitTextColor,
+        color: counterTextColor,
     }, styling, "countdownSeparator");
     const separatorAttributes = mergeSlotAttributes(styling, "countdownSeparator");
     const renderBlock = (value, label) => (React.createElement("div", { className: blockClass, style: blockStyle, ...(blockAttributes ?? {}) },

package/dist/styles/fragment-sdk.css

@@ -0,0 +1,31 @@
+@import url("https://fonts.googleapis.com/css2?family=Geist:wght@100..900&family=Geist+Mono:wght@100..900&family=Roboto:wght@300;400;500;700&family=Open+Sans:wght@300;400;600;700&family=Lato:wght@300;400;700&family=Montserrat:wght@300;400;500;700&family=Inter:wght@300;400;500;700&family=Poppins:wght@300;400;600;700&family=Raleway:wght@300;400;500;700&family=Playfair+Display:wght@400;700&family=Merriweather:wght@300;400;700&family=Oswald:wght@300;400;500;700&display=swap");
+
+/* Custom animations for fragment-headless-sdk */
+@keyframes marquee {
+  0% {
+    transform: translateX(0%);
+  }
+  100% {
+    transform: translateX(-100%);
+  }
+}
+
+/* Utility classes for marquee animations */
+.animate-marquee {
+  animation: marquee 25s linear infinite;
+}
+
+/* Make hero/announcement prose links inherit the surrounding text color (v2.1+) */
+.prose {
+  --tw-prose-links: currentColor;
+  --tw-prose-links-hover: currentColor;
+}
+
+.prose :where(a):not(:where([class~="not-prose"] *)) {
+  color: currentColor;
+}
+
+.prose :where(a):not(:where([class~="not-prose"] *)):hover {
+  color: currentColor;
+  text-decoration: underline;
+}

package/dist/utils/hero-resolvers.js

@@ -39,7 +39,7 @@ export function resolveHeroColors(content) {
     return {
         title: fallbackColor(tokens.title, DEFAULT_COLORS.title),
         text: fallbackColor(tokens.text, DEFAULT_COLORS.text),
-        buttonBackground: fallbackColor(tokens.button ?? tokens.buttonBackground, DEFAULT_COLORS.buttonBackground),
+        buttonBackground: fallbackColor(tokens.buttonBackground, DEFAULT_COLORS.buttonBackground),
         buttonText: fallbackColor(tokens.buttonText, DEFAULT_COLORS.buttonText),
         background: fallbackColor(tokens.background, DEFAULT_COLORS.background),
     };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fragment-headless-sdk",
-  "version": "2.1.6",
+  "version": "2.1.8",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

package/readme.md

@@ -4,7 +4,7 @@ The official SDK for integrating with Fragment-Shopify CMS. Provides React compo
 
 ## ✨ What's New
 
-**v2.1.4** - Countdown timer enhancements and improved announcement layouts
+**v2.1.8** - Enhanced countdown timer styling with customizable color tokens
 
 > See [CHANGELOG.md](./docs/CHANGELOG.md) for full release history
 
@@ -433,6 +433,44 @@ interface IAnnouncementContent {
 - `button` - Action button
 - `closeButton` - Close button
 - `countdown` - Countdown container (countdown type)
+- `countdownContainer` - Countdown timer container
+- `countdownBlock` - Individual time block (days, hours, etc.)
+- `countdownDigit` - Countdown digit styling
+- `countdownLabel` - Time unit labels (Days, Hours, Mins, Secs)
+- `countdownSeparator` - Separator between time blocks (`:`)
+
+**Countdown Timer Color Tokens:**
+
+For countdown-type announcements, you can customize the timer appearance using these color tokens in `styling.tokens.colors`:
+
+- `counterDigitColor` - Color of the countdown digits (default: `#FFFFFF`)
+- `counterDigitBackgroundColor` - Background color of the countdown digits (default: `#000000`)
+- `counterTextColor` - Color of labels and separators (default: uses `counterDigitColor`)
+
+**Example:**
+
+```tsx
+const announcementContent = {
+  buttonType: ButtonType.Default,
+  buttonText: "Shop now",
+  buttonLink: "/",
+  counterEndDate: "2026-01-01T17:00:00.000Z",
+  announcementHtml: "🎉 Check out the latest products!",
+  styling: {
+    tokens: {
+      colors: {
+        text: "#1e293b",
+        background: "#e0e7ff",
+        button: "#4f46e5",
+        buttonText: "#ffffff",
+        counterDigitColor: "#ffffff",
+        counterDigitBackgroundColor: "#4f46e5",
+        counterTextColor: "#000000",
+      },
+    },
+  },
+};
+```
 
 ## 🔑 API Key Setup