jfs-components 0.1.35 → 0.1.48

package/lib/commonjs/components/CompareTable/CompareTable.js

@@ -114,7 +114,9 @@ function CompareTable({
   style,
   disableTruncation,
   columnWidth,
-  stickyHeaders = true,
+  stickyCards = true,
+  stickyAccordionTitles = true,
+  stickyHeaders = false,
   stickyHeaderLabel = true
 }) {
   // --- selection card tokens ------------------------------------------------
@@ -129,11 +131,10 @@ function CompareTable({
   const cardLabelFontFamily = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/label/fontfamily', modes) ?? 'JioType Var';
   const cardLabelFontWeight = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/label/fontweight', modes) ?? 700;
   const imageRadius = (0, _figmaVariablesResolver.getVariableByName)('image/radius', modes) ?? 8;
-  // `selectionCard/radius` (Figma node 5568:3487) rounds the card corners.
-  // The published token store is still out of sync (the variable resolves to
-  // `0` in the design), so the read falls back to `0` and will pick up a
-  // rounded value automatically once the store syncs.
-  const cardRadius = (0, _figmaVariablesResolver.getVariableByName)('selectionCard/radius', modes) ?? 0;
+  // Selection cards are square — no corner radius (Figma compare-table
+  // treatment). Ignore `selectionCard/radius` so a non-zero token value
+  // cannot round the card edges.
+  const cardRadius = 0;
 
   // --- add-a-card icon button tokens ---------------------------------------
   // padding/size/border come from the shared iconButton tokens; the filled
@@ -192,6 +193,16 @@ function CompareTable({
    *  scrollTo echoes from synced peers are ignored, eliminating jitter. */
   const draggingSource = (0, _react.useRef)(null);
   const lastSyncX = (0, _react.useRef)(0);
+
+  // Controlled expand state for sticky accordion titles (header + body are
+  // split across two Accordion instances that must stay in sync).
+  const [expandedByIndex, setExpandedByIndex] = (0, _react.useState)(() => {
+    const initial = {};
+    sections.forEach((section, index) => {
+      initial[index] = section.defaultExpanded ?? index === 0;
+    });
+    return initial;
+  });
   const syncOthers = (0, _react.useCallback)((source, x) => {
     if (source !== 'cards' && cardsScrollRef.current) {
       cardsScrollRef.current.scrollTo({
@@ -300,6 +311,10 @@ function CompareTable({
     minHeight: 147,
     backgroundColor: cardBg,
     borderRadius: cardRadius,
+    borderTopLeftRadius: cardRadius,
+    borderTopRightRadius: cardRadius,
+    borderBottomLeftRadius: cardRadius,
+    borderBottomRightRadius: cardRadius,
     alignItems: 'center',
     justifyContent: 'center',
     gap: cardGap,
@@ -513,6 +528,7 @@ function CompareTable({
     backgroundColor: cardBg,
     borderWidth: 1,
     borderColor: '#e8e8e8',
+    borderRadius: 0,
     overflow: 'hidden'
   };
 
@@ -541,14 +557,18 @@ function CompareTable({
   }
 
   // --- fixed-width scroll mode: chained horizontal sync + sticky cards -----
-  // Build children and stickyHeaderIndices for the vertical ScrollView.
-  // When stickyHeaders is on, section headers are injected as direct children
-  // so React Native's stickyHeaderIndices can pin them with stacking.
-  const scrollChildren = [];
-  const stickyIndices = [];
-  if (showCardsRow) {
-    stickyIndices.push(scrollChildren.length);
-    scrollChildren.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+  // Sticky cards are pinned *outside* the vertical ScrollView (sibling above
+  // it) so they cannot scroll away — `stickyHeaderIndices` is unreliable for
+  // a nested horizontal ScrollView on Fabric. Sticky accordion titles /
+  // table headers still use stickyHeaderIndices inside the scroll surface
+  // and therefore stick directly under the pinned cards.
+  const renderCardsRow = () => /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+    style: {
+      width: '100%',
+      backgroundColor: cardBg,
+      zIndex: 2
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
       ref: cardsScrollRef,
       horizontal: true,
       showsHorizontalScrollIndicator: false,
@@ -564,11 +584,51 @@ function CompareTable({
         },
         children: [columns.map(renderCard), showAddCard && renderAddCard()]
       })
-    }, "cards-row"));
+    })
+  }, "cards-row");
+  const scrollChildren = [];
+  const stickyIndices = [];
+
+  // Non-sticky cards scroll away with the sections (inside the ScrollView).
+  if (showCardsRow && !stickyCards) {
+    scrollChildren.push(renderCardsRow());
   }
   sections.forEach((section, index) => {
     const sectionKey = section.key ?? section.title ?? index;
     const headerContent = renderHeaderContent(section);
+    const expanded = expandedByIndex[index] ?? section.defaultExpanded ?? index === 0;
+    const onExpandedChange = next => {
+      setExpandedByIndex(prev => ({
+        ...prev,
+        [index]: next
+      }));
+    };
+    const inlineHeader = !stickyHeaders && headerContent != null ? stickyHeaderLabel ? headerContent : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+      horizontal: true,
+      showsHorizontalScrollIndicator: false,
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: contentWidth
+        },
+        children: headerContent
+      })
+    }) : null;
+    if (stickyAccordionTitles) {
+      stickyIndices.push(scrollChildren.length);
+      scrollChildren.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+        style: {
+          width: '100%',
+          backgroundColor: cardBg
+        },
+        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Accordion.default, {
+          title: section.title,
+          expanded: expanded,
+          onExpandedChange: onExpandedChange,
+          modes: modes,
+          showContent: false
+        })
+      }, `sticky-accordion-title-${sectionKey}`));
+    }
     if (stickyHeaders && headerContent != null) {
       stickyIndices.push(scrollChildren.length);
       scrollChildren.push(/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
@@ -587,37 +647,42 @@ function CompareTable({
         })
       }, `sticky-header-${sectionKey}`));
     }
