jfs-components 0.1.8 → 0.1.17

package/src/components/ListItem/ListItem.tsx

@@ -13,7 +13,7 @@ import {
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import NavArrow from '../NavArrow/NavArrow'
 import { usePressableWebSupport, type WebAccessibilityProps } from '../../utils/web-platform-utils'
-import { EMPTY_MODES, cloneChildrenWithModes } from '../../utils/react-utils'
+import { EMPTY_MODES, cloneChildrenWithModes, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 type ListItemProps = {
@@ -45,6 +45,12 @@ type ListItemProps = {
    * Web-specific accessibility props (only used on web platform)
    */
   webAccessibilityProps?: WebAccessibilityProps;
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean;
 } & React.ComponentProps<typeof View>;
 
 // ---------------------------------------------------------------------------
@@ -101,19 +107,19 @@ function resolveListItemTokens(modes: Modes): ListItemTokens {
   const paddingRight = getVariableByName('listItem/padding/right', resolvedModes) ?? 0
   const textWrapGap = (getVariableByName('listItem/text wrap', resolvedModes) ?? 0) as number
 
-  const titleColor = getVariableByName('listItem/title/color', textModes) || '#0f0d0a'
-  const titleFontSize = getVariableByName('listItem/title/fontSize', textModes) || 14
-  const titleLineHeight = getVariableByName('listItem/title/lineHeight', textModes) || 16
-  const titleFontFamily = getVariableByName('listItem/title/fontFamily', textModes) || 'System'
-  const titleFontWeightRaw = getVariableByName('listItem/title/fontWeight', textModes) || 700
+  const titleColor = getVariableByName('listItem/title/color', textModes)
+  const titleFontSize = getVariableByName('listItem/title/fontSize', textModes)
+  const titleLineHeight = getVariableByName('listItem/title/lineHeight', textModes)
+  const titleFontFamily = getVariableByName('listItem/title/fontFamily', textModes)
+  const titleFontWeightRaw = getVariableByName('listItem/title/fontWeight', textModes)
   const titleFontWeight =
     typeof titleFontWeightRaw === 'number' ? titleFontWeightRaw.toString() : titleFontWeightRaw
 
-  const supportColor = getVariableByName('listItem/supportText/color', textModes) || '#1f1a14'
-  const supportFontSize = getVariableByName('listItem/supportText/fontSize', textModes) || 12
-  const supportLineHeight = getVariableByName('listItem/supportText/lineHeight', textModes) || 14
-  const supportFontFamily = getVariableByName('listItem/supportText/fontFamily', textModes) || 'System'
-  const supportFontWeightRaw = getVariableByName('listItem/supportText/fontWeight', textModes) || 500
+  const supportColor = getVariableByName('listItem/supportText/color', textModes)
+  const supportFontSize = getVariableByName('listItem/supportText/fontSize', textModes)
+  const supportLineHeight = getVariableByName('listItem/supportText/lineHeight', textModes)
+  const supportFontFamily = getVariableByName('listItem/supportText/fontFamily', textModes)
+  const supportFontWeightRaw = getVariableByName('listItem/supportText/fontWeight', textModes)
   const supportFontWeight =
     typeof supportFontWeightRaw === 'number' ? supportFontWeightRaw.toString() : supportFontWeightRaw
 
@@ -230,6 +236,7 @@ function ListItemImpl({
   accessibilityHint,
   accessibilityState,
   webAccessibilityProps,
+  disableTruncation,
   ...rest
 }: ListItemProps) {
   const tokens = useMemo(() => resolveListItemTokens(modes), [modes])
@@ -314,7 +321,7 @@ function ListItemImpl({
             ? [tokens.supportTextStyle, verticalSupportTextOverride]
             : tokens.supportTextStyle
         }
-        numberOfLines={layout === 'Horizontal' ? 2 : undefined}
+        {...resolveTruncation(disableTruncation, layout === 'Horizontal' ? 2 : undefined)}
       >
         {displayText}
       </Text>
@@ -382,7 +389,7 @@ function ListItemImpl({
         >
           <Text
             style={tokens.titleTextStyle}
-            numberOfLines={1}
+            {...resolveTruncation(disableTruncation, 1)}
           >
             {title}
           </Text>

package/src/components/LottieIntroBlock/LottieIntroBlock.tsx

@@ -88,44 +88,41 @@ function LottieIntroBlock({
   )
 
   // Container
-  const gap = Number(getVariableByName('lottieIntroBlock/gap', modes)) || 36
+  const gap = Number(getVariableByName('lottieIntroBlock/gap', modes))
   const paddingHorizontal =
-    Number(getVariableByName('lottieIntroBlock/padding/horizontal', modes)) || 0
+    Number(getVariableByName('lottieIntroBlock/padding/horizontal', modes))
   const paddingVertical =
-    Number(getVariableByName('lottieIntroBlock/padding/vertical', modes)) || 16
+    Number(getVariableByName('lottieIntroBlock/padding/vertical', modes))
 
   // Text wrap
   const textWrapGap =
-    Number(getVariableByName('lottieIntroBlock/textWrap/gap', modes)) || 16
+    Number(getVariableByName('lottieIntroBlock/textWrap/gap', modes))
 
   // Title
   const titleColor =
-    getVariableByName('lottieIntroBlock/title/foreground', modes) || '#0d0d0f'
+    getVariableByName('lottieIntroBlock/title/foreground', modes)
   const titleFontSize =
-    Number(getVariableByName('lottieIntroBlock/title/fontSize', modes)) || 23
+    Number(getVariableByName('lottieIntroBlock/title/fontSize', modes))
   const titleFontFamily =
-    getVariableByName('lottieIntroBlock/title/fontFamily', modes) || 'System'
+    getVariableByName('lottieIntroBlock/title/fontFamily', modes)
   const titleLineHeight =
-    Number(getVariableByName('lottieIntroBlock/title/lineHeight', modes)) || 23
+    Number(getVariableByName('lottieIntroBlock/title/lineHeight', modes))
   const titleFontWeight =
-    getVariableByName('lottieIntroBlock/title/fontWeight', modes) || 900
+    getVariableByName('lottieIntroBlock/title/fontWeight', modes)
 
   // Support text
   const supportColor =
-    getVariableByName('lottieIntroBlock/supportText/foreground', modes) ||
-    '#0d0d0f'
+    getVariableByName('lottieIntroBlock/supportText/foreground', modes)
   const supportFontSize =
-    Number(getVariableByName('lottieIntroBlock/supportText/fontSize', modes)) ||
-    14
+    Number(getVariableByName('lottieIntroBlock/supportText/fontSize', modes))
   const supportFontFamily =
-    getVariableByName('lottieIntroBlock/supportText/fontFamily', modes) ||
-    'System'
+    getVariableByName('lottieIntroBlock/supportText/fontFamily', modes)
   const supportLineHeight =
     Number(
       getVariableByName('lottieIntroBlock/supportText/lineHeight', modes)
     ) || 18
   const supportFontWeight =
-    getVariableByName('lottieIntroBlock/supportText/fontWeight', modes) || 400
+    getVariableByName('lottieIntroBlock/supportText/fontWeight', modes)
 
   const containerStyle: ViewStyle = {
     flexDirection: 'column',

package/src/components/LottiePlayer/LottiePlayer.tsx

@@ -57,9 +57,9 @@ function resolveSize(
   if (typeof size === 'number') return { width: size, height: size }
   if (size && typeof size === 'object') return size
   const width =
-    Number(getVariableByName('media/width', modes)) || DEFAULT_SIZE
+    Number(getVariableByName('media/width', modes))
   const height =
-    Number(getVariableByName('media/height', modes)) || DEFAULT_SIZE
+    Number(getVariableByName('media/height', modes))
   return { width, height }
 }
 

package/src/components/LottiePlayer/LottiePlayer.web.tsx

@@ -28,9 +28,9 @@ function resolveSize(
   if (typeof size === 'number') return { width: size, height: size }
   if (size && typeof size === 'object') return size
   const width =
-    Number(getVariableByName('media/width', modes)) || DEFAULT_SIZE
+    Number(getVariableByName('media/width', modes))
   const height =
-    Number(getVariableByName('media/height', modes)) || DEFAULT_SIZE
+    Number(getVariableByName('media/height', modes))
   return { width, height }
 }
 

package/src/components/MediaCard/MediaCard.tsx

@@ -2,7 +2,7 @@ import React, { createContext, useContext } from 'react'
 import { View, Text, StyleSheet, type ViewStyle, type TextStyle, type StyleProp, type ImageSourcePropType } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import Image from '../Image/Image'
-import GlassFill, { type GlassTint } from './GlassFill'
+import GlassFill, { type GlassTint } from '../../utils/GlassFill/GlassFill'
 import { EMPTY_MODES } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
@@ -68,7 +68,7 @@ export function MediaCard({
     modes = EMPTY_MODES,
     style,
 }: MediaCardProps) {
-    const radius = parseFloat(getVariableByName('cardMedia/radius', modes) || '24')
+    const radius = parseFloat(getVariableByName('cardMedia/radius', modes))
 
     const containerStyle: ViewStyle = {
         borderRadius: radius,
@@ -142,11 +142,11 @@ export function Title({ children, style, modes: propModes }: { children?: React.
     const context = useContext(MediaCardContext)
     const modes = propModes || context.modes || {}
 
-    const color = getVariableByName('cardMedia/title/color', modes) || '#ffffff'
-    const fontSize = parseFloat(getVariableByName('cardMedia/title/fontSize', modes) || '52')
-    const fontFamily = getVariableByName('cardMedia/title/fontFamily', modes) || 'JioType Var'
-    const lineHeight = parseFloat(getVariableByName('cardMedia/title/lineHeight', modes) || '68')
-    const fontWeight = getVariableByName('cardMedia/title/fontWeight', modes) || '900'
+    const color = getVariableByName('cardMedia/title/color', modes)
+    const fontSize = parseFloat(getVariableByName('cardMedia/title/fontSize', modes))
+    const fontFamily = getVariableByName('cardMedia/title/fontFamily', modes)
+    const lineHeight = parseFloat(getVariableByName('cardMedia/title/lineHeight', modes))
+    const fontWeight = getVariableByName('cardMedia/title/fontWeight', modes)
 
     const textStyle: TextStyle = {
         color,
@@ -186,9 +186,9 @@ export function Footer({ children, style, modes: propModes }: { children?: React
     const context = useContext(MediaCardContext)
     const modes = propModes || context.modes || {}
 
-    const gap = parseFloat(getVariableByName('cardMedia/footer/gap', modes) || '24')
-    const paddingHorizontal = parseFloat(getVariableByName('cardMedia/footer/padding/horizontal', modes) || '16')
-    const paddingVertical = parseFloat(getVariableByName('cardMedia/footer/padding/vertical', modes) || '12')
+    const gap = parseFloat(getVariableByName('cardMedia/footer/gap', modes))
+    const paddingHorizontal = parseFloat(getVariableByName('cardMedia/footer/padding/horizontal', modes))
+    const paddingVertical = parseFloat(getVariableByName('cardMedia/footer/padding/vertical', modes))
 
     // Figma tokens:
     //   blur/minimal/background -> tint laid over the live blur, also used
@@ -199,8 +199,8 @@ export function Footer({ children, style, modes: propModes }: { children?: React
     //                              with the previous expo-blur scale) and
     //                              maps it internally — here we convert the
     //                              token's radius to that intensity scale.
-    const glassBgColor = getVariableByName('blur/minimal/background', modes) || '#1414174a'
-    const blurRadius = parseFloat(getVariableByName('blur/minimal', modes) || '29')
+    const glassBgColor = getVariableByName('blur/minimal/background', modes)
+    const blurRadius = parseFloat(getVariableByName('blur/minimal', modes))
     const intensity = Math.max(0, Math.min(100, Math.round(blurRadius * 1.7)))
 
     // Pick the iOS/Android material tint from "Contrast Context" mode so the
@@ -225,7 +225,7 @@ export function Footer({ children, style, modes: propModes }: { children?: React
             ]}
             pointerEvents="box-none"
         >
-            <GlassFill tint={tint} intensity={intensity} overlayColor={glassBgColor} />
+            <GlassFill tint={tint} intensity={intensity} overlayColor={glassBgColor} webBlurScale={0.3} webBlurMaxPx={30} />
 
             <View
                 style={{
@@ -250,11 +250,11 @@ export function FooterTitle({ children, style, modes: propModes }: { children?:
     const context = useContext(MediaCardContext)
     const modes = propModes || context.modes || {}
 
-    const color = getVariableByName('cardMedia/footer/title/color', modes) || '#ffffff'
-    const fontSize = parseFloat(getVariableByName('cardMedia/footer/title/fontSize', modes) || '14')
-    const fontFamily = getVariableByName('cardMedia/footer/title/fontFamily', modes) || 'JioType Var'
-    const lineHeight = parseFloat(getVariableByName('cardMedia/footer/title/lineHeight', modes) || '16')
-    const fontWeight = getVariableByName('cardMedia/footer/title/fontWeight', modes) || '800'
+    const color = getVariableByName('cardMedia/footer/title/color', modes)
+    const fontSize = parseFloat(getVariableByName('cardMedia/footer/title/fontSize', modes))
+    const fontFamily = getVariableByName('cardMedia/footer/title/fontFamily', modes)
+    const lineHeight = parseFloat(getVariableByName('cardMedia/footer/title/lineHeight', modes))
+    const fontWeight = getVariableByName('cardMedia/footer/title/fontWeight', modes)
 
     return (
         <Text style={[{ color, fontSize, fontFamily, lineHeight, fontWeight: fontWeight as any }, style]}>
@@ -271,11 +271,11 @@ export function FooterSubtitle({ children, style, modes: propModes }: { children
     const context = useContext(MediaCardContext)
     const modes = propModes || context.modes || {}
 
-    const color = getVariableByName('cardMedia/footer/subtitle/color', modes) || '#f5f7f7a1'
-    const fontSize = parseFloat(getVariableByName('cardMedia/footer/subtitle/fontSize', modes) || '12')
-    const fontFamily = getVariableByName('cardMedia/footer/subtitle/fontFamily', modes) || 'JioType Var'
-    const lineHeight = parseFloat(getVariableByName('cardMedia/footer/subtitle/lineHeight', modes) || '14')
-    const fontWeight = getVariableByName('cardMedia/footer/subtitle/fontWeight', modes) || '400'
+    const color = getVariableByName('cardMedia/footer/subtitle/color', modes)
+    const fontSize = parseFloat(getVariableByName('cardMedia/footer/subtitle/fontSize', modes))
+    const fontFamily = getVariableByName('cardMedia/footer/subtitle/fontFamily', modes)
+    const lineHeight = parseFloat(getVariableByName('cardMedia/footer/subtitle/lineHeight', modes))
+    const fontWeight = getVariableByName('cardMedia/footer/subtitle/fontWeight', modes)
 
     return (
         <Text style={[{ color, fontSize, fontFamily, lineHeight, fontWeight: fontWeight as any }, style]}>

package/src/components/MessageField/MessageField.tsx

@@ -135,11 +135,9 @@ function useMessageFieldTokens(modes: Modes) {
         const wrapperGap = toNumber(getVariableByName('messageField/gap', modes), 8)
 
         const labelColor =
-            (getVariableByName('messageField/label/foreground', modes) as string) ||
-            '#000000'
+            (getVariableByName('messageField/label/foreground', modes) as string)
         const labelFontFamily =
-            (getVariableByName('messageField/label/fontFamily', modes) as string) ||
-            'JioType Var'
+            (getVariableByName('messageField/label/fontFamily', modes) as string)
         const labelFontSize = toNumber(
             getVariableByName('messageField/label/fontSize', modes),
             14,
@@ -154,11 +152,9 @@ function useMessageFieldTokens(modes: Modes) {
         )
 
         const textareaBackground =
-            (getVariableByName('messageField/textarea/background', modes) as string) ||
-            '#ffffff'
+            (getVariableByName('messageField/textarea/background', modes) as string)
         const textareaBorderColor =
-            (getVariableByName('messageField/textarea/border/color', modes) as string) ||
-            '#b5b6b7'
+            (getVariableByName('messageField/textarea/border/color', modes) as string)
         const textareaBorderSize = toNumber(
             getVariableByName('messageField/textarea/border/size', modes),
             1.5,
@@ -187,11 +183,9 @@ function useMessageFieldTokens(modes: Modes) {
         // never re-route this through another token (e.g. the counter
         // color) because that conflates two semantically distinct tokens.
         const inputTextColor =
-            (getVariableByName('messageField/text/foreground', modes) as string) ||
-            '#707275'
+            (getVariableByName('messageField/text/foreground', modes) as string)
         const inputFontFamily =
-            (getVariableByName('messageField/text/fontFamily', modes) as string) ||
-            'JioType Var'
+            (getVariableByName('messageField/text/fontFamily', modes) as string)
         const inputFontSize = toNumber(
             getVariableByName('messageField/text/fontSize', modes),
             16,
@@ -206,11 +200,9 @@ function useMessageFieldTokens(modes: Modes) {
         )
 
         const counterColor =
-            (getVariableByName('messageField/maxLength/foreground', modes) as string) ||
-            '#24262b'
+            (getVariableByName('messageField/maxLength/foreground', modes) as string)
         const counterFontFamily =
-            (getVariableByName('messageField/maxLength/fontFamily', modes) as string) ||
-            'JioType Var'
+            (getVariableByName('messageField/maxLength/fontFamily', modes) as string)
         const counterFontSize = toNumber(
             getVariableByName('messageField/maxLength/fontSize', modes),
             14,

package/src/components/MetricLegendItem/MetricLegendItem.tsx

@@ -7,7 +7,7 @@ import {
     type TextStyle,
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import type { Modes } from '../../design-tokens'
 
 export type MetricLegendItemProps = {
@@ -39,6 +39,12 @@ export type MetricLegendItemProps = {
     labelStyle?: StyleProp<TextStyle>
     /** Override the value text styles. */
     valueStyle?: StyleProp<TextStyle>
+    /**
+     * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+     * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+     * lines as it needs even when horizontal space is tight.
+     */
+    disableTruncation?: boolean
 }
 
 /**
@@ -59,6 +65,7 @@ function MetricLegendItem({
     indicatorStyle,
     labelStyle,
     valueStyle,
+    disableTruncation,
 }: MetricLegendItemProps) {
     const gap = (getVariableByName('metricLegendItem/gap', modes) as number | null) ?? 4
     const textWrapGap =
@@ -169,7 +176,7 @@ function MetricLegendItem({
                             },
                             valueStyle,
                         ]}
-                        numberOfLines={1}
+                        {...resolveTruncation(disableTruncation, 1)}
                     >
                         {value}
                     </Text>

package/src/components/MoneyValue/MoneyValue.tsx

@@ -115,20 +115,20 @@ function MoneyValue({
   }, [value, negative, hidden])
 
   // Resolve typography and layout tokens from Figma
-  const textColor = getVariableByName('moneyValue/text/color', modes) || '#0f0d0a'
+  const textColor = getVariableByName('moneyValue/text/color', modes)
 
-  const currencyFontSize = getVariableByName('moneyValue/currency/fontSize', modes) || 14
-  const currencyLineHeight = getVariableByName('moneyValue/currency/lineHeight', modes) || 18
+  const currencyFontSize = getVariableByName('moneyValue/currency/fontSize', modes)
+  const currencyLineHeight = getVariableByName('moneyValue/currency/lineHeight', modes)
 
-  const valueFontSize = getVariableByName('moneyValue/value/fontSize', modes) || 14
-  const valueLineHeight = getVariableByName('moneyValue/value/lineHeight', modes) || 18
+  const valueFontSize = getVariableByName('moneyValue/value/fontSize', modes)
+  const valueLineHeight = getVariableByName('moneyValue/value/lineHeight', modes)
 
-  const fontWeightValue = getVariableByName('moneyValue/fontWeight', modes) || 500
+  const fontWeightValue = getVariableByName('moneyValue/fontWeight', modes)
   const fontWeight =
     typeof fontWeightValue === 'number'
       ? fontWeightValue.toString()
       : fontWeightValue
-  const fontFamily = getVariableByName('moneyValue/fontFamily', modes) || 'System'
+  const fontFamily = getVariableByName('moneyValue/fontFamily', modes)
   const gap = getVariableByName('moneyValue/gap', modes) ?? 4
 
   // Resolve currency to a symbol, supporting both symbols and ISO codes

package/src/components/MonthlyStatusGrid/MonthlyStatusGrid.tsx

@@ -8,7 +8,7 @@ import {
 } from 'react-native'
 import { getVariableByName } from '../../design-tokens/figma-variables-resolver'
 import { useTokens } from '../../design-tokens/JFSThemeProvider'
-import { EMPTY_MODES } from '../../utils/react-utils'
+import { EMPTY_MODES, resolveTruncation } from '../../utils/react-utils'
 import MetricLegendItem from '../MetricLegendItem/MetricLegendItem'
 import type { Modes } from '../../design-tokens'
 
@@ -83,6 +83,12 @@ export type MonthlyStatusGridProps = {
   legendStyle?: StyleProp<ViewStyle>
   /** Accessibility label for the entire component. */
   accessibilityLabel?: string
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean
 }
 
 const DEFAULT_MONTH_LABELS: readonly string[] = [
@@ -170,6 +176,12 @@ export type CalendarGlyphProps = {
   labelStyle?: StyleProp<TextStyle>
   /** Accessibility label. Defaults to `"{label}, {status}"`. */
   accessibilityLabel?: string
+  /**
+   * When `true`, disables text truncation: the trailing ellipsis (`…`) is never
+   * shown and any `numberOfLines` clamp is ignored, so the text wraps to as many
+   * lines as it needs even when horizontal space is tight.
+   */
+  disableTruncation?: boolean
 }
 
 /**
@@ -186,6 +198,7 @@ function CalendarGlyph({
   style,
   labelStyle,
   accessibilityLabel,
+  disableTruncation,
 }: CalendarGlyphProps) {
   const { modes: globalModes } = useTokens()
   const modes = React.useMemo(
@@ -244,7 +257,7 @@ function CalendarGlyph({
       ]}
     >
       <Text
-        numberOfLines={1}
+        {...resolveTruncation(disableTruncation, 1)}
         style={[
           {
             color: foreground,
@@ -312,6 +325,7 @@ function MonthlyStatusGrid({
   labelStyle,
   legendStyle,
   accessibilityLabel,
+  disableTruncation,
 }: MonthlyStatusGridProps) {
   const { modes: globalModes } = useTokens()
   const modes = React.useMemo(
@@ -391,6 +405,7 @@ function MonthlyStatusGrid({
                   label={label}
                   status={month.status}
                   modes={glyphModes}
+                  disableTruncation={disableTruncation}
                   {...(glyphStyle !== undefined ? { style: glyphStyle } : {})}
                   {...(labelStyle !== undefined ? { labelStyle } : {})}
                   {...(month.accessibilityLabel !== undefined

package/src/components/NavArrow/NavArrow.tsx

@@ -58,19 +58,19 @@ interface NavArrowTokens {
 
 function resolveNavArrowTokens(modes: Modes): NavArrowTokens {
   const iconColor =
-    (getVariableByName('navArrow/icon/color', modes) as string) || '#24262b'
+    (getVariableByName('navArrow/icon/color', modes) as string)
 
-  const widthToken = Number(getVariableByName('navArrow/width', modes)) || 6
-  const heightToken = Number(getVariableByName('navArrow/height', modes)) || 10
+  const widthToken = Number(getVariableByName('navArrow/width', modes))
+  const heightToken = Number(getVariableByName('navArrow/height', modes))
   const borderRadius =
-    Number(getVariableByName('navArrow/radius', modes)) || 0
+    Number(getVariableByName('navArrow/radius', modes))
   const backgroundColor =
-    (getVariableByName('navArrow/background', modes) as string) || 'transparent'
+    (getVariableByName('navArrow/background', modes) as string)
 
-  const iconWidth = Number(getVariableByName('navArrow/icon/width', modes)) || 4
-  const iconHeight = Number(getVariableByName('navArrow/icon/height', modes)) || 8
+  const iconWidth = Number(getVariableByName('navArrow/icon/width', modes))
+  const iconHeight = Number(getVariableByName('navArrow/icon/height', modes))
   const strokeWeight =
-    Number(getVariableByName('navArrow/icon/strokeWeight', modes)) || 2
+    Number(getVariableByName('navArrow/icon/strokeWeight', modes))
 
   return {
     iconColor,

package/src/components/NoteInput/NoteInput.tsx

@@ -51,20 +51,20 @@ const NoteInput = forwardRef<RNTextInput, NoteInputProps>(function NoteInput({
     const inputRef = useRef<RNTextInput>(null)
 
     // Resolve tokens from Figma Design
-    const foreground = getVariableByName('noteInput/foreground', modes) || '#0d0d0f'
-    const fontSize = getVariableByName('noteInput/fontSize', modes) || 14
-    const fontFamily = getVariableByName('noteInput/fontFamily', modes) || 'JioType Var'
-    const lineHeight = getVariableByName('noteInput/lineHeight', modes) || 16
-    const fontWeightRaw = getVariableByName('noteInput/fontWeight', modes) || 700
+    const foreground = getVariableByName('noteInput/foreground', modes)
+    const fontSize = getVariableByName('noteInput/fontSize', modes)
+    const fontFamily = getVariableByName('noteInput/fontFamily', modes)
+    const lineHeight = getVariableByName('noteInput/lineHeight', modes)
+    const fontWeightRaw = getVariableByName('noteInput/fontWeight', modes)
     const fontWeight = typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() as TextStyle['fontWeight'] : fontWeightRaw as TextStyle['fontWeight']
 
-    const gap = getVariableByName('noteInput/gap', modes) || 0 // 4 in some files, 0 in context
-    const paddingHorizontal = getVariableByName('noteInput/padding/horizontal', modes) || 17
-    const paddingVertical = getVariableByName('noteInput/padding/vertical', modes) || 9
-    const radius = getVariableByName('noteInput/radius', modes) || 999
-    const borderSize = getVariableByName('noteInput/border/size', modes) || 1
-    const background = getVariableByName('noteInput/background', modes) || '#ebebed'
-    const borderColor = getVariableByName('noteInput/border/color', modes) || 'rgba(255,255,255,0)'
+    const gap = getVariableByName('noteInput/gap', modes) // 4 in some files, 0 in context
+    const paddingHorizontal = getVariableByName('noteInput/padding/horizontal', modes)
+    const paddingVertical = getVariableByName('noteInput/padding/vertical', modes)
+    const radius = getVariableByName('noteInput/radius', modes)
+    const borderSize = getVariableByName('noteInput/border/size', modes)
+    const background = getVariableByName('noteInput/background', modes)
+    const borderColor = getVariableByName('noteInput/border/color', modes)
 
     const containerStyle: ViewStyle = {
         flexDirection: 'row',

package/src/components/Nudge/Nudge.tsx

@@ -63,28 +63,28 @@ function toFontWeight(value: unknown, fallback: TextStyle['fontWeight']): TextSt
 }
 
 function resolveNudgeTokens(modes: Modes): NudgeTokens {
-  const background = getVariableByName('nudge/background', modes) || '#f5f5f5'
-  const radius = getVariableByName('nudge/radius', modes) || 12
-  const paddingH = getVariableByName('nudge/padding/horizontal', modes) || 12
-  const paddingV = getVariableByName('nudge/padding/vertical', modes) || 12
-  const gap = getVariableByName('nudge/gap', modes) || 6
+  const background = getVariableByName('nudge/background', modes)
+  const radius = getVariableByName('nudge/radius', modes)
+  const paddingH = getVariableByName('nudge/padding/horizontal', modes)
+  const paddingV = getVariableByName('nudge/padding/vertical', modes)
+  const gap = getVariableByName('nudge/gap', modes)
 
-  const titleColor = getVariableByName('nudge/title/color', modes) || '#0d0d0f'
-  const titleFontSize = getVariableByName('nudge/title/fontSize', modes) || 14
-  const titleFontFamily = getVariableByName('nudge/title/fontFamily', modes) || 'System'
-  const titleLineHeight = getVariableByName('nudge/title/lineHeight', modes) || 15
+  const titleColor = getVariableByName('nudge/title/color', modes)
+  const titleFontSize = getVariableByName('nudge/title/fontSize', modes)
+  const titleFontFamily = getVariableByName('nudge/title/fontFamily', modes)
+  const titleLineHeight = getVariableByName('nudge/title/lineHeight', modes)
   const titleFontWeight = toFontWeight(getVariableByName('nudge/title/fontWeight', modes), '700')
 
-  const bodyColor = getVariableByName('nudge/body/color', modes) || '#1a1c1f'
-  const bodyFontSize = getVariableByName('nudge/body/fontSize', modes) || 12
-  const bodyFontFamily = getVariableByName('nudge/body/fontFamily', modes) || 'System'
-  const bodyLineHeight = getVariableByName('nudge/body/lineHeight', modes) || 16
+  const bodyColor = getVariableByName('nudge/body/color', modes)
+  const bodyFontSize = getVariableByName('nudge/body/fontSize', modes)
+  const bodyFontFamily = getVariableByName('nudge/body/fontFamily', modes)
+  const bodyLineHeight = getVariableByName('nudge/body/lineHeight', modes)
   const bodyFontWeight = toFontWeight(getVariableByName('nudge/body/fontWeight', modes), '500')
 
-  const textGap = getVariableByName('nudge/text/gap', modes) || 4
-  const contentGap = getVariableByName('nudge/content/gap', modes) || 8
-  const contentMinHeight = getVariableByName('nudge/content/minHeight', modes) || 20
-  const startSlotGap = getVariableByName('nudge/startSlot/gap', modes) || 4
+  const textGap = getVariableByName('nudge/text/gap', modes)
+  const contentGap = getVariableByName('nudge/content/gap', modes)
+  const contentMinHeight = getVariableByName('nudge/content/minHeight', modes)
+  const startSlotGap = getVariableByName('nudge/startSlot/gap', modes)
 
   return {
     containerBaseStyle: {
@@ -143,7 +143,7 @@ function resolveNudgeTokens(modes: Modes): NudgeTokens {
       width: '100%',
     },
     detailSlotStyle: {
-      gap: getVariableByName('slot/gap', modes) || 8,
+      gap: getVariableByName('slot/gap', modes),
       width: '100%',
     },
     titleTextStyle: {
@@ -160,8 +160,8 @@ function resolveNudgeTokens(modes: Modes): NudgeTokens {
       lineHeight: bodyLineHeight as number,
       fontWeight: bodyFontWeight,
     },
-    iconColor: (getVariableByName('appearance/nudge/icon/color', modes) || '#5d00b5') as string,
-    iconSize: (getVariableByName('nudge/icon/size', modes) || 20) as number,
+    iconColor: (getVariableByName('appearance/nudge/icon/color', modes)) as string,
+    iconSize: (getVariableByName('nudge/icon/size', modes)) as number,
     startSlotGap: startSlotGap as number,
   }
 }