jfs-components 0.1.12 → 0.1.18

package/src/components/DropdownInput/DropdownInput.tsx

@@ -186,10 +186,9 @@ export type DropdownInputProps = {
 function useChevronTokens(modes: Modes) {
     return useMemo(() => {
         const iconSize =
-            parseInt(getVariableByName('input/iconSize', modes), 10) || 32
+            parseInt(getVariableByName('input/iconSize', modes), 10)
         const iconColor =
-            (getVariableByName('iconButton/icon/color', modes) as string) ||
-            '#0f0d0a'
+            (getVariableByName('iconButton/icon/color', modes) as string)
         return { iconSize, iconColor }
     }, [modes])
 }
@@ -206,11 +205,9 @@ function toNumber(value: unknown, fallback: number): number {
 function useFormFieldTokens(modes: Modes) {
     return useMemo(() => {
         const labelColor =
-            (getVariableByName('formField/label/color', modes) as string) ||
-            '#000000'
+            (getVariableByName('formField/label/color', modes) as string)
         const labelFontFamily =
-            (getVariableByName('formField/label/fontFamily', modes) as string) ||
-            'JioType Var'
+            (getVariableByName('formField/label/fontFamily', modes) as string)
         const labelFontSize = toNumber(
             getVariableByName('formField/label/fontSize', modes),
             14
@@ -220,8 +217,7 @@ function useFormFieldTokens(modes: Modes) {
             17
         )
         const labelFontWeight =
-            (getVariableByName('formField/label/fontWeight', modes) as string) ||
-            '500'
+            (getVariableByName('formField/label/fontWeight', modes) as string)
 
         const gap = toNumber(getVariableByName('formField/gap', modes), 8)
 
@@ -238,8 +234,7 @@ function useFormFieldTokens(modes: Modes) {
             8
         )
         const inputBackground =
-            (getVariableByName('formField/input/background', modes) as string) ||
-            '#ffffff'
+            (getVariableByName('formField/input/background', modes) as string)
         const inputFontSize = toNumber(
             getVariableByName('formField/input/label/fontSize', modes),
             16
@@ -252,26 +247,24 @@ function useFormFieldTokens(modes: Modes) {
             (getVariableByName(
                 'formField/input/label/fontFamily',
                 modes
-            ) as string) || 'JioType Var'
+            ) as string)
         const inputFontWeight =
             (getVariableByName(
                 'formField/input/label/fontWeight',
                 modes
-            ) as string) || '400'
+            ) as string)
         const inputTextColor =
             (getVariableByName(
                 'states/formField/input/label/color',
                 modes
             ) as string) ||
-            (getVariableByName('formField/input/label/color', modes) as string) ||
-            '#24262b'
+            (getVariableByName('formField/input/label/color', modes) as string)
         const inputBorderColor =
             (getVariableByName(
                 'states/formField/input/border/color',
                 modes
             ) as string) ||
-            (getVariableByName('formField/input/border/color', modes) as string) ||
-            '#b5b6b7'
+            (getVariableByName('formField/input/border/color', modes) as string)
         // Figma spec: 1.5px. Using parseFloat (via toNumber) preserves the
         // fractional value — parseInt was truncating it to 1, leaving the
         // resolved row height ~1px shorter than the Figma reference.

package/src/components/EmptyState/EmptyState.tsx

@@ -60,26 +60,26 @@ function EmptyState({
     const modes = { ...globalModes, ...propModes }
 
     // Container Tokens
-    const gap = getVariableByName('emptyState/gap', modes) || 24
-    const padding = getVariableByName('emptyState/padding', modes) || 4
-    const radius = getVariableByName('emptyState/radius', modes) || 16
+    const gap = getVariableByName('emptyState/gap', modes)
+    const padding = getVariableByName('emptyState/padding', modes)
+    const radius = getVariableByName('emptyState/radius', modes)
 
     // Content Wrap Tokens
-    const contentGap = getVariableByName('emptyState/content/gap', modes) || 16
+    const contentGap = getVariableByName('emptyState/content/gap', modes)
 
     // Title Tokens
-    const titleColor = getVariableByName('emptyState/title/color', modes) || '#0d0d0f'
-    const titleFontSize = getVariableByName('emptyState/title/fontSize', modes) || 16
-    const titleFontFamily = getVariableByName('emptyState/title/fontFamily', modes) || 'System'
-    const titleLineHeight = getVariableByName('emptyState/title/lineHeight', modes) || 18
-    const titleFontWeight = getVariableByName('emptyState/title/fontWeight', modes) || 700
+    const titleColor = getVariableByName('emptyState/title/color', modes)
+    const titleFontSize = getVariableByName('emptyState/title/fontSize', modes)
+    const titleFontFamily = getVariableByName('emptyState/title/fontFamily', modes)
+    const titleLineHeight = getVariableByName('emptyState/title/lineHeight', modes)
+    const titleFontWeight = getVariableByName('emptyState/title/fontWeight', modes)
 
     // Body Tokens
-    const bodyColor = getVariableByName('emptyState/body/color', modes) || '#1a1c1f'
-    const bodyFontSize = getVariableByName('emptyState/body/fontSize', modes) || 12
-    const bodyFontFamily = getVariableByName('emptyState/body/fontFamily', modes) || 'System'
-    const bodyLineHeight = getVariableByName('emptyState/body/lineHeight', modes) || 16
-    const bodyFontWeight = getVariableByName('emptyState/body/fontWeight', modes) || 400
+    const bodyColor = getVariableByName('emptyState/body/color', modes)
+    const bodyFontSize = getVariableByName('emptyState/body/fontSize', modes)
+    const bodyFontFamily = getVariableByName('emptyState/body/fontFamily', modes)
+    const bodyLineHeight = getVariableByName('emptyState/body/lineHeight', modes)
+    const bodyFontWeight = getVariableByName('emptyState/body/fontWeight', modes)
 
 
     const containerStyle: ViewStyle = {

package/src/components/FilterBar/FilterBar.tsx

@@ -74,8 +74,8 @@ function FilterBar({
     borderColor: isFocused ? '#222' : 'transparent',
   }
   // Resolve container tokens
-  const paddingHorizontal = getVariableByName('filterBar/padding/horizontal', modes) || 16
-  const paddingVertical = getVariableByName('filterBar/padding/vertical', modes) || 10
+  const paddingHorizontal = getVariableByName('filterBar/padding/horizontal', modes)
+  const paddingVertical = getVariableByName('filterBar/padding/vertical', modes)
 
   const resolvedAccessibilityLabel = accessibilityLabel || 'Search filter'
 

package/src/components/Form/Form.tsx

@@ -72,9 +72,9 @@ function Form({
     [validationErrors, onFieldChange],
   )
 
-  const gap = parseInt(getVariableByName('form/gap', modes), 10) || 12
-  const paddingHorizontal = parseInt(getVariableByName('form/padding/horizontal', modes), 10) || 0
-  const paddingVertical = parseInt(getVariableByName('form/padding/vertical', modes), 10) || 0
+  const gap = parseInt(getVariableByName('form/gap', modes), 10)
+  const paddingHorizontal = parseInt(getVariableByName('form/padding/horizontal', modes), 10)
+  const paddingVertical = parseInt(getVariableByName('form/padding/vertical', modes), 10)
 
   const containerStyle: ViewStyle = useMemo(() => ({
     gap,

package/src/components/FormField/FormField.tsx

@@ -126,10 +126,9 @@ function useFormFieldTokens(modes: Modes) {
 
     // Label (Figma: 14/17 medium, color #0c0d10)
     const labelColor =
-      (getVariableByName('formField/label/color', modes) as string) || '#0c0d10'
+      (getVariableByName('formField/label/color', modes) as string)
     const labelFontFamily =
-      (getVariableByName('formField/label/fontFamily', modes) as string) ||
-      'JioType Var'
+      (getVariableByName('formField/label/fontFamily', modes) as string)
     const labelFontSize = toNumber(
       getVariableByName('formField/label/fontSize', modes),
       14,
@@ -168,19 +167,16 @@ function useFormFieldTokens(modes: Modes) {
       45,
     )
     const inputFontFamily =
-      (getVariableByName('formField/input/label/fontFamily', modes) as string) ||
-      'JioType Var'
+      (getVariableByName('formField/input/label/fontFamily', modes) as string)
     const inputFontWeight = toFontWeight(
       getVariableByName('formField/input/label/fontWeight', modes),
       '400',
     )
 
     const inputBackground =
-      (getVariableByName('formField/input/background', modes) as string) ||
-      '#ffffff'
+      (getVariableByName('formField/input/background', modes) as string)
     const inputBorderColor =
-      (getVariableByName('formField/input/border/color', modes) as string) ||
-      '#b5b6b7'
+      (getVariableByName('formField/input/border/color', modes) as string)
 
     if (__DEV__) {
       console.warn('[FormField] border color (modes changed)', {
@@ -194,8 +190,7 @@ function useFormFieldTokens(modes: Modes) {
     }
 
     const inputTextColor =
-      (getVariableByName('formField/input/label/color', modes) as string) ||
-      '#24262b'
+      (getVariableByName('formField/input/label/color', modes) as string)
 
     return {
       gap,

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