-    scrollChildren.push(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Accordion.default, {
-      title: section.title,
-      defaultExpanded: section.defaultExpanded ?? index === 0,
-      modes: modes,
-      children: [!stickyHeaders && headerContent != null && (stickyHeaderLabel ? headerContent : /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
-        horizontal: true,
-        showsHorizontalScrollIndicator: false,
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
-          style: {
-            width: contentWidth
-          },
-          children: headerContent
-        })
-      })), renderBodyContent(section, index)]
-    }, sectionKey));
+    if (stickyAccordionTitles) {
+      scrollChildren.push(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Accordion.default, {
+        title: section.title,
+        expanded: expanded,
+        onExpandedChange: onExpandedChange,
+        modes: modes,
+        showHeader: false,
+        children: [inlineHeader, renderBodyContent(section, index)]
+      }, sectionKey));
+    } else {
+      scrollChildren.push(/*#__PURE__*/(0, _jsxRuntime.jsxs)(_Accordion.default, {
+        title: section.title,
+        defaultExpanded: section.defaultExpanded ?? index === 0,
+        modes: modes,
+        children: [inlineHeader, renderBodyContent(section, index)]
+      }, sectionKey));
+    }
   });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
     style: [outerStyle, style, {
       flexDirection: 'column',
       flex: 1
     }],
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
+    children: [showCardsRow && stickyCards ? renderCardsRow() : null, /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
       style: {
         width: '100%',
         flex: 1
       },
+      contentContainerStyle: {
+        flexGrow: 1
+      },
       stickyHeaderIndices: stickyIndices,
       showsVerticalScrollIndicator: false,
       directionalLockEnabled: true,
       children: scrollChildren
-    })
+    })]
   });
 }
 var _default = exports.default = CompareTable;

package/lib/commonjs/components/FormField/FormField.js

