jfs-components 0.1.12 → 0.1.17

package/src/components/FullscreenModal/FullscreenModal.tsx

@@ -125,40 +125,40 @@ type HeroTextProps = {
 
 function HeroText({ eyebrow, headline, supportingText, priceText, modes }: HeroTextProps) {
   const styles = useMemo(() => {
-    const gap = Number(getVariableByName('PageHero/gap', modes)) || 16
-    const textWrapGap = Number(getVariableByName('PageHero/textWrap/gap', modes)) || 8
+    const gap = Number(getVariableByName('PageHero/gap', modes))
+    const textWrapGap = Number(getVariableByName('PageHero/textWrap/gap', modes))
 
     const eyebrowStyle: TextStyle = {
-      color: (getVariableByName('PageHero/eyebrow/color', modes) as string) || '#ffffff',
-      fontFamily: (getVariableByName('PageHero/eyebrow/fontFamily', modes) as string) || 'System',
-      fontSize: Number(getVariableByName('PageHero/eyebrow/fontSize', modes)) || 18,
-      fontWeight: String(getVariableByName('PageHero/eyebrow/fontWeight', modes) || 700) as TextStyle['fontWeight'],
-      lineHeight: Number(getVariableByName('PageHero/eyebrow/lineHeight', modes)) || 20,
+      color: (getVariableByName('PageHero/eyebrow/color', modes) as string),
+      fontFamily: (getVariableByName('PageHero/eyebrow/fontFamily', modes) as string),
+      fontSize: Number(getVariableByName('PageHero/eyebrow/fontSize', modes)),
+      fontWeight: String(getVariableByName('PageHero/eyebrow/fontWeight', modes)) as TextStyle['fontWeight'],
+      lineHeight: Number(getVariableByName('PageHero/eyebrow/lineHeight', modes)),
       textAlign: 'center',
     }
     const headlineStyle: TextStyle = {
-      color: (getVariableByName('PageHero/headline/color', modes) as string) || '#ffffff',
-      fontFamily: (getVariableByName('PageHero/headline/fontFamily', modes) as string) || 'System',
-      fontSize: Number(getVariableByName('PageHero/headline/fontSize', modes)) || 29,
-      fontWeight: String(getVariableByName('PageHero/headline/fontWeight', modes) || 900) as TextStyle['fontWeight'],
-      lineHeight: Number(getVariableByName('PageHero/headline/lineHeight', modes)) || 29,
+      color: (getVariableByName('PageHero/headline/color', modes) as string),
+      fontFamily: (getVariableByName('PageHero/headline/fontFamily', modes) as string),
+      fontSize: Number(getVariableByName('PageHero/headline/fontSize', modes)),
+      fontWeight: String(getVariableByName('PageHero/headline/fontWeight', modes)) as TextStyle['fontWeight'],
+      lineHeight: Number(getVariableByName('PageHero/headline/lineHeight', modes)),
       textAlign: 'center',
       width: '100%',
     }
     const supportingTextStyle: TextStyle = {
-      color: (getVariableByName('PageHero/supportingText/color', modes) as string) || '#ffffff',
-      fontFamily: (getVariableByName('PageHero/supportingText/fontFamily', modes) as string) || 'System',
-      fontSize: Number(getVariableByName('PageHero/supportingText/fontSize', modes)) || 12,
-      fontWeight: String(getVariableByName('PageHero/supportingText/fontWeight', modes) || 500) as TextStyle['fontWeight'],
-      lineHeight: Number(getVariableByName('PageHero/supportingText/lineHeight', modes)) || 16,
+      color: (getVariableByName('PageHero/supportingText/color', modes) as string),
+      fontFamily: (getVariableByName('PageHero/supportingText/fontFamily', modes) as string),
+      fontSize: Number(getVariableByName('PageHero/supportingText/fontSize', modes)),
+      fontWeight: String(getVariableByName('PageHero/supportingText/fontWeight', modes)) as TextStyle['fontWeight'],
+      lineHeight: Number(getVariableByName('PageHero/supportingText/lineHeight', modes)),
       textAlign: 'center',
     }
     const priceTextStyle: TextStyle = {
-      color: (getVariableByName('PageHero/body/color', modes) as string) || '#ffffff',
-      fontFamily: (getVariableByName('PageHero/body/fontFamily', modes) as string) || 'System',
-      fontSize: Number(getVariableByName('PageHero/body/fontSize', modes)) || 12,
-      fontWeight: String(getVariableByName('PageHero/body/fontWeight', modes) || 500) as TextStyle['fontWeight'],
-      lineHeight: Number(getVariableByName('PageHero/body/lineHeight', modes)) || 16,
+      color: (getVariableByName('PageHero/body/color', modes) as string),
+      fontFamily: (getVariableByName('PageHero/body/fontFamily', modes) as string),
+      fontSize: Number(getVariableByName('PageHero/body/fontSize', modes)),
+      fontWeight: String(getVariableByName('PageHero/body/fontWeight', modes)) as TextStyle['fontWeight'],
+      lineHeight: Number(getVariableByName('PageHero/body/lineHeight', modes)),
       textAlign: 'center',
     }
 
@@ -268,7 +268,7 @@ function FullscreenModal({
     [globalModes, propModes]
   )
 
-  const rootGap = Number(getVariableByName('fullScreenModal/gap', modes)) || 16
+  const rootGap = Number(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
@@ -283,7 +283,7 @@ function FullscreenModal({
   // 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 = useMemo<ViewStyle>(() => {
-    const base = Number(getVariableByName('actionFooter/padding/bottom', modes)) || 41
+    const base = Number(getVariableByName('actionFooter/padding/bottom', modes))
     return { paddingBottom: base + insets.bottom }
   }, [modes, insets.bottom])
 

package/src/components/Gauge/Gauge.tsx

@@ -145,34 +145,34 @@ function Gauge({
   const arcLength = Math.PI * radius
   const progress = clamp(value, min, max)
 
-  const titleColor = getVariableByName('gauge/title/color', modes) || '#0c0d10'
+  const titleColor = getVariableByName('gauge/title/color', modes)
   const titleFontSize = toNumber(getVariableByName('gauge/title/fontSize', modes), 23)
   const titleLineHeight = toNumber(getVariableByName('gauge/title/lineHeight', modes), 23)
-  const titleFontFamily = getVariableByName('gauge/title/fontFamily', modes) || 'JioType Var'
+  const titleFontFamily = getVariableByName('gauge/title/fontFamily', modes)
   const titleFontWeight = toFontWeight(getVariableByName('gauge/title/fontWeight', modes), '900')
   const titleHeight = toNumber(getVariableByName('gauge/title/height', modes), 46)
 
   const readoutGap = toNumber(getVariableByName('gauge/readout/gap', modes), 8)
   const readoutPadding = toNumber(getVariableByName('gauge/readout/padding', modes), 8)
-  const valueColor = getVariableByName('gauge/readout/value/color', modes) || '#0c0d10'
+  const valueColor = getVariableByName('gauge/readout/value/color', modes)
   const valueFontSize = toNumber(getVariableByName('gauge/readout/value/fontSize', modes), 36)
   const valueLineHeight = toNumber(getVariableByName('gauge/readout/value/lineHeight', modes), 36)
-  const valueFontFamily = getVariableByName('gauge/readout/value/fontFamily', modes) || 'JioType Var'
+  const valueFontFamily = getVariableByName('gauge/readout/value/fontFamily', modes)
   const valueFontWeight = toFontWeight(getVariableByName('gauge/readout/value/fontWeight', modes), '800')
 
-  const captionColor = getVariableByName('gauge/caption/color', modes) || '#0c0d10'
+  const captionColor = getVariableByName('gauge/caption/color', modes)
   const captionFontSize = toNumber(getVariableByName('gauge/caption/fontSize', modes), 14)
   const captionLineHeight = toNumber(getVariableByName('gauge/caption/lineHeight', modes), 18)
-  const captionFontFamily = getVariableByName('gauge/caption/fontFamily', modes) || 'JioType Var'
+  const captionFontFamily = getVariableByName('gauge/caption/fontFamily', modes)
   const captionFontWeight = toFontWeight(getVariableByName('gauge/caption/fontWeight', modes), '500')
 
   const trackColor = getStrokeColor(
     trackStyle,
-    getVariableByName('gauge/track/color', modes) || '#f5f5f6'
+    getVariableByName('gauge/track/color', modes)
   )
   const progressColor = getStrokeColor(
     progressStyle,
-    getVariableByName('gauge/progress/color', modes) || '#25ab21'
+    getVariableByName('gauge/progress/color', modes)
   )
 
   const containerStyle: ViewStyle = {

package/src/components/HoldingsCard/HoldingsCard.tsx

@@ -71,8 +71,8 @@ export default function HoldingsCard({
     disableTruncation,
 }: HoldingsCardProps) {
     // ---- Container tokens ----
-    const containerFill = getVariableByName('holdingsCard/container/fill', modes) || '#fef4e5'
-    const containerStroke = getVariableByName('holdingsCard/container/stroke', modes) || '#fde8c9'
+    const containerFill = getVariableByName('holdingsCard/container/fill', modes)
+    const containerStroke = getVariableByName('holdingsCard/container/stroke', modes)
     const containerStrokeWeight = parseFloat(
         (getVariableByName('holdingsCard/container/strokeWeight', modes) ?? 1).toString()
     )
@@ -101,24 +101,24 @@ export default function HoldingsCard({
     const heroGap = parseFloat(
         (getVariableByName('holdingsCard/hero/gap', modes) ?? 4).toString()
     )
-    const heroLabelColor = getVariableByName('holdingsCard/hero/label/color', modes) || '#0f0d0a'
+    const heroLabelColor = getVariableByName('holdingsCard/hero/label/color', modes)
     const heroLabelFontSize = parseFloat(
         (getVariableByName('holdingsCard/hero/label/fontSize', modes) ?? 12).toString()
     )
     const heroLabelFontFamily =
-        getVariableByName('holdingsCard/hero/label/fontFamily', modes) || 'JioType Var'
+        getVariableByName('holdingsCard/hero/label/fontFamily', modes)
     const heroLabelLineHeight = parseFloat(
         (getVariableByName('holdingsCard/hero/label/lineHeight', modes) ?? 16).toString()
     )
     const heroLabelFontWeight =
         (getVariableByName('holdingsCard/hero/label/fontWeight', modes) ?? '400').toString()
 
-    const heroValueColor = getVariableByName('holdingsCard/hero/value/color', modes) || '#0f0d0a'
+    const heroValueColor = getVariableByName('holdingsCard/hero/value/color', modes)
     const heroValueFontSize = parseFloat(
         (getVariableByName('holdingsCard/hero/value/fontSize', modes) ?? 20).toString()
     )
     const heroValueFontFamily =
-        getVariableByName('holdingsCard/hero/value/fontFamily', modes) || 'JioType Var'
+        getVariableByName('holdingsCard/hero/value/fontFamily', modes)
     const heroValueLineHeight = parseFloat(
         (getVariableByName('holdingsCard/hero/value/lineHeight', modes) ?? 22).toString()
     )
@@ -127,12 +127,12 @@ export default function HoldingsCard({
 
     // ---- Details grid tokens ----
     const detailLabelColor =
-        getVariableByName('holdingsCard/detailsGrid/label/color', modes) || '#2c251b'
+        getVariableByName('holdingsCard/detailsGrid/label/color', modes)
     const detailLabelFontSize = parseFloat(
         (getVariableByName('holdingsCard/detailsGrid/label/fontSize', modes) ?? 10).toString()
     )
     const detailLabelFontFamily =
-        getVariableByName('holdingsCard/detailsGrid/label/fontFamily', modes) || 'JioType Var'
+        getVariableByName('holdingsCard/detailsGrid/label/fontFamily', modes)
     const detailLabelLineHeight = parseFloat(
         (getVariableByName('holdingsCard/detailsGrid/label/lineHeight', modes) ?? 12).toString()
     )
@@ -140,12 +140,12 @@ export default function HoldingsCard({
         (getVariableByName('holdingsCard/detailsGrid/label/fontWeight', modes) ?? '500').toString()
 
     const detailValueColor =
-        getVariableByName('holdingsCard/detailsGrid/value/color', modes) || '#0f0d0a'
+        getVariableByName('holdingsCard/detailsGrid/value/color', modes)
     const detailValueFontSize = parseFloat(
         (getVariableByName('holdingsCard/detailsGrid/value/fontSize', modes) ?? 12).toString()
     )
     const detailValueFontFamily =
-        getVariableByName('holdingsCard/detailsGrid/value/fontFamily', modes) || 'JioType Var'
+        getVariableByName('holdingsCard/detailsGrid/value/fontFamily', modes)
     const detailValueLineHeight = parseFloat(
         (getVariableByName('holdingsCard/detailsGrid/value/lineHeight', modes) ?? 14).toString()
     )

package/src/components/Icon/Icon.tsx

@@ -55,12 +55,12 @@ interface IconTokens {
 }
 
 function resolveIconTokens(modes: Modes): IconTokens {
-  const iconColor = (getVariableByName('icon/color', modes) || '#ad8444') as string
-  const iconSize = (getVariableByName('icon/size', modes) || 18) as number
-  const paddingLeft = (getVariableByName('icon/padding/left', modes) || 0) as number
-  const paddingTop = (getVariableByName('icon/padding/top', modes) || 0) as number
-  const paddingRight = (getVariableByName('icon/padding/right', modes) || 0) as number
-  const paddingBottom = (getVariableByName('icon/padding/bottom', modes) || 0) as number
+  const iconColor = (getVariableByName('icon/color', modes)) as string
+  const iconSize = (getVariableByName('icon/size', modes)) as number
+  const paddingLeft = (getVariableByName('icon/padding/left', modes)) as number
+  const paddingTop = (getVariableByName('icon/padding/top', modes)) as number
+  const paddingRight = (getVariableByName('icon/padding/right', modes)) as number
+  const paddingBottom = (getVariableByName('icon/padding/bottom', modes)) as number
 
   return {
     containerStyle: {

package/src/components/IconCapsule/IconCapsule.tsx

@@ -30,13 +30,13 @@ interface IconCapsuleTokens {
 }
 
 function resolveIconCapsuleTokens(modes: Modes): IconCapsuleTokens {
-  const size = (getVariableByName('iconCapsule/size', modes) || 42) as number
-  const radiusRaw = (getVariableByName('iconCapsule/radius', modes) || 9999) as number
-  const backgroundColor = (getVariableByName('iconCapsule/background', modes) || '#cfa159') as string
-  const borderColor = (getVariableByName('iconCapsule/border/color', modes) || 'rgba(255,255,255,0)') as string
-  const borderSize = (getVariableByName('iconCapsule/border/size', modes) || 1) as number
-  const iconColor = (getVariableByName('iconCapsule/icon/color', modes) || '#0f0d0a') as string
-  const iconSize = (getVariableByName('iconCapsule/icon/size', modes) || 18) as number
+  const size = (getVariableByName('iconCapsule/size', modes)) as number
+  const radiusRaw = (getVariableByName('iconCapsule/radius', modes)) as number
+  const backgroundColor = (getVariableByName('iconCapsule/background', modes)) as string
+  const borderColor = (getVariableByName('iconCapsule/border/color', modes)) as string
+  const borderSize = (getVariableByName('iconCapsule/border/size', modes)) as number
+  const iconColor = (getVariableByName('iconCapsule/icon/color', modes)) as string
+  const iconSize = (getVariableByName('iconCapsule/icon/size', modes)) as number
 
   // 9999 is the design-token sentinel for "perfect circle"
   const borderRadius = radiusRaw === 9999 ? size / 2 : radiusRaw

package/src/components/InputSearch/InputSearch.tsx

@@ -27,13 +27,13 @@ function SupportText({
     style
 }: SupportTextProps) {
     // Resolve variables
-    const gap = getVariableByName('supportText/gap', modes) || 4
-    const foreground = getVariableByName('supportText/foreground', modes) || '#0c0d10'
-    const iconSize = getVariableByName('supportText/icon/size', modes) || 16
-    const fontSize = getVariableByName('supportText/fontSize', modes) || 12
-    const fontFamily = getVariableByName('supportText/fontFamily', modes) || 'System'
-    const fontWeightRaw = getVariableByName('supportText/fontWeight', modes) || 500
-    const lineHeight = getVariableByName('supportText/lineHeight', modes) || 16
+    const gap = getVariableByName('supportText/gap', modes)
+    const foreground = getVariableByName('supportText/foreground', modes)
+    const iconSize = getVariableByName('supportText/icon/size', modes)
+    const fontSize = getVariableByName('supportText/fontSize', modes)
+    const fontFamily = getVariableByName('supportText/fontFamily', modes)
+    const fontWeightRaw = getVariableByName('supportText/fontWeight', modes)
+    const lineHeight = getVariableByName('supportText/lineHeight', modes)
 
     const fontWeight = (typeof fontWeightRaw === 'number' ? fontWeightRaw.toString() : fontWeightRaw) as TextStyle['fontWeight']
 
@@ -105,7 +105,7 @@ const InputSearch = forwardRef<RNTextInput, InputSearchProps>(function InputSear
         'InputState': isFocused ? 'Active' : 'Idle'
     }
 
-    const formFieldGap = getVariableByName('formField/gap', componentModes) || 8
+    const formFieldGap = getVariableByName('formField/gap', componentModes)
 
     // If state is active (has text) and focused? Or just if it has text?
     // Design typically: Active state (focused) shows clear button if there is text.
@@ -131,7 +131,7 @@ const InputSearch = forwardRef<RNTextInput, InputSearchProps>(function InputSear
                 <Icon
                     name="ic_close"
                     size={18}
-                    color={getVariableByName('textInput/icon/color', componentModes) || '#24262b'}
+                    color={getVariableByName('textInput/icon/color', componentModes)}
                 />
             </Pressable>
         </React.Fragment>

package/src/components/InstitutionBadge/InstitutionBadge.tsx

@@ -89,15 +89,13 @@ function resolveInstitutionBadgeTokens(
   const gap = toNumber(getVariableByName('institutionBadge/gap', modes), 8)
 
   const foreground =
-    (getVariableByName('institutionBadge/foreground', modes) as string) ||
-    '#080d1a'
+    (getVariableByName('institutionBadge/foreground', modes) as string)
   const fontSize = toNumber(
     getVariableByName('institutionBadge/fontSize', modes),
     14
   )
   const fontFamily =
-    (getVariableByName('institutionBadge/fontFamily', modes) as string) ||
-    'JioType Var'
+    (getVariableByName('institutionBadge/fontFamily', modes) as string)
   const lineHeight = toNumber(
     getVariableByName('institutionBadge/lineHeight', modes),
     18
@@ -117,8 +115,7 @@ function resolveInstitutionBadgeTokens(
   // 9999 is the design-token sentinel for "perfect circle".
   const avatarRadius = avatarRadiusRaw === 9999 ? avatarSize / 2 : avatarRadiusRaw
   const avatarBorderColor =
-    (getVariableByName('avatar/border/color', modes) as string) ||
-    'rgba(255,255,255,0)'
+    (getVariableByName('avatar/border/color', modes) as string)
   const avatarBorderSize = toNumber(
     getVariableByName('avatar/border/size', modes),
     1

package/src/components/ListGroup/ListGroup.tsx

@@ -62,19 +62,19 @@ function ListGroup({
   ...rest
 }: ListGroupProps) {
   // Resolve container tokens
-  const backgroundColor = getVariableByName('listGroup/background', modes) || 'rgba(255,255,255,0)'
+  const backgroundColor = getVariableByName('listGroup/background', modes)
   // The current exported token aliases a missing Figma variable. Keep the
   // transparent fallback without logging the missing alias on every render.
   const borderColor = 'rgba(255,255,255,0)'
-  const borderWidth = getVariableByName('listGroup/borderWidth', modes) || 0
-  const gap = getVariableByName('listGroup/gap', modes) || 12
+  const borderWidth = getVariableByName('listGroup/borderWidth', modes)
+  const gap = getVariableByName('listGroup/gap', modes)
 
   // Resolve label typography tokens
-  const labelColor = getVariableByName('listGroup/label/color', modes) || '#24262b'
-  const labelFontSize = getVariableByName('listGroup/fontSize', modes) || 14
-  const labelLineHeight = getVariableByName('listGroup/lineHeight', modes) || 18
-  const labelFontFamily = getVariableByName('listGroup/fontFamily', modes) || 'System'
-  const labelFontWeightRaw = getVariableByName('listGroup/fontWeight', modes) || 500
+  const labelColor = getVariableByName('listGroup/label/color', modes)
+  const labelFontSize = getVariableByName('listGroup/fontSize', modes)
+  const labelLineHeight = getVariableByName('listGroup/lineHeight', modes)
+  const labelFontFamily = getVariableByName('listGroup/fontFamily', modes)
+  const labelFontWeightRaw = getVariableByName('listGroup/fontWeight', modes)
   const labelFontWeight = typeof labelFontWeightRaw === 'number' ? labelFontWeightRaw.toString() : labelFontWeightRaw
 
   const containerStyle: ViewStyle = {

package/src/components/ListItem/ListItem.tsx

@@ -107,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
 

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

@@ -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
@@ -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,