jfs-components 0.1.12 → 0.1.17

package/src/components/Badge/Badge.tsx

@@ -84,34 +84,33 @@ function Badge({
   // swaps the solid fill for a translucent overlay + white label, matching the
   // Figma `badge/glass/*` tokens.
   const backgroundColor =
-    (getVariableByName('badge/color/background', modes) as string) || '#d8effe'
+    (getVariableByName('badge/color/background', modes) as string)
   const glassBackground =
-    (getVariableByName('badge/glass/color/background', modes) as string) || '#ffffff26'
+    (getVariableByName('badge/glass/color/background', modes) as string)
   const glassLabelColor =
-    (getVariableByName('badge/glass/color/label', modes) as string) || '#ffffff'
+    (getVariableByName('badge/glass/color/label', modes) as string)
   const labelColor = isGlass
     ? glassLabelColor
-    : (getVariableByName('badge/color/label', modes) as string) || '#000000'
+    : (getVariableByName('badge/color/label', modes) as string)
   const fontSize =
-    Number(getVariableByName('badge/label/fontSize', modes) as unknown) || 12
+    Number(getVariableByName('badge/label/fontSize', modes) as unknown)
   const fontFamily =
-    (getVariableByName('badge/fontFamily', modes) as string) || undefined
+    (getVariableByName('badge/fontFamily', modes) as string)
   const fontWeight =
-    (getVariableByName('badge/label/fontWeight', modes) as string) || '600'
+    (getVariableByName('badge/label/fontWeight', modes) as string)
   const paddingHorizontal =
-    Number(getVariableByName('badge/padding/horizontal', modes) as unknown) || 6
+    Number(getVariableByName('badge/padding/horizontal', modes) as unknown)
   const paddingVertical =
-    Number(getVariableByName('badge/padding/vertical', modes) as unknown) || 4
+    Number(getVariableByName('badge/padding/vertical', modes) as unknown)
   const borderRadius =
-    Number(getVariableByName('badge/radius', modes) as unknown) || 4
+    Number(getVariableByName('badge/radius', modes) as unknown)
   const lineHeight =
-    Number(getVariableByName('badge/label/lineHeight', modes) as unknown) ||
-    Math.round(fontSize * 1.2)
+    Number(getVariableByName('badge/label/lineHeight', modes) as unknown)
   // Figma `blur/minimal` (px radius) -> GlassFill's 0–100 intensity scale, the
   // same 1:1 mapping the merchandising card footer uses.
   const blurIntensity = Math.max(
     0,
-    Math.min(100, Math.round(Number(getVariableByName('blur/minimal', modes) as unknown) || 29)),
+    Math.min(100, Math.round(Number(getVariableByName('blur/minimal', modes) as unknown))),
   )
 
   // Skeleton short-circuit. Size derived from the same tokens the loaded

package/src/components/BenefitCard/BenefitCard.tsx

@@ -15,6 +15,9 @@ import Text from '../Text/Text'
 import ListItem from '../ListItem/ListItem'
 import Divider from '../Divider/Divider'
 import Button from '../Button/Button'
+import Nudge from '../Nudge/Nudge'
+import Avatar from '../Avatar/Avatar'
+import TextSegment from '../TextSegment/TextSegment'
 import type { Modes } from '../../design-tokens'
 
 /**
@@ -42,17 +45,46 @@ export interface BenefitCardProps {
     /** Header section title (e.g. `"You will earn"`). */
     headerTitle?: string
     /**
-     * Highlighted item shown directly under the header title (icon + title +
-     * optional trailing value). Rendered above the divider.
+     * @deprecated The header is now a multi-row list wrap. A single item still
+     * works and is rendered as a one-row list (lowest precedence, after
+     * `header` and `headerItems`). Prefer `headerItems` (declarative) or
+     * `header` (slot).
      */
     headerItem?: BenefitCardItem
+    /**
+     * Declarative header list-wrap rows shown under the header title and above
+     * the divider (icon + title + optional trailing value). Replaces the
+     * legacy single {@link BenefitCardProps.headerItem}. Ignored when the
+     * `header` slot is provided.
+     */
+    headerItems?: BenefitCardItem[]
+    /**
+     * Real slot for the header "list wrap" (the rows under the header title).
+     * Highest precedence — when provided, these children render instead of
+     * `headerItems` / `headerItem`; `modes` (plus the `List Item Style:
+     * Minimal` style) cascade into every child automatically.
+     */
+    header?: React.ReactNode
     /**
      * Toggles the whole header section (title + item + divider). Mirrors the
      * Figma `showHeader` property. Defaults to `true`.
      */
     showHeader?: boolean
-    /** Body section title (e.g. `"Upgrade to JioFinance+ and earn more"`). */
+    /**
+     * @deprecated In the Figma redesign the plain body title was replaced by a
+     * slot-based upsell `Nudge` ({@link BenefitCardProps.bodyHeader}). Still
+     * honored for backward compatibility: when set, it renders as a plain text
+     * title in place of the default nudge. Prefer `bodyHeader`.
+     */
     bodyTitle?: string
+    /**
+     * Real slot rendered between the header divider and the body list — in the
+     * Figma reference this is an upsell `Nudge` (avatar + highlighted
+     * "JioFinance+" message). Defaults to that nudge. Pass `null`/`false` to
+     * hide it, `bodyTitle` for the legacy plain-text title, or any `ReactNode`
+     * for full control; `modes` cascade into the slot.
+     */
+    bodyHeader?: React.ReactNode
     /**
      * Body benefit rows. Ignored when `children` is provided (the slot wins).
      */
@@ -109,8 +141,11 @@ export interface BenefitCardProps {
 function BenefitCard({
     headerTitle = 'You will earn',
     headerItem,
+    headerItems,
+    header,
     showHeader = true,
-    bodyTitle = 'Upgrade to JioFinance+ and earn more',
+    bodyTitle,
+    bodyHeader,
     items,
     children,
     buttonLabel = 'Upgrade',
@@ -125,14 +160,28 @@ function BenefitCard({
 }: BenefitCardProps) {
     const tokens = useMemo(() => resolveTokens(modes), [modes])
 
-    // Sub-component modes. Consumer-supplied `modes` always win via spread order.
-    const listItemModes = useMemo<Modes>(() => ({ 'List Item Style': 'Minimal', ...modes }), [modes])
+    // Component-level modes. `List Item Style: Minimal` and `Nudge padding: None`
+    // are BenefitCard's own defaults: they live on the card and cascade down into
+    // every child (the list-wrap rows and the upsell nudge) rather than being
+    // threaded onto each individual item. Consumer `modes` always win.
+    const cascadeModes = useMemo<Modes>(
+        () => ({ 'List Item Style': 'Minimal', 'Nudge padding': 'None', ...modes }),
+        [modes]
+    )
+    // Sub-element modes layer their own specifics on top of the consumer modes.
     const iconModes = useMemo<Modes>(() => ({ AppearanceBrand: 'Secondary', ...modes }), [modes])
     const trailingTextModes = useMemo<Modes>(
         () => ({ 'Text Sizes': 'Small', Weight: 'Regular', ...modes }),
         [modes]
     )
     const ctaModes = useMemo<Modes>(() => ({ 'Button / Size': 'S', ...modes }), [modes])
+    // The upsell nudge keeps a white/transparent background (`AppearanceBrand:
+    // Neutral` → `nudge/background: #ffffff`); its `Nudge padding: None` cascades
+    // in from `cascadeModes` so it sits flush with the card.
+    const nudgeModes = useMemo<Modes>(
+        () => ({ AppearanceBrand: 'Neutral', ...cascadeModes }),
+        [cascadeModes]
+    )
 
     const renderItem = (item: BenefitCardItem, key: React.Key) => {
         const leading =
@@ -157,25 +206,57 @@ function BenefitCard({
                 leading={leading}
                 trailing={trailing}
                 onPress={item.onPress}
-                modes={listItemModes}
             />
         )
     }
 
-    const headerNode =
-        showHeader && (headerTitle != null || headerItem != null) ? (
-            <View style={styles.section}>
-                <View style={styles.cardHeader}>
-                    {headerTitle != null ? <RNText style={tokens.title}>{headerTitle}</RNText> : null}
-                    {headerItem != null ? renderItem(headerItem, 'header-item') : null}
-                </View>
-                <Divider modes={modes} />
+    // Header "list wrap" — slot-based. Precedence: `header` slot > `headerItems`
+    // array > legacy single `headerItem` > Figma default rows. The component-level
+    // `cascadeModes` are pushed into the whole group at once, so individual rows
+    // never carry their own list-item modes.
+    const headerListSource = header
+        ? header
+        : (headerItems ?? (headerItem ? [headerItem] : DEFAULT_HEADER_ITEMS)).map((item, index) =>
+              renderItem(item, `header-${index}`)
+          )
+    const headerListNodes = cloneChildrenWithModes(headerListSource, cascadeModes)
+
+    const headerNode = showHeader ? (
+        <View style={styles.section}>
+            <View style={styles.cardHeader}>
+                {headerTitle != null ? <RNText style={tokens.title}>{headerTitle}</RNText> : null}
+                <View style={tokens.listWrap}>{headerListNodes}</View>
             </View>
-        ) : null
+            <Divider modes={modes} />
+        </View>
+    ) : null
+
+    // Body "header" slot (between the divider and the body list). Precedence:
+    // explicit `bodyHeader` slot > legacy `bodyTitle` text > Figma upsell nudge.
+    const bodyHeaderNode =
+        bodyHeader === null || bodyHeader === false
+            ? null
+            : bodyHeader !== undefined
+              ? renderSlot(bodyHeader, cascadeModes)
+              : bodyTitle != null
+                ? <RNText style={tokens.title}>{bodyTitle}</RNText>
+                : (
+                    <Nudge type="inline-compact" modes={{ ...nudgeModes, ...cascadeModes }} startSlot={DEFAULT_UPSELL_AVATAR}>
+                        <TextSegment
+                            modes={cascadeModes}
+                            segments={[
+                                { text: 'Upgrade to ' },
+                                { text: 'JioFinance+', modes: { 'Text Appearance': 'Primary' } },
+                                { text: ' and earn more' },
+                            ]}
+                        />
+                    </Nudge>
+                )
 
-    const bodyList = children
-        ? cloneChildrenWithModes(children, listItemModes)
+    const bodyListSource = children
+        ? children
         : (items ?? DEFAULT_ITEMS).map((item, index) => renderItem(item, index))
+    const bodyList = cloneChildrenWithModes(bodyListSource, cascadeModes)
 
     const ctaNode = button ?? (
         <Button label={buttonLabel} modes={ctaModes} onPress={onButtonPress} />
@@ -189,10 +270,8 @@ function BenefitCard({
     const content = (
         <>
             {headerNode}
-            <View style={tokens.body}>
-                {bodyTitle != null ? <RNText style={tokens.title}>{bodyTitle}</RNText> : null}
-                <View style={tokens.listWrap}>{bodyList}</View>
-            </View>
+            {bodyHeaderNode}
+            <View style={tokens.listWrap}>{bodyList}</View>
             {showButton ? ctaNode : null}
         </>
     )
@@ -227,7 +306,6 @@ const CARD_HEADER_GAP = 4
 
 interface ResolvedTokens {
     container: ViewStyle
-    body: ViewStyle
     listWrap: ViewStyle
     title: TextStyle
 }
@@ -267,10 +345,6 @@ function resolveTokens(modes: Modes): ResolvedTokens {
             flexDirection: 'column',
             alignItems: 'flex-start',
         },
-        body: {
-            alignSelf: 'stretch',
-            gap,
-        },
         listWrap: {
             alignSelf: 'stretch',
             gap,
@@ -287,11 +361,30 @@ function resolveTokens(modes: Modes): ResolvedTokens {
     }
 }
 
+// Cascades `modes` into a slot node and unwraps a single child so the slot can
+// be rendered inline without an extra fragment.
+function renderSlot(node: React.ReactNode, modes: Modes): React.ReactNode {
+    const processed = cloneChildrenWithModes(node, modes)
+    return processed.length === 1 ? processed[0] : processed
+}
+
+// Figma reference rows for the header list wrap (two highlighted "JioPoints"
+// rows). Used only when no `header` slot / `headerItems` / legacy `headerItem`
+// is supplied.
+const DEFAULT_HEADER_ITEMS: BenefitCardItem[] = [
+    { icon: 'ic_jewellery_diamond', title: 'JioPoints', trailingText: 'Up to 2000 pts' },
+    { icon: 'ic_jewellery_diamond', title: 'JioPoints', trailingText: 'Up to 2000 pts' },
+]
+
 const DEFAULT_ITEMS: BenefitCardItem[] = [
     { icon: 'ic_card', title: 'Up to ₹5000 cashback' },
     { icon: 'ic_card', title: '25% extra JioPoints' },
 ]
 
+// Start-slot avatar for the default upsell nudge. `modes` cascade in from the
+// nudge (XS keeps it compact next to the inline message).
+const DEFAULT_UPSELL_AVATAR = <Avatar style="Image" modes={{ 'Avatar Size': 'XS' }} />
+
 const styles = StyleSheet.create({
     section: {
         alignSelf: 'stretch',

package/src/components/BottomNav/BottomNav.tsx

@@ -53,8 +53,8 @@ function BottomNav({
   const modes = { ...globalModes, ...propModes }
 
   // Resolve container styling tokens
-  const backgroundColor = getVariableByName('bottomNav/background', modes) || '#ffffff'
-  const borderColor = getVariableByName('bottomNav/border/color', modes) || '#cccfd1'
+  const backgroundColor = getVariableByName('bottomNav/background', modes)
+  const borderColor = getVariableByName('bottomNav/border/color', modes)
   const borderWidth = getVariableByName('bottomNav/border/width', modes) ?? 1
   const paddingTop = getVariableByName('bottomNav/padding/top', modes) ?? 10
   const paddingBottom = getVariableByName('bottomNav/padding/bottom', modes) ?? 23

package/src/components/BottomNavItem/BottomNavItem.tsx

@@ -60,17 +60,17 @@ function resolveBottomNavItemTokens(
   const gap = (getVariableByName('bottomNavItem/gap', modes) ?? 6) as number
 
   const fontFamily =
-    (getVariableByName('bottomNavItem/fontFamily', modes) || 'JioType_Var:Medium') as string
+    (getVariableByName('bottomNavItem/fontFamily', modes)) as string
   const fontWeightRaw = getVariableByName('bottomNavItem/fontWeight', modes) ?? 500
   const fontWeight =
     typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw
   const fontSize = (getVariableByName('bottomNavItem/fontSize', modes) ?? 11) as number
   const lineHeight = (getVariableByName('bottomNavItem/lineHeight', modes) ?? 14) as number
 
-  const labelColor = (getVariableByName('bottomNavItem/label/color', modes) || '#0d0d0f') as string
+  const labelColor = (getVariableByName('bottomNavItem/label/color', modes)) as string
 
   const resolvedIconColor =
-    iconColorOverride || (getVariableByName('bottomNavItem/icon/color', modes) || '#ad8545') as string
+    iconColorOverride || (getVariableByName('bottomNavItem/icon/color', modes)) as string
   const resolvedIconSize =
     iconSizeOverride ?? (getVariableByName('bottomNavItem/icon/size', modes) ?? 24) as number
 

package/src/components/Button/Button.tsx

@@ -12,7 +12,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { usePressableWebSupport, type SafePressableProps, type WebAccessibilityProps } from '../../utils/web-platform-utils'
-import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
+import { EMPTY_MODES } from '../../utils/react-utils'
 import Icon from '../../icons/Icon'
 import Skeleton from '../../skeleton/Skeleton'
 import { useSkeleton } from '../../skeleton/SkeletonGroup'
@@ -95,6 +95,15 @@ const containerLayoutStyle = {
   justifyContent: 'center' as const,
 }
 
+// Keeps the label on a single line. `flexShrink: 0` stops a tight flex parent
+// from squeezing the text; on web `whiteSpace: 'nowrap'` is what actually
+// prevents the line break (a bare `numberOfLines` line-clamp still allows the
+// text to wrap inside a width-constrained pill in react-native-web).
+const NO_WRAP_LABEL_STYLE: TextStyle = {
+  flexShrink: 0,
+  ...(IS_WEB ? { whiteSpace: 'nowrap' as const } : {}),
+}
+
 // ---------------------------------------------------------------------------
 // Token resolution
 // ---------------------------------------------------------------------------
@@ -120,28 +129,28 @@ interface ButtonTokens {
 }
 
 function resolveButtonTokens(modes: Modes, disabled: boolean): ButtonTokens {
-  const backgroundColor = getVariableByName('button/background', modes) || '#cfa159'
-  const borderColor = getVariableByName('button/border/color', modes) || 'rgba(255,255,255,0)'
+  const backgroundColor = getVariableByName('button/background', modes)
+  const borderColor = getVariableByName('button/border/color', modes)
   const borderWidth = getVariableByName('button/border/size', modes)
-  const radius = getVariableByName('button/radius', modes) || 9999
-  const paddingHorizontal = getVariableByName('button/padding/horizontal', modes) || 20
-  const paddingVertical = getVariableByName('button/padding/vertical', modes) || 12
-  const gap = getVariableByName('button/gap', modes) || 8
+  const radius = getVariableByName('button/radius', modes)
+  const paddingHorizontal = getVariableByName('button/padding/horizontal', modes)
+  const paddingVertical = getVariableByName('button/padding/vertical', modes)
+  const gap = getVariableByName('button/gap', modes)
 
-  const fontFamily = getVariableByName('button/fontFamily', modes) || 'System'
-  const fontWeightValue = getVariableByName('button/fontWeight', modes) || 700
+  const fontFamily = getVariableByName('button/fontFamily', modes)
+  const fontWeightValue = getVariableByName('button/fontWeight', modes)
   const fontWeight = typeof fontWeightValue === 'number' ? fontWeightValue.toString() : fontWeightValue
-  const lineHeight = getVariableByName('button/lineHeight', modes) || 19
-  const fontSize = getVariableByName('button/fontSize', modes) || 16
-  const textColor = getVariableByName('button/foreground', modes) || '#0f0d0a'
+  const lineHeight = getVariableByName('button/lineHeight', modes)
+  const fontSize = getVariableByName('button/fontSize', modes)
+  const textColor = getVariableByName('button/foreground', modes)
   const iconSize = (getVariableByName('button/icon/size', modes) ?? 18) as number
 
   // Pressed tokens are always resolved so the Pressable `style` callback can
   // apply the pressed visual without scheduling a React render.
   const pressedModes = { ...modes, 'Button / State': 'Pressed' }
-  const pressedBg = getVariableByName('button/background', pressedModes) || backgroundColor
-  const pressedBorderColor = getVariableByName('button/border/color', pressedModes) || borderColor
-  const pressedTextColor = (getVariableByName('button/foreground', pressedModes) || textColor) as string
+  const pressedBg = getVariableByName('button/background', pressedModes)
+  const pressedBorderColor = getVariableByName('button/border/color', pressedModes)
+  const pressedTextColor = (getVariableByName('button/foreground', pressedModes)) as string
 
   // Hover tokens are only meaningful on web. Skipping them on native saves
   // ~3 token lookups + an object spread per render on every Button.
@@ -149,9 +158,9 @@ function resolveButtonTokens(modes: Modes, disabled: boolean): ButtonTokens {
   let hoverTextColor: string | null = null
   if (IS_WEB) {
     const hoverModes = { ...modes, 'Button / State': 'Hover' }
-    const hoverBg = getVariableByName('button/background', hoverModes) || backgroundColor
-    const hoverBorderColor = getVariableByName('button/border/color', hoverModes) || borderColor
-    hoverTextColor = (getVariableByName('button/foreground', hoverModes) || textColor) as string
+    const hoverBg = getVariableByName('button/background', hoverModes)
+    const hoverBorderColor = getVariableByName('button/border/color', hoverModes)
+    hoverTextColor = (getVariableByName('button/foreground', hoverModes)) as string
     hoverContainer = { backgroundColor: hoverBg as string, borderColor: hoverBorderColor as string }
   }
 
@@ -300,8 +309,9 @@ function ButtonImpl({
   } else {
     content = (
       <Text
-        style={activeLabelStyle}
-        {...resolveTruncation(disableTruncation, 1)}
+        style={[activeLabelStyle, disableTruncation ? null : NO_WRAP_LABEL_STYLE]}
+        numberOfLines={disableTruncation ? undefined : 1}
+        ellipsizeMode={disableTruncation ? undefined : 'tail'}
       >
         {label}
       </Text>

package/src/components/Card/Card.tsx

@@ -65,18 +65,18 @@ export function Card({
     style,
 }: CardProps) {
     // Resolve Card Container Tokens
-    const backgroundColor = getVariableByName('card/background/color', modes) || '#ffffff';
-    const borderColor = getVariableByName('card/border/color', modes) || '#ebebed';
-    const borderWidth = parseFloat(getVariableByName('card/strokeWidth', modes) || '0.5'); // Ensure number
-    const radius = parseFloat(getVariableByName('card/radius', modes) || '8');
-    const gap = parseFloat(getVariableByName('card/gap', modes) || '4');
-    const paddingHorizontal = parseFloat(getVariableByName('card/padding-horizontal', modes) || '0');
-    const paddingVertical = parseFloat(getVariableByName('card/padding-vertical', modes) || '0');
+    const backgroundColor = getVariableByName('card/background/color', modes);
+    const borderColor = getVariableByName('card/border/color', modes);
+    const borderWidth = parseFloat(getVariableByName('card/strokeWidth', modes)); // Ensure number
+    const radius = parseFloat(getVariableByName('card/radius', modes));
+    const gap = parseFloat(getVariableByName('card/gap', modes));
+    const paddingHorizontal = parseFloat(getVariableByName('card/padding-horizontal', modes));
+    const paddingVertical = parseFloat(getVariableByName('card/padding-vertical', modes));
 
     // Resolve Content Wrapper Tokens
-    const contentGap = parseFloat(getVariableByName('card/content/gap', modes) || '4');
-    const contentPaddingHorizontal = parseFloat(getVariableByName('card/content/padding/horizontal', modes) || '12');
-    const contentPaddingVertical = parseFloat(getVariableByName('card/content/padding/vertical', modes) || '16');
+    const contentGap = parseFloat(getVariableByName('card/content/gap', modes));
+    const contentPaddingHorizontal = parseFloat(getVariableByName('card/content/padding/horizontal', modes));
+    const contentPaddingVertical = parseFloat(getVariableByName('card/content/padding/vertical', modes));
 
     // Clone media to pass modes if it's a valid element, facilitating nested style resolution
     const mediaWithModes = isValidElement(media)
@@ -163,14 +163,14 @@ function Title({ children, style, modes: propModes }: CardTextProps) {
     const context = useContext(CardContext);
     const modes = propModes || context.modes || {};
 
-    const color = getVariableByName('card/title/color', modes) || '#081007';
-    const fontSize = parseFloat(getVariableByName('card/title/fontSize', modes) || '16');
-    const fontFamily = getVariableByName('card/title/fontFamily', modes) || 'JioType Var';
-    const lineHeight = parseFloat(getVariableByName('card/title/lineHeight', modes) || '18');
+    const color = getVariableByName('card/title/color', modes);
+    const fontSize = parseFloat(getVariableByName('card/title/fontSize', modes));
+    const fontFamily = getVariableByName('card/title/fontFamily', modes);
+    const lineHeight = parseFloat(getVariableByName('card/title/lineHeight', modes));
 
     // Handling the potential typo in Figma variables "fonwWeight" vs "fontWeight"
     // We check both keys to be safe.
-    const rawFontWeight = getVariableByName('card/title/fontWeight', modes) || getVariableByName('card/title/fonwWeight', modes) || '900';
+    const rawFontWeight = getVariableByName('card/title/fontWeight', modes);
     const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight;
 
     const textStyle: TextStyle = {
@@ -192,11 +192,11 @@ function SupportText({ children, style, modes: propModes }: CardTextProps) {
     const context = useContext(CardContext);
     const modes = propModes || context.modes || {};
 
-    const color = getVariableByName('card/supportive-text/color', modes) || '#191b1e';
-    const fontSize = parseFloat(getVariableByName('card/supportive-text/fontSize', modes) || '12');
-    const fontFamily = getVariableByName('card/supportive-text/fontFamily', modes) || 'JioType Var';
-    const lineHeight = parseFloat(getVariableByName('card/supportive-text/lineHeight', modes) || '16');
-    const rawFontWeight = getVariableByName('card/supportive-text/fontWeight', modes) || '400';
+    const color = getVariableByName('card/supportive-text/color', modes);
+    const fontSize = parseFloat(getVariableByName('card/supportive-text/fontSize', modes));
+    const fontFamily = getVariableByName('card/supportive-text/fontFamily', modes);
+    const lineHeight = parseFloat(getVariableByName('card/supportive-text/lineHeight', modes));
+    const rawFontWeight = getVariableByName('card/supportive-text/fontWeight', modes);
     const fontWeight = typeof rawFontWeight === 'number' ? rawFontWeight.toString() : rawFontWeight;
 
     const textStyle: TextStyle = {

package/src/components/CardAdvisory/CardAdvisory.tsx

@@ -107,22 +107,22 @@ function resolveCardAdvisoryTokens(modes: Modes): CardAdvisoryTokens {
   const paddingHorizontal = toNumber(getVariableByName('cardAdvisory/padding/horizontal', modes), 0)
   const paddingVertical = toNumber(getVariableByName('cardAdvisory/padding/vertical', modes), 0)
   const radius = toNumber(getVariableByName('cardAdvisory/radius', modes), 0)
-  const background = getVariableByName('cardAdvisory/background', modes) || '#ffffff'
+  const background = getVariableByName('cardAdvisory/background', modes)
 
   const mainContentGap = toNumber(getVariableByName('cardAdvisory/mainContent/gap', modes), 16)
   const contentGap = toNumber(getVariableByName('cardAdvisory/content/gap', modes), 6)
   const headerGap = toNumber(getVariableByName('cardAdvisory/header/gap', modes), 8)
 
-  const titleColor = getVariableByName('cardAdvisory/title/foreground', modes) || '#0d0d0f'
+  const titleColor = getVariableByName('cardAdvisory/title/foreground', modes)
   const titleFontSize = toNumber(getVariableByName('cardAdvisory/title/fontSize', modes), 26)
-  const titleFontFamily = getVariableByName('cardAdvisory/title/fontFamily', modes) || 'JioType Var'
+  const titleFontFamily = getVariableByName('cardAdvisory/title/fontFamily', modes)
   const titleLineHeight = toNumber(getVariableByName('cardAdvisory/title/lineHeight', modes), 26)
   const titleFontWeight = toFontWeight(getVariableByName('cardAdvisory/title/fontWeight', modes), '900')
   const titleDescenderAllowance = Math.ceil(titleFontSize * 0.16)
 
-  const descriptionColor = getVariableByName('cardAdvisory/description/foreground', modes) || '#24262b'
+  const descriptionColor = getVariableByName('cardAdvisory/description/foreground', modes)
   const descriptionFontSize = toNumber(getVariableByName('cardAdvisory/description/fontSize', modes), 12)
-  const descriptionFontFamily = getVariableByName('cardAdvisory/description/fontFamily', modes) || 'JioType Var'
+  const descriptionFontFamily = getVariableByName('cardAdvisory/description/fontFamily', modes)
   const descriptionLineHeight = toNumber(getVariableByName('cardAdvisory/description/lineHeight', modes), 16)
   const descriptionFontWeight = toFontWeight(
     getVariableByName('cardAdvisory/description/fontWeight', modes),
@@ -175,7 +175,7 @@ function resolveCardAdvisoryTokens(modes: Modes): CardAdvisoryTokens {
       lineHeight: descriptionLineHeight,
       width: '100%',
     },
-    iconColor: (getVariableByName('cardAdvisory/icon/color', modes) || '#1a1c1f') as string,
+    iconColor: (getVariableByName('cardAdvisory/icon/color', modes)) as string,
     iconSize: toNumber(getVariableByName('cardAdvisory/icon/size', modes), 18),
   }
 }

package/src/components/CardCTA/CardCTA.tsx

@@ -121,32 +121,32 @@ function CardCTA({
     const isRating = normalizedType === 'rating'
     const isSip = normalizedType === 'sip'
 
-    const background = getVariableByName('cardCTA/background', modes) || '#ffffff'
-    const radius = getVariableByName('cardCTA/radius', modes) || 12
-    const borderSize = getVariableByName('cardCTA/border/size', modes) || 1
-    const borderColor = getVariableByName('cardCTA/border/color', modes) || '#e3e4e4'
+    const background = getVariableByName('cardCTA/background', modes)
+    const radius = getVariableByName('cardCTA/radius', modes)
+    const borderSize = getVariableByName('cardCTA/border/size', modes)
+    const borderColor = getVariableByName('cardCTA/border/color', modes)
 
-    const leftPaddingH = getVariableByName('cardCTA/left-wrap/padding/horizontal', modes) || 16
-    const leftPaddingV = getVariableByName('cardCTA/left-wrap/padding/vertical', modes) || 22
-    const leftGap = getVariableByName('cardCTA/left-wrap/gap', modes) || 16
+    const leftPaddingH = getVariableByName('cardCTA/left-wrap/padding/horizontal', modes)
+    const leftPaddingV = getVariableByName('cardCTA/left-wrap/padding/vertical', modes)
+    const leftGap = getVariableByName('cardCTA/left-wrap/gap', modes)
 
-    const rightPaddingH = getVariableByName('cardCTA/right-wrap/padding/horizontal', modes) || 16
-    const rightPaddingV = getVariableByName('cardCTA/right-wrap/padding/vertical', modes) || 22
+    const rightPaddingH = getVariableByName('cardCTA/right-wrap/padding/horizontal', modes)
+    const rightPaddingV = getVariableByName('cardCTA/right-wrap/padding/vertical', modes)
 
-    const textGap = getVariableByName('cardCTA/text-wrap/gap', modes) || 6
+    const textGap = getVariableByName('cardCTA/text-wrap/gap', modes)
 
-    const titleColor = getVariableByName('cardCTA/title/color', modes) || '#0c0d10'
-    const titleFontFamily = getVariableByName('cardCTA/title/fontFamily', modes) || 'JioType Var'
-    const titleFontSize = getVariableByName('cardCTA/title/fontSize', modes) || 16
-    const titleLineHeight = getVariableByName('cardCTA/title/lineHeight', modes) || 18
-    const titleFontWeightRaw = getVariableByName('cardCTA/title/fontWeight', modes) || 700
+    const titleColor = getVariableByName('cardCTA/title/color', modes)
+    const titleFontFamily = getVariableByName('cardCTA/title/fontFamily', modes)
+    const titleFontSize = getVariableByName('cardCTA/title/fontSize', modes)
+    const titleLineHeight = getVariableByName('cardCTA/title/lineHeight', modes)
+    const titleFontWeightRaw = getVariableByName('cardCTA/title/fontWeight', modes)
     const titleFontWeight = typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw
 
-    const bodyColor = getVariableByName('cardCTA/body/color', modes) || '#13002d'
-    const bodyFontFamily = getVariableByName('cardCTA/body/fontFamily', modes) || 'JioType Var'
-    const bodyFontSize = getVariableByName('cardCTA/body/fontSize', modes) || 14
-    const bodyLineHeight = getVariableByName('cardCTA/body/lineHeight', modes) || 17
-    const bodyFontWeightRaw = getVariableByName('cardCTA/body/fontWeight', modes) || 400
+    const bodyColor = getVariableByName('cardCTA/body/color', modes)
+    const bodyFontFamily = getVariableByName('cardCTA/body/fontFamily', modes)
+    const bodyFontSize = getVariableByName('cardCTA/body/fontSize', modes)
+    const bodyLineHeight = getVariableByName('cardCTA/body/lineHeight', modes)
+    const bodyFontWeightRaw = getVariableByName('cardCTA/body/fontWeight', modes)
     const bodyFontWeight = typeof bodyFontWeightRaw === 'number' ? bodyFontWeightRaw.toString() : bodyFontWeightRaw
 
     const ratingContentGap = getOptionalVariableByName('cardCTA/rating/content/gap', modes, 12)
@@ -191,7 +191,7 @@ function CardCTA({
     const nonWrappingButtonLabel = effectiveButtonLabel.replace(/\s/g, '\u00A0')
     const [measuredButtonLabelWidth, setMeasuredButtonLabelWidth] = React.useState<number | null>(null)
 
-    const buttonPaddingH = getVariableByName('button/padding/horizontal', buttonModes) || 20
+    const buttonPaddingH = getVariableByName('button/padding/horizontal', buttonModes)
     const buttonBorderSize = getVariableByName('button/border/size', buttonModes) ?? 1
     // Small safety pad so sub-pixel rounding between the measure pass and the
     // rendered glyph run can never clip the final character.