@@ -333,6 +333,9 @@ const FormField = /*#__PURE__*/(0, _react.forwardRef)(function FormField({
     fontWeight: tokens.inputFontWeight,
     padding: 0,
     margin: 0,
+    // Match the caret to the tokenized input text color on web (native uses
+    // cursorColor / selectionColor on the TextInput below).
+    caretColor: tokens.inputTextColor,
     // Remove the default web focus ring; the input row's border acts as the
     // focus indicator via the FormField States cascade.
     outlineStyle: 'none',
@@ -395,7 +398,12 @@ const FormField = /*#__PURE__*/(0, _react.forwardRef)(function FormField({
         onBlur: handleBlur,
         onSubmitEditing: onSubmitEditing,
         placeholder: placeholder ?? '',
-        placeholderTextColor: placeholderColor,
+        placeholderTextColor: placeholderColor
+        // Kill platform accent cursors (Android Material green, iOS system
+        // blue) — match NoteInput/MoneyValue and use the tokenized text color.
+        ,
+        cursorColor: tokens.inputTextColor,
+        selectionColor: tokens.inputTextColor,
         editable: interactive,
         maxLength: maxLength,
         autoFocus: autoFocus,

package/lib/commonjs/components/FullscreenModal/FullscreenModal.js

@@ -219,23 +219,14 @@ function FullscreenModal({
   }), [globalModes, propModes]);
   const rootGap = Number((0, _figmaVariablesResolver.getVariableByName)('fullScreenModal/gap', modes));
 
-  // Safe-area insets so the floating chrome clears the system bars: the close
-  // button drops below the status bar / notch, and the sticky footer keeps its
-  // designed bottom padding ON TOP of the bottom inset (home indicator /
-  // Android gesture or nav bar). On web — and anywhere without a
-  // SafeAreaProvider — every inset is 0, so the layout is unchanged.
+  // Safe-area inset so the floating close button clears the status bar / notch.
+  // Footer padding stays at the design-token value from ActionFooter — no
+  // extra inset is layered on top (the token already accounts for bottom chrome).
+  // On web — and anywhere without a SafeAreaProvider — insets.top is 0.
   const insets = (0, _reactNativeSafeAreaContext.useSafeAreaInsets)();
   const closeButtonInsetStyle = (0, _react.useMemo)(() => ({
     top: 12 + insets.top + closeOffsetY
   }), [insets.top, closeOffsetY]);
-  // Extend (not replace) the footer's token bottom padding by the bottom inset
-  // so the action button never sits under the system navigation area.
-  const footerInsetStyle = (0, _react.useMemo)(() => {
-    const base = Number((0, _figmaVariablesResolver.getVariableByName)('actionFooter/padding/bottom', modes));
-    return {
-      paddingBottom: base + insets.bottom
-    };
-  }, [modes, insets.bottom]);
 
   // Drives the background's parallax-free sync with the scroll. The hero media
   // lives at the ROOT (so it is never clipped to the content height and sits
@@ -396,7 +387,6 @@ function FullscreenModal({
       })
     }), footerContent ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_ActionFooter.default, {
       modes: modes,
-      style: footerInsetStyle,
       children: footerContent
     }) : null, showClose ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
       iconName: "ic_close",

package/lib/commonjs/components/HelloJioInput/HelloJioInput.js

@@ -57,7 +57,15 @@ const STATE_FALLBACKS = {
     iconColor: '#24262b'
   },
   IdleJioPlus: {
-    background: '#f5f5f5',
+    // Glass fill. In Figma the IdleJioPlus surface resolves
+    // `helloJioInput/background` under the `Page type = JioPlus` variable mode,
+    // which yields a TRANSLUCENT light fill (not the opaque `#f5f5f5` the
+    // MainPage mode gives). Painted over the backdrop blur, an opaque value
+    // would read as a solid bar and hide the blur entirely — so, matching the
+    // translucent glass fallbacks the sibling GlassFill consumers use
+    // (FavoriteToggle `#ffffff33`, NumberPagination `rgba(141,141,141,0.4)`),
+    // this fallback carries alpha so the frost tints the blurred content.
+    background: '#f5f5f566',
     borderColor: '#f5f5f5',
     labelColor: '#545961',
     iconColor: '#545961'
@@ -94,7 +102,11 @@ function resolveHelloJioInputTokens(modes, visualState) {
       // Glass keeps the container transparent so GlassFill shows through.
       backgroundColor: useGlass ? 'transparent' : background,
       borderColor,
-      borderWidth: strokeWidth,
+      // The Figma IdleJioPlus variant is a borderless frosted pill — it has no
+      // `border/color`/`strokeWidth` tokens. Drawing the Idle border color here
+      // would leave a faint light ring the design doesn't have, so drop the
+      // border entirely in the glass state.
+      borderWidth: useGlass ? 0 : strokeWidth,
       borderStyle: 'solid',
       borderRadius,
       paddingLeft,
@@ -201,11 +213,15 @@ const HelloJioInput = /*#__PURE__*/(0, _react.forwardRef)(function HelloJioInput
     setIsFocused(false);
     onBlur?.(e);
   }, [onBlur]);
-  const leadingElement = leading ?? (leadingIconName ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
+
+  // Symmetric with `trailing`: an explicit `null` hides the leading icon
+  // (the design's `startSlot={false}`); `undefined` falls back to the
+  // default brand icon.
+  const leadingElement = leading === undefined ? leadingIconName ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
     name: leadingIconName,
     size: tokens.iconSize,
     color: tokens.iconColor
-  }) : null);
+  }) : null : leading;
   const processedLeading = leadingElement ? (0, _reactUtils.cloneChildrenWithModes)(_react.default.Children.toArray(leadingElement), modes) : null;
   const defaultTrailing = /*#__PURE__*/(0, _jsxRuntime.jsx)(_IconButton.default, {
     iconName: sendIconName,

package/lib/commonjs/components/PageHero/PageHero.js

@@ -39,6 +39,7 @@ const MEDIA_FALLBACK = 117;
  *   eyebrow="Upgrade to JioFinance+"
  *   headline="Resume earning cashback, extra points, and 1% gold"
  *   supportingText="₹999/year · ₹0 until 2027"
+ *   body="₹999/year · ₹0 until 2027"
  *   buttonLabel="Renew for free"
  *   onButtonPress={() => navigate('Upgrade')}
  *   modes={{ 'Page type': 'JioPlus' }}
@@ -71,6 +72,7 @@ function PageHero({
     ...propModes
   }), [globalModes, propModes]);
   const gap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/gap', modes));
+  const paddingHorizontal = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/padding/horizontal', modes));
   const textWrapGap = Number((0, _figmaVariablesResolver.getVariableByName)('PageHero/textWrap/gap', modes));
 
   // Media slot box — Figma frame 4540:7845 ("Video"), sized by the
@@ -115,6 +117,7 @@ function PageHero({
     flexDirection: 'column',
     alignItems: 'center',
     gap,
+    paddingHorizontal,
     width: '100%'
   };
   const textWrapStyle = {

package/lib/commonjs/components/ProductMerchandisingCard/ProductMerchandisingCard.js

@@ -48,6 +48,7 @@ function ProductMerchandisingCard({
   title = 'Title',
   subtitle = 'Subtitle',
   badgeLabel,
+  badgeIcon,
   badge,
   showAvatar = true,
   avatarSource,
@@ -102,29 +103,33 @@ function ProductMerchandisingCard({
   }), [modes]);
   const headerBadge = badge ?? (badgeLabel != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
     label: badgeLabel,
+    leading: badgeIcon,
     modes: badgeModes
   }) : null);
   const headerAvatar = showAvatar ? avatar ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Avatar.default, {
     style: avatarSource ? 'Image' : avatarMonogram ? 'Monogram' : 'Image',
-    imageSource: avatarSource,
-    monogram: avatarMonogram,
+    ...(avatarSource != null ? {
+      imageSource: avatarSource
+    } : {}),
+    ...(avatarMonogram != null ? {
+      monogram: avatarMonogram
+    } : {}),
     modes: avatarModes
   }) : null;
 
-  // The footer "special badge" is now the shared <Badge type="glass">. The
-  // hardcoded literals that defined its look (warm frosted overlay, gentle
-  // 5px blur, 6/2 padding, 4px radius, weight-500 white label) are preserved
-  // 1:1 via the glass overrides + `style`/`labelStyle`, and the optional
-  // `specialBadgeIcon` maps to Badge's `leading` slot — so every existing
-  // instantiation renders byte-for-byte the same as before.
+  // The footer "special badge" is the shared <Badge type="glass">. Overlay +
+  // blur come from `badge/glass/*` + `blur/minimal`; box/gap from
+  // `productMerchandisingcard/specialbadge/*`; label color/weight from the
+  // glass badge tokens (Figma: white / 600). Optional `specialBadgeIcon`
+  // maps to Badge's `leading` slot.
   const footerSpecialBadge = specialBadge ?? (specialBadgeLabel != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Badge.default, {
     type: "glass",
     label: specialBadgeLabel,
     leading: specialBadgeIcon,
-    glassOverlayColor: SPECIAL_BADGE_BG,
-    glassIntensity: SPECIAL_BADGE_INTENSITY,
+    glassOverlayColor: tokens.specialBadgeBg,
+    glassIntensity: tokens.specialBadgeIntensity,
     modes: modes,
-    style: styles.specialBadge,
+    style: tokens.specialBadge,
     labelStyle: tokens.specialBadgeText,
     ...(disableTruncation != null ? {
       disableTruncation
@@ -142,7 +147,9 @@ function ProductMerchandisingCard({
   const footerCta = cta ?? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Button.default, {
     label: ctaLabel,
     modes: ctaModes,
-    onPress: onCtaPress
+    ...(onCtaPress != null ? {
+      onPress: onCtaPress
+    } : {})
   });
   const content = /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [imageSource != null ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
@@ -303,12 +310,6 @@ function ProductMerchandisingCard({
 // the ramp (the strongest point); the upper part fades to fully clear. Kept
 // intentionally small to match the design's subtle "minimal" blur.
 const BLUR_INTENSITY_FACTOR = 1.0;
-
-// Special badge ("frosted" pill) — values are literals in the Figma node
-// (no dedicated tokens): bg rgba(255,245,229,0.15), 5px backdrop blur.
-const SPECIAL_BADGE_BG = 'rgba(255,245,229,0.15)';
-const SPECIAL_BADGE_INTENSITY = 17; // ~5px CSS blur / ~2 native blurAmount
-
 function asNum(raw, fallback) {
   const n = typeof raw === 'number' ? raw : parseFloat(raw);
   return Number.isFinite(n) ? n : fallback;
@@ -328,6 +329,7 @@ function resolveTokens(modes) {
   const footerPadH = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/padding/horizontal', modes), 16);
   const footerPadV = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/padding/vertical', modes), 16);
   const textGap = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/text/gap', modes), 2);
+  const textWrapMinWidth = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/textWrap/minWidth', modes), 100);
   const blurRadius = asNum((0, _figmaVariablesResolver.getVariableByName)('blur/minimal', modes), 29);
   const titleColor = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/title/font/color', modes), '#ffffff');
   const titleSize = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/title/fontsize', modes), 14);
@@ -339,7 +341,20 @@ function resolveTokens(modes) {
   const subtitleWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/footer/subtitle/fontweight', modes), '400');
   const sbSize = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/specialbadge/text/fontsize', modes), 12);
   const sbFamily = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/specialbadge/text/fontfamily', modes), 'JioType Var');
-  const sbWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/specialbadge/text/fontweight', modes), '500');
+  // No dedicated `specialbadge/text/fontweight` in the collection — Figma
+  // binds the glass badge label to `badge/label/fontWeight` (600).
+  const sbWeight = asStr((0, _figmaVariablesResolver.getVariableByName)('badge/label/fontWeight', modes), '600');
+  const sbPadH = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/specialbadge/padding/horizontal', modes), 6);
+  const sbGap = asNum((0, _figmaVariablesResolver.getVariableByName)('productMerchandisingcard/specialbadge/gap', modes), 4);
+  const sbPadV = asNum((0, _figmaVariablesResolver.getVariableByName)('badge/padding/vertical', modes), 4);
+  const sbRadius = asNum((0, _figmaVariablesResolver.getVariableByName)('badge/radius', modes), 4);
+  const sbLabelColor = asStr((0, _figmaVariablesResolver.getVariableByName)('badge/glass/color/label', modes), '#ffffff');
+
+  // The special badge is a `type="glass"` Badge: its overlay + blur come
+  // straight from the shared badge-glass tokens the design references
+  // (`badge/glass/color/background` and the `glass/minimal` → `blur/minimal`
+  // effect), so it frosts at the same strength as the footer.
+  const specialBadgeBg = asStr((0, _figmaVariablesResolver.getVariableByName)('badge/glass/color/background', modes), 'rgba(255,255,255,0.15)');
 
   // SVG `<FeGaussianBlur stdDeviation>` is resolution-independent and renders
   // an identical Gaussian on iOS, Android and web — so unlike the old
@@ -351,6 +366,10 @@ function resolveTokens(modes) {
     radius,
     blurIntensity: Math.max(0, Math.min(100, Math.round(blurRadius * BLUR_INTENSITY_FACTOR))),
     imageBlurStdDeviation,
+    specialBadgeBg,
+    // Same `blur/minimal`-derived intensity the footer glass uses, so the
+    // special badge frosts consistently with the surface behind it.
+    specialBadgeIntensity: Math.max(0, Math.min(100, Math.round(blurRadius * BLUR_INTENSITY_FACTOR))),
     header: {
       flexDirection: 'row',
       alignItems: 'flex-start',
@@ -368,6 +387,9 @@ function resolveTokens(modes) {
     },
     textWrap: {
       flex: 1,
+      // The Figma footer pins the text column to a minimum width so a long
+      // CTA can never squeeze the title/subtitle away (`footer/textWrap/minWidth`).
+      minWidth: textWrapMinWidth,
       gap: textGap,
       justifyContent: 'center'
     },
@@ -387,8 +409,16 @@ function resolveTokens(modes) {
       lineHeight: Math.round(subtitleSize * 1.2),
       includeFontPadding: false
     },
+    // Pin the special-badge box to the card collection tokens so a parent
+    // `Badge Size` mode cannot inflate/deflate this pill away from Figma.
+    specialBadge: {
+      paddingHorizontal: sbPadH,
+      paddingVertical: sbPadV,
+      borderRadius: sbRadius,
+      gap: sbGap
+    },
     specialBadgeText: {
-      color: '#ffffff',
+      color: sbLabelColor,
       fontSize: sbSize,
       fontFamily: sbFamily,
       fontWeight: sbWeight,
@@ -414,16 +444,6 @@ const styles = _reactNative.StyleSheet.create({
     // the intended fade strength.
     opacity: 0.9
   },
-  // Overrides layered on top of <Badge type="glass">. Badge already supplies
-  // the row layout + 4px gap (when a leading icon is present), `overflow:
-  // 'hidden'`, `alignSelf: 'flex-start'` and `alignItems: 'center'`; these
-  // pin the special badge's literal Figma box (6/2 padding, 4px radius)
-  // regardless of the badge size tokens resolved by the active modes.
-  specialBadge: {
-    paddingHorizontal: 6,
-    paddingVertical: 2,
-    borderRadius: 4
-  },
   pressed: {
     opacity: 0.92
   }